/* ═══════════════════════════════════════════════════════════════════
   Fretly — Chords Page v2 — ROUTE-SPECIFIC overrides
   ═══════════════════════════════════════════════════════════════════

   Parallels scales-v2.css: only chord-route-specific rules live here.
   Everything that applies to BOTH routes lives in routes-v2.css (the
   shared vocabulary).  routes-v2.css MUST load before this file.

   These rules apply UNCONDITIONALLY (v2 is the only style now; the
   v1↔v2 toggle was removed 2026-07-10).  Base chord-page rules live in
   site.css, which loads first; this file wins by load order.
   =================================================================== */


/* ─────────────────────────────────────────────────────────────────
   Chords-only: drop Info/Sub-chords toolbar toggles under v2
   ───────────────────────────────────────────────────────────────── */

/* Rationale: the info panels now render SE-style accordions that own
   their own show/hide affordance via .rel-acc-toggle.  The toolbar
   duplicates (chScalesPanelToggle, chSubChordsPanelToggle) are therefore
   redundant under v2.  v1 retains them.
   Requires the row IDs #chInfoPanelRow / #chSubChordsPanelRow to exist
   in app.php around the respective form-groups. */
#route-chords .toolbar#chordsToolbar #chInfoPanelRow,
#route-chords .toolbar#chordsToolbar #chSubChordsPanelRow {
  display: none !important;
}


/* ─────────────────────────────────────────────────────────────────
   Chords-only: Sub-chords panel — two side-by-side cards (Phase 8P)
   ═══════════════════════════════════════════════════════════════════
   Mirror of the Scales route's #subScalesPanel rule in relations-panel.css.

   `#chordSubChordsPanel` is declared as an `.info-panel` in app.php so that
   on v1 it looks like a single card.  Under v2 we still want a SINGLE
   accordion (no second relation card to pair it with here — the chord
   page's info panels are `chordInfoPanel` + `chordSubChordsPanel`, each
   rendered once), so we neutralise the outer card and let the inner
   rel-card render as a stand-alone card.                                  */
/* The #route-chords prefix matches the specificity of the shared rule
   `:is(#route-scales, #route-chords)
   .info-panel` in routes-v2.css, so this more-specific rule wins. */
#route-chords #chordSubChordsPanel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  column-gap: 20px;
  row-gap: 8px;
  align-items: stretch;
}
#route-chords #chordSubChordsPanel > .info-panel--rel-card {
  margin-top: 0;
  height: 100%;
  box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────────────
   Gallery card — makeGalleryCard() in chords.js (P2.3 hygiene)
   ─────────────────────────────────────────────────────────────────
   These classes replace static .style.cssText assignments so all
   card styling lives in CSS, not JS.  Not scoped to v2 — the gallery
   card is used in both style variants.
   ───────────────────────────────────────────────────────────────── */

/* Outer card wrapper */
.ch-gallery-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Title bar inside the card */
.ch-gallery-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
}

/* Card title label */
.ch-gallery-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Right-side action cluster (Add to collection, ↑ Top, etc.) */
.ch-gallery-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
}

/* "↑ Top" scroll link */
.ch-gallery-top-link {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.ch-gallery-top-link:hover {
  color: var(--text-2);
}

/* Board-wrap padding inside the card */
.ch-gallery-board-wrap {
  padding: 0 20px;
}