/* ============================================================
   availability.css — How an availability reading is rendered.

   Replaces los-badge.css. There is no letter grade: A–F Level of
   Service is a traffic-engineering convention inherited from the
   Signals scorecard, and parking has no equivalent. A reading is
   the measured percentage, encoded on the continuous --avail-*
   ramp from tokens.css.

   Three states, and only three:
     measured      figure + ramp-colored bar
     not measured  muted "Not measured", never a zero-width bar
     legend        the ramp itself, with endpoint labels
   ============================================================ */

/* ── A reading in a table cell or card ─────────────────── */
.avail {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.avail-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.avail-val .unit { color: var(--muted); }

.avail-bar {
  position: relative;
  flex: 1 1 56px;
  min-width: 48px;
  max-width: 120px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}
/* The ramp color arrives as --avail-fill rather than as an inline
   `background`, so that the forced-colors rule at the foot of this file
   can still override it. An inline background declaration outranks every
   stylesheet rule, and the only thing that beats one is !important,
   which this codebase does not use. A custom property keeps the value
   per-row and inline where it belongs while leaving the property it
   feeds addressable from CSS. */
.avail-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: inherit;
  background: var(--avail-fill, var(--no-data));
}

/* ── Not measured ──────────────────────────────────────────
   Deliberately textual. A bar of any width — even 2% — reads as a
   low measurement rather than an absent one. */
.avail-nodata {
  color: var(--muted);
  font-size: var(--text-sm);
  font-style: italic;
  white-space: nowrap;
}

/* ── Legend key ────────────────────────────────────────────
   Only for legends — the one place a color chip is the subject
   rather than an ornament. It is shaped like a segment of the
   ramp bar below, not like a dot, so the two read as one scale
   with one value parked off the end of it.

   This deliberately has no counterpart in tables, cards, popups
   or tooltips. A colored dot beside a city's name decorates the
   name; it doesn't measure anything the adjacent figure hasn't
   already said. Don't reintroduce one. */
.avail-key {
  display: inline-block;
  width: 16px;
  height: 8px;
  border-radius: var(--radius-pill);
  flex: none;
  vertical-align: middle;
  background: var(--no-data);
}

/* The ramp's legend used to live here, repeated above every ranking
   table and chart. It is gone: in a table each bar sits beside its own
   percentage and unmeasured rows print the words "Not measured", so the
   colour was a second encoding of something already stated in full.

   The one place it survives is the landing page's pinned map, where
   colour IS the only encoding — that legend is .map-legend in
   css/components/map.css. It is the ramp alone now; its off-ramp and
   downtown-ring keys were removed. Keep .avail-key above regardless:
   the gate pins it. */

/* ── Big figure (city hero) ────────────────────────────── */
.avail-figure-bar {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
  margin-top: var(--space-2);
}
/* Same as .avail-bar-fill: the color comes in as a custom property so
   the forced-colors rule below can reach it. */
.avail-figure-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--avail-fill, var(--no-data));
}

/* ── The bars, when the system is picking the colors ──────
   Both bars are a track and a fill distinguished only by background
   color, and Windows high contrast replaces both backgrounds with the
   same system Canvas — so the bar disappeared completely. On the city
   hero that left the one picture under the headline figure simply
   missing; in a ranking table it did it 3,084 times.

   What is restored here is LENGTH, not hue. The ramp's color is already
   redundant with the number printed beside it — that redundancy is why
   the ramp is allowed to fall under 3:1 in the first place — but the
   bar's length is the only thing on the row that lets a reader compare
   two cities without reading two numbers, and that survives perfectly
   well in one color. So: the track gets an outline so it can be seen,
   and the fill takes the system's own highlight color.

   forced-color-adjust is deliberately NOT used. Keeping our ramp would
   override a setting the reader chose, and the information it carries
   is already on screen in words. */
@media (forced-colors: active) {
  .avail-bar,
  .avail-figure-bar {
    border: 1px solid CanvasText;
  }
  .avail-bar-fill,
  .avail-figure-bar > span {
    background: Highlight;
  }
}