/* ─── Stem Splitter · studio console ──────────────────────────────── */

:root {
  --bg: #16130f;
  --bg-raise: #1f1b15;
  --panel: #241f18;
  --panel-edge: #352e23;
  --ink: #f2ece0;
  --ink-dim: #9b9182;
  --ink-faint: #6b6356;
  --hot: #ffb648;            /* master accent — amber */
  --hot-soft: rgba(255, 182, 72, 0.14);
  --danger: #ff6b5e;
  --ok: #5ee0a0;

  --c-vocals: #ffb648;
  --c-instrumental: #6aa6ff;
  --c-drums: #ff6b5e;
  --c-bass: #5ee0a0;
  --c-other: #6aa6ff;
  --c-guitar: #d98cff;
  --c-piano: #6ee7e0;

  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Schibsted Grotesk", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background:
    radial-gradient(900px 420px at 70% -10%, rgba(255, 182, 72, 0.07), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(106, 166, 255, 0.05), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
  min-height: 100vh;
}

/* film grain over everything */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.05;
  background-image: 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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main {
  max-width: 780px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 5rem;
}

.mono { font-family: var(--font-mono); }

/* ─── masthead ────────────────────────────────────────────────────── */

.masthead { margin-bottom: 3rem; }

.lab-brand {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 1.15rem;
  transition: opacity 0.15s;
  animation: rise 0.6s ease both;
}

.lab-brand:hover { opacity: 0.82; }
.lab-brand:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
.lab-logo { display: block; width: auto; height: 26px; }

.kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--hot);
  margin: 0 0 0.5rem;
  animation: rise 0.6s ease both;
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 5.2rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0;
  animation: rise 0.6s 0.08s ease both;
}

h1 span {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink-dim);
}

.tagline {
  color: var(--ink-dim);
  font-size: 1.05rem;
  margin: 1rem 0 0;
  max-width: 30ch;
  animation: rise 0.6s 0.16s ease both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ─── upload deck ─────────────────────────────────────────────────── */

.deck {
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  padding: 1.1rem 1.1rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  animation: rise 0.6s 0.24s ease both;
}
.deck:hover, .deck:focus-visible, .deck.dragover {
  border-color: var(--hot);
  outline: none;
  transform: translateY(-2px);
}

.deck-slot {
  border: 1.5px dashed var(--panel-edge);
  border-radius: 9px;
  text-align: center;
  padding: 2.2rem 1rem 2rem;
  transition: border-color 0.2s, background 0.2s;
}
.deck:hover .deck-slot, .deck.dragover .deck-slot {
  border-color: var(--hot);
  background: var(--hot-soft);
}

.deck-arrow {
  display: inline-block;
  color: var(--hot);
  font-size: 0.8rem;
  animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

.deck-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.18em;
  margin: 0.4rem 0 0.15rem;
}
.deck-sub { color: var(--ink-dim); font-size: 0.9rem; margin: 0; }

.deck-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-align: center;
  margin: 0.8rem 0 0;
}

.yt-disclosure { margin-top: 0.9rem; }
/* Native <details> so the caret, keyboard toggle, and expanded state come for
   free — an ARIA-wired button would only re-implement all three. */
.yt-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  padding: 0.3rem 0;
  list-style: none;
  cursor: pointer;
  color: var(--ink-dim);
  font-size: 0.72rem;
}
.yt-summary::-webkit-details-marker { display: none; }
.yt-summary::before {
  content: "▸";
  color: var(--hot);
  font-size: 0.65rem;
  transition: transform 0.18s;
}
.yt-disclosure[open] .yt-summary::before { transform: rotate(90deg); }
.yt-summary:hover { color: var(--ink); }
.yt-summary:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; border-radius: 3px; }

.yt-form { display: flex; gap: 0.5rem; margin-top: 0.55rem; }

#yt-url {
  flex: 1;
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.55rem 0.7rem;
}
#yt-url::placeholder { color: var(--ink-faint); }
#yt-url:focus { outline: none; border-color: var(--hot); }

.yt-go {
  background: var(--hot-soft);
  border: 1px solid rgba(255, 182, 72, 0.4);
  border-radius: 6px;
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding: 0 0.9rem;
  cursor: pointer;
}
.yt-go:hover { background: var(--hot); color: var(--bg); }

/* ─── split picker ────────────────────────────────────────────────── */
/* Each choice previews the console you'll get: one segment per part, in the
   colour that part is given in the mixer. Names stay off the buttons and sit
   in the legend for the selected choice only. */

.split-picker { margin-top: 1.1rem; }

/* Cased in CSS, not in the markup, so screen readers get "split into" rather
   than an all-caps string some of them spell out. */
.split-picker-label {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 0.5rem;
}

/* ─── crate: internet archive browser ─────────────────────────────── */

.crate {
  margin-top: 0.9rem;
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.crate-toggle {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  background: none;
  border: 0;
  padding: 0.8rem 1rem;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-align: left;
  cursor: pointer;
}
.crate-toggle:hover { background: var(--bg-raise); }
.crate-toggle-caret { color: var(--hot); transition: transform 0.15s ease; }
.crate-toggle.open .crate-toggle-caret { transform: rotate(90deg); }
.crate-toggle-sub {
  color: var(--ink-faint);
  font-size: 0.68rem;
  letter-spacing: 0;
  margin-left: auto;
}

.crate-body { padding: 0 1rem 1rem; border-top: 1px solid var(--panel-edge); }

.crate-form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.9rem 0; }
#crate-query {
  flex: 1 1 220px;
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.55rem 0.7rem;
}
#crate-query::placeholder { color: var(--ink-faint); }
#crate-query:focus, #crate-scope:focus { outline: none; border-color: var(--hot); }
#crate-scope {
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.55rem 0.5rem;
  cursor: pointer;
}
.crate-form[aria-busy='true'] { opacity: 0.6; pointer-events: none; }

