/* =============================================================================
   guitar — standalone app shell
   -----------------------------------------------------------------------------
   Full-viewport, no site chrome. Sidebar (tabs + song list). Main canvas:
     - Song view: clean top bar (title · tools) + progression row + lane
       systems (slim graphical six-string lanes, chord fingerings as dot
       clusters on the strings, lyrics aligned on top)
     - Chord library: alphabetical grid of every shape
   Systems flow into CSS columns sized so the widest system always fits its
   column whole; density steps down until the whole song fits one screen.
============================================================================= */

html, body { height: 100%; }
/* Songbook is an internal app of ryderkatz.com, not an external piece: the shared
   site header sits on top, and the app shell fills the rest of the viewport. Body
   is a flex column (header → #app), so the header is always visible and the app
   never overflows past the bottom. */
body.app {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  overflow: hidden;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.app #app {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Seat the shared nav as an app header bar (it doesn't overlap a scroll here). */
body.app .nav {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* =========================================================================
   Section / progression / chord-type color coding
   -----------------------------------------------------------------------------
   The accent color of an element comes from a [data-kind] attribute on an
   ancestor. We do this rather than swap the global --accent so multiple
   colors coexist on one screen (verse blocks blue, choruses mint, etc.).
   "Kinds" cover BOTH song-section types (verse/chorus/bridge/...) and
   chord-type families (major/minor/7th/...). Same token names for both.
========================================================================== */
[data-kind="verse"]        { --kind: var(--c-cyan-1);   --kind-2: var(--c-cyan-2);   --kind-fg: var(--accent-fg); }
[data-kind="chorus"]       { --kind: var(--c-mint-1);   --kind-2: var(--c-mint-2);   --kind-fg: var(--accent-fg); }
[data-kind="pre-chorus"]   { --kind: var(--c-violet-1); --kind-2: var(--c-violet-2); --kind-fg: var(--accent-fg); }
[data-kind="bridge"]       { --kind: var(--c-coral-1);  --kind-2: var(--c-coral-2);  --kind-fg: var(--accent-fg); }
[data-kind="intro"]        { --kind: var(--c-amber-1);  --kind-2: var(--c-amber-2);  --kind-fg: var(--accent-fg); }
[data-kind="outro"]        { --kind: var(--c-amber-2);  --kind-2: var(--c-amber-1);  --kind-fg: var(--accent-fg); }
[data-kind="interlude"]    { --kind: var(--c-violet-2); --kind-2: var(--c-violet-1); --kind-fg: var(--accent-fg); }
[data-kind="instrumental"] { --kind: var(--fg-dim);     --kind-2: var(--fg-mute);    --kind-fg: var(--bg); }

/* Chord-type families — four canonical groups + one neutral fallback.
     major     : plain triads             (C, G, D, A, E, F, B)
     major-alt : major-rooted variants    (Csus2, Cadd9, Cmaj7, C/E, C6...)
     minor     : plain minor triads       (Am, Em, Dm, F#m...)
     minor-alt : minor-rooted variants    (Am7, Em7, Amadd9, Dm/F...)
     other     : everything else          (power chords, dim, weird inversions) */
[data-family="major"]     { --kind: var(--c-cyan-1);   --kind-2: var(--c-cyan-2); }
[data-family="major-alt"] { --kind: var(--c-mint-1);   --kind-2: var(--c-mint-2); }
[data-family="minor"]     { --kind: var(--c-violet-1); --kind-2: var(--c-violet-2); }
[data-family="minor-alt"] { --kind: var(--c-coral-1);  --kind-2: var(--c-coral-2); }
[data-family="other"]     { --kind: var(--c-amber-1);  --kind-2: var(--c-amber-2); }

[data-kind], [data-family] {
  --kind-soft: color-mix(in srgb, var(--kind) 18%, transparent);
  --kind-glow: color-mix(in srgb, var(--kind) 36%, transparent);
}
/* Default fallbacks when no data-kind/data-family is set */
:root { --kind: var(--accent); --kind-2: var(--accent-2); --kind-soft: var(--accent-soft); --kind-fg: var(--accent-fg); }

/* =========================================================================
   Shell — a tethered frame
   -----------------------------------------------------------------------------
   Docked song sidebar (resizable + collapsible) · docked top bar that owns
   view navigation · a bounded content canvas. The sidebar is SONGS ONLY.
   Every page renders inside a `.page` container on an inset canvas surface —
   nothing free-floats edge-to-edge.
========================================================================= */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w, 256px) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  transition: grid-template-columns var(--t-fast) var(--ease);
}
.app-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
body.resizing-sidebar .app-shell { transition: none; }   /* live-drag: no lag */

