/* ─── Legal + culture refinements (Apple-design pass) ────────────────────────
   Scoped to .n-lgl / .n-cul, linked only by the five legal pages and
   culture.html. Layout, type and wayfinding only — no copy, no new colour. */

/* Where am I, where else can I go: the five legal documents as siblings,
   the current one marked. The footer is the only other route to them. */
.n-lgl-docs {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  font-size: var(--size-caption); line-height: var(--leading-ui);
}
.n-lgl-docs a { color: var(--text-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-niro); }
.n-lgl-docs a[aria-current="page"] {
  color: var(--text-primary); font-weight: var(--weight-semibold);
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
@media (hover: hover) and (pointer: fine) {
  .n-lgl-docs a:hover { color: var(--text-primary); }
}

/* "Last updated" is metadata, not the first sentence of the policy. */
.n-lgl-body > p.n-lgl-meta { font-family: var(--font-mono); font-size: var(--size-caption); color: var(--text-muted); }
.n-lgl-meta strong { font-weight: var(--weight-medium); color: inherit; }

/* Contents label: an eyebrow, so the whole eyebrow recipe (DESIGN.md), not
   11px faint micro — that was the lowest-contrast text on the page. */
.n-lgl-toc-head {
  font-size: var(--size-eyebrow); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow); color: var(--text-muted);
}

/* A sticky list taller than the viewport hides its last entries (Terms has
   17). Cap it and let it scroll; the padding keeps focus rings unclipped. */
@media (min-width: 901px) {
  .n-lgl-toc {
    max-height: calc(100vh - var(--nav-h) - var(--space-12));
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    padding: var(--space-2); margin: calc(-1 * var(--space-2));
  }
}

/* Phone: the contents list stacks above the body, and Terms' 17 entries
   pushed clause 1 two screens down. Two columns halve that. */
@media (max-width: 900px) {
  .n-lgl-toc {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--space-2) var(--space-5);
  }
  .n-lgl-toc-head { grid-column: 1 / -1; }
}

/* Section headings: display tracking per DESIGN.md, snug leading at 22px
   (1.08 is a display leading), balanced wraps. Prose avoids orphans. */
.n-lgl-body h2 {
  position: relative;
  letter-spacing: var(--tracking-display); line-height: var(--leading-snug);
  text-wrap: balance;
}
.n-lgl-body p, .n-lgl-list li { text-wrap: pretty; }

/* Arriving from the contents list: mark the heading you landed on. */
.n-lgl-body h2:target::before {
  content: ''; position: absolute;
  left: calc(-1 * var(--space-4)); top: 0.15em; bottom: 0.15em;
  width: 2px; border-radius: 2px; background: var(--accent);
}

/* Tables fill the column and wrap on desktop instead of running to
   max-content and scrolling sideways; three-column tables keep a floor and
   scroll inside .n-lgl-scroll on a phone, first column pinned (DESIGN.md). */
.n-lgl-table { width: 100%; }
.n-lgl-table:has(th:nth-child(3)) { min-width: 36rem; }
.n-lgl-table th:first-child, .n-lgl-table td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface-page);
}

/* Measure: 74ch of Inter ran ~93 characters a line (taste inspector);
   60ch lands near 75, the top of the reading range. Tables keep the
   whole column. */
.n-lgl-body > p, .n-lgl-body > h2, .n-lgl-body > h3,
.n-lgl-body > ul, .n-lgl-body > ol { max-width: 60ch; }

/* Table headers: eyebrow size, not micro. 11px tracked capitals were the
   smallest text in the document. */
.n-lgl-table th { font-size: var(--size-eyebrow); }

/* GDPR questions are headings, so a reader can scan them and a screen
   reader can jump between them. More space above than below. */
.n-lgl-body h3.n-lgl-q {
  font-size: 17px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug); color: var(--text-primary);
  margin: var(--space-8) 0 var(--space-2); text-wrap: balance;
}
.n-lgl-body h2 + h3.n-lgl-q { margin-top: 0; }

/* Phone: a three-column table at 36rem showed two columns and hid the
   third ("Our legal reason", "Where your data is held") past the edge with
   nothing saying it was there. Each row becomes a block, each cell carries
   its column name from data-label. Two-column tables still fit and stay. */
@media (max-width: 600px) {
  .n-lgl-table:has(th:nth-child(3)),
  .n-lgl-table:has(th:nth-child(3)) tbody,
  .n-lgl-table:has(th:nth-child(3)) tr,
  .n-lgl-table:has(th:nth-child(3)) td { display: block; min-width: 0; }
  .n-lgl-table:has(th:nth-child(3)) thead { display: none; }
  .n-lgl-table:has(th:nth-child(3)) tr { padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); }
  .n-lgl-table:has(th:nth-child(3)) tr:last-child { border-bottom: 0; }
  .n-lgl-table:has(th:nth-child(3)) td {
    position: static; background: none; border-bottom: 0; padding: 0 0 var(--space-3);
  }
  .n-lgl-table:has(th:nth-child(3)) td:last-child { padding-bottom: 0; }
  .n-lgl-table:has(th:nth-child(3)) td:first-child { color: var(--text-primary); font-weight: var(--weight-semibold); }
  .n-lgl-table:has(th:nth-child(3)) td::before {
    content: attr(data-label); display: block; margin-bottom: var(--space-1);
    font-family: var(--font-mono); font-size: var(--size-eyebrow); font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted);
  }
}

/* Culture: "In practice" and "The short version" were 11px --text-faint on
   the card, 3.5:1 (fails AA). Eyebrow recipe: 12px, --text-muted. */
.n-cul-glab { font-size: var(--size-eyebrow); letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); }

/* Culture prose: 66ch ran ~79 characters a line; 58ch is ~70. */
.n-cul-body > p { max-width: none; }

/* The scope line is a sentence, not a control: an outlined pill read as a
   button (most of all on a phone). Same words, set as text. */
.n-cul-scope { display: block; padding: 0; border: 0; border-radius: 0; background: none; font-size: var(--size-body); }

/* Culture: the sticky intro is ~620px tall; on a short laptop viewport its
   closing card would sit below the fold for the whole scroll. */
@media (max-height: 800px) {
  .n-cul-side { position: static; }
}

/* Reduced motion: reveals appear in place, no travel and no stagger. */
@media (prefers-reduced-motion: reduce) {
  .n-cul [data-rv] { transform: none !important; transition-delay: 0s !important; }
}