/* ===== Interactive labs (CARTRIDGE design system, tokens in /theme.css) =====
   Loads right after style.css on both academies. Everything here is "the console":
   terminals are CRT monitors (plastic bezel + phosphor screen), trainers are LCD read-outs with key-cap inputs,
   the wargame is a level-select ladder, the Exam Hall is a test cabinet with a clock and a key grid.
   Each component carries its own outline / surface / shadow so it sits on the tokens whatever .card / .btn look like. */

/* ---------- shared recipes ---------- */
/* raised lab panel (most of these elements also carry .card) */
.wg-summary, .wg-goal, .wg-locked, .flag-form.card, .hint-box, .ppx-mode, .ppx-resume, .ppx-bar, .ppx-nav, .ppx-q, .ppx-score,
.ps-dojo, .trainer-block, .track-card,
main[data-route="exam"] > section.card, main[data-route="pp-calc"] > .card, main[data-route="subnet-trainer"] > .card {
  background: var(--k-panel); color: var(--k-text); border: var(--k-border); border-radius: var(--k-r); box-shadow: var(--k-drop-md); min-width: 0; }
/* panel title = display face */
.wg-goal h2, .wg-locked h2, .wg-hints h2, .ppx-mode h2, .ppx-resume h2, .ps-dojo .pd-title, .track-top h2,
main[data-route="exam"] > section.card > h2, main[data-route="pp-calc"] > .card > h2, main[data-route="subnet-trainer"] > .card > h2 {
  font: 400 1.6rem/1.1 var(--k-display); letter-spacing: .04em; text-transform: uppercase; }
/* form controls inside labs: inset wells with the ink outline */
.subnet-trainer select, .subnet-trainer input, .sc-pair select, .flag-input {
  font: inherit; min-height: 44px; padding: 8px 12px; color: var(--k-text); background: var(--k-inset); border: var(--k-border); border-radius: var(--k-r-sm); max-width: 100%; }
.subnet-trainer select:hover, .sc-pair select:hover { background: var(--k-panel); }
.subnet-trainer select:focus-visible, .subnet-trainer input:focus-visible, .sc-pair select:focus-visible, .flag-input:focus-visible { outline: 3px solid var(--k-coin); outline-offset: 2px; }
[data-theme="light"] .subnet-trainer select:focus-visible, [data-theme="light"] .subnet-trainer input:focus-visible, [data-theme="light"] .sc-pair select:focus-visible { outline-color: var(--k-link); }
.st-ok { color: var(--k-ok); } .st-bad { color: var(--k-bad); }
.link-like { color: var(--k-link); font-weight: 700; }

/* ---------- track cartridges (classic dashboard) + sidebar track meter ---------- */
.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px 22px; margin-top: 24px; }
.track-card { --trk: var(--k-brand); padding: 0 18px 18px; display: flex; flex-direction: column; gap: 8px; border-top: var(--k-border); }
.track-card[data-track="python"] { --trk: var(--k-coin); }
.track-card[data-track="linux"] { --trk: var(--k-leaf); }
.track-card[data-track="azure"] { --trk: var(--k-sky); }
.track-card[data-track="ccna"] { --trk: var(--k-it); }
.track-card[data-track="projectplus"] { --trk: var(--k-heart); }
.track-card[data-track="powershell"] { --trk: var(--k-ai); }
.track-card[data-track="wintrouble"] { --trk: var(--k-cream); }
.track-top { position: relative; display: flex; align-items: flex-start; gap: 14px; margin: 0 -18px 8px; padding: 20px 18px 14px; background: var(--trk); color: var(--k-on-accent);
  border-bottom: var(--k-border); border-radius: calc(var(--k-r) - 2px) calc(var(--k-r) - 2px) 0 0; }
