/*  Welding from the Beginning — design system
    ----------------------------------------------------
    The Curionode editorial look in this course's own colours: a cool paper,
    Fraunces for display, Source Serif for prose, JetBrains Mono for numbers,
    and the blue of tempered steel where other courses use red or copper.

    Figure colours are tokens with one meaning each: blue the arc, the torch's
    path and the wanted reading; red defects, hazards and limits; teal a model,
    a prediction or shielding gas; ochre the heat-affected zone, a published or
    measured figure and filler wire; sienna molten and weld metal; green what is
    met; plum metallurgy and phases; olive slag and flux; ink outlines and text.
    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: #f8f8f5;  --paper-deep: #eceeec;  --paper-vellum: #e7eae8;  --paper-rule: #d2d6d4;
    --ink: #181a1c;  --ink-soft: #363a3e;  --ink-mute: #63696e;  --ink-faint: #949a9e;
    --accent: #1f5a7a;  --accent-tint: #dfebf1;
    --red: #b0322f;  --red-tint: #f6e5e2;  --blue: #2257c4;  --blue-tint: #e5ecf7;  --teal: #0f6e69;  --teal-tint: #def0ec;
    --plum: #6a3c87;  --plum-tint: #efe3f3;  --ochre: #b0761a;  --ochre-tint: #f5e8cb;  --green: #2b6b4d;  --green-tint: #dfede4;
    --sienna: #a3550f;  --olive: #5d5d20;  --input: #fffefa;
    --fig-paper: #fbfbf9;  --fig-grid: #cdd2d1;  --fig-rule: #d6dad9;  --fig-ink: #181a1c;  --fig-muted: #63696e;  --fig-faint: #9aa0a3;
    --fig-blue: #2257c4;  --fig-red: #c0392b;  --fig-green: #2b6b4d;  --fig-teal: #0f6e69;  --fig-plum: #7a45a0;  --fig-ochre: #c07d12;  --fig-sienna: #a3550f;  --fig-olive: #6b6b28;
    --shadow: 0 2px 6px rgba(28, 26, 23, 0.06);  --shadow-lg: 0 10px 30px rgba(28, 26, 23, 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: #121416;  --paper-deep: #191c1f;  --paper-vellum: #1e2124;  --paper-rule: #353a3e;
    --ink: #ebe7df;  --ink-soft: #cbc5ba;  --ink-mute: #9d968a;  --ink-faint: #756f65;
    --accent: #7cc0dc;  --accent-tint: #16303b;
    --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: #e3904e;  --olive: #b7b76c;  --input: #1a1915;
    --fig-paper: #15171a;  --fig-grid: #363b3f;  --fig-rule: #353a3e;  --fig-ink: #ebe7df;  --fig-muted: #9d968a;  --fig-faint: #777064;
    --fig-blue: #8aaaf3;  --fig-red: #ec7a70;  --fig-green: #70bd92;  --fig-teal: #57b8af;  --fig-plum: #c39be0;  --fig-ochre: #e8b75d;  --fig-sienna: #e3904e;  --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: #121416;  --paper-deep: #191c1f;  --paper-vellum: #1e2124;  --paper-rule: #353a3e;
    --ink: #ebe7df;  --ink-soft: #cbc5ba;  --ink-mute: #9d968a;  --ink-faint: #756f65;
    --accent: #7cc0dc;  --accent-tint: #16303b;
    --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: #e3904e;  --olive: #b7b76c;  --input: #1a1915;
    --fig-paper: #15171a;  --fig-grid: #363b3f;  --fig-rule: #353a3e;  --fig-ink: #ebe7df;  --fig-muted: #9d968a;  --fig-faint: #777064;
    --fig-blue: #8aaaf3;  --fig-red: #ec7a70;  --fig-green: #70bd92;  --fig-teal: #57b8af;  --fig-plum: #c39be0;  --fig-ochre: #e8b75d;  --fig-sienna: #e3904e;  --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; }

/* ─── 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-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; }
.rail-stats .stat.mine { color: var(--blue); font: 12px var(--font-mono); }
.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; 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; }

/* ─── The listening bench and the hand bench ──────────────── */
.hb canvas { display: block; cursor: crosshair; }
.hb-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 6px 10px; background: var(--paper-deep); border-top: 1px solid var(--paper-rule); }
.ls, .mo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 12px; background: var(--paper-deep); border: 1px solid var(--paper-rule); }
.ls-note, .xp-note { font: italic 12.5px/1.45 var(--font-body); color: var(--ink-mute); }
.mo { display: block; }
.xp-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.xp-bar .st { font: 12.5px var(--font-mono); color: var(--ink-mute); }
.mo-key { width: 120px; height: 58px; border: 2px solid var(--ink); border-radius: 30px; background: var(--paper); font: 600 15px var(--font-mono); letter-spacing: 0.12em; cursor: pointer; touch-action: none; user-select: none; }
.mo-key.on { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.mo-in { width: min(320px, 90%); border: 1px solid var(--paper-rule); background: var(--input); color: var(--ink); padding: 6px 10px; font: 15px var(--font-mono); letter-spacing: 0.08em; }
.xp-note { margin: 6px 0 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; }
}