/*
 * Components. Every component here is rendered on /styleguide and documented in
 * docs/design-system.md. Use semantic tokens only.
 */

/* Tone defaults at zero specificity so any [data-tone] / [data-status] wins. */
:where(.badge, .pill) { --tone-bg: var(--neutral-soft); --tone-fg: var(--neutral-text); --tone-border: var(--neutral-border); }
:where(.callout) { --tone-bg: var(--info-soft); --tone-fg: var(--info-text); --tone-border: var(--info-border); }
:where(.progress, .progress-ring) { --tone-solid: var(--accent); --tone-track: var(--accent-track); }

/* ======================================================================
   Icons
   ====================================================================== */

.icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.icon-xs { width: 12px; height: 12px; stroke-width: 2; }
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; stroke-width: 1.6; }

.spin { animation: spin 0.9s linear infinite; }

@keyframes spin { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .spin { animation-duration: 2.4s; }
}

.logo { display: block; }

/* ======================================================================
   Buttons
   ====================================================================== */

.btn {
  --btn-h: var(--control-h);
  --btn-px: 12px;
  --btn-bg: var(--bg-surface);
  --btn-bg-hover: var(--bg-hover);
  --btn-bg-active: var(--bg-active);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-shadow: var(--shadow-xs), var(--highlight);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    transform var(--dur-instant);
}

.btn:hover { background: var(--btn-bg-hover); text-decoration: none; color: var(--btn-fg); }
.btn:active { background: var(--btn-bg-active); transform: translateY(0.5px); }

.btn:focus-visible {
  outline: none;
  box-shadow: var(--btn-shadow), var(--focus-ring);
  border-color: var(--border-focus);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  box-shadow: none;
  pointer-events: none;
}

.btn .icon { width: 16px; height: 16px; margin-inline: -1px; }

.btn-primary {
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-hover);
  --btn-bg-active: var(--accent-active);
  --btn-fg: var(--text-on-accent);
  --btn-border: color-mix(in srgb, var(--accent) 82%, #000);
  --btn-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn-secondary { /* default look; explicit class for readability */ }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-2);
  --btn-border: transparent;
  --btn-shadow: none;
}

.btn-ghost:hover { --btn-fg: var(--text); }

.btn-danger {
  --btn-bg: var(--danger);
  --btn-bg-hover: var(--danger-hover);
  --btn-bg-active: var(--danger-hover);
  --btn-fg: #fff;
  --btn-border: color-mix(in srgb, var(--danger) 82%, #000);
  --btn-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn-danger-ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--danger-soft);
  --btn-bg-active: var(--danger-soft);
  --btn-fg: var(--danger-text);
  --btn-border: transparent;
  --btn-shadow: none;
}

.btn-sm { --btn-h: var(--control-h-sm); --btn-px: 10px; font-size: var(--text-xs); border-radius: var(--radius-sm); gap: 5px; }
.btn-sm .icon { width: 14px; height: 14px; }
.btn-lg { --btn-h: var(--control-h-lg); --btn-px: 16px; font-size: var(--text-md); }

.btn-icon { --btn-px: 0; width: var(--btn-h); }
.btn-block { width: 100%; }

.btn__kbd { margin-left: var(--space-1); margin-right: -4px; }

/* Loading: content goes transparent, a spinner in the button's own foreground colour appears. */
.btn.is-loading,
.btn[aria-busy="true"] {
  color: transparent;
  pointer-events: none;
}

.btn.is-loading::after,
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
  margin: auto;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}

.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.btn-group > .btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* A disabled control that still explains itself on hover/focus. */
.tooltip-host { display: inline-flex; border-radius: var(--radius-md); }

/* ======================================================================
   Form controls
   ====================================================================== */

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--space-2-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
}

.input::placeholder,
.textarea::placeholder { color: var(--text-placeholder); }

.input:hover,
.select:hover,
.textarea:hover { border-color: color-mix(in srgb, var(--border-strong) 70%, var(--text-3)); }

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

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

.input[aria-invalid="true"]:focus-visible,
.textarea[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--bg-sunken);
  color: var(--text-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

.input[readonly] { background: var(--bg-surface-2); }

.input-sm { height: var(--control-h-sm); font-size: var(--text-xs); }
.input-lg { height: var(--control-h-lg); font-size: var(--text-md); }
.input-mono { font-family: var(--font-mono); font-size: var(--text-xs); }

.input[type="number"] { font-variant-numeric: tabular-nums; }

.textarea {
  height: auto;
  min-height: 84px;
  max-height: 480px;
  padding: var(--space-2) var(--space-2-5);
  line-height: var(--leading-normal);
  resize: vertical;
}

.textarea[data-autosize] { resize: none; overflow-y: hidden; }

.select {
  padding-right: 32px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8394' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px 14px;
  cursor: pointer;
}

/* Input with leading/trailing addon (units, currency, icons). */
.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.input-group:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring); }

.input-group .input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.input-group .input:focus-visible { box-shadow: none; }

.input-group__addon {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2-5);
  color: var(--text-3);
  font-size: var(--text-xs);
  white-space: nowrap;
  background: var(--bg-surface-2);
}

.input-group__addon:first-child { border-right: 1px solid var(--border); border-radius: var(--radius-md) 0 0 var(--radius-md); }
.input-group__addon:last-child { border-left: 1px solid var(--border); border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* Checkbox & radio */
.check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  line-height: 18px;
}

.check input {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--bg-surface) center / 12px 12px no-repeat;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.check input[type="radio"] { border-radius: var(--radius-full); }

.check input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.check input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 16px 16px;
}

.check input:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--border-focus); }
.check input:disabled { opacity: 0.5; cursor: not-allowed; }
.check__text { display: flex; flex-direction: column; }
.check__hint { color: var(--text-3); font-size: var(--text-xs); }

