/* ==========================================================================
   UNIFIED BUTTONS — interactive-element canonical (2026-05-26, app-wide
   2026-05-27)
   ==========================================================================

   Every button / toggle / dropdown / icon button on category tool pages
   shares the same visual language: 35px height, semi-transparent fill,
   1.5px stroke for visual separation, readable typography. Goal: every
   interactive surface reads as one family with the in-panel tabs (e.g.
   CIRCLE OF FIFTHS / LIBRARY / FRETBOARD TOOL / ANALYSIS / GLOSSARY on
   cat-learn).

   Toggles (.cof-pill-group + .cof-pill) remain SEGMENTED CONTROLS — the
   group carries one outer stroke, individual pills have no border. Per
   design.md "For pills inside a wrapper group with the border, pill has
   border: none — group carries the 1.5px border".

   Scope: APP-WIDE on every category tool page (Learn / Practice / Play /
   Tools — 15 pages: circle-of-fifths, fretboard-tool, library, scales,
   modes, analysis, glossary, harmony-training, ear-training, sight-
   reading, looper, backing-tracks, jazz-standards, tuner, metronome).
   Originally CoF-only; rolled out to every tool page via static <link>
   to eliminate the FOUC from nav.js's runtime injection (per
   engineering.md "FOUC from JS-injected layout CSS").

   The selectors used (.btn, .cof-pill, .gt-select, .lib-dice-btn,
   .panel-tab, .jz-back-btn, .jz-yt-btn, .jz-diagrams-more) are shared
   classes — this stylesheet intentionally touches every tool's
   interactive surface so the visual language is uniform.

   ──────────────────────────────────────────────────────────────────────
   TO ROLL BACK — one git revert handles all of this, or manually:

     1. DELETE css/unified-buttons.css
     2. REMOVE the <link rel="stylesheet" href=".../unified-buttons.css">
        line from all 15 tool pages under pages/
     3. REMOVE the unified-buttons.css fallback block in
        js/core/nav.js's _injectPanelTabs
   ────────────────────────────────────────────────────────────────────── */


/* Shared spec — solid var(--bg-control) (#1a1d27) for every button /
   toggle / dropdown / tab on the page. Menu bar (.panel-tabs-bar)
   keeps its inherited panel-gradient bg, so the bar and the buttons
   read as the same dark surface. Active toggle pill stays at
   var(--border-default) (#2a2d3a) and non-active toggle pill stays at
   var(--bg-darker) (#13151f) — that contrast IS the segmented-control
   selection affordance. */
:root { --cof-exp-btn-bg: var(--bg-control); }


/* ---- Centring shift relative to the 4px category-accent stripe.
   The stripe (::before on #cof-layout) overlaps the first 4px of
   #cof-left's content area. Flex-centred items inside #cof-left
   would otherwise land at #cof-left's geometric center, which sits
   2px LEFT of the visual content center (stripe-right-edge to
   right-edge). Asymmetric padding pL = pR + 4 = 28 (pR = 24)
   shifts the centring axis +2px so title/wheel/toggles align to
   the visible content area.
   Per design.md "Category-accent centring canonical". */
body #cof-left {
  /* pL = pR + 21 (= 24 + 21 = 45) accounts for: (a) +14 for accent-
     stripe centring shift; (b) +7 extra to compensate for cof-left's
     width shrinking by 7px when inner reserves the 14px scrollbar
     gutter (without compensation, the content centre lands 3.5px
     left of the visual centre between accent-right and divider-
     left). User 2026-05-28: "circle of fifths etc niet horizontal
     gecentreerd tussen vertical center divider en rechterpunt van de
     blauwe accent bar." */
  padding-left: 45px !important;
}


/* ---- Action buttons (.btn): Ascending, Descending, Play with Backing
   Track, Open in Library (JS-injected anchor), View All Products
   (anchor in the "Try Our Physical Tools" detail). 1.5px stroke from
   the design canonical (var(--border-default)) so adjacent buttons in
   #cof-buttons don't visually merge through the semi-transparent fill.
   UPPERCASE + letter-spacing — user 2026-05-28 second pass: "ook
   'ascending' etc buttons. allemaal die zelfde font ... mag ook
   capitalised." Same typography pattern as the .panel-tab in MENU 2
   (0.78rem / 700 / uppercase / letter-spacing 0.08em), here at 0.8rem
   to match the existing button height rhythm.
   !important guard against per-page overrides in circle-of-fifths.css. */
