@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ─────────────────────────────────────────────────────────────
   Flows — the ClickPost dashboard's language (tokens from Felix main):
   white panels on a cool grey page, one interactive blue, soft radii.
   ───────────────────────────────────────────────────────────── */
:root {
  --cp-blue:      #3b76f6;
  --cp-blue-600:  #2c62dd;
  --cp-blue-700:  #1d4ed8;
  --cp-ink:       #0f172a;   /* deep navy text */
  --cp-ink-soft:  #334155;
  --cp-muted:     #56637a;
  --cp-line:      #e5e9f2;
  --cp-line-2:    #edf2fb;
  --cp-surface:   #ffffff;
  --cp-tint:      #eef4ff;
  --cp-tint-2:    #dfe9ff;
  --cp-violet:    #6D3BEB;
  --cp-violet-bg: #F1ECFE;
  --cp-green:     #15803d;
  --cp-green-bg:  #edfcf2;
  --cp-amber:     #b45309;
  --cp-danger:    #dc2626;
  --cp-danger-bg: #fef3f2;
  /* Checkbox fill inside the composer's shipment editor. App-blue at 12-15px reads
     as a wall of colour when a dozen boxes are ticked at once, and none of these is
     an action — they're state. Grey-blue keeps a white tick legible on top. */
  --cp-check:     #56637a;
  --ring:         0 0 0 3px rgba(59,118,246,.16);
  --sh-sm:  none;
  --sh-md:  0 1px 2px rgba(11,27,63,.05), 0 4px 12px rgba(11,27,63,.05);
  --sh-lg:  0 6px 22px rgba(11,27,63,.08), 0 2px 6px rgba(11,27,63,.04);
  --r-xl: 16px; --r-lg: 12px; --r-md: 12px; --r: 10px; --r-sm: 8px;
  /* Felix / ClickPost dashboard additions */
  --page:        #fafafa;
  --surface-2:   #f8fafd;
  --ink-2:       #1e293b;
  --muted-2:     #8a97ab;
  --border-2:    #d6dee9;
  --amber-bg:    #fff8eb;
  --amber-border:#f5d9a8;
  --good-border: #bbe9c9;
  --shadow-card: 0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.03);
  --shadow-pop:  0 16px 40px -8px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.06);
  --font:        "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* The UA's [hidden] rule is display:none at the lowest precedence, so ANY author
   `display:` on the same element silently defeats it — and much of this UI is toggled
   by setting .hidden from script (the status warning, the signal chip, the spinner,
   filtered rows). Losing that quietly means a warning banner shows when there is
   nothing to warn about, which is worse than no banner at all. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 14.5px/1.55 var(--font);
  color: var(--ink-2);
  background: var(--page);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Column layout so the "Powered by" footer sits at the bottom of short pages
     (sign-in, error) instead of floating mid-screen or dropping below the fold. */
  display: flex; flex-direction: column;
}
main, .auth-wrap { flex: 1 0 auto; }

::selection { background: var(--cp-tint-2); color: var(--cp-blue-700); }

/* ── Header ─────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 15px clamp(18px, 5vw, 44px);
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--cp-line);
}
.brandmark { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brandmark .logo {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--cp-blue);
}
.brandmark .logo svg { width: 21px; height: 21px; display: block; }
header h1 {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  font-family: var(--font);
  font-size: 18px; font-weight: 600; letter-spacing: -.02em;
  margin: 0; color: var(--cp-ink); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The client's brand, set beside the product name behind a divider — co-branded,
   so it reads as their tool without the product losing its own name. */
header h1 .brand-tag {
  padding-left: 11px; border-left: 1px solid var(--cp-line);
  font-family: var(--font);
  font-size: 14px; font-weight: 500; color: var(--cp-ink-soft);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 560px) {
  header h1 .brand-tag { display: none; }   /* product name wins on a phone */
}
nav { display: flex; align-items: center; gap: 12px; font-size: 13.5px; flex: none; }
nav .who {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 6px; border-radius: 999px;
  background: var(--cp-tint); border: 1px solid var(--cp-line);
  color: var(--cp-ink-soft); font-weight: 500; max-width: 42vw;
}
nav .who .dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600;
  background: var(--cp-blue-700);
}
nav .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav a { color: var(--cp-muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
nav a:hover { color: var(--cp-blue-600); }
nav .back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--cp-blue-600); padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--cp-line); background: #fff; transition: .15s;
}
nav .back:hover { background: var(--cp-tint); border-color: #CBD9F2; }

/* ── Layout ─────────────────────────────────────────────── */
main { max-width: 860px; margin: clamp(22px, 5vw, 40px) auto 72px; padding: 0 clamp(16px, 5vw, 24px); }

.page-head { margin: 4px 0 22px; }
.page-head h2 {
  font-family: var(--font);
  font-size: clamp(24px, 4vw, 32px); font-weight: 600; letter-spacing: -.03em;
  margin: 0 0 6px; color: var(--cp-ink); line-height: 1.1;
}
.page-head p { margin: 0; color: var(--cp-muted); font-size: 14.5px; }
/* A thread subject is arbitrary length — smaller than a page title, and allowed
   to wrap rather than being clipped. */
.page-head h2.subject {
  font-size: clamp(20px, 3vw, 26px); line-height: 1.2;
  white-space: normal; overflow-wrap: break-word;
}
.count-chip {
  font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500;
  color: var(--cp-blue-700); background: var(--cp-tint-2);
  border: 1px solid #D3E0FA; padding: 2px 9px; border-radius: 7px; margin-left: 8px;
  vertical-align: middle;
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  border-radius: var(--r-lg); padding: 22px; margin-bottom: 18px;
  box-shadow: var(--sh-sm);
}

/* ── Filter chips ───────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  color: var(--cp-ink-soft); font: 500 13.5px var(--font);
  text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.filter-chip:hover { background: var(--cp-tint); border-color: #CBD9F2; }
.filter-chip .n {
  font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 11.5px;
  color: var(--cp-muted); transition: color .15s;
}
.filter-chip.active {
  background: var(--cp-blue); border-color: var(--cp-blue); color: #fff;
}
.filter-chip.active .n { color: rgba(255,255,255,.75); }
.filter-chip.active:hover { background: var(--cp-blue-600); border-color: var(--cp-blue-600); }
.filter-chip:focus-visible { outline: none; box-shadow: var(--ring); }

/* The carrier picker sits at the far end of the chip row: a chip that opens a
   list of tick boxes, applied together. */
.carrier-filter { margin-left: auto; position: relative; }
.carrier-filter > summary { list-style: none; }
.carrier-filter > summary::-webkit-details-marker { display: none; }
.carrier-filter > summary svg { margin-left: -2px; }
.carrier-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 280px;
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  border-radius: var(--r-lg); box-shadow: var(--sh-md, 0 8px 24px rgba(16,24,40,.12));
  padding: 10px 0 0;
}
.carrier-menu-head { margin: 0 14px 6px; font: 600 12px var(--font); color: var(--cp-muted);
  text-transform: uppercase; letter-spacing: .04em; }
.carrier-menu-list { max-height: 300px; overflow-y: auto; }
.carrier-menu-list label {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px; cursor: pointer;
  font: 500 13.5px var(--font); color: var(--cp-ink-soft);
}
.carrier-menu-list label:hover { background: var(--cp-tint); }
.carrier-menu-list label span:first-of-type { flex: 1; }
.carrier-menu-list .n { font-size: 11.5px; color: var(--cp-muted); font-variant-numeric: tabular-nums; }
.carrier-menu-foot {
  display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--cp-line); margin-top: 6px;
}

/* "Automatically sent" carries the same violet as the badges it filters to, so the
   chip and the marks on the rows below it read as one thing. Violet rather than the
   row's blue/amber: neither of those is free on this page. */