/* Toggle switch: <label class="switch"><input type="checkbox" role="switch"><span class="switch__track"></span> Label</label> */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  cursor: pointer;
  user-select: none;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  box-shadow: var(--shadow-inset);
  transition: background-color var(--dur) var(--ease-standard), box-shadow var(--dur-fast);
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.25), 0 0 0 0.5px rgba(16, 24, 40, 0.06);
  transition: translate var(--dur) var(--ease-out);
}

.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { translate: 14px 0; }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }
.switch input:disabled + .switch__track { opacity: 0.5; }
.switch:has(input:disabled) { cursor: not-allowed; color: var(--text-disabled); }

/* Tags input */
.tags-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-h);
  padding: 3px var(--space-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  cursor: text;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.tags-input:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring); }

.tags-input__field {
  flex: 1 0 96px;
  min-width: 96px;
  height: 24px;
  padding: 0 var(--space-1-5);
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--text-sm);
}

.tags-input__field::placeholder { color: var(--text-placeholder); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  padding: 0 2px 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-2);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  max-width: 100%;
}

.tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-3);
}

.tag__remove:hover { background: var(--bg-active); color: var(--text); }
.tag__remove .icon { width: 12px; height: 12px; stroke-width: 2.2; }

/* File drop zone */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-surface-2);
  color: var(--text-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}

.dropzone:hover { border-color: color-mix(in srgb, var(--border-strong) 50%, var(--accent)); }

.dropzone:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring); }

.dropzone[data-dragging="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dropzone input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.dropzone__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--accent-text);
  box-shadow: var(--shadow-xs);
}

.dropzone__icon .icon { width: 18px; height: 18px; }
.dropzone__title { color: var(--text); font-weight: var(--weight-medium); }
.dropzone__title strong { color: var(--accent-text); font-weight: var(--weight-semibold); }
.dropzone__hint { font-size: var(--text-xs); color: var(--text-3); }

.file-list { display: flex; flex-direction: column; gap: var(--space-1-5); margin-top: var(--space-2); }

.file-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: var(--text-xs);
}

.file-list__item .icon { color: var(--text-3); }
.file-list__name { flex: 1 1 auto; font-weight: var(--weight-medium); color: var(--text); }
.file-list__size { color: var(--text-3); }

/* ======================================================================
   Form layout
   ====================================================================== */

.form { display: flex; flex-direction: column; gap: var(--space-5); }

.field { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }

.field__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.field__optional { font-weight: var(--weight-regular); color: var(--text-3); font-size: var(--text-xs); }
.field__required { color: var(--danger-text); }

.field__hint { font-size: var(--text-xs); color: var(--text-3); line-height: var(--leading-snug); }

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1-5);
  font-size: var(--text-xs);
  color: var(--danger-text);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.field__error .icon { width: 14px; height: 14px; margin-top: 0; }

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  align-items: start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-subtle);
}

.form-row:first-child { border-top: 0; padding-top: 0; }
.form-row:last-child { padding-bottom: 0; }
.form-row > .field__label { padding-top: 7px; flex-direction: column; gap: 2px; }
.form-row > .field__label .field__hint { font-weight: var(--weight-regular); }
.form-row__control { display: flex; flex-direction: column; gap: var(--space-1-5); max-width: 440px; }

@media (max-width: 760px) {
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .form-row > .field__label { padding-top: 0; }
}

.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }

/* ======================================================================
   Cards
   ====================================================================== */

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.card__header-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.card__title { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.card__title .icon { display: inline-block; margin-right: var(--space-1-5); color: var(--text-3); vertical-align: -3px; }
.card__subtitle { font-size: var(--text-xs); color: var(--text-3); }
.card__actions { display: flex; align-items: center; gap: var(--space-1-5); margin-left: auto; }

.card__body { flex: 1 1 auto; padding: var(--space-5); }
.card__body-flush { padding: 0; }

.card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.card__footer-note { font-size: var(--text-xs); color: var(--text-3); margin-right: auto; }

.card-interactive { transition: box-shadow var(--dur) var(--ease-standard), border-color var(--dur) var(--ease-standard), translate var(--dur) var(--ease-standard); }
.card-interactive:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.card-muted { background: var(--bg-surface-2); box-shadow: none; }

/* ======================================================================
   Tables
   ====================================================================== */

.table-wrap {
  position: relative;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
}

.table-wrap-scroll { max-height: 320px; }
.card .table-wrap { border: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: none; }

.table {
  width: 100%;
  font-size: var(--text-sm);
}

.table th {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  height: 36px;
  padding: 0 var(--space-4);
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-align: left;
  white-space: nowrap;
}

.table td {
  height: 44px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-2);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--dur-instant); }
.table tbody tr:hover td { background: var(--bg-hover); }
.table td.table__primary { color: var(--text); font-weight: var(--weight-medium); }
.table .num { text-align: right; }
.table th.num { text-align: right; }

.table__actions { width: 1%; white-space: nowrap; text-align: right; }

.table__row-actions {
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--dur-fast);
}

.table tbody tr:hover .table__row-actions,
.table tbody tr:focus-within .table__row-actions { opacity: 1; }

@media (hover: none) {
  .table__row-actions { opacity: 1; }
}

.table-compact td { height: 36px; }

