/* ========== Armature design tokens ========== */
@font-face {
  font-family: 'Stack Sans Notch';
  src: url('/frontend/assets/fonts/StackSansNotch-VariableFont_wght.ttf') format('truetype-variations'),
       url('/frontend/assets/fonts/StackSansNotch-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces — warm bone tones (original light foundation) */
  --bg: #fbf9f7;
  --surface: #ffffff;
  --surface-2: #f6f2ef;
  --surface-3: #ede7e2;
  --hover: #f0ebe6;
  /* Paper kept as alias for elevated data surfaces */
  --paper: #ffffff;

  /* Borders — ink-derived, harder than warm-tone defaults */
  --ink-line: #090808;            /* hard ink — primary CTAs, modals, .window, run hero */
  --ink: var(--ink-line);         /* alias used by the /our-mcp design tokens */
  --on-ink: #f6f2ef;              /* warm cream for text on dark ink */
  --border: rgba(9, 8, 8, 0.14);
  --border-strong: rgba(9, 8, 8, 0.32);
  --border-soft: rgba(9, 8, 8, 0.07);

  /* Text — anchored on #090808 */
  --text: #090808;
  --text-2: #4a4644;
  --text-3: #807a76;
  --text-4: #b1aba5;

  /* Brand — brick / terra-cotta (use sparingly, 5–7% of surface) */
  --brand: #c8410d;
  --brand-2: #b3380a;
  --brand-soft: #fbe6dd;
  --brand-soft-border: #f3c8b4;

  /* Semantic — original soft tones, readable on near-white */
  --green: #1d7a4a;
  --green-soft: #e6f3eb;
  --green-soft-border: #c8e3d2;
  --red: #b3261e;
  --red-soft: #fbe9e7;
  --red-soft-border: #f3c9c5;
  --amber: #a86207;
  --amber-soft: #fbf0db;
  --amber-soft-border: #f0dcb0;
  --blue: #1f5da6;
  --blue-soft: #e7eff9;
  --blue-soft-border: #c9d8ef;
  --violet: #6c4ab3;
  --violet-soft: #efeaf8;

  /* Type */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Stack Sans Notch', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Layout */
  --sidebar-w: 190px;
  --sidebar-w-collapsed: 56px;
  --topbar-h: 52px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20, 16, 8, 0.04), 0 0 0 1px rgba(20, 16, 8, 0.04);
  --shadow-md: 0 2px 6px rgba(20, 16, 8, 0.06), 0 0 0 1px rgba(20, 16, 8, 0.05);
  --shadow-lg: 0 8px 24px rgba(20, 16, 8, 0.08), 0 0 0 1px rgba(20, 16, 8, 0.05);
  --shadow-pop: 0 12px 36px rgba(20, 16, 8, 0.14), 0 0 0 1px rgba(20, 16, 8, 0.06);

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;

  /* Radius scale — brutalist: zero everywhere except true pills */
  --radius-1: 0;
  --radius-2: 0;
  --radius-3: 0;
  --radius-4: 0;
  --radius-5: 0;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --dur-1: 90ms;
  --dur-2: 160ms;
  --dur-3: 220ms;
  --dur-4: 320ms;

  /* Focus ring — brick at low alpha */
  --ring: 0 0 0 3px rgba(200, 65, 13, 0.22);
  --ring-soft: 0 0 0 3px rgba(9, 8, 8, 0.10);
}

::selection { background: var(--brand); color: var(--bg); }

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }

.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }

/* ========== Eyebrow — uppercase mono label with brick bullet ========== */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--brand);
  flex-shrink: 0;
}

/* ========== Window — landing-style hero card with offset double-border ========== */
.window {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--ink-line);
  border-radius: 0;
}
.window::before {
  content: '';
  position: absolute;
  inset: 6px -6px -6px 6px;
  border: 1px solid var(--ink-line);
  background: var(--surface-3);
  z-index: -1;
}
.window-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  background: transparent;
}
.window-head .url,
.window-head-url { margin-left: auto; color: var(--text-2); }
.window-body { padding: 24px 22px; }
.window-foot {
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
}

/* ========== App shell ========== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  height: 100vh;
  transition: grid-template-columns 0.18s ease;
}
.app.sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }

/* ========== Sidebar ========== */
.sidebar {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
  position: relative;
  z-index: 20;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px 10px;
  min-height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}
.sidebar-brand-logo {
  width: 24px; height: 24px;
  border-radius: 0;
  background: transparent;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  overflow: visible;
  position: relative;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.sidebar-brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sidebar-brand-copy {
  min-width: 0;
  flex: 1;
}
.sidebar-brand-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--text-2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
.sidebar-brand-toggle:hover,
.sidebar-brand-toggle:focus-visible {
  background: var(--hover);
  border-color: var(--border-strong);
  color: var(--text);
}
.sidebar-brand-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--text);
}
.sidebar-brand-org {
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--text-3);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-divider {
  height: 1px;
  margin: 9px 10px;
  background: var(--border-soft);
}
/* Two stacked target-source sections inside the combined /sources page.
 * Uses the general-sibling combinator (`~`) instead of adjacent-sibling (`+`)
 * because each TargetSourcesPage renders its own dialog-backdrop / modal
 * elements as siblings of the section; an open modal slots between the MCP
 * and CLI sections in the DOM and would otherwise drop the 28px gap. */
.sources-page > .sources-embedded-section ~ .sources-embedded-section {
  margin-top: 28px;
}
/* Inside the combined /sources page, each section's title sits directly
 * under the page-level h1 ("My MCPs / CLIs"), so bump it from the default
 * 13px to read as a real section header rather than a small subheading. */
.sources-page .ui-section-title {
  font-size: 16px;
}
.sidebar-nav { padding: 4px 6px; display: flex; flex-direction: column; gap: 1px; }
/* Generous breathing room between the brand block and the first nav group
 * so Insights doesn't feel crammed under the brand border. The 20px matches
 * what sits below the row (6px nav-bottom + 14px divider-top) so the lone
 * Insights link reads as visually centered in its slot. */
.sidebar-brand + .sidebar-nav { padding-top: 10px; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 0;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.sidebar-link:hover { background: var(--hover); color: var(--text); }
/* Active row: white "paper" lifted above the cream sidebar with a thin
 * brand-color left rail. Subtle but unmistakably on-brand — the same
 * black/cream/terracotta palette as the rest of the product. */
.sidebar-link.active {
  background: var(--paper);
  color: var(--text);
  font-weight: 500;
  box-shadow: inset 2px 0 0 0 var(--brand);
}
.sidebar-link.active:hover { background: var(--paper); color: var(--text); }
.sidebar-link .icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--text-3); }
.sidebar-link.active .icon { color: var(--brand); }
.sidebar-link .label { overflow: hidden; text-overflow: ellipsis; }
.sidebar-link-logo-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sidebar-link-logo-label img {
  width: 1em;
  height: 1em;
  display: block;
}
.sidebar-link .badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--surface-3);
  color: var(--text-2);
  padding: 1px 6px;
  border: 0;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
/* Floating sidebar slot used for "Connect your editor" — sits in its own
   group between the main nav and the account footer, separated by a thin
   top border. */
.sidebar-link-floating {
  margin: 6px 6px 5px 6px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.sidebar-link-floating .icon { color: var(--brand); }

.sidebar-link-soon {
  cursor: default;
  color: var(--text-3);
}
.sidebar-link-soon:hover { background: transparent; color: var(--text-3); }
.sidebar-link-soon .icon { color: var(--text-4); }
.sidebar-link-soon-badge {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--surface-3);
  color: var(--text-3);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 500;
}
.app.sidebar-collapsed .sidebar-link-soon-badge { display: none; }
.sidebar-spacer { flex: 1; }
.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 8px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0;
  background: var(--text);
  color: #f6f2ef;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(9, 8, 8, 0.18);
  text-transform: uppercase;
  padding: 0;
  position: relative;
}
.avatar-menu-trigger {
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.avatar-menu-trigger:hover,
.avatar-menu-trigger:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 5px rgba(9, 8, 8, 0.22);
  transform: translateY(-1px);
}
.avatar-menu-trigger:focus-visible {
  outline: 2px solid var(--brand-soft-border);
  outline-offset: 3px;
}
.avatar-menu {
  position: absolute;
  left: 12px;
  bottom: calc(100% + 8px);
  width: 220px;
  padding: 4px;
  border-radius: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 30;
}
.avatar-menu-item {
  width: 100%;
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  text-align: left;
}
.avatar-menu-item:hover,
.avatar-menu-item:focus-visible {
  background: var(--hover);
  color: var(--text);
}
.avatar-menu-item:focus-visible {
  outline: 2px solid var(--brand-soft-border);
  outline-offset: 1px;
}
.avatar-menu-separator {
  height: 1px;
  background: var(--border-soft);
  margin: 4px;
}
.sidebar-profile-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.sidebar-profile-trigger:hover,
.sidebar-profile-trigger:focus-visible {
  background: var(--surface);
  border-color: var(--border);
  outline: none;
}
.sidebar-profile-trigger:focus-visible {
  border-color: var(--brand-soft-border);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.sidebar-profile-trigger .avatar {
  pointer-events: none;
}
.sidebar-profile-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.sidebar-profile-caret {
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 0.12s ease;
}
.sidebar-profile-trigger[aria-expanded="true"] .sidebar-profile-caret {
  transform: rotate(180deg);
  color: var(--text-2);
}
.user-name {
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-email {
  font-size: 11px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app.sidebar-collapsed .sidebar-brand-name,
.app.sidebar-collapsed .sidebar-brand-org,
.app.sidebar-collapsed .sidebar-brand-copy,
.app.sidebar-collapsed .sidebar-link .label,
.app.sidebar-collapsed .sidebar-link .badge,
.app.sidebar-collapsed .sidebar-profile-copy,
.app.sidebar-collapsed .sidebar-profile-caret,
.app.sidebar-collapsed .user-name,
.app.sidebar-collapsed .user-email { display: none; }
.app.sidebar-collapsed .sidebar-divider {
  margin: 10px 8px;
}
.app.sidebar-collapsed .sidebar-link { justify-content: center; padding: 10px 8px; position: relative; }
.app.sidebar-collapsed .sidebar-link[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--text);
  color: #f6f2ef;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 60;
  box-shadow: var(--shadow-md);
}
.app.sidebar-collapsed .sidebar-link[data-tooltip]:hover::after,
.app.sidebar-collapsed .sidebar-link[data-tooltip]:focus-visible::after { opacity: 1; }
.app.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 12px 0 16px; cursor: pointer; }
.app.sidebar-collapsed .sidebar-brand-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  opacity: 0;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.app.sidebar-collapsed .sidebar-brand:hover .sidebar-brand-logo {
  opacity: 0;
  transform: scale(0.92);
}
.app.sidebar-collapsed .sidebar-brand:hover .sidebar-brand-toggle,
.app.sidebar-collapsed .sidebar-brand-toggle:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.app.sidebar-collapsed .sidebar-footer { justify-content: center; padding: 10px 0; gap: 0; }
.app.sidebar-collapsed .sidebar-profile-trigger {
  width: auto;
  padding: 4px;
  justify-content: center;
}
.app.sidebar-collapsed .avatar-menu { left: 8px; width: 220px; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.app-shell-skeleton {
  background: var(--bg);
}
.app-shell-skeleton-sidebar {
  pointer-events: none;
}
/* The skeleton uses the same .sidebar-nav and .sidebar-link classes as the
 * real Sidebar so positioning matches. Each row swaps icon and label for
 * grey placeholders that pulse via the same `skeleton-pulse` keyframes. */
.app-shell-skeleton-group .app-shell-skeleton-link {
  cursor: default;
  background: transparent;
}
.app-shell-skeleton-link:hover { background: transparent; }
.app-shell-skeleton-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: linear-gradient(90deg, var(--surface-3), var(--surface), var(--surface-3));
  background-size: 180% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.app-shell-skeleton-label {
  height: 10px;
  flex: 1;
  max-width: 140px;
}
.app-shell-skeleton-line {
  width: 100%;
  height: 10px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--surface-3), var(--surface), var(--surface-3));
  background-size: 180% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.app-shell-skeleton-org {
  width: 112px;
  height: 9px;
  margin-top: 6px;
}
.app-shell-skeleton-line-short { width: 64%; }
.app-shell-skeleton-main {
  background: var(--bg);
}
.app-shell-skeleton-topbar {
  min-height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  padding: 0 22px;
}
.app-shell-skeleton-title {
  width: min(220px, 42vw);
  height: 12px;
}
.app-shell-skeleton-content {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}
.app-shell-skeleton-loader {
  color: var(--text-2);
}
@keyframes skeleton-pulse {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell-skeleton-line { animation: none; }
}
.icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ========== Page ========== */
.page { flex: 1; overflow: auto; min-height: 0; }
.page-inner { width: 100%; min-width: 0; padding: 28px 32px 60px; max-width: 1480px; margin: 0 auto; }
.page-header { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.page-header > div:first-child { min-width: 0; }
.page-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-title::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--brand);
  flex-shrink: 0;
  margin-bottom: 5px;
}
.page-subtitle { font-size: 13px; color: var(--text-3); margin-top: 6px; line-height: 1.45; }
.page-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ========== Time picker ========== */
.time-picker {
  position: relative;
  min-width: 0;
}
.time-picker-trigger {
  min-width: 270px;
  max-width: min(460px, 52vw);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
  justify-content: flex-start;
  text-align: left;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.time-picker-trigger:hover {
  background: var(--surface-2);
  color: var(--text);
}
.time-picker-trigger:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.time-picker-label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.time-picker-prefix {
  color: var(--text-3);
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 2px;
}
.time-picker-timezone {
  flex: 0 10 72px;
  min-width: 0;
  color: var(--text-3);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 72px;
}
.time-picker-chevron {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform 0.12s ease;
}
.time-picker.open .time-picker-chevron {
  transform: rotate(180deg);
}
.time-picker.open .time-picker-trigger {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.time-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  width: 340px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.time-picker-mode {
  display: flex;
  width: calc(100% - 16px);
  margin: 8px;
}
.time-picker-mode button {
  flex: 1;
}
.time-picker-panel {
  padding: 0 8px 8px;
}
.time-picker-search {
  margin-bottom: 8px;
}
.time-picker-options {
  max-height: 264px;
  overflow-y: auto;
  padding: 2px;
}
.time-picker-option {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
}
.time-picker-option:hover,
.time-picker-option:focus-visible {
  background: var(--surface-2);
}
.time-picker-option.selected {
  background: var(--brand-soft);
  color: var(--brand);
}
.time-picker-empty {
  padding: 18px 8px;
  color: var(--text-3);
  font-size: 12.5px;
  text-align: center;
}
.time-picker-field {
  display: grid;
  gap: 6px;
  padding: 8px 0;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
}
.time-picker-meta {
  padding: 4px 0 8px;
  color: var(--text-3);
  font-size: 12px;
}
.time-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
}
.form-error {
  color: var(--red);
  font-size: 12px;
  line-height: 1.35;
}

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--radius-1);
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--text);
  background: transparent;
  color: var(--text);
  transition: background var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { background: var(--text); color: var(--bg); }
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled,
.btn:disabled:hover {
  cursor: not-allowed;
  opacity: 0.45;
  background: transparent;
  color: var(--text);
  transform: none;
}
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--bg);
}
.btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: var(--bg); }
.btn-primary:disabled,
.btn-primary:disabled:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft-border);
  color: var(--brand);
  opacity: 0.7;
}
.btn-danger {
  background: var(--red);
  border-color: var(--red);
  color: var(--bg);
}
.btn-danger:hover {
  background: #6e1610;
  border-color: #6e1610;
  color: var(--bg);
}
.btn-danger:disabled,
.btn-danger:disabled:hover {
  background: var(--red-soft);
  border-color: var(--red-soft-border);
  color: var(--red);
  opacity: 0.72;
}
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: transparent; color: var(--text); }
.btn-subtle {
  background: var(--surface-2);
  border-color: var(--surface-2);
  color: var(--text-2);
}
.btn-subtle:hover {
  background: var(--surface-3);
  border-color: var(--surface-3);
  color: var(--text);
}
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-icon { padding: 6px; }
.btn[aria-busy="true"],
.btn[aria-busy="true"]:hover {
  cursor: wait;
  opacity: 1;
}
.btn-primary[aria-busy="true"],
.btn-primary[aria-busy="true"]:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}
.loading-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: spin 0.72s linear infinite;
  flex-shrink: 0;
}
.loading-spinner-sm {
  width: 12px;
  height: 12px;
  border-width: 1.8px;
}
.loading-spinner-lg {
  width: 18px;
  height: 18px;
}
.inline-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========== Dialogs ========== */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9, 8, 8, 0.28);
}
.confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--ink-line);
}
.confirm-dialog-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-2);
  color: var(--text-2);
}
.confirm-dialog-icon.danger {
  border-color: var(--red-soft-border);
  background: var(--red-soft);
  color: var(--red);
}
.confirm-dialog-copy {
  min-width: 0;
}
.confirm-dialog-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.confirm-dialog-description {
  margin-top: 5px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}
.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.modal-panel {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--ink-line);
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-line);
  background: var(--surface);
}
.modal-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.modal-subtitle {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 12.5px;
}
.modal-body {
  min-width: 0;
  overflow: auto;
  padding: 18px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* ========== Cards ========== */
.card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-3);
}
.card-pad { padding: 16px 18px; }
.card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-header > div:first-child { min-width: 0; }
.card-title { font-size: 13px; font-weight: 600; }
.card-sub { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.chart-selection-label {
  margin-left: auto;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ========== Tables ========== */
.table-wrap {
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-3);
  overflow: hidden;
}
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
.table thead th {
  text-align: left;
  font-weight: 500;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  color: var(--text-3);
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface);
  white-space: nowrap;
  user-select: none;
}
.table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr.selected { background: var(--brand-soft); }
.table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table .muted { color: var(--text-3); }
.responsive-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table tbody tr.loading-row {
  cursor: default;
  pointer-events: none;
}
.table tbody tr.loading-row:hover { background: transparent; }

.skel {
  display: block;
  height: 11px;
  border-radius: 999px;
  background: var(--surface-2);
  animation: skel 1.4s ease-in-out infinite;
}
.skel-badge { width: 72px; height: 20px; border-radius: 0; }
.skel-short { width: 48px; }
.skel-mid { width: 92px; }
.skel-long { width: 180px; max-width: 100%; }
.skel-secret { width: min(260px, 100%); }
.skel-stack { margin-top: 7px; width: 120px; }
.skel-field-help { width: 132px; margin-top: 7px; }
.skel-kpi-value {
  width: 82px;
  height: 28px;
  border-radius: 0;
  margin-top: 9px;
}
.skel-kpi-detail {
  width: 116px;
  margin-top: 8px;
}

@keyframes skel {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ========== Badges & status — landing tag style ========== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
  background: transparent;
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.badge-success { color: var(--green); }
.badge-fail { color: var(--red); }
.badge-running { color: var(--blue); }
.badge-running .dot { animation: pulse 1.4s ease-in-out infinite; }
.badge-pending { color: var(--amber); }
.badge-warning { color: var(--amber); }
.badge-neutral { color: var(--text-3); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* ========== Filter bar ========== */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--text);
  color: var(--text);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.filter-chip .key { color: var(--text-3); font-family: var(--font-mono); font-size: 10.5px; }
.filter-chip .val { font-weight: 500; color: var(--text); }
.filter-chip.active { background: var(--text); border-color: var(--text); color: var(--bg); }
.filter-chip.active .key { color: var(--surface-3); }
.filter-chip.active .val { color: var(--bg); }
.filter-chip.disabled { opacity: 0.65; }
.filter-chip.disabled select { cursor: wait !important; }
.filter-chip-x { color: var(--text-3); cursor: pointer; }
.filter-chip-x:hover { color: var(--text); }
.runs-clear-filters {
  font-size: 11.5px;
  color: var(--text-3);
}
.runs-clear-filters:hover { color: var(--brand); }

.search-input {
  display: flex; align-items: center; gap: 6px;
  flex: 1; min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-1);
  padding: 5px 10px;
  color: var(--text-3);
}
.search-input input {
  border: 0; background: transparent; outline: none;
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--text);
}

/* ========== KPI cards ========== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 16px;
  background: var(--text);
  border: 1px solid var(--text);
  border-radius: 0;
}
.kpi {
  background: var(--surface);
  border: 0;
  border-radius: 0;
  padding: 14px 16px;
  margin: 0;
}
.kpi + .kpi { box-shadow: -1px 0 0 0 var(--text); }
.kpi-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.kpi-delta { font-size: 12px; color: var(--text-3); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.kpi-delta.up { color: var(--green); }
.kpi-delta.down { color: var(--red); }
.kpi.loading-row {
  cursor: default;
  pointer-events: none;
}

/* ========== Dashboard cross-section overview ========== */
.dashboard-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.dashboard-overview-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
  font: inherit;
  color: var(--text);
}
.dashboard-overview-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.dashboard-overview-card:focus-visible {
  outline: 2px solid var(--brand-soft-border);
  outline-offset: 2px;
}
.dashboard-overview-card.tone-ok { border-color: var(--green-soft-border); }
.dashboard-overview-card.tone-ok .dashboard-overview-icon { color: var(--green); border-color: var(--green-soft-border); background: var(--green-soft); }
.dashboard-overview-card.tone-alert { border-color: var(--red-soft-border); }
.dashboard-overview-card.tone-alert .dashboard-overview-icon { color: var(--red); border-color: var(--red-soft-border); background: var(--red-soft); }
.dashboard-overview-icon {
  width: 38px;
  height: 38px;
  border-radius: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text-2);
  flex-shrink: 0;
}
.dashboard-overview-card.tone-ok .dashboard-overview-icon { color: var(--green); border-color: var(--green-soft-border); }
.dashboard-overview-card.tone-alert .dashboard-overview-icon { color: var(--red); border-color: var(--red-soft-border); }
.dashboard-overview-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dashboard-overview-title {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}
.dashboard-overview-primary {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.1;
  margin-top: 2px;
}
.dashboard-overview-secondary {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-overview-cta {
  color: var(--text-3);
  flex-shrink: 0;
}
.dashboard-overview-card:hover .dashboard-overview-cta { color: var(--brand); }
@media (max-width: 900px) {
  .dashboard-overview-grid { grid-template-columns: 1fr; }
}

/* ========== Monitoring chart ========== */
.dashboard-monitoring {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.dashboard-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.dashboard-kpi-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}
.chart-card { padding: 0; }
.chart-body { padding: 16px 16px 14px; }
.chart-empty {
  min-height: 144px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: 12.5px;
}
.run-chart {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}
.run-chart-y-axis {
  height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 0 22px;
  color: var(--text-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.run-chart-main {
  min-width: 0;
}
.run-chart-plot {
  position: relative;
  height: 240px;
  min-width: 0;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.run-chart-plot.brush-ready {
  cursor: crosshair;
}
.run-chart-grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-soft);
  pointer-events: none;
}
.run-chart-grid-line.top { top: 0; }
.run-chart-grid-line.mid { top: 50%; }
.run-chart-grid-line.bottom { bottom: 0; }
.run-chart-bars {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(18px, 1fr));
  align-items: end;
  gap: 8px;
  padding: 0 10px;
}
.run-chart-bar {
  position: relative;
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.run-chart-bar-hit {
  position: relative;
  width: 100%;
  max-width: 56px;
  min-height: 2px;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  outline: none;
}
.run-chart-stack {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 0;
  background: var(--surface-3);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.run-chart-bar-hit:hover .run-chart-stack,
.run-chart-bar-hit:focus .run-chart-stack {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-soft-border);
}
.run-chart-segment {
  display: block;
  width: 100%;
  min-height: 2px;
}
.run-chart-segment.success { background: var(--green); }
.run-chart-segment.partial { background: var(--amber); }
.run-chart-segment.failed { background: var(--red); }
.run-chart-segment.running { background: var(--blue); }
.run-chart-segment.pending { background: var(--violet); }
.run-chart-x-axis {
  display: grid;
  grid-template-columns: repeat(12, minmax(18px, 1fr));
  gap: 8px;
  padding: 7px 10px 0;
  color: var(--text-3);
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.run-chart-x-axis span {
  min-width: max-content;
  justify-self: center;
  white-space: nowrap;
}
.run-chart-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 10;
  width: max-content;
  min-width: 188px;
  max-width: 280px;
  padding: 6px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--text);
  color: var(--surface);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  transform: translate(-50%, 0);
}
.run-chart-bar:first-child .run-chart-tooltip {
  left: 0;
  transform: translate(0, 0);
}
.run-chart-bar:last-child .run-chart-tooltip {
  left: auto;
  right: 0;
  transform: translate(0, 0);
}
.tooltip-title {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 4px;
  white-space: nowrap;
}
.tooltip-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 7px;
  font-size: 11px;
  line-height: 1.25;
}
.tooltip-grid span {
  color: rgba(255, 255, 255, 0.68);
}
.tooltip-grid strong {
  color: var(--surface);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.run-chart-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 0 52px;
  color: var(--text-2);
  font-size: 12px;
}
.run-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.run-chart-legend i {
  width: 9px;
  height: 9px;
  border-radius: 0;
}
.run-chart-legend .success { background: var(--green); }
.run-chart-legend .partial { background: var(--amber); }
.run-chart-legend .failed { background: var(--red); }
.run-chart-legend .running { background: var(--blue); }
.run-chart-legend .pending { background: var(--violet); }
.run-chart-brush-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.run-chart-brush-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(9, 8, 8, 0.09);
}
.run-chart-brush-selection {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 3px;
  border: 2px solid var(--brand);
  background: rgba(209, 53, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.48);
  cursor: move;
  pointer-events: auto;
}
.run-chart-brush-handle {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: ew-resize;
}
.run-chart-brush-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 34px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 2px var(--surface);
  transform: translate(-50%, -50%);
}
.run-chart-brush-handle-start { left: -8px; }
.run-chart-brush-handle-end { right: -8px; }
.run-chart-brush-actions {
  position: absolute;
  top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
  transform: translateX(8px);
}
.run-chart-brush-actions.left {
  transform: translateX(calc(-100% - 8px));
}
.run-chart-brush-button {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.run-chart-brush-label {
  position: absolute;
  bottom: 8px;
  max-width: min(360px, calc(100% - 16px));
  padding: 4px 7px;
  border-radius: 0;
  background: var(--text);
  color: var(--surface);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  pointer-events: none;
  transform: translateX(0);
  white-space: nowrap;
}
.run-chart-brush-label.right {
  transform: translateX(-100%);
}
.top-failing-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 16px;
}
.top-failing-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.top-failing-card .top-failing-list {
  flex: 1;
  justify-content: space-evenly;
}
.top-failing-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) minmax(180px, 1fr) 44px;
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.top-failing-row.top-failing-row-link {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 6px 4px;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.top-failing-row.top-failing-row-link:hover {
  background: var(--surface-2);
}
.top-failing-row.top-failing-row-link:disabled {
  cursor: default;
}
.dashboard-insight-grid .top-failing-row {
  grid-template-columns: minmax(180px, 1.25fr) minmax(120px, 1fr) 36px;
  gap: 10px;
}
.top-failing-name {
  min-width: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.top-failing-barwrap {
  min-width: 0;
  height: 7px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.top-failing-bar {
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
}
.top-failing-val {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.chart-loading {
  height: 240px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
}
.chart-loading-bar {
  flex: 1;
  min-width: 8px;
  border-radius: 0;
}

/* ========== Trace waterfall ========== */
.trace {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow-x: auto;
  overflow-y: hidden;
  --trace-cols: 28px minmax(220px, 1.4fr) 150px 56px minmax(360px, 2fr);
  --trace-min: 1040px;
}
.trace-header {
  display: grid;
  grid-template-columns: var(--trace-cols);
  gap: 12px;
  padding: 9px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 600;
  min-width: var(--trace-min);
}
.trace-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.trace-row {
  display: grid;
  grid-template-columns: var(--trace-cols);
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  align-items: center;
  cursor: pointer;
  transition: background 0.1s ease;
  min-width: var(--trace-min);
  position: relative;
}
.trace-row:hover { background: var(--surface-2); }
.trace-row.expanded { background: var(--surface-2); }
.trace-row.error .span-name { color: var(--red); }
.trace-row:last-child { border-bottom: 0; }
.trace-caret {
  color: var(--text-4);
  transition: transform 0.15s ease;
  font-size: 11px;
  text-align: center;
}
.trace-row.expanded .trace-caret { transform: rotate(90deg); color: var(--text-2); }
.span-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.span-icon {
  width: 20px; height: 20px;
  border-radius: 0;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.span-icon.reasoning { background: var(--violet-soft); color: var(--violet); }
.span-icon.tool { background: var(--blue-soft); color: var(--blue); }
.span-icon.judge { background: var(--amber-soft); color: var(--amber); }
.span-icon.system { background: var(--surface-3); color: var(--text-2); }
.span-icon.error { background: var(--red-soft); color: var(--red); }
.span-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.span-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.span-sub {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.span-time {
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.35;
}
.span-time span:last-child { color: var(--text-3); font-size: 10.5px; }
.span-duration {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-3);
  text-align: right;
}
.span-bar-track {
  position: relative;
  height: 18px;
  background: var(--surface-2);
  border-radius: 0;
  border: 1px solid var(--border-soft);
}
.span-bar-track::before,
.span-bar-track::after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: var(--border-soft);
  pointer-events: none;
}
.span-bar-track::before { left: 50%; }
.span-bar-track::after { left: 25%; }
.span-bar-track > .span-bar-tick-75 {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 75%;
  width: 1px;
  background: var(--border-soft);
  pointer-events: none;
}
.span-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 9px;
  border-radius: 0;
  background: var(--brand);
  min-width: 3px;
  box-shadow: 0 0 0 1px rgba(20, 16, 8, 0.04);
  transition: filter 0.12s ease;
}
.trace-row:hover .span-bar { filter: brightness(0.92); }
.span-bar.reasoning { background: #9b7ed1; }
.span-bar.tool { background: #4a86d4; }
.span-bar.judge { background: #d49b3a; }
.span-bar.system { background: var(--text-3); }
.span-bar.error { background: var(--red); }

.trace-range {
  font-size: 11px;
  color: var(--text-3);
}

.trace-detail {
  padding: 12px 16px 16px 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-width: var(--trace-min);
}
.trace-detail h5 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 600;
}
.trace-projected-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trace-projected-detail > div {
  min-width: 0;
}
.trace-detail-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.trace-detail-list > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.trace-detail-list dt,
.trace-detail-list dd {
  margin: 0;
  min-width: 0;
}
.trace-detail-list dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
}
.trace-detail-list dd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-2);
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}
.trace-detail-list dd > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trace-detail-list > div.expanded {
  align-items: start;
}
.trace-detail-list > div.expanded dd {
  white-space: pre-wrap;
  overflow: visible;
}
.trace-detail-list > div.expanded dd > span {
  overflow: visible;
}
.trace-fact-toggle {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.trace-fact-toggle:hover {
  color: var(--brand-2);
  text-decoration: underline;
}
.code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-x: auto;
  color: var(--text);
}
.code .k { color: var(--violet); }
.code .s { color: var(--green); }
.code .n { color: var(--blue); }

/* ========== Tabs ========== */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tab {
  border: 0;
  background: transparent;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--brand); }
.tab .count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.tab.active .count { color: var(--text); border-color: var(--text); }
.alert-destination-tabs {
  margin-bottom: 0;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.alert-destination-tab {
  min-height: 40px;
  flex-shrink: 0;
  white-space: nowrap;
}
.alert-tab-status {
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 400;
}
.alert-destination-tab.active .alert-tab-status {
  color: var(--text-2);
}

/* ========== Forms ========== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--border-soft); }
.field-row:last-child { border-bottom: 0; }
.field-row.loading-row {
  cursor: default;
  pointer-events: none;
}
.field-label { font-size: 13px; font-weight: 500; }
.field-help { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.field-help .slug-suggest-action,
.workspace-slug-status .slug-suggest-action {
  border: 0;
  background: transparent;
  color: var(--brand);
  padding: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.workspace-slug-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-3);
}
.workspace-slug-line .mono { color: var(--text-2); }
.workspace-slug-line-sep { color: var(--text-3); opacity: 0.6; }
.workspace-slug-line-edit {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--text-2);
  cursor: pointer;
  text-decoration: underline;
}
.workspace-slug-line-edit:hover { color: var(--text); }
.workspace-slug-reset {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 6px;
  cursor: pointer;
}
.workspace-slug-reset:hover { color: var(--text); }
.workspace-slug-edit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.workspace-slug-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-3);
}
.workspace-slug-status.is-ok { color: var(--green, #1a7f4d); }
.workspace-slug-status.is-bad { color: var(--red); }
.workspace-slug-status.is-checking { color: var(--text-3); }

/* Workspace step: cofounders Cal.com CTA + "or" divider that frames the
   direct-setup form below. Lives inside `.onboarding-card` so it inherits
   the layered offset card chrome; the inner block adds its own warm
   surface to read as a distinct hero. */
.onboarding-cofounders-block {
  display: grid;
  gap: 12px;
  padding: 22px 22px 24px;
  margin: 8px 0 12px;
  border: 1px solid var(--ink-line);
  background: var(--surface-2, #fbfaf8);
  position: relative;
}
.onboarding-cofounders-block h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
}
.onboarding-cofounders-block p { margin: 0; font-size: 13px; line-height: 1.45; }
.onboarding-cofounders-block .btn {
  justify-self: start;
  margin-top: 6px;
}
.onboarding-or-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.onboarding-or-divider::before,
.onboarding-or-divider::after {
  content: '';
  height: 1px;
  background: var(--border-soft, var(--border));
}
.onboarding-or-divider span { white-space: nowrap; }
.workspace-card .workspace-direct-form {
  display: grid;
  gap: 13px;
}

/* Inline Cal.com calendar that replaces the workspace form when the
   user clicks "Book a 10-minute intro". Always shows a Close button at
   the top so the user can bail back to the form, and gives the iframe
   enough vertical room that Cal's month-view doesn't internally
   scroll on first paint. The card already has min-height:570px on
   desktop, so the calendar gets the full residual space minus the
   cofounders block above. */
.cofounders-cal-inline {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
.cofounders-cal-inline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cofounders-cal-inline-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cofounders-cal-inline-close {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
}
.cofounders-cal-inline-close:hover { color: var(--text); border-color: var(--ink-line); }
.cofounders-cal-inline-frame {
  min-height: 540px;
  border: 1px solid var(--ink-line);
  background: var(--surface);
  /* Cal's embed.js writes width:100%/height:100% on the inner iframe;
     the explicit width here keeps the wrapper from collapsing during
     the brief window before the iframe attaches. */
  width: 100%;
}
.cofounders-cal-inline-error {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--red, #c4322b);
  background: rgba(196, 50, 43, 0.06);
}
.cofounders-cal-inline-error p { margin: 0; font-size: 13px; color: var(--text); }

/* Confirmation panel rendered after Cal fires `bookingSuccessful`.
   Centered for clarity, with a subtle success accent via the icon
   chip rather than reusing the warning/error tones elsewhere in the
   card. */
.cofounders-cal-booked {
  display: grid;
  gap: 10px;
  padding: 32px 22px 28px;
  margin-top: 4px;
  text-align: center;
  justify-items: center;
  border: 1px solid var(--ink-line);
  background: var(--surface);
}
.cofounders-cal-booked-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(26, 127, 77, 0.12);
  color: var(--green, #1a7f4d);
  margin-bottom: 4px;
}
.cofounders-cal-booked h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
}
.cofounders-cal-booked p { margin: 0; max-width: 36ch; font-size: 13px; line-height: 1.45; }
/* Discrete text-link escape hatch, not a button. The user already
   booked — surfacing a prominent CTA back to the form would feel
   prompted, so this is styled as a subtle text link: muted, small,
   and underlined so its affordance reads clearly without competing
   with the success message above. */
.cofounders-cal-booked-skip {
  margin-top: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cofounders-cal-booked-skip:hover { color: var(--text-2); }
.cofounders-cal-booked-skip:focus-visible { outline: 1px dotted var(--ink-line); outline-offset: 2px; }

/* While the inline calendar is open or showing the booked state, the
   right-hand DiscoverToolsPanel isn't really the focus — let the card
   grow taller than its 570px min-height so the calendar grid (and the
   booked confirmation) has room without forcing the user to scroll. */
.workspace-card.workspace-card-cal-open,
.workspace-card.workspace-card-cal-booked {
  min-height: 0;
}
.field-value { font-size: 13px; font-weight: 500; color: var(--text); align-self: center; }
.settings-card {
  padding: 0 22px;
  overflow: hidden;
  margin-bottom: 16px;
}
.error-text { color: var(--red); }
.api-key-create-row,
.api-key-token-row,
.api-key-row,
.invitation-create-row,
.invitation-link-row,
.invitation-row {
  align-items: start;
}
.api-key-create {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.api-key-token {
  word-break: break-all;
}
.api-key-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.api-key-meta > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.invitation-create {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.invitation-form-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 0.4fr) auto;
  gap: 8px;
  align-items: center;
}
.invitation-mode {
  width: max-content;
}
.invitation-created-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}
.invitation-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.invitation-meta > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.secret-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 0.8fr) minmax(120px, 0.55fr) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.mcp-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 12px;
  min-width: 0;
}
.mcp-modal-auth,
.mcp-modal-secret,
.mcp-modal-wide {
  grid-column: 1 / -1;
}
.mcp-modal-check {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}
.mcp-modal-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}
.mcp-oauth-config {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
}
.mcp-oauth-config .auth-message {
  grid-column: 1 / -1;
}
.mcp-auth-mode-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.mcp-auth-mode-group[data-options="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mcp-auth-mode {
  position: relative;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.mcp-auth-mode:hover {
  background: var(--surface-2);
  color: var(--text);
}
.mcp-auth-mode:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.mcp-auth-mode.active {
  border-color: var(--brand-soft-border);
  background: var(--brand-soft);
  color: var(--brand);
}
.mcp-auth-mode:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.mcp-auth-mode-help {
  flex: 0 0 auto;
  opacity: 0.55;
  transition: opacity 0.12s ease;
}
.mcp-auth-mode:hover .mcp-auth-mode-help,
.mcp-auth-mode:focus-visible .mcp-auth-mode-help,
.mcp-auth-mode.active .mcp-auth-mode-help {
  opacity: 0.9;
}
/* Hover-tooltip on the button itself; behaves like .ui-tooltip but lives on
   the button so the whole option surfaces the tip. */
.mcp-auth-mode[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  width: 240px;
  max-width: 240px;
  white-space: normal;
  text-align: left;
  line-height: 1.4;
  background: var(--text);
  color: #f6f2ef;
  font-size: 11.5px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--radius-1);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  z-index: 60;
  box-shadow: var(--shadow-md);
}
.mcp-auth-mode[data-tooltip]:hover::after,
.mcp-auth-mode[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.cli-setup {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cli-setup-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.cli-setup-header-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
}
.cli-setup-header-mark.is-active {
  border-color: var(--brand);
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}
.cli-setup-header-mark.is-complete {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-soft);
}
.cli-setup-header-mark.is-failed {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-soft);
}
.cli-setup-header-title {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}
.cli-setup-header-body {
  margin-top: 3px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.45;
}

