/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/* ═══════════════════════════════════════════════════════════════════════
   VIVACE CREATOR — the notation editor.
   Tokens come from css/site-chrome.css (--vc-*). The score paper is always
   white with black ink, so everything drawn over it (caret, selection,
   playhead) keeps its colour in dark mode; the chrome follows the theme.

   Colour meaning: BLUE = time (caret, playhead, the pending value, the
   hot note) · PINK = selection · green/orange/purple = voices 2–4.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --cr-time: #2563eb;
  --cr-time-text: #1d4ed8;   /* the same blue as text: darker on white, lighter on the dark theme */
  --cr-time-soft: rgba(37, 99, 235, 0.12);
  --cr-time-line: rgba(37, 99, 235, 0.35);
  --cr-sel: #d6246e;
  --cr-sel-soft: rgba(214, 36, 110, 0.12);
  --cr-v2: #15803d;
  --cr-v3: #c2410c;
  --cr-v4: #6d28d9;
  --cr-bar-bg: var(--vc-bg-solid, #fff);
  --cr-panel-bg: var(--vc-surface, #faf9f8);
  --cr-ink: var(--vc-ink, #18161d);
  --cr-muted: var(--vc-muted, #56535f);
  --cr-line: var(--vc-line, rgba(24, 22, 29, 0.1));
  --cr-hover: rgba(24, 22, 29, 0.06);
  --cr-raised: var(--cr-bar-bg);   /* menus, dialogs, panels: above the page */
  --cr-field: var(--cr-panel-bg);  /* text fields */
  --cr-desk: #ecebef;
  color-scheme: light;
  --cr-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cr-r-s: 8px; --cr-r-m: 12px; --cr-r-l: 16px;
  --cr-tap: 40px;
}
:root[data-theme="dark"] {
  --cr-time-line: rgba(138, 180, 255, 0.6);
  --cr-desk: #121019;
  --cr-hover: rgba(255, 255, 255, 0.08);
  --cr-time-text: #8ab4ff;
  --cr-time-soft: rgba(138, 180, 255, 0.16);
  --cr-raised: #211f2b;            /* lighter than the page: a layer that floats reads as raised, not sunken */
  --cr-field: #16141e;
  --cr-line: rgba(255, 255, 255, 0.12);
  color-scheme: dark;              /* checkboxes, sliders, spinners, scrollbars in the dark theme */
}

*, *::before, *::after { box-sizing: border-box; }
html, body.cr-body { margin: 0; height: 100%; }
body.cr-body {
  font-family: var(--cr-font);
  color: var(--cr-ink);
  background: var(--cr-panel-bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
.cr-app :focus-visible { outline: 2px solid var(--cr-time); outline-offset: 2px; }
.cr-app [hidden], .cr-dialog [hidden], .cr-tip[hidden], .cr-ctx[hidden] { display: none !important; } /* the hidden attribute wins over display rules */
.cr-ico { width: 20px; height: 20px; fill: currentColor; flex: none; }
.cr-ico--note { width: 24px; height: 24px; }
.cr-ico--chev { width: 14px; height: 14px; opacity: 0.6; margin-inline-start: -2px; }
kbd {
  font: 600 0.72em var(--cr-font); padding: 1px 6px; border-radius: 6px;
  border: 1px solid var(--cr-line); border-bottom-width: 2px; background: var(--cr-panel-bg); color: var(--cr-muted); white-space: nowrap;
}

/* ── App frame: fills the viewport under the site bar ──────────────── */
.cr-app {
  height: calc(100dvh - var(--vc-h, 64px));
  min-height: 520px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  grid-template-columns: minmax(0, 1fr);
  background: var(--cr-panel-bg);
}
.cr-bar, .cr-palette, .cr-status, .cr-strip { background: var(--cr-bar-bg); min-width: 0; }
.cr-bar, .cr-palette { border-bottom: 1px solid var(--cr-line); }

/* ── App bar (56px) ───────────────────────────────────────────────── */
.cr-bar {
  display: flex; align-items: center; gap: 8px; min-height: 56px;
  padding: 6px clamp(10px, 2vw, 18px);
}
.cr-bar__group { display: flex; align-items: center; gap: 4px; flex: none; }
.cr-bar__title { flex: 1 1 0; display: flex; justify-content: center; min-width: 0; }
.cr-bar__right { margin-inline-start: auto; }
.cr-titlebtn {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: var(--cr-ink); font: 700 1rem var(--cr-font); cursor: pointer; min-width: 0;
}
.cr-titlebtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-titlebtn .cr-ico { width: 15px; height: 15px; color: var(--cr-muted); }
.cr-titlebtn:hover { background: var(--cr-hover); border-color: var(--cr-line); }

.cr-tb {
  display: inline-flex; align-items: center; gap: 7px; min-height: var(--cr-tap); padding: 0 12px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--cr-ink); font: 500 0.88rem var(--cr-font); cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.cr-tb:hover:not(:disabled) { background: var(--cr-hover); }
.cr-tb:active:not(:disabled) { transform: scale(0.97); }
.cr-tb:disabled { opacity: 0.4; cursor: default; }
.cr-tb[aria-expanded="true"], .cr-pb[aria-expanded="true"] { background: var(--cr-hover); border-color: var(--cr-line); }
.cr-tb--icon { width: var(--cr-tap); padding: 0; justify-content: center; }
.cr-tb--zoomlbl { width: auto; min-width: 48px; padding: 0 4px; }
.cr-tb--play {
  width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, #ff6ec7, #8a2be2); box-shadow: 0 8px 20px -8px rgba(138, 43, 226, 0.7);
}
.cr-tb--play:hover:not(:disabled) { background: linear-gradient(135deg, #ff5fc0, #7a1fd6); }
.cr-tb--play .cr-ico { width: 24px; height: 24px; }
.cr-tb--play.is-loading { animation: cr-pulse 1s ease-in-out infinite; }
@keyframes cr-pulse { 50% { opacity: 0.55; } }
.cr-zoom { display: inline-flex; align-items: center; }
.cr-zoomlbl { font-size: 0.72rem; font-weight: 700; color: var(--cr-muted); font-variant-numeric: tabular-nums; }
.cr-tempo {
  display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--cr-line); background: transparent; color: var(--cr-ink); font: 500 0.86rem var(--cr-font); white-space: nowrap; cursor: pointer;
}
.cr-tempo:hover { background: var(--cr-hover); }
.cr-tempo b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-mini {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--cr-r-s); border: 1px solid var(--cr-line);
  background: transparent; color: var(--cr-ink); font: 700 0.85rem var(--cr-font); cursor: pointer;
}
.cr-mini:hover:not(:disabled) { background: var(--cr-hover); }
.cr-mini:disabled { opacity: 0.35; cursor: default; }
.cr-mini.is-on { background: var(--cr-sel); color: #fff; border-color: transparent; }
.cr-mini--danger:hover:not(:disabled) { color: #b91c1c; }

/* menus */
.cr-menu { position: relative; }
.cr-menu__list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 240px; max-width: min(340px, calc(100vw - 24px)); padding: 6px; display: none;
  background: var(--cr-raised); border: 1px solid var(--cr-line); border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.35);
  overflow: auto; overscroll-behavior: contain;
}
.cr-menu.is-open .cr-menu__list { display: grid; }
.cr-menu__list > button[role="menuitem"] {
  display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 12px; border: 0; border-radius: 9px; background: transparent;
  color: var(--cr-ink); font: 500 0.88rem var(--cr-font); cursor: pointer; white-space: nowrap;
}
.cr-menu__list > button[role="menuitem"] > kbd, .cr-ctx > button > kbd { margin-inline-start: auto; padding: 0 0 0 24px; border: 0; background: none; font: 500 0.74rem var(--cr-font); color: var(--cr-muted); }
.cr-ctx > button { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.cr-menu__list > button[role="menuitem"] small { grid-column: 1 / -1; color: var(--cr-muted); font-weight: 400; font-size: 0.76rem; }
.cr-menu__list > button[role="menuitem"] .cr-ico { width: 18px; height: 18px; }
.cr-menu__list > button[role="menuitem"]:hover { background: var(--cr-hover); }
.cr-menu__list > button[aria-pressed="true"] { background: var(--cr-time-soft); color: var(--cr-time); }
.cr-menu__label { padding: 8px 12px 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cr-muted); }
.cr-menu__note { padding: 8px 12px 6px; margin-top: 4px; border-top: 1px solid var(--cr-line); font-size: 0.76rem; color: var(--cr-muted); }
.cr-menu--pal .cr-menu__list { top: calc(100% + 8px); }
.cr-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px 8px; }
.cr-chip {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 4px 8px; border-radius: 10px;
  border: 1px solid var(--cr-line); background: transparent; color: var(--cr-ink); font: 700 1.05rem var(--cr-font); cursor: pointer; line-height: 1;
}
.cr-chip small { font-size: 0.66rem; font-weight: 500; color: var(--cr-muted); margin-top: 3px; }
.cr-chip:hover { background: var(--cr-hover); }
.cr-chips--dyn .cr-chip { min-width: 44px; font-style: italic; font-family: "Times New Roman", Georgia, serif; font-size: 1.15rem; }
.cr-chip--plain { font-style: normal !important; font-family: var(--cr-font) !important; font-size: 0.8rem !important; color: var(--cr-muted); }

/* ── Palette (48px) ───────────────────────────────────────────────── */
.cr-palette {
  display: flex; align-items: center; gap: 2px; padding: 4px clamp(10px, 2vw, 18px); min-height: 48px;
  overflow-x: auto; overflow-y: visible; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cr-palette::-webkit-scrollbar { display: none; }
.cr-pgroup { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.cr-sep { width: 1px; height: 26px; margin: 0 6px; background: var(--cr-line); flex: none; }
.cr-pb {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--cr-tap); height: var(--cr-tap); padding: 0 6px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--cr-ink); font: 600 0.92rem var(--cr-font); cursor: pointer; flex: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.cr-pb:hover { background: var(--cr-hover); }
.cr-pb[aria-pressed="true"] { background: var(--cr-time-soft); color: var(--cr-time-text); border-color: var(--cr-time-line); }
.cr-pb__key { position: absolute; right: 3px; bottom: 1px; font: 700 0.66rem var(--cr-font); font-style: normal; color: var(--cr-muted); }
.cr-pb[aria-pressed="true"] .cr-pb__key { color: var(--cr-time-text); }
.cr-pb__glyph { font-size: 1.2rem; line-height: 1; }
.cr-pb--input { padding-inline: 12px; gap: 8px; }
.cr-pb--input kbd { margin-inline-start: 2px; }
.cr-pb--input[aria-pressed="true"] { background: var(--cr-time); color: #fff; border-color: transparent; }
.cr-pb--input[aria-pressed="true"] kbd { background: rgba(255, 255, 255, 0.22); color: #fff; border-color: transparent; }
.cr-voices .cr-pb { min-width: 34px; }
.cr-pb--v2[aria-pressed="true"], .cr-pb--vcycle.cr-pb--v2 { color: var(--cr-v2); background: rgba(21, 128, 61, 0.12); border-color: rgba(21, 128, 61, 0.35); }
.cr-pb--v3[aria-pressed="true"], .cr-pb--vcycle.cr-pb--v3 { color: var(--cr-v3); background: rgba(194, 65, 12, 0.12); border-color: rgba(194, 65, 12, 0.35); }
.cr-pb--v4[aria-pressed="true"], .cr-pb--vcycle.cr-pb--v4 { color: var(--cr-v4); background: rgba(109, 40, 217, 0.12); border-color: rgba(109, 40, 217, 0.35); }
.cr-pb--vcycle { display: none; }
.cr-pb--vcycle.cr-pb--v1 { border-color: var(--cr-line); }
.cr-tuplets { gap: 0; }
.cr-pb--chev { min-width: 20px; width: 20px; padding: 0; margin-inline-start: -2px; border-radius: 8px; }
.cr-pb--chev .cr-ico { width: 14px; height: 14px; opacity: 0.7; }
.cr-chips--tuplet { display: grid; grid-template-columns: repeat(4, 1fr); }
.cr-chips--tuplet .cr-chip { min-width: 0; font-family: "Times New Roman", Georgia, serif; font-size: 1.15rem; }
.cr-menu__list--tuplets { min-width: 220px; }

/* ── Score area ───────────────────────────────────────────────────── */
.cr-body-row { display: grid; grid-template-columns: 0 minmax(0, 1fr) 0; grid-template-rows: minmax(0, 1fr); min-height: 0; }
/* fixed places: a hidden panel must not hand its column to the score */
.cr-body-row > .cr-pal { grid-column: 1; grid-row: 1; }
.cr-body-row > .cr-scroll { grid-column: 2; grid-row: 1; }
.cr-body-row > .cr-panel { grid-column: 3; grid-row: 1; }
body.cr-has-pal .cr-body-row { grid-template-columns: 276px minmax(0, 1fr) 0; }
body.cr-has-panel .cr-body-row { grid-template-columns: 0 minmax(0, 1fr) 300px; }
body.cr-has-pal.cr-has-panel .cr-body-row { grid-template-columns: 276px minmax(0, 1fr) 300px; }
.cr-scroll {
  overflow: auto; overscroll-behavior: contain; background: var(--cr-desk); outline: none; position: relative;
  padding: 16px clamp(8px, 2vw, 28px) 160px; -webkit-overflow-scrolling: touch;
}
.cr-scroll:focus-visible { outline: none; }
.cr-bar, .cr-palette, .cr-strip, .cr-paper { user-select: none; -webkit-user-select: none; } /* drags select notes, not text */
.cr-paper {
  position: relative; margin: 0 auto; width: 100%; max-width: calc(1040px * var(--cr-paper-scale, 1));
  background: #fff; color: #000; border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 20px 50px -24px rgba(0, 0, 0, 0.35);
}
.cr-host { position: relative; padding: 16px 12px 24px; min-height: 300px; touch-action: pan-x pan-y; }
.cr-host.is-rendering { opacity: 0.85; }
.cr-host svg { display: block; }
.cr-host img[id^="cursorImg"] { display: none !important; }
body.cr-input .cr-host { cursor: crosshair; }
body.cr-touch.cr-input .cr-host { touch-action: none; } /* taps write, drags pan or tune the pitch (app.js) */

/* the first-run hint is a slim bar under the score (above the tools on touch screens): it never covers
   a staff, and when it goes the paper does not move — the score's view just gets taller */
.cr-onboard {
  display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 8px 16px;
  background: var(--cr-raised); border-top: 1px solid var(--cr-line); font-size: 0.88rem; color: var(--cr-ink);
}
.cr-onboard[hidden] { display: none; }
.cr-onboard__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cr-time-soft); color: var(--cr-time); flex: none; }
.cr-onboard__icon .cr-ico { width: 16px; height: 16px; }
.cr-onboard__body { flex: 1 1 0; min-width: 0; line-height: 1.5; }
.cr-onboard kbd { font-size: 0.68rem; }

/* overlay */
.cr-overlay { position: absolute; left: 12px; top: 16px; pointer-events: none; z-index: 2; }
.cr-overlay > * { position: absolute; left: 0; top: 0; }
.cr-caret { border-radius: 5px; background: rgba(37, 99, 235, 0.07); border: 1.5px solid rgba(37, 99, 235, 0.45); transition: transform 0.08s ease; }
.cr-caret--input { background: rgba(37, 99, 235, 0.13); border-color: var(--cr-time); animation: cr-caret 1.3s ease-in-out infinite; }
@keyframes cr-caret { 50% { border-color: rgba(37, 99, 235, 0.35); } }
.cr-caret__tag {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; padding: 2px 8px; border-radius: 6px; white-space: nowrap;
  background: var(--cr-time); color: #fff; font: 700 0.72rem var(--cr-font); letter-spacing: 0.01em; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
body.cr-touch .cr-caret__tag { display: none; } /* on a touch screen the palette shows the value */
.cr-ghost { border-radius: 50%; background: rgba(37, 99, 235, 0.42); border: 1.5px solid var(--cr-time); }
.cr-ghost__tag { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 1px 6px; border-radius: 6px; background: var(--cr-time); color: #fff; font: 700 0.66rem var(--cr-font); white-space: nowrap; }
.cr-ghost--big { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.15); }
.cr-ghost--big .cr-ghost__tag { bottom: calc(100% + 14px); padding: 6px 12px; font-size: 1.1rem; border-radius: 10px; }
.cr-playhead { width: 2px; background: var(--cr-time); box-shadow: 0 0 10px 2px rgba(37, 99, 235, 0.4); border-radius: 2px; }
.cr-selbox { position: absolute; left: 0; top: 0; border-radius: 8px; background: var(--cr-sel-soft); border: 1px solid rgba(214, 36, 110, 0.35); }
.cr-rangebox { position: absolute; left: 0; top: 0; border-radius: 6px; background: rgba(214, 36, 110, 0.09); border: 1px solid rgba(214, 36, 110, 0.3); }
.cr-band { border: 1px dashed var(--cr-sel); background: rgba(214, 36, 110, 0.07); border-radius: 4px; }
/* in-place lyric typing under a note */
.cr-lyricbox {
  position: absolute; left: 0; top: 0; pointer-events: auto; width: 84px; padding: 3px 6px; text-align: center;
  font: 500 15px "Times New Roman", Georgia, serif; color: #000; background: #fff; border: 1.5px solid var(--cr-time); border-radius: 6px;
  box-shadow: 0 6px 18px -8px rgba(37, 99, 235, 0.6); outline: none;
}
/* the verse of the syllable being typed (1 2 3), beside the lyric box: a finger can change verse too */
.cr-verses { position: absolute; left: 0; top: 0; display: flex; gap: 2px; padding: 2px; pointer-events: auto; z-index: 3;
  background: var(--cr-raised, #fff); border: 1px solid var(--cr-line); border-radius: 8px; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.45); }
.cr-verses button { min-width: 26px; height: 26px; padding: 0 4px; border: 0; border-radius: 6px; background: transparent; color: var(--cr-muted);
  font: 700 0.8rem var(--cr-font); cursor: pointer; }
.cr-verses button.is-on { background: var(--cr-time); color: #fff; }
@media (pointer: coarse) { .cr-verses button { min-width: 36px; height: 36px; font-size: 0.95rem; } }
.cr-chordbox {
  position: absolute; left: 0; top: 0; pointer-events: auto; width: 72px; padding: 2px 6px; text-align: left;
  font: 400 15px "Times New Roman", Georgia, serif; color: #000; background: #fff; border: 1.5px solid var(--cr-time); border-radius: 6px;
  box-shadow: 0 6px 18px -8px rgba(37, 99, 235, 0.6); outline: none;
}
.cr-chips--bars .cr-chip { min-width: 58px; font-family: "Times New Roman", Georgia, serif; font-size: 1.1rem; }
.cr-choices { display: grid; gap: 6px; }
.cr-choice { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--cr-line); background: transparent; color: var(--cr-ink); font: 700 0.95rem var(--cr-font); cursor: pointer; }
.cr-choice small { font-weight: 400; color: var(--cr-muted); font-size: 0.78rem; }
.cr-choice:hover { background: var(--cr-hover); }
.cr-choice.is-current { border-color: var(--cr-time); background: var(--cr-time-soft); }
/* right-click / long-press menu */
.cr-ctx { position: fixed; z-index: 60; display: grid; }
.cr-ctx[hidden] { display: none; }
.cr-menu__sep { height: 1px; margin: 4px 8px; background: var(--cr-line); }
.cr-link { border: 0; background: none; padding: 0; color: var(--cr-time-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
/* the hot note (what ↑↓ will move) and selected notes in the engraving */
.cr-host svg .cr-hot path { fill: var(--cr-time); stroke: var(--cr-time); }
.cr-host svg .cr-hot path[fill="none"] { fill: none; }
.cr-host svg .cr-sel .vf-notehead path, .cr-host svg .cr-sel .vf-notehead { fill: var(--cr-sel) !important; }
.cr-host svg .cr-sel .vf-stem path, .cr-host svg .cr-sel .vf-flag path, .cr-host svg .cr-sel .vf-flag { stroke: var(--cr-sel) !important; fill: var(--cr-sel) !important; }
.cr-host svg .cr-sel > g > path, .cr-host svg .cr-sel > path { fill: var(--cr-sel) !important; }
/* voices 2-4 */
.cr-host svg .cr-v2 path { fill: var(--cr-v2); stroke: var(--cr-v2); }
.cr-host svg .cr-v3 path { fill: var(--cr-v3); stroke: var(--cr-v3); }
.cr-host svg .cr-v4 path { fill: var(--cr-v4); stroke: var(--cr-v4); }
.cr-host svg .cr-v2 path[fill="none"], .cr-host svg .cr-v3 path[fill="none"], .cr-host svg .cr-v4 path[fill="none"] { fill: none; }

/* ── Side panel ───────────────────────────────────────────────────── */
.cr-panel { border-inline-start: 1px solid var(--cr-line); background: var(--cr-raised); overflow: auto; display: none; min-width: 0; }
body.cr-has-panel .cr-panel { display: block; }
.cr-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--cr-line); }
.cr-panel__head h2 { margin: 0; font-size: 0.95rem; font-weight: 700; }
.cr-panel__actions { display: flex; gap: 2px; }
.cr-parts { display: grid; }
.cr-part { padding: 10px 14px; border-bottom: 1px solid var(--cr-line); }
.cr-part.is-current { background: var(--cr-time-soft); }
.cr-part__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cr-part__name { border: 0; background: transparent; padding: 0; font: 700 0.92rem var(--cr-font); color: var(--cr-ink); cursor: pointer; text-align: left; }
.cr-part__name:hover { color: var(--cr-time); }
.cr-part__inst { font-size: 0.74rem; color: var(--cr-muted); white-space: nowrap; }
.cr-part__row { display: grid; grid-template-columns: auto auto 1fr 1fr; gap: 6px; align-items: end; } /* (auto: the 44-px touch buttons overlapped in 32-px columns) */
.cr-part__row input[type="range"] { width: 100%; accent-color: var(--cr-sel); min-width: 0; height: 28px; margin: 0; }
.cr-part__ctl { display: grid; gap: 0; font-size: 0.68rem; color: var(--cr-muted); font-weight: 600; min-width: 0; }
.cr-part__ctl b { color: var(--cr-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-part__tools { display: flex; gap: 4px; justify-content: flex-end; margin-top: 6px; }
.cr-hint { margin: 10px 14px; font-size: 0.78rem; color: var(--cr-muted); }

/* ── Phone keys ───────────────────────────────────────────────────── */
.cr-strip { display: none; border-top: 1px solid var(--cr-line); padding: 6px 8px; gap: 4px; flex-direction: column; }
body.cr-touch .cr-strip { display: flex; }
.cr-strip__row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.cr-sk {
  height: 44px; border-radius: 10px; border: 1px solid var(--cr-line); background: var(--cr-panel-bg); color: var(--cr-ink);
  font: 700 1rem var(--cr-font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 1px; padding: 0; min-width: 0;
}
.cr-sk:active, .cr-sk[aria-pressed="true"] { background: var(--cr-time-soft); color: var(--cr-time); border-color: var(--cr-time-line); }
.cr-sk--txt { font-size: 0.85rem; }
.cr-sk--txt small { font-size: 0.6rem; font-weight: 600; }
.cr-sk .cr-ico { width: 22px; height: 22px; }

/* ── Status ───────────────────────────────────────────────────────── */
.cr-status {
  display: flex; align-items: center; gap: 12px; padding: 0 clamp(10px, 2vw, 18px); border-top: 1px solid var(--cr-line);
  font-size: 0.8rem; color: var(--cr-muted); min-height: 34px; min-width: 0; overflow: hidden;
}
.cr-status__mode { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--cr-time); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
body.cr-insert .cr-status__mode { background: var(--cr-v3); }
.cr-status__pos { font-weight: 600; color: var(--cr-ink); white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cr-status__what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; color: var(--cr-ink); }
.cr-status__what:not(:empty)::before { content: "·"; margin-inline-end: 8px; color: var(--cr-muted); }
.cr-status__hint { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; }
.cr-status__hint.is-error { color: #b91c1c; font-weight: 600; }
.cr-status__zoom { display: none; gap: 4px; flex: none; }
.cr-status__saved { flex: none; white-space: nowrap; font-size: 0.74rem; }
.cr-status__win { flex: none; white-space: nowrap; font: inherit; font-size: 0.74rem; padding: 1px 8px; border: 0; border-radius: 999px; background: var(--cr-hover); color: inherit; cursor: pointer; }
.cr-status__win:hover { background: var(--cr-line); }
.cr-status__saved.is-saved::before { content: "✓ "; color: var(--cr-v2); }
/* a hint or an error where the status line is hidden (phones): a toast above the keys */
.cr-toast {
  /* width: max-content — centred from left: 50%, a shrink-to-fit box only had half the screen and a hint
     wrapped to five lines over the music */
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); transform: translateX(-50%); z-index: 70; width: max-content; max-width: min(92vw, 420px);
  padding: 10px 14px; border-radius: 12px; background: #1b1a22; color: #fff; border: 1px solid rgba(255, 255, 255, 0.14); font: 600 0.82rem var(--cr-font); line-height: 1.4; text-align: center;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5); pointer-events: none;
}
.cr-toast.is-error { background: #b91c1c; color: #fff; }
.cr-toast[hidden] { display: none; }
.cr-skip { position: absolute; left: 8px; top: -60px; z-index: 200; padding: 8px 12px; border-radius: 8px; background: var(--cr-time); color: #fff; font: 700 0.85rem var(--cr-font); }
.cr-skip:focus { top: 8px; }
.cr-only-phone { display: none; }
.cr-menu__link { display: block; padding: 9px 12px; color: var(--cr-time-text); font: 600 0.86rem var(--cr-font); text-decoration: none; border-radius: 9px; }
.cr-menu__link.cr-only-phone { display: none; }
.cr-menu__link:hover { background: var(--cr-hover); }
.cr-chips--compact .cr-chip { min-width: 40px; min-height: 40px; font-size: 0.95rem; }
.cr-tempo-in { display: inline-flex; align-items: center; gap: 6px; }
.cr-tempo-in select { flex: 1 1 auto; }
.cr-tempo-in input { width: 84px; }
.cr-sk--chord small { font-size: 0.62rem; font-weight: 700; margin-inline-start: 1px; }
.cr-app { touch-action: pan-x pan-y; }
.cr-panel { touch-action: pan-y; }

/* ── Tooltip ──────────────────────────────────────────────────────── */
.cr-tip {
  position: fixed; z-index: 100; pointer-events: none; padding: 5px 9px; border-radius: 8px; max-width: 280px;
  background: var(--cr-ink); color: var(--cr-bar-bg); font: 600 0.74rem var(--cr-font); line-height: 1.35; opacity: 0; transition: opacity 0.12s ease;
}
.cr-tip.is-on { opacity: 1; }

/* ── Dialogs ──────────────────────────────────────────────────────── */
.cr-dialog { border: 1px solid var(--cr-line); border-radius: 18px; padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); background: var(--cr-raised); color: var(--cr-ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5); }
.cr-dialog--wide { width: min(760px, calc(100vw - 32px)); }
.cr-dialog::backdrop { background: rgba(10, 8, 16, 0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cr-dialog__form { padding: 22px 24px; display: grid; gap: 14px; font-family: var(--cr-font); max-height: calc(100dvh - 32px); overflow: auto; }
.cr-dialog h2 { margin: 0 0 4px; font-size: 1.2rem; font-weight: 800; }
.cr-dialog h3 { margin: 0 0 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cr-muted); }
.cr-dialog label, .cr-field { display: grid; gap: 5px; font-size: 0.82rem; font-weight: 600; color: var(--cr-muted); }
.cr-field__label small { font-weight: 400; }
.cr-field--short { max-width: 200px; }
.cr-dialog input:not([type="radio"]):not([type="checkbox"]), .cr-dialog select { font: 500 0.95rem var(--cr-font); color: var(--cr-ink); padding: 9px 11px; border-radius: 10px; border: 1px solid var(--cr-line); background: var(--cr-field); min-width: 0; }
.cr-dialog input[type="checkbox"] { accent-color: var(--cr-time); width: 18px; height: 18px; margin: 0; }
.cr-dialog input:focus, .cr-dialog select:focus { outline: 2px solid var(--cr-time-line); border-color: var(--cr-time); }
.cr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cr-grid3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
/* the New score list: one instrument per row, in the order of the staves */
.cr-instlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cr-instlist li { display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 12px; border-radius: 10px; background: var(--cr-time-soft); color: var(--cr-ink); font-weight: 600; font-size: 0.85rem; }
.cr-instlist__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-instlist__tools { display: inline-flex; gap: 2px; flex: none; }
.cr-instlist button { border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; font-size: 0.8rem; line-height: 1; min-width: 28px; min-height: 28px; padding: 0 4px; }
.cr-instlist button:hover:not(:disabled) { background: var(--cr-hover); }
.cr-instlist button:disabled { opacity: 0.3; cursor: default; }
.cr-instlist button[data-remove] { font-size: 1.05rem; }
.cr-details summary { cursor: pointer; font-weight: 600; color: var(--cr-time); font-size: 0.85rem; padding: 4px 0; }
.cr-details[open] summary { margin-bottom: 8px; }
.cr-picker { display: grid; gap: 8px; }
.cr-picker__list { max-height: 240px; overflow: auto; border: 1px solid var(--cr-line); border-radius: 10px; padding: 4px; background: var(--cr-panel-bg); }
.cr-picker__family { padding: 8px 10px 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cr-muted); }
.cr-picker__none { margin: 0; padding: 10px; font-size: 0.85rem; line-height: 1.4; color: var(--cr-muted); }
.cr-picker__item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--cr-ink); font: 500 0.9rem var(--cr-font); cursor: pointer; }
.cr-picker__item:hover { background: var(--cr-hover); }
.cr-picker__item[aria-selected="true"] { background: var(--cr-time); color: #fff; }
.cr-radios { display: grid; gap: 6px; }
.cr-radio { display: flex !important; align-items: center; gap: 8px; font-weight: 500 !important; color: var(--cr-ink) !important; }
.cr-radio input { accent-color: var(--cr-time); width: 18px; height: 18px; margin: 0; }
.cr-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.cr-btn { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--cr-line); background: transparent; color: var(--cr-ink); font: 600 0.9rem var(--cr-font); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cr-btn:hover { background: var(--cr-hover); }
.cr-btn--primary { color: #fff; border-color: transparent; background: linear-gradient(120deg, #e8590c, #d6246e 55%, #8a2be2); }
.cr-btn--primary kbd { background: rgba(255, 255, 255, 0.2); color: #fff; border-color: transparent; }
.cr-btn--small { min-height: 34px; padding: 0 12px; font-size: 0.82rem; }
.cr-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--cr-line); }
.cr-tabs [role="tab"] { border: 0; background: none; padding: 8px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--cr-muted); font: 700 0.92rem var(--cr-font); cursor: pointer; }
.cr-tabs [role="tab"][aria-selected="true"] { color: var(--cr-time-text); border-bottom-color: var(--cr-time); }
.cr-details summary { color: var(--cr-time-text); }
.cr-picker__item { min-height: 36px; }
.cr-howto { display: grid; gap: 14px; max-height: 60vh; overflow: auto; padding-inline-end: 6px; }
.cr-howto__item h3 { margin: 0 0 4px; font-size: 0.95rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--cr-ink); }
.cr-howto__item p { margin: 0; font-size: 0.88rem; line-height: 1.65; color: var(--cr-muted); }
.cr-howto__item b { color: var(--cr-ink); }
.cr-howto kbd { font-size: 0.72rem; }
.cr-keys__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; max-height: 60vh; overflow: auto; padding-inline-end: 6px; }
.cr-keys { display: grid; grid-template-columns: fit-content(42%) 1fr; gap: 6px 12px; margin: 0; }
.cr-keys dt { margin: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; }
.cr-keys dt kbd { white-space: nowrap; }
.cr-keys dd { margin: 0; font-size: 0.84rem; color: var(--cr-muted); }
.cr-keys kbd { font-size: 0.74rem; }
.cr-dialog p { margin: 0; }
.cr-dialog .cr-hint { margin: 0; }

/* ── About strip under the app ────────────────────────────────────── */
.cr-about { background: var(--vc-bg-solid, #fff); border-top: 1px solid var(--cr-line); }
.cr-about__inner { max-width: 820px; margin: 0 auto; padding: 44px clamp(16px, 4vw, 40px); }
.cr-about h2 { margin: 0 0 12px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.cr-about p { margin: 0 0 12px; color: var(--cr-muted); line-height: 1.7; }
.cr-about a { color: var(--cr-sel); font-weight: 600; }
.cr-about__h { margin: 28px 0 10px; font-size: 1.15rem; font-weight: 800; }
.cr-about__faq { display: grid; gap: 8px; margin-bottom: 18px; }
.cr-about__faq details { border: 1px solid var(--cr-line); border-radius: 12px; padding: 0 14px; }
.cr-about__faq summary { cursor: pointer; padding: 11px 0; font-weight: 700; }
.cr-about__faq details p { margin: 0 0 12px; }
.cr-about__more { font-size: 0.95rem; }
/* the page heading, for screen readers and search engines; the app bar shows the score title */
.cr-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .cr-tb span:not(.cr-zoomlbl) { display: none; }
  .cr-pb--pal span, .cr-pb--menu span, .cr-pb--input kbd { display: none; }
  .cr-tb { padding: 0 9px; }
  .cr-pb--input span { display: none; }
}
@media (max-width: 1360px) and (min-width: 641px) {
  /* a laptop or a tablet on its side: tighter tools that fit one row, and a second row rather than clipping if they still do not */
  .cr-palette { flex-wrap: wrap; overflow: visible; row-gap: 4px; gap: 1px; padding-inline: 8px; }
  .cr-pb { min-width: 36px; padding: 0 3px; }
  .cr-pb--input { padding-inline: 8px; }
  .cr-sep { margin: 0 3px; }
  .cr-voices .cr-pb { min-width: 30px; }
}
@media (max-width: 999px) {
  /* the palettes become a sheet over the lower half of the screen; the score stays above it */
  body.cr-has-pal .cr-body-row, body.cr-has-pal.cr-has-panel .cr-body-row { grid-template-columns: 0 minmax(0, 1fr) 0; }
  body.cr-has-pal .cr-pal { position: fixed; inset: auto 0 0 0; height: min(50dvh, 430px); z-index: 45; border: 0; border-top: 1px solid var(--cr-line); border-radius: 16px 16px 0 0; box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, 0.55); }
  .cr-pal__head::before { content: ""; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--cr-line); }
  .cr-pal__head { position: relative; padding-top: 12px; }
  .cr-pal__tip { display: none; }
}
@media (max-width: 1000px) {
  body.cr-has-panel .cr-body-row { grid-template-columns: 0 minmax(0, 1fr) 0; }
  body.cr-has-panel .cr-panel { position: fixed; inset: auto 0 0 0; max-height: 55dvh; z-index: 20; box-shadow: 0 -16px 40px -20px rgba(0, 0, 0, 0.5); border-top: 1px solid var(--cr-line); border-radius: 16px 16px 0 0; }
}
@media (max-width: 900px) {
  .cr-zoom { display: none; }
  .cr-status__zoom { display: inline-flex; }
}
@media (pointer: coarse) {
  :root { --cr-tap: 44px; }
  .cr-status__zoom { display: inline-flex; }
  .cr-mini { width: 40px; height: 40px; }
  .cr-picker__item { min-height: 44px; }
}
@media (pointer: coarse) {
  /* the editor takes the whole touch screen; the site comes back through the File menu */
  .vc-bar, .vc-spacer, .vc-footer { display: none !important; }
  .cr-app { height: 100dvh; }
  html, body.cr-body { overflow: hidden; overscroll-behavior: none; }
  .cr-strip, .cr-status { touch-action: manipulation; }
  .cr-palette { touch-action: pan-x; overscroll-behavior: contain; }
}
/* the palette sheet: its top edge is a handle — a swipe there is the sheet's, not a scroll */
@media (max-width: 999px) { .cr-pal, .cr-pal__head { touch-action: none; } .cr-pal__list { touch-action: pan-y; } }
@media (max-width: 640px) {
  :root { --cr-tap: 44px; }
  .cr-app { min-height: 0; }
  .cr-bar { gap: 1px; padding: 3px 4px; min-height: 50px; }
  .cr-bar__title { display: none; }
  .cr-tb { padding: 0 4px; }
  .cr-tb--play { width: 44px; height: 44px; }
  #crStop, .cr-bar .cr-ico--chev, .cr-palette .cr-ico--chev { display: none; }
  .cr-tempo { margin-inline-start: 1px; padding: 0 7px; font-size: 0.78rem; min-height: 40px; }
  .cr-only-phone, .cr-menu__link.cr-only-phone { display: block; }
  .cr-transport { margin-inline-start: auto; }
  .cr-bar__right { margin-inline-start: auto; }
  /* two rows of tools */
  .cr-palette { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; padding: 4px 6px; overflow: visible; }
  .cr-pgroup { display: contents; }
  .cr-sep, .cr-palette .cr-voices { display: none; }
  .cr-pb { min-width: 0; width: 100%; padding: 0; }
  .cr-pb--input { padding: 0; gap: 0; }
  .cr-pb--input kbd { display: none; }
  .cr-pb--vcycle { display: inline-flex; }
  .cr-menu--pal { min-width: 0; }
  .cr-menu--pal > .cr-pb { width: 100%; }
  .cr-tuplets { display: contents; }
  .cr-tuplets .cr-menu--pal { display: none; } /* Ctrl+n and the "3" button on phones; the chooser needs room */
  .cr-menu--pal .cr-menu__list { left: auto; right: 0; }
  .cr-status { gap: 8px; padding: 0 8px; }
  .cr-status__hint, .cr-status__saved { display: none; }
  .cr-scroll { padding: 8px 6px 120px; }
  .cr-host { padding: 10px 4px 20px; }
  .cr-onboard { padding: 6px 12px; gap: 10px; font-size: 0.8rem; order: 2; }
  .cr-onboard__icon { display: none; }
  .cr-about { display: none; }
  .cr-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 146px); }
  .cr-grid2, .cr-grid3 { grid-template-columns: 1fr; }
  .cr-dialog__actions .cr-btn { flex: 1 1 auto; justify-content: center; }
  .cr-keys__wrap { grid-template-columns: 1fr; }
}
@media (max-height: 520px) {
  /* a phone on its side: every pixel goes to the staff */
  .cr-app { min-height: 0; }
  .cr-bar { min-height: 44px; padding-block: 2px; }
  .cr-palette { min-height: 40px; padding-block: 2px; }
  .cr-onboard { display: none; }
  .cr-scroll { padding: 6px 8px 80px; }
  .cr-host { padding: 6px 8px 12px; }
  .cr-status { min-height: 28px; }

  .cr-toast { bottom: 40px; }
}
.cr-print { display: none; }
@media print {
  @page { size: portrait; margin: 12mm; }
  .vc-bar, .vc-spacer, .vc-footer, .cr-bar, .cr-palette, .cr-pal, .cr-status, .cr-strip, .cr-panel, .cr-about, .cr-overlay, .cr-onboard, .cr-tip { display: none !important; }
  /* the pages made for printing: one drawing per page, cut between systems */
  body.cr-printing > *:not(.cr-print) { display: none !important; }
  body.cr-printing .cr-print { display: block; }
  .cr-print-page { break-after: page; page-break-after: always; break-inside: avoid; }
  /* never taller than the sheet (portrait A4 or Letter inside the margins, or a landscape page) */
  .cr-print-page svg { max-height: 262mm; max-height: calc(100vh - 9mm); } /* (the sheet's own height: A4 or Letter, less the footer) */
  .cr-print-page:last-child { break-after: auto; page-break-after: auto; }
  /* the footer: the copyright on the first page, the page number on every page of a longer piece */
  .cr-print-foot { display: flex; justify-content: space-between; gap: 8mm; margin-top: 2mm; font: 8.5pt Georgia, "Times New Roman", serif; color: #333; }
  .cr-print-foot__rights { flex: 1; text-align: center; }
  .cr-print-foot__page { flex: none; }
  /* dark mode: the paper stays white (with "Background graphics" on, a dark page printed a black frame) */
  html, body, body.cr-printing, .cr-print, .cr-print-page { background: #fff !important; color: #000 !important; }
  :root, :root[data-theme="dark"] { color-scheme: light !important; }
  .cr-print-note { margin: 0 0 3mm; font: italic 9pt Georgia, "Times New Roman", serif; color: #555; text-align: center; }
  /* a score drawn wider than the paper shrinks to fit it */
  .cr-host svg { max-width: 100% !important; height: auto !important; }
  .cr-app { height: auto; display: block; }
  .cr-body-row { display: block; }
  .cr-scroll { overflow: visible; padding: 0; background: #fff; }
  .cr-paper { box-shadow: none; border-radius: 0; width: 100%; max-width: none; }
  body.cr-body { background: #fff; }
  /* a touch screen locks the page to the screen (the editor fills it): paper has every sheet */
  html, body.cr-body { overflow: visible !important; height: auto !important; overscroll-behavior: auto; }
}

/* ── Palettes (the symbol panel) ──────────────────────────────────── */
@font-face { font-family: "Vivace Glyphs"; src: url(fonts/vivace-glyphs.woff2?v=2eebbf5d74) format("woff2"); font-display: block; }
.cr-glyph { display: block; overflow: visible; pointer-events: none; }
.cr-glyph text { fill: currentColor; }
.cr-pal { display: none; min-width: 0; min-height: 0; flex-direction: column; background: var(--cr-raised); border-inline-end: 1px solid var(--cr-line); }
body.cr-has-pal .cr-pal { display: flex; }
.cr-pal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 2px 14px; }
.cr-pal__title { margin: 0; font-size: 0.95rem; font-weight: 700; }
.cr-pal__search { display: flex; align-items: center; gap: 6px; margin: 4px 10px 4px; padding: 0 10px; border: 1px solid var(--cr-line); border-radius: 10px; background: var(--cr-field); color: var(--cr-muted); }
.cr-pal__search:focus-within { border-color: var(--cr-time); box-shadow: 0 0 0 3px var(--cr-time-soft); }
.cr-pal__search .cr-ico { width: 16px; height: 16px; }
.cr-pal__search input { flex: 1 1 auto; min-width: 0; padding: 8px 0; border: 0; outline: none; background: transparent; color: var(--cr-ink); font: 500 0.86rem var(--cr-font); }
.cr-pal__tip { margin: 2px 14px 8px; font-size: 0.74rem; line-height: 1.45; color: var(--cr-muted); }
.cr-pal__list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 6px 18px; overscroll-behavior: contain; }
.cr-pal__sec { border-top: 1px solid var(--cr-line); }
.cr-pal__h { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 8px; border: 0; border-radius: 8px; background: none; color: var(--cr-ink); font: 600 0.84rem var(--cr-font); cursor: pointer; }
.cr-pal__h:hover { background: var(--cr-hover); }
.cr-pal__h .cr-ico--chev { opacity: 0.6; transform: rotate(-90deg); transition: transform 0.15s ease; }
.cr-pal__sec.is-open .cr-pal__h .cr-ico--chev { transform: none; }
.cr-pal__grid { display: none; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 3px; padding: 0 2px 10px; }
.cr-pal__sec.is-open .cr-pal__grid, .cr-pal.is-searching .cr-pal__grid { display: grid; }
.cr-pal.is-searching .cr-pal__h .cr-ico--chev { visibility: hidden; }
.cr-pal__cell { position: relative; overflow: hidden; display: grid; place-items: center; height: 46px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--cr-ink); cursor: pointer; transition: background 0.12s ease; }
.cr-pal__cell:hover { background: var(--cr-hover); border-color: var(--cr-line); }
.cr-pal__cell:active { transform: scale(0.96); }
.cr-pal__cell[aria-pressed="true"] { background: var(--cr-time-soft); border-color: var(--cr-time-line); color: var(--cr-time-text); }
.cr-pal__cell.has-caption { height: 54px; grid-template-rows: 1fr auto; padding-bottom: 3px; }
.cr-pal__cap { font: 600 0.62rem var(--cr-font); color: var(--cr-muted); line-height: 1; }
.cr-pal__cell[aria-pressed="true"] .cr-pal__cap { color: var(--cr-time-text); }
.cr-pal__empty { margin: 16px 14px; font-size: 0.84rem; color: var(--cr-muted); }
.cr-pal__ghost { position: fixed; left: 0; top: 0; z-index: 200; display: grid; place-items: center; padding: 4px 6px; border-radius: 10px; border: 1px solid var(--cr-time-line); background: var(--cr-raised); color: var(--cr-ink); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45); pointer-events: none; }
body.cr-dragging, body.cr-dragging * { cursor: grabbing !important; }
.cr-drop { border-radius: 8px; border: 2px solid var(--cr-time); background: var(--cr-time-soft); }
.cr-pb--pal, .cr-pb--menu { padding-inline: 10px; gap: 6px; }
.cr-pb--pal span, .cr-pb--menu span { font-size: 0.84rem; }
.cr-pb--menu .cr-ico--chev { width: 14px; height: 14px; margin-inline-start: -2px; }
.cr-pb--pal[aria-pressed="true"] { background: var(--cr-time-soft); color: var(--cr-time-text); border-color: var(--cr-time-line); }
.cr-pb--insert[aria-pressed="true"] { background: rgba(194, 65, 12, 0.12); color: var(--cr-v3); border-color: rgba(194, 65, 12, 0.35); }
.cr-tb--toggle[aria-pressed="true"] { background: var(--cr-time-soft); color: var(--cr-time-text); }

/* dialogs: time signature fields, tempo row */
.cr-timeedit { display: flex; align-items: center; gap: 10px; font: 700 1.3rem "Times New Roman", Georgia, serif; }
.cr-timeedit input { width: 90px; font-size: 1.1rem !important; text-align: center; }
.cr-timeedit select { width: 90px; font-size: 1.05rem !important; }
.cr-chips--times { padding: 0; }
.cr-chips--times .cr-chip { min-width: 50px; min-height: 36px; font: 700 0.95rem "Times New Roman", Georgia, serif; }
.cr-tempo-in small { color: var(--cr-muted); font-weight: 500; }
.cr-radio { align-items: flex-start !important; }
.cr-radio input { margin-top: 2px !important; }
.cr-details summary { list-style: none; }
.cr-details summary::-webkit-details-marker { display: none; }
.cr-details summary::before { content: "▸"; display: inline-block; width: 1em; transition: transform 0.15s ease; }
.cr-details[open] summary::before { transform: rotate(90deg); }
.cr-picker__list { max-height: 300px; }

/* ── Touch screens: no keyboard hints, labelled keys ───────────────── */
@media (hover: none) and (pointer: coarse) {
  .cr-pb__key, .cr-pb--input kbd, .cr-menu__list kbd, .cr-onboard kbd { display: none; }
}
.cr-sk--ico { flex-direction: column; gap: 0; line-height: 1; }
.cr-sk small { display: block; font-size: 0.66rem; font-weight: 600; opacity: 0.85; margin-top: 2px; white-space: nowrap; letter-spacing: -0.01em; }
.cr-sk--txt { flex-direction: column; gap: 0; line-height: 1; }
.cr-sk { background: var(--cr-raised); }
.cr-status__zoom .cr-mini .cr-ico { width: 18px; height: 18px; }
.cr-bar { padding-top: max(6px, env(safe-area-inset-top)); }

/* ── Phones: every input control at the bottom, the score above ────── */
@media (max-width: 640px) {
  .cr-app { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; }
  .cr-bar { order: 1; }
  .cr-body-row { order: 2; }
  .cr-palette { order: 3; border-bottom: 0; border-top: 1px solid var(--cr-line); }
  .cr-strip { order: 4; }
  .cr-status { order: 5; }
  .cr-palette [data-dur="32nd"], .cr-palette [data-dur="64th"], .cr-palette #crInsert { display: none; }
  .cr-pb--pal, .cr-pb--menu { flex-direction: column; gap: 0; padding: 0; }
  .cr-pb--pal span, .cr-pb--menu span { font-size: 0.55rem; line-height: 1; }
  .cr-pb--menu .cr-ico--chev { display: none; }
  .cr-status__what, .cr-status__win { display: none; }
  .cr-status__pos { flex: 1 1 auto; }
}

/* ── A phone on its side: one row of tools, one row of keys ─────────── */
@media (max-height: 520px) and (pointer: coarse) {
  .cr-palette { flex-wrap: nowrap !important; overflow-x: auto !important; }
  body.cr-touch .cr-strip { display: flex; flex-direction: row; gap: 3px; padding: 3px 6px; }
  .cr-strip__row { display: contents; }
  .cr-sk { flex: 1 1 0; height: 38px; }
  .cr-sk small { display: none; }
  .cr-status { display: none; }
}

/* ── Phones: the top bar fits; Help and the metronome are in menus ─── */
@media (max-width: 640px) {
  .cr-bar { overflow: hidden; }
  #crHelp, #crClick { display: none; }
  .cr-tempo { gap: 2px; }
}
.cr-app { max-width: 100vw; overflow-x: clip; }

/* ── Round 2 of the visual review ──────────────────────────────────── */
/* the palette: a clear top edge, a hint of fixed height, a flash where a click on the score led */
.cr-pal__search input:focus-visible { outline: none; }
.cr-pal__tip { min-height: calc(3 * 1.45em); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--cr-line); }
.cr-pal__list { border-top: 0; }
.cr-pal__sec.is-flash > .cr-pal__h { animation: cr-flash 1.2s ease-out; }
@keyframes cr-flash { 0%, 30% { background: var(--cr-time-soft); color: var(--cr-time-text); } 100% { background: transparent; } }
.cr-pal__cap { font-size: 0.64rem; white-space: nowrap; }
.cr-pal__cell.has-caption { height: 56px; }
@media (pointer: coarse) { .cr-pal__h { min-height: 44px; } .cr-menu__list > button[role="menuitem"], .cr-ctx > button { min-height: 44px; } }
@media (max-width: 999px) {
  .cr-pal__tip { display: -webkit-box; -webkit-line-clamp: 2; min-height: calc(2 * 1.45em); margin: 0 14px 4px; padding-bottom: 4px; font-size: 0.72rem; }
  body.cr-has-pal .cr-pal.is-full { height: 88dvh; }
  .cr-pal__head { cursor: grab; }
}
/* voices: each button carries its colour */
.cr-voices .cr-pb { box-shadow: inset 0 -3px 0 0 transparent; }
.cr-voices .cr-pb--v1 { box-shadow: inset 0 -3px 0 0 rgba(24, 22, 29, 0.35); }
.cr-voices .cr-pb--v2 { box-shadow: inset 0 -3px 0 0 var(--cr-v2); }
.cr-voices .cr-pb--v3 { box-shadow: inset 0 -3px 0 0 var(--cr-v3); }
.cr-voices .cr-pb--v4 { box-shadow: inset 0 -3px 0 0 var(--cr-v4); }
/* help: ranges do not break; the list fades out above the footer */
.cr-nowrap { white-space: nowrap; }
.cr-howto { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); padding-bottom: 20px; }
/* dialogs never get wider than themselves (a long select no longer pushes the form sideways) */
.cr-dialog__form { grid-template-columns: minmax(0, 1fr); }
.cr-dialog select, .cr-dialog input:not([type="radio"]):not([type="checkbox"]) { width: 100%; }
.cr-timeedit input, .cr-timeedit select { width: 90px !important; }
.cr-tempo-in input { width: 84px !important; }
.cr-tempo-in select { width: auto !important; flex: 1 1 auto; }
.cr-instlist button { min-width: 32px; min-height: 32px; font-size: 1.1rem; }
.cr-btn--primary { background-origin: border-box; }
/* iOS zooms the page into any field under 16 px: not here */
@media (pointer: coarse) {
  .cr-pal__search input, .cr-dialog input:not([type="radio"]):not([type="checkbox"]), .cr-dialog select, .cr-lyricbox, .cr-chordbox { font-size: 16px !important; }
}

/* ── Touch screens (phones and tablets): the tools sit right above the keys ─── */
body.cr-touch .cr-app { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; }
body.cr-touch .cr-bar { order: 1; }
body.cr-touch .cr-body-row { order: 2; }
body.cr-touch .cr-onboard { order: 2; } /* right under the score, above the tools */
body.cr-touch .cr-palette { order: 3; border-bottom: 0; border-top: 1px solid var(--cr-line); }
body.cr-touch .cr-strip { order: 4; }
body.cr-touch .cr-status { order: 5; }
body.cr-touch .cr-palette .cr-pb { min-width: 44px; }
body.cr-touch .cr-palette .cr-sep { display: none; }
body.cr-touch .cr-pgroup.cr-voices .cr-pb { min-width: 44px; }
/* phones: no tool twice (rest and erase are keys), captions under the cryptic ones, 8 roomy columns */
@media (max-width: 640px) {
  .cr-palette { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .cr-palette #crRest, .cr-palette #crDelete { display: none !important; }
  .cr-palette .cr-pb[data-cap] { flex-direction: column; gap: 0; }
  .cr-palette .cr-pb[data-cap]::after { content: attr(data-cap); font: 600 0.68rem var(--cr-font); color: var(--cr-muted); line-height: 1; margin-top: 2px; }
  .cr-palette .cr-pb--vcycle[data-cap]::after { color: inherit; }
  .cr-pb--pal span, .cr-pb--menu span { font-size: 0.68rem !important; display: inline !important; }
}
/* a phone on its side: one row that fits (no duplicates of the keys, one voice button, icons only) */
@media (max-height: 520px) and (pointer: coarse) {
  .cr-palette [data-dur="32nd"], .cr-palette [data-dur="64th"], .cr-palette #crInsert, .cr-palette #crRest, .cr-palette #crDelete, .cr-palette .cr-voices { display: none !important; }
  .cr-palette .cr-pb--vcycle { display: inline-flex !important; }
  .cr-pb--pal span, .cr-pb--menu span, .cr-pb--menu .cr-ico--chev { display: none !important; }
  .cr-tb--play { width: 40px; height: 40px; }
  .cr-bar { min-height: 42px; }
}

/* ── Narrow screens: the palette sheet leads with the note symbols, and its head is one row ── */
@media (max-width: 999px) {
  .cr-pal__list { display: flex; flex-direction: column; }
  .cr-pal__sec[data-sec="articulations"] { order: -10; } .cr-pal__sec[data-sec="dynamics"] { order: -9; } .cr-pal__sec[data-sec="ornaments"] { order: -8; }
  .cr-pal__sec[data-sec="accidentals"] { order: -7; } .cr-pal__sec[data-sec="lines"] { order: -6; } .cr-pal__sec[data-sec="text"] { order: -5; }
  .cr-pal__sec[data-sec="graces"] { order: -4; } .cr-pal__sec[data-sec="tuplets"] { order: -3; } .cr-pal__sec[data-sec="breaths"] { order: -2; }
  body.cr-has-pal .cr-pal { padding-top: 12px; }
  body.cr-has-pal .cr-pal::before { content: ""; position: absolute; left: 50%; top: 5px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--cr-line); }
  .cr-pal__head::before { content: none; }
  .cr-pal__head { position: absolute; right: 6px; top: 12px; padding: 0; z-index: 1; }
  .cr-pal__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cr-pal__search { margin: 4px 58px 6px 10px; }
}
/* a phone on its side: the two octave keys keep their arrows */
@media (max-height: 520px) and (pointer: coarse) {
  .cr-sk--txt small { display: block !important; font-size: 0.5rem; }
}

/* the palette search: the symbol Enter will apply is outlined */
.cr-pal.is-searching .cr-pal__cell.is-best { outline: 2px solid var(--cr-time); outline-offset: -2px; }
.cr-pal__results { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 3px; padding: 4px 2px 10px; }
.cr-pal__results[hidden] { display: none; }

/* one note of a chord selected: only its head is tinted */
.cr-host svg .vf-notehead.cr-sel path, .cr-host svg .vf-notehead.cr-sel { fill: var(--cr-sel) !important; }

/* ── touch targets: 44 px at least (File, Instruments, Help, dialog buttons, chips) ── */
@media (pointer: coarse) {
  .cr-bar .cr-tb, .cr-bar .cr-menu > button { min-height: 44px; min-width: 44px; }
  .cr-instlist button, .cr-dialog .cr-btn { min-height: 44px; min-width: 44px; }
  .cr-chip { min-height: 44px; }
}
/* a phone shows which bars are drawn (a long score is drawn a window at a time) */
@media (max-width: 640px) { .cr-status__win:not([hidden]) { display: inline; font-size: 0.68rem; padding: 1px 6px; } }
/* the title and the tempo on the page open their settings */
.cr-host svg text[data-cr]:hover { fill: var(--cr-time); }

/* phones: the zoom level between − and + (a tap fits the page again) */
.cr-mini--lbl { width: auto !important; min-width: 44px; padding: 0 4px; font: 600 0.72rem var(--cr-font); color: var(--cr-muted); }

/* touch screens (tablets too): a caption under the tools whose icon alone is not obvious */
body.cr-touch .cr-palette .cr-pb[data-cap] { flex-direction: column; gap: 0; }
body.cr-touch .cr-palette .cr-pb[data-cap]::after { content: attr(data-cap); font: 600 0.6rem var(--cr-font); color: var(--cr-muted); line-height: 1; margin-top: 1px; }

/* a tablet: the tools on one line in landscape — one voice button (it cycles), no 64th */
@media (pointer: coarse) and (min-width: 641px) and (max-width: 1199px) {
  body.cr-touch .cr-palette .cr-voices { display: none !important; }
  body.cr-touch .cr-palette .cr-pb--vcycle { display: inline-flex !important; }
  body.cr-touch .cr-palette [data-dur="64th"] { display: none !important; }
}

/* touch screens: File → Help and the home link (the site bar is hidden there) */
body.cr-touch .cr-only-phone, body.cr-touch .cr-menu__link.cr-only-phone { display: block; }

/* ── QA round 2 (touch) ─────────────────────────────────────────────── */
/* 44 px wherever a finger goes: zoom and mixer buttons, part names, sliders, tempo, time chips, help tabs */
@media (pointer: coarse) {
  .cr-mini { width: 44px; height: 44px; }
  .cr-panel .cr-tb { min-height: 44px; min-width: 44px; }
  .cr-part__name { min-height: 44px; }
  .cr-part__row input[type="range"] { height: 44px; }
  .cr-tempo { min-height: 44px; }
  .cr-chips--times .cr-chip { min-height: 44px; }
  .cr-dialog [role="tab"] { min-height: 44px; }
}
/* a dialog taller than the screen keeps its buttons in sight (a phone on its side, a small tablet) */
@media (pointer: coarse), (max-height: 640px) {
  .cr-dialog__form { padding-bottom: 0; }
  .cr-dialog__actions { position: sticky; bottom: 0; z-index: 2; background: var(--cr-raised); margin: 4px -24px 0; padding: 10px 24px 14px; border-top: 1px solid var(--cr-line); }
}
/* tablets: Palettes and Bars carry their word under the icon, like the other tools */
@media (pointer: coarse) and (min-width: 641px) and (min-height: 521px) {
  body.cr-touch .cr-pb--pal, body.cr-touch .cr-pb--menu { flex-direction: column; gap: 0; }
  body.cr-touch .cr-pb--pal span, body.cr-touch .cr-pb--menu span { display: inline !important; font-size: 0.6rem; line-height: 1; }
  body.cr-touch .cr-pb--menu .cr-ico--chev { display: none; }
}
/* a tablet wide enough for the bar's zoom shows it once (not again in the status line) */
@media (pointer: coarse) and (min-width: 1001px) { .cr-status__zoom { display: none; } }
/* a phone on its side: the tool row fits the width (no swipe to reach Voice, Palettes, Bars) — only where it
   is narrow (a wide phone keeps 44 px tools with their captions) */
@media (max-height: 520px) and (max-width: 760px) and (pointer: coarse) {
  body.cr-touch .cr-palette { gap: 1px; padding-inline: 4px; }
  body.cr-touch .cr-palette .cr-pb { min-width: 36px; padding: 0 2px; }
  body.cr-touch .cr-palette .cr-pb[data-cap]::after { content: none; }
}
/* work that is not saved says so, in red, wherever the status line is (phones too) */
.cr-status__saved.is-error { color: #b91c1c; font-weight: 700; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cr-status__saved.is-error { color: #f87171; } }
:root[data-theme="dark"] .cr-status__saved.is-error { color: #f87171; }
@media (max-width: 640px) { .cr-status__saved.is-error { display: inline !important; font-size: 0.7rem; white-space: nowrap; } }

/* a note its instrument cannot play: tinted (MuseScore's warning colour) — the selection colour still wins */
.cr-host svg .cr-out .vf-notehead path, .cr-host svg .vf-notehead.cr-out path, .cr-host svg .vf-notehead.cr-out { fill: #c2410c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cr-host svg .cr-out .vf-notehead path, :root:not([data-theme="light"]) .cr-host svg .vf-notehead.cr-out path { fill: #fb923c; } }
:root[data-theme="dark"] .cr-host svg .cr-out .vf-notehead path, :root[data-theme="dark"] .cr-host svg .vf-notehead.cr-out path { fill: #fb923c; }

/* QA round 3 (touch) */
/* phones: the position has the status line to itself (zoom is a pinch there) */
@media (max-width: 640px) { .cr-status .cr-status__zoom { display: none !important; } }
/* 44 px wherever a finger goes: the scope choices in dialogs, the title, the sheet's search */
@media (pointer: coarse) {
  .cr-dialog .cr-radio { min-height: 44px; align-items: center !important; }
  .cr-titlebtn { min-height: 44px; }
  .cr-pal__search input { min-height: 44px; }
}
/* the sheet's grab edge: a finger-sized band above the search field */
@media (max-width: 999px) { body.cr-has-pal .cr-pal { padding-top: 22px; } body.cr-has-pal .cr-pal::before { top: 8px; } }

/* the narrowest phones (320 px, an iPhone SE): the top bar and the tools close up — the top bar keeps 44-px buttons; the tools narrow a little (last in the file: it wins over the touch sizes) */
@media (max-width: 350px) {
  .cr-bar { gap: 0; padding-inline: 1px; }
  .cr-bar__group { gap: 0; }
  .cr-tempo { padding: 0 4px; }
  .cr-palette { gap: 2px; padding-inline: 3px; }
  body.cr-touch .cr-palette .cr-pb { min-width: 36px; } /* (eight to a row: 44 px each does not fit in 320) */
  .cr-pb--pal span, .cr-pb--menu span { font-size: 0.56rem !important; letter-spacing: -0.01em; } /* "Palettes" in a 38-px key */
  .cr-sk small { font-size: 0.58rem; } /* "down ½" in a 35-px key */
}

/* typing words on a touch screen (lyrics, chord symbols): the tool rows and keys step aside for the on-screen
   keyboard, and the hint moves to the top, where it never covers the note being worded */
body.cr-touch.cr-texting .cr-palette, body.cr-touch.cr-texting .cr-strip, body.cr-touch.cr-texting .cr-status { display: none !important; }
body.cr-texting .cr-toast { top: calc(env(safe-area-inset-top, 0px) + 58px); bottom: auto; max-width: min(94vw, 460px); font-size: 0.78rem; padding: 7px 12px; }
/* a word for the mouse, a word for the finger */
.cr-only-touch { display: none; }
body.cr-touch .cr-only-touch { display: inline; }
body.cr-touch .cr-no-touch { display: none; }
/* the Insert notes item shows whether it is on */
.cr-menu__list > button[role="menuitemcheckbox"][aria-checked="true"]::before { content: "✓ "; color: var(--cr-sel); font-weight: 800; }
.cr-notes { margin: 0 0 12px; padding-left: 1.2em; max-height: 50vh; overflow: auto; line-height: 1.5; }
.cr-notes li { margin: 4px 0; }
/* while typing words: room under the music, so the last lines can scroll above the on-screen keyboard */
body.cr-touch.cr-texting .cr-scroll { padding-bottom: 70vh !important; }
/* New score: "Add to the score" in sight above the dialog's sticky buttons, a shorter list on a phone */
.cr-dialog [data-add] { scroll-margin-bottom: 84px; }
@media (max-width: 640px) { .cr-dialog .cr-details .cr-picker__list { max-height: 30vh; } }
/* … and room above it: the first line's boxes could not scroll down out from under the hint at the top */
body.cr-touch.cr-texting .cr-scroll { padding-top: 64px !important; }
/* a phone on its side has no height to spare: no hint while words are typed (it covered the note) */
@media (max-height: 520px) { body.cr-texting .cr-toast { display: none !important; } }
/* Writing in voice 2–4: the caret and the ghost note in that voice's colour (MuseScore) */
body[data-cr-voice="2"] .cr-caret--input { border-color: var(--cr-v2); background: rgba(21, 128, 61, 0.13); }
body[data-cr-voice="3"] .cr-caret--input { border-color: var(--cr-v3); background: rgba(194, 65, 12, 0.12); }
body[data-cr-voice="4"] .cr-caret--input { border-color: var(--cr-v4); background: rgba(109, 40, 217, 0.12); }
body[data-cr-voice="2"] .cr-ghost { background: rgba(21, 128, 61, 0.42); border-color: var(--cr-v2); }
body[data-cr-voice="3"] .cr-ghost { background: rgba(194, 65, 12, 0.4); border-color: var(--cr-v3); }
body[data-cr-voice="4"] .cr-ghost { background: rgba(109, 40, 217, 0.4); border-color: var(--cr-v4); }
body[data-cr-voice="2"] .cr-ghost__tag { background: var(--cr-v2); }
body[data-cr-voice="3"] .cr-ghost__tag { background: var(--cr-v3); }
body[data-cr-voice="4"] .cr-ghost__tag { background: var(--cr-v4); }
/* The ghost note shows the value about to be written: an open head for a half or a whole note */
body.cr-open-head .cr-ghost { background: rgba(255, 255, 255, 0.55); border-width: 2.5px; }