/*
 * Vendored from voice-assistant/board/hud/styles/base.css (Ultron HUD). Do not edit here: change the
 * design system, then refresh with node tools/vendor.mjs.
 */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@1,300;1,400;1,500;1,600&family=Barlow:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');

/*
 * Ultron HUD, base layer (fragment 00, first in bundle.css).
 * The ground, text defaults, ink, glow, marks, hairlines and frames, planes,
 * SVG primitives, the shared patterns (field, control, input, choice, row,
 * layering, scrim), focus and motion that every component builds on, and the layout
 * kit that its cards' previews share (Specimens and documentation only).
 * Values come only from tokens (var(--…)); the only colour keywords used are
 * `transparent` and `currentColor`. This file is the only one that @imports.
 */

/* ---------- Ground and text defaults ---------- */

:root {
  color-scheme: dark;
  scrollbar-color: var(--line-strong) var(--ground);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: var(--ground);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] {
  display: none !important;
}

:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
  font-synthesis: none;
}

:where(p, figure, blockquote, ol, ul, dl, dd) {
  margin: 0;
}

:where(code, kbd, samp, pre) {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

:where(a) {
  color: var(--ink);
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: var(--stroke-hairline);
  text-underline-offset: 0.2em;
}

:where(a):hover {
  text-decoration-color: var(--ink);
}

:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

::placeholder {
  color: var(--ink-dim);
  opacity: 1;
}

::selection {
  background-color: var(--violet-dim);
  color: var(--ink);
}

/* The type styles come from tokens.css; these add what a token cannot say. */
.hud-display-xl,
.hud-display-lg,
.hud-display-md,
.hud-display-sm,
.hud-display-xs {
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
}

.hud-label-banner,
.hud-label-lg,
.hud-label,
.hud-label-sm {
  text-transform: uppercase;
  font-synthesis: none;
}

.hud-panel-header,
.hud-title,
.hud-caption {
  font-synthesis: none;
}

/*
 * The browser paints a popover with a border, padding and the Canvas fill. .hud-floating takes them off here,
 * ahead of the frames and the planes, so that a .hud-frame's hairlines and a .hud-plane--* fill on the same
 * element win at equal specificity. Its placement is under Layering, after the frames: .hud-frame sets
 * position: relative, and a floating element must stay fixed.
 */
.hud-floating {
  padding: 0;
  border: 0;
  background-color: transparent;
}

/* ---------- Ink ---------- */

.hud-ink {
  color: var(--ink);
}

.hud-ink--secondary {
  color: var(--ink-secondary);
}

.hud-ink--dim {
  color: var(--ink-dim);
}

.hud-ink--decimal {
  color: var(--ink-decimal);
}

.hud-ink--amber {
  color: var(--amber);
}

.hud-ink--violet {
  color: var(--violet);
}

/* The header convention, "05 · _Ledger": a dim index and a dim middle dot. */
.hud-index {
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}

.hud-sep {
  color: var(--ink-dim);
  text-shadow: none;
}

/*
 * A panel's name with its underscore: the underscore is drawn, not typed, so a
 * screen reader reads "Ledger". Mark the index and the separator aria-hidden="true".
 * The first declaration is the fallback for browsers without alt text on content.
 */
.hud-name::before {
  content: '_';
  content: '_' / '';
}

/* The dim tail of a number (".85 · USD"): never bloomed, even inside a bloomed numeral. */
.hud-decimal {
  color: var(--ink-decimal);
  text-shadow: none;
}

.hud-tnum {
  font-variant-numeric: tabular-nums;
}

.hud-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* the longest line of running text */
.hud-measure {
  max-inline-size: var(--measure);
}

.hud-truncate {
  overflow: hidden;
  min-inline-size: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Glow and bloom ---------- */

/* box-shadow light for marks and boxes */
.hud-glow {
  box-shadow: var(--glow-mark);
}

.hud-glow--amber {
  box-shadow: var(--glow-amber);
}

.hud-glow--violet {
  box-shadow: var(--glow-violet);
}

/* text-shadow light for white numerals, labels and live state words */
.hud-bloom {
  text-shadow: var(--bloom-text);
}

.hud-bloom--amber {
  text-shadow: var(--glow-amber);
}

.hud-bloom--violet {
  text-shadow: var(--glow-violet);
}

/* drop-shadow light for SVG strokes and irregular shapes */
.hud-halo {
  filter: drop-shadow(0 0 2px var(--glow-white)) drop-shadow(0 0 8px var(--glow-white)) drop-shadow(0 0 18px var(--glow-white));
}

.hud-halo--amber {
  filter: drop-shadow(0 0 2px var(--amber-glow)) drop-shadow(0 0 9px var(--amber-glow)) drop-shadow(0 0 22px var(--amber-glow));
}

.hud-halo--violet {
  filter: drop-shadow(0 0 2px var(--violet-glow)) drop-shadow(0 0 9px var(--violet-glow)) drop-shadow(0 0 22px var(--violet-glow));
}

/* ---------- Marks: pill, tick, dot, pips ---------- */

.hud-pill {
  display: inline-block;
  flex: none;
  width: var(--pill-width);
  height: var(--pill-height);
  border-radius: var(--radius-pill);
  background-color: var(--mark);
  box-shadow: var(--glow-mark);
  transform: skewX(var(--mark-slant));
  vertical-align: middle;
}

.hud-pill--amber {
  background-color: var(--amber);
  box-shadow: var(--glow-amber);
}

.hud-pill--violet {
  background-color: var(--violet);
  box-shadow: var(--glow-violet);
}

/* unlit: an outline that still reads at 3:1 */
.hud-pill--off {
  background-color: transparent;
  box-shadow: inset 0 0 0 var(--stroke-hairline) var(--ink-dim);
}

.hud-tick {
  display: inline-block;
  flex: none;
  width: var(--tick-length);
  height: var(--stroke-mark);
  border-radius: var(--radius-1);
  background-color: var(--mark);
  box-shadow: var(--glow-mark);
  vertical-align: middle;
}

.hud-tick--v {
  width: var(--stroke-mark);
  height: var(--tick-length);
}

.hud-tick--amber {
  background-color: var(--amber);
  box-shadow: var(--glow-amber);
}

.hud-tick--violet {
  background-color: var(--violet);
  box-shadow: var(--glow-violet);
}

.hud-dot {
  display: inline-block;
  flex: none;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-pill);
  background-color: var(--mark);
  box-shadow: var(--glow-mark);
  vertical-align: middle;
}

.hud-dot--amber {
  background-color: var(--amber);
  box-shadow: var(--glow-amber);
}

.hud-dot--violet {
  background-color: var(--violet);
  box-shadow: var(--glow-violet);
}

.hud-dot--off {
  background-color: transparent;
  box-shadow: inset 0 0 0 var(--stroke-hairline) var(--ink-dim);
}

/*
 * The chevron: a bracket's corner turned to point, in the current ink. Down by
 * default; the modifiers turn it. A Disclosure or a menu button turns it on
 * [open] or [aria-expanded='true'] with `rotate`; the turn eases over
 * `timing-fast` when motion is allowed (see Motion).
 */
.hud-chevron {
  display: inline-block;
  flex: none;
  width: var(--chevron-size);
  height: var(--chevron-size);
  border-right: var(--stroke-mark) solid currentColor;
  border-bottom: var(--stroke-mark) solid currentColor;
  rotate: 45deg;
  translate: 0 -25%;
}

.hud-chevron--up {
  rotate: -135deg;
  translate: 0 25%;
}

.hud-chevron--right {
  rotate: -45deg;
  translate: -25% 0;
}

.hud-chevron--left {
  rotate: 135deg;
  translate: 25% 0;
}

/* a key cap: <kbd class="hud-kbd">Ctrl</kbd>; it keeps the words as typed inside caps labels */
.hud-kbd {
  display: inline-block;
  min-width: 1.75em;
  padding: 0 var(--space-1);
  border: var(--stroke-hairline) solid var(--line-strong);
  border-bottom-width: var(--stroke-mark);
  border-radius: var(--radius-1);
  background-color: var(--surface-well);
  color: var(--ink-secondary);
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}

/*
 * Severity pips: three slanted segments, lit from the left by data-level="1|2|3".
 * Set the colour with --hud-pips-color (a colour token); unlit pips use --hud-pips-unlit,
 * which stays 3:1 or more below every lit colour so the count reads.
 * Always beside the severity word.
 */
.hud-pips {
  --hud-pips-color: var(--ink-secondary);
  --hud-pips-unlit: var(--line);
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  vertical-align: middle;
}

.hud-pips__pip {
  width: var(--stroke-segment);
  height: 0.75rem;
  border-radius: var(--radius-1);
  background-color: var(--hud-pips-unlit);
  transform: skewX(var(--mark-slant));
}

.hud-pips[data-level='1'] .hud-pips__pip:nth-child(-n + 1),
.hud-pips[data-level='2'] .hud-pips__pip:nth-child(-n + 2),
.hud-pips[data-level='3'] .hud-pips__pip:nth-child(-n + 3) {
  background-color: var(--hud-pips-color);
  box-shadow: 0 0 6px var(--hud-pips-glow, transparent);
}

.hud-pips--high {
  --hud-pips-color: var(--severity-high);
  --hud-pips-glow: var(--amber-glow);
}

.hud-pips--medium {
  --hud-pips-color: var(--severity-medium);
  --hud-pips-glow: var(--violet-glow);
}

.hud-pips--low {
  --hud-pips-color: var(--severity-low);
}

/* ---------- Hairlines and frames ---------- */

.hud-hairline {
  display: block;
  height: var(--stroke-hairline);
  margin: 0;
  border: 0;
  background-color: var(--line);
}

.hud-hairline--faint {
  background-color: var(--line-faint);
}

.hud-hairline--strong {
  background-color: var(--line-strong);
}

.hud-hairline--v {
  width: var(--stroke-hairline);
  height: auto;
  align-self: stretch;
}

/*
 * A frame: an open hairline band with glowing corner brackets in `mark`. Only its top and
 * bottom edges are drawn, in `line-faint`; its sides stay transparent (the border keeps its
 * width, so nothing reflows), as the reference's panels are long bands that a few marks end.
 * The brackets carry the frame's extent (the hairlines are decorative), so never
 * clip them: put overflow on an inner element, not on the frame.
 * Recolour the brackets with a modifier, or set --hud-bracket / --hud-bracket-glow.
 */
.hud-frame {
  --hud-bracket: var(--mark);
  --hud-bracket-glow: var(--glow-white);
  position: relative;
  border: var(--stroke-hairline) solid;
  border-color: var(--line-faint) transparent;
  border-radius: var(--radius-0);
}

.hud-brackets {
  --hud-bracket: var(--mark);
  --hud-bracket-glow: var(--glow-white);
  position: relative;
}

.hud-frame::before,
.hud-brackets::before {
  content: '';
  position: absolute;
  inset: calc(var(--stroke-hairline) * -1);
  pointer-events: none;
  background:
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) left top / var(--bracket-arm) var(--stroke-mark) no-repeat,
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) left top / var(--stroke-mark) var(--bracket-arm) no-repeat,
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) right top / var(--bracket-arm) var(--stroke-mark) no-repeat,
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) right top / var(--stroke-mark) var(--bracket-arm) no-repeat,
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) left bottom / var(--bracket-arm) var(--stroke-mark) no-repeat,
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) left bottom / var(--stroke-mark) var(--bracket-arm) no-repeat,
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) right bottom / var(--bracket-arm) var(--stroke-mark) no-repeat,
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) right bottom / var(--stroke-mark) var(--bracket-arm) no-repeat;
  filter: drop-shadow(0 0 2px var(--hud-bracket-glow));
}

