/* ==========================================================================
   PROSE PAGES - /disclosures and /privacy.
   The board is an instrument panel; these are documents, and they are laid out
   as documents: one column, held at a readable measure, no chrome competing
   with the text. Tokens come from theme.css - this file defines none of its
   own, so a theme change moves these pages with the board.
   ========================================================================== */
body {
  background: var(--page);
  color: var(--ink);
  font: var(--w-regular) var(--t-md)/var(--lh-normal) var(--font);
  padding: var(--s-2) var(--s-6) var(--s-12);
  max-width: var(--container);
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; margin: 0; }

/* Legal text is read, not scanned, so it gets a prose measure rather than the
   board's full width - 65ch is where a line stops needing a return sweep. */
.doc { max-width: 65ch; }

header {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  padding: var(--s-4) 0 var(--s-6); border-bottom: 1px solid var(--grid); margin-bottom: var(--s-8);
}
h1 {
  font-size: var(--t-2xl); font-weight: var(--w-semibold);
  line-height: var(--lh-tight); letter-spacing: var(--track-tight);
  display: flex; align-items: center; gap: var(--s-2);
}
h1 .mark { width: var(--mark-w); height: var(--mark-h); flex: none; }
h2 {
  font-size: var(--t-lg); font-weight: var(--w-semibold); line-height: var(--lh-snug);
  letter-spacing: var(--track-tight); margin: var(--s-10) 0 var(--s-3);
}
h2:first-of-type { margin-top: 0; }
p, li { line-height: var(--lh-normal); }
p + p, ul + p, p + ul { margin-top: var(--s-3); }
ul { margin: var(--s-3) 0 0; padding-left: var(--s-5); display: grid; gap: var(--s-2); }
strong { font-weight: var(--w-semibold); }

/* Links carry --ink and an underline, not a link colour. Two reasons: --focus
   is a focus-ring token (4.41:1 on --page — enough for the 3:1 an indicator
   needs, short of the 4.5:1 body text needs), and an underline distinguishes a
   link without leaning on colour at all. Hover warms to --accent (5.6:1 light /
   8.8:1 dark), which is the palette's one non-neutral. */
a { color: var(--ink); text-decoration: underline; text-underline-offset: var(--s-hair); }
a:hover { color: var(--accent); }
/* 3:1 against both --page arms, offset so it never sits under the glyphs. */
a:focus-visible, .back:focus-visible {
  outline: var(--focus-w) solid var(--focus); outline-offset: var(--s-hair); border-radius: var(--r-sm);
}

/* Back to the board. A link, not a button: it navigates. Padded to the 24px
   target floor (WCAG 2.5.8) without looking like a control. */
.back {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-1);
  color: var(--ink-2); font-size: var(--t-sm); padding: var(--s-1) 0;
}
.back:hover { color: var(--ink); }
.back .icon { width: var(--tile-icon); height: var(--tile-icon); }
.icon { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.lede { color: var(--ink-2); font-size: var(--t-lg); line-height: var(--lh-snug); margin-bottom: var(--s-8); }
.updated { color: var(--muted); font-size: var(--t-xs); margin-top: var(--s-2); }

/* The one claim on the page a reader must not be able to skim past. Weight and
   a left rule, not a colour fill: this has to survive forced-colors mode, and
   red-on-cream would read as an error state rather than as a standing warning. */
.keypoint {
  border-left: var(--stripe) solid var(--accent);
  background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-4) var(--s-5); margin: var(--s-6) 0;
  color: var(--ink); font-weight: var(--w-medium);
}

footer {
  margin-top: var(--s-12); padding-top: var(--s-4); border-top: 1px solid var(--grid);
  color: var(--muted); font-size: var(--t-xs); line-height: var(--lh-normal);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
}
footer a { color: var(--ink-2); }
footer a:hover { color: var(--ink); }

@media (max-width: 640px) {
  body { padding-left: var(--s-4); padding-right: var(--s-4); }
  header { gap: var(--s-2); }
  .back { margin-left: 0; }
}