/* ==========================================================================
   Business Operating Manual: Design System
   Admin-dashboard shell (fixed dark sidebar, top bar, shadowed panel cards)
   in the spirit of Gentelella, combined with richer editorial content
   patterns (hero banners, stat tiles, insight panels, timelines, diagram
   cards, pull quotes, exercise cards) for the actual chapter pages.
   Palette: deep teal, warm gold, brick red-orange, leaf green.
   ========================================================================== */

:root {
  --teal: #2A6F6F;
  --teal-dark: #1d4f4f;
  --teal-light: #DCEBEA;
  --gold: #E8A33D;
  --gold-dark: #a86f22;
  --gold-light: #FBEDD8;
  --brick: #a8402c;
  --brick-dark: #7a2c1c;
  --brick-light: #F5DCD6;
  --green: #4C9A6A;
  --green-dark: #357048;
  --green-light: #DEF0E4;
  --brown: #5b3a10;

  /* Theme-safe text variants of the brand colors: always WCAG AA (4.5:1+)
     against --bg-panel / --bg-subtle in both light and dark mode. Use these
     (not the raw brand colors) whenever a brand color is the TEXT color. */
  --teal-text: #1d4f4f;
  --gold-text: #8a5a13;
  --brick-text: #7a2c1c;
  --green-text: #2c5c3f;

  --navy: #17262b;
  --navy-2: #1f343b;
  --navy-3: #27424a;

  --bg: #eef1f2;
  --bg-panel: #ffffff;
  --bg-subtle: #f5f6f7;
  --border: #e2e6e7;
  --border-strong: #cfd6d8;
  --text: #1c2426;
  --text-muted: #5c6a6d;
  --text-faint: #8b9698;
  --link: var(--teal);
  --link-hover: var(--teal-dark);
  --shadow-sm: 0 1px 2px rgba(20, 30, 30, 0.06);
  --shadow: 0 2px 10px rgba(20, 30, 30, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 30, 30, 0.16);
  --radius: 14px;
  --radius-sm: 8px;
  --code-bg: #eef2f1;

  --sidebar-text: #c3d2d2;
  --sidebar-text-muted: #83999a;
  --sidebar-active-bg: rgba(232, 163, 61, 0.16);
  --sidebar-active-text: var(--gold);

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Type scale: use these names instead of introducing one-off font sizes.
     Caption 12 | label 13 | small 14 | body 16 | lead 18 |
     section 21 | chapter 28 | page 36. */
  --text-caption: 0.75rem;
  --text-label: 0.8125rem;
  --text-small: 0.875rem;
  --text-body: 1rem;
  --text-lead: 1.125rem;
  --text-section: 1.3125rem;
  --text-chapter: 1.75rem;
  --text-page: clamp(2rem, 4vw, 3rem);

  --sidebar-w: 264px;
  --topbar-h: 64px;

  /* Investment-table look (funding-structures-table.html reference): a
     fixed dark-navy header bar with light cyan labels, regardless of the
     overall site theme, so it reads the same in light and dark mode. */
  --table-header-bg: var(--navy-3);
  --table-header-text: #7eb8c9;
  --table-row-hover: rgba(20, 30, 30, 0.035);
  --table-highlight-bg: rgba(232, 163, 61, 0.07);
  --table-highlight-border: rgba(232, 163, 61, 0.22);
  --table-highlight-hover: rgba(232, 163, 61, 0.11);
}

[data-theme="dark"] {
  --bg: #12181a;
  --bg-panel: #1a2224;
  --bg-subtle: #202a2c;
  --border: #2b373a;
  --border-strong: #3a4749;
  --text: #eef2f2;
  --text-muted: #a7b3b4;
  --text-faint: #728082;
  --link: #6fc7c7;
  --link-hover: #8fd6d6;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 2px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 44px rgba(0,0,0,0.5);
  --code-bg: #202a2c;
  --navy: #0d1417;
  --navy-2: #121c1f;
  --navy-3: #17262b;
  --teal-light: rgba(42,111,111,0.24);
  --gold-light: rgba(232,163,61,0.20);
  --brick-light: rgba(168,64,44,0.22);
  --green-light: rgba(76,154,106,0.22);

  /* Theme-safe text variants: light, high-contrast tints against dark backgrounds */
  --teal-text: #8fe0e0;
  --gold-text: #f3c675;
  --brick-text: #f3ab93;
  --green-text: #8fe0ae;

  --table-row-hover: rgba(255, 255, 255, 0.025);
  --table-highlight-bg: rgba(232, 163, 61, 0.05);
  --table-highlight-border: rgba(232, 163, 61, 0.16);
  --table-highlight-hover: rgba(232, 163, 61, 0.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
img, svg { max-width: 100%; height: auto; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.icon-lg { width: 26px; height: 26px; }
.icon-sm { width: 14px; height: 14px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 400;
  background: var(--teal); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Reading progress ---------- */
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--gold); z-index: 300; width: 0%; transition: width 0.1s linear; }

/* ---------- Pjax navigation loading bar ---------- */
.pjax-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--teal), var(--gold)); z-index: 500; opacity: 0; pointer-events: none; }

/* ==========================================================================
   APP SHELL: sidebar + topbar + main
   ========================================================================== */

/* Cross-document view transitions: on browsers that support it (Chromium),
   this makes the sidebar and topbar visually persist across a full page
   navigation (double-clicking file:// links never gets pjax's no-reload
   upgrade) instead of a hard flash-and-rebuild. Ignored elsewhere, so it's
   a free progressive enhancement with no fallback needed. */
@view-transition {
  navigation: auto;
}
.sidebar { view-transition-name: bom-sidebar; }
.topbar { view-transition-name: bom-topbar; }

.app-shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w); flex: none; min-height: 100vh;
  background: linear-gradient(180deg, var(--navy), var(--navy-2));
  position: fixed; top: 0; left: 0; height: 100vh; z-index: 220;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  box-shadow: 2px 0 16px rgba(0,0,0,0.18);
}
.app-shell.sidebar-open .sidebar { transform: translateX(0); }
.app-shell.sidebar-open .main-col { margin-left: var(--sidebar-w); }
#sidebar-mount { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sidebar-logo {
  display: flex; align-items: center; gap: 10px; padding: 0 20px; flex: none;
  height: var(--topbar-h);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-logo .logo-badge {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, var(--gold), var(--brick));
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.sidebar-logo .logo-text { color: #fff; font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.sidebar-logo .logo-sub { color: var(--sidebar-text-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 1px; }

.sidebar-scroll { flex: 1; overflow-y: auto; padding: 10px 10px 20px; }
.sidebar-end-spacer { height: 60px; }
.sidebar-scroll::-webkit-scrollbar { width: 5px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-slider { position: absolute; inset: 0; background: rgba(255,255,255,0.2); border-radius: 22px; cursor: pointer; transition: background 0.2s ease; }
.switch-slider::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s ease; }
.switch input:checked + .switch-slider { background: var(--teal); }
.switch input:checked + .switch-slider::before { transform: translateX(16px); }
.switch input:focus-visible + .switch-slider { outline: 2px solid var(--gold); outline-offset: 2px; }

.sidebar-section-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--sidebar-text-muted); padding: 16px 10px 6px;
}
.sidebar-link, .vol-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; margin: 1px 0; border-radius: var(--radius-sm);
  color: var(--sidebar-text); font-size: 13.5px; background: none; border: none;
  text-align: left; cursor: pointer; font-family: inherit;
}
.sidebar-link:hover, .vol-toggle:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }
.sidebar-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); font-weight: 600; }
.sidebar-link .icon, .vol-toggle .icon { flex: none; opacity: 0.85; }
.vol-toggle .chev { margin-left: auto; transition: transform 0.15s ease; width: 14px; height: 14px; opacity: 0.6; }
.vol-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.vol-toggle .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; margin-left: 2px; }
.vol-chapters { list-style: none; margin: 2px 0 6px; padding: 0 0 0 20px; display: none; }
.vol-chapters.open { display: block; }
.vol-chapters .sidebar-link { font-size: 12.5px; padding: 6px 10px; color: var(--sidebar-text-muted); }
.vol-chapters .sidebar-link.active { color: var(--sidebar-active-text); font-weight: 600; }
.soon-tag {
  margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(255,255,255,0.08); color: var(--sidebar-text-muted); padding: 2px 7px; border-radius: 20px;
}

