/* 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 {
  --oled-black: #000000;
  --industrial-grey: #1a1a1a;
  --cold-grey: #2a2a2a;
  --rule: #333333;
  --key-edge: #444444;
  --dim: #8a8a8a;
  --white: #ffffff;
  --signal-red: #ff0000;
  --cobalt-blue: #0055ff;
  --neon-orange: #ff5500;
  --bright-yellow: #ffd700;
  --matrix-green: #00ff00;
  --font-mono: 'JetBrains Mono', 'Monaco', 'Courier New', monospace;
  --u: 8px;
  color-scheme: dark;
}

* { box-sizing: border-box; transition: none !important; }
html, body { margin: 0; }
body {
  background: var(--oled-black);
  color: var(--white);
  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(.strip, .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(--cold-grey); }
.led[data-state="ok"] { color: var(--matrix-green); }
.led[data-state="ok"] i { background: var(--matrix-green); box-shadow: 0 0 6px var(--matrix-green); }
.led[data-state="skipped"] i { background: var(--dim); }
.led[data-state="tuning"] { color: var(--neon-orange); }
.led[data-state="tuning"] i { background: var(--neon-orange); animation: blink 0.6s steps(1) infinite; }

/* ---------- calculator keys ---------- */
.keys { display: grid; gap: 4px; }
.modes { grid-template-columns: 1fr; margin-top: var(--u); }
.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(--oled-black); border-right: 1px solid var(--rule); overflow-y: auto;
}
.drawer[hidden], .scrim[hidden] { display: none; }
.scrim { position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, 0.6); }
button, .key {
  font: inherit;
  color: var(--white);
  background: var(--industrial-grey);
  border: 1px solid var(--key-edge);
  border-radius: 4px;
  box-shadow: 2px 2px 0 #000, inset 0 1px 0 #2f2f2f;
  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: 1px 1px 0 #000; }
.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(--bright-yellow); color: #000; border-color: var(--bright-yellow);
}
.modes button[aria-selected="true"] b { color: #000; }
.primary { width: 100%; min-height: 56px; font-weight: 700; font-size: 16px; background: var(--neon-orange); border-color: var(--neon-orange); color: #000; }
.primary.on { background: var(--industrial-grey); border-color: var(--key-edge); color: var(--white); }
.transport { grid-template-columns: 1fr; }
.transport:has(.pause:not([hidden])) { grid-template-columns: 1fr 1fr; }
.primary.pause { background: var(--industrial-grey); border-color: var(--key-edge); color: var(--white); }
.primary.pause[aria-pressed="true"] { background: var(--bright-yellow); border-color: var(--bright-yellow); color: #000; }
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(--white); 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(--neon-orange); background: var(--oled-black);
  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(--neon-orange); background: var(--oled-black);
  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(--signal-red); font-size: 12px; }

/* ---------- OLED display ---------- */
.display {
  position: relative;
  margin: calc(var(--u) * 2) 0 var(--u);
  background: var(--oled-black);
  border: 1px solid var(--rule);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  filter: contrast(1.1);
}
.display::after { /* scan lines */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 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(--cobalt-blue); font-weight: 700; filter: brightness(1.6); }
.big { font-size: 44px; font-weight: 700; line-height: 1.1; color: var(--neon-orange); letter-spacing: 0.02em; }
.sub { font-size: 12px; color: var(--white); 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: rgba(0, 255, 0, 0.18); }
.meter-needle { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; left: 50%; background: var(--white); opacity: 0; }
.meter.mini { height: 8px; }
.level { height: 4px; background: var(--cold-grey); }
.level-bar { height: 100%; width: 0; background: var(--signal-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(--matrix-green); color: var(--matrix-green); }
.tones span.next { border-color: var(--neon-orange); color: var(--neon-orange); }
.tones span.miss { border-color: var(--signal-red); color: var(--signal-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(--signal-red); border-color: var(--signal-red); }
.banner.good { color: var(--matrix-green); border-color: var(--matrix-green); }
.banner.info { color: var(--white); border-color: var(--rule); }
body.flash-bad .display { border-color: var(--signal-red); box-shadow: inset 0 0 0 1px var(--signal-red); }

/* tuner */
.tuner-panel .big { color: var(--white); }
.cents { font-size: 28px; font-weight: 700; align-self: center; }
.tuner-panel[data-status="flat"] .cents, .tuner-panel[data-status="sharp"] .cents { color: var(--signal-red); }
.tuner-panel[data-status="holding"] .cents { color: var(--matrix-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(--matrix-green); }
.tuner-panel[data-status="flat"] .meter-needle, .tuner-panel[data-status="sharp"] .meter-needle { background: var(--signal-red); }
.hold { height: 4px; background: var(--cold-grey); margin-bottom: var(--u); }
.hold-bar { height: 100%; width: 0; background: var(--matrix-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(--neon-orange); color: var(--neon-orange); }
.strings span.done { border-color: var(--matrix-green); color: #000; background: var(--matrix-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(--cobalt-blue); border-color: var(--cobalt-blue); }
.beats i.accent { background: var(--white); border-color: var(--white); }
.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(--matrix-green); }
.lag.bad { color: var(--signal-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(--neon-orange); }
.card-num.outside { color: var(--signal-red); }
.card.current { background: var(--cobalt-blue); border-color: var(--cobalt-blue); }
.card.current .card-num { color: var(--white); }
.card.upcoming { border-color: var(--neon-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(--white); }
.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(--oled-black); 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(--bright-yellow); color: #000; border-color: var(--bright-yellow); }
.shape-picker button[aria-pressed="true"] small { color: #000; }
.board .span { fill: #1c1c1c; }
#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: #6a6a6a; }
.board .fret { stroke: var(--rule); stroke-width: 2; }
.board .nut { stroke: var(--white); stroke-width: 5; }
.board .marker { fill: var(--cold-grey); }
.board .fret-num { fill: var(--dim); font: 11px var(--font-mono); text-anchor: middle; }

.dot .shape { fill: var(--oled-black); 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(--white); }
.dot.root text { fill: var(--white); }
/* Correct: solid green. Box mode, correct on the way up only: a green ring. */
.dot.played .shape { fill: var(--matrix-green); stroke: var(--matrix-green); }
.dot.played text { fill: #000; }
.dot.played.half .shape { fill: var(--oled-black); stroke-width: 3; }
.dot.played.half text { fill: var(--matrix-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(--cobalt-blue); stroke: var(--cobalt-blue); stroke-width: 4; animation: next-ring 0.8s steps(1) infinite; }
.dots .dot.next text { fill: var(--white); }
@keyframes next-ring { 50% { fill: var(--oled-black); } }
.dot.ghost .shape { stroke: #555; stroke-dasharray: 3 3; }
.dot.ghost text { fill: #777; }
.dot.ghost.root .shape { stroke: var(--white); }
.dot.outside { opacity: 0.2; }
.dot.triad .shape { fill: var(--bright-yellow); stroke: var(--bright-yellow); }
.dot.triad text { fill: #000; }
.dot.next-shape .shape { fill: none; stroke: var(--neon-orange); stroke-dasharray: 3 3; stroke-width: 2; }
.dot.next-shape text { fill: var(--neon-orange); }
.dot.next-shape.soon .shape { stroke-dasharray: none; stroke-width: 3; }
.dot.target .shape { fill: var(--matrix-green); stroke: var(--matrix-green); }
.dot.target text { fill: #000; }
/* This run's earlier wrong notes: a faint record, under everything else. */
.dot.missed .shape { fill: var(--oled-black); stroke: #8a2020; stroke-width: 2; }
.dot.missed text { fill: #d04848; }
.dot .badge circle { fill: var(--signal-red); stroke: var(--oled-black); stroke-width: 2; }
.dots .dot .badge text { fill: #fff; font-size: 10px; animation: none; }
.dot.wrong .shape { fill: var(--signal-red); stroke: var(--signal-red); }
.dot.wrong text { fill: #fff; }
@keyframes blink { 50% { opacity: 0.35; } }

/* ---------- strips and readouts ---------- */
.strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: var(--u) 0; }
.strip button { min-height: 32px; padding: 6px 0; font-size: 11px; color: var(--dim); background: var(--oled-black); border: 1px solid var(--rule); border-radius: 0; box-shadow: none; letter-spacing: 0.1em; }
.strip button:disabled { cursor: default; }
.strip button.done { border-color: var(--matrix-green); color: var(--matrix-green); }
.strip button.current { border-color: var(--cobalt-blue); color: var(--white); background: var(--cobalt-blue); }
.strip button.done.current { box-shadow: inset 0 -3px 0 var(--matrix-green); }
.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(--white); }
.readout b.bad { color: var(--signal-red); }
.tip { color: #555; font-size: 10px; letter-spacing: 0.15em; margin-top: calc(var(--u) * 3); }

@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: #000; background: var(--neon-orange); border-color: var(--neon-orange); }
.debug-panel { display: none; border: 1px solid var(--neon-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(--neon-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(--matrix-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; }