/* Data-report theme.
   A warm, all-sans, OKLCH design system emulating a modern analytics report:
   a rounded "shell" card holding the whole page, a topbar with a brand mark,
   small uppercase kickers, tight-tracked sans headlines, soft-shadowed data
   cards, and a selected dark mode. No serif anywhere — display type earns its
   character from weight and negative tracking, not from a serif face.

   Legacy custom-property names (--paper, --ink, --data, --serif, …) are kept
   so js/app.js, internal.css, and the interactive components keep working;
   their VALUES are remapped to the new palette. --serif is deliberately
   pointed at the sans stack so every `font-family: var(--serif)` rule becomes
   sans without touching each selector. */

:root {
  --measure: 44rem; /* prose column; charts and the tool run wider */
  --body-size: 1.0625rem; /* 17px deck/prose size */
  --pad: clamp(1.25rem, 4.2vw, 3.25rem); /* shared shell inset */

  /* Surfaces (warm paper) */
  --paper: oklch(0.968 0.008 82); /* page plane behind the shell */
  --panel: oklch(0.995 0.004 82); /* card / shell surface */
  --surface-2: oklch(0.955 0.01 82); /* tertiary insets */

  /* Ink */
  --ink: oklch(0.22 0.018 55);
  --ink-soft: oklch(0.46 0.018 55);
  --muted: oklch(0.62 0.014 55);

  /* Lines */
  --hairline: color-mix(in oklch, var(--ink) 16%, transparent);
  --hairline-soft: color-mix(in oklch, var(--ink) 8%, transparent);
  --grid: oklch(0.91 0.01 82);

  /* Data + signal */
  --data: oklch(0.53 0.16 250); /* model data (blue) */
  --data-soft: oklch(0.8 0.09 250);
  --data-softer: oklch(0.95 0.028 250);
  --accent: oklch(0.62 0.18 48); /* the user's estimate (warm signal) */
  --accent-open: oklch(0.95 0.035 48);
  --data-warm: oklch(0.62 0.18 48); /* "more exposed than the state" pole */
  --purple: oklch(0.57 0.17 300);
  --gold: oklch(0.69 0.14 78);
  --positive: oklch(0.46 0.12 150);
  --bracket: oklch(0.58 0.03 78); /* literature central-estimate ticks */

  /* Depth */
  --shadow: 0 8px 24px color-mix(in oklch, var(--ink) 6%, transparent);
  --shadow-lg: 0 14px 44px color-mix(in oklch, var(--ink) 9%, transparent);
  --r-shell: 20px;
  --r-card: 16px;
  --r-sm: 10px;
  --r-xs: 7px;

  --serif: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: oklch(0.18 0.01 55);
    --panel: oklch(0.235 0.012 55);
    --surface-2: oklch(0.29 0.012 55);
    --ink: oklch(0.96 0.008 82);
    --ink-soft: oklch(0.8 0.01 82);
    --muted: oklch(0.68 0.01 82);
    --hairline: color-mix(in oklch, var(--ink) 20%, transparent);
    --hairline-soft: color-mix(in oklch, var(--ink) 9%, transparent);
    --grid: oklch(0.33 0.012 55);
    --data: oklch(0.72 0.14 250);
    --data-soft: oklch(0.5 0.1 250);
    --data-softer: oklch(0.31 0.04 250);
    --accent: oklch(0.75 0.15 48);
    --accent-open: oklch(0.3 0.055 48);
    --data-warm: oklch(0.75 0.15 48);
    --purple: oklch(0.73 0.14 300);
    --gold: oklch(0.78 0.13 78);
    --positive: oklch(0.73 0.12 150);
    --bracket: oklch(0.7 0.03 78);
    --shadow: 0 8px 24px color-mix(in oklch, black 40%, transparent);
    --shadow-lg: 0 16px 48px color-mix(in oklch, black 50%, transparent);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--data);
  text-decoration-color: color-mix(in oklch, var(--data) 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--data);
  text-decoration-color: var(--data);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--surface-2);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--panel);
  padding: 0.5rem 1rem;
  z-index: 10;
}

.skip-link:focus {
  left: 0;
}

/* --- Shell + topbar ------------------------------------------------------
   The whole page lives inside one rounded, bordered, soft-shadowed card. */

.shell {
  width: min(840px, calc(100% - 32px));
  margin: 18px auto 56px;
  overflow: clip;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-shell);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}

