/* ============================================================================
   SMART CHART — ROLE LENS STYLING
   The roadmap panel that the role lens (js/chart-roles.js) injects. Values are
   ported from the approved prototype (bass_role_roadmap_classic_theme.html) and
   keyed to the live Classic theme tokens (--gilt, --rubric, --ink, --ground-deep,
   --hair) so it inherits the manuscript idiom automatically and tracks the
   light/dark variant with no per-variant rules of its own.

   Scope: every selector is prefixed with the container so nothing leaks. The
   panel only exists while a role is active (.chart-role-active); when role is
   'off' this file styles nothing.

   Themes other than Classic (Clean, Industrial) get a neutral, legible fallback
   at the bottom so the feature works under every theme — Classic is just the
   one tuned to the prototype.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   CLASSIC THEME — the tuned target (ported from the prototype HTML)
   --------------------------------------------------------------------------- */

.cp-theme-classic.lyric-sheet-container .chart-role-panel {
  margin: 14px 0 22px;
  padding: 18px 20px;
  background: var(--ground-deep);
  border: 1px solid var(--hair);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(156, 122, 50, .12);
}

/* Head: "Bass" / "Sax · Alto · E♭" eyebrow, centered small-caps gilt. */
.cp-theme-classic .chart-role-head {
  text-align: center;
  margin: 0 0 4px;
}
.cp-theme-classic .chart-role-eyebrow {
  font-family: 'EB Garamond', Garamond, serif;
  font-variant: small-caps;
  letter-spacing: .22em;
  text-transform: lowercase;
  font-size: 12px;
  color: var(--rubric);
}

/* Distinct-chords summary strip ("Chords · E A B7"), rule above and below. */
.cp-theme-classic .chart-role-chordstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 14px;
  margin: 8px 0 16px;
  padding: 6px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.cp-theme-classic .chart-role-chordstrip-label {
  font-variant: small-caps;
  letter-spacing: .18em;
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: lowercase;
  margin-right: 4px;
}
.cp-theme-classic .chart-role-chordstrip-chord {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--gilt);
}

/* The grid: two columns on wide screens, one on narrow. Each row is a section
   label + its chord sequence, hairline-divided — exactly the prototype layout. */
.cp-theme-classic .chart-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem 2.5rem;
}
@media (max-width: 640px) {
  .cp-theme-classic .chart-role-grid { grid-template-columns: 1fr; }
}
.cp-theme-classic .chart-role-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(124, 100, 54, .22);
}
.cp-theme-classic .chart-role-row-label {
  flex: 0 0 78px;
  font-family: 'Cormorant Garamond', serif;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 13px;
  color: var(--gilt);
}
.cp-theme-classic .chart-role-row-seq {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .14em;
  color: var(--ink);
}
.cp-theme-classic .chart-role-row-seq--bars {
  font-family: 'EB Garamond', Garamond, serif;
  letter-spacing: .02em;
  font-size: 16px;
}
.cp-theme-classic .chart-role-row-note {
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  margin-left: 4px;
}
/* Focal sections (chorus/head) take the rubric accent in the label. */
.cp-theme-classic .chart-role-type-chorus .chart-role-row-label,
.cp-theme-classic .chart-role-type-head .chart-role-row-label {
  color: var(--rubric);
}

/* SAX variant — chords dimmed, because the horn reads them to blow over, not to
   comp. Lower the sequence opacity/weight so the (forthcoming) melody layer can
   sit visually on top. */
.cp-theme-classic.chart-role-mode-sax .chart-role-row-seq {
  color: var(--ink-soft);
  font-weight: 500;
  opacity: .82;
}
.cp-theme-classic.chart-role-mode-sax .chart-role-chordstrip-chord {
  color: var(--gilt-soft);
  opacity: .85;
}

/* When a role is active, the lyric body below is secondary reference. We keep
   it (a bassist still tracks position by the words) but quiet it a touch so the
   roadmap is the focus. Non-destructive — toggling role off restores it. */
.cp-theme-classic.chart-role-active .lyrics {
  opacity: .78;
}

/* ---------------------------------------------------------------------------
   NEUTRAL FALLBACK — Clean / Industrial / unthemed
   Legible, theme-agnostic. Uses currentColor + a faint surface so it works on
   any background without importing either theme's tokens.
   --------------------------------------------------------------------------- */
.lyric-sheet-container:not(.cp-theme-classic) .chart-role-panel {
  margin: 12px 0 20px;
  padding: 14px 16px;
  border: 1px solid currentColor;
  border-radius: 4px;
  opacity: .96;
}
.lyric-sheet-container:not(.cp-theme-classic) .chart-role-head {
  text-align: center; margin-bottom: 6px;
}
.lyric-sheet-container:not(.cp-theme-classic) .chart-role-eyebrow {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .8;
}
.lyric-sheet-container:not(.cp-theme-classic) .chart-role-chordstrip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px;
  margin: 6px 0 12px; padding: 6px 0;
  border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
}
.lyric-sheet-container:not(.cp-theme-classic) .chart-role-chordstrip-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em; opacity: .65;
}
.lyric-sheet-container:not(.cp-theme-classic) .chart-role-chordstrip-chord {
  font-weight: 700; font-size: 15px;
}
.lyric-sheet-container:not(.cp-theme-classic) .chart-role-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 2rem;
}
@media (max-width: 640px) {
  .lyric-sheet-container:not(.cp-theme-classic) .chart-role-grid {
    grid-template-columns: 1fr;
  }
}
.lyric-sheet-container:not(.cp-theme-classic) .chart-role-row {
  display: flex; align-items: baseline; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid rgba(128,128,128,.25);
}
.lyric-sheet-container:not(.cp-theme-classic) .chart-role-row-label {
  flex: 0 0 72px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; opacity: .75;
}
.lyric-sheet-container:not(.cp-theme-classic) .chart-role-row-seq {
  font-size: 16px; letter-spacing: .1em;
}
.lyric-sheet-container:not(.cp-theme-classic) .chart-role-row-seq--bars {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px; letter-spacing: 0;
}
.lyric-sheet-container:not(.cp-theme-classic) .chart-role-row-note {
  font-style: italic; font-size: 12px; opacity: .7;
}
.lyric-sheet-container:not(.cp-theme-classic).chart-role-mode-sax .chart-role-row-seq {
  opacity: .7;
}

/* ---------------------------------------------------------------------------
   TOOLBAR CONTROL — the role picker that lives in the Tools panel.
   Styled minimally; inherits the panel's select styling under each theme.
   --------------------------------------------------------------------------- */
.chart-role-control { display: flex; align-items: center; gap: 8px; }
.chart-role-control .chart-role-sax-select[hidden] { display: none; }