/* ==========================================================================
   Components — one block per primitive in src/components/. Tokens only.
   Order: text → controls → status → surfaces → feedback → data → overlays.
   Responsive rules measure the content area (@container main), never the
   viewport.
   ========================================================================== */

/* ── Label ────────────────────────────────────────────────────────────── */
/* A small sentence-case label above a value or a group of controls. */
.ui-label {
  display: block;
  color: var(--text-dim);
  font-size: var(--text-12);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

/* ── Link: inline, in text or a value ─────────────────────────────────── */
.ui-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

.ui-link:hover {
  text-decoration-color: currentColor;
}

/* ── Button ───────────────────────────────────────────────────────────── */
/* `ui-button` + one variant (primary | secondary | ghost | danger |
   danger-outline) + optional size (sm | lg) and `icon` for icon-only. */
.ui-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-md);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-13);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.ui-button svg {
  flex: none;
}

.ui-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ui-button--sm {
  height: var(--control-sm);
  padding: 0 var(--space-3);
}

.ui-button--lg {
  height: var(--control-lg);
  padding: 0 var(--space-5);
  font-size: var(--text-14);
}

.ui-button--icon {
  width: var(--control-md);
  padding: 0;
}

.ui-button--icon.ui-button--sm {
  width: var(--control-sm);
}

.ui-button--primary {
  background: var(--accent);
  color: var(--accent-fg);
}

.ui-button--primary:not(:disabled):hover {
  background: var(--accent-hover);
}

.ui-button--secondary {
  border-color: var(--line-strong);
  background: var(--bg-raised);
  color: var(--text);
}

.ui-button--secondary:not(:disabled):hover {
  background: var(--bg-hover);
}

.ui-button--ghost {
  background: transparent;
  color: var(--text-dim);
}

.ui-button--ghost:not(:disabled):hover {
  background: var(--bg-hover);
  color: var(--text);
}

.ui-button--danger {
  background: var(--danger);
  color: var(--danger-fg);
}

.ui-button--danger:not(:disabled):hover {
  background: color-mix(in srgb, var(--danger) 88%, var(--text));
}

/* Destructive action in a list: quiet until hovered. */
.ui-button--danger-outline {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--danger);
}

.ui-button--danger-outline:not(:disabled):hover {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

/* A row of actions; wraps before it overflows. */
.ui-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ── Field ────────────────────────────────────────────────────────────── */
/* <label class="ui-field"><span class="ui-field__label">…</span><input>
   <span class="ui-field__hint">…</span></label> */
.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.ui-field__label {
  color: var(--text);
  font-size: var(--text-13);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.ui-field__hint {
  color: var(--text-dim);
  font-size: var(--text-12);
  line-height: var(--leading-snug);
}

.ui-field__error {
  color: var(--danger);
  font-size: var(--text-12);
  line-height: var(--leading-snug);
}

.ui-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-4);
}

/* ── Input / textarea ─────────────────────────────────────────────────── */
/* Bare inputs inside a field are styled as `ui-input` so page markup stays
   plain; standalone inputs take the class. */
.ui-input,
.ui-field :is(input:not([type="checkbox"], [type="radio"]), textarea) {
  width: 100%;
  min-width: 0;
  height: var(--control-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--text-13);
  transition: border-color var(--duration-fast) var(--ease-out);
}

/* An ID, address or token typed into a field reads in mono, like it prints. */
.ui-field :is(input, textarea).u-mono,
.ui-input.u-mono {
  font-family: var(--font-mono);
}

.ui-field textarea,
textarea.ui-input {
  height: auto;
  min-height: calc(var(--control-md) * 2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  line-height: var(--leading-normal);
  resize: vertical;
}

.ui-input::placeholder,
.ui-field ::placeholder {
  color: var(--text-faint);
}

.ui-input:hover,
.ui-field :is(input, textarea):hover {
  border-color: var(--text-faint);
}

.ui-input:focus,
.ui-field :is(input, textarea):focus {
  border-color: var(--focus);
  outline: none;
  box-shadow: var(--focus-ring);
}

.ui-input[aria-invalid="true"],
.ui-field [aria-invalid="true"] {
  border-color: var(--danger);
}

.ui-input:disabled,
.ui-field :is(input, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ── Checkbox ─────────────────────────────────────────────────────────── */
.ui-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.ui-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-sm);
  color: var(--text);
  font-size: var(--text-13);
  cursor: pointer;
}