/* ======================================================================
   Badges, status pills, count badges
   ====================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 20px;
  padding: 0 var(--space-1-5);
  border: 1px solid var(--tone-border);
  border-radius: var(--radius-sm);
  background: var(--tone-bg);
  color: var(--tone-fg);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.badge .icon { width: 12px; height: 12px; }

[data-tone="accent"] { --tone-bg: var(--accent-soft); --tone-fg: var(--accent-text); --tone-border: var(--accent-border); --tone-solid: var(--accent); --tone-track: var(--accent-track); }
[data-tone="success"] { --tone-bg: var(--success-soft); --tone-fg: var(--success-text); --tone-border: var(--success-border); --tone-solid: var(--success); --tone-track: var(--success-track); }
[data-tone="warning"] { --tone-bg: var(--warning-soft); --tone-fg: var(--warning-text); --tone-border: var(--warning-border); --tone-solid: var(--warning); --tone-track: var(--warning-track); }
[data-tone="danger"] { --tone-bg: var(--danger-soft); --tone-fg: var(--danger-text); --tone-border: var(--danger-border); --tone-solid: var(--danger); --tone-track: var(--danger-track); }
[data-tone="info"] { --tone-bg: var(--info-soft); --tone-fg: var(--info-text); --tone-border: var(--info-border); --tone-solid: var(--info); --tone-track: var(--info-track); }
[data-tone="neutral"] { --tone-bg: var(--neutral-soft); --tone-fg: var(--neutral-text); --tone-border: var(--neutral-border); --tone-solid: var(--text-3); --tone-track: var(--bg-active); }

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg-chrome);
}

.count-badge[data-count="0"] { display: none; }

/* Status pill: job statuses (data-status) or generic tone (data-tone) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 var(--space-2) 0 var(--space-1-5);
  border: 1px solid var(--tone-border);
  border-radius: var(--radius-full);
  background: var(--tone-bg);
  color: var(--tone-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.pill .icon { width: 13px; height: 13px; stroke-width: 2; }

.pill__dot {
  width: 6px;
  height: 6px;
  margin: 0 1px;
  border-radius: var(--radius-full);
  background: currentColor;
}

.pill-sm { height: 18px; font-size: var(--text-2xs); padding: 0 6px 0 5px; gap: 4px; }
.pill-sm .icon { width: 11px; height: 11px; }

.pill[data-status="pending"] { --tone-bg: var(--neutral-soft); --tone-fg: var(--text-3); --tone-border: var(--neutral-border); }
.pill[data-status="waiting"] { --tone-bg: var(--neutral-soft); --tone-fg: var(--text-3); --tone-border: var(--neutral-border); }
.pill[data-status="failed_validation"] { --tone-bg: var(--danger-soft); --tone-fg: var(--danger-text); --tone-border: var(--danger-border); }
.pill[data-status="queued"] { --tone-bg: var(--neutral-soft); --tone-fg: var(--neutral-text); --tone-border: var(--neutral-border); }
.pill[data-status="running"] { --tone-bg: var(--accent-soft); --tone-fg: var(--accent-text); --tone-border: var(--accent-border); }
.pill[data-status="succeeded"] { --tone-bg: var(--success-soft); --tone-fg: var(--success-text); --tone-border: var(--success-border); }
.pill[data-status="failed"] { --tone-bg: var(--danger-soft); --tone-fg: var(--danger-text); --tone-border: var(--danger-border); }
.pill[data-status="cancelled"] { --tone-bg: var(--neutral-soft); --tone-fg: var(--text-3); --tone-border: var(--neutral-border); }
.pill[data-status="skipped"] { --tone-bg: transparent; --tone-fg: var(--text-3); --tone-border: var(--border); }
.pill[data-status="waiting_approval"] { --tone-bg: var(--warning-soft); --tone-fg: var(--warning-text); --tone-border: var(--warning-border); }

.pill[data-status="cancelled"] .pill__label { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }

/* Status icon (no pill), used in trees and lists */
.status-icon { display: inline-flex; flex: 0 0 auto; }
.status-icon .icon { width: 16px; height: 16px; stroke-width: 2; }
.status-icon[data-status="pending"],
.status-icon[data-status="waiting"],
.status-icon[data-status="cancelled"],
.status-icon[data-status="skipped"] { color: var(--text-3); }
.status-icon[data-status="queued"] { color: var(--neutral-text); }
.status-icon[data-status="running"] { color: var(--accent-text); }
.status-icon[data-status="succeeded"] { color: var(--success-text); }
.status-icon[data-status="failed"],
.status-icon[data-status="failed_validation"] { color: var(--danger-text); }
.status-icon[data-status="waiting_approval"] { color: var(--warning-text); }

/* ======================================================================
   Progress
   ====================================================================== */

/* <div class="progress" data-progress="42" role="progressbar" ...><span class="progress__fill"></span></div>
   JS (lib/progress.js) copies data-progress into --progress. Tone follows data-tone (default accent). */
.progress {
  position: relative;
  display: block;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--tone-track);
  overflow: hidden;
}

.progress-xs { height: 4px; }
.progress-lg { height: 8px; }

.progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  border-radius: inherit;
  background: var(--tone-solid);
  transition: width var(--dur-slower) var(--ease-out);
}

/* Running: a slow sheen travels along the filled part so live work never looks frozen. */
.progress[data-state="running"] .progress__fill { overflow: hidden; }

.progress[data-state="running"] .progress__fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.38) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: progress-sheen 1.8s var(--ease-in-out) infinite;
  will-change: transform;
}

/* Transform-only animation: composited, no repaint per frame. */
@keyframes progress-sheen {
  from { transform: translateX(-100%); }
  to { transform: translateX(260%); }
}

.progress[data-indeterminate] .progress__fill {
  width: 38%;
  animation: progress-indeterminate 1.5s var(--ease-in-out) infinite;
}

