/* ══════════════════════════════════════════════════════════════════════════
   PACE UI KIT — the app "structure" layer.

   Loaded AFTER styles.css and deliberately overrides only the shell and the
   list/table/detail vocabulary. Everything a page already draws with .card,
   .btn, .bdg, .inp etc. keeps working untouched, so this can be adopted page
   by page instead of in one risky sweep.

   The layout language is modelled on the outreach tools the owner benchmarked
   against (Saleshandy): a slim icon rail that expands on hover, a quiet top
   bar carrying the page identity, per-page tabs with counts, a horizontal
   stat strip, one toolbar row, and a dense bordered table. The palette stays
   PACE's (green accent), because the shape is what makes a product feel
   familiar — not the hue.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --rail-w:60px;          /* collapsed icon rail */
  --rail-w-open:232px;    /* expanded, on hover */
  --topbar-h:52px;
  --ink:#0F172A;
  --ink2:#475569;
  --ink3:#8A98AB;
  --line:#E6EAF0;
  --line2:#D6DEE8;
  --hover:#F4F6F9;
  --sel:#EDF7F0;          /* accent-tinted selection ground */
}

/* ── 1. THE RAIL ─────────────────────────────────────────────────────────── */
/* Collapsed by default so the working area is as wide as possible; the label
   is always in the DOM (never re-rendered on hover) so expanding costs one
   CSS transition and nothing else. Hover-to-expand overlays the content
   rather than pushing it, which is why #main keeps a fixed left margin. */
body.ui-kit #app{display:block;height:100vh;overflow:hidden}

body.ui-kit #sidebar{
  position:fixed;top:0;left:0;bottom:0;z-index:40;
  width:var(--rail-w);min-width:0;
  background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
  transition:width .16s cubic-bezier(.4,0,.2,1);
  box-shadow:none;
}
body.ui-kit #sidebar.pinned{width:var(--rail-w-open);box-shadow:var(--sh2)}

body.ui-kit #main{
  margin-left:var(--rail-w);height:100vh;
  display:flex;flex-direction:column;overflow:hidden;min-width:0;
}

/* Brand: the mark alone when collapsed, mark + wordmark when open. */
body.ui-kit .sb-brand{
  height:var(--topbar-h);min-height:var(--topbar-h);
  display:flex;align-items:center;padding:0 0 0 15px;
  border-bottom:1px solid var(--line);overflow:hidden;
}
body.ui-kit .rail-mark{
  width:30px;height:30px;flex-shrink:0;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent-m));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:-.4px;
}
body.ui-kit .rail-word{
  font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.4px;
  margin-left:10px;white-space:nowrap;
  opacity:0;transform:translateX(-6px);transition:opacity .14s,transform .16s;
}
body.ui-kit #sidebar.pinned .rail-word{opacity:1;transform:none}


/* HOVER-TO-EXPAND IS FOR A MOUSE, AND ONLY A MOUSE.
   A touch browser fires :hover on tap and LEAVES IT THERE until you tap
   something else. So tapping a nav item used to fade every label in — inside a
   rail still 60px wide, because the old fix reset the width on small screens
   and forgot the labels. The result was "WORK", "RECOR…", "OUTRE…" sliced down
   the left edge with the nav text overlapping the icons: the exact mess in the
   owner's phone screenshots.
   Resetting width in a width media query cannot fix this — a 900px-wide tablet
   is still a touch device, and a 500px-wide desktop window is still a mouse.
   The right question is not "how wide is the screen" but "is there a pointer
   that can hover", which is what this query asks. `.pinned` stays outside it:
   that is an explicit choice, not a hover. */
@media (hover:hover) and (pointer:fine){
  body.ui-kit #sidebar:hover{width:var(--rail-w-open);box-shadow:var(--sh2)}
  body.ui-kit #sidebar:hover .rail-word{opacity:1;transform:none}
  body.ui-kit #sidebar:hover .sb-lbl{opacity:1}
  body.ui-kit #sidebar:hover .nav-txt{opacity:1;transform:none}
  body.ui-kit #sidebar:hover .user-meta{opacity:1;transform:none}
  body.ui-kit #sidebar:hover .nav-badge{
    position:static;margin-left:auto;margin-right:10px;
    min-width:auto;height:auto;padding:1px 7px;border-radius:10px;
    background:var(--accent);color:#fff;font-size:10px;font-weight:700;
    font-family:var(--mono);
  }
}

/* Nav */
body.ui-kit .sb-nav{padding:8px;flex:1;overflow-y:auto;overflow-x:hidden}
body.ui-kit .sb-nav::-webkit-scrollbar{width:0}
body.ui-kit .sb-lbl{
  font-size:10px;font-weight:700;color:var(--ink3);letter-spacing:.09em;
  text-transform:uppercase;padding:12px 10px 4px;white-space:nowrap;
  opacity:0;transition:opacity .14s;height:26px;
}
body.ui-kit #sidebar.pinned .sb-lbl{opacity:1}

body.ui-kit .nav-item{
  display:flex;align-items:center;gap:0;
  height:38px;padding:0 0 0 10px;margin-bottom:2px;
  border-radius:9px;color:var(--ink2);font-size:14px;font-weight:500;
  cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;
  transition:background .12s,color .12s;position:relative;
}
body.ui-kit .nav-item:hover{background:var(--hover);color:var(--ink)}
body.ui-kit .nav-item.active{background:var(--sel);color:var(--accent);font-weight:600}
body.ui-kit .nav-icon{
  width:24px;min-width:24px;height:18px;opacity:.6;
  display:flex;align-items:center;justify-content:flex-start;
}
body.ui-kit .nav-item.active .nav-icon{opacity:1}
body.ui-kit .nav-txt{
  margin-left:8px;opacity:0;transform:translateX(-6px);
  transition:opacity .14s,transform .16s;
}
body.ui-kit #sidebar.pinned .nav-txt{opacity:1;transform:none}

/* Collapsed, a badge has nowhere to sit — it becomes a dot on the icon.
   Expanded, it returns to a counted pill on the right. */
body.ui-kit .nav-badge{
  position:absolute;left:26px;top:9px;
  min-width:7px;height:7px;padding:0;border-radius:99px;
  background:var(--gold);color:transparent;font-size:0;overflow:hidden;
  transition:none;
}
body.ui-kit #sidebar.pinned .nav-badge{
  position:static;margin-left:auto;margin-right:10px;
  min-width:auto;height:auto;padding:1px 7px;border-radius:10px;
  background:var(--accent);color:#fff;font-size:10px;font-weight:700;
  font-family:var(--mono);
}
body.ui-kit .nav-item.active .nav-badge{background:var(--accent)}