.ui-check input {
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  margin: 0;
  accent-color: var(--accent);
}

/* ── Select ───────────────────────────────────────────────────────────── */
.ui-select {
  position: relative;
  min-width: 0;
}

.ui-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  height: var(--control-md);
  padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-13);
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.ui-select__trigger:hover {
  border-color: var(--text-faint);
}

.ui-select__trigger:focus-visible,
.ui-select--open .ui-select__trigger {
  border-color: var(--focus);
  outline: none;
  box-shadow: var(--focus-ring);
}

.ui-select__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-select__value--placeholder {
  color: var(--text-faint);
}

.ui-select__chevron {
  display: grid;
  flex: none;
  color: var(--text-faint);
  transition: transform var(--duration-fast) var(--ease-out);
}

.ui-select--open .ui-select__chevron {
  transform: rotate(180deg);
}

/* Portaled to <body> with position: fixed so no scrolling ancestor clips
   it; select.rs computes top/bottom/left/width from the trigger. */
.ui-select__panel {
  position: fixed;
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: min(18rem, 50dvh);
  padding: var(--space-1);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow: var(--shadow-popover);
}

.ui-select__option {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--control-sm);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  color: var(--text-dim);
  font-size: var(--text-13);
  cursor: pointer;
}

.ui-select__option--active {
  background: var(--bg-hover);
  color: var(--text);
}

.ui-select__option[aria-selected="true"] {
  color: var(--text);
}

.ui-select__check {
  display: grid;
  flex: none;
  color: var(--accent-text);
}

.ui-select__empty {
  padding: var(--space-2);
  color: var(--text-dim);
  font-size: var(--text-13);
}

/* ── Segmented control: one of a few views, as pressed toggle buttons ─── */
.ui-segmented {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.ui-segmented__option {
  height: calc(var(--control-md) - 6px);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-dim);
  font-size: var(--text-13);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

.ui-segmented__option:hover {
  color: var(--text);
}

.ui-segmented__option[aria-pressed="true"] {
  background: var(--bg-hover);
  color: var(--text);
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
/* Underline tabs: links (aria-current) or buttons (role=tab). Scrolls
   sideways on narrow widths instead of wrapping into a second row. */
.ui-tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.ui-tabs__tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-lg);
  padding: 0 var(--space-3);
  border: 0;
  background: none;
  color: var(--text-dim);
  font-size: var(--text-13);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.ui-tabs__tab:hover {
  color: var(--text);
}

.ui-tabs__tab:focus-visible {
  outline-offset: -2px;
}

.ui-tabs__tab[aria-selected="true"],
.ui-tabs__tab[aria-current="page"] {
  color: var(--text);
}

.ui-tabs__tab[aria-selected="true"]::after,
.ui-tabs__tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: var(--space-3);
  bottom: 0;
  left: var(--space-3);
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--accent);
}

/* ── Badge ────────────────────────────────────────────────────────────── */
/* Counts and short labels. Tone modifiers carry state, never decoration. */
.ui-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-1);
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--neutral-soft);
  color: var(--text-dim);
  font-size: var(--text-12);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.ui-badge--success { background: var(--success-soft); color: var(--success); }
.ui-badge--warning { background: var(--warning-soft); color: var(--warning); }
.ui-badge--danger { background: var(--danger-soft); color: var(--danger); }
.ui-badge--accent { background: var(--accent-soft); color: var(--accent-text); }

/* ── Status ───────────────────────────────────────────────────────────── */
/* One status system: a dot plus a label. The label is always present;
   colour is never the only signal. */
.ui-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  font-size: var(--text-13);
  white-space: nowrap;
}

.ui-status-indicator > :last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-status-dot {
  display: inline-block;
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: var(--radius-full);
  background: currentColor;
  color: var(--neutral);
}

.ui-status-dot--success { color: var(--success); }
.ui-status-dot--warning { color: var(--warning); }
.ui-status-dot--danger { color: var(--danger); }
.ui-status-dot--neutral { color: var(--neutral); }
/* In use and fine: allocated scheduler nodes. */
.ui-status-dot--info { color: var(--info); }

