/* Lion Reach — amber/gold on charcoal, matching the estate's Messaging
   Infrastructure identity (sms-bridge) and Lion Command's gold-on-charcoal. */
:root {
  color-scheme: dark;
  --bg: #14120d;
  --panel: #1d1a13;
  --panel2: #262218;
  --line: #3a331f;
  --amber: #f5b942;
  --amber2: #ffd47e;
  --text: #efe8d8;
  /* lifted from #9d926f for WCAG AA on panel backgrounds (LR-0661) */
  --muted: #b3a98a;
  --red: #e2574c;
  --green: #7fc95c;
  /* semantic aliases (LR-0676): newer sections reference intent, not hex */
  --accent: var(--amber);
  --ok: var(--green);
  --err: var(--red);
  --warn: #dcae55;
  --info: #6f9fd8;
  --fg: var(--text);
  /* ---- TOKEN CONTRACT (UI-0041) --------------------------------------------
     Rules below :root reference TOKENS, never raw hex/rgba — the CI lint
     (scripts/check-css-tokens.mjs) enforces it. Severity pairs derive from
     the base hues via color-mix, so redefining the base hue in the light
     block retunes every pair automatically. bg/fg pairs are designed to be
     used together; do not mix a -bg with a foreign -fg. */
  /* severity pairs (UI-0005): tinted surface + readable ink, both themes */
  --ok-bg: color-mix(in srgb, var(--green) 16%, var(--panel));
  --ok-fg: color-mix(in srgb, var(--green) 72%, var(--text));
  --warn-bg: color-mix(in srgb, var(--warn) 16%, var(--panel));
  --warn-fg: color-mix(in srgb, var(--warn) 72%, var(--text));
  --err-bg: color-mix(in srgb, var(--red) 16%, var(--panel));
  --err-fg: color-mix(in srgb, var(--red) 72%, var(--text));
  --info-bg: color-mix(in srgb, var(--info) 16%, var(--panel));
  --info-fg: color-mix(in srgb, var(--info) 72%, var(--text));
  --neutral-bg: var(--panel2);
  --neutral-fg: var(--muted);
  /* accent tints (UI-0009) and text-on-fills (UI-0010/0039) */
  --accent-soft: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-soft-2: color-mix(in srgb, var(--accent) 16%, transparent);
  --on-accent: #201a08;
  --on-err: #fff;
  /* the primary gradient (UI-0011) */
  --accent-grad-a: var(--amber);
  --accent-grad-b: #d99a25;
  /* controls: buttons raised, fields inset (UI-0012); pressed + disabled */
  --btn-bg: #2b261a;
  --field-bg: #221e14;
  --pressed: color-mix(in srgb, var(--accent) 14%, var(--panel2));
  --disabled-bg: color-mix(in srgb, var(--panel2) 60%, var(--panel));
  --disabled-fg: color-mix(in srgb, var(--muted) 60%, var(--panel2));
  /* one focus ring (UI-0015) */
  --focus-ring: 2px solid var(--accent);
  /* spacing scale (UI-0206) and the one box inset (UI-0207) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --pad-box: 14px 16px;
  --control-h: 36px;
  --placeholder: color-mix(in srgb, var(--muted) 85%, var(--field-bg));
  /* measured at runtime; 57px is the single-line fallback (UI-0217) */
  --header-h: 57px;
  /* type scale (UI-0051): every font-size below references a step */
  --fs-caption: 11px;
  --fs-small: 12px;
  --fs-body-sm: 13px;
  --fs-body: 14px;
  --fs-h3: 15px;
  --fs-h2: 17px;
  --fs-h1: 22px;
  --ls-caps: .07em;
  /* motion (UI-0801): one vocabulary, killed wholesale by reduced-motion */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 300ms;
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  /* outline vs divider line weights (UI-0030) */
  --line-soft: color-mix(in srgb, var(--line) 55%, var(--panel));
  /* faint fills that used to be white-alpha (UI-0026) */
  --note-bg: color-mix(in srgb, var(--text) 4%, transparent);
  --track-bg: color-mix(in srgb, var(--text) 8%, transparent);
  /* elevation (UI-0028/0029) + one scrim for every backdrop (UI-0043) */
  --shadow-1: 0 4px 12px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-3: 0 18px 60px rgba(0, 0, 0, .5);
  --scrim: rgba(8, 10, 14, .55);
  /* channel identity, shared by pills, charts and dots (UI-0022) */
  --ch-email: #b9b1e8;
  --ch-sms: #8fd0d0;
  --ch-whatsapp: #93d5a0;
  /* inbox bubbles (UI-0003) */
  --bubble-in: var(--panel2);
  --bubble-out: color-mix(in srgb, var(--accent) 16%, var(--panel));
  /* presence dots (UI-0038) */
  --pres-online: var(--ok);
  --pres-break: var(--accent);
  --pres-away: var(--muted);
  --pres-offline: color-mix(in srgb, var(--muted) 45%, var(--panel));
  /* journey-canvas node roles (UI-0045) */
  --jc-entry: #4c9e57;
  --jc-message: #4c7fd0;
  --jc-condition: #b08a2e;
  --jc-exit: #a05252;
}
/* Light theme (LR-0708): same token names, warm-paper values. The default
   stays the dark brand; [data-theme] on <html> switches, chosen by the header
   toggle (persisted) or the OS preference on first visit. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3eddd;
  --panel: #fbf7ec;
  --panel2: #ece4cd;
  --line: #d3c69e;
  /* darkened from #9c6f10 so light --on-accent ink clears AA on flat fills
     (the contrast script guards this pair) */
  --amber: #8a6110;
  --amber2: #7c580a;
  --text: #241f12;
  /* darkened from #6b6248 for AA headroom on panel2 cream (UI-0049) */
  --muted: #5d5440;
  --red: #b23a30;
  --green: #3e7d22;
  --warn: #8a6414;
  --info: #2f5e96;
  /* light-theme accent is a dark gold, so ink on it is light (UI-0010/0011) */
  --on-accent: #fffdf4;
  --accent-grad-a: #8a6110;
  --accent-grad-b: #755410;
  --btn-bg: #f6f0df;
  --field-bg: #e7dfc7;
  --shadow-1: 0 4px 12px rgba(70, 58, 28, .12);
  --shadow-2: 0 10px 30px rgba(70, 58, 28, .16);
  --shadow-3: 0 18px 60px rgba(70, 58, 28, .22);
  --scrim: rgba(56, 48, 30, .4);
  --ch-email: #5b4fae;
  --ch-sms: #16717c;
  --ch-whatsapp: #2b7a41;
  --jc-entry: #337a3f;
  --jc-message: #2f5e96;
  --jc-condition: #8a6414;
  --jc-exit: #a03c32;
}
:root[data-theme="light"] .brand span { background: linear-gradient(120deg, var(--accent-grad-a), var(--accent-grad-b)); -webkit-background-clip: text; background-clip: text; }
* { box-sizing: border-box; }
/* Links follow the theme, never the browser default — the Getting-set-up
   checklist was rendering visited-purple against the amber brand. */
a, a:visited { color: var(--amber2); text-decoration-color: color-mix(in srgb, var(--amber2) 45%, transparent); }
a:hover { color: var(--accent); }
/* UA form controls follow the brand, not browser blue (UI-0017); the brand
   owns text selection too (UI-0050). */
:root { accent-color: var(--accent); }
::placeholder { color: var(--placeholder); }
::selection { background: color-mix(in srgb, var(--accent) 35%, var(--bg)); }
/* html painted too, so overscroll never flashes UA white/black (UI-0019) */
html { background: var(--bg); scrollbar-gutter: stable; }
html.theme-anim, html.theme-anim body, html.theme-anim .panel, html.theme-anim .card, html.theme-anim header, html.theme-anim nav#tabs { transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); }
/* Inter (SIL OFL 1.1), self-hosted within the CSP — variable 400-800,
   latin subset (UI-0054). System stack carries every other script. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/inter-var-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: var(--fs-body)/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* bold is hierarchy, not shouting (UI-0082) */
b, strong { font-weight: 600; }
/* headings breathe as a set (UI-0055/0084) */
h1 { font-size: var(--fs-h1); font-weight: 700; margin: 0 0 12px; }
h3 { font-size: var(--fs-h3); font-weight: 650; margin: 18px 0 8px; }
h1, h2, h3 { text-wrap: balance; }
/* shared numeric + truncation utilities (UI-0065/0074/0091) */
.tnum, .num { font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; }
.trunc { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* caption text: small, calm, tighter leading (UI-0052/0080) */
.caption { font-size: var(--fs-caption); color: var(--muted); line-height: 1.35; }
.hidden { display: none !important; }
section.tab { animation: tab-in var(--dur-base) var(--ease-out); }
@keyframes tab-in { from { opacity: 0; transform: translateY(4px); } }

.brand { font-weight: 800; letter-spacing: .14em; color: var(--text); }
header .brand { cursor: pointer; }
.live-chip { font-size: var(--fs-caption); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--muted); }
.live-chip.live-up { color: var(--ok-fg); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.live-chip.live-down { color: var(--warn-fg); border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); animation: pulse 1.2s infinite; }
.acct-btn { background: var(--panel2); color: var(--accent); font-weight: 700; border-radius: 50%; }
.drawer-head { display: none; }
.brand span {
  background: linear-gradient(120deg, var(--accent), var(--amber2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand em { font-style: normal; font-size: 10px; background: var(--warn); color: var(--on-accent); border-radius: 4px; padding: 1px 6px; margin-left: 8px; vertical-align: middle; cursor: help; }
.brand.big { font-size: 26px; }

.lock { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 50; transition: opacity var(--dur-slow) var(--ease-out); }
.lock.lock-out { opacity: 0; pointer-events: none; }
.lock-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 34px; width: 360px; box-shadow: var(--shadow-3); text-align: center; }
.lock-card p { color: var(--muted); }
.lock-card input { width: 100%; margin: 4px 0 12px; }
.lock-card label { display: block; text-align: left; font-size: var(--fs-small); color: var(--muted); font-weight: 500; margin-top: 8px; }
.lock-card button { width: 100%; }
.err { color: var(--err); min-height: 20px; margin-top: 8px; font-size: 13px; }

header {
  display: flex; align-items: center; gap: 18px; padding: 10px 18px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10; flex-wrap: nowrap;
}
/* Left navigation rail (Victor 2026-08-25): the tab bar becomes a sidebar.
   Desktop: a sticky rail, collapsible via the ☰ toggle (persisted).
   Mobile (<700px): an overlay drawer over a backdrop. */
.shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--header-h)); }
nav#tabs {
  display: flex; flex-direction: column; gap: 2px;
  flex: 0 0 208px; width: 208px; box-sizing: border-box;
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto;
  background: var(--panel); border-right: 1px solid var(--line);
  padding: 12px 10px 0;
  transition: flex-basis .15s ease-out, width .15s ease-out, padding .15s ease-out;
}
/* the identity footer stays visible while the tab list scrolls (UI-0232) */
nav#tabs .nav-account { position: sticky; bottom: 0; background: var(--panel); padding-bottom: 12px; }
nav#tabs button {
  background: none; border: none; color: var(--muted); padding: 9px 12px;
  border-radius: 8px; cursor: pointer; font-weight: 500; text-align: left; width: 100%;
  font-size: var(--fs-body-sm);
  display: flex; align-items: center; gap: 9px;
}
.nav-ico { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
#ovActions button { display: inline-flex; align-items: center; gap: 7px; }
.nav-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav#tabs button.on { background: var(--panel2); color: var(--accent); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
/* unread count rides the tab as a quiet badge (UI-0098) */
.tab-count { display: inline-block; min-width: 18px; text-align: center; font-size: var(--fs-caption); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--accent-soft-2); color: var(--accent); border-radius: 999px; padding: 0 5px; margin-left: 6px; }
nav#tabs button:hover { background: var(--accent-soft); color: var(--amber2); }
/* collapsed = a 56px icon strip, not a vanished nav (UI-0261); the width
   animates so the layout never teleports (UI-0216/0262) */