@keyframes progress-indeterminate {
  from { left: -40%; }
  to { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .progress[data-state="running"] .progress__fill::after { animation: none; }
  .progress[data-indeterminate] .progress__fill {
    left: 0;
    width: 100%;
    opacity: 0.45;
    animation: none;
  }
}

.progress-block { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }

.progress-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.progress-block__label {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
  font-weight: var(--weight-medium);
  color: var(--text);
}

.progress-block__pct { color: var(--text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

.progress-block__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.progress-block__eta,
.progress-block__cost { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.progress-block__eta .icon,
.progress-block__cost .icon { width: 13px; height: 13px; }
.progress-block__cost strong { color: var(--text-2); font-weight: var(--weight-medium); }

/* Ring (small inline meter for cards, 0–100 via --progress) */
.progress-ring {
  --size: 36px;
  width: var(--size);
  height: var(--size);
  border-radius: var(--radius-full);
  background: conic-gradient(var(--tone-solid) var(--progress, 0%), var(--tone-track) 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
}

/* ======================================================================
   Progress tree (job hierarchy). Phase 2 adds live data + virtualization.
   Flat rows with data-depth / data-parent so it can be windowed later.
   ====================================================================== */

.ptree {
  --ptree-cols: minmax(240px, 1fr) minmax(72px, 150px) 44px 56px 128px 64px 60px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  font-size: var(--text-sm);
}

.ptree__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}

.ptree__head,
.ptree__row {
  display: grid;
  grid-template-columns: var(--ptree-cols);
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3);
}

.ptree__head {
  height: 32px;
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.ptree__row {
  min-height: 40px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--dur-instant);
}

.ptree__row:last-child { border-bottom: 0; }
.ptree__row:hover { background: var(--bg-hover); }
.ptree__row:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }

.ptree__row[data-depth="0"] { background: var(--bg-surface-2); font-weight: var(--weight-semibold); }
.ptree__row[data-depth="0"]:hover { background: var(--bg-hover); }

.ptree__row[data-depth="1"] { --depth: 1; }
.ptree__row[data-depth="2"] { --depth: 2; }
.ptree__row[data-depth="3"] { --depth: 3; }
.ptree__row[data-depth="4"] { --depth: 4; }
.ptree__row[data-depth="5"] { --depth: 5; }

.ptree__label {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
  padding: var(--space-2) 0 var(--space-2) calc(var(--depth, 0) * 18px);
}

.ptree__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-3);
}

.ptree__toggle:hover { background: var(--bg-active); color: var(--text); }
.ptree__toggle .icon { width: 14px; height: 14px; stroke-width: 2.2; transition: rotate var(--dur) var(--ease-standard); }
.ptree__toggle[aria-expanded="true"] .icon { rotate: 90deg; }
.ptree__toggle-spacer { flex: 0 0 auto; width: 20px; }

.ptree__name { display: flex; flex-direction: column; min-width: 0; }
.ptree__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.ptree__row:not([data-depth="0"]) .ptree__title { font-weight: var(--weight-regular); }
.ptree__error { font-size: var(--text-xs); color: var(--danger-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-regular); }
.ptree__count { font-size: var(--text-xs); color: var(--text-3); font-weight: var(--weight-regular); }

.ptree__pct,
.ptree__elapsed,
.ptree__cost { font-variant-numeric: tabular-nums; text-align: right; color: var(--text-2); font-weight: var(--weight-regular); }
.ptree__pct { color: var(--text); font-weight: var(--weight-medium); }
.ptree__eta { font-size: var(--text-xs); color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: var(--weight-regular); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptree__head > :nth-child(3),
.ptree__head > :nth-child(4),
.ptree__head > :nth-child(6) { text-align: right; }
.ptree__actions { display: flex; justify-content: flex-end; gap: 2px; }

.ptree__row[data-status="failed"] .progress { --tone-solid: var(--danger); --tone-track: var(--danger-track); }
.ptree__row[data-status="succeeded"] .progress { --tone-solid: var(--success); --tone-track: var(--success-track); }
.ptree__row[data-status="waiting_approval"] .progress { --tone-solid: var(--warning); --tone-track: var(--warning-track); }
.ptree__row[data-status="pending"] .progress,
.ptree__row[data-status="queued"] .progress,
.ptree__row[data-status="cancelled"] .progress,
.ptree__row[data-status="skipped"] .progress { --tone-solid: var(--text-disabled); --tone-track: var(--bg-active); }
.ptree__row[data-status="cancelled"] .ptree__title,
.ptree__row[data-status="skipped"] .ptree__title { color: var(--text-3); }

.ptree__row .ptree__actions .btn { opacity: 0; }
.ptree__row:hover .ptree__actions .btn,
.ptree__row:focus-within .ptree__actions .btn,
.ptree__row[data-status="failed"] .ptree__actions .btn { opacity: 1; }

.ptree__footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--bg-surface-2);
  font-size: var(--text-xs);
  color: var(--text-3);
}

@media (max-width: 1100px) {
  .ptree { --ptree-cols: minmax(180px, 1fr) minmax(64px, 120px) 44px 128px 60px; }
  .ptree__elapsed, .ptree__cost,
  .ptree__head > :nth-child(4), .ptree__head > :nth-child(6) { display: none; }
}

/* ======================================================================
   Tabs & segmented control
   ====================================================================== */

.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  height: 38px;
  padding: 0 var(--space-2-5);
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: color var(--dur-fast);
}

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

.tab::after {
  content: "";
  position: absolute;
  left: var(--space-1-5);
  right: var(--space-1-5);
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background-color var(--dur-fast);
}

.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"]::after { background: var(--accent); }
.tab:focus-visible { outline-offset: -4px; }
.tab .badge { height: 18px; }

.tab-panel { padding-top: var(--space-4); }
.tab-panel:focus-visible { outline-offset: 4px; }

.segmented {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
}

.segmented__option { position: relative; display: inline-flex; }

.segmented__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.segmented__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  height: 26px;
  padding: 0 var(--space-2-5);
  border-radius: var(--radius-sm);
  color: var(--text-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}

.segmented__label .icon { width: 14px; height: 14px; }
.segmented__label:hover { color: var(--text); }

.segmented__option input:checked + .segmented__label {
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--border);
}

.segmented__option input:focus-visible + .segmented__label { box-shadow: var(--focus-ring); }

/* ======================================================================
   Modal & drawer (native <dialog>, wired by lib/modal.js and lib/drawer.js)
   ====================================================================== */

.modal,
.drawer {
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: var(--shadow-xl);
}

.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 64px));
  border-radius: var(--radius-xl);
  overflow: hidden;
  flex-direction: column;
}