.crate-status { color: var(--ink-faint); font-size: 0.68rem; letter-spacing: 0.06em; margin: 0 0 0.6rem; }
.crate-status.error { color: var(--danger); }

/* minmax(0, 1fr): an implicit `auto` track sizes to the row's max-content, and
   nowrap titles would blow the rows out past the panel edge (badges clipped). */
.crate-results { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }

.crate-item { border: 1px solid var(--panel-edge); border-radius: 6px; background: var(--bg-raise); }

.crate-item-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  background: none;
  border: 0;
  padding: 0.6rem 0.75rem;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.crate-item-head:hover { background: var(--panel); }
.crate-item-head.open { border-bottom: 1px solid var(--panel-edge); }
.crate-item-title {
  flex: 1 1 auto;
  min-width: 0; /* let the ellipsis engage instead of forcing the row wider */
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Truncate rather than wrap: a long creator name must never push the licence
   badge past the panel edge or grow the row to two lines. */
.crate-item-meta {
  color: var(--ink-dim);
  font-size: 0.68rem;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crate-license {
  flex: 0 0 auto;
  border: 1px solid rgba(94, 224, 160, 0.35);
  border-radius: 4px;
  color: var(--ok);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.35rem;
  white-space: nowrap;
}

.crate-tracks { padding: 0.5rem 0.75rem 0.7rem; }
.crate-loading { color: var(--ink-faint); font-size: 0.68rem; margin: 0.3rem 0; }
.crate-loading.error { color: var(--danger); }

.crate-track-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
.crate-track { display: flex; align-items: center; gap: 0.7rem; padding: 0.25rem 0; }
.crate-track-name {
  flex: 1;
  font-size: 0.78rem;
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crate-track-len { color: var(--ink-faint); font-size: 0.68rem; }

.crate-split {
  background: var(--hot-soft);
  border: 1px solid rgba(255, 182, 72, 0.4);
  border-radius: 5px;
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.55rem;
  cursor: pointer;
}
.crate-split:hover:not(:disabled) { background: var(--hot); color: var(--bg); }
.crate-split:disabled { opacity: 0.4; cursor: not-allowed; }

.crate-credit { color: var(--ink-faint); font-size: 0.63rem; margin: 0.6rem 0 0; }
.crate-credit a { color: var(--ink-dim); }

.crate-pager { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 0.8rem; }
.crate-page-btn {
  background: none;
  border: 1px solid var(--panel-edge);
  border-radius: 5px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.crate-page-btn:hover:not(:disabled) { border-color: var(--hot); color: var(--hot); }
.crate-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
#crate-page-label { color: var(--ink-faint); font-size: 0.65rem; }

.stem-choice { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.stem-choice label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  padding: 0.45rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-dim);
  margin: 0 0 0.5rem;
}

.split-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }

.split-option {
  position: relative;
  display: grid;
  gap: 0.55rem;
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  padding: 0.65rem 0.7rem 0.6rem;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.18s, background 0.18s, transform 0.15s;
}
.split-option:hover { border-color: rgba(255, 182, 72, 0.35); transform: translateY(-1px); }

/* The radio is transparent but full-size rather than display:none: it keeps
   focus and arrow-key navigation, and it is the thing you actually click, so
   the whole card is one hit target. */
.split-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  opacity: 0;
  cursor: pointer;
}

.split-bar { display: flex; gap: 2px; height: 11px; }
/* One hue only. The 2px gaps do the counting, so the segments never need a
   second colour to be told apart — channel colours belong to the mixer. */
.split-seg {
  flex: 1;
  border-radius: 2px;
  background: var(--ink-faint);
  opacity: 0.5;
  transition: opacity 0.18s, background 0.18s;
}
.split-option:hover .split-seg { opacity: 0.8; }
.split-option-auto .split-seg:nth-child(even) { opacity: 0.25; }

.split-line { display: flex; align-items: center; gap: 0.4rem; }

/* Selection is a shape change, not only a colour change. */
.split-mark {
  flex: none;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--ink-faint);
  border-radius: 50%;
}

.split-count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink);
}
.split-word {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.split-option:has(input:checked) {
  border-color: rgba(255, 182, 72, 0.55);
  background: var(--hot-soft);
}
.split-option:has(input:checked) .split-seg { background: var(--hot); opacity: 1; }
.split-option:has(input:checked) .split-mark {
  border-color: var(--hot);
  background: radial-gradient(circle, var(--hot) 45%, transparent 47%);
}
.split-option:has(input:checked) .split-count,
.split-option:has(input:checked) .split-word { color: var(--hot); }
.split-option:has(input:focus-visible) { outline: 2px solid var(--hot); outline-offset: 2px; }

.split-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0;
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  font-size: 0.66rem;
  color: var(--ink-dim);
}
.split-legend li + li::before {
  content: "·";
  color: var(--ink-faint);
  margin: 0 0.5rem;
}

.stem-choice-status {
  grid-column: 1 / -1;
  color: var(--ink-dim);
  font-size: 0.7rem;
}

@media (prefers-reduced-motion: reduce) {
  .split-option, .split-seg, .yt-summary::before { transition: none; }
  .split-option:hover { transform: none; }
}

/* Forced colours flatten the amber fill and the mark's gradient, so selection
   needs a border-drawn cue there. */
@media (forced-colors: active) {
  .lab-brand, .lab-logo { forced-color-adjust: none; }
  .split-option:has(input:checked) { outline: 2px solid Highlight; }
}

