/* CommerShell — app.css (T104). Extracted verbatim from app.html's <style> blocks, in document order. No rule changes. */

/* ═══ RESET & BASE ═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ══════ T031 — THEME TOKENS. Default = DARK (navy). [data-theme="light"] on
   <html> restores the light palette. Everything downstream is var()-driven, so
   flipping these cascades platform-wide. ══════ */
:root{
  color-scheme:dark;
  /* ─── Surfaces (dark navy elevation ladder) ─── */
  --bg:#0A0F2C;        /* app base (prototype dark --bg) */
  --s1:#101D31;        /* raised: cards (prototype --panel) */
  --s2:#16233A;        /* higher: hovers, inputs */
  --s3:#1F2F49;        /* highest */
  --s-glass:rgba(10,18,32,.72);

  /* ─── Borders ─── */
  --bd:#213047;   /* prototype dark --line */
  --bd2:#2B3D59;

  /* ─── CommerShell Brand Tokens — unified across app/master/index ─── */
  --gold:#3882F6;                        /* PRIMARY ACCENT — prototype dark --teal */
  --gold2:#5B8DFF;                       /* SECONDARY ACCENT — prototype dark --blue */
  --gld-soft:rgba(56,130,246,.12);        /* soft teal tint — focus rings, hovers */
  --gld-light:rgba(56,130,246,.06);       /* very subtle teal background */
  --gld-mid:rgba(56,130,246,.25);         /* mid teal — borders, separators */
  --gld-bd:rgba(56,130,246,.22);          /* legacy alias */
  --gb:rgba(56,130,246,.08);              /* legacy alias */
  --gbd:rgba(56,130,246,.22);             /* legacy alias */

  /* ─── Navy primaries ─── */
  --navy:#1B2A4A;                        /* deep navy — primary dark surface */
  --navy-mid:#243354;                    /* mid navy — card backgrounds on dark */
  --navy-light:#2D3F63;                  /* light navy — borders on dark */

  /* ─── CTA gradient — every primary button ─── */
  --cta-gradient:linear-gradient(135deg,#3882F6 0%,#1558D6 100%);
  --cta-gradient-hover:linear-gradient(135deg,#5AA0FF 0%,#3882F6 100%);

  /* ─── Type scale tokens ─── */
  --fs-xs:11px;
  --fs-sm:12px;
  --fs-base:13.5px;
  --fs-md:15px;
  --fs-lg:18px;
  --fs-xl:22px;
  --fs-2xl:28px;
  --fs-3xl:36px;

  /* ─── Weight ladder — THREE roles only (body / emphasis / display) ─── */
  --fw-body:450;      /* body copy, values, most text */
  --fw-emph:600;      /* labels, buttons, pills, emphasis */
  --fw-display:700;   /* headings / stat values / display */

  /* ─── Line-heights ─── */
  --lh-tight:1.2;     /* headings / display */
  --lh-snug:1.35;     /* subtitles / compact rows */
  --lh-base:1.5;      /* body copy */

  /* ─── Uppercase-label letter-spacing (OPEN REQUESTS / AT A GLANCE style) ─── */
  --ls-caps:.07em;

  /* ─── Spacing tokens ─── */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;

  /* ─── Text (light-on-dark scale) ─── */
  --text:#E9F0FA;   /* prototype dark --ink */
  --t2:#B9C7DC;     /* --ink-2 */
  --t3:#8598B4;     /* --muted */

  /* ─── Semantic (brightened for dark contrast) ─── */
  --green:#31C46F;
  --red:#F2687A;
  --amber:#E6B04A;
  --blue:#5B8DFF;

  /* ─── Type ─── */
  --font:'Inter','Montserrat',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;

  /* ─── Shadow scale (Apple-style multi-layer) ─── */
  --sh-1:0 1px 2px rgba(0,0,0,.25),0 1px 3px rgba(0,0,0,.30);
  --sh-2:0 2px 6px rgba(0,0,0,.30),0 8px 18px rgba(0,0,0,.35);
  --sh-3:0 6px 14px rgba(0,0,0,.35),0 16px 36px rgba(0,0,0,.45);
  --sh-4:0 10px 24px rgba(0,0,0,.40),0 28px 64px rgba(0,0,0,.55);
  --sh-focus:0 0 0 3px rgba(56,130,246,.30);

  /* ─── Radii ─── */
  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --r-xl:20px;
  --r-full:9999px;                       /* pill / circular — pills, avatars */

  /* ─── Brief-named shadow aliases (UI/UX Elevation Master Brief) ───
     Keep --sh-1…--sh-4 for backwards compatibility with existing styles;
     these aliases match the names the brief calls out and are tuned to
     a slightly cleaner Material You / Linear sensibility (smaller spread,
     softer alpha). New components should reach for --shadow-* by name. */
  --shadow-sm:0 1px 3px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.22);
  --shadow-md:0 4px 12px rgba(0,0,0,.38),0 2px 4px rgba(0,0,0,.28);
  --shadow-lg:0 12px 32px rgba(0,0,0,.45),0 4px 8px rgba(0,0,0,.30);
  --shadow-xl:0 24px 48px rgba(0,0,0,.55),0 8px 16px rgba(0,0,0,.35);

  /* ─── Motion ─── */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:140ms;
  --dur:220ms;
  --dur-slow:340ms;
}
/* T031 — slightly stronger teal tints read better on dark surfaces. */
:root{--gld-soft:rgba(56,130,246,.16);--gld-light:rgba(56,130,246,.08);--gb:rgba(56,130,246,.10)}

/* ══════ LIGHT THEME OVERRIDE — opt-in via <html data-theme="light"> ══════ */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F7FB;--s1:#FFFFFF;--s2:#F6F8FB;--s3:#EAEEF4;--s-glass:rgba(255,255,255,.72);
  --bd:#DBE2EC;--bd2:#C4CEDE;   /* prototype light --line / stronger */
  --text:#0A0F2C;--t2:#3D4C63;--t3:#6B7C96;   /* prototype light --ink / --ink-2 / --muted */
  --green:#12A150;--red:#DC3A4A;--amber:#C98A00;--blue:#2F6FED;   /* prototype light good/crit/warn/blue */
  --gold:#1558D6;--gold2:#2F6FED;   /* prototype light --teal / --blue */
  --gld-soft:rgba(56,130,246,.12);--gld-light:rgba(56,130,246,.06);--gb:rgba(56,130,246,.08);
  --sh-focus:0 0 0 3px rgba(56,130,246,.28);
  --sh-1:0 1px 2px rgba(8,14,44,.05),0 2px 5px -1px rgba(8,14,44,.08);
  --sh-2:0 1px 2px rgba(8,14,44,.05),0 10px 22px -10px rgba(8,14,44,.16);
  --sh-3:0 2px 5px rgba(8,14,44,.06),0 18px 36px -14px rgba(8,14,44,.22);
  --sh-4:0 6px 14px rgba(8,14,44,.07),0 30px 60px -18px rgba(8,14,44,.28);
  --shadow-sm:0 1px 2px rgba(8,14,44,.05),0 2px 5px -1px rgba(8,14,44,.08);
  --shadow-md:0 1px 2px rgba(8,14,44,.05),0 10px 22px -10px rgba(8,14,44,.16);
  --shadow-lg:0 2px 5px rgba(8,14,44,.06),0 18px 36px -14px rgba(8,14,44,.22);
  --shadow-xl:0 6px 14px rgba(8,14,44,.07),0 30px 60px -18px rgba(8,14,44,.28);
}
/* Base paint from tokens so the whole app follows the theme. */
html,body{background:var(--bg);color:var(--text)}
/* T115 — no rubber-band/scroll-chaining at the shell edge; panes keep their own scroll. */
html,body{overscroll-behavior:none}

/* MODAD tenant logo */
.modad-tenant-logo{height:22px;object-fit:contain;opacity:.7;flex-shrink:0}
.nav-tenant-sep{width:1px;height:20px;background:var(--bd);margin:0 8px;flex-shrink:0}

/* ─── BROKER HUB ─────────────────────────────────────── */
#scr-broker{padding:24px 28px}
.brk-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.brk-hd-l{display:flex;flex-direction:column;gap:4px}
.brk-hd-title{font-size:22px;font-weight:600;color:var(--text);letter-spacing:-.4px}
.brk-hd-sub{font-size:12.5px;color:var(--t3)}
.brk-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.brk-kpi{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.brk-kpi-l{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.brk-kpi-v{font-size:24px;font-weight:600;color:var(--text);font-family:var(--mono);letter-spacing:-.4px}
.brk-kpi-sub{font-size:11px;color:var(--t3)}
.brk-seg-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.brk-seg{padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--bd);background:var(--bg);display:flex;flex-direction:column;gap:3px}
.brk-seg-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;width:fit-content}
.brk-seg-count{font-size:22px;font-weight:600;font-family:var(--mono);color:var(--text)}
.brk-seg-desc{font-size:10.5px;color:var(--t3)}
.brk-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
.brk-toolbar select,.brk-toolbar input{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-sm);padding:7px 10px;font-size:12.5px;color:var(--text);font-family:var(--font)}
.brk-toolbar input{min-width:220px}
.brk-table{width:100%;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-md);overflow:hidden;border-collapse:collapse}
.brk-table th{background:var(--s2);padding:10px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);font-weight:600;text-align:left;border-bottom:1px solid var(--bd)}
.brk-table td{padding:11px 12px;font-size:12.5px;color:var(--text);border-bottom:1px solid var(--s2)}
.brk-table tr:last-child td{border-bottom:none}
.brk-table tr:hover{background:var(--s1);cursor:pointer}
.brk-empty{padding:36px;text-align:center;color:var(--t3);font-size:13px}
.brk-hyg{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:600}
.brk-hyg-bar{width:80px;height:6px;background:var(--s2);border-radius:var(--r-full);overflow:hidden}
.brk-hyg-fill{height:100%;border-radius:var(--r-full);transition:width 200ms var(--ease)}
.brk-hyg-pct{min-width:32px;text-align:right}
.brk-status-active{color:var(--green)}
.brk-status-dormant{color:var(--amber)}

/* T003 — Broker Hub Visual Elevation
   Tabbed segment filter (replaces the segment dropdown in the toolbar),
   brand-aligned segment badge colors per CLO brief (A=teal, B=blue, C=amber),
   and a prominent dormant badge. */
.brk-seg-tabs{
  display:flex;gap:var(--sp-2);flex-wrap:wrap;
  margin-bottom:var(--sp-4);
}
.brk-seg-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 16px;
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:var(--r-full);
  font-size:var(--fs-sm);font-weight:500;
  color:var(--t2);
  cursor:pointer;
  transition:all 120ms var(--ease);
  white-space:nowrap;
}
.brk-seg-tab:hover{border-color:var(--gold);color:var(--gold)}
.brk-seg-tab.on{
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
  box-shadow:0 2px 6px rgba(56,130,246,.2);
}
.brk-seg-tab-count{
  font-size:10.5px;font-weight:700;font-family:var(--mono);
  padding:1px 7px;border-radius:var(--r-full);
  background:rgba(0,0,0,.06);
}
.brk-seg-tab.on .brk-seg-tab-count{background:rgba(255,255,255,.22)}

/* Segment badge per brief palette — overrides config-driven inline color */
.brk-seg-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;
  padding:3px 10px;border-radius:var(--r-full);
  text-transform:uppercase;letter-spacing:.5px;
  white-space:nowrap;
}
.brk-seg-badge::before{
  content:'';width:5px;height:5px;border-radius:var(--r-full);background:currentColor;
}
.brk-seg-badge--A{background:rgba(56,130,246,.12);color:var(--gold)}
.brk-seg-badge--B{background:rgba(59,130,246,.10);color:#2563EB}
.brk-seg-badge--C{background:rgba(245,158,11,.12);color:#D97706}
.brk-seg-badge--D{background:rgba(239,68,68,.08);color:var(--red)}

/* Dormant badge — prominent so the user can scan dormant brokers at a glance */
.brk-dormant-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;
  padding:3px 10px;border-radius:var(--r-full);
  text-transform:uppercase;letter-spacing:.5px;
  background:rgba(245,158,11,.12);color:#D97706;
  white-space:nowrap;
}
.brk-dormant-badge::before{
  content:'';width:5px;height:5px;border-radius:var(--r-full);background:currentColor;
}
.brk-active-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;
  padding:3px 10px;border-radius:var(--r-full);
  text-transform:uppercase;letter-spacing:.5px;
  background:rgba(16,185,129,.10);color:var(--green);
  white-space:nowrap;
}

/* slide-in detail panel */
.brk-slide-panel{position:fixed;top:0;right:0;bottom:0;width:480px;max-width:92vw;background:var(--bg);border-left:1px solid var(--bd);box-shadow:-8px 0 32px rgba(15,23,42,.12);z-index:90;overflow-y:auto;transition:transform 240ms var(--ease)}
.brk-slide-panel.hidden{transform:translateX(105%);pointer-events:none}
.brk-panel-hd{padding:18px 22px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.brk-panel-bd{padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.brk-panel-section{display:flex;flex-direction:column;gap:6px}
.brk-panel-label{font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.brk-panel-value{font-size:13.5px;color:var(--text)}

/* ─── 2026 wizard shell ──────────────────────────────────────────────────
   Shared modal styling used by the Broker Onboarding wizard AND every
   Ops Hub form (Activity Log, Reservation, Contract, Cancellation). One
   set of rules → consistent feel across the platform.

   Design intent:
     • Backdrop blur for depth (modern OS feel)
     • Wider 640 px card with rounded corners + soft elevation
     • Sticky header / footer; body scrolls
     • Fade + slide-up entry animation (~280 ms)
     • Step badges read as pills, with gradient highlight on active
     • Form fields get a teal focus ring
     • Friendly intro banner slot at top of body
*/
@keyframes cs-wiz-in{
  from { opacity:0; transform:translateY(16px) scale(.985); }
  to   { opacity:1; transform:translateY(0)    scale(1);     }
}
@keyframes cs-wiz-fade{
  from { opacity:0; }
  to   { opacity:1; }
}
.brk-wiz-overlay,
.wf-form-overlay{
  position:fixed;inset:0;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:80;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:cs-wiz-fade 200ms var(--ease);
}
.brk-wiz-card,
.wf-form-card{
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:16px;
  width:640px;max-width:96vw;max-height:92vh;
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(15,23,42,.18),0 4px 12px rgba(15,23,42,.08);
  animation:cs-wiz-in 280ms cubic-bezier(.22,.61,.36,1);
}
.brk-wiz-hd,
.wf-form-hd{
  padding:18px 24px 16px;
  border-bottom:1px solid var(--bd);
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;
  background:linear-gradient(180deg,var(--bg) 0%,var(--s1) 100%);
  flex-shrink:0;
}
.brk-wiz-steps{
  display:flex;gap:8px;
  padding:14px 24px;
  background:var(--s1);
  border-bottom:1px solid var(--bd);
  flex-shrink:0;
}
.brk-wiz-step{
  flex:1;
  font-size:10.5px;font-weight:600;
  color:var(--t3);
  text-transform:uppercase;letter-spacing:.7px;
  text-align:center;
  padding:8px 10px;
  border-radius:8px;
  background:var(--bg);
  border:1px solid var(--bd);
  transition:all 200ms var(--ease);
}
.brk-wiz-step.on{
  color:#fff;
  background:linear-gradient(135deg,#3882F6 0%,#1B2A4A 100%);
  border-color:transparent;
  box-shadow:0 4px 12px rgba(56,130,246,.25);
}
.brk-wiz-step.done{
  color:var(--green);
  background:rgba(34,197,94,.08);
  border-color:rgba(34,197,94,.3);
}
.brk-wiz-bd,
.wf-form-bd{
  flex:1;overflow-y:auto;
  padding:22px 24px;
  display:flex;flex-direction:column;gap:16px;
}
.brk-wiz-ft{
  padding:14px 24px;
  border-top:1px solid var(--bd);
  background:var(--s1);
  display:flex;justify-content:space-between;gap:10px;
  flex-shrink:0;
}
.wf-form-ft{
  padding:14px 24px;
  border-top:1px solid var(--bd);
  background:var(--s1);
  display:flex;justify-content:flex-end;gap:10px;
  flex-shrink:0;
}
/* Wizard intro banner — friendly framing at the top of every wizard body.
   Each wizard passes its own copy: WHAT this does + WHAT happens next. */
.cs-wiz-intro{
  margin:-4px 0 4px;
  padding:14px 16px;
  background:linear-gradient(135deg,rgba(56,130,246,.06) 0%,rgba(0,102,204,.04) 100%);
  border:1px solid rgba(56,130,246,.20);
  border-radius:10px;
  display:flex;gap:12px;align-items:flex-start;
}
.cs-wiz-intro-icon{
  font-size:20px;line-height:1;margin-top:1px;flex-shrink:0;
}
.cs-wiz-intro-body{
  font-size:12.5px;color:var(--t2);line-height:1.55;
}
.cs-wiz-intro-body strong{color:var(--text);font-weight:600}
.cs-wiz-intro-sla{
  display:inline-block;margin-top:6px;
  font-size:10.5px;font-weight:600;
  color:var(--gold);
  background:var(--gld-soft);
  padding:3px 8px;border-radius:10px;
  text-transform:uppercase;letter-spacing:.5px;
  font-family:var(--mono,monospace);
}
/* Default styling for inputs / selects / textareas that use the .form-input
   class (broker wizard + every Ops Hub wizard). Without this rule they fall
   back to the browser's native rendering — small, unbranded, inconsistent
   with the rest of the platform. */
.form-input{
  width:100%;
  padding:11px 14px;
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:8px;
  font-family:var(--font);
  font-size:13.5px;
  color:var(--text);
  transition:border-color 150ms var(--ease),box-shadow 150ms var(--ease),background-color 150ms var(--ease);
}
.form-input::placeholder{color:var(--t3)}
.form-input:hover{border-color:var(--bd2,var(--bd));background:var(--s1)}
.form-input:focus{
  outline:none;
  border-color:#3882F6;
  background:var(--bg);
  box-shadow:0 0 0 3px rgba(56,130,246,.14);
}
.form-input:disabled,.form-input[disabled]{
  background:var(--s2);color:var(--t2);
  cursor:not-allowed;opacity:.65;
}
textarea.form-input{min-height:84px;resize:vertical}
.brk-dup-status{padding:10px 12px;border-radius:var(--r-sm);font-size:12.5px}
.brk-dup-ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.3);color:var(--green)}
.brk-dup-warn{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);color:var(--amber)}
.brk-cap-warn{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);color:var(--amber);padding:8px 12px;border-radius:var(--r-sm);font-size:12px;margin-top:6px}
/* Mobile — full-bleed on small screens */
@media (max-width:600px){
  .brk-wiz-overlay,.wf-form-overlay{padding:0}
  .brk-wiz-card,.wf-form-card{width:100%;height:100%;max-height:100vh;border-radius:0}
  .brk-wiz-bd,.wf-form-bd{padding:18px 16px;gap:14px}
  .brk-wiz-hd,.wf-form-hd,.brk-wiz-ft,.wf-form-ft{padding-left:16px;padding-right:16px}
  .brk-wiz-steps{padding-left:16px;padding-right:16px}
}
.brk-dup-status{padding:10px 12px;border-radius:var(--r-sm);font-size:12.5px}
.brk-dup-ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.3);color:var(--green)}
.brk-dup-warn{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);color:var(--amber)}
.brk-cap-warn{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);color:var(--amber);padding:8px 12px;border-radius:var(--r-sm);font-size:12px;margin-top:6px}

/* ─── WORKFLOW ENGINE ────────────────────────────────── */
#scr-workflow{padding:24px 28px}
.wf-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.wf-hd-l{display:flex;flex-direction:column;gap:4px}
.wf-hd-title{font-size:22px;font-weight:600;color:var(--text);letter-spacing:-.4px}
.wf-hd-sub{font-size:12.5px;color:var(--t3)}
.wf-tabs{display:flex;gap:2px;border-bottom:1px solid var(--bd);margin-bottom:18px}
.wf-tab{padding:10px 16px;font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent;background:transparent;border-top:none;border-left:none;border-right:none}
.wf-tab.on{color:var(--gold);border-bottom-color:var(--gold)}
/* T096 — the "+ New" tab is the single create entry (opens the + New menu), styled as an action, not a register tab. */
.wf-tab-new{margin-left:auto;color:var(--gold);font-weight:600}
.wf-tab-new:hover{color:var(--gold);filter:brightness(1.1)}
.wf-table{width:100%;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-md);overflow:hidden;border-collapse:collapse}
.wf-table th{background:var(--s2);padding:10px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);font-weight:600;text-align:left;border-bottom:1px solid var(--bd)}
.wf-table td{padding:11px 12px;font-size:12.5px;color:var(--text);border-bottom:1px solid var(--s2)}
.wf-table tr:last-child td{border-bottom:none}
.wf-table tr:hover{background:var(--s1);cursor:pointer}
.wf-empty{padding:36px;text-align:center;color:var(--t3);font-size:13px}
/* T093 #3 — softened to the prototype .badge pill (sentence case via wfStatusLabel's Title Case, lighter weight, rounder). */
.wf-pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:var(--fw-emph);padding:2px 9px;border-radius:20px;letter-spacing:.01em;line-height:var(--lh-base)}
.wf-pill-pending{background:rgba(245,158,11,.12);color:var(--amber)}
.wf-pill-progress{background:rgba(56,130,246,.12);color:var(--gold)}
.wf-pill-approved{background:rgba(34,197,94,.12);color:var(--green)}
.wf-pill-rejected{background:rgba(217,85,85,.12);color:var(--red)}
.wf-pill-draft{background:var(--s2);color:var(--t3)}
.wf-sla{font-family:var(--mono);font-size:11.5px;font-weight:600}
.wf-sla-good{color:var(--green)}
.wf-sla-warn{color:var(--amber)}
.wf-sla-late{color:var(--red)}
.wf-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.wf-toolbar select,.wf-toolbar input{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-sm);padding:7px 10px;font-size:12.5px;color:var(--text);font-family:var(--font)}
.wf-toolbar input{min-width:220px}
.wf-typecard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.wf-typecard{padding:18px;border:1px solid var(--bd);border-radius:var(--r-md);background:var(--bg);cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:all .15s var(--ease)}
.wf-typecard:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--sh-2)}
.wf-typecard-icon{font-size:28px;line-height:1;color:var(--gold)}
.wf-typecard-icon .cs-ico{width:26px;height:26px}
.wf-typecard-name{font-size:14px;font-weight:600;color:var(--text)}
.wf-typecard-desc{font-size:11.5px;color:var(--t3)}
.wf-typecard-sla{font-size:10.5px;color:var(--t3);font-family:var(--mono);margin-top:4px}

