/* Florida AI Partners 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); }

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