/* ============================================================================
   polaris.css — the FIRST real shared stylesheet across the three consoles.
   ----------------------------------------------------------------------------
   Why a file and not another inline <style>: the CRM's own static handler
   already serves anything in crm/static/ and has a text/css branch
   (crm/server.py::_static), which the ops dashboard on :8088 cannot do (it has
   no static mount at all). So the CRM is the one console that can own the
   tokens as a real file — the dashboard can <link> this same file the day it
   gets a static mount, instead of forking the palette a third time.

   Token VALUES are copied verbatim from callagent/dashboard/static/index.html
   (the live Polaris set, derived from real usage counts in the LaunchMyStore
   admin). Do not "improve" them here in isolation — they are shared.

   Polaris in four rules, which matter more than the hex codes:
     1. The PRIMARY button is near-black (--ink). Blue means "link", not
        "button". The most-used button is the white one with a hairline border.
     2. Cards get depth from a 1px hairline + a surface step. --shadow is
        deliberately `none`.
     3. Badges/chips are pills, 12px, tinted. Colour means STATE, never
        decoration.
     4. Headings are small and tight. Hierarchy comes from weight (550 for UI
        labels, 650 for headings) and spacing — not from size.

   One breakpoint: 820px, plus a 440px small-phone pass. (The repo used to
   carry three — 720 CRM / 780 theme.css / 820 dashboard. 820 is the
   dashboard's real, proven mobile pass, so 820 wins.)
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root{
  --ink:#1A1A1A; --primary:#4162FF; --primary-dark:#3451E0; --primary-light:#EEF2FF;
  --bg:#F1F1F1; --card:#FFFFFF; --text:#303030; --muted:#616161; --faint:#8A8A8A;
  --border:#E3E3E3; --border-soft:#EBEBEB; --border-strong:#B5B5B5;
  --surface-2:#FAFAFA; --hover:#F7F7F7; --field:#FFFFFF;
  --success:#0C9D61; --success-bg:#CDFEE1; --success-ink:#0B7A4C;
  --warn:#B98900;    --warn-bg:#FFF5EA;    --warn-ink:#8A6200;
  --error:#D72C0D;   --error-bg:#FFF0ED;   --error-ink:#D72C0D;
  --info:#4162FF;    --info-bg:#EEF2FF;
  --overlay:rgba(26,26,26,.45);
  --toast-bg:#1A1A1A; --toast-text:#FFFFFF;
  --ring:rgba(65,98,255,.20);
  --radius:12px; --radius-s:8px;
  --shadow:none;
  --shadow-lg:0 4px 12px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.04);
  --on-primary:#FFFFFF;          /* text that sits ON --primary */
  color-scheme:light;
}
/* The CRM has a MANUAL dark toggle, which the dashboard lacks and which is
   strictly better — so the dark palette is declared twice: once for the OS
   preference (unless the user has explicitly chosen light) and once for the
   explicit [data-theme="dark"]. Keep both in step. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#F2F3F4; --primary:#8FA4FF; --primary-dark:#A8B8FF; --primary-light:#252B45;
  --bg:#1A1C1E; --card:#232629; --text:#E3E5E7; --muted:#A8ADB3; --faint:#7E848B;
  --border:#33383D; --border-soft:#2C3135; --border-strong:#4A5058;
  --surface-2:#1F2225; --hover:#2A2E32; --field:#1F2225;
  --success:#3ECF8E; --success-bg:#17311F; --success-ink:#3ECF8E;
  --warn:#E3AB3A;    --warn-bg:#332A17;    --warn-ink:#E3AB3A;
  --error:#FF8A70;   --error-bg:#3A2320;   --error-ink:#FF8A70;
  --info:#8FA4FF;    --info-bg:#252B45;
  --overlay:rgba(0,0,0,.6);
  --toast-bg:#33383D; --toast-text:#F2F3F4;
  --ring:rgba(143,164,255,.28);
  --shadow:none;
  --shadow-lg:0 4px 12px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
  --on-primary:#15171A;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ink:#F2F3F4; --primary:#8FA4FF; --primary-dark:#A8B8FF; --primary-light:#252B45;
  --bg:#1A1C1E; --card:#232629; --text:#E3E5E7; --muted:#A8ADB3; --faint:#7E848B;
  --border:#33383D; --border-soft:#2C3135; --border-strong:#4A5058;
  --surface-2:#1F2225; --hover:#2A2E32; --field:#1F2225;
  --success:#3ECF8E; --success-bg:#17311F; --success-ink:#3ECF8E;
  --warn:#E3AB3A;    --warn-bg:#332A17;    --warn-ink:#E3AB3A;
  --error:#FF8A70;   --error-bg:#3A2320;   --error-ink:#FF8A70;
  --info:#8FA4FF;    --info-bg:#252B45;
  --overlay:rgba(0,0,0,.6);
  --toast-bg:#33383D; --toast-text:#F2F3F4;
  --ring:rgba(143,164,255,.28);
  --shadow:none;
  --shadow-lg:0 4px 12px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
  --on-primary:#15171A;
  color-scheme:dark;
}

/* ------------------------------------------------- legacy name aliases ----
   The CRM's component CSS was written against the pre-Polaris "Modernize"
   names. Aliasing them to Polaris values (rather than renaming ~200 call
   sites) is what makes this a reskin instead of a rewrite. They are defined
   ONCE, as var() references, so a dark-mode override of --card automatically
   moves --surface with it. New CSS should use the Polaris names. */
:root{
  --surface:var(--card);
  --col:var(--surface-2);
  --line:var(--border);
  --line-2:var(--border-soft);
  --ink-2:var(--ink);
  --accent:var(--primary);
  --accent-soft:var(--primary-light);
  --accent-ink:var(--on-primary);
  --won:var(--success);       --won-soft:var(--success-bg);
  --lost:var(--error);        --lost-soft:var(--error-bg);
  --warn-soft:var(--warn-bg);
  --over:var(--error);        --today:var(--warn-ink);
  --mono:ui-monospace,"Cascadia Mono","SF Mono","SFMono-Regular",Consolas,Menlo,monospace;
  --ui:"Plus Jakarta Sans","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  --hdr-pad:0px;              /* becomes the safe-area top inset on mobile */
}

/* ------------------------------------------------------------------ base -- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ui);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  /* 100vh first, 100dvh second: the fallback pair mobile Safari needs */
  height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--primary);text-decoration:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.grow{flex:1}
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{
  animation:none!important;transition:none!important}}

/* ------------------------------------------------------- the shell / bar --
   Polaris shell = a top bar plus a sub-nav of tabs WITHIN the product. The
   CRM used to cram brand + tabs + filters + stats + search + six icon
   buttons into ONE flex row, which wrapped to three rows on a phone and
   pushed the stats off-screen entirely. Two explicit rows instead. */
/* header itself is the column of rows; the JS only ever flips its display
   between none and flex, so the direction has to live here. */
header{flex:none;flex-direction:column;background:var(--card);
  border-bottom:1px solid var(--border);z-index:30;padding-top:var(--hdr-pad)}
.bar{display:flex;align-items:center;gap:14px;padding:8px 16px;min-height:52px}
.subbar{display:flex;align-items:center;gap:14px;padding:0 16px;
  border-top:1px solid var(--border-soft);overflow-x:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
/* chip strips are swipe surfaces: a real scrollbar just eats a row of
   vertical space and, on Windows Chrome, draws arrows on a phone viewport */
.subbar{scrollbar-width:none}
.subbar::-webkit-scrollbar{display:none}
.brand{display:flex;align-items:center;gap:9px;font-weight:650;
  letter-spacing:-.01em;font-size:13.5px;white-space:nowrap;color:var(--ink)}
.brand .dot{width:24px;height:24px;border-radius:6px;background:var(--ink);
  display:grid;place-items:center;color:var(--card);font-size:11px;font-weight:700;flex:none}

/* Polaris sub-nav tab: an underline, not a pill. Scrolls cleanly on a phone,
   which the old segmented control did not. */
.tabs{display:flex;gap:2px;flex:none}
.tab{border:0;background:transparent;color:var(--muted);font-weight:550;
  font-size:13px;padding:11px 12px 9px;white-space:nowrap;
  border-bottom:2px solid transparent}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--ink)}

.filters{display:flex;gap:6px;align-items:center;padding:7px 0}
.chip{border:1px solid var(--border);background:var(--card);color:var(--muted);
  font-size:12px;font-weight:550;padding:4px 10px;border-radius:99px;
  white-space:nowrap;line-height:18px}