/* Live state only: a soft ring that expands from a running dot. Drawn on a
   pseudo-element that only scales and fades, which the compositor animates
   without the main thread; an animated box-shadow repainted every frame,
   for as long as the page was open. */
.ui-status-dot--pulse {
  position: relative;
}

.ui-status-dot--pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  animation: ui-pulse 2s var(--ease-out) infinite;
}

/* Out to 5px around the 8px dot, as the ring was. */
@keyframes ui-pulse {
  0% { transform: scale(1); opacity: 0.45; }
  70%, 100% { transform: scale(2.25); opacity: 0; }
}

.ui-health-indicator {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.ui-health-indicator > .ui-status-dot {
  margin-top: calc((1lh - var(--dot)) / 2);
}

.ui-health-indicator__label {
  color: var(--text);
  font-size: var(--text-13);
  font-weight: var(--weight-medium);
}

.ui-health-indicator__supporting {
  color: var(--text-dim);
  font-size: var(--text-12);
}

/* ── Meter: how full something is, as a short bar beside its figure ──── */
/* The figure carries the value; the bar only lets a column be scanned. */
.ui-meter {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  max-width: 100%;
}

.ui-meter__track {
  flex: none;
  width: var(--meter-width, 3rem);
  height: var(--space-1);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
}

.ui-meter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--chart-1);
}

.ui-meter__value {
  min-width: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Under a figure: the bar takes the width its label leaves. */
.ui-meter--block {
  display: flex;
  width: 100%;
}

.ui-meter--block .ui-meter__track {
  flex: 1;
}

/* ── State bar: how a total splits by state, above its counts ─────────── */
.ui-state-bar {
  display: flex;
  height: var(--space-1);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
}

/* Sized by count; the smallest share still shows. */
.ui-state-bar__part {
  flex-basis: 0;
  min-width: var(--space-1);
}

.ui-state-bar__part--success { background: var(--success); }
.ui-state-bar__part--warning { background: var(--warning); }
.ui-state-bar__part--danger { background: var(--danger); }
.ui-state-bar__part--neutral { background: var(--neutral); }

/* ── Panel ────────────────────────────────────────────────────────────── */
/* The one in-flow box: a hairline, one surface step, no shadow. It owns
   the rhythm of what it holds, and is the positioning context for what it
   holds (a stretched link covers the panel, not the page). */
.ui-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: clamp(var(--space-4), 3cqi, var(--space-6));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}

/* ── Section header ───────────────────────────────────────────────────── */
.ui-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  min-width: 0;
}

.ui-section-header__text {
  min-width: 0;
  max-width: var(--prose-max);
}

.ui-section-header__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ui-section-header__title {
  font-size: var(--text-16);
  line-height: var(--leading-tight);
}

.ui-section-header__description {
  margin-top: var(--space-1);
  color: var(--text-dim);
  font-size: var(--text-13);
}

.ui-section-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ── Metrics ──────────────────────────────────────────────────────────── */
/* A metric row is one strip divided by hairlines, not a row of cards. The
   cells' shadows draw the dividers; the strip's border clips the outer
   ones, so a short last row leaves no stray lines. */
.ui-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}

.ui-metric-grid > * {
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}

.ui-metric-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4) var(--space-5);
}

.ui-metric-panel__label {
  color: var(--text-dim);
  font-size: var(--text-13);
}

.ui-metric-panel__value {
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-24);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-metric-panel__unit {
  margin-left: var(--space-1);
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: var(--text-13);
  font-weight: var(--weight-regular);
  letter-spacing: normal;
}

.ui-metric-panel__value--success { color: var(--success); }
.ui-metric-panel__value--warning { color: var(--warning); }
.ui-metric-panel__value--danger { color: var(--danger); }
.ui-metric-panel__value--neutral { color: var(--text); }

.ui-metric-panel__detail {
  color: var(--text-dim);
  font-size: var(--text-12);
  overflow-wrap: anywhere;
}

/* Phones: two figures a row instead of one tall column. */
@container main (max-width: 520px) {
  .ui-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-metric-panel {
    padding: var(--space-3) var(--space-4);
  }

  .ui-metric-panel__value {
    font-size: var(--text-20);
  }
}

