/* score v10 — "the shelf and the stage".
 *
 * v7 settled the score view's grammar (one sheet behind a part rail, the
 * transport as a dock in the thumb zone) and this pass keeps it. What
 * changes is the ROOM and the FRONT DOOR: the stage goes from cool tinted
 * black to a deep warm umber (a hall, not a code editor), the landing page
 * becomes a shelf where a person's own music leads — each score wearing a
 * constellation drawn from its real notes — and every control grows to a
 * finger's size (24 of them measured under Apple's 44px floor).
 *
 * The system's one rule survives from v4: music is the only paper on a dark
 * stage, and light means SOUND. The lamp never marks a link or a button
 * that doesn't play; the red pencil stays the person's marks.
 */
:root {
  --room: #171310;        /* the stage: deep warm umber-black */
  --room-2: #272016;      /* raised chrome on the room: buttons, chips */
  --room-3: #3a3125;      /* pressed / hover chrome */
  --paper: #fffcf4;       /* the lit page */
  --paper-dim: #f4eee0;   /* paper in shadow: drawers, footers */
  --ink: #221d18;         /* engraving ink on paper */
  --dim: #857b6f;         /* secondary ink on paper */
  --faint: #b3a68e;       /* secondary text on the room (warm, was cool) */
  --lamp: #ffb454;        /* the stage light: playing states only */
  --lamp-deep: #c07a1c;
  --mark: #d63756;        /* the red pencil: selection, destructive */
  --low-conf: #b7a76a;    /* provisional notes (kept from v1: walkers read it) */
  --line: #d8d2c4;        /* hairlines on paper */
  --glass: rgba(23, 19, 16, 0.9);
  --dock-h: 54px;         /* the dock's content height */
  --tap: 44px;            /* Apple HIG floor for a touch target */
  --serif: "Fraunces", Georgia, serif;
}
* { box-sizing: border-box; }
html { background: var(--room); }
body {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* A faint overhead wash, not a decoration: a stage has depth and #171310
     flat reads as a dead screen. One gradient, fixed, nothing animated. */
  background: radial-gradient(130% 80% at 50% -10%, #221b13 0%, var(--room) 60%) fixed;
  color: var(--faint);
  margin: 0 auto;
  max-width: 980px;
  /* 150px bottom: the intake dock is fixed over the page's tail, and the
     v2 transport lesson is that a bar which covers content is not a bar --
     reserve the space so the failed-links line always clears it. */
  padding: 20px 18px 150px;
  padding-top: max(20px, env(safe-area-inset-top, 0px));
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }

/* ---- home: the shelf ---------------------------------------------------- */

header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
header h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2rem;
  margin: 0;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.tagline { color: var(--faint); margin: 0; font-size: 0.9rem; }

#recent { margin-top: 18px; }
#recent h2 {
  font-family: var(--serif); font-weight: 500; font-size: 1.05rem;
  color: var(--faint); margin: 0 0 6px;
}
#empty-hint { color: var(--faint); margin: 40px 0; font-size: 0.95rem; }
#recent-list { list-style: none; padding: 0; margin: 0; }
#recent-list li { margin: 10px 0; }

/* Shelf-keeping: hidden behind "tidy" so the default shelf is only music.
   The actions sit OUTSIDE each card's anchor, so a tap on them never
   navigates; "really remove?" is the confirm, on the button itself. */
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; }
#tidy-shelf {
  min-height: var(--tap); min-width: var(--tap); padding: 0 14px;
  background: none; border: none; color: var(--faint);
  font-size: 0.9rem; cursor: pointer;
}
#tidy-shelf:hover { color: var(--paper); }
.tidy-actions, .tidy-rename {
  display: flex; gap: 8px; margin-top: 6px; align-items: center;
}
.tidy-actions button, .tidy-rename button {
  min-height: var(--tap); padding: 0 16px; border-radius: 10px;
  background: var(--room-2); color: var(--faint);
  border: 1px solid var(--room-3); font-size: 0.9rem; cursor: pointer;
}
.tidy-actions button:hover, .tidy-rename button:hover { color: var(--paper); }
.tidy-actions button.armed { color: var(--mark); border-color: var(--mark); }
.tidy-rename input {
  flex: 1; min-height: var(--tap); padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--room-3); background: var(--room-2);
  color: var(--paper); font-size: 0.95rem; min-width: 0;
}

