:root {
  --ink: #111;
  --muted: #595959;
  --rule: #e6e6e6;
  --bg: #fff;
  --soft: #f7f7f8;
  --soft2: #f0f0f2;
  --brand: #0e7c86;
  --brand-hot: #0a5f67;
  --luzon: #2b6cb0;
  --visayas: #38a169;
  --mindanao: #d97706;
  --ncr: #6b46c1;
  --barmm: #c53030;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

/* Tint the page chrome a hair off-white so the white content column reads as a
   sheet on wide screens instead of bleeding into the viewport. */
html { background: #fafafa; }

body {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--rule);
}

/* Micro-motion on interactive chrome: 150ms eases and a press nudge, so state
   changes read as deliberate rather than a hard cut. */
.story-btn,
.chart-type-btn,
#controls button[type="button"],
.year-stepper button,
.axis-pick-btn,
.topbar-right a {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.story-btn:active,
.chart-type-btn:active,
#controls button[type="button"]:active,
.year-stepper button:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .story-btn,
  .chart-type-btn,
  #controls button[type="button"],
  .year-stepper button,
  .axis-pick-btn,
  .topbar-right a { transition: none; }
}

/* --- Slim top bar -------------------------------------------------------- */

#topbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.55rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  background: #fff;
  flex-wrap: wrap;
}

.brand {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.brand-tld { color: var(--brand-hot); }

#story-switcher {
  display: flex;
  gap: 0.2rem;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.story-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
}

.story-btn:hover { color: var(--ink); background: var(--soft); }

.story-btn.active {
  color: var(--ink);
  background: var(--soft2);
}

.story-btn.custom-tag {
  background: #fff !important;
  color: var(--muted) !important;
  border: 1px dashed var(--muted) !important;
  cursor: default !important;
}

.topbar-right {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 0.85rem;
}

.topbar-right a {
  color: var(--muted);
  text-decoration: none;
}

.topbar-right a:hover { color: var(--ink); text-decoration: underline; }

.topbar-link {
  color: var(--muted);
  font-size: 0.85rem;
}

/* --- Compact title strip directly above the chart ----------------------- */

#title-strip {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.8rem 1.25rem 0.4rem;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

.title-text { flex: 1 1 auto; min-width: 0; }

#story-headline {
  font-family: Georgia, "Iowan Old Style", Palatino, "Times New Roman", serif;
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

#title-strip .tagline {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0.2rem 0 0;
}

/* --- Chart-type strip (lives in the title strip on the right) ----------- */

#chart-type-strip {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.chart-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
}

.chart-type-btn:hover { border-color: var(--ink); color: var(--ink); }

.chart-type-btn.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.ct-icon { font-size: 0.95rem; line-height: 1; }

/* --- Main: chart + sidebar grid ---------------------------------------- */

main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

@media (min-width: 880px) {
  main {
    grid-template-columns: minmax(0, 1fr) 230px;
  }
}

/* Mobile-only home for the finding + caveat (moved here by JS below the chart).
   Empty on desktop, so it collapses out of the grid. */
#mobile-detail-slot:empty { display: none; }

@media (max-width: 879px) {
  #mobile-detail-slot { padding: 0 1rem 0.2rem; }
  #mobile-detail-slot .story-finding { margin-top: 0.7rem; }
  #mobile-detail-slot .story-caveat { margin-top: 0.5rem; }
}

#chart-wrap {
  position: relative;
  padding: 0;
  margin: 0.75rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
}

/* First-read scaffold: one low-weight line above the chart, bubble mode only,
   dismissible. Tells a novice what a bubble is before the motion starts. */
#chart-howto {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.3rem 0.6rem 0.3rem 0.85rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
  background: var(--soft);
  border-bottom: 1px solid var(--rule);
  border-radius: 9px 9px 0 0;
}

#chart-howto[hidden] { display: none; }

#chart-howto-text { flex: 1 1 auto; }

#chart-howto-dismiss {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

#chart-howto-dismiss:hover { color: var(--ink); background: var(--soft2); }
#chart-howto-dismiss:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

#chart {
  width: 100%;
  height: 720px;
  position: relative;
}

#loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.9rem;
  background: var(--soft);
  border-radius: 10px;
}

