:root {
  --bg: #f6f5f2;
  --panel: #ffffff;
  --ink: #1d1d1f;
  --muted: #6b6b70;
  --line: #e2e0db;
  --accent: #1f6feb;
  --ok: #2b8a3e;
  --warn: #b35c00;
  --bad: #c92a2a;
  --editor-bg: #ffffff;
  --editor-gutter: #faf9f7;
  --editor-active: #f3f1ec;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151517;
    --panel: #1d1d20;
    --ink: #ececef;
    --muted: #9a9aa2;
    --line: #2e2e33;
    --accent: #5c9dff;
    --ok: #69db7c;
    --warn: #ffa94d;
    --bad: #ff8787;
    --editor-bg: #1a1a1d;
    --editor-gutter: #1d1d20;
    --editor-active: #232327;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { font: 14px/1.4 system-ui, -apple-system, Segoe UI, sans-serif; }
#app, .shell { height: 100%; }
.shell { display: flex; flex-direction: column; }

button {
  font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 12px; cursor: pointer;
}
button:disabled { opacity: 0.45; cursor: default; }
button.ghost { background: transparent; }

.bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.brand { font-weight: 700; letter-spacing: 0.02em; }
.room { font-family: ui-monospace, monospace; color: var(--muted); }
.link { font-size: 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.link::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.link.live::before { background: var(--ok); }
.link.connecting::before { background: var(--warn); }
.link.offline { color: var(--warn); }
.link.offline::before { background: var(--warn); }
.people { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.me { display: flex; align-items: center; gap: 6px; }
.me input {
  font: inherit; color: inherit; background: transparent; width: 9em;
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px;
}
.peer {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  border: 1px solid var(--line); border-radius: 999px;
}
.peer-status { color: var(--muted); font-size: 12px; }
.settings { position: relative; }
.settings-button { font-size: 16px; line-height: 1; padding: 5px 9px; }
.settings-backdrop { position: fixed; inset: 0; z-index: 20; }
.settings-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 21; width: 280px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); padding: 8px;
}
.setting { display: flex; gap: 10px; align-items: flex-start; padding: 6px; border-radius: 6px; cursor: pointer; }
.setting:hover { background: var(--bg); }
.setting input { margin-top: 3px; }
.setting-text { display: flex; flex-direction: column; gap: 2px; }
.setting-name { font-weight: 600; }
.setting-note { font-size: 12px; color: var(--muted); }
.compiler { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); }
.compiler.bad { color: var(--bad); }
.compiler-status {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px;
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  font-size: 13px;
}
.compiler-status.bad { background: color-mix(in srgb, var(--bad) 10%, var(--panel)); color: var(--bad); }
.compiler-trouble { display: flex; flex-direction: column; gap: 2px; }
.compiler-reason { font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; }
.compiler-progress { flex: 1; min-width: 120px; height: 8px; accent-color: var(--accent); }
.compiler-offer-text { flex: 1 1 16ch; }
.get-compiler { background: var(--accent); border-color: var(--accent); color: #fff; }

/* A phone, until the compiler is asked for: where to open the room instead. */
.phone-note {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; font-size: 13px;
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
/* Wide (a phone turned sideways): the note spans the columns, over them. */
.phone-note { grid-column: 1 / -1; }
.work:has(> .phone-note) { grid-template-rows: auto minmax(0, 1fr); }
.phone-note-text { margin: 0; }
.phone-note-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.phone-note-url { font-family: ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; }

/* The exercise column | the code, with the output docked under it. Both sizes are
   variables the drag handles set (layout_ffi.mjs). */
.work { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 0; }
.phone-tabs { display: none; }
.code-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dock-handle {
  flex: none; height: 6px; cursor: row-resize; background: var(--bg);
  border-top: 1px solid var(--line); touch-action: none;
}
.dock-handle:hover, .dock-handle:focus-visible, .dock-handle.dragging { background: var(--accent); outline: none; }
.dock { flex: none; height: var(--dock-h, 38%); display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.dock-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.dock-body:has(> .checks) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dock-body > .checks { max-height: none; border-bottom: 0; border-left: 1px solid var(--line); overflow: auto; }
.code { position: relative; flex: 1; min-height: 0; }
cpad-editor { display: block; height: 100%; }
.editor-slot { height: 100%; }

/* ------------------------------------------------------------------ desks */
.desks {
  flex: none; display: flex; align-items: center; gap: 4px; padding: 4px 8px;
  border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap;
}
.desk {
  border: 1px solid transparent; background: none; color: var(--muted);
  padding: 4px 10px; border-radius: 6px; font: inherit; cursor: pointer;
}
.desk[aria-pressed="true"] { color: var(--ink); background: var(--bg); border-color: var(--line); }
.desk-close { padding: 2px 8px; }
.desk-new { margin-left: 4px; }
.desk-viewers {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85em; color: var(--ink); padding: 2px 10px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line);
}
.desk-viewers-dot { width: 8px; height: 8px; border-radius: 50%; background: #2e7d32; }
.split-toggle { margin-left: 8px; }
.split-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.split { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pane + .pane { border-left: 1px solid var(--line); }
.pane-head {
  flex: none; display: flex; justify-content: space-between; align-items: center;
  padding: 3px 10px; font-size: 0.8em; color: var(--muted);
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.pane.runs .pane-head { color: var(--ink); box-shadow: inset 0 -2px var(--accent); }
.pane-runs { font-size: 0.9em; }
.pane-body { flex: 1; min-height: 0; }
@media (max-width: 700px) {
  .split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .pane + .pane { border-left: none; border-top: 1px solid var(--line); }
}
.desk-note { color: var(--muted); font-size: 0.85em; }
.desk-chip { font-size: 0.8em; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }

/* ------------------------------------------------------------------ the exercise */
.exercise {
  position: relative; width: var(--ex-w, 340px); min-width: 0; min-height: 0;
  display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel);
}
.exercise-head {
  flex: none; width: 100%; display: flex; justify-content: space-between; align-items: center;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--panel);
  padding: 8px 16px; font-weight: 600;
}
.exercise-head::after { content: '◂'; color: var(--muted); margin-left: 8px; }
.exercise-rail {
  width: 34px; min-height: 0; border: 0; border-right: 1px solid var(--line); border-radius: 0;
  background: var(--panel); padding: 10px 0; display: flex; flex-direction: column;
  align-items: center; gap: 8px; color: var(--muted);
}
.exercise-rail:hover { color: var(--ink); }
.rail-word { writing-mode: vertical-rl; font-weight: 600; letter-spacing: 0.04em; }
.exercise-count { margin-left: 8px; font-weight: 400; font-size: 12px; color: var(--muted); }
.exercise-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.ex-examples-fold { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.ex-examples-fold > summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
.ex-examples-fold[open] > summary { margin-bottom: 8px; }
.col-handle {
  position: absolute; top: 0; right: -4px; width: 7px; height: 100%; cursor: col-resize;
  z-index: 2; touch-action: none;
}
.col-handle:hover, .col-handle:focus-visible, .col-handle.dragging {
  background: color-mix(in srgb, var(--accent) 60%, transparent); outline: none;
}
.exercise-text { line-height: 1.5; }
.write-exercise { align-self: flex-start; }

.ex-h { font-weight: 700; }
.ex-h1 { font-size: 20px; }
.ex-h2 { font-size: 17px; }
.ex-h3 { font-size: 15px; }
.ex-li { display: flex; gap: 8px; align-items: baseline; }
.ex-li > .blk-grow, .ex-li > .ex-text { flex: 1; min-width: 0; }
.ex-mark { color: var(--muted); flex: none; min-width: 1ch; }
.blk-doc { counter-reset: ex-n; }
.ex-ol { counter-increment: ex-n; }
.ex-num::before { content: counter(ex-n) '.'; }
.ex-todo input { margin: 0; }
.ex-quote { border-left: 3px solid var(--line); padding-left: 10px; color: var(--muted); }
.ex-code { font-family: ui-monospace, monospace; font-size: 13px; background: var(--bg); padding: 1px 8px; }
.ex-callout { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border-radius: 6px; padding: 6px 10px; }
.ex-divider hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.ex-reading code { font-family: ui-monospace, monospace; background: var(--bg); padding: 0 4px; border-radius: 4px; }
.ex-text { white-space: pre-wrap; overflow-wrap: anywhere; }

.ex-examples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ex-example { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ex-example-head { display: flex; gap: 10px; align-items: center; padding: 4px 10px; background: var(--bg); font-size: 12px; }
.ex-example-title { font-weight: 600; }
.ex-input { color: var(--muted); font-family: ui-monospace, monospace; }
.ex-edit { margin-left: auto; padding: 0 8px; font-size: 12px; }
.ex-edit + .ex-remove { margin-left: 0; }
.ex-remove { margin-left: auto; padding: 0 8px; }
.ex-example.editing { padding: 10px; border-color: var(--accent); }
.ex-expected { padding: 6px 10px; margin: 0; }
.example-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.example-form { display: flex; flex-direction: column; gap: 8px; }
.example-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.example-form textarea {
  font: 13px ui-monospace, monospace; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px; min-height: 4em; padding: 6px; resize: vertical;
}

/* ------------------------------------------------------------------ roles and the badge */
.role { display: inline-flex; align-items: center; gap: 8px; }
.teacher-chip {
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, var(--panel)); color: var(--accent);
}
/* ------------------------------------------------------------------ people */
.people-button { display: inline-flex; align-items: center; gap: 8px; }
.stack { display: inline-flex; }
.stack .dot { margin-left: -3px; border: 2px solid var(--panel); width: 14px; height: 14px; }
.stack .dot:first-child { margin-left: 0; }
.hand-badge {
  font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 22%, var(--panel)); color: var(--warn);
}
.hand-button.up {
  background: color-mix(in srgb, var(--warn) 18%, var(--panel));
  border-color: var(--warn); color: var(--warn); font-weight: 600;
}
.teacher-warning { font-size: 12px; color: var(--bad); }

.people-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); z-index: 9;
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px color-mix(in srgb, #000 12%, transparent);
  display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow: auto;
}
.people-head { display: flex; align-items: center; justify-content: space-between; }
.people-title { font-weight: 700; }
.people-search {
  font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px;
}
.people-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.people-section.hands {
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 7%, var(--panel)); padding: 6px 8px;
}
.people-section-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; }
.people-rows { list-style: none; margin: 0; padding: 0; }
.person { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.person:last-child { border-bottom: 0; }
.person-name { font-weight: 600; }
.person-role { font-size: 11px; color: var(--accent); }
.person-detail { margin-left: auto; display: flex; gap: 8px; color: var(--muted); font-size: 12px; }
.person-standing.pass { color: var(--ok); }
.person-standing.fail { color: var(--bad); }
.person .lower { padding: 2px 8px; font-size: 12px; }

/* ------------------------------------------------------------------ checks: the result */
.checks { border-bottom: 1px solid var(--line); max-height: 55%; overflow: auto; flex: none; }
.checks-headline {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  position: sticky; top: 0; z-index: 1;
}
.checks-icon {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--muted);
}
.checks-title { font-weight: 700; font-size: 15px; }
.checks-detail { margin-left: auto; font-size: 12px; color: var(--muted); }
.checks.pass .checks-headline { background: color-mix(in srgb, var(--ok) 14%, var(--panel)); }
.checks.pass .checks-icon { background: var(--ok); }
.checks.pass .checks-title { color: var(--ok); }
.checks.fail .checks-headline { background: color-mix(in srgb, var(--bad) 12%, var(--panel)); }
.checks.fail .checks-icon { background: var(--bad); }
.checks.fail .checks-title { color: var(--bad); }
.checks.pending .checks-headline { background: var(--bg); }