.filter-chip.auto { color: var(--cp-violet); border-color: #DFD4FB; }
.filter-chip.auto:hover { background: var(--cp-violet-bg); border-color: #CDBCF8; }
.filter-chip.auto .n { color: #9B7BF0; }
.filter-chip.auto.active {
  background: var(--cp-violet); border-color: var(--cp-violet); color: #fff;
}
/* Must out-specify .filter-chip.auto .n above, which otherwise leaves the count
   violet-on-violet and all but invisible once the chip is selected. */
.filter-chip.auto.active .n { color: rgba(255,255,255,.75); }
.filter-chip.auto.active:hover { background: #5C2FD4; border-color: #5C2FD4; }

/* Draw the eye to Generate follow-up when one is actually overdue. */
.btn.primary-ghost {
  border-color: #F0DCAF; background: #FDF4E3; color: var(--cp-amber);
}
.btn.primary-ghost:hover { background: #FBEDD2; }

/* ── Pager ──────────────────────────────────────────────── */
.pager {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px; margin: 26px 0 10px;
}
.pg, .pg-num {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  color: var(--cp-ink-soft); font: 500 13.5px var(--font);
  transition: background .15s, border-color .15s, color .15s;
}
.pg:hover, .pg-num:hover { background: var(--cp-tint); border-color: #CBD9F2; color: var(--cp-blue-700); }
.pg.disabled { opacity: .45; pointer-events: none; }
.pg-nums { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pg-num { min-width: 38px; justify-content: center; font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.pg-num.current {
  background: var(--cp-blue); border-color: var(--cp-blue); color: #fff; cursor: default;
}
.pg-num.current:hover { background: var(--cp-blue); border-color: var(--cp-blue); color: #fff; }
.pg-gap { color: var(--cp-muted); padding: 0 2px; }
.pg-note { text-align: center; color: var(--cp-muted); font-size: 12.5px; margin: 0; }
@media (max-width: 560px) {
  .pg-nums { display: none; }      /* Previous/Next is enough on a phone */
}

/* ── Thread list rows ───────────────────────────────────── */
.thread-list { display: flex; flex-direction: column; gap: 12px; }
a.row-card {
  position: relative; display: grid;
  grid-template-columns: 46px 1fr auto; align-items: center; gap: 16px;
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  border-radius: var(--r-md); padding: 16px 18px 16px 20px;
  text-decoration: none; color: inherit; overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, border-color .16s;
  animation: rise .5s both cubic-bezier(.2,.7,.3,1);
}
a.row-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cp-line); transition: background .16s;
}
a.row-card.awaiting::before { background: var(--cp-blue); }
a.row-card:hover {
  transform: translateY(-2px); box-shadow: var(--sh-md); border-color: #CBD9F2;
}
a.row-card:hover .chev { transform: translateX(3px); color: var(--cp-blue-600); }
.avatar {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: grid; place-items: center; font-weight: 600; font-size: 17px; color: #fff;
  font-family: var(--font);
  background: var(--cp-blue-700);
}
.avatar.carrier { background: var(--cp-violet); }
.row-main { min-width: 0; }
/* Wraps because this line now carries a fourth item ("N sent automatically"). With
   nowrap it fitted three and clipped the fourth below ~640px wide, so on a laptop
   with a narrow window the badge was simply cut off the row. */
.row-main .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin-bottom: 5px; }
.subj {
  font-weight: 600; font-size: 15.5px; color: var(--cp-ink); margin: 0;
  letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-main .from {
  margin: 2px 0 0; color: var(--cp-muted); font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-main .from b { color: var(--cp-ink-soft); font-weight: 600; }
.chev { color: #B9C6E2; transition: transform .16s, color .16s; flex: none; }

/* ── Pills / tags ───────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.pill.need   { background: var(--cp-blue); color: #fff; }
.pill.wait   { background: var(--cp-tint); color: var(--cp-muted); border: 1px solid var(--cp-line); }
/* Carrier has gone quiet past the threshold — amber, not red: it's a nudge, not a
   failure. */
.pill.due    { background: #FDF4E3; color: var(--cp-amber); border: 1px solid #F0DCAF; }
/* Replies in this conversation that went to the carrier unattended. Sits alongside
   the state pill rather than replacing it — a conversation the automation has
   answered can still be awaiting a reply or overdue a nudge, and the supervisor
   needs both facts. Violet keeps it from being mistaken for either. */
.pill.auto   { background: var(--cp-violet-bg); color: var(--cp-violet); border: 1px solid #DFD4FB; }
.pill.auto svg { opacity: .85; flex: none; }
.pill .ping  { position: relative; width: 7px; height: 7px; }
.pill .ping::before, .pill .ping::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff;
}
.pill .ping::after { animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
.time { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--cp-muted); }
.msg-count { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--cp-muted); }
.msg-count svg { opacity: .8; }

/* ── Conversation ───────────────────────────────────────── */
.convo { display: flex; flex-direction: column; gap: 18px; padding: 4px; }
.msg { display: flex; gap: 13px; max-width: 88%; animation: rise .45s both cubic-bezier(.2,.7,.3,1); }
.msg .mono {
  width: 38px; height: 38px; border-radius: 11px; flex: none; margin-top: 2px;
  display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 14px;
  font-family: var(--font);
  background: var(--cp-blue-700);
}
.msg.carrier .mono { background: var(--cp-violet); }
.msg.other .mono   { background: #64748b; }
.bubble {
  background: #fff; border: 1px solid var(--cp-line); border-radius: 4px 15px 15px 15px;
  padding: 13px 16px; box-shadow: var(--sh-sm); min-width: 0;
}
.bubble .head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.bubble .who { font-weight: 600; font-size: 13.5px; color: var(--cp-ink); word-break: break-word; }
.bubble .addr {
  margin: 0 0 9px; padding: 7px 10px; display: grid; gap: 2px;
  background: var(--cp-tint); border: 1px solid var(--cp-line-2); border-radius: var(--r-sm);
  font-size: 12px; line-height: 1.5;
}
.bubble .addr div { display: flex; gap: 6px; min-width: 0; }
.bubble .addr dt {
  flex: none; width: 34px; margin: 0; color: var(--cp-muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 10.5px; padding-top: 1px;
}
.bubble .addr dd { margin: 0; color: var(--cp-ink-soft); word-break: break-word; }
.bubble .body { white-space: pre-wrap; margin: 0; color: var(--cp-ink-soft); font-size: 14.5px; word-wrap: break-word; }

/* Rich (HTML) bodies. The sender's own `style` attributes are stripped during
   sanitization, so everything a carrier's mail client emitted is restyled here —
   which is why an incoming table reads like the rest of the console instead of
   like whatever Outlook decided. `pre-wrap` is off: real block elements handle
   the line breaks now, and keeping it would double every gap. */
.bubble .body.rich { white-space: normal; }
.bubble .body.rich > :first-child { margin-top: 0; }
.bubble .body.rich > :last-child { margin-bottom: 0; }
.bubble .body.rich p, .bubble .body.rich div { margin: 0 0 8px; }
.bubble .body.rich ul, .bubble .body.rich ol { margin: 0 0 8px; padding-left: 20px; }
.bubble .body.rich a { color: var(--cp-blue-600); text-decoration: underline; }
.bubble .body.rich h1, .bubble .body.rich h2, .bubble .body.rich h3,
.bubble .body.rich h4, .bubble .body.rich h5, .bubble .body.rich h6 {
  font: 600 15px/1.4 var(--font); color: var(--cp-ink); margin: 12px 0 6px;
}
.bubble .body.rich pre, .bubble .body.rich code {
  font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 12.5px;
}
.bubble .body.rich pre { overflow-x: auto; background: var(--cp-tint); padding: 8px 10px; border-radius: var(--r-sm); }
.bubble .body.rich hr { border: 0; border-top: 1px solid var(--cp-line); margin: 12px 0; }
/* NOT every <table> in an email is data. Signatures and layout wrappers are built
   out of tables, and sanitizing strips the `border="0"` / `style="border:none"` that
   said "draw no lines" — so styling every table boxes the sender's signature block,
   including cells whose remote logo we dropped. Only a table that looks like a real
   grid gets the data treatment: one with header cells, or one with at least two rows
   AND some row of at least two cells. A single-column signature table matches
   neither and renders transparently, which is what its author intended.

   NOTE for anyone editing these selectors: `:has()` must NOT be nested inside
   `:has()` — that is invalid, and because an invalid selector kills the WHOLE
   comma-separated rule, it silently un-styles every table including the ones with
   real headers. `:has(td + td)` already means "some row has two adjacent cells",
   since those two cells can only be siblings within one row.

   NOTE 2: this comment was once terminated early by a stray close-marker a few
   lines up. Everything after it parsed as a selector, and an invalid prelude
   swallows the rule that follows it, so `border-collapse: collapse` never applied
   and every carrier's scan table rendered as separated double-ruled boxes. If these
   tables ever look boxed again, count the comment markers before anything else, and
   never write a close-marker inside comment prose. */
.bubble .body.rich table { border-collapse: collapse; margin: 10px 0; }
.bubble .body.rich table:has(th),
.bubble .body.rich table:has(tr + tr):has(td + td) {
  /* A wide scan grid scrolls inside the bubble rather than stretching it and putting
     the whole conversation into a horizontal scroll. */
  display: block; overflow-x: auto; max-width: 100%; font-size: 13px;
}
/* Ruled like the shipment grid in the composer, not like a spreadsheet: a row
   separator and nothing else. Boxing every cell puts six vertical rules through a
   carrier's scan table and squeezes the columns until "COIMBATORE CITY BRANCH"
   breaks across three lines. The row is the unit a person reads. */
.bubble .body.rich table:has(th) :is(th, td),
.bubble .body.rich table:has(tr + tr):has(td + td) :is(th, td) {
  border: 0; border-bottom: 1px solid var(--cp-line);
  padding: 7px 12px 7px 0; text-align: left; vertical-align: top;
  line-height: 1.45;
}
.bubble .body.rich table :is(th, td):last-child { padding-right: 0; }
.bubble .body.rich table tr:last-child :is(th, td) { border-bottom: 0; }
.bubble .body.rich th {
  color: var(--cp-muted); font-weight: 600; white-space: nowrap;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--cp-line);
}
/* Enough room that an AWB, a status or a date never wraps; only free text does. */
.bubble .body.rich table :is(th, td) { min-width: 74px; }
/* Signature logos and hub screenshots. Capped so a full-resolution photo (or a
   deliberately huge one) can't push the conversation around; `width`/`height`
   attributes from the sender survive sanitizing, hence the !important-free override
   via max-*. */
.bubble .body.rich img {
  max-width: 100%; max-height: 320px; width: auto; height: auto;
  vertical-align: middle; border-radius: 2px;
}

/* right-aligned "our" messages (brand / other = our side) */
.msg.brand, .msg.self { align-self: flex-end; flex-direction: row-reverse; }
.msg.brand .bubble, .msg.self .bubble {
  border-radius: 15px 4px 15px 15px;
  background: linear-gradient(180deg, #F7FAFF, var(--cp-tint));
  border-color: #D8E4FA;
}

.role {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  border-radius: 6px; padding: 2px 7px;
}
.role.carrier { background: var(--cp-violet-bg); color: var(--cp-violet); }
.role.brand   { background: var(--cp-green-bg);  color: var(--cp-green); }
.role.other   { background: var(--cp-tint-2);    color: var(--cp-ink-soft); }
/* Never appears alone — it follows the green "your brand" label on the same line,
   which is what keeps the shared violet from reading as "carrier" here. */
.role.auto {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--cp-violet-bg); color: var(--cp-violet);
  border: 1px solid #DFD4FB; letter-spacing: .04em;
}
.role.auto svg { flex: none; opacity: .9; }

/* ── Reply composer ─────────────────────────────────────── */
.composer { position: relative; overflow: hidden; }
.composer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--cp-blue), var(--cp-violet));
}
.composer h3 {
  font-family: var(--font); font-weight: 600; font-size: 16px;
  margin: 2px 0 2px; letter-spacing: -.01em;
}
.sugg-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.badge-ai {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--cp-blue-700);
  background: var(--cp-tint-2); border: 1px solid #D3E0FA;
  padding: 5px 12px; border-radius: 999px;
}
.badge-ai svg { width: 14px; height: 14px; }
.signal-chip {
  font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--cp-ink-soft);
  background: var(--cp-tint); border: 1px solid var(--cp-line);
  padding: 3px 10px; border-radius: 7px;
}
.hint { color: var(--cp-muted); font-size: 13.5px; margin: 0 0 14px; }

textarea {
  width: 100%; background: #fff; color: var(--cp-ink);
  border: 1px solid var(--cp-line); border-radius: var(--r-md);
  padding: 14px 16px; font: 400 14.5px/1.65 var(--font);
  resize: vertical; transition: border-color .15s, box-shadow .15s;
}
textarea:focus { outline: none; border-color: var(--cp-blue); box-shadow: var(--ring); }
textarea::placeholder { color: #A9B6D2; }

/* Async draft: spinner in the badge while the reply is being drafted. */
.spinner {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid #C6D6F5; border-top-color: var(--cp-blue);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Shimmer on the disabled textarea while a draft is pending. */
textarea.shimmer {
  color: transparent; background:
    linear-gradient(100deg, var(--cp-tint) 30%, var(--cp-tint-2) 50%, var(--cp-tint) 70%)
    var(--cp-tint);
  background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Gentle fade-in when the drafted reply lands. */
.fade-in { animation: fadeIn .3s ease-out; }
@keyframes fadeIn { from { opacity: .35; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.4s; }
  textarea.shimmer { animation: none; }
  .fade-in { animation: none; }
}

.row { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--cp-ink-soft);
  border: 1px solid var(--cp-line); border-radius: var(--r-sm);
  padding: 11px 18px; cursor: pointer; text-decoration: none;
  font: 600 14px var(--font); transition: .15s;
}
.btn:hover { background: var(--cp-tint); }
.btn.primary {
  color: #fff; border: 0;
  background: var(--cp-blue);
}
.btn.primary:hover { background: var(--cp-blue-600); }
.btn.primary:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn:disabled:hover { background: #fff; }

/* Regenerate: a quiet secondary action, right-aligned in the suggestion header. */
.btn.ghost { padding: 5px 12px; font-size: 12.5px; border-radius: 999px; }
.btn.regen { margin-left: auto; }
.btn.regen svg { width: 14px; height: 14px; }

/* ── Footer ─────────────────────────────────────────────── */
/* Vendor credit. Deliberately quiet — the client's brand leads in the header. */
.site-foot {
  flex: none; text-align: center; padding: 22px 20px 26px;
  font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted);
  border-top: 1px solid var(--cp-line-2);
}

/* ── States: empty, error, notice ───────────────────────── */
.notice {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  border-left: 3px solid var(--cp-amber); border-radius: var(--r-md);
  padding: 18px 20px; color: var(--cp-ink-soft); box-shadow: var(--sh-sm);
}
.notice .ico { flex: none; color: var(--cp-amber); margin-top: 1px; }
.notice p { margin: 0; font-size: 14px; }
/* Sits above a working inbox rather than replacing it, so it is tighter than the
   full-outage notice below it — a caveat on the numbers, not a dead end. */
.notice.short-read { padding: 12px 16px; margin-bottom: 16px; }
.notice.short-read b { color: var(--cp-ink); }
.empty {
  text-align: center; padding: 60px 24px; color: var(--cp-muted);
  background: var(--cp-surface); border: 1px dashed #CBD9F2; border-radius: var(--r-lg);
}
.empty .ico {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px;
  display: grid; place-items: center; color: var(--cp-blue);
  background: var(--cp-tint-2); border: 1px solid #D3E0FA;
}
.empty h3 { font-family: var(--font); color: var(--cp-ink); margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.empty p { margin: 0; max-width: 42ch; margin-inline: auto; }
/* Error pages get a way back; the empty state doesn't need one. */
.empty .err-back { margin-top: 20px; }
/* Reply text handed back after a lost session — readable and selectable, clearly
   not a live composer. */
.recover { margin: 22px auto 0; max-width: 100%; text-align: left; }
.recover label {
  display: block; margin-bottom: 7px;
  font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cp-muted);
}
.recover textarea {
  width: 100%; resize: vertical; padding: 12px 14px;
  font: 14px/1.6 var(--font); color: var(--cp-ink-soft);
  background: var(--cp-tint); border: 1px solid var(--cp-line);
  border-radius: var(--r-sm);
}
.err {
  color: var(--cp-danger); background: var(--cp-danger-bg);
  border: 1px solid #F3C6CF; border-radius: var(--r-sm);
  padding: 11px 14px; font-size: 13.5px; font-weight: 500; margin: 0 0 14px;
}
.warn {
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--cp-amber); background: #FDF6E7;
  border: 1px solid #F0DEB0; border-radius: var(--r-sm);
  padding: 11px 14px; font-size: 13.5px; font-weight: 500; margin: 0 0 14px;
}
.warn svg { flex: none; margin-top: 1px; }

/* Attachment chips under a message body */
.attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.attachments .chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 999px; text-decoration: none;
  background: var(--cp-tint); border: 1px solid var(--cp-line);
  color: var(--cp-ink-soft); font-size: 12.5px; font-weight: 500; transition: .15s;
}
.attachments .chip:hover { background: var(--cp-tint-2); border-color: #CBD9F2; color: var(--cp-blue-700); }
/* A file on a reply that has only just gone out. It IS attached to the mail, but
   the copy we could serve arrives in the shared mailbox a few seconds later, so
   there is nothing to download yet. Named, dashed, and not offering a hover it
   cannot honour — so it reads as "on its way", not as a broken link. */
.attachments .chip.pending { cursor: default; border-style: dashed; opacity: .75; }
.attachments .chip.pending:hover { background: var(--cp-tint); border-color: var(--cp-line); color: var(--cp-ink-soft); }
.attachments .chip svg { color: var(--cp-muted); flex: none; }
.attachments .chip .sz { color: var(--cp-muted); font-weight: 400; }
/* Files the supervisor picked — same chips, but not links, and each removable. */
.attachments.picked { margin-top: 8px; }
.attachments.picked:empty { margin-top: 0; }
.attachments.picked .chip { cursor: default; padding-right: 4px; }
.attachments.picked .chip .rm {
  display: grid; place-items: center; width: 18px; height: 18px; flex: none;
  margin-left: 2px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--cp-muted); cursor: pointer;
  font: 400 15px/1 var(--font); transition: .15s;
}
.attachments.picked .chip .rm:hover { background: var(--cp-danger-bg); color: var(--cp-danger); }
.attach-row .warn-text { color: var(--cp-danger); font-weight: 500; }

/* ── Recipients ─────────────────────────────────────────── */
.recipients { margin-bottom: 12px; border: 1px solid var(--cp-line); border-radius: var(--r-md); overflow: hidden; }
.rcpt { display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--cp-surface); }
.rcpt + .rcpt { border-top: 1px solid var(--cp-line-2); }
.rcpt label {
  flex: none; width: 30px; font-size: 11px; font-weight: 600; color: var(--cp-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.rcpt input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 9px 0;
  font: 400 13.5px/1.5 var(--font); color: var(--cp-ink);
}
.rcpt input:focus { outline: none; }
.rcpt input::placeholder { color: #A9B6D2; }
.recipients:focus-within { border-color: var(--cp-blue); box-shadow: var(--ring); }

/* ── The mail body: prose + the table that gets appended ─── */
/* Joined into ONE block on purpose. The table isn't a side panel — it's part of the
   message, and the composer should show the shape of the mail that will actually go
   out. So the textarea loses its bottom edge and the table continues it. */
.mail-body.has-table textarea { border-radius: var(--r-md) var(--r-md) 0 0; border-bottom-color: transparent; }
.body-table {
  margin-top: -1px; padding: 4px 14px 10px;
  background: var(--cp-surface);
  border: 1px solid var(--cp-line); border-top: 1px dashed var(--cp-line);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
/* The rendered mail table. Only shown above the inline row limit, where it carries the
   by-status summary that actually goes out — below the limit the editable grid IS the
   table, so a second copy would just be noise. */
.table-preview { max-height: 300px; overflow: auto; padding: 6px 0; }
.table-preview table { max-width: 100%; }

/* ── Editable shipment table ────────────────────────────── */
/* Values arrive from the live lookup; retyping one is recorded as an edit and shows up
   in the audit log, so the styling has to make an edited cell obvious at a glance. */
.table-editor { padding: 8px 0 2px; }

/* Deliberately recessive. Column choice is a rare tweak, so it must not compete with the
   grid or the reply body for attention — and a row of ticked boxes in the app's blue is
   exactly what the eye goes to first. So the ticks sit in grey and the divider that made
   this read as its own section is gone.
   It comes up to full strength on hover AND on keyboard focus, so it stays discoverable
   and reachable; nothing here is removed from the tab order. Colours stay at full opacity
   rather than being faded, because 11px text at reduced opacity stops meeting contrast. */
.col-toggles {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 0 0 6px; margin-bottom: 6px;
}
.col-toggles-label {
  font-size: 10.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cp-muted);
}
.check.tiny { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
              color: var(--cp-muted); cursor: pointer; }
.check.tiny input { accent-color: var(--cp-check); width: 12px; height: 12px; flex: none; }
.check.tiny:hover span { color: var(--cp-ink-soft); }

.grid-scroll { max-height: 340px; overflow: auto; }
.edit-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.edit-grid th {
  position: sticky; top: 0; z-index: 1;
  background: var(--cp-tint); color: var(--cp-ink-soft);
  text-align: left; font-weight: 600; white-space: nowrap;
  padding: 7px 9px; border-bottom: 1px solid var(--cp-line);
}
.edit-grid td {
  padding: 3px 5px; border-bottom: 1px solid var(--cp-line-2);
  vertical-align: middle; color: var(--cp-ink);
}
.edit-grid th.pick, .edit-grid td.pick { width: 30px; padding-left: 6px; text-align: center; }
.edit-grid td.pick input { accent-color: var(--cp-check); width: 15px; height: 15px; }
.edit-grid tr:last-child td { border-bottom: none; }

/* Left out of the mail. Greyed, never struck through: a strikethrough reads as "wrong"
   or "corrected", when the value is simply not going in this mail — and it made the
   figures hard to read back if you changed your mind.
   Dropped, not deleted: a row removed from the DOM could never be brought back. */
.edit-grid tr.row-dropped td { opacity: .4; }

.cellInput {
  width: 100%; min-width: 90px; background: transparent; color: inherit;
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 5px 7px; font: 400 13px/1.4 var(--font);
  transition: border-color .12s, background .12s;
}
.cellInput:hover { border-color: var(--cp-line); background: var(--cp-tint); }
.cellInput:focus {
  outline: none; background: #fff;
  border-color: var(--cp-blue); box-shadow: var(--ring);
}
/* Typed over the lookup value. */
.cell-edited .cellInput { background: var(--cp-violet-bg); border-color: #D9CCFB; font-weight: 500; }
/* Hidden column: kept on screen so the checkbox that unhides it still has a target.
   Same greying as a dropped row, since it means the same thing. */
.col-hidden { opacity: .4; }

/* The lookup moved under an edit — the send is blocked until this is resolved. */
.cell-conflict .cellInput { background: var(--cp-danger-bg); border-color: #F2C0CA; }
.conflict-note {
  display: block; margin-top: 2px; padding-left: 7px;
  font-size: 11px; color: var(--cp-danger); white-space: nowrap;
}
.conflict-banner {
  display: flex; flex-direction: column; gap: 6px;
  padding: 11px 13px; margin: 4px 0 10px;
  background: var(--cp-danger-bg); border: 1px solid #F2C0CA;
  border-radius: var(--r-md); font-size: 13px; color: var(--cp-ink);
}
.conflict-banner strong { color: var(--cp-danger); }
.conflict-banner span { color: var(--cp-ink-soft); line-height: 1.5; }
.conflict-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 3px; }
.conflict-actions .check { display: inline-flex; align-items: center; gap: 8px;
                          font-size: 12.5px; color: var(--cp-ink-soft); cursor: pointer; }
.conflict-actions .check input { accent-color: var(--cp-danger); width: 15px; height: 15px; }
.editor-hint { margin: 8px 0 0; font-size: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.body-table .check {
  display: flex; align-items: center; gap: 9px; margin-top: 8px;
  padding-top: 9px; border-top: 1px solid var(--cp-line-2);
  font-size: 12.5px; color: var(--cp-muted); cursor: pointer;
}
.body-table .check input { accent-color: var(--cp-check); width: 15px; height: 15px; flex: none; }
.body-table .check:hover span { color: var(--cp-ink-soft); }

/* ── Attach files ───────────────────────────────────────── */
.attach-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
/* A label wrapping a hidden input — so it needs the button's look without being one. */
.attach-btn { cursor: pointer; }
.attach-btn:focus-within { outline: none; box-shadow: var(--ring); border-color: var(--cp-blue); }

/* ── Login ──────────────────────────────────────────────── */
.auth-wrap { display: grid; place-items: center; padding: 40px 20px; }
.auth-card {
  position: relative; width: 100%; max-width: 440px; text-align: center;
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  border-radius: 26px; padding: 44px 40px 38px;
  box-shadow: var(--sh-lg); overflow: hidden;
  animation: rise .6s both cubic-bezier(.2,.7,.3,1);
}
.auth-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--cp-violet), var(--cp-blue));
}
.auth-card .logo-lg {
  width: 64px; height: 64px; border-radius: 20px; margin: 6px auto 22px;
  display: grid; place-items: center;
  background: var(--cp-blue);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.auth-card .logo-lg svg { width: 34px; height: 34px; }
.auth-card .eyebrow {
  font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cp-blue-600); margin: 0 0 10px;
}
.auth-card h2 {
  font-family: var(--font); font-weight: 600;
  font-size: 26px; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 12px; color: var(--cp-ink);
}
.auth-card p.lede { color: var(--cp-muted); font-size: 14.5px; margin: 0 auto 26px; max-width: 34ch; }
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; padding: 13px 20px; border-radius: 12px;
  background: var(--cp-blue);
  color: #fff; font: 600 15px var(--font); text-decoration: none;
  box-shadow: 0 6px 18px rgba(37,99,235,.34), inset 0 1px 0 rgba(255,255,255,.28);
  transition: .16s;
}
/* Only when a second provider is offered. A lone button keeps the spacing it
   was designed with; two of them otherwise sit flush, and the hover lift makes
   them overlap. */
.btn-google + .btn-google { margin-top: 10px; }
.btn-google:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(37,99,235,.42); }
.btn-google .g { background: #fff; border-radius: 5px; width: 22px; height: 22px; display: grid; place-items: center; }
.btn-google .g svg { width: 14px; height: 14px; }
.auth-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0 0; color: var(--cp-muted); font-size: 12.5px; }
.auth-foot svg { width: 14px; height: 14px; color: var(--cp-green); }

/* ── Automation settings ───────────────────────────────────── */
/* A board, not a stack of cards. The content is a grid — every carrier carries the
   same three timings — so the rows align into columns you can read downwards, and
   a branch that is off keeps its column and shows a dash rather than collapsing
   and shifting every row out of true. */
.automation .page-head { margin-bottom: 18px; }
.automation .notice { margin-bottom: 22px; }

.bulk {
  border: 1px solid var(--cp-line); border-radius: var(--r-md);
  background: var(--cp-surface); margin-bottom: 18px;
}
.bulk > summary {
  list-style: none; cursor: pointer; padding: 12px 16px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 550; color: var(--cp-ink-soft);
}
.bulk > summary::-webkit-details-marker { display: none; }
.bulk > summary:hover { color: var(--cp-ink); }
.bulk-form { padding: 0 16px 16px; border-top: 1px solid var(--cp-line-2); }
.bulk-form .hint { margin: 12px 0 14px; }
.bulk-fields { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-bottom: 16px; }

.board-summary {
  font-size: 13px; color: var(--cp-muted); margin: 0 0 16px;
}
/* The overnight blackout, on its own line under the count. Quieter than the
   summary because it is standing policy, not the state of anyone's rules. */
.board-note {
  display: block; margin-top: 4px; font-size: 12px; color: var(--cp-muted-2, #8a8f98);
}
.alert-group { margin-bottom: 26px; }
.alert-name {
  font-size: 13px; font-weight: 600; color: var(--cp-ink);
  margin: 0 0 8px; letter-spacing: .1px;
}
.board {
  border: 1px solid var(--cp-line); border-radius: var(--r-md);
  background: var(--cp-surface); overflow: hidden;
}
.rule-row { position: relative; border-top: 1px solid var(--cp-line-2); }
.rule-row:first-child { border-top: 0; }

.rule-row > details > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto 150px 15px;
  align-items: center; gap: 16px; padding: 11px 62px 11px 14px;
}
.rule-row > details > summary::-webkit-details-marker { display: none; }
.rule-row > details > summary:hover { background: var(--cp-tint); }
.rule-row > details > summary:focus-visible { outline: none; box-shadow: var(--ring); }
.carrier-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* Green only when this carrier is actually sending: enabled AND some branch on.
   The switch alone says nothing about whether anything would go out. */
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #CBD5E8;
}
.is-live .live-dot { background: var(--cp-green); }
.rule-row.has-error { background: #FFFCF5; }
.rule-row.has-error > details > summary:hover { background: #FFF8EA; }
.row-alarm { display: inline-flex; align-items: center; color: var(--cp-amber); flex: none; }
/* Visible to a screen reader, not on screen — the icon alone is not a label. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rule-carrier {
  font-size: 14px; font-weight: 600; color: var(--cp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.state-cells { display: flex; gap: 6px; }
.state-cells .cell {
  font-size: 12.5px; font-weight: 600; color: var(--cp-blue-700);
  width: 96px; text-align: center; padding: 2px 0; border-radius: 999px;
  background: var(--cp-tint);
}
.state-cells .cell.off { background: transparent; color: #B9C4DA; }
.from-cell {
  font-size: 12.5px; color: var(--cp-muted); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.is-new .from-cell { color: var(--cp-blue); }
.rule-row .chev { color: var(--cp-muted); transition: transform .16s ease; }
.rule-row details[open] .chev { transform: rotate(90deg); }
.bulk .chev { color: var(--cp-muted); transition: transform .16s ease; }
.bulk[open] > summary .chev { transform: rotate(90deg); }

/* The switch: a submit button, so one click flips it with no JavaScript. Sits
   outside <details> and is positioned onto the closed row, because anything after
   <summary> is hidden while the row is closed. */
.row-switch { position: absolute; top: 10px; right: 14px; }
.switch {
  appearance: none; border: 0; cursor: pointer; padding: 0;
  width: 34px; height: 20px; border-radius: 999px;
  background: #CBD5E8; position: relative; transition: background .16s ease;
}
.switch .knob {
  position: absolute; top: 3px; left: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: transform .16s ease;
  box-shadow: 0 1px 2px rgba(11,27,63,.25);
}
.switch.is-on { background: var(--cp-blue); }
.switch.is-on .knob { transform: translateX(14px); }
.switch:focus-visible { outline: none; box-shadow: var(--ring); }

/* The branch controls are checkboxes styled as switches: same form semantics —
   a checkbox plus its hidden "off" companion — so the page speaks one language
   instead of mixing tick boxes with the row's switch. */
/* Scoped to beat `.branches .check input` (0,2,1), which otherwise forces these
   back to a 15px square and renders the switch as a circle on top of its own
   label. Specificity, not order, is what decides here. */
.branches .check input.switch-box {
  appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer;
  width: 30px; height: 18px; border-radius: 999px; background: #CBD5E8;
  position: relative; flex: none; transition: background .16s ease;
}
.switch-box::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  transition: transform .16s ease; box-shadow: 0 1px 2px rgba(11,27,63,.25);
}
.branches .check input.switch-box:checked { background: var(--cp-green); }
.switch-box:checked::after { transform: translateX(12px); }
.switch-box:focus-visible { outline: none; box-shadow: var(--ring); }
.toggle-row { gap: 10px; }

/* Busy state while a POST is in flight. Every action here is a full page
   repaint, so without this the pause after a click read as a hang. */
.btn.is-busy { opacity: .75; pointer-events: none; }
.switch.is-busy { opacity: .6; pointer-events: none; }
form[aria-busy="true"] { cursor: progress; }

.rule-edit {
  padding: 4px 14px 14px; border-top: 1px dashed var(--cp-line);
  background: var(--cp-tint);
}
.branches { list-style: none; margin: 12px 0 14px; padding: 0; display: grid; gap: 9px; }
.branches li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.branches .check {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px;
  color: var(--cp-ink-soft); cursor: pointer; min-width: 232px;
}
.branches .check input { accent-color: var(--cp-check); width: 15px; height: 15px; flex: none; }
.branches li.branch-note { display: block; }
.branch-note span {
  display: block; font-size: 12px; color: var(--cp-muted); line-height: 1.5;
  padding-left: 40px; max-width: 62ch;
}
.rule-field {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--cp-muted);
}
.rule-field input {
  padding: 5px 8px; border: 1px solid var(--cp-line); background: #fff;
  border-radius: var(--r-sm); font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cp-ink);
  width: 72px;
}
/* A 12-hour picker needs room for "05:00 PM" plus its own clock affordance;
   at the number width it clipped to "05:00 P". */
.rule-field input[type="time"] { width: 132px; }
.rule-field input:focus { outline: none; border-color: var(--cp-blue); box-shadow: var(--ring); }
.rule-field .unit { color: var(--cp-muted); }
.edit-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding-top: 12px;
  border-top: 1px solid var(--cp-line-2);
}
.rule-sender { font-size: 12.5px; color: var(--cp-ink-soft); }
.rule-sender b { color: var(--cp-ink); }
.rule-actions { display: flex; align-items: center; gap: 8px; }
.icon-link { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 720px) {
  .rule-row > details > summary {
    grid-template-columns: 1fr 15px; row-gap: 8px; padding-right: 62px;
  }
  .state-cells { grid-column: 1 / -1; }
  .from-cell { grid-column: 1 / -1; text-align: left; }
  .state-cells .cell { width: auto; padding: 2px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .rule-row .chev, .bulk .chev, .switch, .switch .knob,
  .switch-box, .switch-box::after { transition: none; }
}

/* ── Motion ─────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
.thread-list a.row-card:nth-child(1) { animation-delay: .02s; }
.thread-list a.row-card:nth-child(2) { animation-delay: .07s; }
.thread-list a.row-card:nth-child(3) { animation-delay: .12s; }
.thread-list a.row-card:nth-child(4) { animation-delay: .17s; }
.thread-list a.row-card:nth-child(5) { animation-delay: .22s; }
.thread-list a.row-card:nth-child(n+6) { animation-delay: .26s; }
.convo .msg:nth-child(1){animation-delay:.03s} .convo .msg:nth-child(2){animation-delay:.09s}
.convo .msg:nth-child(3){animation-delay:.15s} .convo .msg:nth-child(n+4){animation-delay:.2s}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 560px) {
  .msg { max-width: 100%; }
  nav .who { display: none; }
  a.row-card { grid-template-columns: 42px 1fr; }
  a.row-card .chev { display: none; }
}

/* --- Workflows ---------------------------------------------------------------- */
/* Shared by the list, workflow and run pages. */
.workflows .wf-section { background: var(--cp-surface); border: 1px solid var(--cp-line);
  border-radius: var(--r-md); padding: 16px 18px; margin: 0 0 16px; }
.workflows .wf-section h3 { margin: 0 0 10px; font-size: 15px; color: var(--cp-ink); }
.workflows .wf-list { list-style: none; margin: 0; padding: 0; }
.workflows .wf-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  padding: 9px 0; border-top: 1px solid var(--cp-line-2); }
.workflows .wf-item:first-child { border-top: 0; }
.workflows .wf-item .hint { margin: 0; }
.workflows .wf-item.is-live .pill { background: var(--cp-green-bg); color: var(--cp-green); }
.workflows .wf-name { font-weight: 600; color: var(--cp-ink); }
.workflows .wf-steps { margin: 0; padding-left: 20px; color: var(--cp-ink-soft); line-height: 1.55; }
.workflows .wf-steps li + li { margin-top: 6px; }
.workflows .wf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.workflows .wf-row form { margin: 0; }
.workflows .wf-cal textarea { width: 100%; font: inherit; border: 1px solid var(--cp-line);
  border-radius: var(--r-sm); padding: 8px 10px; }
