/*
 * GrooveLinx Design System Rules:
 *
 * 1. No raw colors — use --gl-* tokens
 * 2. No inline spacing — use --gl-space-* tokens
 * 3. No ad hoc components — use gl-* classes
 * 4. Glass only in right rail + overlays (.gl-page-context)
 * 5. Modes (calm/focus) affect accent/tone only, never layout
 * 6. Primary action → .gl-btn-primary | Secondary → .gl-btn-ghost
 * 7. Interactive rows → .gl-row | Status → .gl-chip--*
 */
/* DEADCETERA BAND APP — Dark Theme Shell v3.2 */
:root{--bg-dark:#0f172a;--bg-card:#1e293b;--bg-surface:#334155;--bg-elevated:#283548;--accent:#667eea;--accent-light:#818cf8;--accent-glow:rgba(102,126,234,0.15);--green:#10b981;--red:#ef4444;--yellow:#f59e0b;--blue:#3b82f6;--text:#f1f5f9;--text-muted:#94a3b8;--text-dim:#64748b;--border:rgba(255,255,255,0.06);--border-subtle:rgba(255,255,255,0.04);--radius:10px;--content-max:1100px;
  --gl-safe-top:env(safe-area-inset-top,0px);
  --gl-safe-right:env(safe-area-inset-right,0px);
  --gl-safe-bottom:env(safe-area-inset-bottom,0px);
  --gl-safe-left:env(safe-area-inset-left,0px);
}
*{box-sizing:border-box;}
/* Legibility Batch 5 (2026-06-15): base font 15px→16px. The whole app sizes in
   `em`, so this single change lifts every text element ~6.7% — the documented
   0.72em floor now computes to ~11.5px (was 10.8px), which is why "floor-
   compliant" text still read small. html stays 16px; .lg-chart-doc keeps its
   own --lg-font-size var. Verify dense surfaces (mixer / calendar / setlists)
   for overflow on phone + iPad. */
/* 2026-06-15: do NOT pad the body top with the safe-area — the sticky .topbar
   already owns the top inset (padding-top:env(safe-area-inset-top), needed for
   when it sticks while scrolling). Padding body top too DOUBLE-counted the notch
   (~50px of dead space at rest, "space up top") and only collapsed on scroll.
   Left/right safe-area stay on body. */
body{font-family:'Inter',-apple-system,sans-serif;font-size:16px;background:var(--bg-dark);color:var(--text);min-height:100vh;min-height:100dvh;overflow-x:hidden;padding-left:var(--gl-safe-left);padding-right:var(--gl-safe-right);}
a{color:var(--accent-light);}

/* ===== TOPBAR ===== */
/* Bug #30 fix 2026-05-29: padding-top:env(safe-area-inset-top) so the iOS
   status bar (notch / Dynamic Island) doesn't overlap the topbar's content.
   viewport-fit=cover (set in index.html) is what makes env() return real
   values; without padding-top, content sits at y=0 under the status bar.
   This is the site-wide fix — every page that renders below this sticky
   topbar inherits the safe area automatically. min-height keeps the visible
   content area at the original 56px after the inset is added. */