/* ---- Sidebar (SONGS ONLY) --------------------------------------------- */
.app-sidebar {
  position: relative;
  min-width: 0;
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.app-shell.sidebar-collapsed .app-sidebar { border-right: 0; pointer-events: none; }

.sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 13px 14px 8px;
}
.sidebar-head .sidebar-title {
  font: 800 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--fg-dim);
}
.sidebar-head .sidebar-count {
  font: 700 11px var(--mono);
  color: var(--fg-mute);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 1px 8px;
}
.sidebar-search { padding: 0 10px 8px; }
.sidebar-search input {
  width: 100%;
  font: 500 13px var(--sans);
  padding: 7px 11px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.sidebar-search input:focus { border-color: var(--accent); }

.app-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-hi) transparent;
}
.sidebar-item {
  position: relative;
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--fg);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.sidebar-item:hover { background: var(--bg-elev); }
/* Written against --accent directly, not through --kind. `:root` (line 74) sets
   `--kind: var(--accent)`, so a custom property's computed value is fixed WHERE
   IT IS DECLARED — --kind froze at the root's default cyan and never saw the
   mint this app declares on <body>. That made every `var(--kind, …)` fallback
   here dead code, and left the open song as pale cyan on its own 16% cyan tint:
   about 1.9:1, the one row in the list you could not read. */
.sidebar-item.active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  /* --accent-2 alone lands ~3.2:1 on its own tint; deepened toward --fg it
     reads 5.4:1 and still says "green" at a glance. */
  color: color-mix(in srgb, var(--accent-2) 72%, var(--fg));
}
/* Title gets the full line. Key and capo ride together at the right end of the
   artist line, pinned to the edge, so they read down two straight columns
   rather than drifting with the length of the name in front of them. */
.sidebar-item .item-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.sidebar-item .item-line + .item-line { margin-top: 3px; }
.sidebar-item .item-title,
.sidebar-item .item-artist {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-item .item-title { font: 600 13px var(--sans); letter-spacing: -.005em; }
.sidebar-item .item-artist { font: 500 11px var(--mono); color: var(--fg-mute); }
/* The accent lives in the title, the tick and the tint — the artist line stays
   plain rather than adding a fourth thing tinted green. */
.sidebar-item.active .item-artist { color: var(--fg-dim); }
.item-private {
  flex: 0 0 auto;
  font: 700 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-mute); background: color-mix(in srgb, var(--fg) 8%, transparent);
  padding: 2px 4px; border-radius: 2px;
}

/* ---- Capo + key tags --------------------------------------------------
   Capo and key are FACTS ABOUT THE SONG, so each is a labelled tag of its own
   rather than more text tacked onto the artist line behind a separator. Capo
   also orders the library, so it is the one that carries color: neutral grey at
   0 (nothing clamped on, so the open songs stay quiet), then one continuous walk
   around the hue wheel for 1–9 — cyan, green, amber, red, magenta, violet — so
   adjacent frets never share a color and a glance down the sorted list reads its
   own sort. The yellow band (h 60–100) is skipped: it goes muddy at the
   lightness this text needs. */
.tag {
  flex: 0 0 auto;
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  white-space: nowrap;
}
/* No opacity on the label. It is 8px type — the smallest thing in the sidebar —
   and dimming it was the single biggest contrast drop in here. It reads as the
   quiet half through size and weight instead, which costs nothing. */
.tag .tag-lab {
  font: 500 8px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
}
.tag .tag-val { font: 700 11px/1 var(--mono); letter-spacing: -.01em; }

.tag-key {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border-color: color-mix(in srgb, var(--fg) 9%, transparent);
  color: var(--fg-dim);
}
.tag-capo {
  --capo-h: 200;
  /* Lightness is per-band, not one number for the whole ramp: hue is not
     perceptually flat, and the greens (h 140–168) come out visibly brighter than
     the blues and violets at the same HSL lightness. Held at 27% the green tags
     measured 3.7:1 on their own tint while capo 9 measured 8.7:1. Dropping just
     that band to 20% puts every value in the ramp over 4.5:1. */
  --capo-l: 27%;
  background: color-mix(in srgb, hsl(var(--capo-h) 82% 48%) 14%, transparent);
  border-color: color-mix(in srgb, hsl(var(--capo-h) 82% 48%) 34%, transparent);
  color: hsl(var(--capo-h) 72% var(--capo-l));
}
.tag-capo[data-capo="0"] {
  /* No capo: grey, no hue — but --fg-dim, not --fg-mute. It is still a number
     you read, and mute lands at 2.8:1. */
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border-color: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg-dim);
}
.tag-capo[data-capo="1"] { --capo-h: 200; }
.tag-capo[data-capo="2"] { --capo-h: 168; --capo-l: 20%; }
.tag-capo[data-capo="3"] { --capo-h: 140; --capo-l: 20%; }
.tag-capo[data-capo="4"] { --capo-h: 38;  }
.tag-capo[data-capo="5"] { --capo-h: 20;  }
.tag-capo[data-capo="6"] { --capo-h: 355; }
.tag-capo[data-capo="7"] { --capo-h: 330; }
.tag-capo[data-capo="8"] { --capo-h: 300; }
.tag-capo[data-capo="9"] { --capo-h: 268; }
/* On the selected row the whole item takes a green tint, and a green capo tag on
   a green tint measured 3.6:1. So the tags get a plain plate to sit on instead:
   the color code stays in the border and the numeral, and every hue in the ramp
   reads on the selected row exactly as well as it does anywhere else. */
.sidebar-item.active .tag { background: var(--bg-elev); }
.sidebar-empty { padding: 16px 12px; color: var(--fg-mute); font: 500 12px/1.5 var(--sans); }

/* Drag handle on the sidebar's right edge. Kept INSIDE the sidebar box (which
   is overflow:hidden) so its grab zone isn't clipped away. */