/* Spinner on the initial load only (role=status); the error state is role=alert. */
#loading[role="status"]::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border: 2px solid var(--rule);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #loading[role="status"]::before { animation: none; }
}

/* The "why" paragraph sits below the tagline in the title-strip. Small,
   optional, fades into the visual hierarchy. Hidden by JS on custom views. */
#title-strip .story-why {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 0.25rem 0 0;
  max-width: 68ch;
  line-height: 1.45;
}

#title-strip .story-why:empty { display: none; }
#title-strip .story-why[hidden] { display: none; }

/* Hide the "why" paragraph on narrow screens to keep the title strip compact */
@media (max-width: 879px) {
  #title-strip .story-why { display: none; }
}

/* The computed finding: the data-grounded answer to the story's question. Kept
   visible at every width (it is the defensible core, not decoration). */
.story-finding {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0.5rem 0 0;
  max-width: 68ch;
  padding: 0.45rem 0.7rem;
  background: var(--soft);
  border-left: 3px solid var(--luzon);
  border-radius: 6px;
}
.story-finding[hidden] { display: none; }

/* Axis caveats: awards-not-disbursement, single-snapshot, short-panel. Amber so
   they read as honest limitations, not errors. */
.story-caveat {
  margin: 0.4rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 68ch;
}
.story-caveat[hidden] { display: none; }
.caveat-line {
  font-size: 0.74rem;
  line-height: 1.45;
  color: #7a4a25;
  padding: 0.3rem 0.55rem;
  background: #fdf6ef;
  border-left: 3px solid var(--mindanao);
  border-radius: 6px;
}
.caveat-line strong { color: #6a3d1c; }

/* --- Sidebar (controls) ------------------------------------------------- */

#controls {
  font-size: 0.88rem;
  padding: 0.9rem 1.25rem 1rem;
  border-left: 1px solid var(--rule);
}

@media (max-width: 879px) {
  #controls { border-left: 0; border-top: 1px solid var(--rule); }
}

.block { margin-bottom: 1rem; }
.block:last-child { margin-bottom: 0; }

#controls h2 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.35rem;
  font-weight: 700;
}

#controls .hint {
  margin: 0.35rem 0 0.45rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#chart:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

button:focus-visible,
[role="tab"]:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

#search,
#compare-select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--soft);
}

#search-results {
  list-style: none;
  padding: 0;
  margin: 0.3rem 0 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  max-height: 180px;
  overflow-y: auto;
}

#search-results:empty { display: none; }

#search-results li {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
  font-size: 0.85rem;
}

#search-results li:last-child { border-bottom: none; }
#search-results li:hover { background: var(--soft); }

#selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

#selected-chips:empty + .hint { display: block; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: 99px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
}

.chip button {
  background: rgba(255, 255, 255, 0.25);
  border: none;
  color: #fff;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  line-height: 14px;
  padding: 0;
}

.chip button:hover { background: rgba(255, 255, 255, 0.5); }

.legend-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legend-list li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  padding: 0.18rem 0;
}

.legend-list .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.legend-list .dot[data-group="luzon"] { background: var(--luzon); }
.legend-list .dot[data-group="visayas"] { background: var(--visayas); }
.legend-list .dot[data-group="mindanao"] { background: var(--mindanao); }
.legend-list .dot[data-group="ncr"] { background: var(--ncr); }
.legend-list .dot[data-group="barmm"] { background: var(--barmm); }

/* --- Bubble-size legend (sidebar, bubble mode only) -------------------- */

#size-legend[hidden] { display: none; }

/* Circles sit on a shared baseline so size reads as growth, not float.
   Sized in JS from the exact sizeFor() the chart uses, so the key can never
   diverge from the encoding. Colour is neutral steel: size, not island. */
.size-legend-row {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  min-height: 40px;
  padding: 0.1rem 0 0.15rem;
}

.size-legend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.size-legend-circle {
  border-radius: 50%;
  background: rgba(120, 134, 150, 0.55);
  border: 1px solid #6b7785;
}

.size-legend-label {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1;
}

.size-legend-cap { margin: 0.4rem 0 0; }

.year-stepper {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0 0.5rem;
}

.year-range {
  flex: 2 1 auto;
  min-width: 60px;
  accent-color: var(--luzon);
  cursor: pointer;
}

