/* ============================================================
   FretList — Tailwind-inspired Design System
   ============================================================ */

:root {
  /* --------------------------------------------------------------
     Portfolio design system tokens (logged-in app)
     --------------------------------------------------------------
     Legacy token names (--bg, --surface, --text-1, --border, etc.)
     are preserved for backward compatibility with song-editor CSS.
     Only their *values* were updated to align with the new palette.
     -------------------------------------------------------------- */

  /* ---- Surfaces ---- */
  --bg:        #F6F6F6;
  --bg-card:   rgba(255, 255, 255, 0.2);   /* portfolio --bg-card */
  --bg-dark:   #111111;   /* inverted surfaces */
  --surface:   #FFFFFF;   /* legacy alias */
  --surface-2: #f6f6f6;   /* neutral gray */

  /* ---- Text ---- */
  --text:      #141414;   /* portfolio --text */
  --text-inv:  #F5F5F5;   /* on dark surfaces */
  --text-1:    #141414;   /* legacy alias */
  --text-2:    #5C5C5C;
  --text-3:    #9A9A9A;

  /* ---- Borders ---- */
  --border:    #fff;   /* portfolio --border (neutral hairline) */
  --border-2:  #C8C8C8;   /* portfolio --border-2 */

  /* ---- Accent ---- */
  --accent:         #FC4B1A;          /* portfolio --accent */
  --accent-hover:   #C44420;          /* portfolio --accent-dk */
  --accent-dk:      #C44420;
  --accent-subtle:  rgba(252, 75, 26, 0.10);  /* portfolio --accent-lt */
  --accent-lt:      rgba(252, 75, 26, 0.10);
  --accent-fg:      #ffffff;

  /* ---- Semantic extras ---- */
  --danger:         #C4442E;
  --danger-bg:      #FBEEEA;
  --success:        #2E8A55;

  /* ---- Shadows ---- */
  --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:    0 20px 60px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.06);
  --shadow-hv:    0 28px 72px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.08);
  --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,.05);
  --shadow-card:  var(--shadow-sm);

  /* ---- Card system (2026 redesign) ----
     One surface recipe for every card, stat block and table container.
     Interactive cards hover to --card-bg-hover; rows flip to --accent. */
  --page-grad:     linear-gradient(202deg, #FFFFFF 0%, #D8D8D8 100%);
  --card-bg:       rgba(255,255,255,.8);
  --card-bg-hover: #FFFFFF;
  --card-border:   #FFFFFF;
  --card-blur:     16px;
  --card-radius:   16px;
  --card-shadow:   0 16px 16px -8px rgba(12,12,13,.05), 0 4px 4px -4px rgba(12,12,13,.05);
  --row-divider:   #E2E2E2;
  --table-row-bg:  rgba(255,255,255,.4);
  --table-seam:    rgba(255,255,255,.4);
  --table-ink:     #2B343B;
  --table-head-divider: #EBEBEB;

  /* ---- Radii ---- */
  --radius:     12px;   /* default — cards, inputs */
  --radius-lg:  20px;   /* hero surfaces */
  --radius-sm:   8px;
  --radius-xs:   6px;
  --r:          12px;   /* portfolio alias */
  --rl:         20px;

  /* ---- Motion ---- */
  --transition: 150ms cubic-bezier(.4,0,.2,1);
  --ease:       cubic-bezier(.4,0,.2,1);
  --fast:       150ms;
  --base:       300ms;
  --slow:       500ms;

  /* ---- Typography ---- */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* --font-sans kept as a legacy alias → now points at Inter so app chrome uses
     the portfolio body face. The song editor explicitly pins its own elements
     to --font-mono, so this alias does not affect chord/lyric/beat rendering. */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

[data-theme="dark"] {
  --bg:        #0E0E0E;          /* neutral near-black */
  --bg-card:   #1A1A1A;
  --bg-dark:   #0A0A0A;
  --surface:   #1A1A1A;
  --surface-2: #242424;
  --border:    #2A2A2A;
  --border-2:  #3A3A3A;
  --text:      #F2F2F2;
  --text-inv:  #141414;
  --text-1:    #F2F2F2;
  --text-2:    #A8A8A8;
  --text-3:    #727272;
  --accent:         #FC4B1A;
  --accent-hover:   #FF6A3D;
  --accent-dk:      #FF6A3D;
  --accent-subtle:  rgba(252, 75, 26, 0.14);
  --accent-lt:      rgba(252, 75, 26, 0.14);
  --accent-fg:      #0E0D0B;
  --danger:         #F08B7A;
  --danger-bg:      #2A1312;
  --success:        #6FD48F;

  --shadow-sm:    0 1px 2px 0 rgba(0,0,0,.4);
  --shadow-md:    0 4px 16px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --shadow-lg:    0 20px 60px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  --shadow-hv:    0 28px 72px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.45);
  --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,.3);
  --shadow-card:  0 1px 4px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);

  --page-grad:     linear-gradient(202deg, #1C1C1C 0%, #0A0A0A 100%);
  --card-bg:       rgba(26,26,26,.8);
  --card-bg-hover: #1F1F1F;
  --card-border:   rgba(255,255,255,.08);
  --card-shadow:   0 16px 16px -8px rgba(0,0,0,.4), 0 4px 4px -4px rgba(0,0,0,.35);
  --row-divider:   #2A2A2A;
  --table-row-bg:  rgba(26,26,26,.45);
  --table-seam:    rgba(255,255,255,.06);
  --table-ink:     #E6E6E6;
  --table-head-divider: rgba(255,255,255,.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Reserve space for the scrollbar at all times so its appearance/
   disappearance doesn't shift centered layouts. `both-edges` reserves
   the gutter on both sides so the page stays perfectly centered
   whether or not a scrollbar is present (the scrollbar itself is 6px,
   set further down). Falls back gracefully on older browsers. */
html { font-size: 16px; scroll-behavior: smooth; scrollbar-gutter: stable both-edges; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--bg);
  background-image: var(--page-grad);
  background-attachment: fixed;
  color: var(--text-1);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s, color .2s;
}

[data-theme="dark"] body {
  background: var(--bg);
  background-image: var(--page-grad);
  background-attachment: fixed;
}
/* Display font on all heading levels. Inside the song editor/viewer,
   specific selectors (.chord-chip, .lyric-input, .perf-*) pin themselves
   to --font-mono, so chord/lyric rendering is unaffected. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  color: var(--text-1);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

/* ============================================================
   Layout
   ============================================================ */

#app {
  display: block;
  min-height: 100vh;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.app-main {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Card system ──────────────────────────────────────────────
   Shared surface for stat cards, list cards and table containers.
   .card-hover  — whole card is a target: solid bg on hover.
   Composite blocks butt cards together with 2px gaps and round only
   the outer corners (see .dash-stats-grid for the pattern). */
.card {
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  border: 1px solid var(--card-border);
  border-top-width: 2px;
  border-bottom-width: 2px;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.card-hover { transition: background-color var(--transition); }
.card-hover:hover { background-color: var(--card-bg-hover); }

/* ── Sidebar ── */

/* ── Play mode (clean view) ──────────────────────────────────────────
   When play is engaged, hide all chrome above and around the chart so
   only the song sheet + bottom play bar are visible. Title/artist stay
   in the card header until scrolled past, then a sticky header at top
   takes over (see .song-play-sticky below). */
body.is-performing .top-nav,
body.is-performing .nav-hero-bare,
body.is-performing .song-view-back,
body.is-performing .song-view-card-actions,
body.is-performing .song-view-divider,
body.is-performing .song-view-toolbar,
body.is-performing .chord-ref,
body.is-performing #capo-panel-slot,
body.is-performing .song-view-notes {
  display: none !important;
}

/* Sticky header (title/artist + close) that appears when scrolled past
   the in-card title while in play mode. Hidden by default; the JS
   scroll listener toggles `.is-stuck` to fade it in. */
.song-play-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-2);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity .2s ease, transform .25s cubic-bezier(.4,0,.2,1);
}
.song-play-sticky.is-stuck {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.song-play-sticky-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.song-play-sticky-artist {
  font-size: .85rem;
  color: var(--text-3);
  line-height: 1.2;
}
.song-play-close {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: var(--bg);
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.song-play-close:hover { color: var(--text-1); border-color: var(--text-2); }

/* Inline play-mode close button — sits in the card header (replaces
   the action pills) so the user has a way to exit before scrolling. */
.song-play-close-inline { display: none; }
body.is-performing .song-play-close-inline {
  display: inline-flex;
  margin-left: auto;
}

/* Setlist prev/next strip — shown above the play bar when the song is
   being viewed as part of a setlist. */
.setlist-nav-bar {
  display: none;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 16px 4px 80px;
}
body.is-performing .setlist-nav-bar.has-context { display: flex; }
.setlist-nav-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: inherit;
  transition: background var(--transition);
  text-align: left;
}
.setlist-nav-side.empty { visibility: hidden; }
.setlist-nav-side:hover { background: var(--accent-subtle); }
.setlist-nav-side.next { justify-content: flex-end; text-align: right; }
.setlist-nav-arrow {
  flex-shrink: 0;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.setlist-nav-meta { min-width: 0; }
.setlist-nav-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.setlist-nav-artist {
  font-size: .82rem;
  color: var(--text-3);
}

/* ── Inline Perf Bar ── */
.perf-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  animation: perfBarIn 0.3s cubic-bezier(0.4,0,0.2,1);
}

@keyframes perfBarIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.perf-bar-left,
.perf-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.perf-bar-capo {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid rgba(220,84,34,.25);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
}

.perf-bar-transpose {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px 4px;
}

.perf-bar-key {
  font-size: .875rem;
  font-weight: 700;
  color: var(--text-1);
  min-width: 36px;
  text-align: center;
  padding: 0 4px;
}

.perf-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-2);
  font-size: .8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1;
}
.perf-bar-btn:hover { background: var(--surface-2); color: var(--text-1); border-color: var(--border-2); }
.perf-bar-btn svg { width: 13px; height: 13px; }

/* Transpose +/− sit inside the grouped box without their own outer border */
.perf-bar-transpose .perf-bar-btn {
  border: none;
  padding: 3px 6px;
  border-radius: 5px;
}
.perf-bar-transpose .perf-bar-btn:hover { background: var(--border); }

.perf-bar-font-ctrl {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px 4px;
}
.perf-bar-font-ctrl .perf-bar-btn { border: none; border-radius: 5px; padding: 3px 6px; }
.perf-bar-font-ctrl .perf-bar-btn:hover { background: var(--border); }

.perf-bar-font-val {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-2);
  min-width: 34px;
  text-align: center;
}

.perf-bar-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: 8px;
  font-size: .8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition);
}
.perf-bar-play:hover { background: var(--accent-hover); }
.perf-bar-play.active { background: var(--text-2); }
.perf-bar-play svg { width: 13px; height: 13px; }

.perf-bar-close {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-3);
  font-size: .8125rem;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  margin-left: 4px;
}
.perf-bar-close svg { width: 12px; height: 12px; }
.perf-bar-close:hover { color: var(--danger); border-color: var(--danger); }

/* Font scaling in inline perf mode — responds to --perf-fs CSS var */
.app-is-performing .song-content .chord-row { font-size: calc(var(--perf-fs, 14px) * 0.87); }
.app-is-performing .song-content .lyric-row,
.app-is-performing .song-content .lyric-only-row { font-size: var(--perf-fs, 15px); }

.sidebar-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 19px 16px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.92);
  background: transparent;
  color: #000;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  text-align: left;
  width: 100%;
}
.sidebar-nav-btn svg { flex-shrink: 0; stroke: currentColor; }
.sidebar-nav-btn:hover { background: rgba(255,255,255,0.4); }
.sidebar-nav-btn.active { background: #fff; color: var(--accent); }
.sidebar-nav-btn.active svg { color: var(--accent); }
.sidebar-nav-count {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: #838383;
  font-variant-numeric: tabular-nums;
}
.sidebar-nav-count:empty { display: none; }

/* ── Sidebar profile: collapsible card holding avatar trigger + settings menu ── */

/* legacy .app-main flex rules removed — top-nav layout uses block flow */


/* ============================================================
   Cards
   ============================================================ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 24px;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

/* ── Card surface system ──
   Use one of these surface classes on any container; layout/structural
   classes (.song-view-card, .editor-content-card, .editor-meta-card, etc.)
   should NOT redefine background, border, shadow, or radius — they only
   handle padding, flex, gap, sizing.

   .surface-card  — primary content surface that anchors a page
                    (song view, edit content). Solid white, soft drop shadow.
   .card-flush    — secondary translucent panel; backdrop-blur glass.
                    For sidebars, table containers, recent-list wrappers.
   .card / .card-sm — small bordered regions inside a page (form groups,
                    modal sections). Hairline border, no shadow.
*/

.surface-card {
  background: #fff;
  border: 2px solid #fff;
  border-radius: 16px;
  box-shadow:
    0 16px 16px -8px rgba(12, 12, 13, .05),
    0 4px 4px -4px rgba(12, 12, 13, .05);
}
[data-theme="dark"] .surface-card {
  background: var(--surface);
  border-color: var(--border);
}

/* Flush card — shared container for row-based surfaces (tables, recent lists). */
.card-flush {
  border-radius: var(--card-radius);
  border: 2px solid var(--card-border);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: blur(16.15px);
  /* When an absolutely-positioned dropdown is open inside the card, drop
     the clip so the menu can spill past the rounded corners. Without this,
     the song row 3-dot menu and the share card overflow menu both get
     clipped because card-flush sets overflow: hidden below. */
  backdrop-filter: blur(16.15px);
  overflow: hidden;
}

/* ============================================================
   Buttons
   ============================================================ */

/* Pill buttons per portfolio design system. Editor/perf UI uses its own
   dedicated button classes (.perf-hud-btn, .picker-tab, .chip-beats-btn,
   etc.) that are unaffected by these .btn rules. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.25rem;
  border-radius: 100px;              /* pill */
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.2;
  border: 1px solid transparent;
}
.btn:hover   { transform: translateY(-1px); }
.btn:active  { transform: translateY(0) scale(.98); }
.btn svg     { width: 15px; height: 15px; flex-shrink: 0; transition: transform var(--fast) var(--ease); }

/* Primary — near-black fill, accent on hover */
.btn-primary {
  background: var(--text-1);
  color: var(--text-inv);
  border-color: var(--text-1);
}
.btn-primary:hover  { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:active { background: var(--accent-dk); }

/* Accent — filled orange */
.btn-accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(252, 75, 26, .18);
}
.btn-accent:hover  { background: var(--accent-dk); border-color: var(--accent-dk); }
.btn-accent:active { filter: brightness(.95); }

/* Ghost — bordered, transparent */
.btn-ghost {
  background: transparent;
  color: var(--text-1);
  border-color: var(--border-2);
}
.btn-ghost:hover  { background: var(--text-1); color: var(--text-inv); border-color: var(--text-1); }

/* Danger — warm red, ghost style default */
.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--border-2);
}
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.btn-sm    { padding: .4rem 1rem; font-size: .78rem; gap: 5px; }
.btn-sm svg{ width: 13px; height: 13px; }
.btn-icon  { padding: 8px; border-radius: 50%; }
.btn-icon.btn-sm { padding: 6px; }
.btn-icon:hover  { transform: translateY(0); }

/* Dark mode toggle */
/* ---- User menu ---- */
/* .user-avatar-initials stays usable inside the sidebar-profile-avatar span */
.user-avatar-initials {
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
  user-select: none;
}

/* .user-dropdown-name / .user-dropdown-email sit on the trigger — styled via .sidebar-profile-name/email. */

.user-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

.user-dropdown-section-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  padding: 8px 14px 4px;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-1);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background var(--transition);
  width: 100%;
  text-align: left;
}

.user-dropdown-item:hover { background: var(--surface-2); }

.user-dropdown-item-icon {
  width: 16px;
  height: 16px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-dropdown-item-icon svg { width: 14px; height: 14px; }

.user-dropdown-item-label { flex: 1; }

.user-dropdown-item-value {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

.user-dropdown-signout { color: var(--danger); }
.user-dropdown-signout .user-dropdown-item-icon { color: var(--danger); }

/* ============================================================
   Forms
   ============================================================ */

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.form-input, .form-select, .form-textarea {
  background: #fff;
  border: 1.5px solid #DADADA;
  border-radius: var(--radius-sm);
  padding: .75rem .9rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-1);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  width: 100%;
  outline: none;
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  background: var(--surface);
  border-color: var(--border-2);
}

/* Lyrics & Chords panel keeps its own input styling (unchanged) */
.editor-content-card .form-input,
.editor-content-card .form-select,
.editor-content-card .form-textarea {
  background: var(--bg);
  border-color: var(--border);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(252, 75, 26, .15);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(252, 75, 26, .25);
}

.form-input::placeholder, .form-textarea::placeholder { color: var(--text-3); }

.form-textarea { resize: vertical; min-height: 120px; }

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 30px;
}

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }

/* ============================================================
   Page header
   ============================================================ */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}

/* Consistent sizing for primary-action buttons in every page header. */
.page-header .btn{
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 600;
  gap: 8px;
}
.page-header .btn svg{ width: 16px; height: 16px; }
/* Keep explicit small-variant opt-outs (e.g. .btn-sm "Back" links) at their own size. */
.page-header .btn.btn-sm {
  padding: .4rem 1rem;
  font-size: .78rem;
  gap: 5px;
}
.page-header .btn.btn-sm svg { width: 13px; height: 13px; }

.page-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--text-1);
}
.page-subtitle {
  font-size: .875rem;
  color: var(--text-2);
  margin-top: 6px;
  font-family: var(--font-body);
}
/* Eyebrow label — uppercase, spaced, muted (use for small meta headings). */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ============================================================
   Search
   ============================================================ */

.search-bar { position: relative; margin-bottom: 20px; }
.search-bar svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-3); width: 16px; height: 16px; pointer-events: none; }
.search-bar .form-input {
  padding: 14px 22px 14px 44px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: .95rem;
}

/* ============================================================
   Song Cards
   ============================================================ */

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: .72rem;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}

/* ============================================================
   Song List (cards + filter bar)
   ============================================================ */

/* Filter bar */
.songs-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.sort-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sort-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}

.sort-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.sort-chip {
  padding: 5px 13px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1.4;
}
.sort-chip:hover { border-color: var(--border-2); color: var(--text-1); }
.sort-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.sort-dir-btn {
  margin-left: auto;
  padding: 5px 12px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1.4;
  white-space: nowrap;
}
.sort-dir-btn:hover { border-color: var(--border-2); color: var(--text-1); }

/* Song cards */

/* Tempo feel — clickable to cycle */

/* ── Song Library Table: canonical styles live in the "Song table (canonical)"
   section further down — one skin shared by Songs, Setlists and Shows. ── */

/* ---- Tag chip (shared) ---- */
.tag-chip {
  --tag-color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border-2);
  border-radius: 9999px;
  background: transparent;
  color: var(--text-2);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1.2;
}
.tag-chip:hover {
  border-color: var(--tag-color);
  color: var(--tag-color);
}
.tag-chip.active {
  background: var(--tag-color);
  border-color: var(--tag-color);
  color: #fff;
}

/* ---- Songs page: view switcher ---- */
/* View switcher + two-pane rail: canonical styles below. */
.songs-view-btn {
  border: 0;
  background: transparent;
  color: var(--text-2);
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  border-radius: 100px;
  cursor: pointer;
  transition: all var(--transition);
}
.songs-view-btn:hover { color: var(--text-1); }
.songs-view-btn.active {
  background: var(--text-1);
  color: var(--text-inv);
  font-weight: 600;
}