.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(6,10,11,0.55); z-index: 210;
}
.sidebar-overlay.open { display: block; }

/* ---------- Main column ---------- */
.main-col { flex: 1; min-width: 0; margin-left: 0; display: flex; flex-direction: column; min-height: 100vh; transition: margin-left 0.22s ease; }

/* ---------- Topbar ---------- */
.topbar {
  height: var(--topbar-h); flex: none; position: sticky; top: 0; z-index: 150;
  background: var(--bg-panel); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
  box-shadow: var(--shadow-sm);
}
.topbar-menu-btn {
  display: flex; width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-subtle); color: var(--text); align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.topbar-breadcrumb { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.topbar-breadcrumb a { color: var(--text-muted); }
.topbar-breadcrumb a:hover { color: var(--teal-text); }
.topbar-breadcrumb .sep { opacity: 0.5; }
.topbar-breadcrumb .current { color: var(--text); font-weight: 600; }

.topbar-search { flex: 1; max-width: 420px; margin-left: auto; position: relative; }
.topbar-search input {
  width: 100%; padding: 9px 14px 9px 36px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--bg-subtle); color: var(--text); font-size: 13.5px;
}
.topbar-search input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.topbar-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: 0.5; pointer-events: none; }
.topbar-search .kbd-hint {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10.5px; color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; pointer-events: none;
}
.topbar-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.icon-btn-wrap { position: relative; }
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid transparent; background: none;
  color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative;
}
.icon-btn:hover { background: var(--bg-subtle); color: var(--text); }
.icon-btn .badge-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--brick); border: 2px solid var(--bg-panel); }

/* ---------- Dropdown panels (search/recent/bookmarks) ---------- */
.dropdown-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 340px; background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 440px; overflow-y: auto; display: none; z-index: 250;
}
.dropdown-panel.open { display: block; }
.dropdown-panel.wide { width: 420px; }

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */
.content-area { flex: 1; padding: 26px 30px 60px; max-width: 1240px; width: 100%; margin: 0 auto; }
.content-area.narrow { max-width: 900px; }

