/*
 * Automation admin view stylesheet (.aut-* prefix).
 *
 * Spec: .claude/specs/admin-tools-redesign/ Phase 2 sweep (2026-05-02).
 * Extracted from JS-injected `<style>` block in pwa/views/automation.js
 * (string array at lines ~38-134, ~98 rules). All `rgba(255,255,255,N)`
 * overlays → color-mix(in srgb, var(--color-on-surface) Nx100%, transparent);
 * `rgba(0,0,0,N)` → color-mix(in srgb, var(--color-on-surface-inverse,
 * black) Nx100%, transparent); error literals (#f44, #f88, rgba(244,67,54,
 * .12)) → var(--color-error)/color-mix tokens; #4caf50 → var(--color-success);
 * #fff → var(--color-on-primary).
 *
 * Step-type palette (12 step kinds + default) lives on :root so
 * automation.js reads them via getComputedStyle without owning hex
 * literals. Mirrors observability.js's chart-palette pattern.
 */

:root {
  --aut-step-click:       #42a5f5; /* blue — primary interaction */
  --aut-step-type:        #ab47bc; /* purple — text input */
  --aut-step-wait:        #78909c; /* slate — neutral wait */
  --aut-step-navigate:    #29b6f6; /* light blue — navigation */
  --aut-step-extract:     #66bb6a; /* green — data capture */
  --aut-step-confirm:     #ffa726; /* amber — caution/confirm */
  --aut-step-conditional: #ffca28; /* yellow — branch */
  --aut-step-loop:        #26a69a; /* teal — iteration */
  --aut-step-scroll:      #8d6e63; /* brown — scroll */
  --aut-step-screenshot:  #78909c; /* slate — capture */
  --aut-step-select:      #ab47bc; /* purple — pick */
  --aut-step-hover:       #42a5f5; /* blue — hover */
  --aut-step-default:     var(--color-on-surface-variant); /* gray — fallback */
}