/* Detail slide-in (mirrors broker panel) */
.wf-slide-panel{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:94vw;background:var(--bg);border-left:1px solid var(--bd);box-shadow:-8px 0 32px rgba(15,23,42,.12);z-index:90;overflow-y:auto;transition:transform 240ms var(--ease)}
.wf-slide-panel.hidden{transform:translateX(105%);pointer-events:none}
/* QA fix — dim backdrop behind the Ops Hub detail panel + prominent close button */
.cs-panel-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.32);z-index:89;opacity:0;pointer-events:none;transition:opacity 200ms var(--ease)}
.cs-panel-backdrop.open{opacity:1;pointer-events:auto}
.cs-panel-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:var(--r-full);border:1px solid var(--bd);background:var(--bg);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:background 120ms,color 120ms,border-color 120ms;z-index:2}
.cs-panel-close:hover{background:var(--s1);color:var(--text);border-color:var(--bd2)}
.wf-panel-hd{padding:18px 22px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.wf-panel-bd{padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.wf-panel-section{display:flex;flex-direction:column;gap:6px}
.wf-panel-label{font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.wf-panel-value{font-size:13.5px;color:var(--text)}
.wf-timeline{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.wf-timeline-step{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--t2)}
.wf-timeline-dot{width:8px;height:8px;border-radius:50%;background:var(--bd);margin-top:5px;flex-shrink:0}
.wf-timeline-dot.on{background:var(--gold)}
.wf-timeline-dot.done{background:var(--green)}

/* ── Workflow Horizontal Pipeline Component (UI Session 2) ── */
.cs-pipeline{
  display:flex;align-items:flex-start;gap:0;
  padding:20px 16px 8px;
  overflow-x:auto;
  scrollbar-width:none;
}
.cs-pipeline::-webkit-scrollbar{display:none}
.cs-stage{
  flex:0 0 auto;min-width:120px;
  display:flex;flex-direction:column;align-items:center;
  position:relative;text-align:center;padding:0 6px;
}
.cs-stage:not(:last-child)::after{
  content:'';position:absolute;
  top:14px;left:60%;width:100%;height:2px;
  background:var(--bd);z-index:0;
}
.cs-stage--done:not(:last-child)::after{background:var(--green)}
.cs-stage--active:not(:last-child)::after{background:var(--bd)}
.cs-stage-dot{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;
  background:var(--bg);border:2px solid var(--bd);
  color:var(--t3);position:relative;z-index:1;
  transition:all .25s var(--ease);
}
.cs-stage--done .cs-stage-dot{
  background:var(--green);border-color:var(--green);color:#fff;
}
.cs-stage--active .cs-stage-dot{
  background:var(--gold);border-color:var(--gold);color:#fff;
  box-shadow:0 0 0 5px var(--gld-soft);
  animation:cs-stage-halo 2s ease-in-out infinite;
}
.cs-stage--rejected .cs-stage-dot{
  background:var(--red);border-color:var(--red);color:#fff;
}
@keyframes cs-stage-halo{
  0%,100%{box-shadow:0 0 0 5px var(--gld-soft)}
  50%{box-shadow:0 0 0 8px rgba(56,130,246,.08)}
}
.cs-stage-label{
  margin-top:8px;font-size:11px;font-weight:500;
  color:var(--text);line-height:1.3;max-width:110px;
}
.cs-stage-meta{
  margin-top:3px;font-size:10px;font-family:var(--mono);
  color:var(--t3);letter-spacing:.2px;
}
.cs-stage--active .cs-stage-meta{color:var(--gold);font-weight:600}
.cs-stage--rejected .cs-stage-meta{color:var(--red)}
.cs-stage-actor{
  display:flex;align-items:center;gap:4px;
  justify-content:center;margin-top:5px;
  font-size:10px;color:var(--t2);
}
.cs-stage-av{
  width:16px;height:16px;border-radius:50%;
  background:var(--cta-gradient);
  color:#fff;font-size:7px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
/* Mobile: collapse to vertical stack with inline meta */
@media(max-width:600px){
  .cs-pipeline{flex-direction:column;gap:0;padding:12px}
  .cs-stage{flex-direction:row;min-width:unset;width:100%;
    text-align:left;padding:8px 0;align-items:flex-start;gap:12px}
  .cs-stage:not(:last-child)::after{
    top:30px;left:14px;width:2px;height:100%;
  }
  .cs-stage-label,.cs-stage-meta,.cs-stage-actor{
    text-align:left;margin-top:0;margin-left:0;
  }
  .cs-stage-content{display:flex;flex-direction:column;gap:2px}
}

/* Wizard modal CSS moved to the consolidated "2026 wizard shell" block above
   (around line 250). Keeping this comment as a breadcrumb in case anyone
   greps for the old rule locations. */

/* Today's Plan workflow strip */
.wf-today-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.wf-today-chip{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-sm);padding:9px 14px;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .15s var(--ease)}
.wf-today-chip:hover{border-color:var(--gold)}
.wf-today-chip-count{font-weight:700;font-family:var(--mono);color:var(--gold)}

/* ─── NOTIFICATIONS + SLA + RICH DETAIL (Session 9d) ─── */
.cs-bell{position:relative}
.cs-bell-count{position:absolute;top:-2px;right:-2px;background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;font-family:var(--mono);min-width:14px;text-align:center;line-height:1.5}
.cs-bugnav{position:relative}
.cs-bug-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--s1)}
.cs-notif-panel{position:fixed;top:62px;right:18px;width:380px;max-height:520px;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-md);box-shadow:var(--sh-3);z-index:120;overflow:hidden;display:flex;flex-direction:column}
.cs-notif-hd{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--bd)}
.cs-notif-hd-t{font-size:14px;font-weight:600}
.cs-notif-list{flex:1;overflow-y:auto;padding:6px}
.cs-notif-item{display:flex;gap:10px;padding:11px 14px;border-radius:8px;cursor:pointer;transition:background .12s var(--ease);position:relative}
.cs-notif-item:hover{background:var(--s1)}
.cs-notif-item.unread{background:rgba(56,130,246,.04)}
.cs-notif-item.unread::before{content:'';position:absolute;left:6px;top:18px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.cs-notif-icon{width:32px;height:32px;border-radius:8px;background:var(--gld-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;margin-left:8px}
.cs-notif-icon .cs-ico{width:17px;height:17px}
.cs-notif-body{flex:1;min-width:0}
.cs-notif-title{font-size:13px;font-weight:500;color:var(--text);margin-bottom:2px}
.cs-notif-msg{font-size:11.5px;color:var(--t2);line-height:1.5}
.cs-notif-time{font-size:10px;color:var(--t3);font-family:var(--mono);margin-top:3px}
.cs-notif-empty{padding:32px 18px;text-align:center;color:var(--t3);font-size:13px}
.cs-notif-mark-all{font-size:11px;color:var(--gold);background:none;border:none;cursor:pointer;font-family:var(--font);font-weight:500}
.cs-notif-mark-all:hover{text-decoration:underline}

/* SLA pills (refined for inbox sort) */
.cs-sla{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;font-family:var(--mono);letter-spacing:.01em}
.cs-sla.overdue{background:rgba(239,68,68,.12);color:#dc2626;border:1px solid rgba(239,68,68,.3)}
.cs-sla.urgent{background:rgba(245,158,11,.14);color:#b8761f;border:1px solid rgba(245,158,11,.32)}
.cs-sla.warning{background:rgba(245,158,11,.08);color:#b8761f;border:1px solid rgba(245,158,11,.22)}
.cs-sla.ok{background:rgba(34,197,94,.1);color:#15803d;border:1px solid rgba(34,197,94,.28)}

/* Rich detail sections */
.cs-detail-section{margin-bottom:14px}
.cs-detail-section-hd{font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.cs-detail-section-body{background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:11px 13px}
.cs-detail-section-body.inherited{background:rgba(56,130,246,.04);border-color:rgba(56,130,246,.18)}
.cs-detail-row{display:flex;gap:10px;padding:5px 0;font-size:12.5px;border-bottom:1px solid rgba(229,231,235,.5)}
.cs-detail-row:last-child{border-bottom:none}
.cs-detail-key{color:var(--t3);font-size:11.5px;width:140px;flex-shrink:0;text-transform:capitalize}
.cs-detail-val{color:var(--text);flex:1;word-break:break-word}
.cs-detail-warn{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.25);color:var(--red);padding:9px 13px;border-radius:7px;font-size:12px;font-weight:500;margin-bottom:10px;display:flex;align-items:center;gap:8px}

/* Settings sidebar sections */
.cs-settings-section-label{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;font-weight:700;padding:14px 16px 6px;display:block}

/* ─── DOCUMENTS + OPS CONFIG (Session 9b) ─── */
.cs-doc-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.cs-doc-chip{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--s1);border:1px solid var(--bd);border-radius:8px;font-size:12.5px}
.cs-doc-chip:hover{border-color:var(--bd2)}
.cs-doc-icon{width:28px;height:28px;border-radius:6px;background:var(--bg);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;color:var(--gold)}
.cs-doc-name{flex:1;min-width:0;color:var(--text);word-break:break-word}
.cs-doc-meta{font-size:11px;color:var(--t3);font-family:var(--mono);letter-spacing:.4px;flex-shrink:0}
.cs-doc-view{font-size:11px;font-weight:500;padding:5px 10px;background:var(--bg);border:1px solid var(--bd);color:var(--gold);border-radius:6px;cursor:pointer;flex-shrink:0;font-family:var(--font)}
.cs-doc-view:hover{background:var(--gld-soft)}
.cs-doc-section{margin-top:14px}
.cs-doc-section-label{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.cs-doc-section-count{font-size:10px;background:var(--s1);border:1px solid var(--bd);color:var(--t2);padding:1px 7px;border-radius:10px;font-family:var(--mono)}
.cs-doc-empty{padding:8px 12px;background:var(--s2);border:1px dashed var(--bd2);border-radius:7px;font-size:11.5px;color:var(--t3);font-style:italic}

/* File-pick row used in forms */
.cs-file-row{display:flex;flex-direction:column;gap:6px;background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:11px 13px;margin-bottom:8px}
.cs-file-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--text);font-weight:500}
.cs-file-label .req{color:var(--red);font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.cs-file-input{font-size:12px;color:var(--t2);font-family:var(--font)}
.cs-file-staged{display:flex;flex-wrap:wrap;gap:6px}
.cs-file-pill{font-size:11px;background:rgba(56,130,246,.08);border:1px solid rgba(56,130,246,.25);color:var(--text);padding:3px 9px;border-radius:12px;display:inline-flex;align-items:center;gap:6px}
.cs-file-pill .x{cursor:pointer;color:var(--t3);font-weight:600}
.cs-file-pill .x:hover{color:var(--red)}

/* Ops / Workflow Settings panels */
.cs-cfg-section{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-md);padding:18px 22px;margin-bottom:14px}
.cs-cfg-section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.cs-cfg-section-title{font-size:14px;font-weight:600;color:var(--text)}
.cs-cfg-section-sub{font-size:11.5px;color:var(--t3);margin-top:2px}
.cs-cfg-table{width:100%;border-collapse:collapse;font-size:13px}
.cs-cfg-table th{background:var(--s2);font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;padding:9px 11px;border-bottom:1px solid var(--bd);text-align:left}
.cs-cfg-table td{padding:9px 11px;border-bottom:1px solid var(--bd);font-size:13px;vertical-align:middle}
.cs-cfg-table tr:last-child td{border-bottom:none}
.cs-cfg-locked{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--gold);font-weight:600;padding:2px 7px;background:var(--gld-soft);border:1px solid var(--gld-bd);border-radius:11px}
.cs-cfg-locked::before{content:'';font-size:11px}
.cs-cfg-step-list{display:flex;flex-direction:column;gap:6px}
.cs-cfg-step{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg);border:1px solid var(--bd);border-radius:7px;font-size:12.5px}
.cs-cfg-step.locked{background:var(--gld-soft);border-color:var(--gld-bd)}
.cs-cfg-step-name{flex:1;font-weight:500;color:var(--text)}
.cs-cfg-step-key{font-family:var(--mono);font-size:11px;color:var(--t3)}
.cs-cfg-add-btn{font-size:11.5px;padding:6px 11px;background:var(--bg);border:1px dashed var(--bd2);color:var(--t2);border-radius:7px;cursor:pointer;font-family:var(--font)}
.cs-cfg-add-btn:hover{border-color:var(--gold);color:var(--text)}
.cs-cfg-bound-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:11px;color:var(--t2)}

/* ─── SHELL INTELLIGENCE (Session 9) ─── */
.cs-health-good   { border-color:rgba(34,197,94,.4)  !important; color:var(--green) !important }
.cs-health-good   .meta-dot { background:var(--green) !important }
.cs-health-warn   { border-color:rgba(245,158,11,.45) !important; color:#b8761f      !important }
.cs-health-warn   .meta-dot { background:#f59e0b !important }
.cs-health-bad    { border-color:rgba(239,68,68,.45)  !important; color:var(--red)   !important }
.cs-health-bad    .meta-dot { background:var(--red) !important }
.cs-health-pending{ border-color:var(--bd2) !important; color:var(--t3) !important }
.cs-health-pending .meta-dot { background:var(--t3) !important }
.cs-motivational{font-size:13px;color:var(--t2);margin-top:14px;font-style:italic;line-height:1.55;max-width:560px}
.cs-today-focus{margin-top:6px}
.cs-focus-list{list-style:none;padding:0;margin:8px 0 0 0;display:flex;flex-direction:column;gap:6px}
.cs-focus-list li{padding:9px 13px;background:var(--s1);border:1px solid var(--bd);border-radius:8px;font-size:13px;color:var(--text)}
.cs-focus-list li::before{content:'→ ';color:var(--gold);font-weight:600}
/* Phase 8 polish — role-aware Today's Focus clickable rows */
.cs-today-focus-section{margin-top:24px}
.cs-section-label{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--t3);margin-bottom:10px;text-transform:uppercase}
.cs-focus-list-v2{display:flex;flex-direction:column;gap:8px}
.cs-focus-item{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;background:var(--s1);border:1px solid var(--bd);border-radius:10px;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:all .15s ease}
.cs-focus-item:hover{background:var(--s2);border-color:var(--bd2);transform:translateX(2px)}
.cs-focus-item:active{transform:translateX(0)}
.cs-focus-item-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--gld-soft);color:var(--gold);font-size:16px;flex-shrink:0;border:1px solid var(--gld-bd)}
.cs-focus-item-label{flex:1;font-size:14px;font-weight:500;color:var(--text)}
.cs-focus-item-arrow{color:var(--t3);font-size:16px;flex-shrink:0;transition:transform .15s ease}
.cs-focus-item:hover .cs-focus-item-arrow{transform:translateX(4px);color:var(--gold)}
.cs-focus-item-completed{opacity:.55}
.cs-focus-item-completed .cs-focus-item-icon{background:rgba(34,197,94,.10);color:#22c55e;border-color:rgba(34,197,94,.30)}
.cs-focus-item-completed .cs-focus-item-label{text-decoration:line-through}

/* Shell Assistant tab strip */
.sai-tabs{display:flex;gap:2px;border-bottom:1px solid var(--bd);background:var(--s1);padding:0 16px}
.sai-tab{background:none;border:none;color:var(--t3);font-size:13px;padding:11px 14px;cursor:pointer;border-bottom:2px solid transparent;font-family:var(--font);font-weight:500}
.sai-tab:hover{color:var(--text)}
.sai-tab.on{color:var(--gold);border-bottom-color:var(--gold)}

/* Intelligence tab */
.intel-pane{padding:18px 22px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;flex:1}
.intel-score-card{background:linear-gradient(135deg,rgba(56,130,246,.06),rgba(56,130,246,.04));border:1px solid rgba(56,130,246,.18);border-radius:var(--r-md);padding:18px 22px;display:flex;flex-direction:column;gap:6px}
.intel-score-num{font-size:42px;font-weight:700;font-family:var(--mono);line-height:1}
.intel-score-num.good{color:var(--green)} .intel-score-num.warn{color:#b8761f} .intel-score-num.bad{color:var(--red)} .intel-score-num.pending{color:var(--t3)}
.intel-score-lbl{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.intel-score-sub{font-size:12px;color:var(--t2);margin-top:2px}
.intel-summary{font-size:13px;line-height:1.6;color:var(--text);background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:14px 16px}
.intel-section-label{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-top:6px}
.intel-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.intel-list li{padding:9px 12px;background:var(--bg);border:1px solid var(--bd);border-radius:7px;font-size:12.5px;line-height:1.5;color:var(--text)}
.intel-risk{display:flex;align-items:flex-start;gap:9px;padding:9px 12px;background:var(--bg);border:1px solid var(--bd);border-radius:7px;font-size:12.5px}
.intel-risk-sev{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:5px;flex-shrink:0;font-family:var(--mono)}
.intel-risk-sev.low{background:rgba(34,197,94,.1);color:var(--green)}
.intel-risk-sev.medium{background:rgba(245,158,11,.12);color:#b8761f}
.intel-risk-sev.high{background:rgba(239,68,68,.12);color:var(--red)}
.intel-bench{font-size:11.5px;color:var(--t2);font-style:italic;background:var(--s1);border:1px dashed var(--bd2);border-radius:7px;padding:9px 12px}
.intel-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.intel-controls select{background:var(--s1);border:1px solid var(--bd);color:var(--text);padding:7px 10px;border-radius:6px;font-size:12px;outline:none;font-family:var(--font)}
.intel-empty{padding:32px 18px;text-align:center;color:var(--t3);font-size:13px;line-height:1.6}
.intel-loading{padding:24px 18px;text-align:center;color:var(--t2);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:8px}
.intel-loading::before{content:'';width:24px;height:24px;border:2px solid var(--bd);border-top-color:var(--gold);border-radius:50%;animation:csspin 1s linear infinite}
@keyframes csspin{to{transform:rotate(360deg)}}
.intel-meta{font-size:10.5px;color:var(--t3);font-family:var(--mono);letter-spacing:.4px}

/* ══════ T031 PHASE A — DESIGN SYSTEM: icons · motion · skeletons ══════ */
/* Line icon: inherits currentColor + font size context; crisp at any scale. */
.cs-ico{display:inline-block;vertical-align:middle;flex:none;color:inherit}
.cs-ico path,.cs-ico rect,.cs-ico circle,.cs-ico line,.cs-ico polyline,.cs-ico polygon{vector-effect:non-scaling-stroke}
/* Motion tokens */
:root{--mo-fast:140ms;--mo-med:220ms;--mo-slow:360ms;--mo-ease:cubic-bezier(.22,.61,.36,1);--mo-ease-emph:cubic-bezier(.16,.84,.44,1)}
/* Card hover-lift (opt-in via .cs-lift; applied to module/KPI cards) */
.cs-lift{transition:transform var(--mo-med) var(--mo-ease),box-shadow var(--mo-med) var(--mo-ease),border-color var(--mo-med) var(--mo-ease)}
.cs-lift:hover{transform:translateY(-3px)}
/* Button press feedback (global, cheap) */
.btn,.cs-auth-btn,.cs-empty-cta{transition:transform var(--mo-fast) var(--mo-ease),box-shadow var(--mo-fast) var(--mo-ease),background var(--mo-fast) var(--mo-ease),filter var(--mo-fast) var(--mo-ease)}
.btn:active,.cs-auth-btn:active,.cs-empty-cta:active{transform:translateY(1px) scale(.985)}
/* Section / page enter */
@keyframes csFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* fill-mode `backwards` (not `both`): with `both`, the frozen end frame is the identity
   matrix(1,0,0,1,0,0) — NOT the keyword `none` — and any transform value makes .cs-enter the
   containing block for its position:fixed descendants, which anchored slide-in drawers to it
   and pushed their Approve/Reject footer off-screen. `backwards` keeps the entrance motion but
   reverts to no transform at rest, so fixed overlays anchor to the viewport again. */
.cs-enter{animation:csFadeUp var(--mo-slow) var(--mo-ease-emph) backwards}
/* Tabular figures — for any number that sits in a column or a stat tile */
.cs-tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* One uppercase-label treatment (letter-spacing token, emphasis weight) */
.cs-caps{font-size:var(--fs-xs);font-weight:var(--fw-emph);text-transform:uppercase;letter-spacing:var(--ls-caps)}
/* Skeleton shimmer */
@keyframes csShimmer{100%{background-position:-200% 0}}
.cs-skel{display:flex;flex-direction:column;gap:10px;padding:8px 0}
.cs-skel-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--s2) 25%,var(--s1) 37%,var(--s2) 63%);background-size:200% 100%;animation:csShimmer 1.3s ease-in-out infinite}
/* Count-up figures render as tabular so the width doesn't jitter mid-animation */
.cs-kpi-value{font-variant-numeric:tabular-nums}
/* Toast slide-in/out */
@keyframes csToastIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
/* Respect the user's reduced-motion preference — GLOBAL off-switch (non-negotiable). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .cs-lift:hover{transform:none}
  .cs-skel-line{background:var(--s2)}
}

/* ─── EMPTY STATES + ONBOARDING (Session 8) ─── */
.cs-empty-card{padding:48px 32px;background:var(--s1);border:1px dashed var(--bd2);border-radius:var(--r-md);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;margin:18px 0}
.cs-empty-icon{font-size:38px;line-height:1;color:var(--gold);display:inline-flex;align-items:center;justify-content:center}
.cs-empty-icon .cs-ico{width:36px;height:36px}
.cs-empty-title{font-size:var(--fs-lg);font-weight:var(--fw-emph);color:var(--text)}
.cs-empty-msg{font-size:var(--fs-base);color:var(--t2);max-width:480px;line-height:var(--lh-base)}
.cs-empty-card .btn{margin-top:6px}
.cs-onboarding{background:linear-gradient(135deg,rgba(56,130,246,.06),rgba(56,130,246,.04));border:1px solid rgba(56,130,246,.18);border-radius:var(--r-md);padding:18px 22px;margin-bottom:18px;display:flex;flex-direction:column;gap:12px}
.cs-onboarding-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.cs-onboarding-title{font-size:14px;font-weight:600;color:var(--text)}
.cs-onboarding-sub{font-size:12px;color:var(--t2);margin-top:2px}
.cs-onboarding-progress{font-size:11px;color:var(--t3);font-family:var(--mono);letter-spacing:.5px;text-transform:uppercase;font-weight:600}
.cs-onboarding-bar{height:4px;background:var(--bd);border-radius:99px;overflow:hidden}
.cs-onboarding-bar>div{height:100%;background:linear-gradient(90deg,var(--gold),#0066CC);transition:width .3s var(--ease)}
.cs-onboarding-list{display:flex;flex-direction:column;gap:6px}
.cs-onboarding-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;cursor:pointer;font-size:13px;color:var(--text);transition:border-color .15s var(--ease),background .15s var(--ease)}
.cs-onboarding-item:hover{border-color:var(--bd2);background:var(--s1)}
.cs-onboarding-item.done{opacity:.55;cursor:default}
.cs-onboarding-item.done:hover{background:var(--bg)}
.cs-onboarding-check{width:18px;height:18px;border:1.5px solid var(--bd2);border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;color:#fff}
.cs-onboarding-item.done .cs-onboarding-check{background:var(--green);border-color:var(--green)}

/* ─── USER MANAGEMENT (Session 7) ─── */
.um-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.um-stat{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-sm);padding:14px 18px}
.um-stat-n{font-size:22px;font-weight:600;color:var(--text);font-family:var(--mono);line-height:1.2}
.um-stat-l{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;margin-top:4px}
.um-filters{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.um-filters input,.um-filters select{background:var(--s1);border:1px solid var(--bd);color:var(--text);padding:8px 12px;border-radius:7px;font-size:13px;outline:none;font-family:var(--font)}
.um-filters input{flex:1;min-width:200px}
.um-filters input:focus,.um-filters select:focus{border-color:var(--gold)}
.um-count{font-size:12px;color:var(--t3);margin-left:auto}
.um-table{width:100%;border-collapse:collapse}
.um-table th{background:var(--s1);font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;padding:11px 13px;border-bottom:1px solid var(--bd);text-align:left}
.um-table td{padding:11px 13px;border-bottom:1px solid var(--bd);font-size:13px}
.um-table tr:hover td{background:rgba(56,130,246,.03)}
.um-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#0066CC);color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.5px;flex-shrink:0}

/* T004 — Settings Visual Elevation
   Role badges per canonical role + name/email two-line cell + hover actions. */
.um-name-cell{display:flex;align-items:center;gap:10px}
.um-name-text{display:flex;flex-direction:column;min-width:0}
.um-name-display{font-weight:600;color:var(--text);font-size:13px;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-name-email{font-size:11.5px;color:var(--t3);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-name-email a{color:inherit;text-decoration:none}
.um-name-email a:hover{color:var(--gold)}
.um-name-username{font-size:11px;color:var(--t3);font-family:var(--mono)}

.cs-role-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;
  padding:3px 10px;border-radius:var(--r-full);
  text-transform:uppercase;letter-spacing:.5px;
  white-space:nowrap;
}
.cs-role-badge::before{
  content:'';width:5px;height:5px;border-radius:var(--r-full);background:currentColor;
}
.cs-role-badge--super_admin{background:rgba(27,42,74,.10);color:var(--navy)}
.cs-role-badge--cro{background:rgba(56,130,246,.12);color:var(--gold)}
.cs-role-badge--sales_director{background:rgba(59,130,246,.10);color:#2563EB}
/* T018 — Renamed `team_leader` (formerly amber) → `sales_manager` (amber kept).
   New `team_leader` (pod lead, dormant until MODAD enables it) gets indigo,
   the only distinct hue in the existing palette. The legacy `.cs-role-badge--team_leader`
   selector still ships so any cached/legacy DB rows render without breaking. */
.cs-role-badge--sales_manager{background:rgba(245,158,11,.10);color:#D97706}
.cs-role-badge--team_leader{background:rgba(99,102,241,.10);color:#4F46E5}
.cs-role-badge--sales_agent{background:rgba(56,130,246,.10);color:var(--gold)}
.cs-role-badge--sales_ops{background:rgba(16,185,129,.10);color:var(--green)}
.cs-role-badge--viewer{background:var(--s2);color:var(--t3)}
.cs-role-badge--master{background:rgba(168,85,247,.10);color:#9333EA}

/* Hover-revealed action cluster */
.um-actions{display:flex;gap:5px;opacity:0;pointer-events:none;transition:opacity 120ms var(--ease)}
.um-table tr:hover .um-actions{opacity:1;pointer-events:auto}
.um-actions-static{display:flex;gap:5px} /* for the "You" / disabled cluster */
@media (max-width:640px){
  .um-actions{opacity:1;pointer-events:auto}
}
.um-form-overlay{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:90;display:flex;align-items:center;justify-content:center;padding:20px}
.um-form-card{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);width:100%;max-width:640px;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--sh-3)}
.um-form-hd{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--bd)}
.um-form-tabs{display:flex;gap:4px;padding:0 22px;border-bottom:1px solid var(--bd);background:var(--s1)}
.um-form-tab{background:none;border:none;color:var(--t3);font-size:13px;padding:12px 16px;cursor:pointer;border-bottom:2px solid transparent;font-family:var(--font);font-weight:500}
.um-form-tab:hover{color:var(--text)}
.um-form-tab.on{color:var(--gold);border-bottom-color:var(--gold)}
.um-form-body{padding:22px;overflow-y:auto;flex:1}
.um-form-body .fg{margin-bottom:14px}
.um-form-body label{display:block;font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-bottom:6px}
.um-form-body input,.um-form-body select{width:100%;background:var(--s1);border:1px solid var(--bd);color:var(--text);padding:9px 12px;border-radius:7px;font-size:13px;outline:none;font-family:var(--font)}
.um-form-body input:focus,.um-form-body select:focus{border-color:var(--gold)}
.um-perms-label{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin:18px 0 10px}
.um-perm-grid{display:flex;flex-direction:column;gap:8px}
.um-perm-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--s1);border:1px solid var(--bd);border-radius:7px;cursor:pointer;font-size:13px}
.um-perm-row:hover{border-color:var(--bd2)}
.um-perm-row input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--gold)}
.um-form-ft{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--bd);background:var(--s1)}

/* Centered tenant logo in nav (MODAD) */
/* T124 — sole tenant identity, RIGHT-aligned (was centred). margin-left:auto pushes the
   tenant chip + the action cluster to the right (the auto-margin moved off .n-r → here). */
.n-tenant{
  display:flex;align-items:center;gap:8px;
  margin-left:auto;max-width:38%;min-width:0;
}
.n-tenant img{height:28px;width:auto;object-fit:contain;opacity:.92;flex-shrink:0}
/* Monogram + name chip (fallback when the tenant has no uploaded logo). Reuses tokens. */
.n-tenant-name{display:inline-flex;align-items:center;gap:8px;min-width:0}
.n-tenant-mono{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;border-radius:7px;background:var(--gld-soft);color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.02em;font-family:var(--font)}
.n-tenant-lbl{font-size:13px;font-weight:600;color:var(--text);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:760px){
  /* Keep the tenant present on the phone bar but compact: monogram only (drop the label). */
  .n-tenant{max-width:44%}
  .n-tenant-lbl{display:none}
}

body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.5;min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'cv11','ss01','ss03';
}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer;border:none;outline:none;color:inherit;background:none}
input,select,textarea{font-family:inherit;outline:none;border:none;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:99px;border:2px solid var(--bg);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--t3);background-clip:padding-box;border:2px solid var(--bg)}
::selection{background:var(--gb);color:var(--text)}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible{outline:none;box-shadow:var(--sh-focus);border-radius:var(--r-sm)}

/* ═══ LOGIN ════════════════════════════════════════════════ */
#scr-login,#scr-forgot,#scr-forgot-sent,#scr-company{   /* T116 — native company-entry reuses the auth layout */
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  background:
    radial-gradient(ellipse 60% 50% at 25% 15%, rgba(56,130,246,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 75% 85%, rgba(110,102,238,.05) 0%, transparent 60%),
    var(--bg);
}
.lcard{
  width:380px;background:var(--bg);border:1px solid var(--bd);
  border-radius:var(--r-xl);padding:44px 38px;
  display:flex;flex-direction:column;gap:18px;
  box-shadow:var(--sh-4);
}
.l-logo{
  font-size:28px;font-weight:600;color:var(--gold);
  letter-spacing:-.3px;text-align:center;margin-bottom:2px;
}
.l-tag{
  font-size:10px;color:var(--t3);text-align:center;
  letter-spacing:2.4px;text-transform:uppercase;margin-bottom:6px;font-weight:500;
}
.l-div{height:1px;background:var(--bd)}
.lf label{
  display:block;font-size:11px;color:var(--t2);font-weight:500;
  text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;
}
.lf select,.lf input{
  width:100%;background:var(--s1);border:1px solid var(--bd);
  color:var(--text);padding:12px 14px;border-radius:var(--r-md);
  font-size:14px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
.lf select:hover,.lf input:hover{border-color:var(--bd2);background:var(--bg)}
.lf select:focus,.lf input:focus{border-color:var(--gold);background:var(--bg);box-shadow:var(--sh-focus)}
.lf select option{background:var(--bg)}
.l-btn{
  width:100%;padding:12px 14px;
  background:var(--cta-gradient);
  color:#FFFFFF;
  border:none;
  border-radius:8px;font-size:14px;font-weight:600;
  letter-spacing:.3px;margin-top:4px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 4px 14px rgba(56,130,246,.32),inset 0 1px 0 rgba(255,255,255,.18);
  transition:box-shadow .2s,transform .15s,background .2s;
}
.l-btn:hover{
  background:var(--cta-gradient-hover);
  box-shadow:0 6px 20px rgba(56,130,246,.44),inset 0 1px 0 rgba(255,255,255,.24);
  transform:translateY(-1px);
}
.l-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(56,130,246,.28)}
.l-btn-icon{height:18px;width:auto;object-fit:contain;flex-shrink:0}
.l-err{font-size:12px;color:var(--red);text-align:center;min-height:16px}
.l-hint{
  font-size:11px;color:var(--t3);text-align:center;
  line-height:1.8;background:var(--s2);border-radius:8px;
  padding:10px;border:1px solid var(--bd);
}
.l-hint strong{color:var(--t2)}

/* ═══ NAV ══════════════════════════════════════════════════ */
nav{
  display:flex;align-items:center;gap:10px;
  background:var(--s-glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--bd);
  /* T115 — clear the device notch/rounded corners (env insets are 0 on desktop). */
  padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));
  height:calc(54px + env(safe-area-inset-top));
  position:sticky;top:0;z-index:100;
}
nav > *:not(.n-tenant){position:relative;z-index:1}
.n-logo{font-size:16px;font-weight:600;color:var(--gold);letter-spacing:-.2px;cursor:pointer;flex-shrink:0}
.n-sep{color:var(--bd2);font-size:16px}
.n-crumb{font-size:13px;color:var(--t2);font-weight:500;cursor:pointer;transition:color 120ms}
.n-crumb:hover{color:var(--gold)}
.n-sub{font-size:11px;color:var(--t3)}
/* QA fix — Back-to-Home affordance shown above every inner screen header. */
#cs-back-bar{padding:14px 22px 0 22px;display:flex;align-items:center;gap:8px}
#cs-back-bar.hidden{display:none}
.cs-back-btn{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm,13px);font-weight:500;color:var(--t2);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:var(--r-md);transition:color 120ms,background 120ms}
.cs-back-btn:hover{color:var(--gold);background:var(--gld-soft)}
.n-r{display:flex;align-items:center;gap:6px}   /* T124 — right-push moved to .n-tenant (auto-margin); actions follow the tenant chip */
.n-ico{
  width:34px;height:34px;border-radius:var(--r-sm);
  border:1px solid transparent;background:transparent;
  color:var(--t2);font-size:15px;display:flex;
  align-items:center;justify-content:center;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.n-ico:hover{background:var(--s2);color:var(--text)}
.n-ico.on{background:var(--gb);border-color:var(--gbd);color:var(--gold)}
.n-dot{
  width:30px;height:30px;border-radius:50%;
  background:var(--gb);border:1px solid var(--gbd);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:var(--gold);flex-shrink:0;
}
.n-uname{font-size:13px;color:var(--text);font-weight:500}
.n-urole{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
/* When the nav role line is upgraded to a cs-role-badge (T006), reset the
   legacy n-urole metrics so the badge owns its own padding + radius cleanly. */
.n-urole.cs-role-badge{font-size:9.5px;padding:2px 8px;margin-top:2px;display:inline-flex;align-self:flex-start}
.n-out{
  font-size:12px;color:var(--t2);background:transparent;
  border:1px solid var(--bd);border-radius:var(--r-sm);padding:6px 11px;font-weight:500;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.n-out:hover{color:var(--text);border-color:var(--bd2);background:var(--s2)}
.n-wk{
  font-size:11px;color:var(--gold);background:var(--gb);
  padding:3px 9px;border-radius:20px;border:1px solid var(--gbd);
  font-family:var(--mono);font-weight:500;
}

/* ═══ HOME ════════════════════════════════════════════════ */
#scr-home{padding:0 0 48px}
.home-hero{padding:36px 32px 28px;border-bottom:1px solid var(--bd);background:var(--s1)}
.h-greet{font-size:26px;font-weight:600;margin-bottom:5px;letter-spacing:-.4px}
.h-sub{font-size:13px;color:var(--t3);margin-bottom:20px}
.home-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.meta-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:12px;background:var(--bg);border:1px solid var(--bd);color:var(--t2);font-weight:500}
.meta-dot{width:7px;height:7px;border-radius:50%}
.home-body{padding:30px 32px}
.home-section-label{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--t3);margin-bottom:18px;font-weight:600}
.portals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.portal-card{
  background:var(--bg);border:1px solid var(--bd);
  border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease);
}
.portal-card.enabled:hover{
  border-color:var(--bd2);
  transform:translateY(-3px);
  box-shadow:var(--sh-3);
  cursor:pointer;
}
.portal-card.locked{opacity:.5}
.portal-card-top{padding:24px 24px 18px;flex:1}
.portal-ico-wrap{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px;border:1px solid}
.portal-name{font-size:17px;font-weight:600;margin-bottom:6px;letter-spacing:-.2px}
.portal-desc{font-size:12.5px;color:var(--t2);line-height:1.6;margin-bottom:16px}
.portal-apps{display:flex;flex-wrap:wrap;gap:6px}
.portal-app-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:500;background:var(--s2);border:1px solid var(--bd);color:var(--t2)}
.portal-app-chip.live{background:var(--gb);border-color:var(--gbd);color:var(--gold)}
.chip-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.portal-card-foot{padding:14px 24px;border-top:1px solid var(--bd);background:var(--s1);display:flex;align-items:center;justify-content:space-between}
.portal-stats{font-size:11px;color:var(--t3);font-family:var(--mono)}
.portal-cta{font-size:12px;font-weight:600;color:var(--t2);display:flex;align-items:center;gap:6px;transition:transform var(--dur) var(--ease-out)}
.portal-card.enabled .portal-cta{color:var(--gold)}
.portal-card.enabled:hover .portal-cta{transform:translateX(2px)}
/* ─── HOME SCREEN ELEVATION (per UI/UX brief — Google Workspace / Linear quality) ──
   New home composition replaces the home-hero/portals-grid layout above.
   Greeting + date → KPI row → AI chips → Sales / Operations / Coming-soon
   sections of module cards → Today's Focus list. The legacy classes above
   stay for back-compat (other surfaces still reference them) but renderHome()
   targets the cs-* classes below. */
.cs-home-wrap{max-width:960px;margin:0 auto;padding:32px;display:flex;flex-direction:column;gap:0}
.cs-home-greeting{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:var(--sp-6)}
.cs-home-greeting-text{font-size:var(--fs-xl);font-weight:600;color:var(--text);letter-spacing:-.3px}
.cs-home-date{font-size:var(--fs-sm);color:var(--t2);font-weight:400}

/* ─── T013 BUG #5 — CRO Executive Briefing ─────────────────────────
   Strategic card shown only on the CRO home, above the standard KPI strip.
   AI narration + 5 strategic metrics + Top-3 risks + footer link to the
   future Intelligence view. Brand tokens only — teal accent + navy text. */