/* Connected horizontal timeline. The track is one absolutely-positioned line
   spanning the full width; the fill represents progress; the sweep is a
   moving gradient over the segment leading into the active node. Nodes sit
   on top of the track, evenly spaced via a 4-column grid. */
.cli-setup-timeline {
  position: relative;
  padding: 4px 0 0;
}
.cli-setup-timeline-track {
  position: absolute;
  /* Span from the center of the first node to the center of the last node.
     Nodes are in a 4-column grid; each column's center sits at 12.5%, 37.5%,
     62.5%, 87.5%, so insetting by 12.5% on each side aligns track to nodes. */
  top: 15px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--border);
  overflow: hidden;
  border-radius: 999px;
}
.cli-setup-timeline-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--green);
  transition: width var(--dur-3, 320ms) var(--ease-out, ease-out);
}
.cli-setup-timeline.is-failed .cli-setup-timeline-fill {
  background: var(--red);
}
.cli-setup-timeline-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--brand) 60%, transparent) 50%,
    transparent 100%
  );
  animation: cli-setup-sweep 1.4s linear infinite;
  pointer-events: none;
}
@keyframes cli-setup-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.cli-setup-timeline-nodes {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: flex-start;
}
.cli-setup-timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  min-width: 0;
}
.cli-setup-timeline-node {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text-3);
  z-index: 1;
  transition: border-color var(--dur-3, 320ms) var(--ease-out, ease-out),
              background var(--dur-3, 320ms) var(--ease-out, ease-out);
}
.cli-setup-timeline-step.is-done .cli-setup-timeline-node {
  background: var(--green);
  border-color: var(--green);
  color: white;
}
.cli-setup-timeline-step.is-active .cli-setup-timeline-node {
  border-color: var(--brand);
  background: var(--surface);
  color: var(--brand);
  animation: cli-setup-pulse 1.6s ease-in-out infinite;
}
.cli-setup-timeline-step.is-failed .cli-setup-timeline-node {
  background: var(--red);
  border-color: var(--red);
  color: white;
}
.cli-setup-timeline-node-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-bottom-color: transparent;
  animation: spin 0.72s linear infinite;
}
@keyframes cli-setup-pulse {
  0%, 100% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 8%, transparent);
  }
}
.cli-setup-timeline-label {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.cli-setup-timeline-step.is-done .cli-setup-timeline-label {
  color: var(--text-2);
}
.cli-setup-timeline-step.is-active .cli-setup-timeline-label {
  color: var(--brand);
  font-weight: 600;
}
.cli-setup-timeline-step.is-failed .cli-setup-timeline-label {
  color: var(--red);
  font-weight: 600;
}
.cli-setup-note {
  margin: 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
}
.cli-setup-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--text-3);
  font-size: 11.5px;
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .cli-setup-timeline-sweep,
  .cli-setup-timeline-step.is-active .cli-setup-timeline-node,
  .cli-setup-timeline-node-spinner {
    animation: none;
  }
}
.mcp-auth-mode-group[data-options="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mcp-form-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}
.mcp-form-section:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
.mcp-form-section:first-of-type {
  padding-top: 0;
}
.mcp-form-section-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}
.mcp-form-section-desc {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
  margin: -4px 0 0 0;
}
.mcp-form-section > .mcp-form-section-title + .mcp-form-section-desc {
  margin-top: -6px;
}
.mcp-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 12px;
}
.mcp-form-row-1-1 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.mcp-form-row-2-1 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
@media (max-width: 560px) {
  .mcp-form-row-1-1,
  .mcp-form-row-2-1 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.mcp-form-advanced {
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  padding: 0;
  /* Sits at the bottom of the modal body. The bigger top margin separates it
     visually from the preceding form sections so it reads as an opt-in
     escape hatch rather than the next required field. */
  margin-top: 18px;
}
.mcp-form-advanced[open] {
  background: var(--surface);
}
.mcp-form-advanced-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}
.mcp-form-advanced-summary::-webkit-details-marker {
  display: none;
}
.mcp-form-advanced-summary::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(-45deg) translate(-2px, -1px);
  transition: transform 0.15s ease;
}
.mcp-form-advanced[open] > .mcp-form-advanced-summary::before {
  transform: rotate(45deg) translate(-1px, -2px);
}
.mcp-form-advanced-summary:hover {
  color: var(--brand);
}
.mcp-form-advanced-hint {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-3);
  margin-left: auto;
}
.mcp-form-advanced-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--border-soft);
}
/* Inline warning shown under a field when the field's value alone is enough to
   silently block submission. Used today for the OAuth scopes-override field
   when a curated provider is selected but its default_scopes were empty, so the
   user knows why Connect is disabled. */
.mcp-form-field-warning {
  color: var(--danger, #b3261e);
}

/* ========== Loopback OAuth paste-back modal ==========
   For MCP authorization servers that only allow loopback redirect URIs
   (Vercel as of 2026-05). Two-phase flow:
     Phase 1 ("ready"): instructions are visible BEFORE the popup opens, so
       the user knows to copy the address-bar URL after consent. The
       primary action is "Open sign-in", which opens the popup as a direct
       user gesture (popup blockers require it).
     Phase 2 ("awaiting_paste"): popup is open; the paste textarea and
       "Paste from clipboard" button are enabled and the textarea is
       auto-focused. A "Reopen sign-in" button is always available so the
       user can retry if they forgot to copy.
   See `LoopbackOAuthModalRoot` in pages-mcp-servers.jsx. */
.mcp-loopback-oauth-modal {
  width: min(560px, 100%);
}
.mcp-loopback-oauth-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mcp-loopback-oauth-steps {
  list-style: decimal;
  padding-left: 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mcp-loopback-oauth-steps > li {
  padding-left: 4px;
}
.mcp-loopback-step-title {
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 4px;
}
.mcp-loopback-step-desc {
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
}
.mcp-loopback-step-desc code {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 4px;
  background: var(--surface-2);
  border-radius: 3px;
}
.mcp-loopback-paste-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 10px;
}
.mcp-loopback-paste-input {
  font-family: var(--font-mono);
  font-size: 12px;
  flex: 1;
  min-width: 0;
}
.mcp-loopback-paste-clipboard {
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: flex-start;
}
.mcp-loopback-paste-clipboard:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.mcp-loopback-popup-hint {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border-1, rgba(0, 0, 0, 0.08));
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
}
.mcp-loopback-actions {
  flex-wrap: wrap;
  gap: 8px;
}

/* ========== "Awaiting OAuth sign-in" panel inside the connect modal ====
   Replaces the form body while a popup-based OAuth handshake is in flight.
   The connect modal stays open (form state preserved); this panel just
   tells the user what's happening and offers a Cancel-sign-in escape. */
.mcp-oauth-awaiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 28px 24px 16px;
}
.mcp-oauth-awaiting-spinner {
  margin-bottom: 6px;
}
.mcp-oauth-awaiting-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
}
.mcp-oauth-awaiting-desc {
  margin: 0;
  max-width: 440px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}
.mcp-oauth-awaiting-hint {
  margin: 4px 0 0;
  max-width: 440px;
  color: var(--text-3, var(--text-2));
  font-size: 12px;
  line-height: 1.5;
  font-style: italic;
}
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--brand, #2563eb);
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
}
.link-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.auth-profile-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.auth-profile-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11.5px;
  white-space: nowrap;
}
.input, .textarea, .select {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-1);
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--brand);
  box-shadow: var(--ring);
}
.input:disabled, .textarea:disabled, .select:disabled {
  background-color: var(--surface-3);
  border-color: var(--border);
  color: var(--text-3);
  cursor: not-allowed;
  opacity: 1;
  box-shadow: inset 0 0 0 1px rgba(90, 80, 60, 0.04);
}
.select:disabled {
  border-style: dashed;
}
.textarea { font-family: var(--font-mono); font-size: 12.5px; resize: vertical; min-height: 100px; }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%235C5852' stroke-width='1.5' d='M3 5l3 3 3-3'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.alert-rule-form {
  padding: 0 18px;
}
.alert-destination-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.alert-destination-panel > .card {
  overflow: hidden;
}
.alert-destination-panel > .card > .card-header {
  background: var(--surface-2);
}
.alert-rule-form .field-row {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  padding: 11px 0;
  align-items: start;
}
.alert-rule-form .field-label {
  line-height: 1.3;
}
.alert-rule-form .field-help {
  line-height: 1.35;
  margin-top: 1px;
}
.alert-rule-form .input,
.alert-rule-form .select,
.alert-rule-form .custom-select-trigger {
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.alert-control {
  width: 100%;
  min-width: 0;
}
.custom-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.custom-select-trigger {
  min-height: 36px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  outline: none;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.custom-select-trigger:hover {
  background: var(--surface-2);
}
.custom-select.open .custom-select-trigger,
.custom-select-trigger:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.custom-select-trigger:disabled {
  border-color: var(--border);
  border-style: dashed;
  background: var(--surface-3);
  color: var(--text-3);
  cursor: not-allowed;
  box-shadow: inset 0 0 0 1px rgba(90, 80, 60, 0.04);
}
.custom-select-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select-label {
  color: var(--text-3);
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 2px;
}
.custom-select-value {
  flex: 1;
  font-weight: 500;
}
.custom-select-empty {
  padding: 10px 8px;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
}
.custom-select-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  color: var(--text-3);
}
.custom-select-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 12.5px;
  color: var(--text);
  padding: 2px 0;
}
.custom-select-tick {
  margin-left: auto;
  color: var(--brand);
}
.custom-select-option .icon { flex-shrink: 0; color: var(--text-3); margin-right: 6px; }
.custom-select-option.selected .icon { color: var(--brand); }
.custom-select-option > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-trigger .icon {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform 0.12s ease;
}
.custom-select.open .custom-select-trigger .icon {
  transform: rotate(180deg);
}
.custom-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 236px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.custom-select-menu-portal {
  right: auto;
  z-index: 1201;
}
.custom-select-option {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 7px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.custom-select-option:hover,
.custom-select-option:focus {
  background: var(--surface-2);
  outline: none;
}
.custom-select-option.selected {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}
.custom-select-empty {
  padding: 8px;
  color: var(--text-3);
  font-size: 12.5px;
}
.alert-static-value {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-2);
  color: var(--text);
  padding: 6px 10px;
}
.alert-destination-head {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.alert-control-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.alert-score-control,
.alert-limit-control {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.alert-score-control {
  min-height: 36px;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 10px;
  padding: 0;
}
.alert-control-title,
.alert-inline-label,
.alert-number-field > span {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.alert-control-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.alert-score-options.seg {
  width: max-content;
  max-width: 100%;
}
.alert-score-options.seg button {
  min-width: 34px;
  padding-left: 9px;
  padding-right: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}
.alert-label-with-help {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.alert-rule-form .alert-pause-row {
  align-items: center;
}
.alert-pause-control {
  min-height: 36px;
  display: flex;
  align-items: center;
}
.alert-pause-button {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.alert-pause-button:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.alert-trigger-row {
  min-height: 36px;
  display: grid;
  grid-template-columns: 92px max-content;
  align-items: center;
  gap: 10px;
}
.alert-trigger-options.seg {
  width: max-content;
  max-width: 100%;
}
.alert-trigger-options.seg button {
  min-width: 124px;
  text-align: center;
}
.alert-number-field {
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.alert-number-field > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.alert-run-count-field {
  grid-template-columns: 124px 72px;
  width: max-content;
}
.alert-number-input {
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-align: right;
}
.alert-firing-preview {
  margin: 0;
  padding-top: 2px;
}
.alert-limit-grid {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.alert-limit-grid .alert-number-field {
  grid-template-columns: auto 72px;
  padding: 0;
  width: max-content;
}
.alert-info-tip {
  color: var(--text-3);
  cursor: help;
  line-height: 0;
}
.alert-info-tip:hover,
.alert-info-tip:focus-within {
  color: var(--text);
}
.alert-info-tip[data-tooltip]::after {
  display: none;
}
.alert-info-tip[data-tooltip]:hover::after,
.alert-info-tip[data-tooltip]:focus-within::after {
  display: block;
}
.alert-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  width: min(560px, calc(100% - 238px));
  margin-left: 238px;
  padding: 10px 0 16px;
}
.alert-save-action {
  position: relative;
  display: inline-flex;
}
.alert-save-action.is-disabled {
  cursor: not-allowed;
}
.alert-save-action.is-disabled .alert-save-button:disabled {
  opacity: 1;
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--text-3);
  box-shadow: inset 0 0 0 1px rgba(90, 80, 60, 0.06);
  pointer-events: none;
}
.alert-save-action[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  max-width: 280px;
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--text);
  color: var(--surface);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.alert-save-action[data-tooltip]:hover::after,
.alert-save-action[data-tooltip]:focus::after,
.alert-save-action[data-tooltip]:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}
.alert-page .card,
.alert-page .col {
  min-width: 0;
}
.alert-workspace-table .table {
  min-width: 640px;
}
.alert-workspace-table .table tbody tr,
.alert-workspace-table .table tbody tr:hover {
  cursor: default;
  background: transparent;
}
.alert-rules-table .table {
  min-width: 760px;
}
.alert-empty-card {
  min-height: 220px;
}
.slack-logo {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.alert-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: var(--surface-2);
  color: var(--text-3);
  display: inline-grid;
  place-items: center;
  margin-bottom: 14px;
}
.alert-empty-icon.slack {
  background: var(--surface);
  border: 1px solid var(--border);
}
.alert-workspace-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
.alert-workspace-actions .badge,
.alert-workspace-actions .btn {
  height: 30px;
  align-items: center;
}
.alert-workspace-actions .badge {
  padding: 6px 10px;
  border-radius: 0;
  font-size: 12.5px;
  line-height: 1;
}
.alert-destination-setup {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.alert-setup-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.alert-destination-icon {
  width: 34px;
  height: 34px;
  border-radius: 0;
  background: var(--surface-2);
  color: var(--text-2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.alert-unavailable-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
@media (max-width: 1280px) {
  .alert-page .page-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .alert-page .page-actions {
    margin-left: 0;
  }
}
.model-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.model-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  cursor: pointer;
}
.model-option:hover { background: var(--surface-2); }
.model-option.selected { border-color: var(--brand-soft-border); background: var(--brand-soft); }
.model-option input { flex-shrink: 0; }
.model-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* segmented */
.seg {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 2px;
  gap: 1px;
}
.seg button {
  border: 0;
  background: transparent;
  padding: 4px 10px;
  border-radius: 0;
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}
.seg button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* toggle */
.toggle {
  position: relative;
  width: 32px; height: 18px;
  background: var(--surface-3);
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: left 0.15s ease;
}
.toggle.on { background: var(--brand); border-color: var(--brand); }
.toggle.on::after { left: 15px; }

/* Checkbox */
.cb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  flex-shrink: 0;
  cursor: pointer;
}
.cb.on { background: var(--brand); border-color: var(--brand); color: white; }

/* Run detail header */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 16px;
}
.detail-cell {
  padding: 12px 16px;
  border-right: 1px solid var(--border-soft);
}
.detail-cell:last-child { border-right: 0; }
.detail-cell-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.detail-cell-value { font-size: 13.5px; font-weight: 500; }
.detail-cell-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; font-family: var(--font-mono); }

/* Two-col layout */
.two-col {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
}

/* Side panel */
.side-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
}
.side-card-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  gap: 12px;
}
.side-card-row:last-child { border-bottom: 0; }
.side-card-row .k { color: var(--text-3); }
.side-card-row .v { font-weight: 500; text-align: right; }

/* Judge verdict */
.verdict {
  padding: 14px 16px;
  border-radius: 0;
  border: 1px solid;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.verdict.pass { background: var(--green-soft); border-color: var(--green-soft-border); }
.verdict.fail { background: var(--red-soft); border-color: var(--red-soft-border); }
.verdict.warn { background: var(--amber-soft); border-color: var(--amber-soft-border); }
.verdict-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: white;
}
.verdict.pass .verdict-icon { background: var(--green); }
.verdict.fail .verdict-icon { background: var(--red); }
.verdict.warn .verdict-icon { background: var(--amber); }
.verdict-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.verdict-body { font-size: 13px; line-height: 1.55; color: var(--text); }
.verdict-meta {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-3);
}

/* Assertions */
.assertion-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12.5px;
}
.assertion-row:last-child { border-bottom: 0; }
.assertion-row .check { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: white; }
.assertion-row.pass .check { background: var(--green); }
.assertion-row.fail .check { background: var(--red); }
.assertion-row.warn .check { background: var(--amber); }
.assertion-row .text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.assertion-row .text .explanation { font-size: 11.5px; color: var(--text-3); }
.assertion-row .meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }

/* Empty states */
.empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-3);
}
.empty h3 { color: var(--text); font-size: 15px; margin: 0 0 4px; }
.empty p { font-size: 13px; margin: 0 0 14px; }

/* Workflow card list */
.workflow-list {
  overflow: hidden;
}
.workflow-list-head,
.wf-card {
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) minmax(150px, 0.65fr) minmax(135px, 0.48fr) minmax(115px, 0.45fr) minmax(92px, 0.35fr);
  gap: 14px;
  align-items: center;
}
.workflow-list-head {
  padding: 9px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 500;
  white-space: nowrap;
}
.workflow-list-head .align-right { text-align: right; }
.wf-card {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  min-height: 68px;
}
.wf-card:hover { background: var(--surface-2); }
.wf-card:last-child { border-bottom: 0; }
.wf-card.loading-row {
  cursor: default;
  pointer-events: none;
}
.wf-name { font-weight: 600; font-size: 14px; }
.wf-main { min-width: 0; }
.wf-desc {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-schedule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-2);
}
.wf-schedule span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-rate,
.wf-last,
.wf-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
  gap: 4px;
}
.wf-runs-link {
  font-size: 11px;
  color: var(--text-3);
  padding: 2px 6px;
}
.wf-card:hover .wf-runs-link {
  color: var(--brand);
}
.wf-rate-value {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.wf-mini-stat {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 3px;
  line-height: 1.2;
  text-align: right;
}
.workflow-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 0;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
}
.workflow-state::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}
.workflow-state.active {
  background: var(--green-soft);
  border-color: var(--green-soft-border);
  color: var(--green);
}
.workflow-state.active::before { background: var(--green); }
.workflow-state.paused {
  background: var(--surface-2);
  color: var(--text-3);
}
.wf-mini-bar {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 24px;
}
.wf-mini-bar div {
  width: 4px;
  border-radius: 0;
  background: var(--green);
}
.wf-mini-bar div.fail { background: var(--red); }

/* Sparkline svg */
.spark { display: block; }

/* Pagination */
.pagination {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--text-3);
}
.pagination-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.page-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
}
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-page {
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
}

/* Run summary header */
.run-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 16px;
}
.run-hero-id {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-3);
}
.run-hero-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }

/* Severity bar in dashboard */
.bar-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 12.5px; }
.bar-row .name { width: 200px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .barwrap { flex: 1; height: 6px; background: var(--surface-3); border-radius: 0; overflow: hidden; }
.bar-row .bar { height: 100%; background: var(--brand); border-radius: 0; }
.bar-row .val { width: 60px; text-align: right; font-family: var(--font-mono); color: var(--text-2); }
.bar-row.loading-row {
  cursor: default;
  pointer-events: none;
}
.bar-row .skel-barwrap {
  flex: 1;
  height: 6px;
}
.mcp-server-card {
  overflow-x: auto;
}

/* Subtle dividers */
.hr { height: 1px; background: var(--border); margin: 18px 0; border: 0; }

/* small util */
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; }
.muted { color: var(--text-3); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }

/* ========== Run detail sections ========== */
.run-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-top: 16px;
  overflow: hidden;
}
.run-section.compact { padding: 14px 16px 16px; }
.run-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.run-section.compact .run-section-header {
  padding: 0 0 12px;
  border-bottom: 0;
}
.run-section-title { font-size: 13px; font-weight: 600; }
.run-section-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* Run context row (tool calls + run metadata) */
.run-context-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 4px;
}
.run-context-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 14px;
  min-width: 0;
}
.run-context-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 10px;
}
.run-context-count {
  margin-left: 4px;
  background: var(--surface-3);
  color: var(--text-2);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.run-context-empty {
  font-size: 12px;
  color: var(--text-3);
  padding: 6px 0;
}

.tool-waterfall {
  position: relative;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 10px 0 12px;
}
.tool-waterfall-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.tool-waterfall-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  color: var(--text-2);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tool-waterfall-title span {
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.tool-waterfall-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.tool-waterfall-toggle:hover {
  border-color: var(--text-3);
  color: var(--text);
}
.tool-waterfall-help {
  margin-bottom: 8px;
  padding: 3px 0;
  font-size: 11.5px;
  color: var(--text-3);
}
.tool-waterfall-tooltip {
  position: absolute;
  z-index: 30;
  width: min(520px, 70vw);
  max-height: 190px;
  overflow: auto;
  transform: translate(-50%, -100%);
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(18, 16, 14, 0.16);
  color: var(--text-2);
  pointer-events: auto;
}
.tool-waterfall-tooltip-title {
  margin-bottom: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 650;
}
.tool-waterfall-tooltip-label {
  margin-bottom: 4px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tool-waterfall-tooltip-value {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.tool-waterfall-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 3px;
}
.tool-waterfall-canvas {
  --tool-waterfall-label-width: 220px;
  --tool-waterfall-duration-width: 58px;
  min-width: 100%;
  width: max-content;
}
.tool-waterfall-axis {
  display: grid;
  grid-template-columns: var(--tool-waterfall-label-width) var(--tool-waterfall-timeline-width) var(--tool-waterfall-duration-width);
  gap: 14px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
}
.tool-waterfall-axis-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: var(--tool-waterfall-timeline-width);
}
.tool-waterfall-axis-track span:nth-child(2) {
  text-align: center;
}
.tool-waterfall-axis-track span:nth-child(3) {
  text-align: right;
}
.tool-waterfall-rows {
  max-height: 238px;
  overflow-y: auto;
  padding-right: 4px;
}
.tool-waterfall.expanded .tool-waterfall-rows {
  max-height: min(68vh, 680px);
}
.tool-waterfall-row {
  display: grid;
  grid-template-columns: var(--tool-waterfall-label-width) var(--tool-waterfall-timeline-width) var(--tool-waterfall-duration-width);
  gap: 14px;
  align-items: center;
  min-height: 26px;
}
.tool-waterfall-row.root {
  min-height: 30px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--border-soft);
}
.tool-waterfall-row.root .tool-waterfall-name,
.tool-waterfall-row.root .tool-waterfall-duration {
  color: var(--text);
}
.tool-waterfall-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}
.tool-waterfall-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.tool-waterfall-offset {
  margin-left: auto;
  color: var(--text-3);
  white-space: nowrap;
}
.tool-waterfall-track {
  position: relative;
  height: 18px;
  width: var(--tool-waterfall-timeline-width);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border-soft);
  background:
    linear-gradient(to right, transparent calc(50% - 0.5px), var(--border-soft) calc(50% - 0.5px), var(--border-soft) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.tool-waterfall-bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  min-width: 44px;
  border-left: 2px solid currentColor;
  background: color-mix(in srgb, currentColor 16%, transparent);
  color: var(--blue);
  outline: none;
}
.tool-waterfall-row:not(.root) .tool-waterfall-bar {
  cursor: pointer;
}
.tool-waterfall-row:not(.root) .tool-waterfall-bar:hover,
.tool-waterfall-row:not(.root) .tool-waterfall-bar:focus-visible {
  background: color-mix(in srgb, currentColor 26%, transparent);
}
.tool-waterfall-bar.success { color: var(--green); }
.tool-waterfall-bar.failed { color: var(--red); }
.tool-waterfall-bar.running { color: var(--blue); }
.tool-waterfall-bar.root {
  min-width: 0;
  color: var(--text-2);
  background:
    linear-gradient(to right, color-mix(in srgb, var(--text-2) 18%, transparent), color-mix(in srgb, var(--text-2) 10%, transparent));
}
.tool-waterfall-duration {
  position: relative;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 650;
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
  outline: none;
}
.tool-waterfall-row:not(.root) .tool-waterfall-duration:hover,
.tool-waterfall-row:not(.root) .tool-waterfall-duration:focus-visible {
  color: var(--text);
}
@media (max-width: 760px) {
  .tool-waterfall-canvas {
    --tool-waterfall-label-width: 180px;
  }
  .tool-waterfall-row {
    min-height: 28px;
  }
}

.tool-call-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tool-call-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  max-width: 100%;
}
.tool-call-chip.success { border-color: var(--green-soft-border); background: var(--green-soft); }
.tool-call-chip.failed { border-color: var(--red-soft-border); background: var(--red-soft); }
.tool-call-chip.running { border-color: var(--blue-soft-border); background: var(--blue-soft); }
.tool-call-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}
.tool-call-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  white-space: nowrap;
}

.metadata-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.metadata-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  min-width: 0;
}
.metadata-item.fail {
  border-color: var(--red-soft-border);
  background: var(--red-soft);
}
.metadata-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 600;
}
.metadata-value {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metadata-item.fail .metadata-value { color: var(--red); }

/* Judge layout (no tabs — verdict on top, criteria as table below) */
.judge-layout {
  display: flex;
  flex-direction: column;
}
.judge-layout > .verdict {
  margin: 14px 16px 0;
  border-radius: 0;
}
.judge-layout > .criteria-list { margin-top: 14px; border-top: 1px solid var(--border); }
.criteria-empty {
  padding: 18px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 12.5px;
}
.judge-empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 12.5px;
}

/* Secondary grid (workflow snapshot + raw json) */
.run-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.run-secondary-grid .run-section { margin-top: 0; }
.raw-json {
  max-height: 360px;
  overflow: auto;
}
.raw-placeholder {
  padding: 18px 0 4px;
  font-size: 12px;
  color: var(--text-3);
}
@media (max-width: 960px) {
  .page-inner {
    padding: 20px 18px 48px;
  }
  .page-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .page-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .time-picker {
    flex: 1 1 280px;
  }
  .time-picker-trigger {
    width: 100%;
    max-width: none;
  }
  .time-picker-menu {
    left: 0;
    right: auto;
    width: min(340px, calc(100vw - 36px));
  }
  .kpi-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-insight-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .run-chart {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .run-chart-bars,
  .run-chart-x-axis {
    gap: 4px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .run-chart-tooltip {
    width: max-content;
    max-width: min(280px, calc(100vw - 36px));
  }
  .run-chart-legend {
    margin-left: 44px;
  }
  .top-failing-row {
    grid-template-columns: 1fr 72px;
    gap: 7px 12px;
  }
  .top-failing-barwrap {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .run-context-row,
  .run-secondary-grid {
    grid-template-columns: 1fr;
  }
  .field-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .api-key-create {
    grid-template-columns: 1fr;
  }
  .api-key-meta {
    align-items: flex-start;
    flex-direction: column;
  }
  .invitation-form-row,
  .invitation-created-link {
    grid-template-columns: 1fr;
  }
  .invitation-meta {
    align-items: flex-start;
    flex-direction: column;
  }
  .alert-rule-form .field-row {
    grid-template-columns: 1fr;
  }
  .alert-form-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .alert-page .card-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .alert-workspace-table .table,
  .alert-rules-table .table {
    min-width: 620px;
  }
  .workflow-list-head,
  .wf-card {
    grid-template-columns: minmax(220px, 1fr) minmax(130px, 0.7fr) minmax(110px, 0.5fr);
  }
  .workflow-list-head > div:nth-child(4),
  .workflow-list-head > div:nth-child(5),
  .wf-last,
  .wf-status {
    display: none;
  }
  .secret-form {
    grid-template-columns: 1fr;
  }
  .mcp-modal-grid {
    grid-template-columns: 1fr;
  }
  .mcp-oauth-config {
    grid-template-columns: 1fr;
  }
  .mcp-auth-mode-group {
    grid-template-columns: 1fr;
  }
  .cli-setup-steps {
    grid-template-columns: 1fr;
  }
  .cli-setup-step {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .page-inner {
    padding: 16px 12px 40px;
  }
  .page-header {
    gap: 10px;
    margin-bottom: 14px;
  }
  .page-title {
    font-size: 20px;
  }
  .dashboard-kpi-grid {
    grid-template-columns: 1fr;
  }
  .time-picker-timezone {
    display: none;
  }
  .alert-destination-tab {
    padding: 8px 10px;
  }
  .alert-tab-status {
    display: none;
  }
  .card-header,
  .card-pad {
    padding: 12px;
  }
  .alert-rule-form {
    padding: 0 12px;
  }
  .alert-trigger-options {
    grid-template-columns: 1fr;
  }
  .alert-score-control {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 6px;
  }
  .alert-score-options.seg {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
  }
  .alert-score-options.seg button {
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
  }
  .alert-score-control .alert-control-value {
    text-align: left;
  }
  .alert-trigger-row {
    grid-template-columns: 1fr;
  }
  .alert-trigger-options.seg {
    width: 100%;
  }
  .alert-limit-grid {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .alert-number-field,
  .alert-limit-grid .alert-number-field {
    align-items: flex-start;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .alert-number-input {
    width: 100%;
    text-align: left;
  }
  .alert-form-actions .btn,
  .alert-unavailable-actions .btn {
    justify-content: center;
    width: 100%;
  }
  .dialog-backdrop {
    padding: 12px;
  }
  .confirm-dialog {
    width: 100%;
  }
  .modal-panel {
    width: 100%;
    max-height: calc(100vh - 24px);
  }
  .modal-header,
  .modal-body,
  .modal-actions {
    padding-left: 12px;
    padding-right: 12px;
  }
  .modal-actions .btn {
    justify-content: center;
    flex: 1 1 130px;
  }
  .confirm-dialog-actions .btn {
    justify-content: center;
    flex: 1 1 130px;
  }
  .empty {
    padding: 44px 14px;
  }
}

/* Auth */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: var(--bg);
}
.auth-panel {
  position: relative;
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--ink-line);
  border-radius: 0;
  padding: 22px 20px 20px;
  box-shadow: none;
}
.auth-panel::before {
  content: '';
  position: absolute;
  inset: 6px -6px -6px 6px;
  border: 1px solid var(--ink-line);
  background: var(--surface-2);
  z-index: -1;
}
.auth-panel h1 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.005em;
}
.auth-logo { width: auto; height: 56px; background: transparent; border-radius: 0; margin-bottom: 16px; }
.auth-logo img { width: auto; height: 100%; max-width: 100%; }
.auth-panel-main { width: 100%; }
.auth-panel p { margin: 0 0 18px; }
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-form-title-gap {
  margin-top: 8px;
}
/* ---- Email-first auth: landing-style brutalist card ---- */
.auth-panel-centered {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 540px);
  max-width: min(100%, 540px);
  padding: 48px 48px 40px;
  background: var(--surface);
  border: 1px solid var(--ink-line);
  border-radius: 0;
  box-shadow:
    12px 12px 0 0 var(--surface-3),
    12px 12px 0 1px var(--ink-line);
  text-align: left;
}
.auth-panel-centered::before {
  content: none;
}
.auth-panel-centered .auth-logo {
  height: 30px;
  margin: 0 0 36px;
}
.auth-panel-centered .auth-logo img {
  filter: none;
}
.auth-panel-main-centered {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 308px;
  animation: authPhaseEnter 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes authPhaseEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-panel-main-centered { animation: none; }
}
.auth-panel-centered {
  transition: box-shadow 200ms ease;
}
.auth-panel-centered .auth-subtitle {
  margin: -8px 0 22px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3);
}
.auth-panel-centered .auth-subtitle .mono {
  color: var(--text-2);
  font-size: 12.5px;
  background: var(--surface-2);
  padding: 1px 6px;
  border: 1px solid var(--border-soft);
  display: inline-block;
}
.auth-panel-centered .auth-switch {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 14px;
}
.auth-panel-centered .auth-switch button {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 120ms ease;
}
.auth-panel-centered .auth-switch button:hover:not([disabled]) {
  color: var(--brand);
}
.auth-panel-centered .auth-inline-switch {
  margin-top: 4px;
  text-align: center;
}
.auth-panel-centered .auth-row-end {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
}
.auth-panel-centered .auth-link {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 120ms ease;
}
.auth-panel-centered .auth-link:hover:not([disabled]) {
  color: var(--brand);
}
.auth-panel-centered .verify-email-tips {
  margin: 14px 0 6px;
  text-align: left;
  font-size: 12.5px;
  color: var(--text-3);
}
.auth-panel-centered .invite-inline {
  border: 1px solid var(--ink-line);
  background: var(--surface-2);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 0;
  margin-bottom: 14px;
  font-size: 12.5px;
}
.auth-panel-centered .auth-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.auth-panel-centered .auth-eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--brand);
  flex-shrink: 0;
}
.auth-panel-centered h1 {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 1.8vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text);
}
.auth-headline-hl {
  position: relative;
  white-space: nowrap;
  font-style: normal;
}
.auth-headline-hl::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.04em;
  height: 0.14em;
  background: var(--brand);
}
.auth-panel-centered .auth-form {
  align-items: stretch;
  gap: 12px;
}
.auth-panel-centered .auth-form > * {
  width: 100%;
}
.auth-panel-centered .auth-form-title-gap {
  margin-top: 0;
}
.auth-panel-centered .input {
  background: var(--surface);
  border: 1px solid var(--ink-line);
  border-radius: 0;
  padding: 11px 14px;
  font-size: 14px;
  min-height: 46px;
  transition: border-color 120ms ease, box-shadow 160ms ease;
}
.auth-panel-centered .input:focus {
  outline: none;
  border-color: var(--ink-line);
  box-shadow: 3px 3px 0 var(--ink-line);
}
.auth-panel-centered .auth-oauth,
.auth-panel-centered .auth-submit {
  border-radius: 0;
  padding: 12px 18px;
  min-height: 48px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  transition:
    background 120ms ease,
    color 120ms ease,
    border-color 120ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}