.topbar{position:sticky;top:0;z-index:1000;background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);border-bottom:1px solid var(--border);padding:env(safe-area-inset-top,0) 16px 0;min-height:56px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(12px);box-sizing:border-box;}
.topbar-left{display:flex;align-items:center;gap:12px;}
.hamburger{background:none;border:none;color:var(--text);cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background 0.15s;}
.hamburger:hover{background:rgba(255,255,255,0.08);}
.topbar-brand{font-size:1.3em;font-weight:800;letter-spacing:-0.5px;display:inline-flex;align-items:center;gap:6px;line-height:1;cursor:pointer;}
.topbar-brand-text{background:linear-gradient(135deg,#60a5fa,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:1;display:inline-block;}
.topbar-right{display:flex;align-items:center;gap:6px;}
.topbar-btn{background:rgba(255,255,255,0.06);border:1px solid var(--border);color:var(--text-muted);padding:6px 10px;border-radius:8px;font-size:0.78em;cursor:pointer;transition:all 0.15s;white-space:nowrap;font-weight:500;font-family:inherit;}
.topbar-btn:hover{background:rgba(255,255,255,0.12);color:white;}
/* CONNECTED — light green bg with dark green text for maximum contrast */
.topbar-btn.connected,
.topbar-btn.connected:hover{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;line-height:1!important;padding-top:0!important;padding-bottom:0!important;
}

/* ===== SLIDE MENU ===== */
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1100;opacity:0;pointer-events:none;transition:opacity 0.25s;}
.menu-overlay.open{opacity:1;pointer-events:auto;}
.slide-menu{position:fixed;top:0;left:-300px;bottom:0;width:280px;z-index:1200;background:var(--bg-card);border-right:1px solid var(--border);transition:left 0.3s cubic-bezier(0.4,0,0.2,1);overflow-y:auto;padding:16px 0;padding-top:calc(16px + var(--gl-safe-top));padding-bottom:calc(16px + var(--gl-safe-bottom));}
.slide-menu.open{left:0;}
.menu-brand{padding:12px 20px 16px;font-size:1.2em;font-weight:800;background:linear-gradient(135deg,#60a5fa,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.menu-section{padding:4px 12px;}
.menu-section-title{font-size:0.6em;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-dim);margin:12px 8px 4px;}
.menu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:all 0.15s;color:var(--text-muted);font-size:0.88em;font-weight:500;border:none;background:none;width:100%;text-align:left;font-family:inherit;}
.menu-item:hover{background:rgba(255,255,255,0.06);color:white;}
.menu-item.active{background:var(--accent-glow);color:var(--accent-light);}
.menu-icon{font-size:1.15em;width:24px;text-align:center;}
.menu-badge{margin-left:auto;background:var(--red);color:white;font-size:0.6em;font-weight:700;padding:2px 6px;border-radius:10px;}
.menu-divider{height:1px;background:var(--border);margin:6px 16px;}

/* ===== LAYOUT ===== */
.main-content{max-width:var(--content-max);margin:0 auto;padding:16px 20px;min-height:calc(100vh - 92px);}
.page-header{margin-bottom:14px;}
.page-header h1{font-size:1.3em;font-weight:800;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;}
.page-header p{color:var(--text-muted);font-size:0.82em;margin-top:2px;}
.hidden{display:none!important;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fade-in{animation:fadeIn 0.15s ease-out;}

/* =============================================================================
   GROOVELINX DESIGN SYSTEM — tokens, modes, components, interactions
   ============================================================================= */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root{
  /* Text hierarchy */
  --gl-text:#f1f5f9;              /* headlines, primary labels */
  --gl-text-secondary:#94a3b8;    /* body, descriptions */
  --gl-text-tertiary:#64748b;     /* metadata, timestamps, hints */
  /* Surfaces */
  --gl-surface:rgba(255,255,255,0.015);
  --gl-surface-raised:rgba(255,255,255,0.025);
  --gl-surface-elevated:rgba(255,255,255,0.04);
  /* Borders */
  --gl-border:rgba(255,255,255,0.05);
  --gl-border-subtle:rgba(255,255,255,0.03);
  /* Interaction */
  --gl-hover:rgba(255,255,255,0.03);
  --gl-active:rgba(255,255,255,0.06);
  --gl-transition:0.15s ease;
  /* Status colors */
  --gl-green:#22c55e;
  --gl-amber:#f59e0b;
  --gl-red:#ef4444;
  --gl-indigo:#818cf8;
  /* Chips */
  --gl-chip-bg:rgba(255,255,255,0.06);
  --gl-chip-border:rgba(255,255,255,0.08);
  /* Spacing */
  --gl-space-xs:4px;
  --gl-space-sm:8px;
  --gl-space-md:16px;
  --gl-space-lg:24px;
  --gl-space-xl:32px;
}

/* ── 2. ADAPTIVE MODES ────────────────────────────────────────────────────── */
/* Default: standard dark theme (no attribute needed) */
/* Calm: evening/low-stimulus — darker bg, muted accent */
body[data-gl-mode="calm"]{--bg-dark:#0c1220;--bg-card:#161f30;--accent:#5b6abf;--accent-light:#7c8ae0;--gl-hover:rgba(255,255,255,0.02)}
/* Focus: pre-gig urgency — amber accent, slightly higher contrast */
body[data-gl-mode="focus"]{--accent:#d97706;--accent-light:#f59e0b;--accent-glow:rgba(245,158,11,0.12);--gl-green:#16a34a}
/* Mode rules: ONLY accent/emphasis/tone change. Layout and readability are stable. */

/* ── 3. INTERACTION RULES ─────────────────────────────────────────────────── */
/* Micro-interactions — all buttons, consistent */
button{transition:transform var(--gl-transition),background var(--gl-transition),opacity var(--gl-transition)}
button:active{transform:scale(0.97)}
/* Row hover — shared across all pages */
.gl-row{padding:8px 4px;cursor:pointer;transition:background var(--gl-transition);border-radius:6px}
.gl-row:hover{background:var(--gl-hover)}
.gl-row--selected{background:var(--gl-active)}
.gl-row--active{background:var(--gl-active);border-left:3px solid var(--accent-light)}
.gl-row--disabled{opacity:0.4;pointer-events:none;cursor:default}
/* Clickable chips */
.gl-chip{font-size:0.65em;font-weight:600;padding:2px 8px;border-radius:4px;background:var(--gl-chip-bg);border:1px solid var(--gl-chip-border);cursor:pointer;transition:background var(--gl-transition);display:inline-flex;align-items:center;gap:3px}
.gl-chip:hover{background:var(--gl-active)}
.gl-chip--green{color:var(--gl-green);border-color:rgba(34,197,94,0.2);background:rgba(34,197,94,0.08)}
.gl-chip--amber{color:var(--gl-amber);border-color:rgba(245,158,11,0.2);background:rgba(245,158,11,0.08)}
.gl-chip--red{color:var(--gl-red);border-color:rgba(239,68,68,0.2);background:rgba(239,68,68,0.08)}
.gl-chip--indigo{color:var(--gl-indigo);border-color:rgba(129,140,248,0.2);background:rgba(99,102,241,0.08)}
/* Semantic aliases */
.gl-chip--success{color:var(--gl-green);border-color:rgba(34,197,94,0.2);background:rgba(34,197,94,0.08)}
.gl-chip--warning{color:var(--gl-amber);border-color:rgba(245,158,11,0.2);background:rgba(245,158,11,0.08)}
.gl-chip--danger{color:var(--gl-red);border-color:rgba(239,68,68,0.2);background:rgba(239,68,68,0.08)}
/* Transition state */
.gl-transitioning{opacity:0.7;transition:opacity 0.3s}

/* ── 4. TYPOGRAPHY HIERARCHY ──────────────────────────────────────────────── */
.gl-page-title{font-size:1.35em;font-weight:800;color:var(--gl-text);letter-spacing:-0.03em;line-height:1.2;margin-bottom:2px}
.gl-page-sub{font-size:0.75em;color:var(--gl-text-tertiary);letter-spacing:0.01em;margin-bottom:16px}
.gl-section-label{font-size:0.65em;font-weight:700;color:var(--gl-text-tertiary);letter-spacing:0.08em;text-transform:uppercase;padding:12px 0 6px}
.gl-confidence{font-size:0.78em;color:var(--gl-text-secondary);opacity:0.7}
.gl-event-line{font-size:0.75em;color:var(--gl-text-tertiary);display:flex;align-items:center;gap:6px}

/* ── 5. COMPONENT RULES ──────────────────────────────────────────────────── */
/* Buttons: primary vs ghost */
.gl-btn-primary{padding:10px 24px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--gl-green),#16a34a);color:white;font-weight:700;font-size:0.88em;cursor:pointer;box-shadow:0 2px 8px rgba(34,197,94,0.15)}
.gl-btn-ghost{padding:6px 12px;border-radius:6px;border:1px solid var(--gl-chip-border);background:var(--gl-chip-bg);color:var(--gl-text-tertiary);font-size:0.72em;font-weight:500;cursor:pointer}
.gl-btn-ghost:hover{background:var(--gl-active);color:var(--gl-text-secondary)}
/* Action row — compact horizontal strip */
.gl-action-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* Right rail guidance hints */
.gl-guidance{font-size:0.72em;color:var(--gl-text-tertiary);padding:3px 0}
/* Focus song row */
.gl-focus-row{display:flex;align-items:center;gap:8px;padding:5px 4px}
.gl-focus-row .gl-focus-title{font-size:0.8em;color:var(--gl-text-secondary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-focus-row .gl-focus-bar{width:60px;height:3px;background:rgba(255,255,255,0.12);border-radius:2px;overflow:hidden;flex-shrink:0}
.gl-focus-row .gl-focus-score{font-size:0.68em;font-weight:700;width:22px;text-align:right;flex-shrink:0}

/* ── 6. LAYOUT ────────────────────────────────────────────────────────────── */
.gl-page{max-width:1060px;margin:0 auto}
.gl-page-split{display:grid;grid-template-columns:1fr 280px;gap:24px;align-items:start}
/* Schedule page: give calendar more room */
.cal-page-split{grid-template-columns:1fr 260px;gap:28px}
.gl-page-primary{min-width:0}
/* Glass: right rail + overlays ONLY */
.gl-page-context{position:sticky;top:16px;min-width:0;background:rgba(15,23,42,0.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:12px;padding:12px;border:1px solid var(--gl-border-subtle)}
@supports not (backdrop-filter:blur(1px)){.gl-page-context{background:var(--bg-card)}}
@media(max-width:768px){.gl-page-split{grid-template-columns:1fr;gap:12px}.gl-page-context{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--gl-surface-raised)}.cal-page-split{grid-template-columns:1fr;gap:12px}}
/* Context cards */
.gl-context-card{padding:12px 14px;border-radius:10px;background:var(--gl-surface);margin-bottom:10px}

/* ===== CALENDAR DAY CELLS ===== */
/* P2 density (schedule_convergence spec): near-square responsive cells.
   The old 132px desktop constant was sized for hover content touch never
   shows — on iPad it rendered tall empty dominoes. */
.gl-day{position:relative;min-height:120px;min-height:var(--cal-cell-h,clamp(60px,calc((100dvh - 380px)/var(--cal-rows,5) - 3px),132px));border-radius:14px;padding:12px;cursor:pointer;transition:box-shadow var(--gl-transition),transform var(--gl-transition),background var(--gl-transition),border-color var(--gl-transition);border:1px solid transparent;display:flex;flex-direction:column}
@media(max-width:1200px){.gl-day{min-height:100px;min-height:var(--cal-cell-h,clamp(56px,calc((100dvh - 360px)/var(--cal-rows,5) - 3px),100px));padding:10px}}
@media(max-width:900px){.gl-day{min-height:86px;min-height:var(--cal-cell-h,clamp(52px,calc((100dvh - 420px)/var(--cal-rows,5) - 3px),86px));padding:8px;border-radius:11px}.gl-day-icon{font-size:1.3em;right:8px;bottom:7px}.gl-day--gig .gl-day-icon{font-size:1.5em}}
@media(max-width:640px){.gl-day{min-height:56px;padding:6px;border-radius:9px}.gl-day-num{font-size:1em}.gl-day-icon{font-size:1.05em;right:6px;bottom:5px}.gl-day--gig .gl-day-icon{font-size:1.2em}.gl-day-vchip{bottom:4px;left:4px;padding:1px 4px}}
.gl-day::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,0.06),transparent 40%);border-radius:inherit;pointer-events:none}
.gl-day:hover{box-shadow:0 10px 28px rgba(0,0,0,0.25);transform:translateY(-2px)}
/* State fills — priority: gig > rehearsal > blocked > best > default */
.gl-day--gig{background:#7A4B12;border:2px solid #F59E0B;color:#FDE68A;box-shadow:0 0 18px rgba(245,158,11,0.35)}
.gl-day--rehearsal{background:#243A75;border-color:#7C9BFF;color:#DCE7FF}
.gl-day--blocked{background:#5A1F24;border-color:#EF4444;color:#FECACA}
.gl-day--meeting{background:#3B2557;border:1px solid #A78BFA;color:#DDD6FE}
.gl-day--soft{background:#2D2A1F;border:1px dashed #D97706;color:#FDE68A;opacity:0.7}
.gl-day--best{background:#163B31;border-color:#22C55E;color:#BBF7D0}
/* P1 touch interaction: hover tooltips are a fine-pointer affordance only.
   On touch devices they fire erratically on tap and stick — the anchored
   popover / inspector / sheet are the touch answers. */
@media (hover: none){#calGrid .gl-day-hover{display:none !important}}
/* AU Phase D verdict paint (open future days; flag gl_grid_verdict_paint).
   The grid answers "how usable is this date?" — red is reserved for real
   risk; one normal absence is an amber bar + chip, never a failure fill. */
.gl-day--vstrong{background:rgba(22,59,49,0.45);border-color:rgba(34,197,94,0.28);color:#A7E8C4;box-shadow:inset 0 -3px 0 rgba(34,197,94,0.35)}
.gl-day--vworkable{background:rgba(255,255,255,0.015);border-color:rgba(255,255,255,0.08);color:var(--gl-text,#e2e8f0)}
.gl-day--vrisky{background:#4A3208;border:1px solid #F59E0B;color:#FDE68A}
.gl-day-vbar{position:absolute;bottom:0;left:0;right:0;height:3px;background:#F59E0B;border-radius:0 0 13px 13px;opacity:0.85}
.gl-day-vbar--dashed{background:repeating-linear-gradient(90deg,#F59E0B 0 7px,transparent 7px 14px)}
.gl-day-vchip{position:absolute;bottom:7px;left:7px;font-size:0.7em;font-weight:800;line-height:1;padding:2px 5px;border-radius:5px;background:rgba(245,158,11,0.16);color:#FCD34D;border:1px solid rgba(245,158,11,0.32);max-width:calc(100% - 30px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-day-vchip--crit{background:rgba(239,68,68,0.16);color:#FCA5A5;border-color:rgba(239,68,68,0.45)}
/* Today + selected layer ON TOP of state fills.
   TODAY must beat every state color (temporal authority) — strong ring +
   glow + a solid day-number pill that reads on red/gold/green/blue alike. */
.gl-day--today{box-shadow:inset 0 0 0 3px #818cf8,0 0 14px rgba(129,140,248,0.55)}
.gl-day--today .gl-day-num{background:#6366f1;color:#fff;border-radius:6px;padding:0 7px;display:inline-block;opacity:1}
.gl-day--selected{box-shadow:0 0 0 2px #A5B4FC,0 8px 24px rgba(0,0,0,0.2)}
/* Content */
.gl-day-num{font-size:1.2em;font-weight:800;opacity:0.95}
.gl-day--blocked .gl-day-num{opacity:0.7}
/* Icons — primary signal */
.gl-day-icon{position:absolute;right:12px;bottom:10px;opacity:0.9;font-size:1.6em}
.gl-day--gig .gl-day-icon{font-size:1.9em;opacity:1}
/* Hover popover */
.gl-day-hover{display:none;position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);min-width:140px;max-width:220px;padding:8px 10px;background:var(--bg-card,#1e293b);border:1px solid var(--gl-border);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,0.3);z-index:30;font-size:0.72em;color:var(--gl-text-secondary);pointer-events:none;white-space:normal}
/* Desktop only: hover popovers. Mobile: disabled — tap goes straight to action */
@media(min-width:641px){.gl-day:hover .gl-day-hover{display:block}}
/* Clamp popover within viewport for edge cells */
.gl-day:first-child .gl-day-hover,.gl-day:nth-child(7n+1) .gl-day-hover{left:0;transform:none}
.gl-day:nth-child(7n) .gl-day-hover{left:auto;right:0;transform:none}
/* Mobile bottom card for date detail */
.gl-day-mobile-card{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9100;background:var(--bg-card,#1e293b);border-top:1px solid var(--gl-border);border-radius:14px 14px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom) + 56px);box-shadow:0 -8px 30px rgba(0,0,0,0.4);max-height:55vh;overflow-y:auto}
.gl-day-mobile-card.is-open{display:block}
/* Pulse for View Conflicts */
@keyframes gl-day-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}50%{box-shadow:0 0 0 4px rgba(239,68,68,0.4),0 0 16px rgba(239,68,68,0.2)}}
.gl-day--pulse{animation:gl-day-pulse 0.8s ease 2}
/* Mobile */
@media(max-width:640px){.gl-day{min-height:64px;padding:6px;border-radius:8px}.gl-day-num{font-size:0.95em;font-weight:700}.gl-day-icon{font-size:1em;right:5px;bottom:4px}.gl-day--gig .gl-day-icon{font-size:1.2em}}
/* External Google event marker — subtle corner dot */
.gl-day-external{position:absolute;top:6px;left:6px;width:6px;height:6px;border-radius:50%;background:var(--gl-indigo);opacity:0.7}
@media(max-width:640px){.gl-day-external{width:4px;height:4px;top:4px;left:4px}}

/* ===== CARDS ===== */
.app-card{background:rgba(255,255,255,0.025);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:10px;transition:background 0.15s,border-color 0.15s,box-shadow 0.15s;}
.app-card:hover{background:rgba(255,255,255,0.04);box-shadow:0 2px 8px rgba(0,0,0,0.15);}
.app-card h3{font-size:0.92em;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;}
.stat-card{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:8px;padding:14px;text-align:center;}
.stat-value{font-size:1.7em;font-weight:800;line-height:1;}
.stat-label{font-size:0.68em;color:var(--text-dim);margin-top:4px;text-transform:uppercase;letter-spacing:0.5px;}
.list-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:transparent;border:none;border-bottom:1px solid var(--border-subtle);border-radius:0;margin-bottom:0;transition:background 0.12s;}
.list-item:hover{background:rgba(255,255,255,0.04);}

/* ===== BUTTONS ===== */
.btn{padding:8px 16px;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:0.85em;transition:all 0.12s;display:inline-flex;align-items:center;gap:6px;font-family:inherit;}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--accent);color:white;}.btn-primary:hover{background:var(--accent-light);box-shadow:0 2px 12px rgba(102,126,234,0.25);}
.btn-success{background:var(--green);color:white;}.btn-success:hover{box-shadow:0 2px 12px rgba(16,185,129,0.25);}
.btn-danger{background:var(--red);color:white;}
.btn-ghost{background:rgba(255,255,255,0.04);color:var(--text-muted);border:1px solid var(--border);}
.btn-ghost:hover{background:rgba(255,255,255,0.08);color:white;}
.btn-sm{padding:5px 10px;font-size:0.78em;}

/* ===== FORMS ===== */
.app-input,.app-select,.app-textarea{width:100%;padding:10px 12px;background:rgba(255,255,255,0.06)!important;border:1px solid var(--border)!important;border-radius:8px;color:var(--text)!important;font-size:0.9em;font-family:inherit;}
.app-input:focus,.app-select:focus,.app-textarea:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(102,126,234,0.1);}
.app-input::placeholder{color:var(--text-dim);}
.app-textarea{resize:vertical;min-height:80px;}
.app-select option{background:var(--bg-card);color:var(--text);}
.form-label{display:block;font-size:0.78em;font-weight:600;color:var(--text-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.03em;}
.form-row{margin-bottom:12px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:600px){.form-grid{grid-template-columns:1fr;}}

/* ===== TABS ===== */
.tab-bar{display:flex;gap:4px;overflow-x:auto;padding:4px;background:rgba(255,255,255,0.03);border-radius:10px;margin-bottom:16px;scrollbar-width:none;}
.tab-bar::-webkit-scrollbar{display:none;}
.tab-btn{padding:8px 14px;border:none;background:none;color:#64748b;font-size:0.78em;font-weight:600;cursor:pointer;border-radius:8px;white-space:nowrap;transition:all 0.15s;font-family:inherit;}
.tab-btn:hover{color:#cbd5e1;background:rgba(255,255,255,0.06);}
.tab-btn.active{background:var(--accent);color:#ffffff!important;}

/* ======================================================================
   SONG LIST — HIGH-PRIORITY DARK THEME FIX
   ====================================================================== */
#songDropdown{max-height:50vh;overflow-y:auto;border-radius:10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.15) transparent;}
#songDropdown::-webkit-scrollbar{width:6px;}
#songDropdown::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px;}

/* EVERY child div in songDropdown = a song row */
#songDropdown > div {
    display:grid!important;
    grid-template-columns:1fr 48px 50px 68px 48px!important;
    align-items:center!important;
    gap:6px!important;
    padding:10px 12px!important;
    background:#1e293b!important;
    border:1px solid rgba(255,255,255,0.06)!important;
    border-radius:6px!important;
    margin-bottom:2px!important;
    cursor:pointer!important;
    color:#f1f5f9!important;
    position:relative!important;
}
#songDropdown > div:hover{background:#232f45!important;border-color:rgba(255,255,255,0.1)!important;}
#songDropdown > div.selected{background:#262f48!important;border:1px solid rgba(99,102,241,0.3)!important;border-left:3px solid #667eea!important;}
#songDropdown > div.selected .song-name{color:#e0e7ff!important;font-weight:700!important;}
#songDropdown > div.selected .song-badge{opacity:1!important;}
#songDropdown > div.selected .status-badge{opacity:1!important;}
/* Table-layout rows (current): the selected song is a <tr.song-item>, NOT a
   direct-child <div>, so the rules above never matched it — that's why the
   keyboard/click selection showed no highlight. (Drew 2026-06-19) */
#songDropdown tr.song-item.selected{background:#262f48!important;}
#songDropdown tr.song-item.selected td:first-child{box-shadow:inset 3px 0 0 #667eea!important;color:#e0e7ff!important;font-weight:800!important;}
#songDropdown tr.song-item:hover{background:#232f45!important;}
#songDropdown > div:not(.song-item){display:block!important;grid-template-columns:none!important;background:transparent!important;border:none!important;margin:0!important;padding:0!important;}

/* Song name text — MUST be visible */
#songDropdown > div .song-name,
#songDropdown > div > span:first-child,
.song-item .song-name,
.song-item > span:first-child {
    color:#f1f5f9!important;
    font-weight:500!important;
    font-size:0.92em!important;
    flex:1!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}

/* Band badge pill */
.song-badge{flex-shrink:0!important;margin-left:auto!important;font-size:0.68em!important;padding:3px 10px!important;border-radius:20px!important;font-weight:700!important;text-align:center!important;min-width:36px!important;letter-spacing:0.03em!important;text-transform:uppercase!important;}
.song-badge.gd{background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.25);}
.song-badge.jgb{background:rgba(59,130,246,0.15);color:#60a5fa;border:1px solid rgba(59,130,246,0.25);}
.song-badge.wsp{background:rgba(245,158,11,0.15);color:#fbbf24;border:1px solid rgba(245,158,11,0.25);}
.song-badge.phish{background:rgba(16,185,129,0.15);color:#34d399;border:1px solid rgba(16,185,129,0.25);}
.song-badge.abb{background:rgba(236,72,153,0.15);color:#f472b6;border:1px solid rgba(236,72,153,0.25);}
.song-badge.goose{background:rgba(168,85,247,0.15);color:#c084fc;border:1px solid rgba(168,85,247,0.25);}
.song-badge.dmb{background:rgba(20,184,166,0.15);color:#2dd4bf;border:1px solid rgba(20,184,166,0.25);}

/* Harmony + Status badges inline */
.harmony-badge{
    flex-shrink:0!important;
    font-size:0.85em!important;
    color:var(--accent-light)!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    vertical-align:middle!important;
}
.northstar-badge{
    flex-shrink:0!important;
    font-size:0.85em!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    vertical-align:middle!important;
    cursor:default!important;
}
/* Badges container — horizontal row, vertically centered */
.song-badges{
    display:inline-flex!important;
    align-items:center!important;
    gap:3px!important;
    height:100%!important;
    flex-shrink:0!important;
}
/* Status badge cell */
.song-status-cell{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-shrink:0!important;
}
.status-badge{flex-shrink:0!important;white-space:nowrap!important;font-size:0.7em!important;padding:2px 8px!important;border-radius:20px!important;font-weight:700!important;color:white!important;}

/* ===== STEP CARDS ===== */
.container{max-width:960px;margin:0 auto;}
.step-card{background:var(--bg-card)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;padding:20px!important;margin-bottom:16px!important;}
/* Songs page: remove card wrapper on primary list view */
#step1.step-card{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;margin-bottom:var(--gl-space-sm)!important;border-radius:0!important}
.step-card h2{color:var(--text)!important;margin:0!important;padding:0!important;line-height:1.2!important;}
.step-card p,.subtitle{color:var(--text-muted)!important;margin-bottom:16px!important;}
.search-input::placeholder{color:var(--text-dim)!important;}
.search-input:focus{border-color:var(--accent)!important;outline:none!important;box-shadow:0 0 0 3px rgba(102,126,234,0.15)!important;}
.filter-btn{color:var(--text-muted)!important;border-color:var(--border)!important;background:rgba(255,255,255,0.04)!important;}
.filter-btn.active,.filter-btn:hover{background:var(--accent)!important;color:white!important;border-color:var(--accent)!important;}

/* ===== RESOURCE SECTIONS ===== */
.resource-section{background:rgba(255,255,255,0.02)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;padding:16px!important;margin-bottom:12px!important;}
.section-header h3{color:var(--text)!important;}
.section-header p{color:var(--text-muted)!important;}
.secondary-btn{background:rgba(255,255,255,0.06)!important;color:var(--text-muted)!important;border:1px solid var(--border)!important;border-radius:8px!important;}
.secondary-btn:hover{background:rgba(255,255,255,0.1)!important;color:white!important;}
.primary-btn{background:var(--accent)!important;color:white!important;border-radius:8px!important;}
.chart-btn{background:rgba(255,255,255,0.04)!important;color:var(--text-muted)!important;border:1px solid var(--border)!important;border-radius:8px!important;}
.chart-btn-primary{background:var(--accent)!important;color:white!important;border-color:var(--accent)!important;}
.download-card{background:rgba(255,255,255,0.03)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;padding:16px!important;}

/* ===== ICONS ON DARK BG ===== */
.resource-section [style*="color: #"]{color:var(--text-muted)!important;}
.resource-section button[style]{color:var(--text-muted)!important;}
.version-header button{color:var(--text-muted)!important;}
.note-header [style*="color"]{color:var(--text-muted)!important;}
#practiceTracksContainer [style*="color: #4"]{color:var(--text-muted)!important;}
#spotifyVersionsContainer [style*="color: #4"]{color:var(--text-muted)!important;}

/* ===== REFERENCE VERSIONS ===== */
.version-title,.version-badge{color:var(--text)!important;}
.vote-chip{color:var(--text)!important;background:rgba(255,255,255,0.06)!important;border:1px solid var(--border)!important;border-radius:20px!important;padding:4px 10px!important;font-size:0.8em!important;}
.vote-chip.yes{background:rgba(16,185,129,0.85)!important;color:white!important;border-color:rgba(16,185,129,0.5)!important;font-weight:600!important;}
.spotify-play-btn{color:white!important;display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:20px;border:none;cursor:pointer;font-weight:700;font-size:0.9em;}
.spotify-play-btn *{color:white!important;}
/* Step number + title alignment - belt AND suspenders */
.step-number{background:rgba(99,102,241,0.15)!important;color:rgba(129,140,248,0.6)!important;width:28px;height:28px;min-width:28px;border-radius:50%;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:700;font-size:0.78em;flex-shrink:0;line-height:1;vertical-align:middle;}
.step-card > div:first-child{display:flex!important;align-items:center!important;gap:12px!important;flex-direction:row!important;}
.step-card > div:first-child > *{align-self:center!important;}
.step-card > div:first-child > h2{margin:0!important;padding:0!important;line-height:1.1!important;display:block!important;flex:1;}
.spotify-version-card{background:rgba(255,255,255,0.03)!important;border:1px solid var(--border)!important;border-radius:10px!important;padding:16px!important;}
.spotify-version-card.default{border-color:var(--accent)!important;background:rgba(102,126,234,0.08)!important;}

/* ===== MODALS + METADATA ===== */
.modal{background:rgba(0,0,0,0.7)!important;}
.modal-content{background:var(--bg-card)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;}
.close-btn{color:var(--text-muted)!important;}
.song-metadata{background:rgba(255,255,255,0.03)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;}
.song-metadata span{color:var(--text-muted)!important;}
.song-metadata select,.song-metadata input{background:rgba(255,255,255,0.06)!important;color:var(--text)!important;border:1px solid var(--border)!important;}

/* ===== FORM SECTIONS ===== */
#addTabForm,#practiceTrackAddForm{background:rgba(255,255,255,0.03)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;}
#addTabForm h4,#practiceTrackAddForm h4{color:var(--text)!important;}
#addTabForm label,#practiceTrackAddForm label{color:var(--text-muted)!important;}
#addTabForm input,#practiceTrackAddForm input,#addTabForm select,#practiceTrackAddForm select{background:rgba(255,255,255,0.06)!important;color:var(--text)!important;border:1px solid var(--border)!important;}

/* ===== REHEARSAL + HARMONY CARDS ===== */
.rehearsal-note-card{background:rgba(255,255,255,0.03)!important;border:1px solid var(--border)!important;border-radius:8px!important;padding:12px!important;margin-bottom:8px!important;}
.rehearsal-note-card .note-header{color:var(--text-muted)!important;}
.rehearsal-note-card .note-header strong{color:var(--text)!important;}
.rehearsal-note-card p{color:var(--text-muted)!important;}
.rehearsal-note-card .note-content{color:var(--text,#f1f5f9)!important;}
.harmony-card{background:rgba(255,255,255,0.03)!important;border:1px solid var(--border)!important;border-radius:10px!important;padding:14px!important;margin-bottom:8px!important;}
.harmony-lyric{color:var(--accent-light)!important;font-weight:600!important;}
.part-row{color:var(--text-muted)!important;}
.part-singer{color:var(--accent-light)!important;font-weight:600!important;}
.practice-notes-box{background:rgba(255,255,255,0.03)!important;border:1px solid var(--border)!important;border-radius:8px!important;padding:10px!important;color:var(--text-muted)!important;}

/* ===== STEM BUTTONS ===== */
.stem-button{background:rgba(255,255,255,0.06)!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:8px!important;}
.stem-button:hover{background:rgba(255,255,255,0.1)!important;}

/* ===== DARK THEME CATCH-ALL ===== */
[style*="background: white"],[style*="background:#fff"],[style*="background: #fff"]{background:rgba(255,255,255,0.04)!important;}
[style*="background: #f9fafb"],[style*="background:#f9fafb"],[style*="background: #f7fafc"]{background:rgba(255,255,255,0.03)!important;}
[style*="background: #fffbeb"],[style*="background: #fef3c7"],[style*="background: #fde68a"]{background:rgba(245,158,11,0.1)!important;}
[style*="background: #f5f7ff"]{background:rgba(102,126,234,0.08)!important;}
[style*="background: #f3f4f6"]{background:rgba(255,255,255,0.04)!important;}
[style*="color: #2d3748"],[style*="color:#2d3748"],[style*="color: #1f2937"],[style*="color:#1f2937"],[style*="color: #333"]{color:var(--text)!important;}
[style*="color: #4a5568"],[style*="color:#4a5568"],[style*="color: #4b5563"]{color:var(--text-muted)!important;}
[style*="color: #718096"],[style*="color: #6b7280"],[style*="color: #9ca3af"]{color:var(--text-dim)!important;}
[style*="border-left: 4px solid"]{border-left-color:var(--accent)!important;}
[style*="border: 2px solid #e2e8f0"]{border-color:var(--border)!important;}
[style*="border: 2px solid #e5e7eb"]{border-color:var(--border)!important;}

header{background:transparent!important;border-bottom:none!important;}
header h1{color:var(--text)!important;}
.reset-btn{background:rgba(255,255,255,0.06)!important;color:var(--text-muted)!important;border:1px solid var(--border)!important;border-radius:8px!important;}

/* Footer */
footer{color:var(--text-dim)!important;}
footer p{color:var(--text-dim)!important;}

/* Safe-area for full-screen overlays (inset:0 — bypass body padding) */
#stonerOverlay,#slPlayerOverlay,#gmOverlay,#rmOverlay,.gl-spot-overlay,#spReviewOverlay,#glSpotifyDialog,#glPlaybackFallback,#glPlayConfirm{
    padding-top:var(--gl-safe-top)!important;
    padding-bottom:var(--gl-safe-bottom)!important;
    padding-left:var(--gl-safe-left)!important;
    padding-right:var(--gl-safe-right)!important;
}
/* Fixed top bars — offset below notch */
#feedBackBar,#gl-pwa-install,#gl-pwa-update,#glPersistPlaying{
    top:var(--gl-safe-top)!important;
}
/* Fixed bottom bars — offset above home indicator */
#slpNowPlayingBar,#glNextSongBar,#glPlaybackBar{
    padding-bottom:calc(10px + var(--gl-safe-bottom))!important;
}

@media(max-width:500px){
    .form-grid{grid-template-columns:1fr;}
    /* Bug #30 fix 2026-05-29: preserve safe-area-top in narrow-mobile override. */
    .topbar{padding:env(safe-area-inset-top,0) 10px 0;}
    .card-grid{grid-template-columns:repeat(2,1fr);}
}

/* Task #10 (mobile scheduling audit): larger tap targets on the Google panel
   admin button bar. Desktop keeps the small 0.62em look; mobile boosts to a
   readable, tappable size so scheduling workflows aren't thumb-hostile. */
@media(max-width:640px){
    #calGooglePanel button{min-height:36px}
    #calGooglePanel button[onclick*="_calDedupeGoogle"],
    #calGooglePanel button[onclick*="_calRefreshGigTimes"],
    #calGooglePanel button[onclick*="_calCleanLegacyBusy"],
    #calGooglePanel button[onclick*="_calMigrateMisplacedEvents"],
    #calGooglePanel button[onclick*="_calShowVisibilityHelp"],
    #calGooglePanel button[onclick*="_calShowSyncActivity"],
    #calGooglePanel button[onclick*="_calShowManageConnections"],
    #calGooglePanel button[onclick*="_calShowAvailabilitySettings"],
    #calGooglePanel button[onclick*="_calCopyBandSyncInvite"]{
        font-size:0.78em!important;
        padding:6px 10px!important;
        opacity:0.85!important;
        border-radius:6px!important;
    }
    /* New hidden-event + stale-member banner buttons — ensure tappable */
    #calGooglePanel button[onclick*="_calShowHiddenEventDetails"],
    #calGooglePanel button[onclick*="_calShowVisibilityHelp"]{
        min-height:40px
    }
}

/* Gig notes / performance tips — force dark theme, no yellow */
#gigNotesSection, #gigNotesSection * { background-color: unset; }
#gigNotesSection { background: rgba(255,255,255,0.02) !important; border: 1px solid var(--border) !important; border-left: 1px solid var(--border) !important; }
.gig-notes-box { background: transparent !important; color: var(--text) !important; }
.gig-notes-box ul { list-style: none; padding: 0; margin: 0; }
.gig-notes-box li, .gig-notes-box li span { color: var(--text) !important; }

/* Red backgrounds always get white text — all variants */
[style*="background:#ef4444"],[style*="background: #ef4444"],[style*="background:#dc2626"],[style*="background: #dc2626"],
[style*="background:#ff0000"],[style*="background: #ff0000"],[style*="background:#e00"],[style*="background: #e00"],
[style*="background:red"],[style*="background: red"]{color:white!important;}
[style*="background:#ef4444"] *,[style*="background: #ef4444"] *,[style*="background:#dc2626"] *,[style*="background: #dc2626"] *,
[style*="background:#ff0000"] *,[style*="background: #ff0000"] *{color:white!important;}
.btn-danger,.btn-danger *{color:white!important;}
button[style*="background: #ef4444"],button[style*="background:#ef4444"],
button[style*="background: #dc2626"],button[style*="background:#dc2626"],
button[style*="background: #ff0000"],button[style*="background:#ff0000"]{color:white!important;}
/* Mobile: karaoke & multi-track responsive */
@media(max-width:600px){
    .form-grid{grid-template-columns:1fr!important;}
    [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}
    #mtKaraokeSheet{max-height:35vh!important;}
}

/* Purple/accent backgrounds always white text */
[style*="background:#667eea"],[style*="background: #667eea"],[style*="background:#8b5cf6"],[style*="background: #8b5cf6"]{color:white!important;}
[style*="background:#667eea"] *,[style*="background: #667eea"] *,[style*="background:#8b5cf6"] *,[style*="background: #8b5cf6"] *{color:white!important;}
.spotify-play-btn{color:white!important;}

/* ==========================================================================
   MOBILE RESPONSIVE — COMPREHENSIVE
   Breakpoints: 480px (phone), 640px (large phone / small tablet)
   ========================================================================== */

/* ── Song list: on mobile collapse badges to save space ── */
@media(max-width:640px) {
    /* Song row: name | mic | status | band — tighter */
    #songDropdown > div {
        grid-template-columns: 1fr 36px 40px 56px 40px !important;
        padding: 9px 10px !important;
        gap: 3px !important;
    }
    .song-name, .song-item .song-name { font-size: 0.85em !important; }
    .song-badge { font-size: 0.6em !important; padding: 2px 6px !important; min-width: 28px !important; }
    .status-badge { font-size: 0.62em !important; padding: 2px 5px !important; }

    /* Filter bar: stack into 2-col grid on small screens */
    .filter-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        align-items: stretch !important;
    }
    /* ⓘ icons go full width across both columns */
    .filter-row > span[style*="cursor:help"] { display: none !important; }
    /* Band and status selects fill their grid cell */
    #bandFilter, #statusFilter { width: 100% !important; min-width: unset !important; font-size: 0.78em !important; padding: 6px 8px !important; }
    /* Checkbox labels fill their cell */
    .filter-row label { min-width: unset !important; width: 100% !important; font-size: 0.78em !important; justify-content: center !important; }

    /* Step cards: reduce padding */
    .step-card { padding: 14px !important; }
    .step-card > div:first-child { gap: 8px !important; }
    .step-card > div:first-child > h2 { font-size: 1em !important; }
    .step-number { width: 24px !important; height: 24px !important; min-width: 24px !important; font-size: 0.72em !important; }

    /* Song dropdown: taller scroll area on phone */
    #songDropdown { max-height: 40vh !important; }

    /* Topbar: tighten */
    /* Bug #30 fix 2026-05-29: preserve safe-area-top in @640 override. */
    .topbar { padding: env(safe-area-inset-top,0) 8px 0 !important; }
    .topbar-brand { font-size: 1em !important; }
    .topbar-btn { padding: 5px 8px !important; font-size: 0.72em !important; }

    /* Main content padding */
    .main-content { padding: 10px 10px !important; }
    .app-card { padding: 12px !important; }
    #calendarInner .app-card:first-child { padding: 12px 0px !important; }
    #calendarInner { margin: 0 -10px; }
    #calendarInner .app-card:first-child { border-radius: 0 !important; border-left: none !important; border-right: none !important; }
    .resource-section { padding: 12px !important; }

    /* Page header */
    .page-header h1 { font-size: 1.15em !important; }

    /* Vote chips — wrap cleanly */
    .votes-container { flex-wrap: wrap !important; gap: 4px !important; }
    .vote-chip { font-size: 0.72em !important; padding: 3px 8px !important; }

    /* Spotify play button full width on mobile */
    .spotify-play-btn { width: 100% !important; justify-content: center !important; margin-top: 8px !important; }

    /* Harmony studio / multi-track */
    .mt-track { padding: 8px !important; }
    
    /* Calendar month nav */
    .btn-sm { font-size: 0.72em !important; padding: 4px 8px !important; }
}

/* ── Very small phones (375px and below) ── */
@media(max-width:400px) {
    #songDropdown > div {
        grid-template-columns: 1fr 20px 60px !important; /* drop band badge column */
        padding: 8px !important;
    }
    /* Hide band badge + view button on very small phones — it's in the filter anyway */
    .song-badge { display: none !important; }
    .song-drawer-btn { display: none !important; }
    .song-name { font-size: 0.82em !important; }
    .topbar-brand { font-size: 0.9em !important; }
}

/* ── Fix inline-style grids that don't respond to CSS overrides ── */
@media(max-width:640px) {
    /* Section title row: step number + h2 always horizontal */
    [style*="display:flex"][style*="align-items:center"] > .step-number { flex-shrink: 0 !important; }

    /* Two-column grids inside cards → single column */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

    /* Member crib notes grid → single column */
    [style*="grid-template-columns:1fr auto"],
    [style*="grid-template-columns: 1fr auto"] { grid-template-columns: 1fr !important; }

    /* Song DNA flex rows → stack */
    [style*="display:flex"][style*="gap:12px"][style*="align-items:center"],
    [style*="display:flex"][style*="gap:16px"][style*="align-items:center"] { flex-wrap: wrap !important; }

    /* Chord/key/BPM metadata row */
    .song-metadata, [id="songMetaRow"] { flex-wrap: wrap !important; gap: 6px !important; }

    /* Practice track cards */
    #practiceTracksContainer [style*="display:flex"] { flex-wrap: wrap !important; }

    /* Social media profile tiles: 3-col on phone */
    #socialProfileLinks { grid-template-columns: repeat(3, 1fr) !important; }

    /* Tab bar scrolls horizontally — already set, just enforce */
    .tab-bar { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

    /* Woodshed section headers */
    .section-header h3 { font-size: 0.9em !important; }

    /* Harmony cards */
    .harmony-card { padding: 10px !important; }

    /* Calendar events list — buttons don't overflow */
    #calendarEvents .list-item { flex-wrap: wrap !important; gap: 4px !important; }

    /* Performance Tips bullets */
    #gigNotesContainer li { flex-wrap: wrap !important; color: #f1f5f9 !important; }
    #gigNotesContainer li span { color: #f1f5f9 !important; }
    #gigNotesContainer p { color: #94a3b8 !important; }
    #gigNotesContainer button { color: #f1f5f9 !important; }

    /* Filter checkbox labels: don't force min-width */
    label[style*="min-width:140px"] { min-width: unset !important; flex: 1 !important; }
    
    /* Setlist cards */
    .setlist-card [style*="display:flex"] { flex-wrap: wrap !important; }
}

/* ── Touch targets: ensure all buttons are at least 44px tall on mobile ── */
@media(max-width:640px) {
    .btn, .tab-btn, .menu-item { min-height: 40px !important; }
    .btn-sm { min-height: 34px !important; }
    input[type="checkbox"] { width: 18px !important; height: 18px !important; }
}

/* ── Song metadata row: wrap on mobile ── */
.meta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media(max-width:640px) {
    .meta-row { gap: 8px !important; }
    .meta-item { flex: 1 1 calc(50% - 8px); min-width: 120px; }
    .meta-item .app-select, .meta-item .app-input { width: 100% !important; }
    /* Song structure summary — don't overflow */
    #structureSummary, [id*="structure"] { font-size: 0.78em !important; word-break: break-word !important; }
    /* Search input full width */
    .search-input, #songSearch { font-size: 0.9em !important; }
    /* Step 2 tabs */
    .tab-bar .tab-btn { padding: 7px 10px !important; font-size: 0.72em !important; }
    /* Version cards */
    .spotify-version-card { padding: 12px !important; }
    /* Personal tabs member cards */
    #personalTabsContainer > div > div { padding: 10px !important; }
    /* Harmony studio track controls — stack */
    .mt-track > div[style*="display:flex"] { flex-wrap: wrap !important; }
    /* Setlists page cards */
    #setlistsList .app-card [style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap !important; gap: 6px !important; }
    /* Gigs page */
    #gigsList .app-card [style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap !important; gap: 6px !important; }
    /* Calendar */
    #calendarInner .app-card [style*="grid-template-columns:repeat(7"] { gap: 1px !important; }
    /* Social media profiles 3x2 grid */
    #socialProfileLinks { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
    /* Help page */
    .app-card [style*="grid-template-columns: repeat"] { grid-template-columns: 1fr !important; }
}

/* Ensure topbar sign-in button text doesn't truncate on small screens */
@media(max-width:480px) {
    #googleDriveAuthBtn { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-right { gap: 4px !important; }
}

/* ── Notation / member icons in Personal Tabs — force visible ── */
#personalTabsContainer [style*="font-size:1.2em"],
#personalTabsContainer span[style*="font-size:1.2"] {
    filter: none !important;
    color: var(--text) !important;
    -webkit-text-fill-color: unset !important;
}

/* ── Song row on mobile: when status badge is present, drop band badge ── */
@media(max-width:580px) {
    /* Mobile: name expands, badges auto-size, hide band badge */
    #songDropdown > div {
        grid-template-columns: 1fr auto auto !important;
    }
    /* Hide band badge on narrow screens — visible in filter dropdown */
    #songDropdown > div .song-badge { display: none !important; }
    #songDropdown > div .status-badge { font-size: 0.62em !important; padding: 2px 5px !important; }
    #songDropdown > div .northstar-badge { font-size: 0.78em !important; }
    #songDropdown > div .harmony-badge { font-size: 0.78em !important; }
}

/* ── Structure section: stack to single col on mobile ── */
@media(max-width:500px) {
    #songStructureContainer > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── Meta row items: don't let status select overflow ── */
@media(max-width:640px) {
    .meta-row { gap: 6px !important; }
    #songStatusSelect { min-width: 100px !important; font-size: 0.78em !important; }
    #leadSingerSelect { min-width: 80px !important; font-size: 0.78em !important; }
    #songKeySelect { min-width: 55px !important; font-size: 0.78em !important; }
    #songBpmInput { width: 52px !important; font-size: 0.78em !important; }
}

/* ── Harmony members row: wraps to new line cleanly ── */
#harmonyMembersRow {
    flex-wrap: wrap !important;
}
#harmonyMembersRow label {
    white-space: nowrap;
}

/* ── Hamburger menu: visible item separators on mobile ── */
@media(max-width:768px) {
    .menu-item {
        border-bottom: 1px solid var(--border) !important;
        border-radius: 0 !important;
        padding: 12px 16px !important;
    }
    .menu-item:last-child { border-bottom: none !important; }
    .menu-section { padding: 0 !important; }
    .menu-section-title {
        border-bottom: 1px solid var(--border) !important;
        border-top: 1px solid var(--border) !important;
        padding: 6px 16px !important;
        margin: 0 !important;
        background: rgba(255,255,255,0.02) !important;
    }
    .slide-menu { width: 260px !important; }
}

/* ── Step card header: DEFINITIVE vertical centering fix ── */
/* Belt, suspenders, AND duct tape */
.step-card > div:first-child,
.step-card > div:first-child[style] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}
.step-number,
.step-card > div:first-child > .step-number,
.step-card > div:first-child > div.step-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}
.step-card > div:first-child h2,
.step-card > div:first-child > h2 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    align-self: center !important;
    flex: 1 !important;
    display: block !important;
    /* Remove any inherited transforms that could shift it */
    transform: none !important;
    position: static !important;
}

/* ── Other / Custom band badge ── */
.song-badge.other { background:rgba(148,163,184,0.15); color:#94a3b8; border:1px solid rgba(148,163,184,0.25); }

/* ── Custom song indicator in song list ── */
.song-item[data-custom="true"] .song-name::after {
    content: ' ✨';
    font-size: 0.7em;
    opacity: 0.6;
}

/* ── GLOBAL: All colored/filled buttons always get white text ── */
.btn-primary, .btn-primary *,
.btn-danger,  .btn-danger *,
.btn-success, .btn-success *,
.btn-warning, .btn-warning *,
button[style*="background:#"],
button[style*="background:var(--accent)"],
button[style*="background:var(--red)"],
button[style*="background:var(--green)"],
button[style*="background:#ef4444"],
button[style*="background:#10b981"],
button[style*="background:#6366f1"],
button[style*="background:rgba(29,185,84"],
button[style*="background:rgba(255,0,0"],
button[style*="background:rgba(255,85,0"],
button[style*="background:rgba(29"],
.add-resource-btn,
#addPracticeTrackBtn,
.spotify-play-btn {
    color: white !important;
}

/* ── Practice tracks grid: clip overflow ── */
#practiceTracksContainer [style*="grid-template-columns:1fr 1fr"] > div,
#practiceTracksContainer > div > div {
    overflow: hidden;
    min-width: 0;
}
#practiceTracksContainer a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}
/* Force the whole practice tracks container to not overflow its card */
#practiceTracksContainer {
    overflow: hidden;
    max-width: 100%;
}
.resource-section {
    overflow: hidden;
    max-width: 100%;
}

/* ── Connected button: hide text label on very small screens ── */
@media(max-width:400px) {
    .conn-label { display: none !important; }
    .hamburger svg { width: 22px !important; height: 22px !important; display: block !important; }
}
/* ── Ensure hamburger SVG always renders ── */
.hamburger svg { width: 22px; height: 22px; display: block; flex-shrink: 0; }

/* ==========================================================================
   MOBILE POLISH SPRINT — iPhone small (375px) targeted fixes
   ========================================================================== */

/* ── Playlist player modal: compact on small phones ── */
@media(max-width:480px) {
    /* Now Playing card: tighter padding */
    #plPlayerModal > div:nth-child(3) {
        padding: 14px 14px 12px !important;
    }
    /* Now Playing title: slightly smaller */
    #plPlayerModal [style*="font-size:1.15em"] {
        font-size: 1em !important;
    }
    /* Party bar: stack presence + buttons */
    #plPartyBar > div {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    /* Queue rows: tighter */
    #plQueueList > div {
        padding: 8px 12px !important;
    }
    /* Player action buttons: wrap cleanly */
    #plPlayerModal [style*="display:flex"][style*="flex-wrap:wrap"] {
        gap: 6px !important;
    }
    /* Start Party button full-width on small screens */
    #plPlayerModal button[onclick="plPartyStart()"] {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 4px !important;
    }
}

/* ── Ref version vote chips: wrap to 2-3 per row on mobile ── */
@media(max-width:480px) {
    .votes-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
    }
    .vote-chip {
        text-align: center !important;
        justify-content: center !important;
        font-size: 0.75em !important;
        padding: 6px 4px !important;
        min-height: 36px !important;
    }
    /* Ref version card: full-width play button */
    .spotify-version-card .spotify-play-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    /* Ref version card: reduce padding */
    .spotify-version-card {
        padding: 12px !important;
    }
}

/* ── Song detail step cards: reduce padding on small phones ── */
@media(max-width:480px) {
    .step-card {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }
    .step-card > p.subtitle {
        font-size: 0.8em !important;
        margin-bottom: 10px !important;
    }
    .resource-section {
        padding: 10px !important;
        margin-bottom: 8px !important;
    }
    .section-header h3 {
        font-size: 0.88em !important;
    }
    .section-header p {
        font-size: 0.78em !important;
    }
}

/* ── Topbar: hide "Connect" text on very small screens, show icon only ── */
@media(max-width:375px) {
    #googleDriveAuthBtn .conn-text { display: none !important; }
    .topbar-brand { font-size: 0.92em !important; }
}

/* ── Connect button: pulsing glow when signed out to drive attention ── */
/* glSignInPulse is already injected by updateDriveAuthButton() in app.js */
/* Additional arrow nudge injected alongside the button — see .connect-arrow-nudge */
.connect-arrow-nudge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7em;
    color: #818cf8;
    font-weight: 800;
    animation: connectArrowBounce 1.2s ease-in-out infinite;
    pointer-events: none;
    flex-shrink: 0;
    margin-right: 2px;
}
@keyframes connectArrowBounce {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50%       { transform: translateX(4px); opacity: 0.6; }
}

/* ── Mobile topbar: compress on small phones ── */
@media(max-width:480px) {
    /* Hide the help ? button on mobile — it's in the hamburger menu */
    #glHelpBtn { display: none !important; }
    /* Give topbar-right slightly more room */
    .topbar-right { gap: 4px !important; }
    /* Connect button: slightly smaller padding but keep visible */
    #googleDriveAuthBtn.topbar-btn:not([style*="border-radius:50%"]) {
        padding: 5px 10px !important;
        font-size: 0.75em !important;
    }
}

@media(max-width:390px) {
    /* Very small iPhones — also shrink gear + brand */
    .topbar-brand { font-size: 0.92em !important; gap: 4px !important; }
    .topbar-brand img { width: 22px !important; height: 22px !important; }
    .topbar-btn { padding: 5px 7px !important; font-size: 0.72em !important; }
}

/* ── Playlist index: card action buttons wrap on small phones ── */
@media(max-width:480px) {
    /* Playlist card button row: stack to 2 rows */
    #plList .app-card [style*="display:flex"][style*="flex-shrink:0"] {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 4px !important;
        max-width: 80px !important;
    }
    /* Playlist name: allow wrapping */
    #plList .app-card [style*="font-weight:700"] {
        white-space: normal !important;
        word-break: break-word !important;
    }
    /* Progress bars: tighter */
    #plList .app-card [style*="gap:5px"] {
        gap: 3px !important;
    }
}

/* ── Practice track grid: single column on small phones ── */
@media(max-width:480px) {
    #practiceTracksContainer > div[style*="grid-template-columns:1fr 1fr"],
    #practiceTracksContainer > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Audio player: don't let it overflow */
    #practiceTracksContainer audio {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ── Add ref version modal: full-screen on small phones ── */
@media(max-width:480px) {
    #addRefModal > div {
        max-height: 92vh !important;
        overflow-y: auto !important;
        padding: 16px !important;
        border-radius: 14px 14px 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    #addRefModal {
        align-items: flex-end !important;
    }
}

/* ── Harmony member checkboxes: 3-col grid on mobile ── */
@media(max-width:480px) {
    #harmonyMembersRow {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 4px !important;
    }
    #harmonyMembersRow label {
        justify-content: center !important;
        font-size: 0.78em !important;
        padding: 4px 6px !important;
        text-align: center !important;
    }
}

/* ── Meta row selects: proper sizing on 375px ── */
@media(max-width:375px) {
    #songStatusSelect { font-size: 0.72em !important; padding: 4px 4px !important; min-width: 88px !important; }
    #songKeySelect    { font-size: 0.72em !important; padding: 4px 4px !important; min-width: 48px !important; }
    #songBpmInput     { width: 44px !important; font-size: 0.72em !important; padding: 4px !important; }
    #leadSingerSelect { font-size: 0.72em !important; min-width: 72px !important; }
}

/* ── Setlist cards: action buttons don't overflow ── */
@media(max-width:480px) {
    #setlistsList .app-card {
        padding: 10px !important;
    }
    #setlistsList .app-card [style*="justify-content:space-between"] {
        gap: 6px !important;
    }
    #setlistsList .app-card h3 {
        font-size: 0.9em !important;
    }
}

