/*  Money and Markets from the Beginning — design system
    ----------------------------------------------------
    Ledger paper: a cream ground, near-black ink, Fraunces for display, Source
    Serif for prose, JetBrains Mono for every figure. The accent is the green
    of banknote ink. On every balance sheet assets are blue, liabilities red
    and equity green; gains are green and losses red; bids blue and asks rust.

    A plate is a title, a lede, a workshop (the bench, with its controls and
    readings beside it), the prose, an "In practice" box, terms, try-its and
    the ten-question check. Colours are tokens; canvases read the --fig-* ones
    through js/figure.js. The dark values are written twice, once for a system
    preference and once for an explicit choice, and tools/build.py fails if the
    two copies differ.
*/
@import url('../vendor/fonts/fonts.css');

:root {
    --paper: #f7f5ee;  --paper-deep: #ece8dc;  --paper-rule: #d9d3c3;
    --ink: #1b1f1d;  --ink-soft: #353b38;  --ink-mute: #636a66;  --ink-faint: #969a92;
    --accent: #1d5e47;  --accent-tint: #dcebe3;  --blue: #2b5687;  --blue-tint: #dfe7f1;  --red: #a33a2c;  --red-tint: #f4e0dc;  --green: #2f6b46;  --green-tint: #dcefe3;  --ochre: #9c7419;  --ochre-tint: #f3e6c6;
    --input: #fffef9;
    --fig-paper: #fffdf8;  --fig-grid: #d5cfbf;  --fig-rule: #e8e3d6;  --fig-ink: #1b1f1d;  --fig-muted: #636a66;  --fig-faint: #a19d92;
    --fig-blue: #2b5687;  --fig-red: #a33a2c;  --fig-green: #2f6b46;  --fig-teal: #17706c;  --fig-plum: #6a3d7a;  --fig-ochre: #9c7419;  --fig-sienna: #94501c;  --fig-olive: #62621f;
    --fig-asset: #2b5687;  --fig-liab: #a33a2c;  --fig-equity: #1d5e47;  --fig-gain: #2f6b46;  --fig-loss: #a33a2c;  --fig-bid: #2b5687;  --fig-ask: #a3502c;  --fig-gold: #b08a28;  --fig-cash: #5f7f3a;
    --shadow: 0 2px 6px rgba(27, 31, 29, 0.07);
    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-body: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Songti SC', 'Noto Serif CJK SC', serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    --paper: #131614;  --paper-deep: #1b1f1d;  --paper-rule: #313835;
    --ink: #e8ebe6;  --ink-soft: #c5cac4;  --ink-mute: #98a09a;  --ink-faint: #6b726d;
    --accent: #6cc39d;  --accent-tint: #19302a;  --blue: #86aad8;  --blue-tint: #1b2635;  --red: #e7836f;  --red-tint: #3a211c;  --green: #74bf90;  --green-tint: #183022;  --ochre: #dfb25a;  --ochre-tint: #382d16;
    --input: #191d1b;
    --fig-paper: #171a18;  --fig-grid: #39403c;  --fig-rule: #282e2b;  --fig-ink: #e8ebe6;  --fig-muted: #98a09a;  --fig-faint: #6b726d;
    --fig-blue: #86aad8;  --fig-red: #e7836f;  --fig-green: #74bf90;  --fig-teal: #58b8b1;  --fig-plum: #bf98d0;  --fig-ochre: #dfb25a;  --fig-sienna: #d98b52;  --fig-olive: #bdbd6c;
    --fig-asset: #86aad8;  --fig-liab: #e7836f;  --fig-equity: #6cc39d;  --fig-gain: #74bf90;  --fig-loss: #e7836f;  --fig-bid: #86aad8;  --fig-ask: #e39a6f;  --fig-gold: #dcbb5c;  --fig-cash: #a7c47a;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    }
}
:root[data-theme="dark"] {
    --paper: #131614;  --paper-deep: #1b1f1d;  --paper-rule: #313835;
    --ink: #e8ebe6;  --ink-soft: #c5cac4;  --ink-mute: #98a09a;  --ink-faint: #6b726d;
    --accent: #6cc39d;  --accent-tint: #19302a;  --blue: #86aad8;  --blue-tint: #1b2635;  --red: #e7836f;  --red-tint: #3a211c;  --green: #74bf90;  --green-tint: #183022;  --ochre: #dfb25a;  --ochre-tint: #382d16;
    --input: #191d1b;
    --fig-paper: #171a18;  --fig-grid: #39403c;  --fig-rule: #282e2b;  --fig-ink: #e8ebe6;  --fig-muted: #98a09a;  --fig-faint: #6b726d;
    --fig-blue: #86aad8;  --fig-red: #e7836f;  --fig-green: #74bf90;  --fig-teal: #58b8b1;  --fig-plum: #bf98d0;  --fig-ochre: #dfb25a;  --fig-sienna: #d98b52;  --fig-olive: #bdbd6c;
    --fig-asset: #86aad8;  --fig-liab: #e7836f;  --fig-equity: #6cc39d;  --fig-gain: #74bf90;  --fig-loss: #e7836f;  --fig-bid: #86aad8;  --fig-ask: #e39a6f;  --fig-gold: #dcbb5c;  --fig-cash: #a7c47a;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* ─── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.66 var(--font-body); font-optical-sizing: auto; }
::selection { background: var(--ochre-tint); }
a { color: var(--accent); text-underline-offset: 2px; }
code { font: 0.86em var(--font-mono); background: var(--paper-deep); padding: 0 4px; border-radius: 3px; }
h2 { font: 400 27px/1.25 var(--font-display); margin: 38px 0 12px; letter-spacing: -0.01em; }
.btn { border: 1px solid var(--ink-soft); background: var(--ink); color: var(--paper); padding: 5px 14px; border-radius: 3px; cursor: pointer; font: 13px var(--font-mono); }
.btn:hover { background: var(--ink-soft); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-quiet { background: transparent; color: var(--ink-soft); border-color: var(--paper-rule); }
.btn-quiet:hover { background: var(--paper-deep); }
.btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ─── Top bar ──────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 20px; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--paper-rule); font: 13px var(--font-mono); }
.topbar a { color: var(--ink-soft); text-decoration: none; }
.topbar a:hover { color: var(--accent); }
.topbar-left { display: flex; gap: 14px; align-items: center; min-width: 0; }
.topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-mute); }
.topbar-right { display: flex; gap: 8px; align-items: center; }
.lang-btn { border: 1px solid var(--paper-rule); background: var(--paper); border-radius: 3px; padding: 2px 10px; cursor: pointer; font: 13px var(--font-mono); color: var(--ink-soft); }

