/* ============================================================
   SurSangam — Performer's Chord & Lyrics Software
   Design System & Styles
   ============================================================ */

/* Fonts are vendored locally and loaded from index.html
   (vendor/fonts/google-fonts.css). A remote @import here would block the
   first paint on a network the venue may not have. */

/* ============================================================
   CSS Custom Properties (Design Tokens)
   ============================================================ */
:root {
  /* Colors - Dark Theme */
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-card: rgba(20, 20, 35, 0.8);
  --bg-card-hover: rgba(30, 30, 50, 0.9);
  --bg-glass: rgba(255, 255, 255, 0.03);
  --bg-glass-hover: rgba(255, 255, 255, 0.06);
  --bg-input: rgba(255, 255, 255, 0.05);

  /* Accent Colors */
  --accent-primary: #7c5cfc;
  --accent-primary-light: #9b82fc;
  --accent-primary-dark: #5a3ad4;
  --accent-secondary: #fc5c9c;
  --accent-tertiary: #00d4aa;
  --accent-warm: #ff9f43;
  --accent-blue: #45aaf2;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #7c5cfc 0%, #fc5c9c 100%);
  --gradient-secondary: linear-gradient(135deg, #00d4aa 0%, #45aaf2 100%);
  --gradient-warm: linear-gradient(135deg, #ff9f43 0%, #fc5c9c 100%);
  --gradient-cool: linear-gradient(135deg, #45aaf2 0%, #7c5cfc 100%);
  --gradient-bg: linear-gradient(180deg, #0a0a0f 0%, #12121a 50%, #0f0f1a 100%);
  --gradient-sidebar: linear-gradient(180deg, rgba(20, 20, 35, 0.95) 0%, rgba(10, 10, 20, 0.98) 100%);

  /* Text Colors */
  --text-primary: #f0f0f5;
  --text-secondary: #a0a0b5;
  --text-muted: #606075;
  --text-accent: #9b82fc;
  --text-chord: #00d4aa;
  --text-hindi: #f5f5fa;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(124, 92, 252, 0.3);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px rgba(124, 92, 252, 0.15);
  --shadow-glow-pink: 0 0 30px rgba(252, 92, 156, 0.15);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Typography */
  --font-ui: 'Inter', 'Outfit', system-ui, -apple-system, sans-serif;
  --font-hindi: 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', serif;
  --font-display: 'Outfit', 'Inter', system-ui, sans-serif;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --sidebar-width: 280px;
  --header-height: 64px;
  --player-bar-height: 72px;
}

/* ============================================================
   Stage Mode Overrides
   ============================================================ */
.stage-mode {
  --bg-primary: #000000;
  --bg-secondary: #050505;
  --bg-card: rgba(10, 10, 10, 0.95);
  --text-primary: #ffffff;
  --text-chord: #00ff99;
  --text-hindi: #ffffff;
  /* body paints --gradient-bg, which is a literal gradient — overriding only the
     colour tokens left Stage Mode showing the same dark navy as normal mode, so
     the "high contrast" mode was not actually high contrast. */
  --gradient-bg: #000000;
}

body.stage-mode {
  background: #000000 !important;
}

body.stage-mode .content-area,
body.stage-mode .song-detail,
body.stage-mode .view-panel {
  background: #000000;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-ui);
  background: var(--gradient-bg);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   App Layout
   ============================================================ */
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--gradient-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
  transition: transform var(--transition-base);
}

.sidebar-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: var(--gradient-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: var(--shadow-glow);
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-subtitle {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: -2px;
}

/* Sidebar Navigation */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md) 0;
}

.nav-section {
  padding: 0 var(--space-md);
  margin-bottom: var(--space-lg);
}

.nav-section-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-xs);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
  user-select: none;
}

.nav-item:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background: rgba(124, 92, 252, 0.12);
  color: var(--accent-primary-light);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
}

.nav-item .icon {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}

.nav-item .badge {
  margin-left: auto;
  background: var(--bg-glass);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Playlist Items in Sidebar */
.playlist-list {
  padding: 0 var(--space-md);
}

.playlist-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px var(--space-md);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.playlist-item:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
}

.playlist-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================================
   Main Content Area
   ============================================================ */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header / Top Bar */
/* The viewport is declared `viewport-fit=cover`, so the WebView paints beneath
   the status bar and the phone's rounded corners. Every edge-anchored element has
   to add the safe-area inset back, or its content sits under the clock and the
   notification icons — which is exactly what happened on the device. */
