/* ──────────────────────────────────────────────────────────────────────
   TheoryTab Light Theme

   Every rule in this file MUST be scoped under [data-tt-theme="light"]
   so it only activates when the user has selected "Light" in their
   TheoryTab settings. Dark stays the default and is untouched by this
   file.

   Toggle wiring:
   - cookie `theme` (set via /theorytab/settings → actionSettingsPost)
   - `TheoryTabSettings::currentTheme()` reads the cookie
   - emitted as `<html data-tt-theme="light|dark">` from layout-main.php
   - this stylesheet is opt-in per redesigned view (register via
     `Yii::app()->clientScript->registerCssFile('/css/tt-light.css?v=…')`)

   Add overrides per page below. Group by view file so it stays grep-able.
   ──────────────────────────────────────────────────────────────────── */

/* ── TheoryTab topbar (partial-tb-topbar-dark.php) ──────────────────────
   The dark partial's inline <style> block uses #tb-topbar + !important
   for everything. We override with `[data-tt-theme="light"] #tb-topbar`
   to bump specificity (one extra attribute selector) and re-`!important`
   so light values win. */

[data-tt-theme="light"] #tb-topbar {
  /* Azure → purple horizontal gradient (left + right swapped from
     the original). Same mid-stop hold. */
  background:
    linear-gradient(90deg, rgba(54, 136, 191, 0.16) 0%, rgba(54, 136, 191, 0.06) 50%, rgba(99, 102, 241, 0.10) 100%),
    #ffffff !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* "TheoryTab" logo wordmark in the topbar. Dark version uses
   #fff for "Theory" and #e2e8f0 for "Tab"; map to primary +
   secondary respectively per spec. */
[data-tt-theme="light"] #tb-topbar .tb-topbar-logo span:first-child {
  color: #242424 !important;
}
[data-tt-theme="light"] #tb-topbar .tb-topbar-logo span:last-child {
  color: #404854 !important;
}

/* Search box glass — flip from dark frosted to light white with a
   touch of translucency so the topbar gradient breathes through. */
[data-tt-theme="light"] #tb-topbar .bg-white {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
[data-tt-theme="light"] #tb-topbar .bg-white input,
[data-tt-theme="light"] #tb-topbar .ais-SearchBox-input,
[data-tt-theme="light"] #tb-topbar .text-gray-900 {
  color: #242424 !important;
}
[data-tt-theme="light"] #tb-topbar .bg-white input::placeholder,
[data-tt-theme="light"] #tb-topbar .ais-SearchBox-input::placeholder,
[data-tt-theme="light"] #tb-topbar .placeholder\:text-gray-400::placeholder {
  color: #74849b !important;
}
[data-tt-theme="light"] #tb-topbar .text-gray-400,
[data-tt-theme="light"] #tb-topbar .text-ht-midnight {
  color: #404854 !important;
}
[data-tt-theme="light"] #tb-topbar .bg-white button {
  color: #404854 !important;
}
[data-tt-theme="light"] #tb-topbar .bg-white button:hover,
[data-tt-theme="light"] #tb-topbar button.ais-SearchBox-reset:hover {
  color: #242424 !important;
}
[data-tt-theme="light"] #tb-topbar button.ais-SearchBox-reset {
  color: #404854 !important;
}

/* Search results panel — was rgba(20,24,36,0.95). Flip to a slightly
   translucent, azure-tinted white card so it picks up some of the
   topbar gradient behind it. */
[data-tt-theme="light"] #tb-topbar .ais-Hits,
[data-tt-theme="light"] #tb-topbar .ais-InfiniteHits {
  background:
    linear-gradient(rgba(54, 136, 191, 0.11), rgba(54, 136, 191, 0.11)),
    rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(54, 136, 191, 0.22) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
[data-tt-theme="light"] #tb-topbar .search-item .text-gray-900 {
  color: #242424 !important;
}
[data-tt-theme="light"] #tb-topbar .search-item .text-gray-600 {
  color: #404854 !important;
}
[data-tt-theme="light"] #tb-topbar .search-item:hover {
  background: rgba(15, 23, 42, 0.04) !important;
}
[data-tt-theme="light"] #tb-topbar .search-item mark {
  background: rgba(54, 136, 191, 0.30) !important;
  color: #242424 !important;
}
/* Mobile search open/close icons in the TheoryTab topbar — were a faint light
   gray (#c5cdd6) that barely shows on the light topbar; darken to #404854.
   These only render on mobile (hidden on desktop), so this is mobile-only. */
[data-tt-theme="light"] .tb-mobile-search-link,
[data-tt-theme="light"] .tb-mobile-search-close { color: #404854 !important; }

/* Topbar links + hamburger button. */
[data-tt-theme="light"] #tb-topbar .tb-topbar-link {
  color: #242424;
}
[data-tt-theme="light"] #tb-topbar .tb-topbar-link:hover {
  color: #404854;
}
[data-tt-theme="light"] #tb-topbar .tb-menu-btn {
  color: #242424;
}
[data-tt-theme="light"] #tb-topbar .tb-menu-btn:hover {
  color: #404854;
}

/* Hamburger dropdown — was dark #131a22; flip to a translucent
   azure-tinted card matching the search-results panel above. */
[data-tt-theme="light"] .tb-menu-dropdown {
  background:
    linear-gradient(rgba(54, 136, 191, 0.11), rgba(54, 136, 191, 0.11)),
    rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(54, 136, 191, 0.28) !important;
  box-shadow: 0 6px 18px rgba(54, 136, 191, 0.18) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
[data-tt-theme="light"] .tb-menu-section + .tb-menu-section {
  border-top-color: rgba(15, 23, 42, 0.08) !important;
}
[data-tt-theme="light"] .tb-menu-section-heading {
  color: #3688bf !important;
}
[data-tt-theme="light"] .tb-menu-item {
  color: #242424 !important;
}
[data-tt-theme="light"] .tb-menu-item:hover {
  color: #242424 !important;
  background: rgba(54, 136, 191, 0.10) !important;
}
[data-tt-theme="light"] .tb-menu-item--sub {
  color: #404854 !important;
}

/* ── Song view page (theorytab/view/view-dark.php) ──────────────────── */

/* Page background. The dark layout's inline `html, body { #0e0f13 }` rule
   uses !important — we have to match it. The wrapper div carries an
   inline gradient style, so we target it via the .tt-page-bg hook added
   in theorytab-view-dark.php. */
[data-tt-theme="light"] html,
[data-tt-theme="light"] body {
  background-color: #ffffff !important;
}
[data-tt-theme="light"] .tt-page-bg {
  background: linear-gradient(
    135deg,
    #f3f6fb 0%,
    #ffffff 40%,
    #ffffff 100%
  ) !important;
}

/* Generic surface cards (hero meta strip, About the Key cards, etc.). */
[data-tt-theme="light"] .tb-dark-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Meta pills (BPM / KEY / TIME / GENRE). */
[data-tt-theme="light"] .tb-meta-pill {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.7);
}
[data-tt-theme="light"] .tb-meta-label { color: #74849b; }
[data-tt-theme="light"] .tb-meta-value { color: #242424; }

/* Action buttons (Save, Embed, Share, gear). */
[data-tt-theme="light"] .tb-action-btn {
  border-color: rgba(15, 23, 42, 0.14);
  color: #242424;
  background: rgba(255, 255, 255, 0.7);
}
[data-tt-theme="light"] .tb-action-btn:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.25);
  color: #242424;
}
/* "Saved" pill keeps the brand accent; just tone the bg/text for white. */
[data-tt-theme="light"] .tb-action-btn.tb-saved {
  background: rgba(54, 136, 191, 0.12);
  border-color: #3688bf;
  color: #1e6fa1;
}
[data-tt-theme="light"] .tb-action-btn.tb-saved:hover {
  background: rgba(54, 136, 191, 0.22);
}

/* Inline links. Brand accent darkens for white-bg legibility. */
[data-tt-theme="light"] .tb-dark-link {
  color: #1e6fa1;
}
[data-tt-theme="light"] .tb-dark-link:hover {
  color: #155680;
}

/* Section tabs (folder/pill style above the staff player). */
[data-tt-theme="light"] .tb-section-tab {
  color: #404854;
  border-color: rgba(15, 23, 42, 0.26);
}
[data-tt-theme="light"] .tb-section-tab:hover {
  color: #242424;
  background: rgba(15, 23, 42, 0.04);
}
[data-tt-theme="light"] .tb-section-tab.active {
  color: #242424;
  background: rgba(243, 249, 253, 0.9); /* #f3f9fd */
  border-color: rgba(54, 136, 191, 0.65);
  /* Soften the dark version's heavy glow on a white bg. */
  box-shadow:
    0 -1px 4px rgba(54, 136, 191, 0.35),
    -1px 0 4px rgba(54, 136, 191, 0.2),
    1px 0 4px rgba(54, 136, 191, 0.2);
}
/* Mobile: the view's own max-width:768px block turns the tabs into pills and
   forces the active tab to `color: #fff !important` (white on a light azure
   pill — unreadable). Darken all section-tab text to #242424. !important +
   higher specificity beats the view's mobile rule. Mobile + light only. */
@media (max-width: 768px) {
  [data-tt-theme="light"] .tb-section-tab,
  [data-tt-theme="light"] .tb-section-tab.active {
    color: #242424 !important;
  }
  /* The view's mobile rule gives inactive pills a white border
     (rgba(255,255,255,0.15)) that vanishes on the light page. Give them a
     visible slate outline so the unused sections read as pills. Active keeps
     its azure border via the more-specific rule. */
  [data-tt-theme="light"] .tb-section-tab:not(.active) {
    border-color: rgba(15, 23, 42, 0.22) !important;
  }
  /* Selected pill's blue fill (view's mobile rule is rgba(71,158,215,0.25)) —
     dial it back so it reads lighter. */
  [data-tt-theme="light"] .tb-section-tab.active {
    background: rgba(71, 158, 215, 0.09) !important;
  }
  /* Song-data chart pills share the section pills' mobile markup/rules — give
     them the same treatment: dark #242424 text, visible slate outline on the
     unused pills, and a faint azure fill on the selected one. */
  [data-tt-theme="light"] .tb-chart-tab,
  [data-tt-theme="light"] .tb-chart-tab.active {
    color: #242424 !important;
  }
  [data-tt-theme="light"] .tb-chart-tab:not(.active) {
    border-color: rgba(15, 23, 42, 0.22) !important;
  }
  [data-tt-theme="light"] .tb-chart-tab.active {
    background: rgba(71, 158, 215, 0.09) !important;
    /* On mobile the pill is standalone (it doesn't merge into the card below
       like on desktop), so give it an even glow on all four sides and drop the
       bottom-clipping clip-path that the desktop merge needs. */
    box-shadow: 0 0 6px rgba(54, 136, 191, 0.35) !important;
    clip-path: none !important;
  }
  /* The chart-tab scroll bar (overflow-x:auto) also clips vertically, cutting
     off the active pill's azure glow at top AND bottom. Extend the clip box on
     both edges with padding, offset by matching negative margins so the pills
     and card don't shift. Light-mode only (the glow is a light-mode box-shadow). */
  [data-tt-theme="light"] .tb-chart-tab-bar {
    padding-top: 10px !important;
    margin-top: -10px !important;
    padding-bottom: 10px !important;
    margin-bottom: 2px !important;
  }
  /* "About the Metrics" info (ⓘ) button — the global light rule above
     (.tb-hero-bg [style*="rgba(226,232,240,0.6)"]) makes it #74849b; on mobile
     darken to #404854. Selector mirrors that rule's specificity plus a type to
     win. The SVG inherits via currentColor. */
  [data-tt-theme="light"] .tb-hero-bg button.tb-metrics-info-btn {
    color: #404854 !important;
    border-color: rgba(64, 72, 84, 0.4) !important;
  }
}

/* Chart tabs (above each chart card). Unselected tabs are a muted /
   "grayed out" slate so they read as inactive; hover bumps to a subtle
   azure tint to telegraph "click me"; the active tab matches the chart
   card's azure-tinted gradient so it visually merges into the card. */
[data-tt-theme="light"] .tb-chart-tab {
  color: #404854;
  background: #f5f6f8;
  border-color: rgba(15, 23, 42, 0.26);
}
[data-tt-theme="light"] .tb-chart-tab:hover {
  color: #242424;
  background: rgba(54, 136, 191, 0.10);
}
[data-tt-theme="light"] .tb-chart-tab.active {
  color: #242424;
  /* Same solid azure-tint as the chart card below — both #f3f8fc so
     the tab + card read as one continuous surface, no seam. */
  background: #f3f8fc;
  border-color: rgba(54, 136, 191, 0.65);
  /* Drop the bottom border so the tab merges seamlessly into the chart
     card below — only three sides of azure frame remain. */
  border-bottom-color: transparent;
  /* Three-sided azure glow — matches the section-tab active treatment.
     Bottom is omitted since the tab merges into the chart card below. */
  box-shadow:
    0 -1px 4px rgba(54, 136, 191, 0.35),
    -1px 0 4px rgba(54, 136, 191, 0.2),
    1px 0 4px rgba(54, 136, 191, 0.2);
  /* Clip the shadow at the tab's bottom edge so the side shadows'
     `0` vertical offset doesn't bleed downward and create a glow ring
     at the seam where the tab meets the chart card. */
  clip-path: inset(-8px -8px 0 -8px);
}

/* Divider between stacked sections in "All Sections" mode. */
[data-tt-theme="light"] .tb-section-block--all-divider:not(:last-child) {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

/* About-the-Key cards row — soft white highlight on top fading into a
   light azure-tinted base. The original dark version uses !important so
   we must match. The white top overlay makes the upper portion of each
   card read as lighter / brighter than the azure body below it. */
[data-tt-theme="light"] .tb-key-cards-row .tb-key-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 65%),
    rgba(54, 136, 191, 0.10) !important;
}
[data-tt-theme="light"] .tb-key-cards-row a.tb-key-card:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 65%),
    rgba(54, 136, 191, 0.20) !important;
}

/* Melody-range SVG note heads, ledger lines, and accidental glyphs.
   The dark version draws these as white (stroke="#fff" /
   stroke="rgba(255,255,255,0.6)" / fill="rgba(255,255,255,0.9)") on a
   dark staff — invisible on a white page. Remap to dark slate so the
   notes read against the white card background. The staff lines / clefs
   are already azure-recolored by the .tb-key-card svg [stroke="#66b3e6"]
   override above.

   .tb-melody-motion-card is excluded — its checkmark SVG also uses
   stroke="#fff" and needs to stay white on the green check box. */
[data-tt-theme="light"] .tb-melody-section .tb-key-card:not(.tb-melody-motion-card) svg [stroke="#fff"] {
  stroke: #242424 !important;
}
[data-tt-theme="light"] .tb-melody-section .tb-key-card:not(.tb-melody-motion-card) svg [stroke="rgba(255,255,255,0.6)"] {
  stroke: #404854 !important;
}
[data-tt-theme="light"] .tb-melody-section .tb-key-card:not(.tb-melody-motion-card) svg [fill="rgba(255,255,255,0.9)"] {
  fill: #242424 !important;
}

/* Beats/note bar outline. Dark uses stroke="rgba(102,179,230,0.35)"
   which renders too faint on white — bump the alpha so the full
   container reads clearly. The fill is already a soft azure tint. */
[data-tt-theme="light"] .tb-melody-section svg [stroke="rgba(102,179,230,0.35)"] {
  stroke: rgba(54, 136, 191, 0.65) !important;
}

/* About-the-Melody cards (range / beats-per-note / motion). Dark mode
   uses rgba(255,255,255,0.05) bg + rgba(255,255,255,0.1) border which
   both vanish on a white page. Recolor with the same azure-tinted pill
   pattern we use for the chord-progression rows so the trio reads as
   distinct cards. Scoped to .tb-melody-section so the About-the-Key
   cards (separate styling) aren't touched. */
[data-tt-theme="light"] .tb-melody-section .tb-key-card {
  background: rgba(54, 136, 191, 0.05) !important;
  border-color: rgba(54, 136, 191, 0.22) !important;
}

/* Horizontal bar tracks across the page — melody character bars
   (Diatonic/Chord Tones/Consonance/Syncopation) AND About-the-Metrics
   bars (Chord Complexity / Melodic Complexity / etc.) both use the
   same dark-version pattern: rgba(255,255,255,0.08) under a vivid
   colored fill. Replace with a slate tint that's visible on white. */
[data-tt-theme="light"] .tb-hero-bg [style*="background: rgba(255,255,255,0.08)"],
[data-tt-theme="light"] .tb-hero-bg [style*="background:rgba(255,255,255,0.08)"] {
  background: rgba(15, 23, 42, 0.10) !important;
}

/* Unchecked motion-checkbox border + label (Stepwise / Jumpy / Repeaty
   when not active). Currently rgba(255,255,255,0.25) border and
   rgba(255,255,255,0.45) text — both invisible on white. */
[data-tt-theme="light"] .tb-melody-section [style*="border: 1px solid rgba(255,255,255,0.25)"] {
  border-color: rgba(15, 23, 42, 0.25) !important;
}
[data-tt-theme="light"] .tb-melody-section [style*="color: rgba(255,255,255,0.45)"],
[data-tt-theme="light"] .tb-melody-section [style*="color:rgba(255,255,255,0.45)"] {
  color: #74849b !important;
}

/* Inline-styled dark tooltips throughout the page — melody bar hover
   descriptions, About-the-Metrics info popover, per-metric hover
   tooltips. All use background: #131a22 in dark mode; flip to a
   light-azure-tinted card with azure border + soft shadow so they
   read on the light page and feel on-brand. Use the broader [style*=
   "#131a22"] selector (no property prefix) to catch any browser
   normalization of the inline style. */
/* IMPORTANT: when Alpine.js touches any `element.style.*` property on
   these tooltip wrappers (e.g. to set/unset `display: none` for x-show),
   the browser RESERIALIZES the entire inline style attribute — hex
   colors become rgb(...) form. So `[style*="#131a22"]` stops matching
   the live DOM even though the source HTML has the hex. We need both
   the hex AND the rgb-serialized form of every color we substring on. */
[data-tt-theme="light"] [style*="#131a22"],
[data-tt-theme="light"] [style*="rgb(19, 26, 34)"] {
  background: #404854 !important;
  border-color: #3688bf !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25) !important;
}
/* Tooltip body text — muted slate (#c5cdd6) on the dark-slate bg, both
   for the wrapper and every descendant. Covers the per-metric hover
   tooltip body, the Percentile sub-line, and the info-popover metric
   definitions. We need (0,0,4,0) specificity to beat the
   `.tb-hero-bg [style*="color: #fff"]` catch-all (which is (0,0,3,0)
   and otherwise wins on later source order). Three duplicated
   [style*=…] selectors get us there. */
