/* celliq mocks — light theme, brand-aligned design system v1
 *
 * Brand source of truth: CellIQ Brand Bible v1.0 (March 2026).
 * Brand bible prescribes a DARK aesthetic ("Bloomberg Terminal meets AI command centre").
 * Product UI overrides this for light theme per founder decision (2026-05-06 meeting).
 * We preserve the brand's spirit (precise, data-driven, premium, channel-coded) and
 * apply it in a light editorial register.
 *
 * Mapping of brand colours from bible:
 *   #7B6FD4  Purple           → --brand-purple   (primary action, brand identity)
 *   #9D93E8  Purple Light     → --brand-purple-light
 *   #2A2550  Purple Dim       → adapted as --brand-purple-tint (light-theme equivalent)
 *   #1D9E75  Green            → --channel-email + --success
 *   #EF9F27  Amber            → --channel-voice + --warning (THE differentiator per bible)
 *   #E05555  Red              → --error
 *   #0D0F1A  Background       → reused as --ink (deep navy text on light surface)
 *   #B0B5CC  Grey 1           → --muted-soft
 *
 * Channel colour coding (preserve consistently per bible):
 *   Email     → green (#1D9E75)  — "positive, inbox, growth"
 *   LinkedIn  → purple (#7B6FD4) — "brand colour, connection"
 *   Voice ★   → amber (#EF9F27)  — "THE differentiator, stands out"
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ===== surfaces (light editorial — warm paper feel preserved) ===== */
  --paper: #F8F6F0;            /* warm off-white; primary background */
  --paper-soft: #F1EEE5;       /* slightly darker paper for sectioning */
  --surface: #FFFFFF;          /* card faces, inputs */
  --surface-hover: #FBF9F4;    /* subtle hover */

  /* ===== ink (text + structure) — derived from brand #0D0F1A ===== */
  --ink: #0D0F1A;              /* primary text — matches brand bg, reads as deep navy ink */
  --ink-soft: #1C2038;         /* matches brand surface-2; secondary text emphasis */
  --muted: #5A6072;            /* tertiary text */
  --muted-soft: #9CA0AE;       /* placeholders, disabled */

  /* ===== hairlines + dividers ===== */
  --hairline: #E5E1D5;         /* warm divider; default */
  --hairline-strong: #CFCABB;  /* emphasised divider */
  --hairline-cool: #DEDEE8;    /* cool variant for tech/data sections */

  /* ===== brand purple (primary action + brand identity) ===== */
  --brand-purple: #7B6FD4;     /* CTAs, links, focus rings, brand mark */
  --brand-purple-deep: #5A4FB0; /* hover/pressed states in light theme */
  --brand-purple-light: #9D93E8;
  --brand-purple-tint: rgba(123, 111, 212, 0.08); /* light-tint backgrounds */
  --brand-purple-tint-strong: rgba(123, 111, 212, 0.16);

  /* ===== channel coding (semantic — preserve brand mapping) ===== */
  --channel-email:    #1D9E75;
  --channel-linkedin: var(--brand-purple);
  --channel-voice:    #EF9F27;

  /* tints for channel-coded backgrounds */
  --channel-email-tint:    rgba(29, 158, 117, 0.10);
  --channel-linkedin-tint: var(--brand-purple-tint);
  --channel-voice-tint:    rgba(239, 159, 39, 0.12);

  /* ===== functional ===== */
  --success: var(--channel-email);
  --warning: var(--channel-voice);
  --error:   #E05555;
  --info:    var(--brand-purple);

  /* legacy aliases — old token names map to brand equivalents
     so existing class rules keep working without per-file rewrites */
  --accent: var(--brand-purple);
  --accent-soft: var(--brand-purple-deep);
  --highlight: var(--brand-purple);
  --highlight-soft: var(--brand-purple-light);

  /* ===== typography (brand bible: Space Grotesk display + DM Sans body) ===== */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;
  /* legacy alias — old code expecting --font-serif gets display instead */
  --font-serif:   var(--font-display);

  /* size scale aligned to brand bible hierarchy
     (bible uses pt; these are px equivalents at 1.0 ratio for web) */
  --fs-11: 11px;   /* caption */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;   /* body default */
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;   /* H2 small */
  --fs-28: 28px;   /* H2 large */
  --fs-32: 32px;
  --fs-36: 36px;   /* H1 small */
  --fs-44: 44px;
  --fs-48: 48px;   /* H1 large */
  --fs-64: 64px;
  --fs-96: 96px;   /* hero stat */

  /* legacy alias for the old --fs-17 used in some files */
  --fs-17: 17px;

  /* ===== spacing — 8px grid (preserved) ===== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ===== radii ===== */
  --radius-sm: 3px;
  --radius:    4px;       /* cards, buttons */
  --radius-md: 6px;
  --radius-lg: 8px;       /* slide-overs, larger surfaces */
  --radius-pill: 999px;

  /* ===== elevation (subtle, light theme) ===== */
  --shadow-sm: 0 1px 2px rgba(13, 15, 26, 0.04);
  --shadow-md: 0 2px 8px rgba(13, 15, 26, 0.06), 0 1px 2px rgba(13, 15, 26, 0.04);
  --shadow-lg: 0 8px 24px rgba(13, 15, 26, 0.08), 0 2px 4px rgba(13, 15, 26, 0.04);

  /* focus ring — brand purple */
  --focus-ring: 0 0 0 3px var(--brand-purple-tint-strong);

  /* ===== layout ===== */
  --shell-w: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' on, 'cv11' on;
  /* tabular numerals everywhere by default — premium-data feel */
  font-variant-numeric: tabular-nums;
  /* prevent browsers faking italic / bold for fonts that lack those weights;
     Space Grotesk has no true italic, so we render upright cleanly */
  font-synthesis: none;
}

/* display font for headings */
h1, h2, h3, h4, h5, .page-title, .section-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

/* ===== top chrome ===== */

.topbar {
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(1.4);
}

.topbar-inner {
  max-width: var(--shell-w);
  margin: 0 auto;
  padding: 0 var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-20);
  color: var(--ink);
  letter-spacing: -0.025em;
}

.brand-mark::after {
  /* brand purple accent dot — anchors the wordmark */
  content: ".";
  color: var(--brand-purple);
}

.brand-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: var(--s-3);
  padding-left: var(--s-3);
  border-left: 1px solid var(--hairline-strong);
}

.topnav {
  display: flex;
  gap: var(--s-5);
  font-size: var(--fs-14);
}

.topnav a {
  color: var(--muted);
  padding: var(--s-1) 0;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

.topnav a:hover { color: var(--ink); }
.topnav a.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.workspace {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
}

.workspace-name {
  color: var(--ink);
  font-weight: 500;
  text-transform: none;
}

/* ===== shell ===== */

.shell {
  flex: 1;
  max-width: var(--shell-w);
  margin: 0 auto;
  padding: var(--s-7) var(--s-6) var(--s-9);
  width: 100%;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.eyebrow-num {
  color: var(--highlight);
  margin-right: var(--s-2);
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-7);
}

.page-title {
  font-size: var(--fs-44);
  letter-spacing: -0.025em;
  font-weight: 500;
  line-height: 1.05;
}

.page-title em {
  /* emphasis through brand purple, not italic — Space Grotesk has no true italic */
  font-style: normal;
  font-weight: 400;
  color: var(--brand-purple);
}

.page-sub {
  margin-top: var(--s-3);
  color: var(--muted);
  max-width: 56ch;
  font-size: var(--fs-15);
}

.page-actions {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}

/* ===== buttons & controls ===== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: var(--fs-13);
  font-weight: 500;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--ink);
  transition: background 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}

.btn:hover { background: var(--paper-soft); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #f7f4ec;
}
.btn-primary:hover { background: var(--accent-soft); }

.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--paper-soft); border-color: var(--hairline); }

.btn-sm { padding: 5px 10px; font-size: var(--fs-12); }

.kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 5px;
  background: var(--surface);
}

/* ===== status dots ===== */

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  margin-right: 7px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.dot--active   { background: var(--success); box-shadow: 0 0 0 3px rgba(44,110,63,0.12); }
.dot--draft    { background: var(--muted-soft); }
.dot--paused   { background: var(--warning); }
.dot--planned  { background: var(--hairline-strong); }
.dot--error    { background: var(--error); }

/* ===== cards / blocks ===== */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}

.card--soft {
  background: var(--paper-soft);
  border-color: var(--hairline);
}

.divider {
  height: 1px;
  background: var(--hairline);
  margin: var(--s-6) 0;
  border: 0;
}

/* ===== utility ===== */

.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.serif-it { font-family: var(--font-display); font-weight: 500; color: var(--brand-purple); }
.tnum { font-variant-numeric: tabular-nums; }

.row { display: flex; gap: var(--s-5); align-items: center; }
.col { display: flex; flex-direction: column; gap: var(--s-3); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }

/* ===== agent table (studio) ===== */

.agent-list {
  border-top: 1px solid var(--hairline);
}
.agent-row {
  display: grid;
  grid-template-columns: 56px 1.4fr 0.8fr 1fr 1fr 1fr 28px;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-2);
  border-bottom: 1px solid var(--hairline);
  transition: background 120ms ease;
}
.agent-row:hover { background: var(--paper-soft); }

.agent-row-head {
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--muted);
  background: transparent;
}
.agent-row-head:hover { background: transparent; }

.agent-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-32);
  color: var(--brand-purple);
  letter-spacing: -0.02em;
  line-height: 1;
}

.agent-name {
  font-size: var(--fs-17);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.agent-trigger {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  margin-top: 3px;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.metric-label {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
.metric-val {
  font-family: var(--font-mono);
  font-size: var(--fs-15);
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.metric-val em {
  color: var(--muted);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-13);
}

.chevron {
  color: var(--muted-soft);
  transition: color 120ms ease, transform 120ms ease;
}
.agent-row:hover .chevron {
  color: var(--ink);
  transform: translateX(2px);
}

/* ===== two-col layout (agent handbook & layer) ===== */

.split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s-7);
  align-items: start;
}

.rail {
  position: sticky;
  top: 92px;
  font-size: var(--fs-13);
}
.rail-title {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  margin-bottom: var(--s-3);
}
.rail ul { display: flex; flex-direction: column; gap: var(--s-2); }
.rail a {
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed transparent;
}
.rail a:hover { color: var(--ink); }
.rail a.is-here {
  color: var(--ink);
  border-bottom-color: var(--hairline-strong);
}
.rail-num { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--muted-soft); }

