/* ─────────────────────────────────────────────────────────────────────────
   legal-doc.css — the design of a legal document, and nothing else.

   Loaded by BOTH the public page (design/terms.html) and the admin editor's
   live preview. design/legal-render.js owns every tag and class name in the
   document; this file owns every colour, size, and spacing for those classes.
   One renderer plus one stylesheet is what makes the admin preview pixel-
   identical to what the public page serves - the preview cannot drift,
   because there is no second copy of either half to drift from.

   TWO CONSTRAINTS THIS FILE HAS TO HONOUR:

   1. EVERY selector is scoped under .legal-doc. The rules below were lifted
      out of terms.html, where they were free to use bare element selectors
      (p, li, strong, a, svg, section > h2) because that page is nothing but
      the document. The admin page is NOT: it has a topbar, a form, buttons
      and a sidebar, and an unscoped `p { color: var(--text-dim) }` would
      repaint all of it. So no bare element selector survives here.

   2. It is SELF-CONTAINED on theme. terms.html gets its light palette from
      /auth-theme.css; the admin page does not load that file. So both
      palettes are declared here, on the wrapper, and the document reads its
      colours from the wrapper rather than from :root. Values are copied
      verbatim - the dark set from the :root block of terms.html, the light
      set from :root[data-theme="light"] in auth-theme.css - so on the public
      page the wrapper simply re-states the tokens :root already resolved to,
      and nothing renders differently than it did before the extraction.

   Note --warn is deliberately absent from the light block: auth-theme.css
   never overrode it, so the amber placeholder/risk colour is the same in
   both themes today. Declaring a light value here would be a design change.
   ───────────────────────────────────────────────────────────────────────── */

/* ─────────── Palette: dark (default) ─────────── */
.legal-doc {
  --bg: #05070f;
  --card: #0e1426;
  --card-2: #0b1120;
  --card-border: rgba(255,255,255,.07);
  --card-border-strong: rgba(255,255,255,.12);
  --text: #eef1f8;
  --text-dim: #9aa4bc;
  --text-mut: #626c85;
  --accent: #3b5bfd;
  --accent-2: #5b83ff;
  --accent-soft: rgba(59,91,253,.16);
  --warn: #f0b90b;
  --grad-head: linear-gradient(90deg, #6f8cff 0%, #9db4ff 100%);
}

/* ─────────── Palette: light ─────────── */
/* Scoped [data-theme="light"] .legal-doc (0,2,0) so it always beats the base
   .legal-doc block (0,1,0) regardless of stylesheet load order. */
[data-theme="light"] .legal-doc {
  --bg: #ffffff;
  --card: #ffffff;
  --card-2: #f7faff;
  --card-border: rgba(28,52,112,.12);
  --card-border-strong: rgba(28,52,112,.20);
  --text: #0f1b34;
  --text-dim: #3a4763;
  --text-mut: #566380;
  --accent: #2f6bff;
  --accent-2: #2f6bff;
  --accent-soft: rgba(47,107,255,.10);
  --grad-head: linear-gradient(92deg, #2f6bff 0%, #5a8bff 100%);
}

/* ─────────── Document shell ─────────── */
/* The typography and the box-model reset below are inherited from `body` and
   the global `*` reset on terms.html. They are restated on the wrapper so the
   document also renders correctly inside an admin page whose body font,
   line-height and default margins are something else entirely. Same values,
   so on terms.html they are a no-op. */
.legal-doc {
  max-width: 880px; margin: 0 auto; padding: 40px 22px 96px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.65;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.legal-doc, .legal-doc *, .legal-doc *::before, .legal-doc *::after { box-sizing: border-box; }
/* Every element below sets the margins it wants explicitly, so zeroing the
   UA defaults here is what keeps heading spacing identical off-page. Element
   selectors below (0,1,1) outrank this (0,1,0), so nothing is clobbered. */
.legal-doc * { margin: 0; padding: 0; }
.legal-doc svg { display: block; }
.legal-doc a { color: var(--accent-2); text-decoration: none; }
.legal-doc a:hover { text-decoration: underline; }

.legal-doc .doc-head { border-bottom: 1px solid var(--card-border); padding-bottom: 26px; margin-bottom: 30px; }
.legal-doc .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px; }
.legal-doc .doc-head h1 { font-size: clamp(30px, 6vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -.5px; margin-bottom: 14px; }
.legal-doc .doc-head h1 em { font-style: normal; background: var(--grad-head); -webkit-background-clip: text; background-clip: text; color: transparent; }
.legal-doc .doc-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-mut); }
.legal-doc .doc-meta b { color: var(--text-dim); font-weight: 600; }

/* ─────────── Placeholder token (fill before publishing) ─────────── */
.legal-doc .ph {
  font-style: normal; font-weight: 600;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent);
  border-radius: 5px; padding: 0 5px; overflow-wrap: break-word;
}