/* ---- Songs page: tag filter bar (All view) ---- */

/* ---- Songs page: two-pane layout (Artists + Tags views) ---- */


/* Tag-list rows have an inline action cluster */
.songs-pane-item-tag {
  --tag-color: var(--accent);
  padding: 0;
  display: flex;
  align-items: stretch;
}

.songs-pane-right-header {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-1);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.songs-pane-right-header-label { flex: 1; min-width: 0; }
.songs-pane-right-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.songs-pane-right-header-actions .song-table-icon-btn { width: 20px; height: 20px; }
.songs-pane-right-header-actions .song-table-icon-btn svg { width: 18px; height: 18px; }

/* ---- Songs page: recent view ---- */
.songs-recent-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
}
.songs-recent-hint {
  font-size: .8rem;
  color: var(--text-3);
}

/* ---- Song edit: tag editor inside the meta card ---- */
.song-tag-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.song-tag-create { margin-top: 8px; }

/* Feel badges — in table rows */

/* Feel picker — in song editor */
.feel-picker {
  display: flex;
  gap: 6px;
}

.feel-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.feel-btn:hover { border-color: var(--border-2); color: var(--text-1); background: var(--surface); }

/* ============================================================
   Setlist Cards
   ============================================================ */

.setlists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px; }

.setlist-card {
  background: var(--card-bg);
  cursor: pointer;
  transition: background-color var(--transition);
}
.setlist-card:hover { background: var(--card-bg-hover); }
/* Inside the setlist card, song rows shouldn't have their own hover — the
   whole card hovers as a unit. Override the global .song-table-row:hover. */
.setlist-card .setlist-card-song-row:hover td { background: transparent; }
.setlist-card .setlist-card-song-row td { background: transparent; }

.setlist-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 14px;
}
.setlist-card-titles { min-width: 0; flex: 1; }
.setlist-card-eyebrow {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.2;
  margin-bottom: 2px;
}
.setlist-card-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text-1);
  line-height: 1.2;
}

.setlist-card-perform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.setlist-card-perform svg { width: 14px; height: 14px; }
.setlist-card-perform:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.setlist-card-perform[disabled] { opacity: .45; cursor: not-allowed; }

.setlist-card .song-table { table-layout: fixed; }
.setlist-card-song-cell { display: flex; flex-direction: column; gap: 2px; max-width: none; width: auto; }
.setlist-card-song-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.setlist-card-song-artist {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme="dark"] .setlist-card-song-title { color: var(--text-1); }
.setlist-card-song-row { cursor: default; }
.setlist-card-song-row:hover { background: transparent; }

.setlist-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 16px;
  font-size: .85rem;
}
.setlist-card-more { color: var(--text-3); }
.setlist-card-view { color: var(--accent); font-weight: 600; }
.setlist-card:hover .setlist-card-view { text-decoration: underline; }

/* ============================================================
   Song View
   ============================================================ */

.song-view-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: calc(100dvh - 48px);
  position: relative;
  padding-bottom: 96px;
}

.song-view-header {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 24px 0 0 0;
  margin-bottom: 0;
}

.song-view-scroll {
  flex: 1;
  display: flex;
  min-height: 0;
}
.song-view-scroll .song-content {
  flex: 1;
  overflow-y: auto;
  min-height: 360px;
}

/* Capo pill — two-part: value | action */

/* Key pill — display-only */
.key-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border-2);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}
.key-pill-value { color: var(--accent); font-weight: 700; }
.key-pill-sep { color: var(--border-2); font-weight: 300; margin: 0 2px; }

/* Show Beats toggle (iOS-style) */

/* Meta chips on right */

/* Bottom play bar */
/* New play-bar: collapsed (just the play button) ↔ open (full controls) */
.play-bar {
  position: sticky;
  bottom: 16px;
  z-index: 20;
  display: flex;
  justify-content: center;
  margin: 0 28px;
  pointer-events: none;
}
.play-bar-rail {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 16px;
  background: #1A1A1A;
  color: #F2F2F2;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.14);
  pointer-events: auto;
  transition: padding .35s cubic-bezier(.4,0,.2,1), background .25s ease;
  max-width: 100%;
}
[data-theme="dark"] .play-bar-rail {
  background: #fff;
  color: #141414;
  box-shadow: 0 12px 36px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
}

.play-bar.is-collapsed .play-bar-rail {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.play-bar.is-collapsed .pb-hidden-when-collapsed { display: none; }
.play-bar.is-collapsed .pb-play {
  box-shadow: 0 10px 26px rgba(252,75,26,.38), 0 2px 6px rgba(252,75,26,.25);
}

.pb-ctrl {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}
.pb-label {
  background: transparent;
  border: 0;
  color: #C8C8C8;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pb-icon { display: inline-flex; align-items: center; }
.pb-icon svg { width: 16px; height: 16px; }
.pb-label:hover { background: rgba(255,255,255,.08); color: #fff; }
[data-theme="dark"] .pb-label { color: #555; }
[data-theme="dark"] .pb-label:hover { background: rgba(0,0,0,.05); color: #141414; }

/* Vertical popover above the label */
.pb-popover[hidden] { display: none !important; }
.pb-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: #1A1A1A;
  color: #F2F2F2;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.16);
  min-width: 76px;
  z-index: 30;
  animation: pb-pop .18s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"] .pb-popover {
  background: #fff;
  color: #141414;
  box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
}
.pb-popover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1A1A1A;
}
[data-theme="dark"] .pb-popover::after { border-top-color: #fff; }
@keyframes pb-pop {
  from { opacity: 0; transform: translate(-50%, 6px) scale(.92); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.pb-arrow {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s ease;
  width: 100%;
  text-align: center;
}
.pb-arrow:hover { background: rgba(255,255,255,.12); }
[data-theme="dark"] .pb-arrow:hover { background: rgba(0,0,0,.08); }

.pb-ctrl-value {
  font-size: 15px;
  font-weight: 700;
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 2px 0;
}

.pb-play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(252,75,26,.38);
  transition: transform .15s var(--ease), box-shadow .2s ease, background .2s ease;
  flex-shrink: 0;
}
.pb-play:hover { transform: scale(1.04); background: var(--accent-hover); }
.pb-play:active { transform: scale(0.97); }
.pb-play .pb-play-icon { display: inline-flex; align-items: center; justify-content: center; }
.pb-play .pb-play-icon svg { width: 18px; height: 18px; }
.play-bar.is-playing .pb-play { box-shadow: 0 0 0 4px rgba(252,75,26,.18), 0 4px 14px rgba(252,75,26,.38); }

@media (max-width: 720px) {
  /* Anchor to the viewport bottom so the controls are always reachable
     without scrolling. position:sticky doesn't pin reliably on mobile
     when the sticky element is the last child of a tall flex container. */
  .play-bar {
    position: fixed;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    margin: 0;
  }
  .pb-ctrl { min-width: 0; padding: 4px 6px; }
  .pb-ctrl-value { min-width: 44px; font-size: 13px; }
  .pb-play { width: 48px; height: 48px; }
  .pb-label { padding: 10px; gap: 0; }
  .pb-label-text { display: none; }
  .pb-icon svg { width: 18px; height: 18px; }
  /* Reserve space at the bottom of the song page so content isn't
     hidden behind the floating bar. */
  .song-view-page { padding-bottom: 96px; }
}

.song-view-notes {
  font-size: .8125rem;
  font-style: italic;
  color: var(--text-3);
  margin-top: 10px;
}

/* "Open audio link" — anchor variants of these classes need to drop
   the default link underline so they look identical to the <button>
   versions sitting next to them. Color comes from the base class rule. */
a.action-pill,
a.overflow-item,
a.song-row-menu-item { text-decoration: none; }
a.action-pill:hover,
a.overflow-item:hover,
a.song-row-menu-item:hover { text-decoration: none; }

/* ── Audio mini-player ──────────────────────────────────────────
   Audio-only mini-player rendered inline in the song-view actions
   row. Layout: [ear/play] [progress] [time]. The ear icon morphs
   to a play circle on hover, and to a pause circle while playing
   (regardless of hover). The actual <audio>/iframe lives off-screen
   in .audio-player-host. */
.song-audio-player {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 320px;
  min-width: 200px;
  max-width: 360px;
}

/* Hidden host for the underlying audio/iframe. Kept in DOM so the
   3rd-party players (YouTube IFrame, SoundCloud Widget) can run, but
   visually offscreen. Don't use display:none — some players require
   the iframe to be in the render tree. */
.audio-player-host {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  left: -9999px !important;
  top: auto !important;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.audio-player-host iframe,
.audio-player-host audio { width: 1px; height: 1px; border: 0; }

.audio-player-toggle {
  width: 32px; height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color .12s, transform .12s;
}
.audio-player-toggle:hover { color: var(--accent); }
.audio-player-toggle svg { width: 22px; height: 22px; }
.audio-player-toggle .ic-play,
.audio-player-toggle .ic-pause { display: none; }

/* Default (idle/paused & not hovered): ear visible.
   Hover: swap ear for play-circle.
   Playing: pause-circle visible (always — overrides hover). */
.audio-player-toggle:hover .ic-ear { display: none; }
.audio-player-toggle:hover .ic-play { display: block; }

.song-audio-player[data-state="playing"] .audio-player-toggle .ic-ear,
.song-audio-player[data-state="playing"] .audio-player-toggle .ic-play { display: none; }
.song-audio-player[data-state="playing"] .audio-player-toggle .ic-pause { display: block; }
.song-audio-player[data-state="playing"] .audio-player-toggle { color: var(--accent); }

/* Loading: pulse the ear icon so the user knows we're initialising. */
.song-audio-player[data-state="loading"] .audio-player-toggle { pointer-events: none; }
.song-audio-player[data-state="loading"] .audio-player-toggle .ic-ear {
  animation: audio-player-pulse 1.1s ease-in-out infinite;
}
@keyframes audio-player-pulse { 0%,100% { opacity: .35; } 50% { opacity: .9; } }

.song-audio-player[data-state="error"]   .audio-player-toggle { opacity: .4; pointer-events: none; }

.audio-player-progress {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  min-width: 60px;
  background: rgba(0,0,0,0.10);
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
}
[data-theme="dark"] .audio-player-progress { background: rgba(255,255,255,0.12); }
.audio-player-progress:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.audio-player-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--text-1);
  border-radius: inherit;
  transition: width .12s linear;
  pointer-events: none;
}
.song-audio-player[data-state="error"] .audio-player-progress { opacity: .35; pointer-events: none; }

.audio-player-time {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -.01em;
}
.audio-player-time-sep,
.audio-player-time-total { color: var(--text-3); font-weight: 600; }
.song-audio-player[data-state="loading"] .audio-player-time-total { opacity: .5; }

/* Hide while performing — the play-bar takes over for stage use. */
body.is-performing .song-audio-player { display: none; }

/* Mobile: let the player wrap onto its own line under the title row.
   The action pills (edit / heart / overflow) stay on top. */
@media (max-width: 700px) {
  .song-audio-player { flex: 1 1 100%; max-width: 100%; order: 2; }
}

/* ============================================================
   Song Content
   ============================================================ */

.song-content {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
  margin-bottom: 20px;
}

.song-section-label {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  color: var(--bg);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 24px 0 8px;
  padding: 3px 10px;
  background: var(--text-1);
  border-radius: 9999px;
}

.song-section-label:first-child { margin-top: 0; }

.chord-lyric-block { margin-bottom: 2px; font-family: var(--font-mono); line-height: 1.5; }
/* Beat count display — monospace char-grid aligned with chord-row + lyric-row below */
.beats-row {
  font-family: var(--font-mono);
  color: var(--text-3);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: pre;
  line-height: 1.1;
  margin-bottom: 1px;
  position: relative;
  min-height: 1.1em;
}
/* Nashville-style chart marks row — sits above chord-row, char-aligned.
   Renders `◇` for diamond holds and `|` for bar-before markers. */
.marks-row {
  font-family: var(--font-mono);
  color: var(--text-2);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: 0;
  white-space: pre;
  line-height: 1;
  margin-bottom: 1px;
}
.beats-cell {
  position: absolute;
  top: 0;
  white-space: pre;
}
.beats-ring-tail {
  position: absolute;
  top: 50%;
  width: 47px;
  height: 6px;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
  overflow: visible;
}
.chord-row { color: var(--accent); font-weight: 700; font-size: .875rem; white-space: pre; }
/* Numbers row (NNS) in hybrid "both" mode — sits directly above the letters
   row, same monospace grid so columns line up character-by-character. Slightly
   muted to read as a secondary layer. */
.chord-row.chord-row-numbers,
.perf-chord-row.perf-chord-row-numbers {
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: -2px;
}
.lyric-row { color: var(--text-1); font-size: .9375rem; white-space: pre-wrap; }
.lyric-only-row { font-family: var(--font-mono); color: var(--text-1); font-size: .9375rem; white-space: pre-wrap; margin-bottom: 1px; }
.chord-only-row { font-family: var(--font-mono); color: var(--accent); font-weight: 700; font-size: .875rem; white-space: pre; margin-bottom: 1px; }
.blank-row { height: 12px; }

/* ── Phrase Spacing (view & performance mode only, not editor) ─── */
/* Spacing grows ABOVE the beats-row (or chord-row when no beats).
   When a beats-row is present, the chord-row following it should not
   also get phrase-spacing padding — that'd double up. */
/* Phrase spacing applies to the whole chord "object" (chord + beats + any future
   chord-related rows), placing the gap between the previous lyric line and the
   top of the chord object — NOT inside the object. */
/* comfy */
[data-phrase-spacing="comfy"] .song-content .chord-lyric-block,
[data-phrase-spacing="comfy"] .song-content .chord-only-row {
  padding-top: 28px;
}
[data-phrase-spacing="comfy"] .perf-scrollable .chord-lyric-block,
[data-phrase-spacing="comfy"] .perf-scrollable .chord-only-row {
  padding-top: 30px;
}
/* wide */
[data-phrase-spacing="wide"] .song-content .chord-lyric-block,
[data-phrase-spacing="wide"] .song-content .chord-only-row {
  padding-top: 56px;
}
[data-phrase-spacing="wide"] .perf-scrollable .chord-lyric-block,
[data-phrase-spacing="wide"] .perf-scrollable .chord-only-row {
  padding-top: 60px;
}
/* Section-label spacing — same comfy/wide modes pad the gap above each
   section title (skip the first section so we don't push everything down). */
[data-phrase-spacing="comfy"] .song-content .song-view-section + .song-view-section { padding-top: 24px; }
[data-phrase-spacing="wide"]  .song-content .song-view-section + .song-view-section { padding-top: 52px; }
[data-phrase-spacing="comfy"] .perf-scrollable .perf-section-label:not(:first-child) { margin-top: 56px; }
[data-phrase-spacing="wide"]  .perf-scrollable .perf-section-label:not(:first-child) { margin-top: 96px; }

/* Inline notes need to absorb the phrase-spacing pad so they stay centered.
   The chord-block (or chord-only-row) BELOW the note gets the comfy/wide
   padding-top; without compensating, the gap below the note's text is bigger
   than the gap above. Mirror that padding on the note's top — but only when
   the *next* sibling actually has phrase-spacing padding. A note followed by
   a .lyric-only-row gets no extra pad (that row has none either). */
[data-phrase-spacing="comfy"] .song-content .section-note-display-inline:has(+ .chord-lyric-block),
[data-phrase-spacing="comfy"] .song-content .section-note-display-inline:has(+ .chord-only-row) { padding-top: 28px; }
[data-phrase-spacing="wide"]  .song-content .section-note-display-inline:has(+ .chord-lyric-block),
[data-phrase-spacing="wide"]  .song-content .section-note-display-inline:has(+ .chord-only-row) { padding-top: 56px; }
[data-phrase-spacing="comfy"] .perf-scrollable .section-note-display-inline:has(+ .chord-lyric-block),
[data-phrase-spacing="comfy"] .perf-scrollable .section-note-display-inline:has(+ .chord-only-row) { padding-top: 30px; }
[data-phrase-spacing="wide"]  .perf-scrollable .section-note-display-inline:has(+ .chord-lyric-block),
[data-phrase-spacing="wide"]  .perf-scrollable .section-note-display-inline:has(+ .chord-only-row) { padding-top: 60px; }

.chord-token {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: transparent;
  transition: color var(--transition), text-decoration-color var(--transition);
}
.chord-token:hover { color: var(--accent-hover); text-decoration-color: var(--accent); }

/* ============================================================
   Chord Reference
   ============================================================ */

.chord-ref {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 24px;
  margin-bottom: 20px;
}

.chord-ref-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 16px;
}

.chord-ref-title svg { width: 14px; height: 14px; }

.chord-diagrams-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }

.chord-diagram {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 6px 4px;
  cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chord-diagram:hover { box-shadow: var(--shadow-md); border-color: var(--accent); transform: translateY(-2px); }

.chord-unknown {
  width: 76px;
  height: 96px;
  justify-content: center;
}

.chord-name { font-size: .72rem; font-weight: 700; color: var(--text-2); }
.chord-no-data { font-size: 1.1rem; color: var(--text-3); }

/* ============================================================
   Song Editor
   ============================================================ */

.editor-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }

@media (min-width: 900px) {
  .editor-layout { grid-template-columns: 300px 1fr; }
  .editor-layout[data-edit-view="focus"] { grid-template-columns: 1fr; }
}
.editor-layout[data-edit-view="focus"] .editor-meta-card { display: none; }

/* View controls toolbar */
.view-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.view-ctrl:hover { background: rgba(255, 255, 255, 0.8); color: var(--text-1); }
.view-ctrl.active { background: #fff; color: var(--text-1); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.view-ctrl svg { flex-shrink: 0; }
[data-theme="dark"] .view-ctrl:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .view-ctrl.active { background: var(--surface-2); color: var(--text-1); }


/* Surface chrome on .editor-meta-card / .editor-content-card now comes from
   the .surface-card or .card-flush utility applied in markup. Legacy rule
   removed — only layout/typography overrides remain in .song-edit-page below. */
.editor-meta-card, .editor-content-card {
  padding: 0;
  overflow: hidden;
}

.editor-card-body { padding: 22px; }


/* Standalone page header — no bg, no border, matches sidebar logo bar height */

.editor-hint {
  font-size: .78rem;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}

.editor-hint code {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--accent);
  background: var(--accent-subtle);
  padding: 1px 5px;
  border-radius: 4px;
}

[data-theme="dark"] .editor-hint code { background: rgba(232,103,60,.15); }

/* ============================================================
   Setlist Detail
   ============================================================ */

/* ── Setlist Perform Overview ──
   Reuses .surface-card / .song-view-card / .song-view-card-title for the
   wrapper, .recent-item-key for the key badge, and .song-row-play for the
   row play button so this view matches song play mode. */
.setlist-perform-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.setlist-perform-row {
  display: grid;
  grid-template-columns: 32px minmax(220px, 2fr) 60px minmax(100px, 1fr) minmax(80px, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 12px 0;
}
.setlist-perform-num { color: var(--text-3); text-align: center; font-size: .95rem; }
.setlist-perform-info { min-width: 0; }
.setlist-perform-song-title {
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.setlist-perform-song-artist {
  font-size: .85rem;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.setlist-perform-capo,
.setlist-perform-speed { color: var(--text-2); font-size: .95rem; }

@media (max-width: 720px) {
  .setlist-perform-row {
    grid-template-columns: 28px 1fr auto;
    gap: 12px;
  }
  .setlist-perform-row .recent-item-key,
  .setlist-perform-capo,
  .setlist-perform-speed { display: none; }
}

.setlist-songs-list { display: flex; flex-direction: column; gap: 8px; }

.setlist-song-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.setlist-song-item:hover { border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.setlist-song-item.is-draggable { cursor: grab; }
.setlist-song-item.is-draggable:active { cursor: grabbing; }
.setlist-song-item.is-dragging { opacity: .4; }
.setlist-song-item.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.setlist-song-item.drop-after  { box-shadow: 0 3px 0 0 var(--accent); }

.setlist-song-num { font-size: .72rem; color: var(--text-3); font-weight: 700; width: 20px; text-align: right; flex-shrink: 0; }
.setlist-song-info { flex: 1; min-width: 0; }
.setlist-song-title { font-family: var(--font-display); font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setlist-song-artist { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text-2); }
.setlist-song-controls { display: flex; gap: 3px; flex-shrink: 0; }

/* ============================================================
   Dashboard
   ============================================================ */

/* ---- Dashboard ---- */

.stat-card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Section title header bar — sits flush inside .card-flush */

/* Flat row list — no gaps, separator-only borders */

/* Row styling (background, borders, hover) is shared via .song-table-row, .recent-item above. */

.recent-item-key {
  display: inline-block;
  min-width: 16px;
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1.5px solid var(--accent);
  border-radius: 5px;
  padding: 2px 6px;
}

[data-theme="dark"] .recent-item-key { background: rgba(232,103,60,.12); border-color: rgba(232,103,60,.25); }

/* ============================================================
   Modal
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 6, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--base) var(--ease);
}

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

.modal {
  background: var(--bg);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  padding: 2rem;
  max-width: 440px;
  width: 100%;
  transform: scale(.96) translateY(4px);
  transition: transform var(--base) var(--ease);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

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

.modal-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: -.75rem;
}
.modal-body {
  color: var(--text-2);
  font-size: .95rem;
  line-height: 1.55;
}
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: .5rem; flex-wrap: wrap; }

/* My Profile modal */
.profile-modal { max-width: 480px; }
.profile-modal .modal-body { display: flex; flex-direction: column; gap: 1rem; }
.profile-modal-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .02em;
  align-self: center;
  margin-bottom: .25rem;
}
.profile-modal .form-label {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-2);
  margin-bottom: 6px;
  display: block;
}
.profile-subscription {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.profile-subscription-tier {
  font-weight: 700;
  color: var(--text-1);
}
.profile-subscription-hint {
  font-size: .85rem;
  color: var(--text-2);
}
.profile-modal-error {
  color: #c0392b;
  font-weight: 500;
}
[data-theme="dark"] .profile-modal-error { color: #ff8a7a; }

/* Inline modal boxes (display:flex toggle, used in show editor) */
.modal-overlay[style*="flex"] { opacity: 1; pointer-events: all; }

.modal-box {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.modal-box-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1);
}

/* Show editor set rows reuse .setlist-song-item and the drag-drop styles
   from the setlist editor — see the setlist-song-item rules above. */

/* ============================================================
   Shows — List Grid
   ============================================================ */

/* Shows reuse .setlists-grid + .setlist-card / .setlist-card-* / .song-table
   for the list view. No bespoke .shows-grid or .show-card-* rules — keeping
   one design vocabulary across Setlists and Shows. */

/* ============================================================
   Shows — Detail View
   ============================================================ */

.show-sets-stack { display: flex; flex-direction: column; gap: 16px; }

.show-set-block {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.show-set-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.show-set-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1);
  flex: 1;
  min-width: 0;
}

.show-set-meta {
  font-size: .82rem;
  color: var(--text-2);
  white-space: nowrap;
}

.show-set-songs {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ============================================================
   Performance Mode
   ============================================================ */

.perf-mode {
  position: fixed;
  inset: 0;
  background: #09090b;
  z-index: 500;
  display: none;
  flex-direction: column;
}

.perf-mode.open { display: flex; }

.perf-scrollable {
  flex: 1;
  overflow-y: auto;
  padding: 44px 32px 24px;
  overscroll-behavior: contain;
  transition: opacity .15s;
}

.perf-title { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 3px; letter-spacing: -.5px; }
.perf-artist { font-size: .95rem; color: rgba(255,255,255,.4); margin-bottom: 36px; }

.perf-section-label { display: inline-block; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.55); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin: 28px 0 8px; padding: 3px 10px; border-radius: 9999px; }
.perf-chord-row { color: #f07a56; font-family: var(--font-mono); font-size: calc(var(--perf-fs, 22px) * .82); font-weight: 700; white-space: pre; line-height: 1.4; }
.perf-beats-row {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: calc(var(--perf-fs, 22px) * .72);
  font-weight: 600;
  white-space: pre;
  line-height: 1.1;
  margin-bottom: 1px;
}
.perf-marks-row {
  color: rgba(255,255,255,.75);
  font-family: var(--font-mono);
  font-size: calc(var(--perf-fs, 22px) * .78);
  font-weight: 700;
  white-space: pre;
  line-height: 1;
  margin-bottom: 1px;
}
.perf-lyric-row { color: rgba(255,255,255,.9); font-family: var(--font-mono); font-size: var(--perf-fs, 22px); white-space: pre-wrap; line-height: 1.5; }
.perf-notes { color: rgba(255,255,255,.4); font-size: .875rem; font-style: italic; margin-bottom: 28px; line-height: 1.5; }
.perf-content-area { padding-bottom: 12px; }
.perf-blank { height: 18px; }

/* ============================================================
   Empty States
   ============================================================ */

.empty-state { text-align: center; padding: 56px 20px; }
.empty-state-icon { font-size: 2.5rem; margin-bottom: 14px; opacity: .4; }
.empty-state-title { font-size: 1rem; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.empty-state-text { font-size: .875rem; color: var(--text-3); margin-bottom: 20px; }

/* ============================================================
   Toast
   ============================================================ */

#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.toast {
  background: var(--text-1);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toastIn .25s ease, toastOut .25s ease 2.6s forwards;
  pointer-events: auto;
  border: 1px solid transparent;
}

[data-theme="dark"] .toast { background: var(--surface); color: var(--text-1); border-color: var(--border); }

@keyframes toastIn  { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; } }

/* ============================================================
   Divider
   ============================================================ */

hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* ============================================================
   Utility classes
   ============================================================ */

.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.flex-wrap { flex-wrap: wrap; }
.mt-2 { margin-top: 8px; }
.text-sm { font-size: .875rem; }
.text-secondary { color: var(--text-2); }
.w-full { width: 100%; }
.italic { font-style: italic; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 700px) {
  .app-header { padding: 0 14px; }
  .app-main { padding: 18px 14px; }
  .setlists-grid { grid-template-columns: 1fr; }
  .song-view-header { padding: 18px 20px; }
  .song-content { padding: 18px 20px; }
  .form-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 460px) {
  .form-row { grid-template-columns: 1fr; }
  .modal-actions { flex-direction: column-reverse; }
}

/* ============================================================
   Visual Chord Editor
   ============================================================ */

.chord-editor { display: flex; flex-direction: column; gap: 0; }

/* Section block */
.section-block {
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border-2);
  box-shadow: none;
  overflow: visible;
  margin-bottom: 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}

.section-handle {
  color: var(--text-3);
  cursor: grab;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 1px;
  user-select: none;
}

.section-type-select {
  border: none;
  background: transparent;
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent);
  outline: none;
  padding: 2px 4px;
  border-radius: var(--radius-xs);
  font-family: inherit;
  letter-spacing: .01em;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23dc5422' d='M4 5L0 0h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 18px;
}

.section-type-select:focus {
  background-color: var(--surface);
  box-shadow: 0 0 0 2px rgba(220,84,34,.2);
}

[data-theme="dark"] .section-type-select:focus {
  box-shadow: 0 0 0 2px rgba(232,103,60,.25);
}

[data-theme="dark"] .section-type-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23e8673c' d='M4 5L0 0h8z'/%3E%3C/svg%3E");
}

.section-type-num {
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 0;
}

.section-header-actions { display: flex; gap: 2px; margin-left: auto; flex-shrink: 0; align-items: center; }
.section-actions-divider { width: 1px; height: 16px; background: var(--border); margin: 0 3px; flex-shrink: 0; }
.sec-copy-chords.copied-active { color: var(--accent) !important; background: var(--accent-subtle) !important; }
[data-theme="dark"] .sec-copy-chords.copied-active { background: rgba(232,103,60,.15) !important; }
.sec-paste-chords { color: var(--accent) !important; }
.invisible { visibility: hidden; pointer-events: none; }

/* Lines container */
.section-lines { padding: 18px 22px 14px; display: flex; flex-direction: column; gap: 0; }

/* Single editor line */
.editor-line {
  margin-bottom: 10px;
  position: relative;
}

.editor-line:last-child { margin-bottom: 4px; }

/* Chord track */
.chord-track {
  position: relative;
  /* Grown from 44px → 62px to accommodate the beats row above each chip.
     The chip itself stacks .chip-beats on top of .chip-main. */
  height: 62px;
  cursor: crosshair;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  border: 1px dashed transparent;
  border-bottom: none;
  transition: border-color var(--transition), background var(--transition);
  overflow: visible;
}

.chord-track:hover {
  border-color: var(--border-2);
  background: var(--accent-subtle);
}

[data-theme="dark"] .chord-track:hover { background: rgba(232,103,60,.06); }

/* Chord chip — horizontal pill. .chip-beats is a separate sibling above it
   so the chip's bounding box stays at its natural height and the stem
   marker (::after) renders in the correct place. */
.chord-chip {
  position: absolute;
  top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 7px 0 8px;
  background: var(--accent-subtle);
  border: 1px solid var(--accent);
  border-radius: 9999px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  user-select: none;
  white-space: nowrap;
  z-index: 2;
  cursor: grab;
  transition: box-shadow var(--transition), transform var(--transition);
}
/* Diamond mark — small `◇` glyph stacked atop the chip's name. */
.chip-mark {
  display: inline-block;
  margin-right: 2px;
  font-size: .85em;
  line-height: 1;
}
.chip-mark-diamond { color: var(--accent); }
/* Bar-before marker — `|` glyph rendered just left of the chip. */
.chip-bar-before {
  position: absolute;
  top: 32px;
  width: 8px;
  text-align: right;
  margin-left: -8px;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .95rem;
  line-height: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 1;
}

/* Beats ghost button above the chip — compact "4♩" label.
   Absolutely positioned sibling of .chord-chip, sharing its `left`. */
.chip-beats-btn {
  position: absolute;
  top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px 6px;
  border: 1px dashed transparent;
  border-radius: 9999px;
  background: transparent;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: color var(--transition), border-color var(--transition),
              background var(--transition);
}
.chip-beats-count { letter-spacing: 0; }
.chip-beats-note {
  font-family: "Noto Music", "Bravura Text", "Segoe UI Symbol", "Apple Symbols", var(--font-mono);
  font-size: 1.45em;
  line-height: 1;
  margin-left: 2px;
  position: relative;
  top: -1px;
}
.chord-track:hover .chip-beats-btn,
.chip-beats-btn:hover,
.chip-beats-btn:focus-visible {
  color: var(--accent);
  border-color: var(--border-2);
  background: var(--surface);
}
.chip-beats-btn:hover,
.chip-beats-btn:focus-visible {
  border-color: var(--accent);
  border-style: solid;
}

/* Beats picker popover */
.beats-picker-popup {
  position: fixed;
  z-index: 1200;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px 12px;
  min-width: 240px;
}
.beats-picker-title {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.beats-picker-hint {
  font-size: .62rem;
  font-weight: 500;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}
.beats-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.beats-pick-cell {
  flex: 0 0 auto;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}
.beats-pick-cell:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.beats-pick-cell.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* Measure-boundary divider — a little extra gap + subtle rule on the left. */
.beats-pick-cell.measure-break {
  margin-left: 10px;
  position: relative;
}
.beats-pick-cell.measure-break::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: var(--border-2);
}
.beats-picker-sub {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 10px 0 6px;
}
.beats-pick-ring {
  width: 68px;
  min-width: 68px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--accent);
}
.beats-pick-ring .ring-tail-svg {
  display: block;
  overflow: visible;
}
.beats-pick-ring.active { color: #fff; }

/* Editor chord-track ring tail — extends from the right edge of the chip. */
.chip-ring-tail {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 4px;
  color: var(--accent);
  pointer-events: none;
  display: block;
  line-height: 0;
}
.chip-ring-tail .ring-tail-svg { display: block; overflow: visible; }

[data-theme="dark"] .chord-chip {
  background: rgba(232,103,60,.15);
}

.chord-chip::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 6px;
  background: var(--accent);
  opacity: .4;
}