.btn,
.jz-back-btn,
.jz-yt-btn,
.jz-diagrams-more {
  height: 35px !important;
  box-sizing: border-box !important;
  padding: 0 14px !important;
  background: var(--cof-exp-btn-bg) !important;
  border: 2px solid var(--border-default) !important;
  border-radius: 10px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-default) !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover,
.jz-back-btn:hover,
.jz-yt-btn:hover,
.jz-diagrams-more:hover {
  border-color: var(--border-hover) !important;
  color: var(--text-strong) !important;
}


/* ---- Pill toggles (.cof-pill inside .cof-pill-group): SEGMENTED
   CONTROL — group carries one outer stroke (35px outer, border-box so
   it matches every other interactive element on the page); pills sit
   side-by-side with no individual border, no gap, stretched via flex
   to fill the group's 32px inner content area.

   NOT uppercase — same base typography as .btn (0.8rem / 600 / normal
   case).

   Non-active pill bg = var(--bg-darker) (#13151f) — distinctly darker
   than the action-button bg so the unselected option reads as visibly
   inactive (matches base .cof-pill's original bg, restored after user
   feedback 2026-05-26 "non-selected mag stuk donkerder zoals het eerst
   was"). Active pill bg = var(--border-default) (#2a2d3a), which is
   notably lighter than the non-active pill — the contrast IS the
   "selected" affordance. */
.cof-pill-group {
  box-sizing: border-box !important;
  height: 35px !important;
}
.cof-pill {
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 0 14px !important;
  background: var(--bg-darker) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-default) !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cof-pill:hover { color: var(--text-strong) !important; }
.cof-pill.active {
  color: var(--text-strong) !important;
  background: var(--border-default) !important;
}

/* Analysis Key Finder / Progression Finder: .cof-pill is reused for
   ROOT NOTE and CHORD QUALITY pills inside .kf-root-row / .kf-type-row.
   These are STANDALONE buttons (group has border:none, gap:4px) — they
   need their own rounded corners + their own borders. The canonical
   `.cof-pill { border-radius: 0 !important; border: none !important }`
   above is for the SEGMENTED-CONTROL use (CoF Notes/Chords toggle
   inside a bordered group). Restore individual pill chrome here. */
.kf-root-row .cof-pill,
.kf-type-row .cof-pill {
  border: 2px solid var(--border-default) !important;
  border-radius: 10px !important;
}


/* ---- Dropdowns (.gt-select): native <select>, keep functional chevron.
   1.5px stroke + readable text colour. Override background-color only
   so the chevron background-image / position / size from base.css survive.

   NOT uppercase, NOT bold, tighter padding — the dropdown auto-sizes
   to its widest option (e.g. "Natural Major (Ionian)"), so uppercase
   + 0.08em letter-spacing made it wider than the toolbar slot inside
   the panel-tabs bar and pushed the dice off the row. Reverted to the
   base.css typography (0.8rem / 600 / normal-case) — only the fill,
   stroke colour and height stay in the unified-button language. */
.gt-select {
  height: 35px !important;
  box-sizing: border-box !important;
  padding: 0 26px 0 10px !important;
  background-color: var(--cof-exp-btn-bg) !important;
  border: 2px solid var(--border-default) !important;
  border-radius: 10px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--text-default) !important;
}
.gt-select:hover, .gt-select:focus {
  border-color: var(--border-hover) !important;
  color: var(--text-strong) !important;
}


/* ---- Icon button (.lib-dice-btn): square 35×35 with 1.5px stroke
   matching the rest of the row. */
.lib-dice-btn {
  height: 35px !important;
  width: 35px !important;
  background: var(--cof-exp-btn-bg) !important;
  border: 2px solid var(--border-default) !important;
  border-radius: 10px !important;
  color: var(--text-default) !important;
}
.lib-dice-btn:hover {
  border-color: var(--border-hover) !important;
  color: var(--text-strong) !important;
}


/* ---- Panel tabs (.panel-tab, defined in panel-tabs.css):
   the in-panel category tabs (CIRCLE OF FIFTHS / LIBRARY / FRETBOARD
   TOOL / ANALYSIS / GLOSSARY) originally had `border: none` AND
   background: rgba(42,45,58,0.5). Add the same 1.5px stroke and the
   same var(--bg-darker) fill as every other interactive element on
   the page so the visual language is fully unified. box-sizing:
   border-box already on .panel-tab so the border doesn't change outer
   dimensions. */
.panel-tab {
  background: var(--cof-exp-btn-bg) !important;
  border: 2px solid var(--border-default) !important;
}
.panel-tab:hover { border-color: var(--border-hover) !important; }
.panel-tab.active { border-color: var(--border-hover) !important; }