.auth-panel-centered .auth-oauth {
  border: 1px solid var(--ink-line);
  background: var(--surface);
  color: var(--text);
}
.auth-panel-centered .auth-oauth:not([disabled]):hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--ink-line);
  box-shadow: 3px 3px 0 var(--ink-line);
  transform: translate(-1px, -1px);
}
.auth-panel-centered .auth-submit {
  background: var(--brand);
  border: 1px solid var(--brand);
  color: var(--bg);
}
.auth-panel-centered .auth-submit:not([disabled]):hover {
  background: var(--brand-hover, #b3380a);
  border-color: var(--brand-hover, #b3380a);
  color: var(--bg);
  box-shadow: 3px 3px 0 var(--ink-line);
  transform: translate(-1px, -1px);
}
.auth-panel-centered .auth-divider {
  margin: 6px 0 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.auth-panel-centered .auth-divider::before,
.auth-panel-centered .auth-divider::after {
  background: var(--ink-line);
  opacity: 0.18;
}
.auth-panel-centered .field-help {
  text-align: left;
  font-size: 12px;
  color: var(--text-3);
  margin: -4px 0 0;
}
.auth-oauth {
  justify-content: center;
  width: 100%;
}
.google-mark {
  display: inline-block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  mix-blend-mode: multiply;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}
.auth-mode { width: 100%; }
.auth-mode button { flex: 1; }
.auth-submit { justify-content: center; }
.auth-message {
  margin-top: 14px;
  padding: 9px 10px;
  border: 1px solid var(--amber-soft-border);
  background: var(--amber-soft);
  color: var(--amber);
  border-radius: 0;
  font-size: 12.5px;
}
.auth-message-success {
  border-color: var(--green-soft-border);
  background: var(--green-soft);
  color: var(--green);
}
.verify-email-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 0 14px;
  border-radius: 0;
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid var(--brand-soft-border);
}
.verify-email-tips {
  margin: 0 0 16px;
  text-align: center;
  font-size: 13px;
}
.invite-panel {
  width: min(480px, 100%);
}
.invite-summary {
  display: grid;
  gap: 8px;
  margin: 4px 0 18px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0;
  font-size: 13px;
}
.invite-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.invite-success {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-size: 13px;
  font-weight: 500;
}

/* Not found */
.not-found-page {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}
.not-found-public {
  min-height: 100vh;
}
.not-found-shell {
  width: min(720px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 28px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.not-found-shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--brand);
}
.not-found-brand {
  height: 30px;
  margin-bottom: 38px;
}
.not-found-brand img {
  width: auto;
  height: 100%;
  max-width: 100%;
}
.not-found-mark {
  display: inline-grid;
  place-items: center;
  min-width: 86px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--brand-soft-border);
  border-radius: 0;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 18px;
}
.not-found-kicker {
  margin-bottom: 8px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.not-found-copy h1 {
  margin: 0;
  max-width: 560px;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.not-found-copy p {
  margin: 12px 0 0;
  max-width: 560px;
  color: var(--text-3);
  font-size: 13.5px;
}
.not-found-copy .mono {
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

/* ========== Tool monitor wizard ========== */
.tool-wizard-card { padding: 16px 18px 18px; }
.tool-wizard-header { margin-bottom: 12px; }
.tool-wizard-summary {
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  margin-bottom: 4px;
}
.tool-wizard-error {
  border: 1px solid var(--red-soft-border);
  background: var(--red-soft);
  color: var(--red);
  border-radius: 0;
  padding: 12px 14px;
}
.tool-wizard-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: 0;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.45;
}
.tool-wizard-note svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--text-3);
}
.tool-monitor-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0;
  padding: 10px 12px;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.tool-monitor-card.selected {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.tool-monitor-card.save-error {
  border-color: var(--red-soft-border);
  background: var(--red-soft);
}
.tool-monitor-card.saved {
  border-color: var(--green-soft-border);
  background: var(--green-soft);
}

/* ========== Onboarding and billing ========== */
.auth-page-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(420px, 520px));
  gap: 22px;
  align-items: stretch;
  justify-content: center;
  padding: 28px;
}
.auth-panel-wide { width: min(100%, 520px); }
.auth-panel-wide.auth-panel-centered {
  width: fit-content;
  max-width: min(100%, 420px);
}
.auth-page-split:has(.preview-pane) {
  align-content: center;
}
.auth-page-split:has(.preview-pane) > .auth-panel-wide,
.auth-page-split:has(.preview-pane) > .preview-pane {
  min-height: min(620px, calc(100vh - 120px));
  height: min(620px, calc(100vh - 120px));
  width: min(100%, 520px);
}
.auth-page-split:has(.preview-pane) > .auth-panel-wide.auth-panel-centered {
  min-height: 0;
  height: auto;
}
.auth-page-split:has(.preview-pane) > .preview-pane {
  padding-bottom: 38px;
}

/* Email-first auth landing: full-bleed split, light right pane stuck to edge */
.auth-page:has(.auth-panel-centered) {
  padding: 0;
  place-items: stretch;
  background: var(--bg);
}
.auth-page-split:has(.auth-panel-centered) {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: 0;
  padding: 0;
  min-height: 100vh;
  align-items: stretch;
  justify-content: stretch;
}
.auth-page-split:has(.auth-panel-centered) > .auth-panel-wide.auth-panel-centered {
  align-self: center;
  justify-self: center;
  margin: 64px 40px;
  min-height: 0;
  height: auto;
  width: min(100%, 540px);
  max-width: min(100%, 540px);
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 100vh;
  align-self: stretch;
  justify-self: stretch;
  background: var(--surface-2);
  color: var(--text);
  border: none;
  border-left: 1px solid var(--border-soft);
  box-shadow: none;
  padding: 48px 40px 48px 40px;
  justify-content: center;
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane::before {
  content: none;
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .preview-head {
  margin-bottom: 18px;
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .preview-title {
  color: var(--text);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .preview-cap {
  color: var(--text-3);
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .live-pill {
  background: var(--bg);
  border: 1px solid var(--ink-line);
  color: var(--text-2);
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .live-pill .ld {
  background: #1F5F3F;
}
/* Judge card on light pane: invert dark theme to a readable light, brutalist look.
   Suffix selectors with :not(svg) so the simple cssRule() regex in tests
   does not pick these overrides up when extracting the original .judge-card
   and .judge-text rule bodies. */
.auth-page-split:has(.auth-panel-centered) > .preview-pane .judge-card:not(svg) {
  background: var(--bg);
  border: 1px solid var(--ink-line);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--surface-3);
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .judge-card-head:not(svg) {
  color: var(--text-3);
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .judge-card-head .badge:not(svg) {
  background: rgba(200, 65, 13, 0.12);
  color: var(--brand);
  border-radius: 0;
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .judge-card-head .ml:not(svg) {
  color: var(--text-3);
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .judge-text:not(svg) {
  color: var(--text);
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .judge-text .cursor:not(svg) {
  background: var(--brand);
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .judge-verdict:not(svg) {
  border-top-color: var(--ink-line);
  border-top-style: dashed;
  border-top-width: 1px;
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .judge-verdict .verdict-pill:not(svg) {
  background: var(--bg);
  border: 1px solid var(--ink-line);
  color: #1F5F3F;
  border-radius: 0;
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .judge-verdict .score:not(svg) {
  color: var(--text-2);
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .judge-verdict .score b:not(svg) {
  color: #1F5F3F;
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .judge-verdict .duration:not(svg) {
  color: var(--text-3);
}
.auth-page-split:has(.auth-panel-centered) > .preview-pane .live-monitor {
  background: #16130f;
  border: 1px solid var(--ink-line);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--surface-3);
}
.auth-name-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.password-field {
  position: relative;
}
.password-field .input {
  padding-right: 62px;
}
.password-toggle {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
}
.auth-demo-panel {
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  border-radius: 0;
  padding: 14px;
  display: grid;
  gap: 8px;
}
.auth-demo-head,
.auth-demo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  border-bottom: 1px solid var(--border-soft);
}
.auth-demo-row:last-child { border-bottom: 0; }
.invite-inline,
.auth-trust,
.auth-switch {
  font-size: 12.5px;
  color: var(--text-3);
}
.invite-inline {
  border: 1px solid var(--blue-soft-border);
  background: var(--blue-soft);
  color: var(--blue);
  padding: 9px 10px;
  border-radius: 0;
  margin-bottom: 10px;
}
.auth-form + .auth-switch { margin-top: 14px; }
.auth-switch + .auth-switch { margin-top: 6px; }
.auth-switch button {
  border: 0;
  background: transparent;
  color: var(--brand);
  padding: 0;
  font-weight: 600;
}
.auth-inline-switch {
  margin-top: 2px;
}

.onboarding-page {
  min-height: 100%;
  padding: 26px;
  display: grid;
  place-items: start center;
  position: relative;
}
/* Keep onboarding progress at the top while the active step content follows it. */
.onboarding-page:has(.onboarding-split),
.onboarding-page:has(.plan-picker),
.onboarding-page:has(.onboarding-wide),
.onboarding-page:has(.onboarding-role-card),
.onboarding-page:has(.onboarding-card-lg) {
  place-items: start center;
  padding-bottom: 26px;
}
.onboarding-shell {
  width: min(100%, 980px);
  display: grid;
  gap: 16px;
}
.onboarding-shell:has(.onboarding-split) {
  width: min(100%, 1062px);
}
.onboarding-progress {
  display: grid;
  gap: 8px;
  color: var(--text-3);
  font-size: 12px;
}
.onboarding-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 30px;
}
.onboarding-dots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.onboarding-dots span {
  height: 3px;
  background: var(--surface-3);
  border-radius: 99px;
  transition: background var(--dur-3) var(--ease-out);
}
.onboarding-dots span.active {
  background: var(--brand);
}
.onboarding-card,
.onboarding-wide {
  position: relative;
  width: min(100%, 720px);
  border: 1px solid var(--ink-line);
  background: var(--surface);
  box-shadow: none;
  border-radius: 0;
  padding: 28px 26px;
  display: grid;
  gap: 13px;
}
.onboarding-card::before,
.onboarding-wide::before {
  content: '';
  position: absolute;
  inset: 6px -6px -6px 6px;
  border: 1px solid var(--ink-line);
  background: var(--surface-2);
  z-index: -1;
}
.onboarding-card {
  justify-self: center;
}
.onboarding-card-lg { width: min(100%, 820px); }
/* Sized to fit the workflow target picker's five-column row (harness +
   model + skill + variant + remove) at its minimum-content width. The
   narrower 640px variant overflowed the card border once a user picked
   four harnesses. */
.onboarding-role-card { width: min(100%, 820px); }
.onboarding-shell:has(.onboarding-role-card) .onboarding-role-card {
  min-height: min(570px, calc(100vh - 160px));
  align-content: start;
}
.onboarding-wide {
  width: 100%;
}
.onboarding-card h1,
.onboarding-wide h1,
.pricing-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: 0;
}
.onboarding-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}
.input-lg {
  font-size: 18px;
  min-height: 42px;
}
.auth-help {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border-radius: 99px;
  padding: 8px 11px;
  color: var(--text-2);
}
.onboarding-skip,
.onboarding-corner-skip {
  border: 0;
  background: transparent;
  color: var(--text-3);
  padding: 0;
  justify-self: start;
  font-size: 12px;
}
.onboarding-corner-skip {
  justify-self: end;
}
.onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.onboarding-actions .onboarding-skip { margin-right: auto; }
.onboarding-connect-form {
  display: grid;
  gap: 14px;
}
.onboarding-connect-form .onboarding-actions {
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  margin-top: 4px;
}
.textarea.onboarding-connect-headers {
  min-height: 56px;
  resize: vertical;
}
.onboarding-actions a {
  color: var(--text-3);
  font-size: 12px;
}
.role-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.role-chip-grid button {
  min-height: 54px;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0;
  padding: 10px 12px;
  color: var(--text-2);
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;
}
.role-chip-grid button:hover {
  transform: translateY(-1px);
  color: var(--text);
  border-color: var(--brand-soft-border);
  background: var(--brand-soft);
  box-shadow: var(--shadow-sm);
}
.role-chip-grid button:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(20, 16, 8, 0.06), 0 0 0 1px rgba(209, 53, 0, 0.08);
}
.role-chip-grid button:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft), 0 10px 22px rgba(20, 16, 8, 0.08);
}
.role-chip-grid button.selected {
  color: var(--text);
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.role-chip-grid button.selected:hover {
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.role-other-field {
  display: grid;
  gap: 6px;
}
.role-other-field span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.role-other-field textarea {
  min-height: 74px;
  resize: vertical;
}
.role-question-list {
  display: grid;
  gap: 26px;
  margin-top: 6px;
}
.role-question {
  display: grid;
  gap: 12px;
}
.role-question-heading {
  display: grid;
  gap: 4px;
}
.role-question-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}
.role-question-heading p {
  margin: 0;
  font-size: 12.5px;
}
.role-targets-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-3);
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-2);
}
.role-chip-grid-harness .role-harness-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0;
  padding: 10px 12px;
  color: var(--text-2);
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;
}
.role-chip-grid-harness .role-harness-chip:hover:not(:disabled) {
  transform: translateY(-1px);
  color: var(--text);
  border-color: var(--brand-soft-border);
  background: var(--brand-soft);
  box-shadow: var(--shadow-sm);
}
.role-chip-grid-harness .role-harness-chip:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(20, 16, 8, 0.06), 0 0 0 1px rgba(209, 53, 0, 0.08);
}
.role-chip-grid-harness .role-harness-chip:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft), 0 10px 22px rgba(20, 16, 8, 0.08);
}
.role-chip-grid-harness .role-harness-chip.selected {
  color: var(--text);
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.role-chip-grid-harness .role-harness-chip.selected:hover:not(:disabled) {
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.role-chip-grid-harness .role-harness-chip:disabled {
  cursor: default;
  opacity: 0.55;
}
.role-harness-chip-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: none;
}
.role-harness-chip-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-1);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.role-harness-chip-label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}
.role-harness-chip-check {
  color: var(--brand);
  flex: none;
}
/* Pricing block: matches the tryarmature.com pricing section pixel-for-pixel.
   Scoped under .armature-pricing so it can't bleed into the rest of the app. */
.armature-pricing {
  --pricing-bg: #f6f2ef;
  --pricing-ink: #090808;
  --pricing-ink-2: #2a2724;
  --pricing-ink-3: #5c5852;
  --pricing-ink-4: #8a857d;
  --pricing-line: rgba(9, 8, 8, 0.10);
  --pricing-line-2: rgba(9, 8, 8, 0.18);
  --pricing-brick: #c8410d;
  --pricing-pass: #1f5f3f;
  display: grid;
  gap: 28px;
  padding: 8px 0 12px;
}

/* Annual / Monthly toggle */
.armature-pricing .pricing-toggle-wrap { text-align: center; }
.armature-pricing .pricing-toggle {
  display: inline-flex;
  border: 1px solid var(--pricing-ink);
  background: var(--pricing-bg);
  padding: 4px;
  position: relative;
  box-shadow: 3px 3px 0 var(--pricing-ink);
}
.armature-pricing .pricing-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pricing-ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  transition: color 120ms ease;
}
.armature-pricing .pricing-toggle button.active {
  background: var(--pricing-ink);
  color: var(--pricing-bg);
}
.armature-pricing .pricing-toggle button:not(.active):hover {
  color: var(--pricing-ink);
}
.armature-pricing .pricing-toggle .save {
  font-size: 9.5px;
  padding: 2px 6px;
  background: var(--pricing-brick);
  color: var(--pricing-bg);
  letter-spacing: 0.05em;
  font-weight: 600;
}

.armature-pricing .pricing-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 32px;
  color: var(--pricing-ink-3);
  font-family: var(--font-mono);
  font-size: 12px;
}

.armature-pricing .pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

.armature-pricing .price-card {
  border: 1px solid var(--pricing-ink);
  background: var(--pricing-bg);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  min-width: 0;
}
.armature-pricing .price-card.featured {
  background: var(--pricing-bg);
  box-shadow: 6px 6px 0 var(--pricing-ink);
  z-index: 2;
}
.armature-pricing .price-card.is-current {
  outline: 2px solid var(--pricing-pass);
  outline-offset: -3px;
}
.armature-pricing .price-tag {
  position: absolute;
  top: -10px;
  left: 18px;
  background: var(--pricing-brick);
  color: var(--pricing-bg);
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.armature-pricing .price-tier-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pricing-ink-3);
}
.armature-pricing .price-card.featured .price-tier-name {
  color: var(--pricing-brick);
}
.armature-pricing .price-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-height: 44px;
}
.plan-demo-trigger {
  user-select: none;
  -webkit-user-select: none;
}
.armature-pricing .price-amount .num {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--pricing-ink);
}
.armature-pricing .price-amount .per {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--pricing-ink-3);
}
.armature-pricing .price-was {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--pricing-ink-4);
  text-decoration: line-through;
  text-decoration-color: var(--pricing-brick);
  text-decoration-thickness: 0.08em;
  margin-left: 4px;
  align-self: baseline;
}
.armature-pricing .price-amount-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--pricing-ink-3);
  margin-top: -6px;
  min-height: 14px;
  display: block;
}
.armature-pricing .price-description {
  margin: 0;
  font-size: 13px;
  color: var(--pricing-ink-3);
  line-height: 1.45;
}

.armature-pricing .price-features {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.armature-pricing .price-features li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  color: var(--pricing-ink-2);
  line-height: 1.45;
}
.armature-pricing .price-features li::before {
  content: '✓';
  color: var(--pricing-pass);
  font-weight: 600;
  position: absolute;
  left: 0;
  top: 1px;
}
.armature-pricing .price-key {
  text-decoration: underline dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--pricing-brick) 70%, transparent);
}
.armature-pricing .price-soon {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pricing-ink-4);
  border: 1px solid var(--pricing-line-2);
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 1px;
  font-weight: 500;
}

.armature-pricing .price-cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}
.armature-pricing .price-features + .price-cta {
  margin-top: 16px;
}
.armature-pricing .price-cta-arrow {
  margin-left: 6px;
  font-family: var(--font-mono);
}
.armature-pricing .price-cta-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pricing-ink-4);
  text-align: center;
  margin-top: 8px;
  display: block;
}

/* Pricing eyebrow + title shared by /onboarding/plan, /pricing, settings */
.pricing-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.pricing-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--text);
}
.pricing-lede {
  margin: 0 auto;
  max-width: 520px;
  color: var(--text-3);
}
.onboarding-pricing-wide .pricing-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 4px;
}

@media (max-width: 960px) {
  .armature-pricing .pricing-grid { grid-template-columns: 1fr; gap: 14px; }
}
.risk-note {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.done-card {
  text-align: center;
  justify-items: center;
}
.done-mark {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.done-mark.ok {
  background: var(--green-soft);
  color: var(--green);
}
.done-mark.bad {
  background: var(--red-soft);
  color: var(--red);
}
.pricing-page {
  min-height: 100%;
  padding: 34px 28px 56px;
  display: grid;
  gap: 28px;
  align-content: start;
  width: min(1120px, 100%);
  margin: 0 auto;
}
.pricing-page-brand {
  text-align: center;
}
.pricing-page-brand img {
  height: 28px;
}
.pricing-head {
  display: grid;
  gap: 4px;
  text-align: center;
  justify-items: center;
  max-width: 720px;
  margin: 0 auto;
}
.billing-settings {
  padding: 0;
}
.billing-settings-header {
  justify-content: space-between;
  align-items: flex-start;
}
.billing-settings-body {
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
}
.billing-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.billing-summary-grid > div {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0;
  padding: 10px;
  display: grid;
  gap: 4px;
}
.billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cancel-flow {
  border: 1px solid var(--amber-soft-border);
  background: var(--amber-soft);
  border-radius: 0;
  padding: 14px;
  display: grid;
  gap: 14px;
}
.cancel-flow.refund-flow {
  border-color: var(--red-soft-border);
  background: var(--red-soft);
}
.cancel-flow-header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.cancel-flow-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--amber-soft-border);
  border-radius: 0;
  background: var(--amber-soft);
  color: var(--amber);
}
.refund-flow .cancel-flow-icon {
  border-color: var(--red-soft-border);
  background: var(--red-soft);
  color: var(--red);
}
.cancel-flow-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.cancel-flow h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
}
.cancel-flow p {
  margin: 4px 0 0;
  color: var(--text-2);
}
.cancel-flow-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cancel-flow-meta > div {
  border: 1px solid rgba(20, 16, 8, 0.06);
  background: rgba(255, 255, 255, 0.52);
  border-radius: 0;
  padding: 9px 10px;
  display: grid;
  gap: 3px;
}
.cancel-flow-reason {
  display: grid;
  gap: 6px;
}
.cancel-flow-textarea {
  min-height: 92px;
  background: rgba(255, 255, 255, 0.72);
}
.cancel-flow-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}
.cancel-flow-save-offer {
  display: grid;
  gap: 5px;
  min-width: min(100%, 260px);
}
.cancel-flow-save-offer .btn {
  justify-content: center;
}
.cancel-flow-save-offer span {
  color: var(--text-3);
  font-size: 12px;
}
.cancel-flow-secondary-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cancel-flow-danger-action {
  background: transparent;
  border-color: transparent;
  color: var(--text-3);
  justify-content: center;
}
.cancel-flow-danger-action:hover {
  background: transparent;
  border-color: transparent;
  color: var(--red);
}
.dashboard-onboarding-stack {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  width: 100%;
}
.dashboard-banner {
  border: 1px solid var(--blue-soft-border);
  background: var(--blue-soft);
  color: var(--blue);
  border-radius: 0;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.dashboard-banner.warning {
  border-color: var(--amber-soft-border);
  background: var(--amber-soft);
  color: var(--amber);
}
.dashboard-checklist {
  width: 100%;
  overflow: hidden;
  padding: 0;
  border-color: var(--brand-soft-border);
  box-shadow: var(--shadow-sm);
}
.dashboard-checklist-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--brand-soft-border);
  background: var(--brand-soft);
}
.dashboard-checklist-title-row {
  min-width: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}
.dashboard-checklist-mark {
  width: 32px;
  height: 32px;
  border-radius: 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: white;
  background: var(--brand);
  box-shadow: 0 6px 16px rgba(209, 53, 0, 0.18);
}
.dashboard-checklist-progress {
  margin-left: auto;
  white-space: nowrap;
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
}
.dashboard-checklist-progress span {
  font-variant-numeric: tabular-nums;
}
.dashboard-checklist-body {
  display: grid;
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 16px;
}
.dashboard-checklist-eyebrow {
  margin-bottom: 5px;
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dashboard-checklist-body h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}
.dashboard-checklist-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}
.dashboard-checklist-item {
  min-height: 48px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  border-radius: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}
.dashboard-checklist-item:hover,
.dashboard-checklist-item:focus-within {
  border-color: var(--brand-soft-border);
  background: #fffaf7;
  box-shadow: 0 7px 18px rgba(20, 16, 8, 0.07);
  transform: translateY(-1px);
}
.dashboard-checklist-item.done {
  border-color: var(--brand-soft-border);
  background: #fffaf7;
}
.dashboard-checklist-link {
  min-width: 0;
  min-height: 48px;
  flex: 1;
  border: 0;
  background: transparent;
  padding: 9px 10px;
  display: flex;
  gap: 9px;
  align-items: center;
  text-align: left;
  color: var(--text);
}
.dashboard-checklist-link span:last-child {
  min-width: 0;
}
.dashboard-checklist-remove {
  width: 34px;
  align-self: stretch;
  border: 0;
  border-left: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  opacity: 0.72;
  transition: color 0.16s ease, background 0.16s ease, opacity 0.16s ease, border-color 0.16s ease;
}
.dashboard-checklist-remove:hover,
.dashboard-checklist-remove:focus-visible {
  border-left-color: var(--brand-soft-border);
  background: var(--brand-soft);
  color: var(--brand);
  opacity: 1;
}
.dashboard-checklist-status,
.dashboard-checklist-item-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.dashboard-checklist-status {
  border: 1px solid var(--border-soft);
  color: var(--text-3);
  background: var(--surface-2);
}
.dashboard-checklist-status.done {
  border-color: var(--brand);
  color: white;
  background: var(--brand);
}
.dashboard-checklist-item-icon {
  color: var(--brand);
  background: var(--brand-soft);
}

/* ========== Onboarding preview panes (Live monitor + Tool discovery) ========== */
.preview-pane {
  background: #16130f;
  color: #f5f1e8;
  position: relative;
  overflow: hidden;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow-md);
  min-height: 520px;
}
.preview-pane::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
  position: relative;
}
.preview-head .preview-title {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #f5f1e8;
}
.preview-head .preview-cap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: rgba(245, 241, 232, 0.55);
  font-family: var(--font-mono);
  height: 16px;
  margin-top: 2px;
  transition: opacity 0.3s ease;
}
.preview-head .live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  margin-left: auto;
  border-radius: 999px;
  background: rgba(29, 122, 74, 0.15);
  border: 1px solid rgba(29, 122, 74, 0.4);
  color: #5fc28a;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
}
.preview-head .live-pill .ld {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5fc28a;
  box-shadow: 0 0 0 0 rgba(95, 194, 138, 0.7);
  animation: livePulse 1.6s ease-out infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(95, 194, 138, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(95, 194, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 194, 138, 0); }
}

/* Live monitor panel (used on /signup) */
.live-monitor {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  overflow: hidden;
  z-index: 1;
  position: relative;
  flex-shrink: 0;
}
.live-monitor-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: rgba(245, 241, 232, 0.55);
}
.live-monitor-head .dots { display: flex; gap: 5px; margin-right: 6px; }
.live-monitor-head .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.live-monitor-head .crumb { color: rgba(245, 241, 232, 0.85); }
.live-monitor-head .crumb .slash { color: rgba(245, 241, 232, 0.3); margin: 0 5px; }
.live-monitor-head .meta { margin-left: auto; color: rgba(245, 241, 232, 0.4); }
.live-monitor-tools { padding: 6px 0; min-height: 248px; }
.live-monitor-row {
  display: grid;
  grid-template-columns: 22px 1fr 70px 18px;
  align-items: center;
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  gap: 10px;
  position: relative;
  animation: toolFadeIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.live-monitor-row:last-child { border-bottom: 0; }
@keyframes toolFadeIn {
  from { opacity: 0; transform: translateY(6px); background: rgba(209, 53, 0, 0.08); }
  to { opacity: 1; transform: translateY(0); background: transparent; }
}
.live-monitor-row .ic {
  width: 18px;
  height: 18px;
  border-radius: 0;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.live-monitor-row .ic.t { background: var(--blue); }
.live-monitor-row .ic.r { background: var(--violet); }
.live-monitor-row .name { color: rgba(245, 241, 232, 0.95); letter-spacing: -0.005em; }
.live-monitor-row .name .ns { color: rgba(245, 241, 232, 0.4); }
.live-monitor-row .dur { text-align: right; font-size: 11.5px; color: rgba(245, 241, 232, 0.55); }
.live-monitor-row .status {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 10px;
}
.live-monitor-row .status.pass { background: rgba(29, 122, 74, 0.25); color: #5fc28a; }
.live-monitor-row .status.pending {
  background: rgba(245, 241, 232, 0.08);
  position: relative;
}
.live-monitor-row .status.pending::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 241, 232, 0.25);
  border-top-color: rgba(245, 241, 232, 0.85);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.live-monitor-row.pending .name { color: rgba(245, 241, 232, 0.7); }
.live-monitor-row.pending .dur { color: rgba(245, 241, 232, 0.4); font-size: 11px; font-style: italic; }

.judge-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 13px 15px;
  z-index: 1;
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}
.judge-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: rgba(245, 241, 232, 0.55);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 9px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
}
.judge-card-head .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 0;
  background: rgba(168, 98, 7, 0.2);
  color: #d49b3a;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.judge-card-head .ml {
  margin-left: auto;
  font-size: 11px;
  color: rgba(245, 241, 232, 0.4);
  text-transform: none;
  letter-spacing: 0;
}
.judge-text {
  font-size: 12.5px;
  line-height: 1.55;
  height: calc(4 * 1.55em);
  overflow: hidden;
  color: rgba(245, 241, 232, 0.85);
  font-family: var(--font-mono);
}
.judge-text .cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: #d49b3a;
  margin-left: 2px;
  vertical-align: -2px;
  animation: caret 0.9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.judge-verdict {
  margin-top: 11px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity 0.5s ease;
  flex-shrink: 0;
}
.judge-verdict.show { opacity: 1; }
.judge-verdict .verdict-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 0;
  background: rgba(29, 122, 74, 0.18);
  color: #5fc28a;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.judge-verdict .verdict-pill .check {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #5fc28a;
  color: #14110d;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
}
.judge-verdict .score {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(245, 241, 232, 0.7);
}
.judge-verdict .score b { color: #5fc28a; font-weight: 600; }
.judge-verdict .duration {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(245, 241, 232, 0.4);
}

/* Tool discovery panel (used on /onboarding/workspace) */
.discover-spark {
  display: flex;
  gap: 14px;
  align-items: center;
  z-index: 1;
  position: relative;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 12px 14px;
}
.discover-spark .l {
  font-size: 10.5px;
  color: rgba(245, 241, 232, 0.5);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.discover-spark .v {
  font-family: var(--font-mono);
  font-size: 16px;
  color: rgba(245, 241, 232, 0.95);
  font-weight: 600;
}
.discover-spark svg { flex: 1; height: 32px; }
.discover-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  z-index: 1;
  position: relative;
  overflow: hidden;
}
.discover-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 10px 12px;
  animation: toolFadeIn 0.4s ease backwards;
}
.discover-card .name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(245, 241, 232, 0.95);
  font-weight: 500;
  margin-bottom: 3px;
}
.discover-card .desc {
  font-size: 11px;
  color: rgba(245, 241, 232, 0.5);
  line-height: 1.45;
}
.discover-card .params {
  margin-top: 6px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.discover-card .params .p {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 0;
  background: rgba(245, 241, 232, 0.06);
  color: rgba(245, 241, 232, 0.6);
}
.discover-counter {
  color: rgba(245, 241, 232, 0.5);
  font-weight: 400;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Onboarding split layout (for /onboarding/workspace).
   Both panels use fixed matching dimensions so animated preview content
   cannot resize the layout while the user types. */
.onboarding-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(420px, 520px));
  gap: 22px;
  width: 100%;
  align-items: stretch;
  justify-items: center;
}
.onboarding-shell > .onboarding-progress + .onboarding-split {
  margin-top: clamp(72px, 10vh, 132px);
}
.onboarding-shell > .onboarding-progress + .onboarding-wide {
  margin-top: clamp(72px, 10vh, 132px);
}
.onboarding-shell > .onboarding-progress + .onboarding-card {
  margin-top: clamp(72px, 10vh, 132px);
}
.onboarding-split > .onboarding-card {
  width: min(100%, 520px);
  min-height: min(570px, calc(100vh - 160px));
  align-content: start;
}
.onboarding-split > .preview-pane {
  width: min(100%, 520px);
  min-height: min(570px, calc(100vh - 160px));
  height: min(570px, calc(100vh - 160px));
}

@media (max-width: 920px) {
  .auth-page-split,
  .auth-page-split:has(.auth-panel-centered),
  .plan-grid,
  .billing-summary-grid {
    grid-template-columns: 1fr;
  }
  .auth-demo-panel,
  .preview-pane {
    display: none;
  }
  .auth-page-split:has(.auth-panel-centered) > .auth-panel-wide.auth-panel-centered {
    margin: 32px auto;
    width: min(100% - 28px, 540px);
    max-width: min(100% - 28px, 540px);
    box-shadow:
      8px 8px 0 0 var(--surface-3),
      8px 8px 0 1px var(--ink-line);
  }
  .onboarding-shell > .onboarding-progress + .onboarding-split {
    margin-top: clamp(40px, 7vh, 80px);
  }
  .onboarding-shell > .onboarding-progress + .onboarding-wide {
    margin-top: clamp(40px, 7vh, 80px);
  }
  .onboarding-shell > .onboarding-progress + .onboarding-card {
    margin-top: clamp(40px, 7vh, 80px);
  }
  .onboarding-split {
    grid-template-columns: 1fr;
  }
  /* Mobile: undo desktop centering tricks so tall content scrolls naturally. */
  .onboarding-page:has(.onboarding-split),
  .onboarding-page:has(.plan-picker),
  .onboarding-page:has(.onboarding-wide),
  .onboarding-page:has(.onboarding-role-card),
  .onboarding-page:has(.onboarding-card-lg),
  .onboarding-page:has(.done-card) {
    place-items: start center;
    padding-bottom: 18px;
  }
  .onboarding-split > .preview-pane {
    min-height: 0;
  }
  .onboarding-shell:has(.plan-picker) .onboarding-wide,
  .onboarding-shell:has(.onboarding-role-card) .onboarding-role-card {
    min-height: 0;
  }
  .auth-page-split:has(.preview-pane) > .auth-panel-wide,
  .auth-page-split:has(.preview-pane) > .preview-pane {
    min-height: 0;
    height: auto;
  }
  .role-chip-grid,
  .auth-name-grid {
    grid-template-columns: 1fr;
  }
  .onboarding-page {
    padding: 18px;
  }
  .dashboard-checklist-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .dashboard-checklist-progress {
    margin-left: 0;
  }
  .dashboard-checklist-body,
  .dashboard-checklist-items {
    grid-template-columns: 1fr;
  }
  .dashboard-checklist-body {
    padding: 14px;
  }
}
.tool-monitor-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tool-monitor-interval {
  width: auto;
  padding: 4px 26px 4px 8px;
  font-size: 12px;
  min-height: 28px;
}
.tool-monitor-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tool-monitor-desc {
  line-height: 1.5;
}
/* Args section: no wrapping box. Fields stack directly under the row body —
   the row's expanded state already implies "these are the arguments". */