.aut-section-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant, var(--hint));
  margin: 0 0 10px;
}
.aut-toolbar { display: flex; gap: var(--space-base); margin-bottom: var(--space-sm); flex-wrap: wrap; }
.aut-summary-banner {
  background: var(--color-surface-container, var(--bg2));
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  border-radius: var(--radius-roomy);
  padding: var(--space-roomy);
  margin-bottom: var(--space-roomy);
}
.aut-urgent {
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning) 28%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--color-warning) 70%, transparent);
  border-radius: var(--radius-roomy);
  padding: var(--space-sm);
  margin-bottom: var(--space-roomy);
}
.aut-urgent-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-snug);
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}
.aut-urgent-row:first-of-type { border-top: none; padding-top: 0; }
.aut-urgent-actions { display: flex; gap: var(--space-tight); flex-wrap: wrap; justify-content: flex-end; }
.aut-card {
  background: var(--color-surface-container, var(--bg2));
  border-radius: var(--radius-roomy);
  padding: var(--space-roomy);
  margin-bottom: var(--space-snug);
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}
.aut-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-snug);
}
.aut-card-title { font-size: 15px; font-weight: 700; color: var(--color-on-surface, var(--text)); }
.aut-card-sub { font-size: 12px; color: var(--color-on-surface-variant, var(--hint)); margin-top: var(--space-xs); line-height: 1.4; }
.aut-card-meta { display: flex; gap: var(--space-base); flex-wrap: wrap; margin-top: var(--space-snug); }
.aut-card-actions { display: flex; gap: var(--space-tight); flex-wrap: wrap; justify-content: flex-end; }
.aut-btn-primary {
  background: var(--color-primary, var(--btn));
  color: var(--color-on-primary, var(--btn-text));
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-default);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.aut-btn-secondary {
  background: none;
  border: 1px solid var(--color-on-surface-variant, var(--hint));
  color: var(--color-on-surface-variant, var(--hint));
  padding: 6px 12px;
  border-radius: var(--radius-default);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.aut-btn-danger {
  background: none;
  border: 1px solid var(--color-error);
  color: var(--color-error);
  padding: 6px 12px;
  border-radius: var(--radius-default);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.aut-run-status { font-size: 12px; font-weight: 700; text-transform: uppercase; }
.aut-run-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-base);
  margin-top: var(--space-snug);
}
.aut-run-metric {
  background: color-mix(in srgb, var(--color-on-surface) 3%, transparent);
  border-radius: var(--radius-snug);
  padding: var(--space-base);
}
.aut-run-metric .label {
  font-size: 10px;
  color: var(--color-on-surface-variant, var(--hint));
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: var(--space-xs);
}
.aut-run-metric .value {
  font-size: 13px;
  color: var(--color-on-surface, var(--text));
  font-weight: 600;
}
.aut-inline-help {
  font-size: 11px;
  color: var(--color-on-surface-variant, var(--hint));
  margin-top: var(--space-xs);
  line-height: 1.4;
}
.aut-run-mode { display: flex; gap: var(--space-base); margin-bottom: var(--space-sm); }
.aut-run-mode button {
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--radius-snug);
  border: 1px solid var(--color-on-surface-variant, var(--hint));
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface-variant, var(--hint));
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.aut-run-mode button.active {
  background: var(--color-primary, var(--btn));
  border-color: var(--color-primary, var(--btn));
  color: var(--color-on-primary, var(--btn-text));
}
.aut-flow-card {
  background: var(--color-surface-container, var(--bg2));
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  margin-bottom: var(--space-base);
}
.aut-audit-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}
.aut-audit-row:last-child { border-bottom: none; }
.aut-govern-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
.aut-session-card {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}
.aut-sch-modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-on-surface-inverse, black) 50%, transparent);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.aut-sch-modal-overlay.open { opacity: 1; pointer-events: auto; }
.aut-sch-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 90vh;
  background: var(--color-surface, var(--bg));
  border-radius: 16px 16px 0 0;
  padding: 20px 20px env(safe-area-inset-bottom, 20px);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  overflow-y: auto;
  z-index: 101;
}
.aut-sch-modal-overlay.open .aut-sch-modal { transform: translateY(0); }
.aut-sch-field { margin-bottom: var(--space-roomy); }
.aut-sch-field label {
  display: block;
  font-size: 12px;
  color: var(--color-on-surface-variant, var(--hint));
  margin-bottom: var(--space-xs);
  font-weight: 600;
}
.aut-sch-field input,
.aut-sch-field textarea,
.aut-sch-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-snug);
  border: 1.5px solid var(--color-on-surface-variant, var(--hint));
  font-size: 15px;
  outline: none;
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface, var(--text));
  box-sizing: border-box;
}
.aut-sch-field input:focus,
.aut-sch-field textarea:focus,
.aut-sch-field select:focus { border-color: var(--color-primary, var(--link)); }
.aut-sch-field textarea { min-height: 80px; resize: vertical; font-family: inherit; }
.aut-sch-row { display: flex; gap: var(--space-snug); }
.aut-sch-row .aut-sch-field { flex: 1; }
.aut-sch-types { display: flex; flex-wrap: wrap; gap: var(--space-tight); margin-bottom: var(--space-roomy); }
.aut-sch-type-btn {
  padding: 6px 14px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-on-surface-variant, var(--hint));
  font-size: 13px;
  cursor: pointer;
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface-variant, var(--hint));
  transition: all 0.15s;
}
.aut-sch-type-btn.active {
  background: var(--color-primary, var(--btn));
  color: var(--color-on-primary, var(--btn-text));
  border-color: var(--color-primary, var(--btn));
}
.aut-sch-days { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.aut-sch-day {
  width: 38px;
  height: 34px;
  border-radius: var(--radius-default);
  border: 1.5px solid var(--color-on-surface-variant, var(--hint));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface-variant, var(--hint));
  transition: all 0.15s;
}
.aut-sch-day.on {
  background: var(--color-primary, var(--btn));
  color: var(--color-on-primary, var(--btn-text));
  border-color: var(--color-primary, var(--btn));
}
.aut-sch-preview {
  background: var(--color-surface-container, var(--bg2));
  border-radius: var(--radius-snug);
  padding: 10px 12px;
  margin-bottom: var(--space-roomy);
  font-size: 12px;
  color: var(--color-on-surface-variant, var(--hint));
}
.aut-sch-preview .next { color: var(--color-on-surface, var(--text)); font-weight: 500; }
.aut-sch-actions { display: flex; gap: var(--space-snug); margin-top: var(--space-base); }
.aut-sch-btn {
  flex: 1;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.aut-sch-btn.cancel { background: var(--color-surface-container, var(--bg2)); color: var(--color-on-surface, var(--text)); }
.aut-sch-btn.save {
  background: var(--color-primary, var(--link));
  color: var(--color-on-primary);
}
.aut-sch-btn.save:disabled { opacity: 0.4; }
.aut-sch-cron-help {
  font-size: 11px;
  color: var(--color-on-surface-variant, var(--hint));
  margin-top: var(--space-xs);
  font-family: monospace;
}
.aut-sch-toggle {
  font-size: 12px;
  color: var(--color-primary, var(--link));
  cursor: pointer;
  margin-bottom: var(--space-snug);
  display: inline-block;
}

/* Recipe detail panel */
.aut-rd-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-on-surface-inverse, black) 50%, transparent);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.aut-rd-overlay.open { opacity: 1; pointer-events: auto; }
.aut-rd-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 92vh;
  background: var(--color-surface, var(--bg));
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 201;
  display: flex;
  flex-direction: column;
}
.aut-rd-overlay.open .aut-rd-panel { transform: translateY(0); }
.aut-rd-header { padding: 16px 16px 0; flex-shrink: 0; }
.aut-rd-tabs {
  display: flex;
  gap: var(--space-xs);
  padding: 12px 16px 0;
  flex-shrink: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent);
}
.aut-rd-tab {
  padding: 6px 14px 10px;
  border: none;
  font-size: 13px;
  cursor: pointer;
  background: none;
  color: var(--color-on-surface-variant, var(--hint));
  border-bottom: 2px solid transparent;
}
.aut-rd-tab.active { color: var(--color-on-surface, var(--text)); border-bottom-color: var(--color-primary, var(--link)); }
.aut-rd-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 40px;
}

