/*
 * PerfectSetList — "Midnight Console" design system.
 * All values are the canonical tokens from DESIGN.md. Do not deviate without
 * updating DESIGN.md first (see CLAUDE.md).
 *
 * Fonts are loaded from Google Fonts for now; production self-hosts (DESIGN.md).
 */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;600;800&display=swap");

:root {
  --bg: #101418;
  --surface: #171C22;
  --raised: #1E242C;
  --hairline: #2A323C;
  --text: #E8EAED;
  --muted: #9AA3AD;
  --amber: #FFB454;
  --amber-deep: #E89A2E;
  --amber-wash: rgba(255, 180, 84, .07);
  --teal: #37C2A0;
  --red: #FF6B4A;

  --sans: "Instrument Sans", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --s2: 2px; --s4: 4px; --s8: 8px; --s16: 16px; --s24: 24px; --s32: 32px; --s48: 48px;
  --r-panel: 10px; --r-control: 8px; --r-chip: 5px;
  --tap-target: 44px;
  --page-gutter: 24px;
  --layer-set-head: 15;
  --layer-shell: 20;
  --layer-sheet: 40;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { min-width: 0; }
body {
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.serif-italic { font-family: var(--serif); font-style: italic; color: var(--muted); }
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- App shell ---- */
.shell-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand account";
  align-items: center;
  gap: 8px 12px;
  padding: 8px max(var(--page-gutter), env(safe-area-inset-right));
  padding-left: max(var(--page-gutter), env(safe-area-inset-left));
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  position: static;
}
.shell-bar-compact {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand picker account" "nav nav nav";
  padding-bottom: 0;
  gap: 4px 10px;
}
.wordmark { grid-area: brand; white-space: nowrap; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
a.wordmark {
  display: inline-flex;
  align-items: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  color: var(--text);
}
a.wordmark:hover { color: var(--text); text-decoration: none; }
a.wordmark:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
  border-radius: var(--r-chip);
}
.wordmark .accent { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--amber); }
.wordmark .glow { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 12px var(--amber); margin-right: 8px; vertical-align: 2px; }
.band-switch {
  grid-area: picker;
  width: 100%;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  max-width: 100%;
  font-family: var(--mono);
  font-size: 16px;
  padding: 6px 10px;
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
}
.band-switch:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.wordmark-mark .accent { margin-left: -2px; }
.shell-tools {
  grid-area: account;
  display: flex;
  align-items: center;
  gap: 0;
  justify-self: end;
}
.shell-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  color: var(--muted);
  border-radius: var(--r-control);
  text-decoration: none;
}
.shell-help:hover { color: var(--amber); text-decoration: none; }
.shell-help:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.shell-menu { position: relative; }
.shell-tools .shell-menu { grid-area: unset; }
@media (min-width: 821px) {
  .shell-bar-compact .band-switch { max-width: 420px; justify-self: start; }
}
.shell-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  color: var(--muted);
  font-size: 20px;
  font-weight: 700;
  border-radius: var(--r-control);
}
.shell-menu > summary::-webkit-details-marker { display: none; }
.shell-menu > summary:hover { color: var(--text); }
.shell-menu > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.shell-menu[open] > summary { color: var(--text); }
.shell-menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  padding: 4px;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.shell-menu-pop .linkbtn { width: 100%; justify-content: flex-start; padding: 0 12px; }
.shell-nav {
  grid-area: nav;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
}
.shell-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
}
.shell-nav a.active { color: var(--text); }
.shell-nav a:hover { color: var(--text); text-decoration: none; }
.shell-account { grid-area: account; margin: 0; }
.shell-account .linkbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
}
.shell-nav a:focus-visible,
.shell-account .linkbtn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}
.linkbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.linkbtn:hover { color: var(--text); }

main {
  width: 100%;
  max-width: 1120px;
  min-width: 0;
  margin: 0 auto;
  padding-top: var(--s32);
  padding-right: max(var(--page-gutter), env(safe-area-inset-right));
  padding-bottom: 80px;
  padding-left: max(var(--page-gutter), env(safe-area-inset-left));
}

/* ---- Headings ---- */
h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
h1 .sub { display: block; font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 4px; }
.section-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: var(--s32) 0 var(--s8); }
/* All-time play count beside the "Played history" label — a quiet mono datum,
   amber, at the 12px data floor and without the label's wide tracking. */
.play-count-tally { color: var(--amber); font-size: 12px; letter-spacing: normal; text-transform: none; }

/* ---- Buttons ---- */
.btn { font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 9px 18px;
  min-width: var(--tap-target); min-height: var(--tap-target); border-radius: var(--r-control);
  border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; }
.btn-primary { background: var(--amber); color: #1A1205; }
.btn-primary:hover { background: var(--amber-deep); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--hairline); }
.btn-secondary:hover { border-color: var(--muted); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

/* ---- Page-action overflow menu (Gig mode + More ⋯) ---- */
.head-menu { position: relative; display: inline-block; }
.head-menu > summary { list-style: none; }
.head-menu > summary::-webkit-details-marker { display: none; }
.head-menu > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.head-menu[open] > summary { border-color: var(--muted); }
.head-menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  padding: 4px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.head-menu-pop > a,
.head-menu-pop form > button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap-target);
  padding: 0 12px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--r-control);
  cursor: pointer;
}
.head-menu-pop > a:hover,
.head-menu-pop form > button:hover { background: var(--surface); text-decoration: none; }
.head-menu-pop > a:focus-visible,
.head-menu-pop form > button:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.head-menu-pop form { margin: 0; }

/* ---- Panels & rows ---- */
.panel { background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-panel); padding: var(--s24); }
.band-chooser {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
}
.band-chooser-copy { margin-top: var(--s4); font-size: 17px; }
.band-choice-list {
  display: grid;
  margin-top: var(--s24);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
}
.band-choice {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s16);
  min-height: 54px;
  padding: 12px 14px;
  color: var(--text);
  background: var(--surface);
  border: 0;
  border-radius: 0;
}
.band-choice:first-child { border-radius: var(--r-control) var(--r-control) 0 0; }
.band-choice:last-child { border-radius: 0 0 var(--r-control) var(--r-control); }
.band-choice:only-child { border-radius: var(--r-control); }
.band-choice + .band-choice { border-top: 1px solid var(--hairline); }
.band-choice:nth-child(odd) { background: var(--raised); }
.band-choice:hover { color: var(--text); text-decoration: none; }
.band-choice:hover .band-choice-name { color: var(--amber); }
.band-choice:focus-visible {
  z-index: 1;
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}
.band-choice-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.band-choice-facts {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}
.band-choice-arrow { color: var(--amber); font-family: var(--mono); }
.band-empty { display: grid; gap: var(--s4); margin-top: var(--s24); }
.band-create-section { margin-top: var(--s24); }
.band-create-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  min-height: var(--tap-target);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.band-create-toggle::-webkit-details-marker { display: none; }
.band-create-toggle::before {
  content: "+";
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
}
.band-create[open] > .band-create-toggle::before { content: "\2013"; }
.band-create-toggle:hover { color: var(--text); }
.band-create-toggle:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: var(--r-chip);
}
.band-create-panel { max-width: 420px; margin-top: var(--s16); }
.band-create-panel input,
.band-create-panel button { min-width: var(--tap-target); min-height: var(--tap-target); }
.band-create-help { margin-top: 10px; }
.row { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: var(--s16); padding: 10px 12px; border-radius: 6px; }
.row:nth-child(odd) { background: var(--raised); }
.row .num { font-family: var(--mono); font-size: 12px; color: var(--muted); width: 20px; text-align: right; }
.row .title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.row .dur { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.compact-row {
  min-height: 56px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s8);
  padding: 6px 10px;
  border-bottom: 1px solid var(--hairline);
}
.compact-row:last-child { border-bottom: 0; }
.compact-row.history-row { min-height: 0; padding: 2px 10px; }
.compact-row.file-row { min-height: 0; padding: 2px 10px; flex-wrap: nowrap; }
.file-row .row-primary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-row .row-secondary { flex: 0 0 auto; }
.file-row .row-actions { flex: 0 0 auto; }
.compact-row.has-detail { flex-wrap: wrap; }
.row-main { flex: 1 1 auto; min-width: 0; }
.row-main-link { min-height: var(--tap-target); display: flex; align-items: center; min-width: 0; }
.row-primary { display: block; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.row-song-link,
a.challenge-status,
.challenge-merge-notice > div > a {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.row-secondary { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--muted); }
.row-facts { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: var(--s8); min-width: 0; }
.row-actions { display: flex; gap: var(--s8); align-items: center; flex-wrap: wrap; }
.row-detail { flex: 1 0 100%; min-width: 0; }
/* Show page: the song's notes sit on the RIGHT beside the key, so a singer's
   name is never read as part of the note (Luke, 2026-07-24). The facts column
   is allowed to shrink here — a long note wraps or gives way instead of pushing
   the row into horizontal overflow on a phone. */
.row-facts.has-note { flex: 0 1 auto; }
.row-note { min-width: 0; color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.compact-row :is(.row-secondary, .row-facts, .key, .dur, .plays, .stamp) { font-size: 12px; }

.key { font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--amber);
  border: 1px solid var(--hairline); padding: 1px 7px; border-radius: var(--r-chip); }

/* song rows (library + editor picker): title + inline note (trimmed) + play count */
.song-row .title { min-width: 0; display: flex; align-items: baseline; gap: var(--s8); }
.lib-row .lib-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--s8); }
.song-row .note, .lib-row .note { flex: 1 1 0; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.song-row .plays, .lib-row .plays { font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--text); }
.song-row .plays.never, .lib-row .plays.never { color: var(--muted); }
.inactive-song-row { color: var(--muted); }
.inactive-song-row .row-primary { color: var(--muted); }
.inactive-badge { font-family: var(--mono); font-size: 12px; color: var(--amber); font-weight: 600; letter-spacing: .05em; }
.inactive-song-action { flex: 0 0 auto; }
.inactive-songs-toggle { margin-top: var(--s16); }
.inactive-songs-toggle-label { display: inline-flex; align-items: center; gap: var(--s8); min-height: 44px; color: var(--muted); cursor: pointer; }
.inactive-songs-toggle-label:focus-within { color: var(--cream); }
.inactive-songs-toggle-label input { width: 18px; height: 18px; accent-color: var(--amber); }
.inactive-songs-toggle-label input:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.song-status { margin-left: var(--s8); vertical-align: middle; }
.song-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s8); margin-bottom: var(--s16); }
.song-search-label { grid-column: 1 / -1; }
.song-search-input { min-width: 0; min-height: var(--tap-target); }
.song-search-submit, .song-search-clear { min-height: var(--tap-target); }
.performance-history { margin-top: var(--s24); border-top: 1px solid var(--hairline); }
.performance-history > summary { min-height: var(--tap-target); display: flex; align-items: center; justify-content: space-between; gap: var(--s8); cursor: pointer; font-weight: 600; }
.performance-history-summary { color: var(--muted); font-size: 12px; font-weight: 400; text-align: right; }
.performance-history-panel { padding: 8px 12px; margin-bottom: var(--s16); }
.performance-history .history-row { min-height: 0; padding: 2px 10px; }
/* Drive status on the song page's Files section. One shape for every condition
   (SongFilesPanel decides the words). Urgency is the amber left rule plus the 7%
   wash already used by the NEXT-show row — never --red, which DESIGN.md rations to
   "over set target" and "played here last time". */
