/* Teenage Engineering industrial minimalism (csuite/skills/teenage-engineering).
   Colour is functional, never decorative:
     red     warnings: wrong notes, out of tune, input level
     blue    time and sequence: steps, box/chord progression
     orange  encoders and the next target
     yellow  active selection, the current triad
     green   correct notes, in tune, complete */
:root {
  --bg: #000000;
  --key: #1a1a1a;
  --well: #2a2a2a;
  --rule: #333333;
  --key-edge: #444444;
  --dim: #8a8a8a;
  --fg: #ffffff;
  --red: #ff0000;
  --blue: #0055ff;
  --orange: #ff5500;
  --yellow: #ffd700;
  --green: #00ff00;
  --on-blue: #ffffff;
  --on-green: #000000;
  --on-yellow: #000000;
  --on-orange: #000000;
  --on-red: #ffffff;
  --key-shadow: 2px 2px 0 #000, inset 0 1px 0 #2f2f2f;
  --key-shadow-down: 1px 1px 0 #000;
  --scrim: rgba(0, 0, 0, 0.6);
  --lines: rgba(255, 255, 255, 0.025);
  --zone: rgba(0, 255, 0, 0.18);
  --span: #1c1c1c;
  --string: #6a6a6a;
  --ghost: #555;
  --ghost-text: #777;
  --missed: #8a2020;
  --missed-text: #d04848;
  --grain: none;
  --next-off-text: var(--on-blue);
  --display-filter: contrast(1.1);
  --label-filter: brightness(1.6);
  --font-mono: 'JetBrains Mono', 'Monaco', 'Courier New', monospace;
  --u: 8px;
  color-scheme: dark;
}

/* Light: warm paper, ink, and muted complements of the same functional colours.
   Follows the system unless the menu pins a theme. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f0e8;
    --key: #fcfaf5;
    --well: #e6e0d3;
    --rule: #ddd5c6;
    --key-edge: #d3c9b6;
    --dim: #8c8475;
    --fg: #26231e;
    --red: #c4483b;
    --blue: #2f5aa8;
    --orange: #d9753a;
    --yellow: #e8b84a;
    --green: #4a8a5c;
    --on-blue: #ffffff;
    --on-green: #ffffff;
    --on-yellow: #26231e;
    --on-orange: #ffffff;
    --on-red: #ffffff;
    --key-shadow: 0 1px 0 #d3c9b6, 0 2px 6px rgba(70, 55, 30, 0.08), inset 0 1px 0 #ffffff;
    --key-shadow-down: 0 0 0 #d3c9b6;
    --scrim: rgba(60, 50, 35, 0.3);
    --lines: transparent;
    --zone: rgba(74, 138, 92, 0.18);
    --span: #ebe3d2;
    --string: #a39a88;
    --ghost: #bdb4a2;
    --ghost-text: #9a917f;
    --missed: #dfaaa2;
    --missed-text: #c4483b;
    /* Paper grain: fractal noise at a whisper. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.18 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --display-filter: none;
  --label-filter: none;
  --next-off-text: var(--blue);
  color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f4f0e8;
  --key: #fcfaf5;
  --well: #e6e0d3;
  --rule: #ddd5c6;
  --key-edge: #d3c9b6;
  --dim: #8c8475;
  --fg: #26231e;
  --red: #c4483b;
  --blue: #2f5aa8;
  --orange: #d9753a;
  --yellow: #e8b84a;
  --green: #4a8a5c;
  --on-blue: #ffffff;
  --on-green: #ffffff;
  --on-yellow: #26231e;
  --on-orange: #ffffff;
  --on-red: #ffffff;
  --key-shadow: 0 1px 0 #d3c9b6, 0 2px 6px rgba(70, 55, 30, 0.08), inset 0 1px 0 #ffffff;
  --key-shadow-down: 0 0 0 #d3c9b6;
  --scrim: rgba(60, 50, 35, 0.3);
  --lines: transparent;
  --zone: rgba(74, 138, 92, 0.18);
  --span: #ebe3d2;
  --string: #a39a88;
  --ghost: #bdb4a2;
  --ghost-text: #9a917f;
  --missed: #dfaaa2;
  --missed-text: #c4483b;
  /* Paper grain: fractal noise at a whisper. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.18 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --display-filter: none;
  --label-filter: none;
  --next-off-text: var(--blue);
  color-scheme: light;
}

* { box-sizing: border-box; transition: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg) var(--grain);
  color: var(--fg);
  font: 14px/1.4 var(--font-mono);
  letter-spacing: 0.05em;
  padding: calc(env(safe-area-inset-top) + var(--u)) calc(var(--u) * 2) calc(var(--u) * 3 + env(safe-area-inset-bottom));
  max-width: 900px;
  margin: 0 auto;
}

body[data-mode="boxes"] .only-game, body[data-mode="boxes"] .only-chords, body[data-mode="boxes"] .not-boxes,
body[data-mode="game"] .only-boxes, body[data-mode="game"] .only-chords,
body[data-mode="chords"] .only-boxes, body[data-mode="chords"] .only-game, body[data-mode="chords"] .not-chords { display: none !important; }

body[data-mode="prog"] :is(.only-boxes, .only-game, .only-chords, .not-prog) { display: none !important; }
body:not([data-mode="prog"]) .only-prog { display: none !important; }
/* While playing a progression, only tempo and stage stay on screen: the fretboard matters more. */
body[data-mode="prog"][data-phase="practice"] .settings .enc:not(.keep) { display: none !important; }
body[data-phase="tuning"] :is(.actions, .readout) { display: none !important; }

