@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  /* ---- MobileTutors brand tokens ---- */
  --mt-navy: #1D1A63;
  --mt-navy-700: #2A2680;
  --mt-gold: #DBB539;
  --mt-gold-soft: #F4E6B5;
  --mt-off-white: #FAFBFF;

  --mt-indigo: #4F46E5;
  --mt-indigo-600: #4338CA;
  --mt-indigo-tint: #EEF0FF;

  --mt-ink: #1C1B2E;
  --mt-graphite: #48465E;
  --mt-muted: #6B6A7E;
  --mt-faint: #8480A6;
  --mt-steel: #9089AE;
  --mt-cloud: #EDEFF7;
  --mt-line: #ECEBF3;
  --mt-line-strong: #E6E5EE;
  --mt-canvas: #F5F5FA;
  --mt-surface: #FFFFFF;

  --mt-danger: #DC2626;
  --mt-success: #08815A;
  --mt-warning: #E08D0B;

  --mt-strong: #08815A;      --mt-strong-bg: #D6F3E4;
  --mt-developing: #A66206;  --mt-developing-bg: #FDF0CE;
  --mt-weak: #C2332D;        --mt-weak-bg: #FBE3E1;
  --mt-inprogress-fg: #1D4ED8; --mt-inprogress-bg: #E3EDFF;

  /* ---- Categorical chart colors (voice pipeline breakdown) ----
     Fixed order — validated for CVD-safe adjacency with the dataviz skill's
     validator (transcriber/model/voice, in this order, all checks pass). */
  --chart-transcriber: #16A34A;
  --chart-model: #2F6BF6;
  --chart-voice: #EC4899;

  /* ---- Semantic aliases used throughout this file ---- */
  --text: var(--mt-ink);
  --text-muted: var(--mt-muted);
  --text-faint: var(--mt-faint);
  --surface: var(--mt-surface);
  --surface-tint: var(--mt-cloud);
  --canvas: var(--mt-canvas);
  --border: var(--mt-line);
  --border-strong: var(--mt-line-strong);
  --accent: var(--mt-indigo);
  --accent-hover: var(--mt-indigo-600);
  --accent-tint: var(--mt-indigo-tint);
  --green: var(--mt-success);
  --red: var(--mt-danger);
  --amber: var(--mt-warning);

  --shadow-hairline: 0 1px 2px rgba(28, 27, 46, .04);
  --shadow-card: 0 1px 2px rgba(28, 27, 46, .04), 0 8px 24px -14px rgba(28, 27, 46, .16);
  --shadow-pop: 0 12px 36px rgba(28, 27, 46, .16);
  --shadow-lift: 0 8px 20px -8px rgba(79, 70, 229, .5);
  --ring-focus: 0 0 0 3px rgba(79, 70, 229, .35);

  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 18px;
  --radius-pill: 999px;

  /* ---- Spacing ramp (visual cleanup step 2). The only spacing values.
     A margin/padding/gap that is not one of these is a defect. ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- Layout widths. The numbers the shell is built from, named once. ---- */
  --layout-sidebar: 232px;
  --layout-content-max: 1400px;
  --layout-gutter: 44px;
  --layout-form-max: 720px;   /* forms stay readable; tables never live at this width */
  --measure: 68ch;            /* prose line length */

  font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- Type scale. Six roles; size, weight and line-height always set together.
   An unset line-height next to flowing text is what printed a heading over its
   own description on the SMS Message Log — never leave one to chance. ---- */
.t-page-title    { font-size: 24px;   font-weight: 800; line-height: 1.3;  letter-spacing: -.4px; color: var(--mt-ink); }
.t-section-title { font-size: 17px;   font-weight: 700; line-height: 1.35; color: var(--mt-ink); }
.t-card-title    { font-size: 15px;   font-weight: 700; line-height: 1.4;  color: var(--mt-ink); }
.t-body          { font-size: 14px;   font-weight: 400; line-height: 1.6; }
.t-small         { font-size: 12.5px; font-weight: 400; line-height: 1.6; }
.t-micro         { font-size: 11px;   font-weight: 700; line-height: 1.5;  text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 15% 0%, rgba(79, 70, 229, .05), transparent 45%),
    var(--canvas);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.muted { color: var(--text-muted); }
/* A list that's being refreshed behind an already-rendered view (the Inbox reuses what's
   on screen rather than blanking to a spinner). Dims the summary line only, so it's
   obvious something's in flight without the content jumping or disappearing. */
.refreshing { opacity: 0.45; transition: opacity 120ms ease-in; }
.small { font-size: 12.5px; line-height: 1.6; }
/* Page subtitle. No negative margins: it sits inside the page-header text block
   (`.view-header > div`), where the component sets the gap — the old -14px top
   margin is what printed headings over their own descriptions. */
.page-desc { color: var(--text-muted); font-size: 13px; line-height: 1.65; max-width: var(--measure); margin: 0 0 var(--sp-5); }
/* Helper text inside a card, above or below its controls. */
.card-desc { color: var(--text-muted); font-size: 12.5px; line-height: 1.6; max-width: var(--measure); margin: 0 0 var(--sp-3); }

/* Collapsible sub-sections within a view (e.g. Webinar Attendees' Offer message /
   Assessment mapping) — a card whose whole body is behind a click, so a long page
   isn't all open and scrolling at once. */
.accordion-section { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-hairline); margin-top: 20px; overflow: hidden; }
.accordion-section > summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 15px; color: var(--mt-ink); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.accordion-section > summary::-webkit-details-marker { display: none; }
.accordion-section > summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(-45deg); transition: transform .15s; flex-shrink: 0; }
.accordion-section[open] > summary::after { transform: rotate(45deg); }
.accordion-section > summary:hover { background: var(--surface-tint); }
.accordion-section > .accordion-body { padding: 0 22px 22px; }
code { background: var(--surface-tint); padding: 2px 6px; border-radius: 5px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }

/* Login */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 44px 40px;
  width: 340px;
  text-align: center;
  box-shadow: var(--shadow-pop);
}
.login-logo {
  width: 64px; height: 64px;
  border-radius: var(--radius-pill);
  background: var(--mt-gold-soft);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.login-logo img { width: 32px; height: 32px; }
.login-card h1 { font-size: 19px; margin: 0 0 24px; font-weight: 800; letter-spacing: -.4px; color: var(--mt-navy); }
.login-card p { margin: 0 0 18px; font-size: 13.5px; }
.login-card input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  margin-bottom: 10px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.login-card input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); }
.error { color: var(--red); font-size: 13px; margin-top: 12px; }

/* Buttons */
.btn-primary, .btn-secondary, .btn-danger {
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  transition: all .15s;
  border: 1px solid transparent;
  padding: 10px 18px;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-lift);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary.full { width: 100%; padding: 12px; margin-top: 4px; }
.btn-secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--mt-graphite);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-link:hover { color: var(--accent-hover); }
.resolve-row > td { background: var(--accent-tint); }
.table.sortable th.sort { cursor: pointer; user-select: none; white-space: nowrap; }
.table.sortable th.sort:hover { color: var(--accent); }
.table.sortable th.sort::after { content: attr(data-arrow); margin-left: 4px; font-size: 11px; color: var(--accent); }
select.wa-agent { max-width: 170px; margin-right: 6px; font-size: 13px; padding: 5px 6px; vertical-align: middle; }
/* Filter bar: the row of range/status controls above a list. The class owns the
   layout — no view re-declares flex inline. */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin-bottom: var(--sp-4); }