.year-stepper button {
  flex: 1;
  padding: 0.45rem 0.5rem;
  font: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.year-stepper button:hover { border-color: var(--ink); }

#controls button[type="button"]:not(.year-stepper button) {
  width: 100%;
  margin: 0.2rem 0;
  padding: 0.5rem 0.65rem;
  font: inherit;
  font-size: 0.82rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  text-align: left;
}

#controls button[type="button"]:not(.year-stepper button):hover {
  border-color: var(--ink);
}

#controls #extrap-toggle.on {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* Download buttons in a row */
#controls .block:has(#csv) {
  display: flex;
  flex-direction: column;
}

#controls .block:has(#csv) > h2 {
  width: 100%;
}

#controls #csv,
#controls #png,
#controls #share {
  display: inline-block;
  width: auto !important;
  flex: 1;
}

/* Pack the three download buttons in one row */
#controls .block:has(#csv) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

#controls .block:has(#csv) > h2 { flex: 1 0 100%; }
#controls .block:has(#csv) > button { flex: 1 1 auto; min-width: 0; text-align: center; }
#controls .block:has(#csv) > .hint { flex: 1 0 100%; }

/* --- Axis pickers overlay (Gapminder pattern) -------------------------- */

#axis-info-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.axis-picker {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.axis-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: -0.005em;
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.axis-pick-btn:hover {
  border-color: var(--ink);
  background: #fff;
}

.axis-pick-name {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.axis-pick-caret {
  color: var(--muted);
  font-size: 0.72rem;
}

.axis-pick-btn:hover .axis-pick-caret { color: var(--ink); }

.axis-info-btn {
  pointer-events: auto;
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.95);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  cursor: pointer;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Keep the visible badge at 22px but stretch the touch target to the WCAG 44px
   minimum with a transparent, centered overlay (clicks on it count as the button). */
.axis-info-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.axis-info-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: #fff;
}

/* Indicator picker panel ------------------------------------------------ */

.indicator-panel {
  width: 320px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
}

.ipanel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.ipanel-head strong { color: var(--ink); font-weight: 700; }

.ipanel-close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  font-size: 18px;
  color: var(--muted);
  cursor: pointer;
  line-height: 22px;
  border-radius: 4px;
  padding: 0;
}

.ipanel-close:hover { background: var(--soft); color: var(--ink); }

.ipanel-search {
  margin: 0.55rem 0.85rem 0.3rem;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--soft);
}

.ipanel-search:focus { outline: 2px solid var(--ink); outline-offset: 1px; background: #fff; }

.ipanel-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  overflow-y: auto;
  flex: 1;
  min-height: 100px;
  max-height: 380px;
}

.ipanel-item {
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid #f4f4f4;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.ipanel-item:last-child { border-bottom: none; }
.ipanel-item:hover { background: var(--soft); }
.ipanel-item.active { background: var(--brand); color: #fff; }
.ipanel-item.active .ipanel-meta { color: rgba(255, 255, 255, 0.75); }
.ipanel-item.disabled { color: #b4b4b4; cursor: not-allowed; background: #fafafa; }
.ipanel-item.disabled:hover { background: #fafafa; }

.ipanel-name { font-size: 0.9rem; font-weight: 600; }
.ipanel-meta { font-size: 0.76rem; color: var(--muted); }

/* --- Axis info popover (the "i" badge popover) ------------------------- */

#axis-popover {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.85rem 1rem 0.75rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  z-index: 25;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
}

#axis-popover h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  padding-right: 1.4rem;
}

#axis-popover p { margin: 0 0 0.5rem; }
#axis-popover .axis-popover-meta { font-size: 0.78rem; color: var(--muted); }
#axis-popover a { font-size: 0.85rem; color: var(--luzon); text-decoration: underline; }
#axis-popover .axis-popover-close {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px; border: none; background: transparent;
  font-size: 18px; color: var(--muted); cursor: pointer; line-height: 22px;
  border-radius: 4px;
}
#axis-popover .axis-popover-close:hover { background: var(--soft); color: var(--ink); }

/* --- Big play button --------------------------------------------------- */

#big-play {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 6;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  transition: transform 0.12s ease, background 0.12s ease;
}

#big-play:hover { background: var(--brand-hot); transform: scale(1.05); }
#big-play:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

