/* ============================================================
   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

   While the hat is on, the Edit box is the left column, both rows
   tall (the panel's place and the corner under it); with the chords
   on, the chord panel sits in its foot (#eb-chords, edit-box.js) and
   the corner is away.
   ============================================================ */
.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; }
body.editing .workspace { grid-template-columns: var(--eb-w) minmax(0, 1fr); }
body.editing.show-strip .workspace { grid-template-columns: max(var(--eb-w), var(--strip-w)) minmax(0, 1fr); }

.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; }
body.editing .dock-corner, body.editing.show-strip.show-dock .dock-corner { display: none; }   /* the Edit box has its place */
.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 Notation page's Colors off (the Edit box, 2026-10-26): every head and note name in ink */
body.staff-mono .staff-svg path.head { fill: #2B1D38; }
body.staff-mono .staff-svg text.name { fill: #2B1D38; }

/* ---- 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); }
/* View → Light up selected/played (2026-10-08, user: the selection
   follows it too): Box = the yellow box behind the selected word, Note =
   a ring of Do's colour round the selected block (--light, settings.js
   syncLight), Both, Off = neither. Written lines: staff.js draws both
   (:where keeps these no stronger than before, so the has-staff rule
   below still clears the word's own box there). */
body:where(.light-box:not(.playing)) .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); }
body:where(.light-box:not(.playing)) .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); }
/* On a written line the selected word's box is drawn by staff.js BEHIND
   the staff and the heads (a box here would tint the notes over it). */
.notation-line.has-staff .syllable.highlighted .syl-body { background-color: transparent; box-shadow: none; transform: none; }
/* 2.5: in notation each mark stands alone — the word is underlined only
   when its own note (the syllable's first) is selected, and a syllable
   is not tinted as one on hover (its connected notes and rests are marks
   of their own) */
body.editing .notation-line.has-staff .syllable.highlighted:not(.sel-own) .text { box-shadow: none; }
.notation-line.has-staff .syllable:not(.editing):hover .syl-body { background-color: transparent; }
/* While it plays (2026-10-01): Note · Box · Both · Off. The selection's
   own light stands down and only the sounding note's shows, always
   behind or around the note so its colour stays true. On a written line
   staff.js draws both lights under the staff; here, the lines of blocks.
   The note's light is Do's colour (2026-10-08, user); the box stays plum. */
body.playing .syllable.highlighted .syl-body { background-color: transparent; box-shadow: none; transform: none; }
body.playing .note.selected-note { box-shadow: none !important; filter: none; }
body.playing.light-box .notation-line:not(.has-staff) .syllable.sounding .syl-body { background-color: rgba(156,22,142,.10); box-shadow: 0 0 0 1.5px var(--sound), 0 0 12px rgba(156,22,142,.25); }
body.playing.light-note .harmony-stack.sounding .note { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--light, var(--sound)), 0 0 16px 3px var(--light-glow, rgba(156,22,142,.5)) !important; z-index: 20; }

.notes-container { display: flex; flex-direction: row; align-items: flex-end; justify-content: center; margin-bottom: calc(8px * 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 { z-index: 20 !important; }
body.light-note:not(.playing):not(.capturing) .note.selected-note { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--light, var(--gold)), 0 0 16px 3px var(--light-glow, rgba(255,215,0,.85)) !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 { opacity: .88; }
body.light-note:not(.playing):not(.capturing) .note.rest-note.selected-note { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--light, var(--gold)), 0 0 16px 3px var(--light-glow, rgba(255,215,0,.85)) !important; }

/* 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 hyphens between a word's syllables (components/lyric-hyphens.js, 2026-10-26) ----
   Each one is placed halfway across the white between two syllables, in the
   lyric's own font (copied onto the layer), centred in a box as tall as the
   word's — so it sits at the height a hyphen typed in the word would. */
.hy-layer { position: absolute; inset: 0; pointer-events: none; z-index: 21; }
.lyric-hyphen, .rp-hyphen {
  position: absolute; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; pointer-events: none;
}
/* a line of blocks (Notation, nothing written yet): a little more white after a syllable whose word goes on */
body.show-staff:not(.page-rhythm) .notation-line:not(.has-staff) .syllable[data-hy]:not(.joined) { margin-right: calc(2px + 10px * var(--text-scale)); }

/* the mark inside a written column — only when the staff is switched off.
   Black, standing on the foot of the bar (so a line's rhythms read along
   one level just above the words), and never taller than the bar allows:
   a low block (mi, fa below do) gets a smaller mark rather than one that
   pokes out of its top. With names showing, the mark leaves the top of the
   bar to the solfège (down to a floor, where a tiny bar must share). A ♯/♭
   stands just left of the notehead, as it would on the staff, and the mark
   steps right to make room. */
.value-mark {
  --vm-h: min(calc(26px * var(--bs)), calc(100% - 8px * var(--bs)));
  position: absolute; bottom: calc(5px * var(--bs)); left: 50%; transform: translateX(-50%);
  height: var(--vm-h); line-height: 0;
  display: none; color: #111; pointer-events: none; z-index: 22;
}
.value-mark svg { display: block; height: 100%; width: auto; }
body:not(.show-staff) .value-mark { display: block; }
/* the Pitch page's Beats off (the Edit box, 2026-10-26): no rhythm marks — the rhythm still plays */
body.hide-marks:not(.show-staff) .value-mark { display: none; }
body.hide-marks:not(.show-staff) .harmony-stack.notated[data-tie]::before { display: none; }
.show-names .value-mark { --vm-h: max(calc(12px * var(--bs)), min(calc(26px * var(--bs)), calc(100% - 27px * var(--bs)))); }
body:not(.show-staff) .harmony-stack.notated:has(.accidental-symbol) .value-mark { left: calc(50% + 4px * var(--bs)); }
body:not(.show-staff) .harmony-stack.notated .accidental-symbol {
  bottom: calc(4px * var(--bs)); left: calc(50% - 9px * var(--bs));
  font-size: calc(15px * var(--bs)); color: #111; text-shadow: none; z-index: 23;
}
/* a tie, with the staff off: an arc under the noteheads, 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: 22; pointer-events: none;
  bottom: calc(1px * var(--bs)); left: calc(50% + 3px); width: calc(100% - 6px); height: calc(5px * var(--bs));
  border-bottom: 2px solid #111; 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; }
/* The pick-up's bar line, in Edit (staff.js syncCut): a mouse over it
   lights it red with a × above the staff; the × takes it out (the pick-up
   joins the bar after it). Touch screens show the × faintly all the time. */
.pickup-cut {
  position: absolute; z-index: 25; width: 22px; margin-left: -11px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  cursor: default;
}
.pickup-cut-bar {
  width: 3px; height: var(--cut-bar, 40px); border-radius: 2px;
  background: transparent; transition: background-color .12s, box-shadow .12s;
}
.pickup-cut-btn {
  width: var(--cut-btn, 24px); height: var(--cut-btn, 24px); flex: none;
  display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--danger); background: var(--surface); color: var(--danger);
  box-shadow: 0 2px 6px rgba(43,29,56,.22); cursor: pointer;
  opacity: 0; transform: scale(.7); transition: opacity .12s, transform .12s, background-color .12s, color .12s;
}
.pickup-cut-btn svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pickup-cut:hover .pickup-cut-btn, .pickup-cut-btn:focus-visible { opacity: 1; transform: none; }
.pickup-cut:hover .pickup-cut-bar { background: var(--danger); box-shadow: 0 0 0 3px rgba(192,57,43,.18); }
.pickup-cut-btn:hover { background: var(--danger); color: #fff; }
@media (hover: none) { .pickup-cut-btn { opacity: .6; transform: none; } }
body.capturing .pickup-cut { display: none; }
/* The selected note's × and +, in Edit (note-tools.js, 2026-10-08): × over
   the note deletes it, + to its right adds one after it — on a written line
   hugging the note's own ink (2026-10-26), on a line of blocks on its box.
   Placed by their centres (--nt across). */
.note-tools { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 26; }
.nt-btn {
  position: absolute; width: var(--nt, 26px); height: var(--nt, 26px);
  margin: calc(var(--nt, 26px) / -2) 0 0 calc(var(--nt, 26px) / -2);
  display: grid; place-items: center; padding: 0; border-radius: 50%;
  background: var(--surface); box-shadow: 0 2px 6px rgba(43,29,56,.25); cursor: pointer;
  transition: background-color .12s, color .12s, transform .12s;
}
.nt-btn[hidden] { display: none; }
.nt-btn svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.nt-btn:hover { transform: scale(1.1); }
.nt-del { border: 2px solid var(--danger); color: var(--danger); }
.nt-del:hover { background: var(--danger); color: #fff; }
.nt-add { border: 2px solid var(--edit); color: var(--edit); }
.nt-add:hover { background: var(--edit); color: #fff; }
.nt-add.is-full { opacity: .45; }
@media (hover: none), (pointer: coarse) { .note-tools { --nt: 34px !important; } }
body.capturing .note-tools, body.playing .note-tools, body.present-mode .note-tools { display: none; }
.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 row above the words (chord-lane.js): the chord track's room ---- */
.chord-slot {
  display: none;
  margin-bottom: auto;
  height: calc(26px * var(--text-scale));
  position: relative;
  border-radius: 7px;
}
body.show-ctrack .chord-slot { display: flex; }               /* chord-track.js: View → Chord track on, and chords to show */
body.show-ctrack .notation-line { padding-top: 34px; }
body.editing:not(.chords-locked) .chord-slot { cursor: pointer; }

/* ============================================================
   THE EDIT BOX — every note tool, in one box that is the workspace's
   left column while the hat is on (js/components/edit-box.js; the grid
   is WORKSPACE above): from the stage's top to the toolbar, beside the
   keyboard too when it is out. It wears the hat's orange, and is hidden
   in Present. Outside #score, so color-mix() is safe here.
   ============================================================ */
:root { --eb-w: 200px; }
.edit-box {
  --eb-circle: 38px;      /* the value circles */
  --eb-btn-h: 36px;       /* every other button */
  grid-column: 1; grid-row: 1 / -1;
  min-width: 0; min-height: 0;
  display: none; flex-direction: column;
  background: var(--surface);
  border-right: 1.5px solid rgba(240,138,0,.32);
  overflow: hidden;
}
body.editing .edit-box { display: flex; animation: eb-in .18s ease-out; }
@keyframes eb-in { from { opacity: 0; } to { opacity: 1; } }
.edit-box [hidden] { display: none !important; }

.eb-head {
  flex: none; display: flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 9px 0 11px;
  background: var(--edit-soft); color: var(--edit);
  user-select: none; -webkit-user-select: none;
}
.eb-lock { width: 19px; height: 19px; flex: none; color: var(--edit-glow); }
.eb-title { flex: 1; font-family: var(--font-round); font-size: 16px; font-weight: 700; line-height: 1; }
/* Undo / Redo (2.5, js/history.js) — in the title bar, always there while the hat is on */
.eb-undo-pair { display: inline-flex; gap: 2px; flex: none; }
.eb-undo {
  width: 30px; height: 28px; display: grid; place-items: center; border-radius: 8px;
  color: var(--edit); background: transparent; transition: background .12s, opacity .12s;
}
.eb-undo svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.eb-undo:hover:not(:disabled) { background: rgba(240,138,0,.18); }
.eb-undo:disabled { opacity: .3; }

.eb-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 0 11px 11px; }
/* the chord panel at the end of the scroll (edit-box.js seatChords): a
   minor part of editing, so it waits below the tools until scrolled to.
   It spans the box's full width (out past the body's padding) and has a
   height of its own, as its rows share the height they are given. */
.eb-chords { display: none; }
body.show-strip .eb-chords {
  flex: none; height: 300px; display: flex;
  margin: 12px -11px -11px; border-top: 1px solid var(--hairline);
}
.eb-chords .chord-strip { flex: 1 1 auto; min-width: 0; border-right: none; padding: 10px 10px 10px 11px; background: transparent; }
/* the blocks are smaller down here: a small pencil in the corner, clear of the name */
.eb-chords .cb-edit { width: 16px; height: 16px; top: 2px; right: 2px; border-radius: 5px; }
.eb-chords .cb-edit svg { width: 10px; height: 10px; }
.eb-chords .cblock { border-radius: 10px; }
.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; }
/* a kicker with a small toggle at its right: the Rhythm section's Colors /
   Beats (rhythm-panel.js) — how the page looks, not an edit, so it sits
   apart from the buttons that change the song */
.eb-kicker-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: -4px 0 -1px; }
.eb-btn.eb-view { flex: none; height: 26px; gap: 4px; padding: 0 9px 0 7px; border-radius: 999px; font-size: 11px; }
.eb-btn.eb-view svg { width: 13px; height: 13px; }
.eb-btn.eb-view.on, .eb-btn.eb-view.on:hover:not(:disabled) { background: var(--edit-soft); color: var(--edit); box-shadow: inset 0 0 0 1.5px var(--edit); }
.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-square { flex: 0 0 var(--eb-btn-h); padding: 0; font-size: 20px; font-weight: 900; }
.eb-wide { grid-column: 1 / -1; }
/* the pick-up's values (edit-box.js PICK-UP): a row of small chips under
   Pick-up, the lit one what the selected pick-up is worth */
