/* Stand — Reflection design system, reduced to what a music stand needs. */

:root {
  --serif: 'Newsreader', 'Times New Roman', serif;
  --ui: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --paper: #f6f1ea;
  --paper-deep: #ece4d6;
  --ink: #1a1320;
  --ink-soft: #3a2e3f;
  --mute: #6b5f6e;
  --mute-soft: #8f8494;
  --rule: rgba(26, 19, 32, 0.12);
  --rule-soft: rgba(26, 19, 32, 0.06);

  --indigo: #2a4b8d;
  --lake: #6ea3d8;
  --magenta: #b53775;
  --emerald: #2f7a5e;
  --gold: #c89a3d;

  --grad-horizon: linear-gradient(90deg, #2a4b8d 0%, #466fae 18%, #b59dd0 42%, #b53775 58%, #e39aba 78%, #f4b896 100%);
  --grad-wash:
    radial-gradient(ellipse at 20% 0%, #c9d9ee 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, #e39aba33 0%, transparent 60%),
    linear-gradient(180deg, #fbf7f0 0%, #f6f1ea 100%);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
input, select { font: inherit; }
[hidden] { display: none !important; }

.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mute); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mute { color: var(--mute); }

.brand-mark {
  width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0;
  background: var(--grad-horizon); position: relative; overflow: hidden;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px;
  background: var(--ink); transform: translateY(-0.75px); opacity: 0.85;
}

/* ---------- buttons + fields ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border-radius: 6px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.2px;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
}
.btn:active { opacity: 0.85; }
.btn:disabled { opacity: 0.4; }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--rule); }
.btn.quiet { background: transparent; color: var(--ink); border-color: transparent; padding: 0 10px; }
.btn.danger { background: transparent; color: var(--magenta); border-color: transparent; padding: 0 10px; }
.btn.block { width: 100%; }

.icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 999px; background: #fff; padding: 0;
}
.icon-btn svg { width: 18px; height: 18px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 11px; color: var(--mute); letter-spacing: 0.3px; }
.input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: 4px; background: #fff; color: var(--ink);
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  outline: none; -webkit-appearance: none; appearance: none;
}
.input:focus { border-color: var(--lake); box-shadow: 0 0 0 2px rgba(110, 163, 216, 0.4); }
select.input {
  background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px;
}

/* ---------- landing ---------- */

.landing {
  min-height: 100dvh; background: var(--grad-wash);
  padding: calc(var(--safe-top) + 32px) 24px calc(var(--safe-bottom) + 32px);
  display: flex; flex-direction: column;
}
.landing .brand { display: flex; align-items: center; gap: 10px; }
.landing .brand-word { font-family: var(--serif); font-size: 20px; letter-spacing: -0.3px; }
.landing h1 {
  font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1.02;
  letter-spacing: -1.2px; margin: auto 0 16px; max-width: 12ch;
}
.landing h1 em { font-style: italic; color: var(--magenta); }
.landing .lede { font-family: var(--serif); font-size: 19px; color: var(--ink-soft); margin: 0 0 32px; max-width: 30ch; }
.landing .actions { display: flex; flex-direction: column; gap: 12px; }
.join-row, .add-row { display: flex; gap: 8px; }
.join-row .input { text-transform: uppercase; letter-spacing: 3px; font-family: var(--mono); }
.horizon { position: relative; height: 10px; background: var(--grad-horizon); margin: 36px -24px 0; }
.horizon::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: var(--ink); opacity: 0.85; transform: translateY(-1px); }
.error { color: var(--magenta); font-size: 13px; min-height: 18px; }

/* ---------- stand ---------- */

.stand { height: 100dvh; display: flex; flex-direction: column; }

.bar {
  display: flex; align-items: center; gap: 8px;
  padding: calc(var(--safe-top) + 8px) 12px 8px 16px;
  border-bottom: 1px solid var(--rule-soft); background: var(--paper);
}
.bar .titles { flex: 1; min-width: 0; }
.bar .song-title {
  font-family: var(--serif); font-size: 21px; letter-spacing: -0.3px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar .meta { display: flex; align-items: center; gap: 6px; margin-top: 1px; min-width: 0; }
.bar .meta .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mute-soft); flex-shrink: 0; }
.dot.live { background: var(--emerald); }
.dot.wait { background: var(--gold); }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: 999px; background: #fff;
  font-size: 13px; font-weight: 500; white-space: nowrap;
}

