/* PennyGroove — shared styles. Design system: brand/design-guide.md */

:root {
  color-scheme: dark;

  /* Brand palette */
  --amber: #e6a447;
  --amber-hover: #f0b45a;
  --denim: #537f9b;
  --ivory: #e8dcc4;
  --ink: #181818;

  /* Surfaces */
  --bg: #141414;
  --surface: #202020;
  --surface-raised: #292929;
  --surface-hover: #313131;
  --inset: #101010;
  --field: #171717;
  --border: #45413a;
  --divider: #302d29;

  /* Text */
  --text: var(--ivory);
  --text-muted: #b7aea0;
  --text-quiet: #978e81;

  /* States */
  --amber-tint: rgba(230, 164, 71, 0.14);
  --denim-tint: rgba(83, 127, 155, 0.18);
  --danger: #ee8379;
  /* In tune / correct: a confirmed good result, never decoration. */
  --good: #7cc68f;
  --good-tint: rgba(124, 198, 143, 0.16);

  /* Practice stages: a warm whiskey glow fading into dark brown (static, never animated). */
  --stage-bg:
    radial-gradient(ellipse 70% 60% at 30% 40%, rgba(230, 164, 71, 0.08), transparent 70%),
    linear-gradient(180deg, #1a1612, #0f0d0b);
  /* Things that sit on a stage are tinted glass, so the gradient shows through. */
  --on-stage: rgba(0, 0, 0, 0.28);
  --on-stage-line: rgba(232, 220, 196, 0.1);

  /* Panels (library, settings, dialogs): a cool denim glow in the top-right corner over warm charcoal
     that settles toward the bottom. Fixed sizes, so tall and short panels look the same at the top. */
  --panel-bg:
    radial-gradient(460px 240px at 100% 0%, rgba(83, 127, 155, 0.13), transparent 70%),
    linear-gradient(180deg, #252321 0, #1e1d1c 280px, #1b1b1b 100%);

  --font-brand: 'Bree Serif', Georgia, serif;
  --font-ui: 'Manrope', system-ui, 'Segoe UI', sans-serif;
  --font-panel: 'Barlow Semi Condensed', 'Manrope', system-ui, sans-serif; /* side panels' printed legends */
  --radius: 12px;
  --radius-control: 10px;
  --radius-small: 8px;
  --control: 44px;
  --ease: 150ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font-ui);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text-muted);
  font: 600 12px/1.5 var(--font-ui);
  text-align: center;
}

svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg .fill { fill: currentColor; stroke: none; }
[data-icon] { display: inline-flex; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--control);
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: 600 15px/1 var(--font-ui);
  white-space: nowrap;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover { background: var(--surface-raised); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--surface); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn.ghost:hover { background: var(--surface-raised); color: var(--text); }
.btn.small { height: 36px; padding: 0 12px; border-radius: var(--radius-small); font-size: 14px; gap: 6px; }
.btn.small svg { width: 15px; height: 15px; }
.btn.primary { border-color: var(--amber); background: var(--amber); color: var(--ink); }
.btn.primary:hover { border-color: var(--amber-hover); background: var(--amber-hover); }
.btn.primary:disabled:hover { border-color: var(--amber); background: var(--amber); }
.btn.big { height: 52px; font-size: 16px; }

.icon-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--text-quiet);
  transition: background-color var(--ease), color var(--ease), opacity var(--ease);
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn.danger:hover { color: var(--danger); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn.confirming {
  width: auto;
  padding: 0 10px;
  background: rgba(238, 131, 121, 0.12);
  color: var(--danger);
  font: 600 13px/1 var(--font-ui);
  opacity: 1 !important;
}
.icon-btn.confirming svg { display: none; }
.icon-btn.confirming::after { content: 'Delete?'; }

/* ---------- top bar ---------- */

/* The amber pick lights the left end of the bar and the light falls off into charcoal. The bottom hairline
   runs amber under the logo, through denim, into the divider: the warm stages meet the cool panels. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
  padding: 0 24px;
  background-color: #151413;
  background-image:
    linear-gradient(90deg, rgba(230, 164, 71, 0.55), rgba(83, 127, 155, 0.4) 34%, var(--divider) 72%),
    radial-gradient(closest-side, rgba(230, 164, 71, 0.15), transparent),
    linear-gradient(180deg, #1d1b19, #151413);
  background-size: 100% 1px, 360px 168px, 100% 100%;
  background-position: 0 100%, -139px 50%, 0 0; /* glow centred on the mark: 24px padding + 17px half-width */
  background-repeat: no-repeat;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-home { display: flex; align-items: center; gap: 12px; border-radius: var(--radius-small); text-decoration: none; }
.brand-mark { display: block; width: 34px; height: 36px; flex: none; }
.wordmark { font: 400 23px/1 var(--font-brand); font-synthesis: none; color: var(--text); white-space: nowrap; }
.topbar-actions { display: flex; gap: 8px; }

/* mode switch: video loops / chord practice / scale practice */
.modes {
  display: flex;
  gap: 2px;
  margin-left: 20px;
  padding: 4px;
  border: 1px solid rgba(232, 220, 196, 0.12);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.26); /* tinted glass, so the header light shows through */
}
.modes a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 12px;
  border-radius: var(--radius-small);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ease), color var(--ease);
}
.modes a svg { width: 16px; height: 16px; color: var(--text-quiet); transition: color var(--ease); }
.modes .tab-short { display: none; }
.modes a:hover { background: rgba(232, 220, 196, 0.07); color: var(--text); }
.modes a:hover svg { color: var(--text-muted); }
.modes a[aria-current='page'] {
  background: linear-gradient(180deg, rgba(83, 127, 155, 0.3), rgba(83, 127, 155, 0.12));
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--denim), 0 1px 6px rgba(0, 0, 0, 0.3);
}
.modes a[aria-current='page'] svg { color: var(--text); }

/* ---------- layout ---------- */

.layout {
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
  padding: 20px 24px 40px;
}
.workspace { min-width: 0; }
.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-image: var(--panel-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 12px 16px 12px 20px;
  border-bottom: 1px solid var(--divider);
}
.panel-head h2 { margin: 0; font: 600 16px/1.3 var(--font-ui); color: var(--text); }

/* ---------- library ---------- */

