/* Neutral slate/mono — near-zero chroma, cool steel-blue accent instead of
   amber, for a calmer, more utilitarian look than the warmer default.
   Also the app's default theme, so :root shares this block.
   MUST come first: :root always matches (regardless of data-theme), and
   has the same CSS specificity as every [data-theme="x"] selector below —
   so if this block came later in the file, it would win the cascade for
   EVERY theme (last rule wins on a specificity tie), silently overriding
   whichever theme was actually selected. Putting it first means every
   other theme's block, appearing later, correctly overrides it instead. */
:root, [data-theme="mono"]{
  --bg:oklch(0.152 0.004 250); --panel:oklch(0.205 0.005 250); --panel-raised:oklch(0.252 0.006 250);
  --line:oklch(0.35 0.008 250); --line-soft:oklch(0.27 0.006 250);
  --text:oklch(0.97 0.003 250); --text-muted:oklch(0.73 0.004 250); --text-dim:oklch(0.55 0.004 250);
  --amber:oklch(0.8 0.05 240); --amber-dim:oklch(0.44 0.04 240); --ink:oklch(0.16 0.01 250);
  --red:oklch(0.62 0.19 25); --red-dim:oklch(0.4 0.13 25); --red-ink:oklch(0.97 0.01 25);
  --green:oklch(0.7 0.15 145); --green-dim:oklch(0.42 0.1 145);
  --blue:oklch(0.68 0.12 240);
}

[data-theme="dark"]{
  --bg:oklch(0.15 0.015 70); --panel:oklch(0.205 0.016 70); --panel-raised:oklch(0.25 0.018 70);
  --line:oklch(0.33 0.02 70); --line-soft:oklch(0.26 0.018 70);
  --text:oklch(0.96 0.01 70); --text-muted:oklch(0.72 0.02 70); --text-dim:oklch(0.54 0.02 70);
  --amber:#D9A441; --amber-dim:oklch(0.4 0.09 75); --ink:oklch(0.17 0.02 70);
  --red:oklch(0.62 0.19 25); --red-dim:oklch(0.4 0.13 25); --red-ink:oklch(0.97 0.01 25);
  --green:oklch(0.7 0.15 145); --green-dim:oklch(0.42 0.1 145);
  --blue:oklch(0.65 0.14 250);
}
[data-theme="light"]{
  --bg:oklch(0.97 0.008 70); --panel:oklch(0.995 0.004 70); --panel-raised:oklch(0.94 0.012 70);
  --line:oklch(0.85 0.02 70); --line-soft:oklch(0.9 0.014 70);
  --text:oklch(0.2 0.02 70); --text-muted:oklch(0.45 0.02 70); --text-dim:oklch(0.6 0.018 70);
  --amber:oklch(0.62 0.15 75); --amber-dim:oklch(0.88 0.06 75); --ink:oklch(0.17 0.02 70);
  --red:oklch(0.55 0.19 25); --red-dim:oklch(0.9 0.05 25); --red-ink:oklch(0.98 0.01 25);
  --green:oklch(0.55 0.14 145); --green-dim:oklch(0.9 0.05 145);
  --blue:oklch(0.55 0.13 250);
}
[data-theme="ambient"]{
  --bg:oklch(0.14 0.02 200); --panel:oklch(0.19 0.02 200); --panel-raised:oklch(0.24 0.022 200);
  --line:oklch(0.32 0.03 200); --line-soft:oklch(0.26 0.025 200);
  --text:oklch(0.95 0.015 200); --text-muted:oklch(0.7 0.02 200); --text-dim:oklch(0.52 0.02 200);
  --amber:oklch(0.72 0.13 190); --amber-dim:oklch(0.4 0.08 190); --ink:oklch(0.15 0.02 200);
  --red:oklch(0.62 0.19 25); --red-dim:oklch(0.4 0.13 25); --red-ink:oklch(0.97 0.01 25);
  --green:oklch(0.7 0.15 145); --green-dim:oklch(0.42 0.1 145);
  --blue:oklch(0.65 0.15 230);
}
/* Deep indigo/violet — a moody, late-night-show feel */
[data-theme="midnight"]{
  --bg:oklch(0.155 0.026 280); --panel:oklch(0.205 0.028 280); --panel-raised:oklch(0.255 0.03 280);
  --line:oklch(0.34 0.034 280); --line-soft:oklch(0.27 0.03 280);
  --text:oklch(0.96 0.014 280); --text-muted:oklch(0.72 0.022 280); --text-dim:oklch(0.54 0.022 280);
  --amber:oklch(0.72 0.17 300); --amber-dim:oklch(0.42 0.11 300); --ink:oklch(0.16 0.02 280);
  --red:oklch(0.63 0.19 20); --red-dim:oklch(0.4 0.13 20); --red-ink:oklch(0.97 0.01 20);
  --green:oklch(0.7 0.15 150); --green-dim:oklch(0.42 0.1 150);
  --blue:oklch(0.66 0.15 262);
}
/* Warm coral/orange stage-light glow on a near-black background */
[data-theme="sunset"]{
  --bg:oklch(0.15 0.02 40); --panel:oklch(0.205 0.022 40); --panel-raised:oklch(0.252 0.024 40);
  --line:oklch(0.335 0.028 40); --line-soft:oklch(0.265 0.024 40);
  --text:oklch(0.96 0.012 40); --text-muted:oklch(0.72 0.02 40); --text-dim:oklch(0.54 0.02 40);
  --amber:oklch(0.7 0.19 38); --amber-dim:oklch(0.41 0.12 38); --ink:oklch(0.17 0.02 40);
  --red:oklch(0.6 0.2 12); --red-dim:oklch(0.4 0.14 12); --red-ink:oklch(0.97 0.01 12);
  --green:oklch(0.7 0.15 145); --green-dim:oklch(0.42 0.1 145);
  --blue:oklch(0.65 0.14 250);
}
/* Dark green "green room" — an olive/sage accent kept a good distance from
   the fixed status-green (145°) so "Live-ready" badges don't blend into
   the theme's own accent color. */
