/* ─── THE LEGAL CENTRE — ONE stylesheet, ONE template, six documents ──────────
 *
 * TICKET-A-THE-LEGAL-MODULE ⑩. 🔒 "All six documents share ONE stylesheet and ONE
 * template. ⛔ Not six." This file is that sheet, and it is ALSO the sheet the admin
 * editor's preview pane loads — ☢️ if the preview and the served page can ever
 * disagree, the preview is worthless, and the preview is the only thing standing
 * between a mangled table and the public internet.
 *
 * 🎨 CONFORMANT FROM LINE ONE — ⛔ zero raw literals. Every colour, radius, shadow,
 * z-index and font here is var(--…) out of src/ros/shell/public/tokens.css, which is
 * where ⑩a's palette actually lives: #1E1B3E, #1A2547, #00D4FF, #40EAA8, --r-chip 7px
 * and the rest are that file's values, verbatim. Loading the token file rather than
 * re-typing its hexes is how ⑩a ("do not invent a value") and the design-guard ratchet
 * ("a new in-scope file must be clean") turn out to be the same instruction.
 * ⚠️ The ticket writes `--mono`; the real token is `--font-mono`. The token wins.
 *
 * STATE COLOUR CARRIES MEANING, ⛔ not decoration:
 *   --emerald = live / current   --amber = draft   --text-4 = superseded
 * ⭐ A superseded version is a TERMINAL state, and terminal states are QUIET. It gets
 *   `Done` weight, never `Review` weight — it is an ending, not a summons.
 */

/* ── the page ground ── ⬜ NEVER WHITE: every surface is a dark token.
 *
 * The ambient wash the ROS public surfaces carry comes from --grad-canvas-wash, which
 * is PARAMETERISED: a consumer sets --wash-1/--wash-2 and the token owns the geometry.
 * ⭐ Reaching for the token rather than typing radial-gradient() is what makes "never
 *   flatten a gradient to a flat fill" (⑩a) and "a new file carries zero raw gradients"
 *   (the design ratchet) the SAME instruction instead of opposing ones.
 * ⚙️ background-attachment:fixed holds the wash still while the document scrolls —
 *   a fixed ::before overlay would do the same thing and read to the guard as a
 *   hand-rolled modal, which on a legal page it very much is not. */
.lg-page {
  --wash-1: var(--cyan-tint);
  --wash-2: var(--gold-tint);
  min-height: 100dvh;
  background: var(--grad-canvas-wash), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── ⑩b THE THREE-COLUMN GRID, AND THE MIDDLE ONE HAS A CEILING ──────────────
 * 236px nav · minmax(0,860px) document · 1fr section list · 52px gap
 * 1680px max width · 40px gutters. */
.lg-shell {
  position: relative;
  max-width: 1680px;
  margin: 0 auto;
  padding-inline: 40px;
  padding-block: 0;
}
.lg-grid {
  display: grid;
  grid-template-columns: 236px minmax(0, 860px) 1fr;
  gap: 52px;
  align-items: start;
}

/* ── the masthead ── */
.lg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 34px;
}
.lg-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}
.lg-brand-mark {
  width: 22px;
  height: 22px;
  border-radius: var(--r-chip);
  background: var(--grad-brand);
}
/* chrome — a label the reader SCANS, so --fs-nav from line one. */
.lg-top-note { font-size: var(--fs-nav); color: var(--text-3); letter-spacing: 0.02em; }

/* ── the left nav — ⛔ sticky, it does not scroll away on a 9,000-word document ── */
.lg-nav {
  position: sticky;
  top: 22px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* ⛔ MIXED CASE, NOT UPPERCASE — and that is the token, not taste. --fs-nav is written
 * for "11/500/mixed-case"; uppercase renders at cap-height ~1.38x, so 11px reads about
 * 15px — the size Joe calls "forced", and the design guard counts the pairing. An
 * uppercase eyebrow wants --fs-chip; these are labels, so they stay mixed case. */
.lg-nav-h {
  font-size: var(--fs-nav);
  letter-spacing: 0.02em;
  color: var(--text-4);
  padding: 6px 10px 10px;
}
.lg-nav a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--r-chip);
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--fs-nav);          /* rail link = chrome */
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.lg-nav a:hover { background: var(--surface-row); color: var(--text); }
.lg-nav a[aria-current="page"] { background: var(--surface); color: var(--text); }