body.nav-collapsed .shell nav#tabs { flex-basis: 56px; width: 56px; padding-left: 6px; padding-right: 6px; overflow-x: hidden; }
body.nav-collapsed .shell nav#tabs .nav-lbl, body.nav-collapsed .shell nav#tabs .nav-group,
body.nav-collapsed .shell nav#tabs .nav-account, body.nav-collapsed .shell nav#tabs .drawer-head { display: none; }
body.nav-collapsed .shell nav#tabs button[data-tab] { justify-content: center; padding: 10px 0; }
#navToggle { background: none; border: none; font-size: 1.15rem; cursor: pointer; color: var(--muted); padding: 4px 8px; }
#navToggle:hover { color: var(--amber2); }
header .grow { flex: 1; }
.nav-backdrop { display: none; }

main { flex: 1; min-width: 0; max-width: 1180px; margin: 0 auto; padding: 22px 18px 80px; }
/* two-pane and table-heavy surfaces breathe wider (UI-0214) */
body[data-tab="inbox"] main, body[data-tab="analytics"] main, body[data-tab="admin"] main { max-width: 1400px; }
h2 { font-size: var(--fs-h2); margin: var(--s5) 0 var(--s3); }
.bar > h2, section.tab > h2:first-child { margin-top: 0; }
.bar { margin-top: var(--s5); }
.bar .bar, .panel .bar, .bar:first-child { margin-top: 0; }
h2 small { color: var(--muted); font-weight: 400; font-size: var(--fs-small); margin-left: 8px; }
/* full-sentence tab subtitles live under the heading, not inside it (UI-0056) */
.tab-sub { color: var(--muted); font-size: var(--fs-body-sm); margin: -4px 0 14px; max-width: 70ch; text-wrap: pretty; }
/* entity counts beside headings read as badges, not lost prose (UI-0099) */
.h-count { display: inline-block; font-size: var(--fs-small); font-weight: 600; color: var(--muted); background: var(--panel2); border-radius: 999px; padding: 1px 9px; margin-left: 8px; vertical-align: 2px; font-variant-numeric: tabular-nums; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bar > .row { margin: 0; }
/* trailing bar controls wrap as one unit (UI-0212) */
.bar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s3); margin: var(--s3) 0; }
/* fixed-count grids: no ghost tracks, no ragged remainders (UI-0202/0203) */
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } .cards-3 { grid-template-columns: 1fr; } }
/* overview lower band: two composed columns instead of a thin scroll (UI-0244) */
.ov-lower { align-items: start; margin-top: var(--s4); }
.ov-lower h2 { margin-top: 0; }
.ov-lower .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .ov-lower .cards-3 { grid-template-columns: 1fr; } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: var(--pad-box); }
.card .k { color: var(--muted); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-caps); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .v { font-size: 24px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.card .v.changed { animation: val-flash 900ms var(--ease-out); }
@keyframes val-flash { 30% { color: var(--accent); } }
.cards > .card { animation: card-in var(--dur-base) var(--ease-out) backwards; }
.cards > .card:nth-child(2) { animation-delay: 40ms; }
.cards > .card:nth-child(3) { animation-delay: 80ms; }
.cards > .card:nth-child(4) { animation-delay: 120ms; }
@keyframes card-in { from { opacity: 0; transform: translateY(6px); } }
.card .vsub { font-size: var(--fs-small); color: var(--muted); font-weight: 400; margin-top: 2px; line-height: 1.35; }
.card .v small { font-size: 13px; color: var(--muted); font-weight: 400; }
.card.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.card.bad { border-color: color-mix(in srgb, var(--err) 55%, var(--line)); }
.card.ok .v { color: var(--ok-fg); }
.card.bad .v { color: var(--err-fg); }
/* Not configured is an absence, not an emergency — red borders are reserved
   for channels that are configured and DOWN. */
.card.unset { border-style: dashed; }
.card.unset .v { color: var(--muted); font-weight: 400; }
/* attention: configured but can't send (0 devices, waiting) (UI-0319) */
.card.attn { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.card.attn .v { color: var(--warn-fg); }
/* clickable stat cards (UI-0311/0313) */
button.card-link { text-align: left; display: block; width: 100%; font-weight: inherit; min-height: 0; }
button.card-link:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--panel); transform: translateY(-1px); }
button.card-link:active { transform: translateY(0); }
.card .warn-txt { color: var(--warn-fg); font-weight: 600; }
/* channel card internals (UI-0303/0304/0305/0318/0321) */
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: 0; margin-left: 4px; }
.status-dot.ok { background: var(--ok); animation: dotpulse 3s ease-in-out infinite; }
.status-dot.attn { background: var(--warn); }
.status-dot.bad { background: var(--err); }
.status-dot.unset { background: var(--muted); }
@keyframes dotpulse { 50% { opacity: .55; } }
.cap-bar { height: 4px; border-radius: 3px; background: var(--panel2); overflow: hidden; margin-top: 6px; }
.cap-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.cap-bar.cap-warn i { background: var(--warn); }
.cap-bar.cap-hot i { background: var(--err); }
.card-sub { font-size: var(--fs-caption); color: var(--muted); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
.setup-link { color: var(--accent); font-weight: 600; }
.spark { width: 100%; height: 18px; margin-top: 6px; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.ov-checked { font-size: var(--fs-caption); margin: 4px 0 0; }
/* overview chrome (UI-0307/0345/0346) */
.ov-eyebrow { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--muted); font-weight: 700; margin: var(--s5) 0 var(--s2); }
.ov-guard { display: flex; gap: 8px; flex-wrap: wrap; margin: var(--s3) 0; }
.guard-chip { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.guard-chip.guard-warn { background: var(--warn-bg); color: var(--warn-fg); }
.guard-chip.guard-err { background: var(--err-bg); color: var(--err-fg); }
.ov-hero h3 { margin-top: 0; }
.ov-celebrate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* skeletons (UI-0309) */
.card.skeleton { position: relative; overflow: hidden; }
.card.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--accent-soft) 50%, transparent 70%); animation: shimmer 1.2s infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* checklist rows (UI-0326..0329) */
.check-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 2px 8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.check-row:hover { background: var(--accent-soft); }
.check-row.done { color: var(--muted); }
.check-row.done .grow1 { text-decoration: line-through; text-decoration-color: var(--line); }
.check-row.next { background: var(--accent-soft); }
.ck-box { width: 16px; height: 16px; border: 1.5px solid var(--line); border-radius: 4px; flex: 0 0 auto; position: relative; }
.ck-box.ck-on { background: var(--ok); border-color: var(--ok); }
.ck-box.ck-on::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid var(--on-err); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ck-cta { color: var(--accent); font-weight: 700; font-size: var(--fs-small); }
.ck-chev { color: var(--muted); }
.mini-progress { height: 4px; border-radius: 3px; background: var(--panel2); overflow: hidden; margin: 4px 0 10px; }
.mini-progress i { display: block; height: 100%; width: 0; background: var(--accent); }
/* snapshot semantics (UI-0335/0337) */
.pill.fresh { background: var(--ok-bg); color: var(--ok-fg); }
.pill.stale { background: var(--warn-bg); color: var(--warn-fg); }
.panel.attention { border-left: 3px solid var(--warn); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: var(--pad-box); margin: var(--s3) 0; }
/* single-column forms don't stretch to a meter wide (UI-0249) */
.panel-narrow { max-width: 760px; }
.panel-title { font-size: var(--fs-body-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--muted); margin: 0 0 10px; }
.row { display: flex; gap: 10px; margin: 8px 0; flex-wrap: wrap; align-items: center; }
.row > input:not([type=checkbox]):not([type=radio]):not([class*="w"]):not(.grow1) { flex: 1 1 180px; min-width: 0; max-width: 420px; }
.row label { color: var(--muted); font-size: var(--fs-small); font-weight: 500; min-width: 130px; }
/* the real form grid (UI-0151): every field starts on one shared edge */
.frow { display: grid; grid-template-columns: minmax(150px, 190px) 1fr; gap: 6px 12px; align-items: center; margin: 8px 0; }
.frow > label { color: var(--muted); font-size: var(--fs-small); font-weight: 500; }
.frow > .field-hint, .frow > .field-err-msg { grid-column: 2; }
@media (max-width: 700px) { .frow { grid-template-columns: 1fr; } }
/* instructions persist under the field; placeholders are examples (UI-0158) */
.field-hint { font-size: 11.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
/* required marks (UI-0169) */
label.req::after { content: ' *'; color: var(--err); }
/* unit affixes live in the field, not the label (UI-0168) */
.affix { display: inline-flex; align-items: center; background: var(--field-bg); border: 1px solid var(--line); border-radius: 8px; padding-right: 8px; }
.affix input { background: none; border: none; min-height: calc(var(--control-h) - 2px); }
.affix input:focus { outline: none; }
.affix:focus-within { outline: var(--focus-ring); outline-offset: 1px; }
.affix .suffix { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
/* numeric fields share one narrow width (UI-0167) */
.w-num { width: 110px; }
/* search inputs are search inputs (UI-0163) */
input[type=search].search, .search { max-width: 320px; }
/* checkbox option lists that replaced multi-selects (UI-0164) */
.cb-list { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--field-bg); }
.cb-list label { display: flex; gap: 8px; align-items: center; min-width: 0; font-size: var(--fs-body-sm); color: var(--text); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.grid2 > * { min-width: 0; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

input, select, textarea {
  background: var(--field-bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font: inherit;
}
input:focus, select:focus, textarea:focus { outline: var(--focus-ring); outline-offset: 1px; }
textarea { width: 100%; resize: vertical; }
textarea:not([rows]) { min-height: 110px; }

button {
  background: var(--btn-bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 14px; cursor: pointer; font: inherit; font-weight: 600;
}
/* hover fills, not just a 1px border tint (UI-0036); pressed darkens (UI-0014) */
button { transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
button:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--btn-bg)); }
button:active { background: var(--pressed); }
button.primary { background: linear-gradient(120deg, var(--accent-grad-a), var(--accent-grad-b)); color: var(--on-accent); border: none; }
button.primary:hover { filter: brightness(1.08); }
/* ghost = accent text-button with a soft hover (UI-0035) */
button.ghost { background: none; border-color: transparent; color: var(--accent); }
button.ghost:hover { background: var(--accent-soft); border-color: transparent; }
/* danger looks dangerous before you commit to it (UI-0006) */
button.danger { color: var(--err-fg); border-color: color-mix(in srgb, var(--err) 45%, var(--line)); }
button.danger:hover { background: var(--err-bg); border-color: var(--err); }
/* quiet: present but not competing — dismissals, chrome, utilities (UI-0101) */
button.quiet { background: none; border-color: transparent; color: var(--muted); }
button.quiet:hover { background: var(--accent-soft); border-color: transparent; color: var(--text); }
button.quiet.danger { color: var(--err-fg); }
button.quiet.danger:hover { background: var(--err-bg); }
/* the last resort tier: solid red for typed-confirm commits (UI-0129) */
button.danger.solid { background: var(--err); color: var(--on-err); border-color: var(--err); }
button.danger.solid:hover { background: var(--err); border-color: var(--err); filter: brightness(1.08); }
/* disabled is a state, not a transparency effect (UI-0013) */
button:disabled, button:disabled:hover { background: var(--disabled-bg); color: var(--disabled-fg); border-color: var(--line-soft); cursor: not-allowed; transform: none; }
button.primary:disabled { background: var(--disabled-bg); color: var(--disabled-fg); }
/* one control height so bars line up (UI-0108); compact variants opt out */
button { min-height: 36px; }
button.primary { padding: 9px 15px; }
input:not([type=checkbox]):not([type=radio]):not([type=range]), select { min-height: var(--control-h); }
select { appearance: none; -webkit-appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat; }
.nav-presence select { background-image: none; padding-right: 4px; }
.nav-presence select, .jc-insp input, .jc-insp select { min-height: 0; }
button.mini, button.btn-sm, button.chip, .chip, .jc-zoomctl button, .cb-ghead button, .cbDel, .toast-x, .jc-accent, .tf-expand, .jc-ctxmenu button, .it-claim, button.icon-btn, .jc-palette button[data-add], nav#tabs button { min-height: 0; }
/* one small-button size replaces ad-hoc shrinks (UI-0110) */
button.btn-sm { font-size: var(--fs-caption); padding: 3px 10px; }
/* icon buttons: even hit areas for glyph-only chrome (UI-0123/0124) */
button.icon-btn { background: none; border-color: transparent; color: var(--muted); width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
button.icon-btn:hover { background: var(--accent-soft); border-color: transparent; color: var(--text); }
button.icon-btn.danger { color: var(--err-fg); }
button.icon-btn.danger:hover { background: var(--err-bg); }
/* pressed feedback (UI-0130) */
button:active:not(:disabled) { transform: translateY(1px); }
/* busy: the label yields to a centered ring, width unchanged (UI-0111) */
button.busy { position: relative; color: transparent !important; pointer-events: none; }
button.busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); border-top-color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); }
.panel th:first-child, .panel td:first-child { padding-left: 0; }
.panel th:last-child, .panel td:last-child { padding-right: 0; }
/* headers survive the scroll on long tables (UI-0248) */
.tableWrap { max-height: 70vh; overflow: auto; }
.tableWrap th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
th { color: var(--muted); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-caps); }
th button.ui-th-sort { background: none; border: none; padding: 0; min-height: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
th button.ui-th-sort:hover { color: var(--text); background: none; }
/* sort glyph owns fixed space so columns stop shifting (UI-0076) */
.sort-glyph { display: inline-block; width: 1.1em; text-align: center; }
tr.an-camp-row:hover td, tr.notif-click:hover, .zebra tr.an-camp-row:hover td { background: var(--accent-soft); }
.tableWrap { overflow-x: auto; }

.item {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--pad-box); margin: var(--s3) 0; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
/* when an item wraps, its action row takes a full line, right-aligned —
   every card wraps the same way instead of shedding buttons one by one
   (UI-0239, kept as flex: item children vary too much for one grid) */
.item > .row { flex: 1 1 100%; justify-content: flex-end; margin: 0; }
.item .grow { min-width: 260px; }
.push-right { margin-left: auto; }
.item .grow { flex: 1; min-width: 220px; }
.item .title { font-weight: 700; font-size: var(--fs-h3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .sub { color: var(--muted); font-size: var(--fs-small); margin-top: 2px; line-height: 1.35; }

.pill { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em; line-height: 1.5; vertical-align: baseline; }
.pill.draft { background: var(--neutral-bg); color: var(--neutral-fg); }
.pill.scheduled { background: var(--info-bg); color: var(--info-fg); }
.pill.running { background: var(--ok-bg); color: var(--ok-fg); }
.pill.paused { background: var(--warn-bg); color: var(--warn-fg); }
/* done is calm: finished work should not glow like running work */
.pill.done { background: var(--neutral-bg); color: var(--ok-fg); }
.pill.cancelled, .pill.failed { background: var(--err-bg); color: var(--err-fg); }
.pill.email { background: color-mix(in srgb, var(--ch-email) 16%, var(--panel)); color: color-mix(in srgb, var(--ch-email) 72%, var(--text)); }
.pill.sms { background: color-mix(in srgb, var(--ch-sms) 16%, var(--panel)); color: color-mix(in srgb, var(--ch-sms) 72%, var(--text)); }
.pill.whatsapp { background: color-mix(in srgb, var(--ch-whatsapp) 16%, var(--panel)); color: color-mix(in srgb, var(--ch-whatsapp) 72%, var(--text)); }
.pill.export { background: var(--neutral-bg); color: var(--accent); }

/* segmented control: joined view-switchers, one selected (UI-0118/0119) */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex-wrap: wrap; }
.seg button { border: none; border-radius: 0; background: none; min-height: 32px; padding: 5px 12px; font-size: var(--fs-body-sm); color: var(--muted); flex: 1 1 auto; }
.seg button + button { border-left: 1px solid var(--line-soft); }
.seg button:hover { background: var(--accent-soft); color: var(--text); }
.seg button.on { background: var(--panel2); color: var(--accent); font-weight: 600; }
/* wizard steps: an indicator, not a clickable chip (UI-0128) */
.step { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--muted); padding: 2px 8px; }
.step-n { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-caption); font-weight: 700; }
.step.on { color: var(--text); font-weight: 600; }
.step.on .step-n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.progress { height: 7px; background: var(--panel2); border-radius: 5px; overflow: hidden; min-width: 130px; }
/* width starts at 0 and is set through the CSSOM (el.style.width) — the page's
   CSP is style-src 'self' with no 'unsafe-inline', so an inline style= attribute
   in markup is silently dropped, which previously left every bar at 100%. */
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-grad-a), var(--accent-grad-b)); transition: width var(--dur-slow) var(--ease-out); }