/* Each score is a small sheet on the shelf, wearing its own constellation:
   its real transcribed notes as dots (time across, pitch up, loudness as
   weight). No two songs look alike, and the claim -- it read YOUR song --
   is visible before a tap. The newest score is the hero. */
.score-card a {
  display: block; padding: 12px 14px;
  border-radius: 10px 10px 12px 12px; background: var(--paper);
  color: var(--ink); text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.score-card a:hover { background: #fff; }
.sketch { display: block; width: 100%; height: 44px; margin-bottom: 8px; }
.sketch-tall { height: 76px; }
.sk-dot { fill: #221d18; }
.sk-hot { fill: #c07a1c; }
.card-row {
  display: flex; align-items: baseline; gap: 10px;
  justify-content: space-between; flex-wrap: wrap;
}
.recent-title {
  font-family: var(--serif); font-weight: 500; font-size: 1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1;
}
.score-card.hero a { padding: 16px 16px 14px; }
.score-card.hero .card-row { flex-direction: column; align-items: flex-start; gap: 3px; }
.score-card.hero .recent-title {
  font-size: 1.3rem; line-height: 1.25; white-space: normal; flex: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 100%;
}
.recent-meta { color: var(--dim); font-size: 0.8rem; white-space: nowrap; }

/* The front door: a fixed dock in the thumb zone, same glass grammar as the
   score view's transport. v10 pushed this section 2.1 screens down the page
   (measured); a primary action you scroll to is not primary. */
#intake {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 18px;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--room-3);
}
.intake-row { display: flex; align-items: center; gap: 12px; }
#link-toggle {
  min-height: var(--tap); padding: 0 14px;
  background: none; border: none; color: var(--faint);
  font-size: 0.95rem; cursor: pointer;
}
#link-toggle:hover, #link-toggle[aria-expanded="true"] { color: var(--paper); }
#link-panel {
  display: flex; flex-direction: column; gap: 6px; align-items: stretch;
  width: 100%; max-width: 360px;
}
#link-panel input[type=url] {
  width: 100%; box-sizing: border-box; padding: 12px 12px; min-height: var(--tap);
  background: var(--room-2); border: 1px solid var(--room-3); border-radius: 9px;
  color: var(--paper); font-size: 0.95rem;
}
#link-panel input[type=url]::placeholder { color: var(--faint); opacity: 0.6; }
.yt-label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
#intake .intake-note, #intake .intake-status { text-align: center; margin: 0; }
/* The one paper-coloured control on the home screen: the way in. A blank
   sheet, waiting. */
.upload-button {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink);
  border-radius: 11px; padding: 13px 26px; min-height: var(--tap);
  cursor: pointer;
  font-family: var(--serif); font-weight: 500; font-size: 1.1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.upload-button:hover { background: #fff; }
.intake-note { color: var(--faint); font-size: 0.8rem; max-width: 340px; }
/* One line for both intake paths: progress while a file streams up, the
   honest sentence when either path fails. Error wears the red pencil. */
.intake-status { color: var(--faint); font-size: 0.85rem; max-width: 340px;
                 margin: 10px 0 0; }
.intake-status.intake-error { color: var(--mark); }
/* Not display:none -- a hidden input keeps keyboard focusability this way */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Links that never arrived: one quiet line, closed by default. Failure is
   real and countable here, never the brightest thing on the shelf. */
#failed-group { margin: 20px 0 0; }
#failed-toggle {
  background: transparent; border: none; color: var(--faint);
  font-size: 0.85rem; padding: 10px 0; min-height: var(--tap); cursor: pointer;
}
#failed-toggle:hover { color: var(--paper); background: transparent; }
#failed-list { list-style: none; padding: 0; margin: 0; }
.failed-row {
  display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap;
  background: var(--room-2); border-radius: 10px;
  padding: 10px 12px; margin: 8px 0;
}
.failed-name { color: var(--paper); font-size: 0.9rem; }
.failed-why { color: var(--faint); font-size: 0.8rem; flex: 1 1 auto; }
.failed-actions { display: inline-flex; gap: 8px; margin-left: auto; }
.failed-actions button { font-size: 0.82rem; padding: 8px 12px; }