.drive-status { display: flex; flex-direction: column; gap: var(--s8); }
.drive-status-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); }
.drive-status-text { color: var(--muted); font-size: 13.5px; margin: 0; }
.drive-status-text strong { color: var(--text); font-weight: 600; }
.drive-status-actions { display: flex; align-items: center; gap: var(--s16); flex-wrap: wrap; }
/* These are the recovery controls, not words in a sentence, so they carry a real
   44px target (DESIGN.md, binding) while staying borderless amber text — the same
   trade .linkbtn already makes for buttons. */
.drive-status-actions a { display: inline-flex; align-items: center;
  min-height: var(--tap-target); }
.drive-status.needs-action { background: var(--amber-wash); border-left: 2px solid var(--amber);
  border-radius: var(--r-chip); margin: calc(var(--s8) * -1) calc(var(--s8) * -1);
  padding: var(--s8) var(--s8) var(--s8) 12px; }
.drive-status.needs-action .drive-status-tag { color: var(--amber); }

.song-state-panel { display: flex; align-items: center; justify-content: space-between; gap: var(--s16); margin-top: var(--s24); padding-top: var(--s16); border-top: 1px solid var(--hairline); color: var(--muted); }
.song-state-panel p { margin: 0; }
.song-state-panel form { flex: 0 0 auto; }

/* stamps: the one remaining is the "upcoming" mark on a song page (DESIGN.md) */
.stamp { font-family: var(--mono); font-size: 12px; }
.stamp.stale { color: var(--amber); font-weight: 600; }

/* ---- Shows list ---- */
.show-next { border: 1px solid var(--amber); background: var(--amber-wash);
  border-radius: var(--r-panel); }
.year-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: var(--s16) 6px var(--s8); border-bottom: 1px solid var(--hairline); }
.year-head .year-count { color: color-mix(in srgb, var(--muted) 65%, var(--bg)); }
summary.year-head { cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
summary.year-head::-webkit-details-marker { display: none; }
summary.year-head::after { content: "\25BE"; font-size: 10px; line-height: 1;
  color: color-mix(in srgb, var(--muted) 55%, var(--bg)); transition: transform .15s ease; }
.year-group:not([open]) > summary.year-head::after { transform: rotate(-90deg); }
summary.year-head:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.badge { font-family: var(--mono); font-size: 12px; color: var(--amber); font-weight: 600; }

/* ---- Editor ---- */
.editor-head { display: flex; min-width: 0; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: var(--s16); margin-bottom: var(--s16); }
.editor-head .library-tally { color: var(--muted); font-size: 12px; }
.clock { font-family: var(--mono); font-weight: 800; font-size: 14px; background: var(--raised);
  border: 1px solid var(--amber); color: var(--amber); padding: 6px 14px; border-radius: var(--r-control);
  box-shadow: 0 0 18px rgba(255,180,84,.15); }
.clock.over { border-color: var(--red); color: var(--red); box-shadow: 0 0 18px rgba(255,107,74,.15); }
.clock[aria-busy="true"] { opacity: .5; }
.set-block { margin-bottom: var(--s24); }
.set-head {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  z-index: var(--layer-set-head);
  background: var(--bg);
  padding: 6px 0;
  margin-bottom: var(--s8);
  border-bottom: 1px solid var(--hairline);
}
/* The Blind Challenge screens also use .set-head — title beside a chip, with an
   optional full-width "without cut:" line. Only the editor's head is the single
   stacked column the meter needs, so that shape lives on its own class. */
.set-head-meter { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 6px 0 9px;
  align-items: stretch; }
.set-alternative { grid-column: 1 / -1; min-width: 0; color: var(--muted); font-size: 12px; }
.set-head-top { display: flex; min-width: 0; align-items: baseline;
  justify-content: space-between; gap: var(--s8); }
.set-window { min-width: 0; color: var(--muted); font-size: 12px; text-align: right; }
.set-title { font-weight: 700; font-size: 16px; }

/* The meter: a landing zone one song wide either side of the target. The fill
   is grey short of it, amber inside, red past it — red means one thing, "more
   than a song long". No glow; the app allows exactly one and it is the clock. */
.set-meter { position: relative; height: 7px; border-radius: 4px;
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline); overflow: hidden; }
.set-meter-zone { position: absolute; top: 0; bottom: 0;
  background: rgba(232, 234, 237, .11);
  box-shadow: inset 1px 0 0 rgba(154, 163, 173, .55), inset -1px 0 0 rgba(154, 163, 173, .55); }
.set-meter-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px 0 0 4px; }
.set-meter-fill.none, .set-meter-fill.short { background: var(--muted); }
.set-meter-fill.ontime { background: var(--amber); }
.set-meter-fill.long { background: var(--red); }
/* `overflow` (total > scale) and the `long`/`ontime`/`short` verdict are
   independent — a set can be clipped by the track's scale while its delta is
   still inside the landing zone (a short set, or a heavily-padded target,
   with a wide song unit). Red on the clipped edge must stay reserved for the
   one true "more than a song long" state, so only `.long.overflow` gets red.
   An on-time (or short) set that still clips needs *some* mark — a bare edge
   would silently hide that the bar's real value runs past what's drawn — so
   it gets the same inset in --amber, the normal-state colour, rather than
   red or a colourless border that would look like a rendering glitch. */
.set-meter-fill.long.overflow { border-radius: 4px; box-shadow: inset -2px 0 0 var(--red); }
.set-meter-fill.overflow:not(.long) { border-radius: 4px; box-shadow: inset -2px 0 0 var(--amber); }

.set-meter-read { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s8); font-size: 12px; color: var(--muted); }
.set-meter-read[aria-busy="true"] { opacity: .5; }
.set-meter-figs { min-width: 0; }
.set-meter-figs b { color: var(--text); font-weight: 700; font-size: 13px; }
.set-verdict.ontime, .set-verdict.short { color: var(--amber); }
.set-verdict.long { color: var(--red); }
.set-verdict.unknown { color: var(--muted); }
.song-cues { display: flex; min-width: 0; align-items: center; flex-wrap: wrap;
  gap: 3px var(--s8); margin-top: 2px; }
.song-debut-stamp {
  display: inline-block;
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  padding: 2px 5px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}
.song-debut-stamp { border-color: rgba(255,180,84,.65); color: var(--amber); }
[data-role="challenge-reveal"] .timing-role,
[data-role="challenge-merged-history"] .timing-role {
  display: inline-block;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-chip);
  padding: 2px 5px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}
.timing-deadline, .timing-outcome-status {
  flex: 1 0 100%;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}
.timing-outcome-actions { display: flex; flex: 1 0 100%; flex-wrap: wrap;
  gap: var(--s8); margin-top: var(--s4); }
.timing-outcome-actions form { display: inline-flex; }
.drag { min-width: var(--tap-target); min-height: var(--tap-target); display: inline-flex; align-items: center;
  justify-content: center; color: var(--muted); cursor: grab; font-size: 14px; touch-action: none; padding: 2px 4px; }
.drag:hover { color: var(--amber); }
.setlist-item-row {
  min-height: var(--tap-target);
  flex-wrap: nowrap;
  gap: var(--s8);
  padding: 0 var(--s4);
}
.setlist-item-row .drag,
.setlist-item-row .num,
.setlist-item-row .remove-btn { flex: 0 0 auto; }
.setlist-item-title {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--s4);
}
.setlist-item-title > :first-child { min-width: 0; overflow-wrap: anywhere; }
.setlist-item-title .row-song-link { justify-content: flex-start; }
/* The row's quiet middle — who sings it, and the cues. Its own slot rather than
   a tail on the title, so a long title shortens on its own instead of folding
   the cues onto a line of their own and making the row taller. */
.setlist-item-meta {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--s4);
}
.row-singer { color: var(--muted); font-size: 12px; }
.setlist-item-meta > .row-singer::before { content: "·"; margin-right: var(--s4); }
.setlist-item-cues { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); }
.cut-song-form { display: inline-flex; min-width: 0; max-width: 100%; }
.cut-song-control {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4) var(--s8);
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.cut-song-control:hover { border-color: var(--amber); color: var(--amber); }
.cut-song-control.is-selected {
  border-style: dashed;
  color: var(--text);
  font-weight: 700;
  letter-spacing: .05em;
}
.cut-song-control:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
/* The compact form used on dense setlist rows: the visible box is 26px so the
   control is quieter than the key beside it, while the button itself still fills
   the row's 44px height to keep the touch target. The selected state grows a
   mono label so the glyph never carries the meaning alone. */
.cut-song-chip {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  padding: 0;
  border: 0;
  letter-spacing: normal;
}
.cut-song-chip .cut-song-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  white-space: nowrap;
}
.cut-song-chip:hover { color: var(--amber); }
.cut-song-chip:hover .cut-song-box { border-color: var(--amber); }
.cut-song-chip.is-selected .cut-song-box { border-style: dashed; }
.cut-song-chip:focus-visible { outline: none; }
.cut-song-chip:focus-visible .cut-song-box { outline: 2px solid var(--amber); outline-offset: 1px; }
.scissors-icon { display: block; width: 12px; height: 12px; flex: 0 0 auto; }
/* "✂ IF AFTER 2:00P" reads best, but the words cost ~55px and a phone row has
   none to spare — below the breakpoint the chip keeps the time and drops the
   preposition so the marked row still fits on one line. The button's aria-label
   says "cut if after 2:00" either way, so nothing is lost to a screen reader. */
@media (max-width: 560px) { .cut-song-prefix { display: none; } }
.setlist-item-cues .song-cues { margin-top: 0; }
.setlist-item-cues .song-cues:empty { display: none; }
.setlist-item-facts { flex: 0 0 auto; display: flex; align-items: center; gap: 0; }
.setlist-item-facts .key { margin-right: var(--s4); }
.setlist-item-facts .inline-edit > summary {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.setlist-item-row .remove-form { margin-left: 0; }
.setlist-item-row .inline-gap-edit > .gap-chip { padding: 0 var(--s4); line-height: 1; }
.inline-gap-edit .popover { right: 0; left: auto; transform: none; }
.break-row { border: 1px dashed var(--hairline); background: var(--surface); text-align: center;
  color: var(--muted); font-family: var(--mono); font-size: 12px; padding: 8px; border-radius: 6px; margin: 4px 0; }
.sortable-ghost { opacity: .4; }
.library { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-panel); padding: var(--s16); }
.library-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s8); }
.library-title-row h2 { font-size: 18px; }
.library-head .field { margin-bottom: var(--s8); }
.library-head .library-count { margin: var(--s8) 0 0; }
.lib-row { display: flex; align-items: center; gap: var(--s8); padding: 7px 8px; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.lib-row[hidden] { display: none; }
.lib-row:last-child { border-bottom: none; }
.lib-row .add { min-width: var(--tap-target); min-height: var(--tap-target); font-family: var(--mono); font-size: 11px; color: var(--amber); border: 1px solid var(--hairline);
  border-radius: 3px; padding: 1px 6px; background: none; cursor: pointer; }
.lib-row .add:hover { border-color: var(--amber); }
.search { width: 100%; min-height: var(--tap-target); font-family: var(--sans); font-size: 16px; padding: 8px 10px;
  background: var(--raised); color: var(--text); border: 1px solid var(--hairline);
  border-radius: var(--r-control); margin-bottom: var(--s8); }
.search:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.editor-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s24); align-items: start; }