.library {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 108px);
}
.count {
  min-width: 26px;
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.count:empty { display: none; }
.lib-list { flex: 1; min-height: 0; margin: 0; padding: 8px; overflow: auto; list-style: none; }
.lib-empty { margin: 0; padding: 20px; color: var(--text-muted); font-size: 14px; }
.lib-foot { padding: 12px 20px; border-top: 1px solid var(--divider); color: var(--text-quiet); font-size: 13px; }
.lib-foot:empty { display: none; }

.lib-video { --row-bg: var(--surface); border-radius: var(--radius-control); }
.lib-video + .lib-video { margin-top: 4px; }
.lib-video.is-current { --row-bg: #252525; background: var(--row-bg); box-shadow: inset 0 0 0 1px var(--divider); }
.lib-video-row { position: relative; display: flex; align-items: center; gap: 2px; padding: 8px; border-radius: var(--radius-control); }
.lib-video-row:hover, .lib-video-row:focus-within { --row-bg: var(--surface-raised); background: var(--row-bg); }

/* Row actions float over the end of the row on hover, so names get the full width otherwise. */
.row-actions {
  position: absolute;
  top: 50%;
  right: 6px;
  display: flex;
  gap: 2px;
  padding-left: 24px;
  background: linear-gradient(90deg, transparent, var(--row-bg) 20px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity var(--ease);
}
.lib-video-row .row-actions { right: 42px; }
.lib-video-row:hover .row-actions, .lib-video-row:focus-within .row-actions,
.lib-loop:hover .row-actions, .lib-loop:focus-within .row-actions,
.row-actions:has(.confirming) { opacity: 1; pointer-events: auto; }
.lib-video-main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  text-align: left;
}
.lib-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 72px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--inset) center / cover no-repeat;
  color: var(--text-quiet);
}
.lib-video.is-current .lib-thumb { border-color: var(--denim); }
.lib-video-text { display: grid; min-width: 0; gap: 2px; }
.lib-video-name { overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.lib-video-sub { color: var(--text-quiet); font-size: 13px; line-height: 1.3; white-space: nowrap; }
.lib-video-sub em { font-style: normal; color: var(--amber); }
.lib-video-credit { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-muted); font-size: 13px; line-height: 1.3; }
.lib-video-credit span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lib-video-credit .src-badge { padding: 0 5px; font-size: 11px; }
a.icon-btn { text-decoration: none; }
.lib-video [data-action='toggle'] svg { transition: transform var(--ease); }
.lib-video.is-open [data-action='toggle'] svg { transform: rotate(90deg); }