.top-bar {
  height: auto;
  min-height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  padding: env(safe-area-inset-top, 0px) max(var(--space-xl), env(safe-area-inset-right, 0px)) 0 max(var(--space-xl), env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  gap: var(--space-lg);
  z-index: 50;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: var(--space-sm);
}

/* Search Bar */
.search-container {
  flex: 1;
  max-width: 500px;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 10px 16px 10px 44px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  outline: none;
  transition: all var(--transition-fast);
}

.search-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.1);
  background: rgba(255, 255, 255, 0.07);
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Top bar actions */
.top-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.btn-icon:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.btn-icon.active {
  background: rgba(124, 92, 252, 0.15);
  color: var(--accent-primary-light);
  border-color: var(--accent-primary);
}

/* ============================================================
   Content Area
   ============================================================ */
.content-area {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-xl);
}

/* Page Header */
.page-header {
  margin-bottom: var(--space-xl);
}

.page-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: var(--space-xs);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ============================================================
   Filter Bar / Chips
   ============================================================ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-right: var(--space-md);
}

.filter-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-right: var(--space-xs);
  white-space: nowrap;
}

.chip {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  color: var(--text-secondary);
  white-space: nowrap;
  user-select: none;
}

.chip:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-medium);
  color: var(--text-primary);
}

.chip.active {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
  box-shadow: 0 2px 12px rgba(124, 92, 252, 0.3);
}

.chip.active-minor {
  background: var(--accent-secondary);
  color: white;
  border-color: var(--accent-secondary);
  box-shadow: 0 2px 12px rgba(252, 92, 156, 0.3);
}

.chip.active-tag {
  background: var(--accent-warm);
  color: #1a1a1a;
  border-color: var(--accent-warm);
}

/* ============================================================
   Stats Dashboard
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.stat-card:nth-child(1)::before { background: var(--gradient-primary); }
.stat-card:nth-child(2)::before { background: var(--gradient-secondary); }
.stat-card:nth-child(3)::before { background: var(--gradient-warm); }
.stat-card:nth-child(4)::before { background: var(--gradient-cool); }

.stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: var(--space-xs);
}

.stat-card:nth-child(1) .stat-value { color: var(--accent-primary-light); }
.stat-card:nth-child(2) .stat-value { color: var(--accent-tertiary); }
.stat-card:nth-child(3) .stat-value { color: var(--accent-warm); }
.stat-card:nth-child(4) .stat-value { color: var(--accent-blue); }

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ============================================================
   Song List / Table
   ============================================================ */
.song-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.song-list-header {
  display: grid;
  grid-template-columns: 50px 1fr 180px 100px 80px 100px 50px;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-sm);
}

.song-list-header div[data-sort-by-col] {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition-fast);
}

.song-list-header div[data-sort-by-col]:hover {
  color: var(--accent-primary);
}

.song-list-header div[data-sort-by-col] i {
  font-size: 0.65rem;
  opacity: 0.5;
  transition: all var(--transition-fast);
}

.song-list-header div[data-sort-by-col].sort-active {
  color: var(--accent-primary);
  font-weight: 700;
}

.song-list-header div[data-sort-by-col].sort-active i {
  opacity: 1;
  color: var(--accent-primary);
}

.song-row {
  display: grid;
  grid-template-columns: 50px 1fr 180px 100px 80px 100px 50px;
  align-items: center;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.song-row:hover {
  background: var(--bg-card-hover);
}

.song-row:active {
  transform: scale(0.998);
}

.song-number {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

.song-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.song-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-title-hindi {
  font-family: var(--font-hindi);
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-artist {
  color: var(--text-secondary);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  width: fit-content;
}

.song-key.major {
  background: rgba(124, 92, 252, 0.12);
  color: var(--accent-primary-light);
  border: 1px solid rgba(124, 92, 252, 0.2);
}

.song-key.minor {
  background: rgba(252, 92, 156, 0.12);
  color: var(--accent-secondary);
  border: 1px solid rgba(252, 92, 156, 0.2);
}

.song-tempo {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: capitalize;
}

.song-chords-preview {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.chord-mini {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: rgba(0, 212, 170, 0.1);
  color: var(--text-chord);
  font-weight: 600;
}

.song-fav-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  transition: all var(--transition-fast);
  padding: var(--space-xs);
}

.song-fav-btn:hover,
.song-fav-btn.faved {
  color: var(--accent-secondary);
}

/* ============================================================
   Song Detail / Lyrics View
   ============================================================ */
.song-detail {
  max-width: 900px;
  margin: 0 auto;
}

.song-detail-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border-subtle);
}

.song-detail-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: var(--space-xs);
}