/* ---- Blind challenge reveal ---- */
.challenge-reveal { display: grid; gap: var(--s24); }
.challenge-reveal-head { display: grid; gap: var(--s4); }
.challenge-consensus { border-color: var(--amber); background: var(--amber-wash); }
.challenge-consensus .section-label { margin: 0 0 var(--s8); color: var(--amber); }
.challenge-consensus h2 { font-size: 21px; }
.challenge-consensus p:last-child { margin-top: var(--s8); color: var(--muted); }
.challenge-section { min-width: 0; }
.challenge-section > .section-label { margin: 0 0 var(--s8); }
.challenge-row-list { min-width: 0; border: 1px solid var(--hairline); border-radius: var(--r-panel); overflow: hidden; }
.challenge-comparison-row { min-width: 0; display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(120px, 1fr));
  gap: var(--s8) var(--s16); align-items: center; min-height: 56px; padding: 8px 12px; }
.challenge-comparison-row:nth-child(odd), .challenge-unique-row:nth-child(odd) { background: var(--raised); }
.challenge-row-title { min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.challenge-blend-placement { color: var(--amber); }
.challenge-source-placement { color: var(--muted); font-size: 12px; }
.challenge-archive-warning { color: var(--amber); font-size: 12px; font-weight: 600; }
.challenge-unique-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s16); }
.challenge-unique-pile { min-width: 0; padding: var(--s16); border: 1px solid rgba(255, 180, 84, .45);
  border-radius: var(--r-panel); background: var(--surface); }
.challenge-unique-pile > h3 { font-size: 17px; }
.challenge-unique-pile > .mono { margin-bottom: var(--s8); color: var(--amber); font-size: 12px; }
.challenge-unique-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--s8); align-items: center; min-height: 52px; padding: 6px 10px; }
.challenge-unique-row strong { min-width: 0; overflow-wrap: anywhere; }
.challenge-unique-row .mono { color: var(--muted); font-size: 12px; }
.challenge-unique-row .challenge-archive-warning { grid-column: 1 / -1; }
.challenge-resolution { padding: var(--s16); color: var(--muted); }
.challenge-resolution-help { margin-top: var(--s4); }
.challenge-method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); margin-top: var(--s16); }
.challenge-method-grid form { min-width: 0; }
.challenge-method { width: 100%; min-height: 100%; display: grid; gap: var(--s4); text-align: left; white-space: normal; }
.challenge-method span { color: var(--muted); font-weight: 400; }
.challenge-resolution-head, .challenge-turn-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s16); }
.challenge-resolution-head .section-label, .challenge-turn-head .section-label { margin: 0 0 var(--s4); }
.challenge-decision-list { display: grid; gap: var(--s4); margin-top: var(--s16); }
.challenge-decision-row { min-width: 0; min-height: 56px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s16); padding: 8px 10px; border-bottom: 1px solid var(--hairline); }
.challenge-decision-row > div:first-child { min-width: 0; display: grid; }
.challenge-decision-actions { display: flex; gap: var(--s8); flex-wrap: wrap; }
.challenge-decision-badge { grid-column: 1 / -1; color: var(--amber); font-family: var(--mono); font-size: 12px; }
.challenge-auto-status { display: flex; flex-wrap: wrap; gap: var(--s8) var(--s16); margin-top: var(--s16); color: var(--muted); font-size: 12px; }
.challenge-auto-status strong { color: var(--text); }
.challenge-ranking { display: grid; gap: var(--s16); margin-top: var(--s16); }
.challenge-ranking form { display: grid; gap: var(--s16); }
.challenge-ranking-list { display: grid; border: 1px solid var(--hairline); border-radius: var(--r-control); overflow: hidden; }
.challenge-ranking-row { min-width: 0; min-height: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--s8); padding: 6px 10px; border-bottom: 1px solid var(--hairline); background: var(--surface); }
.challenge-ranking-row:nth-child(odd) { background: var(--raised); }
.challenge-ranking-row:last-child { border-bottom: 0; }
.challenge-ranking-row:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.challenge-ranking-row > div:first-of-type { min-width: 0; display: grid; gap: 2px; }
.challenge-ranking-row strong { overflow-wrap: anywhere; }
.challenge-ranking-row .mono { color: var(--muted); font-size: 12px; }
.challenge-ranking-handle { min-width: var(--tap-target); min-height: var(--tap-target); padding: 6px; border: 1px solid var(--hairline);
  border-radius: var(--r-control); background: transparent; color: var(--muted); cursor: grab; font: 600 12px var(--sans); }
.challenge-ranking-handle:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.challenge-rank-toggle { min-height: var(--tap-target); display: inline-flex; align-items: center; gap: var(--s4); color: var(--muted); font-size: 12px; }
.challenge-ranking-actions { display: flex; gap: var(--s4); }
.challenge-ranking-actions .btn { min-width: var(--tap-target); min-height: var(--tap-target); padding: 6px 10px; }
.challenge-auto-toggle { min-height: var(--tap-target); display: inline-flex; align-items: center; gap: var(--s8); font-weight: 600; }
.challenge-merge-ready { display: flex; justify-content: space-between; align-items: center; gap: var(--s16);
  margin-top: var(--s16); padding-top: var(--s16); border-top: 1px solid var(--hairline); color: var(--text); }
.challenge-merge-drift { max-width: 680px; margin-top: var(--s4); color: var(--amber); font-size: 12px; }
.challenge-merge-notice { display: flex; justify-content: space-between; align-items: center; gap: var(--s16);
  margin-bottom: var(--s16); padding: var(--s16); }
.challenge-merge-notice > div { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; }
.challenge-status { color: var(--amber); font-family: var(--mono); font-size: 12px; }
.challenge-history { display: grid; gap: var(--s8); margin-top: var(--s16); }
.challenge-history-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--s8) var(--s16); padding: var(--s16); color: var(--text); }
.challenge-history-row:hover { text-decoration: none; border-color: var(--amber); }
.challenge-history-row span { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.challenge-original-drafts { display: grid; gap: var(--s8); }
.challenge-original-draft { min-width: 0; border: 1px solid var(--hairline); border-radius: var(--r-panel); background: var(--surface); }
.challenge-original-draft > summary { min-height: var(--tap-target); padding: 10px 14px; cursor: pointer; font-weight: 600; }
.challenge-original-draft[open] > summary { border-bottom: 1px solid var(--hairline); color: var(--amber); }
.challenge-original-sets { display: grid; gap: var(--s24); min-width: 0; padding: var(--s16); }
.challenge-original-set { min-width: 0; }
.challenge-original-set .set-head .mono { color: var(--muted); font-size: 12px; }

/* ---- Forms / auth ---- */
.field { margin-bottom: var(--s16); }
.field label { display: block; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.field :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  font-family: var(--sans);
  font-size: 16px;
  min-height: var(--tap-target);
  padding: 9px 11px;
  width: 100%;
  max-width: 340px;
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
}
.field :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}
.field-error { margin-top: var(--s4); color: var(--red); font-size: 12px; }
.field textarea { min-height: 96px; resize: vertical; }
.song-videos-fieldset { min-width: 0; max-width: 100%; }
.song-video-row { min-width: 0; flex-wrap: wrap; }
.song-video-row > :not(img) { min-width: 0; }
.show-time-group, .show-payment-group, .show-public-fields { min-width: 0; margin: 0 0 var(--s16); padding: 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-panel); }
.show-time-group legend, .show-payment-group legend, .show-public-fields legend { padding: 0 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.show-public-fields > .field-hint { margin: var(--s8) 0 var(--s16); line-height: 1.5; }
.show-public-fields .field { margin-bottom: 0; }
.public-show-timing { min-width: 0; margin: var(--s8) 0 0; padding: 0; border: 0; }
.public-show-timing[hidden], .public-release-date[hidden] { display: none; }
.public-show-timing legend { margin-bottom: var(--s4); color: var(--muted); font-size: 12px;
  font-weight: 600; letter-spacing: 0; text-transform: none; }
.public-show-timing-option { min-height: var(--tap-target); display: inline-flex; align-items: center;
  gap: var(--s8); margin-right: var(--s16); cursor: pointer; font-size: 16px; }
.public-show-timing-option input { width: 20px; height: 20px; accent-color: var(--amber); }
.public-show-timing-option:focus-within { outline: 2px solid var(--amber); outline-offset: 2px;
  border-radius: var(--r-chip); }
.public-release-date { margin-top: var(--s8); }
.public-release-date input[type="date"] { font-family: var(--mono); color-scheme: dark; }
.check-row { min-height: var(--tap-target); display: inline-flex; align-items: center; gap: var(--s8);
  cursor: pointer; font-size: 16px; font-weight: 600; }
.check-row input { width: 20px; height: 20px; accent-color: var(--amber); }
.check-row:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: var(--r-chip); }
.show-time-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s8); align-items: end; }
.show-time-fields .field { min-width: 0; margin: 0; }
.show-time-fields input[type="time"] { min-height: 44px; max-width: none; font-family: var(--mono);
  font-variant-numeric: tabular-nums; color-scheme: dark; }
.show-time-connector { min-height: 44px; display: flex; align-items: center;
  color: var(--muted); font-size: 12px; }
.show-time-summary { margin-top: var(--s8); color: var(--amber); font-size: 12px; }
.payment-input { display: flex; max-width: 340px; }
.payment-input .currency-prefix { width: 36px; min-height: 44px; display: grid; place-items: center;
  background: var(--surface); color: var(--muted); border: 1px solid var(--hairline);
  border-right: 0; border-radius: var(--r-control) 0 0 var(--r-control); font-family: var(--mono); }
.payment-input input { min-width: 0; min-height: 44px; max-width: none; flex: 1;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  border-radius: 0 var(--r-control) var(--r-control) 0; }
.payment-readout { min-height: 44px; margin: 0; padding: 11px 12px; border: 1px solid var(--hairline);
  border-radius: var(--r-control); background: var(--surface); color: var(--text); }
.bulk-gap-control { display: flex; align-items: flex-end; gap: var(--s8); flex-wrap: wrap;
  margin: 0 0 var(--s16); }