/* Pipeline */
.aut-pipe-node { display: flex; align-items: flex-start; gap: var(--space-snug); margin-bottom: var(--space-hairline); position: relative; }
.aut-pipe-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-default);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.aut-pipe-info { flex: 1; padding: 4px 0 8px; }
.aut-pipe-line {
  position: absolute;
  left: var(--space-roomy);
  top: 28px;
  bottom: -2px;
  width: 2px;
  background: color-mix(in srgb, var(--color-on-surface) 10%, transparent);
}
.aut-pipe-type { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.aut-pipe-desc { font-size: 13px; color: var(--color-on-surface, var(--text)); margin-top: var(--space-hairline); }
.aut-pipe-detail {
  font-size: 11px;
  color: var(--color-on-surface-variant, var(--hint));
  margin-top: var(--space-hairline);
  font-family: monospace;
  word-break: break-all;
}
.aut-pipe-branch { margin-left: var(--space-wide); padding-left: var(--space-sm); border-left: 2px solid color-mix(in srgb, var(--color-on-surface) 15%, transparent); }
.aut-pipe-loop {
  margin-left: var(--space-wide);
  padding: 8px 0 8px 12px;
  border-left: 2px dashed color-mix(in srgb, var(--color-on-surface) 15%, transparent);
  margin-bottom: var(--space-xs);
}
.aut-pipe-done .aut-pipe-icon { box-shadow: 0 0 0 2px var(--color-success); }
.aut-pipe-fail .aut-pipe-icon { box-shadow: 0 0 0 2px var(--color-error); }

/* Run cards */
.aut-run-card { margin-bottom: var(--space-base); }
.aut-run-expand {
  padding: var(--space-sm);
  border-top: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  margin-top: var(--space-base);
}
.aut-run-err {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
  border-radius: var(--radius-default);
  padding: var(--space-snug);
  font-size: 12px;
  color: var(--color-error);
  margin-bottom: var(--space-snug);
  font-family: monospace;
  word-break: break-word;
  white-space: pre-wrap;
}

/* KV table */
.aut-kv-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: var(--space-snug); }
.aut-kv-table td {
  padding: 6px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}
.aut-kv-table td:first-child {
  color: var(--color-on-surface-variant, var(--hint));
  font-weight: 600;
  width: 35%;
  white-space: nowrap;
}

/* Config */
.aut-cfg-section { margin-bottom: var(--space-gutter); }
.aut-cfg-title { font-size: 13px; font-weight: 600; margin-bottom: var(--space-base); color: var(--color-on-surface, var(--text)); }

/* Insights */
.aut-insight-chips { display: flex; flex-wrap: wrap; gap: var(--space-tight); margin-bottom: var(--space-sm); }
.aut-insight-chip {
  padding: 4px 10px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 600;
  background: var(--color-surface, var(--bg));
  color: var(--color-on-surface-variant, var(--hint));
}

/* Versions */
.aut-ver-row {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}
.aut-ver-badge {
  background: var(--color-surface, var(--bg));
  padding: 2px 8px;
  border-radius: var(--radius-snug);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary, var(--link));
}
.aut-ver-btn {
  background: none;
  border: 1px solid var(--color-on-surface-variant, var(--hint));
  color: var(--color-on-surface-variant, var(--hint));
  padding: 3px 10px;
  border-radius: var(--radius-tight);
  font-size: 11px;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────
 * Phase 2 modifier classes — replace inline style="…" attrs.
 * Sites consolidated by frequency from the original 168 inline
 * sites in automation.js.
 * ───────────────────────────────────────────────────────────── */

.aut-shell-header   { padding: 16px 16px 0; flex-shrink: 0; }
.aut-shell-top      { display: flex; align-items: center; gap: var(--space-snug); margin-bottom: var(--space-sm); }
.aut-shell-back     { background: none; border: none; color: var(--color-on-surface, var(--text)); font-size: 20px; cursor: pointer; padding: var(--space-xs); }
.aut-shell-title    { font-size: 20px; font-weight: 700; color: var(--color-on-surface, var(--text)); }
.aut-spacer-flex    { flex: 1; }
.aut-shell-refresh  { background: none; border: none; color: var(--color-on-surface-variant, var(--hint)); font-size: 16px; cursor: pointer; padding: var(--space-xs); }
.aut-tabs-strip {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  padding-bottom: var(--space-base);
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent);
}
.aut-tabs-content {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 40px;
}