.song-detail-title-hindi {
  font-family: var(--font-hindi);
  font-size: 1.5rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.song-meta-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.meta-tag .icon {
  font-size: 0.9rem;
}

/* Chord summary bar */
.chord-summary {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.chord-badge {
  padding: 8px 18px;
  border-radius: var(--radius-md);
  background: rgba(0, 212, 170, 0.08);
  border: 1px solid rgba(0, 212, 170, 0.2);
  color: var(--text-chord);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

/* Toolbar for song view */
.song-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  padding: var(--space-md);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.tool-btn:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.tool-btn.active {
  background: rgba(124, 92, 252, 0.15);
  color: var(--accent-primary-light);
  border-color: var(--accent-primary);
}

.transpose-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.transpose-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.transpose-btn:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
}

.transpose-value {
  font-weight: 700;
  color: var(--accent-primary-light);
  min-width: 30px;
  text-align: center;
  font-size: 0.9rem;
}

/* Lyrics display */
.lyrics-container {
  font-family: var(--font-hindi);
  font-size: 1.35rem;
  line-height: 2.2;
  color: var(--text-hindi);
  padding: var(--space-xl);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  position: relative;
  white-space: pre-wrap;
}

.lyrics-container .chord-inline {
  color: var(--text-chord);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  position: relative;
  top: -0.2em;
  margin: 0 2px;
  padding: 2px 6px;
  background: rgba(0, 212, 170, 0.08);
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
  vertical-align: super;
  user-select: none;
}

.lyrics-line {
  margin-bottom: var(--space-xs);
}

.lyrics-section-header {
  margin-top: 20px;
  margin-bottom: 10px;
  user-select: none;
}

.lyrics-section-header .section-tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--accent-tertiary);
  background: rgba(0, 212, 170, 0.12);
  border: 1px solid rgba(0, 212, 170, 0.3);
  padding: 3px 12px;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.lyrics-section-break {
  height: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-md);
}

/* Stage Mode lyrics */
.stage-mode .lyrics-container {
  font-size: 2rem;
  line-height: 2.5;
  background: #000;
  border: none;
}

.stage-mode .lyrics-container .chord-inline {
  font-size: 1.1rem;
  color: #00ff99;
}

/* Auto-scroll indicator */
.auto-scroll-active .lyrics-container {
  border-color: var(--accent-tertiary);
  box-shadow: 0 0 20px rgba(0, 212, 170, 0.1);
}

/* The teleprompter advances scrollTop by a few pixels per frame. With the
   global `scroll-behavior: smooth` in effect, every one of those increments got
   its own easing animation: the scroll felt mushy and kept drifting for a moment
   after being paused. Smoothing is disabled while auto-scroll is running. */
body.auto-scroll-active .content-area {
  scroll-behavior: auto !important;
}

/* Font size control */
.font-size-slider {
  width: 100px;
  accent-color: var(--accent-primary);
}

/* ============================================================
   Playlist Section
   ============================================================ */
.playlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.btn-create-playlist {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: white;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-glow);
}

.btn-create-playlist:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(124, 92, 252, 0.3);
}

.playlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-lg);
}

.playlist-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
}

.playlist-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-medium);
}

.playlist-card-gradient {
  height: 80px;
  position: relative;
}

.playlist-card-body {
  padding: var(--space-lg);
}

.playlist-card-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: var(--space-xs);
}

.playlist-card-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.playlist-card-actions {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: flex;
  gap: var(--space-xs);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.playlist-card:hover .playlist-card-actions {
  opacity: 1;
}

/* ============================================================
   Modal
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(20px) scale(0.95);
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-lg);
}

.modal-overlay.active .modal {
  transform: translateY(0) scale(1);
}

.modal-header {
  padding: var(--space-xl);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.3rem;
  padding: var(--space-xs);
  transition: color var(--transition-fast);
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: var(--space-xl);
}

.modal-footer {
  padding: var(--space-md) var(--space-xl) var(--space-xl);
  display: flex;
  gap: var(--space-md);
  justify-content: flex-end;
}

/* Form elements */
.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  outline: none;
  transition: all var(--transition-fast);
}

.form-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.1);
}

.form-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  outline: none;
  appearance: none;
  cursor: pointer;
}

/* Buttons */
.btn-primary {
  padding: 10px 24px;
  border-radius: var(--radius-md);
  background: var(--gradient-primary);
  color: white;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.btn-secondary {
  padding: 10px 24px;
  border-radius: var(--radius-md);
  background: var(--bg-glass);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.btn-secondary:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
}

/* ============================================================
   Scale View / Chord Grid
   ============================================================ */
.scale-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.scale-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
}

.scale-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-md);
}

.scale-card-header {
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
}

.scale-name {
  font-weight: 700;
  font-size: 1.1rem;
}

.scale-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 4px 10px;
  background: var(--bg-glass);
  border-radius: var(--radius-full);
}

.scale-songs {
  padding: var(--space-sm);
}

.scale-song-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.scale-song-item:hover {
  background: var(--bg-glass-hover);
}

/* ============================================================
   Back button
   ============================================================ */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  transition: all var(--transition-fast);
  margin-bottom: var(--space-lg);
}