/* ===== sectioning ===== */

.section { margin-top: var(--s-8); scroll-margin-top: 80px; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-5);
}
.section-title {
  font-size: var(--fs-24);
  letter-spacing: -0.015em;
  font-weight: 500;
}
.section-title em {
  /* emphasis through brand purple instead of fake italic */
  font-style: normal;
  font-weight: 400;
  color: var(--brand-purple);
}

/* ===== state machine viz ===== */

.flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin: var(--s-5) 0;
}
.flow-step {
  position: relative;
  padding: var(--s-4) var(--s-3) var(--s-4) var(--s-4);
  border-left: 1px solid var(--hairline);
}
.flow-step:first-child { border-left: 0; }
.flow-step::after {
  content: "→";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--paper);
  padding: 2px 4px;
  color: var(--muted-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}
.flow-step:last-child::after { display: none; }
.flow-num {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--highlight);
  letter-spacing: 0.04em;
}
.flow-name {
  font-size: var(--fs-15);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: -0.005em;
}
.flow-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
}

/* ===== definition rows (tools, fields) ===== */

.def-list {
  border-top: 1px solid var(--hairline);
}
.def-row {
  display: grid;
  grid-template-columns: 1.6fr 2fr 0.7fr 0.6fr;
  gap: var(--s-5);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.def-row-head {
  padding: var(--s-2) 0;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
.def-name {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--ink);
  font-weight: 500;
}
.def-desc { color: var(--muted); font-size: var(--fs-13); }
.def-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.def-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  padding: 2px 7px;
  border: 1px solid var(--hairline-strong);
  border-radius: 3px;
  color: var(--muted);
}
.def-tag--accent { color: var(--accent); border-color: var(--accent); }

/* ===== layer stack viz ===== */

.layers {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.layer {
  display: grid;
  grid-template-columns: 36px 1fr 140px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--hairline);
  transition: background 120ms ease;
}
.layer:last-child { border-bottom: 0; }
.layer:hover { background: var(--paper-soft); }
.layer.is-here {
  background: #fbf6e9;
  border-left: 2px solid var(--highlight);
  padding-left: calc(var(--s-5) - 2px);
}

.layer-num {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted-soft);
}
.layer-name {
  font-size: var(--fs-15);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.layer-name em {
  font-style: normal;
  font-weight: 400;
  color: var(--brand-purple);
}
.layer-detail {
  font-size: var(--fs-13);
  color: var(--muted);
  margin-top: 2px;
}
.layer-owner {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--muted);
  letter-spacing: 0;
}
.layer-status {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
}

/* ===== form controls (layer authoring) ===== */

.field { margin-bottom: var(--s-5); }
.field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: 6px;
}
.field-name {
  font-size: var(--fs-13);
  font-weight: 500;
}
.field-hint {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
}
.input,
.textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  color: var(--ink);
  font-size: var(--fs-14);
}
.textarea { font-family: var(--font-mono); font-size: var(--fs-13); line-height: 1.55; min-height: 120px; resize: vertical; }
.input:focus, .textarea:focus { outline: 0; border-color: var(--accent); }

.token-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.token {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 2px 7px;
}
.token::before { content: "{{"; opacity: 0.5; }
.token::after  { content: "}}"; opacity: 0.5; }

/* ===== preview pane ===== */

.preview {
  background: var(--ink);
  color: #d8d4c8;
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: 1.6;
  overflow: hidden;
}

.preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-12);
  color: var(--muted-soft);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid #232c38;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.preview-section {
  color: var(--highlight-soft);
  margin-top: var(--s-3);
}
.preview-section:first-child { margin-top: 0; }
.preview-var {
  background: rgba(216, 160, 90, 0.14);
  color: var(--highlight-soft);
  border-radius: 2px;
  padding: 0 4px;
}
.preview-injected {
  color: var(--muted-soft);
  font-style: italic;
  border-left: 2px solid #2a3242;
  padding: 2px 0 2px 10px;
  margin: 4px 0;
}

/* ===== footer ===== */

.footer {
  border-top: 1px solid var(--hairline);
  padding: var(--s-6) 0;
  margin-top: var(--s-9);
  color: var(--muted);
  font-size: var(--fs-12);
  font-family: var(--font-mono);
}
.footer-inner {
  max-width: var(--shell-w);
  margin: 0 auto;
  padding: 0 var(--s-6);
  display: flex;
  justify-content: space-between;
}

/* ===== landing ===== */

.landing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-7);
}
.landing-tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  transition: border-color 160ms ease, transform 160ms ease;
}
.landing-tile:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.landing-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-44);
  color: var(--brand-purple);
  letter-spacing: -0.02em;
  line-height: 1;
}
.landing-title {
  font-size: var(--fs-20);
  letter-spacing: -0.01em;
  font-weight: 500;
  margin-top: var(--s-5);
}
.landing-desc {
  color: var(--muted);
  margin-top: var(--s-2);
  font-size: var(--fs-14);
}
.landing-cta {
  margin-top: var(--s-5);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--brand-purple);
  letter-spacing: 0;
}

/* ===== misc ===== */

.callout {
  border-left: 2px solid var(--highlight);
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  font-size: var(--fs-14);
  color: var(--ink-soft);
  background: linear-gradient(90deg, #fbf6e9 0%, transparent 60%);
}
.callout strong { font-weight: 600; color: var(--ink); }

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--hairline-strong);
  color: var(--muted);
}
.badge--live   { color: var(--success); border-color: rgba(44,110,63,0.4); }
.badge--draft  { color: var(--muted); }
.badge--locked { color: var(--accent); border-color: var(--accent); }

@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; }
  .rail { position: static; }
  .agent-row { grid-template-columns: 40px 1fr 1fr; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .layer { grid-template-columns: 28px 1fr 100px; }
}

/* ===== shared demo patterns (live-call, call detail, review, integrations) ===== */

/* tabs */
.tabs-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-5);
}
.tab {
  padding: 10px 18px 12px;
  font-size: var(--fs-13);
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color 120ms ease, border-color 120ms ease;
}
.tab:first-child { padding-left: 0; }
.tab:hover { color: var(--ink); }
.tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.tab-count {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted-soft);
  margin-left: 8px;
}
.tab.is-active .tab-count { color: var(--highlight); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* chips (filter pills) */
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-13);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.chip:hover { background: var(--paper-soft); }
.chip.is-active {
  background: var(--ink);
  color: #f7f4ec;
  border-color: var(--ink);
}
.chip-count {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  margin-left: 6px;
}
.chip.is-active .chip-count { color: var(--highlight-soft); }

/* scrim + slide-over */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(14, 22, 32, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 50;
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.slideover {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 560px;
  max-width: 92vw;
  background: var(--surface);
  border-left: 1px solid var(--hairline-strong);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 51;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.slideover.is-open { transform: translateX(0); }
.slideover-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.slideover-body { padding: var(--s-6); flex: 1; }
.slideover-foot {
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  background: var(--paper-soft);
}
.close-btn {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 18px;
  border: 1px solid transparent;
}
.close-btn:hover { background: var(--paper-soft); border-color: var(--hairline); color: var(--ink); }

/* modal */
.modal-wrap {
  position: fixed; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.modal-wrap.is-open { opacity: 1; pointer-events: auto; }
.modal {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  width: 640px;
  max-width: 92vw;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.96) translateY(8px);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(14, 22, 32, 0.18), 0 4px 12px rgba(14, 22, 32, 0.08);
}
.modal-wrap.is-open .modal { transform: scale(1) translateY(0); }
.modal-head {
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.modal-body {
  padding: var(--s-6);
  overflow-y: auto;
  flex: 1;
}
.modal-foot {
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--paper-soft);
}

/* step rail (modal multi-step) */
.steps {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
.step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.step-num {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.step.is-active { color: var(--ink); }
.step.is-active .step-num {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.step.is-done { color: var(--success); }
.step.is-done .step-num {
  background: var(--success);
  color: var(--paper);
  border-color: var(--success);
}
.step-sep {
  width: 24px;
  height: 1px;
  background: var(--hairline-strong);
}

/* live call patterns */
.live-grid {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 1100px) {
  .live-grid { grid-template-columns: 1fr; }
}

.phase-ribbon {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: var(--s-4);
}
.phase-cell {
  padding: var(--s-3) var(--s-3);
  border-right: 1px solid var(--hairline);
  text-align: left;
  position: relative;
  transition: background 200ms ease, color 200ms ease;
}
.phase-cell:last-child { border-right: 0; }
.phase-cell.is-done { background: #f7f3e8; }
.phase-cell.is-done .phase-step { color: var(--success); }
.phase-cell.is-active { background: var(--ink); color: #f7f4ec; }
.phase-cell.is-active .phase-step { color: var(--highlight-soft); }
.phase-cell.is-active .phase-name { color: #f7f4ec; }
.phase-step {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  letter-spacing: 0.04em;
}
.phase-name {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--ink);
  margin-top: 2px;
}

.transcript {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  min-height: 540px;
  max-height: 620px;
  overflow-y: auto;
  font-size: var(--fs-14);
  line-height: 1.55;
}
.tline {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms ease, transform 240ms ease;
}
.tline.is-shown { opacity: 1; transform: translateY(0); }
.tline-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted-soft);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.tline-text {
  color: var(--ink-soft);
}
.tline.is-agent .tline-text { color: var(--ink); }
.tline.is-prospect .tline-text {
  color: var(--ink-soft);
  font-style: italic;
}
.tline.is-system .tline-text {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tline-who {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  margin-bottom: 2px;
}
.tline.is-agent .tline-who { color: var(--accent); }
.tline.is-prospect .tline-who { color: var(--highlight); }

.live-rail {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  font-size: var(--fs-13);
}
.live-rail-title {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
  border-bottom: 1px dashed var(--hairline);
}
.live-rail + .live-rail { margin-top: var(--s-3); }

.tool-fire {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2);
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--hairline);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 240ms ease, transform 240ms ease;
}
.tool-fire.is-shown { opacity: 1; transform: translateX(0); }
.tool-fire:last-child { border-bottom: 0; }
.tool-name {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
}
.tool-fire.is-done .tool-name { color: var(--ink); }
.tool-fire.is-pending .tool-name::after {
  content: " · pending";
  color: var(--warning);
  font-style: italic;
}
.tool-fire.is-done .tool-name::after {
  content: " ✓";
  color: var(--success);
  margin-left: 4px;
}
.tool-fire.is-blocked .tool-name::after {
  content: " ⊘";
  color: var(--error);
  margin-left: 4px;
}
.tool-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted-soft);
  font-variant-numeric: tabular-nums;
}

.gate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px dashed var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
}
.gate:last-child { border-bottom: 0; }
.gate.is-passed { color: var(--ink); }
.gate.is-passed::after { content: "✓"; color: var(--success); }
.gate.is-failed { color: var(--error); }
.gate.is-failed::after { content: "blocked"; color: var(--error); font-style: italic; }
.gate.is-pending::after { content: "—"; color: var(--muted-soft); }

.priorities { font-size: var(--fs-13); }
.pri {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--hairline);
  color: var(--muted);
}
.pri:last-child { border-bottom: 0; }
.pri-mark {
  display: inline-flex;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: transparent;
  flex-shrink: 0;
}
.pri.is-done { color: var(--ink); }
.pri.is-done .pri-mark {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.pri.is-done .pri-mark::before { content: "✓"; }
.pri-text { line-height: 1.4; }
.pri-value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted-soft);
  margin-top: 2px;
}