[data-theme="greenroom"]{
  --bg:oklch(0.15 0.02 155); --panel:oklch(0.203 0.022 155); --panel-raised:oklch(0.25 0.024 155);
  --line:oklch(0.33 0.028 155); --line-soft:oklch(0.26 0.024 155);
  --text:oklch(0.96 0.012 155); --text-muted:oklch(0.72 0.018 155); --text-dim:oklch(0.54 0.018 155);
  --amber:oklch(0.76 0.15 118); --amber-dim:oklch(0.43 0.09 118); --ink:oklch(0.16 0.02 155);
  --red:oklch(0.62 0.19 25); --red-dim:oklch(0.4 0.13 25); --red-ink:oklch(0.97 0.01 25);
  --green:oklch(0.7 0.15 145); --green-dim:oklch(0.42 0.1 145);
  --blue:oklch(0.65 0.14 235);
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
body{
  background:var(--bg); color:var(--text); font-family:'Manrope',-apple-system,sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.hidden{ display:none !important; }
.mono{ font-family:'Manrope',sans-serif; }

/* ===== Login / invite screens ===== */
.login-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-box{ width:100%; max-width:320px; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:32px 28px; }
.login-title{ font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:28px; letter-spacing:-0.02em; margin-bottom:22px; display:flex; align-items:center; gap:11px; }
.login-title .brand-mark{
  width:32px; height:32px; flex-shrink:0; object-fit:contain;
}
.login-sub{ font-size:12.5px; color:var(--text-dim); margin-bottom:22px; }
.login-box input{ width:100%; padding:12px 13px; margin-bottom:10px; border-radius:10px; border:1px solid var(--line); background:var(--panel-raised); color:var(--text); font-size:14px; }
.login-error{ color:var(--red); font-size:12px; margin-top:8px; min-height:16px; }

/* ===== App shell ===== */
.shell{ display:flex; min-height:100vh; align-items:stretch; }
.shell-main{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* ===== Top strip ===== */
.topstrip{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:var(--bg);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; gap:10px;
}
.brand{
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:19px;
  letter-spacing:-0.02em; display:flex; align-items:center; gap:9px;
}
.brand .brand-mark{ width:18.4px; height:18.4px; flex-shrink:0; object-fit:contain; }
.topstrip-right{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.who{ font-size:11.5px; color:var(--text-muted); margin-right:4px; white-space:nowrap; }

/* ===== Sidebar (desktop) ===== */
.sidebar{
  width:250px; flex-shrink:0; display:none; flex-direction:column; gap:2px;
  padding:24px 14px; background:var(--panel); border-right:1px solid var(--line);
}
.sidebar-logo{ display:flex; align-items:center; gap:10px; padding:0 8px; margin-bottom:30px; }
/* Small custom band-name line under the BANDROOM wordmark, admin-set
   under Backup & Sync. Empty by default (nothing rendered/no gap taken
   up). A longer name (roughly >20 characters — about the point a
   sidebar-width single line starts getting tight) gets a smaller font
   size via .band-name-subtitle.long so it still comfortably fits on one
   line instead of wrapping or overflowing. */
.band-name-subtitle{ font-size:10.5px; font-weight:600; color:var(--text-dim); letter-spacing:0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.band-name-subtitle.long{ font-size:9px; }
.band-name-subtitle:empty{ display:none; }
.login-title + .band-name-subtitle{ font-size:13px; margin-top:-16px; margin-bottom:16px; }
.login-title + .band-name-subtitle.long{ font-size:11.5px; }
.sidebar-logo .brand-mark{ width:21.85px; height:21.85px; flex-shrink:0; object-fit:contain; }
.sidebar-logo span{ font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:19px; letter-spacing:-0.02em; }

.navlink{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px;
  cursor:pointer; font-size:13.5px; font-weight:700; color:var(--text-muted);
  text-decoration:none;
}
.navlink:hover{ background:var(--panel-raised); color:var(--text); }
.navlink.active{ background:var(--amber); color:var(--ink); }
.navlink svg{ flex-shrink:0; }

/* ===== Bottom nav (mobile) ===== */
.bottomnav{
  position:fixed; bottom:0; left:0; right:0; z-index:40; display:flex; justify-content:space-around;
  background:var(--panel); border-top:1px solid var(--line); padding:8px 4px calc(10px + env(safe-area-inset-bottom));
}
.bottomnav .navlink{
  flex-direction:column; gap:3px; padding:5px 4px; border-radius:10px; flex:1; background:none; font-size:9.5px;
  text-transform:uppercase; letter-spacing:0.02em;
}
.bottomnav .navlink.active{ background:none; color:var(--amber); }
.bottomnav .navlink:hover{ background:none; color:var(--text); }

.main{ padding:18px 16px 96px; max-width:960px; margin:0 auto; width:100%; }
.screen{ display:none; }
.screen.active{ display:block; }
h1{
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:24px;
  letter-spacing:-0.01em; margin-bottom:16px; line-height:1.1;
}

/* ===== Dashboard stat cards ===== */
.stats-row{ display:flex; gap:10px; overflow-x:auto; margin-top:18px; margin-bottom:24px; scrollbar-width:none; -ms-overflow-style:none; }
.stats-row::-webkit-scrollbar{ display:none; }
.stat-card{ border-radius:16px; padding:16px; min-width:130px; flex-shrink:0; }
.stat-card.dev{ background:var(--amber); color:var(--ink); }
.stat-card.rec{ background:var(--red); color:var(--red-ink); }
.stat-card.idea{ background:var(--panel-raised); border:1px solid var(--line); color:var(--text-muted); }
.stat-card.live_ready{ background:var(--green); color:var(--ink); }
.stat-card.practice{ background:var(--amber); color:var(--ink); }
.stat-card.neutral{ background:var(--panel); border:1px solid var(--line); color:var(--text); }
.stat-number{ font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:32px; }
.stat-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; opacity:0.85; margin-top:4px; }

/* ===== Buttons ===== */
.btn{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:13px; padding:11px 18px; border-radius:12px;
  border:1px solid var(--line); background:var(--panel-raised); color:var(--text); cursor:pointer;
  min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.btn:hover{ border-color:var(--text-dim); }
.btn-primary{ background:var(--amber); color:var(--ink); border-color:var(--amber); font-weight:800; }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-ghost{ background:transparent; }

/* ===== Panels ===== */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:16px; margin-top:16px; overflow:hidden; }
.panel-head{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15.5px;
  padding:14px 20px; border-bottom:1px solid var(--line-soft);
}
.panel-body{ padding:16px 20px; }

.grid-2{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:800px){ .grid-2{ grid-template-columns:1fr 1fr; } }

.list-item{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line-soft); cursor:pointer; gap:10px; }
.member-row{ cursor:default; } /* the row itself no longer navigates anywhere — only the gear menu inside it does */

/* Repertoire, Members, and Trash render their rows straight into a bare
   .panel (no .panel-body wrapper), so .list-item's own padding — which is
   vertical-only, by design, so it doesn't double up when nested inside an
   already-padded .panel-body elsewhere — needs a horizontal companion
   here specifically, otherwise rows sit flush against the panel edges. */
#songList, #memberList, #activityList{ padding:4px 20px; }
#pollList{ margin-top:20px; }
.list-item:last-child{ border-bottom:none; }

/* ===== Status tags ===== */
.tag{
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em;
  padding:5px 10px; border-radius:999px; background:var(--panel-raised); color:var(--text-muted);
  white-space:nowrap;
}
.tag.idea{ color:var(--text-muted); }
.tag.development{ background:var(--amber); color:var(--ink); }
.tag.recording{ background:var(--red); color:var(--red-ink); }
.tag.live_ready{ background:var(--green); color:var(--ink); }

.status-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.status-dot.on{ background:var(--green); }
.status-dot.warn{ background:var(--amber); }
.status-dot.off{ background:var(--red); }

.breadcrumb{ font-size:12px; font-weight:700; color:var(--text-dim); margin-bottom:10px; cursor:pointer; min-height:32px; display:flex; align-items:center; }
.breadcrumb:hover{ color:var(--amber); }

.field-row{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:14px; }
.field-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-dim); margin-bottom:3px; }

.meta-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; font-size:12.5px; }
.meta-chips .chip-label{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-dim); margin-right:6px; }
.chip-input{
  border:none; border-bottom:1px dashed var(--line); background:transparent; color:var(--text);
  font-size:12.5px; font-family:inherit; padding:0 2px 1px; width:auto;
}
.chip-input:focus{ outline:none; border-bottom-color:var(--amber); }
.chip-input[type="number"]{ width:56px; }

