/*
 * 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: auto minmax(160px, 280px) minmax(0, 1fr) auto;
  grid-template-areas: "brand picker nav account";
  align-items: center;
  gap: var(--s16);
  padding: var(--s16) max(var(--page-gutter), env(safe-area-inset-right))
    var(--s16) max(var(--page-gutter), env(safe-area-inset-left));
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: var(--layer-shell);
}
.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: 12px; 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; }
.shell-nav { grid-area: nav; min-width: 0; display: flex; gap: var(--s16); margin-left: auto; align-items: center; }
.shell-nav a {
  display: inline-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 { 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); }

/* ---- Buttons ---- */
.btn { font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 9px 18px;
  border-radius: var(--r-control); border: 1px solid transparent; cursor: pointer; display: inline-block; }
.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; }

/* ---- 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-panel { max-width: 420px; }
.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; align-items: baseline; gap: var(--s16); padding: 10px 12px; border-radius: 6px; }
.row:nth-child(odd) { background: var(--raised); }
.row .num { font-family: var(--mono); font-size: 11px; color: var(--muted); width: 20px; text-align: right; }
.row .title { flex: 1; }
.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.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-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; }
.compact-row :is(.row-secondary, .row-facts, .key, .dur, .plays, .stamp) { font-size: 12px; }

.key { font-family: var(--mono); font-weight: 600; font-size: 11px; 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: 11px; color: var(--text); }
.song-row .plays.never, .lib-row .plays.never { color: var(--muted); }

/* stamps: the one remaining is the "upcoming" mark on a song page (DESIGN.md) */
.stamp { font-family: var(--mono); font-size: 10px; }
.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; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: var(--s16) 6px var(--s8); border-bottom: 1px solid var(--hairline); }
.badge { font-family: var(--mono); font-size: 10px; color: var(--amber); font-weight: 600; }

/* ---- Editor ---- */
.editor-head { display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: var(--s16); margin-bottom: var(--s16); }
.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 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s8); }
.set-title { font-weight: 700; font-size: 16px; }
.drag { color: var(--muted); cursor: grab; font-size: 14px; touch-action: none; padding: 2px 4px; }
.drag:hover { color: var(--amber); }
.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 .search { margin-bottom: 0; }
.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 { 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%; font-family: var(--sans); font-size: 14px; 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: 1.6fr 1fr; gap: var(--s24); align-items: start; }

/* ---- 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: 15px;
  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 { 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 { padding: 0 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.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; }
.show-payment-group select { width: 100%; max-width: 340px; min-height: 44px; padding: 9px 11px;
  background: var(--raised); color: var(--text); border: 1px solid var(--hairline);
  border-radius: var(--r-control); font: 15px var(--sans); }
.show-payment-group select:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.show-gap-control { display: flex; align-items: flex-end; gap: var(--s8); flex-wrap: wrap;
  margin: 0 0 var(--s16); }
.show-gap-field { margin-bottom: 0; }
.show-gap-input { display: flex; align-items: center; gap: var(--s8); }
.show-gap-field input { width: 92px; max-width: none; font-family: var(--mono);
  font-variant-numeric: tabular-nums; color-scheme: dark; }
.show-gap-unit { font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.show-gap-control > .btn { min-height: 39px; }
.show-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; }
.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 { 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; }
.field-hint { font-size: 10px; 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 { font-size: 13.5px; font-weight: 600; }
.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); }
.band-activity-exact { margin-top: var(--s16); }
.band-activity-exact > summary { min-height: var(--tap-target); display: inline-flex;
  align-items: center; color: var(--muted); font-weight: 600; cursor: pointer; }
.band-activity-exact > 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-profile-header .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: 80px; 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; }
.band-settings-content { min-width: 0; }
.band-settings-section { min-width: 0; scroll-margin-top: 80px; 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; }

/* ---- 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: 28px; height: 24px; 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[type="text"], .inline-form input[type="number"] { font-family: var(--mono); font-size: 13px;
  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); }
.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: 10px; 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); }
.gap-edit .popover { left: 50%; right: auto; transform: translateX(-50%); }

.set-actions { 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; }

/* 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) ---- */
.history-tools { display: flex; gap: var(--s16); align-items: center; flex-wrap: wrap; margin-bottom: var(--s16); }
.history-search { flex: 1; min-width: 220px; max-width: 360px; }
.history-search .search { margin-bottom: 0; }
.year-strip { display: flex; gap: var(--s8); flex-wrap: wrap; font-size: 11px; }
.year-strip a { color: var(--muted); border: 1px solid var(--hairline); border-radius: var(--r-chip); padding: 2px 8px; }
.year-strip a:hover { color: var(--amber); border-color: var(--amber); text-decoration: none; }
.year-head { position: sticky; top: 57px; 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; }