.chip:hover{border-color:var(--border-strong);color:var(--text)}
.chip.on{background:var(--primary-light);border-color:transparent;color:var(--primary)}
.chip.due.on{background:var(--error-bg);color:var(--error-ink)}

.stats{display:flex;gap:18px;align-items:center;font-size:12px}
.stat b{display:block;font-size:15px;font-weight:650;color:var(--ink);
  line-height:1.15;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:11px;font-weight:550;letter-spacing:.02em}
.search{border:1px solid var(--border);background:var(--field);color:var(--text);
  border-radius:var(--radius-s);padding:8px 11px;font-size:13px;width:200px;
  font-family:inherit;transition:border-color .15s,box-shadow .15s}
.search:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.scope{font-size:12px;color:var(--muted);white-space:nowrap}
.scope b{color:var(--ink);font-weight:650}

/* The action cluster. ONE set of DOM nodes: an icon row in the bar on
   desktop, a labelled bottom tab bar on a phone (see the mobile block). The
   label comes from data-label, so no button is duplicated and every id in
   the markup stays exactly where the JS expects it. */
.actions{display:flex;align-items:center;gap:6px}
.icon-btn{border:1px solid var(--border);background:var(--card);color:var(--muted);
  min-width:36px;height:36px;border-radius:var(--radius-s);display:inline-flex;
  align-items:center;justify-content:center;gap:5px;font-size:15px;padding:0 8px;
  transition:background .15s,color .15s,border-color .15s}
.icon-btn:hover{background:var(--hover);color:var(--ink);border-color:var(--border-strong)}
.icon-btn::after{display:none;content:attr(data-label)}
#reload.busy{color:var(--primary);animation:spin .7s linear infinite}

/* ----------------------------------------------------------------- board -- */
main{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  display:flex;gap:14px;padding:16px;align-items:flex-start}
.view{flex:1;min-height:0;overflow-y:auto;padding:22px 16px 32px}
.column{flex:0 0 300px;max-width:300px;background:var(--surface-2);
  border-radius:var(--radius);display:flex;flex-direction:column;
  max-height:100%;border:1px solid var(--border-soft)}
.col-head{padding:12px 14px 10px}
.col-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.col-title h3{margin:0;font-size:12px;color:var(--muted);font-weight:650;
  letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-title .n{font-size:11px;color:var(--muted);font-weight:650;
  background:var(--card);border:1px solid var(--border);
  min-width:22px;text-align:center;border-radius:99px;padding:1px 7px}
.col-sum{font-size:12px;color:var(--faint);margin-top:4px;font-variant-numeric:tabular-nums}
.prob{height:3px;border-radius:99px;background:var(--border);margin-top:8px;overflow:hidden}
.prob>i{display:block;height:100%;background:var(--primary);opacity:.45}
.cards{padding:5px 10px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:9px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-s);
  padding:11px 12px;box-shadow:var(--shadow);text-align:left;width:100%;display:block;
  transition:border-color .12s,background .12s}
.card:hover{border-color:var(--border-strong);background:var(--hover)}
.card .co{font-weight:650;font-size:14px;color:var(--ink);display:flex;
  align-items:center;gap:7px;line-height:1.25;flex-wrap:wrap}
.cflag{width:19px;height:13px;border-radius:2.5px;flex:none;display:inline-block;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);vertical-align:-1px}
/* RECALL: this deal was re-queued for a follow-up call, so a win on it is
   a RECALL win, not a cold win - the two are worth telling apart. */
.card .recall,.card .ownerchip,.ownerchip{font-size:10.5px;font-weight:650;
  letter-spacing:.02em;padding:1px 7px;border-radius:99px;white-space:nowrap;
  line-height:16px;display:inline-block}
.card .recall{background:var(--warn-bg);color:var(--warn-ink)}
.ownerchip{background:var(--info-bg);color:var(--info)}
.ownerchip.pool{background:var(--surface-2);color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--border)}
.card .ind{font-size:11.5px;color:var(--muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:6px}
.card .date{font-size:11.5px;color:var(--faint)}
.card .val{font-size:12px;font-weight:650;color:var(--text);
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);
  padding:2px 8px;border-radius:99px}
.card .fu{font-size:11.5px;font-weight:550;margin-top:8px;display:flex;
  align-items:center;gap:5px;padding:5px 8px;border-radius:var(--radius-s);
  background:var(--surface-2);color:var(--muted)}
.card .fu.over{background:var(--error-bg);color:var(--error-ink)}
.card .fu.today{background:var(--warn-bg);color:var(--warn-ink)}
.card.won{border-left:3px solid var(--success)}
.card.lost{opacity:.6}
.card[draggable]{cursor:grab}
.card.dragging{opacity:.4;cursor:grabbing}
.column.drop{background:var(--primary-light)}
.column.drop .cards{outline:2px dashed var(--primary);outline-offset:-3px;border-radius:var(--radius-s)}
.card .stale{font-size:11px;color:var(--warn-ink);font-weight:550;margin-top:6px;
  display:flex;align-items:center;gap:4px}

/* The mobile stage strip. Desktop never sees it — the board keeps its
   columns and its HTML5 drag-and-drop untouched, because touch DnD is
   unreliable and a phone moves a deal with the drawer's stage stepper. */
