/* ============================================================
   Song Writer — Eagle View Music

   The fourth member of the family: Rhythm Poetry 2.0's design system
   (which Ostinato Builder 2.0 and the Music Stand share) — the same top
   bar, toolbar, popovers, sheets, cards and switches, the same class
   names — in Song Writer's own plum, so the apps read as a family
   without being mistaken for one another (the palette-divergence rule).
   The note colours are 1.0's solfège rainbow, unchanged: they are the
   music. Everything that edits wears the construction hat's orange.

   Sizes that the View popover controls are CSS variables set by
   js/settings.js:
     --bs          block scale (1.0's bars, notes and gaps)
     --text-scale  lyrics only
     --lyric-font  lyrics only
     --strip-w     chord strip width
   and one by js/core.js:
     --toolbar-real  the toolbar's real height (one row, or two on a phone)
   ============================================================ */

:root {
  --paper:        #FAF6FB;
  --paper-2:      #F2EBF4;
  --surface:      #FFFFFF;
  --ink:          #2B1D38;
  --ink-2:        #5C4E6B;
  --ink-3:        #9487A2;
  --hairline:     #E9DFEE;
  --hairline-2:   #D8CAE0;

  --accent:       #9C168E;   /* Song Writer 1.0's banner plum */
  --accent-soft:  #F7E6F4;
  --accent-deep:  #7A0F6F;

  /* the construction hat: everything that edits wears it */
  --edit:         #F08A00;   /* a shade deeper than 1.0's #FF9500, so it reads as text */
  --edit-glow:    #FF9500;   /* 1.0's hat glow, for the icon itself */
  --edit-soft:    #FFF1DE;

  --chord:        #9F4FFF;   /* 1.0's chord-mode glow */
  --chord-soft:   #F1E8FF;
  --gold:         #FFD700;   /* 1.0's selection ring */
  --names:        #00B84C;   /* 1.0's glasses glow, a touch darker for contrast */
  --names-soft:   #E3F8EA;
  --danger:       #C0392B;
  --danger-soft:  #FBEAE7;
  --good:         #2E8B57;

  /* the sounding note (View → Light up the notes) — the family's --sound */
  --sound:        #9C168E;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-1: 0 1px 2px rgba(43,29,56,.06), 0 2px 8px rgba(43,29,56,.06);
  --shadow-2: 0 4px 12px rgba(43,29,56,.10), 0 12px 32px rgba(43,29,56,.12);
  --shadow-3: 0 12px 28px rgba(43,29,56,.16), 0 32px 64px rgba(43,29,56,.18);

  /* the family's bar heights: one row each on a computer */
  --topbar-h: 60px;
  --toolbar-h: 72px;
  --toolbar-real: 72px;

  --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-round: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --font-block: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-signature: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --ts-digit: 25px;

  /* the toolbar's own sizes, grown on a smartboard and shrunk on a short screen */
  --btn-h: 42px;
  --play: 54px;
  --square: 44px;
  --circle: 30px;
  --step: 50px;
  --sig-h: 54px;

  /* the section heads' round tools — grown for a finger (TOUCH, below) */
  --hb: 24px;

  --bs: 1;
  --text-scale: 1;
  --lyric-font: var(--font);
  --dock-h: 150px;   /* the keyboard dock's real height (keyboard-dock.js) */
  --strip-w: 200px;   /* the chord panel's width (settings.js STRIP_WIDTHS) */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
  /* pan and scroll, but no pinch or double-tap zoom: a smart board's browser
     ignores user-scalable=no and a pinch on the chord panel zoomed the page
     (touch test, 2026-09-27 — the same fix as Digital Accordion) */
  touch-action: pan-x pan-y;
}

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: var(--accent-soft);
  outline: none;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
svg { display: block; }
svg[viewBox] { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.engraving { fill: currentColor; stroke: none; overflow: visible; }
code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .92em; background: var(--paper-2); padding: 1px 5px; border-radius: 5px; }

.app {
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.policy-off { display: none !important; }

/* ============================================================
   TOP BAR — one row, the family's three columns. It never wraps:
   words give way to icons first (RESPONSIVE, below).
   ============================================================ */
.topbar {
  flex: 0 0 auto;
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  position: relative;
  z-index: 40;
}
.topbar-start { justify-self: start; display: flex; align-items: center; gap: 6px; min-width: 0; }

.home-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.home-link svg { width: 17px; height: 17px; }
.home-link:hover, .home-link:active { background: var(--paper-2); color: var(--ink); }
html.in-iframe .home-link { display: none; }

/* The name, like "Rhythm Poetry" and "Ostinato Builder" — and still the
   way to About (1.0's rule), at every width: below 720 px the words go
   and the three-block mark stays as the button. */
.app-mark {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 8px; border-radius: 10px;
  font-family: var(--font-round); font-size: 19px; font-weight: 700; letter-spacing: .01em;
  color: var(--ink); white-space: nowrap;
  transition: background .15s;
}
.app-mark:hover, .app-mark:active { background: var(--paper-2); }
.app-mark .mark-icon { width: 22px; height: 22px; flex: none; }

/* The centre switch — Rhythm Poetry's .side-switch; here, the workspace. */
.side-switch {
  justify-self: center;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--paper-2);
  border-radius: 999px;
}
.side-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font-round);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .18s, color .18s, box-shadow .18s;
}
.side-tab-icon { width: 18px; height: 18px; flex: none; }
.side-tab:hover, .side-tab:active { color: var(--ink); }
.side-tab.active { background: var(--surface); box-shadow: var(--shadow-1); color: var(--accent); }

.chip-cluster { justify-self: end; display: flex; align-items: center; gap: 7px; min-width: 0; }

.autosave-toggle, .sandbox-clear {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  min-height: 38px; height: 40px; padding: 0 11px; border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--paper-2);
  font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--ink-3);
  transition: background .15s, color .15s, border-color .15s;
}
.autosave-toggle svg, .sandbox-clear svg { width: 15px; height: 15px; flex: none; }
.autosave-toggle[hidden], .sandbox-clear[hidden] { display: none; }
.autosave-toggle:hover, .autosave-toggle:active { background: var(--hairline); color: var(--ink-2); }
.autosave-toggle.is-off { background: transparent; border-style: dashed; border-color: var(--danger); color: var(--danger); }
/* A shared song is never saved into, so the toggle is not a warning but
   the way to keep your changes: Save my copy. */
.autosave-toggle.is-off.is-shared { border-style: solid; border-color: var(--accent); color: var(--accent); }
.sandbox-clear:hover, .sandbox-clear:active { background: var(--danger-soft); color: var(--danger); }

.song-chip {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 230px; min-width: 0;
  padding: 8px 10px 8px 14px;
  border-radius: 999px;
  background: var(--paper-2);
  font-size: 14px; font-weight: 700; color: var(--ink);
  transition: background .15s;
}
.song-chip:hover, .song-chip:active { background: var(--hairline); }
.song-chip-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; text-align: left; }
.song-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-chip-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.song-chip-kicker[hidden] { display: none; }
.song-chip.is-sandbox { background: transparent; border: 1.5px dashed var(--accent); padding: 6.5px 8.5px 6.5px 12.5px; min-height: 42px; }
.song-chip.is-sandbox .song-chip-label { color: var(--accent); }
.song-chip-caret { width: 15px; height: 15px; flex: none; color: var(--ink-3); }

/* ============================================================
   LESSON STRIP & PREVIEW BAR
   ============================================================ */
.task-strip {
  flex: none; display: flex; align-items: baseline; gap: 9px;
  padding: 7px 16px; background: var(--accent-soft); border-bottom: 1px solid var(--hairline);
  font-size: 14px; line-height: 1.35;
}
.task-strip[hidden] { display: none; }
.task-strip-title { font-family: var(--font-round); font-weight: 700; color: var(--accent); flex: none; }
.task-strip-note { color: var(--ink-2); }

.preview-bar {
  position: fixed; left: 50%; bottom: calc(var(--toolbar-real) + 14px); transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: 8px 10px 8px 16px; border-radius: var(--r-xl);
  background: var(--ink); color: var(--paper); box-shadow: var(--shadow-2);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.preview-bar[hidden] { display: none; }
.preview-bar .btn { height: 34px; padding: 0 13px; font-size: 13px; }
body.show-dock .preview-bar { bottom: calc(var(--toolbar-real) + var(--dock-h) + 28px); }

/* ============================================================
   WORKSPACE — the grid that keeps the keyboard under the score

       columns:  [strip] var(--strip-w)   [score] 1fr
       rows:     [main]  1fr              [dock]  auto
   ============================================================ */
.workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 0;
  grid-template-areas:
    "strip score"
    "corner dock";
  position: relative;
}
body.show-strip .workspace { grid-template-columns: var(--strip-w) minmax(0, 1fr); }
body.show-dock .workspace { grid-template-rows: minmax(0, 1fr) auto; }

.chord-strip { grid-area: strip; min-width: 0; overflow: hidden; display: none; }
body.show-strip .chord-strip { display: flex; }
.stage { grid-area: score; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; scroll-behavior: auto; }
.dock-corner { grid-area: corner; display: none; }
body.show-strip.show-dock .dock-corner { display: flex; }
.keyboard-dock { grid-area: dock; min-width: 0; display: none; }


/* ============================================================
   THE SCORE (1.0's blocks)
   Colours inside #score are plain hex/rgba, never color-mix():
   html2canvas 1.4.1 (Save picture) throws on it.
   ============================================================ */
.notation-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: max(1200px, calc(1200px * var(--bs)));   /* grows with Justify width on a big screen */
  margin: 0 auto;
  padding: 16px 18px 12px;
}