/* A run's records. A real table, one column per calculated value: the value on top,
   what it was worked out from underneath in the quiet colour. Tall enough to scan a
   few hundred records, with the header held in place while you do. */
.workflows .wf-because { margin: -4px 0 12px; }
.workflows .wf-records-scroll { max-height: min(70vh, 720px); overflow: auto;
  border: 1px solid var(--cp-line); border-radius: var(--r-sm); }
.workflows .wf-records { width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px; line-height: 1.4; color: var(--cp-ink); }
.workflows .wf-records th { position: sticky; top: 0; z-index: 1; background: var(--surface-2);
  text-align: left; font-weight: 600; color: var(--cp-ink-soft); white-space: nowrap;
  padding: 9px 14px; border-bottom: 1px solid var(--cp-line); }
.workflows .wf-records td { vertical-align: top; padding: 9px 14px;
  border-bottom: 1px solid var(--cp-line-2); }
.workflows .wf-records tbody tr:last-child td { border-bottom: 0; }
.workflows .wf-records tbody tr:hover td { background: var(--surface-2); }
.workflows .wf-records .awb { font-weight: 500; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.workflows .wf-records .val { display: block; white-space: nowrap; font-weight: 500; }
.workflows .wf-records .basis { display: block; margin-top: 2px; font-size: 12px;
  color: var(--cp-muted); min-width: 30ch; }
.workflows .wf-records .basis-cell { font-size: 12.5px; color: var(--cp-muted); }
.workflows .wf-records .pick { width: 1%; white-space: nowrap; }
.workflows .wf-records .pick input { accent-color: var(--cp-check); width: 15px; height: 15px; }
.workflows .err { color: var(--cp-danger); font-size: 13px; }

/* A preview branch: what a run would do comes first, in the tinted panel, because it
   is what the preview is for; the records it would act on fold away beneath it. */
.workflows .wf-branch h3 { display: flex; align-items: baseline; gap: 10px; }
.workflows .wf-count { font-size: 13px; font-weight: 500; color: var(--cp-muted);
  font-variant-numeric: tabular-nums; }
.workflows .wf-plan { background: var(--cp-tint); border: 1px solid var(--cp-tint-2);
  border-radius: var(--r-sm); padding: 4px 16px 12px; margin: 0 0 12px; }
.workflows .wf-plan-head { margin: 10px 0 2px; font-size: 12.5px; font-weight: 600;
  color: var(--cp-blue-700); }
.workflows .wf-plan-step { padding: 10px 0; }
.workflows .wf-plan-step + .wf-plan-step { border-top: 1px solid var(--cp-tint-2); }
.workflows .wf-plan-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--cp-ink); }
.workflows .wf-plan-line { margin: 3px 0 0; font-size: 13px; color: var(--cp-ink-soft);
  line-height: 1.5; max-width: 80ch; }
.workflows .wf-plan-note { margin: 6px 0 0; font-size: 12px; color: var(--cp-muted); }
.workflows .wf-plan-mails { width: 100%; margin-top: 8px; border-collapse: collapse;
  font-size: 13px; background: var(--cp-surface); border-radius: var(--r-sm);
  overflow: hidden; box-shadow: 0 0 0 1px var(--cp-tint-2); }
.workflows .wf-plan-mails th { text-align: left; font-weight: 600; color: var(--cp-ink-soft);
  padding: 7px 12px; border-bottom: 1px solid var(--cp-line); white-space: nowrap; }
.workflows .wf-plan-mails td { padding: 7px 12px; border-bottom: 1px solid var(--cp-line-2);
  vertical-align: top; color: var(--cp-ink); }
.workflows .wf-plan-mails tr:last-child td { border-bottom: 0; }
.workflows .wf-plan-mails .who { font-weight: 600; white-space: nowrap; }
.workflows .wf-plan-mails .num { text-align: right; width: 1%; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.workflows .wf-plan-mails .is-skipped .who,
.workflows .wf-plan-mails .is-skipped .num { color: var(--cp-muted); }
/* The way on from a preview: held at the foot of the screen, like the editor's Save. */
.workflows .wf-nextbar { position: sticky; bottom: 0; z-index: 2; display: flex;
  align-items: center; gap: 10px; margin: 8px 0 0; padding: 12px 16px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border: 1px solid var(--cp-line); border-radius: var(--r-md); box-shadow: var(--sh-md); }
.workflows .wf-nextbar p { margin: 0 auto 0 0; font-size: 13px; color: var(--cp-ink-soft);
  line-height: 1.45; max-width: 80ch; }
.workflows .wf-nextbar b { color: var(--cp-ink); }
.workflows .wf-nextbar form { margin: 0; }
.workflows .wf-fold > summary { cursor: pointer; list-style: none; display: inline-flex;
  align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cp-blue);
  padding: 4px 0; border-radius: 6px; }