.track-top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--k-stripes); border-bottom: var(--k-border); border-radius: calc(var(--k-r) - 2px) calc(var(--k-r) - 2px) 0 0; }
.track-top > div:nth-child(2) { flex: 1; min-width: 0; }
.track-top h2 { margin: 0 0 4px; font-size: 1.9rem; }
.track-top p { margin: 0; }
.track-top .muted { color: var(--k-on-accent); opacity: .82; }
.track-icon { flex: none; width: 54px; height: 54px; display: grid; place-items: center; font-size: 1.8rem; line-height: 1; background: var(--k-cream); border: 2px solid var(--k-black); border-radius: var(--k-r-sm); box-shadow: 3px 3px 0 var(--k-black); }
.track-pct { flex: none; padding: 2px 10px 4px; background: var(--k-screen); color: var(--k-phos-hot); border: 2px solid var(--k-black); border-radius: var(--k-r-sm); }
.track-pct .big-pct { display: block; margin: 0; padding: 0; font: 400 2.4rem/1 var(--k-display); color: inherit; background: transparent; border: 0; }
.track-pct .big-pct small { font-size: 1.3rem; color: var(--k-phos-dim); }
.track-card .hero-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; }
.track-card .hero-actions .btn { max-width: 100%; white-space: normal; }
.track-card .lvl-rows { margin-top: 4px; }
.track-card.soon, .side-track.soon { opacity: .72; }
.track-card.soon { border-style: dashed; box-shadow: none; }
.track-card.soon .track-top { border-bottom-style: dashed; }
.side-track { margin: 14px 10px 4px; padding-top: 12px; border-top: 2px dashed var(--k-hair); font-size: .84rem; color: var(--k-muted); }
.side-track-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; font: 400 1.08rem/1.15 var(--k-display); letter-spacing: .06em; text-transform: uppercase; color: var(--k-text); }
.prog-tracks { display: grid; gap: 8px; min-width: 260px; flex: 1; }
.prog-track { display: grid; grid-template-columns: 110px 1fr 64px; gap: 10px; align-items: center; font-size: .9rem; }
.prog-track .lvl-num { text-align: right; color: var(--k-muted); }
.wg-card { color: var(--k-text); }
.wg-card:hover { text-decoration: none; border-color: var(--k-brand-text); }

/* ---------- tabs (cheat sheets): index tabs on a thick rule ---------- */
.tabs { display: flex; gap: 6px; margin: 14px 0 10px; padding: 0 4px; border-bottom: var(--k-border); }
.tab { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; margin-bottom: -2px; white-space: nowrap; font: 400 1.25rem var(--k-display); letter-spacing: .04em;
  color: var(--k-muted); background: var(--k-inset); border: var(--k-border); border-radius: var(--k-r-sm) var(--k-r-sm) 0 0; }
.tab:hover { text-decoration: none; color: var(--k-text); background: var(--k-panel); }
.tab.active { color: var(--k-on-accent); background: var(--k-brand); border-bottom-color: var(--k-brand); }

/* ---------- lesson callouts that belong to the lab tracks ---------- */
/* style.css draws every callout from --co (bar + label tab); these are the lab-track kinds */
.callout.ps { --co: var(--k-sky); }
.callout.ps table { margin-top: 8px; }
.callout.tryreal { --co: var(--k-leaf); }
.callout.tryreal ol, .callout.tryreal ul { margin: 6px 0 4px; padding-left: 1.3em; }
.callout.tryreal pre { margin: 8px 0 0; }
.callout.exam { --co: var(--k-coin); }
.callout.meraki { --co: var(--k-leaf); }
.callout.security { --co: var(--k-heart); }

/* "simulated" sticker on every terminal */
.badge.sim { flex: none; display: inline-block; padding: 2px 9px 3px; font: 400 1rem/1.15 var(--k-display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--k-on-accent); background: var(--k-coin); border: var(--k-border); border-radius: 999px; }

/* "run this on a real machine" shell blocks */
figure.shell.is-real { border: 2px dashed var(--k-warn); }
.shell .real-why, .is-real .local-why { padding: 9px 14px; font-size: .9rem; color: var(--k-text); background: linear-gradient(var(--k-warn-bg), var(--k-warn-bg)), var(--k-panel); border-bottom: 2px dashed var(--k-hair); }
.sample-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 14px; font: 400 1.05rem var(--k-display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--k-muted); background: var(--k-inset); border-top: 2px dashed var(--k-hair); border-bottom: 2px dashed var(--k-hair); }
.sample-head .badge { min-width: 0; max-width: 100%; white-space: normal; }
pre.sample { font-style: normal; border-left: 4px dotted var(--k-phos-dim); }

/* ============================================================
   THE TERMINAL: a CRT monitor. .term is the plastic bezel, .term-screen the tube.
   ============================================================ */
figure.term-block { margin: 22px 0; padding: 0; overflow: visible; background: var(--k-chrome); border: var(--k-border); border-radius: var(--k-r); box-shadow: var(--k-drop-md); }
figure.term-block > .cb-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; padding: 9px 14px; font-size: .86rem; font-weight: 600;
  color: var(--k-text); background: var(--k-inset); border-bottom: var(--k-border); border-radius: calc(var(--k-r) - 2px) calc(var(--k-r) - 2px) 0 0; }
figure.term-block > .cb-head .cb-title { font: 400 1.35rem/1.1 var(--k-display); letter-spacing: .04em; text-transform: uppercase; }
.term-note { padding: 10px 14px; font-size: .9rem; color: var(--k-muted); background: var(--k-panel); border-bottom: 2px dashed var(--k-hair); }
.term-host { margin-top: 12px; min-width: 0; }
figure.term-block .term-host { margin-top: 0; }