.lib-loops { position: relative; margin: 0; padding: 0 8px 8px 24px; list-style: none; }
.lib-loops::before { content: ''; position: absolute; top: 0; bottom: 24px; left: 16px; width: 1px; background: var(--divider); }
.lib-loop { position: relative; display: flex; align-items: center; border-radius: var(--radius-small); }
.lib-loop::before { content: ''; position: absolute; top: 50%; left: -8px; width: 8px; height: 1px; background: var(--divider); }
.lib-loop:hover { --row-bg: var(--surface-raised); background: var(--row-bg); }
.lib-loop.is-active { --row-bg: #24292c; background: var(--row-bg); box-shadow: inset 0 0 0 1px var(--denim); }
.lib-loop-main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  text-align: left;
}
.lib-loop-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text);
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.lib-loop-icon svg { width: 12px; height: 12px; margin-left: 2px; }
.lib-loop-main:hover .lib-loop-icon, .lib-loop.is-live .lib-loop-icon { border-color: var(--amber); background: var(--amber); color: var(--ink); }
.lib-loop-text { display: grid; min-width: 0; gap: 1px; }
.lib-loop-name { overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.lib-loop-range { color: var(--text-muted); font-size: 13px; line-height: 1.35; }
.lib-loop-sub { overflow: hidden; color: var(--text-quiet); font-size: 13px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.lib-loops-empty { padding: 8px; color: var(--text-quiet); font-size: 14px; }
.mono { font-variant-numeric: tabular-nums; }

/* "Now playing" marker on a loop row (static: no motion outside the practice controls) */
.eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq i { width: 3px; border-radius: 1px; background: currentColor; }
.eq i:nth-child(1) { height: 55%; }
.eq i:nth-child(2) { height: 100%; }
.eq i:nth-child(3) { height: 75%; }

/* ---------- workspace ---------- */

.ws-head { display: grid; gap: 4px; min-width: 0; margin: 0 0 16px; }
.ws-title-row { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.video-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font: 400 30px/1.25 var(--font-brand);
  font-synthesis: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body:not(.has-video) .video-title { color: var(--text-muted); }
.video-sub { color: var(--text-quiet); font-size: 14px; white-space: nowrap; }

/* Attribution for linked videos: who made it, and a way back to where it lives. */
.credit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; color: var(--text-muted); font-size: 14px; }
.credit a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.credit a:hover { text-decoration-color: var(--amber); }
.credit a:not([href]) { text-decoration: none; }
.credit-watch { display: inline-flex; align-items: center; gap: 6px; }
.credit-watch svg { width: 14px; height: 14px; }
.src-badge { padding: 1px 8px; border: 1px solid var(--denim); border-radius: 6px; color: var(--text-muted); font-size: 12px; font-weight: 600; }

.dropzone {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 64vh;
  padding: 24px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  background: var(--stage-bg);
  text-align: center;
}
.dz-inner { display: grid; justify-items: center; gap: 12px; max-width: 440px; }
.dz-mark { width: 52px; height: auto; margin-bottom: 4px; }
.dz-kicker { margin: 0; color: var(--text-muted); font-size: 14px; font-weight: 600; }
.dz-title { margin: 0; font: 400 clamp(32px, 4.4vw, 44px)/1.15 var(--font-brand); font-synthesis: none; }
.dz-text { margin: 0; color: var(--text-muted); }
.dz-fine { margin: 4px 0 0; color: var(--text-quiet); font-size: 13px; }
.dz-yt { display: flex; gap: 8px; width: min(100%, 380px); margin-top: 4px; }
.dz-yt input { flex: 1; min-width: 0; }

body.has-video .dropzone,
body:not(.has-video) .stage-wrap,
body:not(.has-video) .transport,
body:not(.has-video) .timeline { display: none; }

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 64vh;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #000;
  container-type: size;
  isolation: isolate;
  transition: border-color var(--ease);
}
.stage video { display: block; width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.yt-host { position: absolute; inset: 0; display: none; }
.yt-host iframe { display: block; width: 100%; height: 100%; border: 0; }
body[data-source='youtube'] .stage video { display: none; }
body[data-source='youtube'] .yt-host { display: block; }
body.is-practicing .stage { border-color: var(--amber); }
.stage-wrap:fullscreen { display: flex; flex-direction: column; gap: 12px; background: #000; }
.stage-wrap:fullscreen .stage { flex: 1; max-height: none; aspect-ratio: auto; border: 0; border-radius: 0; }
.stage-wrap:fullscreen .dock { margin: 0 16px 16px; }

.hud {
  position: absolute;
  top: 12px;
  right: 12px;
  left: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
.hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: rgba(16, 16, 16, 0.86);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.hud-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-quiet); }
body[data-phase='playing'] .hud-dot { background: var(--amber); }
.hud-hint { padding: 5px 10px; border-radius: var(--radius-small); background: rgba(16, 16, 16, 0.75); color: var(--text-muted); font-size: 13px; }

/* Count-in / rest / paused / done over the video. Updates are instant: no motion in the practice area. */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4cqh;
  padding: 8cqh 4cqw;
  background: rgba(16, 16, 16, 0.55);
  text-align: center;
}
.overlay[data-kind='rest'] { background: rgba(16, 16, 16, 0.62); }
.overlay[data-kind='done'] { background: rgba(16, 16, 16, 0.86); }
.ov-kicker, .ov-sub { padding: 0.35em 1em; border-radius: 99px; background: rgba(16, 16, 16, 0.8); }
.ov-sub:empty { display: none; }
.ov-kicker { color: var(--text); font-size: clamp(14px, 3.4cqh, 20px); font-weight: 600; line-height: 1.3; }
.overlay[data-kind='countdown'] .ov-kicker { color: var(--amber); }
.ov-dial { position: relative; display: grid; place-items: center; flex: none; width: min(50cqh, 40cqw); aspect-ratio: 1; }
.ov-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.ov-ring circle { fill: rgba(16, 16, 16, 0.5); stroke-width: 3; }
.ov-ring-track { stroke: rgba(232, 220, 196, 0.16); }
.ov-ring-fill { fill: none !important; stroke: var(--amber); stroke-dasharray: 100; stroke-linecap: round; }
.overlay[data-kind='rest'] .ov-ring-fill { stroke: var(--ivory); }
.overlay[data-kind='paused'] .ov-ring-fill { stroke: var(--text-quiet); }
.ov-num {
  position: relative;
  color: var(--text);
  font: 700 min(32cqh, 25cqw)/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.overlay[data-kind='done'] .ov-num { color: var(--amber); }
.ov-num svg { width: 0.42em; height: 0.42em; stroke-width: 0; }
.ov-sub { max-width: 80cqw; color: var(--text); font-size: clamp(14px, 3cqh, 18px); }
.ov-actions { display: flex; gap: 8px; margin-top: 0.8cqh; }
.ov-actions .btn.ghost { border-color: var(--border); background: rgba(16, 16, 16, 0.85); color: var(--text); }

.loop-progress { position: absolute; right: 0; bottom: 0; left: 0; z-index: 4; height: 4px; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity var(--ease); }
body.is-practicing .loop-progress { opacity: 1; }
.loop-progress span { display: block; height: 100%; background: var(--amber); transform: scaleX(0); transform-origin: left; }

/* Practice dock: count-in / rest / rep status for YouTube videos, shown below the player (nothing may cover YouTube's player). */
.dock {
  position: relative;
  display: none;
  align-items: center;
  gap: 24px;
  min-height: 120px;
  margin-top: 12px;
  padding: 16px 24px 20px;
  overflow: hidden;
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  background: var(--stage-bg);
}
body.is-practicing[data-source='youtube'] .dock { display: flex; }
.dock .hud { position: static; flex: none; flex-direction: column; align-items: flex-start; gap: 8px; }
.dock .hud-chip { background: var(--on-stage); }
.dock .hud-hint { padding: 0; background: none; color: var(--text-quiet); }
.dock .overlay {
  position: static;
  display: grid;
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'dial kicker' 'dial sub' 'dial actions';
  align-items: center;
  justify-items: start;
  gap: 6px 20px;
  padding: 0;
  background: none !important;
  text-align: left;
}
.dock .overlay[hidden] { display: none; }
.dock .ov-dial { grid-area: dial; width: 88px; }
.dock .ov-num { font-size: 44px; text-shadow: none; }
.dock .ov-kicker, .dock .ov-sub { padding: 0; background: none; }
.dock .ov-kicker { grid-area: kicker; align-self: end; font-size: 15px; }
.dock .ov-sub { grid-area: sub; max-width: none; color: var(--text-muted); font-size: 14px; }
.dock .ov-actions { grid-area: actions; align-self: start; margin: 4px 0 0; }
.dock .ov-ring circle { fill: none; }
.dock .loop-progress { opacity: 1; }

/* ---------- transport ---------- */

.transport { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tbtn {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--control);
  height: var(--control);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  transition: background-color var(--ease);
}
.tbtn:hover { background: var(--surface-raised); }
.tbtn svg { width: 18px; height: 18px; }
.tbtn.play { width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--ivory); color: var(--ink); }
.tbtn.play:hover { background: #f3ead8; }
.tbtn.play svg { width: 20px; height: 20px; }
.timecode { padding: 0 8px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.tc-sep { margin: 0 6px; color: var(--text-quiet); }
#tc-dur { color: var(--text-quiet); }
.spacer { flex: 1; }

.switch { display: inline-flex; align-items: center; gap: 10px; min-height: var(--control); color: var(--text-muted); font-size: 14px; font-weight: 500; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { position: relative; flex: none; width: 40px; height: 24px; border: 1px solid var(--border); border-radius: 99px; background: var(--field); transition: background-color var(--ease), border-color var(--ease); }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-quiet); transition: transform var(--ease), background-color var(--ease); }
.switch input:checked + .switch-track { border-color: var(--denim); background: var(--denim); }
.switch input:checked + .switch-track .switch-thumb { background: var(--ivory); transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------- timeline ---------- */

.timeline { margin-top: 20px; padding-top: 26px; user-select: none; }
.tl-track { position: relative; height: 72px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--inset); cursor: crosshair; touch-action: none; }
.tl-film-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.tl-film { display: block; width: 100%; height: 100%; opacity: 0.55; }
.timeline.has-region .tl-film { opacity: 0.4; }
.tl-ghost { position: absolute; top: 0; bottom: 0; z-index: 1; width: 1px; background: rgba(232, 220, 196, 0.5); pointer-events: none; }

.tl-region {
  position: absolute;
  top: -1px;
  bottom: -1px;
  z-index: 2;
  min-width: 2px;
  border-top: 2px solid var(--amber);
  border-bottom: 2px solid var(--amber);
  background: rgba(230, 164, 71, 0.16);
  cursor: grab;
  container-type: inline-size;
}
.timeline.is-dragging .tl-region { cursor: grabbing; }
.tl-len {
  position: absolute;
  bottom: 5px;
  left: 50%;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(16, 16, 16, 0.85);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
@container (max-width: 64px) { .tl-len { display: none; } }

.tl-handle { position: absolute; top: -9px; bottom: -9px; z-index: 3; width: 18px; cursor: ew-resize; outline: none; }
.tl-handle[data-edge='start'] { left: -9px; }
.tl-handle[data-edge='end'] { right: -9px; }
.tl-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: 7px; width: 4px; border-radius: 2px; background: var(--amber); transition: background-color var(--ease); }
.tl-handle:hover::before, .tl-handle:focus-visible::before { background: var(--amber-hover); }
.tl-flag {
  position: absolute;
  bottom: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  background: var(--amber);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  pointer-events: auto;
}
.tl-flag b { font-weight: 700; }
.tl-handle[data-edge='start'] .tl-flag { right: 7px; border-radius: 6px 6px 0 6px; }
.tl-handle[data-edge='end'] .tl-flag { left: 7px; border-radius: 6px 6px 6px 0; }
.tl-handle[data-edge='start'].flip .tl-flag { right: auto; left: 7px; border-radius: 6px 6px 6px 0; }
.tl-handle[data-edge='end'].flip .tl-flag { left: auto; right: 7px; border-radius: 6px 6px 0 6px; }
.tl-handle:focus-visible .tl-flag { outline: 2px solid var(--amber); outline-offset: 3px; }
.timeline.stack-flags { padding-top: 48px; }
.timeline.stack-flags .tl-handle[data-edge='end'] .tl-flag { bottom: calc(100% + 21px); }
.timeline.stack-flags .tl-handle[data-edge='end']::after { content: ''; position: absolute; bottom: 100%; left: 8px; width: 2px; height: 21px; background: var(--amber); }

.tl-playhead { position: absolute; top: -5px; bottom: -5px; z-index: 4; width: 2px; margin-left: -1px; background: var(--ivory); pointer-events: none; }
.tl-playhead::before { content: ''; position: absolute; top: -1px; left: -4px; border: 5px solid transparent; border-top: 6px solid var(--ivory); }

.tl-hover {
  position: absolute;
  bottom: calc(100% + 32px);
  z-index: 10;
  width: 192px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
  pointer-events: none;
}
.tl-hover canvas { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; background: #000; }
/* Linked videos have no frames to preview: a plain strip and a time-only hover label. */
.timeline.no-frames .tl-hover { width: auto; padding: 2px 10px; }
.timeline.no-frames .tl-hover canvas { display: none; }
.timeline.no-frames .tl-track { background: repeating-linear-gradient(90deg, transparent 0 39px, rgba(232, 220, 196, 0.05) 39px 40px), var(--inset); }
.tl-hover-time { display: block; padding: 4px 0 2px; color: var(--text); font-size: 13px; font-weight: 600; text-align: center; }

.tl-saved { position: relative; margin-top: 8px; }
.tl-saved-bar { position: absolute; min-width: 4px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: var(--denim); opacity: 0.75; transition: opacity var(--ease); }
.tl-saved-bar:hover { opacity: 1; }
.tl-saved-bar.is-active { background: var(--amber); opacity: 1; }

.tl-ruler { position: relative; height: 26px; margin-top: 2px; }
.tl-tick { position: absolute; top: 0; padding-top: 8px; color: var(--text-quiet); font-size: 12px; transform: translateX(-50%); }
.tl-tick:first-child { transform: none; }
.tl-tick::before { content: ''; position: absolute; top: 1px; left: 50%; width: 1px; height: 5px; background: var(--border); }
.tl-tick:first-child::before { left: 0; }
.tl-hint { margin: 8px 0 0; color: var(--text-muted); font-size: 14px; }
.timeline.has-region .tl-hint { display: none; }

/* ---------- inspector ---------- */

.inspector { position: sticky; top: 20px; }
.inspector.is-disabled .insp-body, .inspector.is-disabled .insp-actions { opacity: 0.45; pointer-events: none; }
#insp-title.is-dirty::after { content: ' ·  unsaved'; color: var(--text-quiet); font-weight: 500; }
.insp-body { display: grid; gap: 20px; padding: 20px; }
.field { display: grid; gap: 8px; margin: 0; }
.field-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-muted); font-size: 14px; font-weight: 500; line-height: 1.3; }
.field-label output { color: var(--text); font-size: 14px; font-weight: 600; }

input[type='text'], .time-input, .select {
  width: 100%;
  height: var(--control);
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--field);
  color: var(--text);
  transition: border-color var(--ease);
}
input[type='text']::placeholder, .time-input::placeholder { color: var(--text-quiet); opacity: 0.8; }
input[type='text']:hover, .time-input:hover { border-color: #57524a; }
input[type='text']:focus, .time-input:focus { outline: none; }
input[type='text']:focus-visible, .time-input:focus-visible, .select:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--divider); border-radius: var(--radius-control); background: var(--field); }
.ab .field-label > span { display: inline-flex; align-items: center; gap: 8px; }
.ab-tag { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--amber); color: var(--ink); font-size: 12px; font-weight: 700; }
.time-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 4px; }
.time-row > * { min-width: 0; } /* inputs otherwise refuse to shrink below their default width */
.time-input { height: 40px; padding: 0 2px; background: var(--surface); font-size: 14px; font-weight: 600; text-align: center; }
.step { height: 40px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); color: var(--text-muted); font-size: 17px; line-height: 1; transition: background-color var(--ease), color var(--ease); }
.step:hover { background: var(--surface-raised); color: var(--text); }
.set-btn { width: 100%; padding: 0 8px; color: var(--text-muted); font-size: 13px; }
.set-btn:hover { color: var(--text); }
.set-btn kbd { min-width: 0; padding: 0 5px; font-size: 11px; }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--field); }
.seg button {
  min-height: 36px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  transition: background-color var(--ease), color var(--ease);
}
.seg button:hover { background: var(--surface); color: var(--text); }
.seg button[aria-checked='true'] { background: var(--surface-raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--denim); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stepper {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: stretch;
  height: var(--control);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--field);
}
.stepper:focus-within { outline: 2px solid var(--amber); outline-offset: 3px; }
.stepper button { padding: 0; border: 0; background: transparent; color: var(--text-muted); font-size: 18px; line-height: 1; transition: background-color var(--ease), color var(--ease); }
.stepper button:hover { background: var(--surface-raised); color: var(--text); }
.stepper button:focus-visible { outline: none; background: var(--surface-raised); color: var(--text); }
.stepper-val { display: flex; align-items: center; justify-content: center; gap: 5px; cursor: text; }
.stepper-val input {
  width: 3.2ch;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  text-align: right;
  appearance: textfield;
  -moz-appearance: textfield;
}
.stepper-val input::placeholder { color: var(--text); }
.stepper-val input::-webkit-inner-spin-button, .stepper-val input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-val span { color: var(--text-quiet); font-size: 13px; }

