/* Bluesify — "midnight stage" theme.
   A dark stage around a cream sheet of paper: the score stays black-on-cream
   like real notation, while the chrome recedes into warm charcoal with brass
   accents. Fraunces carries the lettering (brand, headings, chord names);
   Inter does the quiet UI work. */

:root {
  color-scheme: dark;

  --bg: oklch(0.185 0.016 265);
  --surface: oklch(0.225 0.018 265);
  --panel: oklch(0.26 0.02 265);
  --panel-strong: oklch(0.305 0.022 265);
  --ink: oklch(0.93 0.01 85);
  --muted: oklch(0.71 0.02 80);
  --quiet: oklch(0.57 0.018 80);
  --line: oklch(0.315 0.018 265);
  --line-strong: oklch(0.43 0.02 265);

  --brass: oklch(0.74 0.115 78);
  --brass-strong: oklch(0.8 0.125 82);
  --brass-ink: oklch(0.23 0.04 78);
  --brass-soft: oklch(0.3 0.045 78);

  --primary: var(--brass);
  --primary-ink: var(--brass-ink);
  --practice: oklch(0.72 0.09 235);
  --practice-soft: oklch(0.3 0.045 245);
  --warning: oklch(0.72 0.13 65);
  --error: oklch(0.7 0.14 25);

  --paper: oklch(0.972 0.009 90);
  --paper-edge: oklch(0.88 0.015 90);

  --font-display: Fraunces, Georgia, "Times New Roman", serif;
  --radius: 8px;
  --radius-lg: 14px;
  --tap: 44px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-sticky: 10;
  --z-toast: 30;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 50% -20%, oklch(0.24 0.03 275 / 0.9), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button,
select,
input {
  font: inherit;
}

button,
label.primary-action {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
select:focus-visible,
label.primary-action:focus-within,
input[type="range"]:focus-visible {
  outline: 2px solid var(--brass-strong);
  outline-offset: 2px;
}

.app-shell {
  height: 100dvh;
  min-height: 640px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding:
    env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.workbar {
  position: relative;
  z-index: var(--z-sticky);
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--brass-strong), oklch(0.6 0.11 70));
  color: var(--brass-ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.35),
    0 2px 8px oklch(0 0 0 / 0.4);
}

.brand-block h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.brand-block p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34ch;
}

.session-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.session-meta span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: oklch(0 0 0 / 0.18);
}

.source-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.primary-action,
.secondary-action {
  min-height: var(--tap);
  border-radius: var(--radius);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease),
    transform 180ms var(--ease), box-shadow 180ms var(--ease);
}

.primary-action {
  color: var(--primary-ink);
  background: linear-gradient(180deg, var(--brass-strong), var(--brass));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.3), 0 2px 10px oklch(0 0 0 / 0.35);
}

.primary-action:hover {
  background: linear-gradient(180deg, oklch(0.84 0.125 84), var(--brass-strong));
}

.secondary-action {
  color: var(--ink);
  background: transparent;
  border-color: var(--line-strong);
}

.secondary-action:hover {
  border-color: var(--brass);
  background: oklch(1 0 0 / 0.04);
}

.primary-action:active,
.secondary-action:active,
.play:active,
.icon-button:active {
  transform: translateY(1px);
}

.workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 14px;
  padding: 14px 16px;
}