.check-rows { list-style: none; margin: 0; padding: 0; }
.check-row + .check-row { border-top: 1px solid var(--line); }
.check-head {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  border: 0; border-radius: 0; background: transparent; padding: 7px 12px; font-size: 13px;
}
.check-head::after { content: '▸'; color: var(--muted); margin-left: 4px; }
.check-head[aria-expanded="true"]::after { content: '▾'; }
.check-icon { width: 16px; text-align: center; font-weight: 700; flex: none; }
.check-row.pass .check-icon, .check-row.pass .check-word { color: var(--ok); }
.check-row.fail .check-icon, .check-row.fail .check-word { color: var(--bad); }
.check-row.pending .check-icon, .check-row.pending .check-word { color: var(--muted); }
.check-name { font-weight: 600; }
.check-input { color: var(--muted); font-family: ui-monospace, monospace; font-size: 12px; }
.check-word { margin-left: auto; }
.check-output {
  padding: 6px 12px 10px 36px; margin: 0; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
}
.check-line { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.4em; }
/* What was typed where a read ended the line: shown for orientation, never compared. */
.typed {
  display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 4px;
  font-size: 0.85em; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
  white-space: pre; user-select: none;
}
.check-note { margin: 0; padding: 4px 12px 10px 36px; color: var(--bad); font-size: 13px; }