.sheet {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative;
  background: var(--paper-deep); overscroll-behavior: contain;
}
.pages { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.pages canvas { display: block; background: #fff; border: 1px solid var(--rule); border-radius: 4px; }
.part-tabs { display: flex; gap: 6px; padding: 8px 6px 0; overflow-x: auto; }
.part-tabs .chip { min-height: 32px; font-size: 12px; }
.part-tabs .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.empty {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 32px; text-align: center;
}
.empty h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -0.4px; margin: 0; }
.empty p { margin: 0; color: var(--mute); max-width: 28ch; }

.stage { flex: 1; position: relative; min-height: 0; }
.stage .sheet { position: absolute; inset: 0; }
.follow {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  box-shadow: 0 8px 24px -12px rgba(26, 19, 32, 0.35);
}

/* transport */
.transport { background: var(--paper); border-top: 1px solid var(--rule); padding-bottom: calc(var(--safe-bottom) + 10px); }
.scrub { position: relative; height: 30px; touch-action: none; cursor: pointer; }
.scrub .track { position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--rule-soft); overflow: hidden; }
.scrub .fill { position: absolute; inset: 0; background: var(--grad-horizon); transform-origin: left; transform: scaleX(0); }
.scrub .track::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: var(--ink); opacity: 0.85; transform: translateY(-0.75px); }
.scrub .thumb {
  position: absolute; top: -5px; left: 0; width: 14px; height: 18px; margin-left: -7px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 7px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 16px; margin-top: -8px; }
.controls .buttons { display: flex; align-items: center; gap: 18px; }
.time { font-size: 13px; color: var(--mute); }
.time.total { justify-self: end; background: none; border: 0; padding: 8px 0 8px 12px; color: var(--mute); }
.play {
  width: 64px; height: 64px; border-radius: 999px; border: 0; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.play:active { transform: scale(0.96); }
.play:disabled { opacity: 0.35; }
.play svg { width: 26px; height: 26px; }
.tempo { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px 0; }
.tempo .label { font-size: 12px; color: var(--mute); }

/* ---------- panels (setlist, editor, instrument picker) ---------- */

.panel {
  position: fixed; inset: 0; z-index: 10; background: var(--paper);
  display: flex; flex-direction: column;
}
.panel.enter { animation: rise 180ms ease-out; }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: calc(var(--safe-top) + 14px) 12px 12px 20px; border-bottom: 1px solid var(--rule-soft);
}
.panel-head h2 { flex: 1; margin: 0; font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -0.5px; }
.panel-body { flex: 1; overflow-y: auto; padding: 16px 20px calc(var(--safe-bottom) + 24px); }
.panel-foot { padding: 12px 20px calc(var(--safe-bottom) + 12px); border-top: 1px solid var(--rule-soft); display: flex; gap: 10px; }

.song-list { list-style: none; margin: 0 0 16px; padding: 0; }
.song-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 14px;
  border: 1px solid transparent; border-left: 2px solid transparent; border-radius: 6px;
}
.song-row + .song-row { border-top-color: var(--rule-soft); }
.song-row.on { background: #fff; border-color: var(--rule); border-left-color: var(--magenta); }
.song-row .pick { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; }
.song-row .n { font-family: var(--mono); font-size: 11px; color: var(--mute); width: 18px; }
.song-row .name { font-family: var(--serif); font-size: 19px; letter-spacing: -0.2px; line-height: 1.2; }
.song-row .sub { font-family: var(--mono); font-size: 11px; color: var(--mute); margin-top: 2px; }

.room-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--rule); border-radius: 6px; margin-bottom: 20px; }
.room-card .code { font-family: var(--mono); font-size: 22px; letter-spacing: 4px; }
.peers { font-size: 12px; color: var(--mute); margin: -10px 0 20px; }