/* ── Gig cards: same treatment ── */
@media(max-width:480px) {
    #gigsList .app-card {
        padding: 10px !important;
    }
    #gigsList .app-card [style*="justify-content:space-between"] {
        gap: 6px !important;
    }
}

/* ── Song search input: bigger tap target on mobile ── */
@media(max-width:480px) {
    #songSearch, .search-input {
        font-size: 16px !important; /* prevents iOS auto-zoom on focus */
        padding: 12px !important;
    }
}

/* Date inputs: never overflow card on mobile */
@media(max-width:640px){
  input[type="date"] { width: 100% !important; box-sizing: border-box !important; max-width: calc(100vw - 48px) !important; min-width: 0 !important; }
}

/* ── Prevent iOS font size auto-zoom on ALL inputs ── */
@media(max-width:768px) {
    input, select, textarea {
        font-size: max(16px, 0.9em) !important;
    }
}

/* ── HIGH CONTRAST: Force white text on ALL colored buttons ── */
/* Catches every purple, green, red, or filled button regardless of specificity */
button[style*="background:#667eea"],
button[style*="background: #667eea"],
button[style*="background:#6366f1"],
button[style*="background: #6366f1"],
button[style*="background:#818cf8"],
button[style*="background: #818cf8"],
button[style*="background:#5a6fd6"],
button[style*="background: #5a6fd6"],
button[style*="background:#10b981"],
button[style*="background: #10b981"],
button[style*="background:#1db954"],
button[style*="background: #1db954"],
button[style*="background:#ef4444"],
button[style*="background: #ef4444"],
button[style*="background:#dc2626"],
button[style*="background: #dc2626"],
button[style*="background:#ff0000"],
button[style*="background: #ff0000"],
button[style*="background:#fc3c44"],
button[style*="background: #fc3c44"],
button[style*="background:#428bca"],
button[style*="background: #428bca"],
button[style*="background:#ff7700"],
button[style*="background: #ff7700"],
button[style*="background:#000000"],
button[style*="background: #000000"],
button[style*="background:var(--accent)"],
button[style*="background: var(--accent)"],
button[style*="background:var(--green)"],
button[style*="background: var(--green)"],
button[style*="background:var(--red)"],
button[style*="background: var(--red)"],
.btn-primary,
.btn-primary *,
.btn-danger,
.btn-success,
.chart-btn-primary,
.chart-btn-primary * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ── Spotify play button: force white text always ── */
.spotify-play-btn,
.spotify-play-btn *,
.spotify-play-btn span,
.spotify-play-btn svg {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    fill: #ffffff !important;
}

