/* AiPhone — application stylesheet.
   Tokens first (Light, then Dark: campaign page rework spec 2026-09-30, section 4), then layout,
   then components. Type: Instrument Sans for the interface, Fraunces for titles and day numbers,
   IBM Plex Mono only for phone numbers, times, counts and code. */

:root {
  --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  /* paper and ink (spec 4.1): Light is the sample's beige, the default */
  --page: #FAF8F4;
  --rail-bg: #F3EFE6;
  --surface: #FFFFFF;
  --sunken: #FAF8F4;
  --hover: #F3EFE6;
  --ink: #1B1A17;
  --ink2: #6B675F;
  --faint: #706B62; /* placeholders only: 4.5:1 or better on the surface, the sunken fill, the page and --hover (R-faint) */
  --line: #E7E2D8;
  --line2: #CFC9BD;

  /* the accent marks four places only (spec 4.3); the one solid button; links are ink, underlined.
     #B93E0C (phase 1 plan R6) reads at 4.5:1 or better on the page, the surface and --wait-soft */
  --accent: #B93E0C;
  --primary: #1B1A17;
  --primary-hover: #33312C;
  --primary-ink: #FFFFFF;
  --link: var(--ink);

  /* channel colours: icons and badges only, white text on them */
  --text: #1D5FD1;
  --mail: #7C3AED;
  --call: #0F7B4F;
  --on-channel: #FFFFFF;

  /* status: checklist marks, lamps, notices; --on-status is text on a solid status fill */
  --ok: #0F7B4F;
  --no: #B4231C;
  --wait: #8A6D1F;
  --ok-soft: #E4F2EA;
  --no-soft: #FBE9E7;
  --wait-soft: #FFF7E6;
  --on-status: #FFFFFF;

  --scrim: rgba(27, 26, 23, .38);
  --knob: #FFFFFF;
  --chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B675F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");

  /* the old names, so every existing var() keeps working; the ones that meant blue are neutral now */
  --canvas: var(--page);
  --muted: var(--ink2);
  --ink-2: var(--ink2);
  --surface-2: var(--sunken);
  --surface-3: var(--hover);
  --line-2: var(--line2);
  --live: var(--ok);
  --live-soft: var(--ok-soft);
  --warn: var(--wait);
  --warn-soft: var(--wait-soft);
  --danger: var(--no);
  --danger-soft: var(--no-soft);

  --shadow-1: 0 1px 2px rgba(27, 26, 23, .06), 0 1px 1px rgba(27, 26, 23, .04);
  --shadow-2: 0 8px 24px rgba(27, 26, 23, .12), 0 2px 6px rgba(27, 26, 23, .08);
  --shadow-modal: 0 24px 64px rgba(27, 26, 23, .22), 0 2px 8px rgba(27, 26, 23, .10);
  --radius: 10px;
  --radius-sm: 7px;
  --rail: 236px;
  --focus: 0 0 0 2px var(--page), 0 0 0 4px var(--ink);
  color-scheme: light;
}

/* Dark: soft charcoal, the yellow accent used as sparingly as the orange (spec D15) */
:root[data-theme="dark"] {
  --page: #1E1E1E;
  --rail-bg: #191919;
  --surface: #262626;
  --sunken: #222222;
  --hover: #2E2E2E;
  --ink: #EDEDED;
  --ink2: #A8A8A8;
  --faint: #979797;
  --line: #383838;
  --line2: #4A4A4A;

  --accent: #F5C518;
  --primary: #F5C518;
  --primary-hover: #F7CF3F;
  --primary-ink: #1E1E1E;

  --text: #2563D9;
  --mail: #7440E0;
  --call: #147A4C;

  --ok: #43C58B;
  --no: #F2695F;
  --wait: #E0873A;
  --ok-soft: #1D3328;
  --no-soft: #3A2221;
  --wait-soft: #3A2A17;
  --on-status: #1E1E1E;

  --scrim: rgba(0, 0, 0, .55);
  --chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8A8A8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, .55);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  accent-color: var(--ink); /* inherited: every checkbox, radio, slider and date picker is ink, never the browser's blue */
  font: 14px/1.5 var(--font-ui); letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
/* anchors that are controls, not links: buttons, the menu, rows, tabs, crumbs, the brand */
a.btn, a.rowitem, a.brand, .nav a, .usermenu a, .tabs a, .crumbs a, .statusmenu a.line { text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
code, .mono { font-family: var(--font-mono); font-size: 12px; }
code { background: var(--surface-3); padding: 1px 6px; border-radius: 5px; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }
::selection { background: var(--line2); }
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }
.rail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--rail-bg); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 0 12px 12px;
}
/* The brand is the "ai agent lab" wordmark set in Fraunces italic (spec 4.6), with the
   workspace name in small type under it. */
/* look fixes 2026-10-06: the brand row spans the rail on its own rule, the wordmark bigger and set in from the
   left edge (the mockups' 52px brand row, overview.html .mpA-brand) */
.brand { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; min-height: 64px;
  margin: 0 -12px 8px; padding: 0 24px; border-bottom: 1px solid var(--line); color: var(--ink); }
.brand .wordmark { font: italic 700 28px/1.1 var(--font-serif); letter-spacing: -.01em; white-space: nowrap; }
.brand .ws { display: block; color: var(--muted); font-size: 12px; font-weight: 400; padding-left: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.navgroup { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink2); font-weight: 600;
  padding: 16px 12px 6px; }
.nav a {
  display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 0 12px 0 10px; border-radius: 10px; color: var(--ink);
  border: 1px solid transparent; border-left: 3px solid transparent;
  font-weight: 500; font-size: 14px; transition: background .12s, color .12s;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav a.active { background: var(--surface); color: var(--ink); font-weight: 600; border-color: var(--line); border-left-color: var(--accent); }
.nav a svg { width: 16px; height: 16px; flex: none; color: var(--ink2); }
.nav a .count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink2);
  background: var(--surface); border: 1px solid var(--line); padding: 0 7px; border-radius: 999px; line-height: 18px; }
.nav a.active .count { background: var(--hover); border-color: var(--line2); color: var(--ink); }
.nav a .dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: pulse 1.6s infinite; }
.railfoot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.userbtn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid transparent; background: transparent;
  border-radius: 10px; cursor: pointer; text-align: left; }
.userbtn:hover { background: var(--surface); border-color: var(--line); }
/* the signed-in person: a solid ink circle with the initials in the page colour, ringed so it stands off the rail
   (the general .avatar rule further down keeps the other avatars; this one is scoped to the rail's user button) */
.userbtn .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--page);
  box-shadow: 0 0 0 2px var(--rail-bg), 0 0 0 3px var(--line2);
  display: grid; place-items: center; font-weight: 700; font-size: 12px; letter-spacing: .02em; flex: none; }
.userbtn .who { min-width: 0; }
.userbtn .who b { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userbtn .who span { display: block; color: var(--ink2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usermenu { position: absolute; bottom: 60px; left: 12px; width: calc(var(--rail) - 24px); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 6px; z-index: 30; }
.usermenu button, .usermenu a { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 10px; border: 0;
  background: transparent; border-radius: 7px; cursor: pointer; color: var(--ink); font-size: 14px; text-align: left; }
.usermenu button:hover, .usermenu a:hover { background: var(--surface-2); text-decoration: none; }

.content { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  padding: 12px 28px; background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); min-height: 64px;
}
#tbLeft { min-width: 0; display: grid; gap: 3px; align-content: center; }
.topbar h1 { font-family: var(--font-serif); font-size: 28px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 4px; min-width: 0; line-height: 1.25; }
.topbar h1 .ttl { display: inline-block; max-width: min(52ch, 60vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* on a campaign's design page the name is the way back: "Campaigns ›" (spec 4.5) */
.topbar h1 a.ttl.back { font: 600 14px var(--font-ui); letter-spacing: 0; color: var(--ink2); text-decoration: none; }
.topbar h1 a.ttl.back:hover { color: var(--ink); }
.topbar .sub { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 0; }
.topbar .sub:empty { display: none; }
.topbar .sub .badge { line-height: 18px; font-size: 12px; }
.topbar .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 500; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); text-decoration: none; }
.crumbs .sep { color: var(--ink2); margin-left: 2px; }
main.page { width: 100%; max-width: 1240px; margin: 0 auto; padding: 22px 28px 60px; }
main.page.wide { max-width: 1480px; }
main.page.narrow { max-width: 860px; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 4px; }
  .brand { padding: 4px 8px; gap: 2px; }
  .navgroup { display: none; }
  .nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .nav a { padding: 6px 9px; font-size: 14px; }
  .railfoot { margin: 0 0 0 auto; padding: 0; border: 0; }
  .userbtn .who { display: none; }
  .usermenu { bottom: auto; top: 56px; right: 12px; left: auto; width: 220px; }
  .topbar, main.page { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Connections (one pill in the top bar; open it for every line, spec 4.5) ---------- */
.topbar .statusdd { position: relative; margin-left: auto; }
.topbar .statusdd + .actions { margin-left: 0; }
.statusbtn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.statusbtn:hover:not(:disabled) { background: var(--surface-2); }
.statusbtn:disabled { cursor: default; color: var(--muted); }
.statusbtn .sub { color: var(--muted); font-weight: 500; font-size: inherit; }
.statusbtn .caret { color: var(--muted); font-size: 12px; margin-left: 2px; }
.statusmenu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 380px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 6px; z-index: 30; }
.statusmenu .line { display: grid; grid-template-columns: 12px 104px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px;
  color: var(--ink-2); font-size: 14px; }
.statusmenu .line:hover { background: var(--surface-2); text-decoration: none; }
.statusmenu .line b { font-weight: 600; color: var(--ink); }
.statusmenu .line.danger, .statusmenu .line.danger b { color: var(--danger); }
.statusmenu .readout { margin: 6px 4px 2px; padding: 8px 6px 4px; border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: 12px; color: var(--muted); line-height: 1.5; }
.statusmenu .readout b { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .statusbtn .sub { display: none; } .statusmenu { min-width: 260px; } }
/* ---------- the Light | Dark switch: its own node in the top bar, after the page actions (spec 4.5) ---------- */
/* A page with no actions leaves the slot empty, and an empty flex item still takes a place in the bar's gap: hide it, so the Connections pill and the switch sit one gap apart and share a row at 390. */
.topbar .actions:empty { display: none; }
.themesw { display: inline-flex; flex: none; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.themesw button { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; color: var(--ink2); cursor: pointer; }
.themesw button:hover { color: var(--ink); }
.themesw button[aria-checked="true"] { background: var(--primary); color: var(--primary-ink); }
:root[data-theme="dark"] .themesw button[aria-checked="true"] { background: var(--ink); color: var(--page); }
@media (max-width: 900px) { .themesw button { padding: 4px 8px; } }

/* a lamp is a flat dot (spec 4.5): green working, amber test mode or a warning, red needs attention, grey off */
.lamp { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink2); flex: none; }
.lamp.live { background: var(--ok); }
.lamp.test { background: var(--wait); }
.lamp.bad { background: var(--no); }
.lamp.off { background: var(--ink2); }
.lamp.lg { width: 12px; height: 12px; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- switchboard (overview hero) ---------- */
.switchboard { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; }
@media (max-width: 1000px) { .switchboard { grid-template-columns: 1fr; } }
.board { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.board .row { display: grid; grid-template-columns: 26px 150px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 16px 20px; border-top: 1px solid var(--line); }
.board .row:first-child { border-top: 0; }
.board .row .name { font-weight: 600; font-size: 14px; }
.board .row .name small { display: block; font-weight: 500; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.board .row .name small.live { color: var(--live); }
.board .row .name small.test { color: var(--warn); }
.board .row .name small.off { color: var(--muted); }
.board .row .name small.bad { color: var(--danger); }
.board .row .desc { color: var(--ink-2); font-size: 14px; }
.board .row .desc .mono { color: var(--muted); }
.board .row .ctl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 700px) { .board .row { grid-template-columns: 26px 1fr; } .board .row .desc { grid-column: 2; } .board .row .ctl { grid-column: 2; justify-content: flex-start; } }
.upnext { padding: 16px 20px; }
.upnext h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink2); margin-bottom: 10px; }
.upnext ol { list-style: none; margin: 0; padding: 0; font-family: var(--font-ui); font-size: 12px; }
.upnext li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--line); color: var(--ink-2); }
.upnext li:first-child { border-top: 0; }
.upnext li .when { color: var(--muted); font-family: var(--font-mono); }
.upnext li b { font-weight: 500; color: var(--ink); }
.upnext li .camp { color: var(--muted); }
.upnext .none { color: var(--muted); font-size: 14px; }

/* ---------- cards + sections ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 18px 20px; }
.card + .card, .stack > * + * { margin-top: 16px; }
.card h2 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.card h2 + p, .card .lead { color: var(--muted); font-size: 14px; }
.card .cardhead { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card .cardhead .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink2); font-weight: 600; margin: 22px 0 10px; }
.section-title:first-child { margin-top: 0; }
.figures { display: flex; gap: 28px; flex-wrap: wrap; }
.figures .fig b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.figures .fig span { color: var(--muted); font-size: 12px; }
.figures .fig small { color: var(--warn); font-size: 12px; margin-left: 4px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid transparent; background: var(--primary); color: var(--primary-ink); font-weight: 600; font-size: 14px;
  cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, opacity .12s; line-height: 1.3;
}
.btn:hover { background: var(--primary-hover); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn.secondary:hover { background: var(--surface-2); border-color: var(--ink2); }
.btn.ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn.ghost:hover { background: var(--surface-3); color: var(--ink); }
.btn.danger { background: var(--danger); color: var(--on-status); }
.btn.danger:hover { filter: brightness(.92); }
.btn.dangerish { background: var(--surface); color: var(--danger); border-color: var(--line-2); }
.btn.dangerish:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn.live { background: var(--live); color: var(--on-status); }
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.btn.xs { padding: 3px 8px; font-size: 12px; border-radius: 6px; font-weight: 500; }
.btn.block { width: 100%; }
.btn svg { width: 14px; height: 14px; }
.btnrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btnrow.end { justify-content: flex-end; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:hover { text-decoration-thickness: 2px; }

/* switch */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 34px; height: 20px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .15s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--knob);
  box-shadow: var(--shadow-1); transition: transform .15s; }
.switch input:checked + .track { background: var(--live); }
.switch.warnish input:checked + .track { background: var(--warn); }
.switch input:checked + .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { box-shadow: var(--focus); }
.switch input:disabled + .track { opacity: .5; }