.form { display: flex; flex-direction: column; gap: 16px; }
.form .row2 { display: grid; grid-template-columns: 1fr 96px; gap: 10px; }
.part {
  background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.part .file { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.part .file .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part .row2 { display: grid; grid-template-columns: 1fr 96px; gap: 8px; }
.upload {
  display: flex; align-items: center; justify-content: center; min-height: 64px;
  border: 1px dashed var(--rule); border-radius: 6px; color: var(--ink-soft); font-size: 14px; font-weight: 500;
  background: transparent; position: relative;
}
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.picker { padding: calc(var(--safe-top) + 32px) 20px calc(var(--safe-bottom) + 24px); background: var(--grad-wash); overflow-y: auto; }
.picker h1 { font-family: var(--serif); font-weight: 300; font-size: 36px; letter-spacing: -1px; line-height: 1.05; margin: 8px 0 24px; }
.picker .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.picker .grid .btn { min-height: 64px; font-size: 16px; }
.picker .count { font-family: var(--mono); font-size: 11px; opacity: 0.6; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 130px); transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 6px; font-size: 13px; z-index: 20;
  animation: rise 160ms ease-out;
}
.time.count { color: var(--magenta); font-weight: 500; }

/* ---------- lead sheets ---------- */

.leadsheet {
  background: #fff; margin: 6px; padding: 14px 16px 22px;
  border: 1px solid var(--rule); border-radius: 4px;
  font-family: var(--mono); line-height: 1.5; color: var(--ink-soft); overflow-x: auto;
}
.leadsheet > div { white-space: pre; min-height: 1.5em; }
.ls-section {
  font-family: var(--serif); font-size: 1.3em; color: var(--ink); letter-spacing: -0.2px;
  margin: 0.8em 0 0.15em; white-space: pre-wrap !important;
}
.ls-section:first-child { margin-top: 0; }
.ls-chords { color: var(--indigo); font-weight: 500; }
.ls-note { font-family: var(--ui); font-style: italic; color: var(--magenta); white-space: pre-wrap !important; }
.ls-tab { font-size: 0.92em; }
.ls-blank { min-height: 0.6em !important; }

/* where the band is right now; everything below it is what's coming */
.reading-line {
  position: absolute; left: 0; right: 0; top: -1px; height: 2px; pointer-events: none;
  background: var(--grad-horizon); opacity: 0.85; mix-blend-mode: multiply; will-change: transform;
}
.tail { pointer-events: none; }

.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.add-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet-tools { display: flex; align-items: flex-end; gap: 12px; }
.sheet-input { font-family: var(--mono); min-height: 52vh; line-height: 1.45; resize: vertical; white-space: pre-wrap; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; background: #fff; flex-shrink: 0; }
.seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font-size: 13px; font-weight: 500; color: var(--mute); }
.seg button.on { background: var(--ink); color: #fff; }
.import-list { display: flex; flex-wrap: wrap; gap: 8px; }
.import-list .chip { font-size: 12px; min-height: 34px; }

/* key / capo / time line at the top of a lead sheet */
.ls-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 0.9em; font-family: var(--ui); }
.ls-meta .artist { font-family: var(--serif); font-style: italic; color: var(--mute); margin-right: 4px; font-size: 1.05em; }
.ls-meta .pill {
  font-family: var(--mono); font-size: 0.78em; letter-spacing: 0.2px; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.15em 0.7em; white-space: nowrap;
}
.ls-section { display: flex; align-items: baseline; gap: 10px; }
.ls-section .t { margin-left: auto; font-family: var(--mono); font-size: 0.62em; color: var(--mute); letter-spacing: 0.3px; }
.ls-pair > div { white-space: pre; }

/* "One page": a row per lyric line — section | chords | lyric | time */
.leadsheet.onepage {
  font-family: var(--ui); line-height: 1.22; color: var(--ink); overflow: hidden;
  column-gap: 26px; column-fill: auto; column-rule: 1px solid var(--rule-soft);
}
.leadsheet.onepage > div { white-space: normal; min-height: 0; }
.leadsheet.onepage { padding: 8px 10px 10px; }
.leadsheet.onepage .ls-meta { margin-bottom: 0.3em; gap: 0; }
.leadsheet.onepage .ls-meta .pill { border: 0; padding: 0; font-size: 0.72em; color: var(--mute); }
.leadsheet.onepage .ls-meta .pill + .pill::before { content: "·"; padding: 0 0.6em; color: var(--mute-soft); }
.op-row {
  display: grid; grid-template-columns: 2.45em var(--chord-w, 3em) 1fr; column-gap: 0.5em;
  align-items: baseline; padding: 0.06em 0.3em; margin: 0 -0.3em; border-radius: 3px; break-inside: avoid-column;
}
.op-start { border-top: 1px solid var(--rule); margin-top: 0.14em; padding-top: 0.16em; border-radius: 0 0 3px 3px; }
.leadsheet.onepage .op-start:first-of-type, .ls-meta + .op-start { border-top: 0; margin-top: 0; }
.op-label { font-size: 0.6em; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.op-label.op-time { font-family: var(--mono); font-weight: 400; letter-spacing: 0; font-size: 0.56em; }
.op-row.now-sec .op-label { color: var(--magenta); }
.op-chords { color: var(--indigo); font-weight: 600; font-size: 0.88em; overflow-wrap: anywhere; }
.op-lyric b { color: var(--indigo); font-weight: 650; }
.op-lyric .end { padding-left: 0.15em; }
.op-lyric .sep { color: var(--mute-soft); }
.op-lyric .bars { color: var(--indigo); font-weight: 600; white-space: pre-wrap; }
.op-lyric .again { color: var(--mute); font-style: italic; }
.op-lyric .note { color: var(--magenta); font-style: italic; font-size: 0.9em; }
.op-lyric .tab { font-family: var(--mono); font-size: 0.8em; white-space: pre; }

/* the line being played right now */
.op-row.now, .ls-pair.now, .ls-chords.now, .ls-lyric.now, .ls-tab.now { background: rgba(201, 217, 238, 0.6); }
.ls-section.now-sec { color: var(--magenta); }

.part-tabs { align-items: center; }
.view-toggle { margin-left: auto; }
.part-tabs .icon-btn.small { width: 36px; height: 36px; flex-shrink: 0; margin-left: auto; }
.part-tabs .view-toggle + .icon-btn.small { margin-left: 0; }
.part-tabs .icon-btn.small + .icon-btn.small { margin-left: 0; }
.part-tabs .icon-btn.small svg { width: 16px; height: 16px; }

/* full screen: the chart gets nearly the whole phone */
.exit-focus { display: none; }
.stand.focus .bar, .stand.focus .part-tabs { display: none; }
.stand.focus .stage { margin-top: var(--safe-top); }
.stand.focus .exit-focus {
  display: inline-flex; position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 34px; height: 34px; opacity: 0.8; box-shadow: 0 4px 12px -6px rgba(26, 19, 32, 0.3);
}
.stand.focus .exit-focus svg, .stand.focus .edit-focus svg { width: 15px; height: 15px; }
.edit-focus { display: none; }
.stand.focus .edit-focus.for-sheet {
  display: inline-flex; position: absolute; top: 8px; right: 50px; z-index: 2;
  width: 34px; height: 34px; opacity: 0.8; box-shadow: 0 4px 12px -6px rgba(26, 19, 32, 0.3);
}
.stand.focus .ls-meta { padding-right: 80px; }
.stand.focus .scrub { height: 22px; }
.stand.focus .controls { margin-top: -6px; }
.stand.focus .play { width: 48px; height: 48px; }
.stand.focus .play svg { width: 20px; height: 20px; }
.stand.focus .controls .icon-btn { width: 38px; height: 38px; }
.stand.focus .controls .buttons { gap: 14px; }
.stand.focus .transport { padding-bottom: calc(var(--safe-bottom) + 6px); }
.view-toggle button { min-height: 30px; padding: 0 12px; font-size: 12px; }

/* measures: four bars to a row so bars line up down the page */
.op-bars { align-items: start; }
.op-bars .bar-wrap { grid-column: 2 / -1; }
.bar-grid { display: flex; flex-wrap: wrap; align-items: stretch; position: relative; }
.measure {
  flex: 0 0 25%; min-width: 0; padding: 0.05em 0.35em 0.1em;
  border-left: 1.5px solid var(--ink-soft);
}
.bar-grid .measure:nth-of-type(4n), .bar-grid .measure:last-of-type { border-right: 1.5px solid var(--ink-soft); }
.beats { display: flex; }
.slot { flex: 1 1 0; min-width: 0; color: var(--mute-soft); font-size: 0.8em; line-height: 1.5; }
.slot.ch { color: var(--indigo); font-weight: 650; font-size: 0.95em; white-space: nowrap; min-width: max-content; padding-right: 0.4em; }
.bar-lyric { font-size: 0.8em; color: var(--ink-soft); line-height: 1.2; overflow-wrap: anywhere; }
.bar-span { font-size: 0.85em; color: var(--ink-soft); padding: 0.1em 0.35em 0; }
.reps { position: absolute; right: -0.2em; top: -0.55em; font-family: var(--mono); font-size: 0.62em; color: var(--magenta); }
.measure.now { background: rgba(201, 217, 238, 0.6); }
.slot.beat-now { box-shadow: inset 0 -2px 0 var(--magenta); }
.ls-bars { margin: 0.15em 0 0.35em; }
.ls-bars .bar-lyric, .ls-bars .bar-span { font-family: var(--ui); }
.sheet-actions { display: flex; gap: 8px; }
.sheet-actions .btn { flex: 1; }
.time-rec { display: grid; grid-template-columns: 96px 1fr; align-items: end; gap: 6px 8px; }
.time-rec p { grid-column: 1 / -1; font-size: 13px; margin: 0; }

/* ---------- measures editor ---------- */
.med { display: flex; flex-direction: column; gap: 14px; }
.med-top { display: flex; align-items: flex-end; gap: 10px; }
.med-top .field { width: 84px; }
.med-top .btn { min-height: 40px; padding: 0 12px; }
.med-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; font-size: 13px;
}
.med-help { font-size: 12.5px; margin: 0; }
.med-section { display: flex; flex-direction: column; gap: 10px; }
.med-sec { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.med-sec-name {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 4px 0; outline: none;
  font-family: var(--serif); font-size: 20px; color: var(--ink);
}
.med-sec-name:focus { box-shadow: inset 0 -2px 0 var(--lake); }
.med-sec-time { font-size: 12px; }
.med-raw { font-size: 13px; color: var(--mute); background: var(--rule-soft); border-radius: 4px; padding: 6px 8px; white-space: pre-wrap; }

.med-line { background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 8px 6px; }
.med-grid { display: grid; grid-template-columns: repeat(var(--per-row), minmax(0, 1fr)); row-gap: 8px; }
.med-cell { border-left: 2px solid var(--ink-soft); padding: 0 4px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.med-cell:nth-child(2n) { border-right: 2px solid var(--ink-soft); }
.med-grid[style*="--per-row:4"] .med-cell:nth-child(2n) { border-right: 0; }
.med-grid[style*="--per-row:4"] .med-cell:nth-child(4n), .med-cell:last-child { border-right: 2px solid var(--ink-soft); }
.med-cell.sel { background: rgba(201, 217, 238, 0.45); }
.med-num { align-self: flex-start; border: 0; background: none; padding: 2px 4px; margin-left: -4px; font-size: 10.5px; color: var(--mute); min-height: 22px; }
.med-band { display: grid; grid-template-columns: repeat(var(--beats), minmax(0, 1fr)); gap: 2px; height: 44px; }
.med-chord {
  display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden;
  border-radius: 6px; padding: 0 6px; cursor: grab; user-select: none; -webkit-user-select: none;
  touch-action: none; border: 1.5px solid transparent;
}
.med-chord b { font-size: 16px; line-height: 1.1; white-space: nowrap; }
.med-chord .len { font-size: 10.5px; opacity: 0.8; white-space: nowrap; }
.med-chord.cont { opacity: 0.55; cursor: pointer; touch-action: manipulation; }
.med-chord.cont span { font-size: 12px; font-weight: 600; }
.med-chord.sel { border-color: var(--ink); box-shadow: 0 2px 8px -3px rgba(26, 19, 32, 0.4); }
.med-chord.dragging { opacity: 0.45; cursor: grabbing; }
.c-C { background: #d9e6f1; color: #2a4b8d; }
.c-D { background: #f4e6c5; color: #7d5a17; }
.c-E { background: #fde3d3; color: #9a4a26; }
.c-F { background: #f0d7e2; color: #b53775; }
.c-G { background: #d8e8dd; color: #2f7a5e; }
.c-A { background: #e6deef; color: #6a4c93; }
.c-B { background: #e3edf7; color: #3b6ea8; }
.c-none { background: var(--rule-soft); color: var(--mute); }

.med-ticks { display: grid; grid-template-columns: repeat(var(--beats), minmax(0, 1fr)); gap: 2px; }
.med-tick {
  position: relative; height: 30px; border: 0; border-radius: 4px; background: transparent; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.med-tick i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute-soft); opacity: 0.6; }
.med-tick:active, .med-tick.sel { background: rgba(26, 19, 32, 0.08); }
.med-tick.sel i { background: var(--ink); opacity: 1; }
.med-tick.drop { background: var(--ink); }
.med-tick.drop::after { content: attr(data-chord); position: absolute; color: #fff; font-weight: 650; font-size: 13px; }
.med-tick.drop i { display: none; }
.med-words {
  width: 100%; min-width: 0; border: 0; border-top: 1px dashed var(--rule); background: transparent;
  padding: 6px 2px 4px; font: inherit; font-size: 16px; color: var(--ink-soft); outline: none;
}
.med-words:focus { border-top-color: var(--lake); }
.med-words::placeholder { color: var(--mute-soft); opacity: 0.6; }
.med-span { margin-top: 4px; }
.med-line-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.med-line-tools .chip { min-height: 30px; font-size: 12px; padding: 0 10px; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.danger-chip { color: var(--magenta); }
.med-add {
  min-height: 40px; border: 1px dashed var(--rule); border-radius: 6px; background: transparent;
  color: var(--ink-soft); font-size: 14px; font-weight: 500;
}

/* what you've tapped: change, move or delete it */
.med-sheet {
  position: sticky; bottom: 0; z-index: 3; margin: 0 -20px -24px; padding: 12px 16px calc(var(--safe-bottom) + 12px);
  background: var(--paper); border-top: 1px solid var(--rule); box-shadow: 0 -10px 24px -16px rgba(26, 19, 32, 0.35);
  display: flex; flex-direction: column; gap: 10px;
}
.med-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.med-sheet-head b { font-size: 18px; }
.med-sheet-row { display: flex; gap: 8px; flex-wrap: wrap; }
.med-sheet-row .btn { flex: 1; min-height: 40px; padding: 0 10px; }
.med-sheet-label { font-size: 12px; margin-bottom: -4px; }
.med-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.med-pick { min-width: 46px; min-height: 40px; border: 1.5px solid transparent; border-radius: 6px; font-weight: 650; font-size: 15px; }
.med-pick.on { border-color: var(--ink); }
.med-palette .add-row { width: 100%; }
.btn.med-sec-del { font-size: 12px; color: var(--mute); padding: 0 6px; min-height: 32px; }
.btn.med-sec-del.confirm { color: var(--magenta); font-weight: 600; }

/* ---------- colour views (beta): Blocks and Map ---------- */
.op-sub { display: block; font-weight: 400; letter-spacing: 0; font-size: 0.92em; margin-top: 0.3em; text-transform: none; }
.leadsheet.blocks .op-row, .leadsheet.map .op-row { padding-top: 0.12em; padding-bottom: 0.12em; }
.leadsheet.blocks .op-start, .leadsheet.map .op-start { border-top-color: var(--rule-soft); margin-top: 0.35em; padding-top: 0.4em; }
.leadsheet.blocks .ls-meta, .leadsheet.map .ls-meta { margin-bottom: 0.5em; }

/* Blocks: the lines as written, four bars to a row, words under each bar */
.bk-wrap { grid-column: 2 / -1; position: relative; }
.bk-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0.4em; }
.bk-bar { position: relative; min-width: 0; padding: 0 0.12em; border-radius: 0.3em; }
.bk-band { display: grid; grid-template-columns: repeat(var(--beats), minmax(0, 1fr)); gap: 0.12em; height: 2.3em; }
.bk-chord {
  min-width: 0; overflow: hidden; border-radius: 0.4em; padding: 0 0.45em;
  display: flex; flex-direction: column; justify-content: center; white-space: nowrap;
}
.bk-chord b { font-size: 1.08em; line-height: 1.05; }
.bk-chord .len { font-size: 0.66em; opacity: 0.85; }
.bk-chord.cont { opacity: 0.45; }
.bk-chord .held { font-size: 0.85em; font-weight: 600; }
.bk-words { font-size: 0.8em; line-height: 1.2; color: var(--ink-soft); padding: 0.22em 0.2em 0; overflow-wrap: anywhere; }
.bk-span { font-size: 0.8em; color: var(--ink-soft); padding: 0.2em 0.3em 0; }
.bk-bar.now { background: rgba(26, 19, 32, 0.06); }
.bk-wrap .reps { right: 0.1em; top: -0.7em; }

/* the playhead: a thin line across the bar being played */
.prog {
  position: absolute; left: 0.12em; right: 0.12em; bottom: -0.15em; height: 2px; border-radius: 2px;
  background: var(--magenta); transform: scaleX(0); transform-origin: left; pointer-events: none;
}

/* Map: each section as one strip, eight bars to a row */
.mp-strip { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 0.35em; }
.mp-row { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: 1.75em auto; column-gap: 0; }
.mp-run {
  grid-row: 1; z-index: 1; margin: 0 1px; border-radius: 0.35em; min-width: 0; overflow: hidden;
  display: flex; align-items: center; padding: 0 0.35em; white-space: nowrap;
}
.mp-run b { font-size: 0.95em; }
.mp-run.cont { opacity: 0.45; }
.mp-bar { grid-row: 1; position: relative; border-left: 1px solid var(--rule); border-radius: 0.2em; }
.mp-bar.phrase { border-left: 1.5px solid var(--ink-soft); }
.mp-bar.now { background: rgba(26, 19, 32, 0.06); }
.mp-bar .prog { bottom: -0.2em; left: 2px; right: 2px; }
.mp-words {
  grid-row: 2; min-width: 0; padding: 0.3em 0.25em 0; font-size: 0.66em; line-height: 1.15; color: var(--mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-row .reps { right: -0.1em; top: -0.6em; }
.mp-run.half { padding: 0 0.2em; }
.mp-run.half b { font-size: 0.78em; }
.mp-run.tiny { padding: 0; justify-content: center; }
.mp-run.tiny b { font-size: 0.68em; }
.mp-words { padding-left: 0.35em; }

/* ---------- pattern sheets: the song as its building blocks ---------- */
.leadsheet.pattern { font-family: var(--ui); line-height: 1.5; color: var(--ink); padding: 0.9em 1em 1.1em; }
.leadsheet.pattern > div { white-space: normal; min-height: 0; }
.pt-title { font-family: var(--serif); font-size: 1.45em; letter-spacing: -0.3px; line-height: 1.15; }
.pt-info { font-family: var(--mono); font-size: 0.7em; color: var(--mute); margin: 0.25em 0 0.8em; }
.pt-row { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); column-gap: 0.6em; align-items: baseline; padding: 0.22em 0; }
.pt-label { font-size: 0.68em; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.pt-line { font-size: 1em; }
.pt-note { margin-left: 6em; font-size: 0.8em; color: var(--ink-soft); line-height: 1.55; padding-bottom: 0.1em; }
.pt-text { font-size: 0.95em; color: var(--ink-soft); padding: 0.2em 0; }
.pt-gap { height: 0.45em; }
.pt-chip {
  display: inline-flex; align-items: baseline; border-radius: 0.35em; padding: 0.02em 0.4em;
  font-weight: 650; line-height: 1.35; white-space: nowrap;
}
.pt-note .pt-chip, .pt-text .pt-chip { padding: 0 0.3em; }
.pt-mult { font-size: 0.72em; font-weight: 650; margin-left: 0.12em; color: var(--ink-soft); }
.pt-chip .pt-mult { color: inherit; opacity: 0.8; }
.pt-group { display: inline-flex; align-items: baseline; white-space: nowrap; }
.pt-split { display: inline-flex; align-items: baseline; gap: 0.15em; padding-bottom: 0.1em; border-bottom: 2px solid var(--ink-soft); }
.pt-beat { color: var(--mute); font-weight: 700; padding: 0 0.04em; }
.pt-phrase {
  display: inline; padding: 0.1em 0.3em; border-left: 1.5px solid var(--ink-soft); border-right: 1.5px solid var(--ink-soft);
  border-radius: 0.35em;
}
.pt-sep { color: var(--mute-soft); padding: 0 0.05em; }
.pt-word { white-space: nowrap; }

/* the chart exactly as pasted */
.leadsheet.original { padding: 0.9em 1em 1.2em; }
.leadsheet.original > div { white-space: normal; min-height: 0; }
.og-text { margin: 0.6em 0 0; font-family: var(--mono); font-size: 1em; line-height: 1.45; color: var(--ink-soft); white-space: pre; overflow-x: auto; }
.og-chords { color: var(--indigo); font-weight: 600; }
.med-help { font-size: 13px; margin: 0; color: var(--ink-soft); background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; line-height: 1.45; }
.med-help b { color: var(--ink); font-weight: 600; }
.med-num {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-left: -2px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); padding: 0 8px; min-height: 26px;
  font-size: 11px; font-weight: 500; color: var(--ink-soft);
}
.med-num .dots { color: var(--mute); }
.med-tick i { width: 8px; height: 8px; }
.unsaved { font-size: 13px; color: var(--magenta); font-weight: 600; align-self: center; }
.med-sheet-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }

/* ---------- bass sheets: Blocks and Lanes ---------- */
.bs-legend { display: flex; flex-wrap: wrap; gap: 0.15em 1.1em; font-size: 0.68em; line-height: 1.35; color: var(--mute); margin: -0.1em 0 0.55em; }
.bs-legend b { color: var(--ink-soft); font-weight: 650; }
.bs-feel { font-size: 0.66em; font-weight: 650; color: var(--magenta); padding: 0 0.2em 0.3em; }

.bs-note { grid-column: 2 / -1; font-size: 0.74em; line-height: 1.3; color: var(--magenta); font-style: italic; }
.bs-block .len { font-family: var(--mono); font-size: 0.6em; letter-spacing: -0.02em; overflow: hidden; text-overflow: clip; }
.bs-slide { font-weight: 500; margin-right: 0.06em; opacity: 0.7; }
.bs-lead { margin-left: 0.35em; font-family: var(--ui); font-weight: 700; }
.bk-chord.rest { background: transparent; border: 1px dashed var(--rule); }

.ln-wrap { display: flex; flex-direction: column; gap: 0.45em; position: static; } /* rows measure their offset from the sheet, for follow */
.ln-row { display: grid; grid-template-columns: 0.75em minmax(0, 1fr); column-gap: 0.2em; }
.ln-strings { display: flex; flex-direction: column; }
.ln-strings span {
  height: var(--lane-h); display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.58em; color: var(--mute-soft);
}
.ln-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ln-bar { position: relative; min-width: 0; border-left: 1px solid var(--rule); border-radius: 0.2em; }
.ln-bar.first { border-left: 1.5px solid var(--ink-soft); }
.ln-bar.now { background: rgba(26, 19, 32, 0.05); }
.ln-lanes {
  position: relative; height: calc(var(--lanes) * var(--lane-h));
  background: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--lane-h) / 2 - 0.5px),
    var(--rule) calc(var(--lane-h) / 2 - 0.5px), var(--rule) calc(var(--lane-h) / 2 + 0.5px),
    transparent calc(var(--lane-h) / 2 + 0.5px), transparent var(--lane-h));
}
.leadsheet .ln-run { position: absolute; height: var(--lane-h); background: none; }
.ln-hit { position: absolute; top: 14%; bottom: 14%; background: currentColor; opacity: 0.2; border-radius: 0.18em; }
.ln-hit.on { opacity: 0.32; }
.ln-fret {
  position: absolute; left: 0.22em; top: 50%; transform: translateY(-50%);
  font-size: 0.8em; font-weight: 750; line-height: 1; white-space: nowrap; pointer-events: none;
}
.ln-fret small { font-size: 0.78em; font-weight: 600; margin-left: 0.3em; opacity: 0.85; }
.ln-sweep {
  position: absolute; top: -2px; bottom: -2px; left: 0; width: 2px; margin-left: -1px; border-radius: 1px;
  background: var(--magenta); opacity: 0; pointer-events: none; z-index: 2;
}
.leadsheet.lanes .bk-words { padding-top: 0.15em; font-size: 0.72em; }
.bk-chord.cont.lead { opacity: 0.8; }
.bs-block.one { padding: 0; align-items: center; }
.bs-block.one b { font-size: 0.82em; }
.bk-wrap > .bs-note { padding: 0 0.2em 0.25em; }
/* a note shorter than a beat: its fret sits small over its block, clear of the next bar's */
.ln-run.short .ln-fret { left: 0; top: 0; transform: translateY(-58%); font-size: 0.6em; }
.chip.add-version { border-style: dashed; color: var(--ink-soft); white-space: nowrap; }
.part-tabs .add-version + .icon-btn.small { margin-left: 0; }
.part-tabs .chip, .part-tabs .seg { flex-shrink: 0; }

/* ---------- vocal sheets: the tune as a lyric chart ---------- */
.leadsheet.vocals { line-height: 1.2; padding-bottom: 14px; margin-left: auto; margin-right: auto; }
.vx-sec {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.7em; margin: 1em 0 0.15em;
  font-size: 0.66em; font-weight: 650; letter-spacing: 0.5px; text-transform: uppercase; color: var(--mute);
}
.bs-legend + .vx-sec { margin-top: 0.2em; }
.vx-sec.now-sec { color: var(--magenta); }
.vx-time { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }
.vx-start { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mute-soft); }
.vx-line { display: flex; flex-direction: column; gap: 0.55em; margin-bottom: 0.55em; } /* static: rows measure their offset from the sheet, for follow */
.vx-line > .bs-note { padding: 0 0.2em; }
.vx-row .reps { right: 0; top: -0.3em; }
.vx-row { position: relative; display: grid; grid-template-rows: 1.05em var(--roll) auto; }
.vx-bar { grid-row: 1 / 4; border-left: 1.5px solid rgba(26, 19, 32, 0.4); border-radius: 0 0.25em 0.25em 0; }
.vx-bar.last { border-right: 1.5px solid rgba(26, 19, 32, 0.4); }
.vx-bar.now { background: rgba(26, 19, 32, 0.05); }
.vx-beat {
  grid-row: 1 / 3; min-width: 2.7em; /* 1.5em of the row: a beat never gets narrower */
  border-left: 1px dotted rgba(26, 19, 32, 0.16); padding-left: 0.32em;
  font-family: var(--mono); font-size: 0.56em; line-height: 1.75; color: var(--mute-soft);
}
.vx-beat:nth-child(1), .vx-bar + .vx-beat { border-left-color: transparent; }
.vx-home { grid-row: 2; align-self: start; height: 0; border-top: 1px dashed rgba(181, 55, 117, 0.4); pointer-events: none; }
.vx-pill {
  grid-row: 2; align-self: start; position: relative; min-width: 0; height: 0.5em; margin-right: 2px;
  border-radius: 0.25em; background: var(--indigo); opacity: 0.78;
}
.vx-pill.tie-in { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.vx-pill.tie-out { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.vx-pill.beat-now { background: var(--magenta); opacity: 1; }
.vx-name {
  position: absolute; left: 0.05em; bottom: 100%; padding-bottom: 0.08em;
  font-size: 0.58em; font-weight: 650; line-height: 1.15; color: var(--indigo); white-space: nowrap;
}
.vx-rest { grid-row: 2; align-self: center; justify-self: center; width: 1.1em; height: 0.32em; margin: 0 0.55em; border-radius: 1px; background: var(--mute-soft); opacity: 0.6; }
.vx-syl {
  grid-row: 3; display: flex; align-items: baseline; padding: 0.22em 0.42em 0 0.04em; /* its words set how wide its columns are */
  font-size: 0.86em; white-space: nowrap; color: var(--ink);
}
.vx-syl .hy { color: var(--mute-soft); }
.vx-syl .ext { flex: 1; min-width: 0.5em; margin: 0 -0.3em 0 0.2em; border-bottom: 1px solid var(--mute-soft); align-self: flex-end; margin-bottom: 0.25em; }
.vx-syl.beat-now { color: var(--magenta); }

/* drum highway */
.highway { background: #15111a; overflow: hidden; }
.hw-canvas { display: block; }
.panel .highway { border-radius: 6px; }

/* ---------- singing coach: between the chart and the play button ---------- */
.coach { flex-shrink: 0; background: var(--paper); border-top: 1px solid var(--rule); }
.coach-bar { display: flex; align-items: center; gap: 6px; padding: 6px 6px 0; overflow-x: auto; scrollbar-width: none; }
.coach-bar::-webkit-scrollbar { display: none; }
.coach-bar .chip, .coach-bar .seg { flex-shrink: 0; }
.coach-bar .chip { min-height: 30px; padding: 0 12px; font-size: 12px; }
.coach-bar .seg button { min-height: 24px; padding: 0 10px; font-size: 12px; }
.coach-stop { gap: 6px; }
.coach-stop .x { display: inline-flex; width: 14px; height: 14px; opacity: 0.75; }
.coach-stop .x svg { width: 14px; height: 14px; }
.coach-level { width: 8px; height: 8px; border-radius: 50%; background: var(--mute-soft); transition: transform 60ms linear; }
.coach-level.heard { background: #4fc495; }
.coach-view { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); }
.coach-read { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 4px 4px 4px 12px; min-width: 0; }
.coach-target { font-size: 11px; color: var(--mute); line-height: 1.2; }
.coach-target b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.05; color: var(--ink); }
.coach-say { font-size: 14px; font-weight: 650; white-space: nowrap; color: var(--mute); }
.coach-say.on { color: var(--emerald); }
.coach-say.sharp, .coach-say.flat { color: var(--magenta); }
.coach-you { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.coach-score { font-size: 11px; color: var(--mute); white-space: nowrap; }
.coach-plot { position: relative; min-width: 0; overflow: hidden; background: #fbf8f3; border-left: 1px solid var(--rule-soft); }
.coach-canvas { display: block; }
.part-tabs .chip.sing.on { background: var(--emerald); border-color: var(--emerald); color: #fff; }

/* practising alone: this phone's own clock */
.controls .left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.solo-tag {
  padding: 2px 7px; border-radius: 999px; background: var(--emerald); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
}
.stand.solo .scrub .fill { background: var(--emerald); }

/* how each note went, once sung: green, or gold and nudged the way it was off */
.vx-pill.sung-on:not(.beat-now) { background: var(--emerald); opacity: 0.95; }
.vx-pill.sung-sharp:not(.beat-now), .vx-pill.sung-flat:not(.beat-now) { background: var(--gold); opacity: 1; }
.vx-pill.sung-sharp { transform: translateY(-0.18em); }
.vx-pill.sung-flat { transform: translateY(0.18em); }
.vx-pill.sung-missed:not(.beat-now) { background: var(--mute-soft); opacity: 0.45; }