/*
 * Vendored from voice-assistant/board/hud/styles/gauge.css (Ultron HUD). Do not edit here: change the
 * design system, then refresh with node tools/vendor.mjs.
 */
/*
 * Ultron HUD, Gauge (after base.css and readout.css in bundle.css).
 * The card around UltronHUD.gauge: the dial that the renderer draws (scripts/gauge.js) and the words that
 * sit beside or over it. The renderer writes classes and never a colour, so this file maps its segments,
 * the baseline's end dashes, stubs and tick labels to tokens, and places the parts. The guide arcs, the
 * baseline, the tick marks, the terminals and the leaders take their look from base.css (hud-guide,
 * hud-terminal, hud-leader) and are not restyled here. The figure is a size container, so a Gauge answers
 * to the width it is given and not to the viewport's. Colours only through var(--token).
 *
 *   <figure class="hud-gauge hud-gauge--split">   start readout, dial, end readout, caption
 *   <figure class="hud-gauge hud-gauge--single">  dial, value over its baseline, caption
 *   parts     __dial, __readout (--start, --end), __value, __caption
 *   drawing   __svg, __guide, __baseline, __end, __segment (--amber, --violet, --lit), __terminal,
 *             __leader, __stub (--amber, --violet), __tick-mark, __tick-label
 */

/* ---------- The block ---------- */

.hud-gauge {
  /* the dial's natural width: the drawing's 600 units, one pixel each at a 16px root */
  --hud-gauge-width: 37.5rem;
  /* how far a split's start readout drops to meet its leader, which ends 118 units down (a unit is 1/16 rem), less the middle of a md numeral under a one-line label */
  --hud-gauge-drop-start: 4.5rem;
  /* the same for the end readout, whose leader ends 104 units down */
  --hud-gauge-drop-end: 3.625rem;
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  margin: 0;
  color: var(--ink);
}

/* ---------- The dial ---------- */

/* the renderer fills it: the whole width up to the natural one, centred */
.hud-gauge__dial {
  width: 100%;
  max-width: var(--hud-gauge-width);
  min-width: 0;
  margin: 0 auto;
}

/* the drawing scales as one; it overflows its box on purpose, for the stubs' ends and the glow */
.hud-gauge__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---------- The baseline's ends ---------- */

/*
 * Two short white dashes cap the baseline, beyond the terminal dots, as the reference's do. They are
 * marks, so a stroke-mark line in mark that keeps its pixel width however the drawing scales; their light
 * is hud-halo in the markup.
 */
.hud-gauge__end {
  fill: none;
  stroke: var(--mark);
  stroke-width: var(--stroke-mark);
  vector-effect: non-scaling-stroke;
}

/* ---------- The segments ---------- */

/*
 * Radial strokes whose width is the renderer's stroke-width attribute (stroke-segment), so no width here.
 * Unlit, a segment is its hue's dim; lit, it is the hue itself, with its light.
 */
.hud-gauge__segment {
  fill: none;
  stroke-linecap: butt;
}

.hud-gauge__segment--amber {
  stroke: var(--amber-dim);
}

.hud-gauge__segment--violet {
  stroke: var(--violet-dim);
}

.hud-gauge__segment--amber.hud-gauge__segment--lit {
  stroke: var(--amber);
  filter: drop-shadow(0 0 2px var(--amber-glow)) drop-shadow(0 0 6px var(--amber-glow));
}

.hud-gauge__segment--violet.hud-gauge__segment--lit {
  stroke: var(--violet);
  filter: drop-shadow(0 0 2px var(--violet-glow)) drop-shadow(0 0 6px var(--violet-glow));
}

/* ---------- Leaders, stubs and tick labels ---------- */

/*
 * A leader runs from a share out to the side where its Readout sits, so it shows only once the readouts
 * are there (Split, below). Its stub is the lit end that meets the Readout's tick: a stroke-mark line in
 * the hue, which keeps its pixel width however the drawing scales.
 */
.hud-gauge__leader,
.hud-gauge__stub {
  display: none;
}

.hud-gauge__stub {
  fill: none;
  stroke-width: var(--stroke-mark);
  vector-effect: non-scaling-stroke;
}

.hud-gauge__stub--amber {
  stroke: var(--amber);
  filter: drop-shadow(0 0 3px var(--amber-glow));
}

.hud-gauge__stub--violet {
  stroke: var(--violet);
  filter: drop-shadow(0 0 3px var(--violet-glow));
}

/* the display face, italic; its size is in the drawing's units, so it scales with the dial */
.hud-gauge__tick-label {
  fill: var(--ink-secondary);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  font-synthesis: none;
}

/* ---------- Words ---------- */

/* a Readout in its place, flush to the dial's side of the row */
.hud-gauge__readout {
  display: flex;
  min-width: 0;
}

.hud-gauge__readout--start {
  justify-content: flex-end;
}

