/* ==========================================================================
   PULSE V2.1 — legal.css · "ION ATMOSPHERE"
   Shared by privacy.html + terms.html. Quiet doc template, lit with
   restraint: whisper auroras (top of hero + a faint foot glow), cyan-tinted
   chip + hairlines, accent section numerals, sticky TOC sidebar on desktop,
   70ch measure. Requires tokens.css + base.css loaded first.
   Legal pages stay highly readable: NO viz modules, no caps walls —
   atmosphere only (spec §8: aurora--whisper, nothing else).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — host for the whisper aurora (.has-aurora needs a positioned box)
   -------------------------------------------------------------------------- */
.legal-hero {
  position: relative;
  padding-block: var(--sp-9) var(--sp-7);
}
.legal-hero h1 { margin-top: var(--sp-4); }

/* Last-updated chip — v2.1 chip recipe: sentence-case mono (caps diet),
   cyan-tinted fill, glowing accent dot */
.updated-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--sp-5);
  padding: 0.5rem 0.95rem;
  background: var(--accent-tint-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  font: 700 var(--fs-micro) / 1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.updated-chip::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-line);
}

.legal-note {
  margin-top: var(--sp-5);
  max-width: 70ch;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent-line);
  color: var(--text-3);
  font-size: var(--fs-body-sm);
}

/* --------------------------------------------------------------------------
   Layout — TOC sidebar (desktop) + 70ch article. The wrapper hosts the
   bottom-anchored whisper aurora (overflow:clip does NOT break sticky).
   -------------------------------------------------------------------------- */
.legal-body {
  position: relative;
  padding-bottom: var(--sp-9);
}
/* Foot glow: re-anchor the section aurora to the end of the doc so the
   atmosphere bookends the page instead of stretching a blur over 6000px */
.legal-body > .aurora {
  inset: auto -6% -12% -6%;
  height: min(70vh, 42rem);
}
.legal-layout {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}
@media (min-width: 64em) {
  .legal-layout {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--sp-8);
  }
  .toc {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
  }
}

/* --------------------------------------------------------------------------
   TOC
   -------------------------------------------------------------------------- */
.toc {
  padding: var(--sp-5);
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
}
.toc-head {
  display: block;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-1);
}
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
/* Tablet (no sidebar yet): two quiet columns */
@media (min-width: 40em) and (max-width: 63.99em) {
  .toc-list { grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); }
}
.toc-list a {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  color: var(--text-3);
  font-size: var(--fs-body-sm);
  text-decoration: none;
  transition: color var(--dur-1) ease;
}
.toc-list a:hover,
.toc-list a:focus-visible { color: var(--text-1); }
.toc-num {
  flex: none;
  min-width: 1.7em;
  font: 700 var(--fs-micro) / 1.4 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--text-3);
  transition: color var(--dur-1) ease;
}
.toc-list a:hover .toc-num,
.toc-list a:focus-visible .toc-num { color: var(--accent-bright); }

/* --------------------------------------------------------------------------
   Doc article
   -------------------------------------------------------------------------- */
.doc { max-width: 70ch; }
.doc p { max-width: 70ch; }

.doc-sec {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line-0);
}
.doc-sec:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* Mono section numeral above each heading — the one cyan moment per
   section viewport (accent-bright clears AA at 12.3:1, decorative anyway) */
.doc-num {
  display: block;
  margin-bottom: var(--sp-3);
  font: 700 var(--fs-micro) / 1 var(--font-mono);
  letter-spacing: var(--track-micro);
  color: var(--accent-bright);
}
.doc-sec h2 { font-size: var(--fs-h3); }

.doc-sec p,
.doc-sec ul { margin-top: var(--sp-4); }
.doc-sec ul {
  padding-left: 1.25rem;
  display: grid;
  gap: 0.6rem;
}
.doc-sec li::marker { color: var(--accent-line); }

.doc strong { color: var(--text-1); font-weight: 600; }
.doc code {
  padding: 0.1em 0.4em;
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.doc-related {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-1);
  color: var(--text-3);
  font-size: var(--fs-body-sm);
}

/* --------------------------------------------------------------------------
   Print — just the document, black on white
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .toc,
  .skip-link,
  .aurora { display: none; }
  body { background: #fff; color: #111; }
  body::after { content: none; }
  .doc,
  .doc p { max-width: none; }
  h1, h2,
  .doc strong { color: #000; }
  a { color: #000; }
  .updated-chip,
  .legal-note,
  .doc-num { color: #333; border-color: #999; background: none; }
  .updated-chip::before { background: #333; box-shadow: none; }
  .doc code { background: #f2f2f2; border-color: #ccc; color: #000; }
}