/* --- Tooltip primitive ---------------------------------------------------
   Dotted-underlined term; definition appears on hover/focus. */

[data-tip] {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--muted);
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(280px, 72vw);
  background: var(--ink);
  color: var(--panel);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-xs);
  box-shadow: var(--shadow);
  z-index: 6;
  pointer-events: none;
}

/* --- Kicker (small uppercase section label) ------------------------------ */

.kicker {
  display: block;
  margin-bottom: 12px;
  color: var(--data);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Inside a section's left header column the kicker sits tight over the
   number + title. */
.panel-head .kicker {
  margin-bottom: 0;
}

/* --- Masthead ----------------------------------------------------------
   Title block runs full width with a hairline rule under the wordmark,
   echoing the reference's h1 treatment. */

.masthead {
  /* Top padding's floor (3.75rem) keeps the kicker/logo row clear of the
     fixed reviewer-login badge at every viewport width. */
  padding: clamp(3.75rem, 5.5vw, 4.25rem) var(--pad) 1.75rem;
}

.masthead-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 5.0rem;
}

.partner-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.partner-logos img {
  display: block;
  height: 53px;
  width: auto;
  padding: 0.6rem 1.1rem;
  background: oklch(0.98 0.004 82);
  border-radius: var(--r-sm);
}

.masthead h1 {
  margin: 0 0 0.6rem;
  font-weight: 620;
  font-size: clamp(2rem, 4.6vw, 2.625rem);
  line-height: 1.12;
  letter-spacing: -0.042em;
  max-width: 20ch;
  color: var(--ink);
}

.subtitle {
  margin: 0.3rem 0 2.6rem;
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink-soft);
}