.sidebar-resize {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 9px;
  cursor: col-resize;
  z-index: 6;
}
.sidebar-resize::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 2px;
  background: transparent;
  transition: background var(--t-fast) var(--ease);
}
.sidebar-resize:hover::after,
body.resizing-sidebar .sidebar-resize::after { background: var(--accent); }
.app-shell.sidebar-collapsed .sidebar-resize { display: none; }
body.resizing-sidebar { cursor: col-resize; user-select: none; }

/* ---- Body: top bar + canvas ------------------------------------------- */
.app-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.app-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  flex-shrink: 0;
  padding: 0 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.topbar-toggle {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--fg-dim);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.topbar-toggle:hover { color: var(--fg); border-color: var(--border-hi); }
.topbar-toggle .bars { position: relative; width: 15px; height: 1.6px; border-radius: 2px; background: currentColor; }
.topbar-toggle .bars::before,
.topbar-toggle .bars::after { content: ""; position: absolute; left: 0; width: 15px; height: 1.6px; border-radius: 2px; background: currentColor; }
.topbar-toggle .bars::before { top: -4.5px; }
.topbar-toggle .bars::after  { top:  4.5px; }

.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 800 15px var(--sans);
  letter-spacing: -.015em;
  color: var(--fg);
  text-decoration: none;
  flex-shrink: 0;
}
.topbar-brand .glyph { width: 22px; height: 22px; display: inline-flex; }
.topbar-brand .glyph img { width: 100%; height: 100%; object-fit: contain; }
.topbar-nav {
  display: inline-flex;
  gap: 2px;
  margin-left: 6px;
  padding: 3px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.topbar-nav a {
  font: 700 12.5px var(--sans);
  letter-spacing: .01em;
  padding: 5px 15px;
  border-radius: 7px;
  color: var(--fg-dim);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.topbar-nav a:hover { color: var(--fg); }
.topbar-nav a.active { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-xs); }
.topbar-spacer { flex: 1; }
.topbar-site {
  font: 600 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-mute);
  text-decoration: none;
  flex-shrink: 0;
}
.topbar-site:hover { color: var(--accent); }

/* ---- Canvas: the bounded content surface ------------------------------ */
.app-canvas {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(115% 70% at 100% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%),
    var(--bg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 4%, transparent);
}
.app-canvas.scrollable { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; }

/* The page: bounded, centered content. Song fills; the rest is a column. */
.page { min-height: 100%; }
.page-song {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 20px 12px;
}
.page-welcome,
.page-reference,
.page-chord {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 26px 44px;
}

/* =========================================================================
   Dashboard (welcome / Songs-tab home)
   -----------------------------------------------------------------------------
   Three vertical bands:
     1. Generative ribbon canvas — stochastic flowing curves in family colors
     2. Stats tile grid — at-a-glance numerics about the songbook
     3. Song picker — premium-styled grid of all songs
========================================================================= */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 4px 24px;
}

/* --- Generative canvas band -------------------------------------------- */
.gen-band {
  position: relative;
  height: 220px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c-cyan-1) 8%, var(--bg-elev)) 0%,
    color-mix(in srgb, var(--c-violet-1) 6%, var(--bg-elev)) 100%);
  border: 1px solid var(--border);
}
.gen-band canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.gen-band .gen-overlay {
  position: absolute;
  inset: 0;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--bg-elev) 70%, transparent) 100%);
}
.gen-band .gen-overlay h1 {
  font: 900 28px var(--sans);
  letter-spacing: -.03em;
  margin: 0 0 4px;
  color: var(--fg);
}
.gen-band .gen-overlay .sub {
  font: 500 13px var(--sans);
  color: var(--fg-dim);
  max-width: 60ch;
}
.gen-band .gen-overlay .corner-stat {
  position: absolute;
  top: 16px; right: 20px;
  display: flex;
  gap: 14px;
  font: 700 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-mute);
}
.gen-band .gen-overlay .corner-stat b {
  display: block;
  font: 800 18px var(--sans);
  letter-spacing: -.02em;
  color: var(--fg);
  margin-top: 2px;
}

