/* ============================================================
   GAUGE — Figma 86:12327
   ------------------------------------------------------------
       <span class="ice-gauge" style="--value:.7"></span>
       <span class="ice-gauge" data-size="l" data-tone="good" style="--value:.9"></span>

   A track and a fill, and that is all. `--value` is a 0–1 number,
   so the same markup covers any score with no extra class.

   The SLIDER below is the same track and the same fill with a
   thumb on the end and a native <input type="range"> over it, so
   the two can never drift apart.

     TONES — the gradient the fill is painted with

       (none)   default   ice blue, the neutral reading
       strong   the ink blue, when the number is the point
       live     vivid blue, in progress — the only one at full
                strength, so it reads as active
       good     teal → green
       caution  peach → yellow
       danger   red

   `good / caution / danger` are a scale, not three components: a
   high score good and a high score bad are the same three tones
   picked in the other order. Nothing here knows which way round.
   ============================================================ */

.ice-gauge {
  display: block;
  inline-size: var(--w-150);
  block-size: 8px;                    /* default = m */
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--ice-grey-700) 15%, transparent);
}

.ice-gauge[data-size="s"] { block-size: 6px; }
.ice-gauge[data-size="m"] { block-size: 8px; }
.ice-gauge[data-size="l"] { block-size: 10px; }

.ice-gauge::before {
  content: "";
  display: block;
  inline-size: calc(var(--value, 0) * 100%);
  block-size: 100%;
  border-radius: inherit;
  background-image: linear-gradient(to right, var(--ice-blue-600), var(--ice-blue-400));
  opacity: .8;
}

/* --- Tones -------------------------------------------------- */
.ice-gauge[data-tone="strong"]::before {
  background-image: linear-gradient(to right, var(--ice-blue-900), var(--ice-blue-600));
}
.ice-gauge[data-tone="live"]::before {
  background-image: linear-gradient(to right, var(--vivid-blue-600), var(--vivid-blue-400));
  opacity: 1;
}
.ice-gauge[data-tone="good"]::before {
  background-image: linear-gradient(to right, var(--vivid-turquoise-500), var(--vivid-green-300));
}
.ice-gauge[data-tone="caution"]::before {
  background-image: linear-gradient(to right, var(--vivid-peach-400), var(--vivid-yellow-300));
}
.ice-gauge[data-tone="danger"]::before {
  background-image: linear-gradient(to right, var(--ice-red-700), var(--ice-red-400));
}

/* --- The labelled pair used on an article card -------------- */
.ice-gauge-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}
.ice-gauge-field > .ice-gauge { inline-size: var(--w-150); }