/* ── Status summary: a quiet row of counts above a list ──────────────── */
.ui-status-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Holds the row's place while the list loads. */
.ui-status-summary__skeleton {
  width: min(100%, 16rem);
  height: 20px;
}

/* ── Toolbar: search and filters above a list ────────────────────────── */
.ui-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.ui-toolbar__search {
  flex: 1 1 16rem;
  min-width: 0;
}

.ui-toolbar > .ui-select {
  flex: 0 1 12rem;
  min-width: 9rem;
}

@container main (max-width: 520px) {
  .ui-toolbar > .ui-select {
    flex: 1 1 9rem;
  }
}

/* ── Facts: short label-over-value pairs that flow into columns ──────── */
/* <dl class="ui-facts"><div><dt>…</dt><dd>…</dd></div>…</dl> */
/* --facts-min: the narrowest a column may get before the facts reflow. */
.ui-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--facts-min, 13rem)), 1fr));
  gap: var(--space-5) var(--space-6);
  margin: 0;
}

.ui-facts > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.ui-facts dt {
  color: var(--text-dim);
  font-size: var(--text-12);
}

.ui-facts dd {
  margin: 0;
  color: var(--text);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
}

/* Two columns on a phone rather than one long list. */
@container main (max-width: 520px) {
  .ui-facts {
    --facts-min: 8rem;
  }
}

/* A long value (a key, a fingerprint) takes the whole row. */
.ui-facts__wide {
  grid-column: 1 / -1;
}

/* ── Disclosure: <details class="ui-disclosure"><summary>… ────────────── */
.ui-disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: var(--text-13);
  list-style: none;
  cursor: pointer;
}

.ui-disclosure > summary::-webkit-details-marker {
  display: none;
}

/* A chevron drawn in the text colour: right when closed, down when open. */
.ui-disclosure > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--duration-fast) var(--ease-out);
}

.ui-disclosure[open] > summary::before {
  transform: rotate(45deg);
}

.ui-disclosure > summary:hover {
  color: var(--text);
}

.ui-disclosure[open] > summary {
  margin-bottom: var(--space-3);
}

/* ── Key-value list ───────────────────────────────────────────────────── */
/* <dl class="ui-kv"><div><dt>…</dt><dd>…</dd></div>…</dl> */
.ui-kv {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: var(--space-3) var(--space-6);
  margin: 0;
  font-size: var(--text-13);
}

.ui-kv > div {
  display: contents;
}

.ui-kv dt {
  color: var(--text-dim);
}

.ui-kv dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

@container main (max-width: 520px) {
  .ui-kv {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .ui-kv > dd + dt,
  .ui-kv > div + div > dt {
    margin-top: var(--space-2);
  }
}

/* ── Timeline ─────────────────────────────────────────────────────────── */
/* <ol class="ui-timeline"><li class="ui-timeline__item"><span dot>
   <div class="ui-timeline__body">…</div></li></ol> */
.ui-timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--dot) minmax(0, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-5);
}

.ui-timeline__item > .ui-status-dot {
  margin-top: calc((1lh - var(--dot)) / 2);
}

/* The rail joining one event's dot to the next. */
.ui-timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(1lh + var(--space-1));
  bottom: var(--space-1);
  left: calc(var(--dot) / 2 - 0.5px);
  width: 1px;
  background: var(--line-strong);
}

.ui-timeline__item:last-child {
  padding-bottom: 0;
}

.ui-timeline__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  font-size: var(--text-13);
}

