/*
 * Vendored from voice-assistant/board/hud/styles/progress.css (Ultron HUD). Do not edit here: change the
 * design system, then refresh with node tools/vendor.mjs.
 */
/*
 * Ultron HUD, Progress (contract 9.15): how far something has got, or that it is under way. A segmented bar,
 * determinate or indeterminate; a spinner, a ring of twelve segments with three lit; and skeleton lines where
 * content will appear. The type comes from the classes in the markup (hud-label, hud-display-xs, hud-caption)
 * and the dim tail of a reading from hud-decimal, so this file sets ink, hues, gaps and the drawings.
 *
 *   <div class="hud-progress" role="progressbar">                     the bar: __head (__label, __value), then __track
 *   <div class="hud-progress hud-progress--spinner" role="status">    the spinner: __ring, then __label
 *   <div class="hud-progress hud-progress--skeleton" aria-hidden>     the lines: one __line for each
 *   modifier  hud-progress--violet (the bar's second hue), hud-progress--lg (the larger spinner)
 *   state     data-state="indeterminate" on a bar that has no value
 *   hooks     --hud-progress-value, a bar's share as a percentage, and --hud-progress-width, a line's: set in the markup
 *
 * Progress is not pressable, focusable or editable, so it has no hover, focus, disabled or invalid state. What
 * moves is an indeterminate bar's lit window, the spinner and the skeleton's shimmer, each only when motion is
 * allowed, and every still frame is complete: the order of this file is the order of the parts, then Motion.
 * Colours only through var(--token).
 */

/* ---------- The block, its hues and its sizes ---------- */

.hud-progress {
  /* the bar's lit hue, its unlit hue and its light: amber, the first series; --violet swaps all three */
  --hud-progress-tone: var(--amber);
  --hud-progress-tone-dim: var(--amber-dim);
  --hud-progress-glow: var(--amber-glow);
  /* the track's height */
  --hud-progress-height: 0.75rem;
  /* one segment's start to the next one's: a stroke-segment bar, then dark */
  --hud-progress-pitch: 6px;
  /* the spinner's ring, and how thick its band is */
  --hud-progress-ring: 1.5rem;
  --hud-progress-band: calc(var(--hud-progress-ring) / 5);
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

/* the second series, for a count that is no limit */
.hud-progress--violet {
  --hud-progress-tone: var(--violet);
  --hud-progress-tone-dim: var(--violet-dim);
  --hud-progress-glow: var(--violet-glow);
}

/* the larger spinner: the band follows the ring */
.hud-progress--lg {
  --hud-progress-ring: 2.5rem;
}

/* ---------- The bar: its head ---------- */

/* the label at the start and the reading at the end; in a narrow column the reading wraps under the label */
.hud-progress__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}

/* what is under way, in ink-secondary: the bar's name, and the spinner's words */
.hud-progress__label {
  min-width: 0;
  color: var(--ink-secondary);
}

/* the reading is the display face, bright and never bloomed; its tail dims through hud-decimal in the markup */
.hud-progress__value {
  flex: none;
  margin-left: auto;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

/* ---------- The bar: its track ---------- */

/*
 * The gauge's arc laid straight: segments stroke-segment wide at a six-pixel pitch, unlit in the hue's dim step
 * on the track itself and lit in the hue over it, up to the value. The lit run is the track's ::before, so that
 * its light is a drop-shadow of the lit segments alone, the recipe of a gauge's lit segments. Both layers start
 * at the track's left edge with the same pitch, so a lit segment sits exactly over its unlit one. A value that
 * ends inside a segment cuts it there.
 */
.hud-progress__track {
  --hud-progress-unlit: repeating-linear-gradient(
    to right,
    var(--hud-progress-tone-dim) 0 var(--stroke-segment),
    transparent var(--stroke-segment) var(--hud-progress-pitch)
  );
  --hud-progress-lit: repeating-linear-gradient(
    to right,
    var(--hud-progress-tone) 0 var(--stroke-segment),
    transparent var(--stroke-segment) var(--hud-progress-pitch)
  );
  position: relative;
  display: block;
  height: var(--hud-progress-height);
  background-image: var(--hud-progress-unlit);
}

.hud-progress__track::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--hud-progress-value, 0%);
  max-width: 100%;
  background-image: var(--hud-progress-lit);
  filter: drop-shadow(0 0 2px var(--hud-progress-glow)) drop-shadow(0 0 6px var(--hud-progress-glow));
}