.modal:focus,
.drawer:focus { outline: none; }

.modal[open] { display: flex; animation: modal-in var(--dur-slow) var(--ease-out); }
.modal.is-closing { animation: modal-out var(--dur) var(--ease-standard) forwards; }
.modal-sm { width: min(420px, calc(100vw - 32px)); }
.modal-lg { width: min(760px, calc(100vw - 32px)); }

.modal::backdrop,
.drawer::backdrop {
  background: var(--bg-overlay);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fade-in var(--dur-slow) var(--ease-out);
}

.modal.is-closing::backdrop,
.drawer.is-closing::backdrop { animation: fade-out var(--dur) var(--ease-standard) forwards; }

@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(4px) scale(0.985); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

.modal__header,
.drawer__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-3);
}

.modal__title,
.drawer__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.modal__subtitle,
.drawer__subtitle { margin-top: 2px; color: var(--text-3); font-size: var(--text-sm); }
.modal__close,
.drawer__close { margin: -6px -8px 0 auto; }

.modal__body,
.drawer__body {
  flex: 1 1 auto;
  padding: var(--space-2) var(--space-5) var(--space-5);
  overflow-y: auto;
  color: var(--text-2);
}

.modal__footer,
.drawer__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
}

.modal__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--tone-bg, var(--accent-soft));
  color: var(--tone-fg, var(--accent-text));
}

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(var(--drawer-w, 440px), 100vw);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  border-width: 0 0 0 1px;
  border-radius: 0;
  flex-direction: column;
}

.drawer[open] { display: flex; animation: drawer-in var(--dur-slow) var(--ease-out); }
.drawer.is-closing { animation: drawer-out var(--dur) var(--ease-standard) forwards; }
.drawer__header { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-4); }
.drawer__body { padding-top: var(--space-4); }

@keyframes drawer-in { from { transform: translateX(32px); opacity: 0; } }
@keyframes drawer-out { to { transform: translateX(24px); opacity: 0; } }

/* Shortcut help list (inside a modal) */
.shortcut-list { display: flex; flex-direction: column; gap: var(--space-4); }
.shortcut-group__title { margin-bottom: var(--space-1-5); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1-5) 0; border-bottom: 1px solid var(--border-subtle); color: var(--text); }
.shortcut-row:last-child { border-bottom: 0; }
.shortcut-keys { display: inline-flex; align-items: center; gap: 3px; color: var(--text-3); font-size: var(--text-2xs); }

/* ======================================================================
   Toasts
   ====================================================================== */

.toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--statusbar-h) + var(--space-3));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.minimal .toast-region { bottom: var(--space-4); }

.toast {
  --tone-fg: var(--info-text);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  overflow: hidden;
  pointer-events: auto;
  animation: toast-in var(--dur-slow) var(--ease-out);
}

.toast.is-leaving { animation: toast-out var(--dur) var(--ease-standard) forwards; }

@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }

.toast[data-type="success"] { --tone-fg: var(--success-text); --tone-solid: var(--success); }
.toast[data-type="error"] { --tone-fg: var(--danger-text); --tone-solid: var(--danger); }
.toast[data-type="warning"] { --tone-fg: var(--warning-text); --tone-solid: var(--warning); }
.toast[data-type="info"] { --tone-fg: var(--info-text); --tone-solid: var(--info); }

.toast__icon { flex: 0 0 auto; margin-top: 1px; color: var(--tone-fg); }
.toast__icon .icon { width: 18px; height: 18px; stroke-width: 2; }
.toast__content { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.toast__title { font-weight: var(--weight-semibold); }
.toast__message { color: var(--text-2); overflow-wrap: anywhere; }
.toast__title + .toast__message { font-size: var(--text-xs); }
.toast__close { margin: -4px -4px 0 0; }

.toast__timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--tone-solid, var(--accent));
  opacity: 0.55;
  transform-origin: left;
  animation: toast-timer var(--toast-duration, 5s) linear forwards;
}

.toast:hover .toast__timer,
.toast:focus-within .toast__timer { animation-play-state: paused; }

@keyframes toast-timer { to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .toast__timer { display: none; }
}

/* Server-rendered flashes are hidden until JS turns them into toasts (no flash of raw markup);
   <noscript> users see them via .flash-fallback. */
.flash-source { display: none; }

/* ======================================================================
   Dropdown menu
   ====================================================================== */

.dropdown { position: relative; display: inline-flex; }

.menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-width: 320px;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  transform-origin: top left;
  animation: menu-in var(--dur) var(--ease-out);
}

.menu[data-align="end"] { left: auto; right: 0; transform-origin: top right; }
.menu[data-side="top"] { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }

@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }

.menu__header {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2) var(--space-2) var(--space-2-5);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
}

.menu__label {
  padding: var(--space-1-5) var(--space-2) var(--space-1);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: 32px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.menu__item .icon { color: var(--text-3); }
.menu__item:hover,
.menu__item:focus-visible { background: var(--bg-hover); text-decoration: none; color: var(--text); outline: none; }
.menu__item:focus-visible { box-shadow: var(--focus-ring-inset); }
.menu__item[aria-disabled="true"] { color: var(--text-disabled); cursor: default; }
.menu__item[aria-disabled="true"]:hover { background: transparent; }
.menu__item-danger { color: var(--danger-text); }
.menu__item-danger .icon { color: var(--danger-text); }
.menu__item-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.menu__item-meta { margin-left: auto; display: inline-flex; gap: 3px; color: var(--text-3); font-size: var(--text-xs); }
.menu__check { visibility: hidden; margin-left: auto; color: var(--accent-text) !important; }
.menu__item[aria-checked="true"] .menu__check { visibility: visible; }
.menu__sep { height: 1px; margin: var(--space-1) calc(var(--space-1) * -1); background: var(--border-subtle); border: 0; }
.menu form { display: contents; }

.menu__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  color: var(--text-3);
  font-size: var(--text-xs);
  white-space: normal;
}

