/* The AS–AD model. Tokens and type match the other EconWorkbench sites.
   Semantic colors (the lectures' convention): --ad (aggregate demand, blue),
   --lras (long-run supply, green), --sras (short-run supply, red), --expect
   (expected inflation), --oldpath (the old potential path). Every curve also has
   a direct label and its own stroke, so no curve is identified by colour alone. */
:root{
  --bg:#F3F5F8;--surface:#FFFFFF;--surface2:#EAEEF4;--ink:#1C2433;--muted:#566175;--rule:#D3D9E3;
  --accent:#1F5FA8;--ad:#1F5FA8;--lras:#1E7A3C;--sras:#BE2840;--expect:#7A3E98;--oldpath:#5E6878;
  --ok:#23704A;--bad:#A8261D;--ghost:#7D8798;--hl:#FFF3C4;--focus:#1F5FA8;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color-scheme:light;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#11161F;--surface:#19202C;--surface2:#222B3A;--ink:#E5E9F1;--muted:#A2ACBE;--rule:#323C4E;
  --accent:#76AEF2;--ad:#76AEF2;--lras:#5CC27F;--sras:#FF7186;--expect:#CB98EA;--oldpath:#A2ACBE;
  --ok:#62C68F;--bad:#FF8B80;--ghost:#6B7689;--hl:#3D3720;--focus:#76AEF2;color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#11161F;--surface:#19202C;--surface2:#222B3A;--ink:#E5E9F1;--muted:#A2ACBE;--rule:#323C4E;
  --accent:#76AEF2;--ad:#76AEF2;--lras:#5CC27F;--sras:#FF7186;--expect:#CB98EA;--oldpath:#A2ACBE;
  --ok:#62C68F;--bad:#FF8B80;--ghost:#6B7689;--hl:#3D3720;--focus:#76AEF2;color-scheme:dark;}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:17.5px;line-height:1.62}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
sub,sup{font-size:.72em;line-height:0}
code{font-size:.9em}

/* navigation */
.topnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--surface);border-bottom:1px solid var(--rule);font-family:var(--sans)}
.topnav .in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:6px 20px}
.topnav .model-nav{display:flex;align-items:center;gap:18px;min-width:0;overflow-x:auto;scrollbar-width:thin;padding:4px}
.topnav .home-link{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:8px 11px;border:1px solid var(--rule);border-radius:6px;color:var(--ink);font-size:14px;font-weight:700;text-decoration:none}
.topnav .home-link:hover{background:var(--surface2)}
.home-link svg{width:17px;height:17px;flex:none}
.skip-link{position:fixed;top:8px;left:20px;z-index:20;padding:8px 14px;background:var(--surface);color:var(--ink);font-family:var(--sans);transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.topnav .brand{font-weight:700;white-space:nowrap;font-size:15px;text-decoration:none;color:var(--ink)}
.parts{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.parts>li{display:flex;align-items:center;gap:6px}
.part-name{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.parts ol{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.parts a{display:block;white-space:nowrap;text-decoration:none;color:var(--muted);font-size:13.5px;padding:5px 8px;border-radius:6px}
.parts a:hover,.parts a[aria-current="page"]{background:var(--surface2);color:var(--ink)}
.parts a .n{font-weight:700;margin-right:4px}
.parts a[data-progress="complete"] .tick{color:var(--ok)}
.parts a[data-progress="prediction"] .tick{color:var(--muted)}

/* layout */
main{max-width:1180px;margin:0 auto;padding:0 20px 80px}
.hero{padding:52px 0 28px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:start}
.hero h1{font-family:var(--sans);font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-.015em;margin:0 0 18px;font-weight:700}
.hero p{max-width:60ch;margin:0 0 14px}
.lede{font-size:19px}
.modelcard{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:18px 20px;font-family:var(--sans)}
.modelcard h2{font-size:16px;margin:0 0 8px}
.eq-big{font-family:var(--serif);font-size:clamp(20px,2.6vw,26px);margin:6px 0 10px;text-align:center}
.index-wrap{grid-column:1/-1}
.part-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.pi-part h3{margin:6px 0 8px}
.pi-list{list-style:none;margin:0;padding:0;font-family:var(--sans)}
.pi-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:9px 0;border-top:1px solid var(--rule)}
.pi-list a{font-weight:700;text-decoration:none;color:var(--ink);font-size:16px}
.pi-list a:hover .pi-t{text-decoration:underline}
.pi-list .n{color:var(--muted);margin-right:8px;font-variant-numeric:tabular-nums}
.pi-q{grid-column:1;color:var(--muted);font-size:14.5px;padding-left:24px}
.pi-state{grid-column:2;grid-row:1;color:var(--ok);font-weight:700}
.pi-list li[data-status="planned"] a{color:var(--muted)}
section.unit{border-top:2px solid var(--ink);padding:30px 0 18px;margin-top:24px}
.unit-head{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:baseline;margin-bottom:12px}
.unit-head .num{font-family:var(--sans);font-weight:700;font-size:44px;line-height:1;color:var(--muted)}
.unit-head h2{grid-column:2;font-family:var(--sans);font-size:clamp(25px,3.2vw,34px);line-height:1.15;margin:0;font-weight:700;letter-spacing:-.01em}
.unit-head .q{grid-column:2;margin:0;font-size:19px;color:var(--muted);font-style:italic}
.page h1:focus,.page h2:focus{outline:none}
.prose{max-width:68ch}
.prose p{margin:0 0 14px}
h3{font-family:var(--sans);font-size:20px;margin:28px 0 10px;line-height:1.25}
.tag{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:700;padding:0 7px;border-radius:999px;border:1.5px solid currentColor;line-height:1.5;vertical-align:1px;color:var(--muted)}

/* panels and controls */
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:18px;margin:18px 0}
.panel>h3:first-child{margin-top:0}
.panel.planned{border-style:dashed;max-width:820px}
.grid2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
.stack>*+*{margin-top:14px}
.plot-host.narrow{max-width:640px}
.controls{font-family:var(--sans);display:flex;flex-wrap:wrap;gap:12px 22px;align-items:end;margin-bottom:12px}
.ctl{display:flex;flex-direction:column;gap:3px;min-width:180px;flex:1 1 200px;max-width:320px}
.ctl label{font-size:14.5px;font-weight:700}
.ctl label output{font-weight:400;font-variant-numeric:tabular-nums;float:right;margin-left:10px}
.ctl-row{display:flex;gap:8px;align-items:center}
.ctl-row input[type=range]{flex:1}
.ctl-row input[type=number]{width:5.6em}
.ctl .hint{font-size:12.5px;color:var(--muted)}
input[type=range]{width:100%;accent-color:var(--accent);height:28px}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--sans)}
button,.btn{font-family:var(--sans);font-size:14.5px;padding:7px 13px;border-radius:7px;border:1.5px solid var(--ghost);background:var(--surface);color:var(--ink);cursor:pointer;line-height:1.3}
button:hover{border-color:var(--muted)}
button.primary,.btn.primary{background:var(--ink);color:var(--surface);border-color:var(--ink)}
button[aria-pressed="true"]{background:var(--surface2);border-color:var(--ink);font-weight:700}
button:disabled,button[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
input[type=number],select,textarea{font-family:var(--sans);font-size:15px;padding:5px 7px;border-radius:6px;border:1.5px solid var(--ghost);background:var(--surface);color:var(--ink)}
.small{font-size:14px;color:var(--muted);font-family:var(--sans)}
.note{font-family:var(--sans);font-size:14.5px;background:var(--surface2);border-radius:8px;padding:10px 13px;margin:10px 0}
.limits{border-left:4px solid var(--muted);padding:8px 14px;margin:18px 0;font-size:16px;max-width:72ch}
.limits strong{font-family:var(--sans)}
details{border:1px solid var(--rule);border-radius:9px;padding:0 14px;margin:12px 0;background:var(--surface);max-width:820px}
details>summary{cursor:pointer;font-family:var(--sans);font-weight:700;padding:9px 0;font-size:14.5px}
details[open]>summary{border-bottom:1px solid var(--rule);margin-bottom:8px}

/* questions (Solow / r-g pattern) */
.quiz{border:1.5px solid var(--ink);border-radius:10px;padding:14px 16px 12px;margin:18px 0;background:var(--surface);max-width:820px}
.quiz legend{font-family:var(--sans);font-weight:700;padding:0 6px;font-size:14.5px}
.quiz .qq{margin:0 0 10px}
.quiz .opt{display:flex;gap:10px;align-items:flex-start;padding:6px 8px;border-radius:7px;cursor:pointer;font-size:16.5px}
.quiz .opt:hover{background:var(--surface2)}
.quiz .opt input{margin-top:6px;accent-color:var(--ink);flex:none;width:17px;height:17px}
.quiz .opt.right{outline:2px solid var(--ok)}
.quiz .opt.wrong{outline:2px dashed var(--bad)}
.quiz .btnrow{margin-top:10px}
.prediction .opt:has(input:disabled){cursor:default}
.fb{margin-top:10px;font-size:16px}
.fb .verdict{font-family:var(--sans);font-weight:700;display:block;margin-bottom:4px}
.fb .verdict.ok{color:var(--ok)}.fb .verdict.no{color:var(--bad)}
.prediction-recap{font-family:var(--sans);font-size:14.5px;background:var(--surface2);padding:9px 12px;border-radius:7px}
.prediction-verdict{display:block;font-family:var(--sans);margin-bottom:4px}
.prediction-verdict.correct{color:var(--ok)}.prediction-verdict.incorrect{color:var(--bad)}
.answer-explanation{border-top:1px solid var(--rule);margin-top:12px;padding-top:4px}
.after-gate{max-width:820px;margin:18px 0}.after-gate p{margin:0 0 8px}
.explore-guide{max-width:820px;border-left:4px solid var(--accent);background:var(--surface2);padding:12px 16px;margin:18px 0;border-radius:0 9px 9px 0}
.explore-guide p{margin:0}

/* charts */
.plotbox{margin:0}
.plotbox figcaption{font-family:var(--sans);font-size:14.5px;font-weight:700;margin-bottom:4px}
svg.plot{width:100%;height:auto;display:block;font-family:var(--sans);overflow:visible}
.plot .grid line{stroke:var(--rule);stroke-width:1}
.plot .axis{stroke:var(--ink);stroke-width:1.4}
.plot .axis.frame{stroke:var(--muted);stroke-width:1}
.plot .tick{font-size:12.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.plot .axis-label{font-size:13.5px;fill:var(--ink)}
.plot .plabel{font-size:13px;fill:var(--ink);font-weight:700;paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.ln{fill:none;stroke-linejoin:round;stroke-linecap:round}
.ln-ghost{stroke:var(--ghost);stroke-width:2;stroke-dasharray:5 4}
.ln-ref{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:2 4}
.ln-excluded{stroke:var(--ghost);stroke-width:2.3}
.cont-arrow{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.region{fill:var(--surface2);opacity:.8}
.pt{stroke:var(--surface);stroke-width:1.5}
.inset-frame{fill:var(--surface);stroke:var(--muted);stroke-width:1.2}
.inset-locator{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-dasharray:3 3}
.inset-title{font-size:11.5px;fill:var(--muted);font-family:var(--sans)}
.handle{cursor:grab;outline:none;touch-action:none}
.handle.dragging{cursor:grabbing}
.handle-hit{fill:transparent}
.handle-dot{fill:var(--accent);stroke:var(--surface);stroke-width:2.5}
.handle:focus-visible .handle-dot{stroke:var(--focus);stroke-width:4}
.handle:hover .handle-dot,.handle.dragging .handle-dot{r:9}
.chart-values table{border-collapse:collapse;font-family:var(--sans);font-size:14.5px;width:100%}
.chart-values caption{text-align:left;color:var(--muted);font-size:13px;padding-bottom:4px}
.chart-values th,.chart-values td{text-align:left;padding:4px 8px 4px 0;border-top:1px solid var(--rule);vertical-align:top;font-variant-numeric:tabular-nums}
.chart-values th{font-weight:700;width:42%}

/* page pieces */
.eq-line{font-family:var(--serif);font-size:19px;margin:6px 0 16px;padding:8px 14px;background:var(--surface);border:1px solid var(--rule);border-radius:8px;display:inline-block}
.eq-name{font-family:var(--sans);font-size:13px;color:var(--muted);margin-left:12px}
.readout{font-family:var(--sans);border:1px solid var(--rule);border-radius:10px;padding:12px 14px;background:var(--surface)}
.readout dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;font-size:14.5px}
.readout dt{font-weight:700}
.readout dd{margin:0;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:4px 0 8px}
.key{display:inline-block;width:22px;height:0;border-top:3px solid;vertical-align:middle;margin-right:6px}
/* pager and footer */
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:28px 0 8px;padding-top:16px;border-top:1px solid var(--rule);font-family:var(--sans)}
.pager .btn{text-decoration:none;display:inline-block}
.pager-pos{color:var(--muted)}
footer{max-width:1180px;margin:0 auto;padding:30px 20px 60px;font-family:var(--sans);font-size:14px;color:var(--muted);border-top:1px solid var(--rule)}

@media (max-width:900px){
  .hero,.grid2,.part-index{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  main{padding:0 16px 60px}
  .pager{flex-direction:column-reverse;align-items:stretch;text-align:center}
  /* Charts scale down to about 55% on a phone, so their text scales up to stay readable (~11-12px). */
  .plot .tick{font-size:21px}.plot .axis-label{font-size:22px}.plot .plabel{font-size:22px}.plot .inset-title{font-size:15px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* AS–AD curves and markers: solid AD, dashed LRAS, heavier SRAS */
.ln-ad{stroke:var(--ad);stroke-width:2.4}
.ln-lras{stroke:var(--lras);stroke-width:2.4;stroke-dasharray:8 5}
.ln-sras{stroke:var(--sras);stroke-width:3.4}
.ln-expect{stroke:var(--expect);stroke-width:2;stroke-dasharray:2 3}
/* A second solid series on a year chart gets long dashes, so two series never differ by colour alone. */
.ln-dash{stroke-dasharray:9 4}
.ln-oldpath{stroke:var(--oldpath);stroke-width:2.2;stroke-dasharray:6 4}
.cont-arrow.ln-lras{stroke-dasharray:none}
.plot .plabel.t-ad{fill:var(--ad)}.plot .plabel.t-lras{fill:var(--lras)}.plot .plabel.t-sras{fill:var(--sras)}
.plot .plabel.t-expect{fill:var(--expect)}.plot .plabel.t-oldpath{fill:var(--oldpath)}
.plot .plabel.muted{fill:var(--muted);font-weight:400}
.plot .plabel.year-tick{font-size:11px;font-weight:400;fill:var(--muted)}
.pt-ad{fill:var(--ad)}.pt-sras{fill:var(--sras)}
.pt-current{fill:var(--ink)}
.pt-past{fill:var(--ghost)}
.pt-trail{fill:var(--expect)}
.ln-trail{stroke:var(--expect);stroke-width:1.6}
.ln-connector{stroke:var(--ink);stroke-width:1.6;stroke-dasharray:1 4}
.pt-limit-marker{fill:var(--surface);stroke:var(--ink);stroke-width:2.4}
.pt-additive{fill:var(--ad)}
.pt-exact{fill:var(--sras)}
.pt-limit{fill:var(--surface);stroke:var(--ink);stroke-width:2.2}
.shape-hollow{fill:var(--surface)}
.levels-caption{margin:4px 0 0}
.readout-line{font-family:var(--sans);margin:0 0 8px}

/* stage stepper */
.stepper{font-family:var(--sans)}
.stepper-panels.paired{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.stepper-panels:not(.paired){max-width:640px}
.stepper-panel{display:flex;flex-direction:column;gap:6px;min-width:0}
.stage-label{font-weight:700;margin:0;min-height:2.6em}
.stepper-ctl{margin-top:12px}
.stepper-live{min-height:1.4em;margin:8px 0 0}
@media (max-width:900px){.stepper-panels.paired{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.plot .plabel.year-tick{font-size:17px}}

/* tables on the pages (from itp) */
.ltable{font-family:var(--sans);border-collapse:collapse;width:100%;margin-top:8px;font-size:14.5px;font-variant-numeric:tabular-nums}
.ltable caption{text-align:left;padding-bottom:4px}
.ltable th,.ltable td{text-align:left;padding:5px 8px 5px 0;border-top:1px solid var(--rule)}
.ltable thead th{border-top:0;color:var(--muted);font-weight:400;font-size:13px}
.ltable .l-net{background:var(--hl);padding-left:6px}
.categories{margin-top:14px}
.categories .btnrow{margin:6px 0}
.burger-table thead th{color:var(--ink);font-size:14.5px}
.eb-title{font-family:var(--sans);font-weight:700;margin:0 0 8px;font-size:15px}
.pt-expect{fill:var(--surface);stroke:var(--expect);stroke-width:1.8}
.year-legend{list-style:none;padding:0;font-family:var(--sans);font-size:13.5px}
.year-legend li{display:inline-flex;align-items:center;gap:6px}
.year-legend svg{overflow:visible}
.state-table{margin-top:16px}

/* page 7: output paths and the level-memory switch */
.ln-output{stroke:var(--ink);stroke-width:2.4}
.ln-gap{stroke:var(--sras);stroke-width:2.4}
.ln-catchup{stroke:var(--oldpath);stroke-width:2.2;stroke-dasharray:1 4}
.ln-zero{stroke:var(--oldpath);stroke-width:1.6;stroke-dasharray:6 4}
.ln-limgap{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:2 3}
.pt-catchup{fill:var(--surface);stroke:var(--oldpath);stroke-width:2.2}
.levels-panel .theta-note{margin:2px 0 8px}
.year-panel{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule)}
.year-panel .controls{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end}
.year-panel .controls .ctl{flex:1 1 260px}
.compare-note{margin-top:8px}

/* page 8: supply shocks; the levels view sits inside each stepper panel */
.supply-panel .controls{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;margin-bottom:10px}
.supply-panel .controls .ctl{flex:1 1 260px}
.stage-levels .levels-read{margin:6px 0 0}

/* page 9: mystery economies */
.mystery-empty{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.mystery-empty p{margin:0}
.case-head{justify-content:space-between;margin-bottom:8px}
.mystery-plots{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.mystery-plots{grid-template-columns:minmax(0,1fr)}}
.case-head .case-count{margin:0}
.case-table{margin-top:10px;font-family:var(--sans)}
.case-table summary{cursor:pointer;font-size:14.5px}
.case-table .ltable{max-width:420px}
.diagnosis .verdict{color:var(--ink)}