.notation-line {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  padding: 36px 20px 14px;
  background-color: #f5f5f5;
  border-radius: 12px;
  width: 100%;
  row-gap: calc(14px * var(--bs));
  column-gap: calc(4px * var(--bs));
  transition: background-color .5s ease;
}
.notation-line.is-empty { min-height: 90px; }
body.colors-inactive .notation-line { background-color: #ffffff !important; box-shadow: inset 0 0 0 1px var(--hairline); }

/* ---- the section head: the line's name in the corner, and in Edit
   Ostinato Builder's track-head tools around it: ▲ ▼ move, ⧉ copy, ×
   delete. They show on the line you point at, or the selected one
   (always the selected one on a touch screen). ---- */
.line-head {
  position: absolute; top: 7px; left: 12px; z-index: 16;
  display: flex; align-items: center; gap: 4px;
  max-width: calc(100% - 24px);
}
.line-label {
  width: 7ch; min-width: 26px; max-width: 16ch;
  height: 24px; padding: 0 8px;
  border: none; border-radius: 7px; outline: none;
  background: rgba(255,255,255,.66);
  font-family: var(--font-round); font-size: 14px; font-weight: 700; color: var(--ink-2);
  text-align: center;
  transition: box-shadow .15s, background .15s;
}
.line-label::placeholder { color: var(--ink-3); font-style: italic; font-weight: 600; }
.line-label[readonly] { cursor: default; }
/* a nameless line shows no empty chip outside Edit */
body:not(.editing) .line-label:placeholder-shown { visibility: hidden; }
body.colors-inactive .line-label { background: var(--paper-2); }
body.editing .line-label:not([readonly]) { cursor: text; box-shadow: inset 0 -1.5px 0 var(--hairline-2); }
body.editing .line-label:not([readonly]):focus { background: #fff; box-shadow: inset 0 0 0 1.5px #F08A00; }
body.hide-section-titles .line-label { display: none; }

.head-tool {
  display: none;
  width: var(--hb); height: var(--hb); flex: none;
  place-items: center;
  border-radius: 7px; background: #fff; border: 1.5px solid var(--hairline-2);
  color: var(--ink-2); font-size: 12px; font-weight: 800;
  transition: border-color .12s, color .12s, background .12s;
}
.head-tool svg { width: 14px; height: 14px; }
.head-tool:hover { border-color: #F08A00; color: #F08A00; }
.head-tool.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.head-tool:disabled { opacity: .3; pointer-events: none; }
body.editing .notation-line:hover .head-tool,
body.editing .notation-line.has-selection .head-tool { display: inline-grid; }
body.sections-locked .head-tool { display: none !important; }

/* ---- a syllable: [chord slot] over [blocks + word] ----
   Stretched to its row, so every chord slot in a visual row sits at the
   same height and the slots read as one lane (chord-lane.js). */
.syllable {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  min-width: calc(40px * var(--bs));
  flex-shrink: 0;
  margin: 0 2px;
  cursor: pointer;
  scroll-margin: 100px;
}
.syl-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: calc(26px * var(--bs)) 4px 4px;
  border-radius: 8px;
  transition: background-color .3s ease, transform .2s ease, box-shadow .2s;
}
.syllable:hover .syl-body { background-color: rgba(0,123,255,.1); }
.syllable.highlighted .syl-body { background-color: rgba(255,215,0,.3); transform: scale(1.05); box-shadow: 0 0 10px rgba(255,215,0,.5); }
.syllable.highlighted:hover .syl-body { background-color: rgba(255,215,0,.4); }
body.editing .syllable.highlighted .text { box-shadow: inset 0 -2px 0 #F08A00; }
.syllable.editing .syl-body { background-color: rgba(0,123,255,.1); transform: scale(1.02); }
/* View → While it plays → Light up the notes: the family's light box */
body.light-notes .syllable.sounding .syl-body,
body.light-notes .syllable.sounding.highlighted .syl-body { background-color: rgba(156,22,142,.10); box-shadow: 0 0 0 1.5px #9C168E, 0 0 12px rgba(156,22,142,.25); transform: none; }

.notes-container { display: flex; flex-direction: row; align-items: flex-end; justify-content: center; margin-bottom: calc(8px * var(--bs)); }
body:not(.show-staff) .notes-container:has(.value-mark) { margin-bottom: calc(22px * var(--bs)); }

.note {
  width: calc(32px * var(--bs));
  border-radius: 6px;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px;
  transition: height .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .25s ease;
}

.harmony-stack { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: calc(32px * var(--bs)); }
.harmony-stack.has-multiple-notes { min-width: calc(36px * var(--bs)); height: calc(var(--stack-h, 60) * 1px * var(--bs)); }
.harmony-stack.has-multiple-notes .note {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.5); box-shadow: 0 -2px 6px rgba(0,0,0,.12);
}
.harmony-stack.has-multiple-notes .note:hover { filter: brightness(1.15); }

/* connected notes read as one joined bar */
.notes-container > .harmony-stack:not(:only-child) .note { border-radius: 0; box-shadow: inset -1px 0 0 rgba(255,255,255,.4), inset 1px 0 0 rgba(0,0,0,.1); }
.notes-container > .harmony-stack:first-child:not(:only-child) .note { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.notes-container > .harmony-stack:last-child:not(:only-child) .note { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

.note.selected-note { box-shadow: 0 0 0 2.5px var(--gold), 0 0 12px rgba(255,215,0,.85) !important; filter: brightness(1.15); z-index: 20 !important; }
.note.rest-note { background-color: #525b64 !important; color: transparent !important; opacity: .68; border: 1.5px dashed rgba(255,255,255,.6); box-shadow: none !important; }
.note.rest-note .letter-name, .note.rest-note .solfege-name, .note.rest-note .accidental-symbol { display: none !important; }
.note.rest-note.selected-note { box-shadow: 0 0 0 2.5px var(--gold), 0 0 12px rgba(255,215,0,.85) !important; opacity: .88; }

/* 1.0's heights, at block size 100% (keep in step with NOTE_HEIGHTS) */
.mi-low  { height: calc(20px  * var(--bs)); }
.fa-low  { height: calc(25px  * var(--bs)); }
.so-low  { height: calc(30px  * var(--bs)); }
.la-low  { height: calc(40px  * var(--bs)); }
.ti-low  { height: calc(50px  * var(--bs)); }
.do      { height: calc(60px  * var(--bs)); }
.re      { height: calc(70px  * var(--bs)); }
.mi      { height: calc(80px  * var(--bs)); }
.fa      { height: calc(90px  * var(--bs)); }
.so      { height: calc(100px * var(--bs)); }
.la      { height: calc(110px * var(--bs)); }
.ti      { height: calc(120px * var(--bs)); }
.do-high { height: calc(130px * var(--bs)); }
.re-high { height: calc(140px * var(--bs)); }
.mi-high { height: calc(150px * var(--bs)); }
.fa-high { height: calc(160px * var(--bs)); }
.so-high { height: calc(170px * var(--bs)); }
.la-high { height: calc(180px * var(--bs)); }

.accidental-symbol {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: calc(18px * var(--bs)); font-weight: 700;
  font-family: 'Noto Serif', 'Times New Roman', serif;
  text-shadow: 0 0 2px rgba(0,0,0,.5); pointer-events: none; z-index: 10;
}
.letter-name {
  position: absolute; top: calc(-24px * var(--bs)); left: 50%; transform: translateX(-50%);
  font-size: calc(22px * var(--bs)); font-weight: 800; white-space: nowrap;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.solfege-name {
  font-family: var(--lyric-font);
  font-size: calc(17px * var(--bs)); font-weight: 600; color: #fff; text-transform: lowercase;
  opacity: 0; transition: opacity .3s ease; align-self: center; line-height: 1;
}
.show-names .letter-name, .show-names .solfege-name { opacity: 1; }
.show-names .harmony-stack.has-multiple-notes .letter-name { display: none !important; }

.text {
  font-family: var(--lyric-font);
  font-size: calc(22px * var(--text-scale));
  font-weight: 600;
  text-align: center;
  color: #333;
  white-space: nowrap;
  min-height: calc(24px * var(--text-scale));
  display: flex; align-items: center; justify-content: center;
  padding: 0 2px;
}
.text-input {
  font-family: var(--lyric-font);
  font-size: calc(18px * var(--text-scale)); font-weight: 600; text-align: center; color: #333;
  width: calc(6ch + 20px); min-width: 30px;
  background: rgba(255,255,255,.95); border: 2px solid #F08A00; border-radius: 5px;
  padding: 2px 4px; outline: none; box-shadow: 0 0 8px rgba(240,138,0,.3);
}

/* the mark under a written column — only when the staff is switched off */
.value-mark {
  position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  display: none; color: var(--c); pointer-events: none; z-index: 5;
}
body:not(.show-staff) .value-mark { display: block; }
/* a tie, with the staff off: an arc under the marks, from this column's
   to the next one's (a tie's two notes sit side by side in one syllable) */
body:not(.show-staff) .harmony-stack.notated[data-tie]::before {
  content: ''; position: absolute; z-index: 5; pointer-events: none;
  top: calc(100% + 17px); left: calc(50% + 4px); width: calc(100% - 8px); height: 7px;
  border-bottom: 2px solid #5C4E6B; border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* ---- the staff (staff.js) ----
   A written column keeps its bar for layout and for clicking — the bar
   is where the column is — but the bar goes clear and the notehead the
   SVG draws stands in its place, at the same height. The SVG is the
   line's first child, so the blocks that remain paint over the staff. */
.staff-svg {
  position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible;
  fill: none; stroke: none;
}
.staff-svg text { font-family: var(--font); }
.staff-svg text.bar-num { font-family: var(--font); font-weight: 800; }
.notation-line.has-staff { justify-content: flex-start; padding-left: calc(20px + var(--staff-prefix, 0px)); }
/* --sx-rise: a row whose stems, beams or ledger notes reach past the usual
   room gets more above it. --sx-drop fits the words to the row's lowest
   ink (staff.js planLine): negative lifts them up under the staff once no
   block is left standing on the bar base, positive takes them under a low
   note. A lifted word overlaps the bottoms of its written columns' clear
   bars, so it sits over them (above even a selected bar's 20) and a tap on
   the word still reaches the word. */
.notation-line.has-staff .notes-container { min-height: calc(var(--staff-top, 0px) + var(--sx-rise, 0px)); margin-bottom: calc(8px * var(--bs) + var(--sx-drop, 0px)); }
.notation-line.has-staff .text, .notation-line.has-staff .text-input { position: relative; z-index: 21; }
/* rows end on bar lines (staff.js planLine): a zero-height break forces the
   wrap, and the row gap moves onto the syllables so the break adds none */
.notation-line.has-staff { row-gap: 0; padding-bottom: 0; }
/* ENGRAVED SPACING (staff.js "WHERE THE NOTES GO ACROSS"). On a written
   line the engraver decides where every column goes and hands the answer
   over as custom properties: syllables tile each row edge to edge
   (--sx-w, and --sx-ml on a row's first), their columns start at --sx-nl
   with --sx-mr of room after each, and the word (and the lane's chord)
   are placed at --sx-ta (--sx-ca). Nothing here centres or pads, so the
   browser puts every column exactly where the plan says. */
.notation-line.has-staff { column-gap: 0; }
.notation-line.has-staff .syllable { flex: none; min-width: 0; width: var(--sx-w, auto); margin-left: var(--sx-ml, 0px); margin-right: 0; }
.notation-line.has-staff .syl-body { padding-left: 0; padding-right: 0; align-items: flex-start; }
.notation-line.has-staff .notes-container { margin-left: var(--sx-nl, 0px); justify-content: flex-start; }
.notation-line.has-staff .harmony-stack { margin-right: var(--sx-mr, 0px); }
.notation-line.has-staff .text, .notation-line.has-staff .text-input { margin-left: var(--sx-ta, 50%); transform: translateX(-50%); }
.notation-line.has-staff .chord-slot { padding-left: var(--sx-ca, 2px); }
.notation-line.has-staff .syllable { margin-bottom: calc(14px * var(--bs)); }
.row-break { flex: 0 0 100%; width: 100%; height: 0; margin: 0; padding: 0; pointer-events: none; }
body.show-staff .harmony-stack.notated .note { opacity: 0; box-shadow: none !important; }
body.show-staff .harmony-stack.notated .note .accidental-symbol { display: none; }
/* the written column's names are drawn on the staff */
body.show-staff .harmony-stack.notated .letter-name, body.show-staff .harmony-stack.notated .solfege-name { display: none !important; }

/* ---- the chord lane (chord-lane.js) ---- */
.chord-slot {
  display: none;
  margin-bottom: auto;
  height: calc(26px * var(--text-scale));
  align-items: center;
  justify-content: flex-start;
  padding: 0 2px;
  position: relative;
  font-family: var(--font-block);
  font-weight: 600;
  font-size: calc(17px * var(--text-scale));
  color: var(--ink);
  white-space: nowrap;
  border-radius: 7px;
}
body.show-lane .chord-slot { display: flex; }
body.show-lane .notation-line { padding-top: 34px; }
.chord-slot .chord-sym {
  position: relative; z-index: 1;
  padding: 0 7px; line-height: 1.5; border-radius: 7px;
  background: var(--c-soft, #f3eef6);      /* rgba() from chord-lane.js: html2canvas 1.4.1 cannot read color-mix() */
  border-bottom: 3px solid var(--c);
}
.chord-slot.unknown .chord-sym { border-bottom-style: dotted; }
.chord-slot .chord-sym.held { background: transparent; border-bottom: none; color: var(--ink-3); font-size: .85em; }
.chord-slot .chord-hold { display: block; width: calc(100% + 8px); margin-left: -6px; height: 3px; border-radius: 2px; background: var(--c-line, #d8cae0); }
.chord-slot .chord-add { display: none; width: 100%; text-align: center; color: #F08A00; font-family: var(--font); font-weight: 800; font-size: 14px; }
body.editing .chord-slot { cursor: pointer; }
/* Edit: the selected word's empty slot offers a dashed orange + */
body.editing .syllable.highlighted .chord-slot:not(.has-chord) { outline: 1.5px dashed #F08A00; outline-offset: -1px; }
body.editing .syllable.highlighted .chord-slot:not(.has-chord):not(.holds) .chord-add { display: block; }
/* the chosen slot: strip chords and 1–9 write into it while it glows */
body.editing .chord-slot.chosen { outline: 2px solid #F08A00 !important; outline-offset: -1px; background: rgba(255,149,0,.14); box-shadow: 0 0 10px rgba(255,149,0,.45); }
body.chords-locked .chord-slot .chord-add { display: none !important; }
body.chords-locked .chord-slot:not(.has-chord) { outline-color: transparent !important; }
.chord-slot:hover .chord-sym { filter: brightness(.97); }

/* ============================================================
   THE EDIT BOX — every note tool, in one box that floats over the
   stage while the hat is on (js/components/edit-box.js). The title bar
   drags it; the JS keeps it inside the window. It wears the hat's
   orange, and is hidden in Present. Outside #score, so color-mix() is
   safe here.
   ============================================================ */
.edit-box {
  --eb-circle: 38px;      /* the value circles */
  --eb-btn-h: 36px;       /* every other button */
  position: fixed; z-index: 50;                 /* over the bars, under popovers (60) and windows */
  left: auto; right: 16px; top: calc(var(--topbar-h) + 12px);
  width: 200px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
  display: none; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg);
  border: 1.5px solid rgba(240,138,0,.32);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
body.editing .edit-box { display: flex; animation: eb-in .2s cubic-bezier(.2,.9,.3,1); }
.edit-box.dragging { box-shadow: var(--shadow-3); }
@keyframes eb-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.edit-box [hidden] { display: none !important; }

.eb-head {
  flex: none; display: flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 4px 0 9px;
  background: var(--edit-soft); color: var(--edit);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.edit-box.dragging .eb-head { cursor: grabbing; }
.eb-grip svg { width: 8px; height: 14px; fill: currentColor; stroke: none; opacity: .5; }
.eb-hat { width: 24px; height: 17px; flex: none; color: var(--edit-glow); }
.eb-title { flex: 1; font-family: var(--font-round); font-size: 16px; font-weight: 700; line-height: 1; }
.eb-fold { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--edit); transition: background .12s; }
.eb-fold:hover { background: rgba(255,255,255,.75); }
.eb-fold svg { width: 18px; height: 18px; stroke-width: 2.6; transition: transform .2s; }
.edit-box.folded .eb-fold svg { transform: rotate(180deg); }
.edit-box.folded .eb-body { display: none; }

.eb-body { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 0 11px 11px; }
.eb-section { display: flex; flex-direction: column; gap: 7px; padding: 10px 0 2px; border-top: 1px solid var(--hairline); margin-top: 8px; }
.eb-section.eb-first { border-top: none; margin-top: 0; }
.eb-kicker { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); line-height: 1; }
.eb-empty { margin: 12px 0 2px; font-size: 13px; font-weight: 700; color: var(--ink-3); text-align: center; }

.eb-row { display: flex; gap: 6px; }
.eb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.eb-btn {
  flex: 1 1 0; min-width: 0; height: var(--eb-btn-h);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 5px;
  border-radius: 10px; background: var(--paper-2); color: var(--ink-2);
  font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap;
  transition: background .12s, color .12s, opacity .12s;
}
.eb-btn span { overflow: hidden; text-overflow: ellipsis; }
.eb-btn svg { width: 15px; height: 15px; flex: none; }
.eb-btn.eb-harmony svg { width: 14px; height: 16px; }
.eb-btn:hover:not(:disabled) { background: var(--edit-soft); color: var(--edit); }
.eb-btn.on, .eb-btn.on:hover:not(:disabled), .eb-btn.open { background: var(--edit); color: #fff; }
.eb-btn:disabled { opacity: .35; }
.eb-btn.danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); }
.eb-btn.armed, .eb-btn.armed:hover:not(:disabled) { background: var(--danger); color: #fff; animation: armPulse 1s infinite; }
.eb-square { flex: 0 0 var(--eb-btn-h); padding: 0; font-size: 20px; font-weight: 900; }
.eb-wide { grid-column: 1 / -1; }
/* + Note/Syllable and + Note Only: one action, two ways — the same
   first line, what differs underneath */
.eb-btn.eb-add { flex-direction: column; gap: 2px; height: auto; min-height: calc(var(--eb-btn-h) + 8px); padding: 5px 4px; }
.eb-add-main { font-size: 13.5px; font-weight: 900; }
.eb-add-sub { font-size: 11px; font-weight: 800; opacity: .8; }
/* the View switch, at the foot of the box, in the hat's orange */
.eb-staff { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--hairline); }
.eb-switch.switch-row { padding: 6px 2px 4px; gap: 0 8px; border-radius: 10px; }
.eb-switch .switch-name { font-size: 13px; font-weight: 800; }
.eb-switch .switch-desc { font-size: 11px; }
.eb-switch .switch-pill { width: 36px; height: 21px; }
.eb-switch .switch-pill::after { width: 16px; height: 16px; }
.edit-box .eb-switch.active .switch-pill { background: var(--edit); }       /* beats .switch-row.active, later in the file */
.edit-box .eb-switch.active .switch-pill::after { transform: translateX(15px); }
.eb-glyph { font-family: var(--font-signature); font-size: 18px; font-weight: 900; }
@keyframes armPulse { 50% { transform: scale(1.06); } }

/* the syllable: Rhythm Poetry's beat pill, shrunk to one syllable —
   a dot per note in time, − / + at its ends */
.eb-pill { display: flex; align-items: center; gap: 4px; min-height: var(--eb-btn-h); padding: 3px; border-radius: 12px; background: var(--paper-2); }
.eb-dots { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; padding: 4px 0; }
.eb-pm {
  width: calc(var(--eb-btn-h) - 6px); height: calc(var(--eb-btn-h) - 6px); flex: none;
  display: grid; place-items: center; border-radius: 9px; background: var(--surface);
  font-size: 19px; font-weight: 900; line-height: 1; color: var(--ink-2);
  transition: color .12s, opacity .12s;
}
.eb-pm:hover:not(:disabled) { color: var(--edit); }
.eb-pm:disabled { opacity: .35; }
.vdot {
  width: 15px; height: 15px; border-radius: 50%; background: var(--c);
  border: none; padding: 0; cursor: pointer;
}
.vdot.is-block { background: transparent; box-shadow: inset 0 0 0 2px var(--c); border-radius: 4px; }
.vdot.is-rest { background: #525b64; }
.vdot.cur { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--gold); }
.vdot.is-block.cur { box-shadow: inset 0 0 0 2px var(--c), 0 0 0 2px #fff, 0 0 0 3.5px var(--gold); }

/* the "+ Add a line" row — Ostinato Builder's Add row (Edit only) */
.add-line-row { display: none; }
body.editing .add-line-row { display: flex; justify-content: center; padding: 2px 18px 36px; }
.add-line-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px;
  border-radius: var(--r-md); border: 2px dashed var(--hairline-2); background: transparent;
  font-family: var(--font-round); font-size: 15px; font-weight: 700; color: var(--ink-3);
  transition: border-color .13s, color .13s, background .13s;
}
.add-line-btn:hover, .add-line-btn:active { border-color: #F08A00; color: #F08A00; background: #FFF1DE; }
.add-line-btn svg { width: 17px; height: 17px; }

/* ============================================================
   CHORD PANEL (chord-strip.js) — Digital Accordion's chord side:
   the scale's fourteen chords in the Panels shape (rows share the
   height, F is wide), the set button, the Z X C V B tabs along the
   bottom. Names are fitted by chord-strip.js (fitLabels); the colours
   are the root letter's, as the blocks'.
   ============================================================ */
.chord-strip {
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  container-type: inline-size;
}
.strip-head { display: flex; align-items: center; gap: 5px; min-height: 24px; }
.strip-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--chord); }
/* the two small buttons: names (shows the other way: C while numerals are on, I while letters are) and ♪ notes */
.head-btn {
  flex: none; width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--paper-2); color: var(--ink-2);
  font-family: var(--font-block); font-weight: 600; font-size: 13.5px; line-height: 1;
  transition: background .13s, color .13s;
}
.head-btn:hover { background: var(--hairline); color: var(--ink); }
.head-btn.on { background: var(--chord); color: #fff; }
.head-btn svg { width: 16px; height: 16px; stroke-width: 2.2; }
.name-btn.letters { font-family: var(--font-signature); font-weight: 900; font-size: 14px; }
.set-btn { margin-left: auto; }
.set-short { display: none; }
@container (max-width: 176px) { .strip-title { display: none; } }
/* a phone's panel: the set button's short name, the two buttons a touch smaller */
@container (max-width: 130px) {
  .set-long { display: none; }
  .set-short { display: inline; }
  .set-btn { padding: 0 5px; font-size: 10px; letter-spacing: .02em; }
  .head-btn { width: 21px; height: 21px; font-size: 12px; border-radius: 6px; }
  .head-btn svg { width: 13px; height: 13px; }
  .strip-head { gap: 3px; }
}
/* Core · Full · Extended · Extreme */
.set-btn {
  height: 24px; padding: 0 9px; border-radius: 8px;
  background: var(--chord-soft); color: var(--chord);
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  transition: background .13s, color .13s;
}
.set-btn:hover { background: var(--chord); color: #fff; }
.strip-tower {
  flex: 1 1 auto; min-height: 0; max-height: 640px;
  display: flex; flex-direction: column-reverse; gap: 5px;
  margin-top: auto;
}
.crow { display: flex; gap: 5px; flex: 1 1 0; min-height: 0; max-height: 118px; }
.strip-empty { margin: auto 0; font-size: 12px; font-weight: 700; color: var(--ink-3); text-align: center; line-height: 1.4; }
.cblock {
  position: relative;
  flex: 1 1 0;
  min-width: 0; min-height: 30px;
  border-radius: 12px;
  background: var(--c, #888);
  background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%);
  color: var(--ink, #fff);
  font-family: var(--font-block);
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 5px rgba(0,0,0,.18);
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  transition: transform .06s, filter .06s, box-shadow .06s;
}
.cblock[style*="--ink:#1c1a22"] { text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.cblock.out-of-scale { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 6px, transparent 6px 12px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.18); }
.cblock:hover { filter: brightness(1.08); }
.cblock.selected { box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 0 0 5px var(--c), 0 4px 12px rgba(0,0,0,.3); }
.cblock.is-on { transform: scale(1.05); filter: brightness(1.2) saturate(1.1); z-index: 3; }
/* a chord changed by a held button, or by a function stuck to it: a white inner ring */
.cblock.modded { box-shadow: inset 0 0 0 3px rgba(255,255,255,.9), inset 0 -3px 0 rgba(0,0,0,.18), 0 0 12px rgba(255,255,255,.5), 0 2px 5px rgba(0,0,0,.18); }
.cblock.modded.selected { box-shadow: inset 0 0 0 3px rgba(255,255,255,.9), 0 0 0 3px rgba(255,255,255,.7), 0 0 0 5px var(--c), 0 4px 12px rgba(0,0,0,.3); }
/* a re-chorded place wears a small white corner */
.cblock.custom::before { content: ''; position: absolute; left: 0; top: 0; border: 7px solid transparent; border-top-color: rgba(255,255,255,.8); border-left-color: rgba(255,255,255,.8); border-top-left-radius: 12px; }
.cb-main { line-height: 1; white-space: nowrap; text-align: center; }
/* ♪ notes: the block stacks its key, its name and its notes (root at the bottom) */
.cblock.has-tones { flex-direction: column; justify-content: center; gap: 3px; padding: 5px 3px; }
.cblock.has-tones .cb-key { position: static; margin: 0; }
.cblock.has-tones .cb-edit { top: 3px; right: 3px; }
.cb-tones { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; }
.cb-tones i {
  font-style: normal; font-family: var(--font-block); font-weight: 600; font-size: var(--tf, 10px);
  height: var(--th, 16px); line-height: var(--th, 16px); min-width: 22px; max-width: 100%; padding: 0 4px; border-radius: 5px;
  background: var(--c); text-shadow: none; text-align: center; white-space: nowrap; overflow: hidden;
  box-shadow: inset 0 -1.5px 0 rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.14);
}
.cb-main.two { display: flex; flex-direction: column; align-items: center; gap: .1em; line-height: .95; }
.cb-key {
  position: absolute; right: 4px; bottom: 4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 4px;
  font-family: var(--font); font-size: 10px; font-weight: 900; line-height: 15px; text-align: center;
  background: rgba(0,0,0,.3); color: #fff; text-shadow: none;
}
body.hide-keycaps .cb-key, body.hide-keycaps .cmod-key { display: none; }
/* the hat on: a pencil on every chord opens its editor */
.cb-edit {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--edit); color: #fff; text-shadow: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .1s, background .13s;
}
.cb-edit svg { width: 12px; height: 12px; }
.cb-edit:hover { transform: scale(1.1); background: var(--edit-glow); }
/* figured bass (I⁶₄, V⁶₅) as a small stack beside the numeral */
.figs { display: inline-flex; flex-direction: column; vertical-align: -.12em; margin-left: .07em; font-size: .48em; line-height: .92; font-weight: 700; }
.figs i { font-style: normal; }
.fig { font-size: .55em; vertical-align: super; line-height: 0; font-weight: 700; }

/* Z X C V B: hold a tab (or its key) while you play */
.strip-mods { display: flex; gap: 4px; }
.cmod {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 4px 1px 3px; border-radius: 8px;
  border: 1.5px solid var(--hairline-2); background: var(--paper-2);
  font-size: 10px; font-weight: 800; color: var(--ink-2); white-space: nowrap; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: background .1s, color .1s, transform .06s, box-shadow .1s;
}
.cmod-key { font-size: 10.5px; font-weight: 900; color: var(--ink-3); }
.cmod-name { font-size: 10px; line-height: 1.1; }
.cmod-name .figs { font-size: .6em; vertical-align: -.2em; }
.cmod:hover { background: var(--hairline); }
.cmod.on { background: var(--chord); border-color: var(--chord); color: #fff; transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 10px rgba(159,79,255,.45); }
.cmod.on .cmod-key { color: rgba(255,255,255,.8); }
.cmod.empty { border-style: dashed; background: transparent; color: var(--ink-3); }
.cmod-edit {
  flex: none; width: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--edit-soft); color: var(--edit);
  transition: background .13s, color .13s;
}
.cmod-edit svg { width: 13px; height: 13px; }
.cmod-edit:hover { background: var(--edit); color: #fff; }

/* ============================================================
   THE CORNER under the panel, beside the keyboard (chord-strip.js,
   keyboard-dock.js): top — the chord in hand, its other name and its
   notes as coloured pills; bottom — the keyboard's Octaves and Focus.
   The inner box is absolute, so the corner never makes the dock's row
   taller than the keyboard asks for; a container query hides the
   small print when the dock is short.
   ============================================================ */
.dock-corner {
  position: relative;
  background: linear-gradient(180deg, #F3EDF5, #EAE1EE);   /* the keyboard dock's */
  border-right: 1px solid var(--hairline-2);
  border-top: 1px solid var(--hairline-2);
  container-type: size;
}
.corner-inner { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 8px 10px; }
.corner-now {
  flex: 1 1 0; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 4px 8px 5px; border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow-1);
  overflow: hidden;
}
.cn-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 0; }
.cn-key { flex: none; font-size: 9.5px; font-weight: 900; line-height: 15px; min-width: 15px; padding: 0 4px; border-radius: 4px; background: var(--ink-3); color: #fff; text-align: center; }
.cn-name { font-family: var(--font-block); font-weight: 600; font-size: clamp(17px, calc(var(--dock-h) * .17), 28px); line-height: 1.05; color: var(--c, var(--ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-alt { font-size: 11px; line-height: 1.2; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-note { color: var(--ink-3); font-weight: 600; }
.cn-note::before { content: ' · '; }
.cn-tones { display: flex; gap: 3px; flex-wrap: wrap; }
.cn-tones i, .cp-tones i {
  font-style: normal; font-family: var(--font-block); font-weight: 600; font-size: 11px;
  min-width: 21px; height: 19px; line-height: 19px; padding: 0 5px; border-radius: 6px; text-align: center;
  background: var(--c); box-shadow: inset 0 -2px 0 rgba(0,0,0,.14);
}
.corner-now.idle .cn-name { opacity: .7; }
.corner-now.modded .cn-name { text-shadow: 0 0 10px rgba(159,79,255,.35); }
/* the keyboard's two rows, seated here by keyboard-dock.js */
.corner-panel { flex: none; }
.corner-panel:empty { display: none; }
.corner-panel .kbd-panel { --pb: 27px; flex-direction: column; gap: 4px; }
.corner-panel .kbd-kicker { display: none; }
.corner-panel .kbd-oct-btns { grid-template-columns: repeat(4, 1fr); }
.corner-panel .kbd-oct-btn { min-width: 0; }
.corner-panel .kbd-focus { width: 100%; padding: 0 8px; }
.corner-panel .kbd-focus span { display: inline; }
@container (max-height: 140px) {
  .cn-alt { display: none; }
  .corner-inner { gap: 4px; padding: 6px 8px 6px 10px; }
  .corner-now { padding: 3px 8px; gap: 2px; }
}
@container (max-height: 108px) {
  .cn-tones { display: none; }
  .corner-panel .kbd-panel { --pb: 24px; gap: 3px; }
}

/* ============================================================
   KEYBOARD DOCK (keyboard-dock.js) — dressed as the Virtual Keyboard app:
   a black frame, rainbow keys (the top half of a key wears its letter's
   colour, as the blocks do), a panel at the left end (Octaves 1–4 ·
   Focus) and a grip on the top edge for the height. The instrument keeps
   its own colours; the panel wears Song Writer's.

   Sizes come from keyboard-dock.js as variables on #keyboard-dock:
     --kw  white-key width      --kh  key height (the keyboard's height)
     --nw  white keys showing   --s   the first one showing (from C2)
     --pb  the panel's button height
   ============================================================ */
.keyboard-dock {
  position: relative;
  align-items: center;
  column-gap: 14px;
  padding: 15px 14px 11px;
  background: linear-gradient(180deg, #F3EDF5, #EAE1EE);
  border-top: 1px solid var(--hairline-2);
  --kw: 40px; --kh: 110px; --nw: 17; --s: 0; --pb: 30px;
  --bw: calc(var(--kw) * .6);
  --bh: calc(var(--kh) * .62);
  --wr: min(8px, calc(var(--kw) * .16));
  --br: min(5px, calc(var(--bw) * .18));
  user-select: none; -webkit-user-select: none;
}
body.show-dock .keyboard-dock { display: flex; }
.keyboard-dock.no-anim, .keyboard-dock.no-anim * { transition: none !important; }

/* the grip on the top edge: drag for the height */
.kbd-grip {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 7;
  width: 76px; height: 15px; display: grid; place-items: center;
  cursor: ns-resize; touch-action: none; border-radius: 0 0 9px 9px;
}
.kbd-grip span { width: 38px; height: 4px; border-radius: 2px; background: #CDBFD5; transition: background .15s, width .15s; }
.kbd-grip:hover span, .kbd-grip:focus-visible span, body.kbd-resizing .kbd-grip span { background: var(--accent); width: 48px; }
.kbd-grip:focus-visible { outline: none; }
body.kbd-resizing, body.kbd-resizing * { cursor: ns-resize !important; }

/* ---- the panel: Octaves 1–4 and Focus ---- */
.kbd-panel { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 4px; z-index: 2; }
.kbd-kicker {
  display: none; margin: 0 0 3px; text-align: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.kb-tall:not(.kb-narrow) .kbd-kicker { display: block; }
.kbd-oct-btns {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px;
  border-radius: 11px; background: var(--surface);
  border: 1px solid var(--hairline-2); box-shadow: var(--shadow-1);
}
.kbd-oct-btn {
  min-width: calc(var(--pb) * .9); height: calc(var(--pb) - 6px); border-radius: 8px;
  font-family: var(--font-block); font-weight: 600; font-size: clamp(13px, calc(var(--pb) * .5), 18px);
  color: var(--ink-2);
  transition: background .14s, color .14s, box-shadow .14s;
}
.kbd-oct-btn:hover { background: var(--paper-2); color: var(--ink); }
.kbd-oct-btn.on { background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(122,15,111,.35); }
.kbd-focus {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--pb); padding: 0 10px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--hairline-2); box-shadow: var(--shadow-1);
  font-size: clamp(12px, calc(var(--pb) * .42), 14.5px); font-weight: 800; color: var(--ink-2);
  transition: background .14s, color .14s, border-color .14s;
}
.kbd-focus svg { width: clamp(14px, calc(var(--pb) * .52), 18px); height: clamp(14px, calc(var(--pb) * .52), 18px); flex: none; }
.kbd-focus:hover { background: var(--paper-2); color: var(--ink); }
.kbd-focus.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 4px rgba(122,15,111,.35); }
.kbd-focus.on:hover { background: var(--accent-deep); }
/* a phone, or the Chords workspace on a tablet: the numbers two by two, Focus as its icon */
.kb-narrow .kbd-oct-btns { grid-template-columns: repeat(2, 1fr); }
.kb-narrow .kbd-oct-btn { min-width: calc(var(--pb) * .95); height: calc(var(--pb) - 4px); }
.kb-narrow .kbd-focus { padding: 0; }
.kb-narrow .kbd-focus span { display: none; }

/* ---- the instrument ---- */
.kbd-stage { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.kbd-spacer { flex: none; height: 1px; }
.kbd-frame {
  position: relative; flex: none;
  padding: 6px;
  border-radius: 12px;
  background: linear-gradient(180deg, #221F27, #121015);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 26px -8px rgba(43,29,56,.55), 0 2px 5px rgba(43,29,56,.2);
}
.kbd-viewport {
  position: relative; overflow: hidden;
  width: calc(var(--nw) * var(--kw)); height: var(--kh);
  border-radius: 2px 2px var(--wr) var(--wr);
}
/* the fallboard's shadow across the tops of the keys */
.kbd-viewport::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,0));
}
.kbd-strip {
  position: absolute; top: 0; bottom: 0; left: 0; width: calc(36 * var(--kw));
  transform: translateX(calc(var(--s) * var(--kw) * -1));
  transition: transform .34s cubic-bezier(.2,.8,.3,1);
  will-change: transform;
}

.kkey {
  position: absolute; top: 0; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  font-family: var(--font-block);
  touch-action: none; -webkit-tap-highlight-color: transparent;
  transition: background .1s, box-shadow .12s, opacity .2s, transform .06s;
}
.kkey:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }

/* white keys: the letter's colour on top, ivory below, a lip at the front */
.kkey.white {
  left: calc(var(--x) * var(--kw));
  width: var(--kw); height: 100%;
  z-index: 1;
  border-right: 1px solid #ADA8B8;
  border-radius: 0 0 var(--wr) var(--wr);
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 16%, rgba(255,255,255,0) 44%, rgba(0,0,0,var(--band-shade, .08)) 50%, rgba(0,0,0,0) 50%),
    linear-gradient(180deg, var(--band-c) 0 50%, #FEFDFF 50%, #F1EEF4 100%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.6), inset 0 -5px 0 #E1DDE7, inset 0 -6px 0 #CFCAD8;
}
/* black keys: gloss at the top, a bevel at the front */
.kkey.black {
  left: calc(var(--x) * var(--kw) - var(--bw) / 2 + var(--lean) * var(--bw));
  width: var(--bw); height: var(--bh);
  z-index: 3;
  border: 1px solid #050407; border-top: 0;
  border-radius: 0 0 var(--br) var(--br);
  background: linear-gradient(180deg, #34313A 0%, #151318 9%, #0E0D11 76%, #2E2B34 88%, #19171D 100%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(255,255,255,.03), 0 2px 3px rgba(0,0,0,.45), 1px 4px 7px rgba(0,0,0,.22);
}
/* a black key that belongs to the key (A♭ in A♭, F♯ in G) wears its
   colour on a cap: from the top down to halfway to the white keys' colour
   line — 25% of the key height, which is 25/62 = 40.3% of a black key —
   so it still reads as a long black key, not a stubby one */
.kkey.black.in-key {
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 9%, rgba(0,0,0,0) 34%, rgba(0,0,0,.16) 40.3%, rgba(0,0,0,0) 40.3%),
    linear-gradient(180deg, var(--band-c) 0 40.3%, #151318 40.3%, #0E0D11 76%, #2E2B34 88%, #19171D 100%);
}
/* View → Key colours, the two plain choices: no colour until a key lights
   (keyboard-dock.js paints the white keys' band ivory, and drops the caps) */
.keyboard-dock.kc-plain { --band-shade: 0; }
/* a black key cut in half by either end of the window */
.kkey.black.clipped { opacity: 0; pointer-events: none; }

/* Focus: the keys outside the key (and the song) go grey and silent */
.kkey.white.off {
  background: linear-gradient(180deg, #CFCDD5, #C3C1CA);
  border-right-color: #A19DAB;
  box-shadow: inset 0 -5px 0 #B7B3BF;
  cursor: not-allowed;
}
.kkey.black.off {
  background: linear-gradient(180deg, #5E5B65, #4A4851);
  border-color: #3a3840;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  cursor: not-allowed;
}

/* the selected note (a harmony stack lights every note): its block's
   colour and the lamp — no gold ring, glow or caret (user, 2026-09-26).
   A chord's keys light the same way, without the lamp (user, same day). */
.kkey.white.lit, .kkey.white.chord {
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 34%), var(--lit-c);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), inset 1px 0 0 rgba(255,255,255,.35);
}
.kkey.black.lit, .kkey.black.chord {
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 40%, rgba(0,0,0,0) 80%, rgba(0,0,0,.22)), var(--lit-c);
  z-index: 4;
}
/* the lamp: a white bead in one row along the top of the keys — the same
   height on a white key and a black one, just under the fallboard; on a
   white key, centred in the gap its black neighbours leave (--dot-x) */
.kkey.lit::before {
  content: ''; position: absolute; left: var(--dot-x, 50%); transform: translateX(-50%);
  top: clamp(9px, calc(var(--kh) * .09), 18px);
  width: clamp(6px, calc(var(--kw) * .2), 12px); aspect-ratio: 1; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.12), 0 0 8px 2px rgba(255,255,255,.85);
}

/* a key being played: all its colour, pressed down */
.kkey.white.pressed {
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0) 14%), var(--press-c);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
}
.kkey.black.pressed {
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 85%, rgba(0,0,0,.25)), var(--press-c);
  transform: scaleY(.985); transform-origin: top;
}
.kkey.pressed .kkey-name { color: var(--press-ink) !important; opacity: 1; }

/* names: always the C of each octave, every key with the glasses on */
.kkey-name {
  position: relative; pointer-events: none; white-space: nowrap; line-height: 1;
  margin-bottom: calc(8px + var(--kh) * .03);
  font-size: clamp(9px, calc(var(--kw) * .36), 19px); font-weight: 600;
  color: #2D2934; opacity: 0; transition: opacity .15s;
}
.kkey-name small { position: relative; top: -.5em; margin-left: .06em; font-size: .62em; font-weight: 500; }
.kkey-name i { font-style: normal; font-size: .85em; }
.kkey.white.is-c .kkey-name { opacity: 1; color: #8C8797; }
body.show-names .kkey.white .kkey-name { opacity: 1; color: #2D2934; }
.kkey.black .kkey-name { color: #fff; font-size: clamp(8px, calc(var(--bw) * .42), 15px); margin-bottom: calc(var(--bh) * .16); }
body.show-names .kkey.black .kkey-name { opacity: .95; }
.kkey.lit .kkey-name, .kkey.chord .kkey-name { opacity: 1 !important; color: var(--lit-ink) !important; }
.kkey.off .kkey-name { color: #7A7784 !important; }
.kkey.black.off .kkey-name { color: #C5C3CB !important; }
.kkey.off.chord .kkey-name { color: var(--lit-ink) !important; }   /* a chord note Focus greys still lights */
.kw-sm .kkey.black .kkey-name, .kw-sm .kkey-name small { display: none; }
.kw-xs .kkey-name { display: none; }

/* phones: a tighter dock */
.keyboard-dock.kb-narrow { column-gap: 8px; padding: 14px 8px 8px; }
.kb-narrow .kbd-frame { padding: 5px; border-radius: 10px; }

/* ============================================================
   BOTTOM TOOLBAR — one row on a computer, the family's order.
   Three columns, like the top bar: the left one gives way first, so
   on a tight screen the cluster slides left rather than the step pad
   sliding over it.
   ============================================================ */
.toolbar {
  flex: 0 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  z-index: 40;
}
.toolbar-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  column-gap: 10px;
  min-height: var(--toolbar-h);
  padding: 9px 14px;
}
.tb-center { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; }
.tb-side { min-width: 0; display: flex; align-items: center; }
.tb-right { justify-content: flex-end; gap: 6px; }
.tool-group { display: flex; align-items: center; gap: 7px; padding: 0 9px; border-left: 1px solid var(--hairline); }

/* --- play --- */
.play-btn {
  width: var(--play); height: var(--play); flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  box-shadow: 0 3px 0 rgba(0,0,0,.13);
  transition: transform .12s, background .18s, box-shadow .12s;
}
.play-btn svg { width: 22px; height: 22px; margin-left: 2px; }
.play-btn .stop-icon { display: none; margin-left: 0; }
.play-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(0,0,0,.13); }
.play-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.13); }
.play-btn.is-playing { background: var(--danger); }
.play-btn.is-playing .play-icon { display: none; }
.play-btn.is-playing .stop-icon { display: block; }

/* --- the construction hat: the beat-dot button's place and shape --- */
.hat-toggle {
  width: var(--square); height: var(--square); flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--paper-2); color: var(--ink-3);
  transition: background .13s, color .13s, box-shadow .13s;
}
.hat-toggle svg { width: 28px; height: 20px; transition: filter .2s; }
.hat-toggle:hover { background: var(--hairline); }
body.editing .hat-toggle { background: var(--edit-soft); color: var(--edit-glow); box-shadow: inset 0 0 0 1.5px rgba(255,149,0,.35); }
body.editing .hat-toggle svg { filter: drop-shadow(0 0 3px #ff9500) drop-shadow(0 0 6px rgba(255,149,0,.55)); }

/* --- the value circles: the Edit box's Rhythm section (rhythm-panel.js) --- */
.vd-caption { font-size: 12.5px; font-weight: 700; color: var(--edit); line-height: 1.25; min-height: 2.5em; }
.eb-values .vd-row { display: grid; grid-template-columns: repeat(3, var(--eb-circle)); justify-content: space-between; row-gap: 9px; padding: 2px 3px; }
.value-choice {
  position: relative;
  width: var(--eb-circle); height: var(--eb-circle); flex: none;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--surface); color: var(--c);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent);
  opacity: .78;
  transition: opacity .13s, transform .13s, box-shadow .13s, background .13s;
}
.value-choice svg { flex: none; color: inherit; }
.value-choice:hover:not(:disabled) { opacity: 1; transform: scale(1.08); }
.value-choice:active:not(:disabled) { transform: scale(.94); }
.value-choice.on { opacity: 1; background: var(--c); color: #fff; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.value-choice.on.is-rest { background: #525b64; }
.value-choice:disabled { opacity: .3; }
.value-block .blk-glyph { width: calc(var(--eb-circle) * .36); height: calc(var(--eb-circle) * .56); border-radius: 3px; background: currentColor; }
.value-block.on .blk-glyph { background: #fff; }
.eb-values .eb-row { margin-top: 3px; }
.eb-values .vd-mini svg { width: 14px; height: 14px; }
.eb-values.no-selection .vd-row { opacity: .45; }

/* --- generic tool button --- */
.tool-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--btn-h); padding: 0 13px; flex: none;
  border-radius: var(--r-md);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 14px; font-weight: 700;
  white-space: nowrap;
  transition: background .14s, color .14s, box-shadow .14s;
}
.tool-btn:hover, .tool-btn:active { background: var(--hairline); }
.tool-btn.open { background: var(--accent); color: #fff; }
.tool-icon { width: 18px; height: 18px; flex: none; }
.present-btn.tool-btn { background: var(--accent-soft); color: var(--accent); }
.present-btn.tool-btn:hover, .present-btn.tool-btn:active { background: var(--accent); color: #fff; }
/* Write is part of the edit layer */
body:not(.editing) #textEditorBtn { display: none; }

/* --- key + time: the start of a staff, one tile, three targets --- */
.signature {
  display: flex; align-items: center; flex: none;
  height: var(--sig-h); padding: 2px 4px 2px 6px;
  border-radius: var(--r-md); background: var(--paper-2);
  transition: background .13s;
}
.signature:hover { background: var(--hairline); }
.sig-key {
  height: calc(var(--sig-h) - 10px); min-width: 34px; padding: 0 5px; border-radius: 9px;
  display: inline-flex; align-items: baseline; justify-content: center;
  font-family: var(--font-signature); font-size: 24px; font-weight: 900; line-height: calc(var(--sig-h) - 10px);
  color: var(--kc, var(--ink));
  transition: background .13s, transform .1s;
}
.sig-key small { font-size: 16px; margin-left: 1px; }
.sig-key:hover { background: rgba(0,0,0,.05); transform: scale(1.06); }
.sig-key.open { background: rgba(0,0,0,.07); }
.sig-rule { width: 1px; height: 30px; background: var(--hairline-2); margin: 0 3px; flex: none; }
.time-sig {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-width: 30px; padding: 0 4px;
}
.ts-num {
  font-family: var(--font-signature);
  font-weight: 900;
  font-size: var(--ts-digit);
  line-height: .78;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  padding: 0 1px;
  border-radius: 4px;
  transition: color .13s, background .13s, transform .1s;
}
.ts-num:hover { color: var(--accent); background: rgba(0,0,0,.05); transform: scale(1.08); }
.ts-num:active { transform: scale(.94); }
.ts-num.inert { cursor: default; }
.ts-num.inert:hover, .ts-num.inert:active { color: var(--ink); background: none; transform: none; }
/* a lesson that fixes the meter, the key or the tempo leaves them as plain text */
.time-sig.fixed .ts-num, .sig-key.fixed { cursor: default; }
.time-sig.fixed .ts-num:hover, .time-sig.fixed .ts-num:active,
.sig-key.fixed:hover, .sig-key.fixed:active { color: inherit; background: none; transform: none; }
.time-sig.fixed .ts-num:hover { color: var(--ink); }
.signature.all-fixed, .signature.all-fixed:hover { background: transparent; }

/* --- the scale menu beside the key tile (app.js; Digital Accordion's scales) --- */
.scale-select {
  flex: 0 1 auto; min-width: 0; max-width: 136px;
  height: calc(var(--sig-h) - 10px); padding: 0 26px 0 11px;
  border-radius: 10px; border: 1.5px solid var(--hairline-2);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C168E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 13px 13px;
  font: 700 13px var(--font); color: var(--ink);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .14s, background .14s;
}
.scale-select:hover { border-color: var(--accent); }
.scale-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.scale-select optgroup { color: var(--ink-3); font-weight: 800; }
.scale-select option { color: var(--ink); font-weight: 600; }
/* a lesson that fixes the key fixes the scale: plain text */
.scale-select.fixed { border-color: transparent; background-color: transparent; background-image: none; padding-right: 11px; cursor: default; color: var(--ink); opacity: 1; }

/* --- bpm --- */
.bpm-btn { gap: 4px; }
.bpm-value { font-family: var(--font-round); font-size: 16px; font-weight: 700; }
.bpm-unit  { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--ink-3); }
.bpm-input {
  width: 58px;
  font-family: var(--font-round); font-size: 16px; font-weight: 700;
  text-align: center; color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--accent); border-radius: 8px;
  outline: none; padding: 3px 2px;
  -moz-appearance: textfield;
}
.bpm-input::-webkit-outer-spin-button,
.bpm-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bpm-btn.fixed, .bpm-btn.fixed:hover, .bpm-btn.fixed:active { background: transparent; cursor: default; }

/* --- the glasses: an icon toggle (soft green tint when on) --- */
.names-toggle {
  width: var(--square); height: var(--btn-h); flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--paper-2); color: var(--ink-3);
  transition: background .13s, color .13s;
}
.names-toggle svg { width: 28px; height: 18px; transition: filter .2s; }
.names-toggle:hover { background: var(--hairline); }
body.show-names .names-toggle { background: var(--names-soft); color: var(--names); }
body.show-names .names-toggle svg { filter: drop-shadow(0 0 3px rgba(0,230,90,.55)); }

/* --- the right hand: 1.0's arrows --- */
.step-pad { display: flex; align-items: center; gap: 6px; }
.step-btn {
  width: var(--step); height: var(--step); flex: none;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: #fff;
  box-shadow: 0 3px 0 rgba(0,0,0,.13);
  transition: transform .1s, background .15s, box-shadow .1s;
}
.step-btn svg { width: 22px; height: 22px; stroke-width: 3; }
.step-btn:hover { background: var(--accent-deep); }
.step-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.13); }
.step-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; text-align: right; line-height: 1.15; white-space: nowrap; }

/* ============================================================
   POPOVERS (the family's)
   ============================================================ */
.popover {
  position: fixed; z-index: 60; display: none;
  width: 300px; padding: 14px;
  border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-3);
  overflow-y: auto; overscroll-behavior: contain;
}
.popover-wide { width: 340px; }
.popover.show { display: block; }
.popover.pinned {
  left: 10px !important; right: 10px !important; width: auto !important;
  bottom: calc(var(--toolbar-real) + 10px) !important; top: auto !important;
  max-height: calc(100dvh - var(--toolbar-real) - 70px) !important;
}
.popover-scroll { margin: -4px; padding: 4px; }
.popover-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 4px 2px 8px; }
.popover-title:not(:first-child) { margin-top: 16px; }
.popover-note { margin: 7px 2px 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }
.popover-note:empty { display: none; }
.popover-divider { height: 1px; background: var(--hairline); margin: 13px 0 9px; }
.popover-link {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 700; color: var(--ink-2); text-align: left;
  transition: background .13s, color .13s;
}
.popover-link svg { width: 16px; height: 16px; flex: none; }
.popover-link:hover, .popover-link:active { background: var(--paper-2); color: var(--ink); }
.popover-link-strong { color: var(--ink); }

.switch-list { display: flex; flex-direction: column; gap: 3px; }
.switch-row {
  position: relative; display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "name pill" "desc pill"; align-items: center; gap: 0 12px;
  width: 100%; padding: 9px 10px; border-radius: var(--r-sm); text-align: left;
  transition: background .13s;
}
.switch-row:hover, .switch-row:active { background: var(--paper-2); }
.switch-name { grid-area: name; font-size: 14px; font-weight: 700; color: var(--ink); }
.switch-desc { grid-area: desc; font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.switch-pill { grid-area: pill; position: relative; width: 40px; height: 23px; border-radius: 999px; background: var(--hairline-2); transition: background .18s; }
.switch-pill::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: transform .18s;
}
.switch-row.active .switch-pill { background: var(--accent); }
.switch-row.active .switch-pill::after { transform: translateX(17px); }
.switch-row.soon { opacity: .6; }
.soon-tag { position: absolute; right: 60px; top: 10px; font-size: 10px; font-weight: 800; color: var(--chord); }

.seg { display: inline-flex; padding: 3px; border-radius: var(--r-sm); background: var(--paper-2); gap: 2px; }
.seg-wide { display: flex; }
.seg-wide .seg-btn { flex: 1; }
.seg-btn { padding: 8px 12px; border-radius: 7px; font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; transition: background .14s, color .14s, box-shadow .14s; }
.seg-btn.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-1); }

.zoom-row { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.zoom-btn { width: 38px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--paper-2); font-size: 19px; font-weight: 700; color: var(--ink); }
.zoom-btn:hover:not(:disabled) { background: var(--hairline); }
.zoom-btn:disabled { opacity: .35; }
.zoom-slider { flex: 1; min-width: 0; height: 6px; appearance: none; -webkit-appearance: none; border-radius: 999px; background: var(--hairline); cursor: pointer; }
.zoom-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 1px 4px rgba(43,29,56,.3); }
.zoom-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); }
.zoom-readout { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 0; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }

/* ---- Sound → How it sounds: a card for each side and the Room ---- */
.mixer { display: flex; flex-direction: column; gap: 8px; }
.mix-card { padding: 10px 12px 12px; border-radius: var(--r-md); background: var(--paper-2); }
.mix-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.mix-name { font-family: var(--font-round); font-size: 15px; font-weight: 700; color: var(--ink); }
.sound-select {
  flex: 0 1 172px; min-width: 0; height: 34px; padding: 0 30px 0 11px;
  border-radius: 10px; border: 1.5px solid var(--hairline-2);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C168E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 14px 14px;
  font: 700 13.5px var(--font); color: var(--ink);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .14s, box-shadow .14s;
}
.sound-select:hover { border-color: var(--accent); }
.sound-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.sound-select optgroup { color: var(--ink-3); font-weight: 800; }
.sound-select option { color: var(--ink); font-weight: 600; }
.mix-level { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.mix-level svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.mix-level output { min-width: 40px; text-align: right; font-size: 12.5px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* the track fills up to the level (--fill, set by settings.js) */
.mix-level .zoom-slider { background: linear-gradient(90deg, var(--accent) 0 var(--fill, 50%), var(--hairline-2) var(--fill, 50%)); }
#room-mix .mix-head { min-height: 0; }
#room-mix .mix-level { margin-top: 8px; }
.mix-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }
@media (hover: none), (pointer: coarse) {
  .sound-select { height: 40px; font-size: 14.5px; }
  .mix-level .zoom-slider::-webkit-slider-thumb { width: 24px; height: 24px; }
}

.chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { min-width: 34px; height: 34px; padding: 0 11px; border-radius: 9px; background: var(--paper-2); font-size: 13px; font-weight: 700; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; transition: background .13s, color .13s; }
.chip:hover { background: var(--hairline); color: var(--ink); }
.chip.active { background: var(--accent); color: #fff; }
.font-chip { height: 38px; font-size: 16px; }
.font-chip[data-font="rounded"] { font-family: 'Nunito', sans-serif; }
.font-chip[data-font="reader"] { font-family: 'Andika', sans-serif; }
.font-chip[data-font="clear"] { font-family: 'Atkinson Hyperlegible', sans-serif; }
.font-chip[data-font="story"] { font-family: 'Literata', Georgia, serif; }
.chip-swatch { width: 12px; height: 12px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.text-tool { padding: 4px 10px; border-radius: 7px; font-size: 12px; font-weight: 800; color: var(--accent); transition: background .13s; }
.text-tool:hover { background: var(--accent-soft); }

.size-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 2px; }
.size-row + .size-row { margin-top: 4px; }
.size-row-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.size-row .seg-btn { padding: 6px 12px; }

/* View → Key colours: a card for each way, drawn as a little keyboard,
   and the colours for "One colour" */
.kbc-block { margin-top: 10px; padding: 3px 2px; }
.popover-title + .kbc-block { margin-top: 0; }
.kbc-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.kbc-choice {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 7px 6px 8px; border-radius: var(--r-sm);
  background: var(--paper-2); border: 1.5px solid transparent;
  font-size: 11.5px; font-weight: 800; line-height: 1.2; text-align: center; color: var(--ink-2);
  transition: background .14s, border-color .14s, color .14s;
}
.kbc-choice:hover { background: var(--hairline); }
.kbc-choice.active { background: var(--surface); border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-1); }
.kbc-pic { display: block; width: 100%; padding: 3px 3px 2px; border-radius: 6px; background: #1d1a22; }
.kbc-pic svg { display: block; width: 100%; height: auto; fill: none; stroke: none; }
.kbc-swatches { display: grid; grid-template-columns: repeat(11, minmax(0, 28px)); justify-content: space-between; gap: 4px; margin-top: 10px; }
.kbc-swatch, .kbc-custom {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
  transition: box-shadow .14s, transform .1s;
}
.kbc-swatch { background: var(--sw); }
.kbc-swatch:hover, .kbc-custom:hover { transform: scale(1.1); }
.kbc-swatch.active, .kbc-custom.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
/* any colour: a colour wheel, with the picked colour in its middle */
.kbc-custom { cursor: pointer; background: conic-gradient(#FF3B30, #FFCC00, #34C759, #48C4C8, #007AFF, #AF52DE, #FF2D55, #FF3B30); }
.kbc-custom::after { content: ''; position: absolute; inset: 28%; border-radius: 50%; background: var(--surface); }
.kbc-custom.active::after { background: var(--sw); box-shadow: 0 0 0 1.5px var(--surface); }
.kbc-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
@media (hover: none), (pointer: coarse) {
  .kbc-swatches { grid-template-columns: repeat(11, minmax(0, 34px)); }
}

/* the key popover: thirteen keys in their tonic colours */
.key-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.key-chip {
  height: 40px; border-radius: 10px;
  border: 2px solid var(--kc); color: var(--kc); background: var(--surface);
  font-family: var(--font-signature); font-size: 17px; font-weight: 900;
  transition: background .13s, color .13s, transform .1s;
}
.key-chip:hover { transform: scale(1.05); }
.key-chip.active, .key-chip:active { background: var(--kc); color: #fff; }

/* the lane's chord picker */
.lane-picker { width: 290px; }
.lane-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.lane-choice {
  height: 40px; border-radius: 10px; background: var(--c); color: #fff;
  font-family: var(--font-block); font-weight: 600; font-size: 15px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.lane-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.lane-choice small { font-family: var(--font); font-size: 9px; font-weight: 800; opacity: .8; letter-spacing: .04em; }
.lane-choice.out-of-scale { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 6px, transparent 6px 12px); }
.lane-choice.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.lane-choice:hover { filter: brightness(1.08); }

/* ============================================================
   THE HOVER GAUGES (BPM, View) — the family's; a mouse only
   ============================================================ */
.hover-gauge {
  position: fixed; z-index: 65; display: none; align-items: center; gap: 12px;
  width: 250px; padding: 10px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-3);
}
.hover-gauge.show { display: flex; }
.hover-gauge-label { flex: none; min-width: 56px; font-family: var(--font-round); font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.hover-gauge .zoom-slider { flex: 1; min-width: 0; }
@media (hover: none), (pointer: coarse) {
  .hover-gauge { display: none !important; }
}

/* ============================================================
   SHEETS & WINDOWS (the family's)
   ============================================================ */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 80; display: none;
  align-items: center; justify-content: center; padding: 22px;
  background: rgba(43,29,56,.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.sheet-backdrop.show { display: flex; }
.sheet {
  width: 100%; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px; border-radius: var(--r-xl);
  background: var(--paper); box-shadow: var(--shadow-3);
  animation: sheet-in .2s cubic-bezier(.2,.9,.3,1);
}
.sheet-sm { max-width: 440px; }
.sheet-md { max-width: 640px; }
.sheet-lg { max-width: 740px; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sheet-head h2 { margin: 0; font-family: var(--font-round); font-size: 23px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.sheet-close { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 24px; line-height: 1; color: var(--ink-3); }
.sheet-close:hover { background: var(--hairline); color: var(--ink); }
.sheet-sub { margin: 0 0 15px; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.sheet-foot { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; flex-wrap: wrap; }
.sheet-foot-split { justify-content: space-between; align-items: center; }
.sheet-foot-right { display: flex; gap: 9px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 17px; border-radius: var(--r-md);
  background: var(--surface); border: 1.5px solid var(--hairline-2);
  color: var(--ink); font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { background: var(--paper-2); border-color: var(--ink-3); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.07); background: var(--accent); border-color: var(--accent); }
.btn-danger { background: var(--danger-soft); border-color: #E9BFB8; color: var(--danger); }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-solid:hover { filter: brightness(.94); }

.text-field { width: 100%; height: 44px; padding: 0 13px; border: 1.5px solid var(--hairline-2); border-radius: var(--r-md); background: var(--surface); font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--ink); }
.text-field:focus { outline: none; border-color: var(--accent); }
.text-field.input-error { border-color: var(--danger); background: var(--danger-soft); }
.text-area { width: 100%; min-height: 220px; padding: 13px 15px; border: 1.5px solid var(--hairline-2); border-radius: var(--r-md); background: var(--surface); font-family: var(--font); font-size: 15px; line-height: 1.65; color: var(--ink); resize: vertical; }
.text-area.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.6; }
.text-area:focus { outline: none; border-color: var(--accent); }
.words-view-seg { margin-bottom: 10px; }
.shake { animation: shake .4s; }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }

.inline-check { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--hairline); font-size: 13px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.inline-check input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--accent); flex: none; cursor: pointer; }
.inline-check em { font-style: normal; color: var(--ink-3); }

/* ---- library ---- */
.now-editing { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 12px 15px; margin-bottom: 14px; border-radius: var(--r-md); background: var(--accent-soft); }
.now-editing-label { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.now-editing-title { flex: 1; font-family: var(--font-round); font-size: 17px; font-weight: 700; color: var(--ink); min-width: 100px; }
.now-editing-note { flex-basis: 100%; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.now-editing-note[hidden] { display: none; }
.key-badge { flex: none; min-width: 34px; padding: 4px 9px; border-radius: 999px; background: var(--kc, var(--accent)); font-family: var(--font-signature); font-size: 13px; font-weight: 900; text-align: center; color: #fff; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
.library-groups { display: flex; flex-direction: column; gap: 20px; }
.library-group-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; color: var(--accent); }
.library-group-head svg { width: 16px; height: 16px; flex: none; }
.library-group-title { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.library-group-sandbox .library-group-head { color: var(--ink-2); }
.library-group-rule { flex: 1; height: 1px; background: var(--hairline); }
.library-song-item { display: flex; align-items: center; gap: 11px; padding: 10px 13px; margin-bottom: 6px; border-radius: var(--r-md); background: var(--surface); border: 1.5px solid var(--hairline); transition: border-color .14s; }
.library-song-item:hover { border-color: var(--hairline-2); }
.library-song-item.active-song { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.library-song-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-song-title small { display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
/* A song shared with you: it stays as it was sent. */
.shared-tag {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline-2);
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  color: var(--ink-3);
  vertical-align: 2px;
}
.library-song-actions { display: flex; gap: 5px; flex: none; }
.lib-action-btn { height: 33px; padding: 0 12px; border-radius: 9px; background: var(--paper-2); font-size: 13px; font-weight: 700; color: var(--ink-2); transition: background .13s, color .13s; }
.lib-action-btn:hover { background: var(--hairline); color: var(--ink); }
.lib-action-btn.load-btn { background: var(--accent); color: #fff; }
.lib-action-btn.load-btn:hover { filter: brightness(1.08); }
.lib-action-btn.is-active { background: transparent; color: var(--accent); cursor: default; }
.lib-action-btn.delete-btn-item { width: 33px; padding: 0; font-size: 16px; }
.lib-action-btn.delete-btn-item:hover { background: var(--danger); color: #fff; }
.sandbox-item { border-style: dashed; background: var(--paper); }
.sandbox-item.active-song { border-style: solid; }
.library-empty { padding: 22px; text-align: center; font-size: 14px; color: var(--ink-3); background: var(--surface); border: 1.5px dashed var(--hairline-2); border-radius: var(--r-md); }

/* ---- cards ---- */
.card { padding: 17px; margin-bottom: 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hairline); }
.card-danger { background: var(--danger-soft); border-color: #EED4CF; }
.card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-family: var(--font-round); font-size: 16px; font-weight: 700; color: var(--ink); }
.card-title svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.card-danger .card-title, .card-danger .card-title svg { color: var(--danger); }
.card-desc { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.card-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.text-tools { display: flex; gap: 5px; }
.export-list { max-height: 220px; overflow-y: auto; padding: 5px; margin-bottom: 12px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--paper); }
.export-song-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.export-song-item:hover { background: var(--paper-2); }
.export-song-item input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); flex: none; cursor: pointer; }
.export-song-item-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.export-song-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.filename-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.filename-row .text-field { flex: 1; }
.filename-ext { font-size: 14px; font-weight: 700; color: var(--ink-3); }
.share-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.share-row[hidden] { display: none; }
.share-row .text-field { flex: 1; min-width: 200px; font-size: 12.5px; font-weight: 400; }
.status-msg { font-size: 13px; font-weight: 700; color: var(--good); margin-left: 6px; }
.status-msg.error { color: var(--danger); }

/* ---- layout settings ---- */
.note-range { display: flex; align-items: flex-end; gap: 4px; padding: 10px 6px 6px; margin: 10px 0 8px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--hairline); overflow-x: auto; }
.range-block { flex: 1 1 0; min-width: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: .28; transition: opacity .13s; }
.range-block.on { opacity: 1; }
.range-bar { width: 100%; max-width: 26px; height: calc(var(--h) * .42px); border-radius: 5px; background: var(--c); }
.range-name { font-size: 10.5px; font-weight: 800; color: var(--ink-2); }
.range-presets { margin-top: 4px; }
.value-chip-row .chip { height: 44px; color: var(--ink); }
.value-chip-row .chip.active { color: #fff; }
.value-chip .engraving { height: 26px; width: auto; }

/* ---- set up for students ---- */
.lesson-sub { font-family: var(--font-round); font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; margin: 15px 0 7px; }
.lesson-hint { margin: 7px 0 0; }
.lesson-foot { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 4px; }
.task-card { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border: 1.5px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); text-align: left; transition: border-color .12s, background .12s; }
.task-card:hover { border-color: var(--hairline-2); }
.task-card.active { border-color: var(--accent); background: var(--accent-soft); }
.task-card-label { font-family: var(--font-round); font-weight: 700; font-size: 15px; color: var(--ink); }
.task-card-desc { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.summary-list { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.lesson-saved-list { display: flex; flex-direction: column; gap: 5px; }
.tempo-range-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.tempo-range-row[hidden] { display: none; }
.num-field { width: 82px; text-align: center; -moz-appearance: textfield; }
.num-field::-webkit-outer-spin-button, .num-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- help & about ---- */
.help-hands { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.help-hand { padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-soft); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.help-hand p { margin: 4px 0 0; }
.help-hand-title { font-family: var(--font-round); font-weight: 700; font-size: 14.5px; color: var(--accent); }
.help-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.help-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.help-list b { color: var(--ink); }
.help-key { flex: none; min-width: 26px; height: 26px; display: inline-grid; place-items: center; vertical-align: middle; padding: 0 6px; border-radius: 7px; background: var(--paper-2); border: 1px solid var(--hairline-2); font-size: 13px; font-weight: 800; color: var(--ink-2); }
.help-list > li > .help-key { min-width: 32px; height: 30px; }
.help-key.edit { background: var(--edit-soft); border-color: rgba(240,138,0,.35); color: var(--edit); }

.about-hero-card { padding: 14px 16px; margin: 8px 0 14px; border-radius: var(--r-md); background: var(--accent-soft); font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.about-item { display: flex; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--hairline); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.about-item > span { font-size: 18px; flex: none; }
.about-item b { color: var(--ink); }
.about-new ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }

/* ---- toast ---- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--toolbar-real) + 22px); transform: translate(-50%, 14px);
  z-index: 100; max-width: min(92vw, 560px);
  padding: 11px 20px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 700; text-align: center; box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
body.show-dock .toast { bottom: calc(var(--toolbar-real) + var(--dock-h) + 36px); }
body.present-mode .toast { bottom: 96px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   PRESENT MODE — the family's: true full screen, the bars and the
   edit layer gone, a floating pill: Play · ‹ › · Exit
   ============================================================ */
.present-bar {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 70; display: none; align-items: center; gap: 10px;
  padding: 9px 9px 9px 10px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-3);
  opacity: .32; transition: opacity .25s;
}
.present-bar:hover, .present-bar:active, .present-bar:focus-within { opacity: 1; }
body.present-mode .present-bar { display: flex; }
/* with the keyboard out (a teacher can present with it), float above it */
body.present-mode.show-dock .present-bar { bottom: calc(var(--dock-h) + 30px); }
body.present-mode .topbar,
body.present-mode .toolbar,
body.present-mode .task-strip,
body.present-mode .preview-bar,
body.present-mode .add-line-row,
body.present-mode .edit-box,
body.present-mode .head-tool { display: none !important; }
/* `safe`: a song taller than the stage, centred, would start above the
   scroll origin and its top could never be reached */
body.present-mode .stage { padding: 34px 26px 110px; }
body.present-mode .notation-container { justify-content: safe center; min-height: 100%; }
body.present-mode .syllable:hover .syl-body { background-color: transparent; }
body.present-mode .syllable.highlighted:hover .syl-body { background-color: rgba(255,215,0,.3); }
body.present-mode:not(.editing) .line-label:placeholder-shown { visibility: hidden; }
.present-play {
  width: 50px; height: 50px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: #fff;
  transition: background .18s;
}
.present-play svg { width: 20px; height: 20px; margin-left: 2px; }
.present-play .stop-icon { display: none; margin-left: 0; }
.present-play.is-playing { background: var(--danger); }
.present-play.is-playing .play-icon { display: none; }
.present-play.is-playing .stop-icon { display: block; }
.present-step { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); transition: background .14s, color .14s; }
.present-step svg { width: 20px; height: 20px; stroke-width: 3; }
.present-step:hover, .present-step:active { background: var(--accent); color: #fff; }
.present-exit {
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 16px 0 13px; border-radius: 999px;
  background: var(--paper-2); font-size: 14px; font-weight: 700; color: var(--ink-2);
  transition: background .14s, color .14s;
}
.present-exit svg { width: 17px; height: 17px; }
.present-exit:hover, .present-exit:active { background: var(--ink); color: #fff; }
.present-sep { width: 1px; height: 28px; background: var(--hairline); flex: none; }

/* ============================================================
   SAVED PICTURES — the music, not the tools
   ============================================================ */
body.capturing *, body.capturing *::before, body.capturing *::after { transition: none !important; animation: none !important; }
body.capturing .head-tool,
body.capturing .add-line-row,
body.capturing .chord-slot:not(.has-chord):not(.holds) .chord-add { display: none !important; }
body.capturing .line-label:placeholder-shown { visibility: hidden !important; }
body.capturing .line-label { box-shadow: none !important; }
body.capturing .syllable .syl-body { transform: none !important; box-shadow: none !important; background-color: transparent !important; }
body.capturing .note.selected-note { box-shadow: none !important; filter: none !important; }
body.capturing .chord-slot { outline: none !important; box-shadow: none !important; background: transparent !important; }
body.capturing .text { box-shadow: none !important; }
/* html2canvas 1.4.1 paints an inset box-shadow as a thick frame (its mask
   runs the rounded corners the wrong way round), so in a picture a line's
   hairline is a 1px border on an overlay instead: it draws true and moves
   nothing, where a real border would narrow the line and could re-wrap it. */
body.capturing .notation-line { box-shadow: none !important; }
body.capturing:not(.capture-colour) .notation-line { background-color: #ffffff !important; }
body.capturing:not(.capture-colour) .notation-line::after,
body.capturing.colors-inactive .notation-line::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--hairline); border-radius: inherit; pointer-events: none; }
body.capturing:not(.capture-colour) .notation-line::after { border-color: #e6e6e6; }
body.capturing:not(.capture-colour) .line-label { background: #f2f2f2; }

/* ============================================================
   RESPONSIVE — the family's breakpoints. Both bars stay one row on a
   computer: words give way to icons before anything wraps.
   ============================================================ */

@media (max-width: 1100px) {
  .tool-label { display: none; }
  .scale-select { max-width: 108px; font-size: 12px; padding-left: 9px; }
  .tool-btn:not(.bpm-btn) { width: var(--square); padding: 0; }
  .step-kicker { display: none; }
  .tool-group { padding: 0 6px; gap: 6px; }
  .tb-center { gap: 6px; }
  :root { --step: 46px; }
}
@media (max-width: 900px) {
  .home-link span { display: none; }
  .home-link { padding: 7px; }
  .side-tab { padding: 8px 13px; }
  .side-tab span { display: none; }
}
/* Phones: the family's two-row toolbar (Rhythm Poetry's .toolbar-break). */
@media (max-width: 720px) {
  :root { --topbar-h: 54px; --toolbar-h: 64px; --ts-digit: 20px; --play: 48px; --step: 44px; --sig-h: 46px; --btn-h: 40px; --square: 42px; }
  .scale-select { max-width: 100px; }
  .topbar { grid-template-columns: auto 1fr auto; gap: 6px; padding: 0 8px; }
  .side-switch { justify-self: center; padding: 3px; gap: 3px; }
  .side-tab { padding: 7px 10px; }
  .side-tab-icon { width: 16px; height: 16px; }
  .app-mark { padding: 4px; }
  .app-mark .mark-name { display: none; }
  .home-link { padding: 6px 2px; }
  .chip-cluster { gap: 5px; }
  .song-chip { max-width: 120px; padding: 6px 8px 6px 10px; font-size: 13px; }
  .song-chip.is-sandbox { padding: 4.5px 6.5px 4.5px 8.5px; min-height: 38px; }
  .sandbox-clear, .autosave-toggle { padding: 0 8px; height: 38px; }
  .sandbox-clear-label, .autosave-label { display: none; }

  .notation-container { padding: 10px 8px 12px; }
  .notation-line { padding: 32px 10px 10px; }
  :root { --strip-w: 136px !important; }
  .cmod-key { display: none; }
  .cmod { padding: 5px 0; border-radius: 6px; }
  .cmod-name { font-size: 8.5px; letter-spacing: -.02em; }
  .cb-edit { width: 20px; height: 20px; }
  .help-hands, .about-grid { grid-template-columns: 1fr; }

  .toolbar-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px 6px; padding: 7px 8px; }
  .tb-left { display: none; }
  .tb-center { display: contents; }
  .tb-center::after { content: ''; flex-basis: 100%; height: 0; order: 2; }
  .play-btn, .hat-toggle { order: 0; }
  .tool-group { border-left: none; padding: 0 2px; }
  .tg-time { order: 1; }
  .tg-look { order: 3; }
  .tg-present { order: 4; }
  .tb-right { order: 5; }

  .sheet-backdrop { padding: 0; align-items: flex-end; }
  .sheet {
    max-height: 92vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  .sheet-actions .btn { flex: 1 1 calc(50% - 5px); justify-content: center; }
  .library-song-actions .lib-action-btn { padding: 0 9px; }
  .sheet-foot-right { flex: 1; }
  .sheet-foot-right .btn { flex: 1; justify-content: center; }
  .present-bar { bottom: calc(14px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  :root { --strip-w: 122px !important; --circle: 28px; }
  .side-tab { padding: 6px 8px; }
  .song-chip { max-width: 96px; }
}

/* ---- short screens (Google Sites embeds, a laptop in a browser frame) ---- */
@media (max-height: 560px) {
  :root { --topbar-h: 48px; --toolbar-h: 58px; --ts-digit: 19px; --play: 46px; --sig-h: 44px; --step: 42px; --btn-h: 38px; --square: 40px; --circle: 28px; }
  .toolbar-inner { padding: 6px 12px; }
  .notation-container { padding-top: 10px; }
  .edit-box { --eb-btn-h: 32px; --eb-circle: 34px; }
  .vd-caption { min-height: 0; }
}

/* ---- smartboard ---- */
@media (min-width: 1500px) {
  :root { --toolbar-h: 80px; --ts-digit: 32px; --btn-h: 48px; --play: 62px; --square: 50px; --circle: 36px; --step: 58px; --sig-h: 66px; }
  .tb-center { gap: 10px; }
  .tool-group { gap: 10px; padding: 0 12px; }
  .tool-btn { font-size: 15px; }
  .play-btn svg { width: 26px; height: 26px; }
  .sig-key { font-size: 30px; min-width: 40px; }
  .side-tab { padding: 11px 26px; font-size: 18px; }
  .step-btn svg { width: 26px; height: 26px; }
}

/* ============================================================
   TOUCH AND SMART BOARD
   A classroom board is a coarse pointer with no cursor:
   1. Hover latches — after a tap, :hover stays on the tapped thing,
      so the effects that move or arm something are cancelled.
   2. A finger is much wider than a mouse tip, and the board is used
      standing up, at arm's length: the Edit box, the section tools and
      the value circles all grow, and small targets get an invisible
      collar.
   3. There is no hover to reveal the section tools, so they show on
      the selected line.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  :root { --hb: 32px; }
  .edit-box { width: 204px; --eb-circle: 44px; --eb-btn-h: 42px; }
  .eb-head { height: 46px; }
  .eb-fold { width: 40px; height: 40px; }
  .vdot { width: 19px; height: 19px; }
  .head-tool svg { width: 16px; height: 16px; }
  .vdot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
  .vdot { position: relative; }
  .ts-num { padding: 3px 7px; }
  .value-choice::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; }
  body.editing .notation-line:hover .head-tool { display: none; }
  body.editing .notation-line.has-selection .head-tool { display: inline-grid; }
  .notation-line, body.show-lane .notation-line { padding-top: calc(var(--hb) + 14px); }
  .line-label { height: var(--hb); }

  .play-btn:hover:not(:active) { transform: none; box-shadow: 0 3px 0 rgba(0,0,0,.13); }
  .ts-num:hover:not(:active), .sig-key:hover:not(:active) { transform: none; }
  .eb-btn:hover:not(:active):not(.on):not(.armed):not(:disabled) { background: var(--paper-2); color: var(--ink-2); }
  .eb-pm:hover:not(:active) { color: var(--ink-2); }
  .value-choice:hover:not(:active) { transform: none; }
  .syllable:hover:not(.highlighted) .syl-body { background-color: transparent; }
  .step-btn:hover:not(:active) { background: var(--accent); }
}
/* a phone held upright: the box keeps a finger's targets but gives the song more room */
@media (max-width: 480px) {
  .edit-box { width: 190px; --eb-circle: 42px; --eb-btn-h: 40px; }
  .eb-btn { font-size: 11.5px; gap: 4px; padding: 0 4px; }
}
/* a smartboard, used standing at arm's length: the biggest box (after
   TOUCH, since a board is a coarse pointer too) */
@media (min-width: 1500px) {
  .edit-box { width: 228px; --eb-circle: 46px; --eb-btn-h: 44px; }
  .eb-btn { font-size: 14px; }
  .eb-add-main { font-size: 15.5px; }
  .eb-add-sub { font-size: 12.5px; }
  .eb-title { font-size: 18px; }
  .vd-caption { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   THE CHORD EDITOR and the Z X C V B chooser (chord-strip.js) —
   Digital Accordion's block editor, in the family's sheet
   ============================================================ */
.editor-body { display: flex; flex-direction: column; }
.editor-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--hairline); }
.editor-row:first-child { border-top: 0; padding-top: 4px; }
.editor-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip small { font-size: 10px; font-weight: 800; opacity: .75; }
.root-chip { flex-direction: column; justify-content: center; gap: 1px; height: 46px; min-width: 48px; padding: 0 8px; background: var(--c); color: var(--ink, #fff); }
.root-chip:hover { background: var(--c); filter: brightness(1.08); color: var(--ink, #fff); }
.root-chip.dim { opacity: .4; }
.root-chip.selected { opacity: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.root-chip span { font-family: var(--font-block); font-weight: 600; font-size: 15px; line-height: 1; }
.root-chip small { opacity: .85; }
.mod-chip { flex-direction: column; justify-content: center; gap: 1px; height: 46px; min-width: 52px; padding: 0 9px; }
.mod-chip span { font-size: 14px; line-height: 1; }
.mod-chip .figs { font-size: .62em; }
.mod-chip small { min-height: 11px; line-height: 11px; }
.func-chip { height: 40px; }
.mod-wrap { display: flex; flex-direction: column; gap: 8px; }
.mod-wrap .card-desc { margin: 0; font-size: 12.5px; }
.chord-preview {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%;
  padding: 9px 12px; border-radius: 12px;
  background: var(--c); color: var(--ink, #fff); text-align: left;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.15);
  transition: transform .08s;
}
.chord-preview:active { transform: scale(.985); }
.cp-name { font-family: var(--font-block); font-weight: 600; font-size: 26px; line-height: 1; }
.cp-letter { font-weight: 800; font-size: 14px; opacity: .9; }
.cp-tones { display: flex; gap: 4px; margin-left: auto; }
.cp-warn { flex-basis: 100%; font-size: 11px; font-weight: 700; opacity: .85; }
.quality-select { flex: none; width: 100%; max-width: 260px; height: 40px; }
.slot-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 6px 0 4px; }
.slot-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border-radius: 10px; border: 2px solid transparent;
  background: var(--paper-2); color: var(--ink-2); font-weight: 800;
  transition: background .13s, color .13s, border-color .13s;
}
.slot-tab:hover { background: var(--hairline); }
.slot-tab.current { border-color: var(--chord); background: var(--chord-soft); color: var(--chord); }
.slot-tab.empty .slot-name { color: var(--ink-3); }
.slot-key { font-size: 15px; font-weight: 900; }
.slot-name { font-size: 12px; }
.slot-name .figs { font-size: .6em; }
#mods-body .lesson-sub { margin-top: 12px; }
#mods-body .btn { align-self: flex-start; margin-top: 12px; }
.chip-key { font-size: 9.5px; font-weight: 900; opacity: .7; letter-spacing: .04em; }
.layout-scale { margin-top: 12px; }
@media (max-width: 720px) {
  .editor-row { grid-template-columns: 1fr; gap: 6px; }
  .editor-label { padding-top: 0; }
  .cp-tones { margin-left: 0; }
}