.page-header { margin-bottom: 22px; }
.page-header-split { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px; margin-bottom: 22px; }
.page-header-split .page-header { margin-bottom: 0; }
.page-header-media { flex: none; display: flex; align-items: center; justify-content: center; }
.page-header-media img { display: block; width: 200px; max-width: 100%; height: auto; }
.page-eyebrow { font-size: var(--text-caption); font-weight: 700; color: var(--teal-text); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px; }
h1.page-title { font-family: var(--font-display); font-size: var(--text-page); line-height: 1.2; margin: 0 0 10px; letter-spacing: -0.01em; }
h1.page-title em, .hero-inner h1 em, .hero-banner h1 em, .learning-hero h1 em, .learning-intro h1 em, .panel-header h2 em, .panel-header h3 em, .learning-section-heading h2 em, .scene-card h3 em, .action-card h2 em { color: var(--gold-text); font-style: normal; }
em { color: var(--brick-text); }
.page-subtitle { font-size: var(--text-lead); color: var(--text-muted); margin: 0 0 14px; max-width: 70ch; }
.page-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.meta-pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted);
  background: var(--bg-subtle); border: 1px solid var(--border); padding: 4px 11px; border-radius: 20px;
}
.meta-pill.difficulty-beginner { color: var(--green-text); border-color: var(--green); }
[data-theme="dark"] .meta-pill.difficulty-beginner { color: #7fd19a; }

/* ---------- Panels / cards ---------- */
.panel {
  background: var(--bg-panel); border: 1px solid var(--border); border-top: 4px solid var(--teal); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 22px; overflow: hidden;
}
/* Rotates in step with the section-num badges already hand-authored inside
   most panel headers (num-teal, num-gold, num-brick, num-green, repeat) --
   confirmed that exact 4-cycle across multiple chapters -- so the border
   color agrees with the badge instead of fighting it. Purely structural, so
   it applies to every panel on the site with no content-file changes. */
.page-main > .panel:nth-of-type(4n+2) { border-top-color: var(--gold); }
.page-main > .panel:nth-of-type(4n+3) { border-top-color: var(--brick); }
.page-main > .panel:nth-of-type(4n+4) { border-top-color: var(--green); }
.panel-header {
  display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.panel-header .icon { color: var(--teal-text); }
.panel-header h2, .panel-header h3 { margin: 0; font-size: var(--text-section); font-weight: 700; font-family: var(--font-display); color: var(--text); }
.panel-header .walk-it-link {
  margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--teal-text); background: var(--teal-light);
  padding: 6px 12px; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.panel-header .walk-it-link:hover { background: var(--teal); color: #fff; }
.panel-header .walk-it-link .icon { color: inherit; width: 14px; height: 14px; }
.panel-body { padding: 20px; }
.panel-body.pad-lg { padding: 26px 28px; }

/* ---------- Hero banner (image + gradient + text) ---------- */
.hero-banner {
  position: relative; border-radius: var(--radius); overflow: hidden; margin-bottom: 24px;
  min-height: 300px; display: flex; align-items: flex-end; box-shadow: var(--shadow-lg);
}
.hero-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-banner .hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(23,38,43,0.94) 0%, rgba(23,38,43,0.72) 45%, rgba(23,38,43,0.2) 100%);
}
.hero-banner .hero-inner { position: relative; z-index: 2; padding: 40px 44px; max-width: 640px; color: #fff; }
.hero-banner .hero-eyebrow2 {
  font-size: 12px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.hero-banner .hero-eyebrow2::before { content: ''; width: 22px; height: 2px; background: var(--gold); display: block; }
.hero-banner h1 { font-family: var(--font-display); font-size: var(--text-chapter); line-height: 1.18; margin: 0 0 12px; color: #fff; }
.hero-banner p { font-size: var(--text-body); color: rgba(255,255,255,0.86); line-height: 1.6; margin: 0 0 20px; max-width: 52ch; }
.hero-banner .hero-btn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: #1c1300; font-weight: 700;
  padding: 11px 22px; border-radius: 10px; font-size: 13.5px; border: none; cursor: pointer;
}
.hero-banner .hero-btn:hover { background: #f0b459; text-decoration: none; }

/* ---------- Stat tiles ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.stat-tile {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; display: flex; align-items: center; gap: 14px;
}
.stat-tile .stat-icon {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none;
}
.stat-tile .stat-icon .icon { width: 22px; height: 22px; }
.stat-tile.tile-teal .stat-icon { background: var(--teal-light); color: var(--teal-text); }
.stat-tile.tile-gold .stat-icon { background: var(--gold-light); color: var(--gold-text); }
.stat-tile.tile-brick .stat-icon { background: var(--brick-light); color: var(--brick-text); }
.stat-tile.tile-green .stat-icon { background: var(--green-light); color: var(--green-text); }
.stat-tile .stat-value { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.stat-tile .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ---------- Section label (colored badge, no decorative dash) ---------- */
.section-label {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 14px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px; background: var(--teal-light); color: var(--teal-text);
}
.section-label .icon { width: 14px; height: 14px; }
.section-label.label-gold { background: var(--gold-light); color: var(--gold-text); }
.section-label.label-brick { background: var(--brick-light); color: var(--brick-text); }
.section-label.label-green { background: var(--green-light); color: var(--green-text); }

/* ---------- Section number badge (used inside panel headers) ---------- */
.section-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%; font-size: 12.5px; font-weight: 800; color: #fff;
}
.section-num.num-teal { background: var(--teal); }
.section-num.num-gold { background: var(--gold-dark); }
.section-num.num-brick { background: var(--brick); }
.section-num.num-green { background: var(--green-dark); }

/* ---------- Module / dashboard cards grid ---------- */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 6px; }
.module-card {
  background: linear-gradient(135deg, var(--bg-panel) 0%, var(--teal-light) 130%);
  border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; color: var(--text); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.module-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; }
.module-card .m-icon {
  width: 42px; height: 42px; border-radius: 11px; background: var(--teal-light); color: var(--teal-text);
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
/* 9 gradient variants, assigned at random per page load by
   initRandomCardGradients() in interactive.js (a .card-grad-N class on each
   card) so the same grid doesn't look identical every visit. Each still
   blends FROM the neutral panel color TOWARD one or two light brand tints
   pushed past the card's edge, so text contrast never moves off what's
   already calibrated against --bg-panel. Plain :nth-child CSS is the
   fallback for the rare case JS hasn't run yet. */
.module-card:nth-child(9n+2), .module-card.card-grad-2 { border-top-color: var(--gold); background: linear-gradient(135deg, var(--bg-panel) 0%, var(--gold-light) 130%); }
.module-card:nth-child(9n+2) .m-icon, .module-card.card-grad-2 .m-icon { background: var(--gold-light); color: var(--gold-text); }
.module-card:nth-child(9n+3), .module-card.card-grad-3 { border-top-color: var(--brick); background: linear-gradient(135deg, var(--bg-panel) 0%, var(--brick-light) 130%); }
.module-card:nth-child(9n+3) .m-icon, .module-card.card-grad-3 .m-icon { background: var(--brick-light); color: var(--brick-text); }
.module-card:nth-child(9n+4), .module-card.card-grad-4 { border-top-color: var(--green); background: linear-gradient(135deg, var(--bg-panel) 0%, var(--green-light) 130%); }
.module-card:nth-child(9n+4) .m-icon, .module-card.card-grad-4 .m-icon { background: var(--green-light); color: var(--green-text); }
.module-card:nth-child(9n+5), .module-card.card-grad-5 { border-top-color: var(--teal); background: linear-gradient(135deg, var(--teal-light) 0%, var(--bg-panel) 55%, var(--gold-light) 140%); }
.module-card:nth-child(9n+5) .m-icon, .module-card.card-grad-5 .m-icon { background: var(--gold-light); color: var(--gold-text); }
.module-card:nth-child(9n+6), .module-card.card-grad-6 { border-top-color: var(--gold); background: linear-gradient(135deg, var(--gold-light) 0%, var(--bg-panel) 55%, var(--brick-light) 140%); }
.module-card:nth-child(9n+6) .m-icon, .module-card.card-grad-6 .m-icon { background: var(--brick-light); color: var(--brick-text); }
.module-card:nth-child(9n+7), .module-card.card-grad-7 { border-top-color: var(--brick); background: linear-gradient(135deg, var(--brick-light) 0%, var(--bg-panel) 55%, var(--green-light) 140%); }
.module-card:nth-child(9n+7) .m-icon, .module-card.card-grad-7 .m-icon { background: var(--green-light); color: var(--green-text); }
.module-card:nth-child(9n+8), .module-card.card-grad-8 { border-top-color: var(--green); background: linear-gradient(135deg, var(--green-light) 0%, var(--bg-panel) 55%, var(--teal-light) 140%); }
.module-card:nth-child(9n+8) .m-icon, .module-card.card-grad-8 .m-icon { background: var(--teal-light); color: var(--teal-text); }
.module-card:nth-child(9n+9), .module-card.card-grad-9 { border-top-color: var(--gold); background: linear-gradient(160deg, var(--bg-panel) 0%, var(--teal-light) 60%, var(--brick-light) 140%); }
.module-card:nth-child(9n+9) .m-icon, .module-card.card-grad-9 .m-icon { background: var(--gold-light); color: var(--gold-text); }
.module-card h3 { font-size: 15px; margin: 0 0 4px; }
.module-card p { font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; }
.module-card .m-progress-bar { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.module-card .m-progress-bar > span { display: block; height: 100%; background: var(--green); }
.module-card .m-meta { font-size: 11px; color: var(--text-faint); margin-top: 6px; }

/* ---------- Quicklinks ---------- */
.quicklink-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.quicklink {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 20px; padding: 9px 16px;
  font-size: 13px; color: var(--text); background: var(--bg-panel); box-shadow: var(--shadow-sm);
}
.quicklink:hover { border-color: var(--teal); color: var(--teal-text); text-decoration: none; }
.quicklink .icon { color: var(--gold-text); }

/* ---------- Prose (chapter body content) ---------- */
.prose h2 { font-family: var(--font-display); font-size: var(--text-chapter); margin: 34px 0 14px; scroll-margin-top: calc(var(--topbar-h) + 14px); color: var(--teal-text); }
.prose h3 { font-size: var(--text-lead); margin: 26px 0 10px; scroll-margin-top: calc(var(--topbar-h) + 14px); color: var(--text); }
.prose code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.92em; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 24px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--brick-text); font-weight: 700; }
.prose em, p em { color: var(--brick-text); font-style: italic; }
.prose a, .related-glossary-line a, .reference-node a { color: var(--gold-text); }
.prose a:hover, .related-glossary-line a:hover, .reference-node a:hover { color: var(--gold); }

/* ---------- Tables (funding-structures-table.html reference design) ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 20px; border: 1px solid var(--border); border-radius: var(--radius); }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table th, table.data-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.55; }
table.data-table thead tr { background: var(--table-header-bg); }
table.data-table thead th {
  font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--table-header-text); position: sticky; top: 0; cursor: pointer; user-select: none; white-space: nowrap;
  border-bottom: 2px solid rgba(126, 184, 201, 0.25);
}
table.data-table thead th:first-child { color: #ffffff; min-width: 180px; }
table.data-table thead th:hover { color: #ffffff; }
table.data-table thead th .sort-arrow { margin-left: 4px; opacity: 0.55; font-size: 11px; }
table.data-table tbody td { color: var(--text-muted); }
table.data-table tbody tr:hover { background: var(--table-row-hover); }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody td:first-child { color: var(--text); font-weight: 600; font-size: 13px; }
table.data-table tbody tr.row-highlight td { background: var(--table-highlight-bg); border-bottom-color: var(--table-highlight-border); }
table.data-table tbody tr.row-highlight:hover td { background: var(--table-highlight-hover); }
table.data-table tbody tr.row-highlight td:first-child { color: var(--gold-text); }
.table-filter { margin-bottom: 8px; }
.table-filter input {
  width: 100%; max-width: 260px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-panel); color: var(--text); font-size: 13px;
}

/* ---------- Table pill badges / verdicts / risk levels ----------
   Opt-in utility classes matching the reference design, for table cells
   that call out a yes/no/conditional fact, a verdict, or a risk level. */
.tpill { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; letter-spacing: 0.02em; }
.tpill-yes { background: var(--green-light); color: var(--green-text); border: 1px solid var(--green); }
.tpill-no { background: var(--brick-light); color: var(--brick-text); border: 1px solid var(--brick); }
.tpill-dep, .tpill-now { background: var(--gold-light); color: var(--gold-text); border: 1px solid var(--gold); }
.tpill-cell { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.tpill-cell span:last-child { font-size: 11px; color: var(--text-faint); }

.verdict { font-size: 12.5px; line-height: 1.5; }
.verdict-strong { color: var(--green-text); font-weight: 600; }
.verdict-medium { color: var(--gold-text); font-weight: 500; }
.verdict-poor { color: var(--text-faint); }

/* Scoped to table.data-table td so these beat the plainer
   "table.data-table tbody td { color: var(--text-muted) }" rule above --
   same class applied bare would lose that specificity fight. */
table.data-table td.risk-high { color: var(--brick-text); }
table.data-table td.risk-med { color: var(--gold-text); }
table.data-table td.risk-low { color: var(--green-text); }
table.data-table td.risk-none { color: var(--text-faint); }

/* ---------- Callouts ---------- */
.callout { border-radius: var(--radius); padding: 16px 18px; margin: 0 0 20px; border: 1px solid var(--border); border-left-width: 4px; }
.callout-title { font-weight: 700; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.callout p:last-child { margin-bottom: 0; }
.callout-info { border-left-color: var(--teal); background: var(--teal-light); }
.callout-warning { border-left-color: var(--gold-dark); background: var(--gold-light); }
.callout-success { border-left-color: var(--green); background: var(--green-light); }
.callout-definition { border-left-color: var(--brick); background: var(--brick-light); }

/* ---------- Decision hero pattern ----------
   Shared components for the "comparison chapter" treatment: a gradient hero
   banner stating the chapter's decision rule, a 4-card fact snapshot row, an
   N-card option/type grid, and a mini-case grid for cross-industry examples.
   Originally authored per-chapter as scoped <style> blocks (volume-03,
   chapter-08 first); consolidated here once the same four components were
   being reused across enough chapters that per-page duplication cost more
   than it saved. Chapter content files now reference these class names
   directly with no local <style> block needed. */
.decision-hero {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: 24px; align-items: stretch;
  margin: 0 0 18px; padding: 30px; border-radius: 8px; color: #fff;
  background: linear-gradient(135deg, rgba(23,38,43,0.98), rgba(42,111,111,0.93) 58%, rgba(91,58,16,0.92));
  box-shadow: var(--shadow-lg);
}
.decision-hero h2 { margin: 0 0 12px; font-family: var(--font-display); font-size: 27px; line-height: 1.2; color: #fff; }
.decision-hero p { margin: 0; max-width: 72ch; color: rgba(255,255,255,0.86); line-height: 1.65; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--gold); font-size: 12px; font-weight: 800; }
.hero-filter-stack { display: grid; gap: 10px; align-content: center; }
.hero-filter {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 12px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; background: rgba(255,255,255,0.08);
}
.hero-filter .icon { width: 22px; height: 22px; color: var(--gold); }
.hero-filter span { display: block; margin-bottom: 3px; color: rgba(255,255,255,0.68); font-size: 11px; font-weight: 800; }
.hero-filter strong { display: block; color: #fff; font-size: 14px; line-height: 1.32; }

.fact-snapshot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 26px; }
.snapshot-card { border: 1px solid var(--border); border-top: 4px solid var(--teal); border-radius: 8px; background: var(--bg-panel); padding: 14px 15px; box-shadow: var(--shadow-sm); }
.snapshot-card:nth-child(2) { border-top-color: var(--gold); }
.snapshot-card:nth-child(3) { border-top-color: var(--green); }
.snapshot-card:nth-child(4) { border-top-color: var(--brick); }
.snapshot-card .icon { width: 22px; height: 22px; margin-bottom: 8px; color: var(--teal-text); }
.snapshot-card:nth-child(2) .icon { color: var(--gold-text); }
.snapshot-card:nth-child(3) .icon { color: var(--green-text); }
.snapshot-card:nth-child(4) .icon { color: var(--brick-text); }
.snapshot-card h3 { margin: 0 0 5px; font-size: 14.5px; line-height: 1.3; }
.snapshot-card p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }

.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 18px; }
.option-card { position: relative; overflow: hidden; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel); box-shadow: var(--shadow-sm); }
.option-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--teal); }
.option-card:nth-child(2)::before, .option-card:nth-child(3)::before { background: var(--gold); }
.option-card:nth-child(4)::before, .option-card:nth-child(5)::before { background: var(--green); }
.option-card:nth-child(6)::before, .option-card:nth-child(7)::before { background: var(--brick); }
.option-card:nth-child(8)::before, .option-card:nth-child(9)::before { background: var(--teal); }
.option-card h3 { margin: 6px 0 6px; font-size: 14.5px; line-height: 1.3; }
.option-card p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.option-label {
  display: inline-flex; margin-top: 10px; border-radius: 999px; padding: 3px 8px;
  color: var(--teal-text); background: var(--teal-light); font-size: 11px; font-weight: 800;
}