.hud-brackets::before {
  inset: 0;
}

.hud-frame--amber,
.hud-brackets--amber {
  --hud-bracket: var(--amber);
  --hud-bracket-glow: var(--amber-glow);
}

.hud-frame--violet,
.hud-brackets--violet {
  --hud-bracket: var(--violet);
  --hud-bracket-glow: var(--violet-glow);
}

/* off or not yet known: dim brackets that do not glow */
.hud-frame--dim,
.hud-brackets--dim {
  --hud-bracket: var(--ink-dim);
  --hud-bracket-glow: transparent;
}

/* a frame whose edge carries meaning by itself (STATUS UNKNOWN, a pending check): closed on all four sides */
.hud-frame--dashed {
  border-style: dashed;
  border-color: var(--line-strong);
}

/* short glowing ticks on a frame's edge: one near the top right, one near the bottom left */
.hud-frame__tick {
  position: absolute;
  width: var(--tick-length);
  height: var(--stroke-mark);
  border-radius: var(--radius-1);
  background-color: var(--mark);
  box-shadow: var(--glow-mark);
  pointer-events: none;
}

.hud-frame__tick--top {
  top: calc(var(--stroke-hairline) * -1 - (var(--stroke-mark) - var(--stroke-hairline)) / 2);
  right: var(--space-8);
}

