/* ==========================================================================
   Mortgage Rate Explorer - stylesheet (Neobrutalism edition)
   --------------------------------------------------------------------------
   WHAT "NEOBRUTALISM" MEANS HERE: thick black (or white, in dark mode)
   borders around everything, flat hard-edged drop shadows with NO blur,
   and buttons that visibly "press in" (shadow shrinks, box moves) when you
   click them. It is a bold, high-contrast, very readable style - good for
   a teaching tool because nothing is ambiguous: buttons look like buttons.

   FILE MAP
   1. Color tokens (3 themes: light / dark / zen)
   2. Page basics + neobrutalist building blocks (.nb-box, shadows)
   3. Header, theme switch, full screen button, sparkle animation
   4. App layout: left sidebar of tabs + main column
   5. Filters bar
   6. Panel banners (the numbered/colored sections)
   7. Stat tiles
   8. Cards and the chart
   9. Table, insights, history, calculator, amortization
   10. Glossary / Word Bank + hover-defined terms
   11. Tooltips and the guided tour
   12. The Zen theme's own overrides (calmer chrome + type)
   13. Full-screen mode + small screens
   ========================================================================== */

/* == 1. COLOR TOKENS ====================================================== */

:root {
  color-scheme: light;

  --page: #FBF6E9;               /* warm cream page background */
  --surface-1: #FFFFFF;          /* cards */
  --surface-2: #F3EEDD;          /* recessed areas: table headers, calc cells */
  --text-primary: #111111;
  --text-secondary: #3A3A38;
  --text-muted: #6B6862;
  --grid: #E4DFCE;
  --axis: #B9B39F;

  /* --ink is the neobrutalist border/shadow color - solid black on light.
     --border-w is a single knob for how thick that border is everywhere -
     the Zen theme turns it down instead of overriding dozens of rules. */
  --ink: #111111;
  --border-w: 3px;
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow-md: 5px 5px 0 var(--ink);
  --shadow-lg: 8px 8px 0 var(--ink);

  /* The three data series - validated for color-blind readability. */
  --series-1: #2a78d6;           /* 30-year fixed  - blue */
  --series-2: #eb6834;           /* 15-year fixed  - orange */
  --series-3: #1baf7a;           /* 5/1 ARM        - aqua */

  --good: #128A3E;
  --bad: #D7263D;
  --accent: #2a78d6;
  --accent-ink: #ffffff;
  --cta: #FFD400;                /* the one loud "click me" yellow */
  --cta-ink: #111111;

  /* Section-identity colors: same across all 3 themes, on purpose - a
     highlighter color doesn't need to "match the mood lighting". Always
     paired with a number + name, so color is never the only cue. */
  --sec-0: #D9D5C4;   /* Controls - neutral, it's a tool, not a chapter */
  --sec-1: #FFD400;   /* Start Here */
  --sec-2: #46DFB1;   /* Graph */
  --sec-3: #FFB100;   /* Stats */
  --sec-4: #C792FF;   /* History */
  --sec-5: #74C7FF;   /* Calculator */
  --sec-6: #8BE28B;   /* Word Bank */
  --hi-bg: #FFF177;   /* the highlighter color for defined terms */

  --radius: 12px;
  --radius-sm: 7px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="zen"]) {
    color-scheme: dark;
    --page: #121210;
    --surface-1: #1C1B17;
    --surface-2: #262420;
    --text-primary: #FBF8F0;
    --text-secondary: #D7D3C4;
    --text-muted: #9A9689;
    --grid: #34322B;
    --axis: #46443A;
    --ink: #FBF8F0;
    --series-1: #5B9DEE;
    --series-2: #FF8555;
    --series-3: #3FCB93;
    --good: #33D17A;
    --bad: #FF6B7F;
    --accent: #5B9DEE;
    --accent-ink: #111111;
    --cta: #FFD400;
    --cta-ink: #111111;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #121210;
  --surface-1: #1C1B17;
  --surface-2: #262420;
  --text-primary: #FBF8F0;
  --text-secondary: #D7D3C4;
  --text-muted: #9A9689;
  --grid: #34322B;
  --axis: #46443A;
  --ink: #FBF8F0;
  --series-1: #5B9DEE;
  --series-2: #FF8555;
  --series-3: #3FCB93;
  --good: #33D17A;
  --bad: #FF6B7F;
  --accent: #5B9DEE;
  --accent-ink: #111111;
  --cta: #FFD400;
  --cta-ink: #111111;
}