/* Footer group: settings-ish items + the person */
body.ui-kit .sb-footer{margin-top:auto;padding:8px;border-top:1px solid var(--line);overflow:hidden}
body.ui-kit .user-row{
  display:flex;align-items:center;height:44px;padding:0 0 0 5px;
  border-radius:9px;cursor:pointer;white-space:nowrap;overflow:hidden;
}
body.ui-kit .user-row:hover{background:var(--hover)}
body.ui-kit .user-meta{
  margin-left:9px;min-width:0;opacity:0;transform:translateX(-6px);
  transition:opacity .14s,transform .16s;
}
body.ui-kit #sidebar.pinned .user-meta{opacity:1;transform:none}
body.ui-kit .u-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
body.ui-kit .u-role{font-size:11px;color:var(--ink3)}

/* ── 2. TOP BAR ──────────────────────────────────────────────────────────── */
body.ui-kit #topbar{
  height:var(--topbar-h);min-height:var(--topbar-h);
  background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 18px;gap:10px;
}
body.ui-kit .tb-title{
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.2px;
  display:flex;align-items:center;gap:8px;
}
.tb-count{
  background:var(--hover);color:var(--ink2);border:1px solid var(--line);
  font-size:11px;font-weight:700;font-family:var(--mono);
  padding:1px 7px;border-radius:6px;
}
.tb-crumb{color:var(--ink3);font-weight:500}
.tb-icons{display:flex;align-items:center;gap:2px}
.tb-ico{
  width:32px;height:32px;border-radius:8px;color:var(--ink3);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  position:relative;transition:background .12s,color .12s;
}
.tb-ico:hover{background:var(--hover);color:var(--ink)}
.tb-ico .dot{
  position:absolute;top:6px;right:7px;width:6px;height:6px;
  border-radius:99px;background:var(--red);
}
.tb-user{
  display:flex;align-items:center;gap:5px;padding:3px 6px 3px 3px;
  border-radius:99px;cursor:pointer;transition:background .12s;
}
.tb-user:hover{background:var(--hover)}

/* ── 3. PAGE FRAME ───────────────────────────────────────────────────────── */
/* A page is: [tabs] [strip] [toolbar] [content]. Each is optional. */
body.ui-kit #content{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg)}
.pg{padding:0;height:100%;display:flex;flex-direction:column;min-height:0}
.pg-body{flex:1;min-height:0;overflow:auto;padding:16px 18px 28px}

.pgtabs{
  display:flex;align-items:center;gap:2px;
  background:var(--card);border-bottom:1px solid var(--line);
  padding:0 18px;min-height:44px;overflow-x:auto;
}
.pgtabs::-webkit-scrollbar{height:0}
.pgtab{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:12px 12px 11px;font-size:14px;font-weight:500;color:var(--ink2);
  border-bottom:2px solid transparent;cursor:pointer;transition:color .12s;
}
.pgtab:hover{color:var(--ink)}
.pgtab.on{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}
.pgtab-n{
  font-size:11px;font-weight:700;font-family:var(--mono);
  color:var(--ink3);background:var(--hover);border-radius:5px;padding:0 5px;
}
.pgtab.on .pgtab-n{color:var(--accent);background:var(--sel)}
.pgtabs-right{margin-left:auto;display:flex;align-items:center;gap:10px;padding-left:16px}

/* Stat strip — one row of "big number / small label", the first cell framed
   when it is the active filter. Clicking a stat is a filter, so the whole
   cell is the hit target. */
.strip{
  display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
  background:var(--card);border-bottom:1px solid var(--line);padding:10px 12px;
}
.strip-i{
  padding:8px 20px 8px 12px;border-radius:10px;cursor:default;
  border:1px solid transparent;min-width:96px;
}
.strip-i.click{cursor:pointer}
.strip-i.click:hover{background:var(--hover)}
.strip-i.on{background:var(--sel);border-color:rgba(30,122,60,.25)}
.strip-v{font-size:20px;font-weight:700;letter-spacing:-.5px;line-height:1.15;font-family:var(--display)}
.strip-l{
  font-size:12px;color:var(--ink2);margin-top:2px;
  display:flex;align-items:center;gap:5px;white-space:nowrap;
}
.strip-l svg{width:13px;height:13px;opacity:.65}
.strip-sep{width:1px;background:var(--line);margin:8px 12px}

/* Toolbar — search, icon actions, then the primary button hard right. */
.tbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--card);border-bottom:1px solid var(--line);padding:10px 18px;
}
.tbar-search{position:relative;flex-shrink:0}
.tbar-search svg{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;color:var(--ink3);pointer-events:none;
}
.tbar-search input{
  width:230px;height:34px;padding:0 10px 0 30px;
  background:var(--card);border:1px solid var(--line2);border-radius:8px;
  font-size:13px;outline:none;transition:border-color .12s,box-shadow .12s;
}
.tbar-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,122,60,.1)}
.tbar-ico{
  width:32px;height:32px;border-radius:8px;color:var(--ink3);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .12s,color .12s;
}
.tbar-ico:hover{background:var(--hover);color:var(--ink)}
.tbar-ico.on{background:var(--sel);color:var(--accent)}
.tbar-ico[disabled],.tbar-ico.off{opacity:.4;pointer-events:none}
.tbar-sep{width:1px;height:20px;background:var(--line2);margin:0 4px}
.tbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}

/* ── 4. DATA TABLE ───────────────────────────────────────────────────────── */
.dt-wrap{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:auto;
}
table.dt{width:100%;border-collapse:collapse;font-size:13px}
/* Sentence case, not the app's older SHOUTED headers: a column label is read
   dozens of times a minute and lowercase is measurably faster to scan. */
