/* FearMetric. One stylesheet, two typefaces served from this site (see /fonts/), no frameworks, nothing from another site.

   Color has three meanings: an answer's word (the outcome-first plan's Worse, Better, About the same, Not assessed), that a
   question has numbers but no answer yet, and — the owner's rule (2026-10-29) — a number's good or bad: "numbers red or
   green depending on if good or bad, arrows red or green depending if trending good or bad. Words stay ink." Every colored
   thing keeps its words beside it, so color is never the only cue. The answer colors are tokens (--a-*); the switched-off
   dial and gauges keep theirs (--v-*). */

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/public-sans-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/public-sans-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'FearMetric Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fearmetric-serif-latin-600.woff2') format('woff2');
}

:root {
  color-scheme: light dark;
  --paper: #fbfaf7;
  --surface: #ffffff;
  --ink: #15181e;
  --muted: #4b5363;
  --rule: #ddd8ce;
  --edge: #8c8578;
  --blue: #1d4e89;
  --blue-tint: #eef3fa;
  --band: #fff1c2;
  --band-ink: #15181e;
  --band-edge: #8a5300;
  --invert-bg: #15181e;
  --invert-ink: #fbfaf7;
  --focus: #1d4e89;
  /* The answers' states. */
  --v-shows: #b3401a;
  --v-shows-tint: #fdf0ea;
  --v-mixed: #8a5300;
  --v-mixed-tint: #fbf3e3;
  --v-not_yet: #3e4a5c;
  --v-not_yet-tint: #ffffff;
  --v-eases: #0f5e73;
  --v-eases-tint: #ecf6f8;
  --v-cant: #5f6672;
  --v-cant-tint: #f4f3f1;
  --v-none: #1d4e89;
  --v-none-tint: #f3f6fb;
  --v-late: #5f6672;
  /* The answers' words (the plan, section 4), and numbers with no answer yet */
  --a-worse: #b3261e;
  --a-worse-tint: #fbeae9;
  --a-better: #1a6b2f;
  --a-better-tint: #eaf4ec;
  --a-about_the_same: #3e4a5c;
  --a-about_the_same-tint: #f1f3f6;
  --a-not_assessed: #5f6672;
  --a-not_assessed-tint: #f4f3f1;
  --a-numbers: #1d4e89;
  --a-numbers-tint: #eef3fa;
  --example: #8a5300;
  /* The gauges: the stretch past a line, and a gauge with no line here */
  --g-zone: #c46a47;
  --gauge-noline: #ecebe7;
  /* The dark top: the header on every page and Home's first band, as the live fearmetric.com shows them (the owner's screenshot of
     2026-10-25: "the above the fold should not change very much"). The same in light and dark: a dark band in both themes. */
  --hero-head: #131c33;
  --hero-bg: #121a25;
  --hero-ink: #f4f1ea;
  --hero-muted: #b9c1cd;
  --hero-rule: #3a4558;
  --hero-focus: #f4f1ea;
    --ring-track: #5d6a7e;
  --ring-fill: #f4f1ea;
  --ring-better: #6fc98a;
  --ring-worse: #f28b82;
  --hero-logo: #2b3852;
  --serif: 'FearMetric Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --radius: 12px;
  --wrap: 75rem;
  --gutter: 16px;
  --shadow: 0 1px 2px rgba(21, 24, 30, 0.06), 0 8px 24px -16px rgba(21, 24, 30, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111317;
    --surface: #1a1d22;
    --ink: #eeeae3;
    --muted: #b2b8c2;
    --rule: #30353d;
    --edge: #6b727d;
    --blue: #93bcf2;
    --blue-tint: #18253a;
    --band: #3a2f0b;
    --band-ink: #ffe7a3;
    --band-edge: #e3b34f;
    --invert-bg: #eeeae3;
    --invert-ink: #111317;
    --focus: #93bcf2;
    --v-shows: #f2926a;
    --v-shows-tint: #2a1a14;
    --v-mixed: #e3b34f;
    --v-mixed-tint: #29220f;
    --v-not_yet: #c5ceda;
    --v-not_yet-tint: #1a1d22;
    --v-eases: #6fc3d6;
    --v-eases-tint: #12262b;
    --v-cant: #a2a9b4;
    --v-cant-tint: #1e2025;
    --v-none: #93bcf2;
    --v-none-tint: #172131;
    --v-late: #a2a9b4;
    --a-worse: #f28b82;
    --a-worse-tint: #2a1517;
    --a-better: #6fc98a;
    --a-better-tint: #16241a;
    --a-about_the_same: #c5ceda;
    --a-about_the_same-tint: #1f242c;
    --a-not_assessed: #a2a9b4;
    --a-not_assessed-tint: #1e2025;
    --a-numbers: #93bcf2;
    --a-numbers-tint: #172131;
    --example: #e3b34f;
    --g-zone: #c4643f;
    --gauge-noline: #262a30;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -16px rgba(0, 0, 0, 0.9);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

a {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
main:focus {
  outline: none;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  /* A long word in a big headline breaks at a hyphen, not mid-letter, when text is enlarged on a phone. Only a word of 10
     letters or more: a browser that hyphenates otherwise splits short words a line could hold whole ("per-sonal" at 200% text
     on a 390 px phone, docs/DEFECTS.md, entry 61). */
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}
/* Capped by the screen's width too, so at 200% text the longest word of a headline still fits a phone's line and never breaks
   mid-letter where the browser has no hyphenation (the review of 2026-10-22). */
h1 {
  font-size: min(clamp(1.625rem, 1rem + 2.6vw, 3rem), 10vw);
}
h2 {
  font-size: min(clamp(1.4rem, 1.1rem + 1.2vw, 2rem), 8.5vw);
}
p {
  margin: 0 0 0.75rem;
}

.nw {
  white-space: nowrap;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Hidden above the page by its own height, however large the text, until it has focus. */
.skip {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 10;
  background: var(--surface);
  padding: 10px 14px;
  border-radius: 8px;
  transform: translateY(calc(-100% - 16px));
}
.skip:focus {
  transform: none;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.narrow {
  max-width: 48rem;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- Buttons */
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--edge);
  background: var(--surface);
  color: var(--ink);
  font: 600 1rem/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.button:hover {
  border-color: var(--ink);
}
.button-strong {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.button-strong:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--surface);
}
.button-invert {
  background: var(--invert-ink);
  border-color: var(--invert-ink);
  color: var(--invert-bg);
}
.ic {
  width: 20px;
  height: 20px;
  flex: none;
}
.ic-inline {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

/* ---- Header */
.site-header {
  background: var(--hero-head);
  color: var(--hero-ink);
  border-bottom: 1px solid var(--hero-rule);
  position: relative;
  z-index: 5;
}
/* On the dark header: its links, buttons and focus ring in the band's own ink. The menu's open list stays a light card. */
.site-header .brand,
.site-header .nav-list a {
  color: var(--hero-ink);
}
.site-header .nav-list a:hover {
  background: var(--hero-rule);
}
.site-header .nav-list a[aria-current='page'] {
  box-shadow: inset 0 -3px 0 var(--hero-ink);
}
.site-header .button,
.site-header .menu > summary {
  background: transparent;
  color: var(--hero-ink);
  border-color: var(--hero-muted);
}
.site-header .button:hover,
.site-header .menu > summary:hover {
  border-color: var(--hero-ink);
}
.site-header .button-strong,
.site-header .menu[open] > summary {
  background: var(--hero-ink);
  color: var(--hero-head);
  border-color: var(--hero-ink);
}
.site-header .button-strong:hover {
  background: var(--hero-muted);
  border-color: var(--hero-muted);
  color: var(--hero-head);
}
.site-header :focus-visible {
  outline-color: var(--hero-focus);
}
.site-header .menu nav :focus-visible {
  outline-color: var(--focus);
}
.site-header .logo-square {
  fill: var(--hero-logo);
}
.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 56px;
}
@media (max-width: 399px) {
  .place-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font: 600 1.25rem/1 var(--sans);
  letter-spacing: -0.01em;
  min-height: 44px;
  margin-right: auto;
}
.logo-square {
  fill: var(--ink);
}
.logo-bar-a {
  fill: #d9622b;
}
.logo-bar-b {
  fill: #2f6db5;
}
@media (prefers-color-scheme: dark) {
  .logo-square {
    fill: #2a2e35;
  }
}
.nav-wide {
  display: none;
}
.nav-list,
.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list {
  display: flex;
  gap: 4px;
}
.nav-list a,
.menu-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 8px;
}
.nav-list a:hover,
.menu-list a:hover {
  background: var(--blue-tint);
}
.nav-list a[aria-current='page'] {
  box-shadow: inset 0 -3px 0 var(--blue);
  border-radius: 0;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.place-button,
.menu > summary {
  white-space: nowrap;
}
.place-button {
  padding: 6px 12px;
  gap: 6px;
  font-size: 0.9375rem;
}
.personal-button {
  display: none;
}
.menu {
  position: relative;
}
.menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 12px;
  border: 1.5px solid var(--edge);
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.menu[open] > summary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
}
.menu-list a {
  width: 100%;
}
@media (min-width: 640px) {
  .personal-button {
    display: inline-flex;
  }
}
@media (min-width: 1000px) {
  .nav-wide {
    display: block;
  }
  .menu {
    display: none;
  }
  .brand {
    margin-right: 16px;
  }
  .header-actions {
    margin-left: auto;
  }
}

/* ---- The sample and preview bands */
.band {
  background: var(--band);
  color: var(--band-ink);
  border-bottom: 2px solid var(--band-edge);
}
.band p {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 8px var(--gutter);
  font-size: 0.95rem;
  line-height: 1.4;
}
@media (max-width: 599px) {
  .band span {
    display: none;
  }
}
.band strong {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---- The top of a page */
.kicker {
  font: 600 0.8125rem/1.3 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}
.deck {
  color: var(--muted);
  font-size: 1rem;
  max-width: 38rem;
  margin-bottom: 12px;
}
.place-title {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.4;
  margin: 8px 0 0;
}
.dated-note {
  background: var(--blue-tint);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1rem;
}
.trust-line {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 12px;
}
.crumbs {
  max-width: 100%;
  overflow: hidden;
}
.crumbs ol {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 0 6px;
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
  overflow-x: auto;
}
.crumbs li:not(:last-child)::after {
  content: '›';
  margin-left: 6px;
}
.crumbs a,
.crumbs span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}


/* ---- The top: a short headline, the main dial, six gauges, the place finder */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'head' 'dial' 'gauges' 'find';
  align-items: center;
  gap: 10px 12px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.hero-place,
.hero-nodial {
  grid-template-areas: 'head' 'gauges' 'find';
}
.tagline {
  margin: 4px 0 0;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--muted);
}
.hero-head {
  grid-area: head;
  min-width: 0;
}
.hero-head h1 {
  margin: 0;
  font-size: min(clamp(1.625rem, 1.1rem + 2.4vw, 2.75rem), 10vw);
}
.hero-head .kicker {
  margin-bottom: 2px;
}
.hero-head .dated-note {
  margin: 8px 0 0;
}
.hero-dial {
  grid-area: dial;
}
.hero-gauges {
  grid-area: gauges;
}
.hero-find {
  grid-area: find;
}

/* The main dial: a count of the worries we can check, one block per worry, lit for each the data shows, and a line each */
.dial {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow);
}
.d-count {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-weight: 600;
  line-height: 1.3;
}
.d-blocks {
  display: inline-flex;
  gap: 3px;
  flex: none;
}
.d-block {
  width: 16px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid var(--edge);
  background: var(--surface);
}
.d-block.d-on {
  border-color: var(--v-shows);
  background: var(--v-shows);
}
.d-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.d-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--rule);
}
.d-list a:hover .d-what {
  text-decoration: underline;
}
.d-list .mk {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--v);
}
.d-list li {
  --v: var(--v-none);
}
.d-list .state-shows {
  --v: var(--v-shows);
}
.d-list .state-mixed {
  --v: var(--v-mixed);
}
.d-list .state-not_yet {
  --v: var(--v-not_yet);
}
.d-list .state-eases {
  --v: var(--v-eases);
}
.d-what {
  flex: 1;
  min-width: 0;
}
.d-what::first-letter {
  text-transform: uppercase;
}
.d-word {
  font-weight: 600;
  color: var(--v);
  white-space: nowrap;
}
.d-badges {
  margin: 6px 0 0;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.d-badge {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--band);
  color: var(--band-ink);
  border: 1px solid var(--band-edge);
}
.d-sample-badge {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* The score dial: for the owner's A/B screenshot only */
.dial-score {
  display: grid;
  justify-items: center;
  text-align: center;
}
.d-svg {
  width: 160px;
  height: auto;
  display: block;
}
.d-svg path {
  fill: none;
  stroke-width: 12;
}
.d-off {
  stroke: var(--rule);
}
.d-fill {
  stroke: var(--blue);
}
.d-value {
  margin: -30px 0 0;
  line-height: 1;
}
.d-big {
  font: 600 2rem/1 var(--sans);
}
.d-of {
  color: var(--muted);
}
.d-label {
  margin: 4px 0 0;
  font-weight: 600;
}

/* The gauges */
.gauges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Two across on a phone; one across when large text leaves no room for two */
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
  gap: 6px;
}
.gauge a {
  position: relative;
  display: grid;
  grid-template-columns: clamp(40px, 12vw, 56px) minmax(0, 1fr);
  grid-template-areas: 'name name' 'svg num' 'vs vs' 'meta meta';
  column-gap: 8px;
  row-gap: 1px;
  align-items: center;
  align-content: start;
  height: 100%;
  padding: 5px 8px 6px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
}
.gauge-past a {
  border-color: var(--v-shows);
  background: var(--v-shows-tint);
}
.gauge a:hover .g-name {
  text-decoration: underline;
}
.g-head {
  grid-area: name;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 6px;
  min-width: 0;
}
.g-name {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.25;
}
.g-from {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue);
}
.g-info {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 16px;
  height: 16px;
  color: var(--blue);
}
.gauge a:hover .g-info,
.gauge a:focus-visible .g-info {
  color: var(--ink);
}
.g-late {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--v-cant);
}
.g-late .mk {
  width: 14px;
  height: 14px;
}
.g-svg {
  grid-area: svg;
  width: 100%;
  height: auto;
  display: block;
}
.g-track,
.g-past {
  fill: none;
  stroke-width: 9;
}
.g-track {
  stroke: var(--rule);
}
.g-past {
  stroke: var(--g-zone);
}
.g-line {
  stroke: var(--ink);
  stroke-width: 3;
}
.g-ease {
  stroke: var(--v-eases);
  stroke-width: 3;
  stroke-dasharray: 3 2.5;
}
.gauge-eased a {
  border-color: var(--v-eases);
  background: var(--v-eases-tint);
}
.gauges-from {
  margin: 0 0 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}
