/* ─────────────────────────────────────────────
   Street Slay — design tokens + wizard chrome
   (rebranded 2026-07-18 from Cadence Tracker; originally adapted from the
   SalesHQ Light cadence-wizard design system's paper/ink/red theme).
   ───────────────────────────────────────────── */

:root {
  /* Street Slay rebrand (2026-07-18) — "Court · Light" palette, from the
     design handoff. Variable NAMES are kept as-is (--red, --sage, --gold,
     etc.) even though a couple no longer literally describe their color —
     hundreds of rules across this file reference them by name, and a mass
     rename is a much bigger, riskier change than repointing the values.
     What each token now means: --red → orange (primary CTA/action),
     --sage → teal (primary accent, near-proximity, confirm), --sky →
     violet (email channel accent), --gold/--amber → amber (unchanged
     role, closer literal match already). */
  /* ── DARK THEME (2026-07-22, from "Neyla Platform.html" handoff) ──
     Layout unchanged; only the palette values are repointed to a dark scheme.
     Token NAMES kept as-is (hundreds of rules reference them). Surfaces
     invert elevation: base (--paper-2) is darkest, cards (--paper) lift
     above it, chips/hover (--paper-3) sit lighter still. Accents brightened
     (teal #17B394 / orange #F0663B) so they read on dark. */
  --paper: #1B2420;
  --paper-2: #12181A;
  --paper-3: #27332D;
  --ink: #F1EFE7;
  --ink-2: #E3E1D7;
  --ink-3: #C9D0CB;
  --muted: #9BA6A0;
  --muted-2: #6F7A74;
  --hair: rgba(255,255,255,.10);
  --hair-2: rgba(255,255,255,.17);

  --red: #F0663B;
  --red-deep: #F5835F;
  --red-soft: rgba(240,102,59,.18);
  --sage: #17B394;
  --sage-soft: rgba(23,179,148,.16);
  --amber: #D9A441;
  --amber-soft: rgba(217,164,65,.16);
  --amber-border: rgba(217,164,65,.45);
  --sky: #9E93EC;
  --sky-soft: rgba(158,147,236,.18);
  --violet: #A98BF2;
  --teal: #17B394;
  --rose: #E5749E;
  --gold: #D9A441;
  --gold-soft: rgba(217,164,65,.16);
  --gold-ink: #E6C57A;

  /* Weekly-snapshot channel palette — one hue per outreach channel so the
     day-load chart reads at a glance; reuses the hues above where one
     exists, adds soft tints only where missing. */
  --wkch-email: var(--sky); --wkch-email-soft: rgba(158,147,236,.16);
  --wkch-call: var(--sage); --wkch-call-soft: var(--sage-soft);
  --wkch-linkedin: var(--violet); --wkch-linkedin-soft: rgba(169,139,242,.16);
  --wkch-drop: var(--amber); --wkch-drop-soft: var(--amber-soft);
  --wkch-mail: var(--teal); --wkch-mail-soft: rgba(23,179,148,.14);
  --wkch-other: var(--muted); --wkch-other-soft: var(--paper-3);
  --wkch-event: var(--rose); --wkch-event-soft: rgba(229,116,158,.16);

  --f-ui: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  /* Despite the name (kept for the same reason as above), this is now the
     DISPLAY font — Bricolage Grotesque, a sans-serif, per the brand system.
     Every .disp/.cw-head-title/etc rule that reads var(--f-serif) picks
     this up automatically. */
  --f-serif: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; min-height: 100%;
  /* Dark base + subtle teal (top-right) / orange (bottom-left) corner glows,
     from the Neyla Platform handoff. Fixed so it pins to the viewport. */
  background:
    radial-gradient(115% 90% at 88% -6%, #22422f 0%, rgba(34,66,47,0) 52%),
    radial-gradient(92% 112% at -6% 106%, #35201a 0%, rgba(53,32,26,0) 48%),
    #12181A;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--f-ui);
  overflow-x: hidden;
}

/* ─── Page shell ─── */
.bp-main { max-width: 1120px; margin: 0 auto; padding: 32px 24px 80px; }

.bp-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding-bottom: 20px; margin-bottom: 22px;
  border-bottom: 1px solid var(--hair); gap: 16px; flex-wrap: wrap;
}
.bp-page-title {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 28px; letter-spacing: -0.02em; color: var(--ink); margin: 0;
}
.bp-page-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.bp-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Street Slay logo → account menu (2026-07-18): click the wordmark for a
   dropdown with Log out, plus (admins only) a jump straight into Riley's
   field-tool view. Replaces the standalone "Log out" toolbar chip. */
.ss-logo-wrap { position: relative; display: inline-block; }
.ss-logo-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border-radius: 9px; padding: 3px 8px; margin: -3px -8px; user-select: none; }
.ss-logo-btn:hover { background: var(--paper-3); }
.ss-logo-cae { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; margin-top: 4px; }
.ss-logo-btn[aria-expanded="true"] .ss-logo-cae { transform: rotate(180deg); }
.ss-logo-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 218px; background: var(--paper); border: 1px solid var(--hair-2); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.15); padding: 6px; }
.ss-logo-menu[hidden] { display: none; }
.ss-logo-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; font-family: var(--f-ui); font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; text-align: left; }
.ss-logo-item:hover { background: var(--paper-3); }
.ss-logo-item svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

@media (max-width: 640px) {
  .bp-main { padding: 20px 14px 60px; }
  .bp-page-title { font-size: 22px; }
  .bp-page-head { align-items: flex-start; }
  .bp-page-actions { width: 100%; }
  .bp-page-actions .bp-btn { flex: 1 1 auto; }
}

/* ─── Toolbar (command bar) — design handoff 2026-07-12. Colors reuse this
   app's own ink/paper/red tokens rather than the handoff's literal navy/
   oklch hex, to stay visually consistent with the rest of the app. ─── */
.ct-tb-rule { height: 1px; background: var(--hair); margin: 22px 0 16px; border: 0; }
.ct-tb-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ct-tb-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px;
  border-radius: 10px; background: var(--paper); border: 1px solid var(--hair-2);
  font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: background .13s; white-space: nowrap;
}
.ct-tb-chip:hover { background: var(--paper-2); }
.ct-tb-chip.ghost { background: none; border-color: transparent; color: var(--muted); font-weight: 500; }
.ct-tb-chip.ghost:hover { background: var(--paper-2); color: var(--ink); }
.ct-tb-chip svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; color: var(--muted); flex-shrink: 0; }
.ct-tb-cae { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; color: var(--muted-2); margin-left: 1px; flex-shrink: 0; }
.ct-tb-signed { font-size: 13px; color: var(--muted-2); margin-left: 2px; }
.ct-tb-push { margin-left: auto; }

.ct-tb-bar {
  display: flex; align-items: center; gap: 2px; background: var(--paper);
  border: 1px solid var(--hair-2); border-radius: 15px; padding: 6px; margin-bottom: 22px;
  box-shadow: 0 1px 2px rgba(20,30,50,.04); flex-wrap: wrap;
}
.ct-tb-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 11px;
  border-radius: 11px; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; border: none; background: none; white-space: nowrap;
  transition: background .13s, color .13s;
}
.ct-tb-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; color: var(--muted); flex-shrink: 0; }
.ct-tb-btn:hover { background: var(--paper-2); color: var(--ink); }
.ct-tb-btn:hover svg { color: var(--ink); }
.ct-tb-divider { width: 1px; height: 24px; background: var(--hair-2); margin: 0 4px; flex-shrink: 0; }
.ct-tb-spring { flex: 1; min-width: 8px; }
.ct-tb-btn.primary { background: var(--sage); color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(0,0,0,.28); }
.ct-tb-btn.primary:hover { background: #149A80; }
.ct-tb-btn.primary svg { color: #fff; }
.ct-tb-btn.brand { background: var(--red); color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(200,30,30,.28); }
.ct-tb-btn.brand:hover { background: var(--red-deep); }
.ct-tb-btn.brand svg { color: #fff; }

@media (max-width: 640px) {
  .ct-tb-meta { gap: 8px; }
  .ct-tb-bar { padding: 5px; gap: 3px; }
  .ct-tb-btn { padding: 0 11px; font-size: 13.5px; }
}

/* ─── Buttons ─── */
.bp-btn {
  height: 34px; padding: 0 14px; border-radius: 6px;
  border: 1px solid var(--hair-2); background: var(--paper);
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.bp-btn:hover { background: var(--paper-2); }
.bp-btn.bp-btn-dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bp-btn.bp-btn-dark:hover { background: var(--ink-2); }
.bp-btn.bp-btn-red { background: var(--red); color: #fff; border-color: var(--red-deep); }
.bp-btn.bp-btn-red:hover { background: var(--red-deep); }
.bp-btn.bp-btn-ghost { border-color: transparent; background: transparent; }
.bp-btn.bp-btn-ghost:hover { background: var(--paper-3); }
.bp-btn.bp-btn-sm { height: 26px; padding: 0 10px; font-size: 12px; }
.bp-btn:disabled { opacity: .45; cursor: not-allowed; }
.bp-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }

/* ─── KPI strip ─── */
.bp-kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--hair); border-radius: 8px; overflow: hidden;
  background: var(--paper); margin-bottom: 24px;
}
.bp-kpi { padding: 15px 18px; border-right: 1px solid var(--hair); }
.bp-kpi:last-child { border-right: none; }
.bp-kpi-label {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-2); font-weight: 500;
}
.bp-kpi-value {
  font-family: var(--f-mono); font-size: 24px; font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1.3; margin-top: 4px;
}

/* ─── Cards ─── */
.bp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .bp-grid { grid-template-columns: minmax(0, 1fr); } }

.bp-card { background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.bp-card-hd {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  border-bottom: 1px solid var(--hair);
}
.bp-card-title { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.bp-card-sub { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.bp-card-body { padding: 6px 8px; }
.bp-card-empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* ─── Task list ─── */
.ct-task {
  display: flex; align-items: flex-start; gap: 11px; padding: 11px 10px;
  border-radius: 6px;
}
.ct-task:hover { background: var(--paper-2); }
.ct-task-check {
  width: 19px; height: 19px; border-radius: 5px; border: 1.5px solid var(--hair-2);
  background: var(--paper); flex-shrink: 0; margin-top: 1px; cursor: pointer;
  display: grid; place-items: center; transition: background .12s, border-color .12s;
}
.ct-task-check.done { background: var(--sage); border-color: var(--sage); }
.ct-task-check svg { width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 2.6; opacity: 0; }
.ct-task-check.done svg { opacity: 1; }
.ct-task-main { flex: 1; min-width: 0; }
.ct-task-text { font-size: 13.5px; color: var(--ink); line-height: 1.4; }
.ct-task.done .ct-task-text { color: var(--muted); text-decoration: line-through; }
.ct-task-meta { display: flex; gap: 6px; margin-top: 4px; }
.ct-task-del, .ct-icon-btn {
  width: 24px; height: 24px; border-radius: 5px; border: none; background: transparent;
  color: var(--muted-2); cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
}
.ct-task-del:hover, .ct-icon-btn:hover { background: var(--red-soft); color: var(--red-deep); }
.ct-task-del svg, .ct-icon-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ─── Pills / badges ─── */
.bp-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-3); border: 1px solid var(--hair);
  white-space: nowrap;
}
.bp-pill.red { background: var(--red-soft); color: var(--red-deep); border-color: transparent; }
.bp-pill.sage { background: var(--sage-soft); color: var(--sage); border-color: transparent; }
.bp-pill.amber { background: var(--amber-soft); color: var(--amber); border-color: transparent; }

.cw-renewal-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 8px; border-radius: 999px;
  border: 1px solid var(--amber-border); background: var(--amber-soft); color: #8A6A16;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
}
.cw-renewal-badge.past { border-color: var(--hair-2); background: var(--paper-3); color: var(--muted); }
.cw-renewal-badge svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Client-background card at the top of Timeline (Step 2) — company/contact
   plus whatever renewal/intel and notes are on file, so working through the
   sequence doesn't require flipping back to Step 1 to recall context. */
.cw-context-card { background: var(--paper-2); border: 1px solid var(--hair); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.cw-context-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cw-context-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.cw-context-role { font-weight: 500; color: var(--muted); }
.cw-context-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.cw-context-chip { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; background: var(--paper-3); border: 1px solid var(--hair); font-size: 11px; font-weight: 600; color: var(--muted); }
.cw-context-notes { margin-top: 8px; font-size: 12.5px; color: var(--ink); line-height: 1.5; }
.cw-context-notes.empty { color: var(--muted-2); font-style: italic; }

/* Manual "high profile account" star — prefixed onto the company name
   wherever it appears (Last touched, All accounts, Due Today, Simple Mode,
   Nearby quickview). Kept to a single shared class so it reads consistently
   at every size rather than re-tuning it per view. */
.ct-hp-star { color: var(--amber); margin-right: 4px; }

/* ─── Prospect / cadence cards (landing page) ─── */
.ct-prospect { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 6px; cursor: pointer; }
.ct-prospect:hover { background: var(--paper-2); }
.ct-prospect + .ct-prospect { border-top: 1px solid var(--hair); }
.ct-prospect-av {
  width: 36px; height: 36px; border-radius: 50%; background: var(--paper-3); color: var(--ink);
  display: grid; place-items: center; font-size: 13px; font-weight: 600; letter-spacing: -0.02em; flex-shrink: 0;
}
.ct-prospect-main { flex: 1; min-width: 0; }
.ct-prospect-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ct-prospect-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ct-ws-badge {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .01em; color: var(--muted); background: var(--paper-2); border: 1px solid var(--hair);
  border-radius: 999px; padding: 2px 8px 2px 6px; vertical-align: middle; margin-left: 2px;
}
.ct-prospect-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ─── Activity feed ─── */
.ct-activity { padding: 11px 12px; border-radius: 6px; }
.ct-activity:hover { background: var(--paper-2); }
.ct-activity + .ct-activity { border-top: 1px solid var(--hair); }
.ct-activity-top { display: flex; align-items: center; gap: 8px; }
.ct-activity-who { font-size: 13px; font-weight: 600; color: var(--ink); }
.ct-activity-ts { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.ct-activity-step { font-size: 12px; color: var(--muted); margin-top: 3px; }
.ct-activity-notes { font-size: 12px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }

/* ─── Access gate ─── */
.ct-gate {
  position: fixed; inset: 0; z-index: 200;
  background: var(--paper-2); display: grid; place-items: center; padding: 20px;
}
.ct-gate-card {
  width: 340px; max-width: 100%; text-align: center;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 12px;
  padding: 28px 26px; box-shadow: 0 20px 60px rgba(8,12,22,0.12);
}
.ct-gate-title { font-family: var(--f-serif); font-weight: 600; font-size: 20px; color: var(--ink); margin: 0 0 6px; }
/* Street Slay wordmark lockup — STREET in ink, SLAY in the orange action
   color, tight tracking per the brand handoff. Only used at the login
   gate; every other "Street Slay" string in the app is plain text. */
.ss-wm { font-weight: 800; letter-spacing: -.02em; }
.ss-slay { color: var(--teal); } /* Neyla brand: ".ai" in teal (Signal mark, 2026-07-22) */
.ss-head-mark { flex: 0 0 auto; display: block; }
/* Neyla "Signal" mark in the mobile-shell More header */
#msh .msh-head-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 2px; }
#msh .msh-head-brand svg { width: 30px; height: 30px; flex: 0 0 auto; }
#msh .msh-head-brand .wm { font-family: "Bricolage Grotesque", var(--f-serif, sans-serif); font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--ink); }
#msh .msh-head-brand .wm .ai { color: var(--teal); }
.ct-gate-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }
.ct-gate-error { font-size: 12px; color: var(--red-deep); margin-top: 10px; min-height: 14px; }
.ct-gate-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 7px; background: var(--paper-2); border: 1px solid var(--hair); margin-bottom: 16px; }
.ct-gate-tab {
  flex: 1; height: 30px; border: none; border-radius: 5px; background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.ct-gate-tab.sel { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(8,12,22,0.1); }
.ct-whoami { font-size: 12px; color: var(--muted); margin-right: 4px; align-self: center; white-space: nowrap; }

/* ─── Workspace switcher ─── */
.ws-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 6px; cursor: pointer;
}
.ws-row:hover { background: var(--paper-2); }
.ws-row + .ws-row { border-top: 1px solid var(--hair); }
.ws-row-av {
  width: 34px; height: 34px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--hair);
  display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ink-2); flex-shrink: 0;
}
.ws-row.current .ws-row-av { background: var(--sage); color: #fff; border-color: var(--sage); }
.ws-row-main { flex: 1; min-width: 0; }
.ws-row-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ws-row-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; font-family: var(--f-mono); display: flex; align-items: center; gap: 6px; }
.ws-row-copy {
  border: 1px solid var(--hair-2); background: var(--paper); border-radius: 4px; padding: 1px 6px;
  font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); cursor: pointer;
}
.ws-row-copy:hover { background: var(--paper-2); }

