/* Azuvyn internal CRM — utilitarian, fast, mobile-first. Dark theme
   by default (a calm slate, not pure black). Most rules are token-based, so the
   palette here drives the whole app; the hardcoded accents are re-toned in the
   "dark color routing" block at the foot of this file. */
:root {
  /* surfaces (raised by elevation: bg < surface < surface-2) */
  --bg: #0f141b;
  --surface: #19212c;
  --surface-2: #232e3b;
  --hover: #2a3645;
  /* text */
  --ink: #e9eef4;
  --muted: #94a3b4;
  --line: #2b3744;
  /* brand — kept the FAP teal so white text stays legible on fills; --link is a
     brighter teal for text/links sitting directly on the dark background. */
  --brand: #0e8aa1;
  --brand-ink: #ffffff;
  --link: #3cc3da;
  --green: #34c97a;
  --amber: #e6b549;
  --red: #ef6b60;
  --rot: #d98a4e;
  /* state tints (chips/badges/messages) — dark bg + light ink */
  --ok-bg: #143120;   --ok-ink: #5fd38a;
  --warn-bg: #382c13; --warn-ink: #e6b549;
  --danger-bg: #3a2020; --danger-ink: #f08a80;
  --tint: #0f2e38;    --tint-ink: #5cc8dd; /* brand-tinted bg + ink */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.32);
  --radius: 12px;
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.45;
}
a { color: var(--brand); text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ── Top bar ───────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 10px calc(16px + env(safe-area-inset-left, 0px));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar .brand { font-weight: 700; letter-spacing: -0.01em; }
.topbar .brand small { color: var(--muted); font-weight: 500; }
.nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.nav a {
  padding: 7px 12px; border-radius: 999px; color: var(--muted);
  font-weight: 600; white-space: nowrap;
}
.nav a.active { background: var(--brand); color: var(--brand-ink); }
.nav a:hover:not(.active) { background: #eef2f5; }
.who { position: relative; display: flex; align-items: center; }
.who-btn { display: flex; align-items: center; gap: 9px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; color: var(--ink); }
.who-btn:hover, .who-btn.on { background: var(--surface-2); border-color: var(--hover); }
.who-meta { display: flex; flex-direction: column; line-height: 1.12; text-align: right; }
.who-name { font-weight: 700; font-size: 13px; }
.who-role { color: var(--muted); font-size: 11px; }
.who-caret { color: var(--muted); font-size: 10px; }
.who-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 234px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 40; }
.who-menu[hidden] { display: none; }
.who-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.who-menu-head #wm-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.who-menu-head .sub { font-size: 12px; color: var(--muted); }
.wm-item { display: flex; align-items: center; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 9px 10px; color: var(--ink); font-weight: 600; font-size: 14px; }
.wm-item:hover { background: var(--surface-2); }
.wm-item.active { background: var(--tint); color: var(--link); }
.wm-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.wm-danger { color: var(--red); }
.wm-soon { font-size: 9px; font-weight: 800; color: var(--link); margin-left: 6px; letter-spacing: 0.04em; }
@media (max-width: 760px) { .who-role { display: none; } }

/* ── Layout ────────────────────────────────────────────────────────────── */
.wrap { padding: 16px calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); max-width: 1400px; margin: 0 auto; }
.view-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.view-head h1 { font-size: 20px; margin: 0; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.notice { background: #fff7e6; border: 1px solid #ffe2a8; color: #7a5a00; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; }
.empty { color: var(--muted); padding: 40px 16px; text-align: center; }

/* ── Buttons + inputs ──────────────────────────────────────────────────── */
.btn { background: var(--brand); color: #fff; border: none; border-radius: 10px; padding: 9px 14px; font-weight: 600; }
.btn.secondary { background: #eef2f5; color: var(--ink); }
.btn.ghost { background: none; border: 1px solid var(--line); color: var(--ink); }
.btn.danger { background: var(--red); }
.btn:disabled { opacity: 0.5; cursor: default; }
input, select, textarea {
  font: inherit; font-size: 16px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); color: var(--ink); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 10px 0 4px; }
.field-row { display: flex; gap: 10px; }
.field-row > * { flex: 1; }

/* ── Kanban board ──────────────────────────────────────────────────────── */
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.col { background: #eef1f4; border-radius: var(--radius); width: 280px; min-width: 280px; flex-shrink: 0; }
.col.drop { outline: 2px dashed var(--brand); outline-offset: -2px; }
.col-head { padding: 12px 14px 8px; }
.col-head .name { font-weight: 700; }
.col-head .meta { color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; margin-top: 2px; }
.col-body { padding: 0 8px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 24px; }

.card {
  background: var(--surface); border-radius: 10px; padding: 11px 12px;
  box-shadow: var(--shadow); border: 1px solid var(--line); cursor: grab;
}
.card:active { cursor: grabbing; }
.card .title { font-weight: 600; }
.card .sub { color: var(--muted); font-size: 13px; }
.card .row { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; gap: 8px; }
.card .val { font-weight: 700; }
.card .stage-move { font-size: 12px; padding: 4px 6px; }

.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot.green { background: var(--green); }
.dot.amber { background: var(--amber); }
.dot.red { background: var(--red); }
.na { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 7px; }
.badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.badge.rot { background: #f6e7d6; color: var(--rot); }
.badge.owner { background: #e7eef3; color: var(--brand); text-transform: capitalize; }
.badge.status { background: #eef1f4; color: var(--muted); text-transform: capitalize; }
/* Inline lead-quality picker: a compact, pill-shaped <select> that reads like a badge.
   width:auto overrides the global `select{width:100%}` so it stays content-sized in a row. */
.qual-select { width: auto; vertical-align: middle; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; -webkit-appearance: none; appearance: none; }
.qual-select.confidence-none { color: var(--muted); }
.badge.confidence-high, .qual-select.confidence-high { background: #def0e3; color: var(--green); border-color: transparent; }
.badge.confidence-med, .qual-select.confidence-med { background: #fbf0d3; color: var(--amber); border-color: transparent; }
.badge.confidence-low, .qual-select.confidence-low { background: #f4e2e1; color: var(--red); border-color: transparent; }
.badge.shared { background: #dcecfa; color: #1c5f96; text-transform: none; } /* client can see this */

/* ── Lists / tables ────────────────────────────────────────────────────── */
.list { display: flex; flex-direction: column; gap: 8px; }
.item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow); display: flex; gap: 12px; align-items: flex-start;
}
.item .grow { flex: 1; min-width: 0; }
.item .title { font-weight: 600; }
.item .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.item .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.task-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line); background: #fff; flex-shrink: 0; }
.task-check.done { background: var(--green); border-color: var(--green); }

.group-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 16px 0 6px; }
.group-label.overdue { color: var(--red); }

/* ── Detail / timeline ─────────────────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
@media (max-width: 880px) { .detail-grid { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 14px; }
.panel h2 { font-size: 15px; margin: 0 0 10px; }

/* AI Brain entries save independently. Persisted entries read as content until the
   RM explicitly chooses Edit, so the screen never looks like one giant live form. */
.brain-entry {
  display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid var(--line);
  padding-top: 10px; margin-top: 10px;
}
.brain-entry-copy { line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.brain-rule-field { display: block; margin: 6px 0 8px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.brain-rule-field > span { display: inline-block; margin-bottom: 4px; color: var(--brand); }
.brain-rule-field textarea { min-height: 78px; resize: vertical; }
.brain-logic-help { margin: 2px 0 8px; line-height: 1.5; }
.brain-saved-badge {
  display: inline-block; margin-top: 7px; padding: 2px 8px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface-2); color: var(--green); font-size: 11px; font-weight: 800;
}
.brain-entry-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; }
.brain-entry-actions .btn { min-height: 44px; }
.brain-danger-action { color: var(--red) !important; }
.brain-entry-status { min-height: 18px; margin-top: 2px; }
.brain-page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.brain-page-status { min-height: 18px; }
@media (max-width: 640px) {
  .brain-entry { flex-direction: column; }
  .brain-entry-actions { width: 100%; }
  .brain-entry-actions .btn { flex: 1 1 110px; }
}

/* ── Client detail — tabbed shell (Overview · Services · Activity) ──────────
   Mobile-first: a horizontally-scrollable segment bar of ≥44px tap targets,
   sticky under the top bar so tabs stay reachable on a long pane. Each tab is a
   real link (#/client/:id[/tab]) — bookmarkable + back-button friendly. */
.client-head { margin-bottom: 10px; }
.client-actions .btn { min-height: 44px; display: inline-flex; align-items: center; }
.ctabs {
  display: flex; gap: 6px; margin: 0 0 16px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 15;
}
.ctab {
  flex: 1 1 0; min-width: max-content; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 15px;
  color: var(--muted); white-space: nowrap; text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.ctab:hover { color: var(--ink); background: var(--surface-2); }
.ctab.active { color: var(--brand-ink); background: var(--brand); }
.ctab-pane[hidden] { display: none; }

/* Snapshot — the Overview at-a-glance card grid. Auto-fit so it's a single
   column of tappable cards on a phone, a tidy grid on desktop. */
.snap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.snap-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--shadow); min-height: 44px;
  display: flex; flex-direction: column; justify-content: center;
}
.snap-card-link { text-decoration: none; color: inherit; transition: border-color .18s ease, background .18s ease; }
.snap-card-link:hover { border-color: var(--brand); background: var(--surface-2); }
.snap-k { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.snap-v { font-size: 24px; font-weight: 800; line-height: 1.15; margin: 4px 0 2px; color: var(--ink); letter-spacing: -0.02em; }
.snap-v-sm { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-sub { font-size: 12px; color: var(--muted); }

/* ── Services strip — one chip per held service, first thing on the client record.
   State is always a word (Live / In setup / Not started), never color alone. ── */
.svcstrip-panel { padding: 12px 16px; }
.svcstrip-panel h2 { margin-bottom: 8px; }
.svcstrip { display: flex; flex-wrap: wrap; gap: 8px; }
.svcchip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 11px; border: 0; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; }
a.svcchip:hover, button.svcchip:hover { background: var(--hover); }
.svcchip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svcchip-state { flex: none; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--surface); color: var(--muted); }
.svcchip.live .svcchip-state { background: var(--ok-bg); color: var(--ok-ink); }
.svcchip.setup .svcchip-state { background: var(--warn-bg); color: var(--warn-ink); }
.svcchip.notstarted .svcchip-state { box-shadow: inset 0 0 0 1px var(--line); }
.svcchip-wait { font-size: 11px; font-weight: 500; color: var(--warn-ink); max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Service-settings app surface (RM admin) — service nav rail + active-service form. */
/* ── Service settings — app-like control center (client page main column) ─── */
.svc-head { margin-bottom: 14px; }
.svc-head h2 { margin: 0; }
.svc-app { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .svc-app { grid-template-columns: 1fr; } }

/* Service rail — an inset sidebar of service cards with at-a-glance status. */
.svc-nav { display: flex; flex-direction: column; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
@media (max-width: 760px) { .svc-nav { flex-direction: row; overflow-x: auto; } }
.svc-navi { display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 1px solid transparent; border-radius: 9px; padding: 8px 9px; color: var(--ink); width: 100%; min-width: 158px; transition: background .12s ease, border-color .12s ease; }
.svc-navi:hover { background: var(--surface-2); }
.svc-navi.active { background: var(--surface); border-color: var(--line); }
.svc-ricon { font-size: 16px; width: 28px; height: 28px; display: grid; place-items: center; background: var(--surface-2); border-radius: 7px; flex: none; }
.svc-navi.active .svc-ricon { background: var(--tint); }
.svc-rmid { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.svc-rname { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-rsub { font-size: 11px; color: var(--muted); }
.svc-rdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.svc-rdot.on { background: var(--green); }
.svc-rdot.off { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--muted); }
.svc-rdot.neutral { background: var(--link); }

/* Scoped rail: sections for services the client doesn't have yet sit behind a
   quiet expander at the bottom of the rail (open state never persists). */
.svc-nav-more { background: none; border: 1px dashed var(--line); border-radius: 9px; padding: 7px 9px; margin-top: 2px; color: var(--muted); font-size: 12px; text-align: left; width: 100%; min-width: 158px; transition: background .12s ease, color .12s ease; }
.svc-nav-more:hover { background: var(--surface-2); color: var(--ink); }
.svc-nav-more:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.svc-nav-extra { display: flex; flex-direction: column; gap: 4px; }
.svc-nav-extra[hidden] { display: none; } /* author display would otherwise defeat [hidden] */
.svc-notsub-chip { display: inline-block; font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 760px) { .svc-nav-extra { flex-direction: row; } .svc-nav-more { width: auto; flex: none; white-space: nowrap; } }

/* Main form area. */
.svc-main { min-width: 0; }
.svc-form-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.svc-fh-icon { font-size: 20px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--tint); border-radius: 10px; flex: none; }
.svc-fh-text h3 { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.svc-fh-text .sub { margin: 3px 0 0; }
.svc-pill { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }
.svc-pill.on { background: var(--ok-bg); color: var(--ok-ink); }
.svc-pill.off { background: var(--surface-2); color: var(--muted); }
.svc-pill.notsub { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
/* Form-head action (✨ Draft from brand voice) + admin-only field badge. */
.svc-fh-actions { margin-left: auto; flex: none; display: flex; gap: 8px; flex-wrap: wrap; }
/* "Start with a style" panel + cards (receptionist second on-ramp). */
.svc-style-panel { margin: 0 0 16px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.svc-style-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.svc-style-card { min-height: 48px; text-align: left; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.svc-style-card:hover { border-color: var(--brand); }
.svc-style-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.svc-style-card .svc-style-name { display: block; font-weight: 700; font-size: 14px; }
.svc-style-card .svc-style-desc { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.svc-style-card.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); box-shadow: inset 0 0 0 1px var(--brand); }
.svc-admin-badge { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); vertical-align: middle; }

/* Receptionist usage → billing meter, folded into the voice service form. */
.svc-meter { margin: 0 0 14px; padding: 9px 11px; background: var(--tint); border-radius: 9px; font-size: 12px; color: var(--ink); line-height: 1.45; }
.svc-meter-row { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.svc-meter-plan { opacity: .6; white-space: nowrap; }

/* AI-failover live-status strip (ai-model panel). off = Claude only (ship-dark
   default), ready = backup standing by, forced = backup serving via manual override. */
.svc-failover { margin: 0 0 14px; }
.svc-fo-card { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border-radius: 9px; font-size: 12px; line-height: 1.45; box-shadow: inset 0 0 0 1px var(--line); }
.svc-fo-card.svc-fo-off { background: var(--surface-2); color: var(--muted); }
.svc-fo-card.svc-fo-ready { background: var(--ok-bg); color: var(--ok-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok-ink) 35%, transparent); }
.svc-fo-card.svc-fo-forced { background: var(--warn-bg); color: var(--warn-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn-ink) 35%, transparent); }
.svc-fo-dot { font-size: 11px; line-height: 1.6; flex: none; }
.svc-fo-text { display: flex; flex-direction: column; gap: 1px; }
.svc-fo-title { font-weight: 800; }
.svc-fo-sub { opacity: .82; font-weight: 500; }
.svc-fo-keys { margin-top: 3px; font-size: 11px; opacity: .65; font-weight: 600; }

/* AI-draft banner (brand-voice defaults) + drafting spinner. */
.svc-ai-banner { margin: 0 0 14px; padding: 9px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; background: var(--tint); color: var(--link); box-shadow: inset 0 0 0 1px var(--line); }
.svc-ai-banner.gen { display: flex; align-items: center; gap: 9px; color: var(--muted); font-weight: 500; }
.svc-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--link); animation: svc-spin .7s linear infinite; flex: none; }
@keyframes svc-spin { to { transform: rotate(360deg); } }

/* Multi-select chips (e.g. the receptionist's goals) — a fixed menu, pick up to N. */
.svc-men-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; }
.svc-men-opt { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.svc-men-opt:hover { border-color: var(--muted); }
.svc-men-opt.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── Operational readiness — the honest "what's actually live" signal ──────────
   Shown inline in the service pickers and on the Service Status board (#/status).
   Live = no-caveat green; Limited = available-with-a-catch amber; Building = not
   yet deliverable (muted). Pickers omit the green LIVE chip to stay uncluttered —
   the board legend carries the full key, and absence of a chip there means live. */
.rdy { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.rdy.live { background: var(--ok-bg); color: var(--ok-ink); }
.rdy.limited { background: var(--warn-bg); color: var(--warn-ink); }
.rdy.building { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.svc-name + .rdy { margin-left: 7px; }

/* The Service Status board: one screen — what we sell × how ready it is. */
.status-legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 4px 0 6px; }
.status-legend .leg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.status-counts { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.status-count { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); color: var(--ink); }
.status-cat { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 20px 0 2px; }
.srow { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.srow-name { font-weight: 700; font-size: 14px; }
.srow-price { font-size: 12px; color: var(--muted); margin-left: 8px; font-weight: 600; }
.srow-tags { display: inline-flex; gap: 6px; align-items: center; justify-self: end; }
.srow-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); line-height: 1.45; max-width: 60ch; }
.cat-chip { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.cat-chip.coming { background: var(--tint); color: var(--link); box-shadow: none; }

/* ── Provider status (upstream vendors) on the Service Status board ────────
   Status is never color-alone: the dot always travels with a symbol + word chip. */
.prow { padding: 12px 0; border-top: 1px solid var(--line); }
.prow:first-child { border-top: 0; }
.prow-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pdot.ok { background: var(--green); }
.pdot.warn { background: var(--amber); }
.pdot.down { background: var(--red); animation: pdot-pulse 1.6s ease-in-out infinite; }
.pdot.unk { background: var(--muted); }
@keyframes pdot-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .pdot.down { animation: none; } }
.prow-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.prow-name:hover { text-decoration: underline; }
.pstat { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pstat.ok { background: var(--ok-bg); color: var(--ok-ink); }
.pstat.warn { background: var(--warn-bg); color: var(--warn-ink); }
.pstat.down { background: var(--danger-bg); color: var(--danger-ink); }
.pstat.unk { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.prow-when { font-size: 11px; color: var(--muted); margin-left: auto; }
.prow-incident { font-size: 12px; margin: 4px 0 0 18px; line-height: 1.45; }
.prow-incident a { color: var(--link); }
.prow-affects { margin: 6px 0 0 18px; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.prow-affects-label { font-weight: 600; }
.pchip { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.pchip.warn { background: var(--warn-bg); color: var(--warn-ink); box-shadow: none; }
.pchip.down { background: var(--danger-bg); color: var(--danger-ink); box-shadow: none; }
.prow-integ { margin: 5px 0 0 18px; font-size: 12px; color: var(--muted); }
/* Pending setup is never a dead end — the row carries the one action that clears it. */
.prow-next { margin: 5px 0 0 18px; padding: 6px 9px; font-size: 12px; line-height: 1.5; color: var(--ink);
  background: var(--warn-bg); border-left: 3px solid var(--amber); border-radius: 0 6px 6px 0; }
.prow-next-label { font-weight: 800; color: var(--warn-ink); }

/* Fields: a responsive card grid that uses the full width. */
.svc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.svc-field { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.svc-field.full { grid-column: 1 / -1; }
.svc-flabel { font-weight: 700; font-size: 13px; color: var(--ink); text-transform: none; margin: 0 0 6px; display: block; }
.svc-field input, .svc-field select, .svc-field textarea { background: var(--surface); margin: 0; }
.svc-hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.4; }

/* Toggle switch (boolean fields). */
.svc-field-toggle { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.svc-toggle { position: relative; flex: none; display: inline-flex; cursor: pointer; }
.svc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.svc-track { display: block; width: 42px; height: 24px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); transition: background .15s ease, border-color .15s ease; }
.svc-thumb { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); margin: 2px; transition: transform .15s ease, background .15s ease; }
.svc-toggle input:checked + .svc-track { background: var(--brand); border-color: var(--brand); }
.svc-toggle input:checked + .svc-track .svc-thumb { transform: translateX(18px); background: #fff; }
.svc-toggle input:focus-visible + .svc-track { outline: 2px solid var(--link); outline-offset: 2px; }
.svc-toggle-text { min-width: 0; }
.svc-toggle-text .svc-flabel { margin: 0; }

/* Read-only object value (managed by the team). */
.svc-ro { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--muted); white-space: pre-wrap; word-break: break-word; margin: 0; max-height: 160px; overflow: auto; }

/* Sticky save bar — always reachable while editing. */
.svc-savebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 12px 0 2px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--surface); }
.svc-savebar-actions { display: flex; gap: 8px; align-items: center; }
.svc-status { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.svc-status.warn-text { color: var(--amber); }
.svc-saved-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.svc-status.warn-text .svc-saved-dot { background: var(--amber); }
.kv { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.kv .k { color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 9px 0 9px 16px; border-left: 2px solid var(--line); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.timeline .when { color: var(--muted); font-size: 12px; }
.timeline .what { font-weight: 600; }
.timeline .prod { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
/* Client page: Activity is a secondary side rail — cap its height so a long
   history scrolls instead of stretching the page past the main content. */
.client-aside .timeline { max-height: 70vh; overflow-y: auto; padding-right: 6px; }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal-bg { position: fixed; inset: 0; background: rgba(16,32,44,0.45); display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; z-index: 50; overflow-y: auto; }
.modal { background: var(--surface); border-radius: 16px; width: 100%; max-width: 560px; padding: 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.modal h2 { margin: 0 0 12px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ── Deal builder service picker ───────────────────────────────────────── */
.svc-cat { font-size: 12px; font-weight: 700; color: var(--muted); margin: 12px 0 6px; text-transform: uppercase; }
.svc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; cursor: pointer; }
.svc.on { border-color: var(--brand); background: #f0f8fa; }
.svc .svc-name { font-weight: 600; flex: 1; }
.svc .svc-price { color: var(--muted); font-size: 13px; }
.total-bar { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding: 12px 0; display: flex; justify-content: space-between; align-items: center; font-weight: 700; }

/* ── Promote modal: inline deal/pitch builder + slug guidance ───────────── */
.pm-deal-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--ink); font-weight: 600; cursor: pointer; }
.pm-deal-summary:hover { border-color: var(--brand); }
.pm-deal-summary .pm-caret { color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; flex: none; }
.pm-muted { color: var(--muted); font-weight: 500; }
.pm-builder { margin-top: 10px; }
.pm-skip-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-weight: 500; cursor: pointer; }
.pm-skip-row input { width: auto; margin: 0; flex: none; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; width: 100%; max-width: 380px; box-shadow: var(--shadow); }
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card p { color: var(--muted); margin: 0 0 18px; }
.login-card .btn { width: 100%; margin-top: 12px; }
.msg { margin-top: 14px; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.msg.ok { background: #def0e3; color: #185c33; }
.msg.error { background: #f4e2e1; color: #842029; }
.devlink { word-break: break-all; font-size: 12px; }

/* ── Quick-add ─────────────────────────────────────────────────────────── */
.qa-wrap { max-width: 480px; margin: 0 auto; padding: 16px; }
.qa-big input { font-size: 17px; padding: 14px; }
.qa-queue { margin-top: 14px; font-size: 13px; color: var(--muted); }
.offline-bar { background: var(--amber); color: #3a2c00; text-align: center; padding: 6px; font-size: 13px; font-weight: 600; }

/* ── Polish pass ─────────────────────────────────────────────────────────── */
.btn { transition: filter .15s ease, transform .04s ease, box-shadow .15s ease; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn.secondary:hover { background: #e3e9ee; }
.btn.ghost:hover { background: #f4f7f9; }
.btn:not(.secondary):not(.ghost):not(.danger) { box-shadow: 0 1px 2px rgba(11,114,133,0.25); }
.view-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.topbar { box-shadow: 0 1px 0 rgba(16,32,44,0.05); }
.topbar .brand { font-weight: 800; letter-spacing: -0.02em; }
.nav a { transition: background .12s ease, color .12s ease; }
.item { transition: box-shadow .15s ease, border-color .15s ease, transform .06s ease; }
.item:hover { border-color: #cdd6df; box-shadow: 0 3px 12px rgba(16,32,44,0.09); }
.item .title { letter-spacing: -0.01em; }
.card { transition: box-shadow .15s ease, transform .06s ease; }
.card:hover { box-shadow: 0 4px 16px rgba(16,32,44,0.11); }
.col { background: #edf1f5; border: 1px solid #e6ebf0; }
.col-head .name { letter-spacing: -0.01em; }
.panel { border-radius: 14px; }
.lead-actions { display: flex; align-items: center; }
.lead-pipe { align-self: center; white-space: nowrap; font-size: 13px; padding: 7px 11px; }

/* ── Mobile: give the nav its own full-width row so it's never squeezed ───── */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: calc(9px + env(safe-area-inset-top, 0px)) calc(13px + env(safe-area-inset-right, 0px)) 9px calc(13px + env(safe-area-inset-left, 0px)); }
  .topbar .brand { font-size: 15px; }
  .who { order: 2; margin-left: auto; }
  .nav { order: 3; flex: 1 1 100%; }
}

/* ── Sales territories (admin dashboard) ──────────────────────────────────── */
.terr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.terr-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.terr-cap { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.terr-card select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.terr-card .sub { margin: 8px 0 0; font-size: 12px; }
.terr-card .btn { width: 100%; }
.terr-stats { display: flex; gap: 8px; }
.terr-stat { flex: 1; text-align: center; background: var(--bg); border-radius: 9px; padding: 8px 4px; }
.terr-n { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.terr-l { font-size: 12px; color: var(--muted); }
.terr-h2 { font-size: 16px; margin: 8px 0 10px; letter-spacing: -0.01em; }
.terr-h2 .sub { font-weight: 400; }
.terr-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 22px; }
.region-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 13px; box-shadow: var(--shadow); }
.region-head { display: flex; align-items: center; gap: 8px; }
.region-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 4px 6px; }
.region-name:hover, .region-name:focus { border-color: var(--line); background: var(--bg); outline: none; }
.region-owner { border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; font: inherit; font-size: 13px; }
.region-del { background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 7px; }
.region-del:hover { background: #fbe9e7; color: var(--red); }
.region-cities { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 11px; }
.city-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 13px; }
.city-chip button { background: none; border: none; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 3px; border-radius: 999px; }
.city-chip button:hover { background: #fbe9e7; color: var(--red); }
.region-add { border: 1px dashed var(--line); border-radius: 999px; padding: 5px 9px; font: inherit; font-size: 13px; color: var(--brand); background: var(--surface); }
.terr-cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.city-row { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; }
.city-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terr-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 200px; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; padding: 10px; }
.terr-check { display: flex; align-items: center; gap: 6px; font-size: 14px; flex: 0 0 calc(50% - 7px); }
.terr-check input { width: auto; }
@media (max-width: 760px) { .terr-grid { grid-template-columns: 1fr; } }
.terr-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 10px; }
.terr-head-row .terr-h2 { margin: 0; }

/* Sales sub-tabs */
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 18px; }
.subtab { padding: 9px 14px; font-weight: 600; color: var(--muted); border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; font-size: inherit; font-family: inherit; }
.subtab:hover { color: var(--ink); }
.subtab.active { color: var(--brand); border-bottom-color: var(--brand); }

/* Data tables (scorecard / forecast / earnings) */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 22px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 13px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table td { padding: 11px 13px; border-bottom: 1px solid var(--line); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #f7fafb; }

/* Leaderboard */
.leaderboard { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.lead-rank { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; }
.lead-rank .rank { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--bg); font-weight: 800; font-size: 13px; }
.lead-rank:first-child .rank { background: var(--brand); color: #fff; }
.lead-rank .lead-mrr { font-weight: 700; }

/* Lead health */
.health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 22px; }
.health-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 13px; }
.health-name { font-weight: 700; margin-bottom: 8px; }
.health-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hchip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg); color: var(--muted); }
.hchip.bad { background: #fbe9e7; color: var(--red); }
.hchip.warn { background: #fdf3e0; color: var(--rot); }
.hchip.ok { background: #e7f5ec; color: var(--green); }

/* Commission rate editor */
.rate-card { max-width: 560px; margin-bottom: 22px; }
.rate-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; }
.rate-row label { font-size: 14px; }
.rate-row input { width: 92px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font: inherit; text-align: right; }

/* ── Territory map (county assignment) ────────────────────────────────────── */
.terr-map { margin-bottom: 22px; }
.tm-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 820px) { .tm-wrap { grid-template-columns: 1fr; } }
.tm-side { display: flex; flex-direction: column; gap: 10px; }
.tm-hint { font-size: 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.tm-regions { display: flex; flex-direction: column; gap: 8px; }
.tm-region { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.tm-region:hover { border-color: #cdd6de; }
.tm-region.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(11,114,133,.15); }
.tm-rtop { display: flex; align-items: center; gap: 8px; }
.tm-swatch { width: 13px; height: 13px; border-radius: 4px; flex: none; display: inline-block; }
.tm-rname { flex: 1; min-width: 0; font-weight: 700; border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 3px 5px; font-size: 14px; }
.tm-rname:hover, .tm-rname:focus { border-color: var(--line); background: var(--bg); outline: none; }
.tm-rdel { background: none; border: none; color: var(--muted); font-size: 17px; line-height: 1; padding: 1px 6px; border-radius: 6px; }
.tm-rdel:hover { background: #fbe9e7; color: var(--red); }
.tm-rrow { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.tm-rrow label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; width: 54px; flex: none; }
.tm-rrow select { flex: 1; min-width: 0; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 13px; }
.tm-rmeta { font-size: 12px; color: var(--muted); margin-top: 7px; }
.tm-new { width: 100%; }
.tm-mapcol { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: var(--shadow); }
.tm-maphd { font-size: 13px; color: var(--ink); margin-bottom: 8px; min-height: 20px; }
.tm-maphd .tm-swatch { vertical-align: middle; margin: 0 2px; }
.tm-svg { width: 100%; height: auto; display: block; max-height: 72vh; }
.tm-svg path { cursor: pointer; transition: opacity .1s; }
.tm-svg path:hover { opacity: .82; filter: brightness(1.15); }

/* ── Dark color routing ─────────────────────────────────────────────────────
   Re-tones every selector that was hardcoded to a light value (badges, chips,
   message boxes, board columns, hovers) onto the dark token set. Loaded last in
   this file, so it wins over the original light declarations above. */
a { color: var(--link); }
.btn { color: var(--brand-ink); }
.btn.secondary { background: var(--surface-2); color: var(--ink); }
.btn.secondary:hover { background: var(--hover); }
.btn.ghost:hover { background: var(--surface-2); }
.btn:not(.secondary):not(.ghost):not(.danger) { box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.nav a:hover:not(.active) { background: var(--hover); }
.notice { background: var(--warn-bg); border-color: rgba(230,181,73,0.4); color: var(--warn-ink); }
.cm-warn { background: var(--warn-bg); border: 1px solid rgba(230,181,73,0.4); color: var(--warn-ink); padding: 10px 14px; border-radius: var(--radius); }
.col { background: var(--surface-2); border: 1px solid var(--line); }
/* Won = the sales→Client Success handoff column; Lost = archived. Tinted so the
   two outcomes read at a glance without shouting. */
.col.is-won { background: var(--ok-bg); border-color: rgba(63,185,107,0.34); }
.col.is-won .col-head .name { color: var(--ok-ink); }
.col.is-lost { opacity: 0.72; }
.col-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-left: 7px; vertical-align: middle; white-space: nowrap; }
.col-tag.won { background: var(--ok-ink); color: var(--surface); }
.col-tag.lost { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.card:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.45); }
.item:hover { border-color: #3a4858; box-shadow: 0 3px 14px rgba(0,0,0,0.4); }
.task-check { background: var(--surface); }
.svc.on { background: var(--tint); }
.badge.rot { background: var(--warn-bg); color: var(--rot); }
.badge.owner { background: var(--tint); color: var(--tint-ink); }
.badge.status { background: var(--surface-2); color: var(--muted); }
.badge.confidence-high, .qual-select.confidence-high { background: var(--ok-bg); color: var(--ok-ink); }
.badge.confidence-med, .qual-select.confidence-med { background: var(--warn-bg); color: var(--warn-ink); }
.badge.confidence-low, .qual-select.confidence-low { background: var(--danger-bg); color: var(--danger-ink); }
.badge.shared { background: rgba(60,195,218,0.18); color: var(--link); }
.msg.ok { background: var(--ok-bg); color: var(--ok-ink); }
.msg.error { background: var(--danger-bg); color: var(--danger-ink); }
.data-table tbody tr:hover { background: var(--hover); }
.lead-rank:first-child .rank { color: var(--brand-ink); }
.hchip { background: var(--surface-2); color: var(--muted); }
.hchip.bad { background: var(--danger-bg); color: var(--danger-ink); }
.hchip.warn { background: var(--warn-bg); color: var(--warn-ink); }
.hchip.ok { background: var(--ok-bg); color: var(--ok-ink); }
.region-del:hover, .city-chip button:hover, .tm-rdel:hover { background: var(--danger-bg); color: var(--danger-ink); }
.tm-region:hover { border-color: var(--muted); }

/* ── UX polish (dark) ───────────────────────────────────────────────────────*/
/* Visible focus on dark: a soft brand ring instead of a hard outline. */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(60,195,218,0.22); }
.nav a:focus-visible, .btn:focus-visible, .subtab:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* The active nav pill pops with the brand + a subtle glow. */
.nav a.active { box-shadow: 0 1px 8px rgba(14,138,161,0.5); }
/* Quiet, theme-matched scrollbars (board / tables / rails). */
* { scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a4858; }
/* Inputs read a touch raised against the dark page. */
input, select, textarea { background: var(--surface-2); }
/* Selection + placeholder tuned for dark. */
::selection { background: rgba(60,195,218,0.28); }
::placeholder { color: #5d6b7b; }

/* ── Sales · Performance dashboard ───────────────────────────────────────────*/
/* Colored initials avatar (reps, leaderboard, health cards). */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
.repcell { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }

/* KPI hero tiles */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
@media (max-width: 760px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.kpi { position: relative; overflow: hidden; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(155deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow); }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.kpi:nth-child(1)::before { background: var(--link); }
.kpi:nth-child(2)::before { background: var(--green); }
.kpi:nth-child(3)::before { background: var(--amber); }
.kpi:nth-child(4)::before { background: var(--brand); }
.kpi.kpi-warn::before { background: var(--amber); }
.kpi.kpi-warn { border-color: rgba(224,161,6,0.4); }
.kpi-n { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-l { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 7px; }
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* Leaderboard */
.leaderboard { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.lb-card { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; }
.lb-rank { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-weight: 800; font-size: 13px; }
.lb-mid { flex: 1; min-width: 0; }
.lb-name { font-weight: 700; margin-bottom: 6px; }
.lb-bar { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.lb-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--link)); }
.lb-val { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Win-rate bar in the scorecard */
.wrwrap { display: inline-flex; align-items: center; gap: 8px; }
.winbar { display: inline-block; width: 64px; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.winbar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), #7be0a6); }
.winpct { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Forecast bar chart */
.fc-bars { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 22px; box-shadow: var(--shadow); }
.fc-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.fc-label { width: 92px; flex: none; font-size: 13px; color: var(--muted); }
.fc-track { flex: 1; position: relative; height: 16px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fc-track .fc-gross { position: absolute; left: 0; top: 0; height: 100%; background: rgba(60,195,218,0.16); border-radius: 999px; }
.fc-track .fc-weighted { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg, var(--brand), var(--link)); border-radius: 999px; }
.fc-val { width: 120px; flex: none; text-align: right; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.fc-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.fc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 5px; }
.fc-legend .fc-gross { background: rgba(60,195,218,0.3); }
.fc-legend .fc-weighted { background: var(--brand); }

/* Territory map hover tooltip (county + largest city) */
.tm-mapcol { position: relative; }
.tm-tip { position: absolute; pointer-events: none; z-index: 6; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; font-size: 13px; color: var(--ink); box-shadow: 0 6px 20px rgba(0,0,0,0.5); white-space: nowrap; }
.tm-tip.hidden { display: none; }
.tm-tip strong { font-weight: 700; }
.tm-tip-city { color: var(--link); font-weight: 600; }
.tm-tip-city::before { content: "· "; color: var(--muted); }
.tm-tip-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Nav: a subtle divider delineating the Sales group from the RM (Clients) group */
.nav-sep { width: 1px; align-self: center; height: 18px; background: var(--line); margin: 0 6px; flex: none; }
/* Subtitle under a view heading (e.g. Prospects → "Sales team · …") */
.view-sub { color: var(--muted); font-size: 13px; margin-top: 3px; max-width: 60ch; }

/* ── Calendar ("My calendar" — month grid + selected-day agenda) ──────────── */
.cal-nav { display: inline-flex; align-items: center; gap: 4px; }
.cal-nav .btn.ghost { padding: 5px 12px; font-size: 18px; line-height: 1; }
.cal-month { font-weight: 700; min-width: 9.5em; text-align: center; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { margin-bottom: 6px; }
.cal-dow-cell { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: center; padding: 2px 0; }

.cal-cells { grid-auto-rows: minmax(98px, auto); }
.cal-cell {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; display: flex; flex-direction: column; gap: 4px; min-height: 98px;
  cursor: pointer; overflow: hidden; transition: border-color .12s ease, background .12s ease;
}
.cal-cell:hover { border-color: #3a4858; background: var(--surface-2); }
.cal-cell.other { opacity: .42; }
.cal-cell.sel { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cal-daynum {
  font-size: 12px; font-weight: 700; color: var(--ink); align-self: flex-start;
  min-width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 999px;
}
.cal-cell.today .cal-daynum { background: var(--brand); color: var(--brand-ink); }
.cal-chip {
  display: block; width: 100%; text-align: left; border: none; cursor: pointer;
  background: var(--tint); color: var(--tint-ink); border-radius: 6px; font: inherit;
  font-size: 11px; font-weight: 600; padding: 2px 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cal-chip:hover { filter: brightness(1.12); }
.cal-chip-t { font-weight: 800; opacity: .85; }
.cal-more { font-size: 10px; color: var(--muted); padding-left: 4px; }

.cal-agenda { margin-top: 18px; }
.cal-row { cursor: pointer; }

/* ── Marketing tab (operator console over email-sms-marketing) ─────────────── */
/* Small button (used for inline/secondary actions like Clone, Intake requests). */
.btn.sm { padding: 5px 10px; font-size: 12px; box-shadow: none; }
@media (max-width: 640px) { .btn.sm { min-height: 36px; } }

/* Two-option radio cards — the "Who approves sends?" + "Send on a schedule?"
   switches. Each option is a labeled card; the checked one lights up brand-tinted. */
.mkt-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 2px; }
@media (max-width: 480px) { .mkt-choice { grid-template-columns: 1fr; } }
.mkt-opt {
  display: block; cursor: pointer; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; background: var(--surface-2); transition: border-color .12s ease, background .12s ease;
}
.mkt-opt:hover { border-color: #3a4858; }
.mkt-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.mkt-opt-t { font-weight: 700; font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.mkt-opt-t::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid var(--muted); background: var(--surface); transition: border-color .12s ease, box-shadow .12s ease;
}
.mkt-opt-d { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.mkt-opt.on { background: var(--tint); border-color: var(--brand); }
.mkt-opt.on .mkt-opt-t::before { border-color: var(--brand); box-shadow: inset 0 0 0 3px var(--brand); }
.mkt-opt input:focus-visible + .mkt-opt-t::before { outline: 2px solid var(--link); outline-offset: 2px; }

/* Plain-English state line — "Sends a newsletter every 30 days, automatically." */
.mkt-state {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--tint); color: var(--tint-ink);
  border: 1px solid var(--brand); border-radius: 10px;
  padding: 9px 12px; font-size: 13px; font-weight: 600; margin: 10px 0 2px;
}
.mkt-state.plain { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.mkt-state.hold { background: var(--warn-bg); color: var(--warn-ink); border-color: rgba(230,181,73,0.5); }
.mkt-state .mkt-state-i { flex: none; font-weight: 800; }

/* Onboard/settings sections (broken out of the monolith modal). */
.mkt-sec { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: var(--bg); }
.mkt-sec > h3 { margin: 0 0 3px; font-size: 14px; }
.mkt-sec > .mkt-sec-sub { font-size: 12px; color: var(--muted); margin: 0 0 8px; line-height: 1.4; }
.mkt-sec.done { border-color: rgba(52,201,122,0.4); }

/* Compact per-client control strip (pause / cadence / autopilot, first-class). */
.mkt-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.mkt-ctl {
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px;
}
.mkt-ctl .mkt-ctl-l { color: var(--muted); font-weight: 600; }
.mkt-ctl .mkt-ctl-v { font-weight: 700; color: var(--ink); }
.mkt-ctl.warn { border-color: rgba(230,181,73,0.5); background: var(--warn-bg); }
.mkt-ctl.warn .mkt-ctl-v { color: var(--warn-ink); }

@media (max-width: 620px) {
  .cal-grid { gap: 3px; }
  .cal-cells { grid-auto-rows: minmax(62px, auto); }
  .cal-cell { min-height: 62px; padding: 4px; border-radius: 8px; }
  .cal-daynum { font-size: 11px; min-width: 20px; height: 20px; line-height: 20px; }
  /* Chips collapse to thin indicator bars; tap a day to read its agenda below. */
  .cal-chip { font-size: 0; padding: 0; height: 5px; border-radius: 999px; }
  .cal-chip-t { font-size: 0; }
  .cal-more { font-size: 9px; }
  .cal-month { min-width: 6.5em; font-size: 14px; }
}

/* ── Leads: cold/warm tabs + the email-nurture cockpit ─────────────────────── */
.lead-tabs { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.lead-tab {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--surface); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700;
}
.lead-tab:hover { background: var(--hover); color: var(--ink); }
.lead-tab.active { background: var(--tint); color: var(--tint-ink); border-color: var(--brand); }
.lead-tab .badge { background: rgba(255, 255, 255, 0.08); color: inherit; }

.cold-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 16px; margin-bottom: 14px;
}
.cold-banner b { color: var(--ink); }
.cold-banner .view-sub { margin-top: 2px; }
.cold-banner .btn { white-space: nowrap; }

.badge.warm { background: var(--warn-bg); color: var(--amber); text-transform: none; }
.badge.enroll { background: var(--tint); color: var(--tint-ink); text-transform: none; }
.badge.enroll.paused { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }

.item.is-warm { box-shadow: inset 3px 0 0 var(--amber); }
.call-warm { padding: 5px 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION — whole CRM shell (2026-06-20)
   Brings the main app up to the Field Mode bar (.claude/FIELD-MODE-MOBILE-
   RULES.md): 16px inputs (no iOS auto-zoom), ≥44px touch targets, full-screen
   modal sheets with a reachable close, safe-area insets, tap feedback,
   contained scrolling, reduced-motion. Loaded last so it wins.
   ══════════════════════════════════════════════════════════════════════════ */

/* Modal close control — paired with the × button added in app.js modal().
   Desktop: × sits top-right of the card; phone: it pins in the sticky header. */
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-head h2 { margin: 0 0 12px; flex: 1; min-width: 0; }
.modal-x {
  flex: none; width: 36px; height: 36px; margin: -2px -2px 0 0; display: grid; place-items: center;
  border: none; border-radius: 10px; background: var(--surface-2); color: var(--muted);
  font-size: 22px; line-height: 1;
}
.modal-x:hover { background: var(--hover); color: var(--ink); }

/* Rule 11 — tap, don't hover: no grey tap-flash on custom controls, and give
   touch an :active response so a tap feels live (hover stays a desktop bonus). */
a, button, .item, .card, .nav a, .lead-tab, .subtab, .svc-navi, .tm-region,
.cal-cell, .cal-chip, .pm-deal-summary, .city-chip, .svc, .lb-card, .modal-x {
  -webkit-tap-highlight-color: transparent;
}
@media (hover: none) {
  .btn:active { transform: translateY(1px); filter: brightness(.93); }
  .item:active, .card:active, .cal-cell:active, .tm-region:active,
  .svc-navi:active, .lb-card:active, .svc:active { filter: brightness(1.08); }
  .nav a:active, .subtab:active, .lead-tab:active { filter: brightness(1.14); }
  /* hover-only borders need a visible resting state where there's no hover */
  .region-name, .tm-rname { border-color: var(--line); }
}

/* Rule 9 — contained, momentum scrolling on every sub-region we scroll, so a
   swipe doesn't chain into the page and an open modal doesn't bleed behind. */
.nav, .board, .table-wrap, .svc-nav, .terr-checks, .modal-bg,
.client-aside .timeline, .svc-ro {
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}

/* Rule 8 — honor reduced-motion: collapse transitions/animations to ~instant. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
@keyframes fap-sheet-up { from { transform: translateY(6%); opacity: .65; } to { transform: translateY(0); opacity: 1; } }

/* ── Phone (≤640px) ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Rule 2 — kill iOS focus-zoom: every field ≥16px, overriding the compact
     desktop pills/selects (which set their own sub-16px sizes). */
  input, select, textarea { font-size: 16px !important; }

  /* Rule 3 — ≥44px touch targets on the primary controls. */
  .nav a { padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; }
  .btn { min-height: 44px; padding: 11px 16px; }
  .subtab { min-height: 44px; padding: 11px 14px; }
  .lead-tab { padding: 9px 15px; min-height: 40px; }
  .task-check { width: 26px; height: 26px; }
  .region-del, .tm-rdel, .city-chip button, .region-add,
  .cal-nav .btn.ghost { min-width: 44px; min-height: 44px; }

  /* Rule 5 — dialogs become full-screen sheets, not a card stranded mid-screen.
     The × in the now-sticky header is the close path (no tap-outside on a sheet). */
  .modal-bg { padding: 0; align-items: stretch; }
  .modal {
    max-width: none; width: 100%; min-height: 100vh; min-height: 100dvh; border-radius: 0;
    padding: 14px calc(16px + env(safe-area-inset-right, 0px))
             calc(20px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
    animation: fap-sheet-up .2s ease;
  }
  .modal-head {
    position: sticky; top: 0; z-index: 2; margin: -14px -16px 10px; padding: 14px 16px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    background: var(--surface); border-bottom: 1px solid var(--line);
  }
  .modal-head h2 { margin: 0; font-size: 18px; }
  .modal-x { width: 44px; height: 44px; }
  .modal-actions { flex-direction: column; align-items: stretch; }
  .modal-actions .btn { width: 100%; }

  /* Rule 4 — view header + toolbar stack; primary actions span the full width. */
  .view-head { flex-direction: column; align-items: stretch; }
  .view-head h1 { font-size: 20px; }
  .toolbar { width: 100%; }
  .field-row { flex-direction: column; gap: 8px; }

  /* Rule 5 — kanban on a phone: stack stages full-width and scroll DOWN, instead
     of a sideways-scroll wall. Touch drag-drop is dead, so the per-card stage
     <select> is the real mover (kept keyboard-operable). The columns become a
     vertical stack; the side-scroll/snap from the desktop board is switched off. */
  .board {
    flex-direction: column; align-items: stretch;
    overflow-x: visible; scroll-snap-type: none; gap: 12px; padding-bottom: 0;
  }
  .col { width: 100%; min-width: 0; flex-shrink: 1; scroll-snap-align: none; }
  /* A collapsed (lost/archived) stage is rarely the rep's focus on a phone —
     keep it readable but let the live stages lead. */
  .col-body { padding-bottom: 12px; }

  /* Rule 1 — reclaim the page gutter while keeping the bottom + side safe-area. */
  .wrap { padding: 12px calc(12px + env(safe-area-inset-right, 0px))
          calc(16px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px)); }
}

/* Calendar "+ Client meeting" composer — the lead/client search picker (app.js
   wireBookingPicker). Inline results that push the form down; no absolute overlay. */
.bk-results { max-height: 196px; overflow-y: auto; margin: 2px 0 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.bk-results[hidden], .bk-linked[hidden] { display: none; }
.bk-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 11px; background: none; border: none; border-bottom: 1px solid var(--line); color: var(--ink); }
.bk-opt:last-child { border-bottom: none; }
.bk-opt:hover, .bk-opt:focus-visible { background: var(--hover); }
.bk-opt .badge { flex: none; }
.bk-opt-n { font-weight: 600; }
.bk-opt .sub { color: var(--muted); font-size: 12px; }
.bk-empty { padding: 9px 11px; }
.bk-linked { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--tint); }
.bk-linked .grow { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linklike { background: none; border: none; padding: 0; color: var(--link); font: inherit; font-weight: 600; text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE: data tables reflow to stacked cards (2026-06-22)
   The Sales scorecard / forecast / earnings / RM-portfolio tables (.data-table
   inside .table-wrap) side-scroll on a phone (overflow-x:auto + nowrap headers).
   At ≤640px each ROW becomes its own card and each cell stacks label-left /
   value-right, so the rep scrolls DOWN a readable list instead of sideways.

   CSS-only by design: the <td>s carry NO per-cell column label in the markup
   (that lives only in <thead>), and adding a `data-label` attribute would mean
   editing app.js — out of scope here. So this hides the header row and leads
   each card with its first cell (the entity: Rep / Client / Deal / Vendor / City,
   which is column 1 in every one of these tables) as the card title, with the
   remaining cells as stacked value rows. Phase 2 (when app.js is in play): emit
   `data-label` on each <td> and render the column name in front of every value.
   Loaded last so it wins the cascade over the desktop table rules above. */
@media (max-width: 640px) {
  /* The wrapper stops being a horizontal scroller and just frames the stack. */
  .table-wrap { overflow-x: visible; border: none; background: transparent; }
  .data-table { display: block; width: 100%; font-size: 14px; }
  .data-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* visually hide header, keep for a11y */
  .data-table tbody { display: block; }
  .data-table tbody tr {
    display: block; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px 14px;
    margin-bottom: 10px;
  }
  .data-table tbody tr:last-child { margin-bottom: 0; }
  .data-table tbody tr:hover { background: var(--surface); } /* no row-hover tint on a card */
  /* Each cell on its own line; bottom rule separates values within a card. */
  .data-table td {
    display: block; padding: 9px 0; border-bottom: 1px solid var(--line);
    text-align: left; white-space: normal;
  }
  .data-table td:last-child { border-bottom: none; }
  .data-table td:empty { display: none; } /* drop the trailing actions/spacer cell */
  /* Column 1 (the entity name) reads as the card's title. */
  .data-table td:first-child {
    font-weight: 700; font-size: 15px; color: var(--ink);
    padding-top: 11px; letter-spacing: -0.01em;
  }
  /* Honor a column the app right-aligns (e.g. Amount) — keep it left here so it
     lines up with the rest of the stacked values; tabular nums stay readable. */
  .data-table td[style*="right"] { text-align: left !important; }
}

/* ── Local SEO panel: rank trend + geo-grid heatmap ─────────────────────────
   Built responsive-first (SEO-AZUVYN Lane C): the trend is inline SVG (width:100%
   + viewBox → scales at 375px); the heatmaps are aspect-ratio:1 CSS grids that
   wrap into a gallery. Rank buckets: top-3 (map pack) → green, 4–10 (page 1) →
   amber, 11+ found → dim, not-found → faint. No chart lib. */
.seo-viz { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.seo-viz__h { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.seo-trend { width: 100%; height: auto; display: block; }
.seo-trend__cap { color: var(--muted); font-size: 12px; margin: 2px 0 0; }
.seo-spark-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.seo-spark-row:last-child { border-bottom: none; }
.seo-spark-row .k { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-spark { width: 96px; height: 22px; flex: none; }
.seo-spark-row .v { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.seo-heat-gallery { display: flex; flex-wrap: wrap; gap: 14px; }
.seo-heat { flex: 1 1 150px; max-width: 200px; }
.seo-heat__t { font-size: 12px; color: var(--ink); margin: 0 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-heat__grid { display: grid; gap: 2px; aspect-ratio: 1; }
.seo-heat__c { border-radius: 2px; background: var(--line); font-size: 8px; line-height: 1; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); aspect-ratio: 1; }
.seo-heat__c.t3 { background: var(--green); color: #06231a; }
.seo-heat__c.t10 { background: var(--amber); color: #2b2205; }
.seo-heat__c.found { background: #3d5568; }
.seo-heat__c.none { background: var(--line); color: transparent; }
.seo-heat__legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.seo-heat__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
@media (max-width: 640px) {
  .seo-heat { flex-basis: 46%; max-width: none; }
  .seo-spark { width: 78px; }
}

/* ── The CRM moved (legacy way-station banner) ─────────────────────────────── */
/* This shell is no longer the front door — sign-in lands on /v2 and V2 no longer
   links back here. What survives is the six surfaces not ported yet, so the
   banner has to do two jobs at once: say plainly that this is the old place, and
   NOT read as an error, because the people who land here on purpose are here to
   do real work. Hence informational tones, not a warning. */
.legacy-moved {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem;
  background: #0d6a63;
  color: #ffffff;
  font-size: 0.92rem;
  line-height: 1.45;
}
.legacy-moved-text { flex: 1; min-width: 16rem; }
.legacy-moved-go {
  flex: none;
  padding: 0.45rem 0.9rem;
  color: #0d6a63;
  background: #ffffff;
  border-radius: 0.4rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.legacy-moved-go:hover { background: #e9eef4; }
@media print { .legacy-moved { display: none; } }

/* ── Staff onboarding (/staff-welcome) ──────────────────────────────────────
   The page a new sales contractor sees before they have a CRM account. It reuses
   .login-wrap/.login-card, but the card has to hold a full legal document, so it
   widens here rather than at .login-card (which the sign-in page sizes for a single
   email field). */
.login-card:has(.onboarding-block) { max-width: 640px; }
.onboarding-block { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.onboarding-block h3 { margin: 0 0 8px; font-size: 16px; }
.onboarding-block p { margin: 0 0 10px; }

.onboarding-steps { list-style: none; margin: 0 0 4px; padding: 0; }
.onboarding-steps li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; }
.step-mark { flex: none; width: 1em; color: var(--muted); }
.onboarding-steps li[data-state="done"] .step-mark { color: var(--brand); }
.step-label { flex: 1; }
/* The state is always spelled out, never signalled by colour alone (WCAG 1.4.1). */
.step-state { flex: none; color: var(--muted); font-size: 13px; }

/* The agreement itself. Scrollable and focusable so it can be read with a keyboard;
   pre-wrap because the document is plain text whose line breaks carry meaning. */
.agreement-text {
  max-height: 300px;
  overflow-y: auto;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.agreement-text:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Deliberately NOT pre-checked — the unchecked default is what makes the consent
   record meaningful. See staff-welcome.js. */
.checkbox-row { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 10px; font-weight: 400; }
.checkbox-row input[type="checkbox"] { flex: none; margin-top: 3px; width: 18px; height: 18px; }

.ok-note { color: var(--brand); font-weight: 600; }