.live-ctrls {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.live-ctrls .btn { font-family: var(--font-mono); font-size: var(--fs-12); }
.live-time {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

select.live-pick {
  font: inherit;
  font-size: var(--fs-13);
  padding: 6px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.metric-tile {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px dashed var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}
.metric-tile:last-child { border-bottom: 0; }
.metric-tile span:first-child { color: var(--muted); }

/* call detail patterns */
.scrubber {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.scrubber-play {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: #f7f4ec;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 0;
  cursor: pointer;
}
.scrubber-track {
  flex: 1;
  height: 4px;
  background: var(--hairline);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.scrubber-fill {
  position: absolute;
  inset: 0 60% 0 0;
  background: var(--accent);
}
.scrubber-time {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.transcript-static {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-6);
}
.t-phase {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--muted);
  letter-spacing: 0;
}
.t-phase:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.t-phase-tag {
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  border-radius: 99px;
  padding: 2px 10px;
}

.outcome-field {
  display: grid;
  grid-template-columns: 1.4fr 2fr 80px 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.outcome-field:last-child { border-bottom: 0; }
.outcome-name {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--ink);
  font-weight: 500;
}
.outcome-value {
  font-size: var(--fs-14);
  color: var(--ink-soft);
}
.outcome-value-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--ink-soft);
}
.outcome-conf {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
  display: flex;
  gap: 5px;
  align-items: center;
}
.conf-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
}
.conf-dot.is-med { background: var(--warning); }
.conf-dot.is-low { background: var(--error); }
.outcome-dest {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.fanout-row {
  display: grid;
  grid-template-columns: 36px 1fr 100px 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: center;
}
.fanout-row:last-child { border-bottom: 0; }
.fanout-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
}
.fanout-name { font-size: var(--fs-14); font-weight: 500; }
.fanout-detail { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--muted); margin-top: 2px; }
.fanout-status {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: 0;
}
.fanout-status.is-ok { color: var(--success); }
.fanout-status.is-retrying { color: var(--warning); }
.fanout-status.is-failed { color: var(--error); }

.payload {
  background: var(--ink);
  color: #d8d4c8;
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: 1.55;
  overflow-x: auto;
  margin-top: var(--s-2);
}
.payload .k { color: var(--highlight-soft); }
.payload .s { color: #b5d8c4; }

/* review queue patterns */
.review-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--s-4) var(--s-5);
  display: grid;
  grid-template-columns: 56px 1fr 1fr 0.8fr 0.6fr 28px;
  gap: var(--s-4);
  align-items: center;
  cursor: pointer;
  margin-bottom: var(--s-3);
  transition: border-color 120ms ease, transform 120ms ease;
}
.review-card:hover {
  border-color: var(--ink);
  transform: translateX(2px);
}
.review-flag {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--warning);
  letter-spacing: 0;
}
.review-flag.is-error { color: var(--error); }
.review-contact { font-size: var(--fs-15); font-weight: 500; }
.review-account { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--muted); margin-top: 2px; }
.review-reason { font-size: var(--fs-13); color: var(--ink-soft); }
.review-meta { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--muted); }

@media (max-width: 760px) {
  .review-card { grid-template-columns: 1fr 1fr; }
  .review-card > :nth-child(n+5) { display: none; }
}

/* integrations patterns */
.int-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 900px) { .int-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .int-grid { grid-template-columns: 1fr; } }

.int-tile {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
  transition: border-color 120ms ease, transform 120ms ease;
}
.int-tile.is-connected { border-color: rgba(44,110,63,0.4); }
.int-tile.is-error { border-color: rgba(154,51,36,0.4); }
.int-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.int-logo {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--brand-purple);
  letter-spacing: -0.02em;
}
.int-name { font-size: var(--fs-17); font-weight: 500; letter-spacing: -0.005em; }
.int-tag {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--muted);
  letter-spacing: 0;
}
.int-stats {
  border-top: 1px dashed var(--hairline);
  padding-top: var(--s-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}
.int-stat-label { color: var(--muted); }
.int-stat-val { color: var(--ink); font-variant-numeric: tabular-nums; }
.int-status {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-13);
}
.int-status.is-connected { color: var(--success); }
.int-status.is-error { color: var(--error); }
.int-status.is-needs-auth { color: var(--warning); }

.scope-list {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper-soft);
  padding: var(--s-3) var(--s-4);
}
.scope-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--s-3);
  padding: 6px 0;
  border-bottom: 1px dashed var(--hairline);
  font-size: var(--fs-13);
}
.scope-row:last-child { border-bottom: 0; }
.scope-mark {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.scope-mark::before { content: "✓"; }
.scope-mark.is-write { background: var(--accent); }
.scope-name { color: var(--ink); }
.scope-detail { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--muted); }

.field-map {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.field-map-row {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-13);
}
.field-map-row:last-child { border-bottom: 0; }
.field-map-row:nth-child(odd) { background: var(--paper-soft); }
.field-map-arrow { color: var(--muted-soft); font-family: var(--font-mono); }
.field-celliq { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink); }
.field-target { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--muted); }

.spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--hairline);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
  vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* utility for hidden state */
.hidden { display: none !important; }

/* ===========================================================================
 * BRAND v1 — additions to support the brand-aligned design system
 * ===========================================================================
 *
 * Naming: components new to v1 use a flat BEM-ish convention:
 *   .pill, .pill--email, .pill--linkedin, .pill--voice
 *   .stat-hero, .stat-tile
 *   .has-corners (decorator)
 *   .focus-purple (utility)
 */

/* ----- channel pills (use everywhere a channel is referenced) ----- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill::before {
  /* small dot prefix; channel-coloured via --pill-color */
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pill-color, var(--muted));
}
.pill--email    { --pill-color: var(--channel-email);    background: var(--channel-email-tint);    color: #0f5d44; border-color: rgba(29, 158, 117, 0.25); }
.pill--linkedin { --pill-color: var(--channel-linkedin); background: var(--channel-linkedin-tint); color: var(--brand-purple-deep); border-color: rgba(123, 111, 212, 0.25); }
.pill--voice    { --pill-color: var(--channel-voice);    background: var(--channel-voice-tint);    color: #8a5a17; border-color: rgba(239, 159, 39, 0.30); }

.pill--star::after {
  /* Voice ★ — the brand bible's amber differentiator */
  content: '★';
  color: var(--channel-voice);
  margin-left: 1px;
}

/* status pills — neutral semantic */
.pill--success { --pill-color: var(--success); background: var(--channel-email-tint); color: #0f5d44; border-color: rgba(29, 158, 117, 0.25); }
.pill--warning { --pill-color: var(--warning); background: var(--channel-voice-tint); color: #8a5a17; border-color: rgba(239, 159, 39, 0.30); }
.pill--error   { --pill-color: var(--error);   background: rgba(224, 85, 85, 0.10);   color: #8a2727; border-color: rgba(224, 85, 85, 0.25); }
.pill--neutral { --pill-color: var(--muted-soft); background: var(--paper-soft); color: var(--muted); border-color: var(--hairline); }

/* ----- stat hero (large data-display number) ----- */
/* matches brand bible 'Hero stat 72-120pt' tier */
.stat-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-96);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-hero--accent { color: var(--brand-purple); }
.stat-hero-unit {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-32);
  color: var(--muted);
  margin-left: var(--s-2);
  letter-spacing: -0.02em;
}
.stat-hero-label {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}

/* ----- stat tile (KPI card; smaller than hero) ----- */
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  position: relative;
}
.stat-tile-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-36);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-tile-value-suffix {
  font-size: var(--fs-20);
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}
.stat-tile-label {
  /* readability pass — DM Sans sentence-case, not mono uppercase */
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
.stat-tile-meta {
  font-size: var(--fs-13);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px dashed var(--hairline);
}
.stat-tile-trend--up   { color: var(--success); }
.stat-tile-trend--down { color: var(--error); }
.stat-tile-trend--flat { color: var(--muted-soft); }

/* status dot variants for stat tiles (target tracking) */
.stat-tile[data-state="ok"]    { box-shadow: inset 3px 0 0 var(--success); }
.stat-tile[data-state="warn"]  { box-shadow: inset 3px 0 0 var(--warning); }
.stat-tile[data-state="alert"] { box-shadow: inset 3px 0 0 var(--error); }

/* ----- corner brackets (brand bible: 'thin lines, corner brackets') ----- */
/* decorator class applied to a positioned parent */
.has-corners {
  position: relative;
}
.has-corners::before,
.has-corners::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid var(--brand-purple);
  pointer-events: none;
}
.has-corners::before {
  top: -1px; left: -1px;
  border-right: 0; border-bottom: 0;
}
.has-corners::after {
  bottom: -1px; right: -1px;
  border-left: 0; border-top: 0;
}
/* full four-corner variant */
.has-corners--full > .corner-tl,
.has-corners--full > .corner-tr,
.has-corners--full > .corner-bl,
.has-corners--full > .corner-br {
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid var(--brand-purple);
  pointer-events: none;
}
.has-corners--full > .corner-tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.has-corners--full > .corner-tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.has-corners--full > .corner-bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.has-corners--full > .corner-br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* a thin variant for less prominent surfaces */
.has-corners--soft::before,
.has-corners--soft::after {
  border-color: var(--hairline-strong);
  border-width: 1px;
}

/* ----- focus ring utility (use brand purple) ----- */
.focus-purple:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
  border-color: var(--brand-purple);
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ----- callout variants — promote the brand-purple variant ----- */
.callout--brand {
  background: var(--brand-purple-tint);
  border: 1px solid rgba(123, 111, 212, 0.25);
  border-left: 3px solid var(--brand-purple);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--fs-15);
}

