/* helm-css 1.0.0-rc.1 — helm-tokens.css, helm-base.css, helm-layout.css and helm-components.css concatenated. Built by `make css`; do not edit. */

/* helm-css · tokens
 *
 * The token table in docs/design/03-design-system.md §2a, and nothing else:
 * a test diffs this file, tokens.json and that table. Token names are API
 * within a major (03 §5) — add, never rename or remove.
 *
 * Dark is the primary design and the default. Light applies when the page
 * says data-theme="light", or when it says nothing and the system prefers
 * light. Every selector is wrapped in :where(), so a studio overrides any
 * token with one plain :root rule.
 */

:where(:root) {
  color-scheme: dark;

  --helm-ground-page: #0d0c0a;
  --helm-ground-panel: #161512;
  --helm-ground-raised: #1f1d18;
  --helm-ground-inset: #090804;
  --helm-border-hairline: #292620;
  --helm-border-strong: #3b372e;
  --helm-text-primary: #f1ede4;
  --helm-text-secondary: #a8a294;
  --helm-text-muted: #716b5e;
  --helm-accent-base: #ffc700;
  --helm-accent-hover: #ffd633;
  --helm-accent-subtle: #2b2206;
  --helm-accent-text: #ffd24a;
  --helm-on-accent: #1a1400;
  --helm-status-idle: #716b5e;
  --helm-status-running: #4caf7d;
  --helm-status-info: #4a9fe0;
  --helm-status-warning: #f0883e;
  --helm-status-error: #e05c52;
  --helm-on-danger: #1a1400;
  --helm-log-text: #a8a294;
  --helm-log-muted: #7a7467;
  --helm-log-error: #e05c52;
  --helm-log-warning: #f0883e;
  --helm-log-accent: #ffd24a;
  --helm-focus-ring: #ffc700;
  --helm-scrim: rgb(0 0 0 / 0.6);
  --helm-shadow-dialog: 0 12px 32px rgb(0 0 0 / 0.45);
  --helm-studio-accent: var(--helm-accent-text);
  --helm-on-studio-accent: var(--helm-ground-page);

  --helm-space-1: 4px;
  --helm-space-2: 8px;
  --helm-space-3: 12px;
  --helm-space-4: 16px;
  --helm-space-5: 20px;
  --helm-space-6: 24px;
  --helm-space-7: 32px;
  --helm-space-8: 40px;
  --helm-space-9: 56px;
  --helm-radius-sm: 4px;
  --helm-radius-md: 6px;
  --helm-control-sm: 22px;
  --helm-control-md: 26px;
  --helm-control-lg: 30px;
  --helm-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --helm-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --helm-type-title: 600 20px/28px var(--helm-font-sans);
  --helm-type-section: 600 11px/16px var(--helm-font-sans);
  --helm-type-card-title: 600 14px/20px var(--helm-font-sans);
  --helm-type-body: 400 13px/20px var(--helm-font-sans);
  --helm-type-mono: 400 12px/18px var(--helm-font-mono);
  --helm-type-log: 400 12px/17px var(--helm-font-mono);
  --helm-type-micro: 500 11px/15px var(--helm-font-sans);
  --helm-tracking-title: -0.01em;
  --helm-tracking-section: 0.09em;
  --helm-duration-hover: 120ms;
  --helm-duration-expand: 180ms;
  --helm-duration-dialog-in: 160ms;
  --helm-duration-dialog-out: 100ms;
  --helm-duration-progress: 200ms;
  --helm-duration-indeterminate: 1400ms;
  --helm-ease-standard: cubic-bezier(.2,0,.2,1);
  --helm-ease-enter: cubic-bezier(.2,0,0,1);
  --helm-ease-indeterminate: cubic-bezier(.4,0,.6,1);
}