.term { display: flex; flex-direction: column; min-width: 0; padding: 0 8px 8px; font-family: var(--k-mono); font-size: .86rem; color: var(--k-phos);
  background: var(--k-chrome); border: var(--k-border); border-radius: var(--k-r); box-shadow: var(--k-drop-md); }
figure.term-block .term { border: 0; box-shadow: none; border-radius: 0 0 calc(var(--k-r) - 2px) calc(var(--k-r) - 2px); }
/* bezel top: power LEDs, model label, sticker, reset key */
.term-head { display: flex; align-items: center; gap: 6px 10px; min-height: 48px; padding: 6px 4px; font-family: var(--k-body); font-size: .8rem; color: var(--k-text); }
.term-dots { display: inline-flex; gap: 5px; flex: none; }
.term-dots i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--k-heart); border: 2px solid var(--k-line); }
.term-dots i:nth-child(2) { background: var(--k-coin); } .term-dots i:nth-child(3) { background: var(--k-leaf); }
.term:focus-within .term-dots i:nth-child(3) { box-shadow: 0 0 8px var(--k-leaf); }
.term-title { flex: 1; min-width: 0; font: 400 1.2rem/1.15 var(--k-display); letter-spacing: .04em; color: var(--k-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-head .btn.term-reset { flex: none; min-height: 34px; padding: 0 11px; font: 400 1.08rem var(--k-display); letter-spacing: .03em; white-space: nowrap; cursor: pointer; filter: none;
  color: var(--k-text); background: var(--k-panel); border: var(--k-border); border-radius: var(--k-r-sm); box-shadow: var(--k-drop-sm); transition: transform .08s, box-shadow .08s; }
.term-head .btn.term-reset:hover { background: var(--k-inset); }
.term-head .btn.term-reset:active { transform: translate(2px, 2px); box-shadow: none; }
/* device selector (IOS labs): a bank of radio keys, the selected one stays pushed in and lights up */
.term-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px 10px; font-family: var(--k-display); }
.term-tab { min-height: 36px; display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; white-space: nowrap; cursor: pointer; font: 400 1.12rem var(--k-display); letter-spacing: .04em;
  color: var(--k-text); background: var(--k-panel); border: var(--k-border); border-radius: var(--k-r-sm); box-shadow: var(--k-drop-sm); transition: transform .08s, box-shadow .08s; }
.term-tab:hover { background: var(--k-inset); color: var(--k-text); }
.term-tab:active { transform: translate(2px, 2px); box-shadow: none; }
.term-tab[aria-selected="true"] { color: var(--k-phos-hot); background: var(--k-screen); transform: translate(2px, 2px); box-shadow: none; }
.term-tab[aria-selected="true"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k-phos-hot); box-shadow: 0 0 6px var(--k-phos-hot); }
/* the tube */
.term-screen { padding: 12px 14px; max-height: 420px; min-height: 140px; overflow-y: auto; cursor: text; line-height: 1.5; color: var(--k-phos);
  background: var(--k-scan), var(--k-screen); border: var(--k-border); border-radius: var(--k-r-sm); scrollbar-color: var(--k-screen-line) var(--k-screen); scrollbar-width: thin; }