/* ─── Plate ────────────────────────────────────────────────── */
.main-content { max-width: 1080px; margin: 0 auto; padding: 26px 28px 70px; }
.plate-meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 12px var(--font-mono); color: var(--ink-mute); border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.plate-meta b { color: var(--ink-soft); font-weight: 600; }
.thread { display: inline-block; border: 1px solid var(--ink-faint); border-radius: 2px; padding: 0 4px; margin-left: 5px; font-size: 11px; color: var(--ink-soft); }
.plate-title { font: 400 50px/1.08 var(--font-display); letter-spacing: -0.02em; margin: 24px 0 8px; }
.plate-title em { color: var(--accent); }
.plate-deck { font: italic 21px/1.45 var(--font-body); color: var(--ink-soft); max-width: 46em; margin: 0 0 18px; }
.lede { border-left: 3px solid var(--accent); padding: 2px 0 2px 20px; margin: 18px 0; max-width: 50em; }
.lede p { margin: 0 0 10px; }
.learning-objectives { background: var(--paper-deep); border: 1px solid var(--paper-rule); padding: 12px 18px; margin: 20px 0; max-width: 50em; }
.learning-objectives-title, .section-title { font: 600 11.5px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; }
.section-title { margin: 30px 0 8px; }
.learning-objectives ul { margin: 4px 0 0; padding-left: 20px; }
.figure { border: 1px solid var(--paper-rule); background: var(--fig-paper); box-shadow: var(--shadow); }
.figure-caption { font: 14.5px/1.5 var(--font-body); color: var(--ink-mute); padding: 10px 16px; border-top: 1px solid var(--paper-rule); }
.prose { max-width: 46em; }
.prose p { margin: 0 0 14px; }
.practice-box { border: 1px solid var(--paper-rule); border-left: 4px solid var(--ochre); background: var(--ochre-tint); padding: 12px 18px; margin: 22px 0; max-width: 46em; }
.practice-box-title { font: 600 11.5px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ochre); margin-bottom: 4px; }
.practice-box p { margin: 0 0 8px; }
.terms { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; max-width: 50em; }
.terms dt { font-weight: 600; }
.terms dd { margin: 0; color: var(--ink-soft); }
.key-idea { border: 1px solid var(--ink); padding: 12px 18px; margin: 26px 0; max-width: 46em; font-style: italic; }
.sources { font-size: 14.5px; color: var(--ink-mute); max-width: 50em; }
.plate-nav { display: flex; justify-content: space-between; gap: 16px; margin: 40px 0 10px; border-top: 1px solid var(--paper-rule); padding-top: 14px; font-size: 15px; }
.plate-nav a { text-decoration: none; }
.plate-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 12px var(--font-mono); color: var(--ink-faint); margin-top: 20px; }