/* ---- utility classes ----
   These exist because the CSP forbids inline style attributes; anything that
   would have been style="..." in markup must be a class (or CSSOM). */
.grow1 { flex: 1; }
.lbl-auto { min-width: auto; font-size: var(--fs-body-sm); color: var(--text); }
input[type=checkbox] { width: 16px; height: 16px; vertical-align: -3px; }
.lbl-dow { min-width: auto; margin-right: 10px; }
.span-all { grid-column: 1 / -1; }
.prewrap { white-space: pre-wrap; }
.m0 { margin: 0; }
.rule { border: 0; border-top: 1px solid var(--line-soft); margin: 8px 0; }

.muted { color: var(--muted); }
/* legacy: small-muted spans that relied on .muted's old 12px keep it via
   context classes below; new code uses .caption for sized captions */
p.muted, span.muted, div.muted { font-size: var(--fs-small); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-small); }

#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 16px; box-shadow: var(--shadow-2); animation: pop .18s ease-out; max-width: 380px; }
.toast.bad { border-left-color: var(--err); }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } }
.toast { position: relative; overflow: hidden; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.toast.leaving { opacity: 0; transform: translateX(20px); }
.toast-life { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent-soft-2); width: 100%; transform-origin: left; animation: toast-drain linear forwards; }
.toast:hover .toast-life { animation-play-state: paused; }
@keyframes toast-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---- journeys v0 (designer) ----
   A vertical chain: entry cap, numbered steps joined by a connector line,
   exit cap. Connectors are ::before pseudo-elements, not markup. */
.jstep {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px;
}
.jstep + .jstep { margin-top: var(--s3); position: relative; }
.jstep + .jstep::before { content: ''; position: absolute; top: -13px; left: 23px; width: 2px; height: 12px; background: var(--line); }
.jstep-cap { background: transparent; border-style: dashed; color: var(--muted); }
.jstep-n {
  background: var(--panel); border: 1px solid var(--accent); border-radius: 50%;
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); font-weight: 700;
}
.jstep-wait { width: 70px; }

/* ---- analytics v0 ----
   Bar heights are set through the CSSOM (el.style.height) — the CSP's
   style-src 'self' drops inline style attributes in markup. */
.chart { display: flex; align-items: flex-end; gap: 4px; min-height: 150px; overflow-x: auto; padding: 6px 2px 8px; }
.ch-day { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 0 auto; }
.ch-stack { display: flex; flex-direction: column-reverse; width: 100%; min-width: 10px; max-width: 26px; margin: 0 auto; }
.ch-stack i { display: block; width: 100%; }
.ch-stack i:last-child { border-radius: 3px 3px 0 0; }
.ch-email { background: var(--ch-email); }
.ch-sms { background: var(--ch-sms); }
.ch-whatsapp { background: var(--ch-whatsapp); }
.ch-lbl { font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; }
/* gridlines + cap line + today marker (UI-0659/0662/0683) */
.chart { position: relative; }
.ch-gridlines { background-image: linear-gradient(to top, transparent calc(50% - 1px), var(--line-soft) 50%, transparent calc(50% + 1px)); }
.ch-capline { position: absolute; left: 40px; right: 4px; height: 0; border-top: 2px dashed var(--warn); pointer-events: none; }
.ch-today .ch-stack { opacity: .55; }
.ch-today .ch-lbl { color: var(--accent); font-weight: 700; }
/* legend that matches the bars and filters (UI-0661) */
.ch-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ch-key { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 2px 6px; min-height: 0; color: var(--muted); font-size: var(--fs-small); cursor: pointer; border-radius: 6px; }
.ch-key.on { background: var(--accent-soft-2); color: var(--text); }
.ch-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
span.ch-key { cursor: default; }
/* delta + zero + spark bits (UI-0651/0691/0700) */
.card .delta-pos, .card .delta-neg { font-weight: 700; }
.zero { color: var(--muted); opacity: .5; }
.mini-spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 16px; width: 44px; margin-left: 8px; vertical-align: -2px; }
.mini-spark i { flex: 1; background: var(--accent-soft-2); border-radius: 1px 1px 0 0; }
.card.bad-soft { border-color: color-mix(in srgb, var(--err) 30%, var(--line)); }
/* reason share tracks (UI-0674/0675) */
.reason-track { position: relative; display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: var(--panel2); margin-right: 8px; vertical-align: 1px; overflow: hidden; }
.reason-track i { display: block; height: 100%; width: 0; background: var(--accent); }
.panel-err { border-left: 3px solid var(--err); }
.panel-err .reason-track i { background: var(--err); }
/* alert rows + group headers (UI-0667/0668) */
tr.row-alert td { background: var(--err-bg); }
tr.tbl-group td { background: var(--panel2); font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--muted); padding: 3px 10px; position: sticky; top: 25px; }

/* ---- responsive (additive only — desktop rendering above is unchanged) ---- */
/* Wide tables opt into a scroll floor; small ones just fit (UI-0928) */
@media (max-width: 700px) {
  .tableWrap.wide table { min-width: 560px; }
}
/* Phones + small tablets: single-row scrollable nav (every tab stays reachable),
   full-width form fields, ~40px tap targets. */