.back-btn:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
}

/* ============================================================
   Toast / Notification
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.toast {
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.85rem;
  box-shadow: var(--shadow-lg);
  transform: translateX(120%);
  transition: transform var(--transition-base);
  max-width: 350px;
}

.toast.show {
  transform: translateX(0);
}

.toast.success { border-left: 3px solid var(--accent-tertiary); }
.toast.error { border-left: 3px solid var(--accent-secondary); }
.toast.info { border-left: 3px solid var(--accent-blue); }

/* ============================================================
   Empty State
   ============================================================ */
.empty-state {
  text-align: center;
  padding: var(--space-3xl);
  color: var(--text-muted);
}

.empty-state .icon {
  font-size: 3rem;
  margin-bottom: var(--space-lg);
  opacity: 0.4;
}

.empty-state p {
  font-size: 1rem;
  margin-bottom: var(--space-md);
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-in {
  animation: fadeIn 0.4s ease-out;
}

.song-row {
  animation: fadeIn 0.3s ease-out;
  animation-fill-mode: backwards;
}

.song-row:nth-child(1) { animation-delay: 0ms; }
.song-row:nth-child(2) { animation-delay: 30ms; }
.song-row:nth-child(3) { animation-delay: 60ms; }
.song-row:nth-child(4) { animation-delay: 90ms; }
.song-row:nth-child(5) { animation-delay: 120ms; }
.song-row:nth-child(6) { animation-delay: 150ms; }
.song-row:nth-child(7) { animation-delay: 180ms; }
.song-row:nth-child(8) { animation-delay: 210ms; }
.song-row:nth-child(9) { animation-delay: 240ms; }
.song-row:nth-child(10) { animation-delay: 270ms; }

/* ============================================================
   Responsive Design
   ============================================================ */
@media (max-width: 1024px) {
  .song-list-header,
  .song-row {
    grid-template-columns: 40px 1fr 100px 80px 50px;
  }
  .song-artist,
  .song-chords-preview {
    display: none;
  }
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    z-index: 200;
    /* Clears the status bar and the on-screen nav bar. */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .menu-toggle {
    display: flex;
  }

  /* On a 375px screen the bar was 387px wide, so the right-hand icon was sliced
     off the edge and the search box collapsed to 62px. Tighten the spacing and
     drop the two icons that are reachable elsewhere (Setlists lives in the nav,
     Print lives in the page header). */
  .top-bar {
    padding-left: max(var(--space-sm), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-sm), env(safe-area-inset-right, 0px));
    gap: var(--space-sm);
  }

  .top-bar-actions {
    gap: 2px;
  }

  #btn-quick-setlist,
  #btn-quick-print {
    display: none;
  }

  .top-bar .btn-icon {
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
  }

  .menu-toggle {
    padding: 4px 6px;
    font-size: 1.35rem;
  }

  .search-container {
    min-width: 0;
  }

  .update-pill {
    padding: 6px 10px;
    font-size: 0.72rem;
  }

  .content-area {
    padding: var(--space-md);
    padding-left: max(var(--space-md), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-md), env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  }

  .page-title {
    font-size: 1.5rem;
  }

  .song-list-header {
    display: none;
  }

  .song-row {
    grid-template-columns: 40px 1fr 80px 40px;
  }

  /* The dedicated Tempo column does not fit, but BPM and the segue gap are the
     whole point of the feature on stage — they are shown inline under the title
     instead of being dropped entirely. */
  .song-tempo,
  .song-artist,
  .song-chords-preview {
    display: none;
  }

  .song-meta-mobile {
    display: flex !important;
  }

  /* The four stat cards ran to 308px on a phone — a third of the screen spent
     on numbers you already know, before a single song was visible. Compact
     them to a single readable row so the library starts above the fold. */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
  }

  .stats-grid .stat-card {
    padding: var(--space-sm) 4px;
    text-align: center;
  }

  .stats-grid .stat-value {
    font-size: 1.25rem;
  }

  .stats-grid .stat-label {
    font-size: 0.6rem;
    letter-spacing: 0.5px;
  }

  /* The Devanagari glosses are the first thing to go at this size. */
  .stats-grid .stat-label span {
    display: none;
  }

  .filter-bar {
    flex-wrap: wrap;
    padding-bottom: var(--space-md);
  }

  /* The floating jump button sat on top of the filter chips. */
  .view-panel {
    padding-bottom: 88px;
  }

  .song-detail-title {
    font-size: 1.5rem;
  }

  .lyrics-container {
    font-size: 1.15rem;
    padding: var(--space-md);
  }
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 150;
}

.sidebar.open ~ .sidebar-overlay {
  display: block;
}

/* ============================================================
   Chord Diagram Popover
   ============================================================ */