/* --- Stats tile grid --------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.stat-tile {
  position: relative;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.stat-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--kind, var(--accent));
  opacity: .7;
}
.stat-tile .k {
  font: 700 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-mute);
}
.stat-tile .v {
  font: 900 26px var(--sans);
  letter-spacing: -.025em;
  color: var(--fg);
  margin-top: 4px;
  line-height: 1;
}
.stat-tile .vsub {
  font: 500 11px var(--mono);
  color: var(--kind, var(--fg-dim));
  margin-top: 4px;
}

/* --- Picker section ---------------------------------------------------- */
.picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.picker .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.picker .head h2 {
  font: 800 16px var(--sans);
  letter-spacing: -.015em;
  margin: 0;
}
.picker .head .sub {
  font: 600 11px var(--mono);
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.picker-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--fg);
  transition: transform var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.picker-card:hover {
  transform: translateY(-1px);
  border-color: var(--c-cyan-1);
  background: color-mix(in srgb, var(--c-cyan-1) 4%, var(--bg-elev));
}
.picker-card .swatch {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--c-cyan-1), var(--c-mint-1));
  flex-shrink: 0;
}
.picker-card .info { min-width: 0; flex: 1; }
.picker-card .info .t {
  font: 700 13.5px var(--sans);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picker-card .info .a {
  font: 500 11px var(--mono);
  color: var(--fg-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picker-card .meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* =========================================================================
   Reference — legends, snapshot, appearance (shared key blocks)
   ========================================================================= */
.legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.legend-item .swatch {
  width: 14px; height: 14px;
  border-radius: 4px;
  background: var(--kind);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kind) 40%, transparent);
}
.legend-item .label {
  font: 700 12px var(--sans);
  color: var(--fg);
  letter-spacing: -.01em;
}
.legend-item .desc {
  font: 500 11px var(--mono);
  color: var(--fg-mute);
}
.legend-item .text { display: flex; flex-direction: column; min-width: 0; }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.summary-cell {
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.summary-cell .v {
  font: 900 22px var(--sans);
  letter-spacing: -.02em;
  color: var(--kind, var(--fg));
}
.summary-cell .k {
  font: 600 10px var(--mono);
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-top: 2px;
}


/* =========================================================================
   Song view — top bar
   ========================================================================= */
/* Header is deliberately minimal: title + tools only. Progressions live in
   their own row below (songs have wildly different prog counts — giving them
   a dedicated wrapping row keeps the header size predictable). */
.song-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  flex-shrink: 0;
}
.song-bar .title-block { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.song-bar .title {
  font: 800 20px var(--sans);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.song-bar .artist {
  font: 500 13px var(--sans);
  color: var(--fg-dim);
  white-space: nowrap;
}

/* Progression row — its own full-width band under the header. */
.prog-row {
  display: flex;
  align-items: center;
  gap: 12px;
  row-gap: 5px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 1px 0 6px;
}
.prog-row .prog-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.prog-row .prog-label {
  font: 700 9.5px var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--kind, var(--fg-mute));
  padding-right: 4px;
  border-right: 1px solid var(--border);
  margin-right: 2px;
}
.prog-row .prog-divider {
  color: var(--fg-mute);
  font-size: 14px;
  user-select: none;
}
.prog-row .arrow {
  font: 500 11px var(--mono);
  color: var(--fg-mute);
}
.prog-row .chord {
  padding: 3px 9px;
  background: var(--kind-soft, var(--accent-soft));
  color: var(--kind, var(--accent));
  border-radius: 6px;
  font: 700 12px var(--mono);
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
}

.tool-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tool-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.tool-group .label {
  font: 700 11px var(--mono);
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 0 5px;
}
.tool-group .icon-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
}
.tool-group .icon-label img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}.tool-group .value {
  font: 800 15px var(--mono);
  color: var(--fg);
  min-width: 2.8ch;
  text-align: center;
}
.tool-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--fg);
  font: 700 15px var(--mono);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.tool-btn:hover { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.tool-btn.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.tool-btn.standalone { background: var(--bg-soft); }
.tool-btn.wide {
  width: auto;
  padding: 0 10px;
  font: 700 11px var(--sans);
  letter-spacing: .02em;
}

/* =========================================================================
   Song view — chord-shapes strip (above lyrics)
   ========================================================================= */
/* Chord minis (flexible, h-scroll on overflow) + a Notes toggle on the right.
   Strumming + song notes are collapsed by default — still there, one click
   away — so the play surface stays clean. */
.song-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 5px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  flex-shrink: 0;
  min-height: 0;
}
.chord-strip-wrap {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: flex-end;
  scrollbar-width: thin;
  scrollbar-color: var(--border-hi) transparent;
}
.chord-strip-wrap::-webkit-scrollbar { height: 6px; }
.chord-strip-wrap::-webkit-scrollbar-thumb {
  background: var(--border-hi);
  border-radius: 3px;
}
.chord-strip {
  display: inline-flex;
  gap: 12px;
  align-items: flex-end;
  flex-shrink: 0;       /* don't compress the row */
  padding: 2px 4px 4px 0;
}
.chord-strip .mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  cursor: pointer;
  flex-shrink: 0;
}
.chord-strip .mini .name { font: 700 11px var(--sans); white-space: nowrap; }
.notes-toggle {
  flex-shrink: 0;
  font: 700 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-dim);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.notes-toggle:hover { color: var(--fg); border-color: var(--border-hi); }
.notes-toggle.open { color: var(--accent); border-color: var(--accent); }
.notes-toggle .chev { font-size: 12px; }

.notes-panel {
  flex-shrink: 0;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.notes-panel .strum {
  font: 700 12px var(--mono);
  color: var(--fg);
  letter-spacing: .04em;
}
.notes-panel .body {
  font: 500 12.5px/1.5 var(--sans);
  color: var(--fg-dim);
}

/* =========================================================================
   Song view — dynamic-column lyrics
   ========================================================================= */
.lyrics-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;       /* if even the tightest fit overflows, scroll */
  position: relative;
}
.section-label {
  font: 700 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--kind, var(--accent));
  background: var(--kind-soft, transparent);
  padding: 2px 8px;
  border-radius: 99px;
  margin-bottom: 7px;
  display: inline-block;
}
/* Lines of MUSIC: each .mrow spans the full canvas and is divided into K
   equal time slots (--k) — 1fr grid cells, so the same amount of musical
   time gets exactly the same width at every window size. NOTATION ON TOP
   (chord names + six-string staff with fingering dots), lyrics UNDERNEATH
   the staff like a real songbook — small, tight, tucked to their measure.
   The two strips are grids with identical columns, so slot boundaries
   align; lyric text wraps INSIDE its slot and can never distort the time
   grid. Bar lines are the slot borders on the lane strip. The notation is
   what owns the vertical space: density steps shrink the TEXT, never the
   staff. */