.count-badge{ font-size:11px; font-weight:700; color:var(--text-dim); margin-left:7px; }

.disclosure{ }
.disclosure summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--amber); padding:6px 2px; user-select:none;
}
.disclosure summary::-webkit-details-marker{ display:none; }
.disclosure summary::before{ content:'+'; font-size:14px; line-height:1; }
.disclosure[open] summary::before{ content:'–'; }
.disclosure[open] summary{ margin-bottom:4px; }
.disclosure-body{ padding-top:8px; }

.checklist-item{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.checklist-item:last-child{ border-bottom:none; }
.checkbox{ width:21px; height:21px; border:1.5px solid var(--line); border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; font-weight:800; }
.checkbox.done{ background:var(--green); border-color:var(--green); color:var(--ink); }

/* ===== Waveform ===== */
.waveform{ display:flex; align-items:center; gap:1.5px; height:22px; }
.waveform span{ width:2.5px; border-radius:1px; background:var(--line); flex-shrink:0; }
.waveform span.active{ background:var(--amber); opacity:0.85; }

/* ===== Avatar chips ===== */
.avatar-chip{
  width:26px; height:26px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:800; flex-shrink:0; border:2px solid var(--panel); font-family:'Space Grotesk',sans-serif;
}
.avatar-chip.yes{ background:var(--green-dim); color:var(--green); }
.avatar-chip.no{ background:var(--red-dim); color:var(--red); opacity:0.7; }
.avatar-chip.maybe{ background:var(--amber-dim); color:var(--amber); }
.avatar-stack{ display:flex; flex-wrap:wrap; gap:4px; }

input, select, textarea{ font-family:inherit; }
.form-row{ margin-bottom:10px; }
.form-row label{ display:block; font-size:11px; font-weight:700; letter-spacing:0.02em; color:var(--text-dim); margin-bottom:5px; }
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel-raised); color:var(--text); font-size:14px;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus,
input:focus, select:focus, textarea:focus, .btn:focus-visible{
  outline:2px solid var(--amber); outline-offset:1px;
}