.chord-badge,
.chord-inline,
.chord-mini {
  cursor: pointer;
}

/* A key badge showing the performer's own key rather than the recorded one.
   The dot distinguishes "my key" from the original at a glance. */
.song-key-custom {
  position: relative;
  box-shadow: inset 0 0 0 1px var(--accent-tertiary);
}

.song-key-custom::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-tertiary);
}

/* ============================================================
   Continuous Scroll — collapsible song blocks
   ============================================================ */
.continuous-song-block {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.cont-song-header {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.cont-song-header:hover {
  background: var(--bg-glass-hover);
}

.cont-chevron {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary-light);
  font-size: 0.75rem;
  transition: transform var(--transition-base);
}

/* Chevron points right when the song is folded shut */
.continuous-song-block.collapsed .cont-chevron {
  transform: rotate(-90deg);
}

.cont-song-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.cont-song-index {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-primary-light);
  flex-shrink: 0;
}

.cont-song-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cont-song-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cont-song-hindi {
  font-family: var(--font-hindi);
  font-size: 0.95rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cont-song-hindi:empty {
  display: none;
}

.cont-song-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cont-song-bpm {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.cont-song-body {
  padding: 0 20px 24px;
}

.continuous-song-block.collapsed .cont-song-body {
  display: none;
}

/* Open song stands out while performing */
.continuous-song-block:not(.collapsed) {
  border-color: var(--border-medium);
}

.stage-mode .cont-song-header {
  background: #000;
}

.stage-mode .cont-song-title {
  color: #fff;
}

@media (max-width: 768px) {
  .cont-song-header {
    flex-wrap: wrap;
    padding: 14px;
    gap: 10px;
  }

  .cont-song-meta {
    width: 100%;
    justify-content: flex-start;
    padding-left: 44px;
  }

  .cont-song-body {
    padding: 0 14px 18px;
  }
}

/* ============================================================
   Tempo (BPM) Range Filter
   ------------------------------------------------------------
   Two range inputs stacked over one track. Only the thumbs accept
   pointer events, so both can be grabbed independently.
   ============================================================ */
.filter-group-bpm {
  flex-wrap: wrap;
}

/* Keys are multi-select and there is one chip per key in the library, so this
   row is the longest of the filter rows. Wrapping (rather than a scroller)
   keeps every key reachable without a horizontal drag on a phone held
   one-handed at a gig. */
.filter-group-keys {
  flex-wrap: wrap;
  row-gap: var(--space-xs);
}

/* ── Collapsible filter bar ──────────────────────────────────────
   Fully open the bar was 528px tall on a phone — two thirds of the screen —
   which pushed the first song row below the fold. Closed by default; the
   toggle line always says what is currently filtered. */
.filter-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
}

.filter-toggle:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
}

/* When a filter is on, the closed bar must not look idle. */
.filter-toggle.has-filters {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.filter-toggle-summary {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-toggle-chevron {
  font-size: 0.7rem;
  opacity: 0.6;
  transition: transform var(--transition-fast);
}

.filter-toggle[aria-expanded="true"] .filter-toggle-chevron {
  transform: rotate(180deg);
}

.filter-collapse {
  display: none;
}

.filter-collapse.open {
  display: block;
  padding-top: var(--space-sm);
}

/* ── Tap targets ─────────────────────────────────────────────────
   Chips measured 23px on their smallest dimension against a 44px minimum
   (Apple HIG / WCAG 2.5.5). These are tapped on a dim stage, often with a
   guitar in hand, so undersized targets cost real mis-taps. */
.chip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Scale & Key Matrix: collapsible key cards ───────────────────
   With a large library the matrix runs to dozens of cards. Folding them to
   their headers turns a long scroll into a one-screen index of the keys. */
.scale-matrix-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-sm);
}

.scale-card-header {
  cursor: pointer;
  display: flex;
  gap: 6px;
  user-select: none;
}

.scale-card-chevron {
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.scale-card.collapsed .scale-card-chevron {
  transform: rotate(-90deg);
}

.scale-card.collapsed .scale-songs {
  display: none;
}

/* A folded card should read as one compact row, not a card with a gap in it. */
.scale-card.collapsed {
  align-self: start;
}

.scale-card-header:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
}

/* The song count riding along inside a key chip. Dimmed so the key itself
   stays the thing the eye lands on. */
.chip-count {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.55;
  margin-left: 2px;
}

.chip.active .chip-count {
  opacity: 0.8;
}

.bpm-range {
  position: relative;
  width: 140px;
  height: 26px;
  flex-shrink: 0;
  margin: 0 4px;
}

.bpm-range-track,
.bpm-range-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  border-radius: var(--radius-full);
  transform: translateY(-50%);
  pointer-events: none;
}

.bpm-range-track {
  left: 0;
  right: 0;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
}