.msection { margin-bottom: 10px; }
.mrow { margin-bottom: 6px; }
.mrow .mlyrics,
.mrow .mlanes {
  display: grid;
  grid-template-columns: repeat(var(--k), 1fr);
}
.mrow .mlanes { margin-top: 14px; }   /* headroom for the floating chord names */
.mrow.tabrow .mlanes { margin-top: 25px; }   /* + the annotation tier */
.mrow .mlane {
  position: relative;
  height: 26px;                 /* 6 strings, 5px pitch */
  /* the six strings, continuous across the whole line */
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--fg-mute) 45%, transparent) 0 1px,
    transparent 1px 5px);
  background-size: 100% 26px;
  background-repeat: no-repeat;
  /* bar line on every slot boundary */
  border-left: 1px solid color-mix(in srgb, var(--fg-mute) 60%, transparent);
}
.mrow .mlane:last-child {
  border-right: 1px solid color-mix(in srgb, var(--fg-mute) 60%, transparent);
}
.mrow .hit {
  position: absolute;
  top: 0; bottom: 0;
  left: 6px;
  width: 0;                     /* anchor only; children overflow visibly */
}
.mrow .hit-name {
  position: absolute;
  bottom: calc(100% + 2px);
  left: -2px;
  font: 700 11px var(--mono);
  letter-spacing: 0;
  color: var(--kind, var(--accent));
  cursor: pointer;
  padding: 0 2px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease);
}
.mrow .hit-name:hover { background: var(--kind-soft, var(--accent-soft)); }
.mrow .dot {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--kind, var(--accent));
}
.mrow .dot.open {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--kind, var(--accent));
}
/* Real tab notes ON the staff: fret numbers (and technique marks like 0h2)
   sitting on their string line at their time position within the measure. */
.mrow .tab-note {
  position: absolute;
  transform: translate(-1px, -50%);
  font: 700 8.5px var(--mono);
  line-height: 1;
  color: var(--fg);
  background: var(--bg);        /* knock the string out behind the digit */
  padding: 0 1px;
  border-radius: 2px;
  z-index: 1;
  white-space: nowrap;
}
.mrow .tab-note.mute { color: var(--fg-mute); font-weight: 500; }
.mrow .tab-label {
  position: absolute;
  bottom: calc(100% + 2px);
  font: 700 10px var(--mono);
  color: var(--kind, var(--accent));
  white-space: nowrap;
}
.mrow .tab-label.ann {
  bottom: calc(100% + 13px);   /* annotation tier, above the chord labels */
  font: 600 9px var(--mono);
  color: var(--fg-mute);
  font-style: italic;
}
.mrow .mlyric {
  font: 500 11px/1.35 var(--sans);
  color: var(--fg-dim);         /* text recedes; the notation leads */
  white-space: pre-line;
  padding: 2px 8px 0 7px;
  min-width: 0;
  hyphens: none;                /* never split a word a singer has to read */
}

/* Density steps used by fitMusic() — they shrink the TEXT and the gaps,
   NEVER the notation (staff height, dots, chord names stay constant), and
   the time grid's proportions are untouchable. */
.lyrics.density-tight   .mrow .mlyric { font-size: 10.5px; }
.lyrics.density-tight   .mrow { margin-bottom: 7px; }
.lyrics.density-tight   .msection { margin-bottom: 10px; }
.lyrics.density-tight   .tab-block { font-size: 10px; }
.lyrics.density-tighter .mrow .mlyric { font-size: 10px; line-height: 1.3; }
.lyrics.density-tighter .mrow { margin-bottom: 6px; }
.lyrics.density-tighter .mrow .mlanes { margin-top: 14px; }
.lyrics.density-tighter .msection { margin-bottom: 9px; }
.lyrics.density-tighter .tab-block { font-size: 9px; }
.lyrics.density-min     .mrow .mlyric { font-size: 9.5px; line-height: 1.25; }
.lyrics.density-min     .mrow { margin-bottom: 5px; }
.lyrics.density-min     .mrow .mlanes { margin-top: 13px; }
.lyrics.density-min     .msection { margin-bottom: 8px; }
.lyrics.density-min     .section-label { font-size: 9px; margin-bottom: 3px; }
.lyrics.density-min     .tab-block { font-size: 8.5px; }

/* Tab block (fingerpicking). Scrolls inside its column if it's wider than
   the column — it's excluded from fitColumns' width measurement so one wide
   intro tab can't force the whole song into fewer columns. */
.tab-block {
  font: 500 11px/1.35 var(--mono);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 10px;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  color: var(--fg);
  break-inside: avoid;
}

/* =========================================================================
   Chord library (full grid)
   ========================================================================= */
/* === Chord library — premium edition ====================================
   Sticky letter-banded grid with a top header that includes a color legend.
   Tiles use a recessed elevated look: gradient top bar, soft shadow, name
   in the family color, neutral diagram color (so all diagrams read equally).
========================================================================== */
.chord-legend {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.chord-legend .swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11px var(--sans);
  color: var(--fg-dim);
}
.chord-legend .swatch::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--kind);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kind) 50%, transparent);
}