.cs-exec-briefing{
  background:var(--bg);border:1px solid var(--bd);
  border-left:4px solid var(--gold);
  border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-6);
  box-shadow:var(--shadow-sm);
  margin-bottom:var(--sp-6);
  display:flex;flex-direction:column;gap:var(--sp-5);
}
.cs-exec-briefing-hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3)}
.cs-exec-briefing-title{
  font-size:var(--fs-md);font-weight:700;
  color:var(--text);letter-spacing:-.2px;
  display:flex;align-items:center;gap:8px;
}
.cs-exec-briefing-title::before{
  content:'';font-size:14px;
  filter:saturate(.8);
}
.cs-exec-briefing-tier{
  font-size:var(--fs-xs);font-weight:600;
  color:var(--gold);letter-spacing:.8px;text-transform:uppercase;
  background:var(--gld-soft);
  padding:4px 10px;border-radius:var(--r-full);
}
.cs-exec-briefing-narration{
  font-size:13.5px;line-height:1.55;color:var(--t2);
  background:var(--gld-light);
  border:1px solid var(--gld-bd);
  border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);
}
/* T014 — AI pill shown next to narration when the text was generated by the
   generate-briefing Edge Function (vs local synthesis). Single new class,
   no new tokens — pulls var(--gold) at 12% opacity from gld-soft. */
.cs-ai-indicator{
  display:inline-flex;align-items:center;gap:4px;
  margin-left:8px;padding:2px 8px;
  background:var(--gld-soft);
  color:var(--gold);
  border-radius:var(--r-full);
  font-size:10.5px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;
  vertical-align:middle;
}
.cs-strat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3)}
@media (max-width:960px){.cs-strat-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.cs-strat-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.cs-strat-row{grid-template-columns:1fr}}
.cs-strat-card{
  background:var(--bg);border:1px solid var(--bd);
  border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);
  display:flex;flex-direction:column;gap:4px;
  border-top:2px solid var(--gold);
}
.cs-strat-card-label{
  font-size:10.5px;font-weight:600;
  color:var(--t2);text-transform:uppercase;letter-spacing:.6px;
}
.cs-strat-card-value{font-size:18px;font-weight:700;color:var(--text);line-height:1.1}
.cs-strat-card-sub{font-size:10.5px;color:var(--t3);line-height:1.25}
.cs-exec-risks-title{
  font-size:var(--fs-xs);font-weight:600;
  color:var(--t2);text-transform:uppercase;letter-spacing:.8px;
  margin-bottom:var(--sp-2);
}
.cs-exec-risks{display:flex;flex-direction:column;gap:6px}
.cs-exec-risk{
  font-size:12.5px;color:var(--text);line-height:1.45;
  padding:8px 12px;
  background:rgba(217,85,85,.06);
  border-left:3px solid var(--red);
  border-radius:6px;
}
.cs-exec-risk--ok{
  background:rgba(56,130,246,.06);
  border-left-color:var(--gold);
  color:var(--t2);
}
.cs-exec-briefing-foot{
  display:flex;justify-content:flex-end;
  border-top:1px solid var(--bd);
  padding-top:var(--sp-3);
}
.cs-exec-briefing-link{
  background:transparent;border:none;cursor:pointer;
  color:var(--gold);font-weight:600;font-size:12.5px;
  letter-spacing:.2px;padding:6px 4px;
  transition:color 150ms var(--ease);
}
.cs-exec-briefing-link:hover{color:var(--gold2)}

/* KPI cards row */
.cs-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-bottom:var(--sp-6)}
@media (max-width:768px){.cs-kpi-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.cs-kpi-row{grid-template-columns:1fr}}
.cs-kpi-card{
  background:var(--bg);border:1px solid var(--bd);
  border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-6);
  box-shadow:var(--shadow-sm);
  border-left:3px solid var(--gold);
  transition:box-shadow var(--mo-med) var(--mo-ease),transform var(--mo-med) var(--mo-ease);
  cursor:default;
}
.cs-kpi-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.cs-kpi-card--click{cursor:pointer}
.cs-kpi-card--click:hover{border-color:var(--gld-bd)}
/* T035.1 — shared KPI card with a leading icon (Broker/Pipeline/Ops stat rows) */
.cs-kpi-card--ico{display:flex;flex-direction:row;align-items:flex-start;gap:12px}
.cs-kpi-ico{width:38px;height:38px;flex:none;border-radius:var(--r-md);background:var(--gld-soft);color:var(--gold);display:flex;align-items:center;justify-content:center}
.cs-kpi-card--ico .cs-kpi-body{display:flex;flex-direction:column;min-width:0}
/* T031 — dashboard charts row */
.cs-chart-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.cs-chart-card{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow-sm);min-width:0}
.cs-chart-title{font-size:var(--fs-xs);font-weight:var(--fw-emph);color:var(--t3);text-transform:uppercase;letter-spacing:var(--ls-caps);margin-bottom:10px}
.cs-chart-canvas-wrap{position:relative;height:150px}
.cs-chart-gauge-wrap{display:flex;align-items:flex-end;justify-content:center}
.cs-chart-gauge-val{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:var(--fs-2xl);font-weight:var(--fw-emph);color:var(--text);font-variant-numeric:tabular-nums}
.cs-chart-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--t3);font-size:var(--fs-sm)}
.cs-chart-empty .cs-ico{color:var(--bd2)}
@media (max-width:900px){.cs-chart-row{grid-template-columns:1fr}}
/* T035 — shared wizard stepper */
.cs-stepper{display:flex;align-items:center;gap:0;padding:6px 2px 18px}
.cs-step{display:flex;align-items:center;gap:8px;flex-shrink:0}
.cs-step-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:var(--fw-emph);background:var(--s2);color:var(--t3);border:1.5px solid var(--bd);transition:all var(--mo-med) var(--mo-ease)}
.cs-step-label{font-size:var(--fs-sm);font-weight:var(--fw-emph);color:var(--t3);white-space:nowrap}
.cs-step.on .cs-step-dot{background:var(--cta-gradient);color:#fff;border-color:transparent;box-shadow:0 0 0 4px var(--gld-soft)}
.cs-step.on .cs-step-label{color:var(--text);font-weight:var(--fw-emph)}
.cs-step.done .cs-step-dot{background:var(--gld-soft);color:var(--gold);border-color:var(--gld-bd)}
.cs-step.done .cs-step-label{color:var(--t2)}
.cs-step-line{flex:1;min-width:18px;height:2px;background:var(--bd);margin:0 10px;border-radius:2px}
.cs-step-line.done{background:var(--gld-mid)}
@media (max-width:640px){.cs-step-label{display:none}.cs-step-line{min-width:10px;margin:0 5px}}
/* T035 — shared styled file input */
.cs-fileinput{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px dashed var(--bd2);border-radius:var(--r-md);background:var(--s1);cursor:pointer;transition:all .15s var(--ease)}
.cs-fileinput:hover,.cs-fileinput.drag{border-color:var(--gold);background:var(--gld-light)}
.cs-fileinput-ico{width:40px;height:40px;border-radius:var(--r-sm);background:var(--gld-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cs-fileinput-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs-fileinput-main strong{font-size:var(--fs-base);color:var(--text);font-weight:var(--fw-emph)}
.cs-fileinput-main span{font-size:var(--fs-xs);color:var(--t3)}
.cs-fileinput-chips{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.cs-file-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);background:var(--s2);border:1px solid var(--bd);border-radius:var(--r-full);padding:4px 10px;color:var(--t2)}
.cs-kpi-label{
  font-size:var(--fs-xs);font-weight:var(--fw-emph);
  color:var(--t2);
  text-transform:uppercase;letter-spacing:var(--ls-caps);
  margin-bottom:var(--sp-2);
}
.cs-kpi-value{
  font-size:var(--fs-3xl);font-weight:var(--fw-display);
  color:var(--text);
  line-height:var(--lh-tight);
  margin-bottom:var(--sp-2);
}
.cs-kpi-trend{display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:var(--fw-emph)}
.cs-kpi-trend--up{color:#16a34a}
.cs-kpi-trend--down{color:#dc2626}
.cs-kpi-trend--flat{color:var(--t3)}

/* AI suggestion chips row (Google-style) */
.cs-ai-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-6)}
.cs-ai-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;
  background:var(--bg);
  border:1px solid var(--gold);
  border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:var(--fw-emph);
  color:var(--gold);
  cursor:pointer;
  transition:background var(--mo-fast) var(--mo-ease);
  white-space:nowrap;
}
.cs-ai-chip:hover{background:var(--gld-soft)}
.cs-ai-chip-icon{font-size:var(--fs-base)}
.cs-ai-chip--urgent{border-color:var(--red);color:var(--red)}
.cs-ai-chip--urgent:hover{background:rgba(239,68,68,.06)}
.cs-ai-chip--warn{border-color:#D97706;color:#D97706}
.cs-ai-chip--warn:hover{background:rgba(245,158,11,.06)}

/* Section labels + module cards */
.cs-home-section{margin-bottom:var(--sp-8)}
.cs-home-section-label{
  font-size:var(--fs-xs);font-weight:var(--fw-emph);
  color:var(--t2);
  text-transform:uppercase;letter-spacing:var(--ls-caps);
  margin-bottom:var(--sp-3);
  padding-left:2px;
}
.cs-module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
.cs-module-grid--single{grid-template-columns:1fr;max-width:480px}
.cs-module-grid--triple{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){
  .cs-module-grid,
  .cs-module-grid--triple{grid-template-columns:1fr}
}
.cs-module-card{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-5);
  background:var(--bg);border:1px solid var(--bd);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:box-shadow 150ms var(--ease),transform 150ms var(--ease),border-color 150ms var(--ease);
  text-decoration:none;
}
.cs-module-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--gold)}
.cs-module-card--soon{cursor:default;opacity:.55}
.cs-module-card--soon:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--bd)}
.cs-module-card-icon{
  font-size:28px;flex-shrink:0;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gld-soft);color:var(--gold);
  border-radius:var(--r-md);
}
.cs-module-card-icon .cs-ico{width:24px;height:24px}
.cs-module-card--soon .cs-module-card-icon{color:var(--t3);background:var(--s2)}
.cs-module-card-body{flex:1;min-width:0}
.cs-module-card-title{font-size:var(--fs-md);font-weight:600;color:var(--text);margin-bottom:2px}
.cs-module-card-desc{font-size:var(--fs-sm);color:var(--t2);margin-bottom:var(--sp-2)}
.cs-module-card-stat{font-size:var(--fs-xs);font-weight:600;color:var(--gold)}
.cs-module-card-arrow{
  font-size:var(--fs-lg);color:var(--t3);
  flex-shrink:0;
  transition:transform 150ms var(--ease),color 150ms var(--ease);
}
.cs-module-card:hover .cs-module-card-arrow{transform:translateX(3px);color:var(--gold)}
.cs-module-card-badge{
  font-size:var(--fs-xs);font-weight:600;
  color:var(--t2);background:var(--s2);
  border-radius:var(--r-full);
  padding:3px 10px;flex-shrink:0;
}

/* Today's Focus list (clean checklist) */
.cs-focus-section{margin-bottom:var(--sp-8)}
.cs-focus-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.cs-focus-item{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--bg);border:1px solid var(--bd);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:background 120ms var(--ease),border-color 120ms var(--ease);
}
.cs-focus-item:hover{background:var(--s1);border-color:var(--gold)}
.cs-focus-item--done{opacity:.55;cursor:default}
.cs-focus-item--done:hover{background:var(--bg);border-color:var(--bd)}
.cs-focus-item--done .cs-focus-item-text{text-decoration:line-through;color:var(--t3)}
.cs-focus-item-check{
  width:20px;height:20px;border-radius:var(--r-full);
  border:2px solid var(--bd);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;flex-shrink:0;color:var(--t3);
  transition:all 150ms var(--ease);
}
.cs-focus-item-check--done{background:#16a34a;border-color:#16a34a;color:#fff}
.cs-focus-item-body{flex:1;min-width:0}
.cs-focus-item-text{font-size:var(--fs-sm);font-weight:500;color:var(--text)}
.cs-focus-item-sub{font-size:var(--fs-xs);color:var(--t2);margin-top:1px}
.cs-focus-item-chip{
  font-size:var(--fs-xs);font-weight:600;
  color:var(--gold);background:var(--gld-soft);
  border-radius:var(--r-full);
  padding:3px 10px;flex-shrink:0;white-space:nowrap;
}

/* Portal sub-home */
#scr-portal{padding:0 0 40px}
.portal-sub-hero{padding:28px;border-bottom:1px solid var(--bd);background:var(--s1);display:flex;align-items:flex-start;gap:18px}
.portal-sub-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;border:1px solid}
.portal-sub-info .portal-name{font-size:21px;margin-bottom:5px}
.portal-sub-info .portal-desc{font-size:13px;color:var(--t3);line-height:1.6;max-width:560px;margin-bottom:0}
.sub-apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;padding:26px 28px}
.sub-app-card{background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:20px;cursor:pointer;transition:border-color .2s,transform .15s}
.sub-app-card.enabled-app:hover{border-color:var(--bd2);transform:translateY(-1px)}
.sub-app-card.enabled-app{border-color:var(--gbd)}
.sub-app-card.locked-app{opacity:.45;cursor:default}
.sub-app-ico{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:13px;background:var(--gb);border:1px solid var(--gbd);color:var(--gold)}
.sub-app-card.locked-app .sub-app-ico{background:var(--s2);border-color:var(--bd);color:var(--t3)}
.sub-app-name{font-size:14px;font-weight:600;margin-bottom:4px}
.sub-app-desc{font-size:12px;color:var(--t3);margin-bottom:10px;line-height:1.5}
.sub-app-stat{font-size:11px;color:var(--t3);font-family:var(--mono);margin-top:6px}


/* ═══ PILLS / BADGES ══════════════════════════════════════ */
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:var(--fs-xs);font-weight:var(--fw-emph);white-space:nowrap;letter-spacing:.1px}
.p-on{background:rgba(16,185,129,.10);color:var(--green);border:1px solid rgba(16,185,129,.25)}
.p-off{background:var(--s2);color:var(--t3);border:1px solid var(--bd)}
.p-gold{background:var(--gb);color:var(--gold);border:1px solid var(--gbd)}
.p-blue{background:rgba(59,130,246,.10);color:var(--blue);border:1px solid rgba(59,130,246,.25)}
.p-red{background:rgba(239,68,68,.10);color:var(--red);border:1px solid rgba(239,68,68,.25)}
.p-amber{background:rgba(245,158,11,.10);color:var(--amber);border:1px solid rgba(245,158,11,.25)}
.p-sa{background:var(--gb);color:var(--gold);border:1px solid var(--gbd)}
.p-dir{background:rgba(59,130,246,.10);color:var(--blue);border:1px solid rgba(59,130,246,.25)}
.p-tl{background:rgba(16,185,129,.10);color:var(--green);border:1px solid rgba(16,185,129,.25)}

/* ═══ PIPELINE VISUAL ELEVATION (T002) ═══════════════════
   Shared components used by renderAgentDeals (and reachable by
   TL/Director/Exec views via the same helper functions).
   Pattern: stats bar → filter chips → deal cards (Linear-style). */

/* Stats bar — horizontal row of "label · big number" stats */
.cs-pipe-stats{
  display:flex;flex-wrap:wrap;gap:0;
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  margin-bottom:var(--sp-4);
  overflow:hidden;
}
.cs-pipe-stat{
  flex:1 1 130px;min-width:130px;
  padding:14px 18px;
  border-right:1px solid var(--bd);
  display:flex;flex-direction:column;gap:4px;
}
.cs-pipe-stat:last-child{border-right:none}
.cs-pipe-stat-label{
  font-size:var(--fs-xs);font-weight:600;
  color:var(--t2);
  text-transform:uppercase;letter-spacing:.6px;
}
.cs-pipe-stat-value{
  font-size:22px;font-weight:700;color:var(--text);
  line-height:1.1;letter-spacing:-.3px;
}
.cs-pipe-stat-value .cs-pipe-stat-unit{
  font-size:12px;font-weight:500;color:var(--t3);margin-left:4px;
}
@media (max-width:640px){
  .cs-pipe-stats{flex-direction:column}
  .cs-pipe-stat{border-right:none;border-bottom:1px solid var(--bd)}
  .cs-pipe-stat:last-child{border-bottom:none}
}

/* Filter chips row */
.cs-pipe-filter-row{
  display:flex;gap:var(--sp-2);
  flex-wrap:wrap;
  margin-bottom:var(--sp-4);
}
.cs-pipe-filter-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:var(--r-full);
  font-size:var(--fs-sm);font-weight:500;
  color:var(--t2);
  cursor:pointer;
  transition:all 120ms var(--ease);
  white-space:nowrap;
}
.cs-pipe-filter-chip:hover{border-color:var(--gold);color:var(--gold)}
.cs-pipe-filter-chip.on{
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
  box-shadow:0 2px 6px rgba(56,130,246,.2);
}
.cs-pipe-filter-chip-count{
  display:inline-block;
  font-size:10px;font-weight:700;font-family:var(--mono);
  padding:1px 6px;border-radius:var(--r-full);
  background:rgba(0,0,0,.06);color:inherit;
}
.cs-pipe-filter-chip.on .cs-pipe-filter-chip-count{background:rgba(255,255,255,.22)}

