/* Course teaching system: a light teaching canvas with a few dark working models.
   The original deck owns geometry, controls, reveal states, and print layout. */
@media screen {
  @font-face {
    font-family: "Course Bricolage";
    src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
  }

  body.course-deck {
    --bg: #fffdf8;
    --panel: #fffdf8;
    --panel2: #f1edf8;
    --ink: #202124;
    --muted: #575760;
    --accent: #2959d9;
    --accent2: #86502e;
    --gold: #795d08;
    --green: #236746;
    --red: #a33448;
    --line: #c7c3cd;
    --display: "Course Bricolage", "Avenir Next", system-ui, sans-serif;
    --pilot-lilac: #ece5ff;
    --pilot-peach: #ffd6c5;
    --pilot-lemon: #f4f1ab;
    background: var(--bg);
    color: var(--ink);
    color-scheme: light;
  }

  body.course-deck > :is(.top, .footer, .stage, .notes) {
    background: var(--bg);
    color: var(--ink);
  }
  body.course-deck .top { border-bottom-color: var(--line); }
  body.course-deck .footer { border-top-color: var(--line); }
  body.course-deck .progress-track { background: var(--pilot-lilac); }
  body.course-deck .progress-bar { background: var(--accent); }
  body.course-deck :is(h1, h2, .title-block strong) {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -.035em;
  }
  body.course-deck .slide :is(h1, h2) { line-height: 1; }
  body.course-deck :is(.slide-kicker, .card-label) { letter-spacing: .055em; }
  body.course-deck .slide-kicker b {
    background: var(--pilot-lemon);
    color: var(--ink);
    border-color: #c7bd61;
    border-radius: 5px;
  }
  body.course-deck .slide-lede { color: #4f5057; }
  body.course-deck :is(.card, .case-text, .question, .artifact, .phase,
    .definition-box, .example-box, .data-table, .lesson-sequence) {
    background: var(--panel);
    color: var(--ink);
    border-color: var(--line);
    border-radius: 9px;
  }
  body.course-deck :is(.card p, .case-text p, .definition-box p, .example-box p,
    .sequence-panel p, .bridge span, .packet-cue span, .notes p, .demo-round p) {
    color: var(--ink);
  }
  body.course-deck .card.accent { border-top-color: var(--accent); }
  body.course-deck .card.gold { background: #faf8d5; border-top-color: #a08b28; }
  body.course-deck .card.green { background: #edf4e7; border-top-color: var(--green); }
  body.course-deck .card.red { background: #fff0e9; border-top-color: var(--red); }
  body.course-deck :is(.question, .example-box) { border-color: #c7bd61; }
  body.course-deck .case-text { border-left-color: var(--accent); }
  body.course-deck :is(.prompt, .sequence-instruction) {
    background: #faf8d5;
    color: var(--ink);
    border-left-color: #a08b28;
    border-radius: 0 8px 8px 0;
  }
  body.course-deck :is(.feedback, .reveal-panel, .stage-status, .sequence-panel) {
    background: #f3eefc;
    color: var(--ink);
    border-color: #aaa0c8;
    border-radius: 8px;
  }
  body.course-deck :is(.bridge, .commit-check) {
    background: #f6f3ed;
    color: var(--ink);
    border-color: var(--line);
    border-radius: 7px;
  }
  body.course-deck :is(.artifact-field, .concept-path span, .flow-step) {
    background: var(--panel);
    color: var(--ink);
    border-color: var(--line);
    border-radius: 7px;
  }
  body.course-deck :is(.packet-cue, .data-table th) {
    background: var(--pilot-lilac);
    color: var(--ink);
  }
  body.course-deck code { background: var(--code-bg, #eae5f4); color: var(--code-ink, #4d3684); }
  body.course-deck :is(.source-note a, .notes a) { color: var(--accent); }

  body.course-deck :is(.week-back, .top-btn, .footer button, .footer a,
    .choice, .choice-commit, .reveal-btn, .stage-btn, .sequence-tab, .notes-close,
    .layer-switches button) {
    background: var(--panel);
    color: var(--accent);
    border-color: #9ca9ce;
    border-radius: 7px;
  }
  body.course-deck :is(button, .week-back, .footer a) { font-weight: 700; }
  body.course-deck :is(.top-btn.active, .choice[aria-pressed="true"],
    .sequence-tab[aria-selected="true"], .layer-switches button[aria-pressed="true"]) {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  body.course-deck :is(.choice, .choice-commit, .reveal-btn, .stage-btn,
    .sequence-tab, .top-btn, .week-back, .footer button, .footer a,
    .layer-switches button):not(:disabled):hover {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
  }
  body.course-deck :is(.choice, .choice-commit, .reveal-btn, .stage-btn,
    .sequence-tab, .top-btn, .footer button):disabled {
    opacity: 1;
    color: #66616c;
    background: #eeebf1;
    border-color: #b8b2c0;
    box-shadow: none;
  }
  body.course-deck .dot { color: var(--muted) !important; font-weight: 700 !important; }
  body.course-deck .dot.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
  }
  body.course-deck :is(button, a, input, select, textarea):focus-visible {
    outline: 3px solid var(--course-focus, #ad4619);
    outline-offset: 3px;
  }
  body.course-deck .notes { box-shadow: -16px 0 44px #20212420; }

  /* Most figures stay quiet and light, alongside their text explanations. */
  body.course-deck :is(.workflow-orbit, .decision-lane, .course-compass,
    .round-path, .failure-matrix, .scope-funnel, .brief-blueprint, .contract-zones,
    .trace-map, .evidence-rail, .defense-cycle, .rubric-map, .scope-orbit,
    .web-machine, .state-board, .wireframe-screen, .ai-fit-tree, .contract-board,
    .probe-routes, .code-map, .build-loop) {
    background: #f1ecfb;
    color: var(--ink);
    border-color: #b9aed5;
    border-radius: 12px;
  }
  body.course-deck :is(.workflow-core, .compass-core, .defense-center,
    .rubric-total, .scope-core, .tree-question) {
    background: var(--pilot-lemon);
    color: var(--ink);
    border-color: #a08b28;
    font-weight: 700;
  }
  body.course-deck :is(.blueprint-field, .wire-region) {
    background: var(--panel);
    color: var(--ink);
  }
  body.course-deck .matrix-hit { background: var(--pilot-peach); color: #752c29; }
  body.course-deck .matrix-owner { background: var(--pilot-lemon); color: #654d09; }
  body.course-deck :is(.mini-button) { background: var(--accent); color: #fff; }

  /* A small set of working models gets the dark, vivid demonstration treatment.
     Local tokens prevent dark panels from inheriting the light canvas colors. */
  body.course-deck :is(.workflow-orbit, .trace-map, .contract-zones,
    .web-machine, .state-board),
  body.course-deck .sprint-demo:not(.demo-css-off) .demo-surface {
    --panel: #292e38;
    --panel2: #343a46;
    --ink: #fffdf8;
    --muted: #d0d2dc;
    --accent: #c7bdff;
    --accent2: #ffd6c5;
    --gold: #f4f1ab;
    --green: #a5e4b6;
    --red: #ffb0b7;
    --line: #687181;
    --course-focus: #f4f1ab;
    --code-bg: #39324f;
    --code-ink: #e5dfff;
    color-scheme: dark;
    background: #20242c;
    color: var(--ink);
    border-color: #535c6e;
    border-radius: 12px;
    box-shadow: none;
  }
  body.course-deck .workflow-orbit .workflow-core {
    background: var(--gold);
    color: #202124;
    border-color: var(--gold);
  }
  body.course-deck .state-board .mini-button {
    background: var(--accent);
    color: #202124;
  }
  body.course-deck .sprint-demo:not(.demo-css-off) .demo-surface label { color: var(--ink); }
  body.course-deck .sprint-demo:not(.demo-css-off) .demo-surface :is(input, select) {
    background: #fffdf8;
    color: #202124;
    border-color: #b9b5c7;
    border-radius: 5px;
    color-scheme: light;
  }
  body.course-deck .sprint-demo:not(.demo-css-off) .demo-submit {
    background: var(--accent);
    color: #202124;
    border-color: var(--accent);
    border-radius: 5px;
  }
  body.course-deck .sprint-demo:not(.demo-css-off) .demo-actions button {
    background: var(--panel2);
    color: var(--ink);
    border-color: var(--line);
    border-radius: 5px;
  }
  body.course-deck .sprint-demo:not(.demo-css-off) .demo-error {
    background: #4c2c34;
    color: #ffe3e6;
    border-color: var(--red);
  }
  body.course-deck .sprint-demo:not(.demo-css-off) .demo-result {
    background: #283d35;
    color: var(--ink);
    border-color: var(--green);
  }
  body.course-deck :is(.workflow-orbit, .trace-map, .contract-zones,
    .web-machine, .state-board) code {
    background: #39324f;
    color: #e5dfff;
  }
  body.course-deck :is(.workflow-orbit, .trace-map, .contract-zones,
    .web-machine, .state-board) :is(button, a, input, select, textarea):focus-visible,
  body.course-deck .sprint-demo:not(.demo-css-off) .demo-surface :focus-visible {
    outline-color: #f4f1ab;
  }
}

@media screen and (min-width: 651px) {
  body.course-deck .sprint-demo:not(.demo-css-off) .demo-surface form {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

/* Preserve the established classroom fit tiers with the wider display face. */
@media screen and (min-width: 901px) {
  body.course-deck:is([data-topic="7"], [data-topic="8"]) .slide :is(h1, h2) { font-size: 48px; }
}
@media screen and (min-width: 901px) and (max-height: 899px) {
  body.course-deck:is([data-topic="7"], [data-topic="8"]) .slide :is(h1, h2) { font-size: 38px; }
}
@media screen and (min-width: 901px) and (max-height: 799px) {
  body.course-deck:is([data-topic="7"], [data-topic="8"]) .slide :is(h1, h2) { font-size: 32px; }
  body.course-deck[data-topic="7"] .slide#m1-seeds h2 { font-size: 32px; }
}
@media screen and (min-width: 901px) and (min-height: 800px) and (max-height: 899px) {
  body.course-deck[data-topic="7"] .slide#m2-trace h2 { font-size: 32px; margin-bottom: 6px; }
}
@media screen and (max-width: 900px) {
  body.course-deck:is([data-topic="7"], [data-topic="8"]) .slide :is(h1, h2) { font-size: clamp(30px, 5.3vw, 44px); }
}

/* Three dense showcase screens used the original .94 title leading. Preserve
   that allowance; keep the case-record title on one line on tall projectors. */
@media screen and (min-width: 901px) and (min-height: 800px) {
  body.course-deck[data-topic="14"] :is(#m1-case, #m1-questions, #m2-calibrate) h2 { line-height: .94; }
}
@media screen and (min-width: 901px) and (min-height: 900px) {
  body.course-deck[data-topic="14"] #m1-case h2 { font-size: 48px; }
}

/* Other topics retain their existing illustration geometry and display face.
   These named teaching figures contain light text and canvas drawings; local
   tokens keep them legible on the quieter course canvas. */
@media screen {
  body.course-deck:not([data-topic="7"]):not([data-topic="8"]) :is(
    .ethics-canvas-shell, .ethics-figure, .writing-figure, .sim-figure,
    .behavior-orbit, .pipeline-rail, .state-case, .source-map, .test-board,
    .bug-loop, .bug-state, .architecture-map, .secret-path, .explain-loop,
    .release-orbit, .gate-board, .checkpoint-path, .manifest-map, .smoke-board,
    .route-map, .package-xray, .hosting-path, .route-failure, .recovery-loop,
    .workflow-cycle, .source-routes, .status-board, .evidence-trail, .task-lanes,
    .competency-map, .story-map, .privacy-filter, .strategy-map, .family-board,
    .contract-map, .eval-board, .claim-audit, .trust-map, .test-contract,
    .round-board, .evidence-record, .fix-loop, .review-boundary, .defense-arc,
    .dossier-evidence, .disclosure-chain, .answer-path, .feedback-loop,
    .showcase-roles, .disposition-board, .revision-path, .course-compass, .round-clock
  ) {
    --panel: #292e38;
    --panel2: #343a46;
    --ink: #fffdf8;
    --muted: #d0d2dc;
    --accent: #c7bdff;
    --accent2: #ffd6c5;
    --gold: #f4f1ab;
    --green: #a5e4b6;
    --red: #ffb0b7;
    --line: #687181;
    --course-focus: #f4f1ab;
    --code-bg: #39324f;
    --code-ink: #e5dfff;
    --display: "Avenir Next Condensed", "Arial Narrow", Impact, sans-serif;
    background: #20242c;
    color: var(--ink);
    border-color: #535c6e;
    border-radius: 12px;
    color-scheme: dark;
  }
  body.course-deck :is(.role-ask, .writing-copy, .sim-case, .sim-rule) {
    background: #f1ecfb;
    color: var(--ink);
    border-color: var(--line);
    border-radius: 9px;
  }
  body.course-deck :is(.role-ask span, .writing-copy p, .sim-case p) { color: var(--ink); }
  body.course-deck .sim-case p { background: #f1ecfb; }
  body.course-deck .sim-link { color: var(--accent); }
  body.course-deck .visual-control {
    background: var(--panel);
    color: var(--accent);
    border-color: #9ca9ce;
    border-radius: 7px;
  }
  body.course-deck .visual-control.primary {
    background: var(--accent);
    color: #fff;
  }
  body.course-deck[data-topic="4"] :is(.cmd, .cmd code, code.k) {
    background: #20242c;
    color: #f4f1ab;
  }
  body.course-deck[data-topic="14"] .compass-core { color: #202124; }
  body.course-deck[data-topic="6"] :is(.t6-prompts li, .t6-code, .t6-pro pre) {
    background: #20242c;
    color: #fffdf8;
    border-color: #535c6e;
    border-radius: 9px;
  }
  body.course-deck[data-topic="6"] :is(.t6-prompts li, .t6-code, .t6-pro pre) b { color: #c7bdff; }

  /* The two original decks have independent layouts and dense working models.
     Apply the light frame to their titles and controls; preserve the models. */
  body.course-legacy-deck {
    --night: #fffdf8;
    --night2: #fffdf8;
    --ink: #202124;
    --text: #202124;
    --muted: #575760;
    --faint: #66616c;
    --line: #c7c3cd;
    --line2: #9b94a7;
    --cyan: #2959d9;
    --blue: #2959d9;
    --green: #236746;
    --gold: #795d08;
    --display: "Course Bricolage", "Avenir Next", system-ui, sans-serif;
    background: #fffdf8;
    color: #202124;
    color-scheme: light;
  }
  body.course-legacy-deck :is(.topbar, .hud, .footer) {
    background: #fffdf8;
    color: #202124;
    border-color: #c7c3cd;
  }
  body.course-legacy-deck :is(.lesson-head h1, .lesson-head h2, .inner > h1, .inner > h2) {
    font-weight: 700;
    letter-spacing: -.035em;
  }
  body.course-legacy-deck :is(.lesson-purpose, .purpose, .case-anchor, .discussion) {
    --gold: #795d08;
    --green: #236746;
    background: #f1ecfb;
    color: #202124;
    border-color: #b9aed5;
  }
  body.course-legacy-deck :is(.lede, .setup-expectation, .study-lab-bridge, .discussion p) { color: #4f5057; }
  body.course-legacy-deck .routine span { color: #795d08; border-color: #a08b28; }
  body.course-legacy-deck .slide-inner > :is(.artifact, .notes) { background: #f4f1d5; color: #202124; }
  body.course-legacy-deck .slide-inner > .artifact p { color: #202124; }
  body.course-legacy-deck :is(.exit-link, .top-btn, .meeting-btn, .back, .hud-btn, .nav-btn) {
    color: #2959d9;
    background: #fffdf8;
    border-color: #9ca9ce;
    border-radius: 7px;
    font-weight: 700;
  }
  body.course-legacy-deck :is(.meeting-btn[aria-current="true"], .meeting-link.active, .dot.active, .jump-btn.active) {
    background: #2959d9;
    color: #fff;
    border-color: #2959d9;
  }
  body.course-legacy-deck .progress-track { background: #ece5ff; }
  body.course-legacy-deck .progress-bar { background: #2959d9; }
  body.course-legacy-deck :is(.prototype-shell, .video-check-lab, .stage, .git-workshop-route, .clip-overlay, dialog) {
    --night: #20242c;
    --night2: #20242c;
    --panel: #292e38;
    --panel2: #343a46;
    --ink: #fffdf8;
    --text: #fffdf8;
    --muted: #c4ccd8;
    --faint: #9dabbf;
    --line: #687181;
    --line2: #8793a6;
    --cyan: #7fe8f1;
    --blue: #96bfff;
    --green: #a5e4b6;
    --gold: #f4f1ab;
    --display: "Avenir Next Condensed", "Arial Narrow", Impact, sans-serif;
    background: #20242c;
    color: #fffdf8;
    border-color: #535c6e;
    border-radius: 12px;
    box-shadow: none;
    color-scheme: dark;
  }
  body.course-legacy-deck :is(a, button, input, textarea):focus-visible {
    outline: 3px solid #ad4619;
    outline-offset: 3px;
  }
  body.course-legacy-deck :is(.prototype-shell, .video-check-lab, .stage, .git-workshop-route, .clip-overlay, dialog) :focus-visible {
    outline-color: #f4f1ab;
  }
}