.filter-bar label.small { display: flex; flex-direction: column; gap: 4px; }
.filter-bar select, .filter-bar input { padding: 8px 10px; font-size: 13px; }
.currency-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.currency-toggle button { background: var(--surface); border: none; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--mt-graphite); cursor: pointer; }
.currency-toggle button + button { border-left: 1px solid var(--border-strong); }
.currency-toggle button.active { background: var(--accent); color: #fff; }

/* Attendance charts */
.badge-backfilled { background: var(--accent-tint); color: var(--accent); }
.badge-auto_rescheduled, .badge-rescheduled, .badge-rejoin_link_sent, .badge-replay_offered { background: var(--mt-strong-bg); color: var(--mt-strong); }
.badge-needs_action { background: #FEF3C7; color: #92400E; }

/* Social inbox */
.banner { border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; }
.banner.error { background: #FEE4E2; color: #B42318; }
.social-reply { width: 100%; resize: vertical; }
.chart-card { padding: 14px 16px 10px; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-tick { fill: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-value { fill: var(--text); font-size: 12px; font-weight: 700; }
.chart-empty { fill: var(--text-muted); font-size: 13px; }
.chart-col { fill: var(--accent); }
.chart-col.hover { fill: #6366F1; }
.chart-tooltip {
  position: fixed; display: none; z-index: 50; pointer-events: none;
  background: var(--mt-navy); color: #fff; padding: 7px 11px; border-radius: 8px;
  font-size: 12.5px; box-shadow: 0 4px 14px rgba(29, 26, 99, .25); white-space: nowrap;
}
.chart-tooltip strong { font-size: 13.5px; }
.chart-tooltip span { opacity: .75; }
.btn-danger {
  background: transparent;
  border-color: rgba(220, 38, 38, .35);
  color: var(--red);
}
.btn-danger:hover { background: rgba(220, 38, 38, .08); }
.btn-icon {
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
}
.btn-icon:hover { color: var(--red); background: rgba(220, 38, 38, .08); }

/* App layout */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px;
  background: var(--mt-navy);
  border-right: 1px solid rgba(255, 255, 255, .06);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 14.5px;
  margin-bottom: 20px;
  padding: 0 8px;
  letter-spacing: -.2px;
  color: #fff;
}
.brand-mark { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; }
.brand-mark img { width: 100%; height: 100%; display: block; }
.nav-section-label {
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: rgba(255, 255, 255, .5);
  padding: 0 12px;
  margin: 18px 0 7px;
}
.nav-section-label:first-of-type { margin-top: 4px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .65);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  transition: all .12s;
}
.nav-item .icon { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }
.nav-item:hover { background: var(--mt-navy-700); color: #fff; }
.nav-item.active { background: var(--accent); color: #fff; }
.nav-item.logout { margin-top: auto; }
/* The live conversation count next to each Inbox page's name (last 30 days). */
.nav-item .nav-count {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  flex-shrink: 0;
}
.nav-item.active .nav-count { background: rgba(255, 255, 255, .22); }
/* The segment pages sit under the Inbox they're carved out of, so they're indented to
   read as children of it rather than as peer pages. Must come AFTER .nav-item — its
   `padding` shorthand would otherwise reset the indent. */
.nav-item.nav-sub { padding-left: 32px; font-weight: 500; }
.nav-item.nav-sub .icon { width: 15px; height: 15px; opacity: .75; }

/* ---- Page shell. Every view renders inside this column; the widths are the
   layout tokens, nothing else. min-width:0 lets tables shrink-to-scroll instead
   of widening the page. ---- */
.content {
  flex: 1;
  min-width: 0;
  padding: var(--sp-6) var(--layout-gutter);
  max-width: var(--layout-content-max);
}
.view h2 { margin: 0 0 var(--sp-5); font-size: 24px; font-weight: 800; line-height: 1.3; letter-spacing: -.4px; color: var(--mt-ink); }
.view h3 { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0 0 var(--sp-2); color: var(--mt-ink); }

/* ---- Page header: title, optional description, optional right-aligned actions.
   One component; the title and description live together in the first child so
   their spacing is owned here and overlap is impossible.

     <header class="view-header">
       <div><h2>Title</h2><p class="page-desc">What this page is.</p></div>
       <div class="header-actions">…buttons…</div>
     </header>                                                              ---- */
.view-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.view-header h2 { margin: 0; border: none; padding: 0; }
.view-header .page-desc { margin: 6px 0 0; }
.view-header .header-actions { display: flex; gap: var(--sp-2); align-items: center; flex-shrink: 0; flex-wrap: wrap; }

/* ---- Section header: the in-page divider the page header kept being borrowed
   for. h3 + optional description + optional actions, no border, rhythm owned here. ---- */
.section-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); margin: var(--sp-6) 0 var(--sp-4); }
.section-header h3 { margin: 0; }
.section-header .page-desc, .section-header .card-desc { margin: 4px 0 0; }
.section-header .header-actions { display: flex; gap: var(--sp-2); align-items: center; flex-shrink: 0; }
.section-header + .table-wrap, .section-header + .card { margin-top: 0; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  box-shadow: var(--shadow-hairline);
}
.test-call-card { margin-bottom: 28px; }
.test-call-card .field-row { margin-top: 14px; }
.test-call-card input[type=text] {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
}

/* Agents */
.agents-list { display: flex; flex-direction: column; gap: 10px; }
.agent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 17px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: border-color .15s, transform .1s, box-shadow .15s;
  box-shadow: var(--shadow-hairline);
}
.agent-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.agent-card .name { font-weight: 700; font-size: 14.5px; color: var(--mt-ink); }
.agent-card .sub { color: var(--text-faint); font-size: 12.5px; margin-top: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.agent-form { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.form-section {
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.agent-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 700;
  flex: 1;
}
.agent-form input[type=text], .agent-form input[type=time], .agent-form input[type=password],
.agent-form input[type=email], .agent-form input[type=number], .agent-form select, .agent-form textarea {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.agent-form input:focus, .agent-form select:focus, .agent-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); }
.agent-form textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.agent-form textarea { resize: vertical; }
.field-row { display: flex; gap: var(--sp-4); align-items: flex-end; flex-wrap: wrap; }
.retry-days-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.retry-days-list input[type=number] { width: 64px; text-align: center; }
.automation-card { margin-bottom: 16px; }
.automation-card .view-header { margin-bottom: 14px; padding-bottom: 0; border: none; }
.days-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.checkbox-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  font-weight: 600 !important;
  color: var(--text) !important;
  cursor: pointer;
}
.checkbox-label.large { font-size: 14px !important; }
.checkbox-label input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
input[type=range] { accent-color: var(--accent); width: 100%; }
.range-value { color: var(--text); font-weight: 700; font-size: 12px; }
.form-actions { display: flex; gap: 12px; align-items: center; }

/* Voice pipeline meters + cards (Overview) */
.pipeline-meters { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
.meter-row { display: flex; flex-direction: column; gap: 8px; }
.meter-label { display: flex; align-items: baseline; gap: 10px; }
.meter-label .eyebrow { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.meter-label .meter-value { font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--mt-ink); }
.meter-label .meter-value .unit { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.meter-bar { display: flex; gap: 2px; height: 8px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-tint); }
.meter-bar .meter-seg { height: 100%; }

.pipeline-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 8px; }
.pipeline-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  box-shadow: var(--shadow-hairline);
}
.pipeline-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pipeline-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pipeline-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.pipeline-name { font-size: 15.5px; font-weight: 700; color: var(--mt-ink); margin-bottom: 3px; }
.pipeline-sub { font-size: 12.5px; color: var(--text-faint); margin-bottom: 12px; }
.pipeline-stats { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; }
.pipeline-stats .pipeline-cost { color: var(--mt-ink); }
.pipeline-stats .pipeline-latency { color: var(--text-muted); font-weight: 600; }

/* ---- Stat row. Metric tiles in a shared grid. Renderers go through
   `statCards()` in app.js, which owns the degenerate states: an errored or
   empty load renders `.stat-cards-note`, and windowed rows whose windows all
   hold the same figure collapse to one tile with an explanation instead of
   printing the same number four times. ---- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 14px; align-items: stretch; }
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px 22px;
  box-shadow: var(--shadow-hairline);
}
.stat-card .value { font-size: 27px; font-weight: 800; line-height: 1.2; letter-spacing: -.4px; color: var(--mt-ink); }
.stat-card .value.long { font-size: 17px; line-height: 1.35; }
.stat-card .label { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; margin-top: 4px; }
.stat-card .sub { color: var(--text-faint); font-size: 11.5px; line-height: 1.5; margin-top: 6px; }
.stat-card.good .value { color: var(--green); }
.stat-card.bad .value { color: var(--red); }
/* What a stat grid shows instead of tiles when there is nothing to tile. */
.stat-cards-note { grid-column: 1 / -1; color: var(--text-muted); font-size: 13px; line-height: 1.6; margin: 0; }

/* No-show recovery funnel — each step's bar is scaled against the first step, so the
   drop-off between "missed the session" and "actually came back" is readable at a
   glance rather than needing the percentages to be compared by eye. */
.funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel-step { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 14px; }
.funnel-step .funnel-label { font-size: 13px; font-weight: 600; color: var(--text); }
.funnel-step .funnel-track { background: var(--surface-tint); border-radius: var(--radius-pill); height: 22px; overflow: hidden; }
.funnel-step .funnel-fill { height: 100%; border-radius: var(--radius-pill); background: var(--accent); min-width: 2px; }
.funnel-step .funnel-fill.terminal { background: var(--green); }
.funnel-step .funnel-figure { font-size: 13px; font-weight: 700; color: var(--mt-ink); white-space: nowrap; }
.funnel-step .funnel-figure .pct { color: var(--text-muted); font-weight: 600; margin-left: 6px; }
@media (max-width: 720px) {
  .funnel-step { grid-template-columns: 1fr auto; }
  .funnel-step .funnel-track { grid-column: 1 / -1; order: 3; }
}

/* Inbox */
.inbox-layout { display: flex; gap: 16px; height: calc(100vh - 220px); min-height: 420px; }
.inbox-thread-list {
  width: 300px; flex-shrink: 0; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--surface); box-shadow: var(--shadow-hairline);
}
.inbox-thread-item {
  padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background .1s;
}
.inbox-thread-item:last-child { border-bottom: none; }
.inbox-thread-item:hover { background: var(--surface-tint); }
.inbox-thread-item.active { background: var(--accent-tint); }
.inbox-thread-item .name { font-weight: 700; font-size: 13.5px; color: var(--mt-ink); }
.inbox-thread-item .meta { color: var(--text-faint); font-size: 11.5px; margin-top: 2px; }
.inbox-panel {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--surface); box-shadow: var(--shadow-hairline);
}
.inbox-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.msg-bubble { max-width: 65%; padding: 9px 13px; border-radius: var(--radius-md); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.msg-bubble .msg-time { display: block; font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }
.msg-bubble.in { align-self: flex-start; background: var(--surface-tint); color: var(--mt-ink); }
.msg-bubble.out { align-self: flex-end; background: var(--accent); color: #fff; }
.msg-bubble.out .msg-time { color: rgba(255,255,255,.7); }
.inbox-reply-box { border-top: 1px solid var(--border); padding: 12px 16px; display: flex; gap: 10px; align-items: flex-end; }
.inbox-reply-box textarea { flex: 1; resize: none; min-height: 42px; max-height: 120px; }
.inbox-reply-warning { padding: 8px 16px; background: #FEF3C7; color: #92400E; font-size: 12.5px; border-top: 1px solid var(--border); }
.inbox-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13.5px; }
/* "Not in the CRM" banner atop an unlinked conversation, and the card-creation form
   that swaps into it in place. Same visual family as the reply-window warning. */
.inbox-create-contact {
  padding: 8px 16px; background: var(--surface-tint); color: var(--text-muted);
  font-size: 12.5px; border-bottom: 1px solid var(--border);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.inbox-create-contact span { flex: 1; min-width: 160px; }
.inbox-create-contact input { flex: 1; min-width: 110px; padding: 6px 10px; font-size: 12.5px; }
.inbox-no-contact-tag {
  display: inline-block; padding: 0 6px; border-radius: var(--radius-pill);
  background: #FEF3C7; color: #92400E; font-size: 10.5px; font-weight: 700;
}
/* AI "this lead looks dead" banner atop the conversation — the reviewer corrects the
   reason if needed and approves, which is what actually marks the contact Dead. */
.inbox-dead-suggest {
  padding: 10px 16px; background: #FEE2E2; color: #991B1B; font-size: 12.5px;
  border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px;
}
.inbox-dead-suggest .dls-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* The full dead_lead_reason list as checkboxes (multi-checkbox in HubSpot — several can
   apply), AI picks pre-ticked. */
.inbox-dead-suggest .dls-reasons { display: flex; flex-wrap: wrap; gap: 3px 14px; }
.inbox-dead-suggest .dls-reason-opt {
  display: flex; gap: 5px; align-items: center; font-size: 12px; cursor: pointer;
  white-space: nowrap;
}
.inbox-dead-suggest .dls-reason-opt input { accent-color: #991B1B; margin: 0; }
.inbox-dead-suggest-tag {
  display: inline-block; padding: 0 6px; border-radius: var(--radius-pill);
  background: #FEE2E2; color: #991B1B; font-size: 10.5px; font-weight: 700;
}

/* Opt-out (STOP/unsubscribe) banner atop a suppressed conversation — same visual family
   as the dead-suggest banner: it's a compliance state, not a warning-yellow nuisance. */
.inbox-suppressed {
  padding: 10px 16px; background: #FEE2E2; color: #991B1B; font-size: 12.5px;
  border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px;
}
.inbox-suppressed .inbox-unsuppress { align-self: flex-start; }

/* ---- Table. One contract for all 46 of them:
   - `.table-wrap` OWNS the border and horizontal overflow. Wide content scrolls
     in here; it never widens the card and never escapes the page.
   - never place a table inside a form-width (`.agent-form`) card — tables get
     the full content column.
   - headers stick when the wrap is given `.scroll-y` (tall lists).
   - rows only look clickable when the table is `.clickable`.
   - long cell text uses `.cell-clip` with the full value in `title`.
   - a renderer must never leave a tbody empty: empty/error states render as a
     single `.muted` / `.error` row (see `emptyRow()` in app.js). ---- */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); overflow-x: auto; box-shadow: var(--shadow-hairline); }
.table-wrap.scroll-y { max-height: 70vh; overflow-y: auto; }
.table { min-width: 720px; }
.table th { position: sticky; top: 0; z-index: 1; }
.table .cell-clip { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.table .cell-wrap { white-space: pre-wrap; }
.table td.cell-wrap { max-width: 340px; }
/* Per-column minimum widths, set on the th. */
.table th.col-s { min-width: 120px; }
.table th.col-m { min-width: 200px; }
.table th.col-l { min-width: 280px; }
.table tr.total-row td { font-weight: 700; border-top: 2px solid var(--border-strong); }

#calls-range {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
#calls-range:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); }
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { text-align: left; padding: 13px 18px; font-size: 13px; line-height: 1.5; border-bottom: 1px solid var(--border); }
.table th { color: var(--text-muted); font-weight: 700; background: var(--surface-tint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; }
.table tbody tr { transition: background .1s; }
.table.clickable tbody tr { cursor: pointer; }
.table tbody tr:hover { background: var(--surface-tint); }
.table tbody tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; letter-spacing: .01em; }
.badge-confirmed, .badge-booked, .badge-rebooked, .badge-completed, .badge-sent { background: var(--mt-strong-bg); color: var(--mt-strong); }
.badge-rescheduled { background: var(--mt-developing-bg); color: var(--mt-developing); }
.badge-cannot_attend, .badge-not_interested, .badge-disconnected, .badge-failed { background: var(--mt-weak-bg); color: var(--mt-weak); }
.badge-in_progress { background: var(--mt-inprogress-bg); color: var(--mt-inprogress-fg); }
.badge-none { background: var(--surface-tint); color: var(--text-muted); }

/* Trigger / search */
.search-box input {
  width: 100%; max-width: 420px; padding: 11px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-size: 14px; margin-bottom: 20px; font-family: inherit;
}
.search-box input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); }
.search-results { display: flex; flex-direction: column; gap: 8px; max-width: 620px; }
.result-row, .user-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 18px;
  box-shadow: var(--shadow-hairline);
}
.result-row .name, .user-row .name { font-weight: 700; font-size: 14px; color: var(--mt-ink); }
.result-row .sub, .user-row .sub { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.result-row button {
  background: var(--accent); border: none; color: #fff; padding: 8px 15px;
  border-radius: var(--radius-md); cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit;
}
.result-row button:hover { background: var(--accent-hover); }
.result-row button:disabled { opacity: .5; cursor: default; }

/* Integrations */
.integrations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.integration-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  box-shadow: var(--shadow-hairline);
  transition: box-shadow .15s, transform .1s;
}
.integration-card:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.integration-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.integration-name { font-weight: 700; font-size: 14.5px; color: var(--mt-ink); margin-bottom: 4px; }
.integration-desc { font-size: 12.5px; color: var(--text-faint); line-height: 1.45; }
.integration-status {
  position: absolute; top: 16px; right: 16px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.integration-status.status-ok { background: var(--mt-strong-bg); color: var(--mt-strong); }
.integration-status.status-error { background: var(--mt-weak-bg); color: var(--mt-weak); }
.integration-status.status-checking { background: var(--surface-tint); color: var(--text-muted); }
.integration-status.status-checking svg { animation: mt-spin .8s linear infinite; }
@keyframes mt-spin { to { transform: rotate(360deg); } }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(20, 18, 45, .45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl);
  width: 560px; max-width: 90vw; max-height: 85vh; overflow-y: auto; padding: 28px; position: relative;
  box-shadow: var(--shadow-pop);
}
.modal-close { position: absolute; top: 16px; right: 20px; background: transparent; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1; }
.modal-close:hover { color: var(--text); }
.modal h3 { margin-top: 0; }
.transcript-turn { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.transcript-turn:last-child { border-bottom: none; }
.transcript-turn .role { font-size: 10.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; letter-spacing: .5px; }
.transcript-turn .text { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--text); }
.meta-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 9px; align-items: center; }
.meta-row .k { color: var(--text-muted); }
audio { width: 100%; margin: 4px 0 16px; }

