/* ─────────────────────────────────────────────
   Cadence Tracker — design tokens + wizard chrome
   Adapted from the SalesHQ Light cadence-wizard design system
   (paper / ink / red editorial 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). */
  --paper: #FFFFFF;
  --paper-2: #F4F1E8;
  --paper-3: #EBE6DA;
  --ink: #1B1B1F;
  --ink-2: #2A2A30;
  --ink-3: #43423C;
  --muted: #77726A;
  --muted-2: #A9A395;
  --hair: #EEE9DD;
  --hair-2: #E6E0D2;

  --red: #E4572E;
  --red-deep: #B23D1C;
  --red-soft: #FBE7DF;
  --sage: #0E7C6B;
  --sage-soft: #E3F0ED;
  --amber: #C98A1E;
  --amber-soft: #F6ECD3;
  --amber-border: #DFC178;
  --sky: #6B5DD3;
  --violet: #8B5CF6;
  --teal: #0E7C6B;
  --rose: #B23A6B;
  --gold: #C98A1E;
  --gold-soft: #F6ECD3;
  --gold-ink: #8A6015;

  /* 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: #E7F0F9;
  --wkch-call: var(--sage); --wkch-call-soft: var(--sage-soft);
  --wkch-linkedin: var(--violet); --wkch-linkedin-soft: #F1EAFC;
  --wkch-drop: var(--amber); --wkch-drop-soft: var(--amber-soft);
  --wkch-mail: var(--teal); --wkch-mail-soft: #E1F5F2;
  --wkch-other: var(--muted); --wkch-other-soft: var(--paper-3);
  --wkch-event: var(--rose); --wkch-event-soft: #F9E7EF;

  --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%;
  background: var(--paper-2); 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; }

@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(--ink); color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(21,23,28,.22); }
.ct-tb-btn.primary:hover { background: var(--ink-2); }
.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(--ink); color: #fff;
  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(--red); }
.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(--ink); color: #fff; border-color: var(--ink); }
.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; }

.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: #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;

  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; }
.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(--ink); color: #fff; 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(--ink); border-color: var(--ink); 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(--ink); color: #fff; border-color: var(--ink); }
.cw-touch-act.primary:hover { background: var(--ink-2); }
.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; }
.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-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: #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;
  --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(--dtm-navy); 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: var(--dtm-navy-3); }
.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; gap: 8px; }
.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; }

.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: #fff; border-radius: 22px; padding: 32px 26px; text-align: center;
  box-shadow: 0 20px 50px rgba(15,17,22,.10); 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: #fff; border-radius: 16px; padding: 14px 18px; margin-bottom: 14px; box-shadow: 0 6px 20px rgba(15,17,22,.06); }
/* 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: #fff;
}
.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: #fff; 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: #fff; 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(--ink); 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 { display: none; flex: 1; min-height: 0; flex-direction: column; background: var(--dtm-cream); }
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; }

/* 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; }

.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); }
.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; }
.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); }

@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; }