/* ----- section title (brand H2 28px, display font) ----- */
.section-title-brand {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ----- token preview (used on the design-system page) ----- */
.swatch {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.swatch-color {
  height: 96px;
}
.swatch-meta {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  font-size: var(--fs-13);
}
.swatch-meta-label {
  font-weight: 500;
  color: var(--ink);
}
.swatch-meta-token {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  margin-top: 2px;
}
.swatch-meta-hex {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted-soft);
  margin-top: 1px;
}

/* responsive grid for tiles + swatches */
.tile-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.tile-grid--lg {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* tabular-nums utility (already global default; keep for explicit override) */
.tnum-strong { font-variant-numeric: tabular-nums; }

/* ----- channel-coded text-only inline tag (lighter than .pill) ----- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  font-family: var(--font-mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tag::before {
  content: '';
  width: 8px; height: 1px;
  background: var(--muted-soft);
  display: inline-block;
}
.tag--email::before    { background: var(--channel-email);    height: 2px; width: 12px; }
.tag--linkedin::before { background: var(--channel-linkedin); height: 2px; width: 12px; }
.tag--voice::before    { background: var(--channel-voice);    height: 2px; width: 12px; }

/* =================================================================
 * APP SHELL — sidebar + content layout
 * Replaces the topnav for the production product surface.
 * ================================================================= */

.app-layout {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
  align-items: stretch;
}

.sidebar {
  border-right: 1px solid var(--hairline);
  background: var(--paper-soft);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: var(--s-5) var(--s-4) var(--s-4);
}

.sidebar-brand {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: 0 var(--s-2) var(--s-5);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  font-size: var(--fs-14);
  display: flex;
  flex-direction: column;
}

.sidebar-zone {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar-zone-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--s-3) var(--s-2) var(--s-2);
  margin-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}

.sidebar-zone a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 7px var(--s-2);
  color: var(--muted);
  border-radius: var(--radius-sm);
  transition: color 120ms ease, background 120ms ease;
  position: relative;
}

.sidebar-zone a:hover {
  color: var(--ink);
  background: var(--surface-hover);
}

.sidebar-zone a.is-active {
  color: var(--ink);
  background: var(--surface);
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--brand-purple);
}

.sidebar-zone a .kbd {
  background: transparent;
  border: 0;
  border-bottom: 0;
  padding: 0;
  color: var(--muted-soft);
  font-size: var(--fs-11);
}

.sidebar-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.sidebar-zone a.is-active .sidebar-badge {
  color: var(--brand-purple);
  border-color: var(--brand-purple-tint-strong);
  background: var(--brand-purple-tint);
}

.sidebar-zone .sidebar-dot {
  margin-right: 0;
  margin-left: var(--s-1);
}

.sidebar-foot {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-3);
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-foot-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 6px var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--ink);
  border-radius: var(--radius-sm);
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.sidebar-foot-btn:hover {
  background: var(--surface-hover);
}

.sidebar-foot-btn .muted {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: var(--s-2);
}

.sidebar-foot-btn .chevron-down {
  color: var(--muted-soft);
  font-size: var(--fs-11);
}

/* content area — full-width inside the layout */
.app-content {
  min-width: 0; /* allows children to shrink */
  display: flex;
  flex-direction: column;
}

/* override the centred shell when nested in app-layout — sidebar handles framing */
.app-layout .shell {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: var(--s-7) var(--s-7) var(--s-9);
}

.app-layout .footer {
  max-width: none;
}

/* =================================================================
 * TODAY PAGE — three-section worklist + glance rail
 * ================================================================= */

.today-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--s-7);
  align-items: start;
}

.today-section {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-5);
  margin-top: var(--s-7);
}

.today-section:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.today-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}

.today-section-title {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.today-section-count {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.today-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--hairline);
  transition: background 120ms ease;
}

.today-row:hover {
  background: var(--surface-hover);
}

.today-row-marker {
  color: var(--muted-soft);
  font-size: var(--fs-13);
  margin-top: 2px;
  font-family: var(--font-mono);
}

.today-row-marker--escalate { color: var(--warning); }
.today-row-marker--error { color: var(--error); }
.today-row-marker--info { color: var(--brand-purple); }

.today-row-body {
  min-width: 0;
}

.today-row-title {
  font-size: var(--fs-15);
  color: var(--ink);
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  flex-wrap: wrap;
}

.today-row-kind {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.today-row-meta {
  display: block;
  font-size: var(--fs-13);
  color: var(--muted);
  margin-top: 3px;
}

.today-row-time {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  white-space: nowrap;
  margin-left: var(--s-3);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.today-row-action {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  justify-content: flex-end;
  font-size: var(--fs-13);
  margin-top: 1px;
}

.today-row-empty {
  padding: var(--s-5) var(--s-2);
  color: var(--muted);
  font-size: var(--fs-14);
  font-style: normal;
}

/* glance rail — small awareness panels */

.glance-rail {
  position: sticky;
  top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.glance-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-4);
  background: var(--surface);
}

.glance-card-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-2);
}

.glance-num {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.glance-num-suffix {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--muted);
  margin-left: var(--s-2);
  letter-spacing: 0;
}

.glance-delta {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  margin-top: var(--s-2);
  font-variant-numeric: tabular-nums;
}

.glance-delta--up { color: var(--success); }
.glance-delta--down { color: var(--error); }
.glance-delta--neutral { color: var(--muted); }

.glance-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--s-3);
}

.glance-bar {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: var(--s-3);
}

.glance-bar-label {
  font-size: var(--fs-12);
  color: var(--muted);
}

.glance-bar-track {
  height: 4px;
  background: var(--hairline);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}

.glance-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--success);
  border-radius: var(--radius-pill);
}

.glance-bar-fill--escalate { background: var(--brand-purple); }
.glance-bar-fill--missed { background: var(--muted-soft); }
.glance-bar-fill--warning { background: var(--warning); }

.glance-bar-num {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.glance-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 3px 0;
  font-size: var(--fs-13);
  color: var(--ink);
}

.glance-row .dot { margin-right: 0; }
.glance-row-meta { color: var(--muted); margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-12); }

/* page-head variant when sidebar layout — slimmer hero, no big block */
.page-head--app {
  align-items: baseline;
  border-bottom: 0;
  margin-bottom: var(--s-5);
  padding-bottom: 0;
}

.page-head--app .page-title {
  font-size: var(--fs-32);
  font-weight: 500;
}

.page-head--app .page-sub {
  margin-top: var(--s-1);
  font-size: var(--fs-14);
}

/* small inline action button used in today rows */
.btn-inline {
  font-size: var(--fs-13);
  color: var(--brand-purple);
  font-weight: 500;
  padding: 2px 0;
  border: 0;
  background: transparent;
}
.btn-inline:hover { color: var(--brand-purple-deep); }
.btn-inline + .btn-inline { margin-left: var(--s-3); }

/* recent activity timeline rows — lighter than the action rows above */
.activity-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: baseline;
  gap: var(--s-4);
  padding: 6px var(--s-2);
  font-size: var(--fs-14);
  border-bottom: 1px solid transparent;
}
.activity-row:hover { background: var(--surface-hover); }
.activity-time {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.activity-text { color: var(--ink); }
.activity-text .muted { color: var(--muted); }
.activity-ago {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted-soft);
  font-variant-numeric: tabular-nums;
}


/* =================================================================
 * AGENT WIZARD — modal-over-studio, 8-step activation flow
 * Extends .modal / .steps with wizard-specific shapes.
 * ================================================================= */

.modal--wizard {
  width: 1080px;
  max-width: 95vw;
  max-height: 92vh;
}

.wizard-stepper {
  padding: var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-soft);
  overflow-x: auto;
}

.wizard-stepper .steps {
  flex-wrap: wrap;
  gap: var(--s-1);
  font-size: var(--fs-12);
}

.wizard-stepper .step {
  cursor: pointer;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--radius-sm);
  transition: background 120ms;
}

.wizard-stepper .step:hover { background: var(--surface-hover); }

.wizard-stepper .step-sep {
  width: 18px;
}

.wizard-step {
  display: none;
}

.wizard-step.is-visible {
  display: block;
}

.wizard-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-2);
}

.wizard-section-title em {
  font-style: normal;
  font-weight: 400;
  color: var(--brand-purple);
}

.wizard-section-sub {
  color: var(--muted);
  font-size: var(--fs-14);
  margin-bottom: var(--s-5);
  max-width: 64ch;
}

/* path indicator */
.path-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  background: var(--brand-purple-tint);
  border: 1px solid var(--brand-purple-tint-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--brand-purple);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--s-3);
}

.path-indicator--medium {
  background: var(--channel-voice-tint);
  border-color: rgba(239, 159, 39, 0.4);
  color: #b06f10;
}

/* template picker */
.template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-3);
}

.template-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  cursor: pointer;
  transition: all 120ms;
  background: var(--surface);
}

.template-card:hover {
  border-color: var(--brand-purple-tint-strong);
  background: var(--surface-hover);
}

.template-card.is-selected {
  border-color: var(--brand-purple);
  background: var(--brand-purple-tint);
  box-shadow: 0 0 0 3px var(--brand-purple-tint);
}

.template-card-num {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-2);
}

.template-card-name {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-2);
}

.template-card-desc {
  font-size: var(--fs-13);
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: var(--s-3);
}

.template-card-meta {
  display: flex;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.template-card-meta a { color: var(--brand-purple); }

/* health check */
.health-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: var(--s-2);
}

.health-row--ok { border-color: rgba(29, 158, 117, 0.2); background: rgba(29, 158, 117, 0.04); }
.health-row--warn { border-color: rgba(239, 159, 39, 0.3); background: rgba(239, 159, 39, 0.05); }
.health-row--err { border-color: rgba(224, 85, 85, 0.3); background: rgba(224, 85, 85, 0.04); }

.health-icon {
  font-size: var(--fs-15);
  font-family: var(--font-mono);
  text-align: center;
}

.health-row--ok .health-icon { color: var(--success); }
.health-row--warn .health-icon { color: var(--warning); }
.health-row--err .health-icon { color: var(--error); }

