/* ==========================================================================
   COMPONENTS · BAR — a thin printed band-bar: a hairline track with a band-ink
   fill set by style="--v:<0..1>". The reusable measure primitive behind the
   ledger row, the pricing usage line and the dashboard meters. Always paired
   with a mono numeral nearby — the bar is the redundant, non-hue cue, never the
   only signal. Reads its colour from data-band.
   ========================================================================== */

.op-bar {
  position: relative;
  inline-size: 100%;
  block-size: 0.5rem;
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.op-bar__fill {
  display: block;
  block-size: 100%;
  inline-size: calc(var(--v, 0) * 100%);
  background: var(--bk-ink, var(--text-secondary));
  /* a faint engraved texture on the fill, so it reads as printed ink */
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in oklab, black 8%, transparent) 0 1px,
    transparent 1px 4px
  );
}

/* Thinner hairline variant for dense rows */
.op-bar--hair { block-size: 0.3rem; }
/* Taller variant for a featured meter */
.op-bar--tall { block-size: 0.8rem; }

/* No-data track: hatch, no fill */
.op-bar[data-band="none"] .op-bar__fill { display: none; }
.op-bar[data-band="none"] {
  background-image: var(--hatch-image);
}