.stagestrip{display:none;flex:none;gap:6px;padding:10px 12px;
  background:var(--card);border-bottom:1px solid var(--border);
  overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.stagestrip{scrollbar-width:none}
.stagestrip::-webkit-scrollbar{display:none}
.sc{flex:none;min-height:44px;border:1px solid var(--border);background:var(--card);
  border-radius:99px;padding:6px 14px;text-align:left;display:flex;
  flex-direction:column;justify-content:center;gap:1px}
.sc b{font-size:13px;font-weight:550;color:var(--muted);white-space:nowrap;line-height:1.2}
.sc span{font-size:11px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.sc.on{background:var(--ink);border-color:var(--ink)}
.sc.on b{color:var(--card)}
.sc.on span{color:var(--card);opacity:.7}

/* --------------------------------------------------------------- reports -- */
.rep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;max-width:960px;margin:0 auto}
.rep-card{background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.rep-card h2{margin:0 0 14px;font-size:15px;font-weight:650;color:var(--ink);letter-spacing:-.01em}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:var(--radius-s);padding:11px 13px}
.kpi b{display:block;font-size:20px;font-weight:650;color:var(--ink);
  font-variant-numeric:tabular-nums}
.kpi span{font-size:11px;color:var(--muted);font-weight:550;letter-spacing:.02em}
.kpi.good b{color:var(--success-ink)}
.funnel-row{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:13px}
.funnel-row .fl{flex:0 0 96px;color:var(--muted)}
.funnel-row .fbar{flex:1;height:22px;background:var(--surface-2);
  border-radius:5px;overflow:hidden;position:relative}
.funnel-row .fbar>i{display:block;height:100%;background:var(--primary);min-width:2px}
.funnel-row .fn{flex:0 0 34px;text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.rep-sub{font-size:11px;color:var(--muted);font-weight:650;margin:16px 0 8px}
.lreason{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;
  border-bottom:1px solid var(--border-soft)}
.lreason b{color:var(--error-ink)}

/* ------------------------------------------------------------------ team -- */
.tm{max-width:900px;margin:0 auto}
.tm h2{font-size:16px;font-weight:650;color:var(--ink);margin:0 0 4px}
.tm .sub{color:var(--muted);font-size:12.5px;margin-bottom:16px}
/* Wide tables scroll inside their own card, never the page. The Team table
   used to clip on the right at phone width with no way to reach the
   Disable button. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius)}
.tm table{width:100%;border-collapse:collapse;min-width:620px}
.tm th{text-align:left;font-size:12px;font-weight:550;color:var(--muted);
  padding:10px 12px;background:var(--surface-2);
  border-bottom:1px solid var(--border);white-space:nowrap}
.tm td{padding:11px 12px;border-bottom:1px solid var(--border-soft);
  vertical-align:middle;font-size:13px;white-space:nowrap}
.tm tr:last-child td{border-bottom:0}
.tm .off td{opacity:.55}
.tm .act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.rolepill{display:inline-block;padding:2px 9px;border-radius:99px;
  font-size:11.5px;font-weight:550;background:var(--info-bg);color:var(--info)}
.rolepill.off{background:var(--surface-2);color:var(--muted)}
.newrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}

/* -------------------------------------------------------- drawer / sheet -- */
.scrim{position:fixed;inset:0;background:var(--overlay);z-index:40;
  opacity:0;pointer-events:none;transition:opacity .18s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(500px,100%);
  background:var(--card);z-index:50;box-shadow:var(--shadow-lg);
  border-left:1px solid var(--border);
  transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column}
.drawer.on{transform:none}
.d-head{padding:16px 20px 14px;border-bottom:1px solid var(--border)}
.d-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.d-co{font-size:18px;font-weight:650;color:var(--ink);letter-spacing:-.01em;
  line-height:1.2;display:flex;align-items:center;gap:8px}
.d-sub{color:var(--muted);font-size:13px;margin-top:5px;display:flex;gap:8px;
  flex-wrap:wrap;align-items:center}
.close{border:1px solid var(--border);background:var(--card);color:var(--muted);
  width:36px;height:36px;border-radius:var(--radius-s);font-size:15px;flex:none}
.close:hover{background:var(--hover);color:var(--ink)}
.status-pill{font-size:11.5px;font-weight:550;padding:2px 9px;border-radius:99px;line-height:18px}
.status-open{background:var(--info-bg);color:var(--info)}
.status-won{background:var(--success-bg);color:var(--success-ink)}
.status-lost{background:var(--error-bg);color:var(--error-ink)}
.contact-btns{display:flex;gap:8px;margin-top:12px}
.cbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;border:1px solid var(--border-strong);background:var(--card);
  color:var(--text);font-weight:550;font-size:13px;padding:9px;
  border-radius:var(--radius-s);box-shadow:0 1px 0 rgba(0,0,0,.05)}
.cbtn:hover{background:var(--hover)}
.cbtn.wa:hover{border-color:var(--success);color:var(--success-ink)}

/* The explicit stage stepper — on a phone this, not dragging, is how a deal
   moves. Sized so every step is a real tap target. */
.stepper{display:flex;margin:14px 20px 0;border:1px solid var(--border);
  border-radius:var(--radius-s);overflow:hidden}
.step{flex:1;border:0;background:var(--card);color:var(--muted);
  font-size:11.5px;font-weight:550;padding:9px 4px;border-right:1px solid var(--border);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step:last-child{border-right:0}
.step:hover{background:var(--hover);color:var(--ink)}
.step.done{background:var(--surface-2);color:var(--text)}
.step.cur{background:var(--ink);color:var(--card)}
.d-actions{display:flex;gap:8px;padding:12px 20px 0;flex-wrap:wrap;align-items:center}

/* ------------------------------------------------------------- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--border-strong);background:var(--card);color:var(--text);
  font-weight:550;font-size:13px;min-height:36px;padding:0 14px;
  border-radius:var(--radius-s);box-shadow:0 1px 0 rgba(0,0,0,.05);
  white-space:nowrap;transition:background .15s,color .15s,border-color .15s,filter .15s}
.btn:hover{background:var(--hover)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;pointer-events:none}
/* Polaris: the PRIMARY action is near-black. Brand blue is for links. */
.btn.primary,.btn-p{background:var(--ink);border-color:var(--ink);color:var(--card);
  box-shadow:none}
.btn.primary:hover,.btn-p:hover{filter:brightness(1.3);background:var(--ink)}
.btn-o{background:var(--card);color:var(--text);border-color:var(--border-strong)}
.btn.win,.btn-success{background:var(--success-bg);border-color:transparent;
  color:var(--success-ink);box-shadow:none}
.btn.win:hover{filter:brightness(.96);background:var(--success-bg)}
.btn.lose,.btn-danger{background:var(--error-bg);border-color:transparent;
  color:var(--error-ink);box-shadow:none}
.btn.lose:hover{filter:brightness(.96);background:var(--error-bg)}
.btn-sm{min-height:32px;padding:0 11px;font-size:12px}

/* --------------------------------------------------------- drawer body ---- */
.d-body{flex:1;overflow-y:auto;padding:16px 20px 32px;overscroll-behavior:contain}
.sect{font-size:11.5px;color:var(--muted);font-weight:650;margin:20px 0 9px}
.panel{background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:var(--radius-s);padding:12px}
.fu-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fu-row input[type=date],.fu-row input[type=text]{border:1px solid var(--border);
  background:var(--field);color:var(--text);border-radius:var(--radius-s);
  padding:9px;font-family:inherit;font-size:13px;min-height:36px}
.fu-row input[type=text]{flex:1;min-width:150px}
.fu-row input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.fu-cur{font-size:12.5px;margin-top:8px;color:var(--muted)}
.fu-cur b{color:var(--ink);font-weight:650}
.fu-cur.over b{color:var(--error-ink)}
.grid{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13px}
.grid dt{color:var(--muted)}
.grid dd{margin:0;word-break:break-word}
.grid dd a{word-break:break-all}
.score{display:inline-flex;align-items:center;gap:7px}
.score .bar{width:46px;height:6px;border-radius:99px;background:var(--border);overflow:hidden}
.score .bar>i{display:block;height:100%;background:var(--primary)}
.logbar{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.logkind{border:1px solid var(--border);background:var(--card);color:var(--muted);
  font-size:12px;font-weight:550;padding:7px 12px;border-radius:var(--radius-s)}
.logkind:hover{background:var(--hover);color:var(--ink)}
.logkind.on{background:var(--primary-light);border-color:transparent;color:var(--primary)}
.notebox{display:flex;gap:8px;align-items:flex-start}
.notebox textarea{flex:1;border:1px solid var(--border);background:var(--field);
  color:var(--text);border-radius:var(--radius-s);padding:9px;font-family:inherit;
  font-size:13px;resize:vertical;min-height:38px}
.notebox textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.tl{display:flex;flex-direction:column;margin-top:4px}
.ev{border-left:2px solid var(--border);padding:9px 0 9px 15px;position:relative}
.ev::before{content:"";position:absolute;left:-5px;top:13px;width:8px;height:8px;
  border-radius:50%;background:var(--border);border:2px solid var(--card)}
.ev.call::before{background:var(--primary)}
.ev.note::before,.ev.whatsapp::before,.ev.meeting::before,.ev.email::before{background:var(--warn)}
.ev.system::before{background:var(--faint)}
.ev .eh{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ev .et{font-weight:650;font-size:13px;color:var(--ink)}
.ev .ea{font-size:11px;color:var(--faint);white-space:nowrap}
.ev .eb{font-size:12.5px;color:var(--muted);margin-top:4px;white-space:pre-wrap;word-break:break-word}
.ev .eb.clamp{max-height:74px;overflow:hidden}
.ev .more{border:0;background:transparent;color:var(--primary);font-size:12px;
  font-weight:550;padding:5px 0 0}

/* ----------------------------------------------------------------- login -- */
.login-wrap{position:fixed;inset:0;display:grid;place-items:center;
  background:var(--bg);z-index:60;padding:20px;overflow-y:auto}
.login{background:var(--card);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-lg);padding:28px;width:min(380px,100%)}
.login .brand{justify-content:center;margin-bottom:6px;font-size:15px}
.login p{color:var(--muted);text-align:center;margin:0 0 18px;font-size:13px}
.login input{width:100%;border:1px solid var(--border);background:var(--field);
  color:var(--text);border-radius:var(--radius-s);padding:11px 13px;font-size:16px;
  font-family:inherit;margin-bottom:8px;min-height:44px}
.login input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.login button{width:100%;margin-top:6px;background:var(--ink);color:var(--card);
  border:0;border-radius:var(--radius-s);padding:12px;font-weight:550;
  font-size:14px;min-height:44px}
.login button:hover{filter:brightness(1.3)}
.login .hint{color:var(--muted);font-size:12px;margin-top:10px;line-height:1.45;text-align:center}
.login .err{color:var(--error-ink);font-size:12.5px;text-align:center;margin-top:10px;min-height:16px}

/* ------------------------------------------------------------ components --
   The three Polaris pieces the CRM lacked: Banner, EmptyState, Spinner. */

/* Banner — tinted panel with a coloured left edge. Used for the one-time
   password notice, which used to be an ad-hoc `.newpw` box. */
.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;
  border-radius:var(--radius-s);font-size:13px;margin-bottom:16px;
  border-left:3px solid var(--border-strong);background:var(--surface-2);color:var(--text)}
.banner .bi{flex:none;font-size:15px;line-height:1.3}
.banner b{color:var(--ink)}
.banner.info{background:var(--info-bg);border-left-color:var(--info)}
.banner.success{background:var(--success-bg);border-left-color:var(--success)}
.banner.warning,.newpw{background:var(--warn-bg);border-left-color:var(--warn);
  color:var(--text)}
.banner.critical,.banner.error{background:var(--error-bg);border-left-color:var(--error)}
.newpw{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;
  border-radius:var(--radius-s);font-size:13px;margin-bottom:16px;border-left:3px solid var(--warn)}
.banner code,.newpw code{font-family:var(--mono);font-size:14px;font-weight:650;
  background:var(--card);border:1px solid var(--border);padding:2px 7px;border-radius:6px}

/* EmptyState — Polaris leans on these rather than a blank column. */
.empty{color:var(--muted);font-size:12.5px;text-align:center;padding:22px 10px}
.empty h4{margin:0 0 3px;font-size:13px;font-weight:650;color:var(--ink)}
.empty p{margin:0;font-size:12px;color:var(--muted);line-height:1.45}
.empty .eico{font-size:20px;opacity:.5;display:block;margin-bottom:6px}
.view .empty{padding:48px 16px}

/* Spinner + skeleton — loading used to be literally nothing at all. */
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);
  border-top-color:var(--primary);display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:flex;gap:10px;align-items:center;justify-content:center;
  padding:48px 0;color:var(--muted);font-size:13px}