/* Fallback tab buttons (mountTabStrip absent) */
.aut-tab-fallback {
  padding: 6px 14px;
  border-radius: var(--radius-lg);
  border: none;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  margin-right: var(--space-tight);
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface-variant, var(--hint));
}
.aut-tab-fallback.active {
  background: var(--color-primary, var(--btn));
  color: var(--color-on-primary, var(--btn-text));
}

/* Repeating utility classes — common inline patterns */
.aut-meta-sm           { font-size: 11px; color: var(--color-on-surface-variant, var(--hint)); }
.aut-meta-sm-spaced    { font-size: 11px; color: var(--color-on-surface-variant, var(--hint)); margin-top: var(--space-hairline); }
.aut-meta-md           { font-size: 12px; color: var(--color-on-surface-variant, var(--hint)); }
.aut-meta-md-spaced    { font-size: 12px; color: var(--color-on-surface-variant, var(--hint)); margin-top: var(--space-hairline); }
.aut-text-md           { font-size: 13px; color: var(--color-on-surface, var(--text)); }
.aut-section-h         { font-size: 16px; font-weight: 700; color: var(--color-on-surface, var(--text)); }
.aut-section-h-bare    { margin: 0; font-size: 18px; }
.aut-empty-state       { text-align: center; color: var(--color-on-surface-variant, var(--hint)); padding: var(--space-lg); }
.aut-empty-state--sm   { text-align: center; color: var(--color-on-surface-variant, var(--hint)); padding: 30px; }
.aut-row-min0-flex     { min-width: 0; flex: 1; }
.aut-flex-1            { flex: 1; }
.aut-flex-1-min0       { flex: 1; min-width: 0; }
.aut-row-spacing       { margin-top: var(--space-snug); }
.aut-row-mb-16         { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-gutter); }
/* .aut-row-icon-gap shape covered by .base-row in pwa/styles/base.css.
   Markup composes class="base-row aut-row-icon-gap"; class kept as JS hook. */
.aut-row-flex-meta { flex-wrap: wrap; margin-bottom: var(--space-xs); }
.aut-row-jc-between    { display: flex; align-items: center; justify-content: space-between; }
.aut-color-error       { color: var(--color-error); }
.aut-color-hint        { color: var(--color-on-surface-variant, var(--hint)); }
/* .aut-hidden-init removed 2026-05-03 — markup migrated to global .hidden. */
.aut-translate-y0      { transform: translateY(0); }
.aut-word-break        { word-break: break-word; }
.aut-icon-btn-text {
  background: none;
  border: none;
  color: var(--color-on-surface, var(--text));
  font-size: 20px;
  cursor: pointer;
  padding: var(--space-xs);
}
.aut-icon-btn-hint {
  background: none;
  border: none;
  color: var(--color-on-surface-variant, var(--hint));
  font-size: 22px;
  cursor: pointer;
}
.aut-mini-btn {
  background: none;
  border: 1px solid var(--color-on-surface-variant, var(--hint));
  color: var(--color-on-surface-variant, var(--hint));
  padding: 3px 8px;
  border-radius: var(--radius-tight);
  font-size: 11px;
  cursor: pointer;
}

/* Status dot — color comes from inline CSS-var so JS can stamp the
   per-state hue without owning hex literals. */
.aut-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--aut-dot, var(--color-on-surface-variant));
  flex-shrink: 0;
}