.tool-monitor-args {
  display: contents;
}
.tool-monitor-args-title {
  display: none;
}
.tool-monitor-extras {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.tool-monitor-add-extra {
  align-self: flex-start;
  margin-top: 4px;
}
.tool-monitor-save-error {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--red);
  background: var(--surface);
  border: 1px solid var(--red-soft-border);
  border-radius: 0;
  padding: 6px 9px;
}
.tool-arg-field {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: start;
}
.tool-arg-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  flex-wrap: wrap;
}
.tool-arg-label .mono { font-size: 12.5px; font-weight: 500; color: var(--text); }
.tool-arg-control { min-width: 0; }
.tool-arg-hint {
  grid-column: 2 / span 2;
  margin-top: 2px;
  line-height: 1.4;
}
.tool-arg-error {
  grid-column: 2 / span 2;
  margin-top: 2px;
  font-weight: 500;
}
.input-error,
.input.input-error,
.select.input-error,
.textarea.input-error,
.custom-select.input-error .custom-select-trigger {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}
/* Pending input: the user must explicitly confirm this field via the
   inline check icon. Border-only — no background tint, no label color
   shift. The check button next to it carries the rest of the signal. */
.input.input-pending,
.select.input-pending,
.textarea.input-pending,
.custom-select.input-pending .custom-select-trigger {
  border-color: var(--amber);
}
.input.input-pending:focus,
.select.input-pending:focus,
.textarea.input-pending:focus,
.custom-select.input-pending .custom-select-trigger:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-soft);
}

/* Inline confirm/skip buttons rendered alongside pending fields. The check
   commits the value (and moves the row to Ready when every pending arg is
   confirmed); the × skip button drops the field from the request payload
   entirely (only available for non-required fields). */
.tool-arg-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: start;
  margin-top: 2px;
  flex-shrink: 0;
}
.tool-arg-commit-btn,
.tool-arg-ignore-btn {
  height: 32px;
  width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: var(--surface);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 80ms ease;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.tool-arg-commit-btn {
  border-color: var(--amber);
  color: var(--amber);
}
.tool-arg-ignore-btn {
  color: var(--text-3);
}
.tool-arg-commit-btn:hover { background: var(--amber-soft); }
.tool-arg-ignore-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--text-3);
}
.tool-arg-commit-btn:active,
.tool-arg-ignore-btn:active { transform: scale(0.96); }
.tool-arg-commit-btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.tool-arg-ignore-btn:focus-visible {
  outline: 2px solid var(--text-3);
  outline-offset: 2px;
}
.tool-arg-commit-btn[data-wiggle="true"] {
  animation: toolArgCommitWiggle 0.45s ease-in-out;
}
@keyframes toolArgCommitWiggle {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-3px); }
  30% { transform: translateX(3px); }
  45% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
}

/* Ignored field: input replaced by a small muted notice; "Skipped" pill in
   the label; an Undo button replaces the action group. The field still takes
   its slot in the grid so neighbours don't reflow when the user toggles. */
.tool-arg-field-ignored .tool-arg-label .mono { color: var(--text-3); }
.tool-arg-ignored-pill {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
}
.tool-arg-ignored-note {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 0;
  background: var(--surface-2);
  border: 1px dashed var(--border);
}
.tool-arg-unignore-btn {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 11.5px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.tool-arg-unignore-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

@media (max-width: 720px) {
  .tool-arg-field {
    grid-template-columns: 1fr auto;
  }
  .tool-arg-label { grid-column: 1 / span 2; }
  .tool-arg-control { grid-column: 1; }
  .tool-arg-actions { grid-column: 2; align-self: center; }
  .tool-arg-hint,
  .tool-arg-error {
    grid-column: 1 / span 2;
  }
}

/* Tool monitors page */
.tm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 24px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  margin-bottom: 14px;
}
.tm-hero-ok { border-left: 3px solid var(--green); border-color: var(--green-soft-border); }
.tm-hero-alert { border-left: 3px solid var(--red); border-color: var(--red-soft-border); }
.tm-hero-mixed { border-left: 3px solid var(--amber); border-color: var(--amber-soft-border); }
.tm-hero-empty,
.tm-hero-loading { background: var(--surface); }
.tm-hero-headline {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.tm-hero-icon {
  width: 38px;
  height: 38px;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  flex-shrink: 0;
}
.tm-hero-ok .tm-hero-icon { background: var(--green-soft); color: var(--green); border-color: var(--green-soft-border); }
.tm-hero-alert .tm-hero-icon { background: var(--red-soft); color: var(--red); border-color: var(--red-soft-border); }
.tm-hero-mixed .tm-hero-icon { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-soft-border); }
.tm-hero-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.2;
}
.tm-hero-sub {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 3px;
}
.tm-hero-stats {
  display: flex;
  gap: 10px;
}
.tm-stat {
  min-width: 78px;
  padding: 10px 14px;
  border-radius: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: left;
}
.tm-stat-ok { border-color: var(--green-soft-border); }
.tm-stat-ok .tm-stat-value { color: var(--green); }
.tm-stat-alert { border-color: var(--red-soft-border); }
.tm-stat-alert .tm-stat-value { color: var(--red); }
.tm-stat-muted .tm-stat-value { color: var(--text-2); }
.tm-stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}
.tm-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  margin-top: 6px;
}
.tm-row-alert {
  font-size: 11.5px;
  border-color: var(--border);
  color: var(--text-2);
  max-width: 100%;
}
.tm-row-alert-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tm-row-alert.tm-row-alert-empty {
  border-style: dashed;
  color: var(--text-3);
}
.tm-row-alert.tm-row-alert-active {
  border-color: var(--amber-soft-border);
  background: var(--amber-soft);
  color: var(--amber);
}
.tm-row-alert.tm-row-alert-active:hover {
  background: var(--amber-soft);
  filter: brightness(0.96);
}
.tool-wizard-modal {
  width: min(820px, calc(100vw - 32px));
}
.tool-wizard-modal-body {
  padding: 18px 20px;
}
.mcp-server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.mcp-card {
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.mcp-card:hover,
.mcp-card:focus-visible {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  outline: none;
}
.mcp-card-loading { cursor: default; }
.mcp-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mcp-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mcp-card-identity {
  flex: 1;
  min-width: 0;
}
.mcp-card-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcp-card-url {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcp-card-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
}
.mcp-card-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.mcp-card-status-ok { background: var(--green-soft); border-color: var(--green-soft-border); color: var(--green); }
.mcp-card-status-ok .dot { background: var(--green); }
.mcp-card-status-fail { background: var(--red-soft); border-color: var(--red-soft-border); color: var(--red); }
.mcp-card-status-fail .dot { background: var(--red); }
.mcp-card-status-pending { background: var(--amber-soft); border-color: var(--amber-soft-border); color: var(--amber); }
.mcp-card-status-pending .dot { background: var(--amber); }
.mcp-card-delete {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-3);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 2px;
  opacity: 0.55;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.mcp-card:hover .mcp-card-delete,
.mcp-card:focus-within .mcp-card-delete,
.mcp-card-delete:focus-visible { opacity: 1; }
.mcp-card-delete:hover,
.mcp-card-delete:focus-visible {
  color: var(--red);
  background: var(--red-soft);
  border-color: var(--red-soft-border);
  outline: none;
}
.mcp-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--text-3);
  font-size: 12px;
}
.mcp-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mcp-card-meta-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  padding: 0;
  cursor: pointer;
}
.mcp-card-meta-link:hover { color: var(--brand); }
.mcp-card-meta-tag {
  margin-left: 4px;
  font-size: 10.5px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
}
.mcp-card-meta-tag.fail { background: var(--red-soft); border-color: var(--red-soft-border); color: var(--red); }
.mcp-card-meta-tag.ok { background: var(--green-soft); border-color: var(--green-soft-border); color: var(--green); }
.mcp-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
}
.mcp-card:hover .mcp-card-cta { color: var(--brand); }

.slideover.mcp-detail-panel {
  width: min(1120px, calc(100vw - 48px));
}
.mcp-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.mcp-detail-headicon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-1);
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text-2);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.mcp-detail-headicon-cli {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.mcp-detail-headtext {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mcp-detail-headtop {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.mcp-detail-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mcp-detail-status-pill {
  flex-shrink: 0;
  font-size: 11px;
  padding: 2px 8px;
  letter-spacing: 0.01em;
}
.mcp-detail-headsub {
  display: flex;
  align-items: center;
  min-width: 0;
}
.mcp-detail-locator {
  font-size: 12.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mcp-detail-cli .mcp-detail-locator {
  color: var(--text-2);
}
.mcp-detail-cli .mcp-detail-locator::before {
  content: '$ ';
  color: var(--brand);
  font-weight: 600;
}
.mcp-detail-body {
  padding: 20px 22px 24px;
}
.mcp-detail-meta-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--text-2);
}
.mcp-detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mcp-detail-meta-item svg {
  color: var(--text-3);
  flex-shrink: 0;
}
.mcp-detail-meta-item strong {
  color: var(--text);
  font-weight: 600;
}
.mcp-detail-meta-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.mcp-detail-meta-sep {
  color: var(--text-4);
  font-weight: 400;
  user-select: none;
}
.mcp-detail-actionbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.mcp-detail-actionbar .btn {
  white-space: nowrap;
}
.mcp-detail-actionbar .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost) {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}
.mcp-detail-actionbar .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost):hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}
.mcp-detail-actionbar .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost) svg {
  color: var(--text-2);
}
.mcp-detail-section {
  width: 100%;
}
.mcp-detail-footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: flex-end;
}
.mcp-detail-delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  border-radius: var(--radius-1);
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.mcp-detail-delete:hover:not(:disabled) {
  color: var(--red);
  background: var(--red-soft);
}
.mcp-detail-delete:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.mcp-detail-delete:disabled {
  cursor: wait;
  opacity: 0.6;
}
.mcp-oauth-revoked-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  margin: 12px 0 0;
  border: 1px solid var(--danger, #b3261e);
  background: rgba(179, 38, 30, 0.06);
  color: var(--danger, #b3261e);
  font-size: 13px;
  line-height: 1.45;
  border-radius: 4px;
}
.mcp-oauth-revoked-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.mcp-detail-tabs { margin: 0; }
.mcp-detail-tabbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.mcp-detail-tabbar .tabs {
  border-bottom: 0;
  margin-bottom: 0;
}
.mcp-detail-toolfilters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 6px;
}
.mcp-detail-segmented {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--surface);
  overflow: hidden;
}
.mcp-detail-segmented button {
  border: 0;
  background: transparent;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.mcp-detail-segmented button + button { border-left: 1px solid var(--border); }
.mcp-detail-segmented button:hover:not(.active) { color: var(--text); background: var(--surface-2); }
.mcp-detail-segmented button.active {
  background: var(--brand-soft);
  color: var(--brand);
}
.mcp-detail-segmented button:focus-visible { outline: none; box-shadow: var(--ring); position: relative; z-index: 1; }
.mcp-detail-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mcp-detail-sort-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mcp-detail-sort-select {
  width: auto;
  font-size: 11.5px;
  min-width: 90px;
  font-family: var(--font-mono);
}
.mcp-detail-sort-select .custom-select-trigger {
  min-height: 28px;
  padding: 3px 8px;
  min-width: 90px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.link-inline {
  background: none;
  border: 0;
  padding: 0;
  color: var(--brand);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}
.link-inline:hover { color: var(--brand-2); }
.mcp-detail-tools,
.mcp-detail-monitors,
.mcp-detail-history {
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--surface);
  padding: 14px;
}
.mcp-tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mcp-tool-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-1);
  padding: 10px 12px;
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.mcp-tool-item:hover {
  border-color: var(--border);
  background: var(--surface-2);
}
.mcp-command-review-loading {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-1);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
}
.mcp-command-review-loading-lines {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding-top: 2px;
}
.mcp-command-review-loading-lines span {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--surface-3) 70%, var(--border)), var(--surface-2));
  background-size: 220% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.mcp-command-review-loading-lines span:nth-child(1) { width: 74%; }
.mcp-command-review-loading-lines span:nth-child(2) { width: 92%; }
.mcp-command-review-loading-lines span:nth-child(3) { width: 58%; }
@media (prefers-reduced-motion: reduce) {
  .mcp-command-review-loading-lines span {
    animation: none;
  }
}
.mcp-detail-cli .mcp-tool-item .mcp-tool-name::before {
  content: '› ';
  color: var(--brand);
  font-weight: 600;
}
.mcp-tool-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mcp-tool-icon { color: var(--text-3); flex-shrink: 0; }
.mcp-tool-name {
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.mcp-tool-desc {
  margin-top: 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mcp-command-review-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
}
.mcp-command-review-item .mcp-tool-desc {
  margin-top: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-3);
}
.mcp-command-review-item .mcp-tool-row {
  gap: 8px;
  flex-wrap: wrap;
}
.mcp-command-review-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.mcp-command-review-badges .btn-sm {
  padding: 3px 8px;
  font-size: 11px;
}
.mcp-command-review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mcp-command-review-help {
  margin: 4px 0 0;
  padding: 7px 9px;
  max-height: 132px;
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-1);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.4;
}
.mcp-command-review-section { margin-top: 6px; }
.mcp-command-review-help > .mcp-command-review-section:first-child { margin-top: 0; }
.mcp-command-review-usage + .mcp-command-review-section,
.mcp-command-review-summary + .mcp-command-review-section { margin-top: 6px; }
.mcp-command-review-help-legacy {
  white-space: pre-wrap;
}
.mcp-command-review-usage {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcp-command-review-summary {
  margin-top: 4px;
  color: var(--text-3);
  font-family: var(--font);
  white-space: normal;
}
.mcp-command-review-section {
  margin-top: 8px;
}
.mcp-command-review-heading {
  margin-bottom: 3px;
  color: var(--text-3);
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
}
.mcp-command-review-help-row {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}
.mcp-command-review-help-row span:last-child {
  color: var(--text-3);
  white-space: normal;
}
.mcp-command-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
@media (max-width: 720px) {
  .tm-hero { grid-template-columns: 1fr; gap: 14px; }
  .tm-hero-stats { flex-wrap: wrap; }
  .tm-stat { flex: 1 1 calc(50% - 5px); }
}
.tool-monitors-filterbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tool-monitors-search {
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}
.tool-monitors-error {
  border-color: var(--red-soft-border);
  background: var(--red-soft);
  color: var(--red);
}
.tool-monitors-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tool-monitors-row {
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
}
.tool-monitors-row:last-child { border-bottom: 0; }
.tool-monitors-row.is-editing { background: var(--surface-2); }
.tool-monitors-row-main {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
}
.tool-monitors-status { white-space: nowrap; }
.tool-monitors-stuck.ui-tooltip { cursor: help; }
.tool-monitors-stuck.ui-tooltip[data-tooltip]::after {
  top: calc(100% + 6px);
  bottom: auto;
  left: 0;
  width: 260px;
  max-width: min(260px, calc(100vw - 32px));
  white-space: normal;
  line-height: 1.35;
  text-align: left;
  transform: translateY(-4px);
}
.tool-monitors-stuck.ui-tooltip[data-tooltip]:hover::after,
.tool-monitors-stuck.ui-tooltip[data-tooltip]:focus-within::after {
  transform: translateY(0);
}
.tool-monitors-identity { min-width: 0; }
.tool-monitors-toolname {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-monitors-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.tool-monitors-server-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  padding: 1px 7px;
}
.tool-monitors-times {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
  white-space: nowrap;
}
.tool-monitors-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tool-monitors-row-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--red);
}
.runs-table.tool-monitors-table tbody tr.tool-monitors-table-row {
  cursor: default;
}
.tool-monitors-table-row.is-editing td {
  background: var(--surface-2);
}
.tool-monitors-table .tool-monitors-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.tool-monitors-table .tool-monitors-actions .btn {
  white-space: nowrap;
}
.tool-monitors-table td {
  min-width: 0;
}
.tool-monitors-table .tool-monitors-server-tag {
  display: flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.tool-monitors-table .tool-monitors-server-tag .icon {
  flex: 0 0 auto;
}
.tool-monitors-table .tool-monitors-server-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-monitors-table .tool-monitors-toolname {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-monitors-table .tool-monitors-monitor-cell.ui-tooltip,
.tool-monitors-table .tool-monitors-server-cell.ui-tooltip {
  display: table-cell;
  position: relative;
}
.tool-monitors-table .tool-monitors-monitor-cell.ui-tooltip[data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 6px);
  left: 14px;
  max-width: min(520px, calc(100vw - 32px));
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(4px);
  z-index: 1200;
  box-shadow: var(--shadow-sm);
}
.tool-monitors-table .tool-monitors-server-cell.ui-tooltip[data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 6px);
  left: 14px;
  max-width: min(520px, calc(100vw - 32px));
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(4px);
  z-index: 1200;
  box-shadow: var(--shadow-sm);
}
.tool-monitors-table .tool-monitors-monitor-cell.ui-tooltip[data-tooltip]:hover::after,
.tool-monitors-table .tool-monitors-monitor-cell.ui-tooltip[data-tooltip]:focus-within::after,
.tool-monitors-table .tool-monitors-server-cell.ui-tooltip[data-tooltip]:hover::after,
.tool-monitors-table .tool-monitors-server-cell.ui-tooltip[data-tooltip]:focus-within::after {
  transform: translateY(0);
}
.tool-monitors-table-detail td {
  padding: 0 14px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.tool-monitors-table-detail .tool-monitors-row-error {
  margin-top: 10px;
}
.tool-monitors-table-detail .tool-monitors-runs,
.tool-monitors-table-detail .tool-monitors-edit {
  margin-top: 0;
}
.tool-monitors-edit {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
}
.tool-monitors-edit-cadence-select {
  max-width: 220px;
}
.tool-monitors-runs {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
}
.tool-monitors-runs-table-wrap { margin-top: 8px; }
.tool-monitors-runs-row:focus-visible {
  outline: 2px solid var(--focus, #3b82f6);
  outline-offset: -2px;
}
.tool-monitors-run-error {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-monitors-list-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.tool-monitors-source-select {
  width: min(340px, 100%);
  min-width: min(260px, 100%);
}
.run-detail-modal {
  width: min(640px, 92vw);
  max-height: min(80vh, 720px);
}
.tm-run-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
}
.tm-run-detail-meta-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: baseline;
}
.run-detail-response {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  font-size: 12px;
  line-height: 1.45;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.tool-monitors-row.loading-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
@media (max-width: 900px) {
  .tool-monitors-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-monitors-row-main {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "status identity"
      "times times"
      "actions actions";
  }
  .tool-monitors-status { grid-area: status; }
  .tool-monitors-identity { grid-area: identity; }
  .tool-monitors-times { grid-area: times; text-align: left; }
  .tool-monitors-actions { grid-area: actions; flex-wrap: wrap; }
}

/* ========== Tool monitor wizard — compact rows ========== */
/* Rows are independent cards in a flat list (no surrounding container).
   Standalone cards make the gap between rows visible — important when rows
   slide between sections via FLIP, since the user reads the motion as
   "neighbours opening space" rather than "borders shifting around". */
.tool-monitor-row {
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  overflow: hidden;
  transition: background 0.12s ease;
  /* FLIP needs the row to establish its own stacking context so the lifted
     mover (z-index: 5 in the keyframes) actually sits above its siblings,
     and a will-change hint keeps the transform on the GPU. */
  position: relative;
  z-index: 0;
  will-change: transform;
}
.tool-monitor-row:hover { background: var(--hover); }
.tool-monitor-row-expanded { background: var(--surface-2); }
.tool-monitor-row-expanded:hover { background: var(--surface-2); }
/* Skipped (toggle-off) rows are not expandable. Drop the row-wide hover and
   the row-main pointer cursor so the eye reads the row as static — the only
   live control is the toggle. */
.tool-monitor-row-collapsed-locked:hover { background: var(--surface); }
.tool-monitor-row-collapsed-locked .tool-monitor-row-main { cursor: default; }
.tool-monitor-row-chevron-spacer {
  display: inline-block;
  width: 28px;
  height: 28px;
}
.tool-monitor-row-error {
  background: var(--red-soft);
}
.tool-monitor-row-error:hover { background: var(--red-soft); }
.tool-monitor-row-saved {
  background: var(--green-soft);
}
.tool-monitor-row-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
}
.tool-monitor-row-check {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.tool-monitor-row-identity {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: nowrap;
}
.tool-monitor-row-name {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  max-width: 40%;
}
.tool-monitor-row-desc {
  color: var(--text-3);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.tool-monitor-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tool-monitor-interval-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 1.1;
  transition: border-color 0.12s, color 0.12s;
}
.tool-monitor-interval-wrap:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.tool-monitor-interval-icon { color: var(--text-3); flex-shrink: 0; }
.tool-monitor-interval-inline {
  width: auto;
  min-width: 76px;
}
.tool-monitor-interval-inline .custom-select-trigger {
  min-height: auto;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  gap: 3px;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  box-shadow: none;
}
.tool-monitor-interval-inline .custom-select-value {
  color: inherit;
}
.tool-monitor-interval-inline .custom-select-trigger .icon {
  width: 10px;
  height: 10px;
}
.tool-monitor-interval-inline .custom-select-trigger:focus { color: var(--text); }
.tool-monitor-row-chevron {
  padding: 4px 6px;
  min-height: 28px;
}
.tool-monitor-row-body {
  padding: 4px 16px 16px 38px;
  /* No divider — the expanded body shares the row header's surface, so a
     border-top would make the open card read as two stacked surfaces. */
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tool-monitor-row-error .tool-monitor-row-body { background: var(--red-soft); }

/* Array / object editors */
.tool-arg-array {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tool-arg-array-empty {
  font-style: italic;
}
.tool-arg-array-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: start;
  border: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 8px 10px;
  background: var(--surface);
}
.tool-arg-array-item-body { min-width: 0; }
.tool-arg-array-remove { padding: 4px 6px; }
.tool-arg-array-add { align-self: flex-start; }
.tool-arg-object {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 2px solid var(--border-soft);
  padding-left: 10px;
}

@media (max-width: 720px) {
  .tool-monitor-row-main {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "check identity chevron"
      "meta meta meta"
      "interval interval interval";
    row-gap: 6px;
  }
  .tool-monitor-row-check { grid-area: check; }
  .tool-monitor-row-identity { grid-area: identity; }
  .tool-monitor-row-meta { grid-area: meta; flex-wrap: wrap; }
  .tool-monitor-row .tool-monitor-interval { grid-area: interval; justify-self: start; }
  .tool-monitor-row-chevron { grid-area: chevron; }
  .tool-monitor-row-body { padding-left: 14px; }
}

/* Tweaks override font */
.tweaks-panel * { font-family: var(--font-sans) !important; }

/* ========== /dev internal status ========== */
.dev-shell {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
}
.dev-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--topbar-h);
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.dev-topbar-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dev-topbar-brand img { height: 18px; display: block; opacity: 0.95; }
.dev-topbar-route {
  font-size: 12px;
  color: var(--text-3);
  border-left: 1px solid var(--border);
  padding-left: 14px;
  letter-spacing: 0.01em;
}
.dev-topbar-warning {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid var(--amber-soft-border);
  padding: 3px 10px 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.dev-topbar-warning-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}
.dev-topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.dev-main { flex: 1; overflow: auto; min-height: 0; }

.dev-section { margin-top: 28px; }
.dev-section:first-of-type { margin-top: 8px; }
.dev-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.dev-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--text-3);
}
.dev-error-text {
  font-size: 12px;
  color: var(--red);
  font-family: var(--font-mono);
}

/* Fleet tiles */
.dev-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.dev-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.dev-tile-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 8px;
}
.dev-tile-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.dev-tile-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
}

/* Runner cards */
.dev-runner-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dev-runner-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dev-runner-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-wrap: wrap;
}
.dev-runner-id {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.dev-runner-meta {
  font-size: 12px;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dev-runner-meta .dev-sep { color: var(--text-4); }
.dev-runner-seen { margin-left: auto; font-size: 12px; color: var(--text-3); }

.dev-runner-backends {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.dev-backend-col {
  padding: 14px 16px 16px;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.dev-backend-col:last-child { border-right: 0; }
.dev-backend-empty { opacity: 0.7; }

.dev-backend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.dev-backend-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.dev-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 12.5px;
  border-bottom: 1px dashed var(--border-soft);
}
.dev-stat-row:last-of-type { border-bottom: 0; }
.dev-stat-label { color: var(--text-3); }
.dev-stat-value { color: var(--text); font-family: var(--font-mono); font-feature-settings: 'tnum'; }

.dev-quota {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dev-quota-row { display: flex; flex-direction: column; gap: 4px; }
.dev-quota-head {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-3);
}
.dev-quota-head strong {
  color: var(--text);
  font-weight: 500;
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
}
.dev-quota-bar {
  height: 4px;
  background: var(--surface-3);
  border-radius: 0;
  overflow: hidden;
}
.dev-quota-fill {
  height: 100%;
  background: var(--blue);
  transition: width 0.2s ease, background 0.2s ease;
}
.dev-quota-fill.warn { background: var(--amber); }
.dev-quota-fill.crit { background: var(--red); }

.dev-quota-status { font-weight: 500; font-family: var(--font-mono); font-feature-settings: 'tnum'; }
.dev-quota-status.warn { color: var(--amber); }
.dev-quota-status.crit { color: var(--red); }
.dev-quota-foot {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
}

.dev-backend-error {
  margin-top: 10px;
  padding: 7px 10px;
  background: var(--red-soft);
  border: 1px solid var(--red-soft-border);
  border-radius: 0;
  font-size: 12px;
  color: var(--red);
  word-break: break-word;
}
.dev-backend-foot {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-4);
}

.dev-empty-card {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: 0;
  padding: 28px 24px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

/* Recent runs table */
.dev-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dev-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}
.dev-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.dev-table tr:last-child td { border-bottom: 0; }
.dev-table .dev-th-num,
.dev-table .dev-td-num {
  text-align: right;
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
  white-space: nowrap;
}
.dev-table-org {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dev-table-org-name { font-weight: 500; color: var(--text); }
.dev-table-org-slug {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
}
.dev-table-runner {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}
.dev-runtime-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.dev-lambda-failed {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--red);
  white-space: nowrap;
}
.dev-table-copy {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dev-table-copy:hover { background: var(--surface-2); color: var(--text); }
.dev-table-copy.copied { color: var(--green, #059669); border-color: var(--green, #059669); }
.dev-empty-row {
  padding: 28px 24px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

@media (max-width: 720px) {
  .dev-runner-backends { grid-template-columns: 1fr; }
  .dev-backend-col { border-right: 0; border-bottom: 1px solid var(--border); }
  .dev-backend-col:last-child { border-bottom: 0; }
  .dev-table-wrap { overflow-x: auto; }
}

/* Alerts redesign */
.alert-summary-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 12px 0 16px;
  padding: 12px 4px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  width: fit-content;
}
.alert-summary-stat {
  padding: 4px 18px;
  text-align: center;
  min-width: 92px;
}
.alert-summary-divider {
  width: 1px;
  background: var(--border-soft);
  margin: 0 4px;
}
.alert-summary-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.alert-summary-stat.tone-ok .alert-summary-value { color: var(--green); }
.alert-summary-stat.tone-alert .alert-summary-value { color: var(--red); }
.alert-summary-label {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.alert-rule-modal {
  width: min(720px, calc(100vw - 32px));
}
.alert-rule-modal-body {
  padding: 18px 20px;
}
.alert-rule-modal-body .card {
  border: 0;
  background: transparent;
  padding: 0;
}
.alert-rule-modal-body .card-header {
  border-bottom: 1px solid var(--border);
  padding: 0 0 12px;
  margin-bottom: 12px;
}
.alert-rule-modal-body .alert-rule-form {
  padding: 0;
}
.slack-connect-cta {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 30px 0 28px;
}
.slack-connect-cta .btn {
  min-width: 154px;
  justify-content: center;
}

.alert-destination-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
.alert-destination-btn:hover { background: var(--hover); }
.alert-destination-btn.connected { border-color: var(--green-soft-border); }
.alert-destination-btn .alert-destination-state-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-4);
}
.alert-destination-btn .alert-destination-state-dot.on { background: var(--green); }

.rule-destination-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 0;
  background: var(--surface-2);
  margin-bottom: 12px;
  width: fit-content;
}
.rule-destination-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
}
.rule-destination-toggle-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.alert-rule-form-wrap {
  margin-bottom: 16px;
}

.alert-rule-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.alert-rule-row {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) minmax(140px, 1.6fr) minmax(160px, 1.8fr) minmax(120px, 1.2fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.alert-rule-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.alert-rule-row-warn { border-left: 3px solid var(--amber); border-color: var(--amber-soft-border); padding-left: 13px; }
.alert-rule-row-ok { background: var(--surface); }
.alert-rule-row-muted { opacity: 0.7; }
.alert-rule-row-loading { display: flex; gap: 16px; }
.alert-rule-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
}
.alert-rule-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.alert-rule-watches,
.alert-rule-target,
.alert-rule-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-rule-target { display: flex; align-items: center; }
.alert-rule-actions { display: flex; gap: 6px; justify-content: flex-end; }
.alert-rule-last-fire {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--red-soft-border);
  background: var(--red-soft);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alert-rule-last-fire-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-size: 12px;
  font-weight: 500;
}
.alert-rule-last-fire-when { color: var(--text-2); }
.alert-rule-last-fire-verdict {
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 0;
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
  font-weight: 600;
}
.alert-rule-last-fire-verdict.tone-ok { color: var(--green); border-color: var(--green-soft-border); background: var(--green-soft); }
.alert-rule-last-fire-verdict.tone-fail { color: var(--red); border-color: var(--red-soft-border); background: var(--red-soft); }
.alert-rule-last-fire-preview {
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 4.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.alert-rule-last-fire-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.alert-rule-last-fire-links .link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--brand);
  font-weight: 500;
}
.alert-rule-last-fire-links .link:hover { text-decoration: underline; }
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,0);
}
.status-dot-warn { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.status-dot-ok { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.status-dot-muted { background: var(--text-4); }

.alert-destination-config {
  padding: 4px 0;
}
.alert-destination-config-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.slideover-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 50;
}
.slideover {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(560px, 92vw);
  background: var(--surface);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.18);
  z-index: 51;
  display: flex;
  flex-direction: column;
}
.slideover-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.slideover-close {
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-3);
  padding: 6px;
  border-radius: var(--radius-1);
  flex-shrink: 0;
  align-self: flex-start;
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.slideover-close:hover { color: var(--text); background: var(--hover); }
.slideover-close:focus-visible { outline: none; box-shadow: var(--ring); }
.slideover-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}
@media (max-width: 760px) {
  .slideover.mcp-detail-panel {
    width: 100vw;
  }
  .mcp-detail-header {
    padding: 14px 16px;
  }
  .mcp-detail-body {
    padding: 14px 16px 18px;
  }
  .mcp-detail-meta-strip {
    font-size: 12px;
    padding: 8px 10px;
  }
  .mcp-detail-actionbar {
    justify-content: flex-start;
  }
}

/* Alerts redesign compatibility */
.alerts-page > * + * { margin-top: 16px; }
.alerts-message {
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0;
  font-size: 12.5px;
  color: var(--text);
}
.ui-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
}
.ui-hover-actions {
  opacity: 0;
  transition: opacity 0.12s ease;
}
.ui-hover-row:hover .ui-hover-actions,
.ui-hover-row:focus-within .ui-hover-actions {
  opacity: 1;
}
.ui-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  flex-shrink: 0;
}
.ui-status-dot-ok { background: var(--green); }
.ui-status-dot-warn { background: var(--amber); }
.ui-status-dot-bad { background: var(--red); }
.ui-status-dot-info { background: var(--blue); }
.ui-status-dot-pending { background: var(--amber); }
.ui-status-dot-running { background: var(--blue); }
.alerts-destinations-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 12px;
}
.alerts-destination-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
}
.alerts-destination-card.connected { border-color: var(--green-soft-border); }
.alerts-destination-glyph {
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.alerts-destination-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.alerts-destination-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.alerts-destination-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-2);
}
.alerts-destination-status > span:not(.alerts-destination-dot) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alerts-destination-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-4);
  flex-shrink: 0;
}
.alerts-destination-dot.on { background: var(--green); }
.alerts-destination-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--text-3);
}
.alerts-destination-action {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.alerts-summary-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  flex-wrap: wrap;
}
.alerts-summary-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}
.alerts-summary-cell .ui-status-dot { align-self: center; }
.alerts-summary-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.alerts-summary-cell.tone-bad .alerts-summary-value { color: var(--red); }
.alerts-summary-cell.tone-ok .alerts-summary-value { color: var(--green); }
.alerts-summary-label {
  font-size: 12px;
  color: var(--text-3);
}
.alerts-summary-sep { color: var(--text-4); }
.alerts-rule-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.alerts-rule-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1.4fr) minmax(160px, 1.2fr) minmax(120px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--border-soft);
  position: relative;
}
.alerts-rule-row-first { border-top: 0; }
.alerts-rule-row-warn .alerts-rule-name { color: var(--red); }
.alerts-rule-row:hover { background: var(--surface-2); }
.alerts-rule-status-dot { display: inline-flex; }
.alerts-rule-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.alerts-rule-name {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alerts-rule-name:hover { color: var(--brand); }
.alerts-rule-watches,
.alerts-rule-target {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alerts-rule-target {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.alerts-rule-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.alerts-empty {
  padding: 44px 20px;
  display: grid;
  place-items: center;
}

@media (max-width: 900px) {
  .alerts-rule-row { grid-template-columns: 24px 1fr auto; }
  .alerts-rule-target,
  .alerts-rule-status { display: none; }
}

@media (max-width: 720px) {
  .alert-rule-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .alert-rule-actions { justify-content: flex-start; }
  .alerts-destination-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .alerts-destination-action {
    width: 100%;
    padding-left: 48px;
  }
}

/* ========== Redesign 2026-05 — design system additions ========== */

/* Surfaces and surface-interactive */
.ui-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
}
.ui-surface-interactive {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  transition: border-color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.ui-surface-interactive:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Pills (used for filters, counts, status) — landing tag style */
.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 0;
  background: transparent;
  color: var(--text-2);
  border: 1px solid currentColor;
  white-space: nowrap;
  line-height: 1.5;
}
.ui-pill-outline {
  background: transparent;
  color: var(--text-2);
  border-color: var(--text-2);
}
.ui-pill-brand { color: var(--brand); }
.ui-pill-ok { color: var(--green); }
.ui-pill-warn { color: var(--amber); }
.ui-pill-bad { color: var(--red); }
.ui-pill-info { color: var(--blue); }
.ui-pill-violet { color: var(--violet); }
.ui-pill .ui-pill-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

/* Status dot (zero-padding circle) */
.ui-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--text-3);
  flex-shrink: 0;
}
.ui-status-dot-ok { background: var(--green); }
.ui-status-dot-warn { background: var(--amber); }
.ui-status-dot-bad { background: var(--red); }
.ui-status-dot-info { background: var(--blue); }
.ui-status-dot-pending {
  background: var(--amber);
  animation: uiPulse 1.6s ease-in-out infinite;
}
.ui-status-dot-running {
  background: var(--blue);
  animation: uiPulse 1.4s ease-in-out infinite;
}