.queue-banner{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:color-mix(in oklch, var(--amber) 12%, transparent); border:1px solid var(--amber-dim);
  border-radius:12px; padding:11px 16px; margin-bottom:16px; font-size:12.5px;
}

a{ color:var(--amber); }
a:hover{ color:var(--text); }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:5px; }

@media(min-width:900px){
  .sidebar{ display:flex; }
  .bottomnav{ display:none; }
  .topstrip .brand{ display:none; }
  .main{ padding:32px 40px 48px; max-width:1000px; }
  h1{ font-size:30px; }
  .topstrip{ padding:16px 32px; justify-content:flex-end; }
  /* On a wide-enough screen there's room to just wrap onto a second row
     instead of scrolling sideways — horizontal scroll for a handful of
     cards feels like a mobile affordance and the previous behavior cut
     the last card off right at the viewport edge with no visual hint
     that more existed off-screen. */
  .stats-row{ flex-wrap:wrap; overflow-x:visible; }
}

/* Below 900px is the mobile layout (bottom nav instead of sidebar). iOS
   Safari auto-zooms the whole page in when a form field with a computed
   font-size under 16px receives focus, then zooms back out on blur —
   that's the "layout pops out and back in" behavior during any action
   that focuses an input (search, dates, dropdowns, etc). Forcing every
   field to at least 16px here, overriding any inline/class font-size,
   stops the zoom from triggering at all, so it stays visually consistent
   across every action instead of only fixing it field-by-field.
   16px only applies below the desktop breakpoint — desktop keeps
   whatever smaller, denser sizing each field already had. */