.version-note {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.version-note a {
  color: inherit;
}

.byline {
  margin: 0.35rem 0 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.review-fab {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.95rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease,
    opacity 0.2s ease, visibility 0.2s ease;
}

.review-fab:hover,
.review-fab:focus-visible {
  background: var(--data);
  border-color: var(--data);
  transform: translateY(-1px);
}

.review-fab.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.feedback-fab {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.feedback-fab:hover,
.feedback-fab:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.feedback-panel {
  position: fixed;
  bottom: 4.75rem;
  right: 1.25rem;
  z-index: 55;
  width: min(22rem, calc(100vw - 2.5rem));
  padding: 1.25rem 1.35rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
}

.feedback-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.feedback-panel-head h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.feedback-close {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: var(--r-xs);
  cursor: pointer;
}

.feedback-close:hover,
.feedback-close:focus-visible {
  color: var(--ink);
  background: var(--surface-2);
}

.feedback-note {
  margin: 0.35rem 0 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.feedback-form .form-row {
  max-width: none;
}

.feedback-form textarea {
  min-height: 5.5rem;
}

.feedback-status {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

@media (max-width: 30rem) {
  .feedback-fab {
    bottom: 1rem;
    right: 1rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.78rem;
  }

  .feedback-panel {
    bottom: 4.25rem;
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }
}

.standfirst {
  margin: 0 0 1.75rem;
  max-width: var(--measure);
  font-size: var(--body-size);
  line-height: 1.55;
  color: var(--ink-soft);
}

.standfirst em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}

/* Intro narrative */
.lede {
  max-width: var(--measure);
}

.lede p {
  margin: 0 0 1.05rem;
  font-size: var(--body-size);
  line-height: 1.58;
  color: var(--ink-soft);
}

.lede strong {
  font-weight: 600;
  color: var(--ink);
}

.lede-cta {
  margin: 1.6rem 0 0.4rem;
}

.lede-cta a {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--data);
  text-decoration-color: currentColor;
}

/* Floating contents rail — lives entirely in the left margin beside the
   840px shell, so it never overlaps the card. The narrow shell leaves a wide
   margin, enough to show the fully labeled rail on ordinary laptop screens
   (≥1280px). Below 1280px there's no usable margin, so no rail. */
.side-toc {
  position: fixed;
  top: 7rem;
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, left 0.15s ease, width 0.15s ease;
}

.side-toc.is-shown {
  opacity: 1;
  pointer-events: auto;
}

.side-toc a {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.32rem 0;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.side-toc .toc-no {
  min-width: 1rem;
  color: var(--data);
  font-variant-numeric: tabular-nums;
}

.side-toc a:hover,
.side-toc a.is-active {
  color: var(--ink);
}

/* Labeled rail, shown from 1280px up. Positioned a fixed gap to the left of
   the 980px shell via the same centering calc the shell uses, so it tracks
   the gutter at every width. */
@media (min-width: 1280px) {
  .side-toc {
    display: block;
    left: calc((100vw - 840px) / 2 - 8rem - 1rem);
    width: 8rem;
  }

  .side-toc a {
    justify-content: flex-start;
  }
}

/* Short narrative bridge at the top of a section's content column. */
.section-intro {
  max-width: var(--measure);
  margin: 0 0 1.6rem;
  font-size: var(--body-size);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* In-page contents block */
.toc {
  max-width: 34rem;
  margin: 0 0 0.5rem;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-card);
  overflow: clip;
}

.toc a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}

.toc a:last-child {
  border-bottom: 0;
}

.toc-no {
  min-width: 1.2rem;
  color: var(--data);
  font-variant-numeric: tabular-nums;
}

.toc a:hover {
  color: var(--ink);
  background: var(--surface-2);
}

/* --- Layout / panels -----------------------------------------------------
   Each section is a two-column grid: a narrow left column holds the section
   header (kicker + title), the wide right column holds the content. This is
   the reference report's side-label layout, generalized to every section.
   The header is sticky so it stays in view alongside long content. */

main {
  padding: 0.5rem var(--pad) 3.5rem;
}

/* Single column: the section title stacks above its content, full width.
   (Was a two-column grid with the title in a sticky left rail; that left
   too little margin for the floating contents rail, so the shell was
   narrowed and the title moved inline above each section.) */
.panel {
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
  border-bottom: 1px solid var(--hairline-soft);
}

/* The first section sits right under the masthead, so it takes a smaller
   top gap than the section-to-section rhythm. */
#intro {
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.panel > * {
  min-width: 0;
}

/* The section title sits above its content with a little air below it. */
.panel > .panel-head {
  margin-bottom: 1.1rem;
}

.panel-head h2,
.panel-head .purpose-h {
  margin: 0;
  font-weight: 620;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--ink);
}

/* Section number sits inline with the title, same size and weight — only
   the color sets it apart. */
.sec-no {
  color: var(--data);
  margin-right: 0.4rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

/* Body-level heading for sections that keep a full-width title (used by the
   methodology's "Step 1/2" headings, and any other stray .panel h2). */
.panel > h2 {
  margin: 0 0 1.4rem;
  font-weight: 620;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.panel h3 {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Subsection headings inside prose sections read as text, not chart chrome. */
.panel.prose h3 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.3rem;
  font-weight: 640;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
}

/* Editorial track-changes markup (review drafts only): additions, cuts,
   and COMMENT/GAP callouts written as blockquotes in the source markdown. */
.panel.prose ins {
  color: var(--data);
  text-decoration-color: var(--data-soft);
  text-underline-offset: 0.12em;
}

.panel.prose del {
  color: var(--muted);
  text-decoration-color: var(--muted);
}

.panel.prose code {
  background: var(--surface-2);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.88em;
}

.panel.prose blockquote {
  margin: 0.9rem 0 1.4rem;
  padding: 0.7rem 1.1rem;
  background: var(--surface-2);
  border-left: 3px solid var(--data-soft);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.panel.prose blockquote p {
  margin: 0;
}

.panel.prose blockquote strong {
  color: var(--ink);
}

.label-sc,
.control-region > label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.control-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.5rem 0 0;
  max-width: var(--measure);
  line-height: 1.5;
}

.placeholder {
  margin: 3rem 0;
  padding: 1.5rem;
  background: var(--surface-2);
  border: 1px dashed var(--bracket);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
}

/* --- 01 Controls ---------------------------------------------------------- */

.control-region {
  max-width: 22rem;
  margin-bottom: 1.75rem;
}

#region {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0.6rem 0.7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background: var(--panel);
}

#region:focus-visible {
  outline: 2px solid var(--data);
  outline-offset: 1px;
}

/* Mode toggle: "use a pre-built scenario" vs. "build your own" */

.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 1.75rem;
  background: var(--surface-2);
}

.mode-btn {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0.45rem 1.1rem;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.mode-btn:hover {
  color: var(--ink);
}

.mode-btn[aria-pressed="true"] {
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.mode-btn:focus-visible {
  outline: 2px solid var(--data);
  outline-offset: 2px;
}

/* Pre-built scenario cards */

.scenario-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.scenario-cards[hidden] {
  display: none;
}

.scenario-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  text-align: left;
  font-family: var(--sans);
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.scenario-card:hover {
  border-color: var(--data-soft);
  transform: translateY(-1px);
}

.scenario-card[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}

.scenario-card:focus-visible {
  outline: 2px solid var(--data);
  outline-offset: 2px;
}

.scenario-name {
  font-size: 1.05rem;
  font-weight: 640;
  letter-spacing: -0.01em;
  text-transform: capitalize;
  color: var(--ink);
}

.scenario-blurb {
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.scenario-number {
  font-size: 1.5rem;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 0.15rem;
}

.scenario-number em {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-left: 0.3rem;
}

.scenario-params {
  font-size: 0.74rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Plausibility readout (build-your-own mode) */

.plausibility {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.8rem 1.15rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-soft);
  background: var(--surface-2);
}

.plausibility-label {
  flex: none;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--data-softer);
  color: var(--data);
}

.plausibility[data-level="unusual"] .plausibility-label,
.plausibility[data-level="somewhat-unusual"] .plausibility-label {
  background: color-mix(in oklch, var(--gold) 22%, transparent);
  color: color-mix(in oklch, var(--gold) 75%, var(--ink));
}

.plausibility[data-level="rare"] .plausibility-label,
.plausibility[data-level="very-rare"] .plausibility-label {
  background: var(--accent-open);
  color: var(--accent);
}

.plausibility-note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* Sliders — same 3-up grid shape as .scenario-cards */

#sliders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.slider-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.slider-head label {
  font-weight: 640;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.slider-head output {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--data);
  min-width: 3.4ch;
  text-align: right;
}

.slider-help {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.4;
  min-height: 2.8em;
}

.slider-track-wrap {
  position: relative;
  padding-top: 0.3rem;
  padding-bottom: 0.6rem;
}

/* Custom compact track/thumb */
.slider-card input[type="range"] {
  width: 100%;
  margin: 0;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.slider-card input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
}

.slider-card input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
}

.slider-card input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--data);
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--data);
}