[data-tt-theme="light"] [style*="#131a22"][style*="#131a22"][style*="#131a22"],
[data-tt-theme="light"] [style*="rgb(19, 26, 34)"][style*="rgb(19, 26, 34)"][style*="rgb(19, 26, 34)"],
[data-tt-theme="light"] [style*="#131a22"][style*="#131a22"][style*="#131a22"] *,
[data-tt-theme="light"] [style*="rgb(19, 26, 34)"][style*="rgb(19, 26, 34)"][style*="rgb(19, 26, 34)"] * {
  color: #c5cdd6 !important;
}

/* Re-promote the metric-name headings inside the info popover ("Chord
   Complexity", "Melodic Complexity", etc.) — they have inline
   color: #e2e8f0 in the source. Force back to white so they read as
   headings against the muted-slate body text below them. Higher
   specificity (5 attribute selectors) beats the base body rule above. */
[data-tt-theme="light"] [style*="#131a22"][style*="#131a22"][style*="#131a22"] [style*="color: #e2e8f0"],
[data-tt-theme="light"] [style*="rgb(19, 26, 34)"][style*="rgb(19, 26, 34)"][style*="rgb(19, 26, 34)"] [style*="color: #e2e8f0"] {
  color: #ffffff !important;
}

/* Beats/note "+" clamp indicator (overflow case where value >= 4) —
   currently white SVG text, invisible. */
[data-tt-theme="light"] .tb-melody-section svg [fill="rgba(255,255,255,0.85)"] {
  fill: #242424 !important;
}

/* Recolor the brand-azure SVGs + roman-numeral text inside the key
   cards. Dark mode renders these with #66b3e6 hardcoded as inline
   `fill="#66b3e6"` / `color: #66b3e6` (see about-section-dark.php
   line 76 / 120 / 165) — in light mode we want the slightly darker
   #3688bf. Attribute selectors catch the inline values. */
[data-tt-theme="light"] .tb-key-card svg [fill="#66b3e6"] {
  fill: #3688bf !important;
}
[data-tt-theme="light"] .tb-key-card svg [stroke="#66b3e6"] {
  stroke: #3688bf !important;
}
/* Key-signature SVG (Inkscape export) keeps its colors inside the
   `style="..."` attribute, not on `fill=` / `stroke=`. PHP str_replaces
   the original near-black tokens to #66b3e6 — match both string forms
   so the brand-azure remap reaches them too. */
[data-tt-theme="light"] .tb-key-card svg [style*="stroke:#66b3e6"],
[data-tt-theme="light"] .tb-key-card svg [style*="stroke: #66b3e6"] {
  stroke: #3688bf !important;
}
[data-tt-theme="light"] .tb-key-card svg [style*="fill:#66b3e6"],
[data-tt-theme="light"] .tb-key-card svg [style*="fill: #66b3e6"] {
  fill: #3688bf !important;
}
[data-tt-theme="light"] .tb-key-card [style*="color: #66b3e6"],
[data-tt-theme="light"] .tb-key-card [style*="color:#66b3e6"] {
  color: #3688bf !important;
}

/* Cheat-Sheet card's mini piano keyboard — inactive ("unused") keys
   are rendered with dark fills (#2a2f3e for white keys, #111318 for
   black keys) and a near-invisible light stroke tuned for the dark
   theme. In light mode, give them a white fill with a visible slate
   border so each key reads as its own shape without competing with
   the active azure keys. */
[data-tt-theme="light"] .tb-key-card svg rect[fill="#2a2f3e"],
[data-tt-theme="light"] .tb-key-card svg rect[fill="#111318"] {
  fill: #a9cfe8 !important;
}
[data-tt-theme="light"] .tb-key-card svg rect[stroke="rgba(255,255,255,0.15)"],
[data-tt-theme="light"] .tb-key-card svg rect[stroke="rgba(255,255,255,0.1)"] {
  stroke: rgba(15, 23, 42, 0.35) !important;
  stroke-width: 0.7 !important;
}

/* ── Text palette ───────────────────────────────────────────────────
   Light-mode text colors (per user spec):
     primary   #242424   — H1, prominent values, hover states
     secondary #404854   — body copy, tab text, descriptions, links-as-text
     tertiary  #74849b   — labels, breadcrumbs, contrib meta

   The dark view file sets many of these inline via `style="color: #fff"`
   or `color: #c5cdd6` directly on elements, so we need !important here
   to win against inline styles. */

/* Song-header inline-styled text (H1, "Chords and Melody" subtitle,
   "by ARTIST" row + artist link). All currently inline-color #fff /
   #e2e8f0 / #c5cdd6. */
