/* 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.72 0.018 80);
  --line: oklch(0.315 0.018 265);
  --line-strong: oklch(0.58 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: 12px;
  --control-h: 56px;
  --lcd: oklch(0.15 0.012 265);
  --lcd-ink: oklch(0.86 0.09 80);
  --font-mono: "JetBrains Mono", monospace;
  --radius-lg: 14px;
  --tap: 44px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-sticky: 10;
}

* { 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:focus-visible,
.card:focus-visible,
a:focus-visible {
  outline: 2px solid var(--brass-strong);
  outline-offset: 2px;
}

.app-shell {
  height: 100dvh;
  min-height: 0;
  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(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
  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-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.app-version {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.brand-block p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  max-width: 34ch;
}

.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 {
  position: relative;
  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 input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.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) 314px;
  gap: 12px;
  padding: 8px 12px;
}

.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: 8px;
}

.score-toolbar {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

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

.view-actions .pad[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;
}

/* A lifted Intro box may rise into the top padding above the first system. */
.osmd svg { max-width: 100%; overflow: visible; }

/* 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 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  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;
  letter-spacing: 0;
  text-transform: none;
}

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

.compare-button {
  min-height: var(--tap);
  min-width: var(--tap);
  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: var(--tap);
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.notes-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.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 {
  grid-row: 4;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}

.compare-panel {
  grid-row: 3;
  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;
}

.practice-notes:has(.compare-panel:not([hidden])) {
  grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1fr);
}

.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;
}

.focus-card {
  flex: none;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--panel-strong);
}

.focus-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
}

.focus-card p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.focus-card .focus-listen {
  color: var(--muted);
}

.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.skipped {
  background: var(--surface);
  border-left-color: var(--muted);
}

.card.skipped .chord,
.card.skipped .rationale {
  color: var(--muted);
}

.device-name {
  margin: 12px 0 6px;
  color: var(--muted);
  font-size: 13px;
}

.card[data-device-id] .card-top {
  flex-direction: column;
  align-items: flex-start;
}

.device-unavailable {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.device-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.device-actions button {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}

.device-toggle[aria-pressed="true"] {
  color: var(--brass-strong);
  border-color: var(--brass);
}

.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: minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: oklch(0 0 0 / 0.16);
}

.transport {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.play {
  width: 64px;
  height: 64px;
  flex: none;
  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));
}

input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: var(--tap);
  margin: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--line-strong);
}

input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--line-strong);
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  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 {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.level {
  height: 48px;
  min-height: 48px;
  min-width: 0;
  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;
  overflow-wrap: normal;
  hyphens: manual;
}

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

.tool-dialog {
  width: min(560px, calc(100% - 24px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overscroll-behavior: contain;
}

.tool-dialog::backdrop {
  background: rgb(0 0 0 / 0.6);
}

.sample-credit {
  margin: 0;
  padding: 16px 0 0;
  color: var(--quiet);
  font-size: 12px;
  line-height: 1.5;
}

.sample-credit a {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.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 {
  min-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;
  min-height: var(--tap);
  flex: 1;
  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;
}

.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);
  width: 100%;
  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-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;
}

@media (max-width: 1180px) {

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

@media (orientation: portrait), (max-width: 900px), (max-height: 700px) {
  .workspace {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
  }

  .practice-notes {
    position: absolute;
    z-index: 20;
    inset: auto 12px 8px;
    width: min(560px, calc(100% - 24px));
    height: min(64dvh, 560px);
    max-height: calc(100% - 52px);
    margin-left: auto;
    border-color: var(--line-strong);
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.45);
  }

  .paper { padding-inline: 18px; }
  .osmd { padding: 24px 0 28px; }
}

@media (max-width: 740px) {
  .workbar { padding: 8px 12px; gap: 8px; }
  .brand-mark { display: none; }
  .source-actions { gap: 6px; }
  .source-actions > * { padding-inline: 10px; }
  .score-toolbar { gap: 6px; }
  .practice-strip { gap: 6px 10px; }
  .transport { gap: 8px; }
  .level { padding: 6px; }
  .lv-row { flex-wrap: wrap; gap: 4px; }
}

@media (max-width: 540px) {
  .workbar { grid-template-columns: minmax(0, 1fr); }
  .brand-block p { max-width: none; }
  .source-actions { justify-content: stretch; }
  .source-actions > * { flex: 1; }
  .practice-strip { grid-template-columns: minmax(0, 1fr); }
  /* Five pads in one row leave ~55px per name; "Anticipation" needs ~80px. */
  .levels { grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .lv-name { font-size: 11px; }
  .analysis-strip { width: 100%; }
  .analysis-strip .lcd-cell { flex: 1 1 auto; min-width: 0; padding-inline: 7px; }
  .analysis-strip .lcd-cell strong, .analysis-strip .lcd-cell output { font-size: 17px; }
  .notes-head { padding: 10px; gap: 8px; }
  .notes-head h2 { font-size: 18px; }
}

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

