/*
 * Vendored from voice-assistant/board/hud/styles/panel.css (Ultron HUD). Do not edit here: change the
 * design system, then refresh with node tools/vendor.mjs.
 */
/*
 * Ultron HUD, Panel: the HUD's container. An open hairline frame with glowing corner brackets, a header
 * strip that reads a plain name (or the reference's numbered "05 · _Ledger"), optional actions and a body. The frame, the plane, the strip, the pill
 * and the index, separator and name are base.css classes composed in the markup; this file places them,
 * lays out the strip's parts and adds the variants. It never restyles a base class.
 *
 *   <section class="hud-panel hud-frame hud-plane" aria-labelledby="ledger-h">
 *     <span class="hud-frame__tick hud-frame__tick--top" aria-hidden="true"></span>
 *     <header class="hud-panel__header hud-strip"> __pill, __title, __meta, __actions (with __toggle) </header>
 *     <div class="hud-panel__body">…</div>
 *     <footer class="hud-panel__footer">…</footer>
 *   </section>
 *   variant   hud-panel--raised, --alert, --collapsed (plain is the default)
 *   modifier  hud-panel--flush, --scroll
 *   accent    hud-frame--violet and --dim, from base.css, still recolour the corners
 */

/* ---------- Frame ---------- */

/*
 * A column, so a body can fill a panel that a grid stretches. The frame's brackets draw just outside its
 * edge and carry its extent, so the panel never clips: overflow belongs to the body.
 */
.hud-panel {
  /* how tall a --scroll body grows before it scrolls */
  --hud-panel-max-height: 32rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---------- Header strip ---------- */

/* the strip is hud-strip, a flex row; here it keeps its height and lets its parts wrap in a narrow column */
.hud-panel__header {
  flex: none;
  flex-wrap: wrap;
}

.hud-panel__title {
  min-width: 0;
}

/* a caption pushed to the strip's end: "3 cards", "3 items · 1:18" */
.hud-panel__meta {
  margin-left: auto;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}

/* buttons, badges or a status line at the strip's end: they take the free space, or follow the meta line that took it; they may shrink and wrap in a narrow column, flush to the strip's end */
.hud-panel__actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
  margin-left: auto;
}

.hud-panel__meta + .hud-panel__actions {
  margin-left: 0;
}

/* ---------- Body and footer ---------- */

.hud-panel__body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: var(--space-4);
}

.hud-panel__footer {
  flex: none;
  padding: var(--space-3) var(--space-4);
  border-top: var(--stroke-hairline) solid var(--line-faint);
}

/* ---------- Variants ---------- */

/* raised: the plane of what floats over the board, with its hairline, its drop and its haze */
.hud-panel--raised {
  background-color: var(--surface-raised);
  box-shadow: var(--lift-raised);
}

/* alert: amber corners and an amber pill, for the one panel that holds something hot */
.hud-panel--alert {
  --hud-bracket: var(--amber);
  --hud-bracket-glow: var(--amber-glow);
}

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

/* collapsed: only the strip shows. The markup also sets hidden on the body and footer, so assistive technology skips them */
.hud-panel--collapsed > :is(.hud-panel__body, .hud-panel__footer) {
  display: none;
}

/* ---------- Modifiers ---------- */

/* flush: lists and tables run edge to edge */
.hud-panel--flush > .hud-panel__body {
  padding: 0;
}

/* scroll: the body, not the frame, scrolls within --hud-panel-max-height */
.hud-panel--scroll > .hud-panel__body {
  max-height: var(--hud-panel-max-height);
  overflow: auto;
}

/* a scrolling body is a tab stop: its ring is drawn inside, where the brackets and the panel's edge cannot cover it */
.hud-panel--scroll > .hud-panel__body:focus-visible {
  outline-offset: var(--focus-offset-inset);
}

/* ---------- Toggle ---------- */

/* a collapsible panel's toggle: its chevron points right while the panel is closed and down while it is open */
.hud-panel__toggle[aria-expanded='true'] .hud-chevron {
  rotate: 45deg;
  translate: 0 -25%;
}

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

@media (prefers-reduced-motion: no-preference) {
  .hud-panel__toggle .hud-chevron {
    transition:
      rotate var(--timing-fast) var(--timing-ease),
      translate var(--timing-fast) var(--timing-ease);
  }
}