@keyframes uiPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

/* Sparkline (tiny mini-chart for table rows + KPIs) */
.ui-sparkline {
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
}
.ui-sparkline path { transition: stroke var(--dur-2) var(--ease-out); }
.ui-sparkline-baseline {
  stroke: var(--border);
  stroke-width: 1;
  fill: none;
}
.ui-sparkline-area {
  fill: var(--brand-soft);
  opacity: 0.5;
}
.ui-sparkline-line {
  stroke: var(--brand);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-sparkline-point {
  fill: var(--brand);
}
.ui-sparkline-tone-ok .ui-sparkline-line { stroke: var(--green); }
.ui-sparkline-tone-ok .ui-sparkline-area { fill: var(--green-soft); }
.ui-sparkline-tone-ok .ui-sparkline-point { fill: var(--green); }
.ui-sparkline-tone-bad .ui-sparkline-line { stroke: var(--red); }
.ui-sparkline-tone-bad .ui-sparkline-area { fill: var(--red-soft); }
.ui-sparkline-tone-bad .ui-sparkline-point { fill: var(--red); }
.ui-sparkline-tone-warn .ui-sparkline-line { stroke: var(--amber); }
.ui-sparkline-tone-warn .ui-sparkline-area { fill: var(--amber-soft); }
.ui-sparkline-tone-warn .ui-sparkline-point { fill: var(--amber); }
.ui-sparkline-tone-neutral .ui-sparkline-line { stroke: var(--text-3); }
.ui-sparkline-tone-neutral .ui-sparkline-area { fill: var(--surface-3); }
.ui-sparkline-tone-neutral .ui-sparkline-point { fill: var(--text-3); }

/* Drawer (right-side panel) */
.ui-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 8, 0.32);
  z-index: 1100;
  opacity: 0;
  animation: uiDrawerFade var(--dur-3) var(--ease-out) forwards;
}
.ui-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(540px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 1101;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-pop);
  transform: translateX(100%);
  animation: uiDrawerSlide var(--dur-3) var(--ease-out) forwards;
}
.ui-drawer-md { width: min(680px, 100vw); }
.ui-drawer-lg { width: min(840px, 100vw); }
.ui-drawer-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 56px;
}
.ui-drawer-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-drawer-sub {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
}
.ui-drawer-close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2);
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-2);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.ui-drawer-close:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.ui-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
}
.ui-drawer-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-3) var(--space-5);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
  background: var(--surface-2);
}
.ui-drawer-footer .spacer { flex: 1; }

@keyframes uiDrawerFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes uiDrawerSlide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Toast */
.ui-toast-host {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 1500;
  pointer-events: none;
  max-width: min(380px, calc(100vw - 32px));
}
.ui-toast {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-3);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  box-shadow: var(--shadow-pop);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  animation: uiToastIn var(--dur-3) var(--ease-out) forwards;
  font-size: 12.5px;
  color: var(--text);
}
.ui-toast.leaving {
  animation: uiToastOut var(--dur-3) var(--ease-out) forwards;
}
.ui-toast-icon {
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-2);
  background: var(--surface-2);
  color: var(--text-2);
  flex-shrink: 0;
}
.ui-toast-ok .ui-toast-icon { background: var(--green-soft); color: var(--green); }
.ui-toast-bad .ui-toast-icon { background: var(--red-soft); color: var(--red); }
.ui-toast-warn .ui-toast-icon { background: var(--amber-soft); color: var(--amber); }
.ui-toast-info .ui-toast-icon { background: var(--blue-soft); color: var(--blue); }
.ui-toast-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ui-toast-title {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
}
.ui-toast-desc {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.4;
}
.ui-toast-close {
  background: transparent;
  border: 0;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-1);
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.ui-toast-close:hover { color: var(--text); background: var(--surface-2); }

@keyframes uiToastIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes uiToastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}

/* MCP connect modal — center the header so the title doesn't float to the top
   when there is no subtitle. */
.mcp-connect-modal .modal-header {
  align-items: center;
}

/* Tooltip — declarative wrapper, hover/focus only */
.ui-tooltip {
  position: relative;
  display: inline-flex;
}
.ui-tooltip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translate(-50%, 4px);
  background: var(--text);
  color: #f6f2ef;
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: var(--radius-1);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  z-index: 60;
  box-shadow: var(--shadow-md);
}
.ui-tooltip[data-tooltip]:hover::after,
.ui-tooltip[data-tooltip]:focus-within::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.ui-tooltip.alert-info-tip[data-tooltip]::after {
  left: auto;
  right: 0;
  width: 240px;
  max-width: 240px;
  white-space: normal;
  line-height: 1.35;
  text-align: left;
  transform: translateY(4px);
  z-index: 1200;
}
.ui-tooltip.alert-info-tip[data-tooltip]:hover::after,
.ui-tooltip.alert-info-tip[data-tooltip]:focus-within::after {
  transform: translateY(0);
}

/* Hover-row (used in tables for revealing actions) */
.ui-hover-actions {
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.ui-hover-row:hover .ui-hover-actions,
.ui-hover-row:focus-within .ui-hover-actions {
  opacity: 1;
}

/* Section spacing helpers (use these instead of inline margins) */
.ui-stack-2 > * + * { margin-top: var(--space-2); }
.ui-stack-3 > * + * { margin-top: var(--space-3); }
.ui-stack-4 > * + * { margin-top: var(--space-4); }
.ui-stack-5 > * + * { margin-top: var(--space-5); }
.ui-stack-6 > * + * { margin-top: var(--space-6); }

/* Flex helpers */
.ui-row { display: flex; align-items: center; gap: var(--space-2); }
.ui-row-3 { display: flex; align-items: center; gap: var(--space-3); }
.ui-row-4 { display: flex; align-items: center; gap: var(--space-4); }
.ui-row-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ui-col { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-col-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-col-4 { display: flex; flex-direction: column; gap: var(--space-4); }

/* Section header (replacement for repetitive "page-header > title + subtitle") */
.ui-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.ui-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ui-section-count {
  background: var(--surface-3);
  color: var(--text-2);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.ui-section-actions {
  display: flex;
  gap: var(--space-2);
}

/* Page heading (compact, single source of truth) */
.ui-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.ui-page-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
  line-height: 1.1;
  margin: 0;
}
.ui-page-meta {
  font-size: 12px;
  color: var(--text-3);
}
.ui-page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ========== Dashboard (redesign) ========== */
.dash-page > * + * { margin-top: var(--space-5); }

.dash-hero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.dash-hero-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  text-align: left;
  transition: border-color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.dash-hero-stat-clickable {
  cursor: pointer;
}
.dash-hero-stat-clickable:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.dash-hero-stat-clickable:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--brand-soft-border);
}
.dash-hero-stat-dim { opacity: 0.86; }
.dash-hero-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 600;
}
.dash-hero-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.dash-hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: 2px;
}
.dash-hero-detail {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-block { display: flex; flex-direction: column; }

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.dash-col { display: flex; flex-direction: column; }
.dash-card {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dash-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--dur-2) var(--ease-out);
}
.dash-link:hover { color: var(--brand); }
.dash-link svg { transition: transform var(--dur-2) var(--ease-out); }
.dash-link:hover svg { transform: translateX(1.5px); }

.dash-failing-list { display: flex; flex-direction: column; }
.dash-failing-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(80px, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: 8px var(--space-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-2);
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out);
}
.dash-failing-row:disabled { cursor: default; }
.dash-failing-row:hover:not(:disabled) { background: var(--surface-2); }
.dash-failing-row:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.dash-failing-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
}
.dash-failing-bar {
  position: relative;
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.dash-failing-fill {
  display: block;
  height: 100%;
  background: var(--red);
  border-radius: 999px;
  transition: width var(--dur-3) var(--ease-out);
}
.dash-failing-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: right;
}

.dash-recent-list { display: flex; flex-direction: column; }
.dash-recent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: 8px var(--space-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-2);
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out);
}
.dash-recent-row:hover { background: var(--surface-2); }
.dash-recent-row:focus-visible { outline: none; box-shadow: var(--ring); }
.dash-recent-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text);
}
.dash-recent-meta { font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.dash-recent-time { white-space: nowrap; }

.dash-empty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  color: var(--text-3);
  font-size: 12.5px;
  justify-content: center;
}

.dash-inventory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.dash-inv-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.dash-inv-item:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.dash-inv-item:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--brand-soft-border); }
.dash-inv-icon {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-2);
  background: var(--surface-2);
  color: var(--text-2);
}
.dash-inv-ok .dash-inv-icon { background: var(--green-soft); color: var(--green); }
.dash-inv-bad .dash-inv-icon { background: var(--red-soft); color: var(--red); }
.dash-inv-warn .dash-inv-icon { background: var(--amber-soft); color: var(--amber); }
.dash-inv-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.dash-inv-label { font-size: 12.5px; font-weight: 500; color: var(--text); }
.dash-inv-meta { font-size: 11.5px; color: var(--text-3); }
.dash-inv-bad .dash-inv-meta { color: var(--red); }
.dash-inv-value {
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.dash-inv-value-skel { height: 18px; }
.dash-inv-item.loading-row { cursor: default; }
.dash-inv-item.loading-row:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); }
.dash-inv-caret { color: var(--text-3); transition: transform var(--dur-2) var(--ease-out); }
.dash-inv-item:hover .dash-inv-caret { transform: translateX(1.5px); color: var(--text); }

@media (max-width: 1100px) {
  .dash-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-inventory { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dash-hero { grid-template-columns: 1fr; }
}

/* ========== Runs (redesign) ========== */
.runs-page > * + * { margin-top: var(--space-4); }

.runs-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: var(--space-2) var(--space-3);
}
.runs-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 220px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  padding: 4px 8px;
  color: var(--text-3);
  transition: background var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.runs-search:focus-within {
  background: var(--surface);
  border-color: var(--brand-soft-border);
  box-shadow: var(--ring);
}
.runs-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  min-width: 0;
}
.runs-search-clear {
  background: transparent;
  border: 0;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-1);
  display: grid;
  place-items: center;
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.runs-search-clear:hover { color: var(--text); background: var(--surface-3); }

.runs-filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.runs-filters .custom-select { width: auto; min-width: 160px; }
.runs-filters .custom-select-trigger { min-height: 32px; padding: 4px 10px; }

.runs-toolbar-meta {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-left: auto;
  font-size: 12.5px;
  color: var(--text);
}
.runs-toolbar-meta .mono { font-weight: 500; }

.runs-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tool-monitors-table-wrap {
  overflow: visible;
}
.runs-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}
.workflows-table { min-width: 1120px; table-layout: fixed; }
.runs-table thead th {
  text-align: left;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  background: var(--surface-2);
  font-weight: 600;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.runs-table thead th.num { text-align: right; }
.runs-table thead th.col-status,
.runs-table tbody td.col-status { width: 132px; }
.runs-table thead th.col-id,
.runs-table tbody td.col-id { width: 90px; }
.runs-table thead th.col-actions,
.runs-table tbody td.col-actions,
.ui-table thead th.col-actions,
.ui-table tbody td.col-actions { width: 40px; padding-left: 4px; padding-right: 8px; }
.runs-archive-btn { opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.runs-row:hover .runs-archive-btn,
.ui-table-row-clickable:hover .runs-archive-btn { opacity: 1; }
.runs-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  font-size: 12.5px;
  color: var(--text);
}
.runs-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.runs-table tbody tr:last-child td { border-bottom: 0; }
.runs-table tbody tr.runs-row { cursor: pointer; transition: background var(--dur-2) var(--ease-out); }
.runs-table tbody tr.runs-row:hover { background: var(--surface-2); }
.runs-table tbody tr.runs-empty-row td { padding: 0; border-bottom: 0; }
.runs-table.tool-monitors-table {
  min-width: 1140px;
  table-layout: fixed;
}
.runs-table.tool-monitors-table thead th.col-status,
.runs-table.tool-monitors-table tbody td.col-status { width: 100px; }
.runs-table.tool-monitors-table th:nth-child(2),
.runs-table.tool-monitors-table .tool-monitors-monitor-cell {
  width: 150px;
  max-width: 150px;
}
.runs-table.tool-monitors-table th:nth-child(3),
.runs-table.tool-monitors-table td:nth-child(3) { width: 130px; }
.runs-table.tool-monitors-table th:nth-child(4),
.runs-table.tool-monitors-table td:nth-child(4) { width: 110px; }
.runs-table.tool-monitors-table th:nth-child(5),
.runs-table.tool-monitors-table td:nth-child(5) { width: 95px; }
.runs-table.tool-monitors-table th:nth-child(6),
.runs-table.tool-monitors-table td:nth-child(6) { width: 95px; }
.runs-table.tool-monitors-table th:nth-child(7),
.runs-table.tool-monitors-table td:nth-child(7) { width: 140px; }
.runs-table.tool-monitors-table .col-actions { width: 290px; }
.runs-status-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.runs-table.tool-monitors-table .runs-status-cell {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}
.runs-row-workflow { line-height: 1.25; }
.runs-row-name { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.runs-row-server { display: inline-flex; align-items: center; gap: 4px; }
.runs-row-server svg { color: var(--text-3); }

.harness-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.harness-cell-glyph {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  color: var(--text-2);
}
.harness-cell-logo {
  display: block;
  width: 12px;
  height: 12px;
  object-fit: contain;
}
.harness-cell-name {
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.harness-cell-model {
  font-size: 11px;
  color: var(--text-3);
  padding-left: 6px;
  border-left: 1px solid var(--border);
  margin-left: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.runs-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.runs-pagination-controls { display: flex; align-items: center; gap: 4px; }
.runs-pagination-pill {
  font-size: 11.5px;
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-2);
}

/* ========== Run detail (redesign) ========== */
.run-detail-page > * + * { margin-top: var(--space-4); }
.run-detail-back { margin-bottom: var(--space-3); }

.run-detail-window {
  margin-right: 6px;
}
.run-detail-window .run-detail-hero {
  padding: 16px 18px;
  border-bottom: 1px solid var(--ink-line);
}
.run-detail-window .run-detail-meta {
  border: 0;
  border-radius: 0;
  background: var(--ink-line);
}

.run-detail-hero {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.run-detail-title-block {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
}
.run-detail-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-detail-workflow-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.005em;
  cursor: pointer;
  padding: 4px 6px;
  margin-left: -6px;
  border-radius: var(--radius-2);
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.run-detail-workflow-link svg { color: var(--text-3); transition: transform var(--dur-2) var(--ease-out); }
.run-detail-workflow-link:hover { color: var(--brand); background: var(--surface-2); }
.run-detail-workflow-link:hover svg { transform: translateX(2px); color: var(--brand); }
.run-detail-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--text-2);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.run-detail-actions { display: flex; gap: var(--space-2); margin-left: auto; }

.run-detail-meta {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  overflow: hidden;
}
.run-meta-cell {
  background: var(--surface);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.run-meta-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 600;
}
.run-meta-label svg {
  color: var(--text-3);
  flex: 0 0 auto;
}
.run-meta-value {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-meta-sub {
  font-size: 11.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-meta-harness-model {
  gap: 4px;
}
.run-meta-harness-line,
.run-meta-model-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.run-meta-harness-glyph {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  flex: 0 0 auto;
}
.run-meta-harness-logo {
  display: block;
  width: 11px;
  height: 11px;
  object-fit: contain;
}
.run-meta-model-line {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.run-meta-model-line svg {
  color: var(--text-3);
  flex: 0 0 auto;
}
.run-meta-model-line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-detail-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding: 0 2px;
}
.run-detail-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.run-detail-tab:hover { color: var(--text); }
.run-detail-tab.active { color: var(--text); border-bottom-color: var(--brand); }
.run-detail-tab-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.run-detail-tab.active .run-detail-tab-count { color: var(--text); border-color: var(--text); }

.run-detail-pane { animation: uiToastIn var(--dur-3) var(--ease-out); }

.run-detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: var(--space-4) var(--space-5);
}
.run-detail-card .ui-section-head { margin-bottom: var(--space-3); }
.run-detail-card .verdict { margin: 0; }
.run-detail-card .criteria-list { margin-top: var(--space-3); }

.run-config-harness {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3);
}

.run-config-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ============ MCP DESIGN INSIGHTS (run analysis card) ============ */
.run-analysis-headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: var(--space-2);
}
.run-analysis-journey {
  margin-bottom: var(--space-3);
  line-height: 1.5;
}
.run-analysis-ideal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-2, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  margin-bottom: var(--space-3);
}
.run-analysis-ideal__stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.run-analysis-ideal__num {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1);
}
.run-analysis-ideal__label {
  font-size: 11px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.run-analysis-ideal__gap {
  margin-left: auto;
}
.run-analysis-findings {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.run-analysis-finding {
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface);
}
.run-analysis-finding--high { border-left: 2px solid var(--red); }
.run-analysis-finding--medium { border-left: 2px solid var(--amber); }
.run-analysis-finding--low { border-left: 2px solid var(--green); }
.run-analysis-finding__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text-1);
}
.run-analysis-finding__head:hover { background: var(--surface-2, rgba(0,0,0,0.02)); }
.run-analysis-finding__title { font-weight: 500; }
.run-analysis-finding__category {
  text-transform: uppercase;
  color: var(--text-2);
  font-size: 10px;
}
.run-analysis-finding__body {
  padding: 0 var(--space-3) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.run-analysis-finding__evidence {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.run-analysis-finding__evidence-link {
  font-family: var(--font-mono);
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  padding: 2px 6px;
  cursor: pointer;
  color: var(--text-2);
}
.run-analysis-finding__evidence-link:hover {
  background: var(--surface-2, rgba(0,0,0,0.04));
  color: var(--text-1);
}
.run-analysis-ideal-sequence {
  margin-top: var(--space-3);
}
.run-analysis-ideal-sequence > summary {
  cursor: pointer;
  padding: var(--space-1) 0;
}
.run-analysis-ideal-sequence ol {
  padding-left: var(--space-4);
  margin-top: var(--space-2);
}
.run-analysis-positive {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border);
}
.run-analysis-positive__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
  margin-bottom: var(--space-1);
}
.run-analysis-positive ul {
  padding-left: var(--space-4);
  margin: 0;
}
.run-analysis-empty {
  padding: var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-2);
}
.run-analysis-format-warn {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: 1px dashed var(--amber);
  border-radius: var(--radius-1);
}

.tool-call-table-wrap {
  margin-top: var(--space-3);
  overflow-x: auto;
}

.tool-call-table { width: 100%; border-collapse: collapse; }
.tool-call-table th { text-align: left; font-weight: 500; padding: 8px 12px; }
.tool-call-table th.num { text-align: right; }
.tool-call-table td { padding: 8px 12px; border-top: 1px solid var(--border); vertical-align: top; }
.tool-call-table td.num { text-align: right; font-family: var(--font-mono); font-size: 12px; }
.tool-call-table-name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.tool-call-table-args {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-detail-pre {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-2);
  border-radius: var(--radius-2);
  padding: 12px;
  border: 1px solid var(--border-soft);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  max-height: 360px;
  overflow: auto;
}

.trace-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.run-detail-trace-search {
  flex: 1;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
}
.run-detail-trace-search:focus-within {
  border-color: var(--brand-soft-border);
  box-shadow: var(--ring);
}
.run-detail-trace-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--text);
  min-width: 0;
}
.trace-empty {
  padding: 40px 14px;
  text-align: center;
  color: var(--text-3);
  font-size: 12.5px;
}

@media (max-width: 1100px) {
  .run-detail-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .run-detail-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========== Workflows (redesign) ========== */
.workflows-page > * + * { margin-top: var(--space-4); }

.workflows-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.workflows-toolbar-link {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: none;
}
.workflows-toolbar-link:hover { color: var(--text); }
.workflows-seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.workflows-seg-count {
  background: var(--surface-3);
  color: var(--text-2);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.workflows-seg button.active .workflows-seg-count {
  background: var(--brand-soft);
  color: var(--brand);
}
.workflows-search {
  flex: 1;
  min-width: 220px;
  max-width: 360px;
  margin-left: auto;
}

/* Column widths via colgroup so cells line up across rows */
.workflows-table .col-workflow { width: 300px; }
.workflows-table .col-target { width: 68px; }
.workflows-table .col-schedule { width: 70px; }
.workflows-table .col-rate { width: 90px; }
.workflows-table .col-next { width: 68px; }
.workflows-table .col-status { width: 62px; }
.workflows-table .col-actions { width: 280px; }
.workflows-table .col-actions-th { text-align: right; }

/* Force left-align across all data columns (override .num inheritance) */
.workflows-table thead th,
.workflows-table tbody td.workflows-cell {
  text-align: left;
  padding-left: 8px;
  padding-right: 8px;
}
.workflows-table tbody td.workflows-cell-actions { text-align: right; }

.workflows-table tbody tr.workflows-row { cursor: pointer; }
.workflows-table tbody tr.workflows-row:hover { background: var(--surface-2); }
.workflows-table tbody tr.workflows-row:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  background: var(--surface-2);
}

.workflows-cell {
  vertical-align: middle;
}
.workflows-cell-main { line-height: 1.3; min-width: 0; }
.workflows-row-name {
  display: block;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.workflows-row-desc-tooltip.ui-tooltip {
  display: block;
  width: 100%;
  max-width: 100%;
}
.workflows-row-desc {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.workflows-row-desc-tooltip.ui-tooltip[data-tooltip]::after {
  left: 0;
  bottom: calc(100% + 6px);
  transform: translateY(4px);
  width: max-content;
  max-width: min(640px, calc(100vw - 32px));
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  line-height: 1.4;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  z-index: 1200;
}
.workflows-row-desc-tooltip.ui-tooltip[data-tooltip]:hover::after,
.workflows-row-desc-tooltip.ui-tooltip[data-tooltip]:focus-within::after {
  transform: translateY(0);
}
.workflows-cell-target {
  line-height: 1.25;
  min-width: 0;
}
.workflows-target-kind {
  display: block;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.workflows-target-name {
  display: -webkit-box;
  margin-top: 2px;
  color: var(--text-2);
  font-size: 12.5px;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.workflows-cell-schedule {
  font-size: 12.5px;
  color: var(--text-2);
  white-space: nowrap;
}
.workflows-cell-schedule svg {
  vertical-align: -2px;
  margin-right: 6px;
  color: var(--text-3);
}
.workflows-cell-rate {
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text);
}
.workflows-rate-pill {
  font-variant-numeric: tabular-nums;
  margin-right: 8px;
  vertical-align: middle;
}
.workflows-rate-runs {
  vertical-align: middle;
}
.workflows-cell-next {
  white-space: nowrap;
  line-height: 1.25;
}

/* ========== Workflow analytics ========== */
.workflow-analytics-page {
  max-width: 1440px;
}
.workflow-analytics-head {
  align-items: flex-start;
}
.workflow-back {
  margin-bottom: var(--space-2);
  padding-left: 0;
}
.workflow-analytics-back {
  margin-bottom: var(--space-3);
}
.workflow-analytics-detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-md, var(--shadow-sm));
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.workflow-analytics-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.workflow-analytics-detail-title-block {
  flex: 1 1 320px;
  min-width: 0;
}
.workflow-analytics-detail-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.workflow-analytics-detail-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}
.workflow-analytics-detail-desc {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
  max-width: 80ch;
}
.workflow-analytics-detail-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.workflow-analytics-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border);
}
.workflow-analytics-detail-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.workflow-analytics-detail-field dt {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.workflow-analytics-detail-field dd {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.workflow-analytics-detail-field-main {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  min-width: 0;
}
.workflow-analytics-detail-field-main > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.workflow-analytics-detail-field-sub {
  color: var(--text-3);
  font-size: 12px;
}
.workflow-analytics-detail-field-empty {
  color: var(--text-3);
  font-size: 12.5px;
}
.workflow-analytics-detail-field-targets {
  grid-column: span 2;
}
.workflow-analytics-target-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.workflow-analytics-target-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12.5px;
}
.workflow-analytics-target-skill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 11px;
}
@media (max-width: 720px) {
  .workflow-analytics-detail-card {
    padding: var(--space-3) var(--space-4);
  }
  .workflow-analytics-detail-grid {
    grid-template-columns: 1fr;
  }
  .workflow-analytics-detail-field-targets {
    grid-column: auto;
  }
}
.workflow-analytics-health {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--space-3);
}
.workflow-analytics-kpi,
.workflow-analytics-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-sm);
}
.workflow-analytics-kpi {
  min-height: 74px;
  padding: var(--space-3);
}
.workflow-analytics-kpi span {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.workflow-analytics-kpi strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.workflow-analytics-kpi .tone-ok { color: var(--green); }
.workflow-analytics-kpi .tone-warn { color: var(--amber); }
.workflow-analytics-kpi .tone-bad { color: var(--red); }
.workflow-analytics-kpi.loading-row {
  pointer-events: none;
}
.workflow-analytics-kpi-skel,
.workflow-analytics-card-value-skel {
  margin-top: 2px;
}
.workflow-analytics-controls {
  display: grid;
  grid-template-columns: minmax(360px, 1.7fr) minmax(150px, .9fr) minmax(160px, .95fr) minmax(140px, .9fr) minmax(170px, 1fr);
  gap: var(--space-3);
  align-items: end;
}
.workflow-analytics-time-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.workflow-analytics-time-control .time-picker-trigger {
  width: 100%;
  justify-content: flex-start;
}
.workflow-analytics-time-control .time-picker-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.workflow-analytics-resolution {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-2);
  font-size: 12px;
}
.workflow-analytics-resolution > span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}
.workflow-analytics-small-multiples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-3);
}
.workflow-analytics-chart-card {
  appearance: none;
  width: 100%;
  display: block;
  text-align: left;
  padding: var(--space-3);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.workflow-analytics-chart-card:hover,
.workflow-analytics-chart-card.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow-sm);
}
.workflow-analytics-chart-card:hover {
  transform: translateY(-1px);
}
.workflow-analytics-card-head,
.workflow-analytics-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.workflow-analytics-card-head span,
.workflow-analytics-section-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.workflow-analytics-card-head span {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.workflow-analytics-card-head strong {
  color: var(--text);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.workflow-analytics-focus,
.workflow-analytics-card {
  padding: var(--space-4);
}
.workflow-analytics-section-head {
  margin-bottom: var(--space-3);
}
.workflow-analytics-section-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.2;
}
.workflow-analytics-section-head p {
  margin: 4px 0 0;
}
.workflow-analytics-section-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.workflow-analytics-recent {
  margin-top: var(--space-3);
}
.workflow-analytics-recent-link {
  font-size: 12.5px;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: none;
}
.workflow-analytics-recent-link:hover { color: var(--text); }
.workflow-analytics-chart {
  width: 100%;
  min-height: 0;
  position: relative;
}
.workflow-analytics-chart.compact {
  min-height: 0;
  margin-top: var(--space-2);
}
.workflow-chart-plot {
  position: relative;
  width: 100%;
  min-width: 0;
  height: clamp(210px, 30vw, 320px);
}
.workflow-analytics-chart.compact .workflow-chart-plot {
  height: clamp(104px, 12vw, 138px);
}
.workflow-analytics-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.workflow-analytics-chart-skeleton {
  position: absolute;
  inset: 22px 18px 34px 42px;
  display: flex;
  align-items: end;
  gap: 6px;
  pointer-events: none;
}
.workflow-analytics-chart.compact .workflow-analytics-chart-skeleton {
  inset: 12px 10px 18px;
  gap: 4px;
}
.workflow-analytics-chart-skeleton-bar {
  flex: 1;
  min-width: 4px;
  border-radius: 0;
}
.workflow-chart-legend-loading span {
  pointer-events: none;
}
.workflow-chart-legend-loading .skel {
  display: inline-block;
}
.workflow-chart-grid {
  stroke: var(--border);
  stroke-width: 1;
}
.workflow-chart-axis {
  fill: var(--text-3);
  font-size: 11px;
}
.workflow-chart-axis.end {
  text-anchor: end;
}
.workflow-chart-series polyline {
  fill: none;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.workflow-chart-series circle {
  stroke: var(--surface);
  stroke-width: 1;
  cursor: pointer;
}
.workflow-chart-series.series-0 { color: #2563eb; }
.workflow-chart-series.series-1 { color: #16a34a; }
.workflow-chart-series.series-2 { color: #f97316; }
.workflow-chart-series.series-3 { color: #7c3aed; }
.workflow-chart-series.series-4 { color: #0891b2; }
.workflow-chart-series.series-5 { color: #be123c; }
.workflow-chart-series polyline {
  stroke: currentColor;
}
.workflow-chart-series circle {
  fill: currentColor;
  stroke: var(--surface);
}
.workflow-chart-tooltip {
  position: absolute;
  z-index: 4;
  min-width: 184px;
  max-width: 260px;
  padding: 7px 8px;
  border: 1px solid var(--border-strong);
  background: var(--text);
  color: var(--surface);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
}
.workflow-chart-tooltip.placement-left {
  transform: translate(calc(-100% + 8px), calc(-100% - 10px));
}
.workflow-chart-tooltip.placement-right {
  transform: translate(-8px, calc(-100% - 10px));
}
.workflow-chart-tooltip-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-bottom: 5px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
}
.workflow-chart-tooltip-title i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: currentColor;
}
.workflow-chart-tooltip-title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workflow-chart-tooltip-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 12px;
  align-items: baseline;
  font-size: 11px;
  line-height: 1.25;
}
.workflow-chart-tooltip-grid span {
  color: color-mix(in srgb, var(--surface) 64%, transparent);
}
.workflow-chart-tooltip-grid strong {
  color: var(--surface);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.workflow-chart-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  color: var(--text-2);
  font-size: 12px;
}
.workflow-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.workflow-chart-legend i {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}
.workflow-chart-legend-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}
.workflow-chart-legend .series-0 { color: #2563eb; }
.workflow-chart-legend .series-1 { color: #16a34a; }
.workflow-chart-legend .series-2 { color: #f97316; }
.workflow-chart-legend .series-3 { color: #7c3aed; }
.workflow-chart-legend .series-4 { color: #0891b2; }
.workflow-chart-legend .series-5 { color: #be123c; }
.workflow-analytics-selection {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
}
.workflow-analytics-selection strong {
  color: var(--text);
  margin-left: auto;
}
.workflow-analytics-details {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--space-4);
  align-items: start;
}
.workflow-analytics-detail-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.workflow-analytics-table-wrap {
  overflow-x: auto;
}
.workflow-analytics-table {
  min-width: 620px;
}
.workflow-analytics-table tbody tr {
  cursor: pointer;
}
.workflow-analytics-table tbody tr:hover {
  background: var(--surface-2);
}
.workflow-run-reason {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 11px;
  text-transform: capitalize;
}
.workflow-analytics-error {
  margin-top: var(--space-6);
}
@media (max-width: 1180px) {
  .workflow-analytics-controls,
  .workflow-analytics-details {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .workflow-analytics-head {
    gap: var(--space-4);
  }
  .workflow-analytics-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }
  .workflow-chart-plot {
    height: clamp(190px, 58vw, 260px);
  }
  .workflow-analytics-chart.compact .workflow-chart-plot {
    height: clamp(116px, 36vw, 160px);
  }
  .workflow-chart-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .workflow-chart-legend span {
    min-width: 0;
  }
}
.workflows-next-main {
  display: block;
  color: var(--text);
}
.workflows-next-sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-3);
}
.workflows-cell-status { white-space: nowrap; }
.workflows-cell-actions {
  white-space: nowrap;
}
.workflows-table tbody td.workflows-cell-actions {
  padding-left: 4px;
  padding-right: 6px;
}
.workflows-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
}

/* Row-action buttons (Run history / Edit) — clear hover feedback */
.workflows-action {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  gap: 4px;
  padding: 4px 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-weight: 500;
  font-size: 11px;
  border-radius: var(--radius-2);
  transition:
    background var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.workflows-action svg { color: var(--text-3); transition: color var(--dur-2) var(--ease-out); }

.workflows-action:hover,
.workflows-action:focus-visible {
  background: var(--brand-soft);
  border-color: var(--brand-soft-border);
  color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand-soft-border) inset;
  outline: none;
}
.workflows-action:hover svg,
.workflows-action:focus-visible svg { color: var(--brand); }

.workflows-action:active { transform: translateY(0.5px); }

/* Split "Run all (N) | v" button used when a workflow has 2+ configured
   (harness, model) targets. Two adjacent buttons share a border so they
   read as one control; the popover is positioned relative to the wrapper. */
.workflows-run-split {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.workflows-run-split-primary {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0;
}
.workflows-run-split-caret {
  padding: 5px 6px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
}
/* Keep the split-control caret flush to the primary action while the outer
   action row owns spacing between separate controls. */
.workflows-cell-actions .workflows-run-split .workflows-run-split-primary + .workflows-run-split-caret {
  margin-left: 0;
}
.workflows-run-split.is-open .workflows-run-split-primary,
.workflows-run-split.is-open .workflows-run-split-caret {
  background: var(--brand-soft);
  border-color: var(--brand-soft-border);
  color: var(--brand);
}

/* The menu is portaled-by-positioning (position: fixed with coords computed
   from the caret's bounding rect) so it escapes `.runs-table-wrap`'s
   `overflow-x: auto` clip context — otherwise the popover gets cropped to
   the row's visible height and the user can't see the options. */
.workflows-run-split-menu {
  position: fixed;
  z-index: 1000;
  min-width: 240px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.workflows-run-split-menu-head {
  padding: 6px 8px 4px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.workflows-run-split-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}
.workflows-run-split-menu-item + .workflows-run-split-menu-item {
  border-top: 1px solid var(--border);
}
.workflows-run-split-menu-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.workflows-run-split-menu-row:hover { background: var(--surface-2); }
.workflows-run-split-menu-row input { margin: 0; }
.workflows-run-split-menu-logo {
  display: block;
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}
.workflows-run-split-menu-logo-placeholder {
  visibility: hidden;
}
.workflows-run-split-menu-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 6px;
  flex: 1;
  min-width: 0;
}
.workflows-run-split-menu-harness {
  font-weight: 500;
  color: var(--text-2);
}
.workflows-run-split-menu-model {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workflows-run-split-menu-skill {
  grid-column: 2;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.25;
}
.workflows-run-split-menu-foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.ui-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========== Workflow editor (redesign) ========== */
.workflow-editor-page > * + * { margin-top: var(--space-4); }

.workflow-editor-hero {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.workflow-editor-title-block {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
.workflow-editor-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 56ch;
}
.workflow-editor-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.workflow-editor-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.workflow-editor-fieldset:disabled {
  opacity: 0.72;
}
.workflow-editor-loading-state {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  color: var(--text);
}
.workflow-editor-loading-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.workflow-editor-loading-title {
  font-size: 13px;
  font-weight: 600;
}
.workflow-editor-loading-subtitle {
  font-size: 12px;
  color: var(--text-3);
}
.workflow-editor-error-state {
  justify-content: flex-start;
}
.workflow-editor-error-state > .icon {
  color: var(--red);
  flex: 0 0 auto;
}
.workflow-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.workflow-toggle:hover { border-color: var(--border-strong); }
.workflow-toggle.on { color: var(--text); }
.workflow-toggle:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--brand-soft-border); }

.workflow-editor-pane { display: flex; flex-direction: column; gap: var(--space-4); }

.workflow-form-section {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 0;
  overflow: hidden;
}
.workflow-form-section:has(.workflow-harness-select.open),
.workflow-form-section:has(.workflow-model-select.open) {
  overflow: visible;
  z-index: 20;
}
.workflow-form-section-head {
  padding: var(--space-3) var(--space-5);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.workflow-form-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}
.workflow-form-section-help {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}
.workflow-form-section-body { padding: 0 var(--space-5); }
.workflow-form-section-body .field-row:last-child { border-bottom: 0; }

.workflow-model-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  padding: 14px 0;
}
.workflow-model-picker .model-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
  font-size: 12.5px;
}
.workflow-model-picker .model-option:hover { border-color: var(--border-strong); background: var(--surface-2); }
.workflow-model-picker .model-option.selected {
  border-color: var(--brand-soft-border);
  background: var(--brand-soft);
  color: var(--brand);
}
.workflow-model-picker .model-option input[type="checkbox"],
.workflow-model-picker .model-option input[type="radio"] {
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-1);
  cursor: pointer;
  flex-shrink: 0;
}
.workflow-model-picker .model-option input[type="radio"] {
  border-radius: 999px;
}
.workflow-model-picker .model-option.selected input[type="checkbox"],
.workflow-model-picker .model-option.selected input[type="radio"] {
  background: var(--brand);
  border-color: var(--brand);
}
.workflow-model-picker .model-option > svg { color: var(--brand); margin-left: auto; }

.workflow-harness-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.workflow-harness-select-trigger {
  min-height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.workflow-harness-select-trigger:hover {
  background: var(--surface-2);
}
.workflow-harness-select.open .workflow-harness-select-trigger,
.workflow-harness-select-trigger:focus {
  border-color: var(--brand);
  box-shadow: var(--ring);
}
.workflow-harness-select-trigger:disabled {
  border-color: var(--border);
  background: var(--surface-3);
  color: var(--text-3);
  cursor: not-allowed;
  box-shadow: none;
}
.workflow-harness-select-value,
.workflow-harness-select-option-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.workflow-harness-select-label,
.workflow-harness-select-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.workflow-harness-select-chevron {
  flex: 0 0 auto;
  color: var(--text-3);
  transition: transform var(--dur-2) var(--ease-out);
}
.workflow-harness-select.open .workflow-harness-select-chevron {
  transform: rotate(180deg);
}
.workflow-harness-select-menu,
.workflow-model-select .custom-select-menu {
  padding: 6px;
}
.workflow-harness-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 70;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.workflow-harness-select-option {
  min-height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.workflow-harness-select-option:hover,
.workflow-harness-select-option:focus {
  background: var(--surface-2);
  outline: none;
}
.workflow-harness-select-option.is-selected {
  background: var(--brand-soft);
  color: var(--brand);
}
.workflow-harness-select-option:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.workflow-harness-select-option:disabled:hover {
  background: transparent;
}
.workflow-harness-select-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-3);
  background: var(--surface-2);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}
.workflow-harness-select-check {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--brand);
}
.workflow-model-select .custom-select-trigger {
  min-height: 40px;
  border-radius: var(--radius-2);
}
.workflow-model-select .custom-select-menu {
  top: calc(100% + 8px);
  z-index: 70;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-pop);
}
.workflow-target-picker {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface);
  display: grid;
  gap: 10px;
}
.workflow-target-picker-empty {
  min-height: 44px;
  align-items: center;
}
.workflow-target-row {
  --workflow-target-control-height: 42px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(200px, 1.2fr) minmax(190px, 1fr) var(--workflow-target-control-height) var(--workflow-target-control-height);
  gap: 8px;
  align-items: center;
}
.workflow-target-row .workflow-harness-select-trigger,
.workflow-target-row .workflow-model-select .custom-select-trigger,
.workflow-target-skill .btn,
.workflow-target-row .workflow-target-variant,
.workflow-target-row .workflow-target-remove {
  height: var(--workflow-target-control-height);
  min-height: var(--workflow-target-control-height);
  padding-top: 0;
  padding-bottom: 0;
}
.workflow-target-skill {
  min-width: 0;
  display: flex;
  gap: 6px;
  align-items: center;
}
.workflow-target-skill .btn {
  min-width: 0;
  max-width: 100%;
  min-height: var(--workflow-target-control-height);
  padding: 0 10px;
  border-color: var(--border-strong);
  border-radius: var(--radius-2);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.workflow-target-skill .btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
}
.workflow-target-skill .btn:focus-visible {
  border-color: var(--brand);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--ring);
}
.workflow-target-skill .btn:first-child {
  flex: 1 1 auto;
  width: 100%;
  justify-content: center;
}
.workflow-target-skill-help {
  min-width: 170px;
  max-width: 100%;
  white-space: nowrap;
}
.workflow-target-skill-help.ui-tooltip[data-tooltip]::after {
  width: 260px;
  max-width: min(260px, 70vw);
  white-space: normal;
  text-align: center;
}
.workflow-target-add,
.workflow-target-variant,
.workflow-target-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.workflow-target-add {
  width: fit-content;
  min-height: 34px;
  gap: 6px;
  padding: 0 10px;
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 700;
}
.workflow-target-remove {
  width: var(--workflow-target-control-height, 42px);
  height: var(--workflow-target-control-height, 42px);
  background: var(--surface);
  color: var(--text-3);
}
.workflow-target-variant {
  width: var(--workflow-target-control-height, 42px);
  height: var(--workflow-target-control-height, 42px);
  background: var(--surface);
  color: var(--text-3);
}
.workflow-target-add:hover,
.workflow-target-variant:hover,
.workflow-target-remove:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
  color: var(--text);
}
.workflow-target-add:focus,
.workflow-target-variant:focus,
.workflow-target-remove:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}
.workflow-target-add:disabled,
.workflow-target-variant:disabled,
.workflow-target-remove:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.workflow-target-model {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.workflow-target-model:hover,
.workflow-target-model:focus {
  border-color: var(--border-strong);
  background: var(--surface-3);
  outline: none;
}
.workflow-target-model.is-selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
}
.workflow-target-model:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.workflow-target-check {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: var(--surface);
}
.workflow-target-model.is-selected .workflow-target-check {
  border-color: var(--brand);
  background: var(--surface);
}
.workflow-target-model-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.workflow-target-model-name,
.workflow-target-model-key {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workflow-target-model-name {
  font-size: 12.5px;
  font-weight: 700;
}
.workflow-target-model-key {
  color: var(--text-3);
  font-size: 11px;
}
.workflow-onb-target-field {
  width: 100%;
  min-width: 0;
}
.workflow-onb-target-field .workflow-harness-select.open,
.workflow-onb-target-field .workflow-model-select.open {
  z-index: 80;
}
.workflow-onb-target-field .workflow-harness-select-menu,
.workflow-onb-target-field .workflow-model-select .custom-select-menu {
  top: auto;
  bottom: calc(100% + 8px);
  max-height: min(220px, 42vh);
}
@media (max-width: 720px) {
  .workflow-target-row {
    grid-template-columns: minmax(0, 1fr) 34px;
  }
  .workflow-target-row .workflow-harness-select,
  .workflow-target-row .workflow-model-select,
  .workflow-target-row .workflow-target-skill {
    grid-column: 1 / -1;
  }
  .workflow-target-row .workflow-target-variant {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    margin-right: 42px;
  }
  .workflow-target-row .workflow-target-remove {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
}
.workflow-skill-modal {
  max-width: 760px;
}
.workflow-skill-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.workflow-skill-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 34px;
  gap: 8px;
  align-items: stretch;
}
.workflow-skill-option {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
}
.workflow-skill-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface);
  color: var(--text-3);
  cursor: pointer;
}
.workflow-skill-row-action:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
  color: var(--text);
}
.workflow-skill-option span {
  color: var(--text-3);
  white-space: nowrap;
}
.workflow-skill-upload {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.workflow-skill-upload-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.workflow-skill-upload input,
.workflow-skill-upload textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  padding: 10px 12px;
}
.workflow-target-error {
  margin-top: 0;
}
.workflow-harness-logo-img {
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 6px;
}
.workflow-harness-logo-fallback {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.workflow-prompt-textarea {
  margin: 14px 0;
  width: 100%;
  min-height: 160px;
  resize: vertical;
}

.workflow-schedule {
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.workflow-schedule-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.workflow-schedule-pill {
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--text-2);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.workflow-schedule-pill:hover { background: var(--surface-3); color: var(--text); }
.workflow-schedule-pill-active {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand-soft-border);
}
.workflow-schedule-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.workflow-schedule-pill-legacy {
  background: var(--surface-3);
  color: var(--text-2);
  border-color: var(--border-strong);
  cursor: default;
}
.workflow-schedule-help {
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--text-3);
}
.workflow-schedule-help-line { color: var(--text-2); }
.workflow-schedule-help-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 12px;
}
.workflow-schedule-help-next strong {
  font-weight: 600;
  color: var(--text);
}
.workflow-schedule-help-next-at { color: var(--text-3); }
.workflow-schedule-help-targets {
  color: var(--text-3);
  font-size: 12px;
}