@media (prefers-color-scheme: light) {
  :where(:root:not([data-theme])) {
    color-scheme: light;

    --helm-ground-page: #faf8f3;
    --helm-ground-panel: #ffffff;
    --helm-ground-raised: #fbf8f1;
    --helm-ground-inset: #1c1a15;
    --helm-border-hairline: #e4dfd2;
    --helm-border-strong: #c9c2b0;
    --helm-text-primary: #1a1813;
    --helm-text-secondary: #534f45;
    --helm-text-muted: #837d70;
    --helm-accent-base: #f5b800;
    --helm-accent-hover: #e0a800;
    --helm-accent-subtle: #fff3d1;
    --helm-accent-text: #7a5600;
    --helm-on-accent: #1a1400;
    --helm-status-idle: #837d70;
    --helm-status-running: #1f7a4d;
    --helm-status-info: #1c6fb8;
    --helm-status-warning: #a85410;
    --helm-status-error: #c0342a;
    --helm-on-danger: #ffffff;
    --helm-log-text: #cfc8ba;
    --helm-log-muted: #7a7467;
    --helm-log-error: #e05c52;
    --helm-log-warning: #f0883e;
    --helm-log-accent: #ffd24a;
    --helm-focus-ring: #7a5600;
    --helm-scrim: rgb(28 26 21 / 0.4);
    --helm-shadow-dialog: 0 12px 32px rgb(0 0 0 / 0.45);
    --helm-studio-accent: var(--helm-accent-text);
    --helm-on-studio-accent: var(--helm-ground-page);
  }
}

:where(:root[data-theme="light"]) {
  color-scheme: light;

  --helm-ground-page: #faf8f3;
  --helm-ground-panel: #ffffff;
  --helm-ground-raised: #fbf8f1;
  --helm-ground-inset: #1c1a15;
  --helm-border-hairline: #e4dfd2;
  --helm-border-strong: #c9c2b0;
  --helm-text-primary: #1a1813;
  --helm-text-secondary: #534f45;
  --helm-text-muted: #837d70;
  --helm-accent-base: #f5b800;
  --helm-accent-hover: #e0a800;
  --helm-accent-subtle: #fff3d1;
  --helm-accent-text: #7a5600;
  --helm-on-accent: #1a1400;
  --helm-status-idle: #837d70;
  --helm-status-running: #1f7a4d;
  --helm-status-info: #1c6fb8;
  --helm-status-warning: #a85410;
  --helm-status-error: #c0342a;
  --helm-on-danger: #ffffff;
  --helm-log-text: #cfc8ba;
  --helm-log-muted: #7a7467;
  --helm-log-error: #e05c52;
  --helm-log-warning: #f0883e;
  --helm-log-accent: #ffd24a;
  --helm-focus-ring: #7a5600;
  --helm-scrim: rgb(28 26 21 / 0.4);
  --helm-shadow-dialog: 0 12px 32px rgb(0 0 0 / 0.45);
  --helm-studio-accent: var(--helm-accent-text);
  --helm-on-studio-accent: var(--helm-ground-page);
}

@media (prefers-reduced-motion: reduce) {
  :where(:root) {
    --helm-duration-hover: 0ms;
    --helm-duration-expand: 0ms;
    --helm-duration-dialog-in: 0ms;
    --helm-duration-dialog-out: 0ms;
    --helm-duration-indeterminate: 0ms;
  }
}

/* helm-css · base
 *
 * The typefaces, a light reset, root theming, the focus ring, selection,
 * scrollbars and reduced motion (docs/design/04-packages.md §3). Every
 * selector is :where()-wrapped or a single helm- class, so a studio's own
 * rules win without !important (03 §5).
 *
 * The fonts are IBM Plex Sans 1.1.0 and IBM Plex Mono 2.5.0, the releases'
 * Latin-1 splits, under the SIL Open Font License 1.1 (fonts/LICENSE.txt;
 * docs/decisions.md M6 Q15). No local() source: a copy installed on the
 * machine must not change what renders.
 */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Medium-Latin1.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

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

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(body) {
  margin: 0;
  background: var(--helm-ground-page);
  color: var(--helm-text-primary);
  font: var(--helm-type-body);
  -webkit-font-smoothing: antialiased;
  scrollbar-color: var(--helm-border-strong) transparent;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
  margin: 0;
}

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