[data-tt-theme="light"] .tb-song-h1 { color: #242424 !important; }
[data-tt-theme="light"] .tb-song-h1 span { color: #404854 !important; }
[data-tt-theme="light"] .tb-song-info { color: #404854; }
[data-tt-theme="light"] .tb-song-info > div { color: #404854 !important; }
[data-tt-theme="light"] .tb-song-info a {
  color: #242424 !important;
}
[data-tt-theme="light"] .tb-song-info a:hover {
  color: #000000 !important;
}

/* Right-sidebar suggestions: song row, artist sub-line, "See more" link. */
[data-tt-theme="light"] .tb-song-item { color: #242424; }
[data-tt-theme="light"] .tb-song-item:hover { color: #000000; }
[data-tt-theme="light"] .tb-song-item .artist-name { color: #404854; }
[data-tt-theme="light"] .tb-see-more { color: #3688bf; }
[data-tt-theme="light"] .tb-see-more:hover { color: #2e76a8; }

/* Stat block (left-of-staff metric labels + values). */
[data-tt-theme="light"] .tb-stat-label { color: #404854; }
[data-tt-theme="light"] .tb-stat-value { color: #242424; }

/* Contributor icon row. */
[data-tt-theme="light"] .tb-contrib-icon { color: #74849b; }

/* Concept pills (Related Music Concepts) — text + icon. */
[data-tt-theme="light"] .tb-concept-card .tb-concept-icon { color: #404854; }
[data-tt-theme="light"] .tb-concept-card .tb-concept-name { color: #404854; }
[data-tt-theme="light"] .tb-concept-card:hover .tb-concept-icon { color: #242424; }
[data-tt-theme="light"] .tb-concept-card:hover .tb-concept-name { color: #242424; }

/* In-flow hero breadcrumb (TheoryTab / Artist / Song). The view sets all
   three slots via inline style="color: #94a3b8" + onmouseover handlers,
   so we !important the resting colors. The hover-restore JS still fires
   but only briefly flickers when the cursor is over a link. */
[data-tt-theme="light"] .tb-breadcrumb { color: #74849b !important; }
[data-tt-theme="light"] .tb-breadcrumb a { color: #74849b !important; }
[data-tt-theme="light"] .tb-breadcrumb a:hover { color: #404854 !important; }
[data-tt-theme="light"] .tb-breadcrumb span { color: #404854 !important; }

/* Sticky bar: breadcrumb / H1 / artist text on the fixed compact bar. */
[data-tt-theme="light"] .tb-sticky-bar .tb-breadcrumb { color: #74849b; }
[data-tt-theme="light"] .tb-sticky-bar .tb-breadcrumb a { color: #74849b; }
[data-tt-theme="light"] .tb-sticky-bar .tb-breadcrumb a:hover { color: #404854; }

/* Mobile: darken the breadcrumb one step — unused links (and the "/" separators)
   to #404854, the active current-song crumb to #242424. The active crumb is the
   only span carrying an inline color, so span[style*="color"] targets it without
   hitting the bare separator spans. Mobile + light only. */
@media (max-width: 768px) {
  [data-tt-theme="light"] .tb-breadcrumb a[href],
  [data-tt-theme="light"] .tb-sticky-bar .tb-breadcrumb a[href] { color: #404854 !important; }
  [data-tt-theme="light"] .tb-breadcrumb span[style*="color"] { color: #242424 !important; }
}
[data-tt-theme="light"] .tb-sticky-bar-h1 { color: #242424; }
[data-tt-theme="light"] .tb-sticky-bar-h1 span { color: #404854; }
[data-tt-theme="light"] .tb-sticky-bar-artist { color: #404854; }
[data-tt-theme="light"] .tb-sticky-bar-artist a { color: #242424; }
[data-tt-theme="light"] .tb-sticky-bar-artist a:hover { color: #000000; }

/* Headings (h1–h3) inside the song-view page wrapper. The view files
   inline color: #fff / #e2e8f0 directly on each heading, so we use a
   blanket selector + !important. Scoped under .tb-hero-bg so the
   global topbar/footer headings aren't affected. */
[data-tt-theme="light"] .tb-hero-bg h1,
[data-tt-theme="light"] .tb-hero-bg h2,
[data-tt-theme="light"] .tb-hero-bg h3 {
  color: #242424 !important;
}
/* Heading <span> siblings (e.g. "<h2>About <span>SongName</span></h2>")
   use the dark file's #c5cdd6 — map to secondary. */
[data-tt-theme="light"] .tb-hero-bg h1 span,
[data-tt-theme="light"] .tb-hero-bg h2 span,
[data-tt-theme="light"] .tb-hero-bg h3 span {
  color: #404854 !important;
}

/* Body prose inside the page wrapper. Catches the inline "color: #c5cdd6"
   paragraphs in About the Melody / Chord Progressions / etc. */
[data-tt-theme="light"] .tb-hero-bg p {
  color: #404854 !important;
}

/* Card body text — "Key information", "Chord information for this key",
   the About the Key / Melody flavor copy. Currently inline #c5cdd6. */
[data-tt-theme="light"] .tb-card-text {
  color: #404854 !important;
}

/* Table headers in the Chord Progressions table — "Section / Progression
   / Songs with this progression". Currently inline #c5cdd6. Tertiary
   (label-style) reads cleaner here. */
[data-tt-theme="light"] .tb-hero-bg th {
  color: #74849b !important;
}

/* Metrics-section blue glow band (extends full-width behind the radar
   chart / BPM comparison section). Dark version peaks at 0.28 alpha
   which reads too saturated on a white page — pull the peaks down so
   it's just a soft hint of color rather than a full-strength band. */
[data-tt-theme="light"] .tb-metrics-glow::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(54, 136, 191, 0.07) 50%,
    rgba(54, 136, 191, 0.055) 62%,
    rgba(54, 136, 191, 0.07) 74%,
    rgba(255, 255, 255, 0) 88%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Fixed compact sticky bar that slides in below the topbar on scroll.
   Dark version uses rgba(10, 12, 18, 0.55) with a 10px backdrop blur;
   light version keeps the blur but swaps to white-translucent so the
   page content blurs underneath without darkening it. Border-bottom +
   album-thumb border + scroll-top button retuned for white. */
[data-tt-theme="light"] .tb-sticky-bar {
  /* Two-layer background: hint of azure over a translucent-white base, so
     the bar reads as "white with a touch of brand tint" rather than gray. */
  background:
    linear-gradient(rgba(54, 136, 191, 0.11), rgba(54, 136, 191, 0.11)),
    rgba(255, 255, 255, 0.7);
  border-bottom-color: rgba(54, 136, 191, 0.18);
}
[data-tt-theme="light"] .tb-sticky-bar .tb-album-thumb {
  border-color: rgba(15, 23, 42, 0.1);
}
[data-tt-theme="light"] .tb-scroll-top {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.18);
  color: #404854;
}
[data-tt-theme="light"] .tb-scroll-top:hover {
  background: rgba(15, 23, 42, 0.10);
  border-color: rgba(15, 23, 42, 0.3);
  color: #242424;
}

/* Subtle azure pill around each progression row. Each row already
   renders as a single rounded pill in dark mode via three <td>s with
   matching bg + border (first/last cells carry border-radius). We just
   recolor those inline rgba(255,255,255,…) tones to soft azure so the
   row pill reads on white. The table's `border-spacing: 0 32px` keeps
   the vertical gap between pills intact. */
[data-tt-theme="light"] .tb-cp-table td {
  background: rgba(54, 136, 191, 0.05) !important;
  border-color: rgba(54, 136, 191, 0.22) !important;
}

/* ── About-the-Metrics section ──────────────────────────────────────
   Specific contrast fixes for the About-the-Metrics block (h3 +
   description + 5 metric bars + "similar metrics" search button). */

/* Inline-azure brand text on the page (e.g. the "here" link in the
   metrics description; the "Song Analysis" eyebrow above the H1; etc.).
   Dark mode uses #66b3e6 which reads too faint on white — bump to a
   darker variant used elsewhere for link contrast. */
[data-tt-theme="light"] .tb-hero-bg [style*="color: #66b3e6"],
[data-tt-theme="light"] .tb-hero-bg [style*="color:#66b3e6"] {
  color: #1e6fa1 !important;
}

/* About-the-Metrics info-button "i" — inline rgba(226, 232, 240, …)
   border + icon color. Both invisible on white. */
[data-tt-theme="light"] .tb-hero-bg [style*="border: 1px solid rgba(226, 232, 240, 0.3)"] {
  border-color: rgba(15, 23, 42, 0.25) !important;
}
[data-tt-theme="light"] .tb-hero-bg [style*="color: rgba(226, 232, 240, 0.6)"] {
  color: #74849b !important;
}
/* Hover state for the info-button "i": shift to azure border + icon.
   Uses :hover with !important to beat the JS onmouseover handler that
   sets light-gray inline values. Targeted by aria-label so we don't
   need to add a class to the markup. */
[data-tt-theme="light"] .tb-hero-bg button[aria-label="What do these metrics mean?"]:hover {
  color: #3688bf !important;
  border-color: #3688bf !important;
}

/* "See other songs with similar metrics" pill button. The dark view
   uses inline onmouseover / onmouseout JS to mutate style.color /
   background / borderColor; the browser normalizes hex assignments to
   rgb(…) form so our substring selectors miss the post-mutation values.
   Target the <a> directly via the href so default + hover both win over
   the JS-set inline styles. */
[data-tt-theme="light"] .tb-hero-bg a[href^="/theorytab/advanced-search"] {
  background: transparent !important;
  border-color: rgba(54, 136, 191, 0.45) !important;
  color: #404854 !important;
}
[data-tt-theme="light"] .tb-hero-bg a[href^="/theorytab/advanced-search"]:hover {
  background: rgba(54, 136, 191, 0.12) !important;
  border-color: rgba(54, 136, 191, 0.65) !important;
  color: #242424 !important;
}

/* ── Catch-all sweep for inline-styled text ──────────────────────────
   The dark view file paints `color: #fff` / #e2e8f0 / #c5cdd6 / #94a3b8
   directly on hundreds of <div>s and <span>s (key signature display,
   "Most Important Chords", melody bar values, etc.) where there's no
   class hook to target. Attribute substring selectors catch any element
   whose `style=""` literally contains those tokens. Scoped under
   .tb-hero-bg so we don't leak into the topbar/footer/other pages. */
[data-tt-theme="light"] .tb-hero-bg [style*="color: #fff"],
[data-tt-theme="light"] .tb-hero-bg [style*="color:#fff"],
[data-tt-theme="light"] .tb-hero-bg [style*="color: white"],
[data-tt-theme="light"] .tb-hero-bg [style*="color:white"],
[data-tt-theme="light"] .tb-hero-bg [style*="color: #FFF"],
[data-tt-theme="light"] .tb-hero-bg [style*="color: #ffffff"],
[data-tt-theme="light"] .tb-hero-bg [style*="color:#ffffff"],
[data-tt-theme="light"] .tb-hero-bg [style*="color: #e2e8f0"],
[data-tt-theme="light"] .tb-hero-bg [style*="color:#e2e8f0"] {
  color: #242424 !important;
}
[data-tt-theme="light"] .tb-hero-bg [style*="color: #c5cdd6"],
[data-tt-theme="light"] .tb-hero-bg [style*="color:#c5cdd6"] {
  color: #404854 !important;
}
[data-tt-theme="light"] .tb-hero-bg [style*="color: #94a3b8"],
[data-tt-theme="light"] .tb-hero-bg [style*="color:#94a3b8"] {
  color: #74849b !important;
}

/* Song Stats card text colors are PHP-themed per-album based on the
   dominant color's brightness — light-album backgrounds get
   black-ish text, dark-album backgrounds get white text. The catch-
   all above would force these to the light palette and break the
   contrast against the colored card bg. Re-assert the inline values
   inside `.tb-song-stats-card`. Same specificity as the catch-all
   (0,3,0); these rules come later in source order so they win. */
[data-tt-theme="light"] .tb-song-stats-card [style*="color: #fff"],
[data-tt-theme="light"] .tb-song-stats-card [style*="color:#fff"] {
  color: #fff !important;
}
[data-tt-theme="light"] .tb-song-stats-card [style*="color: #111"] {
  color: #111 !important;
}
[data-tt-theme="light"] .tb-song-stats-card [style*="color: rgba(255,255,255,0.92)"] {
  color: rgba(255,255,255,0.92) !important;
}
[data-tt-theme="light"] .tb-song-stats-card [style*="color: rgba(0,0,0,0.88)"] {
  color: rgba(0,0,0,0.88) !important;
}

/* Hero readability gradient. The dark version uses two radial gradients
   in near-black (rgba(10,12,18,…)) anchored at the top corners so the
   title stays legible over the blurred album art. In light mode we use
   white for readability + soft hue touches at the top corners that
   match the topbar gradient above: azure on the left, indigo on the
   right (mirroring the topbar's azure → purple horizontal arc). */
[data-tt-theme="light"] .tb-hero-bg::after {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(54, 136, 191, 0.10) 0%, rgba(54, 136, 191, 0.04) 35%, transparent 60%),
    radial-gradient(ellipse at 100% 0%, rgba(99, 102, 241, 0.06) 0%, rgba(99, 102, 241, 0.02) 35%, transparent 60%),
    radial-gradient(ellipse at 0% 0%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 40%, transparent 70%),
    radial-gradient(ellipse at 100% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.3) 35%, transparent 65%);
}

/* Blurred album-art background layer. Dark mode runs this at opacity
   0.3 over the dark page bg; the same opacity reads as too faint on
   white. Bump it a touch so the album art carries more visual weight
   under the hero text. */
[data-tt-theme="light"] .tb-hero-bg::before {
  opacity: 0.45;
}

/* "About TheoryTab" full-width footer block (Created and Maintained /
   Made with Hookpad / FAQ). Wrapper has inline `background: #0e0f13`
   and section dividers use rgba(255,255,255,0.08). This wrapper sits
   OUTSIDE .tb-hero-bg (sibling, not descendant), so we can't scope
   under it — match the inline style directly. Background now layers
   a soft azure gradient at the top (fading to transparent over the
   first ~240px) over a white base, so the "Maintained by You" section
   transitions in with a brand-tinted wash before settling to white. */
[data-tt-theme="light"] [style*="background: #0e0f13"] {
  background:
    linear-gradient(180deg, rgba(54, 136, 191, 0.06) 0%, rgba(54, 136, 191, 0) 1100px),
    #ffffff !important;
}
/* Mobile: the azure top-wash on these #0e0f13 info/footer blocks reads too
   strong on a small screen — dial the peak from 0.25 down to 0.14. html
   prefix bumps specificity so it beats the rule above. Mobile + light only. */
@media (max-width: 768px) {
  html[data-tt-theme="light"] [style*="background: #0e0f13"] {
    background:
      linear-gradient(180deg, rgba(54, 136, 191, 0.10) 0%, rgba(54, 136, 191, 0) 1100px),
      #ffffff !important;
  }
}

/* Landing-page "About TheoryTab" section — wrapper has an inline
   `padding-left: calc((100vw - 100%) / 2)` (unique to this section,
   the decorative .tb-gradient-band above only has margins). Apply
   the same top-down azure gradient + white base as the song-view's
   Created-and-Maintained section so the two pages feel cohesive. */
[data-tt-theme="light"] [style*="padding-left: calc((100vw - 100%) / 2)"] {
  background:
    linear-gradient(180deg, rgba(54, 136, 191, 0.10) 0%, rgba(54, 136, 191, 0) 1100px),
    #ffffff !important;
}

/* The decorative blue glow band above the About TheoryTab title is tuned
   for the dark theme; on the white light-mode page it reads as a stray
   blue wash. Hide it in light mode only — dark mode keeps the glow. */
[data-tt-theme="light"] .tb-gradient-band {
  display: none !important;
}

/* Landing-page "Anatomy of a TheoryTab" section — primary-dark bg
   (#242424) with white text and a subtle azure radial gradient.
   Extend full-viewport-width via negative-margin / matching-padding
   so the dark block reads as a distinct band, the way the About
   TheoryTab section does just above. */
[data-tt-theme="light"] .max-w-7xl:has(.anatomy-container) {
  background:
    radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(54, 136, 191, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 900px 500px at 50% 100%, rgba(99, 102, 241, 0.10) 0%, transparent 60%),
    #0e0f13 !important;
  margin-left: calc(-1 * (100vw - 100%) / 2) !important;
  margin-right: calc(-1 * (100vw - 100%) / 2) !important;
  padding-left: calc((100vw - 100%) / 2) !important;
  padding-right: calc((100vw - 100%) / 2) !important;
  max-width: none !important;
}
/* Anatomy headings + body copy. The partial sets `color: #fff` on
   the H2 (caught by the .text-white global override → #242424), so
   we have to re-promote it back to white here. Same for the
   description paragraph (`color: #c5cdd6` mapped to #404854). */
[data-tt-theme="light"] .max-w-7xl:has(.anatomy-container) h2 {
  color: #ffffff !important;
}
[data-tt-theme="light"] .max-w-7xl:has(.anatomy-container) p,
[data-tt-theme="light"] .max-w-7xl:has(.anatomy-container) [style*="color: #c5cdd6"] {
  color: rgba(255, 255, 255, 0.82) !important;
}
/* Callout labels inside the anatomy diagram — `<span class="font-medium
   text-white">`. Global `.text-white` maps to #242424; re-promote to
   white in this dark section. */
[data-tt-theme="light"] .max-w-7xl:has(.anatomy-container) .anatomy-tooltip,
[data-tt-theme="light"] .max-w-7xl:has(.anatomy-container) .anatomy-tooltip .text-white {
  color: #ffffff !important;
}
[data-tt-theme="light"] [style*="border-top: 1px solid rgba(255,255,255,0.08)"] {
  border-top-color: rgba(15, 23, 42, 0.08) !important;
}

/* "Become a Contributor" (view-dark.php) and "Learn More" (hookpad-
   promo-dark.php) — both use the azure-border CTA style. The
   onmouseover/onmouseout JS only touches `background`, but the act
   of writing to element.style.* re-serializes the whole inline style
   so #e2e8f0 becomes rgb(226, 232, 240), evading the catch-all on
   mouseout. Force the default text color here so it sticks across
   all states, and override hover. */
[data-tt-theme="light"] a[style*="border: 2px solid #66b3e6"],
[data-tt-theme="light"] a[style*="border: 2px solid rgb(102, 179, 230)"] {
  color: #242424 !important;
}
[data-tt-theme="light"] a[style*="border: 2px solid #66b3e6"]:hover,
[data-tt-theme="light"] a[style*="border: 2px solid rgb(102, 179, 230)"]:hover {
  color: #404854 !important;
  background: rgba(54, 136, 191, 0.22) !important;
}

/* "Contribute a Tab" outline CTA — inline border is
   `rgba(255,255,255,0.15)`, invisible on the light bg. Replace with a
   visible slate border + dark text default, and force dark text on
   hover to win over the JS-set inline color. Both spaceless and spaced
   rgba forms covered since the browser may add spaces when re-
   serializing the style attribute after onmouseover/onmouseout touch. */
[data-tt-theme="light"] a[style*="border: 1px solid rgba(255,255,255,0.15)"],
[data-tt-theme="light"] a[style*="border: 1px solid rgba(255, 255, 255, 0.15)"] {
  border-color: rgba(15, 23, 42, 0.25) !important;
  color: #404854 !important;
}
[data-tt-theme="light"] a[style*="border: 1px solid rgba(255,255,255,0.15)"]:hover,
[data-tt-theme="light"] a[style*="border: 1px solid rgba(255, 255, 255, 0.15)"]:hover {
  background: rgba(15, 23, 42, 0.10) !important;
  border-color: rgba(15, 23, 42, 0.45) !important;
  color: #404854 !important;
}

/* "Made with Hookpad" sidebar card — Learn More CTA. Its dark fill
   (bg-[rgba(20,20,30,0.85)]) stays dark in light mode while the global
   .text-white override flips the label to #242424 → dark-on-dark.
   Fill it with the azure gradient (matching the p-[2px] gradient border
   it already sits in) and force white text so it reads as a primary CTA.
   "Contribute a Tab" below it is the outlined secondary and is already
   legible via the .text-[#c5cdd6] + border-white overrides. */
[data-tt-theme="light"] .tb-sidebar-card a[href="/hookpad"] {
  background: linear-gradient(135deg, rgb(71, 158, 215), rgb(90, 120, 210)) !important;
  color: #ffffff !important;
}
[data-tt-theme="light"] .tb-sidebar-card a[href="/hookpad"]:hover {
  background: linear-gradient(135deg, rgb(58, 138, 192), rgb(74, 102, 188)) !important;
  color: #ffffff !important;
}
/* "Contribute a Tab" secondary CTA (href /theorytab/new) — give it a
   solid white fill so it doesn't pick up the card's azure tint. Border +
   dark text come from the overrides above. */
[data-tt-theme="light"] .tb-sidebar-card a[href*="theorytab/new"] {
  background: #ffffff !important;
  border-width: 2px !important;
}
[data-tt-theme="light"] .tb-sidebar-card a[href*="theorytab/new"]:hover {
  background: #eef3f9 !important;
}

/* FAQ section purple-glow image — scoot it left so the brightest part
   of the glow sits further off the left edge instead of centered. */
[data-tt-theme="light"] [style*="faq-glow.webp"] {
  transform: translateX(-180px);
}

/* Secondary text inside the FAQ section — the catch-all maps #94a3b8
   to tertiary (#74849b), but in this section we want it at secondary
   (#404854). Class scope gives (0,4,0) specificity, beating the
   catch-all's (0,3,0). */
[data-tt-theme="light"] .tb-faq-wrap [style*="color: #94a3b8"],
[data-tt-theme="light"] .tb-faq-wrap [style*="color:#94a3b8"] {
  color: #404854 !important;
}

/* FAQ question/answer bubbles — dark mode uses translucent white
   (rgba(255,255,255,0.08) / 0.12) that disappears on the light page
   bg. Bump to a high-opacity white with a slate border so each
   bubble reads as a distinct card. Open state nudges slightly. */
[data-tt-theme="light"] .tb-faq-item {
  background: rgba(255, 255, 255, 0.80);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
[data-tt-theme="light"] .tb-faq-item.is-open {
  background: #ffffff;
  border-color: rgba(54, 136, 191, 0.35);
}

/* Text inside this footer block (H3, P, button) uses #e2e8f0 / #c5cdd6
   inline. They're outside .tb-hero-bg too, so the catch-all doesn't
   reach. Apply the same palette mapping globally for these specific
   inline values when in light mode. */
[data-tt-theme="light"] [style*="color: #e2e8f0"]:not(.tb-song-stats-card *),
[data-tt-theme="light"] [style*="color:#e2e8f0"]:not(.tb-song-stats-card *) {
  color: #242424 !important;
}
[data-tt-theme="light"] [style*="color: #c5cdd6"]:not(.tb-song-stats-card *),
[data-tt-theme="light"] [style*="color:#c5cdd6"]:not(.tb-song-stats-card *) {
  color: #404854 !important;
}

/* Main content "glass" panel — wraps the player + each major content
   section (About the Key, About the Chord Progressions, etc.). Dark
   version is rgba(14, 15, 19, 0.65) over the blurred album art. In light
   mode, swap to a high-opacity white so the album art still subtly
   peeks through but the surface reads cleanly white. */
[data-tt-theme="light"] .tb-hero-glass {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
/* The first glass panel (section tabs + Hookpad players) gets a slightly
   more transparent fill so the album art reads through behind the player. */
[data-tt-theme="light"] .tb-main-content > .tb-hero-glass:first-of-type {
  background: rgba(255, 255, 255, 0.75);
}

/* Contributors footer (Contributed By / Last Modified By / Analyze /
   How to contribute / Edit / Edit Genres / History / Report an Issue).
   Section labels inline `color: #94a3b8` — bump from the global tertiary
   (#74849b) to secondary (#404854) for stronger presence here. User
   profile links (.tb-dark-link) flip from the global muted-azure
   #1e6fa1 to brand azure #3688bf. Both hex + rgb forms guard against
   Alpine.js inline-style reserialization on the Edit dropdown. */
[data-tt-theme="light"] #toc-contributors [style*="color: #94a3b8"],
[data-tt-theme="light"] #toc-contributors [style*="color: rgb(148, 163, 184)"] {
  color: #404854 !important;
}
/* Icons (.tb-contrib-icon) inherit color via stroke="currentColor" —
   match the section labels at #404854 in this footer specifically. */
[data-tt-theme="light"] #toc-contributors .tb-contrib-icon {
  color: #404854 !important;
}
[data-tt-theme="light"] #toc-contributors .tb-dark-link {
  color: #3688bf !important;
}
[data-tt-theme="light"] #toc-contributors .tb-dark-link:hover {
  color: #2e76a8 !important;
}

/* Charts tab cards (Metrics Radar Chart / BPM / Scale Degrees / etc.).
   Each card has class="tb-dark-card" but is overridden inline with
   `background: rgba(0,0,0,0.55)` to deepen the panel on dark. Reuse
   the About-the-Key container look — soft azure tint with a white
   highlight gradient on top — so the charts read on white. Scoped via
   the Alpine wrapper's x-data attribute (only the charts section uses
   `chartTab`). !important needed to beat the inline rgba(0,0,0,0.55). */
[data-tt-theme="light"] [x-data*="chartTab"] .tb-dark-card {
  /* Flat solid azure-tint (no gradient) so the active tab's solid fill
     above matches the card edge-to-edge with no transition. Keep in
     sync with .tb-chart-tab.active below. */
  background: #f3f8fc !important;
  border-color: rgba(54, 136, 191, 0.35) !important;
}

/* Concept pill (related-concept links). */
[data-tt-theme="light"] .tb-concept-card {
  background: rgba(54, 136, 191, 0.10);
  border-color: rgba(54, 136, 191, 0.45);
  color: #1e6fa1;
}
[data-tt-theme="light"] .tb-concept-card:hover {
  background: rgba(54, 136, 191, 0.20);
  color: #155680;
}

/* ══════════════════════════════════════════════════════════════════════
   SHARED CATCH-ALLS for all dark TheoryTab pages
   These patterns recur on listing, landing, collection, cheat-sheet,
   music-ref, and artist pages. Catch them once at top-level (not
   .tb-hero-bg-scoped) so every page picks them up automatically.
   ══════════════════════════════════════════════════════════════════════ */

/* Layout wrapper gradient — every dark TheoryTab layout sets the
   same inline gradient on its <div> wrapper. Flip to the light
   gradient direction-for-direction. Match both the bare hex AND the
   rgb() form the browser may serialize to. */
[data-tt-theme="light"] [style*="linear-gradient(135deg, #181a24"],
[data-tt-theme="light"] [style*="linear-gradient(135deg,#181a24"],
[data-tt-theme="light"] [style*="linear-gradient(135deg, rgb(24, 26, 36)"] {
  background: linear-gradient(135deg, #f7f9fc 0%, #ffffff 40%, #ffffff 100%) !important;
  background-attachment: fixed !important;
}

/* Music Theory Fundamentals landing — layer a soft azure/indigo glow over
   the shared light wrapper gradient. Scoped via :has(.mr-dark-grid) so only
   the fundamentals page (not every page sharing this wrapper) gets it. */
[data-tt-theme="light"] [style*="linear-gradient(135deg, #181a24"]:has(.mr-dark-grid),
[data-tt-theme="light"] [style*="linear-gradient(135deg,#181a24"]:has(.mr-dark-grid),
[data-tt-theme="light"] [style*="linear-gradient(135deg, rgb(24, 26, 36)"]:has(.mr-dark-grid) {
  background:
    radial-gradient(ellipse 125% 105% at 100% 0%,
      rgba(54, 136, 191, 0.18) 0%,
      rgba(54, 136, 191, 0.13) 16%,
      rgba(54, 136, 191, 0.085) 32%,
      rgba(54, 136, 191, 0.045) 50%,
      rgba(54, 136, 191, 0.018) 68%,
      transparent 88%),
    linear-gradient(135deg, #f7f9fc 0%, #ffffff 45%, #ffffff 100%) !important;
  background-attachment: fixed !important;
}
/* Concept-page header box (back-link + title + description) carries its own
   dark-mode blue gradient + rounded top corners; over the light page glow its
   edges read as a harsh rounded-rectangle line. Flatten it so it blends into
   the glow — the content stays, the box disappears. */
[data-tt-theme="light"] [style*="linear-gradient(180deg, rgba(60, 130, 246, 0.06)"] {
  background: transparent !important;
  border-radius: 0 !important;
}

/* Non-palette grays used inline across listing pages, artist pages,
   cheat sheets, and KeyView. Map to the standard palette.
   #cbd5e1 / #f1f5f9 → secondary, #64748b / #475569 → tertiary.
   Both hex and rgb() forms in case JS touches the style attribute. */
[data-tt-theme="light"] [style*="color: #cbd5e1"],
[data-tt-theme="light"] [style*="color:#cbd5e1"],
[data-tt-theme="light"] [style*="color: rgb(203, 213, 225)"],
[data-tt-theme="light"] [style*="color: #f1f5f9"],
[data-tt-theme="light"] [style*="color:#f1f5f9"],
[data-tt-theme="light"] [style*="color: rgb(241, 245, 249)"] {
  color: #404854 !important;
}
[data-tt-theme="light"] [style*="color: #64748b"],
[data-tt-theme="light"] [style*="color:#64748b"],
[data-tt-theme="light"] [style*="color: rgb(100, 116, 139)"],
[data-tt-theme="light"] [style*="color: #475569"],
[data-tt-theme="light"] [style*="color:#475569"],
[data-tt-theme="light"] [style*="color: rgb(71, 85, 105)"] {
  color: #74849b !important;
}

/* Translucent-white card / pill backgrounds — every dark page uses
   variations of rgba(255,255,255,0.03–0.08) for cards, inputs, hover
   states. Flip to a light slate equivalent that's visible on white. */
[data-tt-theme="light"] [style*="background: rgba(255,255,255,0.03)"],
[data-tt-theme="light"] [style*="background: rgba(255, 255, 255, 0.03)"],
[data-tt-theme="light"] [style*="background: rgba(255,255,255,0.04)"],
[data-tt-theme="light"] [style*="background: rgba(255, 255, 255, 0.04)"],
[data-tt-theme="light"] [style*="background: rgba(255,255,255,0.05)"],
[data-tt-theme="light"] [style*="background: rgba(255, 255, 255, 0.05)"],
[data-tt-theme="light"] [style*="background: rgba(255,255,255,0.06)"],
[data-tt-theme="light"] [style*="background: rgba(255, 255, 255, 0.06)"] {
  background: rgba(15, 23, 42, 0.04) !important;
}

/* Translucent-white borders — invisible on white. */
[data-tt-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.06)"],
[data-tt-theme="light"] [style*="border: 1px solid rgba(255, 255, 255, 0.06)"],
[data-tt-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.08)"],
[data-tt-theme="light"] [style*="border: 1px solid rgba(255, 255, 255, 0.08)"],
[data-tt-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.1)"],
[data-tt-theme="light"] [style*="border: 1px solid rgba(255, 255, 255, 0.1)"],
[data-tt-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.10)"],
[data-tt-theme="light"] [style*="border: 1px solid rgba(255, 255, 255, 0.10)"],
[data-tt-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.12)"],
[data-tt-theme="light"] [style*="border: 1px solid rgba(255, 255, 255, 0.12)"],
[data-tt-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.14)"],
[data-tt-theme="light"] [style*="border: 1px solid rgba(255, 255, 255, 0.14)"] {
  border-color: rgba(15, 23, 42, 0.12) !important;
}

/* Inline border-bottom dividers using translucent white. */
[data-tt-theme="light"] [style*="border-bottom: 1px solid rgba(255,255,255,0.06)"],
[data-tt-theme="light"] [style*="border-bottom: 1px solid rgba(255, 255, 255, 0.06)"],
[data-tt-theme="light"] [style*="border-bottom: 1px solid rgba(255,255,255,0.10)"],
[data-tt-theme="light"] [style*="border-bottom: 1px solid rgba(255, 255, 255, 0.10)"],
[data-tt-theme="light"] [style*="border-bottom: 1px solid rgba(255,255,255,0.12)"],
[data-tt-theme="light"] [style*="border-bottom: 1px solid rgba(255, 255, 255, 0.12)"] {
  border-bottom-color: rgba(15, 23, 42, 0.10) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   LISTING PAGES — browse-dark, chart-*-dark, recently-added/edited,
   partial-dark-song-grid (all wrapped by advanced-search-dark layout)
   ══════════════════════════════════════════════════════════════════════ */

/* Letter pills (A B C D … for alphabetical browse) + pagination numbers.
   Active state's hardcoded blue #60a5fa flips to brand azure. */
[data-tt-theme="light"] .br-letter,
[data-tt-theme="light"] .br-page {
  color: #404854 !important;
}
[data-tt-theme="light"] .br-letter:hover,
[data-tt-theme="light"] .br-page:hover {
  color: #242424 !important;
  background: rgba(54, 136, 191, 0.08) !important;
  border-color: rgba(54, 136, 191, 0.30) !important;
}
[data-tt-theme="light"] .br-letter.active,
[data-tt-theme="light"] .br-page.active {
  background: rgba(54, 136, 191, 0.18) !important;
  border-color: #3688bf !important;
  color: #242424 !important;
}

/* List items / titles / breadcrumbs. */
[data-tt-theme="light"] .br-list-item,
[data-tt-theme="light"] .br-list-item a { color: #242424 !important; }
[data-tt-theme="light"] .br-list-item:hover,
[data-tt-theme="light"] .br-list-item a:hover { color: #000000 !important; }
[data-tt-theme="light"] .br-list-artist { color: #404854 !important; }
[data-tt-theme="light"] .br-breadcrumbs,
[data-tt-theme="light"] .br-breadcrumbs a { color: #74849b !important; }
[data-tt-theme="light"] .br-breadcrumbs a:hover { color: #404854 !important; }
[data-tt-theme="light"] .br-breadcrumbs .br-sep { color: #74849b !important; }
[data-tt-theme="light"] .br-title { color: #242424 !important; }
[data-tt-theme="light"] .br-subtitle { color: #404854 !important; }

/* Song grid cards (partial-dark-song-grid). */
[data-tt-theme="light"] .song-card { color: #242424 !important; }
[data-tt-theme="light"] .song-card:hover { color: #000000 !important; }
[data-tt-theme="light"] .song-thumb {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}
[data-tt-theme="light"] .song-artist { color: #404854 !important; }
/* Placeholder svg stroke in fallback (#475569) — handled by global
   #475569 → #74849b mapping above, but rect stroke needs explicit
   attribute selector since it's not in `style=` form. */
[data-tt-theme="light"] svg [stroke="#475569"] {
  stroke: #74849b !important;
}

/* ══════════════════════════════════════════════════════════════════════
   BROWSE + POPULAR PROGRESSIONS — browse-progressions-dark,
   progressions-index-dark, progressions-index-dark-marquee,
   partial-progression-2b-dark
   ══════════════════════════════════════════════════════════════════════ */

/* Browse-progressions hero card. */
[data-tt-theme="light"] .bp-hero {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(54, 136, 191, 0.22) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}
[data-tt-theme="light"] .bp-hero-title { color: #242424 !important; }
[data-tt-theme="light"] .bp-hero-subtitle { color: #404854 !important; }
[data-tt-theme="light"] .bp-hero-subtitle-link { color: #3688bf !important; }
[data-tt-theme="light"] .bp-hero-subtitle-link:hover { color: #2e76a8 !important; }
[data-tt-theme="light"] .bp-songs-container {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(54, 136, 191, 0.18) !important;
  box-shadow: none !important;
}
[data-tt-theme="light"] .bp-songs-count { color: #404854 !important; }
[data-tt-theme="light"] .bp-songs-more-link { color: #3688bf !important; }
[data-tt-theme="light"] .bp-songs-more-link:hover { color: #2e76a8 !important; }
[data-tt-theme="light"] .bp-related-card {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}
[data-tt-theme="light"] .bp-related-card:hover {
  background: #ffffff !important;
  border-color: rgba(54, 136, 191, 0.35) !important;
}

/* Page background — very subtle top-to-bottom wash from white into a
   slightly darker gray. The page's fixed ::before glows paint above
   this (negative z-index pseudo) so the azure/purple tints still read. */
[data-tt-theme="light"] .bp-page {
  background: linear-gradient(180deg, #ffffff 0%, #e9ecf0 100%);
}

/* Browse-progressions page text — base color, breadcrumbs, song-marquee
   card titles/artists, related-section heading + card labels, MIDI
   button, and the (clipped) hero player chrome whose dark version
   hardcodes #e2e8f0 on every span. */
[data-tt-theme="light"] .bp-page { color: #242424 !important; }
[data-tt-theme="light"] .bp-breadcrumbs,
[data-tt-theme="light"] .bp-breadcrumbs a,
[data-tt-theme="light"] .bp-breadcrumbs .bp-sep { color: #74849b !important; }
[data-tt-theme="light"] .bp-breadcrumbs a:hover { color: #404854 !important; }
[data-tt-theme="light"] .bp-song-card-title { color: #242424 !important; }
[data-tt-theme="light"] .bp-song-card:hover .bp-song-card-title { color: #000000 !important; }
[data-tt-theme="light"] .bp-song-card-artist { color: #404854 !important; }
[data-tt-theme="light"] .bp-related-title { color: #242424 !important; }
[data-tt-theme="light"] .bp-related-card-name { color: #404854 !important; }
[data-tt-theme="light"] .bp-related-card:hover .bp-related-card-name { color: #242424 !important; }
[data-tt-theme="light"] .bp-midi-btn { color: #404854 !important; }
[data-tt-theme="light"] .bp-midi-btn:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .bp-hero-player,
[data-tt-theme="light"] .bp-hero-player a,
[data-tt-theme="light"] .bp-hero-player div,
[data-tt-theme="light"] .bp-hero-player span { color: #242424 !important; }
[data-tt-theme="light"] .bp-hero-player svg { fill: #242424 !important; }

/* Popular progressions nav pills + cards. */
[data-tt-theme="light"] .prog-nav-item {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  color: #404854 !important;
}
[data-tt-theme="light"] .prog-nav-item:hover {
  background: rgba(54, 136, 191, 0.08) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .prog-sort-label { color: #404854 !important; }
[data-tt-theme="light"] .prog-sort-trigger { color: #404854 !important; }
[data-tt-theme="light"] .prog-sort-menu {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(54, 136, 191, 0.25) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12) !important;
}
[data-tt-theme="light"] .prog-section-title {
  color: #242424 !important;
  /* Dark version's rgba(255,255,255,0.06) divider vanishes on white. */
  border-bottom-color: rgba(15, 23, 42, 0.14) !important;
}
[data-tt-theme="light"] .prog-section-sub { color: #404854 !important; }
/* Difficulty nav-card title/desc — base is light gray (#c5cdd6 / #64748b),
   which reads as faded on the white cards. Darken to the palette. */
[data-tt-theme="light"] .prog-nav-item-title { color: #242424 !important; }
[data-tt-theme="light"] .prog-nav-item-desc { color: #404854 !important; }
/* Tone down the decorative purple/blue page glow (the radials in the
   .br-main / .bp-page ::before) — barely-there over the light page's
   white-to-gray gradient. All viewports; dark keeps the original glow. */
[data-tt-theme="light"] .br-main::before,
[data-tt-theme="light"] .bp-page::before {
  background:
    radial-gradient(ellipse 80% 60% at 55% 25%, rgba(100, 60, 200, 0.045) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 75% 55%, rgba(70, 50, 180, 0.03) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 30% 85%, rgba(40, 100, 220, 0.05) 0%, transparent 65%) !important;
}
[data-tt-theme="light"] .prog-card {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(54, 136, 191, 0.32) !important;
  box-shadow: none !important;
}
[data-tt-theme="light"] .prog-card:hover { box-shadow: none !important; }
[data-tt-theme="light"] .prog-card-name { color: #242424 !important; }

/* Marquee right-side panel (dark sub-panel, rgba(0,0,0,0.18) bg). */
[data-tt-theme="light"] .prog-tabs-marquee {
  background: rgba(54, 136, 191, 0.06) !important;
  border-left-color: rgba(54, 136, 191, 0.18) !important;
}
[data-tt-theme="light"] .prog-tabs-marquee-meta { color: #404854 !important; }
[data-tt-theme="light"] .prog-tabs-marquee-meta a { color: #3688bf !important; }
[data-tt-theme="light"] .prog-tab-row { color: #242424 !important; }
[data-tt-theme="light"] .prog-tab-row:hover {
  color: #000000 !important;
  background: rgba(54, 136, 191, 0.08) !important;
}
[data-tt-theme="light"] .prog-tab-row .artist-name { color: #404854 !important; }

/* ══════════════════════════════════════════════════════════════════════
   THEORYTAB LANDING — index-guest-dark + partials
   ══════════════════════════════════════════════════════════════════════ */

/* Marquee card body (solid dark navy #0f1a30 → light azure-tinted). */
[data-tt-theme="light"] .tt-marquee-card {
  background: rgba(54, 136, 191, 0.08) !important;
  border-color: rgba(54, 136, 191, 0.22) !important;
}

/* Marquee hero radial-gradient glow (emitted via <style> block inside
   the PHP — not an inline attribute, so we override the rendered rule
   here directly). */
[data-tt-theme="light"] .tt-marquee-hero::before {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(54, 136, 191, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 50%) !important;
}

/* Top picks + Tab of the Day cards — both use the
   `rgba(var(--marquee-rgb, ...), 0.9)` per-thumbnail color trick.
   The CSS var is set by JS after decoding the thumbnail. Light
   fallback assumes a light slate before JS resolves. */
[data-tt-theme="light"] .tt-top-picks .tb-song-card,
[data-tt-theme="light"] .tt-tod-card {
  background: rgba(var(--marquee-rgb, 230, 240, 250), 0.35) !important;
  border-color: rgba(54, 136, 191, 0.22) !important;
}

/* Horizontal scroll arrows on landing rows. */
[data-tt-theme="light"] .tt-hscroll-arrow {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
  color: #404854 !important;
}
[data-tt-theme="light"] .tt-hscroll-arrow:hover { color: #242424 !important; }

/* Section dividers under "Recently Added" etc. */
[data-tt-theme="light"] .recently-added-header {
  border-bottom-color: rgba(15, 23, 42, 0.10) !important;
}
/* Header text + card titles for the shared "Recently Added" strip
   (partial-charts.php — also rendered on collection pages). Artists were
   already covered by the .song-artist rule above; the heading h2 and the
   card (whose color the song title inherits) were still #fff/#e2e8f0. */
[data-tt-theme="light"] .recently-added-header h2 { color: #242424 !important; }
[data-tt-theme="light"] .recently-added-header a.view-all { color: #74849b !important; }
[data-tt-theme="light"] .recently-added-header a.view-all:hover { color: #242424 !important; }
[data-tt-theme="light"] .recently-added-card { color: #242424 !important; }
[data-tt-theme="light"] .recently-added-card:hover { color: #000000 !important; }

/* Landing-page background glows — apply directly to the page-content
   wrapper (`<div class="text-white overflow-x-hidden">` at the top
   of index-guest-dark.php). Adding the bg to that element instead
   of the layout-wrapper means we don't depend on `:has()` selector
   support and the glows render under all the landing content. */
[data-tt-theme="light"] .text-white.overflow-x-hidden {
  background:
    radial-gradient(ellipse 1100px 520px at 12% 0%, rgba(54, 136, 191, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 900px 460px at 90% 6%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 1000px 650px at 98% 68%, rgba(54, 136, 191, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 1400px 700px at 50% 60%, rgba(54, 136, 191, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 800px 500px at 25% 92%, rgba(99, 102, 241, 0.08) 0%, transparent 65%) !important;
}
/* Mobile: the desktop glows above are sized 1000–1400px and positioned by
   percent, so on a ~390px single-column page they blow up huge and the
   mid-page azure (0.28 @ 98% 68%) washes straight through the translucent
   cards, reading as if it sits in front of them. Shrink + soften them so the
   glow recedes behind the containers. Mobile + light only — desktop unchanged. */
@media (max-width: 767px) {
  [data-tt-theme="light"] .text-white.overflow-x-hidden {
    background:
      radial-gradient(ellipse 650px 380px at 12% 0%, rgba(54, 136, 191, 0.10) 0%, transparent 55%),
      radial-gradient(ellipse 560px 340px at 92% 3%, rgba(99, 102, 241, 0.06) 0%, transparent 55%),
      radial-gradient(ellipse 700px 520px at 96% 66%, rgba(54, 136, 191, 0.09) 0%, transparent 62%),
      radial-gradient(ellipse 760px 560px at 45% 58%, rgba(54, 136, 191, 0.045) 0%, transparent 68%) !important;
  }
}

/* Landing page sets `html, body { background-color: #000000 !important }`
   in its own <style> block, which beats our top-of-file body rule on
   source order. Bump specificity with `html[data-tt-theme="light"]` so
   we win regardless. */
html[data-tt-theme="light"],
html[data-tt-theme="light"] body {
  background-color: #ffffff !important;
}

/* Generic song card + sidebar card (used across landing rows). Classes
   live in inline <style> blocks (not inline `style=""`), so the
   substring catch-alls don't reach them. Map directly. */
[data-tt-theme="light"] .tb-song-card { color: #242424 !important; }
[data-tt-theme="light"] .tb-song-card:hover { color: #000000 !important; }
/* Right-column sidebar cards (Chord Trends / About TheoryTab / etc.).
   White highlight at the top fading to a light azure base — same
   family as the About-the-Key + chart cards. `.tt-tod-card` excluded
   so its dynamic per-album palette stays intact. */
[data-tt-theme="light"] .tb-sidebar-card:not(.tt-tod-card) {
  background:
    linear-gradient(rgba(54, 136, 191, 0.04), rgba(54, 136, 191, 0.04)),
    #ffffff !important;
  border-color: rgba(54, 136, 191, 0.28) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .tb-sidebar-card:not(.tt-tod-card):hover {
  background:
    linear-gradient(rgba(54, 136, 191, 0.08), rgba(54, 136, 191, 0.08)),
    #ffffff !important;
  border-color: rgba(54, 136, 191, 0.45) !important;
  color: #000000 !important;
}

/* Tab of the Day keeps its dynamic per-album band color. The JS chooses the
   title/artist text color from the album's RAW brightness (>120 -> dark
   text, else white), so the band must render at that same brightness for
   the contrast to hold. In dark mode the band is album@0.75 over the dark
   page; in light mode the 0.75 alpha composites over white and washes the
   band lighter than its raw color, breaking the white-text pairing (e.g.
   "Let It Go"). Render the band at full opacity in light mode so its
   brightness equals the raw album color the JS threshold is calibrated on. */
[data-tt-theme="light"] .tb-sidebar-card.tt-tod-card {
  background: rgba(var(--marquee-rgb, 30, 30, 40), 1) !important;
  border-color: rgba(var(--marquee-rgb, 30, 30, 40), 1) !important;
}
[data-tt-theme="light"] .tb-sidebar-card.tt-tod-card:hover {
  background:
    linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
    rgba(var(--marquee-rgb, 30, 30, 40), 1) !important;
}

/* "Chord Trends" sidebar card — mirror the actual Trends page bg
   (dark navy + trends-hero-bg.webp image with a 0.25 black overlay)
   so the card visually previews where it links to. Text inside flips
   to white to read on the dark bg. Targeted by href so neither the
   selector hits other sidebar cards nor relies on a class hook. */
[data-tt-theme="light"] a.tb-sidebar-card[href*="chordProgressionNode"],
[data-tt-theme="light"] a.tb-sidebar-card[href*="/trends"] {
  background:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    #070f24 url('/images/controllers/chordProgressionNode/trends-hero-bg.webp') center top / cover no-repeat !important;
  border-color: rgba(54, 136, 191, 0.45) !important;
  color: #ffffff !important;
}
[data-tt-theme="light"] a.tb-sidebar-card[href*="chordProgressionNode"]:hover,
[data-tt-theme="light"] a.tb-sidebar-card[href*="/trends"]:hover {
  background:
    linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
    #070f24 url('/images/controllers/chordProgressionNode/trends-hero-bg.webp') center top / cover no-repeat !important;
  color: #ffffff !important;
}
/* Re-promote text inside the Trends card to white — the global
   Tailwind .text-white / .text-[#c5cdd6] overrides above would
   otherwise force them to the dark palette. Higher specificity
   (4 attrs/classes vs 2) wins. */
[data-tt-theme="light"] a.tb-sidebar-card[href*="chordProgressionNode"] .text-white,
[data-tt-theme="light"] a.tb-sidebar-card[href*="/trends"] .text-white {
  color: #ffffff !important;
}
[data-tt-theme="light"] a.tb-sidebar-card[href*="chordProgressionNode"] .text-\[\#c5cdd6\],
[data-tt-theme="light"] a.tb-sidebar-card[href*="/trends"] .text-\[\#c5cdd6\] {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Marquee headline (guest hero — static text above the moving rows). */
[data-tt-theme="light"] .tt-marquee-headline-sub { color: #3688bf !important; }
[data-tt-theme="light"] .tt-marquee-headline h1 { color: #242424 !important; }
[data-tt-theme="light"] .tt-marquee-headline h1 span { color: #404854 !important; }
[data-tt-theme="light"] .tt-marquee-headline-desc { color: #404854 !important; }

/* Top Picks section heading + divider (logged-in hero). The `<h2>`
   color is handled by the .text-white override below; the header's
   `border-bottom: 1px solid rgba(255,255,255,0.12)` lives in a
   `<style>` block (not inline) so the catch-all doesn't reach it. */
[data-tt-theme="light"] .tt-top-picks-title { color: #242424 !important; }
[data-tt-theme="light"] .tt-top-picks-header {
  border-bottom-color: rgba(15, 23, 42, 0.12) !important;
}

/* Top Picks card drop shadow — dark mode uses a heavy 0.7-alpha drop
   shadow (`0 16px 36px -20px rgba(0, 0, 0, 0.7)`) that reads as a
   smudge of dark below the card on a white page. Soften it. */
[data-tt-theme="light"] .tt-top-picks .tb-song-card {
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.18) !important;
}

/* Top Picks scroll row's right-edge fade — dark mode uses a
   `mask-image` that fades the cards to transparent, revealing the
   dark page bg. On a white page that "to transparent" reads as
   white. Overlay a gradient on the non-scrolling wrapper so the
   fade looks like it's going to tertiary slate. The wrapper has
   `position: relative` and the arrows sit at z-index 2, so the
   overlay at z-index 1 stays below the arrow. */
[data-tt-theme="light"] .tt-top-picks-scroller::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 220px;
  /* Backdrop blur the cards under this overlay instead of darkening
     them. mask-image controls *how much* blur is visible across the
     width — fully transparent on the left (no blur visible) ramping
     to opaque on the right (full blur). The mask softens left/right
     edges; top/bottom are also feathered by the inset stops. */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 25%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.85) 90%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 25%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.85) 90%,
    rgba(0, 0, 0, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Tab-of-the-Day spotlight eyebrow pill (logged-in hero). */
[data-tt-theme="light"] .tt-tod-spotlight-eyebrow {
  background: rgba(54, 136, 191, 0.92) !important;
  color: #ffffff !important;
}

/* Stretch the Tab-of-the-Day spotlight to match the height of the
   `.tt-top-picks` sibling so its bottom aligns with the bottom of
   the Top Picks cards. Dark default uses `align-self: flex-start`
   which caps tod at the sum of thumb + meta heights; flipping to
   stretch lets the flex container's cross-axis size flow through.
   Use flex-column + `flex: 1` on the thumb so the image area grows
   to fill the extra space (rather than leaving an empty band of the
   spotlight bg below the meta). */
[data-tt-theme="light"] .tt-tod-spotlight {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
}
[data-tt-theme="light"] .tt-tod-spotlight-thumb {
  flex: 1 !important;
  height: auto !important;
  min-height: 250px !important;
}

/* NOTE: marquee/top-picks/TOD card BAND backgrounds + title/artist
   text colors are *intentionally not overridden*. They use
   `rgba(var(--marquee-rgb, 30, 30, 40), 0.9)` and
   `var(--marquee-title, #fff)` etc., with the CSS variables painted
   in by the per-card JS palette script after the thumbnail decodes.
   That gives each card the dominant-color treatment from its
   artwork — keep it intact in both themes. */

/* "TheoryTab Talkdata" card (legacy promo card on landing). Slight azure
   gradient over white so the cards pick up the theme accent. */
[data-tt-theme="light"] .tb-talkdata-card {
  background:
    linear-gradient(25deg, rgba(54, 136, 191, 0.14) 0%, rgba(54, 136, 191, 0.04) 45%, rgba(255, 255, 255, 0) 100%),
    #ffffff !important;
  border-color: rgba(54, 136, 191, 0.22) !important;
}
/* Chord Progression Explorer card — its image is a transparent-bubble PNG
   that would otherwise sit on the white card. Fill the image container
   with the Trends page bg (dark navy + trends-hero-bg.webp + 0.25 black
   overlay) so the bubbles preview where the card links. */
[data-tt-theme="light"] a.tb-talkdata-card[href*="chordProgressionNode"] > div:first-child {
  background:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    #070f24 url('/images/controllers/chordProgressionNode/trends-hero-bg.webp') center top / cover no-repeat !important;
}
/* Data-Driven Insights card — the infographics-cover.png is transparent,
   so drop the dark gradient (set inline in the markup) and let it sit on
   the light card. !important beats the un-flagged inline style. */
[data-tt-theme="light"] a.tb-talkdata-card[href*="infographics"] > div:first-child {
  background: transparent !important;
}
/* Mobile: the Talk Data cards become wide dark banners with an overlaid
   title (see the view's max-width:768px block). In light mode the rules
   above give them a light card fill and .text-white->#242424 darkens the
   title — so the bottom two cards (whose image containers are transparent /
   uncompiled) go pale with unreadable dark titles. On mobile, restore a dark
   banner fill and a white title. The top card's image container already
   paints its own dark trends bg over the fill, so only the bottom two visibly
   darken. Mobile only — desktop keeps the light cards. */
@media (max-width: 767px) {
  [data-tt-theme="light"] .tb-talkdata-card {
    background: linear-gradient(135deg, #1a1c24 0%, #0e0f13 100%) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }
  [data-tt-theme="light"] .tb-talkdata-card > div:nth-child(2) {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  }
}

/* ── Tailwind utility overrides on landing-page Top Tabs / Recently
   Added / Collections rows ───────────────────────────────────────
   These sections use Tailwind utilities (`text-white`,
   `text-[#c5cdd6]`, `border-white/[0.12]`, `hover:text-white`) for
   text + dividers — not inline `style=` or class-based CSS. Override
   the utilities themselves so the static rows pick up the palette.
   The compiled selectors use backslash-escaped brackets/slashes. */
[data-tt-theme="light"] .text-white {
  color: #242424 !important;
}
[data-tt-theme="light"] .text-\[\#c5cdd6\] {
  color: #404854 !important;
}
[data-tt-theme="light"] .hover\:text-white:hover {
  color: #242424 !important;
}
[data-tt-theme="light"] .text-slate-200 {
  color: #404854 !important;
}
[data-tt-theme="light"] .border-white\/\[0\.12\] {
  border-color: rgba(15, 23, 42, 0.12) !important;
}
[data-tt-theme="light"] .border-white\/10 {
  border-color: rgba(15, 23, 42, 0.10) !important;
}
[data-tt-theme="light"] .bg-white\/5,
[data-tt-theme="light"] .bg-white\/\[0\.08\] {
  background-color: rgba(15, 23, 42, 0.04) !important;
}
[data-tt-theme="light"] .hover\:bg-white\/\[0\.08\]:hover {
  background-color: rgba(54, 136, 191, 0.08) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   COLLECTIONS / SAVED SONGS — theorytabCollection/{saved,collections,
   orderedList}-dark.php
   ══════════════════════════════════════════════════════════════════════ */

[data-tt-theme="light"] .saved-title-input {
  background: rgba(15, 23, 42, 0.04) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .new-playlist-cta {
  border-color: rgba(54, 136, 191, 0.45) !important;
  color: #3688bf !important;
}
[data-tt-theme="light"] .new-playlist-cta:hover {
  background: rgba(54, 136, 191, 0.10) !important;
  color: #2e76a8 !important;
}
[data-tt-theme="light"] .new-playlist-popover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(54, 136, 191, 0.25) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12) !important;
}

/* Collections directory list. */
[data-tt-theme="light"] .dir-search {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}
[data-tt-theme="light"] .dir-search input { color: #242424 !important; }
[data-tt-theme="light"] .dir-chip {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  color: #404854 !important;
}
[data-tt-theme="light"] .dir-chip:hover {
  background: rgba(54, 136, 191, 0.08) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .dir-chip.active {
  background: rgba(54, 136, 191, 0.18) !important;
  border-color: #3688bf !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .dir-chip.active .count { color: #2e76a8 !important; }

/* Collection rows (orderedList-dark). */
[data-tt-theme="light"] .collection-item {
  border-bottom-color: rgba(15, 23, 42, 0.06) !important;
}
[data-tt-theme="light"] .collection-item:hover {
  background: rgba(54, 136, 191, 0.05) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   CHEAT SHEET — cheatsheet-dark.php layout + KeyView.php component +
   per-key content pages (cheatSheet/key, key-popularity, songMetrics
   about, theorytab/view/cheat-sheet, cheat-sheet-multiple-keys)
   ══════════════════════════════════════════════════════════════════════ */

/* Layout's #cheatsheet-dark typography block. Mirror the same
   selectors with the light palette. */
[data-tt-theme="light"] #cheatsheet-dark { color: #404854 !important; }
[data-tt-theme="light"] #cheatsheet-dark h1 {
  color: #242424 !important;
  border-bottom-color: rgba(54, 136, 191, 0.45) !important;
}
[data-tt-theme="light"] #cheatsheet-dark h2 {
  color: #242424 !important;
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}
[data-tt-theme="light"] #cheatsheet-dark h3 { color: #242424 !important; }
[data-tt-theme="light"] #cheatsheet-dark b,
[data-tt-theme="light"] #cheatsheet-dark strong { color: #242424 !important; }
[data-tt-theme="light"] #cheatsheet-dark p { color: #404854 !important; }
[data-tt-theme="light"] #cheatsheet-dark i { color: #74849b !important; }
[data-tt-theme="light"] #cheatsheet-dark a { color: #3688bf !important; }
[data-tt-theme="light"] #cheatsheet-dark a:hover { color: #2e76a8 !important; }
[data-tt-theme="light"] #cheatsheet-dark .text-blue-600 { color: #3688bf !important; }
[data-tt-theme="light"] #cheatsheet-dark .hover\:text-blue-800:hover { color: #2e76a8 !important; }

/* Key-signature <img> inverted filter — remove in light mode so the
   already-azure-recolored source SVG reads correctly. */
[data-tt-theme="light"] #cheatsheet-dark img[src*="key-signatures"] {
  filter: none !important;
}

/* KeyView sidebar + card classes (.cs-*) — mirror the .tb-key-card
   patterns from the song view. */
[data-tt-theme="light"] .cs-sidebar-card {
  background: linear-gradient(180deg, #f1f4f8 0%, #eaedf2 100%) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}
[data-tt-theme="light"] .cs-all-keys-toggle {
  color: #404854 !important;
}
[data-tt-theme="light"] .cs-all-keys-toggle:hover {
  background: rgba(54, 136, 191, 0.08) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .cs-song-item { color: #242424 !important; }
[data-tt-theme="light"] .cs-song-item:hover {
  background: rgba(54, 136, 191, 0.06) !important;
  color: #000000 !important;
}
/* "Songs In <key>" sidebar — the song title (.song-name) is faint #e2e8f0
   (the artist line is already dark). */
[data-tt-theme="light"] #cheatsheet-dark .song-name { color: #242424 !important; }
[data-tt-theme="light"] .cs-all-cheatsheets {
  color: #404854 !important;
}
[data-tt-theme="light"] .cs-all-cheatsheets:hover {
  background: rgba(54, 136, 191, 0.05) !important;
  color: #242424 !important;
}

/* Per-key cards in the cheat-sheet (the big azure-tinted blocks). */
[data-tt-theme="light"] .cs-key-card,
[data-tt-theme="light"] .cs-progression-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 65%),
    rgba(54, 136, 191, 0.08) !important;
  border-color: rgba(54, 136, 191, 0.25) !important;
}
/* "All Key Cheat Sheets" listing grid — drop the card background/border so the
   key names read as plain text links (subtle hover retained). */
[data-tt-theme="light"] .cs-key-cards-section .cs-key-card {
  background: transparent !important;
  border-color: transparent !important;
}
[data-tt-theme="light"] .cs-key-cards-section .cs-key-card:hover {
  background: rgba(54, 136, 191, 0.08) !important;
}
/* Hover states that flip text to white/light azure in dark mode — keep dark.
   The non-index listing has an extra-specific :not(--index) hover rule
   (#93c5fd), so match its specificity to win. */
[data-tt-theme="light"] .cs-key-card:hover,
[data-tt-theme="light"] .cs-key-card:hover .cs-key-card-title,
[data-tt-theme="light"] .cs-key-cards-section:not(.cs-key-cards-section--index) .cs-key-card:hover .cs-key-card-title { color: #242424 !important; }
[data-tt-theme="light"] .cs-song-item:hover .song-name { color: #000000 !important; }
[data-tt-theme="light"] .cs-all-keys-list > div > a:hover,
[data-tt-theme="light"] .cs-relkeys-mobile-slot ul li a:hover { color: #242424 !important; }

/* Mini piano keyboard inside cheat-sheet cards — mirror song-view's
   .tb-key-card piano: brand-azure for active, light sky-azure with
   slate outline for inactive. */
[data-tt-theme="light"] .cs-key-card svg [fill="#66b3e6"],
[data-tt-theme="light"] .cs-key-card svg [stroke="#66b3e6"] {
  fill: #3688bf !important;
}
[data-tt-theme="light"] .cs-key-card svg rect[fill="#2a2f3e"],
[data-tt-theme="light"] .cs-key-card svg rect[fill="#111318"] {
  fill: #a9cfe8 !important;
}
[data-tt-theme="light"] .cs-key-card svg rect[stroke="rgba(255,255,255,0.15)"],
[data-tt-theme="light"] .cs-key-card svg rect[stroke="rgba(255,255,255,0.1)"] {
  stroke: rgba(15, 23, 42, 0.35) !important;
  stroke-width: 0.7 !important;
}

/* Popular chords grid + rank labels. */
[data-tt-theme="light"] .cs-popular-chords-grid {
  border-color: rgba(15, 23, 42, 0.10) !important;
}
[data-tt-theme="light"] .cs-pc-row:hover {
  background: rgba(54, 136, 191, 0.06) !important;
}
[data-tt-theme="light"] .cs-pc-rank { color: #404854 !important; }
[data-tt-theme="light"] .cs-pc-row.is-playing .cs-pc-rank {
  color: #3688bf !important;
}

/* Mode spectrum (the dot + label horizontal line). */
[data-tt-theme="light"] .cs-mode-dot {
  background: #ffffff !important;
  border-color: rgba(54, 136, 191, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(54, 136, 191, 0.18), 0 1px 2px rgba(15, 23, 42, 0.15) !important;
}
[data-tt-theme="light"] .cs-mode-label { color: #404854 !important; }
/* Spectrum line: light azure -> brand azure (#3688bf) for the darker end. */
[data-tt-theme="light"] .cs-modes-line::before {
  background: linear-gradient(90deg, #dbe7f1 0%, #3688bf 100%) !important;
}
/* Extend each point's box upward (net-zero via the matching negative margin)
   so the hover highlight covers the whole dot + glow instead of being cut off
   at the line. */
[data-tt-theme="light"] .cs-mode-point {
  padding: 46px 42px 28px !important;
  margin-top: -46px !important;
}
[data-tt-theme="light"] .cs-mode-point:hover {
  /* A circular glow centered on the dot that reaches full transparency at a
     radius (38px) well inside every box edge (top 46px, sides 42px), so no box
     edge ever clips it — bigger + soft, gradual falloff. */
  background: radial-gradient(circle 38px at 50% 46px, rgba(54, 136, 191, 0.22) 0%, rgba(54, 136, 191, 0.07) 55%, transparent 100%) !important;
}
[data-tt-theme="light"] .cs-mode-point.is-current .cs-mode-dot {
  background: #3688bf !important;
  border-color: #3688bf !important;
}
/* BRIGHTER/DARKER end labels + the "Hover a mode…" info line + its hover
   readout — map to the palette; hovered mode label stays dark (was #fff). */
[data-tt-theme="light"] .cs-modes-end { color: #74849b !important; }
[data-tt-theme="light"] .cs-modes-info-hint,
[data-tt-theme="light"] .cs-modes-info-sep { color: #74849b !important; }
[data-tt-theme="light"] .cs-modes-info-name { color: #242424 !important; }
[data-tt-theme="light"] .cs-modes-info-mood,
[data-tt-theme="light"] .cs-modes-info-formula { color: #404854 !important; }
[data-tt-theme="light"] .cs-mode-point:hover .cs-mode-label,
[data-tt-theme="light"] .cs-mode-point.is-hovered .cs-mode-label,
[data-tt-theme="light"] .cs-mode-point:focus-visible .cs-mode-label { color: #242424 !important; }

/* Scrollbar in the cheat-sheet sidebar. */
[data-tt-theme="light"] .cs-sidebar {
  scrollbar-color: rgba(15, 23, 42, 0.20) rgba(15, 23, 42, 0.04);
}

/* ── Key Popularity page (cheatSheet/key-popularity.php, kp-*). Key names are
   azure links via #cheatsheet-dark a; fix the faint counts, rank markers,
   the view toggle, and the signatures-view key cards. ── */
[data-tt-theme="light"] .kp-count { color: #74849b !important; }
/* Mode-column card + view-toggle pill borders — make visible (#74849b). */
[data-tt-theme="light"] .kp-scale-card,
[data-tt-theme="light"] .kp-mode-toggle { border-color: #74849b !important; }
/* Mode-column "(16%)" is a bare text node in the <li> (key name is the azure
   <a>); color the li so the percentage reads tertiary. */
[data-tt-theme="light"] #cheatsheet-dark .kp-scale-list li { color: #74849b !important; }
[data-tt-theme="light"] .kp-allkeys-list[data-mode="compact"] .kp-count,
[data-tt-theme="light"] .kp-allkeys-list[data-mode="signatures"] .kp-count,
[data-tt-theme="light"] .kp-allkeys-list[data-mode="compact"] .kp-count::before,
[data-tt-theme="light"] .kp-allkeys-list[data-mode="compact"] .kp-count::after { color: #74849b !important; }
/* Rank numbers (the "1." "2." markers) — primary #242424. */
[data-tt-theme="light"] .kp-scale-list li::marker,
[data-tt-theme="light"] .kp-allkeys-list li::marker,
[data-tt-theme="light"] .kp-allkeys-list[data-mode="compact"] li::marker,
[data-tt-theme="light"] .kp-allkeys-list[data-mode="signatures"] li::before { color: #242424 !important; }
/* Compact / With-key-signature view toggle. */
[data-tt-theme="light"] .kp-mode-btn { color: #404854 !important; }
[data-tt-theme="light"] .kp-mode-btn:hover,
[data-tt-theme="light"] .kp-mode-btn--active,
[data-tt-theme="light"] .kp-mode-btn--active:hover { color: #242424 !important; }
[data-tt-theme="light"] .kp-mode-btn--active { background: rgba(54, 136, 191, 0.16) !important; }
/* Signatures-view key cards (translucent white bg + #e2e8f0 text). */
[data-tt-theme="light"] .kp-allkeys-list[data-mode="signatures"] .kp-allkeys-link {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .cs-sidebar::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.04) !important;
}
[data-tt-theme="light"] .cs-sidebar::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.20) !important;
}
[data-tt-theme="light"] .cs-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.35) !important;
}

/* Mobile media query: cheat-sheet h2 border at 0.25 alpha white is too
   bright on light. Mirror the responsive break. */
@media (max-width: 768px) {
  [data-tt-theme="light"] #cheatsheet-dark h2 {
    border-bottom-color: rgba(15, 23, 42, 0.15) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MUSIC REFERENCE — support-musicref-dark layout +
   music-concepts-{home-,}dark.php
   ══════════════════════════════════════════════════════════════════════ */

[data-tt-theme="light"] .mr-dark-grid::after {
  background: linear-gradient(180deg, #f3f6fb 0%, #ffffff 100%) !important;
}
/* Left nav palette: section headings = primary #242424, concept links =
   secondary #404854, active link = azure (below). */
[data-tt-theme="light"] .mr-sidebar-heading { color: #242424 !important; }
[data-tt-theme="light"] .mr-sidebar-heading:hover { color: #3688bf !important; }
[data-tt-theme="light"] .mr-sidebar-link { color: #404854 !important; }
[data-tt-theme="light"] .mr-sidebar-link:hover {
  background: rgba(54, 136, 191, 0.08) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .mr-sidebar-link.active {
  color: #3688bf !important;
  background: rgba(54, 136, 191, 0.10) !important;
}
[data-tt-theme="light"] .mr-dark-content h1,
[data-tt-theme="light"] .mr-dark-content h2,
[data-tt-theme="light"] .mr-dark-content h3 {
  color: #242424 !important;
}
[data-tt-theme="light"] .mr-dark-content a { color: #3688bf !important; }
/* Emphasized vocab terms (.mr-emph, e.g. "major scale") — azure, not faint. */
[data-tt-theme="light"] .mr-dark-content .mr-emph { color: #3688bf !important; }
/* Normalize remaining dark-mode azure (#66b3e6 / rgba(102,179,230)) to the
   light brand #3688bf: the "← Back to Music Theory Fundamentals" link (inline
   color, outside .mr-dark-content), the active sidebar link, and the subtitle
   accent border. */
[data-tt-theme="light"] .mr-dark-grid a[href="/support/musicreference"],
[data-tt-theme="light"] .mr-dark-grid [style*="color: #66b3e6"] { color: #3688bf !important; }
[data-tt-theme="light"] .mr-sidebar-link.active {
  color: #3688bf !important;
  background: rgba(54, 136, 191, 0.10) !important;
}
[data-tt-theme="light"] .mr-dark-content [style*="border-left: 3px solid rgba(102, 179, 230, 0.6)"] {
  border-left-color: rgba(54, 136, 191, 0.6) !important;
}
[data-tt-theme="light"] .mr-dark-content a:hover { color: #2e76a8 !important; }
[data-tt-theme="light"] .mr-dark-content table th {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  color: #404854 !important;
}
/* Table body cells — were faint #c5cdd6 with invisible white borders. */
[data-tt-theme="light"] .mr-dark-content table td {
  color: #404854 !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}
[data-tt-theme="light"] .mr-dark-content table { border-color: rgba(15, 23, 42, 0.10) !important; }
/* Concept diagrams are designed for a dark background (colored notes, piano
   keys, transparent PNGs). Wrap each image in a dark container so they read
   on the light page. */
[data-tt-theme="light"] .mr-dark-content img,
[data-tt-theme="light"] .mr-dark-content .mr-image {
  background: rgba(14, 15, 19, 0.92) !important;
  padding: 14px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}
[data-tt-theme="light"] .mr-songs-glass {
  background: linear-gradient(180deg, #ffffff 0%, #eceff4 100%) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}
/* "Other songs that use X" suggestions (ConceptSongs + SongCard). The glass
   heading, concept name, and each card's song title (<b>) / artist
   (.span-song) were all faint light-grays. */
[data-tt-theme="light"] .mr-songs-glass h3 { color: #242424 !important; }
[data-tt-theme="light"] .mr-songs-glass h3 span[style*="4499d2"] { color: #3688bf !important; }
[data-tt-theme="light"] .mr-songs-glass p { color: #404854 !important; }
[data-tt-theme="light"] .mr-dark-content-body .meta b { color: #242424 !important; }
[data-tt-theme="light"] .mr-dark-content-body .meta .span-song { color: #404854 !important; }

/* Music-ref scrollbar (mirrors cheatsheet pattern). */
[data-tt-theme="light"] .mr-dark-content-body .overflow-x {
  scrollbar-color: rgba(15, 23, 42, 0.20) rgba(15, 23, 42, 0.04);
}

/* Book promo banner — dark #0e0f13 with a strong blue glow. Flip to a white
   background with a subtle #a9cfe8 glow; darken the heading/copy. */
[data-tt-theme="light"] .mr-book-banner-wrap { background: #ffffff !important; }
[data-tt-theme="light"] .mr-book-banner-wrap::before {
  background: radial-gradient(ellipse 80% 100% at center top,
    rgba(169, 207, 232, 0.40) 0%, rgba(169, 207, 232, 0.20) 30%,
    rgba(169, 207, 232, 0.07) 55%, transparent 75%) !important;
}
[data-tt-theme="light"] .mr-book-cta h3 { color: #242424 !important; }
[data-tt-theme="light"] .mr-book-cta p { color: #404854 !important; }
[data-tt-theme="light"] .mr-book-btn {
  background: linear-gradient(135deg, rgb(71, 158, 215), rgb(90, 120, 210)) !important;
  background-clip: border-box !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(54, 136, 191, 0.22) !important;
  color: #ffffff !important;
}
/* Hide the multi-color gradient-border pseudo — it peeked out as a wonky edge
   behind the azure fill. */
[data-tt-theme="light"] .mr-book-btn::before { display: none !important; }
[data-tt-theme="light"] .mr-book-btn:hover {
  background: linear-gradient(135deg, rgb(58, 138, 192), rgb(74, 102, 188)) !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════════
   THEORYTAB GUIDES — support/theorytab-dark.php
   ══════════════════════════════════════════════════════════════════════ */

[data-tt-theme="light"] .tb-guide-grid::after {
  background: linear-gradient(180deg, #f3f6fb 0%, #ffffff 100%) !important;
}
[data-tt-theme="light"] .tb-sidebar-heading { color: #74849b !important; }
[data-tt-theme="light"] .tb-guide-toc a { color: #404854 !important; }
[data-tt-theme="light"] .tb-guide-toc a:hover {
  background: rgba(54, 136, 191, 0.08) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .tb-guide-toc a.active {
  color: #3688bf !important;
}
[data-tt-theme="light"] .tb-guide-content code {
  background: rgba(15, 23, 42, 0.06) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .tb-guide-content blockquote {
  border-left-color: #3688bf !important;
  background: rgba(54, 136, 191, 0.08) !important;
}
/* Body prose + headings (were #c5cdd6 / #fff — faded on the light page). */
[data-tt-theme="light"] .tb-guide-content { color: #404854 !important; }
[data-tt-theme="light"] .tb-guide-content h1,
[data-tt-theme="light"] .tb-guide-content h2,
[data-tt-theme="light"] .tb-guide-content h3,
[data-tt-theme="light"] .tb-guide-content h4 { color: #242424 !important; }
[data-tt-theme="light"] .tb-guide-content h2 { border-top-color: rgba(15, 23, 42, 0.10) !important; }
[data-tt-theme="light"] .tb-guide-content a { color: #3688bf !important; }
[data-tt-theme="light"] .tb-guide-content a:hover { color: #2e76a8 !important; }
/* "Last updated …" line (inline #94a3b8) -> tertiary #74849b. */
[data-tt-theme="light"] .tb-guide-content [style*="color: #94a3b8"] { color: #74849b !important; }
/* Sub-TOC items (more specific base rule keeps them faded otherwise). */
[data-tt-theme="light"] .tb-guide-toc ul ul a { color: #74849b !important; }
/* Tables. */
[data-tt-theme="light"] .tb-guide-content table th {
  color: #242424 !important;
  background: rgba(15, 23, 42, 0.04) !important;
  border-bottom-color: rgba(15, 23, 42, 0.12) !important;
}
[data-tt-theme="light"] .tb-guide-content table td {
  color: #404854 !important;
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}
/* Alert / message callouts. */
[data-tt-theme="light"] .tb-guide-content .alert,
[data-tt-theme="light"] .tb-guide-content .message {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #404854 !important;
}
/* Section <select> dropdown. */
[data-tt-theme="light"] .tb-guide-content select {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.20) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .tb-guide-content select option {
  background: #ffffff !important;
  color: #242424 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   ARTIST PAGES — artist-dark.php layout + theorytab/artist.php
   ══════════════════════════════════════════════════════════════════════ */

[data-tt-theme="light"] #artist-dark { color: #404854 !important; }
/* Hero blue glow (.asr-glow is shared with advanced-search, so scope to the
   artist page) — base is rgba(45,140,255,0.35); tone it down. */
[data-tt-theme="light"] #artist-dark .asr-glow::before {
  background: radial-gradient(ellipse 80% 90% at 15% 100%, rgba(45, 140, 255, 0.12) 0%, rgba(59, 130, 246, 0.045) 35%, transparent 65%) !important;
}
[data-tt-theme="light"] .artist-name { color: #242424 !important; }
[data-tt-theme="light"] .artist-meta { color: #74849b !important; }
[data-tt-theme="light"] .artist-bio { color: #404854 !important; }
[data-tt-theme="light"] .asr-table thead th { color: #404854 !important; }
[data-tt-theme="light"] .asr-table tbody tr:hover {
  background: rgba(54, 136, 191, 0.05) !important;
}
/* Fully remove the dark-mode thead glow pseudo in light mode. content:'' on
   a <thead> generates an anonymous box Chrome treats as a phantom table cell,
   shifting every <th> one column right (mis-aligning the headers). Our light
   glow lives on thead tr::before instead, so kill this one outright. */
[data-tt-theme="light"] .asr-table thead::after { content: none !important; display: none !important; }
/* Clean 1px divider line under the column labels. */
[data-tt-theme="light"] .asr-table thead tr::after {
  height: 1px !important;
  background: rgba(15, 23, 42, 0.12) !important;
}
/* Top-of-results side glows. A content-generating pseudo on a table element
   (thead / thead tr::before / table) spawns an anonymous table cell that
   shifts the real <th>s one column right (::before = leading phantom cell).
   So the glow CANNOT live on the table. Anchor it to .asr-header — the
   results-count row, a plain <div> above BOTH the list table and the grid —
   so it sits at the top of the results in both views and never disturbs
   column alignment. Fans up from the header's bottom over the count. */
[data-tt-theme="light"] .asr-header { position: relative; }
[data-tt-theme="light"] .asr-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 420px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 90% at 5% 100%, rgba(169, 207, 232, 0.20) 0%, rgba(169, 207, 232, 0.08) 35%, transparent 65%),
    radial-gradient(ellipse 55% 90% at 95% 100%, rgba(169, 207, 232, 0.20) 0%, rgba(169, 207, 232, 0.08) 35%, transparent 65%);
}
/* The grid view's own divider glow is now redundant (the .asr-header glow
   covers both views); drop it so grid doesn't double up. Keep its line. */
[data-tt-theme="light"] .asr-grid-divider::after { background: none !important; }
/* Same for the list view's glow (.asr-list-results::before) — the .asr-header
   glow already covers it, so leaving the dark-mode glow on stacks a second
   blue band in light mode. Drop it too. */
[data-tt-theme="light"] .asr-list-results::before { background: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   CROSS-PAGE LIGHT-MODE COVERAGE — bring the remaining toggle-affected
   pages (advanced search, artist song table, cheat-sheet key grid, music
   reference body) up to the landing / song-view polish. These elements
   color via CSS classes (not inline styles), so the shared inline-style
   catch-alls above don't reach them — they need explicit overrides.
   None of the source rules use !important except .cs-key-card-title and
   .mr-dark-content headings (already handled), so these win on the cascade.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Advanced Search (advancedSearch/advanced-search-dark.php) ────────── */
/* Hero title — inline color:#fff, invisible on light. Scoped to .as-grid. */
[data-tt-theme="light"] .as-grid h1 { color: #242424 !important; }
/* Glow behind the fanned album art — vivid blue inline radial; re-tint to
   the same soft #a9cfe8 as the results glow. */
[data-tt-theme="light"] .as-album-fan [style*="rgba(45, 140, 255, 0.85)"] {
  background: radial-gradient(ellipse at center, rgba(169, 207, 232, 0.85) 0%, rgba(169, 207, 232, 0.40) 30%, rgba(169, 207, 232, 0.15) 55%, transparent 75%) !important;
}

/* Dark glass search bar + filter panel → light. The panel gets a subtle
   top-down gray gradient; the search bar sits at the gradient's top color
   (#fff) so the two stacked segments read as one seamless container. */
[data-tt-theme="light"] .as-search-bar {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}
[data-tt-theme="light"] .as-panel {
  background: linear-gradient(180deg, #ffffff 0%, #eceff4 100%) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}
/* Field labels (SONG / ARTIST / CHORD STRING) — class color:#fff. */
[data-tt-theme="light"] .as-label { color: #404854 !important; }
/* "Complexity Metrics" collapsible header — inline-styled button + chevron
   are color:#fff (invisible on the light panel). Scoped to .as-premium so
   it only hits the metrics toggle, not other white-text buttons. */
[data-tt-theme="light"] .as-premium button[style*="color: #fff"],
[data-tt-theme="light"] .as-premium button[style*="color: #fff"] svg {
  color: #242424 !important;
}
/* Text inputs + selects. */
[data-tt-theme="light"] .as-input,
[data-tt-theme="light"] .as-select {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .as-input::placeholder,
[data-tt-theme="light"] .as-panel input::placeholder,
[data-tt-theme="light"] .as-select-placeholder { color: #74849b !important; }
/* Chord String box: its container uses an inline rgba(255,255,255,0.06) bg
   that the shared catch-all maps to a slate tint, making it darker than the
   white .as-input boxes. Force white to match, and darken its inner input
   text (inline color:#e2e8f0). */
[data-tt-theme="light"] .as-panel [style*="background: rgba(255,255,255,0.06)"] { background: #ffffff !important; }
[data-tt-theme="light"] .as-panel input[style*="color: #e2e8f0"] { color: #242424 !important; }
/* The ♭ "insert symbols" glyph sits in an azure circle and is white — dark
   it, and reduce the circle's fill opacity for a subtler look. */
[data-tt-theme="light"] .as-symbols-btn {
  color: #242424 !important;
  background: rgba(54, 136, 191, 0.12) !important;
}
[data-tt-theme="light"] .as-symbols-btn:hover {
  background: rgba(54, 136, 191, 0.20) !important;
}
[data-tt-theme="light"] .as-select option { background: #ffffff !important; color: #242424 !important; }
/* Open custom-select dropdown panel (.as-dropdown-menu) — dark #1a1b22 with
   light items. Flip to a white panel, dark items, azure-tinted hover/active. */
[data-tt-theme="light"] .as-dropdown-menu {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18) !important;
}
[data-tt-theme="light"] .as-dropdown-item { color: #242424 !important; }
[data-tt-theme="light"] .as-dropdown-item:hover { background: rgba(54, 136, 191, 0.08) !important; }
[data-tt-theme="light"] .as-dropdown-item.active {
  background: rgba(54, 136, 191, 0.16) !important;
  color: #242424 !important;
}
/* "Insert Symbols" popout (.as-symbols-panel) — dark #1a1b22 with light
   text/buttons. Flip the whole popout to light. */
[data-tt-theme="light"] .as-symbols-panel {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18) !important;
}
[data-tt-theme="light"] .as-symbols-panel h4 { color: #242424 !important; }
[data-tt-theme="light"] .as-symbols-section { color: #404854 !important; }
[data-tt-theme="light"] .as-symbols-section a { color: #3688bf !important; }
[data-tt-theme="light"] .as-sym-btn {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .as-sym-btn:hover {
  background: rgba(54, 136, 191, 0.10) !important;
  border-color: rgba(54, 136, 191, 0.35) !important;
}
/* Inactive toggle / slider tracks (translucent white → slate). Active
   toggle keeps the brand azure. */
[data-tt-theme="light"] .as-toggle { background: rgba(15, 23, 42, 0.22) !important; }
[data-tt-theme="light"] .as-toggle.active { background: #3688bf !important; }
[data-tt-theme="light"] .as-slider,
[data-tt-theme="light"] .as-range-track { background: rgba(15, 23, 42, 0.15) !important; }
/* Active/accent azure across the panel uses the dark-mode brand #66b3e6
   (and #4499d2 for focus/fill). Map them to the light brand azure #3688bf
   so every active state is consistent. */
[data-tt-theme="light"] .as-slider::-webkit-slider-thumb,
[data-tt-theme="light"] .as-range-wrap input[type=range]::-webkit-slider-thumb { background: #3688bf !important; }
[data-tt-theme="light"] .as-slider::-moz-range-thumb,
[data-tt-theme="light"] .as-range-wrap input[type=range]::-moz-range-thumb { background: #3688bf !important; }
[data-tt-theme="light"] .as-range-fill { background: #3688bf !important; }
/* Active/used + focused entry boxes: azure border + a subtle blue glow. */
[data-tt-theme="light"] .as-active,
[data-tt-theme="light"] .as-input:focus,
[data-tt-theme="light"] .as-select:focus,
[data-tt-theme="light"] .as-range-num:focus {
  border-color: #3688bf !important;
  box-shadow: 0 0 0 3px rgba(54, 136, 191, 0.12), 0 0 10px rgba(54, 136, 191, 0.18) !important;
}
/* Active metric value (the "lo–hi" range text) is an inline color:#66b3e6
   span; the number inputs inherit it. */
[data-tt-theme="light"] .as-premium [style*="color: #66b3e6"] { color: #3688bf !important; }
/* Search button: dark inner fill inside an azure-gradient wrapper → make
   the inner button transparent so the gradient reads as a filled CTA. The
   onmouseover/out JS writes inline bg, so !important is needed to hold;
   text stays white. The `> button` child guards against matching the
   landing "Learn More" wrapper (which wraps an <a>, not a <button>). */
[data-tt-theme="light"] [style*="linear-gradient(135deg, rgba(71, 158, 215, 0.9), rgba(90, 120, 210, 0.9))"] > button,
[data-tt-theme="light"] [style*="linear-gradient(135deg, rgba(71, 158, 215, 0.9), rgba(90, 120, 210, 0.9))"] > button:hover {
  background: transparent !important;
}
/* Guest "log in to use advanced search" scrim → light. */
[data-tt-theme="light"] .as-guest-overlay { background: rgba(255, 255, 255, 0.70) !important; }
[data-tt-theme="light"] .as-guest-overlay p { color: #242424 !important; }

/* ── Shared results table (.asr-* — advanced-search results + artist). ── */
[data-tt-theme="light"] .asr-song-title a { color: #242424 !important; }
[data-tt-theme="light"] .asr-song-title a:hover { color: #3688bf !important; }
/* Key column is emphasized (font-weight 700); keep it the strong dark color
   in light mode — without this it falls through to the dark-theme #e2e8f0. */
[data-tt-theme="light"] .asr-key { color: #242424 !important; }
[data-tt-theme="light"] .asr-scale,
[data-tt-theme="light"] .asr-tempo,
[data-tt-theme="light"] .asr-genre { color: #404854 !important; }
[data-tt-theme="light"] .asr-scale-note { color: #242424 !important; }
[data-tt-theme="light"] .asr-scale-mode,
[data-tt-theme="light"] .asr-card-meta { color: #74849b !important; }
/* "results" word in the count (the number is <strong> = primary). */
[data-tt-theme="light"] .asr-count { color: #404854 !important; }
/* View-toggle (list/grid) + columns icons: inactive #404854, active #3688bf.
   List/grid colors are inline hex (#66b3e6 active, #64748b inactive) — match
   by hex. Columns icon has a JS hover, so scope by class + !important. */
[data-tt-theme="light"] .asr-controls button[style*="#66b3e6"] { color: #3688bf !important; }
[data-tt-theme="light"] .asr-controls button[style*="#64748b"] { color: #404854 !important; }
[data-tt-theme="light"] .asr-cols-wrap span { color: #404854 !important; }
[data-tt-theme="light"] .asr-cols-wrap span:hover { color: #3688bf !important; }
/* Promote the artist sub-line + section to secondary for a touch more weight. */
[data-tt-theme="light"] .asr-section { color: #404854 !important; }
/* Results table — remaining text mapped to the palette. Chord roman numerals
   are secondary with primary emphasis; result-count number is primary;
   cap-banner counts use azure. */
[data-tt-theme="light"] .asr-song-artist { color: #404854 !important; }
/* Grid-view card song title (was #e2e8f0, faint on white). */
[data-tt-theme="light"] .asr-card-title { color: #242424 !important; }
/* Row dividers — the dark border (rgba(255,255,255,0.06)) is invisible on
   white. Restore a visible slate divider line between results. */
[data-tt-theme="light"] .asr-table tbody tr { border-bottom-color: rgba(15, 23, 42, 0.10) !important; }
[data-tt-theme="light"] .asr-chords { color: #404854 !important; }
[data-tt-theme="light"] .asr-chords b { color: #242424 !important; }
[data-tt-theme="light"] .asr-count strong { color: #242424 !important; }
[data-tt-theme="light"] .asr-cap-banner { color: #404854 !important; }
[data-tt-theme="light"] .asr-cap-banner strong { color: #3688bf !important; }
[data-tt-theme="light"] .asr-cap-banner ion-icon { color: #242424 !important; }
[data-tt-theme="light"] .asr-sort-opt,
[data-tt-theme="light"] .asr-page-btn,
[data-tt-theme="light"] .asr-page-dots,
[data-tt-theme="light"] .asr-empty { color: #74849b !important; }
[data-tt-theme="light"] .asr-sort-opt.active,
[data-tt-theme="light"] .asr-page-active {
  color: #3688bf !important;
  border-bottom-color: #3688bf !important;
  text-shadow: none !important;
}
/* Sort dropdown popup → light (matches the other popouts). */
[data-tt-theme="light"] .asr-sort-menu {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18) !important;
}
[data-tt-theme="light"] .asr-sort-opt:hover { background: rgba(54, 136, 191, 0.08) !important; color: #242424 !important; }
/* "Visible columns" popout (.asr-cols-menu) — dark #1a1b22 → light. */
[data-tt-theme="light"] .asr-cols-menu {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18) !important;
}
[data-tt-theme="light"] .asr-cols-title { color: #404854 !important; }
[data-tt-theme="light"] .asr-cols-menu label { color: #242424 !important; }
[data-tt-theme="light"] .asr-cols-menu label:hover { background: rgba(54, 136, 191, 0.08) !important; }
[data-tt-theme="light"] .asr-cols-menu input { accent-color: #3688bf !important; }

/* ── Artist page related-artist pills (#artist-dark a.artist-related-pill) ── */
[data-tt-theme="light"] #artist-dark a.artist-related-pill,
[data-tt-theme="light"] #artist-dark a.artist-related-pill:link,
[data-tt-theme="light"] #artist-dark a.artist-related-pill:visited {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #404854 !important;
}
[data-tt-theme="light"] #artist-dark a.artist-related-pill:hover {
  background: rgba(54, 136, 191, 0.10) !important;
  border-color: rgba(54, 136, 191, 0.35) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .artist-related-label { color: #74849b !important; }

/* ── Cheat-sheet key grid — the card surface is already themed above; the
   key-name text stays light azure (#66b3e6) and reads faint on white.
   Darken to legible text + tone the column headers. ──────────────────── */
[data-tt-theme="light"] .cs-key-card,
[data-tt-theme="light"] .cs-key-card .cs-key-card-title { color: #242424 !important; }
[data-tt-theme="light"] .cs-key-card:hover,
[data-tt-theme="light"] .cs-key-card:hover .cs-key-card-title { color: #1f4e6b !important; }
[data-tt-theme="light"] .cs-key-column-header,
[data-tt-theme="light"] #cheatsheet-dark .cs-key-column-header { color: #3688bf !important; }

/* ── Music reference body — headings/links already handled above; the base
   prose color (#c5cdd6) and concept descriptions stay faint. ─────────── */
[data-tt-theme="light"] .mr-dark-content,
[data-tt-theme="light"] .mr-dark-content p,
[data-tt-theme="light"] .mr-dark-content li { color: #404854 !important; }

/* Music reference INDEX (directory) — different markup from the concept
   page: a white hero title + faint concept-row names/descriptions. */
[data-tt-theme="light"] .mr-hero-title { color: #242424 !important; }
[data-tt-theme="light"] .mr-concept-row,
[data-tt-theme="light"] .mr-row-text { color: #242424 !important; }
[data-tt-theme="light"] .mr-row-desc { color: #404854 !important; }
/* Index (home) concept rows: the name (.mr-row-title) is #fff = invisible on
   white; the icon + section labels use the dark-mode azure/gray. */
[data-tt-theme="light"] .mr-concept-row .mr-row-title,
[data-tt-theme="light"] .mr-concept-row:hover .mr-row-title { color: #242424 !important; }
[data-tt-theme="light"] .mr-concept-row .mr-row-icon,
[data-tt-theme="light"] .mr-concept-row:hover .mr-row-icon { color: #3688bf !important; }
[data-tt-theme="light"] .mr-concept-row:hover { background: rgba(54, 136, 191, 0.08) !important; }
[data-tt-theme="light"] .mr-section-heading { color: #74849b !important; }
[data-tt-theme="light"] .mr-hero-title + p { color: #404854 !important; }

/* ══════════════════════════════════════════════════════════════════════
   SAVED / PLAYLISTS (theorytabCollection/saved-dark.php, via the
   advanced-search-dark layout). Saved song cards reuse .song-card/.song-artist
   (handled above). Map the saved-specific chrome to the palette; flip the
   dark new-playlist popover to white; azure (#66b3e6) -> #3688bf.
   ══════════════════════════════════════════════════════════════════════ */
[data-tt-theme="light"] .back-link { color: #404854 !important; }
[data-tt-theme="light"] .back-link:hover { color: #3688bf !important; }
[data-tt-theme="light"] .saved-title { color: #242424 !important; }
[data-tt-theme="light"] .saved-subtitle,
[data-tt-theme="light"] .playlists-heading { color: #74849b !important; }
[data-tt-theme="light"] .saved-title-delete { border-color: rgba(15, 23, 42, 0.15) !important; color: #404854 !important; }
[data-tt-theme="light"] .saved-title--editable:hover { background: rgba(54, 136, 191, 0.06) !important; }
[data-tt-theme="light"] .saved-title-input,
[data-tt-theme="light"] .playlist-name-input,
[data-tt-theme="light"] .new-playlist-form input {
  background: #ffffff !important;
  border-color: #3688bf !important;
  color: #242424 !important;
}
/* New-playlist CTA + popover (dark #1e2028 -> white). */
[data-tt-theme="light"] .new-playlist-cta { color: #3688bf !important; border-color: rgba(54, 136, 191, 0.40) !important; }
[data-tt-theme="light"] .new-playlist-cta:hover {
  background: rgba(54, 136, 191, 0.10) !important;
  border-color: #3688bf !important;
  color: #2e76a8 !important;
}
[data-tt-theme="light"] .new-playlist-popover {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}
[data-tt-theme="light"] .new-playlist-form button[type="submit"] { background: #3688bf !important; color: #ffffff !important; }
[data-tt-theme="light"] .new-playlist-form button[type="submit"]:hover { background: #2e76a8 !important; }
/* Playlist cards. */
[data-tt-theme="light"] .playlist-card-thumb-link { color: #242424 !important; }
[data-tt-theme="light"] .playlist-card-thumb-link:hover { color: #000000 !important; }
[data-tt-theme="light"] .playlist-thumb {
  background: linear-gradient(135deg, rgba(54, 136, 191, 0.14), rgba(54, 136, 191, 0.04)) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #3688bf !important;
}
[data-tt-theme="light"] .playlist-name { color: #242424 !important; }
[data-tt-theme="light"] .playlist-name:hover { background: rgba(54, 136, 191, 0.08) !important; color: #000000 !important; }
[data-tt-theme="light"] .playlist-card-wrap.drag-over .playlist-thumb { outline-color: #3688bf !important; }

/* ══════════════════════════════════════════════════════════════════════
   SONG METRICS — /song-metrics/about (cheatsheet-dark layout). The page
   body is already light; only the TLDR table-of-contents box sets its dark
   navy (#131a22) surface in the view's <style> block, so the inline-style
   catch-alls don't reach it. Flip the surface to a light card; titles to
   primary #242424 (azure on hover), supporting text to secondary slate.
   The .browse-card glass already remaps white->slate via the catch-alls.
   ══════════════════════════════════════════════════════════════════════ */
[data-tt-theme="light"] #cheatsheet-dark .metrics-summary {
  background: #eef5fb !important;
  border-color: rgba(54, 136, 191, 0.28) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
}
[data-tt-theme="light"] #cheatsheet-dark .metrics-summary-heading { color: #3688bf !important; }
[data-tt-theme="light"] #cheatsheet-dark .metrics-summary-item { border-top-color: rgba(54, 136, 191, 0.18) !important; }
[data-tt-theme="light"] #cheatsheet-dark .metrics-summary-item a.metrics-summary-link {
  color: #242424 !important;
  border-bottom-color: rgba(36, 36, 36, 0.30) !important;
}
[data-tt-theme="light"] #cheatsheet-dark .metrics-summary-item a.metrics-summary-link:hover,
[data-tt-theme="light"] #cheatsheet-dark .metrics-summary-item a.metrics-summary-link:focus {
  color: #3688bf !important;
  border-bottom-color: #3688bf !important;
}
[data-tt-theme="light"] #cheatsheet-dark .metrics-summary-item p { color: #404854 !important; }

/* "Browse songs with above average X" cards — match the .mr-songs-glass
   container on the music-theory-fundamentals pages: white->light-gray
   vertical gradient + slate hairline (replaces the dark-mode translucent
   white glass). Darken the inner song title / artist like music-ref. */
[data-tt-theme="light"] #cheatsheet-dark .browse-card {
  background: linear-gradient(180deg, #ffffff 0%, #eceff4 100%) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}
[data-tt-theme="light"] #cheatsheet-dark .browse-card .meta b { color: #242424 !important; }
[data-tt-theme="light"] #cheatsheet-dark .browse-card .meta .span-song { color: #404854 !important; }

/* Diagram images are the same transparent notation PNGs used on the music
   theory fundamentals pages — wrap each in a dark container so they read on
   the light page, matching .mr-dark-content img. Scoped to the content-row
   images only (the same selector the page uses for their margins), so the
   album thumbnails inside .overflow-x / .browse-card are untouched. */
[data-tt-theme="light"] #cheatsheet-dark .row > [class*="col-"] > img {
  background: rgba(14, 15, 19, 0.92) !important;
  padding: 14px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════════════════════════
   MEILI SEARCH RESULTS — /theorytab/search (meili-search-dark.php). The
   page background is already remapped light, but the view's own <style>
   block keeps white-on-dark text (invisible on white) and translucent-white
   chrome (dividers, toggle buttons) that vanishes. Everything here lives
   under the page-unique .mr-wrap, so scope to it to avoid colliding with the
   music-reference .mr-* classes.
   ══════════════════════════════════════════════════════════════════════ */
[data-tt-theme="light"] .mr-wrap .mr-query-title { color: #242424 !important; }
[data-tt-theme="light"] .mr-wrap .mr-query-title.is-empty { color: #74849b !important; }
[data-tt-theme="light"] .mr-wrap .mr-finetune { color: #3688bf !important; }
[data-tt-theme="light"] .mr-wrap .mr-finetune:hover { color: #2e76a8 !important; }
[data-tt-theme="light"] .mr-wrap .mr-count { color: #404854 !important; }
[data-tt-theme="light"] .mr-wrap .mr-count strong { color: #242424 !important; }

/* List/grid view toggle buttons (were translucent-white on dark). */
[data-tt-theme="light"] .mr-wrap .mr-toggle-btn {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #74849b !important;
}
[data-tt-theme="light"] .mr-wrap .mr-toggle-btn:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  border-color: rgba(15, 23, 42, 0.20) !important;
  color: #404854 !important;
}
[data-tt-theme="light"] .mr-wrap .mr-toggle-btn[aria-pressed="true"] {
  background: rgba(54, 136, 191, 0.12) !important;
  border-color: rgba(54, 136, 191, 0.55) !important;
  color: #3688bf !important;
}

/* Column headers + result rows. */
[data-tt-theme="light"] .mr-wrap .mr-col-heads { color: #74849b !important; border-bottom-color: rgba(15, 23, 42, 0.10) !important; }
[data-tt-theme="light"] .mr-wrap .mr-row { border-bottom-color: rgba(15, 23, 42, 0.08) !important; }
[data-tt-theme="light"] .mr-wrap .mr-row:hover { background: rgba(54, 136, 191, 0.06) !important; }
[data-tt-theme="light"] .mr-wrap .mr-results.grid-mode .mr-row:hover { background: rgba(54, 136, 191, 0.08) !important; }
[data-tt-theme="light"] .mr-wrap .mr-thumb { background: rgba(15, 23, 42, 0.06) !important; }
[data-tt-theme="light"] .mr-wrap .mr-title { color: #242424 !important; }
[data-tt-theme="light"] .mr-wrap .mr-artist { color: #404854 !important; }
[data-tt-theme="light"] .mr-wrap .mr-chords { color: #74849b !important; }

/* Search highlight marks — dark text on a light azure wash. */
[data-tt-theme="light"] .mr-wrap .mr-title mark,
[data-tt-theme="light"] .mr-wrap .mr-artist mark,
[data-tt-theme="light"] .mr-wrap .mr-chords mark {
  background: rgba(54, 136, 191, 0.22) !important;
  color: #242424 !important;
}

/* "Load more" pill. */
[data-tt-theme="light"] .mr-wrap .ais-InfiniteHits-loadMore {
  background: rgba(54, 136, 191, 0.10) !important;
  border-color: rgba(54, 136, 191, 0.45) !important;
  color: #2e76a8 !important;
}
[data-tt-theme="light"] .mr-wrap .ais-InfiniteHits-loadMore:hover {
  background: rgba(54, 136, 191, 0.18) !important;
  color: #1f5c87 !important;
}

/* Empty / zero-result state. */
[data-tt-theme="light"] .mr-wrap .mr-empty { color: #74849b !important; }

/* Advanced-search list/grid view toggles — match the meili .mr-toggle-btn
   look (boxed, slate-tint default, azure-tint active). The view's buttons are
   plain inline-styled icons whose active state is just an inline color
   (#66b3e6 active / #64748b inactive, set reactively by Alpine), so detect
   the active one via that color substring. Bump the inter-button gap to 6px. */
[data-tt-theme="light"] .asr-controls > div:first-child { gap: 6px !important; }
[data-tt-theme="light"] .asr-controls button[title="List view"],
[data-tt-theme="light"] .asr-controls button[title="Grid view"] {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, 0.03) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #74849b !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
[data-tt-theme="light"] .asr-controls button[title="List view"]:hover,
[data-tt-theme="light"] .asr-controls button[title="Grid view"]:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  border-color: rgba(15, 23, 42, 0.20) !important;
  color: #404854 !important;
}
/* Active toggle (inline color is the azure #66b3e6). */
[data-tt-theme="light"] .asr-controls button[style*="#66b3e6"] {
  background: rgba(54, 136, 191, 0.12) !important;
  border-color: rgba(54, 136, 191, 0.55) !important;
  color: #3688bf !important;
}
[data-tt-theme="light"] .asr-controls button[style*="#66b3e6"]:hover {
  background: rgba(54, 136, 191, 0.18) !important;
  border-color: rgba(54, 136, 191, 0.65) !important;
  color: #2e76a8 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   INFOGRAPHICS INDEX — /infographics (InfographicsIndexView). This page uses
   the default-darknav layout, which didn't load tt-light; the component now
   registers it. Page wrapper (#0e0f13) + html/body flip via the shared rules;
   here we map the page chrome. Infographic images themselves are content —
   left untouched. Applies to mobile + desktop.
   ══════════════════════════════════════════════════════════════════════ */
/* Hero */
[data-tt-theme="light"] .infographic-hero-title { color: #242424 !important; }
[data-tt-theme="light"] .infographic-hero-title + p { color: #74849b !important; }
[data-tt-theme="light"] .infographic-hero-title + p a { color: #3688bf !important; }
/* Category pills (slate-tint default, azure active) */
[data-tt-theme="light"] a.infographic-pill,
[data-tt-theme="light"] a.infographic-pill:link,
[data-tt-theme="light"] a.infographic-pill:visited {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
  color: #404854 !important;
}
[data-tt-theme="light"] a.infographic-pill:hover {
  background: rgba(15, 23, 42, 0.07) !important;
  border-color: rgba(15, 23, 42, 0.25) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] a.infographic-pill.active {
  background: rgba(54, 136, 191, 0.12) !important;
  border-color: rgba(54, 136, 191, 0.55) !important;
  color: #3688bf !important;
}
/* Section headers */
[data-tt-theme="light"] .infographic-section-header { border-bottom-color: #74849b !important; }
[data-tt-theme="light"] .infographic-section-header h2 { color: #242424 !important; }
[data-tt-theme="light"] .infographic-section-header p { color: #404854 !important; }
/* Hero divider line (inline azure-fade gradient) -> #74849b. */
[data-tt-theme="light"] [style*="linear-gradient(90deg, transparent, rgba(68,153,210,0.4), transparent)"] {
  background: linear-gradient(90deg, transparent, #74849b, transparent) !important;
}
/* Cards — pure white with a defined #404854 border */
[data-tt-theme="light"] .infographic-card {
  background: #ffffff !important;
  border-color: #404854 !important;
}
[data-tt-theme="light"] .infographic-card:hover {
  background: #ffffff !important;
  border-color: rgba(54, 136, 191, 0.35) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}
[data-tt-theme="light"] .infographic-thumb { background: rgba(15, 23, 42, 0.03) !important; }
[data-tt-theme="light"] .infographic-card [style*="color: #e2e8f0"] { color: #242424 !important; }
[data-tt-theme="light"] .infographic-dl-icon { color: #74849b !important; }
[data-tt-theme="light"] .infographic-card:hover .infographic-dl-icon { color: #3688bf !important; }
/* Tone the top azure wash down slightly on the infographics page (desktop;
   mobile already uses the lighter 0.10 via the shared mobile rule). Scoped to
   the infographics wrapper, which uniquely carries color:#e2e8f0 inline. */
@media (min-width: 768px) {
  [data-tt-theme="light"] [style*="background: #0e0f13"][style*="color: #e2e8f0"] {
    background:
      linear-gradient(180deg, rgba(54, 136, 191, 0.18) 0%, rgba(54, 136, 191, 0) 1100px),
      #ffffff !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SONG VERSION HISTORY — theorytab/history-dark.php (login-gated). All text
   was light-on-dark; map to the palette with dark text. Both breakpoints.
   ══════════════════════════════════════════════════════════════════════ */
/* Header: song/artist title, "by", subtitle. */
[data-tt-theme="light"] .tb-history-header h1,
[data-tt-theme="light"] .tb-history-header h1 a { color: #242424 !important; }
[data-tt-theme="light"] .tb-history-header h1 span { color: #74849b !important; }
[data-tt-theme="light"] .tb-history-header p { color: #404854 !important; }
/* Table. */
[data-tt-theme="light"] .tb-history-table-wrap {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}
[data-tt-theme="light"] .tb-history-table th {
  color: #74849b !important;
  border-bottom-color: rgba(15, 23, 42, 0.12) !important;
}
[data-tt-theme="light"] .tb-history-table td {
  color: #404854 !important;
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}
[data-tt-theme="light"] .tb-history-table tr:hover td { background: rgba(54, 136, 191, 0.05) !important; }
[data-tt-theme="light"] .tb-history-table th.tb-history-sortable:hover { color: #242424 !important; }
[data-tt-theme="light"] .tb-history-table a { color: #3688bf !important; }
[data-tt-theme="light"] .tb-history-table a:hover { color: #2e76a8 !important; }
/* Section tabs (desktop underline style). */
[data-tt-theme="light"] .tb-history-tabs { border-bottom-color: rgba(15, 23, 42, 0.10) !important; }
[data-tt-theme="light"] .tb-history-tab { color: #74849b !important; }
[data-tt-theme="light"] .tb-history-tab:hover { color: #404854 !important; }
[data-tt-theme="light"] .tb-history-tab-active { color: #242424 !important; border-bottom-color: #3688bf !important; }
[data-tt-theme="light"] .tb-history-tab-count,
[data-tt-theme="light"] .tb-history-tab-active .tb-history-tab-count { color: #74849b !important; }
/* Mobile-specific bits: sticky header bg (#16171c), stacked time, pill tabs. */
@media (max-width: 768px) {
  [data-tt-theme="light"] .tb-history-table thead th { background: #ffffff !important; }
  [data-tt-theme="light"] .tb-history-date-t { color: #74849b !important; }
  [data-tt-theme="light"] .tb-history-tab {
    border-color: rgba(15, 23, 42, 0.15) !important;
    color: #404854 !important;
  }
  [data-tt-theme="light"] .tb-history-tab-active {
    background: #3688bf !important;
    border-color: #3688bf !important;
    color: #ffffff !important;
  }
  [data-tt-theme="light"] .tb-history-tab-active .tb-history-tab-count { color: rgba(255, 255, 255, 0.85) !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   EDIT GENRES form — wiki/genreForm.php (login-gated). Map the faded text +
   chips to dark; fix the selected chip's white-on-light-azure contrast.
   ══════════════════════════════════════════════════════════════════════ */
[data-tt-theme="light"] .tb-genre-wrap { color: #404854 !important; }
[data-tt-theme="light"] .tb-genre-back { color: #404854 !important; }
[data-tt-theme="light"] .tb-genre-back:hover { color: #3688bf !important; }
/* Panel as a defined light card — mirrors the About-the-Metrics popup's
   card treatment (azure border, rounded, soft shadow) but with a light fill. */
[data-tt-theme="light"] .tb-genre-panel {
  background: #ffffff !important;
  border-color: rgba(54, 136, 191, 0.28) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
}
[data-tt-theme="light"] .tb-genre-eyebrow { color: #74849b !important; }
[data-tt-theme="light"] .tb-genre-title { color: #242424 !important; }
[data-tt-theme="light"] .tb-genre-subtitle { color: #404854 !important; }
[data-tt-theme="light"] .tb-genre-note { color: #404854 !important; }
/* Section switcher pill. */
[data-tt-theme="light"] .tb-genre-section-tabs { border-color: #a9cfe8 !important; }
[data-tt-theme="light"] .tb-genre-section-tab--link { color: #74849b !important; }
[data-tt-theme="light"] .tb-genre-section-tab--link:hover { background: rgba(15, 23, 42, 0.06) !important; color: #242424 !important; }
/* Genre chips (option labels) — were faded #c5cdd6 with invisible white pill. */
[data-tt-theme="light"] .tb-genre-chip {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
  color: #404854 !important;
}
[data-tt-theme="light"] .tb-genre-chip:hover {
  background: rgba(54, 136, 191, 0.08) !important;
  border-color: rgba(54, 136, 191, 0.30) !important;
  color: #242424 !important;
}
[data-tt-theme="light"] .tb-genre-chip:has(input:checked) {
  background: rgba(54, 136, 191, 0.14) !important;
  border-color: rgba(54, 136, 191, 0.55) !important;
  color: #2e76a8 !important;
}
[data-tt-theme="light"] .tb-genre-chip-check { color: #3688bf !important; }
/* Solid azure controls -> #3688bf with white text. */
[data-tt-theme="light"] .tb-genre-section-tab--active { background: #3688bf !important; color: #ffffff !important; }
[data-tt-theme="light"] .tb-genre-btn--primary { background: #3688bf !important; color: #ffffff !important; }
[data-tt-theme="light"] .tb-genre-btn--primary:hover { background: #2e76a8 !important; }
[data-tt-theme="light"] .tb-genre-empty { color: #74849b !important; }
/* Action row + secondary (Cancel) button. */
[data-tt-theme="light"] .tb-genre-actions { border-top-color: rgba(15, 23, 42, 0.08) !important; }
[data-tt-theme="light"] .tb-genre-btn--secondary { color: #404854 !important; border-color: rgba(15, 23, 42, 0.20) !important; }
[data-tt-theme="light"] .tb-genre-btn--secondary:hover { background: rgba(15, 23, 42, 0.06) !important; color: #242424 !important; }

/* ══════════════════════════════════════════════════════════════════════
   CONTRIBUTE-MENU SUBMENUS — view-dark.php .tb-edit-dropdown ("Edit which
   section?" / "Edit genres for which section?"). Dark #1e2028 popover -> light
   card matching the About-the-Metrics popup (azure border, soft shadow).
   ══════════════════════════════════════════════════════════════════════ */
[data-tt-theme="light"] .tb-edit-dropdown {
  background: #ffffff !important;
  border-color: rgba(54, 136, 191, 0.28) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}
[data-tt-theme="light"] .tb-edit-dropdown [style*="color: #94a3b8"] { color: #74849b !important; }
[data-tt-theme="light"] .tb-edit-dropdown a { color: #242424 !important; }
[data-tt-theme="light"] .tb-edit-dropdown a:hover { background: rgba(54, 136, 191, 0.08) !important; }

/* ══════════════════════════════════════════════════════════════════════
   CURATED COLLECTION PAGES — curatedView.php / curatedVideoView.php.
   Body text that sits directly on the light page background. The hero
   (dark album-art backdrop) and the dark glass entry/metrics cards keep
   their light text. Palette: #242424 primary / #404854 secondary /
   #74849b tertiary / #3688bf azure.
   ══════════════════════════════════════════════════════════════════════ */
/* Hero — dark mode blurs the header art and crushes it to 25% brightness
   under white text. Light mode keeps the blur but swaps the dark crush
   for a white veil (mirrors the song-page .tb-hero-bg treatment), keeps
   a gentler azure glow, and flips the text to the light palette. */
[data-tt-theme="light"] .collection-hero {
  background-color: #ffffff;
}
[data-tt-theme="light"] .collection-hero::before {
  backdrop-filter: blur(40px) saturate(120%);
  -webkit-backdrop-filter: blur(40px) saturate(120%);
  background: rgba(255, 255, 255, 0.76);
}
[data-tt-theme="light"] .collection-hero::after {
  background: radial-gradient(ellipse at center, rgba(54, 136, 191, 0.10) 0%, rgba(54, 136, 191, 0.04) 35%, rgba(54, 136, 191, 0.015) 60%, transparent 75%);
}
[data-tt-theme="light"] .collection-hero-inner { color: #242424; }
[data-tt-theme="light"] .collection-hero-text h1 { color: #242424; }
[data-tt-theme="light"] .collection-hero-text .hero-date { color: #3688bf; }
[data-tt-theme="light"] .collection-hero-text p { color: #404854; }
[data-tt-theme="light"] .collection-hero-media img {
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
}

/* Page-body azure glow (.container-v-pad::before, dark version peaks at
   rgba(56,149,255,0.32)) — tone down for the light page. */
[data-tt-theme="light"] .container-v-pad::before {
  background: radial-gradient(ellipse at center, rgba(56, 149, 255, 0.20) 0%, rgba(56, 149, 255, 0.09) 35%, rgba(56, 149, 255, 0.04) 60%, transparent 80%);
}

/* Per-song player container — the dark glass card reads charcoal-gray
   over the white page (rgba(19,20,26,0.85) + white bleed-through).
   Deepen it to near-black so the player sits in a solid dark frame. */
[data-tt-theme="light"] .curated-entry {
  background: rgba(8, 9, 12, 0.97);
}

/* Song entry headings ("<Song> by <Artist>") + their description blurbs.
   The linked song name is azure; the "by <Artist>" tail stays primary. */
[data-tt-theme="light"] .curated-entry-heading { color: #404854; }
[data-tt-theme="light"] .curated-entry-heading h2 { color: #242424; }
[data-tt-theme="light"] .curated-entry-heading h2 a { color: #3688bf; }
[data-tt-theme="light"] .curated-entry-heading h2 a:hover { color: #2e76a8; }
[data-tt-theme="light"] .curated-entry-heading p { color: #404854; }

/* Chord And Melody Metrics section — drop the dark glass card entirely;
   the radar chart (theme-aware via MultiRadarChart.php) sits directly on
   the light page. Inline-styled text inside flips to the light palette.
   !important beats both the inline style="" colors and the JS hover
   handlers that write this.style.color. */
[data-tt-theme="light"] .collection-metrics-card {
  /* Solid white surface + full border shorthand (not just border-color) +
     radius/padding so the treatment is self-sufficient on hosts without
     curatedView's base card styles — e.g. orderedView's Hot 10 metrics
     wrapper, which sits inside the dark #13141a .collection-list panel.
     On curatedView's white page this renders the same as the previous
     transparent box. Background is the standard light-card gradient —
     white highlight at the top settling into a faint azure base. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(rgba(54, 136, 191, 0.05), rgba(54, 136, 191, 0.05)),
    #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: none;
  color: #404854;
}
[data-tt-theme="light"] .collection-metrics-card h3 { color: #242424 !important; }
[data-tt-theme="light"] .collection-metrics-card a { color: #3688bf; }
/* "Learn more about these metrics" (inline #94a3b8 + JS hover). */
[data-tt-theme="light"] .collection-metrics-card h5 a { color: #404854 !important; }
[data-tt-theme="light"] .collection-metrics-card h5 a:hover { color: #242424 !important; }
/* "Find other songs with similar metrics" pill (inline #c5cdd6 border/text
   + JS hover that paints a white-on-dark hover background). */
[data-tt-theme="light"] .collection-metrics-card a[style*="border"] {
  color: #404854 !important;
  border-color: rgba(15, 23, 42, 0.30) !important;
}
[data-tt-theme="light"] .collection-metrics-card a[style*="border"]:hover {
  color: #242424 !important;
  border-color: rgba(15, 23, 42, 0.45) !important;
  background: rgba(15, 23, 42, 0.05) !important;
}

/* "Featured Collections" strip (partial-list.php) at the page bottom —
   header row + the card titles (the card surface is a translucent white
   that already reads as a light card over the light page). */
[data-tt-theme="light"] .featured-collections-header { border-bottom-color: rgba(15, 23, 42, 0.10); }
[data-tt-theme="light"] .featured-collections-header h2 { color: #242424; }
[data-tt-theme="light"] .featured-collections-header a.view-all { color: #74849b; }
[data-tt-theme="light"] .featured-collections-header a.view-all:hover { color: #242424; }
[data-tt-theme="light"] .featured-collection-card { color: #404854; }
[data-tt-theme="light"] .featured-collection-card:hover { color: #242424; }
[data-tt-theme="light"] .featured-collection-card .card-title { color: #242424; }

/* ══════════════════════════════════════════════════════════════════════
   COLLECTIONS DIRECTORY — collections-dark.php (/theorytab/collections).
   Title/subtitle/search/chips/cards all paint dark-mode colors in their
   own <style> block; flip to the light palette. */
[data-tt-theme="light"] .dir-grid { color: #242424 !important; } /* inline color: #ffffff on the wrapper */
[data-tt-theme="light"] .dir-title { color: #242424; }
[data-tt-theme="light"] .dir-subtitle { color: #404854; }

/* Search box. */
[data-tt-theme="light"] .dir-search {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.18);
}
[data-tt-theme="light"] .dir-search input { color: #242424; }
[data-tt-theme="light"] .dir-search input::placeholder { color: #74849b; }
[data-tt-theme="light"] .dir-search ion-icon { color: #74849b !important; } /* inline #94a3b8 */

/* Filter chips — same pill treatment as the mobile section tabs. */
[data-tt-theme="light"] .dir-chip {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.22);
  color: #404854;
}
[data-tt-theme="light"] .dir-chip:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #242424;
}
[data-tt-theme="light"] .dir-chip.active {
  background: rgba(54, 136, 191, 0.12);
  border-color: rgba(54, 136, 191, 0.55);
  color: #242424;
}
[data-tt-theme="light"] .dir-chip .count { color: #74849b; }
[data-tt-theme="light"] .dir-chip.active .count { color: #1e6fa1; }

/* Collection cards. */
[data-tt-theme="light"] .dir-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
[data-tt-theme="light"] .dir-card:hover {
  background: #ffffff;
  border-color: rgba(54, 136, 191, 0.50);
}
[data-tt-theme="light"] .dir-thumb {
  background: linear-gradient(135deg, #e8edf3 0%, #d3dce6 100%);
}
[data-tt-theme="light"] .dir-thumb-placeholder { color: rgba(116, 132, 155, 0.55); }
/* Type badge ("Staff Pick" / "Hot 10") over the thumbnail — brand azure. */
[data-tt-theme="light"] .dir-type-badge {
  background: rgba(54, 136, 191, 0.92);
  color: #ffffff;
}
[data-tt-theme="light"] .dir-card-title { color: #242424; }
[data-tt-theme="light"] .dir-card-desc { color: #404854; }
[data-tt-theme="light"] .dir-card-date { color: #3688bf; }
[data-tt-theme="light"] .dir-empty { color: #404854; }

/* Page scrollbar — the view styles thumbs in white-alpha, invisible on
   a white track. */
html[data-tt-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.18); }
html[data-tt-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.30); }
html[data-tt-theme="light"] { scrollbar-color: rgba(15, 23, 42, 0.18) transparent; }

/* ══════════════════════════════════════════════════════════════════════
   THEORYTAB SETTINGS PAGE — settings-2.php (/theorytab/settings).
   The page paints a dark 135deg gradient wrapper + dark-mode component
   colors in its own <style> block. tt-light.css loads in <head>, before
   that block, so the [data-tt-theme] attr prefix supplies the extra
   specificity needed to win; !important only where the view inlines
   styles or uses !important itself. */
[data-tt-theme="light"] [style*="linear-gradient(135deg, #181a24"] {
  background: linear-gradient(135deg, #f7f9fc 0%, #ffffff 45%, #ffffff 100%) !important;
}
[data-tt-theme="light"] [style*="linear-gradient(135deg, #181a24"] .text-white { color: #242424 !important; }
[data-tt-theme="light"] [style*="linear-gradient(135deg, #181a24"] .text-gray-300 { color: #404854 !important; }

/* Section headings, descriptions, dividers. */
[data-tt-theme="light"] .tt-set-h2 { color: #242424; }
[data-tt-theme="light"] .tt-set-desc { color: #404854; }
[data-tt-theme="light"] .tt-set-divider { border-top-color: rgba(15, 23, 42, 0.10); }

/* Radio rows (Appearance / Primary labels). */
[data-tt-theme="light"] .tt-radio-row { color: #404854; }
[data-tt-theme="light"] .tt-radio-row .tt-radio-sub { color: #74849b; }
[data-tt-theme="light"] .tt-radio-dot { border-color: rgba(15, 23, 42, 0.35); }
[data-tt-theme="light"] .tt-radio-row input:checked ~ .tt-radio-dot {
  border-color: #3688bf;
  background: #3688bf;
}
[data-tt-theme="light"] .tt-radio-row input:focus-visible ~ .tt-radio-dot { outline-color: #3688bf; }

/* Pill groups (standalone cards + joined segmented toggles). */
[data-tt-theme="light"] .tt-pill-group label {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.22);
  color: #404854;
}
[data-tt-theme="light"] .tt-pill-group label:hover { background: rgba(15, 23, 42, 0.04); }
[data-tt-theme="light"] .tt-pill-group input:checked + label {
  background: rgba(54, 136, 191, 0.12);
  border-color: #3688bf;
  color: #242424;
  box-shadow: 0 0 0 1px #3688bf inset;
}
[data-tt-theme="light"] .tt-pill-group input:focus-visible + label { outline-color: #3688bf; }
[data-tt-theme="light"] .tt-pill-sub { color: #74849b; }
[data-tt-theme="light"] .tt-pill-group input:checked + label .tt-pill-sub { color: #404854; }
[data-tt-theme="light"] .tt-pill-group--joined {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.22);
}
[data-tt-theme="light"] .tt-pill-group--joined label {
  background: transparent;
  border: 0;
}
[data-tt-theme="light"] .tt-pill-group--joined label:hover { background: rgba(15, 23, 42, 0.05); }
[data-tt-theme="light"] .tt-pill-group--joined input:checked + label {
  /* White text on brand azure — matches the genre-editor primary button. */
  background: #3688bf;
  color: #ffffff;
  box-shadow: none;
}

/* Color-palette cards. */
[data-tt-theme="light"] .tt-palette-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.22);
  color: #242424;
}
[data-tt-theme="light"] .tt-palette-card:hover { background: rgba(15, 23, 42, 0.03); }
[data-tt-theme="light"] .tt-palette-grid input:checked + .tt-palette-card {
  background: rgba(54, 136, 191, 0.10);
  border-color: #3688bf;
  box-shadow: 0 0 0 1px #3688bf inset;
}
[data-tt-theme="light"] .tt-palette-grid input:focus-visible + .tt-palette-card { outline-color: #3688bf; }

/* Help button / link / info card. */
[data-tt-theme="light"] .tt-help-btn { color: #74849b; }
[data-tt-theme="light"] .tt-help-btn:hover { color: #404854; }
[data-tt-theme="light"] .tt-help-link { color: #3688bf; }
[data-tt-theme="light"] .tt-help-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.15);
}
[data-tt-theme="light"] .tt-help-card ul { color: #404854; }
[data-tt-theme="light"] .tt-help-card b { color: #242424; }

/* Example preview caption. */
[data-tt-theme="light"] .tt-example-label { color: #404854; }

/* Sticky save bar. */
[data-tt-theme="light"] .tt-save-bar {
  background: rgba(255, 255, 255, 0.88);
  border-top-color: rgba(15, 23, 42, 0.10);
}
[data-tt-theme="light"] .tt-save-hint { color: #404854; }
[data-tt-theme="light"] .tt-save-btn {
  background: #3688bf;
  color: #ffffff;
}
[data-tt-theme="light"] .tt-save-btn:hover { background: #2e76a8; }
