/*  Excavators from the Beginning — design system
    ----------------------------------------------------
    The Curionode editorial look, written for this course: warm paper,
    Fraunces for display, Source Serif for prose, JetBrains Mono for numbers.

    Figure colours are tokens with one meaning each: ochre the machine, blue
    oil and hydraulics, sienna the ground, teal design lines and measured
    surfaces, plum loads and lifted objects, olive trucks, green what is safe
    or met, red danger and limits, ink outlines and measurement. Canvases read
    them through js/figure.js as FIG.
    The dark values are written twice — for the system preference and for an
    explicit choice — and must stay identical.
*/
@import url('../vendor/fonts/fonts.css');

:root {
    --paper: #fbf8f3;  --paper-deep: #f3ecdf;  --paper-vellum: #efe7d7;  --paper-rule: #e2d8c4;
    --ink: #1b1b1f;  --ink-soft: #3a3a40;  --ink-mute: #6c6c73;  --ink-faint: #9a958b;
    --red: #b3302d;  --red-tint: #f5e6e2;  --blue: #1f4fc9;  --blue-tint: #e6ecf6;  --teal: #0f6d68;  --teal-tint: #e0eeeb;
    --plum: #5b3b7b;  --plum-tint: #ece2f0;  --ochre: #b6781a;  --ochre-tint: #f5e6c6;  --green: #2c6a4e;  --green-tint: #dfece3;
    --sienna: #a6520e;  --olive: #5b5b1d;  --input: #fffefa;
    --fig-paper: #fffdf7;  --fig-grid: #d2c9b3;  --fig-rule: #e2d8c4;  --fig-ink: #1b1b1f;  --fig-muted: #6c6c73;  --fig-faint: #a39e93;
    --fig-blue: #1f4fc9;  --fig-red: #b3302d;  --fig-green: #2c6a4e;  --fig-teal: #0f6d68;  --fig-plum: #6b3f94;  --fig-ochre: #c27f12;  --fig-sienna: #a6520e;  --fig-olive: #6a6a2a;
    --shadow: 0 2px 6px rgba(27, 27, 31, 0.06);  --shadow-lg: 0 10px 30px rgba(27, 27, 31, 0.14);
    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-body: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    --paper: #14130e;  --paper-deep: #1c1a13;  --paper-vellum: #211f16;  --paper-rule: #3a3529;
    --ink: #ece5d5;  --ink-soft: #c9c1ae;  --ink-mute: #9c9483;  --ink-faint: #766f60;
    --red: #e3716a;  --red-tint: #3b211e;  --blue: #84a9f4;  --blue-tint: #1d2740;  --teal: #52b6ae;  --teal-tint: #15302d;
    --plum: #b694d9;  --plum-tint: #2c2339;  --ochre: #e6b459;  --ochre-tint: #3b3016;  --green: #6dbb8f;  --green-tint: #1a3025;
    --sienna: #e48d48;  --olive: #b9b96b;  --input: #1b1912;
    --fig-paper: #17150f;  --fig-grid: #3b3528;  --fig-rule: #3b3528;  --fig-ink: #ece5d5;  --fig-muted: #9c9483;  --fig-faint: #776f60;
    --fig-blue: #84a9f4;  --fig-red: #e3716a;  --fig-green: #6dbb8f;  --fig-teal: #52b6ae;  --fig-plum: #b694d9;  --fig-ochre: #e6b459;  --fig-sienna: #e48d48;  --fig-olive: #b9b96b;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.38);  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
}
:root[data-theme="dark"] {
    --paper: #14130e;  --paper-deep: #1c1a13;  --paper-vellum: #211f16;  --paper-rule: #3a3529;
    --ink: #ece5d5;  --ink-soft: #c9c1ae;  --ink-mute: #9c9483;  --ink-faint: #766f60;
    --red: #e3716a;  --red-tint: #3b211e;  --blue: #84a9f4;  --blue-tint: #1d2740;  --teal: #52b6ae;  --teal-tint: #15302d;
    --plum: #b694d9;  --plum-tint: #2c2339;  --ochre: #e6b459;  --ochre-tint: #3b3016;  --green: #6dbb8f;  --green-tint: #1a3025;
    --sienna: #e48d48;  --olive: #b9b96b;  --input: #1b1912;
    --fig-paper: #17150f;  --fig-grid: #3b3528;  --fig-rule: #3b3528;  --fig-ink: #ece5d5;  --fig-muted: #9c9483;  --fig-faint: #776f60;
    --fig-blue: #84a9f4;  --fig-red: #e3716a;  --fig-green: #6dbb8f;  --fig-teal: #52b6ae;  --fig-plum: #b694d9;  --fig-ochre: #e6b459;  --fig-sienna: #e48d48;  --fig-olive: #b9b96b;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.38);  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ─── 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.62 var(--font-body); font-optical-sizing: auto; }
::selection { background: var(--ochre-tint); }
a { color: var(--blue); text-underline-offset: 2px; }
code, kbd, .mono { font-family: var(--font-mono); font-size: 0.86em; }
p code, li code, dd code { background: var(--paper-deep); border: 1px solid var(--paper-rule); border-radius: 3px; padding: 0 0.28em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
sub, sup { line-height: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
html[lang^="zh"] body { font-family: var(--font-body), 'Songti SC', 'Noto Serif CJK SC', 'Source Han Serif SC', serif; }
.btn { border: 1px solid var(--paper-rule); background: var(--paper); color: var(--ink); cursor: pointer; font: 13px var(--font-mono); padding: 6px 12px; border-radius: 3px; }
.btn:hover { background: var(--paper-deep); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--paper-rule); border-radius: 3px; overflow: hidden; }
.seg button { border: 0; border-right: 1px solid var(--paper-rule); background: var(--paper); padding: 5px 10px; cursor: pointer; font: 12.5px var(--font-mono); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ─── Plate frame ──────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 22px; background: var(--paper); border-bottom: 1px solid var(--paper-rule); }
.topbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.topbar-back { font: 13px var(--font-mono); color: var(--ink-mute); text-decoration: none; white-space: nowrap; }
.topbar-title { font: 15px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title .icon { font: 600 11px var(--font-mono); letter-spacing: 0.1em; color: var(--red); margin-right: 6px; text-transform: uppercase; }
.lang-btn { border: 1px solid var(--paper-rule); background: var(--paper); border-radius: 3px; padding: 4px 12px; cursor: pointer; font-size: 14px; }
.main-content { max-width: 940px; margin: 0 auto; padding: 26px 28px 60px; }
.plate-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; font: 12px/1.5 var(--font-mono); color: var(--ink-mute); border-bottom: 1px solid var(--paper-rule); padding-bottom: 8px; }
.plate-meta b { color: var(--red); font-weight: 600; }
.thread { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--teal); color: var(--teal); border-radius: 2px; font: 600 11px var(--font-mono); }
.plate-title { font-size: 46px; line-height: 1.05; margin: 22px 0 10px; }
.plate-title em { color: var(--red); }
.plate-deck { font: italic 20px/1.45 var(--font-body); color: var(--ink-soft); margin: 0 0 22px; }
.info-box.lede { border-left: 3px solid var(--ochre); padding: 2px 0 2px 18px; margin: 0 0 22px; }
.info-box.lede p { margin: 0 0 12px; }
.preview { color: var(--ink-soft); font-size: 15.5px; }
.formula-group { display: flex; flex-wrap: wrap; gap: 6px 26px; justify-content: center; margin: 4px 0 18px; padding: 8px 0; border-top: 1px solid var(--paper-rule); border-bottom: 1px solid var(--paper-rule); }
.formula { font-size: 17px; overflow-x: auto; max-width: 100%; }
.learning-objectives { background: var(--paper-deep); border: 1px solid var(--paper-rule); padding: 12px 18px; margin: 0 0 26px; }
.learning-objectives-title, .threads-title, .example-label { font: 600 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.learning-objectives ul { margin: 6px 0 0; padding-left: 20px; }
.section-title { font: 600 12px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin: 26px 0 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.model-chip { font: 11px var(--font-mono); letter-spacing: 0.02em; text-transform: none; color: var(--sienna); border: 1px dashed var(--sienna); padding: 1px 8px; border-radius: 2px; }
.figure { margin: 0 0 18px; }
.figure-caption { font: italic 14px/1.5 var(--font-body); color: var(--ink-mute); margin-top: 8px; }
h2 { font-size: 28px; margin: 34px 0 10px; }
.prose p { margin: 0 0 14px; }
.marginalia { border-left: 2px solid var(--plum); padding: 4px 0 4px 14px; font-size: 15px; color: var(--ink-soft); margin: 20px 0; }
dl.terms { display: grid; grid-template-columns: minmax(120px, 210px) 1fr; gap: 6px 18px; margin: 0; }
dl.terms dt { font: 600 14.5px var(--font-body); }
dl.terms dd { margin: 0; font-size: 15.5px; color: var(--ink-soft); }
.key-concept { margin: 26px 0; padding: 14px 18px; background: var(--ochre-tint); border-left: 3px solid var(--ochre); font-size: 17.5px; }
.threads, .sources { margin: 22px 0; font-size: 14.5px; color: var(--ink-soft); }
.threads ul, .sources ul { margin: 6px 0 0; padding-left: 20px; }
.sources .src { font: 12.5px var(--font-mono); color: var(--ink-mute); }
.example { border: 1px solid var(--paper-rule); background: var(--paper-vellum); padding: 12px 18px; margin: 22px 0; }
.example-title { font: 17px var(--font-display); margin: 4px 0 6px; }
.example ol { margin: 0; padding-left: 22px; font-size: 15.5px; }
.example li { margin: 3px 0; }
.section-break { height: 1px; background: var(--paper-rule); margin: 30px 0 14px; }
.nav-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 13.5px var(--font-mono); }
.nav-footer a { text-decoration: none; }
.nav-report { color: var(--ink-mute) !important; }
.disclaimer { font: 12px/1.5 var(--font-body); color: var(--ink-faint); margin-top: 28px; }

/* ─── Workshop ─────────────────────────────────────────────── */
.ws { border: 1px solid var(--paper-rule); background: var(--paper-vellum); padding: 10px; }
.ws-fig { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-panel { background: var(--fig-paper); border: 1px solid var(--fig-rule); overflow: hidden; }
.ws-panel canvas { display: block; touch-action: none; }
.ws-anim { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.ws-anim:empty { display: none; }
.ws-anim input { flex: 1; }
.ws-anim .t { font: 12px var(--font-mono); color: var(--ink-mute); min-width: 90px; }
.ws-body { display: grid; grid-template-columns: 1fr 300px; gap: 12px; margin-top: 10px; }
.ws-controls { display: flex; flex-direction: column; gap: 6px; }
.ctl { display: grid; grid-template-columns: minmax(130px, 210px) 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.ctl label { color: var(--ink-soft); }
.ctl input[type=range] { width: 100%; accent-color: var(--ink); }
.ctl output { font: 12.5px var(--font-mono); white-space: nowrap; min-width: 84px; text-align: right; }
.ctl .seg { grid-column: 2 / 4; }
.rail-stats { display: flex; flex-direction: column; gap: 3px; border-left: 1px solid var(--paper-rule); padding-left: 12px; }
.stat { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; border-bottom: 1px dotted var(--paper-rule); padding: 2px 0; }
.stat .k { color: var(--ink-mute); flex: 0 1 auto; min-width: 40%; }
.stat .v { font: 13px var(--font-mono); text-align: right; overflow-wrap: anywhere; }
.stat .v small { color: var(--ink-mute); font-size: 11px; }
.ws-note { margin-top: 10px; font-size: 15px; color: var(--ink-soft); }
.ws-note:empty, .ws-ch:empty { display: none; }
.ws-ch { margin-top: 10px; }
.ch-title { font: 600 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.ws-ch ol { list-style: none; padding: 0; margin: 4px 0 0; }
.ws-ch li { display: flex; gap: 8px; align-items: baseline; font-size: 14.5px; padding: 2px 0; }
.ws-ch .box { display: inline-flex; width: 16px; height: 16px; border: 1px solid var(--ink-faint); border-radius: 2px; align-items: center; justify-content: center; font-size: 12px; flex: none; transform: translateY(2px); }
.ws-ch li.ok .box { background: var(--green); border-color: var(--green); color: var(--paper); }
.ws-ch li.was .box { border-color: var(--green); color: var(--green); }
table.ws-table { border-collapse: collapse; width: 100%; font: 12.5px var(--font-mono); background: var(--fig-paper); }
table.ws-table th, table.ws-table td { border-bottom: 1px solid var(--fig-rule); padding: 4px 8px; text-align: left; }
table.ws-table th { color: var(--ink-mute); font-weight: 600; }
table.ws-table tr.hl td { background: var(--ochre-tint); }
.ws-table-title { font: 600 11px var(--font-mono); padding: 6px 8px 0; }

/* ─── Practice, drills, projects ───────────────────────────── */
.try-block, .project-block, .mis-block, .journey { border: 1px solid var(--paper-rule); padding: 12px 16px; margin: 14px 0; background: var(--paper); }
.try-block:empty, .project-block:empty { display: none; }
.try-title, .pj-title { font: 600 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.try-q { margin: 6px 0; }
.try-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.try-row input { width: 150px; border: 1px solid var(--paper-rule); background: var(--input); color: var(--ink); padding: 5px 8px; font: 14px var(--font-mono); }
.try-row .u { font: 13px var(--font-mono); color: var(--ink-mute); }
.try-msg { font-size: 14.5px; color: var(--ink-soft); margin-top: 6px; min-height: 1.2em; }
.drill-head { font: 12px var(--font-mono); color: var(--ink-mute); }
.drill-done { font: 22px var(--font-display); margin: 6px 0 10px; }
.pj-checks { list-style: none; padding: 0; }
.pj-checks li { display: flex; gap: 8px; padding: 2px 0; }
.pj-checks .box { width: 16px; flex: none; text-align: center; }
.pj-checks li.ok .box { color: var(--green); }
.pj-checks li.no .box { color: var(--red); }
.pj-foot { display: flex; align-items: center; gap: 12px; font: 13px var(--font-mono); flex-wrap: wrap; }
.from { font: 11px var(--font-mono); color: var(--ink-faint); }
.jm-sum { font: 14px var(--font-mono); margin-bottom: 8px; }
.jm-key { font-size: 13px; color: var(--ink-mute); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.jm-vol { margin: 6px 0; }
.jm-name { font: 13px var(--font-display); }
.jm-cells { display: flex; flex-wrap: wrap; gap: 3px; }
.jm-cell { display: inline-flex; width: 24px; height: 22px; border: 1px solid var(--paper-rule); align-items: center; justify-content: center; font: 10px var(--font-mono); color: var(--ink-mute); text-decoration: none; }
.jm-cell.open { background: var(--blue-tint); }
.jm-cell.read { background: var(--green); color: var(--paper); border-color: var(--green); }
.jm-cell.cap { background: var(--ochre); color: var(--paper); border-color: var(--ochre); }

/* ─── Knowledge check ──────────────────────────────────────── */
.quiz-container { margin-top: 30px; }
.quiz-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--ink); }
.quiz-head h3 { font-size: 24px; margin: 0 0 6px; }
.quiz-score { font: 13px var(--font-mono); color: var(--ink-mute); }
.quiz-q { padding: 10px 0; border-bottom: 1px solid var(--paper-rule); }
.quiz-q p { margin: 0 0 8px; }
.quiz-q .n { font: italic 15px var(--font-display); color: var(--red); margin-right: 8px; }
.quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.quiz-opts button { text-align: left; border: 1px solid var(--paper-rule); background: var(--paper); padding: 7px 10px; cursor: pointer; font-size: 15px; border-radius: 3px; }
.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-opts button:disabled { cursor: default; color: var(--ink); }
.quiz-why { font-size: 14.5px; color: var(--ink-soft); margin-top: 6px; }
.quiz-foot { padding: 12px 0; }

@media (max-width: 760px) {
    .main-content { padding: 18px 16px 50px; }
    .plate-title { font-size: 34px; }
    .ws-body { grid-template-columns: 1fr; }
    .rail-stats { border-left: 0; padding-left: 0; }
    .ctl { grid-template-columns: 1fr auto; }
    .ctl label, .ctl .seg { grid-column: 1 / 3; }
    .quiz-opts { grid-template-columns: 1fr; }
    dl.terms { grid-template-columns: 1fr; }
    .topbar { padding: 8px 12px; }
}

/* ─── Operating plates and the cab bench ───────────────────── */
.notice { border-left: 3px solid var(--red); background: var(--red-tint); padding: 9px 14px; margin: 12px 0 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.notice b { color: var(--red); font-weight: 600; }
.sim-panel { display: flex; flex-direction: column; gap: 6px; }
.sim-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sim-pat { font: 12px var(--font-mono); color: var(--ink-mute); padding: 0 6px; }
.sim-stage { outline: none; border: 1px solid var(--paper-rule); line-height: 0; }
.sim-stage:focus { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-tint); }
.sim-stage canvas { display: block; max-width: 100%; }
.sim-stage canvas[hidden] { display: none; }
.sim-sticks { display: block; touch-action: none; user-select: none; height: 150px; max-width: 100%; }
.sim-status { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 12.5px/1.5 var(--font-mono); color: var(--ink-mute); }
.sim-status small { flex-basis: 100%; font: 12.5px/1.45 var(--font-body); color: var(--ink-faint); }
.sim-status small.sim-foot { font-style: italic; }
.sim-ev { color: var(--red); }
.sim-ev.ok { color: var(--green); }