/* ── the document ── */
.lg-doc { min-width: 0; padding-bottom: 96px; }
.lg-title { font-size: var(--fs-7); font-weight: 650; letter-spacing: -0.02em; margin-bottom: 10px; }
.lg-dates { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 30px; }

/* ── chips — ⛔ NO PILLS. --r-chip is 7px; a circle uses 50%. ─────────────────
 * ☢️ A CHIP IS RECOGNISED, NOT READ: --fs-chip (9px), --fw-normal, uppercase, 0.06em.
 * ⛔ NOT --fs-nav. A chip is uppercase, so it reads at cap-height — about 1.38× a
 * mixed-case tab at the same px — which is why --fs-nav looks right on a tab and
 * oversized on a chip, and why the chip guard treats --fs-nav here as a violation
 * rather than a loophole.
 * 🩸 AND THE REAL DEFECT IT CAUGHT WAS NOT THE TOKEN. The first cut put PROSE in chips —
 * "In effect for new accounts · existing accounts from 20 October 2026" inside a .lg-chip.
 * That string is read, not recognised, so it was never a chip; at 9px uppercase it would
 * have been unreadable. Those strings moved to .lg-meta below, and the chip went back to
 * doing its one job: a state you identify at a glance. */
.lg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r-chip);
  font: var(--fw-normal) var(--fs-chip)/1 var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  color: var(--text-3);
}

/* The strings a reader actually READS beside a chip — dates, ranges, notices.
 * Chrome he scans, so --fs-nav, mixed case. ⛔ Never dressed as a chip. */
.lg-meta {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-nav);
  color: var(--text-3);
}
.lg-chip-live      { color: var(--bg); background: var(--emerald); border-color: var(--emerald); }
.lg-chip-draft     { color: var(--bg); background: var(--amber);   border-color: var(--amber); }
/* terminal state, quiet on purpose — ⛔ never lit like something that wants attention */
.lg-chip-past      { color: var(--text-4); background: var(--surface-sunk); border-color: var(--line-soft); }
.lg-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── ⑩b THE MEASURE. ☢️ THIS CEILING IS NOT TASTE. Past roughly 100 characters the
 * eye loses the start of the next line, and these documents turn on being conspicuous
 * and readable — the same legal test the whole module exists to satisfy.
 * ⛔ Do not widen it to fill a monitor. */
.lg-body { max-width: 78ch; }
.lg-body p,
.lg-body li { font-size: var(--fs-2); color: var(--text-2); }   /* prose he READS ≥12px */
.lg-body p { margin-block: 0 16px; }
.lg-body h1 { font-size: var(--fs-6); color: var(--text); margin-block: 38px 14px; letter-spacing: -0.01em; }
.lg-body h2 { font-size: var(--fs-5); color: var(--text); margin-block: 34px 12px; scroll-margin-top: 28px; }
.lg-body h3 { font-size: var(--fs-4); color: var(--text); margin-block: 26px 10px; }
.lg-body ul, .lg-body ol { margin-block: 0 16px; padding-left: 22px; }
.lg-body li { margin-block: 0 7px; }
.lg-body a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.lg-body strong { color: var(--text); font-weight: 600; }
.lg-body hr { border: 0; border-top: 1px solid var(--line-soft); margin-block: 30px; }
.lg-body code {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  background: var(--surface-sunk);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-chip);
  padding: 1px 5px;
}
.lg-body pre {
  background: var(--surface-sunk);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: 14px 16px;
  overflow-x: auto;
  margin-block: 0 18px;
}
.lg-body pre code { background: none; border: 0; padding: 0; }

/* ── blockquote — added by ① and therefore stylable from line one ── */
.lg-body blockquote {
  margin-block: 0 18px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--line-strong);
  color: var(--text-3);
}
.lg-body blockquote p:last-child { margin-bottom: 0; }

/* ── tables — added by ①. A table in a Terms of Service is a rate card or a
 * retention schedule; it scrolls rather than crushes on a narrow screen. */