.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) {
  .show-gap-control > .btn { min-height: 44px; }
  .drag { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center;
    justify-content: center; font-size: 18px; }
  .remove-btn { width: 44px; height: 44px; font-size: 16px; }
  .lib-row .add { min-width: 44px; min-height: 44px; font-size: 16px; }
  .gap-chip { line-height: 28px; padding: 8px 14px; }
  .inline-edit > summary { padding: 8px 6px; }
}

@media (max-width: 820px), (pointer: coarse) {
  .btn, .btn-slim, .linkbtn, .shell-nav a, details > summary, .year-strip a, .dup-link {
    min-width: var(--tap-target);
    min-height: var(--tap-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .panel p a, .panel li a {
    min-width: var(--tap-target);
    min-height: var(--tap-target);
    display: inline-flex;
    align-items: center;
  }
  .field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
  .search, .band-switch, .inline-form input, .editor-gap-form input {
    min-height: var(--tap-target);
    font-size: 16px;
  }
  .inline-form input[type] { font-size: 16px; }
  .row .num, .row .key, .row .dur { font-size: 12px; }
  .gap-chip { font-size: 12px; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
    min-height: var(--tap-target);
    display: inline-flex;
    align-items: center;
  }
  .field-hint, .num, .key, .dur, .plays, .stamp { font-size: 12px; }
  .band-profile-links a, .band-bookends-grid a, .band-memory-grid a {
    min-width: var(--tap-target); min-height: var(--tap-target); display: inline-flex;
    align-items: center;
  }
}

/* ---- Mobile (≤820px): sticky per-set clock + add-songs sheet (ISSUE-010) ---- */
.mobile-add-launcher, .sheet-close { display: none; }
@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; }
  .band-profile-header { flex-wrap: wrap; }
  .editor-cols { grid-template-columns: minmax(0, 1fr); }
  .editor-head, .head-actions, .set-actions { min-width: 0; flex-wrap: wrap; }
  .shell-bar {
    position: static;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand picker account" "nav nav nav";
    gap: 8px 12px;
    padding-block: 8px;
  }
  .shell-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--hairline);
  }
  .shell-nav a {
    min-width: var(--tap-target);
    min-height: var(--tap-target);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .band-switch { min-height: var(--tap-target); font-size: 16px; }
  .set-head, .year-head { top: 0; }

  /* the set header (title · target · clock) pins while its set scrolls (design 8A) */
  .set-head {
    position: sticky;
    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;
    border-bottom: 1px solid var(--hairline);
  }
  .set-window { grid-column: 1 / -1; min-width: 0; white-space: normal; }
  .set-actions { display: flex; }
  .inline-edit .popover {
    width: min(320px, calc(100vw - (2 * var(--page-gutter))));
    max-width: calc(100vw - (2 * var(--page-gutter)));
  }
  .inline-form { min-width: 0; flex-wrap: wrap; white-space: normal; }
  .new-set-edit .popover { right: 0; left: auto; transform: none; }
  .row { min-width: 0; }
  .row .title { min-width: 0; overflow-wrap: anywhere; }

  .sheet-enhanced .mobile-add-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);
  }

  .row { align-items: center; flex-wrap: wrap; }
}

@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: 640px) {
  .shell-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand account" "picker picker" "nav nav";
  }
}

@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; }
}

@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); }
  .band-switch { flex: 1 1 120px; min-width: var(--tap-target); }
  .editor-head .head-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .editor-head .head-actions > * { width: 100%; }
  .set-actions > * { flex: 1 1 calc(50% - 4px); }
  .compact-row.has-actions { flex-wrap: wrap; }
  .compact-row.has-actions .row-actions { width: 100%; justify-content: flex-end; }
  .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%; }
  .show-gap-field input { font-size: 16px; }
  .show-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; }
}

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