/* ========== Alerts (redesign) ========== */
.alerts-page > * + * { margin-top: var(--space-4); }
.alerts-message {
  margin-bottom: var(--space-3);
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  font-size: 12.5px;
  color: var(--text);
}
.alerts-dest-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.alerts-dest-pill:hover { background: var(--surface-2); }
.alerts-dest-pill.connected { border-color: var(--green-soft-border); }
.alerts-dest-pill-label { white-space: nowrap; }
.alerts-dest-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-4);
  margin-left: 2px;
  flex-shrink: 0;
}
.alerts-dest-pill-dot.on { background: var(--green); }
.alerts-dest-pill .slack-logo,
.alerts-dest-pill svg { flex-shrink: 0; }

.alerts-summary-strip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 10px var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  flex-wrap: wrap;
}
.alerts-summary-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}
.alerts-summary-cell .ui-status-dot { align-self: center; }
.alerts-summary-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.alerts-summary-cell.tone-bad .alerts-summary-value { color: var(--red); }
.alerts-summary-cell.tone-ok .alerts-summary-value { color: var(--green); }
.alerts-summary-label {
  font-size: 12px;
  color: var(--text-3);
}
.alerts-summary-sep { color: var(--text-4); }

.alerts-rule-list {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-3);
  overflow: hidden;
}
.alerts-rule-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1.4fr) minmax(160px, 1.2fr) minmax(120px, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: 12px var(--space-4);
  border-top: 1px solid var(--border-soft);
  position: relative;
}
.alerts-rule-row-first { border-top: 0; }
.alerts-rule-row-warn .alerts-rule-name { color: var(--red); }
.alerts-rule-row:hover { background: var(--surface-2); }
.alerts-rule-status-dot { display: inline-flex; }

.alerts-rule-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.alerts-rule-name {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alerts-rule-name:hover { color: var(--brand); }
.alerts-rule-watches {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alerts-rule-target {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alerts-rule-status {
  font-variant-numeric: tabular-nums;
}
.alerts-rule-status.tone-warn {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red);
  background: transparent;
}
.alerts-rule-status.tone-ok { color: var(--green); }
.alerts-rule-status.tone-muted { color: var(--text-3); }
.alerts-rule-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.alerts-empty { padding: var(--space-7) var(--space-5); display: grid; place-items: center; }

@media (max-width: 900px) {
  .alerts-rule-row { grid-template-columns: 24px 1fr auto; }
  .alerts-rule-target,
  .alerts-rule-status { display: none; }
}

/* ========== Settings (redesign) ========== */
.settings-page > * + * { margin-top: var(--space-4); }
.settings-nav {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  flex-wrap: wrap;
}
.settings-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-2);
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.settings-nav-link:hover { background: var(--surface); color: var(--text); }
.settings-nav-link.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.settings-nav-link.active svg { color: var(--brand); }
.settings-section-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 4px;
}
.settings-section-head .ui-section-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.settings-token-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* Score chip */
.score-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
}
.score-chip-pass { background: var(--green-soft); color: var(--green); }
.score-chip-warn { background: var(--amber-soft); color: var(--amber); }
.score-chip-fail { background: var(--red-soft); color: var(--red); }

/* Classification pills */
.pill-product_bug {
  background: var(--surface-2);
  color: var(--text-3);
  border: 1px dashed var(--border);
}
.pill-environmental {
  background: var(--surface-2);
  color: var(--text-3);
}
.pill-system {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: var(--radius-pill, 999px);
  white-space: nowrap;
}

/* Verdict muted/neutral tones */
.verdict.muted { background: var(--surface-2); border-color: var(--border); }
.verdict.neutral { background: var(--surface-2); border-color: var(--border); }
.verdict.muted .verdict-icon { background: var(--text-3); }
.verdict.neutral .verdict-icon { background: var(--text-3); }

/* Verdict system notice */
.verdict-system {
  font-size: 12px;
  margin-top: 4px;
}

/* Per-criterion table */
.criteria-results { margin-top: 16px; }
.criteria-table { width: 100%; border-collapse: collapse; }
.criteria-results .criteria-table {
  font-size: 11.5px;
  line-height: 1.35;
}
.criteria-table th { text-align: left; font-weight: 500; padding: 8px 12px; }
.criteria-table td { padding: 8px 12px; border-top: 1px solid var(--border); vertical-align: top; }
.criteria-results .criteria-table th {
  padding: 6px 10px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
}
.criteria-results .criteria-table td {
  padding: 7px 10px;
}
.criterion-reason { color: var(--text-3); font-size: 11.5px; line-height: 1.35; }
.badge-required { margin-left: 8px; font-size: 10px; padding: 1px 4px; border-radius: 3px; background: var(--amber-soft); color: var(--amber); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ui-drawer,
  .ui-drawer-backdrop,
  .ui-toast { animation: none; opacity: 1; transform: none; }
  .btn, .ui-surface-interactive,
  .dash-hero-stat, .dash-inv-item,
  .runs-row, .run-detail-tab,
  .run-detail-workflow-link,
  .workflow-toggle, .workflow-schedule-pill,
  .workflow-model-picker .model-option,
  .workflow-harness-select-trigger,
  .workflow-harness-select-option,
  .alerts-rule-row,
  .alerts-rule-name,
  .alerts-dest-pill,
  .settings-nav-link { transition: none; transform: none; }
}

/* ==========================================================================
   Agent fill UI — used inside ToolMonitorWizard when an agent has drafted
   monitor arguments. Conventions: warm bone surfaces from existing tokens,
   no glow/halo. Brand color is reserved for the (a) thinking ring on the
   avatar, (b) the active-field scan-line, and (c) the agent source chip.
   ========================================================================== */

.agent-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  margin-bottom: 12px;
}
.agent-strip-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.agent-strip-avatar svg {
  width: 14px;
  height: auto;
  display: block;
}
.agent-strip-avatar.thinking::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--brand);
  animation: agent-spin 1.4s linear infinite;
}
@keyframes agent-spin { to { transform: rotate(360deg); } }
.agent-strip-text { flex: 1; min-width: 0; }
.agent-strip-title { font-weight: 600; font-size: 13.5px; color: var(--text); }
.agent-strip-sub { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.agent-strip-progress {
  flex-shrink: 0;
  width: 120px;
  height: 4px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.agent-strip-progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.agent-strip-progress-fill.indeterminate {
  width: 35%;
  animation: agent-indet 1.4s ease-in-out infinite;
}
@keyframes agent-indet {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(290%); }
}
.agent-strip-error { color: var(--red); font-size: 12px; margin-top: 2px; }
.agent-strip-stat-ready { color: var(--green); font-weight: 600; }
.agent-strip-stat-manual { color: var(--amber); font-weight: 600; }
.agent-strip-stat-skipped { color: var(--text-3); font-weight: 600; }

.agent-tool-badge { margin-left: 6px; }
.agent-tool-reason {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-3);
  font-style: italic;
}

.tool-monitor-row.is-agent-skipped .tool-monitor-row-name { color: var(--text-4); text-decoration: line-through; }
.tool-monitor-row.is-agent-skipped { opacity: 0.7; }

/* ==========================================================================
   Tool monitor wizard — grouped layout (Needs input / Ready / Skipped),
   bigger tool identity, distinct agent rationale row.
   ========================================================================== */

/* All section headers and rows are siblings of one flat container so a row
   crossing buckets is just a reorder — same DOM node, new position, smooth
   FLIP-able motion. The base 4px gap covers row-to-row spacing inside a
   group; non-first headers add margin-top on top of that for visual group
   separation. Going via gap (rather than borders/padding) keeps the
   getBoundingClientRect deltas predictable for the FLIP math. */
.tool-wizard-flat-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tool-wizard-flat-list > .tool-monitor-group-header:not(:first-child) {
  margin-top: 14px;
}

/* Section title — reads as a heading, not a callout. No box, no tinted
   background. A small colored dot carries the tone signal and the count
   chip echoes it; everything else is plain heading typography. */
.tool-monitor-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 4px;
  border: none;
  background: transparent;
  border-radius: 0;
}
.tool-monitor-group-toggle {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 3px 6px;
}
.tool-monitor-group-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.tool-monitor-group-dot.tone-warn { background: var(--amber); }
.tool-monitor-group-dot.tone-ok { background: var(--green); }
.tool-monitor-group-dot.tone-bad { background: var(--text-4); }
.tool-monitor-group-dot.tone-neutral { background: var(--text-3); }
.tool-monitor-group-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.tool-monitor-group-count {
  font-family: var(--font-mono);
  font-size: 11px;
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-3);
}
.tool-monitor-group-warn .tool-monitor-group-count {
  color: var(--amber);
  background: var(--amber-soft);
  border-color: var(--amber-soft-border);
}
.tool-monitor-group-ok .tool-monitor-group-count {
  color: var(--green);
  background: var(--green-soft);
  border-color: var(--green-soft-border);
}
.tool-monitor-group-hint {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  flex: 1 1 auto;
  min-width: 0;
}
.tool-monitor-group-action {
  margin-left: auto;
  flex-shrink: 0;
  min-height: 28px;
  padding: 4px 12px;
}
.tool-monitor-group-warn .tool-monitor-group-action {
  border-color: var(--amber-soft-border);
  background: var(--amber-soft);
  color: var(--text);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--amber-soft-border);
}
.tool-monitor-group-warn .tool-monitor-group-action:hover {
  border-color: var(--amber);
  background: var(--amber-soft);
  color: var(--text);
}
.tool-monitor-group-warn .tool-monitor-group-action:disabled,
.tool-monitor-group-warn .tool-monitor-group-action:disabled:hover {
  border-color: var(--amber-soft-border);
  background: var(--amber-soft);
  color: var(--amber);
  opacity: 0.55;
}

/* Identity column: name on top with args summary, description below, agent
   rationale as a third visually-distinct row. */
.tool-monitor-row-identity {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.tool-monitor-row-headline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.tool-monitor-row-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  flex: 0 1 auto;
}
.tool-monitor-row-desc {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Agent comment as a chat-style bubble. The avatar is a small dark circle
   with the white Armature mark inside; the bubble body sits to the right
   with a tone-colored fill (green/amber/red) tied to the row's group. */
.tool-monitor-row-agent-bubble {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
  max-width: 100%;
}
.tool-monitor-row-agent-bubble-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tool-monitor-row-agent-bubble-avatar svg {
  width: 11px;
  height: auto;
}
.tool-monitor-row-agent-bubble-text {
  position: relative;
  padding: 6px 12px;
  border-radius: 0;
  border-top-left-radius: 4px;
  font-size: 12.5px;
  line-height: 1.4;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  max-width: 540px;
}
.tool-monitor-row-agent-bubble-ok .tool-monitor-row-agent-bubble-text {
  background: var(--green-soft);
  color: var(--green);
  border-color: var(--green-soft-border);
}
.tool-monitor-row-agent-bubble-warn .tool-monitor-row-agent-bubble-text {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: var(--amber-soft-border);
}
.tool-monitor-row-agent-bubble-bad .tool-monitor-row-agent-bubble-text {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red-soft-border);
}

/* Wider modal for the tool wizard (the wizard list needs more horizontal
   room than a typical form modal). */
.tool-wizard-modal {
  width: min(880px, calc(100vw - 32px));
}
.tool-wizard-modal-body {
  padding: 16px 18px 20px;
  /* Disable the browser's automatic scroll anchoring inside the wizard.
     When a row reorders between sections, scroll-anchor would track its
     anchor element and shift the viewport to compensate — that's exactly
     the screen jump we want to avoid. The JS pin keeps scrollTop fixed,
     and this stops the browser from fighting it. */
  overflow-anchor: none;
}
.tool-wizard-flat-list {
  overflow-anchor: none;
}
.tool-wizard-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 28px 16px 8px;
}
.tool-wizard-done-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--green-soft-border);
}
.tool-wizard-done-title {
  font-size: 17px;
  font-weight: 600;
  margin-top: 6px;
}
.tool-wizard-done-sub {
  color: var(--text-3);
  font-size: 13px;
  max-width: 420px;
}
.tool-wizard-done-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Toggle in row main: align with other items, no border underneath. */
.tool-monitor-row-main .toggle {
  cursor: pointer;
}
.tool-monitor-row-main .toggle:focus-visible {
  outline: 2px solid var(--brand-soft-border);
  outline-offset: 2px;
}


/* Skipped rows: dim the body but keep the toggle inviting so users see they
   can enable it. The toggle stays full-opacity. */
.tool-monitor-row-bad .tool-monitor-row-name,
.tool-monitor-row-bad .tool-monitor-row-desc {
  opacity: 0.78;
}
.tool-monitor-row-bad .tool-monitor-row-name {
  text-decoration: line-through;
  text-decoration-color: var(--text-4);
}
/* Once the user enables a previously-skipped row, drop the strikethrough. */
.tool-monitor-row-bad:has(.toggle.on) .tool-monitor-row-name {
  text-decoration: none;
  opacity: 1;
}
.tool-monitor-row-bad:has(.toggle.on) .tool-monitor-row-desc {
  opacity: 1;
}

/* Sentence-style frequency control. Reads as "🕒 Run every [select] for all
   monitors" inline, no card chrome. The [Apply to all] button only appears
   once the user has actually picked a value. */
.tool-wizard-body { gap: 14px; padding-bottom: 12px; }
/* Shared values panel — sits above the per-tool list when 2+ checked tools
   need the same argument by name + JSON kind. The panel lets the user fill
   the value once and apply it to every tool that needs it. Once any value
   is applied, the panel collapses by default so the list is the main thing
   on screen. */
.tool-wizard-shared {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0;
}
.tool-wizard-shared-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.tool-wizard-shared-toggle {
  padding: 2px 4px;
  min-height: 22px;
  color: var(--text-2);
}
.tool-wizard-shared-title {
  font-weight: 600;
  color: var(--text);
}
.tool-wizard-shared-sub {
  font-size: 12px;
}
.tool-wizard-shared-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tool-wizard-shared-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.tool-wizard-shared-row-applied {
  border-color: var(--green-soft-border);
  background: var(--green-soft);
}
.tool-wizard-shared-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tool-wizard-shared-row-label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.tool-wizard-shared-required {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid var(--amber-soft-border);
  border-radius: 999px;
  padding: 1px 7px;
}
.tool-wizard-shared-used-by {
  padding: 2px 8px;
  min-height: 22px;
  font-size: 12px;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tool-wizard-shared-row-desc {
  font-size: 12px;
  color: var(--text-3);
}
.tool-wizard-shared-tool-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 6px 0 2px 0;
  list-style: none;
}
.tool-wizard-shared-tool-list-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 11.5px;
}
.tool-wizard-shared-tool-pill {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 0 6px;
}
.tool-wizard-shared-tool-pill-ok {
  color: var(--green);
  border-color: var(--green-soft-border);
  background: var(--green-soft);
}
.tool-wizard-shared-tool-pill-warn {
  color: var(--amber);
  border-color: var(--amber-soft-border);
  background: var(--amber-soft);
}
.tool-wizard-shared-row-body {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tool-wizard-shared-row-body .input {
  flex: 1;
  min-width: 0;
}
.tool-wizard-shared-row-applied-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--green);
}
.tool-wizard-shared-row-applied-status svg {
  color: var(--green);
}
.tool-wizard-shared-row-applied-status span {
  color: var(--text-2);
}
.tool-wizard-shared-replace {
  color: var(--amber);
  margin-left: auto;
}

/* Per-tool body: "N shared values applied" strip. Collapsed by default so a
   tool with most args coming from the shared panel reads as just its
   tool-specific fields. */
.tool-monitor-shared-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px dashed var(--border-soft);
}
.tool-monitor-shared-strip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  min-height: 24px;
  color: var(--text-2);
  font-size: 12px;
}
.tool-monitor-shared-strip-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tool-monitor-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tool-monitor-field-wrap-shared {
  border-left: 2px solid var(--green-soft-border);
  padding-left: 8px;
}
.tool-monitor-field-chip {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 0 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-3);
}
.tool-monitor-field-chip-ok {
  color: var(--green);
  border-color: var(--green-soft-border);
  background: var(--green-soft);
}
.tool-monitor-field-chip-warn {
  color: var(--amber);
  border-color: var(--amber-soft-border);
  background: var(--amber-soft);
}

/* Validate button "you're 1 click from done" pulse. Triggered when the row
   has uncommitted required fields with values typed in. Animated via
   box-shadow (not transform) so it stacks cleanly with the FLIP transform
   already running on group changes. The -attention variant brightens the
   pulse for one cycle when the user tries to leave the row without
   validating. */
.tool-monitor-validate-pulse {
  animation: tool-monitor-validate-pulse 1.4s ease-in-out infinite;
}
.tool-monitor-validate-attention {
  animation: tool-monitor-validate-attention 0.7s ease-in-out 1;
}
@keyframes tool-monitor-validate-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--brand-soft-border); }
  50% { box-shadow: 0 0 0 5px var(--brand-soft-border); }
}
@keyframes tool-monitor-validate-attention {
  0%, 100% { box-shadow: 0 0 0 0 var(--brand-soft-border); }
  50% { box-shadow: 0 0 0 10px var(--brand-soft-border); }
}
@media (prefers-reduced-motion: reduce) {
  .tool-monitor-validate-pulse,
  .tool-monitor-validate-attention {
    animation: none;
  }
}

.tool-wizard-frequency {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-2);
}
.tool-wizard-frequency-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-3);
}
.tool-wizard-frequency-label {
  font-weight: 500;
  color: var(--text);
}
.tool-wizard-frequency-select {
  width: auto;
  min-width: 112px;
}
.tool-wizard-frequency-select .custom-select-trigger {
  min-height: 26px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 2px 8px 2px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.tool-wizard-frequency-select .custom-select-trigger:hover { border-color: var(--border-strong); }
.tool-wizard-frequency-select .custom-select-trigger:focus-visible {
  outline: 2px solid var(--brand-soft-border);
  outline-offset: 2px;
}
.tool-wizard-frequency-trail { color: var(--text-3); }
.tool-wizard-frequency-apply { margin-left: 6px; }

.tool-wizard-actions { gap: 8px; margin-top: 4px; align-items: center; }
.tool-wizard-save-blocker {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--amber-soft-border);
  background: var(--amber-soft);
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.35;
}
.tool-wizard-save-blocker svg {
  flex-shrink: 0;
  color: var(--amber);
  margin-top: 1px;
}
.tool-wizard-save-blocker strong {
  color: var(--text);
  font-weight: 700;
}

/* Already-monitored rows: a slim, non-interactive list item. Muted text and
   a soft surface so the eye reads them as informational ("we've already got
   this one"), not actionable. No hover, no toggle, no expand. */
.tool-monitor-row.tool-monitor-row-existing {
  background: var(--surface-2);
  border-color: var(--border);
  opacity: 0.78;
  cursor: default;
  will-change: auto;
}
.tool-monitor-row.tool-monitor-row-existing:hover { background: var(--surface-2); }
.tool-monitor-row-main-existing {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  min-height: 40px;
  cursor: default;
}
.tool-monitor-row-existing-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid var(--green-soft-border);
  flex-shrink: 0;
}
.tool-monitor-row-existing .tool-monitor-row-name { color: var(--text-2); }
.tool-monitor-row-existing .tool-monitor-row-desc { color: var(--text-3); }

/* Inline skip confirmation — appears just above the action bar instead of
   a native confirm() dialog or a stacked modal. The user reads the question
   right where the Skip button was. */
.tool-wizard-skip-confirm {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 0;
  border: 1px solid var(--amber-soft-border);
  background: var(--amber-soft);
  color: var(--amber);
  animation: tool-wizard-skip-confirm-in 180ms ease-out;
}
@keyframes tool-wizard-skip-confirm-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.tool-wizard-skip-confirm-text { flex: 1; min-width: 0; }
.tool-wizard-skip-confirm-title { font-weight: 600; font-size: 13px; }
.tool-wizard-skip-confirm-sub {
  color: var(--text-2);
  font-size: 12.5px;
  margin-top: 2px;
}
.tool-wizard-skip-confirm-actions {
  display: inline-flex;
  gap: 8px;
  flex-shrink: 0;
}
.btn.btn-danger {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.btn.btn-danger:hover { background: #962019; border-color: #962019; }

/* Plain muted "required" hint next to the field name — no color shift in
   the needs-input bucket. The yellow signal lives on the input border and
   the per-field check icon, not on the label. */
.tool-arg-required {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

/* Persistent amber side rail on every row in the "Needs your input" group,
   so the section is scannable even when the agent flagged no schema-required
   fields (an all-optional tool can still need user attention). */
.tool-monitor-row.tool-monitor-row-warn {
  box-shadow: inset 3px 0 0 var(--amber);
}

/* FLIP-friendly row + header positioning. Rows and section headers all live
   in a single flat list so React keeps each DOM node alive when its bucket
   changes; useLayoutEffect captures bounding rects before and after each
   render and plays a Web Animation from old → new position. position:
   relative anchors the transform / z-index dip the mover applies during
   travel; will-change is a hint for the compositor so the animation is
   driven on the GPU and stays smooth on long lists. */
.tool-monitor-row,
.tool-wizard-flat-list > .tool-monitor-group-header {
  position: relative;
  will-change: transform;
}

/* Big foreground panel shown while the agent is drafting fills. Replaces
   the row list entirely so the user can't edit half-filled defaults
   that are about to be overwritten. */
.tool-wizard-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 56px 24px 64px;
}
.tool-wizard-saving-veil {
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9, 8, 8, 0.34);
  pointer-events: auto;
}
.tool-wizard-saving-veil .tool-wizard-loading {
  width: min(440px, calc(100vw - 48px));
  padding: 32px 24px 36px;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  box-shadow: 6px 6px 0 var(--ink-line);
}
.tool-wizard-loading-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.tool-wizard-loading-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tool-wizard-loading-mark svg {
  width: 28px;
  height: auto;
}
.tool-wizard-loading-avatar.thinking::before,
.tool-wizard-loading-avatar.thinking::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--brand);
  animation: tool-wizard-loading-spin 1.4s linear infinite;
}
.tool-wizard-loading-avatar.thinking::after {
  inset: -12px;
  border-top-color: var(--brand-soft-border);
  animation-duration: 2.2s;
  animation-direction: reverse;
}
@keyframes tool-wizard-loading-spin { to { transform: rotate(360deg); } }
.tool-wizard-loading-title {
  font-size: 18px;
  font-weight: 600;
  margin-top: 6px;
  color: var(--text);
}
.tool-wizard-loading-sub {
  color: var(--text-3);
  font-size: 13.5px;
  max-width: 480px;
  line-height: 1.5;
}
.tool-wizard-loading-bar {
  width: 220px;
  height: 4px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 12px;
  position: relative;
}
.tool-wizard-loading-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  animation: tool-wizard-loading-bar 1.4s ease-in-out infinite;
}
@keyframes tool-wizard-loading-bar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(290%); }
}

/* ========== Workflow onboarding modal ========== */