table.dt thead th{
  position:sticky;top:0;z-index:1;
  background:#F7F9FB;border-bottom:1px solid var(--line);
  text-align:left;padding:9px 12px;white-space:nowrap;
  font-size:12px;font-weight:600;color:var(--ink2);
  text-transform:none;letter-spacing:0;
}
table.dt thead th .th-i{display:inline-flex;align-items:center;gap:5px}
table.dt tbody td{
  padding:11px 12px;border-bottom:1px solid var(--line);
  color:var(--ink);vertical-align:middle;
}
table.dt tbody tr:last-child td{border-bottom:none}
table.dt tbody tr:hover{background:#FAFBFC}
table.dt .num{text-align:right;font-family:var(--mono)}
table.dt .tight{white-space:nowrap}
.dt-empty{padding:52px 20px;text-align:center;color:var(--ink3);font-size:13px}

/* The primary cell: a bold clickable name over a quiet secondary line. */
.cell-id{min-width:0}
.cell-id b{
  font-size:14px;font-weight:600;color:var(--ink);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.cell-id b:hover{color:var(--accent)}
.cell-id small{
  display:flex;align-items:center;gap:4px;
  font-size:12px;color:var(--ink3);margin-top:1px;
}
.verified{color:var(--green);display:inline-flex}

/* ── 5. SMALL PARTS ──────────────────────────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  padding:3px 9px;border-radius:99px;font-size:12px;font-weight:500;
  background:var(--hover);color:var(--ink2);
}
.pill i{width:6px;height:6px;border-radius:99px;background:currentColor;flex-shrink:0}
.pill.ok{background:#E7F7EC;color:#166534}
.pill.warn{background:#FEF3C7;color:#92400E}
.pill.bad{background:#FEE2E2;color:#B91C1C}
.pill.info{background:#E0F2FE;color:#075985}
.pill.cool{background:#EDE9FE;color:#5B21B6}
.pill.mute{background:#F1F5F9;color:#64748B}
.pill.out{background:transparent;border:1px solid currentColor}

.ring{
  width:34px;height:34px;border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;font-family:var(--mono);
  border:1.5px solid currentColor;
}
.ring.ok{color:#16A34A}
.ring.warn{color:#D97706}
.ring.bad{color:#DC2626}
.ring.mute{color:var(--ink3)}

/* Switch — the row-level on/off from the benchmark's account table. */
.sw{
  width:32px;height:18px;border-radius:99px;background:var(--line2);
  position:relative;cursor:pointer;flex-shrink:0;
  transition:background .14s;display:inline-block;vertical-align:middle;
}
.sw::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:99px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:transform .14s;
}
.sw.on{background:var(--accent)}
.sw.on::after{transform:translateX(14px)}

.kebab{
  width:26px;height:26px;border-radius:7px;color:var(--ink3);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.kebab:hover{background:var(--hover);color:var(--ink)}

.ck{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;vertical-align:middle}

/* Notice band — the "get set up" banner at the top of a page. */
.notice{
  display:flex;align-items:center;gap:14px;
  background:#EFF6FF;border:1px solid #DBEAFE;border-radius:12px;
  padding:14px 16px;margin-bottom:14px;
}
.notice-ic{
  width:38px;height:38px;border-radius:99px;background:#DBEAFE;color:#1D4ED8;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.notice h4{font-size:14px;font-weight:600;margin-bottom:2px}
.notice p{font-size:13px;color:var(--ink2);margin:0}
.notice .btn{margin-left:auto;flex-shrink:0}

/* ── 6. DETAIL DRAWER ────────────────────────────────────────────────────── */
/* A record opens over the list instead of navigating away, so the list keeps
   its scroll position, its filters and its selection. Two panes: the record
   on the left, its activity on the right. */
.dwr-scrim{
  position:fixed;inset:0;z-index:60;background:rgba(15,23,42,.45);
  display:flex;align-items:stretch;justify-content:flex-end;
  animation:dwrFade .14s ease-out;
}
@keyframes dwrFade{from{opacity:0}to{opacity:1}}
.dwr{
  width:calc(100% - 200px);max-width:1500px;height:100%;
  display:flex;gap:14px;padding:14px 14px 14px 0;
  animation:dwrIn .18s cubic-bezier(.4,0,.2,1);
}
@keyframes dwrIn{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.dwr-nav{
  display:flex;flex-direction:column;gap:6px;padding:0 12px;justify-content:flex-start;
}
.dwr-nav div{
  width:38px;height:38px;border-radius:8px;background:#1E293B;color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.9;
}
.dwr-nav div:hover{opacity:1}
.dwr-pane{
  background:var(--card);border-radius:14px;box-shadow:var(--sh3);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.dwr-left{width:420px;flex-shrink:0}
.dwr-right{flex:1;min-width:0}
.dwr-head{padding:20px 20px 14px;border-bottom:1px solid var(--line)}
.dwr-name{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.3px}
.dwr-sub{font-size:13px;color:var(--ink2);margin-top:2px;line-height:1.45}
.dwr-acts{display:flex;gap:8px;margin-top:14px}
.dwr-act{
  width:32px;height:32px;border-radius:99px;background:var(--hover);color:var(--ink2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s;
}
.dwr-act:hover{background:var(--sel);color:var(--accent)}
.dwr-stats{display:flex;border-bottom:1px solid var(--line)}
.dwr-stat{flex:1;padding:12px 8px;text-align:center;border-right:1px solid var(--line)}
.dwr-stat:last-child{border-right:none}
.dwr-stat b{display:block;font-size:20px;font-weight:700;font-family:var(--display)}
.dwr-stat span{
  font-size:12px;color:var(--ink3);display:flex;align-items:center;
  justify-content:center;gap:4px;margin-top:2px;
}
.dwr-fields{padding:16px 20px;overflow-y:auto;flex:1;min-height:0}
.kv{margin-bottom:14px}
.kv-k{font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:3px}
.kv-v{font-size:14px;color:var(--ink);word-break:break-word}
.kv-v.empty{color:var(--ink3)}

/* Activity feed */
.feed{padding:16px 20px;overflow-y:auto;flex:1;min-height:0}
.feed-day{font-size:12px;font-weight:600;color:var(--ink2);margin:4px 0 12px}
.feed-row{display:flex;gap:11px;align-items:flex-start;padding:8px 0}
.feed-ic{
  width:26px;height:26px;border-radius:99px;background:var(--sel);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.feed-tx{flex:1;min-width:0;font-size:13px;color:var(--ink);line-height:1.5}
.feed-tm{font-size:12px;color:var(--ink3);white-space:nowrap;flex-shrink:0}

/* ── 7. RESPONSIVE ───────────────────────────────────────────────────────── */
@media(max-width:900px){
  /* hover-expand is gated on (pointer:fine) above — not on width. */
  .dwr{width:100%;padding:0}
  .dwr-nav{display:none}
  .dwr-left{width:100%}
  .dwr-right{display:none}
  .tbar-search input{width:100%}
  .tbar-search{flex:1}
}

/* SVGs in this kit are sized by their slot, never by a width attribute, so the
   same icon markup can be reused at any scale. */
body.ui-kit .nav-icon svg{width:18px;height:18px}
/* An icon dropped straight into a button — `'<button class="btn">'+UI.ic('plus')+'Add Lead'` —
   is the one slot that had no size rule. UI.ic() returns a bare <svg> with a
   viewBox and no width/height, so as a flex item with no basis it collapsed to
   0×0 on a desktop (the icon was simply INVISIBLE, which is why nobody noticed)
   and inflated to fill any spare width the moment a button was allowed to grow,
   as it is on a phone: a 75px plus sign inside a 93px-tall "Add Lead".
   Direct children only — the older ico(name,size) helper already wraps its svg
   in a span sized by the caller, and must keep winning. */
.btn>svg{width:15px;height:15px;flex-shrink:0}
.btn-sm>svg,.btn-xs>svg{width:14px;height:14px}
.tb-ico svg,.tbar-ico svg,.dwr-act svg,.kebab svg,.feed-ic svg,.notice-ic svg{width:17px;height:17px}
.notice-ic svg{width:19px;height:19px}
.dwr-nav svg{width:16px;height:16px}
.pgtab svg,.strip-l svg,.cell-id small svg,.pill svg,.dwr-stat svg{width:13px;height:13px}

/* ── 8. SEQUENCE BUILDER ─────────────────────────────────────────────────── */
/* The steps of a sequence drawn down the page as a timeline, because that is
   what a sequence IS: a thing that happens on Day 1, then Day 4, then Day 9.
   A list of rows in a 480px modal hid the one fact that matters most — WHEN
   each step actually goes out. */
.seq-modal{width:1040px;max-width:94vw}
.seq{padding:4px 0 8px}
.seq-row{display:flex;gap:0;align-items:stretch}
.seq-gut{width:104px;flex-shrink:0;position:relative;padding-top:2px}
.seq-day{
  display:inline-flex;align-items:center;height:24px;padding:0 12px;
  background:var(--hover);border:1px solid var(--line);border-radius:6px;
  font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap;
}
/* The connector: a single line down the gutter, stopping at the last step so
   the timeline does not appear to continue into nothing. */
.seq-gut::after{
  content:"";position:absolute;left:19px;top:30px;bottom:-14px;width:2px;background:var(--line);
}
.seq-row:last-of-type .seq-gut::after{display:none}
.seq-main{flex:1;min-width:0;padding-bottom:14px}
.seq-when{
  display:flex;align-items:center;gap:7px;
  font-size:13px;color:var(--ink2);margin:8px 0 8px;
}
.seq-when svg{width:14px;height:14px;color:var(--accent);flex-shrink:0}
.seq-when b{color:var(--ink);font-weight:600}
.seq-card{
  border:1px solid var(--line2);border-radius:10px;background:var(--card);
  overflow:hidden;
}
.seq-card-h{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:#FAFBFC;border-bottom:1px solid var(--line);
}
.seq-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--sel);color:var(--accent);border-radius:7px;
  padding:4px 10px;font-size:13px;font-weight:600;white-space:nowrap;
}
.seq-badge svg{width:14px;height:14px}
.seq-card-h input.seq-name{
  flex:1;min-width:0;height:30px;padding:0 10px;font-size:13px;
  background:var(--card);border:1px solid var(--line2);border-radius:7px;outline:none;
}
.seq-card-h input.seq-name:focus{border-color:var(--accent)}
.seq-tools{display:flex;gap:2px;margin-left:auto}
.seq-body{padding:12px;display:flex;flex-direction:column;gap:9px}
.seq-line{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.seq-delay{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2);
}
.seq-delay input{
  width:54px;height:30px;text-align:center;font-size:13px;
  border:1px solid var(--line2);border-radius:7px;background:var(--card);outline:none;
}
.seq-sel{
  height:30px;padding:0 8px;font-size:13px;background:var(--card);
  border:1px solid var(--line2);border-radius:7px;outline:none;cursor:pointer;
}
.seq-in{
  height:30px;padding:0 9px;font-size:13px;background:var(--card);
  border:1px solid var(--line2);border-radius:7px;outline:none;flex:1;min-width:170px;
}
.seq-ta{
  padding:8px 9px;font-size:13px;line-height:1.55;background:var(--card);
  border:1px solid var(--line2);border-radius:7px;outline:none;
  width:100%;min-height:76px;resize:vertical;font-family:inherit;
}
.seq-in:focus,.seq-ta:focus,.seq-sel:focus,.seq-delay input:focus{border-color:var(--accent)}
.seq-add{
  display:inline-flex;align-items:center;gap:7px;
  border:1px dashed var(--line2);background:transparent;color:var(--ink2);
  border-radius:9px;padding:9px 16px;font-size:13px;font-weight:500;cursor:pointer;
}
.seq-add:hover{border-color:var(--accent);color:var(--accent);background:var(--sel)}
.seq-add svg{width:15px;height:15px}
.seq-hint{
  display:flex;align-items:center;gap:9px;margin-top:14px;
  background:#FFFBEB;border:1px solid #FDE68A;border-radius:9px;
  padding:11px 13px;font-size:13px;color:#92400E;
}
.seq-hint svg{width:15px;height:15px;flex-shrink:0}
@media(max-width:760px){
  .seq-gut{width:74px}
  .seq-gut::after{left:14px}
}

/* ── 9. COMPOSE: EDITOR + LIVE PREVIEW ───────────────────────────────────── */
/* Writing an email and seeing what lands are the same task, so they sit side
   by side. The preview is not decoration: {{sender}} and {{senderemail}} are
   resolved from the mailbox that will actually send, which is the one thing
   about this app that has previously gone wrong in a way a recipient saw. */
.cmp{display:flex;gap:16px;align-items:flex-start}
.cmp-edit{flex:1;min-width:0}
.cmp-prev{
  width:430px;flex-shrink:0;position:sticky;top:0;
  background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.cmp-prev-h{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}
.cmp-prev-h svg{width:15px;height:15px;color:var(--accent)}
.cmp-prev-h b{font-size:13px;font-weight:600}
.cmp-fld{
  display:flex;align-items:center;gap:0;border-bottom:1px solid var(--line);
}
.cmp-fld > label{
  width:56px;flex-shrink:0;padding:0 12px;font-size:13px;color:var(--ink2);font-weight:500;
}
.cmp-fld select,.cmp-fld .cmp-static{
  flex:1;min-width:0;height:38px;padding:0 10px;font-size:13px;
  border:none;border-left:1px solid var(--line);background:var(--card);
  outline:none;color:var(--ink);
}
.cmp-fld select{cursor:pointer;appearance:auto}
.cmp-static{display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-mail{padding:16px 18px;max-height:56vh;overflow-y:auto}
.cmp-meta{font-size:13px;color:var(--ink2);margin-bottom:3px}
.cmp-meta b{color:var(--ink);font-weight:600}
.cmp-subject{font-size:14px;font-weight:600;margin:10px 0 14px;line-height:1.4}
.cmp-body{
  font-size:14px;line-height:1.62;color:var(--ink);white-space:pre-wrap;word-wrap:break-word;
}
.cmp-sig{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.cmp-unset{
  background:#FFFBEB;color:#92400E;border-radius:4px;padding:0 3px;
  font-family:var(--mono);font-size:12px;
}
.cmp-foot{
  padding:10px 14px;border-top:1px solid var(--line);background:#FAFBFC;
  font-size:12px;color:var(--ink3);display:flex;align-items:center;gap:7px;
}
.cmp-foot svg{width:13px;height:13px;flex-shrink:0}
.var-chip{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:12px;
  background:var(--hover);border:1px solid var(--line);border-radius:6px;
  padding:2px 7px;margin:0 5px 5px 0;cursor:pointer;color:var(--ink2);
}
.var-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--sel)}
@media(max-width:1180px){
  .cmp{flex-direction:column}
  .cmp-prev{width:100%;position:static}
}
/* The Outreach Plan (R-144): the editor and its preview are one PAIR, centred in the
   space — equal room on both sides at any width. Left-aligned they left 500px of
   blank on the right of a wide screen; stacked (narrow) the preview was wider
   than the editor above it. */
.cmp-plan{justify-content:center}
.cmp-plan .cmp-edit{flex:0 1 720px}
@media(max-width:1180px){
  .cmp-plan{align-items:center}
  .cmp-plan .cmp-edit,.cmp-plan .cmp-prev{flex:none;width:100%;max-width:720px}
}

/* ── 10. MAILBOX: TWO PANES AND A THREAD ─────────────────────────────────── */
/* The folder rail became a picker in the toolbar, so the two panes that matter
   — the conversation list and the conversation — get the whole width. */
.mb{display:flex;flex-direction:column;height:100%;min-height:0}
.mb-panes{flex:1;display:flex;min-height:0}
.mb-list{
  width:340px;min-width:300px;flex-shrink:0;
  border-right:1px solid var(--line);background:var(--card);overflow-y:auto;
}
.mb-list.wide{width:auto;flex:1}
.mb-read{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}

.mb-row{
  display:flex;gap:10px;padding:11px 14px;cursor:pointer;
  border-bottom:1px solid var(--line);border-left:2px solid transparent;
}
.mb-row:hover{background:var(--hover)}
.mb-row.on{background:var(--sel);border-left-color:var(--accent)}
.mb-row-b{flex:1;min-width:0}
.mb-row-t{display:flex;align-items:baseline;gap:8px}
.mb-who{
  flex:1;min-width:0;font-size:13px;color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mb-row.unread .mb-who{font-weight:700;color:var(--ink)}
.mb-when{font-size:11px;color:var(--ink3);flex:none}
.mb-subj{
  font-size:13px;color:var(--ink2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mb-row.unread .mb-subj{font-weight:600;color:var(--ink)}
.mb-prev{
  font-size:12px;color:var(--ink3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* The conversation: one card per message, newest work at the bottom. */
.mb-thread{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 22px}
.mb-head{
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--card);
}
.mb-title{font-size:15.5px;font-weight:600;line-height:1.35;display:flex;align-items:center;gap:9px}
.mb-acts{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.mb-msg{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  margin-bottom:12px;overflow:hidden;
}
.mb-msg.open{border-color:var(--line2);box-shadow:var(--sh)}
.mb-msg-h{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;cursor:pointer}
.mb-msg.open .mb-msg-h{cursor:default;border-bottom:1px solid var(--line)}
.mb-msg-b{flex:1;min-width:0}
.mb-from{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mb-from span.addr{font-weight:400;color:var(--ink3);font-size:13px}
.mb-to{font-size:12px;color:var(--ink3);margin-top:2px}
.mb-msg-when{font-size:12px;color:var(--ink3);white-space:nowrap;flex:none}
.mb-msg-ico{display:flex;gap:1px;flex:none;margin-left:6px}
.mb-collapsed{
  font-size:13px;color:var(--ink3);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* A sandboxed iframe cannot be measured from the parent (that would need
   allow-same-origin, which is exactly what keeps a hostile email boxed in), so
   each body gets a generous fixed height and scrolls inside itself rather than
   being auto-sized. */
.mb-body{height:420px;background:#fff}
.mb-body.short{height:clamp(340px,64vh,760px)}
/* R-108: the message in a long thread was a 260px postage stamp. In a thread it
   now takes most of the screen; "Expand" takes nearly all of it. Heights are a
   CLASS on the existing box (never part of the iframe's own HTML), so toggling
   it does not rewrite the sandboxed frame. */
.mb-body.tall{height:calc(100vh - 150px);height:calc(100dvh - 150px);min-height:420px}
/* ONE message on screen and no reply box open: the body fills the pane and is
   the ONLY thing that scrolls. Two nested scrollers meant a wheel over the
   message scrolled the text, reached its end and then jerked the whole pane —
   and each of those pane scrolls moved a sandboxed iframe, which the browser
   answers with a re-raster the reader sees as a flicker. With a thread on
   screen the pane must scroll, so `solo` simply is not applied. */
.mb-thread.solo{display:flex;flex-direction:column;padding-bottom:14px}
/* `auto`, not `hidden`: the body flexes to fit, so this never scrolls in
   practice — but on a very short window the message header must not become
   unreachable. */
/* #mb-open is the paint region wrapping the open message, so IT is the flex
   child of the pane — the card inside it has to be stretched in turn. */
.mb-thread.solo > #mb-open{flex:1;min-height:0;display:flex;flex-direction:column}
.mb-thread.solo > #mb-open > .mb-msg.open{
  flex:1;min-height:0;display:flex;flex-direction:column;margin-bottom:0;
}
.mb-thread.solo > #mb-open > .mb-msg.open > .mb-body{flex:1;height:auto;min-height:120px}
.mb-body iframe{width:100%;height:100%;border:0;background:#fff;display:block}
.mb-bar{
  padding:8px 15px;background:var(--amber-l);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;font-size:12px;color:var(--amber);
}
.mb-att{padding:10px 15px;border-bottom:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.mb-empty{
  flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:10px;color:var(--ink3);font-size:13px;padding:40px;text-align:center;
}
.mb-empty svg{width:36px;height:36px;opacity:.5}
@media(max-width:960px){
  .mb-list{width:100%;min-width:0}
  .mb-read{display:none}
  .mb-panes.reading .mb-list{display:none}
  .mb-panes.reading .mb-read{display:flex}
}

/* ══════════════════════════════════════════════════════════════════════════
   AGE — the horizon bar, pager, count links and picker search (Session 23).
   Classes, never inline styles: an inline width cannot be re-laid-out by any
   stylesheet, which is how six admin buttons once ran 460px off a phone.
   ══════════════════════════════════════════════════════════════════════════ */
.hz-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:8px 12px;margin-bottom:12px}
.hz-txt{font-size:13px;color:var(--text2)}
.hz-txt b{color:var(--text)}
.hz-btn{margin-left:auto;background:transparent;border:1px solid var(--border2);
  color:var(--text2);border-radius:8px;padding:6px 12px;font-size:12px;
  font-weight:600;cursor:pointer;min-height:34px}
.hz-btn:hover{border-color:var(--accent);color:var(--accent)}

.hz-count{background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:7px 12px;font-size:13px;color:var(--text2);cursor:pointer;min-height:34px}
.hz-count b{color:var(--text);font-weight:700}
.hz-count:hover{border-color:var(--accent);color:var(--accent)}

.hz-pager{display:flex;align-items:center;justify-content:center;gap:14px;
  padding:12px;flex-wrap:wrap}
.hz-pg{background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:7px 14px;font-size:13px;font-weight:600;color:var(--text2);
  cursor:pointer;min-height:36px}
.hz-pg:hover:not(.is-off){border-color:var(--accent);color:var(--accent)}
.hz-pg.is-off{opacity:.4;cursor:not-allowed}
.hz-pgn{font-size:13px;color:var(--text3)}

/* 16px so iOS does not zoom the page on focus and never zoom back. */
.hz-search{width:100%;max-width:340px;font-size:16px;padding:8px 12px;
  border:1px solid var(--border);border-radius:8px;background:var(--card);
  color:var(--text);min-height:38px}
.hz-search:focus{outline:none;border-color:var(--accent)}

@media (max-width:860px){
  .hz-bar{padding:10px}
  .hz-btn{margin-left:0;width:100%}
  .hz-search{max-width:none}
}

/* The convert picker (25-workflow-bd.js). Classes rather than the inline
   styles this markup used to carry, so it can actually reflow on a phone. */
.lp-wrap{background:var(--accent-l);border:1px solid rgba(30,122,60,.22);
  border-radius:10px;padding:10px 14px;margin:0 0 12px 0}
.lp-head{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:8px}
.lp-chips{display:flex;flex-wrap:wrap;gap:8px}
.lp-chip{display:flex;align-items:center;gap:7px;background:var(--card);
  border:1px solid var(--border);border-radius:8px;padding:6px 10px;
  font-size:12px;cursor:pointer;min-height:36px}
.lp-chip:hover{border-color:var(--accent)}
.lp-pos{font-weight:600}
.lp-co{color:var(--text3)}
.lp-search{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.lp-hint{font-size:12px;color:var(--text3)}
.lp-stuck{margin-top:9px;padding-top:9px;border-top:1px dashed var(--border2);
  display:flex;flex-direction:column;gap:6px}
@media (max-width:860px){
  .lp-chip{min-height:40px}
  .lp-search{flex-direction:column;align-items:stretch}
}
/* The Jobs list header: the sentence on the left, the tools on the right. On a
   phone the tools wrap and the search takes its own full-width line. */
.jobs-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.jobs-head-t{font-size:13px;color:var(--text3)}
.jobs-tools{display:flex;gap:8px;align-items:center;position:relative}
@media (max-width:860px){
  .jobs-head{flex-direction:column;align-items:stretch;gap:10px}
  .jobs-tools{flex-wrap:wrap}
  .jobs-tools .hz-search{order:3;flex:1 1 100%;max-width:none}
  .jobs-tools .btn-primary{margin-left:auto}
}
.mj-top{display:flex;justify-content:flex-end;margin-bottom:12px}
@media (max-width:860px){ .mj-top{justify-content:stretch} }

/* "Needs you today" row actions + the line admitting what is hidden. */
.na-acts{display:flex;align-items:center;gap:6px;flex:none}
.na-act{padding:5px 10px;border:1px solid var(--border2);background:var(--card);
  border-radius:7px;font-size:12px;cursor:pointer;color:var(--text2);
  min-height:32px;white-space:nowrap}
.na-act:hover{border-color:var(--accent);color:var(--accent)}
.na-act-quiet{color:var(--text3);font-size:12px;padding:5px 8px}
.na-act-do{border-color:var(--accent);color:var(--accent);font-weight:600}
select.na-act-do{padding:4px 6px;max-width:132px}
.na-hidden{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 14px;border-top:1px solid var(--border);background:var(--bg);
  font-size:12px;color:var(--text3)}
.na-hidden button{margin-left:auto}
@media (max-width:860px){
  /* Touch targets get BIGGER, and the actions drop below the text rather than
     squeezing it — never shrink to fit on a phone. */
  .na-acts{flex-wrap:wrap;justify-content:flex-end}
  .na-act{min-height:40px;padding:8px 12px}
  .na-hidden button{margin-left:0;width:100%}
}

/* ── All email (50-all-mail.js) ───────────────────────────────────────────── */
.am-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.am-srcs{display:flex;gap:6px;flex-wrap:wrap}
.am-src{background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:7px 12px;font-size:13px;color:var(--text2);cursor:pointer;min-height:36px}
.am-src b{color:var(--text)}
.am-src:hover{border-color:var(--accent)}
.am-src.is-on{border-color:var(--accent);background:var(--accent-l);color:var(--accent)}
.am-src.is-on b{color:var(--accent)}

.am-list{padding:0;overflow:hidden}
.am-row{border-top:1px solid var(--border)}
.am-row:first-child{border-top:0}
.am-head{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer}
.am-head:hover{background:var(--bg)}
.am-tag{flex:none;font-size:11px;font-weight:700;padding:3px 8px;border-radius:7px;white-space:nowrap}
.am-main{flex:1;min-width:0}
.am-subj{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-to{font-size:12px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-dim{color:var(--text3)}
.am-stat{flex:none;font-size:11px;font-weight:600;color:var(--text3);white-space:nowrap}
.am-pending{color:var(--amber)}
.am-failed{color:var(--red)}
.am-opened{color:var(--accent)}
.am-replied{color:var(--green)}
.am-when{flex:none;font-size:12px;color:var(--text3);white-space:nowrap;min-width:64px;text-align:right}
.am-chev{flex:none;color:var(--text3);font-size:16px}
.am-body{padding:0 14px 14px 14px;background:var(--bg)}
.am-text{font-size:13px;line-height:1.65;white-space:pre-wrap;background:var(--card);
  border:1px solid var(--border);border-radius:8px;padding:12px;max-height:420px;overflow:auto}
.am-meta{font-size:12px;color:var(--text3);margin-top:8px}
.am-empty{padding:40px;text-align:center;color:var(--text3)}
.am-warn{background:rgba(210,140,0,.09);border:1px solid rgba(210,140,0,.32);
  border-radius:10px;padding:10px 12px;font-size:13px;color:var(--text2);margin-bottom:12px}

@media (max-width:860px){
  .am-top{flex-direction:column;align-items:stretch}
  .am-head{flex-wrap:wrap;gap:8px;padding:12px}
  .am-main{flex-basis:100%;order:2}
  .am-when{margin-left:auto}
  .am-text{max-height:300px}
}

/* ── THE REWIND BUTTON + HISTORY PANEL (Session 28) ────────────────────────
   Every colour here comes from a token and every size from a class, because
   an inline value cannot be re-themed, re-scaled or re-laid-out — the shared
   root cause of the last two rounds of phone and dark-mode faults.
   The panel FLOATS over content, so it paints on --card-solid. --card is
   glass (.62 alpha in light, .055 in dark) and would show the page through it.
   ------------------------------------------------------------------------ */

/* The button is deliberately quiet: a history is available on every record,
   so if it shouted on every row the rows would be nothing but buttons. */
.rw-btn{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:1px solid var(--ctl-brd,var(--line,#D7DEE6));
  color:var(--ink3,var(--text3,#6A7784)); cursor:pointer;
  padding:4px 7px; border-radius:6px; font:inherit; font-size:12px;
  line-height:1; vertical-align:middle;
  transition:color .12s ease, border-color .12s ease, background-color .12s ease;
}
.rw-btn svg{width:13px; height:13px; display:block}
.rw-btn:hover{ color:var(--accent,#1E5FBF); border-color:var(--accent,#1E5FBF) }
.rw-btn:focus-visible{ outline:2px solid var(--accent,#1E5FBF); outline-offset:1px }
.rw-bare{ border-color:transparent; padding:4px }

/* The panel sits to the right on a desktop and becomes a bottom sheet on a
   phone — the same shape every other dialog takes below 860px. */
.rw-overlay{ display:flex; align-items:stretch; justify-content:flex-end }
.rw-panel{
  background:var(--card-solid,var(--card,#fff));
  border-left:1px solid var(--line,#D7DEE6);
  width:min(430px,100%); display:flex; flex-direction:column;
  max-height:100%; box-shadow:-18px 0 44px rgba(0,0,0,.18);
}
.rw-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px 10px; flex:none;
}
.rw-title{ display:flex; align-items:center; gap:8px; min-width:0; font-size:16px; font-weight:600 }
.rw-title svg{ width:16px; height:16px; flex:none; color:var(--accent,#1E5FBF) }
.rw-title em{
  font-style:normal; font-weight:400; color:var(--ink3,var(--text3,#6A7784));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.rw-x{ background:none; border:0; cursor:pointer; color:var(--ink3,var(--text3,#6A7784)); padding:5px; line-height:0 }
.rw-x svg{ width:16px; height:16px }
.rw-x:hover{ color:var(--ink,var(--text,#0F1720)) }
.rw-sub{
  padding:0 18px 12px; font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink3,var(--text3,#6A7784)); flex:none;
}
.rw-body{ overflow-y:auto; padding:0 18px 24px; flex:1 1 auto }
.rw-msg{ font-size:14px; color:var(--ink3,var(--text3,#6A7784)); line-height:1.6; padding:10px 0 }
.rw-err{ color:var(--red,#A2492A) }

/* One rail down the left with a dot per entry: the shape reads as time
   passing, which a plain list does not. */
.rw-list{ list-style:none; margin:0; padding:0 }
.rw-row{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 13px; position:relative; padding:0 0 16px }
.rw-row:before{
  content:""; position:absolute; left:4px; top:14px; bottom:0; width:1px;
  background:var(--line,#D7DEE6);
}
.rw-row:last-child:before{ display:none }
.rw-dot{
  width:9px; height:9px; border-radius:50%; margin-top:5px;
  background:var(--line,#D7DEE6); flex:none; position:relative; z-index:1;
}
/* Colour is scarce (D-0019): only a STAGE change earns the accent, because
   that is the change the owner asked to see. Everything else stays neutral. */
.rw-stage .rw-dot{ background:var(--accent,#1E5FBF) }
.rw-main{ min-width:0 }
.rw-what{ font-size:14px; line-height:1.5; color:var(--ink2,var(--text2,#38454F)) }
.rw-what b{ color:var(--ink,var(--text,#0F1720)); font-weight:600 }
.rw-to{ color:var(--accent,#1E5FBF) !important }
.rw-ar{ color:var(--ink3,var(--text3,#6A7784)); padding:0 2px }
.rw-was{ color:var(--ink3,var(--text3,#6A7784)) }
.rw-meta{
  margin-top:3px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 9px;
  font-size:12px; color:var(--ink3,var(--text3,#6A7784));
  font-variant-numeric:tabular-nums;
}
.rw-when{ color:var(--ink2,var(--text2,#38454F)) }
.rw-rel:before,.rw-who:before,.rw-held:before{ content:"·"; padding-right:9px; opacity:.55 }
.rw-held{ font-style:italic }
.rw-note{ margin-top:4px; font-size:13px; color:var(--ink3,var(--text3,#6A7784)); line-height:1.5 }

@media (max-width:860px){
  .rw-overlay{ align-items:flex-end; justify-content:center }
  .rw-panel{
    width:100%; max-height:82vh; border-left:0;
    border-top:1px solid var(--line,#D7DEE6);
    border-radius:14px 14px 0 0; box-shadow:0 -18px 44px rgba(0,0,0,.22);
  }
  /* The 16px floor: the phone scale comes up to meet its own inputs. */
  .rw-what{ font-size:16px }
  .rw-meta,.rw-sub,.rw-btn{ font-size:13px }
  .rw-note{ font-size:14px }
}

/* ── Several emails / phone numbers per person (R-114, D-0070; 26a-contact-points.js) ──
   The extras sit UNDER the main input as quiet rows: the main stays the star, the
   extras are a short list with two small actions each. Classes, not inline styles,
   so the phone scale and every palette reach them. No glass, no transitions. */
.cp-extras{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.cp-row{display:flex;align-items:center;gap:6px;min-width:0}
.cp-row .sel{flex:1;min-width:0}
.cp-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.cp-val a{color:var(--accent);text-decoration:none}
.cp-link,.cp-add{background:none;border:0;padding:3px 4px;font:inherit;font-size:12px;font-weight:600;color:var(--accent);cursor:pointer;white-space:nowrap}
.cp-add{align-self:flex-start;font-weight:500}
.cp-x{background:none;border:0;padding:3px 6px;font:inherit;font-size:13px;line-height:1;color:var(--text3);cursor:pointer}
@media (hover:hover) and (pointer:fine){
  .cp-link:hover,.cp-add:hover{text-decoration:underline}
  .cp-x:hover{color:var(--red)}
}
.cp-found{border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;background:var(--bg);margin:0 0 14px}
.cp-found-h{font-size:11px;font-weight:700;color:var(--text3);margin-bottom:6px;letter-spacing:.2px}
.cp-found label{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0;min-width:0}
.cp-found label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cp-found-n{font-size:11px;color:var(--text3);margin-top:6px}
/* inside a lead's contact row the control is quieter still: it is one line of a list, not a form */
.lx-cp{display:flex;flex-wrap:wrap;column-gap:14px;margin-top:2px}
.lx-cp .cp-extras{margin-top:2px;gap:2px}
.lx-cp .cp-val{font-size:12px}
.lx-cp .cp-add{padding:2px 0;font-size:12px}
.lx-tel{white-space:nowrap}
@media (max-width:860px){
  .cp-link,.cp-add,.cp-x{min-height:36px;display:inline-flex;align-items:center}
  .cp-val{font-size:16px}
}

/* The job page's header (R-120): title on the left, Candidates / Board / Edit job on the right. The buttons wrap
   under the title when there is no room — they used to be one unbreakable row that ran past a phone's edge and
   left "Edit job" cut off and unreachable. The fact grid below it is three across until the phone breakpoint. */
.jo-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px 14px;flex-wrap:wrap}
.jo-head-main{min-width:0;flex:1 1 240px;overflow-wrap:anywhere}
.jo-head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.jo-facts{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* R-013 UTILITIES BEGIN — generated by scripts/inline-to-classes.mjs; do not edit by hand */
/* Type and colour utilities (R-013). Each is EXACTLY a value that used to be written inline, so nothing changed on
   screen. One home, so a phone scale or a palette can reach them. Plain single-class rules on purpose: unlike an
   inline value they can be overridden by a theme or phone rule, which is the point. */
.fs-9{font-size:9px}
.fs-9_5{font-size:9.5px}
.fs-10{font-size:10px}
.fs-10_5{font-size:10.5px}
.fs-11{font-size:11px}
.fs-11_5{font-size:11.5px}
.fs-12{font-size:12px}
.fs-12_5{font-size:12.5px}
.fs-13{font-size:13px}
.fs-13_5{font-size:13.5px}
.fs-14{font-size:14px}
.fs-15{font-size:15px}
.fs-16{font-size:16px}
.fs-17{font-size:17px}
.fs-18{font-size:18px}
.fs-19{font-size:19px}
.fs-20{font-size:20px}
.fs-22{font-size:22px}
.fs-24{font-size:24px}
.fs-28{font-size:28px}
.fs-32{font-size:32px}
.fs-36{font-size:36px}
.c-accent{color:var(--accent)}
.c-amber{color:var(--amber)}
.c-border{color:var(--border)}
.c-green{color:var(--green)}
.c-ink2{color:var(--ink2)}
.c-ink3{color:var(--ink3)}
.c-purple{color:var(--purple)}
.c-red{color:var(--red)}
.c-teal{color:var(--teal)}
.c-text{color:var(--text)}
.c-text2{color:var(--text2)}
.c-text3{color:var(--text3)}
/* R-013 UTILITIES END */

/* THE REPLY / FORWARD WINDOW (47-page-mailbox.js paintComposer) — a dock window, like "New message" */
.mb-win-hd{padding:16px 20px;border-bottom:1px solid var(--border)}
.mb-win-bd{padding:14px 20px;max-height:62vh;overflow-y:auto}
.mb-win-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mb-win-row>label{width:52px;flex:none}
.mb-win-grow{flex:1;min-width:0}
.mb-win-text{width:100%;min-height:200px;resize:vertical;line-height:1.55}
.mb-win-ft{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mb-win-btns{display:flex;gap:8px}

/* THE SIGNATURE EDITOR (07-page-email.js, 12-manager-users.js) — the signature as it will look, not its code */
.sig-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;border:1px solid var(--border2);border-bottom:0;background:var(--bg)}
.sig-bar button{font:inherit;font-size:13px;padding:4px 10px;border:1px solid var(--border2);background:var(--card);color:var(--text);cursor:pointer}
.sig-bar-sep{width:1px;align-self:stretch;background:var(--border2);margin:0 2px}
.sig-editor{min-height:120px;padding:14px 16px;border:1px solid var(--border2);background:#fff;color:#222;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.5;outline:none}
.sig-editor:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg,rgba(122,77,224,.18))}
.sig-ph{display:inline-block;padding:0 4px;background:#EFE7FF;border-bottom:2px solid #7A4DE0;color:#1A1033;cursor:default;user-select:all}

/* THE CITY TIME ZONE PICKER (33-stage-modal.js) — type a city, click the zone */
.tzp{position:relative}
.tzp .sel{width:100%}
.tzp-note{margin-top:4px}
.tzp-list{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:2px;max-height:260px;overflow-y:auto;background:var(--card-solid);border:1px solid var(--border2);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.tzp-list[hidden]{display:none}
.tzp-opt{display:flex;flex-direction:column;gap:1px;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border)}
.tzp-opt span{font-size:12px;color:var(--text3)}
.tzp-opt.on{background:var(--accent-l,rgba(122,77,224,.12))}
@media (hover:hover) and (pointer:fine){ .tzp-opt:hover{background:var(--accent-l,rgba(122,77,224,.12))} }
.tzp-none{padding:10px 12px;font-size:12px;color:var(--text3)}