.health-name {
  font-size: var(--fs-15);
  font-weight: 500;
}

.health-detail {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
}

.health-cta {
  font-size: var(--fs-12);
  color: var(--brand-purple);
}

.health-verdict {
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--brand-purple-tint);
  border: 1px solid var(--brand-purple-tint-strong);
  border-radius: var(--radius);
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.health-verdict--medium {
  background: var(--channel-voice-tint);
  border-color: rgba(239, 159, 39, 0.4);
}

/* trigger + field-map editor */
.trigger-summary {
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  margin-bottom: var(--s-4);
  line-height: 1.7;
}

.trigger-summary code {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-family: var(--font-mono);
  color: var(--brand-purple);
}

.field-map {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}

.field-map-row {
  display: grid;
  grid-template-columns: 1fr 24px 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-13);
  background: var(--surface);
}

.field-map-row:last-child { border-bottom: 0; }

.field-map-row--head {
  background: var(--paper-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.field-map-arrow {
  text-align: center;
  color: var(--muted-soft);
  font-family: var(--font-mono);
}

.field-map-cell {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}

.field-map-cell-label {
  display: block;
  color: var(--muted);
  font-size: var(--fs-11);
  margin-bottom: 2px;
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
}

.field-map-source {
  display: inline-block;
  background: var(--channel-email-tint);
  color: var(--channel-email);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
}

.field-map-target {
  display: inline-block;
  background: var(--brand-purple-tint);
  color: var(--brand-purple);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
}

.field-map-status {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--success);
}

.field-map-status--needs { color: var(--warning); }

/* voice gallery */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin: var(--s-3) 0 var(--s-5);
}

.voice-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-4);
  background: var(--surface);
  cursor: pointer;
  transition: all 120ms;
}

.voice-card:hover { border-color: var(--brand-purple-tint-strong); }

.voice-card.is-selected {
  border-color: var(--brand-purple);
  background: var(--brand-purple-tint);
}

.voice-card-name {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: 500;
}

.voice-card-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.voice-card-play {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--brand-purple);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* tone sliders */
.tone-slider-row {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  font-size: var(--fs-13);
}

.tone-slider-label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tone-slider-label--right { text-align: right; }

.tone-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--hairline-strong);
  border-radius: var(--radius-pill);
  outline: none;
}

.tone-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--brand-purple);
  cursor: pointer;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(13, 15, 26, 0.2);
}

/* compliance gates list */
.gate-row {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-4);
  margin-bottom: var(--s-2);
  background: var(--surface);
}

.gate-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}

.gate-row-name {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: 500;
}

.gate-row-script {
  margin-top: var(--s-2);
  padding: var(--s-3);
  background: var(--paper-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-soft);
  line-height: 1.6;
}

.gate-row-script .var {
  color: var(--brand-purple);
}

/* test call surface */
.test-call-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  background: var(--surface);
  text-align: center;
}

.test-call-status {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-3);
}

.test-call-num {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* activate summary */
.summary-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}

.summary-row:last-child { border-bottom: 0; }

.summary-key {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.summary-val {
  font-size: var(--fs-14);
  color: var(--ink);
}

.summary-val .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-soft);
}


/* =================================================================
 * AGENT WORKBENCH — three-zone editor for live agents
 * ================================================================= */

.workbench-status {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: var(--s-7);
}

.workbench-status-name {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.workbench-status-state {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 3px var(--s-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.workbench-status-state--active {
  background: rgba(29, 158, 117, 0.12);
  color: var(--success);
}

.workbench-status-state--paused {
  background: rgba(239, 159, 39, 0.12);
  color: var(--warning);
}

.workbench-status-state--draft {
  background: var(--paper-soft);
  color: var(--muted);
}

.workbench-status-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  margin-top: 4px;
}

.workbench-kpis {
  display: flex;
  gap: var(--s-6);
  align-items: center;
}

.workbench-kpi {
  text-align: right;
}

.workbench-kpi-num {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.workbench-kpi-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.workbench-actions {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

/* three-zone grid */

.workbench-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-bottom: var(--s-8);
}

.workbench-zone {
  display: flex;
  flex-direction: column;
}

.workbench-zone-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
}

.workbench-zone-name {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.workbench-zone-status {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--success);
}

.workbench-zone-status--warn { color: var(--warning); }

.workbench-cell {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-bottom: var(--s-2);
  cursor: pointer;
  background: var(--surface);
  transition: all 120ms ease;
}

.workbench-cell:hover {
  border-color: var(--brand-purple-tint-strong);
  background: var(--surface-hover);
  transform: translateX(2px);
}

.workbench-cell-status {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  text-align: center;
  margin-top: 2px;
  color: var(--success);
}

.workbench-cell-status--warn { color: var(--warning); }
.workbench-cell-status--err { color: var(--error); }
.workbench-cell-status--empty { color: var(--muted-soft); }

.workbench-cell-body {
  min-width: 0;
}

.workbench-cell-name {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink);
}

.workbench-cell-value {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workbench-cell-empty {
  color: var(--muted-soft);
  font-style: normal;
}

/* slide-over — when editing a cell */

.so-edit-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
}

.so-edit-row:last-child { border-bottom: 0; }

.so-edit-key {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.so-edit-input {
  width: 100%;
  padding: 8px var(--s-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  background: var(--surface);
}


/* =================================================================
 * STATE MACHINE EDITOR — slide-over editor for through-call branching
 * ================================================================= */

.sm-summary {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: var(--fs-13);
}

.sm-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sm-summary-stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sm-summary-stat-val {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-weight: 500;
}

.sm-divider {
  width: 1px;
  background: var(--hairline);
}

.sm-state-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-bottom: var(--s-2);
  background: var(--surface);
  align-items: start;
  cursor: pointer;
  transition: border-color 120ms;
}

.sm-state-row:hover {
  border-color: var(--brand-purple-tint-strong);
}

.sm-state-row.is-expanded {
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px var(--brand-purple-tint);
}

.sm-state-row--branching { border-left: 3px solid var(--brand-purple); }
.sm-state-row--terminal { border-left: 3px solid var(--success); }

.sm-state-id {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--brand-purple);
  text-align: center;
  padding-top: 2px;
  letter-spacing: -0.02em;
}

.sm-state-body {
  min-width: 0;
}

.sm-state-name {
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.sm-state-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sm-state-tools {
  display: flex;
  gap: 4px;
  margin-top: var(--s-2);
  flex-wrap: wrap;
}

.sm-tool-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--brand-purple);
  background: var(--brand-purple-tint);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand-purple-tint-strong);
}

.sm-state-action {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted-soft);
  letter-spacing: 0.06em;
}

.sm-branches {
  margin-top: var(--s-3);
  padding: var(--s-3);
  background: var(--paper-soft);
  border-radius: var(--radius-sm);
}

.sm-branches-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.sm-branch {
  display: grid;
  grid-template-columns: auto auto auto auto;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}

.sm-branch-cond {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.sm-branch-arrow {
  color: var(--muted-soft);
}

.sm-branch-target {
  color: var(--brand-purple);
  font-weight: 500;
}

.sm-branch-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  background: rgba(239, 159, 39, 0.15);
  color: #b06f10;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sm-state-detail {
  margin-top: var(--s-3);
  padding: var(--s-3);
  background: var(--paper);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--hairline-strong);
  font-size: var(--fs-12);
  color: var(--muted);
}

.sm-state-detail-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--s-3);
  padding: 4px 0;
}

.sm-state-detail-row .key {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-11);
}

.sm-state-detail-row .val {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink);
}

.sm-prompt-block {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--s-2) var(--s-3);
  margin-top: var(--s-2);
  line-height: 1.5;
}

.sm-prompt-block .var {
  color: var(--brand-purple);
}

.sm-bar {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}

/* =================================================================
 * OBJECTIVES EDITOR — slide-over editor for what the agent extracts
 * ================================================================= */

.obj-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: var(--fs-13);
}

.obj-summary-stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.obj-summary-stat-val {
  font-family: var(--font-mono);
  font-size: var(--fs-15);
  font-weight: 500;
}

.obj-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-bottom: var(--s-2);
  background: var(--surface);
  align-items: start;
  cursor: pointer;
  transition: border-color 120ms;
}

.obj-row:hover { border-color: var(--brand-purple-tint-strong); }

.obj-row.is-expanded {
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px var(--brand-purple-tint);
}

.obj-row--required { border-left: 3px solid var(--brand-purple); }
.obj-row--optional { border-left: 3px solid var(--hairline-strong); }

.obj-num {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted-soft);
  text-align: center;
  padding-top: 2px;
}

.obj-name {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.obj-name-suffix {
  color: var(--muted);
  font-weight: 400;
  font-size: var(--fs-12);
  margin-left: var(--s-2);
}

.obj-type-row {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.obj-type-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--muted);
  letter-spacing: 0;
}

.obj-type-badge--type {
  background: var(--paper-soft);
  color: var(--ink-soft);
}

.obj-type-badge--required {
  border-color: var(--brand-purple);
  background: var(--brand-purple-tint);
  color: var(--brand-purple);
}

.obj-type-badge--optional {
  background: var(--paper-soft);
  color: var(--muted);
}

.obj-type-badge--conf {
  font-family: var(--font-mono);
}

.obj-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  flex-wrap: wrap;
}

.obj-flow-step {
  padding: 1px 7px;
  background: var(--paper-soft);
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  color: var(--muted);
}

.obj-flow-step--source {
  background: var(--brand-purple-tint);
  border-color: var(--brand-purple-tint-strong);
  color: var(--brand-purple);
}

.obj-flow-step--dest {
  background: var(--channel-email-tint);
  border-color: rgba(29, 158, 117, 0.3);
  color: var(--channel-email);
}

.obj-flow-arrow {
  color: var(--muted-soft);
}

.obj-action {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted-soft);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.obj-detail {
  margin-top: var(--s-3);
  padding: var(--s-3);
  background: var(--paper);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--hairline-strong);
}

.obj-detail-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--s-3);
  padding: 4px 0;
  font-size: var(--fs-12);
}

.obj-detail-row .key {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-11);
  color: var(--muted);
}

.obj-detail-row .val {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink);
}

.obj-detail-row .val .var { color: var(--brand-purple); }

.obj-validation {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 6px var(--s-2);
  margin-top: 4px;
  display: inline-block;
}


/* =================================================================
 * HUBSPOT WRITE-BACK EDITOR
 * ================================================================= */