/* Deal cards — three-region layout */
.cs-deal-list{
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.cs-deal-card{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;gap:var(--sp-4);
  padding:14px var(--sp-4);
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:border-color 120ms var(--ease),background 120ms var(--ease),box-shadow 120ms var(--ease);
  position:relative;
}
.cs-deal-card:hover{
  border-color:var(--gold);
  background:var(--s1);
  box-shadow:var(--shadow-sm);
}
.cs-deal-card--draft{opacity:.65}
.cs-deal-card-left{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs-deal-card-client{
  font-size:var(--fs-md);font-weight:600;color:var(--text);
  letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cs-deal-card-unit{
  font-size:var(--fs-xs);font-family:var(--mono);color:var(--t3);
}
.cs-deal-card-broker{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);color:var(--t2);
  white-space:nowrap;
}
.cs-deal-card-broker-name{font-weight:500;color:var(--text)}
.cs-deal-card-cr{
  display:inline-block;
  font-size:10.5px;font-family:var(--mono);font-weight:600;
  background:var(--s2);color:var(--t2);
  padding:2px 8px;border-radius:var(--r-full);
}
.cs-deal-card-right{
  display:flex;align-items:center;gap:var(--sp-3);
  justify-self:end;
}
.cs-deal-card-area{
  font-size:var(--fs-sm);font-weight:600;color:var(--text);
  font-family:var(--mono);
  white-space:nowrap;
}
.cs-deal-card-area-unit{font-size:10px;font-weight:500;color:var(--t3);margin-left:2px}

/* Stage badge — colored pill per brief palette */
.cs-stage-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  padding:4px 10px;
  border-radius:var(--r-full);
  white-space:nowrap;
}
.cs-stage-badge::before{
  content:'';width:6px;height:6px;border-radius:var(--r-full);
  background:currentColor;
}
.cs-stage-badge--new_lead{    background:rgba(100,116,139,.10); color:#475569; }
.cs-stage-badge--proposal{    background:rgba(59,130,246,.10);  color:#2563EB; }
.cs-stage-badge--site_visit{  background:rgba(56,130,246,.12);   color:var(--gold); }
.cs-stage-badge--negotiation{ background:rgba(245,158,11,.12);  color:#D97706; }
.cs-stage-badge--reservation{ background:rgba(168,85,247,.12);  color:#9333EA; }
.cs-stage-badge--contracted{  background:rgba(16,185,129,.12);  color:#059669; }
.cs-stage-badge--lost{        background:rgba(239,68,68,.10);   color:var(--red); }
.cs-stage-badge--unknown{     background:var(--s2);             color:var(--t3); }

/* Footer row: agent · TL · days in stage */
.cs-deal-card-foot{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-xs);color:var(--t3);
  padding-top:8px;margin-top:8px;
  border-top:1px solid var(--s2);
}
.cs-deal-card-foot-item{display:inline-flex;align-items:center;gap:4px}
.cs-deal-card-foot-item strong{color:var(--t2);font-weight:600}

/* Action buttons — hidden by default, fade in on hover */
.cs-deal-card-actions{
  position:absolute;top:8px;right:8px;
  display:flex;gap:6px;
  opacity:0;pointer-events:none;
  transition:opacity 150ms var(--ease);
}
.cs-deal-card:hover .cs-deal-card-actions{opacity:1;pointer-events:auto}
.cs-deal-card-action{
  font-size:11px;font-weight:600;
  padding:5px 10px;
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:var(--r-sm);
  color:var(--t2);cursor:pointer;
  transition:all 100ms var(--ease);
}
.cs-deal-card-action:hover{border-color:var(--gold);color:var(--gold)}
.cs-deal-card-action--primary{
  background:var(--cta-gradient);color:#fff;border-color:transparent;
}
.cs-deal-card-action--primary:hover{background:var(--cta-gradient-hover);color:#fff}

@media (max-width:640px){
  .cs-deal-card{grid-template-columns:1fr;gap:var(--sp-2)}
  .cs-deal-card-broker,.cs-deal-card-right{justify-self:flex-start}
  .cs-deal-card-actions{position:static;opacity:1;pointer-events:auto;margin-top:8px}
}

/* Empty state inside pipeline */
.cs-pipe-empty{
  padding:48px 24px;text-align:center;
  color:var(--t3);font-size:var(--fs-sm);
  background:var(--bg);border:1px dashed var(--bd);
  border-radius:var(--r-lg);
}
.cs-pipe-empty-title{
  font-size:var(--fs-md);font-weight:600;color:var(--text);
  margin-bottom:6px;
}

/* ═══ PIPELINE HOME (T036) — action list · lens toggle · stage board ═══ */
.cs-pipe-home{padding:16px 20px;display:flex;flex-direction:column;gap:16px}
.cs-pipe-home-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cs-pipe-home-hd .pt{font-size:var(--fs-xl);font-weight:700;color:var(--text)}
.cs-pipe-home-hd .ps{font-size:var(--fs-sm);color:var(--t3);margin-top:2px}

/* Action list — "what needs me now" */
.cs-actions{display:flex;flex-direction:column;gap:8px}
.cs-action{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:var(--r-md);
  background:var(--s1);border:1px solid var(--bd);
  border-left:3px solid var(--gold);
}
.cs-action--warn{border-left-color:#D97706}
.cs-action--info{border-left-color:var(--blue,#2563EB)}
.cs-action-ico{width:34px;height:34px;flex:none;border-radius:var(--r-md);background:var(--gld-soft);color:var(--gold);display:flex;align-items:center;justify-content:center}
.cs-action--warn .cs-action-ico{background:rgba(245,158,11,.12);color:#D97706}
.cs-action-body{flex:1;min-width:0}
.cs-action-title{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.cs-action-sub{font-size:var(--fs-xs);color:var(--t3);margin-top:1px}
.cs-action-cta{
  flex:none;font-size:12px;font-weight:600;padding:7px 13px;border-radius:var(--r-sm);
  background:var(--cta-gradient);color:#fff;border:none;cursor:pointer;white-space:nowrap;
}
.cs-action-cta:hover{filter:brightness(1.06)}
.cs-actions-clear{
  display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--t3);
  padding:11px 14px;background:var(--s1);border:1px dashed var(--bd);border-radius:var(--r-md);
}

/* Lens toggle — My pipeline | Manager-validated */
.cs-lens{display:inline-flex;padding:3px;background:var(--s2);border:1px solid var(--bd);border-radius:var(--r-full)}
.cs-lens button{
  font-size:12.5px;font-weight:600;padding:6px 15px;border:none;border-radius:var(--r-full);
  background:transparent;color:var(--t2);cursor:pointer;transition:all 120ms var(--ease);
}
.cs-lens button.on{background:var(--bg);color:var(--text);box-shadow:var(--shadow-sm)}

/* Stage board */
.cs-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.cs-board-col{
  flex:1 0 220px;min-width:220px;max-width:320px;
  background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden;
}
.cs-board-col-hd{padding:11px 13px;border-bottom:1px solid var(--bd);background:var(--s2)}
.cs-board-col-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cs-board-col-name{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text)}
.cs-board-col-count{font-size:11px;font-weight:700;color:var(--t2);background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-full);padding:1px 8px}
.cs-board-col-sub{font-size:11px;color:var(--t3);margin-top:3px}
.cs-board-col-body{padding:9px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:520px}
.cs-board-empty{font-size:11.5px;color:var(--t3);text-align:center;padding:16px 8px;border:1px dashed var(--bd);border-radius:var(--r-md)}
.cs-board-card{
  background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-md);
  padding:10px 11px;cursor:pointer;transition:border-color 120ms var(--ease),transform 120ms var(--ease);
}
.cs-board-card:hover{border-color:var(--gold);transform:translateY(-1px)}
.cs-board-card-client{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-board-card-meta{font-size:11px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-board-card-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px}
.cs-board-card-area{font-size:12px;font-weight:700;color:var(--t2)}
.cs-board-card-area span{font-size:10px;font-weight:500;color:var(--t3);margin-left:2px}
.cs-board-card-convert{
  width:100%;margin-top:8px;font-size:11.5px;font-weight:700;padding:7px;border-radius:var(--r-sm);
  background:var(--cta-gradient);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;
}
.cs-board-card-convert:hover{filter:brightness(1.06)}
.cs-board-card-nudge{
  margin-top:7px;font-size:10.5px;color:#D97706;background:rgba(245,158,11,.10);
  border-radius:var(--r-sm);padding:5px 8px;display:flex;align-items:center;gap:5px;
}
@media (max-width:640px){.cs-board-col{flex:1 0 82vw;min-width:82vw}}

/* T044 — Won/Lost terminal columns + auto Cancelled tag */
.cs-board-col--terminal .cs-board-col-body{background:var(--s2)}
.cs-board-col--won .cs-board-col-hd{border-bottom:2px solid #059669}
.cs-board-col--won .cs-board-col-name{color:#059669}
.cs-board-col--lost .cs-board-col-hd{border-bottom:2px solid var(--red)}
.cs-board-col--lost .cs-board-col-name{color:var(--red)}
.cs-board-card-tag{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:1px 6px;border-radius:var(--r-full);vertical-align:middle}
.cs-board-card-tag--cancel{background:rgba(239,68,68,.12);color:var(--red)}
.cs-board-card-tag--pending{background:rgba(245,158,11,.14);color:#D97706}
.cs-board-card-tag--overdue{background:rgba(239,68,68,.14);color:var(--red)}
.cs-board-card-tag--today{background:rgba(37,99,235,.12);color:#2563EB}
/* T057 — dashboard follow-up chip (links to the Follow-ups tab) */
.cs-fu-chip-wrap:empty{display:none}
.cs-fu-chip-wrap{margin:2px 0 4px}
.cs-fu-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:6px 12px;border-radius:var(--r-full);border:1px solid var(--bd);background:var(--s1);color:var(--t2);cursor:pointer}
.cs-fu-chip:hover{border-color:var(--gold)}
.cs-fu-chip--overdue{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3);color:var(--red)}
.cs-fu-chip-go{font-size:11px;color:var(--t3);font-weight:600}
.cs-fu-chip:hover .cs-fu-chip-go{color:var(--gold)}
/* T057 — Log & schedule modal */
.cs-fu-field{margin-bottom:12px}
.cs-fu-field label{display:block;font-size:11.5px;font-weight:600;color:var(--t2);margin-bottom:5px}
.cs-fu-sched--off{opacity:.45;pointer-events:none}
/* T047 — follow-up worklist */
.cs-worklist:empty{display:none}
.cs-worklist-inner{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-lg);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.cs-wl-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text)}
.cs-wl-overdue-badge{font-size:10.5px;font-weight:700;color:var(--red);background:rgba(239,68,68,.12);border-radius:var(--r-full);padding:1px 8px}
.cs-wl-group{display:flex;flex-direction:column;gap:6px}
.cs-wl-group-hd{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}
.cs-wl-group-hd--overdue{color:var(--red)}
.cs-wl-group-hd--today{color:#2563EB}
.cs-wl-count{font-size:10px;font-weight:700;color:var(--t2);background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-full);padding:0 7px}
.cs-wl-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-md);flex-wrap:wrap}
.cs-wl-item-main{min-width:0;flex:1}
.cs-wl-item-title{font-size:13px;font-weight:600;color:var(--text)}
.cs-wl-when{font-size:11px;font-weight:600;color:var(--t3);margin-left:6px}
.cs-wl-item-meta{font-size:11px;color:var(--t3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-wl-item-actions{display:flex;gap:5px;flex-wrap:wrap}
.mydeals-status{font-weight:700}
/* T046 — Roles / Hierarchy settings section */
.rh-list{display:flex;flex-direction:column;gap:8px}
.rh-rung{display:grid;grid-template-columns:auto 34px 150px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--bd);border-radius:var(--r-md);background:var(--s1);cursor:pointer}
.rh-rung.on{border-color:var(--gold);background:var(--gld-soft)}
.rh-rung input{accent-color:var(--gold);width:16px;height:16px}
.rh-lvl{font-size:10px;font-weight:700;color:var(--t3);text-align:center;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-full);padding:2px 0}
.rh-name{font-size:13px;font-weight:700;color:var(--text)}
.rh-desc{font-size:11.5px;color:var(--t3)}
.rh-lock{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--gold)}
.rh-chain-wrap{margin-top:14px;padding-top:12px;border-top:1px solid var(--bd)}
.rh-chain-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:6px}
.rh-chain{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:12.5px}
.rh-node{font-weight:700;color:var(--text);background:var(--s2);border:1px solid var(--bd);border-radius:var(--r-full);padding:3px 11px}
.rh-arrow{color:var(--gold);font-weight:700;padding:0 2px}
.rh-chip{display:inline-block;font-size:11px;color:var(--t2);background:var(--s2);border:1px solid var(--bd);border-radius:var(--r-full);padding:2px 9px}
@media (max-width:640px){.rh-rung{grid-template-columns:auto 30px 1fr}.rh-rung .rh-desc,.rh-rung .rh-lock{display:none}}
/* T048 — home accent-tile module sections (tokens → works dark + light) */
.cs-hm-sec{margin-bottom:22px}
.cs-hm-sh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cs-hm-sh b{font-size:16px;font-weight:600;color:var(--text)}
.cs-hm-sh small{color:var(--t3);font-size:13px}
.cs-hm-chip{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.cs-hm-chip--blue{background:rgba(37,99,235,.14);color:#3882F6}
.cs-hm-chip--amber{background:rgba(217,119,6,.16);color:#D97706}
.cs-hm-chip--green{background:rgba(5,150,105,.16);color:#10B981}
.cs-hm-chip--teal{background:var(--gld-soft);color:var(--gold)}
.cs-hm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media (max-width:720px){.cs-hm-tiles{grid-template-columns:1fr}}
.cs-hm-tile,.cs-hm-wide{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-lg);cursor:pointer;transition:border-color 120ms var(--ease),transform 120ms var(--ease)}
.cs-hm-tile{padding:16px 18px}
.cs-hm-wide{padding:16px 20px;margin-bottom:14px}
.cs-hm-tile:hover,.cs-hm-wide:hover{border-color:var(--gold);transform:translateY(-1px)}
.cs-hm-th{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cs-hm-ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.cs-hm-wide .cs-hm-ic{width:36px;height:36px}
.cs-hm-tt{flex:1;min-width:120px}
.cs-hm-tt b{font-size:15px;font-weight:600;color:var(--text)}
.cs-hm-tt div{font-size:12px;color:var(--t3)}
.cs-hm-go{color:var(--t3);flex:none}
.cs-hm-mrow{display:grid;gap:8px}
.cs-hm-m3{grid-template-columns:repeat(3,1fr)}.cs-hm-m2{grid-template-columns:repeat(2,1fr)}
.cs-hm-met{background:var(--s2);border-radius:9px;padding:8px 10px}
.cs-hm-met .cs-hm-n,.cs-hm-wmet .cs-hm-n{font-size:20px;font-weight:700;line-height:1.1}
.cs-hm-k{font-size:12px;color:var(--t3)}
.cs-hm-wrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cs-hm-wmet{background:var(--s2);border-radius:9px;padding:8px 16px;text-align:center;min-width:78px}
/* T049 — base value colour first, then tone classes (same specificity, later → win). */
.cs-hm-n{color:var(--text)}
.cs-hm-n--amber{color:#D97706}.cs-hm-n--green{color:#10B981}.cs-hm-n--red{color:var(--red)}
.cs-hm-avbar{display:flex;height:8px;gap:2px;margin-top:12px}
.cs-hm-avbar div{border-radius:999px;min-width:6px}
.cs-hm-soon{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px;margin-bottom:8px}
@media (max-width:640px){.cs-hm-soon{grid-template-columns:1fr}}
.cs-hm-sn{border:1px dashed var(--bd);border-radius:9px;padding:11px 14px;display:flex;align-items:center;gap:8px;color:var(--t3);opacity:.85;font-size:13px}
.cs-hm-sn em{margin-left:auto;font-style:normal;font-size:11px;color:var(--t3)}
/* T050 — Add-Deal progressive disclosure (essentials + "add more details") */
.df-sec-label{grid-column:1/-1;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);margin:12px 0 2px}
.df-more-toggle{grid-column:1/-1;display:flex;align-items:center;gap:6px;margin:14px 0 4px;padding:9px 12px;background:var(--s2);border:1px solid var(--bd);border-radius:var(--r-md);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;text-align:left}
.df-more-toggle:hover{border-color:var(--gold)}
.df-more-toggle .df-more-caret{transition:transform 120ms var(--ease)}
.df-more-toggle.on .df-more-caret{transform:rotate(90deg)}
#df-more{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){#df-more{grid-template-columns:1fr}}
.df-hint{font-size:10.5px;color:var(--t3);margin-top:4px}
.df-hint-inline{font-size:10px;color:var(--t3);font-weight:400}

/* T051 — Add-Deal 2-step modal wizard */
.df-wiz-card{max-width:680px}
.df-wiz-progress{height:3px;background:var(--s2);position:relative;overflow:hidden}
.df-wiz-progress-bar{height:100%;width:50%;background:var(--cta-gradient);transition:width 220ms var(--ease)}
.df-wiz-bd{padding:0;max-height:calc(100vh - 250px);overflow-y:auto}
.df-wiz-bd .if-bd{padding:18px}
.df-wiz-steplabel{font-weight:600}
.df-wiz-ft{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--bd);background:var(--s1)}
.df-wiz-ftrow{display:flex;gap:10px;width:100%;align-items:center}
@media (max-width:640px){.df-wiz-bd .if-bd{grid-template-columns:1fr}}

/* Board card — drag + quick stage menu (T036.2) */
.cs-board-card[draggable="true"]{cursor:grab}
.cs-board-card.cs-dragging{opacity:.45;cursor:grabbing}
.cs-board-col-body.cs-drop-hot{background:var(--gld-soft);outline:2px dashed var(--gold);outline-offset:-4px;border-radius:var(--r-md)}
.cs-board-card-controls{margin-top:8px}
.cs-board-move{
  width:100%;font-size:11.5px;padding:5px 8px;border-radius:var(--r-sm);
  background:var(--s1);border:1px solid var(--bd);color:var(--t2);cursor:pointer;
}
.cs-board-move:hover{border-color:var(--gold)}

/* Deal detail modal (T036.2) — read-only "see everything" view */
.cs-detail-overlay{
  position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-start;justify-content:center;
  padding:40px 16px;overflow-y:auto;background:rgba(6,12,22,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.cs-detail-card{
  width:100%;max-width:640px;background:var(--bg);border:1px solid var(--bd);
  border-radius:var(--r-lg);box-shadow:var(--shadow-xl);overflow:hidden;
}
.cs-detail-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--bd);background:var(--s1)}
.cs-detail-hd-l{min-width:0}
.cs-detail-title{font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-detail-sub{font-size:12px;color:var(--t3);margin-top:2px}
.cs-detail-close{width:32px;height:32px;flex:none;border-radius:var(--r-sm);background:var(--s2);border:1px solid var(--bd);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.cs-detail-close:hover{border-color:var(--gold);color:var(--gold)}
.cs-detail-actions{display:flex;gap:8px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--bd);background:rgba(56,130,246,.04);align-items:center}
.cs-detail-bd{padding:6px 18px 18px}
.cs-detail-grid{width:100%;border-collapse:collapse;margin-top:10px}
.cs-detail-grid tr{border-bottom:1px solid var(--s2)}
.cs-detail-grid tr:last-child{border-bottom:none}
.cs-detail-grid td{padding:8px 4px;font-size:12.5px;vertical-align:top}
.cs-detail-grid td.k{color:var(--t3);width:150px;font-weight:500}
.cs-detail-grid td.v{color:var(--text);font-weight:500}
.cs-detail-section{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin:16px 0 2px}
.cs-detail-move{font-size:12px;padding:6px 10px;border-radius:var(--r-sm);background:var(--s1);border:1px solid var(--bd);color:var(--t2);cursor:pointer}
.cs-detail-move:hover{border-color:var(--gold)}
.cs-detail-lock{font-size:10px;color:var(--t3);margin-left:6px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.cs-detail-ctl-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.cs-detail-ctl-lbl{font-size:11px;color:var(--t3);font-weight:600}
.cs-detail-outcome{font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:var(--r-sm);background:var(--s1);border:1px solid var(--bd);color:var(--t2);cursor:pointer}
.cs-detail-outcome:hover{border-color:var(--gold);color:var(--gold)}
.cs-detail-outcome--danger:hover{border-color:var(--red);color:var(--red)}

/* T052 — deal activity / history timeline */
.cs-tl-wrap{margin-top:6px}
.cs-tl-loading,.cs-tl-empty{display:flex;align-items:center;gap:8px;color:var(--t3);font-size:12.5px;padding:14px 4px}
.cs-tl-empty{flex-direction:column;text-align:center;gap:6px;padding:24px 4px}
.cs-tl-empty svg{color:var(--t3);opacity:.6}
.cs-tl-empty span{font-size:11.5px;color:var(--t3)}
.cs-tl-composer{display:grid;grid-template-columns:104px 1fr auto;gap:8px;align-items:start;margin-bottom:14px}
.cs-tl-sel{height:36px;border:1px solid var(--bd);background:var(--s1);color:var(--text);border-radius:var(--r-sm);font-size:12px;padding:0 8px}
.cs-tl-ta{border:1px solid var(--bd);background:var(--s1);color:var(--text);border-radius:var(--r-sm);font-size:12.5px;padding:8px 9px;resize:vertical;font-family:inherit;min-height:36px;line-height:1.4}
.cs-tl-ta:focus,.cs-tl-sel:focus{outline:none;border-color:var(--gold)}
.cs-tl-log{align-self:stretch}
.cs-tl{position:relative;padding-left:2px}
.cs-tl-day{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin:12px 0 8px}
.cs-tl-day:first-child{margin-top:2px}
.cs-tl-item{display:grid;grid-template-columns:26px 1fr;gap:10px;position:relative;padding-bottom:14px}
.cs-tl-item::before{content:"";position:absolute;left:12.5px;top:26px;bottom:-2px;width:1.5px;background:var(--bd)}
.cs-tl-item:last-child::before{display:none}
.cs-tl-rail{position:relative;z-index:1}
.cs-tl-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--s2);border:1px solid var(--bd);color:var(--t2)}
.cs-tl-body{min-width:0;padding-top:2px}
.cs-tl-text{font-size:12.5px;color:var(--text);line-height:1.45;word-break:break-word;white-space:pre-wrap}
.cs-tl-meta{display:flex;align-items:center;gap:7px;margin-top:4px}
.cs-tl-avatar{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#3882F6,#0066CC);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.cs-tl-who{font-size:11px;color:var(--t2);font-weight:600}
.cs-tl-time{font-size:11px;color:var(--t3)}
.cs-tl-chip{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:1px 6px;border-radius:var(--r-full);background:var(--s2);color:var(--t3);margin-left:6px;vertical-align:middle}
.cs-tl-more{margin-top:2px;font-size:11.5px;color:var(--gold);background:none;border:none;cursor:pointer;padding:4px 2px;font-weight:600}
.cs-tl-more:hover{text-decoration:underline}
.cs-tl--blue  .cs-tl-icon{color:var(--blue);border-color:rgba(37,99,235,.4);background:rgba(37,99,235,.10)}
.cs-tl--teal  .cs-tl-icon{color:var(--gold);border-color:rgba(56,130,246,.4);background:rgba(56,130,246,.10)}
.cs-tl--green .cs-tl-icon{color:var(--green);border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.10)}
.cs-tl--amber .cs-tl-icon{color:var(--amber);border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.10)}
.cs-tl--red   .cs-tl-icon{color:var(--red);border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.10)}
.cs-tl--gray  .cs-tl-icon{color:var(--t2)}
@media(max-width:560px){.cs-tl-composer{grid-template-columns:1fr auto}.cs-tl-ta{grid-column:1/-1;order:3}}

/* T053 — Customer Profile */
.cs-cp-card{max-width:720px}
.cs-cp-hero{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-bottom:1px solid var(--bd);background:var(--s1)}
.cs-cp-av{width:46px;height:46px;flex:none;border-radius:50%;background:linear-gradient(135deg,#3882F6,#0066CC);color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cs-cp-hd-l{min-width:0;flex:1}
.cs-cp-name{font-size:17px;font-weight:700;color:var(--text)}
.cs-cp-ar{font-size:12.5px;color:var(--t3);margin-top:1px}
.cs-cp-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12px;color:var(--t2)}
.cs-cp-meta span{display:inline-flex;align-items:center;gap:5px}
.cs-cp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cs-cp-chip{font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:var(--r-full);background:var(--gld-soft);color:var(--gold);border:1px solid rgba(56,130,246,.25)}
.cs-cp-bd{padding:6px 18px 18px;max-height:calc(100vh - 260px);overflow-y:auto}
.cs-cp-sec-hd{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.cs-cp-sec-hd .cs-cp-count{color:var(--t2);background:var(--s2);border-radius:var(--r-full);padding:0 7px;font-size:10px}
.cs-cp-deal{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--bd);border-radius:var(--r-md);margin-bottom:7px;cursor:pointer;background:var(--s1)}
.cs-cp-deal:hover{border-color:var(--gold)}
.cs-cp-deal-main{min-width:0;flex:1}
.cs-cp-deal-t{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-cp-deal-s{font-size:11px;color:var(--t3);margin-top:1px}
.cs-cp-deal-chip{font-size:10px;font-weight:600;padding:2px 8px;border-radius:var(--r-full);flex:none}
.cs-cp-empty{color:var(--t3);font-size:12px;padding:8px 2px}
.cs-cp-stage{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 9px;border-radius:var(--r-full);vertical-align:middle;margin-left:6px}
.cs-cp-stage--lead{background:rgba(37,99,235,.14);color:var(--blue)}
.cs-cp-stage--customer{background:rgba(16,185,129,.16);color:var(--green)}
/* T059 — Customer 360 (wider card, at-a-glance strip, two-column body) */
.cs-cp-card{max-width:860px}
.cs-cp-actions{display:flex;gap:8px;flex-wrap:wrap;align-self:flex-start}
.cs-cp-ticket-btn{border-color:var(--gold);color:var(--gold)}
.cs-cp-ticket-btn:hover{background:var(--gld-soft);border-color:var(--gold)}
.cs-cp-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin:2px 0 12px}
.cs-cp-stat{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-md);padding:10px 12px;text-align:center}
.cs-cp-stat-v{font-size:17px;font-weight:700;color:var(--text)}
.cs-cp-stat-k{font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.cs-cp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px 22px;align-items:start}
.cs-cp-col{min-width:0}
.cs-cp-life{display:flex;gap:9px;padding:6px 0;align-items:flex-start}
.cs-cp-life-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none;background:var(--t3)}
.cs-cp-life--green .cs-cp-life-dot{background:var(--green)}
.cs-cp-life--teal .cs-cp-life-dot{background:var(--gold)}
.cs-cp-life--gray .cs-cp-life-dot{background:var(--t3)}
.cs-cp-life-b{min-width:0}
.cs-cp-life-t{font-size:12.5px;color:var(--text)}
.cs-cp-life-d{font-size:11px;color:var(--t3);margin-top:1px}
.cs-cp-scaffold{border:1px dashed var(--bd);border-radius:var(--r-md);padding:12px 14px;background:var(--s1)}
.cs-cp-soon{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 9px;border-radius:var(--r-full);background:rgba(245,158,11,.14);color:var(--amber);border:1px solid rgba(245,158,11,.3)}
.cs-cp-scaffold-line{font-size:12px;color:var(--t3);margin-top:8px}
@media(max-width:560px){.cs-cp-strip{grid-template-columns:repeat(2,1fr)}}
/* T060 — segment scaffold card */
.cs-cp-segment{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px dashed var(--bd);border-radius:var(--r-md);padding:9px 12px;background:var(--s1);margin-bottom:12px}
.cs-cp-seg-l{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--t3)}
.cs-cp-seg-v{font-size:13px;font-weight:700;color:var(--text)}
.cs-cp-seg-hint{font-size:11px;color:var(--t3);margin-left:auto}
/* T060 — muted "N earlier requests not shown" line */
.cs-cp-muted{font-size:11px;color:var(--t3);margin-top:6px;font-style:italic}
/* T060 — customer note log */
.cs-cp-note-add{margin-bottom:12px}
.cs-cp-note-add textarea{width:100%;resize:vertical;min-height:44px}
.cs-cp-note-row{display:flex;gap:8px;margin-top:8px;align-items:center}
.cs-cp-note-row select{max-width:170px}
.cs-cp-note-row .btn{margin-left:auto}
.cs-cp-note{border:1px solid var(--bd);border-radius:var(--r-md);padding:9px 11px;margin-bottom:7px;background:var(--s1)}
.cs-cp-note-hd{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cs-cp-note-author{font-size:12px;font-weight:600;color:var(--text)}
.cs-cp-note-time{font-size:11px;color:var(--t3);margin-left:auto}
.cs-cp-note-body{font-size:12.5px;color:var(--t2);white-space:pre-wrap;word-break:break-word}
.cs-cp-note-chip{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:1px 7px;border-radius:var(--r-full);background:var(--s2);color:var(--t2)}
.cs-cp-note-chip--customer_service{background:rgba(37,99,235,.14);color:var(--blue)}
.cs-cp-note-chip--collections{background:rgba(245,158,11,.14);color:var(--amber)}
/* T062 — master-plan pins + visual availability */
.cs-pin-wrap{position:relative;display:inline-block;max-width:100%;border:1px solid var(--bd);border-radius:var(--r-md);overflow:hidden;background:var(--s1);cursor:crosshair}
.cs-pin-img{display:block;max-width:100%;height:auto;user-select:none}
.cs-pin{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transform:translate(-50%,-50%);z-index:2}
.cs-pin--live{cursor:pointer}
.cs-pin--live:hover{width:18px;height:18px}
.cs-pin-legend{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:middle}
.cs-inv-viewtoggle{display:inline-flex;gap:2px;border:1px solid var(--bd);border-radius:var(--r-full);padding:2px;background:var(--s2)}
.cs-inv-viewtoggle button{border:none;background:none;font-size:12px;font-weight:600;padding:4px 12px;border-radius:var(--r-full);color:var(--t2);cursor:pointer}
.cs-inv-viewtoggle button.on{background:var(--bg);color:var(--gold)}

/* T067 — Availability Studio (mapping studio + drill-down viewer + offer/compare) */
.cs-avs-wrap{display:flex;gap:14px;align-items:stretch;min-height:420px}
.cs-avs-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.cs-avs-stagewrap{position:relative;flex:1;min-height:380px;border:1px solid var(--bd);border-radius:var(--r-md);overflow:hidden;background:var(--s1);display:flex;align-items:center;justify-content:center}
.cs-avs-stagewrap--scroll{overflow:auto;align-items:flex-start;justify-content:flex-start}
.cs-avs-stage{position:relative;transition:transform .45s var(--ease)}
.cs-avs-stage img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.cs-avs-svg{position:absolute;inset:0;width:100%;height:100%}
.cs-avs-svg .shp{transition:fill-opacity .15s}
.cs-avs-svg .guide{stroke:#FF3B9D;stroke-width:1.6;stroke-dasharray:5 4}
.cs-avs-svg .handle{fill:#fff;stroke:var(--gold);stroke-width:2;cursor:nwse-resize}
.cs-avs-svg .amk-num{fill:#fff;font-weight:800;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:rgba(0,0,0,.55);stroke-width:3px;pointer-events:none}
.cs-avs-svg .shp.sel,.cs-avs-svg .amk.msel{filter:drop-shadow(0 0 6px rgba(56,130,246,.8))}
.cs-avs-svg .leadline{stroke-width:2.4}
.cs-avs-svg .pinhalo{fill:none;stroke-width:2;opacity:.55;transform-box:fill-box;transform-origin:center;animation:csHaloPulse 2.4s ease-out infinite}
@keyframes csHaloPulse{0%{opacity:.55;transform:scale(.7)}65%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.9)}}
@media (prefers-reduced-motion:reduce){.cs-avs-svg .pinhalo{animation:none;opacity:.55;transform:none}}
.cs-avs-labels{position:absolute;inset:0;pointer-events:none;z-index:3}
.cs-avs-bnum{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;min-width:26px;height:26px;padding:0 7px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:#fff;background:var(--navy);border:2px solid var(--bc,#3882F6);box-shadow:0 2px 8px rgba(0,0,0,.45)}
.cs-avs-bnum.dim{opacity:.35}
.cs-avs-bnum.none{opacity:.4;filter:grayscale(.6)}
.cs-avs-cal{position:absolute;transform:translate(-50%,-100%);pointer-events:none;background:var(--bg);border:1.6px solid var(--gold);border-radius:var(--r-md);padding:7px 11px;font-size:12px;box-shadow:var(--shadow-lg);white-space:nowrap;z-index:4}
.cs-avs-cal.below{transform:translate(-50%,0)}
.cs-avs-cal.premium{border-width:2px;padding:10px 14px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.cs-avs-cal .pc-kick{font-size:9.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--t3)}
.cs-avs-cal .pc-code{font-weight:800;font-size:13.5px;color:var(--text)}
.cs-avs-cal .pc-sub{font-size:11px;color:var(--t3)}
.cs-avs-cal .pc-st{font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px}
.cs-avs-cal .pc-st .d{width:7px;height:7px;border-radius:50%;display:inline-block}
.cs-avs-cal .pc-num{display:inline-flex;width:17px;height:17px;border-radius:50%;color:#fff;font-size:10.5px;font-weight:800;align-items:center;justify-content:center;margin-right:5px;vertical-align:-3px}
.cs-avs-tip{position:fixed;z-index:2400;transform:translate(12px,14px);background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-sm);padding:5px 9px;font-size:11.5px;box-shadow:var(--shadow-md);pointer-events:none;display:none;white-space:nowrap}
.cs-avs-tip.show{display:block}
.cs-avs-tip .d{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px}
/* T074-C — Inventory Studio as a full-window workspace (not a floating dialog). */
.cs-detail-overlay.cs-avs-fullwin{padding:0;background:var(--bg);align-items:stretch;justify-content:stretch;-webkit-backdrop-filter:none;backdrop-filter:none}
.cs-avs-fullwin>.cs-avs-fullwin-card{max-width:none;width:100vw;height:100vh;border-radius:0;border:none;box-shadow:none}
/* T074-E — shared status legend chips (screen); one style everywhere a legend shows. */
.cs-statlegend{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cs-statchip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--t2);padding:3px 10px;border-radius:var(--r-full);background:var(--s1);border:1px solid var(--bd);text-transform:capitalize;line-height:1.6}
.cs-statchip .d{width:9px;height:9px;border-radius:50%;flex:none;background:var(--pc,var(--t3))}
.cs-statchip.live .d{position:relative;box-shadow:0 0 0 0 var(--pc);animation:csChipPulse 2.4s ease-out infinite}
@keyframes csChipPulse{0%{box-shadow:0 0 0 0 var(--pc)}70%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.cs-statchip.live .d{animation:none}}
/* T074-D — offer page organizer (drag-to-reorder) + pinned End page. */
.cs-pgorg{display:flex;flex-direction:column;gap:7px}
.cs-pgorg-card{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid var(--bd);border-radius:var(--r-md);background:var(--s1)}
.cs-pgorg-card[draggable="true"]{cursor:grab}
.cs-pgorg-card.dragging{opacity:.45;border-color:var(--gold)}
.cs-pgorg-card.dragover{border-color:var(--gold);box-shadow:0 0 0 2px var(--gld-soft)}
.cs-pgorg-grip{color:var(--t3);font-size:14px;flex:none;cursor:grab;letter-spacing:-2px}
.cs-pgorg-num{width:24px;height:24px;flex:none;border-radius:var(--r-full);background:var(--cta-gradient);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.cs-pgorg-t{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-pgorg-fixed .cs-pgorg-num{background:var(--s2);color:var(--t3)}
.cs-pgorg-end{border:1.5px dashed var(--gold);background:var(--gld-soft);border-radius:var(--r-md);padding:10px 12px;margin-top:8px}
.cs-pgorg-end-hd{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--gold);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.cs-avs-side{width:330px;flex:none;display:flex;flex-direction:column;gap:10px;max-height:640px;overflow-y:auto}
.cs-avs-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cs-avs-tool{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--bd);background:var(--s1);color:var(--t2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cs-avs-tool.on{border-color:var(--gold);color:var(--gold);background:var(--gld-soft)}
.cs-avs-brow{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--bd);border-radius:var(--r-md);background:var(--s1);cursor:pointer;margin-bottom:6px}
.cs-avs-brow.armed{border-color:var(--gold);background:var(--gld-soft)}
.cs-avs-brow .bi{width:28px;height:28px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;background:var(--s2)}
.cs-avs-brow .bn{font-size:12.5px;font-weight:600}.cs-avs-brow .bm{font-size:11px;color:var(--t3)}
.cs-avs-brow .bs{margin-left:auto;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:2px 8px;border-radius:var(--r-full)}
.cs-avs-brow .bs.placed{background:rgba(5,150,105,.15);color:var(--green)}.cs-avs-brow .bs.no{background:var(--s2);color:var(--t3)}
.cs-avs-step{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--bd);border-radius:var(--r-md);background:var(--s2);font-size:12px;margin-bottom:8px}
.cs-avs-step .stp{display:flex;align-items:center;gap:10px}
.cs-avs-step .stp button{width:24px;height:24px;border-radius:var(--r-sm);border:1px solid var(--bd);background:var(--s1);color:var(--text);cursor:pointer;font-weight:700}
.cs-avs-stack{border:1px solid var(--bd);border-radius:var(--r-md);background:var(--s1);padding:12px;margin-top:10px}
.cs-avs-sgrid{display:grid;gap:5px;margin-top:8px}
.cs-avs-scol-h{font-size:10.5px;color:var(--t3);text-align:center;line-height:1.35;padding-bottom:2px}
.cs-avs-scol-h .va{color:var(--green);font-weight:700}
.cs-avs-frow-h{font-size:10.5px;color:var(--t3);display:flex;align-items:center;justify-content:center}
.cs-avs-scell{border-radius:var(--r-sm);padding:5px 4px;text-align:center;cursor:pointer;border:1.4px solid transparent;font-size:10.5px;line-height:1.3}
.cs-avs-scell .sc{font-weight:700;display:block}.cs-avs-scell .sp{font-size:9.5px;opacity:.8}
.cs-avs-scell.picked{border-color:#fff;box-shadow:0 0 0 1.6px var(--gold)}
.cs-avs-udetail{border:1px solid var(--bd);border-radius:var(--r-md);background:var(--s1);padding:12px;margin-top:10px}
.cs-avs-udetail .drow{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px dashed var(--bd)}
.cs-avs-udetail .drow .k{color:var(--t3)}.cs-avs-udetail .drow .v{font-weight:600}
/* T077 — red-accented picked-unit card (non-available) echoing the offer locator */
.cs-avs-udetail--red{border:1px solid #FF3B4E;border-left:3px solid #FF3B4E;padding:0;overflow:hidden;background:rgba(255,59,78,.04)}
.cs-avs-udetail--red .ud-redhead{background:#FF3B4E;color:#fff;display:flex;align-items:center;gap:8px;padding:9px 12px;font-weight:800;font-size:14px}
.cs-avs-udetail--red .ud-redhead .st{margin-left:auto;font-size:10px;font-weight:700;text-transform:capitalize;background:rgba(255,255,255,.22);padding:2px 9px;border-radius:var(--r-full)}
.cs-avs-udetail--red .ud-body{padding:10px 12px}
/* T077 — red-accented offer card (the pick lane reads red, matching the plan locator) */
.cs-avs-offercard.oc-red{border-color:#FF3B4E;border-left:3px solid #FF3B4E}
.cs-avs-offercard.oc-red .oc-kick{color:#FF3B4E}
.cs-avs-offercard{width:340px;flex:none;border:1px solid var(--bd);border-radius:var(--r-lg);background:var(--s1);display:flex;flex-direction:column;max-height:680px}
.cs-avs-offercard .oc-body{flex:1;overflow-y:auto;padding:14px}
.cs-avs-offercard .oc-kick{font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--gold)}
.cs-avs-offercard .oc-code{font-size:21px;font-weight:800;margin:2px 0}
.cs-avs-offercard .oc-price{font-size:19px;font-weight:800;color:var(--gold)}
.cs-avs-offercard .ocr{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px dashed var(--bd)}
.cs-avs-offercard .ocr span{color:var(--t3)}
.cs-avs-offercard .oc-sec{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--t3);margin:12px 0 4px}
.cs-avs-offercard .oc-foot{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--bd)}
.cs-avs-cmp-head{display:flex;align-items:center;gap:7px;padding:8px;border-bottom:1px solid var(--bd)}
.cs-avs-cmp-num{width:18px;height:18px;border-radius:50%;color:#fff;font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.cs-avs-cmp-row{display:grid;grid-template-columns:86px 1fr;font-size:11.5px;border-bottom:1px dashed var(--bd)}
.cs-avs-cmp-row .lab{color:var(--t3);padding:5px 0}
.cs-avs-cmp-vals{display:grid;gap:6px}
.cs-avs-hint{font-size:11.5px;color:var(--t3);padding:7px 10px;border:1px dashed var(--bd);border-radius:var(--r-md)}
.cs-avs-hint.arm{border-color:var(--gold);color:var(--gold)}
/* T076-B1 — persistent compare basket tray + cross-plan numbered marks */
.cs-avs-tray{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:8px 10px;border:1px solid var(--gold);border-radius:var(--r-md);background:var(--gld-soft)}
.cs-avs-tray-lbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--gold)}
.cs-avs-tray-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--text);background:var(--bg);border:1px solid var(--bd);border-left:3px solid var(--bc,#3882F6);border-radius:var(--r-full);padding:3px 6px 3px 9px}
.cs-avs-tray-chip .n{display:inline-flex;width:15px;height:15px;border-radius:50%;background:var(--bc,#3882F6);color:#fff;font-size:9.5px;font-weight:800;align-items:center;justify-content:center}
.cs-avs-tray-chip button{background:none;border:none;cursor:pointer;color:var(--t3);display:inline-flex;padding:2px;border-radius:4px}
.cs-avs-tray-chip button:hover{color:var(--red);background:var(--s2)}
.cs-avs-cmp-mark{position:absolute;transform:translate(-50%,-50%);pointer-events:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;background:var(--bc,#3882F6);border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.5);z-index:3}
@media (max-width:860px){.cs-avs-wrap{flex-direction:column}.cs-avs-side,.cs-avs-offercard{width:100%;max-height:none}}

/* Board card ⋯ quick-actions menu (T036.3) */
.cs-board-card{position:relative}
.cs-board-card-kebab{
  position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:var(--r-sm);
  background:var(--s1);border:1px solid var(--bd);color:var(--t2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;padding:0;
  opacity:0;transition:opacity 120ms var(--ease);
}
.cs-board-card:hover .cs-board-card-kebab{opacity:1}
.cs-board-card-kebab:hover{border-color:var(--gold);color:var(--gold)}
@media (max-width:640px){.cs-board-card-kebab{opacity:1}}
.cs-cardmenu{
  position:fixed;z-index:2100;min-width:190px;background:var(--bg);border:1px solid var(--bd);
  border-radius:var(--r-md);box-shadow:var(--shadow-xl);padding:5px;max-height:74vh;overflow-y:auto;
}
.cs-cardmenu-sec{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);padding:7px 9px 3px}
.cs-cardmenu button{display:block;width:100%;text-align:left;font-size:12.5px;padding:7px 9px;border:none;background:transparent;color:var(--text);cursor:pointer;border-radius:var(--r-sm)}
.cs-cardmenu button:hover{background:var(--s1)}
.cs-cardmenu button.cs-cardmenu-danger{color:var(--red)}
.cs-cardmenu-sep{height:1px;background:var(--bd);margin:5px 4px}

/* ═══ INVENTORY MODULE (T037) ═════════════════════════════ */
.inv-wrap{padding:16px 20px;display:flex;flex-direction:column;gap:14px}
.inv-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.inv-hd .pt{font-size:var(--fs-xl);font-weight:700;color:var(--text);display:flex;align-items:center;flex-wrap:wrap}
.inv-hd .ps{font-size:var(--fs-sm);color:var(--t3);margin-top:2px}
.inv-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 9px;border-radius:var(--r-full);margin-left:8px}
.inv-type-badge--com{background:rgba(56,130,246,.12);color:var(--gold)}
.inv-type-badge--res{background:rgba(147,51,234,.12);color:#9333EA}
.inv-proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.inv-proj-card{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-lg);padding:14px 16px;cursor:pointer;transition:border-color 120ms var(--ease),transform 120ms var(--ease)}
.inv-proj-card:hover{border-color:var(--gold);transform:translateY(-1px)}
.inv-proj-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.inv-proj-name{font-size:15px;font-weight:700;color:var(--text)}
.inv-proj-stats{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--t3)}
.inv-proj-stats strong{color:var(--text)}
.inv-type-pick{display:flex;align-items:center;gap:6px;padding:9px 13px;background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-md);cursor:pointer;font-size:13px;flex:1}
.inv-type-pick input{accent-color:var(--gold)}
.inv-summary{display:flex;flex-wrap:wrap;gap:16px;padding:11px 16px;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-md);font-size:12.5px;color:var(--t3)}
.inv-summary strong{color:var(--text)}
.inv-summary-total strong{color:var(--gold)}
.inv-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* T079 — shared list pager */
.cs-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0;font-size:12px;flex-wrap:wrap}
.cs-pager-lbl{color:var(--t2);font-weight:600;font-variant-numeric:tabular-nums}
.inv-table-wrap{overflow-x:auto;border:1px solid var(--bd);border-radius:var(--r-md)}
.inv-table{width:100%;border-collapse:collapse;font-size:12.5px}
.inv-table th{text-align:left;padding:9px 12px;background:var(--s2);color:var(--t3);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;border-bottom:1px solid var(--bd);white-space:nowrap}
.inv-table td{padding:9px 12px;border-bottom:1px solid var(--bd);color:var(--text);white-space:nowrap}
.inv-table tbody tr:hover{background:var(--s1)}
.inv-status-sel{font-size:12px;padding:4px 8px;border:1px solid var(--bd);border-radius:var(--r-sm);background:var(--bg);color:var(--text)}
.inv-status-pill{font-size:11px;font-weight:700;text-transform:capitalize}
/* T041 — pick-mode rows (Browse-inventory modal) */
.inv-table tr.inv-row--off{opacity:.5}
.inv-table tr[onclick]:hover{background:var(--gld-soft)}

/* T041 — smart unit picker (type-ahead) */
.cs-unitpicker{position:relative}
.cs-up-row{display:flex;gap:8px;align-items:center}
.cs-up-row .form-input{flex:1}
.cs-up-results{position:absolute;left:0;right:0;z-index:60;margin-top:4px;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-md);box-shadow:var(--shadow-xl);max-height:260px;overflow-y:auto}
.cs-up-results:empty{display:none}
.cs-up-item{display:flex;flex-direction:column;gap:1px;padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--bd)}
.cs-up-item:last-child{border-bottom:none}
.cs-up-item:hover,.cs-up-item.on{background:var(--gld-soft)}
.cs-up-code{font-size:13px;font-weight:700;color:var(--text)}
.cs-up-meta{font-size:11px;color:var(--t3)}
.cs-up-empty{padding:10px 12px;font-size:12px;color:var(--t3)}

/* T043 — smart deal-link picker (same family as .cs-up-*) */
.cs-dlp{position:relative}
.cs-dlp-results{position:absolute;left:0;right:0;z-index:60;margin-top:4px;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-md);box-shadow:var(--shadow-xl);max-height:260px;overflow-y:auto}
.cs-dlp-results:empty{display:none}
.cs-dlp-item{display:flex;flex-direction:column;gap:1px;padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--bd)}
.cs-dlp-item:last-child{border-bottom:none}
.cs-dlp-item:hover,.cs-dlp-item.on{background:var(--gld-soft)}
.cs-dlp-id{font-size:13px;font-weight:700;color:var(--text)}
.cs-dlp-meta{font-size:11px;color:var(--t3)}
.cs-dlp-empty{padding:10px 12px;font-size:12px;color:var(--t3)}
.cs-dlp-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;background:var(--gld-soft);border:1px solid var(--gld-bd,var(--bd));border-radius:var(--r-md);font-size:13px;color:var(--text)}
.cs-dlp-unlink{display:inline-flex;align-items:center;justify-content:center;margin-left:2px;width:18px;height:18px;padding:0;border:none;background:transparent;color:var(--t3);cursor:pointer;border-radius:var(--r-sm)}
.cs-dlp-unlink:hover{color:var(--red);background:var(--bg)}
.cs-dlp-hint{font-size:11px;color:var(--t3);margin-top:5px}

/* ═══ ADMIN TABS ══════════════════════════════════════════ */
.a-tabs{
  display:flex;gap:2px;padding:10px 20px;
  border-bottom:1px solid var(--bd);background:var(--s-glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  position:sticky;top:54px;z-index:90;overflow-x:auto;
}
.a-tab{
  padding:7px 14px;border-radius:var(--r-sm);font-size:12px;font-weight:500;
  background:transparent;color:var(--t2);cursor:pointer;white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.a-tab:hover{background:var(--s2);color:var(--text)}
.a-tab.on{background:var(--gb);color:var(--gold);border-color:var(--gbd)}

/* ═══ T027 — Shared settings shell (vertical sub-nav + panel) ═══
   Same mset-* language as master.html so master + tenant Settings look
   identical. The tenant panels keep their own internal markup; the shell
   only owns the grouped left sub-nav and the content column. */
.mset-layout{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start;padding:20px 24px;max-width:1280px;margin:0 auto;width:100%}
.mset-subnav{display:flex;flex-direction:column;gap:4px;position:sticky;top:66px}
.mset-navitem{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  text-align:left;padding:11px 14px;border-radius:10px;border:1px solid transparent;
  background:transparent;color:var(--t2);font-family:var(--font);font-size:13px;font-weight:500;
  cursor:pointer;transition:all .15s var(--ease);width:100%;
}
.mset-navitem:hover{background:var(--s1);color:var(--text)}
.mset-navitem.on{background:var(--gld-soft);border-color:var(--gld-bd);color:var(--text);font-weight:600}
.mset-navitem--soon{color:var(--t3)}
.mset-navitem-soon{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--t3);border:1px solid var(--bd);border-radius:6px;padding:2px 6px;font-weight:600}
.mset-group-label{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;font-weight:700;padding:14px 12px 6px;display:block}
.mset-group-label:first-child{padding-top:2px}
.mset-panel-content{min-width:0}
@media (max-width:640px){
  .mset-layout{grid-template-columns:1fr;gap:12px;padding:14px}
  .mset-subnav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
  .mset-navitem{width:auto}
  .mset-group-label{width:100%;padding:8px 4px 2px}
}

/* ═══ SUB-TABS — operational vs validated work-state filters ═══ */
.sub-tabs{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:10px 14px;border:1px solid var(--bd);
  border-radius:var(--r-md);background:var(--s1);
  margin-bottom:14px;
}
.sub-tab{
  padding:6px 12px;border-radius:var(--r-sm);font-size:12px;font-weight:500;
  background:transparent;color:var(--t2);cursor:pointer;white-space:nowrap;
  border:1px solid transparent;
  display:inline-flex;align-items:center;gap:7px;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.sub-tab:hover{background:var(--bg);color:var(--text)}
.sub-tab.on{background:var(--gb);color:var(--gold);border-color:var(--gbd)}
.sub-tab .st-cnt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  font-size:10px;font-weight:600;font-family:var(--mono);
  background:var(--s2);color:var(--t3);
}
.sub-tab.on .st-cnt{background:var(--gold);color:#FFFFFF}
.sub-tab-note{
  font-size:11px;color:var(--t3);line-height:1.5;
  padding:8px 12px;background:var(--gb);border:1px dashed var(--gbd);
  border-radius:var(--r-sm);margin-bottom:12px;
}
.sub-tab-note strong{color:var(--gold);font-weight:600}

/* ═══ PAGE ════════════════════════════════════════════════ */
.pg{padding:18px 20px;max-width:1100px;margin:0 auto}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.pt{font-size:20px;font-weight:600;letter-spacing:-.3px;color:var(--text);line-height:1.2}
.ps{font-size:12.5px;color:var(--t3);margin-top:4px;line-height:1.5}

/* ═══ CARD ════════════════════════════════════════════════ */
.card{
  background:var(--bg);border:1px solid var(--bd);
  border-radius:var(--r-md);overflow:hidden;margin-bottom:16px;
  box-shadow:var(--sh-1);
}
.ch{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--bd);
  background:var(--s1);
}
.ch-t{font-size:13px;font-weight:600;letter-spacing:-.1px;color:var(--text)}

/* ═══ BUTTONS ════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 15px;border-radius:8px;font-size:13px;
  font-weight:500;cursor:pointer;transition:all var(--mo-fast) var(--mo-ease);
}
.bp{background:var(--cta-gradient);color:#FFFFFF;border:none}.bp:hover{background:var(--cta-gradient-hover);box-shadow:0 4px 14px rgba(56,130,246,.32)}
.bg{background:transparent;color:var(--t2);border:1px solid var(--bd)}.bg:hover{background:var(--s2);color:var(--text);border-color:var(--bd2)}
.bd2{background:transparent;color:var(--red);border:1px solid var(--bd)}.bd2:hover{background:rgba(217,85,85,.1)}
.sm{padding:5px 11px;font-size:12px}
.xs{padding:3px 8px;font-size:11px}

/* ═══ TABLE ═══════════════════════════════════════════════ */
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{position:sticky;top:0;z-index:1}
th{
  padding:10px 13px;text-align:left;font-size:10.5px;
  letter-spacing:.6px;text-transform:uppercase;color:var(--t3);
  font-weight:600;border-bottom:1px solid var(--bd);
  background:var(--s1);white-space:nowrap;
}
td{
  padding:11px 13px;border-bottom:1px solid var(--bd);
  color:var(--t2);vertical-align:middle;
}
tr:last-child td{border-bottom:none}
tbody tr{cursor:pointer;transition:background var(--dur-fast) var(--ease)}
tbody tr:hover td{background:var(--s2);color:var(--text)}
.mono{font-family:var(--mono);font-size:11px}
.deal-id{font-family:var(--mono);font-size:11px;color:var(--gold);font-weight:500}

/* ═══ INLINE FORM ════════════════════════════════════════ */
.iform{
  background:var(--bg);border:1px solid var(--gbd);
  border-radius:var(--r-md);margin-bottom:18px;overflow:hidden;
  box-shadow:var(--sh-2);
}
.if-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--gbd);background:var(--gb);
}
.if-t{font-size:14px;font-weight:600;color:var(--gold);letter-spacing:-.1px}
.if-bd{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.if-bd .fw{grid-column:1/-1}
.fg label{
  display:block;font-size:11px;color:var(--t2);font-weight:500;
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;
}
.fg input,.fg select,.fg textarea{
  width:100%;background:var(--s1);border:1px solid var(--bd);
  color:var(--text);padding:10px 12px;border-radius:var(--r-sm);
  font-size:13px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
.fg input:hover,.fg select:hover,.fg textarea:hover{border-color:var(--bd2);background:var(--bg)}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold);background:var(--bg);box-shadow:var(--sh-focus);outline:none}
.fg input[readonly]{background:var(--s2);color:var(--t2);cursor:not-allowed}
.fg input[readonly]:hover{border-color:var(--bd);background:var(--s2)}
.fg select option{background:var(--bg)}
.fg textarea{resize:vertical;min-height:72px;line-height:1.5}
.br-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.br-res{
  padding:8px 11px;background:var(--gb);border:1px solid var(--gbd);
  border-radius:7px;font-size:12px;color:var(--gold);
  display:flex;align-items:center;min-height:38px;
}
.if-ft{
  padding:12px 18px;border-top:1px solid var(--bd);
  display:flex;justify-content:flex-end;gap:8px;background:var(--s2);
}

