.meter {
  display: block;
  position: relative;
  isolation: isolate;
  height: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  overflow: hidden;
}

.meter::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 0%);
  border-radius: inherit;
  background: var(--accent);
}

.meter::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 var(--band-start, 0%);
  width: calc(var(--band-end, 0%) - var(--band-start, 0%));
  background: var(--good-soft);
}

.meter-good::before {
  background: var(--good);
}

.meter-caution::before {
  background: var(--caution);
}

.meter-danger::before {
  background: var(--danger);
}

.meter-list {
  container-type: inline-size;
  display: grid;
  gap: var(--space-2);
}

.meter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "label value band"
    "meter meter meter";
  column-gap: var(--space-2);
  row-gap: var(--space-1);
  align-items: center;
}

.meter-row-label {
  grid-area: label;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}

.meter-row-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 2px;
}

.meter-row-link:hover {
  text-decoration-color: currentColor;
}

.meter-row-meter {
  grid-area: meter;
  min-width: 0;
}

.meter-row-value {
  grid-area: value;
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.meter-row-band {
  grid-area: band;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* 34rem: a half-width analytics panel on a 1280px laptop is about 37rem
   inside, and one-line meters are the point of putting it on the grid. */
@container (min-width: 34rem) {
  .meter-row {
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr) auto auto;
    grid-template-areas: "label meter value band";
  }
}