.letter-section { margin-bottom: 26px; }
.letter-section .letter {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 900 18px var(--sans);
  color: var(--fg);
  letter-spacing: -.02em;
  margin: 0 4px 10px;
}
.letter-section .letter::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border) 0%, transparent 100%);
}
.chord-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.chord-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 10px;
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--fg);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.chord-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kind, var(--accent)) 0%, var(--kind-2, var(--accent-2)) 100%);
}
.chord-tile:hover {
  transform: translateY(-2px);
  border-color: var(--kind, var(--accent));
  box-shadow: var(--shadow-md);
}
.chord-tile .name {
  font: 800 17px var(--sans);
  letter-spacing: -.02em;
  color: var(--kind, var(--fg));
}
.chord-tile .sub {
  font: 600 10px var(--mono);
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-top: 2px;
}
/* In the library grid, render chord diagrams in a neutral color so the
   tile's family-coded top bar + name stay the dominant signal. */
.chord-tile .chord-diagram .dot      { fill: var(--fg-dim); }
.chord-tile .chord-diagram .dot-text { fill: var(--bg); }
.chord-tile .sub {
  font: 600 10px var(--mono);
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* Chord focus (single chord page) */
.chord-focus {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
  padding: 8px;
}
.chord-focus .big-name {
  font: 900 56px var(--sans);
  letter-spacing: -.04em;
  line-height: 1;
}
.chord-focus .meta {
  font: 600 11px var(--mono);
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-top: 6px;
}
.chord-focus .shapes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.chord-focus .shape-card {
  padding: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.chord-focus .shape-card .shape-name {
  font: 600 10px var(--mono);
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.chord-focus .used-in-list {
  margin-top: 14px;
  font: 500 13px var(--sans);
  color: var(--fg-dim);
}
.chord-focus .used-in-list a {
  color: var(--accent);
  text-decoration: none;
  margin-right: 10px;
}
.chord-focus .used-in-list a:hover { text-decoration: underline; }

/* Chord diagram (SVG) styling lives in chord-shapes.css, beside the renderer
   that emits it — shared with Theory Lab. */

/* =========================================================================
   Chord popover
   ========================================================================= */
.chord-pop {
  position: absolute;
  z-index: 50;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: pop-in .14s var(--ease-out);
}
.chord-pop .pop-info { display: flex; flex-direction: column; gap: 3px; min-width: 7ch; }
.chord-pop .pop-info .name { font: 800 18px var(--sans); }
.chord-pop .pop-info .shape-name { font: 600 9.5px var(--mono); color: var(--fg-mute); text-transform: uppercase; letter-spacing: .14em; }
.chord-pop .pop-info .alt-link { font: 600 11px var(--sans); color: var(--accent); cursor: pointer; text-decoration: none; }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   Metronome dots
   ========================================================================= */
.metronome { display: inline-flex; align-items: center; gap: 4px; }
.metronome .beat-dots { display: inline-flex; gap: 2px; margin-left: 3px; }
.metronome .beat-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bg-deep);
  transition: background .08s linear, transform .08s linear;
}
.metronome .beat-dots span.on { background: var(--accent); transform: scale(1.4); }

/* =========================================================================
   Section review flags — good / misaligned / off
   -----------------------------------------------------------------------------
   A guitarist's QA overlay: each section header carries a 3-state control, and
   the whole app reads the review status back through --rc (review color). The
   colors are deliberately semantic (green/amber/red) and independent of the
   section-kind palette, so "this section is wrong" never gets confused with
   "this section is a chorus".
========================================================================= */
.rf-good        { --rc: #34d399; }
.rf-misaligned  { --rc: #fbbf24; }
.rf-off         { --rc: #f87171; }
.msection[data-review="good"]       { --rc: #34d399; }
.msection[data-review="misaligned"] { --rc: #fbbf24; }
.msection[data-review="off"]        { --rc: #f87171; }

.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.section-head .section-label { margin-bottom: 0; }

.review-flags {
  display: inline-flex;
  gap: 2px;
  opacity: .5;
  transition: opacity var(--t-fast) var(--ease);
}
.section-head:hover .review-flags,
.review-flags:focus-within { opacity: 1; }
.msection[data-review] .review-flags { opacity: 1; }

.rf {
  width: 18px; height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 11px var(--mono);
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-elev);
  color: var(--fg-mute);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.rf:hover { color: var(--rc); border-color: var(--rc); }
.rf.active { background: var(--rc); border-color: var(--rc); color: #0a0f1a; }

/* Flagged sections: ring the label in the review color, no layout shift. */
.msection[data-review] .section-label { box-shadow: 0 0 0 1.5px var(--rc); }
.msection[data-review="off"] .section-label { text-decoration: line-through; text-decoration-thickness: 1px; }
.lyrics.density-min .section-head { margin-bottom: 3px; }

/* Per-song review summary in the chord strip: proportional bar + count. */
.review-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.review-summary .rs-track {
  display: flex;
  width: 84px; height: 6px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--bg-deep);
  box-shadow: inset 0 0 0 1px var(--border);
}
.review-summary .rs-seg { height: 100%; min-width: 0; }
.review-summary .rs-seg.rs-good { background: #34d399; }
.review-summary .rs-seg.rs-mis  { background: #fbbf24; }
.review-summary .rs-seg.rs-off  { background: #f87171; }
.review-summary .rs-seg.rs-un   { background: transparent; }
.review-summary .rs-text {
  font: 700 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-mute);
  white-space: nowrap;
}
.legend-item.review-legend .rf { cursor: default; }

/* =========================================================================
   Segmented control (chord grouping · scale labels)
   ========================================================================= */
.seg {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.seg button {
  font: 700 11px var(--sans);
  letter-spacing: .02em;
  padding: 5px 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg button:hover { color: var(--fg); }
.seg button.active { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-xs); }

/* =========================================================================
   Chord library — reorganized (head tools + family grouping)
   ========================================================================= */
.chord-head-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.family-section { margin-bottom: 26px; }
.family-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 4px 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.family-head .family-swatch {
  width: 12px; height: 12px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--kind), var(--kind-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kind) 40%, transparent);
  flex-shrink: 0;
}
.family-head h2 {
  font: 800 16px var(--sans);
  letter-spacing: -.02em;
  margin: 0;
  color: var(--kind);
}
.family-head .family-desc {
  font: 500 11px var(--mono);
  color: var(--fg-mute);
  flex: 1;
  min-width: 0;
}
.family-head .family-count {
  font: 700 11px var(--mono);
  color: var(--fg-dim);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 2px 9px;
  flex-shrink: 0;
}
.chord-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--fg-mute);
  font: 500 14px var(--sans);
  margin: 0 4px 20px;
}
.chord-empty b { color: var(--fg-dim); font: 700 13px var(--mono); }

/* =========================================================================
   Movable barre shapes panel — the marquee of the Chords page
   -----------------------------------------------------------------------------
   Barre chords earn their own home because movability is what they ARE: one
   grip = a different chord at every fret. A warm amber→coral edge sets the
   panel apart from the fixed library below it; each card carries a live fret
   slider that renames the chord as you drag.
========================================================================= */
.barre-panel {
  position: relative;
  margin: 0 4px 30px;
  padding: 18px 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-amber-1) 7%, var(--bg-soft)) 0%,
    var(--bg-soft) 60%);
}
.barre-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-amber-1), var(--c-coral-1));
}
.barre-head h2 {
  font: 800 18px var(--sans);
  letter-spacing: -.02em;
  margin: 0 0 4px;
}
.barre-head p {
  font: 500 12.5px/1.55 var(--sans);
  color: var(--fg-dim);
  max-width: 74ch;
  margin: 0;
}
.barre-family { margin-top: 16px; }
.barre-family-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 700 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg);
  margin-bottom: 8px;
}
.barre-family-label span {
  font: 500 10px var(--mono);
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-mute);
}
.barre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.barre-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.barre-card:hover {
  transform: translateY(-2px);
  border-color: var(--kind, var(--accent));
  box-shadow: var(--shadow-md);
}
.barre-card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.barre-quality {
  font: 700 9px var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-mute);
}
.barre-name {
  font: 800 20px var(--sans);
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--kind, var(--accent));
  min-height: 21px;
}
.barre-diagram-wrap { line-height: 0; }
/* .barre-diagram internals are styled in chord-shapes.css. */
.barre-slider {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 2px;
}
.barre-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 4px;
  border-radius: 99px;
  background: var(--bg-deep);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
}
.barre-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--kind, var(--accent));
  border: 2px solid var(--bg-elev);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  cursor: pointer;
}
.barre-slider input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--kind, var(--accent));
  border: 2px solid var(--bg-elev);
  cursor: pointer;
}
.barre-slider input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.barre-slider .bs-fret {
  font: 600 10px var(--mono);
  color: var(--fg-mute);
  white-space: nowrap;
  min-width: 3.4ch;
  text-align: right;
}
.barre-slider .bs-fret b { color: var(--fg); font: 800 12px var(--mono); }