.g-zero {
  stroke: var(--muted);
  stroke-width: 1.5;
}
.g-dot {
  fill: var(--ink);
  stroke: var(--surface);
  stroke-width: 2.5;
}
.g-num {
  grid-area: num;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  font: 600 1.125rem/1.1 var(--sans);
  letter-spacing: -0.01em;
}
.g-num-none {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  color: var(--v-cant);
}
.g-num > span {
  min-width: 0;
}
.g-arrow {
  width: 14px;
  height: 14px;
  flex: none;
}
/* The same rule on a gauge: its number and arrow take the feed's good-or-bad tone; the words beside and below stay ink.
   No tone class: ink. */
.g-num.a-better {
  color: var(--a-better);
}
.g-num.a-worse {
  color: var(--a-worse);
}
.g-vs {
  grid-area: vs;
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 600;
}
.gauge-noline a {
  background: var(--gauge-noline);
}
.g-meta {
  grid-area: meta;
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--muted);
}
.gauge-none a {
  grid-template-areas: 'name name' 'num num';
}
.find-compact {
  padding: 10px 12px;
}
.find-compact label {
  font-size: 0.9375rem;
}

@media (min-width: 560px) and (max-width: 899px) {
  .gauges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 23rem) minmax(0, 21rem);
    grid-template-areas: 'head dial find' 'gauges gauges gauges';
    gap: 16px 32px;
    padding-top: 20px;
    padding-bottom: 16px;
  }
  .hero-place,
  .hero-nodial {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    grid-template-areas: 'head find' 'gauges gauges';
  }
  .gauges {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .gauge a {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'name' 'svg' 'num' 'vs' 'meta';
    justify-items: center;
    text-align: center;
    row-gap: 4px;
    padding: 12px 10px 14px;
  }
  .g-head {
    justify-content: center;
  }
  /* Where any gauge names a wider area, each keeps a line for it, so the dials line up across the row */
  .gauges-named .g-head {
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: 2.75rem;
    justify-content: flex-start;
  }
  .g-svg {
    width: 110px;
  }
  .g-num {
    font-size: 1.5rem;
  }
  .g-meta {
    font-size: 0.8125rem;
  }
  .gauge-none a {
    grid-template-areas: 'name' 'num';
  }
}
.answers-title {
  margin-top: 4px;
}