.menu__empty .icon { width: 20px; height: 20px; color: var(--text-disabled); }
.menu__empty strong { color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-medium); }

.menu-wide { width: 320px; }

/* ======================================================================
   Tooltip (single floating element managed by lib/tooltip.js)
   ====================================================================== */

.tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-tooltip);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 280px;
  padding: 5px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg-inverse);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.tooltip[data-visible="true"] { opacity: 1; }

.tooltip .kbd {
  background: color-mix(in srgb, var(--text-inverse) 14%, transparent);
  border-color: color-mix(in srgb, var(--text-inverse) 22%, transparent);
  color: var(--text-inverse);
  box-shadow: none;
}

/* ======================================================================
   Skeleton loaders
   ====================================================================== */

.skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--bg-surface) 70%, transparent) 50%, transparent 100%) 0 0 / 50% 100% no-repeat,
    var(--bg-active);
  animation: skeleton-sweep 1.4s var(--ease-in-out) infinite;
}

.skeleton-text { height: 10px; margin: 4px 0; }
.skeleton-title { height: 16px; width: 40%; }
.skeleton-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); }
.skeleton-thumb { aspect-ratio: 16 / 9; border-radius: var(--radius-md); }
.skeleton-block { height: 72px; border-radius: var(--radius-md); }
.skeleton.w-25 { width: 25%; }
.skeleton.w-40 { width: 40%; }
.skeleton.w-60 { width: 60%; }
.skeleton.w-80 { width: 80%; }

@keyframes skeleton-sweep {
  from { background-position: -100% 0, 0 0; }
  to { background-position: 200% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--bg-active); }
}

/* ======================================================================
   Empty state
   ====================================================================== */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.empty-sm { padding: var(--space-8) var(--space-4); gap: var(--space-2); }

.empty__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%);
  border: 1px solid var(--border);
  color: var(--text-2);
  box-shadow: var(--shadow-sm), var(--highlight);
}

.empty__icon .icon { width: 22px; height: 22px; stroke-width: 1.6; }
.empty-sm .empty__icon { width: 36px; height: 36px; border-radius: var(--radius-md); }
.empty-sm .empty__icon .icon { width: 18px; height: 18px; }
.empty__icon[data-tone] { background: var(--tone-bg); border-color: var(--tone-border); color: var(--tone-fg); }

.empty__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text); letter-spacing: var(--tracking-tight); }
.empty-sm .empty__title { font-size: var(--text-sm); }
.empty__text { max-width: 48ch; color: var(--text-2); }
.empty-sm .empty__text { font-size: var(--text-xs); color: var(--text-3); }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }
.empty__hint { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-xs); color: var(--text-3); }

/* ======================================================================
   Keyboard hint, avatar, user chip, breadcrumb
   ====================================================================== */

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-surface);
  box-shadow: inset 0 -1px 0 var(--border);
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.kbd-group { display: inline-flex; align-items: center; gap: 3px; }

.avatar {
  --size: 28px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--size);
  height: var(--size);
  border-radius: var(--radius-full);
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 22%, var(--bg-surface)) 0%, var(--accent-soft) 100%);
  color: var(--accent-text);
  font-size: calc(var(--size) * 0.38);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px var(--accent-border);
  user-select: none;
}

.avatar-sm { --size: 22px; }
.avatar-lg { --size: 40px; }

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-2) 0 3px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text);
  font-weight: var(--weight-medium);
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}

.user-chip:hover,
.user-chip[aria-expanded="true"] { background: var(--bg-hover); border-color: var(--border); }
.user-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.user-chip .icon { width: 14px; height: 14px; color: var(--text-3); }
.user-chip__text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.user-chip__name { font-size: var(--text-sm); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip__meta { font-size: var(--text-2xs); color: var(--text-3); font-weight: var(--weight-regular); }

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5);
  list-style: none;
  font-size: var(--text-xs);
  color: var(--text-3);
}

.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.breadcrumb li + li::before { content: "/"; color: var(--text-disabled); }
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--text); text-decoration: none; }
.breadcrumb [aria-current="page"] { color: var(--text-2); font-weight: var(--weight-medium); }

/* ======================================================================
   Callouts
   ====================================================================== */

.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-3-5, 14px);
  border: 1px solid var(--tone-border);
  border-radius: var(--radius-md);
  background: var(--tone-bg);
  color: var(--text);
}

.callout__icon { flex: 0 0 auto; color: var(--tone-fg); margin-top: 1px; }
.callout__icon .icon { width: 16px; height: 16px; stroke-width: 2; }
.callout__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.callout__title { font-weight: var(--weight-semibold); color: var(--text); }
.callout__text { color: var(--text-2); }
.callout__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.callout code { padding: 1px 4px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--tone-fg) 10%, transparent); color: var(--text); }

/* ======================================================================
   Key-value list, stat tile, code block, save indicator, misc
   ====================================================================== */

.kv {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  column-gap: var(--space-6);
}

.kv dt,
.kv dd {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.kv dt { color: var(--text-3); }
.kv dd { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.kv dt:last-of-type,
.kv dd:last-of-type { border-bottom: 0; }

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  min-width: 0;
}

.stat__label {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--text-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.stat__label .icon { width: 14px; height: 14px; }

.stat__value {
  margin-top: var(--space-1);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.1;
  color: var(--text);
}

.stat__value-muted { color: var(--text-disabled); }
.stat__unit { margin-left: 2px; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--text-3); letter-spacing: 0; }
.stat__meta { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-xs); color: var(--text-3); min-height: 20px; }

.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.delta[data-direction="good"] { color: var(--success-text); }
.delta[data-direction="bad"] { color: var(--danger-text); }
.delta .icon { width: 12px; height: 12px; stroke-width: 2.2; }

.code-block {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text);
}

.code-block code { flex: 1 1 auto; font-size: inherit; overflow-x: auto; white-space: pre; padding: 4px 0; }