.chord-chip:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  z-index: 3;
}

.chord-chip.chip-dragging {
  cursor: grabbing;
  box-shadow: var(--shadow-lg);
  opacity: .85;
  z-index: 10;
}

.chip-name { pointer-events: none; }

.chip-delete {
  display: none;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-size: .65rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: 1px;
  flex-shrink: 0;
}

.chord-chip:hover .chip-delete { display: flex; }

/* Repeat button (editor chord track) */
.line-repeat-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  height: 20px;
  min-width: 28px;
  padding: 0 6px;
  border: 1px dashed var(--border-2);
  border-radius: 9999px;
  background: transparent;
  color: var(--text-3);
  font-size: .65rem;
  font-weight: 700;
  font-family: var(--font-mono);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  transition: opacity var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}

.chord-track:hover .line-repeat-btn,
.line-repeat-btn.active {
  opacity: 1;
}

.line-repeat-btn.active {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.line-repeat-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

/* Repeat badge (song view) */
.repeat-badge {
  display: inline-block;
  margin-left: 10px;
  font-size: .85rem;
  font-weight: 800;
  color: var(--text-2);
  font-family: var(--font-mono);
  letter-spacing: .02em;
}

[data-theme="dark"] .repeat-badge {
  color: rgba(255,255,255,.65);
}

/* Repeat badge (perf mode) */
.perf-repeat-badge {
  display: inline-block;
  margin-left: 12px;
  font-size: calc(var(--perf-fs, 22px) * .75);
  font-weight: 800;
  color: rgba(255,255,255,.7);
  font-family: var(--font-mono);
  vertical-align: middle;
}

/* Hover position guide */
.chord-hover-guide {
  position: absolute;
  top: 2px;
  bottom: 0;
  width: 1px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s;
}

/* Lyric row (editor only — scoped under .editor-line) */
.editor-line .lyric-row {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-2);
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  background: var(--surface);
  padding: 2px 6px 2px 0;
  /* Reset any song-view styles */
  color: unset;
  font-size: unset;
  white-space: unset;
}

.editor-line:focus-within .lyric-row {
  border-color: var(--accent);
}

.lyric-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-1);
  padding: 5px 8px;
  outline: none;
  min-width: 0;
}

.lyric-input::placeholder { color: var(--text-3); }

.delete-line-btn {
  opacity: 0;
  transition: opacity var(--transition);
  flex-shrink: 0;
  color: var(--text-3) !important;
}

.editor-line:hover .delete-line-btn,
.editor-line:focus-within .delete-line-btn { opacity: 1; }

.delete-line-btn:hover { color: var(--danger) !important; }

/* Add line button */
.add-line-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 4px 14px 12px;
  padding: 5px 10px;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
  font-size: .8rem;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}

.add-line-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

[data-theme="dark"] .add-line-btn:hover { background: rgba(232,103,60,.08); }

/* Inline section inserter — orange accent rule that fades at the edges with a
   pill-shaped "Add Section" button centered over it. Always visible so users
   know they can insert a section here; subtle lift + color deepen on hover. */
/* Teardrop "+" pin offset into the left gutter. Gray idle, accent on hover.
   The rule element is unused in this style. */
.section-inserter {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.chord-editor > .section-inserter:first-child {
  height: 26px;
}

.section-inserter-rule { display: none; }

.section-inserter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: -12px;      /* pull out into the left gutter (offset -28 + 16) */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  font-family: inherit;
  transition: color var(--transition), transform var(--transition);
}
.section-inserter-pin {
  width: 16px;
  height: 16px;
  display: block;
  transform: rotate(-90deg);
}
/* Visually hidden label (kept for screen readers + tooltip) */
.section-inserter-btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-inserter:hover .section-inserter-btn,
.section-inserter:focus-within .section-inserter-btn {
  color: var(--accent);
  transform: translateX(1px);
}

/* Add section bar */
.add-section-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 2px 4px;
}

.add-section-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-right: 2px;
}

.add-section-btn {
  padding: 4px 12px;
  border: 1px dashed var(--border-2);
  border-radius: 9999px;
  background: transparent;
  color: var(--text-2);
  font-size: .78rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}

.add-section-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  border-style: solid;
}

/* Chord picker popup */
.chord-picker-popup {
  position: fixed;
  z-index: 1000;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  animation: pickerIn .12s ease;
  gap: 14px;
}


@keyframes pickerIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.picker-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.picker-modal-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #000;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

[data-theme="dark"] .picker-modal-title { color: var(--text-1); }

.picker-delete-btn {
  font-size: .75rem;
  color: var(--danger);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  transition: background var(--transition);
}

.picker-delete-btn:hover { background: var(--danger-bg); }

.picker-input-wrap {
  position: relative;
  margin-bottom: 14px;
  border: 1.5px solid var(--border-2);
  border-radius: 9999px;
  background: var(--surface);
  display: flex;
  align-items: center;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.picker-input-wrap:focus-within,
.picker-input-wrap.has-value {
  border-color: var(--accent);
}

.picker-input-wrap:focus-within {
  box-shadow: 0 0 0 3px rgba(220,84,34,.15);
}

[data-theme="dark"] .picker-input-wrap:focus-within {
  box-shadow: 0 0 0 3px rgba(232,103,60,.2);
}

.picker-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
  color: var(--text-3);
  padding-left: 14px;
  pointer-events: none;
}

.picker-input-wrap.has-value .picker-input-icon,
.picker-input-wrap:focus-within .picker-input-icon {
  color: var(--accent);
}

.picker-input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 9999px;
  padding: 12px 18px 12px 6px;
  font-size: 1rem;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
  background: transparent;
  outline: none;
}

.picker-input::placeholder {
  color: var(--text-3);
  font-weight: 500;
  font-family: var(--font-sans, inherit);
  letter-spacing: 0;
}

.picker-filters {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 16px;
  padding-bottom: 2px;
}
.picker-filters::-webkit-scrollbar { display: none; }

.picker-filter-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: .72rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.picker-filter-btn:hover {
  border-color: var(--border-2);
  color: var(--text-2);
}

.picker-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.picker-suggestions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}

.picker-group {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 6px 0;
}

.picker-group-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-1);
  text-transform: none;
  letter-spacing: 0;
  width: 56px;
  flex-shrink: 0;
  text-align: right;
  padding-top: 4px;
  line-height: 1.2;
}

.picker-group-chords {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
}

