:root {
  color-scheme: dark;
  --ink: #eef1f6;
  --muted: #a4adbd;
  --paper: #0f1117;
  --white: #171a23;
  --navy: #dce5f8;
  --navy-soft: #1f2432;
  --teal: #8ea2ff;
  --teal-soft: #20273a;
  --curriculum-blue: #9fbaff;
  --coral: #ff8f86;
  --coral-soft: #322027;
  --ochre: #ff8f6b;
  --ochre-soft: #2d2428;
  --line: #2a3040;
  --green: #7fd7a3;
  --red: #ff8f86;
  --shadow: 0 16px 32px rgba(6, 8, 14, .55);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.page-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px clamp(18px, 4vw, 64px); background: var(--white); border-bottom: 1px solid var(--line); }
.page-tabs button { min-height: 42px; padding: 9px 16px; color: var(--navy); background: var(--navy-soft); border: 1px solid var(--line); border-radius: 8px; }
.page-tabs button[aria-current="page"] { color: #fff; background: var(--teal); border-color: var(--teal); }
#connectionStatus { color: var(--muted); font-size: 12px; }
.benefits-panel { border-top: 4px solid var(--teal); }
.benefit-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.benefit-metrics > span { padding: 12px; color: var(--navy); background: var(--teal-soft); border-radius: 8px; font-size: 12px; line-height: 1.5; }
.benefit-metrics strong { display: block; font-size: 21px; }
.benefit-list { display: grid; gap: 6px; padding-left: 20px; font-size: 12px; line-height: 1.5; }
.benefits-panel summary { cursor: pointer; color: var(--teal); font-size: 12px; }
.cost-cell s { color: var(--muted); font-size: 10px; font-weight: 400; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.5; }
.ledger-table th, .ledger-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.ledger-table thead { color: var(--navy); background: var(--navy-soft); }
.ledger-table thead th { font-size: 11px; white-space: nowrap; }
.ledger-table tbody th { color: var(--navy); font-weight: 600; }
.ledger-table tbody tr:nth-child(even) { background: #1b2030; }
.ledger-table tfoot { color: var(--navy); background: var(--teal-soft); font-weight: 700; }
.curriculum-table { min-width: 480px; }
.curriculum-table td:last-child { width: 42%; font-size: 11px; color: var(--muted); }
.table-subtext { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; }
.availability { color: var(--teal); font-size: 10px; font-weight: 600; }
.availability.pending { color: var(--coral); }
.course-picker-heading { margin-top: 24px; }
.score-round { border-top: 4px solid var(--teal); }
.score-round h2 { font-size: clamp(20px, 3vw, 28px); }
.score-round .ledger-table { min-width: 520px; }
.score-round .score-components { min-width: 380px; }
.score-round .audit-crisis { margin: 12px 0; padding: 16px; font-size: 12px; }
.score-round .audit-crisis ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 24px; padding-left: 18px; font-size: 11px; }
.score-round .crisis-detail, .ledger-equation { margin-top: 8px; font-size: 12px; line-height: 1.7; }
@media (max-width: 640px) { .score-round .audit-crisis ul { grid-template-columns: 1fr; } }
#passwordError { margin-top: 10px; color: var(--red); }
#teacherPassword { max-width: 360px; }
@media (max-width: 700px) { .benefit-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html { min-width: 320px; background: var(--paper); }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at top, #1c2030 0%, #0f1117 55%, #0a0c12 100%);
  background-attachment: fixed;
}
button, input, select, textarea { font: inherit; }
button, select, input[type="checkbox"], input[type="radio"] { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid #d28a42; outline-offset: 2px; }

.masthead {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(18px, 4vw, 64px);
  color: #fff;
  background: var(--navy-soft);
  border-bottom: 4px solid var(--teal);
}
.brand { display: flex; align-items: baseline; gap: 14px; color: inherit; text-decoration: none; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 0; }
.brand span { color: #3c4459; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 12px; font-weight: 500; }
.masthead-right { display: flex; align-items: center; gap: 18px; }
.edition-mark { color: #bdcdd2; font-size: 10px; font-weight: 700; }
.live-status { padding: 6px 10px; color: #e8f6ef; background: rgba(75, 154, 128, .24); border: 1px solid rgba(188, 228, 207, .3); border-radius: 8px; font-size: 11px; font-weight: 700; }
.app-shell { width: min(1320px, calc(100% - 40px)); min-height: calc(100vh - 128px); margin: 0 auto; padding: 38px 0 64px; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 20px clamp(18px, 4vw, 64px); color: #c6d2d3; background: var(--navy-soft); font-size: 11px; }
.site-footer span:first-child { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; }

.kicker { margin: 0 0 12px; color: var(--teal); font-size: 11px; font-weight: 700; text-transform: uppercase; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: 0; }
h1 { max-width: 780px; margin-bottom: 14px; color: var(--navy); font-size: clamp(36px, 5vw, 62px); line-height: 1.1; }
h2 { margin-bottom: 14px; color: var(--navy); font-size: clamp(23px, 3vw, 32px); line-height: 1.24; }
h3 { margin-bottom: 13px; color: var(--navy); font-size: 17px; line-height: 1.35; }
h4 { margin-bottom: 8px; font-size: 13px; }
.lede { max-width: 750px; margin-bottom: 0; color: #cfd8ee; font-size: 16px; line-height: 1.65; }

.welcome { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); gap: clamp(30px, 7vw, 110px); align-items: center; min-height: 68vh; padding: 20px 0; }
.welcome-copy { position: relative; padding: 32px 0 36px 30px; border-left: 5px solid var(--teal); }
.welcome-copy::after { position: absolute; right: 0; bottom: 0; width: min(260px, 65%); height: 1px; background: var(--line); content: ''; }
.welcome-copy .question { max-width: 660px; margin-top: 32px; color: var(--navy); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 20px; line-height: 1.55; }
.welcome-copy .question span { color: var(--coral); }
.setup-panel { padding: 24px; background: var(--white); border: 1px solid var(--line); border-top: 5px solid var(--ochre); border-radius: 16px; box-shadow: var(--shadow); }
.setup-panel h2 { font-size: 20px; }
.field-label { display: block; margin: 17px 0 7px; color: #c8d2e8; font-size: 12px; font-weight: 700; }
.text-input, .select-input, .plan-input { width: 100%; min-height: 42px; padding: 10px 12px; color: var(--ink); background: #1f2432; border: 1px solid #3c4459; border-radius: 8px; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 12px 0 4px; }
.mode-choice { min-height: 88px; padding: 12px; text-align: left; color: var(--ink); background: #1f2432; border: 1px solid var(--line); border-radius: 8px; }
.mode-choice strong, .mode-choice span { display: block; }
.mode-choice strong { margin-bottom: 5px; color: var(--navy); font-size: 13px; }
.mode-choice span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.mode-choice[aria-pressed="true"] { background: var(--teal-soft); border: 2px solid var(--teal); }
.primary-button, .secondary-button, .quiet-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 700; transition: background-color .15s ease, transform .15s ease; }
.primary-button { color: #fff; background: var(--teal); }
.primary-button:hover { background: #1d665f; transform: translateY(-1px); }
.primary-button:disabled, .secondary-button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.secondary-button { color: var(--navy); background: var(--navy-soft); border-color: #3c4459; }
.secondary-button:hover, .quiet-button:hover { background: #2b334b; }
.quiet-button { min-height: 36px; padding: 7px 10px; color: var(--navy); background: transparent; border-color: var(--line); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.full-button { width: 100%; margin-top: 18px; }
.microcopy { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.campaign-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.campaign-head h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); }
.round-label { padding: 10px 13px; color: var(--navy); background: var(--ochre-soft); border-left: 3px solid var(--ochre); font-size: 12px; font-weight: 700; }
.round-track { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 22px; border: 1px solid var(--line); background: var(--white); }
.round-step { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-right: 1px solid var(--line); color: #a4adbd; font-size: 11px; }
.round-step:last-child { border-right: 0; }
.round-step b { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #3c4459; border-radius: 50%; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 11px; }
.round-step.active { color: var(--navy); background: var(--teal-soft); font-weight: 700; }
.round-step.active b, .round-step.done b { color: #fff; background: var(--teal); border-color: var(--teal); }
.round-step.done { color: var(--green); }
.panel { min-width: 0; margin-bottom: 18px; padding: 19px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 15px; margin-bottom: 14px; }
.panel-heading h2, .panel-heading h3 { margin: 0; }
.panel-heading h3 { font-size: 15px; }
.small-label { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.stats-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-bottom: 18px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; }
.stat-cell { min-height: 83px; padding: 13px 12px; background: var(--white); }
.stat-name { color: var(--muted); font-size: 10px; font-weight: 700; }
.stat-number { margin-top: 7px; color: var(--navy); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 24px; }
.stat-track { height: 4px; overflow: hidden; margin-top: 8px; background: #2a3040; border-radius: 8px; }
.stat-track span { height: 100%; display: block; background: var(--teal); }

.plan-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr); gap: 18px; align-items: start; }
.budget-total { padding: 12px 14px; background: var(--navy-soft); color: #fff; border-radius: 8px; }
.budget-total strong { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 23px; }
.budget-total span { display: block; color: #c7d7dc; font-size: 10px; }
.budget-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.budget-table th { padding: 8px 7px; color: #a4adbd; border-bottom: 1px solid var(--line); text-align: left; font-size: 10px; }
.budget-table td { padding: 7px; border-bottom: 1px solid #2a3040; vertical-align: middle; }
.budget-table tr:last-child td { border-bottom: 0; }
.budget-table td:first-child { font-weight: 600; }
.budget-table .select-input { min-height: 34px; padding: 6px 8px; font-size: 11px; }
.cost-cell { min-width: 62px; color: var(--navy); font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; text-align: right; white-space: nowrap; }
.budget-summary { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; }
.budget-summary strong { color: var(--teal); }
.budget-summary.over strong { color: var(--red); }

.course-summary { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 12px; padding: 10px 12px; background: var(--navy-soft); color: var(--navy); border-radius: 8px; font-size: 11px; }
.course-summary strong { font-size: 13px; }
.course-area { margin-top: 9px; border: 1px solid var(--line); border-radius: 8px; }
.course-area summary { display: flex; justify-content: space-between; gap: 10px; padding: 10px 11px; list-style: none; cursor: pointer; color: var(--navy); font-size: 12px; font-weight: 700; }
.course-area summary::-webkit-details-marker { display: none; }
.course-area summary::after { content: ''; width: 8px; height: 8px; flex-shrink: 0; align-self: center; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.course-area[open] summary::after { transform: rotate(45deg); }
.course-area summary span { color: var(--muted); font-size: 10px; font-weight: 500; }
.course-list { padding: 0 9px 7px; border-top: 1px solid #2a3040; }
.course-row { display: grid; grid-template-columns: 17px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 9px 3px; border-bottom: 1px solid #2a3040; }
.course-row:last-child { border-bottom: 0; }
.course-row input { accent-color: var(--teal); margin: 3px 0 0; }
.course-name { display: block; color: var(--ink); font-size: 11px; font-weight: 700; }
.course-benefit { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.course-cost { padding: 3px 5px; color: var(--navy); background: #252b3c; border-radius: 3px; font-size: 9px; white-space: nowrap; }
.course-row[aria-disabled="true"] { opacity: .48; }

.crisis-panel { border-top: 4px solid var(--coral); }
.home-screen { position: relative; isolation: isolate; }
.home-background { position: absolute; z-index: -2; inset: -28px -24px -64px; width: calc(100% + 48px); height: calc(100% + 92px); object-fit: cover; object-position: center; opacity: .5; pointer-events: none; }
.home-screen::before { position: absolute; z-index: -1; inset: -28px -24px -64px; content: ''; background: linear-gradient(90deg, rgba(10,12,18,.58), rgba(10,12,18,.12) 65%), linear-gradient(0deg, #0f1117, transparent 45%); pointer-events: none; }
.home-screen .welcome-copy { padding: 28px; background: rgba(15,17,23,.78); border-radius: 0 12px 12px 0; }
.image-credit { margin: 0; padding: 12px 16px; color: #bac4d5; background: #151923; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.image-credit a { color: #c6d1ff; text-underline-offset: 3px; }
.home-credit { margin-top: 24px; background: rgba(15,17,23,.9); border-radius: 8px; }
.crisis-introduction { overflow: hidden; background: #151923; border: 1px solid #57404a; border-radius: 16px; box-shadow: var(--shadow); }
.crisis-scene { position: relative; isolation: isolate; display: grid; align-items: end; min-height: clamp(460px, 62vh, 680px); margin: 0; background: #2b2430; }
.crisis-image, .crisis-scene-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.crisis-image { z-index: -2; object-fit: cover; object-position: center; }
.crisis-scene-shade { z-index: -1; background: linear-gradient(0deg, rgba(8,10,16,.98), rgba(8,10,16,.84) 36%, rgba(8,10,16,.18) 100%); }
.crisis-intro-copy { max-width: 1050px; padding: clamp(22px, 4vw, 56px); animation: crisis-copy-in .5s ease-out both; }
.crisis-intro-copy .crisis-alert { margin: 0 0 12px; color: #ff9b85; font-size: clamp(64px, 9vw, 128px); font-weight: 700; line-height: .95; letter-spacing: -.055em; text-shadow: 0 3px 30px #000; }
.crisis-intro-copy h2 { max-width: 850px; margin: 0 0 14px; color: #fff; font-size: clamp(24px, 3vw, 38px); line-height: 1.15; }
.crisis-intro-copy p { max-width: 800px; margin: 0; color: #f0f2f8; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; }
.crisis-intro-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 22px clamp(22px, 4vw, 56px); border-top: 1px solid #57404a; }
.crisis-intro-actions p { flex: 1 1 350px; max-width: 650px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.crisis-intro-actions .primary-button { flex-shrink: 0; }
.crisis-introduction .image-credit { border-top: 1px solid var(--line); }
@keyframes crisis-copy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .home-background, .home-screen::before { left: -13px; right: -13px; width: calc(100% + 26px); }
  .home-screen .welcome-copy { padding: 22px 18px; }
  .crisis-scene { min-height: 480px; }
  .crisis-intro-actions .primary-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .crisis-intro-copy { animation: none; } }
.crisis-banner { margin-bottom: 15px; padding: 14px 15px; background: var(--coral-soft); border-left: 3px solid var(--coral); }
.crisis-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.tag { padding: 4px 7px; color: #ffc0ac; background: #3c2c32; border-radius: 3px; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.crisis-banner h2 { margin-bottom: 6px; font-size: 20px; }
.crisis-banner p { margin: 0; color: #e9d3d8; font-size: 12px; line-height: 1.5; }
.quality-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.quality-option { min-height: 73px; padding: 8px; text-align: left; color: var(--ink); background: #1f2432; border: 1px solid var(--line); border-radius: 8px; }
.quality-option strong { display: block; margin-bottom: 4px; color: var(--navy); font-size: 12px; }
.quality-option span { display: block; color: var(--muted); font-size: 9px; line-height: 1.35; }
.quality-option[aria-pressed="true"] { background: var(--teal-soft); border: 2px solid var(--teal); }
.ai-grade-panel { padding: 12px 14px; color: var(--navy); background: var(--navy-soft); border-left: 3px solid var(--navy); font-size: 12px; line-height: 1.55; }
.ai-grade-panel p { margin: 6px 0 0; }
.ai-grade-panel strong { color: var(--navy); }
.ai-audit { margin: 8px 0; padding: 9px; color: var(--navy); background: var(--navy-soft); font-size: 10px; line-height: 1.5; }
.result-banner { margin: 12px 0; padding: 11px 13px; background: var(--teal-soft); border-left: 3px solid var(--teal); color: var(--navy); font-size: 12px; line-height: 1.5; }
.result-banner.bad { background: var(--coral-soft); border-color: var(--coral); }

.scoreboard { width: 100%; border-collapse: collapse; font-size: 12px; }
.scoreboard th, .scoreboard td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; }
.scoreboard th { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.scoreboard tr:last-child td { border-bottom: 0; }
.scoreboard .score-value { color: var(--navy); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 18px; font-weight: 700; }
.you-mark { display: inline-block; margin-left: 5px; padding: 3px 5px; color: var(--teal); background: var(--teal-soft); border-radius: 3px; font-size: 8px; font-weight: 700; text-transform: uppercase; }

.results-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 20px; }
.results-title h1 { margin: 0; font-size: clamp(30px, 4vw, 46px); }
.results-subtitle { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.champion { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--ochre-soft); border-left: 4px solid var(--ochre); }
.champion small, .champion strong { display: block; }
.champion small { color: #ffb79e; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.champion strong { margin-top: 2px; color: var(--navy); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 16px; }
.result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.result-card { min-width: 0; padding: 15px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--teal); border-radius: 8px; }
.result-card:nth-child(3n + 2) { border-top-color: var(--coral); }
.result-card:nth-child(3n) { border-top-color: var(--ochre); }
.result-card h3 { margin-bottom: 3px; font-size: 14px; }
.result-card .archetype { color: var(--muted); font-size: 10px; }
.final-score { margin: 10px 0; color: var(--navy); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 27px; }
.mini-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mini-stat { padding: 7px; background: #1f2432; }
.mini-stat span, .mini-stat strong { display: block; }
.mini-stat span { color: var(--muted); font-size: 8px; }
.mini-stat strong { margin-top: 2px; color: var(--navy); font-size: 13px; }
.result-card details { margin-top: 12px; border-top: 1px solid var(--line); }
.result-card details summary { padding: 10px 0 0; color: var(--teal); cursor: pointer; font-size: 10px; font-weight: 700; }
.audit-round { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line); }
.audit-round h4 { color: var(--navy); font-size: 11px; }
.audit-round p { margin: 5px 0; color: #a4adbd; font-size: 10px; line-height: 1.5; }
.audit-round ul { margin: 7px 0; padding-left: 16px; color: #a4adbd; font-size: 10px; line-height: 1.55; }
.audit-crisis { margin: 8px 0; padding: 9px; background: #0f1117; border-left: 2px solid var(--coral); }
.audit-crisis strong { color: var(--navy); }
.audit-crisis .crisis-detail { margin-top: 4px; color: #c8d2e8; line-height: 1.5; }
.result-table-wrap { overflow-x: auto; }
.result-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 11px; }
.result-table th, .result-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.result-table th { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.result-table td:first-child { color: var(--navy); font-weight: 700; }
.course-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.course-pill { padding: 4px 6px; color: #b9d4ff; background: var(--teal-soft); border-radius: 3px; font-size: 9px; }
.empty-state { padding: 32px; color: var(--muted); text-align: center; }

.result-card .curriculum-highlight,
.result-card .curriculum-highlight *,
.result-card tr.curriculum-highlight td,
.result-card .course-pill {
  color: var(--curriculum-blue);
  font-weight: 700;
}

/* Shared visual language with index.html: dark panels, warm accents, mono data. */
:root { --accent: #ff8f6b; --accent-2: #8ea2ff; --panel: #171a23; --panel-2: #1f2432; --border: #2a3040; }
.masthead, .page-tabs, .site-footer { width: min(1600px, calc(100% - 48px)); margin-left: auto; margin-right: auto; }
.masthead { margin-top: 24px; margin-bottom: 18px; min-height: 88px; padding: 18px 20px; background: linear-gradient(120deg, #2c3246, #1b1f2c); border: 1px solid var(--border); border-radius: 16px; }
.brand { font-size: 21px; letter-spacing: -.02em; }
.brand span { color: #cfd8ee; font-size: 13px; }
.live-status { padding: 9px 13px; background: #f3f4f8; color: #1c1c1c; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; }
.page-tabs { padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }
.page-tabs button { --tab-color: #9fbaff; --tab-surface: #202b42; border-radius: 10px; color: var(--tab-color); background: var(--tab-surface); border-color: color-mix(in srgb, var(--tab-color) 28%, var(--border)); transition: background .15s, border-color .15s; }
#gameTab { --tab-color: #a9b8ff; --tab-surface: #272b47; }
#scoreboardTab { --tab-color: #82d6bd; --tab-surface: #1c3432; }
#quickTab { --tab-color: #f0c78e; --tab-surface: #382f26; }
#scoringTab { --tab-color: #94c9f5; --tab-surface: #223247; }
#rulesTab { --tab-color: #c4b1ed; --tab-surface: #30283e; }
#teacherTab { --tab-color: #f3ac9d; --tab-surface: #3a2b30; }
.page-tabs button:hover { background: color-mix(in srgb, var(--tab-color) 22%, var(--panel)); border-color: var(--tab-color); }
.page-tabs button[aria-current="page"] { background: var(--tab-color); border-color: var(--tab-color); color: #101622; box-shadow: inset 0 -3px 0 #0003; }
.page-tabs button:focus-visible { outline: 3px solid var(--tab-color); outline-offset: 3px; }
.teacher-team { margin: 14px 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.teacher-team > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px; cursor: pointer; background: var(--panel-2); }
.teacher-team-name { font-size: 18px; font-weight: 700; margin-right: auto; }
.teacher-team-content { padding: 18px; }
.readiness { display: inline-flex; gap: 8px; align-items: center; color: #b7c6e2; font-size: 12px; padding: 7px 10px; border-radius: 20px; background: #253047; }
.readiness::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.readiness.ready { color: #9be6bc; background: #1c3a2c; }
.teacher-score-summary { width: 100%; }
.teacher-score-summary th, .teacher-score-summary td { padding: 10px; text-align: left; border-bottom: 1px solid var(--border); }
.teacher-score-summary td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
#connectionStatus { min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
.app-shell { width: min(1600px, calc(100% - 48px)); padding-top: 28px; min-height: calc(100vh - 270px); }
.site-footer { padding: 20px 0 28px; background: transparent; color: var(--muted); border-top: 1px solid var(--border); }
.homepage-return { padding: 0 24px 36px; text-align: center; }
.homepage-return a { display: inline-flex; justify-content: center; align-items: center; padding: 12px 18px; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; }
h1 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -.025em; }
h2, h3 { letter-spacing: -.01em; }
h4 { font-size: 14px; }
.kicker { color: var(--accent-2); letter-spacing: .1em; }
.lede { color: #cfd8ee; }
.welcome { min-height: 440px; }
.welcome-copy { border-color: var(--accent-2); }
.welcome-copy .question { font-size: 22px; }
.panel, .setup-panel { border-radius: 16px; box-shadow: var(--shadow); padding: 22px; }
.setup-panel { background: linear-gradient(180deg, #202638, #171a23); border-top: 4px solid var(--accent); }
.panel-heading h3 { font-size: 18px; }
.primary-button, .secondary-button, .quiet-button { border-radius: 10px; }
.primary-button { background: #f0643a; color: #111420; }
.primary-button:hover { background: var(--accent); }
.secondary-button, .quiet-button { background: var(--panel-2); color: var(--ink); }
.secondary-button:hover, .quiet-button:hover { background: #2b334b; border-color: var(--accent-2); }
.text-input, .select-input, .plan-input { border-radius: 8px; font-family: 'IBM Plex Mono', Consolas, monospace; }
.microcopy { font-size: 12px; line-height: 1.65; }
.field-label { color: #c8d2e8; font-size: 13px; }
.round-track { border-radius: 12px; overflow: hidden; }
.round-step { font-size: 12px; }
.round-step.active b, .round-step.done b { background: var(--accent-2); color: #111420; }
.stat-number, .budget-total strong, .final-score, .scoreboard .score-value, .benefit-metrics strong { font-family: 'IBM Plex Mono', Consolas, monospace; }
.stat-name { font-size: 11px; }
.budget-total { background: #252c40; border: 1px solid #3c4459; border-radius: 12px; }
.budget-table { font-size: 13px; }
.budget-table th { font-size: 11px; }
.budget-table .select-input { font-size: 12px; }
.budget-summary { font-size: 13px; flex-wrap: wrap; }
.budget-summary strong { color: var(--green); }
.budget-summary.over strong { color: var(--red); }
.course-summary { font-size: 12px; }
.course-area { border-radius: 10px; overflow: hidden; background: #1b2030; }
.course-area summary { padding: 13px 14px; font-size: 13px; }
.course-area summary span { margin-left: auto; font-size: 11px; }
.course-row { padding: 12px 4px; }
.course-name { font-size: 13px; }
.course-benefit { font-size: 12px; line-height: 1.6; }
.course-cost { font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 11px; }
.ledger-table { font-size: 13px; }
.ledger-table thead th { font-size: 12px; }
.curriculum-table td:last-child { font-size: 12px; }
.table-subtext { font-size: 11px; }
.benefit-metrics > span { background: linear-gradient(180deg, #252d43, #1c2231); border: 1px solid #333d56; border-radius: 12px; }
.benefit-list { font-size: 13px; line-height: 1.8; gap: 8px; }
.benefit-list li::marker { color: var(--muted); }
.effect { font-weight: 700; }
.effect.positive, .positive { color: var(--green); }
.effect.negative, .negative, .retraining-note { color: var(--red); }
.effect.neutral, .neutral { color: var(--muted); }
.effect-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0; font-size: 12px; font-weight: 600; }
.effect-status { display: inline-block; margin: 0 4px; padding: 1px 7px; color: var(--green); background: rgba(127,215,163,.09); border: 1px solid rgba(127,215,163,.25); border-radius: 6px; font-size: 11px; }
.effect-status.inactive { color: var(--muted); background: var(--panel-2); border-color: var(--border); }
.result-banner { border-radius: 8px; font-size: 13px; }
.result-banner.bad { color: #ffd5d2; }
.crisis-banner { border-radius: 10px; }
.crisis-banner p { color: #e9d3d8; font-size: 14px; }
.tag { font-size: 10px; }
.result-card { border-radius: 16px; background: linear-gradient(180deg, #1c2334, #141926); padding: 20px; }
.audit-round p, .audit-round ul, .audit-round h4 { font-size: 12px; }
.teacher-reset-panel { border-top: 3px solid var(--coral); }
.teacher-reset-panel input[type="password"] { max-width: 360px; }
.teacher-unlock-panel { max-width: 620px; }
.teacher-unlock-panel input { max-width: 360px; }
.reset-confirmation { width: min(560px, calc(100% - 32px)); padding: 26px; color: var(--ink); background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--red); border-radius: 16px; box-shadow: 0 24px 90px rgba(0,0,0,.6); }
.reset-confirmation::backdrop { background: rgba(5,8,16,.8); }
.reset-confirmation p { font-size: 14px; line-height: 1.7; }

/* Two complementary guides: a complete handbook and a compact crisis companion. */
.guide-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 22px; align-items: start; }
.guide-contents { position: sticky; top: 18px; padding: 18px; max-height: calc(100vh - 36px); overflow-y: auto; }
.guide-contents h2 { font-size: 18px; margin-bottom: 12px; }
.guide-contents a { display: block; padding: 8px 6px; border-radius: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; text-decoration: none; }
.guide-contents a:hover, .guide-contents a:focus { color: var(--ink); background: var(--panel-2); }
.guide-sections { min-width: 0; }
.guide-section { scroll-margin-top: 20px; margin-bottom: 22px; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.guide-section:focus { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.guide-section h2 { font-size: 25px; line-height: 1.3; margin-bottom: 18px; }
.guide-section h3 { font-size: 17px; line-height: 1.4; margin: 0 0 10px; }
.guide-section p, .quick-card p, .quick-crisis p { margin: 12px 0; }
.guide-section li, .quick-card li, .quick-crisis li { padding-left: 3px; margin: 8px 0; }
.guide-section ul, .guide-section ol, .quick-card ul, .quick-crisis ol { padding-left: 22px; }
.guide-table { font-size: 13px; line-height: 1.65; }
.guide-table thead th { white-space: normal; }
.guide-table tbody th { min-width: 95px; }
.guide-table td { min-width: 65px; }
.guide-table td p { margin: 8px 0 0; }
.guide-table .table-subtext { display: block; font-weight: 400; margin-top: 5px; }
.guide-subsection { margin-top: 25px; }
.guide-equation { padding: 16px; border: 1px solid #3c4459; border-radius: 10px; background: #252c40; color: #dce5f8; font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 13px; line-height: 1.9; }
.guide-example { margin: 18px 0; padding: 16px; border-left: 3px solid var(--accent-2); border-radius: 8px; background: var(--navy-soft); }
.guide-crisis { margin: 20px 0; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: #1b2030; }
.guide-crisis p { font-size: 13px; }
.guide-deck summary { padding: 12px; cursor: pointer; border: 1px solid var(--border); border-radius: 8px; color: var(--accent-2); }
.quick-crisis, .quick-card { font-size: 14px; line-height: 1.75; }
.quick-crisis { border-top: 3px solid var(--accent); }
.quick-crisis h2, .quick-card h2 { font-size: 23px; line-height: 1.3; }
.quick-steps { columns: 2; column-gap: 35px; }
.quick-steps li { break-inside: avoid; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.quick-card { min-width: 0; height: 100%; margin: 0; }
.guide-link { padding: 8px 0; color: var(--accent-2); background: transparent; border: 0; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.guide-link:hover, .guide-link:focus { color: var(--ink); text-decoration: underline; }
@media (max-width: 1000px) { .guide-layout { grid-template-columns: minmax(0, 1fr); } .guide-contents { position: static; max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-contents h2 { grid-column: 1 / -1; } }
@media (max-width: 640px) { .quick-grid { grid-template-columns: minmax(0, 1fr); } .quick-steps { columns: 1; } .guide-section h2 { font-size: 22px; } .guide-table { font-size: 12px; } .guide-table th, .guide-table td { padding: 9px 7px; } .guide-section { scroll-margin-top: 10px; } }
@media print { .guide-layout, .quick-grid { display: block; } .guide-contents { position: static; max-height: none; } .guide-section, .quick-card { break-inside: auto !important; } .guide-crisis, .guide-example { break-inside: avoid; } .guide-link { display: none; } .guide-page .result-table-wrap { overflow: visible; } }

/* A saved crisis result, revealed one contribution at a time. */
.crisis-result-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.calculation-panel { min-width: 0; }
.calculation-panel h2 { margin-bottom: 20px; }
.calculation-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.calculation-table th, .calculation-table td { padding: 12px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.calculation-table thead th { color: var(--muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.calculation-table th:first-child { width: 68%; }
.calculation-table td { text-align: right; font-family: 'IBM Plex Mono', Consolas, monospace; font-weight: 600; }
.calculation-table th:not(:first-child) { text-align: right; }
.calculation-table .table-subtext { display: block; margin-top: 4px; font-weight: 400; line-height: 1.5; }
.calculation-table tfoot { color: var(--green); background: rgba(127,215,163,.08); font-size: 18px; }
.calculation-step { opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s ease, transform .3s ease; }
.calculation-step.revealed { opacity: 1; visibility: visible; transform: translateY(0); }
.calculation-step.current-step { background: rgba(142,162,255,.12); }
.calculation-step.current-step th { color: #d6dfff; }
.current-contribution { margin-top: 14px; padding: 10px; border-radius: 8px; background: rgba(127,215,163,.09); color: var(--green); font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 12px; line-height: 1.6; }
.crisis-result-summary { position: sticky; top: 24px; text-align: center; background: linear-gradient(160deg, #252d43, #171a23); }
.d4-stage { display: grid; place-items: center; min-height: 230px; background: radial-gradient(ellipse at 50% 85%, rgba(255,175,98,.08), transparent 64%); }
.d4-die { width: 260px; max-width: 100%; }
.d4-die canvas { display: block; width: 100%; height: auto; }
.die-status { margin: 0 0 22px; color: var(--accent-2); font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 13px; }
.response-counter { display: flex; flex-direction: column; gap: 7px; padding: 22px 8px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.response-counter > span { color: var(--muted); font-size: 12px; line-height: 1.6; }
.response-counter strong { color: var(--accent); font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 76px; line-height: 1.1; }
.response-counter b { color: var(--ink); }
.calculation-complete .response-counter strong { color: var(--green); }
.response-failure.calculation-complete .response-counter strong, .response-failure .calculation-table tfoot { color: var(--red); }
.crisis-outcome { margin-top: 20px; animation: outcome-appear .45s ease both; }
.crisis-outcome.outcome-success { border-top: 3px solid var(--green); }
.crisis-outcome.outcome-failure { border-top: 3px solid var(--red); }
.outcome-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.outcome-heading h2 { margin-bottom: 0; font-size: clamp(24px, 3vw, 34px); }
.outcome-margin { font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 22px; }
.outcome-margin span { display: block; margin-top: 5px; color: var(--muted); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 12px; }
.outcome-consequence { font-size: 16px; line-height: 1.65; }
.outcome-effects { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 14px; }
.result-controls { margin-top: 20px; }
.result-controls button:disabled { opacity: .5; cursor: wait; }
@keyframes outcome-appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 800px) {
  .crisis-result-layout { grid-template-columns: minmax(0, 1fr); }
  .crisis-result-summary { grid-row: 1; position: sticky; top: 8px; z-index: 2; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 0 10px; padding: 12px; }
  .crisis-result-summary > .kicker { display: none; }
  .d4-stage { grid-column: 1; grid-row: 1 / 3; min-height: 100px; }
  .d4-die { width: 90px; }
  .die-status { grid-column: 1; margin: 0; font-size: 10px; }
  .response-counter { grid-column: 2; grid-row: 1 / 4; padding: 4px; border: 0; }
  .response-counter strong { font-size: 48px; }
  .response-counter > span { font-size: 11px; }
  #calculationStatus { grid-column: 1 / -1; margin: 8px 0 0; }
  #currentContribution, #skipResultAnimation { grid-column: 1 / -1; }
  .calculation-table { font-size: 12px; }
  .calculation-table th, .calculation-table td { padding: 10px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .calculation-step, .d4-die, .crisis-outcome { animation: none !important; transition: none !important; transform: none !important; }
}
@media print {
  :root { color-scheme: light; --ink: #162338; --muted: #49556a; --navy: #162338; --navy-soft: #edf0f5; --white: #fff; --panel: #fff; --panel-2: #f4f6f8; --line: #ccd1dc; --teal-soft: #edf0f5; --green: #176638; --red: #a12525; }
  .panel, .result-card, .stat-cell, .ledger-table tbody tr, .audit-crisis { background: #fff !important; color: #162338; }
  .calculation-step { opacity: 1; visibility: visible; transform: none; }
  .crisis-result-summary { position: static; }
  .result-controls { display: none; }
}

@media (max-width: 940px) {
  .welcome { grid-template-columns: 1fr; gap: 24px; max-width: 750px; min-height: unset; margin: 30px auto; }
  .welcome-copy { padding-left: 22px; }
  .setup-panel { max-width: 620px; }
  .plan-layout { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .masthead { min-height: 58px; padding: 0 15px; }
  .brand { gap: 8px; font-size: 14px; }
  .brand span, .edition-mark { display: none; }
  .app-shell { width: calc(100% - 26px); padding: 25px 0 45px; }
  .welcome { margin: 8px auto; }
  .welcome-copy { padding: 22px 0 26px 18px; }
  .welcome-copy .question { margin-top: 22px; font-size: 17px; }
  .setup-panel, .panel { padding: 15px; }
  .mode-switch { grid-template-columns: 1fr; }
  .mode-choice { min-height: 68px; }
  .campaign-head { align-items: start; flex-direction: column; }
  .round-track { grid-template-columns: repeat(2, 1fr); }
  .round-step:nth-child(2) { border-right: 0; }
  .round-step:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-cell { min-height: 72px; }
  .budget-table { font-size: 11px; }
  .budget-table th, .budget-table td { padding: 6px 4px; }
  .budget-table .select-input { padding: 6px; font-size: 10px; }
  .quality-options { grid-template-columns: repeat(2, 1fr); }
  .result-grid { grid-template-columns: 1fr; }
  .results-title { align-items: start; flex-direction: column; }
  .site-footer { flex-direction: column; gap: 5px; padding: 15px; }
}
@media print {
  body { background: var(--white); }
  .masthead, .site-footer, .page-tabs, .button-row, .homepage-return { display: none !important; }
  .app-shell { width: 100%; padding: 0; }
  .result-card, .panel { break-inside: avoid; box-shadow: none; }
  .result-card details:not([open]) > *:not(summary) { display: block !important; }
}

.tutorial-banner p { margin: 10px 0; }
.teacher-crisis { border-top: 1px solid var(--line); padding: 20px 0; }
.teacher-crisis summary { cursor: pointer; font-weight: 600; }

#teacherGrade { width: 140px; font-size: 24px; }
#teacherGradeHint { margin: 8px 0 16px; padding: 12px 14px; border-left: 3px solid var(--teal); background: var(--navy-soft); color: var(--ink); font-size: 12px; line-height: 1.7; }