/* ---- Side panels */
.side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 20px;
}
@media (min-width: 900px) {
  .side {
    margin-top: 0;
  }
}
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px;
}
.panel-title {
  font-size: 1.25rem;
}
.hint {
  font-size: 0.9375rem;
  color: var(--muted);
}
.find {
  border: 2px solid var(--ink);
}
.find-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.find-row {
  display: flex;
  gap: 8px;
}
.find-row input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  font: 400 1.0625rem/1.2 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--edge);
  border-radius: 10px;
}
.find-status {
  font-size: 0.9375rem;
  color: var(--muted);
  min-height: 0;
  margin: 6px 0 0;
}

/* The Contact page's form (src/pages/info.js, contact). */
.contact-form label {
  display: block;
  font-weight: 600;
  margin: 16px 0 6px;
}
.contact-form textarea,
.contact-form input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font: 400 1.0625rem/1.4 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--edge);
  border-radius: 10px;
}
.contact-form textarea {
  min-height: 10rem;
  resize: vertical;
}
.contact-form .hint {
  margin: 6px 0 0;
}
/* The trap field: out of sight and out of the keyboard's reach (tabindex -1), so only a bot fills it. */
.contact-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-check {
  margin: 16px 0;
}
.contact-check:empty {
  margin: 8px 0;
}
.contact-form button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.contact-status {
  min-height: 1.5em;
  margin: 12px 0 0;
}
.find-results {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.find-results a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}
.find-results a:hover,
.find-results a:focus-visible {
  background: var(--blue-tint);
}
.more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-weight: 600;
}
.share-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9375rem;
}
.share-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.share-row input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  font: 400 0.9375rem/1.2 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 10px;
}
.cite {
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px dashed var(--edge);
  border-radius: 10px;
}