.bpm-range-fill {
  background: var(--accent-tertiary);
}

.bpm-range-fill.inactive {
  background: var(--border-medium);
}

.bpm-range-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  background: none;
  pointer-events: none; /* the track is decorative; only thumbs are grabbable */
  -webkit-appearance: none;
  appearance: none;
}

.bpm-range-input:focus {
  outline: none;
}

.bpm-range-input::-webkit-slider-runnable-track {
  background: none;
  height: 26px;
}

.bpm-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-primary);
  border: 2px solid var(--accent-tertiary);
  cursor: grab;
  box-shadow: var(--shadow-sm);
}

.bpm-range-input::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
}

.bpm-range-input::-moz-range-track {
  background: none;
  height: 26px;
}

.bpm-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-primary);
  border: 2px solid var(--accent-tertiary);
  cursor: grab;
}

.bpm-preset-select {
  width: auto;
  min-width: 150px;
  max-width: 190px;
  padding: 6px 10px;
  font-size: 0.78rem;
}

.bpm-readout {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 76px;
}

.bpm-readout.active {
  color: var(--accent-tertiary);
}

/* Active-filter summary + clear-all */
.filter-summary {
  display: none;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding-left: 12px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* A tempo band with nothing in it — still selectable, just clearly empty. */
.chip.chip-empty {
  opacity: 0.35;
}

.chip-clear {
  background: rgba(255, 107, 107, 0.12) !important;
  border-color: rgba(255, 107, 107, 0.35) !important;
  color: #ff8080 !important;
}

@media (max-width: 768px) {
  .filter-summary {
    margin-left: 0;
    padding-left: 0;
    width: 100%;
  }

  .bpm-range {
    width: 120px;
  }
}

/* ============================================================
   Queue (spontaneous sets)
   ============================================================ */
.badge-queue {
  background: var(--accent-tertiary) !important;
  color: #04231d !important;
  font-weight: 800;
}

.song-queue-btn {
  color: var(--text-muted);
}

.song-queue-btn.queued {
  color: var(--accent-tertiary);
  background: rgba(0, 212, 170, 0.14);
  border-color: rgba(0, 212, 170, 0.4);
}

/* Floating bar, sits to the left of the quick-jump FAB */
.queue-bar {
  position: fixed;
  right: calc(84px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  display: flex;
  align-items: stretch;
  gap: 1px;
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 212, 170, 0.4);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: calc(100vw - 120px);
}

.queue-bar button {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-ui);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: background var(--transition-fast);
}

.queue-bar button:hover {
  background: var(--bg-glass-hover);
}

.queue-bar-main {
  min-width: 0;
}

.queue-bar-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  min-width: 0;
}

.queue-bar-text strong {
  font-size: 0.8rem;
}

.queue-bar-text span {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.queue-bar-play {
  color: var(--accent-tertiary) !important;
  border-left: 1px solid var(--border-subtle) !important;
}

.queue-bar-clear {
  color: var(--text-muted) !important;
  border-left: 1px solid var(--border-subtle) !important;
  padding: 10px 13px !important;
}

.stage-mode .queue-bar {
  opacity: 0.25;
}

.stage-mode .queue-bar:hover {
  opacity: 1;
}

/* ============================================================
   BPM & Segue Indicators
   ============================================================ */
.bpm-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.bpm-chip:hover {
  border-color: var(--accent-tertiary);
  color: var(--accent-tertiary);
}

.bpm-unit {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.4px;
}

/* An unmeasured tempo is shown as a range and deliberately reads as weaker than
   a real reading, so a guess is never mistaken for data. */
.bpm-chip-est {
  background: none;
  border-style: dashed;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.75rem;
}

.bpm-chip-est:hover {
  color: var(--accent-tertiary);
}

.cont-song-bpm-est {
  opacity: 0.6;
  font-weight: 500;
}

/* Inline tempo/segue line shown only on narrow screens (see the mobile block). */
.song-meta-mobile {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.song-meta-mobile .bpm-chip {
  font-size: 0.72rem;
  padding: 1px 6px;
}

.song-meta-mobile .segue {
  margin-top: 0;
}

.song-meta-mobile .mobile-artist {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42%;
}

.tempo-word {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 3px;
  text-transform: capitalize;
}

/* Tempo gap between this song and the previous one in the running order */
.segue {
  margin-top: 4px;
  font-size: 0.66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

.segue-smooth {
  color: var(--accent-tertiary);
  background: rgba(0, 212, 170, 0.12);
}

.segue-ok {
  color: var(--accent-warm);
  background: rgba(255, 159, 67, 0.12);
}

.segue-jump {
  color: #ff8080;
  background: rgba(255, 107, 107, 0.14);
}

/* ============================================================
   Cloud Update UI
   ============================================================ */
.update-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 212, 170, 0.4);
  background: rgba(0, 212, 170, 0.12);
  color: var(--accent-tertiary);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  animation: updatePulse 2.4s ease-in-out infinite;
}

@keyframes updatePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(0, 212, 170, 0); }
}