.ui-timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.ui-timeline__title {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.ui-timeline__meta {
  color: var(--text-dim);
  font-size: var(--text-12);
}

/* What happened, in a line: an explanation or the event's fields. */
.ui-timeline__detail {
  color: var(--text-dim);
  font-size: var(--text-12);
  overflow-wrap: anywhere;
}

.ui-timeline__detail--danger {
  color: var(--danger);
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.ui-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
}

.ui-empty-state__icon {
  display: grid;
  place-items: center;
  width: var(--control-lg);
  height: var(--control-lg);
  margin-bottom: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  color: var(--text-dim);
}

.ui-empty-state--failure .ui-empty-state__icon {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

.ui-empty-state__title {
  font-size: var(--text-14);
}

.ui-empty-state__explanation {
  max-width: 48ch;
  color: var(--text-dim);
  font-size: var(--text-13);
}

.ui-empty-state__action {
  margin-top: var(--space-3);
}

/* ── Inline notice ────────────────────────────────────────────────────── */
.ui-inline-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  color: var(--text);
  font-size: var(--text-13);
}

.ui-inline-notice__icon {
  display: grid;
  flex: none;
  height: 1lh;
  place-items: center;
  color: var(--text-dim);
}

.ui-inline-notice__message {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ui-inline-notice__action {
  margin: calc(var(--space-1) * -1) 0;
}

.ui-inline-notice--success { border-color: transparent; background: var(--success-soft); }
.ui-inline-notice--warning { border-color: transparent; background: var(--warning-soft); }
.ui-inline-notice--danger { border-color: var(--danger-line); background: var(--danger-soft); }
.ui-inline-notice--success .ui-inline-notice__icon { color: var(--success); }
.ui-inline-notice--warning .ui-inline-notice__icon { color: var(--warning); }
.ui-inline-notice--danger .ui-inline-notice__icon { color: var(--danger); }

/* ── Skeleton ─────────────────────────────────────────────────────────── */
.ui-skeleton-group {
  display: contents;
}

.ui-skeleton__bar {
  display: block;
  height: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  animation: ui-shimmer 1.6s ease-in-out infinite;
}

@keyframes ui-shimmer {
  50% { opacity: 0.45; }
}

.ui-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.ui-skeleton--card {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}

.ui-skeleton--metric {
  padding: var(--space-4) var(--space-5);
}

.ui-skeleton--metric .ui-skeleton__bar:last-child {
  height: var(--space-6);
}

.ui-skeleton--row {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  height: var(--row-h);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--line);
}

.ui-skeleton--row .ui-skeleton__bar {
  flex: 1;
}

.ui-skeleton .ui-skeleton__bar:nth-child(1) { width: 40%; }
.ui-skeleton .ui-skeleton__bar:nth-child(2) { width: 72%; }
.ui-skeleton .ui-skeleton__bar:nth-child(3) { width: 56%; }
.ui-skeleton .ui-skeleton__bar:nth-child(4) { width: 30%; }
.ui-skeleton--row .ui-skeleton__bar:nth-child(n) { width: auto; }

.ui-skeleton__line {
  width: 100%;
}

/* ── Copy button ──────────────────────────────────────────────────────── */
.ui-copy--copied,
.ui-copy--copied:not(:disabled):hover {
  color: var(--success);
}

/* A value with its copy button beside it. */
.ui-copy-value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  min-width: 0;
}

.ui-copy-value > :first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* In a facts list the button overhangs the value's line rather than making
   it taller, so a copyable value lines up with the values beside it. */
.ui-facts dd > .ui-copy-value > .ui-copy {
  margin-block: calc(-1 * var(--space-2));
}

/* ── Code block ───────────────────────────────────────────────────────── */
/* The actions get their own column, so scrolled code never runs under
   them. */
.ui-code {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.ui-code__pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  line-height: var(--leading-normal);
  white-space: pre;
  tab-size: 4;
}

.ui-code--wrap .ui-code__pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ui-code__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-1);
  padding: var(--space-1);
}

/* ── Timestamp ────────────────────────────────────────────────────────── */
.ui-timestamp {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Stretched link ───────────────────────────────────────────────────── */
/* Makes a whole card clickable from one real link. The card must be the
   positioning context (a Panel is); otherwise the link covers the page. */
.ui-stretched-link {
  text-decoration: none;
}

.ui-stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The card's corners, so the focus ring follows them. */
  border-radius: var(--radius-lg);
}

.ui-stretched-link:focus-visible {
  outline: none;
}