button {
  background: var(--room-2); color: var(--paper);
  border: 1px solid var(--room-3); border-radius: 9px;
  padding: 9px 14px; cursor: pointer; font-size: 0.95rem;
  /* Apple's floor for a touch target. Iris measured 24 controls under it,
     the back arrow at 14x22 -- the one class of finding on this page that
     is a published number rather than taste. */
  min-height: var(--tap);
}
button:hover { background: var(--room-3); }
button:disabled { opacity: 0.4; cursor: default; }

#progress { margin: 14px 0; }
body.score-view #progress { margin: 6px 12px; }
.progress-bar { background: var(--room-2); border-radius: 6px; height: 8px; overflow: hidden; }
#progress-fill { background: var(--lamp); height: 100%; width: 0%; transition: width 0.4s ease; }
#progress-message { color: var(--faint); font-size: 0.9rem; margin: 6px 0 0; line-height: 1.5; }
#fail-detail { margin: 10px 0 0; font-size: 0.85rem; color: var(--faint); }
#fail-detail summary { cursor: pointer; padding: 8px 0; min-height: 32px; }
#fail-detail pre {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 0;
  background: var(--room-2); border-radius: 8px; padding: 10px 12px;
  font-size: 0.72rem; color: var(--faint); max-height: 30vh; overflow-y: auto;
}
#fail-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ---- score view: reserved rows above, music below ----------------------- */

body.score-view {
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 0;
  padding-top: env(safe-area-inset-top, 0px);
}
body.score-view header, body.score-view #intake,
body.score-view #recent, body.score-view #failed-group,
body.score-view #empty-hint { display: none; }
body.score-view #topbar, body.score-view #part-rail,
body.score-view #progress, body.score-view #transport { flex: 0 0 auto; }
body.score-view #parts {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 8px 10px 24px;
  padding-left: max(10px, env(safe-area-inset-left, 0px));
  padding-right: max(10px, env(safe-area-inset-right, 0px));
}
/* One part on screen at a time: the rail decides which. Cards stay in the
   DOM (their wiring, gains and state are live either way); only the active
   one is paper on the stage. Stand mode has its own visibility rules. */
body.score-view:not(.stand-mode) .part:not(.active),
body.score-view:not(.stand-mode) .changes-card:not(.active) { display: none; }

/* The part rail: the band as chips. A chip is ON when its sheet is the one
   on screen, and carries the light when its part is sounding. The rail
   scrolls; the fade at its right edge is the affordance saying so. */
#part-rail {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 6px 12px 10px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent);
}
#part-rail::-webkit-scrollbar { display: none; }
#part-rail .chip {
  flex: 0 0 auto;
  background: var(--room-2); color: var(--faint);
  border: 1px solid var(--room-3); border-radius: 999px;
  padding: 10px 17px; font-size: 0.92rem; line-height: 1.2;
  min-height: var(--tap);
}
#part-rail .chip.on {
  background: var(--paper); color: var(--ink);
  border-color: var(--paper); font-weight: 600;
}
#part-rail .chip.sounding:not(.on) { color: var(--lamp); border-color: var(--lamp-deep); }
#part-rail .chip.on.sounding { box-shadow: 0 0 0 2px var(--lamp); border-color: var(--lamp); }

#topbar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 4px;
}
#back-home {
  color: var(--faint); text-decoration: none; font-size: 1.4rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  border-radius: 10px;
}
#back-home:hover { color: var(--paper); background: var(--room-2); }
#song-title {
  font-family: var(--serif); font-weight: 500; font-size: 1.15rem;
  color: var(--paper); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#song-meta { color: var(--faint); font-size: 0.82rem; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; }
#tempo-display:empty { display: none; }
/* The meter chip: what the estimator decided, changeable in passing. Quiet
   ink on the room, not a button that shouts; the amber · when it was unsure
   is an invitation to look, never a demand. */
#meter-chip {
  background: transparent; border: 1px solid var(--room-3); color: var(--faint);
  padding: 8px 13px; font-size: 0.85rem; border-radius: 999px; line-height: 1.3;
  min-height: var(--tap);
}
#meter-chip:hover { color: var(--paper); border-color: var(--faint); background: transparent; }
#meter-chip.unsure { color: var(--lamp); border-color: var(--lamp-deep); }
/* The picker: a small popover under the chip, not a panel that eats the page. */
#meter-pop {
  position: fixed; z-index: 35;
  background: var(--room-2); border: 1px solid var(--room-3); border-radius: 12px;
  padding: 10px 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; gap: 8px; max-width: 260px;
}
.meter-pop-note { color: var(--faint); font-size: 0.8rem; }