/* The drawer covers landscape phones too (UI-0910) */
@media (max-width: 900px) {
  nav#tabs {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100dvh; z-index: 120;
    transform: translateX(-100%); transition: transform .18s ease-out;
    box-shadow: var(--shadow-2); padding-top: 16px;
    padding-left: max(10px, env(safe-area-inset-left));
  }
  body.nav-open nav#tabs { transform: translateX(0); }
  body.nav-open { overflow: hidden; } /* the page behind holds still (UI-0911) */
  body.nav-collapsed .shell nav#tabs { display: flex; flex-basis: auto; width: auto; padding-left: max(10px, env(safe-area-inset-left)); padding-right: 10px; }
  body.nav-collapsed .shell nav#tabs .nav-lbl, body.nav-collapsed .shell nav#tabs .nav-group, body.nav-collapsed .shell nav#tabs .nav-account { display: initial; }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 8px; }
}
@media (max-width: 700px) {
  header { gap: 10px; padding: 10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 110; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  nav#tabs button { min-height: 42px; }
  #logout { margin-left: auto; }
  main { padding: 16px 12px 80px; }
  button { min-height: 40px; }
  input, select, textarea { font-size: 16px; } /* prevents mobile-Safari focus zoom */
  .bar { flex-wrap: wrap; }
  /* Form rows stack: label on its own line, fields full width. The !important
     outranks the inline style="flex:1" some fields carry — mobile only. */
  .panel .row > label { min-width: 0; flex: 1 1 100%; }
  .panel .row > input:not([type=checkbox]), .panel .row > select { flex: 1 1 100% !important; width: auto; min-width: 0; }
  .panel .row > button { flex: 1 1 100%; }
  .panel .row > button.primary { order: -1; }
  .item .row button { flex: 1 1 auto; }
  .lock { padding: 16px; }
  .lock-card { width: min(360px, 100%); padding: 28px 20px; }
  #toasts { left: 16px; }
  .toast { max-width: none; }
  .notif-panel { position: fixed; inset: auto 0 0 0; top: 30dvh; width: auto; max-width: none; max-height: 70dvh; border-radius: 14px 14px 0 0; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  /* phones: list, then the open conversation takes over with a back
     affordance (UI-0231/0379) */
  #ovCards.cards-4 { grid-template-columns: repeat(2, 1fr); }
  .inbox-wrap { flex-direction: column; height: auto; }
  .inbox-threads { width: auto; max-height: 40vh; }
  .ib-timeline { max-height: 50vh; }
  body.thread-open .inbox-threads, body.thread-open #inboxTeam, body.thread-open .ib-toolbar { display: none; }
  body.thread-open .ib-back { display: inline-flex; align-self: flex-start; }
  /* toolbars outside .panel stack too (UI-0913) */
  .jr-toolbar, .ib-toolbar, .seg-toolbar { flex-direction: column; align-items: stretch; }
  .jr-toolbar > *, .ib-toolbar > *, .seg-toolbar > * { width: 100%; max-width: none; }
  /* nested field spans stack (UI-0914) */
  .row > span.row { flex-direction: column; align-items: stretch; width: 100%; }
  /* stat cards two-up (UI-0932) */
  .cards { grid-template-columns: repeat(2, 1fr); }
  /* one-row header (UI-0933) */
  #cmdK { display: none; }
  .live-chip { display: none; }
  /* wizard nav wraps; estimate on its own line (UI-0937) */
  .wiz-nav { flex-wrap: wrap; }
  #cfEstimate { flex-basis: 100%; }
  /* wizard footer sticks (UI-0938) */
  #campaignForm > .row:last-of-type { position: sticky; bottom: 0; background: var(--panel); padding: 8px 0 max(8px, env(safe-area-inset-bottom)); z-index: 3; }
  /* toasts clear the sticky composer + home bar (UI-0941) */
  #toasts { bottom: max(16px, env(safe-area-inset-bottom)); }
  body[data-tab="inbox"] #toasts { bottom: calc(150px + env(safe-area-inset-bottom)); }
  /* insight strip scrolls instead of stacking a wall (UI-0946) */
  #anInsightBtns.seg { display: flex; flex-wrap: nowrap; overflow-x: auto; }
  #anInsightBtns.seg button { flex: 0 0 auto; }
  /* inbox filters behind a disclosure (UI-0947) */
  .ib-filters-toggle { display: inline-flex; align-self: flex-start; }
  .ib-toolbar:not(.open) > *:not(.ib-search-wrap) { display: none; }
  body.thread-open .ib-filters-toggle { display: none; }
  /* the thread-header actions scroll sideways as one strip (UI-0921) */
  .ib-actions { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .ib-actions > * { flex: 0 0 auto; }
}
/* mid widths: the thread list narrows before the conversation starves (UI-0916) */
@media (min-width: 701px) and (max-width: 1000px) {
  .inbox-threads { width: 240px; }
}
/* bubbles claim the width phones actually have (UI-0917) */
@media (max-width: 480px) {
  .ib-msg { max-width: 88%; }
  .cb-group .cb-group { margin-left: 6px; }
  .cb-leaf select, .cb-leaf input { max-width: none; flex: 1; }
}
/* short landscape (UI-0949) */
@media (max-height: 500px) and (orientation: landscape) {
  header { padding: 6px 12px; }
  main { padding: 10px 12px 40px; }
  .empty-state { padding: 16px; }
  .inbox-wrap { height: auto; }
}

/* Segment preview — the funnel, warning notes and the headline count.
   Every rule lives here because the dashboard's CSP is style-src 'self':
   an inline style attribute is silently dropped, so only the CSSOM (used for
   the funnel bar widths) and this stylesheet actually apply. */
.big { font-size: 1.6rem; }
.stat-lg { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-lg small { font-size: var(--fs-body-sm); color: var(--muted); font-weight: 400; margin-left: 6px; }
/* headline number inside a sentence (UI-0078) */
.stat-inline { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.note {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 6px;
  border-left: 3px solid var(--line);
  background: var(--note-bg); font-size: var(--fs-body-sm); text-wrap: pretty;
}
.note-warn { border-left-color: var(--warn); background: var(--warn-bg); }
/* Status notes state a fact ("Auto-reply blocked: human mode") — they inform,
   they don't alarm. Muted text, hairline border, no severity stripe. */
.note-quiet { border-left-color: var(--line); color: var(--muted); font-size: 12.5px; }
.note-err { border-left-color: var(--err); background: var(--err-bg); }
.funnel { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 5px; }
.fn-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(80px, 2fr) auto; gap: 10px; align-items: center; font-size: 12.5px; }
.fn-label { overflow-wrap: anywhere; }
.fn-track { height: 8px; border-radius: 99px; background: var(--track-bg); overflow: hidden; }
.fn-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, var(--panel)), var(--accent)); transition: width var(--dur-slow) var(--ease-out); }
.fn-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .fn-row { grid-template-columns: 1fr auto; }
  .fn-track { grid-column: 1 / -1; }
}

/* ---- journey canvas -------------------------------------------------------
   The full-viewport SVG graph editor (journey-canvas.js). Everything here
   because the CSP drops inline styles; SVG geometry uses attributes. */
.jc-root { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--bg); }
.jc-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.jc-cluster { display: inline-flex; gap: 4px; align-items: center; padding: 0 8px; border-left: 1px solid var(--line-soft); }
.jc-verlbl { margin-left: 4px; }
.jc-head button.on { background: var(--accent-soft-2); color: var(--accent); border-color: transparent; }
.jc-ss-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 5px; vertical-align: 0; }
.jc-save-state[data-state="dirty"] .jc-ss-dot { background: var(--warn); }
.jc-save-state[data-state="version"] .jc-ss-dot { background: var(--info); }
.jc-save-state { font-size: var(--fs-caption); }
.jc-val-bad { color: var(--err-fg); border-color: color-mix(in srgb, var(--err) 45%, var(--line)); }
.jc-val-ok { color: var(--ok-fg); }
.jc-name { font-size: 1.05rem; font-weight: 600; background: transparent; border: 1px solid transparent; color: inherit; padding: 6px 8px; border-radius: 6px; min-width: 260px; }
.jc-name:hover, .jc-name:focus { border-color: var(--line); background: var(--bg); }
.jc-save-state { font-size: .85rem; }
.jc-body { display: flex; flex: 1; min-height: 0; }
.jc-palette { width: 190px; border-right: 1px solid var(--line); padding: 12px; overflow-y: auto; background: var(--panel); }
.jc-pal-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.jc-palette button[data-add] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin-bottom: 6px; text-align: left; padding: 8px 10px; }
.jc-palette button[data-add] span { font-size: .78rem; }
.jc-problems { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.jc-stage-wrap { flex: 1; min-width: 0; position: relative; }
.jc-stage { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.jc-stage:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.jc-stage:active { cursor: grabbing; }
.jc-grid-dot { fill: var(--line); }
.jc-inspector { width: 250px; border-left: 1px solid var(--line); padding: 14px; overflow-y: auto; background: var(--panel); }
.jc-insp { display: flex; flex-direction: column; gap: 8px; }
.jc-insp-title { font-weight: 700; margin-bottom: 4px; }
.jc-insp label { font-size: .8rem; color: var(--muted); }
.jc-insp input, .jc-insp select { width: 100%; }
.jc-insp .jc-del-node { margin-top: 14px; }
.jc-insp-empty { padding: 10px; font-size: .85rem; }
.jc-node { cursor: move; }
.jc-node-box { fill: var(--panel); stroke: var(--line); stroke-width: 1.2; }
.jc-node.jc-selected .jc-node-box { stroke: var(--accent); stroke-width: 2; }
.jc-entry .jc-node-box { stroke: var(--jc-entry); }
.jc-message .jc-node-box { stroke: var(--jc-message); }
.jc-condition .jc-node-box, .jc-split .jc-node-box { stroke: var(--jc-condition); }
.jc-exit .jc-node-box { stroke: var(--jc-exit); }
.jc-node-title { font-size: 12px; font-weight: 700; fill: currentColor; }
.jc-node-sub { font-size: 10.5px; fill: var(--muted); }
.jc-port { fill: var(--accent); stroke: var(--bg); stroke-width: 2; cursor: crosshair; }
.jc-edge { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.jc-edge.jc-selected { stroke: var(--accent); stroke-width: 2.4; }
.jc-edge-draft { stroke-dasharray: 5 4; }
.jc-edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.jc-edge-label { font-size: 10px; fill: var(--accent); font-weight: 700; text-transform: uppercase; }
.jc-arrow { fill: var(--muted); }
.jc-badge circle { fill: var(--accent); }
.jc-badge text { font-size: 9px; font-weight: 700; fill: var(--bg); }

/* ---- inbox ---------------------------------------------------------------- */
/* both panes end together: one height, owned by the wrap (UI-0221) */
.inbox-wrap { display: flex; gap: 14px; align-items: stretch; height: calc(100vh - var(--header-h) - 210px); min-height: 420px; }
.inbox-threads { width: clamp(260px, 26vw, 340px); flex-shrink: 0; display: flex; flex-direction: column; gap: 0; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.inbox-threads::-webkit-scrollbar { width: 8px; }
.inbox-threads::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.inbox-thread { border: 0; border-bottom: 1px solid var(--line-soft); border-left: 3px solid transparent; border-radius: 0; padding: 8px 10px; cursor: pointer; background: none; transition: background-color .12s ease, border-color .12s ease; }
/* card anatomy: avatar | identity+preview | time+claim (UI-0224/0394) */
.inbox-thread { display: grid; grid-template-columns: 28px 1fr auto; gap: 2px 8px; align-items: start; }
.it-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--panel2); color: var(--accent); font-size: var(--fs-caption); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; grid-row: 1 / span 2; margin-top: 2px; }
.it-main { min-width: 0; }
.inbox-thread .it-top { min-width: 0; flex-wrap: wrap; }
.it-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.inbox-thread .it-ts { text-align: right; white-space: nowrap; margin-top: 0; }
.it-top .pill.unread { margin-left: auto; }
.it-you { font-style: italic; color: var(--muted); }
/* pane header + group headers (UI-0360/0372) */
.it-panehead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--panel); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-small); color: var(--muted); }
.it-panehead select { min-height: 26px; font-size: var(--fs-caption); padding: 2px 22px 2px 6px; background-color: transparent; border-color: transparent; }
.it-group { position: sticky; top: 37px; z-index: 1; padding: 4px 10px; background: var(--panel); font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--muted); border-bottom: 1px solid var(--line-soft); }
.it-filternote { padding: 6px 10px; font-size: var(--fs-caption); border-bottom: 1px solid var(--line-soft); }
.it-more { width: 100%; border-radius: 0; }
/* unread badge is attention-colored, not status-green (UI-0357) */
.pill.unread { background: var(--accent); color: var(--on-accent); }
/* search dropdown (UI-0381) */
.ib-search-wrap { position: relative; display: block; }
.ib-search-drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 70; margin: 0; max-height: 50vh; overflow-y: auto; box-shadow: var(--shadow-2); }
.ib-search-drop mark { background: var(--accent-soft-2); color: var(--accent); border-radius: 2px; }
.ib-searching { padding: 6px 8px; }
.ib-back { display: none; }
/* hover suggests, selected states, unread flags — and their precedence
   when combined is explicit (UI-0351/0391) */