.ui-stretched-link:focus-visible::after {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ── Data table ───────────────────────────────────────────────────────── */
/* Scrolls sideways inside its own frame when the columns need more room
   than the page has; edge shadows show there is more. */
.ui-data-table {
  /* The containing block for visually-hidden labels inside, so they scroll
     with the table instead of widening the page. */
  position: relative;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(to right, var(--bg-raised) 40%, transparent) left / var(--space-8) 100% no-repeat local,
    linear-gradient(to left, var(--bg-raised) 40%, transparent) right / var(--space-8) 100% no-repeat local,
    linear-gradient(to right, var(--line-strong), transparent) left / var(--space-3) 100% no-repeat scroll,
    linear-gradient(to left, var(--line-strong), transparent) right / var(--space-3) 100% no-repeat scroll,
    var(--bg-raised);
}

.ui-data-table:focus-visible {
  outline-offset: 2px;
}

.ui-data-table table {
  width: 100%;
  /* --table-min-auto (set by DataTable) keeps every column readable when
     the fixed widths alone add up past the section's --table-min. */
  min-width: max(var(--table-min, 40rem), var(--table-min-auto, 0rem));
  border-collapse: collapse;
  table-layout: fixed;
}

.ui-data-table th {
  height: var(--control-lg);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  /* A column's classes style its cells' content, never its header. */
  font-family: var(--font-sans);
  font-size: var(--text-12);
  font-weight: var(--weight-medium);
  text-align: left;
  white-space: nowrap;
}

.ui-data-table td {
  height: var(--row-h);
  padding: 0 var(--space-4);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  font-size: var(--text-13);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.ui-data-table tbody tr:hover td {
  background: var(--bg-hover);
}

/* The first cell names the row; it reads at full strength. */
.ui-data-table td:first-child {
  color: var(--text);
}

.ui-data-table .ui-data-table__num {
  text-align: right;
}

.ui-data-table td.ui-data-table__num {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-variant-numeric: tabular-nums;
}

/* Buttons and menus never clip: an actions cell overflows rather than
   cutting its controls. */
/* Row actions stay in view while a wide table scrolls sideways, on an
   opaque background so the cells passing beneath never show through. */
.ui-data-table .ui-data-table__actions {
  position: sticky;
  right: 0;
  overflow: visible;
  background: var(--bg-raised);
  text-align: right;
}

.ui-data-table tbody tr:hover td.ui-data-table__actions {
  background: linear-gradient(var(--bg-hover), var(--bg-hover)), var(--bg-raised);
}

/* Where the table scrolls, a hairline marks the edge the cells slide under. */
@container main (max-width: 720px) {
  .ui-data-table .ui-data-table__actions {
    box-shadow: inset 1px 0 0 var(--line);
  }
}

.ui-data-table__actions > * {
  vertical-align: middle;
}

.ui-data-table__actions > * + * {
  margin-left: var(--space-2);
}

/* A navigable row: the primary cell holds a real link; data_table.rs
   forwards a click anywhere else on the row to it. */
.ui-data-table tr:has(.ui-data-table__link) {
  cursor: pointer;
}

/* Truncates itself (full name in `title`) so the cell never clips it. */
.ui-data-table__link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-weight: var(--weight-medium);
  text-decoration: none;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.ui-data-table tr:hover .ui-data-table__link {
  text-decoration: underline;
  text-decoration-color: var(--text-faint);
  text-underline-offset: 3px;
}

.ui-data-table__link:focus-visible {
  outline-offset: 1px;
}

.ui-data-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 calc(var(--space-1) * -1);
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
}

.ui-data-table__sort:hover,
.ui-data-table [aria-sort] .ui-data-table__sort {
  color: var(--text);
}

.ui-data-table__skeleton {
  display: block;
  width: 64%;
  height: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  animation: ui-shimmer 1.6s ease-in-out infinite;
}

.ui-data-table tr:nth-child(2n) .ui-data-table__skeleton { width: 82%; }
.ui-data-table tr:nth-child(3n) .ui-data-table__skeleton { width: 48%; }

/* Empty and error rows span the table and read as an inline empty state. */
.ui-data-table .ui-data-table__message {
  height: auto;
  padding: var(--space-10) var(--space-6);
  white-space: normal;
  text-align: center;
}

.ui-data-table tbody tr:hover .ui-data-table__message {
  background: none;
}

.ui-data-table__message-title {
  display: block;
  color: var(--text);
  font-size: var(--text-14);
  font-weight: var(--weight-semibold);
}

.ui-data-table__message-text {
  display: block;
  max-width: 48ch;
  margin: var(--space-1) auto 0;
  color: var(--text-dim);
}

.ui-data-table__message--error .ui-data-table__message-title {
  color: var(--danger);
}

.ui-data-table__message .ui-button {
  margin-top: var(--space-4);
}

/* ── Overlay: modal and drawer ────────────────────────────────────────── */
body.ui-overlay-open {
  overflow: hidden;
}

.ui-overlay {
  position: fixed;
  z-index: var(--z-overlay);
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.ui-overlay--open {
  visibility: visible;
  pointer-events: auto;
}

.ui-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.ui-overlay--open .ui-overlay__backdrop {
  opacity: 1;
}

.ui-overlay__panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  box-shadow: var(--shadow-overlay);
}

.ui-overlay__panel--modal {
  top: 50%;
  left: 50%;
  width: min(30rem, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100dvh - 2 * var(--space-8));
  border-radius: var(--radius-lg);
  opacity: 0;
  transform: translate(-50%, calc(-50% + var(--space-2)));
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.ui-overlay--open .ui-overlay__panel--modal {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.ui-overlay__panel--drawer {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(36rem, 100vw);
  border-width: 0 0 0 1px;
  /* A table in a drawer fits the drawer, not a page. */
  --table-min: 24rem;
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-out);
}

.ui-overlay--open .ui-overlay__panel--drawer {
  transform: none;
}

.ui-overlay__header {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--line);
}

.ui-overlay__title {
  font-size: var(--text-16);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.ui-overlay__description {
  max-width: var(--prose-max);
  margin-top: var(--space-1);
  color: var(--text-dim);
  font-size: var(--text-13);
}

.ui-overlay__close {
  margin: calc(var(--space-1) * -1) 0;
}

.ui-overlay__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* A form inside a drawer: the fields scroll, the actions stay pinned. */
.ui-drawer-form {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.ui-drawer-form__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
}

.ui-drawer-form__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
}

.ui-confirm__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
}

