/* Layout: header strip, then editor | world side by side, results below; stacks on phones. */
:root {
  --bg: #f4f6f2; --surface: #ffffff; --ink: #1d2420; --muted: #5d6a62; --line: #d7ddd5;
  --accent: #2f6f4f; --accent-ink: #ffffff; --danger: #b3261e; --ok: #1f7a4a;
  --band: rgba(47, 111, 79, 0.14); --band-error: rgba(179, 38, 30, 0.16);
  --grid-cell: #e8ede4; --grid-wall: #59615b; --grid-border: #b9c2b6;
  --grid-gem: #2b8fb0; --glow-core: #e6fbff; --grid-robot: #e0a526; --grid-robot-nose: #8a5a00; --grid-probe: rgba(43, 143, 176, 0.35);
  --code-keyword: #7a3e9d; --code-string: #2d6a2d; --code-number: #a05a00; --code-call: #1f5f8b; --code-def: #1f5f8b;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121614; --surface: #1a201d; --ink: #e6ebe7; --muted: #9aa69f; --line: #2c3530;
    --accent: #6fc196; --accent-ink: #0d1a13; --danger: #f2877f; --ok: #6fc196;
    --band: rgba(111, 193, 150, 0.16); --band-error: rgba(242, 135, 127, 0.18);
    --grid-cell: #232b27; --grid-wall: #8b958f; --grid-border: #3a4540;
    --grid-gem: #5cc3e4; --glow-core: #f2fdff; --grid-robot: #f0b93b; --grid-robot-nose: #6b4500; --grid-probe: rgba(92, 195, 228, 0.35);
    --code-keyword: #d3a6f5; --code-string: #9fd89f; --code-number: #f2b766; --code-call: #8cc4f0; --code-def: #8cc4f0;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* components set display: grid/flex; hidden must still win */
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 16px 20px 8px; }
.brief { margin: 4px 0 0; color: var(--muted); max-width: 70ch; }
.status { margin: 0; font-size: 13px; color: var(--muted); }
.top-right { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.levels-button { font-weight: 600; }
button.quiet { border-color: transparent; background: none; color: var(--muted); margin-left: auto; }
dialog { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); padding: 0; width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 720px); }
dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; position: sticky; top: 0; background: var(--surface); }
.dialog-head button { border: 0; background: none; font-size: 18px; padding: 2px 8px; }
#levels-list { padding: 4px 16px 18px; display: grid; gap: 14px; }
.unit h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.unit ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.unit li a, .unit li span.locked { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 8px; border-radius: 7px; color: inherit; text-decoration: none; }
.unit li a:hover, .unit li a:focus-visible { background: var(--bg); }
.unit li a[aria-current="page"] { background: var(--band); }
.unit li span.locked { color: var(--muted); }
.unit .lv-status { font-weight: 700; text-align: center; }
.unit .lv-status.solved { color: var(--ok); }
.next-level { display: inline-block; margin-top: 4px; background: var(--accent); color: var(--accent-ink); border-radius: 7px; padding: 7px 14px; font-weight: 600; text-decoration: none; justify-self: start; }
.status.bad { color: var(--danger); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; padding: 8px 20px 24px; }
.results-panel { grid-column: 1 / -1; }
@media (max-width: 860px) { .layout { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; } .top { padding-inline: 16px; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }

/* Editor: CodeMirror 6 (src/editor/editor.js); its colours come from the variables above. */
.editor { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; height: 300px; }
.editor .cm-editor { height: 100%; }
.editor .cm-editor.cm-focused { outline: 2px solid var(--accent); outline-offset: -2px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
button { border: 1px solid var(--line); background: var(--surface); border-radius: 7px; padding: 6px 14px; cursor: pointer; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.note { font-size: 13px; color: var(--muted); }
.note.bad { color: var(--danger); }

/* Lesson strips: the demo (src/lessons/demo-ui.js) and the step-by-step guide (guide-ui.js).
   Minimal and visual: progress is dots, controls are icons, one line of text at a time.
   Guidance reads as annotation: one accent colour, a soft tint, an edge rule. */
:root { --guide-accent: #7a4fd0; --guide-bg: rgba(122, 79, 208, 0.07); --guide-ink: #ffffff; }
@media (prefers-color-scheme: dark) { :root { --guide-accent: #b99cf2; --guide-bg: rgba(185, 156, 242, 0.09); --guide-ink: #1a1230; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.strip { border-left: 3px solid var(--guide-accent); background: var(--guide-bg); border-radius: 4px 10px 10px 4px; padding: 10px 12px; display: grid; gap: 8px; }
.strip-head { display: flex; align-items: center; gap: 4px; min-height: 28px; }
.strip-title { font-size: 12px; font-weight: 600; color: var(--guide-accent); margin-right: 10px; }
.dots { display: inline-flex; gap: 6px; align-items: center; margin-right: auto; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background 0.25s, transform 0.25s; }
.dot.done { background: var(--guide-accent); }
.dot.now { background: transparent; box-shadow: inset 0 0 0 2px var(--guide-accent); transform: scale(1.3); }
.strip-say { margin: 0; font-size: 15.5px; line-height: 1.45; }
.strip-say code, .demo-feedback code { font-family: var(--mono); font-size: 0.92em; background: var(--surface); border-radius: 4px; padding: 0 4px; }
.strip-actions { display: flex; justify-content: flex-end; gap: 6px; align-items: center; }
.icon-button { border: 0; background: none; padding: 5px; border-radius: 8px; color: var(--muted); display: inline-grid; place-items: center; line-height: 0; }
.icon-button:hover { background: var(--guide-bg); color: var(--ink); }
.round-button { border: 0; background: var(--guide-accent); color: var(--guide-ink); border-radius: 999px; padding: 7px; display: inline-flex; gap: 4px; align-items: center; font-weight: 600; line-height: 1; }
.round-button .label:empty { display: none; }
.round-button .label { padding-right: 6px; }
.round-button .icon { order: 2; }
.icon-button:disabled { opacity: 0.3; }
.demo-predict { display: grid; gap: 4px; font-size: 14px; }
.demo-predict p { margin: 0; color: var(--muted); }
.demo-predict .demo-pick { color: var(--ink); font-weight: 600; min-height: 1.5em; }
.demo-predict [role=radiogroup] { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-predict label { display: inline-grid; place-items: center; min-width: 40px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font: 600 15px var(--mono); }
.demo-predict label:has(input:checked) { border-color: var(--guide-accent); box-shadow: inset 0 0 0 1px var(--guide-accent); }
.demo-predict label:has(input:focus-visible) { outline: 2px solid var(--guide-accent); outline-offset: 2px; }
.demo-predict input { position: absolute; opacity: 0; pointer-events: none; }
.demo-feedback { margin: 0; font: 700 18px var(--mono); }
.demo-feedback.right { color: var(--ok); }
.demo-feedback.wrong { color: var(--ink); }
.guide.finished .strip-say { color: var(--ok); }
.guide.syntax .strip-say { color: var(--danger); }
.guide-preview { display: grid; gap: 6px; }
.guide-preview pre { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 0; }
.guide-preview .line { display: block; padding: 0 10px; }
.guide-preview .line.added { background: var(--guide-bg); box-shadow: inset 3px 0 var(--guide-accent); }
.guide-offer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.guide-offer button { padding: 3px 10px; }
.chip { vertical-align: middle; margin-left: 4px; color: var(--guide-accent); padding: 2px; }
.editor-panel.demo-on:not(.demo-run) .actions, .editor-panel.demo-on .help-pop,
.editor-panel.demo-run .actions > :not(#run) { display: none; }
/* Coach mark: a demo step waits for the learner to press the real Run button. */
#run.coach { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--guide-accent); }
@media (prefers-reduced-motion: no-preference) { #run.coach { animation: coach-pulse 1.6s ease-in-out infinite; } }
@keyframes coach-pulse { 50% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 10px rgba(122, 79, 208, 0.25); } }
.round-button.quiet-next { background: var(--line); color: var(--muted); }
.demo-output { margin: 0; font: 14px var(--mono); background: var(--surface); border-radius: 6px; padding: 4px 8px; justify-self: start; }
.guide-ring { outline: 3px solid var(--guide-accent); outline-offset: 2px; }
.grid-world .focus-ring { fill: none; stroke: var(--guide-accent); stroke-width: 3; pointer-events: none; }
.grid-world .pick-cursor { fill: var(--guide-bg); stroke: var(--guide-accent); stroke-width: 2; stroke-dasharray: 4 3; pointer-events: none; }
.grid-world.picking { cursor: pointer; }
.grid-world.picking:focus-visible { outline: 2px solid var(--guide-accent); outline-offset: 4px; }
/* Drive mode (src/lessons/drive-ui.js): big command buttons where the editor will later be, and
   the program the presses make, shown as code (the bridge to typing it). */
body.drive-mode .editor-panel > :not(.drive), body.drive-mode .transport, body.drive-mode #watch-demo { display: none !important; }
.drive { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.drive-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-width: 440px; }
.drive-button { display: grid; justify-items: center; gap: 6px; padding: 14px 6px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.drive-button .icon { width: 30px; height: 30px; color: var(--accent); }
.drive-button code { font: 13px var(--mono); color: var(--muted); }
.drive-button:hover { border-color: var(--accent); }
.drive-button:active { transform: translateY(1px); }
.drive-button[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; }
.drive-tools { display: flex; align-items: center; gap: 4px; min-height: 30px; }
.drive.crashed .drive-tools .icon-button:not(:disabled) { color: var(--guide-accent); box-shadow: inset 0 0 0 2px var(--guide-accent); }
.drive-msg { margin: 0 0 0 8px; font-size: 14px; color: var(--danger); }
.drive-log { margin: 0; padding: 8px 0; list-style: none; counter-reset: ln; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: 14px/1.6 var(--mono); max-height: 240px; min-height: 120px; overflow: auto; }
.drive-log li { counter-increment: ln; padding: 0 12px 0 0; color: var(--code-call); }
.drive-log li::before { content: counter(ln); display: inline-block; width: 2.4em; text-align: right; margin-right: 12px; color: var(--muted); }
.drive-log li.newest { background: var(--band); }
.grid-world .target { fill: none; stroke: var(--grid-robot); stroke-width: 2.5; stroke-dasharray: 5 4; opacity: 0.9; }
/* On a phone the world comes first in drive mode: you press buttons while watching the robot. */
@media (max-width: 860px) {
  body.drive-mode .world-panel { order: -1; }
  .drive-log { max-height: 150px; min-height: 72px; }
  .drive-button code { font-size: 12px; }
}
.grid-world .robot-body.bump { animation: bump 260ms ease-out; }
@keyframes bump { 40% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .grid-world .robot-body.bump { animation: none; } }

/* Hints (src/lessons/hint-ui.js): a lightbulb by the results; the hint itself is a strip. */
.results-panel { position: relative; }
.hint-offer { position: absolute; top: 10px; right: 12px; border: 0; border-radius: 999px; padding: 7px; background: var(--guide-bg); color: var(--guide-accent); line-height: 0; }
.hint-offer .icon { width: 22px; height: 22px; }
.hint-offer:hover { background: var(--guide-accent); color: var(--guide-ink); }
@media (prefers-reduced-motion: no-preference) { .hint-offer:not([hidden]) { animation: offer-in 420ms ease-out; } }
@keyframes offer-in { from { opacity: 0; transform: scale(0.6); } }
.hint-code { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: 14px/1.5 var(--mono); }
.goal-pulse { animation: goal-pulse 1.1s ease-in-out 2; }
@keyframes goal-pulse { 50% { box-shadow: 0 0 0 3px var(--guide-accent); } }
@media (prefers-reduced-motion: reduce) { .goal-pulse { animation: none; outline: 3px solid var(--guide-accent); } }
.export-events { display: inline-flex; gap: 6px; align-items: center; margin: 0 16px 16px; border: 0; background: none; color: var(--muted); font-size: 13px; padding: 4px 0; }

/* Settings */
.small-dialog { width: min(360px, calc(100vw - 32px)); }
.switch { display: flex; align-items: center; gap: 10px; padding: 8px 16px 18px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch .track { width: 36px; height: 20px; border-radius: 999px; background: var(--line); position: relative; transition: background 0.2s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.switch input:checked + .track { background: var(--guide-accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--guide-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dot, .switch .track, .switch .track::after { transition: none; } }

/* World */
.world { display: grid; place-items: center; background: var(--bg); border-radius: 8px; padding: 10px; min-height: 160px; }
.grid-world { width: 100%; max-height: 420px; display: block; }
/* Goal view: a smaller, calmer copy of the world beside it, showing the end state. */
.world-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, 30%); gap: 10px; align-items: start; }
@media (max-width: 520px) { .world-row { gap: 6px; } .goal-view { padding: 6px; } .goal-summary { font-size: 12px; } }
.goal-view { margin: 0; background: var(--bg); border-radius: 8px; padding: 8px 10px 10px; display: grid; gap: 6px; }
.goal-view figcaption { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.goal-grid .grid-world { max-height: 220px; }
.goal-summary { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.grid-world.goal .gem-halo, .grid-world.goal .gem-core, .grid-world.goal .gem-sparkle { animation: none; }
.grid-world.gems-any .gem { opacity: 0.35; }
.grid-world .robot.ghost .robot-body { fill: none; stroke: var(--grid-robot); stroke-width: 2.5; stroke-dasharray: 5 3.5; }
.grid-world .robot.ghost .robot-nose, .grid-world .robot.ghost .robot-eye { fill: var(--grid-robot); opacity: 0.75; }
.grid-world .robot.ghost .robot-glint { display: none; }
.grid-world .cell { fill: var(--grid-cell); }
.grid-world .wall { fill: var(--grid-wall); }
.grid-world .border { fill: none; stroke: var(--grid-border); stroke-width: 2; }
/* Gems: a faceted stone over a two-layer glow (core + halo). Only opacity and transform are
   animated (cheap to composite); each gem has its own --phase so they don't pulse in lockstep. */
.grid-world .gem-stone { fill: var(--grid-gem); }
.grid-world .gem-facet-light { fill: #fff; opacity: 0.26; }
.grid-world .gem-facet-dark { fill: #000; opacity: 0.18; }
.grid-world .gem-shine { fill: #fff; opacity: 0.55; }
.grid-world .gem-sparkle { fill: #fff; opacity: 0; }
.grid-world .halo-stop-0 { stop-color: var(--grid-gem); stop-opacity: 0.26; }
.grid-world .halo-stop-1 { stop-color: var(--grid-gem); stop-opacity: 0.2; }
.grid-world .halo-stop-2 { stop-color: var(--grid-gem); stop-opacity: 0; }
.grid-world .core-stop-0 { stop-color: var(--glow-core); stop-opacity: 0.4; }
.grid-world .core-stop-1 { stop-color: var(--glow-core); stop-opacity: 0; }
.grid-world .gem-halo, .grid-world .gem-core { transform-box: fill-box; transform-origin: center; }
@media (prefers-color-scheme: dark) { .grid-world .gem-glow { mix-blend-mode: screen; opacity: 0.85; } }
@media (prefers-reduced-motion: no-preference) {
  .grid-world .gem-halo { animation: gem-breathe 3.8s ease-in-out infinite; animation-delay: calc(var(--phase, 0) * -3.8s); }
  .grid-world .gem-core { animation: gem-breathe-core 3.8s ease-in-out infinite; animation-delay: calc(var(--phase, 0) * -3.8s - 0.5s); }
  .grid-world .gem-sparkle { transform-box: fill-box; transform-origin: center;
    animation: gem-twinkle 7s ease-out infinite; animation-delay: calc(var(--phase, 0) * -7s); }
}
@keyframes gem-breathe { 0%, 100% { opacity: 0.7; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.02); } }
@keyframes gem-breathe-core { 0%, 100% { opacity: 0.6; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes gem-twinkle { 0%, 88%, 100% { opacity: 0; transform: translate(5.5px, -6.5px) scale(0.2) rotate(0deg); }
                         92% { opacity: 0.7; transform: translate(5.5px, -6.5px) scale(0.6) rotate(45deg); }
                         96% { opacity: 0; transform: translate(5.5px, -6.5px) scale(0.3) rotate(90deg); } }
.grid-world .gem-badge { fill: var(--ink); }
.grid-world .gem-glow-stop-inner { stop-color: var(--grid-gem); stop-opacity: 0.55; }
.grid-world .gem-glow-stop-mid { stop-color: var(--grid-gem); stop-opacity: 0.45; }
.grid-world .gem-glow-stop-outer { stop-color: var(--grid-gem); stop-opacity: 0; }
.grid-world .gem-count { fill: var(--surface); font: 700 10px var(--sans); text-anchor: middle; }
/* The robot: a solid rim around a frosted, see-through centre, so a gem (or anything else) under it
   stays visible. The nose sits outside the rim and the eye near the front, leaving the centre clear. */
.grid-world .robot-body { fill: var(--grid-robot); fill-opacity: 0.2; stroke: var(--grid-robot); stroke-width: 3.5; }
.grid-world .robot-glint { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: 0.55; }
.grid-world .robot-nose { fill: var(--grid-robot); }
.grid-world .robot-eye { fill: var(--grid-robot-nose); }
@media (prefers-color-scheme: dark) { .grid-world .robot-body { fill-opacity: 0.16; } .grid-world .robot-glint { opacity: 0.4; } }
.grid-world .probe { fill: var(--grid-probe); opacity: 0; }
.grid-world .probe.on { animation: probe-flash 300ms ease-out; }
@keyframes probe-flash { from { opacity: 1; } to { opacity: 0; } }
.grid-world .error-marker path { stroke: var(--danger); stroke-width: 4; stroke-linecap: round; fill: none; }
@media (prefers-reduced-motion: reduce) { .grid-world .probe.on { animation: none; opacity: 0.6; } }

.caption { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; }
.caption code { font-family: var(--mono); }
.line-tag { font: 12px var(--mono); color: var(--muted); min-width: 52px; }
.counters { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.transport { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.transport button { padding: 4px 10px; min-width: 40px; }
.transport input[type=range] { flex: 1 1 140px; min-width: 0; accent-color: var(--accent); }

/* Results */
.results { display: grid; gap: 8px; }
.verdict { font-weight: 700; font-size: 16px; }
.verdict.pass { color: var(--ok); }
.verdict.fail { color: var(--danger); }
.world-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.world-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; }
.world-list .mark { font-weight: 700; }
.world-list .mark.pass { color: var(--ok); }
.world-list .mark.fail { color: var(--danger); }
.world-list .why { color: var(--muted); font-size: 14px; }
.muted { color: var(--muted); margin: 0; }
pre { margin: 6px 0 0; background: var(--bg); border-radius: 6px; padding: 8px 10px; font: 13px var(--mono); white-space: pre-wrap; }

/* ------------------------------------------------------------------ minimal pass (D21)
   The older screens, redrawn: a status dot, icon controls, counters as icons with numbers,
   results as marks. Words remain only where they carry meaning (failure messages, names). */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--danger); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.status[data-state="loading"] .status-dot, .status[data-state="restarting"] .status-dot { background: var(--grid-robot); }
.status[data-state="running"] .status-dot { background: var(--accent); }
.status[data-state="load_failed"] .status-dot { background: var(--danger); }
@media (prefers-reduced-motion: no-preference) {
  .status[data-state="loading"] .status-dot, .status[data-state="restarting"] .status-dot,
  .status[data-state="running"] .status-dot { animation: breathe-dot 1.2s ease-in-out infinite; }
}
@keyframes breathe-dot { 50% { opacity: 0.35; } }
.levels-button { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; padding: 6px 12px; }
.levels-count { font: 600 13px var(--mono); }

.editor-panel { position: relative; }
.actions { gap: 6px; }
.actions .note { flex: 1; }
.run-button { background: var(--accent); color: var(--accent-ink); padding: 9px; }
.run-button .icon { width: 20px; height: 20px; }
.run-button:disabled { opacity: 0.45; }
.help-pop { position: absolute; right: 14px; bottom: 58px; z-index: 5; width: min(320px, calc(100% - 28px)); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 12px 14px; display: grid; gap: 10px; font-size: 13px; }
.help-commands { display: flex; flex-wrap: wrap; gap: 6px; }
.help-commands code { font: 13px var(--mono); color: var(--code-call); background: var(--bg); border-radius: 6px; padding: 2px 7px; }
.help-keys { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; color: var(--muted); }
.help-keys dt { color: var(--ink); white-space: nowrap; }
.help-keys dd { margin: 0; }
kbd { font: 12px var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--bg); }

.counters { display: inline-flex; gap: 12px; }
.counter { display: inline-flex; align-items: center; gap: 3px; font: 600 13px var(--mono); color: var(--ink); }
.counter .icon { width: 15px; height: 15px; color: var(--muted); }
.counter:first-child .icon { color: var(--grid-robot-nose); }
.counter:last-child .icon { color: var(--grid-gem); }
.transport { gap: 4px; }
.transport .icon-button { padding: 6px; }
.speed-button { border: 0; background: none; padding: 6px 4px; border-radius: 8px; display: inline-grid; place-items: center; }
.speed-button:hover { background: var(--guide-bg); }
.speed-button .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.speed-button .bars i { width: 3px; border-radius: 1px; background: var(--accent); }
.speed-button .bars i:nth-child(1) { height: 5px; } .speed-button .bars i:nth-child(2) { height: 8px; }
.speed-button .bars i:nth-child(3) { height: 12px; } .speed-button .bars i:nth-child(4) { height: 16px; }
.speed-button[data-speed="0"] .bars i:nth-child(n+2), .speed-button[data-speed="1"] .bars i:nth-child(n+3),
.speed-button[data-speed="2"] .bars i:nth-child(n+4) { background: var(--line); }

.results-panel { gap: 6px; }
.results-panel.busy::before { content: ""; height: 3px; border-radius: 2px; background: var(--accent); opacity: 0.6; }
@media (prefers-reduced-motion: no-preference) { .results-panel.busy::before { animation: breathe-dot 1s ease-in-out infinite; } }
.verdict.pass { margin: 0; color: var(--ok); line-height: 0; }
.verdict.pass .icon { width: 44px; height: 44px; stroke-width: 2.5; }
.world-list li { grid-template-columns: 22px auto minmax(0, 1fr); gap: 8px; align-items: center; }
.world-list .mark { line-height: 0; }
.world-list .mark .icon { width: 18px; height: 18px; }
.world-list .where { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }
.world-list .where .icon { width: 16px; height: 16px; }
.world-list .why { color: var(--ink); font-size: 14px; }
.world-list li.pass .why { display: none; }
.why.constraint { margin: 0; color: var(--danger); font-size: 14px; }
.next-level { background: var(--accent); color: var(--accent-ink); text-decoration: none; padding: 8px 10px 8px 16px; justify-self: start; font-weight: 600; }
.next-level .label { padding-right: 2px; }
#output-wrap summary { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; cursor: pointer; }
#output-wrap summary .icon { width: 16px; height: 16px; }

.unit li a, .unit li span.locked { grid-template-columns: 26px minmax(0, 1fr); align-items: center; }
.unit .lv-status { line-height: 0; display: inline-grid; place-items: center; color: var(--muted); }
.unit .lv-status .icon { width: 16px; height: 16px; }
.unit .lv-status.solved { color: var(--ok); }
.unit .lv-status.open { color: var(--accent); }
.unit .lv-status.open .icon { stroke-width: 6; }
.lv-mark { display: inline-block; vertical-align: -2px; color: var(--muted); line-height: 0; }
.lv-mark .icon { width: 13px; height: 13px; }
.unit li.lesson-start:not(:first-child) { margin-top: 8px; }

/* ------------------------------------------------------------------ layout: resizable, fullscreen
   Editor | divider | world, the divider at --split (src/ui/layout.js), the top row filling the window
   height (--avail), so the editor is as tall as the screen allows. Results span the full width below. */
.layout { grid-template-columns: minmax(0, calc(var(--split, 0.5) * 100%)) 12px minmax(0, 1fr); gap: 16px 4px;
          grid-template-rows: minmax(var(--avail, 560px), auto) auto; }
.layout.resizing, .layout.resizing * { cursor: col-resize !important; user-select: none; }
.splitter { align-self: stretch; cursor: col-resize; border-radius: 6px; position: relative; touch-action: none; }
.splitter::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 44px; margin: -22px 0 0 -2px; border-radius: 4px; background: var(--line); transition: background 0.15s, height 0.15s; }
.splitter:hover::after, .splitter:focus-visible::after, .layout.resizing .splitter::after { background: var(--accent); height: 72px; margin-top: -36px; }
.splitter:focus-visible { outline: none; }
.editor-panel, .world-panel { display: flex; flex-direction: column; }
.editor-panel > *, .world-panel > * { flex: none; }
.editor-box { position: relative; flex: 1 1 auto !important; min-height: 240px; display: flex; }
.editor { height: auto; flex: 1; min-height: 240px; }
.world-row { flex: 1 1 auto !important; align-items: stretch; }
.goal-view { align-self: start; }
.world { min-height: 200px; }
.grid-world { max-height: max(220px, calc(var(--avail, 560px) - 150px)); }
.fullscreen-button { color: var(--muted); }
.editor-box .fullscreen-button { position: absolute; top: 6px; right: 8px; z-index: 2; background: var(--surface); opacity: 0.75; }
.editor-box .fullscreen-button:hover, .editor-box .fullscreen-button:focus-visible { opacity: 1; }
.caption .fullscreen-button { margin-left: 4px; padding: 3px; }
.results-fullscreen { position: absolute; top: 8px; right: 8px; }
.results-panel .hint-offer { right: 48px; }
/* A panel in full screen (the browser's own, or the full-window fallback). */
.panel:fullscreen, .panel.is-max { border-radius: 0; border: 0; padding: 20px; background: var(--bg); overflow: auto; }
.panel.is-max { position: fixed; inset: 0; z-index: 50; }
.panel:fullscreen::backdrop { background: var(--bg); }
.editor-panel:fullscreen .editor-box, .editor-panel.is-max .editor-box { min-height: 0; }
.editor-panel:fullscreen .editor, .editor-panel.is-max .editor { font-size: 16px; }
.world-panel:fullscreen .grid-world, .world-panel.is-max .grid-world { max-height: calc(100vh - 140px); }
.world-panel:fullscreen .goal-grid .grid-world, .world-panel.is-max .goal-grid .grid-world { max-height: 40vh; }
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .splitter { display: none; }
  .editor-box, .editor { min-height: 45vh; }
}
/* Drive mode uses the panel's height too: the moves log grows instead of leaving empty space. */
.editor-panel .drive { flex: 1 1 auto !important; grid-template-rows: auto auto minmax(120px, 1fr) auto; }
.editor-panel .drive .drive-log { max-height: none; }
@media (max-width: 860px) { .editor-panel .drive .drive-log { max-height: 150px; } }

/* Line counter for levels with max_lines: quiet when within, red when over (you can still run). */
.line-count { font: 600 13px var(--mono); color: var(--muted); padding: 2px 8px; border-radius: 999px; background: var(--bg); }
.line-count.over { color: var(--danger); background: var(--band-error); }

/* ------------------------------------------------ shared room (docs/collab.md) */
.room-bar { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 8px; border-radius: 999px; background: var(--guide-bg); }
.room-bar[hidden] { display: none; }
.room-peers { display: inline-flex; align-items: center; margin-right: 4px; }
.peer-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--peer); border: 2px solid var(--surface); margin-left: -3px; }
.peer-dot:first-child { margin-left: 0; }
.peer-dot.you { box-shadow: 0 0 0 1.5px var(--peer); }
.share-body { padding: 4px 16px 16px; }
.share-body p { margin: 0 0 8px; }
.share-facts { margin: 0 0 14px; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.share-start { padding: 8px 10px 8px 14px; }
.cm-peer-caret { position: relative; border-left: 2px solid var(--peer); margin-left: -1px; margin-right: -1px; }
.cm-peer-name { position: absolute; left: -2px; bottom: 100%; padding: 1px 5px; border-radius: 4px 4px 4px 0; background: var(--peer); color: #fff; font: 11px/1.3 var(--sans); white-space: nowrap; pointer-events: none; animation: peer-name 1.6s ease-in forwards; }
.cm-peer-selection { background: color-mix(in srgb, var(--peer) 18%, transparent); }
@keyframes peer-name { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cm-peer-name { animation: none; opacity: 0; } }