/*
 * A Readout's leader tick is where the drawing's leader and stub arrive, so it shows only from 56rem (the
 * container query in Split below), with them. Narrower, no leader reaches it, and a tick alone beside a
 * number reads as a minus sign: "33.33%" would look like "−33.33%".
 */
.hud-gauge__readout .hud-readout__leader {
  display: none;
}

/* a single's numeral: bright and whole; its light comes from hud-bloom in the markup */
.hud-gauge__value {
  min-width: 0;
  color: var(--ink);
  text-align: center;
}

/* what the figure measures and over what; its own number's tail dims through hud-decimal */
.hud-gauge__caption {
  min-width: 0;
  color: var(--ink-secondary);
  text-align: center;
}

/* ---------- Split: the start readout, the dial and the end readout ---------- */

/*
 * Three columns: the dial's own width in the middle, up to its natural width, and what is left on either
 * side of it. Narrow, the dial sits in the middle column on row 1 and the readouts share row 2 of that
 * column, side by side, the start one flush right and the end one flush left, so the pair hangs from the
 * dial's middle; the side columns stay empty. The caption spans the figure on the last row.
 */
.hud-gauge--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(100%, var(--hud-gauge-width)) minmax(0, 1fr);
  align-items: start;
  row-gap: var(--space-6);
}

.hud-gauge--split > .hud-gauge__dial {
  grid-area: 1 / 2;
}

.hud-gauge--split > .hud-gauge__readout {
  grid-area: 2 / 2;
  width: 50%;
}

.hud-gauge--split > .hud-gauge__readout--start {
  justify-self: start;
  padding-right: var(--space-3);
}

.hud-gauge--split > .hud-gauge__readout--end {
  justify-self: end;
  padding-left: var(--space-3);
}

.hud-gauge--split > .hud-gauge__caption {
  grid-area: 3 / 1 / auto / -1;
}

/*
 * From 56rem the three share row 1: the start readout, the dial at its natural width and the end readout,
 * the sides taking the rest equally. Each readout drops to meet its leader, as the Palette page's hero
 * does, and its own leader tick lands against the end of the drawing's stub. The leaders, the stubs and
 * the ticks appear together, and go together below this width.
 */
@container (min-width: 56rem) {
  .hud-gauge--split > .hud-gauge__readout {
    grid-row: 1;
    justify-self: stretch;
    width: auto;
    padding: 0;
  }

  .hud-gauge--split > .hud-gauge__readout--start {
    grid-column: 1;
    margin-top: var(--hud-gauge-drop-start);
  }

  .hud-gauge--split > .hud-gauge__readout--end {
    grid-column: 3;
    margin-top: var(--hud-gauge-drop-end);
  }

  .hud-gauge--split > .hud-gauge__caption {
    grid-row: 2;
  }

  .hud-gauge__leader,
  .hud-gauge__stub {
    display: inline;
  }

  .hud-gauge__readout .hud-readout__leader {
    display: inline-block;
  }
}

/* ---------- Single: the dial with its value over the baseline ---------- */

/*
 * One cell holds the dial and the numeral, the numeral at its foot. The track is the dial's own width, so
 * a percentage margin is a share of the drawing: the baseline sits 18 of its 280 units up from the foot,
 * 3% of its width, and the numeral stands a step above it.
 */
.hud-gauge--single {
  display: grid;
  grid-template-columns: minmax(0, var(--hud-gauge-width));
  justify-content: center;
  row-gap: var(--space-3);
}

.hud-gauge--single > .hud-gauge__dial {
  grid-area: 1 / 1;
}

.hud-gauge--single > .hud-gauge__value {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: center;
  margin-bottom: calc(3% + var(--space-2));
}

.hud-gauge--single > .hud-gauge__caption {
  grid-area: 2 / 1;
}

/* ---------- Small containers ---------- */

/* a tick label this small could not be read from across the table, so only the marks stay */
@container (max-width: 30rem) {
  .hud-gauge__tick-label {
    display: none;
  }
}

/* the space inside the arc has shrunk to a few words: the numeral steps out from under it */
@container (max-width: 22rem) {
  .hud-gauge--single > .hud-gauge__value {
    grid-row: 2;
    align-self: start;
    margin-bottom: 0;
  }

  .hud-gauge--single > .hud-gauge__caption {
    grid-row: 3;
  }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  /*
   * Lit segments sweep from the start: segment i waits i steps, a step being timing-sweep divided by the
   * number of segments (the renderer sets --i on the segment and that number, --hud-gauge-steps, on the
   * drawing), and its light comes up with it. A drawing made without animate, or under reduced motion,
   * is finished at once.
   */
  .hud-gauge__segment {
    transition:
      stroke var(--timing-fast) var(--timing-ease) calc(var(--i) * var(--timing-sweep) / var(--hud-gauge-steps)),
      filter var(--timing-fast) var(--timing-ease) calc(var(--i) * var(--timing-sweep) / var(--hud-gauge-steps));
  }
}