@charset "UTF-8";

/*
 * Neobrutalist accessibility layer.
 * The course opens at a true 200% reading size and reflows instead of zooming.
 */
:root {
  --neo-black: #171717;
  --neo-white: #fffef7;
  --neo-shadow: 8px 8px 0 var(--neo-black);
  --neo-shadow-small: 4px 4px 0 var(--neo-black);
  --neo-border: 3px solid var(--neo-black);
  --fs-body: 1rem;
  --fs-box-body: 1.5rem;
  --fs-box-title: 2rem;
  --fs-ui: .75rem;
  --fs-small: .6875rem;
  --fs-micro: .5625rem;
  --fs-lead: clamp(1.05rem, 1.35vw, 1.28rem);
  --fs-block-title: 1.75rem;
  --fs-card-title: 1.25rem;
  --fs-input: 1rem;
  --fs-h1: clamp(3.5rem, 6.2vw, 7.5rem);
  --fs-h2: clamp(2.7rem, 4.2vw, 5.3rem);
  --fs-h3: clamp(2.3rem, 4vw, 4.7rem);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[data-font-size="150"] {
  --fs-body: 1.5rem;
  --fs-box-body: 2rem;
  --fs-box-title: 2.5rem;
  --fs-ui: 1.125rem;
  --fs-small: 1.03125rem;
  --fs-micro: .84375rem;
  --fs-lead: clamp(1.575rem, 2.025vw, 1.92rem);
  --fs-block-title: 2.625rem;
  --fs-card-title: 1.875rem;
  --fs-input: 1.5rem;
  --fs-h1: clamp(5.25rem, 9.3vw, 11.25rem);
  --fs-h2: clamp(4.05rem, 6.3vw, 7.95rem);
  --fs-h3: clamp(3.45rem, 6vw, 7.05rem);
}

html[data-font-size="200"] {
  --fs-body: 2rem;
  --fs-box-body: 2.5rem;
  --fs-box-title: 3rem;
  --fs-ui: 1.5rem;
  --fs-small: 1.375rem;
  --fs-micro: 1.125rem;
  --fs-lead: clamp(2.1rem, 2.7vw, 2.56rem);
  --fs-block-title: 3.5rem;
  --fs-card-title: 2.5rem;
  --fs-input: 2rem;
  --fs-h1: clamp(7rem, 12.4vw, 15rem);
  --fs-h2: clamp(5.4rem, 8.4vw, 10.6rem);
  --fs-h3: clamp(4.6rem, 8vw, 9.4rem);
}

html[data-theme="sun"] {
  --paper: #fff7cf;
  --paper-2: #fffef5;
  --ink: #171717;
  --muted: #514f48;
  --line: #171717;
  --red: #ffde59;
  --red-deep: #c83b2f;
  --blue: #3155d9;
  --gold: #ffde59;
  --green: #198754;
  --night: #171717;
  --night-2: #242424;
  --white: #fffef7;
}

html[data-theme="coral"] {
  --paper: #fff0e9;
  --paper-2: #fffaf5;
  --ink: #171717;
  --muted: #5c4742;
  --line: #171717;
  --red: #ff6b5f;
  --red-deep: #a82738;
  --blue: #4354e8;
  --gold: #ffd84d;
  --green: #157a60;
  --night: #20191d;
  --night-2: #312329;
  --white: #fffaf5;
}

html[data-theme="aqua"] {
  --paper: #ddfff3;
  --paper-2: #f4fff9;
  --ink: #10211d;
  --muted: #36574f;
  --line: #10211d;
  --red: #64e6af;
  --red-deep: #a02f64;
  --blue: #245cc7;
  --gold: #ffe268;
  --green: #087f5b;
  --night: #10211d;
  --night-2: #17332b;
  --white: #f8fffb;
}

body {
  font-size: var(--fs-body);
  background-image: linear-gradient(135deg, rgba(255,255,255,.42) 25%, transparent 25%);
  background-size: 28px 28px;
}

body::before { display: none; }

/* Flat ink, square corners, hard shadows: one visual language everywhere. */
:where(
  .button, .lesson-reader, .progress-card, .source-link, .lesson-figure,
  .worked-example, .why-card, .quick-check, .coverage-panel, .term-card,
  .question-card, .lab-tabs, .payoff-table, .mini-theorem, .analysis-card,
  .terminal-editor, .characteristic-editor, .allocation-editor,
  #game-tree-svg, #allocation-simplex, .core-summary, .lab-error
) {
  border-radius: 0 !important;
}

:where(.lesson-reader, .progress-card, .worked-example, .coverage-panel, .question-card) {
  border: var(--neo-border);
  box-shadow: var(--neo-shadow);
}

.topbar {
  height: auto;
  min-height: 84px;
  padding-block: 10px;
  background: var(--night);
  border-bottom: 4px solid var(--neo-black);
  backdrop-filter: none;
}

.brand-mark {
  width: 52px;
  height: 52px;
  border: 3px solid var(--white);
  background: var(--red);
  color: var(--neo-black);
  box-shadow: 4px 4px 0 var(--white);
}

.top-actions { flex-wrap: wrap; }
.language-switch,
.font-switch,
.theme-switch {
  display: flex;
  overflow: visible;
  border: 2px solid var(--white);
  border-radius: 0;
  background: var(--night);
}

.language-switch button,
.font-switch button,
.theme-switch button {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  color: var(--white);
  background: transparent;
  font: 800 var(--fs-small)/1 var(--mono);
  cursor: pointer;
}

.language-switch button + button,
.font-switch button + button,
.theme-switch button + button { border-left: 2px solid var(--white); }

.language-switch button.active,
.font-switch button.active {
  color: var(--neo-black);
  background: var(--red);
}

.theme-switch button { min-width: 42px; padding: 7px; }
.theme-switch button span {
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--neo-black);
}
.theme-sun span { background: #ffde59; }
.theme-coral span { background: #ff6b5f; }
.theme-aqua span { background: #64e6af; }
.theme-switch button.active { background: var(--white); }
.theme-switch button.active span { box-shadow: 3px 3px 0 var(--blue); transform: translate(-2px, -2px); }

.button {
  min-height: 3.25em;
  padding: .65em 1em;
  border: var(--neo-border);
  box-shadow: var(--neo-shadow-small);
  font-size: var(--fs-ui);
  font-weight: 900;
}
.button:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--neo-black); }
.button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--neo-black); }
.button-primary { color: var(--neo-black); background: var(--red); border-color: var(--neo-black); }
.button-quiet { background: var(--paper-2); }