/* segmented */
.seg { display: inline-flex; gap: 2px; background: var(--surface-3); border-radius: 8px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 500; }
.seg button:hover { color: var(--ink); }
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* ---------- badges + lamps in text ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; line-height: 20px; padding: 0 8px;
  border-radius: 999px; background: var(--hover); color: var(--ink2); white-space: nowrap; vertical-align: middle; }
.badge.live { background: var(--live-soft); color: var(--live); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.primary { background: var(--hover); color: var(--ink); }
.badge.dim { background: transparent; color: var(--ink2); border: 1px solid var(--line2); }
.badge.mono { font-family: var(--font-mono); font-weight: 400; }
.badges { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* ---------- forms ---------- */
.field { display: block; margin-bottom: 14px; }
.field > span, .field > label.lbl, label.lbl { display: block; font-size: 12px; font-weight: 500; color: var(--ink); margin-bottom: 5px; }
.field .hint { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; line-height: 1.4; }
.field .hint.err { color: var(--danger); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"],
input[type="search"], input[type="datetime-local"], select, textarea, .input {
  width: 100%; background-color: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px;
  color: var(--ink); transition: border-color .12s, box-shadow .12s; min-height: 36px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:disabled, select:disabled, textarea:disabled { background-color: var(--surface-3); color: var(--muted); }
textarea { resize: vertical; min-height: 70px; line-height: 1.45; }
textarea.code { font-family: var(--font-mono); font-size: 12px; white-space: pre; min-height: 320px; }
select { appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: var(--chevron);
  background-repeat: no-repeat; background-position: right 10px center; }
select.inline, input.inline { width: auto; min-height: 30px; padding: 4px 8px; }
select.inline { padding-right: 26px; }
input.mono { font-family: var(--font-mono); }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.formgrid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .formgrid { grid-template-columns: 1fr; } }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; margin: 6px 0; color: var(--ink); }
.check input { width: 15px; height: 15px; margin: 3px 0 0; flex: none; accent-color: var(--ink); }
.check .hint { display: block; color: var(--muted); font-size: 12px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 18px; }
.inputrow { display: flex; gap: 8px; align-items: center; }
.inputrow > :first-child { flex: 1; }
.form-msg { margin-top: 10px; font-size: 14px; white-space: pre-wrap; }
.form-msg.err { color: var(--danger); }
.form-msg.warn { color: var(--warn); }
.form-msg.ok { color: var(--live); }
.form-msg:empty { display: none; }
.notice { display: block; padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 1.5; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2); }
.notice.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }
.notice.danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); }
.notice.live { background: var(--live-soft); border-color: color-mix(in srgb, var(--live) 40%, transparent); color: var(--live); }
.notice.primary { background: var(--hover); border-color: var(--line2); color: var(--ink); }
.notice a { color: inherit; text-decoration: underline; }
.notice + .notice, .notice + .card, .card + .notice { margin-top: 12px; }
.copyrow { display: flex; gap: 6px; align-items: center; }
.copyrow code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 9px; background: var(--surface-3); border-radius: 7px; font-size: 12px; }
.copyrow code.secret { letter-spacing: .05em; }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover td { background: var(--surface-2); }
table.data td .sub, .sub { color: var(--muted); font-size: 12px; }
table.data td .mono { color: var(--ink-2); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .acts { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.card table.data { margin: 0 -20px; width: calc(100% + 40px); }
.card table.data th:first-child, .card table.data td:first-child { padding-left: 20px; }
.card table.data th:last-child, .card table.data td:last-child { padding-right: 20px; }
.card.flush { padding: 0; }
.card.flush table.data { margin: 0; width: 100%; }
.card.flush .cardhead { padding: 16px 20px 0; margin-bottom: 8px; }
.card.flush .empty { padding: 30px 20px; }

/* ---------- empty states ---------- */
.empty { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 14px; }
.empty h3 { color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.empty p { max-width: 460px; margin: 0 auto 14px; }
.empty.inline { padding: 14px 0; text-align: left; }

/* ---------- lists ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.list li:first-child { border-top: 0; padding-top: 0; }
.list li .when { flex: none; width: 82px; color: var(--muted); font-family: var(--font-mono); font-size: 12px; padding-top: 2px; }
.list li .body { min-width: 0; flex: 1; }
.list li .body .sub { display: block; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tabs button, .tabs a { background: transparent; border: 0; color: var(--muted); padding: 8px 12px; cursor: pointer; font-size: 14px; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button:hover, .tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs button.active, .tabs a.active { color: var(--ink); border-bottom-color: var(--ink); }
.tabs .count { margin-left: 5px; color: var(--ink2); font-family: var(--font-mono); font-size: 12px; }

/* ---------- stepper (wizards) ---------- */
.stepper { display: flex; gap: 4px; margin-bottom: 22px; flex-wrap: wrap; }
.stepper .step { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: 14px; color: var(--muted); }
.stepper .step .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--surface-3); color: var(--muted); font-family: var(--font-mono); }
.stepper .step.active { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-1); border: 1px solid var(--line); }
.stepper .step.active .n { background: var(--ink); color: var(--page); }
.stepper .step.done .n { background: var(--live-soft); color: var(--live); }
.stepper .step.done { color: var(--ink-2); }
.stepper .step.clickable { cursor: pointer; }
.wizfoot { display: flex; gap: 8px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.wizfoot .spacer { flex: 1; }

/* ---------- modal ---------- */
.modal-back { position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-back.open { display: flex; }
.modal { width: min(720px, 96vw); max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-modal); padding: 20px 22px; animation: rise .16s ease-out; }
.modal.wide { width: min(1100px, 96vw); }
.modal.narrow { width: min(460px, 96vw); }
.modal .mhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.modal .mhead h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; }
.modal .mhead .spacer { flex: 1; }
.modal .mfoot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
@keyframes rise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--ink); color: var(--canvas); border: 0; padding: 10px 14px; border-radius: 9px; font-size: 14px; box-shadow: var(--shadow-modal);
  max-width: 380px; animation: rise .16s ease-out; }
.toast.err { background: var(--danger); color: var(--on-status); }
.toast.ok { background: var(--live); color: var(--on-status); }