/* =========================================================================
   Scale explorer — fretboard reference on the Reference page
   ========================================================================= */
.sb-scale-notes { display: flex; gap: 5px; flex-wrap: wrap; }
.sb-scale-notes .sn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  line-height: 1.15;
}
.sb-scale-notes .sn b { font: 800 13px var(--sans); color: var(--fg); }
.sb-scale-notes .sn i { font: 600 9px var(--mono); font-style: normal; color: var(--fg-mute); }
.sb-scale-notes .sn.root { background: var(--accent-soft); border-color: var(--accent); }
.sb-scale-notes .sn.root b, .sb-scale-notes .sn.root i { color: var(--accent); }

.sb-neck-controls {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.sb-ctrl { display: flex; flex-direction: column; gap: 5px; }
.sb-ctrl label {
  font: 700 9px var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-mute);
}
.sb-ctrl-roots { flex: 1; min-width: 240px; }
.sb-roots { display: flex; gap: 3px; flex-wrap: wrap; }
.sb-root {
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-elev);
  color: var(--fg-dim);
  font: 700 12px var(--mono);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.sb-root:hover { color: var(--fg); border-color: var(--border-hi); }
.sb-root.active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-xs); }
select#sb-scale {
  font: 600 12px var(--sans);
  padding: 7px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  cursor: pointer;
  min-width: 170px;
}
select#sb-scale:focus { outline: none; border-color: var(--accent); }