/* ---- Below the top */
.trust {
  padding-top: 24px;
  padding-bottom: 24px;
}
.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.trust-list li {
  position: relative;
  padding: 12px 14px 12px 44px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.trust-list li::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 17px;
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--blue);
  border-bottom: 3px solid var(--blue);
  transform: rotate(-45deg);
}
@media (min-width: 700px) {
  .trust-list {
    grid-template-columns: 1fr 1fr;
  }
}
.sources,
.related {
  padding-top: 28px;
  padding-bottom: 28px;
}
.credits-all {
  margin-bottom: 18px;
}
.sources-line {
  font-weight: 600;
  margin-bottom: 4px;
}
.source-names {
  margin: 0 0 10px;
  padding-left: 1.2em;
}
/* The Sources page: each publisher, and under it the full credit line of each of its sources */
.source-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.source-name {
  font-weight: 600;
  margin: 0 0 4px;
}
.source-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.source-lines li {
  padding-left: 12px;
  border-left: 2px solid var(--rule);
  overflow-wrap: anywhere;
}
.source-when {
  color: var(--muted);
}
.sources-endorse {
  margin-top: 24px;
}
.place-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}
.place-links a,
.state-link,
.metro-index a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.state-index {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
}
.state-index > li {
  break-inside: avoid;
  padding: 4px 0;
  border-bottom: 1px solid var(--rule);
}
.state-link {
  font-weight: 600;
}
.metro-index {
  list-style: none;
  margin: 0 0 6px;
  padding-left: 14px;
  font-size: 0.9375rem;
}
@media (min-width: 700px) {
  .state-index {
    columns: 2;
    column-gap: 32px;
  }
}

