/* ═══════════════════════════════════════════════════════════════════
   Fretly — Routes v2 (Scale-Explorer-style skin) — SHARED vocabulary
   ═══════════════════════════════════════════════════════════════════

   This file is the single source of truth for the v2 skin used by BOTH
   the Scales route (#route-scales) AND the Chords route (#route-chords).

   Phase 8P extracted these rules out of scales-v2.css and widened every
   route-scope (#route-scales) + toolbar-scope (#scalesToolbar) selector
   with :is(…, …) so the same rules drive both pages.  Everything route-
   specific (Scales-only hide rules, Chords-only hide rules, panel grid
   wrappers) remains in scales-v2.css / chords-v2.css respectively.

   Contract
   --------
   Every rule in this file is scoped under:
     :is(#route-scales, #route-chords) …
   These rules apply UNCONDITIONALLY (v2 is the only style now).  The old
   `data-scales-style` toggle (v1 ↔ v2) was removed 2026-07-10; the former
   `html[data-scales-style="v2"]` prefix was stripped from every selector.
   No rule here may style anything outside these two routes.

   Class-name convention: classes injected by the SHARED v2 JS
   (route-toolbar-enhancer.js + route-search-drawer.js) use a
   `.page-*` prefix so no class name reads as page-specific:
       .page-v2-header …
       .page-search-cell / .page-search-btn / .page-search-drawer …

   Organisation
   ------------
   1) Route shell + toolbar (mega-toolbar look)
   2) Page headline / action bar
   3) Piano + Circle row restyle
   4) Fretboard cards
   5) Info panels
   6) Sub-relations accordion
   7) Small utilities
   =================================================================== */


/* ─────────────────────────────────────────────────────────────────
   1) Route shell — page title + subtitle row (SE-style header)
   ───────────────────────────────────────────────────────────────── */

:is(#route-scales, #route-chords) .page-v2-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  /* Equal breathing room above and below the title row — the gap up to
     the navbar matches the gap down to the control bar. */
  padding: 14px 2px 14px;
  flex-wrap: wrap;
}
:is(#route-scales, #route-chords) .page-v2-header__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  line-height: 1.1;
}
:is(#route-scales, #route-chords) .page-v2-header__sub {
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
}
:is(#route-scales, #route-chords) .page-v2-header__spacer {
  flex: 1;
  min-width: 0;
}

/* Icon cluster (columns + circle + piano + info) moved from the toolbar
   into the page-title row on the right.  The .toolbar-right-group--in-header
   modifier is only set while the node lives in the header; route-toolbar-
   enhancer.js toggles it.  The base toolbar-right-group rules (border +
   gap) are neutralised so the cluster sits cleanly inside the header row. */
:is(#route-scales, #route-chords) .page-v2-header .toolbar-right-group--in-header {
  border-right: none;
  padding: 0;
  margin-left: auto;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
}


/* ─────────────────────────────────────────────────────────────────
   2) Toolbar as SE-style ctrl grid: single horizontal bar with
      vertical dividers between cells.
   ───────────────────────────────────────────────────────────────── */