/* Phase-2 long-tail utility classes (one-shot inline replacements). */
.aut-load-error          { color: var(--color-error); padding: var(--space-wide); text-align: center; }
.aut-import-label        { display: inline-flex; align-items: center; gap: var(--space-xs); }
.aut-needs-attn-banner   { display: flex; align-items: center; justify-content: space-between; gap: var(--space-snug); margin-bottom: var(--space-base); }
.aut-needs-attn-title    { margin-bottom: var(--space-xs); color: var(--color-warning); }
.aut-needs-attn-count    { font-weight: 700; color: var(--color-on-warning, var(--color-on-surface)); }
.aut-prompt-text         { font-size: 13px; color: var(--color-on-surface, var(--text)); line-height: 1.45; }
.aut-runs-back-row { margin-bottom: var(--space-sm); }
.aut-runs-back-btn       { background: none; border: none; color: var(--color-on-surface, var(--text)); font-size: 16px; cursor: pointer; }
.aut-runs-title          { font-weight: 600; }
.aut-runs-id-badge       { font-size: 11px; color: var(--color-on-surface-variant); font-weight: 500; font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.06em; }
.aut-runs-status-line    {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-snug);
}
.aut-runs-error          { margin-top: var(--space-snug); font-size: 12px; font-style: italic; color: var(--color-error); }
.aut-stat-grid-2         { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-base); margin-bottom: var(--space-gutter); }
.aut-stat-card { margin-bottom: var(--space-sm); }
.aut-stat-value-lg       { font-size: 20px; font-weight: 700; }
/* .aut-stat-tile migrated to .base-card-compact (pwa/styles/base.css) */
.aut-stat-tile-value     { font-size: 20px; font-weight: 700; color: var(--aut-stat-color, var(--color-on-surface)); }
.aut-perrecipe-title     { font-weight: 600; margin-bottom: var(--space-base); font-size: 14px; }
.aut-perrecipe-row       {
  background: var(--color-surface-container, var(--bg2));
  border-radius: var(--radius-default);
  padding: 10px 12px;
  margin-bottom: var(--space-tight);
}
.aut-progress-track {
  margin-top: var(--space-tight);
  background: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  border-radius: var(--radius-sm);
  height: 6px;
  overflow: hidden;
}
.aut-progress-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  width: var(--aut-bar-w, 0%);
  background: var(--aut-bar-color, var(--color-primary));
}
.aut-flow-evt-title-sm   { font-size: 14px; }
.aut-flow-evt-right-col  { text-align: right; flex-shrink: 0; }
.aut-flow-evt-time       { font-size: 12px; color: var(--color-on-surface, var(--text)); font-weight: 600; }
.aut-sch-card { margin-bottom: var(--space-base); }
.aut-sch-row-name        {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aut-sch-row-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-base);
  font-size: 11px;
  color: var(--color-on-surface-variant, var(--hint));
}
.aut-sch-actions-row     { display: flex; gap: var(--space-xs); }
.aut-sch-run-btn {
  background: var(--color-primary, var(--btn));
  color: var(--color-on-primary, var(--btn-text));
  border: none;
  padding: 3px 8px;
  border-radius: var(--radius-tight);
  font-size: 11px;
  cursor: pointer;
}
.aut-sch-delivery-badge {
  background: color-mix(in srgb, var(--color-on-surface) 8%, transparent);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
}
.aut-config-stack-mb     { margin-bottom: var(--space-gutter); }
.aut-config-row-mb       { margin-bottom: var(--space-sm); }
.aut-fw-600              { font-weight: 600; }
.aut-fw-600-mb           { font-weight: 600; margin-bottom: var(--space-xs); }
.aut-fw-400-faint        { font-weight: 400; opacity: 0.7; }
.aut-input-row {
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--radius-tight);
  border: 1px solid var(--color-on-surface-variant, var(--hint));
  font-size: 12px;
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface, var(--text));
  box-sizing: border-box;
  margin-bottom: var(--space-xs);
}
.aut-input-row--inline   { margin-bottom: 0; }
.aut-text-center-mt      { text-align: center; margin-top: var(--space-gutter); }
.aut-icon-stat           { font-size: 32px; margin-bottom: var(--space-sm); }
.aut-fs-24               { font-size: 24px; }
.aut-fs-17               { font-size: 17px; font-weight: 700; }
.aut-pad-action-sm       { padding: 3px 10px; font-size: 11px; }
.aut-mini-pill {
  padding: 2px 8px;
  border-radius: var(--radius-snug);
  font-size: 11px;
}
.aut-mini-pill--success {
  background: color-mix(in srgb, var(--color-success) 18%, transparent);
  color: var(--color-success);
}
.aut-mini-pill--warning {
  background: color-mix(in srgb, var(--color-warning) 18%, transparent);
  color: var(--color-warning);
}
.aut-error-divider       { margin-top: var(--space-base); padding-top: var(--space-base); border-top: 1px solid color-mix(in srgb, var(--color-error) 20%, transparent); }
.aut-margin-bottom-12    { margin-bottom: var(--space-sm); }
.aut-margin-bottom-16    { margin-bottom: var(--space-gutter); }
.aut-toggle-thumb {
  position: absolute;
  top: var(--space-hairline);
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-on-primary);
  transition: left 0.2s;
  left: var(--aut-toggle-x, 2px);
}
.aut-warning-meta        { margin-top: var(--space-snug); font-size: 12px; color: var(--color-warning); }
.aut-empty-pad           { padding: var(--space-lg); text-align: center; color: var(--color-on-surface-variant, var(--hint)); }