.skel{background:var(--surface-2);border-radius:6px;position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--hover),transparent);
  transform:translateX(-100%);animation:shim 1.25s infinite}
@keyframes shim{to{transform:translateX(100%)}}
.skel-card{background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-s);padding:11px 12px;display:flex;
  flex-direction:column;gap:9px}
.skel-card .skel:nth-child(1){height:14px;width:70%}
.skel-card .skel:nth-child(2){height:11px;width:45%}
.skel-card .skel:nth-child(3){height:11px;width:88%}

/* Modal / bottom sheet — used by the add-lead form. */
.overlay{position:fixed;inset:0;background:var(--overlay);display:none;
  align-items:center;justify-content:center;z-index:70;padding:18px}
.overlay.open{display:flex;animation:ovIn .16s ease}
.modal{background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:22px;width:460px;max-width:100%;max-height:calc(100vh - 36px);
  max-height:calc(100dvh - 36px);overflow:auto;box-shadow:var(--shadow-lg)}
.overlay.open .modal{animation:mIn .2s cubic-bezier(.2,.9,.3,1)}
@keyframes ovIn{from{opacity:0}}
@keyframes mIn{from{opacity:0;transform:translateY(12px) scale(.985)}}
@keyframes mUp{from{opacity:.6;transform:translateY(40px)}}
.modal h3{margin:0 0 4px;font-size:16px;font-weight:650;color:var(--ink)}
.modal .sub{color:var(--muted);font-size:12.5px;margin-bottom:14px}
.field{margin-bottom:10px}
.field label{display:block;font-size:11.5px;font-weight:650;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);
  background:var(--field);color:var(--text);border-radius:var(--radius-s);
  padding:10px 12px;font-family:inherit;font-size:14px;min-height:40px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;
  border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.field .help{font-size:11.5px;color:var(--muted);margin-top:4px}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px);background:var(--toast-bg);
  color:var(--toast-text);padding:11px 18px;border-radius:var(--radius);
  font-size:13px;font-weight:550;z-index:90;opacity:0;transition:.2s;
  pointer-events:none;max-width:min(400px,calc(100vw - 32px));box-shadow:var(--shadow-lg)}
.toast.on{opacity:1;transform:translateX(-50%)}

/* ======================================================= MOBILE (820px) ==
   Measured problems this closes, at a 487px client width: the board was
   2606px wide in the viewport (4 of 6 columns unreachable), 11 tap targets
   were under 44px, inputs were 13-14px so iOS zoomed on every focus, the
   header wrapped to three rows and the stats row vanished. */
@media (max-width:820px){
  :root{--hdr-pad:env(safe-area-inset-top,0px)}
  .bar{padding:8px 12px;gap:10px;min-height:48px}
  .subbar{padding:0 12px}
  .stats,.scope{display:none}          /* they never fit; the strip carries the counts */
  .brand .hide-sm{display:none}
  .search{flex:1;width:auto;min-width:0;font-size:16px;min-height:44px}

  /* the action cluster becomes a labelled bottom tab bar */
  .actions{position:fixed;left:0;right:0;bottom:0;z-index:55;gap:0;
    background:var(--card);border-top:1px solid var(--border);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));
    justify-content:space-around}
  .actions .icon-btn{flex:1;min-width:44px;min-height:48px;flex-direction:column;
    gap:2px;border:0;background:transparent;border-radius:var(--radius-s);
    font-size:17px;padding:4px 2px;color:var(--muted)}
  .actions .icon-btn:hover{background:var(--hover)}
  .actions .icon-btn::after{display:block;font-size:10px;font-weight:550;
    letter-spacing:.01em;line-height:1.1}

  /* THE BOARD: one stage at a time, chosen from the strip, as a single
     vertical list. The columns and their drag-and-drop stay in the DOM and
     stay exactly as they are — they are simply not the mobile layout. */
  .stagestrip{display:flex}
  main{flex-direction:column;gap:10px;overflow-x:hidden;overflow-y:auto;
    padding:12px 12px calc(66px + env(safe-area-inset-bottom,0px));
    align-items:stretch}
  main>.column{display:none}
  main>.column.msel{display:flex;flex:1 1 auto;width:100%;max-width:100%;
    max-height:none;background:transparent;border:0;border-radius:0}
  main>.column.msel>.col-head{display:none}
  main>.column.msel>.cards{padding:0;overflow:visible;gap:10px}
  .card{padding:13px 14px}
  .card .co{font-size:15px}
  .view{padding:16px 12px calc(70px + env(safe-area-inset-bottom,0px))}

  /* the drawer becomes a full-screen bottom sheet */
  .drawer{top:auto;left:0;right:0;bottom:0;width:100%;
    height:calc(100vh - 34px);height:calc(100dvh - 34px);
    border-left:0;border-top:1px solid var(--border);
    border-radius:18px 18px 0 0;transform:translateY(100%)}
  .drawer.on{transform:none;animation:mUp .22s cubic-bezier(.2,.9,.3,1)}
  .d-head{padding:14px 16px 12px}
  .d-head::before{content:"";display:block;width:36px;height:4px;border-radius:99px;
    background:var(--border-strong);margin:0 auto 12px}   /* sheet grabber */
  .stepper{margin:14px 16px 0;flex-wrap:wrap;border-radius:var(--radius-s)}
  .step{flex:1 0 33%;min-height:44px;border-bottom:1px solid var(--border)}
  .d-actions{padding:12px 16px 0}
  .d-body{padding:14px 16px calc(28px + env(safe-area-inset-bottom,0px))}
  .grid{grid-template-columns:1fr;gap:2px 0}
  .grid dt{margin-top:8px;font-size:11.5px;font-weight:650}

  /* 44px minimum tap targets, 16px inputs (iOS focus-zoom) */
  .btn{min-height:44px;padding:0 16px}
  .btn-sm{min-height:40px;padding:0 12px;font-size:12.5px}
  .chip{min-height:44px;padding:0 14px;display:inline-flex;align-items:center;font-size:13px}
  .tab{min-height:44px;padding:0 12px;display:inline-flex;align-items:center;font-size:14px}
  .close,.icon-btn{min-width:44px;min-height:44px}
  .logkind{min-height:44px;display:inline-flex;align-items:center;font-size:13px}
  .cbtn{min-height:48px;font-size:14px}
  input,select,textarea{font-size:16px}
  .fu-row input[type=date],.fu-row input[type=text]{min-height:44px;font-size:16px;flex:1 1 100%}
  .newrow input,.newrow select{flex:1 1 100%;min-height:44px;font-size:16px;
    border:1px solid var(--border);border-radius:var(--radius-s);
    background:var(--field);color:var(--text);padding:10px 12px;font-family:inherit}
  .newrow .btn{flex:1 1 100%}
  .toast{bottom:calc(74px + env(safe-area-inset-bottom,0px))}

  /* modals become bottom sheets too */
  .overlay{padding:0;align-items:flex-end}
  .modal{width:100%;border-radius:18px 18px 0 0;border-bottom:0;
    max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);
    padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px))}
  .overlay.open .modal{animation-name:mUp}

  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .rep-grid{grid-template-columns:1fr}
  .funnel-row .fl{flex:0 0 78px;font-size:12px}
}