/* The band-sound popover shares the meter popover's whole grammar: fixed,
   anchored to its chip (in the dock now, so it opens upward), closed by a
   tap anywhere else. Its buttons stack -- the labels are words. */
/* The sound board. Every instrument's sound and volume in one place, sitting
   on the dock's top edge like the meter popover hangs from its chip -- but
   full width, because it is a panel and not a passing menu.

   The rows are deliberately identical: they are the same kind of thing, and
   the one element that differs (the presets, which act on all of them at
   once) is the only one allowed to. Sized so five or six rows and the presets
   clear a 402x681 phone without the board becoming the whole screen; past
   that it scrolls rather than growing. */
#board {
  position: fixed; z-index: 35;
  left: 8px; right: 8px; bottom: calc(var(--dock-h) + 14px);
  max-height: min(72vh, 560px); overflow-y: auto;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--room-3); border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  padding: 10px 12px 14px;
}
.board-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 6px;
}
.board-title {
  font-family: var(--serif); font-size: 1rem; color: var(--paper);
}
#board-close {
  background: none; border: none; color: var(--faint);
  font-size: 1rem; min-width: var(--tap); min-height: 34px;
}
/* The presets are secondary furniture: they were taking two wrapped rows and
   half the panel before a single instrument appeared, on a board whose whole
   purpose is the instruments. One line that scrolls sideways instead. */
.board-presets {
  border-bottom: 1px solid var(--room-3);
  padding-bottom: 8px; margin-bottom: 4px;
}
.board-note {
  display: block; color: var(--faint); font-size: 0.72rem; padding-bottom: 5px;
}
.band-buttons {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
}
.band-buttons::-webkit-scrollbar { display: none; }
.band-buttons button {
  flex: 0 0 auto; padding: 6px 10px; font-size: 0.76rem; white-space: nowrap;
}

.board-row { padding: 7px 0; border-bottom: 1px solid rgba(58, 49, 37, 0.5); }
.board-row:last-child { border-bottom: none; }
.board-line { display: flex; align-items: center; gap: 8px; }
.board-line + .board-line { margin-top: 5px; }
.board-part {
  font-family: var(--serif); color: var(--paper); font-size: 0.88rem;
  flex: 0 0 4.6rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
/* Dark like the panel. The selects inherit the drawers' paper styling, which
   on this background made six white blocks the loudest thing in a panel whose
   subject is six instruments -- if everything is differentiated, nothing is. */
.board-row .sound {
  flex: 1 1 auto; min-width: 0; font-size: 0.8rem;
  background: var(--room-2); color: var(--paper);
  border: 1px solid var(--room-3); border-radius: 8px;
  padding: 6px 8px; min-height: 32px;
}
.board-row .level { flex: 1 1 auto; min-width: 0; }
.board-mute {
  flex: 0 0 auto; font-size: 0.72rem; padding: 5px 9px;
  min-height: 30px; color: var(--faint);
}
.board-mute.on {
  background: var(--mark); border-color: var(--mark); color: var(--paper);
}

/* The dock. Glass at the bottom, one row, sized for a thumb. Every control
   here must survive 402px in one line: play, stop, speed, the chord, who is
   sounding, the band's sound. The chord truncates first, never the buttons. */
#transport {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--room-3);
  min-height: var(--dock-h);
  position: relative;
}
#transport button { padding: 9px 12px; font-size: 0.9rem; min-width: var(--tap); }
#play { background: var(--room-3); font-weight: 600; white-space: nowrap; }
#play.live { background: var(--lamp); border-color: var(--lamp); color: var(--ink); }
#speed { font-size: 0.85rem; color: var(--faint); white-space: nowrap; min-width: 46px; }
#band-chip { white-space: nowrap; color: var(--faint); font-size: 0.85rem; }
#now-playing {
  color: var(--lamp); font-size: 0.72rem; font-weight: 600;
  min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* an empty flex item still spends two gaps; when nothing sounds it leaves
   the row entirely, which is what keeps the dock to one line at 402px */
#now-playing:empty { display: none; }
/* The save word floats above the dock as a small toast, not a second row. */
#save-status {
  position: absolute; right: 12px; top: -34px;
  color: var(--faint); font-size: 0.78rem;
  background: var(--glass); border-radius: 8px; padding: 3px 9px;
}
#save-status:empty { display: none; }