:where(code, kbd, samp, pre) {
  font-family: var(--helm-font-mono);
  font-variant-numeric: tabular-nums;
}

:where(img, svg, video, canvas) {
  display: block;
  max-width: 100%;
}

:where(a) {
  color: var(--helm-accent-text);
}

/* Focus is a 2px ring at 2px offset on :focus-visible, never suppressed (03 §15). */
:where(:focus-visible) {
  outline: 2px solid var(--helm-focus-ring);
  outline-offset: 2px;
}

::selection {
  background: var(--helm-accent-subtle);
  color: var(--helm-text-primary);
}

/* Screen-reader text: present for assistive technology, not drawn. */
.helm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Under reduced motion every duration token is 0ms except the progress fill
 * (helm-tokens.css); this catches transitions a studio wrote without them. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
  }
}

/* helm-css · layout
 *
 * The app shell, top bar, nav, rails, panels, the catalogue grid and the
 * three-column working layout with its responsive collapse
 * (docs/design/03-design-system.md §4, 04-packages.md §3). Single-class
 * selectors; states and context go inside :where().
 */

.helm-app {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 100vh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--helm-ground-page);
  color: var(--helm-text-primary);
}

/* First in the focus order; drawn only when focused (03 §17). */
.helm-skip-link {
  position: absolute;
  left: var(--helm-space-2);
  top: var(--helm-space-2);
  z-index: 10;
  padding: var(--helm-space-1) var(--helm-space-3);
  border-radius: var(--helm-radius-sm);
  background: var(--helm-accent-base);
  color: var(--helm-on-accent);
  font: var(--helm-type-body);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.helm-skip-link:where(:focus-visible) {
  transform: none;
}

.helm-topbar {
  display: flex;
  align-items: center;
  gap: var(--helm-space-3);
  min-height: 44px;
  padding: 0 var(--helm-space-4);
  border-bottom: 1px solid var(--helm-border-hairline);
  background: var(--helm-ground-panel);
}

.helm-brand {
  font: var(--helm-type-card-title);
  color: var(--helm-text-primary);
  white-space: nowrap;
}

.helm-nav {
  display: flex;
  gap: var(--helm-space-1);
  padding: 0 var(--helm-space-4);
  border-bottom: 1px solid var(--helm-border-hairline);
  background: var(--helm-ground-panel);
  overflow-x: auto;
}

.helm-nav-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--helm-space-2);
  border-bottom: 2px solid transparent;
  color: var(--helm-text-secondary);
  font: var(--helm-type-body);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--helm-duration-hover) var(--helm-ease-standard), border-color var(--helm-duration-hover) var(--helm-ease-standard);
}

.helm-nav-link:where(:hover) {
  color: var(--helm-text-primary);
}

.helm-nav-link:where([aria-current="page"]) {
  border-bottom-color: var(--helm-accent-base);
  color: var(--helm-text-primary);
}

.helm-main {
  min-width: 0;
  padding: var(--helm-space-6) var(--helm-space-4);
}

.helm-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--helm-space-3);
  margin-bottom: var(--helm-space-4);
}

/* The catalogue: repeat(auto-fill, minmax(320px, 1fr)) with a 16px gap (03 §4). */
.helm-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--helm-space-4);
}

/* The studio detail page: 280px | 1fr | 320px above 1180px; the right column
 * drops below the centre at 1180px; everything stacks below 900px, the
 * terminal last and never under 240px tall (03 §4). */
.helm-work {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  grid-template-areas: "left centre right";
  gap: var(--helm-space-4);
  align-items: start;
}

.helm-work-left {
  grid-area: left;
  min-width: 0;
}

.helm-work-centre {
  grid-area: centre;
  min-width: 0;
}

.helm-work-right {
  grid-area: right;
  min-width: 0;
}

@media (max-width: 1180px) {
  .helm-work {
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-areas: "left centre" "left right";
  }
}

@media (max-width: 900px) {
  .helm-work {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "left" "centre" "right";
  }
}