.practice-actions { display: flex; gap: 8px; }
.practice-dialog { width: min(420px, calc(100% - 24px)); max-height: calc(100dvh - 48px); margin: auto 12px auto auto; overflow-y: auto; }
.practice-options { display: grid; gap: 12px; padding: 16px; }
.practice-options .switch-chip { justify-content: space-between; min-height: var(--tap); }
.practice-options .switch-chip:has(input:disabled) { opacity: 1; }
.practice-options .switch-chip:has(input:disabled) input { opacity: 0.5; }
.score-toolbar > .segmented { flex-shrink: 0; }
#compingMix { display: grid; gap: 10px; }
#compingMix[hidden], #soloMix[hidden] { display: none; }
.play-comping { border-color: var(--brass-strong); background: var(--panel-strong); }
.track-mix { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.track-mix legend { margin-bottom: 8px; }
.practice-hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 740px) {
  .practice-actions { gap: 6px; }
  .practice-actions button { padding-inline: 10px; }
}
@media (max-width: 540px) {
  .practice-actions { grid-column: 2; }
  /* Sit above the docked practice strip; app.js keeps --dock-height current. */
  .practice-dialog { margin-bottom: var(--dock-height, 218px); max-height: calc(100dvh - var(--dock-height, 218px) - 24px); }
}