.picker-sugg {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--surface-2);
  color: var(--text-1);
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.picker-sugg:hover,
.picker-sugg.active {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

[data-theme="dark"] .picker-sugg:hover,
[data-theme="dark"] .picker-sugg.active {
  background: rgba(232,103,60,.15);
}

.picker-hint {
  font-size: .7rem;
  color: var(--text-3);
  text-align: right;
  margin-top: 8px;
}

/* Picker layout: two separate floating cards with a gap */
.chord-picker-popup { display: flex; align-items: stretch; }
.picker-main {
  flex: 0 0 520px;
  min-width: 0;
  padding: 22px 24px 18px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.picker-side {
  display: flex;
  width: 220px;
  flex-shrink: 0;
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  gap: 10px;
}
.picker-side-content {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  gap: 6px;
}
.picker-side-content .chord-diagram { display: block; }
.picker-shapes-single .chord-diagram svg { width: 136px; height: 164px; }
.picker-shapes-single { display: flex; align-items: center; justify-content: center; }

/* Side-panel frame around any preview state */
.picker-shapes-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px 10px;
  width: 100%;
  box-sizing: border-box;
}
.picker-shapes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 240px;
  gap: 14px;
  color: var(--text-3);
}
.picker-shapes-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  opacity: .55;
}
.picker-shapes-empty-icon svg { display: block; }
.picker-shapes-empty-text {
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0 12px;
}
.picker-shapes-empty-text strong {
  font-family: var(--font-mono);
  color: var(--text-2);
  font-weight: 700;
}
.picker-header-right { display: flex; align-items: center; gap: 8px; }

/* Picker tabs — match the app-wide pill switcher (.songs-view-switcher) */
.picker-tabs {
  display: flex;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 40px;
  padding: 3px;
}
.picker-tab {
  padding: 4px 12px;
  border: none;
  background: transparent;
  border-radius: 43px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
  line-height: 1.2;
}
.picker-tab:hover { color: var(--text-1); }
.picker-tab-active,
.picker-tab.picker-tab-active {
  background: #000;
  color: #fff;
  font-weight: 500;
}
[data-theme="dark"] .picker-tab-active,
[data-theme="dark"] .picker-tab.picker-tab-active {
  background: var(--text-1);
  color: var(--surface);
}
.picker-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
}
.picker-panel-hidden { display: none; }

/* Shape variants */
.picker-shapes-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-1);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  text-align: left;
  padding: 0 2px;
  margin-bottom: 0;
}

.picker-shapes-label {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: left;
  padding: 0 2px;
  margin-bottom: 4px;
}
.picker-shapes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-content: start;
  max-height: 420px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
}
.picker-shape-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}
.picker-shape-btn:hover {
  border-color: var(--accent);
}
.picker-shape-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(220,84,34,.2);
}
.picker-shape-btn .chord-diagram svg {
  width: 130px;
  height: 158px;
  display: block;
}
/* Strip the chord-name label from the diagram inside picker shape cards —
   the chord name is already shown as a heading above the cards. */
.picker-shape-btn .chord-diagram svg text:last-of-type,
.picker-shapes-single .chord-diagram svg text:last-of-type {
  display: none;
}
[data-theme="dark"] .picker-shape-btn {
  background: var(--surface);
}
[data-theme="dark"] .picker-shape-btn.active {
  box-shadow: 0 0 0 2px rgba(232,103,60,.25);
}

/* Recent chords */
.picker-recent {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  padding: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.picker-recent::-webkit-scrollbar { display: none; }
.picker-recent-label {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  flex-shrink: 0;
}
.picker-recent-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.picker-recent-chip {
  background: var(--accent-subtle) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  padding: 4px 11px !important;
  font-size: .75rem !important;
}

.picker-section-divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0 14px;
}

.picker-section-label {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

/* ============================================================
   Chord picker — Redesigned layout
   Matches the Figma "Add Chord" design: two cards side-by-side,
   left card holds search + filters + results, right card holds
   the selected chord's diagram + chevron navigation + info boxes.
   ============================================================ */

/* Main panel: 603 wide, padding 24, rounded 16. Height is FIXED (not max-)
   so the popup's overall size doesn't shift when filters/queries change the
   result count. The header, search row, chip rows, dropdowns, and footer
   stay pinned; the .picker-results section absorbs all overflow. */
.chord-picker-popup .picker-main {
  flex: 0 0 603px;
  width: 603px;
  padding: 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 17px;
  height: min(642px, calc(100vh - 32px));
  overflow: hidden;
}

/* Side panel: 216 wide, rounded-12, thinner border. FIXED height so the
   modal stays put — content variations (preview tag, longer note strings)
   never alter the popup's outer dimensions. Internal scroll catches any
   overflow on very short viewports. */
.chord-picker-popup .picker-side {
  flex: 0 0 216px;
  width: 216px;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--border);
  gap: 16px;
  height: min(642px, calc(100vh - 32px));
  overflow-y: auto;
}
.chord-picker-popup .picker-side::-webkit-scrollbar { width: 6px; }
.chord-picker-popup .picker-side::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
/* Pin the Add CTA to the bottom so the diagram doesn't shift when info
   strings vary in length between chords. */
.chord-picker-popup .picker-side-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
.chord-picker-popup .picker-side-content > .picker-add-btn { margin-top: auto; }

/* Header row: title + delete (orange, no underline) */
.chord-picker-popup .picker-header {
  margin-bottom: 0;
  height: 20px;
}
.chord-picker-popup .picker-modal-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 20px;
}
.chord-picker-popup .picker-delete-btn {
  font-size: 16px;
  font-weight: 500;
  color: var(--accent);
  opacity: .64;
  padding: 0;
  background: none;
  border: 0;
}
.chord-picker-popup .picker-delete-btn:hover { opacity: 1; background: transparent; }

/* Search row: input + Draw pill + X close, all on one line */
.picker-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
}
.picker-search-row .picker-input-wrap {
  flex: 1 1 auto;
  height: 40px;
  margin: 0;
  border: 1px solid var(--border-2);
  border-radius: 8px;          /* rounded-rect, not pill */
}
.picker-search-row .picker-input {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  padding: 8px 16px 8px 4px;
}
.picker-search-row .picker-input::placeholder { color: var(--text-3); font-weight: 500; }
.picker-search-row .picker-input-icon { padding-left: 12px; }
.picker-draw-btn {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  border-radius: 43px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition), color var(--transition);
}
.picker-draw-btn:hover { background: var(--surface-2); color: var(--text-1); }
.picker-draw-btn.picker-draw-btn-active {
  background: var(--text-1); color: var(--surface);
}
.picker-close-btn {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.picker-close-btn:hover { color: var(--text-1); }

/* Chip rows: label + horizontal scroll of chord chips */
.picker-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}
.picker-chip-row-label {
  font-size: 10px;
  font-weight: 800;
  color: #afafaf;
  letter-spacing: 0;
  text-transform: uppercase;
  flex: 0 0 auto;
  min-width: 62px;
  line-height: 20px;
}
.picker-chip-row-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
/* .picker-row-divider was removed from the markup in favour of uniform
   16px vertical spacing between rows. Selector kept for any legacy callers
   but the divider itself is invisible. */
.picker-row-divider { display: none; }

/* Root & Type dropdown row */
.picker-dropdown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}
.picker-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--surface);
  min-width: 80px;
  padding: 0;
}
.picker-dropdown-wide { min-width: 119px; }
.picker-dropdown-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  padding: 0 28px 0 12px;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.picker-dropdown-select:focus { outline: none; }
.picker-dropdown:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(220,84,34,.15);
}
.picker-dropdown-chev {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-2);
  display: inline-flex;
}

/* Results list — header + grouped rows of chord chips. When multiple roots
   are visible (Root=Any), each root becomes a labeled group; when one root
   is showing the chips render as a flat wrapping grid without a label. */
.picker-results-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 20px;
  margin: 0;
  flex-shrink: 0;
}
.picker-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 4px 8px;
  margin: 0 -4px;
  scrollbar-width: thin;
}
.picker-results::-webkit-scrollbar { width: 6px; }
.picker-results::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
/* Single-root layout: chord chips flow as a wrapping grid, no left label. */
.picker-results-flat {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
/* Multi-root layout: each group is a row with a left-aligned root label. */
.picker-results-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
.picker-results-group-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -.01em;
  width: 56px;
  flex-shrink: 0;
  text-align: right;
  padding-top: 3px;
  line-height: 20px;
}
.picker-results-group-chords {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.picker-result-chip {
  display: inline-flex;
  align-items: center;
  background: var(--surface-2);
  border: 0;
  color: #5e5e5e;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: 24px;
  cursor: pointer;
  line-height: 20px;
  transition: background var(--transition), color var(--transition);
}
.picker-result-chip:hover,
.picker-result-chip.active {
  background: var(--accent-subtle);
  color: var(--accent);
}
[data-theme="dark"] .picker-result-chip { color: var(--text-2); }
.picker-results-empty {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 0;
}

/* Override the existing pill chip style for Recent + In-this-key rows so
   they match the gray/mono chip aesthetic in the Figma design. */
.picker-chip-row .picker-sugg {
  background: var(--surface-2);
  border: 0;
  color: #5e5e5e;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: 24px;
  line-height: 20px;
  cursor: pointer;
}
.picker-chip-row .picker-sugg:hover,
.picker-chip-row .picker-sugg.active {
  background: var(--accent-subtle);
  color: var(--accent);
  border: 0;
}
.picker-chip-row .picker-recent-chip,
.picker-chip-row .picker-key-chip {
  /* Drop the !important accents from the older .picker-recent-chip rule
     above so the redesigned chips render as neutral gray pills. */
  background: var(--surface-2) !important;
  color: #5e5e5e !important;
  border: 0 !important;
  font-size: 12px !important;
  padding: 2px 12px !important;
}
.picker-chip-row .picker-recent-chip:hover,
.picker-chip-row .picker-key-chip:hover {
  background: var(--accent-subtle) !important;
  color: var(--accent) !important;
}
[data-theme="dark"] .picker-chip-row .picker-sugg,
[data-theme="dark"] .picker-chip-row .picker-recent-chip,
[data-theme="dark"] .picker-chip-row .picker-key-chip { color: var(--text-2) !important; }

.picker-footer-hint {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #b6b6b6;
  line-height: 20px;
  margin-top: auto;
  padding-top: 8px;
}

/* ── Right side panel ──────────────────────────────────────── */
.picker-side-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.picker-side-name {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 20px;
  letter-spacing: -.01em;
}
.picker-side-sub {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-3);
  line-height: 20px;
}
.picker-side-sub-idx {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  margin-left: 4px;
}

/* Diagram card with chevron nav below */
.picker-side-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 24px 6px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.picker-side-diagram { display: flex; align-items: center; justify-content: center; }
.picker-side-diagram .chord-diagram svg { width: 130px; height: 158px; display: block; }
/* Hide the chord-name label inside the side diagram — name is shown above */
.picker-side-diagram .chord-diagram svg text:last-of-type { display: none; }

.picker-side-chev-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 72px;
  width: 100%;
}
.picker-side-chev {
  width: 24px; height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color var(--transition), background var(--transition);
}
.picker-side-chev:hover:not(:disabled) {
  color: var(--accent);
  background: var(--accent-subtle);
}
.picker-side-chev:disabled { color: var(--border-2); cursor: not-allowed; }
.picker-side-chev svg { display: block; }

/* Frets / Notes info boxes — equal-height cards under the diagram */
.picker-side-info {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-1);
  line-height: 20px;
  flex: 0 0 auto;
  min-height: 56px;
}
.picker-side-info-label {
  color: var(--text-1);
  font-weight: 400;
}
.picker-side-info-val {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
}

/* Empty-state preview when no chord is selected/typed */
.picker-side .picker-shapes-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 240px;
  padding: 24px 6px;
}

/* "Add to Song" primary CTA — only enabled when a chord is selected.
   Label dynamically describes what'll be committed ("Add A — Shape 2/3"). */
.picker-add-btn {
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-fg, #fff);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--transition), opacity var(--transition);
  flex-shrink: 0;
}
.picker-add-btn:hover { background: var(--accent-hover); }
.picker-add-btn.is-disabled,
.picker-add-btn:disabled {
  background: var(--surface-2);
  color: var(--text-3);
  cursor: not-allowed;
}
.picker-add-btn .add-btn-chord {
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: -.01em;
}
.picker-add-btn .add-btn-shape {
  font-weight: 600;
  font-size: 11px;
  opacity: .8;
  padding-left: 4px;
  border-left: 1px solid rgba(255,255,255,.35);
  margin-left: 4px;
  font-family: var(--font-mono);
}
.picker-add-btn.is-disabled .add-btn-shape { border-left-color: var(--border); }
.picker-add-hint {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  margin-top: 6px;
  font-family: var(--font-sans);
}

/* Locked-in selected chip — clearly distinct from hover so users know what
   pressing Enter / clicking Add will commit. */
.picker-sugg.is-selected,
.picker-result-chip.is-selected,
.picker-chip-row .picker-sugg.is-selected,
.picker-chip-row .picker-recent-chip.is-selected,
.picker-chip-row .picker-key-chip.is-selected {
  background: var(--accent) !important;
  color: var(--accent-fg, #fff) !important;
  box-shadow: 0 0 0 2px rgba(220, 84, 34, .25);
}

/* Selected state on the diagram card — subtle accent ring */
.picker-side-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(220, 84, 34, .12);
}

/* Tiny "preview" tag in subtitle when the right panel is showing a
   transient (hover/type) chord vs a locked-in selected one. */
.picker-side-preview-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Mobile: stack the two panels and let them take full width. */
@media (max-width: 720px) {
  .chord-picker-popup { flex-direction: column; gap: 8px; }
  .chord-picker-popup .picker-main { flex: 0 0 auto; width: min(90vw, 603px); }
  .chord-picker-popup .picker-side  { flex: 0 0 auto; width: min(90vw, 603px); flex-direction: row; flex-wrap: wrap; }
}

/* Draw tab */
.draw-offset-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.draw-ctrl-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.draw-offset-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background var(--transition);
}
.draw-offset-btn:hover { background: var(--surface); }
.draw-offset-val {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-1);
  font-family: var(--font-mono);
  min-width: 20px;
  text-align: center;
}
.draw-ctrl-hint {
  font-size: .65rem;
  color: var(--text-3);
  flex: 1;
  line-height: 1.3;
}
.draw-board {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.draw-results {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-height: 32px;
  padding: 6px 0 2px;
  border-top: 1px solid var(--border-2);
}
.draw-results-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.draw-save-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px dashed var(--border-2);
}
.draw-save-label {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.draw-save-input {
  flex: 1;
  min-width: 120px;
  padding: 5px 10px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: .82rem;
  outline: none;
  transition: border-color var(--transition);
}
.draw-save-input:focus {
  border-color: var(--accent);
}
.draw-save-btn {
  white-space: nowrap;
}
.draw-placeholder {
  font-size: .75rem;
  color: var(--text-3);
  font-style: italic;
}
.draw-results-label {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.draw-use-btn {
  padding: 3px 10px;
  border: 1.5px solid var(--accent);
  border-radius: 9999px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all var(--transition);
}
.draw-use-btn:hover {
  background: var(--accent);
  color: #fff;
}
.draw-results-exact .draw-results-label {
  color: var(--accent);
}
.draw-use-exact {
  background: var(--accent);
  color: #fff;
}
.draw-use-exact:hover {
  background: var(--accent);
  color: #fff;
  filter: brightness(1.08);
}

/* ---- Song viewer: sections format ---- */
.song-view-section { margin-bottom: 20px; }

/* ============================================================
   Split Section Divider
   ============================================================ */

/* ── Split divider ──────────────────────────────────────────── */
/*
  The button hangs off the LEFT border of .section-block.
  .section-block must have overflow:visible for this to work.
  Left maths (all relative to .split-divider left edge):
    section-lines padding-left = 14px  →  section-block outer-left = -(14+1) = -15px
    button radius = 11px
    button left-edge = -15 - 11 = -26px  →  center lands on outer border ✓
*/
.split-divider {
  position: relative;
  height: 22px;
  margin: 4px 0;
  z-index: 5;
  overflow: visible;
}

/* Extend the hover hit-zone leftward to cover the button that hangs
   outside the divider's own bounding box */
.split-divider::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 0;
  right: 0;
  bottom: 0;
}

.split-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: -26px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition), opacity var(--transition);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  box-shadow: var(--shadow-sm);
}

.split-btn svg { width: 11px; height: 11px; flex-shrink: 0; stroke: #fff; stroke-width: 2.5; }

/* Dashed line: starts at button center, spans to section-block right border */
.split-rule {
  position: absolute;
  left: -15px;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 1.5px dashed var(--accent);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.split-divider:hover .split-btn {
  opacity: 1;
  pointer-events: auto;
}

.split-divider:hover .split-rule {
  opacity: 1;
}

.split-btn:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .split-btn:hover { background: var(--accent-hover); }

/* Split section type picker */
.split-picker-popup {
  position: fixed;
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  animation: pickerIn .12s ease;
}

.split-picker-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.split-picker-option {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: .78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}

.split-picker-option:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

[data-theme="dark"] .split-picker-option:hover { background: rgba(232,103,60,.15); }

/* Stand-alone "+ Note" option in the section/split popovers — flagged as
   accent-styled so it reads as a different kind of action than picking a
   structural section preset. */
.split-picker-option.split-picker-option-note {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: var(--accent);
}
.split-picker-option.split-picker-option-note:hover {
  background: var(--accent);
  color: #fff;
}
.split-picker-options.split-picker-options-row {
  flex-wrap: nowrap;
}

/* ── Standalone Note section (peer of Verse/Chorus, but no lyrics) ──── */
.section-block.section-block-note {
  background: transparent;
  border: none;
}
.section-header.section-header-note {
  border-bottom: none;
}
.section-note-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.section-block-note .section-note-block {
  background: transparent;
  border: none;
  padding: 0 12px 10px;
  margin: 0;
}
.section-block-note .section-note-toolbar {
  border-bottom-color: var(--accent);
  opacity: .85;
}

/* ── Inline note inside a section (peer of a lyric line) ─────────────── */
.editor-line.editor-line-note {
  display: block;
  margin: 4px 0;
}
.section-note-block.section-note-block-inline {
  background: transparent;
  border: none;
  padding: 8px 10px;
  margin: 0 14px 6px;
}

/* ── Section bottom action row (Add line + Add note) ─────────────────── */
.section-bottom-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.add-inline-note-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 4px 0 12px;
  padding: 5px 10px;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
  font-size: .8rem;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.add-inline-note-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}
[data-theme="dark"] .add-inline-note-btn:hover { background: rgba(232,103,60,.08); }

/* ── Add-section bar: divider + accented Note button ─────────────────── */
.add-section-divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--border-2);
  margin: 0 4px;
  vertical-align: middle;
}
.add-section-btn.add-section-btn-note {
  border-style: dashed;
  border-color: var(--accent);
  color: var(--accent);
}
.add-section-btn.add-section-btn-note:hover {
  background: var(--accent);
  color: #fff;
}

/* ── Display variants for the viewer / performance / shared views ──── */
/* The note is a fixed-height slot with the text vertically centered in
   it via flex. This decouples the visual centering from whatever margins
   the previous/next siblings happen to have (section-label vs chord-row
   vs lyric-only-row each have different margins, so a margin-based fix
   was inherently asymmetric). The slot's min-height + flex centering
   gives a consistent "lane" the note's text always sits in the middle of. */
.section-note-display.section-note-display-inline {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 3em;
  padding: 0 10px;
  margin: 8px 0;
}
.section-note-display.section-note-display-standalone {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 3.4em;
  padding: 0 14px;
  margin: 12px 0;
}
.song-view-section.song-view-section-note { padding: 4px 0; }