.term-screen:focus-within { box-shadow: inset 0 0 0 2px var(--k-phos-dim); }
.term-screen ::selection { background: var(--k-phos-hot); color: var(--k-screen); }
.term-out { white-space: pre-wrap; word-break: break-word; }
.term-chunk { white-space: pre-wrap; display: inline; }
.term-chunk.term-cmd { color: var(--k-cream); }
.term-chunk.term-err, .term-err { color: var(--k-heart); }
.term-chunk.term-sys { color: var(--k-phos-dim); font-style: italic; }
.term-line { display: flex; align-items: baseline; gap: 0; }
.term-prompt { white-space: pre; color: var(--k-phos-hot); font-weight: 700; }
.term-prompt .p-path, .term-prompt b { color: var(--k-sky); }
.term-input { flex: 1; min-width: 40px; padding: 0; font: inherit; color: var(--k-cream); background: transparent; border: 0; border-radius: 0; outline: none; caret-color: var(--k-phos-hot); }
.term-input:focus-visible { outline: none; }
/* bezel bottom: one-tap command keys */
.term-demo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 4px 2px; }
.term-demo .muted { font: 400 1.08rem var(--k-display); letter-spacing: .1em; text-transform: uppercase; color: var(--k-muted); }
.term-demo .chip { display: inline-block; min-height: 32px; margin: 0; padding: 0 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  font: 500 .78rem/1 var(--k-mono); color: var(--k-text); background: var(--k-panel); border: var(--k-border); border-radius: var(--k-r-xs); box-shadow: var(--k-drop-sm); transition: transform .08s, box-shadow .08s; }
.term-demo .chip:hover { background: var(--k-inset); border-color: var(--k-line); color: var(--k-text); }
.term-demo .chip:active { transform: translate(2px, 2px); box-shadow: none; }
.term-demo .chip:focus-visible { outline: 3px solid var(--k-coin); outline-offset: 2px; }
[data-theme="light"] .term-demo .chip:focus-visible { outline-color: var(--k-link); }
/* ANSI colours (terminal content, tuned for the phosphor screen) */
.a-b { font-weight: 700; } .a-d { opacity: .65; }
.a-k { color: #6f8a73; } .a-r { color: #ff6f80; } .a-g { color: #6fdc5a; } .a-y { color: #ffc83d; }
.a-m { color: #c9a8ff; } .a-c { color: #38c6f4; } .a-w { color: #e6efe2; }
.a-K { color: #9db5a0; } .a-R { color: #ffa3ad; } .a-G { color: #8dff6a; } .a-Y { color: #ffe07a; } .a-B { color: #8fc8ff; } .a-M { color: #e3c9ff; } .a-C { color: #7fe0ff; } .a-W { color: #ffffff; }

/* terminal exercises */
.exercise.lx-ex .term-host { margin-top: 14px; }

/* ============================================================
   SHELL WARGAME: level-select ladder + mission page
   ============================================================ */
.wg-summary { display: flex; gap: 20px 24px; align-items: center; padding: 16px 18px; margin: 20px 0; flex-wrap: wrap; }
.wg-summary > div:first-child { flex: none; min-width: 132px; padding: 10px 16px 9px; text-align: center; background: var(--k-scan), var(--k-screen); border: var(--k-border); border-radius: var(--k-r-sm); }
.wg-summary .big-pct { display: block; margin: 0 0 2px; padding: 0; font: 400 3.4rem/.95 var(--k-display); color: var(--k-phos-hot); background: transparent; border: 0; border-radius: 0; }
.wg-summary .big-pct small { font-size: 1.7rem; color: var(--k-phos-dim); }
.wg-summary > div:first-child .muted { display: block; font: 400 1rem var(--k-display); letter-spacing: .1em; text-transform: uppercase; color: var(--k-phos-dim); }
.wg-summary .grow { flex: 1; min-width: 220px; }
.wg-summary .grow p { margin: 10px 0 0; }
.wg-ladder { list-style: none; padding: 0; display: grid; gap: 12px; margin: 20px 0 0; }
.wg-item { background: var(--k-panel); border: var(--k-border); border-radius: var(--k-r-sm); box-shadow: var(--k-drop-sm); transition: transform .08s, box-shadow .08s; }
.wg-item a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 14px; color: var(--k-text); border-radius: calc(var(--k-r-sm) - 2px); }
.wg-item a:hover { text-decoration: none; background: var(--k-inset); border-radius: calc(var(--k-r-sm) - 2px); }
@media (hover: hover) { .wg-item:not(.locked):hover { transform: translate(-2px, -2px); box-shadow: var(--k-drop-md); } }
.wg-item:active, .wg-item:not(.locked):active { transform: translate(2px, 2px); box-shadow: none; }
.wg-item .ll-num { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font: 400 1.5rem/1 var(--k-display); color: var(--k-text); background: var(--k-inset); border: var(--k-border); border-radius: var(--k-r-xs); }
.wg-item .ll-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wg-item .ll-body strong { font: 400 1.35rem/1.15 var(--k-display); letter-spacing: .03em; }
.wg-item .ll-body .muted { font-size: .9rem; line-height: 1.45; color: var(--k-muted); }
.wg-item .ll-min { flex: none; padding: 0; border: 0; font: inherit; letter-spacing: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 34%; white-space: normal; color: var(--k-muted); }
.wg-item .ll-min code { font-size: .74rem; }
.wg-item.solved { border-color: var(--k-line); }
.wg-item.solved .ll-num { background: var(--k-leaf); color: var(--k-on-accent); border-color: var(--k-line); }
.wg-item.locked { opacity: 1; border-style: dashed; border-color: var(--k-muted); box-shadow: none; background: transparent; }
.wg-item.locked .ll-num { background: transparent; border-style: dashed; border-color: var(--k-muted); font-size: 1.1rem; }
.wg-item.locked .ll-body strong, .wg-item.locked .ll-body .muted { color: var(--k-muted); }
/* mission briefing */
.wg-goal, .wg-locked { padding: 0 18px 6px; margin: 18px 0; }
.wg-goal h2, .wg-locked h2 { margin: 0 -18px 12px; padding: 9px 18px 10px; font-size: 1.5rem; border-bottom: var(--k-border); border-radius: calc(var(--k-r) - 2px) calc(var(--k-r) - 2px) 0 0; }
.wg-goal h2 { background: var(--k-brand); color: var(--k-on-accent); }
.wg-locked { border-style: dashed; box-shadow: none; }
.wg-locked h2 { background: var(--k-inset); color: var(--k-text); border-bottom-style: dashed; }
.wg-hints h2 { margin: 26px 0 4px; font-size: 1.7rem; }
.wg-term { margin: 18px 0; }
/* flag slot */
.flag-form { display: flex; gap: 10px 12px; align-items: center; flex-wrap: wrap; padding: 14px 18px; margin: 18px 0; }
.wg-locked .flag-form { padding: 0; margin: 12px 0 14px; }
.flag-form label { font: 400 1.35rem/1.1 var(--k-display); letter-spacing: .04em; text-transform: uppercase; }
.flag-form label strong { font-weight: 400; }
.flag-input { flex: 1; min-width: 220px; font-family: var(--k-mono); font-size: .95rem; color: var(--k-phos); background: var(--k-screen); caret-color: var(--k-phos-hot); }
.flag-input::placeholder { color: var(--k-phos-dim); opacity: 1; }
.flag-input:focus { outline: 3px solid var(--k-coin); outline-offset: 2px; }
[data-theme="light"] .flag-input:focus { outline-color: var(--k-link); }
.flag-msg { font-weight: 700; font-size: .94rem; }
.flag-msg:empty { display: none; }
.flag-msg.ok { color: var(--k-ok); } .flag-msg.bad { color: var(--k-bad); }
/* hints: sealed envelopes */
.hint-box { padding: 0 14px; margin: 10px 0; border: 2px dashed var(--k-hair); border-radius: var(--k-r-sm); box-shadow: none; }
.hint-box[open] { border-style: solid; border-color: var(--k-line); padding-bottom: 12px; box-shadow: var(--k-drop-sm); }
.hint-box summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; font: 400 1.3rem var(--k-display); letter-spacing: .04em; color: var(--k-link); list-style: none; }
.hint-box summary::-webkit-details-marker { display: none; }
.hint-box summary::before { content: "+"; flex: none; width: 24px; height: 24px; display: grid; place-items: center; font: 400 1.3rem/1 var(--k-display); color: var(--k-text); background: var(--k-inset); border: var(--k-border); border-radius: var(--k-r-xs); }
.hint-box[open] summary::before { content: "–"; }
.hint-box summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.hint-box > p { margin: 4px 0 8px; }
.hint-box.spoiler { border-color: var(--k-bad); }
.hint-box.spoiler summary { color: var(--k-bad); }
.hint-box pre { margin: 8px 0 12px; padding: 12px 14px; overflow-x: auto; color: var(--k-phos); background: var(--k-screen); border: var(--k-border); border-radius: var(--k-r-sm); }
.hint-box pre code { color: inherit; background: transparent; }
/* progress page: one key per level */
.wg-dots { display: flex; flex-wrap: wrap; gap: 8px; }
.wg-dot { width: 44px; height: 44px; display: grid; place-items: center; font: 400 1.3rem/1 var(--k-display); color: var(--k-muted); background: var(--k-inset); border: var(--k-border); border-radius: var(--k-r-xs); box-shadow: var(--k-drop-sm); transition: transform .08s, box-shadow .08s; }
.wg-dot:hover { text-decoration: none; color: var(--k-text); background: var(--k-panel); }
.wg-dot:active { transform: translate(2px, 2px); box-shadow: none; }
.wg-dot.solved { background: var(--k-leaf); border-color: var(--k-line); color: var(--k-on-accent); }

@media (max-width: 640px) {
  .tracks { grid-template-columns: 1fr; }
  .track-top { flex-wrap: wrap; }
  .track-pct .big-pct { font-size: 2rem; }
  .term { font-size: .8rem; padding: 0 6px 6px; }
  .term-head { flex-wrap: wrap; gap: 6px; padding: 6px 2px; }
  .term-head .term-title { flex: 1 1 calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .term-head .badge.sim { letter-spacing: .02em; padding: 2px 7px 3px; }
  .term-head .btn.term-reset { margin-left: auto; padding: 0 9px; }
  .term-head .btn.term-reset, .term-tab { min-height: 44px; }
  .term-demo .chip { min-height: 40px; }
  .term-screen { max-height: 340px; padding: 10px; }
  .prog-track { grid-template-columns: 90px 1fr 54px; }
  .flag-form .btn { width: 100%; justify-content: center; }
  .flag-input { min-width: 0; flex-basis: 100%; }
  .tabs { overflow-x: auto; overflow-y: hidden; }
  .wg-item a { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; }
  .wg-item .ll-body { flex: 1 1 60%; }
  .wg-item .ll-min { max-width: none; flex: 1 1 100%; justify-content: flex-start; padding-left: 52px; }
  .wg-summary { padding: 14px; }
  .wg-summary > div:first-child { flex: 1 1 100%; }
}

/* ============================================================
   IOS / PowerShell lesson pieces, subnet trainer, scenarios
   ============================================================ */
.trainer-block { margin: 22px 0; padding: 0; overflow: visible; }
.trainer-block .cb-head { display: flex; justify-content: space-between; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 9px 14px; color: var(--k-text); background: var(--k-inset); border-bottom: var(--k-border);
  border-radius: calc(var(--k-r) - 2px) calc(var(--k-r) - 2px) 0 0; }
.trainer-block .cb-title { font: 400 1.35rem/1.1 var(--k-display); letter-spacing: .04em; text-transform: uppercase; }
.trainer-block .cb-head a { font: 600 .88rem var(--k-body); letter-spacing: 0; text-transform: none; }
.trainer-block .subnet-trainer { padding: 14px; }
main[data-route="pp-calc"] > .card, main[data-route="subnet-trainer"] > .card, main[data-route="exam"] > section.card { padding: 16px 18px; margin: 18px 0; }
main[data-route="pp-calc"] > .card > h2:first-child, main[data-route="subnet-trainer"] > .card > h2:first-child, main[data-route="exam"] > section.card > h2:first-child { margin: 0 0 10px; }

.subnet-trainer { min-width: 0; }
.subnet-trainer .st-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; }
.subnet-trainer .st-bar label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 400 1.15rem var(--k-display); letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); }
.subnet-trainer .st-bar select { font: 500 .95rem var(--k-body); letter-spacing: 0; text-transform: none; }
.subnet-trainer .st-score { margin-left: auto; padding: 4px 10px 5px; font: 400 1.15rem/1.2 var(--k-display); letter-spacing: .04em; color: var(--k-phos-hot); background: var(--k-screen); border: var(--k-border); border-radius: var(--k-r-xs); }
.subnet-trainer .st-score:empty { display: none; }
/* the problem: an LCD read-out */
.subnet-trainer .st-q { position: relative; margin: 0 0 14px; padding: 12px 16px 12px; color: var(--k-phos); background: var(--k-scan), var(--k-screen); border: var(--k-border); border-radius: var(--k-r-sm); }
.subnet-trainer .st-q:empty { display: none; }
.subnet-trainer .st-q::before { content: "▮ PROBLEM"; display: block; margin-bottom: 4px; font: 400 1rem/1.2 var(--k-display); letter-spacing: .14em; color: var(--k-phos-dim); }
.subnet-trainer .st-q p { font-size: 1.04rem; line-height: 1.55; margin: 0; }
.subnet-trainer .st-q p + p { margin-top: 8px; }
.subnet-trainer .st-q code { color: var(--k-phos-hot); background: var(--k-screen-2); border: 1px solid var(--k-screen-line); }
.subnet-trainer .st-q strong, .subnet-trainer .st-q b { color: var(--k-cream); }
.subnet-trainer .st-q a { color: var(--k-sky); }
.subnet-trainer .st-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.subnet-trainer .st-field { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; font-weight: 600; position: relative; min-width: 0; }
.subnet-trainer .st-field input { width: 100%; padding-right: 34px; font-family: var(--k-mono); font-weight: 500; }
.subnet-trainer .st-field.ok input { border-color: var(--k-ok); background: var(--k-ok-bg); }
.subnet-trainer .st-field.bad input { border-color: var(--k-bad); background: var(--k-bad-bg); }
.subnet-trainer .st-mark { position: absolute; right: 12px; bottom: 9px; font-weight: 800; font-size: 1.05rem; line-height: 1.5; pointer-events: none; }
.subnet-trainer .st-field.ok .st-mark { color: var(--k-ok); } .subnet-trainer .st-field.bad .st-mark { color: var(--k-bad); }
.subnet-trainer .st-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.subnet-trainer .st-fb { margin-top: 12px; }
.subnet-trainer .st-fb:not(:empty) { padding: 2px 14px; border: 2px dashed var(--k-hair); border-radius: var(--k-r-sm); }
.subnet-trainer .st-fb p { margin: 9px 0; }
.st-results { margin-top: 10px; }