.ws-role-pill {
  display: inline-flex; align-items: center; font-family: var(--f-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px;
  background: var(--paper-3); color: var(--muted); border: 1px solid var(--hair);
}
.ws-role-pill.admin { background: var(--sage-soft); color: var(--sage); border-color: transparent; }
.ws-role-pill.clickable { cursor: pointer; }
.ws-role-pill.clickable:hover { border-color: var(--ink-3); box-shadow: 0 0 0 1px var(--ink-3); }
.ws-role-pill.clickable.admin:hover { box-shadow: 0 0 0 1px var(--sage); }

.ws-member-item + .ws-member-item { border-top: 1px solid var(--hair); }
.ws-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.ws-member-name { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.ws-member-remove, .ws-member-action {
  width: 24px; height: 24px; border-radius: 5px; border: none; background: transparent;
  color: var(--muted-2); cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
}
.ws-member-remove:hover { background: var(--red-soft); color: var(--red-deep); }
.ws-member-action:hover { background: var(--sky-soft, var(--paper-3)); color: var(--sky); }
.ws-member-remove svg, .ws-member-action svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.ws-member-reset-form { display: flex; align-items: center; gap: 8px; padding: 4px 4px 10px; }
.ws-reset-success { font-size: 12px; color: var(--sage); padding: 4px; display: block; }
.ws-member-row2 { padding: 0 4px 8px; text-align: right; }
.ws-member-delete-account {
  font: inherit; font-size: 10.5px; color: var(--muted-2); background: none; border: none;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0;
}
.ws-member-delete-account:hover { color: var(--red-deep); }

/* ─── Due today ─── */
.ct-due-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; cursor: pointer; }
.ct-due-row:hover { background: var(--paper-2); }
.ct-due-row + .ct-due-row { border-top: 1px solid var(--hair); }
.ct-due-main { flex: 1; min-width: 0; }
.ct-due-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ct-due-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ─── Workspace color dots — same color = same workspace, everywhere ─── */
.ws-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ws-dot-0 { background: var(--red); }
.ws-dot-1 { background: var(--sage); }
.ws-dot-2 { background: var(--sky); }
.ws-dot-3 { background: var(--amber); }
.ws-dot-4 { background: var(--violet); }
.ws-dot-5 { background: var(--teal); }
.ws-row-av .ws-dot { width: 8px; height: 8px; }
#workspace-label { display: inline-flex; align-items: center; gap: 6px; }
.ct-page-ws { display: inline-flex; align-items: center; gap: 5px; }

/* explicit "you're adding this to <workspace>" banner inside wizards */
.cw-ws-banner {
  display: flex; align-items: center; gap: 8px; padding: 9px 26px; margin: -24px -26px 18px;
  background: var(--paper-2); border-bottom: 1px solid var(--hair); font-size: 12px; color: var(--ink-2);
}
.cw-ws-banner b { font-weight: 600; color: var(--ink); }

/* ─── Search ─── */
.ct-search {
  height: 30px; padding: 0 10px; margin: 8px 8px 4px;
  border: 1px solid var(--hair-2); border-radius: 5px; background: var(--paper);
  color: var(--ink); font: inherit; font-size: 12.5px; width: calc(100% - 16px);
}
.ct-search:focus { outline: 2px solid var(--red-soft); outline-offset: -1px; border-color: var(--red-deep); }

/* ═══════════════════════════════════════════
   Wizard modal (cw-*) — ported from SalesHQ Light
   cadence-wizard-preview / "Run cadence" chrome
   ═══════════════════════════════════════════ */
.cw-stage {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(120% 90% at 50% -10%, rgba(15,17,22,0.30), rgba(15,17,22,0.55));
  display: none; place-items: center;
  grid-template-columns: minmax(0, 1fr);
  font-family: var(--f-ui); padding: 20px;
}
.cw-stage.open { display: grid; }
/* Simple Mode is itself a z:200 full-screen stage — the email builder needs
   to open on top of it (Simple Mode's one-tap "Build email" action), not
   underneath it. */
#email-builder-modal { z-index: 250; }
/* The Video Library doubles as a picker opened OVER the email builder (its 🎥
   Video toolbar button, and the touch-menu Video action) — so it must clear the
   builder's z:250, not just the default stage layer, or it renders underneath. */
#video-library-modal { z-index: 260; }
/* Quick add-contact opens from the cadence rail's "+ Add" — i.e. OVER the open
   cadence wizard (z:100). Without this it shares the wizard's z-index, and since
   it sits earlier in the DOM it renders UNDERNEATH the wizard — the click looked
   dead. Bump it above every other stage so it's always the topmost modal. */
#qc-modal { z-index: 270; }

/* Partner leverage — roster + cluster book */
.pl-addgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.pl-addgrid .bp-input, .pl-addgrid .bp-select { width: 100%; }
#pl-add-btn { grid-column: 1 / -1; }
.pl-row { border: 1px solid var(--hair); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.pl-row.open { border-color: var(--sage); }
.pl-row-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.pl-row-head:hover { background: var(--paper-3); }
.pl-av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.pl-main { flex: 1; min-width: 0; }
.pl-nm { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-firm { font-weight: 400; color: var(--muted); }
.pl-meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.pl-stars { color: var(--dtm-gold, #C0912B); letter-spacing: 1px; }
.pl-bar { display: flex; width: 88px; height: 7px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: var(--hair-2); }
.pl-bar .won { background: var(--sage); }
.pl-bar .act { background: var(--violet, #9E93EC); }
.pl-bar .unt { background: var(--hair-2); }
.pl-cluster { padding: 2px 12px 12px; }
.pl-cl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 4px; font-size: 13px; border-top: 1px solid var(--hair); cursor: pointer; }
.pl-cl-row:hover { color: var(--sage); }
.pl-st { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pl-st.won { color: var(--sage); }
.pl-st.act { color: var(--violet, #9E93EC); }
.pl-st.unt { color: var(--muted); }
.pl-st.lost { color: var(--muted); text-decoration: line-through; }

/* Partner leverage — Roster/Matrix tabs */
.pl-tabs { display: inline-flex; gap: 2px; background: var(--paper-3); border: 1px solid var(--hair); border-radius: 10px; padding: 3px; margin-bottom: 14px; }
.pl-tab { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 16px; border-radius: 7px; cursor: pointer; }
.pl-tab.active { background: var(--paper); color: var(--ink, var(--fg)); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* Partner Matrix — coverage grid */
.pl-mx-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pl-seg { display: inline-flex; border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; }
.pl-seg-btn { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 14px; cursor: pointer; }
.pl-seg-btn + .pl-seg-btn { border-left: 1px solid var(--hair); }
.pl-seg-btn.active { background: var(--sage); color: #fff; }
#pl-mx-cold.active { border-color: var(--violet, #9E93EC); color: var(--violet, #9E93EC); }
.pl-mx-scroll { overflow-x: auto; border: 1px solid var(--hair); border-radius: 12px; }
.pl-mx { border-collapse: collapse; width: 100%; font-size: 13px; }
.pl-mx thead th { position: sticky; top: 0; z-index: 2; background: var(--paper-3); text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 9px 10px; white-space: nowrap; cursor: pointer; border-bottom: 1px solid var(--hair); }
.pl-mx thead th:hover { color: var(--sage); }
.pl-mx th.pm-num, .pl-mx td.pm-num { text-align: center; }
.pl-mx th.pm-sticky, .pl-mx td.pm-sticky { position: sticky; left: 0; z-index: 1; background: var(--paper); min-width: 190px; }
.pl-mx thead th.pm-sticky { z-index: 3; background: var(--paper-3); }
.pl-mx td { padding: 8px 10px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.pl-mx tr.pm-row:hover td { background: var(--paper-3); }
.pl-mx tr.pm-row[data-pm-expand] { cursor: pointer; }
.pl-mx tr.pm-row.open td { background: var(--paper-3); }
.pm-nm { font-weight: 600; }
.pm-sub { color: var(--muted); font-weight: 400; }
.pm-firms { font-size: 10.5px; color: var(--muted); border: 1px solid var(--hair); border-radius: 999px; padding: 0 6px; }
.pm-strong { font-weight: 700; }
.pm-unt { color: var(--violet, #9E93EC); font-weight: 600; }
.pm-type { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: var(--paper-3); border: 1px solid var(--hair); color: var(--muted); }
.pm-type-adp_specialist { color: var(--sage); border-color: var(--sage); }
.pm-dot { color: var(--hair-2); }
.pm-dot.on { color: var(--sage); font-size: 14px; }
.pm-acct-link { cursor: pointer; font-weight: 600; }
.pm-acct-link:hover { color: var(--sage); text-decoration: underline; }
.pm-cov { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--paper-3); }
.pm-cov-1 { color: var(--muted); }
.pm-cov-2 { color: var(--violet, #9E93EC); border: 1px solid var(--violet, #9E93EC); }
.pm-cov-3 { color: #fff; background: var(--sage); }
.pm-cov-cold { color: var(--muted); border: 1px dashed var(--hair-2); }
.pl-mx tr.pm-exp td { padding: 0; background: var(--paper); }
.pm-acctlist { padding: 4px 12px 10px; }
.pm-acctline { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; border-top: 1px solid var(--hair); cursor: pointer; white-space: normal; }
.pm-acctline:hover { color: var(--sage); }

/* Find leads — Google Maps territory prospecting */
.lg-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lg-form .bp-input { flex: 1; min-width: 150px; }
.lg-scroll { overflow: auto; border: 1px solid var(--hair); border-radius: 12px; max-height: 52vh; }
.lg-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.lg-table thead th { position: sticky; top: 0; z-index: 1; background: var(--paper-3); text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid var(--hair); }
.lg-table td { padding: 8px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.lg-table tr.lg-dupe { opacity: .5; }
.lg-nm { font-weight: 600; }
.lg-badge { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--hair-2); color: var(--muted); font-weight: 600; }
.lg-importbar { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* Account-rail "Best way in" warm-path card */
.rc-wp { border: 1px solid var(--sage); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px; background: var(--paper-3); }
.rc-wp-via { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-wp-mid { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; }
.rc-wp-nm { font-weight: 600; font-size: 13px; }
.rc-wp-st { color: var(--dtm-gold, #C0912B); font-size: 12px; letter-spacing: 1px; }
.rc-wp-ask { width: 100%; justify-content: center; }
.rc-wp-noemail { font-size: 11px; color: var(--muted); line-height: 1.4; }

/* Co-sell tracker on the Partner Assist rail */
.pa-item { margin-bottom: 6px; }
.pa-cosell { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; }
.pa-cs-start { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--hair-2); background: transparent; color: var(--muted); cursor: pointer; }
.pa-cs-start:hover { border-color: var(--sage); color: var(--sage); }
.pa-cs-pill { font-size: 11px; padding: 3px 10px; border-radius: 999px; background: var(--paper-3); border: 1px solid transparent; cursor: pointer; }
.pa-cs-pill.active { color: var(--violet, #9E93EC); border-color: var(--violet, #9E93EC); }
.pa-cs-pill.booked { color: var(--sage); border-color: var(--sage); }
.pa-cs-x { font-size: 11px; color: var(--muted); background: none; border: none; cursor: pointer; padding: 2px 4px; line-height: 1; }
.pa-cs-x:hover { color: var(--red, #E24B4A); }

.cw-modal {
  /* Same --dtm-* values the Due Today module defines on its own .dtm
     wrapper — declared unconditionally here (not just under .cw-modal-wide)
     so the Context step (cStep 0, narrow modal) picks up the same
     cream/navy palette as the redesigned board (cStep 1) via the var(...,
     fallback) pattern used throughout .cw-head/.cw-progress/.cw-content/
     .cw-step-* below. Without this, those rules' fallbacks silently win
     whenever .cw-modal-wide isn't present, and the two screens look like
     two different design systems again. */
  --dtm-cream: #12181A; --dtm-cream-2: #27332D; --dtm-card: #1B2420;
  --dtm-navy: #F1EFE7; --dtm-navy-2: #E3E1D7; --dtm-navy-3: #C9D0CB;
  --dtm-slate: #9BA6A0; --dtm-slate-2: #6F7A74;
  --dtm-line: rgba(255,255,255,.10); --dtm-line-2: rgba(255,255,255,.17); --dtm-fill: rgba(255,255,255,.05);
  --dtm-red: #F0663B; --dtm-red-ink: #F5835F; --dtm-red-soft: rgba(240,102,59,.18);
  --dtm-gold: #D9A441; --dtm-gold-ink: #E6C57A; --dtm-gold-soft: rgba(217,164,65,.16);
  --dtm-sage: #17B394; --dtm-sage-soft: rgba(23,179,148,.16);
  --dtm-sky: #9E93EC; --dtm-sky-soft: rgba(158,147,236,.18);
  --dtm-amber: #D9A441; --dtm-amber-soft: rgba(217,164,65,.16);

  width: 760px; max-width: 100%;
  max-height: calc(100vh - 40px);
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  box-shadow: 0 32px 90px rgba(8,12,22,0.42), 0 4px 14px rgba(8,12,22,0.18);
  display: flex; flex-direction: column; overflow: hidden;
}

/* Header/progress-rail/content chrome below is shared by BOTH the Context
   step (cStep 0) and the Run Cadence board (cStep 1, .cw-modal-wide) — kept
   as one set of rules (not step-scoped) so the two screens read as one
   consistent product instead of two different eras of the app bolted
   together (2026-07-15 restyle, matching the Run Cadence Redesign's
   cream/navy palette). .cw-modal-wide overrides reset anything the board's
   own rc-* panels already handle themselves. */
.cw-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--hair); flex-shrink: 0; }
.cw-head-mark {
  width: 42px; height: 42px; border-radius: 12px; background: var(--red); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(200,30,30,.28);
}
.cw-head-mark svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 1.7; }
.cw-head-titles { min-width: 0; }
.cw-head-title { font-family: var(--f-serif); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; color: var(--dtm-navy, var(--ink)); line-height: 1.1; }
.cw-head-sub { font-size: 12.5px; color: var(--dtm-slate, var(--muted)); margin-top: 5px; }
.cw-head-sub b { color: var(--dtm-navy, var(--ink-2)); font-weight: 600; }
/* Selected-contact phone + email under the header subtitle (click to act). */
.cw-head-contact { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; }
.cw-head-cc { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--dtm-slate, var(--muted)); text-decoration: none; max-width: 100%; overflow: hidden; }
.cw-head-cc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-head-cc:hover { color: var(--sage, var(--ink)); }
.cw-head-cc svg { width: 12px; height: 12px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; opacity: .8; }
.cw-head-badge-row { margin-top: 9px; }
.cw-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-top: 1px; }
.cw-step-count { font-family: var(--f-mono); font-size: 11px; color: var(--dtm-slate-2, var(--muted)); letter-spacing: 0.02em; white-space: nowrap; }
.cw-close {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--hair);
  background: var(--paper); color: var(--ink-3); cursor: pointer; display: grid; place-items: center;
}
.cw-close:hover { background: var(--paper-2); color: var(--ink); }
.cw-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.cw-progress { display: flex; align-items: center; gap: 0; padding: 16px 22px; border-bottom: 1px solid var(--hair); flex-shrink: 0; background: var(--dtm-cream, var(--paper-2)); }
.cw-pstep { display: flex; align-items: center; gap: 10px; }
.cw-pstep-node {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  background: var(--paper); color: var(--dtm-slate-2, var(--muted)); border: 1px solid var(--dtm-line-2, var(--hair-2));
}
.cw-pstep.done .cw-pstep-node { background: var(--dtm-sage, var(--red)); color: #fff; border-color: var(--dtm-sage, var(--red-deep)); }
.cw-pstep.current .cw-pstep-node { background: var(--dtm-navy, var(--ink)); color: #fff; border-color: var(--dtm-navy, var(--ink)); }
.cw-pstep-node svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2.2; }
.cw-pstep-text { line-height: 1.15; }
.cw-pstep-k { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dtm-slate-2, var(--muted-2)); }
.cw-pstep-l { font-size: 13px; font-weight: 600; color: var(--dtm-slate, var(--ink-3)); margin-top: 1px; }
.cw-pstep.current .cw-pstep-l { color: var(--dtm-navy, var(--ink)); }
.cw-pstep.done .cw-pstep-l { color: var(--dtm-navy, var(--ink-2)); }
.cw-pconn { flex: 1; height: 2px; background: var(--dtm-line-2, var(--hair-2)); margin: 0 16px; border-radius: 2px; }
.cw-pconn.done { background: var(--dtm-sage, var(--red)); opacity: 0.6; }

.cw-content { flex: 1; min-height: 0; overflow: auto; padding: 24px 26px; background: var(--dtm-cream, var(--paper)); }
.cw-content::-webkit-scrollbar { width: 9px; }
.cw-content::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 9px; border: 2px solid var(--paper); }
.cw-step-head { margin-bottom: 16px; }
.cw-step-eyebrow { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dtm-slate, var(--red-deep)); font-weight: 600; margin-bottom: 6px; }
.cw-step-title { font-family: var(--f-serif); font-weight: 700; font-size: 22px; letter-spacing: -0.015em; color: var(--dtm-navy, var(--ink)); margin: 0; line-height: 1.15; }
.cw-step-lede { font-size: 13px; color: var(--dtm-slate, var(--muted)); margin-top: 6px; max-width: 60ch; line-height: 1.5; }

.cw-move-bar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--hair); background: var(--amber-soft); flex-shrink: 0; }
.cw-move-bar .lab { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); font-weight: 500; }
.cw-move-bar select { height: 30px; }

.cw-foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--hair); background: var(--dtm-cream, var(--paper-2)); flex-shrink: 0; flex-wrap: wrap; }
.cw-foot-hint { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.cw-foot-hint svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; flex-shrink: 0; }
/* max-width + min-width:0 are load-bearing here, not decorative — with
   flex-shrink:0 and no width clamp, this reports its natural single-line
   width (sum of every button) regardless of how little room .cw-foot
   actually has, so it silently overflows past .cw-modal's overflow:hidden
   instead of wrapping (confirmed bug 2026-07-15: Save/Continue clipped off
   whenever all four workspace-action buttons show at once, e.g. reached via
   "Edit account details" on an existing prospect). max-width is what lets
   flex-wrap actually engage. */
.cw-foot-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; min-width: 0; }
/* Mobile override MUST come after the base rule above — an earlier attempt
   placed this inside the shared top-of-file 640px media query, which lost
   the cascade to this later, equal-specificity, unconditional rule (later
   source wins on tied specificity, media query or not). margin-left:auto
   and flex-shrink:0 need to be overridden here, right after, or the footer
   button group refuses to shrink and just gets clipped by the modal's
   overflow:hidden on narrow screens instead of wrapping. */
@media (max-width: 640px) {
  .cw-foot-right { width: 100%; flex-shrink: 1; margin-left: 0; }
}

/* form fields inside wizard */
.cw-field-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cw-field-row .lab { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); font-weight: 500; }
.cw-dupe-hint {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gold-ink, var(--amber));
  background: var(--amber-soft); border: 1px solid var(--amber-border, transparent); border-radius: 6px;
  padding: 7px 10px; margin-top: 2px;
}
.cw-dupe-hint button {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--red-deep); background: none; border: none;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0; flex-shrink: 0; margin-left: auto;
}

.cw-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 2px;
  background: var(--paper); border: 1px solid var(--hair-2); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15,17,22,0.14); max-height: 280px; overflow-y: auto;
}
.cw-suggest-group-label {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-2); padding: 8px 12px 4px;
}
.cw-suggest-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; cursor: pointer; }
.cw-suggest-item:hover { background: var(--paper-2); }
.cw-suggest-item .name { font-size: 13px; font-weight: 600; color: var(--ink); }
.cw-suggest-item .sub { font-size: 11.5px; color: var(--muted); }
.cw-suggest-empty { padding: 10px 12px; font-size: 12px; color: var(--muted); }
.bp-input, .bp-select, .bp-textarea {
  width: 100%; padding: 0 10px; border: 1px solid var(--hair-2); border-radius: 5px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 13.5px;
}
.bp-input, .bp-select { height: 36px; }
.bp-textarea { padding: 9px 10px; min-height: 60px; resize: vertical; line-height: 1.5; }
.bp-input:focus, .bp-select:focus, .bp-textarea:focus { outline: 2px solid var(--red-soft); outline-offset: -1px; border-color: var(--red-deep); }

.cw-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cw-divider { border: none; border-top: 1px solid var(--hair); margin: 18px 0; }
.cw-toggle-row { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; margin-bottom: 4px; }
.cw-toggle-row input { width: 15px; height: 15px; accent-color: var(--red); }
.cw-toggle-row span { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }

/* option chips */
.cw-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.cw-opt {
  padding: 8px 13px; border: 1px solid var(--hair-2); border-radius: 7px; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--paper);
  display: inline-flex; align-items: center; gap: 6px;
}
.cw-opt:hover { border-color: var(--ink-3); }
.cw-opt.sel { border-color: var(--red); background: var(--red-soft); color: var(--red-deep); }
.cw-opt.sm { padding: 5px 10px; font-size: 11.5px; border-radius: 6px; }

/* ── live preview: contact card ── */
.cw-preview-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin: 22px 0 10px; }
.cw-contact {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  border: 1px solid var(--hair); border-radius: 9px; background: var(--paper);
}
.cw-contact-av {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper-3); color: var(--ink); display: grid; place-items: center;
  font-size: 16px; font-weight: 600; letter-spacing: -0.02em; flex-shrink: 0;
}
.cw-contact-name { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.cw-contact-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cw-contact-switch { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }

.cw-intel {
  border: 1px solid var(--hair); border-radius: 10px; overflow: hidden;
  border-left: 3px solid var(--red); margin-top: 16px;
}
.cw-intel-hd {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--red-soft); border-bottom: 1px solid var(--hair);
}
.cw-intel-hd .ttl { font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.cw-intel-hd svg { width: 14px; height: 14px; stroke: var(--red-deep); fill: none; stroke-width: 1.6; flex-shrink: 0; }
.cw-intel-out { margin-left: auto; font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--red-deep); white-space: nowrap; }
.cw-intel-body { padding: 16px; }
.cw-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.cw-field .k { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); font-weight: 500; display: flex; align-items: center; gap: 5px; }
.cw-field .v { font-size: 13px; color: var(--ink); font-weight: 600; margin-top: 3px; line-height: 1.3; }
.cw-fchk {
  width: 12px; height: 12px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--sage-soft); color: var(--sage); font-size: 8px; font-weight: 700; flex-shrink: 0;
}
.cw-fchk.pending { background: var(--amber-soft); color: var(--amber); }

.cw-callout {
  margin-top: 12px; padding: 11px 13px; border-radius: 8px;
  background: var(--amber-soft); border: 1px solid transparent;
  font-size: 12.5px; color: var(--ink-2); display: flex; gap: 9px; align-items: flex-start; line-height: 1.45;
}
.cw-callout svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; stroke: var(--amber); fill: none; stroke-width: 1.6; }
.cw-callout b { color: var(--ink); }