.bulk-gap-field { margin-bottom: 0; }
.bulk-gap-input { display: flex; align-items: center; gap: var(--s8); }
.bulk-gap-field input { width: 92px; max-width: none; font-family: var(--mono);
  font-variant-numeric: tabular-nums; color-scheme: dark; }
.bulk-gap-unit { font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.bulk-gap-control > .btn { min-height: var(--tap-target); }
.bulk-gap-hint { flex: 1 1 320px; margin: 0 0 3px; font-size: 12px; line-height: 1.4; }
.flash { border-radius: var(--r-control); padding: 9px 14px; margin-bottom: var(--s16); font-size: 14px; }
.flash.notice { background: rgba(55,194,160,.12); border: 1px solid rgba(55,194,160,.4); color: var(--teal); }
.flash.alert { background: rgba(255,107,74,.12); border: 1px solid rgba(255,107,74,.4); color: var(--red); }
.empty { text-align: center; padding: var(--s48) var(--s24); color: var(--muted); }
.empty .serif-italic { font-size: 18px; display: block; margin-bottom: var(--s16); }
.auth-wrap { max-width: 360px; margin: 80px auto; }
.page-form { max-width: 560px; margin-top: var(--s16); }
.form-actions { display: flex; gap: var(--s8); align-items: center; flex-wrap: wrap; }
.form-actions .btn { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.show-form details.show-basics,
.show-form details.show-optional-fields { min-width: 0; margin: 0 0 var(--s16); padding: 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-panel); }
.show-form details > summary { min-height: var(--tap-target); display: flex; align-items: center; gap: var(--s8);
  cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.show-form details > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: var(--r-control); }
.show-form .show-form-summary-value { min-width: 0; margin-left: auto; color: var(--muted); font: 600 11px var(--mono);
  font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.show-form .show-form-disclosure-body { min-width: 0; padding-top: var(--s8); }
.show-form .show-form-disclosure-body > :last-child { margin-bottom: 0; }
.show-form .show-form-actions { margin-top: var(--s24); }
.show-form .show-form-actions-sticky { position: sticky; bottom: 0; z-index: var(--layer-set-head);
  padding: var(--s8); border: 1px solid var(--hairline); border-radius: var(--r-panel);
  background: var(--surface); }
.auth-brand { display: inline-block; font-size: 22px; }
.auth-panel { margin-top: 20px; }
.auth-help { margin-top: var(--s16); }
.copy-field { min-width: 0; margin: 0; font-family: var(--mono); }
.field :is(input.copy-field.mono, select.band-switch) { font-family: var(--mono); }
.break-anywhere { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.copy-row { display: flex; gap: var(--s8); align-items: center; }
.copy-row > :first-child { min-width: 0; }
.copy-row .search { flex: 1; }

/* ---- Button variants (quiet, slim, destructive) ---- */
.btn-slim { min-width: var(--tap-target); min-height: var(--tap-target); padding: 5px 10px; font-size: 12px; }
.btn-plain { background: none; border-color: transparent; color: var(--muted); }
.btn-plain:hover { color: var(--text); border-color: var(--hairline); text-decoration: none; }
.btn-danger { background: none; color: var(--red); border: 1px solid rgba(255, 107, 74, .5); }
.btn-danger:hover { background: rgba(255, 107, 74, .12); }
.head-actions { display: flex; gap: var(--s8); flex-wrap: wrap; align-items: center; }
.email-band-button { min-height: var(--tap-target); }
.field-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.drive-service-email { font-size: 12px; }
.field-pair { display: flex; gap: var(--s16); align-items: start; }
.field-pair > .field { flex: 1 1 0; min-width: 0; }

/* ---- Band Profile ---- */
.band-profile-links { display: flex; flex-wrap: wrap; gap: var(--s8) var(--s16);
  margin-top: var(--s8); }
.band-profile-links a { min-width: var(--tap-target); min-height: var(--tap-target); display: inline-flex;
  align-items: center; font-size: 13.5px; font-weight: 600; }
.band-bookends-grid a, .band-memory-grid a { min-width: var(--tap-target); min-height: var(--tap-target);
  display: inline-flex; align-items: center; }
.band-profile-links a:focus-visible, .band-bookends-grid a:focus-visible,
.band-memory-grid a:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.band-summary-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--s24); border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline); }
.band-summary-rail > div { min-width: 0; padding: var(--s16); }
.band-summary-rail > div + div { border-left: 1px solid var(--hairline); }
.band-summary-rail .summary-label { display: block; color: var(--muted); font-size: 11px;
  font-weight: 600; letter-spacing: .14em; line-height: 1.35; text-transform: uppercase; }
.band-summary-rail strong { display: block; margin-top: var(--s4); font-size: 26px;
  line-height: 1.2; }
.band-summary-rail > .serif-italic { grid-column: 1 / -1; padding: var(--s16); }
.band-summary-note { margin-top: var(--s8); }
.band-profile-data-note { font-size: 12px; line-height: 1.5; }
.band-section, .band-now-grid { min-width: 0; margin-top: var(--s32); padding-top: var(--s24);
  border-top: 1px solid var(--hairline); }
.band-section > h2, .band-now-item > h2, .band-memory-grid h2 {
  margin-bottom: var(--s16); color: var(--muted); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.band-material-links { display: flex; flex-wrap: wrap; gap: var(--s8); }
.material-door { display: inline-flex; min-width: 180px; min-height: 56px; align-items: center;
  padding: 0 var(--s16); background: var(--raised); border: 1px solid var(--hairline);
  border-radius: var(--r-control); color: var(--text); font-weight: 600; }
.material-door:hover { border-color: var(--amber); color: var(--amber); text-decoration: none; }
.material-door:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.material-door.is-muted { color: var(--muted); }
.band-material-links:empty + .serif-italic { margin-top: 0; }
.band-now-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.band-now-item { min-width: 0; padding-right: var(--s32); }
.band-now-item + .band-now-item { padding-right: 0; padding-left: var(--s32);
  border-left: 1px solid var(--hairline); }
.band-now-item h3 { margin-bottom: var(--s8); font-size: 17px; overflow-wrap: anywhere; }
.band-now-item p { margin-top: var(--s4); }
.band-now-item > a { display: inline-flex; min-height: var(--tap-target); align-items: center;
  margin-top: var(--s8); }
.band-earnings { margin: 0; }
.band-earnings > div { display: flex; min-height: 40px; align-items: center;
  justify-content: space-between; gap: var(--s16); border-bottom: 1px solid var(--hairline); }
.band-earnings dt { color: var(--muted); }
.band-earnings dd { text-align: right; }
.band-bookends-grid, .band-memory-grid { display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s32); }
.band-bookends-grid h3 { margin-bottom: var(--s8); font-size: 17px; }
.band-bookends-grid p, .band-memory-grid > div > p, .band-lineup > p {
  display: flex; min-height: 56px; align-items: center; justify-content: space-between;
  gap: var(--s16); padding: var(--s8); overflow-wrap: anywhere;
}
.band-bookends-grid p:nth-of-type(odd), .band-memory-grid > div > p:nth-of-type(odd),
.band-lineup > p:nth-of-type(odd) { background: var(--raised); }
.band-bookends-grid p > .mono, .band-memory-grid p > .mono,
.band-lineup p > .mono { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.band-activity-controls { display: flex; flex-wrap: wrap; gap: var(--s8);
  margin-bottom: var(--s16); }
.band-activity-controls[hidden] { display: none; }
.band-activity-controls .btn { min-height: var(--tap-target); }
.band-activity-viewport { width: 100%; max-width: 100%; overflow-x: auto;
  border-block: 1px solid var(--hairline); background: var(--surface); }
.band-activity-viewport:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.band-activity-svg { display: block; width: 100%; height: auto; }
.chart-grid { stroke: var(--hairline); stroke-width: 1; }
.chart-axis-label, .chart-value { fill: var(--muted); font-family: var(--mono);
  font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-value { fill: var(--text); font-weight: 600; }
.show-series { stroke: var(--amber); stroke-width: 2.5; }
.debut-series { stroke: var(--text); stroke-width: 2; stroke-dasharray: 6 5; }
.show-series-marker { fill: var(--amber); }
.debut-series-marker { fill: var(--text); }
.activity-exact-values { margin-top: var(--s16); }
.activity-exact-values > summary { min-height: var(--tap-target); display: inline-flex;
  align-items: center; color: var(--muted); font-weight: 600; cursor: pointer; }
.activity-exact-values > summary:focus-visible { outline: 2px solid var(--amber);
  outline-offset: 1px; }
.band-activity-table { width: 100%; margin-top: var(--s8); border-collapse: collapse;
  font-size: 12px; }
.band-activity-table[hidden] { display: none; }
.band-activity-table caption { padding: var(--s8) 0; color: var(--muted);
  font-weight: 600; text-align: left; }
.band-activity-table :is(th, td) { padding: 9px 10px; text-align: right; }
.band-activity-table :is(th, td):first-child { text-align: left; }
.band-activity-table th { color: var(--muted); font-weight: 600; }
.band-activity-table th[scope="row"] { color: var(--text); font-family: var(--mono);
  font-variant-numeric: tabular-nums; }
.band-activity-table tbody tr:nth-child(odd) { background: var(--raised); }

/* ---- Band Settings ---- */
.band-profile-header { display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s16); min-width: 0; }
.band-profile-header > * { min-width: 0; }
.band-settings-doorway { margin: var(--s16) 0 var(--s24); }
.band-settings-doorway .btn { min-height: var(--tap-target); }
.band-settings-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--s32); margin-top: var(--s24); min-width: 0; }
.band-settings-index { position: sticky; top: 0; align-self: start; display: flex;
  flex-direction: column; gap: var(--s8); min-width: 0; }
.band-settings-index a { min-height: var(--tap-target); display: flex; align-items: center;
  padding: 0 var(--s8); border-radius: var(--r-control); }
.band-settings-index a:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.settings-home { max-width: 620px; }
.settings-home-row { justify-content: space-between; gap: var(--s16); border: 1px solid var(--hairline); }
.settings-home-copy { display: grid; gap: 2px; min-width: 0; }
.settings-home-title { font-weight: 600; }
.settings-home-summary { color: var(--muted); font-size: 12px; }
.settings-home-action { flex: 0 0 auto; color: var(--amber); font-size: 12px; font-weight: 600; }
.settings-home-row:hover { background: var(--raised); }
.settings-home-back { align-self: start; }
.band-settings-content { min-width: 0; }
.band-settings-section { min-width: 0; scroll-margin-top: 0; padding-bottom: var(--s32);
  margin-bottom: var(--s32); border-bottom: 1px solid var(--hairline); overflow-wrap: anywhere; }