/* Harmony singer chips — wrap on mobile */
.harmony-learning-card [style*="margin-bottom:10px"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}
.harmony-singer-chip {
    flex-shrink: 0 !important;
    max-width: 100% !important;
}

/* ============================================================
   LIVE GIG MODE — #lgOverlay
   === LIVE GIG MODE ===
   ============================================================ */

#lgOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #0a0a0a;
  color: #f0ede8;
  font-family: inherit;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.lg-layout { display:flex; flex-direction:column; height:100%; width:100%; box-sizing:border-box; padding:0; }
/* Header: compact — 40px, no wasted space */
.lg-header { display:flex; align-items:center; justify-content:space-between; padding:calc(6px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 6px calc(12px + env(safe-area-inset-left)); border-bottom:1px solid #1a1a1a; flex-shrink:0; min-height:40px; }
.lg-header-center { display:flex; flex-direction:column; align-items:center; line-height:1.1; }
.lg-band-name { font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:#555; }
.lg-setlist-name { font-size:0.75rem; color:#888; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lg-btn-exit, .lg-btn-fs { background:transparent; border:1px solid #2a2a2a; color:#777; padding:6px 10px; border-radius:6px; font-size:0.72rem; cursor:pointer; min-width:44px; min-height:36px; transition:border-color 0.15s,color 0.15s; }
.lg-btn-exit:hover, .lg-btn-fs:hover { border-color:#555; color:#eee; }
.lg-header-right { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
/* Live Gig perf-control state feedback */
.lg-btn-fs.lg-played-on { border-color:#4caf74; color:#4caf74; background:rgba(76,175,116,0.12); }
.lg-btn-fs.lg-count-active { border-color:#818cf8; color:#a5b4fc; background:rgba(129,140,248,0.18); }
/* Song bar: single line, compact */
.lg-song-bar { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; padding:4px 12px; border-bottom:1px solid #141414; flex-shrink:0; min-height:32px; overflow:hidden; }
/* Chart: MAXIMUM space — reduced padding */
.lg-chart-region { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 12px 16px; min-height:0; touch-action:pan-y; }
/* Smart chord chart: chord+lyric pairs are atomic inline-blocks; whole pairs wrap when screen narrows, so chords stay locked over their syllables without horizontal panning. */
/* .gl-chart-doc = the SHARED smart-chart container (Chart Convergence Phase 1,
   2026-06-17). ChartRenderer renders the same cl-* structure live-gig pioneered,
   so song-detail / rehearsal / reader surfaces get the colored, word-aligned
   chord rendering too. .lg-chart-doc is kept as an alias so live-gig is untouched
   until its Phase-2 switch onto ChartRenderer. */
.lg-chart-doc, .gl-chart-doc { font-family:'SF Mono','Fira Code','Consolas',monospace; font-size:var(--lg-font-size,15px); line-height:var(--lg-line-height,1.55); color:#e2e8f0; }
.lg-chart-doc .cl-line, .gl-chart-doc .cl-line { display:block; margin:0.35em 0; line-height:1.1; }
.lg-chart-doc .cl-seg, .gl-chart-doc .cl-seg { display:inline-block; vertical-align:top; max-width:100%; }
.lg-chart-doc .cl-chord, .gl-chart-doc .cl-chord { display:block; font-weight:700; color:#a5b4fc; line-height:1.15; margin-bottom:0.12em; min-height:1em; white-space:pre; padding-right:0.7ch; }/* trailing gap so a chord wider than its lyric never butts against the next chord (Fmaj7C9 bug, Drew 2026-06-21) */
.lg-chart-doc .cl-chord:empty::before, .gl-chart-doc .cl-chord:empty::before { content:'\00a0'; }
.lg-chart-doc .cl-lyric, .gl-chart-doc .cl-lyric { display:block; color:#e2e8f0; line-height:1.3; white-space:pre-wrap; overflow-wrap:break-word; }
.lg-chart-doc .cl-plain, .gl-chart-doc .cl-plain { color:#e2e8f0; line-height:1.4; white-space:pre-wrap; overflow-wrap:break-word; margin:0.15em 0; }
.lg-chart-doc .cl-section, .gl-chart-doc .cl-section { color:#818cf8; font-weight:700; margin-top:0.6em; margin-bottom:0.2em; white-space:pre; }
.lg-chart-doc .cl-chord-row, .gl-chart-doc .cl-chord-row { line-height:1.35; margin:0.2em 0; white-space:pre-wrap; overflow-wrap:break-word; }
.lg-chart-doc .cl-inline-chord, .gl-chart-doc .cl-inline-chord { color:#a5b4fc; font-weight:700; }
.lg-chart-doc .cl-inline-note, .gl-chart-doc .cl-inline-note { color:#94a3b8; font-weight:500; font-style:italic; }
.lg-chart-doc .cl-blank, .gl-chart-doc .cl-blank { height:0.55em; }
.lg-chart-loading { color:#555; font-size:0.85rem; padding:20px 0; }
.lg-no-chart { color:#555; font-size:0.9rem; padding:40px 0; text-align:center; }
.lg-song-counter { font-size:0.7rem; letter-spacing:0.14em; color:#444; text-transform:uppercase; white-space:nowrap; }
.lg-song-card { display:flex; flex-direction:column; gap:10px; }
.lg-song-badges { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.lg-key-badge, .lg-bpm-badge { font-size:0.72rem; padding:2px 8px; border-radius:4px; background:#161616; border:1px solid #2a2a2a; color:#aaa; }
.lg-status-tag { font-size:0.65rem; padding:2px 8px; border-radius:4px; border:1px solid; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; }
.lg-song-title { font-size:1rem; font-weight:800; color:#f5f0e8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; text-shadow:0 0 12px rgba(99,102,241,0.15); }
.lg-song-notes { font-size:clamp(0.85rem,2.5vw,1rem); color:#666; font-style:italic; line-height:1.4; max-width:600px; }
.lg-readiness-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:4px 12px; border-bottom:1px solid #141414; flex-shrink:0; min-height:28px; }
.lg-readiness-label { font-size:0.6rem; letter-spacing:0.16em; color:#444; text-transform:uppercase; margin-right:4px; }
.lg-member-block { display:flex; align-items:center; gap:3px; }
.lg-member-initial { font-size:0.65rem; color:#555; min-width:12px; }
.lg-dot { width:6px; height:6px; border-radius:50%; background:#1a1a1a; border:1px solid #2a2a2a; display:inline-block; }
.lg-dot.lg-dot-on { background:#4caf74; border-color:#4caf74; box-shadow:0 0 3px #4caf7460; }
/* Controls: slim — 48px buttons, not 64-72px */
.lg-controls { display:flex; align-items:center; justify-content:space-between; padding:4px calc(12px + env(safe-area-inset-right)) calc(2px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); gap:8px; flex-shrink:0; }
.lg-ctrl-btn { flex:1; min-height:48px; background:#111; border:1px solid #252525; color:#ccc; font-size:0.82rem; letter-spacing:0.08em; font-weight:700; border-radius:8px; cursor:pointer; transition:background 0.12s,border-color 0.12s; font-family:inherit; }
.lg-ctrl-btn:hover, .lg-ctrl-btn:active { background:#1a1a1a; border-color:#444; color:#fff; }
.lg-btn-next { background:#0d1f18; border-color:#1d4530; color:#4caf74; }
.lg-btn-next:hover { background:#112a1f; border-color:#4caf74; color:#7ad89a; }
.lg-btn-flash { border-color:#444 !important; color:#666 !important; }
.lg-jump-wrap { position:relative; flex:1; }
.lg-btn-jump { width:100%; }
.lg-jump-menu { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); width:280px; max-height:50vh; overflow-y:auto; background:#111; border:1px solid #2a2a2a; border-radius:10px; z-index:9100; -webkit-overflow-scrolling:touch; }
/* Touch/iPad (2026-06-28, Drew @ gig): the bottom-anchored menu COLLAPSED downward as
   the result list filtered — the search input dropped behind the soft keyboard, and the
   song you tried to tap moved out from under your finger (so picking a song opened
   nothing). Pin the menu to the TOP of the viewport with a FIXED height so it never
   moves while typing: search stays visible above the keyboard and results stay tappable. */
@media (pointer: coarse) {
  .lg-jump-menu { position:fixed; top:8px; bottom:auto; left:50%; transform:translateX(-50%);
    width:min(94vw, 520px); height:58vh; max-height:58vh; }
}
.lg-jump-item { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid #1a1a1a; cursor:pointer; transition:background 0.1s; }
.lg-jump-item:last-child { border-bottom:none; }
.lg-jump-item:hover, .lg-jump-item:active { background:#1a1a1a; }
.lg-jump-item.lg-jump-active { background:#0d1f18; color:#4caf74; }
.lg-jump-num { font-size:0.72rem; color:#444; min-width:22px; text-align:right; }
.lg-jump-title { font-size:0.85rem; color:#ccc; }
/* Mid-gig "pull up any chart" (2026-06-27): search any song from the JUMP menu.
   Set songs jump in place; off-setlist songs peek their chart over the gig (Back
   returns) or "+ Set" appends them to the running set. */
.lg-jump-menu { width:320px; }
.lg-jump-searchwrap { padding:8px; border-bottom:1px solid #1a1a1a; position:sticky; top:0; background:#111; z-index:1; }
.lg-jump-search { width:100%; box-sizing:border-box; padding:9px 11px; border-radius:7px; border:1px solid #2a2a2a; background:#0a0a0a; color:#eee; font-size:0.92rem; }
.lg-jump-search::placeholder { color:#555; }
.lg-jump-section { font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:#555; padding:9px 14px 4px; }
.lg-jump-other { justify-content:space-between; }
.lg-jump-peek { flex:1; cursor:pointer; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lg-jump-add { flex-shrink:0; font-size:0.72rem; font-weight:700; color:#a5b4fc; background:rgba(99,102,241,0.14); border:1px solid rgba(99,102,241,0.35); border-radius:6px; padding:5px 10px; cursor:pointer; }
.lg-jump-add:hover, .lg-jump-add:active { background:rgba(99,102,241,0.26); }
.lg-jump-empty { font-size:0.74rem; color:#555; padding:8px 14px; text-align:center; }
/* Queue: compact single line. Sits above controls so it doesn't butt against the home indicator. */
.lg-queue { display:flex; align-items:center; gap:8px; padding:4px calc(12px + env(safe-area-inset-right)) 4px calc(12px + env(safe-area-inset-left)); flex-shrink:0; min-height:28px; flex-wrap:nowrap; overflow:hidden; }
.lg-queue-label { font-size:0.6rem; letter-spacing:0.12em; color:#444; text-transform:uppercase; }
.lg-queue-song { font-size:0.78rem; color:#999; }
.lg-queue-dim { color:#444; }
.lg-queue-arrow { color:#333; font-size:0.7rem; }
.lg-links-row { display:flex; gap:8px; padding:6px 12px 8px; flex-shrink:0; flex-wrap:wrap; }
.lg-link-btn { flex:1; min-width:60px; padding:8px 6px; background:#111; border:1px solid #222; border-radius:6px; color:#666; font-size:0.68rem; text-align:center; text-decoration:none; transition:border-color 0.12s,color 0.12s; display:block; }
.lg-link-btn:hover { border-color:#444; color:#bbb; }
.lg-error-layout { justify-content:center; align-items:center; gap:24px; padding:40px; }
.lg-error-msg { font-size:1.1rem; color:#e05a2b; text-align:center; max-width:320px; line-height:1.5; }
/* Zen mode: hide everything except chart */
.lg-focus .lg-header,.lg-focus .lg-song-bar,.lg-focus .lg-readiness-row,.lg-focus .lg-controls,.lg-focus .lg-queue,.lg-focus .lg-links-row { display:none!important; }
.lg-focus .lg-chart-region { padding:calc(16px + env(safe-area-inset-top)) calc(56px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); touch-action:pan-y; }
/* Extra right padding in normal mode too so long chord lines don't sit under the pill. */
.lg-chart-region { padding-right:calc(56px + env(safe-area-inset-right)); }
/* Auto-scroll pill: right edge, vertical stack, thumb-reachable. Stays visible in focus mode. */
.lg-scroll-pill { position:fixed; right:calc(8px + env(safe-area-inset-right)); top:50%; transform:translateY(-50%); z-index:9400; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 4px; background:rgba(15,23,42,0.78); border:1px solid rgba(99,102,241,0.2); border-radius:24px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.lg-pill-btn { width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,0.04); color:#a5b4fc; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:inherit; -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none; }
.lg-pill-btn:active { background:rgba(99,102,241,0.25); color:#e0e7ff; }
.lg-pill-play { background:rgba(99,102,241,0.18); color:#e0e7ff; }
.lg-pill-speed { font-size:0.58rem; letter-spacing:0.05em; color:#64748b; font-weight:700; min-height:10px; line-height:1; padding:2px 0; font-variant-numeric:tabular-nums; }
/* Responsive: iPad / wider */
@media (min-width:480px) {
  .lg-chart-text { font-size:var(--lg-font-size,17px); }
}
/* Settings overlay */
.lg-settings { position:fixed; inset:0; z-index:9200; background:rgba(0,0,0,0.7); display:flex; align-items:flex-end; justify-content:center; }
.lg-settings-sheet { background:#1a1a1a; border-radius:14px 14px 0 0; width:100%; max-width:400px; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); }
.lg-settings-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #222; min-height:44px; }
.lg-settings-row:last-child { border-bottom:none; }
.lg-settings-label { font-size:0.82rem; color:#bbb; }
.lg-settings-btns { display:flex; gap:6px; }
.lg-settings-btn { background:#222; border:1px solid #333; color:#ccc; padding:6px 12px; border-radius:6px; font-size:0.78rem; cursor:pointer; min-height:32px; font-family:inherit; }
.lg-settings-btn:active { background:#333; }

/* CF-002: iOS date input overflow fix */
input[type="date"].app-input,
input[type="time"].app-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* Song Drawer trigger button */
/* View button — pill-shaped overlay that exactly covers the band pill (col 5) */
/* View button — desktop hover only. Hidden on touch via media query. */
.song-drawer-btn{display:none;position:absolute;right:12px;top:50%;margin-top:-11px;height:22px;z-index:10;background:#1e293b;border:1px solid rgba(99,102,241,0.6);color:#a5b4fc;border-radius:20px;padding:0;width:48px;cursor:pointer;align-items:center;justify-content:center;font-size:0.6em;font-weight:800;white-space:nowrap;letter-spacing:0.02em;box-sizing:border-box}
.song-item:hover .song-drawer-btn{display:flex!important}
/* Hide View button + quick actions on touch devices — tap opens detail directly */
@media(hover:none),(pointer:coarse){
.song-drawer-btn{display:none!important}
.song-quick-actions{display:none!important}
}

/* Scrollbar styling */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.3)}
html{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.15) transparent}
body{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.15) transparent}

/* ============================================================================
   PRODUCT MODE — Sharpen / Lock In / Play
   Hides hamburger menu items that don't belong in the current mode.
   Left rail filtering is handled in JS (gl-left-rail.js _renderNav).
   ============================================================================ */

/* Sharpen: show practice, songs, tools; hide setlist editing, rehearsal, gigs */
/* REMOVED: mode-based nav hiding — all pages always visible.
   Practice/Rehearse/Play are perspectives, not UI gates. */

/* Lock In: show rehearsal, songs, band tools; hide solo practice, gig logistics */
/* REMOVED: lockin mode nav hiding */

/* Play: show gigs, setlists, venues; hide everything else */
/* REMOVED: play mode nav hiding */

/* ── Play mode: simplify song list — hide editing UI ── */
/* REMOVED: play mode song page hiding + sharpen mode opacity override */

/* ── All modes: improved base spacing ── */
.app-card { margin-bottom:14px; }
.app-card h3 { font-size:1em; margin-bottom:12px; }

/* Mobile mode switcher — highlight active button */
.gl-mobile-mode-btn[data-mode] { transition: all 0.15s; }
/* REMOVED: mobile mode button highlighting — mode switcher no longer exists */
.gl-mobile-mode-btn--active {
  background: var(--accent-glow, rgba(102,126,234,0.15)) !important;
  color: var(--accent-light, #818cf8) !important;
}