/* ── contact toggle (parallel per-contact cadences, Step 2) ── */
.cw-contact-toggle { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.cw-contact-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px;
  border: 1px solid var(--hair-2); background: var(--paper); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.cw-contact-tab:hover { background: var(--paper-2); }
.cw-contact-tab.sel { background: var(--sage); border-color: var(--sage); color: #fff; }
.cw-contact-tab .n { font-family: var(--f-mono); font-size: 10.5px; color: var(--muted-2); }
.cw-contact-tab.sel .n { color: rgba(255,255,255,.65); }

@media (max-width: 640px) {
  /* 30px was below the ~44px touch-target guideline — bump it up so
     switching between contacts on a phone doesn't mean mis-tapping the
     wrong person's cadence. */
  .cw-contact-tab { height: 42px; padding: 0 14px; font-size: 13.5px; gap: 8px; }
  .cw-contact-toggle { gap: 8px; }
}

/* ── touch rows (Run Cadence board) — inline tinted icon tile per row, no
   connecting timeline line, matching the redesign reference. .cw-touch-node
   (the old circle-in-a-timeline node) is no longer rendered by renderSeq(). ── */
.cw-seq { position: relative; }
.cw-touch { position: relative; padding: 3px 0; }
.rc-t-ico {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
}
.rc-t-ico svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.rc-t-ico.email { background: var(--wkch-email-soft); color: var(--wkch-email); }
.rc-t-ico.linkedin { background: var(--wkch-linkedin-soft); color: var(--wkch-linkedin); }
.rc-t-ico.call { background: var(--wkch-call-soft); color: var(--wkch-call); }
.rc-t-ico.drop { background: var(--wkch-drop-soft); color: var(--wkch-drop); }
.rc-t-ico.mail { background: var(--wkch-mail-soft); color: var(--wkch-mail); }
.rc-t-ico.other { background: var(--wkch-other-soft); color: var(--wkch-other); }
.rc-t-ico.done { background: var(--sage-soft); color: var(--sage); }
.cw-touch-card {
  border: 1px solid var(--hair); border-radius: 9px; padding: 11px 14px; background: var(--paper);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  transition: border-color .12s, box-shadow .12s;
}
.cw-touch.done .cw-touch-card { border-color: color-mix(in oklab, var(--sage) 30%, var(--hair)); background: var(--sage-soft); }
/* ── "⋯ More" overflow (channel-specific + secondary actions) ── */
.cw-touch-more { width: 100%; display: none; flex-wrap: wrap; gap: 6px; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--hair); }
.cw-touch-more.open { display: flex; }
.cw-touch-more .cw-touch-act { height: 28px; padding: 0 10px; font-size: 11.5px; }
.cw-touch-more .cw-touch-act svg { width: 12px; height: 12px; }
.cw-touch.priority .cw-touch-card { border-left: 3px solid var(--amber); }
.cw-touch-priority-badge { display: inline-flex; margin-right: 5px; vertical-align: -2px; }
.cw-touch-priority-ico { width: 13px; height: 13px; stroke: var(--amber); fill: var(--amber); stroke-width: 1; }
.cw-touch-act.active { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-border); }
.cw-touch-main { min-width: 0; flex: 1; }
.cw-touch-grip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5px; width: 12px; flex-shrink: 0;
  cursor: grab; padding: 4px; margin: -4px 0; border-radius: 4px;
}
.cw-touch-grip:hover { background: var(--paper-2); }
.cw-touch-grip span { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }
.cw-touch.dragging { opacity: 0.4; }
.cw-touch.drag-over .cw-touch-card { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.cw-touch-title { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.cw-touch-hint { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.cw-touch-assignee { font-weight: 600; color: var(--ink-3); }
.cw-touch-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 100%; }
.cw-touch-date { font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cw-touch-act {
  height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--hair); background: var(--paper);
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--ink-2); font-size: 11px; font-weight: 500;
}
.cw-touch-act:hover { background: var(--paper-2); }
.cw-touch-act.primary { background: var(--sage); color: #fff; border-color: var(--sage); }
.cw-touch-act.primary:hover { background: #149A80; }
.cw-touch-act.overdue { background: var(--red-soft); color: var(--red-deep); border-color: transparent; }
.cw-touch-act.due-today { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-border); }
.cw-touch-act svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.cw-touch-del { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--hair); background: var(--paper); display: grid; place-items: center; cursor: pointer; color: var(--muted); flex-shrink: 0; }
.cw-touch-del:hover { background: var(--red-soft); color: var(--red-deep); }
.cw-touch-del svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.cw-touch-notes-edit { grid-column: 1 / -1; width: 100%; margin-top: 8px; display: flex; gap: 8px; }
.cw-touch-notes-edit textarea { flex: 1; }
.cw-touch-edit { flex-wrap: wrap; align-items: center; }
.cw-touch-edit input[data-edit-label] { flex: 1 1 160px; min-width: 140px; width: auto; }
.cw-opts-edit { flex: 1 1 auto; }

.cw-touch-preview {
  grid-column: 1 / -1; width: 100%; margin-top: 8px; padding: 10px 12px;
  background: var(--paper-2); border: 1px solid var(--hair); border-radius: 8px;
}
.cw-touch-preview-label { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--muted-2); margin-bottom: 6px; }
.cw-touch-preview-subject { font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.cw-touch-preview-body { font-size: 12.5px; color: var(--muted); line-height: 1.5; white-space: pre-wrap; }

@media (max-width: 480px) {
  /* Force the label and the date/action buttons onto fully separate rows
     instead of relying on flex-wrap to break between them when they don't
     fit side by side — some browsers let a wrapped multi-line title
     overlap the date/actions rather than pushing them to their own row. */
  .cw-touch-main { flex: 1 1 100%; }
  .cw-touch-right { flex: 1 1 100%; margin-top: 6px; }
}

.cw-add-touch { margin-top: 10px; padding: 12px 14px; border: 1px dashed var(--hair-2); border-radius: 9px; }
.cw-add-touch-row { display: flex; gap: 8px; margin-top: 8px; }
.cw-add-touch-row input { flex: 1; }

.cw-contact-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--hair); border-radius: 7px; margin-bottom: 6px; background: var(--paper); }
.cw-contact-item .info { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.cw-contact-item .info b { color: var(--ink); font-weight: 600; }
.cw-contact-item .del { width: 22px; height: 22px; border-radius: 5px; border: none; background: transparent; color: var(--muted-2); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.cw-contact-item .del:hover { background: var(--red-soft); color: var(--red-deep); }
.cw-contact-item .del svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.cw-contact-enrich-msg { font-size: 11px; color: var(--muted); margin-top: 2px; }

.cw-input-error { border-color: var(--red-deep) !important; animation: cw-shake .3s; }
@keyframes cw-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ═══════════════════════════════════════════
   Run Cadence — single-screen 3-panel redesign (cStep 1 of the cw-*
   wizard). Ported from the "Run Cadence Redesign" design handoff
   (2026-07-15) — contacts (rc-rail) | this contact's cadence (rc-center,
   reuses the existing #c-seq/renderSeq()) | account intel + enrichment
   (rc-intel, reuses the existing #c-context-card/renderContextCard()).
   Reuses --dtm-* tokens (same palette the handoff specifies almost
   exactly) rather than introducing a parallel token set, and --violet for
   the AI-opener accent (already an exact match to the handoff's purple).
   ═══════════════════════════════════════════ */
.cw-modal-wide {
  /* --dtm-* tokens now live on the base .cw-modal rule (always present,
     not just here) so the Context step gets the same palette — see the
     comment there. This class only needs to handle sizing. */
  width: min(1320px, 100%); height: min(860px, 100%);
}
/* overflow:hidden here (not the base rule's overflow:auto) is load-bearing
   — .cw-cstep (the plain, unstyled div wrapping .rc-body) breaks the
   flex-height chain between .cw-content and .rc-body with nothing to
   constrain it, so .rc-body always rendered at its full natural content
   height instead of being clipped to the available space. That left
   .cw-content itself as the only thing that actually overflowed, so ONE
   scroll (this element's) moved all 3 columns together (confirmed bug
   2026-07-15: scrolling the center panel dragged the contacts rail and
   intel rail along with it). Passing flex/min-height/overflow through the
   .cw-cstep wrapper below restores 3 independently-scrolling panels. */
.cw-modal-wide .cw-content { padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--paper); }
.cw-modal-wide .cw-cstep { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.cw-modal-wide .cw-ws-banner:empty { display: none; }

.rc-body { display: grid; grid-template-columns: 250px 1fr 300px; flex: 1; min-height: 0; overflow: hidden; }
.rc-rail, .rc-center, .rc-intel { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.rc-rail { background: var(--paper); border-right: 1px solid var(--hair); }
.rc-intel { background: var(--paper); border-left: 1px solid var(--hair); }
.rc-rail-scroll, .rc-center-scroll, .rc-intel-scroll { overflow-y: auto; padding: 14px; flex: 1; min-height: 0; }
.rc-rail-scroll::-webkit-scrollbar, .rc-center-scroll::-webkit-scrollbar, .rc-intel-scroll::-webkit-scrollbar { width: 9px; }
.rc-rail-scroll::-webkit-scrollbar-thumb, .rc-intel-scroll::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 9px; border: 2px solid var(--paper); }
.rc-center { background: var(--dtm-cream); }
.rc-center-scroll::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 9px; border: 2px solid var(--dtm-cream); }
.rc-lbl {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dtm-slate-2); padding: 0 2px 11px; display: flex; align-items: center; justify-content: space-between;
}

/* ── contacts rail ── */
.rc-contact {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 13px;
  margin-bottom: 6px; border: 1px solid transparent; background: none; cursor: pointer; position: relative;
  transition: background .12s, border-color .12s; font: inherit;
}
.rc-contact:hover { background: var(--dtm-fill); }
.rc-contact.on { background: var(--red-soft); border-color: var(--red-deep); }
.rc-c-av {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: #fff;
}
/* display:flex + min-width:0 on both the container and its children are
   load-bearing, not decorative — .rc-c-name/.rc-c-role are <span>s (inline
   by default), so without a flex column here they run together on one
   line instead of stacking, and their own overflow:hidden/ellipsis never
   engages (an inline element's box isn't constrained to the parent's width
   the way a flex child's is) — confirmed bug 2026-07-15: a long title like
   "Talent Manager" spilled out of the card and visually overlapped the
   intel rail to its right instead of wrapping/truncating. */
.rc-c-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-c-name { min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--dtm-navy); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-c-role { min-width: 0; font-size: 12px; color: var(--dtm-slate); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ─── Wave prospecting ─── */
.rc-wave-bar { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.rc-wave-org, .rc-wave-reset { font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; border-radius: 7px; padding: 5px 9px; border: 1px solid var(--hair); background: var(--paper); color: var(--ink); }
.rc-wave-org { width: 100%; justify-content: center; }
.rc-wave-org:hover, .rc-wave-reset:hover { background: var(--paper-2); }
.rc-wave-on { font-size: 11.5px; font-weight: 700; color: var(--sage); flex: 1; }
.rc-wave-chip { display: inline-block; align-self: flex-start; margin-top: 5px; font-size: 10px; font-weight: 700; letter-spacing: .01em; padding: 1px 7px; border-radius: 999px; cursor: pointer; white-space: nowrap; border: 1px solid transparent; }
.rc-wave-chip.dormant { opacity: .72; font-style: italic; }
/* Per-wave accent so A/B/C read apart at a glance. */
.rc-wave-chip.wv0 { color: var(--red-deep); background: var(--red-soft); border-color: var(--red); }
.rc-wave-chip.wv1 { color: var(--sage); background: rgba(14,124,107,.10); border-color: var(--sage); }
.rc-wave-chip.wv2 { color: var(--amber); background: rgba(201,138,30,.12); border-color: var(--amber); }
.rc-wave-chip.wv3 { color: #6b4bb3; background: rgba(107,75,179,.10); border-color: #6b4bb3; }
.rc-wave-chip.wv4 { color: #2563a8; background: rgba(37,99,168,.10); border-color: #2563a8; }
.rc-wave-chip.wv5 { color: var(--muted); background: var(--paper-2); border-color: var(--muted-2); }
.rc-c-prog { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.rc-c-track { flex: 1; height: 5px; border-radius: 99px; background: var(--dtm-cream-2); overflow: hidden; }
.rc-contact.on .rc-c-track { background: #fff; }
.rc-c-fill { height: 100%; border-radius: 99px; background: var(--dtm-sage); }
.rc-c-pct { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; color: var(--dtm-slate-2); flex-shrink: 0; }
.rc-c-flag { position: absolute; top: 11px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--dtm-red); }
/* Bulk per-contact pause toggle — sits as its own flex child at the end of
   the row (not absolutely positioned like .rc-c-flag) so it doesn't fight
   the flag dot for the same corner. */
.rc-c-pause {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  color: var(--dtm-slate-2); cursor: pointer; transition: background .12s, color .12s;
}
.rc-c-pause svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.rc-c-pause:hover { background: var(--dtm-fill); color: var(--dtm-navy); }
.rc-c-pause.active { color: var(--dtm-sage); }
.rc-c-pause.active:hover { background: var(--dtm-sage-soft); }
.rc-contact.paused { opacity: .65; }
.rc-c-paused-lbl {
  font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--dtm-slate-2); margin-left: 5px; vertical-align: 1px;
}
.rc-rail-foot { padding: 12px 16px; border-top: 1px solid var(--hair); flex-shrink: 0; }
.rc-mini-stat { display: flex; justify-content: space-between; font-size: 12px; color: var(--dtm-slate); padding: 4px 2px; }
.rc-mini-stat b { font-family: var(--f-mono); color: var(--dtm-navy); font-weight: 600; }

/* ── center: this contact's cadence ── */
.rc-contact-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rc-contact-hd .rc-c-av { width: 40px; height: 40px; font-size: 14px; }
.rc-ch-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-ch-name { min-width: 0; font-family: var(--f-serif); font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; color: var(--dtm-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-ch-role { min-width: 0; font-size: 12.5px; color: var(--dtm-slate); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-ch-expand { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--hair); border-radius: 50%; cursor: pointer; color: var(--dtm-slate); }
.rc-ch-expand:hover { background: var(--dtm-cream, var(--hair-2)); color: var(--dtm-navy); }
.rc-ch-expand.on { color: var(--dtm-navy); border-color: var(--dtm-slate); }
.rc-ch-chev { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.rc-ch-expand.on .rc-ch-chev { transform: rotate(180deg); }
.rc-contact-card { border: 1px solid var(--hair); border-radius: 10px; padding: 4px 12px; margin: -2px 0 12px; background: var(--dtm-cream, var(--hair-2)); }
.rc-cc-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.rc-cc-row:last-child { border-bottom: none; }
.rc-cc-ico { flex-shrink: 0; width: 16px; height: 16px; color: var(--dtm-slate); }
.rc-cc-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rc-cc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-cc-lab { font-size: 11px; color: var(--dtm-slate); text-transform: uppercase; letter-spacing: .03em; }
.rc-cc-val { font-size: 13px; color: var(--dtm-navy); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-cc-act { flex-shrink: 0; font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border: 1px solid var(--dtm-slate); border-radius: 999px; background: var(--dtm-card, #fff); color: var(--dtm-navy); cursor: pointer; }
.rc-cc-act:hover { background: var(--dtm-navy); color: #fff; border-color: var(--dtm-navy); }
.rc-cc-empty { padding: 10px 0; font-size: 12.5px; color: var(--dtm-slate); font-style: italic; }

.rc-opener { background: var(--paper); border: 1px solid var(--hair); border-radius: 13px; padding: 10px 13px; margin-bottom: 11px; }
.rc-opener-hd {
  display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--violet); margin-bottom: 8px;
}
.rc-opener-hd svg { width: 14px; height: 14px; stroke: var(--violet); fill: none; stroke-width: 1.7; }
.rc-opener-hd .act {
  margin-left: auto; color: var(--dtm-slate-2); cursor: pointer; text-transform: none; letter-spacing: 0;
  font-weight: 500; font-family: var(--f-ui); font-size: 12px; background: none; border: none; padding: 0;
}
.rc-opener-hd .act + .act { margin-left: 10px; }
.rc-opener-hd .act:hover { color: var(--dtm-navy); }
.rc-opener-tx {
  font-size: 13.5px; line-height: 1.45; color: var(--dtm-navy-2); border-left: 3px solid #F0E9FC; padding-left: 12px;
  font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rc-opener.exp .rc-opener-tx { -webkit-line-clamp: unset; }
.rc-opener-empty { font-size: 12.5px; color: var(--dtm-slate); font-style: italic; }

.rc-seq-lbl {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--dtm-slate-2); display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding: 0 2px;
}
.rc-seq-lbl .cnt { color: var(--dtm-slate); }

/* ── intel rail ── */
.rc-fact { display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--hair); }
.rc-fact:last-of-type { border-bottom: none; margin-bottom: 8px; }
.rc-fact .fk { font-size: 12.5px; color: var(--dtm-slate); flex-shrink: 0; width: 84px; }
.rc-fact .fv { font-size: 13px; color: var(--dtm-navy); font-weight: 600; flex: 1; text-align: right; }
.rc-fact .fv.mono { font-family: var(--f-mono); font-weight: 600; }
.rc-pin {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--red-deep);
  background: var(--red-soft); padding: 3px 9px; border-radius: 7px;
}
.rc-note { font-size: 13px; color: var(--dtm-navy-2); line-height: 1.5; background: var(--dtm-cream); border-radius: 11px; padding: 12px; margin: 4px 0 16px; }
.rc-signal { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 11px; background: var(--dtm-cream); margin-bottom: 8px; }
.rc-signal .sg-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--dtm-amber-soft); color: var(--dtm-amber); }
.rc-signal .sg-ico svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.rc-signal .sg-ico.sky { background: var(--dtm-sky-soft); color: var(--dtm-sky); }
.rc-signal .sg-tx { flex: 1; min-width: 0; }
.rc-signal .sg-name { font-size: 13px; font-weight: 600; color: var(--dtm-navy); }
.rc-signal .sg-sub { font-size: 11.5px; color: var(--dtm-slate-2); margin-top: 1px; }
.rc-signal .sg-n { font-family: var(--f-mono); font-size: 15px; font-weight: 600; color: var(--dtm-navy); flex-shrink: 0; }

/* Enrichment chips (#c-context-card, unchanged JS) restyled to feel like
   the handoff's 2-column grid without touching renderContextCard()'s
   markup/click-handling — the chips already carry the exact data-action
   names the existing listener expects. */
.rc-intel .cw-context-card { background: none; border: none; padding: 0; margin: 6px 0 0; }
.rc-intel .cw-context-head { display: block; }
.rc-intel .cw-context-title { display: none; }
.rc-intel .cw-context-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-intel .cw-context-badges .cw-context-chip { flex: 1 1 calc(50% - 4px); justify-content: center; padding: 10px 11px; border-radius: 11px; text-align: center; }
.rc-intel .cw-context-badges .cw-renewal-badge { flex: 1 1 100%; justify-content: center; }
.rc-intel .cw-context-notes { background: var(--paper-2); border: 1px solid var(--hair); border-radius: 11px; padding: 10px 12px; }

/* Widen the touch action cluster slightly on the redesign's cream center
   column so it doesn't feel cramped against the card's paper background. */
.rc-center .cw-touch-card { background: var(--paper); }

@media (max-width: 900px) {
  .cw-modal-wide { width: 100%; height: 100%; border-radius: 0; }
  .rc-body { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; overflow-y: auto; }
  .rc-rail { border-right: none; border-bottom: 1px solid var(--hair); }
  .rc-rail-scroll { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 12px 14px; }
  .rc-rail-scroll .rc-lbl { display: none; }
  .rc-contact { flex-direction: column; align-items: flex-start; width: auto; min-width: 160px; margin-bottom: 0; }
  .rc-rail-foot { display: none; }
  .rc-intel { border-left: none; border-top: 1px solid var(--hair); }
}
@media (max-width: 480px) {
  .rc-fact .fk { width: 68px; }
}

/* ── footer progress ring (cStep 1 only) — mirrors the handoff's
   "N / 5 touches logged · <contact>" readout next to a small sage
   progress ring, scoped to whichever contact is active. ── */
.rc-ft-prog { display: flex; align-items: center; gap: 9px; }
.rc-ft-ring { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
.rc-ft-ring svg { transform: rotate(-90deg); }
.rc-ft-ring circle#rc-ft-ring-arc { transition: stroke-dashoffset .4s; }
.rc-ft-rc { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-mono); font-size: 10px; font-weight: 600; color: var(--dtm-navy); }
.rc-ft-lbl { font-size: 13px; color: var(--dtm-slate); }
.rc-ft-lbl b { color: var(--dtm-navy); font-weight: 600; }

/* ═══════════════════════════════════════════
   Due Today module (.dtm-*) — scoped design tokens,
   deliberately separate palette from the rest of the app.
   No Google Fonts: this app already had that removed once
   (ADP corporate networks block fonts.googleapis.com), so
   the "serif" here is a system stack, same policy as --f-serif.
   ═══════════════════════════════════════════ */
.dtm {
  --dtm-cream: #12181A; --dtm-cream-2: #27332D; --dtm-card: #1B2420;
  --dtm-navy: #F1EFE7; --dtm-navy-2: #E3E1D7; --dtm-navy-3: #C9D0CB;
  --dtm-slate: #9BA6A0; --dtm-slate-2: #6F7A74;
  --dtm-line: rgba(255,255,255,.10); --dtm-line-2: rgba(255,255,255,.17); --dtm-fill: rgba(255,255,255,.05);
  --dtm-red: #F0663B; --dtm-red-ink: #F5835F; --dtm-red-soft: rgba(240,102,59,.18);
  --dtm-gold: #D9A441; --dtm-gold-ink: #E6C57A; --dtm-gold-soft: rgba(217,164,65,.16);
  --dtm-sage: #17B394; --dtm-sage-soft: rgba(23,179,148,.16);
  --dtm-sky: #9E93EC; --dtm-sky-soft: rgba(158,147,236,.18);
  --dtm-amber: #D9A441; --dtm-amber-soft: rgba(217,164,65,.16);
  --dtm-f-serif: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;

  background: var(--dtm-cream); border: 1px solid var(--hair); border-radius: 12px;
  padding: 28px 28px 24px; margin-bottom: 20px; font-family: var(--f-ui); color: var(--dtm-navy);
  background-image: radial-gradient(circle at 92% -10%, rgba(184,146,10,.06), transparent 42%);
}
.dtm-ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.dtm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 22px; flex-wrap: wrap; }
.dtm-eyebrow { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dtm-gold-ink); margin-bottom: 8px; }
.dtm-h1 { font-family: var(--dtm-f-serif); font-size: 32px; font-weight: 700; letter-spacing: -.015em; margin: 0; line-height: 1; color: var(--dtm-navy); }
.dtm-subline { font-size: 14px; color: var(--dtm-slate); margin-top: 10px; }
.dtm-subline b { color: var(--dtm-navy); font-weight: 600; }
.dtm-head-r { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; max-width: 100%; }

.dtm-seg { display: flex; flex-shrink: 0; background: var(--dtm-cream-2); border: 1px solid var(--dtm-line); border-radius: 11px; padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dtm-seg button {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--dtm-slate); white-space: nowrap; transition: all .15s;
  font-family: inherit; border: none; background: none; cursor: pointer;
}
.dtm-seg button .dtm-ico { width: 14px; height: 14px; }
.dtm-seg button .n { font-family: var(--f-mono); font-size: 10.5px; color: var(--dtm-slate-2); }
.dtm-seg button.on { background: var(--dtm-card); color: var(--dtm-navy); box-shadow: 0 1px 3px rgba(15,27,60,.1); }
.dtm-seg button.on .n { color: var(--dtm-gold-ink); }

.dtm-simplebtn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 11px;
  background: var(--sage); color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 8px 18px rgba(63,143,95,.28);
  transition: transform .12s; font-family: inherit; border: none; cursor: pointer;
}
.dtm-simplebtn:hover { transform: translateY(-1px); }
.dtm-simplebtn:active { transform: translateY(0); }
.dtm-simplebtn .dtm-ico { width: 16px; height: 16px; stroke: #fff; }

.dtm-geo-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 11px;
  font-size: 12.5px; font-weight: 500; background: var(--dtm-cream-2); color: var(--dtm-slate);
  border: 1px solid var(--dtm-line); cursor: pointer; font-family: inherit; transition: background .15s;
}
.dtm-geo-badge:hover { background: var(--dtm-line); }
.dtm-geo-badge.granted { color: var(--dtm-sage); cursor: default; }
.dtm-geo-badge.granted:hover { background: var(--dtm-cream-2); }
.dtm-geo-badge.denied { color: var(--dtm-slate-2); }
.dtm-geo-badge svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }

.dtm-near-enable-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; margin-top: 10px;
  border-radius: 9px; background: var(--dtm-navy); color: #fff; font-size: 12.5px; font-weight: 600;
  font-family: inherit; border: none; cursor: pointer;
}
.dtm-near-enable-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.dtm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }

.dtm-empty { padding: 26px 16px; text-align: center; color: var(--dtm-slate); font-size: 13px; background: var(--dtm-card); border: 1px solid var(--dtm-line); border-radius: 16px; }

.dtm-acct { background: var(--dtm-card); border: 1px solid var(--dtm-line); border-radius: 16px; margin-bottom: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(15,27,60,.04); transition: opacity .3s; }
.dtm-acct.cleared { opacity: .55; }
.dtm-acct-hd { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; user-select: none; }
.dtm-acct-hd:hover { background: var(--dtm-fill); }
.dtm-acct-check { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--dtm-navy); cursor: pointer; }

.dtm-bulk-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--sage); color: #fff;
  border-radius: 12px; padding: 10px 16px; margin-bottom: 14px; grid-column: 1 / -1;
}
.dtm-bulk-bar #dtm-bulk-count { font-size: 13px; font-weight: 600; margin-right: 4px; }
.dtm-bulk-bar #dtm-bulk-msg { color: var(--dtm-gold); font-size: 12px; }
.dtm-av { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-family: var(--f-mono); font-size: 13.5px; font-weight: 600; color: #fff; }
.dtm-av.critical { background: var(--dtm-red); } .dtm-av.high { background: var(--dtm-gold); } .dtm-av.standard { background: #38443D; }
.dtm-acct-idy { min-width: 0; flex: 1; }
.dtm-acct-co { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.dtm-tierdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dtm-tierdot.critical { background: var(--dtm-red); } .dtm-tierdot.high { background: var(--dtm-gold); } .dtm-tierdot.standard { background: var(--dtm-slate-2); }
.dtm-acct-who { font-size: 12.5px; color: var(--dtm-slate); margin-top: 3px; }
.dtm-acct-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.dtm-renew { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dtm-slate); white-space: nowrap; }
.dtm-renew .dtm-ico { width: 13px; height: 13px; stroke: var(--dtm-slate-2); }
.dtm-renew b { font-family: var(--f-mono); font-weight: 600; color: var(--dtm-navy); }
.dtm-renew.hot b { color: var(--dtm-red-ink); }
.dtm-prog { display: flex; align-items: center; gap: 9px; }
.dtm-prog-track { width: 84px; height: 5px; border-radius: 99px; background: var(--dtm-cream-2); overflow: hidden; }
.dtm-prog-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--dtm-gold), var(--dtm-gold-ink)); transition: width .35s cubic-bezier(.4,0,.2,1); }
.dtm-acct.cleared .dtm-prog-fill { background: var(--dtm-sage); }
.dtm-prog-n { font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: var(--dtm-slate); min-width: 26px; text-align: right; }
.dtm-acct-chev {
  margin-left: 2px; color: var(--dtm-slate-2); transition: transform .25s, background .15s, color .15s; flex-shrink: 0;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
}
.dtm-acct-chev:hover { background: rgba(15,27,60,.08); color: var(--dtm-navy); }
.dtm-acct.collapsed .dtm-acct-chev { transform: rotate(-90deg); }
.dtm-acct.collapsed .dtm-steps { display: none; }