/* The square brackets are PRESENTATION, not content, and must be drawn by CSS.
   Reason: in the stored document model a placeholder is written as the inline
   token [[text]], and the renderer's pattern (design/legal-render.js) is
   /\[\[([^\]\n]*)\]\]/ - the inner group cannot contain a ']' at all, and the
   mini-markup has no escape for one. So the brackets cannot be stored as text:
     - stored as [[[jurisdiction]]] the token MIS-TOKENIZES, matching
       "[jurisdiction" and leaving a stray "]" outside the chip, so the dashed
       amber border closes one character early;
     - stored as [[[jurisdiction]]] with the brackets absorbed instead, the chip
       loses them entirely and the page visibly changes.
   Generating them here keeps the stored text bracket-free ([[jurisdiction]])
   while every chip still READS "[jurisdiction]", exactly as it does on the live
   page. It also guarantees they can never double up: an admin who types
   brackets into the editor cannot produce a valid [[...]] token in the first
   place. The glyphs sit INSIDE the border and share the 5px padding, so the
   chip's box is unchanged apart from being two characters wider. */
.legal-doc .ph::before { content: '['; }
.legal-doc .ph::after  { content: ']'; }

/* ─────────── Callouts ─────────── */
.legal-doc .callout { border-radius: 14px; padding: 18px 20px; margin: 22px 0; border: 1px solid var(--card-border-strong); background: var(--card); }
.legal-doc .callout h3 { font-size: 15px; margin-bottom: 8px; display: flex; align-items: center; gap: 9px; }
.legal-doc .callout h3 svg { width: 18px; height: 18px; flex: none; }
.legal-doc .callout p { font-size: 14px; color: var(--text-dim); margin: 0 0 8px; }
.legal-doc .callout p:last-child { margin-bottom: 0; }
.legal-doc .callout.draft { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.legal-doc .callout.draft h3 { color: var(--accent-2); }
.legal-doc .callout.risk { border-color: color-mix(in srgb, var(--warn) 48%, transparent); background: color-mix(in srgb, var(--warn) 9%, var(--card)); }
.legal-doc .callout.risk h3 { color: var(--warn); }
.legal-doc .callout.risk strong { color: var(--text); }

/* ─────────── Table of contents ─────────── */
.legal-doc .toc { border: 1px solid var(--card-border); border-radius: 14px; padding: 20px 22px; margin: 28px 0 38px; background: var(--card-2); }
.legal-doc .toc h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-mut); margin-bottom: 14px; }
.legal-doc .toc ol { list-style: none; counter-reset: toc; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px; }
.legal-doc .toc li { counter-increment: toc; font-size: 14px; }
.legal-doc .toc li a { color: var(--text-dim); display: flex; gap: 10px; padding: 4px 0; }
.legal-doc .toc li a::before { content: counter(toc) "."; color: var(--text-mut); font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; }
.legal-doc .toc li a:hover { color: var(--accent-2); text-decoration: none; }

/* ─────────── Sections ─────────── */
.legal-doc section { margin-top: 40px; scroll-margin-top: 84px; }
.legal-doc section > h2 {
  font-size: 21px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3;
  padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--card-border);
  display: flex; gap: 12px; align-items: baseline;
}
.legal-doc section > h2 .num { color: var(--accent-2); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 800; }
.legal-doc section h3.sub { font-size: 16px; font-weight: 700; margin: 22px 0 8px; color: var(--text); }
.legal-doc p { margin: 0 0 14px; color: var(--text-dim); font-size: 15px; }
.legal-doc p.lead { color: var(--text); }
.legal-doc ul, .legal-doc ol.list { margin: 0 0 16px; padding-left: 22px; }
.legal-doc li { margin-bottom: 8px; color: var(--text-dim); font-size: 15px; }
.legal-doc strong { color: var(--text); font-weight: 700; }
.legal-doc .def { margin: 0 0 12px; font-size: 15px; color: var(--text-dim); }
.legal-doc .def b { color: var(--text); }
.legal-doc .backtotop { display: inline-block; margin-top: 14px; font-size: 12.5px; color: var(--text-mut); }
.legal-doc .backtotop:hover { color: var(--accent-2); text-decoration: none; }

/* ─────────── Responsive ─────────── */
@media (max-width: 640px) {
  .legal-doc { padding: 28px 16px 72px; }
  .legal-doc .toc ol { grid-template-columns: 1fr; }
  .legal-doc section > h2 { font-size: 19px; }
}