/* The scrubber: the song along the dock's top edge. Thin to look at, two
   finger-widths to touch; the lamp fills as far as the band has played and
   a finger anywhere on it moves the band. Hidden while nothing sounds. */
#scrub {
  position: absolute; left: 0; right: 0; top: -13px; height: 26px;
  cursor: pointer; touch-action: none; z-index: 5;
}
#scrub::before {
  content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 3px;
  background: var(--room-3); border-radius: 2px;
}
#scrub-fill {
  position: absolute; left: 0; top: 12px; height: 3px; width: 0;
  background: var(--lamp); border-radius: 2px;
}
#scrub-dot {
  position: absolute; top: 7px; width: 13px; height: 13px; left: -6px;
  border-radius: 50%; background: var(--lamp);
  box-shadow: 0 0 8px rgba(255, 180, 84, 0.7);
}

.meter-buttons { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.meter-buttons button { padding: 9px 13px; font-size: 0.9rem; }
.meter-buttons button.chosen { background: var(--lamp-deep); border-color: var(--lamp-deep); }

.hidden { display: none !important; }

/* The dock's middle: the chord over the who-is-sounding line, stacked so
   neither squeezes the other out of 402px. */
.dock-mid {
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; flex: 1 1 auto; line-height: 1.15; gap: 0;
}


/* ---- the sheets --------------------------------------------------------- */

.part {
  border-radius: 8px 8px 12px 12px; margin: 0 0 16px;
  padding: 10px 12px 12px; background: var(--paper); color: var(--ink);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  /* the lamp's mount: transparent until this sheet sounds */
  border-top: 3px solid transparent;
  transition: border-top-color 0.15s, box-shadow 0.15s;
}
/* The lamp comes on. The one bold thing on the page. */
.part.sounding {
  border-top-color: var(--lamp);
  box-shadow: 0 0 0 1px var(--lamp), 0 2px 18px rgba(224, 164, 88, 0.35);
}
.part-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.part-label {
  margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.4rem;
  flex: 1; color: var(--ink);
}
/* Controls that sit ON paper read as ink, not as room chrome. */
.part button {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
}
.part button:hover { background: var(--paper-dim); }
.sheet-play { padding: 8px 14px; font-size: 1rem; min-width: 48px; }
.part.sounding .sheet-play { background: var(--lamp); border-color: var(--lamp-deep); color: var(--ink); }
.sounding-badge { display: none; color: var(--lamp-deep); font-size: 0.8rem; font-weight: 600; }
.part.sounding .sounding-badge { display: inline; }
/* At phone width the badge is the straw that wraps the header (the ⋯ fell
   to a second row) -- and the lamp already says "playing" three ways: the
   sheet's border, the ▶-turned-■, and the glowing chip. Redundant chrome
   loses to the layout. */
@media (max-width: 560px) { .part.sounding .sounding-badge { display: none; } }
.faint-tag {
  color: var(--dim); font-size: 0.75rem; border: 1px solid var(--line);
  border-radius: 10px; padding: 1px 8px;
}
.minus-one { font-size: 0.85rem; padding: 8px 12px; color: var(--dim); }
.sheet-more { padding: 6px 14px; font-size: 1.05rem; line-height: 1.2; color: var(--dim); }
.sheet-more[aria-expanded="true"] { background: var(--paper-dim); }

.part-drawer {
  background: var(--paper-dim); border-radius: 8px;
  padding: 8px 10px; margin: 8px 0 2px;
  font-size: 0.82rem; color: var(--dim);
}
.drawer-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 3px 0; }
.sound-wrap, .level-wrap, .detail-wrap, .check {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap);
}
.part-drawer select.sound {
  font-size: 0.9rem; padding: 9px 8px; border-radius: 8px; min-height: var(--tap);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  max-width: 220px;
}
.sound-status { color: var(--lamp-deep); font-size: 0.75rem; }
.level, .detail { vertical-align: middle; accent-color: var(--lamp-deep); width: 110px; }
.detail-value { min-width: 3ch; color: var(--ink); }
.part-drawer button { font-size: 0.82rem; padding: 8px 12px; color: var(--dim); }