.hs-connection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: rgba(29, 158, 117, 0.04);
  border: 1px solid rgba(29, 158, 117, 0.2);
  border-radius: var(--radius);
  margin-bottom: var(--s-4);
  gap: var(--s-4);
  flex-wrap: wrap;
}

.hs-connection-name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-14);
  font-weight: 500;
}

.hs-connection-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  margin-top: 2px;
}

.hs-connection-stats {
  display: flex;
  gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}

.hs-stat-num {
  font-size: var(--fs-15);
  color: var(--ink);
  font-weight: 500;
}

.hs-stat-label {
  color: var(--muted);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hs-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: 500;
  margin: var(--s-5) 0 var(--s-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.hs-section-title-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 400;
}

.hs-toggle-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: var(--s-2);
  align-items: start;
}

.hs-toggle-check {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--brand-purple);
  background: var(--brand-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
  margin-top: 2px;
}

.hs-toggle-name {
  font-size: var(--fs-14);
  font-weight: 500;
}

.hs-toggle-desc {
  font-size: var(--fs-13);
  color: var(--muted);
  margin-top: 2px;
}

.hs-toggle-detail {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--paper-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-soft);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 4px var(--s-3);
}

.hs-toggle-detail .key { color: var(--muted); }

.hs-write-log {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}

.hs-write-log-row {
  display: grid;
  grid-template-columns: 80px 100px 1fr auto auto;
  gap: var(--s-3);
  padding: 7px var(--s-3);
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}

.hs-write-log-row:last-child { border-bottom: 0; }
.hs-write-log-row:hover { background: var(--surface-hover); }

.hs-write-log-time { color: var(--muted-soft); }
.hs-write-log-target { color: var(--brand-purple); }
.hs-write-log-prop { color: var(--ink); }
.hs-write-log-status { color: var(--success); }
.hs-write-log-status--err { color: var(--error); }
.hs-write-log-latency { color: var(--muted); }

/* =================================================================
 * SIMPLE FORM EDITORS — shared patterns for the lighter slide-overs
 * (audience, window, dnc, voice, personality, disclosures, email, retry)
 * ================================================================= */

.pill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  padding: 4px 10px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  letter-spacing: 0;
}

.pill-toggle:hover { color: var(--ink); }

.pill-toggle.is-active {
  border-color: var(--brand-purple);
  background: var(--brand-purple-tint);
  color: var(--brand-purple);
}

.pill-toggle input { margin: 0; accent-color: var(--brand-purple); }

.source-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: var(--s-2);
  align-items: center;
}

.source-row--active {
  background: rgba(29, 158, 117, 0.04);
  border-color: rgba(29, 158, 117, 0.2);
}

.source-row--inactive { opacity: 0.55; }

.source-icon {
  font-family: var(--font-mono);
  text-align: center;
  font-size: var(--fs-13);
}

.source-icon--ok { color: var(--success); }
.source-icon--off { color: var(--muted-soft); }

.source-name {
  font-size: var(--fs-14);
  font-weight: 500;
}

.source-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.source-action {
  font-size: var(--fs-12);
  color: var(--brand-purple);
  white-space: nowrap;
}


/* =================================================================
 * WORKBENCH SHELL — pause state, edit recency, audit history,
 * integration health indicators in the status bar
 * ================================================================= */

.workbench-paused-banner {
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: rgba(239, 159, 39, 0.08);
  border: 1px solid rgba(239, 159, 39, 0.3);
  border-radius: var(--radius);
  margin-bottom: var(--s-5);
  font-size: var(--fs-13);
}

.workbench-paused-banner.is-visible { display: flex; }

.workbench-paused-banner-icon {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--warning);
}

.workbench-paused-banner-text strong {
  font-weight: 500;
}

.workbench-grid.is-paused {
  opacity: 0.55;
}

.workbench-cell-edit-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brand-purple);
  background: var(--brand-purple-tint);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  margin-top: 6px;
  letter-spacing: 0.04em;
  border: 1px solid var(--brand-purple-tint-strong);
}

.workbench-status-health {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  flex-wrap: wrap;
}

.workbench-status-health-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.workbench-status-health-item .dot { margin-right: 0; }

/* audit history slide-over content */

.audit-version {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}

.audit-version:last-child { border-bottom: 0; }

.audit-version-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.audit-version-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--brand-purple);
  background: var(--brand-purple-tint);
  border: 1px solid var(--brand-purple-tint-strong);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
  letter-spacing: 0.04em;
}

.audit-version-tag--current {
  background: var(--success);
  color: white;
  border-color: var(--success);
}

.audit-version-time {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
}

.audit-version-author {
  font-size: var(--fs-13);
  color: var(--ink);
}

.audit-change {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-top: 6px;
  background: var(--surface);
  align-items: baseline;
}

.audit-change-cell {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.audit-change-detail {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink);
  line-height: 1.55;
}

.audit-diff-old {
  color: var(--error);
  text-decoration: line-through;
  text-decoration-color: rgba(224, 85, 85, 0.5);
}

.audit-diff-new {
  color: var(--success);
}

.audit-restore {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--brand-purple);
  margin-top: var(--s-2);
  display: inline-block;
}


/* =================================================================
 * CALLS LIST — filterable table view of all calls
 * ================================================================= */

.calls-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}

.calls-search {
  flex: 1;
  min-width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
}

.calls-summary {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}

.calls-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calls-summary-num {
  font-size: var(--fs-15);
  color: var(--ink);
  font-weight: 500;
}

.calls-summary-label {
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.calls-list {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.calls-row {
  display: grid;
  grid-template-columns: 70px 100px 1fr 1.4fr 80px 28px;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-13);
  cursor: pointer;
  transition: background 120ms;
}

.calls-row:last-child { border-bottom: 0; }
.calls-row:hover { background: var(--surface-hover); }

.calls-row--head {
  background: var(--paper-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: default;
}

.calls-row--head:hover { background: var(--paper-soft); }

.calls-time {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.calls-agent {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  display: inline-block;
  width: fit-content;
}

.calls-agent--csat   { background: var(--brand-purple-tint); color: var(--brand-purple); }
.calls-agent--speed  { background: var(--channel-email-tint); color: var(--channel-email); }
.calls-agent--precall{ background: var(--channel-voice-tint); color: #b06f10; }

.calls-contact {
  font-weight: 500;
  color: var(--ink);
}

.calls-account {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  margin-left: 6px;
}

.calls-outcome {
  font-size: var(--fs-13);
  color: var(--ink-soft);
}

.calls-outcome-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.calls-outcome-tag--escalate { background: var(--channel-voice-tint); color: #b06f10; }
.calls-outcome-tag--ok       { background: var(--channel-email-tint); color: var(--channel-email); }
.calls-outcome-tag--booked   { background: var(--brand-purple-tint); color: var(--brand-purple); }
.calls-outcome-tag--dnc      { background: var(--paper-soft); color: var(--muted); }
.calls-outcome-tag--err      { background: rgba(224, 85, 85, 0.1); color: var(--error); }

.calls-duration {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.calls-cost {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.calls-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
}

.calls-pagination-controls {
  display: flex;
  gap: var(--s-2);
}


/* =================================================================
 * SUB-PROCESSORS PAGE — customer-admin-facing register (PP-009)
 * Renders data/sub-processors.yaml in a DPA-review-friendly format.
 * ================================================================= */

.sp-pending {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: rgba(239, 159, 39, 0.08);
  border: 1px solid rgba(239, 159, 39, 0.3);
  border-radius: var(--radius);
  margin-bottom: var(--s-6);
}

.sp-pending-icon {
  font-family: var(--font-mono);
  font-size: var(--fs-15);
  color: var(--warning);
}

.sp-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--s-3);
  margin: var(--s-7) 0 var(--s-4);
}

.sp-category-name {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.sp-category-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sp-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 220px;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}

.sp-row:last-child { border-bottom: 0; }

.sp-name-line {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.sp-name {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.sp-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(29, 158, 117, 0.1);
  color: var(--success);
  border: 1px solid rgba(29, 158, 117, 0.2);
}

.sp-status-tag--changing {
  background: rgba(239, 159, 39, 0.1);
  color: #b06f10;
  border-color: rgba(239, 159, 39, 0.3);
}

.sp-status-tag--conditional {
  background: var(--paper-soft);
  color: var(--muted);
  border-color: var(--hairline-strong);
}

.sp-role {
  color: var(--ink-soft);
  font-size: var(--fs-14);
  margin-top: 4px;
}

.sp-data-list {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-soft);
  margin-top: var(--s-3);
  padding-left: var(--s-4);
  list-style: disc;
}

.sp-data-list li {
  padding: 2px 0;
}

.sp-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-soft);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px var(--s-3);
  align-content: start;
}

.sp-meta-key {
  color: var(--muted);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  align-self: baseline;
}

.sp-meta-val {
  color: var(--ink);
}

.sp-meta-val a {
  color: var(--brand-purple);
}

.sp-conditional-note {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--brand-purple);
  background: var(--brand-purple-tint);
  font-size: var(--fs-12);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.sp-changelog {
  margin-top: var(--s-7);
  padding: var(--s-5);
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.sp-changelog-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-13);
  align-items: baseline;
}

.sp-changelog-row:last-child { border-bottom: 0; }

.sp-changelog-date {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
}

.sp-changelog-text strong { font-weight: 500; }

.sp-changelog-text--add {
  color: var(--success);
}

.sp-changelog-text--remove {
  color: var(--error);
}

.sp-changelog-text--change {
  color: var(--warning);
}


/* =================================================================
 * RESEARCH FULL-PAGE EDITOR — dedicated canvas for the Research cell
 * Three columns: source library / pipeline canvas / detail panel
 * ================================================================= */

.re-status {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: var(--s-5);
}

.re-status-name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.re-status-stats {
  display: flex;
  gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}

.re-status-stat-num {
  font-size: var(--fs-15);
  color: var(--ink);
  font-weight: 500;
}

.re-status-stat-label {
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.re-actions {
  display: flex;
  gap: var(--s-2);
}

/* three-column editor layout */

.re-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  align-items: stretch;
}

.re-panel {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-height: 540px;
}

.re-panel-head {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.re-panel-body {
  padding: var(--s-3);
  overflow-y: auto;
  flex: 1;
}

/* source library (left) */

.re-section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--s-2) var(--s-2);
  margin-top: var(--s-3);
}

.re-section-label:first-child { margin-top: 0; }