.slider-card input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--data);
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--data);
}

.slider-card input[type="range"]:focus-visible {
  outline: 2px solid var(--data);
  outline-offset: 4px;
}

/* Literature central-estimate tick, drawn over the track */
.bracket-mode {
  position: absolute;
  bottom: 0.3rem;
  width: 2px;
  height: 8px;
  background: var(--bracket);
  pointer-events: none;
}

.slider-range {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- 02 Estimate ----------------------------------------------------------- */

.headline {
  text-align: center;
  padding: 1.5rem 1rem 2rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-card);
  background: var(--surface-2);
}

.headline-number {
  font-size: clamp(3.4rem, 10vw, 5.6rem);
  font-weight: 660;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.headline-sub {
  margin: 0.85rem auto 0;
  max-width: 46ch;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.headline-caveat {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.band {
  margin-top: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.6rem 1.2rem;
}

.band-plot {
  position: relative;
}

#band-chart {
  width: 100%;
  height: auto;
  display: block;
}

#band-chart .axis {
  stroke: var(--hairline);
  stroke-width: 1;
}

#band-chart .density {
  fill: var(--data-softer);
  stroke: var(--data);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

#band-chart .median {
  stroke: var(--ink);
  stroke-width: 1.5;
}

#band-chart .bracket-line {
  stroke: var(--bracket);
  stroke-width: 1.25;
}

#band-chart .current {
  fill: var(--accent);
}

#band-chart .current-line {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

#band-chart .crosshair {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

#band-chart .crosshair[hidden] {
  display: none;
}

#band-chart .tick {
  fill: var(--ink-soft);
  font-family: var(--sans);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

#band-chart .bracket-label {
  fill: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
}

#band-chart .marker-label {
  fill: var(--accent);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--panel);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.band-tip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--panel);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  padding: 0.35rem 0.6rem;
  border-radius: var(--r-xs);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow);
  z-index: 5;
}

.band-note,
.variance-note {
  font-size: 0.82rem;
  color: var(--muted);
  max-width: var(--measure);
  line-height: 1.5;
}

.variance-note {
  margin-bottom: 0;
}