/* "+ New schedule" full-width pill */
.aut-new-sch-btn {
  background: var(--color-primary, var(--btn));
  color: var(--color-on-primary, var(--btn-text));
  border: none;
  padding: 10px 24px;
  border-radius: var(--radius-wide);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.aut-modal-close-btn {
  background: none;
  border: none;
  color: var(--color-on-surface-variant, var(--hint));
  font-size: 22px;
  cursor: pointer;
  padding: var(--space-xs);
}
.aut-modal-label {
  display: block;
  font-size: 12px;
  color: var(--color-on-surface-variant, var(--hint));
  margin-bottom: var(--space-tight);
  font-weight: 600;
}
.aut-modal-label-faint     { font-weight: 400; opacity: 0.7; }
.aut-preview-label         { font-weight: 600; margin-bottom: var(--space-xs); }
.aut-empty-block           { color: var(--color-on-surface-variant, var(--hint)); font-size: 13px; }
.aut-rd-loading            { text-align: center; padding: var(--space-lg); color: var(--color-on-surface-variant, var(--hint)); }
.aut-rd-error              { color: var(--color-error); padding: var(--space-wide); }
.aut-rd-name-row           { display: flex; align-items: center; gap: var(--space-snug); margin-bottom: var(--space-base); }
.aut-rd-name-title {
  font-size: 17px;
  font-weight: 700;
}
.aut-rd-pill-row { display: flex; gap: var(--space-tight); flex-wrap: wrap; }
.aut-rd-action-row { display: flex; gap: var(--space-tight); margin-top: var(--space-base); }

/* Pipeline THEN/ELSE/LOOP labels — semantic state colors */
.aut-pipe-then  { font-size: 11px; color: var(--color-warning); font-weight: 600; margin-bottom: var(--space-xs); }
.aut-pipe-else  { font-size: 11px; color: var(--color-error); font-weight: 600; margin-bottom: var(--space-xs); }
.aut-pipe-loop-lbl { font-size: 11px; color: var(--color-info, var(--color-tertiary)); font-weight: 600; margin-bottom: var(--space-xs); }

/* Pipeline node icon — color via CSS-var; tinted bg via color-mix */
.aut-pipe-node-icon {
  background: color-mix(in srgb, var(--aut-pipe-color, var(--color-primary)) 20%, transparent);
  color: var(--aut-pipe-color, var(--color-primary));
}
.aut-pipe-node-type-color { color: var(--aut-pipe-color, var(--color-primary)); }

/* Run row */
.aut-run-id-line          { font-size: 13px; font-weight: 600; }
.aut-run-cancel-pad       { padding: 3px 10px; font-size: 11px; }
.aut-run-toggle-arrow     { font-size: 14px; color: var(--color-on-surface-variant, var(--hint)); }
.aut-run-error-card {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
  border-radius: var(--radius-snug);
  padding: var(--space-sm);
  margin-bottom: var(--space-snug);
}
.aut-run-error-label      { font-size: 12px; font-weight: 700; color: var(--color-error); margin-bottom: var(--space-xs); }
.aut-run-error-msg        { font-size: 13px; color: color-mix(in srgb, var(--color-error) 70%, var(--color-on-surface)); word-break: break-word; }
.aut-run-error-step-row   { display: flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-xs); }
.aut-run-error-step-pill {
  color: var(--color-on-primary, white);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  background: var(--aut-step-color, var(--color-on-surface-variant));
}

/* Long-tail follow-up classes */
.aut-step-desc            { font-size: 12px; color: var(--color-on-surface, var(--text)); }
.aut-assertion-row {
  background: var(--color-surface, var(--bg));
  border-radius: var(--radius-default);
  padding: 8px 10px;
  margin-bottom: var(--space-tight);
  font-size: 12px;
}
.aut-assertion-type       { color: var(--color-primary, var(--link)); font-weight: 600; }
.aut-assertion-desc       { color: var(--color-on-surface-variant, var(--hint)); margin-top: var(--space-hairline); }
.aut-warn-banner {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  border-radius: var(--radius-default);
  padding: 8px 10px;
  margin-bottom: var(--space-tight);
  font-size: 12px;
  color: var(--color-warning);
}
.aut-current-pill         { background: color-mix(in srgb, var(--color-success) 18%, transparent); color: var(--color-success); }
.aut-tpl-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  text-align: left;
  padding: var(--space-roomy);
  margin-bottom: var(--space-base);
  background: var(--color-surface-container, var(--bg2));
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  border-radius: var(--radius-md);
  color: var(--color-on-surface, var(--text));
  cursor: pointer;
}
.aut-tpl-icon             { font-size: 24px; }
.aut-tpl-name             { font-size: 14px; font-weight: 700; }