input[type='range'] { --p: 50%; width: 100%; height: 24px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--denim) var(--p), var(--surface-hover) var(--p)); }
input[type='range']::-moz-range-track { height: 6px; border-radius: 3px; background: var(--surface-hover); }
input[type='range']::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--denim); }
input[type='range']::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--ivory); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -webkit-appearance: none; }
input[type='range']::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--ivory); }
input[type='range']:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.chips { display: flex; gap: 6px; }
.chips button {
  flex: 1;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.chips button:hover { background: var(--surface-raised); color: var(--text); }
.chips button.is-on { border-color: var(--denim); background: var(--surface-raised); color: var(--text); }

/* tempo / speed trainer (shared by all practice pages) */
.trainer { gap: 10px; }
.trainer .switch { min-height: 32px; color: var(--text); font-size: 15px; font-weight: 600; }
.trainer-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-control);
  background: var(--field);
  color: var(--text-muted);
  font-size: 14px;
}
.trainer:not(.is-on) .trainer-body { display: none; }
.mini-num {
  width: 52px;
  height: 40px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.mini-num.wide-num { width: 60px; }
.mini-num:focus { outline: none; }
.mini-num:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.mini-num::-webkit-inner-spin-button, .mini-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.trainer-note { flex-basis: 100%; margin: 2px 0 0; color: var(--text-quiet); font-size: 13px; }
/* earn the tempo: only clean passes (heard in Listen mode) count towards the next step */
.trainer .trainer-earn { flex-basis: 100%; min-height: 36px; margin-top: 2px; color: var(--text); font-size: 14px; font-weight: 500; }
.trainer-earn small { color: var(--text-quiet); font-size: 13px; }
.trainer-note.is-warn { color: var(--amber); }

/* "5s count-in → play 0:08.0 → 3s rest → ∞ repeat" */
.cycle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 14px; border: 1px solid var(--divider); border-radius: var(--radius-control); color: var(--text-muted); font-size: 13px; line-height: 1.3; }
.cycle:empty { display: none; }
.cyc { padding: 3px 8px; border-radius: 6px; background: var(--surface-raised); color: var(--text-muted); white-space: nowrap; }
.cyc.play { color: var(--text); font-weight: 600; }
.cyc-arrow { color: var(--text-quiet); }