.workflow-onb-modal {
  width: min(860px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.workflow-onb-modal.is-wide {
  width: min(920px, calc(100vw - 32px));
}

.workflow-onb-modal .modal-header {
  border-bottom: 1px solid var(--ink-line);
}

.workflow-onb-stage-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.workflow-onb-stage {
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.workflow-onb-stage.is-entering {
  animation: workflow-onb-stage-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.workflow-onb-stage.is-entering-back {
  animation: workflow-onb-stage-in-back 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.workflow-onb-stage.is-leaving {
  animation: workflow-onb-stage-out 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.workflow-onb-stage.is-leaving-back {
  animation: workflow-onb-stage-out-back 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@keyframes workflow-onb-stage-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes workflow-onb-stage-in-back {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes workflow-onb-stage-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-16px); }
}
@keyframes workflow-onb-stage-out-back {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(16px); }
}

/* Stage 1 — path picker cards */
.workflow-onb-path-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.workflow-onb-path-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.workflow-onb-path-card:hover { background: var(--hover); border-color: var(--ink-line); }
.workflow-onb-path-card.is-selected {
  border-color: var(--ink-line);
  box-shadow: 4px 4px 0 var(--ink-line);
  background: var(--surface);
}
.workflow-onb-path-card-mark {
  width: 28px; height: 28px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-2); flex: 0 0 28px;
}
.workflow-onb-path-card.is-selected .workflow-onb-path-card-mark {
  background: var(--brand); color: var(--paper);
}
.workflow-onb-path-card-title {
  font-weight: 600; font-size: 14px; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.workflow-onb-path-card-title .pill {
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent; color: var(--brand);
  border: 1px solid currentColor; border-radius: 0;
  font-weight: 500;
}
.workflow-onb-path-card-sub { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }

.workflow-onb-field .benchmark-workflow-select .custom-select-trigger {
  min-height: 70px;
  padding: 14px 16px;
}

.workflow-onb-field .benchmark-workflow-select.is-selected .custom-select-trigger {
  border-color: var(--ink-line);
  box-shadow: 4px 4px 0 var(--ink-line);
  background: var(--surface);
}

.workflow-onb-field .benchmark-workflow-select .custom-select-value {
  font-weight: 600;
  font-size: 14px;
}

.benchmark-workflow-loading,
.benchmark-workflow-load-error {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 8px 10px;
  font-size: 12px;
}

.benchmark-workflow-load-error {
  justify-content: space-between;
  align-items: flex-start;
}

/* Armature breathing-orb avatar — calmer than the tool-monitor strip */
.workflow-onb-orb {
  width: 36px; height: 36px; flex: 0 0 36px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3);
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  color: var(--brand);
}
.workflow-onb-orb svg { width: 16px; height: 16px; }
.workflow-onb-orb.is-thinking::before,
.workflow-onb-orb.is-thinking::after {
  content: ''; position: absolute; inset: -3px; border-radius: 999px;
  border: 1px solid var(--brand-soft-border); pointer-events: none;
  animation: workflow-onb-breath 1400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.workflow-onb-orb.is-thinking::after {
  animation-delay: 700ms;
}
@keyframes workflow-onb-breath {
  0%   { transform: scale(1.0); opacity: 0.0; }
  20%  { opacity: 0.55; }
  60%  { transform: scale(1.10); opacity: 0.25; }
  100% { transform: scale(1.18); opacity: 0.0; }
}

/* Status text + typewriter caret */
.workflow-onb-thinking {
  display: flex; gap: 12px; align-items: center;
  background: var(--surface-3);
  border: 1px solid var(--ink-line);
  border-radius: 0;
  padding: 14px 16px;
}
.workflow-onb-thinking-text {
  flex: 1; min-width: 0;
  color: var(--text-3); font-size: 13px;
  display: flex; align-items: center;
  font-feature-settings: 'tnum';
}
.workflow-onb-thinking-caret {
  display: inline-block; width: 1px; height: 1.05em; margin-left: 1px;
  background: var(--text-3);
  vertical-align: -2px;
  animation: workflow-onb-blink 1.0s steps(1, end) infinite;
}
@keyframes workflow-onb-blink { 50% { opacity: 0; } }

/* Stage 2 — use-case textarea + suggestion pills */
.workflow-onb-usecase-area {
  display: flex; flex-direction: column; gap: 12px;
}
.workflow-onb-usecase-textarea {
  width: 100%;
  min-height: 88px;
  padding: 12px 14px;
  font: inherit; font-size: 14px; line-height: 1.45; color: var(--text);
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  resize: vertical;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.workflow-onb-usecase-textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: var(--ring);
}
.workflow-onb-suggestion-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.workflow-onb-suggestion-pill {
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.workflow-onb-suggestion-pill:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--paper);
}
.workflow-onb-suggestion-pill.is-pulse {
  animation: workflow-onb-pulse 220ms ease-out;
}
@keyframes workflow-onb-pulse {
  0%   { background: var(--brand); border-color: var(--brand); color: var(--paper); }
  100% { background: transparent; border-color: var(--border-strong); color: var(--text-2); }
}
.workflow-onb-resuggest {
  background: none; border: none; padding: 4px 0;
  font: inherit; font-size: 12px; color: var(--text-3); cursor: pointer;
  align-self: flex-start;
}
.workflow-onb-resuggest:hover { color: var(--brand); }
.workflow-onb-resuggest:disabled { opacity: 0.5; cursor: not-allowed; }
.workflow-onb-generate-ideas {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  padding: 8px 11px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.workflow-onb-generate-ideas:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--paper);
}

/* Stage 2 — staggered card reveal */
.workflow-onb-reveal {
  opacity: 0; transform: translateY(12px);
  animation: workflow-onb-rise 320ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes workflow-onb-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Stage 3 — review form fields */
.workflow-onb-review {
  display: flex; flex-direction: column; gap: 16px;
}
.workflow-onb-review-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface-3);
  border: 1px solid var(--ink-line);
  border-left-width: 3px;
  border-left-color: var(--brand);
  border-radius: 0;
  color: var(--text-2); font-size: 13px;
}
.workflow-onb-review-banner-count {
  font-family: 'Stack Sans Notch', ui-monospace, SFMono-Regular, monospace;
  font-weight: 600; color: var(--brand);
  font-feature-settings: 'tnum';
}
.workflow-onb-field {
  display: flex; flex-direction: column; gap: 6px;
}
.workflow-onb-field-label {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  display: flex; align-items: center; justify-content: space-between;
}
.workflow-onb-field input,
.workflow-onb-field textarea,
.workflow-onb-field select,
.workflow-onb-field .custom-select-trigger {
  width: 100%; padding: 10px 12px;
  font: inherit; font-size: 13.5px; color: var(--text);
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.workflow-onb-field input:focus,
.workflow-onb-field textarea:focus,
.workflow-onb-field select:focus,
.workflow-onb-field .custom-select-trigger:focus {
  outline: none; border-color: var(--brand);
  box-shadow: var(--ring);
}
.workflow-onb-field textarea { min-height: 80px; resize: vertical; }

/* Source chip — landing-style tag (mono, squared, currentColor border) */
.workflow-onb-source {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; border-radius: 0;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 0.06em;
  background: transparent;
  color: var(--brand);
  border: 1px solid currentColor;
  text-transform: uppercase;
}
.workflow-onb-source .sparkle { color: currentColor; }
.workflow-onb-source.is-edited {
  color: var(--text-3);
}

/* Criteria list */
.workflow-onb-criteria {
  display: flex; flex-direction: column; gap: 8px;
}
.workflow-onb-criterion {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: 0;
}
.workflow-onb-criterion-dot {
  width: 14px; height: 14px; flex: 0 0 14px;
  margin-top: 2px;
  color: var(--brand);
}
.workflow-onb-criterion-dot circle {
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-dasharray: 44; stroke-dashoffset: 44;
  animation: workflow-onb-draw 240ms ease-out forwards;
}
@keyframes workflow-onb-draw {
  to { stroke-dashoffset: 0; }
}
.workflow-onb-criterion textarea {
  flex: 1; border: none; background: transparent; padding: 0;
  font: inherit; font-size: 13.5px; color: var(--text); resize: none;
  min-height: 1.5em; line-height: 1.45; overflow: hidden;
}
.workflow-onb-criterion textarea:focus { outline: none; }
.workflow-onb-criterion-remove {
  background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-3);
  margin-top: -2px;
}
.workflow-onb-criterion-remove:hover { color: var(--red); }
.workflow-onb-criterion-add {
  align-self: flex-start;
  background: none; border: 1px dashed var(--border-strong); border-radius: 0;
  padding: 8px 12px; font: inherit; font-size: 12.5px; color: var(--text-3); cursor: pointer;
}
.workflow-onb-criterion-add:hover { color: var(--text); border-color: var(--ink-line); }

/* Stage 3 — sequential reveal helpers */
.workflow-onb-cascade {
  opacity: 0; transform: translateY(8px);
  animation: workflow-onb-rise 280ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Stage 3 — error panel */
.workflow-onb-error {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  background: var(--red-soft);
  border: 1px solid var(--red);
  border-left-width: 3px;
  border-radius: 0;
  color: var(--text);
}
.workflow-onb-error-text { flex: 1; font-size: 13px; }
.workflow-onb-error-actions { display: flex; gap: 8px; }

/* Stage 4 — success */
.workflow-onb-success {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 28px 24px 20px;
  text-align: center;
}
.workflow-onb-success-mark {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
}
.workflow-onb-success-mark svg path {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 32; stroke-dashoffset: 32;
  animation: workflow-onb-draw 320ms ease-out 80ms forwards;
}
.workflow-onb-success-title { font-weight: 600; font-size: 16px; color: var(--text); }
.workflow-onb-success-sub { color: var(--text-3); font-size: 13px; max-width: 360px; }
.workflow-onb-success-actions { display: flex; gap: 8px; margin-top: 6px; }

/* Manual stage — full inline editor */
.workflow-onb-manual {
  gap: 16px;
}
.workflow-onb-manual-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.workflow-onb-manual-server {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--surface-3);
  border: 1px solid var(--ink-line);
  border-radius: 0;
  font-size: 13px;
  color: var(--text);
}
.workflow-onb-manual-server-label {
  color: var(--text-3); font-size: 12px;
}
.workflow-onb-manual-server-name {
  font-weight: 600;
}
.workflow-onb-manual-server-change {
  margin-left: auto;
  background: none; border: none; padding: 0;
  font: inherit; font-size: 12px; color: var(--brand);
  cursor: pointer;
}
.workflow-onb-manual-server-change:hover { text-decoration: underline; }
.workflow-onb-manual-server-change:disabled { opacity: 0.5; cursor: default; }

.workflow-onb-source-hint {
  background: transparent; border: none; padding: 0;
  color: var(--text-3); font-size: 11.5px;
}

/* Tester-model chips */
.workflow-onb-model-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.workflow-onb-model-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  font: inherit; font-size: 12.5px; color: var(--text-2);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.workflow-onb-model-chip:hover { background: var(--hover); border-color: var(--ink-line); color: var(--text); }
.workflow-onb-model-chip.is-selected {
  background: var(--text);
  border-color: var(--text);
  color: var(--paper);
}
.workflow-onb-model-chip:disabled { opacity: 0.6; cursor: default; }
.workflow-onb-model-empty { color: var(--text-3); font-size: 12.5px; }

/* Cron preset row + custom + help */
.workflow-onb-cron-presets {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 6px;
}
.workflow-onb-cron-pill {
  padding: 5px 11px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  font: inherit; font-size: 12px; color: var(--text-2);
  cursor: pointer;
}
.workflow-onb-cron-pill:hover { background: var(--hover); border-color: var(--ink-line); color: var(--text); }
.workflow-onb-cron-pill.is-selected {
  background: var(--text);
  border-color: var(--text);
  color: var(--paper);
}
.workflow-onb-cron-pill:disabled { opacity: 0.6; cursor: default; }
.workflow-onb-cron-custom {
  width: 100%;
  font-size: 12.5px;
}
.workflow-onb-cron-help {
  margin-top: 6px;
  color: var(--text-3); font-size: 12px;
}

/* Footer (sticky-ish) */
.workflow-onb-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--ink-line);
  background: var(--surface);
}
.workflow-onb-footer-left { display: flex; gap: 8px; }
.workflow-onb-footer-right { display: flex; gap: 8px; }

/* Reduced motion: collapse all sequenced animations */
@media (prefers-reduced-motion: reduce) {
  .workflow-onb-stage,
  .workflow-onb-stage.is-entering,
  .workflow-onb-stage.is-entering-back,
  .workflow-onb-stage.is-leaving,
  .workflow-onb-stage.is-leaving-back,
  .workflow-onb-reveal,
  .workflow-onb-cascade,
  .workflow-onb-criterion-dot circle,
  .workflow-onb-success-mark svg path {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .workflow-onb-orb.is-thinking::before,
  .workflow-onb-orb.is-thinking::after { animation: none !important; opacity: 0 !important; }
  .workflow-onb-thinking-caret { animation: none !important; }
}

/* ========== Onboarding tour modal — brutalist panel over the dashboard ========== */
.onboarding-tour-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 8, 8, 0.42);
  padding: 5vh 4vw;
  pointer-events: auto;
  animation: onboarding-tour-backdrop-in 280ms ease-out both;
}

.onboarding-tour-modal {
  position: relative;
  width: 70vw;
  height: 75vh;
  max-width: 1080px;
  max-height: 740px;
  background: var(--surface);
  border: 1px solid var(--ink-line);
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--ink-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: onboarding-tour-modal-in 520ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
  transform-origin: center;
}

@keyframes onboarding-tour-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes onboarding-tour-modal-in {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.onboarding-tour-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--ink-line);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.onboarding-tour-header-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--text-2);
}
.onboarding-tour-header-label::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--brand);
  flex-shrink: 0;
}
.onboarding-tour-progress {
  display: grid;
  grid-template-columns: repeat(3, 36px);
  gap: 4px;
  margin-left: auto;
}
.onboarding-tour-dot {
  height: 3px;
  background: var(--surface-3);
  border-radius: 99px;
  transition: background var(--dur-3) var(--ease-out);
}
.onboarding-tour-dot.is-active { background: var(--brand); }

.onboarding-tour-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 26px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--surface);
}
/* Browsers ignore padding-bottom on a scrolling flex column when content
   overflows, so the bottom of the form would touch the modal edge. A
   non-shrinking pseudo-element reserves real layout space that survives
   the scroll. */
.onboarding-tour-content::after {
  content: '';
  display: block;
  flex: 0 0 28px;
}

.onboarding-tour-step-head { display: grid; gap: 6px; }
.onboarding-tour-step-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text);
}
.onboarding-tour-step-head .muted {
  color: var(--text-3);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 60ch;
}

.onboarding-tour-step-body {
  flex: 1 1 auto;
  min-height: 0;
}

/* Monitor step — explanation card shown before the wizard so the user
   understands what a monitor is and that the agent will draft arguments. */
.onboarding-tour-monitor-explain-body {
  display: grid;
  gap: 20px;
  align-content: start;
}
.onboarding-tour-monitor-explain-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.onboarding-tour-monitor-explain-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--brand);
}
.onboarding-tour-monitor-explain-copy strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--text);
}
.onboarding-tour-monitor-explain-copy p {
  margin: 0;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}
.onboarding-tour-monitor-explain-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.onboarding-tour-monitor-explain-link {
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.onboarding-tour-monitor-explain-link:hover { color: var(--text); }

.onboarding-tour-content:has(.onboarding-tour-connect-stage) {
  overflow: hidden;
  padding-bottom: 0;
}

.onboarding-tour-connect-stage {
  overflow-y: auto;
  margin: 0 -30px;
  padding: 0 30px;
}

.onboarding-tour-connect-stage .onboarding-connect-form {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: 14px;
}

.onboarding-tour-connect-stage .onboarding-connect-form .onboarding-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: auto -30px 0;
  padding: 12px 30px 16px;
  border-top: none;
  background: var(--surface);
  box-shadow: 0 -8px 18px rgba(9, 8, 8, 0.06);
}

.onboarding-tour-connect-stage .onboarding-skip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.onboarding-tour-connect-stage .onboarding-skip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}
.onboarding-tour-connect-stage .onboarding-skip:hover {
  color: var(--text);
  transform: translateX(2px);
}
.onboarding-tour-connect-stage .onboarding-skip:hover::after { transform: scaleX(1); }

/* The workflow stage hosts production WorkflowOnboarding{UseCase|Review|Manual}
   verbatim. Two scoped tweaks: hide the per-stage Back on usecase (the tour
   has nothing meaningful to go back to), and tighten margins so the agent orb
   sits under our step header without doubling padding. */
.onboarding-tour-workflow-stage .workflow-onb-stage { padding: 0; }
.onboarding-tour-workflow-stage--usecase .workflow-onb-footer-left { display: none; }

/* Pinned modal footer — keeps Skip reachable regardless of step height. */
.onboarding-tour-modal-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  border-top: 1px solid var(--ink-line);
  background: var(--surface-2);
}
.onboarding-tour-modal-foot-primary {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.onboarding-tour-skip-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--text-3);
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.onboarding-tour-skip-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}
.onboarding-tour-skip-link:hover {
  color: var(--text);
  transform: translateX(2px);
}
.onboarding-tour-skip-link:hover::after { transform: scaleX(1); }
.onboarding-tour-skip-link:focus-visible { outline: none; box-shadow: var(--ring); }

/* Skip-confirmation slide-over: warm-bone scrim, layered offset card. */
.onboarding-tour-skip-overlay {
  position: absolute;
  inset: 0;
  background: rgba(251, 249, 247, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 24px;
}

.onboarding-tour-skip-card {
  position: relative;
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--ink-line);
  border-radius: 0;
  padding: 22px 22px 18px;
  display: grid;
  gap: 10px;
}
.onboarding-tour-skip-card::before {
  content: '';
  position: absolute;
  inset: 6px -6px -6px 6px;
  border: 1px solid var(--ink-line);
  background: var(--surface-2);
  z-index: -1;
}
.onboarding-tour-skip-card .onboarding-kicker { color: var(--brand); }
.onboarding-tour-skip-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0;
}
.onboarding-tour-skip-card p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}
.onboarding-tour-skip-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 6px;
}

/* Completion celebration — mirrors workflow-onb-success vocabulary. */
.onboarding-tour-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 28px 24px 20px;
}
.onboarding-tour-complete-mark {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: transparent;
  color: var(--green);
}
.onboarding-tour-complete h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: 0;
}
.onboarding-tour-complete .muted {
  color: var(--text-3);
  font-size: 13.5px;
  max-width: 48ch;
}
.onboarding-tour-complete-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 1280px) {
  .onboarding-tour-modal {
    width: 90vw;
    height: 90vh;
    box-shadow: 6px 6px 0 var(--ink-line);
  }
  .onboarding-tour-header-tag { display: none; }
}

@media (max-width: 720px) {
  .onboarding-tour-backdrop { padding: 0; }
  .onboarding-tour-modal {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    box-shadow: none;
    border: none;
  }
  .onboarding-tour-header { padding: 9px 14px; }
  .onboarding-tour-content { padding: 22px 18px; }
  .onboarding-tour-connect-stage {
    margin: 0 -18px;
    padding: 0 18px;
  }
  .onboarding-tour-connect-stage .onboarding-connect-form .onboarding-actions {
    margin-right: -18px;
    margin-left: -18px;
    padding: 12px 18px 16px;
  }
}

/* === Welcome stage — celebration moment after role page completes === */
.onboarding-tour-modal.is-welcome { background: var(--surface); }
.onboarding-tour-modal.is-welcome .onboarding-tour-content {
  padding: 0;
  display: block;
}
.onboarding-tour-welcome {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 56px 40px 44px;
  text-align: center;
  overflow: hidden;
}
.onboarding-tour-welcome-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  justify-items: center;
  max-width: 540px;
}
.onboarding-tour-welcome-mark {
  display: grid;
  place-items: center;
  animation: onboarding-tour-fade-up 460ms cubic-bezier(0.16, 1, 0.3, 1) 460ms both;
}
.onboarding-tour-welcome-mark img {
  width: 64px;
  height: 64px;
}
.onboarding-tour-welcome-kicker {
  animation: onboarding-tour-fade-up 460ms cubic-bezier(0.16, 1, 0.3, 1) 560ms both;
}
.onboarding-tour-welcome h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.02;
  color: var(--text);
  animation: onboarding-tour-fade-up 600ms cubic-bezier(0.16, 1, 0.3, 1) 660ms both;
}
.onboarding-tour-welcome p.muted {
  margin: 0;
  color: var(--text-3);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 46ch;
  animation: onboarding-tour-fade-up 540ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;
}
.onboarding-tour-welcome-actions {
  margin-top: 8px;
  animation: onboarding-tour-fade-up 540ms cubic-bezier(0.16, 1, 0.3, 1) 940ms both;
}

@keyframes onboarding-tour-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Brutalist confetti — sharp brick + ink + bone rectangles, no rounded
   corners, no emojis. Falls from above the modal, drifts horizontally,
   rotates as it descends. Scoped inside the welcome card so it can't
   bleed into other stages. */
.onboarding-tour-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.onboarding-tour-confetti-piece {
  position: absolute;
  top: -10%;
  display: block;
  border-radius: 0;
  animation-name: onboarding-tour-confetti-fall;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0.42, 1);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
.onboarding-tour-confetti-piece.is-brick { background: var(--brand); }
.onboarding-tour-confetti-piece.is-ink { background: var(--ink-line); }
.onboarding-tour-confetti-piece.is-bone {
  background: transparent;
  border: 1px solid var(--ink-line);
}
.onboarding-tour-confetti-piece.is-brick-soft {
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-border);
}

@keyframes onboarding-tour-confetti-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  6%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translate3d(var(--dx), 95vh, 0) rotate(var(--rot)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-tour-backdrop,
  .onboarding-tour-modal,
  .onboarding-tour-welcome-mark,
  .onboarding-tour-welcome-kicker,
  .onboarding-tour-welcome h1,
  .onboarding-tour-welcome p.muted,
  .onboarding-tour-welcome-actions {
    animation: none !important;
  }
  .onboarding-tour-confetti { display: none; }
  .onboarding-tour-connect-stage .onboarding-skip,
  .onboarding-tour-skip-link {
    transition: color var(--dur-2) var(--ease-out);
    transform: none !important;
  }
  .onboarding-tour-connect-stage .onboarding-skip::after,
  .onboarding-tour-skip-link::after { transition: none !important; }
}

@media (max-width: 720px) {
  .onboarding-tour-welcome { padding: 32px 22px; }
  .onboarding-tour-welcome h1 { font-size: 38px; }
}

.plan-limit-meter {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-3);
  font-size: 12px;
}

.plan-limit-meter > * + * {
  margin-left: 8px;
}

.plan-limit-meter strong {
  color: var(--text);
  font-weight: 700;
}

.plan-limit-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--amber);
  font-size: 12px;
}

.plan-limit-summary {
  margin-top: 8px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.4;
}

.billing-limits-section {
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-2);
  padding: 12px;
}

.billing-limits-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.billing-limits-copy {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 12px;
}

.billing-limit-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * benchmark
 * ─────────────────────────────────────────────────────────────────────────
 * Brutalist styling for the /benchmark/workflows/:id detail surface and
 * the inline batch panel that lives below it. We piggy-back on the
 * existing design tokens (--space-*, --surface*, --border*, --text*,
 * --brand-soft, --radius-*) so this view feels indistinguishable from
 * the workflow editor / runs detail pages.
 */

.benchmark-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Detail header: title-styled workflow switcher on the left, action
 * buttons (Manage MCP / CLI · New · Edit · Archive · Run) on the right.
 * The title trigger lives in .benchmark-title-switcher below.
 */
.benchmark-detail-head {
  align-items: center;
}

.benchmark-detail-head__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* `flex: 1 1 auto` + the default `min-width: auto` mean this block's
   * natural width (driven by the title trigger's content) drives the
   * flex layout. When the title + actions can't share a row, the parent
   * `.ui-page-head` is `flex-wrap: wrap` so the action cluster moves to
   * a second row instead of squeezing the title. */
  flex: 1 1 auto;
}

.benchmark-detail-description {
  margin: 0;
  max-width: 78ch;
}

/* Empty-state cards (no workflows / no batches / errors) all share the
 * same brutalist card chrome with the EmptyState component centered
 * inside. The action button row supports up to three buttons wrapping.
 */
.benchmark-empty-card {
  padding: var(--space-2);
}

.benchmark-empty-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.benchmark-loader {
  padding: 60px;
  display: flex;
  justify-content: center;
}

/* "Benchmark sources" area at the top of /benchmark. Wrapped in the
 * shared on-brand .window container (offset double-border) so it
 * matches the run-detail and insights-digest hero treatment. The
 * 6px right margin matches .run-detail-window so the offset second
 * sheet behind the card has room to peek out. */
.benchmark-sources-window {
  margin-right: 6px;
}

/* Two-column body: Benchmark MCPs on the left, Benchmark CLIs on the
 * right. Stacks to a single column on narrow viewports so the grid
 * never produces cards that are too cramped to read. */
.benchmark-sources-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Wider column gap (24px) than the row gap inside each column so the
   * MCPs vs CLIs separation reads as two distinct lists, not one
   * grid. Narrow viewports collapse to a single column below. */
  column-gap: var(--space-6);
  row-gap: var(--space-4);
  padding: var(--space-4);
}

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

@media (max-width: 960px) {
  .benchmark-sources-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.benchmark-loader--small {
  padding: 24px;
}

.benchmark-index-table-wrap {
  overflow-x: auto;
}

.benchmark-index-table {
  min-width: 900px;
}

.benchmark-index-table th:nth-child(1) { width: 32%; }
.benchmark-index-table th:nth-child(2) { width: 15%; }
.benchmark-index-table th:nth-child(3) { width: 14%; }
.benchmark-index-table th:nth-child(4) { width: 22%; }
.benchmark-index-table th:nth-child(5) { width: 11%; }

.benchmark-index-main,
.benchmark-index-stacked {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.benchmark-index-name,
.benchmark-index-leader-name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.benchmark-index-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

.benchmark-index-leader {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.benchmark-index-leader-name {
  max-width: 190px;
}

.benchmark-index-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

/* Sections within the detail page (aggregate leaderboard, past batches,
 * inline batch panel) stack with a uniform gap and share head treatment.
 */
.benchmark-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.benchmark-section-head--sub {
  margin-top: var(--space-2);
}

/* Editor card — only shown when the user clicks "Edit definition" on
 * the detail page. Reuses the .card chrome and the .mcp-form-section
 * pattern from the Connect MCP modal so inputs feel native.
 */
.benchmark-editor-card {
  display: flex;
  flex-direction: column;
}

.benchmark-editor-card__body {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.benchmark-editor-card__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
}

/* Tables: every benchmark table sits inside .card.benchmark-table-wrap
 * and uses the .ui-table base. We override only what the runs-table
 * already proves (column header chrome, sticky padding, hover row,
 * selected-row accent).
 */
.benchmark-table-wrap {
  overflow: hidden;
  padding: 0;
}

.benchmark-table-wrap .ui-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

.benchmark-table-wrap .ui-table thead th {
  text-align: left;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  background: var(--surface-2);
  font-weight: 600;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.benchmark-table-wrap .ui-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  color: var(--text);
}

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

.benchmark-table-wrap .ui-table-row-clickable {
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out);
}

.benchmark-table-wrap .ui-table-row-clickable:hover {
  background: var(--surface-2);
}

.benchmark-table-wrap .ui-table-row-clickable.is-selected,
.benchmark-table-wrap .ui-table-row-clickable.is-selected:hover {
  background: var(--brand-soft);
  box-shadow: inset 2px 0 0 var(--brand);
}

.benchmark-table-row-num {
  width: 48px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.benchmark-sort-header {
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-1, 120ms) var(--ease-out, ease-out);
}

.benchmark-sort-header:hover,
.benchmark-sort-header:focus-visible {
  background: var(--surface-3);
  outline: none;
}

.benchmark-sort-header.is-active {
  color: var(--text);
}

.benchmark-sort-header__inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.benchmark-sort-header__arrow {
  font-size: 10px;
  line-height: 1;
  color: var(--brand);
  transition: opacity var(--dur-1, 120ms) var(--ease-out, ease-out);
}

/* Inactive columns: render a ↕ glyph that's invisible until the user
 * hovers (or keyboard-focuses) the header so every clickable column
 * reveals its sortability on first interaction without crowding the
 * default view.
 */
.benchmark-sort-header__arrow--inactive {
  color: var(--text-3);
  opacity: 0;
}

.benchmark-sort-header:hover .benchmark-sort-header__arrow--inactive,
.benchmark-sort-header:focus-visible .benchmark-sort-header__arrow--inactive {
  opacity: 0.7;
}

/* Toolbar strip above a sortable table — only mounted when the current
 * sort differs from the table's default. Hosts the "Reset sort" link;
 * styled to feel like a quiet caption row, not a primary action.
 */
.benchmark-table-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 6px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}

.benchmark-table-toolbar__reset {
  font-size: 11.5px;
  color: var(--text-2);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.benchmark-table-toolbar__reset:hover {
  color: var(--brand);
}

/* Leaderboard toolbar is always rendered (for the model-breakdown toggle),
 * so we use justify-content: space-between to push reset-sort left and the
 * toggle right, with a gap when both are present.
 */
.benchmark-table-toolbar--leaderboard {
  justify-content: space-between;
  gap: 8px;
}

.benchmark-leaderboard-model-toggle {
  font-size: 11.5px;
  color: var(--text-2);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  margin-left: auto;
}

.benchmark-leaderboard-model-toggle:hover,
.benchmark-leaderboard-model-toggle.is-active {
  color: var(--brand);
}

/* Summary tiles for the inline batch panel — a 4-up grid of label/value
 * pairs. The value can be a string (number) or a Pill (status).
 */
.benchmark-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}

.benchmark-summary-tile {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius-2);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.benchmark-summary-tile__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 600;
}

.benchmark-summary-tile__value {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* AI cross-source recap card. Uses the standard .card chrome with a
 * .card-header band and a body paragraph that wraps long judge prose.
 */
.benchmark-recap-card {
  display: flex;
  flex-direction: column;
}

.benchmark-recap-card--placeholder {
  border-style: dashed;
}

.benchmark-recap-card__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.benchmark-recap-card__title-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.benchmark-recap-card__timestamp {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.benchmark-recap-card__hint {
  padding: var(--space-3) var(--space-5);
}

.benchmark-recap-card__body {
  padding: var(--space-3) var(--space-5);
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

.benchmark-recap-card__highlights {
  margin: 0;
  padding: 0 var(--space-5) var(--space-4) calc(var(--space-5) + var(--space-3));
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: disc;
  color: var(--text-2);
}

/* Rich batch-comparison recap layout */
.benchmark-recap-card--rich {
  gap: 0;
}

.benchmark-recap-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
}

.benchmark-recap-section:first-of-type {
  border-top: none;
}

.benchmark-recap-section__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.benchmark-recap-section__label--winners {
  color: var(--green, #22c55e);
}

.benchmark-recap-section__label--losers {
  color: var(--red, #ef4444);
}

.benchmark-recap-section__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

.benchmark-recap-section__empty {
  margin: 0;
  padding: var(--space-1) 0;
}

.benchmark-recap-winlose-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.benchmark-recap-winlose-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

.benchmark-recap-winlose-item__dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 5px;
}

.benchmark-recap-winlose-item--win .benchmark-recap-winlose-item__dot {
  background: var(--green, #22c55e);
}

.benchmark-recap-winlose-item--lose .benchmark-recap-winlose-item__dot {
  background: var(--red, #ef4444);
}

.benchmark-recap-winlose-item__text {
  flex: 1;
}

/* Similarities / Differences tab toggle */
.benchmark-recap-simdiff-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-2);
  border-radius: 6px;
  padding: 2px;
  width: fit-content;
}

.benchmark-recap-simdiff-tab {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  border: none;
  border-radius: 4px;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

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

.benchmark-recap-simdiff-tab--active {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.benchmark-recap-simdiff-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 600;
}

.benchmark-recap-list {
  margin: 0;
  padding: 0 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: disc;
  color: var(--text-2);
}

.benchmark-recap-list li {
  line-height: 1.55;
}

.benchmark-leaderboard-empty {
  padding: var(--space-5);
  text-align: center;
  border-style: dashed;
}

/* Workflow create / Run-batch modals.
 * The two-step modal reuses the brutalist primitives from the Connect
 * MCP modal: .modal-panel, .modal-header, .modal-body, .input,
 * .mcp-form-section, etc. We only need a few small helpers for the
 * source multi-select rows + matrix head below.
 */
.benchmark-create-modal {
  width: min(720px, calc(100vw - 32px));
}

.benchmark-matrix-head {
  margin-bottom: var(--space-2);
}

.benchmark-matrix-head__title {
  margin-bottom: 0;
}

.benchmark-matrix-head__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.benchmark-source-search {
  margin-bottom: var(--space-2);
}

.benchmark-pick-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: var(--space-2);
}

.benchmark-pick-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
}

.benchmark-pick-row:hover {
  border-color: var(--brand);
}

.benchmark-pick-row.is-checked {
  background: var(--brand-soft);
  border-color: var(--brand);
}

.benchmark-pick-row.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.benchmark-pick-row__icon {
  color: var(--text-3);
  flex-shrink: 0;
}

.benchmark-pick-row__body {
  flex: 1;
  min-width: 0;
}

.benchmark-pick-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.benchmark-pick-row__meta {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 11px;
}

.benchmark-source-filters {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.benchmark-source-filter {
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.benchmark-source-filter:hover {
  border-color: var(--brand);
}

.benchmark-source-filter.is-active {
  background: var(--brand);
  color: var(--bg);
  border-color: var(--brand);
}

.benchmark-source-filter:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.benchmark-pick-empty {
  padding: var(--space-3);
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}

/* Title-styled workflow switcher. The trigger inherits the same display
 * typography as .ui-page-title so the dropdown reads as the page heading
 * (h1-equivalent), with a small chevron at the end. The popover lists
 * existing benchmarks plus a divider + "+ New benchmark" action.
 */
.benchmark-title-switcher {
  position: relative;
  display: inline-flex;
  /* No max-width cap — the wrapper grows to fit the trigger, which in
   * turn grows to fit the label. If that would push the action cluster
   * off the row, the parent header's `flex-wrap: wrap` moves actions to
   * a second row instead of truncating the title. */
}
.benchmark-title-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 0;
  padding: 4px 6px;
  margin-left: -6px;
  /* Floor the trigger so short / single-word workflow names still get a
   * comfortable click target and the chevron has somewhere to live;
   * no max-width cap so realistic-length names display in full. */
  min-width: 40ch;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius-2);
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.benchmark-title-switcher__trigger:hover,
.benchmark-title-switcher.is-open .benchmark-title-switcher__trigger {
  color: var(--brand);
  background: var(--surface-2);
}
.benchmark-title-switcher__trigger:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.benchmark-title-switcher__label {
  /* Single-line title, but NO ellipsis / overflow:hidden / max-width — the
   * label drives the trigger width, the trigger drives the title block's
   * flex item width, and the parent header wraps the action cluster
   * underneath rather than ever truncating the visible title. */
  white-space: nowrap;
}
.benchmark-title-switcher__chevron {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.benchmark-title-switcher__trigger:hover .benchmark-title-switcher__chevron,
.benchmark-title-switcher.is-open .benchmark-title-switcher__chevron {
  color: var(--brand);
}
.benchmark-title-switcher.is-open .benchmark-title-switcher__chevron {
  transform: rotate(180deg);
}
.benchmark-title-switcher__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 280px;
  max-width: min(420px, calc(100vw - 32px));
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.benchmark-title-switcher__option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.benchmark-title-switcher__option:hover,
.benchmark-title-switcher__option:focus {
  background: var(--surface-2);
  outline: none;
}
.benchmark-title-switcher__option.is-selected {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}
.benchmark-title-switcher__option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.benchmark-title-switcher__tick {
  flex-shrink: 0;
  color: var(--brand);
}
.benchmark-title-switcher__divider {
  height: 1px;
  margin: 4px 0;
  background: var(--border);
}
.benchmark-title-switcher__option--action {
  color: var(--brand);
  font-weight: 600;
}
.benchmark-title-switcher__option--action:hover,
.benchmark-title-switcher__option--action:focus {
  background: var(--brand-soft);
}
.benchmark-title-switcher__option--action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  color: var(--text-3);
  background: transparent;
}
.benchmark-title-switcher__empty {
  padding: 8px 10px;
  color: var(--text-3);
  font-size: 12.5px;
}

/* Offset "current batch" card. Wraps the inline batch panel in a card
 * that visually pops off the past-batches table above using the same
 * brutalist hard shadow the modal-panel uses. A small head strip names
 * the batch (id + started_at + status pill) so users can tell which
 * batch they're looking at at a glance.
 */
.benchmark-current-batch-card {
  margin-top: var(--space-6);
  margin-left: var(--space-3);
  margin-right: var(--space-3);
  background: var(--paper);
  border: 1px solid var(--ink-line);
  box-shadow: 6px 6px 0 var(--ink-line);
  display: flex;
  flex-direction: column;
}
.benchmark-current-batch-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.benchmark-current-batch-card__head-left {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
  flex-wrap: wrap;
}
.benchmark-status-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.benchmark-replay-btn {
  /* Soft background + visible border so the action is discoverable on its
     row without dominating the (already-loud) red status pill it sits
     next to. btn-ghost — the original choice — is the right pattern for
     hover-revealed row actions, but this button is always visible and
     was disappearing into the table. */
  padding: 2px 8px;
  height: auto;
  min-height: 0;
  font-size: 11px;
  gap: 4px;
  background: var(--surface-2);
  border-color: var(--surface-3);
  color: var(--text-2);
}
.benchmark-replay-btn:hover:not(:disabled) {
  background: var(--surface-3);
  color: var(--text);
}
.benchmark-current-batch-card__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 600;
}
.benchmark-current-batch-card__id {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.benchmark-current-batch-card__sub {
  min-width: 0;
}
.benchmark-current-batch-card__body {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (max-width: 720px) {
  .benchmark-current-batch-card {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ========== Insights page (editorial digest, brutalist take) ==========
   Design intent: hard 1px ink rules, no rounded chrome, mono labels,
   sans body, display reserved for ONE thing (the headline). The page
   reads as a printed broadsheet — stark hierarchy, brick accent, lots
   of horizontal rules between blocks. */
/* Insights page — calm editorial layout. The display face appears
   exactly once (the headline). Everything else uses sans for content
   and one mono-caps treatment for labels. Color is rationed: brand
   for accents and the hero rail; semantic green/amber/red live only
   on tags and trend deltas. Borders stay 1px subtle; no heavy ink
   rectangles or pill backgrounds. Vertical rhythm is owned by space-5
   between sections so the page reads as a stack of breathing blocks. */
.insights-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-bottom: var(--space-9);
}
.insights-pagetitle {
  margin: 0;
}
.insights-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  /* Isolate so the `.window::before` offset sheet on `.i-page` paints
     INSIDE this wrapper at z-index:-1 (behind .i-page's surface, but
     still visible to the user). Without this the negative z-index can
     escape into the broader app shell and either disappear behind the
     app background or paint *in front of* the page on some browsers,
     producing the "grey sheet mixed with white" glitch. */
  isolation: isolate;
}

/* Shared mono eyebrow used above the Daily digest column and above
   the Live signal rail. Same scale + spacing as the digest paper's
   .eyebrow class so the two columns visually rhyme with the
   editorial paper that lives inside them. */
.insights-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Section header used identically at the top of the digest column
   AND at the top of the live-signal rail. Two-line structure
   (mono eyebrow + small sub) so the column tops align even though
   the right rail has no actions. */
.insights-railhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-line, var(--border-strong));
  min-height: 44px;
}
.insights-railhead__lead {
  min-width: 0;
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.insights-railhead__sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-3);
}

/* Two-column main split — digest column LEFT, live right rail RIGHT.
   Width ratio targets a comfortable read on a 1440px screen: paper
   column max ~ 920px, rail max 360px. Collapses below the paper
   under 1100px so the digest stays the priority on laptops. */
.insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--space-6);
  align-items: flex-start;
}
.insights-grid__digest {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.insights-grid__rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-3);
}
@media (max-width: 1100px) {
  .insights-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .insights-grid__rail {
    position: static;
  }
}