.helm-rail {
  display: flex;
  flex-direction: column;
  gap: var(--helm-space-3);
  padding: var(--helm-space-4);
  border: 1px solid var(--helm-border-hairline);
  border-radius: var(--helm-radius-md);
  background: var(--helm-ground-panel);
}

.helm-rail-dense {
  padding: var(--helm-space-3);
}

/* The handful of utilities 04 §3 allows: a row, a stack, a spacer. */
.helm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--helm-space-2);
}

.helm-stack {
  display: flex;
  flex-direction: column;
  gap: var(--helm-space-2);
}

.helm-spacer {
  flex: 1;
}

@media (min-width: 380px) {
  .helm-main {
    padding-left: var(--helm-space-6);
    padding-right: var(--helm-space-6);
  }
}

/* helm-css · components
 *
 * Button, chip, field, select, panel, card, table, step row, progress,
 * dialog, toast, tabs, metadata line and terminal surface
 * (docs/design/04-packages.md §3; specimens and rules in 03 §15-§17).
 *
 * Classes only, each prefixed helm-; a modifier is its own class
 * ("helm-btn helm-btn-primary") declared after its base, so every selector
 * stays at one class and a studio overrides with one rule. States and
 * context sit inside :where(). Private custom properties start --_helm-
 * and are not tokens.
 */

/* ---- text ---------------------------------------------------------------- */

.helm-title {
  font: var(--helm-type-title);
  letter-spacing: var(--helm-tracking-title);
  color: var(--helm-text-primary);
}

/* Uppercase labels: 11px, 0.09em, muted, never more than three words (03 §3). */
.helm-section-label {
  font: var(--helm-type-section);
  letter-spacing: var(--helm-tracking-section);
  text-transform: uppercase;
  color: var(--helm-text-muted);
}

.helm-card-title {
  font: var(--helm-type-card-title);
  color: var(--helm-text-primary);
}

.helm-body {
  font: var(--helm-type-body);
  color: var(--helm-text-secondary);
}

.helm-micro {
  font: var(--helm-type-micro);
  color: var(--helm-text-muted);
}

/* Monospace means machine: paths, commands, seeds, sizes, durations, ports (03 §1). */
.helm-mono {
  font: var(--helm-type-mono);
  font-variant-numeric: tabular-nums;
  color: var(--helm-text-secondary);
}

/* A metadata line: "800×448 · 124f · 12 steps · seed 42 · 6m 11s". */
.helm-meta {
  font: var(--helm-type-mono);
  font-variant-numeric: tabular-nums;
  color: var(--helm-text-muted);
  overflow-wrap: anywhere;
}

.helm-link {
  color: var(--helm-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- buttons (03 §15) ---------------------------------------------------- */

.helm-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--helm-space-2);
  height: var(--helm-control-md);
  padding: 0 11px;
  border: 1px solid var(--helm-border-strong);
  border-radius: var(--helm-radius-sm);
  background: transparent;
  color: var(--helm-text-primary);
  font: var(--helm-type-body);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--helm-duration-hover) var(--helm-ease-standard), border-color var(--helm-duration-hover) var(--helm-ease-standard), color var(--helm-duration-hover) var(--helm-ease-standard);
}

.helm-btn:where(:hover) {
  border-color: var(--helm-text-muted);
}

.helm-btn:where(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: 0.5;
}

/* The one accent fill per screen: yellow, near-black label. */
.helm-btn-primary {
  border-color: var(--helm-accent-base);
  background: var(--helm-accent-base);
  color: var(--helm-on-accent);
  font-weight: 600;
}

.helm-btn-primary:where(:hover:not(:disabled)) {
  border-color: var(--helm-accent-hover);
  background: var(--helm-accent-hover);
}

.helm-btn-secondary {
  border-color: var(--helm-border-strong);
  background: transparent;
  color: var(--helm-text-primary);
}

.helm-btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--helm-text-secondary);
}

.helm-btn-ghost:where(:hover) {
  border-color: transparent;
  color: var(--helm-text-primary);
}

