/* ==========================================================================
   COMPONENTS · BAND — the single source of the score-band look. Any element
   carrying data-band="good|moderate|poor|none" exposes three locals that every
   score component reads: --bk-ink (numeral/word), --bk-line (keyline), and
   --bk-fill (the ~12% chip wash). "none" adds a hatch tone. This is the one
   place the score_band() values become visual; change it and every badge,
   medallion, chip, ledger row and map tile re-pitches at once.
   ========================================================================== */

/* --bk-pos is a NON-HUE position cue (a tick's vertical place): good rides high,
   poor sits low — a third channel beyond colour and numeral, for the map. */
[data-band="good"] {
  --bk-ink:  var(--band-good-ink);
  --bk-line: var(--band-good-line);
  --bk-fill: var(--band-good-fill);
  --bk-pos:  0%;
}
[data-band="moderate"] {
  --bk-ink:  var(--band-moderate-ink);
  --bk-line: var(--band-moderate-line);
  --bk-fill: var(--band-moderate-fill);
  --bk-pos:  50%;
}
[data-band="poor"] {
  --bk-ink:  var(--band-poor-ink);
  --bk-line: var(--band-poor-line);
  --bk-fill: var(--band-poor-fill);
  --bk-pos:  100%;
}
[data-band="none"] {
  --bk-ink:   var(--band-none-ink);
  --bk-line:  var(--band-none-line);
  --bk-fill:  var(--band-none-fill);
  --bk-hatch: var(--band-none-hatch);
  --bk-pos:   50%;
}

/* The no-data diagonal hatch, reusable as a background. Never a bare grey. */
.op-hatch,
[data-band="none"] .op-hatch {
  background-color: var(--surface);
  background-image: var(--hatch-image);
}