/* ---- Footer */
.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--surface);
  padding: 24px 0 32px;
  font-size: 0.9375rem;
  color: var(--muted);
}
.footer-links {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-small {
  font-size: 0.875rem;
}

/* ---- Prose pages */
.prose {
  padding-top: 24px;
  padding-bottom: 40px;
}
.prose h2 {
  margin-top: 32px;
}
.plain-list {
  margin: 0 0 12px;
  padding-left: 1.2em;
}
.plain-list li + li {
  margin-top: 6px;
}
/* ---- Past weeks and corrections */
.week-list,
.correction-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.week {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.week-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-weight: 600;
}
.week-head a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.correction {
  border: 2px solid var(--band-edge);
  background: var(--band);
  color: var(--band-ink);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 1rem;
}
.correction p {
  margin: 0 0 4px;
}
.correction-title {
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header,
  .jump,
  .home-personal,
  .learn {
    display: none;
  }
}

/* ---- Placeholders and drafts (About, Privacy, Terms): plainly marked, and refused by the production build */
.placeholder {
  padding: 10px 12px;
  border: 1px dashed var(--edge);
  border-radius: 10px;
  color: var(--muted);
  font-style: italic;
}
.prose section {
  margin-top: 8px;
}

/* ---- The page for an address that doesn't exist */
.not-found {
  padding-top: 28px;
  padding-bottom: 40px;
}
.not-found .find {
  margin: 16px 0;
}
.g-meta {
  padding-right: 16px;
}

/* ======================================================================================================================
   The outcome-first pages: Home, the national reading, a place, Personal. Each answer's word has a mark and a color
   (--a-*), and always its word. A figure's number and arrow take the feed's good-or-bad tone (the owner, 2026-10-29);
   the words around them stay ink.
   ====================================================================================================================== */

.mk {
  --mk-cut: var(--surface);
}

/* ---- Labels, tags and small type shared by the sections */
.label {
  font: 600 0.8125rem/1.3 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 8px;
}
.label-quiet {
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.9375rem;
}
.label-inline {
  font-weight: 600;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  font: 600 0.8125rem/1.5 var(--sans);
  color: var(--muted);
  background: var(--surface);
  vertical-align: 1px;
}
.tag-revised {
  color: var(--blue);
  border-color: var(--blue);
}
.tag-done {
  color: var(--a-better);
  border-color: var(--a-better);
}
.note {
  color: var(--muted);
  font-size: 1rem;
}
.dot {
  color: var(--edge);
}

/* ---- An answer's word: its mark, its word, its color */
.a-word {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  font: 600 1rem/1.3 var(--sans);
  color: var(--a);
  background: var(--a-tint);
}
.a-word .mk {
  width: 22px;
  height: 22px;
  flex: none;
}
.a-worse { --a: var(--a-worse); --a-tint: var(--a-worse-tint); }
.a-better { --a: var(--a-better); --a-tint: var(--a-better-tint); }
.a-about_the_same { --a: var(--a-about_the_same); --a-tint: var(--a-about_the_same-tint); }
.a-not_assessed { --a: var(--a-not_assessed); --a-tint: var(--a-not_assessed-tint); }
.a-numbers,
.a-first { --a: var(--a-numbers); --a-tint: var(--a-numbers-tint); }
.a-word.a-worse .mk {
  --mk-cut: var(--a-worse-tint);
}

/* ---- Home */
/* Home's top: the live page's dark band (the owner's screenshot of 2026-10-25). The headline, the line under it and the
   edition's date on the left; the ring on the right; the three columns under them. On a phone, one column in that order. The
   headline is the sans the site serves at 600 (the coordinator, 2026-10-25, item 7: no new font). */
.top-band {
  background: var(--hero-bg);
  color: var(--hero-ink);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'lead' 'ring' 'cover';
  gap: 18px 48px;
  padding-top: 22px;
  padding-bottom: 28px;
}
.hero-lead {
  grid-area: lead;
}
.hero-ring {
  grid-area: ring;
  text-align: center;
}
.hero-cover {
  grid-area: cover;
}
.hero-kicker {
  font: 600 0.8125rem/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.top-band h1 {
  font-family: var(--sans);
  font-weight: 600;
  /* Capped by the screen's width as well as the text size, so the headline's longest word fits a phone's line at 200% text. */
  font-size: min(clamp(2.375rem, 1.1rem + 5.4vw, 5.75rem), 12.5vw);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.hero-deck {
  font-size: 1.0625rem;
  line-height: 1.5;
  max-width: 36rem;
  margin: 0 0 8px;
}
.hero-edition {
  font-size: 0.9375rem;
  color: var(--hero-muted);
  margin: 0;
}
.top-band a {
  color: var(--hero-ink);
}
/* The dot between the area and the trend: the page's --edge reads 3.61:1 on the band in dark (the browser checks, d7a7607). */
.top-band .dot {
  color: var(--hero-muted);
}
.top-band :focus-visible {
  outline-color: var(--hero-focus);
}

/* The ring: its arc is the reading (src/lib/ring.js); its words sit inside, the trend line and what the score is under it. */
.ring-face {
  position: relative;
  width: min(100%, 11.5rem);
  aspect-ratio: 1;
  margin: 0 auto;
}
.ring-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ring-track,
.ring-fill {
  fill: none;
  stroke-width: 12;
}
.ring-track {
  stroke: var(--ring-track);
}
.ring-fill {
  stroke: var(--ring-fill);
}
.ring-inner {
  position: absolute;
  inset: 13%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.ring-label {
  font: 600 0.6875rem/1.25 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Narrower than the ring's inside near its top, so a long label wraps rather than touch the ring. */
  max-width: 7.5rem;
  text-wrap: balance;
}
.ring-num {
  font: 600 3rem/1 var(--sans);
  letter-spacing: -0.02em;
}
.ring-band {
  font: 600 1.125rem/1.2 var(--sans);
}
.ring-dash {
  display: block;
  width: 42%;
  height: 5px;
  margin: 10px 0;
  border-radius: 2px;
  background: var(--hero-ink);
}
.ring-trend,
.ring-why {
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  margin: 12px auto 4px;
  max-width: 24rem;
}
/* A late mark on the band, in the band's own ink: beside "This number is on hold." in the ring, and on the late line under it. */
.ring-band .mk,
.ring-stale .mk {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--hero-ink);
}
.ring-band {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: center;
}
/* From the feed's band only, on the ring's number. The owner's rule (2026-10-29): words stay ink — the band word and the
   trend sentence keep their classes in the markup (the data layer) and this stylesheet alone decides what renders colored,
   so they render ink today; a future flip is a change here only. */
/* Scoped to the ring's number: the bare names belong to the answer-word marker family above. */
.ring-num.a-better {
  color: var(--ring-better);
}
.ring-num.a-worse {
  color: var(--ring-worse);
}
.ring-stale {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0 auto 4px;
  font-size: 1rem;
  font-weight: 600;
}
.ring-note {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--hero-muted);
  max-width: 24rem;
  margin: 0 auto;
}
/* "As of {date}" at the end of the scale note, kept whole on one line (src/lib/ring.js, asOfLine). */
.ring-asof {
  white-space: nowrap;
}
/* The overall statement under the ring: the feed's `overall`, verbatim (src/lib/overall.js). */
.overall {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--hero-rule);
  text-align: center;
}
.overall-title {
  margin: 0 0 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hero-muted);
}
.overall-text {
  margin: 0 auto;
  max-width: 26rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--hero-ink);
}
.overall-next {
  margin: 4px auto 0;
  max-width: 26rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--hero-muted);
}
.overall-note {
  margin: 4px auto 0;
  max-width: 26rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--hero-muted);
}
.overall-failed .overall-text {
  font-weight: 400;
}
.top-band .explain {
  margin-top: 12px;
}
.top-band .explain > summary {
  margin: 0 auto;
  color: var(--hero-ink);
  border-color: var(--hero-muted);
}
.top-band .explain > summary:hover {
  border-color: var(--hero-ink);
}
.top-band .explain > summary .ic-info {
  color: var(--hero-ink);
}
/* The panel's body is a light card, as everywhere else, with the page's own ink, links and focus ring. */
.top-band .explain-body {
  color: var(--ink);
  text-align: left;
}
.top-band .explain-body a {
  color: var(--blue);
}
.top-band .explain-body :focus-visible {
  outline-color: var(--focus);
}