/* ═══ TOGGLE ══════════════════════════════════════════════ */
.tgl{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.tgl input{opacity:0;width:0;height:0;position:absolute}
.tk{width:34px;height:19px;background:var(--bd2);border-radius:10px;transition:background .2s;display:flex;align-items:center;padding:2px}
.tt{width:15px;height:15px;background:var(--bg);border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.tgl input:checked~.tk{background:var(--green)}
.tgl input:checked~.tk .tt{transform:translateX(15px)}

/* ═══ KPI ROW ════════════════════════════════════════════ */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.kpi{
  background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-md);
  padding:14px 16px;box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease-spring),border-color var(--dur) var(--ease);
}
.kpi:hover{box-shadow:var(--sh-2);transform:translateY(-1px);border-color:var(--bd2)}
.kpi-l{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px;font-weight:600}
.kpi-v{font-size:26px;font-weight:600;letter-spacing:-.4px;font-variant-numeric:tabular-nums;line-height:1.1}
.gv{color:var(--gold)}.grv{color:var(--green)}.rv{color:var(--red)}

/* ═══ DROPDOWN LISTS ═════════════════════════════════════ */
.dl-list{padding:12px 16px;display:flex;flex-direction:column;gap:7px}
.dl-i{display:flex;align-items:center;gap:8px;padding:7px 11px;background:var(--s2);border-radius:7px;border:1px solid var(--bd);font-size:13px}
.dl-i span{flex:1;color:var(--t2)}
.dl-add{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--bd)}
.dl-add input{
  flex:1;background:var(--s2);border:1px solid var(--bd);color:var(--text);
  padding:7px 11px;border-radius:7px;font-size:13px;
}
.dl-add input:focus{border-color:var(--gold)}

/* ═══ APP CONFIG GRID ════════════════════════════════════ */
.app-cfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;padding:16px}
.app-cfg{
  background:var(--s2);border:1px solid var(--bd);
  border-radius:10px;padding:16px;
  display:flex;align-items:center;gap:13px;
}
.app-cfg-ico{font-size:24px;flex-shrink:0;transition:color .2s}
.app-cfg-name{font-size:14px;font-weight:500;margin-bottom:3px}
.app-cfg-desc{font-size:12px;color:var(--t3)}

/* ═══ FILTERS ROW ════════════════════════════════════════ */
.frow{
  display:flex;align-items:center;gap:9px;
  padding:10px 16px;border-bottom:1px solid var(--bd);
  background:var(--s2);flex-wrap:wrap;
}
.frow select,.frow input{
  background:var(--s1);border:1px solid var(--bd);
  color:var(--t2);padding:6px 10px;border-radius:7px;
  font-size:12px;font-family:var(--font);
}
.frow select:focus,.frow input:focus{border-color:var(--gold);color:var(--text)}
.frow select option{background:var(--s2)}
.frow input::placeholder{color:var(--t3)}
.fc{font-size:11px;color:var(--t3);margin-left:auto;font-family:var(--mono)}

/* ═══ WEEKLY TABLE ═══════════════════════════════════════ */
.wtab{overflow-x:auto}
.wtab table th{text-align:right;white-space:nowrap}
.wtab table th:first-child{text-align:left}
.wtab table td{text-align:right}
.wtab table td:first-child{text-align:left;font-size:12px}
.wtab tr.cur td{background:var(--gb)!important}
.wtab tr.cur td:first-child{color:var(--gold)}
.wtab tfoot td{border-top:1px solid var(--bd2);font-weight:600;color:var(--text);border-bottom:none}
.pos{color:var(--green)}.neg{color:var(--red)}

/* ═══ EXEC DASHBOARD ════════════════════════════════════ */
.prog-wrap{background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:16px;margin-bottom:16px}
.prog-hd{display:flex;justify-content:space-between;font-size:12px;color:var(--t2);margin-bottom:8px}
.prog-track{height:7px;background:var(--s2);border-radius:4px;overflow:hidden}
.prog-fill{height:100%;background:var(--gold);border-radius:4px;transition:width .5s}
.ann-hero{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
.ann-s{background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:14px;text-align:center}
.ann-v{font-size:22px;font-weight:500;margin-bottom:4px}
.ann-l{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.erow{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--bd)}
.erow:last-child{border-bottom:none}
.elbl{font-size:12px;color:var(--t2)}
.eval{font-size:12px;font-family:var(--mono);font-weight:500}

/* ═══ STAGE / STATUS BADGE ═══════════════════════════════ */
.stg{
  display:inline-block;padding:2px 8px;border-radius:4px;
  font-size:10px;text-transform:uppercase;letter-spacing:.4px;
  background:var(--s2);color:var(--t3);border:1px solid var(--bd);
}

/* ═══ TOAST ══════════════════════════════════════════════
   Per UI/UX Master Brief 4.3 — standardised toast types:
   • s = success — green left rail
   • e = error   — red left rail
   • i = info    — teal left rail
   • w = warning — amber left rail
   Position bottom-right, 3 s auto-dismiss, single instance. */
#toast{
  position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));right:calc(24px + env(safe-area-inset-right));
  background:var(--bg);border:1px solid var(--bd);
  padding:12px 20px 12px 18px;border-radius:var(--r-md);
  font-size:13px;line-height:1.5;color:var(--text);
  box-shadow:var(--shadow-lg);z-index:9999;
  max-width:320px;transition:opacity .25s var(--ease);
}
#toast:not(.hidden){animation:csToastIn var(--mo-med,220ms) var(--mo-ease,ease)}
@media (prefers-reduced-motion:reduce){#toast:not(.hidden){animation:none}}
#toast.s{border-left:4px solid var(--green)}
#toast.e{border-left:4px solid var(--red)}
#toast.i{border-left:4px solid var(--gold)}
#toast.w{border-left:4px solid var(--amber)}

/* ═══ EMPTY STATE ════════════════════════════════════════ */
.empty{text-align:center;padding:48px 20px;color:var(--t3);font-size:13px;line-height:1.55}
.empty-ico{font-size:38px;margin-bottom:14px;opacity:.45}
.empty p{margin:0}
.empty p:first-of-type{color:var(--t2);font-weight:500;font-size:14px;margin-bottom:6px;letter-spacing:-.1px}

/* ═══ MISC ═══════════════════════════════════════════════ */
.demo-note{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:6px;font-size:11px;
  background:rgba(224,144,48,.12);color:var(--amber);
  border:1px solid rgba(224,144,48,.3);
}

/* ═══ IMPORT MODAL ═══════════════════════════════════════ */
#import-overlay{
  position:fixed;inset:0;background:rgba(7,9,15,.88);
  backdrop-filter:blur(4px);z-index:999;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.import-modal{
  background:var(--s1);border:1px solid var(--bd);border-radius:16px;
  width:100%;max-width:820px;max-height:90vh;overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.import-hd{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:18px 24px;border-bottom:1px solid var(--bd);
  background:var(--s2);position:sticky;top:0;z-index:2;
}
.import-title{font-size:18px;font-weight:500}
.import-sub{font-size:12px;color:var(--t3);margin-top:3px}
.import-body{padding:24px}
.import-steps{display:flex;gap:6px;margin-bottom:22px}
.imp-step{
  flex:1;padding:9px 12px;background:var(--s2);
  border:1px solid var(--bd);border-radius:8px;
  font-size:12px;color:var(--t3);text-align:center;
}
.imp-step.active{border-color:var(--gbd);background:var(--gb);color:var(--gold)}
.imp-step.done{border-color:rgba(61,173,122,.3);background:rgba(61,173,122,.08);color:var(--green)}
.drop-zone{
  border:2px dashed var(--bd2);border-radius:12px;
  padding:44px 20px;text-align:center;cursor:pointer;
  transition:all .2s;background:var(--s2);
}
.drop-zone:hover,.drop-zone.over{border-color:var(--gold);background:var(--gb)}
.drop-icon{font-size:38px;margin-bottom:12px;opacity:.45}
.drop-text{font-size:15px;color:var(--t2);margin-bottom:6px}
.drop-sub{font-size:12px;color:var(--t3);margin-bottom:14px}
.tmpl-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--gold);background:var(--gb);
  border:1px solid var(--gbd);border-radius:7px;
  padding:6px 13px;cursor:pointer;transition:all .15s;
}
.tmpl-btn:hover{background:rgba(56,130,246,.2)}
.map-section{margin-top:6px}
.map-section h3{font-size:13px;color:var(--t2);margin-bottom:10px}
.map-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;background:var(--s2);
  border:1px solid var(--bd);border-radius:8px;margin-bottom:6px;
}
.map-field{font-size:13px;color:var(--text);font-weight:500;min-width:140px}
.map-req{font-size:11px;color:var(--red);margin-left:2px}
.map-arrow{color:var(--t3);font-size:14px}
.map-select{
  flex:1;background:var(--s1);border:1px solid var(--bd);
  color:var(--text);padding:7px 10px;border-radius:7px;
  font-size:12px;font-family:var(--font);
}
.map-select:focus{border-color:var(--gold)}
.map-select option{background:var(--s2)}
.preview-hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.preview-hd h3{font-size:13px;color:var(--t2)}
.preview-outer{overflow-x:auto;border:1px solid var(--bd);border-radius:8px}
.preview-table{width:100%;border-collapse:collapse;font-size:12px}
.preview-table th{
  padding:7px 11px;text-align:left;font-size:10px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--t3);font-weight:500;
  border-bottom:1px solid var(--bd);background:var(--s2);white-space:nowrap;
}
.preview-table td{padding:7px 11px;border-bottom:1px solid var(--bd);color:var(--t2);white-space:nowrap}
.preview-table tr:last-child td{border-bottom:none}
.row-ok td{color:var(--t2)}
.row-warn td{background:rgba(224,144,48,.06)!important;color:var(--amber)!important}
.import-summary{
  padding:12px 16px;background:var(--gb);border:1px solid var(--gbd);
  border-radius:8px;font-size:13px;color:var(--t2);margin-top:16px;
  line-height:1.7;
}
.import-ft{
  padding:16px 24px;border-top:1px solid var(--bd);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--s2);position:sticky;bottom:0;
}
.ok-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;background:rgba(61,173,122,.15);color:var(--green);border:1px solid rgba(61,173,122,.3)}
.err-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;background:rgba(217,85,85,.15);color:var(--red);border:1px solid rgba(217,85,85,.3)}
.skip-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;background:var(--s2);color:var(--t3);border:1px solid var(--bd)}

/* ═══ ORG CHART ══════════════════════════════════════════ */
.org-wrap{padding:24px 20px;overflow-x:auto;min-height:300px}
.org-tree{display:flex;flex-direction:column;align-items:center;min-width:max-content;margin:0 auto}
.org-node{display:flex;flex-direction:column;align-items:center;position:relative;padding:0 10px}
.org-card{
  background:var(--s1);border:1px solid var(--bd);border-radius:11px;
  padding:13px 16px;text-align:center;min-width:140px;max-width:180px;
  cursor:pointer;transition:border-color .2s,transform .15s;position:relative;z-index:1;
}
.org-card:hover{border-color:var(--bd2);transform:translateY(-2px)}
.org-card.root-card{border-color:var(--gbd);background:var(--gb)}
.org-card.root-card .oc-name{color:var(--gold)}
.oc-avatar{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;margin:0 auto 8px;
  border:1px solid;
}
.oc-name{font-size:13px;font-weight:600;margin-bottom:2px}
.oc-title{font-size:11px;color:var(--t3);margin-bottom:6px;line-height:1.4}
.oc-reports{font-size:10px;color:var(--t3);font-family:var(--mono)}
/* Connector lines */
.org-connector-down{width:1px;height:24px;background:var(--bd2);margin:0 auto}
.org-children-wrap{display:flex;position:relative;padding-top:0}
.org-children-wrap::before{
  content:'';position:absolute;top:0;
  left:calc(50px + 10px);right:calc(50px + 10px);
  height:1px;background:var(--bd2);
}
.org-children-wrap.single::before{display:none}
.org-node .org-connector-up{width:1px;height:24px;background:var(--bd2);margin:0 auto}
/* Edit manager panel */
.oc-edit-wrap{
  background:var(--s2);border:1px solid var(--gbd);border-radius:11px;
  padding:16px;margin:0 20px 20px;
}
.oc-edit-title{font-size:13px;font-weight:500;color:var(--gold);margin-bottom:12px}
.oc-edit-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.oc-unassigned{
  margin-top:24px;padding:16px 20px;
  border-top:1px dashed var(--bd2);
}
.oc-unassigned-label{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3);margin-bottom:12px}
.oc-unassigned-chips{display:flex;flex-wrap:wrap;gap:8px}
.oc-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:8px;font-size:12px;
  background:var(--s1);border:1px solid var(--bd);color:var(--t2);cursor:pointer;
  transition:border-color .15s;
}
.oc-chip:hover{border-color:var(--bd2)}

