/* =====================================================================
   Crosslink — the plain-words view. The PUBLIC REGISTER of the design
   system (tokens-public-register.css): paper, 20px cards, 14px tiles,
   pills everywhere, one soft shadow. Named for readers who will never
   open the expert page. Expert surfaces never import this file.
   Same fonts as the expert page, self-hosted; no third-party requests.
   ===================================================================== */
@font-face {
  font-family: "Plex Sans";
  src: url("/fonts/plex-sans-var-400-600.woff2") format("woff2-variations");
  font-weight: 400 700; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/SpaceGrotesk-500.ttf") format("truetype");
  font-weight: 400 500; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/SpaceGrotesk-700.ttf") format("truetype");
  font-weight: 600 800; font-display: swap;
}

:root {
  /* the public register — tokens-public-register.css, verbatim */
  --pub-paper:#FAF6ED; --pub-card:#FFFFFF;
  --pub-ink:#262114; --pub-ink-2:#5D5544;
  --pub-ink-3:#70695A;   /* 3.52:1 -> 5.05:1 on paper — was failing */
  --pub-line:rgba(38,33,20,.10); --pub-line-strong:rgba(38,33,20,.20);
  --pub-gold:#F4B728; --pub-gold-deep:#8A6203; --pub-gold-soft:#FCF3DA; --pub-gold-line:rgba(138,98,3,.35);
  --pub-good:#0B7652;    /* 4.74:1 -> 5.00:1 on its own tint */
  --pub-good-soft:#E9F4EE; --pub-good-line:rgba(11,118,82,.3);
  --pub-amber:#9B540A;   /* 4.43:1 -> 5.03:1 on its own tint — was failing */
  --pub-amber-soft:#FAEFDD; --pub-amber-line:rgba(155,84,10,.32);
  --pub-warn:#B04017;    /* 4.27:1 -> 5.07:1 on its own tint — was failing */
  --pub-warn-soft:#FAECE5;
  --pub-track:#F0EADB;
  --pub-r-dot:2px; --pub-r-mark:8px; --pub-r-tile:14px; --pub-r-panel:16px;
  --pub-r-card:20px; --pub-r-pill:999px;
  /* the register is read once at arm's length, so it sits looser than the
     expert surface: 1.6 body against the board's 1.62 at two points larger. */
  --pub-lh-tight:1.12; --pub-lh-title:1.2; --pub-lh-lede:1.45; --pub-lh-body:1.6;
  --pub-shadow:0 1px 2px rgba(38,33,20,.04), 0 16px 40px -30px rgba(38,33,20,.25);
  /* identicon glyph palette on paper */
  --ic-1:#8A6203; --ic-2:#00657D; --ic-3:#5D5544; --ic-4:#0B7652;   /* ic-2 4.25 -> 6.17 */
  --ic-bg:rgba(38,33,20,.05); --ic-line:rgba(38,33,20,.12);
  /* ---- faces: the same three OFL files the board uses ----------------
     The register is warmer and rounder, but not differently licensed. No
     proprietary family is named here either — the stack leads with the
     shipped file and tails into a generic keyword. Families route through a
     token for the same reason sizes do: so a card cannot hardcode one. */
  --pub-display:"Space Grotesk", "Plex Sans", system-ui, sans-serif;
  --pub-sans:   "Plex Sans", system-ui, sans-serif;
  --pub-mono:   "Plex Mono", ui-monospace, monospace;
  /* ONE TYPE LADDER — six steps, ratified by design v8. Nineteen rendered
     sizes collapse onto these; no rule below sets a raw font-size. Same role
     structure as the expert ladder, shifted up: the public view is read once,
     at arm's length, by someone who will never open the expert page. */
  --pub-fs-1: 13px;   /* pills, captions, fine print — the floor     */
  --pub-fs-2: 15px;   /* meta, sub-labels, controls, secondary prose */
  --pub-fs-3: 17px;   /* body — the register's default              */
  --pub-fs-4: 21px;   /* names, lead numerals, small headings, deck  */
  --pub-fs-5: 30px;   /* section headlines and hero figures          */
  --pub-fs-6: 40px;   /* the one headline at the top                 */

  --snap:90ms linear;   /* the interaction duration */
  --breathe: 1.8s ease-in-out infinite;   /* the live dot — the only loop on this page (motion.css) */
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
/* An author `display:` beats the UA rule for [hidden] — the bare `button`
   rule below is the case that bit #list-toggle. One rule, not one patch per
   component. */
[hidden] { display: none !important; }

/* the identicon's four tones: a class, because var() needs CSS and the
   production CSP refuses an inline style attribute */
.idg { flex: none; vertical-align: -2px; }

/* a fraction is built, never typed — the same rule as app.css, in this register */
.frac { display: inline-block; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; line-height: 1; }
.frac sup, .frac sub { font-size: .7em; line-height: 1; position: relative; vertical-align: baseline; font-weight: 600; }
.frac sup { top: -.42em; margin-right: -.06em; }
.frac sub { top: .1em; margin-left: -.06em; }
text.frac .fd { font-size: .7em; font-weight: 600; }
.idg.ic1 { fill: var(--ic-1); }
.idg.ic2 { fill: var(--ic-2); }
.idg.ic3 { fill: var(--ic-3); }
.idg.ic4 { fill: var(--ic-4); }
.idg.idg-blank { fill: none; }
body {
  margin: 0; background: var(--pub-paper); color: var(--pub-ink);
  font-family: var(--pub-sans); font-size: var(--pub-fs-3); line-height: var(--pub-lh-body);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
a { color: var(--pub-gold-deep); text-decoration: underline; text-decoration-color: var(--pub-gold-line); text-underline-offset: 3px; }
a:hover { color: var(--pub-ink); text-decoration-color: var(--pub-ink); }
h1, h2 { margin: 0; font-family: var(--pub-display); font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; }
em { font-style: normal; font-family: var(--pub-display); font-weight: 600; }
@keyframes pub-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
/* a hidden tab breathes nothing (js/ui.js) */
[data-live="paused"] *, [data-live="paused"] *::before, [data-live="paused"] *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

.pub-shell { max-width: 860px; margin: 0 auto; padding: 0 28px 80px; }

/* header */
.pub-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 26px 0 22px; }
.pub-brand { display: flex; align-items: center; gap: 11px; }
.pub-mark {
  width: 26px; height: 26px; flex: none; overflow: hidden;
  border-radius: var(--pub-r-mark); background: #0B1828;
  display: grid; place-items: center;
}
/* the plaque gives the mark its own navy ground, so the brand pair stays at
   full strength on paper instead of being re-cut for a light surface */
.pub-mark svg { width: 26px; height: 26px; display: block; }
.pub-name { font-family: var(--pub-display); font-size: var(--pub-fs-4); font-weight: 700; letter-spacing: -.02em; }
.pub-tag { font-size: var(--pub-fs-2); color: var(--pub-ink-3); }
.pub-badge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
  border-radius: var(--pub-r-pill); font-size: var(--pub-fs-1); font-weight: 600;
  border: 1px solid var(--pub-line-strong); color: var(--pub-ink-3);
}
.pub-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pub-badge.live { background: var(--pub-good-soft); border-color: var(--pub-good-line); color: var(--pub-good); }
.pub-badge.live::before { animation: pub-pulse var(--breathe); }
.pub-badge.stale { background: var(--pub-amber-soft); border-color: var(--pub-amber-line); color: var(--pub-amber); }
.pub-badge.collecting { border-style: dashed; }
.pub-badge.collecting::before { animation: pub-pulse var(--breathe); }
.pub-badge.down { background: var(--pub-warn-soft); border-color: rgba(196,71,26,.35); color: var(--pub-warn); }