.aut-add-param-btn {
  background: var(--color-primary, var(--btn));
  color: var(--color-on-primary, var(--btn-text));
  border: none;
  padding: 3px 10px;
  border-radius: var(--radius-tight);
  font-size: 11px;
  cursor: pointer;
}

.aut-edit-errors {
  display: none;
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
  border-radius: var(--radius-default);
  padding: var(--space-snug);
  margin-bottom: var(--space-sm);
  font-size: 12px;
  color: var(--color-error);
}
.aut-edit-actions         { display: flex; gap: var(--space-snug); margin-top: var(--space-gutter); }
.aut-edit-cancel,
.aut-edit-save {
  flex: 1;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.aut-edit-cancel {
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface, var(--text));
}
.aut-edit-save {
  background: var(--color-primary, var(--link));
  color: var(--color-on-primary);
}

.aut-step-builder-error   { color: var(--color-error); font-size: 13px; }
.aut-empty-line           { color: var(--color-on-surface-variant, var(--hint)); font-size: 12px; }
.aut-param-card {
  background: var(--color-surface, var(--bg));
  border-radius: var(--radius-default);
  padding: var(--space-snug);
  margin-bottom: var(--space-tight);
}
.aut-param-row            { display: flex; gap: var(--space-tight); margin-bottom: var(--space-tight); }
.aut-param-input,
.aut-param-select {
  padding: 6px 8px;
  border-radius: var(--radius-tight);
  border: 1px solid var(--color-on-surface-variant, var(--hint));
  font-size: 12px;
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface, var(--text));
}
.aut-param-input          { flex: 1; }
.aut-param-desc {
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--radius-tight);
  border: 1px solid var(--color-on-surface-variant, var(--hint));
  font-size: 12px;
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface, var(--text));
  box-sizing: border-box;
  margin-bottom: var(--space-xs);
}
.aut-param-remove-btn {
  background: none;
  border: none;
  color: var(--color-error);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
}
.aut-param-flags-row      { display: flex; gap: var(--space-sm); font-size: 11px; color: var(--color-on-surface-variant, var(--hint)); }

.aut-checkbox-row { margin-top: var(--space-tight); }

/* MCP tools section */
.aut-mcp-empty {
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-on-surface-variant, var(--hint));
}
.aut-mcp-empty-icon       { font-size: 32px; margin-bottom: var(--space-sm); }
.aut-mcp-empty-title      { font-size: 15px; font-weight: 600; margin-bottom: var(--space-tight); }
.aut-mcp-empty-body       { font-size: 13px; }
.aut-mcp-offline-row      { margin-top: var(--space-snug); font-size: 12px; color: var(--color-warning); }

.aut-mcp-warning-banner {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
  border-radius: var(--radius-snug);
  padding: 10px 12px;
  margin-bottom: var(--space-sm);
  font-size: 12px;
  color: var(--color-warning);
}
.aut-mcp-actions          { display: flex; gap: var(--space-tight); align-items: center; }
.aut-mcp-approve-all-btn  { font-size: 11px; padding: 4px 10px; }

.aut-mcp-tool-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent);
}
.aut-mcp-tool-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aut-mcp-tool-desc {
  font-size: 11px;
  color: var(--color-on-surface-variant, var(--hint));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aut-mcp-tool-actions     { display: flex; gap: var(--space-tight); align-items: center; flex-shrink: 0; margin-left: var(--space-base); }
.aut-mcp-risk-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--aut-risk-bg, color-mix(in srgb, var(--color-on-surface) 8%, transparent));
  color: var(--aut-risk-color, var(--color-on-surface));
}

/* MCP toggle switch */
.aut-mcp-toggle {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  background: var(--aut-toggle-bg, color-mix(in srgb, var(--color-on-surface) 18%, transparent));
}
.aut-mcp-toggle--on  { --aut-toggle-bg: var(--color-success); }
.aut-mcp-toggle--off { --aut-toggle-bg: color-mix(in srgb, var(--color-on-surface) 18%, transparent); }
.aut-mcp-toggle-thumb {
  position: absolute;
  top: var(--space-hairline);
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-on-primary, white);
  transition: left 0.2s;
  left: var(--aut-thumb-x, 2px);
}

/* ─── Timeline tab (automation-redesign 2026-05-13) ─────────────────────
   Mirrors the Bookings + Schedule Timeline pattern: hero + status filter
   chips + horizontal Gantt-style canvas with one row per recipe. Status
   colours go through M3 tokens so future palette tunes cascade. */