.workflows .wf-fold > summary::-webkit-details-marker { display: none; }
.workflows .wf-fold > summary::before { content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s; }
.workflows .wf-fold[open] > summary::before { transform: rotate(45deg); }
.workflows .wf-fold > summary:focus-visible { outline: none; box-shadow: var(--ring); }
.workflows .wf-fold .hide, .workflows .wf-fold[open] .show { display: none; }
.workflows .wf-fold[open] .hide { display: inline; }
.workflows .wf-fold[open] > summary { margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .workflows .wf-fold > summary::before { transition: none; } }

/* Two-card choices: what a workflow reads, and who sends. */
.workflows .wf-choice { border: 0; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.workflows .wf-option { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--cp-line); border-radius: var(--r-sm); padding: 12px 14px;
  background: var(--cp-surface); transition: border-color .15s, background .15s; }
.workflows .wf-option:hover { border-color: var(--cp-blue); }
.workflows .wf-option input { margin-top: 4px; accent-color: var(--cp-blue); flex: none; }
.workflows .wf-option:has(input:checked) { border-color: var(--cp-blue); background: var(--cp-tint);
  box-shadow: var(--ring); }
.workflows .wf-option-body { display: grid; gap: 2px; }
.workflows .wf-option-title { font-weight: 600; color: var(--cp-ink); }
.workflows .wf-option-hint { font-size: 13px; color: var(--cp-muted); line-height: 1.45; }
.workflows .wf-choice-small { margin-top: 12px; }

/* --- The editor ---------------------------------------------------------------
   One idea carries the page: a spine of numbered stages, because a workflow runs
   top to bottom. Everything else stays quiet. */
.wf-editor { max-width: 1180px; }
.wf-editor .wf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px; align-items: start; }
.wf-editor .wf-edit { min-width: 0; }
.wf-editor .wf-edit.is-busy { opacity: .6; pointer-events: none; transition: opacity .2s .15s; }

.wf-editor .wf-edit input:not([type=checkbox]):not([type=radio]),
.wf-editor .wf-edit select, .wf-editor .wf-edit textarea {
  font: inherit; font-size: 14px; color: var(--cp-ink); background: #fff;
  border: 1px solid var(--cp-line); border-radius: var(--r-sm); padding: 7px 10px;
  min-width: 0; width: 100%; }
.wf-editor .wf-edit textarea { resize: vertical; line-height: 1.45; }
/* Our own arrow, 12px in from the edge, drawn like the other pickers: the browser's own sat flush against the
   border whatever the padding, because padding doesn't move it. */
.wf-editor .wf-edit select {
  appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4 6 8 10 4' fill='none' stroke='%23334155' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 12px; }
.wf-editor .wf-edit :is(input, select, textarea):focus-visible {
  outline: none; border-color: var(--cp-blue); box-shadow: var(--ring); }

/* The name is the page's title, typed where the title would be. These sizes are
   written with the same reach as the general control rule above, and after it, so
   they win: at lower reach they silently lost and the name stayed a small box. */
.wf-editor .wf-title { display: block; margin: 0 0 22px; }
.wf-editor .wf-edit .wf-title input:not([type=checkbox]):not([type=radio]) {
  font-family: var(--font); font-size: clamp(20px, 3vw, 26px);
  font-weight: 600; letter-spacing: -.02em; padding: 12px 16px; border-radius: var(--r-md); }
.wf-editor .wf-edit input.wf-num:not([type=checkbox]):not([type=radio]) { width: 84px; flex: none; }
.wf-editor .wf-edit input.wf-time:not([type=checkbox]):not([type=radio]) { width: 80px; flex: none; }
.wf-editor .wf-edit input.wf-times:not([type=checkbox]):not([type=radio]) { width: 170px; flex: none; }
.wf-editor .wf-edit .wf-sentence select, .wf-editor .wf-edit .wf-inline select { width: auto; max-width: 100%; }

.wf-editor .wf-spine { list-style: none; margin: 0; padding: 0; counter-reset: stage; }
.wf-editor .wf-stage { counter-increment: stage; position: relative; padding: 0 0 26px 46px; }
.wf-editor .wf-stage::before { content: counter(stage); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cp-blue); color: #fff; font-weight: 600; font-size: 14px;
  font-family: var(--font); }
.wf-editor .wf-stage::after { content: ""; position: absolute; left: 14px; top: 36px; bottom: 6px;
  width: 2px; background: var(--cp-line); border-radius: 2px; }
.wf-editor .wf-stage:last-child::after { display: none; }
.wf-editor .wf-stage > h3 { margin: 3px 0 4px; font-size: 16.5px; color: var(--cp-ink);
  font-family: var(--font); font-weight: 600; letter-spacing: -.01em; }
.wf-editor .wf-optional { font-size: 12.5px; font-weight: 400; color: var(--cp-muted);
  font-family: var(--font); letter-spacing: 0; margin-left: 4px; }
.wf-editor .wf-help { margin: 0 0 10px; font-size: 13px; color: var(--cp-muted); line-height: 1.45; }
/* The note under the two data cards sits apart from them, not on their border. */
.wf-editor .wf-choice + .wf-help { margin: 10px 0 0; }
/* A step decided during the run: the same grey italic line the run page and the
   preview show under such a step (.trace .br-name .br-stage). */
.wf-editor .wf-late { font-style: italic; }
.wf-editor .wf-help code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: var(--cp-tint); padding: 1px 5px; border-radius: 5px; }
.wf-editor .wf-word { color: var(--cp-ink-soft); font-size: 14px; white-space: nowrap; }

/* A condition reads as a sentence: field, comparison, value, then move and remove. */
.wf-editor .wf-cond { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.5fr) 100px;
  gap: 8px; align-items: start; padding: 10px; margin: 0 0 8px; background: #fff;
  border: 1px solid var(--cp-line); border-radius: var(--r-sm); }
.wf-editor .wf-value { display: grid; gap: 6px; min-width: 0; }
.wf-editor .wf-inline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wf-editor .wf-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--cp-ink-soft); cursor: pointer; }
.wf-editor .wf-toggle input { accent-color: var(--cp-blue); }

/* Remove, and move up or down: small, quiet, square, and clear about what they do. */
.wf-editor .wf-x { width: 32px; height: 32px; display: grid; place-items: center; flex: none;
  border: 1px solid transparent; background: transparent; color: var(--cp-muted);
  border-radius: var(--r-sm); cursor: pointer; }
.wf-editor .wf-x:hover { color: var(--cp-danger); background: var(--cp-danger-bg); }
.wf-editor .wf-x[value^="move_"]:hover { color: var(--cp-blue); background: var(--cp-tint); }
.wf-editor .wf-x:focus-visible { outline: none; box-shadow: var(--ring); }

/* Adding is always the same control: a dashed row at the end of what it adds to. */
.wf-editor .wf-add { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--cp-blue-700);
  background: transparent; border: 1px dashed #BFD0F3; border-radius: var(--r-sm); padding: 7px 12px; }
.wf-editor .wf-add::before { content: "+"; font-size: 16px; line-height: 1; }
.wf-editor .wf-add:hover { background: var(--cp-tint); border-color: var(--cp-blue); }
.wf-editor .wf-add:focus-visible { outline: none; box-shadow: var(--ring); }
.wf-editor .wf-add-inline { margin: 2px 0 10px; }
.wf-editor .wf-adds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Worked-out values, checks, buckets and actions are panels in a stage. */
.wf-editor :is(.wf-derived, .wf-check, .wf-bucket) { background: var(--cp-tint);
  border: 1px solid var(--cp-line); border-radius: var(--r-md); padding: 12px; margin: 0 0 10px; }