.eb-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: -2px; }
.eb-chips[hidden] { display: none; }   /* only out with the selection in a pick-up */
.eb-chip {
  min-width: 0; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--paper-2); color: var(--ink-2);
  transition: background .12s, color .12s, opacity .12s;
}
.eb-chip .engraving { height: 20px; width: auto; max-width: 100%; }
.eb-chip:hover:not(:disabled) { background: var(--edit-soft); color: var(--edit); }
.eb-chip.on, .eb-chip.on:hover:not(:disabled) { background: var(--edit); color: #fff; }
.eb-chip:disabled { opacity: .35; }
/* the View switch, at the foot of the box, in the hat's orange */
.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; }

/* 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(var(--total, 43) * 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) */
.kkey.white.lit {
  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 {
  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;
}
/* a chord's keys are background (user, 2026-10-02: the melody first):
   the key as it always is on top, a pale wash of the note's colour below
   (--chord-c, keyboard-dock.js paint) and a full-colour lip along the
   front; a black key in its colour, muted. The melody's keys (.lit,
   .pressed) wear the full colour over them. */
.kkey.white.chord {
  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%, var(--chord-c) 50%, var(--chord-c) 100%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.6), inset 0 -6px 0 var(--lit-c);
}
.kkey.black.chord {
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 80%, rgba(0,0,0,.22)), var(--chord-c);
  box-shadow: inset 0 -4px 0 var(--lit-c), 0 2px 3px rgba(0,0,0,.45), 1px 4px 7px rgba(0,0,0,.22);
  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; }

/* a note the chord in hand bent into the scale (F♯ under V/V in C —
   keyboard-dock.js): Digital Accordion's white ring; on a white key it
   has a dark edge so it shows on the ivory */
.kkey.black.bent {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.95), 0 2px 3px rgba(0,0,0,.45), 1px 4px 7px rgba(0,0,0,.22);
}
.kkey.white.bent {
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3.5px rgba(43,29,56,.5), inset 0 -5px 0 #E1DDE7;
}
.kkey.black.bent.chord {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.95), inset 0 -4px 0 var(--lit-c), 0 2px 3px rgba(0,0,0,.45);
}
.kkey.white.bent.chord {
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3.5px rgba(43,29,56,.5), inset 0 -6px 0 var(--lit-c);
}

/* 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 { opacity: 1 !important; color: var(--lit-ink) !important; }
.kkey.chord:not(.pressed) .kkey-name { opacity: 1 !important; color: var(--chord-ink) !important; }
.kkey.off .kkey-name { color: #7A7784 !important; }
.kkey.black.off .kkey-name { color: #C5C3CB !important; }
.kkey.off.chord:not(.pressed) .kkey-name { color: var(--chord-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 lock (the construction hat until 2026-10-26): the beat-dot button's place and shape;
   shut while performing, open while editing --- */
.lock-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;
}
.lock-toggle svg { width: 24px; height: 24px; transition: filter .2s; }
.lock-toggle:hover { background: var(--hairline); }
.lock-toggle .shackle-open, body.editing .lock-toggle .shackle-shut { display: none; }
body.editing .lock-toggle .shackle-open { display: inline; }
body.editing .lock-toggle { background: var(--edit-soft); color: var(--edit-glow); box-shadow: inset 0 0 0 1.5px rgba(255,149,0,.35); }
body.editing .lock-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; }
/* a name over a full-width choice (View → Light up selected/played,
   Keyboard notes light up the) */
.seg-block { display: flex; flex-direction: column; gap: 7px; padding: 9px 10px 6px; }
.seg-block .seg-btn { padding: 7px 6px; }

/* 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 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; }

/* ---- Split into syllables (components/syllable-review.js, 2026-10-26) ----
   The window's two states: the words (.words-only) and the review (.review-only). */
.sheet:not(.reviewing) .review-only, .sheet.reviewing .words-only { display: none !important; }
.words-tools { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.split-syl-btn { height: 38px; padding: 0 14px; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--hairline-2)); background: var(--accent-soft); }
.split-syl-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.split-syl-btn[hidden] { display: none; }
.syl-review-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.syl-review-count { font-size: 13px; font-weight: 800; color: var(--ink-2); }
.syl-review {
  min-height: 220px; max-height: min(52vh, 420px); overflow-y: auto;
  padding: 12px 14px; border: 1.5px solid var(--hairline-2); border-radius: var(--r-md); background: var(--surface);
  font-family: var(--lyric-font, var(--font)); font-size: 17px; font-weight: 600; color: var(--ink);
}
.syl-review:focus { outline: none; border-color: var(--accent); }
.syl-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 4px 0; }
/* an empty line in the box: the next line of the song */
.syl-break { height: 0; margin: 9px 0; border-top: 1.5px dashed var(--hairline-2); }
.syl-word { padding: 5px 2px; color: var(--ink-2); }
.syl-chip {
  position: relative;
  min-height: 36px; padding: 4px 10px; border-radius: 9px;
  font: inherit; color: var(--ink-2);
  background: transparent; border: 1.5px dashed var(--hairline-2);
  cursor: pointer; transition: background .13s, border-color .13s, color .13s;
}
.syl-chip:hover { border-color: var(--accent); }
.syl-chip.on { color: var(--ink); background: var(--accent-soft); border: 1.5px solid var(--accent); }
.syl-chip:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; }
.syl-hy { display: inline-block; margin: 0 .22em; color: var(--accent); font-weight: 800; }
.syl-chip.guess .syl-text { text-decoration: underline dotted var(--ink-3); text-underline-offset: 4px; }
.syl-chip.has-alt::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.syl-review-key { margin: 9px 2px 0; min-height: 18px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.syl-key-dot { display: inline-block; width: 7px; height: 7px; margin: 0 4px 1px 0; border-radius: 50%; background: var(--accent); }
.syl-key-guess { text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px; font-weight: 700; color: var(--ink-2); margin-right: 3px; }
.syl-key-gap { display: inline-block; width: 16px; }
@media (max-width: 480px) {
  .syl-review { font-size: 15px; padding: 9px 10px; }
  .split-syl-btn { width: 100%; justify-content: center; }
}
.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); }
.help-key svg { width: 16px; height: 16px; }