/* ── Recipient annotations (from share recipients) — distinct from author
   notes via a left-border in a different hue + a small "From X" header. */
.recipient-note {
  position: relative;
  padding: 8px 12px 8px 14px;
  margin: 12px 0;
  border-left: 3px solid var(--text-3);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.recipient-note-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: .7rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.recipient-note-from { font-weight: 600; }
.recipient-note-body { padding: 0; }
[data-theme="dark"] .recipient-note { background: var(--surface-2); }

/* Accept / Dismiss action row inside a recipient-note card */
.recipient-note-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.recipient-note-btn {
  font-family: inherit;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 9999px;
  border: 1px solid var(--border-2);
  background: var(--bg);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--transition);
  text-transform: uppercase;
}
.recipient-note-btn.recipient-note-accept:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.recipient-note-btn.recipient-note-dismiss:hover {
  border-color: #c0392b;
  background: #c0392b;
  color: #fff;
}
.recipient-note-meta { align-items: center; }

/* "From X" attribution chip on notes promoted from recipient annotations.
   Sits above the note body. The × strips the attribution without deleting
   the note itself. */
.section-note-display .note-attribution {
  display: inline-block;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.note-attribution-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.note-attribution-row .note-attribution {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-3);
  text-transform: uppercase;
}
.note-attribution-strip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
}
.note-attribution-strip:hover { background: var(--accent-subtle); color: var(--accent); }

/* ============================================================
   Import Modal
   ============================================================ */

.import-modal { max-width: 540px; }

.import-url-row { display: flex; gap: 8px; }
.import-url-row .form-input { flex: 1; }

.import-hint {
  font-size: .75rem;
  color: var(--text-3);
  margin-top: 6px;
  line-height: 1.4;
}

.import-rights-note {
  font-size: .75rem;
  color: var(--text-3);
  line-height: 1.4;
  margin-top: 6px;
}

.import-ack {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: .8125rem;
  color: var(--text-2);
  line-height: 1.45;
  cursor: pointer;
  user-select: none;
}
.import-ack input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.import-ack-error {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}
[data-theme="dark"] .import-ack { background: var(--surface); }

.import-results-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 12px;
}

.import-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.import-result-item:hover { border-color: var(--border-2); box-shadow: var(--shadow-sm); }

.import-result-info { flex: 1; min-width: 0; }
.import-result-title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.import-result-artist { font-size: .78rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.import-use-btn { flex-shrink: 0; }

/* AI Chords tab */

/* ============================================================
   Performance Mode — HUD
   ============================================================ */

.perf-hud {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 56px;
  padding: 0 16px;
  background: rgba(0,0,0,.65);
  border-top: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.perf-hud-section {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.perf-hud-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: rgba(255,255,255,.65);
  font-size: .8rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.perf-hud-btn:hover { background: rgba(255,255,255,.14); color: #fff; }

.perf-hud-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
  pointer-events: none;
}

.perf-hud-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

.perf-hud-btn.active {
  background: rgba(240,122,86,.2);
  border-color: rgba(240,122,86,.35);
  color: #f07a56;
}

/* Metronome toggle in the perf HUD — gentle pulse when active so the user
   sees something animating in time with the audio click. */
@keyframes metroPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,122,86,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(240,122,86,0); }
}
.perf-hud-btn.perf-metro-btn.active { animation: metroPulse 1s ease-out infinite; }

/* Tap-tempo button + BPM input row (song edit form). */
.bpm-input-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.bpm-input-row .form-input { flex: 1; }
.bpm-tap-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 0 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1.1;
}
.bpm-tap-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
.bpm-tap-btn:active { transform: scale(.96); }
.bpm-tap-label { font-size: .85rem; font-weight: 600; }
.bpm-tap-hint  { font-size: .65rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.bpm-tap-hint:empty { display: none; }

.perf-exit-btn { color: rgba(255,255,255,.4); }
.perf-exit-btn:hover { color: #fff; }

.perf-speed-group {
  display: flex;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  overflow: hidden;
}

.perf-speed-btn {
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.45);
  font-size: .72rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  line-height: 1;
}

.perf-speed-btn + .perf-speed-btn { border-left: 1px solid rgba(255,255,255,.08); }
.perf-speed-btn:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.06); }
.perf-speed-btn.active { background: rgba(240,122,86,.2); color: #f07a56; }

.perf-hud-position {
  font-size: .78rem;
  color: rgba(255,255,255,.35);
  white-space: nowrap;
  min-width: 44px;
  text-align: center;
}

.perf-hud-font-size {
  font-size: .72rem;
  color: rgba(255,255,255,.35);
  font-family: var(--font-mono);
  min-width: 34px;
  text-align: center;
}

/* ============================================================
   Capo Panel
   ============================================================ */

/* Beats on/off toggle pill in song-view header */
.song-tag-beats-on {
  background: var(--accent-subtle) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 600;
}

/* Beats toggle in the inline perf bar */
.perf-bar-beats.is-on {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

.capo-panel {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 16px 44px 16px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  animation: capoIn .2s cubic-bezier(0.4,0,0.2,1);
}

@keyframes capoIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.capo-panel-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  min-width: 160px;
}

.capo-mode-btns {
  display: flex;
  gap: 6px;
}

.capo-mode-btn {
  padding: 7px 14px;
  border: 1.5px solid var(--border-2);
  border-radius: 8px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  white-space: nowrap;
}

.capo-mode-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.capo-mode-btn:not(.active):hover {
  border-color: var(--border-2);
  color: var(--text-1);
}

.capo-mode-btn-disabled {
  opacity: .35;
  cursor: not-allowed !important;
  pointer-events: none;
}

.capo-mode-desc {
  font-size: .75rem;
  color: var(--text-3);
  padding-left: 2px;
}

.capo-reset-btn {
  align-self: flex-start;
  margin-top: 6px;
  padding: 5px 12px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .03em;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.capo-reset-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Fretboard ── */
.capo-fretboard {
  flex: 1;
  display: flex;
  height: 52px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.capo-fb-fret {
  flex: 1;
  border-right: 1px solid var(--border-2);
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.capo-fb-fret:last-child { border-right: none; }

/* Ghost hover */
.capo-fb-fret:not(.is-active):hover {
  background: rgba(220, 84, 34, .06);
}

.capo-fb-fret:not(.is-active):hover::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1.5px dashed rgba(220, 84, 34, .3);
  border-radius: 4px;
  pointer-events: none;
}

/* Original capo position marker (shown when moved away) */
.capo-fb-fret.is-original::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-2);
  pointer-events: none;
}

/* Active capo position */
.capo-fb-fret.is-active { background: rgba(220, 84, 34, .09); }

.capo-fb-fret.is-active::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: 4px;
  opacity: .18;
  pointer-events: none;
}

.capo-fb-fret.is-active::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 2px solid var(--accent);
  border-radius: 4px;
  pointer-events: none;
}

.capo-fb-inlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.capo-fb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: .55;
  display: block;
  flex-shrink: 0;
}

.capo-fb-fret.is-active .capo-fb-dot { opacity: 0; }

.capo-panel-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all var(--transition);
  line-height: 1;
  padding: 0;
  font-family: inherit;
}

.capo-panel-close:hover { background: var(--surface-2); color: var(--text-1); }

/* ============================================================
   Transpose Control
   ============================================================ */

/* ============================================================
   Song View — Overflow Menu
   ============================================================ */

.song-overflow-wrap { position: relative; }

.song-overflow-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  min-width: 175px;
  animation: pickerIn .12s ease;
}

.overflow-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-1);
  font-size: .875rem;
  font-family: inherit;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--transition);
  text-align: left;
  white-space: nowrap;
}

.overflow-item:hover { background: var(--surface-2); }
.overflow-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-2); }
.overflow-item-danger { color: var(--danger); }
.overflow-item-danger svg { color: var(--danger); }
.overflow-item-danger:hover { background: var(--danger-bg); }
.overflow-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ============================================================
   Import Hero
   ============================================================ */

.import-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 24px;
  gap: 16px;
  text-align: center;
}

.import-hero-title {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text-1);
}

.import-hero-subtitle {
  font-size: .8125rem;
  color: var(--text-3);
  max-width: 360px;
  line-height: 1.55;
  margin-top: -4px;
}

.import-hero-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 520px;
}

@media (max-width: 460px) {
  .import-hero-options { grid-template-columns: 1fr; }
}

.import-hero-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border: 1.5px dashed var(--border-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  text-align: center;
}

.import-hero-btn:hover {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-subtle);
}

[data-theme="dark"] .import-hero-btn:hover { background: rgba(232,103,60,.08); }

.import-hero-btn svg { width: 22px; height: 22px; color: var(--text-3); }
.import-hero-btn:hover svg { color: var(--accent); }

.import-hero-btn-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.3;
}

.import-hero-btn:hover .import-hero-btn-label { color: var(--accent); }

.import-hero-btn-sub {
  font-size: .7rem;
  color: var(--text-3);
  line-height: 1.3;
}

.import-hero-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 520px;
}

.import-hero-divider::before,
.import-hero-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.import-hero-divider span { font-size: .7rem; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

.import-hero-manual { font-size: .8rem; color: var(--text-3); }
.import-hero-manual button {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: inherit; font-family: inherit; text-decoration: underline; padding: 0;
}

.import-hero-btn-ai svg { color: var(--accent); }
.import-hero-btn-ai .import-hero-btn-label { color: var(--text-1); }

.import-hero-btn-quota {
  font-size: .65rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: .02em;
  margin-top: 2px;
  min-height: 1em;
}
.import-hero-btn-quota.is-empty { color: var(--danger); }
.import-hero-btn-quota.is-byok  { color: var(--text-3); }

.ai-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 460px) {
  .ai-form-row { grid-template-columns: 1fr; }
}

.ai-status {
  font-size: .85rem;
  color: var(--text-3);
  padding: 12px 0;
  margin: 0;
}
.ai-status-error { color: var(--danger); }
.ai-status-warn { color: var(--accent); }

.ai-preview {
  margin-top: 12px;
  padding: 14px;
  background: var(--surface-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-inset);
}
.ai-preview-text {
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  margin: 0 0 10px;
  max-height: 320px;
  overflow: auto;
  color: var(--text-1);
}
.ai-preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* Responsive: perf scrollable on small screens */
@media (max-width: 700px) {
  .perf-scrollable { padding: 32px 20px 20px; }
  .perf-hud { padding: 0 10px; gap: 4px; }
  .perf-hud-btn { padding: 5px 8px; font-size: .75rem; }
  .perf-speed-btn { padding: 5px 7px; }
}

/* ============================================================
   Dashboard v2 — Figma-driven layout
   ============================================================ */

.view-home { display: flex; flex-direction: column; gap: 2px; }
.view-home .feature-spotlight { margin-top: 38px; }

/* ---- Hero ---- */

/* ---- Pill buttons (hero + ad card) ---- */

/* ---- Stat tiles inline in hero ---- */

/* ---- Row grids for table groupings ---- */

/* ---- Dashboard "table" (list container) ---- */

/* ---- Rows (shared w/ song-table-row styling via .dash-row inheriting aesthetic) ---- */

/* ---- Ad / feature card ---- */

/* ---- Empty state inside dash-table ---- */

/* ---- Responsive ---- */

@media (max-width: 768px) {
  #app { flex-direction: column; padding: 0; gap: 0; }

  main#main-content { padding: 16px; min-width: 0; overflow-x: hidden; }
  .songs-two-pane, .songs-pane-right { min-width: 0; }
  .song-table-card { max-width: 100%; }

  /* Dashboard hero: tighten actions/stats spacing */

  /* Songs page: two-pane stacks */
  .songs-two-pane { grid-template-columns: 1fr; gap: 12px; }
  /* The artist/category list collapses to a select at this breakpoint
     (see .songs-pane-select). The list is hidden via display:none below,
     so the pane no longer needs a max-height clamp. */
  .songs-pane-left { max-height: none; }

  /* Song table: low-priority columns are hidden by the JS auto-fit pass
     when the table content would overflow. We keep `table-layout: auto`
     (default) so the table reports its true natural width — that's the
     signal the auto-fit pass uses to decide which column to drop next.
     Also tighten the actions cell (icon-only Play) and cell padding so
     the remaining columns have more room. */
  .song-table-card { overflow-x: visible; }
  .song-table { min-width: 0; }
  .song-table colgroup .col-actions { width: 96px; }
  .song-table th, .song-table td { padding-left: 12px; padding-right: 12px; }
  .song-row-play-label { display: none; }
  .song-row-play { padding: 6px 8px; }

  /* Songs hero (title + New Song pill + search) */

  /* Standalone header (New Song / Edit Song) — unlock fixed height, allow stack */

  /* View controls: allow wrap, slightly smaller */
  .view-ctrl { flex: 1; justify-content: center; }

  /* Add Section bar: horizontal scroll rather than wrap-overflow */
  .add-section-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
  .add-section-btn { flex-shrink: 0; }

  /* Modal url-row stacks */
  .import-url-row { flex-direction: column; }
  .import-url-row .form-input { width: 100%; }
  .import-url-row .btn { width: 100%; justify-content: center; }

  /* Modal container — tighter padding at mobile */
  .modal { padding: 1.5rem; }
  .modal-overlay { padding: 1rem; }
}

@media (max-width: 480px) {
  /* View controls collapse to icon only */
  .view-ctrl span { display: none; }
  .view-ctrl { padding: 8px 10px; }

  /* New Song hero title smaller */

  /* Mobile: outer chrome collapses to ~8px and inner content paddings
     follow the same ramp so cards aren't visually too "loose". */
  main#main-content { padding: 8px; }
  .internal-hero-content { padding: 16px 12px; }
  .setlist-card-header { padding: 14px 14px 10px; }
  .setlist-card-footer { padding: 10px 14px; }
  .song-table td { padding: 12px 14px; }
  .song-view-card-header { padding: 16px 16px 12px; }
  .modal { padding: 1rem; }
  .modal-overlay { padding: 0.5rem; }
}

@media (min-width: 769px) and (max-width: 960px) {
  /* iPad portrait band: stack dashboard rows; outer gutters are handled
     by the existing `(max-width: 1100px)` rule further down. */
  #app { padding: 0; gap: 16px; }
}

/* ============================================================
   Dark mode — overrides for sidebar + dashboard v2
   ============================================================ */
[data-theme="dark"] .card-flush {
  background: rgba(26, 24, 22, 0.50);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 4px -2px rgba(0, 0, 0, 0.30),
    0 1px 1px -1px rgba(0, 0, 0, 0.40);
}

/* Sidebar nav */
[data-theme="dark"] .sidebar-nav-btn {
  color: var(--text-1);
  border-top-color: rgba(255, 255, 255, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .sidebar-nav-btn:hover { background: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .sidebar-nav-btn.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
}
[data-theme="dark"] .sidebar-nav-count { color: var(--text-3); }

/* Sidebar profile card */
[data-theme="dark"] .user-dropdown-item { color: var(--text-1); }
[data-theme="dark"] .user-dropdown-item:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .user-dropdown-item-icon { color: var(--text-2); }
[data-theme="dark"] .user-dropdown-section-label { color: var(--text-3); }
[data-theme="dark"] .user-dropdown-divider { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .user-dropdown-item-value {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-2);
}

/* Dashboard hero */

/* Dashboard pills */

/* Stat tiles */

/* Dashboard tables */

/* Ad card: accent background already works; keep border subtle */

/* Empty states */

/* Shared row + song-table in dark (unified rows) */
[data-theme="dark"] .song-table-row{
  border-top-color: rgba(255, 255, 255, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .song-table td,
[data-theme="dark"] .song-table-title-text{ color: var(--text-1); }
[data-theme="dark"] .song-table-artist,
[data-theme="dark"] .song-table-capo,
[data-theme="dark"] .song-table-feel,
[data-theme="dark"] .song-table-sets,
[data-theme="dark"] .song-table-dim,
[data-theme="dark"] .song-table-recent{ color: var(--text-3); }

/* View switcher in dark: active pill stays near-white */
[data-theme="dark"] .songs-view-switcher { border-color: rgba(255, 255, 255, 0.10); }
[data-theme="dark"] .songs-view-btn.active {
  background: var(--text-1);
  color: var(--bg);
}

/* ============================================================
   Songs page v2 — Figma-driven redesign
   ============================================================ */

/* ---- Hero card ---- */

/* Embedded search card inside hero */
.songs-hero-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 273px;
  padding: 8px 16px;
  border-radius: 40px;
  border: 1px solid #d7d7d7;
  background: var(--card-bg-hover);
}
.internal-hero-cta-group { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.songs-hero-search > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-3); }
.songs-hero-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: #000;
  line-height: 1.4;
  padding: 0;
}
.songs-hero-search-input::placeholder { color: #AEAEAE; }
.songs-hero-search-clear {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Song table (canonical — shared by Songs, Setlists, Shows) ──
   2026 card system skin: solid surface header strip, translucent rows
   over the page gradient, row hover = solid surface + accent ink with
   the Play pill flipping to accent. */
.song-table-card { padding: 0; }

.song-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
}

.song-table colgroup .col-title    { width: auto; }
.song-table colgroup .col-artist   { width: auto; }
.song-table colgroup .col-key      { width: 88px; }
.song-table colgroup .col-capo     { width: 94px; }
.song-table colgroup .col-feel     { width: 100px; }
.song-table colgroup .col-sets     { width: 88px; }
.song-table colgroup .col-actions  { width: 116px; }

.song-table thead tr { background: var(--card-bg-hover); }
.song-table th {
  padding: 20px 24px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  text-align: left;
  background: var(--card-bg-hover);
  border-bottom: 1px solid var(--table-head-divider);
  white-space: nowrap;
}
.song-table th:last-child { text-align: right; }

/* Fixed row height: every cell paints the same strip, so the hairline
   lands at one y-coordinate and translucent fills never notch. */
.song-table-row {
  height: 64px;
  cursor: pointer;
}
.song-table td {
  padding: 16px 24px;
  background: var(--table-row-bg);
  border-bottom: 1px solid var(--table-seam);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--table-ink);
  white-space: nowrap;
  vertical-align: middle;
  transition: background var(--transition), color var(--transition);
}
.song-table tbody tr:last-child td { border-bottom: 0; }

.song-table-title { max-width: 220px; }
.song-table-title-text {
  font-weight: 400;
  color: var(--table-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  transition: color var(--transition);
}
.song-table-artist { color: var(--table-ink); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.song-table-sets { color: var(--table-ink); }
.song-table-feel, .song-table-capo { color: var(--table-ink); background: transparent; border: 0; padding: 0; font-weight: 400; font-size: 14px; }
.song-table-dim { color: var(--table-ink); opacity: .35; }
.song-table-recent { font-variant-numeric: tabular-nums; }

/* Row hover: solid surface, accent ink, accent Play pill. */
.song-table-row:hover td { background: var(--card-bg-hover); color: var(--accent); }
.song-table-row:hover .song-table-title-text,
.song-table-row:hover .song-table-artist,
.song-table-row:hover .song-table-capo,
.song-table-row:hover .song-table-feel,
.song-table-row:hover .song-table-sets { color: var(--accent); }
.song-table-row:hover .song-table-dim { color: var(--accent); opacity: .5; }
.song-table-row:hover .song-row-play {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.song-table-add {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  opacity: .6;
  cursor: pointer;
  transition: opacity var(--transition);
}
.song-table-row:hover .song-table-add { opacity: 1; }

/* Actions cell: always visible, centered */
/* The actions td must stay a real table-cell (display:flex on a td
   detaches it from the row box and leaves a gap below the buttons),
   so the controls are inline-flex siblings aligned on the baseline. */
.song-table td.song-table-actions {
  padding: 16px 16px;
  text-align: right;
  border-bottom: 0;
  white-space: nowrap;
}
.song-table td.song-table-actions > * { vertical-align: middle; }
.song-table td.song-table-actions .song-row-more { margin-left: 4px; }
.song-table-icon-btn {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--table-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition), transform var(--fast) var(--ease);
}
.song-table-icon-btn svg { width: 16px; height: 16px; stroke: currentColor; }
.song-table-icon-btn:hover { color: var(--accent); transform: translateY(-1px); }
.song-table-icon-btn.is-danger:hover { color: var(--danger); }

/* An open row menu (or header filter) must spill past the card edge:
   drop the card clip while one is open. The first/last cells carry
   their own radii so the corners stay rounded without the clip. */
.card-flush:has(.song-row-more.is-open),
.card-flush:has(.song-th.is-open) { overflow: visible; }
.song-table thead th:first-child { border-top-left-radius: calc(var(--card-radius) - 2px); }
.song-table thead th:last-child  { border-top-right-radius: calc(var(--card-radius) - 2px); }
.song-table tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--card-radius) - 2px); }
.song-table tbody tr:last-child td:last-child  { border-bottom-right-radius: calc(var(--card-radius) - 2px); }

