/* Web fonts (Inter, Archivo, DM Mono) are self-hosted: their @font-face
   rules are in fonts/fonts.css, which Dash loads with the other assets. */

:root {
  --bg: #0A1626;
  --surface: #101F36;
  --border: rgba(255,255,255,0.10);
  --text: #F2F6FB;
  --text-muted: rgba(242,246,251,0.72);
  --text-dim: rgba(242,246,251,0.55);
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 12px 28px -12px rgba(0,0,0,0.5);
  --display: 'Inter', system-ui, sans-serif;

  /* Atmosphere — Barbados coastal teal + flag gold + mission violet,
     used only as soft, blurred background depth, never behind text. */
  --mesh-teal: #0d9488;
  --mesh-gold: #c99a2e;
  --mesh-violet: #6d28d9;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
/* Read by screen readers, not shown on screen. */
.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;
}
/* Keeps a focused element (or a skip-link target) from landing under the
   sticky header. */
html { scroll-padding-top: 88px; }

/* ---------- Atmosphere: blurred colour mesh behind the whole page ----------
   Decorative only — never sits behind text (page content has an opaque or
   glass surface of its own), and never affects layout. A tiled repeating
   background (repeat-y, one cluster of 5 soft blobs per 1000px) rather
   than a fixed number of positioned blobs, so coverage is automatic no
   matter how tall a given page is — a short page and the longest mission
   page both get full-length colour, with nothing to add per-page. */
.app-shell {
  position: relative;
  background-image:
    radial-gradient(circle 390px at 4% 3%, rgba(3,105,161,0.38), transparent 72%),
    radial-gradient(circle 350px at 96% 14%, rgba(29,78,216,0.32), transparent 72%),
    radial-gradient(circle 310px at 30% 38%, rgba(56,189,248,0.34), transparent 72%),
    radial-gradient(circle 350px at 90% 60%, rgba(30,58,138,0.30), transparent 72%),
    radial-gradient(circle 310px at 8% 82%, rgba(14,165,233,0.32), transparent 72%),
    radial-gradient(circle 270px at 60% 95%, rgba(29,78,216,0.24), transparent 72%);
  background-repeat: repeat-y;
  background-size: 100% 850px;
}

/* ---------- Site header/nav (one shared header, every page incl. Overview) ----------
   Previously Overview shipped its own separate copy of this header, which
   drifted out of sync with the shared one more than once. Now there's
   exactly one: dark, sticky, with a centred max-width inner row so its
   content lines up with the page content below it even though the bar
   itself runs full-bleed. */
.mb-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10,22,38,0.82); backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mb-header-inner {
  max-width: 1560px; margin: 0 auto; padding: 18px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.mb-header-right { display: flex; align-items: center; gap: 28px; }
.mb-header-nav-wide { display: flex; align-items: center; gap: 28px; }

/* Mobile menu — Overview's header never had one of its own before this
   merge (its nav links just disappeared below 980px with no replacement);
   this is the existing hamburger mechanic from the other pages, re-skinned
   dark to match. */
.mb-nav-details { display: none; position: relative; }
.mb-nav-toggle-label {
  cursor: pointer; font-size: 1.3rem; padding: 4px 8px; list-style: none; color: var(--text);
}
.mb-nav-toggle-label::-webkit-details-marker { display: none; }
.mb-header-nav-narrow {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 30; display: flex;
  background: #101F36; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius);
  box-shadow: 0 20px 34px -16px rgba(0,0,0,0.6); flex-direction: column; gap: 0;
  min-width: 200px; padding: 6px 0;
}
.mb-header-nav-narrow .mb-nav-link { display: block; padding: 10px 16px; }

/* "Missions" dropdown, desktop only — plain <details>, no JS */
.mb-nav-narrow-heading {
  padding: 12px 16px 4px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-dim);
}
/* The mission sublist sits inside a plain block <div>, not a flex
   container, so each <a> needs its own display:block to stack as
   separate rows instead of flowing inline like wrapped text. */
.mb-nav-link-indent { display: block; padding-left: 28px !important; }

@media (max-width: 860px) {
  .mb-header-nav-wide { display: none; }
  .mb-nav-details { display: block; }
}
@media (max-width: 640px) {
  .mb-header-inner { padding: 14px 20px; }
  .mb-cta-pill { display: none; }
}