/* ---------- header ---------- */
header { display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 6); }
.brand { display: flex; align-items: baseline; gap: var(--u); }
.logo { font-weight: 700; font-size: 18px; letter-spacing: 0.2em; }
.model { color: var(--dim); font-size: 11px; }
.led { display: flex; align-items: center; gap: var(--u); font-size: 11px; letter-spacing: 0.15em; color: var(--dim); }
.led i { width: 8px; height: 8px; border-radius: 50%; background: var(--well); }
.led[data-state="ok"] { color: var(--green); }
.led[data-state="ok"] i { background: var(--green); box-shadow: 0 0 6px var(--green); }
.led[data-state="skipped"] i { background: var(--dim); }
.led[data-state="tuning"] { color: var(--orange); }
.led[data-state="tuning"] i { background: var(--orange); animation: blink 0.6s steps(1) infinite; }

/* ---------- calculator keys ---------- */
.keys { display: grid; gap: 4px; }
.modes { grid-template-columns: 1fr; margin-top: var(--u); }
.drawer-label { margin-top: calc(var(--u) * 3); }
.themes { grid-template-columns: repeat(3, 1fr); margin-top: var(--u); }
.themes button { padding: 0; font-size: 11px; }
.themes button[aria-pressed="true"] { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); }
.menu { min-height: 32px; width: 36px; padding: 0; font-size: 16px; align-self: center; }
.brand { align-items: center; }
.drawer {
  position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: min(260px, 80vw);
  padding: calc(env(safe-area-inset-top) + var(--u) * 2) calc(var(--u) * 2);
  background: var(--bg); border-right: 1px solid var(--rule); overflow-y: auto;
}
.drawer[hidden], .scrim[hidden] { display: none; }
.scrim { position: fixed; inset: 0; z-index: 10; background: var(--scrim); }
button, .key {
  font: inherit;
  color: var(--fg);
  background: var(--key);
  border: 1px solid var(--key-edge);
  border-radius: 4px;
  box-shadow: var(--key-shadow);
  padding: var(--u) calc(var(--u) * 2);
  min-height: 40px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
button:active { transform: translate(1px, 1px); box-shadow: var(--key-shadow-down); }
.modes button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--u); font-weight: 700; }
.modes button b { color: var(--dim); font-size: 10px; font-weight: 400; }
.modes button[aria-selected="true"], .boxes-picker button[aria-pressed="true"] {
  background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow);
}
.modes button[aria-selected="true"] b { color: var(--on-yellow); }
.primary { width: 100%; min-height: 56px; font-weight: 700; font-size: 16px; background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.primary.on { background: var(--key); border-color: var(--key-edge); color: var(--fg); }
.transport { grid-template-columns: 1fr; flex-basis: 100%; }
.transport:has(.pause:not([hidden])) { grid-template-columns: 1fr 1fr; }
.primary.pause { background: var(--key); border-color: var(--key-edge); color: var(--fg); }
.primary.pause[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }
body.paused .display { opacity: 0.4; }
.key.small { min-height: 32px; padding: 4px var(--u); font-size: 11px; }

/* ---------- encoders (settings) ---------- */
.settings { margin-top: var(--u); display: flex; flex-wrap: wrap; gap: var(--u); margin-bottom: calc(var(--u) * 2); }
.enc { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--dim); letter-spacing: 0.15em; min-width: 72px; }
.enc.fixed em { font-style: normal; color: var(--fg); font-size: 13px; padding: 9px 0 0; }
.wide-enc { min-width: 150px; }
input:not([type]), input[type="number"] {
  font: inherit; font-size: 13px; color: var(--orange); background: var(--bg);
  border: 1px solid var(--rule); border-radius: 0; padding: 6px var(--u); min-height: 32px; width: 100%;
  letter-spacing: 0.08em;
}
input[type="number"] { width: 72px; }
.full-enc { flex-basis: 100%; }
select {
  font: inherit; font-size: 13px; color: var(--orange); background: var(--bg);
  border: 1px solid var(--rule); border-radius: 0; padding: 6px var(--u); min-height: 32px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.boxes-picker { grid-template-columns: repeat(5, 40px); align-self: flex-end; }
.boxes-picker button { padding: 0; min-height: 40px; font-weight: 700; }
.error { color: var(--red); font-size: 12px; }

/* ---------- OLED display ---------- */
.display {
  position: relative;
  margin: calc(var(--u) * 2) 0 var(--u);
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  filter: var(--display-filter);
}
.display::after { /* scan lines */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--lines) 0 1px, transparent 1px 3px);
}
.row { display: flex; justify-content: space-between; gap: calc(var(--u) * 2); }
.prompt { flex: 1; min-width: 0; }
.label { font-size: 10px; color: var(--dim); letter-spacing: 0.15em; }
.label b { color: var(--blue); font-weight: 700; filter: var(--label-filter); }
.big { font-size: 44px; font-weight: 700; line-height: 1.1; color: var(--orange); letter-spacing: 0.02em; }
.sub { font-size: 12px; color: var(--fg); min-height: 17px; }
.heard { width: 104px; text-align: right; }
.heard-note { font-size: 24px; font-weight: 700; line-height: 1.3; }