/* scenario widgets (choice / multi / order / match): also used by AI Academy and the Exam Hall */
.sc-box { margin: 12px 0; min-width: 0; }
.sc-opts { display: flex; flex-direction: column; gap: 8px; }
.sc-order { list-style: none; counter-reset: sc; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.sc-item { counter-increment: sc; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px 6px 10px; margin: 0;
  background: var(--k-inset); border: var(--k-border); border-radius: var(--k-r-sm); }
.sc-item::before { content: counter(sc); flex: none; width: 30px; height: 30px; display: grid; place-items: center; font: 400 1.3rem/1 var(--k-display); color: var(--k-on-accent); background: var(--k-coin); border: 2px solid var(--k-black); border-radius: var(--k-r-xs); }
.sc-item > span:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sc-move { display: flex; gap: 6px; flex-shrink: 0; }
.sc-move .btn { min-width: 40px; min-height: 40px; padding: 0 8px; justify-content: center; }
.sc-move .btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.sc-match { display: flex; flex-direction: column; gap: 8px; }
.sc-pair { display: grid; grid-template-columns: 1fr minmax(180px, 280px); gap: 10px; align-items: center; padding: 6px 8px 6px 12px; background: var(--k-inset); border: var(--k-border); border-radius: var(--k-r-sm); }
.sc-pair .sc-left { min-width: 0; overflow-wrap: anywhere; }
.sc-pair select { width: 100%; min-width: 0; background: var(--k-panel); }
.sc-fb { margin-top: 10px; }
.sc-fb:not(:empty) { padding: 2px 14px; border: 2px dashed var(--k-hair); border-radius: var(--k-r-sm); }
.sc-fb p { margin: 9px 0; }
@media (max-width: 640px) {
  .sc-pair { grid-template-columns: 1fr; padding: 10px; }
  .subnet-trainer .st-form { grid-template-columns: 1fr; }
  .subnet-trainer .st-score { margin-left: 0; }
  .term-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 12px; }
  .sc-move .btn { min-width: 44px; min-height: 44px; }
}