.insp-actions { display: grid; gap: 10px; padding: 0 20px 20px; }

/* Collapsible groups of less-used settings. Folded, the header sums up what's inside. */
.insp-body > .insp-group { grid-column: 1 / -1; }
.insp-group { border-top: 1px solid var(--divider); }
.insp-group > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-top: 6px;
  cursor: pointer;
  list-style: none;
}
.insp-group > summary::-webkit-details-marker { display: none; }
.insp-group > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: var(--radius-small); }
.insp-group-title { flex: none; color: var(--text); font-size: 15px; font-weight: 700; }
.insp-group-meta { flex: 1; min-width: 0; overflow: hidden; color: var(--text-quiet); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.insp-group[open] .insp-group-meta { visibility: hidden; } /* open, the fields themselves show it */
.insp-group > summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 6px 4px 0;
  border: solid var(--text-muted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform var(--ease), margin var(--ease);
}
.insp-group[open] > summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
.insp-group > summary:hover .insp-group-title { color: var(--amber); }
.insp-group-body { display: grid; gap: 20px; padding: 10px 0 4px; }

/* On a desktop the settings panel is never taller than the window: its middle scrolls and Start stays put. */
@media (min-width: 1281px) {
  .inspector { display: flex; flex-direction: column; max-height: calc(100vh - 128px); } /* header 68 + the layout's 20 above and 40 below */
  .inspector .insp-body { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #4a4038 transparent; }
  .inspector .insp-actions { flex: none; padding-top: 14px; }
}
body.is-practicing #practice-btn { border-color: var(--border); background: var(--surface-raised); color: var(--text); }
body.is-practicing #practice-btn svg { color: var(--amber); }
.save-row { display: flex; gap: 8px; }
.save-row .btn { flex: 1; }
#save-btn.is-attention { border-color: var(--denim); }

/* ---------- listen mode (scale and chord practice) ---------- */

/* The Listen button on a stage. Once on, it shows what the mic hears: a level meter and the last thing heard. */
.listen-btn { gap: 8px; margin-right: auto; color: var(--text-muted); cursor: pointer; transition: border-color var(--ease), color var(--ease), background-color var(--ease); }
.listen-btn:hover { border-color: #5a554c; color: var(--text); }
.listen-btn svg { width: 15px; height: 15px; }
.listen-btn[aria-pressed='true'] { border-color: var(--denim); background: rgba(83, 127, 155, 0.16); color: var(--text); }
.listen-btn:disabled { cursor: progress; opacity: 0.6; }
.mic-meter { display: none; width: 40px; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(232, 220, 196, 0.14); }
.listen-btn[aria-pressed='true'] .mic-meter { display: block; }
.mic-meter i { display: block; height: 100%; background: var(--denim); transform: scaleX(0); transform-origin: left; }
.listen-btn[aria-pressed='true'] #heard { min-width: 6.5ch; text-align: left; }

/* Marks: shape first, colour second. ● on time · ◀ early · ▶ late · × wrong note · ○ missed */
.mark { display: inline-block; flex: none; width: 10px; height: 10px; vertical-align: middle; }
.mark[data-kind='hit'] { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.mark[data-kind='early'] { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 7px solid var(--text-muted); }
.mark[data-kind='late'] { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--text-muted); }
.mark[data-kind='wrong'] {
  background:
    linear-gradient(45deg, transparent 42%, var(--danger) 42% 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--danger) 42% 58%, transparent 58%);
}
.mark[data-kind='miss'] { width: 9px; height: 9px; border: 1.5px solid var(--text-quiet); border-radius: 50%; }

.listen-panel { margin-top: 20px; }
.listen-actions { display: flex; align-items: center; gap: 12px; }
.listen-latency { color: var(--text-quiet); font-size: 13px; white-space: nowrap; }
.listen-body { padding: 8px 20px 16px; }
.listen-empty { margin: 8px 0 12px; color: var(--text-muted); font-size: 14px; }
.pass-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pass-row {
  display: grid;
  grid-template-columns: 112px 72px minmax(0, 1fr) minmax(150px, auto);
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
}
.pass-name { display: grid; font-size: 15px; font-weight: 600; line-height: 1.3; }
.pass-name small, .pass-timing small { color: var(--text-quiet); font-size: 13px; font-weight: 500; }
.pass-row.is-best .pass-name small { color: var(--amber); }
.pass-score { color: var(--text-muted); font-size: 15px; white-space: nowrap; }
.pass-score b { color: var(--text); font-size: 20px; font-weight: 700; }
.pass-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.pass-timing { display: grid; justify-items: end; color: var(--text); font-size: 14px; font-weight: 500; line-height: 1.35; text-align: right; }
.listen-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; color: var(--text-quiet); font-size: 13px; }
.listen-legend span { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 860px) {
  .pass-row { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .pass-marks { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 560px) {
  .listen-panel .panel-head { flex-wrap: wrap; }
  .listen-latency { display: none; }
}

/* ---------- side panels: an amp faceplate ---------- */
/* The side panels (library on the left, settings on the right) and the panels under the stage (the chord
   progression, how you played) look like a guitar amp: textured covering, gold piping, a
   brushed-metal faceplate and an amber pilot light by the title. Options are amp buttons, raised, and pressed
   in with a lit jewel when chosen (one look for every kind of choice). Fields sit recessed in the plate. Labels
   are printed in a condensed face, like a real faceplate's legends. Design system: brand/design-guide.md */
.panel:is(.library, .inspector, .progression, .listen-panel) {
  --amp-edge: #0c0a09;
  --amp-recess: #110f0d;
  --amp-gold: #c9a466;
  --amp-legend: #c9bda5; /* printed labels: 8.6:1 on the plate */
  --amp-raised: linear-gradient(180deg, #3b352f, #29241f);
  --amp-raised-hover: linear-gradient(180deg, #463f37, #2f2924);
  --amp-pressed: linear-gradient(180deg, #121010, #1e1b18);
  --amp-lift: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 2px 3px rgba(0, 0, 0, 0.45);
  --amp-sink: inset 0 2px 5px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.06);
  --amp-jewel: radial-gradient(circle at 35% 30%, #fff1cf 0%, #f0b45a 38%, #a5651a 100%);
  --amp-jewel-off: radial-gradient(circle at 35% 30%, #6b5a40 0%, #3a2c1a 70%);
  --amp-glow: 0 0 8px rgba(230, 164, 71, 0.75);
  isolation: isolate;
  padding: 11px;
  border: 0;
  border-radius: 14px;
  background:
    radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1.3px) 0 0 / 4px 4px,
    linear-gradient(180deg, #221e1b, #171412);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 22px rgba(0, 0, 0, 0.55);
}
/* the faceplate and its gold piping, drawn behind the content */
.panel:is(.library, .inspector, .progression, .listen-panel)::before {
  content: '';
  position: absolute;
  inset: 9px;
  z-index: -1;
  border: 2px solid transparent;
  border-radius: 8px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px) padding-box,
    linear-gradient(180deg, #2a2521, #1b1815) padding-box,
    linear-gradient(180deg, #cfae72, #8a6a35) border-box;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* the panels under the stage aren't positioned otherwise; the faceplate needs a box to sit in */
.panel:is(.progression, .listen-panel) { position: relative; }

/* the nameplate: pilot light, title, a gold rule under it */
:is(.library, .inspector, .progression, .listen-panel) > .panel-head {
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px 10px 16px;
  border-bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(201, 164, 102, 0.55) 12%, rgba(201, 164, 102, 0.55) 88%, transparent) bottom / 100% 1px no-repeat;
}
:is(.library, .inspector, .progression, .listen-panel) > .panel-head::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--amp-jewel);
  box-shadow: var(--amp-glow), 0 0 0 2px #2b2621, 0 0 0 3px rgba(201, 164, 102, 0.8);
}
:is(.library, .inspector, .progression, .listen-panel) > .panel-head h2 {
  margin-right: auto;
  font: 400 21px/1.15 var(--font-brand);
  font-synthesis: none;
  color: #efe5cf;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* printed legends */
:is(.library, .inspector) :is(.field-label, .starters-label, .nf-sub, .ml-sub) {
  color: var(--amp-legend);
  font-family: var(--font-panel);
  font-size: 15px;
  font-weight: 600;
}
:is(.library, .inspector) :is(.field-hint, .stepper-val span, .panel-tip, .trainer-note, .pattern-legend) { font-family: var(--font-panel); font-size: 14px; }
.inspector .trainer .switch { font-family: var(--font-panel); font-size: 17px; }

/* amp buttons: raised; chosen = pressed in, amber legend, lit jewel */
.inspector :is(.seg button, .key-grid button, .pos-grid button, .chips button, .tone, .pattern-cell),
.library .starter {
  position: relative;
  border: 1px solid var(--amp-edge);
  background: var(--amp-raised);
  box-shadow: var(--amp-lift);
  color: #e2d7c1;
  font-family: var(--font-panel);
  font-weight: 600;
}
.inspector :is(.seg button, .key-grid button, .pos-grid button, .chips button) { font-size: 16px; }
.inspector .seg-tight button { font-size: 14px; }
.inspector :is(.seg button, .key-grid button, .pos-grid button, .chips button, .tone, .pattern-cell):hover,
.library .starter:hover { background: var(--amp-raised-hover); color: #efe5cf; }
.inspector :is(.seg button[aria-checked='true'], .key-grid button[aria-checked='true'], .pos-grid button[aria-checked='true'], .chips button.is-on, .tone[aria-checked='true']),
.library .starter.is-active {
  border-color: var(--amp-edge);
  background: var(--amp-pressed);
  box-shadow: var(--amp-sink);
  color: var(--amber);
}
.inspector :is(.seg button[aria-checked='true'], .key-grid button[aria-checked='true'], .pos-grid button[aria-checked='true'], .chips button.is-on, .tone[aria-checked='true'])::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amp-jewel);
  box-shadow: var(--amp-glow);
}
.inspector .seg { gap: 5px; border-color: var(--amp-edge); background: var(--amp-recess); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8); }
.inspector .tone b { font-family: var(--font-panel); font-size: 17px; }
.inspector .tone span { font-family: var(--font-ui); }
.inspector .tone[aria-checked='true'] span { color: var(--text-muted); }
.inspector :is(.pos-grid button small, .seg button small) { font-family: var(--font-ui); }
.inspector .pos-grid button[aria-checked='true'] small { color: #c9a06a; }
.inspector .pattern-cell.is-current { border-color: var(--amber); background: var(--amber-tint); color: var(--amber); }

/* the exercise lists: amp channel buttons with a jewel */
.library .starter { padding-left: 36px; border-radius: var(--radius-control); }
.library .starter b { font-size: 17px; }
.library .starter span { font-family: var(--font-ui); }
.library .starter::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 13px;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--amp-jewel-off);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.library .starter.is-active::before { background: var(--amp-jewel); box-shadow: var(--amp-glow); }
.library .starter.is-active span { color: var(--text-muted); }
.library .starters, .library .nf-progress, .library .ml-progress, .library .lib-foot {
  border-top: 0;
  background: linear-gradient(90deg, transparent, rgba(201, 164, 102, 0.4) 12%, rgba(201, 164, 102, 0.4) 88%, transparent) top / 100% 1px no-repeat;
}
/* saved rows (charts, exercises, videos and loops): flat on the plate, raised on hover, pressed when open */
.library :is(.chart-row, .lib-video-row, .lib-loop):hover { --row-bg: #2f2924; background: var(--row-bg); }
.library :is(.chart-row.is-active, .lib-loop.is-active, .lib-video.is-current) {
  --row-bg: #171412;
  background: var(--amp-pressed);
  box-shadow: var(--amp-sink);
}
.library :is(.chart-row, .lib-loop, .lib-video) .lib-loop-name, .library .lib-video-name { font-family: var(--font-panel); font-size: 17px; }
.library .count { background: var(--amp-recess); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); color: var(--amber); }

/* the chord progression: each chord an amp button; the one playing pressed in, lit, amber-edged */
.progression .prog-chip { border-color: var(--amp-edge); background: var(--amp-raised); box-shadow: var(--amp-lift); }
.progression .prog-chip:hover { border-color: var(--amp-edge); background: var(--amp-raised-hover); }
.progression .prog-chip.is-current { border-color: var(--amber); background: var(--amp-pressed); box-shadow: var(--amp-sink); }
.progression .prog-chip.is-current::before {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amp-jewel);
  box-shadow: var(--amp-glow);
}
.progression .prog-foot select { border-color: var(--amp-edge); background: var(--amp-recess); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8); color: var(--amp-legend); }
.progression .prog-add { border-color: rgba(201, 164, 102, 0.45); background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); color: var(--amp-legend); }
.progression .prog-add:hover { border-color: var(--amber); color: var(--text); }
:is(.progression, .listen-panel) .panel-head .video-sub, .listen-panel .listen-latency { color: var(--amp-legend); font-family: var(--font-panel); font-size: 15px; }
.listen-panel .pass-name { font-family: var(--font-panel); font-size: 17px; }
.listen-panel .pass-row { border-bottom-color: rgba(201, 164, 102, 0.18); }

/* collapsible groups: a gold rule above, the title printed like the other legends */
.inspector .insp-group { border-top: 0; background: linear-gradient(90deg, transparent, rgba(201, 164, 102, 0.4) 12%, rgba(201, 164, 102, 0.4) 88%, transparent) top / 100% 1px no-repeat; }
.inspector .insp-group-title { color: #efe5cf; font-family: var(--font-panel); font-size: 17px; font-weight: 700; }
.inspector .insp-group > summary::after { border-color: var(--amp-gold); }
.inspector .insp-actions { background: linear-gradient(90deg, transparent, rgba(201, 164, 102, 0.4) 12%, rgba(201, 164, 102, 0.4) 88%, transparent) top / 100% 1px no-repeat; }

/* fields: recessed into the plate */
.inspector :is(input[type='text'], .select, .time-input, .mini-num, .stepper, .field-label select) {
  border-color: var(--amp-edge);
  background: var(--amp-recess);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.05);
}
.inspector :is(.ab, .trainer-body, .cycle) {
  border-color: var(--amp-edge);
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04);
}
.inspector .step { border-color: var(--amp-edge); background: var(--amp-raised); box-shadow: var(--amp-lift); }
.inspector .step:hover { background: var(--amp-raised-hover); }

/* switches: a recessed slot with a chrome ball that lights up amber when on */
.inspector .switch-track { border-color: var(--amp-edge); background: var(--amp-recess); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8); }
.inspector .switch-thumb { background: radial-gradient(circle at 35% 30%, #f3efe7, #9c968c 60%, #5d5852); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.inspector .switch input:checked + .switch-track { border-color: #a5651a; background: #3a2a14; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 8px rgba(230, 164, 71, 0.3); }
.inspector .switch input:checked + .switch-track .switch-thumb { background: var(--amp-jewel); }

/* sliders: a recessed track, a cream knob */
.inspector input[type='range']::-webkit-slider-runnable-track { background: linear-gradient(90deg, #d08d36 var(--p), var(--amp-recess) var(--p)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); }
.inspector input[type='range']::-moz-range-track { background: var(--amp-recess); }
.inspector input[type='range']::-moz-range-progress { background: #d08d36; }
.inspector input[type='range']::-webkit-slider-thumb { background: radial-gradient(circle at 40% 35%, #f4ebd7, #cdbf9f 60%, #8f846f); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6); }
.inspector input[type='range']::-moz-range-thumb { background: radial-gradient(circle at 40% 35%, #f4ebd7, #cdbf9f 60%, #8f846f); }

/* buttons: secondary ones raised; Start is an amber button ringed in gold */
.inspector .btn:not(.primary):not(.ghost), .library .panel-head .btn:not(.ghost) { border-color: var(--amp-edge); background: var(--amp-raised); box-shadow: var(--amp-lift); }
.inspector .btn:not(.primary):not(.ghost):hover:not(:disabled) { background: var(--amp-raised-hover); }
.inspector .btn.primary {
  margin: 4px;
  border-color: #6e4a17;
  border-radius: 999px;
  background: linear-gradient(180deg, #f6c272, #d9953a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 #5a3c12, 0 0 0 3px #15120f, 0 0 0 4px var(--amp-gold);
}
.inspector .btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #f9cd85, #e0a047); }

/* ---------- toasts, drop overlay, dialogs ---------- */

.toasts { position: fixed; bottom: 24px; left: 50%; z-index: 60; display: grid; justify-items: center; gap: 8px; width: min(92vw, 480px); transform: translateX(-50%); pointer-events: none; }
.toast {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-quiet);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-size: 14px;
  transition: opacity var(--ease), transform var(--ease);
}
.toast.ok { border-left-color: var(--denim); }
.toast.warn { border-left-color: var(--amber); }
.toast.error { border-left-color: var(--danger); }
.toast.out { opacity: 0; transform: translateY(6px); }

.drop-overlay { position: fixed; inset: 12px; z-index: 70; display: none; place-items: center; border: 2px dashed var(--amber); border-radius: 20px; background: rgba(20, 20, 20, 0.9); pointer-events: none; }
.drop-overlay span { font: 400 44px/1.2 var(--font-brand); font-synthesis: none; color: var(--text); }
body.is-dropping .drop-overlay { display: grid; }

.sheet {
  width: min(92vw, 500px);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background-color: var(--surface);
  background-image: var(--panel-bg);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.6); }
.sheet h2 { margin: 0 0 16px; font: 400 26px/1.2 var(--font-brand); font-synthesis: none; }
.keys { display: grid; margin: 0 0 20px; }
.keys div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--divider); }
.keys dt { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; color: var(--text-muted); font-size: 14px; }
.keys dd { margin: 0; font-size: 15px; }
#shortcuts form { display: flex; justify-content: flex-end; }
.sheet-note { margin: 0 0 16px; color: var(--text-muted); font-size: 15px; }

/* ---------- tuner (opened from the header on every page) ---------- */

.sheet.tuner { width: min(94vw, 540px); }
.tuner-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; }
.tuner-head h2 { margin: 0; outline: none; }
.tuner-tuning { width: auto; min-width: 190px; }
.tuner-dial {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 22px 24px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--stage-bg);
}
.tuner-meter { width: 100%; margin-bottom: 8px; }
/* −50…+50 cents: a tick every 5, taller ones every 25, and the ±3 cent "in tune" zone in the middle */
.tuner-track {
  position: relative;
  height: 44px;
  border-radius: var(--radius-small);
  background:
    linear-gradient(90deg, rgba(232, 220, 196, 0.42) 1px, transparent 1px) 0 0 / 25% 100% repeat-x,
    linear-gradient(90deg, rgba(232, 220, 196, 0.16) 1px, transparent 1px) 0 50% / 5% 40% repeat-x,
    var(--on-stage);
  box-shadow: inset -1px 0 0 rgba(232, 220, 196, 0.42), inset 0 0 0 1px var(--on-stage-line);
}
.tuner-zone { position: absolute; top: 0; bottom: 0; left: 47%; width: 6%; background: var(--denim-tint); }
.tuner-needle {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--ivory);
  box-shadow: 0 0 0 2px rgba(15, 13, 11, 0.7);
  transition: left 90ms linear, background-color var(--ease);
}
.tuner-dial[data-state='idle'] .tuner-needle, .tuner-dial[data-state='error'] .tuner-needle { background: var(--text-quiet); opacity: 0.5; }
.tuner-ticks { position: relative; height: 18px; margin-top: 6px; color: var(--text-quiet); font-size: 12px; font-weight: 600; }
.tuner-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.tuner-ticks span:nth-child(1) { left: 0; transform: none; }
.tuner-ticks span:nth-child(2) { left: 25%; }
.tuner-ticks span:nth-child(3) { left: 50%; }
.tuner-ticks span:nth-child(4) { left: 75%; }
.tuner-ticks span:nth-child(5) { right: 0; transform: none; }
.tuner-readout { display: grid; justify-items: center; gap: 4px; }
.tuner-note { display: flex; align-items: baseline; gap: 2px; min-height: 64px; color: var(--text); }
.tuner-note b { font: 600 64px/1 var(--font-ui); letter-spacing: -0.02em; }
.tuner-note sub { color: var(--text-quiet); font-size: 22px; font-weight: 600; vertical-align: baseline; }
.tuner-cents { min-height: 20px; color: var(--text-muted); font-size: 14px; font-weight: 500; }
.tuner-hint { min-height: 24px; margin: 4px 0 0; color: var(--text); font-size: 16px; font-weight: 600; text-align: center; }
.tuner-dial[data-state='idle'] .tuner-hint, .tuner-dial[data-state='error'] .tuner-hint { color: var(--text-muted); font-weight: 500; }
/* In tune: the needle, the note and the zone turn green; the words say it too. */
.tuner-dial[data-state='in-tune'] .tuner-needle { background: var(--good); }
.tuner-dial[data-state='in-tune'] .tuner-zone { background: var(--good-tint); box-shadow: inset 0 0 0 1px var(--good), 0 0 14px rgba(124, 198, 143, 0.45); }
.tuner-dial[data-state='in-tune'] .tuner-note b, .tuner-dial[data-state='in-tune'] .tuner-hint { color: var(--good); }
.tuner-retry { margin-top: 4px; }

.tuner-strings { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.tuner-string {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  height: 56px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--field);
  color: var(--text-muted);
  line-height: 1.1;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.tuner-string b { font-size: 18px; font-weight: 600; }
.tuner-string small { color: var(--text-quiet); font-size: 11px; font-weight: 600; }
.tuner-string:hover { background: var(--surface-raised); color: var(--text); }
.tuner-string.is-target { border-color: var(--denim); background: var(--surface-raised); color: var(--text); }
.tuner-string[aria-pressed='true'] { border-color: var(--denim); background: #24292c; color: var(--text); box-shadow: inset 0 0 0 1px var(--denim); }
/* Tuned: a green border, a soft green glow and a tick in the corner. */
.tuner-string.is-tuned { border-color: var(--good); color: var(--text); box-shadow: 0 0 0 1px var(--good), 0 0 14px rgba(124, 198, 143, 0.35); }
.tuner-string.is-tuned::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 8px;
  width: 5px;
  height: 9px;
  border: solid var(--good);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.tuner-mode { min-height: 20px; margin: 10px 0 0; color: var(--text-quiet); font-size: 13px; text-align: center; }
.tuner-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--divider); }
.tuner-ref { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 14px; font-weight: 500; }
.tuner-ref .stepper { width: 150px; height: 40px; }
.tuner-chime { min-height: 40px; margin-left: auto; }
.field-error { min-height: 1.5em; margin: 6px 0 12px; color: var(--danger); font-size: 14px; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- responsive ---------- */

@media (max-width: 1280px) {
  .layout { grid-template-columns: 284px minmax(0, 1fr); }
  .library { grid-row: span 2; }
  .inspector { position: static; grid-column: 2; }
  .panel.inspector { position: relative; }
  .insp-body { grid-template-columns: 1fr 1fr; align-items: start; }
  .insp-body > .field:first-child, .ab-grid, .cycle, .insp-body > .trainer { grid-column: 1 / -1; }
  .insp-actions { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* The header gives up words as it narrows, least-used first: the video page's buttons, the tab icons, then
   short tab names, the wordmark, the Tuner's label. Icon-only buttons keep their name for screen readers
   (aria-label) and as a tooltip. The video page has the most buttons, so it starts sooner. */
@media (max-width: 1600px) {
  .topbar-actions:has(#yt-btn) #shortcuts-btn, #yt-btn, #open-btn { width: var(--control); padding: 0; }
  .topbar-actions:has(#yt-btn) #shortcuts-btn .btn-text, #yt-btn .btn-text, #open-btn .btn-text { display: none; }
}
@media (max-width: 1280px) {
  .modes a [data-icon] { display: none; }
  .modes a { padding: 0 14px; }
}
@media (max-width: 1180px) {
  .topbar-actions:has(#yt-btn) #tuner-btn { width: var(--control); padding: 0; }
  .topbar-actions:has(#yt-btn) #tuner-btn .btn-text { display: none; }
  .modes .tab-long { display: none; }
  .modes .tab-short { display: inline; }
}
@media (max-width: 1040px) {
  .wordmark { display: none; }
}
@media (max-width: 700px) {
  .modes a { padding: 0 9px; }
}
@media (max-width: 620px) {
  .modes a { padding: 0 6px; }
}
@media (max-width: 640px) {
  #tuner-btn { width: var(--control); padding: 0; }
  #tuner-btn .btn-text { display: none; }
}
@media (max-width: 420px) {
  .topbar:has(#yt-btn) .wordmark { display: none !important; }
}

@media (max-width: 860px) {
  .topbar { height: 60px; padding: 0 16px; background-position: 0 100%, -147px 50%, 0 0; }
  #shortcuts-btn { display: none; }
  .modes { margin-left: 8px; }
  .layout { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 32px; }
  .library { position: static; grid-row: auto; max-height: none; order: 3; }
  .panel.library { position: relative; }
  .inspector { grid-column: auto; }
  .insp-body, .insp-actions { grid-template-columns: 1fr; }
  .hud-hint { display: none; }
  .video-title { font-size: 26px; }
}

@media (max-width: 560px) {
  /* The mode tabs get their own full-width row under the logo and actions. */
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 16px 12px; row-gap: 10px; background-position: 0 100%, -147px -52px, 0 0; }
  .brand { display: contents; }
  .brand-home { order: 1; }
  .topbar-actions { order: 2; }
  .modes { order: 3; flex: 1 0 100%; margin: 0; }
  .modes a { flex: 1; justify-content: center; padding: 0 6px; font-size: 13px; }
  .modes a [data-icon] { display: none; }
  .wordmark { display: inline; font-size: 21px; }
  .topbar-actions .btn-text { display: none; }
  .topbar-actions .btn { width: var(--control); padding: 0; }
  .dock { flex-direction: column; align-items: stretch; gap: 12px; }
  .transport { flex-wrap: wrap; row-gap: 8px; }
  .ab-grid, .two-col { grid-template-columns: 1fr; }
  .ws-title-row { flex-wrap: wrap; row-gap: 2px; }
}