/* ---------- conversation bubbles / transcripts ---------- */
.thread { display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 82%; padding: 8px 12px; border-radius: 12px; font-size: 14px; white-space: pre-wrap; line-height: 1.45; }
.bubble.them { align-self: flex-start; background: var(--surface-3); border-bottom-left-radius: 4px; }
.bubble.us { align-self: flex-end; background: var(--surface); border: 1px solid var(--line2); color: var(--ink); border-bottom-right-radius: 4px; }
.bubble .meta { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.bubble.us .meta { text-align: right; }
.bubble .who { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.bubble.thinking { color: var(--muted); font-style: italic; }
ul.tight { margin: 4px 0 0; padding-left: 18px; }
ul.tight li { margin: 2px 0; }
pre.prompt { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font: 12px/1.5 var(--font-mono);
  white-space: pre-wrap; max-height: 62vh; overflow: auto; margin: 0; }

/* ---------- master-detail (conversations) ---------- */
.split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split .listcol { max-height: calc(100vh - 220px); overflow-y: auto; }
.rowitem { display: block; padding: 10px 14px; border-top: 1px solid var(--line); cursor: pointer; color: inherit; }
.rowitem:first-child { border-top: 0; }
.rowitem:hover { background: var(--surface-2); text-decoration: none; }
.rowitem.active { background: var(--hover); }
.rowitem .t { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.rowitem .t b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rowitem .t time { color: var(--muted); font-size: 12px; font-family: var(--font-mono); flex: none; }
.rowitem .p { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* ---------- console (voice test) ---------- */
.callstate { display: flex; align-items: baseline; gap: 10px; font-size: 16px; font-weight: 600; }
.callstate .lamp { margin-right: 2px; }
.callstate .timer { font-family: var(--font-mono); font-size: 14px; color: var(--muted); font-weight: 400; }
.transcript { margin-top: 12px; min-height: 240px; max-height: 440px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- the compose box ---------- */
.compose { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.compose textarea { flex: 1; min-height: 44px; max-height: 180px; }

/* ---------- misc ---------- */
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line-2); border-top-color: var(--ink); border-radius: 50%;
  animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.status-ok { color: var(--live); } .status-warn { color: var(--warn); } .status-bad { color: var(--danger); }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 14px; }
.checklist li .ic { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; flex: none; margin-top: 1px; }
.checklist li.ok .ic { background: var(--live-soft); color: var(--live); }
.checklist li.bad .ic { background: var(--danger-soft); color: var(--danger); }
.checklist li.warn .ic { background: var(--warn-soft); color: var(--warn); }
.checklist li.todo .ic { background: var(--surface-3); color: var(--muted); }

/* ---------- auth pages ---------- */
.authwrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--canvas); }
.authcard { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-2); padding: 30px 32px; }
.authcard .brand { padding: 0 0 20px; align-items: center; }
.authcard .brand .wordmark { font-size: 28px; }
.authcard h1 { font-family: var(--font-serif); font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.authcard .lead { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.authfoot { margin-top: 18px; color: var(--muted); font-size: 12px; text-align: center; }

/* getting started */
.steps-big { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .steps-big { grid-template-columns: repeat(2, 1fr); } }
.steps-big .st { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.steps-big .st .n { font-family: var(--font-mono); font-size: 12px; color: var(--ink2); letter-spacing: .06em; }
.steps-big .st b { display: block; margin: 4px 0 4px; font-size: 14px; }
.steps-big .st.done { border-color: color-mix(in srgb, var(--live) 40%, var(--line)); }
.steps-big .st.done .n { color: var(--live); }

/* ---------- agents: meters, behaviour toggles, scenario picker ---------- */
.meter { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.meter:first-child { border-top: 0; padding-top: 0; }
.meter .name { font-weight: 600; font-size: 14px; }
.meter .name small { display: block; font-weight: 500; color: var(--ink2); font-size: 12px; }
.meter input[type="range"] { width: 100%; accent-color: var(--ink); }
.meter .ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink2); font-family: var(--font-mono); margin-top: -2px; }
.meter .desc { grid-column: 2; color: var(--ink-2); font-size: 12px; line-height: 1.45; }
@media (max-width: 700px) { .meter { grid-template-columns: 1fr; } .meter .desc { grid-column: 1; } }
.behaviors { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.behavior { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.behavior .switch { margin-top: 1px; }
.behavior b { font-size: 14px; }
.behavior .sub { display: block; line-height: 1.4; }
.behavior.off { opacity: .72; }
.scenario { display: grid; gap: 10px; }
.scenario .seg button { flex: 1; }
.scenario .seg { display: flex; width: 100%; }
.agentgrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .agentgrid { grid-template-columns: 1fr; } }
.listedit { display: flex; flex-direction: column; gap: 6px; }
.listedit textarea { min-height: 42px; }
.pairs .row2 { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 6px; margin-bottom: 6px; }


/* GoHighLevel account switcher in the rail (Phase 4) */
.acctbar { padding: 0 0 8px; }
.acctbar select { width: 100%; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--ink); padding: 8px 32px 8px 12px;
  border: 1px solid var(--line); border-radius: 12px; background-color: var(--surface); }
.acctbar .acctname { display: block; font-size: 12px; color: var(--ink2); padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .acctbar { padding: 4px 8px; } .acctbar select { width: auto; } }

/* ---------- the training room ---------- */
.room { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .room { grid-template-columns: 1fr; } }
.persona-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; box-shadow: var(--shadow-1); }
.persona-strip .spacer { flex: 1; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--hover); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font: 600 12px var(--font-ui); flex: none; }
.stagehead { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.stagehead .spacer { flex: 1; }
.stagehead select.inline { width: auto; }
.thread.stage { min-height: 220px; max-height: 58vh; overflow-y: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.bubble.anchored { outline: 2px solid var(--ink); outline-offset: 2px; }
.bubble .turnacts { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.bubble .turnacts .linkbtn { font-size: 12px; }
.bubble .before { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line-2); font-size: 12px; color: var(--muted); text-decoration: line-through; }
.coach { align-self: stretch; max-width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-left: 4px solid var(--line2); border-radius: 10px; padding: 12px 14px; margin: 4px 0; font-size: 14px; }
.coach .lbl { font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.coach .note-you { font-style: italic; color: var(--ink-2); }
.coach.kept { border-left-color: var(--live); }
.coach.once { border-left-color: var(--warn); }
.coach.info { border-left-color: var(--line-2); }
.change { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; margin: 8px 0; font-size: 14px; }
.change .kind { display: block; font-family: var(--font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); margin-bottom: 2px; }
.change .field { margin: 4px 0; }
.change .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.redo { background: var(--hover); border-radius: 12px; border-bottom-right-radius: 4px; padding: 8px 12px; margin-top: 6px; font-size: 14px; white-space: pre-wrap; line-height: 1.45; }
.modes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.modes .sub { margin-left: auto; }
.chipsrow { display: flex; flex-wrap: wrap; gap: 6px; }
.intro textarea { width: 100%; }
.filecard details { border-top: 1px solid var(--line); padding: 8px 0; }
.filecard details:first-of-type { border-top: 0; }
.filecard summary { cursor: pointer; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; list-style: none; }
.filecard summary::-webkit-details-marker { display: none; }
.filecard summary::before { content: '▸'; color: var(--muted); font-size: 12px; width: 10px; }
.filecard details[open] > summary::before { content: '▾'; }
.filecard summary .spacer { flex: 1; }
.filecard .cbody { padding: 6px 0 4px 18px; font-size: 14px; line-height: 1.5; }
.filecard .cbody ol, .filecard .cbody ul { margin: 4px 0; padding-left: 18px; }
.filecard .qa { margin-top: 8px; }
.filecard .qa .they { display: block; color: var(--muted); font-style: italic; }
.lessonrow { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.lessonrow:first-child { border-top: 0; padding-top: 0; }
.lessonrow .t { font-weight: 600; }
.lessonrow .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.readiness { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.readiness div { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; font-size: 12px; }
.readiness b { display: block; font-family: var(--font-mono); font-size: 12px; }
.rule { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.rule:first-child { border-top: 0; padding-top: 0; }
.rule .txt { flex: 1; white-space: pre-wrap; font-size: 14px; line-height: 1.5; }
.rule .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- the room's email stage ---------- */
.mail { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 0; overflow: hidden; box-shadow: var(--shadow-1); }
.mail.them { border-left: 3px solid var(--line-2); }
.mail.us { border-left: 3px solid var(--ink2); }
.mail.anchored { outline: 2px solid var(--ink); outline-offset: 2px; }
.mail .mhead { padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.mail .mhead .sub { color: var(--muted); }
.mail .mhead .subj { flex-basis: 100%; font-weight: 600; font-size: 14px; color: var(--ink); }
.mail .mbody { padding: 10px 12px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.mail .before { margin: 0 12px 8px; padding-top: 6px; border-top: 1px dashed var(--line-2); font-size: 12px; color: var(--muted); text-decoration: line-through; white-space: pre-wrap; }
.mail .turnacts { display: block; padding: 0 12px 8px; font-size: 12px; color: var(--muted); }
.redo .subj { font-weight: 600; margin-bottom: 4px; }

/* ---------- the coach's review of a finished conversation ---------- */
.coach.review { border-left-color: var(--ink2); }
.suggestion { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.suggestion:first-of-type { border-top: 0; }
.suggestion.sent { opacity: .65; }
.checkrows { list-style: none; margin: 4px 0 0; padding: 0; }
.checkrows li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font-size: 14px; }
.checkrows li .ic { font-weight: 700; width: 14px; flex: none; }
.checkrows li.ok .ic { color: var(--live); }
.checkrows li.bad .ic { color: var(--danger); }
.regrow { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.regrow:first-child { border-top: 0; padding-top: 0; }
.silent { align-self: stretch; max-width: 100%; border: 1px dashed var(--line-2); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); font-size: 14px; color: var(--ink-2); }
.silent.anchored { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- GoHighLevel field links ---------- */
.fieldrow { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.fieldrow:first-of-type { border-top: 0; }
.fieldrow .val { font-weight: 600; }
.fieldrow .empty { color: var(--warn); }
.candidate { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); margin-top: 6px; font-size: 14px; }
.candidate .body { flex: 1; min-width: 0; }
.fieldlinkbox { border-top: 1px dashed var(--line-2); padding-top: 8px; }
.fieldlink { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--hover); border: 1px solid var(--line2); font-size: 12px; font-weight: 600; }
.wordings { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
@media (max-width: 720px) { .wordings { grid-template-columns: 1fr; } }
.mt4 { margin-top: 4px; }

/* ---------- the guided way to create an agent (Agents → New agent) ---------- */
.guide { display: grid; grid-template-columns: 250px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-1); overflow: hidden; min-height: 620px; }
.guide .rail { border-right: 1px solid var(--line); background: var(--surface-2); padding: 22px 16px; display: grid; gap: 6px; align-content: start; }
.guide .rail .of { font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 8px 6px; }
.guide .rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.guide .rail li button { width: 100%; text-align: left; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; padding: 9px 8px; border: 0; background: transparent; border-radius: 10px; font-size: 16px; color: var(--ink-2); cursor: pointer; font-family: inherit; line-height: 1.3; }
.guide .rail li button small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide .rail li button > span:last-child { min-width: 0; }
.guide .rail li button:hover:not(:disabled) { background: var(--surface-3); }
.guide .rail li button:disabled { cursor: default; color: var(--ink2); }
.guide .rail li button.current { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line2); }
.guide .rail .num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 14px; border: 1.5px solid var(--line-2); color: var(--muted); }
.guide .rail .current .num { background: var(--ink); border-color: var(--ink); color: var(--page); }
.guide .rail .done .num { background: var(--live-soft); border-color: transparent; color: var(--live); }
.guide .rail .later { margin-top: 12px; padding: 12px 10px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.5; }
.guide .main { padding: 26px; display: grid; align-content: start; gap: 16px; min-width: 0; }
.guide .gcard { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 26px 28px; display: grid; gap: 18px; min-width: 0; }
.guide .q { font-family: var(--font-serif); font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.guide .gsub { color: var(--muted); font-size: 16px; max-width: 64ch; line-height: 1.5; margin: 0; }
.guide textarea.big, .guide input.big { width: 100%; font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--surface); border: 2px solid var(--line-2); border-radius: var(--radius); padding: 14px 16px; resize: vertical; }
.guide textarea.big:focus, .guide input.big:focus { border-color: var(--ink); outline: none; box-shadow: var(--focus); }
.guide .choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.guide .choices.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide .choice { text-align: left; display: grid; gap: 6px; padding: 18px; border: 2px solid var(--line-2); border-radius: 12px; background: var(--surface); cursor: pointer; font-family: inherit; color: var(--ink); align-content: start; }
.guide .choice:hover { border-color: var(--ink2); }
.guide .choice[aria-pressed="true"] { border-color: var(--ink); background: var(--hover); }
.guide .choice .t { font-size: 16px; font-weight: 700; }
.guide .choice .d { color: var(--muted); font-size: 14px; line-height: 1.45; }
.guide .gbtn { min-height: 50px; font-size: 16px; padding: 0 22px; border-radius: 12px; }
.guide .gfoot { display: flex; align-items: center; gap: 12px; padding-top: 4px; flex-wrap: wrap; }
.guide .gfoot .spacer, .guide .actrow .spacer { flex: 1; }
.guide .ghint { color: var(--ink2); font-size: 14px; line-height: 1.45; }
.guide .actrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.guide .person { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.guide .person .avatar { width: 56px; height: 56px; font-size: 20px; }
.guide .person h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; margin: 0; }
.guide .person .ptitle { color: var(--muted); font-size: 16px; margin-top: 2px; }
.guide .person .pbody { font-size: 14px; line-height: 1.5; margin-top: 8px; }
.guide .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 18px; margin-top: 10px; }
.guide .fact .k { display: block; font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.guide .fact .v { font-size: 16px; font-weight: 600; }
.guide .fact .v.empty { color: var(--warn); font-weight: 500; }
.guide .scen { display: flex; flex-wrap: wrap; gap: 8px; }
.guide .scen button { text-align: left; display: grid; gap: 2px; padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); cursor: pointer; font-family: inherit; color: var(--ink); max-width: 100%; }
.guide .scen button:hover { border-color: var(--ink2); }
.guide .scen button.done { opacity: .55; }
.guide .scen button b { font-size: 16px; }
.guide .scen button span { font-size: 12px; color: var(--muted); }
.guide .thread { gap: 10px; }
.guide .thread .bubble { max-width: 86%; font-size: 16px; padding: 12px 16px; border-radius: 14px; }
.guide .bubble.dim { opacity: .45; }
.guide .bubble.redo { border: 2px solid var(--live); }
.guide .turnacts { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.guide .coach { font-size: 14px; }
.guide .coach textarea { width: 100%; font: inherit; font-size: 16px; line-height: 1.45; }
.guide .notebox { border: 2px solid var(--line2); border-radius: 12px; padding: 12px 14px; background: var(--surface); display: grid; gap: 8px; align-self: stretch; max-width: 100%; }
.guide .donelist div { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.guide .donelist div:first-child { border-top: 0; }
.guide .summary { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.guide .summary .row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; padding: 13px 18px; border-top: 1px solid var(--line); font-size: 16px; align-items: center; }
.guide .summary .row:first-child { border-top: 0; }
.guide .chipsrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.guide .chan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.guide .design { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.guide .design .side { position: sticky; top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; max-width: 100%; }
.guide .design .side > * { min-width: 0; max-width: 100%; }
.guide .chipsrow .btn, .guide .hist .btn { white-space: normal; height: auto; min-height: 26px; line-height: 1.3; text-align: left; padding-top: 4px; padding-bottom: 4px; }
.guide .hist .entry { min-width: 0; overflow-wrap: anywhere; }
/* Narrower than a wide desktop: the note box on top, the file, then the changes so far. */
@media (max-width: 1440px) {
  .guide .design { grid-template-columns: 1fr; }
  .guide .design .side { display: contents; }
  .guide .design .side .notebox { order: -1; }
  .guide .design .side .section-title, .guide .design .side .hist { order: 1; }
}
.guide .reach { font-size: 16px; }
.guide .filecard details { padding: 12px 0; border-top: 1px solid var(--line); }
.guide .filecard details:first-child { border-top: 0; }
.guide .filecard summary { font-size: 16px; font-weight: 600; cursor: pointer; }
.guide .filecard .cbody { font-size: 14px; line-height: 1.55; padding: 8px 0 0 20px; overflow-wrap: anywhere; }
@keyframes guideFlash { from { background: var(--wait-soft); box-shadow: inset 4px 0 0 var(--wait); } to { background: transparent; } }
.guide [data-sec].changed { animation: guideFlash 2.5s ease-out; border-radius: 12px; }
.guide .hist { display: grid; gap: 8px; }
.guide .hist .entry { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14px; background: var(--surface-2); }
.guide .hist .entry .you { font-style: italic; color: var(--ink-2); }
.guide .hist .entry.undone { opacity: .55; }
.guide .hist .entry ul { margin: 4px 0 0; padding-left: 18px; }
/* step 2: meet the agent, one part at a time */
.guide .tourhead { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.guide .tourhead > div { flex: 1; min-width: 0; display: grid; gap: 8px; }
.guide .assumed { font-size: 14px; color: var(--muted); }
.guide .assumed summary { cursor: pointer; }
.guide .assumed ul { margin: 6px 0 0; padding-left: 20px; line-height: 1.55; }
.guide .parts { display: flex; flex-wrap: wrap; gap: 8px; }
.guide .parts button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; }
.guide .parts button:hover { border-color: var(--ink2); }
.guide .parts button .num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; border: 1.5px solid var(--line-2); color: var(--muted); }
.guide .parts button.current { border-color: var(--ink); background: var(--hover); color: var(--ink); font-weight: 600; }
.guide .parts button.current .num { background: var(--ink); border-color: var(--ink); color: var(--page); }
.guide .parts button.seen .num { background: var(--live-soft); border-color: transparent; color: var(--live); }
.guide .tourcard { border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px; display: grid; gap: 16px; background: var(--surface); min-width: 0; }
.guide .eyebrow { font-family: var(--font-ui); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.guide .eyebrow.gap { margin-top: 6px; }
.guide .tourcard h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; margin: -10px 0 0; letter-spacing: -.01em; }
.guide .tourcard .lead { color: var(--muted); font-size: 16px; margin: -6px 0 0; max-width: 72ch; line-height: 1.5; }
.guide .tourcard .lead.small { font-size: 14px; margin: 0; }
.guide .profile { display: flex; gap: 16px; align-items: center; }
.guide .profile .avatar { width: 52px; height: 52px; font-size: 20px; }
.guide .profile .pname { font-size: 20px; font-weight: 600; line-height: 1.2; }
.guide .profile .prole { color: var(--muted); font-size: 16px; margin-top: 2px; }
.guide .blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.guide .block { background: var(--surface-2); border-radius: 12px; padding: 14px 16px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.guide .block.wide { grid-column: 1 / -1; }
.guide .tourcard .v { font-size: 16px; line-height: 1.6; max-width: 76ch; overflow-wrap: anywhere; }
.guide .tourcard .v.muted { color: var(--muted); }
.guide .plain { margin: 2px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.6; }
.guide .convo { display: grid; gap: 10px; }
.guide .convo .line { display: grid; gap: 4px; max-width: 78%; min-width: 0; }
.guide .convo .line.them { justify-self: start; }
.guide .convo .line.us { justify-self: end; }
.guide .convo .who { font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.guide .convo .line.us .who { text-align: right; }
.guide .convo .bubble { max-width: none; font-size: 16px; padding: 11px 15px; border-radius: 14px; line-height: 1.5; }
.guide .exchange { padding: 14px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.guide .exchange:first-child { border-top: 0; padding-top: 0; }
.guide .exchange > .who { font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.guide .starts .convo .line.us { justify-self: start; }
.guide .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: step; }
.guide .steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; background: var(--surface-2); border-radius: 12px; font-size: 16px; line-height: 1.55; }
.guide .steps li::before { counter-increment: step; content: counter(step); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--page); font-family: var(--font-mono); font-size: 12px; }
.guide .rules { list-style: none; margin: 0; padding: 0; display: grid; }
.guide .rules li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.55; padding: 9px 0; border-top: 1px solid var(--line); }
.guide .rules li:first-child { border-top: 0; padding-top: 0; }
.guide .rules li::before { content: '\2715'; color: var(--danger); font-weight: 700; text-align: center; }
.guide .rules.handoff li::before { content: '\2192'; color: var(--warn); }
.guide .ph { font-family: var(--font-ui); font-size: 12px; background: var(--hover); color: var(--ink); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.guide .sound { display: grid; }
.guide .sound .row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.guide .sound .row:first-child { border-top: 0; padding-top: 0; }
.guide .sound .row b { font-size: 16px; }
.guide .sound .row .lvl { color: var(--ink); font-weight: 600; font-size: 14px; }
.guide .sound .row .d { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.guide .notewrap { border: 1.5px dashed var(--line-2); border-radius: 12px; padding: 12px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 16px; }
.guide .notewrap .ask { font-weight: 600; }
.guide .notewrap.open { border-style: solid; border-color: var(--line2); display: grid; gap: 10px; }
.guide .notewrap textarea { width: 100%; font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 10px; padding: 10px 12px; resize: vertical; }
.guide .notewrap textarea:focus { border-color: var(--ink); outline: none; box-shadow: var(--focus); }
.guide .histbox summary { cursor: pointer; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.guide .histbox .hist { margin-top: 10px; }
/* step 4: rehearse - two ways, the earlier exchange, the reply box */
.guide .modes .choice .t { font-size: 16px; }
.guide .setup { display: grid; gap: 12px; padding: 16px 18px; border: 1.5px dashed var(--line-2); border-radius: 14px; }
.guide .setup .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.guide .setup .row .k { font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); width: 88px; flex: none; }
.guide .setup .btn[aria-pressed="true"] { border-color: var(--ink); background: var(--hover); color: var(--ink); }
.guide .setup select { font: inherit; font-size: 14px; padding: 6px 30px 6px 10px; border: 1.5px solid var(--line-2); border-radius: 10px; background-color: var(--surface); color: var(--ink); }
.guide .setup textarea.big { font-size: 16px; }
.guide .modeline { font-size: 14px; color: var(--muted); }
.guide .divider { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 4px 0; align-self: stretch; max-width: 100%; }
.guide .divider::before, .guide .divider::after { content: ''; flex: 1; border-top: 1px dashed var(--line-2); }
.guide .bubble.earlier { opacity: .72; }
.guide .bubble .marker { display: block; margin-top: 6px; font-size: 12px; color: var(--warn); font-weight: 500; }
.guide .replybox { border: 2px solid var(--line2); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; background: var(--surface); }
.guide .replybox textarea { width: 100%; font: inherit; font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 10px; padding: 10px 12px; resize: vertical; }
.guide .replybox textarea:focus { border-color: var(--ink); outline: none; box-shadow: var(--focus); }
@media (max-width: 860px) { .guide .convo .line { max-width: 94%; } .guide .sound .row { grid-template-columns: 1fr; } .guide .profile .pname { font-size: 20px; } }
.stylewords .stylerow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 14px; padding: 6px 0; align-items: baseline; }
.stylewords .stylerow .name small { display: block; color: var(--muted); font-size: 12px; }
.guide .people { display: flex; flex-wrap: wrap; gap: 8px; }
.guide .people button { display: flex; gap: 8px; align-items: center; padding: 8px 14px 8px 8px; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--surface); font: inherit; font-size: 16px; cursor: pointer; color: var(--ink); }
.guide .people button[aria-pressed="true"] { border-color: var(--ink); background: var(--hover); }
.guide .people .avatar { width: 28px; height: 28px; font-size: 12px; }
.guide .person.pick { grid-template-columns: auto 56px minmax(0, 1fr); }
.guide .person.pick.off { opacity: .55; }
.guide .person.pick .keep { display: grid; gap: 4px; justify-items: center; font-size: 12px; color: var(--muted); align-content: start; cursor: pointer; }
.guide .person.pick .keep input { width: 22px; height: 22px; margin: 4px 0 0; }
.guide .why { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.guide .ownbox { display: grid; gap: 12px; padding: 16px; border: 1px dashed var(--line-2); border-radius: 14px; }
.guide .ownbox > h3 { font-size: 16px; font-weight: 600; }
.guide .scen button.more { border-style: dashed; color: var(--ink); }
.guide .mt0 { margin-top: 0; }
.guide .rcard.changed { animation: guideFlash 2.5s ease-out; }
.guide .rcard { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); font-size: 14px; }
.guide .rcard .rh { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.guide .rcard ul { margin: 0 0 8px; padding-left: 18px; }
.guide .rules { margin: 0; padding-left: 18px; font-size: 14px; }
.planrow { padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.planrow:first-of-type { border-top: 0; }
.guide .summary .row .k { color: var(--muted); font-size: 14px; }
@media (max-width: 860px) {
  .guide { grid-template-columns: 1fr; }
  .guide .rail { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
  .guide .rail ol { display: flex; flex-wrap: wrap; gap: 6px; }
  .guide .rail li button { padding: 6px 10px 6px 6px; font-size: 14px; }
  .guide .rail li button small, .guide .rail .later { display: none; }
  .guide .main { padding: 14px; }
  .guide .gcard { padding: 18px 16px; }
  .guide .q { font-size: 20px; }
  .guide .choices, .guide .choices.two { grid-template-columns: 1fr; }
  .guide .summary .row { grid-template-columns: 1fr; gap: 4px; }
  .guide .thread .bubble { max-width: 94%; }
}

/* ---------- the sandbox: try an agent or a campaign as the lead ---------- */
.sandbox { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .sandbox { grid-template-columns: 1fr; } }
.sb-setup .sb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .sb-setup .sb-grid { grid-template-columns: 1fr; } }
.sb-setup section { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface-2); min-width: 0; }
.sb-setup section .section-title { margin-top: 0; }
.sb-setup .stack > * + * { margin-top: 10px; }
.sb-device { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1); overflow: hidden; min-width: 0; }
.sb-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.sb-head .spacer { flex: 1; }
.sb-head .name { font-weight: 600; font-size: 14px; }
.sb-body { padding: 14px 16px; }
.sb-device .thread.stage { min-height: 320px; max-height: 62vh; }
.sb-tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.sb-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 12px; color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 500; font-family: inherit; white-space: nowrap; }
.sb-tabs button:hover { color: var(--ink); }
.sb-tabs button.active { color: var(--ink); border-bottom-color: var(--ink); }
.sb-tabs button .count { margin-left: 4px; color: var(--ink2); font-family: var(--font-mono); font-size: 12px; }
.sb-tabs button .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-left: 6px; vertical-align: middle; animation: pulse 1.6s infinite; }
.sb-callbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--live-soft); border: 1px solid color-mix(in srgb, var(--live) 40%, transparent); margin-bottom: 10px; flex-wrap: wrap; font-size: 14px; }
.sb-callbar.ringing { animation: pulse 1.6s infinite; }
.sb-callbar .spacer { flex: 1; }
.sb-log { display: grid; gap: 6px; max-height: 70vh; overflow-y: auto; padding-right: 2px; }
.sb-log .row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; line-height: 1.45; }
.sb-log .row > div { min-width: 0; overflow-wrap: anywhere; }
.sb-log .row .when { font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding-top: 2px; }
.sb-log .row .kind { display: block; font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
.sb-log .row .why { color: var(--muted); font-size: 12px; margin-top: 3px; }
.sb-log .row .did { margin: 4px 0 0; padding-left: 16px; font-size: 12px; }
.sb-log .row .did li.skip { color: var(--ink2); text-decoration: line-through; }
.sb-log .row .turnacts { display: block; margin-top: 4px; font-size: 12px; }
.sb-log .row.step { background: var(--surface-2); }
.sb-log .row.agent { border-color: var(--ink2); }
.sb-log .row.person { background: var(--surface-3); }
.sb-log .row.event { border-style: dashed; border-color: var(--warn); }
.sb-log .row.ring { border-color: var(--live); background: var(--live-soft); }
.sb-log .row.end { background: var(--live-soft); font-weight: 600; }
.sb-log .row.skipped, .sb-log .row.silent, .sb-log .row.note { color: var(--ink-2); border-style: dashed; }
.sb-rule { font-size: 14px; line-height: 1.5; }
.sb-rule .lbl { display: block; font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.bubble.call { border-left: 3px solid var(--live); }
.bubble.earlier { opacity: .6; }
.sb-coachbox { border: 2px solid var(--line2); border-radius: 12px; padding: 10px 12px; background: var(--surface); display: grid; gap: 8px; align-self: stretch; max-width: 100%; font-size: 14px; }
.sb-coachbox .lbl { font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sb-coachbox textarea { width: 100%; }

/* the sandbox's phone picker (real test calls) */
.sb-phones { display: grid; gap: 6px; }
.sb-phones label.check { margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.sb-phones label.check.on { border-color: var(--ink); background: var(--hover); }
.sb-phones input[type="tel"] { width: 100%; margin-top: 6px; }
.sb-callbar.real { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }


/* the transcript log: every rehearsed conversation, read again and coached */
.tx-filters { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end; }
.tx-filters .field { margin-bottom: 0; }
.tx-pad { padding: 18px 20px; }
.tx-facts { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tx-facts .row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; align-items: baseline; }
.tx-facts .row:first-child { border-top: 0; }
.tx-facts .row .k { color: var(--muted); font-size: 12px; }
.tx-note { border: 2px solid var(--line2); border-radius: 12px; padding: 10px 12px; background: var(--surface); display: grid; gap: 8px; align-self: stretch; max-width: 100%; font-size: 14px; }
.tx-note .lbl { display: block; font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tx-note textarea { width: 100%; }
.tx-note ul { margin: 4px 0 0; padding-left: 18px; }
.tx-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tx-thread .subj { font-weight: 600; margin-bottom: 2px; }


/* ---------- small labels, focus and tips (campaign page rework spec 4.3, 4.4) ----------
   Small labels and eyebrows are warm grey; the item you are on is ink (the sidebar item adds the
   accent bar); callouts are a hairline; focus is the ink ring. A colour a rule also states on its own
   line lives there only (phase 1 plan R18): this block keeps only the selectors it is the one home of. */
h1, h2, h3, h4 { color: var(--ink); }
.lbl, .ghint { color: var(--ink2); }
.nav a.active svg { opacity: 1; }
.notebox { border-color: var(--line2); }

/* the "i" and its tip: warm grey and ink on the surface, a hairline edge */
.info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--ink2); color: var(--ink2); background: transparent; font: 700 12px/1 var(--font-ui); font-style: normal;
  text-transform: none; letter-spacing: 0; vertical-align: middle; margin-left: 4px; cursor: help; text-shadow: none;
  transition: background .12s, color .12s; user-select: none; position: relative; top: -1px; }
.info:hover, .info:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--page); outline: none; }
h1 .info, h2 .info, .guide .q .info { width: 17px; height: 17px; font-size: 12px; margin-left: 8px; }
.guide .q .info { width: 20px; height: 20px; font-size: 12px; top: -3px; }
.tip { position: fixed; z-index: 100; max-width: 460px; padding: 9px 12px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow-2); font: 400 14px/1.5 var(--font-ui);
  letter-spacing: 0; text-transform: none; text-shadow: none; pointer-events: none; white-space: pre-line; animation: rise .12s ease-out; }
.tip[hidden] { display: none; }

/* Workflows: the rule builder (views/workflows.js) */
.wf-when { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 0 18px; align-items: start; }
.wf-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; }
.wf-steps { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.wf-step { display: grid; grid-template-columns: 24px minmax(200px, 240px) 1fr auto; gap: 6px 10px; align-items: start;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.wf-step .n { font-size: 12px; color: var(--muted); line-height: 34px; text-align: right; }
.wf-step .wf-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 12px; }
.wf-step .field, .wf-params .field, .wf-when .field { margin-bottom: 6px; }
.wf-step .acts { line-height: 34px; }
.wf-lines .planrow { padding: 3px 0; }
.wf-lines .planrow.sub { color: var(--muted); }
.wf-result li .body { flex: 1; }
@media (max-width: 900px) { .wf-when, .wf-step { grid-template-columns: 1fr; } .wf-step .n { text-align: left; line-height: 1.4; } }

/* ---------- the rule cards (.rcard): their errors, head, description and actions ---------- */
.guide .rcard .err { padding: 2px 0 2px 10px; border-left: 3px solid var(--danger); color: var(--danger); font-size: 14px; line-height: 1.45; }
.guide .rcard .rh { flex-wrap: wrap; }
.guide .rcard .rdesc { margin-bottom: 6px; color: var(--muted); font-size: 14px; }
.guide .rcard .racts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.guide .rcard .racts .linkbtn.danger { color: var(--danger); }
.guide .notice.danger ul { margin: 4px 0 0; padding-left: 18px; }


/* ==== campaign page + Build it in GoHighLevel tab (campaigns.js / campaign_build.js) ==== */
/* ---- campaigns.js: the campaign page ---- */
.camp-agentrow { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }  /* Agent line: name + Change / Attach */
.camp-ends input[type="date"] { max-width: 190px; }
.tabs button .badge { margin-left: 6px; vertical-align: middle; }   /* the build-state pill on the tab */

/* the plan, one <details class="planstep"> per day */
.planstep { border-top: 1px solid var(--line); padding: 8px 0; }
.planstep:first-of-type { border-top: 0; }
.planstep > summary { cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.planstep > summary::-webkit-details-marker { display: none; }
.planstep > summary::before { content: '▸'; color: var(--muted); font-size: 12px; width: 10px; flex: none; }
.planstep[open] > summary::before { content: '▾'; }
.planstep > summary .sub, .planstep > summary .badge { font-weight: 500; }
.planstep-body { padding: 8px 0 4px 18px; display: grid; gap: 6px; font-size: 14px; }
.msgtext { white-space: pre-wrap; line-height: 1.5; font-size: 14px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere; }
.planstep-rxs { margin-top: 4px; }
.planstep-rxs .section-title { margin: 6px 0 4px; }
.planstep-rx { font-size: 14px; padding: 3px 0; color: var(--ink-2); }

/* ---- campaign_build.js: Build it in GoHighLevel ---- */
.build-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); margin-bottom: 14px; font-size: 14px; }
.build-banner .spacer { flex: 1; }
.build-problems { margin: 6px 0 0; padding-left: 18px; }
.build-intro { font-size: 14px; line-height: 1.55; margin: 0 0 16px; max-width: 760px; }
.build-wf { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--surface); margin-top: 16px; }
.build-wfhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.build-wfhead h3 { font-size: 16px; }
.build-blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.build-block { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); }
.build-block.done { opacity: .62; }
.build-block.done .build-bhead > div > b { text-decoration: line-through; }
.build-bhead { display: flex; align-items: flex-start; gap: 10px; }
.build-bhead > div { flex: 1; min-width: 0; font-size: 14px; }
.build-bhead .check { margin: 0; flex: none; }
.build-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--font-mono); background: var(--surface-3); color: var(--muted); }
.build-block.trigger .build-n { background: var(--hover); color: var(--ink); }
.build-note { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.build-fields { display: grid; gap: 6px; margin: 10px 0 0 34px; }
.build-field { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 14px; }
.build-field .build-label { color: var(--muted); padding-top: 4px; }
.build-field .build-label .sub { display: block; }
.build-field .build-value { min-width: 0; }
.build-field code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 4px 8px; }
.build-pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 var(--font-mono); padding: 8px 10px; background: var(--surface-3); border-radius: 8px; max-height: 320px; overflow: auto; }
.build-settings { margin-top: 12px; }
.build-settings .kv { font-size: 14px; }
.build-shared { margin-top: 16px; border: 1px dashed var(--line-2); border-radius: 14px; padding: 12px 16px; }
.build-shared > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.build-shared .build-wf { background: var(--surface-2); }
.build-foot { margin-top: 16px; font-size: 14px; color: var(--muted); line-height: 1.55; display: grid; gap: 6px; }
/* the AI-builder route: the steps, one card per workflow (prompt + checks), the block list folded under */
.build-ai { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--surface); }
.build-steps { margin: 6px 0 12px; padding-left: 22px; font-size: 14px; line-height: 1.6; display: grid; gap: 4px; }
.build-ai-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); margin-top: 10px; }
.build-ai-card .build-wfhead { margin-bottom: 6px; }
.build-ai-card .spacer { flex: 1; }
.build-prompt > summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.build-prompt .build-pre { margin-top: 8px; max-height: 260px; }
.build-checkhead { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.build-checkhead .section-title { margin: 0; }
.build-checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.build-check { font-size: 14px; line-height: 1.5; }
.build-check .check { margin: 0; align-items: flex-start; }
.build-check code { overflow-wrap: anywhere; }
.build-check.done { opacity: .62; }
.build-check.done b { text-decoration: line-through; }
.build-byhand { margin-top: 16px; border: 1px dashed var(--line-2); border-radius: 14px; padding: 12px 16px; }
.build-byhand > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
@media (max-width: 720px) { .build-field { grid-template-columns: 1fr; } .build-fields { margin-left: 0; } }

/* ---------- Campaigns → Campaign agents (views/campaign_agents.js): the card form, Try a reply ---------- */
.cagent { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.cagent .form { display: grid; gap: 12px; min-width: 0; }
.cagent .form .card { display: grid; gap: 8px; }
.cagent .side { display: grid; gap: 12px; position: sticky; top: 16px; }
.cagent .tone { display: grid; grid-template-columns: 110px minmax(0, 1fr) 130px; gap: 8px 12px; align-items: center; font-size: 14px; }
.cagent .tone .k { color: var(--ink2); font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.cagent .notices { display: grid; gap: 6px; }
.cagent .notices .nrow { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(200px, 2fr) auto auto; gap: 6px; align-items: center; }
.cagent .notices .nrow .check { margin: 0; white-space: nowrap; }
.cagent .trybox { display: grid; gap: 8px; }
.cagent .reply { padding: 10px 12px; border: 1px solid var(--line2); border-radius: 12px; background: var(--surface-2); font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) { .cagent { grid-template-columns: 1fr; } .cagent .side { position: static; } .cagent .notices .nrow { grid-template-columns: 1fr; } }

/* the @ picker: GoHighLevel fields dropped into a message (views/campaign_design.js) */
.atpick { position: fixed; z-index: 60; min-width: 240px; max-width: 360px; max-height: 250px; overflow: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-1); padding: 4px; }
.atpick div { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink); }
.atpick div.on, .atpick div:hover { background: var(--hover); color: var(--ink); }
.atpick .m { margin-left: auto; color: var(--muted); font-family: var(--font-ui); font-size: 12px; }

/* ---------- the campaign page as a storyboard (views/campaign_design.js), spec 2026-09-30 ----------
   Its --st-* names point at the app tokens (campaign page rework spec 4.1), so the page follows the
   app's Light and Dark themes; the rework's later phases rebuild the page section by section. */
.storypage {
  --st-bg: var(--page); --st-surface: var(--surface); --st-ink: var(--ink); --st-ink2: var(--ink2); --st-line: var(--line);
  --st-accent: var(--accent); --st-accent-soft: var(--hover); --st-text: var(--text); --st-mail: var(--mail); --st-call: var(--call);
  --st-tint: var(--wait-soft); --st-tint-line: var(--wait); --st-primary: var(--primary); --st-primary-ink: var(--primary-ink);
  --st-ok: var(--ok); --st-no: var(--no); --st-serif: var(--font-serif);
}
/* the page root keeps .guide (the rule cards and the coach box share its styles)
   but is not the framed two-column guide box */
.guide.story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; border: 0; box-shadow: none; background: transparent; min-height: 0; overflow: visible; border-radius: 0; }
.story { color: var(--st-ink); font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; min-width: 0; }
.story h1, .story h2 { font-family: var(--st-serif); font-weight: 700; margin: 0; color: var(--st-ink); }
.story h1 { font-size: 28px; letter-spacing: -.01em; }
.story h2 { font-size: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.story h2 .n { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--st-accent); }
.story h2 .sub { font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--st-ink2); }
.story .help { color: var(--st-ink2); font-size: 12px; }
.story .card { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 14px; box-shadow: none; padding: 12px 14px; min-width: 0; display: grid; gap: 6px; align-content: start; }
.story .card + .card { margin-top: 0; }
.story .btn { border-radius: 999px; }
.story .btn.primary, .story .btn.inv { background: var(--st-primary); color: var(--st-primary-ink); border-color: var(--st-primary); }
.story .btn.primary:hover, .story .btn.inv:hover { background: var(--st-primary); filter: brightness(1.15); }
.story .btn.secondary { background: var(--st-surface); color: var(--st-ink); border-color: var(--st-line); }
.story .btn.secondary:hover { border-color: var(--st-ink2); background: var(--st-surface); }
.story .ok { color: var(--st-ok); font-weight: 600; } .story .no { color: var(--st-no); font-weight: 600; }
@keyframes storyFlash { from { box-shadow: 0 0 0 3px var(--st-tint-line); } to { box-shadow: 0 0 0 0 transparent; } }
.story .changed { animation: storyFlash 2.6s ease-out; }
/* the header row: its icon buttons and its status line */
.story .hdr { display: flex; align-items: center; gap: 12px; min-height: 40px; flex-wrap: wrap; }
.story .iconbtn { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--st-ink2); cursor: pointer; padding: 0; }
.story .iconbtn:hover { color: var(--st-ink); background: var(--st-accent-soft); }
.story .hdr .status { flex: 1 1 120px; min-width: 0; }
.story .spacer { flex: 1; }
/* the 2 x 2 settings tiles and the first-run card */
.story .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: none; }
.story .tiles .card { padding: 10px 12px; }
.story .card.first { max-width: 760px; width: 100%; margin: 40px auto; justify-self: center; }
/* key-value rows and the small controls that sit in them */
.story .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; font-size: 12px; align-items: baseline; }
.story .kv .k { color: var(--st-ink2); white-space: nowrap; }
.story .kv .v { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; overflow-wrap: anywhere; }
.story .pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--st-line); border-radius: 999px; padding: 1px 10px; font: inherit; font-size: 12px; line-height: 1.5; background: var(--st-surface); color: var(--st-ink); cursor: pointer; white-space: nowrap; }
.story .pill[aria-pressed="true"], .story .pill.on { border-color: var(--st-ink); background: var(--st-accent-soft); color: var(--st-ink); }
.story .pill.static { cursor: default; color: var(--st-ink2); }
.story .seg { display: inline-flex; gap: 2px; background: var(--st-bg); border: 1px solid var(--st-line); border-radius: 999px; padding: 2px; }
.story .seg button { border: 1px solid transparent; background: transparent; padding: 2px 10px; border-radius: 999px; color: var(--st-ink2); cursor: pointer; font: inherit; font-size: 12px; font-weight: 500; box-shadow: none; }
.story .seg button:hover { color: var(--st-ink); }
.story .seg button[aria-pressed="true"] { background: var(--st-surface); color: var(--st-ink); font-weight: 600; border-color: var(--st-line); box-shadow: none; }
.story select, .story input[type="text"], .story input[type="number"], .story input[type="date"], .story textarea { background-color: var(--st-surface); color: var(--st-ink); border: 1px solid var(--st-line); border-radius: 8px; font-size: 12px; }
.story select:focus, .story input:focus, .story textarea:focus { outline: none; border-color: var(--st-ink); box-shadow: var(--focus); }
.story select.inline, .story input.inline { min-height: 26px; padding: 2px 8px; width: auto; font-size: 12px; }
.story select.inline { padding-right: 24px; }
.story label.inline { display: inline-flex; align-items: center; gap: 6px; color: var(--st-ink2); font-size: 12px; }
.story .prompt { width: 100%; font: inherit; font-size: 14px; line-height: 1.5; color: var(--st-ink); background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 10px; padding: 10px 12px; resize: vertical; }
.story .linkbtn { color: var(--link); }
.story .linkbtn[data-act="undo"] { color: var(--accent); text-decoration: none; }
.story .filters { display: grid; gap: 6px; }
.story details.more > summary { cursor: pointer; color: var(--st-ink); font-weight: 600; font-size: 12px; list-style: none; text-decoration: underline; text-underline-offset: 2px; }
.story details.more > summary::-webkit-details-marker { display: none; }
.story details.more[open] > summary { margin-bottom: 6px; }
.story details.more > *:not(summary) { margin-top: 6px; }
.story .ready { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.story .ready li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; }
.story .ready li.ok::before { content: '\2713'; color: var(--st-ok); font-weight: 700; }
.story .ready li.no::before { content: '\2715'; color: var(--st-no); font-weight: 700; }
.story .ready li.no span:first-of-type { color: var(--st-no); }
.story .notice ul { margin: 4px 0 0 18px; padding: 0; }
.story .actrow.foot { margin-top: 2px; }
@media (max-width: 720px) { .story .tiles { grid-template-columns: 1fr; } .story .kv { grid-template-columns: 1fr; gap: 2px 0; } .story .hdr .status { white-space: normal; max-width: none; } }
.story .tiles .pill { white-space: nowrap; }
/* section 3: the assistant panel (one decision; the abilities as segments) */
.story .panel .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.story .panel .kv { gap: 5px 12px; }
.story .panel .reply { padding: 8px 10px; border: 1px solid var(--st-line); border-radius: 12px 12px 12px 3px; background: var(--st-bg); font-size: 12px; line-height: 1.5; }
.story .gap { flex: 0 0 34px; display: grid; align-content: start; justify-items: center; padding-top: 100px; font-size: 12px; color: var(--st-ink2); text-align: center; line-height: 1.2; }
.story .gap span::before { content: ''; display: block; height: 1px; background: var(--st-line); margin: 0 0 4px; }
.story details.sending > summary u { text-decoration: underline; text-underline-offset: 2px; color: var(--st-ink); }
.story details.sending > summary { color: var(--st-ink2); font-weight: 500; }
/* the Sent from and Vary rows inside the sending fold keep the labelled-row shape */
.story .mrow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; align-items: start; font-size: 12px; }
.story .mrow .ml { color: var(--st-ink2); }
.story .mrow .mv { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 0; }
.story .mrow .sub { font-size: 12px; color: var(--st-ink2); }
.story .mrow .wrap { display: flex; flex-wrap: wrap; gap: 4px 12px; flex: 1 1 100%; }
.story .rcard { background: var(--st-surface); border-color: var(--st-line); }
/* section 7: the coach; the last exchange as rows, the composer as a pill */
.story .composer { display: flex; align-items: center; gap: 6px; border: 1px solid var(--st-line); border-radius: 999px; background: var(--st-bg); padding: 4px 4px 4px 12px; }
.story .composer textarea { flex: 1; border: 0; background: transparent; font: inherit; font-size: 12px; resize: none; min-height: 24px; height: 24px; line-height: 24px; color: var(--st-ink); padding: 0; border-radius: 0; min-width: 0; }
.story .composer textarea:focus { outline: none; box-shadow: none; }
.story .composer .btn.go { border-color: var(--st-ink); color: var(--st-ink); }
.story .composer .pill.static { font-size: 12px; flex: none; }
.story .ex { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-top: 1px solid var(--st-line); font-size: 12px; }
.story .ex i { font-style: normal; font-weight: 600; color: var(--st-ink2); }
.story .ex .linkbtn { font-weight: 600; }
.story .chipsrow .btn.xs { border-radius: 999px; }
/* the settings tiles are ~295px wide: the label column is bounded so the value column keeps room for a pill or a control */
.story .tiles .kv { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.story .tiles .kv .k { white-space: normal; line-height: 1.3; }
/* the tiles column grows with the window (at 1900 wide the tiles are ~390px and their rows fit one line); a select never grows past its cell */
.story select { max-width: 100%; }
@media (max-width: 720px) { .story .tiles .kv { grid-template-columns: 1fr; gap: 2px 0; } .story .hdr h1 { font-size: 20px; overflow-wrap: anywhere; } }
/* finish-review fixes (2026-09-30): the late row rules never beat the 1100 break; a segment never breaks mid-word;
   a control inside a sentence wraps as text; the checklist marks are drawn */
.story .seg { flex-wrap: nowrap; } .story .seg button { white-space: nowrap; }
.story .phrase { display: inline; line-height: 2; }
.story .phrase .seg { vertical-align: middle; }
.story .tiles .card { gap: 4px; } .story .tiles .kv { gap: 3px 10px; }
.story .ready li.ok::before, .story .ready li.no::before { content: ''; width: 12px; height: 12px; align-self: center; background-color: var(--st-ok); -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.story .ready li.no::before { background-color: var(--st-no); -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.story .phrase .seg button { line-height: 1.5; }
/* code-review fixes (2026-09-30): "no end date" moves as one phrase */
.story .phrase .help { white-space: nowrap; }
/* second verdict round (2026-09-30): below 1500px the settings tiles stack label over value (the value gets the
   whole width: no clipped segment, no three-line rows, shorter tiles) */
.story .kv .wide { grid-column: 1 / -1; }
.story .kv .k.wide { margin-top: 2px; }
.story .kv .v.wide { margin-bottom: 2px; }
.story .tiles .seg button { padding: 2px 8px; font-size: 12px; }
.story .tiles .card { padding: 9px 12px; }

/* ---- phase 2: the campaign page frame, sections, Edit windows and toasts (campaign rework spec 5, 8) ----
   Tokens and the six type sizes only; the section number reuses .story h2 .n (the accent), the main
   button reuses .btn (the one solid button), so the theme test's accent and solid-button lists hold. */
main.page.cpage { max-width: none; padding: 22px 32px 60px; }
@media (max-width: 900px) { main.page.cpage { padding-left: 16px; padding-right: 16px; } }
.story .cp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.story .cp-w4 { grid-column: span 4; }
.story .cp-w5 { grid-column: span 5; }
.story .cp-w6 { grid-column: span 6; }
.story .cp-w7 { grid-column: span 7; }
.story .cp-w8 { grid-column: span 8; }
.story .cp-w12 { grid-column: span 12; }
.story .cp-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.story .cp-stack > .cp-sec { flex: 1 1 auto; }
.story .cp-sec { display: flex; flex-direction: column; min-width: 0; outline: none; }
.story .cp-sec > .card { flex: 1 1 auto; }
.story .cp-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.story .cp-head h2 { min-width: 0; }
.story .cp-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin-top: 4px; font-size: 14px; align-items: baseline; }
.story .cp-rows .l { color: var(--ink2); font-weight: 500; white-space: nowrap; }
.story .cp-rows .v { color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .story .cp-grid > * { grid-column: 1 / -1; } }
/* the Edit windows (spec 8): a fixed head and foot, only the body scrolls; a confirm opens over the window */
.modal-back.l2 { z-index: 55; }
.modal.win { display: flex; flex-direction: column; padding: 0; overflow: hidden; max-height: 90vh; }
.modal.win .mhead { margin-bottom: 0; padding: 18px 22px 12px; border-bottom: 1px solid var(--line); flex-wrap: nowrap; align-items: flex-start; }
.modal.win .mtitle { min-width: 0; }
.modal.win .msub { margin: 2px 0 0; color: var(--ink2); font-size: 14px; }
.modal.win .mbody { flex: 1 1 auto; overflow-y: auto; padding: 16px 22px; }
.modal.win .mfoot { margin-top: 0; padding: 12px 22px; border-top: 1px solid var(--line); align-items: center; }
.modal.win .mfoot .spacer { flex: 1; }
.modal.w560 { width: min(560px, 96vw); }
.modal.w640 { width: min(640px, 96vw); }
.modal.w760 { width: min(760px, 96vw); }
.modal.w960 { width: min(960px, 96vw); }
.modal.w1100 { width: min(1100px, 96vw); }
.sw .cp-f { display: grid; gap: 6px; margin-bottom: 14px; }
.sw .cp-f > span:first-child { color: var(--ink); font-size: 14px; font-weight: 600; }
.sw textarea, .sw input[type="text"] { width: 100%; font: inherit; font-size: 14px; }
.sw .cp-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.sw .cp-ro { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); color: var(--ink2); font-size: 14px; }
.sw .help { color: var(--ink2); font-size: 12px; }
@media (max-width: 700px) { .sw .cp-2col { grid-template-columns: 1fr; } }
/* a toast's action (Undo) is underlined in the toast's own colour: the accent on the Dark toast is 1.39:1 */
.toast .tact { margin-left: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
/* phase 2, the header (spec 6.3): the name is a 28px serif button, the stage chip, the save line; the main
   button with its link under it, the buttons beside it, and ⋯ */
.story .cp-top { display: grid; gap: 8px; }
.story .cp-hdr { display: flex; align-items: flex-start; gap: 12px 16px; flex-wrap: wrap; min-height: 40px; }
.story .cp-ttl { display: grid; gap: 4px; flex: 1 1 320px; min-width: 0; }
.story .cp-tline { display: flex; align-items: center; gap: 12px; min-width: 0; }
.story .cp-name { min-width: 0; }
.story .cp-namebtn { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: text; }
.story .cp-namebtn .cp-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story .cp-namebtn svg { flex: none; color: var(--ink2); }
.story .cp-namebox { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.story .cp-rename { width: 100%; max-width: 640px; min-width: 0; padding: 2px 8px; border: 1px solid var(--line2); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--font-serif); font-size: 28px; font-weight: 700; line-height: 1.2; }
.story .cp-chip { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.story .cp-chip .dot, .cp-pop .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink2); flex: none; }
.story .cp-chip[data-dot="wait"] .dot, .cp-pop .dot[data-dot="wait"] { background: var(--wait); }
.story .cp-chip[data-dot="ok"] .dot, .cp-pop .dot[data-dot="ok"] { background: var(--ok); }
.story .cp-save { min-height: 18px; color: var(--ink2); font-size: 12px; }
.story .cp-acts { display: flex; align-items: flex-start; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.story .cp-go { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.story .cp-need { font-size: 12px; }
.story .cp-more { min-width: 40px; font-size: 16px; line-height: 1; }
.story .cp-lines { display: grid; gap: 4px; }
.story .cp-lines:empty { display: none; }
.story .cp-line { color: var(--ink2); font-size: 12px; }
/* the chip's stage list and the ⋯ menu float over the page (under the windows) */
.cp-pop { position: fixed; z-index: 45; min-width: 260px; max-width: min(380px, 92vw); padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-modal); color: var(--ink); font-size: 14px; }
.cp-pop .cp-pop-h { padding: 4px 8px 8px; color: var(--ink2); font-size: 12px; font-weight: 600; }
.cp-pop ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cp-pop li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 6px 8px; border-radius: var(--radius-sm); }
.cp-pop li.on { background: var(--hover); }
.cp-pop li .now { color: var(--ink2); font-size: 12px; }
.cp-pop li .sd { grid-column: 2 / -1; color: var(--ink2); font-size: 12px; }
.cp-menu button { display: grid; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.cp-menu button:hover, .cp-menu button:focus-visible { background: var(--hover); }
.cp-menu button .sub { color: var(--ink2); font-size: 12px; }
.cp-menu button.danger { color: var(--no); }
/* the stage confirms (spec 6.4) */
.cp-cline { margin: 0 0 8px; font-size: 14px; }
.cp-clist { margin: 0 0 8px 18px; padding: 0; font-size: 14px; }
.cp-gate ul { margin: 8px 0 0 18px; padding: 0; color: var(--no); font-size: 14px; }
/* phase 2 verify P1: a question's buttons wrap inside its window rather than run past its edge (a phone;
   three answers also open 560px wide, lib/window_core.js choiceLayout) */
.modal.choice .mfoot { flex-wrap: wrap; }
/* phase 2 verify P2: a header link ("Create the Assistant First ↓", "N to Fix ↓") lands the section 16px
   below the sticky 64px top bar, not under it */
.story .cp-sec { scroll-margin-top: 80px; }

/* ---- phase 3: sections 1, 2, 3 and 6 at a glance and in their windows (campaign rework spec 9.1-9.3, 9.6) ----
   Tokens and the six type sizes only; the section numbers keep .story h2 .n (the accent) and every window keeps
   its footer's Apply as its one solid button, so the theme test's accent and solid-button lists hold. */
.sw .cp-hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0 14px; }
.sw .cp-g { margin: 0 0 10px; color: var(--ink); font-size: 16px; font-weight: 600; }
.sw .cp-list { display: grid; gap: 4px; margin: 0; padding: 0 0 0 18px; color: var(--ink); font-size: 14px; }
.sw .cp-q { display: grid; gap: 4px; margin-top: 6px; }
.sw .cp-q > span { color: var(--ink); font-size: 14px; }
.sw .cp-rb { display: grid; gap: 8px; justify-items: start; }
.sw .cp-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink); font-size: 14px; }
.sw .cp-busy { color: var(--ink2); font-size: 14px; }
.sw .cp-err { color: var(--no); font-size: 14px; }
.sw [hidden] { display: none; }
.story .cp-banner { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 14px; }
.story .cp-banner .spacer { flex: 1; }
/* phase 3, section 2: the radio groups and switches of every section window, filter chips, the drill-in action */
.sw .cp-seg { flex-wrap: wrap; justify-self: start; }
.sw .cp-seg button { font-size: 14px; }
.sw .cp-seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.sw select { max-width: 100%; font-size: 14px; }
.sw .cp-aside { color: var(--ink2); font-size: 12px; font-weight: 400; }
.sw .cp-scope, .story .cp-scope { display: inline-block; margin-left: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink2); font-size: 12px; font-weight: 500; line-height: 18px; vertical-align: middle; }
.sw .cp-rorow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sw .cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sw .cp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--line2); border-radius: 999px;
  background: var(--sunken); color: var(--ink); font-size: 14px; }