.channel.unavailable {
  opacity: 0.72;
}
.channel.unavailable .meter i {
  background: var(--ink-faint);
}
.channel.unavailable .dl[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

/* ─── upload progress ─────────────────────────────────────────────── */

.upload-status { margin-top: 1rem; }
.progress-track {
  height: 5px;
  background: var(--panel);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--hot);
  transition: width 0.2s;
}
#upload-message {
  font-size: 0.78rem;
  color: var(--ink-dim);
  margin: 0.55rem 0 0;
}
#upload-message.error { color: var(--danger); }

/* ─── session rack ────────────────────────────────────────────────── */

.rack { margin-top: 3.5rem; }

.rack-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.1rem;
}
.rack-title::before, .rack-title::after {
  content: "";
  height: 1px;
  background: var(--panel-edge);
  flex: 1;
}

.empty { color: var(--ink-faint); font-size: 0.78rem; text-align: center; padding: 1.5rem 0; }

.job-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ─── console card ────────────────────────────────────────────────── */

.console {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-raise) 100%);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  padding: 1.1rem 1.2rem 1.2rem;
  animation: rise 0.45s ease both;
}

.console-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.console-actions-wrap,
.console-actions {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.console-actions-wrap { flex-shrink: 0; }
.actions-toggle,
.collapse-label { display: none; }
.console-title {
  font-weight: 700;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.head-btn {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--panel-edge);
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
  flex-shrink: 0;
}
.head-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-dim); }
.head-btn:disabled { opacity: 0.6; cursor: default; }

/* Collapsed session: only the head row stays visible; playback is paused. */
.console.collapsed > :not(.console-head) { display: none; }

.badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.badge.processing { color: var(--hot); border-color: rgba(255,182,72,0.4); }
.badge.processing::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hot);
  animation: blink 1.1s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
.badge.ready { color: var(--ok); border-color: rgba(94,224,160,0.4); }
.badge.failed { color: var(--danger); border-color: rgba(255,107,94,0.4); }

.job-error { color: var(--danger); font-size: 0.82rem; margin: 0.6rem 0 0; }
.job-note { color: var(--ink-dim); font-size: 0.82rem; margin: 0.6rem 0 0; }

/* ─── transport ───────────────────────────────────────────────────── */

.transport {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1rem 0 1.05rem;
}

.play-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--hot);
  background: var(--hot-soft);
  color: var(--hot);
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: transform 0.12s, background 0.2s, box-shadow 0.2s;
}
.play-btn:hover { transform: scale(1.06); box-shadow: 0 0 22px rgba(255,182,72,0.35); }
.play-btn:active { transform: scale(0.97); }
.play-btn.playing { background: var(--hot); color: var(--bg); }

.timecode {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  min-width: 7.5ch;
  text-align: center;
}

.seek {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--hot) var(--fill, 0%), var(--panel-edge) var(--fill, 0%));
  cursor: pointer;
}
.seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 2.5px solid var(--hot);
  transition: transform 0.12s;
}
.seek::-webkit-slider-thumb:hover { transform: scale(1.25); }
.seek::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ink);
  border: 2.5px solid var(--hot);
}

/* ─── channel strips ──────────────────────────────────────────────── */

.channels {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--panel-edge);
}

.channel {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.1rem;
  border-bottom: 1px solid var(--panel-edge);
  transition: opacity 0.25s;
}
.channel.muted { opacity: 0.45; }

.ch-id {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 6.2rem;
}
.ch-dot {
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--ch, var(--ink-dim));
  box-shadow: 0 0 8px var(--ch, transparent);
  flex-shrink: 0;
}
.ch-name {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* eq meter — 5 bars. Decorative by default; .live means an analyser is driving
   the heights and the canned loop must get out of the way. */
.meter {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  flex: 1;
}
.meter i {
  width: 4px;
  border-radius: 1px;
  background: var(--ch, var(--ink-dim));
  height: 18%;
  opacity: 0.85;
  animation: eq 0.9s ease-in-out infinite;
  animation-play-state: paused;
}
.console.playing .channel:not(.muted) .meter i { animation-play-state: running; }
.meter.live i { animation: none; transition: height 0.06s linear; }
.meter i:nth-child(1) { animation-delay: 0s;     animation-duration: 0.82s; }
.meter i:nth-child(2) { animation-delay: -0.3s;  animation-duration: 1.04s; }
.meter i:nth-child(3) { animation-delay: -0.6s;  animation-duration: 0.72s; }
.meter i:nth-child(4) { animation-delay: -0.15s; animation-duration: 0.94s; }
.meter i:nth-child(5) { animation-delay: -0.45s; animation-duration: 1.12s; }
@keyframes eq {
  0%, 100% { height: 18%; }
  50% { height: 95%; }
}

.mute-btn {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 0.42rem 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--panel-edge);
  background: var(--bg);
  color: var(--ink-dim);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.mute-btn:hover { border-color: var(--ink-dim); color: var(--ink); }
.mute-btn[aria-pressed="true"] {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--bg);
  box-shadow: 0 0 14px rgba(255,107,94,0.45);
}

.dl {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-decoration: none;
  flex-shrink: 0;
  padding: 0.3rem 0.4rem;
  border-radius: 5px;
  transition: color 0.15s, background 0.15s;
}
.dl:hover { color: var(--hot); background: var(--hot-soft); }

/* ─── footer ──────────────────────────────────────────────────────── */

footer {
  margin-top: 4rem;
  border-top: 1px solid var(--panel-edge);
  padding-top: 1.2rem;
  color: var(--ink-faint);
  font-size: 0.8rem;
}

.class-code-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--panel-edge);
  border-radius: 4px;
  box-shadow: 0 24px 80px rgb(0 0 0 / 70%);
}

.class-code-dialog::backdrop {
  background: rgb(12 12 10 / 78%);
  backdrop-filter: blur(4px);
}

.class-code-form {
  display: grid;
  gap: 16px;
  padding: 28px;
}