.diff { padding: 0 12px 10px 12px; }
.diff-legend { display: flex; gap: 12px; font-size: 11px; margin: 0 0 4px 24px; }
.diff-key::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.diff-key.expected::before { background: color-mix(in srgb, var(--ok) 35%, var(--panel)); }
.diff-key.got::before { background: color-mix(in srgb, var(--bad) 35%, var(--panel)); }
.diff-rows { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; font: 13px/1.5 ui-monospace, monospace; }
.diff-row { display: grid; grid-template-columns: 5.5em 1fr; }
.diff-gutter {
  font: 11px/1.95 system-ui, sans-serif; color: var(--muted); text-align: right;
  padding-right: 8px; border-right: 1px solid var(--line); user-select: none;
}
.diff-text { padding: 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-row.both .diff-text { color: var(--muted); }
.diff-row.expected { background: color-mix(in srgb, var(--ok) 12%, var(--panel)); }
.diff-row.expected .diff-gutter { color: var(--ok); }
.diff-row.got { background: color-mix(in srgb, var(--bad) 11%, var(--panel)); }
.diff-row.got .diff-gutter { color: var(--bad); }
.diff-mark { color: inherit; border-radius: 3px; padding: 0 1px; }
.diff-row.expected .diff-mark { background: color-mix(in srgb, var(--ok) 38%, var(--panel)); }
.diff-row.got .diff-mark { background: color-mix(in srgb, var(--bad) 38%, var(--panel)); }
.diff-gap { display: inline-block; width: 2px; height: 1.1em; vertical-align: -2px; background: var(--bad); }
.diff-empty { color: var(--muted); font-style: italic; }
/* Over the editor, but clicks pass through everywhere except the button: someone who
   would rather type from scratch clicks the empty editor and gets it. */
.empty {
  position: absolute; inset: 40% 0 auto 0; text-align: center; color: var(--muted);
  pointer-events: none;
}
.empty button { pointer-events: auto; }

.actions { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.run { background: var(--accent); border-color: var(--accent); color: #fff; }
.run kbd { margin-left: 8px; font-size: 11px; opacity: 0.8; font-family: inherit; }
.state { margin-left: auto; color: var(--muted); }

.output { flex: 1; overflow: auto; padding: 10px 12px; }
.hint { color: var(--muted); }
pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 13px/1.45 ui-monospace, monospace; }
.program .err { color: var(--bad); }
.program .typed { color: var(--accent); }
/* The input line sits inline after the last output, like a terminal's cursor. */
.term-input {
  font: inherit; color: var(--accent); background: transparent; border: 0; outline: none;
  padding: 0; margin: 0; width: 24ch; max-width: 100%;
  border-bottom: 1px dashed var(--line);
}
.term-input.waiting { border-bottom-color: var(--accent); }
.raw { color: var(--muted); margin-top: 10px; }
.diagnostics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.diagnostic { width: 100%; text-align: left; display: flex; gap: 10px; border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.where { font-family: ui-monospace, monospace; color: var(--bad); flex: none; }
.ending { margin: 10px 0 0; font-size: 12px; }
.ending.ok { color: var(--ok); }
.ending.warn { color: var(--warn); }
.ending.bad { color: var(--bad); }

.present-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Presenting: the code as large as the room's screen allows, on white whatever the
   theme, because scanners want dark modules on a light ground. */
.present {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(4px);
  padding: 16px;
}
.present-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; max-width: 100%; max-height: 100%; overflow: auto;
}
.present-card h2 { margin: 0; font-size: 28px; }
.qr { width: min(62vh, 80vw); height: min(62vh, 80vw); display: block; border-radius: 8px; }
.present-url { margin: 0; font: 600 20px ui-monospace, monospace; word-break: break-all; text-align: center; }
.present-count { margin: 0; color: var(--muted); font-size: 16px; }
.present-warning {
  margin: 0; max-width: 60ch; text-align: center; color: var(--bad);
  border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--line)); border-radius: 8px; padding: 8px 12px;
}
.present-close kbd { margin-left: 8px; font-size: 11px; opacity: 0.7; font-family: inherit; }