.band-settings-section:last-child { margin-bottom: 0; }
.band-settings-section h2 { margin-bottom: var(--s8); font-size: 17px; }
.band-settings-section .settings-form { margin-top: var(--s16); }
.band-settings-section .field input { min-height: var(--tap-target); }
.band-settings-section .btn { min-height: var(--tap-target); }
.settings-member-list, .settings-pending-list { padding: var(--s8) 12px; }
.settings-member-help { margin-top: 10px; }
.inline-action-form { display: inline; }
.settings-section-intro { margin-bottom: var(--s16); }
.settings-status { margin-top: var(--s8); font-size: 12px; }
.drive-help { margin: var(--s16) 0; }
.drive-help summary { min-height: var(--tap-target); display: inline-flex; align-items: center;
  color: var(--muted); font-weight: 600; cursor: pointer; }
.drive-help summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.drive-setup-list { margin: var(--s8) 0 0 var(--s24); font-size: 12px; line-height: 1.7; }
.drive-not-configured { margin: var(--s16) 0; font-size: 12px; }
.public-schedule-preview { display: block; width: 100%; min-height: 420px;
  margin: var(--s16) 0; border: 1px solid var(--hairline); border-radius: var(--r-control); }
.public-schedule-show-list { margin-bottom: var(--s16); border-block: 1px solid var(--hairline); }
.public-schedule-show-row { display: flex; min-height: var(--tap-target); align-items: center;
  gap: var(--s8); padding: var(--s8); cursor: pointer; }
.public-schedule-show-row:nth-child(odd) { background: var(--raised); }
.public-schedule-show-row input { flex: 0 0 auto; width: 20px; height: 20px; }
.public-schedule-show-row > span { display: flex; min-width: 0; flex: 1 1 auto;
  align-items: baseline; justify-content: space-between; gap: var(--s8); }
