/*
 * #264 G5 — THE READING SCALE. One source for the three PUBLIC surfaces: the
 * landing page, the `/guide/*` pages and `/terms` + `/privacy`.
 *
 * **Why these three and not four.** David asked for "one type scale across the
 * app, the landing, the guide and the legal pages", and then for align rather
 * than make-identical. The app is a CONTROL surface — a dense settings column
 * beside a live preview, deliberately at a 15px base — and the other three are
 * READING surfaces. Pulling a control surface onto a reading scale would make
 * the Convert page taller without making anything easier to read, so the app
 * keeps its own scale and this file is the reading one. `web/user/src/styles.css`
 * is unchanged and stays the app's authority.
 *
 * **What the brand package does and does not say (read 2026-08-15).** It
 * specifies ROLES with weights and tracking — Display 600 at -2%, Heading 600,
 * Subhead 500, Body 400 over Space Grotesk 400/500/600/700 — and no pixel sizes
 * anywhere. So the four `--w-*` weights and `--tr-display` below ARE the brand;
 * the sizes are ours, chosen around a 16px reading base.
 *
 * **This file defines TYPE ONLY — never colour.** The three surfaces keep their
 * own palettes and `scripts/check-css-tokens.py` keeps them apart; that
 * separation is what stopped `--coral` leaking into the app, and aligning a
 * scale does not require sharing a palette.
 *
 * **The landing does not LINK this file — it inlines it**, generated by
 * `scripts/sync-public-css.py` between the markers in `index.html` and verified
 * by `--check` in smoke and CI. The landing ships no bundle and makes no
 * render-blocking stylesheet request today; buying drift-freedom with a request
 * on the one page that is judged on first paint is a bad trade, and the #142
 * generate-and-check pattern already exists for exactly this. The guide and the
 * legal pages DO link it: they already fetch a stylesheet.
 */
:root {
  /* ---- steps ---------------------------------------------------------- */
  /* Nine, replacing the 37 distinct sizes the three surfaces used between
     them. Anything that does not land on a step is a bug or a deliberate,
     commented exception. */
  --fs-hero: clamp(40px, 7vw, 76px);      /* the landing hero, and only that */
  --fs-display: clamp(30px, 4.6vw, 44px); /* page title */
  --fs-h2: 24px;                          /* section heading */
  --fs-h3: 18px;                          /* sub heading, card title */
  --fs-lede: clamp(17px, 1.4vw, 19px);    /* standfirst under a title */
  --fs-body: 16px;                        /* running text — the base */
  --fs-small: 15px;                       /* secondary text, captions */
  --fs-micro: 13px;                       /* meta, chips, table cells */
  --fs-label: 12px;                       /* UPPERCASE eyebrow */

  /* The steps below `--fs-body` are deliberately CLOSE together (16 / 15 / 13 /
     12). The complaint that started G5 was that text was too small — the guide's
     article text at 14.5px and its badges at 9.5px — so the scale is built so
     that snapping an existing size to its nearest step almost always rounds UP.
     The single decrease anywhere is the landing's 17px base coming to 16, which
     is the price of the three surfaces sharing a base at all. */

  /* ---- the brand's four roles ----------------------------------------- */
  --w-display: 600;
  --w-head: 600;
  --w-sub: 500;
  --w-body: 400;
  --tr-display: -0.02em;  /* the brand's -2%, display type only */
  --tr-label: 0.1em;      /* uppercase needs the opposite of tight */

  /* ---- vertical rhythm ------------------------------------------------- */
  --lh-hero: 1.08;
  --lh-display: 1.12;
  --lh-head: 1.25;
  --lh-body: 1.65;
  --lh-tight: 1.45;
}

/*
 * #264 (David's decision 3) — THE PUBLIC HEADER, shared by the landing and the
 * guide. It was the landing's, written inline in `index.html`; the guide had a
 * near-copy of its own, and a near-copy is what #142 exists to stop.
 *
 * **This block still defines no colour.** It references `--hdr-*`, which each
 * surface maps onto ITS OWN palette — the landing to `--ink`/`--line`/`--mut`,
 * the guide to `--bg`/`--border`/`--muted`. That keeps the token universes as
 * separate as `check-css-tokens.py` requires while the component is shared once.
 *
 * **A5 is fixed here, for both.** The landing's nav was `display: none` below
 * 720px, so a phone got a brand and a button and no navigation at all. Handing
 * the guide that same rule would have cost the guide its nav too. Below the
 * breakpoint the nav now takes its own row as a horizontal scroller rather than
 * disappearing — the same device the guide's card rows use since G4/A2, so the
 * two read as one system.
 */
.p-top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--hdr-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hdr-line);
}
.p-top-in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.p-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: var(--w-head);
  font-size: var(--fs-h3);
  letter-spacing: var(--tr-display);
  text-decoration: none;
  color: var(--hdr-text);
  white-space: nowrap;
}
.p-brand img {
  height: 26px;
  display: block;
}
.p-top nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.p-top nav a {
  text-decoration: none;
  color: var(--hdr-mut);
  font-size: var(--fs-small);
  /* 24px is the WCAG 2.5.8 AA floor and these are the site's primary
     navigation, so they get more than the minimum. */
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.15s;
}
.p-top nav a:hover,
.p-top nav a:focus-visible {
  color: var(--hdr-text);
}
.p-top .p-cta {
  margin-left: 8px;
}

@media (max-width: 719px) {
  .p-top-in {
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px;
  }
  .p-top .p-cta {
    margin-left: auto;
  }
  /* A5: the nav takes the full second row and scrolls, rather than vanishing. */
  .p-top nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 2px;
  }
  .p-top nav::-webkit-scrollbar {
    display: none;
  }
  .p-top nav a {
    padding: 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-top nav a {
    transition: none;
  }
}