.app-main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; min-height: 60vh; }
.app-footer {
  text-align: center; padding: 24px; color: var(--text-dim); font-size: 0.8rem;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.footer-brands { display: flex; align-items: center; justify-content: center; gap: 24px; padding-top: 8px; }
.footer-brand-mb { height: 30px; width: auto; }
/* Taller than the Mission Barbados logo because its wordmark is only about
   a quarter of the image height. */
.footer-brand-infolytics { height: 40px; width: auto; }
.footer-brand-divider { width: 1px; height: 30px; background: var(--border); }
.footer-brand-link { display: inline-flex; align-items: center; border-radius: 6px; transition: opacity 0.15s ease; }
.footer-brand-link:hover { opacity: 0.8; }
.footer-brand-link:focus-visible { outline: 2px solid #FFC726; outline-offset: 4px; }
.footer-on-light { display: none; }
.footer-powered { font-size: 0.78rem; letter-spacing: 0.02em; }
.footer-links { display: flex; gap: 10px; align-items: center; font-size: 0.78rem; margin-top: 4px; }
.footer-link { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }
.footer-link:hover { color: #FFC726; }
.footer-sep { color: var(--text-dim); }

/* ---------- Terms and Conditions (/terms) ---------- */
.terms-page { max-width: 760px; margin: 0 auto; padding: 40px 0 80px; }
.terms-h1 { margin: 12px 0 0; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(36px, 4.4vw, 56px); letter-spacing: -0.03em; line-height: 1; }
.terms-updated { margin: 14px 0 0; font-family: 'DM Mono', monospace; font-size: 0.8rem; color: var(--text-dim); }
.terms-section { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(242,246,251,0.08); }
.terms-h2 { margin: 0 0 10px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.terms-p { margin: 0 0 12px; font-size: 1rem; line-height: 1.7; color: #B9C8DA; }
.terms-list { margin: 4px 0 0; padding-left: 20px; }
.terms-li { margin: 0 0 10px; font-size: 1rem; line-height: 1.65; color: #B9C8DA; }
.terms-li strong { color: var(--text); }
.terms-link { color: #FFC726; }
.terms-closing { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(242,246,251,0.08); }
.terms-back { display: inline-block; margin-top: 28px; color: #FFC726; font-weight: 600; }

/* ---------- Generic page chrome ---------- */
.page-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 4px; }
.page-sub { color: var(--text-muted); margin: 0 0 20px; max-width: 640px; }
.page-body { display: flex; flex-direction: column; gap: 20px; }
.sec-head {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim); margin-bottom: 10px;
}
.back-link { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -12px rgba(0,0,0,0.45);
  padding: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .rag-tile { transition: none !important; transform: none !important; }
}
.empty-state { color: var(--text-dim); padding: 24px; text-align: center; font-size: 0.9rem; }
.note-body { color: var(--text-muted); line-height: 1.5; margin: 0; }
.about-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.about-row:last-child { border-bottom: none; padding-bottom: 0; }
.about-row:first-child { padding-top: 0; }
.about-row-label {
  display: flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); flex-shrink: 0;
}
.about-row-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.about-row-value { color: var(--text); font-size: 0.9rem; text-align: right; }
.snapshot-footer { color: var(--text-dim); font-size: 0.8rem; text-align: center; margin-top: 12px; }

/* ---------- About page (methodology.py) ----------
   Section order is listed in methodology.py's docstring. No brand-gradient
   washes anywhere on this page, matching the rest of the dashboard: gold
   is the only accent, and mission colour appears only in the mission
   icons themselves.
   Keyed on the page's own root element, not a route class on <body>, so
   the width changes in the same frame as the content (see the Overview
   rules further down for why). */
.app-main:has(#_pages_content > .ab-page) { max-width: 1320px; padding: 48px 40px 110px; }

.ab-page { display: flex; flex-direction: column; gap: 20px; }
.ab-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: #FFC726;
}
.ab-hero-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #FFC726;
}
.ab-h2 { margin: 14px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -0.025em; }

/* ---- 1. Intro — no box, sits directly on the page background ---- */
.ab-hero {
  padding: 56px 0 72px; display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: center;
}
.ab-hero-left { flex: 1 1 460px; min-width: 0; }
.ab-hero-h1 {
  margin: 16px 0 0; font-size: clamp(48px, 6vw, 88px); line-height: 0.95; font-weight: 900;
  letter-spacing: -0.035em; font-family: 'Archivo', sans-serif;
}
.ab-hero-lead {
  margin: 28px 0 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.55; font-weight: 500;
  color: #F2F6FB; max-width: 54ch;
}
.ab-mission-grid {
  flex: 1 1 420px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  grid-auto-rows: 1fr; gap: 12px;
}
.ab-mission-tile {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px 16px 14px; border-radius: 16px;
  background: rgba(10,22,38,0.55); border: 1px solid rgba(242,246,251,0.08); color: #F2F6FB;
  transition: background 160ms ease, border-color 160ms ease;
}
.ab-mission-tile:hover { background: rgba(10,22,38,0.85); border-color: rgba(242,246,251,0.22); color: #F2F6FB; }
.ab-mission-icon { width: 56px; height: 56px; border-radius: 50%; flex: none; }
.ab-mission-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ab-mission-num { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: #9FB3CC; }
.ab-mission-name {
  font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
  text-wrap: balance; overflow-wrap: break-word;
}

/* ---- 2. General limitations — one full-width card, 3 points side by side ---- */
.ab-card {
  border-radius: 20px; border: 1px solid rgba(242,246,251,0.10);
  background: rgba(255,255,255,0.035); padding: 38px 40px 42px;
}
.ab-card .ab-h2 { font-size: 30px; }
.ab-notes { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 24px 40px; }
.ab-note { flex: 1 1 260px; min-width: 0; padding-top: 20px; border-top: 1px solid rgba(242,246,251,0.10); }
.ab-note-num {
  width: 28px; height: 28px; border-radius: 7px; background: rgba(255,199,38,0.14);
  color: #FFC726; font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}
.ab-note-title { margin: 16px 0 0; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.ab-note-body { margin: 7px 0 0; font-size: 15px; line-height: 1.6; color: #9FB3CC; }

/* ---- 3. Contact — no card, sits below a divider ---- */
.ab-contact {
  padding: 28px 0 0; margin-top: 12px; border-top: 1px solid rgba(242,246,251,0.10);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
}
.ab-contact-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: #B9C8DA; }
.ab-contact-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.ab-contact-chip {
  display: flex; align-items: center; gap: 12px; color: #F2F6FB;
  padding: 12px 18px 12px 12px; border: 1px solid rgba(242,246,251,0.10); border-radius: 14px;
  background: rgba(255,255,255,0.035); transition: background 160ms ease, border-color 160ms ease;
}
.ab-contact-chip:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,199,38,0.5); }
.ab-contact-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,199,38,0.14);
  color: #FFC726; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.ab-contact-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ab-contact-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.ab-contact-email { font-family: 'DM Mono', monospace; font-size: 12px; color: #FFC726; overflow-wrap: anywhere; }
.ab-contact-text { flex: 1 1 360px; min-width: 0; }
.ab-contact-text .ab-contact-sub { max-width: 56ch; }
/* Shown at every width, unlike the header's Get updates pill. */
.ab-contact .ab-updates-btn { display: inline-block; font-size: 0.9rem; padding: 12px 22px; }

/* ---- Mission tile indicator counts ---- */
.ab-mission-count { font-family: 'DM Mono', monospace; font-size: 11.5px; color: #FFC726; margin-top: 2px; }

/* ---- About this platform — heading left, paragraph right, no box ---- */
.ab-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 24px 64px;
  align-items: start; padding: 0 0 28px;
}
.ab-intro .ab-h2 { font-size: 32px; line-height: 1.15; text-wrap: balance; }
.ab-intro-body { margin: 0; font-size: 18px; line-height: 1.65; color: #F2F6FB; max-width: 68ch; }

/* ---- What you can do here — five cards in a row ---- */
.ab-do { padding: 0 0 28px; }
.ab-do-heading { margin: 0; font-weight: 500; }
.ab-do-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ab-do-card {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 22px 20px 24px;
  border-radius: 16px; border: 1px solid rgba(242,246,251,0.10); background: rgba(255,255,255,0.035);
}
/* Icons are single-colour SVGs used as masks, so their colour follows the theme. */
.ab-do-icon {
  width: 40px; height: 40px; border-radius: 10px; background: rgba(255,199,38,0.14);
  display: flex; align-items: center; justify-content: center;
}
.ab-do-icon::before {
  content: ""; width: 20px; height: 20px; background: #FFC726;
  -webkit-mask: var(--ab-icon) center / contain no-repeat; mask: var(--ab-icon) center / contain no-repeat;
}
.ab-do-icon-missions { --ab-icon: url(/assets/icons/about/missions.svg); }
.ab-do-icon-progress { --ab-icon: url(/assets/icons/about/progress.svg); }
.ab-do-icon-download { --ab-icon: url(/assets/icons/about/download.svg); }
.ab-do-icon-mail { --ab-icon: url(/assets/icons/about/mail.svg); }
.ab-do-icon-accessibility { --ab-icon: url(/assets/icons/about/accessibility.svg); }
.ab-do-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.ab-do-body { margin: -4px 0 0; font-size: 14.5px; line-height: 1.55; color: #9FB3CC; }

/* ---- Where the data comes from — text left, live counts right ---- */
.ab-source { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px 56px; align-items: end; }
.ab-source-text { min-width: 0; }
.ab-source .ab-h2 { text-wrap: balance; }
.ab-source-body { margin: 12px 0 0; font-size: 16px; line-height: 1.65; color: #B9C8DA; max-width: 60ch; }
.ab-source-link { display: inline-block; margin-top: 16px; color: #FFC726; font-weight: 600; font-size: 15px; }
.ab-source-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ab-stat { padding-top: 14px; border-top: 1px solid rgba(242,246,251,0.10); min-width: 0; }
.ab-stat-n {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 40px; line-height: 1;
  letter-spacing: -0.03em; color: #FFC726; font-variant-numeric: tabular-nums;
}
.ab-stat-l { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: #B9C8DA; }
.ab-stats-asof { grid-column: 1 / -1; font-family: 'DM Mono', monospace; font-size: 11.5px; color: #9FB3CC; }

/* Clears the sticky header when the About page links here. */
.mb-partners { scroll-margin-top: 80px; }

@media (max-width: 1100px) {
  .ab-do-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-do-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .ab-intro, .ab-source { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .ab-mission-grid { grid-template-columns: 1fr; }
  .ab-do-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Indicator detail (record header + baseline-target rail) ----------
   Per design_handoff_mission_barbados/README.md (Screen 3): deliberately
   quieter than the mission page — no colour wash, no giant ghost numeral,
   no 900-weight display type. The rail's marker position/absence is
   derived per indicator in pages/indicator.py's _rail_state(), never a
   fixed layout choice here. */
.det-record-header { padding: 28px 0 8px; }
.det-crumb {
  font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.05em;
  color: var(--text-dim); margin-bottom: 20px; display: flex; align-items: center; flex-wrap: wrap;
}
.det-crumb-link { color: var(--text-dim); }
.det-crumb-link:hover { color: var(--text); }
.det-crumb-mission { color: var(--text-muted); }
.det-crumb-sep { margin: 0 6px; }
.det-crumb-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.det-crumb-current { color: var(--text-muted); }
.det-header-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: start;
}
@media (max-width: 900px) {
  .det-header-grid { grid-template-columns: 1fr; }
}
.det-header-left { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; }
@media (max-width: 560px) {
  .det-header-left { grid-template-columns: 1fr; }
}
.det-code { font-family: 'DM Mono', monospace; font-weight: 500; font-size: 2.2rem; line-height: 1; }
.det-title { font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.15; margin: 0 0 10px; max-width: 22ch; }
.det-def { font-size: 1rem; line-height: 1.55; color: var(--text-muted); max-width: 60ch; margin: 0 0 14px; }
.det-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.det-chip {
  font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--border); border-radius: 6px; padding: 5px 9px; color: var(--text-muted);
}
.det-chip-accent { background: transparent; border: 1px solid currentColor; }

.det-status-card {
  min-width: 220px; max-width: 260px; border-radius: 14px; padding: 18px 20px;
  background: rgba(10,22,38,0.6); border: 1px solid rgba(242,246,251,0.16);
}
.det-status-label {
  font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px;
}
.det-status-value {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 1.9rem;
  overflow-wrap: break-word; word-break: break-word;
}
.det-status-delta { font-size: 0.85rem; font-weight: 700; margin-left: 8px; }

.det-body-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr); gap: 20px; }
@media (max-width: 900px) {
  .det-body-grid { grid-template-columns: 1fr; }
}
.det-left-column { display: flex; flex-direction: column; gap: 20px; }
/* !important: dcc.Graph sets an inline style="height:100%" on this exact
   div, which resolves against a definite value once its ancestor is a
   flex item (.det-trend-card, inside .det-left-column's flex column) —
   collapsing the chart to a sliver otherwise. Same fix as the mission-page
   sparkline; a plain CSS height can't out-rank Dash's own inline style. */
.det-trend-graph { height: 340px !important; }
.det-data { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.det-data-summary {
  cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
}
.det-data-summary:hover { color: var(--text); }
.det-data-summary:focus-visible { outline: 2px solid #FFC726; outline-offset: 3px; border-radius: 4px; }
.det-data-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 0.85rem; }
.det-data-table th, .det-data-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); }
.det-data-table th { color: var(--text-muted); font-weight: 600; }
.det-data-table td:last-child, .det-data-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.det-rail-card { padding: 32px 34px 28px; }

/* Countdown card (indicator.py _countdown_card): the bar is the whole
   baseline stock; a segment per period removed, hatched up to the target
   marker, plain beyond it. */
.cd-headline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px; }
.cd-left { font-family: 'Archivo', sans-serif; font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cd-left-text { font-size: 0.95rem; color: var(--text-muted); }
.cd-bar { position: relative; padding-top: 24px; }
.cd-track { position: relative; height: 22px; border-radius: 6px; overflow: hidden; background: rgba(159,179,204,0.10); }
.cd-zone {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: repeating-linear-gradient(115deg, rgba(159,179,204,0.32) 0 6px, rgba(159,179,204,0.08) 6px 12px);
}
.cd-segs { position: absolute; inset: 0; display: flex; gap: 2px; }
.cd-seg { height: 100%; flex: none; }
.cd-target { position: absolute; bottom: -4px; width: 2px; height: 30px; margin-left: -1px; background: #FFC726; }
.cd-target-label {
  position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap;
  font-family: 'DM Mono', monospace; font-size: 0.72rem; color: #FFC726;
}
.cd-labels { position: relative; display: flex; justify-content: space-between; gap: 4px 16px; margin-top: 10px; font-size: 0.88rem; color: var(--text-muted); }
.cd-labels strong { color: var(--text); font-weight: 700; }
.cd-togo { position: absolute; top: 0; white-space: nowrap; color: var(--text); }
.cd-stock { color: var(--text-dim); }
@media (max-width: 560px) {
  /* Too narrow for three labels on one line: drop "to go" (it's in the
     headline above) rather than let it overlap the others. */
  .cd-togo { display: none; }
}
html.a11y-contrast-light .cd-target { background: #8A6300 !important; }
html.a11y-contrast-light .cd-target-label { color: #8A6300 !important; }
.cd-periods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cd-fy-note { margin: 10px 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--text-muted); }
.cd-period {
  font-family: 'DM Mono', monospace; font-size: 0.75rem; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-muted);
}
/* Baseline sits above the rail's start (the circle marker), target above
   its end (the arrowhead) — space-between instead of a fixed gap, so the
   two numbers track the actual span of the arrow beneath them. */
.det-rail-nums { display: flex; justify-content: space-between; margin-bottom: 8px; }
.det-rail-num-group-target { text-align: right; }
.det-rail-num-label {
  font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim);
}
.det-rail-num { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 2.2rem; line-height: 1.15; }

.rail-track { position: relative; height: 44px; margin-top: 12px; }
.rail-shaft-row { position: absolute; top: 16px; left: 0; right: 22px; display: flex; align-items: center; height: 12px; }
.rail-shaft { flex: 1; height: 12px; border-radius: 99px 0 0 99px; }
.rail-arrow { width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 20px solid; }
.rail-baseline-marker {
  position: absolute; left: 0; top: 13px; width: 18px; height: 18px; margin-left: -9px;
  border-radius: 50%; background: var(--bg); border: 4px solid var(--text);
  box-shadow: 0 0 0 4px var(--bg);
}
.rail-marker {
  position: absolute; top: 14px; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; box-shadow: 0 0 0 4px var(--bg); transition: left 1s cubic-bezier(.22,1,.36,1);
}
.rail-marker-lifted { top: -6px; }
@media (prefers-reduced-motion: reduce) {
  .rail-marker { transition: none; }
}
/* Measuring-scale variant (indicator.py SCALE_RAIL_INDICATORS): zero at the
   left end, the real baseline and target marked where they fall. */
.scale-track { position: relative; height: 12px; margin: 46px 0 6px; }
.scale-track-bg { position: absolute; inset: 0; border-radius: 99px; background: rgba(255,255,255,0.08); }
.scale-fill { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.scale-point { position: absolute; top: 0; height: 100%; }
.scale-label {
  position: absolute; bottom: 24px; left: 0; transform: translateX(-50%); white-space: nowrap;
  font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim);
}
.scale-gap { position: absolute; top: 0; bottom: 0; border-radius: 0 99px 99px 0; }
.scale-target-dot { position: absolute; left: -9px; top: -3px; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 4px var(--bg); }
.scale-label-end { transform: translateX(-100%); left: 9px; }
.scale-label-start { transform: none; left: -9px; }
.scale-label-raised { bottom: 42px; }
.scale-baseline-dot {
  position: absolute; left: -9px; top: -3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg); border: 4px solid var(--text); box-shadow: 0 0 0 4px var(--bg);
}

.scale-track-compact { margin: 10px 0 4px; }
.multi-stack { display: flex; flex-direction: column; gap: 22px; }
.multi-block .det-note-block { margin-top: 12px; }
.det-rail-caption { font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--text-muted); margin-top: 14px; }

/* Per-indicator editorial note (e.g. data provenance, why there's no
   trend line yet) — renders only when publication.public_caveat is set,
   so it's authorable and independently hideable per indicator. */
.det-note-block {
  display: flex; align-items: flex-start; gap: 14px;
  border-radius: 22px; border-left: 5px solid; padding: 22px 26px;
}
.det-note-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; border: 1.5px solid; font-family: 'DM Mono', monospace; font-size: 0.7rem;
  font-weight: 700; flex-shrink: 0; margin-top: 2px;
}
.det-note-body {
  font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 70ch;
  white-space: pre-line;
}

.det-sidebar-link {
  display: block; text-align: center; margin-top: 16px; padding: 10px; border-radius: 999px;
  border: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
}
.det-sidebar-link:hover { border-color: var(--text-dim); color: var(--text); }

.stat-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.stat-tile-value { font-size: 1.6rem; font-weight: 800; font-variant-numeric: proportional-nums; }
.stat-tile-label { color: var(--text-muted); font-size: 0.82rem; margin-top: 2px; }

/* ---------- Meter (single ratio against a limit) ---------- */
.meter-card { display: flex; flex-direction: column; justify-content: center; }
.meter-heading { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.meter-value { font-size: 1.6rem; font-weight: 800; font-variant-numeric: proportional-nums; }
.meter-label { color: var(--text-muted); font-size: 0.82rem; }
.meter-track { height: 10px; border-radius: 999px; overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }

.methodology-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 8px; }
.methodology-table th {
  text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim); padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.methodology-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-muted); }

/* ---------- Update Tracker (/status-tracker) — per design_handoff_update_tracker ---------- */
body.mb-tracker-route .app-shell { background-image: none; }
body.mb-tracker-route .app-main { max-width: 1320px; padding: 56px 40px 100px; }

.ut-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px 56px; flex-wrap: wrap;
}
.ut-h1 {
  margin: 0; font-size: clamp(40px, 4.6vw, 64px); line-height: 0.98; font-weight: 900;
  letter-spacing: -0.035em; font-family: 'Archivo', sans-serif;
}
.ut-intro { margin: 0; max-width: 440px; font-size: 16px; line-height: 1.55; color: #9FB3CC; }

/* Tabs (Monthly / Annual / Per assessment or study) replace the three
   stacked tables — only the active tab's panel renders visibly; the
   others stay in the DOM with display:none so switching needs no server
   round-trip (see assets/status_tracker.js). */
.ut-tablist {
  margin-top: 44px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 5px; border-radius: 14px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(242,246,251,0.08); width: max-content; max-width: 100%;
}
.ut-tab {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 10px; font-family: 'Archivo', sans-serif;
  font-size: 15px; font-weight: 700; color: #9FB3CC;
  transition: background 160ms ease, color 160ms ease;
}
.ut-tab-active { background: #FFC726; color: #0A1626; }

.ut-tab-blurb {
  display: none; margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: #9FB3CC;
}
.ut-tab-blurb-active { display: block; }

.ut-panel { display: none; }
.ut-panel-active { display: block; margin-top: 18px; }

.ut-card {
  border: 1px solid rgba(242,246,251,0.10); border-radius: 16px;
  background: rgba(255,255,255,0.025); overflow-x: auto;
}
.ut-table { width: 100%; min-width: 850px; border-collapse: collapse; table-layout: fixed; text-align: left; }
.ut-head {
  padding: 16px 16px 14px; font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase; color: #7C90A8;
  border-bottom: 1px solid rgba(242,246,251,0.12);
}
.ut-head-code { width: 84px; padding-left: 22px; }
/* The handoff specs 210px, but "Sustainable Development" (the longest
   mission name shown here) doesn't fit at that width without truncating
   — kept at 240px per earlier explicit direction that this name must
   always show in full on this table. */
.ut-head-mission { width: 240px; }
.ut-head-date { width: 200px; padding-right: 22px; text-align: right; }
.ut-row { transition: background 160ms ease; }
.ut-row:hover { background: rgba(255,255,255,0.04); }
.ut-cell { padding: 17px 16px; vertical-align: top; }
.ut-cell-code { position: relative; padding-left: 22px; }
.ut-code-bar { position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; }
.ut-code { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.03em; line-height: 1.55; }
.ut-title {
  display: block; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em;
  color: #F2F6FB; transition: color 160ms ease;
}
.ut-title:hover { color: var(--ut-row-color); }
.ut-schedule { display: block; margin-top: 5px; font-size: 13px; line-height: 1.4; color: #7C90A8; }
.ut-cell-mission { font-size: 14px; line-height: 1.55; color: #9FB3CC; white-space: nowrap; }
.ut-mission { display: flex; align-items: center; gap: 8px; }
.ut-mission-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ut-mission-name { overflow: hidden; text-overflow: ellipsis; }
.ut-cell-date {
  padding-right: 22px; text-align: right; font-family: 'DM Mono', monospace; font-size: 14px;
  font-weight: 500; line-height: 1.55; white-space: nowrap; color: #F2F6FB;
}

/* ---------- Header "Download data" item (confirm dialog, then Excel file) ---------- */
.mb-nav-download {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Archivo', sans-serif; font-size: 0.88rem; color: rgba(242,246,251,0.72);
  transition: color 0.15s ease;
}
.mb-nav-download:hover { color: #FFC726; }
.mb-nav-download:focus-visible { outline: 2px solid #FFC726; outline-offset: 4px; border-radius: 4px; }
.mb-dl-icon {
  width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-5-5m5 5l5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-5-5m5 5l5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mb-nav-download-narrow { display: flex; width: 100%; box-sizing: border-box; padding: 10px 16px; }

/* ---------- "Get updates" signup panel + confirm page ---------- */
button.mb-cta-pill { border: none; cursor: pointer; font-family: 'Archivo', sans-serif; }
@media (min-width: 641px) { .mb-nav-subscribe { display: none; } }

.sub-panel { display: none; }
.sub-panel-open { display: block; }
.sub-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(4,10,20,0.68); backdrop-filter: blur(3px); }
.sub-dialog {
  position: fixed; z-index: 901; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  background: #101F36; border: 1px solid rgba(242,246,251,0.12); border-radius: 20px;
  padding: 30px 30px 24px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7); color: #F2F6FB;
}
.sub-close {
  all: unset; cursor: pointer; position: absolute; top: 14px; right: 16px; font-size: 26px; line-height: 1;
  color: #9FB3CC; padding: 4px 8px; border-radius: 8px;
}
.sub-close:hover { color: #fff; }
.sub-close:focus-visible { outline: 2px solid #FFC726; }
.sub-title { margin: 10px 0 0; font-family: 'Archivo', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.sub-copy { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: #9FB3CC; }
.sub-label { display: block; margin-top: 20px; font-size: 13px; font-weight: 600; color: #B9C8DA; }
.sub-input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 12px 14px;
  font-size: 15px; font-family: 'Archivo', sans-serif; color: #F2F6FB;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(242,246,251,0.16); border-radius: 12px;
}
.sub-input:focus-within { border-color: #FFC726 !important; box-shadow: 0 0 0 3px rgba(255,199,38,0.2) !important; outline: none !important; }
.sub-input .dash-input-element {
  all: unset; display: block; width: 100%; font: inherit; color: #F2F6FB; background: transparent;
}
.sub-input .dash-input-element::placeholder { color: rgba(242,246,251,0.4); }
.sub-honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; }
.sub-consent { margin-top: 14px; font-size: 14px; line-height: 1.5; color: #B9C8DA; }
.sub-consent label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; color: #B9C8DA !important; }
.sub-consent input { margin-top: 3px; accent-color: #FFC726; }
.sub-submit {
  all: unset; cursor: pointer; margin-top: 18px; display: block; width: 100%; box-sizing: border-box;
  text-align: center; background: #FFC726; color: #0A1626; font-family: 'Archivo', sans-serif;
  font-weight: 700; font-size: 15px; padding: 13px 20px; border-radius: 999px;
}
.sub-submit:hover { box-shadow: 0 8px 20px rgba(255,199,38,0.35); }
.sub-submit:focus-visible { outline: 2px solid #FFC726; outline-offset: 3px; }
.sub-status { margin-top: 14px; font-size: 14px; line-height: 1.5; }
.sub-status:empty { display: none; }
.sub-status-ok { color: #3CCB8E; }
.sub-status-err { color: #F0A090; }
.sub-privacy { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: #7C90A8; }

.sub-confirm { max-width: 560px; margin: 80px auto 120px; text-align: center; }
.sub-confirm-title { margin: 12px 0 0; font-family: 'Archivo', sans-serif; font-size: clamp(32px, 4vw, 44px); font-weight: 900; letter-spacing: -0.03em; }
.sub-confirm-body { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: #9FB3CC; }
.sub-confirm-link { display: inline-block; margin-top: 26px; color: #FFC726; font-weight: 600; }
.sub-confirm-button { width: auto; display: inline-block; margin-top: 26px; padding: 13px 28px; }

/* ---------- Indicator cards ---------- */
.ind-card-grid {
  /* 3 equal fractional columns — always 3 per row, and a mission with
     fewer indicators leaves the remaining columns empty rather than
     stretching its cards to fill the row. Rectangular cards (wide,
     fixed-height), not square: width follows the column's share of the
     container, height is fixed via .ind-card-link's min-height below. */
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 900px) {
  .ind-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ind-card-grid { grid-template-columns: 1fr; }
}
/* Floating, not hinged: rotateX tilts around one axis, so one edge always
   reads as receded while the opposite edge does the "lifting" — not what
   was wanted here. This instead keeps the card flat and raises it evenly
   on translateY alone, with a soft, symmetric blurred shadow sitting
   directly underneath (not offset to one corner), so all four edges read
   as equally lifted off the page rather than tilted on a hinge. */
.ind-card-wrap { position: relative; height: 100%; }
.ind-card-shadow {
  position: absolute; inset: 16px; z-index: 0; border-radius: var(--radius);
  opacity: 0.7; filter: blur(12px); transform: translateY(10px); pointer-events: none;
}
.ind-card {
  position: relative; z-index: 1; height: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 18px 30px -16px rgba(0,0,0,0.5); overflow: hidden;
  transform: translateY(-6px);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease;
}
.ind-card-wrap:hover .ind-card {
  transform: translateY(-10px);
  box-shadow: 0 26px 40px -16px rgba(0,0,0,0.6);
}
@media (prefers-reduced-motion: reduce) {
  .ind-card { transition: none !important; transform: none !important; }
}
/* Fixed, not min-height: every card must report the exact same height
   regardless of how much content it holds, because the 3D tilt below is a
   fixed rotateX angle — on a taller element that same angle displaces the
   far edge further, so cards of different heights visibly tilt/lift by
   different amounts even though the CSS angle is identical (same bug and
   fix as the Overview mission tiles' resting tilt). The title clamp below
   exists for the same reason: without it, a long title alone could still
   make one card taller than the rest. */
.ind-card-link { display: flex; flex-direction: column; padding: 16px; height: 290px; }
.ind-card-status { margin-bottom: 8px; }
.ind-card-title { margin-bottom: 10px; }
.ind-card-id {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--text-dim); background: var(--bg); border-radius: 5px;
  padding: 2px 6px; margin-bottom: 4px;
}
.ind-card-title-text {
  font-weight: 700; font-size: 0.95rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* !important: dcc.Graph itself sets an inline style="height:100%" on this
   exact div, which — once the card above became a fixed, not min, height
   (for the even 3D tilt) — resolved against a now-definite flex-item
   height instead of behaving like "auto" as it used to, collapsing the
   chart and making it overlap the trend line below it. A plain CSS height
   here can't win against Dash's own inline style, so this has to be
   !important to force the sparkline back to its real 48px figure height. */
.ind-card-spark { height: 48px !important; margin: 4px 0; }
.ind-card-trend {
  display: flex; align-items: center; gap: 5px; font-size: 0.76rem;
  color: var(--text-muted); margin-top: 2px;
}
.ind-card-trend-arrow { font-weight: 700; color: var(--text-dim); }
.ind-card-stat-tile { padding: 8px 0 0; }
.ind-card-stat-label {
  display: block; font-family: 'DM Mono', monospace; font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 3px;
}
.ind-card-stat { font-size: 1.3rem; font-weight: 800; }
.ind-card-stat-period { color: var(--text-dim); font-size: 0.75rem; margin-left: 6px; }
/* Outer wrapper leaves room above the visual track for the two on-bar
   labels; the track itself (background, fill, tick) lives in the inner
   div so the labels can sit outside it without affecting its height. */
.ind-card-bar-track { position: relative; height: 6px; margin: 30px 6px 6px 0; }
.ind-card-bar-track-inner {
  position: relative; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.12);
}
.ind-card-bar-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; opacity: 0.55; }
.ind-card-bar-target {
  position: absolute; top: -3px; width: 2px; height: 12px; border-radius: 1px;
  transform: translateX(-50%);
}
.ind-card-bar-label {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.ind-card-bar-label-baseline { top: -20px; color: var(--text-dim); }
.ind-card-bar-label-target { top: -20px; }
.ind-card-bar-label-end { transform: translateX(-100%); margin-left: 6px; }
.ind-card-bar-label-start { transform: none; margin-left: -6px; }
.ind-card-bar-label-raised { top: -33px; }
.ind-card-bar-gap { position: absolute; top: 0; height: 100%; opacity: 0.35; border-radius: 0 999px 999px 0; }
.ind-card-bar-dot {
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%); box-shadow: 0 0 0 3px #101F36;
}
.ind-card-bar-dot-baseline { background: #101F36; border: 3px solid var(--text); box-sizing: border-box; }
.ind-card-bar-track-compact { margin: 6px 6px 2px 0; }
.ind-card-multi { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ind-card-multi-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.78rem; }
.ind-card-multi-name { color: var(--text-muted); }
.ind-card-multi-values { font-family: 'DM Mono', monospace; white-space: nowrap; }
.ind-card-values { display: flex; align-items: baseline; gap: 8px; font-size: 0.82rem; margin-top: 8px; }
.ind-card-baseline { color: var(--text-muted); }
.ind-card-arrow { color: var(--text-dim); }
.ind-card-target { font-weight: 600; }
.ind-card-freshness { color: var(--text-dim); font-size: 0.72rem; margin-top: auto; padding-top: 8px; }

/* ---------- Status pills ---------- */
.status-pill {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700;
}
.status-pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
.status-pill-overdue { border: 1px dashed currentColor; }

/* ---------- Mission page hero (full-bleed gradient-to-dark banner) ----------
   Mission colour glows in from the top-left corner and fades into the
   site's own dark background rather than filling a hard-edged colour
   block — so the banner reads as an extension of the page, not a
   different-coloured panel dropped on top of it. Ghost numeral bleeds
   off the top-right edge the same way the indicator detail page's
   mission-icon watermark does. */
.mh-hero { position: relative; overflow: hidden; width: 100vw; margin: -24px calc(50% - 50vw) 24px; }
.mh-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 84px 24px 68px; }
.mh-back { display: inline-block; color: rgba(203,213,225,0.85); font-size: 1rem; font-weight: 600; margin-bottom: 30px; }
.mh-back:hover { color: #fff; }
.mh-badges { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.mh-badge-num {
  display: inline-block; border: 1px solid; border-radius: 999px; padding: 8px 20px;
  font-family: 'DM Mono', monospace; font-size: 0.92rem; letter-spacing: 0.1em;
}
.mh-badge-count {
  font-family: 'DM Mono', monospace; font-size: 0.88rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.mh-text { position: relative; z-index: 1; max-width: 740px; }
.mh-title {
  font-family: 'Archivo', var(--display), sans-serif; font-weight: 800; letter-spacing: -0.015em;
  font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.04; margin: 0 0 18px; color: #fff;
}
.mh-desc { font-size: 1.2rem; line-height: 1.6; color: rgba(255,255,255,0.75); margin: 0; }
/* Per design_handoff_mission_glyph: a full-bleed hero (~1440px) scales the
   reference 740x520 hero's glyph via clamp(), keeping the negative top/right
   offsets proportional (-11%/-23% of the glyph's own size) rather than the
   fixed px the handoff gives for that smaller reference hero. */
.mh-hero-glyph {
  --glyph-size: clamp(380px, 38vw, 640px);
  position: absolute; top: calc(var(--glyph-size) * -0.11); right: calc(var(--glyph-size) * -0.10);
  z-index: 0; pointer-events: none; user-select: none;
  width: var(--glyph-size); height: var(--glyph-size); opacity: 0.10;
}
@media (max-width: 760px) {
  .mh-hero-glyph { --glyph-size: 300px; top: -30px; right: -40px; }
}
@media (max-width: 620px) {
  .mh-inner { padding: 48px 20px 40px; }
}
@media (max-width: 640px) {
  .page-title { font-size: 1.3rem; }
}

/* ---------- Indicator index / search (dense list, not a card gallery) ----------
   Per design_handoff_mission_barbados Screen 4: replaces an earlier
   card-grid version whose per-card shadows bled into each other and
   whose visual weight implied data the cards didn't carry. This is a
   directory — a flat list, no cards, no shadows, no status/data state. */
.idx-page { padding-bottom: 40px; }
.idx-head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 16px; margin-bottom: 28px;
}
.idx-h1 {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1; letter-spacing: -0.02em; margin: 0;
}
.idx-head-copy { font-size: 0.95rem; line-height: 1.5; color: var(--text-muted); max-width: 380px; margin: 0; }

.idx-search-bar {
  display: flex; align-items: center; gap: 12px; height: 56px; border-radius: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border); padding: 0 16px;
  margin-bottom: 22px; transition: border-color 0.15s ease;
}
.idx-search-bar:focus-within { border-color: rgba(255,199,38,0.7); }
.idx-search-icon { font-size: 0.95rem; opacity: 0.6; flex-shrink: 0; }
.idx-search {
  flex: 1; border: none; outline: none; background: transparent; color: var(--text);
  font-family: 'Inter', sans-serif; font-size: 1rem;
}
.idx-search::placeholder { color: var(--text-dim); }
/* The bar has its own CLEAR button; hide the browser's built-in one. */
.idx-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.idx-clear-btn {
  border: none; background: transparent; cursor: pointer; flex-shrink: 0;
  font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--text-dim); padding: 6px;
}
.idx-clear-btn:hover { color: var(--text); }

.idx-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.idx-filter-label {
  font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--text-dim); margin-right: 4px;
}
.idx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.idx-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
  font-family: 'Inter', sans-serif; font-size: 0.8rem; cursor: pointer; transition: all 0.18s ease;
}
.idx-chip-active { background: rgba(255,255,255,0.1); color: var(--text); }
.idx-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.idx-count {
  font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--text-dim); margin: -12px 0 8px;
}
.idx-result-hairline { height: 1px; background: var(--border); margin-bottom: 4px; margin-top: 6px; }

.idx-rows { display: flex; flex-direction: column; }
.idx-row {
  position: relative; display: flex; align-items: center; gap: 20px;
  padding: 18px 16px 18px 22px; border-bottom: 1px solid rgba(242,246,251,0.075);
  transition: background 0.16s ease;
}
.idx-row:hover { background: rgba(255,255,255,0.04); }
.idx-row-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0.85; }
.idx-row-code { font-family: 'DM Mono', monospace; font-size: 0.85rem; min-width: 58px; flex-shrink: 0; }
.idx-row-title { flex: 1; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.idx-row-mission {
  display: flex; align-items: center; gap: 7px; width: 180px; flex-shrink: 0;
  font-size: 0.82rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.idx-row-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.idx-row-arrow { color: var(--text-dim); font-size: 1rem; flex-shrink: 0; }
@media (max-width: 760px) {
  .idx-row { flex-wrap: wrap; }
  .idx-row-mission { width: auto; order: 3; padding-left: 78px; margin-top: -6px; }
  .idx-row-arrow { display: none; }
}
.idx-empty { text-align: center; padding: 60px 0 30px; }
.idx-empty-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.4rem; margin-bottom: 8px; }
.idx-empty-sub { font-size: 0.9rem; color: var(--text-dim); margin: 0; }

/* Dash's built-in Dropdown (react-select v1 markup) has its own light
   CSS baked in — override just enough to match the rest of the dark UI
   rather than floating as a white box (used on the Initiatives filter). */
.dash-dropdown .Select-control {
  background: var(--surface); border: 1px solid var(--border);
}
.dash-dropdown .Select-value-label, .dash-dropdown .Select-placeholder,
.dash-dropdown .Select-input > input { color: var(--text) !important; }
.dash-dropdown .Select-menu-outer {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.dash-dropdown .Select-option { background: var(--surface); color: var(--text); }
.dash-dropdown .Select-option.is-focused { background: var(--bg); }
.dash-dropdown .Select-arrow { border-color: var(--text-dim) transparent transparent; }

/* ==========================================================================
   Overview page redesign (dark, Overview route only)
   Per design_handoff_overview_page/README.md. Colours/type/spacing here are
   the handoff's own tokens, deliberately not the shared :root palette above
   — this section is visually self-contained to the "/" route.
   ========================================================================== */

/* Overview only: hide the shared light chrome and let the dark page own the
   full viewport instead of the shared shell's padding/background. Keyed on
   the Overview's root element being on screen rather than a route class on
   <body>: the route class was set by a callback that ran before Dash swapped
   the page content in, so for a few frames the outgoing page was drawn with
   the incoming page's width (Overview shrank, then the mission page grew). */
.app-main:has(#_pages_content > .mb-page) { padding: 0; max-width: none; margin: 0; }
.app-shell:has(#_pages_content > .mb-page) { background: none; }

.mb-page {
  background: #0A1626; color: #F2F6FB; min-height: 100vh;
  font-family: 'Archivo', 'Inter', sans-serif;
}
.mb-page a { text-decoration: none; color: inherit; }

/* ---- Header brand/nav visuals (layout/positioning rules are up top,
   near .mb-header) ---- */
.mb-header-brand { display: flex; align-items: center; gap: 14px; }
.mb-logo-horizontal { height: 30px; width: auto; display: block; object-fit: contain; }
.mb-nav-link {
  font-size: 0.88rem; color: rgba(242,246,251,0.72); transition: color 0.15s ease;
}
.mb-nav-link:hover, .mb-nav-link.nav-active { color: #FFC726; }
.mb-nav-dropdown { position: relative; }
.mb-nav-dropdown-summary { cursor: pointer; list-style: none; display: inline-block; }
.mb-nav-dropdown-summary::-webkit-details-marker { display: none; }
.mb-nav-dropdown-summary::after { content: " ▾"; font-size: 0.7em; }
.mb-nav-dropdown-menu {
  position: absolute; top: 28px; left: 0; z-index: 30; display: flex; flex-direction: column;
  background: #101F36; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  box-shadow: 0 20px 34px -16px rgba(0,0,0,0.6); min-width: 220px; padding: 6px 0;
}
.mb-nav-dropdown-link {
  padding: 9px 16px; font-size: 0.86rem; color: rgba(242,246,251,0.75); transition: color 0.15s ease, background 0.15s ease;
}
.mb-nav-dropdown-link:hover { color: #F2F6FB; background: rgba(255,255,255,0.06); }
.mb-cta-pill {
  font-size: 0.82rem; font-weight: 600; padding: 9px 18px; border-radius: 999px;
  background: #FFC726; color: #22160A; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mb-cta-pill:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,199,38,0.35); }
.mb-cta-pill-lg { padding: 12px 24px; font-size: 0.9rem; display: inline-block; margin-top: 20px; }

/* ---- Hero ---- */
.mb-hero { position: relative; padding: 48px 40px 32px; overflow: hidden; }
.mb-hero-glow {
  position: absolute; top: -160px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 480px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,199,38,0.16), transparent 70%);
}
.mb-hero-grid { position: relative; max-width: 1560px; margin: 0 auto; }
.mb-eyebrow {
  display: flex; align-items: center; gap: 9px; font-family: 'DM Mono', monospace;
  font-size: 0.78rem; color: rgba(242,246,251,0.65); letter-spacing: 0.04em; margin-bottom: 22px;
}
.mb-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #3CCB8E;
  box-shadow: 0 0 0 0 rgba(60,203,142,0.6); animation: mb-pulse 2.2s ease-out infinite;
}
.mb-h1 {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1.02; margin: 0 0 22px; letter-spacing: -0.01em;
}
.mb-gold { color: #FFC726; }
.mb-hero-body { font-size: 1.05rem; line-height: 1.6; color: rgba(242,246,251,0.78); max-width: 46ch; }
.mb-hero-strong { color: #F2F6FB; font-weight: 700; }

/* ---- Mission board ---- */
.mb-missions-section { max-width: 1560px; margin: 0 auto; padding: 24px 40px 64px; }
.mb-board { display: flex; gap: 14px; height: 460px; }
.mb-panel {
  position: relative; flex: 1; border-radius: 20px; padding: 26px 24px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: flex-grow 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
  box-shadow: 0 14px 30px -18px rgba(var(--panel-shadow), 0.5);
}
.mb-panel:hover {
  flex-grow: 2.4; box-shadow: 0 22px 46px -14px rgba(var(--panel-shadow), 0.85);
}
.mb-panel-numeral {
  position: absolute; top: 6px; right: 16px; font-family: 'Archivo', sans-serif;
  font-weight: 800; font-size: 6rem; line-height: 1; pointer-events: none;
}
.mb-panel-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 0.78rem; letter-spacing: 0.05em; position: relative;
}
.mb-panel-bottom { position: relative; }
.mb-panel-icon { display: block; width: 56px; height: 56px; margin-bottom: 16px; }
.mb-panel-title {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.15rem; line-height: 1.2;
  margin: 0 0 10px; max-width: 22ch;
}
.mb-panel-statement {
  font-size: 0.88rem; line-height: 1.5; margin: 0 0 14px; max-width: 34ch;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.mb-panel-cta {
  display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 8px 14px;
  border: 1px solid; border-radius: 999px; opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}
.mb-panel:hover .mb-panel-cta,
.mb-panel:focus-visible .mb-panel-cta { opacity: 1; transform: translateY(0); }
/* No hover on touch screens, so the button is always shown there. */
@media (hover: none) {
  .mb-panel-cta { opacity: 1; transform: none; }
}

/* ---- Ticker ---- */
.mb-ticker {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 12px 0; overflow: hidden; background: rgba(255,255,255,0.03);
}
.mb-ticker-paused .mb-ticker-track { animation-play-state: paused; }
.mb-ticker-toggle {
  position: absolute; right: 0; top: 0; bottom: 0; padding: 0 16px 0 28px; border: none; cursor: pointer;
  font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #F2F6FB; background: linear-gradient(90deg, rgba(10,22,38,0), #0A1626 30%);
}
.mb-ticker-toggle:focus-visible { outline: 2px solid #FFC726; outline-offset: -4px; }
.mb-ticker-track { display: flex; width: max-content; animation: mb-drift 120s linear infinite; }
.mb-ticker:hover .mb-ticker-track, .mb-ticker:focus-within .mb-ticker-track { animation-play-state: paused; }
.mb-ticker-group { display: flex; gap: 40px; padding-right: 40px; white-space: nowrap; }
.mb-ticker-group span, .mb-ticker-group a {
  font-family: 'DM Mono', monospace; font-size: 0.8rem; color: rgba(242,246,251,0.7);
}
.mb-ticker-link { color: rgba(242,246,251,0.7); transition: color 0.15s ease; }
.mb-ticker-link:hover { color: #fff; }
.mb-ticker-group .mb-ticker-code { color: #FFC726; }

/* ---- Who makes this possible ---- */
.mb-partners { max-width: 1560px; margin: 0 auto; padding: 64px 40px 88px; }
.mb-h2 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.9rem; margin: 0 0 14px; }
/* Heading on the left, names on the right in two ruled columns. */
.mb-partners-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 72px; align-items: start;
  padding: 64px 56px; border-radius: 28px;
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07);
}
.mb-partners-title { font-size: 2.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; }
.mb-partners-body { font-size: 0.98rem; line-height: 1.6; color: rgba(242,246,251,0.72); max-width: 34ch; margin: 0; }
.mb-partners-list {
  list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.1);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px;
}
.mb-partner {
  display: flex; align-items: flex-start; gap: 14px; padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 1rem; font-weight: 600; line-height: 1.4;
}
/* Centred on the first line of the name, so wrapped names keep it aligned. */
.mb-partner-marker { width: 6px; height: 6px; border-radius: 50%; background: #FFC726; flex: none; margin-top: calc(0.7em - 3px); }

/* ---- Keyframes ---- */
@keyframes mb-pulse {
  0% { box-shadow: 0 0 0 0 rgba(60,203,142,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(60,203,142,0); }
  100% { box-shadow: 0 0 0 0 rgba(60,203,142,0); }
}
@keyframes mb-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .mb-live-dot { animation: none; }
  .mb-ticker-track { animation: none; }
  .mb-ticker { overflow-x: auto; }
  .mb-ticker-toggle { display: none; }
}

@media (max-width: 980px) {
  .mb-hero { padding: 32px 20px 24px; }
  .mb-missions-section { padding: 16px 20px 48px; }
  .mb-board { flex-direction: column; height: auto; }
  .mb-panel { min-height: 130px; }
  .mb-panel:hover { flex-grow: 1; }
  .mb-panel-statement { -webkit-line-clamp: 3; }
  .mb-partners { padding: 48px 20px 64px; }
  .mb-partners-card { grid-template-columns: 1fr; gap: 32px; padding: 40px 28px; border-radius: 22px; }
  .mb-partners-title { font-size: 2.1rem; }
}
@media (max-width: 640px) {
  .mb-partners-list { grid-template-columns: 1fr; }
  .mb-partners-card { padding: 32px 20px; }
}

/* ==========================================================================
   Accessibility toolbar (components/accessibility.py + assets/accessibility.js)
   First-party equivalent of the overlay widget on missionbarbados.gov.bb.
   Two parts below: (1) the toolbar's own look, (2) the effect rules gated
   on html.a11y-* classes that the JS toggles — those need `!important`
   throughout since they're overriding real page styles, including the
   Overview page's own hardcoded literal colours (it doesn't consume the
   :root tokens below by design, see its own section further up).
   ========================================================================== */

/* ---------- Skip links ---------- */
.a11y-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: #FFC726; color: #0A1626; padding: 12px 18px;
  border-radius: 0 0 8px 0; font-weight: 700; font-size: 0.9rem; text-decoration: none;
}
.a11y-skip-link:focus { left: 0; }

/* ---------- Floating toggle button ---------- */
.a11y-toggle-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  width: 68px; height: 68px; border-radius: 50%; border: none;
  background: #1D4ED8; color: #fff; line-height: 1; cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease;
}
.a11y-toggle-icon { width: 36px; height: 36px; }
.a11y-toggle-btn:hover { transform: scale(1.06); }
.a11y-toggle-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Panel ----------
   Matches missionbarbados.gov.bb's actual panel: a solid blue header
   (icon + title + "Hide Toolbar"), then white "Module" cards each
   holding a grid of icon tiles, then a single "Skip To Content" dropdown
   and one full-width Reset button. No language switcher or vendor
   credit line — we didn't build real translation, and crediting a
   vendor whose script isn't running here would be misleading. */
.a11y-panel {
  /* top AND bottom anchored (not bottom + max-height) so the panel's own
     height always resolves to fit between them — on a short window it
     shrinks and scrolls internally instead of extending above the top of
     the viewport, which is what was clipping the header before. */
  position: fixed; right: 20px; top: 16px; bottom: 100px; z-index: 9999;
  width: min(680px, calc(100vw - 24px)); max-height: 980px;
  overflow-y: auto; background: #EEF2FA; border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55);
  color: #12202C; font-family: 'Inter', Helvetica, sans-serif; font-size: 1.25rem;
}
.a11y-panel-head {
  position: sticky; top: 0; z-index: 1; background: #1D4ED8;
  padding: 56px 32px 32px; text-align: center; color: #fff;
}
.a11y-panel-icon {
  width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%;
  background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center;
}
.a11y-panel-icon-img { width: 44px; height: 44px; }
.a11y-panel-title { font-weight: 800; font-size: 1.8rem; letter-spacing: -0.01em; }
.a11y-close-btn {
  position: absolute; top: 14px; right: 16px; background: transparent; border: none;
  color: rgba(255,255,255,0.85); font-size: 1.7rem; cursor: pointer; line-height: 1;
  padding: 4px 10px; border-radius: 6px;
}
.a11y-close-btn:hover { background: rgba(255,255,255,0.14); }
.a11y-hide-link {
  display: block; margin: 10px auto 0; background: transparent; border: none;
  color: rgba(255,255,255,0.85); font-size: 0.92rem; font-weight: 600; text-decoration: underline;
  cursor: pointer; padding: 2px 4px;
}
.a11y-hide-link:hover { color: #fff; }

.a11y-panel-body { padding: 28px 28px 4px; display: flex; flex-direction: column; gap: 24px; }
.a11y-modules-card { background: #fff; border-radius: 20px; padding: 28px 28px 30px; }
.a11y-modules-title { font-weight: 700; font-size: 1.35rem; margin-bottom: 18px; color: #12202C; }
.a11y-modules-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}

.a11y-tile {
  grid-column: span 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: #F3F5F9; border: 1px solid #E3E7EF; border-radius: 18px;
  padding: 26px 10px; cursor: pointer; text-align: center; font-family: inherit;
}
.a11y-tile:hover { background: #E9EDF6; }
.a11y-tile-icon {
  width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid #1D4ED8; color: #1D4ED8;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700;
}
.a11y-tile-label { font-size: 1.02rem; font-weight: 600; color: #33414F; line-height: 1.25; }
.a11y-tile-active { background: #DCE6FB; border-color: #1D4ED8; }
.a11y-tile-active .a11y-tile-icon { background: #1D4ED8; color: #fff; }

.a11y-tile-wide { grid-column: span 2; }
.a11y-tile-stepper { cursor: default; padding: 20px 14px; }
.a11y-stepper-row { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 10px; }
.a11y-stepper-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none; background: #1D4ED8; color: #fff;
  font-weight: 700; font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.a11y-stepper-btn:hover { background: #163B9E; }
.a11y-stepper-value { font-size: 1.1rem; font-weight: 600; color: #33414F; min-width: 66px; }

.a11y-panel-foot { padding: 8px 28px 30px; }
.a11y-skip-select-label { font-size: 1.15rem; font-weight: 700; margin-bottom: 14px; color: #12202C; }
.a11y-skip-select {
  width: 100%; padding: 17px 18px; border-radius: 12px; border: 1px solid #C7D0DC;
  background: #fff; color: #12202C; font-size: 1.15rem; margin-bottom: 20px;
}
.a11y-reset-btn {
  width: 100%; padding: 19px; border-radius: 12px; border: none;
  background: #1D4ED8; color: #fff; font-weight: 700; font-size: 1.2rem; cursor: pointer;
}
.a11y-reset-btn:hover { background: #163B9E; }

@media (max-width: 600px) {
  .a11y-panel { right: 12px; left: 12px; width: auto; bottom: 92px; }
  .a11y-toggle-btn { right: 16px; bottom: 16px; }
}

/* ---------- Hide-toolbar confirmation view ----------
   Replaces the panel's module content in place (same card, same width)
   rather than popping a separate dialog — matches the real site. */
.a11y-hide-question { font-weight: 700; font-size: 1.2rem; margin-bottom: 18px; color: #12202C; }
.a11y-hide-options { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.a11y-hide-option {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 17px 18px; border-radius: 12px; border: 1.5px solid #DDE3EC; background: #fff;
  cursor: pointer; font-family: inherit; font-size: 1.05rem; color: #33414F;
}
.a11y-hide-option:hover { background: #F6F8FB; }
.a11y-hide-option-active { border-color: #1D4ED8; color: #12202C; }
.a11y-hide-radio-dot {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C7D0DC; flex-shrink: 0;
  position: relative;
}
.a11y-hide-option-active .a11y-hide-radio-dot { border-color: #1D4ED8; }
.a11y-hide-option-active .a11y-hide-radio-dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #1D4ED8;
}
.a11y-hide-option-label { font-weight: 600; }
.a11y-hide-actions { display: flex; gap: 12px; }
.a11y-hide-cancel-btn {
  flex: 1; padding: 16px; border-radius: 10px; border: 1px solid #C7D0DC;
  background: #fff; color: #33414F; font-weight: 700; cursor: pointer; font-size: 1.02rem;
}
.a11y-hide-cancel-btn:hover { background: #F3F5F9; }
.a11y-hide-confirm-btn {
  flex: 1; padding: 16px; border-radius: 10px; border: none;
  background: #1D4ED8; color: #fff; font-weight: 700; cursor: pointer; font-size: 1.02rem;
}
.a11y-hide-confirm-btn:hover { background: #163B9E; }

/* ---------- Effects: text ----------
   Steppers: "Default" is no change, each step is 10%, up to +100% (10
   steps) and down to -50% (5 steps); below that the page is unreadable.
   Line height, letter spacing and alignment apply inside .app-shell
   (alignment only inside .app-main), so they never restyle the toolbar,
   the sign-up dialog, or the header's own flex layout.

   Font size scales the ENTIRE rendered page via transform:scale() on
   .app-shell (with a compensating width so the scaled result still
   fills the viewport), rather than a root font-size percentage. This
   codebase mixes rem and literal px font-size declarations (several
   hero/heading rules use clamp() with px bounds), so a root percentage
   only grows rem-based text and silently leaves px-based text alone —
   exactly the "some text moves, some doesn't" bug this fixes. A single
   page-wide scale is unaffected by that inconsistency: everything
   inside .app-shell grows or shrinks together, uniformly, no matter
   what unit its own font-size happens to be declared in. The
   accessibility widget itself lives outside .app-shell for exactly this
   reason (see app.py) — otherwise it would scale and reposition itself
   every time you used its own font-size control.

   Line-height scales a 1.4 "normal" baseline by the same percentage (a
   unitless line-height is relative to each element's own font-size, so
   it doesn't compound the way a repeated font-size percentage would). */
html.a11y-font-p1 .app-shell { transform: scale(1.1); transform-origin: top left; width: 90.9091%; }
html.a11y-font-p2 .app-shell { transform: scale(1.2); transform-origin: top left; width: 83.3333%; }
html.a11y-font-p3 .app-shell { transform: scale(1.3); transform-origin: top left; width: 76.9231%; }
html.a11y-font-p4 .app-shell { transform: scale(1.4); transform-origin: top left; width: 71.4286%; }
html.a11y-font-p5 .app-shell { transform: scale(1.5); transform-origin: top left; width: 66.6667%; }
html.a11y-font-p6 .app-shell { transform: scale(1.6); transform-origin: top left; width: 62.5%; }
html.a11y-font-p7 .app-shell { transform: scale(1.7); transform-origin: top left; width: 58.8235%; }
html.a11y-font-p8 .app-shell { transform: scale(1.8); transform-origin: top left; width: 55.5556%; }
html.a11y-font-p9 .app-shell { transform: scale(1.9); transform-origin: top left; width: 52.6316%; }
html.a11y-font-p10 .app-shell { transform: scale(2.0); transform-origin: top left; width: 50%; }
html.a11y-font-m1 .app-shell { transform: scale(0.9); transform-origin: top left; width: 111.1111%; }
html.a11y-font-m2 .app-shell { transform: scale(0.8); transform-origin: top left; width: 125%; }
html.a11y-font-m3 .app-shell { transform: scale(0.7); transform-origin: top left; width: 142.8571%; }
html.a11y-font-m4 .app-shell { transform: scale(0.6); transform-origin: top left; width: 166.6667%; }
html.a11y-font-m5 .app-shell { transform: scale(0.5); transform-origin: top left; width: 200%; }

html.a11y-readable-font body * {
  font-family: Arial, Helvetica, sans-serif !important;
}
html.a11y-line-p1 .app-shell * { line-height: 1.54 !important; }
html.a11y-line-p2 .app-shell * { line-height: 1.68 !important; }
html.a11y-line-p3 .app-shell * { line-height: 1.82 !important; }
html.a11y-line-p4 .app-shell * { line-height: 1.96 !important; }
html.a11y-line-p5 .app-shell * { line-height: 2.1 !important; }
html.a11y-line-p6 .app-shell * { line-height: 2.24 !important; }
html.a11y-line-p7 .app-shell * { line-height: 2.38 !important; }
html.a11y-line-p8 .app-shell * { line-height: 2.52 !important; }
html.a11y-line-p9 .app-shell * { line-height: 2.66 !important; }
html.a11y-line-p10 .app-shell * { line-height: 2.8 !important; }
html.a11y-line-m1 .app-shell * { line-height: 1.26 !important; }
html.a11y-line-m2 .app-shell * { line-height: 1.12 !important; }
html.a11y-line-m3 .app-shell * { line-height: 0.98 !important; }
html.a11y-line-m4 .app-shell * { line-height: 0.84 !important; }
html.a11y-line-m5 .app-shell * { line-height: 0.7 !important; }
html.a11y-letter-spacing .app-shell * { letter-spacing: 0.04em !important; }
html.a11y-bold-text body :not(.a11y-root):not(.a11y-root *) { font-weight: 700 !important; }
html.a11y-align-left .app-main * { text-align: left !important; justify-content: flex-start !important; }
html.a11y-align-center .app-main * { text-align: center !important; justify-content: center !important; }
html.a11y-align-right .app-main * { text-align: right !important; justify-content: flex-end !important; }
/* Several paragraphs (like the Overview hero copy) are capped at a
   readable ~46ch column, so centering/right-aligning them only shifts
   text within that narrow box rather than visibly moving it across the
   page. Let prose elements specifically use the full available width
   while aligned, so the effect is actually visible — but not `div`,
   which this codebase also uses for grid/flex layout cells, where
   forcing max-width:none would break the grid itself. */
html.a11y-align-center p, html.a11y-align-center li,
html.a11y-align-right p, html.a11y-align-right li {
  max-width: none !important;
}
/* Small flex-row badges (an icon/dot + a short label, sized to fit their
   own content, e.g. the Overview hero's "live" eyebrow) don't respond to
   text-align OR justify-content at all: text-align only ever affects
   inline content, never a block-level flex container itself, and
   justify-content only redistributes slack *inside* a box that already
   has spare width — a tightly-fit badge has none to redistribute. The
   only way to actually move a shrink-wrapped block sideways is to
   reposition its own margins. */
html.a11y-align-center .mb-eyebrow, html.a11y-align-center .mh-badges {
  margin-left: auto !important; margin-right: auto !important;
}
html.a11y-align-right .mb-eyebrow, html.a11y-align-right .mh-badges {
  margin-left: auto !important; margin-right: 0 !important;
}
html.a11y-align-left .mb-eyebrow, html.a11y-align-left .mh-badges {
  margin-left: 0 !important; margin-right: auto !important;
}

/* Big cursor: CSS has no "larger default cursor" keyword, so this swaps
   in a bigger hand-drawn arrow via an inline SVG cursor image. */
html.a11y-big-cursor,
html.a11y-big-cursor * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M4 2 L4 26 L11 20 L16 29 L20 27 L15 18 L24 18 Z' fill='black' stroke='white' stroke-width='1.5'/></svg>") 4 4, auto !important;
}

/* ---------- Effects: colour ---------- */
html.a11y-monochrome { filter: grayscale(1); }

/* High contrast: a CSS filter on .app-shell, not a per-element
   background/colour override. The earlier version forced every
   element's background to transparent and text to white, which (on a
   site already built with a dark background and light text, plus
   several gradient panels and inline-styled colours) collapsed
   everything to flat black with nothing visible — the filter approach
   boosts light/dark separation on the real design instead of erasing
   it, so gradients, cards and charts all stay visible, just punchier. */
html.a11y-contrast-high .app-shell { filter: contrast(1.5) brightness(1.05); }
html.a11y-contrast-high *:focus-visible { outline: 3px solid #FFEB3B !important; outline-offset: 2px !important; }

/* Light contrast: real token swap for every token-driven page (all
   shared chrome + Indicators/Tracker/Indicator detail/Mission pages),
   plus a matching override for the Overview page's own hardcoded classes
   so the homepage isn't left out. Mission panel gradients are left alone
   deliberately — they're a brand identity element with their own
   built-in contrast, not a legibility problem. */
html.a11y-contrast-light {
  --bg: #EEF2F6; --surface: #FFFFFF; --border: rgba(19,28,36,0.14);
  --text: #12202C; --text-muted: rgba(18,32,44,0.68); --text-dim: rgba(18,32,44,0.5);
}
html.a11y-contrast-light .mb-page,
html.a11y-contrast-light .mb-header,
html.a11y-contrast-light .mb-hero,
html.a11y-contrast-light .mb-ticker,
html.a11y-contrast-light .mb-partners {
  background: #EEF2F6 !important; color: #12202C !important;
}
html.a11y-contrast-light .mb-hero-body,
html.a11y-contrast-light .mb-partners-body { color: #3F4C58 !important; }
html.a11y-contrast-light .mb-partners-card { background: #FFFFFF !important; border-color: rgba(19,28,36,0.12) !important; }
html.a11y-contrast-light .mb-partners-list,
html.a11y-contrast-light .mb-partner { border-color: rgba(19,28,36,0.14) !important; }
html.a11y-contrast-light .mb-partner-marker { background: #B07F00 !important; }
html.a11y-contrast-light .ab-intro-body,
html.a11y-contrast-light .ab-do-title { color: #12202C !important; }
html.a11y-contrast-light .ab-do-body,
html.a11y-contrast-light .ab-source-body,
html.a11y-contrast-light .ab-stat-l,
html.a11y-contrast-light .ab-stats-asof { color: #3F4C58 !important; }
/* Darker gold so small gold text keeps a readable contrast on the light page. */
html.a11y-contrast-light .ab-eyebrow,
html.a11y-contrast-light .ab-hero-eyebrow,
html.a11y-contrast-light .ab-stat-n,
html.a11y-contrast-light .ab-mission-count,
html.a11y-contrast-light .ab-source-link { color: #8A6300 !important; }
html.a11y-contrast-light .ab-do-icon::before { background: #8A6300 !important; }
html.a11y-contrast-light .ab-card,
html.a11y-contrast-light .ab-do-card { background: #FFFFFF !important; border-color: rgba(19,28,36,0.12) !important; }
html.a11y-contrast-light .ab-stat { border-color: rgba(19,28,36,0.14) !important; }
html.a11y-contrast-light .footer-on-dark { display: none; }
html.a11y-contrast-light .footer-on-light { display: inline; }
html.a11y-contrast-light .mb-hero-glow { opacity: 0.25; }
html.a11y-contrast-light .mb-h1,
html.a11y-contrast-light .mb-h2,
html.a11y-contrast-light .mb-partner,
html.a11y-contrast-light .mb-nav-link { color: #12202C !important; }
/* Page text with a hard-coded light colour (not a token), which would
   otherwise sit near-invisible on the light background. */
html.a11y-contrast-light .terms-p,
html.a11y-contrast-light .terms-li,
html.a11y-contrast-light .ab-hero-lead,
html.a11y-contrast-light .ab-mission-tile,
html.a11y-contrast-light .ab-contact-chip,
html.a11y-contrast-light .mb-hero-strong,
html.a11y-contrast-light .mb-nav-dropdown-link { color: #12202C !important; }
html.a11y-contrast-light .ab-mission-num,
html.a11y-contrast-light .ab-note-body,
html.a11y-contrast-light .ab-contact-sub,
html.a11y-contrast-light .sub-confirm-body,
html.a11y-contrast-light .mb-eyebrow,
html.a11y-contrast-light .mb-ticker-group span,
html.a11y-contrast-light .mb-ticker-group a { color: #3F4C58 !important; }
html.a11y-contrast-light .ab-mission-tile,
html.a11y-contrast-light .mb-nav-dropdown-menu { background: #FFFFFF !important; }
/* Chart axis and label text is set inline by Plotly in the page's dark
   theme colour; !important beats the inline fill. */
html.a11y-contrast-light .js-plotly-plot .main-svg text { fill: #12202C !important; }

/* ---------- Effects: content ----------
   Highlight links: scoped to just the two real calls-to-action ("Get
   updates" and "Email me when data drops"), not every <a> on the page —
   per Moné, those are the two links worth calling out, not internal
   navigation links. */
html.a11y-highlight-links .mb-cta-pill {
  outline: 2px solid #FFC726 !important; outline-offset: 2px;
  background: rgba(255,199,38,0.16) !important; text-decoration: underline !important;
}
html.a11y-hide-images img { visibility: hidden !important; }

html.a11y-stop-animations *,
html.a11y-stop-animations *::before,
html.a11y-stop-animations *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

.a11y-reading-line-el {
  position: fixed; left: 0; right: 0; height: 3px; background: #FFC726;
  z-index: 9998; pointer-events: none; display: none;
}
.a11y-reading-mask-el {
  position: fixed; left: 0; right: 0; background: rgba(0,0,0,0.78);
  z-index: 9997; pointer-events: none; display: none;
}
.a11y-reading-mask-top { top: 0; }
.a11y-reading-mask-bottom { bottom: 0; }

/* Highlight content: a box drawn around whatever element is currently
   under the cursor (see the mousemove handler in accessibility.js) —
   not a fixed outline on a hard-coded list of elements. */
.a11y-highlight-box-el {
  position: fixed; z-index: 9996; pointer-events: none; display: none;
  border: 3px solid #FFC726; border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.45);
  transition: left 0.06s linear, top 0.06s linear, width 0.06s linear, height 0.06s linear;
}