.mini-case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.mini-case { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel); box-shadow: var(--shadow-sm); }
.mini-case h3 { margin: 0; padding: 13px 15px; color: #fff; background: var(--navy-3); font-size: 15px; }
.mini-case:nth-child(2) h3 { background: var(--teal); }
.mini-case:nth-child(3) h3 { background: var(--green-dark); }
.mini-case:nth-child(4) h3 { background: var(--brick-dark, var(--brick)); }
.mini-case-body { display: grid; gap: 11px; padding: 15px; }
.mini-case-line { padding-top: 9px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.mini-case-line:first-child { padding-top: 0; border-top: 0; }
.mini-case-label { display: block; margin-bottom: 2px; color: var(--text-faint); font-size: 11px; font-weight: 800; }
.mini-case-line strong { color: var(--text); }

/* Tighter, denser corners for the panel/callout family site-wide, matching
   the hero pattern's aesthetic (was var(--radius), 14px). */
.panel { border-radius: 8px; }
.panel-header { align-items: flex-start; padding: 15px 18px; }
.panel-header h2, .panel-header h3 { font-size: var(--text-section); line-height: 1.25; }
.panel-body { padding: 18px; }
.related-card, .pn-card { border-radius: 8px; }
.mistake-item, .quiz-question, .summary-box, .callout { border-radius: 8px; }

@media (max-width: 1080px) {
  .decision-hero { grid-template-columns: 1fr; }
  .fact-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .decision-hero { padding: 22px; }
  .decision-hero h2 { font-size: 22px; }
  .fact-snapshot { grid-template-columns: 1fr; }
  .mini-case-grid { grid-template-columns: 1fr; }
}

/* ---------- Document card pattern (SOPs, worked business-system documents) ---------- */
.doc-card {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); margin: 0 0 24px; overflow: hidden;
}
.doc-header { padding: 22px 26px; border-bottom: 3px solid var(--navy); }
.doc-header h3 { font-size: 22px; margin: 0 0 6px; }
.doc-header .doc-version { color: var(--text-muted); font-size: 14.5px; }
.doc-header .doc-purpose { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; margin-top: 10px; }

.doc-info { padding: 18px 26px; background: var(--bg-subtle); border-bottom: 1px solid var(--border); }
.doc-info-grid { display: grid; grid-template-columns: 140px 1fr; row-gap: 10px; column-gap: 12px; font-size: 14.5px; }
.doc-info-grid .doc-label { font-weight: 700; color: var(--text); }

.doc-section { padding: 24px 26px; border-bottom: 1px solid var(--border); }
.doc-section:last-child { border-bottom: none; }
.doc-section h4 { font-size: 17px; margin: 0 0 14px; color: var(--teal-text); }

.doc-question-badge {
  display: inline-block; background: var(--navy); color: #fff; padding: 5px 12px;
  border-radius: var(--radius-sm); margin-bottom: 14px; font-weight: 700; font-size: 13.5px;
}

.doc-quote {
  background: var(--bg-subtle); border-left: 4px solid var(--teal); padding: 14px 18px;
  margin-top: 14px; font-style: italic; line-height: 1.7; font-size: 14.5px;
}

.doc-steps { display: grid; gap: 10px; margin-top: 14px; }
.doc-step {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px;
  background: var(--bg-panel); font-size: 14.5px; line-height: 1.6;
}
.doc-step .doc-step-num { display: block; margin-bottom: 4px; color: var(--teal-text); }

.doc-highlight { color: var(--brick-text); font-weight: 700; }

.doc-measure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 14px; }
.doc-measure-card { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.doc-measure-card h5 { font-size: 15px; margin: 0 0 6px; }
.doc-measure-card p { margin: 0; color: var(--text-muted); font-size: 14px; }

.doc-warning {
  margin-top: 16px; background: var(--gold-light); border-left: 4px solid var(--gold-dark);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 18px; line-height: 1.7; font-size: 14.5px;
}
.doc-warning strong { display: block; margin-bottom: 6px; color: var(--gold-text); }
.doc-warning ul { margin: 8px 0 0; padding-left: 20px; }
.doc-warning li { margin-bottom: 6px; }

@media (max-width: 640px) {
  .doc-info-grid { grid-template-columns: 1fr; row-gap: 4px; }
  .doc-info-grid .doc-label { margin-top: 8px; }
  .doc-measure-grid { grid-template-columns: 1fr; }
}

/* ---------- Insight panel (2x2 Q&A) ---------- */
.insight-panel {
  background: var(--bg-subtle); border: 1px solid var(--border); border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 24px; margin: 0 0 24px;
}
.insight-panel-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-text); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.insight-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.insight-q { font-size: 11px; color: var(--text-faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.insight-a { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; }

/* ---------- Image cards (photo + caption overlay) ---------- */
.image-card { border-radius: var(--radius); overflow: hidden; position: relative; margin-bottom: 20px; box-shadow: var(--shadow); }
.image-card img { width: 100%; display: block; object-fit: cover; }
.image-card .image-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px;
  background: linear-gradient(to top, rgba(0,0,0,0.72), transparent); color: #fff; font-size: 13px;
}
figure.figure { margin: 0 0 22px; }
figure.figure img { border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); }
figure.figure figcaption { font-size: 12.5px; color: var(--text-faint); margin-top: 8px; text-align: center; }