/* ================================================ SMALL PHONE (440px) === */
@media (max-width:440px){
  .rep-card{padding:14px}
  .kpi b{font-size:18px}
  .d-co{font-size:16px}
  .step{flex:1 0 50%}
  .contact-btns{flex-wrap:wrap}
  .actions .icon-btn::after{font-size:9.5px}
  .card .co{flex-wrap:wrap}
  .modal{padding:18px 14px calc(18px + env(safe-area-inset-bottom,0px))}
}

/* ── Phase 4: My Day, tasks, contact fields ───────────────────────────────
   Polaris tokens only; no new colours. State is carried by tint, never by
   decoration, and every interactive row clears 44px for a thumb. */
.md{max-width:760px;margin:0 auto;padding:4px 0 40px}
.md h2{font-size:20px;font-weight:650;letter-spacing:-.2px;margin:0 0 2px}
.md .sub{color:var(--muted);font-size:12.5px;margin-bottom:18px}
.md-sec{margin-bottom:20px}
.md-sec h3{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;
  color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:0 0 8px}
.md-n{background:var(--surface-2);border:1px solid var(--border);color:var(--muted);
  border-radius:99px;padding:0 7px;font-size:11px;font-weight:700;line-height:18px}
.md-item{display:flex;align-items:center;gap:11px;min-height:52px;padding:9px 13px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-s);
  margin-bottom:7px;cursor:pointer;transition:background .12s,border-color .12s}
.md-item:hover{background:var(--hover);border-color:var(--border-strong)}
.md-item.over{border-left:3px solid var(--error)}
.md-item.today{border-left:3px solid var(--warn)}
.md-ic{flex:none;width:26px;height:26px;display:grid;place-items:center;font-size:13px;
  border-radius:7px;background:var(--surface-2);color:var(--muted)}
.md-item.over .md-ic{background:var(--error-bg);color:var(--error-ink)}
.md-item.today .md-ic{background:var(--warn-bg);color:var(--warn-ink)}
.md-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.md-body b{font-weight:650;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.md-body span{color:var(--muted);font-size:12px}
.md-empty{color:var(--muted);font-size:12.5px;padding:10px 2px}

.tasks{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.task{display:flex;align-items:center;gap:9px;min-height:44px;padding:5px 9px;
  border-radius:var(--radius-s);cursor:pointer}
.task:hover{background:var(--hover)}
.task input{width:18px;height:18px;flex:none;accent-color:var(--primary);cursor:pointer}
.task .tt{flex:1;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.task .td,.task .ta{flex:none;font-size:11px;font-weight:650;padding:1px 7px;
  border-radius:99px;background:var(--surface-2);color:var(--muted)}
.task.over .td{background:var(--error-bg);color:var(--error-ink)}
.task.today .td{background:var(--warn-bg);color:var(--warn-ink)}
.task.done .tt{text-decoration:line-through;color:var(--faint)}

.fld-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;margin-bottom:12px}
.fld-grid label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;
  font-weight:650;color:var(--muted)}
.fld-grid input{min-height:40px;font-size:16px;border:1px solid var(--border);
  background:var(--field);color:var(--text);border-radius:var(--radius-s);
  padding:8px 10px;font-family:inherit}
.fld-grid input:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px var(--ring)}

/* per-rep table inside Reports */
.rep-team{margin-top:18px;overflow-x:auto}  /* wide leaderboards scroll in place */
.rep-team table{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.rep-team th{text-align:left;font-size:11px;font-weight:700;color:var(--muted);
  letter-spacing:.3px;text-transform:uppercase;padding:9px 9px;
  background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap}
.rep-team td{padding:10px 9px;border-bottom:1px solid var(--border-soft);
  font-size:13px;white-space:nowrap}
.rep-team tr:last-child td{border-bottom:0}
.rep-team tr.pool td{color:var(--muted);font-style:italic}

/* the duplicate warning on the add-lead form */
.dupe{margin-top:10px}
.dupe b{font-weight:650}

@media (max-width:820px){
  .md{padding:0 0 84px}
  .md-item{min-height:56px}
  .fld-grid{grid-template-columns:1fr}
  .rep-team{overflow-x:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain}
}

/* ── the team's AI assistant ─────────────────────────────────────────────── */
.aibar{display:flex;gap:8px;flex-wrap:wrap}
.aibar .btn{min-height:40px}
.aibar .btn:disabled{opacity:.55;cursor:default}
.aihint{color:var(--muted);font-size:12px;margin-top:9px;line-height:1.45}
@media (max-width:820px){
  .aibar{flex-direction:column}
  .aibar .btn{width:100%;min-height:44px}
}

/* .valinput was an INLINE style on #dVal. An inline style beats every rule in
   this file including one inside a media query, so the phone block below could
   never raise it off 14px/36px — it had to become a class first. */
.valinput{width:104px;min-height:36px;border:1px solid var(--border);
  background:var(--field);color:var(--text);border-radius:var(--radius-s);
  padding:6px 8px;font-family:inherit;font-size:14px}
.valinput:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}

@media (max-width:820px){
  /* iOS zooms the whole page when a focused field is under 16px, and a 32-40px
     control is a miss with a thumb. There IS a blanket
     `input,select,textarea{font-size:16px}` higher up, but plain-element
     specificity loses to every class-qualified rule, so six fields were still
     at 13-14px and fifteen targets under 44px. Measured at 390px in headless
     Chrome, not eyeballed. */
  .field input,.field select,.field textarea,
  .notebox textarea,.valinput{font-size:16px;min-height:44px}
  .fld-grid input{min-height:44px}
  .valinput{width:116px}
  .btn-sm{min-height:44px}
  .chat-quick .chip{min-height:44px}
  .lnk{min-height:44px;display:inline-flex;align-items:center}
}

/* ----------------------------------------------------------- assistant ------
   Two mounts, one stylesheet:
     .chat.full  the AI SCREEN — fills the viewport, only the message list
                 scrolls, composer stays docked. It used to be a panel with a
                 min(58vh,520px) log inside a scrolling page, so on a laptop the
                 box you type in sat below the fold.
     .chat       the compact thread inside a deal drawer, which must NOT create
                 a second scroller: nesting one in a bottom sheet strands the
                 composer off-screen on a phone. */
#assistant{flex-direction:column;overflow:hidden;padding-bottom:0}
.ai-screen{flex:1;min-height:0;display:flex;flex-direction:column;
  width:100%;max-width:940px;margin:0 auto}
.ai-top{flex:none;display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  padding-bottom:14px}
.ai-title{flex:1 1 320px;min-width:0}
.ai-title h2{margin:0 0 6px;font-size:19px;letter-spacing:-.01em}
.ai-title p{margin:0;color:var(--muted);font-size:13px;line-height:1.5;max-width:64ch}
.ai-ctx{flex:0 1 300px;display:flex;flex-direction:column;gap:5px}
.ai-ctx label{font-size:11.5px;font-weight:650;color:var(--muted)}
.ai-ctx input{border:1px solid var(--border);background:var(--field);
  color:var(--text);border-radius:var(--radius-s);padding:10px 12px;
  font-family:inherit;font-size:14px;min-height:40px;width:100%}
.ai-ctx input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.ctxchip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--primary-light);color:var(--ink);border-radius:999px;
  padding:8px 8px 8px 14px;font-size:12.5px}