.update-pill-count {
  background: var(--accent-tertiary);
  color: #04231d;
  border-radius: var(--radius-full);
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 800;
}

.update-pill-count:empty {
  display: none;
}

.badge-update {
  background: var(--accent-tertiary) !important;
  color: #04231d !important;
  font-weight: 800;
  font-size: 0.6rem;
  letter-spacing: 0.5px;
}

.sync-status-card {
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.sync-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  font-size: 0.85rem;
}

.sync-status-label {
  color: var(--text-muted);
}

.sync-status-value {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
}

.sync-update-banner {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 212, 170, 0.35);
  background: rgba(0, 212, 170, 0.08);
}

.sync-update-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--accent-tertiary);
  margin-bottom: 6px;
}

.sync-update-detail {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.sync-update-btn {
  width: 100%;
  background: var(--gradient-secondary);
  border: none;
}

.sync-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 0.83rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.sync-toggle input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent-tertiary);
  flex-shrink: 0;
}

.form-hint {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.form-hint code {
  background: var(--bg-input);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'Fira Code', monospace;
  font-size: 0.72rem;
}

/* Hidden on screen; the print stylesheet reveals it for the print job only. */
#setlist-print-container {
  display: none;
}

.chord-popover {
  position: fixed;
  z-index: 400;
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 10px 12px 6px;
  color: var(--accent-tertiary);
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  pointer-events: auto;
}

.chord-popover.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.chord-popover svg {
  display: block;
}

.chord-popover-close {
  position: absolute;
  top: 2px;
  right: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 4px;
  line-height: 1;
}

/* High-contrast fingering when reading from a distance on stage */
.stage-mode .chord-popover {
  background: #000;
  border-color: #00ff99;
  color: #00ff99;
}

/* ============================================================
   Quick Jump Palette
   ============================================================ */
.quick-jump-modal {
  max-width: 560px;
  padding: 0;
  overflow: hidden;
}

.quick-jump-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.quick-jump-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 1.05rem;
  padding: 4px 0;
}

.quick-jump-results {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding: 8px;
}

.quick-jump-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  padding: 8px 10px 4px;
}

.quick-jump-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.quick-jump-item:hover,
.quick-jump-item.selected {
  background: var(--bg-glass-hover);
  box-shadow: inset 2px 0 0 var(--accent-primary);
}

.quick-jump-main {
  flex: 1;
  min-width: 0;
}