.lg-table-wrap { overflow-x: auto; margin-block: 0 20px; }
.lg-body table { border-collapse: collapse; width: 100%; font-size: var(--fs-2); }
.lg-body th, .lg-body td {
  border: 1px solid var(--line-soft);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.lg-body th { background: var(--surface-sunk); color: var(--text); font-weight: 600; }
.lg-body td { color: var(--text-2); }
.lg-body .md-al-l { text-align: left; }
.lg-body .md-al-c { text-align: center; }
.lg-body .md-al-r { text-align: right; }

/* ── ⑩b the right rail — the section list that tracks scroll position.
 * ⭐ This is what makes a very long document navigable; width alone does not. */
.lg-toc { position: sticky; top: 22px; align-self: start; font-size: var(--fs-nav); }
.lg-toc-h {
  letter-spacing: 0.02em;
  color: var(--text-4);
  margin-bottom: 10px;
}
.lg-toc a {
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--line-soft);
  color: var(--text-3);
  text-decoration: none;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.lg-toc a:hover { color: var(--text-2); }
.lg-toc a.is-active { color: var(--cyan); border-left-color: var(--cyan); }

/* ── ⑦ the index — a single centred column of six rows ── */
.lg-index { max-width: 760px; margin: 0 auto; padding-bottom: 96px; }
/* ⑩d name · one-line description · state chip · effective date · chevron.
 * Two cells, not five: the meta group travels together so a narrow screen can WRAP it
 * under the name instead of any part of it being hidden. ⑩e — small screens STACK. */
.lg-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}
.lg-row-main { min-width: 0; }
.lg-row-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lg-row:hover { border-color: var(--line-strong); transform: translateY(-1px); }
/* ⚠️ THESE ARE INLINE SPANS ON ONE LINE, so the separator is a real element and the gaps are
 * MARGINS — ⛔ not `margin-bottom`, which does nothing on an inline box and was the bug: the
 * title and its description rendered flush together as "Terms of ServiceThe agreement…".
 * 🔒 Joe, 2026-09-22, on the screenshot: "give me a - between the name of the document and the
 * explanation … there's no spacing." */
.lg-row-name { font-size: var(--fs-4); color: var(--text); font-weight: 600; }
.lg-row-sep  { color: var(--text-4); margin: 0 8px; }
.lg-row-desc { font-size: var(--fs-1); color: var(--text-3); }
.lg-row-date { font-size: var(--fs-nav); color: var(--text-4); white-space: nowrap; }
.lg-chev { color: var(--text-4); flex: none; }

/* ─── ☢️ THE CHIPS LINE UP BECAUSE THE TRACKS ARE SHARED, ⛔ NOT BECAUSE A WIDTH WAS GUESSED ───
 * 🔒 Joe, 2026-09-22, on outofalignment.jpg: *"Unacceptable. It looks sloppy. It absolutely has
 *    to line up."*
 *
 * 🩸 THE DEFECT: every `.lg-row` was its OWN grid (`1fr auto`) with the meta group right-aligned,
 * so the chip's x-position was set by THAT ROW'S date width. "3 April 2026" is shorter than
 * "22 September 2026", so Privacy's chip sat right of the other five. ⛔ Separate grid containers
 * never align their `auto` tracks with each other — that is not a bug in the rule, it is what a
 * grid IS.
 *
 * ⛔ AND A `min-width` RESERVE IS THE WRONG FIX. There is no browser on this box to measure text
 * in, so any px figure would be arithmetic I cannot prove — and render.js:190 can prefix the date
 * with "Existing accounts from ", which is ~3× the width a reserve would have been sized for. A
 * number that is right today and silently wrong on a forward-dated publish is the thing to avoid.
 *
 * ⇒ ONE GRID OWNS ALL THE ROWS. `.lg-rows` declares the four tracks; each row is `subgrid`, so
 *   every chip and every date resolves against the SAME lines. The tracks size themselves to the
 *   widest content in the list, so a longer date moves the whole column and the rows stay level.
 *   ⭐ No magic number, and it cannot drift back.
 *
 * ⚠️ PADDING IS WHY THIS IS SAFE WITH A CARD. A subgrid's first and last tracks absorb the item's
 * own padding; the MIDDLE tracks (chip, date) land exactly on the parent's lines. Every row
 * carries identical padding, so the inset is identical and the chips are level.
 *
 * 🔌 `@supports` IS A REAL FALLBACK, NOT A FORMALITY. An unsupported `subgrid` makes the whole
 * declaration invalid and the row would collapse to one column. Outside this block the original
 * `1fr auto` + flex meta group is untouched, so an old browser gets today's layout rather than a
 * broken one. ⛔ Scoped above 820px: below that the row deliberately stacks (⑩e) and there is no
 * column to align. */