.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:where(.light-box) .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 { 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, .lock-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; }
  :root { --eb-w: 204px; }
  .edit-box { --eb-circle: 44px; --eb-btn-h: 42px; }
  .eb-head { height: 46px; }
  .head-tool svg { width: 16px; height: 16px; }
  .edit-box .eb-btn.eb-view { height: 32px; padding: 0 11px 0 9px; }
  .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-ctrack .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(:disabled) { background: var(--paper-2); color: var(--ink-2); }
  .eb-chip:hover:not(:active):not(.on):not(:disabled) { background: var(--paper-2); 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) {
  :root { --eb-w: 172px; }
  .edit-box { --eb-circle: 40px; --eb-btn-h: 40px; }
  .eb-body { padding: 0 8px 10px; }
  .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) {
  :root { --eb-w: 228px; }
  .edit-box { --eb-circle: 46px; --eb-btn-h: 44px; }
  .eb-btn { font-size: 14px; }
  .edit-box .eb-btn.eb-view { height: 32px; 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, .layout-bend { 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; }
}

/* ============================================================
   SONG WRITER 2.5 — THE RHYTHM PLAN (SONG-WRITER-RHYTHM-PLAN.md)
   The caption's place in the bar, Tap it in, and the beat strip. Plain hex/rgba inside #score (html2canvas).
   ============================================================ */

/* the Rhythm caption's second line: bar · beat · what is left */
.vd-place { display: block; margin-top: -3px; font-size: 11px; font-weight: 800; color: var(--ink-3); line-height: 1.25; }
.vd-place:empty { display: none; }
.vd-place.over { color: var(--edit); }

/* ---------------- Tap it in ---------------- */
.tap-panel {
  position: fixed; left: 50%; bottom: calc(var(--toolbar-real) + 18px); transform: translateX(-50%);
  z-index: 120; width: min(92vw, 420px);
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-2), 0 0 0 2px rgba(240,138,0,.45);
}
.tap-panel[hidden] { display: none; }
body.show-dock .tap-panel { bottom: calc(var(--toolbar-real) + var(--dock-h) + 24px); }
.tap-top { display: flex; align-items: center; gap: 9px; }
.tap-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--edit); flex: none; }
.tap-panel[data-state="go"] .tap-dot { background: #E5484D; animation: tapPulse 1s infinite; }
.tap-panel[data-state="done"] .tap-dot { background: #22A55B; }
@keyframes tapPulse { 50% { opacity: .35; } }
.tap-text { font-size: 15px; font-weight: 800; color: var(--ink); }
.tap-pad {
  height: 92px; border-radius: 14px; background: var(--edit-soft); color: var(--edit);
  font-family: var(--font-round); font-size: 26px; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.tap-pad small { font-size: 12px; font-weight: 700; opacity: .75; font-family: inherit; }
.tap-pad:active { background: var(--edit); color: #fff; }
.tap-panel[data-state="done"] .tap-pad { display: none; }
.tap-snap { display: flex; align-items: center; align-self: center; }
.tap-snap-label { font-size: 12px; font-weight: 800; color: var(--ink-3); padding: 0 8px 0 6px; }
.tap-snap .seg-btn { padding: 6px 11px; font-size: 12.5px; }
.tap-snap .seg-btn.active { color: var(--edit); }
.tap-actions { display: flex; gap: 6px; justify-content: flex-end; }
.tap-btn { height: 38px; padding: 0 14px; border-radius: 10px; background: var(--paper-2); color: var(--ink-2); font-size: 13.5px; font-weight: 800; }
.tap-btn:hover { background: var(--edit-soft); color: var(--edit); }
.tap-btn.primary { background: var(--edit); color: #fff; }
.tap-btn.primary:hover { background: #D97900; color: #fff; }
.tap-panel:not([data-state="done"]) .tap-keep,
.tap-panel:not([data-state="done"]) .tap-again { display: none; }
.tap-panel[data-state="done"] .tap-stop { display: none; }
.tap-panel[data-state="ready"] .tap-stop { display: none; }

/* ---------------- the beat strip ---------------- */
.beat-bar {
  container-type: inline-size;
  position: sticky; bottom: 0; z-index: 30;
  margin: 10px 0 0; padding: 8px 12px 10px;
  background: rgba(255,255,255,.97); border-top: 1.5px solid rgba(240,138,0,.4);
  box-shadow: 0 -6px 16px rgba(43,29,56,.08);
}
.beat-bar[hidden] { display: none; }
body.capturing .beat-bar { display: none; }
.bb-empty { font-size: 13px; font-weight: 700; color: var(--ink-3); text-align: center; padding: 10px 0; }
.bb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; }
.bb-kicker { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--edit); }
.bb-where { font-size: 13px; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.bb-navs { display: inline-flex; gap: 4px; }
.bb-nav { width: 28px; height: 28px; border-radius: 8px; background: var(--paper-2); color: var(--ink-2); font-size: 18px; font-weight: 900; line-height: 1; }
.bb-nav:hover:not(:disabled) { background: var(--edit-soft); color: var(--edit); }
.bb-nav:disabled { opacity: .3; }
.bb-gap { flex: 1; }
.bb-mode .seg-btn { padding: 5px 10px; font-size: 12px; }
.bb-mode .seg-btn.active { color: var(--edit); }
.bb-close { width: 28px; height: 28px; border-radius: 8px; color: var(--ink-3); font-size: 20px; line-height: 1; }
.bb-close:hover { background: var(--paper-2); color: var(--ink); }
.bb-beats { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 6px 4px; padding-bottom: 2px; }
.bb-beat { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.bb-num { font-size: 10px; font-weight: 800; color: var(--ink-3); }
.bb-beat.sel .bb-num { color: var(--edit); }
.bb-pill {
  display: flex; align-items: center; justify-content: space-around; gap: 4px;
  height: 40px; min-width: 84px; padding: 0 8px; border-radius: 20px;
  background: var(--paper-2); border: 2px solid transparent;
}
.bb-pill.d4 { min-width: 124px; }
.bb-beat.sel .bb-pill { border-color: rgba(240,138,0,.55); }
.bb-beat.before .bb-pill { opacity: .45; }
.bb-dot {
  --c: #9487A2;
  width: 22px; height: 22px; border-radius: 50%; flex: none; position: relative;
  background: var(--surface); border: 2.5px solid #CDBFD8; transition: transform .1s;
}
.bb-dot:hover { transform: scale(1.12); }
.bb-dot.on { background: var(--c); border-color: rgba(43,29,56,.75); }
.bb-dot.silent { background: var(--surface); border-color: rgba(43,29,56,.75); border-style: dotted; }   /* a word's own rest begins here */
.bb-dot.hold { background: transparent; border-color: transparent; }
.bb-dot.hold::before { content: ''; position: absolute; left: -9px; right: -9px; top: 50%; height: 7px; margin-top: -3.5px; border-radius: 4px; background: var(--c); opacity: .55; }
.bb-dot.rest { background: transparent; border-color: #CDBFD8; }
.bb-dot.fill { background: transparent; border: 2px dotted #DCCFE4; }
.bb-dot.off { visibility: hidden; }
.bb-block { --c: #9487A2; width: 60px; height: 26px; border-radius: 6px; background: var(--c); opacity: .55; border: 2px solid rgba(43,29,56,.35); }
.bb-block:hover { opacity: .8; }
.bb-pill.easy { gap: 3px; padding: 0 5px; }
.bb-easy {
  --c: #22A55B;
  height: 32px; min-width: 32px; padding: 0 4px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--c); color: var(--ink);
}
.bb-easy .engraving { height: 18px; width: auto; }
.bb-easy.on { background: var(--c); color: #fff; }
.bb-easy.on .engraving path, .bb-easy.on .engraving rect, .bb-easy.on .engraving polygon { fill: #fff; }
.bb-easy.is-rest { background: #525b64; border-color: #525b64; }
.bb-four { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; }
.bb-four .engraving { height: 15px; }
.bb-words { font-size: 12px; font-weight: 700; color: var(--ink-2); max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 15px; }
.bb-pm { display: flex; gap: 6px; }
.bb-fine { width: 26px; height: 22px; border-radius: 7px; background: var(--paper-2); color: var(--ink-2); font-size: 15px; font-weight: 900; line-height: 1; }
.bb-fine:hover:not(:disabled) { background: var(--edit-soft); color: var(--edit); }
.bb-fine:disabled { opacity: .3; }
.bb-chain { width: 26px; height: 26px; margin-top: 20px; border-radius: 8px; color: #C9BBD6; flex: none; }
.bb-chain svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bb-chain.on { color: var(--edit); background: var(--edit-soft); }
.bb-chain:hover:not(:disabled) { color: var(--edit); }
.bb-chain:disabled { opacity: .35; }
/* a narrow stage (a phone beside the Edit box): smaller pills, two to a row */
@container (max-width: 440px) {
  .bb-pill { min-width: 60px; height: 34px; padding: 0 4px; gap: 2px; }
  .bb-pill.d4 { min-width: 84px; }
  .bb-dot { width: 16px; height: 16px; border-width: 2px; }
  .bb-dot.hold::before { left: -6px; right: -6px; }
  .bb-chain { width: 18px; margin-top: 18px; }
  .bb-words { max-width: 84px; font-size: 11px; }
  .bb-where { font-size: 12px; }
  .bb-mode .seg-btn { padding: 4px 7px; font-size: 11px; }
  .bb-easy { height: 28px; min-width: 28px; }
}
@media (max-width: 480px) {
  .eb-btn.eb-view { font-size: 11px; padding: 0 9px 0 7px; }
}

/* 2.5 compound time: a two-digit numeral (12/8), the beat strip's three-eighth beats, glyph groups */
.ts-num.two { letter-spacing: -.06em; }
.bb-pill.d3 { min-width: 104px; }
.bb-pill.d6 { min-width: 172px; }
.bb-glyphs { display: inline-flex; align-items: center; gap: 0; }
.bb-glyphs .engraving { height: 18px; width: auto; }
@container (max-width: 440px) {
  .bb-pill.d3 { min-width: 76px; }
  .bb-pill.d6 { min-width: 118px; }
}

/* 2.5 Dotted · Tie · Rest: three buttons, the picture over the word */
.eb-values .vd-trio { gap: 5px; }
.eb-values .eb-btn.vd-tall { flex-direction: column; gap: 3px; height: auto; min-height: 50px; padding: 6px 2px 5px; font-size: 11.5px; }
.eb-values .vd-tall svg { width: 18px; height: 18px; }
.eb-values .vd-tall .vd-rest-pic { display: flex; align-items: center; justify-content: center; height: 18px; }
.eb-values .vd-tall .vd-rest-pic svg.engraving { width: auto; height: 18px; }
/* while Rest waits for its value, the circles show rests */
.value-choice.rest-preview { color: #525b64; opacity: .95; }

/* 2.5 Edit ↔ Chords: the switch takes the title's place (only with the
   chords out); in Chords the box is the chord panel, full height, to play */
.eb-pane { flex: 1; min-width: 0; display: inline-flex; padding: 2px; background: rgba(240,138,0,.12); }
.eb-pane .seg-btn { flex: 1; min-width: 0; padding: 5px 6px; font-size: 12.5px; font-weight: 800; color: var(--edit); }
.eb-pane .seg-btn.active { background: var(--surface); color: var(--edit); }
body.pane-chords .eb-body > :not(#eb-chords) { display: none !important; }
body.pane-chords.show-strip .eb-chords { flex: 1 1 auto; height: auto; min-height: 0; margin: 0 -11px -11px; border-top: none; }
.edit-box:has(.eb-pane:not([hidden])) .eb-lock { display: none; }   /* room for the switch */


/* ============================================================
   NOTES THAT FOLD AWAY (core.js ui.note, 2026-10-03 — the user's design)
   An explaining note ends with a small ⓘ; a tap folds it into the ⓘ.
   ============================================================ */
.fold-note { font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ink-2); }
.fold-note.block { display: block; padding: 8px 12px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; font-size: 14px; }
.fold-note kbd { font-family: var(--font); font-size: 11.5px; font-weight: 900; padding: 0 5px; border-radius: 5px; border: 1px solid var(--hairline-2); border-bottom-width: 2px; background: var(--surface); color: var(--ink); }
.note-i {
  position: relative; display: inline-grid; place-items: center; vertical-align: 1px;
  width: 18px; height: 18px; padding: 0; margin-left: 3px; border-radius: 50%;
  border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--accent);
  font: 900 11px/1 var(--font-signature); text-transform: none; letter-spacing: 0;
  transition: background .13s, color .13s;
}
.note-i::after { content: ''; position: absolute; inset: -6px; }          /* a finger's worth of target */
.note-i:hover { background: var(--accent); color: #fff; }
.note-i.folded { margin-left: 0; background: var(--surface); }
.note-i.folded.block { display: grid; }

/* ============================================================
   THE CHORD PROGRESSION BUTTON — the chord panel's foot (chord-strip.js)
   ============================================================ */
.prog-btn {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 4px 8px; border-radius: 10px;
  background: var(--chord); color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1.1;
  box-shadow: 0 2px 6px rgba(159,79,255,.35);
  transition: filter .13s, transform .06s;
}
.prog-btn:hover { filter: brightness(1.08); }
.prog-btn:active { transform: translateY(1px); }
.prog-btn svg { width: 15px; height: 15px; flex: none; fill: currentColor; stroke: none; }
.prog-btn .pb-label { min-width: 0; text-align: center; }
.prog-btn .pb-count { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fff; color: var(--chord); font-size: 11px; font-weight: 900; line-height: 18px; text-align: center; }
.prog-btn .pb-count[hidden] { display: none; }
@container (max-width: 196px) {
  .prog-btn { gap: 5px; padding: 4px 6px; }
  .prog-btn svg { display: none; }              /* the words come first: "Chord Progression" on one line */
}
@container (max-width: 150px) {
  .prog-btn { font-size: 11px; gap: 4px; padding: 4px 5px; }
}
.eb-chords .prog-btn { margin-top: 2px; }
body.present-mode .prog-btn { display: none; }          /* Present: the music, not the tools (DESIGN §12) */

/* ============================================================
   THE CHORDS WINDOW (progression-window.js): Individual Focus · Chord Charts · Time Line
   ============================================================ */
.sheet.prog-sheet {
  max-width: 1100px; height: min(880px, 92vh); max-height: 92vh;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  overflow: clip;            /* not a scroll container: nothing (a focus, a scrollIntoView) can slide the window sideways */
}
.pw-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--hairline); background: var(--surface); }
.pw-head h2 { margin: 0; font-family: var(--font-round); font-size: 23px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pw-song { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-undo { display: inline-flex; gap: 4px; }
.pw-hbtn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); border: 1px solid var(--hairline); background: var(--surface); }
.pw-hbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pw-hbtn:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); }
.pw-hbtn:disabled { opacity: .35; }
.pw-body { flex: 1; min-height: 0; }                     /* each page sets its own layout (.chart .tline .focus.fx) */
.pw-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 12px 18px; border-top: 1px solid var(--hairline); background: var(--surface); }
.pw-gap { flex: 1; }

/* ============================================================
   THE CHORD CHART — the Chords window's hub (chord-chart.js, song-wave.js; 2026-10-28,
   ../Song Writer Chords Redesign/ §3.1). Information by design, not small print:
   colour = the chord's root, the dots = its notes, the badge = how often the song
   uses it; the wave's upper half the melody, its lower half the chords.
   ============================================================ */
.sheet.prog-sheet { position: relative; }           /* the hub's question sits over the whole window */
.pw-body.chart { display: block; overflow-y: auto; background: var(--surface); }
.pw-foot:empty { display: none; }
.cc-hub { display: flex; flex-direction: column; min-height: 100%; }
.cc-shelf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 14px; flex: none;   /* wrapped, never scrolled: a swipe on a card is a drag (touch, the smartboard) */
  min-height: 121px; padding: 20px 22px 20px;          /* 2026-10-29 (user): the cards a quarter shorter, the shelf with them */
  background: linear-gradient(var(--paper), var(--surface)); border-bottom: 1px solid var(--hairline);
  transition: background .15s;
}
.cc-shelf.drop { background: var(--accent-soft); }
.cc-card {
  --c: #888; --cink: #fff;
  position: relative; flex: none; width: 100px; height: 81px; padding: 6px 6px 6px 20px;
  border-radius: 22px; background: var(--c);
  background-image: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 55%);
  color: var(--cink); font-family: var(--font-block);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), 0 2px 6px rgba(43,29,56,.14);
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
  transition: transform .12s, opacity .12s;
}
.cc-card.out-of-scale { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 7px, transparent 7px 14px); }
.cc-name { font-size: calc(32px * var(--ns, 1)); font-weight: 600; line-height: 1; white-space: nowrap; }   /* --ns: a long name shrinks (chords.js nameScale) */
.cc-other { font-family: var(--font); font-size: 14px; font-weight: 900; line-height: 1; opacity: .92; white-space: nowrap; }
.cc-dots { position: absolute; left: 10px; top: 11px; bottom: 13px; width: 8px; border-radius: 4px; background: rgba(255,255,255,.3); }
.cc-dots i { position: absolute; left: 0; width: 8px; height: 8px; margin-bottom: -4px; border-radius: 50%; background: var(--cink); }
.cc-uses {
  position: absolute; top: -9px; right: -9px; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 14px;
  background: var(--surface); color: var(--ink); font: 900 14px/28px var(--font); text-align: center; box-shadow: var(--shadow-1);
}
.cc-card.sel { outline: 4px solid var(--gold); outline-offset: 3px; }
.cc-card.flash { animation: cc-flash .6s ease; }
@keyframes cc-flash { 35% { transform: scale(1.1); } }
.cc-card.cc-lifted { opacity: .28; }
/* the ? boxes (2026-10-29, user): empty places on the chart — tapped, one waits for the next chord played */
.cc-blank {
  background: transparent; background-image: none; border: 3px dashed var(--hairline-2); color: var(--ink-3); box-shadow: none; cursor: pointer; padding: 0;
  font-family: var(--font-round); font-size: 36px; font-weight: 700; line-height: 1;
}
.cc-blank:hover { border-color: var(--accent); color: var(--accent); }
.cc-blank.waiting { border-color: var(--accent); color: var(--accent); }
.cc-blank.armed { background: var(--accent-soft); animation: cc-listen 1.2s ease-in-out infinite; }
@keyframes cc-listen { 50% { transform: scale(1.06); } }
/* to the right of the boxes, the way in (the user's words) */
.cc-hint { flex: 0 1 220px; margin: 0 0 0 6px; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--ink-3); }
/* the round + : one more ? box, waiting */
.cc-addbox {
  flex: none; width: 44px; height: 44px; margin-left: 2px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 2px rgba(156,22,142,.25); cursor: pointer; transition: filter .13s, transform .06s;
}
.cc-addbox:hover { filter: brightness(.96); }
.cc-addbox:active { transform: scale(.94); }
.cc-addbox svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.cc-starter { opacity: .32; cursor: pointer; padding: 6px; }
.cc-starter:hover { opacity: .62; }
.cc-gap { flex: none; width: 6px; align-self: stretch; margin: 8px -4px; border-radius: 3px; background: var(--accent); }
.cc-ghost { position: fixed; z-index: 2000; margin: 0; pointer-events: none; transform: translate(-50%, -50%) rotate(-3deg); opacity: .92; box-shadow: var(--shadow-3); transition: opacity .12s, transform .12s; }
.cc-ghost.cc-leaving { opacity: .4; transform: translate(-50%, -50%) rotate(-6deg) scale(.82); }
.cc-none { margin: auto; color: var(--ink-3); font-weight: 800; }

/* the wave */
.cc-mid { padding: 16px 22px 4px; }
.cc-wave { display: grid; grid-template-columns: 100px minmax(0, 1fr) 30px; gap: 16px; }
.cc-transport { display: flex; flex-direction: column; align-items: center; gap: 9px; padding-top: 30px; }
.cc-play { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(156,22,142,.35); transition: filter .13s, transform .06s; }
.cc-play:hover { filter: brightness(1.1); }
.cc-play:active { transform: scale(.96); }
.cc-play svg { width: 26px; height: 26px; fill: currentColor; }
.cc-loop { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-3); }
.cc-loop.on { background: var(--accent-soft); color: var(--accent); }
.cc-loop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cc-layer { width: 100%; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--paper-2); font-size: 12.5px; font-weight: 900; color: var(--ink-3); }
.cc-layer i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 2px #9C168E; }
.cc-layer.on { color: var(--ink); }
.cc-layer.on i { background: #9C168E; }
.cc-layer.chords i { box-shadow: inset 0 0 0 2px #A98BF0; }
.cc-layer.chords.on i { background: #A98BF0; }
.cc-wmain { min-width: 0; user-select: none; -webkit-user-select: none; }
.cc-wtabs { position: relative; height: 30px; }
.cc-wtab {
  position: absolute; bottom: 0; min-width: 0; height: 28px; padding: 0 12px;
  border: 2px solid var(--td); border-bottom: 0; border-radius: 11px 11px 0 0;
  background: var(--tb); color: var(--td); font-family: var(--font-round); font-size: 16px; font-weight: 700; line-height: 24px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-wbody { position: relative; height: 132px; border-radius: 0 14px 14px 14px; overflow: hidden; background: var(--paper); cursor: pointer; touch-action: none; }
.cc-wbody canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cc-region { position: absolute; top: 0; bottom: 0; background: rgba(156,22,142,.10); border-left: 3px solid var(--accent); border-right: 3px solid var(--accent); pointer-events: none; }
.cc-phead { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); pointer-events: none; }
.cc-phead::before { content: ''; position: absolute; top: -1px; left: -4.5px; border: 6px solid transparent; border-top: 8px solid var(--ink); }
.cc-lane { position: relative; height: 28px; margin-top: 7px; }
.cc-lchord {
  position: absolute; top: 0; height: 26px; border-radius: 7px; border-left: 2px solid var(--surface);
  background: var(--c); color: var(--cink); font-family: var(--font-block); font-size: 14px; font-weight: 600; line-height: 26px;
  text-align: center; white-space: nowrap; overflow: hidden; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
}
/* the fold (2026-10-29, user): folded, a strip a quarter the height — ▶ and the wave; the chevron opens it all */
.cc-fold { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-2); }
.cc-fold:hover { background: var(--accent-soft); color: var(--accent); }
.cc-fold svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.cc-wave:not(.folded) .cc-fold svg { transform: rotate(180deg); }
.cc-wave.folded { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.cc-wave.folded .cc-transport { padding-top: 0; }
.cc-wave.folded .cc-play { width: 44px; height: 44px; box-shadow: 0 3px 8px rgba(156,22,142,.3); }
.cc-wave.folded .cc-play svg { width: 19px; height: 19px; }
.cc-wave.folded .cc-loop, .cc-wave.folded .cc-layer, .cc-wave.folded .cc-wtabs, .cc-wave.folded .cc-lane { display: none; }
.cc-wave.folded .cc-wbody { height: 44px; border-radius: 12px; }

/* the board: the panel's blocks, bigger */
.cc-play-area { display: flex; justify-content: center; padding: 10px 22px 22px; }
.cc-board { width: min(680px, 100%); }
.cc-hub .pw-board .strip-tower { height: 200px; }
.cc-hub .pw-board .crow { max-height: 50px; }
.cc-under { display: flex; align-items: stretch; gap: 8px; }
.cc-under .strip-mods { flex: 1; min-width: 0; }
.cc-more { flex: none; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--hairline-2); background: var(--surface); font-size: 13px; font-weight: 800; color: var(--ink-2); }
.cc-more:hover { background: var(--paper-2); color: var(--ink); }
.cblock.cc-on::after, .cc-cb.cc-on::after { content: ''; position: absolute; left: 7px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(43,29,56,.3); }
.cc-boardpick { flex: none; }
.cc-boardpick .seg-btn { padding: 6px 12px; }

/* the circle of fifths in blocks (chord-circle.js, 2026-10-29): two ovals, the majors outside and their
   relative minors inside; 7 columns; heights in units (--u) so a phone can shrink it whole */
.cc-board.circle { width: min(1000px, 100%); }
.cc-circle { --cg: 10px; --u: 1px; position: relative; height: calc(var(--h) * var(--u)); margin: 2px 0 14px; user-select: none; -webkit-user-select: none; }
.cc-cb {
  --cw: calc((100% - 6 * var(--cg)) / 7);
  position: absolute; left: calc(var(--n) * (var(--cw) + var(--cg))); top: calc(var(--y) * var(--u)); width: var(--cw);
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  border-radius: 12px; background: var(--c); color: var(--cink);
  background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%);
  font-family: var(--font-block); font-weight: 600; line-height: 1; white-space: nowrap;
  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);
  cursor: pointer; touch-action: none; transition: transform .08s, filter .08s;
}
.cc-cb.maj { height: calc(46 * var(--u)); font-size: 24px; }
.cc-cb.min { height: calc(40 * var(--u)); font-size: 19px; }
.cc-cb[style*="--cink:#1c1a22"] { text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.cc-cb.out-of-scale { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.1) 0 6px, transparent 6px 12px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.18); }
.cc-cb:hover { filter: brightness(1.08); }
.cc-cb.is-on { transform: scale(1.06); filter: brightness(1.2) saturate(1.1); z-index: 3; }
.cc-cb.home { outline: 3px solid var(--ink-2); outline-offset: 3px; }
.cc-cbn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; pointer-events: none; font-size: calc(100% * var(--nsw, 1)); }
.cc-cb.cc-ghost { position: fixed; }
.cc-ccenter { position: absolute; left: 50%; top: calc(var(--h) * var(--u) / 2); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cc-ckey { font-size: 12.5px; font-weight: 900; color: var(--ink-3); white-space: nowrap; }
.cc-cnames .seg-btn { min-width: 38px; padding: 5px 10px; font-family: var(--font-block); font-size: 15px; font-weight: 600; }
.cc-hub.ro .cc-card { cursor: default; }

/* the question (D5; Focus and the Time Line will ask too) */
.cc-ask { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(43,29,56,.28); border-radius: inherit; }
.cc-ask-card { width: min(520px, 100%); padding: 24px 24px 14px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-3); }
.cc-ask-card h3 { margin: 0 0 18px; font-family: var(--font-round); font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.cc-ask-card h3 .figs, .cc-ask-card h3 .fig { color: inherit; }
.cc-ask-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-ask-btns .btn { flex: 1 1 auto; justify-content: center; }
.cc-keep { display: block; margin: 12px auto 0; padding: 6px 12px; font-weight: 900; color: var(--ink-3); }
.cc-keep:hover { color: var(--ink); }

@media (max-width: 640px) {
  .cc-shelf { min-height: 105px; padding: 16px 14px 18px; gap: 22px 12px; }
  .cc-card .cc-tune { width: 27px; height: 27px; bottom: -18px; }
  .cc-card .cc-tune svg { width: 15px; height: 15px; }
  .cc-card { width: 84px; height: 69px; border-radius: 19px; }
  .cc-blank { font-size: 30px; }
  .cc-addbox { width: 40px; height: 40px; }
  .cc-hint { flex-basis: 100%; margin: -4px 0 0; font-size: 13.5px; }
  .cc-name { font-size: calc(27px * var(--ns, 1)); }
  .cc-mid { padding: 12px 14px 4px; }
  .cc-wave { grid-template-columns: minmax(0, 1fr) 30px; gap: 10px; }
  .cc-wave:not(.folded) .cc-wmain { grid-column: 1 / -1; grid-row: 2; }
  .cc-wave:not(.folded) .cc-fold { grid-column: 2; grid-row: 1; align-self: center; }
  .cc-transport { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding-top: 0; }
  .cc-play { width: 52px; height: 52px; }
  .cc-layer { width: auto; padding: 0 12px; }
  .cc-play-area { padding: 8px 14px 18px; }
  .cc-hub .pw-board .strip-tower { height: 172px; }
  .cc-circle { --cg: 4px; --u: .8px; }
  .cc-cb { padding: 0 2px; border-radius: 9px; }
  .cc-cb.maj { font-size: 16px; }
  .cc-cbn { font-size: calc(100% * var(--ns, 1)); }
  .cc-cb.min { font-size: 13px; }
  .cc-ckey { display: none; }
  .cc-cb.cc-on::after { left: 4px; top: 4px; width: 6px; height: 6px; box-shadow: 0 0 0 1.5px rgba(43,29,56,.3); }
  .cc-cnames .seg-btn { min-width: 30px; padding: 4px 7px; font-size: 13px; }
  .cc-under { flex-wrap: wrap; }
  .cc-under .strip-mods { flex-basis: 100%; }
}

/* the selected card's tune button: Focus on its notes */
.cc-tune {
  position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%); width: 31px; height: 31px; border-radius: 50%;   /* below the shorter card's names (2026-10-29) */
  display: grid; place-items: center; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); cursor: pointer;
}
.cc-tune svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.cc-tune:hover { background: var(--paper-2); }