/*
 * Indeterminate, with no value: the whole row is lit and a window shows a fifth of it, at the start, where it
 * rests when motion is not allowed. The window reaches 1rem past the track on every side it does not cut, so
 * the light round the segments is not cut with them. Motion, below, slides it to the end.
 */
.hud-progress[data-state='indeterminate'] .hud-progress__track::before {
  width: 100%;
  clip-path: inset(-1rem 80% -1rem -1rem);
}

/* ---------- The spinner ---------- */

/* the ring, then the words that say what the room waits for */
.hud-progress--spinner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/*
 * Twelve radial segments, 18deg of arc in every 30deg, masked to a ring. A repeating conic gradient draws all
 * twelve unlit in line-faint, and a second conic gradient over it lights three at the top: the head in mark,
 * then the two trailing it in ink-secondary and ink-dim, so the head leads as the ring turns clockwise. Both
 * gradients start at twelve o'clock and share their edges, so each lit segment covers its unlit one whole. The
 * mask cuts the ring out of the square: a band a fifth of the ring thick, with a pixel of soft edge either side.
 * A mask would cut off a glow, so the head has none.
 */
.hud-progress__ring {
  /* the share of each 30deg step that a segment fills; the rest is the dark between segments */
  --hud-progress-arc: 18deg;
  display: block;
  flex: none;
  width: var(--hud-progress-ring);
  height: var(--hud-progress-ring);
  background-image:
    conic-gradient(
      var(--mark) 0deg var(--hud-progress-arc),
      transparent var(--hud-progress-arc) 300deg,
      var(--ink-dim) 300deg calc(300deg + var(--hud-progress-arc)),
      transparent calc(300deg + var(--hud-progress-arc)) 330deg,
      var(--ink-secondary) 330deg calc(330deg + var(--hud-progress-arc)),
      transparent calc(330deg + var(--hud-progress-arc)) 360deg
    ),
    repeating-conic-gradient(var(--line-faint) 0deg var(--hud-progress-arc), transparent var(--hud-progress-arc) 30deg);
  /* a mask reads only alpha, so mark here is simply opaque */
  mask-image: radial-gradient(
    closest-side,
    transparent calc(100% - var(--hud-progress-band) - 1px),
    var(--mark) calc(100% - var(--hud-progress-band)),
    var(--mark) calc(100% - 1px),
    transparent 100%
  );
}

/* ---------- Skeleton lines ---------- */

/*
 * Where content will appear: blocks of line-faint as tall as a line of small text, stacked space-2 apart, each as
 * long as the markup says (--hud-progress-width, a share of the container). They are aria-hidden, and the region
 * they stand in for says what is happening in words, with aria-busy.
 */
.hud-progress__line {
  display: block;
  width: var(--hud-progress-width, 100%);
  max-width: 100%;
  height: 0.75em;
  border-radius: var(--radius-0);
  background-color: var(--line-faint);
}

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

/*
 * Only when motion is allowed. An indeterminate bar's window slides from the start of the track to its end over
 * timing-sweep, and starts again: the lit segments stay where they are and the window uncovers them. The spinner
 * turns in twelve steps of 30deg, so that the lit three land on the next segments exactly, once round per
 * timing-flow. A skeleton's shimmer, a band of tint-hover, crosses each line once per timing-pulse and rests out
 * of sight until the next pass; the band exists only here, so a still skeleton is line-faint alone.
 */
@media (prefers-reduced-motion: no-preference) {
  .hud-progress[data-state='indeterminate'] .hud-progress__track::before {
    animation: hud-progress-sweep var(--timing-sweep) var(--timing-ease) infinite;
  }

  .hud-progress__ring {
    animation: hud-progress-turn var(--timing-flow) steps(12) infinite;
  }

  .hud-progress__line {
    background-image: linear-gradient(to right, transparent, var(--tint-hover), transparent);
    background-repeat: no-repeat;
    background-size: 40% 100%;
    background-position: -100% 0;
    animation: hud-progress-shimmer var(--timing-pulse) var(--timing-ease) infinite;
  }

  @keyframes hud-progress-sweep {
    from {
      clip-path: inset(-1rem 80% -1rem -1rem);
    }

    to {
      clip-path: inset(-1rem -1rem -1rem 80%);
    }
  }

  @keyframes hud-progress-turn {
    to {
      rotate: 360deg;
    }
  }

  /* the band is 40% of the line: from -100% it stands wholly before the line, and at 200% wholly after it */
  @keyframes hud-progress-shimmer {
    to {
      background-position: 200% 0;
    }
  }
}