.helm-btn-danger {
  border-color: var(--helm-status-error);
  background: transparent;
  color: var(--helm-status-error);
}

/* Dialogs only: the one place a status colour becomes a fill (03 §9). */
.helm-btn-danger-fill {
  border-color: var(--helm-status-error);
  background: var(--helm-status-error);
  color: var(--helm-on-danger);
  font-weight: 600;
}

/* A studio's own primary action wears its identity hue (03 §5). */
.helm-btn-studio {
  border-color: var(--helm-studio-accent);
  background: var(--helm-studio-accent);
  color: var(--helm-on-studio-accent);
  font-weight: 600;
}

.helm-btn-sm {
  height: var(--helm-control-sm);
  padding: 0 var(--helm-space-2);
}

.helm-btn-lg {
  height: var(--helm-control-lg);
  padding: 0 var(--helm-space-3);
}

/* ---- chips and status dots (03 §2, §17: never dot-only) ------------------- */

.helm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 var(--helm-space-2);
  border: 1px solid var(--helm-border-hairline);
  border-radius: var(--helm-radius-sm);
  background: var(--helm-ground-raised);
  color: var(--helm-text-primary);
  font: var(--helm-type-micro);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.helm-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--_helm-status, var(--helm-status-idle));
}

/* A status class on a chip, a row or a step colours the dots and bars inside it. */
.helm-status-idle {
  --_helm-status: var(--helm-status-idle);
}

.helm-status-running {
  --_helm-status: var(--helm-status-running);
}

.helm-status-info {
  --_helm-status: var(--helm-status-info);
}

.helm-status-warning {
  --_helm-status: var(--helm-status-warning);
}

.helm-status-error {
  --_helm-status: var(--helm-status-error);
}

/* The kind badge beside a card title. */
.helm-kind {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--helm-border-hairline);
  border-radius: var(--helm-radius-sm);
  color: var(--helm-text-secondary);
  font: var(--helm-type-micro);
}

/* ---- fields --------------------------------------------------------------- */

.helm-field {
  display: flex;
  flex-direction: column;
  gap: var(--helm-space-1);
}

.helm-label {
  font: var(--helm-type-micro);
  color: var(--helm-text-secondary);
}

.helm-input {
  width: 100%;
  min-height: var(--helm-control-md);
  padding: 3px var(--helm-space-2);
  border: 1px solid var(--helm-border-strong);
  border-radius: var(--helm-radius-sm);
  background: var(--helm-ground-page);
  color: var(--helm-text-primary);
  font: var(--helm-type-body);
  transition: border-color var(--helm-duration-hover) var(--helm-ease-standard);
}

.helm-input:where(:hover) {
  border-color: var(--helm-text-muted);
}

.helm-input:where([aria-invalid="true"]) {
  border-color: var(--helm-status-error);
}

.helm-input::placeholder {
  color: var(--helm-text-muted);
}

.helm-select {
  appearance: none;
  min-height: var(--helm-control-md);
  padding: 3px 28px 3px var(--helm-space-2);
  border: 1px solid var(--helm-border-strong);
  border-radius: var(--helm-radius-sm);
  background: var(--helm-ground-page) linear-gradient(45deg, transparent 50%, var(--helm-text-secondary) 50%) no-repeat right 12px center / 5px 5px;
  color: var(--helm-text-primary);
  font: var(--helm-type-body);
}

.helm-hint {
  font: var(--helm-type-micro);
  color: var(--helm-text-secondary);
}

/* A labelled System / Light / Dark control, never an unlabelled icon (03 §17). */
.helm-segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--helm-border-hairline);
  border-radius: var(--helm-radius-sm);
  background: var(--helm-ground-page);
}

.helm-segment {
  appearance: none;
  height: var(--helm-control-sm);
  padding: 0 var(--helm-space-2);
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--helm-text-secondary);
  font: var(--helm-type-micro);
  cursor: pointer;
}

.helm-segment:where([aria-pressed="true"], [aria-checked="true"]) {
  background: var(--helm-ground-raised);
  color: var(--helm-text-primary);
}