.sw .cp-addrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sw .cp-addrow input[type="text"] { width: auto; flex: 1 1 140px; min-width: 0; }
.sw .cp-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sw .cp-action .cp-g { margin: 0; }
/* phase 3, section 3: the source line and buttons at a glance; the option cards, the day pills and the settings rows */
.story .cp-src { margin-top: 6px; color: var(--ink); font-size: 14px; font-weight: 600; }
.story .cp-src.bad { color: var(--no); }
.story .cp-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sw .cp-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.sw .cp-opt { display: grid; gap: 6px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); cursor: pointer; }
.sw .cp-opt.on { border-color: var(--ink); background: var(--hover); }
.sw .cp-opt input[type="radio"] { justify-self: start; margin: 0; }
.sw .cp-ot { color: var(--ink); font-size: 14px; font-weight: 600; }
.sw .cp-group { margin-bottom: 16px; }
.sw .cp-box { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); }
.sw .cp-set { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 10px 16px; align-items: start; font-size: 14px; }
.sw .cp-set .l { color: var(--ink2); font-weight: 500; }
.sw .cp-set .c { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.sw .cp-inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sw .cp-days { display: flex; flex-wrap: wrap; gap: 6px; }
.sw .cp-day { padding: 2px 10px; border: 1px solid var(--line2); border-radius: 999px; background: var(--surface); color: var(--ink2); font: inherit; font-size: 12px; cursor: pointer; }
.sw .cp-day[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--hover); }
.sw .cp-tone { display: flex; flex-wrap: wrap; gap: 8px; }
.sw .cp-chips input[type="text"] { width: auto; flex: 1 1 160px; min-width: 0; }
.sw .cp-redraft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sw .cp-warn { color: var(--wait); }
.sw .cp-dirty { margin: -4px 0 8px; }
.sw .cp-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; font-size: 14px; }
.sw .cp-rows .l { color: var(--ink2); font-weight: 500; }
.sw .cp-rows .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .sw .cp-opts { grid-template-columns: 1fr; } .sw .cp-set { grid-template-columns: 1fr; } }
/* phase 3, section 6: the rules as rows (words on the left, the control on the right), the account rules read-only */
.story .cp-acct { margin-top: 10px; }
.sw .cp-rule { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.sw .cp-rule:first-of-type { border-top: 0; }
.sw .cp-rk { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.sw .cp-rk b { color: var(--ink); font-size: 14px; font-weight: 600; }
.sw .cp-rc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sw .cp-state { color: var(--ink2); font-size: 14px; }
.sw input[type="date"] { font-size: 14px; }
.sw .cp-rc input.cp-days { width: 4.5em; font-size: 14px; }   /* Stop Before Their Date's day count (item 43) */
/* its field picker sizes to the field (every select is 100% wide): the words, the days, the picker and the on/off switch
   sit on one line in the 760 window instead of three (2026-10-07); a narrow screen still wraps them */
.sw .cp-rc select[data-st="lfield"] { width: auto; }
/* phase 3, P5 (phase 1's 390 check): a long value in a key-value list or a two-column grid wraps instead of pushing the
   page sideways (the Campaign page's How it works list and its workflow webhook row) */
dl.kv dt, dl.kv dd { min-width: 0; }
dl.kv dd { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  dl.kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  dl.kv dd { margin-bottom: 6px; }
  .grid2 > * { min-width: 0; overflow-wrap: anywhere; }
}
/* phase 3 verify: while a window is open the toasts sit at the top of the screen, centred, so an Undo toast never covers
   the window's Cancel and Apply (spec 8); the strip between them lets clicks through to the window's head, a toast stays
   clickable and above the window */
body:has(.modal-back.open) .toasts { top: 8px; bottom: auto; left: 16px; right: 16px; align-items: center; pointer-events: none; }
body:has(.modal-back.open) .toasts .toast { pointer-events: auto; }
/* ---- phase 4: section 4, Message Schedule (campaign rework spec 9.4, 5) ----
   Tokens and the six type sizes only; the day numbers (28px) and the editor's heading (20px) are Fraunces 700 and are
   named in the theme test's TITLES; no accent and no solid-button colour, so its accent and solid-button lists hold. */
.story .cp-sline { min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 14px; }
.story .cp-sched { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px 24px; margin-top: 12px; align-items: start; }
.story .cp-railw { display: grid; gap: 12px; min-width: 0; }
.story .cp-rail { display: grid; min-width: 0; }
/* look fixes 2026-10-06: the day list and the editor drawn as in the campaign page prototype (docs/superpowers/specs/
   2026-09-30-campaign-page-rework-prototype.html, .p4-card .kico .p4-gap .p4-f .seg): every day is a sunken, bordered,
   rounded card, the chosen one white with an ink border; the channel icon is a filled square in the channel colour;
   the editor's labels sit above their fields, under a heading row on a rule */
.story .cp-dcard { display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; gap: 12px; align-items: center; min-height: 68px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--sunken); color: var(--ink); cursor: pointer; outline: none; }
.story .cp-dcard:hover { background: var(--hover); }
.story .cp-dcard[aria-selected="true"] { border: 1.5px solid var(--ink); background: var(--surface); padding: 9.5px 11.5px; }
.story .cp-dcard:focus-visible { box-shadow: var(--focus); }
.story .cp-dday { display: grid; justify-items: center; gap: 3px; line-height: 1; }
.story .cp-dl { color: var(--ink2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.story .cp-dn { font-family: var(--font-serif); font-size: 28px; font-weight: 700; line-height: 1; }
.story .cp-dm { display: grid; gap: 2px; min-width: 0; }
.story .cp-dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.story .cp-dp { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink2); font-size: 12px; line-height: 22px; }
.story .cp-dw { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story .cp-fchip { display: inline-block; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 20px; }
.story .cp-mk { flex: none; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink2); font-size: 12px; font-weight: 600; line-height: 18px; }
.story .cp-bad { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--no); color: var(--on-status); font-size: 12px; font-weight: 700; }
.story .cp-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--text); color: var(--on-status); }
.story .cp-ico[data-kind="email"] { background: var(--mail); }
.story .cp-ico[data-kind="call"] { background: var(--call); }
.story .cp-gap { position: relative; display: flex; align-items: center; height: 26px; padding-left: 48px; color: var(--ink2); font-size: 12px; }
.story .cp-gap::before { content: ""; position: absolute; left: 34px; top: 3px; bottom: 3px; border-left: 1.5px dashed var(--line2); }
.story .cp-add { height: 44px; padding: 0 10px; border: 1.5px dashed var(--line2); border-radius: 12px; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.story .cp-add:hover { background: var(--hover); }
.story .cp-ed { min-width: 0; }
.story .cp-edempty { padding: 24px 0; }
.story .cp-eh { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.story .cp-ehl { display: grid; gap: 2px; min-width: 0; }
.story .cp-et { margin: 0; font-family: var(--font-serif); font-size: 20px; font-weight: 700; line-height: 1.3; }
.story .cp-ectl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.story .cp-step { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.story .cp-sn { min-width: 20px; text-align: center; font-size: 14px; font-weight: 700; }
.story .cp-sq { width: 28px; min-width: 28px; padding: 0; }
.story .cp-chsel { width: auto; font-size: 14px; }
.story .cp-form { display: grid; gap: 18px; }
.story .cp-erow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; }
.story .cp-el { color: var(--ink); font-size: 14px; font-weight: 600; }
.story .cp-ev { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.story .cp-ev > textarea, .story .cp-ev > input[type="text"], .story .cp-ev > select { width: 100%; font: inherit; font-size: 14px; }
.story .cp-ev > textarea, .story .cp-ev > input[type="text"], .story .cp-ev > cp-richbox, .story .cp-ev > .cp-tools, .story .cp-ev > .cp-rlist { max-width: 640px; }
.story .cp-ev > .cp-title { max-width: 360px; }
.story .cp-msg { min-height: 104px; resize: vertical; line-height: 1.5; }
.story .cp-tools { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; width: 100%; }
.story .cp-tools .spacer { flex: 1; }
.story .cp-count { color: var(--ink2); font-size: 12px; }
.story .cp-count.over { color: var(--no); font-weight: 600; }
.story .cp-parts { color: var(--ink2); font-size: 12px; }
.story .cp-warnline { color: var(--wait); font-size: 12px; }
.story .cp-ainote, .story .cp-ro { width: 100%; max-width: 640px; padding: 12px 14px; border: 1px dashed var(--line2); border-radius: 10px; background: var(--sunken); color: var(--ink2); font-size: 14px; }
.story .cp-vers { display: grid; gap: 6px; margin: 0; padding-left: 18px; font-size: 14px; }
/* backlog item 55: the advice for this one message, under its examples (a box and Apply, or the saved line on one line) */
.story .cp-advw { display: grid; gap: 6px; width: 100%; max-width: 640px; }
.story .cp-advl { color: var(--ink); font-size: 14px; font-weight: 600; }
.story .cp-adv { display: flex; align-items: center; gap: 8px 12px; width: 100%; max-width: 640px; min-width: 0; }
.story .cp-advin { flex: 1; min-width: 0; font: inherit; font-size: 14px; }
.story .cp-advt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); font-size: 14px; }
.story .cp-eprobs { display: grid; gap: 4px; margin-bottom: 12px; }
.story .cp-err { color: var(--no); font-size: 14px; }
.story .cp-eacts { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.story .cp-seg { flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--sunken); }
.story .cp-seg button { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink2); }
.story .cp-seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line2); }
.story .cp-seg button:disabled { color: var(--ink2); opacity: .45; cursor: not-allowed; }
/* below 1100px: one column, and the day list becomes a row of day chips above the editor (spec 5) */
@media (max-width: 1100px) {
  .story .cp-sched { grid-template-columns: minmax(0, 1fr); }
  .story .cp-rail { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .story .cp-gap { display: none; }
  .story .cp-dcard { flex: 0 0 auto; grid-template-columns: auto auto; min-height: 0; padding: 6px 10px; }
  .story .cp-dcard[aria-selected="true"] { padding: 5.5px 9.5px; }
  .story .cp-dcard .cp-dm { display: none; }
  .story .cp-dn { font-size: 20px; }
}
@media (max-width: 700px) { .story .cp-sline { max-width: 100%; } }
/* phase 4, Sending Settings (spec 9.4): the channel switches and their question, the numbers with a health dot, the
   rotation's meanings, the custom order's chips */
.sw .cp-chans { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 8px; }
.sw .cp-chan { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; }
.sw .cp-chq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; padding: 8px 10px; border: 1px solid var(--line2);
  border-radius: var(--radius-sm); background: var(--sunken); color: var(--ink); font-size: 14px; }
