/* ════════════════════════════════════════════════════════════════════════════
   spartan-tokens.css — design tokens + new mockup component primitives.

   PHILOSOPHY (after a v1 attempt that broke production by globally overriding
   existing classes): this file is STRICTLY ADDITIVE. It introduces tokens
   (CSS custom properties) and BRAND-NEW class names from design-mockup.html
   that don't collide with anything in styles.css or portal-theme.css. It
   does NOT redeclare .btn-r / .card / .pill / .modal / .nav-item / etc. —
   those keep working as they always have.

   A renderer opts into the new look by emitting the new classes (e.g.
   .modbar, .sb, .tb, .kpi, .kcol, .page-hero, .page-title). Until a renderer
   does that, its surface looks like before. Migrations are page-by-page,
   verifiable, and trivially revertable.

   The mockup hero `.page-title` stroke-bug killer lives here too — but it
   only matters where a renderer emits `class="page-title"`. No existing
   surface does, so this is also additive.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ────────────────────────────────────────────────────────────────── */
:root{
  /* Brand */
  --red:#C41230;
  --red-dark:#A60F28;
  --ink:#0A0A0A;
  --pale-red:#FBF3F4;
  --anthracite:#383E42;

  /* Warm-stone scale */
  --s50:#FAFAF9;
  --s100:#F5F5F4;
  --s200:#E7E5E4;
  --s300:#D6D3D1;
  --s400:#A8A29E;
  --s500:#78716C;
  --s600:#57534E;
  --s700:#44403C;
  --s800:#292524;
  --s900:#1C1917;

  /* Status */
  --warn-bg:#FEF3C7;
  --warn-fg:#92400E;
  --ok-bg:#DCFCE7;
  --ok-fg:#15803D;
  --err-bg:#FEE2E2;
  --err-fg:#B91C1C;
  --info-bg:#DBEAFE;
  --info-fg:#1D4ED8;

  /* Shell metrics */
  --tb-h:56px;
  --mod-h:40px;
  --sb-w:260px;

  /* Radius */
  --r-xs:6px;
  --r-sm:8px;
  --r-md:10px;
  --r-lg:12px;
  --r-xl:14px;
  --r-2xl:16px;

  /* Shadows */
  --sh-1:0 1px 2px rgba(0,0,0,.04);
  --sh-2:0 1px 2px rgba(0,0,0,.04),0 8px 24px -12px rgba(0,0,0,.12);
  --sh-3:0 12px 32px -8px rgba(0,0,0,.18);
  --sh-4:0 24px 60px -16px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.04);

  /* Motion */
  --dur-fast:120ms;
  --dur-base:180ms;
  --dur-slow:260ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);

  /* Focus ring */
  --ring-focus:0 0 0 2px #fff,0 0 0 4px var(--ink);

  /* Type families */
  --ff-sans:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ff-narrow:'Archivo Narrow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ── REDUCED MOTION ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── TYPE SCALE (new — emitted only where a renderer opts in) ────────────── */