/* A phone shows one area at a time, picked by tabs; Run switches to the output.
   760px is also the width at which the page, when it opens, holds the compiler back
   (isPhone in src/cpad_app/layout_ffi.mjs): change both together. */
@media (max-width: 760px) {
  .work { display: flex; flex-direction: column; }
  .phone-tabs { display: flex; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--line); background: var(--panel); }
  .phone-tab { flex: 1; border-color: transparent; background: none; color: var(--muted); }
  .phone-tab[aria-pressed="true"] { color: var(--ink); background: var(--bg); border-color: var(--line); }
  .dock-handle, .col-handle { display: none; }
  .exercise, .exercise-rail { width: auto; flex: 1; border-right: 0; }
  .code-col { flex: 1; }
  .work:not([data-phone="exercise"]) .exercise, .work:not([data-phone="exercise"]) .exercise-rail { display: none; }
  .work[data-phone="exercise"] .code-col { display: none; }
  .work[data-phone="code"] .dock { height: auto; }
  .work[data-phone="code"] .dock-body { display: none; }
  .work[data-phone="output"] .desks, .work[data-phone="output"] .code { display: none; }
  .work[data-phone="output"] .dock { flex: 1; height: auto; }
  /* The verdict first, then the terminal under it. */
  .dock-body:has(> .checks) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; overflow: auto; }
  .dock-body > .checks { order: -1; border-left: 0; border-bottom: 1px solid var(--line); }
  .dock-body > .output { overflow: visible; }
}