.ctxchip b{font-weight:650}
.ctxchip .x{border:0;background:rgba(0,0,0,.08);color:inherit;cursor:pointer;
  width:22px;height:22px;border-radius:50%;font-size:14px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.ctxchip .x:hover{background:rgba(0,0,0,.16)}
.ai-mount{flex:1;min-height:0;display:flex}

.chat{display:flex;flex-direction:column;gap:10px}
.chat.full{flex:1;min-height:0;gap:0}
.chat-log{display:flex;flex-direction:column;gap:14px;min-height:60px}
.chat.full .chat-log{flex:1;min-height:0;overflow-y:auto;padding:16px;
  background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:var(--radius);overscroll-behavior:contain}
.chat.full .chat-dock{flex:none;padding-top:12px;
  padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
.dealchat{margin-top:12px;border-top:1px solid var(--border-soft);padding-top:12px}

.msg{display:flex;flex-direction:column;gap:3px;max-width:88%}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg .who{display:flex;align-items:center;gap:8px;font-size:10.5px;
  font-weight:650;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.msg .copy{border:0;background:none;color:var(--faint);cursor:pointer;
  font:inherit;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
  opacity:0;transition:opacity .12s;padding:2px 4px}
.msg:hover .copy,.msg .copy:focus{opacity:1}
.msg .copy:hover{color:var(--primary)}
.msg .bub{background:var(--card);border:1px solid var(--border-soft);
  border-radius:var(--radius);padding:10px 13px;font-size:13.5px;line-height:1.6;
  word-break:break-word}
.msg.me .bub{background:var(--primary-light);border-color:transparent;color:var(--ink)}
.msg .bub p{margin:0 0 8px}
.msg .bub p:last-child{margin-bottom:0}
.msg .bub h4{margin:10px 0 6px;font-size:13.5px;font-weight:650;color:var(--ink)}
.msg .bub h4:first-child{margin-top:0}
.msg .bub ul,.msg .bub ol{margin:0 0 8px;padding-left:20px}
.msg .bub li{margin:3px 0}
.msg .bub code{background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:4px;padding:1px 4px;font-size:12px}
.msg .bub a{color:var(--primary)}
.msg.pending .bub{color:var(--muted);display:flex;align-items:center;gap:7px}

.chat-hello{display:flex;flex-direction:column;gap:6px;padding:10px 2px;
  color:var(--muted);font-size:13px;line-height:1.55}
.chat-hello b{color:var(--text);font-size:14.5px}
.hello-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:8px;margin-top:10px}
.hello-card{text-align:left;border:1px solid var(--border);background:var(--card);
  color:var(--text);border-radius:var(--radius-s);padding:12px 14px;
  font:inherit;font-size:13px;line-height:1.4;cursor:pointer;min-height:44px}
.hello-card:hover{border-color:var(--primary);color:var(--ink)}

.chat-quick{display:flex;gap:7px;flex-wrap:wrap}
.chat-quick .chip{cursor:pointer;font-size:12px;text-align:left}
.chat-form{display:flex;gap:8px;align-items:flex-end}
.chat-form textarea{flex:1;resize:none;font-family:inherit;font-size:16px;
  line-height:1.5;padding:10px 12px;border:1px solid var(--border);
  background:var(--field);color:var(--text);border-radius:var(--radius-s);
  min-height:44px;max-height:160px}
.chat-form textarea:focus{outline:0;border-color:var(--primary);
  box-shadow:0 0 0 3px var(--ring)}
.chat-form .btn{min-height:44px;padding:0 18px;flex:none}
.chat-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;
  color:var(--faint);font-size:11.5px;margin-top:6px}
.lnk{background:none;border:0;color:var(--muted);font:inherit;font-size:11.5px;
  cursor:pointer;text-decoration:underline;padding:6px 0;min-height:32px}
.lnk:hover{color:var(--text)}

/* The AI button reads as a word, not a symbol. It replaced a `✦` that sat
   beside the `＋` and was taken for decoration. */
.icon-btn.ai{background:var(--ink);border-color:var(--ink);color:var(--card);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:0 13px;
  min-width:auto}
.icon-btn.ai:hover{background:var(--ink);filter:brightness(1.35)}

@media (max-width:820px){
  #assistant{padding-left:12px;padding-right:12px}
  .ai-top{padding-bottom:10px}
  .ai-title p{display:none}          /* the screen is the explanation on a phone */
  .ai-ctx{flex:1 1 100%}
  .ai-ctx input{font-size:16px;min-height:44px}
  .msg{max-width:96%}
  .chat.full .chat-log{padding:12px}
  .chat-quick .chip{width:100%;min-height:44px}
  .lnk{min-height:44px;display:inline-flex;align-items:center}
  .msg .copy{opacity:1}              /* no hover on a touch screen */
  /* In the bottom tab bar it is a tab like any other, not a filled pill. */
  .actions .icon-btn.ai{background:none;border:0;color:var(--primary);
    font-size:12px;letter-spacing:.02em}
}

/* ------------------------------------------------------------- sidebar -----
   A named left rail. The nav was seven glyph buttons in the top bar, which is
   how an entire feature (the assistant) went unnoticed for a session.

   position:fixed + a body offset rather than a flex shell: the header and every
   view are top-level siblings rendered through innerHTML, so wrapping them
   would mean touching every render site to gain a layout this already gives.
   Hidden below 820px — the bottom tab bar is better on a phone. */
.sidenav{position:fixed;left:0;top:0;bottom:0;width:212px;z-index:60;
  background:var(--card);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:14px 10px}
body.has-rail header#app,body.has-rail main#board,body.has-rail .view,
body.has-rail .stagestrip{margin-left:212px}
.sn-brand{display:flex;align-items:center;gap:9px;padding:4px 8px 16px;
  font-size:14px;font-weight:650;color:var(--ink)}
.sn-brand .logo{width:26px;height:26px;border-radius:7px;background:var(--ink);
  color:var(--card);display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:.02em}
.sn-items{display:flex;flex-direction:column;gap:2px}
.sn-item{display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;border-radius:var(--radius-s);cursor:pointer;
  padding:0 10px;min-height:38px;font:inherit;font-size:13.5px;
  color:var(--text);text-align:left}
.sn-item:hover{background:var(--hover)}
.sn-item.on{background:var(--primary-light);color:var(--primary);font-weight:600}
.sn-ic{width:22px;height:22px;flex:none;border-radius:6px;font-size:10px;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border-soft)}
.sn-item.on .sn-ic{background:var(--primary);color:#fff;border-color:transparent}
.sn-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;
  border-top:1px solid var(--border-soft);padding-top:10px}
.sn-who{padding:2px 10px 2px;font-size:12px;color:var(--text);
  display:flex;flex-direction:column;line-height:1.35}
.sn-who span{color:var(--faint);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.04em}
/* On desktop the rail owns navigation, so the duplicate glyphs leave the bar.
   !important because boot() sets style.display='' on these by id. */
@media (min-width:821px){
  #mydayBtn,#teamBtn,#reportBtn,#aiBtn{display:none !important}
}
@media (max-width:820px){
  .sidenav{display:none !important}
  body.has-rail header#app,body.has-rail main#board,body.has-rail .view,
  body.has-rail .stagestrip{margin-left:0}
}

/* ------------------------------------------------------------ contacts ----- */
.cwrap{max-width:1100px;margin:0 auto}
.chead{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.chead h2{margin:0;font-size:19px;letter-spacing:-.01em;flex:1 1 auto}
.chead input{flex:0 1 340px;min-height:40px;font-size:14px;padding:9px 12px;
  border:1px solid var(--border);border-radius:var(--radius-s);
  background:var(--field);color:var(--text);font-family:inherit}
.chead input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.ctable{border:1px solid var(--border-soft);border-radius:var(--radius);
  overflow:hidden;background:var(--card)}
.crow{display:grid;grid-template-columns:34px 1.4fr 1.3fr .9fr 1.2fr;
  gap:12px;align-items:center;width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid var(--border-soft);padding:10px 14px;
  font:inherit;font-size:13px;color:var(--text);cursor:pointer}
.crow:last-child{border-bottom:0}
.crow:hover{background:var(--hover)}
.crow.head{cursor:default;background:var(--surface-2);font-size:10.5px;
  font-weight:650;color:var(--faint);letter-spacing:.04em}
.crow.head:hover{background:var(--surface-2)}
.av{width:30px;height:30px;border-radius:50%;background:var(--primary-light);
  color:var(--primary);display:inline-flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700}
.cmain{display:flex;flex-direction:column;min-width:0}
.cn{font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct{color:var(--muted);font-size:12px}
.cco,.cph,.cem{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--muted)}
.cco{color:var(--text);display:flex;align-items:center;gap:6px}
.pri{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.05em;
  background:var(--primary-light);color:var(--primary);border-radius:4px;
  padding:2px 5px}

/* --------------------------------------------------- people, in the drawer */
.plist{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.prow{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--border-soft);border-radius:var(--radius-s);padding:9px 11px}
.pinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pinfo b{font-size:13px;color:var(--ink);display:flex;align-items:center;gap:7px}
.pinfo span{font-size:12px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.prow .x{border:0;background:none;color:var(--faint);cursor:pointer;
  font-size:17px;line-height:1;width:32px;height:32px;border-radius:50%;flex:none}
.prow .x:hover{background:var(--error-bg);color:var(--error-ink)}
.mkpri{font-size:10.5px;text-decoration:none;color:var(--primary);
  min-height:0;padding:0}
.mkpri:hover{text-decoration:underline;color:var(--primary)}
.pnew input{flex:1 1 130px;min-width:0}

@media (max-width:820px){
  .crow{grid-template-columns:32px 1fr;gap:10px;row-gap:2px;padding:12px 12px}
  .crow .cco{grid-column:2;font-size:12px}
  .crow .cph,.crow .cem{grid-column:2;font-size:12px}
  .crow.head{display:none}
  .chead input{flex:1 1 100%;font-size:16px;min-height:44px}
  .pnew input{flex:1 1 100%;font-size:16px;min-height:44px}
  .prow .x{width:44px;height:44px}
}

/* Who you would be ringing, on the card itself. */
.who1{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text);
  margin-top:5px}
.av.sm{width:20px;height:20px;font-size:9px}

/* The rail already says TradeFusion; two lockups side by side is just noise.
   Kept on a phone, where the rail is hidden and the bar is the only chrome. */
@media (min-width:821px){ body.has-rail .bar .brand{display:none} }

/* Rail icons: inline SVG in currentColor, so the active-state colour rules
   already in .sn-item move them without a second copy of each icon. */
.sn-ic{background:none;border:0;width:20px;height:20px;color:var(--muted)}
.sn-item.on .sn-ic{background:none;color:var(--primary)}
.sn-ic .ico{width:20px;height:20px;display:block}

/* The lead picker. Was a <datalist>: the popup was the browser's to show or
   not, and nothing it displayed was in our DOM to read or test. */
.combo{position:relative}
.combo-pop{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:70;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-s);box-shadow:var(--shadow);
  max-height:320px;overflow-y:auto;padding:4px}
