/* =========================================================================
   DEPTHS COFFEE — legal.css · body.pg-legal
   policy.html · privacy.html · terms.html (document shell) · 404.html
   No direct design: document shell from the PDP story split (sticky side column),
   switcher rows from the ADM queue rows (5px acc bar), SPEC/KV rows (PDP 235-252),
   NUMLIST (CART 226-228), 404 hero from HOME 105-127 + cell grid (HOME 513-534).
   Hooks: #doc-title · #doc-body.legal-doc · nav#doc-toc[data-spy] (grid-ui.js scroll-spy
   adds a.on) · DLEGAL.renderDoc → .doc-lead .doc-ch .doc-sec .doc-h .doc-n .doc-list .doc-note
   ========================================================================= */
@layer pages {

  /* ---- document shell --------------------------------------------------- */
  body.pg-legal .doc-page { padding-block: clamp(28px,4vw,56px) clamp(56px,7vw,110px); }
  body.pg-legal .doc-shell { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); align-items: start; gap: clamp(28px,5vw,80px); }
  body.pg-legal .doc-side {
    position: sticky; top: calc(var(--head-h) + 22px);
    max-height: calc(100vh - var(--head-h) - 44px); overflow-y: auto; overscroll-behavior: contain;
    padding: 2px 4px 8px 2px; scrollbar-width: thin; scrollbar-color: var(--ink-22) transparent;
  }
  body.pg-legal .doc-side h1 { margin-top: 14px; font-size: clamp(28px,3vw,40px); line-height: 1.1; letter-spacing: -.05em; }

  /* document switcher — queue rows with a 5px bar (ADM 196-215) */
  body.pg-legal .doc-switch { display: flex; flex-direction: column; margin-top: 24px; border: 1px solid var(--ink); }
  body.pg-legal .doc-switch a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-70); transition: background var(--t-fast), color var(--t-fast); }
  body.pg-legal .doc-switch a:last-child { border-bottom: 0; }
  body.pg-legal .doc-switch a::before { content: ""; flex: none; width: 5px; height: 24px; background: var(--track); transition: background var(--t-fast); }
  body.pg-legal .doc-switch .t { flex: 1 1 auto; min-width: 0; font: 600 13.5px/1.35 var(--kr); letter-spacing: -.02em; }
  body.pg-legal .doc-switch .k { flex: none; font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); }
  body.pg-legal .doc-switch a:hover { background: var(--panel-2); color: var(--ink); }
  body.pg-legal .doc-switch a[aria-current] { background: var(--panel-2); color: var(--ink); }
  body.pg-legal .doc-switch a[aria-current]::before { background: var(--acc); }
  body.pg-legal .doc-switch a[aria-current] .k { color: var(--acc); }

  /* table of contents (scroll-spy) */
  body.pg-legal .doc-toc { margin-top: 26px; }
  body.pg-legal .doc-toc .toc-k { display: block; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font: 600 10.5px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-62); }
  body.pg-legal .doc-toc ol { margin: 0; padding: 0; list-style: none; }
  body.pg-legal .doc-toc a { display: flex; align-items: baseline; gap: 10px; padding: 8px 0 8px 12px; border-left: 2px solid transparent; font: 400 13.5px/1.45 var(--kr); letter-spacing: -.015em; color: var(--ink-66); transition: color var(--t-fast), border-color var(--t-fast); }
  body.pg-legal .doc-toc .toc > li > a { border-bottom: 1px solid var(--line-soft); }
  body.pg-legal .doc-toc a .n { flex: none; min-width: 2.2em; font: 600 10.5px/1.4 var(--mono); letter-spacing: .04em; color: var(--acc); }
  body.pg-legal .doc-toc .toc-ch > a { font-weight: 700; color: var(--ink-78); }
  body.pg-legal .doc-toc .toc-ch > a .n, body.pg-legal .doc-toc .toc-sub a .n { min-width: 3.9em; }
  body.pg-legal .doc-toc .toc-sub a { padding: 6px 0 6px 12px; font-size: 13px; }
  body.pg-legal .doc-toc .toc-sub a .n { color: var(--ink-45); font-weight: 400; }
  body.pg-legal .doc-toc a:hover { color: var(--ink); }
  body.pg-legal .doc-toc a.on, body.pg-legal .doc-toc a[aria-current] { border-left-color: var(--acc); color: var(--ink); font-weight: 600; }
  body.pg-legal .doc-toc .toc-sub a.on .n { color: var(--acc); }
  body.pg-legal .doc-toc .toc-sub { display: none; padding: 4px 0 8px; border-bottom: 1px solid var(--line-soft); }
  @media (min-width: 761px) {
    /* articles expand under the chapter in view (first chapter before any scroll) */
    body.pg-legal .doc-toc .toc-ch:has(a.on) > .toc-sub,
    body.pg-legal .doc-toc:not(:has(a.on)) .toc-ch:first-child > .toc-sub { display: block; }
  }
  body.pg-legal .doc-side .ctc { margin-top: 24px; font-size: 11.5px; line-height: 1.9; }

  /* document body (prose max 680px) */
  body.pg-legal .doc-main { min-width: 0; padding-left: clamp(24px,4vw,64px); border-left: 1px solid var(--line); }
  body.pg-legal .legal-doc { max-width: 680px; font-size: 14.5px; line-height: 1.85; color: var(--ink-70); }
  body.pg-legal .legal-doc b { font-weight: 600; color: var(--ink); }
  body.pg-legal .doc-lead { padding-bottom: 22px; border-bottom: 1px solid var(--ink); }
  body.pg-legal .doc-lead p { font-size: 15.5px; line-height: 1.85; color: var(--ink-78); }
  body.pg-legal .doc-ch { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--ink); font: 800 clamp(20px,2.2vw,24px)/1.25 var(--kr); letter-spacing: -.04em; color: var(--ink); }
  body.pg-legal .legal-doc > .doc-ch:first-child { margin-top: 0; }
  body.pg-legal .doc-n { display: block; font: 600 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
  body.pg-legal .doc-ch .doc-n { margin-bottom: 8px; letter-spacing: .14em; }
  body.pg-legal .doc-sec { padding: 24px 0; border-bottom: 1px solid var(--line); }
  body.pg-legal .legal-doc > .doc-sec:first-child { padding-top: 0; }
  body.pg-legal .doc-ch + .doc-sec { border-top: 0; }
  body.pg-legal .doc-sec:has(+ .doc-ch) { border-bottom: 0; } /* the chapter's ink rule follows */
  body.pg-legal .doc-sec--ch { padding-top: 12px; }
  body.pg-legal .doc-h h2, body.pg-legal .doc-h h3 { margin-top: 6px; font: 700 18px/1.4 var(--kr); letter-spacing: -.03em; color: var(--ink); }
  body.pg-legal .doc-sec p { margin-top: 10px; }
  body.pg-legal .doc-sec > p:first-of-type { margin-top: 12px; }
  body.pg-legal .doc-sec .notice { margin-top: 16px; font-size: 14px; line-height: 1.75; }
  body.pg-legal .doc-list { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
  body.pg-legal .doc-list li { position: relative; padding: 10px 0 10px 18px; border-bottom: 1px solid var(--line-soft); font-size: 14px; line-height: 1.7; }
  body.pg-legal .doc-list li::before { content: ""; position: absolute; top: 19px; left: 2px; width: 5px; height: 5px; background: var(--acc); }
  body.pg-legal .doc-list li:has(> .k) { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 16px; padding-left: 0; }
  body.pg-legal .doc-list li:has(> .k)::before { display: none; }
  body.pg-legal .doc-list .k { padding-top: 3px; font: 400 11px/1.6 var(--mono); letter-spacing: .03em; color: var(--ink-62); }
  body.pg-legal .legal-doc ul.numlist { margin: 14px 0 4px; padding: 0; list-style: none; }
  body.pg-legal .legal-doc .numlist .f { padding: 11px 0; font: 400 14px/1.7 var(--kr); letter-spacing: -.01em; }
  body.pg-legal .legal-doc .numlist .n { padding-top: 3px; font: 600 11px/1.4 var(--mono); }
  body.pg-legal .legal-doc .kv { gap: 0; margin-top: 14px; border-top: 1px solid var(--ink); }
  body.pg-legal .legal-doc .kv { grid-template-columns: minmax(100px, 132px) minmax(0, 1fr); }
  body.pg-legal .legal-doc .kv dt { padding: 13px 14px 13px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11px; line-height: 1.7; }
  body.pg-legal .legal-doc .kv dd { padding: 11px 0 11px 16px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.75; }
  /* a list that closes a section drops its last rule (the section rule follows) */
  body.pg-legal .doc-sec > .numlist:last-child .f:last-child,
  body.pg-legal .doc-sec > .doc-list:last-child li:last-child,
  body.pg-legal .doc-sec > .kv:last-child :is(dt:nth-last-child(2), dd:last-child) { border-bottom: 0; }
  body.pg-legal .doc-sec:has(> :is(.numlist, .doc-list, .kv):last-child) { padding-bottom: 14px; }
  body.pg-legal .doc-note, body.pg-legal .doc-main > .doc-note { margin-top: 24px; font: 400 11.5px/1.8 var(--mono); letter-spacing: .02em; color: var(--ink-62); }
  body.pg-legal .doc-note p + p { margin-top: 6px; }
  body.pg-legal .doc-note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 3px; }
  body.pg-legal .doc-note a:hover { color: var(--acc); }

  /* ---- 404 --------------------------------------------------------------- */
  body.pg-legal .nf { padding-block: clamp(30px,5vw,72px) clamp(56px,7vw,110px); }
  body.pg-legal .nf-hero { padding-bottom: clamp(36px,5vw,64px); }
  body.pg-legal .nf-code {
    margin-top: clamp(18px,2.4vw,30px);
    font-family: var(--grot); font-stretch: var(--st-xl); font-weight: 800;
    font-size: clamp(96px,18vw,220px); line-height: .84; letter-spacing: -.03em;
    color: transparent; -webkit-text-stroke: 1.6px var(--ink);
  }
  body.pg-legal .nf-code .s { -webkit-text-stroke-color: var(--acc); }
  body.pg-legal .nf-hero h1 { margin-top: clamp(22px,3vw,36px); font-size: clamp(28px,4.6vw,54px); line-height: 1.06; letter-spacing: -.045em; }
  body.pg-legal .nf-hero .lead { max-width: 460px; margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--ink-62); }
  body.pg-legal .nf-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px,2.8vw,34px); }
  body.pg-legal .nf-links { --cell-min: 240px; }
  body.pg-legal .nf-links > a { display: flex; flex-direction: column; gap: 10px; min-height: 168px; color: var(--ink); transition: background var(--t-btn); }
  body.pg-legal .nf-links > a:hover { background: var(--panel); color: var(--ink); }
  body.pg-legal .nf-links .n { font: 600 11px/1.4 var(--mono); letter-spacing: .1em; color: var(--acc); }
  body.pg-legal .nf-links .c { display: flex; flex-direction: column; gap: 6px; }
  body.pg-legal .nf-links b { font: 700 18px/1.35 var(--kr); letter-spacing: -.03em; }
  body.pg-legal .nf-links .d { font: 400 11.5px/1.6 var(--mono); letter-spacing: .02em; color: var(--ink-62); }
  body.pg-legal .nf-links .go { margin-top: auto; font: 600 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
  body.pg-legal .nf-links > a:hover .go { color: var(--ink); }

  /* ---- mobile ≤760 ------------------------------------------------------- */
  @media (max-width: 760px) {
    body.pg-legal .doc-page { padding-block: 20px 44px; }
    body.pg-legal .doc-shell { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    body.pg-legal .doc-side { display: contents; }
    body.pg-legal .doc-side h1 { margin-top: 10px; font-size: 28px; }

    /* switcher → sticky chip scroller under the 54px header */
    body.pg-legal .doc-switch {
      position: sticky; top: var(--head-h); z-index: 40;
      flex-direction: row; gap: 8px; overflow-x: auto;
      margin: 16px calc(var(--gut) * -1) 0; padding: 9px var(--gut);
      border: 0; border-bottom: 1px solid var(--line);
      background: rgba(252,252,250,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      scrollbar-width: none;
    }
    body.pg-legal .doc-switch::-webkit-scrollbar { display: none; }
    body.pg-legal .doc-switch a { flex: none; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); }
    body.pg-legal .doc-switch a:last-child { border-bottom: 1px solid var(--line); }
    body.pg-legal .doc-switch a::before { display: none; }
    body.pg-legal .doc-switch .t { font-size: 13px; white-space: nowrap; }
    body.pg-legal .doc-switch .k { display: none; }
    body.pg-legal .doc-switch a[aria-current] { border-color: var(--ink); background: var(--ink); color: var(--paper); }

    body.pg-legal .doc-toc { margin-top: 20px; }
    body.pg-legal .doc-toc .toc-sub { display: none; }
    body.pg-legal .doc-toc a { min-height: 40px; padding-left: 0; border-left: 0; font-size: 13.5px; }
    body.pg-legal .doc-toc a.on, body.pg-legal .doc-toc a[aria-current] { font-weight: 400; color: var(--ink-66); }
    body.pg-legal .doc-toc .toc-ch > a.on, body.pg-legal .doc-toc .toc-ch > a[aria-current] { font-weight: 700; color: var(--ink-78); }
    body.pg-legal .doc-main { order: 1; margin-top: 26px; padding-left: 0; border-left: 0; }
    body.pg-legal .doc-side .ctc { order: 2; margin-top: 28px; }
    body.pg-legal .legal-doc [id], body.pg-legal .doc-main [id] { scroll-margin-top: calc(var(--head-h) + 76px); }

    body.pg-legal .legal-doc { font-size: 14px; }
    body.pg-legal .doc-lead p { font-size: 14.5px; }
    body.pg-legal .doc-ch { margin-top: 36px; font-size: 20px; }
    body.pg-legal .doc-sec { padding: 20px 0; }
    body.pg-legal .doc-h h2, body.pg-legal .doc-h h3 { font-size: 16px; }
    body.pg-legal .doc-list li:has(> .k) { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    body.pg-legal .legal-doc .kv { grid-template-columns: minmax(84px, 100px) minmax(0, 1fr); }
    body.pg-legal .legal-doc .kv dt { padding-right: 10px; }
    body.pg-legal .legal-doc .kv dd { padding-left: 12px; font-size: 13.5px; }

    body.pg-legal .nf { padding-block: 24px 44px; }
    body.pg-legal .nf-code { -webkit-text-stroke-width: 1.3px; }
    body.pg-legal .nf-hero h1 { font-size: 26px; }
    body.pg-legal .nf-hero .lead { font-size: 14px; }
    body.pg-legal .nf-cta .btn { flex: 1 1 100%; }
    body.pg-legal .nf-links > a { flex-direction: row; align-items: center; gap: 14px; min-height: 0; padding: 16px; }
    body.pg-legal .nf-links .c { flex: 1 1 auto; min-width: 0; gap: 2px; }
    body.pg-legal .nf-links b { font-size: 15px; }
    body.pg-legal .nf-links .d { font-size: 10.5px; }
    body.pg-legal .nf-links .go { margin-top: 0; }
  }
}