.display{font-weight:800;letter-spacing:-0.025em;color:var(--ink)}
.display-xl{font-weight:900;letter-spacing:-0.035em;color:var(--ink)}
.h-hero{font-size:60px;line-height:0.95;font-weight:900;letter-spacing:-0.035em}
.h-page{font-size:46px;line-height:1.05;font-weight:800;letter-spacing:-0.025em}
.h-section{font-size:22px;line-height:1.15;font-weight:800;letter-spacing:-0.025em}
.h-card{font-size:18px;line-height:1.15;font-weight:800;letter-spacing:-0.02em}
.body{font-size:14px;color:var(--s600);line-height:1.6}
.cap{font-size:12px;color:var(--s500)}
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:var(--s400);line-height:1;display:inline-block}
.muted{color:var(--s400)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.narrow{font-family:var(--ff-narrow)}

/* ── LAYOUT PRIMITIVES ─────────────────────────────────────────────────────── */
.sp-row{display:flex;align-items:center;gap:8px}
.sp-rowy{display:flex;gap:8px}
.sp-col{display:flex;flex-direction:column;gap:8px}
.sp-stack-3{display:flex;flex-direction:column;gap:12px}
.sp-stack-4{display:flex;flex-direction:column;gap:16px}
.sp-stack-5{display:flex;flex-direction:column;gap:20px}
.sp-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.sp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sp-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sp-grow{flex:1 1 0%}
.sp-shrink-0{flex-shrink:0}
.sp-between{justify-content:space-between}
.sp-center{justify-content:center;align-items:center}
.sp-aend{align-items:flex-end}
.sp-astart{align-items:flex-start}
.sp-abase{align-items:baseline}
.sp-wrap{flex-wrap:wrap}
.sp-mlauto{margin-left:auto}
.sp-hide{display:none !important}
.sp-pos{position:relative}

/* ── ICON SIZING (new svg-class only — existing icons via Icon({}) untouched) */
.ico{width:16px;height:16px;display:inline-block;vertical-align:middle;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ico-sm{width:13px;height:13px}
.ico-md{width:18px;height:18px}
.ico-lg{width:20px;height:20px}
.ico-xl{width:24px;height:24px}

/* ── MODULE BAR (new class — no collisions) ──────────────────────────────── */
.modbar{
  position:fixed;top:0;left:0;right:0;
  height:var(--mod-h);
  background:var(--ink);color:#fff;
  display:flex;align-items:center;
  padding:0 20px;
  z-index:50;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.brand-mod{display:flex;align-items:center;gap:10px;margin-right:24px}
.brand-dot{width:6px;height:6px;border-radius:3px;background:var(--red)}
.brand-name{font-weight:900;letter-spacing:0.06em;font-size:13px;font-family:var(--ff-sans)}
.brand-sub{font-size:9.5px;font-weight:700;letter-spacing:0.22em;color:rgba(255,255,255,.4);text-transform:uppercase}
.mod-tabs{display:flex;align-items:stretch;height:100%}
.mod-tab{
  padding:0 14px;color:rgba(255,255,255,.55);
  font-size:12px;font-weight:700;letter-spacing:0.04em;
  text-transform:uppercase;height:100%;
  display:inline-flex;align-items:center;
  position:relative;
  background:none;border:none;cursor:pointer;
  font-family:var(--ff-sans);
  transition:color var(--dur-base) var(--ease-out);
}
.mod-tab:hover{color:rgba(255,255,255,.85)}
.mod-tab.on{color:#fff}
.mod-tab.on::after{
  content:'';position:absolute;left:14px;right:14px;bottom:0;
  height:2px;background:var(--red);
  border-radius:1px 1px 0 0;
}
.mod-meta{
  margin-left:auto;font-size:11px;color:rgba(255,255,255,.4);
  font-weight:500;letter-spacing:0.06em;text-transform:uppercase;
}

/* ── SIDEBAR (new class — no collisions with #sidebar id-styling) ─────────── */
.sb{
  background:var(--ink);color:#fff;
  display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.05);
}
.sb-brand{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.sb-mark{width:36px;height:36px;border-radius:8px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex-shrink:0;font-family:var(--ff-sans)}
.sb-name{font-weight:900;letter-spacing:0.04em;font-size:14px;line-height:1;font-family:var(--ff-sans)}
.sb-nameSub{font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;margin-top:3px}
.sb-collapse{width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;background:transparent;cursor:pointer;transition:background var(--dur-base) var(--ease-out)}
.sb-collapse:hover{background:rgba(255,255,255,.06)}
.sb-nav{flex:1;overflow-y:auto;padding:12px 12px 16px}
.sb-section{padding:14px 12px 6px;font-size:9.5px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.sb-section:first-child{padding-top:6px}
.sb-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;
  font-size:13px;font-weight:600;
  color:rgba(255,255,255,.6);
  cursor:pointer;position:relative;
  background:transparent;border:none;width:100%;text-align:left;
  font-family:var(--ff-sans);
  transition:color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);
  letter-spacing:-0.005em;
}
.sb-item:hover{color:#fff;background:rgba(255,255,255,.06)}
.sb-item.on,.sb-item[aria-current="page"]{color:#fff;background:rgba(255,255,255,.08)}
.sb-item.on::before,.sb-item[aria-current="page"]::before{
  content:'';position:absolute;left:-2px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;background:var(--red);border-radius:0 2px 2px 0;
}
.sb-item .ico{flex-shrink:0}
.sb-item-label{flex:1}
.sb-badge{background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 7px;letter-spacing:-0.02em}
.sb-badge.ok{background:var(--ok-fg)}
.sb-foot{padding:12px;border-top:1px solid rgba(255,255,255,.06)}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background var(--dur-base) var(--ease-out)}
.sb-user:hover{background:rgba(255,255,255,.06)}
.sb-avatar{width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.sb-user-name{font-size:12.5px;font-weight:700;line-height:1.2}
.sb-user-meta{font-size:10.5px;color:rgba(255,255,255,.5);margin-top:2px;letter-spacing:0.04em}
.sb-signout{width:100%;margin-top:8px;padding:8px;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:rgba(255,255,255,.6);font-size:10.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;font-family:var(--ff-sans);transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.sb-signout:hover{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.2)}

/* ── TOPBAR (new class — does not collide with #topbar id-styling) ───────── */
.tb{
  background:#fff;
  border-bottom:1px solid var(--s200);
  display:flex;align-items:center;
  gap:14px;
}
.tb-navbtn{width:32px;height:32px;border-radius:10px;border:1px solid var(--s200);background:#fff;color:var(--s700);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.tb-navbtn:hover{background:var(--s50);border-color:var(--s300)}
.tb-navbtn.disabled{color:var(--s300);cursor:default}
.tb-search-wrap{position:relative;flex:1;max-width:440px}
.tb-search{
  width:100%;padding:10px 12px 10px 38px;
  background:var(--s100);
  border:1px solid transparent;border-radius:10px;
  font-size:13px;font-family:var(--ff-sans);
  transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.tb-search:focus{background:#fff;border-color:var(--ink);outline:none}
.tb-search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--s400);pointer-events:none}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.tb-icon-btn{width:36px;height:36px;border-radius:10px;background:transparent;border:1px solid transparent;color:var(--s600);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.tb-icon-btn:hover{background:var(--s100);color:var(--ink)}
.tb-dot{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;background:var(--red);border-radius:10px;font-size:10px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}
.tb-profile{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 6px;border:1px solid var(--s200);border-radius:14px;margin-left:6px;cursor:pointer;background:#fff;transition:background var(--dur-base) var(--ease-out)}
.tb-profile:hover{background:var(--s50)}
.tb-profile-name{font-size:12.5px;font-weight:700;line-height:1.15;letter-spacing:-0.005em}
.tb-profile-role{font-size:10px;color:var(--s400);letter-spacing:0.08em;text-transform:uppercase;font-weight:600;margin-top:2px}
.tb-branch{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;border:1px solid var(--s200);background:#fff;color:var(--s700);font-size:12px;font-weight:700;letter-spacing:0.04em;cursor:pointer;transition:background var(--dur-base) var(--ease-out)}
.tb-branch:hover{background:var(--s50)}

/* status dots */
.sp-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.sp-dot-red{background:var(--red)}
.sp-dot-blue{background:var(--info-fg)}
.sp-dot-green{background:var(--ok-fg)}
.sp-dot-violet{background:#6D28D9}
.sp-dot-amber{background:var(--warn-fg)}

/* ── PAGE CHASSIS (new class — no existing emission) ─────────────────────── */
/* Polish-pass spec (2026-05-21): hero scales 36→60px via clamp so the
   layout breathes on big monitors but doesn't crush on 1280px laptops.
   max-width:18ch + text-wrap:balance prevents the word-per-line wrap bug
   we shipped in the v2 dashboard; padding-bottom keeps y/g/p descenders
   visible (was clipping at line-height:1.02). */
.page-hero{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:24px;flex-wrap:wrap;
  padding:32px 0 28px;
  margin-bottom:0;
}
.page-hero>*{min-width:0}

/* Hero title — stroke-bug killer + breathing room. */
.page-title,
h1.page-title,
.page-hero .page-title{
  font-size:clamp(36px, 4.4vw, 60px);
  line-height:1.02;
  font-weight:900;
  letter-spacing:-0.035em;
  color:var(--ink);
  font-family:var(--ff-sans);
  max-width:18ch;
  text-wrap:balance;
  padding-bottom:0.08em;
  overflow:visible;
  /* hard kill any historical stroke artefact */
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  text-decoration:none;
  outline:none;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  -webkit-text-fill-color:currentColor;
  margin:0;
}
.page-title .muted{color:var(--s400)}
.page-sub{font-size:14px;color:var(--s600);margin-top:12px;line-height:1.55;max-width:560px}

/* ── NEW BUTTONS (.sp-btn — avoids colliding with legacy .btn-r) ─────────── */
.sp-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 16px;border-radius:12px;
  font-size:13.5px;font-weight:700;letter-spacing:-0.005em;
  border:1px solid transparent;background:none;cursor:pointer;
  font-family:var(--ff-sans);color:inherit;
  transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
  white-space:nowrap;
}
.sp-btn:active{transform:scale(.97);transition:transform var(--dur-fast) var(--ease-out)}
.sp-btn-r{background:var(--red);color:#fff;border-color:var(--red)}
.sp-btn-r:hover{background:var(--red-dark);border-color:var(--red-dark)}
.sp-btn-w{background:#fff;color:var(--s700);border-color:var(--s200)}
.sp-btn-w:hover{background:var(--s50);border-color:var(--s300);color:var(--ink)}
.sp-btn-d{background:var(--ink);color:#fff;border-color:var(--ink)}
.sp-btn-d:hover{background:var(--s800)}
.sp-btn-g{color:var(--s600);font-weight:600;padding:8px 12px;border-radius:10px;background:none;border:none}
.sp-btn-g:hover{background:var(--s100);color:var(--ink)}
.sp-btn-sm{padding:8px 12px;font-size:12px;border-radius:10px}
.sp-btn-xs{padding:7px 10px;font-size:11.5px;border-radius:8px;gap:4px}
.sp-btn-block{width:100%;justify-content:center}
.sp-btn-icon{width:36px;height:36px;padding:0;justify-content:center;align-items:center}

/* ── NEW PILLS (.sp-pill — avoids legacy .pill chip pattern) ─────────────── */
.sp-pill{
  display:inline-block;
  font-size:10px;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;
}
.sp-pill-red{background:var(--pale-red);color:var(--red)}
.sp-pill-ink{background:var(--ink);color:#fff}
.sp-pill-warn{background:var(--warn-bg);color:var(--warn-fg)}
.sp-pill-ok{background:var(--ok-bg);color:var(--ok-fg)}
.sp-pill-neutral{background:var(--s100);color:var(--s700)}
.sp-pill-blue{background:var(--info-bg);color:var(--info-fg)}
.sp-pill-err{background:var(--err-bg);color:var(--err-fg)}

/* ── NEW CARDS (.sp-card — avoids legacy .card collision) ─────────────────── */
.sp-card{
  background:#fff;
  border:1px solid var(--s200);
  border-radius:16px;
  padding:24px;
}
.sp-card-sm{padding:18px}
.sp-card-lg{padding:28px}
.sp-card-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.sp-card-accent{background:var(--pale-red);border:1px solid rgba(196,18,48,0.13)}
.sp-card-tap{cursor:pointer;transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.sp-card-tap:hover{border-color:var(--ink);box-shadow:var(--sh-2)}
.sp-card-flat{background:var(--s50);border:1px solid var(--s200);border-radius:14px;padding:16px}

/* ── INPUT (new label class only; legacy .inp/.sel untouched) ────────────── */
.fld-label{display:block;font-size:12.5px;font-weight:600;color:var(--s700);margin-bottom:6px}

/* ── DATA ROW (new) ──────────────────────────────────────────────────────── */
.data-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:11px 0;border-bottom:1px solid var(--s100)}
.data-row:last-child{border-bottom:0}
.dr-label{font-size:10.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--s400);padding-top:2px}
.dr-value{text-align:right}
.dr-v1{font-size:13px;font-weight:700;color:var(--ink)}
.dr-v2{font-size:11px;color:var(--s500);margin-top:2px}

/* ── TABLE (new — avoids legacy .th/.td which already exist) ─────────────── */
.tbl{border-collapse:collapse;width:100%}
.tbl thead tr{background:var(--s50);border-top:1px solid var(--s200);border-bottom:1px solid var(--s200)}
.tbl th{padding:11px 14px;text-align:left;font-size:10.5px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:var(--s400);white-space:nowrap}
.tbl td{padding:13px 14px;font-size:13px;border-bottom:1px solid var(--s100);vertical-align:top}
.tbl tbody tr:hover{background:var(--s50);cursor:pointer}
.tbl-wrap{background:#fff;border:1px solid var(--s200);border-radius:16px;overflow:hidden}

/* ── AVATAR (new) ────────────────────────────────────────────────────────── */
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;font-size:11px;flex-shrink:0;background:var(--s500)}
.av-sm{width:24px;height:24px;font-size:9px}
.av-md{width:32px;height:32px;font-size:10.5px}
.av-lg{width:40px;height:40px;font-size:12px}
.av-xl{width:80px;height:80px;border-radius:16px;font-size:24px;font-weight:800;letter-spacing:-0.025em}

/* ── KPI (new) ───────────────────────────────────────────────────────────── */
.kpi{
  background:#fff;
  border:1px solid var(--s200);
  border-radius:16px;
  padding:20px;
  transition:border-color var(--dur-base) var(--ease-out);
}
.kpi:hover{border-color:var(--s300)}
.kpi-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:var(--s400);margin-bottom:10px}
.kpi-val{font-size:36px;font-weight:800;letter-spacing:-0.025em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;font-family:var(--ff-sans)}
.kpi-sub{font-size:12px;color:var(--s500);font-weight:500}
.kpi-meta{font-size:11.5px;font-weight:600;margin-top:8px}
.kpi-up{color:var(--ok-fg)}
.kpi-down{color:var(--err-fg)}
.kpi-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.kpi-dark .kpi-eyebrow{color:rgba(255,255,255,.45)}
.kpi-dark .kpi-val{color:#fff}
.kpi-dark .kpi-sub{color:rgba(255,255,255,.6)}

/* ── BAR (new) ───────────────────────────────────────────────────────────── */
.bar{height:8px;background:var(--s100);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;background:var(--ink);border-radius:999px}
.bar-fill.red{background:var(--red)}
.bar-fill.ok{background:var(--ok-fg)}
.bar-fill.warn{background:var(--warn-fg)}
.bar-thin{height:6px}
.bar-fat{height:10px}

/* ── EMPTY STATE (new class — does not collide with .empty? in styles.css if present) */
.sp-empty{background:var(--s50);border:1px solid var(--s200);border-radius:16px;padding:40px 24px;text-align:center}
.sp-empty-ico{width:48px;height:48px;border-radius:50%;background:var(--s200);color:var(--s500);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.sp-empty-title{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-0.015em;font-family:var(--ff-sans)}
.sp-empty-body{font-size:13px;color:var(--s500);margin-top:6px;line-height:1.5;max-width:380px;margin-left:auto;margin-right:auto}
.sp-empty-cta{margin-top:16px;display:inline-flex}

/* ── DIVIDERS (new) ──────────────────────────────────────────────────────── */
.divider-h{height:1px;background:var(--s100);margin:16px 0}
.divider-with-text{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:11px;color:var(--s400);letter-spacing:0.18em;text-transform:uppercase}
.divider-with-text::before,.divider-with-text::after{content:'';flex:1;height:1px;background:var(--s200)}

/* ── KANBAN (new classes — does not collide with legacy .kanban-col / .deal-card) */
.kanban-scroll{overflow-x:auto;padding:0 32px 24px}
.kanban{display:flex;gap:16px;min-width:max-content}
.kcol{
  width:300px;
  background:var(--s100);
  border:1px solid var(--s200);
  border-radius:16px;
  display:flex;flex-direction:column;
  max-height:calc(100vh - 260px);
}
.kcol-head{padding:16px;border-bottom:1px solid var(--s200)}
.kcol-list{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.kcol-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.kcol-dark .kcol-head{border-bottom-color:rgba(255,255,255,.1)}
.kcard{
  background:#fff;
  border:1px solid var(--s200);
  border-radius:12px;
  padding:14px;
  cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.kcard:hover{border-color:var(--ink);box-shadow:var(--sh-2)}
.kcard.stale,.kcard[data-stale="true"]{border-left:3px solid var(--red);padding-left:11px}
.kcard-dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.kcard-dark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);box-shadow:none}
.col-count{background:#fff;border:1px solid var(--s200);color:var(--s700);font-size:10.5px;font-weight:700;border-radius:6px;padding:1px 8px}
.kcol-dark .col-count{background:rgba(255,255,255,.1);border:none;color:#fff}

/* ── TIMELINE (new) ──────────────────────────────────────────────────────── */
.tline-item{display:flex;gap:16px;padding-bottom:20px;position:relative}
.tline-item:not(:last-child)::before{content:'';position:absolute;left:15px;top:36px;bottom:0;width:1px;background:var(--s200)}
.tline-ico{width:32px;height:32px;border-radius:10px;background:var(--s100);color:var(--s700);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tline-ico.red{background:var(--pale-red);color:var(--red)}
.tline-ico.ink{background:var(--ink);color:#fff}
.tline-ico.ok{background:var(--ok-bg);color:var(--ok-fg)}
.tline-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tline-title{font-size:13px;font-weight:700}
.tline-date{font-size:11px;color:var(--s400);font-weight:500;white-space:nowrap}
.tline-body{font-size:12.5px;color:var(--s600);line-height:1.55;margin-top:6px}

/* ── BREADCRUMB (new) ────────────────────────────────────────────────────── */
.crumb{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--s500);margin-bottom:20px}
.crumb-back{font-weight:600;color:var(--s600);display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;transition:color var(--dur-base) var(--ease-out);padding:0;font-family:var(--ff-sans)}
.crumb-back:hover{color:var(--ink)}
.crumb-now{color:var(--ink);font-weight:700}

/* ── CALENDAR (new) ──────────────────────────────────────────────────────── */
.cal-grid{background:#fff;border:1px solid var(--s200);border-radius:16px;overflow:hidden}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--s200);background:var(--s50)}
.cal-head-cell{padding:12px 14px;border-right:1px solid var(--s200);font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--s500)}
.cal-head-cell:last-child{border-right:0}
.cal-head-cell.today{background:var(--pale-red);color:var(--red)}
.cal-body{display:grid;grid-template-columns:repeat(7,1fr);min-height:440px}
.cal-cell{padding:8px;border-right:1px solid var(--s200);display:flex;flex-direction:column;gap:6px}
.cal-cell:last-child{border-right:0}
.cal-cell.today{background:rgba(251,243,244,.4)}
.cal-cell.disabled{background:rgba(245,245,244,.5)}
.cal-event{
  background:var(--s100);
  border:1px solid var(--s200);
  border-radius:10px;
  padding:10px;
  font-size:11.5px;
  cursor:pointer;
  transition:background var(--dur-base) var(--ease-out);
}
.cal-event:hover{background:var(--s200)}
.cal-event-now{background:var(--red);color:#fff;border-color:var(--red)}
.cal-event-now:hover{background:var(--red-dark)}
.cal-event-title{font-weight:700;line-height:1.2}
.cal-event-meta{font-size:10.5px;color:var(--s500);margin-top:2px}
.cal-event-now .cal-event-meta{color:rgba(255,255,255,.85)}

/* ── EMAIL (new) ─────────────────────────────────────────────────────────── */
.mail-grid{display:grid;grid-template-columns:230px 380px 1fr;height:calc(100vh - 100px);background:#fff}
.mail-folders{border-right:1px solid var(--s200);padding:18px;overflow-y:auto}
.mail-list{border-right:1px solid var(--s200);overflow-y:auto}
.mail-list-head{padding:18px 20px;border-bottom:1px solid var(--s200);position:sticky;top:0;background:#fff;z-index:1}
.mail-item{padding:14px 20px;border-bottom:1px solid var(--s100);cursor:pointer;transition:background var(--dur-base) var(--ease-out)}
.mail-item:hover{background:var(--s50)}
.mail-item.unread{background:rgba(251,243,244,.4);border-left:2px solid var(--red);padding-left:18px}
.mail-from{font-size:13px;font-weight:700;color:var(--ink)}
.mail-from.read{color:var(--s500)}
.mail-subj{font-size:12.5px;font-weight:600;color:var(--ink);margin:2px 0}
.mail-subj.read{color:var(--s700)}
.mail-snip{font-size:11.5px;color:var(--s500);line-height:1.45}
.mail-time{font-size:11px;color:var(--s500);float:right}
.mail-msg{overflow-y:auto;padding:0}
.mail-msg-head{padding:20px 28px;border-bottom:1px solid var(--s200);position:sticky;top:0;background:#fff;z-index:1}
.mail-msg-body{padding:24px 28px}
.mail-msg-body p{font-size:14px;color:var(--s700);line-height:1.65;margin-bottom:14px}

/* ── STAGE TRACK (new) ───────────────────────────────────────────────────── */
.stages{display:flex;align-items:center;gap:4px}
.stage{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.stage-bub{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--s100);border:1px solid var(--s200);color:var(--s400);font-weight:700;font-size:12px}
.stage.done .stage-bub{background:var(--ink);border-color:var(--ink);color:#fff}
.stage.now .stage-bub{background:var(--red);border-color:var(--red);color:#fff}
.stage-lbl{font-size:10.5px;font-weight:700;text-align:center}
.stage-meta{font-size:10px;color:var(--s400)}
.stage.now .stage-lbl,.stage.now .stage-meta{color:var(--red)}
.stage-link{flex-shrink:0;width:48px;height:2px;background:var(--s200)}
.stage-link.done{background:var(--ink)}
.stage-link.now{background:var(--red)}

/* ── SCHEDULE MAP (new) ──────────────────────────────────────────────────── */
.map-canvas{position:relative;height:600px;background:radial-gradient(circle at 30% 40%,var(--s200) 0%,var(--s50) 60%);overflow:hidden;border-radius:16px;border:1px solid var(--s200)}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(var(--s300) 1px,transparent 1px),linear-gradient(90deg,var(--s300) 1px,transparent 1px);background-size:40px 40px;opacity:.18}
.map-pin{position:absolute;display:flex;flex-direction:column;align-items:center}
.map-pin-bub{width:26px;height:26px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.map-pin-stem{width:2px;height:10px;background:inherit}
.map-pin.red .map-pin-bub,.map-pin.red .map-pin-stem{background:var(--red)}
.map-pin.ink .map-pin-bub,.map-pin.ink .map-pin-stem{background:var(--ink)}
.map-card{position:absolute;background:#fff;border:1px solid var(--s200);border-radius:16px;padding:18px;box-shadow:var(--sh-3)}

/* ── RUN SHEET (new) ─────────────────────────────────────────────────────── */
.runs{display:flex;flex-direction:column}
.run{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--s100)}
.run:last-child{border-bottom:0}
.run-time{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;width:64px;text-align:right}
.run-bar{width:4px;height:42px;border-radius:2px;background:var(--s300);flex-shrink:0}
.run-bar.now{background:var(--red)}
.run-bar.ok{background:var(--ok-fg)}
.run-bar.warn{background:var(--warn-fg)}
.run-title{font-size:13.5px;font-weight:700}
.run-meta{font-size:11.5px;color:var(--s500);margin-top:2px}

/* ── MODAL (new sp-modal-* — avoids legacy .modal/.modal-bg collisions) ──── */
.sp-modal-wrap{padding:40px;background:rgba(230,230,230,.4);border-radius:16px;display:flex;justify-content:center}
.sp-modal{background:#fff;border-radius:16px;max-width:520px;width:100%;box-shadow:var(--sh-4);overflow:hidden;display:flex;flex-direction:column}
.sp-modal-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--s100)}
.sp-modal-ico-wrap{width:36px;height:36px;border-radius:10px;background:var(--pale-red);color:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sp-modal-title{font-size:14px;font-weight:700}
.sp-modal-sub{font-size:11.5px;color:var(--s500);margin-top:2px}
.sp-modal-close{width:36px;height:36px;border-radius:50%;border:1px solid var(--s200);display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer;color:var(--s600);transition:background var(--dur-base) var(--ease-out)}
.sp-modal-close:hover{background:var(--s100);color:var(--ink)}
.sp-modal-body{flex:1;overflow-y:auto;padding:20px}
.sp-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:18px 20px;border-top:1px solid var(--s100)}

/* ── UTILITY COLOUR HOOKS ──────────────────────────────────────────────────── */
.text-spartanRed{color:var(--red)}
.text-emerald{color:var(--ok-fg)}
.text-amber{color:var(--warn-fg)}
.text-ink{color:var(--ink)}
.text-s400{color:var(--s400)}
.text-s500{color:var(--s500)}
.text-s600{color:var(--s600)}
.text-s700{color:var(--s700)}
.bg-spartanRed{background:var(--red)}
.bg-ink{background:var(--ink)}
.bg-s50{background:var(--s50)}
.bg-pale-red{background:var(--pale-red)}

/* ── RESPONSIVE ────────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .sp-grid-2,.sp-grid-3,.sp-grid-4{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════════════════════
   BUTTON SYSTEM UPGRADE (Sales-CRM polish pass §3, 2026-05-21)
   The legacy .btn-r/.btn-w/.btn-g rules live in js/styles.css. spartan-tokens
   loads after, so these declarations win. The override deliberately
   re-asserts the brief's exact specs:
     - Primary (.btn-r): louder, deeper shadow on hover, scale(.97) press,
       proper focus-visible ring (white + red 4px).
     - Secondary (.btn-w): refined, hover deepens border to s400, subtle
       1px-2px shadow on hover, ink focus ring.
     - Dark (.btn-d): used for segmented active state.
     - Ghost (.btn-g): quietest — tertiary inline actions only.
     - Icon-only (.btn-icon / .tb-icon-btn): 36×36 with hover border that
       was previously absent; sharper press (.94 scale).

   Hover never animates transform (only background / border / shadow /
   color). Press is the ONLY transform usage, capped at var(--dur-fast).
   ════════════════════════════════════════════════════════════════════════════ */

.btn-r{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;
  background:var(--red);color:#fff;
  border:1px solid var(--red);
  border-radius:10px;
  font-family:var(--ff-sans);
  font-size:13px;font-weight:700;letter-spacing:-0.005em;
  cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 0 rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.08);
  transition:background var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn-r:hover{
  background:var(--red-dark);
  border-color:var(--red-dark);
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 8px 20px -8px rgba(196,18,48,.45);
}
.btn-r:active{transform:scale(0.97);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.btn-r:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--red)}

.btn-w{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  background:#fff;color:var(--s700);
  border:1px solid var(--s200);
  border-radius:10px;
  font-family:var(--ff-sans);
  font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.btn-w:hover{
  background:var(--s50);
  border-color:var(--s400);
  color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.btn-w:active{transform:scale(0.97)}
.btn-w:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ink)}

.btn-d{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;
  background:var(--ink);color:#fff;
  border:1px solid var(--ink);
  border-radius:10px;
  font-family:var(--ff-sans);
  font-size:13px;font-weight:700;
  cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition:background var(--dur-base) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn-d:hover{background:var(--s800)}
.btn-d:active{transform:scale(0.97)}
.btn-d:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}

.btn-g{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;
  background:transparent;color:var(--s600);
  border:1px solid transparent;
  border-radius:10px;
  font-family:var(--ff-sans);
  font-size:13px;font-weight:600;
  cursor:pointer;
  transition:background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);
}
.btn-g:hover{background:var(--s100);color:var(--ink)}
.btn-g:active{transform:scale(0.97);transition:transform var(--dur-fast) var(--ease-out)}
.btn-g:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ink)}

.btn-icon,.tb-icon-btn{
  width:36px;height:36px;padding:0;
  border-radius:10px;
  background:transparent;
  border:1px solid transparent;
  color:var(--s600);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);
}
.btn-icon:hover,.tb-icon-btn:hover{
  background:var(--s100);
  border-color:var(--s200);
  color:var(--ink);
}
.btn-icon:active,.tb-icon-btn:active{
  transform:scale(0.94);
  transition:transform var(--dur-fast) var(--ease-out);
}
.btn-icon:focus-visible,.tb-icon-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ink)}

/* Button size modifiers — match the spec used by .btn class above. */
.btn-sm{padding:6px 12px;font-size:12px;border-radius:8px}
.btn-xs{padding:5px 10px;font-size:11.5px;border-radius:8px;gap:4px}
.btn-block{width:100%;justify-content:center}

/* Segmented control (pill-inside-rail pattern — Linear / Vercel style).
   Brief §3: "active option uses .btn-d; inactive uses .btn-w with
   border-color:transparent until hover, when border-color:--s300 engages.
   The whole group sits in a .row with gap:4px inside a stone-100 rail
   with 4px padding and 12px radius." */
.seg-rail{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--s100);
  border-radius:12px;
  padding:4px;
}
.seg-rail .btn-w{
  border-color:transparent;
  box-shadow:none;
}
.seg-rail .btn-w:hover{
  border-color:var(--s300);
}
.seg-rail .btn-d{
  box-shadow:none;
}

/* ════════════════════════════════════════════════════════════════════════════
   HOVER / MOTION DISCIPLINE (Sales-CRM polish pass §4, 2026-05-21)

   The rule that separates polish from jitter: HOVER NEVER ANIMATES
   transform; width/height/padding NEVER animate. Press is the ONLY
   transform usage. Reduced-motion respected globally (already at top
   of this file).
   ════════════════════════════════════════════════════════════════════════════ */

/* Card tap hover — border + shadow, no transform. */
.card-tap{
  cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.card-tap:hover{
  border-color:var(--s300);
  box-shadow:var(--sh-2);
}

/* Kanban card hover — border darkens to ink, shadow lifts. */
.kcard{
  transition:border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.kcard:hover{
  border-color:var(--ink);
  box-shadow:var(--sh-2);
}
.kcard:active{transform:scale(0.99);transition:transform var(--dur-fast) var(--ease-out)}

/* Table row hover — background tint only. */
.tbl tbody tr{
  transition:background var(--dur-base) var(--ease-out);
}
.tbl tbody tr:hover{background:var(--s50);cursor:pointer}

/* Input focus — solid ink ring + background flip to white. */
.inp:focus,.tb-search:focus{
  background:#fff;
  border-color:var(--ink);
  box-shadow:0 0 0 1px var(--ink);
  outline:none;
}

/* Sidebar item hover + active rail already declared earlier in this file
   (.sb-item / .sb-item.on / .sb-item.on::before); no change needed. */

/* Page mount fade-and-rise. Applies to any element with the active page
   class (existing renderers don't emit `class="page on"`, so this is a
   future-proof rule that engages once renderers opt in). */
.page.on{animation:pageIn var(--dur-slow) var(--ease-out) both}
@keyframes pageIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* Notification bell dot — ring it with a 2px white border so the
   red counter stands off the topbar background cleanly (brief §5). */
.tb-dot,#notifBell .tb-dot,[id="notifBell"] span[style*="border-radius:50%"]{
  border:2px solid #fff;
  box-sizing:content-box;
}