/* ---- panels and cards ----------------------------------------------------- */

.helm-panel {
  border: 1px solid var(--helm-border-hairline);
  border-radius: var(--helm-radius-md);
  background: var(--helm-ground-panel);
}

.helm-panel-header {
  display: flex;
  align-items: center;
  gap: var(--helm-space-2);
  min-height: 36px;
  padding: 0 var(--helm-space-3);
  border-bottom: 1px solid var(--helm-border-hairline);
}

.helm-panel-body {
  padding: var(--helm-space-3);
}

/* Card anatomy (03 §6): 3px identity stripe, title with kind badge, the
 * description in full, a mono facts line, then state chip and actions. A card
 * is not a button; its primary action is. */
.helm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--helm-space-2);
  padding: 14px 14px 14px 17px;
  border: 1px solid var(--helm-border-hairline);
  border-radius: var(--helm-radius-md);
  background: var(--helm-ground-panel);
  overflow: hidden;
}

/* The identity stripe. Its hue comes from --helm-studio-accent, or from a
 * style="--_helm-hue: …" a launcher sets per card. Never animates. */
.helm-card-stripe {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--_helm-hue, var(--helm-studio-accent));
}

/* All of it: a card never hides what a studio is. A word too long for the
 * card, such as a URL, breaks rather than running under its edge. */
.helm-card-desc {
  font: var(--helm-type-body);
  color: var(--helm-text-secondary);
  overflow-wrap: anywhere;
}

.helm-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--helm-space-2);
  margin-top: var(--helm-space-1);
}

/* ---- table (rows have no radius, 03 §4) ----------------------------------- */

.helm-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--helm-type-body);
}

:where(.helm-table) :where(th) {
  padding: var(--helm-space-2) var(--helm-space-3);
  border-bottom: 1px solid var(--helm-border-hairline);
  font: var(--helm-type-section);
  letter-spacing: var(--helm-tracking-section);
  text-align: left;
  text-transform: uppercase;
  color: var(--helm-text-muted);
}

:where(.helm-table) :where(td) {
  padding: var(--helm-space-2) var(--helm-space-3);
  border-bottom: 1px solid var(--helm-border-hairline);
  color: var(--helm-text-primary);
  vertical-align: middle;
}

/* ---- step rows (03 §7) ---------------------------------------------------- */

.helm-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.helm-step {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--helm-space-1) var(--helm-space-3);
  padding: var(--helm-space-2) var(--helm-space-3);
  border-bottom: 1px solid var(--helm-border-hairline);
  box-shadow: inset 0 0 0 transparent;
}

/* A failed row takes a 2px error bar and expands in place. */
.helm-step:where([data-state="failed"]) {
  box-shadow: inset 2px 0 0 var(--helm-status-error);
}

/* Step glyphs are distinct shapes, so the checklist survives greyscale:
 * pending a hollow circle, running a ring, done a check, failed a cross,
 * skipped a dash. */
.helm-step-glyph {
  position: relative;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border: 1.5px solid var(--helm-status-idle);
  border-radius: 50%;
  color: var(--helm-status-idle);
}

.helm-step-glyph:where([data-state="running"]) {
  border-color: var(--helm-status-info);
  border-right-color: transparent;
}

.helm-step-glyph:where([data-state="done"]) {
  border-color: transparent;
  border-radius: 0;
  color: var(--helm-status-running);
}

.helm-step-glyph:where([data-state="done"])::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.helm-step-glyph:where([data-state="failed"]) {
  border-color: transparent;
  border-radius: 0;
  color: var(--helm-status-error);
}

.helm-step-glyph:where([data-state="failed"])::before,
.helm-step-glyph:where([data-state="failed"])::after {
  content: "";
  position: absolute;
  left: 5px;
  top: -1px;
  width: 2px;
  height: 12px;
  background: currentColor;
  transform: rotate(45deg);
}

.helm-step-glyph:where([data-state="failed"])::after {
  transform: rotate(-45deg);
}

.helm-step-glyph:where([data-state="skipped"]) {
  border-color: transparent;
  border-radius: 0;
}