.meter { position: relative; height: 12px; margin: var(--u) 0 4px; border: 1px solid var(--rule); background:
  repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 10%); }
.meter-zone { position: absolute; left: 45%; width: 10%; top: 0; bottom: 0; background: var(--zone); }
.meter-needle { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; left: 50%; background: var(--fg); opacity: 0; }
.meter.mini { height: 8px; }
.level { height: 4px; background: var(--well); }
.level-bar { height: 100%; width: 0; background: var(--red); }

.tones { display: flex; gap: 4px; margin-top: var(--u); }
.tones span { flex: 1; text-align: center; font-size: 11px; padding: 4px 0; border: 1px solid var(--rule); color: var(--dim); }
.tones span.done { border-color: var(--green); color: var(--green); }
.tones span.next { border-color: var(--orange); color: var(--orange); }
.tones span.miss { border-color: var(--red); color: var(--red); }

.banner { margin-top: var(--u); padding: 6px var(--u); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; border: 1px solid; } /* text is uppercased in code, so numerals keep their case */
/* Always takes its space, so the fretboard below never jumps when it comes and goes. */
.banner { line-height: 1.4; min-height: calc(1.4em + 14px); box-sizing: border-box; }
.banner[hidden] { display: block; visibility: hidden; }
.banner.bad { color: var(--red); border-color: var(--red); }
.banner.good { color: var(--green); border-color: var(--green); }
.banner.info { color: var(--fg); border-color: var(--rule); }
body.flash-bad .display { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }

/* tuner */
.tuner-panel .big { color: var(--fg); }
.cents { font-size: 28px; font-weight: 700; align-self: center; }
.tuner-panel[data-status="flat"] .cents, .tuner-panel[data-status="sharp"] .cents { color: var(--red); }
.tuner-panel[data-status="holding"] .cents { color: var(--green); }
.tuner-panel[data-status="other"] .cents { color: var(--dim); }
.tuner-panel .meter { height: 20px; margin: var(--u) 0; }
.tuner-panel .meter-needle { opacity: 1; width: 4px; }
.tuner-panel[data-status="holding"] .meter-needle { background: var(--green); }
.tuner-panel[data-status="flat"] .meter-needle, .tuner-panel[data-status="sharp"] .meter-needle { background: var(--red); }
.hold { height: 4px; background: var(--well); margin-bottom: var(--u); }
.hold-bar { height: 100%; width: 0; background: var(--green); }
.strings { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: var(--u); }
.strings span { text-align: center; padding: 6px 0; border: 1px solid var(--rule); color: var(--dim); font-weight: 700; }
.strings span.current { border-color: var(--orange); color: var(--orange); }
.strings span.done { border-color: var(--green); color: var(--on-green); background: var(--green); }

/* ---------- progression ---------- */
.beat-row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--u); }
.beats { display: flex; gap: 6px; }
.beats i { width: 12px; height: 12px; border: 1px solid var(--rule); }
.beats i.on { background: var(--blue); border-color: var(--blue); }
.beats i.accent { background: var(--fg); border-color: var(--fg); }
.beats i.count { background: var(--dim); border-color: var(--dim); }
.lag { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--dim); }
.lag.good { color: var(--green); }
.lag.bad { color: var(--red); }
.prog-panel { margin: var(--u) 0; }
.cards { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--u); }
.card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 64px; padding: 6px var(--u); text-transform: none; }
.card-name { font-weight: 700; font-size: 15px; }
.card-num { font-size: 12px; color: var(--orange); }
.card-num.outside { color: var(--red); }
.card.current { background: var(--blue); border-color: var(--blue); }
.card.current .card-num { color: var(--on-blue); }
.card.upcoming { border-color: var(--orange); }
.theory { font-size: 12px; line-height: 1.5; border-left: 2px solid var(--rule); padding-left: var(--u); }
.theory-key { color: var(--dim); letter-spacing: 0.1em; }
.theory-chord { color: var(--fg); }
.quiz { grid-template-columns: repeat(4, 1fr); margin-top: var(--u); }
/* Case is meaning in Roman numerals (ii vs II): never uppercase them. */
.quiz button, .card { text-transform: none; }