.hud-frame__tick--bottom {
  bottom: calc(var(--stroke-hairline) * -1 - (var(--stroke-mark) - var(--stroke-hairline)) / 2);
  left: var(--space-8);
}

/* ---------- Surfaces ---------- */

.hud-ground {
  background-color: var(--ground);
  color: var(--ink);
}

/* the violet haze that pools at the top of the ground, over a vignette that darkens its edges */
.hud-haze {
  background-image:
    radial-gradient(120% 70% at 50% 0%, var(--glow-haze), transparent 72%),
    radial-gradient(150% 120% at 50% 35%, transparent 55%, var(--vignette) 100%);
  background-repeat: no-repeat;
}

.hud-plane {
  background-color: var(--surface-panel);
}

.hud-plane--raised {
  background-color: var(--surface-raised);
  box-shadow: var(--lift-raised);
}

/* what opens over a raised plane: a menu, a list */
.hud-plane--overlay {
  background-color: var(--surface-overlay);
  box-shadow: var(--lift-overlay);
}

/* black glass: reads over anything, glowing marks included */
.hud-plane--tooltip {
  background-color: var(--surface-tooltip);
  box-shadow: var(--lift-overlay);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* the caption band's glass: the board shows faintly through it */
.hud-plane--caption {
  background-color: var(--surface-caption);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hud-well {
  background-color: var(--surface-well);
  box-shadow: var(--well-inset);
}

/* the header strip: a band under a hairline, with haze falling from its top edge */
.hud-strip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--strip-height);
  padding: var(--space-2) var(--space-4);
  background-color: var(--surface-strip);
  background-image: linear-gradient(180deg, var(--surface-strip), var(--surface-panel));
  box-shadow: var(--haze-strip);
}