@media(max-width:899px){
  input, select, textarea{ font-size:16px !important; }
  /* Songs list search/filter row: search bar gets its own full-width
     line, and the two dropdowns share the row below it, instead of
     wrapping unevenly (e.g. search + one dropdown on one line, the
     other dropdown alone on the next). */
  #songSearch{ flex-basis:100% !important; }
  #statusFilter, #sortOrder{ flex:1 1 0 !important; min-width:0 !important; }
}

/* ===== Generic modal (replaces browser prompt() dialogs) ===== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-box{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:22px; width:100%; max-width:380px; max-height:85vh; overflow-y:auto;
}
.modal-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; margin-bottom:14px; }
.modal-error{ color:var(--red); font-size:12px; margin-top:8px; min-height:16px; }
.modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }

/* ===== History & Files timeline ===== */
.tl-modeswitch{ display:flex; gap:2px; background:var(--panel-raised); border:1px solid var(--line); border-radius:10px; padding:3px; width:fit-content; margin:0 auto 14px; }
.tl-filters{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:12px; }
.tl-filter-chip{
  font-size:10.5px; text-transform:uppercase; letter-spacing:0.03em; padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--text-dim); cursor:pointer; background:var(--panel-raised);
}
.tl-filter-chip.active{ border-color:var(--amber-dim); color:var(--amber); background:rgba(217,164,65,0.1); }
.tl-mode{ padding:7px 12px; border-radius:7px; font-size:11.5px; font-weight:700; cursor:pointer; color:var(--text-muted); white-space:nowrap; }
.tl-mode.active{ background:var(--amber); color:var(--ink); }

.tl-dots{ display:flex; gap:0; overflow-x:auto; padding:4px 2px 14px; scrollbar-width:none; -ms-overflow-style:none; }
.tl-dots::-webkit-scrollbar{ display:none; }
.tl-node{ flex:1 0 74px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; position:relative; z-index:1; padding:0 4px; }
.tl-node::before{ content:''; position:absolute; left:0; right:0; top:15px; height:2px; background:var(--line); z-index:0; }
.tl-node-dot{ width:12px; height:12px; border-radius:50%; background:var(--panel-raised); border:2px solid var(--line); transition:all .15s; position:relative; z-index:1; }
.tl-node.active .tl-node-dot{ width:18px; height:18px; background:var(--amber); border-color:var(--amber); }
.tl-node-label{ font-size:10.5px; font-weight:600; color:var(--text-dim); white-space:nowrap; }
.tl-node.active .tl-node-label{ color:var(--text); font-weight:800; }
.tl-node-count{ font-size:9px; color:var(--text-dim); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:0 5px; }

.tl-group-label{ font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:21px; letter-spacing:-0.01em; color:var(--text); margin:30px 0 14px; padding-bottom:10px; border-bottom:2px solid var(--line); }
.tl-group-label:first-child{ margin-top:0; }

.add-toolbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:4px 0 18px; position:relative; }

/* Dims the rest of the page while an "Add to song" form is open, so the
   form itself (raised above the backdrop via z-index) is the clear focus.
   The form stays inline in the page flow — this isn't a true modal — the
   backdrop just visually separates it from everything else underneath. */
.add-form-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:45; }
.add-toolbar.focused{ position:relative; z-index:46; }
.focused-panel{ position:relative; z-index:46; box-shadow:0 0 0 1px var(--amber-dim), 0 12px 32px rgba(0,0,0,0.5); }
.icon-action-btn{
  width:36px; height:36px; border-radius:10px; background:var(--panel-raised); border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; color:var(--text-muted); cursor:pointer;
  flex-shrink:0; text-decoration:none;
}
.icon-action-btn:hover{ border-color:var(--amber); color:var(--amber); }
.icon-action-btn.active{ border-color:var(--amber-dim); color:var(--amber); background:rgba(217,164,65,0.12); }
.tl-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.tl-card{ background:var(--panel-raised); border:1px solid var(--line-soft); border-radius:12px; padding:14px; overflow:hidden; overflow-wrap:anywhere; }
.tl-card-tag{ display:inline-block; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink); background:var(--amber); padding:3px 8px; border-radius:999px; margin-bottom:8px; }
.tl-card-user-chip{
  display:inline-flex; align-items:center; gap:5px; background:var(--panel-raised); border:1px solid var(--line);
  border-radius:999px; padding:2px 9px 2px 2px; font-size:10.5px; color:var(--text-muted); font-weight:600;
}
.tl-card-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13.5px; margin-bottom:6px; overflow-wrap:anywhere; }
.tl-card-link{ display:inline-block; font-size:11px; color:var(--amber); margin-top:6px; }
.tl-card-note{ font-size:10.5px; color:var(--text-dim); margin-top:8px; }
.tl-card-art{
  background:var(--panel-raised); border-radius:10px; padding:20px 14px; text-align:center;
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:13px; letter-spacing:0.03em;
  color:var(--text); margin-bottom:8px;
}
.tl-card-thumb{ width:100%; border-radius:8px; margin-bottom:8px; display:block; border:1px solid var(--line-soft); }