/* The three columns under the top. */
.hero-cover {
  border-top: 1px solid var(--hero-rule);
  padding-top: 18px;
}
.cover-title {
  font: 600 0.8125rem/1.3 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hero-muted);
  text-align: center;
  margin: 0 0 12px;
}
.cover-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.cover-list li {
  text-align: center;
}
.cover-list li + li {
  border-top: 1px solid var(--hero-rule);
  padding-top: 12px;
}
.cover-list h3 {
  font: 600 1.1875rem/1.25 var(--sans);
  margin: 0 0 4px;
}
.cover-list p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
}
.cover-mark {
  display: inline-block;
  margin-top: 8px !important;
  padding: 1px 10px;
  border: 1px solid var(--hero-ink);
  border-radius: 999px;
  font: 600 0.8125rem/1.5 var(--sans);
  letter-spacing: 0.04em;
}
@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: 'lead ring' 'cover cover';
    /* Start-anchored: centering slid the lead column when Explain-this opened (T4). */
    align-items: start;
    /* 16px between the rows, not 28px (see the gaps below). */
    gap: 16px 48px;
    /* 16px, not 40px, since the work ring's note gained the owner's derived line (2026-11-01): the three columns' headings
       stay on a 1440 x 790 first screen (tests/browser/run.mjs; the owner, 2026-10-25: "the above the fold should not change
       very much"). */
    padding-top: 16px;
    padding-bottom: 32px;
  }
  /* Gaps 28 px tighter in all, on a desktop only (the rows' gap above, 12 px less; 4 px less at each of the four below), since the
     engine's own words for the work ring are longer: its statement runs to two lines, and a late week adds the late line under the
     trend. With them the three columns' headings ended at 809, past a 1440 x 790 first screen; they end at 781 now, and 752 on
     a week that isn't late. No word, size or order changes. */
  .ring-trend,
  .ring-why {
    margin-top: 8px;
  }
  .top-band .explain {
    margin-top: 8px;
  }
  .hero-cover {
    padding-top: 14px;
  }
  .cover-title {
    margin-bottom: 8px;
  }
  .ring-face {
    width: min(100%, 17rem);
  }
  .ring-label {
    font-size: 0.8125rem;
    max-width: 12rem;
  }
  .ring-num {
    font-size: 4.5rem;
  }
  .ring-band {
    font-size: 1.375rem;
  }
  .cover-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .cover-list li {
    padding: 0 24px;
  }
  .cover-list li + li {
    border-top: 0;
    border-left: 1px solid var(--hero-rule);
    padding-top: 0;
  }
}

/* Home's dashboard: the week's key figures as tiles, in the owner's life areas (src/lib/dashboard.js). Each group grows with its
   number of tiles, so on a wide screen they share one row, each tile about as wide as the next; with less room (a phone, or
   text made larger), a group wraps to its own line, never past the screen's edge. */
.dash {
  padding-top: 28px;
  padding-bottom: 4px;
}
.dash-title {
  margin: 0 0 16px;
}
.dash-groups {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 22px;
}
.dash-group {
  flex: 1 1 0;
  min-width: min(100%, 10rem);
}
.dash-n2 {
  flex-grow: 2;
  min-width: min(100%, 20rem);
}
.dash-n3 {
  flex-grow: 3;
  min-width: min(100%, 30rem);
}
.dash-area {
  font: 600 0.8125rem/1.3 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.dash-answers {
  margin-bottom: 10px;
}
.dash-answers .a-word {
  margin: 0 0 2px;
}
.dash-answers .r-meta,
.dash-answers .r-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.dash-answers .r-answer + .r-answer {
  margin-top: 8px;
}
/* Two classes, so this outweighs .tiles, which comes later. */
.tiles.dash-tiles {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}
.dash-tiles .tile {
  padding: 0;
  background: var(--surface);
}
.t-link {
  display: grid;
  align-content: start;
  gap: 2px;
  height: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
.t-link:hover .t-name {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.dash-old {
  padding-top: 24px;
}
.home-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding-top: 16px;
  padding-bottom: 32px;
}
.home-after > * {
  margin: 0;
}
.rows-not-yet {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 0 14px;
  max-width: 40rem;
}
.home-more {
  margin: 0;
}

/* One question in a row: Home, Past weeks */
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.r + .r {
  border-top: 1px solid var(--rule);
}
.r > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 6px 10px;
  align-items: center;
  padding: 14px 2px;
  color: var(--ink);
  text-decoration: none;
}
.r > a:hover .r-q {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.r-q {
  grid-column: 1;
  font-weight: 600;
  line-height: 1.35;
}
.r-status {
  grid-column: 1;
}
.r .chev {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  color: var(--muted);
}
.r-status .a-word {
  margin: 0;
  font-size: 0.9375rem;
  padding: 2px 10px 2px 6px;
}
.r-status .a-word .mk {
  width: 20px;
  height: 20px;
}
.r-text {
  margin: 6px 0 0;
  line-height: 1.4;
}
/* Each answer in a row: its word, its words, and what it covers and when. */
.r-answer + .r-answer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.r-answer .r-meta {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}
/* A week in the older format says why it shows no figures, once. */
.old-note {
  margin: 8px 0 12px;
  color: var(--muted);
}
.rows-compact .r > a {
  padding: 10px 2px;
}

/* What a personal answer adds: a band in reverse, with one made-up review as a glimpse */
.home-personal {
  background: var(--invert-bg);
  color: var(--invert-ink);
}
.home-personal-inner {
  display: grid;
  gap: 24px;
  padding-top: 36px;
  padding-bottom: 36px;
}
.home-personal h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}
.home-personal p {
  max-width: 34rem;
}
@media (min-width: 900px) {
  .home-personal-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding-top: 48px;
    padding-bottom: 48px;
  }
}
.peek {
  display: grid;
  gap: 8px;
  justify-items: start;
  background: var(--surface);
  color: var(--ink);
  border: 2px dashed var(--example);
  border-radius: 16px;
  padding: 18px;
  text-decoration: none;
}
.peek:hover {
  border-style: solid;
}
.peek .a-word {
  margin: 0;
}
.peek-week {
  font-weight: 600;
  color: var(--muted);
}
.peek-title {
  font: 600 1.375rem/1.25 var(--serif);
}
.peek-line {
  color: var(--muted);
}
.stamp {
  display: inline-block;
  margin: 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--band);
  color: var(--band-ink);
  border: 1px solid var(--band-edge);
  font: 600 0.8125rem/1.5 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.home-find .find {
  max-width: 34rem;
}

/* ---- The national reading and a place: a headline, then the questions, each a section */
.nat-hero {
  padding-top: 20px;
  padding-bottom: 12px;
}
.nat-hero h1 {
  margin: 0 0 10px;
  font-size: min(clamp(1.875rem, 1.2rem + 2.8vw, 3rem), 10vw);
  text-wrap: balance;
}
/* A place's name is longer than the nation's ("Is the District of Columbia on steady ground?", "Is Washington, DC-VA-MD-WV on
   steady ground?"), so on a phone its headline is a little smaller, to keep the first figure whole on the first screen (the
   plan, section 8; round 3 of the review of 2026-10-22). From about 1,070 px wide it is the same size as the nation's. */
