:root{
  /* Winner Houses brand — blue gradient #2253a2 -> #2484c7, wordmark #2f63af */
  --blue-800:#153c73; --blue-700:#1b4b8f; --blue-600:#2253a2; --blue-500:#2f63af; --blue-400:#2484c7;
  --blue-050:#eef4fc; --blue-100:#d9e7f8;
  --grad:linear-gradient(135deg,#2253a2 0%,#2484c7 100%);
  --grad-soft:linear-gradient(135deg,#eef4fc 0%,#e4f0fb 100%);
  --ink:#152238; --ink-2:#33415c; --muted:#6b7a91; --faint:#9aa7b8; --line:#e6ecf5;
  --bg:#f3f6fb; --card:#ffffff; --white:#fff;
  --surface:#ffffff; --surface-2:#f7fafd; --surface-3:#eef2f8; --surface-4:#ffffff;
  --green:#1f9d55; --red:#d64545; --amber:#d9822b;
  /* Layered, premium shadows */
  --shadow:0 1px 2px rgba(21,45,90,.05),0 4px 14px rgba(21,45,90,.05);
  --shadow-lg:0 2px 6px rgba(21,45,90,.06),0 14px 40px rgba(21,45,90,.10);
  --radius:12px; --radius-sm:10px; --radius-card:16px;
  --ease:cubic-bezier(.22,1,.36,1);
  /* Montserrat echoes the WINNER HOUSES wordmark; system font for body copy */
  --font-brand:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* ---------------------------------------------------------------------
     RESPONSIVE FOUNDATION
     One spacing scale, one type scale, one container. Every page inherits
     these; nothing below should hardcode a layout width again.
     --------------------------------------------------------------------- */

  /* Spacing scale — use these, not ad-hoc margins. */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;  --s5:20px;
  --s6:24px;  --s7:32px;  --s8:40px;  --s9:48px;  --s10:64px;

  /* Fluid gutters: tighten on phones, breathe on desktops. */
  --gutter:clamp(16px,3.2vw,32px);
  --gap:clamp(12px,1.4vw,18px);

  /* Page width. `none` = fill the screen, so every page uses the full monitor
     the way the Deal Calculator does, instead of sitting in a centred column
     with dead space either side. Set a px value here (e.g. 1560px) to cap it
     again — it is the single knob for page width across the whole CRM. */
  --container:none;

  /* Sidebar geometry — referenced by the rail/drawer states below. */
  --rail:240px;
  --rail-icon:72px;

  /* Fluid type scale. clamp() keeps everything legible from 480px to 4K and
     under browser zoom, because the middle term is viewport-relative. */
  --fs-xs:clamp(10.5px,.62vw + 8.6px,12px);
  --fs-sm:clamp(12px,.5vw + 10.4px,13.5px);
  --fs-md:clamp(13px,.45vw + 11.6px,14.5px);
  --fs-lg:clamp(15px,.6vw + 13px,17px);
  --fs-h2:clamp(15px,.7vw + 12.8px,18px);
  --fs-h1:clamp(18px,1.1vw + 14.5px,24px);
  --fs-kpi:clamp(22px,1.7vw + 15px,32px);
  --fs-display:clamp(28px,3vw + 18px,44px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);
  background:var(--bg);color:var(--ink);font-size:var(--fs-md);line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
.layout{display:flex;min-height:100vh}

/* Nothing may push the page sideways. Tables and boards opt back in to
   scrolling on their own container (.table-wrap, .vscroll, .kanban). */
/* `clip`, NOT `hidden`. Per spec an overflow value other than `visible`
   makes the other axis compute to `auto`, which turns <body> into a scroll
   container — and that silently breaks `position:sticky` on every
   descendant, i.e. the sidebar and the topbar. `clip` prevents sideways
   scrolling without creating a scroll container, so sticky still works. */
html,body{max-width:100%;overflow-x:clip}
/* Media and embeds are fluid by default rather than intrinsic-width. */
img,svg,video,canvas{max-width:100%}
/* Long unbroken strings (URLs, addresses, IDs) must wrap, not overflow —
   but only when they genuinely cannot fit, so button and label text is
   never broken mid-word. */
td,th,p,li,.todo-title,.kb-cardtitle{overflow-wrap:break-word}
/* Controls keep their words intact and size to their content. */
.btn,button,.badge,.rolechip,.chip,label{overflow-wrap:normal;word-break:normal}
.btn{white-space:nowrap}

/* ------------------------------------------------------------------ Sidebar */
.sidebar{background:var(--white);color:var(--muted);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;flex-shrink:0;border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;padding:17px 18px;border-bottom:1px solid var(--line)}
.brand img{height:38px;width:38px;object-fit:contain;display:block}
.brand .txt b{font-family:var(--font-brand);color:var(--blue-600);font-size:15px;font-weight:800;
  letter-spacing:.4px;line-height:1;display:flex;align-items:baseline;gap:5px}
.brand .txt b .w2{color:var(--blue-400);font-weight:700;letter-spacing:1.1px;font-size:12px}
.brand .txt .sub{display:block;color:var(--faint);font-size:9px;letter-spacing:2.6px;text-transform:uppercase;
  font-weight:700;margin-top:4px}
.nav{padding:14px 12px;flex:1}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;color:#5a6b82;
  font-weight:550;margin-bottom:3px;transition:background .18s var(--ease),color .18s var(--ease)}
.nav a .ic{width:18px;text-align:center;opacity:.85;font-size:15px}
.nav a:hover{background:var(--blue-050);color:var(--blue-600)}
.nav a.active{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(34,83,162,.28)}
.nav a.active .ic{color:#fff;opacity:1}
.sidebar .foot{padding:14px 18px;font-size:11px;color:var(--faint);border-top:1px solid var(--line)}
.sidebar .foot b{color:var(--muted);font-weight:600}

/* --------------------------------------------------------------------- Main */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:rgba(255,255,255,.85);backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3) var(--gap);flex-wrap:wrap;padding:var(--s4) var(--gutter)}
.topbar>*{min-width:0}
.topbar h1{margin:0;font-family:var(--font-brand);font-size:var(--fs-h1);font-weight:800;
  color:var(--ink);letter-spacing:-.2px;text-wrap:balance}
.topbar .sub{color:var(--muted);font-size:var(--fs-sm);margin-top:3px}
/* Topbar actions wrap as a group and stay right-aligned; they never overlap
   the title because the whole bar is a wrapping flex row. */
.topbar-actions{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  justify-content:flex-end;margin-left:auto;min-width:0}

/* THE page container — used by every route. Fills the available width;
   --container is the one place that caps it if you ever want to. */
.content{width:100%;max-width:var(--container);margin-inline:auto;
  padding:var(--s6) var(--gutter) var(--s9);min-width:0}
/* Consistent vertical rhythm between top-level sections on every page. */
.content>*+*{margin-top:var(--gap)}

/* --------------------------------------------------------- Period selector */
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{padding:6px 13px;border-radius:20px;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  font-weight:600;font-size:12px;cursor:pointer;transition:all .16s var(--ease)}
.chip:hover{border-color:var(--blue-400);color:var(--blue-600)}
.chip.active{background:var(--grad);color:#fff;border-color:transparent}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.seg a{padding:7px 14px;font-weight:600;font-size:12px;color:var(--muted)}
.seg a.active{background:var(--blue-600);color:#fff}

/* -------------------------------------------------------------------- Cards */
.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:17px 19px;
  box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.kpi .label{color:var(--muted);font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.6px}
.kpi .val{font-family:var(--font-brand);font-size:27px;font-weight:800;margin-top:7px;letter-spacing:-.6px;color:var(--ink)}
.kpi .val.money{color:var(--blue-600)}
.kpi .meta{color:var(--muted);font-size:11.5px;margin-top:4px}
.kpi.accent{background:var(--grad);color:#fff;border:none;box-shadow:0 10px 26px rgba(34,83,162,.28)}
.kpi.accent .label{color:#cfe1f6}
.kpi.accent .val{color:#fff}
.kpi.accent .meta{color:#e4f0fc}

/* Single source of truth for card geometry. The v5/v6 layers below used to
   redeclare border/radius/overflow here; those now only carry colour and
   elevation, so there is one place to change a card's shape. */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow);overflow:hidden;min-width:0}
.card .hd{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;min-width:0}
.card .hd h2{margin:0;font-family:var(--font-brand);font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.1px}
.card .hd .note{color:var(--faint);font-size:12px;font-weight:500}
.hd-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card .bd{padding:4px 0}
.card .pad{padding:20px}

/* ------------------------------------------------------------------ Tables */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 20px;font-size:13px;vertical-align:middle}
th{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;
  border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
td{border-bottom:1px solid var(--line)}
tbody tr{transition:background .14s var(--ease)}
tbody tr:hover{background:var(--surface-2)}
tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums}
.money-cell{color:var(--blue-600);font-weight:700}
.datev{white-space:nowrap;color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.rank{width:27px;height:27px;border-radius:50%;background:var(--bg);display:inline-flex;
  align-items:center;justify-content:center;font-weight:750;font-size:12px;color:var(--muted)}
.rank.g1{background:var(--grad);color:#fff;box-shadow:0 4px 10px rgba(34,83,162,.3)}
.rank.g2{background:var(--blue-100);color:var(--blue-600)}
.rank.g3{background:var(--blue-050);color:var(--blue-500)}
.who{display:flex;align-items:center;gap:11px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:750;font-size:13px;flex-shrink:0;
  box-shadow:0 3px 8px rgba(34,83,162,.25)}
/* Profile-picture avatars: fill the circle, no gradient behind the photo. */
.avatar--img{background:none;overflow:hidden}
.avatar--img img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.who b{font-weight:700;color:var(--ink);font-size:13.5px;white-space:nowrap}
.who small{color:var(--muted);display:block;font-size:11px;font-weight:500}

/* Leaderboard — full width, scrolls vertically with a sticky header */
.vscroll{max-height:560px;overflow:auto}
.vscroll::-webkit-scrollbar{width:10px;height:10px}
.vscroll::-webkit-scrollbar-thumb{background:#cdd8e8;border-radius:8px;border:2px solid #fff}
.vscroll::-webkit-scrollbar-track{background:transparent}
table.lb{min-width:720px}
table.lb thead th{position:sticky;top:0;z-index:3;background:var(--surface-2);
  box-shadow:inset 0 -1px 0 var(--line)}
table.lb .c-rank{width:52px;text-align:center}
table.lb tbody tr:first-child{background:linear-gradient(90deg,rgba(34,83,162,.05),transparent 60%)}

/* ------------------------------------------------------------------ Badges */
.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.b-closer{background:var(--blue-050);color:var(--blue-600)}
.b-lm{background:#f3ecfb;color:#7a41b8}
.b-active{background:#e6f6ec;color:var(--green)}
.b-inactive{background:#f1f3f6;color:var(--muted)}
.b-Strike,.b-Deduction,.b-Written{background:#fbe9e9;color:var(--red)}
.b-Verbal{background:#fdf1e3;color:var(--amber)}
.b-Excuse{background:#eef1f5;color:var(--muted)}
.b-Allowance{background:#e6f6ec;color:var(--green)}
.b-Other{background:#eef1f5;color:var(--muted)}
.pill{font-weight:700}
.up{color:var(--green)} .down{color:var(--red)}
.pos{color:var(--green)} .neg{color:var(--red)}

/* ---------------------------------------------------------------- Progress */
.bar{height:7px;background:#eef1f5;border-radius:6px;overflow:hidden;min-width:90px}
.bar>span{display:block;height:100%;background:var(--blue-400);border-radius:6px}
.bar>span.full{background:var(--green)}

/* -------------------------------------------------------------- Trend chart */
.chart{padding:16px 14px 6px}
.chart svg{width:100%;height:190px;display:block}
.axis{fill:var(--faint);font-size:11px;font-weight:600}

/* -------------------------------------------------------------------- Forms */
.form{max-width:640px}
.form .row{display:flex;gap:16px;flex-wrap:wrap}
.field{margin-bottom:15px;flex:1;min-width:170px}
.field label{display:block;font-size:12px;font-weight:650;color:var(--ink);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:14px;font-family:inherit;background:var(--surface);color:var(--ink);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-400);
  box-shadow:0 0 0 3px rgba(36,132,199,.15)}
.field .hint{color:var(--muted);font-size:11px;margin-top:4px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--radius-sm);border:none;
  background:var(--grad);color:#fff;font-weight:650;font-size:13px;cursor:pointer;text-decoration:none;
  transition:filter .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease);
  box-shadow:0 4px 12px rgba(34,83,162,.22)}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 6px 16px rgba(34,83,162,.28)}
.btn:active{transform:translateY(0)}
.btn.gold{background:var(--grad);color:#fff}
.btn.ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink-2);box-shadow:none}
.btn.ghost:hover{border-color:var(--blue-400);color:var(--blue-600);filter:none;box-shadow:none}
.btn.sm{padding:7px 13px;font-size:12px}
.btn.danger{background:var(--red);box-shadow:0 4px 12px rgba(214,69,69,.22)}

/* -------------------------------------------------------------------- Flash */
.flash{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-weight:600;font-size:13px}
.flash.success{background:#e6f6ec;color:#166c3b;border:1px solid #bfe6cd}
.flash.error{background:#fbe9e9;color:#a32d2d;border:1px solid #f0c4c4}

.empty{padding:44px;text-align:center;color:var(--muted)}
.section-title{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);
  font-weight:700;margin:26px 0 2px}
.help{color:var(--muted);font-size:12px}
/* Two-column split that collapses on its own content width, not a magic
   number. The sidebar is handled by the rail/drawer system further down —
   it must never be display:none, or the nav becomes unreachable. */
.split{display:grid;gap:var(--gap);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
@media(min-width:1100px){.split{grid-template-columns:2fr 1fr}}

/* --------------------------------------------------------------------- Auth */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--grad);padding:20px}
.auth-card{background:var(--surface);border-radius:18px;box-shadow:0 24px 70px rgba(15,40,90,.3);
  width:100%;max-width:390px;padding:36px 34px;text-align:center}
.auth-card img.auth-logo{height:104px;width:auto;margin:2px auto 10px;display:block}
.auth-card h1{font-family:var(--font-brand);font-size:19px;font-weight:800;margin:4px 0 2px;color:var(--ink)}
.auth-card p{color:var(--muted);font-size:13px;margin:0 0 22px}
.auth-card .auth-tag{color:var(--muted);font-size:12.5px;margin:0 0 22px}
.auth-card .field{text-align:left}
.auth-card .btn{width:100%;justify-content:center;margin-top:6px}
.auth-hint{margin-top:16px;font-size:11px;color:var(--muted)}
.userbox{display:flex;align-items:center;gap:10px}
.userbox .nm{font-weight:650;font-size:13px}
.userbox .rl{font-size:11px;color:var(--muted)}

/* ------------------------------------------------- Horizontal scroll tables */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:680px}
.table-wrap::-webkit-scrollbar{height:10px}
.table-wrap::-webkit-scrollbar-thumb{background:#cdd8e8;border-radius:8px;border:2px solid #fff}
.table-wrap::-webkit-scrollbar-track{background:transparent}

/* --------------------------------------------------------------- Filter bar */
/* Grid, not flex-wrap. Every control gets an equal track from the same
   auto-fit rule, so rows stay aligned and gaps stay equal at any width —
   this is what stops the filters overflowing and going ragged. */
.filterbar{display:grid;gap:var(--s3) var(--s3);align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(min(168px,100%),1fr));
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s4);box-shadow:var(--shadow)}
.filterbar .fg{display:flex;flex-direction:column;gap:5px;min-width:0}
/* The period chips always get their own full-width row above the controls. */
.filterbar .chiprow-wrap{grid-column:1/-1;padding-bottom:var(--s2);
  border-bottom:1px dashed var(--line)}
.filterbar .chiprow-wrap .filters{gap:var(--s2)}
.filterbar .chiprow-wrap .chip{border:1px solid var(--line)}
/* Apply/Reset sit together at the end of the grid and stay aligned with the
   inputs' baseline rather than floating on their own row. */
.filterbar .btn-fg{justify-content:flex-end}
.filterbar .btn-fg .btn{width:100%;justify-content:center}
.filterbar label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* width:100% + min-width:0 lets controls shrink inside their track instead of
   forcing the bar wider than the page. */
.filterbar select,.filterbar input{width:100%;min-width:0;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:var(--fs-sm);background:var(--surface);color:var(--ink);font-family:inherit;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.filterbar select:focus,.filterbar input:focus{outline:none;border-color:var(--blue-400);
  box-shadow:0 0 0 3px rgba(36,132,199,.13)}
/* On phones stack to two tracks so labels stay readable. */
@media(max-width:560px){
  .filterbar{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}
}

/* Inline mini-filter (e.g. Recent Reports header) */
.minifilter{display:flex;gap:8px;align-items:center}
.minifilter select{padding:7px 10px;border:1px solid var(--line);border-radius:9px;font-size:12.5px;
  background:var(--surface);color:var(--ink-2);font-family:inherit;font-weight:600}
.minifilter select:focus{outline:none;border-color:var(--blue-400)}

/* ------------------------------------------------- AI Analyst (ChatGPT-style) */
.ai-wrap{max-width:780px;margin:0 auto;min-height:calc(100vh - 170px);display:flex;flex-direction:column}
.ai-chat{display:flex;flex-direction:column;gap:22px;padding:10px 0 20px;flex:1}
.ai-msg{display:flex;gap:12px;align-items:flex-start}
.ai-msg.user{justify-content:flex-end}
.ai-ava{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;margin-top:2px;
  box-shadow:0 3px 8px rgba(34,83,162,.28)}
.ai-msg.user .ai-b{max-width:78%;border-radius:18px;padding:12px 17px;font-size:14.5px;line-height:1.5;
  background:var(--grad);color:#fff;border-bottom-right-radius:5px}
.ai-msg.bot{align-items:flex-start}
.ai-msg.bot .ai-b{flex:1;min-width:0;font-size:14.5px;line-height:1.6;color:var(--ink);padding-top:3px}
.ai-answer b{color:var(--blue-600)}

/* Welcome state */
.ai-welcome{text-align:center;padding:8vh 10px 4vh;margin:auto}
.ai-heroava{width:56px;height:56px;border-radius:16px;background:var(--grad);color:#fff;font-size:28px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 10px 26px rgba(34,83,162,.3)}
.ai-welcome h2{font-family:var(--font-brand);font-size:23px;font-weight:800;color:var(--ink);margin:0 0 8px;letter-spacing:-.3px}
.ai-welcome p{color:var(--muted);font-size:14px;margin:0 auto 26px;max-width:460px}
.ai-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;margin:0 auto}
@media(max-width:560px){.ai-cards{grid-template-columns:1fr}}
.ai-card{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 16px;cursor:pointer;
  transition:all .16s var(--ease);font-family:inherit}
.ai-card:hover{border-color:var(--blue-400);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.ai-card b{display:block;font-size:14px;color:var(--ink);margin-bottom:3px}
.ai-card span{font-size:12.5px;color:var(--muted)}

/* Two-column layout: chat + history panel */
.ai-layout{display:flex;gap:22px;align-items:flex-start}
.ai-layout .ai-wrap{flex:1;min-width:0}
.ai-history{width:252px;flex-shrink:0;position:sticky;top:80px;max-height:calc(100vh - 104px);
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:12px;box-shadow:var(--shadow)}
.ai-newchat{display:block;text-align:center;background:var(--grad);color:#fff;font-weight:700;font-size:13px;
  padding:10px;border-radius:10px;margin-bottom:12px;box-shadow:0 4px 12px rgba(34,83,162,.22)}
.ai-newchat:hover{filter:brightness(1.05)}
.ai-histlabel{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);margin:2px 6px 8px}
.ai-histlist{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:2px}
.ai-histitem{display:flex;align-items:center;border-radius:9px}
.ai-histitem:hover,.ai-histitem.active{background:var(--blue-050)}
.ai-histitem a{flex:1;min-width:0;padding:9px 10px;font-size:13px;color:var(--ink-2);font-weight:550;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-histitem.active a{color:var(--blue-600);font-weight:700}
.ai-histitem form{margin:0}
.ai-histitem button{background:none;border:none;color:var(--faint);font-size:17px;cursor:pointer;padding:4px 9px;line-height:1;opacity:0}
.ai-histitem:hover button{opacity:1}
.ai-histitem button:hover{color:var(--red)}
.ai-histempty{font-size:12.5px;color:var(--faint);padding:10px 8px}
@media(max-width:1000px){.ai-history{display:none}}
.ai-answer ul{margin:8px 0;padding-left:20px}
.ai-answer code,.ai-sql code{background:var(--surface-3);color:var(--blue-600);padding:1px 6px;border-radius:5px;font-size:12.5px}
.ai-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}
.ai-kpi{background:var(--grad-soft);border:1px solid var(--blue-100);border-radius:12px;padding:13px 15px}
.ai-kpi .v{font-family:var(--font-brand);font-size:22px;font-weight:800;color:var(--blue-600);letter-spacing:-.5px}
.ai-kpi .l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-top:3px}
.ai-kpi .s{font-size:11px;color:var(--faint);margin-top:2px}
.ai-tabletitle{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.ai-table{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ai-table th{background:var(--surface-2);padding:9px 12px}
.ai-table td{padding:9px 12px}
.ai-heat td{text-align:center}
.ai-chartbox{height:260px;margin:6px 0 4px}
.ai-explain{margin-top:16px;border-top:1px dashed var(--line);padding-top:12px;font-size:13px;color:var(--ink-2)}
.ai-explain summary{cursor:pointer;font-weight:700;color:var(--muted);list-style:none;display:flex;align-items:center;gap:10px}
.ai-explain summary::-webkit-details-marker{display:none}
.ai-explain>div{margin-top:8px}
.ai-explain ul{margin:6px 0;padding-left:20px}
.ai-conf{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:2px 9px;border-radius:20px}
.ai-conf.green{background:#e6f6ec;color:var(--green)} .ai-conf.amber{background:#fdf1e3;color:var(--amber)}
.ai-conf.red{background:#fbe9e9;color:var(--red)} .ai-conf.muted{background:#eef1f5;color:var(--muted)}
.ai-based{margin-top:10px !important;font-size:12.5px;color:var(--muted)}
.ai-xsec{margin-top:10px !important}
.ai-xsec>b{color:var(--ink-2)}
.ai-risk{display:grid;grid-template-columns:1fr;gap:6px;margin-top:6px}
.ai-risk .rk{position:relative;padding:8px 10px 8px 74px;border-radius:8px;font-size:12.5px;line-height:1.45;background:var(--surface-2);border:1px solid var(--line)}
.ai-risk .rk span{position:absolute;left:10px;top:8px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:20px}
.ai-risk .rk.best span{background:#e6f6ec;color:var(--green)}
.ai-risk .rk.exp span{background:#eef1f5;color:var(--muted)}
.ai-risk .rk.worst span{background:#fbe9e9;color:var(--red)}
.ai-sqltoggle{margin-top:8px}
.ai-sqltoggle summary{cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--faint);list-style:none}
.ai-sqltoggle summary::-webkit-details-marker{display:none}
.ai-sqltoggle summary::before{content:"⌗ ";}
.ai-sql{margin-top:8px;font-size:12px;color:var(--muted)}
.ai-sql code{display:inline-block;margin:2px 0}

.ai-answer .ai-h{font-weight:800;font-size:15px;margin:10px 0 4px;color:var(--ink)}
.ai-answer .ai-h:first-child{margin-top:0}

/* ---- Progressive reveal: the answer "writes" itself, then charts draw ---- */
.rvw{opacity:0}
.rvw.on{opacity:1;transition:opacity .12s ease}
.ai-caret{display:inline-block;width:6px;height:1.02em;margin-left:2px;vertical-align:-2px;
  border-radius:1px;background:var(--gold,#c8a24a);animation:aiBlink .9s steps(1,end) infinite}
@keyframes aiBlink{50%{opacity:0}}
.ai-rest.pending{opacity:0}
@keyframes aiFadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.ai-rest.reveal>*{animation:aiFadeUp .5s both}
.ai-rest.reveal>*:nth-child(1){animation-delay:.02s}
.ai-rest.reveal>*:nth-child(2){animation-delay:.11s}
.ai-rest.reveal>*:nth-child(3){animation-delay:.20s}
.ai-rest.reveal>*:nth-child(4){animation-delay:.29s}
.ai-rest.reveal>*:nth-child(5){animation-delay:.38s}
.ai-rest.reveal>*:nth-child(n+6){animation-delay:.46s}
@media (prefers-reduced-motion: reduce){
  .rvw{opacity:1;transition:none} .ai-caret{display:none}
  .ai-rest.pending{opacity:1} .ai-rest.reveal>*{animation:none}
}
.ai-input{position:sticky;bottom:0;background:linear-gradient(to top,var(--bg) 72%,rgba(243,246,251,0));padding:6px 0 10px}
.ai-inputbar{display:flex;align-items:flex-end;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:26px;padding:7px 8px 7px 18px;box-shadow:0 6px 20px rgba(21,45,90,.09)}
.ai-inputbar:focus-within{border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(36,132,199,.13)}
.ai-inputbar textarea{flex:1;resize:none;border:none;outline:none;background:transparent;padding:9px 0;
  font-family:inherit;font-size:15px;line-height:1.5;max-height:160px;color:var(--ink)}
.ai-send{flex-shrink:0;width:38px;height:38px;border-radius:50%;border:none;background:var(--grad);color:#fff;
  font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:filter .15s var(--ease)}
.ai-send:hover{filter:brightness(1.08)} .ai-send:disabled{opacity:.5;cursor:default}
.ai-disclaimer{text-align:center;font-size:11px;color:var(--faint);margin-top:8px}
.ai-dots i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue-400);margin-right:3px;
  animation:aibounce 1.2s infinite ease-in-out}
.ai-dots i:nth-child(2){animation-delay:.15s}.ai-dots i:nth-child(3){animation-delay:.3s}
@keyframes aibounce{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* ---------------------------------------------------- Deal calculator (dark) */
.calc{background:#0f1626;border:1px solid #1e2b44;border-radius:18px;overflow:hidden;
  box-shadow:0 18px 50px rgba(8,15,30,.35);color:#e7eef9}
.calc-tabs{display:flex;gap:4px;padding:14px 16px 0;background:#0c1220}
.calc-tabs .ctab{background:transparent;border:none;color:#8aa0bd;font-weight:700;font-size:13px;
  padding:11px 20px;border-radius:10px 10px 0 0;cursor:pointer;font-family:var(--font-brand)}
.calc-tabs .ctab.active{background:#0f1626;color:#fff}
.calc-panel{padding:22px}
.calc-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:22px}
@media(max-width:860px){.calc-grid{grid-template-columns:1fr}}
.calc-inputs{background:#111a2c;border:1px solid #1e2b44;border-radius:14px;padding:18px}
.ci{margin-bottom:15px}
.ci:last-child{margin-bottom:0}
.ci label{display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:#8aa0bd;margin-bottom:7px}
.ci .hint2{text-transform:none;letter-spacing:0;color:#61789b;font-weight:500;margin-left:6px}
.ci input[type=number]{width:100%;padding:11px 13px;border:1px solid #26344f;border-radius:10px;
  background:#0c1424;color:#fff;font-size:15px;font-weight:600;font-family:inherit}
.ci input[type=number]:focus{outline:none;border-color:#2484c7;box-shadow:0 0 0 3px rgba(36,132,199,.2)}
.ci input[type=range]{width:100%;accent-color:#2fae6b}
.ci.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pillv{float:right;background:#173a2a;color:#5fe0a0;font-weight:800;font-size:12px;padding:2px 10px;border-radius:20px;text-transform:none;letter-spacing:0}
.disco{display:grid;gap:8px}
.disco label{display:flex;align-items:center;gap:9px;font-size:13px;color:#c7d3e6;text-transform:none;
  letter-spacing:0;font-weight:500;margin:0}
.disco input{width:16px;height:16px;accent-color:#2fae6b}
.calc-out{background:#111a2c;border:1px solid #1e2b44;border-radius:14px;padding:20px}
.bigrow{display:flex;align-items:stretch;gap:18px;margin-bottom:18px}
.bigrow .sep{width:1px;background:#24314c}
.bigrow .big{flex:1}
.big .k{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#8aa0bd;margin-bottom:6px}
.big .v{font-family:var(--font-brand);font-size:34px;font-weight:800;letter-spacing:-1px;color:#fff}
.big .v.green{color:#4fd28a}
.big .v.red{color:#f2795f}
.chartbox2{height:210px;margin:6px 0 14px}
.miniout{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.miniout .mo{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#0c1424;
  border:1px solid #1e2b44;border-radius:10px;padding:11px 13px;font-size:13px;color:#a9b8d0}
.miniout .mo b{color:#fff;font-weight:700}
.miniout .mo b.green{color:#4fd28a}
.offer-ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.offer-ladder .ol{background:#0c1424;border:1px solid #1e2b44;border-radius:12px;padding:14px;text-align:center}
.offer-ladder .ol span{display:block;font-size:11px;color:#8aa0bd;text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin-bottom:6px}
.offer-ladder .ol b{font-family:var(--font-brand);font-size:20px;font-weight:800;color:#fff}
.offer-ladder .ol.hi{background:#123227;border-color:#1e5a3d}
.offer-ladder .ol.hi b{color:#4fd28a}
.calc .b.green{color:#4fd28a} .calc .b.red{color:#f2795f}

/* --------------------------------------------------- HR action row accents */
tr[class^="cat-"] td:first-child{box-shadow:inset 3px 0 0 var(--muted)}
tr.cat-Strike td:first-child,tr.cat-Written td:first-child,tr.cat-Deduction td:first-child{box-shadow:inset 3px 0 0 var(--red)}
tr.cat-Verbal td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
tr.cat-Excuse td:first-child,tr.cat-Allowance td:first-child{box-shadow:inset 3px 0 0 var(--green)}
tr[class^="cat-"] select,tr[class^="cat-"] input[type=date],tr[class^="cat-"] input[name=notes]{
  padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;background:var(--surface)}

/* --------------------------------------------------------------- Excuse form */
.excuse-form{display:flex;align-items:center;gap:6px;white-space:nowrap}
.excuse-form input[type=number],.excuse-form input[name=excuse_reason]{padding:6px 8px;border:1px solid var(--line);
  border-radius:8px;font-size:12px;font-family:inherit;background:var(--surface)}
.excuse-chk{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);font-weight:600}
.excuse-chk input{width:15px;height:15px}

/* ------------------------------------------------------------ Tag pickers */
.tagpick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:4px 0}
.tagpick .tag{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:22px;
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);font-weight:650;font-size:13px;
  cursor:pointer;transition:all .15s var(--ease);user-select:none}
.tagpick .tag:hover{border-color:var(--blue-400);color:var(--blue-600)}
.tagpick .tag.sel{background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 6px 14px rgba(34,83,162,.26)}
.tagpick .tag.tag-other{border-style:dashed;color:var(--muted)}
.tagpick .tag.tag-other.sel{color:#fff;border-style:solid}

/* --------------------------------------------------------------- Role chips */
.rolechips{display:flex;gap:6px;flex-wrap:wrap}
.rolechip{display:inline-block;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:20px;
  background:var(--blue-050);color:var(--blue-600);white-space:nowrap;line-height:1.35;
  border:1px solid rgba(34,83,162,.10)}
.rolechip.lm{background:#f4edfc;color:#6d38ac;border-color:rgba(122,65,184,.14)}
.rolechip.other{background:#eef1f6;color:var(--ink-2);border-color:var(--line)}
a.rolechip.filterchip{cursor:pointer;transition:all .15s var(--ease)}
a.rolechip.filterchip:hover{filter:brightness(.97);box-shadow:0 2px 8px rgba(34,83,162,.18)}
a.rolechip.filterchip.sel{box-shadow:0 0 0 2px var(--blue-400);font-weight:800}
.rolechip.sel{box-shadow:0 0 0 2px var(--blue-400);font-weight:800}

/* -------------------------------------------------- Multi-select role picks */
.rolegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
.rolepick{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 12px;cursor:pointer;transition:border-color .15s var(--ease)}
.rolepick:hover{border-color:var(--blue-400)}
.rolepick input{width:16px;height:16px}
.rolepick .rn{font-weight:650;font-size:13px}
.rolepick .rr{font-size:11px;color:var(--muted)}

/* ---------------------------------------------------------- Traffic lights */
.lights{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.light{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:17px 19px;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.light:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.dot{width:34px;height:34px;border-radius:50%;flex-shrink:0;position:relative}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;animation:pulse 1.8s ease-out infinite}
.dot.green{background:#1f9d55}.dot.green::after{box-shadow:0 0 0 0 rgba(31,157,85,.5)}
.dot.amber{background:#e0a422}.dot.amber::after{box-shadow:0 0 0 0 rgba(224,164,34,.5)}
.dot.red{background:#d64545}.dot.red::after{box-shadow:0 0 0 0 rgba(214,69,69,.5)}
@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor;opacity:.5}70%{box-shadow:0 0 0 12px transparent;opacity:0}100%{opacity:0}}
.light .lv{font-size:23px;font-weight:780;letter-spacing:-.5px}
.light .ll{font-size:12px;color:var(--muted);font-weight:600}
.light .lt{font-size:10px;color:var(--faint)}

/* --------------------------------------------------------------- Chart cards */
/* auto-fit + minmax means the grid reflows on available space rather than at
   one hardcoded breakpoint, so it works at 1366 and 2560 alike. */
.chartgrid{display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
/* Balanced 2x2 rather than 3+1 with an orphan. */
@media(min-width:1040px){.chartgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Canonical Chart.js responsive pattern: a relatively-positioned parent with
   a real height, and maintainAspectRatio:false. The canvas is NOT absolutely
   positioned — combining `inset` with `width/height:100%!important` gave the
   canvas a containing block it did not fit, and Chart.js read a zero-height
   drawing buffer on re-render, blanking the chart. Height is fluid so charts
   still scale with the viewport and under zoom. */
.chartbox{position:relative;width:100%;padding:var(--s2) var(--s1);
  height:clamp(230px,26vh,330px)}
.chartbox canvas{display:block}
.bar-anim{transition:width 1s cubic-bezier(.22,1,.36,1)}

/* ----------------------------------------------- To-dos, calendar, bell */
.t-blue{--tc:#2484c7}.t-green{--tc:#1f9d55}.t-amber{--tc:#d9822b}
.t-red{--tc:#d64545}.t-purple{--tc:#7a41b8}.t-gray{--tc:#6b7a91}
.color-pick{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-family:inherit;font-size:13px;background:var(--surface)}
.color-pick.sm{padding:5px 7px;font-size:12px}
.todo-add{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.todo-add input[name=title]{flex:1;min-width:200px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-family:inherit;font-size:14px}
.todo-add input[type=date]{padding:9px 10px;border:1px solid var(--line);border-radius:9px;font-family:inherit}
.todo-list{display:flex;flex-direction:column;gap:9px}
.todo{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-left:4px solid var(--tc);
  border-radius:11px;padding:10px 13px;background:var(--surface);transition:box-shadow .15s var(--ease)}
.todo:hover{box-shadow:var(--shadow)}
.todo.is-done{opacity:.62}
.todo.is-done .todo-title{text-decoration:line-through;color:var(--muted)}
.todo-check{width:25px;height:25px;border-radius:7px;border:2px solid var(--tc);background:var(--surface);color:var(--tc);
  cursor:pointer;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.todo.is-done .todo-check{background:var(--tc);color:#fff}
.todo-body{flex:1;min-width:0}
.todo-title{font-weight:600;font-size:14px;color:var(--ink)}
.todo-due{font-size:11.5px;color:var(--muted);margin-top:1px}
.todo-del{background:none;border:none;color:var(--faint);font-size:19px;line-height:1;cursor:pointer;padding:2px 6px}
.todo-del:hover{color:var(--red)}
.tk{margin:0;display:inline-flex}
/* team board */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.team-card .hd{padding:13px 16px}
.tt{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.tt:last-child{border:none}
.tt-dot{width:9px;height:9px;border-radius:50%;background:var(--tc);flex-shrink:0}
.tt-title{flex:1;min-width:0;color:var(--ink)}
.tt.is-done .tt-title{text-decoration:line-through;color:var(--muted)}
.tt-done{color:var(--green);font-weight:800}
.tt-check{width:22px;height:22px;border-radius:6px;border:2px solid var(--tc);background:var(--surface);color:var(--tc);
  cursor:pointer;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tt.is-done .tt-check{background:var(--tc);color:#fff}
.tt-del{background:none;border:none;color:var(--faint);font-size:16px;cursor:pointer;padding:0 4px;line-height:1}
.tt-del:hover{color:var(--red)}
.tt-add{display:flex;gap:6px;margin-top:10px;align-items:center}
.tt-add input[name=title]{flex:1;min-width:0;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;font-family:inherit}
.live-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--green)}
.live-dot i{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}
.live-dot.pulse i{animation:pulse 1s}
/* calendar */
.cal-head{display:flex;align-items:center;gap:12px}
.cal-month{font-family:var(--font-brand);font-size:18px;font-weight:800;margin:0;color:var(--ink)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-wd{text-align:center;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:4px}
.cal-cell{min-height:98px;border:1px solid var(--line);border-radius:9px;padding:6px;cursor:pointer;background:var(--surface);overflow:hidden}
.cal-cell:hover{border-color:var(--blue-400)}
.cal-cell.out{background:var(--surface-2);opacity:.55}
.cal-cell.today{border-color:var(--blue-400);box-shadow:0 0 0 2px rgba(36,132,199,.18)}
.cal-day{font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:4px}
.cal-cell.today .cal-day{color:var(--blue-600)}
.cal-ev{position:relative;display:block;font-size:11px;border-left:3px solid var(--tc);background:var(--surface-3);
  border-radius:5px;padding:3px 16px 3px 6px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.cal-evdel{display:none;position:absolute;right:1px;top:0;margin:0}
.cal-ev:hover .cal-evdel{display:block}
.cal-evdel button{background:none;border:none;color:var(--red);cursor:pointer;font-size:13px;padding:0 4px}
.remind-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.remind-chk input{width:16px;height:16px}
/* reminder bell */
.bellbox{position:relative}
.bell{background:var(--surface);border:1px solid var(--line);border-radius:10px;width:38px;height:38px;font-size:16px;cursor:pointer;position:relative}
.bell:hover{border-color:var(--blue-400)}
.bell-badge{position:absolute;top:-6px;right:-6px;background:var(--muted);color:#fff;font-size:10px;font-weight:800;
  min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.bell-badge.due{background:var(--red)}
.bell-drop{position:absolute;right:0;top:46px;width:300px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:8px;display:none;z-index:60}
.bell-drop.open{display:block}
.bell-hd{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:6px 8px}
.bell-item{border-left:3px solid var(--tc);background:var(--surface-2);border-radius:8px;padding:8px 10px;margin-bottom:4px}
.bell-item.od{background:#fdf0f0}
.bell-t{font-size:13px;font-weight:650;color:var(--ink)}
.bell-w{font-size:11.5px;color:var(--muted)}
.bell-empty{font-size:12.5px;color:var(--faint);padding:12px 10px;text-align:center}
.bell-all{display:block;text-align:center;font-size:12px;font-weight:700;color:var(--blue-600);padding:9px;border-top:1px solid var(--line);margin-top:4px}

/* ---------------------------------------------- Asana-style task slide-over */
.tp-open{cursor:pointer}
.todo-body.tp-open:hover .todo-title{color:var(--blue-600)}
/* Split view: the panel docks on the right and the board stays visible/usable */
.task-overlay{position:fixed;top:0;right:0;height:100%;z-index:1000;display:none}
.task-overlay.open{display:block}
.task-panel{width:min(520px,100vw);height:100%;background:var(--surface);border-left:1px solid var(--line);
  box-shadow:-14px 0 40px rgba(20,30,50,.10);display:flex;flex-direction:column;animation:tpSlide .2s ease}
@keyframes tpSlide{from{transform:translateX(24px);opacity:.5}to{transform:none;opacity:1}}
.content{transition:padding-right .2s ease}
body.task-open .content{padding-right:520px}
@media(max-width:900px){
  body.task-open .content{padding-right:0}
  .task-overlay{left:0;width:100%;background:rgba(20,30,50,.4);justify-content:flex-end}
  .task-overlay.open{display:flex}
}
.tp-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line)}
.tp-complete{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 13px;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink-2)}
.tp-complete.is-done{background:#e6f6ec;border-color:#bfe6cd;color:var(--green)}
.tp-close{border:0;background:none;font-size:18px;cursor:pointer;color:var(--muted);line-height:1}
.tp-body{padding:18px 20px 40px;overflow-y:auto;flex:1}
.tp-loading{color:var(--muted);padding:30px 0;text-align:center}
.tp-title{width:100%;font-size:22px;font-weight:800;border:1px solid transparent;border-radius:8px;padding:6px 8px;margin:-6px -8px 12px;color:var(--ink)}
.tp-title:hover{border-color:var(--line)} .tp-title:focus{border-color:var(--blue-600);outline:none}
.tp-meta{display:grid;gap:2px;margin-bottom:14px}
.tp-mrow{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:8px;padding:5px 0}
.tp-mk{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.tp-mv input,.tp-mv select{border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-size:13px;background:var(--surface)}
.tp-person{font-weight:700;color:var(--ink-2)}
.tp-sec{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.tp-label{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.tp-desc{width:100%;min-height:66px;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;font-size:13.5px;resize:vertical}
.tp-sub,.tp-dep,.tp-att{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13.5px}
.tp-sub.done span{text-decoration:line-through;color:var(--faint)}
.tp-dep.done span{color:var(--green)}
.tp-check{width:20px;height:20px;border:1.5px solid var(--line);border-radius:6px;background:var(--surface);cursor:pointer;color:var(--green);font-size:12px;line-height:1;flex:none}
.tp-sub.done .tp-check{background:#e6f6ec;border-color:#bfe6cd}
.tp-sub span,.tp-dep span,.tp-att a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-att a{color:var(--blue-600);text-decoration:none}
.tp-x{border:0;background:none;color:var(--faint);cursor:pointer;font-size:16px;flex:none}
.tp-x:hover{color:var(--red)}
.tp-add{display:flex;gap:7px;margin-top:8px}
.tp-add.col{flex-direction:column;align-items:stretch}
.tp-add input,.tp-add select,.tp-add textarea{flex:1;border:1px solid var(--line);border-radius:7px;padding:7px 9px;font:inherit;font-size:13px}
.tp-comments{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.tp-cmt{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.tp-cmt-h{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:3px}
.tp-cmt-h b{color:var(--ink-2)} .tp-cmt-b{font-size:13.5px;line-height:1.5}
.tp-none{font-size:13px;color:var(--faint);padding:2px 0}
.tp-activity{margin-top:18px;font-size:12.5px;color:var(--muted)}
.tp-activity summary{cursor:pointer;font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:12px}
.tp-act{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line)}
.tp-act em{color:var(--faint);font-style:normal;white-space:nowrap}
@media(max-width:640px){ .task-panel{width:100%} }

/* ------------------------------------------------------------- Kanban board */
.view-toggle{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-right:8px}
.view-toggle .vt{padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--muted);text-decoration:none;background:var(--surface)}
.view-toggle .vt.on{background:var(--blue-600);color:#fff}
.kanban{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding:6px 2px 20px;-webkit-overflow-scrolling:touch}
.kb-col{flex:0 0 300px;max-width:300px;background:#f2f5f9;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;max-height:calc(100vh - 220px)}
.kb-colhead{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--line);cursor:grab}
.kb-colname{font-weight:800;font-size:13.5px;color:var(--ink);outline:none;border-radius:5px;padding:1px 3px;flex:1}
.kb-colname[contenteditable]:hover{background:var(--surface)}
.kb-colname[contenteditable]:focus{background:var(--surface);box-shadow:0 0 0 2px var(--blue-600) inset}
.kb-count{font-size:11px;font-weight:800;color:var(--muted);background:#e4eaf2;border-radius:20px;padding:1px 8px;min-width:20px;text-align:center}
.kb-coldel button{border:0;background:none;color:var(--faint);cursor:pointer;font-size:16px;line-height:1}
.kb-coldel button:hover{color:var(--red)}
.kb-body{padding:10px;overflow-y:auto;flex:1;min-height:60px;display:flex;flex-direction:column;gap:9px}
.kb-body.kb-over{background:#e7eefb;border-radius:0 0 12px 12px;outline:2px dashed var(--blue-600);outline-offset:-6px}
.kb-card{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--blue-600);border-radius:9px;padding:10px 12px;cursor:grab;box-shadow:0 1px 3px rgba(20,30,50,.05);transition:box-shadow .15s ease, transform .1s ease}
.kb-card:hover{box-shadow:0 3px 10px rgba(20,30,50,.12);transform:translateY(-1px)}
.kb-card:active{cursor:grabbing}
.kb-card.dragging{opacity:.4;transform:scale(.98)}
.kb-card.selected{box-shadow:0 0 0 2px var(--blue-600);border-left-color:var(--blue-600)}
.kb-card.kb-new{animation:kbPop .24s ease}
@keyframes kbPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.kb-quickadd{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--line)}
.kb-quickadd input[name=title]{flex:1;border:1px solid transparent;border-radius:7px;padding:7px 9px;font:inherit;font-size:13px;background:transparent}
.kb-quickadd input[name=title]:hover{background:var(--surface);border-color:var(--line)}
.kb-quickadd input[name=title]:focus{background:var(--surface);border-color:var(--blue-600);outline:none}
.kb-qa-who{border:1px solid var(--line);border-radius:7px;font-size:12px;max-width:96px}
.kb-card.is-done{opacity:.62}
.kb-card.is-done .kb-cardtitle{text-decoration:line-through}
.kb-cardtitle{font-weight:600;font-size:14px;line-height:1.35;color:var(--ink)}
.kb-cardmeta{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:7px;font-size:11.5px;color:var(--muted)}
.kb-who{background:#eef2f7;border-radius:20px;padding:1px 8px;font-weight:700;color:var(--ink-2)}
.kb-card.t-blue{border-left-color:#2484c7} .kb-card.t-green{border-left-color:#1f9d55}
.kb-card.t-amber{border-left-color:#d9822b} .kb-card.t-red{border-left-color:#d64545}
.kb-card.t-purple{border-left-color:#7a41b8} .kb-card.t-gray{border-left-color:#8a97a8}
.kb-addcol{flex:0 0 220px}
.kb-addcolform{display:flex;gap:6px;background:#f2f5f9;border:1px dashed var(--line);border-radius:12px;padding:10px}
.kb-addcolform input{flex:1;border:1px solid var(--line);border-radius:7px;padding:7px 9px;font:inherit;font-size:13px}

/* --------------------------------------------------------------- Responsive */
@media(max-width:640px){
  .content{padding:18px 16px 40px}
  .topbar{padding:14px 16px}
  th,td{padding:11px 14px}
  .filterbar{gap:10px}
  .filterbar select,.filterbar input{min-width:120px}
  .kb-col{flex-basis:82vw;max-width:82vw}
}

/* keep manage-column buttons on one line */
.nowrap{white-space:nowrap}
td .btn.sm.danger{color:#c0392b}
td .btn.sm.danger:hover{background:#fdecea;border-color:#e6b0aa}

/* inline date editor in the activity table */
.inline-date{margin:0}
.inline-date input[type=date]{border:1px solid transparent;background:transparent;padding:4px 6px;border-radius:6px;font-weight:600;color:var(--ink);cursor:pointer}
.inline-date input[type=date]:hover{border-color:#cfe0f5;background:var(--surface-3)}
.inline-date input[type=date]:focus{border-color:#2484c7;background:var(--surface);outline:none}

/* ===== Account / prefs, automations, exports (v3) ===== */
.remember{display:flex;align-items:center;gap:8px;margin:10px 0;font-size:13px;color:var(--ink-2)}
.switch{display:flex;align-items:center;gap:9px;margin:8px 0 14px;font-weight:600;color:var(--ink)}
.ringlist{display:flex;flex-direction:column;gap:8px}
.ringopt{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.ringopt .rn{min-width:110px;font-weight:600;color:var(--ink)}
.ringopt:hover{background:var(--surface-2)}

/* automations */
.autoform .autostep{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;position:relative;background:var(--surface-2)}
.steptag{display:inline-block;font:700 11px system-ui;letter-spacing:.08em;padding:3px 9px;border-radius:20px;margin-bottom:8px;color:#fff}
.steptag.trig{background:#2484c7}.steptag.cond{background:#7c5cff}.steptag.act{background:#1f9d6b}
.autoform .condrow,.autoform .actrow{gap:8px}
.reference{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2)}
.reference b{color:var(--ink)}
.autolist{display:flex;flex-direction:column}
.autoitem{padding:14px 16px;border-bottom:1px solid var(--line)}
.autohead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.autoctl{display:flex;gap:6px;align-items:center}
.autodesc{margin-top:6px}
.btn.ghost.sm.danger{color:#c0392b}

/* fix: radios/checkboxes/file inputs must not stretch to 100% inside .field */
.ringopt{justify-content:flex-start;gap:12px}
.ringopt input[type=radio]{width:18px;height:18px;flex:0 0 auto;margin:0;accent-color:#2253a2}
.ringopt input[type=file]{width:auto;flex:1 1 auto}
.ringopt .rn{flex:0 0 110px}
.switch input,.remember input{width:16px;height:16px;flex:0 0 auto}

/* ===== Accessibility (v4) ===== */
.skip-link{position:absolute;left:-999px;top:0;z-index:10000;background:#2253a2;color:#fff;
  padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid #2484c7;outline-offset:2px;border-radius:4px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #2484c7;outline-offset:2px}

/* ============================================================= */
/* PREMIUM POLISH LAYER (v5) — additive refinements only.        */
/* ============================================================= */
:root{
  --wh-ease:cubic-bezier(.4,0,.2,1);
  --wh-shadow-sm:0 1px 2px rgba(16,38,74,.06),0 1px 3px rgba(16,38,74,.08);
  --wh-shadow-md:0 4px 12px rgba(16,38,74,.08),0 2px 4px rgba(16,38,74,.06);
  --wh-shadow-lg:0 12px 32px rgba(16,38,74,.14),0 4px 8px rgba(16,38,74,.08);
}
*{transition-property:background-color,border-color,color,box-shadow,transform,opacity;
  transition-duration:.16s;transition-timing-function:var(--wh-ease)}
/* don't animate layout-heavy or interactive text inputs distractingly */
input,textarea,select{transition:border-color .16s var(--wh-ease),box-shadow .16s var(--wh-ease)}

/* Buttons: subtle depth + tactile press */
.btn{box-shadow:var(--wh-shadow-sm);will-change:transform}
.btn:hover{transform:translateY(-1px);box-shadow:var(--wh-shadow-md);filter:brightness(1.02)}
.btn:active{transform:translateY(0);filter:brightness(.98)}
.btn.ghost{box-shadow:none}
.btn.ghost:hover{box-shadow:var(--wh-shadow-sm)}

/* Cards: softer elevation + gentle hover lift */
/* v5: elevation only — geometry lives in the base .card rule. */
.card{box-shadow:var(--wh-shadow-sm)}
.card:hover{box-shadow:var(--wh-shadow-md)}

/* Table rows: readable hover, smooth */
table tbody tr{transition:background-color .12s var(--wh-ease)}
table tbody tr:hover{background:#f3f8ff}

/* Badges / chips: crisper */
.badge,.rolechip,.chip{letter-spacing:.01em}
.badge{box-shadow:inset 0 0 0 1px rgba(16,38,74,.06)}

/* Flash messages -> floating toast feel */
.flash{border-radius:12px;box-shadow:var(--wh-shadow-md);animation:whToast .3s var(--wh-ease)}
@keyframes whToast{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Content fades in for a polished page transition */
.content{animation:whFade .22s var(--wh-ease)}
@keyframes whFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Refined custom scrollbars */
*{scrollbar-width:thin;scrollbar-color:#c3d3ea transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#c3d3ea;border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#a9c0e0;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* Nav links: smooth active indicator */
.nav a{transition:background-color .15s var(--wh-ease),color .15s var(--wh-ease),padding-left .15s var(--wh-ease)}
.nav a:hover{padding-left:calc(var(--nav-pad,14px) + 3px)}

/* Skeleton shimmer utility (for future loading states) */
.skeleton{background:linear-gradient(90deg,#eef2f8 25%,#f7fafe 37%,#eef2f8 63%);
  background-size:400% 100%;animation:whShimmer 1.4s ease infinite;border-radius:8px;color:transparent}
@keyframes whShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* Respect reduced-motion preferences (accessibility) */
@media (prefers-reduced-motion: reduce){
  *,.content,.flash{animation:none!important;transition:none!important}
  .btn:hover,.card:hover{transform:none!important}
}

/* ============================================================= */
/* PREMIUM VISIBLE LAYER (v6) — bolder, clearly noticeable, safe */
/* ============================================================= */
/* App backdrop: subtle depth instead of flat white */
body{background:linear-gradient(180deg,#f4f8fd 0%,#eef3fa 100%)}

/* Sidebar: richer brand gradient + crisp separation */
/* v6 gradient was fully overridden by the v8 one below; only the rail's
   separation shadow survives here. */
.sidebar{box-shadow:2px 0 24px rgba(15,37,71,.18)}
.sidebar .nav a{border-radius:10px;margin:2px 8px}
.sidebar .nav a.active{background:rgba(255,255,255,.12)!important;
  box-shadow:inset 3px 0 0 #4c8dff, 0 2px 8px rgba(0,0,0,.12)}

/* Topbar: elevated header bar */
/* Padding and the gap below the topbar are owned by the container system
   (.topbar + .content), so only the divider is declared here. */
.topbar{border-bottom:1px solid var(--line)}
.topbar h1{letter-spacing:-.02em}

/* Cards: defined, floating, premium */
/* v6: elevation only — border/radius live in the base .card rule. */
.card{box-shadow:0 1px 3px rgba(16,38,74,.06),0 8px 24px rgba(16,38,74,.06)}
.card:hover{box-shadow:0 2px 6px rgba(16,38,74,.08),0 16px 40px rgba(16,38,74,.12)}
.card .hd{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fbfdff,#f6f9fe)}

/* Primary + gold buttons: gradient depth */
.btn:not(.ghost):not(.gold){background:linear-gradient(180deg,#2a5fb0,#2253a2);
  box-shadow:0 2px 6px rgba(34,83,162,.28),inset 0 1px 0 rgba(255,255,255,.15)}
.btn:not(.ghost):not(.gold):hover{background:linear-gradient(180deg,#2f6abf,#2559ad)}
.btn.gold{background:linear-gradient(180deg,#2f8ad0,#2484c7);
  box-shadow:0 2px 8px rgba(36,132,199,.32),inset 0 1px 0 rgba(255,255,255,.2)}
.btn.gold:hover{background:linear-gradient(180deg,#369ae0,#2a8fd4)}

/* Tables: premium header + airy rows */
table thead th{background:linear-gradient(180deg,#f5f9fe,#eef4fc);
  text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:#557}
table thead th{color:#557; border-bottom:2px solid var(--line)}
table tbody td{border-bottom:1px solid #f0f4fa}
table tbody tr:hover{background:#eff6ff}

/* Badges/chips: pill polish */
.badge,.rolechip{border-radius:999px;padding:3px 11px;font-weight:600}

/* Stat/number emphasis */
.num b, .money-cell{font-variant-numeric:tabular-nums}

/* Inputs: refined focus ring */
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:0 0 0 3px rgba(36,132,199,.15)}

/* ===== White sidebar text + clickable logo (v7) ===== */
.sidebar .nav a{color:#ffffff!important}
.sidebar .nav a .ic{color:#cfe0f5!important;opacity:.95}
.sidebar .nav a:hover{color:#ffffff!important;background:rgba(255,255,255,.08)}
.sidebar .nav a.active{color:#ffffff!important}
.sidebar .foot{color:#c3d3ea!important;border-top-color:rgba(255,255,255,.12)!important}
.sidebar .foot b{color:#ffffff!important}
.sidebar .brand .txt b{color:#ffffff}
.sidebar .brand .txt .w2{color:#7db6f0}
.sidebar .brand .sub{color:#cfe0f5}
/* logo/brand is now a link — remove underline, show pointer */
a.brand{text-decoration:none;cursor:pointer;transition:opacity .15s ease}
a.brand:hover{opacity:.88}

/* ===== Sidebar: lighten a touch toward white (v8) ===== */
.sidebar{background:linear-gradient(185deg,#1e4a86 0%,#173d70 100%)!important}

/* ============================================================= */
/* Sidebar scroll fix (v9) — every nav item stays reachable at    */
/* any browser zoom / short viewport. The rail is pinned to the   */
/* viewport height and the nav list scrolls inside it, so the     */
/* brand stays at the top, the footer stays at the bottom, and    */
/* items like Audit Log / My Account are never clipped.           */
/* ============================================================= */
.layout{align-items:stretch}
.sidebar{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;overflow:hidden}
.sidebar .brand{flex:0 0 auto}
.sidebar .foot{flex:0 0 auto}
.sidebar .nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* thin, on-brand scrollbar that reads well on the dark rail */
.sidebar .nav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.sidebar .nav::-webkit-scrollbar{width:8px}
.sidebar .nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:8px;
  border:2px solid transparent;background-clip:content-box}
.sidebar .nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5);background-clip:content-box}
.sidebar .nav::-webkit-scrollbar-track{background:transparent}

/* ============================================================= */
/* EOD tally counter                                             */
/* ============================================================= */
.tally-bar{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.tally-title{font-family:var(--font-brand);font-size:18px;font-weight:800;color:var(--ink)}
.tally-switch{display:flex;flex-direction:column;gap:5px}
.tally-switch span{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
.tally-switch select{padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  color:var(--ink);font-family:inherit;font-weight:600;font-size:13px}
.tally-bar-right{margin-left:auto;display:flex;gap:10px;align-items:center}

.tally-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 16px 12px;display:flex;flex-direction:column;
  align-items:center;text-align:center;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.tcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.tcard-label{font-size:13px;font-weight:700;color:var(--ink-2);min-height:34px;display:flex;
  align-items:center;justify-content:center;gap:6px}
.tcard-unit{font-size:10px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.5px}
.tcard-val{font-family:var(--font-brand);font-size:40px;font-weight:800;line-height:1.05;
  color:var(--blue-600);letter-spacing:-1px;margin:6px 0 12px;font-variant-numeric:tabular-nums}
.tcard-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.tcard-btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:12px 0;font-size:20px;
  font-weight:800;color:var(--blue-600);cursor:pointer;line-height:1;user-select:none;
  transition:background .12s var(--ease),border-color .12s var(--ease),transform .06s}
.tcard-btn:hover{background:var(--blue-050);border-color:var(--blue-400)}
.tcard-btn:active{transform:scale(.96)}
.tcard-btn[data-delta="1"]{background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 4px 12px rgba(34,83,162,.22)}
.tcard-btn[data-delta="1"]:hover{filter:brightness(1.05)}

/* chooser */
.tally-choose{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:8px}
.tally-choose-card{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;transition:all .15s var(--ease)}
.tally-choose-card:hover{border-color:var(--blue-400);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.tally-choose-card .tc-ic{font-size:22px;color:var(--blue-500)}
.tally-choose-card b{font-family:var(--font-brand);font-size:16px;color:var(--ink)}
.tally-choose-card small{color:var(--muted);font-size:12px}

/* confirm modal */
.tally-modal{position:fixed;inset:0;background:rgba(20,30,50,.45);display:none;
  align-items:center;justify-content:center;z-index:1000;padding:20px}
.tally-modal.open{display:flex}
.tally-modal-card{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);width:100%;
  max-width:440px;padding:20px 22px;max-height:88vh;overflow:auto}
.tally-modal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.tally-modal-h b{font-family:var(--font-brand);font-size:16px;color:var(--ink)}
.tally-modal-f{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.tally-review{border-top:1px solid var(--line)}
.trev{display:flex;justify-content:space-between;align-items:center;padding:9px 2px;
  border-bottom:1px solid var(--line);font-size:13.5px}
.trev span{color:var(--ink-2)} .trev b{color:var(--blue-600);font-variant-numeric:tabular-nums}

/* builder */
.tb-settings{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;padding-bottom:8px;
  border-bottom:1px dashed var(--line);margin-bottom:12px}
.tb-addcard{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;
  padding-top:12px;border-top:1px dashed var(--line)}
.tb-addcard input,.tb-addcard select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:13px;background:var(--surface)}
.tally-dupwarn{background:#fdf1e3;border:1px solid #f3d7a8;color:#8a5a12;border-radius:10px;
  padding:10px 12px;font-size:12.5px;line-height:1.45;margin-bottom:12px}
.tally-dupwarn b{color:#6d4409}

/* ============================================================= */
/* Deal calculator — rebrand polish + approval + custom sections */
/* ============================================================= */
.calc{box-shadow:0 18px 50px rgba(8,15,30,.35),0 0 0 1px rgba(36,132,199,.12)}
.calc-tabs .ctab.active{box-shadow:inset 0 -2px 0 #2484c7}
/* shared property/notes block (dark, inside the calculator) */
.calc-deal{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;padding:18px 22px;border-bottom:1px solid #1e2b44;background:#0c1220}
@media(max-width:860px){.calc-deal{grid-template-columns:1fr}}
.calc-deal .ci{margin:0}
.calc-deal label{display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#8aa0bd;margin-bottom:7px}
.calc-deal input,.calc-deal textarea{width:100%;padding:11px 13px;border:1px solid #26344f;border-radius:10px;
  background:#0c1424;color:#fff;font-size:14px;font-family:inherit;resize:vertical}
.calc-deal input:focus,.calc-deal textarea:focus{outline:none;border-color:#2484c7;box-shadow:0 0 0 3px rgba(36,132,199,.2)}

/* custom sections (light cards, on the page) */
.calc-extra{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 18px}
.calc-extra-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.calc-extra-head b{font-family:var(--font-brand);font-size:15px;color:var(--ink)}
.calc-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.calc-inline input,.calc-inline select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:13px;background:var(--surface)}
.calc-usersec{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:12px;background:var(--surface-2)}
.calc-usersec-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.calc-usersec-h b{font-family:var(--font-brand);font-size:14px;color:var(--ink)}
.calc-usersec-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;align-items:end}
.calc-usersec-fields .ci{margin:0}
.calc-usersec-fields label{display:block;font-size:12px;font-weight:650;color:var(--ink-2);margin-bottom:5px}
.calc-usersec-fields input,.calc-usersec-fields textarea{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;font-family:inherit;font-size:13px;background:var(--surface)}
.cf-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);font-weight:600}
.linkx{background:none;border:none;color:var(--faint);cursor:pointer;font-size:15px;line-height:1;padding:0 3px}
.linkx:hover{color:var(--red)}
.calc-usersec-fields form.calc-inline{grid-column:1/-1;padding-top:4px;border-top:1px dashed var(--line)}

/* approval action bar */
.calc-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;margin:18px 0 4px}
.calc-actions-note{color:var(--muted);font-size:12.5px}
.calc-actions .btn{font-size:14px;padding:12px 22px}

/* tally card ⋮ menu + oversight */
.tcard{position:relative}
.tcard-menu-btn{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--faint);
  font-size:18px;line-height:1;cursor:pointer;padding:2px 7px;border-radius:6px}
.tcard-menu-btn:hover{background:var(--blue-050);color:var(--blue-600)}
.tcard-menu{position:absolute;z-index:200;min-width:214px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;display:none}
.tcard-menu.open{display:block}
.tcard-menu button,.tcard-menu a{display:block;width:100%;text-align:left;background:none;border:none;
  padding:9px 11px;font-size:13px;color:var(--ink-2);border-radius:7px;cursor:pointer;text-decoration:none;font-family:inherit}
.tcard-menu button:hover,.tcard-menu a:hover{background:var(--blue-050);color:var(--blue-600)}

/* Deal calculator — full brand-blue recolor + logo header */
.calc-brandhead{display:flex;align-items:center;gap:13px;padding:15px 22px;border-bottom:1px solid #1e2b44;
  background:linear-gradient(90deg,#0c1220,#0f1f36)}
.calc-brandhead img{height:32px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(36,132,199,.45))}
.calc-brandhead b{color:#fff;font-family:var(--font-brand);font-size:16px;font-weight:800;display:block;line-height:1.15;letter-spacing:.2px}
.calc-brandhead span{color:#8aa0bd;font-size:12px}
.calc .big .v#w_mao,.calc .big .v#n_mao{color:#5fb0ef}
.calc .miniout b#w_mao2{color:#5fb0ef}
.calc-tabs .ctab.active{background:#0f1626;color:#fff;box-shadow:inset 0 -2px 0 #2484c7}
.ci input[type=range]{accent-color:#2484c7}
.pillv{background:#123a5e;color:#7dc0f5}
.offer-ladder .ol.hi{background:#0f2740;border-color:#1e5a86}
.offer-ladder .ol.hi b{color:#5fb0ef}

/* calculator: land dropdowns + gate + 3rd MAO */
.calc-inputs select{width:100%;padding:11px 13px;border:1px solid #26344f;border-radius:10px;
  background:#0c1424;color:#fff;font-size:14px;font-family:inherit}
.calc-inputs select:focus{outline:none;border-color:#2484c7;box-shadow:0 0 0 3px rgba(36,132,199,.2)}
.land-gate{display:grid;gap:7px}
.land-gate .lg{display:grid;grid-template-columns:1fr 118px;align-items:center;gap:10px;font-size:12.5px;color:#c7d3e6}
.land-gate .lg select{padding:7px 9px;font-size:12.5px}
.calc .big .v#l_mao{color:#5fb0ef}
.big .v#w_dec,.big .v#n_dec,.big .v#l_dec{font-size:20px;line-height:1.15}
#l_warn{font-weight:600}

/* ============================================================= */
/* Deal calculator — LIGHT Winner Houses brand theme            */
/* (overrides the legacy dark calc styling to match the CRM)    */
/* ============================================================= */
.calc{background:var(--surface)!important;border:1px solid var(--line)!important;
  box-shadow:var(--shadow-lg),0 0 0 3px rgba(36,132,199,.06)!important}
.calc-brandhead{background:linear-gradient(90deg,#f4f8fd,#eaf2fb)!important;border-bottom:1px solid var(--line)!important}
.calc-brandhead img{filter:none!important}
.calc-brandhead b{color:var(--ink)!important}
.calc-brandhead span{color:var(--muted)!important}
.calc-tabs{background:var(--surface-2)!important;border-bottom:1px solid var(--line);padding:12px 16px 0}
.calc-tabs .ctab{color:var(--muted)!important;background:transparent!important}
.calc-tabs .ctab.active{background:var(--surface)!important;color:var(--blue-600)!important;
  box-shadow:inset 0 -2px 0 var(--blue-400)!important}
.calc-deal{background:var(--surface-2)!important;border-bottom:1px solid var(--line)!important}
.calc-deal label{color:var(--muted)!important}
.calc-deal input,.calc-deal textarea{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important}
.calc-inputs{background:var(--surface-2)!important;border:1px solid var(--line)!important}
.calc-out{background:var(--surface)!important;border:1px solid var(--line)!important}
.ci label{color:var(--muted)!important}
.ci input,.calc-inputs select{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important}
.ci input:focus,.calc-inputs select:focus,.calc-deal input:focus,.calc-deal textarea:focus{
  border-color:var(--blue-400)!important;box-shadow:0 0 0 3px rgba(36,132,199,.15)!important}
.ci .hint2{color:var(--faint)!important}
.pillv{background:var(--blue-050)!important;color:var(--blue-600)!important}
.disco label,.land-gate .lg{color:var(--ink-2)!important}
.ci input[type=range]{accent-color:var(--blue-500)!important}
.bigrow .sep{background:var(--line)!important}
.big .k{color:var(--muted)!important}
.big .v{color:var(--ink)!important}
.calc .big .v#w_mao,.calc .big .v#n_mao,.calc .big .v#l_mao{color:var(--blue-600)!important}
.big .v.green{color:var(--green)!important}
.miniout .mo{background:var(--surface-2)!important;border:1px solid var(--line)!important;color:var(--ink-2)!important}
.miniout .mo b{color:var(--ink)!important}
.offer-ladder .ol{background:var(--surface-2)!important;border:1px solid var(--line)!important}
.offer-ladder .ol span{color:var(--muted)!important}
.offer-ladder .ol b{color:var(--ink)!important}
.offer-ladder .ol.hi{background:var(--grad)!important;border-color:transparent!important}
.offer-ladder .ol.hi span{color:#dbe9fb!important}
.offer-ladder .ol.hi b{color:#fff!important}
.calc .b.green{color:var(--green)!important}
.calc .b.red{color:var(--red)!important}

/* ===== Deal Calculator: top tabs + AI chat (v9) ===== */
.topcalc-tabs{display:flex;gap:8px;margin-bottom:16px;border-bottom:2px solid var(--line);padding-bottom:0}
.tctab{appearance:none;border:none;background:transparent;font:600 14px system-ui,sans-serif;
  color:#66809e;padding:10px 18px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:8px 8px 0 0}
.tctab:hover{background:var(--surface-3);color:var(--ink)}
.tctab.active{color:#2253a2;border-bottom-color:#2484c7;background:var(--surface-3)}
.ai-note{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 12px}
.ai-badge{font:700 11px system-ui;padding:4px 10px;border-radius:999px;letter-spacing:.02em}
.ai-badge.live{background:#e6f7ef;color:#1f9d6b}
.ai-badge.est{background:#fff5e6;color:#b7791f}
.ai-badge.warn{background:#fdecea;color:#c0392b}
/* NOTE: these selectors are scoped to the legacy .ai-pane calculator chat.
   Left unscoped they leaked onto the Executive Intelligence page (/assistant),
   which shares the .ai-chat / .ai-msg class names, wrapping its chat in a
   340px bordered box and double-bubbling messages. */
.ai-pane .ai-chat{border:1px solid var(--line);border-radius:14px;background:var(--surface-2);padding:16px;min-height:340px;
  max-height:56vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.ai-pane .ai-msg{max-width:88%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.55;
  white-space:pre-wrap;word-wrap:break-word;box-shadow:0 1px 2px rgba(16,38,74,.05)}
.ai-pane .ai-msg.user{align-self:flex-end;background:linear-gradient(180deg,#2a5fb0,#2253a2);color:#fff;border-bottom-right-radius:4px}
.ai-pane .ai-msg.assistant{align-self:flex-start;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.ai-pane .ai-msg.thinking{color:#88a;font-style:italic}
.ai-empty{margin:auto;color:#8aa;text-align:center;font-size:13px;max-width:420px}
.ai-inbar{display:flex;gap:10px;align-items:flex-end;margin-top:12px}
.ai-inbar textarea{flex:1;resize:vertical;min-height:46px;border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;font:inherit;font-size:14px;background:var(--surface)}
.ai-inbar textarea:focus{outline:none;border-color:#2484c7;box-shadow:0 0 0 3px rgba(36,132,199,.15)}
.ai-btns{display:flex;flex-direction:column;gap:6px}
.ai-usecalc{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:#546b8a}
.ai-usecalc input{width:16px;height:16px}
.ai-actionrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}

/* ===== Deal Calculator: responsive split (v11) ===== */
.calc-split{display:block}
.calc-split > #toppane-ai{margin-top:20px}
@media (min-width:1200px){
  .calc-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:20px;align-items:start}
  .calc-split > #toppane-calc{grid-column:1;grid-row:1;margin:0;max-width:none}
  .calc-split > #toppane-ai{grid-column:2;grid-row:1;margin:0;position:sticky;top:14px}
  .calc-split > :not(#toppane-calc):not(#toppane-ai){grid-column:1 / -1}
  .calc-split #toppane-calc .calc-grid,.calc-split #toppane-calc .calc-deal{grid-template-columns:1fr !important}
  .calc-split #toppane-calc .miniout{grid-template-columns:1fr}
}
.calc-split > #toppane-ai.ai-pane{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;box-shadow:0 8px 24px rgba(16,38,74,.06)}
.ai-pane .ai-chat{max-height:56vh;min-height:300px}
/* clean markdown rendering inside AI messages */
.ai-msg.assistant .ai-h{font-weight:700;color:var(--ink);margin:9px 0 3px;font-size:13.5px}
.ai-msg.assistant .ai-h:first-child{margin-top:0}
.ai-msg.assistant .ai-sp{height:6px}
.ai-msg.assistant ul{margin:3px 0;padding-left:18px}
.ai-msg.assistant li{margin:2px 0;line-height:1.5}
.ai-msg.assistant b{color:var(--ink);font-weight:700}
.offer-ladder{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){
  .ai-inbar{flex-direction:column;align-items:stretch}
  .ai-btns{flex-direction:row}
  .ai-toolbar{flex-wrap:wrap}
  .ai-pane .ai-chat{max-height:62vh}
  .offer-ladder{grid-template-columns:1fr}
}

/* ================================================================= */
/* PREMIUM POLISH PASS (v12) — proportions, spacing, hierarchy only.  */
/* No colors, no features, no flow, no structure changes.            */

/* ================================================================= */
/* DEAL CALCULATOR — dedicated 2-panel workspace (v14)               */
/* Primary: calculator (left). Assistant: AI copilot (right).        */
/* Scoped to the calculator page ONLY — the CRM is unchanged.        */
/* ================================================================= */
body[data-endpoint="calculator"] .main{height:100vh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body[data-endpoint="calculator"] .topbar{flex-shrink:0;margin-bottom:0;border-bottom:1px solid var(--line)}
body[data-endpoint="calculator"] .content{flex:1;min-height:0;overflow:hidden;padding:0;max-width:none;animation:none}

/* Two independent panels, side by side, each with its own scroll */
.ws{display:flex;height:100%;min-height:0}
.ws-left{flex:1 1 auto;min-width:0;overflow-y:auto;overflow-x:hidden;padding:20px 24px 40px;container-type:inline-size}
.ws-right{flex:0 0 var(--ws-right-w,34%);width:var(--ws-right-w,34%);max-width:none;min-width:300px;height:100%;
  border-left:1px solid var(--line);background:var(--surface-2);display:flex;flex-direction:column;overflow:hidden}

/* Draggable divider — resize the two panels widely */
.ws-resize{flex:0 0 8px;align-self:stretch;position:relative;cursor:col-resize;background:transparent;z-index:6;touch-action:none}
.ws-resize::before{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;background:var(--line);transition:background .12s,width .12s,left .12s}
.ws-resize:hover::before,.ws-resize.dragging::before{background:#2563eb;width:4px;left:2px}
.ws-resize::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:30px;border-radius:3px;background:var(--line)}
.ws-resize:hover::after,.ws-resize.dragging::after{background:#2563eb}
body.ws-resizing,body.ws-resizing *{cursor:col-resize!important;user-select:none!important}

/* Calculator sits flush at the top of its panel */
.ws-left .calc{margin-top:0}
@container (max-width:700px){ .ws-left .calc-grid,.ws-left .calc-deal{grid-template-columns:1fr} }

/* AI copilot: full-height panel — header fixed, chat scrolls, input pinned */
.ws-right .ai-pane{height:100%;display:flex;flex-direction:column;padding:0;border:none;border-radius:0;box-shadow:none;background:transparent}
.ws-right .ai-pane > .calc-brandhead{flex-shrink:0;margin:0;padding:13px 16px;border-bottom:1px solid var(--line)}
.ws-right .ai-toolbar{flex-shrink:0;margin:10px 16px 0}
.ws-right .ai-note{flex-shrink:0;margin:8px 16px}
.ws-right .ai-context{flex-shrink:0;margin:0 16px 8px}
.ws-right #aiChat{flex:1;min-height:0;max-height:none;overflow-y:auto;margin:0;padding:8px 16px;border:none;background:transparent;border-radius:0}
.ws-right .ai-inbar{flex-shrink:0;margin:0;padding:10px 16px;border-top:1px solid var(--line)}
.ws-right .ai-actionrow{flex-shrink:0;margin:0;padding:0 16px 14px}

/* Mobile / narrow: stack the panels, restore normal page scroll */
@media(max-width:1000px){
  body[data-endpoint="calculator"] .main{height:auto;overflow:visible}
  body[data-endpoint="calculator"] .content{overflow:visible}
  .ws{flex-direction:column;height:auto}
  .ws-resize{display:none}
  .ws-left{padding:16px}
  .ws-right{flex:none;width:100%;max-width:none;min-width:0;height:auto;border-left:none;border-top:1px solid var(--line)}
  .ws-right .ai-pane{height:auto}
  .ws-right #aiChat{max-height:56vh;min-height:280px}
}

/* ============================================================
   AI INVESTMENT MEMO (v16) — sections, KPI cards, callouts,
   collapsibles. Enterprise AI-copilot layout, not a table.
   ============================================================ */
/* When an assistant bubble holds a memo, break it out of the chat bubble. */
.ai-msg.assistant:has(.ai-memo){max-width:100%;width:100%;align-self:stretch;
  background:transparent;border:none;box-shadow:none;padding:0;white-space:normal;border-radius:0}
.ai-memo{display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--ink)}
.ai-memo b{color:var(--ink);font-weight:700}

/* Section shells */
.ai-memo .ai-sec{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,38,74,.04)}
.ai-memo .ai-sec-h{font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:#5a76a0;padding:11px 14px 0}
.ai-memo .ai-sec-b{padding:8px 14px 13px}
.ai-memo .ai-p{margin:4px 0;line-height:1.55}
.ai-memo .ai-ul{margin:4px 0;padding-left:18px}
.ai-memo .ai-ul li{margin:3px 0;line-height:1.5}

/* Collapsible sections (Market / Financial / Sources) */
.ai-memo details.ai-collap{padding:0}
.ai-memo details.ai-collap>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;padding:11px 14px;font-weight:800;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:#5a76a0;user-select:none}
.ai-memo details.ai-collap>summary::-webkit-details-marker{display:none}
.ai-memo details.ai-collap .ai-caret{transition:transform .15s;font-size:11px;color:#9db0cc}
.ai-memo details.ai-collap[open]>summary{border-bottom:1px solid var(--line)}
.ai-memo details.ai-collap[open] .ai-caret{transform:rotate(180deg)}
.ai-memo details.ai-collap .ai-sec-b{padding:10px 14px 13px}

/* KPI cards */
.ai-memo .ai-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:2px 0 2px}
.ai-memo .ai-kpi{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.ai-memo .ai-kpi-l{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#7488a8}
.ai-memo .ai-kpi-v{font-size:18px;font-weight:800;color:var(--ink);line-height:1.15;margin-top:2px;
  font-variant-numeric:tabular-nums}
.ai-memo .ai-kpi-n{font-size:11px;color:#6b7f9e;margin-top:2px}

/* Callout boxes: verdict / confidence / max offer / risk */
.ai-memo .ai-call{border-radius:11px;padding:10px 13px;border:1px solid var(--line);background:var(--surface-2)}
.ai-memo .ai-call-k{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;opacity:.8}
.ai-memo .ai-call-h{font-size:16px;font-weight:800;line-height:1.25;margin-top:1px}
.ai-memo .ai-call-s{font-size:12.5px;margin-top:3px;line-height:1.45;opacity:.92}
.ai-memo .ai-call.v-buy{background:#e9f9f0;border-color:#bfe9d1}
.ai-memo .ai-call.v-buy .ai-call-k{color:#0f7a48}
.ai-memo .ai-call.v-buy .ai-call-h{color:#0c7040}
.ai-memo .ai-call.v-neg{background:#fff6e6;border-color:#f4dfb0}
.ai-memo .ai-call.v-neg .ai-call-k{color:#a9720d}
.ai-memo .ai-call.v-neg .ai-call-h{color:#95640b}
.ai-memo .ai-call.v-pass{background:#fdecea;border-color:#f3c8c2}
.ai-memo .ai-call.v-pass .ai-call-k{color:#b5352a}
.ai-memo .ai-call.v-pass .ai-call-h{color:#a12a20}
.ai-memo .ai-call.c-offer{background:#eef3ff;border-color:#cdd9f5}
.ai-memo .ai-call.c-offer .ai-call-k{color:#2a52b8}
.ai-memo .ai-call.c-offer .ai-call-h{color:#1f3f95}
.ai-memo .ai-call.c-conf .ai-call-k{color:#5a76a0}
.ai-memo .ai-call.c-risk{background:#fdf3f2;border-color:#f4d4cf}
.ai-memo .ai-riskbox{padding:8px 13px}
.ai-memo .ai-riskbox .ai-ul{margin:2px 0;color:#8a3b32}
.ai-memo .ai-riskbox .ai-ul li{color:#7c3a30}

/* Recommendation section: lay verdict/confidence/offer callouts in a tidy stack */
.ai-memo .ai-sec .ai-call{margin:6px 0 0}
.ai-memo .ai-sec .ai-call:first-child{margin-top:2px}

@media (max-width:380px){ .ai-memo .ai-kpis{grid-template-columns:1fr} }

/* ============================================================
   ENTERPRISE POLISH (v17) — Deal Calculator page only.
   Chrome, states, density & consistency. Scoped so the rest of
   the CRM is untouched.
   ============================================================ */
body[data-endpoint="calculator"]{
  --line:#e6edf7; --line-soft:#eef2f9;
  --ink:#12233f; --muted:#64789b; --brand:#2253a2; --brand-ink:#1f3f95;
}

/* ---- AI panel header ---- */
body[data-endpoint="calculator"] .ws-right .calc-brandhead{display:flex;align-items:center;gap:11px}
body[data-endpoint="calculator"] .ws-right .calc-brandhead img{height:24px;width:auto;flex:none}
body[data-endpoint="calculator"] .ws-right .calc-brandhead b{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
body[data-endpoint="calculator"] .ws-right .calc-brandhead span{display:block;font-size:11px;color:var(--muted);margin-top:1px;line-height:1.3}

/* ---- Toolbar: New chat + History ---- */
body[data-endpoint="calculator"] .ai-toolbar{display:flex;gap:8px;align-items:center}
body[data-endpoint="calculator"] .ai-toolbar .btn.sm{height:32px;border-radius:8px;font-weight:600;font-size:12.5px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink)}
body[data-endpoint="calculator"] .ai-toolbar .btn.sm:hover{background:#f3f7fd;border-color:#cddcef}
body[data-endpoint="calculator"] #aiHistory{flex:1;height:32px;border:1px solid var(--line);border-radius:8px;
  padding:0 10px;font-size:12.5px;color:var(--ink);background:var(--surface);min-width:0}
body[data-endpoint="calculator"] #aiHistory:focus{outline:none;border-color:#8fb2e0;box-shadow:0 0 0 3px rgba(37,82,162,.12)}

/* ---- Status badges + help ---- */
body[data-endpoint="calculator"] .ai-note{display:flex;flex-direction:column;gap:6px}
body[data-endpoint="calculator"] .ai-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.01em}
body[data-endpoint="calculator"] .ai-note .help{font-size:11.5px;line-height:1.45;color:var(--muted)}

/* ---- Context chip: the property + strategy the AI is analyzing ---- */
body[data-endpoint="calculator"] .ai-context{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font-size:12.5px;color:var(--ink)}
body[data-endpoint="calculator"] .ai-context .ctx-pin{font-size:12px;filter:grayscale(.1)}
body[data-endpoint="calculator"] .ai-context #aiCtxAddr{font-weight:700;color:var(--ink)}
body[data-endpoint="calculator"] .ai-context #aiCtxAddr.unset{font-weight:600;color:#9aabc4}
body[data-endpoint="calculator"] .ai-context .ctx-sep{color:#b9c6db}
body[data-endpoint="calculator"] .ai-context .ctx-strat{font-weight:700;color:var(--brand);
  background:#e9f0fb;padding:1px 8px;border-radius:999px;font-size:11.5px}

/* ---- Chat scroll area ---- */
body[data-endpoint="calculator"] #aiChat{background:var(--surface-2)}

/* ---- Empty state ---- */
body[data-endpoint="calculator"] .ai-empty{margin:auto;max-width:300px;text-align:center;color:#7b8ca8;
  font-size:12.5px;line-height:1.55;padding:18px 10px}

/* ---- Typing / loading indicator ---- */
body[data-endpoint="calculator"] .ai-msg.thinking{display:flex;align-items:center;gap:9px;font-style:normal;color:#7488a8}
body[data-endpoint="calculator"] .ai-typing{display:inline-flex;gap:4px;align-items:center}
body[data-endpoint="calculator"] .ai-typing i{width:6px;height:6px;border-radius:50%;background:#9db3d6;
  animation:aiblink 1.2s infinite ease-in-out both}
body[data-endpoint="calculator"] .ai-typing i:nth-child(2){animation-delay:.16s}
body[data-endpoint="calculator"] .ai-typing i:nth-child(3){animation-delay:.32s}
body[data-endpoint="calculator"] .ai-typing-t{font-size:12.5px}
@keyframes aiblink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}

/* ---- Composer ---- */
body[data-endpoint="calculator"] .ai-inbar textarea{border:1px solid var(--line);border-radius:10px;font-size:13.5px}
body[data-endpoint="calculator"] .ai-inbar textarea:focus{border-color:#8fb2e0;box-shadow:0 0 0 3px rgba(37,82,162,.12)}
body[data-endpoint="calculator"] .ai-actionrow{font-size:12px}
body[data-endpoint="calculator"] .ai-usecalc{font-size:12px;color:var(--muted)}

/* ---- Calculator: cleaner section rhythm & consistent cards ---- */
body[data-endpoint="calculator"] .ws-left .calc-brandhead b{font-size:15px;letter-spacing:-.01em}
body[data-endpoint="calculator"] .ws-left .ci label{font-size:12px;font-weight:600;color:#43597a}
body[data-endpoint="calculator"] .ws-left .ci input[type=number],
body[data-endpoint="calculator"] .ws-left .ci input[type=text],
body[data-endpoint="calculator"] .ws-left .ci select,
body[data-endpoint="calculator"] .ws-left .ci textarea{border-radius:9px;border:1px solid var(--line)}
body[data-endpoint="calculator"] .ws-left .ci input:focus,
body[data-endpoint="calculator"] .ws-left .ci select:focus,
body[data-endpoint="calculator"] .ws-left .ci textarea:focus{border-color:#8fb2e0;box-shadow:0 0 0 3px rgba(37,82,162,.12);outline:none}
body[data-endpoint="calculator"] .ws-left .hint2{font-weight:500;color:#8a9cb8}
body[data-endpoint="calculator"] .ws-left .calc-tabs .ctab{font-weight:600}

/* Primary output card — make the MAO/Decision the clear hero */
body[data-endpoint="calculator"] .ws-left .big .v{font-variant-numeric:tabular-nums}
body[data-endpoint="calculator"] .ws-left .offer-ladder .ol.hi{box-shadow:0 1px 2px rgba(16,38,74,.06)}

/* ============================================================
   AI CHAT (v18) — assistant replies read like ChatGPT / Claude:
   plain full-width text, NO card frame. User messages keep their
   bubble; the full-analysis memo keeps its own inner cards.
   ============================================================ */
body[data-endpoint="calculator"] .ai-msg.assistant{
  display:block; max-width:100%; width:100%; align-self:stretch;
  background:transparent; border:none; box-shadow:none;
  border-radius:0; padding:2px 0 4px; white-space:normal; color:var(--ink);
}
/* readable prose spacing for conversational (non-memo) replies */
body[data-endpoint="calculator"] .ai-msg.assistant > div{line-height:1.6;margin:2px 0}
body[data-endpoint="calculator"] .ai-msg.assistant .ai-sp{height:8px}
body[data-endpoint="calculator"] .ai-msg.assistant ul{margin:5px 0;padding-left:20px}
body[data-endpoint="calculator"] .ai-msg.assistant li{margin:3px 0;line-height:1.55}
/* keep the typing indicator inline, unframed */
body[data-endpoint="calculator"] .ai-msg.assistant.thinking{padding:4px 0}
/* user messages: keep a clean chat bubble on the right, never clipped by the scrollbar */
body[data-endpoint="calculator"] .ai-msg.user{max-width:80%;box-shadow:none;margin-right:2px;
  box-sizing:border-box;word-break:break-word;overflow-wrap:anywhere}
body[data-endpoint="calculator"] #aiChat{scrollbar-gutter:stable;padding-right:14px}

/* Legacy #aiChat safety net (the old inline-calculator chat). Scoped to #aiChat
   ONLY — it must never touch the Executive Intelligence page (/assistant), which
   shares the .ai-msg class but renders proper structured .ai-table tables that
   SHOULD keep their headers and grid. */
#aiChat .ai-msg.assistant{
  display:block!important;
  background:transparent!important; border:none!important; box-shadow:none!important;
  border-radius:0!important; max-width:100%!important; width:100%!important; white-space:normal;
}
#aiChat .ai-msg.assistant > *{display:block;width:auto;float:none}
#aiChat .ai-msg table{display:block;width:100%;border:none}
#aiChat .ai-msg thead{display:none}
#aiChat .ai-msg tr{display:block;margin:0 0 6px}
#aiChat .ai-msg td, #aiChat .ai-msg th{
  display:block; border:none!important; padding:1px 0; white-space:normal;
}
#aiChat .ai-msg{overflow-x:hidden}

/* ================================================================= */
/* NIGHT MODE — html[data-theme="dark"]                              */
/* Core palette is driven by CSS variables (overridden below); the   */
/* rest are targeted overrides for semantic color tints and a few    */
/* hardcoded surfaces that don't go through a token.                 */
/* ================================================================= */
html[data-theme="dark"]{
  color-scheme:dark;
  /* True neutral dark-grey (zinc/neutral), no blue tint — Asana-style. */
  --ink:#f4f4f5; --ink-2:#c9c9ce; --muted:#9a9aa2; --faint:#6e6e77; --line:#2e2e33;
  --bg:#121214; --card:#1c1c1f; --white:#1c1c1f;
  --surface:#1c1c1f; --surface-2:#232327; --surface-3:#2c2c31; --surface-4:#232327;
  --blue-050:#232327; --blue-100:#2c2c31;
  --grad-soft:linear-gradient(135deg,#232327 0%,#26262b 100%);
  --shadow:0 1px 2px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.45);
  --shadow-lg:0 2px 6px rgba(0,0,0,.55),0 16px 44px rgba(0,0,0,.6);
  --wh-shadow-sm:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.5);
  --wh-shadow-md:0 4px 12px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.5);
  --wh-shadow-lg:0 12px 32px rgba(0,0,0,.6),0 4px 8px rgba(0,0,0,.5);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink-2)}

/* Frosted topbar + sidebar surfaces (neutral grey) */
html[data-theme="dark"] .topbar{background:rgba(18,18,20,.85);border-bottom-color:var(--line)}
html[data-theme="dark"] .sidebar{background:#18181b!important}
html[data-theme="dark"] .sidebar .nav a .ic{color:#a1a1aa!important}
html[data-theme="dark"] .sidebar .nav a.active{background:rgba(255,255,255,.10)!important;
  box-shadow:inset 3px 0 0 var(--blue-400),0 2px 8px rgba(0,0,0,.35)}

/* Page background (a later rule hardcodes a light gradient on <body>) */
html[data-theme="dark"] body{background:var(--bg)!important;color:var(--ink-2)}

/* Card / table / workspace headers had hardcoded LIGHT gradients — flip them so
   header text (var(--ink)) is readable. Fixes "New automation" + every card. */
html[data-theme="dark"] .card .hd{background:linear-gradient(180deg,#212124,#1b1b1e)}
/* thead had a hardcoded dark background AND a dark #557 text colour — fix both,
   otherwise column headers (e.g. EOD Live Oversight) are near-invisible. */
html[data-theme="dark"] table thead th{background:#212124;color:var(--muted)}
/* Row hover: two later rules hardcode a near-white hover — flip to a subtle
   grey so hovered rows stay readable in dark mode. */
html[data-theme="dark"] tbody tr:hover,
html[data-theme="dark"] table tbody tr:hover{background:var(--surface-2)}
html[data-theme="dark"] .calc-brandhead{background:linear-gradient(90deg,#212124,#1b1b1e)!important;border-bottom-color:var(--line)!important}
html[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#232327 25%,#2c2c31 37%,#232327 63%)}

/* Header text: force high contrast regardless of page-specific overrides */
html[data-theme="dark"] .topbar h1,
html[data-theme="dark"] .card .hd h2{color:var(--ink)!important}
html[data-theme="dark"] .topbar .sub{color:var(--muted)}

/* Inputs / placeholders */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:var(--faint)}

/* Native <select> dropdowns: force dark rendering so the option list and its
   text are legible (color-scheme drives the native popup colours). */
html[data-theme="dark"] select{color-scheme:dark;color:var(--ink);background:var(--surface)}
html[data-theme="dark"] .dcw-root select{color:var(--wh-ink);background:var(--wh-bg-sunken)}
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup{background:#1c1c1f;color:var(--ink)}

/* Scrollbars */
html[data-theme="dark"] .vscroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] .table-wrap::-webkit-scrollbar-thumb{background:#3a3a40;border-color:var(--surface)}

/* --- Semantic color tints: translucent bg + lighter text on dark --- */
html[data-theme="dark"] .b-active,
html[data-theme="dark"] .b-Allowance,
html[data-theme="dark"] .ai-conf.green,
html[data-theme="dark"] .flash.success,
html[data-theme="dark"] .ai-risk .rk.best span,
html[data-theme="dark"] .tp-complete.is-done,
html[data-theme="dark"] .ai-badge.live,
html[data-theme="dark"] .ai-memo .ai-call.v-buy{background:rgba(46,174,107,.16);color:#68d9a0;border-color:rgba(46,174,107,.3)}

html[data-theme="dark"] .b-Strike,
html[data-theme="dark"] .b-Deduction,
html[data-theme="dark"] .b-Written,
html[data-theme="dark"] .ai-conf.red,
html[data-theme="dark"] .flash.error,
html[data-theme="dark"] .ai-risk .rk.worst span,
html[data-theme="dark"] .bell-item.od,
html[data-theme="dark"] .ai-badge.warn,
html[data-theme="dark"] .ai-memo .ai-call.v-pass,
html[data-theme="dark"] .ai-memo .ai-call.c-risk,
html[data-theme="dark"] .btn.sm.danger:hover{background:rgba(230,90,90,.16);color:#f08a8a;border-color:rgba(230,90,90,.3)}

html[data-theme="dark"] .b-Verbal,
html[data-theme="dark"] .ai-conf.amber,
html[data-theme="dark"] .tally-dupwarn,
html[data-theme="dark"] .ai-badge.est,
html[data-theme="dark"] .ai-memo .ai-call.v-neg{background:rgba(217,130,43,.17);color:#e6ab5f;border-color:rgba(217,130,43,.3)}

html[data-theme="dark"] .b-lm,
html[data-theme="dark"] .rolechip.lm{background:rgba(150,90,210,.18);color:#c79cf0;border-color:rgba(150,90,210,.3)}

html[data-theme="dark"] .b-inactive,
html[data-theme="dark"] .b-Excuse,
html[data-theme="dark"] .b-Other,
html[data-theme="dark"] .ai-conf.muted,
html[data-theme="dark"] .ai-risk .rk.exp span,
html[data-theme="dark"] .rolechip.other,
html[data-theme="dark"] .kb-who{background:var(--surface-3);color:var(--muted);border-color:var(--line)}

html[data-theme="dark"] .ai-memo .ai-call.c-offer{background:rgba(80,130,230,.16);color:#8fb6f5;border-color:rgba(80,130,230,.3)}

/* progress bar track */
html[data-theme="dark"] .bar{background:var(--surface-3)}

/* Kanban board surfaces */
html[data-theme="dark"] .kb-col,
html[data-theme="dark"] .kb-addcolform{background:#131c2c}
html[data-theme="dark"] .kb-count{background:var(--surface-3);color:var(--muted)}
html[data-theme="dark"] .kb-body.kb-over{background:rgba(80,130,230,.14)}

/* AI code chips / soft toolbars */
html[data-theme="dark"] .ai-answer code,
html[data-theme="dark"] .ai-sql code{background:var(--surface-3)}
html[data-theme="dark"] .ai-toolbar .btn.sm:hover{background:var(--surface-3)}

/* Flash borders */
html[data-theme="dark"] .flash.success{border-color:rgba(46,174,107,.35)}
html[data-theme="dark"] .flash.error{border-color:rgba(230,90,90,.35)}

/* AI Analyst memo: the call-out key/heading text is hardcoded dark and sits on
   the (now dark) tint backgrounds — lift it to the lighter semantic hue. */
html[data-theme="dark"] .ai-memo .ai-call.v-buy .ai-call-k,
html[data-theme="dark"] .ai-memo .ai-call.v-buy .ai-call-h{color:#68d9a0}
html[data-theme="dark"] .ai-memo .ai-call.v-neg .ai-call-k,
html[data-theme="dark"] .ai-memo .ai-call.v-neg .ai-call-h{color:#e6ab5f}
html[data-theme="dark"] .ai-memo .ai-call.v-pass .ai-call-k,
html[data-theme="dark"] .ai-memo .ai-call.v-pass .ai-call-h{color:#f08a8a}
html[data-theme="dark"] .ai-memo .ai-call.c-offer .ai-call-k,
html[data-theme="dark"] .ai-memo .ai-call.c-offer .ai-call-h{color:#8fb6f5}
html[data-theme="dark"] .ai-memo .ai-call.c-conf .ai-call-k{color:var(--muted)}
html[data-theme="dark"] .ai-memo .ai-kpi-l,
html[data-theme="dark"] .ai-memo .ai-kpi-n,
html[data-theme="dark"] .ai-memo details.ai-collap .ai-caret{color:var(--muted)}

/* EOD Live Oversight: in-progress rows (was an inline light background that made
   the row text unreadable in dark mode). Themed via a class now. */
tr.tro-live{background:#f6f9fe}
html[data-theme="dark"] tr.tro-live{background:var(--surface-2)}

/* Completed-subtask check + danger button hover kept a light tint */
html[data-theme="dark"] .tp-sub.done .tp-check{background:rgba(46,174,107,.16);border-color:rgba(46,174,107,.4)}
html[data-theme="dark"] td .btn.sm.danger:hover{background:rgba(230,90,90,.16);border-color:rgba(230,90,90,.35)}

/* Theme toggle button in the topbar */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink-2);
  cursor:pointer;font-size:16px;line-height:1;transition:border-color .15s,color .15s,background .15s}
.theme-toggle:hover{border-color:var(--blue-400);color:var(--blue-500)}
.theme-toggle .moon{display:none}.theme-toggle .sun{display:block}
html[data-theme="dark"] .theme-toggle .moon{display:block}
html[data-theme="dark"] .theme-toggle .sun{display:none}

/* =================================================================== */
/* RESPONSIVE LAYOUT SYSTEM (v19)                                      */
/*                                                                     */
/* Consolidates the layout behaviour that had accumulated across the   */
/* v5-v18 layers into one place. Colour, theme and component styling   */
/* are deliberately left alone — this section only governs size,       */
/* position, flow and spacing.                                         */
/*                                                                     */
/* Sidebar has three states, driven by available width:                */
/*   >=1280px  full rail (240px, labels visible)                       */
/*   1024-1279 icon rail (72px, labels on hover as tooltips)           */
/*   <1024px   off-canvas drawer behind a hamburger                    */
/* The user can also force the icon rail at any width via the collapse */
/* toggle, which persists in localStorage.                             */
/* =================================================================== */

/* ------------------------------------------------------------ Sidebar */
.sidebar{width:var(--rail);transition:width .22s var(--ease),transform .22s var(--ease)}
.nav a{white-space:nowrap;overflow:hidden}
.nav a .ic{flex:0 0 18px}
.nav a .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Hamburger + collapse controls. Hidden until their breakpoint needs them. */
.nav-toggle{display:none;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 38px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-2);
  cursor:pointer;font-size:17px;line-height:1;padding:0}
.nav-toggle:hover{border-color:var(--blue-400);color:var(--blue-500)}
.rail-toggle{display:none;margin:var(--s2) var(--s2) 0;padding:9px 13px;width:calc(100% - var(--s4));
  align-items:center;gap:11px;border:none;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:var(--fs-sm);font-weight:600}
.rail-toggle:hover{background:rgba(255,255,255,.16)}
.rail-toggle .ic{width:18px;text-align:center;flex:0 0 18px}
.sidebar-backdrop{position:fixed;inset:0;z-index:38;background:rgba(12,22,40,.5);
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}

/* ---- Icon rail: 1024-1279, or forced by the collapse toggle ---- */
@media(min-width:1024px){
  .rail-toggle{display:flex}
}
@media(min-width:1024px) and (max-width:1279.98px){
  .sidebar{width:var(--rail-icon)}
  .sidebar .brand .txt,.sidebar .foot,.rail-toggle .lbl{display:none}
  .sidebar .brand{justify-content:center;padding-inline:var(--s2)}
  .nav a{justify-content:center;padding-inline:0;margin-inline:var(--s2)}
  .nav a .lbl{display:none}
  .rail-toggle{justify-content:center}
  /* Label surfaces as a tooltip so the rail stays navigable without text. */
  .nav a{position:relative}
  .nav a::after{content:attr(data-label);position:absolute;left:calc(100% + 10px);top:50%;
    transform:translateY(-50%) scale(.96);transform-origin:left center;
    background:var(--ink);color:#fff;font-size:var(--fs-sm);font-weight:600;
    padding:6px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;
    opacity:0;transition:opacity .12s var(--ease),transform .12s var(--ease);z-index:60;
    box-shadow:var(--shadow-lg)}
  .nav a:hover::after,.nav a:focus-visible::after{opacity:1;transform:translateY(-50%) scale(1)}
}
/* User-forced collapse at any desktop width — same treatment as the rail. */
@media(min-width:1024px){
  html[data-nav="collapsed"] .sidebar{width:var(--rail-icon)}
  html[data-nav="collapsed"] .sidebar .brand .txt,
  html[data-nav="collapsed"] .sidebar .foot,
  html[data-nav="collapsed"] .rail-toggle .lbl{display:none}
  html[data-nav="collapsed"] .sidebar .brand{justify-content:center;padding-inline:var(--s2)}
  html[data-nav="collapsed"] .nav a{justify-content:center;padding-inline:0;margin-inline:var(--s2);position:relative}
  html[data-nav="collapsed"] .nav a .lbl{display:none}
  html[data-nav="collapsed"] .rail-toggle{justify-content:center}
  html[data-nav="collapsed"] .nav a::after{content:attr(data-label);position:absolute;left:calc(100% + 10px);
    top:50%;transform:translateY(-50%) scale(.96);transform-origin:left center;
    background:var(--ink);color:#fff;font-size:var(--fs-sm);font-weight:600;padding:6px 10px;
    border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;
    transition:opacity .12s var(--ease),transform .12s var(--ease);z-index:60;box-shadow:var(--shadow-lg)}
  html[data-nav="collapsed"] .nav a:hover::after,
  html[data-nav="collapsed"] .nav a:focus-visible::after{opacity:1;transform:translateY(-50%) scale(1)}
}

/* ---- Drawer: below 1024 the rail slides off-canvas ---- */
@media(max-width:1023.98px){
  .sidebar{position:fixed;top:0;left:0;z-index:40;transform:translateX(-100%);
    box-shadow:none;width:min(var(--rail),84vw)}
  body.nav-open .sidebar{transform:none;box-shadow:6px 0 32px rgba(10,20,40,.34)}
  body.nav-open .sidebar-backdrop{opacity:1;pointer-events:auto}
  .nav-toggle{display:inline-flex}
  .rail-toggle{display:none}
  /* Drawer is an overlay, so the page keeps the full width underneath it. */
  .main{width:100%}
  body.nav-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  .sidebar,.sidebar-backdrop{transition:none}
}

/* --------------------------------------------------------- Topbar bits */
/* Keep the identity block from squeezing the title on narrow screens. */
@media(max-width:768px){
  .userbox .nm,.userbox .rl{display:none}
  .topbar{padding-block:var(--s3)}
}
@media(max-width:480px){
  .topbar .sub{display:none}
}

/* ----------------------------------------------------------- KPI cards */
/* Equal heights come from the grid; equal internal rhythm comes from the
   flex column, so a card with a longer label still lines up with its row. */
.kpis{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.kpi{display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
.kpi .label{overflow-wrap:anywhere}
.kpi .val{font-size:var(--fs-kpi);line-height:1.1;overflow-wrap:anywhere}
.kpi .meta{margin-top:auto;padding-top:var(--s1)}
.grid{gap:var(--gap)}
.lights{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:var(--gap)}
.light{min-width:0}
.light>div{min-width:0}
.light .lv{font-size:var(--fs-h1);overflow-wrap:anywhere}

/* -------------------------------------------------------------- Cards */
.card .hd{gap:var(--s3);padding:var(--s4) var(--s5)}
.card .hd h2{font-size:var(--fs-h2);min-width:0}
.card .pad{padding:var(--s5)}

/* ------------------------------------------------------------- Tables */
/* Tables scroll inside their own wrapper only — never the page. The
   min-width drops with the viewport so narrow screens scroll less. */
.table-wrap{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-gutter:stable}
.table-wrap table{min-width:min(680px,100%)}
table.lb{min-width:min(720px,100%)}
th,td{padding:var(--s3) var(--s5);font-size:var(--fs-sm)}
th{font-size:var(--fs-xs);position:sticky;top:0;z-index:2}
/* Long text truncates elegantly rather than forcing the column wider. */
.who{min-width:0}
.who span{min-width:0;overflow:hidden}
.who b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:0}

/* Priority columns: as space runs out the least important data drops first,
   so the remaining columns stay readable instead of all of them compressing.
   Mark a cell .p3 (drop first), .p2, then .p1 (drop last). */
/* p1/p2/p3 now respond to the wrapper's width (see .tw-* below). */

/* --------------------------------------------------------------- Forms */
.form{max-width:min(720px,100%)}
.form .row{display:flex;gap:var(--gap);flex-wrap:wrap;align-items:flex-start}
.field{min-width:min(190px,100%);margin-bottom:var(--s4)}
.field input,.field select,.field textarea{max-width:100%}
/* Checkboxes, radios and file inputs must not stretch to full width. */
.field input[type=checkbox],.field input[type=radio]{width:auto}
.btn{font-size:var(--fs-sm);min-height:38px}
.btn.sm{min-height:32px}

/* ---------------------------------------------------------- AI Analyst */
/* The history panel is a real column instead of vanishing under 1000px. */
.ai-layout{gap:var(--gap)}
.ai-wrap{max-width:min(820px,100%)}
@media(max-width:1100px){
  .ai-history{width:210px}
}
@media(max-width:900px){
  .ai-layout{flex-direction:column}
  .ai-history{display:flex;width:100%;position:static;max-height:220px;order:-1}
}

/* --------------------------------------------------- Task panel / board */
/* The docked panel width tracks the viewport so it can't crush the board. */
body.task-open .content{padding-right:0}
@media(min-width:1280px){
  .task-panel{width:min(520px,38vw)}
  body.task-open .content{padding-right:min(520px,38vw)}
}
.kanban{overscroll-behavior-x:contain}
.kb-col{flex:0 0 clamp(240px,22vw,300px);max-width:clamp(240px,22vw,300px)}

/* ------------------------------------------------------- Calendar grid */
.cal-cell{min-height:clamp(64px,8vw,98px)}
@media(max-width:640px){
  .cal-grid{gap:3px}
  .cal-ev{font-size:10px;padding:2px 4px}
}

/* ------------------------------------------------------- EOD / tally */
.tally-grid{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:var(--gap)}
.tcard-val{font-size:var(--fs-display)}
.tally-choose{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
.tally-bar{gap:var(--s4)}
.tally-bar-right{margin-left:auto;flex-wrap:wrap}

/* -------------------------------------------------- Deal calculator ws */
/* Below 1280 the two-panel workspace stacks instead of fighting for width. */
@media(max-width:1279.98px){
  body[data-endpoint="calculator"] .main{height:auto;overflow:visible}
  body[data-endpoint="calculator"] .content{overflow:visible}
  .ws{flex-direction:column;height:auto}
  .ws-resize{display:none}
  .ws-right{flex:none;width:100%;min-width:0;height:auto;
    border-left:none;border-top:1px solid var(--line)}
  .ws-right .ai-pane{height:auto}
}
.miniout{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.offer-ladder{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}
.calc-grid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.calc-deal{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}

/* ------------------------------------------------------------ Misc grid */
.team-grid{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:var(--gap)}
.rolegrid{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr))}
.ai-cards{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.ai-kpis{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}
.calc-usersec-fields{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}

/* --------------------------------------------------------- Performance */
/* The v5 layer transitioned every property on every element via `*`, which
   forces style recalculation on unrelated mutations. Scope it to the things
   that actually animate. */
*{transition-property:none}
a,button,input,select,textarea,summary,
.btn,.card,.kpi,.light,.chip,.tag,.badge,.rolechip,.todo,.kb-card,.tcard,
.nav a,.ai-card,.rolepick,.tally-choose-card,.theme-toggle,.nav-toggle,.rail-toggle{
  transition-property:background-color,border-color,color,box-shadow,transform,opacity;
  transition-duration:.16s;transition-timing-function:var(--wh-ease)}
input,textarea,select{transition-property:border-color,box-shadow}

/* (viewport-based column priority removed — replaced by the container-based
   .tw-* rules at the end of this file) */

/* Quota cell keeps a usable bar width without a hardcoded px value. */
.c-quota{min-width:clamp(96px,10vw,140px)}
.c-actions{white-space:nowrap}
.c-actions form{display:inline}

/* ------------------------------------------------------- Layout utilities */
/* Fluid replacements for the hardcoded pixel widths that used to be inlined
   on inputs inside tables and toolbars. They shrink on small screens instead
   of forcing their container wider. */
.w-xs{width:clamp(48px,6vw,72px);min-width:0}
.w-sm{width:clamp(84px,9vw,120px);min-width:0}
.w-md{width:clamp(110px,14vw,180px);min-width:0}
.w-full{width:100%;min-width:0}
.fg-grow{flex:1 1 220px;min-width:0}
.inp-grow{flex:1 1 240px;min-width:0;padding:9px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.inp-inline{margin-top:5px;width:min(190px,100%);padding:5px 8px;border:1px solid var(--line);
  border-radius:7px;background:var(--surface);color:var(--ink);font-size:var(--fs-sm)}

/* Trend sparkline: height scales with the viewport instead of a fixed 190px,
   so it keeps its proportions under zoom and on short laptop screens. */
.chart svg{height:clamp(140px,18vh,220px)}
.chart{padding:var(--s4) var(--s3) var(--s2)}

/* Inline forms inside table action cells must not become block-level. */
td form{display:inline}

/* Inline-filter selects shrink rather than push the card header wide. */
.minifilter{flex-wrap:wrap;min-width:0}
.minifilter select{min-width:0;max-width:clamp(110px,18vw,180px)}
.hd-tools{min-width:0}

/* Excuse editor only renders at >=1400px, where it fits on one line. */
.excuse-form{flex-wrap:nowrap}
.excuse-form input[name=excuse_reason]{width:clamp(70px,7vw,120px);min-width:0}

/* --------------------------------------------- Sticky action columns */
/* When a wide table does scroll inside its wrapper, the row's action
   buttons must not scroll out of reach. Pinning the last column keeps
   Edit / Save / Remove visible at every width, so the internal scroll is
   only ever used to read extra data — never to reach a control. */
.tc-users  :is(th,td):last-child,
.tc-roles  :is(th,td):last-child,
.tc-payroll :is(th,td):last-child,
.tc-payslips :is(th,td):last-child,
.tc-activity :is(th,td):last-child,
.tc-actions :is(th,td):last-child,
.tc-agents :is(th,td):last-child{
  position:sticky;right:0;z-index:1;background:var(--surface);
  box-shadow:inset 1px 0 0 var(--line)}
.tc-users  thead th:last-child,
.tc-roles  thead th:last-child,
.tc-payroll thead th:last-child,
.tc-payslips thead th:last-child,
.tc-activity thead th:last-child,
.tc-actions thead th:last-child,
.tc-agents thead th:last-child{z-index:3;background:var(--surface-2)}
/* Keep the pinned cell in step with the row's hover state. */
.tc-users  tbody tr:hover :is(td):last-child,
.tc-roles  tbody tr:hover :is(td):last-child,
.tc-payroll tbody tr:hover :is(td):last-child,
.tc-payslips tbody tr:hover :is(td):last-child,
.tc-activity tbody tr:hover :is(td):last-child,
.tc-actions tbody tr:hover :is(td):last-child,
.tc-agents tbody tr:hover :is(td):last-child{background:var(--surface-2)}


/* =================================================================== */
/* GLOBAL MENU LAYER (v20)                                             */
/*                                                                     */
/* Dropdowns must never be trapped inside a container. Cards clip with */
/* overflow:hidden, table wrappers clip with overflow-x:auto (which    */
/* per spec makes the other axis clip too), and panels clip as well —  */
/* so an in-flow popup gets cut off by whichever ancestor it happens   */
/* to sit in. Chasing that with per-container :has() overrides is      */
/* endless and breaks the scrolling those containers exist for.        */
/*                                                                     */
/* Instead every .js-menu popup is position:fixed and placed against   */
/* the viewport by the controller in base.html. Fixed elements are not */
/* clipped by ancestor overflow, so one rule covers every menu on      */
/* every page — current and future.                                    */
/* =================================================================== */
details.js-menu{position:relative}
details.js-menu > :not(summary){
  position:fixed;z-index:1000;margin:0;
  max-height:var(--menu-max,min(320px,54vh));
  overflow-y:auto;overscroll-behavior:contain}
/* Placed off-screen until the controller measures it, so it never flashes
   in the wrong spot on open. */
details.js-menu[open] > :not(summary){top:var(--menu-top,-9999px);left:var(--menu-left,-9999px)}
.tcard-menu{position:fixed;z-index:1000}
@media (prefers-reduced-motion:no-preference){
  details.js-menu[open] > :not(summary){animation:menuIn .12s var(--ease)}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* =================================================================== */
/* NO INNER SCROLL WINDOWS (v21)                                       */
/*                                                                     */
/* Content must not be boxed into a scrollable frame. Cards no longer  */
/* clip, tables no longer carry their own horizontal scrollbar, and    */
/* the leaderboard is no longer capped at a fixed height. Everything   */
/* grows to its natural size and the PAGE is the only thing that       */
/* scrolls.                                                            */
/*                                                                     */
/* This is only safe because the column-priority rules above keep wide */
/* tables within the viewport; the scrollbars were compensating for    */
/* overflow that no longer happens.                                    */
/* =================================================================== */

/* Cards: stop clipping their contents. `clip` keeps the rounded corners
   tidy without creating a scroll container (see the sticky-sidebar note
   near the top — `hidden` would break position:sticky inside cards). */
.card{overflow:clip}

/* Tables: no inner horizontal scrollbar, no forced minimum width. */
.table-wrap{overflow:visible}
.table-wrap table,table.lb{min-width:0}

/* Leaderboard: grows with its rows instead of scrolling inside 560px. */
.vscroll{max-height:none;overflow:visible}
/* Its header stays useful by sticking to the top of the PAGE instead of to
   the top of a scroll box. */
table.lb thead th{position:sticky;top:0}

/* Table headers generally: stick to the viewport, not to a wrapper. */
thead th{position:sticky;top:0;z-index:2}

/* The task panel and kanban keep their own scrolling — they are genuinely
   fixed-height workspaces, not page content boxed into a window. */

/* =================================================================== */
/* FLAT SECTIONS — NO PANELS (v22)                                     */
/*                                                                     */
/* Content no longer sits inside floating white "windows". The page is */
/* one continuous surface; sections are separated by spacing and a     */
/* rule under each heading, not by a bordered, rounded, shadowed box.  */
/*                                                                     */
/* Colours and brand are untouched — the card surface colour simply    */
/* becomes the page surface, so contrast is identical in light and     */
/* dark mode. Set --panel back to 1 (below) to restore the panels.     */
/* =================================================================== */
body{background:var(--card)}

.card{background:transparent;border:0;box-shadow:none;border-radius:0;
  overflow:visible;margin:0}
.card:hover{box-shadow:none}
/* Section heading: a rule, not a shaded bar. */
.card .hd{background:transparent;border-bottom:1px solid var(--line);
  padding:0 0 var(--s3);margin-bottom:var(--s3)}
.card .bd{padding:0}
.card .pad{padding:0}
/* Sections need breathing room now that no border separates them. */
.content>*+*{margin-top:var(--s8)}

/* Tables align to the page gutter instead of a panel's inner padding. */
th:first-child,td:first-child{padding-left:0}
th:last-child,td:last-child{padding-right:0}
thead th{background:transparent;border-bottom:1px solid var(--line)}
html[data-theme="dark"] thead th{background:transparent}
.tc-users  :is(th,td):last-child,
.tc-roles  :is(th,td):last-child,
.tc-payroll :is(th,td):last-child,
.tc-payslips :is(th,td):last-child,
.tc-activity :is(th,td):last-child,
.tc-actions :is(th,td):last-child,
.tc-agents :is(th,td):last-child{background:var(--card);box-shadow:none}
.tc-users  thead th:last-child,
.tc-roles  thead th:last-child,
.tc-payroll thead th:last-child,
.tc-payslips thead th:last-child,
.tc-activity thead th:last-child,
.tc-actions thead th:last-child,
.tc-agents thead th:last-child{background:var(--card)}

/* The filter bar is a toolbar, not a panel. */
.filterbar{background:transparent;border:0;border-bottom:1px solid var(--line);
  box-shadow:none;border-radius:0;padding:0 0 var(--s4)}

/* Stat tiles stay as discrete tiles — they are individual figures, not
   page sections, and reading them as a row needs the separation. */

/* Sticky action columns are removed: they existed so buttons stayed reachable
   while a table scrolled sideways inside its wrapper. Tables no longer scroll
   internally, so `position:sticky;right:0` had nothing to stick to except the
   viewport — which parked the buttons ON TOP of the Quota column. Back in
   normal flow, every column keeps its own space. */
.tc-users  :is(th,td):last-child,
.tc-roles  :is(th,td):last-child,
.tc-payroll :is(th,td):last-child,
.tc-payslips :is(th,td):last-child,
.tc-activity :is(th,td):last-child,
.tc-actions :is(th,td):last-child,
.tc-agents :is(th,td):last-child{position:static;background:transparent;box-shadow:none}

/* Let every column shrink to share the available width rather than forcing
   the table past the page edge. */
table{table-layout:auto;width:100%}
th,td{overflow-wrap:break-word}
.c-actions,.c-actions .btn{white-space:nowrap}
.c-actions{width:1%}          /* shrink-to-fit: takes only what it needs */
.c-quota{min-width:clamp(80px,7vw,120px)}
/* Action buttons stack when the column gets tight instead of pushing wider. */
.c-actions{display:flex;flex-wrap:wrap;gap:var(--s1);justify-content:flex-end;align-items:center}

/* Apply + Reset live in one grid cell and split it evenly. */
.filterbar .btn-fg .fg-actions{display:flex;gap:var(--s2);min-width:0}
.filterbar .btn-fg .fg-actions .btn{flex:1 1 0;min-width:0;justify-content:center}
.filterbar .btn-fg .btn{width:auto}

/* ------------------------------------------------------------------ */
/* CORRECTION to v21/v22.                                             */
/*                                                                    */
/* Removing the panel frame was the point; removing the table's       */
/* horizontal scroll was my own over-reach. Without it, wide tables    */
/* overflowed the page at nearly every width — and because the page   */
/* is overflow-x:clip, that data became unreachable rather than       */
/* scrollable. A scrollbar that appears only when needed is invisible */
/* the rest of the time and never looked like a "window"; the frame   */
/* did. So: frame stays gone, scrolling comes back.                   */
/* ------------------------------------------------------------------ */
.table-wrap{overflow-x:auto;overflow-y:visible;
  background:transparent;border:0;box-shadow:none;border-radius:0}

/* A <td> must stay a table cell — display:flex pulls it out of the row's
   column model and misaligns everything after it. Flex the contents instead. */
.c-actions{display:table-cell;width:1%;white-space:nowrap;text-align:right}
.c-actions .btn{margin-left:var(--s1)}

/* The leaderboard lives in .vscroll, not .table-wrap. It keeps max-height:none
   (no vertical window) but needs the same horizontal scroll so wide rows stay
   reachable instead of running off the page. */
.vscroll{overflow-x:auto;max-height:none}

/* =================================================================== */
/* LEADERBOARD HORIZONTAL SCROLL (v25)                                 */
/*                                                                     */
/* `body` is overflow-x:clip, so a table wider than the window can only */
/* be reached by scrolling INSIDE its wrapper. That only works if the   */
/* wrapper is allowed to be narrower than its contents — and a flex or  */
/* grid item defaults to min-width:auto, which means "at least as wide  */
/* as my content". So the wrapper grew to the table's width and the     */
/* overflow got clipped by the body instead of scrolling. Hence the     */
/* right-hand columns were visible in the DOM but unreachable.         */
/*                                                                     */
/* min-width:0 lets it shrink; max-width:100% keeps it inside the card. */
.vscroll{min-width:0;max-width:100%;overscroll-behavior-x:contain;
  scrollbar-gutter:stable;-webkit-overflow-scrolling:touch}
.card>.bd,.panel>.bd{min-width:0}

/* Wide enough that every column keeps its own space and the row scrolls
   rather than crushing "Contracts sent" into two lines. */
table.lb{min-width:900px}

/* A visible scrollbar, because a scroll region nobody can see is one
   nobody uses. */
.vscroll::-webkit-scrollbar{height:10px}
.vscroll::-webkit-scrollbar-thumb{background:var(--line-strong,#cdd8e8);
  border-radius:8px}


/* =================================================================== */
/* CARDS RESTORED, DONE PROPERLY (v24)                                 */
/*                                                                     */
/* Reverting the flat/frameless experiment (v22). Panels come back      */
/* because they earn their keep: a bordered card gives a table a        */
/* definite width to lay out against and a padded edge, so the last     */
/* column can never sit flush to the window. Flat + full-bleed kept     */
/* clipping the right-most column.                                      */
/*                                                                     */
/* What is DIFFERENT from the original cards:                          */
/*   - full page width is kept (no centred 1320px column)              */
/*   - one spacing scale, so every card has identical padding/gaps     */
/*   - no inner vertical scroll window on the leaderboard              */
/*   - column priority driven by the card's real width                 */
/* =================================================================== */
body{background:var(--bg)}

.card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-card);box-shadow:var(--wh-shadow-sm);
  overflow:clip;margin:0}
.card:hover{box-shadow:var(--wh-shadow-sm)}   /* no lift: these are surfaces, not buttons */
.card .hd{background:transparent;border-bottom:1px solid var(--line);
  padding:var(--s4) var(--s5);margin:0;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap}
.card .bd{padding:0}
.card .pad{padding:var(--s5)}
.content>*+*{margin-top:var(--gap)}

/* Table breathes inside the card instead of touching its edges. */
.card .table-wrap,.card .vscroll{padding:0 var(--s5) var(--s4)}
th:first-child,td:first-child{padding-left:0}
th:last-child,td:last-child{padding-right:0}
thead th{background:transparent;border-bottom:1px solid var(--line)}

/* Filter bar is a card again, matching every other section. */
.filterbar{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-card);box-shadow:var(--wh-shadow-sm);
  padding:var(--s4) var(--s5)}


/* =================================================================== */
/* COLUMN VISIBILITY — SHOW EVERYTHING, SCROLL IF NEEDED (v25)          */
/*                                                                     */
/* Earlier versions hid columns as space ran out. That traded a clipped */
/* column for a MISSING one, which is worse: the number is simply gone  */
/* and there is no way to get it back on that screen.                  */
/*                                                                     */
/* New rule: on any desktop-sized card, every column is rendered. If    */
/* the table is wider than the card it scrolls sideways INSIDE the      */
/* card — all data stays reachable. Columns are only dropped on genuine */
/* phone widths, where a 9-column table cannot be used at all.         */
/* =================================================================== */

/* Nothing is hidden above a ~700px card. Phones only. */
.tw-600 :is(th,td).p3{display:none}
.tw-420 :is(th,td).p2{display:none}

.tw-600 .tc-activity :is(th,td):nth-child(5),
.tw-600 .tc-activity :is(th,td):nth-child(6),
.tw-600 .tc-activity :is(th,td):nth-child(11),
.tw-600 .tc-activity :is(th,td):nth-child(15){display:none}
.tw-420 .tc-activity :is(th,td):nth-child(3),
.tw-420 .tc-activity :is(th,td):nth-child(8),
.tw-420 .tc-activity :is(th,td):nth-child(10),
.tw-420 .tc-activity :is(th,td):nth-child(13){display:none}

.tw-600 .tc-payroll :is(th,td):nth-child(4),
.tw-600 .tc-payroll :is(th,td):nth-child(5){display:none}
.tw-600 .tc-roles   :is(th,td):nth-child(6),
.tw-600 .tc-roles   :is(th,td):nth-child(8){display:none}
.tw-600 .tc-users   :is(th,td):nth-child(4){display:none}
.tw-600 .tc-audit   :is(th,td):nth-child(4){display:none}
.tw-420 .tc-wh      :is(th,td):nth-child(4){display:none}

/* Make the sideways scroll obvious rather than a hidden surprise: a soft
   fade on the edge that has more content, and a visible slim scrollbar. */
.table-wrap,.vscroll{scrollbar-width:thin}
.table-wrap::-webkit-scrollbar,.vscroll::-webkit-scrollbar{height:9px}
.table-wrap::-webkit-scrollbar-thumb,.vscroll::-webkit-scrollbar-thumb{
  background:#c3d3ea;border-radius:8px;border:2px solid transparent;background-clip:content-box}
.is-scrollable{position:relative}
.is-scrollable::after{content:"";position:absolute;top:0;bottom:var(--s4);right:0;width:38px;
  pointer-events:none;background:linear-gradient(to right,transparent,var(--card));
  opacity:0;transition:opacity .15s var(--ease)}
.is-scrollable.can-right::after{opacity:1}

/* ---------------------------------------------- Task comment editing */
.tp-cmt-h{align-items:center;gap:var(--s2)}
.tp-cmt-h>span{display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap}
.tp-cmt-edited{font-style:normal;color:var(--faint);font-size:11px}
/* Actions stay out of the way until the comment is hovered or focused. */
.tp-cmt-tools{display:inline-flex;gap:var(--s1);opacity:0;transition:opacity .12s var(--ease)}
.tp-cmt:hover .tp-cmt-tools,.tp-cmt:focus-within .tp-cmt-tools{opacity:1}
.tp-cmt-act{background:none;border:0;padding:2px 4px;cursor:pointer;font:inherit;
  font-size:11.5px;font-weight:600;color:var(--muted);border-radius:5px}
.tp-cmt-act:hover{color:var(--blue-600);background:var(--blue-050)}
.tp-cmt-act.danger:hover{color:var(--red);background:rgba(214,69,69,.10)}
.tp-cmt-edit textarea{width:100%;min-height:64px;border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;font:inherit;font-size:13.5px;resize:vertical;
  background:var(--surface);color:var(--ink)}
.tp-cmt-edit textarea:focus{outline:none;border-color:var(--blue-400);
  box-shadow:0 0 0 3px rgba(36,132,199,.15)}
.tp-cmt-editrow{display:flex;gap:var(--s2);margin-top:var(--s2)}
/* Touch devices have no hover, so keep the actions visible there. */
@media (hover:none){ .tp-cmt-tools{opacity:1} }

/* ── Leads board & dialer ─────────────────────────────────────────────────
   Reuses the existing card/table tokens rather than introducing a second
   visual language; only the board geometry is new. */
.lead-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.lead-col{flex:0 0 300px;background:var(--panel,#141a24);border:1px solid var(--line,#233043);border-radius:12px;display:flex;flex-direction:column;max-height:calc(100vh - 230px)}
.lead-col-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line,#233043)}
.lead-col-head .dot{width:9px;height:9px;border-radius:50%;flex:none}
.lead-col-head .count{margin-left:auto;opacity:.6;font-size:.85rem}
.lead-col-body{padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.lead-card{position:relative;background:var(--card,#1b2430);border:1px solid var(--line,#233043);border-radius:10px;padding:12px 12px 10px 32px}
.lead-card.unowned{border-left:3px solid var(--accent,#2253a2)}
.lead-card .pick{position:absolute;left:10px;top:12px}
.lead-title{display:block;font-weight:600;margin-bottom:4px;color:inherit;text-decoration:none}
.lead-title:hover{text-decoration:underline}
.lead-addr{font-size:.86rem;opacity:.75;margin-bottom:6px}
.lead-meta{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.lead-foot{display:flex;justify-content:space-between;font-size:.78rem;opacity:.7}
.lead-foot .unassigned{color:var(--accent,#4f8ef7)}
.lead-col-body .empty{opacity:.45;font-size:.85rem;text-align:center;padding:14px 0}

.dial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start}
#cardWho{grid-column:1/-1}
.dial-number{font-size:1.6rem;font-weight:700;letter-spacing:.5px}
.dial-actions{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.brief{margin:10px 0;padding:10px 12px;border-left:3px solid var(--accent,#2253a2);background:rgba(255,255,255,.03);border-radius:0 8px 8px 0;line-height:1.5}
.meta-row{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.outcome-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0}
.tbl.compact td,.tbl.compact th{padding:6px 8px;font-size:.86rem}
.tbl tr.blocked{opacity:.5}
.tag.danger{background:rgba(220,60,60,.18);color:#ff9c9c}
.hist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.hist .when{opacity:.6;font-size:.8rem}
.hist .note{opacity:.8;font-size:.85rem;margin-top:3px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0}
.kv dt{opacity:.6;font-size:.85rem}
.kv dd{margin:0}
.fld{display:block;margin-top:10px}
.fld span{display:block;font-size:.85rem;opacity:.7;margin-bottom:4px}
.fld input,.fld textarea{width:100%}
@media (max-width:700px){.lead-col{flex-basis:86vw}}
.sub-tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--line,#233043)}
.sub-tabs .tab{padding:8px 14px;color:inherit;text-decoration:none;opacity:.65;border-bottom:2px solid transparent}
.sub-tabs .tab:hover{opacity:1}
.sub-tabs .tab.active{opacity:1;border-bottom-color:var(--accent,#4f8ef7);font-weight:600}
.summary{margin:10px 0;padding:11px 13px;background:rgba(79,142,247,.10);border:1px solid rgba(79,142,247,.28);border-radius:9px;line-height:1.55;font-size:.93rem}

/* ── Dialer: call bar, transcript, AI panels ────────────────────────────── */
.call-bar{position:sticky;top:0;z-index:20;display:grid;
  grid-template-columns:1.4fr 1fr auto auto;gap:14px;align-items:center;
  padding:12px 16px;margin-bottom:12px;background:var(--panel,#141a24);
  border:1px solid var(--line,#233043);border-radius:12px}
.cb-who strong{display:block}
.cb-number .dial-number{font-size:1.35rem}
.cb-status{display:flex;align-items:center;gap:8px;white-space:nowrap}
.status-dot{width:10px;height:10px;border-radius:50%;background:#64748b;flex:none}
.status-dot.ringing{background:#eab308;animation:pulse 1s infinite}
.status-dot.live{background:#22c55e;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.cb-status .timer{font-variant-numeric:tabular-nums;opacity:.8}
.cb-actions{display:flex;gap:6px;flex-wrap:wrap}
.btn.danger{background:#b91c1c;border-color:#b91c1c;color:#fff}

.countdown{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;margin-bottom:12px;border-radius:10px;
  background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.35)}
.countdown strong{font-variant-numeric:tabular-nums}

.transcript{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.tx{padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.04);font-size:.9rem}
.tx.seller{background:rgba(79,142,247,.12)}
.tx .who{display:block;font-size:.72rem;text-transform:uppercase;opacity:.55;
  letter-spacing:.04em}
.badge{font-size:.68rem;padding:2px 7px;border-radius:20px;background:#22c55e;
  color:#04210f;vertical-align:middle;text-transform:uppercase;letter-spacing:.05em}

.tip{padding:9px 12px;margin-bottom:7px;border-radius:8px;
  background:rgba(34,197,94,.10);border-left:3px solid #22c55e;font-size:.92rem}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-size:.78rem;padding:3px 9px;border-radius:20px;
  background:rgba(255,255,255,.06);border:1px solid var(--line,#233043)}
.chip.objection{background:rgba(239,68,68,.14)}
.chip.motivation{background:rgba(79,142,247,.14)}
.chip.sentiment{background:rgba(234,179,8,.14)}
.chip.pain_point{background:rgba(168,85,247,.14)}

.review{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
  padding:9px 11px;margin-bottom:7px;border-radius:9px;
  background:rgba(255,255,255,.04);border:1px solid var(--line,#233043);
  transition:opacity .35s,transform .35s}
.review.accepted{opacity:0;transform:translateX(14px);border-color:#22c55e}
.review.rejected{opacity:0;transform:translateX(-14px)}
.rv-kind{grid-column:1;font-size:.72rem;text-transform:uppercase;opacity:.6;
  letter-spacing:.04em}
.rv-text{grid-column:1;font-size:.92rem}
.rv-acts{grid-column:2;grid-row:1/3;display:flex;gap:5px}

.qual-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.qual-grid .fld.wide{grid-column:1/-1}
.hist.provider li{border-left:3px solid #a855f7;padding-left:9px}
.sub{margin:12px 0 6px;font-size:.85rem;opacity:.7}
.rec{display:flex;align-items:center;gap:9px;margin-bottom:8px;flex-wrap:wrap}
.rec audio{height:32px;max-width:260px}
.tbl tr.current{outline:2px solid var(--accent,#4f8ef7);outline-offset:-2px}
@media (max-width:900px){
  .call-bar{grid-template-columns:1fr;gap:8px}
  .qual-grid{grid-template-columns:1fr}
}


/* ── Notification toasts (v26) ─────────────────────────────────────────────
   Rebuilt to read like a real OS notification: one crisp drawn bell, a bright
   title, a muted body, and a timestamp — instead of an emoji whose rendering
   we do not control and text at a contrast nobody could read.

   Colours are fixed rather than themed. A toast floats over whatever is
   behind it, so inheriting the page's surface colours is how you end up with
   dark grey text on a dark grey card. */
#wh-toast-host{position:fixed;right:18px;bottom:18px;z-index:9000;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;
  width:min(360px,calc(100vw - 36px))}
#wh-toast-host>*{pointer-events:auto}

.wh-toast{position:relative;display:flex;gap:12px;padding:13px 34px 13px 14px;
  border-radius:14px;
  background:#1f2229;                       /* solid: never let the page show through */
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);
  animation:wh-toast-in .2s cubic-bezier(.2,.8,.3,1);
  transition:opacity .16s ease,transform .16s ease}
.wh-toast.is-leaving{opacity:0;transform:translateX(12px)}
@keyframes wh-toast-in{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:none}
}

/* The bell: an accent-tinted disc, so it reads as "alert" without shouting. */
.wh-toast-icon{flex:none;width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(250,190,60,.14);color:#fbbf3c}
.wh-toast-icon svg{width:17px;height:17px}
.wh-toast.is-done .wh-toast-icon{background:rgba(52,199,123,.16);color:#34c77b}
.wh-toast.is-error .wh-toast-icon{background:rgba(239,88,88,.16);color:#ef5858}

.wh-toast-main{min-width:0;flex:1 1 auto}
.wh-toast-top{display:flex;align-items:baseline;gap:8px}
.wh-toast-title{font-size:.82rem;font-weight:600;color:#f4f6fb;   /* near-white: the point of the card */
  letter-spacing:-.01em}
.wh-toast-time{margin-left:auto;flex:none;font-size:.68rem;color:#8b93a3;
  font-variant-numeric:tabular-nums}
.wh-toast-body{margin:3px 0 0;font-size:.78rem;line-height:1.35;color:#b6bdca;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

.wh-toast-actions{display:flex;align-items:center;gap:8px;margin-top:9px}
.wh-toast-select{flex:1 1 auto;min-width:0;font:inherit;font-size:.74rem;
  padding:5px 8px;border-radius:8px;
  background:#2a2e37;color:#e6eaf2;border:1px solid rgba(255,255,255,.10);
  cursor:pointer}
.wh-toast-select:hover{background:#31363f}
.wh-toast-select:focus-visible{outline:2px solid #4f8ef7;outline-offset:1px}
.wh-toast-select:disabled{opacity:.55;cursor:default}
.wh-toast-select option{background:#2a2e37;color:#e6eaf2}

.wh-toast-open{flex:none;font-size:.74rem;font-weight:600;text-decoration:none;
  color:#6aa5ff;padding:5px 10px;border-radius:8px;
  background:rgba(106,165,255,.12)}
.wh-toast-open:hover{background:rgba(106,165,255,.2);color:#8ebbff}

.wh-toast-x{position:absolute;top:8px;right:8px;width:22px;height:22px;
  display:grid;place-items:center;border:0;border-radius:6px;cursor:pointer;
  background:transparent;color:#8b93a3;padding:0}
.wh-toast-x svg{width:13px;height:13px}
.wh-toast-x:hover{background:rgba(255,255,255,.08);color:#e6eaf2}

.wh-toast-more{display:block;text-align:center;font-size:.72rem;
  color:#8b93a3;text-decoration:none;padding:6px;border-radius:9px;
  background:rgba(31,34,41,.9);border:1px solid rgba(255,255,255,.07)}
.wh-toast-more:hover{color:#e6eaf2}

/* On a light page the same card still reads: it stays dark on purpose, the
   way OS notifications do, rather than trying to match the page. */
@media(max-width:520px){
  #wh-toast-host{left:14px;right:14px;bottom:14px;width:auto}
}
@media(prefers-reduced-motion:reduce){
  .wh-toast{animation:none}
}