/* cards */
.pub-card {
  margin-top: 20px; padding: 30px 34px;
  background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: var(--pub-r-card);
}
.pub-card[hidden] { display: none; }
.pub-card.hero { box-shadow: var(--pub-shadow); padding: 34px 34px 30px; }
.pub-card.hero + .pub-card, .pub-head + .pub-card { margin-top: 20px; }
.pub-card.notice { border: 1.5px solid var(--pub-amber-line); padding: 20px 26px; }
.pub-card.notice.down { border-color: rgba(196,71,26,.4); }
.notice-title { font-family: var(--pub-display); font-size: var(--pub-fs-4); font-weight: 700; letter-spacing: -.015em; color: var(--pub-amber); }
.notice.down .notice-title { color: var(--pub-warn); }
.notice p { margin-top: 8px; max-width: 64ch; font-size: var(--pub-fs-3); color: var(--pub-ink-2); text-wrap: pretty; }
.pub-card.worth { border: 1.5px solid var(--pub-gold-line); }
.pub-card h1 { font-size: var(--pub-fs-6); line-height: var(--pub-lh-tight); letter-spacing: -.025em; max-width: 22ch; text-wrap: pretty; }
.pub-card h2 { font-size: var(--pub-fs-5); line-height: var(--pub-lh-title); max-width: 26ch; text-wrap: pretty; }
.pub-card.today h2, .pub-card.words h2 { font-size: var(--pub-fs-4); }
.hero p { margin-top: 14px; max-width: 56ch; font-size: var(--pub-fs-4); line-height: var(--pub-lh-lede); color: var(--pub-ink-2); text-wrap: pretty; }
.worth h2 { margin-top: 14px; }
.worth p, .help p:not(.fine) { margin-top: 12px; max-width: 58ch; font-size: var(--pub-fs-3); color: var(--pub-ink-2); text-wrap: pretty; }
.worth #worth-fix { margin-top: 18px; font-size: var(--pub-fs-3); }
.worth #worth-fix:empty { display: none; }
.help h2 { max-width: none; }
.fine { margin-top: 14px; font-size: var(--pub-fs-1); color: var(--pub-ink-3); }
.fine[hidden] { display: none; }
strong { color: var(--pub-ink); font-weight: 600; }
.gold-deep { color: var(--pub-gold-deep); }