/* Right-rail panel — on-brand to match the editorial paper.
   Square corners, hairline border, mono header. Distinct enough
   from the offset-window paper that the eye reads "live context",
   close enough in language that the page feels unified. */
.i-rail-panel {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
}
.i-rail-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
}
.i-rail-panel__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0;
}
.i-rail-panel__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.i-rail-panel__metatext {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
.i-rail-panel__body {
  padding: 12px;
  min-height: 64px;
  /* IMPORTANT: do NOT clip overflow here. The standalone chart's
     hover tooltip is absolutely positioned at `bottom: 100% + 8px`
     relative to its bar and needs to render above the panel
     boundary. We rely on bucket-count + bar sizing below to keep
     the chart geometry inside the box. */
}
.i-rail-panel__body .chart-card {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}
.i-rail-panel__body .chart-body { padding: 0; }
/* Shrink the standalone-Dashboard chart geometry when it lives in
   the rail. The chart hardcodes a 240px plot height; the rail
   column is narrow, so we knock the plot down to ~140px and let
   the bars flex (no max-width) so 12 buckets fit edge-to-edge
   without cropping the rightmost bar. */
.i-rail-panel__body .run-chart-y-axis,
.i-rail-panel__body .run-chart-plot {
  height: 140px;
}
.i-rail-panel__body .run-chart-y-axis {
  padding-bottom: 16px;
  font-size: 10.5px;
}
.i-rail-panel__body .run-chart {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px;
}
.i-rail-panel__body .run-chart-bars,
.i-rail-panel__body .run-chart-x-axis {
  gap: 3px;
  padding-left: 4px;
  padding-right: 4px;
}
.i-rail-panel__body .run-chart-bar-hit {
  max-width: none;
}
.i-rail-panel__body .run-chart-x-axis {
  font-size: 9.5px;
  padding-top: 5px;
}
/* Thin the axis labels in the rail context.
   The chart renders an x-axis label per bucket cell (12 cells) and
   each <span> is `min-width: max-content`, so labels of the form
   "May 11 12PM" (~60px) overflow the ~20px-wide grid cells and
   collide with their neighbours. Keep only first / middle / last
   so the three remaining labels have ~120px of breathing room.
   `visibility: hidden` (not display:none) keeps the grid track
   sizing intact so bars and labels stay column-aligned. The
   :nth-child(7) anchor matches the 12-bucket setup wired in
   pages-insights.jsx — if that bucket count changes, this rule
   needs to follow. */
.i-rail-panel__body .run-chart-x-axis span:not(:first-child):not(:last-child):not(:nth-child(7)) {
  visibility: hidden;
}
.i-rail-panel__body .run-chart-legend {
  margin: 8px 0 0 32px;
  gap: 8px;
  font-size: 11px;
}
/* Tooltip: clamp width so it stays readable inside the rail, and
   pin its leftmost end to the bar so it can spill RIGHT (panel is
   on the page right edge — nothing painful to overlap on the
   right) instead of trying to centre and getting clipped. */
.i-rail-panel__body .run-chart-tooltip {
  min-width: 0;
  max-width: 220px;
  width: max-content;
  white-space: nowrap;
}
.i-rail-panel__body .dash-recent-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 6px 8px;
}
.i-rail-panel__body .dash-recent-row .dash-recent-meta {
  display: none;
}
/* Hide just the "Evaluation unavailable" pill (classification ==
   product_bug). The StatusBadge still renders the "System issue"
   chip, which carries the same signal more compactly. We keep
   .pill-environmental visible so genuinely environmental issues
   stay distinguishable. */
.i-rail-panel__body .dash-recent-row .pill-product_bug {
  display: none;
}
.i-rail-panel__body .dash-failing-row { padding: 6px 8px; }

/* Inventory strip — square corners + tighter height so it reads as
   a thin "operations bar", not a second hero strip. Scoped to
   .insights-page so the standalone /dashboard tab is untouched. */
.insights-page .dash-inventory { gap: var(--space-2); }
.insights-page .dash-inv-item {
  border-radius: 0;
  border-color: var(--border);
  background: var(--surface);
  padding: 10px 14px;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out);
}
.insights-page .dash-inv-item:hover {
  border-color: var(--ink-line, var(--border-strong));
  background: var(--surface-2, var(--surface));
  transform: none;
  box-shadow: none;
}
.insights-page .dash-inv-icon {
  width: 26px;
  height: 26px;
  border-radius: 0;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  color: var(--text-2);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.insights-page .dash-inv-ok .dash-inv-icon {
  background: var(--green-soft);
  border-color: var(--green-soft-border);
  color: var(--green);
}
.insights-page .dash-inv-bad .dash-inv-icon {
  background: var(--red-soft);
  border-color: var(--red-soft-border);
  color: var(--red);
}
.insights-page .dash-inv-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.insights-page .dash-inv-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.4;
}
.insights-page .dash-inv-meta {
  margin-top: 0;
  font-size: 11.5px;
  color: var(--text-3);
}
.insights-page .dash-inv-ok .dash-inv-meta { color: var(--green); }
.insights-page .dash-inv-bad .dash-inv-meta { color: var(--red); }
.insights-page .dash-inv-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text);
}
.insights-page .dash-inv-caret { color: var(--text-3); }

/* Tighter calendar inside the digest column. The strip used to span
   the full page width and show 35 days; now it lives in a ~58%
   column and shows 14 days, so day cells get a fractional width
   minimum instead of the original fixed min so they fill the row. */
.insights-grid__digest .insights-calendar {
  margin-bottom: 0;
  border-radius: 0;
  border-color: var(--border);
}
.insights-grid__digest .insights-calendar__scroller {
  gap: 0;
}
.insights-grid__digest .insights-calendar__day {
  flex: 1 1 0;
  min-width: 40px;
}

.i-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
/* `.is-bar` is the slim utility variant introduced when the headline
   moved into the report body. It strips the bottom rule and tightens
   spacing so the bar reads as page chrome above the "paper", not as
   the report's own header. */
.i-header.is-bar {
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: none;
}
.i-header__lead { min-width: 0; flex: 1 1 520px; }
.i-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.i-eyebrow span { color: var(--text-3); }
.i-headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 var(--space-3);
  max-width: 820px;
}
.i-dek {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0 0 var(--space-3);
  max-width: 720px;
  font-weight: 400;
}
.i-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 400;
}
.i-meta span { display: inline-flex; align-items: center; gap: 6px; }
.i-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.i-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease-out);
}
.i-toggle:hover { border-color: var(--border-strong); }
.i-toggle input { accent-color: var(--brand); }

/* Calendar strip — continuous date axis above the editorial title.
   Renders a horizontally-scrollable row of calendar days (weekday +
   day-number + colored marker dot when a report exists for that day).
   Days without a report are still listed so the operator can see the
   full window at a glance, but they are non-interactive. The
   surrounding container is `position: relative` so the floating hover
   tooltip can position itself against it. */
.insights-calendar {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-2);
  margin-bottom: var(--space-3);
}
.insights-calendar__pan {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  flex: 0 0 28px;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.insights-calendar__pan:hover { color: var(--text-1); background: var(--surface-2); }
.insights-calendar__scroller {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 2px 4px;
  /* Hide horizontal scrollbar in modern browsers; the chevrons + drag
     are the primary affordance. Fall back to a slim bar where pinned. */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.insights-calendar__scroller::-webkit-scrollbar { height: 6px; }
.insights-calendar__scroller::-webkit-scrollbar-track { background: transparent; }
.insights-calendar__scroller::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.insights-calendar__loading {
  font-size: 12px;
  color: var(--text-3);
  padding: var(--space-3);
}
/* Day cell — exactly one per day in the window. The cell itself is
   not interactive; the small square red dots inside it (one per
   digest) carry the click + hover affordance. Today is subtly tinted;
   the cell whose digest is currently open gets a bordered halo. */
.insights-calendar__day {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 8px 4px 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  border-radius: 4px;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.insights-calendar__day--empty {
  color: var(--text-3);
  opacity: 0.55;
}
.insights-calendar__day--today {
  background: var(--surface-2);
}
.insights-calendar__day--active {
  border-color: var(--border-strong);
}
.insights-calendar__weekday {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}
.insights-calendar__daynum {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
}
.insights-calendar__day--today .insights-calendar__daynum { font-weight: 600; }

/* Digest dots — small clickable brick-red squares, one per digest on
   that day. Color comes from the Armature brand (--brand, brick), not
   a generic warning red, since these are navigation markers rather
   than failure indicators. They line up inside the cell and wrap if
   needed. The `__dots` row reserves vertical space even when empty so
   all cells have identical height. */
.insights-calendar__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 8px;
  margin-top: 2px;
  width: 100%;
}
.insights-calendar__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 1px solid transparent;
  background: var(--brand);
  cursor: pointer;
  display: block;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.insights-calendar__dot:hover,
.insights-calendar__dot:focus-visible {
  outline: none;
  transform: scale(1.5);
  box-shadow: 0 0 0 2px rgba(200, 65, 13, 0.22);
}
.insights-calendar__dot--active {
  outline: 1px solid var(--ink-line);
  outline-offset: 2px;
}

/* Floating tooltip shown when hovering a digest dot. Positioned BELOW
   the dot (calendar lives at top of the page so an above-anchored
   tooltip would clip the page chrome). The container is
   position:relative so we work in calendar-local coordinates. */
.insights-calendar__tooltip {
  position: absolute;
  z-index: 20;
  width: 280px;
  /* Pull left so the tooltip is centered on the dot, then push down
     past the cell with a small breathing gap. The exact gap accounts
     for the cell padding (~28px from cell top to bottom of marker
     dot) so the arrow lines up with the dot. */
  transform: translate(-50%, 38px);
  background: var(--ink-line);
  color: var(--bg);
  padding: var(--space-3) var(--space-3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  font-size: 12px;
  line-height: 1.45;
}
.insights-calendar__tooltip::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--ink-line);
}
.insights-calendar__tooltip-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 6px;
}
.insights-calendar__tooltip-status {
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.12);
}
.insights-calendar__tooltip-headline {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insights-calendar__tooltip-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}
.insights-calendar__tooltip-stats strong {
  font-family: var(--font-mono);
  font-weight: 600;
  opacity: 1;
  margin-right: 2px;
}
.insights-calendar__tooltip-cta {
  margin-top: var(--space-2);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  font-family: var(--font-mono);
}

/* === Insights — redesigned content blocks ============================
   Visual contract:
   - One label style: 11px mono uppercase, weight 600, letter-spacing 0.12em, color text-3.
   - Cards: surface bg, 1px border, radius var(--radius-2), generous padding.
   - Numbers: tabular nums everywhere (font-variant-numeric: tabular-nums).
   - Color palette is severely rationed: brand for accents, semantic
     green/amber/red for state on tags only, never as panel backgrounds.
*/

/* Pulse strip — 4 KPI cells + a 14-day sparkline. Replaces the old
   "totals band" + inventory ribbon. Each cell is clickable (or inert
   when disabled) and gets a subtle hover state. */
.i-pulse {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  overflow: hidden;
}
.i-pulse__cells {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
}
.i-pulse__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background var(--dur-2) var(--ease-out);
}
.i-pulse__cell:hover:not(:disabled) { background: var(--surface-2); }
.i-pulse__cell:disabled { cursor: default; }
.i-pulse__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}
.i-pulse__value {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.i-pulse__cell.is-ok .i-pulse__value { color: var(--green); }
.i-pulse__cell.is-warn .i-pulse__value { color: var(--amber); }
.i-pulse__cell.is-bad .i-pulse__value { color: var(--red); }
.i-pulse__delta {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.i-pulse__delta.is-good { color: var(--green); }
.i-pulse__delta.is-bad { color: var(--red); }
.i-pulse__delta.is-flat { color: var(--text-3); }

.i-pulse__cell--trend {
  cursor: default;
  align-items: stretch;
  color: var(--brand);
}
.i-pulse__cell--trend:hover { background: var(--surface); }
.i-sparkline {
  width: 100%;
  height: 36px;
  margin-top: 4px;
  color: var(--brand);
}
.i-sparkline--empty {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
}

.i-pulse__inventory {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  color: var(--text-3);
}
.i-pulse__inventory span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

/* In-document editorial intro strip. Sits under the headline as the
   "a few KPIs" intro the editorial paper carries (separate from the
   big page-level KPI hero above the Daily Digest section). Smaller
   numbers, hairline dividers, no hover behaviour — meant to read
   like a stat block in an editorial, not an interactive widget. */
.i-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink-line, var(--border-strong));
}
.i-intro__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}
.i-intro__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.i-intro__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}
.i-intro__value {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.005em;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.i-intro__stat.is-good .i-intro__value { color: var(--green); }
.i-intro__stat.is-warn .i-intro__value { color: var(--amber); }
.i-intro__stat.is-bad .i-intro__value { color: var(--red); }
.i-intro__delta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.i-intro__delta.is-good { color: var(--green); }
.i-intro__delta.is-bad { color: var(--red); }
.i-intro__delta.is-flat { color: var(--text-3); }
@media (max-width: 720px) {
  .i-intro__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Top action card — the highest-leverage recommendation, treated as a
   single hero card so a Head of Product knows immediately what to do
   today. Brand rail on the left does the visual heavy lifting; the
   rest stays calm: one display title, sans body, no pill noise. */
.i-action {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  overflow: hidden;
}
.i-action__rail {
  width: 6px;
  background: var(--brand);
  flex-shrink: 0;
}
.i-action__body {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
}
.i-action__eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand);
}
.i-action__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  font-weight: 500;
  color: var(--text);
  margin: 0;
  max-width: 760px;
}
.i-action__body-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
  max-width: 720px;
}
.i-action__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.i-action__impact {
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

/* Triptych — three tonal columns: New (brand), Critical (red),
   Quietly working (green). Same card vocabulary so they read as a
   set; only the top label color differentiates them. */
.i-triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 1080px) {
  .i-triptych { grid-template-columns: 1fr; }
  .i-pulse__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.i-tri__col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top-width: 2px;
  border-radius: var(--radius-2);
  padding: var(--space-4) var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.i-tri__col.is-brand { border-top-color: var(--brand); }
.i-tri__col.is-bad { border-top-color: var(--red); }
.i-tri__col.is-good { border-top-color: var(--green); }
.i-tri__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}
.i-tri__col.is-brand .i-tri__label { color: var(--brand); }
.i-tri__col.is-bad .i-tri__label { color: var(--red); }
.i-tri__col.is-good .i-tri__label { color: var(--green); }
.i-tri__empty {
  font-size: 13px;
  color: var(--text-3);
  font-style: italic;
  margin: 0;
}
.i-tri__more {
  font-size: 11.5px;
  color: var(--text-3);
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border);
}

.i-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.i-mini:last-of-type { border-bottom: 0; padding-bottom: 0; }
.i-mini__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.i-mini__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.i-mini__body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
}
.i-mini--quiet {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
}

/* Tags — single style with semantic color modifiers. Used on findings,
   recommendations, and the streak day-counter on persistent issues. */
.i-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid currentColor;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.i-tag.is-bad { color: var(--red); }
.i-tag.is-warn { color: var(--amber); }
.i-tag.is-ok { color: var(--green); }
.i-tag.is-brand { color: var(--brand); }
.i-tag.is-amber { color: var(--amber); }
.i-tag.is-neutral { color: var(--text-3); }

.i-pill {
  display: inline-flex;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.i-pill.is-quiet { color: var(--text-3); }

/* Evidence — inline tools (mono code-style chips) and run links
   (chevron-arrow text). Both render flat with no fills, so they sit
   inside cards without stealing visual weight. */
.i-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
.i-evidence.is-compact { gap: 4px; }
.i-tool {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
}
.i-runlink {
  font-size: 11.5px;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color var(--dur-2) var(--ease-out);
}
.i-runlink:hover { border-bottom-color: var(--brand); }

/* Sections — title + optional hint, then a single content slot. */
.i-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.i-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.i-section__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.005em;
}
.i-section__hint {
  font-size: 12px;
  color: var(--text-3);
  margin: 0;
}
.i-subhead {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin: 0 0 var(--space-3);
}

.i-grid {
  display: grid;
  gap: var(--space-3);
}
.i-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .i-grid--2 { grid-template-columns: 1fr; } }

/* Generic data panel — used by failing workflows, tool reliability,
   matrix, model performance, etc. Whitespace-forward, single-pane. */
.i-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.i-panel__head {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.i-panel__hint {
  font-size: 12px;
  color: var(--text-3);
  margin: 0 0 var(--space-2);
}
.i-panel__empty {
  font-size: 13px;
  color: var(--text-3);
  font-style: italic;
  margin: 0;
}
.i-panel__more {
  margin-top: auto;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 12px;
  color: var(--brand);
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
}
.i-panel__more:hover { text-decoration: underline; }

/* Bar chart for failing workflows. Uses brand color for the bars but
   keeps tracks at surface-2 so the chart reads as quiet quantitative
   data, not an alert. */
.i-bars { display: flex; flex-direction: column; gap: 6px; }
.i-bars__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(80px, 200px) auto;
  align-items: center;
  gap: var(--space-3);
  background: transparent;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  border-bottom: 1px solid var(--border);
}
.i-bars__row:last-child { border-bottom: 0; }
.i-bars__row:hover .i-bars__name { color: var(--brand); }
.i-bars__name {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-out);
}
.i-bars__track {
  position: relative;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.i-bars__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--brand);
  border-radius: 3px;
}
.i-bars__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 24px;
}

/* Data table style — borrowed visual vocabulary from run-detail tables
   (mono numerics, sub-line under primary). */
.i-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.i-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.i-table thead th.num { text-align: right; }
.i-table tbody td {
  padding: 8px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  color: var(--text);
}
.i-table tbody tr:last-child td { border-bottom: 0; }
.i-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.i-table td.num.is-bad { color: var(--red); }
.i-table__primary {
  display: block;
  font-weight: 500;
  color: var(--text);
}
.i-table__sub {
  display: block;
  font-size: 11px;
  color: var(--text-3);
}

/* Tool×model heatmap. Cells use semantic background tints (green/
   amber/red soft) so the heat is readable at a glance without any
   text decoration. */
.i-matrix {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  overflow: hidden;
  font-size: 11.5px;
}
.i-matrix__row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) repeat(auto-fit, minmax(80px, 1fr));
  gap: 1px;
  background: var(--border);
}
.i-matrix__row--head { background: var(--surface-2); }
.i-matrix__corner, .i-matrix__head, .i-matrix__rowhead, .i-matrix__cell {
  background: var(--surface);
  padding: 8px 10px;
}
.i-matrix__head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  text-align: center;
}
.i-matrix__head--stacked {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  align-items: center;
  text-transform: none;
  letter-spacing: 0.04em;
}
.i-matrix__head-harness {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand);
}
.i-matrix__head-model {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-2);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.1;
}
.i-matrix__rowhead {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  display: flex;
  align-items: center;
}
.i-matrix__rowhead--button {
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  padding: 8px 10px;
  width: 100%;
  color: var(--text);
  transition: color var(--dur-2) var(--ease-out);
}
.i-matrix__rowhead--button:hover:not(:disabled) { color: var(--brand); }
.i-matrix__rowhead--button:disabled { cursor: default; color: var(--text); }
.i-matrix__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}
.i-matrix__cell-value {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.i-matrix__cell-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.i-matrix__cell.is-ok { background: var(--green-soft); }
.i-matrix__cell.is-ok .i-matrix__cell-value { color: var(--green); }
.i-matrix__cell.is-warn { background: var(--amber-soft); }
.i-matrix__cell.is-warn .i-matrix__cell-value { color: var(--amber); }
.i-matrix__cell.is-bad { background: var(--red-soft); }
.i-matrix__cell.is-bad .i-matrix__cell-value { color: var(--red); }
.i-matrix__cell.is-empty { background: var(--surface-2); }

/* Recommendations & regressions inside the collapsible full-report. */
.i-recos { display: flex; flex-direction: column; gap: var(--space-3); }
.i-reco {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.i-reco__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.i-reco__rank {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.i-reco__lift {
  font-size: 12px;
  color: var(--green);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.i-reco__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.35;
}
.i-reco__body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}

.i-regressions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.i-regression {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 10px var(--space-3);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.i-regression:hover { border-color: var(--border-strong); }
.i-regression__name { font-size: 13px; color: var(--text); font-weight: 500; }
.i-regression__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11.5px;
  color: var(--text-3);
}

/* Disclosure — a single button that expands the full-report block. */
.i-disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font: inherit;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  transition: border-color var(--dur-2) var(--ease-out);
}
.i-disclosure:hover { border-color: var(--border-strong); }
.i-disclosure.is-open { border-radius: var(--radius-2) var(--radius-2) 0 0; border-bottom: 0; }
.i-disclosure__hint {
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.i-disclosure__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-2) var(--radius-2);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
}

/* Error and skeleton states — kept minimal so they don't draw the eye
   away from the primary content. */
.i-error {
  background: var(--surface);
  border: 1px solid var(--red);
  border-left-width: 4px;
  border-radius: var(--radius-2);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.i-error__title { font-size: 14px; font-weight: 600; color: var(--red); }
.i-error__body { font-size: 13px; color: var(--text-2); margin: 0; }

.i-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.i-skeleton__row {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2);
}
.i-skeleton__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 1080px) {
  .i-skeleton__cols { grid-template-columns: 1fr; }
}

/* Placeholder shown while the selected digest is still being written
   (`status === 'running'` or `'queued'`). Rendering the report shell
   with an empty narrative produces a misleading 0% pass-rate card, so
   we show this card instead and let the polling loop swap it for the
   real digest once the worker finishes. */
.i-generating {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: var(--space-5) var(--space-6);
}
.i-generating__spin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  animation: i-generating-spin 1.2s linear infinite;
  flex-shrink: 0;
}
@keyframes i-generating-spin {
  to { transform: rotate(360deg); }
}
.i-generating__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.i-generating__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.i-generating__copy {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}

/* ───────────────────────────────────────────────────────────────────
   Insights v3 — message-first digest layout (focal MCP, two buckets,
   per-finding analysis → chart → fix). The legacy classes above stay
   in place so historical reports keep rendering with the old shape.
   ─────────────────────────────────────────────────────────────────── */

/* The digest "paper" reuses the on-brand offset window (`.window`)
   but overrides the `::before` so the offset reads at our larger
   page scale. The parent `.insights-main` is `isolation: isolate`
   so the z-index:-1 sheet stays contained behind .i-page without
   bleeding into the broader app shell (where it was previously
   painting on top of the white card on some browsers). */
.i-page {
  margin: var(--space-4) auto 0;
  width: 100%;
  max-width: 920px;
  position: relative;
}
.i-page.window::before {
  /* Slightly bigger offset than the runs/:id default — the report
     is a much taller card and a 6px peek disappeared against the
     near-white body background. 8px keeps it visible without
     looking like a separate stacked element. */
  inset: 8px -8px -8px 8px;
  z-index: -1;
}
.i-page__head {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.i-page__head > span:first-child::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--brand);
  margin-right: 10px;
  vertical-align: 1px;
}
.i-page__inner {
  padding: clamp(24px, 3vw, 40px) clamp(22px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Window-head extras for the digest paper: archived pill on the left
   and the archive/unarchive ghost button on the right. The button
   flows inside .window-head-url so the right-edge alignment from
   `.window-head-url { margin-left: auto }` keeps working. */
.i-archived-pill {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 6px;
  border: 1px solid var(--ink-line);
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 10px;
  letter-spacing: 0.08em;
  vertical-align: 1px;
}
.window-head-url { display: inline-flex; align-items: center; gap: 10px; }
.i-archive-btn { padding: 2px 8px; }
.i-archive-btn .icon { margin-right: 4px; }
@media (max-width: 720px) {
  .i-page { max-width: none; }
  .i-page__inner { padding: var(--space-4); }
}

.i-headline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0;
}
.i-headline__eyebrow {
  /* uses the shared `.eyebrow` class for the brick dot */
  font-size: 10.5px;
  margin-bottom: 4px;
}
.i-headline__copy {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink-line);
}
.i-headline__lede {
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 70ch;
}

/* Findings sections — one per bucket. The list rule + per-card
   hairlines mimic a printed report's body; the tone accent moves
   onto the head of each card as a 3px coloured left bar so severity
   stays scannable even when the card is collapsed. */
.i-findings {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.i-findings__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-line);
  position: relative;
}
.i-findings__head::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 2px;
  background: var(--brand);
}
.i-findings__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.014em;
  font-weight: 500;
  color: var(--ink-line);
}
.i-findings__sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.i-findings__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Collapsible finding row. Cards live as a stacked list separated
   by hairline rules (not boxes), which keeps the editorial feel of
   the paper. The head is a full-width clickable button (tag + title
   + chevron); the body slides in below when opened. */
.i-finding {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
}
.i-finding:last-child { border-bottom: none; }

.i-finding__head {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 10px 14px 14px;
  cursor: pointer;
  color: inherit;
  transition: background var(--dur-2) var(--ease-out);
  border-radius: 0;
}
.i-finding__head:hover:not(:disabled) {
  background: var(--surface-2);
}
.i-finding__head:disabled {
  cursor: default;
}
.i-finding__head:focus-visible {
  outline: 2px solid var(--ink-line);
  outline-offset: -2px;
}

.i-finding__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  transition: transform var(--dur-2) var(--ease-out);
}
.i-finding.is-open .i-finding__chev {
  transform: rotate(180deg);
  color: var(--ink-line);
}

/* Collapsible section header — used by the competitor block so a
   reader can glance at the section title before deciding to expand
   the (often long) list of competitor findings. Visually matches the
   non-collapsible head plus a chevron on the right. */
.i-findings__head--toggle {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-line);
  padding: 0 0 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.i-findings__head--toggle:focus-visible {
  outline: 2px solid var(--ink-line);
  outline-offset: 4px;
}
.i-findings__head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.i-findings__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.i-findings__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  transition: transform var(--dur-2) var(--ease-out);
  margin-top: 2px;
}
.i-findings.is-open .i-findings__chev {
  transform: rotate(180deg);
  color: var(--ink-line);
}

.i-finding__body {
  /* Full-width body. We intentionally do NOT indent it under the
     tag column — the analysis paragraph reads better with the full
     paper width, and the tag/title at the top already anchor the
     section visually. */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 14px var(--space-4) 14px;
}

/* Tone accents: a 3px coloured left bar lives on the head, painted
   via box-shadow so the grid-content doesn't shift when the card
   opens. We use the deeper semantic tones from the brand palette
   (not the soft pastels) so they read confidently on the warm paper. */
.i-finding.is-warning > .i-finding__head { box-shadow: inset 3px 0 0 var(--amber); }
.i-finding.is-danger  > .i-finding__head { box-shadow: inset 3px 0 0 var(--red); }
.i-finding.is-info    > .i-finding__head { box-shadow: inset 3px 0 0 var(--brand); }
.i-finding.is-success > .i-finding__head { box-shadow: inset 3px 0 0 var(--green); }
.i-finding.is-neutral > .i-finding__head { box-shadow: inset 3px 0 0 var(--ink-line); }

/* The `--note` variant is reserved for the legacy renderer; the
   newer no-benchmark placeholder renders through the regular card
   in `forceOpen` mode. */
.i-finding--note {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.i-finding__tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 22px;
  padding: 0 8px;
  border-radius: 0;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  background: transparent;
  color: var(--text-3);
}
.i-finding__tag.is-warning { color: var(--amber); }
.i-finding__tag.is-danger  { color: var(--red); }
.i-finding__tag.is-info    { color: var(--brand); }
.i-finding__tag.is-success { color: var(--green); }
.i-finding__tag.is-neutral { color: var(--text-3); }
.i-finding__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-line);
  /* Last-resort fallback if a title slips past the 72-char server
     cap — clamp to two lines so the collapsed card stays compact. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.i-finding__analysis {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}
.i-finding__chart {
  display: block;
  padding: var(--space-3) 0 var(--space-2);
  border-top: 1px solid var(--border-soft, var(--border));
  border-bottom: 1px solid var(--border-soft, var(--border));
}
/* The "Do" block is the actionable take-away. Differentiate it
   visually so it doesn't read as part of the analysis paragraph:
   bordered, tinted, with a mono uppercase brick label that sits
   above the recommendation copy. */
.i-finding__fix {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-line);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  padding: 10px 14px 12px;
  display: block;
}
.i-finding__fix-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 4px;
}

/* Inline charts — dependency-free SVG/HTML primitives so the digest
   renders identically in the app and in screenshots embedded in email
   or Slack. Tones map to the same colour tokens used by the finding
   borders so a danger-toned bar visually echoes its parent card. */
.i-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.i-chart--hbar .i-chart__row {
  display: grid;
  grid-template-columns: 160px 1fr 80px;
  align-items: center;
  gap: var(--space-3);
}
.i-chart__label {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.i-chart__track {
  position: relative;
  height: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.i-chart__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  border-radius: 0;
  transition: width var(--dur-3, 240ms) var(--ease-out, ease-out);
}
.i-chart__stack {
  display: flex;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
}
.i-chart__seg {
  height: 100%;
  transition: width var(--dur-3, 240ms) var(--ease-out, ease-out);
}
.i-chart__value {
  font-size: 12px;
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
}

.i-chart--vbar .i-chart__cols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(40px, 1fr);
  gap: var(--space-2);
  height: 130px;
  align-items: end;
}
.i-chart__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  height: 100%;
}
.i-chart__col-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.i-chart__col-bar {
  flex: 1;
  border-radius: 0;
  min-height: 2px;
}
.i-chart__col-label {
  font-size: 11px;
  color: var(--text-2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.i-chart--donut {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.i-chart__donut-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.i-chart__donut-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
}
.i-chart__donut-label { color: var(--text-2); }
.i-chart__donut-value { color: var(--text); font-weight: 600; }

.i-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 11.5px;
  color: var(--text-2);
}
.i-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.i-chart__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 0;
}

/* What-changed-since-yesterday pills + account-wide footer. Both are
   intentionally low-key — they exist to give the digest a closing
   beat without competing with the findings for attention. Square
   corners + hard outlines keep them inside the brand language. */
.i-diffpills {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.i-diffpills__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.i-diffpills__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.i-diffpill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: transparent;
  font-size: 12.5px;
  color: var(--text-2);
}
.i-diffpill__kind {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.i-diffpill.is-new .i-diffpill__kind     { color: var(--brand); }
.i-diffpill.is-day .i-diffpill__kind     { color: var(--amber); }
.i-diffpill.is-resolved .i-diffpill__kind { color: var(--green); }

.i-acct {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.i-acct__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.i-acct__body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.i-acct__chip {
  display: inline;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.i-acct__chip:hover { color: var(--brand, #2f6fc8); }

@media (max-width: 720px) {
  .i-chart--hbar .i-chart__row {
    grid-template-columns: 110px 1fr 64px;
  }
  .i-headline__copy { font-size: 22px; }
}

/* Settings → Alerts card layout. Channels are managed here AND a global rules
   manager with full CRUD lives below; per-target chips on Tool monitors /
   Workflows rows open a scoped modal instead. The .settings-card base rule
   strips vertical padding because field-row children supply their own — this
   card uses flex sections instead, so it has to declare its own top/bottom
   breathing room. */
.settings-alerts-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px;
}
.settings-alerts-rollup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-alerts-rollup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.settings-alerts-rollup-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-alerts-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.settings-alerts-empty-actions {
  display: flex;
  gap: 8px;
}
.settings-alerts-rule-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
}
.settings-alerts-rule-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1.4fr) minmax(120px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border-soft);
}
.settings-alerts-rule-row:first-child { border-top: 0; }
.settings-alerts-rule-status { display: flex; align-items: center; }
.settings-alerts-rule-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-alerts-rule-name {
  text-align: left;
  font: inherit;
  color: var(--text);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.settings-alerts-rule-name:hover { color: var(--brand, #2f6fc8); }
.settings-alerts-rule-dest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.settings-alerts-rule-dest > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Alert-rules-for-target modal: shown when the user clicks the inline chip on
   a Tool monitor or Workflow row. Reuses the existing alert-rule-modal chrome
   so the form view looks identical to the legacy /alerts experience. */
.alert-rules-target-modal { max-width: 720px; }
.alert-rules-target-channel-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  margin-bottom: 12px;
}
.alert-rules-target-channel-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
}
.alert-rules-target-channel-link {
  background: none;
  border: 0;
  padding: 0;
  margin-left: auto;
  cursor: pointer;
  color: var(--brand, #2f6fc8);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  font: inherit;
}

/* Workflows-table Alerts column. Reuses the existing tm-row-alert chip styles
   for visual parity with the Tool monitors table. */
.workflows-table .col-alerts { width: 160px; }
.workflows-cell-alerts { white-space: nowrap; }