/* ==========================================================================
   COMPONENTS · BADGE — the universal score glyph, grafted from DATUM: a short
   ticked rule (a vernier) with an index mark at the value, the mono numeral to
   one decimal, and the small-caps band word. NEVER colour alone — numeral AND
   word AND ink, every time. Re-skins the legacy .country-show-badge--{good,
   moderate,poor,none} hooks 1:1. Set the value position with style="--v:<0..1>"
   where --v = (score - 1) / 4.
   ========================================================================== */

.op-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.28em 0.6em;
  background: var(--bk-fill, var(--surface-sunken));
  border: 1px solid var(--bk-line, var(--rule-strong));
  border-radius: var(--radius-xs);
  color: var(--bk-ink, var(--text));
  font-family: var(--font-furniture);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

/* — The vernier: a short ticked baseline with a caret index at the value — */
.op-badge__scale {
  position: relative;
  inline-size: 3.1em;
  block-size: 1.05em;
  flex: none;
  --v: 0.5;
}
/* the baseline rule */
.op-badge__scale::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.18em;
  height: 1px;
  background: color-mix(in oklab, var(--bk-line, var(--text-secondary)) 60%, transparent);
}
/* five ticks at 0 / 25 / 50 / 75 / 100% */
.op-badge__scale::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.18em;
  height: 0.34em;
  background:
    linear-gradient(var(--bk-line, var(--text-secondary)), var(--bk-line, var(--text-secondary))) 0%   100% / 1px 100% no-repeat,
    linear-gradient(var(--bk-line, var(--text-secondary)), var(--bk-line, var(--text-secondary))) 25%  100% / 1px 60%  no-repeat,
    linear-gradient(var(--bk-line, var(--text-secondary)), var(--bk-line, var(--text-secondary))) 50%  100% / 1px 60%  no-repeat,
    linear-gradient(var(--bk-line, var(--text-secondary)), var(--bk-line, var(--text-secondary))) 75%  100% / 1px 60%  no-repeat,
    linear-gradient(var(--bk-line, var(--text-secondary)), var(--bk-line, var(--text-secondary))) 100% 100% / 1px 100% no-repeat;
  opacity: 0.65;
}
/* the index caret, pointing down at the value */
.op-badge__index {
  position: absolute;
  bottom: 0.42em;
  left: calc(var(--v) * 100%);
  transform: translateX(-50%);
  inline-size: 0;
  block-size: 0;
  border-left: 0.32em solid transparent;
  border-right: 0.32em solid transparent;
  border-top: 0.4em solid var(--bk-ink, var(--text));
}

.op-badge__value {
  font-family: var(--font-data);
  font-weight: var(--weight-semibold);
  font-size: 0.95em;
  font-variant-numeric: tabular-nums lining-nums;
}
.op-badge__band {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* — Sizes — */
.op-badge--sm { padding: 0.2em 0.45em; gap: 0.4em; font-size: var(--text-xs); }
.op-badge--sm .op-badge__scale { inline-size: 2.4em; }
.op-badge--lg { padding: 0.4em 0.8em; gap: 0.7em; }
.op-badge--lg .op-badge__value { font-size: 1.2em; }

/* — Quiet variant: no chip fill, just the glyph (for dense tables) — */
.op-badge--quiet {
  background: none;
  border-color: transparent;
  padding-inline: 0;
}

/* ----------------------------------------------------------------------
   LEGACY HOOKS — map the existing .country-show-badge--{band} classes onto
   the same band locals so server-rendered markup gets the new look for free.
   ---------------------------------------------------------------------- */
.country-show-badge {
  --bk-ink: var(--text); --bk-line: var(--rule-strong); --bk-fill: var(--surface-sunken);
}
.country-show-badge--good     { --bk-ink: var(--band-good-ink);     --bk-line: var(--band-good-line);     --bk-fill: var(--band-good-fill); }
.country-show-badge--moderate { --bk-ink: var(--band-moderate-ink); --bk-line: var(--band-moderate-line); --bk-fill: var(--band-moderate-fill); }
.country-show-badge--poor     { --bk-ink: var(--band-poor-ink);     --bk-line: var(--band-poor-line);     --bk-fill: var(--band-poor-fill); }
.country-show-badge--none     { --bk-ink: var(--band-none-ink);     --bk-line: var(--band-none-line);     --bk-fill: var(--band-none-fill); }