/* --- 03 Breakdown ----------------------------------------------------------- */

.group-block {
  margin-bottom: 0.1rem;
}

.group-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.45em;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.7em;
  font-weight: 700;
  color: var(--ink-soft);
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.group-chevron::before {
  content: "▸";
}

.group-bar:hover .group-chevron,
.group-bar:focus-visible .group-chevron {
  background: var(--accent-open);
  color: var(--accent);
}

.group-bar.is-selected .group-chevron {
  background: var(--accent);
  color: var(--panel);
  transform: rotate(90deg);
}

.group-bar {
  display: grid;
  /* Label and plot split the row roughly in half so long occupation-group
     names show in full and the track carries less empty gray. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 5.6rem;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  /* Group rows are buttons: clicking one highlights its occupations in
     the drivers table. Reset button chrome, keep the grid. */
  width: 100%;
  padding: 0.2rem 0.35rem;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.group-bar:hover,
.group-bar:focus-visible {
  background: var(--surface-2);
  outline: none;
}

.group-bar.is-selected {
  background: var(--accent-open);
}

.group-bar.is-selected .group-label {
  color: var(--accent);
  font-weight: 600;
}

.group-bar.is-selected .group-fill {
  background: var(--accent);
}

.group-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-soft);
}

.group-track {
  background: var(--surface-2);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.group-fill {
  display: block;
  height: 100%;
  background: var(--data);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.group-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}

.group-value em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.9em;
}

.group-occupations {
  margin: 0.1rem 0 0.9rem 0.4rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--hairline);
}

.occ-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 0.82rem;
}

.occ-row:last-child {
  border-bottom: 0;
}

.occ-name {
  color: var(--ink);
}

.occ-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}

.occ-value em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.9em;
}

.region-compare {
  margin-top: 2.5rem;
}

.compare-row {
  display: grid;
  grid-template-columns: 10rem 1fr 8.5rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 0.88rem;
}

.compare-row.is-current .compare-name {
  color: var(--accent);
}

.compare-name {
  font-weight: 600;
  color: var(--ink);
}

.compare-track {
  background: var(--surface-2);
  border-radius: 999px;
  height: 11px;
  overflow: hidden;
}

.compare-fill {
  display: block;
  height: 100%;
  background: var(--data);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.compare-row.is-current .compare-fill {
  background: var(--accent);
}

/* Regional bars split around the statewide rate: warm above it, blue below. */
.compare-row.is-more .compare-fill {
  background: var(--data-warm);
}

.compare-group-heading {
  margin: 1.1rem 0 0.2rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.compare-group-heading:first-child {
  margin-top: 0.4rem;
}

.region-map-wrap {
  margin-top: 2.5rem;
}

/* The occupation/region breakdown now lives in the same panel as the
   forecast above it (rather than its own section), so it needs its own
   top margin to read as a new cluster instead of running into the band
   chart. */
#breakdown-intro {
  margin-top: 2.5rem;
}

.map-filter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  font-family: var(--sans);
  font-size: 0.82rem;
}

.map-filter label {
  color: var(--muted);
  font-weight: 600;
}

.map-filter select {
  font-family: var(--sans);
  font-size: 0.82rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--ink);
  max-width: 100%;
}

.region-map-frame {
  position: relative;
  max-width: 30rem;
  padding: 0.5rem;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-card);
  background: var(--surface-2);
}

#region-map {
  width: 100%;
  height: auto;
  display: block;
}

.region-shape {
  stroke: var(--panel);
  stroke-width: 1.5;
  cursor: pointer;
  transition:
    fill 0.25s ease,
    stroke 0.15s ease;
}

.region-shape:hover {
  stroke: var(--ink);
}

.region-shape.is-current {
  stroke: var(--accent);
  stroke-width: 2.5;
}

.region-map-legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 30rem;
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.legend-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  /* Diverging fallback; app.js sets the live gradient from the same OKLCH
     poles it paints the map with. */
  background: linear-gradient(
    to right,
    var(--data),
    var(--surface-2),
    var(--data-warm)
  );
}

.region-map-legend-center {
  max-width: 30rem;
  margin: 0.25rem 0 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.compare-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}

.compare-value em {
  font-style: normal;
  color: var(--muted);
}

.county-map-frame {
  max-width: 22rem;
  margin: 1.4rem 0 1.6rem;
  padding: 0.6rem;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-card);
  background: var(--surface-2);
}