/* ---------- Layering ---------- */

/*
 * Two stacks. A modal dialog (showModal), and every element with the popover
 * attribute (popover, menu, tooltip, the toast region), live in the browser's
 * top layer: above every z-index, the newest on top. Everything else stacks
 * by the layer tokens: raised 10, sticky 20, caption 30, popover 40,
 * dialog 50, toast 60, tooltip 70.
 */

/* pinned to the top of its scroller: the consent bar, a panel's header strip */
.hud-sticky {
  position: sticky;
  top: 0;
  z-index: var(--layer-sticky);
}

/*
 * An element with the popover attribute that UltronHUD.position() places next
 * to its anchor. Until it is placed it stays centred, as the browser puts it.
 * Its plane comes from a .hud-plane-- class beside this one, and its hairlines
 * from .hud-frame. This rule comes after both, so it sets no border and no fill:
 * the popover's own are cleared under "Ground and text defaults".
 */
.hud-floating {
  position: fixed;
  z-index: var(--layer-popover);
  max-width: calc(100vw - 2 * var(--space-4));
  max-height: calc(100dvh - 2 * var(--space-4));
  margin: auto;
  overflow: visible;
  color: var(--ink);
}

.hud-floating[data-placement] {
  inset: auto;
  margin: 0;
}

/* the veil behind a dialog placed in the page; a modal <dialog> takes .hud-backdrop instead */
.hud-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--layer-dialog);
  background-color: var(--scrim);
}

.hud-backdrop::backdrop {
  background-color: var(--scrim);
}