.diagram-image { margin: 18px 0; text-align: center; }
.diagram-image img { max-width: 340px; width: 100%; border-radius: var(--radius); }
.diagram-image.wide img { max-width: 520px; padding-top: 10px; border: 1px solid #ffffff; }

/* For source images with a solid black background/vignette instead of real
   transparency: "screen" blend mode makes black pixels disappear into
   whatever sits behind the image, without needing to hand-edit the PNG. */
.blend-screen { mix-blend-mode: screen; }

/* ---------- Live calculator widgets (Worksheets) ---------- */
.calc-widget { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin: 16px 0; }
.calc-widget h3 { margin: 0 0 14px; font-size: 16px; font-family: var(--font-display); color: var(--text); }
.calc-widget input[readonly] { opacity: 0.7; cursor: not-allowed; }
.calc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.calc-row label { font-size: 14px; font-weight: 600; color: var(--text); }
.calc-row .calc-input-wrap { position: relative; display: flex; align-items: center; }
.calc-row .calc-prefix { position: absolute; left: 12px; font-size: 15px; color: var(--text-muted); pointer-events: none; }
.calc-row .calc-suffix { position: absolute; right: 12px; font-size: 15px; color: var(--text-muted); pointer-events: none; }
.calc-row input { width: 200px; max-width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 15px; font-family: inherit; }
.calc-row input.has-prefix { padding-left: 26px; }
.calc-row input.has-suffix { padding-right: 26px; }
.calc-row input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.calc-results { border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.calc-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.calc-result-label { font-size: 13.5px; color: var(--text-muted); display: flex; flex-direction: column; gap: 2px; }
.calc-formula { font-size: 11px; color: var(--text-faint); font-weight: 400; }
.calc-divider { border-top: 2px solid var(--border); margin: 20px 0 16px; position: relative; }
.calc-result-value { font-size: 21px; font-weight: 800; color: var(--teal-text); font-family: var(--font-display); }
.calc-result.emphasis .calc-result-value { color: var(--gold-text); }
.calc-result-value.calc-good { color: var(--green-text); }
.calc-result-value.calc-bad { color: var(--brick-text); }
.calc-result-value.calc-muted { color: var(--text-muted); font-size: 15px; font-weight: 600; font-family: inherit; }
.calc-reset { margin-top: 4px; background: none; border: none; color: var(--text-faint); font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 0; }
.calc-note { font-size: 12.5px; color: var(--text-faint); margin: -6px 0 14px; }
@media (max-width: 500px) {
  .calc-row { flex-direction: column; align-items: flex-start; }
  .calc-row input { width: 100%; }
  .calc-result { flex-direction: column; align-items: flex-start; gap: 4px; }
  .calc-result-value { font-size: 24px; }
}

.ws-input, .ws-textarea {
  width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit;
}
.ws-textarea { min-height: 90px; resize: vertical; }
.ws-input:focus, .ws-textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
table.data-table .ws-input, table.data-table .ws-textarea { min-width: 140px; }

.image-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 18px 0; }
.image-compare figure { margin: 0; text-align: center; }
.image-compare img { width: 100%; max-width: 260px; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); }
.image-compare figcaption { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--text-muted); }
@media (max-width: 700px) {
  .image-compare { grid-template-columns: 1fr; }
}

/* ---------- Cards (examples, story) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0 0 20px; align-items: stretch; }
.example-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0; background: var(--bg-panel);
  box-shadow: var(--shadow); cursor: pointer; overflow: hidden; display: flex; flex-direction: column;
}
.example-card .example-visual {
  height: 110px; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--teal-light);
}
.example-card .example-visual img { width: 100%; height: 100%; object-fit: cover; }
.example-card .example-visual .icon { width: 38px; height: 38px; color: var(--teal-text); }
.example-card .example-body { padding: 14px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.example-card h4 { margin: 0 0 4px; font-size: 14.5px; }
.example-card p { margin: 0; font-size: 13px; color: var(--text-muted); }
.story-card {
  border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: var(--radius);
  padding: 18px 20px; background: var(--bg-subtle); margin: 0 0 20px;
}
.story-card h4 { margin: 0 0 8px; font-size: 15px; }

.mistake-item { border-left: 3px solid var(--brick); background: var(--brick-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 14px; margin-bottom: 10px; }
.mistake-item strong { color: var(--brick-text); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.timeline-item { position: relative; margin-bottom: 22px; opacity: 0; transform: translateX(-10px); transition: all 0.5s ease; }
.timeline-item.visible { opacity: 1; transform: translateX(0); }
.timeline-dot { position: absolute; left: -30px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg-panel); border: 2px solid var(--border-strong); }
.timeline-item.key .timeline-dot { border-color: var(--gold); background: var(--gold-light); }
.timeline-year { font-size: 12px; font-weight: 700; color: var(--gold-text); margin-bottom: 3px; letter-spacing: 0.03em; }
.timeline-text { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.timeline-text strong { color: var(--text); }

/* ---------- Diagram card with animated bars ---------- */
.diagram-card { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; }
.diagram-title { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.06em; }
.rbar-wrap { margin-bottom: 14px; }
.rbar-label { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12.5px; gap: 8px; }
.rbar-label .rb-name { color: var(--text-muted); }
.rbar-label .rb-val { font-weight: 700; text-align: right; }
.rbar-track { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; }
.rbar-fill { height: 100%; border-radius: 4px; width: 0; transition: width 1.1s cubic-bezier(0.4,0,0.2,1); }
.rbar-teal { background: var(--teal); } .rbar-gold { background: var(--gold); } .rbar-brick { background: var(--brick); } .rbar-green { background: var(--green); }

