/*  Aerodynamics and Aircraft Design from the Beginning — design system
    ----------------------------------------------------
    The Curionode editorial look in this course's own colours: a warm cream
    paper like a sheet of graph paper, Fraunces for display, Source Serif for
    prose, JetBrains Mono for numbers, and a high-altitude blue accent, the colour of the sky above the tropopause where
    airliners cruise, where other courses use indigo, enamel green or copper.

    Figure colours are tokens with one meaning each: blue a solution or the
    wanted reading; red a limit, an error or an unstable thing; teal an exact
    answer or a prediction; ochre a published or measured figure; plum a
    field, a direction or a phase; sienna matter and machines; green what is
    met or stable; olive a second curve. Canvases read the tokens 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: #faf8f3;  --paper-deep: #f0ece2;  --paper-vellum: #ece7db;  --paper-rule: #d9d2c3;
    --ink: #1b1915;  --ink-soft: #3a362e;  --ink-mute: #69635a;
    --ink-faint: #9c9588;
    --accent: #1d5a8c;  --accent-tint: #dce8f3;
    --red: #b0322f;  --red-tint: #f6e5e2;  --blue: #2457b8;  --blue-tint: #e5ecf7;  --teal: #0f6e69;  --teal-tint: #def0ec;
    --plum: #6a3c87;  --plum-tint: #efe3f3;  --ochre: #b0761a;  --ochre-tint: #f5e8cb;  --green: #2b6b4d;  --green-tint: #dfede4;
    --sienna: #8a5a2b;  --olive: #5d5d20;  --input: #fffefb;
    --fig-paper: #fcfbf7;  --fig-grid: #ddd6c8;  --fig-rule: #ddd6c8;  --fig-ink: #1b1915;  --fig-muted: #69635a;  --fig-faint: #a39c8f;
    --fig-blue: #2457b8;  --fig-red: #c0392b;  --fig-green: #2b7a4d;  --fig-teal: #0f6e69;  --fig-plum: #7a45a0;  --fig-ochre: #c07d12;  --fig-sienna: #8a5a2b;  --fig-olive: #6b6b28;
    --shadow: 0 2px 6px rgba(27, 25, 21, 0.06);  --shadow-lg: 0 10px 30px rgba(27, 25, 21, 0.15);
    --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: #131210;  --paper-deep: #1b1a17;  --paper-vellum: #211f1b;  --paper-rule: #3a3731;
    --ink: #ece8df;  --ink-soft: #cbc6bb;  --ink-mute: #9d978b;  --ink-faint: #767065;
    --accent: #7fb6e6;  --accent-tint: #142638;
    --red: #e7746c;  --red-tint: #3a2020;  --blue: #8aaaf3;  --blue-tint: #1c2540;  --teal: #57b8af;  --teal-tint: #15302d;
    --plum: #c39be0;  --plum-tint: #2d2238;  --ochre: #e8b75d;  --ochre-tint: #3a3017;  --green: #70bd92;  --green-tint: #1a3025;
    --sienna: #d9a06a;  --olive: #b7b76c;  --input: #1a1916;
    --fig-paper: #16150f;  --fig-grid: #39362f;  --fig-rule: #3a3731;  --fig-ink: #ece8df;  --fig-muted: #9d978b;  --fig-faint: #777166;
    --fig-blue: #8aaaf3;  --fig-red: #ec7a70;  --fig-green: #70bd92;  --fig-teal: #57b8af;  --fig-plum: #c39be0;  --fig-ochre: #e8b75d;  --fig-sienna: #d9a06a;  --fig-olive: #b7b76c;
    --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: #131210;  --paper-deep: #1b1a17;  --paper-vellum: #211f1b;  --paper-rule: #3a3731;
    --ink: #ece8df;  --ink-soft: #cbc6bb;  --ink-mute: #9d978b;  --ink-faint: #767065;
    --accent: #7fb6e6;  --accent-tint: #142638;
    --red: #e7746c;  --red-tint: #3a2020;  --blue: #8aaaf3;  --blue-tint: #1c2540;  --teal: #57b8af;  --teal-tint: #15302d;
    --plum: #c39be0;  --plum-tint: #2d2238;  --ochre: #e8b75d;  --ochre-tint: #3a3017;  --green: #70bd92;  --green-tint: #1a3025;
    --sienna: #d9a06a;  --olive: #b7b76c;  --input: #1a1916;
    --fig-paper: #16150f;  --fig-grid: #39362f;  --fig-rule: #3a3731;  --fig-ink: #ece8df;  --fig-muted: #9d978b;  --fig-faint: #777166;
    --fig-blue: #8aaaf3;  --fig-red: #ec7a70;  --fig-green: #70bd92;  --fig-teal: #57b8af;  --fig-plum: #c39be0;  --fig-ochre: #e8b75d;  --fig-sienna: #d9a06a;  --fig-olive: #b7b76c;
    --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(--accent-tint); }
a { color: var(--accent); 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(--accent); 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(--accent); color: var(--paper); border-color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: default; }
.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(--accent); 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(--accent); 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(--accent); 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(--accent); }
.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(--accent); 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(--accent); 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; padding: 1px 8px; border-radius: 2px; color: var(--teal); border: 1px dashed var(--teal); }
.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(--accent-tint); border-left: 3px solid var(--accent); 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; }
.notice { border-left: 3px solid var(--accent); background: var(--accent-tint); padding: 9px 14px; margin: 12px 0 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.notice b { color: var(--accent); font-weight: 600; }
.care { border-left: 3px solid var(--red); background: var(--red-tint); padding: 9px 14px; margin: 12px 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.care b { color: var(--red); font-weight: 600; }
.tryhome { border-left: 3px solid var(--green); background: var(--green-tint); padding: 9px 14px; margin: 12px 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.tryhome b { color: var(--green); font-weight: 600; }

/* ─── 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: manipulation; }
.ws-panel canvas.drag { cursor: grab; touch-action: none; }
.ctl input[type=text] { width: 100%; border: 1px solid var(--paper-rule); background: var(--input); color: var(--ink); padding: 4px 8px; font: 13.5px var(--font-mono); }
.ctl .err { grid-column: 1 / 4; font: 12px var(--font-mono); color: var(--red); }
.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(--accent); }
.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); }
.ws-hint { font: italic 12.5px/1.4 var(--font-body); color: var(--ink-mute); padding: 3px 8px; }
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; vertical-align: top; }
table.ws-table th { color: var(--ink-mute); font-weight: 600; }
table.ws-table tr.hl td { background: var(--accent-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(--accent); 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; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}