/* ============================================================
   FOCUS — one chord's own notes (chord-focus.js; 2026-10-28, ../Song Writer
   Chords Redesign/ §3.2). The grand staff and the keyboard say it all: the
   orange note is the one that moves, the faint ones are where it may go.
   ============================================================ */
.pw-body.focus.fx { display: flex; flex-direction: column; gap: 0; padding: 0; overflow-y: auto; background: var(--surface); }
.fx-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--hairline); flex: none; }
.fx-back { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 16px 0 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-weight: 900; font-size: 14px; white-space: nowrap; }
.fx-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-back:hover { background: var(--hairline); color: var(--ink); }
.fx-chip { width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--c); box-shadow: inset 0 -4px 0 rgba(0,0,0,.14); }
.fx-name { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.fx-big { font-family: var(--font-block); font-size: 42px; font-weight: 600; line-height: 1; color: var(--ink); white-space: nowrap; }
.fx-big.notes { font-family: var(--font); font-size: 26px; font-weight: 900; letter-spacing: .04em; color: var(--ink-2); }
.fx-small { font-family: var(--font-block); font-size: 21px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.fx-lock { margin-left: auto; }
.fx-lock .seg-btn { display: inline-flex; align-items: center; gap: 7px; }
.fx-lock svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.fx-lock .seg-btn.active svg rect { fill: currentColor; fill-opacity: .15; }
.fx-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 10px 22px 30px; min-height: 0; }
.fx-staff { width: min(560px, 100%); height: auto; flex: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.pw-body svg.fx-staff { stroke: none; }   /* the app's svg[viewbox] { stroke } would outline every shape (it outranks a bare class) */
.fx-staff.nudge { animation: fx-nudge .28s; }
@keyframes fx-nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.fx-hit { fill: transparent; cursor: pointer; }
.fx-note, .fx-ghost { cursor: pointer; }
.fx-ghost:hover path { fill-opacity: .5; }
.fx-btn { cursor: pointer; }
.fx-btn circle { fill: #fff; stroke: var(--edit); stroke-width: 2.4; }
.fx-btn path { fill: none; stroke: var(--edit); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fx-btn:hover circle { fill: var(--edit-soft); }
.fx-btn.fx-x circle { stroke: var(--hairline-2); }
.fx-btn.fx-x path { stroke: var(--ink-3); stroke-width: 2.4; }
.fx-keys { position: relative; display: flex; width: min(820px, 100%); height: 92px; flex: none; margin-bottom: 14px; user-select: none; -webkit-user-select: none; }
.fx-wk { position: relative; flex: 1 1 0; min-width: 0; height: 100%; border: 1.5px solid var(--hairline-2); border-right-width: 0; border-radius: 0 0 8px 8px; background: #fff; }
.fx-wk:last-of-type { border-right-width: 1.5px; }
.fx-bk { position: absolute; top: 0; height: 60%; z-index: 2; border-radius: 0 0 6px 6px; background: #2E2338; }
.fx-wk.lit, .fx-bk.lit { background: var(--kc); }
.fx-kname { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.fx-bk .fx-kname { font-size: 9px; bottom: 5px; }
.fx-kdot { position: absolute; left: 50%; bottom: 9px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--hairline-2); }
.fx-bk .fx-kdot { background: #7C6B8C; bottom: 7px; }
.fx-c { position: absolute; left: 0; right: 0; bottom: -19px; font-size: 10.5px; font-weight: 900; color: var(--ink-3); text-align: center; }
.fx-hear { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 3px 10px rgba(156,22,142,.3); touch-action: none; }
.fx-hear svg, .fx-insong svg { width: 20px; height: 20px; fill: currentColor; }
.fx-insong { display: inline-flex; align-items: center; gap: 6px; }
.fx-insong svg { width: 15px; height: 15px; }
.fx-insong.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.fx-accs { display: inline-flex; gap: 5px; margin-left: 6px; }
.fx-acc { width: 44px; height: 40px; border-radius: 11px; background: var(--paper-2); font-size: 22px; font-weight: 900; color: var(--ink-2); }
.fx-acc.on { background: var(--edit); color: #fff; }
.fx-none { margin: auto; color: var(--ink-3); font-weight: 800; }
@media (max-width: 640px) {
  .fx-head { padding: 10px 14px; gap: 10px; }
  .fx-big { font-size: 34px; }
  .fx-lock .seg-btn span { display: none; }
  .fx-main { padding: 8px 12px 26px; }
  .fx-keys { height: 76px; }
  .fx-kname { font-size: 9px; }
  .fx-bk .fx-kname { font-size: 7px; letter-spacing: -.02em; }
}

/* ============================================================
   THE TIME LINE — where the chords go (chord-timeline.js; 2026-10-29, ../Song
   Writer Chords Redesign/ §3.3). Bold, and no small print: big bar numbers,
   sections in their label's colour with their words and the melody's shape,
   chords as wide as they last in their root's colour, the orange point, a
   dot on the tab while a draft waits.
   ============================================================ */
.pw-body.tline { display: flex; flex-direction: column; overflow-y: auto; background: var(--surface); }
.pw-tabs .seg-btn.pw-dot::after { content: ''; display: inline-block; width: 9px; height: 9px; margin: -2px 0 0 7px; border-radius: 50%; background: var(--edit); vertical-align: middle; }
.tl-view { display: flex; flex-direction: column; min-height: 100%; }
.tl-headbar { display: flex; align-items: center; gap: 12px; padding: 16px 22px 2px; flex: none; }
.tl-headbar .cc-play { width: 54px; height: 54px; }
.tl-headbar .cc-play svg { width: 23px; height: 23px; }
.tl-headbar .btn { height: 46px; padding: 0 18px; font-size: 16px; font-weight: 800; }
.tl-headbar .btn svg { width: 19px; height: 19px; margin-right: 7px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tl-headbar .btn[disabled] { opacity: .4; }
.tl-scroll { flex: none; overflow-x: auto; overflow-y: hidden; padding: 12px 22px 6px; overscroll-behavior-x: contain; }
.tl { position: relative; padding-bottom: 50px; user-select: none; -webkit-user-select: none; touch-action: pan-x; }   /* room under the row for the selection's tools */
.tl-ruler { position: relative; height: 40px; cursor: pointer; touch-action: none; }
.tl-bn {
  position: absolute; top: 0; height: 40px; padding-left: 8px; display: flex; align-items: center;
  border-left: 2px solid var(--hairline-2); font-family: var(--font-round); font-size: 21px; font-weight: 800; color: var(--ink-2);
}
.tl-bn:hover { color: var(--ink); background: var(--paper); }
.tl-band { position: absolute; top: 2px; height: 36px; border-radius: 10px; background: var(--edit-soft); box-shadow: inset 0 0 0 2px var(--edit); pointer-events: none; }
.tl-secrow { position: relative; height: 124px; margin-top: 36px; }
.tl-sec { position: absolute; top: 0; height: 100%; border-radius: 16px; background: var(--sb); border: 3px solid var(--sbd); cursor: grab; }
.tl-sec.sel { box-shadow: 0 0 0 4px var(--gold); z-index: 3; }
.tl-sec.dragging { z-index: 5; box-shadow: var(--shadow-3); cursor: grabbing; opacity: .94; }
.tl-shead { position: absolute; left: -3px; top: -38px; display: flex; align-items: flex-end; gap: 7px; z-index: 6; }
.tl-slab {
  position: relative; margin-top: 6px; height: 31px; min-width: 46px; padding: 0 14px; border-radius: 12px 12px 0 0;
  background: var(--sbd); color: #fff; font-family: var(--font-round); font-size: 19px; font-weight: 800; display: grid; place-items: center; white-space: nowrap;
  touch-action: none;                                      /* a finger drags a section by its tab; its body scrolls the page */
}
.tl-slab.blank svg { width: 20px; height: 20px; fill: currentColor; opacity: .85; }
.tl-c.carried { z-index: 4; transition: none; }
.tl-shead .tl-acts { position: static; transform: none; gap: 6px; }
.tl-shead .tl-acts button { width: 36px; height: 36px; }
.tl-gap .tl-acts { top: -20px; left: 10px; transform: none; }
.tl-sacts button { box-shadow: var(--shadow-2), 0 0 0 1px var(--hairline); }
.tl-sacts button[disabled] { opacity: .35; }
.tl-ins { position: absolute; top: -8px; bottom: -8px; width: 8px; margin-left: -4px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 0 3px rgba(156,22,142,.18); pointer-events: none; z-index: 6; }
.tl-contour { position: absolute; left: 0; right: 0; top: 16px; height: 50px; pointer-events: none; }
.tl-contour i { position: absolute; width: 13px; height: 13px; margin: -6px 0 0 5px; border-radius: 50%; background: var(--nc); box-shadow: inset 0 -2px 0 rgba(0,0,0,.16); }
.tl-words { position: absolute; left: 0; right: 0; bottom: 12px; height: 26px; pointer-events: none; }
.tl-words span { position: absolute; top: 0; padding-left: 6px; overflow: hidden; font-size: 17px; font-weight: 900; line-height: 26px; white-space: nowrap; color: var(--ink); }
.tl-gap {
  position: absolute; top: 0; height: 100%; border-radius: 16px; border: 3px dashed var(--hairline-2); display: grid; place-items: center;
  font-family: var(--font-round); font-size: 20px; font-weight: 800; color: var(--ink-3);
  background: repeating-linear-gradient(135deg, var(--paper) 0 10px, transparent 10px 20px);
}
.tl-gap.has { border-color: var(--ink-3); color: var(--ink-2); }
.tl-gap[data-gap] { cursor: pointer; }
.tl-gap.sel { border-color: var(--gold); border-style: solid; box-shadow: 0 0 0 3px var(--gold); z-index: 3; }
.tl-chrow {
  position: relative; height: 84px; margin-top: 14px; border-radius: 14px; background-color: var(--paper);
  background-image: linear-gradient(90deg, var(--hairline-2) 2px, transparent 2px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  transition: background-color .15s;
}
.tl-chrow.drop { background-color: var(--accent-soft); }
.tl-c {
  --c: #999; --ck: #fff;
  position: absolute; top: 0; height: 84px; border-radius: 14px; background: var(--c); color: var(--ck);
  background-image: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 55%);
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  font-family: var(--font-block); font-size: 28px; font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.14); cursor: grab; touch-action: none;
}
.tl-c > span { overflow: hidden; }
.tl-c.out { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 7px, transparent 7px 14px); }
.tl-c.sel { box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), 0 0 0 4px var(--gold); z-index: 3; }
.tl-c.sounding { box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), 0 0 0 4px rgba(156,22,142,.45); }
.tl-c.sel.sounding { box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), 0 0 0 4px var(--gold); }
.tl-c.lifted { opacity: .25; }
.tl-c.tl-moving { z-index: 6; opacity: .9; pointer-events: none; box-shadow: var(--shadow-3); }
.tl-c.tl-moving.copying::after { content: '+'; position: absolute; top: -12px; right: -12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 900 18px/1 var(--font); }
.tl-stretch { position: absolute; top: 50%; width: 18px; height: 46px; margin-top: -23px; border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-2); cursor: ew-resize; z-index: 4; touch-action: none; }
.tl-stretch::after { content: ''; position: absolute; left: 6px; top: 13px; bottom: 13px; width: 6px; border-left: 2px solid var(--ink-3); border-right: 2px solid var(--ink-3); }
.tl-stretch.l { left: -10px; }
.tl-stretch.r { right: -10px; }
.tl-acts { position: absolute; top: calc(100% + 8px); display: flex; gap: 7px; z-index: 6; transform: translateX(-100%); }
.tl-acts button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1), 0 0 0 1px var(--hairline); }
.tl-acts button:hover { background: var(--paper-2); }
.tl-acts svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tl-mark { position: absolute; top: 0; height: 84px; border-radius: 14px; border: 3px dashed var(--accent); background: rgba(156,22,142,.08); pointer-events: none; z-index: 5; }
.tl-pt { position: absolute; top: 0; bottom: 50px; width: 3px; margin-left: -1.5px; background: var(--edit); pointer-events: none; z-index: 7; }
.tl-pt::before { content: ''; position: absolute; top: 0; left: -7.5px; border: 9px solid transparent; border-top: 12px solid var(--edit); }
.tl-ph { position: absolute; top: 0; bottom: 50px; left: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); pointer-events: none; z-index: 8; }
.tl-tray {
  flex: none; margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 16px 22px 20px; border-top: 1px solid var(--hairline); background: linear-gradient(var(--surface), var(--paper));
}
.cc-card.tl-card { width: 88px; height: 88px; padding: 6px; border-radius: 20px; }
.cc-card.tl-card .cc-name { font-size: calc(28px * var(--ns, 1)); }
.tl-sep { flex: none; width: 2px; align-self: stretch; margin: 6px 2px; border-radius: 1px; background: var(--hairline-2); }
.tl-clip {
  position: relative; flex: none; width: 116px; height: 84px; padding: 12px 10px 10px; border-radius: 18px;
  display: flex; align-items: center; background: var(--surface); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  cursor: grab; touch-action: none;
}
.tl-strip { display: flex; gap: 3px; width: 100%; height: 46px; }
.tl-strip i { min-width: 5px; border-radius: 6px; background: var(--c); }
.tl-pin { position: absolute; top: -15px; left: 50%; margin-left: -15px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 0 0 3px var(--surface); }
.tl-pin::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; }   /* a finger-sized target */
.tl-pin svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.tl-pin .unpin { display: none; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
@media (hover: hover) {                                    /* a tap on the pin takes the copy off: an × says so under a mouse */
  .tl-pin:hover { background: var(--accent); }
  .tl-pin:hover .pin { display: none; }
  .tl-pin:hover .unpin { display: block; }
}
.tl-view.ro .tl-c, .tl-view.ro .tl-sec { cursor: default; }
/* a copied section on the clipboard card: its tab and its chords */
.tl-clip.sec { width: 132px; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; background: var(--sb); border-color: var(--sbd); box-shadow: 4px 4px 0 var(--sbd); }
.tl-clip.sec .tl-strip { height: 30px; }
.tl-clab { align-self: flex-start; height: 26px; min-width: 34px; padding: 0 10px; border-radius: 9px; display: grid; place-items: center; background: var(--sbd); color: #fff; font-family: var(--font-round); font-size: 16px; font-weight: 800; }
.tl-clab svg { width: 16px; height: 16px; fill: currentColor; }
.tl-glab { max-width: 100%; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-bn.quiet { border-left-color: transparent; }            /* a bar without its number (further out): a short tick, under the number before it */
.tl-bn.quiet::before { content: ''; position: absolute; left: -2px; bottom: 0; height: 8px; border-left: 2px solid var(--hairline-2); }

/* THE ZOOM (2026-10-29): Close up · Mid (about 20 bars) · Top (about 36) — the same Time Line,
   further out: shorter rows, each line's words instead of each word, smaller dots and names
   (the sizes CHORD_PX in chord-timeline.js measures names by) */
.tl-zoom { flex: none; padding: 3px; border-radius: 14px; }
.tl-zoom .seg-btn { width: 48px; height: 40px; padding: 0; border-radius: 11px; display: grid; place-items: center; }
.tl-zoom .seg-btn svg { width: 24px; height: 24px; fill: currentColor; }
.tl-view:not(.z-close) .tl-slab {
  display: block; height: 27px; line-height: 27px; min-width: 40px; padding: 0 12px; font-size: 17px; border-radius: 10px 10px 0 0;
  max-width: max(40px, var(--sw)); overflow: hidden; text-overflow: ellipsis;
}
.tl-view:not(.z-close) .tl-slab.blank svg { vertical-align: -4px; }
.tl-view:not(.z-close) .tl-shead { top: -34px; }
.tl-view:not(.z-close) .tl-secrow { margin-top: 32px; }
.tl-view:not(.z-close) .tl-sec, .tl-view:not(.z-close) .tl-gap { border-radius: 12px; }
.tl-words .tl-line { padding-left: 8px; text-overflow: ellipsis; }
.tl-view.z-mid .tl-ruler, .tl-view.z-mid .tl-bn { height: 34px; }
.tl-view.z-mid .tl-bn { padding-left: 6px; font-size: 18px; }
.tl-view.z-mid .tl-secrow { height: 100px; }
.tl-view.z-mid .tl-contour { top: 12px; height: 42px; }
.tl-view.z-mid .tl-contour i { width: 9px; height: 9px; margin: -4px 0 0 2px; }
.tl-view.z-mid .tl-words { bottom: 9px; }
.tl-view.z-mid .tl-words span { font-size: 16px; }
.tl-view.z-mid .tl-gap { font-size: 17px; }
.tl-view.z-mid .tl-chrow, .tl-view.z-mid .tl-c, .tl-view.z-mid .tl-mark { height: 64px; border-radius: 11px; }
.tl-view.z-mid .tl-c { font-size: 20px; padding: 0 2px; }
.tl-view.z-mid .tl-stretch { width: 14px; height: 36px; margin-top: -18px; }
.tl-view.z-mid .tl-stretch::after { left: 4px; top: 10px; bottom: 10px; }
.tl-view.z-mid .tl-stretch.l { left: -8px; }
.tl-view.z-mid .tl-stretch.r { right: -8px; }
.tl-view.z-top .tl-ruler, .tl-view.z-top .tl-bn { height: 30px; }
.tl-view.z-top .tl-bn { padding-left: 5px; font-size: 16px; }
.tl-view.z-top .tl-secrow { height: 82px; }
.tl-view.z-top .tl-contour { top: 9px; height: 34px; }
.tl-view.z-top .tl-contour i { width: 7px; height: 7px; margin: -3px 0 0 1px; }
.tl-view.z-top .tl-words { bottom: 6px; }
.tl-view.z-top .tl-words span { font-size: 15px; }
.tl-view.z-top .tl-gap { font-size: 15px; }
.tl-view.z-top .tl-chrow, .tl-view.z-top .tl-c, .tl-view.z-top .tl-mark { height: 52px; border-radius: 9px; }
.tl-view.z-top .tl-c { font-size: 16px; padding: 0 2px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.14); }
.tl-view.z-top .tl-c.sel { box-shadow: inset 0 -4px 0 rgba(0,0,0,.14), 0 0 0 3px var(--gold); }
.tl-view.z-top .tl-stretch { width: 12px; height: 30px; margin-top: -15px; border-radius: 6px; }
.tl-view.z-top .tl-stretch::after { left: 3px; top: 8px; bottom: 8px; }
.tl-view.z-top .tl-stretch.l { left: -7px; }
.tl-view.z-top .tl-stretch.r { right: -7px; }


@media (max-width: 640px) {
  .tl-headbar { padding: 12px 14px 2px; gap: 6px; }
  .tl-zoom .seg-btn { width: 36px; }
  .tl-zoom .seg-btn svg { width: 22px; height: 22px; }
  .tl-headbar .cc-play { width: 48px; height: 48px; }
  .tl-headbar .btn { height: 42px; padding: 0 13px; font-size: 15px; }
  .tl-restart { font-size: 0 !important; padding: 0 12px !important; }
  .tl-restart svg { margin-right: 0 !important; }
  .tl-scroll { padding: 10px 14px 6px; }
  .tl-secrow { height: 112px; }
  .tl-words span { font-size: 15px; }
  .tl-tray { padding: 14px 14px 18px; gap: 10px; }
  .cc-card.tl-card { width: 74px; height: 74px; border-radius: 17px; }
  .cc-card.tl-card .cc-name { font-size: calc(24px * var(--ns, 1)); }
  .cc-card.tl-card .cc-other { font-size: 12px; }
}

/* the Chord Chart's board (chord-chart.js boardHtml): the panel's blocks, smaller */
.pw-board { display: flex; flex-direction: column; gap: 6px; container-type: inline-size; }
.pw-board .strip-tower { height: 172px; flex: none; margin-top: 0; }
.pw-board .crow { max-height: 52px; }
.pw-board .cblock { border-radius: 10px; min-height: 26px; }

/* the rhythm: its title, two tabs (Build your own · Pre-built), the box under them */
.pw-rtabs { display: flex; gap: 4px; padding-left: 10px; position: relative; z-index: 1; }
.pw-rtab {
  padding: 8px 14px 7px; border-radius: 12px 12px 0 0; margin-bottom: -1px;
  border: 1px solid var(--hairline); border-bottom-color: transparent; background: var(--paper-2);
  font-size: 13.5px; font-weight: 800; color: var(--ink-3); white-space: nowrap;
}
.pw-rtab:hover:not(.on) { color: var(--ink-2); background: var(--surface); }
.pw-rtab.on { background: var(--surface); color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.pw-rtabs .pw-bars { margin: 0 0 5px auto; align-self: center; }   /* 1 bar · 2 bars, on the tabs' row */
.pw-bars .seg-btn { padding: 5px 10px; font-size: 12.5px; }
.pw-rbox { padding: 12px 12px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hairline); }
/* THE RHYTHM BOX (components/rhythm-box.js, 2026-10-27): Held · Pre-built · Build your own,
   wherever a chord rhythm is chosen. Build your own is the Rhythm page's circles — its own
   classes (.rp-circles .rp-circle .rp-plus .rp-link .rp-notes), at the box's size: --k
   shrinks them to fit the room (rhythm-box.js layout) */
.rb-kit {
  --k: 1;
  --rp-on: #E0642F;
  --rp-hold: #F2A93B;
  --rp-rest: #C6CEDB;
  --rp-dot: calc(26px * var(--k));
  --slot-w: calc(34px * var(--k));
  --rp-note-h: calc(84px * var(--k));
  --gutter-l: 18px;
  --gutter-r: 6px;
  min-width: 0;
}
.rb-bars { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 16px; padding-top: 12px; }
.rb-bar { display: flex; align-items: stretch; flex: none; max-width: 100%; }
.rb-measure {
  position: relative; display: grid;
  grid-template-columns: repeat(var(--beats), max-content); grid-template-rows: auto auto; align-items: start;
}
.rb-num { position: absolute; left: 6px; top: -15px; font-family: var(--font-round); font-size: 12px; font-weight: 700; color: var(--ink-3); }
.rb-div { flex: none; width: 2px; margin: 0 8px; border-radius: 2px; background: var(--hairline-2); }
.rb-kit .rp-notes { margin-top: 8px; cursor: default; }
.rb-kit .rp-notes:hover { background: none; }
.rb-kit.frozen .rp-circle { cursor: default; }
/* whose rhythm it is: the progression's (a note), or its own (Back to …) */
.rb-whose { margin: 0 0 10px; }
.rb-own { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rb-own-tag { font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-right: 4px; }
/* Held: its notes, and what they mean */
.rb-held { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 4px 2px; }
.rb-held-notes svg.rhythm-line { display: block; max-width: 100%; height: auto; }
.rb-held-notes .head { fill: var(--c, var(--ink)); stroke: var(--ink); stroke-width: 22; }
.rb-held-notes .rl-line, .rb-held-notes .rl-bar { opacity: .55; }
.rb-say { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.rb-say b { color: var(--accent); }
/* Pre-built: the meter's rhythms as lines of notes, one under another */
.pw-lines { display: flex; flex-direction: column; gap: 6px; }
.pw-line {
  display: flex; align-items: center; min-height: 52px; padding: 2px 12px; border-radius: 12px;
  border: 1.5px solid var(--hairline); background: var(--surface); color: var(--ink); text-align: left;
  transition: border-color .13s, background .13s, box-shadow .13s;
}
.pw-line svg.rhythm-line { display: block; max-width: 100%; height: auto; }
.pw-line .rl-line, .pw-line .rl-bar { opacity: .55; }
.pw-line:hover { border-color: var(--accent); }
.pw-line.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--accent-deep); }
.pw-small-btn { height: 32px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
/* phones: the window fills the screen */
@media (max-width: 720px) {
  .sheet.prog-sheet { height: 100%; max-height: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .pw-head { padding: 12px 12px 10px 16px; gap: 6px; }
  .pw-head h2 { font-size: 19px; }
  .pw-foot { padding: 10px 12px; gap: 6px; flex-wrap: nowrap; }
  .pw-foot .btn { padding: 0 11px; height: 40px; font-size: 13px; }
}

/* ============================================================
   THE CHORDS WINDOW — its tabs (Chord Chart · Time Line)
   ============================================================ */
.pw-tabs { flex: none; }
.pw-tabs .seg-btn { padding: 7px 14px; }

@media (max-width: 720px) {
  /* the head on two rows: the name, Undo and × on top; Chord Chart · Time Line across under them */
  .pw-head { flex-wrap: wrap; row-gap: 8px; }
  .pw-head h2 { flex: 1 1 auto; }
  .pw-tabs { order: 5; flex: 1 1 100%; display: flex; }
  .pw-tabs .seg-btn { flex: 1; padding: 7px 9px; font-size: 13px; }
  .pw-head .pw-song { display: none; }
}

/* ============================================================
   THE CHORD TRACK IN THE SCORE (chord-track.js, phase 4)
   The chords sit in the row the chord lane keeps at the top of every
   syllable (now a spacer, a little taller); colours are passed in as
   rgba() / rgb() from JS — no color-mix() inside #score (html2canvas).
   ============================================================ */
body.show-ctrack .chord-slot { height: calc(32px * var(--text-scale)); }
.ctrack { position: absolute; inset: 0; pointer-events: none; z-index: 22; }
.cbar {
  position: absolute; pointer-events: auto; display: block; padding: 0; margin: 0;
  border: 0; border-left: 4px solid var(--c); border-radius: 8px; background: var(--cs);   /* a border, not an inset shadow: html2canvas paints those as a frame */
  text-align: left; overflow: visible; cursor: pointer; color: var(--ck);
  font-family: var(--font-block); user-select: none; -webkit-user-select: none;
  transition: box-shadow .12s, filter .12s;
}
.cbar:hover { filter: brightness(.97); }
.cb-name {
  position: absolute; left: 5px; top: 3px; max-width: calc(100% - 8px); overflow: hidden;
  font-weight: 600; font-size: calc(17px * var(--text-scale)); line-height: 1.1; white-space: nowrap;
}
.cbar.held { border-left-color: transparent; border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.cbar.held .cb-name { color: var(--ink-3); font-size: calc(14px * var(--text-scale)); }
.cbar.end { border-right: 3px solid rgba(43,29,56,.3); }
.cbar.nochord { background: transparent; border: 1.5px solid #D8CAE0; }
.cbar.nochord .cb-name { color: var(--ink-3); }
.cbar.unknown { background: #F2EEF5; border: 1.5px solid #C9BCD4; }
.cbar.here::after {                                /* changed just here: a white corner */
  content: ''; position: absolute; right: 0; top: 0; width: 11px; height: 11px;
  border-top-right-radius: 8px; background: linear-gradient(225deg, #fff 50%, transparent 50%);
  filter: drop-shadow(0 0 1px rgba(43,29,56,.45));
}
.cbar.sel { outline: 2.5px solid var(--edit); outline-offset: 1px; z-index: 2; }
.cbar.sounding { box-shadow: 0 0 0 3px rgba(156,22,142,.38); }
.cb-dots { position: absolute; left: -4px; right: 0; bottom: 4px; height: 6px; pointer-events: none; }   /* -4px: measured from the bar's edge, not inside its border */
.ct-lane .cb-dots { left: 0; }
.cb-dots i { position: absolute; top: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--c); }
.cb-dots b { position: absolute; top: 2px; height: 2px; border-radius: 1px; background: var(--c); opacity: .75; }
.cb-tag { position: absolute; left: 4px; top: -14px; font-family: var(--font); font-size: 10.5px; font-weight: 900; color: var(--accent); white-space: nowrap; pointer-events: none; }
.cbar-add {
  position: absolute; pointer-events: auto; padding: 0; border-radius: 8px;
  border: 1.5px dashed rgba(240,138,0,.45); background: transparent;
  color: rgba(240,138,0,.75); font-family: var(--font); font-size: 14px; font-weight: 900; cursor: pointer;
}
.cbar-add:hover { background: rgba(255,149,0,.08); border-color: var(--edit); color: var(--edit); }
.cbar-add.sel { border: 2px solid var(--edit); background: rgba(255,149,0,.14); color: var(--edit); box-shadow: 0 0 10px rgba(255,149,0,.4); }
body.capturing .cbar-add { display: none !important; }
body.capturing .cbar.sel { outline: none !important; }
body.capturing .cbar.sounding { box-shadow: none !important; }

/* A BEAT AT A TIME (2026-10-27): in Edit a chord is dragged (its body to
   another beat, its ends to stretch it), the band shows its beats, and the
   cursor marks the beat a chord goes on */
body.ct-edit .cbar { cursor: grab; touch-action: none; }
body.ct-edit .cbar-add { touch-action: none; }
body.ct-dragging, body.ct-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.cb-grip {
  position: absolute; top: 0; bottom: 0; width: 9px; z-index: 3;
  cursor: ew-resize; touch-action: none;
}
.cb-grip.l { left: -6px; }
.cb-grip.r { right: -5px; }
.cb-grip::after {                                   /* a small handle, seen on hover and on the chord selected */
  content: ''; position: absolute; top: 50%; left: 3px; width: 3px; height: 14px; margin-top: -7px;
  border-radius: 2px; background: var(--ck, #2B1D38); opacity: 0; transition: opacity .12s;
}
.cbar:hover .cb-grip::after, .cbar.sel .cb-grip::after { opacity: .55; }
.cb-grip:hover::after { opacity: 1 !important; }
@media (hover: none) { .cbar.sel .cb-grip { width: 16px; } .cbar.sel .cb-grip.l { left: -10px; } .cbar.sel .cb-grip.r { right: -9px; } }
.ct-beats { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
.ct-beats i { position: absolute; bottom: 1px; width: 1.5px; height: 6px; border-radius: 1px; background: rgba(43,29,56,.28); }
.ct-cursor {
  position: absolute; width: 3px; border-radius: 2px; background: var(--edit); pointer-events: none; z-index: 4;
  box-shadow: 0 0 6px rgba(255,149,0,.55);
}
.ct-cursor::before {                                /* a little flag on top: the beat */
  content: ''; position: absolute; left: -4px; top: -5px; width: 11px; height: 7px;
  background: var(--edit); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.ct-lane .ct-cursor { top: -4px; bottom: -4px; }
.ct-ghost {
  position: absolute; pointer-events: none; z-index: 5; box-sizing: border-box;
  border: 2px dashed var(--c); border-radius: 8px; background: var(--cs);
  font-family: var(--font-block); font-weight: 700; font-size: calc(15px * var(--text-scale)); line-height: 1.1;
  padding: 3px 6px; color: var(--ink); white-space: nowrap; overflow: hidden; opacity: .9;
}
.ct-ghost.copy { border-style: dotted; }
.ct-tip {
  position: fixed; z-index: 400; pointer-events: none;
  padding: 5px 10px; border-radius: 10px; background: var(--ink, #2B1D38); color: #fff;
  font-family: var(--font); font-size: 12.5px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(43,29,56,.25);
}
.ct-tip[hidden] { display: none; }
.ct-tip.copy::after { content: ' +'; color: #FFCC00; }
body.capturing .ct-beats, body.capturing .ct-cursor, body.capturing .cb-grip { display: none !important; }

/* after the melody: the chord chart */
.chord-tail { width: 100%; max-width: max(1200px, calc(1200px * var(--bs))); margin: 10px auto 6px; padding: 0 18px; }   /* as wide as the score above it */
#score > .chord-tail { align-self: stretch; max-width: none; padding: 0; }      /* Save picture moves it into the score for a moment */
.chord-tail[hidden] { display: none; }
.ct-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 4px 10px; border-top: 2px dashed var(--hairline-2); }
.ct-fold { width: 28px; height: 28px; border-radius: 8px; color: var(--ink-3); font-size: 14px; }
.ct-fold:hover { background: var(--paper-2); color: var(--ink); }
.ct-title { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.ct-add { padding: 5px 12px; border-radius: 10px; border: 1.5px dashed var(--accent); background: var(--surface); color: var(--accent); font-size: 13px; font-weight: 800; }
.ct-add:hover { background: var(--accent-soft); }
.ct-chart { display: grid; grid-template-columns: repeat(var(--per, 4), minmax(0, 1fr)); row-gap: 18px; padding: 18px 14px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); }
.ct-bar { position: relative; height: calc(44px * var(--text-scale)); border-left: 2px solid var(--ink); }
.ct-bar.row-end { border-right: 2px solid var(--ink); }
.ct-bar.playing { background: rgba(156,22,142,.08); }
.ct-num { position: absolute; left: 3px; top: -15px; font-size: 10px; font-weight: 800; color: var(--ink-3); }
.ct-tag { position: absolute; left: 22px; top: -15px; font-size: 10.5px; font-weight: 900; color: var(--accent); white-space: nowrap; }
.ct-lane { position: absolute; inset: 4px 5px; }
.ct-lane .cbar { top: 0; bottom: 0; height: auto; }
.ct-lane .cbar-add { position: absolute; top: 0; bottom: 0; height: auto; }
/* AN INSTRUMENTAL LINE (score.js INSTRUMENTAL LINES; chord-track.js drawRestLine): a slim row of its bars and chords */
.notation-line.instrumental { min-height: 0; padding-bottom: 12px; }
.ct-rest { width: 100%; }
.ct-rest .ct-chart { box-shadow: none; border: 2px dashed rgba(43,29,56,.18); background: rgba(255,255,255,.75); padding: 18px 12px 10px; }
body.capturing .ct-head .ct-fold, body.capturing .ct-add { display: none !important; }
body.capturing .ct-chart { box-shadow: none !important; border: 1px solid var(--hairline); }   /* html2canvas paints the shadow as a grey block */
body.present-mode .ct-add { display: none; }

/* ============================================================
   LISTEN ONLY (a lesson's "Chords: listen only" — progression-window.js)
   The same window to look and listen: every control that changes the
   song is hidden (each page leaves its own out) or inert (the sheet's
   guard stops them too).
   ============================================================ */
#prog-sheet.readonly .pw-head h2::after {
  content: 'Listen only'; display: inline-block; vertical-align: 3px; margin-left: 10px;
  padding: 2px 9px; border-radius: 999px; background: var(--chord-soft); color: var(--ink-2);
  font-family: var(--font); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
#prog-sheet.readonly .pw-undo { display: none !important; }

/* ============================================================
   THE RHYTHM PAGE (2026-10-25, RHYTHM-PAGE.md; js/components/rhythm-page.js)
   Rhythm Poetry's circle system over the song: its pill, circles, + and
   ⛓, notes box, words and bar lines, in Song Writer's palette.
   The circles keep Rhythm Poetry's three colours — orange a note starts,
   yellow it goes on, grey silence — because that is the vocabulary.
   ============================================================ */
.rhythm-page {
  --rp-on: #E0642F;
  --rp-hold: #F2A93B;
  --rp-rest: #C6CEDB;
  --rp-dot: calc(26px * var(--bs));
  --rp-note-h: calc(104px * var(--bs));    /* 5.2 staff spaces of Notation's 20 px: notes as big as there (user, 2026-10-26; was 84) */
  --rp-word: calc(19px * var(--bs));
  --gutter-l: 18px;      /* the + (2026-10-26: was 26 / 12 — the pills hug their circles now, rhythm-page.js layout) */
  --gutter-r: 6px;
  width: 100%;
  max-width: max(1200px, calc(1200px * var(--bs)));
  margin: 0 auto;
  padding: 0 18px 20px;
}
.rhythm-page[hidden] { display: none; }
/* the score stays laid out (the staff, timing and the player read it) but unseen and out of the scroll */
body.page-rhythm #score { position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
body.page-rhythm #chord-tail, body.page-rhythm #beat-bar, body.page-rhythm #add-line-row, body.page-rhythm #tap-panel { display: none !important; }
body.capturing #score { position: static; height: auto; overflow: visible; visibility: visible; pointer-events: auto; }
body.capturing .rhythm-page { display: none; }
.rp-empty { font-size: 14px; font-weight: 700; color: var(--ink-3); text-align: center; padding: 30px 0; }

/* one song line: its bars in a row (wrapping), its section colour behind */
.rp-line {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  row-gap: 14px;
  padding: 28px 14px 12px;
  margin-top: 8px;
  border-radius: 12px;
  background: var(--line-bg, #f5f5f5);
}
.rp-label {
  position: absolute; left: 14px; top: 7px;
  font-family: var(--font-round); font-size: 13px; font-weight: 700; color: var(--ink-3);
}

/* a bar and the bar line after it wrap as one */
.rp-bar { display: flex; align-items: stretch; flex: none; max-width: 100%; }
/* a bar: its beats' pills in a row, the notation across them, the words under */
.rp-measure {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--beats), max-content);
  grid-template-rows: auto auto auto;
  align-items: start;
  padding-top: 4px;
}
.rp-measure-number {
  position: absolute; left: 4px; top: -22px;
  font-family: var(--font-round); font-size: 15px; font-weight: 700; color: var(--ink-3);
}
body.hide-section-titles .rp-label { display: none; }
/* an instrumental line (rhythm-page.js restHtml): its bars and their chords, nothing to shape */
.rp-rest-bars { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 26px; width: 100%; padding-top: 6px; }
.rp-rest-bar { position: relative; flex: 0 1 300px; height: 46px; border-left: 2px solid var(--ink-3); }
.rp-rest-bar:last-child { border-right: 2px solid var(--ink-3); }
.rp-rest-bar > i { position: absolute; top: 5px; bottom: 5px; margin-left: 2px; border-radius: 9px; background: var(--c); color: var(--ck); display: flex; align-items: center; padding: 0 8px; overflow: hidden; font: 600 18px/1 var(--font-block); font-style: normal; white-space: nowrap; }
.rp-rest-bar .rp-measure-number { left: 4px; }

/* every row of a beat is boxed identically, so the grids line up; --gap is
   the extra room after the beat that its words need (rhythm-page.js layout) */
.rp-circles, .rp-words {
  box-sizing: border-box;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  border: 1.5px solid transparent;
  width: calc(var(--slots) * var(--slot-w, 36px) + var(--gutter-l) + var(--gutter-r) + 3px);
  margin: 0 calc(2px + var(--gap, 0px)) 0 2px;
}
.rp-circles {
  grid-row: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--slots), var(--slot-w, 36px));
  align-items: center; justify-items: center;
  min-height: calc(var(--rp-dot) + 18px);
  padding-top: 9px; padding-bottom: 9px;
  border-color: var(--hairline-2);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.rp-circles.block { border-style: dashed; }
.rp-circles.before { opacity: .55; }
.rp-pickup .rp-circles { border-style: dashed; border-color: var(--accent); background: var(--accent-soft); }
.rp-circles.sel { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.rp-circles.playing { border-color: var(--rp-on); background: #FCEEE7; box-shadow: 0 0 0 1.5px var(--rp-on); }

.rp-circle {
  width: var(--rp-dot); height: var(--rp-dot);
  border-radius: 50%;
  background: var(--rp-rest);
  flex: none;
  transition: background .13s, transform .13s;
}
button.rp-circle { cursor: pointer; }
button.rp-circle:hover, button.rp-circle:active { transform: scale(1.12); }
.rp-circle.active { background: var(--rp-on); }
.rp-circle.sustain { background: var(--rp-hold); }
.rp-circle.silent { box-shadow: inset 0 0 0 2px rgba(43,29,56,.45); }      /* a word's own rest begins here: its word is under it */
.rp-circle.off { visibility: hidden; }
.rp-circles.frozen .rp-circle { cursor: default; }

/* + : this beat's sixteenths, on or off (Rhythm Poetry's +; no − — the song has no triplets) */
.rp-sub { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1px; }
.rp-plus {
  width: 15px; height: 15px; display: grid; place-items: center;
  border-radius: 5px; font-size: 13px; font-weight: 800; line-height: 1;
  color: var(--ink-3); transition: background .13s, color .13s;
}
.rp-plus:hover, .rp-plus:active { background: var(--paper-2); color: var(--ink); }
.rp-plus.active { background: var(--rp-on); color: #fff; }

/* ⛓ : the note goes on over the beat line — centred between the two beats, however far apart */
.rp-link {
  position: absolute; right: calc(-15.5px - var(--gap, 0px) / 2); top: -9px;
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--hairline-2); color: var(--ink-3);
  z-index: 3;
  transition: background .14s, color .14s, border-color .14s;
}
.rp-link svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.rp-link:hover, .rp-link:active { border-color: var(--rp-hold); color: var(--rp-hold); }
.rp-link.active { background: var(--rp-hold); border-color: var(--rp-hold); color: #fff; }


/* the printed rhythm, one SVG per bar on the circles' centres; heads keep their pitch's colour */
.rp-notes {
  grid-row: 2; grid-column: 1 / -1;
  position: relative;
  height: var(--rp-note-h);
  margin: 10px 3px 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s;
}
.rp-notes:hover { background: rgba(43,29,56,.045); }
.rp-notes .engraving { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 2; }
.rp-notes .engraving path, .rp-notes .engraving rect { fill: var(--ink); stroke: none; }
.rp-notes .engraving .rp-glow { stroke: none; pointer-events: none; }         /* the selected note's light (rhythm-page.js glowNote) */
/* the Rhythm page's Beats off (the Edit box, 2026-10-26): the circles gone, the notation and
   words left — the pills keep their width (the notes sit on the circles' centres) at no height */
body.rp-no-circles .rhythm-page .rp-circles {
  visibility: hidden; height: 0; min-height: 0; padding-top: 0; padding-bottom: 0;
  border-color: transparent; background: transparent; box-shadow: none; overflow: hidden;
}
body.rp-no-circles .rhythm-page .rp-measure { padding-top: 26px; }
/* the cycle's first step: the notes in ink (the words and the circles keep their colours) */
body.rp-mono .rhythm-page .rp-notes .engraving g[data-a] .head { fill: var(--ink); }
body.rp-no-circles .rhythm-page .rp-notes { margin-top: 0; }
/* the head inside an ink ring, as on the Notation page; --ring (glyph units) is set per picture */
.rp-notes .engraving g[data-a] .head { fill: var(--c, var(--ink)); stroke: var(--ink); stroke-width: var(--ring, 20); stroke-linejoin: round; }
.rp-notes .engraving g.block { opacity: .55; }

/* the words, each under the slot its note starts on */
.rp-words {
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(var(--slots), var(--slot-w, 36px));
  justify-items: center; align-items: start;
  margin-top: 6px;
  min-height: calc(var(--rp-word) * var(--text-scale) + 10px);
  cursor: pointer;
}
.rp-word {
  font-family: var(--lyric-font);
  font-size: calc(var(--rp-word) * var(--text-scale));
  font-weight: 600; line-height: 1.2; color: var(--ink);
  text-align: center; white-space: nowrap;
  padding: 1px 3px; border-radius: 5px;
}
/* the hyphen to the next syllable of the word (rhythm-page.js hyphens) — the word's own type */
.rp-hyphen {
  z-index: 4;
  font-family: var(--lyric-font);
  font-size: calc(var(--rp-word) * var(--text-scale));
  font-weight: 600; line-height: 1.2; color: var(--ink);
}
/* a word being typed (double-click a note): the Notation page's box (.text-input), at this page's word size */
.rp-word-input {
  position: relative; z-index: 5;
  font-family: var(--lyric-font);
  font-size: calc(var(--rp-word) * var(--text-scale));
  font-weight: 600; line-height: 1.2; color: #333; text-align: center;
  width: auto; min-width: 30px;
  background: rgba(255,255,255,.95); border: 2px solid #F08A00; border-radius: 5px;
  padding: 1px 4px; outline: none; box-shadow: 0 0 8px rgba(240,138,0,.3);
}

/* bar lines: + a bar after, × this bar */
.rp-divider {
  position: relative; flex: none; align-self: stretch;
  width: 2px; min-height: calc(var(--rp-note-h) + var(--rp-dot) + 70px);
  margin-top: 4px;
  margin: 0 9px; border-radius: 2px;
  background: var(--hairline-2);
}
.rp-divider.final {
  width: 8px; background:
    linear-gradient(var(--ink), var(--ink)) left / 2px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) right / 4px 100% no-repeat;
}
.rp-bar-btn {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; font-size: 17px; font-weight: 800; line-height: 1;
  background: var(--surface); border: 1.5px solid var(--hairline-2); color: var(--ink-2);
  opacity: .35; z-index: 4;
  transition: opacity .15s, background .15s, color .15s, border-color .15s;
}
.rp-add { top: calc(var(--rp-dot) + 24px); }
.rp-del { top: calc(var(--rp-dot) + 58px); }
.rp-divider:hover .rp-bar-btn, .rp-bar-btn:hover { opacity: 1; }
.rp-add:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.rp-del:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
@media (hover: none) { .rp-bar-btn { opacity: .7; } }

@media (max-width: 640px) {
  .rhythm-page { --rp-dot: calc(20px * var(--bs)); --rp-word: calc(16px * var(--bs)); --gutter-l: 16px; --gutter-r: 5px; padding: 0 8px 16px; }
  .rp-line { padding: 26px 6px 10px; }
  .rp-divider { margin: 0 5px; }
}