.sw .cp-nums { display: grid; margin-bottom: 8px; }
.sw .cp-num { display: grid; grid-template-columns: auto minmax(0, 1.4fr) auto minmax(0, 1.6fr); gap: 4px 12px; align-items: center; padding: 8px 4px;
  border-top: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.sw .cp-num:first-child { border-top: 0; }
.sw .cp-nn { display: grid; gap: 2px; min-width: 0; }
.sw .cp-nn b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.sw .cp-nnum { color: var(--ink); font-family: var(--font-mono); font-size: 14px; white-space: nowrap; }
.sw .cp-h { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.sw .cp-h::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink2); }
.sw .cp-h[data-tone="ok"]::before { background: var(--ok); }
.sw .cp-h[data-tone="wait"]::before { background: var(--wait); }
.sw .cp-h[data-tone="no"]::before { background: var(--no); }
.sw .cp-rotms { display: grid; gap: 4px; margin: 8px 0; }
.sw .cp-rotm { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 12px; color: var(--ink2); font-size: 14px; }
.sw .cp-rotm b { font-weight: 500; }
.sw .cp-rotm.on { color: var(--ink); }
.sw .cp-rotm.on b { font-weight: 600; }
.sw .cp-ordw { display: grid; gap: 6px; margin: 8px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); }
.sw .cp-ordw .cp-g { margin: 0; }
.sw .cp-ord { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sw .cp-oc { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 8px; border: 1px solid var(--line2); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: 14px; cursor: grab; }
.sw .cp-oc svg { color: var(--ink2); }
.sw .cp-k { color: var(--ink2); font-family: var(--font-mono); font-size: 12px; }
.sw .cp-ord select { width: auto; }
.sw .cp-errline { color: var(--no); }
@media (max-width: 760px) { .sw .cp-num { grid-template-columns: auto minmax(0, 1fr); } .sw .cp-rotm { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* phase 4 verify (check 4): a floating menu (Insert Field ▾ lists every GoHighLevel field, 345 on one account) scrolls
   inside itself; the wheel and the arrow keys never scroll the page under it */
.cp-menu { max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
/* ---- phase 5: section 5, Reply Handling (campaign rework spec 9.5, 14; phase 1's P6 and P10) ----
   Tokens and the six type sizes only. "Texts you" on a reply tile is the accent's one use here (the theme test's
   ACCENT_OK names .story .cp-told); an off tile keeps full strength with a dashed border (P6: nothing faded). */
.story .cp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.story .cp-tile { display: grid; gap: 2px; align-content: start; min-width: 0; min-height: 72px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--sunken); color: var(--ink); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.story .cp-tile:hover { background: var(--hover); }
.story .cp-tile:focus-visible { outline: none; box-shadow: var(--focus); }
.story .cp-tile.off { border-style: dashed; border-color: var(--line2); }
.story .cp-tile.bad { border-color: var(--no); }
.story .cp-tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.story .cp-ts { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; color: var(--ink2); text-overflow: ellipsis; white-space: nowrap; }
.story .cp-told { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; }
.story .cp-no, .sw .cp-no { color: var(--no); }
.story .cp-rfoot { margin-top: 10px; }
.story .cp-rlist { display: grid; gap: 6px; width: 100%; margin: 0; padding: 0; list-style: none; }
.story .cp-ritem { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 4px 4px 4px 12px; border: 1px solid var(--line); border-radius: 10px; }
.story .cp-rt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
@media (max-width: 760px) { .story .cp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phase 5, the Reply Handling window: the eight types as a grid, the More Rules table, one rule drilled in */
.sw .cp-tblw { max-width: 100%; min-width: 0; overflow-x: auto; margin-bottom: 6px; }
.sw .cp-grid5, .sw .cp-rtab { width: 100%; border-collapse: collapse; font-size: 14px; }
.sw .cp-grid5 th, .sw .cp-grid5 td, .sw .cp-rtab th, .sw .cp-rtab td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.sw .cp-grid5 thead th, .sw .cp-rtab thead th { color: var(--ink2); font-size: 12px; font-weight: 600; }
.sw .cp-grid5 tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.sw .cp-grid5 tbody th svg { margin-right: 4px; color: var(--ink2); vertical-align: -1px; }
.sw .cp-grid5 select, .sw .cp-grid5 input[type="text"] { width: 100%; min-width: 120px; }
.sw .cp-grid5 select.cp-badsel { border-color: var(--no); color: var(--no); }
.sw .cp-num5 { width: 72px; }
.sw .cp-rtab td:first-child { min-width: 200px; }
.sw .cp-rtab .linkbtn { text-align: left; }
.sw .cp-dtop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sw .cp-dtitle { min-width: 0; font-size: 16px; font-weight: 600; }
.sw .cp-acts5 { display: grid; gap: 4px; }
.sw .cp-act5 { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 6px 16px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.sw .cp-act5:first-child { border-top: 0; }
.sw .cp-act5 b, .sw .cp-al { color: var(--ink); font-size: 14px; font-weight: 600; }
.sw .cp-af { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.sw .cp-af input[type="text"] { width: auto; flex: 1 1 180px; min-width: 0; }
.sw .cp-af select { width: auto; max-width: 100%; }
.sw .cp-probs { display: grid; gap: 4px; margin: 10px 0; }
.sw .cp-dfoot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.sw .cp-dfoot .spacer, .sw .cp-dtop .spacer { flex: 1; }
@media (max-width: 760px) { .sw .cp-act5 { grid-template-columns: minmax(0, 1fr); } }
/* phase 5, section 7 (spec 9.7): the last three exchanges (You, then AI, Show and the newest's Undo, which keeps .linkbtn
   [data-act="undo"], the accent's place in the theme test), the composer with its About chip, the suggestions; while AI
   updates the campaign the day editor's controls are off (a disabled fieldset) */
.story .cp-log { display: grid; gap: 10px; margin-top: 10px; }
.story .cp-ex { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.story .cp-msg5 { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 14px; }
.story .cp-who { color: var(--ink2); font-size: 12px; font-weight: 600; }
.story .cp-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.story .cp-acts5 { display: inline-flex; gap: 10px; }
.story .cp-comp { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 12px; }
.story .cp-comp textarea { flex: 1 1 260px; min-width: 0; min-height: 44px; resize: vertical; font: inherit; font-size: 14px; }
.story .cp-about { display: inline-flex; flex: 1 1 100%; align-items: center; gap: 4px; justify-self: start; max-width: 100%; padding: 0 4px 0 10px;
  border: 1px solid var(--line2); border-radius: 999px; background: var(--sunken); color: var(--ink); font-size: 12px; line-height: 22px; width: fit-content; }
.story .cp-chips5 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.story .cp-warn { color: var(--wait); }
.story .cp-edset { min-width: 0; margin: 0; padding: 0; border: 0; }
.story .cp-edset:disabled { color: var(--ink2); }
.story .cp-aibusy { margin-bottom: 8px; }
/* phase 5, section 8 (spec 9.8, 6.4): rows of a mark, a name, one line and a Fix in one aligned column, failing rows first;
   the same rows inside a stage confirm; the how-to windows' steps and the reply workflow's name and words */
.cp-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.story .cp-count5 { color: var(--ink2); font-size: 14px; }
.story .cp-clists { display: grid; gap: 14px; margin-top: 10px; }
.story .cp-clists.stale .cp-cl, .story .cp-clists.stale .cp-cn { color: var(--ink2); }
.story .cp-cgh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.story .cp-cgh b { font-size: 16px; font-weight: 600; }
.cp-crow { display: grid; grid-template-columns: 18px minmax(0, 170px) minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 36px; padding: 4px 0;
  border-top: 1px solid var(--line); color: var(--ink); font-size: 14px; }
.cp-crow[data-mark="ok"] { min-height: 28px; }
.cp-crow.cp-hl { background: var(--hover); }
.cp-mark { display: grid; place-items: center; width: 18px; height: 18px; color: var(--ink2); }
.cp-mark[data-mark="ok"] { color: var(--ok); }
.cp-mark[data-mark="no"] { color: var(--no); }
.cp-mark[data-mark="wait"], .cp-mark[data-mark="warn"] { color: var(--wait); }
.cp-cn { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cp-cl { min-width: 0; overflow: hidden; color: var(--ink2); text-overflow: ellipsis; white-space: nowrap; }
.cp-cf { justify-self: end; }
.story .cp-cfoot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
.cp-gate .cp-gateh { margin: 8px 0 4px; font-size: 16px; font-weight: 600; }
.cp-steps { display: grid; gap: 6px; margin: 0 0 12px 18px; padding: 0; font-size: 14px; }
.cp-code { padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); color: var(--ink); font: inherit; font-size: 14px; }
.cp-wf { display: grid; gap: 10px; margin-top: 12px; }
.cp-wf .cp-f { display: grid; gap: 4px; }
.cp-wf textarea { width: 100%; font: inherit; font-size: 14px; }
@media (max-width: 700px) { .cp-crow { grid-template-columns: 18px minmax(0, 1fr) auto; } .cp-cl { grid-column: 2 / -1; grid-row: 2; } }
/* ---- phase 5 post-verify: the Reply Handling window at 390 and its drill-in at 1440 (campaign rework spec 9.5; ledger
   "Phase 5 verification", observed) ----
   The Reply Types grid scrolls sideways in its wrapper, so its Move to Stage selects can be wide enough for their own
   words ("Off · No Stage", "No Stage Change") instead of 120px; the drill-in's Extra instructions box starts wide
   enough for its placeholder, and the help line beside it wraps under it. */
.sw .cp-grid5 select { min-width: 168px; }
.sw .cp-af input[data-rh="instructions"] { flex: 1 1 240px; }
/* ---- campaign rework phase 6: Campaign Details (spec 10.1-10.5), the banner's Fill In Details line (6.3), section 3's Change links ---- */
.story .cp-bnext { display: flex; flex-basis: 100%; align-items: center; gap: 8px 12px; flex-wrap: wrap; color: var(--ink2); }
.story .cp-rows .cp-vc { display: flex; align-items: baseline; gap: 8px; }
.story .cp-rows .cp-vt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story .cp-rows .cp-vc .linkbtn { flex: 0 0 auto; font-size: 12px; }
.sw .cp-dcb { align-content: start; }
.sw .cp-dbad { color: var(--no); font-size: 12px; }
.sw .cp-dtab { width: 100%; border-collapse: collapse; font-size: 14px; }
.sw .cp-dtab th, .sw .cp-dtab td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.sw .cp-dtab thead th { color: var(--ink2); font-size: 12px; font-weight: 600; }
.sw .cp-dtab tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.sw .cp-dtab tbody th .help { display: block; font-weight: 400; }
.sw .cp-dtab select, .sw .cp-dtab input[type="text"] { width: 100%; min-width: 140px; }
.sw .cp-fchip { display: inline-block; padding: 0 6px; border: 1px solid var(--line2); border-radius: 999px; background: var(--sunken); color: var(--ink); font-size: 12px; line-height: 16px; }
.sw .cp-dstat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sw .cp-dchk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; color: var(--ink2); font-size: 12px; }
/* ---- campaign rework phase 6: the message box with values as plain text and fields as chips (spec 9.4, 10.1; control map C52) ---- */
.story cp-richbox.cp-msg { display: block; width: 100%; min-height: 104px; padding: 8px 10px; border: 1px solid var(--st-line); border-radius: 8px;
  background-color: var(--st-surface); color: var(--st-ink); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.story cp-richbox.cp-msg[data-rows="8"] { min-height: 180px; }
.story cp-richbox.cp-msg:focus { outline: none; border-color: var(--st-ink); box-shadow: var(--focus); }
.story cp-richbox.cp-msg:empty::before { content: attr(data-placeholder); color: var(--ink2); }
.story cp-richbox .cp-tv { border-bottom: 1px dotted var(--line2); }
.story cp-richbox .cp-fchip { margin: 0 1px; vertical-align: 1px; }
/* ---- phase 6 post-verify: the Same for Every Lead row at 1440 (campaign rework spec 10.1; ledger "Phase 6 verification",
   check 2, observed) ----
   With Another Number chosen, the Callback Number column is taller than Company beside it; the grid row stretched
   Company's label and its input grew to 52px beside the 38px Agent Name and Owner Name inputs. Each field keeps its own
   height, as the Callback Number column (.cp-dcb) already does. */
.sw .cp-2col > .cp-f:has(> input[data-det]) { align-content: start; }
/* ---- campaign rework phase 7: Preview (spec 11): Playing, the four parts on the left, the whole window scrolls as one ---- */
.modal.cp-pvwin .mbody { padding-top: 0; }
.cp-pv-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.cp-pv-play { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink2); }
.cp-pv-play select { max-width: 100%; }
.cp-pv-stale { font-size: 14px; color: var(--ink); }
.cp-pv-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding-top: 12px; }
.cp-pv-nav { position: sticky; top: 64px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.cp-pv-nav button { text-align: left; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink2); font-size: 14px; cursor: pointer; }
.cp-pv-nav button:hover { background: var(--hover); color: var(--ink); }
.cp-pv-nav button[aria-current="true"] { background: var(--sunken); color: var(--ink); font-weight: 600; }
.cp-pv-sec { padding: 4px 0 24px; border-bottom: 1px solid var(--line); scroll-margin-top: 64px; }
.cp-pv-sec:last-child { border-bottom: 0; }
.cp-pv-h { margin: 8px 0 12px; font-size: 16px; font-weight: 600; color: var(--ink); }
.cp-pv-mgrid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
.cp-pv-phone { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sunken); }
.cp-pv-day { align-self: center; font-size: 12px; font-weight: 600; color: var(--ink2); }
.cp-pv-gap { align-self: center; font-size: 12px; color: var(--ink2); }
.cp-pv-bub { align-self: flex-start; max-width: 80%; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-pv-bub.me { align-self: flex-end; background: var(--hover); }
.cp-pv-card { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.cp-pv-side { min-width: 0; }
.cp-pv-fh { margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.cp-pv-filled { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0 0 8px; font-size: 14px; }
.cp-pv-filled dt { color: var(--ink2); }
.cp-pv-filled dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.cp-pv-note { font-size: 14px; color: var(--ink); }
.cp-pv-types { display: flex; flex-direction: column; gap: 8px; }
.cp-pv-type { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.cp-pv-tn { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 14px; }
.cp-pv-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cp-pv-big { font-size: 16px; font-weight: 600; color: var(--ink); }
.cp-pv-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.cp-pv-tbl th, .cp-pv-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink); }
.cp-pv-tbl th { font-size: 12px; font-weight: 600; color: var(--ink2); }
.cp-pv .cp-mono { font-family: var(--font-mono); }
.cp-pv .cp-one { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .cp-pv-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-pv-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .cp-pv-mgrid { grid-template-columns: minmax(0, 1fr); }
}
/* ---- campaign rework phase 7: Campaign Details' Preview With (spec 1, 10; plan 06 R14) ---- */
.sw .cp-dpv { margin-top: 12px; }
.sw .cp-dpvw { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); color: var(--ink); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* ---- campaign rework phase 7: the New Campaign screen (spec 12): a centered 720px column, no section number ---- */
.cp-new { max-width: 720px; margin: 24px auto 48px; display: flex; flex-direction: column; gap: 12px; }
.cp-ntitle { margin: 0; font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--ink); }
.cp-new .cp-nprompt { width: 100%; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 14px; resize: vertical; }
.cp-nrow { display: flex; align-items: baseline; gap: 6px; }
.cp-nexg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cp-nex { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 14px; text-align: left; cursor: pointer; }
.cp-nex:hover { background: var(--hover); }
.cp-nex .help { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cp-nset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cp-nset select { width: 100%; }
.cp-nchan { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.cp-nbiz { grid-column: 1 / -1; font-size: 14px; color: var(--ink); }
.cp-nact { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cp-nq, .cp-nfail, .cp-nleft { display: flex; flex-direction: column; gap: 8px; }
.cp-nql { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink); }
.cp-nql textarea { width: 100%; }
.cp-nbusy { font-size: 14px; color: var(--ink); }
@media (max-width: 760px) {
  .cp-nexg, .cp-nset { grid-template-columns: minmax(0, 1fr); }
}
/* campaign rework phase 8: the 390 fixes and phase 1's CSS leftovers, appended at the true end so each wins by order
   (a plain heading: campaign_preview_page.test.mjs keeps every dashed block heading after phase 7's its own) */
/* phase 7 verify problem 3: Preview's Real-Lead Run table (511px wide) scrolls inside its own wrapper at 390; only the
   section windows' .sw .cp-tblw scrolled, so the whole Preview window body scrolled sideways */
.cp-pv .cp-tblw { max-width: 100%; min-width: 0; overflow-x: auto; }
/* finish fix, Preview Real-Lead Run: the message cell wore .cp-one (one line, ellipsis), so each message was cut off and the
   table (1552px in an 850px window at 1440) scrolled sideways; the Message column takes what is left and wraps whole (a long
   unbroken string breaks), and the send time stays on one line instead of four */
.cp-pv-tbl .cp-pv-msg { white-space: normal; overflow-wrap: anywhere; }
.cp-pv-tbl .cp-pv-at { white-space: nowrap; }
/* under 900px the Preview pane is under 620px and five columns cannot all show (at 390 the table was 390px in a 304px wrapper,
   at 768 the Message got 136px), so each row is two lines: Lead, Day (wearing its label), send time and Held, then the whole
   message under them; the header row stays for screen readers only (.cp-vh's clip) */
@media (max-width: 900px) {
  .cp-pv-tbl, .cp-pv-tbl tbody { display: block; }
  .cp-pv-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cp-pv-tbl tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .cp-pv-tbl td { padding: 0; border-bottom: 0; }
  .cp-pv-tbl .cp-pv-msg { order: 1; flex: 1 0 100%; }
  .cp-pv-tbl td[data-l]::before { content: attr(data-l) " "; color: var(--ink2); font-family: var(--font-ui); font-size: 12px; }
}
/* phase 1 P9: `.acctbar select { padding: 6px 8px }` beat select's padding-right, so at 390 the chevron sat over the
   sub-account's name ("2nd Chance Homes"); the right side gets its room back (the 900px rule still sets the width) */
.acctbar select { padding-right: 30px; }
/* phase 1 leftovers: Undo is accent with no underline at rest, so hover and keyboard focus draw one (.linkbtn:hover only
   thickens an underline); the back link's font shorthand reset its line height, so the title's 1.25 is restated after it */
.story .linkbtn[data-act="undo"]:hover, .story .linkbtn[data-act="undo"]:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.topbar h1 a.ttl.back { line-height: 1.25; }
/* fix round 1, R-faint: Firefox's own stylesheet dims ::placeholder (opacity about 0.54), so the 4.5:1 placeholder grey
   held only in Chromium and Safari; full strength everywhere */
input::placeholder, textarea::placeholder { opacity: 1; }
/* post-verify round 1, Preview's text styles: .help and .cp-aside were styled only under .story and .sw, and the Preview
   body (.cp-pv in #modal) is under neither, so its help lines, source notes and part asides drew in full ink at 14px */
.cp-pv .help, .cp-pv .cp-aside { color: var(--ink2); font-size: 12px; font-weight: 400; }
/* post-verify round 1, Preview › Replies: the change box (its box, button and scope line) and Type Your Own Reply had no
   spacing of their own, so each touched the next and the last reply card */
.cp-pv-fix { display: grid; gap: 8px; margin: 0 0 16px; }
.cp-pv-own { display: grid; gap: 8px; margin-top: 16px; }
.cp-pv-own .cp-pv-fh { margin-bottom: 0; }
/* post-verify round 1, Add Rule: a switch and 'Start a GoHighLevel Workflow' take 242px, so in the 220px label column the
   label dropped under its switch; the column fits it, a label never wraps away from its switch, and a phone keeps one
   column (restated after, so it still wins under 760px) */
.sw .cp-act5 { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
.sw .cp-act5 > .cp-inline { flex-wrap: nowrap; }
@media (max-width: 760px) { .sw .cp-act5 { grid-template-columns: minmax(0, 1fr); } }
/* post-verify round 1, Reply Types grid: Not Right Now's Follow Up In (a 72px box and 'days', 110px) wrapped in its
   113px cell, so that row stood about 81px tall beside 52px rows; the box and its unit stay on one line */
.sw .cp-grid5 .cp-inline { flex-wrap: nowrap; }
/* post-verify round 1, an email's Subject: a one-line <cp-richbox> (per-lead fields as chips, as in the Body, spec 9.4),
   drawn like the page's other boxes: the story surface, line and ink, 12px words, the inputs' 36px height and padding */
.story cp-richbox.cp-subj { display: block; width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid var(--st-line); border-radius: 8px;
  background-color: var(--st-surface); color: var(--st-ink); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; cursor: text; }
.story cp-richbox.cp-subj:focus { outline: none; border-color: var(--st-ink); box-shadow: var(--focus); }
/* post-verify round 1, the user menu at phone width: under 900px the rail is a short row that still kept overflow-y:
   auto, so the menu that opens below it (Your Account, Sign Out) was clipped to its first 4px; nothing in the row
   overflows, so the rail lets it show */
@media (max-width: 900px) { .rail { overflow: visible; } }
/* post-verify round 1, the Connections menu at phone width: right-aligned to the pill with min-width 260px, it ran to
   the screen's left edge at 390 (the pill ended at x 260); under 900px it hangs from the top bar, 16px in from both
   sides like the page, no wider than on a desktop and kept at the right */
@media (max-width: 900px) {
  .topbar .statusdd { position: static; }
  .statusmenu { left: 16px; right: 16px; min-width: 0; max-width: 380px; margin-left: auto; }
}
/* post-verify round 1, a glance at phone width: the label column took its widest label ('If Asked "Are You a Robot?"'), so
   section 3's values were 82-135px and a Callback Number read '+1817555…'; under 720px the label sits over its value, as
   the old storyboard's key-value list did */
@media (max-width: 720px) {
  .story .cp-rows { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .story .cp-rows .v { margin-bottom: 8px; }
}
/* post-verify round 1, date boxes: the form rule above names every text-like type but date, so a date box kept the
   browser's look (its own grey border, square corners, 27px tall) on Activity & Results' end date, the lead page's date
   facts and the Stop Rules window; it is drawn like the others. The inline end date keeps the inline size, and Stop
   Rules keeps its Clear beside the box */
input[type="date"] { width: 100%; background-color: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px;
  color: var(--ink); min-height: 36px; }
input[type="date"].inline { width: auto; min-height: 30px; padding: 4px 8px; }
.sw .cp-rc input[type="date"] { width: auto; }
/* post-verify round 1, a form grid at phone width: its one column was 1fr, whose minimum is its widest content, so on
   Settings › Scheduling the nowrap redirect address (382px) widened the Google Calendar card and the page scrolled
   sideways at 390; minmax(0, 1fr) as above 700px, and the address cuts with its ellipsis */
@media (max-width: 700px) { .formgrid { grid-template-columns: minmax(0, 1fr); } }
/* finish fix round 1, Stop Rules at 1440: in the 4-column card the label column took its widest label ('When They Leave
   the Stage', about 175px), so the value '3 times, then continue' was cut at 139px; beside section 5 the label column
   takes at most 45% and a long label wraps there, so a short value shows whole (below 1100px the card is full width) */
@media (min-width: 1101px) {
  .story .cp-w4 .cp-rows { grid-template-columns: fit-content(45%) minmax(0, 1fr); }
  .story .cp-w4 .cp-rows .l { white-space: normal; }
}
/* finish fix round 1, Who Gets Contacted at 1440: a tag longer than about 17 characters cut the row's count ('… · 0 now'),
   which came after it; the count is its own part that never shrinks, so the cut falls on the tag or stage name */
.story .cp-rows .cp-vtl { gap: 4px; }
.story .cp-rows .cp-vn { flex: 0 0 auto; white-space: nowrap; }
/* finish fix round 1, Preview at 390: below 760px the parts nav was a static row above the parts, so opening at Messages
   (scrolled 108px) hid it behind the sticky Playing row and a picked part scrolled it far off; there it sticks to the top
   of the window body instead, and the Playing row (who is playing) scrolls with the content */
@media (max-width: 760px) {
  .cp-pv-top { position: static; }
  .cp-pv-nav { position: sticky; top: 0; z-index: 3; padding: 6px 0; background: var(--surface); border-bottom: 1px solid var(--line); }
  .cp-pv-sec { scroll-margin-top: 56px; }
}
/* finish fix round 1, section 4's head at 390: the sending line (the head's aside) took the head row and squeezed the
   title to 96px, so the '4' sat alone and 'Message Schedule' broke in two; under 700px it drops to its own full-width
   line under the number, the title and Edit */
@media (max-width: 700px) {
  .story .cp-head { flex-wrap: wrap; }
  .story .cp-head .cp-sline { order: 3; flex: 1 0 100%; max-width: 100%; }
}
/* finish fix round 1, the AI Assistant window at 390: the saved assistant's rows (.sw .cp-rows) kept the label | value
   grid with one-line values, so It Will, Introduces Itself As and Tone were cut to 162px; spec 5 shows the full value in
   the window, so a window's values wrap, and under 760px the label sits over its value as on the page */
.sw .cp-rows .v { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .sw .cp-rows { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .sw .cp-rows .v { margin-bottom: 8px; }
}
/* finish fix round 1, Preview › Real-Lead Run at 390: the Draft line ('No leads qualify now · Start Testing to hold
   messages…') was cut to 304 of 424px with no way to read it (a phone has no hover); under 760px it wraps */
@media (max-width: 760px) { .cp-pv p.cp-one { white-space: normal; } }
/* finish fix round 1, Reply Handling at 390: two tiles a row cut 'Asked for a Real Person' to 'Asked for a Real Pe…',
   and a phone has no hover for its title; under 760px a tile's name wraps onto a second line */
@media (max-width: 760px) { .story .cp-tn { white-space: normal; } }
/* finish fix round 1, Sending Settings at 390: under 760px a Send From row (checkbox | name | number | status) became two
   auto-placed columns, so the number dropped into the checkbox's column and the name and status were pushed right; the
   checkbox keeps column 1 beside all three lines, which stack in column 2 */
@media (max-width: 760px) {
  .sw .cp-num > input { grid-column: 1; grid-row: 1 / span 3; align-self: start; margin-top: 3px; }
  .sw .cp-num > span { grid-column: 2; }
}
/* finish re-check: at 390 the sticky parts nav wraps to two rows (89px), so a part picked from it landed with its heading
   21px under the nav; a part lands 100px down instead */
@media (max-width: 760px) { .cp-pv-sec { scroll-margin-top: 100px; } }
/* proof fix round 1, Stop Rules at 1440: a passed end date read 'Ended Sep 30 - nothing ...' (230px in 171px), so
   spec 14's 'nothing more is sent' lived only in the title; that one value (cp-vw) wraps instead of being cut */
.story .cp-rows .v.cp-vw { white-space: normal; text-overflow: clip; }
/* reply rules 3b, section 6, Who the Assistant Answers (spec 2026-10-07, 8.1): a rule on the Only and Never lists is
   one row of its controls (Tag, Stage or Field; the field; is, isn't, contains or is empty; the value; Remove) that
   wraps at phone width, a hairline between two rules; the line saying what to fix sits under it and takes no room
   while there is nothing to fix */
.sw .cp-cond { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0 2px; }
.sw .cp-cond > select, .sw .cp-cond > input[type="text"] { width: auto; flex: 1 1 160px; min-width: 0; }
.sw .cp-cond > select[data-ar="what"], .sw .cp-cond > select[data-ar="op"] { flex: 0 1 140px; }
.sw .cp-cond ~ .cp-cond { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.sw .cp-err[data-ar-err]:empty { display: none; }
/* phase 8 tidy, Transcripts at 390: a long agent name made the Agent select (#txAgent) 531px wide and the page scrolled sideways */
.tx-filters .field, #txAgent { max-width: 100%; }