.class-code-form h2,
.class-code-form p {
  margin: 0;
}

.class-code-form h2 {
  font-family: var(--font-display);
  letter-spacing: .08em;
}

.class-code-form label {
  font: 600 .72rem var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.class-code-form input {
  width: 100%;
  padding: 12px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 3px;
  font: 1rem var(--font-mono);
}

.class-code-form input:focus {
  border-color: var(--hot);
  outline: 2px solid rgb(239 169 58 / 24%);
  outline-offset: 2px;
}

.class-code-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.dialog-cancel {
  padding: 10px 14px;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--panel-edge);
  border-radius: 3px;
  font: 600 .72rem var(--font-mono);
  letter-spacing: .08em;
}
.footer-sig { font-size: 0.62rem; letter-spacing: 0.14em; margin-top: 0.6rem; }
.footer-teacher-link {
  display: inline-block;
  margin-top: 0.7rem;
  color: var(--ink-faint);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-decoration-color: var(--panel-edge);
  text-underline-offset: 0.2em;
}
.footer-teacher-link:hover { color: var(--ink-dim); }
.footer-teacher-link:focus-visible {
  color: var(--hot);
  outline: 2px solid var(--hot);
  outline-offset: 4px;
}

/* ─── small screens ───────────────────────────────────────────────── */

@media (max-width: 540px) {
  .lab-brand { margin-bottom: 1rem; }
  .lab-logo { height: 22px; }
  .console.actions-open { position: relative; z-index: 2; }
  .console-head {
    align-items: flex-start;
    gap: 0.65rem;
  }
  .console-title {
    line-height: 1.3;
    overflow: visible;
    overflow-wrap: anywhere;
    padding-top: 0.35rem;
    text-overflow: clip;
    white-space: normal;
  }
  .console-actions-wrap { position: relative; }
  .actions-toggle {
    align-items: center;
    display: inline-flex;
    font-size: 0.9rem;
    justify-content: center;
    line-height: 1;
    min-height: 2.25rem;
    min-width: 2.25rem;
    padding: 0.3rem 0.65rem;
  }
  .console-actions {
    align-items: stretch;
    background: var(--bg-raise);
    border: 1px solid var(--panel-edge);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    display: none;
    flex-direction: column;
    gap: 0.4rem;
    max-width: calc(100vw - 3rem);
    min-width: 10.5rem;
    padding: 0.65rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 3;
  }
  .console.actions-open .console-actions { display: flex; }
  .console-actions .badge,
  .console-actions .head-btn {
    box-sizing: border-box;
    justify-content: center;
    width: 100%;
  }
  .console-actions .collapse-label { display: inline; }
  .console-actions .collapse-glyph { display: none; }
  .split-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-option { padding: 0.55rem 0.5rem 0.5rem; }
  .split-line { gap: 0.3rem; }
  .split-count { font-size: 0.95rem; }
  .split-word { font-size: 0.56rem; letter-spacing: 0.1em; }
  .ch-id { min-width: 5rem; }
  .ch-name { font-size: 0.64rem; }
  .timecode { display: none; }
  .meter { max-width: 70px; }
}

.ch-name { cursor: text; }
.ch-name:hover { color: var(--hot); }

.ch-name-input {
  background: var(--bg-raise);
  border: 1px solid var(--hot);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.15rem 0.4rem;
  width: 9rem;
  max-width: 40vw;
}
.ch-name-input:focus { outline: none; }

.seek-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.seek-wrap .seek { width: 100%; flex: 1; }

.markers { position: absolute; inset: 0; pointer-events: none; }
.marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: var(--hot);
  box-shadow: 0 0 6px rgba(255, 182, 72, 0.5);
  cursor: pointer;
  pointer-events: auto;
}
.marker:hover { background: var(--ink); }

.notes {
  margin-top: 0.9rem;
  border-top: 1px dashed var(--panel-edge);
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.note-row {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
}
.note-row.flash { animation: note-flash 1.4s ease-out; }
@keyframes note-flash {
  0% { background: var(--hot-soft); }
  100% { background: transparent; }
}
.note-time {
  background: none;
  border: none;
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.note-time:hover { text-decoration: underline; }
.note-text {
  flex: 1;
  font-size: 0.82rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.note-del {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0 0.1rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.note-row:hover .note-del, .note-del:focus-visible { opacity: 1; }

.note-btn {
  background: none;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  white-space: nowrap;
}
.note-btn:hover { color: var(--hot); border-color: rgba(255, 182, 72, 0.5); }

.note-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.note-form-time { color: var(--hot); font-size: 0.75rem; }
.note-form input {
  flex: 1;
  background: var(--bg-raise);
  border: 1px solid var(--hot);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
}
.note-form input:focus { outline: none; }
.note-form button {
  background: var(--hot-soft);
  border: 1px solid rgba(255, 182, 72, 0.4);
  border-radius: 6px;
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}

/* ─── listening guy ───────────────────────────────────────────────── */

.coach {
  margin-top: 0.9rem;
  border-top: 1px dashed var(--panel-edge);
  padding-top: 0.55rem;
}

.coach-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 0.35rem 0.1rem;
}
.coach-toggle:hover { color: var(--hot); }
.coach-caret { margin-left: auto; transition: transform 0.2s; }
.coach-toggle[aria-expanded="true"] .coach-caret { transform: rotate(180deg); }

.coach-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
  transition: background 0.2s;
}
.coach-led.ready { background: var(--ok); box-shadow: 0 0 8px rgba(94, 224, 160, 0.5); }
.coach-led.busy {
  background: var(--hot);
  box-shadow: 0 0 8px rgba(255, 182, 72, 0.5);
  animation: blink 1.1s ease-in-out infinite;
}

.coach-body {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.coach-cue { text-align: center; padding: 0.6rem 0 0.3rem; }
.coach-cue-btn {
  background: var(--hot-soft);
  border: 1px solid rgba(255, 182, 72, 0.4);
  border-radius: 6px;
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}
.coach-cue-btn:hover { background: var(--hot); color: var(--bg); }
.coach-cue-btn:disabled { opacity: 0.5; cursor: default; }
.coach-hint { color: var(--ink-faint); font-size: 0.72rem; margin: 0.5rem 0 0; }
.coach-hint.error { color: var(--danger); }

.coach-guide-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 22rem;
  overflow-y: auto;
  font-size: 0.82rem;
  line-height: 1.6;
  border-left: 2px solid var(--hot);
  padding: 0.1rem 0 0.1rem 0.75rem;
}

/* live-stream caret while the Listening Guide is still talking */
.coach-guide-text.streaming::after,
.coach-row.streaming::after {
  content: '▮';
  color: var(--hot);
  animation: blink 1.1s ease-in-out infinite;
}

/* collapsed previous-session archive */
.coach-archive-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-faint);
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  padding: 0.2rem 0;
}
.coach-archive-toggle:hover { color: var(--hot); }
.coach-archive-toggle .coach-caret {
  margin-left: 0;
  transform: rotate(-90deg);
}
.coach-archive-toggle[aria-expanded="true"] .coach-caret { transform: rotate(0); }
.coach-archive-log {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 14rem;
  overflow-y: auto;
  opacity: 0.75;
  margin-top: 0.3rem;
}