/* a scrolling region: lists, a dialog's body, a wide table or diagram */
.hud-scroll {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* ---------- SVG primitives ---------- */

/* decorative: guide arcs, grids, unlit lanes */
.hud-guide {
  fill: none;
  stroke: var(--line-faint);
  stroke-width: var(--stroke-hairline);
  vector-effect: non-scaling-stroke;
}

/* meaningful: a leader from a mark to its readout, a diagram edge */
.hud-leader {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: var(--stroke-hairline);
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

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

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

/* a glowing dot at the end of an arc, a leader or an edge */
.hud-terminal {
  fill: var(--mark);
  filter: drop-shadow(0 0 2px var(--glow-white));
}

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

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

/* a dashed stroke that moves along its path when motion is allowed */
.hud-flow {
  stroke-dasharray: 2 6;
}

/* ---------- Field: label, hint, error, required ---------- */

/*
 * Every form control sits in a field. Markup, in this order:
 *   <div class="hud-field">                       (a <fieldset class="hud-field hud-field--group"> for a group)
 *     <label class="hud-field__label hud-label" for="q">Your question <span class="hud-field__required">· Required</span></label>
 *     <p class="hud-field__hint hud-caption" id="q-hint">…</p>
 *     the control, with aria-describedby="q-hint q-error" and aria-invalid="true" while it is wrong
 *     <p class="hud-field__error hud-caption" id="q-error">…</p>
 *   </div>
 * A group's label is its <legend class="hud-field__label hud-label">.
 */
.hud-field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.hud-field--group {
  gap: var(--space-2);
}

.hud-field--group > legend.hud-field__label {
  margin-bottom: var(--space-1);
  padding: 0;
}

/* label and control on one row, hint and error wrapping under them: "Forget the last [5 minutes]" */
.hud-field--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
}

.hud-field--inline > .hud-field__hint,
.hud-field--inline > .hud-field__error {
  flex-basis: 100%;
}

.hud-field__label {
  color: var(--ink-secondary);
}

.hud-field__required {
  color: var(--ink-dim);
}

.hud-field__hint {
  color: var(--ink-secondary);
}

/*
 * the error line: amber words after a short lit tick, never an icon. A field's error and a lone
 * checkbox, radio or switch's error (.hud-choice__error) look the same.
 */
.hud-field__error,
.hud-choice__error {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--status-error);
}

.hud-field__error::before,
.hud-choice__error::before {
  content: '';
  flex: none;
  width: var(--tick-short);
  height: var(--stroke-mark);
  border-radius: var(--radius-1);
  background-color: currentColor;
  box-shadow: var(--glow-amber);
  translate: 0 -0.3em;
}

.hud-field__error:empty,
.hud-choice__error:empty {
  display: none;
}

/* every control in the field disabled: the label steps down with it */
.hud-field:not(:has(:enabled)):has(:disabled) .hud-field__label {
  color: var(--ink-disabled);
}

/* ---------- Control: the bordered shell of everything pressable ---------- */

/*
 * <button class="hud-button hud-control hud-label-lg">. A variant changes only
 * the --hud-control-* hooks below; it never sets the border, fill, glow, ink
 * or bloom itself, so the states here (pressed, invalid, disabled) always win.
 */