/* == 2. PAGE BASICS + BUILDING BLOCKS ===================================== */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.01em; font-weight: 800; }
h1 { font-size: 1.2rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
.lede { font-size: 1.05rem; color: var(--text-secondary); max-width: 72ch; }

kbd {
  font: inherit;
  font-size: 0.8em;
  border: 2px solid var(--ink);
  border-radius: 5px;
  padding: 1px 6px;
  background: var(--surface-2);
  box-shadow: 2px 2px 0 var(--ink);
}

.page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 48px;
}

/* A "nb-box" is the base neobrutalist container: thick border, flat hard
   shadow, no blur, no transparency tricks. Everything boxy uses this. */
.card, .tile, .filtersbar, .panel-banner, .tabbtn, .btn, .chip,
.section-badge, .event, .calc-cell, .qf, details, .chart-card,
input[type="date"], input[type="text"], select, .tour-box {
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
}

/* == 3. HEADER ============================================================ */

.topbar {
  background: var(--surface-1);
  border-bottom: var(--border-w) solid var(--ink);
  padding: 4px 0;
}
.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { font-size: 1.7rem; }
.brand-sub { color: var(--text-secondary); font-size: 0.78rem; }

.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Buttons: the signature neobrutalist "press" interaction - shadow shrinks
   and the box shifts toward the shadow when clicked, like a real button. */
.btn {
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 14px;
  cursor: pointer;
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transform: translate(0, 0);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
  white-space: nowrap;
}
.btn:hover { filter: brightness(0.97); }
.btn:active, .btn.is-pressed {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}
.btn-accent { background: var(--cta); color: var(--cta-ink); }
.btn-ghost { background: var(--surface-1); }
.btn-big { font-size: 1rem; padding: 12px 20px; box-shadow: var(--shadow-md); }
.btn-big:active { box-shadow: 0 0 0 var(--ink); }

.btn-fullscreen[aria-pressed="true"] { background: var(--cta); color: var(--cta-ink); }

/* The "Take the Tour" buttons pulse and their little sparkle spins, so a
   first-time visitor's eye lands on them instead of having to read every
   button to find the right one. Turned off automatically for anyone whose
   OS asks for reduced motion (see the media query at the end of this file),
   and turned off deliberately by the calmer Zen theme (section 12). */
@keyframes sparkleGlow {
  0%, 100% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(255, 212, 0, 0.55); }
  50%      { box-shadow: var(--shadow-sm), 0 0 16px 5px rgba(255, 212, 0, 0.55); }
}
@keyframes sparkleTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(1.35) rotate(18deg); opacity: 0.6; }
}
.btn.sparkle { animation: sparkleGlow 1.8s ease-in-out infinite; }
.btn.sparkle:active { animation: none; }
.btn.sparkle .spark { display: inline-block; animation: sparkleTwinkle 1.1s ease-in-out infinite; }