.county-map-frame svg {
  width: 100%;
  height: auto;
  display: block;
}

.county-outline {
  fill: var(--panel);
  stroke: var(--hairline);
  stroke-width: 1;
}

.county-shape {
  stroke: var(--panel);
  stroke-width: 1.5;
}

.county-shape.county-monroe {
  fill: var(--data-warm);
}

.county-shape.county-yates {
  fill: var(--data);
}

.county-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: 0.6rem 0.15rem 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.county-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.county-swatch.county-monroe {
  background: var(--data-warm);
}

.county-swatch.county-yates {
  background: var(--data);
}

/* A visible work-in-progress marker on a section shipped as a shell. */
.prose p.draft-flag {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border: 1px dashed var(--accent);
  border-radius: 999px;
  background: var(--accent-open);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- Prose sections ------------------------------------------------------- */

.prose p,
.prose li,
.prose dd {
  max-width: var(--measure);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink-soft);
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose .control-note {
  font-family: var(--sans);
  font-size: 0.82rem;
}

.formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92rem;
  color: var(--ink);
  padding: 1rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--hairline-soft);
  border-left: 3px solid var(--data);
  border-radius: var(--r-sm);
}

.limits-list {
  list-style: none;
  padding: 0;
}

.limits-list li {
  padding: 0.9rem 0;
  border-top: 1px solid var(--hairline-soft);
}

.limits-list li:first-child {
  border-top: none;
}

/* Inline citation markers in the methodology: [n] links that jump to the
   matching entry in the References list. */
a.cite {
  font-family: var(--sans);
  font-size: 0.82em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--data);
  text-decoration: none;
  white-space: nowrap;
}

a.cite:hover,
a.cite:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--data);
}

/* Numbered, annotated references list (Section 7). Each entry is an anchor
   target for the [n] citations above; :target gives arriving readers a
   visible landing highlight. */
.ref-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.ref-item {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  column-gap: 0.85rem;
  margin: 0 -0.6rem;
  padding: 1.05rem 0.6rem;
  border-top: 1px solid var(--hairline-soft);
  border-radius: var(--r-xs);
  scroll-margin-top: 2.5rem;
}

.ref-item:first-child {
  border-top: none;
}

.ref-item:target {
  background: var(--accent-open);
}

.ref-no {
  padding-top: 0.1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--data);
}

.ref-head {
  margin: 0;
}

.ref-title {
  font-weight: 600;
  color: var(--ink);
}

a.ref-title {
  color: var(--data);
}

.ref-src {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
}

.prose .ref-note {
  margin: 0.45rem 0 0;
  font-size: 0.95rem;
  line-height: 1.58;
}

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

footer {
  padding: 2rem var(--pad) 2.75rem;
  color: var(--muted);
  font-size: 0.82rem;
  border-top: 1px solid var(--hairline-soft);
}

footer p {
  margin: 0.25rem 0;
}

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

/* --- Responsive ------------------------------------------------------------ */

/* Sections are single-column at every width; on small screens let the
   title scale with the viewport. */
@media (max-width: 880px) {
  .panel-head h2,
  .panel-head .purpose-h {
    font-size: clamp(1.5rem, 5vw, 1.9rem);
  }
}

@media (max-width: 800px) {
  .shell {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 700px) {
  .scenario-cards,
  #sliders {
    grid-template-columns: 1fr;
  }

  .slider-help {
    min-height: 0;
  }
}

@media (max-width: 600px) {
  .panel {
    padding: 2rem 0 2.25rem;
  }

  .band {
    padding: 1.15rem 1rem 0.95rem;
  }

  /* Bar rows: label + value above, full-width bar below. */
  .group-bar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label value"
      "track track";
    row-gap: 0.25rem;
    margin-bottom: 0.75rem;
  }

  .group-label {
    grid-area: label;
  }

  .group-value {
    grid-area: value;
  }

  .group-track {
    grid-area: track;
  }

  .compare-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name value"
      "track track";
    row-gap: 0.25rem;
  }

  .compare-name {
    grid-area: name;
  }

  .compare-value {
    grid-area: value;
  }

  .compare-track {
    grid-area: track;
  }

  .mode-toggle {
    display: flex;
  }

  .mode-btn {
    flex: 1;
    padding: 0.5rem 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}