.quick-jump-title {
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-jump-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-jump-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.quick-jump-footer {
  display: flex;
  gap: 16px;
  padding: 10px 18px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.quick-jump-footer kbd {
  background: var(--bg-input);
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 3px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
}

/* Floating launcher */
.fab-quick-jump {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow-glow), var(--shadow-md);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.fab-quick-jump:active {
  transform: scale(0.92);
}

/* Out of the way while performing */
.stage-mode .fab-quick-jump {
  opacity: 0.25;
}

.stage-mode .fab-quick-jump:hover,
.stage-mode .fab-quick-jump:active {
  opacity: 1;
}

/* ============================================================
   Saved Key Badge, Set Timing & Per-song Notes
   ============================================================ */
.saved-key-badge {
  background: rgba(0, 212, 170, 0.12) !important;
  border-color: rgba(0, 212, 170, 0.35) !important;
  color: var(--accent-tertiary) !important;
  align-items: center;
  gap: 6px;
}

.set-clock {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.capo-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: rgba(255, 159, 67, 0.15);
  border: 1px solid rgba(255, 159, 67, 0.35);
  color: var(--accent-warm);
  font-size: 0.68rem;
  font-weight: 700;
}

.song-row-note {
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--accent-warm);
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.performer-notes-card {
  margin-top: 32px;
  padding: 20px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.performer-notes-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--accent-tertiary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.performer-notes-hint {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.performer-notes-input {
  width: 100%;
  resize: vertical;
  min-height: 60px;
  line-height: 1.6;
  font-family: var(--font-ui);
}

.performer-notes-default {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-subtle);
}

/* ============================================================
   Print Styles
   ============================================================ */
@media print {
  /* The app shell is a fixed-height flex layout with clipped overflow, which is
     right on screen and fatal in print: the output was cropped to a single
     viewport, so a 9-song setlist or a long lyric sheet printed as one page.
     Every height and overflow constraint has to be released for the content to
     paginate. */
  html,
  body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
  }

  .app-container,
  .main-content,
  .content-area {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex: none !important;
  }

  /* Release the size constraints on view panels but leave their display alone:
     only one panel is active at a time and the inactive ones carry an inline
     display:none. Forcing display:block here printed all seven views at once. */
  .view-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex: none !important;
  }

  /* Fixed/sticky chrome would otherwise be stamped onto every printed page. */
  .fab-quick-jump,
  .queue-bar,
  .update-pill,
  .chord-popover,
  #metronome-panel,
  .top-bar,
  .sidebar-overlay {
    display: none !important;
  }

  [style*="position: sticky"],
  [style*="position:sticky"] {
    position: static !important;
  }

  /* Continuous Scroll: print every song, including the folded ones. */
  .continuous-song-block.collapsed .cont-song-body {
    display: block !important;
  }

  .cont-chevron {
    display: none !important;
  }

  .continuous-song-block {
    border: none !important;
    background: none !important;
    page-break-inside: auto;
    break-inside: auto;
  }

  .cont-song-header {
    background: none !important;
    padding: 0 0 8pt !important;
    border-bottom: 1px solid #333 !important;
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Never split a single lyric line across a page boundary. */
  .lyrics-line {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .song-row {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .sidebar,
  .top-bar,
  .filter-bar,
  .song-toolbar,
  .toast-container,
  .modal-overlay,
  .back-btn,
  .btn-create-playlist,
  .song-fav-btn,
  .playlist-card-actions,
  .nav-section,
  .menu-toggle,
  .fab-quick-jump,
  .chord-popover,
  .sidebar-overlay,
  .performer-notes-input {
    display: none !important;
  }

  /* The full-setlist print sheet.
     It is built off-screen and only becomes visible for the print job; when it
     is present it replaces the on-screen view entirely, so the printout is the
     setlist rather than whatever happened to be scrolled into view. */
  #setlist-print-container {
    display: block !important;
    color: #000;
  }

  body.printing-setlist .app-container {
    display: none !important;
  }

  #setlist-print-container .chord-inline {
    color: #000 !important;
    background: #eee !important;
    font-weight: bold;
    font-size: 10pt;
    padding: 0 2px;
    border-radius: 2px;
  }

  #setlist-print-container .lyrics-line {
    margin-bottom: 2pt;
  }

  #setlist-print-container .lyrics-section-break {
    height: 8pt;
  }

  .app-container {
    display: block;
  }

  .main-content {
    display: block;
  }

  .content-area {
    padding: 0;
    overflow: visible;
  }

  /* The on-screen lyric size is set inline (the font-size slider), so print has
     to override it explicitly or a 22px stage size turns one song into a dozen
     pages. */
  .lyrics-container {
    background: white !important;
    border: none !important;
    padding: 0 !important;
    color: black !important;
    font-size: 12pt !important;
    line-height: 1.85 !important;
  }

  /* Screen-only spacing that lets the last lines scroll to mid-screen. */
  .teleprompter-spacer {
    display: none !important;
  }

  .continuous-set-container {
    display: block !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
  }

  .lyrics-container .chord-inline {
    color: #333 !important;
    background: #eee !important;
    font-size: 10pt;
    font-weight: bold;
  }

  .chord-badge {
    background: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
  }

  .song-detail-header {
    border-bottom: 2px solid #333 !important;
  }

  .song-detail-title,
  .page-title {
    color: black !important;
    -webkit-text-fill-color: black !important;
    background: none !important;
  }

  .meta-tag {
    background: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
  }

  .song-row {
    border-bottom: 1px solid #ddd;
  }

  .song-key.major,
  .song-key.minor {
    background: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
  }

  /* Print setlist */
  .print-setlist .song-row {
    page-break-inside: avoid;
  }

  .page-break {
    page-break-after: always;
  }

  @page {
    margin: 1.5cm;
  }
}

/* ============================================================
   Unverified songs
   ------------------------------------------------------------
   AI-written songs are plausible, not proven. Until a person has
   checked one against the recording it is marked, so a doubtful
   lyric is never a surprise in the middle of a set.
   ============================================================ */
.unverified-dot {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: rgba(255, 159, 67, 0.15);
  border: 1px solid rgba(255, 159, 67, 0.45);
  color: var(--accent-warm);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  vertical-align: middle;
}

.review-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 159, 67, 0.4);
  background: rgba(255, 159, 67, 0.08);
}

.review-banner-text {
  flex: 1;
  min-width: 200px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.review-banner-text strong {
  color: var(--accent-warm);
}

.review-banner-btn {
  white-space: nowrap;
  border-color: rgba(255, 159, 67, 0.5);
  color: var(--accent-warm);
}

/* In Stage Mode the warning stays legible but stops competing with the lyrics. */
.stage-mode .review-banner {
  background: none;
  border-color: rgba(255, 159, 67, 0.3);
}