/* ---------- fretboard ---------- */
.board-wrap { border: 1px solid var(--rule); background: var(--bg); overflow-x: auto; }
.board-wrap[hidden] { display: none; }
.shape-picker { grid-template-columns: repeat(6, 1fr); margin-top: var(--u); }
.shape-picker button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; font-weight: 700; }
.shape-picker button small { font-size: 10px; font-weight: 400; color: var(--dim); }
.shape-picker button[aria-pressed="true"] { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); }
.shape-picker button[aria-pressed="true"] small { color: var(--on-yellow); }
.board .span { fill: var(--span); }
.legend { display: flex; justify-content: flex-end; gap: calc(var(--u) * 2); padding: 6px var(--u) 0; font-size: 10px; letter-spacing: 0.15em; color: var(--dim); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend svg { width: 12px; height: 12px; fill: none; stroke: var(--fg); stroke-width: 3; }
.band { cursor: pointer; }
.band rect { fill: var(--bg); stroke: var(--rule); }
.band text { fill: var(--dim); font: 700 11px var(--font-mono); letter-spacing: 0.1em; text-anchor: middle; pointer-events: none; }
.band:hover rect { stroke: var(--dim); }
.band.done rect { stroke: var(--green); }
.band.done text { fill: var(--green); }
.band.current rect { fill: var(--blue); stroke: var(--blue); }
.band.current text { fill: var(--on-blue); }
.band.current.done rect { stroke: var(--green); stroke-width: 3; }
.band-rule { stroke: var(--blue); stroke-width: 2; }
.boxes-picker button.done:not([aria-pressed="true"]) { box-shadow: var(--key-shadow), inset 0 -3px 0 var(--green); }
/* Wide screens pick boxes on the neck itself. */
@media (min-width: 700px) { body[data-mode="boxes"] .boxes-picker { display: none; } }
#fretboard { display: block; width: 100%; min-width: 320px; height: auto; }
#fretboard.wide { min-width: 640px; } /* full neck: scroll sideways on a phone rather than shrink */
.board .string { stroke: var(--string); }
.board .fret { stroke: var(--rule); stroke-width: 2; }
.board .nut { stroke: var(--fg); stroke-width: 5; }
.board .marker { fill: var(--well); }
.board .fret-num { fill: var(--dim); font: 11px var(--font-mono); text-anchor: middle; }

.dot .shape { fill: var(--bg); stroke: var(--dim); stroke-width: 2; }
.dot text { fill: var(--dim); font: 700 12px var(--font-mono); text-anchor: middle; pointer-events: none; }
.dot.root .shape { stroke: var(--fg); }
.dot.root text { fill: var(--fg); }
/* Correct: solid green. Box mode, correct on the way up only: a green ring. */
.dot.played .shape { fill: var(--green); stroke: var(--green); }
.dot.played text { fill: var(--on-green); }
.dot.played.half .shape { fill: var(--bg); stroke-width: 3; }
.dot.played.half text { fill: var(--green); }
/* The note to play: blue (sequence), blinking between a solid and a hollow blue
   dot. Both phases are opaque and bright, so it never reads as a dim red miss. */
.dots .dot.next .shape { fill: var(--blue); stroke: var(--blue); stroke-width: 4; animation: next-ring 0.8s steps(1) infinite; }
.dots .dot.next text { fill: var(--on-blue); animation: next-text 0.8s steps(1) infinite; }
@keyframes next-ring { 50% { fill: var(--bg); } }
/* Off phase: the letter takes the ring's colour so it stays readable on paper. */
@keyframes next-text { 50% { fill: var(--next-off-text); } }
.dot.ghost .shape { stroke: var(--ghost); stroke-dasharray: 3 3; }
.dot.ghost text { fill: var(--ghost-text); }
.dot.ghost.root .shape { stroke: var(--fg); }
.dot.outside { opacity: 0.2; }
.dot.triad .shape { fill: var(--yellow); stroke: var(--yellow); }
.dot.triad text { fill: var(--on-yellow); }
.dot.next-shape .shape { fill: none; stroke: var(--orange); stroke-dasharray: 3 3; stroke-width: 2; }
.dot.next-shape text { fill: var(--orange); }
.dot.next-shape.soon .shape { stroke-dasharray: none; stroke-width: 3; }
.dot.target .shape { fill: var(--green); stroke: var(--green); }
.dot.target text { fill: var(--on-green); }
/* This run's earlier wrong notes: a faint record, under everything else. */
.dot.missed .shape { fill: var(--bg); stroke: var(--missed); stroke-width: 2; }
.dot.missed text { fill: var(--missed-text); }
.dot .badge circle { fill: var(--red); stroke: var(--bg); stroke-width: 2; }
.dots .dot .badge text { fill: var(--on-red); font-size: 10px; animation: none; }
.dot.wrong .shape { fill: var(--red); stroke: var(--red); }
.dot.wrong text { fill: var(--on-red); }
@keyframes blink { 50% { opacity: 0.35; } }

/* ---------- strips and readouts ---------- */
.actions { grid-template-columns: 1fr 1fr; margin: var(--u) 0; }
.readout { font-size: 11px; color: var(--dim); letter-spacing: 0.15em; text-align: right; }
.readout b { color: var(--fg); }
.readout b.bad { color: var(--red); }

/* Laptop and up: use the width, keep the neck on screen without scrolling. */
@media (min-width: 900px) {
  body { max-width: 1440px; padding-left: calc(var(--u) * 4); padding-right: calc(var(--u) * 4); }
  .settings { align-items: flex-end; margin-bottom: var(--u); }
  .transport { flex-basis: 360px; margin-left: auto; }
  .primary { min-height: 40px; font-size: 14px; }
  .display { margin: var(--u) 0; padding: var(--u) calc(var(--u) * 2); }
  .big { font-size: 34px; }
}

/* Playing: everything but the prompt, the neck and STOP/PAUSE steps back.
   STOP brings the menu and settings back. */
body[data-phase="practice"] header,
body[data-phase="practice"] .settings .enc { display: none !important; }
body[data-phase="practice"] .settings { margin: 0 0 var(--u); }

/* Phone on its side: everything above the neck shrinks to two short rows so
   the whole neck fits on screen without scrolling. */
@media (orientation: landscape) and (max-height: 500px) {
  body { padding: calc(env(safe-area-inset-top) + 4px) max(var(--u), env(safe-area-inset-right)) calc(var(--u) + env(safe-area-inset-bottom)) max(var(--u), env(safe-area-inset-left)); max-width: none; }
  .logo { font-size: 14px; }
  header { height: 28px; }
  .settings { margin: 2px 0 0; align-items: center; row-gap: 4px; }
  .transport { margin-left: auto; }
  .settings .enc { flex-direction: row; align-items: center; gap: 4px; min-width: 0; }
  .settings select { min-height: 28px; padding: 2px 4px; font-size: 12px; }
  .boxes-picker { grid-template-columns: repeat(5, 28px); align-self: center; }
  .boxes-picker button { min-height: 28px; }
  .transport { flex-basis: auto; grid-template-columns: repeat(2, 96px) !important; }
  .primary { min-height: 28px; font-size: 12px; padding: 0 var(--u); }
  .display { margin: 4px 0; padding: 4px var(--u); }
  .prompt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--u); }
  .big { font-size: 22px; }
  .sub { min-height: 0; }
  #next-box { min-height: 24px; padding: 0 var(--u); }
  .heard { display: flex; align-items: baseline; gap: var(--u); width: auto; }
  .heard .label { display: none; }
  .heard-note { font-size: 18px; }
  .heard .meter, .heard .level { width: 72px; }
  .banner { margin-top: 2px; padding: 2px var(--u); font-size: 11px; min-height: calc(1.4em + 6px); }
  .readout { margin-top: 2px; }
  /* Playing: STOP/PAUSE float in the prompt bar's corner; the neck gets the rest. */
  body[data-phase="practice"] { padding-top: 4px; }
  body[data-phase="practice"] .settings { position: absolute; top: 8px; right: max(16px, env(safe-area-inset-right)); margin: 0; z-index: 2; }
  body[data-phase="practice"] .transport { grid-template-columns: repeat(2, 72px) !important; }
  body[data-phase="practice"] .boxes-picker { display: none; }
  body[data-phase="practice"] .primary { font-size: 11px; padding: 0 4px; }
  body[data-phase="practice"] .display { margin-top: 0; padding-right: 168px; }
}