/* ═══ ANALYTICS / CSCHART ENGINE ════════════════════ */
.ana-wrap{padding:0 0 40px}
.ana-filter{
  display:flex;align-items:center;gap:10px;padding:12px 20px;
  background:var(--bg);border-bottom:1px solid var(--bd);box-shadow:0 1px 4px rgba(0,0,0,.06);
  flex-wrap:wrap;
}
.ana-filter-label{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.8px}
.ana-period-btn{
  padding:5px 13px;border-radius:20px;font-size:12px;font-weight:500;
  cursor:pointer;border:1px solid var(--bd);background:transparent;color:var(--t2);
  transition:all .15s;
}
.ana-period-btn:hover{border-color:var(--bd2);color:var(--text)}
.ana-period-btn.on{background:var(--gb);border-color:var(--gbd);color:var(--gold)}
.ana-period-select{
  background:var(--s2);border:1px solid var(--bd);color:var(--text);
  padding:5px 10px;border-radius:7px;font-size:12px;font-family:var(--font);
}
.ana-period-select:focus{border-color:var(--gold)}
.ana-body{padding:20px;max-width:1200px;margin:0 auto}
.ana-section{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--t3);margin:22px 0 12px;padding-left:2px}
.ana-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.ana-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.ana-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.ana-card{
  background:var(--s1);border:1px solid var(--bd);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;
}
.ana-card-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--bd);background:var(--s2);
}
.ana-card-title{font-size:12px;font-weight:500;color:var(--t2)}
.ana-card-sub{font-size:11px;color:var(--t3);font-family:var(--mono)}
.ana-card-body{padding:16px;flex:1}
.ana-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.ana-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t2)}
.ana-legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ana-metric{
  background:var(--s1);border:1px solid var(--bd);border-radius:10px;
  padding:16px;display:flex;flex-direction:column;gap:4px;
}
.ana-metric-val{font-size:26px;font-weight:600;line-height:1}
.ana-metric-label{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.ana-metric-sub{font-size:11px;color:var(--t3);font-family:var(--mono);margin-top:2px}
.ana-no-data{text-align:center;padding:40px;color:var(--t3);font-size:13px}
/* Period badge */
.period-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;font-size:11px;
  background:var(--gb);color:var(--gold);border:1px solid var(--gbd);
}
#pin-overlay{
  position:fixed;inset:0;background:rgba(7,9,15,.85);
  backdrop-filter:blur(4px);z-index:998;
  display:flex;align-items:center;justify-content:center;
}
.pin-modal{
  background:var(--s1);border:1px solid var(--bd);
  border-radius:14px;width:100%;max-width:360px;
  padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.pin-modal-title{font-size:17px;font-weight:500;margin-bottom:4px}
.pin-modal-sub{font-size:12px;color:var(--t3);margin-bottom:22px}
.n-user-btn{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:4px 8px;border-radius:8px;transition:background .15s;
}
.n-user-btn:hover{background:var(--s2)}
/* ═══ VALIDATION CHAIN ═══════════════════════════════ */
.vchain{display:inline-flex;align-items:center;gap:3px}
.vdot{width:8px;height:8px;border-radius:50%}
.vb-full{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:500;background:rgba(61,173,122,.15);color:#3DAD7A;border:1px solid rgba(61,173,122,.3)}
.vb-dir{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:500;background:rgba(224,144,48,.12);color:#E09030;border:1px solid rgba(224,144,48,.3)}
.vb-tl{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:500;background:rgba(74,144,217,.12);color:#4A90D9;border:1px solid rgba(74,144,217,.3)}
.vb-sub{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:500;background:rgba(74,144,217,.06);color:var(--t2);border:1px solid var(--bd)}
.vb-draft{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:500;background:var(--s2);color:var(--t3);border:1px solid var(--bd)}

/* ═══ SHELL AI ════════════════════════════════════════════ */
/* Hide Shell Assistant elements until the user has signed in.
   `body.signed-in` is toggled by doLogin/doLogout. */
.sai-fab,.sai-panel,.sai-backdrop{display:none}
body.signed-in .sai-fab{display:flex}
body.signed-in .sai-panel,body.signed-in .sai-backdrop{display:block}
body.signed-in .sai-panel{display:flex}

.sai-fab{
  position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));right:calc(24px + env(safe-area-inset-right));z-index:200;
  width:64px;height:64px;
  background:transparent;border:none;padding:0;
  align-items:center;justify-content:center;
  cursor:pointer;overflow:visible;
  filter:drop-shadow(0 6px 14px rgba(15,23,42,.18)) drop-shadow(0 2px 4px rgba(15,23,42,.10));
  transition:transform var(--dur) var(--ease-spring),filter var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.sai-fab:hover{transform:scale(1.08);filter:drop-shadow(0 10px 20px rgba(15,23,42,.22)) drop-shadow(0 3px 6px rgba(15,23,42,.12))}
.sai-fab:active{transform:scale(.96)}
.sai-fab .sai-logo-img{width:100%;height:100%;max-width:100%;max-height:100%}
.sai-logo-img{
  width:auto;height:auto;max-height:78%;max-width:82%;
  object-fit:contain;
  pointer-events:none;
}
/* Fallback shown when the Shell Assistant icon PNG fails to load (404,
   wrong path, CDN miss, etc). Without this, .sai-fab is transparent +
   border-none + empty → the button becomes invisible and users think
   the Shell Assistant has been removed. The fallback is a teal→navy
   gradient circle with an emoji, always clickable, always visible. */
.sai-fab-fallback{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;border-radius:50%;
  background:linear-gradient(135deg,#3882F6 0%,#1B2A4A 100%);
  color:#fff;font-size:30px;line-height:1;
  box-shadow:inset 0 -4px 12px rgba(0,0,0,.18);
}
.sai-fab.open{transform:scale(.6) rotate(-90deg);opacity:0;pointer-events:none}
@keyframes sai-breathe{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
.sai-fab .sai-logo-img{animation:sai-breathe 4s ease-in-out infinite}
.sai-fab:hover .sai-logo-img{animation:none}

.sai-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.16);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  z-index:198;opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.sai-backdrop.open{opacity:1;pointer-events:auto}

.sai-panel{
  position:fixed;right:0;top:0;bottom:0;width:420px;max-width:100vw;z-index:199;
  background:var(--bg);border-left:1px solid var(--bd);
  box-shadow:var(--sh-4);
  display:flex;flex-direction:column;
  transform:translateX(105%);
  transition:transform var(--dur-slow) var(--ease-out);
}
.sai-panel.open{transform:translateX(0)}

.sai-head{
  padding:14px 18px;border-bottom:1px solid var(--bd);
  background:var(--s-glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  display:flex;align-items:center;gap:12px;flex-shrink:0;
}
.sai-avatar{
  width:36px;height:36px;
  background:transparent;border:none;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sai-avatar .sai-logo-img{width:100%;height:100%;max-width:100%;max-height:100%}
.sai-head-info{flex:1;min-width:0}
.sai-head-title{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.1px}
.sai-head-sub{font-size:11px;color:var(--t3);margin-top:2px;display:flex;align-items:center;gap:6px}
.sai-status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.sai-close{
  width:30px;height:30px;border-radius:var(--r-sm);
  background:transparent;color:var(--t2);font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
  flex-shrink:0;
}
.sai-close:hover{background:var(--s2);color:var(--text)}

.sai-body{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}

.sai-empty{display:flex;flex-direction:column;gap:20px;animation:sai-in .35s var(--ease-out)}
.sai-greet{font-size:19px;font-weight:600;color:var(--text);letter-spacing:-.3px}
.sai-greet-sub{font-size:13px;color:var(--t2);line-height:1.55;margin-top:5px}
.sai-section-label{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3);font-weight:600;margin-bottom:8px}

.sai-insights{display:flex;flex-direction:column;gap:8px}
.sai-insight{
  padding:12px 14px;border:1px solid var(--bd);border-radius:var(--r-md);background:var(--s1);
  display:flex;gap:10px;align-items:flex-start;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.sai-insight:hover{border-color:var(--bd2);background:var(--bg);transform:translateY(-1px)}
.sai-insight-ico{font-size:14px;flex-shrink:0;margin-top:1px}
.sai-insight-body{flex:1;font-size:12.5px;color:var(--t2);line-height:1.5}
.sai-insight-body strong{color:var(--text);font-weight:600}

.sai-suggest{display:flex;flex-direction:column;gap:6px}
.sai-suggest-chip{
  text-align:left;padding:10px 13px;border:1px solid var(--bd);border-radius:var(--r-md);
  background:var(--bg);color:var(--t2);font-size:12.5px;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:8px;
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.sai-suggest-chip:hover{border-color:var(--gbd);background:var(--gb);color:var(--gold);transform:translateX(2px)}
.sai-suggest-chip::before{content:'›';font-size:14px;color:var(--t3);transition:color var(--dur-fast) var(--ease)}
.sai-suggest-chip:hover::before{color:var(--gold)}

.sai-msg{display:flex;gap:10px;animation:sai-in .25s var(--ease-out)}
.sai-msg.user{flex-direction:row-reverse}
.sai-bubble{
  padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.55;
  max-width:78%;word-wrap:break-word;white-space:pre-wrap;
}
.sai-msg.ai .sai-bubble{background:var(--s2);color:var(--text);border-top-left-radius:4px}
.sai-msg.user .sai-bubble{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 100%);
  color:#fff;border-top-right-radius:4px;
}
.sai-msg-ava{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;
  overflow:visible;
}
.sai-msg.ai .sai-msg-ava{background:transparent;border:none}
.sai-msg.ai .sai-msg-ava .sai-logo-img{width:100%;height:100%;max-width:100%;max-height:100%}
.sai-msg.user .sai-msg-ava{background:var(--s2);color:var(--t2);font-size:11px}

@keyframes sai-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.sai-typing{display:flex;gap:4px;padding:12px 14px;background:var(--s2);border-radius:14px;border-top-left-radius:4px;align-items:center}
.sai-typing span{
  width:6px;height:6px;border-radius:50%;background:var(--t3);
  animation:sai-typ 1.2s infinite ease-in-out;
}
.sai-typing span:nth-child(2){animation-delay:.15s}
.sai-typing span:nth-child(3){animation-delay:.3s}
@keyframes sai-typ{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.sai-foot{
  border-top:1px solid var(--bd);padding:14px 16px 14px;
  background:var(--bg);flex-shrink:0;
}
.sai-input-wrap{
  display:flex;align-items:flex-end;gap:8px;
  background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-md);
  padding:8px 8px 8px 12px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
.sai-input-wrap:focus-within{border-color:var(--gold);background:var(--bg);box-shadow:var(--sh-focus)}
.sai-input{
  flex:1;border:none;background:transparent;outline:none;
  resize:none;font-family:inherit;font-size:13px;color:var(--text);
  line-height:1.5;max-height:140px;padding:5px 0;
}
.sai-input::placeholder{color:var(--t3)}
.sai-send{
  width:32px;height:32px;border-radius:var(--r-sm);flex-shrink:0;
  background:var(--gold);color:#fff;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;
  transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
}
.sai-send:hover:not(:disabled){background:var(--gold2);transform:scale(1.06)}
.sai-send:disabled{background:var(--bd2);cursor:not-allowed;opacity:.6}
.sai-foot-hint{font-size:10px;color:var(--t3);margin-top:8px;text-align:center;letter-spacing:.2px}
.sai-foot-hint kbd{
  font-family:var(--mono);font-size:10px;
  background:var(--s2);border:1px solid var(--bd);border-radius:4px;
  padding:1px 5px;color:var(--t2);
}

@media (max-width:520px){
  .sai-panel{width:100vw;border-left:none}
  .sai-fab{bottom:18px;right:18px;width:52px;height:52px}
}

/* ════════════════════════════════════════════════════════════════════
   UI/UX SESSION 1 — BRAND RECONCILIATION + LAUNCH BLOCKER FIXES
   Phase 8 → unified teal/navy brand + ambient AI + mobile + SLA tick
   ════════════════════════════════════════════════════════════════════ */

/* ─── Ambient AI nav chip (Step 8a) ─── */
.cs-ai-nav-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;background:var(--gld-soft);
  border:1px solid var(--gld-mid);border-radius:20px;
  font-size:12px;font-weight:600;color:var(--gold);
  cursor:pointer;transition:all .15s var(--ease);margin-left:8px;
}
.cs-ai-nav-chip:hover{background:var(--gld-light);transform:scale(1.04)}

/* ─── FAB urgent state (Step 8b) ─── */
.sai-fab--urgent{animation:sai-breathe 2s ease-in-out infinite !important}
.sai-fab--urgent::after{
  content:'';position:absolute;top:-3px;right:-3px;
  width:12px;height:12px;background:var(--red);border-radius:50%;
  border:2px solid var(--bg);
  animation:cs-pulse 2s ease-in-out infinite;
}

/* ─── Inline ambient insight chips on home (Step 8c) ─── */
.cs-ambient-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
.cs-ambient-chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border-radius:20px;font-size:12.5px;font-weight:500;cursor:pointer;
  border:1px solid transparent;background:transparent;
  font-family:inherit;color:inherit;
  transition:all .15s var(--ease);
}
.cs-ambient-chip:hover{transform:translateY(-1px);filter:brightness(1.05)}
.cs-ambient-chip--urgent{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.2);color:var(--red)}
.cs-ambient-chip--warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.2);color:#D97706}
.cs-ambient-chip--good{background:var(--gld-soft);border-color:var(--gld-mid);color:var(--gold)}

/* ─── Empty state primary CTA inside cs-empty-card ─── */
.cs-empty-cta{
  background:var(--cta-gradient);color:#fff;border:none;
  padding:10px 18px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;cursor:pointer;
  box-shadow:0 4px 12px rgba(56,130,246,.24);
  transition:box-shadow .15s var(--ease),transform .15s var(--ease),background .15s var(--ease);
}
.cs-empty-cta:hover{background:var(--cta-gradient-hover);transform:translateY(-1px);box-shadow:0 6px 18px rgba(56,130,246,.32)}

/* ─── Notification panel empty (Step 7d) ─── */
.cs-notif-empty{padding:40px 20px;text-align:center}
.cs-notif-empty-icon{margin-bottom:8px;color:var(--green);display:inline-flex}
.cs-notif-empty-icon .cs-ico{width:26px;height:26px}
.cs-notif-empty-title{font-weight:600;color:var(--text);margin-bottom:4px;font-size:13.5px}
.cs-notif-empty-sub{font-size:12px;color:var(--t3)}

/* ─── Live SLA pill modifiers (Step 10) ─── */
.cs-sla--overdue{background:rgba(239,68,68,.12);color:#dc2626;border:1px solid rgba(239,68,68,.3)}
.cs-sla--urgent{background:rgba(245,158,11,.14);color:#b8761f;border:1px solid rgba(245,158,11,.32)}
.cs-sla--warning{background:rgba(245,158,11,.08);color:#b8761f;border:1px solid rgba(245,158,11,.22)}
.cs-sla--ok{background:rgba(34,197,94,.1);color:#15803d;border:1px solid rgba(34,197,94,.28)}

/* ─── V1 Brief A — Reservation opener + match badges + forecast badges ─── */
.cs-res-opener{padding:24px;max-width:480px;margin:0 auto}
.cs-res-opener-title{font-size:17px;font-weight:600;color:var(--text);margin-bottom:4px}
.cs-res-opener-sub{font-size:13px;color:var(--t2);margin-bottom:16px}
.cs-forecast-shortlist{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;max-height:340px;overflow-y:auto}
.cs-forecast-deal-row{display:flex;align-items:center;padding:12px 14px;background:var(--s1);border:1px solid var(--bd);border-radius:10px;cursor:pointer;transition:all .15s var(--ease)}
.cs-forecast-deal-row:hover{border-color:var(--gold);transform:translateX(2px)}
.cs-forecast-deal-info{flex:1;min-width:0}
.cs-forecast-deal-client{font-size:13.5px;font-weight:500;color:var(--text)}
.cs-forecast-deal-meta{font-size:12px;color:var(--t3);margin-top:2px}
.cs-forecast-deal-arrow{color:var(--t3);font-size:16px;margin-left:auto}
.cs-res-divider{text-align:center;color:var(--t3);font-size:12px;margin:12px 0;position:relative}
.cs-res-divider::before,.cs-res-divider::after{content:'';position:absolute;top:50%;width:42%;height:1px;background:var(--bd)}
.cs-res-divider::before{left:0}
.cs-res-divider::after{right:0}
.cs-res-divider span{position:relative;background:var(--bg);padding:0 10px}
.cs-res-fresh-btn{width:100%;padding:14px}

/* Match badges (rendered by renderMatchBadge in Ops detail panel) */
.cs-match-badge{padding:8px 14px;border-radius:8px;font-size:12.5px;font-weight:500;margin-bottom:12px}
.cs-match-confirmed{background:rgba(16,185,129,.1);color:var(--green);border:1px solid rgba(16,185,129,.2)}
.cs-match-possible{background:rgba(245,158,11,.1);color:#D97706;border:1px solid rgba(245,158,11,.2)}
.cs-match-none{background:var(--s1);color:var(--t2);border:1px solid var(--bd)}

/* Forecast status badge on deal cards */
.cs-forecast-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:rgba(56,130,246,.1);color:var(--gold);border:1px solid var(--gld-mid);border-radius:20px;font-size:11px;font-weight:500}
.cs-pending-forecast{background:rgba(245,158,11,.1);color:#D97706;border-color:rgba(245,158,11,.2)}

/* V1 Brief A-2 — Deal card actions + forecast queue cards + status pills */
.cs-deal-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px dashed var(--bd)}
.cs-deal-action{font-size:11.5px !important;padding:5px 10px !important}
.cs-forecast-queue{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.cs-forecast-queue-card{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:14px 16px;box-shadow:var(--sh-1,0 1px 2px rgba(15,23,42,.04))}
.cs-forecast-queue-header{margin-bottom:12px}
.cs-forecast-queue-client{font-size:14px;font-weight:600;color:var(--text);margin-bottom:3px}
.cs-forecast-queue-meta{font-size:12px;color:var(--t2);margin-bottom:3px}
.cs-forecast-queue-time{font-size:11px;color:var(--t3);font-family:var(--mono)}
.cs-forecast-queue-actions{display:flex;gap:8px;flex-wrap:wrap}
.status-pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;margin-left:6px}
.sp-teal{background:var(--gld-soft);color:var(--gold);border:1px solid var(--gld-mid)}
.sp-amber{background:rgba(245,158,11,.1);color:#D97706;border:1px solid rgba(245,158,11,.2)}
.sp-green{background:rgba(16,185,129,.1);color:var(--green);border:1px solid rgba(16,185,129,.2)}
.sp-red{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.2)}

/* ─── MOBILE — touch targets, table scroll, modal sheet, form collapse (Step 11) ─── */
@media (max-width:768px){
  .btn,.btn-sm,.btn-xs,.btn-gold,.btn-ghost,.btn-danger,
  .bp,.bg,.bd2,[class*="btn-"]{
    min-height:44px;padding:12px 16px;font-size:14px;
  }
  .btn.xs,.btn .xs,.bp.xs,.bg.xs{min-height:36px;padding:8px 12px;font-size:12px}
  .brk-table-wrap,.wf-table-wrap,.um-table-wrap,
  .pipeline-table-wrap,.broker-table-wrap{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  .brk-table,.wf-table,.um-table{min-width:600px}
  .form-grid-2,[style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  .lf-grid-2,.deal-form-grid{grid-template-columns:1fr !important}
  .modal-card,.cs-modal,.brk-modal-card,
  .brk-wiz-card,.wf-form-card,.um-form-card{
    max-width:100vw !important;width:100vw !important;
    margin:0 !important;border-radius:20px 20px 0 0 !important;
    position:fixed !important;bottom:0 !important;left:0 !important;
    max-height:92vh !important;
    padding-bottom:env(safe-area-inset-bottom) !important;   /* T115 — clear the home indicator on bottom-sheet modals */
  }
  .cs-nav,.nav{padding:0 12px !important}
  .cs-auth-card{padding:28px 22px 24px !important;border-radius:14px !important;max-width:calc(100% - 24px) !important}
  .cs-portal-card,.portal-card{padding:16px !important}
}

/* ════════════════════════════════════════════════════════════════════
   UNIFIED AUTH CARD — shared with index.html / master.html
   Used by the in-app password change wall (#scr-pwc) and any future
   in-app auth surfaces.
   ════════════════════════════════════════════════════════════════════ */
.cs-auth-card{
  position:relative;z-index:1;
  width:100%;max-width:400px;
  background:var(--bg);border:1px solid var(--bd);
  border-radius:16px;padding:32px 28px 28px;
  display:flex;flex-direction:column;gap:16px;
  box-shadow:0 24px 60px rgba(15,23,42,.12),0 6px 16px rgba(15,23,42,.06);
}
.cs-auth-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(56,130,246,.06) 0%,rgba(0,102,204,.04) 100%);
}
/* CommerShell wordmark lockup. T123 — the canonical transparent assets are
   brand-wordmark.png (colour, for light) / brand-wordmark-dark.png (white "Commer",
   for dark); the actual image shown is theme-swapped by the img.cs-wordmark
   content:url() rule below. object-fit:contain within a generous box keeps it legible. */
.cs-wordmark{display:block;margin-left:auto;margin-right:auto;width:auto;max-width:340px;height:120px;max-height:120px;object-fit:contain;background:transparent;mix-blend-mode:multiply}
.cs-wordmark--sm{height:40px;max-height:40px;max-width:140px}
.cs-wordmark--xs{height:28px;max-height:28px;max-width:100px}
.cs-auth-cs-logo{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 0}
.cs-auth-cs-logo img{height:30px;width:auto;object-fit:contain}
.cs-auth-cs-logo .cs-auth-cs-word{font-size:18px;font-weight:600;color:var(--text);letter-spacing:-.3px}
.cs-auth-cs-logo .cs-auth-cs-tag{display:block;font-size:8px;color:var(--t3);letter-spacing:1.2px;text-transform:uppercase;margin-top:1px;font-weight:500}
.cs-auth-tag{font-size:11px;color:var(--gold);letter-spacing:3px;text-transform:uppercase;text-align:center;font-family:var(--mono);font-weight:600}
.cs-auth-div{height:1px;background:var(--bd);margin:0 8px}
.cs-auth-title{font-size:17px;font-weight:600;color:var(--text);text-align:center;letter-spacing:-.2px}
.cs-auth-sub{font-size:13px;color:var(--t2);text-align:center;line-height:1.5}
.cs-auth-fld{display:flex;flex-direction:column;gap:8px}
.cs-auth-fld label{font-size:11px;color:var(--t2);font-weight:500;text-transform:uppercase;letter-spacing:1.2px}
.cs-auth-fld input{
  width:100%;background:var(--s1);border:1.5px solid var(--bd);
  color:var(--text);padding:14px 16px;border-radius:10px;
  font-size:16px;font-family:var(--font);outline:none;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.cs-auth-fld input:hover{border-color:var(--bd2);background:var(--bg)}
.cs-auth-fld input:focus{border-color:var(--gold);background:var(--bg);box-shadow:0 0 0 3px var(--gld-soft)}
.cs-auth-fld input::placeholder{color:var(--t3)}
.cs-auth-pwd-wrap{position:relative}
.cs-auth-pwd-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:transparent;border:none;cursor:pointer;
  font-size:11px;font-weight:600;color:var(--t3);
  letter-spacing:.6px;text-transform:uppercase;
  padding:6px 8px;border-radius:6px;
  transition:color .15s var(--ease),background .15s var(--ease);
}
.cs-auth-pwd-toggle:hover{color:var(--gold);background:var(--gld-soft)}
/* Primary button — CommerShell auth-card gradient: muted teal → deep navy.
   Identical gradient across index.html + master.html + app.html's password-
   change wall so every login surface is visually consistent. */
.cs-auth-btn{
  width:100%;padding:14px 16px;
  background:linear-gradient(135deg,#4A9CAE 0%,#1A2B47 100%);
  color:#FFFFFF;border:none;
  border-radius:10px;font-size:15px;font-weight:600;
  font-family:var(--font);cursor:pointer;letter-spacing:.3px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  box-shadow:0 6px 20px rgba(26,43,71,.32),inset 0 1px 0 rgba(255,255,255,.18);
  transition:box-shadow .2s var(--ease),transform .15s var(--ease),background .2s var(--ease);
  min-height:48px;
}
.cs-auth-btn:hover{background:linear-gradient(135deg,#5BAEC0 0%,#243A5C 100%);box-shadow:0 8px 24px rgba(26,43,71,.44),inset 0 1px 0 rgba(255,255,255,.24);transform:translateY(-1px)}
.cs-auth-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(26,43,71,.28)}
.cs-auth-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;filter:grayscale(.4)}
.cs-auth-btn img{height:18px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.92}
.cs-auth-err{font-size:12.5px;color:var(--red);text-align:center;min-height:18px;line-height:1.4}
/* Tenant logo/name block + footer links + status line — shared by #scr-login
   and the in-shell #scr-forgot card (T022). Mirrors login.html's definitions. */
.cs-auth-tenant-logo{display:flex;align-items:center;justify-content:center;min-height:56px;padding:6px 0}
.cs-auth-tenant-logo img{max-height:56px;max-width:80%;object-fit:contain}
.cs-auth-tenant-name{font-size:26px;font-weight:300;color:var(--t2);letter-spacing:6px;text-transform:uppercase;text-align:center;line-height:1.1;font-family:var(--font)}
.cs-auth-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.cs-auth-link{background:transparent;border:none;cursor:pointer;color:var(--t2);font-family:var(--font);font-size:12.5px;font-weight:500;letter-spacing:.2px;padding:8px 4px;text-decoration:underline;text-decoration-color:var(--bd2);text-underline-offset:3px;transition:color .15s var(--ease),text-decoration-color .15s var(--ease)}
.cs-auth-link:hover{color:var(--gold);text-decoration-color:var(--gold)}
.cs-auth-msg{font-size:12.5px;color:var(--t2);text-align:center;min-height:18px;line-height:1.5}
@media (max-width:480px){.cs-auth-tenant-name{font-size:22px;letter-spacing:5px}}


:root{ --csw-sb:#0f1b2d; --csw-sb-ink:#c9d5e6; --csw-sb-muted:#7f90ab; --csw-sb-line:#22314b; --csw-sb-active:#3882F6; }
body.csw-shell.signed-in #scr-app{ padding-left:calc(250px + env(safe-area-inset-left)); }
.csw-sb{ position:fixed; left:0; top:0; bottom:0; width:calc(250px + env(safe-area-inset-left)); background:var(--csw-sb); color:var(--csw-sb-ink); border-right:1px solid var(--csw-sb-line); display:flex; flex-direction:column; z-index:130; padding-left:env(safe-area-inset-left); padding-top:env(safe-area-inset-top); }
.csw-sb-brand{ display:flex; align-items:center; gap:10px; padding:18px 18px 14px; }
.csw-sb-logo{ width:30px; height:30px; border-radius:8px; background:transparent; display:grid; place-items:center; color:#012; flex:none; }   /* T124 — holds the transparent shell mark; no coloured chip behind it */
.csw-sb-name{ font-weight:700; font-size:15px; color:#fff; line-height:1.1; }
.csw-sb-tenant{ font-size:11px; color:var(--csw-sb-muted); margin-top:1px; }
.csw-sb-scroll{ flex:1; overflow-y:auto; padding:6px 12px 16px; }
.csw-sb-group{ margin-top:14px; }
.csw-sb-gh{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--csw-sb-muted); padding:6px 10px; font-weight:600; }
.csw-nav{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px; color:var(--csw-sb-ink); border:none; background:none; width:100%; text-align:left; font-size:13.5px; font-weight:500; position:relative; }
.csw-nav:hover{ background:rgba(255,255,255,.05); }
.csw-nav .csw-ic{ width:17px; height:17px; flex:none; opacity:.85; display:grid; place-items:center; }
.csw-nav .csw-ic svg{ width:17px; height:17px; }
.csw-nav .csw-tag{ margin-left:auto; font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--csw-sb-muted); border:1px solid var(--csw-sb-line); border-radius:20px; padding:1px 7px; }
.csw-nav.active{ background:linear-gradient(90deg,rgba(56,130,246,.18),rgba(56,130,246,.04)); color:#fff; }
.csw-nav.active::before{ content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--csw-sb-active); }
.csw-nav.active .csw-ic{ opacity:1; color:var(--csw-sb-active); }
.csw-sb-foot{ border-top:1px solid var(--csw-sb-line); padding:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
.csw-sb-user{ display:flex; align-items:center; gap:10px; padding:6px 8px; }
.csw-sb-ava{ width:30px; height:30px; border-radius:50%; background:#14324a; color:var(--csw-sb-active); display:grid; place-items:center; font-weight:600; font-size:13px; border:1px solid var(--csw-sb-line); flex:none; }
.csw-sb-user .who{ font-size:13px; color:#fff; font-weight:500; }
.csw-sb-user .role{ font-size:10.5px; color:var(--csw-sb-muted); text-transform:uppercase; letter-spacing:.06em; }
.csw-ham{ display:none; }
.csw-backdrop{ display:none; }
@media(max-width:820px){
  body.csw-shell.signed-in #scr-app{ padding-left:0; padding-top:env(safe-area-inset-top); }   /* T115 — clear the notch under the drawer/hamburger */
  .csw-sb{ transform:translateX(-100%); transition:transform .2s ease; }
  body.csw-drawer-open .csw-sb{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.5); }
  body.csw-shell.signed-in .csw-ham{ display:grid; place-items:center; position:fixed; left:calc(10px + env(safe-area-inset-left)); top:calc(9px + env(safe-area-inset-top)); width:36px; height:36px; border-radius:9px; background:var(--csw-sb); color:#fff; border:none; z-index:110; }
  body.csw-drawer-open .csw-backdrop{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:125; }
}


/* T093 — .csh prototype-named vars are now ALIASES of the app's design tokens
   (which STEP 1 remapped to the prototype palette). This makes the home follow
   the app's own dark-default / [data-theme="light"] toggle — one system, no
   theme-inversion, no prefers-color-scheme dependency. */
.csh{ --teal:var(--gold); --blue:var(--blue); --good:var(--green); --warn:var(--amber); --crit:var(--red);
  --panel:var(--s1); --panel-2:var(--s2); --line:var(--bd); --line-soft:var(--bd);
  --ink:var(--text); --ink-2:var(--t2); --muted:var(--t3); --faint:var(--t3);
  --csh-radius:14px; --csh-shadow:var(--shadow-md,var(--sh-2));
  color:var(--text); }
.csh{ max-width:1140px; margin:0 auto; padding:26px; }
.csh .num{ font-variant-numeric:tabular-nums; }
.csh svg{ width:auto; height:auto; }
.csh .head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; }
.csh .head h1{ margin:0; font-size:23px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.csh .head .date{ color:var(--muted); font-size:13px; }
.csh .scope{ font-size:12px; color:var(--muted); margin-top:3px; }
.csh .scope b{ color:var(--teal); }
.csh .brief{ background:var(--panel); border:1px solid var(--line); border-radius:var(--csh-radius); box-shadow:var(--csh-shadow); padding:18px 20px; margin-bottom:22px; }
.csh .brief-h{ display:flex; align-items:center; gap:11px; margin-bottom:4px; }
.csh .brief-badge{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,rgba(56,130,246,.16),rgba(47,111,237,.12)); border:1px solid var(--line); display:grid; place-items:center; color:var(--teal); flex:none; }
.csh .brief-badge svg{ width:18px; height:18px; }
.csh .brief-h h3{ margin:0; font-size:14px; font-weight:600; color:var(--ink); }
.csh .brief-h .sub{ font-size:12px; color:var(--muted); }
.csh .brief-rows{ display:flex; flex-direction:column; margin-top:12px; }
.csh .brow{ display:grid; grid-template-columns:1.4fr 1fr auto; align-items:center; gap:16px; padding:13px 4px; border-top:1px solid var(--line-soft); }
.csh .brow:first-child{ border-top:none; }
.csh .brow .lab{ display:flex; align-items:center; gap:9px; }
.csh .brow .lab svg{ width:16px; height:16px; color:var(--muted); flex:none; }
.csh .brow .lab .t{ font-weight:600; font-size:13.5px; color:var(--ink); }
.csh .brow .lab .s{ font-size:11.5px; color:var(--muted); }
.csh .brow .prog .figs{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; color:var(--ink-2); }
.csh .brow .prog .figs b{ font-weight:600; color:var(--ink); }
.csh .brow .prog .figs .tg{ color:var(--muted); }
.csh .meter{ height:6px; border-radius:4px; background:var(--line); overflow:hidden; }
.csh .meter i{ display:block; height:100%; border-radius:4px; }
.csh .meter.good i{ background:var(--good); } .csh .meter.warn i{ background:var(--warn); } .csh .meter.crit i{ background:var(--crit); } .csh .meter.teal i{ background:var(--teal); }
.csh .pill{ font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; white-space:nowrap; letter-spacing:.02em; }
.csh .pill.good{ color:var(--good); background:color-mix(in srgb,var(--good) 14%,transparent); }
.csh .pill.warn{ color:var(--warn); background:color-mix(in srgb,var(--warn) 15%,transparent); }
.csh .pill.crit{ color:var(--crit); background:color-mix(in srgb,var(--crit) 14%,transparent); }
.csh .pill.neutral{ color:var(--muted); background:var(--panel-2); }
.csh .grid-label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:4px 2px 10px; }
.csh .kpis{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-bottom:24px; }
.csh .kpi{ background:var(--panel); border:1px solid var(--line); border-radius:var(--csh-radius); padding:15px 16px; box-shadow:var(--csh-shadow); }
.csh .kpi.csh-click{ cursor:pointer; }
.csh .kpi.csh-click:hover{ border-color:color-mix(in srgb,var(--teal) 45%,var(--line)); }
.csh .kpi .mod{ display:flex; align-items:center; gap:7px; font-size:11px; color:var(--muted); font-weight:500; margin-bottom:11px; }
.csh .kpi .mod svg{ width:14px; height:14px; color:var(--teal); flex:none; }
.csh .kpi .val{ font-size:27px; font-weight:600; letter-spacing:-.02em; line-height:1; color:var(--ink); }
.csh .kpi .foot{ margin-top:9px; font-size:12px; color:var(--muted); }
.csh .mods{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.csh .mcard{ background:var(--panel); border:1px solid var(--line); border-radius:var(--csh-radius); padding:16px; box-shadow:var(--csh-shadow); display:flex; flex-direction:column; gap:12px; text-align:left; width:100%; color:var(--ink); }
.csh .mcard:hover{ border-color:color-mix(in srgb,var(--teal) 45%,var(--line)); }
.csh .mcard-h{ display:flex; align-items:center; gap:11px; }
.csh .mcard-ic{ width:38px; height:38px; border-radius:10px; background:var(--panel-2); border:1px solid var(--line); display:grid; place-items:center; color:var(--teal); flex:none; }
.csh .mcard-ic svg{ width:19px; height:19px; }
.csh .mcard-h .t{ font-weight:600; font-size:15px; color:var(--ink); }
.csh .mcard-h .s{ font-size:12px; color:var(--muted); }
.csh .mcard-h .arw{ margin-left:auto; color:var(--faint); display:grid; place-items:center; }
.csh .tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-bottom:22px; }
.csh .tile{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:15px 16px; box-shadow:var(--csh-shadow); }
.csh .tile .l{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.csh .tile .v{ font-size:26px; font-weight:600; margin-top:8px; letter-spacing:-.02em; color:var(--ink); }
.csh .tile .d{ font-size:12px; color:var(--muted); margin-top:5px; }
@media(max-width:640px){ .csh{ padding:16px; } .csh .brow{ grid-template-columns:1fr; gap:8px; } }


/* Badges — the prototype .badge pill system (soft, sentence-case, light weight). */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;line-height:1.5;letter-spacing:.01em;white-space:nowrap;text-transform:none}
.badge.b-teal{color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent)}
.badge.b-good{color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent)}
.badge.b-warn{color:var(--amber);background:color-mix(in srgb,var(--amber) 16%,transparent)}
.badge.b-crit{color:var(--red);background:color-mix(in srgb,var(--red) 14%,transparent)}
.badge.b-mut{color:var(--t3);background:var(--s2)}
.badge svg{width:12px;height:12px}
/* Stat tiles — prototype .tiles/.tile (global; the .csh home has its own scoped copy). */
.cs-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.cs-tile{background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:15px 16px;box-shadow:var(--shadow-md,var(--sh-2))}
.cs-tile .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);font-weight:600}
.cs-tile .v{font-size:26px;font-weight:600;margin-top:8px;letter-spacing:-.02em;color:var(--text);font-family:var(--mono)}
.cs-tile .d{font-size:12px;color:var(--t3);margin-top:5px}
/* Screen-head — prototype icon badge + title. */
.cs-screenhead{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.cs-screenhead .ic{width:44px;height:44px;border-radius:12px;background:var(--s1);border:1px solid var(--bd);display:grid;place-items:center;color:var(--gold);box-shadow:var(--shadow-md,var(--sh-2));flex:none}
.cs-screenhead .ic svg{width:22px;height:22px}
.cs-screenhead h1{margin:0;font-size:22px;color:var(--text);font-weight:600;letter-spacing:-.01em}
.cs-screenhead .s{font-size:13px;color:var(--t3);margin-top:2px}
/* Reusable screen-header icon badge (prototype .screen-ic) — drop before any title. */
.cs-hicon{width:44px;height:44px;border-radius:12px;background:var(--s1);border:1px solid var(--bd);display:inline-grid;place-items:center;color:var(--gold);box-shadow:var(--shadow-md,var(--sh-2));flex:none}
.cs-hicon svg{width:22px;height:22px}
.cs-hrow{display:flex;align-items:center;gap:13px}
/* Small stat-tile icon tag (prototype .kpi .mod) for tile strips missing one. */
.cs-tile .cs-tmod{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t3);font-weight:600;margin-bottom:2px;text-transform:none;letter-spacing:0}
.cs-tile .cs-tmod svg{width:13px;height:13px;color:var(--gold)}
/* Top bar — prototype global search + New button + create menu. */
.cs-topsearch{flex:1;max-width:360px;display:flex;align-items:center;gap:9px;background:var(--s2);border:1px solid var(--bd);border-radius:10px;padding:7px 12px;color:var(--t3);font-size:13px;cursor:pointer;text-align:left;font-family:inherit;margin:0 4px}
.cs-topsearch svg{width:15px;height:15px;flex:none}
.cs-topsearch span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-topsearch:hover{border-color:var(--gold);color:var(--t2)}
.cs-newbtn{display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:#00201f;border:none;border-radius:10px;padding:8px 13px;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit}
.cs-newbtn svg{width:15px;height:15px}
.cs-newbtn:hover{filter:brightness(1.08)}
/* ═══════════════════════════════════════════════════════════════
   T142 — Blade loop loader (the ONE in-app loader) + premium header
   ═══════════════════════════════════════════════════════════════ */
/* Blade loader: the shell mark clipped into 7 wedges that build in sequence
   then recede, looping. csShellLoader() renders this everywhere (briefing +
   every spinner). Same wedge geometry + hinge as the boot splash. */
.cs-blade-loader{position:relative;display:inline-block;width:var(--sz,64px);height:var(--sz,64px);flex:none;vertical-align:middle;filter:drop-shadow(0 4px 14px rgba(56,130,246,.32))}
.cs-blade-loader i{position:absolute;inset:0;background:url(/brand-icon.png?v=201) center/contain no-repeat;transform-origin:49.3% 86.8%;opacity:0;animation:csBladeLoop 2.2s cubic-bezier(.4,0,.2,1) infinite}
.cs-blade-loader i:nth-child(1){clip-path:polygon(49.3% 86.8%,-88.2% -37%,-122.2% 17.5%);-webkit-clip-path:polygon(49.3% 86.8%,-88.2% -37%,-122.2% 17.5%);animation-delay:0s}
.cs-blade-loader i:nth-child(2){clip-path:polygon(49.3% 86.8%,-37.6% -76.5%,-88.2% -37%);-webkit-clip-path:polygon(49.3% 86.8%,-37.6% -76.5%,-88.2% -37%);animation-delay:.09s}
.cs-blade-loader i:nth-child(3){clip-path:polygon(49.3% 86.8%,23.6% -96.4%,-37.6% -76.5%);-webkit-clip-path:polygon(49.3% 86.8%,23.6% -96.4%,-37.6% -76.5%);animation-delay:.18s}
.cs-blade-loader i:nth-child(4){clip-path:polygon(49.3% 86.8%,87.8% -94.2%,23.6% -96.4%);-webkit-clip-path:polygon(49.3% 86.8%,87.8% -94.2%,23.6% -96.4%);animation-delay:.27s}
.cs-blade-loader i:nth-child(5){clip-path:polygon(49.3% 86.8%,147.3% -70.1%,87.8% -94.2%);-webkit-clip-path:polygon(49.3% 86.8%,147.3% -70.1%,87.8% -94.2%);animation-delay:.36s}
.cs-blade-loader i:nth-child(6){clip-path:polygon(49.3% 86.8%,195.1% -27.1%,147.3% -70.1%);-webkit-clip-path:polygon(49.3% 86.8%,195.1% -27.1%,147.3% -70.1%);animation-delay:.45s}
.cs-blade-loader i:nth-child(7){clip-path:polygon(49.3% 86.8%,225.2% 29.6%,195.1% -27.1%);-webkit-clip-path:polygon(49.3% 86.8%,225.2% 29.6%,195.1% -27.1%);animation-delay:.54s}
@keyframes csBladeLoop{0%{opacity:0;transform:scale(.35)}14%{opacity:1;transform:scale(1)}48%{opacity:1;transform:scale(1)}62%{opacity:0;transform:scale(.35)}100%{opacity:0;transform:scale(.35)}}
@media (prefers-reduced-motion:reduce){.cs-blade-loader i{animation:none;opacity:1}}

/* Premium header — depth, refined type, a real primary action, breathing room.
   Declared after the base nav rules so it wins on desktop; the mobile @media
   blocks further down still override sizes on phones. */
nav{gap:12px;height:calc(60px + env(safe-area-inset-top));box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -22px rgba(8,14,44,.55)}
.n-crumb{font-size:13.5px;font-weight:600;color:var(--text);letter-spacing:-.1px}
.n-sub{font-size:11px;color:var(--t3);letter-spacing:.1px}
.cs-topsearch{background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:9px 14px;box-shadow:0 1px 2px rgba(8,14,44,.04);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.cs-topsearch:hover{border-color:var(--gbd);color:var(--t2);box-shadow:0 3px 12px -5px rgba(56,130,246,.28)}
.n-tenant{gap:9px;padding:5px 13px 5px 6px;border:1px solid var(--bd);border-radius:999px;background:var(--s1);box-shadow:0 1px 2px rgba(8,14,44,.05)}
.n-tenant-mono{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;font-weight:800;letter-spacing:.01em;box-shadow:0 2px 8px -2px rgba(56,130,246,.5)}
.n-tenant-lbl{font-weight:700;letter-spacing:.2px}
.cs-newbtn{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;border-radius:12px;padding:9px 15px;font-weight:700;box-shadow:0 3px 12px -3px rgba(56,130,246,.5);transition:transform .16s ease,box-shadow .16s ease}
.cs-newbtn:hover{transform:translateY(-1px);filter:none;box-shadow:0 7px 18px -4px rgba(56,130,246,.6)}
.cs-newbtn:active{transform:translateY(0)}
.n-ico{width:36px;height:36px;border-radius:10px;color:var(--t2)}
.n-ico:hover{background:var(--s2);color:var(--text)}
.n-dot{width:32px;height:32px;border:none;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;font-weight:800;box-shadow:0 2px 8px -2px rgba(56,130,246,.5)}
.cs-ai-nav-chip{border-radius:999px;font-weight:700}
.n-user-btn{border-radius:10px;padding:4px 8px;transition:background .16s ease}
.n-uname{font-weight:600}
.n-out{border-radius:10px;padding:7px 12px;font-weight:600}
.n-out:hover{background:var(--s2)}
/* ═══════════════════════════════════════════════════════════════
   T143 — UI DNA v2: platform-wide surface / hover / table / pill / type polish.
   Elevation strength comes from the (upgraded) shadow tokens above, so EVERY
   card, tile, panel & KPI across all modules gains depth at once. Below adds
   the interactive + table + pill + type layer on the shared classes.
   ═══════════════════════════════════════════════════════════════ */
.cs-tile,.csh .kpi,.cs-kpi-card,.mcard{transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.cs-kpi-card--click:hover,.mcard:hover,.csh .kpi.csh-click:hover{transform:translateY(-2px);box-shadow:var(--sh-3);border-color:var(--gld-mid)}
/* Refined data tables — sticky header, hover rows, tabular numerics */
.wf-table{border-collapse:separate;border-spacing:0}
.wf-table thead th{position:sticky;top:0;z-index:1}
.wf-table tbody tr{transition:background .13s ease}
.wf-table tbody tr:hover{background:color-mix(in srgb,var(--gold) 5%,transparent)}
.cs-kpi-value,.kpi-v,.cs-tile .v{font-variant-numeric:tabular-nums}
/* Status pills — one consistent shape + weight platform-wide */
.badge{border-radius:var(--r-full);font-weight:700;letter-spacing:.2px}
/* Heading / label discipline */
.cs-cp-sec-hd,.cs-section-label,.kpi-l{letter-spacing:.6px}
/* Motion — one restrained standard for interactive rows */
.cs-cp-deal,.cs-focus-item{transition:background .14s ease,border-color .14s ease,transform .14s ease}
/* ═══ T144 — Phase 2: hero KPI cards (Home) — real tone (RAG) + real 7-day trend ═══ */
.csh .kpi.kpi--hero{position:relative;overflow:hidden;padding:16px 18px 16px 19px}
.csh .kpi.kpi--hero::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--gld-mid)}
.csh .kpi.kpi--hero.tone-ok::before{background:var(--green)}
.csh .kpi.kpi--hero.tone-warn::before{background:var(--amber)}
.csh .kpi.kpi--hero.tone-bad::before{background:var(--red)}
.csh .kpi.kpi--hero.tone-neutral::before{background:color-mix(in srgb,var(--t3) 40%,transparent)}
.csh .kpi.kpi--hero .kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.csh .kpi.kpi--hero .kpi-ic{width:34px;height:34px;flex:none;border-radius:10px;background:var(--gld-soft);color:var(--gold);display:flex;align-items:center;justify-content:center}
.csh .kpi.kpi--hero .kpi-ic svg{width:17px;height:17px}
.csh .kpi.kpi--hero .mod-label{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--t3)}
.csh .kpi.kpi--hero .val{font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1.05;margin-top:3px;color:var(--text);font-variant-numeric:tabular-nums}
.kpi-trend{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.kpi-trend.up{color:var(--green);background:color-mix(in srgb,var(--green) 13%,transparent)}
.kpi-trend.down{color:var(--red);background:color-mix(in srgb,var(--red) 13%,transparent)}
.kpi-trend.flat{color:var(--t3);background:var(--s2)}
/* ═══ T145 — Phase 2: Ops-tile hero + kpi-card hero + skeleton + empty-state CTA ═══ */
.cs-tile.cs-tile--hero{position:relative;overflow:hidden;padding:16px 18px 15px 19px}
.cs-tile.cs-tile--hero::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:color-mix(in srgb,var(--t3) 40%,transparent)}
.cs-tile.cs-tile--hero.tone-ok::before{background:var(--green)}
.cs-tile.cs-tile--hero.tone-warn::before{background:var(--amber)}
.cs-tile.cs-tile--hero.tone-bad::before{background:var(--red)}
.cs-tile-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cs-tile-ic{width:34px;height:34px;border-radius:10px;background:var(--gld-soft);color:var(--gold);display:flex;align-items:center;justify-content:center}
.cs-tile-ic svg{width:17px;height:17px}
.cs-tile.cs-tile--hero .l{font-size:10.5px;letter-spacing:.6px}
.cs-tile.cs-tile--hero .v{font-size:32px;font-weight:800;letter-spacing:-1px;margin-top:3px;font-family:inherit}
.cs-tile.cs-tile--hero.tone-bad .v{color:var(--red)}
.cs-kpi-value{font-size:30px;font-weight:800;letter-spacing:-.8px;line-height:1.05;color:var(--text)}
.cs-kpi-label{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--t3)}
.cs-empty-cta{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;border:none;border-radius:11px;padding:9px 16px;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 3px 12px -3px rgba(56,130,246,.5);transition:transform .16s ease,box-shadow .16s ease;margin-top:4px}
.cs-empty-cta:hover{transform:translateY(-1px);box-shadow:0 7px 18px -4px rgba(56,130,246,.6)}




.cs-typemenu{display:grid;gap:8px}
.cs-typemenu button{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--bd);border-radius:11px;background:var(--s2);color:var(--text);text-align:left;font-size:14px;font-weight:500;cursor:pointer;width:100%;font-family:inherit}
.cs-typemenu button:hover{border-color:var(--gold)}
.cs-typemenu button svg{width:18px;height:18px;color:var(--gold);flex:none}
.cs-typemenu small{display:block;color:var(--t3);font-weight:400;font-size:12px;margin-top:1px}
@media(max-width:760px){.cs-topsearch span{display:none}.cs-topsearch{max-width:42px;justify-content:center;flex:none}}
/* T097 — filter bar + saved views + activity strip. */
.cs-filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.cs-fviews{max-width:210px;font-size:12.5px}
.cs-fbtn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--bd);border-radius:9px;background:var(--s1);color:var(--t2);font-size:12.5px;font-weight:500;font-family:inherit;cursor:pointer}
.cs-fbtn:hover{border-color:var(--bd2);color:var(--text)}
.cs-fbtn.on{border-color:var(--gold);color:var(--gold)}
.cs-fbtn svg{width:14px;height:14px}
.cs-fsearch{flex:1;min-width:180px;max-width:340px}
.cs-fclear{width:30px;height:30px;border-radius:8px;border:1px solid var(--bd);background:var(--s1);color:var(--t3);display:grid;place-items:center;cursor:pointer;flex:none}
.cs-fclear:hover{color:var(--red);border-color:var(--red)}
.cs-fpanel{background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:12px 14px;margin-bottom:10px;display:flex;flex-direction:column;gap:10px}
.cs-frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cs-flabel{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);font-weight:600;min-width:56px}
.cs-fchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cs-fchip{padding:5px 11px;border:1px solid var(--bd);border-radius:20px;background:var(--bg);color:var(--t2);font-size:12px;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap}
.cs-fchip:hover{border-color:var(--bd2)}
.cs-fchip.on{background:color-mix(in srgb,var(--gold) 14%,transparent);border-color:var(--gold);color:var(--gold)}
.cs-fdate{max-width:150px}
.cs-actstrip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cs-actpill{padding:7px 12px;border:1px solid var(--bd);border-radius:10px;background:var(--s1);font-size:12px;color:var(--t2)}
/* T098 — Hiring scoring screen (mobile-first). */
.hr-scope{max-width:680px}
.hr-subtotal{background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:13px;color:var(--t2)}
/* T117-D — "Your recommendation" scorecard block (title + note, editable or read-only) */
.hr-rec-block{background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:14px 16px;margin-top:16px}
.hr-rec-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--gold);margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em}
.hr-rec-ro{font-size:13.5px;color:var(--text)}
.hr-rec-note-ro{font-size:12.5px;color:var(--t2);margin-top:6px;line-height:1.5}
.hr-subnav{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--bd);margin:0 0 16px;padding-bottom:0}
.hr-subnav-item{display:inline-flex;align-items:center;gap:6px;background:none;border:none;border-bottom:2px solid transparent;color:var(--t2);font:inherit;font-size:13px;font-weight:500;padding:8px 12px;margin-bottom:-1px;cursor:pointer;border-radius:8px 8px 0 0}
.hr-subnav-item:hover{color:var(--text);background:color-mix(in srgb,var(--gold) 6%,transparent)}
.hr-subnav-item.active{color:var(--gold);border-bottom-color:var(--gold);font-weight:600}
.hr-subnav-item.disabled{color:var(--t3);cursor:default;opacity:.7}
.hr-subnav-item.disabled:hover{background:none;color:var(--t3)}
.hr-subnav-item em{font-style:normal;font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--bd);border-radius:8px;padding:1px 5px;color:var(--t3)}
.hr-crit{background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow-md,var(--sh-2))}
.hr-crit-gated{opacity:.55}
.hr-crit-note{border-style:dashed}
.hr-crit-w-note{text-transform:lowercase}
.hr-note-banner{color:var(--t3);background:transparent}
.hr-crit-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.hr-crit-ref{font-family:var(--mono);color:var(--gold);font-weight:600;font-size:12px}
.hr-crit-sub{font-size:13px;color:var(--t2);margin-top:4px;line-height:1.45}   /* T111 — purpose hint: readable, not a grey whisper */
.hr-crit-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.hr-ways-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;color:var(--gold);cursor:pointer;padding:0;border-radius:6px;flex:none}
.hr-ways-btn:hover{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.hr-ways-pop{position:absolute;z-index:9999;width:320px;max-width:calc(100vw - 24px);background:var(--s1);border:1px solid var(--bd);border-radius:12px;box-shadow:0 18px 44px rgba(15,23,42,.30);overflow:hidden}
.hr-ways-pop-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--gold);padding:10px 12px;border-bottom:1px solid var(--bd);background:color-mix(in srgb,var(--gold) 8%,transparent)}
.hr-ways-pop-b{padding:6px 12px 12px;max-height:300px;overflow-y:auto}
.hr-ways-pop-b .hr-way:first-child{border-top:none}
.hr-crit-w{font-family:var(--mono);font-size:11px;color:var(--t3);border:1px solid var(--bd);border-radius:20px;padding:2px 8px;flex:none}
.hr-must-h{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--amber);text-transform:uppercase;margin-bottom:6px}
.hr-must-item{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:10px 12px;margin-bottom:6px}
.hr-must-txt{font-size:13px;color:var(--text);margin-bottom:8px}
.hr-must-ctl{display:flex;gap:8px;flex-wrap:wrap}
.hr-mbtn{padding:7px 12px;border:1px solid var(--bd);border-radius:8px;background:var(--s1);color:var(--t2);font-size:12.5px;font-weight:500;font-family:inherit;cursor:pointer}
.hr-mbtn:hover{border-color:var(--bd2)}
.hr-mbtn.on-good{border-color:var(--green);color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent)}
.hr-mbtn.on-crit{border-color:var(--red);color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
.hr-gatehint{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--amber);margin-top:6px}
.hr-ways{margin:8px 0}
.hr-ways summary{font-size:12px;color:var(--t3);cursor:pointer;user-select:none}
.hr-way{font-size:12.5px;color:var(--t2);padding:6px 0;border-top:1px solid var(--bd)}
.hr-obs-banner{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,transparent);border:1px solid var(--bd);border-radius:9px;padding:8px 11px;margin-bottom:8px}
.hr-rate{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.hr-num{height:64px;border:1px solid var(--bd);border-radius:12px;background:var(--bg);color:var(--text);font-size:26px;font-weight:700;font-family:var(--mono);cursor:pointer}
.hr-num:hover{border-color:var(--gold)}
.hr-num.on{background:var(--gold);border-color:var(--gold);color:#00201f}
.hr-rate-off .hr-num{opacity:.4;cursor:not-allowed}
.hr-ev-flag{border-color:var(--red)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 18%,transparent)}
.hr-compliance{background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:10px 14px;margin-bottom:12px}
.hr-compliance summary{font-size:12.5px;color:var(--t2);cursor:pointer;display:flex;align-items:center;gap:7px}


/* Document viewer modal */
.cs-doc-viewer-overlay{position:fixed;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .24s var(--ease)}
.cs-doc-viewer-overlay.visible{opacity:1}
.cs-doc-viewer-modal{background:var(--bg);border-radius:14px;width:min(1400px,96vw);height:92vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--bd);transform:translateY(12px);transition:transform .24s var(--ease);box-shadow:0 24px 60px rgba(15,23,42,.28)}
.cs-doc-viewer-overlay.visible .cs-doc-viewer-modal{transform:translateY(0)}
.cs-doc-viewer-header{padding:14px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;background:var(--s1)}
.cs-doc-viewer-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--text)}
.cs-doc-viewer-icon{font-size:16px}
.cs-doc-viewer-actions{display:flex;align-items:center;gap:10px}
.cs-doc-viewer-badge{font-size:10.5px;font-weight:500;padding:3px 8px;border-radius:20px;background:var(--gld-soft);color:var(--gold);text-transform:uppercase;letter-spacing:.5px}
.cs-doc-viewer-close{width:28px;height:28px;border-radius:50%;border:1px solid var(--bd);background:var(--bg);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:all .15s var(--ease)}
.cs-doc-viewer-close:hover{background:var(--s2);color:var(--text)}
/* T190 — Download, in the viewer header (shared by every module + tenant) */
.cs-doc-viewer-dl{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:20px;border:1px solid var(--bd);background:var(--bg);color:var(--t2);font-size:11.5px;font-weight:600;cursor:pointer;transition:all .15s var(--ease)}
.cs-doc-viewer-dl:hover{background:var(--s2);color:var(--text);border-color:var(--gold)}
.cs-doc-viewer-dl svg{flex:none}
@media (max-width:600px){.cs-doc-viewer-dl{height:40px;padding:0 12px}.cs-doc-viewer-dl span{display:none}}
.cs-doc-viewer-body{flex:1;overflow:hidden;min-height:0}
.cs-doc-viewer-frame{width:100%;height:100%;border:none}
/* T115 — type-aware viewer bodies (WebView-safe: PDF via canvas, image via <img>) */
.cs-doc-viewer-body--img{overflow:auto;-webkit-overflow-scrolling:touch;background:var(--s1);display:flex;align-items:flex-start;justify-content:center;padding:18px}
.cs-doc-viewer-img{display:block;max-width:100%;height:auto;margin:auto;border-radius:6px}
.cs-doc-viewer-body--pdf{overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--s1);padding:16px}
.cs-doc-pdf-pages{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0 auto;max-width:900px}
.cs-doc-pdf-page{display:block;max-width:100%;height:auto;background:#fff;border:1px solid var(--bd);border-radius:4px;box-shadow:0 4px 16px rgba(15,23,42,.14)}
.cs-doc-pdf-status{text-align:center;color:var(--t3);font-size:12.5px;padding:14px 0 4px}
.cs-doc-unsupported{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:32px;color:var(--t2);background:var(--s1)}
.cs-doc-unsupported-ic{color:var(--t3);opacity:.7}
.cs-doc-unsupported-t{font-size:15px;font-weight:600;color:var(--text)}
.cs-doc-unsupported-s{font-size:12.5px;color:var(--t3);max-width:340px;line-height:1.5}
.cs-doc-unsupported-dl{margin-top:6px;text-decoration:none}
.cs-doc-viewer-footer{padding:8px 16px;border-top:1px solid var(--bd);font-size:11px;color:var(--t3);text-align:center}
@media(max-width:600px){.cs-doc-viewer-modal{width:100vw;height:100vh;border-radius:0}}

/* Generic cs-modal for CSV import flows */
.cs-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}
.cs-modal-card{background:var(--bg);border:1px solid var(--bd);border-radius:14px;width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.cs-modal-header{padding:14px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;background:var(--s1)}
.cs-modal-title{font-size:14px;font-weight:600;color:var(--text)}
.cs-modal-close{width:28px;height:28px;border-radius:50%;border:1px solid var(--bd);background:var(--bg);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--t2)}
.cs-modal-close:hover{background:var(--s2);color:var(--text)}
.cs-modal-body{padding:16px;overflow-y:auto;flex:1}
.cs-modal-footer{padding:12px 16px;border-top:1px solid var(--bd);display:flex;gap:8px;justify-content:flex-end;background:var(--s1)}