/* ---- Webinar sessions calendar ---- */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-head {
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--mt-muted);
  text-align: center;
}
.cal-day {
  min-height: 64px;
  border: 1px solid var(--mt-line);
  border-radius: 8px;
  background: var(--mt-surface);
  padding: 6px 8px;
  font-size: 13px;
  color: var(--mt-ink);
  text-align: left;
  position: relative;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.cal-day:hover { border-color: var(--mt-indigo); box-shadow: 0 1px 4px rgba(79,70,229,.15); }
.cal-day.cal-other { visibility: hidden; pointer-events: none; }
.cal-day.cal-past { opacity: .45; cursor: default; }
.cal-day.cal-past:hover { border-color: var(--mt-line); box-shadow: none; }
.cal-day.cal-today { border-color: var(--mt-gold); }
.cal-day .cal-badge {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 5px;
  padding: 2px 6px;
  width: fit-content;
}
.cal-day.cal-weekly .cal-badge { background: var(--mt-indigo-tint); color: var(--mt-indigo-600); }
.cal-day.cal-extra .cal-badge { background: #E7F6EC; color: #157347; }
.cal-day.cal-blocked .cal-badge { background: #FBEAEA; color: #B02A37; text-decoration: line-through; }
.cal-key {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  vertical-align: -1px;
}
.cal-key-weekly { background: var(--mt-indigo-tint); border: 1px solid var(--mt-indigo-600); }
.cal-key-extra { background: #E7F6EC; border: 1px solid #157347; }
.cal-key-blocked { background: #FBEAEA; border: 1px solid #B02A37; }

/* ---- Team: per-user module permission picker ---- */
.modules-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.modules-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  background: var(--mt-off-white);
}
.modules-picker .modules-group-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: none;
  gap: 8px;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--mt-navy);
  padding-bottom: 7px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.modules-group-items { display: flex; flex-direction: column; gap: 5px; }
.modules-picker .modules-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: none;
  font-weight: 500;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.modules-picker .modules-item input:disabled { cursor: default; }
.modules-picker .modules-item input:disabled + span { color: var(--text-muted); }
.modules-picker input[type="checkbox"] { accent-color: var(--accent); margin: 0; flex: none; }
.badge-master_admin { background: var(--mt-gold-soft); color: #6B5310; }
.badge-owner, .badge-admin { background: var(--accent-tint); color: var(--accent); }
.badge-member { background: var(--surface-tint); color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   Workflows — the read-only system map.
   Two visual languages, used consistently: INDIGO means this app did it, GOLD
   means HubSpot did it. That one distinction is the whole point of the page, so
   it is the only thing colour is spent on. Red is reserved for the known
   problems, so a red anything on this page always means "go and look at this".
   --------------------------------------------------------------------------- */

.wf-alert { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.wf-alert .btn-link { color: #B42318; font-weight: 700; flex: none; }

/* Live switches — the handful of automations that actually have an off switch. */
.wf-switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px; }
.wf-switch {
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface); padding: 12px 14px;
  box-shadow: var(--shadow-hairline); display: flex; flex-direction: column; gap: 3px;
}
.wf-switch-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.wf-switch-state { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.wf-switch-detail { font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.wf-switch-on { border-left-color: var(--green); }
.wf-switch-on .wf-switch-state { color: var(--green); }
.wf-switch-off { border-left-color: var(--mt-steel); }
.wf-switch-off .wf-switch-state { color: var(--text-muted); }
.wf-switch-warn { border-left-color: var(--amber); background: #FFFCF4; }
.wf-switch-warn .wf-switch-state { color: #A66206; }

/* Legend for the map. */
.wf-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.wf-key { font-size: 11.5px; font-weight: 700; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.wf-key::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--border-strong); }
.wf-key-app::before { background: var(--accent); }
.wf-key-hubspot::before { background: var(--mt-gold); }
.wf-key-human::before { border-radius: 50%; background: var(--surface); border: 2px solid var(--mt-steel); }
.wf-key-risk::before { border-radius: 50%; background: var(--red); }

/* The lifecycle grid. Horizontal scroll is expected — nine stages will not fit a
   laptop, and shrinking the cells to make them fit makes the chips unreadable. */
.wf-map-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-hairline); }
.wf-map { display: grid; grid-template-columns: 200px repeat(var(--wf-cols), minmax(186px, 1fr)); min-width: 1180px; }
.wf-corner { background: var(--surface-tint); border-bottom: 1px solid var(--border-strong); position: sticky; left: 0; z-index: 3; }
.wf-stage-head {
  background: var(--surface-tint); border-bottom: 1px solid var(--border-strong); border-left: 1px solid var(--border);
  padding: 11px 13px; display: flex; flex-direction: column; gap: 2px;
}
.wf-stage-head span { font-size: 12px; font-weight: 800; color: var(--mt-navy); letter-spacing: .01em; }
.wf-stage-head em { font-size: 10.5px; font-style: normal; line-height: 1.45; color: var(--text-faint); }
/* Sticky so the lane you are reading stays named when you scroll to the late stages. */
.wf-lane-head {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  border-top: 1px solid var(--border); border-right: 1px solid var(--border-strong);
  padding: 13px; display: flex; flex-direction: column; gap: 3px;
}
.wf-lane-head span { font-size: 12.5px; font-weight: 800; color: var(--text); }
.wf-lane-head em { font-size: 10.5px; font-style: normal; line-height: 1.45; color: var(--text-faint); }
.wf-lane-app { box-shadow: inset 3px 0 0 var(--accent); }
.wf-lane-hubspot { box-shadow: inset 3px 0 0 var(--mt-gold); }
.wf-cell {
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
  padding: 9px; display: flex; flex-direction: column; gap: 7px; min-height: 62px;
}
.wf-empty { color: var(--mt-cloud); font-size: 18px; line-height: 1; align-self: center; margin: auto; }

/* A flow. Same component in the grid and in the warnings list. */
.wf-chip {
  text-align: left; width: 100%; cursor: pointer; font: inherit;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 7px 9px; display: flex; flex-direction: column; gap: 2px;
  transition: box-shadow .12s, border-color .12s, transform .12s;
}
.wf-chip:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.wf-chip:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.wf-chip-name { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.35; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.wf-chip-meta { font-size: 10.5px; color: var(--text-faint); line-height: 1.4; }
.wf-chip-app { border-left-color: var(--accent); }
.wf-chip-app:hover { border-color: var(--accent); }
.wf-chip-hubspot { border-left-color: var(--mt-gold); }
.wf-chip-hubspot:hover { border-color: var(--mt-gold); }

.wf-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.wf-dot-human { background: var(--surface); border: 2px solid var(--mt-steel); width: 8px; height: 8px; }
.wf-dot-risk { background: var(--red); }

/* Always-running workers. */
.wf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.wf-card {
  text-align: left; cursor: pointer; font: inherit; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-md); padding: 13px 14px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-hairline); transition: box-shadow .12s, transform .12s;
}
.wf-card:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.wf-card:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.wf-card-hubspot { border-left-color: var(--mt-gold); }
.wf-card-cadence { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.wf-card-hubspot .wf-card-cadence { color: #8A6A10; }
.wf-card-name { font-size: 13.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.wf-run-count { font-size: 11.5px; color: var(--text-muted); }

/* Cadence timelines — what actually lands on a parent's phone, and when. */
.wf-cadence { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-hairline); padding: 18px 22px 14px; margin-bottom: 16px; }
.wf-cadence-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wf-cadence-head h4 { margin: 0; font-size: 15px; font-weight: 800; color: var(--text); }
.wf-cadence-event { margin: 3px 0 0; font-size: 12px; color: var(--accent); font-weight: 600; }
.wf-cadence-tally { font-size: 11.5px; font-weight: 700; color: var(--text-muted); background: var(--surface-tint); padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.wf-cadence-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); max-width: 76ch; }
.wf-timeline { position: relative; margin-top: 18px; padding: 0 4px; }
.wf-track { position: relative; height: 30px; }
.wf-mark { position: absolute; top: 8px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Default: dot sits on the date, label reads rightwards. Flipped: the label reads back
   leftwards so late marks don't run off the edge. */
.wf-mark { transform: translateX(-5px); }
.wf-mark-flip { flex-direction: row-reverse; transform: translateX(calc(-100% + 5px)); }
.wf-mark-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 2px solid var(--surface); box-shadow: 0 0 0 1px rgba(28,27,46,.10); }
.wf-mark-app .wf-mark-dot { background: var(--accent); }
.wf-mark-hubspot .wf-mark-dot { background: var(--mt-gold); }
.wf-mark-warn .wf-mark-dot { background: var(--red); }
.wf-mark-label { font-size: 11.5px; color: var(--text); display: inline-flex; align-items: center; gap: 5px; }
.wf-mark-warn .wf-mark-label { color: #B42318; font-weight: 700; }
.wf-mark-ch { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); background: var(--surface-tint); padding: 1px 5px; border-radius: 4px; }
.wf-axis { height: 2px; background: var(--border-strong); border-radius: 2px; margin-top: 4px; }
.wf-ticks { position: relative; height: 16px; }
.wf-tick { position: absolute; top: 3px; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; color: var(--text-faint); }
.wf-tick:first-child { transform: none; }
.wf-tick:last-child { transform: translateX(-100%); }
.wf-axis-label { margin: 2px 0 0; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); text-align: center; }

/* Collisions and gaps. */
.wf-warn { border: 1px solid var(--border); border-left: 4px solid var(--mt-steel); border-radius: var(--radius-md); background: var(--surface); padding: 15px 18px; margin-bottom: 11px; box-shadow: var(--shadow-hairline); }
.wf-warn-high { border-left-color: var(--red); }
.wf-warn-medium { border-left-color: var(--amber); }
.wf-warn-head { display: flex; align-items: baseline; gap: 10px; }
.wf-warn-head h4 { margin: 0; font-size: 14px; font-weight: 800; color: var(--text); }
.wf-warn-sev { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 4px; flex: none; background: var(--surface-tint); color: var(--text-muted); }
.wf-warn-high .wf-warn-sev { background: #FEE4E2; color: #B42318; }
.wf-warn-medium .wf-warn-sev { background: var(--mt-developing-bg); color: var(--mt-developing); }
.wf-warn p { margin: 8px 0 0; font-size: 13px; line-height: 1.65; color: var(--text-muted); max-width: 82ch; }
.wf-warn-where { margin-top: 8px !important; }
.wf-refs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.wf-ref { font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; background: var(--accent-tint); color: var(--accent); border: none; padding: 4px 10px; border-radius: var(--radius-pill); }
.wf-ref:hover { background: var(--accent); color: #fff; }

/* Flow detail drawer. */
.wf-drawer { position: fixed; inset: 0; z-index: 60; }
.wf-drawer-backdrop { position: absolute; inset: 0; background: rgba(28, 27, 46, .34); }
.wf-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%);
  background: var(--surface); box-shadow: var(--shadow-pop); display: flex; flex-direction: column;
}
.wf-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 24px 16px; border-bottom: 1px solid var(--border); }
.wf-drawer-head h3 { font-size: 18px; font-weight: 800; }
.wf-drawer-body { overflow-y: auto; padding: 20px 24px 40px; }
.wf-drawer-body h4 { margin: 22px 0 7px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.wf-drawer-body h4:first-of-type { margin-top: 4px; }
.wf-drawer-body p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text); }
.wf-drawer-body a { color: var(--accent); font-weight: 700; }
.wf-drawer-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.wf-risk-head { color: #B42318 !important; }
.wf-steps { list-style: none; margin: 0; padding: 0; }
.wf-step { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.wf-step:last-child { border-bottom: none; }
.wf-step-at { flex: 0 0 116px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); line-height: 1.5; padding-top: 1px; }
.wf-step-at-empty { color: var(--mt-cloud); }
.wf-step-what { font-size: 13px; line-height: 1.6; color: var(--text); }
.wf-drawer-body ul { margin: 0; padding-left: 18px; }
.wf-drawer-body ul li { font-size: 13px; line-height: 1.65; margin-bottom: 5px; }
.wf-props li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px !important; color: var(--mt-navy); }
.wf-guards li { color: var(--text-muted); }
.wf-risks li { color: #B42318; }

@media (max-width: 900px) {
  .wf-drawer-panel { width: 100%; }
  .wf-cadence { padding: 16px 14px 12px; }
}

/* ==== Workflow visualiser — branch trees (WORKFLOW-VISUALISER-SPEC.md step 3) ==== */
.wf-trees-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wf-trees-tab { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.wf-trees-tab:hover { border-color: var(--mt-indigo); color: var(--text); }
.wf-trees-tab.active { background: var(--mt-indigo); border-color: var(--mt-indigo); color: #fff; }
.wf-trees-tab-n { opacity: .65; font-weight: 600; margin-left: 2px; }
.wf-trees-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.wf-trees-toolbar input[type="search"] { flex: 0 1 320px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 7px 10px; font-size: 12.5px; background: var(--surface); color: var(--text); }
.wf-trees-retired-toggle { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.wf-trees-legend { display: inline-flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.wft-key { font-size: 11px; font-weight: 700; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.wft-key::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--mt-cloud); border: 1px solid var(--border); }
.wft-key-status::before { background: var(--surface); border: 2px solid var(--mt-danger); }
.wft-key-owner::before { background: #EDE9FE; border-color: #7C3AED; }
.wft-key-task::before { background: var(--mt-strong-bg); border-color: var(--mt-success); }
.wft-key-message::before { background: var(--mt-developing-bg); border-color: var(--mt-warning); }
.wft-key-property::before { background: var(--mt-inprogress-bg); border-color: var(--mt-inprogress-fg); }
.wf-trees-strip { margin-bottom: 14px; }
.wf-trees-collisions { margin-top: 10px; }
.wf-trees-collisions summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; }
.wf-trees-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }

.wft-card { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-hairline); overflow: hidden; }
.wft-card-retired { opacity: .55; }
.wft-card.wft-flash { box-shadow: 0 0 0 3px var(--mt-indigo-tint), 0 0 0 5px var(--mt-indigo); transition: box-shadow .3s; }
.wft-card-head { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--text); flex-wrap: wrap; }
.wft-card-head:hover { background: var(--mt-off-white); }
.wft-caret { color: var(--text-muted); font-size: 11px; width: 12px; flex: none; }
.wft-name { font-weight: 800; font-size: 13.5px; }
.wft-sys-app, .wft-sys-hubspot { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 4px; flex: none; }
.wft-sys-app { background: var(--mt-indigo-tint); color: var(--mt-indigo-600); }
.wft-sys-hubspot { background: var(--mt-gold-soft); color: #7A5E10; }
.wft-retired-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--mt-cloud); color: var(--text-muted); }
.wft-alsoon { font-size: 11px; color: var(--text-muted); font-style: italic; }
.wft-fan-total { font-size: 11px; font-weight: 700; color: var(--mt-indigo-600); background: var(--mt-indigo-tint); padding: 2px 8px; border-radius: 999px; }
.wft-head-meta { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }
.wft-trigger { margin: 0; padding: 0 14px 8px 35px; }
.wft-svg-wrap { overflow-x: auto; padding: 4px 14px 10px; }
.wft-card-foot { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding: 8px 14px 12px; border-top: 1px dashed var(--border); }
.wft-fan-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.wft-fan-chip { border: 1px solid var(--border); background: var(--mt-off-white); color: var(--text-muted); font-size: 11px; padding: 4px 9px; border-radius: 999px; cursor: pointer; text-align: left; }
.wft-fan-chip:hover { border-color: var(--mt-indigo); color: var(--text); }
.wft-fan-chip strong { color: var(--mt-indigo-600); font-weight: 800; }
.wft-foot-links { margin-left: auto; display: inline-flex; gap: 12px; align-items: center; }
.wft-portal-link { font-size: 12px; font-weight: 700; color: var(--mt-indigo-600); text-decoration: none; white-space: nowrap; }
.wft-portal-link:hover { text-decoration: underline; }
.wft-detail-btn { font-size: 12px; }

/* SVG nodes — colour BY SIDE EFFECT, per the spec; the tab already says the channel. */
.wft-svg { font-size: 12px; font-family: inherit; display: block; margin: 0 auto; }
.wft-svg text { fill: var(--text); }
.wft-node rect, .wft-node polygon { fill: var(--surface); stroke: var(--mt-steel); stroke-width: 1.2; }
.wft-node.wft-se-property rect, .wft-node.wft-se-property polygon { fill: var(--mt-inprogress-bg); stroke: var(--mt-inprogress-fg); }
.wft-node.wft-se-message rect, .wft-node.wft-se-message polygon { fill: var(--mt-developing-bg); stroke: var(--mt-warning); }
.wft-node.wft-se-owner rect, .wft-node.wft-se-owner polygon { fill: #EDE9FE; stroke: #7C3AED; }
.wft-node.wft-se-task rect, .wft-node.wft-se-task polygon { fill: var(--mt-strong-bg); stroke: var(--mt-success); }
.wft-node.wft-se-status rect, .wft-node.wft-se-status polygon { fill: var(--surface); stroke: var(--mt-danger); stroke-width: 2.2; }
.wft-kind-terminal rect { fill: var(--mt-off-white); }
.wft-kind-terminal .wft-inner { fill: none; stroke-width: 1; }
.wft-kind-trigger rect { fill: var(--mt-navy); stroke: var(--mt-navy); }
.wft-kind-trigger text { fill: #fff; }
.wft-incomplete rect, .wft-incomplete polygon { stroke-dasharray: 5 4; }
.wft-hit rect, .wft-hit polygon { stroke: var(--mt-gold); stroke-width: 3; }
.wft-edge { stroke: var(--mt-steel); stroke-width: 1.2; }
.wft-svg marker path { fill: var(--mt-steel); }
.wft-edge-label { fill: var(--text-muted); font-size: 10.5px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 4; }
.wft-badge { cursor: pointer; }
.wft-badge rect { fill: var(--mt-indigo); }
.wft-badge text { fill: #fff; font-size: 10.5px; font-weight: 800; }
.wft-badge:hover rect { fill: var(--mt-indigo-600); }

/* Fan-out popover */
#wft-popover { position: absolute; z-index: 60; min-width: 280px; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 8px; }
.wft-pop-title { font-size: 11.5px; font-weight: 800; color: var(--text-muted); padding: 4px 8px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.wft-pop-row { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; font-size: 12px; color: var(--text); padding: 6px 8px; border-radius: 6px; }
button.wft-pop-row { cursor: pointer; }
button.wft-pop-row:hover { background: var(--mt-indigo-tint); }
.wft-pop-row .small { display: block; margin-top: 1px; }
.wft-pop-retired { opacity: .55; }
.wft-pop-unresolved { border-left: 3px solid var(--mt-warning); }

@media (max-width: 900px) {
  .wf-trees-legend { margin-left: 0; }
}

/* Prompt 04 — the filter chip strip. ch.03 §6 requirement 4: "any default filter must be
   visible in the chip strip on first paint". HubSpot's hidden `Assigned to = me` default
   on Tasks buried 655 records for eight months precisely because it rendered as nothing,
   so these are deliberately loud rather than subtle. */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; line-height: 1.6;
  border: 1px solid var(--border, #d7dbe0); background: var(--panel-2, #f4f6f8);
  color: var(--text, #23272b); white-space: nowrap;
}
.filter-chip.locked { border-style: dashed; opacity: .85; }
.filter-chip.guard { border-color: #b48a00; background: #fff6dd; color: #6b4e00; }
.filter-chip.tab { cursor: pointer; }
.filter-chip.tab.active { background: var(--accent, #1f6feb); border-color: var(--accent, #1f6feb); color: #fff; }
.filter-chip .chip-count { opacity: .7; font-variant-numeric: tabular-nums; }
.cv-pending { color: var(--muted, #6b7280); font-style: italic; }
.cv-warn { color: #8a5300; }

/* ── Prompt 05: the rebuilt WhatsApp inbox (Conversations) ────────────────────────────
   CRM/hubspot-audit/04-conversations-whatsapp-and-the-inbox.md §4.4's three-pane layout
   with a contextual fourth pane, at the observed widths (~180 / ~268 / flex / ~250px).
   Two of these rules are load-bearing rather than cosmetic and are named in §4.4.8:
   item 2 (the amber AI-draft pill is a LOUD list state, not a subtle one) and item 10
   (read/unread is weight on the card, not a badge). */
.cv2-layout { display: grid; grid-template-columns: 190px 300px minmax(0, 1fr) 260px; gap: 12px; align-items: start; }
@media (max-width: 1400px) { .cv2-layout { grid-template-columns: 170px 260px minmax(0, 1fr); } .cv2-sidebar { display: none; } }

.cv2-rail { display: flex; flex-direction: column; gap: 2px; }
.cv2-view { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; text-align: left; font-size: 13px; }
.cv2-view:hover { background: rgba(127,127,127,.10); }
.cv2-view.active { background: rgba(56,132,255,.14); box-shadow: inset 3px 0 0 #3884ff; font-weight: 600; }
.cv2-count { font-variant-numeric: tabular-nums; font-weight: 700; opacity: .75; }

.cv2-list { max-height: 74vh; overflow-y: auto; border: 1px solid rgba(127,127,127,.22); border-radius: 8px; }
.cv2-card { display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border-bottom: 1px solid rgba(127,127,127,.14); cursor: pointer; }
.cv2-card:hover { background: rgba(127,127,127,.07); }
.cv2-card.active { background: rgba(56,132,255,.12); box-shadow: inset 3px 0 0 #3884ff; }
/* §4.4.3 item 2 + §4.4.8 item 10: read threads render muted, unread solid. Weight, not a badge. */
.cv2-card { opacity: .72; }
.cv2-card.unread { opacity: 1; }
.cv2-card.unread strong { font-weight: 700; }
.cv2-avatar { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #25d366; color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.cv2-card-body { min-width: 0; flex: 1; }
.cv2-card-top { display: flex; justify-content: space-between; gap: 8px; }
.cv2-time { font-size: 11px; opacity: .65; white-space: nowrap; }
.cv2-preview { font-size: 12px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv2-identity { font-size: 11px; color: #b26a00; }
/* §4.4.8 item 2 — "a first-class, visually loud list state". This is how a rep spots
   "a draft is waiting for me" across a 60-row list. */
.cv2-draft-pill { display: inline-block; background: #ffe0a3; color: #6b4200; border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 700; margin-right: 5px; }

.cv2-thread { border: 1px solid rgba(127,127,127,.22); border-radius: 8px; max-height: 74vh; overflow-y: auto; padding: 12px; }
.cv2-thread-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cv2-thread-head h3 { margin: 0; }
.cv2-thread-actions { display: flex; gap: 6px; }
.cv2-owner-strip { margin: 8px 0 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cv2-messages { display: flex; flex-direction: column; gap: 10px; }

/* §4.4.5's four flavours, four visual treatments. The comment's colour is the one that
   matters: it must never be mistaken for a customer-facing bubble. */
.cv2-msg { border-radius: 8px; padding: 8px 10px; max-width: 82%; }
.cv2-msg-head { font-size: 11px; opacity: .7; margin-bottom: 3px; }
.cv2-msg-body { white-space: pre-wrap; font-size: 13px; }
.cv2-in { background: rgba(127,127,127,.12); align-self: flex-start; }
.cv2-out { background: rgba(56,132,255,.14); align-self: flex-end; }
.cv2-automated { background: rgba(127,127,127,.08); border-left: 3px solid #7a7a7a; align-self: flex-start; max-width: 92%; }
.cv2-comment { background: #fff8e6; border: 1px solid #f0d9a0; color: #4a3a10; align-self: stretch; max-width: 100%; }
.cv2-prov { font-size: 11px; opacity: .75; margin-top: 4px; }
.cv2-cat { font-size: 10px; border: 1px solid rgba(127,127,127,.4); border-radius: 4px; padding: 0 4px; }

.cv2-draft { background: #fff8e6; border: 1px solid #f0d9a0; border-radius: 8px; padding: 10px; margin-top: 14px; }
.cv2-draft.expired { opacity: .6; }
.cv2-draft-body { width: 100%; min-height: 70px; font-family: inherit; font-size: 13px; }
.cv2-draft-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.cv2-expired-note { font-size: 12px; color: #8a4b00; margin: 6px 0 0; }

.cv2-composer { margin-top: 16px; border-top: 1px solid rgba(127,127,127,.2); padding-top: 10px; }
.cv2-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.cv2-tab { border: 0; background: transparent; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.cv2-tab.on { background: rgba(56,132,255,.16); font-weight: 600; }
/* The 24-hour rule, made visible before Send is pressed rather than after it fails. */
.cv2-window { font-size: 11px; margin: 0 0 6px; }
.cv2-window.open { color: #2e7d32; }
.cv2-window.closed { color: #b3261e; font-weight: 600; }
#cv2-input { width: 100%; min-height: 74px; font-family: inherit; font-size: 13px; }
.cv2-composer-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; }

.cv2-sidebar { display: flex; flex-direction: column; gap: 10px; }
.cv2-card-panel { border: 1px solid rgba(127,127,127,.22); border-radius: 8px; padding: 10px; font-size: 12px; }
.cv2-card-panel h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; opacity: .7; }
.cv2-card-panel dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 0; }
.cv2-card-panel dt { opacity: .6; }
.cv2-card-panel dd { margin: 0; }

.cv2-bulk { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: rgba(56,132,255,.10); border-radius: 8px; margin-bottom: 8px; }
.cv2-chip { border: 1px solid rgba(127,127,127,.35); background: transparent; border-radius: 12px; padding: 2px 9px; font-size: 12px; cursor: pointer; }
.cv2-chip.on { background: #3884ff; border-color: #3884ff; color: #fff; }
.cv2-chip-group { font-size: 11px; opacity: .6; margin-left: 8px; }
.cv2-warn { color: #b3261e; font-weight: 600; }

/* =============================================================================
   Visual cleanup (docs/dashboard-visual-audit.md) — shared controls + utilities.
   Everything below exists so a view never needs a static inline style: spacing
   comes from the ramp utilities, control sizing from the input classes, and
   recurring layouts from the row/stack/grid helpers.
   ========================================================================== */

/* ---- Form controls: one base for every input, select and textarea. :where()
   keeps specificity at zero so intentional variants (login, agent-form,
   filter-bar) still win. Before this rule, only `.agent-form` descendants were
   styled and every other control rendered browser-default. ---- */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
:where(input, select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); }
:where(textarea) { resize: vertical; }
/* A checkbox inside a column-flex form label must not stretch to the column width. */
.agent-form label > input[type=checkbox] { width: auto; align-self: flex-start; }

/* Fixed-width controls (numbers, codes, short values). The only sanctioned
   alternatives to a full-width control — no more style="width:90px". */
.input-xs { width: 80px; }
.input-sm { width: 120px; }
.input-md { width: 170px; }
.input-lg { width: 240px; }

/* ---- Spacing utilities, locked to the ramp. ---- */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--sp-1) !important; }
.mt-2 { margin-top: var(--sp-2) !important; }
.mt-3 { margin-top: var(--sp-3) !important; }
.mt-4 { margin-top: var(--sp-4) !important; }
.mt-5 { margin-top: var(--sp-5) !important; }
.mt-6 { margin-top: var(--sp-6) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--sp-1) !important; }
.mb-2 { margin-bottom: var(--sp-2) !important; }
.mb-3 { margin-bottom: var(--sp-3) !important; }
.mb-4 { margin-bottom: var(--sp-4) !important; }
.mb-5 { margin-bottom: var(--sp-5) !important; }
.mb-6 { margin-bottom: var(--sp-6) !important; }

/* ---- Layout utilities. ---- */
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.row-start { align-items: flex-start; }
.row-end { align-items: flex-end; }
.push-right { margin-left: auto; }
.grow { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.card-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.measure { max-width: var(--measure); }
/* A card that holds a form keeps the form width; anything holding a table or a
   list uses the full column. */
.card-form { max-width: var(--layout-form-max); }
.pre-scroll { white-space: pre-wrap; max-height: 420px; overflow: auto; }

/* A row-card list entry that is informational, not clickable — replaces the
   `.agent-card` + style="cursor:default" re-purposing. */
.agent-card.static { cursor: default; }
.agent-card.static:hover { border-color: var(--border); transform: none; box-shadow: var(--shadow-hairline); }
.agent-card.static .sub { font-family: inherit; }

/* Generic eyebrow label (was inlined uppercase/letter-spacing fragments). */
.eyebrow { font-size: 11px; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }

/* Tinted inset panel inside a card (quotes, context, per-rung message preview). */
.tinted-panel { background: var(--accent-tint); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); }

/* Vertical option list for radio/checkbox groups (Settings' hand-built rows). */
.choice-list { display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-2) 0; }
.choice-list label { display: flex; align-items: center; gap: 6px; }

/* Contacts record layout: summary / activity / actions. Stacks below 1100px
   instead of crushing three columns into a laptop window. */
.record-grid { display: grid; grid-template-columns: 1fr 1.4fr .8fr; gap: var(--sp-4); align-items: start; }
@media (max-width: 1100px) { .record-grid { grid-template-columns: 1fr; } }

/* Sweep support classes — one-offs the audit showed the views need. */
.spread { justify-content: space-between; }
summary { cursor: pointer; }
.cell-scroll { max-height: 300px; overflow-y: auto; padding-right: var(--sp-1); }
.qr-img { background: #fff; padding: var(--sp-3); border-radius: var(--radius-sm); max-width: 200px; }
.cadence-step { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: var(--sp-1) 0; }
.minw-md { min-width: 170px; }

/* Final sweep residue — the classes the last seven static inline styles needed. */
hr { border: none; border-top: 1px solid var(--border); }
.meter-seg.rest { width: 100%; background: var(--border-strong); }
/* Multi-column roster (attendance): fills the row, items never split mid-entry. */
.col-list { columns: 3 220px; column-gap: var(--sp-5); }
.col-list > div { break-inside: avoid; }
/* Key/value record tables (theadless): the label column keeps a fixed share. */
.table td.kv-label { width: 45%; }
/* Transcript speaker variants on the tinted panel: neutral grey for the
   business side, outlined for internal notes — never mistakable for a bubble. */
.tinted-panel.neutral { background: rgba(28, 27, 46, .035); }
.tinted-panel.outline { background: none; border: 1px dashed var(--border); }

.text-center { text-align: center; }

/* Unbreakable tokens (URLs, cookie strings in error dumps) must wrap rather
   than widen the page — the last horizontal-overflow class the audit found. */
.content { overflow-wrap: anywhere; }
/* Tables opt back out of anywhere-wrapping: a wide table's contract is to scroll
   inside .table-wrap, not to crush its headers letter-by-letter. */
.table { overflow-wrap: normal; }
.table th { white-space: nowrap; }