/* ---------- Pull quote ---------- */
.pull-quote { border-left: 3px solid var(--gold); padding: 16px 22px; margin: 22px 0; background: var(--gold-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.pull-quote p { font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 1.6; margin: 0; }
.pull-quote cite { display: block; font-size: 11px; color: var(--gold-text); margin-top: 8px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Accordion / Quiz ---------- */
.accordion-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; }
.accordion-trigger { width: 100%; text-align: left; background: var(--bg-panel); border: none; padding: 13px 16px; cursor: pointer; font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; color: var(--text); }
.accordion-trigger:hover { background: var(--bg-subtle); }
.accordion-trigger .chev { transition: transform 0.15s ease; opacity: 0.6; width: 14px; height: 14px; }
.accordion-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.accordion-panel { padding: 0 16px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease, padding 0.2s ease; font-size: 13.5px; color: var(--text-muted); background: var(--bg-subtle); }
.accordion-panel.open { padding: 12px 16px 16px; max-height: 800px; }

.quiz-block { border: none; padding: 0; margin: 20px 0; background: none; display: flex; flex-direction: column; gap: 14px; }
.quiz-question {
  border: 1px solid var(--border); border-left-width: 5px; border-radius: var(--radius);
  padding: 16px 18px; background: var(--bg-subtle);
}
.quiz-question:nth-of-type(4n+1) { border-left-color: var(--teal); }
.quiz-question:nth-of-type(4n+2) { border-left-color: var(--gold-dark); }
.quiz-question:nth-of-type(4n+3) { border-left-color: var(--brick); }
.quiz-question:nth-of-type(4n+4) { border-left-color: var(--green-dark); }
.quiz-label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.07em; padding: 3px 10px; border-radius: 20px; margin-bottom: 10px; color: #fff;
}
.quiz-question:nth-of-type(4n+1) .quiz-label { background: var(--teal); }
.quiz-question:nth-of-type(4n+2) .quiz-label { background: var(--gold-dark); }
.quiz-question:nth-of-type(4n+3) .quiz-label { background: var(--brick); }
.quiz-question:nth-of-type(4n+4) .quiz-label { background: var(--green-dark); }
.quiz-q-text { font-weight: 700; margin-bottom: 10px; font-size: 14px; }
.quiz-options { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.quiz-option { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px; cursor: pointer; font-size: 13.5px; background: var(--bg-panel); }
.quiz-option:hover { border-color: var(--teal); }
.quiz-option.correct { border-color: var(--green); background: var(--green-light); }
.quiz-option.incorrect { border-color: var(--brick); background: var(--brick-light); }
.quiz-explain { display: none; font-size: 13px; color: var(--text-muted); background: var(--bg-panel); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 8px; }
.quiz-explain.show { display: block; }
.quiz-score { font-size: 13px; color: var(--text-muted); margin-top: 2px; font-weight: 600; }

/* Reveal-answer quiz style: open-response question, click to reveal the real
   answer (used for Volumes 01-31, whose source is a "guess, then reveal"
   format rather than multiple choice). Reuses .quiz-block/.quiz-question's
   existing colored-border cycling. */
.quiz-reveal-btn {
  margin-top: 10px; padding: 6px 16px; border-radius: 20px; border: none;
  background: var(--teal); color: #fff; font-size: 12.5px; font-weight: 700;
  cursor: pointer; letter-spacing: 0.02em;
}
.quiz-question:nth-of-type(4n+2) .quiz-reveal-btn { background: var(--gold-dark); }
.quiz-question:nth-of-type(4n+3) .quiz-reveal-btn { background: var(--brick); }
.quiz-question:nth-of-type(4n+4) .quiz-reveal-btn { background: var(--green-dark); }
.quiz-answer { display: none; font-size: 14px; color: var(--text); background: var(--bg-panel); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 10px; }
.quiz-answer.show { display: block; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; margin: 0 0 20px; padding: 0; }
.checklist li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.checklist li:last-child { border-bottom: none; }
.checklist input[type="checkbox"] { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--teal); cursor: pointer; }
.checklist li.checked label { color: var(--text-faint); text-decoration: line-through; }
.checklist-progress { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.checklist-progress-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin-bottom: 14px; }
.checklist-progress-bar > span { display: block; height: 100%; background: var(--green); transition: width 0.2s ease; }

/* ---------- Tabs ---------- */
.tabs-nav { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn { background: none; border: none; padding: 9px 14px; font-size: 13.5px; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: 6px; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--teal-text); border-bottom-color: var(--teal); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Exercise card ---------- */
.exercise-card { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.exercise-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.exercise-badge { font-size: 10.5px; font-weight: 700; padding: 4px 11px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.06em; background: var(--teal-light); color: var(--teal-text); }
.exercise-scenario { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px; font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }
.exercise-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.exercise-option { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; color: var(--text-muted); background: var(--bg-panel); }
.exercise-option:hover { border-color: var(--border-strong); color: var(--text); }
.exercise-option.selected-correct { border-color: var(--green); background: var(--green-light); color: var(--green-text); }
.exercise-option.selected-wrong { border-color: var(--brick); background: var(--brick-light); color: var(--brick-text); }
.exercise-option.reveal-correct { border-color: var(--green); color: var(--green-text); }
.option-letter { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-subtle); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.exercise-feedback { background: var(--bg-panel); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 16px; font-size: 13px; color: var(--text-muted); line-height: 1.6; display: none; border-left: 3px solid var(--gold); }
.exercise-feedback.visible { display: block; }
.submit-btn { background: var(--teal); color: #fff; border: none; padding: 12px 24px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; cursor: pointer; margin-top: 4px; }
.submit-btn:hover { background: var(--teal-dark); }

/* ---------- Summary box ---------- */
.summary-box { background: var(--bg-subtle); border-radius: var(--radius); padding: 20px 22px; margin: 24px 0; border: 1px solid var(--border); }
.summary-box h3 { margin-top: 0; display: flex; align-items: center; gap: 8px; }
.summary-box ul { margin-bottom: 0; }

/* ---------- Related / Prev-Next ---------- */
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 10px 0 30px; }
.related-card { border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: var(--radius); padding: 14px 16px; background: var(--bg-panel); box-shadow: var(--shadow-sm); }
.related-card:hover { box-shadow: var(--shadow); text-decoration: none; }
.related-card .tag { font-size: 10.5px; color: var(--teal-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.related-card h4 { margin: 4px 0 0; font-size: 14px; }
.related-card:nth-child(4n+2) { border-top-color: var(--gold); }
.related-card:nth-child(4n+2) .tag { color: var(--gold-text); }
.related-card:nth-child(4n+3) { border-top-color: var(--brick); }
.related-card:nth-child(4n+3) .tag { color: var(--brick-text); }
.related-card:nth-child(4n+4) { border-top-color: var(--green); }
.related-card:nth-child(4n+4) .tag { color: var(--green-text); }

.prev-next { display: flex; gap: 14px; margin: 26px 0 10px; }
.pn-card { flex: 1; border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: var(--radius); padding: 14px 16px; background: var(--bg-panel); box-shadow: var(--shadow-sm); }
.pn-card.next { text-align: right; border-top-color: var(--gold); }
.pn-card .pn-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 5px; }
.pn-card.next .pn-label { justify-content: flex-end; }
/* Chevron icons drawn as a mask so they inherit any color via
   background-color, matching the site's existing chevron-left/right shape,
   with no dependency on the page's own content markup. */
.pn-card.prev .pn-label::before,
.pn-card.next .pn-label::after {
  content: ""; flex: none; width: 12px; height: 12px; background-color: var(--text-faint);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
}
.pn-card.prev .pn-label::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E");
}
.pn-card.next .pn-label::after {
  background-color: var(--gold-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}
[data-theme="dark"] .pn-card.next .pn-label::after { background-color: #ffffff; }
.pn-card .pn-title { font-weight: 700; font-size: 14px; margin-top: 3px; }
.pn-card.next .pn-title { color: var(--gold-text); }
[data-theme="dark"] .pn-card.next .pn-title { color: #ffffff; }

/* ---------- Content presence ----------
   Reading surfaces should arrive ready to read. Motion is reserved for
   diagrams that reveal a relationship, never for ordinary page content. */
.fade-in-up,
.fade-in-up.visible { opacity: 1; transform: none; transition: none; }

/* ---------- TOC aside ---------- */
.page-with-toc { display: flex; gap: 26px; align-items: flex-start; }
.page-with-toc .page-main { flex: 1; min-width: 0; }
.page-toc { width: 220px; flex: none; position: sticky; top: calc(var(--topbar-h) + 20px); background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.page-toc .toc-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 700; margin-bottom: 10px; }
.page-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.page-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -2px; font-size: 12.5px; color: var(--text-muted); border-left: 2px solid transparent; }
.page-toc a:hover, .page-toc a.active { color: var(--teal-text); border-left-color: var(--teal); text-decoration: none; }

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed; right: 24px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--teal); color: #fff; border: none; cursor: pointer; box-shadow: var(--shadow-lg);
  display: none; align-items: center; justify-content: center; z-index: 120;
}
.back-to-top.show { display: flex; }

/* ---------- Search results ---------- */
.search-result { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.search-result:last-child { border-bottom: none; }
.search-result:hover, .search-result.active-result { background: var(--bg-subtle); text-decoration: none; }
.search-result .sr-type { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--teal-text); font-weight: 700; }
.search-result .sr-title { font-size: 13.5px; font-weight: 600; color: var(--text); margin: 2px 0; }
.search-result .sr-snippet { font-size: 12px; color: var(--text-muted); }
.search-result mark { background: rgba(232,163,61,0.4); color: inherit; border-radius: 2px; }
.search-empty { padding: 20px 14px; text-align: center; color: var(--text-faint); font-size: 13px; }
.panel-list-empty { padding: 16px; text-align: center; color: var(--text-faint); font-size: 12.5px; }

/* ---------- Glossary index page ---------- */
.glossary-filter-bar { position: sticky; top: var(--topbar-h); z-index: 40; background: var(--bg); padding: 14px 0; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.glossary-filter-bar input {
  width: 100%; padding: 11px 16px; border-radius: 24px; border: 1px solid var(--border);
  background: var(--bg-subtle); color: var(--text); font-size: 15px;
}
.glossary-filter-bar input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
#glossary-match-count { font-size: 12.5px; color: var(--text-muted); margin: 8px 2px 0; }
.glossary-jump-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 26px; }
.glossary-jump-nav a {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 6px; border: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text-muted);
}
.glossary-jump-nav a:hover { border-color: var(--teal); color: var(--teal-text); text-decoration: none; }
.glossary-letter-section { margin-bottom: 8px; scroll-margin-top: calc(var(--topbar-h) + 90px); }
.glossary-letter-heading {
  font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--teal-text); border-bottom: 2px solid var(--border);
  padding-bottom: 8px; margin: 30px 0 16px; scroll-margin-top: calc(var(--topbar-h) + 90px);
}
.glossary-term {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 12px;
  background: var(--bg-panel); scroll-margin-top: calc(var(--topbar-h) + 90px);
}
.glossary-term h3 { margin: 0 0 8px; font-size: 16px; }
.glossary-term > p:not(.term-meta) { margin: 0 0 10px; color: var(--text-muted); font-size: 14.5px; }
.term-meta { font-size: 12.5px; color: var(--text-faint); margin: 4px 0 0; }
.term-meta strong { color: var(--text-muted); }

/* ---------- Mobile grid nav overlay ---------- */
.mobile-nav-fab {
  display: none; position: fixed; right: 20px; bottom: 20px; z-index: 260;
  width: 56px; height: 56px; border-radius: 16px; background: var(--gold); color: #1c1300;
  border: none; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); cursor: pointer;
}
.mobile-nav-overlay {
  display: none; position: fixed; inset: 0; z-index: 270; background: rgba(10,16,18,0.92);
  padding: 60px 20px 90px; overflow-y: auto;
}
.mobile-nav-overlay.open { display: block; }
.mobile-nav-close {
  position: fixed; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 12px; z-index: 280;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
}
.mobile-nav-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 460px; margin: 0 auto; }
.mobile-nav-cell {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius);
  padding: 18px 14px; text-align: center; color: #fff; cursor: pointer;
}
.mobile-nav-cell .icon { width: 26px; height: 26px; color: var(--gold); margin-bottom: 8px; }
.mobile-nav-cell span { display: block; font-size: 12.5px; font-weight: 600; }
.mobile-actions-wrap { display: none; position: relative; flex: none; }
.mobile-actions-header-btn { color: var(--teal-text); }
.mobile-actions-dropdown { display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 300; width: min(360px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-panel); box-shadow: var(--shadow-lg); }
.mobile-actions-dropdown.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mobile-actions-dropdown .mobile-nav-grid { grid-column: 1 / -1; max-width: none; gap: 8px; }
.mobile-actions-dropdown .mobile-nav-cell { padding: 12px 8px; color: var(--text); background: var(--bg-subtle); border-color: var(--border); }
.mobile-actions-dropdown .mobile-nav-cell .icon { width: 21px; height: 21px; color: var(--gold-text); margin-bottom: 5px; }
.mobile-actions-list { grid-column: 1 / -1; max-width: none; margin: 0; display: none; }
.mobile-actions-list.open { display: block; }
.mobile-action-preferences { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.mobile-action-preference { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: var(--text-small); font-weight: 600; }

/* ---------- Lightbox (click any content image to enlarge, no new tab) ---------- */
.lightbox-overlay {
  display: none; position: fixed; inset: 0; z-index: 400; background: rgba(10,16,18,0.92);
  align-items: center; justify-content: center; padding: 60px 20px;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img { max-width: 100%; max-height: 100%; border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.lightbox-close {
  position: fixed; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 12px; z-index: 410;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
}
.mobile-actions-list .search-result { background: var(--bg-subtle); border-radius: var(--radius-sm); margin-bottom: 8px; border: 1px solid var(--border); }
.mobile-actions-list .panel-list-empty { color: var(--text-faint); }

/* ---------- Print ---------- */
@media print {
  .sidebar, .topbar, .page-toc, .back-to-top, .reading-progress, .sidebar-overlay, .prev-next, .mobile-nav-fab, .mobile-actions-wrap { display: none !important; }
  .main-col { margin-left: 0; }
  body { font-size: 12pt; }
  a { color: #000; text-decoration: underline; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .page-toc { display: none; }
}
@media (max-width: 900px) {
  .app-shell.sidebar-open .main-col { margin-left: 0; }
  .app-shell.sidebar-open .sidebar-overlay { display: block; }
  .content-area { padding: 20px 16px 60px; }
  .hero-banner .hero-inner { padding: 28px 24px; }
  .hero-banner h1 { font-size: 26px; }
  .insight-grid { grid-template-columns: 1fr; }
  .page-header-split { grid-template-columns: 1fr; gap: 16px; }
  .page-header-split .page-header-media { order: -1; }
  .page-header-media img { width: 140px; }
  .mobile-nav-fab { display: flex; }
  .mobile-actions-wrap { display: block; }
  /* The nav fab occupies the bottom-right corner on mobile; keep the
     back-to-top button clear of it by stacking it above. */
  .back-to-top { right: 26px; bottom: 92px; }

  /* Mobile topbar: only the search box remains, full width */
  .topbar-actions { display: none; }
  .topbar { gap: 8px; padding: 0 12px; }
  .topbar-breadcrumb { display: flex; flex: 1; min-width: 0; font-size: var(--text-caption); gap: 4px; }
  .topbar-search { flex: none; width: 38px; max-width: 38px; margin-left: 0; transition: width 0.18s ease, max-width 0.18s ease; }
  .topbar-search input { height: 38px; padding: 0; border-color: var(--gold); caret-color: transparent; }
  .topbar-search input::placeholder { color: transparent; }
  .topbar-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 28%, transparent); }
  .topbar-search .icon { left: 50%; transform: translate(-50%, -50%); opacity: 0.8; }
  .topbar-search .kbd-hint { display: none; }
  .topbar.search-active .topbar-breadcrumb { display: none; }
  .topbar-search.is-active { flex: 1; width: auto; max-width: none; }
  .topbar-search.is-active input { padding: 9px 14px 9px 36px; caret-color: auto; }
  .topbar-search.is-active input::placeholder { color: var(--text-faint); }
  .topbar-search.is-active .icon { left: 12px; transform: translateY(-50%); }

  /* Dropdown panels center on small screens instead of hugging the right edge */
  .dropdown-panel {
    position: fixed; top: calc(var(--topbar-h) + 10px); left: 50%; right: auto;
    transform: translateX(-50%); width: calc(100vw - 32px); max-width: 380px;
  }
  .mobile-actions-dropdown { position: fixed; top: calc(var(--topbar-h) + 8px); right: 12px; width: min(360px, calc(100vw - 24px)); }
}
@media (max-width: 600px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-tile { padding: 14px; gap: 10px; }
  .topbar { padding: 0 14px; gap: 10px; }
  h1.page-title { font-size: var(--text-chapter); }
  /* Same auto-fit grid behavior as desktop, just with a smaller minimum
     column width so cards keep tiling instead of forcing one/two columns. */
  .module-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .related-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 420px) {
  .mobile-nav-grid { grid-template-columns: 1fr 1fr; }
}

/* ========================================================================
   LEARNING EXPERIENCE FOUNDATION
   These components are intentionally content-first: each visual block helps
   a reader decide, understand, remember, or act. They are used by the
   redesigned orientation volume and form the pattern for later volumes.
   ======================================================================== */
.learning-hero {
  position: relative; isolation: isolate; overflow: hidden; min-height: 390px;
  display: flex; align-items: end; border-radius: 24px; margin: 2px 0 28px;
  background: var(--navy); box-shadow: var(--shadow-lg);
}
.learning-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.learning-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,25,29,.90) 0%, rgba(11,25,29,.70) 40%, rgba(11,25,29,.08) 78%); }
.learning-hero-copy { max-width: 620px; padding: 42px 44px; color: #fff; }
.learning-hero-kicker, .chapter-kicker {
  display: inline-flex; align-items: center; gap: 8px; color: #f6d493; font-size: 11px;
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.learning-hero h1 { color: #fff; font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.625rem); line-height: 1.04; margin: 12px 0 16px; }
.learning-hero p { color: rgba(255,255,255,.86); font-size: var(--text-body); line-height: 1.65; margin: 0; max-width: 53ch; }
.learning-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.learning-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 10px 16px; border-radius: 999px; background: var(--gold); color: #241600;
  font-weight: 800; font-size: 13px; border: 1px solid var(--gold); text-decoration: none;
}
.learning-button:hover { color: #241600; background: #f3b75a; text-decoration: none; }
.learning-button.ghost { color: #fff; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.34); }
.learning-button.ghost:hover { color: #fff; background: rgba(255,255,255,.20); }

.learning-intro { max-width: 760px; margin: 0 0 26px; }
.learning-intro h1 { font-family: var(--font-display); font-size: var(--text-page); line-height: 1.11; margin: 8px 0 12px; }
.learning-intro p { font-size: var(--text-lead); color: var(--text-muted); max-width: 63ch; margin: 0; }

.learning-status-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 28px; }
.learning-status {
  padding: 15px 16px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.learning-status strong { display: block; font-size: 18px; line-height: 1.1; color: var(--teal-text); margin-bottom: 4px; }
.learning-status span { display: block; color: var(--text-muted); font-size: 12.5px; line-height: 1.4; }
.learning-hero > .learning-status-row { width: min(42%, 450px); margin: 0 42px 42px auto; align-self: end; gap: 10px; }
.learning-hero > .learning-status-row .learning-status { padding: 14px; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); box-shadow: none; }
.learning-hero > .learning-status-row .learning-status span { color: rgba(255,255,255,.76); }
.learning-hero > .learning-status-row .learning-status-number { color: #f6d493; font-size: 11px; font-weight: 800; letter-spacing: .08em; }

.learning-section { margin: 32px 0; }
.learning-section-heading { display: block; margin-bottom: 14px; }
.learning-section-heading .section-no { display: block; color: var(--gold-text); font-size: var(--text-caption); font-weight: 800; letter-spacing: .1em; margin-bottom: 8px; }
.learning-section-heading h2 { font-family: var(--font-display); font-size: var(--text-chapter); line-height: 1.18; margin: 0; }

.scene-card {
  position: relative; overflow: hidden; padding: 26px 28px 24px; border: 1px solid var(--border); border-radius: 18px;
  background: linear-gradient(135deg, var(--bg-panel), var(--gold-light)); box-shadow: var(--shadow-sm);
}
.scene-card::before { content: "A real moment"; display: inline-block; padding: 4px 9px; border-radius: 999px; background: var(--gold); color: #241600; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.scene-card h3 { margin: 12px 0 10px; font-family: var(--font-display); font-size: 24px; line-height: 1.24; }
.scene-card p { max-width: 68ch; margin: 0 0 12px; color: var(--text-muted); }
.scene-question { margin-top: 16px !important; color: var(--text) !important; font-weight: 750; }
.scene-card + .callout { margin-top: 16px; }
.learning-teaching-figure { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-panel); box-shadow: var(--shadow-sm); }
.learning-teaching-figure img { display: block; width: 100%; height: auto; }
.learning-teaching-figure figcaption { padding: 14px 18px; color: var(--text-muted); font-size: var(--text-small); line-height: 1.55; }

.lesson-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; counter-reset: lesson; }
.lesson-step {
  position: relative; min-height: 154px; padding: 18px 15px 16px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--bg-panel); box-shadow: var(--shadow-sm);
}
.lesson-step::before { counter-increment: lesson; content: counter(lesson); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 12px; font-weight: 800; margin-bottom: 16px; }
.lesson-step:nth-child(2)::before { background: var(--gold-dark); }
.lesson-step:nth-child(3)::before { background: var(--brick); }
.lesson-step:nth-child(4)::before { background: var(--green-dark); }
.lesson-step:nth-child(5)::before { background: var(--navy-3); }
.lesson-step h3 { font-size: 14px; margin: 0 0 7px; line-height: 1.25; }
.lesson-step p { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; margin: 0; }

.signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.signal-card { padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-subtle); }
.signal-card .signal-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--teal-text); background: var(--teal-light); margin-bottom: 13px; }
.signal-card:nth-child(2) .signal-icon { color: var(--gold-text); background: var(--gold-light); }
.signal-card:nth-child(3) .signal-icon { color: var(--brick-text); background: var(--brick-light); }
.signal-card h3 { font-size: 14px; margin: 0 0 6px; }
.signal-card p { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin: 0; }