/* CSV Import components */
.cs-import-template{background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:12px 14px;margin-bottom:4px}
.cs-import-template-title{font-size:12px;font-weight:500;color:var(--t2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.cs-import-code{display:block;font-family:var(--mono);font-size:11.5px;color:var(--text);background:var(--s2);padding:6px 10px;border-radius:6px;margin-bottom:8px;word-break:break-all;white-space:normal}
.cs-import-preview-header{font-size:13px;color:var(--t2);margin:12px 0 8px;font-weight:500}
.cs-import-progress-bar{height:6px;background:var(--bd);border-radius:3px;overflow:hidden;margin:12px 0 6px}
.cs-import-bar-fill{height:6px;background:var(--cta-gradient,linear-gradient(135deg,var(--gold) 0%,var(--gold) 100%));border-radius:3px;width:0%;transition:width .3s ease}
.cs-import-status{font-size:12px;color:var(--t2);font-family:var(--mono)}

/* ID scan row (lives at top of wfResStep2 client section) */
.cs-id-scan-row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--gld-soft);border:1px solid var(--gld-bd,var(--bd));border-radius:10px;padding:12px 14px;margin-bottom:14px;flex-wrap:wrap}
.cs-id-scan-l{flex:1;min-width:220px}
.cs-id-scan-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px}
.cs-id-scan-msg{font-size:11.5px;color:var(--t2);line-height:1.4}
.cs-id-scan-r{display:flex;align-items:center;flex-shrink:0}
.cs-id-upload-wrap{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.cs-id-upload-btn{min-width:160px}

/* Drive connection panel */
.cs-drive-connected{background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cs-drive-status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);font-weight:500}
.cs-drive-dot{width:8px;height:8px;border-radius:50%;background:var(--t3)}
.cs-drive-dot.connected{background:var(--green,#10b981);box-shadow:0 0 0 3px rgba(16,185,129,.15)}
.cs-drive-folder{font-size:11.5px;color:var(--t2);font-family:var(--mono)}
.cs-settings-section{margin-bottom:18px}
.cs-settings-section-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px}
.cs-settings-section-desc{font-size:12px;color:var(--t2);margin-bottom:10px;line-height:1.5}

/* T109 — Settings landing (grouped card overview) */
.cs-setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.cs-setcard{padding:14px;cursor:pointer;display:flex;gap:12px;align-items:flex-start;transition:border-color .15s var(--ease),background .15s var(--ease)}
.cs-setcard:hover{border-color:var(--gld-bd,var(--gold));background:var(--gld-soft,rgba(56,130,246,.06))}
.cs-setcard-ic{color:var(--gold);flex:none;width:26px;height:26px;display:grid;place-items:center}
.cs-setcard-t{font-weight:600;font-size:13.5px;color:var(--text)}
.cs-setcard-d{font-size:11.5px;color:var(--t3);margin-top:2px;line-height:1.4}

/* T110 — HR pipeline stage-progress dots (Ops-ticket DNA, teal, both themes) */
.hr-prog{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}
.hr-prog-dots{display:inline-flex;align-items:center;gap:6px}
.hr-prog-dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--bd);background:transparent;flex:none;box-sizing:border-box}
.hr-prog-dot.done{background:var(--gold);border-color:var(--gold)}
.hr-prog-dot.cur{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 28%,transparent)}
.hr-prog-lbl{font-size:11.5px;color:var(--t2);white-space:nowrap}

/* T112 — HR home action item: teal clipboard badge (reuses .cs-focus-item) */
.cs-focus-item-check.hr-focus-check{border-color:var(--gld-bd,var(--gold));color:var(--gold);background:var(--gld-soft);width:22px;height:22px}

/* ══════════════════════════════════════════════════════════════════════
   T115 — MOBILE FIT POLISH (touch)
   Larger tap targets on touch devices, and no long-press callout / accidental
   text selection on buttons and nav chrome. Content and inputs keep selection.
   Desktop (fine pointer) is unaffected.
   ══════════════════════════════════════════════════════════════════════ */
button,.btn,.csw-nav,.n-ico,.cs-back-btn,.cs-newbtn,.cs-topsearch,
nav,.csw-sb,.csw-sb-brand,.csw-ham,.cs-doc-viewer-header,.hr-subnav{
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
}
input,textarea,select,[contenteditable],[contenteditable] *,
.selectable,.cs-detail-body,p,td,.wf-cell,.cs-doc-pdf-pages{
  -webkit-user-select:text;user-select:text;
}
@media (pointer:coarse){
  .btn:not(.xs):not(.sm),.csw-nav,.n-ico,.cs-back-btn,.cs-newbtn,
  .cs-doc-viewer-close,.n-r > *,.tab,.wf-tab,.hr-subnav > *{
    min-height:44px;
  }
  .btn:not(.xs):not(.sm){display:inline-flex;align-items:center}
  .cs-doc-viewer-close{width:40px;height:40px}
  a,button{touch-action:manipulation}   /* kill the 300ms tap delay / double-tap zoom on controls */
}

/* ══════════════════════════════════════════════════════════════════════════════
   T120 — MOBILE APP-STANDARD RESPONSIVE PASS  (Material 3 / iOS HIG phone metrics)
   Everything below is gated to the phone breakpoint (≤600px), the drawer bp (≤820px),
   or pointer:coarse — so DESKTOP WEB IS PIXEL-IDENTICAL (parity gate). Tokens only,
   no new UI language: the LOCKED system, correctly sized for a phone. Both themes.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Part A — kill horizontal overflow (root fix). Panel width caps use min() so they
   are provably identical on desktop (min picks the px) yet never exceed a phone. ── */
@media (max-width:600px){
  /* T121 Bug 1 — `clip` (not `hidden`) contains sideways overflow WITHOUT creating a
     scroll container and WITHOUT promoting overflow-y to auto, so there is exactly ONE
     document scroller (the body) and vertical scroll works from anywhere. `hidden` on
     the Android WebView promoted the other axis → nested scrollers → dead scroll zones. */
  html,body{overflow-x:clip}                                     /* the guarantee: no page-level sideways scroll */
  /* T121 Bug 1 — do NOT clip the tall scroll-ancestors (that re-created nested scrollers);
     width stays contained by the page-level clip above + the Part C per-table scrollers. */
  body.csw-shell.signed-in #scr-app{max-width:100vw;box-sizing:border-box}
  .pg{max-width:100vw;box-sizing:border-box}
  .csh{max-width:100vw;box-sizing:border-box}
  /* fixed floating panels capped to the viewport + kept on-screen */
  .cs-notif-panel{width:min(380px,calc(100vw - 24px));right:12px;left:auto}
  .cs-cardmenu{max-width:calc(100vw - 24px)}
  .brk-slide-panel,.wf-slide-panel{width:min(520px,100vw)}
  /* .sai-panel already collapses to 100vw at ≤520px; .hr-ways-pop already min(320px,100vw-24px) */
}

