/*
 * Meter — a known-range value (CPU %, capability score) as a thin bar.
 *
 *   <div class="meter meter--ok" role="meter" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100">
 *     <span class="meter__bar" style="width:72%"></span>
 *   </div>
 *
 * Tone: --ok (success) · --warn (warning) · --crit (danger) · --primary.
 * The native <meter> element is styled to match for views that use it.
 * Webkit and Gecko pseudo-elements must stay in separate rules.
 */
.meter {
    position: relative;
    width: 100%;
    height: var(--height-meter);
    background: var(--color-surface-hi);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.meter--tall   { height: var(--height-meter-tall); }
.meter--inline { display: inline-block; width: 80px; vertical-align: middle; margin-right: var(--sp-2); }
.meter__bar {
    display: block;
    height: 100%;
    max-width: 100%;
    background: var(--color-primary-hi);
    border-radius: inherit;
    transition: width var(--t-base);
}
.meter--ok      .meter__bar { background: var(--color-success); }
.meter--warn    .meter__bar { background: var(--color-warning); }
.meter--crit    .meter__bar { background: var(--color-danger); }
.meter--primary .meter__bar { background: var(--color-primary-hi); }
.meter--accent  .meter__bar { background: var(--color-accent); }
/* Label + value row above a meter. */
.meter-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: var(--sp-1); }
.meter-row__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-text); }

/* ── Native <meter> ─────────────────────────────────────────────── */
meter {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--height-meter);
    background: var(--color-surface-hi);
    border: none;
    border-radius: var(--radius-pill);
    overflow: hidden;
    vertical-align: middle;
}
meter::-webkit-meter-bar { background: var(--color-surface-hi); border: none; border-radius: var(--radius-pill); }
meter::-webkit-meter-optimum-value        { background: var(--color-success); border-radius: var(--radius-pill); }
meter::-webkit-meter-suboptimum-value     { background: var(--color-warning); border-radius: var(--radius-pill); }
meter::-webkit-meter-even-less-good-value { background: var(--color-danger);  border-radius: var(--radius-pill); }
meter::-moz-meter-bar { background: var(--color-success); border-radius: var(--radius-pill); }
meter:-moz-meter-optimum::-moz-meter-bar         { background: var(--color-success); }
meter:-moz-meter-sub-optimum::-moz-meter-bar     { background: var(--color-warning); }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--color-danger); }