.tunes-dialog { width: min(660px, calc(100% - 32px)); padding: 24px; }
.tunes-heading { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.tunes-heading h2 { margin: 0; font-family: var(--font-display); font-size: 24px; }
.save-tune { margin-top: 24px; padding-block: 16px; border-block: 1px solid var(--line-strong); }
.save-tune-row, .my-library-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.save-tune-row strong { min-width: 0; overflow-wrap: anywhere; }
.save-tune-row button { flex-shrink: 0; }
.save-tune p, #myLibraryStatus { margin: 12px 0 0; color: var(--ink); font-size: 14px; line-height: 1.6; }
.my-library { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line-strong); }
.my-library-heading { margin-bottom: 12px; }
.my-library-heading h3 { margin: 0; font-size: 18px; }
#myLibraryUsage { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.saved-tune { display: flex; align-items: center; gap: 12px; padding-block: 12px; border-top: 1px solid var(--line); }
.saved-tune-open { display: grid; gap: 6px; flex: 1; min-width: 0; min-height: var(--tap); padding: 8px; border: 0; border-radius: 6px; text-align: left; color: var(--ink); background: transparent; cursor: pointer; }
.saved-tune-open:hover { background: var(--panel); }
.saved-tune-open strong { font-size: 16px; overflow-wrap: anywhere; }
.saved-tune-open span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.saved-tune-actions { display: flex; gap: 8px; }
.rename-tune { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; width: 100%; }
.rename-tune label { display: grid; gap: 8px; flex: 1 1 100%; font-size: 14px; }
.rename-tune input { width: 100%; min-width: 0; min-height: var(--tap); padding: 8px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); background: var(--bg); }
.tunes-tabs { display: flex; gap: 8px; margin: 24px 0 16px; border-bottom: 1px solid var(--line-strong); }
.tunes-tabs button { min-height: 48px; padding: 12px 16px; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.tunes-tabs [aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px var(--brass); }
.tunes-intro { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.tune-list { display: grid; gap: 10px; }
.tune-choice, .lesson-choice { display: grid; gap: 7px; width: 100%; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); text-align: left; background: var(--panel); color: var(--ink); cursor: pointer; }
.tune-choice:hover, .lesson-choice:hover { background: var(--panel-strong); }
.tune-choice strong, .lesson-choice strong { font-size: 16px; }
.tune-choice span, .lesson-choice span { font-size: 14px; line-height: 1.5; color: var(--muted); }
.tune-choice .tune-style { color: var(--brass-strong); font-size: 12px; }
.learn-dialog { width: min(760px, calc(100% - 32px)); padding: 24px; }
.learn-heading { margin-bottom: 20px; }
#learnBack { margin-bottom: 16px; }
#lessonView > p { max-width: 66ch; font-size: 16px; line-height: 1.65; margin: 0 0 16px; }
.lesson-example { margin: 24px 0; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.lesson-example h3 { margin: 16px; font-size: 16px; line-height: 1.5; }
.lesson-score { background: #fff; color: #111; padding: 12px; overflow-x: auto; }
.lesson-example button { margin: 12px 16px; }
.lesson-try { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.lesson-try span { color: var(--muted); font-size: 14px; }
.learn-link { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--brass-strong); font-size: 13px; }
#chartForm > label { display: block; margin-bottom: 8px; font-weight: 600; }
#chartText { width: 100%; min-height: 220px; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); background: var(--bg); font: 16px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; resize: vertical; }
#chartText::placeholder { color: var(--muted); opacity: 1; }
#chartText:focus-visible { outline: 2px solid var(--brass-strong); outline-offset: 2px; }
#chartText[aria-invalid="true"] { border-color: var(--error); }
.chart-error, #libraryError { color: var(--ink); font-size: 14px; line-height: 1.5; }
.chart-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.chart-footer span { max-width: 30ch; color: var(--muted); font-size: 13px; line-height: 1.5; }
.source-notice { color: var(--muted); font-size: 12px; }
@media (max-width: 500px) {
  .tunes-dialog { padding: 16px; }
  .tunes-heading h2 { font-size: 21px; }
  .chart-footer { align-items: start; flex-direction: column; }
  .save-tune-row, .saved-tune { align-items: stretch; flex-direction: column; }
  .saved-tune-actions { justify-content: flex-end; }
}

.pad {
  height: var(--control-h);
  min-height: var(--control-h);
  min-width: var(--control-h);
  flex: none;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: linear-gradient(180deg, var(--panel-strong), var(--panel));
  color: var(--ink);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 2px 0 oklch(0 0 0 / 0.35);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.pad svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pad span { color: var(--muted); font-size: 11px; }
.pad:disabled { cursor: default; opacity: 0.5; }
.pad.primary-action { background: linear-gradient(180deg, var(--brass-strong), var(--brass)); color: var(--brass-ink); border-color: var(--brass-strong); }
.pad.primary-action span { color: var(--brass-ink); }
.pad[aria-pressed="true"], .view-actions .pad[aria-pressed="true"] {
  border-color: var(--brass);
  color: var(--brass-strong);
  background: linear-gradient(180deg, var(--panel-strong), var(--panel));
  box-shadow: inset 0 0 0 1px var(--brass), 0 2px 0 oklch(0 0 0 / 0.35);
}
.pad[aria-pressed="true"] span { color: var(--brass-strong); }
.score-toolbar { position: relative; flex-wrap: nowrap; height: var(--control-h); gap: 12px; }
.workspace { padding: 12px 20px 8px; }
.score-workbench { gap: 12px; }
.segmented { height: var(--control-h); min-height: var(--control-h); flex: none; border-radius: var(--radius); background: var(--lcd); padding: 4px; gap: 4px; border-color: var(--line); }
.segment { min-height: 44px; padding: 0 16px; border-radius: 8px; font-size: 14px; }
.lcd { height: var(--control-h); display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--lcd); box-shadow: inset 0 2px 6px oklch(0 0 0 / 0.5); }
.analysis-strip { flex: none; min-width: 0; }
.lcd-cell { display: flex; flex-direction: column; justify-content: center; padding: 0 12px; border: 0; border-left: 1px solid var(--line); white-space: nowrap; }
.lcd-cell:first-child { border-left: 0; }
.lcd-cell small { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.lcd-cell strong, .lcd-cell output { font: 700 20px var(--font-mono); color: var(--lcd-ink); letter-spacing: 0.02em; }
.lcd-stack { display: flex; flex-direction: column; }
.choice-cell { flex-direction: row; align-items: center; gap: 8px; background: linear-gradient(180deg, oklch(0.2 0.02 78 / 0.6), transparent); cursor: pointer; text-align: left; }
.choice-cell .caret { color: var(--brass); }
.choice-cell:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.choice-cell[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--brass); }
#styleValue { min-width: 7ch; }
.transport { width: 100%; gap: 12px; }
.tempo-stepper { display: inline-flex; align-items: center; flex: none; }
.tempo-stepper .pad { min-width: 48px; padding: 0; font-size: 22px; border-radius: var(--radius) 0 0 var(--radius); }
.tempo-stepper .pad:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.tempo-stepper .lcd { min-width: 72px; border-radius: 0; border-left: 0; border-right: 0; align-items: center; cursor: pointer; }
.loop-controls { display: flex; gap: 8px; flex: none; }
.loop-controls strong, .loop-adjust output { font: 700 18px var(--font-mono); }
.transport-status {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}
.transport-status.is-error { color: var(--error); }
.transport .practice-actions { display: flex; gap: 12px; margin-left: auto; }
.control-popover { position: fixed; z-index: 40; width: 280px; max-width: calc(100vw - 24px); padding: 16px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 40px oklch(0 0 0 / 0.55); }
.control-popover h2 { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; color: var(--muted); font: 600 13px Inter, sans-serif; }
/* Keep the five LCD values beside the mode and view pads even with the notes rail open. */
.score-toolbar .lcd-cell { padding-inline: 10px; }
.score-toolbar .segment { padding-inline: 12px; }
.style-popover { width: 354px; }
.reharm-popover { width: 520px; }
.style-pads, .reharm-steps { display: grid; gap: 6px; margin-bottom: 12px; }
.style-pads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reharm-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.style-pad, .reharm-step {
  min-width: 44px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-strong), var(--panel));
  color: var(--ink);
  cursor: pointer;
}
.style-pad { align-items: flex-start; padding: 8px 12px; text-align: left; font-size: 14px; }
.style-pad span, .reharm-step span { font-size: 11px; font-weight: 500; color: var(--muted); }
.style-pad[aria-pressed="true"] { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.style-pad[aria-pressed="true"] strong { color: var(--brass-strong); }
.reharm-step { height: 72px; align-items: center; padding: 4px; }
.reharm-step strong { font: 700 20px var(--font-mono); }
.reharm-step.lit { border-color: oklch(0.55 0.08 78); background: var(--brass-soft); }
.reharm-step.lit strong { color: var(--lcd-ink); }
.reharm-step[aria-pressed="true"] { border-color: var(--brass-strong); background: linear-gradient(180deg, var(--brass-strong), var(--brass)); }
.reharm-step[aria-pressed="true"] strong, .reharm-step[aria-pressed="true"] span { color: var(--brass-ink); }
.arrangement-toggle { width: 100%; height: auto; min-height: 56px; justify-content: space-between; padding: 8px 12px; white-space: normal; color: var(--ink); }
.arrangement-toggle small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; }
.arrangement-toggle:has(input:disabled) { opacity: 1; }
.arrangement-toggle:has(input:disabled) input { opacity: 0.5; }
.key-popover { width: 456px; }
.key-keyboard { position: relative; height: 150px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.piano-key { display: flex; align-items: flex-end; justify-content: center; min-width: 44px; padding: 0 0 12px; border: 0; font-size: 16px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.white-key { grid-column: calc(var(--key-position) + 1); grid-row: 1; position: relative; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, oklch(0.95 0.01 85), oklch(0.88 0.01 85)); color: oklch(0.3 0.02 265); box-shadow: inset 0 -4px 0 oklch(0.78 0.01 85); }
.black-key { position: absolute; top: 0; left: calc(var(--key-position) * (100% + 4px) / 7 - 24px); z-index: 1; width: 44px; height: 92px; padding-bottom: 8px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, oklch(0.28 0.02 265), oklch(0.16 0.015 265)); color: var(--ink); box-shadow: 0 3px 0 oklch(0 0 0 / 0.5); font-size: 12px; }
.piano-key[aria-pressed="true"] { background: linear-gradient(180deg, var(--brass-strong), var(--brass)); color: var(--brass-ink); box-shadow: inset 0 -4px 0 oklch(0.6 0.1 78); }
.original-key::before { content: ""; position: absolute; bottom: 40px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.piano-key:focus-visible { outline-offset: -3px; outline-color: var(--brass-ink); }
.black-key:focus-visible { outline-color: var(--brass-strong); }
.loop-adjust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.loop-set { width: 100%; margin-top: 12px; }
@media (max-width: 900px) {
  .workspace, .practice-strip { padding-inline: 16px; }
  .transport, .transport .practice-actions { gap: 8px; }
  .transport .pad { padding-inline: 8px; }
  .transport .tempo-stepper .pad { min-width: 44px; padding: 0; }
  .tempo-stepper .lcd { min-width: 64px; }
  .level { padding-inline: 8px; }
  .lv-name { font-size: 12px; }
}
@media (max-width: 780px) {
  .score-toolbar { gap: 10px; }
}
@media (max-width: 600px) {
  .score-toolbar { height: auto; flex-wrap: wrap; }
  .analysis-strip { order: 3; }
  .transport { flex-wrap: wrap; }
  .level { height: auto; }
  .lv-row { flex-wrap: wrap; }
  .key-popover { width: calc(100vw - 24px); padding-inline: 8px; }
}

.drum-controls { padding-block: 12px; border-block: 1px solid var(--line-strong); }
.drum-settings { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 16px; }
.drum-settings input[type="range"] { width: 100%; min-height: var(--tap); accent-color: var(--brass-strong); }
.drum-settings select { min-height: var(--tap); }
.drum-settings output { font-variant-numeric: tabular-nums; }

#accountInitial { font-size: 22px; line-height: 22px; color: var(--brass-strong); }
.account-popover { margin: 0; width: 312px; max-height: calc(100dvh - 24px); overflow-y: auto; }
.account-popover::backdrop { background: oklch(0 0 0 / 0.25); }
.account-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-heading h2 { margin: 0; font: 600 20px var(--font-display); }
.account-popover p { font-size: 14px; line-height: 1.6; }
.account-email { overflow-wrap: anywhere; }
.plan-badge { display: inline-block; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--brass-strong); }
.account-actions { display: grid; gap: 10px; }
.account-links { display: flex; gap: 20px; margin-top: 12px; }
.account-links a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--muted); font-size: 13px; }
#googleSignIn { min-height: 44px; }
/* GIS's large button is 40px tall; preserve its proportions at a 44px touch size. */
#googleSignIn > div { transform: scale(1.1); transform-origin: top left; }
.legal-page { height: auto; min-height: 100%; overflow: auto; }
.legal-content { max-width: 720px; margin: 0 auto; padding: 24px; line-height: 1.8; }
.legal-content a { color: var(--brass-strong); display: inline-flex; align-items: center; min-height: 44px; }
.legal-content h1, .legal-content h2 { font-family: var(--font-display); line-height: 1.3; }
.legal-content section { margin-block: 32px; }
@media (max-width: 540px) {
  .source-actions .pad { min-width: 44px; flex: 1; padding-inline: 4px; }
}

/* Account sits apart from the practice tools, in the corner people look for it. */
.source-actions .account-pad { position: relative; margin-inline-start: 11px; }
.source-actions .account-pad::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: -11px;
  width: 1px;
  background: var(--line-strong);
}

.brand-home { display: grid; min-width: 44px; min-height: 44px; text-decoration: none; }