/* ─── Workshop ─────────────────────────────────────────────── */
.ws { display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.ws-stage { padding: 12px; border-right: 1px solid var(--paper-rule); min-width: 0; }
.ws-rail { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.ws canvas { display: block; width: 100%; touch-action: none; }
.ws-panel + .ws-panel { margin-top: 10px; }
.ws-ptitle { font: 600 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin: 2px 0 4px; }
.ctl label { display: flex; justify-content: space-between; font: 12.5px var(--font-mono); color: var(--ink-soft); }
.ctl input[type=range] { width: 100%; accent-color: var(--accent); }
.ctl select { width: 100%; font: 13px var(--font-mono); background: var(--input); color: var(--ink); border: 1px solid var(--paper-rule); padding: 3px; }
.ctl .val { color: var(--accent); }
.stats { display: grid; gap: 4px; }
.stat { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted var(--paper-rule); font: 12.5px var(--font-mono); padding: 2px 0; }
.stat span:first-child { color: var(--ink-mute); }
.stat b { color: var(--ink); font-weight: 600; text-align: right; }
.stat.good b { color: var(--green); }
.stat.bad b { color: var(--red); }
.ws-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-note { font: 13px/1.45 var(--font-body); color: var(--ink-mute); }
.ws-msg { font: 13px var(--font-mono); color: var(--ink-soft); min-height: 1.4em; }
.ws-answers { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-answers button { border: 1px solid var(--paper-rule); background: var(--paper); color: var(--ink); padding: 4px 10px; border-radius: 3px; cursor: pointer; font: 13px var(--font-mono); }
.ws-answers button.right { background: var(--green-tint); border-color: var(--green); }
.ws-answers button.wrong { background: var(--red-tint); border-color: var(--red); }

/* ─── Try-its, drills, projects, journey ───────────────────── */
.try { border: 1px solid var(--paper-rule); padding: 12px 16px; margin: 10px 0; max-width: 46em; }
.try-q { margin-bottom: 8px; }
.try-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.try-opt { border: 1px solid var(--paper-rule); background: var(--paper); color: var(--ink); padding: 5px 11px; border-radius: 3px; cursor: pointer; font: 14.5px var(--font-body); text-align: left; }
.try-opt.right { background: var(--green-tint); border-color: var(--green); }
.try-opt.wrong { background: var(--red-tint); border-color: var(--red); }
.try-why { margin-top: 8px; color: var(--ink-soft); font-size: 15px; }
.drill { padding: 16px 18px; }
.drill-head { display: flex; justify-content: space-between; font: 12.5px var(--font-mono); color: var(--ink-mute); margin-bottom: 10px; }
.drill-src { font: 12px var(--font-mono); color: var(--ink-faint); margin-top: 10px; }
.project { border: 2px solid var(--ink); padding: 14px 18px; margin: 18px 0; }
.project h3 { font: 400 22px var(--font-display); margin: 0 0 6px; }
.brief { list-style: none; padding: 0; margin: 8px 0; }
.brief li { padding: 3px 0 3px 26px; position: relative; font-size: 15px; }
.brief li::before { content: '○'; position: absolute; left: 4px; color: var(--ink-faint); }
.brief li.ok::before { content: '✓'; color: var(--green); }
.brief li.no::before { content: '✗'; color: var(--red); }
.verdict { font: 600 13px var(--font-mono); padding: 6px 10px; display: inline-block; }
.verdict.pass { background: var(--green-tint); color: var(--green); }
.verdict.fail { background: var(--red-tint); color: var(--red); }
.journey { padding: 16px; }
.journey-sum { font: 13px var(--font-mono); color: var(--ink-mute); margin-bottom: 10px; }
.journey-vol { display: grid; grid-template-columns: 220px 1fr; gap: 10px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--paper-rule); }
.journey-vol .jn { font: 13.5px var(--font-body); }
.jcells { display: flex; flex-wrap: wrap; gap: 3px; }
.jcell { width: 16px; height: 16px; border: 1px solid var(--paper-rule); background: var(--paper); display: inline-block; }
.jcell.seen { background: var(--blue-tint); border-color: var(--blue); }
.jcell.passed { background: var(--green); border-color: var(--green); }

/* ─── Knowledge check ──────────────────────────────────────── */
.quiz { border-top: 2px solid var(--ink); margin-top: 40px; padding-top: 10px; max-width: 50em; }
.quiz-head { display: flex; justify-content: space-between; align-items: baseline; }
.quiz-head h3 { font: 400 25px var(--font-display); margin: 0 0 8px; }
.quiz-score { font: 13px var(--font-mono); color: var(--ink-mute); }
.quiz-q { border-bottom: 1px solid var(--paper-rule); padding: 10px 0; }
.quiz-q p { margin: 0 0 8px; }
.quiz-q .n { font: 13px var(--font-mono); color: var(--accent); }
.quiz-opts { display: grid; gap: 5px; }
.quiz-opts button { text-align: left; border: 1px solid var(--paper-rule); background: var(--paper); color: var(--ink); padding: 6px 12px; border-radius: 3px; cursor: pointer; font: 15.5px/1.45 var(--font-body); }
.quiz-opts button:hover:not(:disabled) { background: var(--paper-deep); }
.quiz-opts button.right { background: var(--green-tint); border-color: var(--green); }
.quiz-opts button.wrong { background: var(--red-tint); border-color: var(--red); }
.quiz-why { margin-top: 8px; font-size: 15px; color: var(--ink-soft); }
.quiz-foot { margin-top: 12px; }

/* ─── Report dialog ────────────────────────────────────────── */
.report-link { color: var(--ink-faint); }
.report-bg { position: fixed; inset: 0; background: rgba(20, 18, 24, 0.35); z-index: 90; }
.report-dialog { position: fixed; z-index: 91; left: 50%; top: 12vh; transform: translateX(-50%); width: min(520px, 94vw); background: var(--paper); border: 1px solid var(--paper-rule); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); padding: 18px 20px; }
.report-dialog h3 { font: 400 23px var(--font-display); margin: 0 0 8px; }
.report-note { font-size: 14px; color: var(--ink-mute); margin: 0 0 8px; }
.report-sel { font-size: 14px; border-left: 3px solid var(--paper-rule); margin: 6px 0; padding-left: 10px; color: var(--ink-soft); }
.report-dialog textarea, .report-dialog input { width: 100%; border: 1px solid var(--paper-rule); background: var(--input); color: var(--ink); border-radius: 3px; padding: 6px 8px; margin-top: 6px; font: 14px var(--font-body); }
.report-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.report-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 10px; }
.report-status { flex: 1; font: 12.5px var(--font-mono); color: var(--ink-mute); }