/* ── Two-pane rail (Artists / Categories) ── */
.songs-two-pane {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}
.songs-pane-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.songs-pane-left {
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  border: none;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.songs-pane-header {
  padding: 18px 12px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.songs-pane-header > span:last-child { font-size: 14px; font-weight: 400; color: var(--text-3); }
.songs-pane-list { padding: 0; }

.songs-pane-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 16px 12px;
  border: 0;
  background: transparent;
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition);
}
.songs-pane-item:hover { color: var(--accent); }
.songs-pane-item:hover .songs-pane-item-count { color: var(--accent); }
.songs-pane-item.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.songs-pane-item.active .songs-pane-item-count { color: rgba(255,255,255,.9); }
.songs-pane-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.songs-pane-item-chevron { display: none; }
.songs-pane-item-count {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transition: color var(--transition);
}
.songs-pane-item-all { font-weight: 700; }

/* ── View switcher pill (By Artist / By Category) ── */
.songs-view-switcher {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--card-bg);
  border: none;
  border-radius: 40px;
}
.songs-view-switcher .songs-view-btn { flex: 1; }
.songs-view-btn {
  border: 0;
  background: transparent;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  color: #616161;
  border-radius: 40px;
  cursor: pointer;
  transition: all var(--transition);
}
.songs-view-btn:hover { color: var(--text-1); }
.songs-view-btn.active { background: #000; color: #fff; }

/* ---- Pane select (compact dropdown variant of the artist/tag picker) ---- */
.songs-pane-select { display: none; }
/* As soon as the rail stacks above the table (<=900px) the panel swaps
   for a single glass dropdown; its options carry the per-artist (or
   per-category) song counts, same data as the panel rows. */
@media (max-width: 900px) {
  .songs-pane-left { max-height: none; box-shadow: none; }
  .songs-pane-header { display: none; }
  .songs-pane-list { display: none; }
  .songs-pane-select {
    display: block;
    width: 100%;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: rgba(255,255,255,.4);
    border: 2px solid #fff;
    border-radius: var(--card-radius);
    -webkit-backdrop-filter: blur(var(--card-blur));
    backdrop-filter: blur(var(--card-blur));
    box-shadow: var(--card-shadow);
    padding: 16px 44px 16px 20px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 800;
    color: #000;
    line-height: 1.25;
    cursor: pointer;
    /* Custom chevron-down on the right (Lucide path). */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868686' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
  }
  .songs-pane-select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
}

/* ---- Dark-mode (most surfaces are token-driven; only the literals) ---- */
[data-theme="dark"] .songs-hero-search {
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .songs-hero-search-input { color: var(--text-1); }
[data-theme="dark"] .songs-hero-search-input::placeholder { color: var(--text-3); }
[data-theme="dark"] .songs-view-btn { color: var(--text-2); }
[data-theme="dark"] .songs-view-btn:hover { color: var(--text-1); }
[data-theme="dark"] .songs-view-btn.active { background: var(--text-1); color: var(--bg); }
[data-theme="dark"] .songs-pane-select { background-color: var(--surface); color: var(--text-1); border-color: var(--border-2); }

/* Responsive: stack two-pane on narrow viewports */
@media (max-width: 900px) {
  .songs-two-pane { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Unified table header: sort toggle + filter dropdown on every th ---- */
.song-th {
  position: relative;
  padding: 20px 24px;
  background: #fff;
  border-bottom: 1px solid #EBEBEB;
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
}
.song-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  transition: color var(--transition);
}
.song-th-sort:hover { color: var(--accent); }
.song-th-sort-icon {
  display: inline-flex;
  align-items: center;
  width: 14px;
  height: 14px;
  color: var(--text-3);
  transition: color var(--transition), transform var(--fast) var(--ease);
}
.song-th-sort-icon svg { width: 14px; height: 14px; }
.song-th.is-sorting .song-th-sort-icon { color: var(--accent); }

/* Filter icon: hidden by default, revealed on th hover (or kept visible when active/open). */
.song-th-filter-btn {
  margin-left: 8px;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  opacity: 0;
  transition: opacity var(--fast) var(--ease), background var(--transition), color var(--transition);
}
.song-th-filter-btn svg { width: 14px; height: 14px; }
.song-th-filter-btn:hover { color: var(--text-1); background: rgba(0, 0, 0, 0.05); }
.song-th:hover .song-th-filter-btn,
.song-th.is-filtered .song-th-filter-btn,
.song-th.is-open .song-th-filter-btn { opacity: 1; }
.song-th.is-filtered .song-th-filter-btn { color: var(--accent); }
.song-th.is-open .song-th-filter-btn { color: var(--accent); background: var(--accent-subtle); }
.song-th.is-no-filter .song-th-filter-btn { display: none; }

.song-th-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 12px;
  z-index: 50;
  min-width: 160px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow:
    0 12px 32px -4px rgba(0, 0, 0, 0.14),
    0 4px 10px -2px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.song-th-menu-item {
  border: 0;
  background: transparent;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.song-th-menu-item:hover { background: var(--accent-subtle); color: var(--accent); }
.song-th-menu-item.is-active { background: var(--accent); color: #fff; }

/* ---- Row actions: secondary Play pill (black on hover) + more menu ---- */
.song-row-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px 5px 12px;
  border: 1px solid #000;
  border-radius: 100px;
  background: #000;
  color: rgba(255,255,255,.85);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.song-row-play:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.song-row-play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: inherit;
}
.song-row-play-icon svg { width: 10px; height: 10px; }

.song-row-more { position: relative; display: inline-flex; align-items: center; }
.song-row-mchev { display: none; }
.song-row-more-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.song-row-more-btn svg { width: 18px; height: 18px; }
.song-row-more-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--text-1); }
.song-row-more.is-open .song-row-more-btn { background: var(--accent-subtle); color: var(--accent); }

.song-row-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 140px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow:
    0 12px 32px -4px rgba(0, 0, 0, 0.14),
    0 4px 10px -2px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.song-row-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.song-row-menu-item svg { width: 14px; height: 14px; }
.song-row-menu-item:hover { background: var(--accent-subtle); color: var(--accent); }
.song-row-menu-item.is-danger { color: var(--danger); }
.song-row-menu-item.is-danger:hover { background: var(--danger-bg); color: var(--danger); }

/* Hidden-column values surfaced at the top of the row overflow menu when
   the auto-fit pass collapses Feel/Sets/Capo/Key out of the table. Read-
   only — visually distinct from the action items below the divider. */
.song-row-menu-info {
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.song-row-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}

/* Actions cell: match the other cells' vertical padding (16px) so the cell
   heights line up exactly. When the actions cell had 12px vertical padding,
   a ~1.4px height mismatch became visible as a faint outline whenever the
   row was made taller by the key badge — that's the "border" the row
   showed only when a key was present. Horizontal padding is kept smaller
   so the right edge sits close to the row's right border. */

/* ---- Pager ---- */
.song-table-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  gap: 16px;
  background: #fff;
  border-top: 1px solid #EBEBEB;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}
.song-table-pager-info { color: var(--text-3); }
.song-table-pager-ctrl { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.song-table-pager-select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 28px 4px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  background: #fff;
  cursor: pointer;
  outline: none;
}
.song-table-pager-select:focus { border-color: var(--accent); }
[data-theme="dark"] .song-table-pager {
  background: rgba(255,255,255,0.04);
  border-top-color: rgba(255,255,255,0.08);
  color: var(--text-2);
}
[data-theme="dark"] .song-table-pager-select {
  background: var(--surface);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-1);
}

/* ---- Dark-mode overrides ---- */
[data-theme="dark"] .song-th-sort { color: var(--text-1); }
[data-theme="dark"] .song-th-menu,
[data-theme="dark"] .song-row-menu {
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 12px 32px -4px rgba(0, 0, 0, 0.5),
    0 4px 10px -2px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .song-th-menu-item,
[data-theme="dark"] .song-row-menu-item { color: var(--text-1); }
[data-theme="dark"] .song-th-filter-btn:hover,
[data-theme="dark"] .song-row-more-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-1); }
[data-theme="dark"] .song-row-play { background: transparent; color: var(--text-1); }
[data-theme="dark"] .song-row-play:hover { background: var(--text-1); color: var(--bg); border-color: var(--text-1); }

/* ============================================================
   New Dashboard / Top-Nav system (replaces sidebar layout)
   ============================================================ */

/* ── Joined Nav + Hero card ── */
.nav-hero {
  /* Transparent wrapper: the top nav is a full-bleed bar and the hero
     below it carries its own card surface. */
  position: relative;
  display: flex;
  flex-direction: column;
}

/* "bare" variant — used on non-dashboard pages where only the nav is rendered */
.nav-hero-bare { padding: 0; }

/* ── Top Nav (full-bleed white bar across the page) ── */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 24px;
  background: #fff;
  /* Full-bleed: paint the bar's background out to the viewport edges
     without touching layout (works inside the centered container). */
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
  position: relative;
  z-index: 2;
}

.top-nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  height: 58px;
  padding: 0 0;
  flex-shrink: 0;
  color: #000;        /* logo "FRET" wordmark uses currentColor */
}
[data-theme="dark"] .top-nav-logo { color: #fff; }
.top-nav-logo svg {
  height: 24px;
  width: auto;
  display: block;
}

.top-nav-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 1 auto;
}

.top-nav-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 58px;
  padding: 0 16px;
  min-width: 130px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-body, inherit);
  color: #000;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition);
  white-space: nowrap;
}
.top-nav-tab:hover { color: var(--accent); }
.top-nav-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.top-nav-tab.active { color: var(--accent); font-weight: 800; }

.top-nav-spacer { flex: 1; }

.top-nav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: var(--font-body, inherit);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
  transition: filter var(--transition);
}
.top-nav-avatar:hover { filter: brightness(.92); }

/* ── Mobile nav: hamburger + slide-in drawer ── */
/* Hidden on desktop, revealed at ≤760px (see media query below). */
.mnav-burger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.mnav-burger span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--text-1, #141414);
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.65,.05,.36,1), opacity .2s ease, top .3s cubic-bezier(.65,.05,.36,1);
  transform-origin: center;
}
.mnav-burger span:nth-child(1) { top: 14px; }
.mnav-burger span:nth-child(2) { top: 19px; }
.mnav-burger span:nth-child(3) { top: 24px; }
body.mnav-open .mnav-burger span:nth-child(1) { top: 19px; transform: rotate(45deg); }
body.mnav-open .mnav-burger span:nth-child(2) { opacity: 0; }
body.mnav-open .mnav-burger span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

.mnav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  transition: opacity .25s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.mnav-open .mnav-scrim { opacity: 1; pointer-events: auto; }