/* ===== Roles (icon tags) & profile avatar color picker ===== */
.role-tag{ display:inline-flex; align-items:center; gap:3px; }
.role-tag svg{ flex-shrink:0; opacity:0.85; }
.role-toggle-badge{ cursor:pointer; user-select:none; border:1px solid var(--line); transition:background 0.1s, color 0.1s; }
.role-toggle-badge.selected{ background:var(--amber); color:var(--ink); border-color:var(--amber); }
.color-swatch{
  width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent;
  box-shadow:0 0 0 1px var(--line-soft);
}
.color-swatch.selected{ border-color:var(--text); box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--text); }

/* ===== Dropdown menus (gear menu, status badge menu) ===== */
.dropdown-anchor{ position:relative; display:inline-flex; }
.dropdown-menu{
  position:absolute; top:calc(100% + 6px); right:0; min-width:220px; max-width:280px; z-index:50;
  background:var(--panel-raised); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,0.35); padding:6px; display:flex; flex-direction:column; gap:1px;
}
.dropdown-menu.align-left{ right:auto; left:0; }
.dropdown-menu.open-upward{ top:auto; bottom:calc(100% + 6px); }
.dropdown-item{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:7px; font-size:12.5px;
  color:var(--text); cursor:pointer; white-space:nowrap;
}
.dropdown-item svg{ flex-shrink:0; opacity:0.85; }
.dropdown-item:hover{ background:var(--panel); }
.dropdown-item.danger{ color:var(--red); }
.dropdown-item.active{ background:rgba(217,164,65,0.12); color:var(--amber); }
.dropdown-item.static{ cursor:default; white-space:normal; line-height:1.4; }
.dropdown-item.static:hover{ background:transparent; }
.dropdown-divider{ height:1px; background:var(--line-soft); margin:4px 2px; }

.badge-tag{
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em;
  padding:5px 10px; border-radius:999px; background:var(--panel-raised); color:var(--text-muted);
  white-space:nowrap; border:1px solid var(--line); cursor:pointer;
}
.badge-tag:hover{ border-color:var(--text-dim); }
.status-badge-clickable{ cursor:pointer; display:inline-flex; align-items:center; gap:3px; }

/* ===== Schedule (rehearsal polls): tabs + segmented Yes/Maybe/No ===== */
.schedule-tabs{ display:flex; gap:2px; background:var(--panel-raised); border:1px solid var(--line); border-radius:10px; padding:3px; width:fit-content; margin-bottom:16px; }
.schedule-tab{ padding:8px 16px; border-radius:7px; font-size:12.5px; font-weight:800; cursor:pointer; text-align:center; color:var(--text-muted); user-select:none; }
.schedule-tab.active{ background:var(--amber); color:var(--ink); }
.seg-control{ display:flex; border-radius:10px; overflow:hidden; border:1px solid var(--line); width:186px; flex-shrink:0; }
.seg-btn{ flex:1; padding:8px 0; font-size:11.5px; font-weight:800; cursor:pointer; text-align:center; color:var(--text-muted); user-select:none; }
.seg-btn.active.yes{ background:var(--green-dim); color:var(--green); }
.seg-btn.active.maybe{ background:rgba(217,164,65,0.16); color:var(--amber); }
.seg-btn.active.no{ background:var(--red-dim); color:var(--red); }
.poll-option-row{ padding:14px 12px; margin-bottom:2px; border-radius:10px; border-bottom:1px solid var(--line-soft); }
.poll-option-row.leading{ background:rgba(112,190,150,0.07); box-shadow:inset 3px 0 0 var(--green); }
.leading-tag{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; padding:3px 8px; border-radius:999px; background:var(--green-dim); color:var(--green); white-space:nowrap; }