.route-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.route-card {
  display: flex; flex-direction: column; min-height: 230px; padding: 20px; border: 1px solid var(--border); border-radius: 18px;
  background: var(--bg-panel); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.route-card:hover { color: var(--text); text-decoration: none; transform: translateY(-3px); border-color: var(--teal); box-shadow: var(--shadow); }
.route-card .route-mark { width: 34px; height: 34px; display: grid; place-items: center; color: var(--teal-text); background: var(--teal-light); border-radius: 11px; margin-bottom: 20px; }
.route-card:nth-child(2) .route-mark { color: var(--gold-text); background: var(--gold-light); }
.route-card:nth-child(3) .route-mark { color: var(--green-text); background: var(--green-light); }
.route-card .route-label { color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 800; }
.route-card h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.18; margin: 8px 0; }
.route-card p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.route-card .route-go { margin-top: auto; padding-top: 18px; color: var(--teal-text); font-size: 12px; font-weight: 800; }
.route-card .route-card-number { color: var(--teal-text); font-size: 12px; font-weight: 800; }
.route-card .route-card-copy { display: block; margin-top: 14px; }
.route-card .route-card-copy strong { display: block; font-size: 16px; line-height: 1.28; }
.route-card .route-card-copy small { display: block; margin-top: 8px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.route-card > span[aria-hidden="true"] { margin-top: auto; padding-top: 18px; color: var(--teal-text); font-size: 16px; font-weight: 800; }

.path-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.path-step { position: relative; padding: 14px; border-radius: 12px; background: var(--bg-subtle); border: 1px solid var(--border); }
.path-step small { display: block; color: var(--text-faint); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 6px; }
.path-step strong { display: block; font-size: 13px; line-height: 1.35; }
.path-step a { font-size: 12px; font-weight: 700; }

.reference-loop { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; margin: 18px 0; }
.reference-node { min-height: 118px; padding: 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-panel); box-shadow: var(--shadow-sm); }
.reference-node strong { display: block; font-size: 14px; margin-bottom: 6px; }
.reference-node p { margin: 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.45; }
.reference-node:nth-child(3) { background: var(--gold-light); }
.reference-node:nth-child(5) { background: var(--green-light); }
.reference-arrow { color: var(--gold-text); font-size: 22px; font-weight: 700; }