.place-hero h1 {
  font-size: min(clamp(1.75rem, 1rem + 3vw, 3rem), 10vw);
}
.rq {
  font: 600 clamp(1.125rem, 1rem + 0.6vw, 1.375rem)/1.35 var(--serif);
  color: var(--muted);
  max-width: 40rem;
  margin: 0 0 8px;
}
.nat-hero .deck {
  font-size: 1.0625rem;
}
.nat-hero .dated-note {
  max-width: 40rem;
}
.nat-hero .hero-dial,
.nat-hero .hero-gauges {
  margin-top: 16px;
}
.nat-body {
  padding-bottom: 24px;
}
.sections {
  min-width: 0;
}
.jump-wide {
  display: none;
}
.jump-phone {
  margin: 8px 0 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.jump-phone > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  min-height: 48px;
  padding: 0 16px;
  font-weight: 600;
  cursor: pointer;
}
.jump-phone .jump-list {
  margin: 0;
  padding: 0 16px 12px 36px;
}
.jump-list {
  display: grid;
  gap: 2px;
}
.jump-list a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  line-height: 1.3;
}
@media (min-width: 1000px) {
  .nat-body {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  .place-body {
    grid-template-columns: minmax(0, 1fr);
    max-width: 52rem;
  }
  .nat-rail {
    position: sticky;
    top: 20px;
  }
  .jump-phone {
    display: none;
  }
  .jump-wide {
    display: block;
    padding-top: 6px;
  }
  .jump-title {
    font: 600 0.8125rem/1.3 var(--sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px;
  }
  .jump-wide .jump-list {
    margin: 0;
    padding: 0 0 0 1.25em;
    font-size: 0.9375rem;
  }
  .jump-wide .jump-list a {
    min-height: 40px;
    padding: 4px 0;
  }
  .nat-hero {
    padding-top: 36px;
    padding-bottom: 20px;
  }
}

/* One question's section */
.q {
  --a: var(--edge);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--a);
  border-radius: 16px;
  padding: 18px 16px 16px;
  margin: 0 0 18px;
  scroll-margin-top: 16px;
}
.q-worse { --a: var(--a-worse); }
.q-better { --a: var(--a-better); }
.q-about_the_same { --a: var(--a-about_the_same); }
.q-not_assessed,
.q-none { --a: var(--a-not_assessed); }
.q-numbers,
.q-answers { --a: var(--a-numbers); }
.q-business { --a: var(--rule); }
.q-head {
  margin-bottom: 10px;
}
.q-ask {
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.35;
}
.q-head .a-word {
  margin-bottom: 10px;
}
/* The answer's word under its question, the section's title. */
.q-head .q-title + .a-word {
  margin-top: 12px;
}
.q-title {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
@media (min-width: 700px) {
  .q {
    padding: 26px 30px 22px;
  }
}

/* A worry's block inside a section */
.w + .w {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.w-title,
.a-title {
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0 0 10px;
}
.a-when {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.a-when p {
  margin: 0;
}
.a-period::first-letter {
  text-transform: uppercase;
}
.a-points {
  margin: 12px 0 0;
  padding-left: 1.2em;
  display: grid;
  gap: 6px;
  max-width: 44rem;
}
.a-points:has(> li:only-child) {
  list-style: none;
  padding-left: 0;
}
.a-prev {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}
.a-review,
.w-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 1rem;
  color: var(--muted);
}
.a-review .mk,
.w-note .mk {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  color: var(--v-late);
}
.scope {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}
.revised {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 0.9375rem;
  display: grid;
  gap: 6px;
}
.wider {
  margin-top: 14px;
}
.wider-name {
  font-weight: 600;
  margin: 0 0 8px;
}
.wider-name a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.learn {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.learn a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-weight: 600;
}
.q-business .w-title {
  font-family: var(--sans);
  font-size: 1.0625rem;
}

/* A figure's number tile */
.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
  gap: 10px;
}
.tile {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.t-name {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
}
.t-name::first-letter {
  text-transform: uppercase;
}
.t-num {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 2px 0;
  line-height: 1.15;
}
.t-arrow {
  width: 16px;
  height: 16px;
  flex: none;
  align-self: center;
  color: var(--muted);
}
/* The owner's rule (2026-10-29): the tile's number red or green by good or bad, its arrow by trending good or bad — the
   feed's own judgment (the figure's worse_when), never the site's. The way word keeps its ink (its rule below). No tone
   class (unchanged, or the feed names no bad way): ink. */
.t-num.a-better {
  color: var(--a-better);
}
.t-num.a-worse {
  color: var(--a-worse);
}
.t-num.a-better .t-arrow,
.t-num.a-worse .t-arrow {
  color: inherit;
}
.t-way {
  font-size: 1rem;
  color: var(--muted);
}
.t-size {
  font: 600 clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem)/1.1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.t-meta {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.4;
}
.t-status {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.t-status .mk {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--v-late);
}
.tile-late {
  border-style: dashed;
  border-color: var(--edge);
}
.tiles-compact {
  grid-template-columns: minmax(0, 1fr);
}
.tiles-compact .tile {
  padding: 8px 12px;
}
.tiles-compact .t-name {
  display: none;
}

/* A worry read by field */
.fields {
  margin-top: 4px;
}
.fields > summary,
.explain > summary,
.x-more > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--edge);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  width: fit-content;
  max-width: 100%;
  list-style: none;
}
.jump-phone > summary::-webkit-details-marker,
.fields > summary::-webkit-details-marker,
.explain > summary::-webkit-details-marker,
.x-more > summary::-webkit-details-marker {
  display: none;
}
.fields > summary::after,
.explain > summary::after,
.x-more > summary::after,
.jump-phone > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  margin-left: 4px;
  flex: none;
}
.fields[open] > summary::after,
.explain[open] > summary::after,
.x-more[open] > summary::after,
.jump-phone[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.fields > summary:hover,
.explain > summary:hover,
.x-more > summary:hover {
  border-color: var(--ink);
}
.field-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.field {
  display: grid;
  gap: 4px;
}
.field-name {
  font-weight: 600;
}

/* "Explain this", and "Sources and methods" inside it */
.explain {
  margin-top: 16px;
}
.explain > summary .ic-info {
  width: 20px;
  height: 20px;
  color: var(--blue);
}
.explain-body {
  margin-top: 12px;
  padding: 16px;
  background: var(--paper);
  border-radius: 12px;
  border: 1px solid var(--rule);
  max-width: 48rem;
}
.explain-body h4 {
  font: 600 1rem/1.3 var(--sans);
  margin: 16px 0 6px;
}
.explain-body > .x-part:first-child > h4 {
  margin-top: 0;
}
.x-part > p {
  margin: 0 0 8px;
}
.x-links {
  margin: 14px 0 0;
}
.x-list {
  margin: 0 0 8px;
  padding-left: 1.2em;
  display: grid;
  gap: 6px;
}
.x-meta {
  color: var(--muted);
  font-size: 0.875rem;
}
.x-list .t-status {
  margin-top: 2px;
}
.x-who {
  font-weight: 600;
  margin: 10px 0 4px;
}
.x-next {
  color: var(--muted);
}
.survey {
  font-size: 0.9375rem;
  color: var(--muted);
}
.x-more {
  margin-top: 14px;
}
.x-more > summary {
  min-height: 44px;
  font-size: 0.9375rem;
}
.x-more > :not(summary) {
  margin-top: 10px;
}
/* A figure's four parts in "Explain this" (src/lib/four.js): a bold label, then the words. */
.explain-body > .x-more.four:first-child {
  margin-top: 0;
}
.x-four > p {
  margin: 0 0 8px;
}
.x-credits,
.credits {
  font-size: 0.875rem;
  color: var(--muted);
  list-style: none;
  padding: 0;
}
.credits li + li {
  margin-top: 6px;
}
.credits-link {
  font-size: 0.9375rem;
}
.below {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}
@media (min-width: 900px) {
  .below {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* ---- How it works: the four answers */
.answer-key {
  list-style: none;
  margin: 8px 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
  justify-items: start;
}
.answer-key .a-word {
  margin: 0;
  font-weight: 400;
}
.prose .note .mk {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  color: var(--a-numbers);
}

/* ---- Personal */
.personal {
  padding-top: 24px;
  padding-bottom: 40px;
}
.personal h1 {
  margin: 0 0 6px;
}
.personal .deck {
  font-size: 1.125rem;
}
.real {
  margin-top: 24px;
}
.real h2,
.example h2 {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
}
.real-grid {
  display: grid;
  gap: 12px;
}
.real-col {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--a-numbers);
  border-radius: 12px;
  padding: 14px 16px;
}
.real-col h3 {
  font: 600 1.0625rem/1.3 var(--sans);
  margin: 0 0 6px;
}
.real-col ul {
  margin: 0;
  padding-left: 1.2em;
}
.real-col p {
  margin: 0;
}
.real-planned {
  border-top-color: var(--edge);
}
.real-madeup {
  border-top: 5px dashed var(--example);
}
@media (min-width: 760px) {
  .real-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.example {
  margin-top: 32px;
}
.example-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.reviews {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.review {
  background: var(--surface);
  border: 2px dashed var(--example);
  border-radius: 16px;
  padding: 16px;
}
.review-week {
  font: 600 1.0625rem/1.3 var(--sans);
  margin: 10px 0 8px;
}
.review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.review-head .a-word {
  margin: 0;
}
.review-title {
  font: 600 1.375rem/1.25 var(--serif);
  margin: 10px 0 12px;
}
.parts {
  margin: 0;
  display: grid;
  gap: 10px;
}
.part dt {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--muted);
}
.part dd {
  margin: 2px 0 0;
}
@media (min-width: 640px) {
  .review {
    padding: 20px 24px;
  }
  .parts {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 24px;
  }
}
.today {
  margin-top: 28px;
}
.today .find {
  border: 0;
  padding: 0;
}
.me-weekly {
  margin-top: 16px;
}
.me-weekly p {
  margin: 0;
}

/* ---- All places */
.places-index {
  padding-top: 24px;
  padding-bottom: 40px;
}

/* ---- The launch state: one line near the top while a page shows no answer */
.numbers-first {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 40rem;
  margin: 4px 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--a-numbers-tint);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
}
.numbers-first .mk {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  color: var(--a-numbers);
}
.home-q .numbers-first {
  margin: 12px 0 4px;
}
.sections > .numbers-first {
  margin: 0;
}

/* A question's figures in one row: each on its own line, the number first in weight */
.r-figs {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.r-fig {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--muted);
}
.r-name {
  font-weight: 600;
  color: var(--ink);
}
.r-name::first-letter {
  text-transform: uppercase;
}
.r-num {
  font-weight: 600;
  color: var(--ink);
}
.r-fig .t-status {
  margin-top: 2px;
}
.r-scope {
  margin: 6px 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.r-note,
.dash-note {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 4px 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}
.r-note .mk,
.dash-note .mk {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--v-late);
}
.r-not-yet .r-q {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.r-not-yet .mk {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--a-not_assessed);
}

/* The questions we can't answer yet, together */
.not-yet {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.not-yet li + li {
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.ny-q {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font: 600 1.0625rem/1.35 var(--sans);
  margin: 0 0 4px;
}
.ny-q .mk {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  color: var(--a-not_assessed);
}
.not-yet p {
  margin: 0;
  color: var(--muted);
  max-width: 44rem;
}

/* "You may have heard" (src/lib/heard.js). On the national reading it follows the last section. */
.heard {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--blue);
  padding: 0.9rem 1rem;
  margin: 1.5rem 0 1.25rem;
  max-width: 44rem;
}
.heard h2 {
  font-size: 1rem;
  margin: 0 0 0.25rem;
}
.heard p {
  margin: 0 0 0.5rem;
}
.heard-derived {
  font-size: 0.875rem;
  color: var(--muted);
}