/* ============================================================
   NGARO — legal pages (privacy.html, terms.html)
   Loaded only by those two pages. Consumes style.css tokens;
   defines no new custom properties of its own.
   ============================================================ */

/* ---------- 1. PAGE HEAD ---------- */
.legal-head {
  /* Clears the fixed nav, then sits on the same bone ground as the
     top of the homepage so the two read as one site. */
  padding-block: clamp(140px, 15vw, 210px) clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}

.legal-head__meta {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tx-faint);
  margin-bottom: 22px;
}

.legal-head__summary {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--tx-mute);
  max-width: 62ch;
  margin-top: 28px;
}

.legal-head__cross {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  font-size: .92rem;
  color: var(--ember);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .3s var(--ease);
}
.legal-head__cross:hover { color: var(--amber); }

/* ---------- 2. BODY GRID ---------- */
.legal-body {
  display: grid;
  gap: clamp(28px, 4vw, 72px);
  padding-block: clamp(48px, 6vw, 88px) clamp(90px, 11vw, 150px);
}

@media (min-width: 1040px) {
  .legal-body {
    grid-template-columns: minmax(200px, 240px) 1fr;
    align-items: start;
  }
}

/* ---------- 3. TABLE OF CONTENTS ---------- */
.legal-toc__title {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-faint);
  margin-bottom: 14px;
}

.legal-toc__list { display: grid; }

.legal-toc__link {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 7px 0 7px 11px;
  border-left: 2px solid transparent;
  color: var(--tx-mute);
  font-size: .875rem;
  line-height: 1.35;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.legal-toc__link:hover { color: var(--tx); }
.legal-toc__link.is-active {
  color: var(--ink);
  border-left-color: var(--amber);
}

.legal-toc__num {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--tx-faint);
}
.legal-toc__link.is-active .legal-toc__num { color: var(--amber); }

@media (min-width: 1040px) {
  .legal-toc {
    position: sticky;
    /* Nav is 16px padding + 30px mark + 16px, ~62px tall. 90px clears it
       with air. The nav auto-hides on scroll-down anyway. */
    top: 90px;
    /* Terms runs to 22 entries — taller than a short laptop viewport, so
       the rail gets its own scroll rather than being clipped. */
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* Below the two-column breakpoint the rail becomes a plain list above the
   prose. Boxed so it reads as navigation, not as the first section. */
@media (max-width: 1039px) {
  .legal-toc {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 20px 18px;
  }
  .legal-toc__list { grid-template-columns: 1fr 1fr; gap: 0 18px; }
}
@media (max-width: 560px) {
  .legal-toc__list { grid-template-columns: 1fr; }
}

/* ---------- 4. PROSE ---------- */
.legal-doc {
  max-width: 68ch;
  /* min-width:0 stops a wide table forcing the grid column open and
     pushing the page into horizontal scroll. */
  min-width: 0;
}

.legal-sec + .legal-sec { margin-top: clamp(40px, 4.5vw, 62px); }

/* The id lives on the section, not the heading, and scroll-margin-top only
   affects the element it is declared on — so it has to sit here for
   scrollIntoView({block:'start'}) in main.js to clear the fixed nav.
   The nav is 75px tall; 100px leaves the heading a little air above it. */
.legal-sec { scroll-margin-top: 100px; }

.legal-sec h2 {
  font-size: clamp(1.32rem, 2vw, 1.72rem);
  line-height: 1.16;
  letter-spacing: -.022em;
  font-weight: 500;
  margin-bottom: 18px;
}

.legal-sec__num {
  font-family: var(--mono);
  font-size: .7em;
  color: var(--amber);
  margin-right: 12px;
  vertical-align: 2px;
}

.legal-sec h3 {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 30px 0 12px;
}

.legal-doc p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--tx);
}
.legal-doc p + p { margin-top: 16px; }

.legal-doc strong { font-weight: 600; }

.legal-doc a:not(.legal-head__cross) {
  color: var(--ember);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .25s var(--ease);
}
.legal-doc a:not(.legal-head__cross):hover { color: var(--amber); }

/* ---------- 5. LISTS ---------- */
.legal-list { margin-top: 16px; display: grid; gap: 11px; }

.legal-list li {
  position: relative;
  padding-left: 20px;
  font-size: 17px;
  line-height: 1.6;
}
/* Amber dot, matching the claim list in the homepage proof section */
.legal-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
}

/* ---------- 6. TABLES ---------- */
.legal-tablewrap {
  /* The table scrolls inside this box. The page never scrolls sideways. */
  overflow-x: auto;
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  min-width: 460px;
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: 13px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--line-2);
}
.legal-table tr:last-child td { border-bottom: 0; }

.legal-table th {
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tx-faint);
  background: rgba(10,10,10,.025);
}

/* ---------- 7. CALLOUTS ---------- */
.legal-callout {
  margin-top: 22px;
  padding: 22px 24px;
  background: var(--bone-2);
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--r) var(--r) 0;
}
.legal-callout p { font-size: 16px; }
.legal-callout .legal-list { margin-top: 12px; }

/* The two places the page raises its voice: the AI accuracy warning and
   the prohibited-use list. Deeper ground, ember rule. */
.legal-callout--warn {
  background: var(--bone-3);
  border-left-color: var(--ember);
}

.legal-todo {
  font-family: var(--mono);
  font-size: .86em;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(224,97,26,.12);
  color: var(--ember);
  white-space: nowrap;
}

/* ---------- 8. PRINT ---------- */
/* First @media print block in the codebase. Cursor classes are .cur /
   .cur__echo / .cur__dot — see assets/js/cursor.js, which creates them. */
@media print {
  .nav, .footer, .legal-toc, .progress, .skip-link,
  .mobile-menu, .cur, .cur__echo, .cur__dot { display: none !important; }

  body { background: #fff; color: #000; }
  .legal-body { display: block; padding-block: 0; }
  .legal-doc { max-width: none; }
  .legal-head { padding-block: 0 24px; }
  .legal-sec { break-inside: avoid-page; }
  .legal-sec h2 { break-after: avoid-page; }

  /* Printed paper has no hover and no href. Spell the links out. */
  .legal-doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .82em; }
  .legal-callout { border: 1px solid #999; background: none; }
}