/* =============================================================================
   chord-shapes — styling for the grip SVG that chord-shapes.js emits
   -----------------------------------------------------------------------------
   Moved out of guitar.css on 2026-07-27 alongside the renderers, so Songbook
   and Theory Lab draw AND style the diagrams from one place. Behaviour is
   unchanged; these are the same declarations, in a file both apps load.

   Everything colours itself from --kind, the family variable an ancestor sets
   (major → cyan, minor → violet, and so on). That indirection is why one
   renderer can sit in a Songbook chord tile, a Theory Lab shape card and a
   chord focus page and come out right in all three without any JS colour
   logic. Falls back to --accent where no family is declared.
============================================================================= */

.chord-diagram { display: block; }
.chord-diagram .grid-line { stroke: var(--border-hi); stroke-width: 1; }
.chord-diagram .nut       { stroke: var(--fg); stroke-width: 3; stroke-linecap: square; }
.chord-diagram .dot       { fill: var(--kind, var(--accent)); }
.chord-diagram .dot-text  { fill: var(--kind-fg, var(--accent-fg)); font: 700 9px var(--sans); text-anchor: middle; dominant-baseline: central; }
.chord-diagram .marker    { fill: var(--fg-dim); font: 600 11px var(--mono); text-anchor: middle; }
.chord-diagram .fret-label{ fill: var(--fg-mute); font: 600 10px var(--mono); }

/* The movable grip: a barre capsule instead of a nut, and a hollow root
   marker so the string the chord is named from stays readable at any fret. */
.barre-diagram .barre     { fill: var(--kind, var(--accent)); }
.barre-diagram .dot       { fill: var(--kind, var(--accent)); }
.barre-diagram .dot-text  { fill: var(--kind-fg, var(--accent-fg)); }
.barre-diagram .root-dot  { fill: var(--bg-elev); stroke: var(--kind, var(--accent)); stroke-width: 2; }
.barre-diagram .root-text { fill: var(--kind, var(--accent)); font-weight: 800; }