.dtm-steps { border-top: 1px solid var(--dtm-line); }
.dtm-acct.cleared .dtm-steps { display: none; }
.dtm-step { display: flex; align-items: center; gap: 13px; padding: 11px 20px 11px 18px; border-bottom: 1px solid var(--dtm-line); transition: background .15s; }
.dtm-step:last-child { border-bottom: none; }
.dtm-step:hover { background: var(--dtm-fill); }
.dtm-step.hiddench { display: none; }
.dtm-chk { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--dtm-line-2); flex-shrink: 0; display: grid; place-items: center; transition: all .18s; background: var(--dtm-card); cursor: pointer; padding: 0; }
.dtm-chk:hover { border-color: var(--dtm-gold); }
.dtm-chk-static { cursor: default; }
.dtm-chk-static:hover { border-color: var(--dtm-line-2); }
.dtm-chk .dtm-ico { width: 13px; height: 13px; stroke: #fff; stroke-width: 2.8; opacity: 0; transform: scale(.5); transition: all .18s; }
.dtm-step.done .dtm-chk { background: var(--dtm-sage); border-color: var(--dtm-sage); }
.dtm-step.done .dtm-chk .dtm-ico { opacity: 1; transform: scale(1); }
.dtm-chnl { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.dtm-chnl .dtm-ico { width: 17px; height: 17px; stroke-width: 1.8; }
.dtm-chnl.Email, .dtm-chnl.LinkedIn { background: var(--dtm-sky-soft); } .dtm-chnl.Email .dtm-ico, .dtm-chnl.LinkedIn .dtm-ico { stroke: var(--dtm-sky); }
.dtm-chnl.Call { background: var(--dtm-sage-soft); } .dtm-chnl.Call .dtm-ico { stroke: var(--dtm-sage); }
.dtm-chnl.Mail, .dtm-chnl.Other { background: var(--dtm-amber-soft); } .dtm-chnl.Mail .dtm-ico, .dtm-chnl.Other .dtm-ico { stroke: var(--dtm-amber); }
.dtm-chnl.Drop { background: var(--dtm-gold-soft); } .dtm-chnl.Drop .dtm-ico { stroke: var(--dtm-gold-ink); }
.dtm-step-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dtm-step-name { font-size: 14px; font-weight: 600; color: var(--dtm-navy); line-height: 1.2; }
.dtm-step-priority-ico { width: 12px; height: 12px; stroke: var(--dtm-gold); fill: var(--dtm-gold); stroke-width: 1; margin-right: 5px; vertical-align: -1px; }
.dtm-step-ch { font-size: 11.5px; color: var(--dtm-slate-2); margin-top: 2px; font-family: var(--f-mono); letter-spacing: .02em; }
.dtm-step.done .dtm-step-name { color: var(--dtm-slate-2); text-decoration: line-through; text-decoration-color: var(--dtm-line-2); }
.dtm-step.done .dtm-step-ch { opacity: .6; }
.dtm-step-tag { font-size: 10px; font-weight: 600; font-family: var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--dtm-gold-ink); background: var(--dtm-gold-soft); padding: 3px 8px; border-radius: 6px; flex-shrink: 0; }
.dtm-step-tag.overdue { color: var(--dtm-red-ink); background: var(--dtm-red-soft); }
.dtm-step.done .dtm-step-tag { display: none; }
.dtm-step-tag.noemail { color: var(--dtm-slate); background: var(--dtm-cream-2); }
.dtm-step-act {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 8px;
  border: 1px solid var(--dtm-line-2); background: var(--dtm-card); font-size: 12.5px; font-weight: 600; color: var(--dtm-navy);
  opacity: 0; transition: opacity .15s; flex-shrink: 0; font-family: inherit; cursor: pointer;
}
.dtm-step:hover .dtm-step-act { opacity: 1; }
.dtm-step-act .dtm-ico { width: 14px; height: 14px; }
.dtm-step.done .dtm-step-act { display: none; }
/* One-tap overdue defer — same reveal-on-hover treatment as Log, amber to
   read as "reschedule" rather than "complete". */
.dtm-step-defer {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 8px;
  border: 1px solid var(--dtm-gold); background: var(--dtm-gold-soft); font-size: 12.5px; font-weight: 600; color: var(--dtm-gold-ink);
  opacity: 0; transition: opacity .15s; flex-shrink: 0; font-family: inherit; cursor: pointer;
}
.dtm-step:hover .dtm-step-defer { opacity: 1; }
.dtm-step-defer .dtm-ico { width: 14px; height: 14px; }
.dtm-step-defer:disabled { opacity: .5; cursor: default; }

.dtm-acct-clear { display: none; align-items: center; gap: 9px; padding: 13px 20px; font-size: 13px; color: var(--dtm-sage); font-weight: 600; }
.dtm-acct-clear .dtm-ico { width: 16px; height: 16px; stroke: var(--dtm-sage); stroke-width: 2.2; }
.dtm-acct.cleared .dtm-acct-clear { display: flex; }

.dtm-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
.dtm-panel { background: var(--dtm-card); border: 1px solid var(--dtm-line); border-radius: 16px; padding: 18px; box-shadow: 0 1px 3px rgba(15,27,60,.04); }
.dtm-panel-t { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dtm-slate-2); margin-bottom: 15px; }
.dtm-ring-wrap { display: flex; align-items: center; gap: 16px; }
.dtm-ring { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.dtm-ring svg { transform: rotate(-90deg); width: 84px; height: 84px; }
.dtm-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dtm-ring-center .v { font-family: var(--dtm-f-serif); font-size: 24px; font-weight: 700; line-height: 1; color: var(--dtm-navy); }
.dtm-ring-center .k { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dtm-slate-2); margin-top: 3px; }
.dtm-ring-legend { flex: 1; min-width: 0; }
.dtm-ring-legend .big { font-size: 13.5px; font-weight: 600; color: var(--dtm-navy); }
.dtm-ring-legend .small { font-size: 12px; color: var(--dtm-slate); margin-top: 4px; line-height: 1.4; }
.dtm-chbreak { display: flex; flex-direction: column; gap: 2px; }
.dtm-chrow { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--dtm-line); }
.dtm-chrow:last-child { border-bottom: none; }
.dtm-chrow .dtm-chnl { width: 30px; height: 30px; border-radius: 9px; }
.dtm-chrow .dtm-chnl .dtm-ico { width: 15px; height: 15px; }
.dtm-chrow-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--dtm-navy); }
.dtm-chrow-n { font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--dtm-navy); }
.dtm-chrow-n .done { color: var(--dtm-sage); }
.dtm-chrow-n .sep { color: var(--dtm-slate-2); }
.dtm-hint { font-size: 12px; color: var(--dtm-slate); line-height: 1.5; margin-top: 2px; }
.dtm-hint b { color: var(--dtm-navy); }
.dtm-nearlist { display: flex; flex-direction: column; gap: 2px; }
.dtm-nearrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--dtm-line); cursor: pointer; background: none; border-left: none; border-right: none; border-top: none; width: 100%; text-align: left; font: inherit; }
.dtm-nearrow:last-child { border-bottom: none; }
.dtm-nearrow:hover .dtm-nearrow-name { color: var(--dtm-gold); }
.dtm-nearrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dtm-nearrow-name { display: block; font-size: 13px; font-weight: 500; color: var(--dtm-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtm-nearrow-sub { display: block; font-size: 11px; color: var(--dtm-slate-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtm-nearrow-dist { font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--dtm-slate); flex-shrink: 0; }
.dtm-near-empty { font-size: 12px; color: var(--dtm-slate); line-height: 1.5; }

/* Weekly snapshot (Simple Mode "This week") — day-load bar chart + channel
   legend/filter + grouped task list. Design handoff: beyondpayroll (11).zip,
   2026-07-12 — recreated with the app's own tokens/icons rather than the
   handoff's Google Fonts/oklch palette (this app dropped Google Fonts once
   already; ADP corporate networks block fonts.googleapis.com). */
#sm-week-modal .cw-head-mark { background: var(--amber-soft); }
#sm-week-modal .cw-head-mark svg { stroke: var(--amber); }
#sm-week-modal .cw-content { padding: 0; display: flex; flex-direction: column; overflow: visible; }
.wk-chart { padding: 14px 22px 18px; }
.wk-chart-top { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px 10px; }
.wk-chart-lede { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted-2); }
.wk-tot { font-size: 12.5px; color: var(--muted); }
.wk-tot b { font-family: var(--f-mono); color: var(--ink); font-weight: 600; }
.wk-tot .wk-od { color: var(--red-deep); font-weight: 600; }
.wk-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.wk-day {
  position: relative; border: 1px solid transparent; border-radius: 13px; padding: 10px 6px 9px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; transition: background .15s, border-color .15s, transform .12s;
  background: none; font: inherit; width: 100%;
}
.wk-day:hover { background: var(--paper-2); transform: translateY(-2px); }
.wk-day.today { background: var(--amber-soft); }
.wk-day.sel { border-color: var(--ink); background: var(--paper-2); }
.wk-day.sel.today { border-color: var(--amber); background: var(--amber-soft); }
.wk-day-n { font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: var(--muted); min-height: 15px; margin-bottom: 6px; }
.wk-day.today .wk-day-n, .wk-day .wk-day-n.has { color: var(--ink); }
.wk-day-n.zero { color: var(--muted-2); opacity: .5; }
.wk-bar { width: 100%; height: 78px; display: flex; flex-direction: column-reverse; gap: 4px; justify-content: flex-start; align-items: stretch; padding: 0 3px; }
.wk-seg { height: 15px; border-radius: 5px; transform-origin: bottom; transition: transform .5s cubic-bezier(.34,1.2,.5,1); }
.wk-seg.Email { background: var(--wkch-email); }
.wk-seg.Call { background: var(--wkch-call); }
.wk-seg.LinkedIn { background: var(--wkch-linkedin); }
.wk-seg.Drop { background: var(--wkch-drop); }
.wk-seg.Mail { background: var(--wkch-mail); }
.wk-seg.Other { background: var(--wkch-other); }
.wk-seg.Event { background: var(--wkch-event); }
.wk-seg.over { box-shadow: inset 0 0 0 2px var(--red), 0 0 0 2px var(--red-soft); }
.wk-bar-empty { align-self: center; margin-top: auto; width: 14px; height: 3px; border-radius: 2px; background: var(--hair-2); }
.wk-axis { width: 100%; height: 1px; background: var(--hair); margin: 8px 0; }
.wk-day-wd { font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
.wk-day.today .wk-day-wd { color: var(--amber); }
.wk-day-d { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.1; margin-top: 2px; }
.wk-day.today .wk-day-d { color: var(--amber); }
.wk-day-dot { position: absolute; top: 8px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }

.wk-legend { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 22px 16px; }
.wk-lg {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--hair);
  background: var(--paper); cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--ink); transition: all .13s; user-select: none;
}
.wk-lg:hover { background: var(--paper-2); }
.wk-lg .sw { width: 9px; height: 9px; border-radius: 3px; }
.wk-lg .lg-n { font-family: var(--f-mono); font-size: 11px; color: var(--muted-2); font-weight: 600; }
.wk-lg.Email .sw { background: var(--wkch-email); }
.wk-lg.Call .sw { background: var(--wkch-call); }
.wk-lg.LinkedIn .sw { background: var(--wkch-linkedin); }
.wk-lg.Drop .sw { background: var(--wkch-drop); }
.wk-lg.Mail .sw { background: var(--wkch-mail); }
.wk-lg.Other .sw { background: var(--wkch-other); }
.wk-lg.Event .sw { background: var(--wkch-event); }
.wk-lg.off { opacity: .42; background: var(--paper-2); }
.wk-lg.off .sw { background: var(--muted-2) !important; }

.wk-list { border-top: 1px solid var(--hair); max-height: 340px; overflow: auto; }
.wk-list::-webkit-scrollbar { width: 9px; }
.wk-list::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 9px; border: 2px solid var(--paper); }
.wk-grp-hd { display: flex; align-items: center; justify-content: space-between; padding: 15px 22px 9px; position: sticky; top: 0; background: linear-gradient(var(--paper) 78%, rgba(255,255,255,0)); z-index: 2; }
.wk-gl { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wk-gl .wk-gday { color: var(--muted-2); }
.wk-gn { font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.wk-task {
  display: flex; align-items: center; gap: 14px; padding: 11px 22px; border-top: 1px solid var(--hair); transition: background .13s;
  cursor: pointer; background: none; width: 100%; text-align: left; font: inherit;
}
.wk-daygrp .wk-task:first-of-type { border-top: 1px solid var(--hair); }
.wk-task:hover { background: var(--paper-2); }
.wk-tk-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.wk-tk-ico .wk-ico { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.wk-tk-ico.Email { background: var(--wkch-email-soft); color: var(--wkch-email); }
.wk-tk-ico.Call { background: var(--wkch-call-soft); color: var(--wkch-call); }
.wk-tk-ico.LinkedIn { background: var(--wkch-linkedin-soft); color: var(--wkch-linkedin); }
.wk-tk-ico.Drop { background: var(--wkch-drop-soft); color: var(--wkch-drop); }
.wk-tk-ico.Mail { background: var(--wkch-mail-soft); color: var(--wkch-mail); }
.wk-tk-ico.Other { background: var(--wkch-other-soft); color: var(--wkch-other); }
.wk-tk-ico.Event { background: var(--wkch-event-soft); color: var(--wkch-event); }
.wk-tk-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wk-tk-co { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-tk-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.wk-tk-right { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.wk-badge { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--red-deep); background: var(--red-soft); padding: 5px 9px; border-radius: 7px; }
.wk-tk-view { font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; color: var(--muted-2); opacity: 0; transition: opacity .13s; }
.wk-task:hover .wk-tk-view { opacity: 1; color: var(--red-deep); }
.wk-empty { padding: 40px 22px 46px; text-align: center; color: var(--muted); font-size: 14px; }
.wk-empty svg { width: 30px; height: 30px; margin: 0 auto 12px; display: block; }

/* ── Month view — desktop-only calendar grid (see #dtm-month-btn's
   820px media-query hide below); reuses .wk-legend/.wk-lg and .wk-list/
   .wk-task verbatim for the filter chips and the per-day detail list, so
   only the grid itself needs new rules. ── */
.mo-nav { display: flex; align-items: center; gap: 10px; padding: 4px 22px 14px; }
.mo-navbtn { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--hair-2); background: var(--paper); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: background .12s, color .12s; }
.mo-navbtn:hover { background: var(--paper-2); color: var(--ink); }
.mo-navbtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.mo-navlabel { font-family: var(--f-serif); font-size: 17px; font-weight: 700; letter-spacing: -.01em; min-width: 150px; }
.mo-today-btn { margin-left: auto; height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--hair-2); background: var(--paper); color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.mo-today-btn:hover { background: var(--paper-2); color: var(--ink); }
.mo-grid-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 22px; margin-bottom: 4px; }
.mo-grid-wd span { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); text-align: center; }
.mo-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 22px 16px; }
.mo-cell { position: relative; min-height: 62px; border-radius: 10px; border: 1px solid transparent; padding: 6px 6px 7px; cursor: pointer; display: flex; flex-direction: column; transition: background .13s, border-color .13s; }
.mo-cell:hover { background: var(--paper-2); }
.mo-cell.muted { cursor: default; opacity: .35; }
.mo-cell.muted:hover { background: transparent; }
.mo-cell.today { background: var(--amber-soft); }
.mo-cell.sel { border-color: var(--ink); background: var(--paper-2); }
.mo-cell.sel.today { border-color: var(--amber); }
.mo-cell-n { font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.mo-cell.today .mo-cell-n { color: var(--amber); }
.mo-cell-dot { position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.mo-cell-swatches { margin-top: auto; display: flex; flex-wrap: wrap; gap: 3px; }
.mo-cell-sw { width: 6px; height: 6px; border-radius: 2px; }
.mo-cell-sw.Email { background: var(--wkch-email); } .mo-cell-sw.Call { background: var(--wkch-call); }
.mo-cell-sw.LinkedIn { background: var(--wkch-linkedin); } .mo-cell-sw.Drop { background: var(--wkch-drop); }
.mo-cell-sw.Mail { background: var(--wkch-mail); } .mo-cell-sw.Other { background: var(--wkch-other); }
.mo-cell-sw.Event { background: var(--wkch-event); }
.mo-cell-more { font-family: var(--f-mono); font-size: 8.5px; color: var(--muted-2); }
.mo-list-wrap { border-top: 1px solid var(--hair); }
.mo-list-label { padding: 14px 22px 8px; font-size: 12.5px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .wk-seg { transition: none !important; transform: none !important; } }
@media (max-width: 560px) { .wk-days { gap: 4px; } .wk-chart, .wk-legend { padding-left: 16px; padding-right: 16px; } .wk-grp-hd, .wk-task { padding-left: 16px; padding-right: 16px; } }

@media (max-width: 820px) {
  .dtm-grid { grid-template-columns: minmax(0, 1fr); }
  .dtm-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .dtm-panel { flex: 1; min-width: 220px; }
  .dtm-head { flex-direction: column; align-items: flex-start; }
  .dtm-head-r { flex-shrink: 1; width: 100%; }
  .dtm-seg { flex-shrink: 1; min-width: 0; }
  /* Month view is desktop-only, per AJ: mobile/Simple Mode stays capped at
     the week lookahead — #dtm-month-btn is never rendered in Simple Mode's
     own header anyway, this just also hides it if the desktop dashboard
     itself narrows below the mobile breakpoint. */
  #dtm-month-btn { display: none !important; }
}
@media (max-width: 480px) {
  .dtm-acct-hd { gap: 10px; padding: 14px; }
  .dtm-prog-track { width: 44px; }
  .dtm-acct-co { font-size: 15px; }
  .dtm-acct-who { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* ═══════════════════════════════════════════
   Simple Mode — one task at a time, huge tap targets, deliberately its
   own small visual language (plain sans-serif, high contrast, no dense
   editorial styling) since this is built for someone who just needs
   "what do I do next", not the rest of the app's chrome.
   ═══════════════════════════════════════════ */
.sm-stage {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: linear-gradient(180deg, #FBFBF9 0%, #F2F1EC 100%);
  font-family: var(--f-ui);
}
/* justify-content:flex-start + margin:auto 0 on .sm-view (below) is the
   "safe centering" trick — content still centers vertically when it fits,
   but as more fields get added to the card and it grows taller than the
   viewport, it scrolls from the top instead of clipping/overlapping the
   device chrome (plain justify-content:center clips unreachable content
   above the fold once it overflows a scrollable container). */
.sm-stage.open { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sm-exit {
  position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.06); border: none; cursor: pointer; color: var(--ink-3);
}
.sm-exit:hover { background: rgba(0,0,0,.1); }
.sm-exit svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.sm-exit.sm-exit-text { width: auto; height: 38px; border-radius: 19px; padding: 0 16px; font: inherit; font-size: 13.5px; font-weight: 700; }
.sm-nearby-btn {
  position: absolute; top: 18px; left: 18px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.06); border: none; cursor: pointer; color: var(--ink-3);
}
.sm-nearby-btn:hover { background: rgba(0,0,0,.1); }
.sm-nearby-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* Simple Mode itself is z:200 — the nearby list needs to sit above it, and
   the quick-view (opened from either the dashboard or this list) needs to
   sit above that, regardless of which context opened it. */
#sm-nearby-modal { z-index: 250; }
#sm-week-modal { z-index: 250; }
#nearby-quickview { z-index: 260; }
/* Opened from Timeline (z:100), Simple Mode's Drop action (z:200), or the
   quick-view above (z:260) — needs to sit above all three. */
#directions-picker-modal { z-index: 270; }
/* Also opened from the quick-view's "Add task" (z:260) — same tier as
   directions-picker-modal above, for the same reason. */
#task-wizard { z-index: 270; }

.sm-view { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 420px; margin: auto 0; }
.sm-progress { font-family: var(--f-mono); font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: .04em; margin-bottom: 18px; }

.sm-card {
  width: 100%; background: var(--paper); border-radius: 22px; padding: 32px 26px; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.35); margin-bottom: 26px;
}
.sm-status {
  display: inline-flex; align-items: center; font-family: var(--f-mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.sm-status.overdue { background: var(--red-soft); color: var(--red-deep); }
.sm-status.today { background: var(--amber-soft); color: var(--amber); }
.sm-company { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; }
.sm-who { font-size: 16px; color: var(--muted); margin-top: 8px; }
.sm-touch { font-size: 17px; font-weight: 600; color: var(--ink-2); margin-top: 20px; }
.sm-touch-priority-ico { width: 15px; height: 15px; stroke: var(--amber); fill: var(--amber); stroke-width: 1; margin-right: 6px; vertical-align: -2px; }
.sm-touch-assignee { font-size: 14px; color: var(--muted); font-weight: 600; }

/* Client info card — renewal date, carrier, and last-touch context, shown
   only for Call and Drop (the two channels where you're about to be live
   with the client and need this at a glance, not buried in the full app). */
.sm-infocard { width: 100%; background: var(--paper-3); border-radius: 16px; padding: 14px 18px; margin-bottom: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
/* flex-wrap + min-width:0 + overflow-wrap:anywhere let a long title or an
   unbroken string like an email address drop to its own line (or break
   mid-word as a last resort) instead of overflowing past the card's right
   edge — with flex-shrink:0 on the label this used to force the value off
   the edge of the screen on narrow viewports. */
.sm-infocard-row { display: flex; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 6px 0; flex-wrap: wrap; }
.sm-infocard-row + .sm-infocard-row { border-top: 1px solid var(--hair); }
.sm-infocard-label { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sm-infocard-value { font-size: 14px; font-weight: 600; color: var(--ink-2); text-align: right; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sm-infocard-tel { color: var(--red); text-decoration: none; }
.sm-infocard-tel:active { color: var(--red-deep); }

/* Collapsible section within the info card (currently "Other contacts") —
   keeps the card short by default and lets it grow on tap rather than
   always rendering every row, since this is the one part of the card that
   scales with how much data an account has on file. */
.sm-infocard-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 0; cursor: pointer; user-select: none;
}
.sm-infocard-chev { width: 13px; height: 13px; stroke: var(--muted); fill: none; stroke-width: 2.2; flex-shrink: 0; transition: transform .15s; }
.sm-infocard-toggle.expanded .sm-infocard-chev { transform: rotate(180deg); }

.sm-notes-input {
  width: 100%; min-height: 52px; border-radius: 14px; border: 1.5px solid var(--hair-2); padding: 12px 14px;
  font: inherit; font-size: 14.5px; color: var(--ink-2); margin-bottom: 10px; resize: vertical; background: var(--paper-2);
}
.sm-navrow { display: flex; gap: 8px; width: 100%; margin-bottom: 14px; }
.sm-navbtn {
  flex: 1; height: 44px; border-radius: 12px; border: 1.5px solid var(--hair-2); cursor: pointer;
  background: var(--paper); color: var(--ink-2); font: inherit; font-size: 14.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .1s;
}
.sm-navbtn:active { transform: scale(.96); }
.sm-navbtn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.sm-navbtn[disabled] { opacity: .4; cursor: default; }
.sm-navbtn#sm-save-btn.sm-saved { border-color: var(--sage); color: var(--sage); }

.sm-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-bottom: 14px; }
.sm-action-btn {
  width: 100%; height: 58px; border-radius: 16px; border: none; cursor: pointer; text-decoration: none;
  background: var(--paper); border: 2px solid var(--sky); color: var(--sky); font: inherit; font-size: 17px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform .1s;
}
.sm-action-btn:active { transform: scale(.97); }
.sm-action-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.sm-action-btn[disabled] { opacity: .55; cursor: default; }
.sm-action-btn.sm-action-linkedin { border-color: #0A66C2; color: #0A66C2; }
.sm-action-btn.sm-action-call { border-color: var(--sage); color: var(--sage); }
.sm-action-btn.sm-action-directions { border-color: var(--amber); color: var(--amber); }

.sm-defer-btn {
  width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px dashed var(--hair-2); cursor: pointer;
  background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px;
}
.sm-defer-btn:active { transform: scale(.98); }
.sm-defer-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.sm-defer-btn[disabled] { opacity: .5; cursor: default; }

.sm-done-btn {
  width: 100%; height: 76px; border-radius: 20px; border: none; cursor: pointer;
  background: var(--sage); color: #fff; font: inherit; font-size: 21px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: 0 14px 32px rgba(63,143,95,.35); transition: transform .1s;
}
.sm-done-btn:active { transform: scale(.97); }
.sm-done-btn svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 3; }

.sm-celebrate { font-size: 64px; line-height: 1; margin-bottom: 8px; }
.sm-alldone { font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.sm-allsub { font-size: 15px; color: var(--muted); margin-top: 8px; margin-bottom: 28px; }
.sm-close-btn {
  height: 52px; padding: 0 32px; border-radius: 14px; border: none; cursor: pointer;
  background: var(--sage); color: #fff; font: inherit; font-size: 16px; font-weight: 700;
}

.sm-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sm-confetti-piece {
  position: absolute; top: -20px; width: 9px; height: 14px; opacity: .9;
  animation: sm-confetti-fall linear forwards;
}
@keyframes sm-confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: .95; }
  100% { transform: translateY(110vh) rotate(600deg); opacity: .4; }
}
@media (prefers-reduced-motion: reduce) { .sm-confetti-piece { animation: none; display: none; } }

@media (max-width: 480px) {
  .sm-card { padding: 26px 20px; border-radius: 18px; }
  .sm-company { font-size: 25px; }
  .sm-done-btn { height: 68px; font-size: 19px; }
}

/* ── Floating calling card — pops up on dial, independent of the wizard ── */
.cc-card {
  position: fixed; right: 20px; bottom: 20px; z-index: 300;
  width: 300px; padding: 16px; border-radius: 16px;
  background: var(--paper); border: 1px solid var(--hair);
  box-shadow: 0 18px 40px rgba(15,17,22,.22);
  animation: cc-pop-in .18s ease-out;
}
@keyframes cc-pop-in {
  0% { opacity: 0; transform: translateY(12px) scale(.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.cc-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.cc-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--sage);
  animation: cc-pulse 1.4s ease-in-out infinite;
}
@keyframes cc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cc-head-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cc-close {
  margin-left: auto; width: 22px; height: 22px; border: none; background: none; cursor: pointer;
  color: var(--muted); display: flex; align-items: center; justify-content: center; border-radius: 6px;
}
.cc-close:hover { background: var(--paper-3); }
.cc-close svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.cc-company { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.cc-contact { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.cc-phone { font-size: 12.5px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.cc-step { font-size: 11.5px; color: var(--sage); font-weight: 600; margin-top: 6px; }
.cc-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cc-notes { margin-top: 8px; font-size: 12px; color: var(--ink); line-height: 1.5; }
.cc-notes:empty { display: none; }
.cc-foot { margin-top: 12px; }
.cc-foot .bp-btn { width: 100%; justify-content: center; }

/* ─────────────────────────────────────────────
   Team Dashboard (BDR leaderboard) — rollup strip + sortable board.
   Design handoff 2026-07-12 (Claude Designer). Reuses the app's existing
   font tokens (--f-ui/--f-mono/--f-serif) rather than the handoff's Google
   Fonts import — this app deliberately never loads webfonts over the
   network (ADP corporate networks block fonts.googleapis.com).
   ───────────────────────────────────────────── */
.tdb-rollup { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
.tdb-rt { background: var(--paper); border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px; }
.tdb-rt-k { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); display: flex; align-items: center; gap: 5px; }
.tdb-rt-k svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.tdb-rt-v { font-family: var(--f-serif); font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1; margin-top: 10px; }
.tdb-rt-s { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.tdb-rt.alert { background: var(--red-soft); border-color: #ecc; }
.tdb-rt.alert .tdb-rt-v, .tdb-rt.alert .tdb-rt-k { color: var(--red-deep); }
.tdb-rt.good .tdb-rt-v { color: var(--sage); }

.tdb-board { background: var(--paper); border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
.tdb-rows { max-height: 460px; overflow: auto; }
.tdb-cols { --tdb-cols: 2fr 1.4fr 1.2fr 1.5fr 1fr; }
.tdb-hd { display: grid; grid-template-columns: var(--tdb-cols); align-items: center; gap: 14px; padding: 11px 18px; border-bottom: 1px solid var(--hair); background: var(--paper-2); }
.tdb-col-h { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; white-space: nowrap; }
.tdb-col-h:hover { color: var(--ink); }
.tdb-col-h.sorted { color: var(--ink); }
.tdb-col-h .tdb-cae { width: 10px; height: 10px; opacity: 0; transition: opacity .12s; stroke: currentColor; fill: none; stroke-width: 2; }
.tdb-col-h.sorted .tdb-cae { opacity: 1; }
.tdb-col-h.num { justify-content: flex-end; }

.tdb-row { display: grid; grid-template-columns: var(--tdb-cols); align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--hair); transition: background .12s; }
.tdb-row:last-child { border-bottom: none; }
.tdb-row:hover { background: var(--paper-2); }
.tdb-row.mine { background: linear-gradient(90deg, var(--gold-soft) 0%, transparent 45%); }

.tdb-bdr { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tdb-rank { font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--muted-2); width: 14px; text-align: center; flex-shrink: 0; }
.tdb-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: #fff; }
.tdb-av.ws-dot-0 { background: var(--red); }
.tdb-av.ws-dot-1 { background: var(--sage); }
.tdb-av.ws-dot-2 { background: var(--sky); }
.tdb-av.ws-dot-3 { background: var(--amber); }
.tdb-av.ws-dot-4 { background: var(--violet); }
.tdb-av.ws-dot-5 { background: var(--teal); }
.tdb-av.mine { background: var(--gold); }
.tdb-idy { min-width: 0; }
.tdb-name { font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; line-height: 1.15; display: flex; align-items: center; gap: 7px; }
.tdb-you { font-family: var(--f-mono); font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-ink); background: var(--gold-soft); padding: 2px 6px; border-radius: 5px; }
.tdb-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; font-family: var(--f-mono); }

.tdb-mix-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.tdb-mix-active { font-family: var(--f-mono); font-size: 16px; font-weight: 700; color: var(--sage); line-height: 1; }
.tdb-mix-lbl, .tdb-pipe-lbl, .tdb-act-lbl { font-size: 11px; color: var(--muted); }
.tdb-mix-bar { height: 7px; border-radius: 4px; background: var(--paper-3); overflow: hidden; display: flex; }
.tdb-mix-fill { height: 100%; background: var(--sage); }
.tdb-mix-watch { height: 100%; background: var(--hair-2); flex: 1; }
.tdb-mix-sub, .tdb-act-sub { font-family: var(--f-mono); font-size: 10.5px; color: var(--muted-2); margin-top: 5px; }

.tdb-pipe-main { display: flex; align-items: baseline; gap: 5px; }
.tdb-pipe-n { font-family: var(--f-mono); font-size: 16px; font-weight: 700; color: var(--ink-2); line-height: 1; }
.tdb-pipe-od { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; }
.tdb-pipe-od svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }
.tdb-pipe-od.has { color: var(--red-deep); background: var(--red-soft); }
.tdb-pipe-od.clear { color: var(--sage); background: var(--sage-soft); }

.tdb-act-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.tdb-act-n { font-family: var(--f-mono); font-size: 16px; font-weight: 700; color: var(--ink-2); line-height: 1; }
.tdb-act-track { height: 7px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.tdb-act-fill { height: 100%; border-radius: 4px; background: var(--sky); }

.tdb-enr { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.tdb-enr-pct { font-family: var(--f-mono); font-size: 14px; font-weight: 700; color: var(--ink-2); line-height: 1; }
.tdb-enr-lbl { font-size: 10.5px; color: var(--muted-2); margin-top: 3px; }
.tdb-ring svg { transform: rotate(-90deg); }

.tdb-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; background: var(--paper-2); border-top: 1px solid var(--hair); font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.tdb-foot b { color: var(--ink-2); font-family: var(--f-mono); font-weight: 600; }
.tdb-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.tdb-lm { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.tdb-lm .tdb-sw { width: 9px; height: 9px; border-radius: 3px; }

@media (max-width: 760px) {
  .tdb-rollup { grid-template-columns: repeat(2, 1fr); }
  .tdb-cols { --tdb-cols: 1.6fr 1.3fr 1.1fr; }
  .tdb-hd .tdb-col-h:nth-child(4), .tdb-hd .tdb-col-h:nth-child(5), .tdb-row .tdb-act, .tdb-row .tdb-enr { display: none; }
}

/* High-priority accounts panel */
.tdb-hp-section { margin-bottom: 20px; }
.tdb-hp-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.tdb-hp-list { display: flex; flex-direction: column; gap: 6px; }
.tdb-hp-row { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--hair); border-radius: 10px; padding: 9px 12px; cursor: pointer; transition: background .12s; }
.tdb-hp-row:hover { background: var(--paper-2); }
.tdb-hp-main { min-width: 0; flex: 1; }
.tdb-hp-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tdb-hp-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.tdb-hp-due { font-family: var(--f-mono); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; }
.tdb-hp-due.over { color: var(--red-deep); background: var(--red-soft); }
.tdb-hp-due.soon { color: var(--amber); background: var(--amber-soft); }
.tdb-hp-due.ok { color: var(--muted); background: var(--paper-3); }

/* ═══════════════════════════════════════════
   Mobile bucket tab bar — Riley's two-tab home (nearby_only mobile view
   mode only). Fixed to the bottom of the viewport, above every stage
   including the email builder, so she can flip between HRO/Tech no matter
   what's open on top of the nearby-accounts list underneath.
   ═══════════════════════════════════════════ */
.mb-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 280;
  display: none; background: #16181D; border-top: 1px solid rgba(255,255,255,.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mb-tabbar.show { display: flex; }
.mb-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 10px 0 8px; background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.5); font-family: var(--f-ui); font-size: 12px; font-weight: 700; letter-spacing: .02em;
  transition: color .12s;
}
.mb-tab svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.mb-tab.active { color: #fff; }
body.nearby-tabs-active .cw-stage { padding-bottom: 78px; }

/* ═══════════════════════════════════════════
   Riley's map-based Nearby Accounts (design handoff 2026-07-17, "Nearby
   Accounts v3"; restyled 2026-07-18 for the Street Slay rebrand — Leaflet +
   CARTO Voyager tiles, warm/light Apple-Maps-style look, per the
   "Nearby Accounts StreetSlay.html" handoff). Lives inside #sm-nearby-modal
   alongside the classic #sm-nearlist list; body.nearby-tabs-active
   (nearbyOnlyMode) swaps which one shows, so AJ's own desktop Simple Mode
   "Nearby" button keeps the plain list untouched. Reuses the --dtm-* cream/
   navy palette already established for this app's redesigned screens
   (.cw-modal above) instead of a second token set — only the proximity
   colors below are new, since nothing else in this app models distance
   tiers. #sm-nearby-modal is itself IS her full mobile screen when
   nearbyOnlyMode (see boot()/openSimpleMode()'s auto-open), so it goes
   edge-to-edge here instead of the centered card every other .cw-modal is.
   The .mb-tabbar (HRO/Tech) sits fixed above this at z-index 280 — kept
   exactly as-is per AJ (2026-07-18): the StreetSlay handoff relabels these
   Routes/Accounts/Intel, but the real bucket-filter tabs stay HRO/Tech.
   The handoff's own Traffic layer + Community/Team Intel layer + Add-note
   flow are deliberately NOT built here — explicitly skipped per AJ, both
   being real new-scope features (a live-traffic provider integration and a
   crowdsourced datastore) rather than a visual reskin. Since
   #sm-nearby-modal { padding: 0 } below cancels the generic 78px reservation
   above, .rn-list carries its own bottom padding instead so the last row(s)
   never sit underneath the tab bar.
   ═══════════════════════════════════════════ */
:root {
  /* Matches the brand's own proximity scale exactly: near/mid/far = teal/
     orange/sand — see --sage/--red/(new) sand note in the base :root above. */
  --rn-near: #0E7C6B; --rn-mid: #E4572E; --rn-far: #8A8578;
}
body.nearby-tabs-active #sm-nearby-modal { padding: 0; }
body.nearby-tabs-active #sm-nearby-modal .cw-head { display: none; }
body.nearby-tabs-active #sm-nearby-modal .cw-modal {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  border-radius: 0; border: none;
}
body.nearby-tabs-active #sm-nearby-modal .cw-content {
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
body.nearby-tabs-active #sm-nearlist { display: none; }
.rn-view {
  /* Field map keeps the LIGHT palette even in dark mode: it's a Leaflet map
     (light tiles) with light glass chrome, and dark chrome over light tiles
     reads worse than leaving it. Re-declare --dtm-* to their original light
     values, scoped to the map subtree only. */
  --dtm-cream: #F4F1E8; --dtm-cream-2: #EBE6DA; --dtm-card: #FFFFFF;
  --dtm-navy: #1B1B1F; --dtm-navy-2: #2A2A30; --dtm-navy-3: #43423C;
  --dtm-slate: #77726A; --dtm-slate-2: #A9A395;
  --dtm-line: rgba(75,68,50,.14); --dtm-line-2: rgba(75,68,50,.20); --dtm-fill: rgba(120,113,95,.08);
  --dtm-red: #E4572E; --dtm-red-ink: #B23D1C; --dtm-red-soft: #FBE7DF;
  --dtm-gold: #C98A1E; --dtm-gold-ink: #8A6015; --dtm-gold-soft: #F6ECD3;
  --dtm-sage: #0E7C6B; --dtm-sage-soft: #E3F0ED;
  --dtm-sky: #6B5DD3; --dtm-sky-soft: #EAE7F7;
  --dtm-amber: #C98A1E; --dtm-amber-soft: #F6ECD3;
  display: none; flex: 1; min-height: 0; flex-direction: column; background: var(--dtm-cream); position: relative; /* anchors the .rn-compose slide-up sheet */ }
body.nearby-tabs-active .rn-view { display: flex; }

.rn-mapwrap { position: relative; flex: 0 0 auto; height: clamp(220px, 40vh, 320px); }
.rn-map { position: absolute; inset: 0; background: #dfeaea; }
.rn-map .leaflet-container { font-family: var(--f-ui); }
.rn-scrim { position: absolute; top: 0; left: 0; right: 0; height: 110px; background: linear-gradient(var(--dtm-cream) 0%, rgba(244,241,232,.55) 55%, rgba(244,241,232,0) 100%); pointer-events: none; z-index: 500; }
.rn-close {
  position: absolute; top: 10px; right: 12px; z-index: 530;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--dtm-line-2, #E2DCCE);
  background: rgba(255,253,248,.94); color: var(--dtm-navy); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.rn-close svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.rn-top { position: absolute; top: 12px; left: 0; right: 52px; display: flex; align-items: center; gap: 9px; padding: 0 16px; z-index: 520; }
.rn-brandmark { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rn-brandmark svg { flex-shrink: 0; }
.rn-wm { font-family: var(--f-serif); font-weight: 800; font-size: 17px; letter-spacing: -.02em; line-height: 1; color: var(--dtm-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-wm-sl { color: var(--dtm-red); }
.rn-gps { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #fff; background: var(--dtm-sage); padding: 6px 11px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; box-shadow: 0 4px 14px rgba(14,124,107,.3); }
.rn-gps.rn-gps-off { background: var(--dtm-red); box-shadow: 0 4px 14px rgba(228,87,46,.3); }
.rn-gps-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: rnBeat 1.6s infinite; flex-shrink: 0; }
.rn-gps.rn-gps-off .rn-gps-dot { animation: none; }
@keyframes rnBeat { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 70% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

.rn-legend { position: absolute; left: 14px; bottom: 18px; z-index: 520; display: flex; gap: 7px; flex-direction: column; background: rgba(255,253,248,.94); border: 1px solid var(--dtm-line-2, #E2DCCE); border-radius: 13px; padding: 9px 11px; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.rn-legend-row { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--dtm-slate); font-weight: 600; }
.rn-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.rn-legend-near { background: var(--rn-near); }
.rn-legend-mid { background: var(--rn-mid); }
.rn-legend-far { background: var(--rn-far); }

.rn-mapbtns { position: absolute; right: 14px; bottom: 18px; z-index: 520; display: flex; flex-direction: column; gap: 8px; }
.rn-mapbtn { width: 40px; height: 40px; border-radius: 13px; border: 1px solid var(--dtm-line-2, #E2DCCE); background: rgba(255,253,248,.94); color: var(--dtm-navy); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.14); }
.rn-mapbtn:active { transform: scale(.94); }
.rn-mapbtn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.rn-mapbtn.rn-spinning svg { animation: rnSpin 0.9s linear infinite; }
@keyframes rnSpin { to { transform: rotate(360deg); } }

/* markers */
.rn-mk { background: none !important; border: none !important; }
.rn-mkb { width: 30px; height: 30px; border-radius: 50% 50% 50% 3px; transform: rotate(45deg); display: grid; place-items: center; border: 2.5px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.35); transition: .15s; }
.rn-mkb span { transform: rotate(-45deg); font-family: var(--f-mono); font-weight: 700; font-size: 12px; color: #fff; }
.rn-mk.rn-sel .rn-mkb { width: 38px; height: 38px; box-shadow: 0 0 0 4px rgba(14,124,107,.3), 0 6px 16px rgba(0,0,0,.4); }
.rn-mk.rn-sel .rn-mkb span { font-size: 14px; }
.rn-me { background: none !important; border: none !important; }
.rn-me-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--dtm-red); box-shadow: 0 0 0 6px rgba(228,87,46,.25); position: relative; }
.rn-me-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--dtm-red); animation: rnMePulse 1.8s infinite; }
@keyframes rnMePulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
.leaflet-tooltip.rn-mtip { background: var(--dtm-navy); border: none; border-radius: 11px; box-shadow: 0 10px 26px rgba(0,0,0,.35); font-family: var(--f-ui); font-weight: 700; font-size: 12.5px; color: #fff; padding: 6px 11px; }
.leaflet-tooltip.rn-mtip::before { border-top-color: var(--dtm-navy); }
.rn-mtip-mi { font-family: var(--f-mono); color: #FF9877; margin-left: 5px; }
.rn-map .leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,.7) !important; }

/* bottom sheet */
.rn-sheet { flex: 1 1 auto; min-height: 0; background: var(--dtm-cream); border-radius: 26px 26px 0 0; margin-top: -20px; position: relative; z-index: 550; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -10px 30px rgba(0,0,0,.18); border-top: 1px solid var(--dtm-line-2, #E2DCCE); }
.rn-grip { width: 40px; height: 5px; border-radius: 99px; background: #D8D2C4; margin: 9px auto 6px; flex: 0 0 auto; }
.rn-sheet-head { display: flex; align-items: baseline; gap: 9px; padding: 2px 18px 12px; flex: 0 0 auto; }
.rn-sheet-title { margin: 0; font-family: var(--f-serif); font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--dtm-navy); flex: 1; }
.rn-radius-chip { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--dtm-navy); border: 1px solid var(--dtm-line-2, #E2DCCE); border-radius: 999px; padding: 7px 12px; background: #FBF9F3; cursor: pointer; }
.rn-radius-chip svg { width: 12px; height: 12px; stroke: var(--dtm-sage); fill: none; stroke-width: 2.4; flex-shrink: 0; }
.rn-radius-chip span { font-family: var(--f-mono); color: var(--dtm-sage); }
.rn-seg { display: flex; background: #FBF9F3; border: 1px solid var(--dtm-line-2, #E2DCCE); border-radius: 999px; padding: 3px; gap: 2px; margin: 0 18px 10px; flex: 0 0 auto; width: max-content; }
.rn-seg-btn { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--dtm-slate); padding: 7px 15px; border-radius: 999px; cursor: pointer; transition: .15s; }
.rn-seg-btn.active { background: var(--dtm-sage); color: #fff; }

/* Search row — the list caps its paint at RN_LIST_CAP rows, so this is the
   only way to reach an account that isn't among the nearest few. Typing here
   deliberately ignores the radius chip and searches the whole book. */
.rn-search { position: relative; display: flex; align-items: center; margin: 0 18px 10px; flex: 0 0 auto; }
.rn-search svg { position: absolute; left: 11px; width: 15px; height: 15px; stroke: var(--dtm-slate); fill: none; stroke-width: 1.8; stroke-linecap: round; pointer-events: none; opacity: .75; }
.rn-search input {
  width: 100%; font: inherit; font-size: 13px; color: var(--dtm-ink, #1D2025);
  padding: 9px 30px 9px 33px; border: 1px solid var(--dtm-line-2, #E2DCCE);
  border-radius: 999px; background: #FBF9F3; -webkit-appearance: none; appearance: none;
}
.rn-search input:focus { outline: none; border-color: var(--dtm-sage); background: #fff; }
.rn-search input::-webkit-search-cancel-button { display: none; }
.rn-search-x { position: absolute; right: 4px; width: 26px; height: 26px; border: 0; background: none; cursor: pointer; font-size: 19px; line-height: 1; color: var(--dtm-slate); }
.rn-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 84px; }
.rn-list-empty { padding: 30px 16px; text-align: center; font-size: 13px; color: var(--dtm-slate); }
/* Overflow hint under the capped list. Sits above the list's own bottom
   padding, not inside the scroller, so it stays visible while scrolling. */
.rn-list-more { flex: 0 0 auto; padding: 8px 18px calc(10px + env(safe-area-inset-bottom, 0)); text-align: center; font-size: 11.5px; font-weight: 600; color: var(--dtm-slate); border-top: 1px solid var(--dtm-line-2, #E2DCCE); background: #FBF9F3; }
/* Not yet sorted into HRO/Tech from the desktop side — only shown on the All
   tab, where mixing triaged and untriaged accounts is the whole point. */
.rn-untriaged { display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; vertical-align: 2px; letter-spacing: .02em; color: var(--dtm-slate); background: var(--dtm-line-2, #E2DCCE); }
.rn-acct { border-radius: 18px; margin-bottom: 5px; transition: background .18s, box-shadow .18s, margin .22s; border: 1px solid transparent; }
.rn-acct + .rn-acct .rn-row { border-top: 1px solid var(--dtm-cream-2, #EBE6DA); }
.rn-acct.rn-sel { background: #fff; border-color: var(--dtm-line-2, #E2DCCE); box-shadow: 0 12px 30px rgba(27,27,31,.12); margin: 7px 0 13px; }
.rn-acct.rn-sel + .rn-acct .rn-row { border-top: 0; }
.rn-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 13px 12px; cursor: pointer; }
.rn-badge { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 700; font-size: 13px; color: #fff; }
.rn-info { min-width: 0; }
.rn-name-txt { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dtm-navy); }
.rn-addr { font-size: 12px; color: var(--dtm-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
/* Due-state chip next to the account name — the one cadence signal that
   matters from the road. Overdue = orange (act now), Due today = teal. */
.rn-due { display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; vertical-align: 2px; letter-spacing: .02em; }
.rn-due-overdue { color: #fff; background: var(--dtm-red); }
.rn-due-today { color: #fff; background: var(--dtm-sage); }

/* Apollo buying-intent chip — a "hot account" flag shown next to the company
   name across every account list on both surfaces (main platform: Due Today
   board, Last-touched, All-accounts, Bulk-actions; field tool: map list).
   Corroboration-gated (see intentChip() in app.js): the solid orange "🔥 Intent
   ✓" (.intent-chip-hot) fires only when the Bombora-sourced Apollo signal is
   backed by an independent signal (HR hiring / funding / leadership / event);
   an uncorroborated single-source hit shows as the muted outline "Intent?"
   (.intent-chip-soft) so it stays visible without masquerading as verified.
   Both stay distinct from the red overdue and teal due-today chips. */
.intent-chip { display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; vertical-align: 1px; letter-spacing: .02em; white-space: nowrap; }
.intent-chip-hot { color: var(--red-deep); background: var(--red-soft); border: 1px solid var(--red); }
.intent-chip-mid { color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-border); }
.intent-chip-soft { color: var(--muted); background: transparent; border: 1px dashed var(--muted-2); font-weight: 600; }
/* "⚡ <event>" — why Apollo's Territory Triggers workflow pulled this account
   in (new role, funding, rapid growth…). Teal to read as signal, not alarm. */
.trigger-chip { color: var(--sage); background: rgba(14,124,107,.10); border: 1px solid var(--sage); }
/* Benefit rating chip — low rating (weak plan) reads warm/urgent = opportunity. */
.benefit-chip { display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; white-space: nowrap; }
.benefit-chip-hot { color: var(--red-deep); background: var(--red-soft); border: 1px solid var(--red); }
.benefit-chip-mid { color: var(--amber); background: rgba(201,138,30,.12); border: 1px solid var(--amber); }
.benefit-chip-cool { color: var(--muted); background: var(--paper-2); border: 1px solid var(--muted-2); }
/* Health-plan funding-type chip (neutral — informational, not urgency). */
.funding-chip { display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; white-space: nowrap; color: var(--dtm-slate, var(--muted)); background: var(--paper-2); border: 1px solid var(--hair); }
/* Employee-count chip "👥 250" — account size, shown beside the intent tag on
   every list + the field map. Neutral filled slate so it reads as identity
   context, not a hot signal (which stay red/orange/amber). */
.emp-chip { display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; white-space: nowrap; color: var(--ink-3); background: var(--paper-3); border: 1px solid var(--muted-2); }
/* Small helper text under a wizard field. */
.cw-field-hint { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* ─── People search (flat contact list across accounts) ─── */
.ppl-count { font-size: 11px; color: var(--muted); margin: 10px 0 6px; }
.ppl-list { max-height: 52vh; overflow-y: auto; margin: 0 -4px; }
.ppl-row { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: 8px; cursor: pointer; }
.ppl-row:hover { background: var(--paper-2); }
.ppl-av { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--paper-3); color: var(--ink); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ppl-idy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ppl-name { font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppl-primary { margin-left: 7px; font-size: 9.5px; font-weight: 700; color: var(--sage); border: 1px solid var(--sage); border-radius: 999px; padding: 0 6px; vertical-align: 1px; }
.ppl-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.ppl-chev { width: 14px; height: 14px; stroke: var(--muted-2); fill: none; stroke-width: 2; flex-shrink: 0; }
.ppl-empty { text-align: center; color: var(--muted); padding: 24px 0; font-size: 13px; }

/* ─── API usage tracker (owner-only modal) ─── */
.usage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.usage-tile { border: 1px solid var(--hair); border-radius: 10px; padding: 12px 13px; background: var(--paper); }
.usage-tile-hd { display: flex; align-items: baseline; justify-content: space-between; }
.usage-tile-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.usage-tile-today { font-family: var(--f-mono); font-weight: 700; font-size: 20px; color: var(--ink); line-height: 1; }
.usage-tile-cap { font-family: var(--f-ui); font-weight: 600; font-size: 11px; color: var(--muted); }
.usage-bar { height: 6px; border-radius: 999px; background: var(--paper-2); margin: 9px 0 7px; overflow: hidden; }
.usage-bar-fill { display: block; height: 100%; background: var(--sage); border-radius: 999px; }
.usage-tile-meta { font-size: 11px; color: var(--muted); }
.usage-section-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 18px 0 7px; }
.usage-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.usage-tbl th { text-align: right; font-weight: 600; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--hair); }
.usage-tbl th:first-child { text-align: left; }
.usage-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--hair); color: var(--ink); }
.usage-tbl td.num { text-align: right; font-family: var(--f-mono); }
.usage-tbl td.num.zero { color: var(--muted-2); }
/* Field-view signal tags (renewal date + researched/noted intel) — a rep's
   at-a-glance "why this account matters" row. See fieldSignalsHtml(). */
.rn-sigline { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.rn-sig { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: var(--dtm-slate, var(--muted)); background: var(--paper-2); border: 1px solid var(--hair); white-space: nowrap; }
.rn-sig-hot { color: var(--red-deep); background: var(--red-soft); border-color: var(--red); font-weight: 700; }
/* All Accounts "hide from field rep" toggle when active (account is hidden). */
.ct-icon-btn.aa-hidden-on { color: var(--red-deep); background: var(--red-soft); border-color: var(--red); }

/* Tier-1 citation badge for AI-sourced funding/events items (see sourceBadge()
   in app.js). ✓ sourced = the worker's link probe resolved; ⚠ unverified = the
   cited URL is dead/fabricated/missing, so treat the claim with suspicion. */
.src-badge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; white-space: nowrap; }
.src-ver { color: var(--sage); background: rgba(14,124,107,.10); }
.src-unver { color: var(--amber); background: rgba(201,138,30,.12); }
.rn-dist { text-align: right; }
.rn-dist .rn-mi { font-size: 16px; font-weight: 700; font-family: var(--f-mono); letter-spacing: -.02em; line-height: 1; color: var(--dtm-navy); }
.rn-dist .rn-unit { font-size: 10.5px; color: var(--dtm-slate); font-weight: 600; }
.rn-eta { font-size: 10.5px; color: var(--dtm-slate); margin-top: 4px; display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
.rn-eta svg { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 2.4; }

.rn-actions { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s cubic-bezier(.4,0,.2,1); }
.rn-acct.rn-sel .rn-actions { grid-template-rows: 1fr; }
.rn-actions-inner { overflow: hidden; }
.rn-metaline { display: flex; gap: 12px; align-items: center; padding: 2px 14px 11px; font-size: 11.5px; color: var(--dtm-slate); }
.rn-metaline b { color: var(--dtm-navy); font-weight: 700; }
.rn-metaline .rn-pill { color: #fff; background: var(--dtm-sage); padding: 2px 9px; border-radius: 999px; font-weight: 700; font-size: 11px; }
.rn-actgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 2px 12px 12px; }
.rn-act { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 11px 4px; border-radius: 13px; border: 1px solid var(--dtm-line-2, #E2DCCE); background: #FBF9F3; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--dtm-navy); cursor: pointer; transition: transform .12s; }
.rn-act:active { transform: scale(.95); }
.rn-act svg { width: 18px; height: 18px; stroke: var(--dtm-sage); fill: none; stroke-width: 2; }

.rn-toast { position: absolute; left: 50%; bottom: 90px; transform: translate(-50%, 20px); background: var(--dtm-navy); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none; transition: .3s; z-index: 700; box-shadow: 0 12px 30px rgba(0,0,0,.3); white-space: nowrap; max-width: calc(100% - 40px); overflow: hidden; text-overflow: ellipsis; }
.rn-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ═══ Community layer + field Simple Mode (design handoff rev-2, 2026-07-21) ═══ */
.rn-layers { position: absolute; top: 88px; left: 14px; z-index: 520; display: flex; gap: 7px; }
.rn-lt { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--dtm-line-2, #E2DCCE); background: rgba(255,253,248,.94); color: var(--dtm-mut, #77726A); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.rn-lt svg { width: 13px; height: 13px; stroke: var(--dtm-teal, #0E7C6B); fill: none; stroke-width: 2.2; }
.rn-lt.on { background: var(--dtm-navy, #1B1B1F); color: #fff; border-color: var(--dtm-navy, #1B1B1F); }
.rn-lt.on svg { stroke: #fff; }
.rn-fab { position: absolute; right: 14px; bottom: 178px; z-index: 520; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 15px; border: 0; border-radius: 999px; background: var(--dtm-orange, #E4572E); color: #fff; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 8px 22px rgba(228,87,46,.4); }
.rn-fab:active { transform: scale(.96); }
.rn-fab svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.rn-fab.placing { background: var(--dtm-navy, #1B1B1F); box-shadow: 0 8px 22px rgba(27,27,31,.35); }
.rn-note-pin { background: none !important; border: none !important; }
.rn-note-b { width: 28px; height: 28px; border-radius: 50%; background: var(--dtm-navy, #1B1B1F); border: 2px solid #fff; display: grid; place-items: center; box-shadow: 0 3px 9px rgba(0,0,0,.4); color: #fff; }
.rn-note-b svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.rn-notepop .leaflet-popup-content-wrapper { background: #fff; border-radius: 15px; box-shadow: 0 16px 38px rgba(0,0,0,.24); }
.rn-notepop .leaflet-popup-content { margin: 13px 15px; font-family: inherit; }
.rn-notepop .leaflet-popup-tip { background: #fff; }
.rn-np-h { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.rn-np-tag { background: var(--dtm-teal, #0E7C6B); color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.rn-np-ago { font-family: var(--f-mono, monospace); font-size: 10.5px; color: var(--dtm-mut, #77726A); }
.rn-np-text { font-size: 13.5px; line-height: 1.4; color: var(--dtm-navy, #1B1B1F); margin: 0 0 9px; }
.rn-np-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rn-np-au { font-size: 12px; font-weight: 700; color: var(--dtm-navy, #1B1B1F); }
.rn-np-vote { font-family: var(--f-mono, monospace); font-size: 12px; font-weight: 700; color: var(--dtm-orange, #E4572E); background: none; border: 1px solid var(--dtm-line-2, #E2DCCE); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.rn-np-vote.voted { background: var(--dtm-orange, #E4572E); color: #fff; border-color: var(--dtm-orange, #E4572E); }
.rn-np-del { background: none; border: 0; color: var(--dtm-mut, #77726A); font-size: 11px; cursor: pointer; text-decoration: underline; padding: 2px; }
.rn-compose { position: absolute; left: 0; right: 0; bottom: 0; z-index: 720; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.3); padding: 18px 18px 28px; transform: translateY(112%); transition: transform .28s cubic-bezier(.4,0,.2,1); border-top: 1px solid var(--dtm-line-2, #E2DCCE); }
.rn-compose.show { transform: translateY(0); }
.rn-compose h4 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; font-family: var(--f-serif); }
.rn-compose-sub { font-size: 12px; color: var(--dtm-mut, #77726A); margin: 4px 0 13px; }
.rn-compose-text { width: 100%; min-height: 72px; border: 1px solid var(--dtm-line-2, #E2DCCE); border-radius: 14px; padding: 11px 12px; font: inherit; font-size: 14px; color: var(--dtm-navy, #1B1B1F); background: var(--dtm-chip, #FBF9F3); resize: none; outline: none; box-sizing: border-box; }
.rn-compose-text:focus { border-color: var(--dtm-teal, #0E7C6B); }
.rn-tagrow { display: flex; gap: 7px; flex-wrap: wrap; margin: 12px 0 14px; }
.rn-tagrow button { border: 1px solid var(--dtm-line-2, #E2DCCE); background: var(--dtm-chip, #FBF9F3); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 12px; font-weight: 600; color: var(--dtm-mut, #77726A); cursor: pointer; }
.rn-tagrow button.on { background: var(--dtm-teal, #0E7C6B); color: #fff; border-color: var(--dtm-teal, #0E7C6B); }
.rn-compose-btns { display: flex; gap: 10px; }
.rn-compose-btns button { flex: 1; padding: 13px; border-radius: 14px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.rn-compose-cancel { background: var(--dtm-chip, #FBF9F3); border: 1px solid var(--dtm-line-2, #E2DCCE); color: var(--dtm-navy, #1B1B1F); }
.rn-compose-post { background: var(--dtm-orange, #E4572E); border: 0; color: #fff; }
.rn-smpl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border: 1px solid var(--dtm-line-2, #E2DCCE); border-radius: 999px; padding: 7px 12px; background: var(--dtm-chip, #FBF9F3); color: var(--dtm-mut, #77726A); cursor: pointer; margin-right: 8px; }
.rn-smpl svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.rn-smpl.on { background: var(--dtm-teal, #0E7C6B); color: #fff; border-color: var(--dtm-teal, #0E7C6B); }
.rn-simplewrap { display: none; flex: 1 1 auto; flex-direction: column; padding: 6px 16px 20px; overflow-y: auto; }
.rn-sheet.rn-simple .rn-seg, .rn-sheet.rn-simple .rn-list { display: none; }
.rn-sheet.rn-simple .rn-simplewrap { display: flex; }
.rn-scard { background: #fff; border: 1px solid var(--dtm-line-2, #E2DCCE); border-radius: 22px; padding: 20px; box-shadow: 0 12px 30px rgba(27,27,31,.1); display: flex; flex-direction: column; gap: 16px; }
.rn-scard .rn-stopnum { font-family: var(--f-mono, monospace); font-size: 11.5px; font-weight: 700; color: var(--dtm-mut, #77726A); letter-spacing: .08em; }
.rn-scard .rn-sn-name { font-family: var(--f-serif); font-weight: 800; font-size: 24px; letter-spacing: -.02em; line-height: 1.05; }
.rn-scard .rn-sn-addr { font-size: 13.5px; color: var(--dtm-mut, #77726A); margin-top: 6px; line-height: 1.35; }
.rn-scard .rn-sn-stats { display: flex; gap: 26px; align-items: flex-end; }
.rn-scard .rn-stat .v { font-family: var(--f-serif); font-weight: 800; font-size: 29px; letter-spacing: -.02em; line-height: 1; }
.rn-scard .rn-stat .v small { font-size: 15px; font-weight: 700; }
.rn-scard .rn-stat .k { font-size: 10.5px; color: var(--dtm-mut, #77726A); font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; }
.rn-scard .rn-sn-meta { display: flex; gap: 9px; align-items: center; font-size: 12px; color: var(--dtm-mut, #77726A); flex-wrap: wrap; }
.rn-scard .rn-sn-meta .rn-pill { color: #fff; background: var(--dtm-teal, #0E7C6B); padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 11px; }
.rn-scard .rn-sbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rn-scard .rn-sbtns button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; border-radius: 15px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.rn-scard .rn-sbtns button svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
.rn-scard .rn-sbtns .rn-snav-btn { background: var(--dtm-orange, #E4572E); color: #fff; box-shadow: 0 8px 20px rgba(228,87,46,.3); }
.rn-scard .rn-sbtns .rn-scall-btn { background: var(--dtm-chip, #FBF9F3); color: var(--dtm-navy, #1B1B1F); border-color: var(--dtm-line-2, #E2DCCE); }
.rn-snav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.rn-snav button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; font: inherit; font-weight: 700; font-size: 14px; color: var(--dtm-teal, #0E7C6B); cursor: pointer; padding: 8px; }
.rn-snav button:disabled { color: #A9A395; opacity: .55; cursor: default; }
.rn-snav button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.rn-snav .rn-pos { font-family: var(--f-mono, monospace); font-size: 12px; color: var(--dtm-mut, #77726A); }

@media (max-width: 380px) {
  .rn-mapwrap { height: clamp(190px, 34vh, 260px); }
  .rn-actgrid { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
}
body.nearby-tabs-active .sm-stage { padding-bottom: 78px; }

/* ── Partner circles view ── */
.pcv-tabs { display: flex; gap: 6px; margin: 0 0 14px; border-bottom: 1px solid var(--hair); }
.pcv-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; margin-bottom: -1px; }
.pcv-tab.sel { color: var(--ink); border-bottom-color: var(--gold, var(--ink)); font-weight: 600; }
.pcv-hint { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.pcv-muted { color: var(--muted); font-weight: 400; }
.pcv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.pcv-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1.5px solid var(--hair); border-radius: 999px; cursor: pointer; background: var(--dtm-card, #fff); font-size: 13px; color: var(--ink); user-select: none; }
.pcv-chip .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.pcv-chip .kd { font-size: 11px; color: var(--muted); }
.pcv-chip.on { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.pcv-chip.dim { opacity: .5; }
.pcv-svg { width: 100%; height: auto; background: var(--dtm-cream-2, var(--hair-2, #faf9f6)); border-radius: 12px; display: block; margin: 0 0 6px; }
.pcv-fits-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 0 0 10px; cursor: pointer; }
.pcv-work-btn { font-size: 12px; border: 1px solid var(--hair); background: var(--dtm-card, #fff); border-radius: 999px; padding: 3px 10px; cursor: pointer; color: var(--muted); flex: none; }
.pcv-work-btn.on { color: var(--sage, #2f855a); border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.pcv-sum-pill[data-pcv-book] { cursor: pointer; }
.pcv-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 2px 0 8px; }
.pcv-sum-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); }
.pcv-sum-pill .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pcv-sum-pill b { font-weight: 600; }
.pcv-sum-shared { margin-left: auto; font-size: 12px; color: var(--muted); }
.pcv-region { border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; margin: 4px 0 12px; background: var(--dtm-card, #fff); max-height: 240px; overflow: auto; }
.pcv-region-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.pcv-region-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 13px; color: var(--ink); cursor: pointer; }
.pcv-region-row:hover { color: var(--gold-ink, var(--ink)); }
.pcv-zones { max-height: 300px; overflow: auto; }
.pcv-zones-head { font-size: 14px; color: var(--ink); margin: 12px 0 4px; font-weight: 600; }
.pcv-zone { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--hair); cursor: pointer; }
.pcv-zone:hover { background: var(--dtm-cream, var(--hair-2)); }
.pcv-zone-l { min-width: 0; }
.pcv-zone-co { font-size: 13.5px; color: var(--ink); }
.pcv-zone-who { font-size: 12px; color: var(--muted); margin-top: 1px; }
.pcv-zone-r { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.pcv-pill { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--gold-soft, var(--hair-2)); color: var(--gold-ink, var(--ink)); }
.pcv-empty { font-size: 13px; color: var(--muted); padding: 12px 0; }
.pcv-assign-list { margin-top: 8px; }
.pcv-arow { padding: 10px 12px; border-top: 1px solid var(--hair); }
.pcv-arow-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pcv-arow-co { font-size: 13.5px; color: var(--ink); }
.pcv-arow-ws { font-size: 11px; color: var(--muted); }
.pcv-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.pcv-tog { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--hair); border-radius: 999px; cursor: pointer; font-size: 12px; color: var(--muted); background: var(--dtm-card, #fff); }
.pcv-tog .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pcv-tog.on { color: var(--ink); border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.pcv-split-editor { margin-top: 14px; border: 1px solid var(--hair); border-radius: 12px; padding: 14px; background: var(--dtm-cream, var(--hair-2)); }
.pcv-se-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.pcv-se-title { font-size: 15px; color: var(--ink); font-weight: 600; }
.pcv-se-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.pcv-se-field { display: flex; flex-direction: column; gap: 4px; }
.pcv-se-field label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pcv-se-members { margin: 4px 0 12px; }
.pcv-se-mrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hair); }
.pcv-se-mrow .who { flex: 1; font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.pcv-se-mrow .role { font-size: 11px; color: var(--muted); }
.pcv-se-mrow input[type=number] { width: 66px; }
.pcv-se-total { font-size: 12px; color: var(--muted); text-align: right; margin-top: 4px; }
.pcv-se-total.bad { color: var(--red, #c0392b); }
.pcv-se-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* ── Account stage — pipeline modal + pills (2026-07-21) ── */
.stg-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stg-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:1.5px solid rgba(0,0,0,.12);border-radius:12px;background:var(--paper,#fff);cursor:pointer;text-align:left;font:inherit;}
.stg-opt b{font-size:15px;color:var(--ink);}
.stg-opt span{font-size:12px;color:var(--muted);}
.stg-opt:hover{border-color:var(--red);}
.stg-opt.sel{border-color:var(--red);background:rgba(208,39,29,.06);}
.stg-result{margin-top:14px;font-size:13px;color:var(--ink);background:rgba(0,0,0,.04);border-radius:10px;padding:12px 14px;line-height:1.5;}
.stage-pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.02em;vertical-align:middle;}
.stage-pill.meeting_set{background:#e6f1fb;color:#185fa5;}
.stage-pill.won{background:#eaf3de;color:#3b6d11;}
.stage-pill.lost{background:#f1efe8;color:#5f5e5a;}

/* Employer & policy details collapsible + plans editor */
.cw-enrich{margin-top:14px;border:1px solid var(--paper-3,#e5e7eb);border-radius:10px;padding:2px 12px;}
.cw-enrich-summary{cursor:pointer;font-weight:600;font-size:14px;padding:10px 0;list-style:none;}
.cw-enrich-summary::-webkit-details-marker{display:none;}
.cw-enrich-summary::before{content:"▸ ";}
details[open]>.cw-enrich-summary::before{content:"▾ ";}
.cw-enrich-body{padding:4px 0 10px;}
.cw-plans-list{margin:6px 0;}
.cw-plan-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) auto;gap:6px;margin-bottom:8px;align-items:center;}
.cw-plan-row .cw-plan-f{min-width:0;}
@media (max-width:760px){.cw-plan-row{grid-template-columns:1fr 1fr;}.cw-plan-row .cw-plan-remove{grid-column:1 / -1;}}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE SHELL (msh-*) — phone-native app shell from the "Beyond — Mobile"
   design handoff (AJ 2026-07-21). Activated by body.msh-on at phone width;
   hides the desktop #ct-app and presents a Today/Accounts/People/More tab
   app. Tokens scoped to #msh so fidelity is exact + nothing else is touched.
   Modals (.cw-stage, z-index 100+) still open ON TOP of the shell (z 40).
   ═══════════════════════════════════════════════════════════════════════ */
#msh {
  --paper:#12181A; --card:#1B2420; --chip:#27332D; --line:rgba(255,255,255,.10); --div:rgba(255,255,255,.075);
  --ink:#F1EFE7; --tx2:#9BA6A0; --tx3:#6F7A74; --grip:rgba(255,255,255,.22);
  --teal:#17B394; --orange:#F0663B; --gold:#D9A441; --track:rgba(255,255,255,.12);
  display:none;
}
body.msh-on { overflow:hidden; }
body.msh-on #ct-app { display:none !important; }
body.msh-on #msh {
  display:flex; flex-direction:column; position:fixed; inset:0; z-index:40;
  background:var(--paper); color:var(--ink);
  font-family:"Space Grotesk", var(--f-ui, system-ui), sans-serif;
}
#msh .msh-mono { font-family:"JetBrains Mono", var(--f-mono, monospace); }
#msh .msh-disp { font-family:"Bricolage Grotesque", var(--f-serif, sans-serif); }

#msh .msh-scroll { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
#msh .msh-scroll::-webkit-scrollbar { display:none; }
#msh .msh-view { display:none; }
#msh .msh-view.on { display:block; }

/* header */
#msh .msh-head { padding:14px 22px 4px; }
#msh .msh-eyebrow { font-family:"JetBrains Mono", monospace; font-size:12px; font-weight:600; letter-spacing:.12em; color:var(--gold); text-transform:uppercase; }
#msh .msh-h1 { font-family:"Bricolage Grotesque", sans-serif; font-weight:800; font-size:38px; letter-spacing:-.03em; margin:6px 0 8px; line-height:.98; }
#msh .msh-sub { font-size:15px; color:var(--tx2); margin:0 0 16px; line-height:1.35; }
#msh .msh-sub b { color:var(--ink); font-weight:700; }

/* time segmented */
#msh .msh-seg { display:flex; background:var(--chip); border:1px solid var(--line); border-radius:15px; padding:4px; gap:3px; margin:0 22px 12px; }
#msh .msh-seg button { flex:1; border:0; background:none; font:inherit; font-size:14.5px; font-weight:600; color:var(--tx2); padding:11px 6px; border-radius:11px; cursor:pointer; transition:.16s; display:flex; align-items:center; justify-content:center; gap:6px; }
#msh .msh-seg button.on { background:var(--card); color:var(--ink); box-shadow:0 2px 8px rgba(27,27,31,.08); }
#msh .msh-seg button svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }

/* channel chips */
#msh .msh-chips { display:flex; gap:9px; overflow-x:auto; padding:2px 22px 4px; scrollbar-width:none; }
#msh .msh-chips::-webkit-scrollbar { display:none; }
#msh .msh-chip { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:14px; font-weight:600; color:var(--tx2); background:var(--chip); border:1px solid var(--line); border-radius:13px; padding:10px 14px; cursor:pointer; transition:.15s; white-space:nowrap; }
#msh .msh-chip svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
#msh .msh-chip .n { font-family:"JetBrains Mono", monospace; font-size:12.5px; font-weight:700; color:var(--tx3); }
#msh .msh-chip.on { background:var(--sage); color:#fff; border-color:var(--sage); }
#msh .msh-chip.on .n { color:#FFB59E; }

/* simple-mode toggle row */
#msh .msh-moderow { padding:14px 22px 2px; }
#msh .msh-toggle { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:9px; font:inherit; font-size:15px; font-weight:700; border-radius:14px; padding:13px; cursor:pointer; border:1px solid var(--line); background:var(--chip); color:var(--ink); transition:.16s; }
#msh .msh-toggle svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; }
#msh .msh-toggle.on { background:var(--teal); color:#fff; border-color:var(--teal); box-shadow:0 6px 16px rgba(14,124,107,.28); }

#msh .msh-listtitle { display:flex; align-items:baseline; justify-content:space-between; padding:18px 24px 8px; }
#msh .msh-listtitle span { font-family:"JetBrains Mono", monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3); font-weight:600; }

/* task + row cards */
#msh .msh-list { padding:0 16px 150px; display:flex; flex-direction:column; gap:11px; }
#msh .msh-empty { text-align:center; color:var(--tx2); font-size:14px; padding:40px 20px; }
#msh .msh-task { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:15px 15px 15px 14px; display:grid; grid-template-columns:auto auto 1fr auto; gap:13px; align-items:center; cursor:pointer; transition:box-shadow .16s, border-color .16s, transform .1s; box-shadow:0 1px 2px rgba(27,27,31,.03); }
#msh .msh-task:active { transform:scale(.988); }
#msh .msh-task.sel { border-color:var(--teal); box-shadow:0 0 0 1.5px var(--teal), 0 10px 26px rgba(14,124,107,.14); }
#msh .msh-check { width:26px; height:26px; border-radius:9px; border:2px solid var(--track); background:var(--card); display:grid; place-items:center; flex:0 0 auto; transition:.14s; }
#msh .msh-check svg { width:15px; height:15px; stroke:#fff; fill:none; stroke-width:3.2; opacity:0; transition:.14s; }
#msh .msh-task.sel .msh-check { background:var(--teal); border-color:var(--teal); }
#msh .msh-task.sel .msh-check svg { opacity:1; }
#msh .msh-badge { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-family:"JetBrains Mono", monospace; font-weight:700; font-size:15px; color:#fff; background:#3A3833; flex:0 0 auto; position:relative; }
#msh .msh-badge .ch { position:absolute; right:-5px; bottom:-5px; width:21px; height:21px; border-radius:50%; background:var(--card); display:grid; place-items:center; box-shadow:0 1px 4px rgba(0,0,0,.18); }
#msh .msh-badge .ch svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; }
#msh .msh-tinfo { min-width:0; }
#msh .msh-tname { font-size:16px; font-weight:700; letter-spacing:-.01em; line-height:1.2; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#msh .msh-tmeta { font-size:13px; color:var(--tx2); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#msh .msh-tright { display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:0 0 auto; }
#msh .msh-prog { width:58px; height:5px; border-radius:99px; background:var(--track); overflow:hidden; }
#msh .msh-prog i { display:block; height:100%; border-radius:99px; background:var(--teal); }
#msh .msh-pct { font-family:"JetBrains Mono", monospace; font-size:12.5px; font-weight:700; color:var(--tx2); }
#msh .msh-chev { color:var(--tx3); display:flex; }
#msh .msh-chev svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.2; }
#msh .msh-task.overdue .msh-prog i { background:var(--orange); }

/* selection action bar */
#msh .msh-selbar { position:absolute; left:12px; right:12px; bottom:calc(78px + 10px); z-index:45; background:var(--sage); color:#fff; border-radius:22px; padding:13px 15px; display:flex; align-items:center; gap:12px; box-shadow:0 18px 40px rgba(0,0,0,.32); transform:translateY(160%); opacity:0; transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s; pointer-events:none; }
#msh .msh-selbar.show { transform:translateY(0); opacity:1; pointer-events:auto; }
#msh .msh-selbar .cnt { display:flex; flex-direction:column; line-height:1.1; margin-right:auto; padding-left:6px; }
#msh .msh-selbar .cnt b { font-size:16px; font-weight:700; }
#msh .msh-selbar .cnt small { font-size:11.5px; color:#B9B4AB; font-family:"JetBrains Mono", monospace; }
#msh .msh-selbar button { border:0; border-radius:13px; font:inherit; font-size:14px; font-weight:700; padding:11px 15px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; color:#fff; }
#msh .msh-selbar button svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
#msh .msh-selbar .date { background:rgba(255,255,255,.14); }
#msh .msh-selbar .del { background:var(--orange); }

/* bottom tab bar */
#msh .msh-tabs { flex:0 0 auto; position:relative; z-index:30; display:flex; justify-content:space-around; align-items:center; padding:10px 12px calc(20px + env(safe-area-inset-bottom)); background:rgba(244,241,232,.92); backdrop-filter:blur(16px); border-top:1px solid var(--div); }
#msh .msh-tab { display:flex; flex-direction:column; align-items:center; gap:4px; font:inherit; font-size:11px; font-weight:600; color:var(--tx3); background:none; border:0; cursor:pointer; padding:4px 12px; transition:.15s; }
#msh .msh-tab svg { width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:2; }
#msh .msh-tab.on { color:var(--ink); }
#msh .msh-tab .fab { width:52px; height:52px; border-radius:18px; background:var(--orange); display:grid; place-items:center; box-shadow:0 8px 20px rgba(228,87,46,.36); margin-top:-14px; }
#msh .msh-tab .fab svg { width:26px; height:26px; stroke:#fff; stroke-width:2.4; }

/* search + row cards (accounts / people) */
#msh .msh-srchwrap { margin:0 22px 16px; position:relative; }
#msh .msh-srch { width:100%; border:1px solid var(--line); background:var(--card); border-radius:14px; padding:13px 14px 13px 44px; font:inherit; font-size:15px; color:var(--ink); box-sizing:border-box; }
#msh .msh-srch::placeholder { color:var(--tx3); }
#msh .msh-si { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--tx3); display:flex; }
#msh .msh-si svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
#msh .msh-mlist { padding:0 16px 150px; display:flex; flex-direction:column; gap:11px; }
#msh .msh-rowcard { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px; display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; cursor:pointer; box-shadow:0 1px 2px rgba(27,27,31,.03); transition:transform .1s; }
#msh .msh-rowcard:active { transform:scale(.988); }
#msh .msh-pav { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-family:"JetBrains Mono", monospace; font-weight:700; font-size:14px; color:#fff; flex:0 0 auto; }

/* settings/More rows */
#msh .msh-setrow { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:15px; display:flex; align-items:center; gap:14px; cursor:pointer; text-align:left; width:100%; font:inherit; color:var(--ink); }
#msh .msh-setrow .ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto; }
#msh .msh-setrow .ic svg { width:20px; height:20px; fill:none; stroke-width:2; }
#msh .msh-setrow .srt { font-size:16px; font-weight:700; }
#msh .msh-setrow .srs { font-size:13px; color:var(--tx2); margin-top:2px; }
#msh .msh-setrow .cv { margin-left:auto; color:var(--tx3); display:flex; }
#msh .msh-setrow .cv svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; }

/* ═══════════════════════════════════════════
   Work landscape (wl) — dashboard pipeline panel (AJ 2026-07-23).
   Every actively-worked account: stage, progress, next due, stalled.
   Uses the app's dark tokens; rows click through to the cadence wizard.
   ═══════════════════════════════════════════ */
.wl { margin-top: 22px; background: var(--paper); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; }
.wl-head { display: flex; align-items: center; gap: 16px; padding: 16px 20px; cursor: pointer; user-select: none; }
.wl-head-tx { min-width: 0; }
.wl-eyebrow { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.wl-title { font-family: var(--f-serif); font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0 0; color: var(--ink); }
.wl-count { font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.wl-stats { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.wl-stat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--paper-3); border: 1px solid var(--hair); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.wl-stat b { font-family: var(--f-mono); color: var(--ink); font-weight: 600; }
.wl-stat.hot { background: var(--red-soft); border-color: transparent; color: var(--red); }
.wl-stat.hot b { color: var(--red); }
.wl-collapse { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--hair); background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.wl-collapse svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .18s ease; }
.wl.collapsed .wl-collapse svg { transform: rotate(-90deg); }
.wl.collapsed .wl-body { display: none; }
.wl-tabs { display: flex; gap: 6px; padding: 0 20px 10px; flex-wrap: wrap; }
.wl-tab { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--hair); background: none; color: var(--muted); cursor: pointer; }
.wl-tab:hover { background: var(--paper-3); }
.wl-tab.on { background: var(--sage); border-color: var(--sage); color: #fff; }
.wl-tab .n { font-family: var(--f-mono); font-size: 11px; opacity: .85; margin-left: 4px; }
.wl-list { border-top: 1px solid var(--hair); max-height: 430px; overflow-y: auto; }
.wl-list::-webkit-scrollbar { width: 9px; }
.wl-list::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 9px; border: 2px solid var(--paper); }
.wl-row { display: grid; grid-template-columns: auto minmax(160px, 1.6fr) auto minmax(120px, 1fr) auto auto auto; gap: 14px; align-items: center; padding: 11px 20px; border-bottom: 1px solid var(--hair); cursor: pointer; transition: background .12s; }
.wl-row:last-child { border-bottom: none; }
.wl-row:hover { background: var(--paper-3); }
.wl-av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--ink); background: #38443D; flex-shrink: 0; }
.wl-row.over .wl-av { background: var(--red-soft); color: var(--red); }
.wl-idy { min-width: 0; }
.wl-co { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-who { font-size: 11.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-stage { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--sage-soft); color: var(--sage); }
.wl-stage.meet { background: var(--sky-soft); color: var(--sky); }
.wl-prog { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wl-track { flex: 1; height: 5px; border-radius: 99px; background: rgba(255,255,255,.10); overflow: hidden; min-width: 60px; }
.wl-fill { height: 100%; border-radius: 99px; background: var(--sage); }
.wl-n { font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.wl-due { font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 7px; white-space: nowrap; color: var(--muted); background: var(--paper-3); }
.wl-due.over { color: var(--red); background: var(--red-soft); }
.wl-due.today { color: var(--amber); background: var(--amber-soft); }
.wl-last { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; }
.wl-last.stall { color: var(--amber); font-weight: 600; }
.wl-chev { width: 15px; height: 15px; stroke: var(--muted-2); fill: none; stroke-width: 2; flex-shrink: 0; }
.wl-empty { padding: 22px 20px; font-size: 13px; color: var(--muted); font-style: italic; }
@media (max-width: 900px) {
  .wl-row { grid-template-columns: auto 1fr auto; row-gap: 6px; }
  .wl-prog, .wl-last { display: none; }
  .wl-stats { display: none; }
}

/* ═══════════════════════════════════════════
   Account brief (ab) — cadence-open synopsis overlay (AJ 2026-07-23).
   Lives INSIDE the wizard modal (absolute overlay), so it never fights
   the cw-stage stack. "Jump to next step" is the primary CTA.
   ═══════════════════════════════════════════ */
.ab-open-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--hair-2); background: var(--paper); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; margin-right: 10px; }
.ab-open-btn:hover { background: var(--paper-3); }
.ab-open-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ab-scrim { position: absolute; inset: 0; z-index: 80; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 26px; }
.ab-card { width: min(780px, 100%); max-height: 100%; overflow-y: auto; background: var(--paper); border: 1px solid var(--hair-2); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.ab-hd { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px 12px; }
.ab-hd-tx { min-width: 0; flex: 1; }
.ab-eyebrow { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.ab-title { font-family: var(--f-serif); font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin: 3px 0 0; color: var(--ink); }
.ab-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.ab-x { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; border: none; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.ab-x:hover { background: var(--paper-3); color: var(--ink); }
.ab-x svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 22px 14px; }
.ab-cell { background: var(--paper-2); border: 1px solid var(--hair); border-radius: 13px; padding: 12px 14px; min-width: 0; }
.ab-cell.ab-wide { grid-column: 1 / -1; }
.ab-t { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px; }
.ab-next-cell { border-color: var(--sage); }
.ab-next-line { display: flex; align-items: center; gap: 10px; }
.ab-next-tx { min-width: 0; flex: 1; }
.ab-next-lbl { font-size: 14px; font-weight: 700; color: var(--ink); }
.ab-next-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ab-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; color: var(--ink-3); min-width: 0; }
.ab-row .who { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-row .meta { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.ab-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); flex-shrink: 0; }
.ab-row .dot.idle { background: var(--muted-2); }
.ab-row .dot.next { background: var(--red); }
.ab-sig-counts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ab-sig { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--paper-3); border: 1px solid var(--hair); color: var(--muted); white-space: nowrap; }
.ab-sig b { font-family: var(--f-mono); color: var(--ink); }
.ab-notes { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); white-space: pre-wrap; max-height: 110px; overflow-y: auto; }
.ab-empty { font-size: 12.5px; color: var(--muted-2); font-style: italic; }
.ab-foot { display: flex; align-items: center; gap: 10px; padding: 12px 22px 18px; }
.ab-skip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; }
.ab-spring { flex: 1; }
@media (max-width: 700px) {
  .ab-grid { grid-template-columns: 1fr; }
  .ab-scrim { padding: 10px; }
}
/* Jump-to flash on the target touch row */
@keyframes abFlash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--sage); background: var(--sage-soft); } }
.cw-touch.ab-flash .cw-touch-card { animation: abFlash 1.1s ease 2; border-radius: 12px; }

/* ── Partner assist (pa) — internal hand-off rows in the wizard intel rail ── */
.pa-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 10px; margin-bottom: 6px; border-radius: 11px; border: 1px solid var(--hair); background: var(--paper); cursor: pointer; transition: background .12s, border-color .12s; }
.pa-row:hover { background: var(--paper-3); border-color: var(--hair-2); }
.pa-tx { flex: 1; min-width: 0; }
.pa-name { display: block; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-line { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-chip { flex-shrink: 0; font-family: var(--f-mono); font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--paper-3); border: 1px solid var(--hair); color: var(--muted); white-space: nowrap; }
.pa-chip.hot { background: var(--sage-soft); border-color: transparent; color: var(--sage); }
.pa-go { flex-shrink: 0; width: 15px; height: 15px; stroke: var(--muted-2); fill: none; stroke-width: 1.6; }
.pa-row:hover .pa-go { stroke: var(--sage); }

/* ═══ Rail tools + Org map (AJ 2026-07-22) ═══════════════════════════════
   "+ Add" / "Org map" shortcuts in the cadence-screen contacts rail, and the
   drag-and-drop company-hierarchy overlay (om-*). Reuses ab-* header classes
   inside the card so the overlay chrome matches the account brief. */
.rc-lbl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-lbl-row .rc-lbl { margin: 0; }
.rc-rail-tools { display: flex; gap: 6px; flex-shrink: 0; }
.rc-rail-tools button { border: 1px solid var(--hair-2); background: var(--paper-2); color: var(--muted); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; padding: 3px 8px; border-radius: 7px; cursor: pointer; transition: background .12s, color .12s; }
.rc-rail-tools button:hover { color: var(--ink); background: var(--paper-3); }

.om-scrim { position: absolute; inset: 0; z-index: 82; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 26px; --om-wa: #17b394; --om-wb: #D9A441; --om-wc: #9887E8; }
.om-card { width: min(1160px, 100%); max-height: 100%; overflow-y: auto; background: var(--paper); border: 1px solid var(--hair-2); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.5); display: grid; grid-template-columns: 1fr 320px; }
.om-main { min-width: 0; padding-bottom: 4px; }
/* Corporate tree: centered company root, trunk, and a connector stub above
   each level band so the stack reads as one continuous reporting line. */
.om-root { width: max-content; max-width: calc(100% - 44px); margin: 2px auto 0; background: linear-gradient(135deg, rgba(23,179,148,.22), rgba(23,179,148,.08)); border: 1px solid rgba(23,179,148,.4); border-radius: 14px; padding: 10px 20px; text-align: center; }
.om-root-name { font-family: var(--f-serif); font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--ink); }
.om-root-meta { font-family: var(--f-mono); font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.om-trunk { width: 2px; height: 20px; background: var(--hair-2); margin: 0 auto; }
#om-tree { padding: 0 22px; }
.om-tierwrap { position: relative; padding-top: 20px; }
.om-tierwrap::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 20px; background: var(--hair-2); }
.om-tband { border: 1px dashed var(--hair-2); border-radius: 16px; padding: 12px 14px 14px; transition: border-color .15s, background .15s; }
.om-tband.om-over { border-style: solid; border-color: var(--om-wa); background: rgba(23,179,148,.10); }
.om-tlabel { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.om-depth { opacity: .75; letter-spacing: .06em; }
.om-wtag { margin-left: auto; font-size: 9.5px; letter-spacing: .1em; padding: 2px 8px; border-radius: 99px; border: 1px solid currentColor; }
.om-nodes { display: flex; flex-wrap: wrap; gap: 9px; min-height: 48px; }
.om-empty { font-size: 11.5px; color: var(--muted); font-style: italic; align-self: center; padding: 6px 2px; }
.om-node { display: flex; align-items: center; gap: 10px; background: var(--paper-2); border: 1px solid var(--hair-2); border-radius: 13px; padding: 9px 13px 9px 9px; cursor: grab; min-width: 210px; position: relative; user-select: none; transition: transform .12s, border-color .12s; }
.om-node:hover { border-color: var(--muted); transform: translateY(-1px); }
.om-node.dragging { opacity: .4; cursor: grabbing; }
.om-c-av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-3); border: 1px solid var(--hair-2); color: var(--ink); font-family: var(--f-mono); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.om-c-name { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.om-c-role { font-size: 11.5px; color: var(--muted); line-height: 1.25; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-wdot { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 10px; font-weight: 700; color: #0c1012; border: 2px solid var(--paper); }
.om-foot-hint { margin: 14px 22px 18px; }
/* Side panel: waves toggle + live wave cards */
.om-side { border-left: 1px solid var(--hair-2); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.om-side-card { border: 1px solid var(--hair-2); border-radius: 14px; padding: 14px; background: var(--paper-2); }
.om-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--ink); line-height: 1.35; }
.om-sw { width: 44px; height: 26px; border-radius: 99px; background: var(--paper-3); border: 1px solid var(--hair-2); position: relative; cursor: pointer; flex: 0 0 auto; transition: background .15s, border-color .15s; }
.om-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 99px; background: var(--muted); transition: transform .18s, background .18s; }
.om-sw.on { background: rgba(23,179,148,.16); border-color: var(--om-wa); }
.om-sw.on::after { transform: translateX(18px); background: var(--om-wa); }
.om-waves { display: flex; flex-direction: column; gap: 10px; }
.om-wave { border: 1px solid var(--hair-2); border-radius: 12px; padding: 11px 12px; background: var(--paper); }
.om-wave.dim { opacity: .45; }
.om-wh { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.om-wc { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 700; font-size: 11px; color: #0c1012; flex-shrink: 0; }
.om-wt { font-weight: 700; font-size: 12.5px; color: var(--ink); }
.om-wct { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); }
.om-wl { font-size: 12px; line-height: 1.5; }
.om-wl-n { display: block; padding: 3px 0; border-bottom: 1px solid var(--hair-2); color: var(--ink); }
.om-wl-n:last-child { border-bottom: 0; }
.om-wl-r { color: var(--muted); }
.om-wempty { font-style: italic; color: var(--muted); font-size: 11.5px; }
.om-whint, .om-hint { font-size: 11px; color: var(--muted); line-height: 1.5; }
.om-whint { margin-top: 6px; }
@media (max-width: 920px) {
  .om-card { grid-template-columns: 1fr; }
  .om-side { border-left: 0; border-top: 1px solid var(--hair-2); }
}

/* ═══ Video Studio modal (st-*, AJ 2026-07-22) ═══════════════════════════ */
.st-sec-t { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.st-upload-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.st-hint { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.st-warn { color: #c0554d; font-size: 11.5px; }
.st-videos { display: grid; gap: 6px; margin-bottom: 10px; }
.st-video-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); padding: 7px 10px; border: 1px solid var(--hair-2); border-radius: 10px; background: var(--paper-2); cursor: pointer; }
.st-video-row .st-del { margin-left: auto; }
.st-del { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 6px; border-radius: 6px; flex-shrink: 0; }
.st-del:hover { color: #c0554d; background: var(--paper-3); }
.st-cands { display: grid; gap: 4px; margin-top: 10px; max-height: 240px; overflow-y: auto; }
.st-cand, .st-page-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--hair-2); border-radius: 10px; background: var(--paper-2); font-size: 13px; }
.st-cand-co { font-weight: 600; color: var(--ink); }
.st-cand-status { margin-left: auto; font-size: 11.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.st-cand a, .st-page-row a { color: var(--sage); font-size: 12px; }
.st-copy { border: 1px solid var(--hair-2); background: var(--paper-3); color: var(--ink); font-size: 11px; padding: 3px 9px; border-radius: 7px; cursor: pointer; }
.st-copy:hover { background: var(--paper-2); }
.st-pages { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; }
.st-page-row .st-hint { flex: 1; }

/* ═══ BDR Dashboard rollup drill-down (AJ 2026-07-22) ════════════════════ */
.tdb-rt[data-drill] { cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.tdb-rt[data-drill]:hover { border-color: var(--muted); transform: translateY(-1px); }
.tdb-rt.sel { border-color: var(--sage); box-shadow: 0 0 0 1px var(--sage) inset; }
.tdb-drill { border: 1px solid var(--hair-2); border-radius: 14px; background: var(--paper); padding: 12px 14px; margin-bottom: 20px; max-height: 340px; overflow-y: auto; }
.tdb-drill-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: 8px; position: sticky; top: -12px; background: var(--paper); padding: 6px 0; z-index: 1; }
.tdb-drill-n { font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.tdb-drill-x { margin-left: auto; border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; }
.tdb-drill-x:hover { color: var(--ink); background: var(--paper-2); }
.tdb-drill-more { font-size: 11.5px; color: var(--muted); padding: 8px 2px 2px; }
@keyframes tdbFlash { 0% { box-shadow: 0 0 0 2px var(--sage); } 100% { box-shadow: 0 0 0 0 transparent; } }
.tdb-flash { animation: tdbFlash 1.2s ease-out; }

/* ═══ Account-source badge (territory vs Apollo intent, AJ 2026-07-22) ════ */
/* Account-origin badge. Renamed from .src-badge to .acct-src (2026-07-22): the
   citation badges (✓ sourced / ⚠ unverified, defined far above) already own
   .src-badge, and reusing it here silently re-styled those. Distinct class now. */
.acct-src { display: inline-block; font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 99px; vertical-align: middle; margin-left: 7px; white-space: nowrap; line-height: 1.6; }
.acct-src.terr { background: var(--paper-3); color: var(--muted); border: 1px solid var(--hair-2); }
.acct-src.intent { background: var(--orange-soft, rgba(240,102,59,.16)); color: var(--orange, #F0663B); border: 1px solid var(--orange, #F0663B); }

/* ═══ Buyer-target hint on intent accounts (account brief) ════════════════ */
.ab-target { margin-top: 10px; border: 1px solid var(--orange, #F0663B); border-radius: 12px; background: var(--orange-soft, rgba(240,102,59,.10)); padding: 10px 12px; }
.ab-target-h { font-weight: 700; font-size: 12.5px; color: var(--ink); margin-bottom: 7px; }
.ab-target-topic { font-family: var(--f-mono); font-size: 10px; font-weight: 600; color: var(--orange, #F0663B); background: var(--paper); border: 1px solid var(--orange, #F0663B); border-radius: 99px; padding: 1px 7px; margin-left: 4px; }
.ab-target-row { font-size: 12.5px; color: var(--ink); line-height: 1.7; }
.ab-target-k { display: inline-block; width: 74px; font-family: var(--f-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ab-target-hint { font-size: 11px; color: var(--muted); line-height: 1.45; margin-top: 6px; }

/* ═══ Intent Playbook modal (ip-*, AJ 2026-07-22) ════════════════════════ */
.ip-body { padding: 18px 20px; display: grid; gap: 20px; max-height: 74vh; overflow-y: auto; }
.ip-sec-t { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ip-lead { font-size: 12.5px; color: var(--body, var(--ink)); line-height: 1.55; margin-bottom: 10px; }
.ip-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ip-table th { text-align: left; font-family: var(--f-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--hair-2); }
.ip-table td { padding: 7px 10px; border-bottom: 1px solid var(--hair-2); color: var(--ink); vertical-align: top; }
.ip-table td.topic { font-weight: 600; }
.ip-steps { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink); line-height: 1.65; }
.ip-steps b { color: var(--ink); }
.ip-map { display: grid; gap: 6px; }
.ip-map-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--hair-2); border-radius: 9px; background: var(--paper-2); font-size: 12.5px; }
.ip-map-k { font-family: var(--f-mono); font-size: 11px; color: var(--muted); min-width: 92px; }
.ip-map-v { color: var(--ink); }
.ip-copy { border: 1px solid var(--hair-2); background: var(--paper-3); color: var(--ink); font-size: 10.5px; font-family: var(--f-mono); padding: 2px 8px; border-radius: 6px; cursor: pointer; margin-left: auto; }
.ip-copy:hover { background: var(--paper-2); }
.ip-note { font-size: 12px; color: var(--body, var(--muted)); line-height: 1.55; border-left: 2px solid var(--orange, #F0663B); padding-left: 12px; }
.ip-warn { color: var(--orange, #F0663B); font-weight: 700; }

/* ═══ Field quick-view: all contacts on the account (nqv-c-*, AJ 2026-07-23) ══ */
.nqv-c { padding: 8px 0; border-bottom: 1px solid var(--hair-2); }
.nqv-c:last-child { border-bottom: 0; padding-bottom: 0; }
.nqv-c:first-child { padding-top: 0; }
.nqv-c-name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.nqv-c-title { font-weight: 500; color: var(--muted); }
.nqv-c-tag { display: inline-block; font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 99px; background: var(--paper-3); color: var(--muted); border: 1px solid var(--hair-2); vertical-align: 2px; }
.nqv-c-links { margin-top: 3px; font-size: 13.5px; line-height: 1.7; }
.nqv-c-links a { color: var(--sky, #5b9bd5); text-decoration: none; }
/* The shared signal block renders inside the field sheet too — give the
   research counts + target card room to breathe on a phone. */
#nqv-signals .ab-sig-counts { margin-top: 6px; }
#nqv-signals .ab-target { margin-top: 10px; }
@media (max-width: 520px) {
  #nqv-signals .ab-target-k { width: 68px; }
  #nqv-signals .ab-target-row { font-size: 12px; }
}

/* Target-buyer card CTA — desktop jumps into the cadence, mobile dials. */
.ab-target-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--orange, #F0663B); background: var(--orange, #F0663B); color: #fff; font-family: var(--f-ui, inherit); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1.2; }
.ab-target-cta:hover { filter: brightness(1.08); }
#nqv-signals .ab-target-cta { width: 100%; justify-content: center; padding: 12px 14px; font-size: 15px; margin-top: 12px; }
/* View-only banner in the field quick-view — shown for accounts borrowed from
   the field source workspace, whose writes the API would reject. */
.nqv-ro {
  margin: 0 0 10px; padding: 8px 11px; border-radius: 8px;
  background: #FBF3E4; border: 1px solid #E7D6B0;
  font-family: var(--f-ui); font-size: 12px; font-weight: 600; color: #7A5B18;
}

/* ═══ Account worksheet ("Book") — the editable data grid at the top of the
   Enrichment modal. Click a cell to edit; saves straight to the account. ═══ */
.bk-wrap { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--card); }
.bk-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px; border-bottom: 1px solid var(--hair); }
.bk-filters { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; padding: 10px; border-bottom: 1px solid var(--hair); }
.bk-filters .fx { display: flex; flex-direction: column; gap: 3px; }
.bk-filters .fx label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); }
.bk-filters input, .bk-filters select { height: 30px; }
.bk-scroll { overflow: auto; max-height: 52vh; }
.bk-table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; white-space: nowrap; width: max-content; min-width: 100%; }
.bk-table th { position: sticky; top: 0; z-index: 2; background: var(--paper-3); color: var(--muted); text-align: left; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; border-bottom: 1px solid var(--hair-2); }
.bk-table td { border-bottom: 1px solid var(--hair); }
.bk-cell { padding: 6px 10px; min-width: 92px; max-width: 230px; overflow: hidden; text-overflow: ellipsis; cursor: text; color: var(--ink-2); }
.bk-cell:hover { background: var(--paper-3); }
.bk-cell.empty { color: var(--muted-2); }
.bk-cell.saving { background: var(--amber-soft); }
.bk-cell.saved { background: var(--sage-soft); }
.bk-cell.err { background: var(--red-soft); }
.bk-col-company { position: sticky; left: 0; z-index: 1; background: var(--card); min-width: 180px; max-width: 230px; }
.bk-cell.bk-col-company:hover { background: var(--paper-3); }
.bk-table th.bk-col-company { z-index: 3; background: var(--paper-3); }
.bk-co-name { font-weight: 600; color: var(--ink); }
.bk-edit-input, .bk-edit-select { width: 100%; box-sizing: border-box; height: 30px; padding: 4px 6px; font-size: 12.5px; background: var(--paper); color: var(--ink); border: 1px solid var(--sage); border-radius: 5px; outline: none; }
.bk-pager { display: flex; gap: 8px; align-items: center; padding: 9px 10px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--muted); }
.bk-flag { display: inline-block; font-size: 9.5px; padding: 1px 6px; border-radius: 20px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.bk-flag.red { background: var(--red-soft); color: var(--red-deep); }
.bk-flag.amber { background: var(--amber-soft); color: var(--amber); }
.bk-intent-cell { padding: 6px 10px; border-bottom: 1px solid var(--hair); white-space: nowrap; min-width: 118px; max-width: 210px; }
.bk-intent-cell.empty { color: var(--muted-2); padding-left: 10px; }
.bk-intent-cell .intent-chip { margin-left: 0; }
.bk-imore { font-size: 10px; color: var(--muted); margin-left: 5px; }

/* Territory + buying-intent account filters on the Due Today board. */
.dtm-acctfilter { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.dtm-af-lab { font-size: 12px; font-weight: 700; color: var(--dtm-slate, var(--muted)); text-transform: uppercase; letter-spacing: .03em; }
.dtm-af-sel { height: 32px; max-width: 190px; }
.dtm-af-count { font-size: 12px; color: var(--dtm-slate-2, var(--muted-2)); margin-left: auto; }