.part-note { color: var(--dim); font-size: 0.8rem; margin: 6px 0 0; font-style: italic; }

.notation { overflow-x: auto; min-height: 60px; margin-top: 4px; position: relative; }
.notation svg { max-width: none; }

/* The light on the music itself: while the band plays, the bar it is playing
   glows on the sheet — and tapping any bar sends the band there. This is the
   one bold, moving thing on the page; geometry comes from OSMD's own measure
   boxes (see buildBarMap in app.js). */
.bar-light {
  position: absolute; pointer-events: none; border-radius: 5px;
  background: rgba(255, 180, 84, 0.20);
  box-shadow: inset 0 0 0 1.5px var(--lamp-deep);
  transition: left 0.12s ease, top 0.12s ease, width 0.12s ease;
}
@media (prefers-reduced-motion: reduce) { .bar-light { transition: none; } }

.stave-foot {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 0;
  flex-wrap: wrap; font-size: 0.8rem; color: var(--dim);
}
.pager { display: inline-flex; align-items: center; gap: 6px; }
.pg-prev, .pg-next { padding: 8px 14px; font-size: 0.95rem; min-width: var(--tap); }
.pg-label { min-width: 8ch; }
.loop, .stand, .view-toggle, .drum-view { font-size: 0.8rem; padding: 8px 12px; color: var(--dim); }
.loop.loop-on { background: var(--lamp); border-color: var(--lamp-deep); color: var(--ink); }
.stave-key { font-weight: 600; color: var(--ink); margin-left: auto; }
.stave-stats { color: var(--dim); font-size: 0.75rem; margin: 3px 0 0; }

/* ---- the changes (chord charts, band lead sheet) ------------------------ */

.chordchart { margin: 6px 0 8px; }
.chart-note { color: var(--dim); font-size: 0.75rem; margin: 0 0 6px; }
.chart-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.chart-bar {
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
  min-height: 44px; padding: 5px 6px;
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--dim);
}
.chart-bar .chart-chord { color: var(--ink); cursor: pointer; }
.chart-bar .chart-chord:hover { color: var(--lamp-deep); }
.chart-bar .chart-carried { color: var(--dim); font-weight: 400; font-size: 0.85rem; }
.chart-bar.now { border-color: var(--lamp-deep); box-shadow: inset 0 0 0 1px var(--lamp-deep); }