.ui-confirm__target {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.ui-confirm__target strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-13);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

.ui-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--line);
  background: var(--bg-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* Facts in a dialog sit two to a row. */
.ui-confirm__content .ui-facts {
  --facts-min: 10rem;
}

/* A second way out of the dialog, kept apart from Cancel and the confirm. */
.ui-confirm__aside {
  margin-right: auto;
}

/* ── Chart ────────────────────────────────────────────────────────────── */
/* Drawn at the measured pixel width (time_series_chart.rs), so type never
   stretches. Series colour arrives as --series from the --chart-n tokens. */
.ui-chart {
  min-width: 0;
  margin: 0;
}

.ui-chart__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ui-chart__controls > .ui-select {
  width: auto;
  min-width: 11rem;
}

.ui-chart__unit {
  margin-bottom: var(--space-1);
  color: var(--text-dim);
  font-size: var(--text-12);
}

.ui-chart__plot {
  position: relative;
  height: 240px;
  border-radius: var(--radius-sm);
}

.ui-chart__plot:focus-visible {
  outline-offset: 4px;
}

.ui-chart__svg {
  display: block;
  overflow: visible;
}

.ui-chart__grid {
  stroke: var(--chart-grid);
}

.ui-chart__baseline {
  stroke: var(--line-strong);
}

.ui-chart__tick {
  fill: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--text-11);
  font-variant-numeric: tabular-nums;
}

.ui-chart__line {
  fill: none;
  stroke: var(--series);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-chart__dot {
  fill: var(--series);
}

.ui-chart__bar {
  fill: var(--chart-1);
  opacity: 0.8;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.ui-chart__bar--active {
  opacity: 1;
}

.ui-chart__hit {
  fill: transparent;
}

.ui-chart__crosshair {
  stroke: var(--text-faint);
  stroke-dasharray: 2 3;
}

.ui-chart__marker {
  fill: var(--bg-raised);
  stroke: var(--series);
  stroke-width: 2;
}

/* Beside the crosshair; `--left` flips it to the other side near the
   right edge. */
.ui-chart__tooltip {
  position: absolute;
  top: 0;
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 10rem;
  max-width: 18rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  box-shadow: var(--shadow-popover);
  font-size: var(--text-12);
  pointer-events: none;
  transform: translateX(var(--space-3));
}

.ui-chart__tooltip--left {
  transform: translateX(calc(-100% - var(--space-3)));
}

.ui-chart__tooltip-time {
  color: var(--text-dim);
}

.ui-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-12);
}