.score-workbench {
  min-width: 0;
  min-height: 0;
  display: grid;
  /* The implicit column would be an `auto` track, whose minimum is min-content
     — a score wider than the pane then widened the whole shell instead of
     scrolling inside .paper. Pin the column floor to 0 like .workspace does. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

.score-toolbar {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.analysis-strip {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.analysis-strip::-webkit-scrollbar { display: none; }

.metric {
  min-width: 88px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 6px 16px 6px 12px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.metric:first-child { border-left: 0; padding-left: 2px; }

.metric span {
  color: var(--quiet);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.metric strong {
  min-width: 0;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric-wide {
  min-width: 220px;
  flex: 1;
}

.metric-wide strong { color: var(--muted); font-weight: 500; }

.toast {
  margin: 0;
  flex: none;
  max-width: 28ch;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--error), transparent 55%);
  background: color-mix(in oklch, var(--error), transparent 88%);
  color: var(--error);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.ok {
  color: var(--brass-strong);
  border-color: color-mix(in oklch, var(--brass), transparent 55%);
  background: color-mix(in oklch, var(--brass), transparent 90%);
}

.view-actions {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-actions .icon-button[aria-pressed="true"] {
  color: var(--brass-strong);
  border-color: color-mix(in oklch, var(--brass), transparent 45%);
  background: var(--brass-soft);
}

#fullscreenBtn .ic-compress { display: none; }
body.is-fullscreen #fullscreenBtn .ic-expand { display: none; }
body.is-fullscreen #fullscreenBtn .ic-compress { display: block; }
/* Collapse instead of display:none so the app-shell grid keeps its
   row order (display:none would shift the footer into the 1fr row). */
body.is-fullscreen .workbar {
  min-height: 0;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
  overflow: hidden;
}

body.notes-hidden .workspace {
  grid-template-columns: minmax(0, 1fr);
}

body.notes-hidden .practice-notes {
  display: none;
}

.score-stage {
  /* As a grid item this defaults to min-width:auto, so a score wider than the
     pane pushes the whole shell sideways instead of scrolling inside .paper.
     That put the toolbar buttons off-screen in iPad Split View. */
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.paper {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding-inline: 30px;
  overflow: auto;
  color-scheme: light;
  border: 1px solid oklch(0 0 0 / 0.5);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, oklch(1 0.005 95 / 0.7), transparent 90px),
    var(--paper);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.9),
    0 1px 2px oklch(0 0 0 / 0.4),
    0 12px 40px -12px oklch(0 0 0 / 0.55);
  -webkit-overflow-scrolling: touch;
}

.osmd {
  position: relative;
  min-height: 100%;
  /* No horizontal padding: OSMD lays the sheet out to this element's
     clientWidth, which includes padding, while the SVG can only occupy the
     content box. Any side padding therefore made the SVG overflow and get
     scaled down by `max-width`, and OSMD's cursor - positioned in unscaled
     model pixels - drifted further right the further into a system it got.
     The breathing room lives on .paper instead. */
  padding: 26px 0 40px;
  /* Bars are tappable (play from here). Suppress the iPadOS selection callout
     and double-tap zoom, but keep one- and two-finger panning of the sheet. */
  cursor: pointer;
  touch-action: pan-x pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.osmd svg { max-width: 100%; }

/* OSMD draws its playhead as a ~30px band, wide enough to sit over the
   neighbouring notes. Squeeze it about its own centre - OSMD computes `left`
   from the note position and the untransformed width, so scaling (rather than
   setting a width) keeps it centred on the notehead it marks. */
.osmd img[id^="cursorImg"] {
  transform: scaleX(0.5);
}

/* In-score annotations (positioned from OSMD measure geometry). Lives in
   .paper so OSMD re-renders cannot wipe it; scrolls with the score. The
   paper is always light, so these colors are fixed, not themed. */
.score-overlays {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.bar-highlight {
  position: absolute;
  border: 1px solid rgb(201 151 63 / 0.55);
  border-radius: 6px;
  background: rgb(201 151 63 / 0.12);
  transition: left 200ms var(--ease), top 200ms var(--ease),
    width 200ms var(--ease), height 200ms var(--ease);
}

.bar-note-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgb(185 135 52 / 0.85);
}

.empty,
.loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 32px;
  color: oklch(0.5 0.02 80);
}

.empty::before {
  content: "\266D";
  font-family: var(--font-display);
  font-size: 130px;
  line-height: 1;
  color: oklch(0.83 0.03 85);
  margin-bottom: 4px;
}