.event-type-toggle{ cursor:pointer; }
.event-type-toggle.rehearsal.selected{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.event-type-toggle.gig.selected{ background:var(--red); border-color:var(--red); color:var(--red-ink); }
.event-type-toggle.other.selected{ background:var(--panel-raised); border-color:var(--text-dim); color:var(--text); }
.event-type-badge{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.event-type-badge.rehearsal{ background:var(--amber-dim); color:var(--amber); }
.event-type-badge.gig{ background:var(--red-dim); color:var(--red); }
.event-type-badge.other{ background:var(--panel-raised); color:var(--text-dim); }

/* A thin bar under each poll option, filled proportionally to that
   option's yes-votes relative to the currently-leading option — makes
   which date is ahead visually obvious at a glance, not just from the
   "Leading" text tag next to it. */
.poll-option-bar-track{ height:4px; border-radius:999px; background:var(--line-soft); margin-top:8px; overflow:hidden; }
.poll-option-bar-fill{ height:100%; border-radius:999px; background:var(--text-dim); transition:width 0.2s; }
.poll-option-bar-fill.leading{ background:var(--green); }
.avatar-chip.mine{ border:2px solid var(--amber); }

/* ===== Toasts (brief confirmation after an action, e.g. upload done) ===== */
.toast-container{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{
  background:var(--panel-raised); border:1px solid var(--line); color:var(--text); font-size:13px; font-weight:600;
  padding:11px 18px; border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,0.35);
  display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(8px); transition:opacity 0.2s, transform 0.2s;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast.success{ border-color:var(--green-dim); }
.toast.success .toast-icon{ color:var(--green); }
.toast.info .toast-icon{ color:var(--amber); }
@media(max-width:899px){ .toast-container{ bottom:76px; } } /* clear the mobile bottom nav */

/* ===== Dashboard settings: status toggle badges (same colors as the
   real song-status badges) instead of plain checkboxes ===== */
.status-badge-toggle{
  cursor:pointer; user-select:none; display:inline-block; padding:5px 10px; border-radius:999px;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em;
  border:1px solid var(--line); background:transparent; color:var(--text-dim); transition:background 0.15s, color 0.15s, border-color 0.15s;
}
.status-badge-toggle.on.idea{ background:var(--panel-raised); border-color:var(--line); color:var(--text-muted); }
.status-badge-toggle.on.development{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.status-badge-toggle.on.recording{ background:var(--red); border-color:var(--red); color:var(--red-ink); }
.status-badge-toggle.on.live_ready{ background:var(--green); border-color:var(--green); color:var(--ink); }
.status-badge-toggle.on.practice{ background:var(--amber); border-color:var(--amber); color:var(--ink); }

.status-filter-toggle{ cursor:pointer; }
.status-filter-toggle.selected.idea{ background:var(--panel-raised); border-color:var(--line); color:var(--text-muted); }
.status-filter-toggle.selected.development{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.status-filter-toggle.selected.recording{ background:var(--red); border-color:var(--red); color:var(--red-ink); }
.status-filter-toggle.selected.live_ready{ background:var(--green); border-color:var(--green); color:var(--ink); }
.status-filter-toggle.selected.all{ background:var(--text); border-color:var(--text); color:var(--ink); }

/* A CSS-only toggle switch (hidden native checkbox + a styled sibling
   that reacts to :checked) — used in place of a bare browser checkbox
   so it actually matches the rest of the UI instead of looking like a
   default form control dropped into a themed app. */
.toggle-switch{ position:relative; display:inline-block; width:36px; height:21px; flex-shrink:0; }
.toggle-switch input{ position:absolute; opacity:0; width:0; height:0; }
.toggle-switch .toggle-track{
  position:absolute; inset:0; border-radius:999px; cursor:pointer;
  background:var(--panel-raised); border:1px solid var(--line);
  transition:background 0.15s, border-color 0.15s;
}
.toggle-switch .toggle-track::before{
  content:''; position:absolute; width:15px; height:15px; left:2px; top:2px;
  border-radius:50%; background:var(--text-dim); transition:transform 0.15s, background 0.15s;
}
.toggle-switch input:checked + .toggle-track{ background:var(--amber); border-color:var(--amber); }
.toggle-switch input:checked + .toggle-track::before{ transform:translateX(15px); background:var(--ink); }

/* A <select> styled to match the app's inputs (rounded, dark, on-brand
   focus ring) instead of the browser's own unstyled default control —
   the native dropdown arrow is replaced with one that matches the rest
   of the icon set. */
.modern-select{
  width:100%; padding:8px 32px 8px 10px; border-radius:8px;
  border:1px solid var(--line); background-color:var(--panel-raised); color:var(--text);
  font-size:13px; font-family:inherit; cursor:pointer;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:16px;
}
.modern-select:focus{ outline:none; border-color:var(--amber); }

.setlist-song-row{
  display:flex; align-items:center; gap:8px; padding:9px 4px;
  border-bottom:1px solid var(--line-soft);
  /* A touch-and-hold on the song name is exactly the gesture that
     starts a drag here, but it's also the browser's own trigger for
     text selection (and, on iOS, the long-press callout menu) — left
     enabled, that native behavior competes with and can swallow the
     drag gesture before it ever gets going. */
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
.setlist-song-row:last-child{ border-bottom:none; }
.setlist-song-row .drag-handle{
  cursor:grab; color:var(--text-dim); flex-shrink:0; touch-action:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin:-9px; border-radius:8px;
}
.setlist-song-row .drag-handle:active{ background:var(--panel-raised); }
.setlist-song-row:active .drag-handle{ cursor:grabbing; }
.setlist-song-row.dragging-source{ opacity:0.35; }
.setlist-song-row.drop-indicator-above{ box-shadow:inset 0 2px 0 0 var(--amber); }
.setlist-song-row.drop-indicator-below{ box-shadow:inset 0 -2px 0 0 var(--amber); }
.reorder-arrows{ display:flex; flex-direction:column; gap:1px; flex-shrink:0; }
.reorder-arrows .icon-action-btn[disabled]{ opacity:0.25; cursor:default; pointer-events:none; }

/* Placed after the base .reorder-arrows rule above (not inside the
   earlier desktop media query block) so this actually wins the
   cascade — same selector specificity, so whichever rule comes LAST
   in the file is what applies, and the base rule above previously
   ended up textually after the desktop override, silently cancelling
   it out regardless of screen width. Drag-and-drop works with a real
   mouse, so the up/down arrows (there as the fallback for touch, where
   native drag doesn't apply) are redundant clutter on desktop. */
@media(min-width:900px){
  .reorder-arrows{ display:none; }
}

.song-duration-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  font-size:11.5px; font-weight:700; white-space:nowrap; flex-shrink:0;
  padding:3px 9px; border-radius:999px; min-width:58px; box-sizing:border-box;
  background:var(--amber-dim); color:var(--amber);
}
.song-duration-pill.in-setlist{ background:var(--green-dim); color:var(--green); }

.total-duration-badge{
  display:inline-flex; align-items:center;
  font-size:12.5px; font-weight:800; white-space:nowrap;
  padding:5px 12px; border-radius:999px;
  background:var(--green); color:var(--ink);
}

/* Finance module */
.finance-card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.finance-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.finance-card-label{ font-size:11px; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:0.02em; margin-bottom:6px; }
.finance-card-value{ font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:22px; }
.finance-card-value.green{ color:var(--green); }
.finance-card-value.red{ color:var(--red); }
.finance-card-value.amber{ color:var(--amber); }
.finance-card-value.muted{ color:var(--text-muted); }

.finance-amount{ font-family:'Space Grotesk',sans-serif; font-weight:700; }
.finance-amount.green{ color:var(--green); }
.finance-amount.red{ color:var(--red); }

.finance-category-badge{
  display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:0.02em; padding:3px 9px; border-radius:999px;
}
.finance-category-badge.gage{ background:var(--green-dim); color:var(--green); }
.finance-category-badge.income{ background:var(--green-dim); color:var(--green); }
.finance-category-badge.expense{ background:var(--panel-raised); color:var(--text-muted); }
.finance-category-badge.personal_expense{ background:var(--amber-dim); color:var(--amber); }
.finance-category-badge.reimbursement{ background:var(--red-dim); color:var(--red); }
.finance-category-badge.payout{ background:var(--red-dim); color:var(--red); }

.finance-status-badge{
  display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:0.02em; padding:3px 9px; border-radius:999px; margin-top:4px;
}
.finance-status-badge.open{ background:var(--amber-dim); color:var(--amber); }
.finance-status-badge.paid{ background:var(--green-dim); color:var(--green); }

.finance-category-toggle{ cursor:pointer; }
.finance-category-toggle.selected.gage, .finance-category-toggle.selected.income{ background:var(--green); border-color:var(--green); color:var(--ink); }
.finance-category-toggle.selected.expense{ background:var(--panel-raised); border-color:var(--text-dim); color:var(--text); }
.finance-category-toggle.selected.personal_expense{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.finance-category-toggle.selected.reimbursement, .finance-category-toggle.selected.payout{ background:var(--red); border-color:var(--red); color:var(--red-ink); }
.song-duration-pill::before{
  content:''; width:10px; height:10px; flex-shrink:0;
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}