/*
 * Vendored from voice-assistant/board/hud/styles/readout.css (Ultron HUD). Do not edit here: change the
 * design system, then refresh with node tools/vendor.mjs.
 */
/*
 * Ultron HUD, Readout: a number the room reads at a glance. Three lines read in order, an italic caps
 * label, the big glowing italic numeral and a secondary line whose tail dims, with an optional signed
 * delta after them. The type comes from the classes in the markup (hud-label, hud-display-*, hud-caption),
 * the light from hud-bloom and the dim tail from hud-decimal, so this file sets only ink, gaps, alignment
 * and the leader tick. A Readout is text: it has no states and nothing in it moves.
 *
 *   <div class="hud-readout hud-readout--md hud-readout--amber hud-readout--end">
 *     <p class="hud-readout__label hud-label">Talk share · Maya</p>
 *     <span class="hud-readout__leader hud-tick" aria-hidden="true"></span>
 *     <p class="hud-readout__value hud-display-md hud-bloom">70.55%</p>
 *     <p class="hud-readout__detail hud-caption">49<span class="hud-decimal">.6 s of 70.3 s</span></p>
 *   </div>
 *   size      hud-readout--xl, --lg (the default), --md, --sm, with the matching hud-display-* on the value
 *   tone      hud-readout--amber, --violet: only the leader takes the hue; the label and the numeral keep their ink
 *   align     hud-readout--end: right-aligned, for a readout left of what it reads
 *   reticle   hud-readout--reticle, with hud-brackets in the markup: inside corner brackets
 *   parts     __label, __value, __detail, __delta, __leader
 */

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

/*
 * Three columns: the leader's at the start, the lines in the middle, the leader's at the end (--end). A
 * column with nothing in it has no width and the column gap is 0, so a readout with no leader has no
 * indent. Rows keep their own height and pack at the top, so a readout stretched by its container does
 * not open its gaps.
 */
.hud-readout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-content: start;
  justify-items: start;
  row-gap: var(--space-2);
  min-width: 0;
  color: var(--ink);
}

/* ---------- Parts ---------- */

/*
 * The lines sit in the middle column. The label is row 1 and the numeral row 2 wherever they come in the
 * markup; the detail and the delta follow in the order written.
 */
.hud-readout__label,
.hud-readout__value,
.hud-readout__detail,
.hud-readout__delta {
  grid-column: 2;
  min-width: 0;
}

/*
 * the name of the number: ink-secondary whatever the tone. In the reference BTCUSDT and ETHUSDT are white like
 * their numerals, and the hue lives in the arc and the leader, so a tinted label would turn a readout into a
 * chart legend and put a signal hue on text.
 */
.hud-readout__label {
  grid-row: 1;
  color: var(--ink-secondary);
}

/* the numeral: bright, whole and on one line; its light comes from hud-bloom in the markup */
.hud-readout__value {
  grid-row: 2;
  color: var(--ink);
  white-space: nowrap;
}

/* the lines under it: the detail's own tail dims through hud-decimal, and the delta stays whole */
.hud-readout__detail,
.hud-readout__delta {
  color: var(--ink-secondary);
}

/*
 * The leader: a tick level with the middle of the numeral, where a gauge's leader lands. hud-tick in the
 * markup gives it its size; the hooks below give it the tone's hue and light, or white and glow-mark. It
 * belongs only where a leader arrives: a tick with nothing running into it reads as a minus sign before the
 * number, so a Gauge hides it wherever its own leaders hide.
 */
.hud-readout__leader {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  margin-right: var(--space-3);
  background-color: var(--hud-readout-tone, var(--mark));
  box-shadow: var(--hud-readout-glow, var(--glow-mark));
}

/* ---------- Sizes ---------- */

/* lg (the default), md and sm share one gap; the numeral's own class sets its size */
.hud-readout--lg,
.hud-readout--md,
.hud-readout--sm {
  row-gap: var(--space-2);
}

/* the hero, one per view: a wider gap, and a ground left clear around it */
.hud-readout--xl {
  row-gap: var(--space-3);
  margin: var(--space-12);
}

/* ---------- Tones ---------- */

/* the leader takes the hue and its light; the label and the numeral keep their ink */
.hud-readout--amber {
  --hud-readout-tone: var(--amber);
  --hud-readout-glow: var(--glow-amber);
}

.hud-readout--violet {
  --hud-readout-tone: var(--violet);
  --hud-readout-glow: var(--glow-violet);
}

/* ---------- Alignment ---------- */

/* right-aligned, for a readout left of what it reads: the leader moves to the right of the numeral */
.hud-readout--end {
  justify-items: end;
  text-align: right;
}

.hud-readout--end .hud-readout__leader {
  grid-column: 3;
  margin-right: 0;
  margin-left: var(--space-3);
}

/* ---------- Reticle ---------- */

/* inside corner brackets: hud-brackets in the markup draws them, and this keeps the lines clear of them */
.hud-readout--reticle {
  padding: var(--space-4);
}