.hud-control {
  --hud-control-height: var(--control-height);
  --hud-control-pad: var(--space-4);
  --hud-control-edge: var(--line-strong);
  --hud-control-ink: var(--ink);
  --hud-control-fill: transparent;
  --hud-control-glow: none;
  --hud-control-bloom: none;
  --hud-control-edge-hover: var(--ink);
  --hud-control-ink-hover: var(--hud-control-ink);
  --hud-control-fill-hover: var(--hud-control-fill);
  --hud-control-glow-hover: var(--glow-edge);
  --hud-control-bloom-hover: none;
  --hud-control-fill-active: var(--tint-hover);
  --hud-control-ink-active: var(--hud-control-ink-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--target-min);
  min-height: var(--hud-control-height);
  margin: 0;
  padding: 0 var(--hud-control-pad);
  border: var(--stroke-hairline) solid var(--hud-control-edge);
  border-radius: var(--radius-1);
  background-color: var(--hud-control-fill);
  box-shadow: var(--hud-control-glow);
  color: var(--hud-control-ink);
  text-shadow: var(--hud-control-bloom);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.hud-control--sm {
  --hud-control-height: var(--control-height-sm);
  --hud-control-pad: var(--space-3);
}

.hud-control--lg {
  --hud-control-height: var(--control-height-lg);
  --hud-control-pad: var(--space-6);
}

/* hover brightens in place: the edge rises to ink and its light comes up */
.hud-control:hover {
  border-color: var(--hud-control-edge-hover);
  background-color: var(--hud-control-fill-hover);
  box-shadow: var(--hud-control-glow-hover);
  color: var(--hud-control-ink-hover);
  text-shadow: var(--hud-control-bloom-hover);
}

/* keyboard focus lights the label as hover does; the ring comes from the Focus section */
.hud-control:focus-visible {
  text-shadow: var(--hud-control-bloom-hover);
}

.hud-control:active {
  background-color: var(--hud-control-fill-active);
  color: var(--hud-control-ink-active);
}

/*
 * a toggle that is on: the chosen state, lit in a stroke and not in a fill. The plane steps up to the
 * selected tint, the edge turns violet and a lit violet bar runs along the foot, with the label in ink,
 * as a selected row carries its tick. Only marks fill violet (a checked box, a radio's dot, a switch's
 * thumb): a filled, glowing slab would be the loudest shape on its card, and the reference lights
 * only thin strokes, ticks and pills.
 */
.hud-control[aria-pressed='true'] {
  border-color: var(--violet);
  background-color: var(--tint-selected);
  box-shadow: inset 0 calc(var(--stroke-mark) * -1) 0 0 var(--violet);
  color: var(--ink);
  text-shadow: none;
}

.hud-control[aria-invalid='true'] {
  border-color: var(--status-error);
}

.hud-control[aria-busy='true'] {
  cursor: progress;
}

/* disabled: dashed edge, disabled ink, no light; last, so it wins over every state above */
.hud-control:is(:disabled, [aria-disabled='true']) {
  border-style: dashed;
  border-color: var(--line);
  background-color: transparent;
  box-shadow: none;
  color: var(--ink-disabled);
  text-shadow: none;
  cursor: not-allowed;
}

/* ---------- Input: the sunken well of everything you type into or pick from ---------- */

/*
 * <div class="hud-text-field hud-input"><input class="hud-input__control hud-body"></div>.
 * The well carries the underline (on ::after, which components leave alone) and
 * draws the focus ring around itself, prefix and suffix included.
 */
.hud-input {
  --hud-input-height: var(--control-height);
  --hud-input-underline: var(--line-strong);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--hud-input-height);
  padding: 0 var(--space-3);
  border-radius: var(--radius-1) var(--radius-1) 0 0;
  background-color: var(--surface-well);
  box-shadow: var(--well-inset);
  color: var(--ink);
  cursor: text;
}

.hud-input::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: var(--stroke-hairline) solid var(--hud-input-underline);
  pointer-events: none;
}

.hud-input--sm {
  --hud-input-height: var(--control-height-sm);
}

.hud-input--lg {
  --hud-input-height: var(--control-height-lg);
}

.hud-input:hover {
  --hud-input-underline: var(--ink-secondary);
}

.hud-input:has(:focus-visible) {
  outline: var(--stroke-focus) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* the focused field's underline lights up and glows; a still focus specimen (.hud-focus-ring on the well) lights it too */
.hud-input:has(:focus-visible)::after,
.hud-input.hud-focus-ring::after {
  border-bottom-width: var(--stroke-mark);
  border-bottom-color: var(--ink);
  box-shadow: var(--glow-edge);
}

.hud-input:has([aria-invalid='true'])::after {
  border-bottom-width: var(--stroke-mark);
  border-bottom-color: var(--status-error);
}

.hud-input:has([readonly]) {
  color: var(--ink-secondary);
}

.hud-input:has([readonly])::after {
  border-bottom-color: var(--line);
}

/*
 * Disabled is the well's own control being disabled, a direct child. A bare :has(:disabled) also matches
 * a select's prompt <option disabled>, a disabled <optgroup> and a disabled Clear button, which would
 * dim a well that still works: an invalid, required select would read as disabled.
 */
.hud-input:has(> .hud-input__control:disabled) {
  color: var(--ink-disabled);
  cursor: not-allowed;
}

.hud-input:has(> .hud-input__control:disabled)::after {
  border-bottom-style: dashed;
  border-bottom-color: var(--line);
}

/* the native control inside the well: no box of its own; the well draws its ring */
.hud-input__control {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: inherit;
  caret-color: var(--ink);
  appearance: none;
}

.hud-input__control:focus-visible {
  outline: none;
}

.hud-input__control:disabled {
  cursor: not-allowed;
}

/* ---------- Choice: a native input over a drawn mark (checkbox, radio, switch) ---------- */

/*
 * <label class="hud-checkbox hud-choice hud-body">
 *   <input class="hud-choice__input" type="checkbox" aria-labelledby="l" aria-describedby="h">
 *   <span class="hud-choice__mark hud-checkbox__mark" aria-hidden="true"></span>
 *   <span class="hud-choice__text"><span class="hud-choice__label" id="l">…</span><span class="hud-choice__hint hud-caption" id="h">…</span></span>
 * </label>
 * The input stays real (form value, keyboard, screen reader) and transparent over
 * the whole row; the mark shows its state and carries the focus ring. Put the
 * body type class on the label, so the mark centres on the first line.
 */
.hud-choice {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--target-min);
  color: var(--ink);
  cursor: pointer;
}