.hero { border-bottom: 5px solid var(--neo-black); }
.hero h1 { max-width: 100%; font-size: var(--fs-h1); line-height: .86; word-break: keep-all; overflow-wrap: normal; }
.hero h1 em { color: var(--red); text-shadow: 5px 5px 0 #000; }
.hero-visual svg { border: 4px solid var(--white); box-shadow: 12px 12px 0 var(--red); }
.visual-caption { border: var(--neo-border); box-shadow: var(--neo-shadow); transform: rotate(1deg); }
.hero-stats { border-block: 4px solid var(--neo-black); }
.hero-stats > div + div { border-left: 3px solid var(--neo-black); }

.section-heading h2,
.source-notes h2 { font-size: var(--fs-h2); }
.lesson-masthead h3 { font-size: var(--fs-h3); }
.lesson-lead p { font-size: var(--fs-lead); }
.lesson-block-content h4 { font-size: var(--fs-block-title); }
.lesson-block-content p,
.lesson-block-content li,
.beginner-steps li,
.worked-example p,
.why-card p,
.quick-check summary,
.quick-answer p,
.lab-controls p,
.analysis-card p,
.tree-outcome p,
.answer-option span { font-size: var(--fs-box-body) !important; }

.section-heading > p,
.exam-intro p { font-size: var(--fs-body); }

.term-card h3 { font-size: var(--fs-box-title); }
.term-card h4,
.term-card p,
.term-card .misconception,
.question-card legend,
.answer-feedback,
.coverage-heading p,
.lab-howto li { font-size: var(--fs-box-body) !important; }

.verdict-item strong,
.prob-card strong,
.utility-results strong,
.analysis-card strong,
.tree-outcome strong,
.core-summary strong { font-size: var(--fs-box-body) !important; }

.section-index, .eyebrow, .field-label,
.lesson-tag, .source-badge, .beginner-section-title,
.why-card > b, .quick-answer > b, .lab-howto b,
.analysis-card > span, .terminal-editor legend,
.characteristic-editor legend, .allocation-editor legend,
.coverage-kicker, .exam-score-stamp span { font-size: var(--fs-micro) !important; }

.brand-copy strong, .brand-copy small, .topnav a,
.nav-num, .nav-title, .nav-title small, .nav-check,
.lesson-nav button, .lab-tabs button, .lab-tabs button small,
.mini-theorem, .pair-legend, .chart-legend, figcaption,
.bimatrix-table, .step-table, .constraint-table,
.terminal-editor label, .characteristic-editor label,
.allocation-editor label, .core-summary span, .core-summary b,
.core-summary small, .allocation-bar, .modern-note,
.atlas-toolbar, .source-note-grid, footer, .toast { font-size: var(--fs-small) !important; }

input, select, textarea, output { font-size: var(--fs-input) !important; }
.lab-controls select,
.lab-controls input[type="number"] { min-height: 2.7em; padding: .35em .55em; border: 3px solid currentColor; border-radius: 0; }

.rail-heading, .progress-card, .source-link,
.lesson-nav button, .lesson-masthead, .lesson-lead,
.lesson-block, .beginner-steps, .worked-example, .why-card,
.quick-check, .term-card, .coverage-heading, .question-card {
  border-color: var(--neo-black);
}
.lesson-nav button.active { background: var(--red); box-shadow: inset 8px 0 0 var(--neo-black); }
.beginner-steps { border: var(--neo-border); background: color-mix(in srgb, var(--red) 28%, var(--paper-2)); }
.worked-example { background: var(--paper-2); }
.why-card { border: var(--neo-border); background: color-mix(in srgb, var(--gold) 30%, var(--paper-2)); }
.quick-check { border: var(--neo-border); background: var(--paper-2); }
.quick-answer { border-top: 3px solid var(--neo-black); background: var(--paper); }
.term-card { border: var(--neo-border); background: var(--paper-2); }
.term-card:hover { box-shadow: var(--neo-shadow); transform: translate(-3px, -3px); }

.lab-tabs { border: 3px solid var(--white); }
.lab-tabs button { min-height: 5em; padding: .7em; border-width: 0 2px 2px 0; border-style: solid; border-color: #64706b; }
.lab-tabs button[aria-selected="true"] { color: var(--neo-black); background: var(--red); }
.lab-workbench, .extra-lab-layout { min-height: 0; }
.lab-controls { padding: clamp(28px, 4vw, 58px); }
.lab-controls h3 { font-size: var(--fs-block-title); }
.matrix-stage, .simulation-stage, .utility-stage, .coalition-stage, .extra-stage { padding: clamp(28px, 4vw, 58px); }
.payoff-table, .bimatrix-table, .step-table, .constraint-table { font-size: var(--fs-small); }
.payoff-table th, .payoff-table td,
.bimatrix-table th, .bimatrix-table td,
.step-table th, .step-table td,
.constraint-table th, .constraint-table td { height: auto; min-height: 3em; padding: .65em; border-width: 2px; }
.payoff-input, .bi-payoff { min-height: 2.5em; font-size: var(--fs-input); }
.analysis-card strong, .tree-outcome strong, .core-summary strong { line-height: 1.35; }

.exam-section { background: var(--red-deep); border-block: 5px solid var(--neo-black); }
.question-card { background: var(--paper-2); color: var(--ink); }
.answer-option { border: 3px solid var(--neo-black); background: var(--paper); }
.answer-option:has(input:checked) { background: var(--red); box-shadow: var(--neo-shadow-small); }

/* 200% is an accessibility reflow mode: no two-column region is allowed to squeeze text. */
html[data-font-size="200"] .topbar {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
}
html[data-font-size="200"] .topnav { display: none; }
html[data-font-size="200"] .brand-copy { display: none; }
html[data-font-size="200"] .top-actions { justify-self: end; justify-content: flex-end; }
html[data-font-size="200"] .hero-grid,
html[data-font-size="200"] .section-heading,
html[data-font-size="200"] .course-main .section-heading,
html[data-font-size="200"] .course-shell,
html[data-font-size="200"] .lesson-lead,
html[data-font-size="200"] .lesson-block,
html[data-font-size="200"] .lab-workbench,
html[data-font-size="200"] .extra-lab-layout,
html[data-font-size="200"] .exam-section,
html[data-font-size="200"] .source-notes {
  grid-template-columns: minmax(0, 1fr);
}
html[data-font-size="200"] .hero-grid { min-height: auto; }
html[data-font-size="200"] .hero-copy { max-width: 1200px; }
html[data-font-size="200"] .hero-visual { width: min(100%, 760px); }
html[data-font-size="200"] .section-heading > p.lang-en,
html[data-font-size="200"] .course-main .section-heading > p.lang-en { grid-column: auto; margin-top: 0; }
html[data-font-size="200"] .course-rail,
html[data-font-size="200"] .exam-intro { position: relative; top: 0; }
html[data-font-size="200"] .lesson-nav { display: flex; max-height: none; overflow-x: auto; border: var(--neo-border); }
html[data-font-size="200"] .lesson-nav button { flex: 0 0 min(78vw, 520px); }
html[data-font-size="200"] .source-link { display: none; }
html[data-font-size="200"] .lesson-lead > div + div { border-left: 0; border-top: 3px solid var(--neo-black); }
html[data-font-size="200"] .lab-controls { border-right: 0; border-bottom: 3px solid #596861; }
html[data-font-size="200"] .exam-intro { max-width: none; padding: 0; }
html[data-font-size="200"] .exam-form { padding: 2em 0 0; }
html[data-font-size="200"] .exam-actions { grid-column: 1; padding-right: 0; }
html[data-font-size="200"] .atlas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-font-size="200"] .analysis-cards,
html[data-font-size="200"] .core-visuals { grid-template-columns: minmax(0, 1fr); }
html[data-font-size="200"] .nash-card { grid-column: auto; }

/* The 150% default keeps 200%-sized reading boxes spacious. */
html[data-font-size="150"] .course-shell,
html[data-font-size="150"] .lesson-block,
html[data-font-size="150"] .lab-workbench,
html[data-font-size="150"] .extra-lab-layout,
html[data-font-size="150"] .exam-section {
  grid-template-columns: minmax(0, 1fr);
}
html[data-font-size="150"] .course-rail,
html[data-font-size="150"] .exam-intro { position: relative; top: 0; }
html[data-font-size="150"] .lesson-nav { display: flex; max-height: none; overflow-x: auto; border: var(--neo-border); }
html[data-font-size="150"] .lesson-nav button { flex: 0 0 min(72vw, 460px); }
html[data-font-size="150"] .lesson-block { gap: 14px; }
html[data-font-size="150"] .lab-controls { border-right: 0; border-bottom: 3px solid #596861; }
html[data-font-size="150"] .exam-intro { max-width: none; padding: 0; }
html[data-font-size="150"] .exam-form { padding: 2em 0 0; }
html[data-font-size="150"] .exam-actions { grid-column: 1; padding-right: 0; }

@media (max-width: 900px) {
  .topbar { position: relative; grid-template-columns: 1fr; }
  .brand { justify-self: center; }
  .top-actions { justify-self: stretch !important; justify-content: center !important; }
  .hero-grid { padding-top: 55px; }
  html[data-font-size="200"] .atlas-grid { grid-template-columns: 1fr; }
  .characteristic-editor, .allocation-editor { grid-template-columns: 1fr; }
  .characteristic-editor .grand-value { grid-column: auto; grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .topbar { padding-inline: 8px; }
  .top-actions { gap: 6px; }
  .language-switch button,
  .font-switch button,
  .theme-switch button { min-width: 40px; min-height: 40px; padding: 5px; }
  .theme-switch button { min-width: 38px; }
  .theme-switch button span { width: 22px; height: 22px; }
  .hero h1 { font-size: min(var(--fs-h1), 17vw); }
  .section-heading h2, .source-notes h2 { font-size: min(var(--fs-h2), 17vw); }
  .lesson-masthead h3 { font-size: min(var(--fs-h3), 15vw); }
  .lesson-block-content h4, .lab-controls h3 { font-size: min(var(--fs-block-title), 12vw); }
  .lesson-masthead { grid-template-columns: 1fr; }
  .lesson-footer-nav { margin-inline: 4vw; }
  .lab-tabs { grid-template-columns: 1fr; }
  .lab-tabs button { grid-template-columns: 2em minmax(0, 1fr); }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stats > div + div { border-left: 0; border-top: 3px solid var(--neo-black); }
  .core-summary { grid-template-columns: 1fr; }
  .core-summary > div + div { border-left: 0; border-top: 2px solid #56665f; }
}

@media print {
  html { --fs-body: 12pt !important; }
}