@supports (grid-template-columns: subgrid) {
  @media (min-width: 821px) {
    /* ⚠️ THE GUTTER IS DECLARED ON BOTH. A subgrid overrides the parent's gutters with its own, and
     * `.lg-row` already carries `gap: 18px`; the parent is set to match so the tracks and the gaps
     * agree. Row-gap stays 0 — the rows space themselves with `margin-bottom`. */
    .lg-rows { display: grid; grid-template-columns: 1fr max-content max-content max-content;
               gap: 0 18px; }
    .lg-rows .lg-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
    /* ⭐ `contents` DISSOLVES THE WRAPPER so chip, date and chevron become items of the row's own
     * subgrid. ⛔ The span stays in the markup — it is what the sub-821px flex layout wraps. */
    .lg-rows .lg-row-meta { display: contents; }
    /* The date sits hard against the chevron, so a short date grows the gap on its LEFT and the
     * chip column never moves. */
    .lg-rows .lg-row-date { justify-self: end; }
  }
}
.lg-row:hover .lg-chev { color: var(--text-2); }

/* ── ⑧ the archive — versions grouped under their document ── */
.lg-arch-group { margin-bottom: 34px; }
.lg-arch-doc { font-size: var(--fs-5); color: var(--text); margin-bottom: 12px; }
.lg-arch-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 13px 16px;
  margin-bottom: 8px;
  background: var(--surface-row);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-btn);
  text-decoration: none;
  color: inherit;
}
.lg-arch-row:hover { border-color: var(--line); }
/* ⑩d the CURRENT version is lit; every superseded one stays quiet above. */
.lg-arch-row.is-current { background: var(--surface); border-color: var(--line); }
.lg-arch-row.is-current .lg-arch-range { color: var(--text); }
.lg-arch-range { font-size: var(--fs-2); color: var(--text-3); }
.lg-arch-by { font-size: var(--fs-nav); color: var(--text-4); margin-top: 3px; }
.lg-arch-hash { font-family: var(--font-mono); font-size: var(--fs-nav); color: var(--text-4); }

/* ── the empty state — ⛔ never a stack trace, never a blank page ── */
.lg-empty {
  padding: 56px 34px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-panel);
}
.lg-empty-t { font-size: var(--fs-5); color: var(--text); margin-bottom: 8px; }
.lg-empty-d { font-size: var(--fs-2); color: var(--text-3); }

.lg-foot {
  border-top: 1px solid var(--line-soft);
  padding-block: 22px 40px;
  font-size: var(--fs-nav);
  color: var(--text-4);
}
.lg-foot a { color: var(--text-3); text-decoration: none; }
.lg-foot a:hover { color: var(--text-2); }

/* ── ⑩b BREAKPOINTS ──────────────────────────────────────────────────────────
 * ≤1340px  the section list drops and it becomes two columns.
 *          ⭐ Safe to drop because it is pure navigation DERIVED from the document's
 *            own `##` headings — every one of those headings is still on the page, so
 *            no content leaves. (⑩e's "never display:none" governs CONTENT.)
 * ≤820px   it stacks, nav FIRST, and gutters fall to 22px. */
@media (max-width: 1340px) {
  .lg-grid { grid-template-columns: 236px minmax(0, 860px); }
  .lg-toc { display: none; }
}
@media (max-width: 820px) {
  .lg-shell { padding-inline: 22px; }
  .lg-grid { grid-template-columns: 1fr; gap: 26px; }
  .lg-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .lg-nav-h { width: 100%; padding: 0 0 4px; }
  .lg-nav a { background: var(--surface-row); }
  .lg-title { font-size: var(--fs-6); }
  /* ⛔ NOTHING IS HIDDEN HERE. ⑩e: small screens STACK — never display:none, never
     clipped. The row goes to one column and the meta group wraps underneath the name. */
  .lg-row { grid-template-columns: 1fr; gap: 10px; }
  .lg-arch-row { grid-template-columns: 1fr; gap: 8px; }
}