.public-schedule-show-name { min-width: 0; overflow-wrap: anywhere; }
.public-schedule-show-row .mono { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.public-schedule-copy { margin-top: var(--s16); }
.public-schedule-copy .copy-row { align-items: stretch; }
.public-schedule-copy textarea.copy-field { min-width: 0; min-height: 88px;
  resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
.public-schedule-copy input.copy-field { min-width: 0; }
.public-schedule-actions { display: flex; flex-wrap: wrap; gap: var(--s8);
  margin-top: var(--s16); }
.public-schedule-actions form { margin: 0; }

@media (max-width: 560px) {
  .public-schedule-show-row > span { align-items: flex-start; flex-direction: column;
    gap: 0; }
  .public-schedule-copy .copy-row { align-items: stretch; flex-direction: column; }
  .public-schedule-copy .copy-row .btn,
  .public-schedule-actions form,
  .public-schedule-actions .btn { width: 100%; }
}

/* ---- Editor rows: remove, inline edits, gaps (ISSUE-002/006/015/016/022) ---- */
.row { position: relative; }
.remove-form { display: inline; margin-left: 2px; }
.remove-btn { background: none; border: 1px solid transparent; color: var(--muted); font-size: 12px;
  width: var(--tap-target); height: var(--tap-target); border-radius: 4px; cursor: pointer; }
.remove-btn:hover { color: var(--red); border-color: var(--red); }
.remove-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.override-dot { color: var(--amber); margin-left: 3px; }

.inline-edit { display: inline-block; position: relative; }
.inline-edit > summary { list-style: none; cursor: pointer; }
.inline-edit > summary::-webkit-details-marker { display: none; }
.inline-edit > summary:hover { color: var(--amber); }
.inline-edit > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.inline-edit .popover { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--r-control);
  padding: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.inline-form { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.inline-form input, .editor-gap-form input { min-height: var(--tap-target); font-size: 16px; }
.inline-form input[type="text"], .inline-form input[type="number"] { font-family: var(--mono); font-size: 16px;
  padding: 6px 8px; background: var(--bg); color: var(--text); border: 1px solid var(--hairline); border-radius: 6px; }
.inline-form label { font-size: 10px; color: var(--muted); }
.timing-form { display: grid; gap: var(--s8); }
.timing-field { display: flex; align-items: center; justify-content: space-between; gap: var(--s8); }
.timing-field label { flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  color: var(--muted); }
.timing-field input { width: 78px; text-align: center; }
.timing-unit { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.timing-actions { display: flex; justify-content: flex-end; gap: var(--s8); }
.timing-reset-form { display: flex; justify-content: flex-end; margin-top: var(--s4); }
.dur-edit > summary { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.gap-line { display: flex; justify-content: center; margin: -2px 0; }
.gap-chip { font-size: 12px; color: var(--muted); border: 1px solid transparent; border-radius: var(--r-chip);
  padding: 0 8px; line-height: 18px; }
.gap-chip:hover { border-color: var(--hairline); color: var(--text); }
.gap-chip.overridden { color: var(--amber); }
/* The compact form used in the set head: the visible box is 26px so the
   control stays quiet beside the set title, while the link itself still fills
   a 44px hit area to keep the touch target (see .cut-song-chip). */
.gaps-chip {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.gaps-chip .gaps-chip-box {
  display: inline-flex;
  align-items: center;
  height: 26px;
  font-size: 11px; color: var(--muted);
  border: 1px solid var(--hairline); border-radius: var(--r-chip);
  padding: 0 6px; white-space: nowrap;
}
.gaps-chip:hover .gaps-chip-box { color: var(--text); border-color: var(--muted); }
.gap-edit .popover { left: 50%; right: auto; transform: translateX(-50%); }

.set-actions { min-width: 0; flex-wrap: wrap; margin-top: 6px; display: flex; gap: var(--s8); align-items: center; }
.drop-zone { border: 1px dashed var(--hairline); border-radius: var(--r-panel); padding: var(--s24);
  text-align: center; }

.in-set-tag { font-size: 12px; color: var(--teal); border: 1px solid rgba(55, 194, 160, .35);
  border-radius: 3px; padding: 0 4px; margin-left: 6px; vertical-align: 1px; }

.head-actions { min-width: 0; flex-wrap: wrap; }
.add-songs-launcher, .sheet-close { display: none; }
.sheet-enhanced .add-songs-launcher { display: inline-flex; }
.sheet-enhanced .library:not(.sheet-open) { display: none; }
.library.sheet-open {
  position: fixed;
  inset: 0;
  z-index: var(--layer-sheet);
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: var(--surface);
  overscroll-behavior: contain;
}
.library.sheet-open .library-head {
  padding: calc(var(--s16) + env(safe-area-inset-top)) max(var(--s16), env(safe-area-inset-right)) var(--s8) max(var(--s16), env(safe-area-inset-left));
  border-bottom: 1px solid var(--hairline);
}
.library.sheet-open .library-scroll {
  min-height: 0;
  overflow-y: auto;
  padding: var(--s8) max(var(--s16), env(safe-area-inset-right)) calc(var(--s24) + env(safe-area-inset-bottom)) max(var(--s16), env(safe-area-inset-left));
}
.library.sheet-open .sheet-close { display: inline-flex; min-height: var(--tap-target); }
body.sheet-scroll-locked { overflow: hidden; }
.library.sheet-open .lib-row { min-height: 60px; font-size: 16px; }
.library.sheet-open .note { font-size: 16px; }
.library.sheet-open .plays { font-size: 12px; }
.library.sheet-open .in-set-tag { display: none; }
.library.sheet-open .lib-row.is-selected {
  background: #11151a;
  box-shadow: inset 0 8px 18px rgba(0,0,0,.22), inset 0 -8px 18px rgba(0,0,0,.12);
  opacity: .42;
  filter: saturate(.25);
}

/* Booking contacts are a compact private ledger: ordinary rows, quiet show
   history, and direct contact actions kept separate from the edit link. */
.booking-contact-list { margin-top: var(--s24); }
.booking-contact-row .row-main-link { align-items: flex-start; padding-block: 6px; }
.booking-contact-row .row-secondary + .row-secondary { margin-top: 2px; }
.booking-contact-actions { flex: 0 0 auto; }
.booking-contact-unassigned-note { margin: var(--s8) 10px; color: var(--muted); font-size: 12px; }
.booking-contact-inactive > summary { width: 100%; }
.booking-contact-inactive .booking-contact-row { color: var(--muted); }
.booking-contact-inactive .row-primary { color: var(--muted); }
.booking-contact-state { margin-top: var(--s16); }
.booking-contact-fields { min-width: 0; margin: 0 0 var(--s16); padding: 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-panel); }
.booking-contact-fields > legend { padding: 0 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.booking-contact-book-link { min-height: var(--tap-target); display: inline-flex;
  align-items: center; margin-bottom: var(--s8); font-size: 12px; }
.booking-contact-inheritance { margin: calc(-1 * var(--s8)) 0 var(--s16); color: var(--muted); }
.booking-contact-inheritance strong { color: var(--text); }
.booking-contact-new { margin-bottom: var(--s16); }
.booking-contact-new > summary, .booking-relationship-help > summary {
  justify-content: flex-start; color: var(--amber); cursor: pointer; }
.booking-contact-new-fields { min-width: 0; margin-top: var(--s8); padding: var(--s16);
  border-left: 1px solid var(--hairline); }
.booking-contact-new-fields .field:last-child { margin-bottom: 0; }
.booking-contact-suggestions { min-width: 0; margin: 0 0 var(--s16); padding: 12px;
  border-left: 2px solid var(--amber); background: rgba(255, 180, 84, .07); }
.booking-contact-suggestions h3 { margin: 0 0 var(--s4); font-size: 15px; }
.booking-contact-suggestions > p { margin: 0 0 var(--s8); color: var(--muted); }
.booking-contact-suggestions ul { margin: 0 0 var(--s8); padding: 0; list-style: none; }
.booking-contact-suggestions li { min-width: 0; display: flex; align-items: center;
  justify-content: space-between; gap: var(--s8); padding: var(--s8) 0;
  border-bottom: 1px solid var(--hairline); }
.booking-contact-suggestions li > span:first-child { min-width: 0; display: grid; }
.booking-contact-suggestions li .mono { color: var(--muted); overflow-wrap: anywhere; }
.booking-contact-suggestion-inactive { flex: 0 0 auto; }
.booking-contact-relationship { min-width: 0; margin: 0; padding: 0; border: 0; }
.booking-contact-relationship[hidden] { display: none; }
.booking-contact-relationship > legend { display: block; margin-bottom: var(--s4); padding: 0;
  color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.booking-relationship-options { display: flex; align-items: center; gap: var(--s16); flex-wrap: wrap; }
.booking-relationship-options label { gap: var(--s8); cursor: pointer; }
.booking-relationship-options input { width: 18px; height: 18px; accent-color: var(--amber); }
.booking-relationship-help { margin-top: var(--s4); }
.booking-relationship-help p { margin-top: var(--s8); color: var(--muted); font-size: 13.5px; }
.booking-relationship-help strong { color: var(--text); }
/* A row you can take back out keeps the sunk, dimmed look, but the dimming
   moves off the row and onto its text — an actionable − has to read as
   tappable, and opacity on the row would take the button down with it. */
.library.sheet-open .lib-row.is-selected.is-removable { opacity: 1; filter: none; }
.library.sheet-open .lib-row.is-selected.is-removable .lib-title,
.library.sheet-open .lib-row.is-selected.is-removable .row-facts {
  opacity: .42;
  filter: saturate(.25);
}

/* library head + inline new song (ISSUE-001) */
.new-song-inline { margin-top: var(--s8); }
.new-song-inline > summary { font-size: 12px; color: var(--amber); cursor: pointer; list-style: none; }
.new-song-inline > summary::-webkit-details-marker { display: none; }
.new-song-form { margin-top: var(--s8); padding: var(--s16); }
.new-song-form .field input { max-width: none; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- History browsing (ISSUE-021) ---- */
.year-head { position: sticky; top: 0; background: var(--bg); z-index: var(--layer-set-head); }
.dup-link { font-size: 12px; color: var(--muted); padding: 0 6px; }
.dup-link:hover { color: var(--amber); text-decoration: none; }
.play-count { color: var(--amber); font-size: 15px; }

/* Show video: a mono WATCH ↗ stamp, the same signature device as the ×12 play count
   and PLAYED HERE LAST TIME (Luke, 2026-07-29 — replaces the ▶ glyph, so no DESIGN.md
   exception is in play). A direct child of the row, LEFT of the song count: the row
   packs from the right, so an optional control placed after the count drags the count
   sideways on rows that lack it. Muted at rest, amber on hover like the ⧉ beside it. */
.compact-row > .watch-link {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 0 6px;
  white-space: nowrap;
}
.compact-row > .watch-link:hover { color: var(--amber); text-decoration: none; }
.btn.watch-link { white-space: nowrap; }

.danger-zone { border-color: rgba(255, 107, 74, .35); margin-top: var(--s16); }

/* ---- Touch targets ≥44px wherever fingers are the pointer (DESIGN.md) ---- */
@media (pointer: coarse) {
  .bulk-gap-control > .btn { min-height: 44px; }
  .drag, .remove-btn, .lib-row .add { font-size: 16px; }
  .gap-chip { line-height: 28px; padding: 8px 14px; }
  .inline-edit > summary { padding: 8px 6px; }
}

.panel p a, .panel li a {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
}
details > summary, .dup-link, .compact-row > .watch-link {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
}

/* ---- Narrow-screen shell and challenge adaptations ---- */
@media (max-width: 820px) {
  :root { --page-gutter: 16px; }
  .band-now-grid, .band-bookends-grid, .band-memory-grid { grid-template-columns: minmax(0, 1fr); }
  .band-now-item { padding-right: 0; }
  .band-now-item + .band-now-item { margin-top: var(--s24); padding-top: var(--s24);
    padding-left: 0; border-top: 1px solid var(--hairline); border-left: 0; }
  .band-settings-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s16); }
  .band-settings-index { position: static; flex-direction: row; overflow-x: auto;
    max-width: 100%; padding-bottom: var(--s8); }
  .band-settings-index a { flex: 0 0 auto; white-space: nowrap; }
  .settings-home { flex-direction: column; overflow: visible; padding-bottom: 0; }
  .settings-home .settings-home-row { flex: 1 1 auto; white-space: normal; }
  .band-profile-header { flex-wrap: wrap; }
  .inline-edit .popover {
    width: min(320px, calc(100vw - (2 * var(--page-gutter))));
    max-width: calc(100vw - (2 * var(--page-gutter)));
  }
  .setlist-item-row .inline-edit { position: static; }
  .setlist-item-row .inline-edit .popover { right: 0; left: 0; transform: none; }
  .inline-form { min-width: 0; flex-wrap: wrap; white-space: normal; }
  .new-set-edit .popover { right: 0; left: auto; transform: none; }
  .challenge-comparison-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-block: 10px; }
  .challenge-blend-placement { margin-top: var(--s4); }
  .challenge-unique-grid { grid-template-columns: minmax(0, 1fr); }
  .challenge-method-grid { grid-template-columns: minmax(0, 1fr); }
  .challenge-resolution-head, .challenge-turn-head, .challenge-decision-row, .challenge-merge-ready {
    align-items: stretch; flex-direction: column;
  }
  .challenge-ranking-row { grid-template-columns: minmax(0, 1fr); }
  .challenge-ranking-actions { width: 100%; }
  .challenge-ranking-actions .btn { flex: 1; }
  .challenge-merge-notice { align-items: stretch; flex-direction: column; }
  .challenge-history-row { grid-template-columns: minmax(0, 1fr); }
  .challenge-decision-actions, .challenge-decision-actions form, .challenge-decision-actions .btn,
  .challenge-merge-ready form, .challenge-merge-ready .btn { width: 100%; }
}

@media (max-width: 640px) {
  .band-summary-rail > div { padding: var(--s16) var(--s8); }
  .band-summary-rail strong { font-size: 21px; }
  .band-summary-rail .summary-label { font-size: 11px; letter-spacing: .1em; }
  .band-material-links { display: grid; grid-template-columns: minmax(0, 1fr); }
  .material-door { width: 100%; min-width: 0; }
  .band-activity-table :is(th, td) { padding-inline: var(--s4); }
}

@media (max-width: 560px) {
  .band-choice {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s4) var(--s8);
  }
  .band-choice-facts { grid-column: 1; grid-row: 2; white-space: normal; }
  .band-choice-arrow { grid-column: 2; grid-row: 1 / span 2; }
  .band-create-panel,
  .band-create-panel .field input { width: 100%; max-width: none; }

  /* The phone setlist row. The title owns line one outright — nothing shares
     it, so it truncates rather than wrapping and every song row is the same
     68px. Line two carries the singer, the cues and every control the row
     still has, each at its full 44px. Breaks keep the single flex line. */
  .setlist-item-row:not(.is-break) {
    display: grid;
    /* The meta column gets a floor, not just a share. A `1fr` track is filled
       from what is left over, so a long note in the facts column would take its
       space first and clip the cues — including the cut deadline, the one thing
       on the row a musician reads mid-set. 140px holds a marked chip and a
       shortened singer; the note ellipsises into whatever remains. */
    grid-template-columns: auto 20px minmax(140px, 1fr) minmax(0, auto);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--s4);
    row-gap: 0;
    padding-block: 0;
    min-height: 68px;
  }
  .setlist-item-row:not(.is-break) > .drag { grid-column: 1; grid-row: 1 / span 2; }
  .setlist-item-row:not(.is-break) > .num { grid-column: 2; grid-row: 1; }
  .setlist-item-row:not(.is-break) > .setlist-item-title { grid-column: 3 / span 2; grid-row: 1; }
  .setlist-item-row:not(.is-break) > .setlist-item-meta { grid-column: 3; grid-row: 2; }
  .setlist-item-row:not(.is-break) > .setlist-item-facts { grid-column: 4; grid-row: 2; }

  .setlist-item-row:not(.is-break) > .setlist-item-title { flex-wrap: nowrap; }
  /* The single documented exception to the 44px control floor: a song title
     link that spans the whole row is a wide target in the axis a thumb
     actually misses in, and two 44px bands would make an 88px row. */
  .setlist-item-row:not(.is-break) .setlist-item-title .row-song-link {
    flex: 1 1 auto;
    display: block;
    min-width: 0;
    min-height: 24px;
    line-height: 24px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .setlist-item-row:not(.is-break) .inactive-editor-badge { flex: 0 0 auto; }

  /* Both halves of line two hold the row's height at one tap target, with or
     without a cue on the row, so the rhythm never breaks. */
  .setlist-item-row:not(.is-break) > .setlist-item-meta,
  .setlist-item-row:not(.is-break) > .setlist-item-facts {
    min-height: var(--tap-target);
    flex-wrap: nowrap;
    overflow: hidden;
  }
  /* The singer is the one part of line two allowed to give: it shortens to an
     ellipsis so the cues — the scissors deadline especially — keep their full
     width instead of being clipped out of sight. */
  .setlist-item-row:not(.is-break) .setlist-item-cues { flex: 0 0 auto; flex-wrap: nowrap; }
  .setlist-item-row:not(.is-break) .setlist-item-meta > .row-singer {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .setlist-item-row:not(.is-break) .setlist-item-meta > .row-singer::before { content: none; }
  /* A row carrying both cues has more than 320px can hold, and a hard clip
     leaves "SONG DEBU". The deadline is what a musician reads mid-set, so the
     debut stamp is the one that goes; it comes back the moment the row is not
     also the cut song, and on any wider phone. */
  @media (max-width: 380px) {
    .setlist-item-cues:has(.cut-song-chip.is-selected) .song-debut-stamp { display: none; }
  }
  .setlist-item-row:not(.is-break) .row-note {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 520px) {
  .show-time-fields { grid-template-columns: 1fr; }
  .show-time-connector { min-height: 0; justify-content: center; margin: -2px 0; }
}

@media (max-width: 480px) {
  :root { --page-gutter: 12px; }
  main { padding-top: var(--s16); }
  .setlist-item-row { gap: 0; padding-inline: 0; }
  .setlist-item-row .num { width: 16px; }
  .setlist-item-facts .key { margin-right: 0; }
  .editor-head .head-actions:not(.head-actions-menu) { flex-wrap: nowrap; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .editor-head .head-actions:not(.head-actions-menu) > * { flex: 0 0 auto; }
  .editor-head .head-actions .btn-primary { order: -1; }
  .set-actions > * { flex: 1 1 calc(50% - 4px); }
  .set-meter-read { flex-wrap: wrap; }
  .set-meter-read .gaps-chip { margin-left: auto; }
  .set-head-top { flex-wrap: wrap; }
  .set-window { text-align: left; }
  .compact-row.has-actions { flex-wrap: wrap; }
  .compact-row.has-actions .row-actions { width: 100%; justify-content: flex-end; }
  .compact-row.has-actions.show-history-row { flex-wrap: nowrap; }
  .compact-row.has-actions.show-history-row .row-actions {
    width: auto;
    flex: 0 0 auto;
    justify-content: initial;
  }
  .compact-row.file-row { flex-wrap: nowrap; }
  .compact-row.file-row .row-actions { width: auto; }
  .song-search-form { grid-template-columns: 1fr; }
  .song-search-submit, .song-search-clear { width: 100%; }
  .performance-history > summary { align-items: flex-start; flex-direction: column; padding: var(--s8) 0; }
  .performance-history-summary { text-align: left; }
  .booking-contact-row { flex-wrap: wrap; }
  .booking-contact-row .row-main { flex: 1 0 100%; }
  .compact-row.booking-contact-row .booking-contact-actions {
    width: auto;
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .booking-contact-row .row-facts { margin-left: auto; }
  .row-secondary { white-space: normal; display: -webkit-box; -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; }
  .auth-wrap { width: 100%; max-width: 380px; margin: 32px auto; }
  .auth-panel { padding: var(--s16); }
  .page-form { width: 100%; max-width: none; padding: var(--s16); }
  .field-pair { display: grid; grid-template-columns: 1fr; gap: 0; }
  .form-actions { display: grid; grid-template-columns: 1fr; }
  .settings-form .form-actions, .page-form .form-actions { grid-template-columns: 1fr; }
  .form-actions > * { width: 100%; }
  .form-actions > form > .btn { width: 100%; }
  .bulk-gap-field input { font-size: 16px; }
  .bulk-gap-hint { flex-basis: 100%; }
  .video-row { flex-wrap: wrap; align-items: stretch !important; }
  .video-row > .field { flex: 1 0 100% !important; }
  .song-video-row > img { width: 100% !important; flex-basis: 100%; }
  .song-video-row > .serif-italic { flex-basis: 100% !important; }

  /* The new-show essentials must fit before either optional row at 320×700.
     Time values remain distinct, 44px controls; only their layout gets denser. */
  .show-new-form { padding: var(--s12); }
  .show-new-form details.show-basics { margin-bottom: var(--s8); padding: var(--s8); }
  .show-new-form .show-form-disclosure-body { padding-top: var(--s4); }
  .show-new-form .show-basics .field { margin-bottom: var(--s8); }
  .show-new-form .field-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); }
  .show-new-form .show-new-venue-hint { display: none; }
  .show-new-form details.show-optional-fields { margin-bottom: var(--s8); padding: 0 var(--s8); }
  .show-new-form .show-form-actions { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Keep Details actions always reachable without covering the final field. */
  .show-details-form { padding-bottom: calc(var(--s16) + 76px); }
  .show-details-form .show-form-actions-sticky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .show-details-form .show-form-actions-sticky > * { width: auto; }
  .show-details-form .show-notes-video-fields .field:last-child input { scroll-margin-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; }
}

/* ---------- Gig mode (stage view — spec 2026-07-16, mockups alongside) ---------- */
.gig-body { background: var(--bg); }
.gig { display: flex; flex-direction: column; min-height: 100dvh; }
.gig-bar { display: flex; align-items: center; gap: var(--s16);
  padding: 10px var(--s16); border-bottom: 1px solid var(--hairline); }
/* Exit gig mode — iOS-style back at the bar's left, clear of the clock.
   Borderless muted text so it stays out of the way; a real link, so
   leaving the stage view never depends on JS. */
.gig-exit { flex: none; display: inline-flex; align-items: center;
  min-height: var(--tap-target); padding: 0 6px; margin-left: -6px;
  font: 600 13px var(--sans); color: var(--muted); text-decoration: none; white-space: nowrap; }
.gig-exit:hover, .gig-exit:active { color: var(--text); }
.gig-exit:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; border-radius: var(--r-control); }
.gig-setinfo { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gig-toggle { display: flex; gap: 4px; }
.gig-toggle-btn { min-height: var(--tap-target); padding: 8px 12px; cursor: pointer;
  font: 600 13px var(--sans); color: var(--muted);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-control); }
.gig-toggle-btn[aria-pressed="true"] { color: var(--text); background: var(--raised); }
.gig-clock { font-weight: 800; font-size: 27px; letter-spacing: -0.01em; }
.gig-clock[data-gig-state="ok"] { color: var(--teal); text-shadow: 0 0 18px rgba(55, 194, 160, .18); }
.gig-clock[data-gig-state="danger"] { color: var(--red); text-shadow: 0 0 18px rgba(255, 107, 74, .2); }
.gig-clock[data-gig-state="neutral"] { color: var(--muted); }
.gig-noschedule { padding: 8px var(--s16); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.gig-empty { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 17px; padding: var(--s24) var(--s16); }

/* whole-set view: digital paper */
.gig-full { flex: 1; overflow-y: auto; padding: 4px var(--s16) var(--s24); max-width: 760px; width: 100%; margin: 0 auto; }
.gig-setlabel { display: flex; justify-content: space-between; margin: 14px 0 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gig-row { display: flex; align-items: baseline; gap: 10px; padding: 8px; border-radius: var(--r-chip); font-size: 17px; }
.gig-set .gig-row:nth-child(even) { background: var(--raised); }
.gig-num { flex: none; width: 22px; font-size: 12px; color: var(--muted); }
.gig-title { flex: 1; min-width: 0; }
/* Song notes are the band's own words — serif voice per DESIGN.md,
   inline parenthetical beside the title. */
.gig-note { font-family: var(--serif); font-style: italic;
  font-size: 13.5px; font-weight: 400; color: var(--muted); }
.gig-song .gig-note { font-size: .38em; letter-spacing: 0; margin-left: .25em; }
.gig-qrow .gig-note { font-size: 13px; margin-left: 5px; }
.gig-key { flex: none; font-size: 13px; color: var(--muted); }
.gig-stamp { flex: none; font-size: 10px; font-weight: 600; letter-spacing: .1em; color: var(--amber); }
.gig-stamp-timing { color: var(--muted); border: 1px dashed var(--hairline); border-radius: 3px; padding: 0 4px; }
.gig-cut-cue { display: inline-flex; flex: 0 1 auto; min-width: 0; align-items: baseline;
  flex-wrap: wrap; gap: 3px 6px; }
.gig-timing-deadline { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.gig-row-break { justify-content: center; font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
/* now-playing view */
.gig-now { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.gig-now[hidden] { display: none; }
.gig-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;
  padding: 12px var(--s24); text-align: left; cursor: pointer;
  background: none; border: none; color: var(--text); font-family: var(--sans); }
.gig-nowlabel, .gig-uplabel { display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gig-uplabel { margin-top: var(--s24); }
.gig-song { display: block; margin-top: 4px; font-size: clamp(32px, 9vw, 64px);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
.gig-song.gig-song-quiet { color: var(--muted); font-size: clamp(24px, 6vw, 40px); }
.gig-meta { display: block; margin-top: 8px; font-size: 15px; color: var(--muted); }
.gig-meta .gig-meta-key { color: var(--amber); font-weight: 600; }
.gig-queue { display: block; }
.gig-qrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--hairline); font-size: 18px; }
.gig-qrow-quiet { font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.gig-qkey { font-size: 13px; color: var(--muted); }
.gig-foot { flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 8px var(--s16) 12px; }
.gig-back { width: var(--tap-target); height: var(--tap-target); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--hairline); border-radius: var(--r-control); }
.gig-hint { font-size: 12px; color: var(--muted); opacity: .75; }

/* landscape: clock stays put, queue shows 2 instead of 3 (spec) */
@media (orientation: landscape) and (max-height: 500px) {
  .gig-stage { flex-direction: row; align-items: center; gap: var(--s32); }
  .gig-stage > .gig-nowlabel { display: none; }
  .gig-song { flex: 1.4; }
  .gig-queue { flex: 1; border-left: 1px solid var(--hairline); padding-left: var(--s24); }
  .gig-uplabel { margin-top: 0; }
  .gig-qrow:nth-of-type(3) { display: none; }
}

/* ---------- Practice metronome (song page — DESIGN.md audio exception 2026-07-20) ---------- */
/* The song name, its marks, and the tempo chip share one line. */
.song-title-line { display: flex; align-items: center; gap: var(--s8);
  flex-wrap: wrap; min-width: 0; }

/* Tempo chip: the metronome trigger, sized like the ×N play count so it reads
   as a quiet fact beside the title — not a filled button. The <button> is a
   transparent ≥44px tap target (DESIGN.md, binding); only the inner label
   shows the compact amber pill. */
.song-tempo-chip { display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap-target); min-height: var(--tap-target);
  padding: 0; background: transparent; border: 0; cursor: pointer; }
.song-tempo-chip-label { display: inline-flex; align-items: center;
  padding: 4px 9px; font: 600 12px var(--mono); color: var(--amber);
  border: 1px solid var(--hairline); border-radius: var(--r-chip); }
.song-tempo-chip:hover .song-tempo-chip-label { border-color: var(--amber); color: var(--amber-deep); }
.song-tempo-chip:focus-visible { outline: none; }
.song-tempo-chip:focus-visible .song-tempo-chip-label { outline: 2px solid var(--amber); outline-offset: 1px; }

/* Compact ‹ › song-nav arrows: a square tap target, glyph centred. */
.btn-nav { padding: 0; width: var(--tap-target); font-size: 20px; line-height: 1; }

/* The pop-up. Native <dialog> gives the backdrop, Esc-to-close, and focus
   trapping for free. */
.metronome-dialog { width: min(340px, calc(100vw - 2 * var(--s16)));
  background: var(--surface); color: var(--text);
  border: 1px solid var(--hairline); border-radius: var(--r-panel);
  padding: var(--s24); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.metronome-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.metronome-dialog-body { display: flex; flex-direction: column; gap: var(--s16); }
.metronome-dialog-head { display: flex; align-items: center; justify-content: space-between; }
.metronome-title { font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.metronome-close { min-width: var(--tap-target); min-height: var(--tap-target);
  display: inline-flex; align-items: center; justify-content: center;
  margin: calc(-1 * var(--s8)) calc(-1 * var(--s8)) 0 0;
  background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer;
  border-radius: var(--r-control); }
.metronome-close:hover { color: var(--text); }
.metronome-close:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

/* Beat columns (Pro-Metronome style): one per beat, the "1" accented, the
   current beat lit as the pulse steps across (1 → 2 → 3 → 4 → 1). */
.metronome-beats { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  gap: var(--s8); min-height: 72px; }
.metronome-beat { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.metronome-beat-bar { width: 26px; height: 40px; background: var(--hairline);
  border: 1px solid transparent; border-radius: var(--r-chip); }
.metronome-beat-num { font-size: 12px; color: var(--muted); }
/* the downbeat "1": taller and outlined so you can find it at a glance */
.metronome-beat.is-downbeat .metronome-beat-bar { height: 56px; border-color: rgba(255, 180, 84, .5); }
.metronome-beat.is-downbeat .metronome-beat-num { color: var(--amber); }
/* the beat currently sounding */
.metronome-beat.is-active .metronome-beat-bar { background: var(--text); }
.metronome-beat.is-active.is-downbeat .metronome-beat-bar { background: var(--amber); border-color: var(--amber); }
.metronome-beat.is-active .metronome-beat-num { color: var(--text); }

/* Controls. */
.metronome-main { display: flex; }
.metronome-toggle { flex: 1; }
.metronome-tempo { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s8); }
.metronome-bpm-slot { display: inline-flex; justify-content: center; min-width: 96px; }
/* The tempo readout doubles as a tap-to-type field; the dotted underline hints
   it's editable. */
.metronome-bpm { min-height: var(--tap-target); padding: 0 8px; cursor: pointer;
  font-size: 20px; font-weight: 800; text-align: center; color: var(--text);
  background: none; border: none; border-radius: var(--r-control);
  text-decoration: underline dotted var(--hairline); text-underline-offset: 5px; }
.metronome-bpm:hover { color: var(--amber); text-decoration-color: var(--amber); }
.metronome-bpm:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.metronome-bpm-unit { font-size: 12px; font-weight: 600; color: var(--muted); }
.metronome-bpm-input { width: 96px; min-height: var(--tap-target); text-align: center;
  font-size: 20px; font-weight: 800; color: var(--text);
  background: var(--bg); border: 1px solid var(--amber); border-radius: var(--r-control);
  -moz-appearance: textfield; }
.metronome-bpm-input::-webkit-inner-spin-button,
.metronome-bpm-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.metronome-bpm-input:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.metronome-foot { display: flex; }
.metronome-foot .btn { width: 100%; }

/* ---- Instrument parts: tags, pickers, lineup, and song notes (2026-07-23) ---- */

/* Mono part tag, sized like .key. Amber for instruments; teal for vocals
   ("voice, not instrument"). Data ink, not a button. */
.part-tag { font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--amber);
  border: 1px solid var(--hairline); padding: 1px 7px; border-radius: var(--r-chip);
  letter-spacing: .04em; white-space: nowrap; }
.part-tag-vocals { color: var(--teal); border-color: rgba(55, 194, 160, .4); }

/* The default-instrument picker: a compact select that reads like a chip. It's a
   real <select> (native, accessible, 44px on touch) styled quiet. */
.part-select { font-family: var(--mono); font-size: 12px; color: var(--text);
  background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-chip);
  padding: 6px 8px; min-height: var(--tap-target); }
.part-select:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

/* Band-profile lineup rows: name · role · instrument (tag or, for you, a picker). */
.lineup-row { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap;
  padding: 6px 0; }
.lineup-name { flex: 1 1 auto; min-width: 0; }
.lineup-role { color: var(--muted); font-size: 12px; }
/* Help & Updates + operator desk */
.empty-serif {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 17px;
  margin: var(--s16) 0;
}
.shell-menu-pop .linkbtn {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  text-decoration: none;
  color: var(--text);
  font: 500 14px/1.2 var(--sans);
  background: none;
  border: none;
  cursor: pointer;
}
.shell-menu-pop a.linkbtn:hover { background: var(--surface); }
.shell-account-cluster {
  display: flex;
  align-items: center;
  gap: var(--s8);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.help-page { max-width: 720px; margin: 0 auto; position: relative; }
.help-head {
  display: flex;
  align-items: center;
  gap: var(--s8);
  margin-bottom: var(--s16);
  flex-wrap: wrap;
}
.help-tabs {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
}
.help-tabs a {
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 0 8px;
  border-radius: var(--r-control);
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.help-tabs a.on { background: var(--raised); color: var(--text); }
.help-tabs a:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.help-close { flex-shrink: 0; }
.help-operator-link { margin: 0 0 var(--s12); font-size: 12px; }
.help-operator-link a { color: var(--muted); }
.help-operator-link a:hover { color: var(--amber); }
.help-list { list-style: none; margin: 0; padding: 0; }
.help-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s12);
  min-height: 56px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.help-row-title, .help-row-title-link {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.help-row-title-link:hover { color: var(--amber); }
.help-row-meta { font-size: 12px; margin-top: 4px; }
.help-row-note { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.help-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.help-release {
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.help-release-head {
  display: flex;
  justify-content: space-between;
  gap: var(--s8);
  margin-bottom: 6px;
}
.help-release p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.stamp-submitted { color: var(--muted); }
.stamp-working, .stamp.stamp-working { color: var(--amber); border: 1px solid rgba(255,180,84,.45); border-radius: var(--r-chip); padding: 3px 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.stamp-completed, .stamp-done, .stamp.stamp-completed {
  color: var(--teal); border: 1px solid rgba(55,194,160,.45); border-radius: var(--r-chip);
  padding: 3px 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.stamp-declined, .stamp.stamp-declined, .stamp-submitted, .stamp.stamp-submitted {
  border: 1px solid var(--hairline); border-radius: var(--r-chip);
  padding: 3px 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.help-popup {
  position: sticky;
  bottom: 16px;
  margin-top: var(--s24);
  background: var(--raised);
  border: 1px solid rgba(55,194,160,.4);
  border-radius: var(--r-panel);
  padding: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.help-popup h2 { margin: 0 0 6px; font-size: 15px; }
.help-popup p { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.help-popup-ref { font-size: 12px; }
.help-popup .btn { width: 100%; }
.operator-desk { max-width: 880px; margin: 0 auto; }
.operator-feedback-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s12);
  flex-wrap: wrap;
}
.operator-feedback-head-main { min-width: 0; }
.operator-feedback-copy { flex: 0 0 auto; }
/* Song notes (2026-07-24): quiet stacked one-liners right under the facts — no
   heading, toggle, or panel. Replaces the old song note; the band-wide note
   leads as a BAND row. edit/add reveal a form only on tap. Small text, but 44px
   tap targets via padding. */
/* The editor-head's left column must be allowed to shrink below its content
   width (default flex min-width is auto), or a long note line forces horizontal
   page overflow on narrow phones. */
.editor-head-main { min-width: 0; }
.song-notes { margin-top: 8px; display: flex; flex-direction: column; min-width: 0; }
/* Tag column aligned so bodies line up; the neutral BAND tag reads "everyone". */
.song-notes .part-tag { flex: 0 0 auto; min-width: 42px; text-align: center; }
.part-tag-band { color: var(--text); border-color: var(--hairline); }
.note-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s8);
  padding: 3px 0; min-width: 0; }
.note-line .note-body { flex: 1 1 auto; min-width: 0; font-family: var(--serif);
  font-style: italic; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }

/* ---- Share for practice (2026-08-04) ----
   The chip on the song page reads as a sibling of the metronome chip: a text
   label in a hairline pill, no glyph. Open, it is an ordinary field + button, not
   a floating panel — the link has to be minted server-side because the practice
   note travels inside the signed token. */
.share-chip { min-width: 0; }
/* In the facts row it is a flex item beside the tempo chip, so the row's own gap
   spaces it and no top margin is wanted (2026-08-05). Open, it claims the whole
   row: the panel is a form, and a form cannot share a line with the facts.
   .song-facts needs min-width:0 for the same reason .editor-head-main does — the
   open panel's widest line is a long hint, and a flex row that cannot shrink
   below its content pushes the head's Back/Edit column onto its own line. */
.song-facts { min-width: 0; }
.song-facts > .share-chip[open] { flex: 1 1 100%; min-width: 0; }
/* .editor-head wraps on hypothetical sizes, and the left column's is max-content
   by default — so the open panel's width would shove Back/Edit onto their own
   line. Basis 0 makes the column ask for nothing and grow into what is left, so
   the head keeps its two columns whatever the panel does. Scoped to the song
   page: every other .editor-head is measured against its own content. */
.song-metro .editor-head-main { flex: 1 1 0; }
.share-summary { display: inline-flex; align-items: center; min-height: var(--tap-target);
  cursor: pointer; list-style: none; }
.share-summary::-webkit-details-marker { display: none; }
/* Same pill as the metronome chip, but muted rather than amber: the tempo chip
   sits directly above it, and two amber chips stacked spends the accent twice on
   one glance. Amber arrives on hover and focus. */
.share-chip-label { display: inline-flex; align-items: center;
  padding: 4px 9px; font: 600 12px var(--mono); color: var(--muted);
  border: 1px solid var(--hairline); border-radius: var(--r-chip); }
.share-summary:hover .share-chip-label { border-color: var(--amber); color: var(--amber); }
.share-summary:focus-visible { outline: none; }
.share-summary:focus-visible .share-chip-label { outline: 2px solid var(--amber); outline-offset: 1px; }
.share-panel { margin-top: var(--s8); padding: var(--s16); min-width: 0;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-panel); }
.share-panel .field:last-of-type { margin-bottom: var(--s8); }
.share-result { margin-top: var(--s16); padding-top: var(--s16); border-top: 1px solid var(--hairline); }
/* What the recipient will actually read, quoted back before it is sent. */
.share-preview { margin: var(--s4) 0 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.share-preview-detail { color: var(--muted); font-size: 12px; }
/* The quoted preview runs right into the Link label without this. */
.share-link-field { margin-top: var(--s16); }
.share-sms { display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-target); }

/* ---- The signed-out preview page behind a texted link ----
   Its own layout, so none of the app shell (which assumes a signed-in user) is
   reachable. One centred column: what you were sent, and one door. */
.share-body { display: flex; min-height: 100vh; padding: var(--s24); }
.share-card { margin: auto; width: min(420px, 100%); text-align: center; }
/* No flex gap here: .wordmark .glow already carries its own margin-right, and a
   gap would also push "Perfect" and "Setlist" apart, which the shell never does. */
.share-wordmark { display: inline-block; margin-bottom: var(--s24); color: var(--text); }
.share-note { margin: 0 0 var(--s8); font-size: 17px; color: var(--text); overflow-wrap: anywhere; }
/* balance keeps a wrapped song title from leaving one word alone on line two. */
.share-title { margin: 0; font-size: 26px; overflow-wrap: anywhere; text-wrap: balance; }
.share-facts { margin: var(--s8) 0 0; font-size: 12px; color: var(--muted); }
.share-show { color: var(--amber); }
.share-cta { margin-top: var(--s24); display: inline-flex; align-items: center;
  justify-content: center; min-height: var(--tap-target); }
.share-foot { margin: var(--s16) 0 0; font-size: 13px; color: var(--muted); }

/* ---- Public website schedule ----
   A self-contained, read-only ledger for direct preview or an external iframe.
   It uses the same console tokens as the app but none of the signed-in shell. */
.public-schedule-body {
  min-height: 100vh;
  padding: var(--s24);
}
.public-schedule {
  width: min(760px, 100%);
  margin: 0 auto;
}
.public-schedule-head {
  padding-bottom: var(--s16);
  border-bottom: 1px solid var(--hairline);
}
.public-schedule-label {
  color: var(--muted);
  font: 600 11px var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.public-schedule h1 {
  margin-top: var(--s4);
  font-size: 26px;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.public-show-list { border-bottom: 1px solid var(--hairline); }
.public-show-row {
  display: grid;
  grid-template-columns: minmax(145px, .8fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: var(--s16);
  min-height: 76px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.public-show-row:last-child { border-bottom: 0; }
.public-show-when {
  display: flex;
  flex-direction: column;
  color: var(--muted);
  font: 600 12px/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
}
.public-show-when time:first-child { color: var(--text); }
.public-show-details { min-width: 0; }
.public-show-details h2 {
  font-size: 17px;
  overflow-wrap: anywhere;
}
.public-show-details p {
  margin-top: 2px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.public-show-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  font: 600 12px var(--mono);
  white-space: nowrap;
}
.public-show-link:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
  border-radius: var(--r-chip);
}
.public-schedule-empty {
  margin: var(--s24) 0;
  color: var(--muted);
  font: italic 17px var(--serif);
}
@media (max-width: 480px) {
  .public-schedule-body { padding: var(--s16); }
  .public-show-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--s8);
    padding: var(--s16) 0;
  }
  .public-show-link { justify-self: start; white-space: normal; }
}