.mnav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(82vw, 320px);
  background: var(--surface, #fff);
  box-shadow: -16px 0 48px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,.0,.2,1), visibility 0s linear .32s;
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
  gap: 6px;
  z-index: 91;
  overflow-y: auto;
  visibility: hidden;
}
body.mnav-open .mnav-drawer {
  transform: translateX(0);
  visibility: visible;
  transition: transform .32s cubic-bezier(.4,.0,.2,1), visibility 0s linear 0s;
}
[data-theme="dark"] .mnav-drawer { background: var(--surface, #1c1c1c); box-shadow: -16px 0 48px rgba(0,0,0,.5); }

.mnav-list { display: flex; flex-direction: column; gap: 2px; margin-top: 36px; }

.mnav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-1, #141414);
  font-size: 16px;
  font-weight: 600;
  transition: background .18s ease, color .18s ease;
  opacity: 0;
  transform: translateX(14px);
}
.mnav-item .mnav-icon { display: inline-flex; align-items: center; color: var(--text-2, #555); }
.mnav-item .mnav-icon svg { width: 22px; height: 22px; }
.mnav-item .mnav-label { flex: 1; }
.mnav-item .mnav-chevron { display: inline-flex; align-items: center; color: var(--text-3, #999); opacity: 0; transition: opacity .15s ease, transform .15s ease; }
.mnav-item .mnav-chevron svg { width: 16px; height: 16px; }
.mnav-item:hover { background: var(--surface-2, rgba(0,0,0,.04)); }
.mnav-item:hover .mnav-chevron { opacity: 1; transform: translateX(2px); }
.mnav-item:active { background: var(--surface-2, rgba(0,0,0,.06)); }
.mnav-item.active { color: var(--accent); background: var(--accent-subtle, rgba(252,75,26,.08)); }
.mnav-item.active .mnav-icon { color: var(--accent); }

body.mnav-open .mnav-item,
body.mnav-open .mnav-account {
  animation: mnav-slide-in .42s cubic-bezier(.32,.72,.34,1) both;
  animation-delay: calc(var(--i, 0) * 45ms + 80ms);
}
@keyframes mnav-slide-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.mnav-account {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-2, rgba(0,0,0,.08));
  opacity: 0;
}
.mnav-account-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .18s ease;
}
.mnav-account-trigger:hover { background: var(--surface-2, rgba(0,0,0,.04)); }
.mnav-account-trigger .user-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.mnav-account-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mnav-account-meta .user-dropdown-name { font-size: 14px; font-weight: 700; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnav-account-meta .user-dropdown-email { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnav-account-chevron { display: inline-flex; color: var(--text-3); }
.mnav-account-chevron svg { width: 14px; height: 14px; }

/* ── Hero half of the nav-hero card ── */
.dash-hero-v2 {
  /* Transparent header: content sits directly on the page gradient. */
  position: relative;
  min-height: 471px;
  padding: 24px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  overflow: hidden;
  isolation: isolate;
  /* Force own GPU layer — keeps gradient + image renders stable
     when sibling buttons hover/animate. */
  transform: translateZ(0);
}


/* Guitarist photo on the right — image + tint composited via
   `background-blend-mode` (single-element compositing). This is far more
   stable than `mix-blend-mode` between siblings, which gets re-computed
   whenever any descendant (e.g. a button hover filter) changes layers. */
.dash-hero-v2-image {
  position: absolute;
  top: -27px;
  right: 0;
  width: 636px;
  max-width: 60%;
  height: 496px;
  background-image: url('../img/dashboard/hero-guitar.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, .85);
  background-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
  /* Soft fade on the left edge so the image dissolves into the hero
     gradient instead of sitting on a hard rectangular edge. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 100%);
  /* Pin to its own GPU layer so blends never re-rasterize. */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

.dash-hero-v2-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 60%;
}

.dash-hero-v2-greeting {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: #000;
  margin: 0;
}
.dash-hero-v2-greeting strong {
  font-weight: 800;
}

.dash-hero-v2-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 43px;
  background: #fff;
  color: #616161;
  border: none;
  font-family: var(--font-body, inherit);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  /* Avoid `filter` / `transform` on hover — both spawn new compositing
     layers that would force the hero's blended image to re-rasterize. */
  transition: background-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.hero-pill:hover { background-color: #f3f3f3; }
.hero-pill:active { background-color: #e8e8e8; }
.hero-pill svg { width: 16px; height: 16px; }

.hero-pill-accent {
  background: var(--accent);
  color: #fff;
}
.hero-pill-accent:hover { background-color: var(--accent-dk); }
.hero-pill-accent:active { background-color: var(--accent-dk); }

/* Round + FAB shown only on mobile (desktop continues to use the 3 pills). */
.dash-hero-v2-fab-wrap {
  position: relative;
  display: none;
  justify-content: center;
}
.dash-create-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background-color var(--transition);
}
.dash-create-fab:hover { background: var(--accent-dk); }
.dash-create-fab svg { width: 24px; height: 24px; }

.dash-create-menu {
  position: fixed;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.18);
  padding: 6px;
  min-width: 200px;
  z-index: 250;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-create-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1, #000);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background-color var(--transition);
}
.dash-create-menu-item:hover { background: rgba(0,0,0,.05); }
.dash-create-menu-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }

[data-theme="dark"] .dash-create-menu { background: var(--surface-1, #1a1a1a); border-color: var(--border, rgba(255,255,255,.08)); }
[data-theme="dark"] .dash-create-menu-item { color: var(--text-1); }
[data-theme="dark"] .dash-create-menu-item:hover { background: rgba(255,255,255,.06); }

/* ── Stats cards row (3 columns desktop) ── */
.dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.dash-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top-width: 2px;
  border-bottom-width: 2px;
  border-radius: 0;
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  box-shadow: var(--card-shadow);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background-color var(--transition);
}
.dash-stat-card:first-child { border-radius: var(--card-radius) 0 0 var(--card-radius); }
.dash-stat-card:last-child  { border-radius: 0 var(--card-radius) var(--card-radius) 0; }
/* Whole card is a hover target: surface goes solid, count lights up. */
.dash-stat-card:hover { background-color: var(--card-bg-hover); }
.dash-stat-card:hover .dash-stat-num-v2 { color: var(--accent); }

.dash-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.dash-stat-header-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.dash-stat-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  color: #888;
  padding: 0;
  flex-shrink: 0;
  transition: color var(--transition);
}
.dash-stat-toggle:hover { color: var(--accent); }
.dash-stat-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition);
}
.dash-stat-toggle-icon svg { width: 16px; height: 16px; }
/* Chevron points right by default; rotate to point down when expanded. */
.dash-stat-card.is-expanded .dash-stat-toggle-icon { transform: rotate(90deg); }

.dash-stat-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dash-stat-label-v2 {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  line-height: 1.4;
}
.dash-stat-num-v2 {
  font-size: 36px;
  font-weight: 900;
  color: #000;
  line-height: 1.4;
  letter-spacing: -.02em;
}

.dash-stat-section-label {
  font-size: 14px;
  font-weight: 400;
  color: #888;
  line-height: 1.4;
}

.dash-stat-list {
  display: flex;
  flex-direction: column;
}

.dash-stat-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 58px;
  padding: 8px 0;
  border-top: 1px solid var(--row-divider);
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background var(--transition);
}
.dash-stat-row:first-child { border-top: none; }
.dash-stat-row:hover .dash-stat-row-title,
.dash-stat-row:hover .dash-stat-row-sub,
.dash-stat-row:hover .dash-stat-row-chevron { color: var(--accent); }

.dash-stat-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-stat-row-title {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  line-height: 20px;
  transition: color var(--transition);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-stat-row-sub {
  font-size: 12px;
  font-weight: 400;
  color: #000;
  line-height: 20px;
  transition: color var(--transition);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-stat-row-key {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent);
  background: rgba(252,75,26,.1);
  border: 1px solid rgba(252,75,26,.2);
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.dash-stat-row-chevron {
  flex-shrink: 0;
  color: #888;
  display: flex;
  align-items: center;
  transition: color var(--transition);
}
.dash-stat-row-chevron svg { width: 16px; height: 16px; }

.dash-stat-empty {
  padding: 12px 0;
  font-size: 13px;
  color: #888;
}

/* ── Feature Spotlight ── */
.feature-spotlight {
  position: relative;
  border-radius: 16px;
  background-color: #fff;
  background-image: url('../img/dashboard/spotlight-capo.png');
  background-position: left center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 2px solid #fff;
  box-shadow:
    0 16px 16px -8px rgba(12,12,13,0.05),
    0 4px 4px -4px rgba(12,12,13,0.05);
  overflow: hidden;
  min-height: 438px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  isolation: isolate;
  transform: translateZ(0);
}

/* Empty spacer — reserves the left grid column so content sits on the
   right half. The card's background image shows through it. */
.feature-spotlight-image {
  background: transparent;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

/* Frame around the image — hidden on desktop (the card's bg-image fills
   the left grid column there). On mobile it becomes a visible rounded
   image frame stacked above the text content. */
.feature-spotlight-frame {
  display: none;
}

.feature-spotlight-content {
  grid-column: 2;
  padding: 56px 56px 56px 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  position: relative;
  background: transparent;
}

.spotlight-eyebrow {
  font-size: 20px;
  font-weight: 400;
  color: #a6a6a6;
  margin: 0;
}
.spotlight-title {
  font-size: 42px;
  font-weight: 800;
  color: #000;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
}
.spotlight-tagline {
  font-size: 24px;
  font-weight: 500;
  color: var(--accent);
  margin: 16px 0 4px;
}
.spotlight-body {
  font-size: 20px;
  font-weight: 500;
  color: #000;
  line-height: 1.5;
  margin: 0 0 12px;
  max-width: 577px;
}
.spotlight-body p + p { margin-top: 16px; }

.spotlight-dots {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
.spotlight-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d9d9d9;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition);
}
.spotlight-dot.active { background: var(--accent); }
.spotlight-dot:hover { background: #b9b9b9; }
.spotlight-dot.active:hover { background: var(--accent); }

/* ── Floating user menu (anchored top-right) ── */
.user-menu-wrap {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 200;
  width: 280px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease;
}
.user-menu-wrap.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.user-menu-dropdown {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.18);
  overflow: hidden;
}
.user-menu-dropdown-inner {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-theme="dark"] .user-menu-dropdown {
  background: var(--surface);
  border-color: var(--border-2);
}

/* ── Dark mode for new dashboard ── */
/* IMPORTANT: use `background-color` only — the shorthand `background:`
   would clobber `background-image/position/size/repeat` set elsewhere
   (the spotlight bg lives on this same element). */
[data-theme="dark"] .feature-spotlight {
  background-color: var(--surface);
  border-color: var(--border-2);
}

/* Nav stripe: noticeably darker than the hero/cards behind it */
[data-theme="dark"] .top-nav {
  background: #0A0A0A;
  box-shadow: 0 0 0 100vmax #0A0A0A;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
[data-theme="dark"] .top-nav-tab { color: var(--text-1); }
[data-theme="dark"] .top-nav-tab:hover { color: var(--accent); }
[data-theme="dark"] .top-nav-tab.active { color: var(--accent); }

/* Hero photo swap — dark plate already low-key, so drop the tint and
   skip blending entirely. Single-element render = no blend re-flash. */
[data-theme="dark"] .dash-hero-v2-image {
  background-image: url('../img/dashboard-hero-dark.png');
  background-color: transparent;
  background-blend-mode: normal;
  opacity: 1;
}


[data-theme="dark"] .dash-hero-v2-greeting { color: var(--text-1); }

[data-theme="dark"] .dash-stat-label-v2,
[data-theme="dark"] .dash-stat-num-v2,
[data-theme="dark"] .dash-stat-row-title,
[data-theme="dark"] .dash-stat-row-sub,
[data-theme="dark"] .spotlight-title,
[data-theme="dark"] .spotlight-body { color: var(--text-1); }
[data-theme="dark"] .dash-stat-section-label { color: var(--text-3); }
[data-theme="dark"] .dash-stat-row-key {
  background: rgba(252,75,26,.18);
  border-color: rgba(252,75,26,.35);
}

[data-theme="dark"] .hero-pill { background: var(--surface-2); color: var(--text-1); }
[data-theme="dark"] .hero-pill-accent { background: var(--accent); color: #fff; }

[data-theme="dark"] .spotlight-eyebrow { color: var(--text-3); }
/* Spotlight bg image already lives on the card itself; nothing to do
   here for dark mode aside from the surface/border swaps above. */
[data-theme="dark"] .spotlight-dot { background: rgba(255,255,255,.18); }
[data-theme="dark"] .spotlight-dot.active { background: var(--accent); }

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet ≤ 1100 — outer gutter ramps down so iPad portrait (~820px)
   doesn't keep the desktop's 64px gutter. */
@media (max-width: 1100px) {
  .app-main { padding: 16px 24px 32px; }
  .dash-stats-grid { grid-template-columns: 1fr; gap: 16px; }
  .dash-stat-card,
  .dash-stat-card:first-child,
  .dash-stat-card:last-child { border-radius: var(--card-radius); }
  .top-nav-tab { min-width: auto; padding: 0 12px; }
  .dash-hero-v2-content { max-width: 65%; }
  .dash-hero-v2-greeting { font-size: 36px; }
  .feature-spotlight { grid-template-columns: 5fr 6fr; }
  .feature-spotlight-content { padding: 40px 40px 40px 8px; }
  .spotlight-title { font-size: 32px; }
  .spotlight-body { font-size: 16px; }
  .spotlight-tagline { font-size: 20px; }
  .user-menu-wrap { right: 32px; }
}

/* Mobile ≤ 760 */
@media (max-width: 760px) {
  .app-main { padding: 8px; gap: 8px; }

  /* Top nav: full wordmark on the left, hamburger on the right. Tabs + avatar move into the drawer. */
  .top-nav { padding: 8px 12px; gap: 8px; }
  .top-nav-logo {
    padding: 0;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  .top-nav-logo svg {
    height: 28px;
    width: auto;
  }
  .top-nav-tabs { display: none; }
  .top-nav-avatar { display: none; }
  .mnav-burger { display: block; }
  /* Lock body scroll while the drawer is open. */
  body.mnav-open { overflow: hidden; }

  /* Hero — guitarist image up top fading down to a clean text area below.
     Image fills the card, vertical mask softens it into the greeting. */
  .dash-hero-v2 {
    min-height: 420px;
    padding: 32px 24px;
    justify-content: flex-end;
  }
  .dash-hero-v2-image {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    background-position: center top;
    /* Vertical fade: fully opaque near the top, gone by ~65% down. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 32%, rgba(0,0,0,.35) 60%, transparent 78%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 32%, rgba(0,0,0,.35) 60%, transparent 78%);
  }
  .dash-hero-v2-content { max-width: 100%; gap: 20px; align-items: center; text-align: center; }
  .dash-hero-v2-greeting { font-size: 32px; line-height: 1.25; }

  /* Mobile uses a single round + button instead of the 3 inline pills. */
  .dash-hero-v2-actions { display: none; }
  .dash-hero-v2-fab-wrap { display: flex; }

  /* Stat cards collapse by default; the chevron toggles `.is-expanded`
     to reveal the recently-played / latest-added lists. */
  .dash-stat-card { padding: 20px 24px; gap: 0; }
  .dash-stat-num-v2 { font-size: 36px; }
  .dash-stat-body { display: none; }
  .dash-stat-card.is-expanded { gap: 16px; }
  .dash-stat-card.is-expanded .dash-stat-body { display: flex; padding-top: 4px; }
  .dash-stat-toggle { display: inline-flex; }
  .dash-stat-toggle-icon svg { width: 18px; height: 18px; }

  /* Feature Spotlight stacks vertically with the image inside a
     rounded frame above the text content. */
  .feature-spotlight {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
    background-image: none !important;
    padding: 24px;
    gap: 16px;
  }
  .feature-spotlight-frame {
    display: block;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 178px;
    border-radius: 8px;
    overflow: hidden;
    background: #f4f4f4;
  }
  .feature-spotlight-image {
    display: block;
    width: 100%;
    height: 100%;
  }
  .feature-spotlight-content {
    grid-column: 1;
    grid-row: 2;
    padding: 0;
    background: transparent;
  }
  [data-theme="dark"] .feature-spotlight-content {
    background: transparent;
  }
  [data-theme="dark"] .feature-spotlight-frame { background: #2a2a2a; }
  .spotlight-title { font-size: 28px; }
  .spotlight-eyebrow { font-size: 14px; }
  .spotlight-tagline { font-size: 18px; margin-top: 8px; }
  .spotlight-body { font-size: 15px; }

  /* User menu drops to viewport-anchored centered panel */
  .user-menu-wrap { right: 16px; top: 70px; width: calc(100vw - 32px); max-width: 320px; }
}

/* ============================================================
   Internal-page hero (joined with top nav). Used by Songs,
   Setlists, Shows. Same .nav-hero card as the dashboard.
   ============================================================ */

.internal-hero {
  /* Transparent header: content sits directly on the page gradient. */
  position: relative;
  padding: 32px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  isolation: isolate;
  /* Same GPU-layer trick as the dashboard hero — keeps the soft
     gradient render stable when buttons elsewhere hover. */
  transform: translateZ(0);
}

.internal-hero-bg { display: none; }

.internal-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.internal-hero-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 0;
}

.internal-hero-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  color: #000;
  letter-spacing: -.02em;
  margin: 0;
  min-width: 0;
}

/* ── Dark mode ── */
[data-theme="dark"] .internal-hero-title { color: var(--text-1); }

/* ── Mobile ── */
@media (max-width: 760px) {
  .internal-hero { padding: 24px 20px; gap: 20px; }
  .internal-hero-title { font-size: 28px; }
  .internal-hero-titlebar { gap: 12px; }
}

/* ============================================================
   Mobile Songs section — Figma 7903-1761
   Glass-morphic cards, big title + round CTA, pill toggle,
   accordion-style artist cards, simplified song table.
   ============================================================ */
@media (max-width: 760px) {
  /* Hero: bigger title, round CTA. Search bar lives in the page-level
     header (added separately) so the inline search is hidden. */
  .internal-hero { padding: 24px 20px; gap: 16px; align-items: stretch; }
  .internal-hero-titlebar { align-items: center; }
  .internal-hero-title { font-size: 36px; font-weight: 800; line-height: 1.1; }

  /* Round, icon-only "+" CTA on mobile. */
  .internal-hero-titlebar .hero-pill-accent {
    border-radius: 50%;
    padding: 0;
    width: 56px;
    height: 56px;
    min-width: 56px;
    justify-content: center;
    flex-shrink: 0;
  }
  .internal-hero-titlebar .hero-pill-accent span { display: none; }
  .internal-hero-titlebar .hero-pill-accent svg { width: 24px; height: 24px; }

  /* Hide inline search on mobile (page-level search covers it). */
  .songs-hero-search { display: none; }

  /* View switcher: pill toggle (active = black, inactive = transparent). */
  .songs-view-switcher {
    width: auto !important;
    justify-content: center !important;
    background: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
  }
  .songs-view-btn {
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #616161;
    background: transparent;
    border: 0;
  }
  .songs-view-btn.active {
    background: #000;
    color: #fff;
    box-shadow: 0 16px 32px -4px rgba(12,12,13,.10), 0 4px 4px -4px rgba(12,12,13,.05);
  }

  /* Stack the two panes vertically on mobile. */
  .songs-two-pane {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
  }
  .songs-pane-left,
  .songs-pane-right { width: 100%; min-width: 0; }
  /* Panel->dropdown swap and the glass select live in the shared
     <=900px block (the stack breakpoint) above. */

  /* Song table: glass card; show only Title + Key + chevron. */
  .song-table-card {
    background: rgba(255,255,255,.4) !important;
    border: 2px solid #fff !important;
    border-radius: 16px !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 16px -8px rgba(12,12,13,.05), 0 4px 4px -4px rgba(12,12,13,.05);
    overflow: hidden;
  }
  .song-table thead tr { background: #fff; }
  .song-table th, .song-table td { padding: 12px 16px; }
  /* Hide all columns except Title, Key, and the actions cell (which we
     repurpose to a chevron). */
  .song-table th[data-col="artist"],   .song-table td[data-col="artist"],
  .song-table th[data-col="capo"],     .song-table td[data-col="capo"],
  .song-table th[data-col="feel"],     .song-table td[data-col="feel"],
  .song-table th[data-col="sets"],     .song-table td[data-col="sets"] { display: none; }
  /* Title cell: extrabold, 14px. */
  .song-table .song-table-title-text { font-size: 14px; font-weight: 800; }
  /* Key badge: a bit larger and more prominent on mobile. */
  .song-table .recent-item-key {
    font-size: .82rem;
    padding: 4px 10px;
    border-radius: 6px;
    border-width: 2px;
  }
  /* Actions cell: replace play/more with a chevron-right indicator.
     Restore table-cell display (it's flex on desktop) so the row still
     fills the full table width, and shrink the reserved column width. */
  .song-table colgroup .col-actions { width: 44px; }
  .song-table td.song-table-actions {
    display: table-cell !important;
    width: 44px;
    padding: 12px 16px !important;
    text-align: right;
  }
  .song-table-actions .song-row-play,
  .song-table-actions .song-row-more { display: none; }
  .song-table-actions .song-row-mchev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3, #868686);
  }
  .song-table-actions .song-row-mchev svg { width: 16px; height: 16px; }
  /* Header column: hide sort/filter chrome we removed; just show labels. */
  .song-table .song-th-filter-btn { display: none; }
  .song-table .song-th-sort { padding: 0; gap: 4px; }
  .song-table .song-th-sort-icon { display: none; }
  .song-table .song-th-label { font-size: 14px; font-weight: 700; color: #000; }
}

/* ============================================================
   Song View — refreshed layout (back-link + card + toolbar)
   ============================================================ */

.song-view-back {
  margin: 8px 0 4px;
}
.back-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 0;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: color .15s ease, background .15s ease;
}
.back-pill:hover { color: var(--text-1); background: var(--surface); }
.back-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
[data-theme="dark"] .back-pill { background: var(--surface); }

.song-view-card {
  /* Surface chrome (bg/border/shadow/radius) comes from .surface-card. */
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.song-view-card-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.song-view-card-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.song-view-card-title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.song-view-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.song-view-card-artist {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: #868686;
  line-height: 1.4;
}
[data-theme="dark"] .song-view-card-artist { color: var(--text-2); }

.song-view-card-metadata {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #868686;
  flex-wrap: wrap;
}
.song-view-card-metadata .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.song-view-card-metadata .meta-label { color: #868686; }
.song-view-card-metadata .meta-value { color: var(--text-1); font-weight: 800; }
.song-view-card-metadata .meta-dot { color: #C7C7C7; }
[data-theme="dark"] .song-view-card-metadata,
[data-theme="dark"] .song-view-card-metadata .meta-label { color: var(--text-2); }
[data-theme="dark"] .song-view-card-metadata .meta-dot { color: var(--border-2); }

.song-view-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.action-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 0;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: #616161;
  transition: color .15s ease, background .15s ease;
  white-space: nowrap;
}
.action-pill:hover { color: var(--text-1); background: var(--surface-2); }
.action-pill svg { width: 16px; height: 16px; flex-shrink: 0; }
.action-pill.is-active { color: var(--accent); }
[data-theme="dark"] .action-pill { color: var(--text-2); }

.action-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-2);
  transition: background .15s ease, color .15s ease;
}
.action-icon-btn:hover { background: var(--surface-2); color: var(--text-1); }
.action-icon-btn svg { width: 18px; height: 18px; }

.song-view-divider {
  border: 0;
  border-top: 1px solid #E5E5E5;
  margin: 0;
  height: 0;
}
[data-theme="dark"] .song-view-divider { border-top-color: var(--border-2); }

.song-view-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.song-view-toolbar-left,
.song-view-toolbar-right {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #F6F6F6;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #868686;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  white-space: nowrap;
}
.tool-pill-bordered {
  border-color: #D8D8D8;
  border-radius: 20px;
}
.tool-pill-btn {
  cursor: pointer;
}
.tool-pill-btn:hover { border-color: var(--accent); color: var(--accent); }
.tool-pill-btn.is-on { border-color: var(--accent); color: var(--accent); background: rgba(252, 75, 26, .04); }
.tool-pill-label { color: inherit; }
.tool-pill-value { font-weight: 800; color: var(--text-1); }
.tool-pill-btn.is-on .tool-pill-value { color: var(--accent); }
.tool-pill-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: #D8D8D8;
}
[data-theme="dark"] .tool-pill { background: var(--surface-2); color: var(--text-2); }
[data-theme="dark"] .tool-pill-bordered { border-color: var(--border-2); }
[data-theme="dark"] .tool-pill-sep { background: var(--border-2); }

/* "Show:" toggle pills — compact, smaller text version of tool-pill */
.show-toggle-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #868686;
  margin-right: 2px;
}
[data-theme="dark"] .show-toggle-label { color: var(--text-2); }
.show-toggle {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: #F0F0F0;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: #616161;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.show-toggle:hover { color: var(--accent); }
.show-toggle.is-on {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme="dark"] .show-toggle { background: var(--surface-2); color: var(--text-2); }
[data-theme="dark"] .show-toggle.is-on { background: transparent; }

/* ── Roadmap strip — clickable section pills for jump-navigation ──── */
.roadmap-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding: 10px 0 6px;
  margin: 0;
  font-family: var(--font-sans);
}
.roadmap-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--border-2);
  border-radius: 9999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
}
.roadmap-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}
.roadmap-pill.is-active {
  background: var(--text-1);
  border-color: var(--text-1);
  color: var(--bg);
}
.roadmap-sep {
  color: var(--text-3);
  font-size: .75rem;
  user-select: none;
}
[data-theme="dark"] .roadmap-pill { background: var(--surface-2); }
[data-theme="dark"] .roadmap-pill:hover { background: rgba(232,103,60,.12); }

/* In the new card layout, the song content sits flush in the card —
   no inner card chrome (background / shadow / radius). */
.song-view-card .song-view-scroll { flex: 1; min-height: 0; display: block; }
.song-view-card .song-content {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}

/* Always-open play bar (always-visible variant) skips the collapsed state. */
.play-bar.is-always-open .pb-hidden-when-collapsed { display: inline-flex; }

/* Notes inside the card — sit above the song content */
.song-view-card .song-view-notes {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
  font-style: italic;
}

/* ============================================================
   Song Edit — refreshed layout (back-link + view-pills + cards)
   ============================================================ */

.song-edit-page,
.setlist-edit-page,
.show-edit-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: calc(100dvh - 48px);
}

.song-edit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 4px;
}