.wf-editor .wf-derived-head, .wf-editor .wf-action-head, .wf-editor .wf-check-head {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.wf-editor .wf-derived-name { font-weight: 600; }
.wf-editor .wf-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.wf-editor .wf-then { margin: 4px 0 0; padding-top: 10px; border-top: 1px dashed var(--cp-line); }
.wf-editor .wf-check-n { width: 22px; height: 22px; border-radius: 50%; display: grid;
  place-items: center; font-size: 12px; font-weight: 600; color: var(--cp-blue-700);
  background: #fff; border: 1px solid #BFD0F3; }
.wf-editor .wf-check-tools { margin-left: auto; display: flex; gap: 2px; }
.wf-editor .wf-check .wf-cond, .wf-editor .wf-bucket .wf-action { background: #fff; }
.wf-editor .wf-action { display: grid; gap: 10px; border: 1px solid var(--cp-line);
  border-radius: var(--r-sm); padding: 12px; margin: 0 0 10px; }
.wf-editor .wf-action-head { margin: 0; justify-content: space-between; }
.wf-editor .wf-action label { display: grid; gap: 5px; font-size: 13px; color: var(--cp-ink-soft); }
.wf-editor .wf-action .wf-help { margin: 0; }
.wf-editor .wf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Days as chips: tick a day and the chip fills. */
.wf-editor .wf-days { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.wf-editor .wf-day { cursor: pointer; }
.wf-editor .wf-day input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wf-editor .wf-day span { display: inline-block; min-width: 40px; text-align: center; font-size: 12.5px;
  padding: 4px 8px; border: 1px solid var(--cp-line); border-radius: 999px; background: #fff;
  color: var(--cp-ink-soft); }
.wf-editor .wf-day input:checked + span { background: var(--cp-blue); border-color: var(--cp-blue); color: #fff; }
.wf-editor .wf-day input:focus-visible + span { box-shadow: var(--ring); }

/* "Otherwise, if…" sits between two panels: the same gap above and below it. */
.wf-editor .wf-add-branch { margin: 0 0 10px; }

/* The schedule, at the top: a label column and the choice beside it — how often,
   then at what time. Only the ticks for the chosen "Repeats" show. */
.wf-editor .wf-sched-rows { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px 16px;
  align-items: start; }
.wf-editor .wf-sched-label { font-size: 13.5px; color: var(--cp-muted); padding-top: 8px; }
.wf-editor .wf-sched-field { display: grid; gap: 10px; justify-items: start; }
.wf-editor .wf-sched-times { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.wf-editor .wf-sched-times .wf-clock + .wf-clock { margin-left: 0; }
/* A run time and its remove, kept together when the row wraps. */
.wf-editor .wf-sched-time { display: inline-flex; align-items: center; gap: 2px; margin-right: 10px; }
.wf-editor .wf-sched-times .wf-add { margin-left: 4px; }
.wf-editor .wf-repeat { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2);
  border: 1px solid var(--cp-line); border-radius: 10px; }
.wf-editor .wf-repeat label { cursor: pointer; }
.wf-editor .wf-repeat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wf-editor .wf-repeat span { display: block; padding: 6px 14px; border-radius: 7px; font-size: 13.5px;
  font-weight: 500; color: var(--cp-ink-soft); }
.wf-editor .wf-repeat label:hover span { color: var(--cp-ink); }
.wf-editor .wf-repeat input:checked + span { background: #fff; color: var(--cp-blue-700); font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px #D3E0FA; }
.wf-editor .wf-repeat input:focus-visible + span { box-shadow: var(--ring); }
.wf-editor .wf-sched-pick { display: none; }
.wf-editor .wf-sched:has(input[name=repeat][value=weekdays]:checked) .wf-sched-weekdays { display: flex; flex-wrap: wrap; gap: 4px; }
.wf-editor .wf-sched:has(input[name=repeat][value=dates]:checked) .wf-sched-dates { display: grid; }
/* Dates as a month-shaped grid: seven to a row, the last day on a row of its own. */
.wf-editor .wf-sched-dates { grid-template-columns: repeat(7, 36px); gap: 4px; }
.wf-editor .wf-date { cursor: pointer; }
.wf-editor .wf-date input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wf-editor .wf-date span { display: grid; place-items: center; height: 32px; font-size: 13px;
  font-variant-numeric: tabular-nums; border: 1px solid var(--cp-line); border-radius: 8px;
  background: #fff; color: var(--cp-ink-soft); }
.wf-editor .wf-date:hover span { border-color: #BFD0F3; color: var(--cp-ink); }
.wf-editor .wf-date input:checked + span { background: var(--cp-blue); border-color: var(--cp-blue); color: #fff; font-weight: 600; }
.wf-editor .wf-date input:focus-visible + span { box-shadow: var(--ring); }
.wf-editor .wf-date-last { grid-column: span 3; }
.wf-editor .wf-sched > .wf-help { margin: 14px 0 0; }

/* Save stays in reach however long the form gets. */
.wf-editor .wf-savebar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center;
  gap: 14px; margin: 8px 0 0 46px; padding: 12px 16px; background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px); border: 1px solid var(--cp-line); border-radius: var(--r-md);
  box-shadow: var(--sh-md); }
.wf-editor .wf-savebar .wf-help { margin: 0; }

/* The plain-words reading sits beside the form and follows it down the page. */
/* Below the app's own sticky header (69px), not under it. */
.wf-editor .wf-summary { position: sticky; top: 86px; background: var(--cp-surface);
  border: 1px solid var(--cp-line); border-radius: var(--r-md); padding: 16px 18px;
  max-height: calc(100vh - 102px); overflow: auto; font-size: 14px; }
.wf-editor .wf-summary h3 { margin: 0 0 10px; font-size: 14px; color: var(--cp-muted); font-weight: 600; }
.wf-editor .wf-problems ul { margin: 4px 0 0; padding-left: 18px; }

/* Steps, the data choice and the schedule. */
.wf-editor .wf-reads { margin: 0 0 24px; }
.wf-editor .wf-reads > h3 { margin: 0 0 10px; font-size: 16.5px; color: var(--cp-ink);
  font-family: var(--font); font-weight: 600; letter-spacing: -.01em; }
.wf-editor .wf-stage-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.wf-editor .wf-stage-head h3 { margin: 3px 0 0; }
.wf-editor .wf-stage-head .wf-check-tools { margin-left: auto; }
.wf-editor .wf-edit input.wf-var-name:not([type=checkbox]):not([type=radio]) {
  width: 160px; flex: none; font-weight: 600; }
.wf-editor .wf-pick { display: grid; gap: 4px; min-width: 0; position: relative; }
.wf-editor .wf-edit input.wf-find:not([type=checkbox]):not([type=radio]) {
  font-size: 12.5px; padding: 4px 8px; background: var(--cp-tint); }
.wf-editor .wf-sentence .wf-pick { display: inline-grid; }
.wf-editor .wf-then { display: grid; gap: 10px; }
.wf-editor .wf-branch-name { display: flex; align-items: center; gap: 8px; }
.wf-editor .wf-edit .wf-branch-name input:not([type=checkbox]):not([type=radio]) {
  font-weight: 600; max-width: 320px; }
.wf-editor .wf-otherwise { background: #fff; border-style: dashed; }
.wf-editor .wf-addstep { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 6px 46px; padding: 12px; border: 1px dashed #BFD0F3; border-radius: var(--r-md); }
.wf-editor .wf-addstep-help { margin-left: 46px; }

/* Side panel tabs, and the field reference. */
.wf-editor .wf-tabs { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--cp-line); }
.wf-editor .wf-tab { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--cp-muted);
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 8px; cursor: pointer; }
.wf-editor .wf-tab.is-on { color: var(--cp-blue-700); border-bottom-color: var(--cp-blue); }
.wf-editor .wf-tab:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
.wf-editor .wf-fieldsearch { width: 100%; font: inherit; font-size: 13.5px; padding: 6px 10px;
  border: 1px solid var(--cp-line); border-radius: var(--r-sm); margin: 0 0 10px; }
.wf-editor .wf-summary h4 { margin: 12px 0 6px; font-size: 13px; color: var(--cp-ink-soft); }
.wf-editor .wf-fields { margin: 0; }
.wf-editor .wf-fields > div { padding: 6px 0; border-top: 1px solid var(--cp-line-2); }
.wf-editor .wf-fields dt { font-weight: 600; font-size: 13.5px; color: var(--cp-ink); }
.wf-editor .wf-fields dd { margin: 2px 0 0; font-size: 12.5px; color: var(--cp-muted); line-height: 1.45; }

@media (max-width: 980px) {
  .wf-editor .wf-layout { grid-template-columns: 1fr; }
  .wf-editor .wf-summary { position: static; order: -1; max-height: none; }
}
@media (max-width: 640px) {
  .workflows .wf-section { padding: 12px; }
  .wf-editor .wf-stage { padding-left: 0; }
  .wf-editor .wf-stage::before { position: static; display: inline-grid; margin-bottom: 6px; }
  .wf-editor .wf-stage::after { display: none; }
  .wf-editor .wf-cond { grid-template-columns: minmax(0, 1fr) 100px; }
  .wf-editor .wf-cond > select, .wf-editor .wf-cond > .wf-value { grid-column: 1; }
  .wf-editor .wf-cond > .wf-check-tools { grid-column: 2; grid-row: 1; }
  .wf-editor .wf-grid2 { grid-template-columns: 1fr; }
  .wf-editor .wf-savebar, .wf-editor .wf-addstep, .wf-editor .wf-addstep-help { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-editor .wf-edit.is-busy { transition: none; }
}

/* A dropdown of values to tick: closed, it reads like a select and says what is
   ticked; open, a panel with a search, groups with their own tick, and values. */
.wf-editor .wf-multi { position: relative; }
.wf-editor .wf-multi > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  min-height: 36px; padding: 7px 34px 7px 10px; font-size: 14px; background: #fff;
  border: 1px solid var(--cp-line); border-radius: var(--r-sm); position: relative; }
.wf-editor .wf-multi > summary::-webkit-details-marker { display: none; }
.wf-editor .wf-multi > summary::after { content: ""; position: absolute; right: 12px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px; border-right: 1.6px solid var(--cp-ink-soft);
  border-bottom: 1.6px solid var(--cp-ink-soft); transform: rotate(45deg); }
.wf-editor .wf-multi[open] > summary { border-color: var(--cp-blue); box-shadow: var(--ring); }
.wf-editor .wf-multi > summary:focus-visible { outline: none; box-shadow: var(--ring); }
.wf-editor .wf-multi-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-editor .wf-multi-sum b { font-weight: 600; color: var(--cp-blue-700); }
.wf-editor .wf-multi-none { color: var(--cp-muted); }
.wf-editor .wf-multi-panel { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px);
  min-width: 260px; max-height: 340px; overflow: auto; background: #fff; border: 1px solid var(--cp-line);
  border-radius: var(--r-sm); box-shadow: var(--sh-lg); padding: 6px; }
.wf-editor .wf-edit input.wf-multi-find:not([type=checkbox]):not([type=radio]) {
  position: sticky; top: -6px; margin: -6px -6px 6px; width: calc(100% + 12px); border-radius: 0;
  border-width: 0 0 1px; padding: 8px 10px; z-index: 1; }
.wf-editor .wf-multi-group + .wf-multi-group { border-top: 1px solid var(--cp-line-2); margin-top: 4px; padding-top: 4px; }
.wf-editor .wf-multi-head, .wf-editor .wf-multi-item { display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.wf-editor .wf-multi-head { font-weight: 600; color: var(--cp-ink); }
.wf-editor .wf-multi-item { color: var(--cp-ink-soft); }
.wf-editor .wf-multi-item.is-grouped { padding-left: 30px; }
.wf-editor :is(.wf-multi-head, .wf-multi-item):hover { background: var(--cp-tint); }
.wf-editor :is(.wf-multi-head, .wf-multi-item) input { accent-color: var(--cp-blue); margin: 0; }
.wf-editor .wf-warn { color: var(--cp-amber); }

/* A re-create step's carrier list: one compact row per account, ranked; a long
   list scrolls inside its frame rather than stretching the step. */
.wf-editor .wf-corder { display: grid; gap: 8px; }
.wf-editor .wf-corder-head { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px;
  color: var(--cp-ink-soft); font-weight: 600; }
.wf-editor .wf-corder-count { font-weight: 400; color: var(--cp-muted); font-size: 12.5px;
  font-variant-numeric: tabular-nums; }
.wf-editor .wf-corder-clear { margin-left: auto; background: none; border: 0; padding: 2px 4px;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--cp-muted); cursor: pointer; border-radius: 4px; }
.wf-editor .wf-corder-clear:hover { color: #b42318; }
.wf-editor .wf-corder-list { list-style: none; margin: 0; padding: 0; max-height: 432px; overflow: auto;
  border: 1px solid var(--cp-line); border-radius: var(--r-sm); background: #fff; }
.wf-editor .wf-corder-list:empty { display: none; }
.wf-editor .wf-corder-row { display: grid; grid-template-columns: 14px 26px minmax(0, 1fr) 28px 28px 28px;
  align-items: center; gap: 6px; min-height: 40px; padding: 0 6px 0 8px; background: #fff; }
.wf-editor .wf-corder-row + .wf-corder-row { border-top: 1px solid var(--cp-line-2); }
.wf-editor .wf-corder-row:first-child .wf-corder-rank { background: var(--cp-blue); color: #fff; }
.wf-editor .wf-corder-row.is-dragging { background: var(--cp-tint); opacity: .7; }
.wf-editor .wf-corder-grip { width: 8px; height: 14px; cursor: grab; justify-self: center;
  background: radial-gradient(circle, var(--muted-2) 1.2px, transparent 1.4px) 0 0 / 4px 4px; }
.wf-editor .wf-corder-rank { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--cp-tint); color: var(--cp-blue-700); font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.wf-editor .wf-corder-what { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 13.5px; }
.wf-editor .wf-corder-what b { font-weight: 600; color: var(--cp-ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.wf-editor .wf-corder-what span { color: var(--cp-muted); font-size: 12.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.wf-editor .wf-corder-btn { width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; border-radius: 6px; font: inherit; font-size: 14px; line-height: 1;
  color: var(--cp-muted); cursor: pointer; }
.wf-editor .wf-corder-btn:hover:not(:disabled) { background: var(--cp-tint); color: var(--cp-blue-700); }
.wf-editor .wf-corder-btn.is-x { font-size: 17px; }
.wf-editor .wf-corder-btn.is-x:hover { background: #fdeceb; color: #b42318; }
.wf-editor .wf-corder-btn:disabled { opacity: .25; cursor: default; }
.wf-editor :is(.wf-corder-btn, .wf-corder-clear, .wf-cpick > summary):focus-visible { outline: none; box-shadow: var(--ring); }
.wf-editor .wf-corder-empty { margin: 0; padding: 14px 12px; font-size: 13.5px; color: var(--cp-muted);
  border: 1px dashed var(--cp-line); border-radius: var(--r-sm); }
.wf-editor .wf-cpick { position: relative; justify-self: start; }
.wf-editor .wf-cpick > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 6px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; color: var(--cp-blue-700);
  border: 1px solid var(--cp-tint-2); background: var(--cp-tint); border-radius: var(--r-sm); }
.wf-editor .wf-cpick > summary::-webkit-details-marker { display: none; }
.wf-editor .wf-cpick > summary::before { content: "+"; font-size: 16px; line-height: 1; font-weight: 500; }
.wf-editor .wf-cpick > summary:hover, .wf-editor .wf-cpick[open] > summary { background: var(--cp-tint-2); }
.wf-editor .wf-action .wf-cpick :is(label.wf-multi-head, label.wf-multi-item) { display: flex; gap: 8px; font-size: 13.5px; }
.wf-editor .wf-action .wf-cpick label.wf-multi-head { color: var(--cp-ink); }
.wf-editor .wf-cpick-panel { width: 420px; right: auto; max-height: 380px; padding-bottom: 0; }
.wf-editor .wf-cpick-panel .wf-multi-head em { margin-left: auto; font-style: normal; font-weight: 400;
  font-size: 12px; color: var(--cp-muted); }
.wf-editor .wf-cpick-in { display: none; margin-left: auto; font-style: normal; font-size: 12px; color: var(--cp-muted); }
.wf-editor .wf-multi-item.is-in { cursor: default; color: var(--cp-muted); }
.wf-editor .wf-multi-item.is-in:hover { background: none; }
.wf-editor .wf-multi-item.is-in .wf-cpick-in { display: inline; }
.wf-editor .wf-cpick-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px;
  margin: 6px -6px 0; padding: 8px; background: #fff; border-top: 1px solid var(--cp-line); }
.wf-editor .wf-cpick-note { flex: 1; font-size: 12px; color: var(--cp-amber); }
.wf-editor .wf-cpick-foot .btn { padding: 6px 12px; font-size: 13px; }
.wf-editor .wf-cpick-foot .btn:disabled { opacity: .45; cursor: default; }

/* A field/variable/date picker's search box: closed, it reads like the select it
   replaces; open, a panel with a search box and the same grouped list. */
/* Block, not flex: a flex box's bare text never takes the "…", so a long name ran
   under the arrow. */
.wf-editor .wf-sp-btn { display: block; width: 100%; min-height: 36px; line-height: 20px;
  padding: 7px 34px 7px 10px; font: inherit; font-size: 14px; color: var(--cp-ink);
  text-align: left; background: #fff; border: 1px solid var(--cp-line);
  border-radius: var(--r-sm); cursor: pointer; position: relative; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.wf-editor .wf-sp-btn::after { content: ""; position: absolute; right: 12px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px; border-right: 1.6px solid var(--cp-ink-soft);
  border-bottom: 1.6px solid var(--cp-ink-soft); transform: rotate(45deg); }
.wf-editor .wf-sp-btn:hover { border-color: var(--cp-blue); }
.wf-editor .wf-sp-btn:focus-visible { outline: none; border-color: var(--cp-blue); box-shadow: var(--ring); }
.wf-editor .wf-sp-panel { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px);
  min-width: 260px; max-height: 320px; overflow: auto; background: #fff; border: 1px solid var(--cp-line);
  border-radius: var(--r-sm); box-shadow: var(--sh-lg); padding: 6px; }
.wf-editor .wf-edit .wf-sp-panel input[type=search] {
  position: sticky; top: -6px; margin: -6px -6px 6px; width: calc(100% + 12px); border-radius: 0;
  border-width: 0 0 1px; padding: 8px 10px; z-index: 1; }
.wf-editor .wf-sp-group { padding: 6px 8px 2px; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--cp-muted); }
.wf-editor .wf-sp-item { padding: 5px 8px; border-radius: 6px; cursor: pointer;
  font-size: 13.5px; color: var(--cp-ink-soft); }
.wf-editor .wf-sp-item:hover { background: var(--cp-tint); }
.wf-editor .wf-sp-item.is-cur { background: var(--cp-tint); color: var(--cp-blue-700); }
.wf-editor .wf-sp-item.is-on { font-weight: 600; color: var(--cp-ink); }
/* A locked field (return-request data the brand's data says it doesn't have):
   greyed out, not clickable, and never highlighted on hover or by the arrow keys. */
.wf-editor .wf-sp-item.is-locked { color: var(--cp-muted); cursor: not-allowed; }
.wf-editor .wf-sp-item.is-locked:hover,
.wf-editor .wf-sp-item.is-locked.is-cur { background: none; color: var(--cp-muted); }
/* The Fields panel's note on a locked field. */
.wf-editor .wf-fields dd.wf-field-locked { color: var(--cp-muted); font-style: italic; }

/* A time: hour and minute dropdowns on the 24-hour clock, one fixed width. */
.wf-editor .wf-clock { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.wf-editor .wf-edit .wf-clock select { width: 72px; min-width: 0; padding: 6px 32px 6px 12px;
  font-variant-numeric: tabular-nums; flex: none; }
.wf-editor .wf-colon { font-weight: 600; color: var(--cp-ink-soft); padding: 0 1px; }
.wf-editor .wf-sentence .wf-clock + .wf-clock { margin-left: 6px; }

.wf-editor .wf-then-label { font-weight: 600; color: var(--cp-ink); margin-top: 2px; }

/* A carrier mail step: the carriers it includes, and the mail it sends — both
   read from the brand's mail settings, edited on their own pages. */
.wf-editor .wf-legend { font-size: 13px; color: var(--cp-ink-soft); margin-bottom: 6px; }
.wf-editor :is(.wf-carriers, .wf-mail-preview) { border-top: 1px solid var(--cp-line-2);
  padding-top: 10px; display: grid; gap: 8px; }
.wf-editor .wf-carriers-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wf-editor .wf-carriers-head b { font-size: 13.5px; color: var(--cp-ink); }
.workflows .wf-config-link { font-size: 13px; font-weight: 600; color: var(--cp-blue); white-space: nowrap; }
.workflows .wf-config-link::after { content: " ↗"; font-weight: 400; }
.wf-editor .wf-carrier-list { list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--cp-line); border-radius: var(--r-sm); }
.wf-editor .wf-carrier { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 4px 12px;
  align-items: baseline; padding: 8px 10px; border-top: 1px solid var(--cp-line-2); font-size: 13px; }
.wf-editor .wf-carrier:first-child { border-top: 0; }
.wf-editor .wf-action label.wf-carrier-pick { display: flex; align-items: center; gap: 8px;
  color: var(--cp-ink); font-weight: 600; cursor: pointer; }
.wf-editor .wf-carrier-pick input { accent-color: var(--cp-blue); margin: 0; }
.wf-editor .wf-carrier-who { color: var(--cp-ink-soft); overflow-wrap: anywhere; }
.wf-editor .wf-cc { color: var(--cp-muted); }
.wf-editor .wf-carrier.is-out :is(.wf-carrier-pick span, .wf-carrier-who) { color: var(--cp-muted); }
.wf-editor .wf-mail { background: var(--cp-tint); border: 1px solid var(--cp-line);
  border-radius: var(--r-sm); padding: 10px 12px; display: grid; gap: 6px; font-size: 13.5px; }
.wf-editor .wf-mail p { margin: 0; white-space: pre-line; color: var(--cp-ink-soft); }
.wf-editor .wf-mail .wf-mail-subject { font-weight: 600; color: var(--cp-ink); }
.wf-editor .wf-mail .wf-mail-list { color: var(--cp-muted); font-style: italic; }
@media (max-width: 640px) { .wf-editor .wf-carrier { grid-template-columns: 1fr; } }

/* The mail settings pages: one card per carrier, or per incident type. */
.wf-config .wf-config-card { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--cp-line-2); }
.wf-config .wf-config-card:first-of-type { border-top: 0; }
.wf-config .wf-config-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.wf-config .wf-config-head h3 { margin: 0; }
.wf-config .wf-config-head .hint { margin: 0; }
.wf-config label { display: grid; gap: 5px; font-size: 13px; color: var(--cp-ink-soft); }
.wf-config :is(input:not([type]), input[type="text"], textarea) { width: 100%; font: inherit;
  border: 1px solid var(--cp-line); border-radius: var(--r-sm); padding: 8px 10px; background: #fff;
  color: var(--cp-ink); }
.wf-config textarea { resize: vertical; line-height: 1.45; }
.wf-config :is(input, textarea):focus-visible { outline: none; border-color: var(--cp-blue); box-shadow: var(--ring); }
.wf-config .wf-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wf-config .wf-optional { color: var(--cp-muted); font-weight: 400; }
@media (max-width: 720px) { .wf-config .wf-grid3 { grid-template-columns: 1fr; } }
.wf-config .btn.wf-quiet { background: transparent; border-color: transparent; color: var(--cp-muted); }
.wf-config .btn.wf-quiet:hover { color: var(--cp-ink); }


/* ═════════════════════════════════════════════════════════════
   THE SHELL — every signed-in page: a sidebar straight on the grey page
   and one white floating panel (the ClickPost dashboard frame).
   ═════════════════════════════════════════════════════════════ */
.i { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; padding: 14px;
  min-height: 100vh; background: var(--page); }
.rail { display: flex; flex-direction: column; gap: 22px; padding: 12px 6px 4px; min-width: 0; }
.rail-brand { display: flex; align-items: center; padding: 4px 8px 0; }
.rail-brand .lock { display: flex; align-items: baseline; gap: 10px; }
.rail-logo { height: 17px; width: auto; display: block; }
.rail .product { font-size: 14.5px; font-weight: 700; color: var(--cp-ink-soft); padding-left: 10px;
  border-left: 1px solid var(--border-2); line-height: 1; }
/* `.rail nav` outranks the old top-bar `nav` rules still used by nothing else. */
.rail nav.navs { display: flex; flex-direction: column; align-items: stretch; gap: 4px; font-size: inherit; }
.rail nav a.nav { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500; color: var(--cp-ink-soft); text-decoration: none; }
.rail nav a.nav:hover { color: var(--cp-blue); }
.rail nav a.nav.is-on { background: var(--cp-tint); color: var(--cp-blue-700); font-weight: 700; }
.rail nav a.nav.is-on .i { color: var(--cp-blue); }
.rail nav a.nav .count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--cp-blue-700);
  background: #fff; border-radius: 999px; padding: 0 8px; }
.rail .spacer { flex: 1; }
.acct { display: flex; align-items: center; gap: 12px; padding: 4px 6px; text-decoration: none; min-width: 0; }
.acct .av { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--cp-blue-700);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.acct div { min-width: 0; }
.acct b { display: block; font-size: 14px; color: var(--cp-ink); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.acct div span { display: block; font-size: 12.5px; color: var(--cp-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.panel { background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: 22px;
  box-shadow: var(--shadow-card); padding: 28px 32px 40px; min-width: 0; }
/* Pages written before the shell carried their own centred <main>; inside the
   panel they take its width instead. */
.panel main { max-width: none; margin: 0; padding: 0; }
.crumbs { font-size: 12.5px; color: var(--cp-muted); margin-bottom: 4px; display: flex; gap: 7px;
  flex-wrap: wrap; }
.crumbs a { color: var(--cp-blue); text-decoration: none; }
.crumbs b { color: var(--cp-ink); }
.crumbs .sep { color: var(--muted-2); }
.page-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.page-top h1 { font-size: 24px; font-weight: 700; color: var(--cp-ink); margin: 0; letter-spacing: -.01em; }
.page-top .head-sub { margin: 2px 0 0; font-size: 13.5px; color: var(--cp-muted); }
.page-top .actions { display: flex; gap: 12px; align-items: center; flex: none; }
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; padding: 8px; gap: 8px; }
  .rail { flex-direction: row; align-items: center; gap: 10px; padding: 4px; overflow-x: auto; }
  .rail nav.navs { flex-direction: row; }
  .rail .spacer, .rail .acct div { display: none; }
  .panel { padding: 18px 16px 28px; border-radius: 16px; }
}
.bare { min-height: 100vh; display: flex; flex-direction: column; }
.bare-brand { display: flex; align-items: baseline; gap: 10px; padding: 22px 28px 0; }
.auth-logo { height: 20px; width: auto; display: block; }
.bare-brand .product { font-size: 16px; font-weight: 700; color: var(--cp-ink-soft); padding-left: 10px;
  border-left: 1px solid var(--border-2); line-height: 1; }

/* ── Workflows home: a card per workflow and per Smart Alert ── */
.home .section { margin-top: 26px; }
.home .section > h2 { font-size: 15.5px; font-weight: 700; color: var(--cp-ink); margin: 0 0 12px; }
.home .card-sub { font-size: 12.5px; color: var(--cp-muted); margin: 0 0 12px; }
.home .notice.slim { margin: 16px 0 0; }
.flow-page > .notice.slim { padding: 12px 16px; margin: 16px 0 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.home .card { border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 18px;
  display: flex; flex-direction: column; gap: 14px; background: #fff; color: inherit;
  text-decoration: none; }
/* Cards in a row are the same height, so everything inside lines up across them:
   on a card of tiles (a Smart Alert) the name always takes two lines' room (a
   longer one is cut, whole on hover), which puts every row of tiles at one height,
   and the footers start level under them. A workflow card's ledger runs as long
   as its branches, so nothing below it lines up across cards and the room a
   one-line name left empty was only a gap. */
.home .card .card-head { display: flex; flex-direction: column; gap: 6px; }
.home .card:has(.tiles) .card-head { min-height: 72px; }
.home .card .card-head .when { margin: 0; }
.home .card .ct h3 { display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }

.home .card:hover { border-color: var(--cp-blue); }
.home .card.is-dragging { opacity: .45; border-style: dashed; }
.ct { display: flex; align-items: flex-start; gap: 10px; }
.ct h3 { margin: 0; font-size: 16.5px; font-weight: 700; color: var(--cp-ink); flex: 1; line-height: 1.35; }
.chip { font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.c-on { color: var(--cp-green); background: var(--cp-green-bg); }
.c-off { color: var(--cp-ink-soft); background: #eef1f6; }
.c-sa { color: var(--cp-ink-soft); background: var(--surface-2); }
.when { margin: -8px 0 0; font-size: 13px; color: var(--cp-muted); }
.warn-text { color: var(--cp-amber); }
/* The middle tile carries the list's name, the longest label, so it gets the room. */
.tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.tile { border: 1px solid var(--border-2); border-radius: var(--r); padding: 10px 12px; min-width: 0; }
/* A label takes exactly two lines' room: a short one leaves the second empty, a
   longer one is cut at two with … (whole on hover), so a row of tiles stays level
   and its numbers line up. */
.tile span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 12.5px; font-weight: 600; color: var(--cp-ink-soft);
  line-height: 1.3; height: 2.6em; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.tile b { display: block; font-size: 22px; font-weight: 700; color: var(--cp-ink);
  font-variant-numeric: tabular-nums; line-height: 1.3; }
.tile small { display: block; margin-top: 2px; font-size: 12px; color: var(--cp-ink-soft); }
.tile.tile-warn { background: var(--amber-bg); border-color: var(--amber-border); }
.tile.tile-warn b { color: var(--cp-amber); }
.tile.tile-good b { color: var(--cp-green); }
.foot { display: grid; gap: 2px; font-size: 13px; color: var(--cp-muted); }
.foot:empty { display: none; }
.foot .act { color: var(--cp-blue); font-weight: 600; white-space: nowrap; }

/* A workflow card's ledger: the total, then its branches hanging off it on a
   rule, every count in one right-hand column so they read down like a ledger. */
.ledger { display: grid; gap: 8px; font-size: 13.5px; }
.lg-total, .lg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.lg-total span { color: var(--cp-ink-soft); font-weight: 600; }
.lg-total b { font-size: 20px; font-weight: 700; color: var(--cp-ink); font-variant-numeric: tabular-nums; }
.lg-branches { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--cp-line);
  display: grid; gap: 10px; }
.lg-row span { color: var(--cp-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-row b { font-weight: 700; color: var(--cp-ink); font-variant-numeric: tabular-nums; }
.lg-branch.is-empty .lg-row :is(span, b) { color: var(--cp-muted); font-weight: 500; }
.lg-branch.is-undecided .lg-row span { color: var(--cp-amber); }
.lg-note { margin: 3px 0 0; font-size: 12.5px; color: var(--cp-muted); }
.lg-line { display: flex; gap: 7px; align-items: flex-start; margin: 4px 0 0; font-size: 12.5px;
  color: var(--cp-ink-soft); line-height: 1.45; }
.lg-line .i { width: 14px; height: 14px; flex: none; margin-top: 2px; fill: none; stroke: var(--cp-muted);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lg-line .t-good { color: var(--cp-green); font-weight: 600; }
.lg-line .t-warn { color: var(--cp-amber); font-weight: 600; }
.lg-line .t-bad { color: var(--cp-danger); font-weight: 600; }
.lg-line .t-quiet { color: var(--cp-muted); }
.lg-needs { margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--cp-line-2);
  font-size: 13px; font-weight: 600; color: var(--cp-amber); }

/* ── A workflow's page: header, tabs, tables ── */
.flow-page .title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* The switch and Preview sit on one line, level with the title. Each form is a flex
   box so the line box a plain block form adds under inline content cannot push one
   control lower than the other. A version not yet previewed says so right under the
   greyed switch, and Preview becomes the button to press. */
.flow-page .actions { flex-direction: column; align-items: flex-end; gap: 6px; }
.flow-page .action-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: flex-end; min-height: 36px; }
.flow-page .actions form { margin: 0; display: flex; align-items: center; }
.flow-page .preview-first { margin: 0; font-size: 12.5px; color: var(--cp-amber); text-align: right; }
.flow-page .needs-preview .switch-label { cursor: not-allowed; color: var(--cp-muted); }
.switch-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600;
  color: var(--cp-ink-soft); cursor: pointer; }
input.sw { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; border-radius: 999px;
  background: var(--border-2); position: relative; margin: 0; cursor: pointer; flex: none; transition: background .15s; }
input.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.2); transition: left .15s; }
input.sw:checked { background: var(--cp-blue); }
input.sw:checked::after { left: 18px; }
input.sw:disabled { opacity: .5; cursor: not-allowed; }
input.sw:focus-visible { outline: none; box-shadow: var(--ring); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--cp-line); margin: 22px 0 18px; overflow-x: auto; }
.tabs .tab { border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 14px; font-weight: 600;
  font-size: 14.5px; color: var(--cp-ink-soft); text-decoration: none; display: inline-flex; align-items: center;
  gap: 8px; white-space: nowrap; }
.tabs .tab.on { color: var(--cp-blue-700); border-bottom-color: var(--cp-blue); }
.tabs .tab .n, .soon { font-size: 12px; font-weight: 700; line-height: 18px; border-radius: 999px; padding: 1px 8px; }
.tabs .tab .n { color: var(--cp-ink-soft); background: var(--surface-2); font-variant-numeric: tabular-nums; }
.tabs .tab.on .n { color: var(--cp-blue-700); background: var(--cp-tint); }
.soon { color: #6d3beb; background: #f1ecfe; white-space: nowrap; }
.table-wrap { border: 1px solid var(--border-2); border-radius: var(--r-lg); overflow-x: auto; }
table.dtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dtable th { background: var(--surface-2); text-align: left; font-weight: 700; color: var(--cp-ink);
  padding: 11px 14px; border-bottom: 1px solid var(--border-2); white-space: nowrap; }
.dtable td { padding: 11px 14px; border-bottom: 1px solid var(--cp-line); color: var(--cp-ink-soft); vertical-align: top; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover td { background: var(--surface-2); }
.dtable td b { display: block; color: var(--cp-ink); font-weight: 600; }
.dtable td .k { display: block; font-size: 12px; color: var(--cp-muted); }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable .go { text-align: right; white-space: nowrap; }
.dtable .go a { color: var(--cp-blue); font-weight: 600; text-decoration: none; }
.dtable .last { max-width: 320px; }
.muted { color: var(--cp-muted); }
.st { display: inline-block; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.st-good { color: var(--cp-green); background: var(--cp-green-bg); }
.st-warn { color: var(--cp-amber); background: var(--amber-bg); }
.st-part { color: var(--cp-ink-soft); background: #eef1f6; }
.st-quiet { color: var(--cp-muted); background: var(--surface-2); }
.st-bad { color: var(--cp-danger); background: var(--cp-danger-bg); }
.flow-page .hint { font-size: 12.5px; color: var(--cp-muted); margin: 10px 0 0; }
.empty-pane { border: 1.5px dashed var(--border-2); border-radius: var(--r-lg); padding: 44px 24px; text-align: center; color: var(--cp-muted); }
.empty-pane h3 { color: var(--cp-ink); font-size: 16px; margin: 0 0 6px; display: flex; gap: 10px; justify-content: center; align-items: center; }
.empty-pane p { max-width: 520px; margin: 0 auto; font-size: 13.5px; }

/* ── The Integrations tab: one card per connected system ── */
.integ-card { padding: 22px; }
.integ-head h2 { margin: 0; font-size: 17px; color: var(--cp-ink); }
.integ-head .k { display: block; font-size: 12.5px; color: var(--cp-muted); margin: 3px 0 0; }
.integ-conn { margin: 14px 0; padding: 14px 16px; background: var(--surface-2); border-radius: var(--r-md, 12px); }
.integ-conn p { margin: 0 0 8px; font-size: 13px; color: var(--cp-ink-soft); }
.integ-conn p:last-child { margin-bottom: 0; }
.integ-mapping { margin-top: 18px; }
.integ-mapping select { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--cp-line); background: var(--cp-surface); color: var(--cp-ink); }
.integ-rule { font-size: 13.5px; color: var(--cp-ink-soft); margin: 10px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.integ-rule .k { font-weight: 600; color: var(--cp-ink); }
.integ-history { margin-top: 18px; border-top: 1px solid var(--cp-line); padding-top: 14px; }
.integ-history h3 { font-size: 13.5px; margin: 0 0 8px; color: var(--cp-ink); }
.integ-history ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.integ-history li { font-size: 12.5px; color: var(--cp-ink-soft); }
/* One card per kind of connection: a title and what it is for on the left, its
   state on the right, so the tab reads as a status board before any detail. */
#integrations-tab > .card + .card { margin-top: 16px; }
.integ-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.integ-top h2 { margin: 0; font-size: 17px; color: var(--cp-ink); }
.integ-top .k { margin: 4px 0 0; font-size: 13px; color: var(--cp-muted); }
.integ-top .st { flex: none; margin-top: 2px; }
.integ-empty { margin: 16px 0 0; font-size: 13.5px; color: var(--cp-ink-soft); }
.integ-system { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--cp-line); }
.integ-sys-head { display: flex; align-items: center; gap: 10px; }
.integ-sys-head h3 { margin: 0; font-size: 15px; color: var(--cp-ink); }
.integ-system > .k { display: block; margin: 3px 0 0; font-size: 12.5px; color: var(--cp-muted); }
/* The saved login, as facts rather than sentences: what it is, who saved it, how it last went. */
.integ-facts { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px 16px;
  margin: 18px 0 0; padding: 14px 16px; background: var(--surface-2); border-radius: var(--r-md, 12px); font-size: 13.5px; }
.integ-facts dt { color: var(--cp-muted); }
.integ-facts dd { margin: 0; color: var(--cp-ink); overflow-wrap: anywhere; }
.integ-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.integ-actions form { margin: 0; }
.integ-note { font-size: 12.5px; color: var(--cp-muted); margin-left: 4px; }
/* The tab's index: every connection on one line each — what it is, what it is
   connected to, how it stands — so what a brand has is clear before any detail. */
.integ-index { padding: 4px 0; overflow: hidden; }
.integ-index-row { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 12px 22px; text-decoration: none; color: inherit; font-size: 13.5px; }
.integ-index-row + .integ-index-row { border-top: 1px solid var(--cp-line); }
.integ-index-row:hover { background: var(--surface-2); }
.integ-index-row:focus-visible { outline: none; box-shadow: var(--ring); }
.integ-index-row b { color: var(--cp-ink); font-weight: 600; }
.integ-index-what { color: var(--cp-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.integ-index-st, .integ-top-st { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#integrations-tab > .card[id] { scroll-margin-top: 24px; }
/* A group brand's agent logins: one row per brand, not a card each. */
.integ-logins { margin-top: 18px; }
.integ-logins td { vertical-align: middle; }
.integ-logins .integ-user { display: block; color: var(--cp-ink); overflow-wrap: anywhere; }
.integ-logins .integ-last { max-width: 300px; }
.integ-row-actions { white-space: nowrap; text-align: right; }
.integ-row-actions form { display: inline; margin: 0; }
.integ-row-actions .btn + .btn, .integ-row-actions form + .btn, .integ-row-actions .btn + form,
.integ-row-actions form + form { margin-left: 6px; }
.integ-logins tr[id] { scroll-margin-top: 96px; }
.integ-card .integ-note-below { margin: 10px 0 0; font-size: 12.5px; }
/* Narrower than the template panel, but full height like every other panel in
   Settings: shrunk to its two fields it hung from the corner like a stray popup. */
.drawer.drawer-narrow { width: 440px; }

/* ── The editor, restyled: each step a card, each action a card ── */
.wf-editor .wf-stage { padding: 16px 18px 18px 58px; margin: 0 0 14px; border: 1px solid var(--border-2);
  border-radius: var(--r-lg); background: #fff; }
.wf-editor .wf-stage::before { left: 18px; top: 16px; width: 26px; height: 26px; border: 0; background: var(--cp-tint);
  color: var(--cp-blue-700); font-weight: 700; font-size: 12.5px; }
.wf-editor .wf-stage::after { display: none; }
.wf-editor .wf-stage-head h3 { font-size: 15.5px; }
/* The number sits in the step's own header row, so it lines up with the title,
   and the row stays in view while a long step scrolls past (up to the step's
   end, where the next step's row takes over). It reaches the card's edges so
   what scrolls under it is hidden. */
.wf-editor .wf-stage::before { display: none; }
.wf-editor .wf-stage > .wf-stage-head { position: sticky; top: 0; z-index: 3; background: #fff;
  margin: -16px -18px 8px -58px; padding: 12px 18px 8px; gap: 14px;
  border-radius: var(--r-lg) var(--r-lg) 0 0; }
.wf-editor .wf-stage-head h3 { margin: 0; }
.wf-editor .wf-stage-n { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid;
  place-items: center; background: var(--cp-tint); color: var(--cp-blue-700);
  font: 700 12.5px var(--font); }
.wf-editor .wf-action { background: #fff; border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 14px; }
.wf-editor .wf-action-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wf-editor .ah-name { display: inline-flex; align-items: center; gap: 10px; }
.wf-editor .ah-name b { color: var(--cp-ink); font-size: 14.5px; }
.wf-editor .ah-name .ic { color: var(--cp-blue); }
.wf-editor .for { font-size: 12px; font-weight: 700; color: var(--cp-ink-soft); background: #eef1f6; border-radius: 999px; padding: 1px 9px; }
.wf-editor .wf-after { border-top: 1px solid var(--cp-line); padding-top: 10px; display: grid; gap: 2px; }
.wf-editor .wf-action label.wf-after-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--cp-line); font-size: 13.5px; color: var(--cp-ink); }
.wf-editor .wf-action .wf-after-notify { display: grid; gap: 8px; padding: 10px 0 12px; border-bottom: 1px solid var(--cp-line);
  font-size: 13.5px; color: var(--cp-ink); }
.wf-editor .wf-action .wf-after-notify label { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wf-editor .wf-action .wf-after-notify input { flex: 1; min-width: 220px; }
.wf-editor .wf-action .wf-after-notify select { width: auto; }
.wf-editor .wf-action .wf-notify-rule { display: grid; gap: 6px; padding: 8px 0; }
.wf-editor .wf-action .wf-notify-rule + .wf-notify-rule { border-top: 1px dashed var(--cp-line); }
.wf-editor .wf-action .wf-after-empty { display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 12px 14px; border: 1px dashed var(--border-2); border-radius: var(--r-lg); background: #fff; }
.wf-editor .wf-action .wf-after-empty p { margin: 0; font-size: 13px; color: var(--cp-ink-soft); }
.wf-editor .wf-action .wf-after-empty .btn { white-space: nowrap; flex-shrink: 0; }
.wf-editor .wf-action label.wf-after-row.wf-after-sub { padding-left: 28px; }
.wf-editor .wf-after-when { color: var(--cp-muted); display: inline-flex; gap: 8px; align-items: center; font-size: 13px; }
.wf-editor .wf-after-when select { width: auto; }
.wf-editor .wf-addmenu { border: 1.5px dashed var(--border-2); border-radius: var(--r-lg); padding: 12px 14px; display: grid; gap: 8px; background: #fff; margin-top: 10px; }
.wf-editor .wf-addmenu-head { font-size: 13.5px; color: var(--cp-ink); }
.wf-editor .wf-addmenu-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-editor .wf-addmenu-for { width: 110px; font-size: 12.5px; color: var(--cp-muted); }
.wf-editor .wf-opt { font: 600 13px var(--font); color: var(--cp-blue); background: var(--cp-tint); border: 1px solid var(--cp-tint-2);
  border-radius: var(--r-sm); padding: 4px 10px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.wf-editor .wf-opt.is-soon { color: var(--cp-muted); background: var(--surface-2); border-color: var(--cp-line); cursor: default; }
.wf-editor .calc-grid { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px 16px; align-items: center; font-size: 13.5px; }
.wf-editor .calc-grid .cl { color: var(--cp-muted); }
.wf-editor .calc-grid .cv { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.wf-editor .calc-grid .wf-var-name { max-width: 240px; }
@media (max-width: 720px) {
  .wf-editor .wf-stage { padding-left: 18px; }
  .wf-editor .wf-stage > .wf-stage-head { margin-left: -18px; }
  .wf-editor .calc-grid { grid-template-columns: 1fr; gap: 6px; }
  .wf-editor .wf-addmenu-for { width: 100%; }
}
/* Inside the panel the editor takes the full width, one column as the mockup
   has it; its plain-words and field reference sits below the Save bar. */
.panel .wf-editor .wf-layout { grid-template-columns: minmax(0, 1fr); }
.panel .wf-editor .wf-summary { position: static; max-height: none; order: 2; margin-top: 18px; }
.panel .wf-editor .wf-edit { max-width: 980px; }
.wf-editor .calc-grid .cv select { width: auto; max-width: 100%; }
/* The sidebar stays in view while a long page scrolls, as the dashboard's does. */
@media (min-width: 721px) {
  .rail { position: sticky; top: 14px; height: calc(100vh - 28px); overflow-y: auto; }
}

/* ── Settings: Carrier POCs, Mail templates, Holidays ── */
.settings-page .lead-hint { font-size: 13.5px; color: var(--cp-muted); margin: 0 0 14px; max-width: 760px; }
.settings-page .row-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.settings-page .notice.slim { margin: 0 0 14px; }
.dtable .w-carrier { width: 200px; }
.dtable td .st { margin-top: 4px; }
.dtable tr.open-row td { background: var(--cp-tint) !important; }
.btn.sm { padding: 6px 14px; font-size: 13px; }
.poc-form { display: grid; gap: 10px; }
.poc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.poc-actions { display: flex; align-items: center; gap: 14px; }
.poc-actions .cancel { font-size: 13px; color: var(--cp-muted); font-weight: 600; text-decoration: none; }
.emails { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #fff;
  border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 5px 6px; min-height: 38px; cursor: text; }
.emails:focus-within { border-color: var(--cp-blue); box-shadow: var(--ring); }
.emails textarea { width: 100%; border: 0; resize: vertical; font: inherit; }
.em { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: #eef1f6; border-radius: 999px; padding: 2px 4px 2px 10px; max-width: 100%; overflow-wrap: anywhere; }
.em.ro { padding: 2px 10px; margin: 0 4px 4px 0; white-space: nowrap; overflow-wrap: normal; }
.em button { border: 0; background: none; color: var(--cp-muted); font-weight: 700; cursor: pointer; padding: 0 4px; font-size: 14px; line-height: 1; }
.em.bad { background: var(--cp-danger-bg); color: #b91c1c; }
.em.bad button { color: #b91c1c; }
.add-em { flex: 1; min-width: 120px; border: 0; outline: none; font: inherit; font-size: 13px; padding: 3px 4px; background: transparent; }
.em-err { margin: 0; font-size: 12.5px; color: #b91c1c; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* The side panel a mail template or a calendar opens in. */
.scrim { position: fixed; inset: 0; background: rgba(15,23,42,.18); z-index: 40; }
.drawer { position: fixed; top: 12px; right: 12px; bottom: 12px; width: 560px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid var(--cp-line); border-radius: 18px; box-shadow: var(--shadow-pop); z-index: 41; }
.drawer-form { display: flex; flex-direction: column; height: 100%; margin: 0; }
.drawer .dh { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 24px 14px; border-bottom: 1px solid var(--cp-line); }
.drawer .dh .k { font-size: 12.5px; color: var(--cp-muted); }
.drawer .dh h2 { margin: 2px 0 0; font-size: 19px; color: var(--cp-ink); }
.drawer .dh .x { font-size: 22px; color: var(--cp-muted); line-height: 1; text-decoration: none; }
.drawer .db { padding: 18px 24px; overflow: auto; display: grid; gap: 14px; flex: 1; align-content: start; }
.drawer .f { display: grid; gap: 6px; }
.drawer .f > span:first-child { font-size: 13px; font-weight: 600; color: var(--cp-ink); }
.drawer .f em { font-style: normal; font-weight: 400; color: var(--cp-muted); margin-left: 6px; }
.drawer .f.f-check { display: flex; align-items: center; gap: 8px; }
.drawer .f.f-check > span { font-size: 13px; font-weight: 600; color: var(--cp-ink); }
.drawer .f.f-check input[type="checkbox"] { accent-color: var(--cp-check); width: 15px; height: 15px; flex: none; }
.drawer input:not([type=hidden]), .drawer textarea { width: 100%; font: inherit; font-size: 13.5px; border: 1px solid var(--border-2);
  border-radius: var(--r-sm); padding: 9px 12px; background: #fff; color: var(--ink-2); line-height: 1.6; }
.drawer input:focus, .drawer textarea:focus { outline: none; border-color: var(--cp-blue); box-shadow: var(--ring); }
.drawer .chips { display: flex; gap: 6px; align-items: center; margin-top: -6px; }
.drawer .chips .k { font-size: 12.5px; color: var(--cp-muted); margin-right: 2px; }
.drawer .ph { font: 600 12.5px var(--font); color: var(--cp-blue-700); background: var(--cp-tint); border: 0; border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.drawer .listbox { border: 1.5px dashed var(--border-2); border-radius: var(--r); padding: 12px; font-size: 12.5px; color: var(--cp-muted); text-align: center; background: var(--surface-2); }
.drawer .hint { font-size: 12.5px; color: var(--cp-muted); margin: 0; }
.drawer .df { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--cp-line); }
.drawer .df .reset { margin-left: auto; font: 600 13px var(--font); color: var(--cp-muted); background: none; border: 0; cursor: pointer; }
@media (max-width: 720px) { .poc-grid { grid-template-columns: 1fr; } }
/* On a phone the sidebar is a top bar: the logo, then the three links in a row. */
@media (max-width: 720px) {
  .rail { flex-direction: column; align-items: stretch; gap: 8px; padding: 6px 4px 2px; overflow: visible; }
  .rail nav.navs { flex-direction: row; gap: 4px; overflow-x: auto; }
  .rail nav a.nav { padding: 7px 10px; font-size: 14px; gap: 8px; flex: none; }
  .rail .acct-menu { display: none; }
  .page-top { flex-wrap: wrap; }
}
.grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
@media (max-width: 720px) { .app { align-content: start; } }

/* Deleting a workflow: at the foot of Setup, asked twice. */
.danger-zone { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 28px; padding: 16px 18px; border: 1px solid var(--cp-danger-bg); border-radius: var(--r-lg); }
.danger-zone b { color: var(--cp-ink); }
.danger-zone .hint { margin: 2px 0 0; }
.confirm-delete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.btn.danger { background: var(--cp-danger); color: #fff; border-color: var(--cp-danger); }
.danger-text { color: var(--cp-danger) !important; }

/* The loading bar along the top of every page (base.html). It creeps towards the
   right and waits there; the next page replaces it. Blue, like everything that
   answers a click. */
.loadbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1000;
  background: var(--cp-blue); box-shadow: 0 0 6px rgba(59, 118, 246, .45);
  pointer-events: none; }
.loadbar.is-going { animation: loadbar-creep 8s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes loadbar-creep { 0% { width: 0; } 10% { width: 35%; } 100% { width: 92%; } }
@media (prefers-reduced-motion: reduce) {
  .loadbar.is-going { animation: none; width: 100%; opacity: .7; }
}

/* Notices one above another keep apart; a letter icon ("i", "!") is drawn as a
   round badge the size of the drawn warning icon, so every notice's text starts
   at the same place. */
.notice + .notice, .flow-page .notice.slim + .automation > .notice:first-child { margin-top: 12px; }
.notice .ico:not(:has(svg)) {
  width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid currentColor;
  display: inline-grid; place-items: center; font-size: 12px; font-weight: 700;
  line-height: 1; margin-top: 0;
}

/* The account menu at the foot of the sidebar: it opens upwards over the rail. */
.acct-menu { position: relative; }
.acct-menu > summary { list-style: none; cursor: pointer; border-radius: var(--r); }
.acct-menu > summary::-webkit-details-marker { display: none; }
.acct-menu > summary:hover, .acct-menu[open] > summary { background: var(--surface-2); }
.acct-menu > summary:focus-visible { outline: none; box-shadow: var(--ring); }
.acct-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20;
  background: #fff; border: 1px solid var(--border-2); border-radius: var(--r-md);
  box-shadow: var(--sh-md, 0 8px 24px rgba(15, 23, 42, .12)); padding: 6px; }
.acct-pop a { display: block; padding: 8px 10px; border-radius: var(--r); font-size: 14px;
  font-weight: 600; color: var(--cp-ink); text-decoration: none; }
.acct-pop a:hover { background: var(--surface-2); color: var(--cp-blue-700); }
/* A ClickPost person's client list, above Sign out. */
.acct-clients { border-bottom: 1px solid var(--border-2); margin: 0 -6px 6px; padding: 0 6px 6px;
  max-height: 320px; overflow-y: auto; }
.acct-head { display: block; padding: 6px 10px 4px; font-size: 12px; font-weight: 600; color: var(--cp-muted); }
.acct-clients form { margin: 0; }
.acct-clients button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0;
  background: none; border-radius: var(--r); font: inherit; font-size: 14px; color: var(--cp-ink); cursor: pointer; }
.acct-clients button:hover:not(:disabled) { background: var(--surface-2); color: var(--cp-blue-700); }
.acct-clients button.is-on { color: var(--cp-blue-700); font-weight: 600; cursor: default; }
.acct-clients button.is-on::after { content: "✓"; float: right; }

/* The AI call step: its agent and campaign IDs, side by side. */
.wf-call-ids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wf-call-ids label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--cp-ink-soft); }
.wf-call-ids input { font-family: var(--mono, ui-monospace, monospace); }

/* ── A new workflow's first screen: what it checks ──────────────────────────
   Two choices, each drawn as the journey its records follow, so they read apart
   before a word is read. Every card is a link straight into the editor. */
.wf-start { max-width: 920px; }
.wf-start h1 { margin: 6px 0 6px; font-size: 26px; font-weight: 700; color: var(--cp-ink);
  letter-spacing: -.015em; }
.wf-start-sub { margin: 0 0 26px; max-width: 62ch; font-size: 14px; line-height: 1.55; color: var(--cp-muted); }
.wf-start-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.wf-start-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 24px 26px 22px;
  background: var(--cp-surface); border: 1px solid var(--border-2); border-radius: var(--r-xl);
  color: var(--cp-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.wf-start-card:hover { border-color: var(--cp-blue); box-shadow: var(--shadow-pop); }
.wf-start-card:focus-visible { outline: none; border-color: var(--cp-blue); box-shadow: var(--ring); }
.wf-start-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.wf-start-hint { font-size: 13.5px; line-height: 1.5; color: var(--cp-muted); max-width: 46ch; }
.wf-start-go { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--cp-blue-700); }
.wf-start-card:hover .wf-start-go { text-decoration: underline; text-underline-offset: 3px; }

/* The journey: three stops on a dashed line, the last one filled — where the
   records are headed. */
.wf-route { position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 0 0 14px; padding: 16px 0 14px; background: var(--surface-2); border-radius: var(--r-md); }
.wf-route::before { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 21px;
  border-top: 2px dashed var(--border-2); transition: border-color .15s; }
.wf-route-stop { position: relative; display: grid; justify-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; color: var(--cp-muted); text-align: center; }
.wf-route-stop i { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2);
  border: 2px solid var(--muted-2); transition: border-color .15s, background .15s; }
.wf-route-stop:last-child i { background: var(--muted-2); }
.wf-start-card:hover .wf-route::before { border-color: #BFD0F3; }
.wf-start-card:hover .wf-route-stop i { border-color: var(--cp-blue); }
.wf-start-card:hover .wf-route-stop:last-child i { background: var(--cp-blue); }
.wf-start-card:hover .wf-route-stop:last-child { color: var(--cp-ink); }
@media (prefers-reduced-motion: reduce) {
  .wf-start-card, .wf-route::before, .wf-route-stop i { transition: none; }
}

/* ── The editor's opening: name, the data it checks, then the steps ───────── */
/* The name reads as the page's title, but still looks like a box you type in. */
.wf-editor .wf-edit .wf-title input:not([type=checkbox]):not([type=radio]) {
  font-size: 22px; font-weight: 700; padding: 10px 14px; border-color: var(--border-2); }
.wf-editor .wf-edit .wf-title input::placeholder { color: var(--muted-2); font-weight: 500; }
.wf-editor .wf-title { margin: 0 0 12px; }

/* The data, chosen on the first screen: one line, with Change to switch. */
.wf-editor .wf-data { margin: 0 0 6px; }
.wf-editor .wf-data > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--border-2); border-radius: 999px; background: #fff;
  font-size: 13.5px; cursor: pointer; }
.wf-editor .wf-data > summary::-webkit-details-marker { display: none; }
.wf-editor .wf-data > summary:focus-visible { outline: none; box-shadow: var(--ring); }
.wf-editor .wf-data-label { color: var(--cp-muted); }
.wf-editor .wf-data-name { color: var(--cp-ink); font-weight: 600; }
.wf-editor .wf-data-change { color: var(--cp-blue-700); font-weight: 600; padding-left: 8px;
  border-left: 1px solid var(--cp-line); }
.wf-editor .wf-data > summary:hover .wf-data-change { text-decoration: underline; text-underline-offset: 3px; }
.wf-editor .wf-data[open] .wf-data-change { color: var(--cp-muted); }
.wf-editor .wf-data[open] > summary { margin-bottom: 12px; }

/* Steps, Schedule and Approval are separate parts of the page, each with a rule
   above it and a heading of the same size. */
.wf-editor .wf-block { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--cp-line); }
.wf-editor .wf-section-head h3, .wf-editor .wf-section-legend { margin: 0 0 4px; padding: 0;
  font-size: 16.5px; font-weight: 600; color: var(--cp-ink); letter-spacing: -.01em; }
.wf-editor .wf-section-head { margin-bottom: 14px; }
.wf-editor .wf-section-head .wf-help { margin: 0; }
.wf-editor .wf-reads.wf-block > .wf-section-head { margin-bottom: 12px; }
.wf-editor .wf-section-legend { margin-bottom: 12px; }

/* Adding a step: lined up with the steps, not indented past them. */
.wf-editor .wf-addstep, .wf-editor .wf-addstep-help, .wf-editor .wf-savebar { margin-left: 0; }
.wf-editor .wf-addstep-empty { display: block; padding: 16px; }
.wf-editor .wf-addstep-lead { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--cp-ink); }
.wf-editor .wf-addstep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
/* The If is the step that decides what happens to each group, so it gets a row
   of its own under the steps that prepare for it. */
.wf-editor .wf-addtile[value="add_step:if"] { grid-column: 1 / -1; grid-template-columns: auto 1fr;
  align-items: baseline; column-gap: 12px; }
.wf-editor .wf-addtile { display: grid; gap: 4px; align-content: start; text-align: left; cursor: pointer;
  font: inherit; padding: 12px 14px; background: #fff; border: 1px solid var(--border-2);
  border-radius: var(--r-md); transition: border-color .15s, background .15s; }
.wf-editor .wf-addtile b { font-size: 14px; font-weight: 600; color: var(--cp-blue-700); }
.wf-editor .wf-addtile b::before { content: "+"; margin-right: 6px; }
.wf-editor .wf-addtile span { font-size: 12.5px; line-height: 1.45; color: var(--cp-muted); }
.wf-editor .wf-addtile:hover { border-color: var(--cp-blue); background: var(--cp-tint); }
.wf-editor .wf-addtile:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--cp-blue); }
@media (max-width: 860px) { .wf-editor .wf-addstep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .wf-editor .wf-addtile { transition: none; } }

/* ── A run's summary: the workflow's own path, branch by branch ──
   Each branch leads with how many shipments landed in it, the one large number on
   the page; its steps hang off a rail in the order they run, and each email, call
   or update under a step is a row that opens its own page. A step that never fired
   stays in place, greyed, so the summary is always the whole workflow. */
.run-page .notice.slim, .action-page .notice.slim { padding: 12px 16px; margin: 0 0 16px; }
.run-facts { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 18px; padding: 0;
  border: 1px solid var(--cp-line); border-radius: var(--r); background: var(--surface-2); }
.run-facts > div { padding: 10px 18px; min-width: 120px; }
.run-facts > div + div { border-left: 1px solid var(--cp-line); }
.run-facts dt { font-size: 12.5px; color: var(--cp-muted); }
.run-facts dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; color: var(--cp-ink);
  font-variant-numeric: tabular-nums; }
.run-facts .is-warn dd { color: var(--cp-amber); }
.run-waiting { margin: 0 0 18px; padding: 11px 16px; font-size: 13.5px; color: var(--cp-ink-soft);
  background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: var(--r); }
.run-waiting b { color: var(--cp-amber); }

.trace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.trace .br { min-width: 0; border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 18px 20px; }
.trace .br-head { display: flex; align-items: center; justify-content: flex-start; gap: 16px;
}
.trace .br-n { min-width: 56px; font-size: 28px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: var(--cp-ink); font-variant-numeric: tabular-nums; }
.trace .br.is-empty .br-n { color: var(--muted-2); }
.trace .br.is-undecided .br-n { color: var(--cp-amber); }
.trace .br-name { min-width: 0; }
.trace .br-name h3 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--cp-ink); }
.trace .br-name span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--cp-muted); }
.trace .br-name .br-stage { font-style: italic; }

.trace .steps { list-style: none; margin: 16px 0 0 27px; padding: 0 0 0 26px;
  border-left: 2px solid var(--cp-line); }
.trace .step { position: relative; }
.trace .step + .step { margin-top: 16px; }
.trace .step::before { content: ""; position: absolute; left: -33px; top: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--cp-blue); box-shadow: 0 0 0 3px #fff; }
.trace .step.is-idle::before { background: #fff; border: 2px solid var(--border-2); width: 4px; height: 4px; }
.trace .step-head b { display: block; font-size: 14px; font-weight: 600; color: var(--cp-ink); }
.trace .step-head span { display: block; margin-top: 2px; font-size: 13px; color: var(--cp-muted);
  line-height: 1.45; max-width: 80ch; }
.trace .step.is-idle .step-head b { color: var(--cp-muted); }
.trace .idle { margin: 6px 0 0; font-size: 13px; color: var(--cp-muted); }
.trace .no-steps { margin: 12px 0 0 83px; }

.trace .outs { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--cp-line);
  border-radius: var(--r); overflow: hidden; background: #fff; }
.trace .outs.flat { margin-top: 14px; }
.trace .outs li + li { border-top: 1px solid var(--cp-line-2); }
.trace .out { display: grid; grid-template-columns: minmax(120px, 1.1fr) 120px minmax(0, 3fr) 18px;
  align-items: center; gap: 14px; padding: 10px 14px; color: inherit; text-decoration: none;
  font-size: 13.5px; }
.trace a.out:hover { background: var(--surface-2); }
.trace a.out:hover .chev { color: var(--cp-blue); }
.trace a.out:focus-visible { outline: none; box-shadow: inset var(--ring); background: var(--surface-2); }
.trace .out .who { font-weight: 600; color: var(--cp-ink); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.trace .out .n { color: var(--cp-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trace .out .state { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trace .out .st { flex: none; }
.trace .out .det { color: var(--cp-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0; }
.trace .out .chev { color: var(--muted-2); display: flex; }
.trace .out.is-static { grid-template-columns: minmax(120px, 1.1fr) 120px minmax(0, 3fr); }
.trace .wf-fold { margin: 14px 0 0 55px; }
@media (max-width: 720px) {
  .trace .steps { margin-left: 8px; padding-left: 18px; }
  .trace .step::before { left: -25px; }
  .trace .out { grid-template-columns: 1fr auto 18px; }
  .trace .out .state { grid-column: 1 / -1; grid-row: 2; }
  .trace .out.is-static { grid-template-columns: 1fr auto; }
  .trace .wf-fold, .trace .no-steps { margin-left: 0; }
}

/* ── One email, call or update from a run ── */
.action-page .title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.action-page .title-row h2 { margin: 0; }
.action-page .page-head p { margin-top: 4px; }
.action-page .sub-h { margin: 24px 0 10px; font-size: 14.5px; font-weight: 700; color: var(--cp-ink); }
.action-page .form-foot { margin-top: 14px; display: flex; gap: 10px; }
.action-page .run-facts { margin-top: 4px; }
.action-page .table-wrap { margin-bottom: 4px; }
.mail-card { border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 18px 20px;
  max-width: 900px; background: #fff; }
.mail-kicker { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; color: var(--cp-muted); }
.mail-addr { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 12px; margin: 0 0 4px;
  font-size: 13.5px; }
.mail-addr > div { display: contents; }
.mail-addr dt { color: var(--cp-muted); }
.mail-addr dd { margin: 0; color: var(--cp-ink-soft); overflow-wrap: anywhere; }
.mail-addr dd.subj { color: var(--cp-ink); font-weight: 600; }
.mail-body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cp-line); }
.mail-text { margin: 0 0 14px; white-space: pre-line; font-size: 14px; line-height: 1.6;
  color: var(--cp-ink); max-width: 75ch; }
.mail-table { overflow-x: auto; font-size: 13px; }
.mail-table > div { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--cp-ink); }
.mail-file { display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0; padding: 4px 10px;
  border: 1px solid var(--cp-line); border-radius: 999px; font-size: 12.5px; color: var(--cp-ink-soft); }
.action-page > .mail-addr { margin: 0 0 8px; max-width: 900px; }
/* ── A send-email action, folded: each part one line saying what it is set to ── */
.wf-editor .wf-seg { display: inline-flex; border: 1px solid var(--border-2); border-radius: 999px;
  padding: 2px; background: var(--surface-2); gap: 2px; }
.wf-editor .wf-action .wf-seg label { display: inline-flex; cursor: pointer; gap: 0; }
.wf-editor .wf-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wf-editor .wf-seg span { padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--cp-muted); white-space: nowrap; }
.wf-editor .wf-seg label:hover span { color: var(--cp-ink); }
.wf-editor .wf-seg input:checked + span { background: #fff; color: var(--cp-blue-700);
  box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 0 0 1px var(--cp-tint-2); }
.wf-editor .wf-seg input:focus-visible + span { box-shadow: var(--ring); }
.wf-editor .wf-sec { border-top: 1px solid var(--cp-line); }
.wf-editor .wf-sec > summary { list-style: none; cursor: pointer; display: grid;
  grid-template-columns: 12px 110px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 10px 0 0;
  font-size: 13.5px; }
.wf-editor .wf-sec > summary::-webkit-details-marker { display: none; }
.wf-editor .wf-sec > summary::before { content: ""; width: 6px; height: 6px; align-self: center;
  border-right: 1.5px solid var(--cp-muted); border-bottom: 1.5px solid var(--cp-muted);
  transform: rotate(-45deg); transition: transform .15s; }
.wf-editor .wf-sec[open] > summary::before { transform: rotate(45deg); }
.wf-editor .wf-sec > summary b { color: var(--cp-ink); }
.wf-editor .wf-sec > summary:hover b { color: var(--cp-blue-700); }
.wf-editor .wf-sec > summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }
.wf-editor .wf-sec-sum { color: var(--cp-ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.wf-editor .wf-sec[open] .wf-sec-sum { visibility: hidden; }
.wf-editor .wf-sec-body { display: grid; gap: 8px; padding: 10px 0 2px 20px; }
.wf-editor .wf-sec-body.wf-after { border-top: 0; gap: 2px; padding-top: 4px; }
.wf-editor .wf-sec > summary .wf-config-link { visibility: hidden; }
.wf-editor .wf-sec[open] > summary .wf-config-link, .wf-editor .wf-sec > summary:hover .wf-config-link { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .wf-editor .wf-sec > summary::before { transition: none; } }
/* Address chips inside a side panel: the typing box is part of the chip field,
   not a second box inside it. */
.drawer .emails .add-em, .drawer .emails .add-em:focus { border: 0; box-shadow: none; padding: 3px 4px; width: auto; background: transparent; }

/* ── Analytics ──────────────────────────────────────────── */
.an-filters { align-items: flex-end; gap: 12px; margin-top: 18px; }
.an-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--cp-ink-soft); }
.an-filters input, .an-filters select { font: 400 13.5px var(--font); padding: 6px 10px; border: 1px solid var(--cp-line); border-radius: var(--r-md, 8px); background: var(--cp-surface); color: var(--cp-ink); }
.an-section { margin-top: 26px; }
.an-section h2 { font-size: 17px; font-weight: 700; color: var(--cp-ink); margin: 0 0 4px; }
.an-section .lead-hint { margin: 0 0 12px; font-size: 13px; color: var(--cp-muted); }
.an-table th .k { display: block; font-weight: 500; font-size: 11.5px; color: var(--cp-muted); }
.an-table .num .k { display: block; font-size: 11.5px; color: var(--cp-muted); }
.an-toggle { all: unset; cursor: pointer; font-weight: 600; color: var(--cp-ink); }
.an-toggle::before { content: "▸"; display: inline-block; width: 14px; color: var(--cp-muted); }
.an-toggle[aria-expanded="true"]::before { content: "▾"; }
.an-toggle:focus-visible { outline: 2px solid var(--cp-blue); outline-offset: 2px; }
.an-type td { background: var(--surface-2); font-size: 13px; }
.an-indent { padding-left: 32px !important; }
.an-total td { border-top: 1px solid var(--border-2); background: var(--surface-2); }
/* Column groups: a rule down the left of each group, its name above it. */
.an-table .an-groups th { padding-top: 9px; padding-bottom: 7px; font-size: 12px; font-weight: 600;
  color: var(--cp-muted); border-bottom: 1px solid var(--cp-line); }
.an-table .an-carrier-h { vertical-align: bottom; }
.an-table .an-g { border-left: 1px solid var(--cp-line); }
.an-table thead tr:last-child th { font-size: 12.5px; }
/* The two rates carry a thin bar, so carriers can be compared down the column. */
.an-meter { display: block; height: 4px; margin: 5px 0 3px auto; width: 56px; border-radius: 2px;
  background: var(--cp-line); overflow: hidden; }
.an-meter i { display: block; height: 100%; background: var(--cp-blue); border-radius: 2px; }
.an-type .an-meter i { background: var(--muted-2); }
/* The carrier picker, shaped like the other filter boxes beside it. */
.an-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--cp-ink-soft); }
.an-filters .an-carriers { margin-left: 0; }
.an-filters .an-carriers .carrier-menu { left: 0; right: auto; }
.an-filters .carrier-menu-list label { flex-direction: row; gap: 10px; font: 500 13.5px var(--font); color: var(--cp-ink-soft); }
.an-filters .carrier-menu-list input { padding: 0; }
.an-pick { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; justify-content: space-between;
  font: 400 13.5px var(--font); padding: 6px 10px; border: 1px solid var(--cp-line); border-radius: var(--r-md, 8px);
  background: var(--cp-surface); color: var(--cp-ink); cursor: pointer; white-space: nowrap; }
.an-pick:focus-visible { outline: none; box-shadow: var(--ring); }
/* Which way round the table is grouped. */
.an-by { display: flex; align-items: center; gap: 4px; margin: 0 0 10px; font-size: 12.5px; color: var(--cp-muted); }
.an-by > span { margin-right: 6px; font-weight: 600; }
.an-seg { padding: 5px 12px; border: 1px solid var(--cp-line); border-radius: 999px; color: var(--cp-ink-soft);
  font-weight: 500; text-decoration: none; background: var(--cp-surface); }
.an-seg:hover { background: var(--cp-tint); }
.an-seg.on { background: var(--cp-tint); border-color: #CBD9F2; color: var(--cp-blue-700); font-weight: 600; }
.an-seg:focus-visible { outline: none; box-shadow: var(--ring); }
.page-top h1 .beta { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: 12px; font-weight: 700; line-height: 18px; letter-spacing: .02em; border-radius: 999px; padding: 1px 8px; color: #6d3beb; background: #f1ecfe; }

/* Whose mailbox a workflow's emails leave from, at the foot of an email step. */
.wf-editor .wf-sender { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; }
.wf-editor .wf-sender .btn { flex: none; }

/* A settings row a link or a save comes back to (its `#` id) lands below the
   sticky header, not under it. */
.dtable tr[id] { scroll-margin-top: 96px; }