.hud-choice__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.hud-choice__mark {
  position: relative;
  flex: none;
  width: var(--check-size);
  height: var(--check-size);
  margin-top: calc((1lh - var(--check-size)) / 2);
  border: var(--stroke-hairline) solid var(--line-strong);
  border-radius: var(--radius-1);
  background-color: transparent;
}

.hud-choice:hover .hud-choice__input:not(:disabled) + .hud-choice__mark {
  border-color: var(--ink);
  box-shadow: var(--glow-edge);
}

.hud-choice__input:focus-visible + .hud-choice__mark {
  outline: var(--stroke-focus) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.hud-choice__input[aria-invalid='true'] + .hud-choice__mark {
  border-color: var(--status-error);
}

.hud-choice__input:disabled + .hud-choice__mark {
  border-style: dashed;
  border-color: var(--line);
  box-shadow: none;
}

.hud-choice:has(.hud-choice__input:disabled) {
  color: var(--ink-disabled);
  cursor: not-allowed;
}

.hud-choice__text {
  display: grid;
  min-width: 0;
}

.hud-choice__hint {
  color: var(--ink-secondary);
}

/* .hud-choice__error is drawn with .hud-field__error, in the Field section above */

.hud-choice:has(.hud-choice__input:disabled) .hud-choice__hint {
  color: var(--ink-disabled);
}

/* ---------- Row: hover, selection and focus for rows in a list ---------- */

/*
 * A menu item, an option, a selectable table row. It paints only; its layout is
 * the component's. Hovered is the hover wash plus a line-strong tick at the start:
 * the wash alone is about 1.1:1 against a row at rest, too faint to see across a
 * table. Selected (aria-selected, aria-checked or aria-current) is the selected
 * tint plus a lit violet tick at the start, never the tint alone, and it replaces
 * the hover tick. Rows on surface-raised or surface-overlay carry no ink-dim text:
 * the hover tint would take it under 4.5:1.
 */
.hud-row {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: var(--stroke-mark) var(--tick-length);
}

.hud-row:hover {
  background-color: var(--tint-hover);
  background-image: linear-gradient(var(--line-strong), var(--line-strong));
}

.hud-row:is([aria-selected='true'], [aria-checked='true'], [aria-current]:not([aria-current='false'])) {
  background-color: var(--tint-selected);
  background-image: linear-gradient(var(--violet), var(--violet));
}

.hud-row:is([aria-selected='true'], [aria-checked='true'], [aria-current]:not([aria-current='false'])):hover {
  background-image: linear-gradient(var(--violet), var(--violet)), linear-gradient(var(--tint-hover), var(--tint-hover));
  background-size: var(--stroke-mark) var(--tick-length), 100% 100%;
}

/* a table row paints its tick on its first cell (Table does), not across every cell */
tr.hud-row:is([aria-selected='true'], [aria-checked='true'], [aria-current]:not([aria-current='false'])),
tr.hud-row:is([aria-selected='true'], [aria-checked='true'], [aria-current]:not([aria-current='false'])):hover {
  background-image: none;
}

.hud-row:focus-visible {
  outline-offset: var(--focus-offset-inset);
}

.hud-row:is(:disabled, [aria-disabled='true']) {
  background-color: transparent;
  background-image: none;
  color: var(--ink-disabled);
  cursor: not-allowed;
}

/* busy: something is under way here; words say what */
:where([aria-busy='true']) {
  cursor: progress;
}

/* ---------- Focus ---------- */

/* every focusable control: a solid white ring outside the control, on the plane */
:where(a[href], button, input, select, textarea, summary, [tabindex], [contenteditable='true']):focus-visible {
  outline: var(--stroke-focus) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* a row that fills a scrolling list draws its ring inside, where the scroller cannot clip it */
.hud-focus-inset:focus-visible {
  outline-offset: var(--focus-offset-inset);
}

/* ---------- Specimens and documentation only ---------- */

/* the same ring, drawn on purpose: specimens and documentation only */
.hud-focus-ring {
  outline: var(--stroke-focus) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/*
 * How a component's card lays out its specimens, so that every card in the system reads as one.
 * A card's root is .hud-spec with the header's .hud-spec__head (a pill, the title and a
 * .hud-spec__rule hairline), then a p.hud-body-lg.hud-spec__lede sentence. Specimens go in groups:
 * a .hud-spec__group holds a .hud-spec__group-head (an h2.hud-label.hud-ink--secondary and a
 * .hud-hairline--faint.hud-spec__rule) and its .hud-spec__row of .hud-spec-cell, each a label
 * and its specimen.
 * Groups are not boxed in frames or planes: a component that carries brackets of its own would
 * otherwise sit inside a second pair. A specimen that is a frame, or needs a panel around it
 * (Panel, CritiqueCard), is the exception. Previews add only what a card needs beyond this.
 */
.hud-spec {
  min-height: 100vh;
  padding: var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-content: start;
}

.hud-spec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.hud-spec__rule {
  flex: 1 1 3rem;
}

/* the card's one-sentence lede, under its header */
.hud-spec__lede {
  max-width: 48rem;
  color: var(--ink-secondary);
}

.hud-spec__group {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.hud-spec__group-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hud-spec__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-6) var(--space-8);
  align-items: start;
}

.hud-spec-cell {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
}

/* a phone's gutter is space-4 */
@media (max-width: 40rem) {
  .hud-spec {
    padding: var(--space-4);
  }
}

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

/*
 * Glows breathe, flows move, states ease and overlays rise into place only when
 * motion is allowed; a pulse never changes text colour. Every transition and
 * animation in the system sits in a query like this one; name a component's own
 * keyframes hud-<block>-<name>.
 */
@media (prefers-reduced-motion: no-preference) {
  .hud-pulse {
    animation: hud-pulse var(--timing-pulse) var(--timing-ease) infinite;
  }

  .hud-flow {
    animation: hud-flow var(--timing-flow) linear infinite;
  }

  .hud-chevron {
    transition: rotate var(--timing-fast) var(--timing-ease);
  }

  .hud-control {
    transition:
      border-color var(--timing-fast) var(--timing-ease),
      background-color var(--timing-fast) var(--timing-ease),
      box-shadow var(--timing-fast) var(--timing-ease),
      color var(--timing-fast) var(--timing-ease),
      text-shadow var(--timing-fast) var(--timing-ease);
  }

  .hud-input::after {
    transition:
      border-color var(--timing-fast) var(--timing-ease),
      box-shadow var(--timing-fast) var(--timing-ease);
  }

  .hud-choice__mark {
    transition:
      border-color var(--timing-fast) var(--timing-ease),
      background-color var(--timing-fast) var(--timing-ease),
      box-shadow var(--timing-fast) var(--timing-ease);
  }

  .hud-row {
    transition: background-color var(--timing-fast) var(--timing-ease);
  }

  .hud-floating {
    transition:
      opacity var(--timing-base) var(--timing-ease),
      translate var(--timing-base) var(--timing-ease);
  }

  @starting-style {
    .hud-floating:popover-open {
      opacity: 0;
      translate: 0 var(--space-1);
    }
  }
}

@keyframes hud-pulse {
  50% {
    box-shadow: none;
    text-shadow: none;
    filter: none;
  }
}

@keyframes hud-flow {
  to {
    stroke-dashoffset: -16;
  }
}

/* Under reduce every animation and transition ends at once, staggers included. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}