.code-inline {
  padding: 1px 5px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--bg-sunken);
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--text);
}

.save-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  height: 24px;
  font-size: var(--text-xs);
  color: var(--text-3);
  font-weight: var(--weight-medium);
}

.save-indicator .icon { width: 14px; height: 14px; }
.save-indicator[data-state="idle"] { visibility: hidden; }
.save-indicator[data-state="saved"] .icon { color: var(--success-text); }
.save-indicator[data-state="error"] { color: var(--danger-text); }

.divider { height: 1px; background: var(--border); border: 0; margin: var(--space-4) 0; }

.dot-sep { color: var(--text-disabled); padding: 0 var(--space-1); }

.list-rows { display: flex; flex-direction: column; }

.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--dur-instant);
}

.list-row:first-child { border-top: 0; }
a.list-row:hover { background: var(--bg-hover); text-decoration: none; }
a.list-row:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
.list-row:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.list-row__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.list-row__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.list-row__title { font-weight: var(--weight-medium); }
.list-row__meta { font-size: var(--text-xs); color: var(--text-3); }
.list-row__end { margin-left: auto; color: var(--text-3); display: inline-flex; align-items: center; gap: var(--space-2); }

/* Windows high contrast / forced colors: keep borders and focus visible. */
@media (forced-colors: active) {
  .btn, .input, .select, .textarea, .card, .pill, .badge, .progress { border: 1px solid CanvasText; }
  .progress__fill { background: Highlight; }
  :focus-visible { outline: 2px solid Highlight; }
}

/* ======================================================================
   Live connection indicator (lib/live.js)
   ====================================================================== */

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  height: 26px;
  padding: 0 var(--space-2-5) 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.live-indicator__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--text-disabled);
}

.live-indicator[data-state="live"] { color: var(--success-text); border-color: var(--success-border); background: var(--success-soft); }
.live-indicator[data-state="live"] .live-indicator__dot { background: var(--success); animation: live-pulse 2s var(--ease-in-out) infinite; }
.live-indicator[data-state="connecting"] .live-indicator__dot,
.live-indicator[data-state="reconnecting"] .live-indicator__dot { background: var(--warning); animation: live-blink 1s steps(2, start) infinite; }
.live-indicator[data-state="reconnecting"] { color: var(--warning-text); border-color: var(--warning-border); background: var(--warning-soft); }
.live-indicator[data-state="polling"] { color: var(--info-text); border-color: var(--info-border); background: var(--info-soft); }
.live-indicator[data-state="polling"] .live-indicator__dot { background: var(--info); }
.live-indicator[data-state="offline"] { color: var(--danger-text); border-color: var(--danger-border); background: var(--danger-soft); }
.live-indicator[data-state="offline"] .live-indicator__dot { background: var(--danger); }
.live-indicator[data-state="paused"] .live-indicator__dot { background: var(--text-3); }
.live-indicator[data-state="idle"] { display: none; }

.live-indicator-sm { height: 20px; padding: 0 6px; border-color: transparent; background: transparent; }
.live-indicator-sm .live-indicator__text { display: none; }
.live-indicator-sm[data-state] { background: transparent; border-color: transparent; }

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 45%, transparent); }
  60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 0%, transparent); }
}

@keyframes live-blink { to { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .live-indicator__dot { animation: none !important; }
}

/* ======================================================================
   Live, virtualized progress tree (lib/progress-tree.js)
   ====================================================================== */

.ptree-live { border: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: none; }
.ptree-live .ptree__toolbar { flex-wrap: wrap; padding: var(--space-2-5) var(--space-4); }
.ptree-live .ptree__toolbar .badge { height: 16px; padding: 0 5px; margin-left: 2px; }
.ptree-live .ptree__head,
.ptree-live .ptree__row { padding: 0 var(--space-4); }

.ptree__search { position: relative; flex: 0 1 260px; min-width: 160px; }
.ptree__search .icon { position: absolute; left: 9px; top: 50%; translate: 0 -50%; width: 14px; height: 14px; color: var(--text-3); pointer-events: none; }
.ptree__search .input { padding-left: 28px; }

.ptree__viewport {
  position: relative;
  height: var(--ptree-height, clamp(360px, 62vh, 760px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: var(--bg-surface);
}

.ptree__viewport:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }

.ptree-live .ptree__head {
  position: sticky;
  top: 0;
  z-index: 2;
}

.ptree__canvas { position: relative; contain: layout style; }

.ptree__row.is-virtual {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  min-height: 0;
  contain: layout style;
  will-change: transform;
}

.ptree__row.is-virtual[hidden] { display: none; }
.ptree-live .ptree__row[data-depth="0"] { background: var(--bg-surface-2); }
.ptree-live .ptree__label { padding-top: 0; padding-bottom: 0; height: 40px; }
.ptree__title-line { display: flex; align-items: baseline; gap: var(--space-1-5); min-width: 0; }
.ptree-live .ptree__title { flex: 0 1 auto; }
.ptree-live .ptree__count { flex: 0 0 auto; }
.ptree-live .ptree__error { line-height: 14px; }

.ptree__row.is-active { background: var(--bg-selected); box-shadow: inset 2px 0 0 var(--accent); }
.ptree__row.is-active:hover { background: var(--bg-selected); }
.ptree__viewport:focus-visible .ptree__row.is-active { box-shadow: inset 2px 0 0 var(--accent), var(--focus-ring-inset); }

.ptree__row.is-highlight { animation: row-highlight 3.4s var(--ease-out); }

@keyframes row-highlight {
  0%, 30% { background: color-mix(in srgb, var(--warning) 22%, var(--bg-surface)); }
  100% { background: transparent; }
}

.ptree__row[data-status="failed"],
.ptree__row[data-status="failed_validation"] { background: color-mix(in srgb, var(--danger-soft) 70%, transparent); }
.ptree__row[data-status="failed"] .ptree__title,
.ptree__row[data-status="failed_validation"] .ptree__title { color: var(--danger-text); }
.ptree__row[data-status="waiting"] .progress { --tone-solid: var(--text-disabled); --tone-track: var(--bg-active); }
.ptree__row[data-status="failed_validation"] .progress { --tone-solid: var(--danger); --tone-track: var(--danger-track); }

.ptree-live .ptree__actions .btn { opacity: 0; }
.ptree-live .ptree__row:hover .ptree__actions .btn,
.ptree-live .ptree__row.is-active .ptree__actions .btn,
.ptree-live .ptree__row[data-status="failed"] .ptree__btn-retry,
.ptree-live .ptree__row[data-status="failed_validation"] .ptree__btn-retry { opacity: 1; }
.ptree-live .ptree__actions .btn[hidden] { display: none; }

.ptree-live { --ptree-cols: minmax(260px, 1fr) minmax(80px, 160px) 52px 64px minmax(110px, 150px) 72px 92px; }

.ptree__loading { position: absolute; inset: 37px 0 0; display: flex; flex-direction: column; background: var(--bg-surface); }
.ptree__skeleton-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: var(--space-6); align-items: center; height: 40px; padding: 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.ptree__empty { position: absolute; inset: 37px 0 0; display: grid; place-items: center; }
.ptree__keys { display: inline-flex; align-items: center; gap: 3px; }
.ptree__keys .kbd { min-width: 16px; height: 16px; font-size: 10px; }

@media (max-width: 1100px) {
  .ptree-live { --ptree-cols: minmax(200px, 1fr) minmax(64px, 110px) 48px minmax(100px, 130px) 84px; }
  .ptree__keys { display: none; }
}

/* ======================================================================
   Root rows (activity panel, dashboard card)
   ====================================================================== */

.root-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 48px minmax(84px, max-content);
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--dur-fast);
}