.combo-hit{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  background:none;border:0;border-radius:6px;padding:8px 10px;cursor:pointer;
  font:inherit;min-height:44px;justify-content:center}
.combo-hit:hover,.combo-hit.on{background:var(--primary-light)}
.combo-hit .h1{font-size:13px;color:var(--ink);font-weight:600;
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-hit .h2{font-size:11.5px;color:var(--muted)}
.combo-none{padding:12px 10px;font-size:12.5px;color:var(--muted)}

/* Log a call — outcome chips, then one button. */
.lg-out{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.lgo{cursor:pointer;font-size:12px;text-transform:capitalize}
.lgo.on{background:var(--primary-light);border-color:transparent;color:var(--primary);font-weight:600}
.lg-row #lgMin{flex:0 0 74px;min-width:0}
.pcall{font-size:12px;color:var(--primary);text-decoration:none;white-space:nowrap;
  padding:6px 8px;border-radius:var(--radius-s);min-height:32px;
  display:inline-flex;align-items:center}
.pcall:hover{background:var(--primary-light)}
.cph a{color:var(--primary);text-decoration:none}
.cph a:hover{text-decoration:underline}
/* A logged human call reads differently from the dialer's rows. */
.ev.humancall{border-left-color:var(--primary)}
@media (max-width:820px){ .pcall{min-height:44px} .lgo{min-height:44px}
  .lg-row #lgMin{min-height:44px;font-size:16px} }

/* ------------------------------------------------------------ Sales Desk ----
   The LaunchMyStore panel in a deal, its sheets, the Design half of the deal's
   AI thread, the board chip, and the Sales / Commissions / Templates tabs.
   Polaris tokens only: colour is STATE (sent/opened/paid), never decoration. */
.repcode{font-size:12px;color:var(--muted);white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--border);border-radius:99px;
  padding:3px 10px;line-height:18px}
.repcode b{color:var(--ink);font-family:var(--mono);letter-spacing:.04em;font-weight:650}
button.repcode{font-family:inherit;cursor:pointer}
button.repcode:hover{border-color:var(--border-strong);color:var(--text)}
.sn-who.clickable{cursor:pointer;border-radius:var(--radius-s);padding:6px 10px}
.sn-who.clickable:hover{background:var(--hover)}
.phonecell{display:inline-flex;gap:6px;align-items:center}
.phonecell input{width:150px;min-height:32px;border:1px solid var(--border);
  border-radius:var(--radius-s);background:var(--field);color:var(--text);
  padding:5px 9px;font:inherit;font-size:13px}
.phonecell input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.muted{color:var(--muted)}
.schip{font-size:10.5px;font-weight:650;letter-spacing:.01em;padding:1px 8px;
  border-radius:99px;white-space:nowrap;line-height:17px;display:inline-block}
.schip.success{background:var(--success-bg);color:var(--success-ink)}
.schip.info{background:var(--info-bg);color:var(--info)}
.schip.warn{background:var(--warn-bg);color:var(--warn-ink)}
.schip.muted{background:var(--surface-2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border)}
.card .salerow{margin-top:7px}
.btn .ico{width:17px;height:17px;flex:none}
.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.banner .bi .ico{width:17px;height:17px;display:block}
.banner.nomb{margin-bottom:0}

/* the tracker: Store -> Designed -> Link sent -> Paid */
.lms-track{list-style:none;margin:2px 0 14px;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr)}
.lt{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;
  font-size:11.5px;font-weight:550;color:var(--faint);text-align:center}
.lt::before{content:"";position:absolute;top:11px;left:-50%;right:50%;height:2px;
  background:var(--border)}
.lt:first-child::before{display:none}
.lt.done::before{background:var(--success)}
.lt.cur::before{background:linear-gradient(90deg,var(--success),var(--border))}
.lt-dot{width:24px;height:24px;border-radius:50%;background:var(--card);
  border:2px solid var(--border);display:grid;place-items:center;position:relative;
  z-index:1;font-size:11px;font-weight:650;color:var(--faint)}
.lt-dot .ico{width:14px;height:14px;stroke-width:2.2}
.lt.done{color:var(--text)}
.lt.done .lt-dot{background:var(--success);border-color:var(--success);color:#fff}
.lt.cur{color:var(--ink)}
.lt.cur .lt-dot{border-color:var(--ink);color:var(--ink)}

.lms-acct{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;background:var(--card);border:1px solid var(--border-soft);
  border-radius:var(--radius-s);padding:10px 12px;margin-bottom:10px}
.la-main{display:flex;gap:9px;align-items:flex-start;min-width:0}
.la-main>.ico{width:20px;height:20px;color:var(--muted);flex:none;margin-top:1px}
.la-main b{display:block;color:var(--ink);font-size:14px;font-weight:650}
.la-main a{font-size:12px;word-break:break-all}
.chips{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.lms-btns{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.lms-btns .btn{justify-content:flex-start;min-height:40px;white-space:normal;
  text-align:left;line-height:1.25}
.lms-sub{font-size:11.5px;font-weight:650;color:var(--muted);margin:16px 0 7px}
.lms-note{display:flex;gap:6px;align-items:flex-start;font-size:12px;color:var(--muted);
  margin-top:10px;line-height:1.45}
.lms-note.first{margin:0 0 12px}
.lms-note .ico{width:15px;height:15px;flex:none;margin-top:1px}
.pl-row{display:flex;gap:8px 10px;align-items:center;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--border-soft);border-radius:var(--radius-s);padding:9px 11px;
  margin-bottom:6px}
.pl-main{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:1px}
.pl-main b,.pl-main .mono{font-size:13px;font-weight:650;color:var(--ink)}
.pl-main span:last-child{font-size:12px;color:var(--muted)}
.pl-act{display:flex;gap:6px;flex-wrap:wrap;width:100%}
.pl-act .btn{min-height:32px;padding:0 10px;font-size:12px}
.pl-act .btn .ico{width:15px;height:15px}
.checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 14px}
.ck{display:flex;align-items:center;gap:7px;color:var(--muted);min-height:28px;font-size:12.5px}
.ck.on{color:var(--text)}
.ck .ico{width:16px;height:16px;color:var(--border-strong);flex:none}
.ck.on .ico{color:var(--success);stroke-width:2.2}

/* segmented control (Ask | Design store, Monthly | Yearly) */
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-s);
  overflow:hidden;background:var(--card)}
.seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:0;background:none;font:inherit;font-size:12.5px;font-weight:550;color:var(--muted);
  padding:0 14px;min-height:34px;border-right:1px solid var(--border);cursor:pointer}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--hover);color:var(--ink)}
