/* ── Palette and type ───────────────────────────────────────────────────────
   Comes from `theme.css`, linked before this file — the pack's generated file,
   copied byte-for-byte, the same one every app in the family reads. Until
   2026-08-18 this block held a hand-picked midnight-only SUBSET of the tokens;
   the values were right, but a subset is a copy, and a copy is what drifts.
   Linking the whole file also brings the other three themes along. Nothing here
   selects one, so :root — midnight — applies, exactly as before.
   --radius came across at 14px against the pack's 10px. That divergence is
   gone: this site now takes the pack's radius like every other app.
   Never retune anything here: change the pack's tokens.json, run its
   check_contrast.py gate, rebuild, re-copy.

   The TYPE comes from the pack too, since 2026-08-23 — every size below is a
   `--fs-*` step picked by ROLE from the pack's role contract (rule 7b), not a
   pixel picked by eye. This file linked theme.css and then set `16px/1.6` with
   its own font stack on top, which is the whole failure mode check_consumers.py
   cannot see: it hashes theme.css to prove the file ARRIVED, never that the page
   uses it. Two role calls worth knowing: the store CTA is `--fs-base` because it
   is a BUTTON, and the nav pills are `--fs-xs` because they are this site's
   chrome — the same step every headbar button in the family wears.
──────────────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
/* text-size-adjust: theme.css declares it now (pack rule 9), not here. */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font: var(--fw-normal) var(--fs-base)/var(--lh-base) var(--font-sans);
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}

header.hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}

header.hero img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

header.hero h1 {
  font-size: var(--fs-xl);
  margin: 0;
}

header.hero p {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

/* The App Store call-to-action under the hero title: pack ink-on-accent-fill pair. */
a.store-link {
  display: inline-block;
  margin-top: 10px;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  padding: 8px 16px;
  border-radius: 999px;
}

a.store-link:hover { text-decoration: underline; }

nav.links {
  display: flex;
  gap: 14px;
  margin-bottom: 40px;
}

nav.links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--fs-xs);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

nav.links a:hover, nav.links a.active, nav.links a[aria-current="page"] {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--bg-card);
}

h2 {
  font-size: var(--fs-md);
  margin: 32px 0 10px;
  color: var(--text-primary);
}

h2:first-of-type { margin-top: 0; }

p, li { color: var(--text-secondary); }

a { color: var(--accent); }

/* The keyboard's view of this page. Every sibling app draws its own focus ring
   from the pack's --focus-border rather than leaving the browser's default,
   which on the midnight page is a thin ring the theme has no say over — and on
   the pill-shaped nav links it traced a rectangle round a rounded control.
   `:focus-visible`, not `:focus`, so a mouse click never draws it. */
a:focus-visible,
nav.links a:focus-visible,
a.store-link:focus-visible {
  outline: 2px solid var(--focus-border);
  outline-offset: 2px;
  border-radius: 3px;
}
/* The pills and the store button already have their own radius; matching it
   keeps the ring on the shape rather than around it. */
nav.links a:focus-visible, a.store-link:focus-visible { border-radius: 999px; }

ul { padding-left: 20px; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 20px 0;
}

.meta {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  margin-top: 48px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

/* The effective-date line at the top of the privacy policy: same muted look,
   without the footer separator. Was an inline style attribute, which the CSP
   (style-src 'self', no 'unsafe-inline') rightly blocks. */
.meta.plain {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

code {
  background: var(--bg-card-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* ── The footer every public page in this account carries ────────────────────
   Sprint Predictability's, transcribed — it is the design lead for this chrome
   and a change here belongs there too. Three lines: what the page does with your
   data, the privacy policy beside the repo under "How it works", and the
   authorship line, whose TWO links point at NOTICE (who owns it) and LICENSE
   (the terms) in that order.
   `footer` is a flex ROW so a cross-link to a sibling can sit at the right-hand
   end; `.footnotes` keeps the paragraphs stacked inside it, and without that
   wrapper they become flex items and lay out side by side.
   The links are MUTED, not accent: provenance at the foot of a document rather
   than something to click on the way in. */
footer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.footnotes { flex: 1 1 320px; min-width: 0; }
.privacy { font-size: var(--fs-xs); color: var(--text-muted); margin: 28px 0 0; padding-left: 19px; }
.privacy-links { margin-top: 6px; }
.privacy-links a { color: var(--text-muted); }