/* Toolbar is a CSS Grid with uniform tracks — this is what keeps the
   vertical separators rock-solid aligned across wrapped rows AND keeps
   every cell the same width.

   Layout rule (via `auto-fit`):
     • Full window width: all visible filter cells sit on a single row.
     • Medium widths: auto-fit packs as many tracks as fit at the 160px
       minimum; remaining cells wrap to row 2 with identical track widths
       on both rows so vertical separators still align column-for-column.
     • Narrow widths (< ~640px): wraps to 3+ rows.
     • Phones (< 480px): explicit 2-column stack.

   `minmax(160px, 1fr)` — 160px is the crossover that matches the
   user's rule: 1 row as much as possible, 2 rows only when we NEED
   them, no row 3 unless really tiny.

   Cell-child min-widths are zeroed below (.ghost-toggle, #keySelect,
   .form-readonly, selects width:100%) so no cell's intrinsic
   min-content exceeds the 160px floor — that's what guarantees
   auto-fit's track count matches floor(container/160) exactly. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: stretch;
  gap: 0;
  box-shadow: none;
  /* Match the gap the info-panels use between each other so the control
     bar sits the same visual distance above the fretboard card as the
     fretboard card sits above the first info panel. */
  margin-bottom: var(--panel-gap, 16px);
  position: relative;
}
/* Phone — 2-col stack to keep labels/controls readable at < 480px. */
@media (max-width: 480px) {
  :is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Subtle top rule over the whole strip (like SE's border-bottom on header) */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar)::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--border);
}

/* Each .form-group becomes an SE-style cell — label on top, control below,
   right border as a vertical divider.

   Padding is intentionally asymmetric: 10px left keeps the label and control
   close to the left separator so the toolbar feels dense and scan-friendly.
   12px right provides breathing room before the next separator.
   Controls use width:100% so every cell's control spans the same width as the
   Fingering dropdown — uniform "button-sized" appearance across all cells. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  /* site.css .form-group sets max-width:200px for the v1 flex layout.
     In the v2 grid the tracks can exceed 200px (especially in Chords with
     fewer cells), so we lift the cap so cells always fill their tracks. */
  max-width: none;
  margin: 0;
  padding: 8px 12px 8px 10px;
  border-right: 1px solid var(--border);
  justify-content: flex-start;
  /* Controls fill the full cell width (width:100% on children below), so
     align-items:stretch is correct here — don't fight the width. */
  align-items: stretch;
  overflow: hidden;
}
/* Narrow-width tuning: tighten cell padding so more cells fit per row. */
@media (max-width: 1100px) {
  :is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group {
    padding: 6px 10px 6px 8px;
  }
}
@media (max-width: 820px) {
  :is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group {
    padding: 6px 8px 6px 6px;
    gap: 4px;
  }
}
/* Uppercase mini-label on top — SE's .se-ctrl-label.
   No padding-left: the label is flush with the cell's left content edge,
   matching the left edge of the control below it.  Aligning the label's
   glyph with the control's glyph (via padding-left:11px) looked OK on
   selects but made ghost-toggle pill cells feel staggered and off-axis. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
  padding-left: 0;
  line-height: 1;
}
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > select,
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > input,
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > .form-readonly {
  font-size: 13px;
  padding: 4px 22px 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-weight: 500;
  height: 30px;
  line-height: 1.5;
  box-sizing: border-box;
  min-width: 0;
  /* width:100% makes every select/input fill its cell completely, matching
     the uniform visual width of the Fingering dropdown. */
  width: 100%;
}
/* Form-readonly span has no native select chevron — strip the reserved
   space so the cell hugs its content. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > .form-readonly {
  padding-right: 10px;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > select:focus,
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(232,135,74,0.15);
}

/* Right-side icon group sits inside its own cell — tight spacing, no divider gap.
   margin-left:auto pins the icon-group + trailing STYLE chip to the right
   edge of whichever row they end up on. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .toolbar-right-group {
  padding: 8px 10px;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* Primary + secondary buttons inside cells */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > button,
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > .btn {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
  font-family: var(--font);
  font-weight: 600;
}
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > button:hover,
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > .btn:hover {
  background: var(--surface-2);
  color: var(--text);
}
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > button.active,
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > .btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Last *visible* cell — strip its right-border so it doesn't double-up
   against the outer toolbar border on full single-row display.
   Applied by last-visible-cell.js (shared helper).

   At narrower viewports the toolbar wraps into multiple rows. On wrapped
   rows the "last visible cell overall" may not be the last cell on its
   visual row, so restoring the border there avoids a half-open cell edge. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group.is-last-visible-cell {
  border-right: none;
}
/* Restore the border once the toolbar is narrow enough to wrap (roughly
   when 7 × 160px cells can no longer fit on one row). */
@media (max-width: 1200px) {
  :is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group.is-last-visible-cell {
    border-right: 1px solid var(--border);
  }
}


/* ─────────────────────────────────────────────────────────────────
   4) Piano + Circle row — make the cards feel like se-card
   ───────────────────────────────────────────────────────────────── */