.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 26px; }
.tile { padding: 18px 20px; border-radius: var(--pub-r-tile); background: var(--pub-paper); border: 1px solid var(--pub-line); }
.tile .big { font-family: var(--pub-display); font-size: var(--pub-fs-5); font-weight: 700; letter-spacing: -.02em; }
.tile .big.good { color: var(--pub-good); }
.tile .big.amber { color: var(--pub-amber); }
.tile .sub { margin-top: 2px; font-size: var(--pub-fs-2); color: var(--pub-ink-3); }

/* pills — the plain register of StateChip */
.pub-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; flex: 0 0 auto;
  border-radius: var(--pub-r-pill); border: 1px solid var(--pub-line-strong);
  font-size: var(--pub-fs-1); font-weight: 600; white-space: nowrap; color: var(--pub-ink-3);
}
.pub-pill.good { background: var(--pub-good-soft); border-color: var(--pub-good-line); color: var(--pub-good); }
.pub-pill.amber { background: var(--pub-amber-soft); border-color: var(--pub-amber-line); color: var(--pub-amber); }
.pub-pill.quiet { background: transparent; border-style: dashed; color: var(--pub-ink-3); }
.pub-pill.removed { background: var(--pub-warn-soft); border-color: rgba(196,71,26,.35); color: var(--pub-warn); }
.pub-pill.gold { padding: 6px 13px; font-size: var(--pub-fs-1); background: var(--pub-gold-soft); border-color: var(--pub-gold-line); color: var(--pub-gold-deep); }

