/*
 * The public surface.
 *
 * **A separate surface sharing these tokens and no screens** (§12.4). Nothing
 * in here is imported by the app and nothing in the app is imported by this;
 * the only thing they hold in common is `tokens.css`, which is the whole
 * point of `tokens.css` existing.
 *
 * It runs on the **public** half of the spacing scale — 72/96 section rhythm,
 * a 44px gutter, 24px card padding — because the reader here has never seen
 * any of it and the density that is a feature for the owner is a wall for
 * them. Same vocabulary, different volume.
 */

/* Sections do the rhythm, and only sections do it. Nothing inside a section
   carries a top margin against the section above it — that is the doubling
   the scale exists to prevent. */
.section {
  padding: var(--rhythm-public) 0;
}

.section--tight { padding: var(--rhythm-public) 0 0; }
.section--tall { padding: var(--rhythm-public-lg) 0; }

/* **`padding-inline`, not the `padding` shorthand.** Every section on this
   page carries both classes — `class="section wrap"` — and the shorthand
   here resets the vertical padding `.section` just set, because `.wrap` is
   declared later. The whole page's section rhythm collapsed to nothing and
   it read as one continuous column; the sections were all still there, which
   is why it was not obvious what had gone. A logical-axis property cannot do
   that to a property on the other axis. */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: var(--gutter-public);
}

/* ---- Nav --------------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  /* The home link is a touch target, and at 20px display type it sizes to
     31px on its own — under the floor and directly under a thumb. */
  min-height: var(--touch-min);
  gap: 10px;
  font-family: var(--font-body);
  font-stretch: 125%;
  font-weight: 600;
  font-size: var(--step-display-3);
  letter-spacing: var(--track-20);
  color: var(--ink);
  text-decoration: none;
}

.wordmark svg { width: 18px; height: 20.8px; color: var(--who-me); flex: none; }

.nav-links {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: var(--step-mono-3);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-help);
  text-decoration: none;
  /* 44px minimum touch target (§9), bought with padding rather than height so
     the link's own box stays the size of its text. */
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

.nav-links a:hover { color: var(--ink); }

/* ---- Hero -------------------------------------------------------------- *
 *
 * **A headline sentence first, in plain English, above any table or chart.**
 * If the reader stops there they still have the answer. Then one number is the
 * hero, at display size; the rest is support.
 */
.hero h1,
.doc-head h1 {
  font-size: clamp(40px, 7.4vw, var(--step-display-public));
  letter-spacing: var(--track-64);
  max-width: 17ch;
}

.hero p {
  margin-top: var(--space-4);
  font-size: var(--step-body-public);
  color: var(--ink-body);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* The one hero number. It is a --pitch panel because that is where --accent
   is allowed to live, and the whole reason to have a dark panel on this page
   is to be able to spend the accent once. */
.hero-figure {
  margin-top: var(--space-6);
  padding: var(--space-6) var(--pad-card-public);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.stat { display: flex; flex-direction: column; gap: 6px; }

.stat .value {
  font-family: var(--font-body);
  font-stretch: 125%;
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  letter-spacing: var(--track-32);
  font-variant-numeric: var(--numeric);
  color: #eef1ef;
}

.stat .value--accent { color: var(--accent); }

.stat .label {
  font-family: var(--font-mono);
  font-size: var(--step-mono-4);
  font-weight: 500;
  letter-spacing: var(--track-mono-wide);
  text-transform: uppercase;
  color: rgba(238, 241, 239, 0.64);
}

/* ---- Cards ------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.card {
  padding: var(--pad-card-public);
  background: var(--surface);
  border: 1px solid var(--hairline);
}

.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--ink-body); font-size: var(--step-body); }

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-mono-3);
  font-weight: 500;
  letter-spacing: var(--track-mono-wide);
  text-transform: uppercase;
  color: var(--text-help);
  margin-bottom: var(--space-3);
}

/* ---- Footer ------------------------------------------------------------ */

.footer {
  border-top: 1px solid var(--hairline);
  padding: var(--space-6) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
}

.footer p { font-size: var(--step-body-dense); color: var(--text-help); }

/* ---- The legal documents (§12.4) ---------------------------------------
 *
 * `/privacy` and `/terms` are the only long-form prose on this surface, and
 * they are the two pages that cannot be redesigned casually: both URLs are
 * registered with the Google OAuth client, and the privacy policy is a
 * statement about this page's own behaviour. **Nothing in here may reach off
 * this origin** — no font host, no icon set, no analytics — because a policy
 * that promises no trackers over a stylesheet fetched from Google is a lie
 * about itself. `tests/test_site.py` asserts that rather than trusting it.
 *
 * A document column, not a page column. `.wrap` is 1080px because the index
 * puts three cards across it; prose at 1080px is unreadable, so the article
 * takes its own measure and the contents rail takes the rest.
 */
.doc-head p { margin-top: var(--space-3); }

.doc-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding-bottom: var(--rhythm-public);
}

/* The contents rail. A legal document is read by looking something up in it,
   not from the top, and ten `<h2>`s in a column are a structure the reader
   cannot see until they have scrolled past it. Sticky, so it survives the
   scroll; `<nav>` with a label, so it is one jump for a screen reader. */
.doc-nav {
  position: sticky;
  top: var(--space-4);
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-3);
}