/* ------------------------------------------------------------------ exercise sets */
.ex-index { display: flex; flex-direction: column; gap: 8px; }
/* Sticky inside .exercise-body, whose padding is 12px 16px: the negative top and margin
   keep rows from showing through above the bar while they scroll under it. */
.ex-index-top, .ex-nav { position: sticky; top: -12px; z-index: 1; margin-top: -12px; background: var(--panel); }
.ex-index-top { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 8px; }
.ex-search {
  font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px; width: 100%;
}
.ex-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-rows { list-style: none; margin: 0; padding: 0; }
.ex-row { display: flex; align-items: flex-start; border-bottom: 1px solid var(--line); }
.ex-row:hover, .ex-row[aria-current="true"] { background: var(--bg); }
.ex-row[aria-current="true"] { box-shadow: inset 3px 0 var(--accent); }
.ex-open {
  flex: 1; min-width: 0; display: flex; gap: 10px; align-items: flex-start; text-align: left;
  border: 0; border-radius: 0; background: transparent; padding: 8px 6px;
}
.ex-status {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1;
  color: #fff; border: 1.5px solid var(--muted);
}
.ex-status[data-status="started"] { border-color: var(--accent); }
.ex-status[data-status="some"] { background: var(--warn); border-color: var(--warn); }
.ex-status[data-status="bad"] { background: var(--bad); border-color: var(--bad); }
.ex-status[data-status="pass"] { background: var(--ok); border-color: var(--ok); }
.ex-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ex-row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-row-n { color: var(--muted); font-weight: 400; margin-right: 6px; }
.ex-row-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.ex-row-words[data-status="some"] { color: var(--warn); }
.ex-row-words[data-status="bad"] { color: var(--bad); }
.ex-row-words[data-status="pass"] { color: var(--ok); }
.ex-label {
  font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  /* In the one-exercise column this chip is a direct child of the flex column, where a
     span is blockified and would stretch the full width: keep it a pill. */
  align-self: flex-start;
  background: color-mix(in srgb, var(--hue, var(--muted)) 14%, var(--panel));
  color: color-mix(in srgb, var(--hue, var(--muted)) 75%, var(--ink));
}
.ex-label.t0 { --hue: #1971c2; }
.ex-label.t1 { --hue: #2b8a3e; }
.ex-label.t2 { --hue: #e67700; }
.ex-label.t3 { --hue: #9c36b5; }
.ex-label.t4 { --hue: #c2255c; }
.ex-label.t5 { --hue: #0c8599; }
.ex-row-tools { flex: none; display: flex; gap: 2px; padding: 8px 4px 0 0; }
.ex-row-tools button { padding: 0 6px; font-size: 12px; }
.ex-row.confirming { flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 6px; }
.ex-confirm-words { margin: 0; flex: 1 1 100%; font-size: 13px; }
.ex-remove-yes { color: var(--bad); border-color: var(--bad); }
.ex-add { width: 100%; margin-top: 4px; border: 1px dashed var(--line); background: transparent; color: var(--muted); }
.ex-add:hover { color: var(--ink); border-color: var(--accent); }
.ex-none, .ex-none-yet { margin: 0; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.ex-nav { display: flex; align-items: center; gap: 6px; padding: 12px 0 6px; border-bottom: 1px solid var(--line); }
.ex-nav button { padding: 2px 8px; }
.ex-step { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ex-pos { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ex-title, .ex-title-read { font-size: 17px; font-weight: 700; margin: 0; }
.ex-title {
  font-family: inherit; color: inherit; width: 100%; background: transparent;
  border: 1px solid transparent; border-radius: 6px; padding: 3px 6px;
}
.ex-title:hover, .ex-title:focus { border-color: var(--line); outline: none; }
.ex-label-field {
  font: inherit; font-size: 12px; color: inherit; background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 8px; width: 16em; max-width: 100%; align-self: flex-start;
}
.desk-exercise {
  color: var(--muted); font-size: 0.85em; max-width: 28ch; margin-right: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.choose { position: absolute; inset: 40% 0 auto 0; text-align: center; color: var(--muted); }
.run-of { font-size: 12px; color: var(--muted); }