.empty-title {
  margin: 0;
  max-width: 34ch;
  color: oklch(0.3 0.02 80);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.empty-sub {
  margin: 10px 0 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}

.loading {
  gap: 12px;
  background: color-mix(in oklch, var(--paper), transparent 6%);
}

.loading span {
  color: oklch(0.45 0.02 80);
  font-size: 14px;
  font-weight: 600;
}

.skeleton-line,
.skeleton-staff {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--paper-edge),
    oklch(0.94 0.01 90),
    var(--paper-edge)
  );
  background-size: 180% 100%;
  animation: shimmer 1.2s linear infinite;
}

.skeleton-line { width: 260px; }
.skeleton-line.wide { width: 320px; max-width: 70vw; }
.skeleton-staff { width: 460px; max-width: 80vw; height: 58px; }
.skeleton-staff.short { width: 390px; max-width: 70vw; }

@keyframes shimmer {
  to { background-position: -180% 0; }
}

.practice-notes {
  min-height: 0;
  display: grid;
  /* head / nav / compare panel (collapses when hidden) / scrolling note list */
  grid-template-rows: auto auto auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 8px 30px -14px oklch(0 0 0 / 0.5);
}

.notes-head {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.panel-label {
  margin: 0 0 5px;
  color: var(--brass);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.notes-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.005em;
}

.dec-count {
  flex: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.note-nav {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

.compare-button {
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 12px;
  color: var(--ink);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.compare-button:hover:not(:disabled) {
  border-color: var(--brass);
  background: oklch(1 0 0 / 0.04);
}

.compare-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.icon-button {
  width: var(--tap);
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.icon-button:hover:not(:disabled) {
  border-color: var(--brass);
  background: oklch(1 0 0 / 0.04);
}

.icon-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.icon-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.teacher-list {
  min-height: 0;
  overflow: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}

.compare-panel {
  max-height: 34dvh;
  overflow: auto;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: oklch(0 0 0 / 0.18);
  -webkit-overflow-scrolling: touch;
}

.compare-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.compare-row:last-child {
  border-bottom: 0;
}

.compare-row strong {
  grid-row: 1 / span 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--brass-ink);
  background: var(--brass);
  font-size: 12px;
}

.compare-row span,
.compare-row p {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}

.compare-row span {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.compare-row p {
  color: var(--muted);
}

.compare-row div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.compare-row em {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--brass-strong);
  background: var(--brass-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.teacher-hint {
  margin: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.card {
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  padding: 12px;
  background: var(--panel);
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}

.card.active {
  border-color: var(--line-strong);
  border-left-color: var(--brass);
  background: var(--panel-strong);
}

.card:not(.active) {
  cursor: pointer;
}

.card:not(.active):hover {
  border-color: var(--line-strong);
}

.card:not(.active) .rationale {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}

.card:not(.active) .tags,
.card:not(.active) .tips {
  display: none;
}

.card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.bar-no {
  flex: none;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--brass-strong);
  background: var(--brass-soft);
  font-size: 12px;
  font-weight: 700;
}

.chord {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.rationale {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.55;
}

.card:not(.active) .rationale {
  color: var(--muted);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.tag {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--brass-strong);
  background: var(--brass-soft);
  font-size: 12px;
  font-weight: 600;
}

.tips {
  margin: 0;
  padding: 9px 10px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: var(--radius);
  background: oklch(0 0 0 / 0.22);
}

.tips li {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.tips li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 8px 1px 0;
  border-radius: 999px;
  display: inline-block;
  background: var(--brass);
}

.practice-strip {
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: oklch(0 0 0 / 0.16);
}

.score-position {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--quiet);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.score-position output {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loop-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

.loop-controls label {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
}

.loop-controls input[type="number"] {
  width: 54px;
  min-height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 6px;
  color: var(--ink);
  background: oklch(0 0 0 / 0.2);
  font-variant-numeric: tabular-nums;
}

.loop-toggle {
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}

.loop-toggle input {
  accent-color: var(--brass);
}

.transport {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 250px;
}

.play {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--brass-ink);
  background: linear-gradient(160deg, var(--brass-strong), oklch(0.62 0.11 72));
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.35),
    0 4px 16px -4px oklch(0.74 0.115 78 / 0.5);
  transition: background-color 180ms var(--ease), transform 180ms var(--ease),
    opacity 180ms var(--ease), box-shadow 180ms var(--ease);
}

.play:hover:not(:disabled):not(.playing) {
  background: linear-gradient(160deg, oklch(0.84 0.125 84), var(--brass));
}

.play:disabled {
  opacity: 0.3;
  cursor: default;
  box-shadow: none;
}

.play svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.play .ic-pause { display: none; }
.play.playing .ic-play { display: none; }
.play.playing .ic-pause { display: block; }

.play.playing {
  background: linear-gradient(160deg, oklch(0.78 0.09 235), oklch(0.62 0.1 240));
  color: oklch(0.18 0.03 245);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.35),
    0 4px 20px -4px oklch(0.72 0.09 235 / 0.55);
}

.play.playing:hover {
  background: linear-gradient(160deg, oklch(0.83 0.09 233), oklch(0.68 0.1 238));
}

.tempo {
  min-width: 170px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px 10px;
}

.tempo label {
  color: var(--quiet);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tempo output {
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--line-strong);
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid var(--bg);
  background: var(--brass);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 3px solid var(--bg);
  background: var(--brass);
  cursor: pointer;
}

.levels {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.levels::-webkit-scrollbar { display: none; }

.level {
  min-height: 58px;
  min-width: 112px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  padding: 8px 9px;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease),
    transform 180ms var(--ease);
}

.level:hover:not(.locked) {
  border-color: var(--line-strong);
  background: var(--panel);
}

.level.active {
  border-color: color-mix(in oklch, var(--brass), transparent 35%);
  background: var(--brass-soft);
}

.level.locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.lv-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.lv-no {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--panel-strong);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.level.active .lv-no {
  color: var(--brass-ink);
  background: var(--brass);
}

.level.locked .lv-no {
  color: var(--quiet);
  background: var(--panel);
}

.lv-name {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lv-soon {
  margin-left: auto;
  color: var(--quiet);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lv-blurb {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.arrange-controls {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
}

.sample-credit {
  grid-column: 1 / -1;
  margin: -3px 0 0;
  color: var(--quiet);
  font-size: 9px;
  line-height: 1.35;
}

.sample-credit a {
  color: var(--muted);
}

/* ---------- arrangement settings ----------
   Three field types (segmented, menu, switch) sharing one --tap-tall baseline
   and one corner radius, so the row reads as a single instrument panel rather
   than a line of native form widgets. Every hit target clears 44px. */

.control-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.field-label {
  color: var(--quiet);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.segmented {
  height: var(--tap);
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: oklch(0 0 0 / 0.22);
}

.segment {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 15px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms var(--ease), background-color 180ms var(--ease);
}

.segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* The pill sits inset inside the track, but the tap area should still cover the
   full 44px control height. */
.segment::before {
  content: "";
  position: absolute;
  inset: -4px 0;
}

.segment:has(input:checked) {
  color: var(--ink);
  background: var(--panel-strong);
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.35);
}

.segment:has(input:focus-visible) {
  outline: 2px solid var(--brass-strong);
  outline-offset: 2px;
}

select {
  height: var(--tap);
  max-width: 168px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--ink);
  background:
    oklch(0 0 0 / 0.22)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23a89f8d' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E")
    no-repeat right 13px center;
  padding: 0 36px 0 13px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 180ms var(--ease);
}

select:hover:not(:disabled) {
  border-color: var(--line-strong);
}

select:disabled {
  opacity: 0.5;
  cursor: default;
}

.switch-row {
  height: var(--tap);
  display: flex;
  align-items: center;
  gap: 8px;
}

.switch-chip {
  height: var(--tap);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: oklch(0 0 0 / 0.22);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms var(--ease), border-color 180ms var(--ease),
    background-color 180ms var(--ease);
}

.switch-chip:has(input:checked) {
  color: var(--ink);
  border-color: color-mix(in oklch, var(--brass), transparent 45%);
  background: var(--brass-soft);
}

.switch-chip:has(input:disabled) {
  opacity: 0.4;
  cursor: default;
}

.switch-chip:has(input:focus-visible) {
  outline: 2px solid var(--brass-strong);
  outline-offset: 2px;
}

/* The switch is drawn on the checkbox itself: track from the box, knob from
   ::after, so there is no extra element to keep in sync with :checked. */
.switch-chip input[type="checkbox"] {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  cursor: inherit;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}

.switch-chip input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--muted);
  transition: transform 200ms var(--ease), background-color 200ms var(--ease);
}

.switch-chip input[type="checkbox"]:checked {
  border-color: var(--brass);
  background: var(--brass);
}

.switch-chip input[type="checkbox"]:checked::after {
  transform: translateX(16px);
  background: var(--brass-ink);
}

body.dragging .paper {
  border-color: var(--brass);
  outline: 3px solid color-mix(in oklch, var(--brass), transparent 45%);
  outline-offset: -8px;
}

/* Seating the transport, five level cards and the arrange controls on one line
   needs ~1590px. Below that the level cards are the ones that give — they are
   in a scroller, so they silently clip instead of wrapping, which on iPad Pro
   landscape (1366px) hid two of the five. Give them their own full-width row
   for the whole tablet/laptop range. */
@media (max-width: 1600px) {
  .practice-strip {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .score-position {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .levels {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .transport {
    grid-column: 1;
    grid-row: 3;
  }

  .arrange-controls {
    grid-column: 2;
    grid-row: 3;
    justify-content: flex-end;
  }
}

@media (max-width: 1180px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 10px;
    padding: 10px;
  }

  .metric-wide {
    display: none;
  }

  .toast {
    max-width: 20ch;
  }
}

@media (max-width: 900px) {
  .app-shell {
    min-height: 720px;
  }

  .workbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .session-meta {
    display: none;
  }

  .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(190px, 34dvh);
  }

  body.notes-hidden .workspace {
    grid-template-rows: minmax(0, 1fr);
  }

  .metric-wide {
    display: grid;
  }

  .practice-notes {
    min-height: 190px;
  }

  .notes-head {
    min-height: 62px;
    padding: 12px 14px;
  }

  .note-nav {
    padding: 8px 14px;
  }
}

@media (max-width: 720px) {
  body {
    overflow: auto;
  }

  .app-shell {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: auto auto auto;
  }

  .workbar {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 12px;
  }

  .source-actions {
    justify-content: stretch;
  }

  .source-actions > * {
    flex: 1;
  }

  .workspace {
    min-height: 760px;
    grid-template-rows: 520px 300px;
    padding: 10px;
  }

  body.notes-hidden .workspace {
    min-height: 540px;
    grid-template-rows: 520px;
  }

  /* Side padding stays off .osmd at every width - see the note on the base
     rule; the sheet's horizontal inset belongs to .paper. */
  .osmd {
    padding: 16px 0 28px;
  }

  .paper {
    padding-inline: 14px;
  }

  .practice-strip {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .score-position {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .loop-controls {
    margin-left: 0;
    flex-wrap: wrap;
  }

  .transport,
  .arrange-controls {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
  }

  .transport {
    justify-content: space-between;
  }

  .tempo {
    flex: 1;
  }

  .arrange-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
  }

  /* Both switches on one line would overflow a phone column. */
  .switch-field {
    grid-column: 1 / -1;
  }

  .switch-chip {
    flex: 1;
    justify-content: space-between;
  }

  .segmented {
    display: flex;
  }

  .segment {
    flex: 1;
  }

  select {
    width: 100%;
    max-width: none;
  }

  .levels {
    grid-template-columns: repeat(5, minmax(118px, 1fr));
  }
}

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