.doc-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: doc-section;
}

.doc-nav a {
  display: flex;
  align-items: center;
  /* Under the 44px floor these are 22px apart and impossible to hit with a
     thumb; the rail is the densest control on the public surface and it still
     answers to §9. */
  min-height: var(--touch-min);
  font-family: var(--font-mono);
  font-size: var(--step-mono-3);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-help);
  text-decoration: none;
}

.doc-nav a:hover { color: var(--ink); }

.doc {
  /* Measure, not width. `p` already stops at 62ch in base.css; this stops the
     headings and the table with it, so the left edge is one line rather than
     two. */
  max-width: 68ch;
}

.doc > * + * { margin-top: var(--space-4); }

.doc h2 {
  font-size: var(--step-display-2);
  letter-spacing: var(--track-26);
  margin-top: var(--space-7);
  /* `scroll-margin-top` and not a magic offset on the anchor: the rail links
     to these, and a heading that lands flush against the top of the viewport
     reads as the previous section's last line. */
  scroll-margin-top: var(--space-4);
}

.doc h2:first-child { margin-top: 0; }

.doc ul,
.doc ol {
  margin: 0;
  padding-left: 1.3em;
  max-width: 62ch;
}

.doc li + li { margin-top: var(--space-1); }
.doc li::marker { color: var(--text-help); }

.doc code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--track-mono-tight);
}

/* The one thing on either page that must be unmissable, and the only dark
   ground on it. Same argument as the index's hero figure: the reason to have
   a `--pitch` panel at all is to be able to spend the emphasis exactly once,
   and on these two pages the non-affiliation statement is what it is spent
   on. It is not a decorated blockquote — the netting comes with the panel. */
.doc-callout {
  padding: var(--space-5) var(--pad-card-public);
  /* `--pitch` is the same colour in both themes and `--paper` is not, so in
     dark the panel is four points of lightness away from the page behind it
     and the block loses its edge — it reads as a patch of netting rather than
     as a statement set apart. The hairline is the panel's own rebound one, so
     it is a light rule that appears against the dark page and vanishes
     against the light one, which is precisely the two cases. */
  border: 1px solid var(--hairline);
}

.doc-callout p + p { margin-top: var(--space-2); }

/* Not `.data-table` from the style guide, and the difference is deliberate:
   that one is 32px rows of `white-space: nowrap` numerals for an owner
   reading a column of figures, and these cells hold sentences. Same
   vocabulary — mono headers, a hairline between rows, no zebra — at the
   public volume. */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step-body-dense);
  /* Wider than a phone on purpose, so `.scroller` around it is load-bearing
     rather than defensive: three columns of prose squeezed into 320px is not
     a table anybody can read. */
  min-width: 34rem;
}

.doc-table th {
  font-family: var(--font-mono);
  font-size: var(--step-mono-4);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-help);
  text-align: left;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--hairline);
}

.doc-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-body);
  vertical-align: top;
}

.doc-table tr:last-child td { border-bottom: 0; }

.footer-links a { color: var(--ink); }

/* ---- Responsive (§9) ---------------------------------------------------
 *
 * 560 and 900. At <=560 the gutter drops to 20, public display caps at 40px,
 * two-column grids stack — which the `auto-fit` minimums already do — and the
 * nav links wrap rather than scroll, because five links is not ten tabs.
 */
@media (max-width: 900px) {
  .section { padding: var(--space-6) 0; }
  .section--tall { padding: var(--rhythm-public) 0; }

  /* The rail stops being a rail and becomes a block of links above the
     document. Hiding it would be the easy answer and it is the wrong one —
     the narrow reader is the one most likely to be looking for one clause
     rather than reading ten sections. */
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .doc-nav { position: static; }
  .doc-nav ol { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
}

@media (max-width: 560px) {
  .wrap { padding-inline: var(--gutter-public-narrow); }
  .hero h1,
  .doc-head h1 { font-size: 40px; letter-spacing: var(--track-32); max-width: none; }
  .nav { flex-wrap: wrap; gap: var(--space-2); }
  .nav-links { gap: var(--space-3); flex-wrap: wrap; }
  .stat .value { font-size: 36px; }
  .cards { gap: var(--space-4); }
  /* The button's small step, and it is still 44px tall. */
  .button { padding: 12px 18px; }
}