#big-play .bp-pause { display: none; font-size: 14px; letter-spacing: 1px; }
#big-play.playing .bp-play { display: none; }
#big-play.playing .bp-pause { display: inline; }
#big-play.playing { background: var(--brand-hot); }

#big-play[hidden] { display: none !important; }

/* --- Last-tapped panel (touch / mobile) -------------------------------- */

#last-tap-panel {
  display: none;
  margin: 0.6rem 1.25rem 0;
  padding: 0.6rem 0.75rem;
  background: var(--soft);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.4;
}

#last-tap-panel:empty { display: none; }

#last-tap-panel .ltp-head {
  display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem;
}

#last-tap-panel .ltp-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
}

#last-tap-panel .ltp-island {
  margin-left: auto; font-size: 0.75rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

#last-tap-panel .ltp-row {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.16rem 0;
}

#last-tap-panel .ltp-k { color: var(--muted); font-size: 0.8rem; flex: 1; }
#last-tap-panel .ltp-v { font-variant-numeric: tabular-nums; font-weight: 600; }

#last-tap-panel .ltp-note {
  margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--rule);
  font-size: 0.75rem; color: var(--muted);
}

@media (hover: none) { #last-tap-panel:not(:empty) { display: block; } }
@media (max-width: 600px) { #last-tap-panel:not(:empty) { display: block; } }

/* --- Methodology + footer --------------------------------------------- */

.noscript {
  background: #fff7d6;
  border: 1px solid #e6c84a;
  padding: 0.75rem 1rem;
  margin: 1rem 1.25rem;
  border-radius: 6px;
  font-size: 0.9rem;
}

#methodology {
  margin: 2rem 1.25rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.55;
}

#methodology h2 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}

#methodology p { margin: 0.6rem 0; max-width: 78ch; }
#methodology strong { font-weight: 600; }
#methodology a { color: var(--luzon); text-decoration: underline; }
#methodology a:hover { text-decoration: none; }

footer {
  margin: 1.5rem 1.25rem 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

footer a { color: var(--ink); text-decoration: underline; }
footer a:hover { text-decoration: none; }
footer p { margin: 0.3rem 0; }

footer .freshness {
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

footer .freshness:empty { display: none; }

footer .disclaimer {
  font-size: 0.76rem;
  color: var(--muted);
  max-width: 60ch;
  margin-top: 0.5rem;
}

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

@media (max-width: 879px) {
  #topbar { padding: 0.55rem 1rem; }
  #title-strip { padding: 0.7rem 1rem 0.4rem; }
  #story-headline { font-size: 1.35rem; }
  #title-strip .tagline { font-size: 0.78rem; }
  #chart { height: 540px; }
  #controls { padding: 0.8rem 1rem 1rem; }
  .story-why { margin: 0.4rem 1rem 0.6rem; }

  /* WCAG 2.5.5: every touch target reaches 44px on small screens. */
  #controls button[type="button"]:not(.year-stepper button),
  #search,
  #compare-select { min-height: 44px; }
  .year-stepper button { min-height: 44px; }
  .year-range { height: 44px; }
  #topbar a.brand,
  .topbar-right a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Trim the title strip so the chart sits closer to the fold on a phone. */
  .story-finding { margin-top: 0.4rem; padding: 0.4rem 0.6rem; font-size: 0.8rem; }
  .story-caveat { margin-top: 0.3rem; }

  /* On-chart axis picker pills reach 44px on touch screens. */
  .axis-pick-btn { min-height: 44px; }
}

@media (max-width: 520px) {
  #topbar { gap: 0.6rem; }
  #story-switcher {
    width: 100%;
    order: 3;
    overflow-x: auto;
    flex-wrap: nowrap;
    /* Fade the right edge so the row reads as scrollable (more tabs offscreen). */
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  #story-switcher::-webkit-scrollbar { display: none; }
  .story-btn { white-space: nowrap; flex-shrink: 0; }
  #title-strip { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  /* Four chart-type buttons as a tidy 2x2 block instead of a lopsided wrap. */
  #chart-type-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
  .chart-type-btn { justify-content: center; }
  .chart-type-btn .ct-label { display: inline; }
  #chart { height: 460px; }
  #story-headline { font-size: 1.25rem; }
  .axis-pick-btn { font-size: 0.78rem; max-width: 200px; }
  .axis-pick-name { max-width: 160px; }
}