.seg button.on{background:var(--ink);color:var(--card)}
.seg button[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.seg button .ico{width:15px;height:15px}
.seg.wide{display:flex}
.seg.wide button{flex:1}
.aimode-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.aimode-why{font-size:11.5px;color:var(--muted)}
.dealchat .md-empty{padding:4px 2px}

/* sheet contents */
.sheet{width:520px}
.fld2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lbl-note{font-weight:500;color:var(--faint);margin-left:4px}
.field label b{color:var(--ink)}
.planbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.planbtn{border:1px solid var(--border);background:var(--card);border-radius:var(--radius-s);
  padding:10px;text-align:left;font:inherit;min-height:58px;display:flex;flex-direction:column;
  justify-content:center;gap:2px;cursor:pointer;color:var(--text)}
.planbtn:hover{border-color:var(--border-strong)}
.planbtn b{font-size:13.5px;color:var(--ink);font-weight:650}
.planbtn span{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.planbtn.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--surface-2)}
.field input[type=range]{width:100%;accent-color:var(--ink);min-height:32px;padding:0;
  border:0;background:none;box-shadow:none}
.sumbox{background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:var(--radius-s);padding:10px 13px;font-size:13px;margin-top:4px}
.sumbox .r{display:flex;justify-content:space-between;gap:12px;padding:3px 0;
  font-variant-numeric:tabular-nums}
.sumbox .r.tot{font-weight:650;color:var(--ink);font-size:15.5px;
  border-top:1px solid var(--border);margin-top:5px;padding-top:8px}
.sumbox .r.comm{color:var(--success-ink);font-weight:600;font-size:12.5px}
.sharebox input{width:100%;font-family:var(--mono);font-size:14px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--ink);border-radius:var(--radius-s);padding:10px 12px;
  min-height:42px}
.sharecode{font-size:24px;font-weight:700;letter-spacing:.06em;color:var(--ink);text-align:center;
  background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--radius-s);
  padding:12px}
.share-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:12px}
.share-row .btn{min-height:44px}
.btn.wa{background:var(--success-bg);border-color:transparent;color:var(--success-ink);box-shadow:none}
.btn.wa:hover{filter:brightness(.96);background:var(--success-bg)}
.msgprev{white-space:pre-wrap;font-size:12.5px;line-height:1.5;color:var(--text);
  background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-s);
  padding:10px 12px;margin-top:12px;max-height:150px;overflow:auto}
.daybtns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}

/* the design run, streamed into the thread */
.msg.run{max-width:100%}
.msg.run .bub{display:flex;flex-direction:column;gap:7px;min-width:min(420px,100%)}
.rl{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--text);line-height:1.45}
.rl .ico{width:15px;height:15px;flex:none;margin-top:2px}
.rl.tool .ico{color:var(--success);stroke-width:2.2}
.rl.note{color:var(--muted)}
.rl.err{color:var(--error-ink)}
/* text + summary hold a whole markdown fragment (p, ul, h4…): as flex rows
   those blocks sat side by side in narrow columns */
.rl.txt,.rl.sum{display:block;word-break:break-word}
.rl.txt p,.rl.sum p{margin:0 0 4px}
.rl.txt>:last-child,.rl.sum>:last-child{margin-bottom:0}
.rl.txt ul,.rl.txt ol,.rl.sum ul,.rl.sum ol{margin:0 0 6px;padding-left:18px}
.rl.txt li,.rl.sum li{margin:2px 0}
.rl.txt h4,.rl.sum h4{margin:6px 0 4px;font-size:13px;font-weight:650;color:var(--ink)}
.rl.txt code,.rl.sum code{background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:4px;padding:1px 4px;font-size:11.5px}
.rl.txt a,.rl.sum a{color:var(--primary)}
.rl.sum{font-size:13.5px;border-top:1px solid var(--border-soft);padding-top:8px}
.rl.q{flex-direction:column;gap:6px;background:var(--warn-bg);border-radius:var(--radius-s);
  padding:8px 10px}
.qchips{display:flex;gap:6px;flex-wrap:wrap}
.qchips .chip{cursor:pointer}
.qchips .chip.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.runfoot{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);
  border-top:1px solid var(--border-soft);padding-top:7px}
.runfoot .spinner{width:14px;height:14px}
.runfoot .lnk{margin-left:auto}
.btn.preview{align-self:flex-start}

/* My Day: the Sales Desk group sits first */
.md-group{margin-bottom:6px}
.md-ic .ico{width:15px;height:15px}

/* Reports tabs + the three Sales Desk screens */
.rtabs{display:flex;gap:2px;max-width:960px;margin:0 auto 16px;border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none}
.rtabs::-webkit-scrollbar{display:none}
.rtab{border:0;background:none;color:var(--muted);font:inherit;font-weight:550;font-size:13.5px;
  padding:10px 14px 9px;white-space:nowrap;border-bottom:2px solid transparent;cursor:pointer;
  margin-bottom:-1px}
.rtab:hover{color:var(--ink)}
.rtab.on{color:var(--ink);border-bottom-color:var(--ink)}
.sales-rep,.cm,.tpl{max-width:960px;margin:0 auto}
.sales-rep h2,.cm h2,.tpl h2{font-size:16px;font-weight:650;color:var(--ink);margin:0 0 4px}
.cm .sub,.tpl .sub{color:var(--muted);font-size:12.5px;margin-bottom:14px;line-height:1.5}
.kpis.sk{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:12px 0 4px}
.kpis.sk .kpi b{font-size:18px}
/* Sales report: 4 funnel tiles then 3 commission tiles -- auto-fit left the
   seventh tile alone on a second row */
.kpis.sk.four{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:12px}
.kpis.sk.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpis.sk .kpi b.stack{display:flex;flex-direction:column;gap:2px}
.kpis.sk .kpi b.stack .cur{white-space:nowrap;font-size:inherit;color:inherit;
  font-weight:inherit;letter-spacing:normal}  /* not the .kpi span label style */
@media (max-width:820px){
  .kpis.sk.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis.sk.three{grid-template-columns:1fr}
}
.kpis.sk .kpi small{font-size:12px;color:var(--muted);font-weight:550}
.rep-team td .muted{font-size:11.5px}
.cm-bar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:6px}
.cm-bar .field{margin-bottom:0}
.cm-bar .btn{min-height:40px}
.cm-group{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:4px 12px 8px;margin-top:12px}
.cm-head{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-soft);
  margin-bottom:6px}
.cm-head b{color:var(--ink)}
.cm-row{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;padding:7px 0;
  border-bottom:1px solid var(--border-soft)}
.cm-row:last-child{border-bottom:0}
.cm-pay input{flex:1 1 180px;min-height:32px;border:1px solid var(--border);border-radius:var(--radius-s);
  background:var(--field);color:var(--text);padding:6px 10px;font:inherit;font-size:13px}
.tpl-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:12px}
.tpl-card h3{font-size:13.5px;font-weight:650;color:var(--ink);margin:0 0 10px}
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tpl textarea{resize:vertical;line-height:1.5}
.tpl .field .btn{margin-top:6px}
.tpl code{font-family:var(--mono);font-size:11.5px;background:var(--surface-2);
  border:1px solid var(--border-soft);border-radius:4px;padding:0 4px}

/* the timeline: one dot colour per automated source */
.ev.lms::before{background:var(--info)}
.ev.paylink::before{background:var(--success)}
.ev.aidesign::before{background:var(--primary)}
.ev.demo::before{background:var(--warn)}

@media (max-width:820px){
  .repcode{padding:3px 12px;min-height:44px}
  .phonecell input{font-size:16px;min-height:44px}
  .phonecell .btn{min-height:44px}
  .lms-btns{grid-template-columns:1fr 1fr}
  .lms-btns .btn{min-height:48px}
  .pl-act .btn{min-height:44px;flex:1 1 auto}
  .seg button{min-height:44px}
  .planbtn{min-height:64px}
  .planbtns{gap:6px}
  .fld2{grid-template-columns:1fr}
  .daybtns{grid-template-columns:1fr 1fr}
  .daybtns .btn,.share-row .btn{min-height:48px}
  .field input[type=range]{min-height:44px}
  .sheet .field input,.sheet .field select,.sharebox input,.cm-pay input,
  .cm-bar input,.cm-bar select,.tpl textarea{font-size:16px;min-height:44px}
  .cm-bar .field{flex:1 1 140px}
  .cm-bar .btn{flex:1 1 100%;min-height:44px}
  .rtab{min-height:44px;display:inline-flex;align-items:center}
  .tpl-grid{grid-template-columns:1fr}
  .qchips .chip{min-height:44px}
  .ck{min-height:32px}
  .msg.run .bub{min-width:0}
}
@media (max-width:440px){
  .lms-btns{grid-template-columns:1fr}
  .repcode .hide-sm{display:none}
}