:is(#route-scales, #route-chords) .piano-circle-row > .piano-card,
:is(#route-scales, #route-chords) .piano-circle-row > .circle-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

/* Tighter circle card sizing, matches .se-circle-card */
:is(#route-scales, #route-chords) .piano-circle-row > .circle-card {
  padding: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
:is(#route-scales, #route-chords) .piano-circle-row > .circle-card svg {
  width: 100%;
  max-width: 200px;
  height: auto;
}


/* ─────────────────────────────────────────────────────────────────
   5) Fretboard & boards-area cards get a unified .se-card feel
   ───────────────────────────────────────────────────────────────── */

:is(#route-scales, #route-chords) .boards-area,
:is(#route-scales, #route-chords) .info-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}


/* ─────────────────────────────────────────────────────────────────
   6) Info panels → card-title + card-body pattern
   ───────────────────────────────────────────────────────────────── */

/* Header bar becomes an SE card-title strip — uppercase, subtle */
:is(#route-scales, #route-chords) .info-panel .info-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  background: transparent;
}
:is(#route-scales, #route-chords) .info-panel .info-panel-header h3,
:is(#route-scales, #route-chords) .info-panel .info-panel-header .info-panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}

/* Section headers inside a panel */
:is(#route-scales, #route-chords) .info-panel .info-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 20px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
:is(#route-scales, #route-chords) .info-panel .info-section-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 20px 8px;
  opacity: 0.6;
}

/* Column-control widget matches the SE rel-col-ctrl vibe */
:is(#route-scales, #route-chords) .info-panel .info-col-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0;
}
:is(#route-scales, #route-chords) .info-panel .info-col-minus,
:is(#route-scales, #route-chords) .info-panel .info-col-plus {
  width: 24px; height: 22px;
  border: none;
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
:is(#route-scales, #route-chords) .info-panel .info-col-minus:hover,
:is(#route-scales, #route-chords) .info-panel .info-col-plus:hover {
  background: var(--surface-2);
  color: var(--text);
}
:is(#route-scales, #route-chords) .info-panel .info-col-input {
  width: 26px; height: 22px;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  text-align: center;
  font-size: 11px; font-weight: 600;
  color: var(--text);
  font-family: var(--font);
  padding: 0;
}

/* Gallery/open-diagram button inside the panel header gets an SE look */
:is(#route-scales, #route-chords) .info-panel .info-panel-gallery-btn {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  cursor: pointer;
}
:is(#route-scales, #route-chords) .info-panel .info-panel-gallery-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* Body of the info panel */
:is(#route-scales, #route-chords) .info-panel .info-grid {
  padding: var(--sp-4) var(--sp-5);
  column-gap: 20px;
  column-rule: 1px solid transparent;
}

/* Each chord/scale pill gets a softer card feel */
:is(#route-scales, #route-chords) .info-panel .info-grid .rel-type-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  line-height: 1.5;
  break-inside: avoid;
}
:is(#route-scales, #route-chords) .info-panel .info-grid .rel-type-badge {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
:is(#route-scales, #route-chords) .info-panel .info-grid .rel-type-roots {
  flex: 1;
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}
:is(#route-scales, #route-chords) .info-panel .info-grid .rel-root-link {
  cursor: pointer;
  transition: opacity .12s;
}
:is(#route-scales, #route-chords) .info-panel .info-grid .rel-root-link:hover {
  text-decoration: underline;
  opacity: 0.8;
}


/* ─────────────────────────────────────────────────────────────────
   7) Sub-scales / Sub-chords — accordion-inspired look
   ───────────────────────────────────────────────────────────────── */

:is(#route-scales, #route-chords) .info-panel.is-subpanel .info-section-header {
  padding-top: 10px;
}
:is(#route-scales, #route-chords) .info-panel.is-subpanel .info-section-header + .info-grid {
  padding-top: 6px;
}


/* ─────────────────────────────────────────────────────────────────
   8) Small utilities
   ───────────────────────────────────────────────────────────────── */

/* Smoother, less-harsh tables inside info panels */
:is(#route-scales, #route-chords) .info-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
:is(#route-scales, #route-chords) .info-panel table th {
  text-align: left;
  color: var(--text-2);
  font-weight: 600;
  padding: 5px 12px 5px 0;
  white-space: nowrap;
  border-bottom: 1px solid var(--surface-2);
}
:is(#route-scales, #route-chords) .info-panel table td {
  padding: 5px 0;
  border-bottom: 1px solid var(--surface-2);
}


/* ─────────────────────────────────────────────────────────────────
   9) Page search cell + Left-side search drawer (v2 only)
   Applies to both the Scale search (#scalesToolbar) and the
   future/existing Chord search (#chordsToolbar) cells if provided.
   ───────────────────────────────────────────────────────────────── */

/* Reusable SCALE/CHORD SEARCH cell in the toolbar — inherits .form-group.
   No explicit min-width: we rely on the grid's uniform track sizing. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group.page-search-cell {
  min-width: 0;
}

/* "Show list" pill button — SE's outlined pill with a chevron glyph.
   width:100% fills the cell to match all other toolbar controls. */
.page-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  line-height: 1;
  height: 30px;
  box-sizing: border-box;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.page-search-btn:hover {
  background: var(--surface-2);
  border-color: var(--text-3);
}
.page-search-btn[aria-expanded="true"] {
  background: rgba(232, 135, 74, 0.10);
  border-color: var(--accent);
  color: var(--accent);
}
.page-search-btn__chevron {
  font-size: 10px;
  line-height: 1;
  color: var(--text-3);
}
.page-search-btn__label {
  font-size: 13px;
  font-weight: 500;
  /* Truncate long names with an ellipsis when the button is squeezed. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Backdrop + drawer — slide in from the LEFT. */
.page-search-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
  z-index: 9998;
}
.page-search-backdrop.is-open { opacity: 1; pointer-events: auto; }
.page-search-backdrop[hidden] { display: none !important; }

.page-search-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 320px;
  max-width: 88vw;
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.08);
  transform: translateX(-100%);
  transition: transform .28s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-search-drawer.is-open { transform: translateX(0); }
.page-search-drawer[hidden] { display: none !important; }

.page-search-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.page-search-drawer__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.page-search-drawer__close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.page-search-drawer__close:hover {
  color: var(--text);
  background: var(--surface-2);
}

.page-search-drawer__search {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.page-search-drawer__input {
  width: 100%;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font);
}
.page-search-drawer__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(232, 135, 74, 0.15);
}

.page-search-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.page-search-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-search-list__group {
  padding: 10px 16px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  pointer-events: none;
}
.page-search-list__item {
  padding: 6px 16px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  line-height: 1.35;
  border-left: 3px solid transparent;
  transition: background .12s, border-color .12s;
}
.page-search-list__item:hover {
  background: var(--surface-2);
}
.page-search-list__item:focus-visible {
  outline: none;
  background: var(--surface-2);
}
.page-search-list__item.is-selected {
  background: rgba(232, 135, 74, 0.10);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 560px) {
  .page-search-drawer { width: 100vw; max-width: 100vw; border-right: none; }
}


/* ─────────────────────────────────────────────────────────────────
   10) Merged KEY & DISPLAY cell (v2 only)
   Used by both routes — #keySelect + #displaySelect on scales,
   #chKeySelect + #chDisplaySelect on chords.
   ───────────────────────────────────────────────────────────────── */

/* Hide the original empty Key and Display form-groups when their inner
   controls have been moved into the merged cell. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group.is-v2-replaced {
  display: none !important;
}

/* The merged cell — two controls side-by-side under one label.
   Row fills the cell width so Key + Display together equal one Fingering-sized
   control.  Key select is auto-width (compact, 2–3 char values); the Display
   button gets flex:1 to fill the remaining space. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group.key-display-cell > .key-display-cell__row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
/* Key dropdown in the merged cell — compact, matches SE's "C ▼".
   padding-right: 28px — the inherited chevron from site.css's
   .form-control rule sits at `right: 8px` with size 11px, so its
   left edge lives at (width − 19px).  A 22px padding-right leaves
   the chevron overlapping the text by 3px, which makes the lower
   bowl of "b" in "Bb" visually merge with the down-arrow strokes
   and read as "Bl".  28px gives a 9px gap — comfortable clearance
   so Bb / Eb / Ab / Db / Gb render cleanly at any cell width. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group.key-display-cell :is(#keySelect, #chKeySelect) {
  /* Fixed width so the toolbar never shifts when the key changes.
     62px fits the widest values (Bb, Eb, Ab, Db, Gb) with room for
     the 11px chevron arrow at right:8px. */
  width: 62px;
  flex-shrink: 0;
  min-width: 0;
  height: 30px;
  font-size: 13px;
  line-height: 1.5;
  padding: 4px 28px 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-weight: 500;
  box-sizing: border-box;
}

/* Intervals / Notes toggle inside the merged cell — SE-style pill.
   flex:1 lets it fill the space left by the auto-width Key select so the
   combined row equals a full-cell-width control.  Covers #displaySelect
   (scales) and #chDisplaySelect (chords). */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group.key-display-cell :is(#displaySelect, #chDisplaySelect) {
  font-size: 12px;
  font-weight: 600;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  line-height: 1;
  height: 30px;
  box-sizing: border-box;
  font-family: var(--font);
  /* Vertically center the label inside the 30px box. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group.key-display-cell :is(#displaySelect, #chDisplaySelect):hover {
  background: var(--surface-2);
  color: var(--text);
}
/* "Intervals" state = highlighted pill (like SE). */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group.key-display-cell :is(#displaySelect, #chDisplaySelect)[data-value="intervals"] {
  background: rgba(232, 135, 74, 0.10);
  border-color: var(--accent);
  color: var(--accent);
}


/* ─────────────────────────────────────────────────────────────────
   11) Compact show/hide pill toggles (v2)
   Custom / Chords / Scale Relations / Ghost notes / Sub-chords / Info
   cells use tighter padding and a pill-style accent when their panel
   is currently visible.  Also shrinks the right-side icon toggles.
   ───────────────────────────────────────────────────────────────── */

/* Compact pill for ghost-toggle buttons in the toolbar.
   - width:100% fills the cell completely, matching every select in the toolbar.
     Overrides site.css .ghost-toggle { width: 100% } which already stretches;
     explicit here for clarity (fixed in c5cc7e1).
   - Text is left-aligned (justify-content: flex-start) to mirror how select
     option text hugs the left edge of its control. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > button.ghost-toggle {
  font-size: 12px;
  font-weight: 600;
  padding: 0 10px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  line-height: 1;
  font-family: var(--font);
  height: 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  transition: background .15s, border-color .15s, color .15s;
}
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > button.ghost-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
}
/* Active pill = panel currently showing.  data-value="show" means the
   controlled panel is currently visible. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > button.ghost-toggle[data-value="show"] {
  background: rgba(232, 135, 74, 0.10);
  border-color: var(--accent);
  color: var(--accent);
}
/* Ghost Notes toggles are semantically inverted:
   "hide" = ghosts suppressed = notable/active state = orange.
   "show" = ghosts visible = normal state.
   Overrides the generic [data-value="show"] rule above for these two buttons. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > button#ghostSelect[data-value="show"],
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > button#chGhostSelect[data-value="show"] {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-2);
}
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > button#ghostSelect[data-value="hide"],
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > button#chGhostSelect[data-value="hide"] {
  background: rgba(232, 135, 74, 0.10);
  border-color: var(--accent);
  color: var(--accent);
}
/* Disabled ghost-toggle — muted pill + not-allowed. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > button.ghost-toggle:disabled,
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > button.ghost-toggle:disabled:hover,
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .form-group > button.ghost-toggle[data-value="show"]:disabled {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-3);
  cursor: not-allowed;
  opacity: 0.55;
}

/* Shrink the right-side icon-toggle cluster. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .toolbar-right-group {
  padding: 8px 10px;
  gap: 4px;
}
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .toolbar-right-group .toolbar-panel-icon {
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: var(--r-sm);
}
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .toolbar-right-group .toolbar-panel-icon svg {
  width: 16px;
  height: 16px;
}
/* Active (panel visible) = accent outline + tint, echoing the pills. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .toolbar-right-group .toolbar-panel-icon.is-active,
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .toolbar-right-group .toolbar-panel-icon[aria-pressed="true"] {
  background: rgba(232, 135, 74, 0.10);
  border-color: var(--accent);
  color: var(--accent);
}
/* Tighter column-switcher buttons. */
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .toolbar-right-group .coll-col-btn {
  width: 26px;
  height: 26px;
  padding: 3px;
}
:is(#route-scales, #route-chords) .toolbar:is(#scalesToolbar, #chordsToolbar) .toolbar-right-group .coll-col-btn svg {
  width: 14px;
  height: 14px;
}

/* Info-panel headers: when a per-section show/hide toggle appears, give
   it the same compact pill look. */
:is(#route-scales, #route-chords) .info-panel .info-panel-header button.ghost-toggle,
:is(#route-scales, #route-chords) .info-panel .info-section-header button.ghost-toggle {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  line-height: 1;
  font-family: var(--font);
}
:is(#route-scales, #route-chords) .info-panel .info-panel-header button.ghost-toggle[data-value="show"],
:is(#route-scales, #route-chords) .info-panel .info-section-header button.ghost-toggle[data-value="show"] {
  background: rgba(232, 135, 74, 0.10);
  border-color: var(--accent);
  color: var(--accent);
}