/**
 * docs-onrecord.css — S8 (privacy notice) + S9 (legal & contact) on top of
 * onrecord.css (docs/design-on-record/design-v2.md, screens-spec.md §S8/§S9).
 *
 * The two long-form documents of the ON RECORD site. Everything shared — decks,
 * seams, the type ramp, `.manifest`, `.pending`, `.plate-warn`, the reveal
 * system — comes from onrecord.css; this file holds only the two compositions:
 * the sticky version/TOC column beside a 66ch reading column (S8), and the
 * entity manifest + refund warn plate (S9).
 *
 * Replaces the portal-shared `docs.css` for the public routes: that file still
 * serves the NIGHT GANTRY surfaces and is never loaded here. Every colour, face
 * and type size is a var(--token) from public-tokens.css / tokens.css; logical
 * properties throughout, so the AR routes mirror without a second rule.
 */

/* ═══════════════ 1. The two-column document skeleton (S8) ═══════════════
   flex-wrap, not grid: below ~1040px of inner width the TOC simply stacks above
   the body and both columns run full measure. */

/* The first seam on a document page butts straight against the 64px sticky
   header, and `.stencil` sits on the seam at translateY(-50%) — so without this
   the stencil plate collides with the nav. Every other public screen opens on a
   hero or a deck, so this is the two documents' own problem to solve. */
.seam--doc-top {
  margin-block-start: clamp(56px, 7vw, 96px);
}

.doc-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(32px, 6vw, 104px);
}

.doc-toc {
  flex: 1 1 260px;
  max-inline-size: 340px;
}

/* Sticky only where there is room for a real side column (design-v2 §8: the
   1100 breakpoint is where the rail turns on too). The 64px is the sticky
   header's own `min-block-size` from onrecord.css §4 — the plate must clear it. */
@media (min-width: 1100px) {
  .doc-toc {
    position: sticky;
    inset-block-start: calc(64px + var(--space-32));
  }
}

.doc-body {
  flex: 3 1 460px;
  min-inline-size: 0;
}

/* ═══════════════ 2. The version plate ═══════════════ */

.doc-stamp {
  background: var(--color-surface-alt);
  border: var(--seam-size) solid var(--color-rule);
  padding: clamp(18px, 2.4vw, 24px);
}
.doc-stamp__title {
  margin: 0;
  color: var(--color-ink);
}
.doc-stamp__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8) var(--space-12);
  margin: var(--space-16) 0 0;
  padding-block-start: var(--space-12);
  border-block-start: var(--seam-size) solid var(--color-rule);
}
/* Latin numerals stay mono in BOTH locales (design-v2 §4.2: digits inside AR
   are Plex Mono LTR islands), so the version string reads as a stamped figure
   rather than as running text. */
.doc-stamp__ver,
.doc-stamp__value {
  font-family: var(--font-stack-mono);
  font-size: var(--text-data-lat);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
/* …except a translated VALUE, which is Arabic text and takes the Arabic face. */
:lang(ar) .doc-stamp__value {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-value-ar);
  line-height: 1.7;
}

/* ═══════════════ 3. The contents column ═══════════════ */

.doc-toc__nav {
  margin-block-start: var(--space-24);
}
.doc-toc__list {
  border-block-start: var(--seam-size) solid var(--color-rule);
}
.doc-toc__item {
  border-block-end: var(--seam-size) solid var(--color-rule);
}
.doc-toc__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  min-block-size: var(--target-min);
  padding-block: var(--space-12);
  text-decoration: none;
  color: var(--color-ink-soft);
  font-family: var(--font-stack-mono);
  font-weight: 500;
  font-size: var(--text-label-lat);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  transition: color var(--dur-hover) var(--ease-micro);
}
:lang(ar) .doc-toc__link {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  text-transform: none;
  line-height: 1.75;
}
.doc-toc__link:hover,
.doc-toc__link:focus-visible {
  color: var(--color-ink);
}
.doc-toc__idx {
  flex: 0 0 auto;
  font-family: var(--font-stack-mono);
  font-size: var(--text-micro-lat);
  letter-spacing: 0.12em;
  color: var(--color-ink-faint);
}

/* ═══════════════ 4. The document body ═══════════════ */

.doc-block {
  /* clears the 64px sticky header when a contents anchor lands here */
  scroll-margin-block-start: calc(64px + var(--space-24));
}
/* "rules span" (screens-spec §S8): a hairline between blocks, full column. */
.doc-block + .doc-block {
  margin-block-start: clamp(36px, 4.4vw, 56px);
  padding-block-start: clamp(36px, 4.4vw, 56px);
  border-block-start: var(--seam-size) solid var(--color-rule);
}
/* …except after a block that CLOSES on a manifest: `.manifest__row`'s own
   trailing rule already draws that line, and a second hairline 56px below it
   reads as a mistake. The closing rule of the table becomes the section rule. */
.doc-block--tabled + .doc-block {
  border-block-start: 0;
}
.doc-block__idx {
  margin: 0 0 var(--space-12);
}
.doc-block__heading {
  margin: 0 0 var(--space-16);
  max-inline-size: var(--measure-legal);
  color: var(--color-ink);
}
.doc-p {
  margin: 0 0 var(--space-16);
  max-inline-size: var(--measure-legal);
  font-size: var(--text-legal-lat);
  line-height: 1.65;
  color: var(--color-ink-soft);
}
.doc-p:last-child {
  margin-block-end: 0;
}
:lang(ar) .doc-p {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-legal-ar);
  line-height: 1.9;
}
.doc-manifest {
  margin-block-start: var(--space-24);
  max-inline-size: 860px;
}

/* ═══════════════ 4b. Manifest rows inside the two documents ═══════════════
   `.manifest` (onrecord.css §11) is tuned for full-deck rows: a 300px key
   column and a 320px value basis. Inside a document column that makes SOME rows
   sit side by side and others wrap, so the same table reads two different ways
   depending on how long the key is. Narrower key + smaller value basis keeps
   every row aligned the same way at every width. The `<dd>` reset kills the UA's
   40px indent, which was pushing the values off the key column's grid (and, on
   a wrapped row, indenting the value under nothing). Scoped to these two
   documents so no other screen's manifest changes. */
.doc-manifest .manifest__key,
.legal-manifest .manifest__key {
  min-inline-size: min(100%, 230px);
}
.doc-manifest .manifest__value,
.legal-manifest .manifest__value {
  flex: 1 1 300px;
  margin-inline-start: 0;
}

/* ═══════════════ 5. S9 — the entity manifest ═══════════════ */

/* Wider than the reading measure: these are key/value record rows, not prose —
   the key column and the value want to sit side by side down to tablet. */
.legal-manifest {
  max-inline-size: 860px;
}

/* ═══════════════ 6. S9 — the refund block ═══════════════ */

.doc-refund {
  max-inline-size: var(--measure-legal);
}
.doc-refund__heading {
  margin: 0;
  color: var(--color-ink);
}
.doc-plate {
  margin-block-start: var(--space-24);
}
.doc-plate__label {
  display: block;
  margin: 0 0 var(--space-8);
}

/* S9's page heading (integration pass — legal.h1 key added 2026-09-01) */
.legal-h1 {
  margin-block-end: clamp(26px, 3.5vw, 44px);
}