.inbox-thread:hover { background: var(--accent-soft); }
.inbox-thread.unread { border-left-color: var(--accent); }
.inbox-thread.on, .inbox-thread.on.unread { border-left-color: var(--accent); background: var(--panel2); }
.inbox-thread:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
/* SLA aging on waiting threads (UI-0359) */
.inbox-thread.age-warn .it-ts { color: var(--warn-fg); font-weight: 600; }
.inbox-thread.age-crit .it-ts { color: var(--err-fg); font-weight: 700; }
.inbox-thread.age-crit { border-left-color: var(--err); }
/* unclaimed waiting: a card asking to be taken (UI-0367) */
.inbox-thread.unclaimed { background: color-mix(in srgb, var(--warn) 5%, transparent); }
.inbox-thread.is-closed { opacity: .6; }
.inbox-thread.skeleton .it-top, .inbox-thread.skeleton .it-preview { background: var(--panel2); border-radius: 4px; min-height: 12px; margin: 3px 0; }
.inbox-thread.arrived { animation: thread-in var(--dur-slow) var(--ease-out); }
@keyframes thread-in { from { opacity: 0; transform: translateY(-6px); background: var(--accent-soft-2); } 60% { background: var(--accent-soft-2); } }
.inbox-thread.claimed { animation: claim-glow 900ms var(--ease-out); }
@keyframes claim-glow { 30% { background: var(--ok-bg); } }
/* three levels, no more: name 13/700, preview 12 muted, time 11 (UI-0058) */
.it-top { display: flex; gap: 8px; align-items: center; }
.it-top b { flex: 1; min-width: 0; font-size: var(--fs-body-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-preview { font-size: var(--fs-small); color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.it-ts { font-size: var(--fs-caption); color: var(--muted); margin-top: 2px; line-height: 1.35; }
/* unread differs by weight, not border alone (UI-0059) */
.inbox-thread.unread .it-top b { font-weight: 800; }
.inbox-thread.unread .it-preview { color: var(--text); }
.inbox-view { flex: 1; min-width: 0; display: flex; flex-direction: column; animation: pane-in var(--dur-fast) var(--ease-out); }
@keyframes pane-in { from { opacity: .35; } }
.pane-empty { flex: 1; display: grid; place-items: center; color: var(--muted); text-align: center; padding: var(--s5); }
/* thread header: identity row, then an actions toolbar row (UI-0225) */
.ib-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.ib-head .bar { margin-top: 0; }
.ib-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ib-actions .grow1 { flex: 1; }
.ib-timeline { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; scrollbar-gutter: stable; }
/* A bubble is as wide as its words, up to a readable measure — never 78% of
   a wide pane (one long reply was stretching most of the screen while "Sup"
   sat in a matchbox; both are now sized to content under the same cap). */
.ib-msg { max-width: min(72%, 520px); }
.ib-msg.in { align-self: flex-start; }
.ib-msg.out { align-self: flex-end; text-align: right; }
.ib-bubble { display: inline-block; padding: 8px 12px; border-radius: 14px; background: var(--bubble-in); border: 1px solid var(--line-soft); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 65ch; font-size: .95rem; line-height: 1.45; }
/* the corner tail marks only the LAST bubble of a group (UI-0405) */
.ib-msg.in.tail .ib-bubble { border-bottom-left-radius: 4px; }
.ib-msg.out .ib-bubble { background: var(--bubble-out); border-color: var(--accent-soft-2); }
.ib-msg.out.tail .ib-bubble { border-bottom-right-radius: 4px; }
/* grouped bubbles sit tight; the gap belongs between groups (UI-0404) */
.ib-msg { margin-bottom: 2px; }
.ib-msg.tail { margin-bottom: 8px; }
/* AI-sent bubbles wear a dashed accent (UI-0421) */
.ib-msg.ai .ib-bubble { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pill.ai { background: var(--accent-soft-2); color: var(--accent); }
/* failure lives on the bubble (UI-0429) */
.ib-msg.failed .ib-bubble { border-color: color-mix(in srgb, var(--err) 55%, var(--line)); background: var(--err-bg); }
.ib-check { color: var(--ok-fg); font-weight: 700; }
/* long messages fold (UI-0448) */
.ib-bubble.clamped { max-height: 21em; overflow: hidden; position: relative; }
.ib-expand { align-self: inherit; }
/* media (UI-0433/0434) */
.ib-thumb { display: block; max-width: min(240px, 100%); max-height: 200px; border-radius: 10px; border: 1px solid var(--line-soft); cursor: zoom-in; margin-bottom: 4px; }
.ib-lightbox img { max-width: 100%; max-height: 70vh; border-radius: 8px; }
.ib-lightbox { max-width: 720px; }
/* day + unread separators (UI-0406/0445) */
.ib-day { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--muted); font-size: var(--fs-caption); }
.ib-day::before, .ib-day::after { content: ''; flex: 1; border-top: 1px solid var(--line-soft); }
.ib-unread-rule { color: var(--accent); font-weight: 700; }
.ib-unread-rule::before, .ib-unread-rule::after { border-top-color: color-mix(in srgb, var(--accent) 45%, transparent); }
/* system chips (UI-0423/0424/0425) */
.ib-sys { display: flex; align-items: center; gap: 10px; text-align: center; font-size: var(--fs-caption); color: var(--muted); padding: 2px 0; }
.ib-sys::before, .ib-sys::after { content: ''; flex: 1; border-top: 1px solid var(--line-soft); }
.ib-sys-chip { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 10px; white-space: nowrap; max-width: 80%; overflow: hidden; text-overflow: ellipsis; }
.ib-sys-send .ib-sys-chip { border-color: var(--accent-soft-2); color: var(--text); }
.ib-sys-link { background: none; border: none; padding: 0; min-height: 0; color: var(--amber2); font-size: inherit; font-weight: 600; cursor: pointer; }
.ib-sys-link:hover { color: var(--accent); background: none; }
/* pending drafts are almost-bubbles (UI-0447) */
.ib-msg.draft-pending .ib-bubble { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); opacity: .9; }
.ib-msg.draft-pending { align-self: flex-end; text-align: right; margin-bottom: 8px; }
.ib-draft-actions { justify-content: flex-end; margin-top: 4px; }
/* jump pill (UI-0416) */
.ib-jump { position: sticky; bottom: 8px; align-self: center; background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px; padding: 5px 14px; font-weight: 700; font-size: var(--fs-small); box-shadow: var(--shadow-1); min-height: 0; }
.ib-jump:hover { background: var(--accent); filter: brightness(1.08); }
.ib-meta { font-size: var(--fs-caption); color: var(--muted); margin-top: 3px; line-height: 1.35; }
/* the composer is a docked input bar, not another floating row (UI-0458) */
.ib-compose { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 8px; position: sticky; bottom: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow-1); }
.ib-mode-row { display: flex; align-items: center; gap: 8px; }
/* note mode is unmistakable (UI-0476) */
.ib-compose--note { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.ib-compose--note textarea { background: color-mix(in srgb, var(--accent) 8%, var(--field-bg)); border-left: 3px solid var(--accent); }
.ib-hint { display: flex; align-items: center; gap: 10px; font-size: var(--fs-caption); flex-wrap: wrap; }
.ib-hint .err { min-height: 0; margin: 0; flex: 1; text-align: right; }
kbd { background: var(--panel2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: var(--fs-caption); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
#ibSend { min-width: 88px; }
/* draft tray above the composer (UI-0487) */
.ib-draft-tray { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-top: 6px; }
.ib-msg.draft-pending.stale { opacity: .55; }
.ib-msg.draft-pending.drafting .ib-bubble { animation: pulse 1.2s infinite; }
.ib-msg.out.pending { align-self: flex-end; text-align: right; opacity: .7; }
.ib-note.flash { animation: noteflash 1.2s ease-out 2; }
@keyframes noteflash { 50% { background: var(--accent-soft-2); } }
/* quiet-hours strip attached to the composer (UI-0495) */
.ib-quiet { border-left-color: var(--info); background: var(--info-bg); font-size: var(--fs-small); }
.ib-sched { display: flex; align-items: center; gap: 8px; }
/* canned picker popover (UI-0481) */
.ib-canned-pop { min-width: 300px; max-width: 380px; }
.ib-cp-filter { width: 100%; min-height: 30px; margin-bottom: 4px; }
.ib-cp-row { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; position: relative; padding-right: 26px !important; }
.ib-cp-row .caption { max-width: 100%; }
.ib-cp-del { position: absolute; right: 8px; top: 6px; color: var(--err-fg); font-weight: 700; cursor: pointer; padding: 2px 4px; }
.ib-cp-none { padding: 6px 8px; font-size: var(--fs-small); }
.ib-cp-save { width: 100%; text-align: center; margin-top: 4px; }
.ib-compose textarea { width: 100%; min-height: 64px; }
.ib-compose-controls { display: flex; gap: 8px; align-items: center; }
.ib-compose-controls .grow1 { flex: 1; }

/* ---- inbox additions: drafts, canned replies, assignment, personas ---- */
.ib-draft { margin-top: 8px; }
.ib-draft-body { white-space: pre-wrap; margin: 6px 0; }
.ib-assignee { width: 110px; }
.ib-assignee-wrap { display: inline-flex; align-items: center; gap: 2px; background: var(--field-bg); border: 1px solid var(--line-soft); border-radius: 8px; padding: 0 4px 0 8px; margin-right: 4px; }
.ib-assignee-wrap .ib-assignee { background: none; border: none; min-height: 32px; }
.ib-canned { max-width: 130px; }
.grid2 .span2 { grid-column: 1 / -1; }
#personaPanel form { margin-top: 12px; }
#personaPanel textarea { width: 100%; }
.ib-sys { text-align: center; font-size: .74rem; padding: 2px 0; }
.ib-profile { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: var(--fs-small); color: var(--muted); padding: 4px 0 8px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.ib-profile .chip { border: 1px solid var(--line-soft); background: var(--panel); }
/* thread header: one 16px lead with baseline-aligned tags (UI-0063) */
.inbox-view h3 { font-size: 16px; font-weight: 650; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* card leads read as overlines, not body bold (UI-0096) */
.note-overline { display: block; font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--muted); margin-bottom: 2px; }
/* the naked assignee box gets a name (UI-0064) */
.cap-label { font-size: var(--fs-caption); color: var(--muted); text-transform: uppercase; letter-spacing: var(--ls-caps); margin-right: 4px; }
/* P2 inbound-ai: toolbar, search hits, internal notes, retry buttons */
.ib-toolbar { margin-bottom: 8px; align-items: center; }
.ib-toolbar .chip { font-size: .78rem; padding: 3px 10px; border-radius: 12px; }
.ib-toolbar .chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ib-hit { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); cursor: pointer; font-size: .82rem; }
.ib-hit:hover { background: var(--panel2); }
.ib-note { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border-left: 3px solid var(--accent); border-radius: 6px; padding: 8px 12px; margin: 6px 0 10px; max-width: min(78%, 56ch); font-size: .88rem; white-space: pre-wrap; }
.ib-note .note-overline { color: var(--accent); }
button.mini { font-size: var(--fs-caption); padding: 2px 8px; }
button.retry-err { border-color: color-mix(in srgb, var(--err) 45%, var(--line)); color: var(--err-fg); }
button.retry-err:hover { background: var(--err-bg); border-color: var(--err); }

/* ---- canvas v2: zoom controls, marquee, validity, badges, simulation ---- */
.jc-zoomctl { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.jc-zoomctl button { padding: 4px 10px; font-size: .8rem; min-width: 28px; min-height: 28px; }
.jc-marquee { fill: var(--accent-soft); stroke: var(--accent); stroke-dasharray: 4 3; stroke-width: 1; }
/* P2 canvas: guides, minimap, notes, context menu, accents, metrics */
.jc-guide { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 6 4; opacity: .7; }
.jc-minimap { position: absolute; right: 12px; bottom: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }
.jc-mm-bg { fill: transparent; }
.jc-mm-node { fill: var(--muted); opacity: .7; }
.jc-mm-entry { fill: var(--accent); }
.jc-mm-exit { fill: var(--jc-exit); }
.jc-mm-view { fill: var(--accent-soft-2); stroke: var(--accent); stroke-width: 1; }
.jc-note-box { fill: var(--accent-soft-2); stroke: color-mix(in srgb, var(--accent) 50%, transparent); }
.jc-note-text { font-size: .72rem; fill: var(--fg); }
.jc-node-metrics { font-size: .66rem; fill: var(--muted); }
.jc-edge-caption { font-size: .64rem; fill: var(--muted); }
.jc-edge-handle { fill: var(--panel); stroke: var(--accent); stroke-width: 2; cursor: grab; }
.jc-ctxmenu { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 160px; box-shadow: var(--shadow-2); }
.jc-ctxmenu button { text-align: left; padding: 4px 10px; font-size: .82rem; border: 0; background: transparent; }
.jc-ctxmenu button:hover { background: var(--panel2); }
.jc-ctxmenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.jc-ctx-title { font-size: .7rem; padding: 2px 10px; }
.jc-accents { display: flex; gap: 6px; margin: 4px 0; }
.jc-accent { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); padding: 0; }
.jc-accent.on { border-color: var(--fg); }
.jr-toolbar { margin-bottom: 8px; align-items: center; }
/* P2 analytics: failed series, axis, heatmap, clickable rows */
.ch-failed { background: var(--err); opacity: .75; }
.ch-axis { display: flex; flex-direction: column; justify-content: space-between; height: 120px; margin-right: 6px; }
.ch-axis-lbl { font-size: var(--fs-caption); color: var(--muted); }
.an-heat th { font-size: var(--fs-caption); padding: 2px 4px; }
.an-heat-cell { text-align: center; padding: 2px 4px; font-size: .68rem; }
/* intensity ramp: JS assigns heat-1..heat-9 from the bucket value (UI-0044) */
.heat-1 { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.heat-2 { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.heat-3 { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.heat-4 { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.heat-5 { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.heat-6 { background: color-mix(in srgb, var(--accent) 36%, transparent); }
.heat-7 { background: color-mix(in srgb, var(--accent) 42%, transparent); }
.heat-8 { background: color-mix(in srgb, var(--accent) 48%, transparent); }
.heat-9 { background: color-mix(in srgb, var(--accent) 56%, transparent); color: var(--text); }
.an-camp-row { cursor: pointer; }
/* P2 frontend: loading bar, SSE dot, offline banner, skip link */
.load-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent-grad-a), var(--accent-grad-b)); transform: scaleX(0); transform-origin: left; transition: transform .3s; z-index: 200; }
.load-bar.on { transform: scaleX(.8); animation: loadcrawl 1.2s ease-out infinite alternate; }
.load-bar.done { transform: scaleX(1); opacity: 0; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-slow) var(--ease-out) var(--dur-fast); }
@keyframes loadcrawl { from { transform: scaleX(.3); } to { transform: scaleX(.85); } }
.sse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 8px; vertical-align: middle; }
.live-chip.live-up { animation: badge-in var(--dur-slow) var(--ease-out); }
.sse-up { background: var(--ok); }
.sse-down { background: var(--warn); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.offline-banner { position: fixed; top: 0; left: 0; right: 0; background: var(--err); color: var(--on-err); text-align: center; padding: 4px; font-size: .8rem; z-index: 201; animation: banner-in var(--dur-base) var(--ease-out); }
@keyframes banner-in { from { transform: translateY(-100%); } }
.offline-banner.reconnected { background: var(--ok); transition: background-color var(--dur-base); }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--on-accent); padding: 8px 14px; z-index: 300; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
.tab-dot::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 4px; vertical-align: super; }
.act-full { white-space: pre-wrap; max-width: 480px; font-size: var(--fs-small); }
.act-detail summary { cursor: pointer; list-style: none; }
.cmd-palette { position: fixed; top: 15%; left: 50%; transform: translateX(-50%); width: 420px; max-width: 92vw; background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; box-shadow: var(--shadow-3); z-index: 250; padding: 8px; animation: palette-in var(--dur-fast) var(--ease-out); }
@keyframes palette-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } }
.cmd-palette input { width: 100%; margin-bottom: 6px; }
.cmd-row { padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.cmd-row.on, .cmd-row:hover { background: var(--panel2); color: var(--accent); }
.cmd-hint { font-size: var(--fs-caption); text-align: center; padding: 6px 0 2px; border-top: 1px solid var(--line-soft); margin-top: 4px; }
.kbd-table td { padding: 4px 12px 4px 0; font-size: var(--fs-body-sm); vertical-align: top; }
.kbd-key { color: var(--accent); white-space: nowrap; }
.crumbs { margin: 0 0 4px; }
.jc-node.jc-drop-ok .jc-node-box { stroke: var(--jc-entry); stroke-width: 2.4; }
.jc-node.jc-drop-bad .jc-node-box { stroke: var(--err); stroke-width: 2.4; stroke-dasharray: 4 3; }
.jc-edge-ok { stroke: var(--jc-entry); }
.jc-edge-bad { stroke: var(--err); }
.jc-node.jc-has-err .jc-node-box { stroke: var(--err); }
.jc-node.jc-has-warn .jc-node-box { stroke: var(--warn); }
.jc-vbadge circle { fill: var(--err); }
.jc-node.jc-has-warn .jc-vbadge circle { fill: var(--warn); }
.jc-vbadge text { font-size: 11px; font-weight: 800; fill: var(--bg); }
.jc-node.jc-sim .jc-node-box { stroke-width: 2.4; filter: none; }
.jc-simbadge circle { fill: var(--jc-message); }
.jc-simbadge text { font-size: 10px; font-weight: 700; fill: #fff; } /* raw-ok: white ink on the fixed blue sim badge, both themes */
.jc-sim-step { padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: .84rem; }
.jc-sim-step:hover { background: var(--bg); }
.jc-keys-title { margin-top: 14px; }
.jc-keys { font-size: .72rem; line-height: 1.5; }
.jc-versions { max-width: 170px; }
.jc-tpl-preview { border: 1px solid var(--line); border-radius: 6px; padding: 8px; font-size: .78rem; white-space: pre-wrap; max-height: 140px; overflow-y: auto; }
.jc-audience { font-size: .8rem; }
.jc-advisory { font-size: .76rem; }
.jc-stage.jc-panning { cursor: grab; }
.jc-prob-link { cursor: pointer; }

/* ---- segments v2: toolbar, condition builder ---- */
.seg-toolbar { margin-bottom: 10px; }
/* nested condition groups tint by depth (UI-0565) */
.cb-group { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 6px 0; display: flex; flex-direction: column; gap: 4px; }
.cb-group .cb-group { margin-left: 14px; }
.cb-depth-1 { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.cb-depth-2 { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.cb-depth-3 { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.pill.err { background: var(--err-bg); color: var(--err-fg); }
/* base pill gets a visible neutral ground (UI-0567) */
.pill:not([class*=" "]) { background: var(--neutral-bg); color: var(--neutral-fg); }
/* segment type pills stop borrowing lifecycle colors (UI-0573) */
.pill.seg-dynamic { background: var(--info-bg); color: var(--info-fg); }
.pill.seg-static { background: var(--neutral-bg); color: var(--neutral-fg); }
/* preview hero + sections (UI-0552/0569) */
.preview-hero { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.preview-cov { display: inline-flex; gap: 6px; margin-left: auto; }
.pv-head { margin-top: 14px; }
.pv-warnrow { display: flex; align-items: center; gap: 8px; }
.delta-neg { color: var(--err-fg); font-variant-numeric: tabular-nums; }
.delta-pos { color: var(--ok-fg); font-variant-numeric: tabular-nums; }
/* segment card stat (UI-0574) */
.item-stat { text-align: right; min-width: 90px; }
.item-stat .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tag-row { display: flex; gap: 4px; flex-wrap: wrap; }
/* form footer sticks (UI-0558) */
.sf-footer { position: sticky; bottom: 0; background: var(--panel); border-top: 1px solid var(--line-soft); padding: 10px 0 4px; margin-top: 10px; z-index: 3; }
.sf-live .tnum { font-size: var(--fs-h3); }
#sfLiveCount.counting { opacity: .5; }
.sf-bools .chip { cursor: pointer; }
.sf-bools .chip-cb { position: absolute; opacity: 0; pointer-events: none; }
.sf-bools .chip { position: relative; }
.sf-rec-details summary { cursor: pointer; font-size: var(--fs-small); color: var(--muted); margin: 6px 0; }
/* overlap band (UI-0580) */
.overlap-band { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: 8px 0 4px; border: 1px solid var(--line-soft); }
.overlap-band i { display: block; height: 100%; }
.ob-a { background: var(--info); }
.ob-both { background: var(--accent); }
.ob-b { background: var(--ch-whatsapp); }
.ob-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
/* CSV preview id column (UI-0581) */
.csv-preview .csv-id { background: var(--accent-soft-2); }
/* snippets edit mode (UI-0591) */
.row.editing { background: var(--accent-soft); border-radius: 8px; }
/* sms meter tracks (UI-0556) */
.cap-warm-track i { background: var(--warn); }
.cap-hot-track i { background: var(--err); }
.tf-smsrow { align-items: center; }
/* message mock (UI-0594) */
.msg-mock { display: inline-block; background: var(--bubble-out); border: 1px solid var(--accent-soft-2); border-radius: 14px; padding: 8px 12px; max-width: 46ch; }
/* issues + diff (UI-0586/0595/0597) */
.note-ok { border-left-color: var(--ok); background: var(--ok-bg); }
.issue-head { margin: 4px 0; }
.issue-head .err { min-height: 0; }
.diff-block { border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 10px; margin-top: 6px; }
.diff-gutter { display: inline-block; width: 1.4em; font-weight: 700; }
.ver-current td { background: var(--accent-soft); }
.pane-head-t { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--muted); }
.cb-ghead { flex-wrap: wrap; gap: 6px; }
.cb-ghead button { padding: 2px 8px; font-size: .78rem; }
.cb-leaf { flex-wrap: wrap; gap: 6px; align-items: center; }
.cb-leaf select, .cb-leaf input { max-width: 180px; }
.cb-hint { font-size: .72rem; }
.cbDel { padding: 2px 8px; }
.w70 { width: 70px; } .w90 { width: 90px; }

/* ---- template editor v2 ---- */
.tf-split { display: flex; gap: 12px; align-items: stretch; }
.tf-editor { position: relative; flex: 1; min-width: 0; }
.tf-editor textarea { position: relative; width: 100%; min-height: 220px; background: transparent; color: transparent; caret-color: var(--fg); resize: vertical; z-index: 2; }
.tf-hl { position: absolute; inset: 0; margin: 0; padding: 8px; overflow: auto; white-space: pre-wrap; word-wrap: break-word; pointer-events: none; z-index: 1; color: var(--fg); font-size: 13px; line-height: 1.45; border: 1px solid transparent; }
.tf-editor textarea, .tf-hl { font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.45; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; letter-spacing: 0; font-variant-ligatures: none; tab-size: 4; }
.tf-tok { color: var(--accent); }
.tf-tok-err { text-decoration: underline wavy var(--err); }
.tf-preview-pane { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tf-live { overflow-y: auto; flex: 1; min-height: 0; max-height: 65vh; }
.tf-mail-frame { width: 100%; min-height: 240px; border: 1px solid var(--line); border-radius: 6px; background: #fff; } /* raw-ok: email preview renders on white regardless of dashboard theme */
.tf-chip { padding: 1px 7px; font-size: var(--fs-caption); margin: 1px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; border-style: dashed; }
.tf-chip::before { content: '+ '; color: var(--accent); font-weight: 700; }
.bb-row { align-items: center; gap: 6px; margin: 4px 0; }
.bb-handle { cursor: grab; color: var(--muted); }
.tf-diff-add { background: color-mix(in srgb, var(--ok) 15%, transparent); }
.tf-diff-del { background: color-mix(in srgb, var(--err) 15%, transparent); text-decoration: line-through; }
@media (max-width: 900px) { .tf-split { flex-direction: column; } }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ch-card { display: flex; flex-direction: column; gap: 6px; }

/* ---- frontend front: a11y, chips, bell, modal, table, toasts v2 ---- */
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
/* an accent ring vanishes beside an accent fill — those get the text tone (UI-0016) */
button.primary:focus-visible, .chip.on:focus-visible, .ib-toolbar .chip.on:focus-visible { outline-color: var(--text); }
.chip { padding: 2px 10px; border-radius: 999px; font-size: var(--fs-caption); font-weight: 600; line-height: 1.5; vertical-align: baseline; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.chip.on { animation: chip-tick var(--dur-base) var(--ease-out); }
@keyframes chip-tick { 50% { transform: scale(1.06); } }
.chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.chip.on::before { content: '✓ '; font-weight: 700; }
.bell { position: relative; background: transparent; border: none; font-size: 1.05rem; cursor: pointer; }
.bell-dot { position: absolute; top: -2px; right: -2px; min-width: 15px; height: 15px; border-radius: 999px; background: var(--err); color: var(--on-err); font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; padding: 0 3px; font-variant-numeric: tabular-nums; animation: badge-in var(--dur-slow) var(--ease-out); }
@keyframes badge-in { 0% { transform: scale(0); } 60% { transform: scale(1.25); } }
.bell.ringing { animation: bell-ring 600ms var(--ease-out); }
@keyframes bell-ring { 20% { transform: rotate(12deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } 80% { transform: rotate(-4deg); } }
.tab-dot::after { animation: badge-in var(--dur-slow) var(--ease-out); }
.bell-wrap { position: relative; display: inline-flex; }
.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; width: 380px; max-width: 90vw; max-height: 60vh; overflow-y: auto; transform-origin: top right; animation: panel-in var(--dur-fast) var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: scale(.96); } }
.bell-more { display: block; text-align: center; padding: 8px 0 2px; font-size: var(--fs-small); }
.notif-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); font-size: .8rem; }
.notif-row.notif-bad .mono { color: var(--err); }
.ui-modal { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 18px; max-width: 460px; width: 90vw; }
.ui-modal[open] { animation: modal-in var(--dur-base) var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ui-modal::backdrop { animation: fade-in var(--dur-base) var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } }
/* rejected input shakes (UI-0828) */
.shake { animation: shake 300ms var(--ease-out); }
@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.ui-modal::backdrop { background: var(--scrim); }
.ui-modal-form { display: flex; flex-direction: column; gap: 12px; }
.ui-modal-body { white-space: pre-wrap; }
.ui-modal-actions { justify-content: flex-end; }
.ui-modal-input { width: 100%; }
.ui-modal-lbl { display: block; font-size: var(--fs-small); color: var(--muted); font-weight: 500; margin: 8px 0 2px; }
.ui-modal-field { width: 100%; }
.ui-tbl-bar { margin: 6px 0; }
.ui-th-sort { cursor: pointer; user-select: none; }
.ui-tbl-pages { justify-content: center; margin-top: 6px; }
.toast { display: flex; align-items: center; gap: 8px; }
.toast-ico { font-weight: 700; flex: 0 0 auto; }
.toast-success .toast-ico { color: var(--ok-fg); }
.toast-error .toast-ico { color: var(--err-fg); }
.toast-info .toast-ico { color: var(--info-fg); }
.toast-count { background: var(--panel); border-radius: 999px; font-size: var(--fs-caption); font-weight: 700; padding: 0 6px; }
.toast-act { flex: 0 0 auto; }
.toast-list { margin: 4px 0 0; padding-left: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* toasts clear the docked composer on the inbox (UI-0765) */
body[data-tab="inbox"] #toasts { bottom: 130px; }
/* progress with its number (UI-0791) */
.prog-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
/* skeleton primitives (UI-0782) */
.skeleton-line { position: relative; overflow: hidden; color: transparent; min-width: 120px; }
.skeleton-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--accent-soft) 50%, transparent 70%); animation: shimmer 1.2s infinite; }
.loading-line { position: relative; }
.loading-line::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--muted); border-top-color: var(--accent); animation: spin .7s linear infinite; margin-right: 6px; vertical-align: -1px; }
.toast-x { background: transparent; border: none; color: inherit; cursor: pointer; font-size: 1rem; padding: 0 2px; min-width: 28px; min-height: 28px; }
.cbDel, [data-bbdel], [data-sdel] { min-width: 28px; min-height: 28px; color: var(--err-fg); }
.toast-info { border-left: 3px solid var(--info); }
.toast-success { border-left: 3px solid var(--ok); }
.toast-error { border-left: 3px solid var(--err); }
.nav-group { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--muted); margin: 16px 12px 4px; }
nav#tabs .nav-group:first-child { margin-top: 0; }
.field-err { border-color: var(--err) !important; background: var(--err-bg) !important; }
.field-err-msg { display: block; color: var(--err-fg); font-size: var(--fs-small); margin-top: 2px; flex-basis: 100%; }
input:disabled, select:disabled, textarea:disabled { background: var(--disabled-bg); color: var(--disabled-fg); border-color: var(--line-soft); cursor: not-allowed; }
.alert-type { color: var(--err); }
.wiz-nav { margin-bottom: 10px; }
.cap-meter { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-caption); padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-variant-numeric: tabular-nums; }
.cap-track { display: inline-block; width: 40px; height: 4px; border-radius: 3px; background: var(--panel2); overflow: hidden; }
.cap-track i { display: block; height: 100%; width: 0; background: var(--accent); }
.cap-meter.cap-warm { color: var(--warn-fg); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.cap-meter.cap-warm .cap-track i { background: var(--warn); }
.cap-meter.cap-hot .cap-track i { background: var(--err); }
/* toolbar clusters (UI-0512) */
.tb-sep { width: 1px; align-self: stretch; background: var(--line-soft); margin: 2px 2px; }
/* alert badges get their own strip (UI-0510/0511) */
.pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill.outline { background: none; border: 1px solid var(--line); color: var(--muted); }
.alert-strip { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 2px; }
.camp-reason { margin-top: 6px; font-size: var(--fs-small); }
.eta { color: var(--accent); font-weight: 650; font-style: normal; }
/* launch confirmation stat grid (UI-0508) */
.launch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.launch-stat { background: var(--panel2); border-radius: 8px; padding: 8px 12px; }
.launch-stat .k { display: block; font-size: var(--fs-caption); color: var(--muted); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.launch-stat .v { font-size: 18px; font-weight: 700; }
/* wizard step chrome (UI-0519/0523/0528) */
.step.done-step { color: var(--ok-fg); }
.step.done-step .step-n { background: var(--ok-bg); border-color: var(--ok); color: var(--ok-fg); }
.cf-stephead { margin: 4px 0 10px; }
.cf-stephead h4 { margin: 0; font-size: var(--fs-h3); }
.est-strip { font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; }
#cfEstimate { font-variant-numeric: tabular-nums; }
.utm-details summary { cursor: pointer; font-size: var(--fs-small); }
.cf-restore { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* review previews in channel chrome (UI-0546) */
.rv-preview { max-width: 560px; }
.rv-subj { border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; margin-bottom: 6px; }
.rv-sms .rv-body, .rv-whatsapp .rv-body { display: inline-block; background: var(--bubble-out); border: 1px solid var(--accent-soft-2); border-radius: 14px; padding: 8px 12px; max-width: 46ch; }
/* A/B comparison (UI-0550) */
.ab-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 4px; max-width: 480px; }
.ab-arm { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.ab-arm .k { font-size: var(--fs-caption); color: var(--muted); text-transform: uppercase; letter-spacing: var(--ls-caps); margin-bottom: 4px; }
.ab-winner { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.cd-progress { margin: 6px 0 2px; max-width: 420px; }
/* label:value meta rows replace dot-separated run-ons (UI-0089) */
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-small); color: var(--muted); }
.meta b { color: var(--text); font-weight: 600; }
/* definition lists for term walls (UI-0077) */
dl.defs { margin: 0; }
dl.defs dt { font-weight: 700; font-size: var(--fs-body-sm); margin-top: 8px; }
dl.defs dd { margin: 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
/* notification rows: title line over detail line (UI-0090) */
.notif-title { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-body-sm); font-weight: 600; }
.notif-when { font-size: var(--fs-caption); color: var(--muted); font-weight: 400; white-space: nowrap; }
.notif-detail { font-size: var(--fs-caption); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
/* finished checklist steps step back (UI-0068) */
.step-done, .step-done:visited { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
/* a switch reads as a state change, not a form detail (UI-0185/0186) */
.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 34px; height: 18px; margin: 0; cursor: pointer; }
.switch .track { width: 34px; height: 18px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); position: relative; transition: background .12s; flex: 0 0 auto; }
.switch .track::after { content: ''; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .12s, background .12s; }
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track::after { transform: translateX(16px); background: var(--on-accent); }
.switch input:focus-visible + .track { outline: var(--focus-ring); outline-offset: 2px; }
.switch.warn input:checked + .track { background: var(--warn); border-color: var(--warn); }
/* the danger-zone group settings kill switches live in (UI-0186) */
fieldset.danger-zone { border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
fieldset.danger-zone legend { color: var(--warn-fg); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; padding: 0 6px; }
fieldset.set-group { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
fieldset.set-group legend { color: var(--accent); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; padding: 0 6px; }
/* chip-input for tags (UI-0191) */
.chipbox { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: var(--field-bg); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; min-height: var(--control-h); }
.chipbox .chip .x { margin-left: 4px; cursor: pointer; font-weight: 700; }
.chipbox input { background: none; border: none; min-height: 24px; flex: 1; min-width: 80px; }
.chipbox input:focus { outline: none; }
.chipbox:focus-within { outline: var(--focus-ring); outline-offset: 1px; }
.ov-step { display: grid; grid-template-columns: 24px 1fr; gap: 6px; align-items: baseline; margin: var(--s1) 0; }
.add-grid { display: grid; grid-template-columns: 140px 1fr 1fr auto; gap: 10px; align-items: center; }
@media (max-width: 700px) { .add-grid { grid-template-columns: 1fr; } }
/* snapshot: status left, action right (UI-0237) */
.ov-snap-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cap-meter.cap-hot { color: var(--err); border-color: var(--err); }

/* Reduced motion (LR-0723): every animation and transition collapses. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* hidden tabs stop burning frames (UI-0845); the sse-down pulse stays as
   the one loop that matters when you come back */
body.page-hidden .load-bar.on, body.page-hidden .status-dot.ok, body.page-hidden .ib-jump { animation-play-state: paused; }
/* coarse pointers get real targets (UI-0923/0924/0925/0942) */
@media (pointer: coarse) {
  button.icon-btn { width: 44px; height: 44px; }
  button.mini, button.btn-sm, .it-claim { min-height: 32px; padding: 6px 12px; }
  .chip, button.chip { min-height: 32px; display: inline-flex; align-items: center; }
  th button.ui-th-sort { padding: 8px 4px; min-height: 36px; }
  .toast-x { min-width: 36px; min-height: 36px; }
}
/* touch: no 300ms double-tap wait, and presses show (UI-0943/0944) */
button, .chip, .pill, .inbox-thread, .ib-hit, .cmd-row, .an-camp-row { touch-action: manipulation; }
.inbox-thread:active, .ib-hit:active, .cmd-row:active, tr.an-camp-row:active td, tr.notif-click:active { background: var(--accent-soft-2); }
/* nested scrollers keep their momentum to themselves (UI-0936) */
nav#tabs, .inbox-threads, .ib-timeline, .notif-panel, .tf-live, .ib-search-drop { overscroll-behavior: contain; }
/* scroll affordance on wide tables (UI-0927) */
.tableWrap {
  background:
    linear-gradient(to right, var(--panel) 30%, transparent),
    linear-gradient(to left, var(--panel) 30%, transparent) 100% 0,
    linear-gradient(to right, var(--shadow-edge, rgba(0,0,0,.25)), transparent) , /* raw-ok: scroll shadow, both themes */
    linear-gradient(to left, var(--shadow-edge, rgba(0,0,0,.25)), transparent) 100% 0; /* raw-ok: scroll shadow */
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* dialogs never outgrow a phone (UI-0930) */
.ui-modal { max-height: 85dvh; overflow-y: auto; }
.tour-card { max-width: min(320px, calc(100vw - 24px)); }
/* heatmap: sticky day column while panning (UI-0929) */
.an-heat th:first-child, .an-heat td:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; }
/* wide tables pin their first column on phones (UI-0945) */
@media (max-width: 700px) {
  .tableWrap.wide th:first-child, .tableWrap.wide td:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; }
}
/* prefers-contrast: raise the quiet greys (UI-0884) */
@media (prefers-contrast: more) {
  :root { --muted: #cfc6ab; --line: #5a5136; --line-soft: #4a4230; } /* raw-ok: token REDEFINITIONS for prefers-contrast */
  :root[data-theme="light"] { --muted: #453e2e; --line: #8f815a; --line-soft: #9d906c; } /* raw-ok: token redefinitions for prefers-contrast */
  .caption, .muted { font-weight: 500; }
}
/* forced colors: gradient text falls back to plain (UI-0885) */
@media (forced-colors: active) {
  .brand span { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .tf-hl { display: none; }
  .tf-editor textarea { color: CanvasText; }
}

/* Canvas '?' cheat-sheet (LR-0069) */
.jc-cheatsheet { position: absolute; inset: 0; z-index: 40; background: var(--scrim); display: flex; align-items: center; justify-content: center; }
.jc-cheatsheet-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 22px; max-width: 420px; box-shadow: var(--shadow-3); }
.jc-cheatsheet-card h3 { margin: 0 0 10px; font-size: 15px; }
.jc-cheatsheet-card table { border-collapse: collapse; width: 100%; }
.jc-cheatsheet-card td { padding: 3px 8px 3px 0; font-size: 13px; vertical-align: top; }
.jc-cheatsheet-card .jc-key { font-family: ui-monospace, monospace; white-space: nowrap; color: var(--accent); }
.jc-cheatsheet-card .muted { margin: 10px 0 0; font-size: 12px; opacity: .65; }

/* Canvas node search (LR-0064) */
.jc-search { position: absolute; inset: 0; z-index: 40; background: var(--scrim); display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; }
.jc-search-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; width: min(440px, 90%); box-shadow: var(--shadow-3); overflow: hidden; }
.jc-search-card input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; padding: 12px 14px; font-size: 14px; outline: none; }
.jc-search-card ul { list-style: none; margin: 0; padding: 4px 0; max-height: 300px; overflow-y: auto; }
.jc-search-card li { padding: 7px 14px; font-size: 13px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.jc-search-card li span { opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-search-card li.on, .jc-search-card li:hover { background: var(--accent-soft-2); }
.jc-search-card li.none { cursor: default; opacity: .5; }
.jc-found .jc-node-body, g.jc-found rect:first-of-type { animation: jc-pulse 0.8s ease-in-out 2; }
@keyframes jc-pulse { 0%, 100% { stroke-width: 1; } 50% { stroke-width: 5; stroke: var(--accent); } }

/* Journey list thumbnails (LR-0071) */
.jr-thumb { width: 84px; height: 48px; flex: 0 0 auto; margin-right: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--note-bg); }
.jr-thumb-empty { border-style: dashed; }
/* live count pops off the grey line (UI-0609) */
.stat-live { display: inline-block; background: var(--accent-soft-2); color: var(--accent); font-weight: 700; border-radius: 999px; padding: 1px 10px; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jr-fixrefs { cursor: pointer; border: none; }
/* preset gallery (UI-0601/0629) */
.jr-gallery { max-width: 560px; }
.jr-gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0; }
.jr-preset { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px 12px; min-height: 0; }
.jr-preset .jr-thumb { margin: 0 0 4px; }
.jr-preset:hover { border-color: var(--accent); }
/* automation cards (UI-0619/0625) */
.stat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.stat-chips .chip { border: 1px solid var(--line-soft); }
.chip-bad { background: var(--err-bg); color: var(--err-fg); }
.audit-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: var(--fs-small); border-bottom: 1px solid var(--line-soft); }
table.zebra tr:nth-child(even) td { background: var(--note-bg); }
.dimmed { opacity: .45; }
.dimmed input, .dimmed .chip { pointer-events: auto; }
.jr-thumb line { stroke: var(--line); stroke-width: 1; }
.jr-thumb circle.jt-entry { fill: var(--jc-entry); }
.jr-thumb circle.jt-exit { fill: var(--jc-exit); }
.jr-thumb circle.jt-msg { fill: var(--accent); }
.jr-thumb circle.jt-mid { fill: var(--jc-message); }

/* Full-screen template editor (LR-0359) */
.tf-editor { position: relative; }
.tf-expand { position: absolute; top: 6px; right: 6px; z-index: 5; padding: 2px 8px; font-size: 14px; opacity: .6; }
.tf-expand:hover { opacity: 1; }
#templateForm.tf-fullscreen { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: var(--bg); padding: 18px; margin: 0; border-radius: 0; }
#templateForm.tf-fullscreen .tf-split { min-height: 70vh; }
#templateForm.tf-fullscreen .grid2 { display: none; }
#templateForm.tf-fullscreen .tf-actions { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0; }
#templateForm.tf-fullscreen #tfBody, #templateForm.tf-fullscreen .tf-hl { min-height: 65vh; }
/* Automation recipe cards (LR-0285) */
.auto-recipe { text-align: left; padding: 10px 14px; line-height: 1.45; max-width: 260px; }

/* Touch editing (LR-0065): the stage owns its gestures */
.jc-stage { touch-action: none; }

/* Guided tour (LR-0724) */
.tour-overlay { position: fixed; inset: 0; z-index: 90; background: var(--scrim); outline: none; }
.tour-overlay:has(.tour-ring) { background: transparent; } /* the ring's shadow supplies the dim (UI-0300) */
.tour-ring { position: fixed; border: 2px solid var(--accent); border-radius: 8px; box-shadow: 0 0 0 4000px var(--scrim); background: transparent; pointer-events: none; }
.tour-card { position: fixed; width: 320px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow-3); }
.tour-card h3 { margin: 0 0 6px; font-size: 15px; }
.tour-card p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }

/* Empty-state component (LR-0694) */
.empty-state { text-align: center; padding: 42px 20px; }
.empty-state .es-icon { font-size: 34px; margin-bottom: 8px; }
.empty-state .es-title { font-size: var(--fs-h3); font-weight: 650; margin: 0 0 2px; color: var(--text); }
.empty-state p { color: var(--muted); margin: 6px auto 16px; max-width: 46ch; text-wrap: pretty; }
/* Help tooltip (LR-0709): hover or keyboard focus reveals the note */
.tipwrap { position: relative; display: inline-block; margin-left: 5px; color: var(--muted); cursor: help; font-size: 12px; border-bottom: none; }
.tipwrap:focus { outline: var(--focus-ring); border-radius: 3px; }
.tipbox {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: 240px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; line-height: 1.45; color: var(--text); z-index: 60;
  box-shadow: var(--shadow-2); text-transform: none; letter-spacing: normal; font-weight: 400;
}
.tipbox { display: block; visibility: hidden; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out) 150ms, visibility 0s linear 270ms; }
.tipwrap:hover .tipbox, .tipwrap:focus .tipbox, .tipwrap.open .tipbox { visibility: visible; opacity: 1; transition-delay: 150ms, 150ms; }
.hidden-desktop { display: none; }
@media (max-width: 700px) { .hidden-desktop.ib-filters-toggle { display: inline-flex; } }
#themeToggle { background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--muted); }
#themeToggle:hover { color: var(--amber2); }