.sb-neck-scroll { overflow-x: auto; padding: 2px 0; scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; }
.sb-neck { width: 100%; min-width: 720px; height: auto; display: block; }
.sb-fret   { stroke: var(--border-hi); stroke-width: 1; }
.sb-nut    { stroke: var(--fg-dim); stroke-width: 4; }
.sb-string { stroke: color-mix(in srgb, var(--fg-mute) 70%, transparent); }
.sb-inlay  { fill: color-mix(in srgb, var(--fg-mute) 35%, transparent); }
.sb-fretnum { fill: var(--fg-mute); font: 600 11px var(--mono); text-anchor: middle; }
.sb-note circle {
  fill: color-mix(in srgb, var(--accent) 20%, var(--bg-elev));
  stroke: color-mix(in srgb, var(--accent) 55%, transparent);
  stroke-width: 1.4;
}
.sb-note text { fill: var(--fg); font: 700 10px var(--sans); text-anchor: middle; dominant-baseline: central; }
.sb-note.root circle { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 6px var(--accent-glow)); }
.sb-note.root text { fill: var(--accent-fg); }

.settings-note {
  font: 500 12px/1.5 var(--sans);
  color: var(--fg-mute);
  margin: 10px 2px 0;
}

/* =========================================================================
   Facelift — polish passes on shared surfaces
   ========================================================================= */
/* Themed thin scrollbars on the scrolling canvas + sidebar list. */
.app-canvas.scrollable::-webkit-scrollbar,
.app-sidebar-list::-webkit-scrollbar { width: 10px; }
.app-canvas.scrollable::-webkit-scrollbar-thumb,
.app-sidebar-list::-webkit-scrollbar-thumb {
  background: var(--border-hi);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 99px;
}
.app-canvas.scrollable::-webkit-scrollbar-thumb:hover,
.app-sidebar-list::-webkit-scrollbar-thumb:hover { background: var(--fg-mute); background-clip: padding-box; }

/* Active song in the sidebar gets a leading accent tick. */
.sidebar-item { position: relative; }
.sidebar-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent-2);   /* --kind is root-frozen cyan — see .sidebar-item.active */
}

/* Stat tiles lift a touch on hover — the dashboard should feel alive. */
.stat-tile { transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.stat-tile:hover { transform: translateY(-2px); border-color: var(--kind, var(--border-hi)); }

/* Song title gets a subtle gradient lift. */
.song-bar .title {
  background: linear-gradient(120deg, var(--fg) 0%, color-mix(in srgb, var(--accent) 70%, var(--fg)) 140%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .barre-card, .stat-tile, .chord-tile, .picker-card { transition: none; }
  .barre-card:hover, .stat-tile:hover { transform: none; }
  .app-shell { transition: none; }
}

/* =========================================================================
   Reference page — one bounded document, four tethered sections
   ========================================================================= */
.ref-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ref-head-titles h1 {
  font: 900 28px var(--sans);
  letter-spacing: -.03em;
  margin: 0 0 4px;
}
.ref-head-titles p {
  font: 500 13px var(--sans);
  color: var(--fg-dim);
  max-width: 62ch;
  margin: 0;
}

/* Sticky sub-nav — the tether that keeps a long reference from drifting. */
.ref-nav {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  gap: 3px;
  margin: 0 0 20px;
  padding: 9px 0;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.ref-nav a {
  font: 700 12px var(--sans);
  letter-spacing: .01em;
  padding: 6px 14px;
  border-radius: 8px;
  color: var(--fg-dim);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ref-nav a:hover { color: var(--fg); background: var(--bg-elev); }
.ref-nav a.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.ref-body { display: flex; flex-direction: column; gap: 20px; }
.ref-section { scroll-margin-top: 60px; }
.ref-section > .barre-panel { margin: 0; }   /* the section owns the spacing now */

/* The panel — the container that makes content feel placed, not floating. */
.panel {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px 18px;
  box-shadow: var(--shadow-xs);
}
.ref-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ref-section-title h2 {
  font: 800 18px var(--sans);
  letter-spacing: -.02em;
  margin: 0 0 3px;
}
.ref-section-title .ref-section-meta {
  font: 600 11px var(--mono);
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.chord-search input {
  font: 500 13px var(--sans);
  padding: 7px 12px;
  min-width: 190px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.chord-search input:focus { border-color: var(--accent); }
.panel .chord-legend { margin: 0 0 14px; }
.panel .chord-lib-body .letter-section:last-child,
.panel .chord-lib-body .family-section:last-child { margin-bottom: 0; }

.keys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.key-block h4 {
  font: 700 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-mute);
  margin: 0 0 8px;
}
.key-block .legend-grid { grid-template-columns: 1fr; }
.ref-subhead { margin: 20px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.ref-subhead h4 {
  font: 700 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-mute);
  margin: 0;
}

/* =========================================================================
   Song view — frame the music so it reads as a contained sheet
   ========================================================================= */
.page-song .lyrics-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 14px 2px;
  background:
    radial-gradient(140% 55% at 50% 0%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 70%);
}

/* Chord-focus page sits on a panel too. */
.page-chord .chord-focus {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: var(--shadow-xs);
}