.helm-step-glyph:where([data-state="skipped"])::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 5px;
  width: 9px;
  height: 2px;
  background: currentColor;
}

.helm-step-name {
  font: var(--helm-type-body);
  font-weight: 500;
  color: var(--helm-text-primary);
}

.helm-step-command {
  grid-column: 2 / 4;
  font: var(--helm-type-mono);
  color: var(--helm-text-muted);
  overflow-wrap: anywhere;
}

/* ---- progress (03 §15: never text inside the bar) ------------------------- */

.helm-progress {
  position: relative;
  height: 4px;
  border-radius: var(--helm-radius-sm);
  background: var(--helm-border-hairline);
  overflow: hidden;
}

/* style="--_helm-progress: 62%" */
.helm-progress-fill {
  height: 100%;
  width: var(--_helm-progress, 0%);
  border-radius: inherit;
  background: var(--_helm-status, var(--helm-status-info));
  transition: width var(--helm-duration-progress) linear;
}

.helm-progress-indeterminate {
  width: 32%;
  height: 100%;
  background: var(--_helm-status, var(--helm-status-info));
  animation: helm-indeterminate var(--helm-duration-indeterminate) var(--helm-ease-indeterminate) infinite;
}

@keyframes helm-indeterminate {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(320%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .helm-progress-indeterminate {
    width: 100%;
    opacity: 0.4;
    animation: none;
  }
}

/* ---- dialog and toast ----------------------------------------------------- */

.helm-scrim {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--helm-space-4);
  background: var(--helm-scrim);
}

.helm-dialog {
  width: min(430px, 100%);
  padding: var(--helm-space-4);
  border: 1px solid var(--helm-border-hairline);
  border-radius: var(--helm-radius-md);
  background: var(--helm-ground-raised);
  color: var(--helm-text-primary);
  box-shadow: var(--helm-shadow-dialog);
  animation: helm-dialog-in var(--helm-duration-dialog-in) var(--helm-ease-enter);
}

@keyframes helm-dialog-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.helm-dialog-title {
  margin: 0 0 var(--helm-space-2);
  font: var(--helm-type-card-title);
}

.helm-dialog-body {
  font: var(--helm-type-body);
  color: var(--helm-text-secondary);
}

.helm-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--helm-space-2);
  margin-top: 14px;
}

.helm-toast {
  display: flex;
  align-items: center;
  gap: var(--helm-space-2);
  padding: var(--helm-space-2) var(--helm-space-3);
  border: 1px solid var(--helm-border-hairline);
  border-radius: var(--helm-radius-md);
  background: var(--helm-ground-raised);
  color: var(--helm-text-primary);
  font: var(--helm-type-body);
}

/* ---- tabs ----------------------------------------------------------------- */

.helm-tabs {
  display: flex;
  gap: var(--helm-space-1);
  border-bottom: 1px solid var(--helm-border-hairline);
}

.helm-tab {
  appearance: none;
  height: 32px;
  padding: 0 var(--helm-space-2);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--helm-text-secondary);
  font: var(--helm-type-body);
  font-weight: 500;
  cursor: pointer;
}

.helm-tab:where([aria-selected="true"]) {
  border-bottom-color: var(--helm-accent-base);
  color: var(--helm-text-primary);
}

/* ---- terminal surface (dark in both themes, 03 §2) ------------------------ */

.helm-terminal {
  min-height: 240px;
  padding: 10px var(--helm-space-3);
  border: 1px solid var(--helm-border-hairline);
  border-radius: var(--helm-radius-md);
  background: var(--helm-ground-inset);
  color: var(--helm-log-text);
  font: var(--helm-type-log);
  font-variant-numeric: tabular-nums;
  white-space: pre-wrap;
  overflow: auto;
}

.helm-log-muted {
  color: var(--helm-log-muted);
}

.helm-log-error {
  color: var(--helm-log-error);
}

.helm-log-warning {
  color: var(--helm-log-warning);
}

.helm-log-accent {
  color: var(--helm-log-accent);
}