.auto-tl-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--space-roomy, 14px);
}
.auto-tl-caps {
  font-family: var(--font-label, var(--mono-data, ui-monospace, monospace));
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

/* Hero */
.auto-tl-hero {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}
.auto-tl-hero-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.auto-tl-hero-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.auto-tl-hero-title {
  font-family: var(--font-headline);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-on-surface);
  line-height: 1.15;
}
.auto-tl-hero-period {
  margin-top: 6px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.auto-tl-period-btn {
  height: 28px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.auto-tl-period-btn:hover {
  background: color-mix(in srgb, var(--color-on-surface) 4%, transparent);
  color: var(--color-on-surface);
}
.auto-tl-period-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.auto-tl-rule {
  width: 1px;
  align-self: stretch;
  background: var(--color-outline-variant);
}
.auto-tl-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 70px;
}
.auto-tl-mini-val {
  font-family: var(--mono-data, ui-monospace, monospace);
  font-size: 16px;
  color: var(--color-on-surface);
  font-variant-numeric: tabular-nums;
}
.auto-tl-hero-pill-slot { margin-left: auto; }

/* Controls */
.auto-tl-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.auto-tl-filters {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.auto-tl-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.auto-tl-filter:hover {
  background: color-mix(in srgb, var(--color-on-surface) 4%, transparent);
  color: var(--color-on-surface);
}
.auto-tl-filter.is-active {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
  color: var(--color-on-surface);
}
.auto-tl-filter-ct {
  font-size: 10px;
  color: var(--color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

/* Empty body */
.auto-tl-body { display: flex; flex-direction: column; gap: 14px; }
.auto-tl-empty {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: center;
}

/* Canvas */
.auto-tl-canvas {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.auto-tl-canvas-header {
  display: flex;
  border-bottom: 1px solid var(--color-outline-variant);
  background: color-mix(in srgb, var(--color-on-surface) 2%, transparent);
}
.auto-tl-row-gutter {
  width: 180px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-outline-variant);
}
.auto-tl-tick-row {
  flex: 1;
  position: relative;
  height: 28px;
}
.auto-tl-tick {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--color-on-surface-variant);
  white-space: nowrap;
}
.auto-tl-canvas-body {
  display: flex;
  flex-direction: column;
}
.auto-tl-row {
  display: flex;
  align-items: stretch;
  border-top: 1px dashed color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  min-height: 36px;
}
.auto-tl-row:first-child { border-top: none; }
.auto-tl-row-label {
  width: 180px;
  flex-shrink: 0;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-surface);
  border-right: 1px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-tl-row-track {
  flex: 1;
  position: relative;
  min-height: 36px;
}

/* Run blocks */
.auto-tl-block {
  position: absolute;
  top: 8px;
  bottom: 8px;
  background: color-mix(in srgb, var(--auto-tl-tone, var(--color-primary)) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--auto-tl-tone, var(--color-primary)) 50%, transparent);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  min-width: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.auto-tl-block:hover {
  border-color: var(--auto-tl-tone, var(--color-primary));
  filter: brightness(1.1);
}
.auto-tl-block.is-selected {
  border-color: var(--auto-tl-tone, var(--color-primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--auto-tl-tone, var(--color-primary)) 30%, transparent);
}
.auto-tl-block-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--auto-tl-tone, var(--color-primary));
}
.auto-tl-block--running { border-style: dashed; }
.auto-tl-block-pulse {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-warning) 30%, transparent);
  animation: autoTlPulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes autoTlPulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.6; }
}

/* Drawer */
.auto-tl-drawer {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.auto-tl-drawer-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--auto-tl-tone, var(--color-primary)) 8%, transparent),
    transparent
  );
}
.auto-tl-drawer-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--auto-tl-tone, var(--color-primary)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--auto-tl-tone, var(--color-primary)) 35%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--auto-tl-tone, var(--color-primary));
}
.auto-tl-drawer-titles { flex: 1; min-width: 0; }
.auto-tl-drawer-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  margin-top: 2px;
  color: var(--color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-tl-drawer-pill { display: inline-flex; align-items: center; }
.auto-tl-drawer-close {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auto-tl-drawer-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.auto-tl-drawer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.auto-tl-stat {
  background: color-mix(in srgb, var(--color-on-surface) 2.5%, transparent);
  border: 1px solid var(--color-outline-variant);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
.auto-tl-stat-val {
  font-family: var(--mono-data, ui-monospace, monospace);
  font-size: 14px;
  color: var(--color-on-surface);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-tl-drawer-error {
  margin-top: 4px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
  border-radius: 10px;
}
.auto-tl-drawer-error-body {
  font-family: var(--mono-data, ui-monospace, monospace);
  font-size: 11px;
  color: var(--color-on-surface);
  margin-top: 6px;
  white-space: pre-wrap;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .auto-tl-row-gutter, .auto-tl-row-label { width: 120px; }
  .auto-tl-drawer-stats { grid-template-columns: 1fr 1fr; }
}