.ui-chart__series {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* A short stroke, like the line it keys, so it never reads as a status dot. */
.ui-chart__swatch {
  flex: none;
  width: var(--space-3);
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--series);
}

.ui-chart__series-label {
  min-width: 0;
  overflow: hidden;
  color: var(--text-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-chart__series-value {
  margin-left: auto;
  padding-left: var(--space-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Loading, empty and error in the plot's own footprint, so nothing jumps
   when the data arrives. */
.ui-chart__empty {
  display: grid;
  place-items: center;
  height: 240px;
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--text-dim);
  font-size: var(--text-13);
  text-align: center;
}

/* ── Terminal ─────────────────────────────────────────────────────────── */
/* A toolbar on the page's surface over a screen that stays dark in both
   themes. The frame's height comes from the viewport, never from the
   canvas, so the screen can be measured without the measure feeding
   itself. */
.ui-terminal {
  display: flex;
  flex-direction: column;
  height: clamp(20rem, calc(100dvh - 20rem), 60rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--terminal-bg);
}

.ui-terminal__toolbar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}

.ui-terminal__status {
  min-width: 0;
}

.ui-terminal__actions {
  display: flex;
  flex: none;
  gap: var(--space-1);
}

.ui-terminal__screen {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: var(--space-2) var(--space-3);
  background: var(--terminal-bg);
  cursor: text;
}

.ui-terminal__screen:focus {
  outline: none;
}

.ui-terminal__screen:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent-soft);
}

.ui-terminal__screen canvas {
  display: block;
}

.ui-terminal__note {
  flex: none;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text-dim);
  font-size: var(--text-12);
}

/* Full screen: over the whole app, edge to edge. */
.ui-terminal--fullscreen {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  height: auto;
  border: 0;
  border-radius: 0;
}

/* ── Capacity chart: free CPUs, memory and GPU per node, with a request ── */
/* Used is the muted fill, the request sits on top of it in the accent (red
   when it does not fit), and the rest of the track is what is left. */
.pl-capacity {
  display: grid;
  gap: var(--space-3);
}

.pl-capacity__node {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.pl-capacity__node--over {
  border-color: var(--danger-line);
}

.pl-capacity__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.pl-capacity__holders,
.pl-capacity__figure {
  color: var(--text-dim);
  font-size: var(--text-12);
}

.pl-capacity__bar {
  display: grid;
  grid-template-columns: 4.5rem minmax(4rem, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-12);
}

.pl-capacity__track {
  display: flex;
  height: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
}

.pl-capacity__used {
  background: var(--text-dim);
  opacity: 0.45;
}

.pl-capacity__ask {
  background: var(--chart-1);
}

.pl-capacity__ask--over {
  background: var(--danger);
}

.pl-capacity__figure {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pl-capacity__reason {
  margin: 0;
  color: var(--danger);
  font-size: var(--text-12);
}

@media (max-width: 480px) {
  .pl-capacity__bar {
    grid-template-columns: 4rem 1fr;
  }
  .pl-capacity__figure {
    grid-column: 2;
  }
}

/* Reservation access: the terminal link, ssh copy and a no-GPU badge. */
.pl-access {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.pl-access__nogpu {
  padding: 0 var(--space-2);
  border: 1px solid var(--warning);
  border-radius: var(--radius-full);
  color: var(--warning);
  font-size: var(--text-12);
  cursor: help;
}

.pl-access__help {
  font-size: var(--text-12);
}

.pl-ssh__steps {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-5);
}

.pl-access__later {
  color: var(--text-dim);
  font-size: var(--text-12);
}

/* A deployment's failure: the reason, and a way to its log. */
.infra-deployment__failure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.infra-deployment__failure > :first-child {
  flex: 1 1 20rem;
}

/* The reason under a failing workload's status in the list. */
.pl-workload__why {
  max-width: 28rem;
  overflow: hidden;
  color: var(--danger);
  font-size: var(--text-12);
  text-overflow: ellipsis;
  white-space: nowrap;
}