/* ── Part B — standard spacing & dimensions (phone) ── */
@media (max-width:600px){
  .pg{padding:16px}                                              /* 16dp screen gutters, 8dp rhythm */
  nav{height:calc(56px + env(safe-area-inset-top))}             /* 56dp top app bar */
  /* Type: inputs 16px stops iOS/WebView focus-zoom; body/labels never below the 12px floor */
  input,select,textarea,.form-input{font-size:16px}
  .cs-auth-fld input,.cs-auth-pwd-wrap input{font-size:16px}
  /* Scale oversized desktop headings down onto the 8dp scale (never below the 12px floor) */
  .pt{font-size:20px}
  .csh .head h1{font-size:20px}
  .cs-screenhead h1,.cs-detail-title{font-size:16px}
  /* ≥48dp touch targets for primary interactive elements (expand hit area via padding) */
  .btn:not(.xs):not(.sm),.cs-back-btn,.cs-newbtn,.n-ico,.wf-tab,.tab,
  .csw-nav,.hr-subnav>*,.cs-bn-item,.cs-doc-viewer-close,.cs-detail-close,.n-r>*{
    min-height:48px;
  }
  .btn:not(.xs):not(.sm){display:inline-flex;align-items:center}
  .n-ico{width:48px;height:48px}
  /* Single-column: any 2-col form/detail grid collapses on the phone (belt for anything
     not already handled by the component-specific ≤640/≤480 queries above). */
  .form-grid-2,.lf-grid-2,.deal-form-grid,
  [style*="grid-template-columns: 1fr 1fr"],[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
}

/* ── Part C — every data table scrolls INSIDE its own frame; the page never widens.
   The table becomes its own horizontal scroller (works with or without a wrapper), so
   a wide grid can't drag the page even under the .pg overflow clip above. ── */
@media (max-width:600px){
  .wf-table,.brk-table,.um-table{
    display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
    touch-action:pan-x;                                          /* T122 — own the HORIZONTAL axis only; a vertical swipe passes to the page (no dead zone) */
  }
  .wf-table,.brk-table,.um-table{min-width:0}                    /* the block box fits; cells keep natural width inside */
  .brk-table-wrap,.wf-table-wrap,.um-table-wrap,.inv-table-wrap,
  .pipeline-table-wrap,.broker-table-wrap,.cs-tblwrap{
    overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
    touch-action:pan-x;                                          /* T122 — same: horizontal swipe scrolls the frame, vertical swipe scrolls the page */
  }
}

/* ── Part D — primary nav as a fixed bottom tab bar on phone (the mobile form of the
   existing module sidebar: same items/icons/routes/active token — NOT a new language).
   Desktop keeps the left sidebar exactly as-is; this element only exists ≤600px. ── */
.cs-bottomnav{display:none}
@media (max-width:600px){
  /* T121 Bug 2 — ONE primary menu on phones: hide the top-left hamburger; the bottom
     nav's "More" tab opens the same drawer. (Kept at 601–820px, where there's no bottom bar.) */
  body.csw-shell.signed-in .csw-ham{display:none}
  body.csw-shell.signed-in .cs-bottomnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:120;   /* top:auto — the global nav{top:0} must not pin this bar to the top */
    background:var(--csw-sb);border-top:1px solid var(--csw-sb-line);
    padding-bottom:env(safe-area-inset-bottom);
    height:calc(56px + env(safe-area-inset-bottom));
  }
  .cs-bn-item{
    flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    background:none;border:none;color:var(--csw-sb-muted);font-size:10.5px;font-weight:500;
    min-height:48px;padding:6px 2px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .cs-bn-item .cs-bn-ic{display:grid;place-items:center;width:22px;height:22px;opacity:.9}
  .cs-bn-item .cs-bn-ic svg{width:22px;height:22px}
  .cs-bn-lbl{line-height:1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cs-bn-item.active{color:var(--csw-sb-active)}
  .cs-bn-item.active .cs-bn-ic{opacity:1}
  /* content + floating chrome clear the bar */
  body.csw-shell.signed-in #scr-app{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  body.signed-in .sai-fab{bottom:calc(18px + 56px + env(safe-area-inset-bottom))}
  #toast{bottom:calc(18px + 56px + env(safe-area-inset-bottom))}
}

/* ── Part E — touch & feel polish ── */
@media (max-width:600px){
  /* momentum + no rubber-band on genuinely VERTICAL inner panes only (page-level is
     already overscroll:none). T122 — data tables are horizontal-only scrollers: they are
     deliberately EXCLUDED here so a vertical swipe over a table chains straight to the
     page (contain used to make the table a vertical dead zone). */
  .cs-detail-bd,.csw-sb-scroll,.cs-notif-body,
  .cs-doc-viewer-body--pdf,.cs-doc-viewer-body--img,.mset-panel-content{
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
}
@media (pointer:coarse){
  /* pressed state on tap (no hover on touch) — reuse token surfaces */
  .btn:active{filter:brightness(.94)}
  .csw-nav:active,.cs-bn-item:active,.wf-tab:active,.tab:active{background:rgba(255,255,255,.06)}
  .cs-cp-deal:active,.cs-focus-item:active,tr[onclick]:active{background:var(--s2)}
}

/* ══════════════════════════════════════════════════════════════════════════════
   T123 — BRAND CI: theme-aware wordmark + pulsing shell loader (GLOBAL, both themes)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Theme-aware wordmark lockup — the assets are transparent PNGs, so the dark variant
   (white "Commer" + teal "Shell") reads on the dark default and the full-colour lockup
   reads on light. Swapped with the theme via CSS `content` (no JS). The shell ICON
   (brand-icon.png) is theme-agnostic — one file everywhere. `mix-blend-mode:normal`
   overrides the legacy `multiply` (a light-surface trick that would darken the dark
   variant to nothing on the dark theme). */
img.cs-wordmark, .n-logo img{ content:url(/brand-wordmark-dark.png?v=201); mix-blend-mode:normal; }
:root[data-theme="light"] img.cs-wordmark, :root[data-theme="light"] .n-logo img{ content:url(/brand-wordmark.png?v=201); mix-blend-mode:normal; }

/* Pulsing shell loader (style A — shine sweep). Shell mark + a highlight sweeping across
   it. The ONE loading indicator: boot splash (large) + in-app spinners (small). */
.cs-shell-loader{position:relative;display:inline-block;width:var(--sz,64px);height:var(--sz,64px);flex:none}
.cs-shell-loader img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cs-shell-shine{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(/brand-icon.png?v=201) center/contain no-repeat;mask:url(/brand-icon.png?v=201) center/contain no-repeat;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);
  background-size:260% 100%;animation:csShellSweep 1.5s ease-in-out infinite}
@keyframes csShellSweep{0%{background-position:170% 0}100%{background-position:-70% 0}}
@media (prefers-reduced-motion:reduce){.cs-shell-shine{animation:none;opacity:0}}

/* ══════════════════════════════════════════════════════════════════════════════
   T125 — MOBILE UX: focused wizard sheet + sticky footer + FAB-hide + top-bar trim
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Part C — wizards are focused overlays ABOVE the chrome (were z-80/90, below the
   top nav z-100 + bottom nav z-120 → the top bar bled through). Bump above both. This
   is global: centred modal on desktop, full-screen sheet on mobile (below). ── */
.brk-wiz-overlay,.wf-form-overlay,.um-form-overlay{ z-index:2000; }

/* ── Part B Fix 2 — the SAI FAB (z-200) hides whenever any modal/wizard/detail overlay
   is open, so it can never cover Submit/controls. Global; :has() is supported in the
   S25 WebView + modern Chromium. Reappears when the overlay closes. ── */
body:has(.brk-wiz-overlay, .wf-form-overlay, .um-form-overlay, .cs-detail-overlay, .cs-modal-overlay, .cs-doc-viewer-overlay) .sai-fab{ display:none !important; }

@media (max-width:600px){
  /* ── Part C (mobile) — REWRITTEN 2026-09-04 (Ziad): the broker-onboarding + new-request
     wizards are a FLOATING POPUP CARD, not a full-screen sheet. A rounded card centred over
     the dimmed, blurred app with margins on every side so the app shows behind it; the card
     auto-sizes to its content and its body scrolls internally when tall. Overrides both the
     earlier full-bleed rule and the T115 bottom-sheet rule for these three wizard classes
     only (detail/other modals keep their bottom-sheet). ── */
  .brk-wiz-overlay,.wf-form-overlay,.um-form-overlay{
    padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)) !important;
    align-items:center !important; justify-content:center !important;
  }
  .brk-wiz-card,.wf-form-card,.um-form-card{
    position:relative !important;
    inset:auto !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    margin:0 auto !important;
    width:100% !important; max-width:440px !important;
    height:auto !important;
    max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius:16px !important;
    padding-bottom:0 !important;
  }
  /* header/footer sit inside the floating card; the overlay padding already insets the whole
     card from the notch + home indicator, so no per-element safe-area push is needed now. */
  .brk-wiz-hd,.wf-form-hd,.um-form-hd{ padding-top:18px !important; }
  .brk-wiz-ft,.wf-form-ft,.um-form-ft{ padding-bottom:14px !important; }
}

/* ── Part D — mobile top-bar trim. Desktop is untouched (kebab hidden, all icons show).
   On the phone the secondary icons (theme / home / settings) collapse into the overflow
   kebab so `+ New` stays primary and the breadcrumb truncates instead of being overlapped. ── */
.n-more{display:none}                                            /* desktop: no kebab (parity) */
@media (max-width:600px){
  #nbtn-theme,#nbtn-home,#nbtn-adm,#nbtn-bug{display:none}                 /* collapsed into the kebab */
  .n-more{display:inline-flex}
  #ncrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  nav > div{min-width:0}                                         /* let the breadcrumb column shrink/ellipsis */
  .cs-newbtn{flex:none}                                          /* + New keeps its size, never squeezed */
}

/* T146 - report-bug reachable ABOVE any modal/wizard. Hidden in normal browsing (nav icon is primary);
   appears elevated only while an overlay/wizard is open (mirrors the .sai-fab :has() pattern). */
#cs-bug-fab-top{position:fixed;right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:2147483500;display:none;align-items:center;gap:7px;padding:9px 13px;border-radius:var(--r-full);border:1px solid var(--bd2);background:var(--s1);color:var(--t2);font-family:inherit;font-weight:600;font-size:12.5px;line-height:1;cursor:pointer;box-shadow:var(--shadow-lg);opacity:.94;transition:opacity .16s ease,transform .16s ease,color .16s ease,border-color .16s ease}
#cs-bug-fab-top:hover{opacity:1;transform:translateY(-1px);color:var(--text);border-color:var(--gold)}
#cs-bug-fab-top svg{width:15px;height:15px;flex:none}
body:has(.brk-wiz-overlay,.wf-form-overlay,.um-form-overlay,.cs-detail-overlay,.cs-modal-overlay,.cs-doc-viewer-overlay) #cs-bug-fab-top{display:inline-flex}
@media(max-width:640px){#cs-bug-fab-top span{display:none}#cs-bug-fab-top{padding:11px;border-radius:50%}}

/* ══════════════════════════════════════════════════════════════════════════
   Collections desk — phone layout (≤600px).
   The desk (lanes, chips, worklist, customer book, balance statement, receipt)
   is JS-injected with inline styles and carries no max-width rules of its own,
   so it had no phone layout. These overrides live here with the rest of the
   responsive CSS. Scoped to `screen` so the @media print statement/receipt
   stylesheet is never affected. !important is needed to beat the inline styles.
   ══════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width:600px){
  /* Sheet overlays: use the width instead of a fat gutter */
  #cs-desk-stmt, #cs-desk-cust, #cs-desk-rcpt{ padding:10px !important; align-items:flex-start !important; }
  /* Document cards: full width, tighter padding, drop the desktop max-width */
  #cs-stmt-doc, #cs-rcpt-doc, #cs-desk-cust>div{ max-width:100% !important; padding:16px !important; }
  /* Every table inside a desk sheet gets its OWN horizontal scroll, so the six-column
     schedule never makes the page itself scroll sideways. */
  #cs-stmt-doc table, #cs-rcpt-doc table, #cs-desk-cust table{
    display:block !important; width:100% !important; overflow-x:auto !important;
    -webkit-overflow-scrolling:touch; white-space:nowrap;
  }
  /* Worklist rows already flex-wrap (customer block over amount/status). Tighten padding. */
  #desk-list .card{ padding:11px 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   T260 — REQUEST WIZARD ELEVATION (shared layer)
   ---------------------------------------------------------------------------
   One visual language for every surface a sales agent uses to SUBMIT a request:
   Reservation (5 steps) · Broker onboarding (3 steps) · EOI · Activity log ·
   Contract · Cancellation / Refund.

   Written as an override layer at the end of the sheet so it inherits, and then
   corrects, the four dialects that grew separately (.wf-form-*, .brk-wiz-*,
   .df-wiz-*, .cs-detail-*). Tokens only — no literal hex, no new palette.
   Every rule below is presentation. No behaviour, no copy, no field, no gate.
═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. THE SHELL ───────────────────────────────────────────────────────── */
.brk-wiz-overlay,
.wf-form-overlay{
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  padding:24px;
  align-items:flex-start;
  overflow-y:auto;
}
.brk-wiz-card,
.wf-form-card{
  width:720px;max-width:min(720px,96vw);
  max-height:min(92vh,960px);
  margin:auto;
  border-radius:var(--r-xl);
  border:1px solid var(--bd);
  background:var(--s1);
  box-shadow:var(--shadow-xl);
  overflow:hidden;
}
/* Header: quieter, no gradient wash — the rail below carries the emphasis. */
.brk-wiz-hd,
.wf-form-hd{
  padding:20px 26px 16px;
  background:var(--s1);
  border-bottom:1px solid var(--bd);
  align-items:center;
}
.brk-wiz-hd > div:first-child,
.wf-form-hd > div:first-child{
  font-size:var(--fs-lg) !important;
  font-weight:var(--fw-display) !important;
  letter-spacing:-.2px;
  line-height:var(--lh-tight);
  color:var(--text);
}
.brk-wiz-hd .btn.bg.xs,
.wf-form-hd .btn.bg.xs{
  width:34px;height:34px;padding:0;
  border-radius:var(--r-full);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.brk-wiz-bd,
.wf-form-bd{
  padding:0 26px 24px;
  gap:var(--sp-4);
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}
/* Footer: one bar, left = live status summary, right = actions. */
.brk-wiz-ft,
.wf-form-ft{
  padding:14px 26px;
  background:var(--s1);
  border-top:1px solid var(--bd);
  display:flex;align-items:center;gap:var(--sp-3);
  justify-content:flex-end;
  flex-wrap:wrap;
}
.brk-wiz-ft .btn,
.wf-form-ft .btn{min-height:38px}

/* ── 2. THE RAIL — sticky, scrollable, labels never disappear ────────────── */
.cs-wz-rail{
  position:sticky;top:0;z-index:3;
  margin:0 -26px 2px;
  padding:14px 26px 12px;
  background:var(--s1);
  border-bottom:1px solid var(--bd);
}
.cs-wz-rail .cs-stepper{
  padding:0;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.cs-wz-rail .cs-stepper::-webkit-scrollbar{display:none}
.cs-stepper .cs-step{cursor:default}
.cs-stepper .cs-step.done{cursor:pointer}
.cs-stepper .cs-step.done:hover .cs-step-dot{
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gld-soft);
}
.cs-step-dot{
  width:28px;height:28px;
  font-variant-numeric:tabular-nums;
  box-shadow:none;
}
.cs-step.on .cs-step-dot{box-shadow:0 0 0 4px var(--gld-soft)}
.cs-step-label{
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:var(--ls-caps);
}
/* Thin determinate progress under the rail — reads at a glance on any screen. */
.cs-wz-bar{height:2px;background:var(--s3);border-radius:var(--r-full);overflow:hidden;margin-top:12px}
.cs-wz-bar > i{
  display:block;height:100%;
  background:var(--cta-gradient);
  border-radius:var(--r-full);
  transition:width var(--dur) var(--ease-out);
}

/* ── 3. INTRO BANNER — softened, tokenised ──────────────────────────────── */
.cs-wiz-intro{
  margin:16px 0 4px;
  padding:14px 16px;
  background:var(--gld-light);
  border:1px solid var(--gld-bd);
  border-radius:var(--r-md);
  gap:var(--sp-3);
}
.cs-wiz-intro-icon{
  width:34px;height:34px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);
  background:var(--gld-soft);
  color:var(--gold);
  font-size:18px;
}
.cs-wiz-intro-body{font-size:var(--fs-sm);line-height:var(--lh-base)}
.cs-wiz-intro-sla{
  background:transparent;
  border:1px solid var(--gld-bd);
  color:var(--gold);
  padding:2px 8px;
}

/* ── 4. LAYOUT UTILITIES — replace the inline grids that never collapsed ── */
.cs-wz-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.cs-wz-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-wz-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:680px){
  .cs-wz-grid.two,.cs-wz-grid.three{grid-template-columns:1fr}
}

/* Section — a titled block instead of a bare uppercase line. */
.cs-wz-sec{display:flex;flex-direction:column;gap:var(--sp-3)}
.cs-wz-sec + .cs-wz-sec{
  margin-top:var(--sp-2);
  padding-top:var(--sp-4);
  border-top:1px solid var(--bd);
}
.cs-wz-sec-hd{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap}
.cs-wz-sec-t{
  font-size:var(--fs-xs);font-weight:var(--fw-emph);
  color:var(--t2);
  text-transform:uppercase;letter-spacing:var(--ls-caps);
}
.cs-wz-sec-s{font-size:var(--fs-xs);color:var(--t3)}

/* Field — one shape for every input in every wizard. */
.cs-wz-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.cs-wz-f > label,.cs-wz-lbl{
  font-size:var(--fs-xs);font-weight:var(--fw-emph);
  color:var(--t2);
  text-transform:uppercase;letter-spacing:var(--ls-caps);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
/* Required is marked, not announced: one accent dot reads faster than a pill on
   every second field, and leaves "optional" as the thing worth spelling out. */
.cs-wz-req{
  width:5px;height:5px;border-radius:50%;
  background:var(--gold);
  display:inline-block;flex-shrink:0;
  margin-left:1px;
  text-indent:-9999px;overflow:hidden;
}
.cs-wz-opt{
  font-size:var(--fs-xs);font-weight:var(--fw-body);
  color:var(--t3);
  text-transform:none;letter-spacing:0;
}
.cs-wz-hint{font-size:var(--fs-xs);color:var(--t3);line-height:var(--lh-snug)}
.cs-wz-f.bad .form-input{border-color:var(--red)}
.cs-wz-err{font-size:var(--fs-xs);color:var(--red);display:flex;align-items:center;gap:5px}

/* Keep the legacy label class visually identical to the new one so a screen
   that has not been migrated yet does not look like a different product. */
.brk-panel-label{
  font-size:var(--fs-xs);font-weight:var(--fw-emph);
  color:var(--t2);letter-spacing:var(--ls-caps);
}
.brk-panel-section{gap:6px}

/* Inputs — a touch taller, calmer focus. */
.form-input{
  padding:11px 13px;
  background:var(--s2);
  border-color:var(--bd);
  border-radius:var(--r-sm);
  font-size:var(--fs-base);
  min-height:42px;
}
.form-input:hover{background:var(--s3);border-color:var(--bd2)}
.form-input:focus{
  background:var(--s2);
  border-color:var(--gold);
  box-shadow:var(--sh-focus);
}
select.form-input{
  appearance:none;-webkit-appearance:none;
  padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%),linear-gradient(135deg,var(--t3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 51%,calc(100% - 13px) 51%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
textarea.form-input{min-height:88px;line-height:var(--lh-base)}

/* ── 5. CHOICE CARDS — radio / segmented, replaces inline-styled labels ─── */
.cs-wz-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2)}
.cs-wz-choice{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:11px 13px;
  background:var(--s2);
  border:1px solid var(--bd);
  border-radius:var(--r-sm);
  font-size:var(--fs-base);color:var(--t2);
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
  min-height:44px;
}
.cs-wz-choice:hover{border-color:var(--bd2);background:var(--s3)}
.cs-wz-choice input{accent-color:var(--gold);flex-shrink:0}
.cs-wz-choice.on{
  border-color:var(--gold);
  background:var(--gld-soft);
  color:var(--text);
  font-weight:var(--fw-emph);
}

/* ── 6. NOTES — info / good / warn / danger, tokenised ───────────────────── */
.cs-wz-note{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  padding:12px 14px;
  border-radius:var(--r-md);
  font-size:var(--fs-sm);line-height:var(--lh-base);
  color:var(--t2);
  background:var(--s2);
  border:1px solid var(--bd);
}
.cs-wz-note strong{color:var(--text);font-weight:var(--fw-emph)}
.cs-wz-note .cs-ico{flex-shrink:0;margin-top:2px}
.cs-wz-note.info{background:var(--gld-light);border-color:var(--gld-bd)}
.cs-wz-note.info .cs-ico{color:var(--gold)}
.cs-wz-note.good{background:color-mix(in srgb,var(--green) 10%,transparent);border-color:color-mix(in srgb,var(--green) 30%,transparent)}
.cs-wz-note.good .cs-ico{color:var(--green)}
.cs-wz-note.warn{background:color-mix(in srgb,var(--amber) 10%,transparent);border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
.cs-wz-note.warn .cs-ico{color:var(--amber)}
.cs-wz-note.bad{background:color-mix(in srgb,var(--red) 10%,transparent);border-color:color-mix(in srgb,var(--red) 30%,transparent);color:var(--text)}
.cs-wz-note.bad .cs-ico{color:var(--red)}

/* ── 7. REVIEW — replaces the raw <table style="…"> blocks on the last step ─ */
.cs-wz-rev{
  background:var(--s2);
  border:1px solid var(--bd);
  border-radius:var(--r-md);
  overflow:hidden;
}
.cs-wz-rev-hd{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:10px 14px;
  background:var(--s3);
  border-bottom:1px solid var(--bd);
}
.cs-wz-rev-t{
  flex:1;
  font-size:var(--fs-xs);font-weight:var(--fw-emph);color:var(--t2);
  text-transform:uppercase;letter-spacing:var(--ls-caps);
}
.cs-wz-rev-edit{
  font-size:var(--fs-xs);font-weight:var(--fw-emph);color:var(--gold);
  background:none;border:none;cursor:pointer;padding:2px 6px;border-radius:var(--r-sm);
}
.cs-wz-rev-edit:hover{background:var(--gld-soft)}
.cs-wz-rev-r{
  display:flex;gap:var(--sp-3);align-items:baseline;
  padding:9px 14px;
  border-bottom:1px solid var(--bd);
  font-size:var(--fs-sm);
}
.cs-wz-rev-r:last-child{border-bottom:none}
.cs-wz-rev-k{flex:0 0 40%;max-width:210px;color:var(--t3)}
.cs-wz-rev-v{flex:1;color:var(--text);word-break:break-word}
.cs-wz-rev-v.empty{color:var(--t3)}
.cs-wz-rev-r.chk .cs-wz-rev-k{flex:1;max-width:none;color:var(--t2)}
.cs-wz-rev-r.chk .cs-wz-rev-v{flex:0 0 auto;text-align:right;font-weight:var(--fw-emph)}
.cs-wz-ok{color:var(--green)}
.cs-wz-no{color:var(--red)}
.cs-wz-na{color:var(--t3)}
@media (max-width:520px){
  .cs-wz-rev-r{flex-direction:column;gap:2px}
  .cs-wz-rev-k{flex:none;max-width:none}
  .cs-wz-rev-r.chk{flex-direction:row;align-items:center}
}

/* ── 8. FOOTER STATUS — what is left to do, on every step, not just the last ─ */
.cs-wz-status{
  flex:1 1 220px;min-width:0;
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-xs);color:var(--t3);
  line-height:var(--lh-snug);
}
.cs-wz-status b{color:var(--text);font-weight:var(--fw-emph)}
.cs-wz-status.bad{color:var(--amber)}
.cs-wz-status.ready{color:var(--green)}
.cs-wz-status .cs-ico{flex-shrink:0}

/* ── 9. FILE ROWS + PICKER — align with the new field rhythm ─────────────── */
.cs-file-row{background:var(--s2);border-radius:var(--r-md);padding:12px 13px}
.cs-fileinput{background:var(--s2);border-radius:var(--r-sm);min-height:62px}
.cs-fileinput:hover,.cs-fileinput.drag{background:var(--gld-light)}
.cs-file-pill{background:var(--gld-soft);border-color:var(--gld-bd);border-radius:var(--r-full)}

/* ── 10. TYPE CARDS — the request launcher ──────────────────────────────── */
.wf-typecard{
  background:var(--s1);
  border-radius:var(--r-lg);
  padding:18px 18px 16px;
  gap:var(--sp-2);
  position:relative;
  min-height:132px;
  transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.wf-typecard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--gld-bd)}
.wf-typecard-icon{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);
  background:var(--gld-soft);color:var(--gold);
  margin-bottom:var(--sp-1);
}
.wf-typecard-icon .cs-ico{width:22px;height:22px}
.wf-typecard-name{font-size:var(--fs-md);letter-spacing:-.1px}
.wf-typecard-desc{font-size:var(--fs-sm);line-height:var(--lh-snug)}
.wf-typecard-sla{
  position:absolute;top:16px;right:16px;
  font-size:9.5px;letter-spacing:.06em;
  background:var(--s2);border:1px solid var(--bd);
  border-radius:var(--r-full);padding:2px 8px;margin:0;
}

/* ── 11. STEP MOTION ────────────────────────────────────────────────────── */
@keyframes cs-wz-step-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cs-wz-body{animation:cs-wz-step-in var(--dur) var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .cs-wz-body,.brk-wiz-card,.wf-form-card,.brk-wiz-overlay,.wf-form-overlay{animation:none !important}
  .cs-wz-bar > i{transition:none}
}

/* ── 12. MOBILE ──────────────────────────────────────────────────────────
   The floating-popup-card decision of 2026-09-04 (Ziad) is NOT touched: on a
   phone these wizards stay a rounded card centred over the blurred app, never a
   full-screen sheet. Everything below is inside that card. */
@media (max-width:680px){
  .brk-wiz-hd,.wf-form-hd{padding:16px 18px 14px}
  .brk-wiz-hd > div:first-child,.wf-form-hd > div:first-child{font-size:var(--fs-md) !important}
  .brk-wiz-bd,.wf-form-bd{padding:0 18px 18px}
  .cs-wz-rail{margin:0 -18px 2px;padding:12px 18px 10px}
  .cs-step-label{display:block}          /* was hidden — the phone lost all step context */
  .cs-step-line{min-width:12px;margin:0 6px}
  .brk-wiz-ft,.wf-form-ft{gap:var(--sp-2);padding-left:18px;padding-right:18px}
  .cs-wz-status{flex:1 0 100%;order:-1;margin-bottom:2px}
  .brk-wiz-ft .btn,.wf-form-ft .btn{flex:1;min-height:46px;justify-content:center}
  .cs-wz-choices{grid-template-columns:1fr}
  /* The framing banner is useful once; it should not cost half the screen on a
     phone every time the step repaints. */
  .cs-wiz-intro{margin:14px 0 2px;padding:11px 12px;gap:var(--sp-2)}
  .cs-wiz-intro-icon{width:28px;height:28px;font-size:15px}
  .cs-wiz-intro-body{font-size:var(--fs-xs)}
  .cs-wz-sec + .cs-wz-sec{padding-top:var(--sp-3)}
}
/* The rail scrolls sideways on a narrow card — a soft edge says so without
   adding another control. */
.cs-wz-rail{position:sticky;top:0}
.cs-wz-rail::after{
  content:"";position:absolute;right:0;top:0;bottom:12px;width:28px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--s1));
}
@media (min-width:900px){.cs-wz-rail::after{display:none}}

/* T260 — selectable tile (broker type, cancellation subject). Replaces the
   hand-written inline-styled <div onclick> cards those screens carried. */
.cs-wz-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-3)}
.cs-wz-tile{
  display:flex;flex-direction:column;gap:6px;
  padding:16px;
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  background:var(--s2);
  cursor:pointer;
  text-align:left;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.cs-wz-tile:hover{border-color:var(--bd2);transform:translateY(-2px)}
.cs-wz-tile.on{border-color:var(--gold);background:var(--gld-soft)}
.cs-wz-tile-ico{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);
  background:var(--gld-soft);color:var(--gold);
  margin-bottom:var(--sp-1);
}
.cs-wz-tile.on .cs-wz-tile-ico{background:var(--bg)}
.cs-wz-tile-t{font-size:var(--fs-base);font-weight:var(--fw-emph);color:var(--text)}
.cs-wz-tile-d{font-size:var(--fs-sm);color:var(--t3);line-height:var(--lh-snug)}
@media (max-width:680px){.cs-wz-tiles{grid-template-columns:1fr}}

/* T260 — surfaces that now sit inside the shared wizard shell. */
.cs-forecast-shortlist{max-height:300px;margin-bottom:0}
.cs-forecast-deal-row{background:var(--s2);border-radius:var(--r-md);min-height:56px}
.cs-forecast-deal-arrow{display:flex;align-items:center;color:var(--t3)}
.cs-forecast-deal-row:hover .cs-forecast-deal-arrow{color:var(--gold)}
.wf-form-bd .cs-cp-deal{
  display:flex;gap:var(--sp-3);align-items:center;
  padding:12px 14px;
  background:var(--s2);
  border:1px solid var(--bd);
  border-radius:var(--r-md);
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.wf-form-bd .cs-cp-deal:hover{border-color:var(--gold);background:var(--s3)}
.wf-form-bd .cs-cp-empty{padding:28px;text-align:center;color:var(--t3);font-size:var(--fs-sm)}
/* The EOI/contract/cancellation bodies stack their own sections; keep the
   scroll container from double-spacing them. */
.wf-form-bd > .cs-wz-body{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-4)}
.wf-form-bd > .cs-wz-body:first-child{margin-top:var(--sp-5)}
.brk-wiz-bd > .cs-wz-body{display:flex;flex-direction:column;gap:var(--sp-4)}

/* V2 S7-12 — laptop widths (821–1280px): the top bar fits and the page never scrolls sideways.
   The search keeps its icon, the signed-in name truncates, then the name and tenant label fold away. */
nav > *{min-width:0}
@media (min-width:821px) and (max-width:1280px){
  .cs-topsearch{flex:0 0 auto;padding:8px 10px;margin:0 2px}
  .cs-topsearch span{display:none}
  .n-uname,.n-urole{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (min-width:821px) and (max-width:1100px){
  .n-user-btn > div{display:none}
  .n-tenant-name{display:none !important}
  .n-r{gap:2px}
}
/* V2 S7-12 — a toast is never hidden behind a dialog or the "Report a problem" button. */
#toast{z-index:2147483600}
body:has(.brk-wiz-overlay,.wf-form-overlay,.um-form-overlay,.cs-detail-overlay,.cs-modal-overlay,.cs-doc-viewer-overlay) #toast{bottom:calc(18px + 52px + env(safe-area-inset-bottom))}
/* V2 S7-07 — the request and broker detail panels sit above the sticky top bar (z 100), so their header and
   close button are never clipped under it on desktop; the sidebar (130) and dialogs (2000+) stay above. */
.brk-slide-panel,.wf-slide-panel{z-index:120}
.cs-panel-backdrop{z-index:119}