/* The whole band's changes as one card: the lead sheet a guitarist props up. */
.changes-card {
  border-radius: 8px 8px 12px 12px; margin: 0 0 16px;
  padding: 10px 12px 12px; background: var(--paper); color: var(--ink);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.changes-card h2 { margin: 0 0 2px; font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.changes-card .chart-note { margin-bottom: 6px; }

.part-drums .drums-note { color: var(--dim); font-size: 0.85rem; margin: 4px 0 2px; }
.part-drums .drawer-row { font-size: 0.82rem; color: var(--dim); }

/* ---- the drum groove strip ---------------------------------------------- */
/* (.pianoroll-wrap survives the piano roll's retraction: the drums card
   still uses it as the strip's scroll container.) */

.pianoroll-wrap { margin-top: 8px; overflow-x: auto; }
.pr-playhead { stroke: var(--mark); stroke-width: 1.5; }

/* The drum groove strip: same paper as the roll, one lane per kit piece;
   each hit's opacity is its measured velocity (darker = harder). */
svg.drumroll {
  display: block; background: var(--paper-dim); border: 1px solid var(--line);
  border-radius: 6px; touch-action: pan-x manipulation;
}
.dr-hit { fill: #4a6741; }
/* An open hat rings: hollow tick on the hat lane, same ink. */
.dr-hit.dr-open { fill: none; stroke: #4a6741; stroke-width: 1.5; }
.drums-note { color: var(--dim); font-size: 0.78rem; margin: 6px 0 2px; }

/* ---- music-stand mode --------------------------------------------------- */
/* One sheet, the whole screen, nothing else. The room goes fully dark and
   the single page is the only light; pages turn themselves with playback. */

body.stand-mode #topbar, body.stand-mode #transport, body.stand-mode #part-rail,
body.stand-mode #progress, body.stand-mode #meter-pop { display: none !important; }
body.stand-mode #parts { padding: 6px; }
body.stand-mode .part:not(.on-stand), body.stand-mode .changes-card { display: none; }
body.stand-mode .part.on-stand .part-drawer,
body.stand-mode .part.on-stand .pianoroll-wrap,
body.stand-mode .part.on-stand .part-note,
body.stand-mode .part.on-stand .minus-one,
body.stand-mode .part.on-stand .sheet-more,
body.stand-mode .part.on-stand .faint-tag,
body.stand-mode .part.on-stand .view-toggle,
body.stand-mode .part.on-stand .stave-stats { display: none; }
/* The drums card's extra chrome goes quiet on the stand too: its controls
   sit in a bare .drawer-row (no .part-drawer wrapper), and the sheet/strip
   toggle and honesty line are reading-room furniture, not performance. */
body.stand-mode .part.on-stand .drawer-row,
body.stand-mode .part.on-stand .drums-note,
body.stand-mode .part.on-stand .drum-view { display: none; }
body.stand-mode .part.on-stand { margin: 0; min-height: calc(100dvh - 20px); }
body.stand-mode .part.on-stand .stand { background: var(--paper-dim); }
#stand-exit {
  position: fixed; z-index: 40;
  top: max(10px, env(safe-area-inset-top, 0px)); right: 10px;
  background: var(--ink); color: var(--paper); border-color: var(--room-3);
  opacity: 0.85;
}

/* --- steep: where a song gets hard ------------------------------------- */
/* Lives on the room, not on paper: it is about the song, not part of the
   engraving. Every control clears --tap, which is the HIG floor this
   stylesheet already keeps. */
.steep-panel {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  max-height: 82vh; overflow-y: auto;
  background: var(--glass); backdrop-filter: blur(12px);
  border-top: 1px solid var(--room-3);
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  color: var(--faint);
}
.steep-head { display: flex; align-items: center; gap: 12px; }
.steep-title { font-family: var(--serif); font-size: 1.15rem; color: var(--paper);
  margin: 0; flex: 1; }
.steep-x { min-height: var(--tap); min-width: var(--tap); background: none;
  border: 0; color: var(--faint); font-size: 0.85rem; }
.steep-lead { font-family: var(--serif); color: var(--paper); font-size: 1.02rem;
  margin: 8px 0 12px; }
.steep-warn { color: var(--low-conf); }

/* One cell per bar. Unlit cells are deliberately quiet: most of the song was
   never the problem and the strip should look like that. */
.steep-strip { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 14px; }
.steep-cell {
  width: 15px; height: 26px; padding: 0; border: 0; border-radius: 3px;
  background: var(--room-2);
}
.steep-cell.on {
  background: color-mix(in srgb, var(--lamp) calc(var(--d) * 82% + 18%), var(--room-3));
}
.steep-cell.sel { outline: 2px solid var(--paper); outline-offset: 1px; }

.steep-detail { min-height: 64px; }
.steep-why { color: var(--paper); font-size: 0.95rem; margin: 0 0 10px; }
.steep-why strong { font-family: var(--serif); }
.steep-play, .steep-link {
  min-height: var(--tap); padding: 8px 14px; border-radius: 10px;
  background: var(--room-2); border: 1px solid var(--room-3);
  color: var(--paper); font-size: 0.85rem;
}
.steep-link { background: none; border: 0; text-decoration: underline;
  padding: 0 4px; min-height: 0; color: var(--faint); }
.steep-foot { border-top: 1px solid var(--room-3); margin-top: 12px; padding-top: 10px; }
.steep-foot .part-note { color: var(--faint); font-style: normal; }

/* The range picker. Notes are tapped, not sung -- see steep.js for why. */
.steep-keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.steep-key {
  min-width: var(--tap); min-height: var(--tap); padding: 6px 8px;
  border-radius: 9px; background: var(--room-2); border: 1px solid var(--room-3);
  color: var(--paper); font-size: 0.8rem;
}
.steep-key.armed { background: var(--lamp); color: var(--ink); border-color: var(--lamp-deep); }
.steep-key.off { opacity: 0.32; }

/* ---- the lead sheet ------------------------------------------------------
   One staff, the melody as a line, the band's chord symbols above it. The
   card is a part card with the instrument controls taken out: there is no
   sound to pick, because the lead sheet is a page to read rather than a
   voice in the band. */
.part-lead .part-label { font-style: normal; }
.lead-note {
  color: var(--dim); font-size: 0.8rem;
  padding: 0 14px 6px; margin: 0;
}