.coach-log {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 18rem;
  overflow-y: auto;
}
.coach-log:empty { display: none; }
.coach-row {
  font-size: 0.82rem;
  line-height: 1.55;
  padding: 0.15rem 0 0.15rem 0.75rem;
  border-left: 2px solid var(--ink-dim);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.coach-row.you { color: var(--ink-dim); }
.coach-row.coach { border-left-color: var(--hot); }
.coach-row.error { border-left-color: var(--danger); color: var(--danger); }
.coach-row.typing {
  border-left-color: var(--hot);
  color: var(--ink-faint);
  animation: blink 1.1s ease-in-out infinite;
}
.coach-row.action { border-left-color: transparent; }

.coach-chip {
  display: inline-block;
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  padding: 0.18rem 0.55rem;
}

.coach-tc {
  background: none;
  border: none;
  padding: 0;
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  cursor: pointer;
}
.coach-tc:hover { text-decoration: underline; }
.coach-trim { color: var(--ink-faint); font-size: 0.72rem; }

/* channel strip glow when the Listening Guide touches it — uses the strip's own color */
@keyframes coach-flash {
  0% { box-shadow: inset 0 0 0 1px var(--ch), 0 0 18px var(--ch); }
  100% { box-shadow: none; }
}
.channel.coach-flash { animation: coach-flash 1.2s ease-out; }

.coach-form { display: flex; gap: 0.5rem; }
.coach-form input {
  flex: 1;
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: 0.45rem 0.6rem;
}
.coach-form input:focus { outline: none; border-color: var(--hot); }
.coach-form button {
  background: var(--hot-soft);
  border: 1px solid rgba(255, 182, 72, 0.4);
  border-radius: 6px;
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}
.coach-form button:hover { background: var(--hot); color: var(--bg); }

/* ─── console sub-line: what made this, and how to pass it on ─────── */

.console-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.3rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

.share-btn {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  padding: 0.1rem 0;
  cursor: pointer;
  flex-shrink: 0;
}
.share-btn:hover { color: var(--hot); border-bottom-color: rgba(255, 182, 72, 0.5); }
.share-btn.copied { color: var(--ok); border-bottom-color: transparent; }

.share-fallback {
  background: var(--bg);
  border: 1px solid var(--hot);
  border-radius: 5px;
  color: var(--ink);
  font-size: 0.62rem;
  padding: 0.2rem 0.4rem;
  width: 16rem;
  max-width: 55vw;
}
.share-fallback:focus { outline: none; }

/* ─── transport aux row: speed and loop ───────────────────────────── */

.transport-aux {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: -0.35rem 0 0.9rem;
  min-height: 1.5rem;
}

.aux-label {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}

.rate { display: flex; align-items: center; gap: 0.35rem; }

/* Same segmented idiom as the split picker: a row of quiet cells, one lit. */
.rate-opt {
  background: var(--bg);
  border: 1px solid var(--panel-edge);
  border-radius: 5px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.42rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.rate-opt:hover { color: var(--ink); border-color: var(--ink-faint); }
.rate-opt[aria-pressed="true"] {
  background: var(--hot-soft);
  border-color: rgba(255, 182, 72, 0.5);
  color: var(--hot);
}

.loop-status { display: flex; align-items: center; gap: 0.4rem; color: var(--hot); }
.loop-range { font-size: 0.62rem; letter-spacing: 0.08em; }
.loop-clear {
  background: none;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 0.68rem;
  padding: 0 0.15rem;
}
.loop-clear:hover { color: var(--danger); }

/* The looped span sits behind the seek bar, so the region reads as part of the
   timeline rather than another control stacked on it. */
.loop-region {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  border-radius: 3px;
  background: rgba(255, 182, 72, 0.16);
  border-left: 1px solid rgba(255, 182, 72, 0.55);
  border-right: 1px solid rgba(255, 182, 72, 0.55);
  pointer-events: none;
}

/* ─── channel verbs: solo staging ─────────────────────────────────── */

.solo-btn {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 0.42rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--panel-edge);
  background: var(--bg);
  color: var(--ink-dim);
  cursor: pointer;
  flex-shrink: 0;
  min-width: 5.1rem;
  transition: all 0.15s;
}
.solo-btn:hover:not(:disabled) { border-color: var(--ink-dim); color: var(--ink); }
.solo-btn:disabled { opacity: 0.4; cursor: default; }
/* The lit strip borrows its own channel colour — the console already speaks in
   per-part hues, so focus doesn't need a new one. */
.solo-btn[aria-pressed="true"] {
  background: var(--ch, var(--hot));
  border-color: var(--ch, var(--hot));
  color: var(--bg);
  box-shadow: 0 0 14px var(--ch, var(--hot));
}

/* Behind, not gone: the ducked strips desaturate toward the panel while the
   focused one keeps full chroma. */
.channel.behind { opacity: 0.55; }
.channel.behind .ch-dot { box-shadow: none; }
.channel.focused .ch-name { color: var(--ch, var(--ink)); }

.note-loop {
  background: none;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0 0.15rem;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.note-row:hover .note-loop,
.note-loop:focus-visible,
.note-loop[aria-pressed="true"] { opacity: 1; }
.note-loop:hover { color: var(--hot); }
.note-loop[aria-pressed="true"] { color: var(--hot); }

/* ─── elapsed clock on a separating card ──────────────────────────── */

.elapsed {
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  margin-left: 0.15rem;
}

/* ─── keyboard ────────────────────────────────────────────────────── */

.console:focus { outline: none; }
.console:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }

/* The legend only earns its space once the console is the keyboard target. */
.console-keys {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin: 0.75rem 0 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.2s, opacity 0.2s;
}
.console:focus-within .console-keys { max-height: 3rem; opacity: 1; }

@media (max-width: 540px) {
  .solo-btn { min-width: 0; padding: 0.42rem 0.5rem; font-size: 0.6rem; }
  .mute-btn { padding: 0.42rem 0.5rem; font-size: 0.6rem; }
  .channel { gap: 0.5rem; }
  .meter { max-width: 44px; }
  .console-keys { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .meter.live i { transition: none; }
  .console-keys { transition: none; }
  .share-btn, .rate-opt, .solo-btn { transition: none; }
}
/* ─── instructor console (teacher.html) ───────────────────────────── */

.teacher-main { max-width: 780px; padding-top: 2.25rem; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.teacher-main .masthead { margin-bottom: 1.6rem; }
.teacher-main .masthead h1 { font-size: clamp(2.5rem, 7vw, 4rem); }
.teacher-main .tagline { font-size: 0.95rem; margin-top: 0.75rem; max-width: 38ch; }
.teacher-panel { margin-top: 0.8rem; }

.teacher-form { display: grid; gap: 0.8rem; }
.teacher-submit {
  align-items: center;
  display: inline-flex;
  font-weight: 600;
  justify-content: center;
  line-height: 1.2;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  width: 100%;
}
.teacher-submit:focus-visible {
  outline: 2px solid var(--hot);
  outline-offset: 3px;
}
.teacher-field { display: grid; gap: 0.3rem; }
.teacher-field span { color: var(--ink-faint); font-size: 0.66rem; letter-spacing: 0.08em; }
.teacher-field input {
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.6rem 0.7rem;
}
.teacher-field select {
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  min-height: 2.75rem;
  padding: 0.6rem 0.7rem;
}
.teacher-field input:focus,
.teacher-field select:focus,
.teacher-textarea:focus { outline: none; border-color: var(--hot); }

.teacher-textarea {
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 0.7rem;
  resize: vertical;
  width: 100%;
}
.teacher-textarea::placeholder { color: var(--ink-faint); }

.teacher-help { color: var(--ink-dim); font-size: 0.82rem; line-height: 1.6; margin: 0 0 0.8rem; }
.teacher-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  color: var(--ink-faint);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
}
.teacher-actions { display: flex; gap: 0.6rem; align-items: center; }
.teacher-actions .yt-go { padding: 0.5rem 1rem; }

.teacher-prompt-section {
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  margin-top: 1rem;
  padding: 1rem;
}
.teacher-amendment-section {
  border-color: color-mix(in srgb, var(--hot) 48%, var(--panel-edge));
  margin-top: 0;
  padding: 1.15rem;
}
.teacher-section-head {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}
.teacher-section-head h2,
.teacher-section-head h3 {
  color: var(--ink);
  font-size: 1rem;
  margin: 0.15rem 0 0;
}
.teacher-eyebrow {
  color: var(--hot);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  margin: 0;
}
.teacher-version {
  color: var(--ink-faint);
  flex: none;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  padding-top: 0.2rem;
}
.teacher-help code {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.teacher-fixed-scroll {
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 7px 7px 0 0;
  height: 420px;
  overflow: auto;
  padding: 1rem;
  scroll-behavior: smooth;
}
.teacher-fixed-scroll:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.teacher-caret-control {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 0 0 7px 7px;
  color: var(--hot);
  cursor: pointer;
  display: flex;
  font-size: 0.66rem;
  gap: 0.55rem;
  justify-content: center;
  letter-spacing: 0.08em;
  padding: 0.6rem;
  width: 100%;
}
.teacher-caret-control:hover { background: var(--hot-soft); }
.teacher-up-caret { font-size: 1rem; transition: transform 0.2s; }
.teacher-caret-control[aria-expanded="true"] .teacher-up-caret { transform: rotate(180deg); }

.teacher-markdown {
  color: var(--ink-dim);
  font-size: 0.76rem;
  line-height: 1.62;
}
.teacher-markdown h4 {
  border-bottom: 1px solid var(--panel-edge);
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  margin: 1.35rem 0 0.55rem;
  padding-bottom: 0.25rem;
}
.teacher-markdown h4:first-child { margin-top: 0; }
.teacher-markdown p { margin: 0 0 0.75rem; }
.teacher-markdown ul,
.teacher-markdown ol { margin: 0 0 0.9rem; padding-left: 1.35rem; }
.teacher-markdown li { margin: 0.25rem 0; }

.teacher-edit-meta { flex-wrap: wrap; }
.teacher-edit-meta #amendment-meta { margin-left: auto; text-align: right; }

.teacher-error, .teacher-status { font-size: 0.7rem; margin: 0; color: var(--ok); }
.teacher-error { color: var(--danger); }
.teacher-status.error, .mono.error { color: var(--danger); }

.teacher-preview { margin-top: 1.4rem; border-top: 1px solid var(--panel-edge); padding-top: 0.8rem; }
.teacher-preview summary { color: var(--ink-dim); cursor: pointer; font-size: 0.68rem; letter-spacing: 0.06em; }
.teacher-effective-preview {
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  margin-top: 0.7rem;
  max-height: 520px;
  overflow: auto;
  padding: 1rem;
}
.teacher-pre {
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--ink-dim);
  font-size: 0.68rem;
  line-height: 1.55;
  margin-top: 0.7rem;
  max-height: 460px;
  overflow: auto;
  padding: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.teacher-main footer a { color: var(--ink-dim); text-decoration-color: var(--panel-edge); }
.teacher-main footer a:hover { color: var(--hot); }

.teacher-more-tools {
  margin-top: 1.7rem;
}
.teacher-more-tools > h2 {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}
.teacher-tool {
  border-top: 1px solid var(--panel-edge);
  margin: 0;
}
.teacher-tool:last-child { border-bottom: 1px solid var(--panel-edge); }
.teacher-tool > summary {
  align-items: center;
  color: var(--ink-dim);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
  min-height: 2.65rem;
  padding: 0.55rem 0;
}
.teacher-tool > summary::-webkit-details-marker { display: none; }
.teacher-tool > summary::after {
  color: var(--hot);
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1;
}
.teacher-tool[open] > summary::after { content: "−"; }
.teacher-tool > summary:hover { color: var(--ink); }
.teacher-tool > summary:focus-visible { outline: 1px solid var(--hot); outline-offset: -1px; }
.teacher-tool > summary strong { font-size: 0.7rem; font-weight: 500; }
.teacher-tool-body {
  border-top: 1px solid var(--panel-edge);
  padding: 0.8rem 0 1rem;
}
.teacher-tool .teacher-history,
.teacher-tool .teacher-analysis-review { margin-top: 0; }

.teacher-history { margin-top: 2rem; }
.teacher-history-list { display: grid; gap: 0.7rem; list-style: none; margin: 0; padding: 0; }
.teacher-history-item {
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  padding: 0.8rem;
}
.teacher-history-head { display: flex; gap: 1rem; justify-content: space-between; }
.teacher-history-head strong { color: var(--ink); font-size: 0.75rem; }
.teacher-history-head span,
.teacher-history-trace { color: var(--ink-faint); font-size: 0.62rem; }
.teacher-history-trace { margin: 0.4rem 0 0; overflow-wrap: anywhere; }
.teacher-history-details { margin-top: 0.65rem; }
.teacher-history-details summary { color: var(--hot); cursor: pointer; font-size: 0.64rem; }
.teacher-history-snapshot {
  border-top: 1px dashed var(--panel-edge);
  margin-top: 0.55rem;
  padding-top: 0.65rem;
}

.teacher-analysis-review { margin-top: 2rem; }
.teacher-analysis-form {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
}
.teacher-analysis-form .teacher-status { grid-column: 1 / -1; }
.teacher-analysis-form .crate-page-btn { min-height: 2.75rem; }
.teacher-analysis-card {
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  margin-top: 1rem;
  padding: 1rem;
}
.teacher-analysis-summary {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0.9rem 0 1rem;
}
.teacher-analysis-summary > div {
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  min-width: 0;
  padding: 0.7rem;
}
.teacher-analysis-summary dt {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.teacher-analysis-summary dd {
  color: var(--ink-dim);
  font-size: 0.72rem;
  line-height: 1.5;
  margin: 0.3rem 0 0;
  overflow-wrap: anywhere;
}
.teacher-detection-list {
  display: grid;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.teacher-detection-item {
  align-items: center;
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 0.7rem;
}
.teacher-detection-item strong { color: var(--ink); font-size: 0.78rem; }
.teacher-detection-state {
  border: 1px solid var(--ok);
  border-radius: 999px;
  color: var(--ok);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  justify-self: start;
  letter-spacing: 0.07em;
  padding: 0.2rem 0.4rem;
}
.teacher-detection-state.uncertain {
  border-color: var(--ink-faint);
  color: var(--ink-faint);
}
.teacher-detection-meta { color: var(--ink-faint); font-size: 0.62rem; }
.teacher-analysis-guard {
  border-top: 1px dashed var(--panel-edge);
  color: var(--hot);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  margin: 1rem 0 0;
  padding-top: 0.75rem;
}

.teacher-feedback-panel {
  border-top: 1px dashed var(--panel-edge);
  margin-top: 1.15rem;
  padding-top: 1rem;
}
.teacher-feedback-fieldset {
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  margin: 0;
  min-width: 0;
  padding: 0.75rem;
}
.teacher-feedback-fieldset legend {
  color: var(--ink-faint);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  padding: 0 0.35rem;
}
.teacher-feedback-detected { display: grid; gap: 0.65rem; }
.teacher-feedback-detected-row {
  align-items: center;
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.65rem;
}
.teacher-feedback-identity {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.teacher-feedback-identity strong { color: var(--ink); font-size: 0.76rem; }
.teacher-feedback-family { color: var(--ink-faint); font-size: 0.56rem; }
.teacher-feedback-kind {
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.35rem;
}
.teacher-feedback-kind.family-or-ensemble { border-color: var(--hot); color: var(--hot); }
.teacher-feedback-kind.production-texture { border-color: var(--ink-dim); color: var(--ink-dim); }
.teacher-feedback-choices { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.teacher-feedback-choice,
.teacher-feedback-check {
  align-items: center;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--ink-dim);
  cursor: pointer;
  display: flex;
  min-height: 2.75rem;
  padding: 0.45rem 0.6rem;
}
.teacher-feedback-choice { gap: 0.4rem; }
.teacher-feedback-choice:has(input:checked),
.teacher-feedback-check:has(input:checked) {
  background: var(--hot-soft);
  border-color: var(--hot);
  color: var(--ink);
}
.teacher-feedback-choice input,
.teacher-feedback-check input { accent-color: var(--hot); flex: none; }
.teacher-feedback-choice span { font-size: 0.65rem; }
.teacher-feedback-missed-wrap {
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  padding: 0.75rem;
}
.teacher-feedback-missed-wrap summary {
  color: var(--hot);
  cursor: pointer;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}
.teacher-feedback-missed-wrap .teacher-help { margin-top: 0.65rem; }
.teacher-feedback-missed {
  display: grid;
  gap: 1rem;
  margin-top: 0.7rem;
  max-height: 28rem;
  overflow: auto;
  padding-right: 0.35rem;
}
.teacher-feedback-missed-group h4 {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  margin: 0 0 0.4rem;
}
.teacher-feedback-check-grid {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.teacher-feedback-check {
  display: grid;
  gap: 0.05rem 0.4rem;
  grid-template-columns: auto minmax(0, 1fr);
}
.teacher-feedback-check[hidden],
.teacher-feedback-missed-group[hidden] { display: none; }
.teacher-feedback-check input { grid-row: 1 / 3; }
.teacher-feedback-check span { font-size: 0.68rem; }
.teacher-feedback-check small {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  text-transform: uppercase;
}
.teacher-feedback-submit {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 2.75rem;
}
.teacher-feedback-guard {
  color: var(--ink-faint);
  font-size: 0.56rem;
  letter-spacing: 0.05em;
  margin: 0.8rem 0 0;
}

@media (max-width: 640px) {
  .teacher-main { padding-top: 1.5rem; }
  .teacher-main .masthead { margin-bottom: 1.25rem; }
  .teacher-section-head,
  .teacher-history-head { display: grid; }
  .teacher-fixed-scroll { height: 360px; }
  .teacher-actions { align-items: stretch; flex-direction: column; }
  .teacher-actions > * { width: 100%; }
  .teacher-edit-meta #amendment-meta { margin-left: 0; text-align: left; width: 100%; }
  .teacher-analysis-form,
  .teacher-analysis-summary,
  .teacher-detection-item,
  .teacher-feedback-detected-row { grid-template-columns: 1fr; }
  .teacher-analysis-form .crate-page-btn { width: 100%; }
  .teacher-feedback-choices { display: grid; grid-template-columns: 1fr; }
  .teacher-feedback-check-grid { grid-template-columns: 1fr; }
  .teacher-feedback-submit { width: 100%; }
}

/* ─── head controls: delete, save-to-folder, armed confirms ─────────── */

/* The two-step confirm: an armed button goes hot so the second press is
   an informed one, and it disarms itself after a few seconds. */
.head-btn.armed,
.head-btn.armed:hover:not(:disabled),
.coach-form .coach-reset.armed {
  color: var(--danger);
  border-color: var(--danger);
}

/* Save-to-folder is instructor-only; students never see the button. */
.folder-btn { display: none; }
body.instructor .folder-btn { display: inline-block; }

.folder-menu {
  margin-top: 0.6rem;
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  background: var(--bg-raise);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.folder-menu-title {
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.folder-menu-rows { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.folder-menu-none { margin: 0; font-size: 0.68rem; color: var(--ink-faint); }
.folder-menu-row {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--panel-edge);
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
}
.folder-menu-row:hover:not(:disabled) { color: var(--hot); border-color: var(--hot); }
.folder-menu-row:disabled { color: var(--ok); border-color: var(--ok); cursor: default; }
.folder-menu-new { display: flex; gap: 0.4rem; }
.folder-menu-new input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.35rem 0.55rem;
}
.folder-menu-new input:focus { outline: none; border-color: var(--hot); }
.folder-menu-new button {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--panel-edge);
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
}
.folder-menu-new button:hover:not(:disabled) { color: var(--hot); border-color: var(--hot); }

/* ─── class folders rack (instructor only) ──────────────────────────── */

.folders { margin-top: 2.2rem; }
.folder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.folder {
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  background: var(--panel);
  padding: 0.55rem 0.75rem;
}
.folder-head { display: flex; align-items: center; gap: 0.5rem; }
.folder-open {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.25rem 0;
  text-align: left;
}
.folder-open.open .crate-toggle-caret { transform: rotate(90deg); }
.folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-count { color: var(--ink-faint); font-size: 0.7rem; flex-shrink: 0; }
.folder-items {
  list-style: none;
  margin: 0.5rem 0 0.15rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.folder-items[hidden] { display: none; }
.folder-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-top: 1px dashed var(--panel-edge);
  padding-top: 0.35rem;
  font-size: 0.8rem;
}
.folder-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-item-expired {
  color: var(--ink-faint);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  flex-shrink: 0;
}
.folder-items-note { color: var(--ink-faint); font-size: 0.7rem; padding: 0.35rem 0 0.15rem; }

/* ─── listening guy conversation reset ──────────────────────────────── */

.coach-form .coach-reset {
  background: none;
  border-color: var(--panel-edge);
  color: var(--ink-faint);
}
.coach-form .coach-reset:hover { background: none; color: var(--danger); border-color: var(--danger); }