.re-source-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s-2);
  padding: 8px var(--s-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 120ms;
  font-size: var(--fs-13);
  align-items: start;
  margin-bottom: 2px;
  border: 1px solid transparent;
}

.re-source-row:hover { background: var(--surface-hover); }

.re-source-row.is-selected {
  background: var(--brand-purple-tint);
  border-color: var(--brand-purple-tint-strong);
}

.re-source-row-icon {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  margin-top: 1px;
}

.re-source-row-icon--active { color: var(--success); }
.re-source-row-icon--off { color: var(--muted-soft); }

.re-source-row-name {
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.re-source-row-vendor {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0;
}

/* pipeline canvas (centre) */

.re-canvas {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
  background: var(--paper-soft);
  flex: 1;
  justify-content: flex-start;
}

.re-node {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--s-3) var(--s-4);
  min-width: 220px;
  max-width: 280px;
  text-align: center;
  font-size: var(--fs-13);
  box-shadow: var(--shadow-sm);
}

.re-node--clickable { cursor: pointer; transition: border-color 120ms, box-shadow 120ms; }
.re-node--clickable:hover { border-color: var(--brand-purple); box-shadow: 0 0 0 3px var(--brand-purple-tint); }

.re-node.is-selected {
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px var(--brand-purple-tint);
}

.re-node-title {
  font-weight: 500;
  font-size: var(--fs-14);
  letter-spacing: -0.005em;
}

.re-node-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  margin-top: 4px;
}

.re-node--trigger {
  background: var(--brand-purple-tint);
  border-color: var(--brand-purple);
  color: var(--brand-purple-deep);
}

.re-node--source {
  background: var(--channel-email-tint);
  border-color: rgba(29, 158, 117, 0.3);
}

.re-node--orchestrator {
  background: var(--paper-soft);
  border-style: dashed;
  border-color: var(--hairline-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px var(--s-3);
  min-width: 180px;
}

.re-node--output {
  background: var(--brand-purple-tint);
  border-color: var(--brand-purple);
  color: var(--brand-purple-deep);
}

.re-node-cache {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  color: var(--success);
  margin-top: 4px;
}

.re-node-cache--cold { color: var(--warning); }

.re-arrow {
  width: 1px;
  height: 18px;
  background: var(--muted-soft);
  position: relative;
}

.re-arrow::after {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -1px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted-soft);
}

.re-fan {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  justify-content: center;
}

.re-fan-stem {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* detail panel (right) */

.re-detail-section + .re-detail-section { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }

.re-detail-row {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: var(--s-2);
  padding: 5px 0;
  font-size: var(--fs-12);
  align-items: baseline;
  border-bottom: 1px dashed var(--hairline);
}

.re-detail-row:last-child { border-bottom: 0; }

.re-detail-key {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.re-detail-val {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink);
  line-height: 1.4;
  word-break: break-word;
}

.re-detail-val .var { color: var(--brand-purple); }

.re-fields-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--s-2);
}

.re-field {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  padding: 4px 8px;
  background: var(--paper-soft);
  border-radius: var(--radius-sm);
  color: var(--brand-purple);
}

/* simulator strip */

.re-sim {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--paper-soft);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-7);
}

.re-sim-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}

.re-sim-title {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: 500;
  margin-right: var(--s-3);
}

.re-sim-input {
  flex: 1;
  min-width: 240px;
  padding: 8px var(--s-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
}

.re-sim-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.re-sim-result-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
}

.re-sim-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--s-2);
}

.re-sim-result-status {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
}

.re-sim-result-status--ok { color: var(--success); }
.re-sim-result-status--cached { color: var(--brand-purple); }

.re-sim-field {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  margin-bottom: 4px;
  padding: 5px 8px;
  background: var(--paper-soft);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

.re-sim-field-key { color: var(--brand-purple); }
.re-sim-field-val { color: var(--ink); }


/* SVG fork connectors for the research pipeline canvas */
.re-fork {
  width: 100%;
  max-width: 480px;
  height: 32px;
  display: block;
}

.re-fork path {
  stroke: var(--muted-soft);
  stroke-width: 1;
  fill: none;
}

.re-fork-arrow {
  fill: var(--muted-soft);
}

.re-fan {
  display: flex;
  gap: var(--s-4);
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 480px;
}

.re-fan-stem {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.re-fan-stem .re-node {
  width: 100%;
  max-width: none;
}


/* friendly label pattern: human-readable primary, var-name as subtle subscript */
.re-friendly-label {
  font-size: var(--fs-13);
  color: var(--ink);
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.re-friendly-label .re-var-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-soft);
  font-weight: 400;
  letter-spacing: 0;
}

.re-friendly-label-sub {
  font-size: var(--fs-12);
  color: var(--muted);
  font-weight: 400;
}

/* simulator field — bullet list for arrays, single line for strings/numbers */
.re-sim-field-bullets {
  margin-top: 6px;
  padding: 0;
  list-style: none;
}

.re-sim-field-bullets li {
  position: relative;
  padding: 2px 0 2px 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--ink-soft);
  line-height: 1.5;
}

.re-sim-field-bullets li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--muted);
  font-weight: 700;
}

.re-sim-field-single {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--ink-soft);
  margin-top: 6px;
  line-height: 1.5;
}


/* =================================================================
 * OBJECTIVES FULL-PAGE EDITOR — dedicated canvas for the Objectives cell
 * Reuses the .re-* layout from Research editor + objectives-specific bits.
 * ================================================================= */

/* library — patterns + templates */
.oe-template-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s-2);
  padding: 8px var(--s-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-13);
  align-items: center;
  margin-bottom: 2px;
  border: 1px solid transparent;
  transition: background 120ms;
}
.oe-template-row:hover { background: var(--surface-hover); }
.oe-template-row.is-active {
  background: var(--brand-purple-tint);
  border-color: var(--brand-purple-tint-strong);
}

.oe-template-row-icon {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--success);
}
.oe-template-row.is-active .oe-template-row-icon { color: var(--brand-purple); }
.oe-template-row-name { font-weight: 500; color: var(--ink); }
.oe-template-row-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0;
}

.oe-pattern-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s-2);
  padding: 7px var(--s-2);
  border-radius: var(--radius-sm);
  cursor: grab;
  font-size: var(--fs-13);
  align-items: center;
  margin-bottom: 2px;
  border: 1px solid transparent;
}
.oe-pattern-row:hover { background: var(--surface-hover); border-color: var(--hairline); }
.oe-pattern-row:active { cursor: grabbing; }

.oe-pattern-icon {
  font-family: var(--font-mono);
  text-align: center;
  font-size: var(--fs-12);
  color: var(--muted);
}
.oe-pattern-name { color: var(--ink); }
.oe-pattern-hint {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted-soft);
  margin-top: 2px;
}

/* centre column — current objectives list with drag handles */
.oe-list-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-bottom: var(--s-2);
  background: var(--surface);
  align-items: start;
  cursor: pointer;
  transition: border-color 120ms;
}
.oe-list-row:hover { border-color: var(--brand-purple-tint-strong); }
.oe-list-row.is-selected {
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px var(--brand-purple-tint);
  background: var(--brand-purple-tint);
}

.oe-list-row--locked { opacity: 0.85; }

.oe-list-drag {
  font-family: var(--font-mono);
  color: var(--muted-soft);
  text-align: center;
  cursor: grab;
  font-size: var(--fs-15);
  padding-top: 2px;
}

.oe-list-name {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.oe-list-name-var {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-soft);
  font-weight: 400;
  letter-spacing: 0;
}

.oe-list-meta {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.oe-list-meta-pill {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--muted);
}
.oe-list-meta-pill--required {
  background: var(--brand-purple-tint);
  border-color: var(--brand-purple-tint-strong);
  color: var(--brand-purple);
}
.oe-list-meta-pill--locked {
  background: var(--channel-voice-tint);
  border-color: rgba(239, 159, 39, 0.3);
  color: #b06f10;
}
.oe-list-meta-pill--auto {
  background: var(--paper-soft);
}

.oe-list-dest {
  display: flex;
  gap: 3px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
}
.oe-list-dest-icon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
}

.oe-list-grip-action {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted-soft);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* right column — detail editor sections */
.oe-detail-section {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
}
.oe-detail-section:last-child { border-bottom: 0; }
.oe-detail-section-title {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--s-2);
}

.oe-field-row {
  margin-bottom: var(--s-3);
}
.oe-field-row:last-child { margin-bottom: 0; }
.oe-field-label {
  font-size: var(--fs-12);
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 500;
}
.oe-field-input,
.oe-field-select,
.oe-field-textarea {
  width: 100%;
  padding: 7px var(--s-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  background: var(--surface);
  color: var(--ink);
}
.oe-field-textarea { min-height: 56px; resize: vertical; font-family: var(--font-sans); }

.oe-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-13);
  padding: 6px 0;
  cursor: pointer;
}
.oe-checkbox-row input { accent-color: var(--brand-purple); margin: 0; }

.oe-rule-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper-soft);
  margin-bottom: var(--s-2);
  font-size: var(--fs-13);
}
.oe-rule-text {
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.5;
}
.oe-rule-text strong { color: var(--brand-purple); font-weight: 500; }
.oe-rule-controls {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  display: flex;
  gap: var(--s-2);
}
.oe-rule-controls a { color: var(--brand-purple); }

/* bottom test panel */
.oe-test-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-3);
}

.oe-test-result-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-4);
  background: var(--surface);
}

.oe-test-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: var(--s-3);
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--hairline);
  font-size: var(--fs-13);
}
.oe-test-row:last-child { border-bottom: 0; }

.oe-test-row-name { font-weight: 500; color: var(--ink); }
.oe-test-row-val {
  font-family: var(--font-sans);
  color: var(--ink-soft);
  line-height: 1.45;
}
.oe-test-row-val .muted { color: var(--muted); }
.oe-test-row-conf {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  white-space: nowrap;
}
.oe-test-row-conf--ok   { color: var(--success); }
.oe-test-row-conf--warn { color: var(--warning); }
.oe-test-row-conf--miss { color: var(--muted-soft); }


/* lighter objective row — plain-English description instead of pill salad */
.obj-desc {
  font-size: var(--fs-13);
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 6px;
  max-width: 60ch;
}

.obj-bullets {
  margin-top: var(--s-3);
  padding-left: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-3);
}

.obj-bullets li {
  padding: 6px 0;
  font-size: var(--fs-13);
  color: var(--ink-soft);
  line-height: 1.55;
  border-bottom: 1px dashed var(--hairline);
}

