@layer components {
  /* A proportion, drawn as a bar.
   *
   * It stands under a figure rather than instead of one: "84%" is the answer,
   * and the bar is what lets a column of them be compared without reading any
   * of the numbers. That is why the default is decorative — the number beside
   * it already carries the fact, and a screen reader announcing both says
   * everything twice. Pass a label where the bar is on its own.
   *
   * Deliberately not <meter> or <progress>. Both come with a browser
   * appearance that differs on every platform and resists being restyled, and
   * <progress> means "this task is running" rather than "this is how full it
   * is" — which is what an occupancy column is saying.
   *
   * The value arrives as an inline --meter-value, the way .wizard__progress
   * takes one: it is a datum rather than a decision, so it is the one thing
   * here that does not come from a token.
   */
  .meter {
    --meter-height: 0.3rem;
    --meter-track: var(--surface-sunk);
    --meter-fill: var(--color-accent);

    display: block;
    inline-size: 100%;
    block-size: var(--meter-height);
    border-radius: var(--radius-pill);
    background: var(--meter-track);
    /* So the fill's own square end is clipped back to the track's curve at
       both ends, rather than the fill needing a radius that is wrong at every
       width but full. */
    overflow: hidden;
  }

  /* The same three tones as .badge, off the same tokens, because a bar and a
     pill saying the same thing on one row must not disagree about what colour
     that thing is. */
  .meter--positive { --meter-fill: var(--color-positive); }
  .meter--warning  { --meter-fill: var(--color-warning); }
  .meter--negative { --meter-fill: var(--color-negative); }

  .meter__fill {
    display: block;
    inline-size: var(--meter-value);
    block-size: 100%;
    border-radius: inherit;
    background: var(--meter-fill);
    transition: inline-size var(--duration) var(--ease-out);
  }

  /* A bar that animates its own width on every page load is a page that looks
     like it is still loading. The transition is for a value that changes under
     somebody, which is the only time it says anything. */
  @media (prefers-reduced-motion: reduce) {
    .meter__fill {
      transition: none;
    }
  }
}