/* ============================================================
   CompTIA Project+: Exam Hall (pp-exam.js) and Ledger Dojo (pp-calc.js)
   ============================================================ */
.ppx-resume { position: relative; padding: 16px 18px 16px 24px; margin: 18px 0; overflow: hidden; }
.ppx-resume::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--k-coin); border-right: var(--k-border); }
.ppx-resume h2 { margin: 0 0 6px; }
.ppx-resume p { margin: 0; }
.ppx-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 18px; margin: 20px 0; }
.ppx-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 16px 16px; }
.ppx-mode h2 { align-self: stretch; margin: 0 -16px; padding: 10px 16px 11px; font-size: 1.5rem; background: var(--k-inset); border-bottom: var(--k-border); border-radius: calc(var(--k-r) - 2px) calc(var(--k-r) - 2px) 0 0; }
.ppx-mode:first-child h2 { background: var(--k-coin); color: var(--k-on-accent); }
.ppx-mode p { margin: 0; flex: 1; }
.ppx-drills { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.ppx-drills .btn { text-align: left; justify-content: flex-start; white-space: normal; flex-wrap: wrap; gap: 0 8px; min-height: 48px; padding: 5px 12px; font-size: 1.2rem; line-height: 1.15; }
.ppx-drills .btn .muted { font: 500 .8rem/1.3 var(--k-body); letter-spacing: 0; }
/* the cabinet's status strip: mode, clock, navigator, submit */
.ppx-bar { position: sticky; top: calc(var(--top-h, 0px) + 6px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; justify-content: space-between; padding: 10px 14px; background: var(--k-chrome); }
.ppx-bar > div:first-child { flex: 1 1 180px; min-width: 0; }
.ppx-bar > div:first-child strong { font: 400 1.4rem/1.1 var(--k-display); letter-spacing: .04em; text-transform: uppercase; }
.ppx-timer { flex: none; padding: 5px 12px 6px; font: 400 2rem/1 var(--k-display); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--k-phos-hot); background: var(--k-scan), var(--k-screen); border: var(--k-border); border-radius: var(--k-r-sm); }
.ppx-timer.low { color: var(--k-heart); border-color: var(--k-heart); }
.ppx-nav { margin: 14px 0; padding: 12px 14px 4px; }
.ppx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.ppx-cell { position: relative; min-height: 44px; padding: 0; cursor: pointer; font: 400 1.25rem/1 var(--k-display); color: var(--k-text); background: var(--k-inset); border: var(--k-border); border-radius: var(--k-r-xs); box-shadow: var(--k-drop-sm); transition: transform .08s, box-shadow .08s; }
.ppx-cell:hover { background: var(--k-panel); }
.ppx-cell:active { transform: translate(2px, 2px); box-shadow: none; }
.ppx-cell.answered { background: var(--k-brand); color: var(--k-on-accent); border-color: var(--k-line); }
.ppx-cell.flagged::after { content: '⚑'; position: absolute; top: -9px; right: -7px; width: 20px; height: 20px; display: grid; place-items: center; font: 400 .72rem/1 var(--k-body); color: var(--k-on-accent); background: var(--k-coin); border: 2px solid var(--k-black); border-radius: 50%; }
.ppx-cell.current { outline: 3px solid var(--k-text); outline-offset: 2px; }
.ppx-q { margin: 14px 0; padding: 16px 18px; }
.ppx-qhead { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ppx-flagged, .badge.ppx-flagged { background: var(--k-coin); color: var(--k-on-accent); border-color: var(--k-line); }
.ppx-stem { font-size: 1.08rem; line-height: 1.55; margin: 6px 0 12px; }
.ppx-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* result: the score read-out */
.ppx-score { position: relative; padding: 26px 18px 18px; margin: 18px 0; text-align: center; overflow: hidden; }
.ppx-score::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--k-coin); border-bottom: var(--k-border); }
.ppx-score.good { border-color: var(--k-line); } .ppx-score.good::before { background: var(--k-leaf); }
.ppx-score.bad { border-color: var(--k-line); } .ppx-score.bad::before { background: var(--k-heart); }
.ppx-score .hero-actions { justify-content: center; }
.ppx-big { display: inline-block; margin: 0 0 12px; padding: 8px 22px 10px; font: 400 3.6rem/1 var(--k-display); letter-spacing: .04em; color: var(--k-phos-hot); background: var(--k-scan), var(--k-screen); border: var(--k-border); border-radius: var(--k-r-sm); }
.ppx-score.bad .ppx-big { color: var(--k-heart); }
.ppx-score.ok .ppx-big { color: var(--k-coin); }
.ppx-big small { font-size: 1.7rem; font-weight: 400; color: var(--k-phos-dim); }
.ppx-domains { display: flex; flex-direction: column; gap: 14px; }
.ppx-dom-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 4px; }
.ppx-dom-score { margin-left: auto; font: 400 1.25rem var(--k-display); letter-spacing: .04em; }
.ppx-objs tr.weak td { background: var(--k-bad-bg); }
.ppx-review { padding-left: 1.6em; }
.ppx-rev { margin: 14px 0; padding: 12px 14px; background: var(--k-inset); border: var(--k-border); border-left-width: 8px; border-radius: var(--k-r-sm); }
.ppx-rev::marker { font: 400 1.2rem var(--k-display); }
.ppx-rev.right { border-left-color: var(--k-ok); }
.ppx-rev.wrong { border-left-color: var(--k-bad); }
.ppx-rev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ppx-opts { margin: 8px 0; padding-left: 1.2em; }
.ppx-opts li { margin: 3px 0; }
.ppx-opts .is-right, .ppx-rev .is-right { color: var(--k-ok); font-weight: 700; }
.ppx-opts .is-wrong, .ppx-rev .is-wrong { color: var(--k-bad); }
.warn-line { padding: 10px 14px; color: var(--k-text); background: var(--k-bad-bg); border: 2px solid var(--k-bad); border-left-width: 8px; border-radius: var(--k-r-sm); }
.pp-dojo .st-field { min-width: 0; }
@media (max-width: 560px) {
  .ppx-bar { padding: 8px 10px; }
  .ppx-timer { font-size: 1.6rem; }
  .ppx-foot .btn { flex: 1 1 30%; justify-content: center; }
  .ppx-big { font-size: 2.8rem; padding: 6px 14px 8px; }
  .ppx-q { padding: 14px; }
  .ppx-review { padding-left: 1.2em; }
}