.obj-bullets li:last-child { border-bottom: 0; }

.obj-bullets li strong {
  color: var(--ink);
  font-weight: 500;
  margin-right: 4px;
}

.obj-locked-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  background: var(--channel-voice-tint);
  color: #b06f10;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(239, 159, 39, 0.3);
  margin-left: var(--s-2);
  letter-spacing: 0;
}


/* capture-method tag — what kind of objective this is */
.obj-method-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: 500;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  margin-left: var(--s-2);
  letter-spacing: 0;
  white-space: nowrap;
}

.obj-method-tag--asked {
  background: var(--brand-purple-tint);
  color: var(--brand-purple);
  border-color: var(--brand-purple-tint-strong);
}

.obj-method-tag--listened {
  background: var(--channel-email-tint);
  color: var(--channel-email);
  border-color: rgba(29, 158, 117, 0.3);
}

.obj-method-tag--computed {
  background: var(--paper-soft);
  color: var(--muted);
  border-color: var(--hairline-strong);
}

.obj-method-tag--generated {
  background: var(--channel-voice-tint);
  color: #b06f10;
  border-color: rgba(239, 159, 39, 0.3);
}


/* objective detail panels — per-objective wiring */
.oe-detail-panel { display: none; }
.oe-detail-panel.is-visible { display: block; }

.oe-method-summary {
  margin-bottom: var(--s-3);
}

.oe-method-explainer {
  font-size: var(--fs-13);
  color: var(--ink-soft);
  line-height: 1.55;
  background: var(--paper-soft);
  padding: var(--s-3);
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

.oe-method-explainer strong { color: var(--ink); font-weight: 500; }
.oe-method-explainer a { color: var(--brand-purple); }

.oe-prompt-preview {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.5;
}

.oe-prompt-preview--followup {
  border-style: dashed;
  margin-top: 4px;
}

.oe-prompt-preview-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-block;
}

.oe-edit-link {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--fs-12);
  color: var(--brand-purple);
}

.oe-perf-stats {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-soft);
  line-height: 1.7;
}

.oe-perf-stats strong { color: var(--ink); font-weight: 500; }
.oe-perf-stats .perf-good { color: var(--success); }
.oe-perf-stats .perf-warn { color: var(--warning); }


/* email-from-conversation: per-objective include toggles + rendered preview */
.so-include-list {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  margin-top: 6px;
}

.so-include-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: var(--s-3);
  padding: 8px var(--s-3);
  border-bottom: 1px solid var(--hairline);
  align-items: center;
  cursor: pointer;
  font-size: var(--fs-13);
}
.so-include-row:last-child { border-bottom: 0; }
.so-include-row:hover { background: var(--surface-hover); }

.so-include-row input { accent-color: var(--brand-purple); margin: 0; }

.so-include-name { font-weight: 500; color: var(--ink); }
.so-include-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0;
}

.so-include-method {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--brand-purple);
  background: var(--brand-purple-tint);
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand-purple-tint-strong);
  white-space: nowrap;
}

.so-include-method--listened {
  background: var(--channel-email-tint);
  color: var(--channel-email);
  border-color: rgba(29, 158, 117, 0.3);
}
.so-include-method--computed {
  background: var(--paper-soft);
  color: var(--muted);
  border-color: var(--hairline-strong);
}
.so-include-method--generated {
  background: var(--channel-voice-tint);
  color: #b06f10;
  border-color: rgba(239, 159, 39, 0.3);
}

/* email preview — looks like an actual email card */
.email-preview {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  margin-top: 6px;
}

.email-preview-head {
  padding: var(--s-3) var(--s-4);
  background: var(--paper-soft);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
}

.email-preview-head-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--s-2);
  padding: 1px 0;
  font-size: var(--fs-12);
}
.email-preview-head-row .key {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
}
.email-preview-head-row .val { color: var(--ink); }

.email-preview-subject {
  font-weight: 500;
  font-size: var(--fs-14);
  margin-top: 2px;
}

.email-preview-body {
  padding: var(--s-4);
  font-size: var(--fs-13);
  color: var(--ink-soft);
  line-height: 1.6;
  font-family: var(--font-sans);
}

.email-preview-body strong { color: var(--ink); font-weight: 500; }
.email-preview-body ul { margin: 4px 0 0 var(--s-4); padding: 0; }
.email-preview-body li { padding: 1px 0; }
.email-preview-body a { color: var(--brand-purple); }

.email-preview-section { margin-top: var(--s-3); }
.email-preview-section:first-child { margin-top: 0; }



/* =====================================================================
 * Mobile · drawer sidebar + responsive grids · breakpoint at 860px
 * Demo-flow readable on phone — sidebar collapses to a drawer, content
 * grids stack to a single column, page-actions wrap below the title.
 * ===================================================================*/

/* hamburger toggle button — fixed top-left, hidden on desktop */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 60;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-display);
}
.sidebar-toggle:hover { border-color: var(--brand-purple); color: var(--brand-purple); }
.sidebar-toggle:active { transform: scale(0.96); }
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 15, 26, 0.36);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

@media (max-width: 860px) {
  .app-layout {
    grid-template-columns: 1fr;
  }
  .app-layout .shell {
    padding: var(--s-7) var(--s-4) var(--s-9);
  }
  /* sidebar slides in from the left as an overlay */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 86vw;
    z-index: 50;
    transform: translateX(-101%);
    transition: transform 220ms ease;
    box-shadow: 0 0 24px rgba(13, 15, 26, 0.18);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-toggle { display: inline-flex; }

  /* page head stacks: title above, actions wrap below */
  .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
  }
  .page-head .page-actions,
  .page-actions {
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  /* KPI tile grids: 2 columns at tablet, 1 at phone */
  .tile-grid--lg {
    grid-template-columns: repeat(2, 1fr);
  }

  /* hide the kbd-cmd hint inline button on phone (tap target is more useful) */
  .page-actions .kbd { display: none; }
}

@media (max-width: 540px) {
  .app-layout .shell {
    padding: var(--s-5) var(--s-3) var(--s-7);
  }
  .tile-grid--lg {
    grid-template-columns: 1fr;
  }
  /* shrink the page title slightly on tiny screens */
  .page-title { font-size: var(--fs-32); }
  .home-hero-head { font-size: var(--fs-28); }

  /* push the toggle out of the way of the page-head eyebrow */
  .shell > .page-head:first-of-type,
  .shell > .home-hero:first-of-type {
    padding-top: 40px;
  }
}


/* Mobile · shared layout classes that need to stack at <=860px */
@media (max-width: 860px) {
  /* agent handbook · workbench-status header */
  .workbench-status {
    grid-template-columns: 1fr;
    padding: var(--s-4);
  }
  .workbench-status-identity {
    grid-template-columns: 64px 1fr;
    gap: var(--s-3);
  }
  .workbench-status-portrait {
    width: 64px !important;
    height: 64px !important;
  }
  .workbench-status-name {
    font-size: var(--fs-20);
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .workbench-status-voice {
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .workbench-status-voice-preview,
  .workbench-status-voice-edit {
    margin-left: 0;
  }
  .workbench-status-health {
    flex-wrap: wrap;
    gap: var(--s-3);
  }
  .workbench-kpis {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--s-4);
    padding-top: var(--s-4);
    margin-top: var(--s-4);
    border-top: 1px solid var(--hairline);
  }
  .workbench-kpi {
    text-align: left;
    flex: 0 0 calc(50% - var(--s-3));
  }

  /* live-call · 3-column live grid stacks */
  .live-grid {
    grid-template-columns: 1fr;
  }

  /* call detail · split stacks */
  .split {
    grid-template-columns: 1fr;
  }

  /* integrations · single column */
  .int-grid {
    grid-template-columns: 1fr;
  }

  /* home cost-row · wrap, hide divider lines */
  .cost-row {
    flex-wrap: wrap;
    gap: var(--s-3);
  }
  .cost-row-divider { display: none; }
  .cost-row-meta {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  /* calls list · toolbar wraps; row keeps width with horizontal scroll */
  .calls-toolbar {
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .calls-search { min-width: 0; flex: 1 1 220px; }
  .calls-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .calls-row {
    min-width: 640px;
  }

  /* review queue · cards wrap, drop the right meta column on phone */
  .review-card {
    grid-template-columns: 1fr auto;
    gap: var(--s-2);
  }
}


/* Mobile · clearance for the toggle button + action-row wrapping */
@media (max-width: 860px) {
  .app-layout .shell { padding-top: 64px; }
  .workbench-actions { flex-wrap: wrap; }
  .workbench-status-meta { word-wrap: break-word; }
  /* sub-page-head app variant */
  .page-head--app {
    flex-direction: column;
    align-items: stretch;
  }
  /* horizontal scroll the calls top summary so the row keeps reading */
  .calls-summary {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .calls-summary-stat { flex: 0 0 auto; }
}


/* ===================================================================
 * Mobile · demo walkthrough navigator
 * Sticky bottom bar on demo-flow pages. Mobile-only (≤860px).
 * Hidden on desktop. Renders prev / step counter / next.
 * ===================================================================*/

.demo-nav {
  display: none;
}

@media (max-width: 860px) {
  /* Some pages have body-level fixed elements (e.g. .slideover on agent-olli)
   * that use `transform: translateX(100%)` to hide off-screen. Chromium counts
   * the transformed paint area in document scrollWidth, which makes the body
   * wider than the viewport and pushes our fixed navigator's right edge
   * off-screen. Clipping body overflow-x kills that artefact. */
  html, body {
    overflow-x: hidden;
  }

  .demo-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s-3);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 0 var(--s-4);
    background: rgba(247, 244, 236, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--hairline-strong);
    z-index: 45;
    font-family: var(--font-display);
  }
  .demo-nav-cell {
    display: flex;
    min-width: 0;
  }
  .demo-nav-cell--left { justify-content: flex-start; }
  .demo-nav-cell--centre {
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  .demo-nav-cell--right { justify-content: flex-end; }
  .demo-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--s-3);
    font-size: var(--fs-14);
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .demo-nav-link:hover { color: var(--brand-purple); }
  .demo-nav-link--done {
    background: var(--ink);
    color: #f7f4ec;
    border-radius: var(--radius-md);
    padding: 0 var(--s-4);
  }

  /* leave room at the bottom of every demo page so content isn't hidden */
  body[data-demo-step] .app-layout .shell {
    padding-bottom: 96px;
  }
}