/* Password-first lock screen (Access Control P2) */
.lock-card .w100 { width: 100%; box-sizing: border-box; margin: 6px 0; }
.lock-card .fine { font-size: var(--fs-small); margin-top: 12px; line-height: 1.35; }
.lock-card .fine a { color: var(--muted); }
.lock-card .fine a:hover { color: var(--amber2); }
/* Rail account footer */
.nav-account { margin-top: auto; padding: 12px 12px 4px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); line-height: 1.35; }
.nav-account b { color: var(--text); display: block; }

/* Admin surface (Access Control P3) */
.adm-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--panel2); display: grid; place-items: center; font-weight: 700; color: var(--accent); flex: 0 0 auto; }
/* channel badges replace platform emoji (UI-0729) */
.ch-badge { font-size: 10px; letter-spacing: .04em; border-radius: 8px; }
.ch-badge-sms { background: color-mix(in srgb, var(--ch-sms) 20%, var(--panel)); color: color-mix(in srgb, var(--ch-sms) 75%, var(--text)); }
.ch-badge-whatsapp { background: color-mix(in srgb, var(--ch-whatsapp) 20%, var(--panel)); color: color-mix(in srgb, var(--ch-whatsapp) 75%, var(--text)); }
/* admin cards (UI-0718/0723/0725/0736) */
.adm-inactive { opacity: .6; }
.adm-inactive:hover { opacity: 1; }
.adm-acc-card, #admPhones .panel, #admTeams .panel { max-width: 900px; }
.adm-pw-block { display: inline-flex; align-items: center; gap: 6px; }
.tm-mgr-row { background: var(--accent-soft); border-radius: 8px; padding: 4px 8px; }
.tm-phones { display: flex; flex-direction: column; gap: 3px; }
.tm-phone-row { display: flex; gap: 8px; align-items: center; }
/* armed persona + budget (UI-0741/0743) */
.pill.armed { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); }
.ai-budget { width: 80px; }
.set-armed-banner { position: sticky; top: 0; z-index: 4; }
.w160 { width: 160px; }
.trunc.w160 { width: auto; max-width: 160px; }
.trunc.w480 { max-width: 480px; }
.nav-account a { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.nav-account a:hover { color: var(--amber2); }

/* Inbox scope header (AS-0052) */
.inbox-scope { border-left: 3px solid var(--accent); padding: 10px 14px; }

/* Inbox: team panel, claim button (Reach Assignment P0) */
#inboxTeam table { margin-top: 6px; }
#inboxTeam td.num { text-align: right; white-space: nowrap; }
.it-claim { margin-left: 8px; padding: 1px 8px; font-size: 11px; }
.ib-assignee { max-width: 180px; }

/* Thread trail (AS-0170) */
.ib-trail { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-small); padding: 4px 0 8px; }
.ib-trail[data-collapsed="1"] .ib-trail-item:not(:first-child) { display: none; }
.ib-trail[data-collapsed="0"] { flex-direction: column; gap: 2px; }
.ib-trail[data-collapsed="0"] .ib-trail-item { border-left: 2px solid var(--accent-soft-2); padding-left: 10px; }
.ib-trail[data-collapsed="0"] .ib-trail-item::before { content: none; }
.ib-trail-item::before { content: '•'; margin-right: 6px; color: var(--accent); }
.ib-trail-toggle { align-self: flex-start; }
/* intent pills get their own hue (UI-0432) */
.pill.intent { background: var(--info-bg); color: var(--info-fg); }

/* Presence (AS-0141/0142) */
.nav-presence { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.nav-presence select { font-size: 11px; padding: 2px 4px; background: transparent; border: 1px solid var(--line); color: var(--muted); }
.pres-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; transition: background-color var(--dur-base) var(--ease-out); }
.pres-online { background: var(--pres-online); }
.pres-break { background: var(--pres-break); }
.pres-away { background: var(--pres-away); }
.pres-offline { background: var(--pres-offline); }

/* Handoff card (AS-0158) */
.ib-handoff { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); box-shadow: var(--shadow-1); animation: handoff-in var(--dur-slow) var(--ease-out); }
@keyframes handoff-in { from { opacity: 0; transform: translateY(6px); } }

/* Personal notifications in the bell (audit follow-up) */
.notif-click { cursor: pointer; }
.notif-click:hover { background: var(--accent-soft); }

/* Manager workload board (AS-0057) */
.team-board { margin-top: 10px; }
.team-board td, .team-board th { padding: 4px 10px; }
.pres-external { background: var(--info); }