/* ============================================================
   PowerShell Dojo (ps-dojo.js)
   ============================================================ */
.ps-dojo { padding: 14px 18px 16px; margin: 18px 0; }
.ps-dojo .pd-bar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; padding-bottom: .6rem; border-bottom: 2px dashed var(--k-hair); }
.ps-dojo .pd-score { padding: 4px 10px 5px; font: 400 1.15rem/1.2 var(--k-display); letter-spacing: .04em; color: var(--k-phos-hot); background: var(--k-screen); border: var(--k-border); border-radius: var(--k-r-xs); }
.ps-dojo .pd-score:empty { display: none; }
.ps-dojo .pd-title { margin: .35rem 0 .5rem; font-size: 1.8rem; }
.ps-dojo .pd-prompt { margin-bottom: .75rem; }
.ps-dojo .pd-solution { margin: .75rem 0 0; padding: 12px 14px; overflow-x: auto; color: var(--k-phos); background: var(--k-screen); border: var(--k-border); border-radius: var(--k-r-sm); }
.ps-dojo .pd-solution code { color: inherit; background: transparent; }
.ps-dojo .term-host { min-width: 0; }
/* .btn / .test-results set a display value: make the JS-toggled [hidden] attribute win inside the labs */
.ps-dojo [hidden], .ppx-run [hidden] { display: none !important; }
.ps-dojo .cb-tools { background: transparent; border: 0; padding: 12px 0 0; }
@media (max-width: 560px) { .ps-dojo { padding: 12px 12px 14px; } }

/* paper: terminals print as plain framed boxes */
@media print {
  .term-demo, .term-head .btn.term-reset, .ppx-bar .btn, .ppx-foot { display: none; }
  .term, figure.term-block, .wg-item, .ppx-cell, .wg-dot { box-shadow: none; }
  .ppx-bar { position: static; }
}