/* Theme switch */
.segmented {
  display: inline-flex;
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.seg-btn {
  font: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  border: 0;
  background: var(--surface-1);
  color: var(--text-secondary);
  padding: 7px 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.seg-btn + .seg-btn { border-left: var(--border-w) solid var(--ink); }
.seg-btn:hover { filter: brightness(0.97); }
.seg-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.seg-label { font-size: 0.78rem; }

/* == 4. APP LAYOUT: left sidebar of tabs + main column ===================== */

/* Tabs live down the left edge instead of in a second toolbar row under the
   controls, so the top of the page reads as ONE bar (Controls), not two
   stacked ones. The sidebar stays put while the main column scrolls. */
.applayout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 20px 0;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
body.is-fullscreen .applayout { max-width: 1520px; }

.sidebar {
  flex: none;
  width: 196px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 14px;
}

.maincol {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 8px;
}

/* == 5. FILTERS BAR ========================================================= */

.filtersbar {
  width: 100%;
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: flex-start;
}

.control-group { display: flex; flex-direction: column; gap: 7px; }
.control-group--end { margin-left: auto; flex-direction: row; align-items: center; gap: 8px; align-self: center; }

.control-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  background: var(--surface-1);
  color: var(--text-secondary);
  padding: 5px 12px;
  cursor: pointer;
  min-width: 44px;
  box-shadow: var(--shadow-sm);
  transform: translate(0, 0);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.chip:hover { filter: brightness(0.97); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.custom-range { display: flex; gap: 8px; flex-wrap: wrap; }
.mini {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}
input[type="date"], select, input[type="number"] {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-2);
  padding: 5px 8px;
}

.checks { display: flex; flex-direction: column; gap: 5px; }
.check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.check input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }

.swatch { width: 16px; height: 4px; border-radius: 2px; display: inline-block; border: 1px solid var(--ink); }
.swatch-1 { background: var(--series-1); }
.swatch-2 { background: var(--series-2); }
.swatch-3 { background: var(--series-3); }

/* == 6. SECTION IDENTITY: badges + panel banners =========================== */

/* The little "0 · Controls" chip at the front of the filters bar. */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--sec-0);
  box-shadow: var(--shadow-sm);
  flex: none;
}
.badge-num {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--surface-1);
  font-weight: 800; font-size: 0.85rem; color: var(--ink);
}
.badge-title { font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: #111; }
.badge-neutral { background: var(--sec-0); }

/* The tabs: six chunky buttons stacked down the sidebar. The ACTIVE tab
   looks physically pressed in (shadow gone, box shifted) - that is the
   selection state, and it doubles as a teaching moment about how the
   buttons elsewhere on the page behave too. */
.tabbtn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-weight: 800;
  font-size: 0.88rem;
  color: #111;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transform: translate(0, 0);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.tabbtn:hover { filter: brightness(0.97); }
.tabbtn[aria-selected="true"] {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}
.tab-num {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  font-size: 0.8rem;
}
.tab-icon { font-size: 1rem; }
.tab-1 { background: var(--sec-1); }
.tab-2 { background: var(--sec-2); }
.tab-3 { background: var(--sec-3); }
.tab-4 { background: var(--sec-4); }
.tab-5 { background: var(--sec-5); }
.tab-6 { background: var(--sec-6); }

/* The banner that repeats a tab's number + color + name at the top of its
   panel, so the identity is visible while you're reading the content too. */
.panel-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  box-shadow: var(--shadow-md);
  color: #111;
}
.panel-banner h2 { color: #111; }
.panel-banner p { color: #262620; font-size: 0.85rem; font-weight: 600; }
.banner-num {
  width: 44px; height: 44px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  font-size: 1.3rem; font-weight: 800;
}
.banner-1 { background: var(--sec-1); }
.banner-2 { background: var(--sec-2); }
.banner-3 { background: var(--sec-3); }
.banner-4 { background: var(--sec-4); }
.banner-5 { background: var(--sec-5); }
.banner-6 { background: var(--sec-6); }

.tabpanel { display: flex; flex-direction: column; gap: 18px; }

/* == 7. STAT TILES ========================================================= */

.tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.tile {
  background: var(--surface-1);
  padding: 13px 15px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.tile-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tile-value {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 3px;
}
.tile-note { font-size: 0.74rem; color: var(--text-secondary); margin-top: 1px; font-weight: 600; }
.up { color: var(--bad); }
.down { color: var(--good); }

/* == 8. CARDS AND CHART ==================================================== */

.card {
  background: var(--surface-1);
  padding: 18px;
  box-shadow: var(--shadow-md);
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.card-sub { font-size: 0.82rem; color: var(--text-secondary); margin-top: 2px; font-weight: 500; }
.card-foot { font-size: 0.75rem; color: var(--text-muted); margin-top: 10px; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); }
.legend-line { width: 18px; height: 4px; border-radius: 2px; border: 1px solid var(--ink); }

.chart-wrap { position: relative; width: 100%; }
#chart { width: 100%; display: block; touch-action: none; }
#chart:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.chart-help { font-size: 0.78rem; color: var(--text-muted); margin-top: 10px; font-weight: 600; }

.chart-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 600;
}

.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--surface-1);
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 9px 11px;
  font-size: 0.8rem;
  min-width: 150px;
  z-index: 20;
}
.tt-date { color: var(--text-secondary); font-size: 0.72rem; margin-bottom: 5px; font-weight: 700; }
.tt-row { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.tt-key { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.tt-val { font-weight: 800; font-variant-numeric: tabular-nums; }
.tt-name { color: var(--text-secondary); font-size: 0.76rem; font-weight: 600; }
.tt-none { color: var(--text-muted); font-size: 0.76rem; font-style: italic; }
.tt-event {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 2px dashed var(--ink);
  font-size: 0.74rem;
  color: var(--text-secondary);
  max-width: 230px;
}

/* == 9. TABLE / HISTORY / CALCULATOR / AMORTIZATION ======================= */

.table-wrap { max-height: 420px; overflow: auto; border: 3px solid var(--ink); border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  text-align: right;
  padding: 8px 12px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  font-weight: 800;
  border-bottom: var(--border-w) solid var(--ink);
}
thead th:first-child, tbody td:first-child { text-align: left; }
tbody td {
  padding: 6px 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--grid);
  color: var(--text-secondary);
  font-weight: 600;
}
tbody tr:hover td { background: var(--surface-2); }

.insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.insights li {
  display: flex;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.insights li::before {
  content: "";
  flex: none;
  width: 5px;
  border-radius: 2px;
  background: var(--accent);
  border: 1px solid var(--ink);
  align-self: stretch;
}
.insights strong { color: var(--text-primary); font-weight: 800; }

.events { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.event {
  padding: 12px 14px;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
.event-when { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 800; }
.event-title { font-size: 0.9rem; font-weight: 800; margin: 2px 0 4px; }
.event-text { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; }
.events-empty { font-size: 0.9rem; color: var(--text-muted); font-style: italic; }

.calc-controls { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; }
.calc-field { display: flex; flex-direction: column; gap: 5px; }
.calc-field--slider { flex: 1; min-width: 220px; }
.calc-cap {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}
.calc-input { display: flex; align-items: center; gap: 4px; }
.calc-input .prefix { color: var(--text-muted); font-size: 0.95rem; font-weight: 800; }
#loanAmt { width: 140px; font-variant-numeric: tabular-nums; font-weight: 800; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.calc-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 10px; font-weight: 600; }

.calc-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; }
.calc-cell {
  padding: 12px 14px;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
.calc-cell-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 800; }
.calc-cell-rate { font-size: 0.78rem; color: var(--text-secondary); margin-top: 1px; font-weight: 600; }
.calc-cell-value { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; }
.calc-cell-sub { font-size: 0.73rem; color: var(--text-muted); font-weight: 600; }
.calc-lesson {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-left: 5px solid var(--accent);
  padding-left: 12px;
  line-height: 1.55;
  font-weight: 500;
}
.calc-lesson strong { color: var(--text-primary); font-weight: 800; }

.amort-select-wrap select { font-weight: 700; box-shadow: var(--shadow-sm); }

/* == 10. GLOSSARY / WORD BANK + hover-defined terms ========================= */

.quickfacts { display: flex; gap: 14px; flex-wrap: wrap; margin: 16px 0; }
.qf { flex: 1; min-width: 130px; padding: 12px 14px; background: var(--surface-2); box-shadow: var(--shadow-sm); text-align: center; }
.qf-num { font-size: 1.7rem; font-weight: 800; color: var(--accent); }
.qf-label { font-size: 0.75rem; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }

.stepslist { margin: 10px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem; color: var(--text-secondary); }
.stepslist li { line-height: 1.5; }

.term-demo { background: var(--hi-bg); color: #111; padding: 0 4px; border-radius: 3px; border-bottom: 2px dotted #111; font-weight: 700; }

/* Any word wrapped in .term gets the "highlighter" treatment and reuses the
   same tooltip system as the "?" buttons - hover or Tab+focus to read it. */
.term {
  background: var(--hi-bg);
  color: #111;
  padding: 0 4px;
  border-radius: 3px;
  cursor: help;
  font-weight: 800;
  border-bottom: 2px dotted #111;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.term:hover, .term:focus-visible { background: #FFE066; outline: 2px solid #111; outline-offset: 1px; }

.glossary-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.jump-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.82rem;
  background: var(--surface-2);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.jump-btn:hover { background: var(--hi-bg); color: #111; }

.glossary { display: flex; flex-direction: column; gap: 10px; }
.gloss-entry {
  padding: 12px 14px;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 90px;
}
.gloss-term { font-weight: 800; font-size: 0.95rem; }
.gloss-letter { color: var(--accent); }
.gloss-def { font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }

.footer { color: var(--text-muted); font-size: 0.78rem; line-height: 1.6; padding-top: 6px; font-weight: 500; }
.footer-fine { margin-top: 4px; opacity: 0.85; }

/* == 11. TOOLTIPS AND TOUR ================================================= */

.tip {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 10px;
  line-height: 1;
  cursor: help;
  padding: 0;
  flex: none;
  font-family: var(--font);
  font-weight: 800;
}
.tip::after { content: "?"; }
.tip:hover, .tip:focus-visible { background: var(--cta); color: #111; }

.tipbubble {
  position: fixed;
  z-index: 100;
  max-width: 290px;
  background: var(--text-primary);
  color: var(--page);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
  padding: 10px 12px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: 4px 4px 0 var(--ink);
  pointer-events: none;
}
.tour { position: fixed; inset: 0; z-index: 90; }
.tour-spot {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(17, 17, 17, 0.65);
  border: 4px solid var(--cta);
  transition: all 0.25s ease;
  pointer-events: none;
}
.tour-box {
  position: absolute;
  width: min(360px, calc(100vw - 32px));
  background: var(--surface-1);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  transition: all 0.25s ease;
}
.tour-step { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 800; }
.tour-box h3 { margin: 3px 0 6px; }
.tour-box p:not(.tour-step) { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; font-weight: 500; }
.tour-nav { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tour-nav .spacer { flex: 1; }

/* == 12. THE ZEN THEME ====================================================== */

/* Zen swaps every token the neobrutalist chrome reads from - so it is a
   genuinely different feel, not just a recolor - and adds a few rules of
   its own on top, aimed at anyone who finds hard edges, tight text, or
   all-capitals hard going (that covers a lot of dyslexia and dysgraphia
   guidance, and it just reads as "calmer" to everyone else too):
     - soft lavender surfaces instead of stark cream/black-on-white
     - thin, low-contrast borders and blurred shadows instead of hard
       black offsets
     - Atkinson Hyperlegible, a typeface built for low-vision readability,
       at extra line-height and letter-spacing
     - no ALL-CAPS labels (capitals are measurably slower to read)
     - no pulsing "Take the Tour" button - Zen is the one theme where we
       don't try to grab your eye
   The data-series colors and the Word Bank highlight color are left as
   theme variables too, so they inherit automatically - see section 1. */
:root[data-theme="zen"] {
  color-scheme: light;
  --page: #F2EFFA;
  --surface-1: #FCFBFF;
  --surface-2: #EAE5F6;
  --text-primary: #2E2B3D;
  --text-secondary: #524C68;
  --text-muted: #837CA0;
  --grid: #E3DEF2;
  --axis: #CBC3E4;

  --ink: #C3BADC;
  --border-w: 1.5px;
  --shadow-sm: 0 2px 8px rgba(72, 61, 118, 0.12);
  --shadow-md: 0 5px 18px rgba(72, 61, 118, 0.14);
  --shadow-lg: 0 10px 30px rgba(72, 61, 118, 0.16);

  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;

  --good: #128A3E;
  --bad: #D7263D;
  --accent: #7367C6;
  --accent-ink: #ffffff;
  --cta: #F6CA6E;
  --cta-ink: #2E2B3D;

  --sec-0: #E3DEF2;
  --sec-1: #FBE5A8;
  --sec-2: #BCEBDA;
  --sec-3: #FBD7AC;
  --sec-4: #DCCCF3;
  --sec-5: #C3DFF4;
  --sec-6: #CBE9C6;
  --hi-bg: #FBEFB8;

  --radius: 18px;
  --radius-sm: 12px;
  --font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Extra breathing room in the type itself - not just the layout. */
:root[data-theme="zen"] body { line-height: 1.8; letter-spacing: 0.01em; word-spacing: 0.05em; }
:root[data-theme="zen"] .lede,
:root[data-theme="zen"] .insights li,
:root[data-theme="zen"] .event-text,
:root[data-theme="zen"] .gloss-def,
:root[data-theme="zen"] .calc-lesson,
:root[data-theme="zen"] p { line-height: 1.75; }

/* No shouting labels - swap every ALL-CAPS micro-label for normal case. */
:root[data-theme="zen"] .control-label,
:root[data-theme="zen"] .badge-title,
:root[data-theme="zen"] .tile-label,
:root[data-theme="zen"] .event-when,
:root[data-theme="zen"] .calc-cap,
:root[data-theme="zen"] .calc-cell-label,
:root[data-theme="zen"] .qf-label,
:root[data-theme="zen"] .tour-step,
:root[data-theme="zen"] thead th {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Zen is the one theme that never tries to grab your eye. */
:root[data-theme="zen"] .btn.sparkle { animation: none; box-shadow: var(--shadow-sm); }
:root[data-theme="zen"] .btn.sparkle .spark { animation: none; }

/* A softer dimming scrim behind the guided tour, to match. */
:root[data-theme="zen"] .tour-spot { box-shadow: 0 0 0 9999px rgba(46, 43, 61, 0.35); }

/* == 13. FULL-SCREEN MODE + SMALL SCREENS ================================== */

/* This tool is built for desktop, and especially for full-screen desktop -
   the chart and tiles get a bit more room to breathe when you press the
   Full Screen button, instead of staying capped at a laptop-friendly width.
   (.applayout's own full-screen widening is set alongside it, in section 4.) */
body.is-fullscreen .topbar-inner { max-width: 1520px; }
body.is-fullscreen .tile-value { font-size: 2.05rem; }
body.is-fullscreen .card { padding: 22px; }

/* Below desktop width the sidebar can't afford to sit beside the content,
   so it becomes a horizontal scrolling strip above it instead - the same
   chip-row layout the tabs used before they moved to the side. */
@media (max-width: 900px) {
  .applayout { flex-direction: column; padding: 16px 16px 0; }
  .sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    position: static;
    padding-bottom: 2px;
  }
  .tabbtn { width: auto; flex: none; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .control-group--end { margin-left: 0; width: 100%; }
}

@media (max-width: 560px) {
  .applayout { padding: 16px 16px 0; }
  .maincol { padding-bottom: 32px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile-value { font-size: 1.5rem; }
  .seg-label { display: none; }
  .filtersbar { gap: 16px; }
  .brand-sub { display: none; }
  h1 { font-size: 1.05rem; }
  .tabbtn .tab-name { display: none; }
}

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