/* the ⅓ track */
.track-wrap { margin-top: 22px; }
.track { position: relative; height: 16px; border-radius: var(--pub-r-pill); background: var(--pub-track); }
.track .fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: var(--pub-r-pill);
  background: linear-gradient(90deg, var(--pub-gold) 0%, #E8930C 100%); transition: width 400ms ease;
}
.track .fill.under { background: linear-gradient(90deg, #7AB89B 0%, var(--pub-good) 100%); }
.track .mark { position: absolute; top: -6px; bottom: -6px; left: 33.34%; width: 3px; border-radius: var(--pub-r-dot); background: var(--pub-ink); }
.track-scale { margin-top: 10px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--pub-fs-1); color: var(--pub-ink-3); }
.track-scale strong { color: var(--pub-ink); }

/* the suggestion */
.suggest {
  margin-top: 22px; display: flex; align-items: center; gap: 20px; padding: 20px 22px;
  flex-wrap: wrap;
  border-radius: var(--pub-r-panel); background: var(--pub-paper); border: 1px solid var(--pub-line);
}
.suggest[hidden] { display: none; }
.suggest-who { display: flex; align-items: center; gap: 16px; flex: 1 1 340px; min-width: 0; }
.suggest-icon svg { display: block; }
.suggest-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--pub-display); font-size: var(--pub-fs-4); font-weight: 700; }
.suggest-meta { margin-top: 4px; font-size: var(--pub-fs-2); color: var(--pub-ink-3); }
.suggest-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
button {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px; cursor: pointer;
  border-radius: var(--pub-r-pill); border: 1.5px solid var(--pub-line-strong); background: var(--pub-card);
  color: var(--pub-ink-2); font-family: var(--pub-sans); font-size: var(--pub-fs-2); font-weight: 600;
  transition: border-color var(--snap), color var(--snap);
}
button:hover { border-color: var(--pub-gold-deep); color: var(--pub-gold-deep); }
.pub-cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
  border-radius: var(--pub-r-pill); background: var(--pub-gold); border: 1.5px solid var(--pub-gold-deep);
  color: var(--pub-ink); font-size: var(--pub-fs-2); font-weight: 700; text-decoration: none; transition: background var(--snap);
}
.pub-cta:hover { background: #F8CE5E; color: var(--pub-ink); }

/* the operators */
.legend { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-top: 14px; font-size: var(--pub-fs-1); color: var(--pub-ink-3); }
.legend > span { display: inline-flex; align-items: center; gap: 8px; }
.rows { margin-top: 18px; }
.row {
  display: grid; grid-template-columns: 30px minmax(0,1.3fr) minmax(0,1fr) 132px; gap: 14px;
  align-items: center; padding: 13px 0; border-bottom: 1px solid var(--pub-line);
}
.row .rank { font-size: var(--pub-fs-1); color: var(--pub-ink-3); }
.row .who { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--pub-ink); }
.row .who .label { font-family: var(--pub-display); font-size: var(--pub-fs-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .who .label.named { font-weight: 700; }
.row .who:hover .label { color: var(--pub-gold-deep); }
.row .bar { display: flex; align-items: center; gap: 10px; }
.row .bar i { flex: 1; height: 8px; border-radius: var(--pub-r-pill); background: var(--pub-track); overflow: hidden; }
.row .bar i b { display: block; height: 100%; border-radius: var(--pub-r-pill); background: #C9BFA6; }
.row.top .bar i b { background: linear-gradient(90deg, var(--pub-gold) 0%, #E8930C 100%); }
.row .bar span { font-size: var(--pub-fs-1); color: var(--pub-ink-2); width: 52px; text-align: right; }
.row .pill { display: flex; justify-content: flex-end; }
.line-third {
  display: flex; align-items: center; gap: 12px; margin: 0 -34px; padding: 10px 34px;
  background: var(--pub-gold-soft); border-bottom: 1px solid var(--pub-line); font-size: var(--pub-fs-1);
}
.line-third b { font-weight: 600; color: var(--pub-gold-deep); }
.line-third span { color: var(--pub-ink-2); }
.show-all { display: flex; justify-content: center; padding: 16px 0 6px; }
.ops .fine { margin-top: 8px; }

/* today + words */
.pub-two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; margin-top: 20px; }
.pub-two .pub-card { margin-top: 0; padding: 28px 30px; }
.lines { margin-top: 14px; }
.line { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--pub-line); }
.line b {
  font-family: var(--pub-display); font-size: var(--pub-fs-4); font-weight: 700;
  flex: 0 0 auto; min-width: 0; letter-spacing: -.02em;
}
.line b.amber { color: var(--pub-amber); }
.line b.good { color: var(--pub-good); }
.line span { font-size: var(--pub-fs-2); color: var(--pub-ink-2); }
.words dl { margin: 14px 0 0; }
.words dl > div { padding: 11px 0; border-top: 1px solid var(--pub-line); }
.words dt { font-family: var(--pub-display); font-size: var(--pub-fs-2); font-weight: 700; display: inline; }
.words dd { margin: 2px 0 0; font-size: var(--pub-fs-2); color: var(--pub-ink-2); }

.pub-foot {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--pub-line);
  display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; font-size: var(--pub-fs-1); color: var(--pub-ink-3);
}
.pub-foot a { margin-left: auto; font-weight: 600; }

@media (max-width: 880px) {
  .pub-shell { padding-left: 18px; padding-right: 18px; }
  .pub-card { padding: 24px 22px; }
  :root { --pub-fs-6: 30px; --pub-fs-5: 24px; }
  .hero-stats, .pub-two { grid-template-columns: 1fr; }
  .row { grid-template-columns: 30px minmax(0,1fr) 116px; }
  .row .bar { display: none; }
  .suggest { flex-direction: column; align-items: stretch; }
  .suggest-act > * { flex: 1; justify-content: center; }
  .line-third { margin: 0 -22px; padding-left: 22px; padding-right: 22px; }
}

/* an operator named inline in a sentence: glyph + key */
.who-inline { display: inline-flex; align-items: center; gap: 5px; vertical-align: -2px; }
.who-inline svg { display: block; }


/* who made the page, and who makes Crosslink — the register's own voice */
.pub-credit { flex: 1 1 100%; display: grid; gap: 4px; margin-top: 10px; padding-top: 12px;
              border-top: 1px solid var(--pub-line); font-size: var(--pub-fs-1); color: var(--pub-ink-3); }
.pub-credit a { margin-left: 0; font-weight: 600; }