@media (max-width: 420px) {
  .big { font-size: 36px; }
  .heard { width: 88px; }
  .enc { min-width: 64px; }
}

/* ---------- debug panel (DBG) ---------- */
.header-right { display: flex; align-items: center; gap: calc(var(--u) * 1.5); }
.dbg-toggle { min-height: 24px; padding: 2px 6px; font-size: 10px; color: var(--dim); box-shadow: none; }
.dbg-toggle[hidden] { display: none; }
.dbg-toggle[aria-pressed="true"] { color: var(--on-orange); background: var(--orange); border-color: var(--orange); }
.debug-panel { display: none; border: 1px solid var(--orange); border-radius: 4px; padding: var(--u); margin: var(--u) 0; font-size: 11px; }
body[data-debug="on"] .debug-panel { display: block; }
.dbg-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--u); }
.dbg-grid span { color: var(--orange); letter-spacing: 0.15em; }
.dbg-grid b { font-weight: 400; overflow-wrap: anywhere; }
.dbg-grid b.dim { color: var(--dim); }
.dbg-grid b.ok { color: var(--green); }
.dbg-actions { grid-template-columns: repeat(3, 1fr); margin-top: var(--u); }
.dbg-clips { list-style: none; margin: var(--u) 0 0; padding: 0; display: grid; gap: 4px; }
.dbg-clips li { display: flex; align-items: center; gap: var(--u); color: var(--dim); }
.dbg-clips li .key { min-width: 40px; }