.edit-view-pills {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.edit-view-pill {
  background: #fff;
  border: 0;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: color .15s ease, background .15s ease;
}
.edit-view-pill:hover { color: var(--text-1); }
.edit-view-pill.active { color: var(--text-1); font-weight: 700; }
[data-theme="dark"] .edit-view-pill { background: var(--surface); }

/* Surface chrome on the edit page comes from .surface-card / .card-flush
   applied directly in the markup — this section only sets layout/typography. */

.song-edit-page .editor-card-header,
.setlist-edit-page .editor-card-header,
.show-edit-page .editor-card-header {
  padding: 22px 24px 12px;
}
.song-edit-page .editor-card-title,
.setlist-edit-page .editor-card-title,
.show-edit-page .editor-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -.01em;
}

.editor-content-card {
  display: flex;
  flex-direction: column;
}
.editor-content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 40px 16px;
}
.editor-content-title-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1;
}
.editor-content-eyebrow {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--accent);
}
.editor-content-title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--text-1);
  margin: 0;
}
.editor-content-artist {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: #868686;
  line-height: 1.4;
  margin-top: 4px;
}
[data-theme="dark"] .editor-content-artist { color: var(--text-2); }

.editor-content-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.editor-content-actions .action-pill-accent {
  background: var(--accent);
  color: #fff;
}
.editor-content-actions .action-pill-accent:hover {
  background: var(--accent-hover);
  color: #fff;
}
.editor-content-actions .action-pill-accent:disabled,
.editor-content-actions .action-pill-accent.is-disabled {
  background: #E0E0E0;
  color: #9A9A9A;
  cursor: not-allowed;
  pointer-events: none;
}
[data-theme="dark"] .editor-content-actions .action-pill-accent:disabled,
[data-theme="dark"] .editor-content-actions .action-pill-accent.is-disabled {
  background: var(--surface-2);
  color: var(--text-3);
}

.editor-content-divider {
  border: 0;
  border-top: 1px solid #E5E5E5;
  margin: 0 40px;
  height: 0;
}
[data-theme="dark"] .editor-content-divider { border-top-color: var(--border-2); }

.song-edit-page .editor-content-card .editor-card-body,
.setlist-edit-page .editor-content-card .editor-card-body,
.show-edit-page .editor-content-card .editor-card-body { padding: 24px 40px 32px; }
.song-edit-page .editor-meta-card .editor-card-body,
.setlist-edit-page .editor-meta-card .editor-card-body,
.show-edit-page .editor-meta-card .editor-card-body { padding: 16px 24px 24px; }

/* Two-column grid — Song Details (fixed) + main content (flex). */
.song-edit-page .editor-layout,
.setlist-edit-page .editor-layout,
.show-edit-page .editor-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .song-edit-page .editor-layout,
  .setlist-edit-page .editor-layout,
  .show-edit-page .editor-layout { grid-template-columns: 278px 1fr; align-items: start; }
  .song-edit-page .editor-layout[data-edit-view="focus"],
  .setlist-edit-page .editor-layout[data-edit-view="focus"],
  .show-edit-page .editor-layout[data-edit-view="focus"] { grid-template-columns: 1fr; }
}
.song-edit-page .editor-layout[data-edit-view="focus"] .editor-meta-card,
.setlist-edit-page .editor-layout[data-edit-view="focus"] .editor-meta-card,
.show-edit-page .editor-layout[data-edit-view="focus"] .editor-meta-card { display: none; }

@media (max-width: 900px) {
  .editor-content-header { padding: 24px 24px 12px; }
  .editor-content-title { font-size: 36px; }
  .editor-content-eyebrow { font-size: 18px; }
  .editor-content-divider { margin: 0 24px; }
  .song-edit-page .editor-content-card .editor-card-body,
  .setlist-edit-page .editor-content-card .editor-card-body,
  .show-edit-page .editor-content-card .editor-card-body { padding: 20px 24px 28px; }
}
@media (max-width: 640px) {
  .editor-content-header { flex-direction: column; align-items: stretch; }
  .editor-content-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* ── Mobile tweaks for the refreshed song view ── */
@media (max-width: 900px) {
  .song-view-card { padding: 24px 24px; gap: 20px; }
  .song-view-card-title { font-size: 36px; }
  .song-view-toolbar { gap: 12px; }
  .song-view-toolbar-left,
  .song-view-toolbar-right { gap: 8px; }
}
@media (max-width: 640px) {
  .song-view-card { padding: 20px 18px; }
  .song-view-card-title { font-size: 28px; }
  .song-view-card-header-top { flex-direction: column; align-items: stretch; gap: 12px; }
  .song-view-card-actions { justify-content: flex-start; flex-wrap: wrap; }
  .song-view-card-meta-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .song-view-card-metadata { font-size: 13px; gap: 6px; }
  .action-pill { font-size: 14px; padding: 8px 12px; }
}

/* ── Section notes (per-section rich-text annotations) ────────────── */
.section-note-block {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin: 0 0 8px;
}
.section-note-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 8px;
}
.section-note-font-picker {
  position: relative;
  display: inline-block;
}
.section-note-font-trigger {
  height: 28px;
  min-width: 130px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-1);
  padding: 0 8px;
  font-size: .85rem;
  cursor: pointer;
}
.section-note-font-trigger:hover { border-color: var(--accent); }
.section-note-font-trigger-chev { color: var(--text-3); }
.section-note-font-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.section-note-font-menu[hidden] { display: none; }
.section-note-font-opt {
  text-align: left;
  border: none;
  background: transparent;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-1);
}
.section-note-font-opt:hover { background: var(--accent-subtle); color: var(--accent); }
.section-note-font-opt.active { background: var(--accent-subtle); color: var(--accent); }
/* Font preview — share the same family rules as the body */
.section-note-font-trigger[data-note-font="caveat"],
.section-note-font-opt[data-note-font="caveat"] { font-family: 'Caveat', cursive; font-size: 1.15rem; }
.section-note-font-trigger[data-note-font="kalam"],
.section-note-font-opt[data-note-font="kalam"]  { font-family: 'Kalam', cursive; }
.section-note-font-trigger[data-note-font="marker"],
.section-note-font-opt[data-note-font="marker"] { font-family: 'Permanent Marker', cursive; letter-spacing: .02em; }
.section-note-font-trigger[data-note-font="sans"],
.section-note-font-opt[data-note-font="sans"]   { font-family: var(--font-sans); }
.section-note-font-trigger[data-note-font="mono"],
.section-note-font-opt[data-note-font="mono"]   { font-family: var(--font-mono); font-size: .9rem; }
.section-note-fmt-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-1);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.section-note-fmt-btn:hover { border-color: var(--accent); color: var(--accent); }
.section-note-fmt-btn.italic  { font-style: italic; }
.section-note-fmt-btn.underline { text-decoration: underline; }
.section-note-color-swatches {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.section-note-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--transition);
}
.section-note-swatch[data-color="default"] { background: var(--text-1); }
.section-note-swatch[data-color="accent"]  { background: var(--accent); }
.section-note-swatch[data-color="red"]     { background: #c0392b; }
.section-note-swatch[data-color="green"]   { background: #27ae60; }
.section-note-swatch[data-color="blue"]    { background: #2980b9; }
.section-note-swatch.active { border-color: var(--accent); }
.section-note-delete {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.section-note-delete:hover { color: #c0392b; border-color: var(--border-2); }
.section-note-body {
  min-height: 1.6em;
  padding: 4px 2px;
  outline: none;
  font-size: 1rem;
  line-height: 1.5;
}
.section-note-body:empty::before {
  content: attr(data-placeholder);
  color: var(--text-3);
  pointer-events: none;
}
/* Font variants — applied to .section-note-body via data-note-font */
.section-note-body[data-note-font="caveat"] { font-family: 'Caveat', cursive; font-size: 1.35rem; line-height: 1.3; }
.section-note-body[data-note-font="kalam"]  { font-family: 'Kalam', cursive; font-size: 1.05rem; }
.section-note-body[data-note-font="marker"] { font-family: 'Permanent Marker', cursive; letter-spacing: .02em; }
.section-note-body[data-note-font="sans"]   { font-family: var(--font-sans); }
.section-note-body[data-note-font="mono"]   { font-family: var(--font-mono); font-size: .9rem; }
/* Color variants */
.section-note-body[data-note-color="default"] { color: var(--text-1); }
.section-note-body[data-note-color="accent"]  { color: var(--accent); }
.section-note-body[data-note-color="red"]     { color: #c0392b; }
.section-note-body[data-note-color="green"]   { color: #27ae60; }
.section-note-body[data-note-color="blue"]    { color: #2980b9; }
/* Display-only variant (song view + perf mode) — same fonts/colors, no toolbar */
.section-note-display { padding: 8px 0; margin-bottom: 6px; }
.section-note-display .section-note-body { padding: 0; }

/* Recipient annotation textarea: reuses .section-note-body so handwriting
   font + color attribute selectors above also style the input. */
textarea.share-annotation-input {
  border: 1px dashed var(--border-2);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
  min-height: 56px;
}
textarea.share-annotation-input:focus { border-color: var(--accent); border-style: solid; outline: none; }

/* Tiny color swatches for picking note color. */
.share-annotation-swatches { display: inline-flex; gap: 6px; align-items: center; }
.share-annotation-swatch {
  width: 14px; height: 14px; padding: 0; border-radius: 999px; border: 1.5px solid var(--border-2);
  cursor: pointer; background: var(--text-1);
  transition: transform .12s ease, border-color .12s ease;
}
.share-annotation-swatch[data-color="accent"] { background: var(--accent); }
.share-annotation-swatch[data-color="red"]    { background: #c0392b; }
.share-annotation-swatch[data-color="green"]  { background: #27ae60; }
.share-annotation-swatch[data-color="blue"]   { background: #2980b9; }
.share-annotation-swatch:hover  { transform: scale(1.15); }
.share-annotation-swatch.active { border-color: var(--text-1); transform: scale(1.15); }

/* Sharing index — per-recipient action rows beneath the song-table preview.
   Sits inside the existing setlist-card chassis so it picks up the same
   white-on-hover treatment via the card. */

/* Sharing index — title row holds the recipient name plus the "X New Notes"
   accent badge, kept on the same baseline so the card header stays compact. */
.setlist-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.shares-card-new-notes {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
  background: var(--accent-bg, rgba(192, 117, 69, .14));
  border: 1px solid var(--accent);
  border-radius: 999px;
  white-space: nowrap;
}

/* Sharing cards behave like the Songs list: no whole-card hover, but each
   row hovers individually. Override the inherited setlist-card hover and
   the rule that explicitly suppresses row hover inside setlist cards. */
.shares-card { cursor: default; }
.shares-card:hover {
  background: transparent;
  box-shadow: var(--shadow);
  transform: none;
}

.shares-card .shares-card-song-row { cursor: pointer; }
.shares-card .shares-card-song-row:hover td { background: var(--surface); }
/* The parent .song-table runs in `table-layout: fixed` mode (set by
   .setlist-card .song-table), so a `width: 1%` trick collapses to ~6px
   and the buttons inside spill out — invisible while the card is
   `overflow: hidden`, but exposed the moment the overflow menu opens
   and the parent flips to `overflow: visible`. Pin a real column width
   that fits the share button + chevron with breathing room on both
   sides. The selector specificity must beat `.song-table td` (which is
   declared twice with conflicting paddings) so we qualify with the
   table cell tag. */
.song-table td.shares-card-row-actions {
  width: 80px;
  padding: 8px 20px 8px 0;
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}
/* Wrap so the share button (26px) and chevron (16px) align on a shared
   center line and sit flush against the cell's right edge. */
.shares-card-row-actions-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shares-card-row-actions .action-icon-btn { width: 26px; height: 26px; }
.shares-card-row-chev {
  display: inline-flex;
  align-items: center;
  color: var(--text-3);
}
.shares-card-row-chev svg { width: 16px; height: 16px; display: block; }

/* Revoked share card — desaturated/dimmed look so disabled shares are
   visually distinct without hiding them. */
.shares-card-revoked { opacity: .55; filter: grayscale(.4); }
.shares-card-revoked .shares-card-new-notes { display: none; }

/* Per-share section label inside the multi-share overflow menu. */
.overflow-section-label {
  padding: 6px 12px 2px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
}

/* Sharing — "View All" / Manage view. The header reuses .song-view-card
   chrome; only the action cluster needs to flex-align top-right. The table
   is a thin variant of .song-table with a few extra columns for #, notes,
   status, and per-row actions. */
.shares-manage-card .song-view-card-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.shares-manage-card .song-view-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.shares-manage-card .song-view-card-actions .action-pill svg { width: 14px; height: 14px; }

.shares-manage-table { margin-top: 8px; }
.shares-manage-row { cursor: pointer; }
.shares-manage-num {
  width: 40px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.shares-manage-title { min-width: 220px; }
.shares-manage-title .setlist-card-song-title { display: block; font-size: 14px; }
.shares-manage-title .setlist-card-song-artist { display: block; font-size: 12px; }
.shares-manage-notes,
.shares-manage-status {
  color: var(--text-2);
  font-size: .9rem;
  white-space: nowrap;
}
.shares-manage-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.shares-manage-actions .action-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: .85rem;
  margin-right: 8px;
}
.shares-manage-actions .action-icon-btn { width: 28px; height: 28px; }
.shares-manage-actions .action-icon-btn + .action-icon-btn { margin-left: 4px; }

/* ============================================================
   Song Edit v2 — main-area layout (no sidebar)
   Page header (title + actions), Song Details card, then sections.
   ============================================================ */
.editor-layout-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Page header card — large title input + small artist input on the left,
   action buttons on the right. The inputs visually read as a heading +
   subtitle but stay fully editable. */
.editor-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  background: var(--surface);
  border-radius: var(--radius);
}
.editor-page-header-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.editor-title-input {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--text-1);
  border: none;
  background: transparent;
  padding: 0;
  width: 100%;
  outline: none;
}
.editor-title-input::placeholder { color: var(--text-3); opacity: 1; }
.editor-title-input:focus { background: var(--surface-2); border-radius: 6px; padding: 0 6px; margin: 0 -6px; }
.editor-artist-input {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-3);
  border: none;
  background: transparent;
  padding: 0;
  width: 100%;
  outline: none;
}
.editor-artist-input::placeholder { color: var(--text-3); opacity: .6; }
.editor-artist-input:focus { background: var(--surface-2); border-radius: 6px; padding: 0 6px; margin: 0 -6px; }
.editor-page-header .editor-content-actions { padding-top: 4px; }

/* Song Details card — clickable header with chevron, body collapses. */
.editor-details-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.editor-details-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--surface-2);
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition);
}
.editor-details-header:hover { background: var(--surface); }
.editor-details-title { letter-spacing: -.005em; }
.editor-details-chev {
  color: var(--text-3);
  transform: rotate(0deg);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.editor-details-card.is-collapsed .editor-details-chev { transform: rotate(-90deg); }
.editor-details-body {
  padding: 20px;
  overflow: hidden;
  transition: max-height .2s ease, padding .2s ease, opacity .15s ease;
  max-height: 1200px;
}
.editor-details-card.is-collapsed .editor-details-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* 4-column grid for the song-details fields. Last cell (Notes) spans
   full width on its own row. */
.editor-details-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 20px;
}
.editor-details-grid .form-group { margin: 0; }
.editor-details-grid .editor-details-notes {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .editor-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .editor-details-grid { grid-template-columns: 1fr; }
  .editor-page-header { flex-direction: column; }
  .editor-title-input { font-size: 32px; }
}

/* Section card polish — clean rounded card with subtle gray header bar.
   The internal section header (handle, type select, actions) stays
   functionally intact; just the surrounding chrome gets a refresh. */
.editor-layout-v2 .section-block {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.editor-layout-v2 .section-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-2);
  padding: 12px 18px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.editor-layout-v2 .section-block-note .section-header {
  background: var(--surface-2);
}
.editor-layout-v2 .section-lines { padding: 6px 14px; }
.editor-layout-v2 .section-bottom-actions { padding: 4px 14px 10px; }
[data-theme="dark"] .editor-layout-v2 .section-block { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .editor-layout-v2 .section-header { background: var(--surface-2); border-color: var(--border); }

/* ============================================================
   Print / Save as PDF
   Goal: a clean, paper-ready chart. Strip all chrome (nav, sidebar,
   toolbars, action pills, perf bar, capo control, show toggles,
   roadmap, recipient notes), force light colors, and keep section
   blocks from breaking awkwardly across pages.
   ============================================================ */
@media print {
  /* Force a white page with dark ink regardless of dark mode. */
  :root, [data-theme="dark"] {
    --bg: #fff;
    --surface: #fff;
    --surface-2: #fff;
    --text-1: #000;
    --text-2: #222;
    --text-3: #555;
    --border-2: #ccc;
  }
  html, body {
    background: #fff !important;
    color: #000 !important;
  }
  @page { margin: 0.5in; }

  /* Hide all the chrome that has no business being on paper. */
  .app-header,
  .top-nav,
  .nav-hero,
  .sidebar,
  .play-bar,
  #play-bar,
  #pb-popover,
  .perf-mode,
  .perf-hud,
  .perf-scrollable .perf-section-label[hidden],
  .song-view-back,
  .song-view-card-actions,
  .song-view-toolbar-right,
  .song-view-divider,
  .capo-control-pill,
  #capo-panel-slot,
  .chord-ref,
  .chord-ref-toggle,
  .roadmap-strip,
  .recipient-note,
  .song-overflow-wrap,
  .toast-stack,
  .modal-backdrop,
  .modal,
  .add-section-bar,
  .setlist-nav-side,
  .setlist-nav-bar,
  .editor-content-actions,
  .audio-player-mount,
  .show-toggle-label,
  .show-toggle {
    display: none !important;
  }

  /* Card wrapper — strip shadows/borders so it doesn't print as a box. */
  .song-view-page,
  .song-view-card,
  .surface-card {
    background: #fff !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  .song-view-scroll { overflow: visible !important; height: auto !important; }
  .song-content { background: #fff !important; padding: 0 !important; }

  /* Keep the title + artist + key/capo meta — that's the chart header. */
  .song-view-card-title {
    color: #000 !important;
    font-size: 18pt;
    margin: 0 0 4pt;
  }
  .song-view-card-artist {
    color: #444 !important;
    font-size: 11pt;
  }
  .song-view-card-meta-row { margin-bottom: 12pt; }
  .song-view-card-metadata { color: #333 !important; font-size: 9pt; }

  /* Section labels print as bold inline labels (no pill, no dark fill). */
  .song-section-label {
    background: transparent !important;
    color: #000 !important;
    border: none !important;
    padding: 0 !important;
    font-size: 10pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 10pt 0 4pt !important;
  }

  /* Chord/lyric rows — keep monospace alignment, use black for letters and
     a dark gray for numbers (NNS) so both print legibly. */
  .chord-row { color: #000 !important; font-weight: 700; }
  .chord-row.chord-row-numbers { color: #444 !important; font-weight: 600; }
  .marks-row { color: #000 !important; font-weight: 700; }
  .beats-row { color: #555 !important; }
  .lyric-row, .lyric-only-row { color: #111 !important; }
  .chord-token { text-decoration: none !important; color: inherit !important; }
  .chord-lyric-block { page-break-inside: avoid; }

  /* Author notes — keep but render quietly without backgrounds. */
  .section-note-display { background: transparent !important; padding: 0 !important; }
  .section-note-display .section-note-body { color: #222 !important; }

  /* Section block — don't tear in half across a page if avoidable. */
  .song-view-section { page-break-inside: avoid; }
}