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

   Color has one meaning: an answer's word (the outcome-first plan's Worse, Better, About the same, Not assessed), or that a
   question has numbers but no answer yet. Each also has its own mark and always its words, so color is never the only cue.
   Numbers are never colored by direction: a rise isn't "bad". 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: #b3401a;
  --a-worse-tint: #fdf0ea;
  --a-better: #0f5e73;
  --a-better-tint: #ecf6f8;
  --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;
  /* The ring: its track, and the arc the reading fills (one ink, never a color by band or direction) */
  --ring-track: #5d6a7e;
  --ring-fill: #f4f1ea;
  --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: #f2926a;
    --a-worse-tint: #2a1a14;
    --a-better: #6fc3d6;
    --a-better-tint: #12262b;
    --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;
}
.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. Numbers stay ink: their direction is said in words, never in color.
   ====================================================================================================================== */

.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;
}
.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;
}
.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';
    align-items: center;
    gap: 28px 48px;
    padding-top: 40px;
    padding-bottom: 32px;
  }
  .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);
}
.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 to me more", 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;
}
.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;
}