@media (max-width: 820px) {
    .ws { grid-template-columns: minmax(0, 1fr); }
    .ws-stage { border-right: none; border-bottom: 1px solid var(--paper-rule); }
    .plate-title { font-size: 34px; }
    .main-content { padding: 18px 16px 50px; }
    .terms { grid-template-columns: 1fr; }
    .journey-vol { grid-template-columns: 1fr; }
    .topbar { padding: 8px 16px; }
}
@media print { .topbar, .ws-rail, .quiz, .try-block, .plate-footer { display: none; } }

/* ─── Money's own pieces ───────────────────────────────────── */
.formula { font: 12.5px var(--font-mono); color: var(--ink-soft); background: var(--paper-deep); border: 1px solid var(--paper-rule); padding: 5px 8px; word-break: break-all; }
.formula b { color: var(--accent); font-weight: 600; }
.tbl { width: 100%; border-collapse: collapse; font: 12.5px var(--font-mono); }
.tbl th, .tbl td { padding: 3px 6px; border-bottom: 1px solid var(--paper-rule); text-align: right; white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl th { color: var(--ink-mute); font-weight: 600; }
.tbl tr.total td { border-top: 1.5px solid var(--ink); font-weight: 600; }
.tbl-wrap { overflow-x: auto; max-height: 330px; overflow-y: auto; margin-top: 8px; }
.choices { display: grid; gap: 6px; margin-top: 8px; }
.choices button { text-align: left; border: 1px solid var(--paper-rule); background: var(--paper); color: var(--ink); padding: 7px 12px; border-radius: 3px; cursor: pointer; font: 14.5px/1.4 var(--font-body); }
.choices button.picked { border-color: var(--accent); background: var(--accent-tint); }