.root-row:hover { background: var(--bg-hover); text-decoration: none; color: var(--text); }
.root-row:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
.root-row__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.root-row__title { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; font-weight: var(--weight-medium); }
.root-row__title .badge { height: 16px; padding: 0 5px; font-size: 10px; }
.root-row__pct { text-align: right; font-weight: var(--weight-semibold); font-size: var(--text-xs); }
.root-row__eta { font-size: var(--text-xs); color: var(--text-3); text-align: right; white-space: nowrap; }
.root-row[data-status="succeeded"] .root-row__eta { color: var(--success-text); }
.root-row[data-status="failed"] .root-row__eta,
.root-row[data-status="failed_validation"] .root-row__eta { color: var(--danger-text); }
.root-row.is-flash { animation: root-flash 1.2s var(--ease-in-out) 3; }

@keyframes root-flash {
  50% { background: color-mix(in srgb, var(--accent) 14%, transparent); }
}

/* ======================================================================
   JSON block, log list, notification list
   ====================================================================== */

.json-block { position: relative; }

.json-block pre {
  max-height: 320px;
  padding: var(--space-3) var(--space-10) var(--space-3) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  overflow: auto;
  white-space: pre;
  color: var(--text);
}

.json-block__copy { position: absolute; top: 6px; right: 6px; }
.json-key { color: var(--accent-text); }
.json-string { color: var(--success-text); }
.json-number { color: var(--warning-text); }
.json-literal { color: var(--info-text); }

.log-list {
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow-y: auto;
  list-style: none;
  font-size: var(--text-xs);
}

.log-list-compact { max-height: 280px; border: 1px solid var(--border); border-radius: var(--radius-md); }

.log-line {
  display: grid;
  grid-template-columns: 64px 18px minmax(0, 1fr) minmax(0, max-content);
  align-items: baseline;
  gap: var(--space-2);
  padding: 6px var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-2);
}

.log-list-compact .log-line { padding: 5px var(--space-3); }
.log-line:last-child { border-bottom: 0; }
.log-line__time { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; }
.log-line__level { align-self: center; display: inline-flex; color: var(--info-text); }
.log-line__level .icon { width: 13px; height: 13px; }
.log-line[data-level="warning"] .log-line__level { color: var(--warning-text); }
.log-line[data-level="error"] .log-line__level { color: var(--danger-text); }
.log-line[data-level="error"] .log-line__message { color: var(--danger-text); }
.log-line[data-level="debug"] { opacity: 0.75; }
.log-line__message { color: var(--text); overflow-wrap: anywhere; }
.log-line__job { max-width: 280px; color: var(--text-3); text-align: right; }
.log-line.is-link { cursor: pointer; }
.log-line.is-link:hover { background: var(--bg-hover); }
.log-line.is-link:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
.log-line.is-new { animation: log-in var(--dur-slow) var(--ease-out); }
.log-empty { padding: var(--space-6) var(--space-4); color: var(--text-3); text-align: center; }

@keyframes log-in { from { background: var(--accent-soft); } }

.notification-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.notification-item { height: auto; padding: var(--space-2); align-items: flex-start; }
.notification-item .status-icon { margin-top: 2px; }
.notification-item__text { display: flex; flex-direction: column; min-width: 0; gap: 1px; white-space: normal; }
.notification-item__title { font-weight: var(--weight-medium); }
.notification-item__meta { font-size: var(--text-xs); color: var(--text-3); }

/* Wide drawer for job details */
.drawer-wide { --drawer-w: 560px; }
.job-drawer__heading { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }
.job-drawer__heading .drawer__title { overflow-wrap: anywhere; }
.drawer__body { display: flex; flex-direction: column; gap: var(--space-5); }
.job-drawer__section { display: flex; flex-direction: column; gap: var(--space-2); }
.job-drawer__section-title { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.job-drawer__error-meta { margin-top: var(--space-1-5); }
.job-drawer__deps { display: flex; flex-wrap: wrap; gap: 2px; }
.job-drawer__dep { height: 22px; padding: 0 6px; font-size: 11px; }