.action-card { padding: 22px; border-radius: 18px; background: var(--navy-3); color: #fff; }
.action-card .chapter-kicker { color: #f6d493; }
.action-card h2 { font-family: var(--font-display); color: #fff; font-size: 27px; line-height: 1.2; margin: 9px 0; }
.action-card p { color: rgba(255,255,255,.78); max-width: 62ch; margin: 0; }
.action-checklist { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.action-checklist li { padding: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); border-radius: 12px; font-size: 12.5px; line-height: 1.45; }
.action-checklist strong { display: block; color: #f6d493; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 4px; }

.accordion-item.learning-accordion { border-radius: 14px; margin-bottom: 10px; }
.learning-accordion .accordion-trigger { min-height: 52px; font-size: 14px; }
.learning-accordion .accordion-panel { line-height: 1.6; }
.learning-accordion .accordion-panel p { margin: 0; }

/* These are reading surfaces, not decorative reveals. Keeping them present
   avoids an empty stretch while a reader reaches the next useful decision. */
.learning-hero.fade-in-up,
.learning-status-row.fade-in-up,
.learning-section.fade-in-up,
.action-card.fade-in-up { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .learning-hero { min-height: 430px; }
  .learning-hero::after { background: linear-gradient(0deg, rgba(11,25,29,.92) 0%, rgba(11,25,29,.62) 57%, rgba(11,25,29,.08) 100%); }
  .learning-hero-copy { padding: 28px; }
  .learning-hero > .learning-status-row { width: min(46%, 390px); margin: 0 28px 28px auto; }
  .lesson-flow { grid-template-columns: repeat(3, 1fr); }
  .route-picker { grid-template-columns: 1fr; }
  .route-card { min-height: 0; }
  .path-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .learning-hero { min-height: 500px; flex-wrap: wrap; border-radius: 18px; }
  .learning-hero-copy { padding: 22px; }
  .learning-hero h1 { font-size: var(--text-page); }
  .learning-hero > .learning-status-row { width: 100%; margin: 0; padding: 0 22px 22px; grid-template-columns: 1fr; }
  .learning-hero > .learning-status-row .learning-status { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
  .learning-hero > .learning-status-row .learning-status-number { padding-top: 2px; }
  .learning-status-row, .signal-grid { grid-template-columns: 1fr; }
  .lesson-flow { grid-template-columns: 1fr; }
  .lesson-step { min-height: 0; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; }
  .lesson-step::before { grid-row: span 2; margin: 0; }
  .lesson-step h3 { align-self: end; margin: 0; }
  .lesson-step p { grid-column: 2; margin-top: 5px; }
  .reference-loop { grid-template-columns: 1fr; gap: 8px; }
  .reference-arrow { transform: rotate(90deg); text-align: center; }
  .action-checklist { grid-template-columns: 1fr; }
  .path-steps { grid-template-columns: 1fr; }
}