/* Meter: <div class="sv-meter"><div class="sv-meter__label">…</div><progress max value>…</progress></div>. */

.sv-meter {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-1);
  min-width: 0;
}
.sv-meter__label {
  display: flex;
  justify-content: space-between;
  gap: var(--sv-space-2);
  color: var(--sv-color-text);
  font-size: var(--sv-text-sm);
  font-variant-numeric: tabular-nums;
}
.sv-meter progress,
.sv-progress {
  width: 100%;
  height: 0.5rem;
  border: 0;
  border-radius: var(--sv-radius-pill);
  background: var(--sv-color-surface-sunken);
  color: var(--sv-color-primary);
  overflow: hidden;
  appearance: none;
}
.sv-meter progress::-webkit-progress-bar,
.sv-progress::-webkit-progress-bar { background: var(--sv-color-surface-sunken); border-radius: var(--sv-radius-pill); }
.sv-meter progress::-webkit-progress-value,
.sv-progress::-webkit-progress-value { background: var(--sv-color-primary); border-radius: var(--sv-radius-pill); transition: width var(--sv-duration) var(--sv-ease); }
.sv-meter progress::-moz-progress-bar,
.sv-progress::-moz-progress-bar { background: var(--sv-color-primary); border-radius: var(--sv-radius-pill); }
.sv-meter--complete progress::-webkit-progress-value { background: var(--sv-color-success-text); }
.sv-meter--complete progress::-moz-progress-bar { background: var(--sv-color-success-text); }
.sv-meter--sm progress { height: 0.375rem; }
.sv-meter--lg progress { height: 0.75rem; }