/* HECTACORN ERP - UI styles. Palette: dataviz reference instance (roles, not raw hex in body). */
/* Inter — self-hosted variable font (SIL OFL), CSP-safe same-origin. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter.woff2") format("woff2");
}
:root {
  color-scheme: light;
  --page: #f3f6fb;
  --surface: #ffffff;
  --ink: #0f1c3f;
  --ink-2: #4c5872;
  --muted: #8994ab;
  --grid: #eef2f8;
  --baseline: #c3cddd;
  --border: #e7ecf4;
  --navy: #16265c;
  /* headings and other text painted 'brand navy'. Separate from --navy
     because that is also a background, and a background cannot flip. */
  --head: #16265c;
  --navy-2: #25407e;
  --navy-deep: #101d47;
  --teal: #1fb6c9;
  --series-1: #1fb6c9;
  --accent2: #16aebf;
  --cat-2: #008300; --cat-3: #e87ba4; --cat-4: #eda100; --cat-5: #1baf7a; --cat-6: #eb6834;
  --seq-250: #86b6ef; --seq-350: #5598e7; --seq-450: #2a78d6;
  --seq-550: #1c5cab; --seq-650: #104281; --seq-700: #0d366b;
  --good: #0ca30c; --good-text: #006300;
  --warning: #fab219; --serious: #ec835a; --critical: #d03b3b;
  --sidebar: #16265c;
  --sidebar-2: #101d47;
  --sidebar-ink: #c5d0e8;
  --shadow: 0 1px 2px rgba(16, 26, 63, .05);
  --shadow-md: 0 1px 3px rgba(16, 26, 63, .06), 0 8px 24px rgba(16, 26, 63, .07);
  --shadow-lg: 0 16px 40px rgba(16, 26, 63, .15), 0 2px 8px rgba(16, 26, 63, .06);
  --accent-grad: linear-gradient(150deg, #25407e, #16265c);
  --tint: color-mix(in srgb, var(--teal) 12%, transparent);
  --radius: 16px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI",
    system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "Cascadia Mono", ui-monospace, "SF Mono", Consolas, monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0a0e16;
  --surface: #121926;
  --ink: #f1f5f9;
  --ink-2: #cbd5e1;
  --muted: #8b98a8;
  --grid: #1e2735;
  --baseline: #334155;
  --border: #212c3d;
  --head: #dce6f7;          /* navy is unreadable on a dark ground */
  --critical: #ff6f6f;      /* the light-theme red only reaches 3.7:1 here */
  --warning: #ffc247;
  --serious: #ff9d72;
  --good: #0e7a3c;          /* the tint behind a good badge, kept dark */
  --good-text: #7ce8a8;
  --series-1: #2bc4d6;
  --cat-2: #008300; --cat-3: #d55181; --cat-4: #c98500; --cat-5: #199e70; --cat-6: #d95926;
  --seq-250: #184f95; --seq-350: #1c5cab; --seq-450: #256abf;
  --seq-550: #3987e5; --seq-650: #6da7ec; --seq-700: #9ec5f4;
  --good-text: #0ca30c;
  --sidebar: #101d47;
  --sidebar-2: #0b1436;
  --sidebar-ink: #c5d0e8;
  --shadow: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .55);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, .65);
  --tint: color-mix(in srgb, var(--series-1) 18%, transparent);
}
@media (prefers-color-scheme: dark) {
  /* MIRROR of :root[data-theme="dark"] above — same values, for people
     who have never touched the toggle. Keep the two identical; a QA
     check fails if they drift. Edit the block above, then re-sync. */
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0a0e16;
    --surface: #121926;
    --ink: #f1f5f9;
    --ink-2: #cbd5e1;
    --muted: #8b98a8;
    --grid: #1e2735;
    --baseline: #334155;
    --border: #212c3d;
    --head: #dce6f7;          /* navy is unreadable on a dark ground */
    --critical: #ff6f6f;      /* the light-theme red only reaches 3.7:1 here */
    --warning: #ffc247;
    --serious: #ff9d72;
    --good: #0e7a3c;          /* the tint behind a good badge, kept dark */
    --good-text: #7ce8a8;
    --series-1: #2bc4d6;
    --cat-2: #008300; --cat-3: #d55181; --cat-4: #c98500; --cat-5: #199e70; --cat-6: #d95926;
    --seq-250: #184f95; --seq-350: #1c5cab; --seq-450: #256abf;
    --seq-550: #3987e5; --seq-650: #6da7ec; --seq-700: #9ec5f4;
    --good-text: #0ca30c;
    --sidebar: #101d47;
    --sidebar-2: #0b1436;
    --sidebar-ink: #c5d0e8;
    --shadow: 0 1px 3px rgba(0, 0, 0, .5);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .55);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, .65);
    --tint: color-mix(in srgb, var(--series-1) 18%, transparent);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.005em;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--page);
  color: var(--ink);
  display: flex;
  overflow: hidden;              /* app shell: sidebar stays fixed, only #main scrolls */
}
/* headings: tighter tracking as size grows, bolder, never blurry (Framer) */
h1, h2, h3 { font-weight: 750; letter-spacing: -.02em; }
/* numbers that line up in a column get even-width digits; big standalone
   figures (hero, tile value, donut centre) keep proportional — tabular reads
   loose at display sizes (dataviz rule) */
.num, td.num, th.num, .rank-val, .dl-val, .pager .pinfo { font-variant-numeric: tabular-nums; }

/* thin, subtle scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: var(--baseline) transparent; }
*::-webkit-scrollbar { width: 9px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--baseline); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* One number drives the shell: the sidebar's width and the header's left edge
   both read it, so collapsing the menu is a single variable change. Collapsed,
   it becomes a rail — the icons stay, only the words go. */
:root { --navw: 236px; }
body.navrail { --navw: 68px; }

/* Every icon gets a sane size by default. Without this an icon() dropped into
   a new context renders at its natural SVG size — which is how a location pin
   ended up the size of a thumbnail. Specific contexts override below. */
.ic { width: 16px; height: 16px; flex: none; }

/* the menu button and its backdrop only exist once the sidebar goes off-canvas
   (see the responsive block at the end of this file) */
#navtoggle, #nav-back { display: none; }

/* ---- collapsed rail: icons only, still one tap from every page ---- */
body.navrail #sidebar .logo { flex-direction: column; gap: 10px; padding: 16px 0 12px;
  justify-content: center; }
body.navrail #sidebar .logo > span:not(.brand-mark) { display: none; }
body.navrail .navhide { margin: 0; }
body.navrail #nav { padding: 8px 10px; }
body.navrail #nav .cap { display: none; }
body.navrail #nav a { justify-content: center; padding: 11px 0; gap: 0; }
body.navrail #nav a .nlabel { display: none; }
body.navrail #nav a.active { box-shadow: none; }

/* the header brand only stands in where the sidebar shows nothing at all
   (a phone, where the panel is off-canvas) */
.hdr-brand { display: none; align-items: center; gap: 10px; margin-right: auto; }

/* the roadmap link that lives in the header */
.hdr-tab { display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border-radius: 20px; text-decoration: none; font-size: 12.5px; font-weight: 650;
  color: var(--ink-2); background: color-mix(in srgb, var(--ink) 6%, transparent);
  transition: background .15s var(--ease), color .15s var(--ease); }
.hdr-tab:hover { background: var(--tint); color: var(--series-1); }
body[data-page="roadmap"] .hdr-tab { background: var(--navy); color: #fff; }
.hdr-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: var(--navy); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.hdr-brand b { font-size: 13.5px; font-weight: 800; letter-spacing: .1em; color: var(--head);
  white-space: nowrap; }

/* collapse control, tucked at the end of the sidebar's brand row */
.navhide { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 9px;
  border: none; box-shadow: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); color: #cfd9ef;
  transition: background .15s var(--ease), color .15s var(--ease); }
.navhide:hover { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; }
.navhide .ic { width: 16px; height: 16px; }

/* ---------- sidebar: deep navy, teal active accent ---------- */
#sidebar {
  width: var(--navw); min-width: var(--navw); overflow: hidden;
  transition: width .22s var(--ease), min-width .22s var(--ease);
  background: linear-gradient(185deg, var(--sidebar), var(--sidebar-2));
  color: var(--sidebar-ink);
  display: flex; flex-direction: column;
  height: 100%; z-index: 20;
}
#sidebar .logo {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 18px 16px;
}
#sidebar .logo .brand-mark {
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff; letter-spacing: 0;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
#sidebar .logo b { color: #fff; font-size: 15px; letter-spacing: .01em; line-height: 1.1; display: block; }
#sidebar .logo small { display: block; color: #8ea0c8; margin-top: 2px; font-size: 11px; letter-spacing: .01em; }
#nav { flex: 1; overflow-y: auto; padding: 10px 14px; }
#nav .cap {
  padding: 16px 12px 7px; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; color: #6f80a8; text-transform: none;
}
#nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin: 2px 0; border-radius: 11px;
  color: var(--sidebar-ink); position: relative;
  text-decoration: none; font-weight: 550; font-size: 14px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
#nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
#nav a.active { color: #fff; font-weight: 650;
  background: color-mix(in srgb, var(--teal) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--teal); }
#nav a.active .ico { color: var(--teal); }
#nav a .ico { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; opacity: .85; }
#nav a .ico .ic { width: 18px; height: 18px; }
#nav a.active .ico, #nav a:hover .ico { opacity: 1; }
#nav a.modswitch { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
#nav a.modswitch:hover { opacity: 1; }
/* ---------- top-right app header: theme toggle + profile menu ---------- */
#apphdr {
  position: fixed; top: 0; left: var(--navw); right: 0; height: 56px; z-index: 30;
  transition: left .22s var(--ease);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 0 26px; background: color-mix(in srgb, var(--page) 85%, transparent);
  backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--border);
}
body.home #apphdr { left: 0; background: transparent; backdrop-filter: none; border-bottom: none; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 12px; flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--head);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.icon-btn:hover { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 55%, var(--border)); background: var(--tint); }
.icon-btn .ic { width: 22px; height: 22px; stroke-width: 2; }
#profile {
  display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none;
  padding: 4px 10px 4px 4px; border-radius: 24px; border: 1px solid var(--border);
  background: var(--surface); transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
#profile:hover { border-color: color-mix(in srgb, var(--series-1) 40%, var(--border)); box-shadow: var(--shadow); }
#profile .avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--accent-grad);
  color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
#profile .pname { font-size: 13px; font-weight: 600; color: var(--ink); max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#profile .caret { color: var(--muted); font-size: 11px; transition: transform .15s var(--ease); }
#apphdr.open #profile .caret { transform: rotate(180deg); }
#profile-menu {
  position: absolute; top: 48px; right: 22px; width: 232px; z-index: 31;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 8px; display: none;
}
#apphdr.open #profile-menu { display: block; }
.pm-head { padding: 8px 10px 6px; display: flex; flex-direction: column; gap: 2px; }
.pm-head b { font-size: 13.5px; color: var(--ink); }
.pm-role { font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: .05em; }
.pm-invite { font-size: 11px; color: var(--ink-2); padding: 6px 10px; margin: 2px 0 6px;
  background: var(--tint); border-radius: 7px; word-break: break-all; }
.pm-invite:empty { display: none; }
.pm-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 8px; padding: 9px 10px;
  font-size: 13px; color: var(--ink); transition: background .12s var(--ease);
}
.pm-item:hover { background: var(--tint); }
.pm-item.danger { color: var(--critical); background: transparent; border: none; }
.pm-item.danger:hover { background: color-mix(in srgb, var(--critical) 12%, transparent); }

/* ---------- main ---------- */
#main { flex: 1; min-width: 0; padding: 78px 30px 48px; overflow-x: hidden; overflow-y: auto; height: 100%; }
/* keep content readable on ultrawide monitors */
#main > * { max-width: 1480px; margin-left: auto; margin-right: auto; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 2px 0 20px;
  margin-bottom: 22px;
}
.topbar h1 { font-size: 26px; margin: 0; font-weight: 780; letter-spacing: -.03em; color: var(--head); }
.topbar .sub { color: var(--muted); font-size: 13px; margin-top: 4px; font-weight: 500; }
.actions { display: flex; gap: 9px; flex-wrap: wrap; }

button, .btn {
  font: inherit; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--ink);
  padding: 9px 16px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  box-shadow: var(--shadow);
  transition: border-color .15s var(--ease), background .15s var(--ease),
              box-shadow .15s var(--ease), transform .08s var(--ease);
}
button:hover, .btn:hover { border-color: var(--baseline); box-shadow: var(--shadow-md); }
button:active, .btn:active { transform: translateY(1px); }
button.primary, .btn.primary {
  background: var(--accent-grad); border-color: transparent; color: #fff; border-radius: 24px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--navy) 30%, transparent);
}
button.primary:hover, .btn.primary:hover { filter: brightness(1.08); box-shadow: 0 10px 26px color-mix(in srgb, var(--navy) 40%, transparent); }
button.ghost { border: none; background: none; color: var(--series-1); padding: 4px 7px; box-shadow: none; }
button.ghost:hover { background: var(--tint); box-shadow: none; }
.rowbtns { display: flex; gap: 2px; justify-content: flex-end; white-space: nowrap; }

/* ---- page loader: brand mark over three bouncing gradient dots ---- */
.ld-wrap { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px; padding: 64px 0; }
.ld-mark { width: 58px; height: 58px; border-radius: 17px; display: flex;
  align-items: center; justify-content: center; font-size: 27px;
  background: var(--accent-grad);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--series-1) 40%, transparent);
  animation: ld-pulse 1.8s ease-in-out infinite; }
@keyframes ld-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.ld-dots { display: flex; gap: 11px; align-items: flex-end; height: 26px; }
.ld-dots span { width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent-grad); animation: ld-bounce 1.1s ease-in-out infinite; }
.ld-dots span:nth-child(2) { animation-delay: .16s; }
.ld-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes ld-bounce {
  0%, 100% { transform: translateY(0); opacity: .5; }
  40% { transform: translateY(-16px); opacity: 1; }
}
.ld-text { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.ld-dd::after { content: ""; animation: ld-dd 1.4s steps(1, end) infinite; }
@keyframes ld-dd { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@media (prefers-reduced-motion: reduce) {
  .ld-mark, .ld-dots span, .ld-dd::after { animation: none; }
}
button:disabled { opacity: .45; cursor: default; box-shadow: none; }

input, select, textarea {
  font: inherit; font-size: 13px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--grid); border-radius: 8px;
  padding: 7px 11px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--baseline); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--series-1);
  box-shadow: 0 0 0 3px var(--tint);
}
/* filter toolbar — a single cohesive control bar sitting above each list */
.filters {
  display: flex; gap: 7px 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px; padding: 9px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow);
}
.filters > input, .filters .dd-btn { height: 34px; padding-top: 0; padding-bottom: 0; }
.filters input[type=search] {
  flex: 1 1 210px; min-width: 190px; max-width: 320px;
  padding-left: 34px; border-color: var(--border);
  background-repeat: no-repeat; background-position: 12px center; background-size: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239aa7b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
}
.filters .spacer { flex: 1; }
.filters .count { color: var(--muted); font-size: 12px; margin-left: auto;
  font-variant-numeric: tabular-nums; font-weight: 500; }
/* date / number filter inputs sit at the same height as the rest of the bar */
.filters .fdate, .filters .fnum { height: 36px; font-size: 12.5px; color-scheme: light dark; }
.filters .fnum { width: 96px; }
.filters .fdate { width: 150px; }

/* ---------- cards & tiles ---------- */
.grid { display: grid; gap: 20px; align-items: start; }
/* Flex, not grid, on purpose. A grid fixes the column count from the container
   width, so a row of five with a sixth tile left over drops that one into a
   lane of its own with four empty lanes beside it — which reads as broken
   rather than as a wrap. Flexed, whatever ends up on the last row spreads to
   fill it, so the strip is even at every width and on every page. */
.tiles { display: flex; flex-wrap: wrap; margin-bottom: 20px; }
.tiles > .tile { flex: 1 1 190px; min-width: 0; }
.tile {
  background: var(--surface); border: none;
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; position: relative; min-width: 0;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.tile.link { cursor: pointer; }
.tile.link:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.tile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.tile-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--series-1); background: var(--tint);
}
.tile-ico .ic { width: 20px; height: 20px; display: block; }
.tile .k { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .v { font-size: 26px; font-weight: 760; margin-top: 4px; letter-spacing: -.03em; line-height: 1.05; }
.tile .d { color: var(--ink-2); font-size: 12px; margin-top: 5px; line-height: 1.3; }
/* trend delta chip (top-right of a KPI card) + inline sparkline */
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: 11px;
  padding: 3px 8px; border-radius: 20px; letter-spacing: -.01em; white-space: nowrap; line-height: 1; }
.delta.up { color: var(--good-text); background: color-mix(in srgb, var(--good) 15%, transparent); }
.delta.dn { color: var(--critical); background: color-mix(in srgb, var(--critical) 13%, transparent); }
.delta.flat { color: var(--ink-2); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.spark { width: 100%; height: 30px; margin-top: 10px; display: block; }
.tile-go {
  color: var(--muted); font-size: 16px; line-height: 1;
  opacity: 0; transform: translateX(-4px); transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.tile.link:hover .tile-go { opacity: .6; transform: translateX(0); color: var(--series-1); }
/* tone accents: colour the icon glyph + value to match state */
.tile.tone-warn .tile-ico { color: color-mix(in srgb, var(--warning) 82%, var(--ink)); background: color-mix(in srgb, var(--warning) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 34%, transparent); }
.tile.tone-warn .v { color: color-mix(in srgb, var(--warning) 72%, var(--ink)); }
.tile.tone-crit .tile-ico { color: var(--critical); background: color-mix(in srgb, var(--critical) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--critical) 32%, transparent); }
.tile.tone-crit .v { color: var(--critical); }
.tile.tone-good .tile-ico { color: var(--good); background: color-mix(in srgb, var(--good) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 28%, transparent); }
.tile.alert { border-left: 3px solid var(--critical); }
.tile.alert .v { color: var(--critical); }
.card {
  background: var(--surface); border: none;
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-md);
  min-width: 0;
  transition: box-shadow .18s var(--ease);
}
.card:hover { box-shadow: var(--shadow-lg); }
/* stacked sections in a page flow need a gap; inside a grid the gap handles it */
.card, .tablewrap, .two-col, .three-col { margin-bottom: 20px; }
.grid > .card, .two-col > .card, .three-col > .card { margin-bottom: 0; }
#main > .backlink + .topbar { margin-top: 0; }
.card h3 {
  margin: 0 0 18px; font-size: 15.5px; color: var(--head);
  letter-spacing: -.01em; font-weight: 750;
  display: flex; align-items: center; gap: 0;
}
.card h3 .total {
  margin-left: auto; color: var(--ink-2); font-size: 14px; letter-spacing: 0;
  text-transform: none; font-weight: 700;
}
/* side-by-side cards stretch to equal height so their bottoms line up */
.two-col { grid-template-columns: 1fr 1fr; align-items: stretch; }
.three-col { grid-template-columns: 1fr 1fr 1fr; align-items: stretch; }
.two-col > .card, .three-col > .card { display: flex; flex-direction: column; }
@media (max-width: 1150px) {
  .two-col { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr; }
}

/* action chips strip */
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.chips-cap { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: .07em; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 12px 4px 10px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}
.chip b { font-size: 12.5px; }
.chip::before { content: "●"; font-size: 8px; }
.chip.crit { color: var(--critical); } .chip.crit::before { color: var(--critical); }
.chip.warn::before { color: var(--warning); }
.chip.plain::before { color: var(--muted); }
.chip:hover { border-color: var(--series-1); box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ---------- tables ---------- */
.tablewrap {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
/* the grid is bounded to the viewport and scrolls INSIDE itself (JS sets
   max-height); the header row stays pinned so columns are always labelled.
   A wide grid pans sideways inside its own box — squeezing 16 columns into
   the frame just folds every remark into five lines of dead row height. */
.gridscroll { overflow-x: auto; overflow-y: auto; border-radius: inherit; }
.gridscroll thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--navy);
  background-clip: padding-box;
}
.card .tablewrap { border: none; box-shadow: none; border-radius: 0; max-height: none; }
.card .gridscroll { overflow-x: auto; overflow-y: hidden; }
table { border-collapse: collapse; width: 100%; font-size: 13px; table-layout: auto; }
/* short cells stay on one line (dates never break); only the long text
   columns (item / project / remark) wrap, and they shrink to fit the width */
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--grid);
  vertical-align: middle; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
td.wrap { white-space: normal; min-width: 160px; }
/* inside a card (dashboard widgets, half-width) wrap columns stay compact so
   the table never overflows its card and forces a horizontal scrollbar */
.card td.wrap, .card th { min-width: 0; }
.card td.wrap { max-width: 220px; }
th {
  position: sticky; top: 0; z-index: 1;
  background: var(--navy);
  border-bottom: none;
  color: rgba(255, 255, 255, .8); font-size: 11px; font-weight: 700;
  text-transform: none; letter-spacing: .04em;
  user-select: none;
  transition: color .12s var(--ease), background .12s var(--ease);
}
th.sortable { cursor: pointer; }
th .sort { margin-left: 5px; font-size: 9px; color: rgba(255, 255, 255, .45); opacity: 0; transition: opacity .12s var(--ease); }
th.sortable:hover .sort, th .sort.on { opacity: 1; }
th .sort.on { color: var(--teal); }
th.sortable:hover { color: #fff; background: var(--navy-2); }
tbody tr:nth-child(even) td { background-color: color-mix(in srgb, var(--ink) 2%, transparent); }
tbody tr td { transition: background-color .1s var(--ease); }
tbody tr:hover td { background-color: var(--tint); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono {
  font-family: var(--font-mono);
  font-size: 11.5px; color: var(--ink-2); letter-spacing: .02em;
}
tfoot td {
  border-top: 1.5px solid var(--border); border-bottom: none;
  font-weight: 750; font-size: 13px; color: var(--head);
  background: color-mix(in srgb, var(--navy) 3.5%, var(--surface));
  position: sticky; bottom: 0; z-index: 2;   /* stays visible at the grid's bottom */
}
tfoot .tfoot-total { color: var(--head); font-weight: 750; }
tfoot .tfoot-rows { color: var(--muted); font-weight: 500; font-size: 11.5px; margin-left: 8px; }
tr.clickable { cursor: pointer; }
.backlink { display: inline-block; margin: 2px 0 10px; color: var(--series-1);
  font-size: 12.5px; font-weight: 600; text-decoration: none; }
.backlink:hover { text-decoration: underline; }
/* contained magnitude bar at a cell's bottom edge (not a full-cell wash) */
td.hasbar .cellbar { display: none; }   /* magnitude bars removed — cleaner grid */
.cell-dash { color: var(--muted); opacity: .5; }   /* soften empty-cell placeholders */
.empty { padding: 22px; text-align: center; color: var(--muted); }
.pager {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--grid);
}
.pager .pinfo { flex: 1; font-variant-numeric: tabular-nums; }
.pager button { padding: 2px 9px; font-size: 12px; }
.pager .psizes { display: inline-flex; gap: 2px; }
.pager .psizes button { border: none; background: none; color: var(--muted); padding: 2px 7px; }
.pager .psizes button.on {
  color: var(--series-1); font-weight: 700;
  background: color-mix(in srgb, var(--series-1) 12%, transparent); border-radius: 5px;
}

/* ---------- badges ---------- */
/* filled, tinted status pills — colour-coded so state reads at a glance */
.badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 10px;
  border: none; color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 7%, var(--surface));
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: currentColor; opacity: .9; }
.badge.good { color: var(--good-text); background: color-mix(in srgb, var(--good) 15%, var(--surface)); }
.badge.warn { color: color-mix(in srgb, var(--warning) 72%, var(--ink)); background: color-mix(in srgb, var(--warning) 17%, var(--surface)); }
.badge.serious { color: var(--serious); background: color-mix(in srgb, var(--serious) 16%, var(--surface)); }
.badge.crit { color: var(--critical); background: color-mix(in srgb, var(--critical) 13%, var(--surface)); }
.badge.info { color: var(--series-1); background: color-mix(in srgb, var(--series-1) 13%, var(--surface)); }
.badge.plain { color: var(--muted); background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }

/* ---------- charts ---------- */
.hbar-row { display: grid; grid-template-columns: 118px 1fr 84px; gap: 9px; align-items: center; margin: 5px 0; }
.hbar-row .lbl { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.hbar-track { height: 16px; border-radius: 6px; position: relative; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.hbar-fill { height: 100%; border-radius: 6px; background: var(--series-1); min-width: 3px;
  box-shadow: inset 0 -7px 9px -7px rgba(0, 0, 0, .3); transition: width .4s var(--ease); }
.hbar-row .val { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink); }
.hbar-row:hover .hbar-fill { filter: brightness(1.12); }

#tooltip {
  position: fixed; z-index: 99; pointer-events: none; display: none;
  background: var(--ink); color: var(--page);
  padding: 6px 10px; border-radius: 6px; font-size: 12px; max-width: 320px; white-space: pre-line;
}

/* ---------- modal (always centered on screen) ---------- */
#modal-back {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 24px 16px;
}
#modal-back.open { display: flex; }
#modal {
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  width: 100%; max-width: 560px; padding: 20px 22px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  animation: pop .17s var(--ease);
}
@keyframes pop {
  from { transform: scale(.97) translateY(6px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
#modal-back, #dlg-back { animation: fade .15s var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- dialog (replaces native confirm / prompt / alert) ---------- */
#dlg-back {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: none; align-items: center; justify-content: center; z-index: 90; padding: 16px;
}
#dlg-back.open { display: flex; }
#dlg {
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  width: 100%; max-width: 420px; padding: 20px 22px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  animation: pop .17s var(--ease);
}
#dlg h2 { margin: 0 0 8px; font-size: 15px; }
#dlg .msg { font-size: 13px; color: var(--ink-2); white-space: pre-line; margin-bottom: 14px; }
#dlg input { width: 100%; margin-bottom: 8px; }
#dlg .btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* reminder message composer: tone chips + editable message + optional AI draft */
.composer { display: flex; flex-direction: column; gap: 11px; text-align: left; }
.cmp-hint { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.cmp-tones { display: flex; flex-wrap: wrap; gap: 7px; }
.cmp-ta { width: 100%; min-height: 150px; resize: vertical; font-size: 13.5px;
  line-height: 1.55; font-family: inherit; padding: 11px 13px; }
.cmp-ai { align-self: flex-start; font-weight: 650; }

/* ---------- sign-in: a branded step-by-step, not a form dump ----------
   The backdrop goes full navy; the card walks pick-a-profile -> password,
   with first-login and account-creation folded behind their own steps. */
#dlg-back.login { background: linear-gradient(160deg, var(--navy-2), var(--navy-deep) 70%); }
#dlg-back.login #dlg { max-width: 400px; padding: 30px 30px 22px; }
.login-head { display: flex; flex-direction: column; align-items: center; gap: 3px;
  margin-bottom: 20px; text-align: center; }
.login-head .login-mark {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: var(--accent-grad); margin-bottom: 8px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--series-1) 40%, transparent);
}
.login-head b { font-size: 17px; letter-spacing: .12em; }
.login-head small { color: var(--muted); font-size: 11.5px; letter-spacing: .02em; }
.login-title { font-size: 14.5px; font-weight: 750; color: var(--ink); text-align: center;
  margin-bottom: 14px; }
/* profile cards */
#dlg .userlist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
#dlg .userlist button {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 11px 14px; border-radius: 12px; font-weight: 600; box-shadow: none;
  transition: border-color .13s var(--ease), background .13s var(--ease),
              transform .1s var(--ease); }
#dlg .userlist button:hover { border-color: var(--series-1); background: var(--tint);
  transform: translateY(-1px); }
#dlg .userlist .av { width: 34px; height: 34px; font-size: 12.5px; }
#dlg .userlist .uname { flex: 1; font-size: 13.5px; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dlg .userlist .uid { color: var(--muted); font-size: 10.5px; font-weight: 600; flex: none; }
/* the password step */
.login-back { border: none; background: none; box-shadow: none; padding: 0 0 12px;
  color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.login-back:hover { color: var(--series-1); background: none; box-shadow: none; }
.login-who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.login-who .av { width: 44px; height: 44px; font-size: 15px; }
.login-who .uname { font-size: 15.5px; font-weight: 750; color: var(--ink); }
.login-who .uid { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.login-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.55;
  background: color-mix(in srgb, var(--series-1) 7%, transparent);
  border-radius: 10px; padding: 10px 13px; margin-bottom: 12px; }
.pw-wrap { position: relative; margin-bottom: 8px; }
.pw-wrap input { margin-bottom: 0; padding-right: 42px; }
.pw-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: none; background: none; box-shadow: none;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  cursor: pointer; border-radius: 8px; padding: 0; }
.pw-eye:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent);
  box-shadow: none; }
.pw-eye.on { color: var(--series-1); }
.pw-eye .ic { width: 17px; height: 17px; }
#dlg .btns .login-go { width: 100%; justify-content: center; padding: 11px 0; font-size: 13.5px; }
.login-link { display: block; width: 100%; text-align: center; margin-top: 14px;
  border: none; background: none; box-shadow: none; color: var(--series-1);
  font-size: 12.5px; font-weight: 650; cursor: pointer; padding: 8px 0; }
.login-link:hover { text-decoration: underline; background: none; box-shadow: none; }
.login-err { display: none; margin-top: 12px; font-size: 12.5px; font-weight: 600;
  color: var(--critical); background: color-mix(in srgb, var(--critical) 9%, transparent);
  border-radius: 9px; padding: 9px 13px; text-align: center; }
.login-err.on { display: block; }
button.danger { background: var(--critical); border-color: var(--critical); color: #fff; }
#modal h2 { margin: 0 0 13px; font-size: 15px; }
#modal .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 13px; }
#modal .fields label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
#modal .fields label.full { grid-column: 1 / -1; }
#modal .fields .field-hint { font-size: 10.5px; font-weight: 500; color: var(--muted);
  line-height: 1.4; margin-top: 1px; }
#modal .fields input, #modal .fields select, #modal .fields textarea { width: 100%; }
#modal .btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
#modal .err { color: var(--critical); font-size: 12.5px; margin-top: 10px; display: none; }

/* ---------- custom dropdown (replaces every native select) ---------- */
.dd { position: relative; display: inline-block; }
.dd-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 138px; width: 100%;
  font: inherit; font-size: 13px; font-weight: 500; text-align: left;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 7px 11px; cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.dd-btn:hover { border-color: var(--baseline); background: color-mix(in srgb, var(--ink) 2%, var(--surface)); }
.dd-btn:focus { outline: none; border-color: var(--series-1); box-shadow: 0 0 0 3px var(--tint); }
.dd-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-arrow { color: var(--muted); font-size: 8px; flex: none; transition: transform .16s var(--ease), color .15s var(--ease); }
.dd:focus-within .dd-arrow { transform: rotate(180deg); color: var(--series-1); }
.dd-menu {
  /* fixed so a modal's scrollbox can't clip it; JS places it against the field */
  display: none; position: fixed; z-index: 120;
  min-width: 190px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 5px;
}
/* type-to-search box at the top of a long dropdown; the options scroll under it */
.dd-search {
  width: 100%; height: 32px; margin-bottom: 5px; padding: 0 10px 0 30px;
  border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 12.5px;
  background: var(--surface) no-repeat 9px center / 14px; color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa7b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
}
.dd-search:focus { outline: none; border-color: var(--series-1); box-shadow: 0 0 0 3px var(--tint); }
.dd-opts { max-height: 240px; overflow-y: auto; }
.dd-opt {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 7px; cursor: pointer;
  font-size: 12.5px; white-space: nowrap;
}
.dd-opt:hover, .dd-opt.hl { background: color-mix(in srgb, var(--series-1) 10%, transparent); }
.dd-opt.sel { font-weight: 600; background: var(--tint); }
.dd-opt.none { cursor: default; color: var(--muted); }
.dd-opt.none:hover { background: none; }
.dd-check { width: 14px; flex: none; color: var(--series-1); font-weight: 700; }

/* ---------- filter chips, segmented control, labels ---------- */
.filters .flabel { font-size: 10.5px; font-weight: 700; text-transform: none;
  letter-spacing: .06em; color: var(--muted); }
.filters .fdiv { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }
.fchips { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.fchip:hover { border-color: var(--baseline); }
.fchip.on { background: var(--series-1); border-color: var(--series-1); color: #06222a;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--series-1) 32%, transparent); }
.fav { width: 19px; height: 19px; border-radius: 50%; flex: none; color: #fff;
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.fchip.on .fav { background: rgba(255, 255, 255, .25) !important; }
.fclear { display: inline-flex; align-items: center; height: 34px; border: none;
  background: none; box-shadow: none; color: var(--series-1); font-weight: 600;
  font-size: 12.5px; padding: 0 10px; border-radius: 8px; white-space: nowrap; }
.fclear:hover { background: var(--tint); box-shadow: none; border-color: transparent; }
.fclear:focus-visible { outline: 2px solid color-mix(in srgb, var(--teal) 60%, transparent);
  outline-offset: 1px; }

/* Filter-bar groups: related controls travel as one block, so when the bar
   wraps it breaks between groups instead of stranding a lone chip or leaving
   Clear floating in the middle of a row. */
.fgrp { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fend { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.fend .fclear, .fend .count { margin-left: 0; }
/* segmented control (few short options) — sits on the filter bar's 34px baseline */
.seg { display: inline-flex; align-items: center; gap: 2px; height: 34px;
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
  border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.seg button { display: inline-flex; align-items: center; height: 26px;
  border: none; background: none; box-shadow: none; font: inherit; font-size: 12px;
  font-weight: 600; color: var(--ink-2); padding: 0 12px; border-radius: 7px; cursor: pointer;
  white-space: nowrap; transition: background .15s var(--ease), color .15s var(--ease); }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--surface); color: var(--series-1); box-shadow: var(--shadow); }
#modal .dd { width: 100%; }

/* ---------- searchable picker ---------- */
.picker { position: relative; }
/* fixed, not absolute: a modal scrolls its own content, and an absolute list
   would be clipped by that scroll box. JS places it against the field. */
.picker-drop {
  display: none; position: fixed; z-index: 120;
  background: var(--surface); border: 1px solid var(--grid); border-radius: 8px;
  max-height: 280px; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.picker-opt { padding: 7px 11px; cursor: pointer; border-bottom: 1px solid var(--grid); }
.picker-opt:last-child { border-bottom: none; }
.picker-opt:hover, .picker-opt.hl { background: color-mix(in srgb, var(--series-1) 10%, transparent); }
.picker-opt .plabel { font-size: 12.5px; font-weight: 600; }
.picker-opt .psub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.picker-opt.none { cursor: default; color: var(--muted); }

/* ---------- toast ---------- */
#toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--page); border-radius: 9px; padding: 10px 18px;
  font-size: 13px; font-weight: 500; display: none; z-index: 60; box-shadow: var(--shadow-lg);
}

/* ---------- KPI slide-in drawer (right side) ---------- */
.drawer-back { position: fixed; inset: 0; background: color-mix(in srgb, var(--navy) 42%, transparent);
  z-index: 80; opacity: 0; transition: opacity .25s var(--ease); }
.drawer-back.open { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw;
  background: var(--surface); box-shadow: var(--shadow-lg); z-index: 81;
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.drawer-back.open .drawer { transform: translateX(0); }
.drawer-head { background: linear-gradient(150deg, var(--navy-2), var(--navy)); color: #fff;
  padding: 22px 22px 24px; position: relative; overflow: hidden; }
.drawer-head::after { content: ""; position: absolute; right: -40px; top: -50px; width: 170px; height: 170px;
  border-radius: 50%; background: radial-gradient(circle, rgba(31,182,201,.4), transparent 70%);
  pointer-events: none; }
.drawer-ico { width: 44px; height: 44px; border-radius: 13px; background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; position: relative; }
.drawer-ico .ic { width: 22px; height: 22px; color: #fff; }
.drawer-k { font-size: 12.5px; color: rgba(255,255,255,.8); font-weight: 600; margin-top: 16px; position: relative; }
.drawer-v { font-size: 34px; font-weight: 770; letter-spacing: -.03em; margin-top: 4px; position: relative; }
.drawer-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 9px;
  border: none; background: rgba(255,255,255,.16); color: #fff; font-size: 15px; cursor: pointer; box-shadow: none;
  z-index: 3; }
.drawer-close:hover { background: rgba(255,255,255,.28); box-shadow: none; }
.drawer-body { padding: 22px; overflow-y: auto; flex: 1; }
.drawer-body h4 { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }
.drawer-info { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.drawer-detail { margin-top: 16px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--navy) 4%, var(--surface)); font-size: 13px; color: var(--ink-2); }
.drawer-cta { display: block; margin-top: 20px; text-align: center; }
/* row-detail drawer: smaller title + a clean label/value list of every column */
.rowdrawer .drawer-v { font-size: 19px; line-height: 1.28; margin-top: 6px; }
.rowdl { display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; font-size: 13px; align-items: baseline; }
.rowdl dt { color: var(--muted); font-weight: 600; }
.rowdl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.rowdl dd a.link { overflow-wrap: anywhere; }

/* ---------- sales: brand-interest chips + order progress bar ---------- */
.bchips { display: flex; gap: 4px; flex-wrap: wrap; }
.bchip { font-size: 10px; font-weight: 700; letter-spacing: .01em; padding: 2px 7px;
  border-radius: 5px; white-space: nowrap;
  background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2); }
.bchip.good { background: var(--good-bg, color-mix(in srgb, var(--good) 14%, transparent)); color: var(--good-text, var(--good)); }
.bchip.warn { background: color-mix(in srgb, var(--warning) 18%, transparent); color: #8a5b06; }
.bchip.info { background: var(--tint); color: var(--series-1); }
.bchip.plain { opacity: .6; }
:root[data-theme="dark"] .bchip.warn { color: var(--warning); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bchip.warn { color: var(--warning); } }

/* supplied-vs-order progress, used in the order book and dashboards */
.prog { display: flex; align-items: center; gap: 8px; min-width: 108px; }
.prog-track { flex: 1; height: 7px; border-radius: 4px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, transparent); }
.prog-fill { display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--series-1), var(--good)); min-width: 2px; }
.prog-pct { font-size: 11.5px; font-weight: 650; color: var(--ink-2);
  font-variant-numeric: tabular-nums; width: 32px; text-align: right; }

/* lead freshness dot */
.rotdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.rotdot.fresh { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.rotdot.warm { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 22%, transparent); }
.rotdot.cold { background: var(--critical); box-shadow: 0 0 0 3px color-mix(in srgb, var(--critical) 22%, transparent); }
/* WhatsApp reminder button tint */
.rowbtns .wa { color: #128c3e; border-color: color-mix(in srgb, #25d366 45%, var(--border)); }
.rowbtns .wa:hover { background: color-mix(in srgb, #25d366 12%, transparent); color: #0f7a36; }

/* ---------- Full-view toggle ON the table (top-right strip) ---------- */
.tbl-toolbar { display: flex; justify-content: flex-end; align-items: center;
  padding: 6px 10px; background: var(--surface); flex: none;
  border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.card .tbl-toolbar { display: none; }   /* dashboard card widgets keep no toolbar */
.tbl-focus { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--head);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow);
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.tbl-focus .ic { width: 16px; height: 16px; stroke-width: 2; }
.tbl-focus:hover { background: var(--tint); color: var(--teal);
  border-color: color-mix(in srgb, var(--teal) 55%, var(--border)); }
.tbl-focus.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- full-view (focus) mode: filters + the matrix take the whole screen ---------- */
body.focusview #sidebar { display: none; }
body.focusview #apphdr { left: 0; }
/* collapse the KPI tiles + charts so only the filters and the table remain */
body.focusview .insights { display: none; }
body.focusview .topbar .sub { display: none; }
.icon-btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- detail pane ---------- */
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 5px 13px; font-size: 12.5px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
a.link { color: var(--series-1); text-decoration: none; cursor: pointer; }
a.link:hover { text-decoration: underline; }
.section-title {
  font-size: 15px; font-weight: 750; margin: 24px 0 12px; color: var(--head);
  text-transform: none; letter-spacing: -.01em;
}
.muted { color: var(--muted); }
.right { text-align: right; }

/* ---------- lead card rows: the whole story of a lead in one line ----------
   Four bands — who/where, where it stands, when it moved, and what it's worth
   plus the two actions. Wide enough to read, narrow enough to scan a page of. */
.lrows { display: flex; flex-direction: column; gap: 12px; }
.lrow { display: grid; align-items: flex-start; gap: 16px 26px;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) 168px minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 22px; cursor: pointer; box-shadow: var(--shadow);
  transition: box-shadow .16s var(--ease), border-color .16s var(--ease); }
.lrow:hover { box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--teal) 42%, var(--border)); }

.lrow-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lrow-site { font-size: 16.5px; font-weight: 800; color: var(--ink); letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the call / WhatsApp buttons carry their brand colours here — a rep should be
   able to find the green button from across the room, VIVAAN-style */
.lrow .kacts { opacity: 1; transform: none; gap: 6px; }
.lrow .kact { width: 30px; height: 30px; border-radius: 8px; }
.lrow .kact .ic { width: 15px; height: 15px; }
.lrow .kact.wa { background: #25d366; color: #fff; }
.lrow .kact.wa:hover { background: #1fbd5a; color: #fff; }
.lrow .kact.call { background: var(--tint); color: var(--series-1, var(--teal)); }
.lrow .kact.call:hover { background: color-mix(in srgb, var(--series-1, var(--teal)) 22%, transparent); }
.lrow-sub { font-size: 12.5px; color: var(--muted); margin-top: 5px;
  display: flex; gap: 4px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.lrow-sub .mono { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 12px; }
.lrow-place { font-size: 12.5px; font-weight: 650; color: var(--series-1, var(--teal));
  margin-top: 6px; }
.lrow-id .bchips { margin-top: 8px; }

/* the state column: a solid pill in the rung's colour, then the temperature */
.lrow-state { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.stagepill { display: inline-block; color: #fff; font-size: 11.5px; font-weight: 750;
  letter-spacing: .01em; padding: 4px 12px; border-radius: 20px; white-space: nowrap; }
.temppill { display: inline-block; font-size: 11px; font-weight: 750; padding: 3px 10px;
  border-radius: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.temppill.crit { color: var(--critical); background: color-mix(in srgb, var(--critical) 13%, transparent); }
.temppill.warn { color: #8a5b06; background: color-mix(in srgb, var(--warning) 18%, transparent); }
.temppill.plain { color: var(--series-1); background: var(--tint); }
:root[data-theme="dark"] .temppill.warn { color: var(--warning); }
.lrow-live { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
  color: var(--ink-2); }
.lrow-live .rotdot { width: 8px; height: 8px;
  box-shadow: none; }
.lrow-owner { font-size: 12.5px; color: var(--muted); }

.lrow-when { font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.lrow-when .lw-k { display: inline-block; width: 42px; color: var(--muted); }
.lrow-when .lw-v { color: var(--ink); font-weight: 600; }
.lrow-when .lw-late { color: var(--critical); font-weight: 750; }

.lrow-end { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 0; }
.lrow-val { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.lrow-win { font-size: 11px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.bchip.prod { background: color-mix(in srgb, var(--series-1) 12%, transparent);
  color: var(--series-1); max-width: 150px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.lrow-note { font-size: 12.5px; color: var(--ink-2); text-align: right;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lrow-end .rowbtns { margin-top: 2px; gap: 8px; display: flex; }
.lrow-end .rowbtns button { padding: 7px 15px; font-size: 12.5px; font-weight: 650;
  border-radius: 9px; }

/* ---------- site photos on a lead ---------- */
.photogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px; margin-bottom: 4px; }
.photo { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 6%, transparent); cursor: zoom-in;
  border: 1px solid var(--border); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-miss { display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 11px; color: var(--muted); }
.photo-meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex;
  align-items: center; justify-content: space-between; gap: 6px; padding: 5px 7px;
  font-size: 10px; color: #fff;
  background: linear-gradient(transparent, rgba(16, 26, 63, .78)); }
.photo-del { border: none; background: rgba(255, 255, 255, .18); color: #fff; box-shadow: none;
  width: 20px; height: 20px; border-radius: 6px; padding: 0; font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.photo-del:hover { background: var(--critical); box-shadow: none; }
.card .logactions .primary { display: inline-flex; align-items: center; gap: 8px; }
.card .logactions .primary .ic { width: 16px; height: 16px; }
.maplink { text-decoration: none; }

/* how far the building has got */
.stageprog { min-width: 0; }
.sp-label { font-weight: 650; color: var(--ink); }
.sp-track { display: block; height: 5px; border-radius: 3px; margin: 6px 0 4px;
  background: color-mix(in srgb, var(--ink) 8%, transparent); }
.sp-fill { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--series-1), var(--good)); min-width: 3px;
  transition: width .4s var(--ease); }
.sp-step { font-size: 10.5px; color: var(--muted); }

/* ---------- forecast: what is promised by when ---------- */
.winrows { display: flex; flex-direction: column; gap: 10px; }
.winrow { display: grid; align-items: center; gap: 12px;
  grid-template-columns: 150px minmax(0, 1fr) 92px 76px 128px; }
.win-k { font-size: 13px; font-weight: 700; color: var(--ink); }
.win-track { height: 10px; border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 7%, transparent); }
.win-fill { display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--series-1), var(--good)); min-width: 3px;
  transition: width .45s var(--ease); }
.win-v { font-size: 14px; font-weight: 800; color: var(--ink); text-align: right;
  font-variant-numeric: tabular-nums; }
.win-n { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.win-risk { font-size: 11.5px; font-weight: 650; color: var(--critical); text-align: right; }
.win-risk.ok { color: var(--good-text); font-weight: 600; }
.cardnote { font-size: 11.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
@media (max-width: 860px) {
  .winrow { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .win-track { grid-column: 1 / -1; }
  .win-n, .win-risk { text-align: left; }
}

/* ---------- the stage ladder, signed off in the app ---------- */
.ladder { display: flex; flex-direction: column; gap: 22px; }
.phase-block { display: flex; flex-direction: column; }
.phase-bar { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 9px 16px; border-radius: 8px 8px 0 0; color: #fff; }
.phase-bar b { font-size: 12.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.phase-bar span { font-size: 12.5px; opacity: .93; }
.ladder .rungs { display: flex; flex-direction: column;
  border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px;
  background: var(--surface); overflow: hidden; }
.ladder .rung { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 6px 16px; align-items: start; padding: 14px 16px;
  border-bottom: 1px solid var(--grid); }
.ladder .rung:last-child { border-bottom: none; }
.ladder .rung.st-approved { background: color-mix(in srgb, var(--good) 4%, transparent); }
.ladder .rung.st-changes-requested { background: color-mix(in srgb, var(--critical) 4%, transparent); }
.ladder .rung.st-suggested { background: color-mix(in srgb, var(--series-1) 4%, transparent); }
.rung-seq { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 12px;
  font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 8px;
  padding: 4px 0; text-align: center; }
.rung-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rung-name { font-size: 14px; font-weight: 720; color: var(--ink); letter-spacing: -.01em; }
.rung-phase { font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.rung-what { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.rung-sells { font-size: 12.5px; color: var(--ink-2); margin-top: 5px;
  display: flex; gap: 7px; flex-wrap: wrap; }
.rung-sells .rs-k { color: var(--muted); font-weight: 650; white-space: nowrap; }
.rung-comment { font-size: 12.5px; color: var(--ink); margin-top: 7px; padding: 8px 11px;
  border-radius: 8px; background: color-mix(in srgb, var(--series-1) 8%, transparent); }
.rung-meta { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.rung-act { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.rung-act button { padding: 6px 13px; font-size: 12.5px; }
@media (max-width: 760px) {
  .ladder .rung { grid-template-columns: 44px minmax(0, 1fr); }
  .rung-act { grid-column: 2; justify-content: flex-start; }
}

/* ---------- roadmap board ---------- */
.rm-prog .kcol-share { height: 8px; border-radius: 5px; margin: 4px 0 2px; }
.rm-prog .kcol-sharefill { background: linear-gradient(90deg, var(--series-1), var(--good));
  opacity: 1; border-radius: 5px; }
.kcard.rm { cursor: default; }
.kcard.rm:hover { transform: none; }
.rm-d { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; }

/* ---------- notifications: bell badge + the list behind it ---------- */
#bell { position: relative; }
.bell-dot { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 9px; background: #c62828; color: #fff;
  font-size: 9.5px; font-weight: 800; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--page); }
.notif-list { display: flex; flex-direction: column; margin: 0 -22px 4px; }
.notif { display: flex; gap: 12px; padding: 13px 22px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .14s var(--ease); }
.notif:hover { background: var(--tint); }
.notif.unread { background: color-mix(in srgb, var(--series-1) 6%, transparent); }
.notif.unread .notif-t { font-weight: 750; }
.notif-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: flex;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); }
.notif.unread .notif-ic { background: var(--tint); color: var(--series-1); }
.notif-ic .ic { width: 16px; height: 16px; }
.notif-body { min-width: 0; flex: 1; }
.notif-t { font-size: 13px; font-weight: 650; color: var(--ink); line-height: 1.35;
  overflow-wrap: anywhere; }
.notif-b { font-size: 12px; color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.notif-w { font-size: 10.5px; color: var(--muted); margin-top: 4px; }

/* (the responsive block lives at the end of this file, so its overrides
   always win over the desktop rules defined above) */


/* ---------------- module launcher (home screen) ---------------- */
body.home #sidebar { display: none; }
/* home fits the viewport — no scrolling; footer pinned to the bottom */
/* The launcher has no solid header bar — only the transparent profile chip sits
   up there — so it starts near the top instead of clearing a 56px header, and
   the brand row lines up with that chip. min-height (not height) lets a short
   screen scroll rather than clip the module cards. */
body.home #main { padding: 20px 30px 22px; min-height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; }
.launcher { max-width: 1080px; width: 100%; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }
/* a contained, clearly-centred block — the generic #main>* 1480px cap made the
   launcher stretch nearly edge to edge on wide screens, reading as left-hugged */
#main > .launcher { max-width: 1200px; margin-left: auto; margin-right: auto; }
.launcher .hero {
  background:
    radial-gradient(120% 140% at 88% -10%, rgba(255,255,255,.24), transparent 55%),
    linear-gradient(135deg, #25407e, #16265c);
  color: #fff; border-radius: var(--radius); padding: 30px 34px 32px;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--series-1) 32%, transparent);
}
.launcher .hero h1 { margin: 0 0 6px; font-size: 26px; font-weight: 780; letter-spacing: -.03em; }
.launcher .hero p { margin: 0; opacity: .9; font-size: 14px; }
/* live status pills in the hero (VIVAAN-style) */
.hero-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.hpill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(2px);
}
.hpill i { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; }
.hpill.crit i { background: #ff9b9b; }
.hpill.warn i { background: #ffd67a; }

.modgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-top: 16px; align-items: stretch;
}
.modcard {
  --mc: var(--navy);
  background: var(--surface); border: none; border-radius: var(--radius);
  padding: 20px; cursor: pointer; box-shadow: var(--shadow-md);
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.mod-stock { --mc: var(--navy); }
:root[data-theme="dark"] .mod-stock { --mc: #6da7ec; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mod-stock { --mc: #6da7ec; }
}
.mod-coll  { --mc: var(--teal); }
.mod-sales { --mc: var(--cat-5); }
.mod-admin { --mc: var(--cat-6); }
.modcard::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--mc); opacity: 0; transition: opacity .18s var(--ease);
}
.modcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.modcard:hover::after { opacity: 1; }
.modcard .modico {
  width: 46px; height: 46px; border-radius: 13px; color: var(--mc);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mc) 13%, transparent);
  margin-bottom: 12px;
}
.modcard .modico .ic { width: 24px; height: 24px; }
.modcard h2 { margin: 0 0 6px; font-size: 17px; color: var(--mc); letter-spacing: -.01em; }
.modcard p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); line-height: 1.45; min-height: 2.4em; }
.modcard .modstat {
  /* pushed to the bottom so the stat line sits level across all four cards,
     however many attention numbers a card happens to be carrying */
  display: inline-block; align-self: flex-start; margin: auto 0 12px;
  padding: 5px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); background: color-mix(in srgb, var(--mc) 9%, var(--page));
  font-variant-numeric: tabular-nums;
}
.modcard .open { margin-top: auto; font-weight: 700; color: var(--mc); font-size: 13.5px; }

/* live "needs attention" numbers on a module card — click one to see the rows */
.pulserow { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 12px; }
.pulse {
  display: flex; align-items: baseline; gap: 6px; cursor: pointer;
  padding: 6px 10px 6px 9px; border-radius: 9px; font: inherit; text-align: left;
  border: 1px solid color-mix(in srgb, var(--pc) 26%, transparent);
  background: color-mix(in srgb, var(--pc) 11%, var(--surface));
  transition: background .15s var(--ease), transform .15s var(--ease);
  --pc: var(--muted);
}
.pulse:hover { background: color-mix(in srgb, var(--pc) 20%, var(--surface));
  transform: translateY(-1px); }
.pulse.crit { --pc: var(--critical); }
.pulse.warn { --pc: var(--warning); }
.pulse.plain { --pc: var(--mc); }
.pulse b { font-size: 16px; font-weight: 800; color: var(--pc);
  font-variant-numeric: tabular-nums; line-height: 1; }
.pulse span { font-size: 11.5px; font-weight: 650; color: var(--ink-2); }
.pulse-clear { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  font-weight: 650; color: var(--good-text); }
.pulse-clear .ic { width: 14px; height: 14px; }

/* ---------------- professional dashboard: hero figure + KPI row ---------------- */
/* one uniform KPI matrix: hero + tiles on a single line at desktop widths
   (hero is 2-wide); wraps only on genuinely narrow screens — never scrolls */
.dash-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; align-items: stretch; margin-bottom: 20px; }
.dash-top .tiles { display: contents; }
.dash-top .hero-card { grid-column: span 2; }
@media (max-width: 720px) { .dash-top .hero-card { grid-column: span 1; } }
.hero-card {
  background: linear-gradient(140deg, #25407e, #16265c);
  border: none; border-radius: var(--radius);
  padding: 26px; box-shadow: 0 14px 34px color-mix(in srgb, var(--series-1) 34%, transparent);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden; color: #fff;
}
.hero-card::before {          /* soft light glow, top-right */
  content: ""; position: absolute; right: -50px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 70%);
}
.hero-card .hk { position: relative; color: rgba(255, 255, 255, .82); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.hero-card .hv { position: relative; font-size: 42px; font-weight: 770; line-height: 1.08; letter-spacing: -.03em; margin: 9px 0 4px; color: #fff; }
.hero-card .hd { position: relative; color: rgba(255, 255, 255, .85); font-size: 13px; }

/* ---- SVG column chart ---- */
.svgwrap { width: 100%; }
.svgchart { width: 100%; height: auto; display: block; overflow: visible; }
.cx-grid { stroke: var(--grid); stroke-width: 1; }
.cx-base { stroke: var(--baseline); stroke-width: 1.5; }
.cx-bar { transition: opacity .15s var(--ease); }
.cx-hit { cursor: default; }
.svgchart rect[fill="transparent"]:hover ~ .cx-bar { opacity: .85; }
.cx-vlabel { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: inherit; }
.cx-xlabel { fill: var(--muted); font-size: 11px; font-family: inherit; }

/* ---- SVG donut ---- */
.donut-wrap { display: flex; align-items: center; gap: 18px; padding: 6px 2px; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; flex: none; }
.donut-track { stroke: color-mix(in srgb, var(--ink) 6%, transparent); }
.donut-seg { cursor: default; transition: opacity .15s var(--ease); }
.donut-seg:hover { opacity: .82; }
.donut-total { fill: var(--ink); font-size: 21px; font-weight: 700; font-family: inherit; letter-spacing: -.01em; }
.donut-caption { fill: var(--muted); font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: .06em; font-family: inherit; }
.donut-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 7px; }
.dl-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 9px; font-size: 12.5px; }
.dl-dot { width: 10px; height: 10px; border-radius: 3px; }
.dl-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* two book-health meters side by side (reuses the existing .gauge component) */
.meters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; }
.meters .gauge { flex: 1; min-width: 150px; }

/* ---- aging as one full-width distribution bar + breakdown ---- */
.agingviz { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.agebar { display: flex; width: 100%; height: 32px; border-radius: 9px; overflow: hidden;
  gap: 2px; background: var(--grid); }
.agebar-seg { min-width: 4px; transition: opacity .15s var(--ease); cursor: default; }
.agebar-seg:hover { opacity: .82; }
.age-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 24px; }
.age-lrow { display: grid; grid-template-columns: 13px 1fr auto auto; align-items: center;
  gap: 9px; font-size: 12.5px; }
.age-dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.age-lname { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.age-lval { color: var(--head); font-weight: 700; font-variant-numeric: tabular-nums; }
.age-lpct { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums;
  min-width: 36px; text-align: right; }
@media (max-width: 620px) { .age-legend { grid-template-columns: 1fr; } }

/* ---- attention / chase zone (NetSuite-style reminders) ---- */
.attn { display: flex; flex-direction: column; gap: 8px; }
.attn-row { display: flex; align-items: center; gap: 13px; padding: 11px 14px;
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 2.5%, var(--surface));
  border: 1px solid var(--border); border-left: 3px solid var(--muted); text-decoration: none;
  transition: background .12s var(--ease), transform .08s var(--ease); }
.attn-row:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); transform: translateX(2px); }
.attn-row.tone-crit    { border-left-color: var(--critical); }
.attn-row.tone-warn    { border-left-color: var(--warning); }
.attn-row.tone-serious { border-left-color: var(--serious); }
.attn-n { font-size: 17px; font-weight: 800; color: var(--head); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; flex: none; min-width: 54px; }
.attn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.attn-lbl { font-size: 13px; font-weight: 700; color: var(--ink); }
.attn-sub { font-size: 11.5px; color: var(--ink-2); }
.attn-go { flex: none; color: var(--muted); font-size: 18px; font-weight: 700; line-height: 1; }
.attn-row:hover .attn-go { color: var(--accent); }

/* ---- ranked bar list ---- */
.rank { display: flex; flex-direction: column; }
.rank-row {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 11px;
  padding: 7px 4px; border-radius: 8px;
}
.rank-row + .rank-row { border-top: 1px solid var(--grid); }
.rank-row.link { cursor: pointer; }
.rank-row.link:hover { background: var(--tint); }
.rank-num { color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.rank-main { min-width: 0; }
.rank-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-sub { font-size: 10.5px; color: var(--muted); margin-bottom: 4px; }
.rank-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 5%, transparent); overflow: hidden; }
.rank-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--seq-450), var(--seq-350)); transition: width .4s var(--ease); }
.rank-val { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------- launcher polish ---------------- */
.launch-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.launch-brand { display: flex; align-items: center; gap: 12px; }
.launch-brand .mark {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 800; color: #fff;
  background: var(--accent-grad); box-shadow: 0 3px 10px color-mix(in srgb, var(--series-1) 30%, transparent);
}
.launch-brand b { font-size: 17px; letter-spacing: .12em; display: block; line-height: 1.15; }
.launch-brand small { color: var(--muted); font-size: 10.5px; letter-spacing: .05em; }
.launch-user { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); }
.launch-user .avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--series-1); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.launcher .hero { position: relative; overflow: hidden; }
.hero-txt { position: relative; z-index: 1; }
.skyline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  display: flex; align-items: flex-end; gap: 3px; padding: 0 8px; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 100%);
  mask-image: linear-gradient(90deg, transparent, #000 40%, #000 100%);
}
.skyline i { flex: 1; background: rgba(255,255,255,.13); border-radius: 3px 3px 0 0; }
.modcard .open .arr { display: inline-block; transition: transform .16s ease; }
.modcard:hover .open .arr { transform: translateX(5px); }
.launch-foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: auto;
  padding-top: 16px; display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; }
.launch-foot .foot-dot { opacity: .5; }
.launch-foot .foot-brand { color: var(--head); font-weight: 750; }
.login-foot { text-align: center; color: var(--muted); font-size: 10.5px; letter-spacing: .03em; margin-top: 16px; }

/* Board / Table toggle — inherits the shared .seg control above */
:root[data-theme="dark"] .seg button.on { background: var(--navy-2); color: #fff; }

/* a stage badge reads as a plain rung label, not a pill of dots */
.badge.stage { text-transform: none; letter-spacing: 0; }

/* ---------- Kanban funnel board (all columns fit the screen, no side-scroll) ---------- */
.board-wrap { padding-bottom: 10px; }
.kboard { display: flex; gap: 10px; align-items: stretch; min-height: 340px; }
/* every column shares the width equally and shrinks to fit — the 6 rungs are
   always visible at once; only very narrow screens fall back to a scroll */
/* no column box: just a coloured stage banner, a dashed divider and the cards.
   The lightness is the point — the eye lands on the cards, not on chrome. */
.kcol { --rung: var(--muted);
  flex: 1 1 0; min-width: 150px; display: flex; flex-direction: column;
  max-height: calc(100vh - 258px); padding: 0 4px;
  transition: background .18s var(--ease); }
.kcol + .kcol { border-left: 1px dashed var(--border); }

/* solid banner, arrow-tipped so the six rungs read as one funnel */
.kcol-head { display: flex; align-items: center; gap: 7px; padding: 9px 14px 9px 12px;
  background: var(--rung); color: var(--rung-ink, #fff);
  border-radius: 5px 0 0 5px; position: relative;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }
.kcol:last-child .kcol-head { clip-path: none; border-radius: 5px; }
.kcol-head .ic { width: 15px; height: 15px; flex: none; opacity: .95; }
.kcol-name { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.kcol-n { flex: none; font-size: 12px; font-weight: 600; opacity: .85;
  font-variant-numeric: tabular-nums; }

.kcol-sub { display: flex; align-items: baseline; gap: 8px; padding: 9px 4px 0; }
.kcol-val { font-size: 12.5px; font-weight: 800; color: var(--ink); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; }
.kcol-val.muted { color: var(--muted); font-weight: 650; font-size: 11.5px; }
.kcol-due { margin-left: auto; font-size: 10px; font-weight: 750; color: var(--critical);
  background: color-mix(in srgb, var(--critical) 10%, transparent); border-radius: 5px; padding: 1px 6px; }
/* how much of the funnel sits in this rung */
.kcol-share { display: block; height: 3px; border-radius: 2px; margin: 7px 4px 0;
  background: color-mix(in srgb, var(--ink) 7%, transparent); }
.kcol-sharefill { display: block; height: 100%; border-radius: 2px; background: var(--rung);
  min-width: 2px; opacity: .55; transition: width .45s var(--ease); }

.kcol-body { padding: 10px 4px 4px; display: flex; flex-direction: column; gap: 9px;
  overflow-y: auto; flex: 1; }
.kcol-empty { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none;
  text-align: center; color: var(--muted); font-size: 11.5px; padding: 20px 8px;
  border: 1.5px dashed var(--border); border-radius: 11px; }
.kcol-empty small { font-size: 10.5px; opacity: .75; }
/* drop target feedback */
.kdrop { display: none; flex: none; border: 2px dashed var(--teal); border-radius: 11px; padding: 12px;
  text-align: center; font-size: 11.5px; font-weight: 650; color: var(--teal);
  background: color-mix(in srgb, var(--teal) 7%, transparent); }
.kcol.kover { background: color-mix(in srgb, var(--teal) 6%, transparent); border-radius: 8px; }
.kcol.kover .kdrop { display: block; }
.kcol.kover .kcol-empty { display: none; }

/* ---------- the card: white, roomy, four lines of clear hierarchy ---------- */
.kcard { position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: 7px; padding: 13px 14px 11px 15px; cursor: grab; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 7px; overflow: hidden;
  flex: none;                      /* never squash inside the scrolling column */
  transition: box-shadow .16s var(--ease), transform .12s var(--ease), border-color .16s var(--ease); }
/* left edge = how hot the lead is; scan a column without reading it */
.kcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--muted); opacity: .45; }
.kcard.temp-hot::before { background: var(--critical); opacity: 1; }
.kcard.temp-warm::before { background: var(--warning); opacity: 1; }
.kcard.temp-cold::before { background: var(--series-1, var(--teal)); opacity: .8; }
.kcard.rotting { border-color: color-mix(in srgb, var(--critical) 28%, var(--border)); }
.kcard:hover { box-shadow: var(--shadow-md); transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--teal) 45%, var(--border)); }
.kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: .35; transform: rotate(-1.2deg) scale(.98); }
body.kdragging, body.kdragging .kcard { cursor: grabbing; }

.kcard-head { display: flex; align-items: flex-start; gap: 8px; }
.kcard-site { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--ink);
  line-height: 1.32; letter-spacing: -.01em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* call / WhatsApp — quiet until you go near the card */
.kacts { display: flex; gap: 4px; flex: none; opacity: 0; transform: translateX(3px);
  transition: opacity .15s var(--ease), transform .15s var(--ease); }
.kcard:hover .kacts, .kcard:focus-within .kacts { opacity: 1; transform: none; }
/* in a table there is no card to hover, so the actions simply stay put */
.kacts.always { opacity: 1; transform: none; }
.cellrow { display: inline-flex; align-items: center; gap: 7px; }
.kact { width: 21px; height: 21px; border-radius: 6px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--muted); text-decoration: none;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  transition: background .14s var(--ease), color .14s var(--ease); }
.kact .ic { width: 11px; height: 11px; stroke-width: 2; }
.kact.call:hover { background: color-mix(in srgb, var(--series-1, var(--teal)) 18%, transparent);
  color: var(--series-1, var(--teal)); }
.kact.wa:hover { background: color-mix(in srgb, #25d366 20%, transparent); color: #128c3e; }
@media (hover: none) { .kacts { opacity: 1; transform: none; } }

.kval { font-size: 17px; font-weight: 780; color: var(--ink); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.kcard-person { font-size: 12.5px; font-weight: 650; color: var(--series-1, var(--teal));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -2px; }
.kcard-where { font-size: 11.5px; color: var(--muted); font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* initials disc — one stable colour per person */
.av { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 8.5px; font-weight: 800;
  letter-spacing: .02em; color: #fff; }
/* deepened so the white monogram clears 4.5:1 (these show on the receivables
   account rows now, not just the login screen) */
.av-0 { background: #2f6fb5; } .av-1 { background: #18807c; } .av-2 { background: #7a5cc4; }
.av-3 { background: #aa6237; } .av-4 { background: #37834c; } .av-5 { background: #b5477f; }

.bchip.more { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2);
  font-weight: 800; }
/* on a card the brand row is one readable line: the lead brand + how many more */
.kcard .bchips { flex-wrap: nowrap; overflow: hidden; align-items: center; gap: 4px; }
.kcard .bchip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 9.5px; padding: 2px 6px; }
.kcard .bchip.more { flex: none; }

/* the footer is a whisper: small, muted, no boxes — it only raises its voice
   (red text) when the follow-up has actually slipped */
.kcard-foot { display: flex; align-items: center; gap: 6px; margin-top: 5px; padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 5%, transparent); }
.kfu { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600;
  color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums; }
.kfu .ic { width: 10px; height: 10px; flex: none; stroke-width: 2; opacity: .55; }
.kfu.late { color: var(--critical); font-weight: 700; }
.kfu.late .ic { opacity: .9; }
.kfu.none { font-style: italic; font-weight: 500; opacity: .8; }
.kdays { margin-left: auto; flex: none; font-size: 9.5px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; opacity: .8; }
.kdays.stale { color: color-mix(in srgb, var(--warning) 80%, var(--ink)); opacity: 1; }
:root[data-theme="dark"] .kdays.stale { color: var(--warning); }
.badge.stage { display: inline-flex; align-items: center; gap: 5px; }
.badge.stage::before { display: none; }        /* the icon replaces the dot */
.badge.stage .ic { width: 13px; height: 13px; flex: none; }

/* ---------- KPI drawer: the actual records behind the number ---------- */
.kpi-listwrap { margin-bottom: 24px; }
.kpi-list { border-top: 1px solid var(--border); max-height: 46vh; overflow-y: auto;
  margin: 0 -22px; padding: 0 22px; }
.kpi-li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.kpi-li.link { cursor: pointer; }
.kpi-li.link:hover { background: var(--tint); margin: 0 -10px; padding-left: 10px; padding-right: 10px;
  border-radius: 8px; }
.kpi-li-main { flex: 1; min-width: 0; }
.kpi-li-t { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.kpi-li-chip { font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; }
.kpi-li-chip.crit { color: var(--critical); background: color-mix(in srgb, var(--critical) 13%, transparent); }
.kpi-li-chip.warn { color: #8a5b06; background: color-mix(in srgb, var(--warning) 18%, transparent); }
.kpi-li-chip.good { color: var(--good-text); background: color-mix(in srgb, var(--good) 14%, transparent); }
.kpi-li-chip.plain { color: var(--muted); background: color-mix(in srgb, var(--ink) 7%, transparent); }
:root[data-theme="dark"] .kpi-li-chip.warn { color: var(--warning); }
.kpi-li-s { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.kpi-li-v { font-size: 12.5px; font-weight: 750; color: var(--ink-2); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.kpi-li-v.crit { color: var(--critical); }
.kpi-li-v.warn { color: color-mix(in srgb, var(--warning) 80%, var(--ink)); }
.kpi-li-v.good { color: var(--good-text); }
.kpi-more { font-size: 11.5px; color: var(--muted); padding: 10px 0 0; }

/* ---------- lead workspace ---------- */
.leadhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; }
.leadval { font-size: 15px; font-weight: 800; color: var(--teal); font-variant-numeric: tabular-nums; }
.nextstep { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--teal) 5%, var(--surface)); }
.nextstep .ns-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-right: 2px; }
/* Masonry, not a grid. A grid sizes every row to its tallest card, so a
   one-line card beside a five-line one leaves a hole underneath it — and a
   fixed two-column split left a void beside a sparse lead. Column flow packs
   every card, whatever this particular site happens to carry. */
.lead-wrap { columns: 3; column-gap: 14px; }
.lead-wrap > * { break-inside: avoid; -webkit-column-break-inside: avoid;
  margin-bottom: 14px; display: block; width: 100%; }
@media (max-width: 1280px) { .lead-wrap { columns: 2; } }
@media (max-width: 820px)  { .lead-wrap { columns: 1; } }
.factcard { padding: 16px 18px; margin-bottom: 14px; }
.factcard h3 { margin-bottom: 12px; }
.facts { display: grid; grid-template-columns: minmax(88px, auto) 1fr; gap: 7px 14px;
  margin: 0; font-size: 13px; align-items: baseline; }
.fact { display: contents; }
.facts dt { color: var(--muted); font-weight: 600; font-size: 12px; }
.facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
/* What's missing gets one quiet line under the page — never a card, and never
   larger than the facts it's reminding you about. */
.todobar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 11px 16px; border-radius: 10px;
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
  font-size: 12.5px; }
.todo-n { font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.todo-lead { color: var(--muted); }
.todo-peek { color: var(--muted); min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.todo-more { border: none; background: none; box-shadow: none; padding: 2px 4px;
  color: var(--series-1); font: inherit; font-size: 12.5px; font-weight: 650;
  cursor: pointer; }
.todo-more:hover { background: none; box-shadow: none; text-decoration: underline; }
.todo-add { margin-left: auto; padding: 6px 13px; font-size: 12.5px; white-space: nowrap; }
.todo-chips { display: none; flex-basis: 100%; flex-wrap: wrap; gap: 6px;
  margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.todo-chips.open { display: flex; }
.todo-chip { font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 6px; padding: 3px 9px; }

/* an action pinned under the facts, e.g. dropping a GPS pin */
.factfoot { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; flex-wrap: wrap; }
.cardact { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cardact .ic { width: 15px; height: 15px; }
.factbtns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.factbtns .wa { color: #128c3e; border-color: color-mix(in srgb, #25d366 45%, var(--border));
  text-decoration: none; display: inline-flex; align-items: center; padding: 3px 10px;
  border: 1px solid; border-radius: 8px; font-size: 11.5px; font-weight: 650; }

/* follow-up composer */
.logrow { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.loglbl { font-size: 12px; font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.qchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.qchip { font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  cursor: pointer; box-shadow: none;
  transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease); }
.qchip:hover { background: var(--tint); color: var(--teal);
  border-color: color-mix(in srgb, var(--teal) 50%, var(--border)); }
.logactions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* follow-up timeline */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 12px; padding: 12px 0; position: relative; }
.tl-item + .tl-item { border-top: 1px solid var(--border); }
.tl-ico { width: 30px; height: 30px; flex: none; border-radius: 9px; display: flex;
  align-items: center; justify-content: center; background: var(--tint); color: var(--teal); }
.tl-ico .ic { width: 15px; height: 15px; }
.tl-body { flex: 1; min-width: 0; }
.tl-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tl-kind { font-size: 12.5px; font-weight: 750; color: var(--ink); }
.tl-when { font-size: 11px; color: var(--muted); }
.tl-note { font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.5;
  overflow-wrap: anywhere; }
.tl-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted);
  margin-top: 5px; }

/* ---------- ranked / horizontal bars: keep them a readable length ---------- */
.hbar-row, .rank-row { max-width: 720px; }

/* ================= responsive: tablet & phone =================
   The shell keeps its desktop shape — a fixed header over a scrolling #main —
   and only the sidebar changes character: below 900px it slides in over the
   page instead of holding a 236px column. Keeping #apphdr positioned is what
   lets the profile menu stay anchored to it, and keeping the page itself
   unscrollable sideways is what stops a wide table or board from dragging the
   whole app off-screen. */
@media (max-width: 900px) {
  /* ---- shell ---- */
  /* the desktop collapse doesn't apply here — off-canvas is the phone's answer,
     so the panel keeps its full width however it was left on a big screen */
  body.navrail { --navw: 236px; }
  #sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100%; z-index: 40;
    transform: translateX(-100%); transition: transform .26s var(--ease); }
  body.navopen #sidebar { transform: none; box-shadow: var(--shadow-lg); }
  /* focus mode hides the sidebar on desktop; on a phone that would leave no
     way back, so the menu button always keeps working */
  body.focusview #sidebar { display: flex; }
  body.focusview #apphdr { display: flex; }
  #nav-back { display: block; position: fixed; inset: 0; z-index: 39;
    background: rgba(16, 26, 63, .5); opacity: 0; pointer-events: none;
    transition: opacity .26s var(--ease); }
  body.navopen #nav-back { opacity: 1; pointer-events: auto; }
  #navtoggle { display: inline-flex; }
  /* the panel is off-canvas here too, so the header carries the brand */
  .hdr-brand, body:not(.home) .hdr-brand { display: flex; }
  body.home .hdr-brand { display: none; }
  #apphdr { left: 0; padding: 0 12px; }
  #main { padding: 70px 14px 34px; overflow-x: hidden; }
  body.home #main { padding: 14px 14px 20px; min-height: 100dvh; }
  #profile .pname { max-width: 108px; }

  /* ---- a wide table scrolls inside itself instead of losing its columns ---- */
  .tablewrap { overflow: visible; }
  .gridscroll, .card .gridscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* the table can scroll now, so wrap columns don't have to crush themselves
     into a 90px sliver that folds a remark into five lines of dead height */
  td.wrap { min-width: 180px; }
  th, td { padding: 9px 12px; }

  /* ---- the funnel becomes a swipeable board ---- */
  .board-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; }
  .kboard { min-width: max-content; }
  .kcol { flex: 0 0 262px; scroll-snap-align: start; max-height: 68dvh; }
  .kcol + .kcol { border-left: none; }

  /* ---- menus and pickers stay on screen ---- */
  /* the menu is placed by JS now — only cap how wide it may get on a phone */
  .dd-menu { min-width: 0; max-width: calc(100vw - 24px); }
  .dd-opt { white-space: normal; }
  .dd-btn { min-width: 0; }

  /* ---- forms stack into one column ---- */
  #modal .fields { grid-template-columns: 1fr; }
  .logrow { flex-wrap: wrap; }
  .loglbl { min-width: 0; }

  /* ---- a lead card row folds into two, then one ---- */
  .lrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
  .lrow-end { align-items: flex-start; }
  .lrow-note { text-align: left; }

  /* ---- label/value grids stop giving half the width to labels ---- */
  .rowdl, .facts, .kv { grid-template-columns: 100px 1fr; }
  .hbar-row { grid-template-columns: 84px 1fr 66px; }

  /* ---- fixed overlays must respect the viewport ---- */
  #toast { max-width: calc(100vw - 28px); }
  .drawer { height: 100dvh; }
  #modal, #dlg { max-height: calc(100dvh - 48px); }

  /* ---- launcher ---- */
  .modgrid { grid-template-columns: 1fr; }
  .launch-top { flex-wrap: wrap; gap: 10px; }
  .launcher .hero { padding: 22px 20px 24px; }
  .launcher .hero h1 { font-size: 22px; }

  /* ---- touch: 16px inputs stop iOS zooming, controls grow to a finger ---- */
  input, select, textarea, .dd-search { font-size: 16px; }
  .filters > input, .filters .dd-btn, .filters .fdate, .filters .fnum,
  .fchip, .fclear, .seg, .dd-btn { height: 44px; }
  .seg button { height: 36px; }
  .dd-opt, .picker-opt, .pm-item, #dlg .userlist button { min-height: 42px; }
  .qchip, .chip, button.ghost, .tbl-focus, .factbtns .wa { min-height: 38px; }
  .kact { width: 34px; height: 34px; border-radius: 9px; }
  .kact .ic { width: 15px; height: 15px; }
  .drawer-close { width: 40px; height: 40px; }
  .icon-btn { width: 42px; height: 42px; }
}

/* ---- phone ---- */
@media (max-width: 640px) {
  #main { padding: 66px 12px 30px; }
  .grid { gap: 12px; }
  .card { padding: 16px 15px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
  .tile { padding: 14px 14px 15px; }
  .tile .v { font-size: 22px; }
  .topbar h1 { font-size: 21px; }
  .topbar { gap: 10px; }
  /* the search field owns its own row; the rest of the filters follow beneath */
  .filters input[type=search] { flex: 1 1 100%; max-width: none; }
  .filters .fgrp, .filters .fend { width: 100%; }
  .filters .fend { justify-content: space-between; }
  /* stacked label over value reads better than a 100px label column */
  .rowdl, .facts { grid-template-columns: 1fr; gap: 0; }
  .rowdl dt, .facts dt { font-size: 10.5px; letter-spacing: .04em;
    text-transform: uppercase; margin-top: 11px; }
  .rowdl dd, .facts dd { margin-bottom: 2px; }
  .hbar-row { grid-template-columns: 72px 1fr 58px; gap: 7px; }
  .hbar-row .lbl, .hbar-row .val { font-size: 11px; }
  .donut, .donut-legend { min-width: 0; }
  .drawer { width: 100%; max-width: 100%; }
  .drawer-head { padding: 18px 16px 20px; }
  .drawer-body { padding: 16px; }
  .kpi-list { margin: 0 -16px; padding: 0 16px; }
  .notif-list { margin: 0 -16px 4px; }
  .notif { padding: 13px 16px; }
  /* a 360px header can't hold the wordmark as well — the mark alone reads fine */
  .hdr-brand b { display: none; }
  /* ...and once the search button joined it, the row no longer fits at all:
     the menu button was pushed off the left edge and became untappable. The
     name beside the avatar is the cheapest thing to drop — the avatar still
     opens the same menu, which says who you are at the top. */
  #profile .pname, #profile .caret { display: none; }
  #apphdr { gap: 8px; }
  .hdr-tab { padding: 0 11px; }
  .lrow { grid-template-columns: 1fr; gap: 10px; padding: 14px 14px 14px 16px; }
  .lrow-when { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
  .lrow-when .lw-k { width: auto; margin-right: 4px; }
  .drawer-v { font-size: 26px; }
  #modal { padding: 16px 16px 18px; }
  #modal .btns, #dlg .btns { flex-wrap: wrap; }
  .launcher .hero { padding: 20px 16px 22px; }
  .hero-card .hv { font-size: 30px; }
  .nextstep { padding: 10px; }
}

/* roadmap: how to test a shipped card */
.rm-how { font-size: 11.5px; color: var(--ink-2); line-height: 1.5;
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border-radius: 7px; padding: 7px 9px; }
.rm-how-k { font-weight: 750; color: color-mix(in srgb, var(--warning) 80%, var(--ink));
  margin-right: 5px; }
:root[data-theme="dark"] .rm-how-k { color: var(--warning); }
.rm-try { margin-left: auto; font-size: 11px; font-weight: 750; color: var(--series-1);
  text-decoration: none; white-space: nowrap; }
.rm-try:hover { text-decoration: underline; }

/* ---------------- chasing what is late: WhatsApp / call / email ---------------- */
.rbtns { display: inline-flex; gap: 4px; }
.rbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.rbtn .ic { width: 15px; height: 15px; }
.rbtn:hover { color: #fff; border-color: transparent; }
.rbtn.rb-whatsapp:hover { background: #25d366; }
.rbtn.rb-call:hover { background: var(--series-1); }
.rbtn.rb-email:hover { background: var(--navy-2); }

/* the location field inside a form: what was picked, and the button to change it */
.mapfield { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mapfield-v { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1;
  font-size: 12.5px; }
.mapfield-v b { font-variant-numeric: tabular-nums; }
.mapfield-v span { color: var(--ink-2); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- the map picker ---------------- */
.mp-back {
  position: fixed; inset: 0; z-index: 140; display: flex; align-items: center;
  justify-content: center; padding: 18px; background: rgba(16, 26, 63, .5);
  opacity: 0; transition: opacity .2s var(--ease);
}
.mp-back.open { opacity: 1; }
.mp-box {
  width: min(760px, 100%); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  overflow: hidden; transform: translateY(8px); transition: transform .2s var(--ease);
}
.mp-back.open .mp-box { transform: none; }
.mp-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.mp-head h3 { margin: 0; font-size: 16px; }
.mp-x { margin-left: auto; border: none; background: none; cursor: pointer;
  font-size: 16px; color: var(--ink-2); line-height: 1; padding: 4px 6px; }
.mp-search-wrap { position: relative; display: flex; gap: 8px; padding: 0 16px 12px; }
.mp-search { flex: 1; min-width: 0; }
.mp-results {
  display: none; position: absolute; z-index: 3; left: 16px; right: 16px; top: 100%;
  margin-top: -6px; max-height: 260px; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.mp-results.on { display: block; }
.mp-res { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 8px 12px; border: none; background: none; cursor: pointer; font: inherit;
  border-bottom: 1px solid var(--border); }
.mp-res:last-child { border-bottom: none; }
.mp-res:hover { background: var(--tint); }
.mp-res b { font-size: 13px; }
.mp-res span { font-size: 11.5px; color: var(--ink-2); }
.mp-hint { padding: 10px 12px; font-size: 12px; color: var(--ink-2); }
.mp-wrap {
  position: relative; height: min(46vh, 380px); overflow: hidden; cursor: grab;
  background: #e8eaec; touch-action: none; user-select: none;
}
.mp-wrap.dragging { cursor: grabbing; }
.mp-canvas { position: absolute; inset: 0; }
.mp-tile { position: absolute; width: 256px; height: 256px; pointer-events: none; }
.mp-pin {
  position: absolute; left: 50%; top: 50%; margin: -30px 0 0 -13px; pointer-events: none;
  color: var(--critical); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
.mp-pin .ic { width: 26px; height: 30px; fill: color-mix(in srgb, var(--critical) 22%, #fff); }
.mp-where {
  position: absolute; left: 10px; bottom: 10px; right: 10px; pointer-events: none;
  display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); font-size: 12px;
  box-shadow: var(--shadow); backdrop-filter: blur(3px);
}
.mp-where b { font-variant-numeric: tabular-nums; }
.mp-where span { color: var(--ink-2); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-credit { position: absolute; right: 4px; top: 4px; font-size: 9.5px; color: #55606f;
  background: rgba(255, 255, 255, .74); padding: 1px 5px; border-radius: 4px; }
.mp-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.mp-note { font-size: 11.5px; color: var(--ink-2); flex: 1; min-width: 140px; }
.mp-zoom { display: flex; gap: 4px; }
.mp-zoom button { width: 32px; padding: 6px 0; font-size: 15px; line-height: 1; }
@media (max-width: 640px) {
  .mp-back { padding: 0; }
  .mp-box { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .mp-wrap { height: 1px; flex: 1; }
  .mp-note { display: none; }
  .mp-foot .primary { flex: 1; }
}

/* ---------------- today's work: the day, worked top down ---------------- */
.todo-list { display: flex; flex-direction: column; gap: 8px; }
.todo-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer;
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  border-left: 3px solid transparent;
  transition: box-shadow .15s var(--ease), transform .15s var(--ease);
}
.todo-row:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.todo-row.late { border-left-color: var(--critical); }
.todo-ic {
  width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; --tc: var(--muted);
  background: color-mix(in srgb, var(--tc) 14%, transparent); color: var(--tc);
}
.todo-ic.crit { --tc: var(--critical); }
.todo-ic.warn { --tc: var(--warning); }
.todo-ic .ic { width: 17px; height: 17px; }
.todo-main { flex: 1; min-width: 0; }
.todo-t { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-kind { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 20px; flex: none; --tc: var(--muted);
  background: color-mix(in srgb, var(--tc) 15%, transparent);
  color: color-mix(in srgb, var(--tc) 78%, var(--ink)); }
.todo-kind.crit { --tc: var(--critical); }
.todo-kind.warn { --tc: var(--warning); }
.todo-s { font-size: 11.5px; color: var(--ink-2); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-when { font-size: 12px; font-weight: 650; color: var(--ink-2); flex: none;
  min-width: 78px; text-align: right; }
.todo-when.late { color: var(--critical); }
.todo-v { font-size: 12.5px; font-weight: 750; flex: none; min-width: 76px; text-align: right;
  font-variant-numeric: tabular-nums; }
.todo-act { display: flex; align-items: center; gap: 6px; flex: none; }

/* "what's the next step?" — asked while the call is still in your head */
.nextstep { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 2px; }
.ns-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-date { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.ns-date input { flex: 1; }

@media (max-width: 760px) {
  .todo-row { flex-wrap: wrap; }
  .todo-main { flex-basis: 100%; order: 1; }
  .todo-ic { order: 0; }
  .todo-when { order: 0; margin-left: auto; }
  .todo-v { order: 2; min-width: 0; }
  .todo-act { order: 3; margin-left: auto; }
}

/* the day starts here — one tap from the greeting into the work queue */
.hero-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 9px 15px; border-radius: 24px; text-decoration: none; font-size: 13px;
  font-weight: 700; color: var(--navy); background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.hero-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 0, 0, .24); }
.hero-cta .ic { width: 15px; height: 15px; }
.hero-cta .arr { transition: transform .15s var(--ease); }
.hero-cta:hover .arr { transform: translateX(4px); }

/* ---------------- party contact strip ---------------- */
.contactcard { display: flex; flex-direction: column; gap: 12px; }
.contactcard.bare { border-left: 3px solid var(--warning); }
.cs-row { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.cs-bit { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-k { font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); }
.cs-v { font-size: 13px; font-weight: 650; }
.cs-none { font-size: 12.5px; color: var(--muted); font-style: italic; }
.cs-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--border); }
.cs-ok { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.cs-warn { display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
  color: color-mix(in srgb, var(--warning) 80%, var(--ink)); font-weight: 650; }
.cs-warn .ic { width: 15px; height: 15px; flex: none; }

/* ---------------- why deals close: won-versus-lost bars ---------------- */
.cards2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px; align-items: start; }
.wl-bar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; flex: 1;
  background: color-mix(in srgb, var(--muted) 18%, transparent); min-width: 60px; }
.wl-bar i { display: block; height: 100%; }
.wl-won { background: var(--cat-5); }
.wl-lost { background: color-mix(in srgb, var(--critical) 72%, transparent); }
.winrow .win-n { font-size: 11px; color: var(--ink-2); min-width: 76px; text-align: right;
  font-variant-numeric: tabular-nums; }

/* ---------------- global search (Ctrl-K) ---------------- */
.hdr-search {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 9px;
  border-radius: 20px; cursor: pointer; font: inherit; font-size: 12.5px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.hdr-search:hover { border-color: var(--series-1); color: var(--ink); }
.hdr-search .ic { width: 15px; height: 15px; }
.hdr-search kbd {
  font: 600 10px var(--font-sans); padding: 2px 5px; border-radius: 5px;
  background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted);
}
.gs-back {
  position: fixed; inset: 0; z-index: 150; display: flex; justify-content: center;
  padding: 12vh 18px 18px; background: rgba(16, 26, 63, .42);
  opacity: 0; transition: opacity .16s var(--ease);
}
.gs-back.open { opacity: 1; }
.gs-box {
  width: min(620px, 100%); max-height: 66vh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg);
  overflow: hidden; transform: translateY(-8px); transition: transform .16s var(--ease);
}
.gs-back.open .gs-box { transform: none; }
.gs-top { display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  border-bottom: 1px solid var(--border); color: var(--muted); }
.gs-top .ic { width: 17px; height: 17px; flex: none; }
.gs-input { flex: 1; border: none; background: none; outline: none; font: inherit;
  font-size: 15px; color: var(--ink); padding: 0; }
.gs-esc { font: 600 10px var(--font-sans); padding: 3px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.gs-list { overflow-y: auto; padding: 6px; }
.gs-hint { padding: 22px 14px; text-align: center; font-size: 12.5px; color: var(--muted); }
.gs-head { padding: 9px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.gs-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border: none; background: none; cursor: pointer; font: inherit;
  border-radius: 9px;
}
.gs-row.on { background: var(--tint); }
.gs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gs-main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-main span { font-size: 11.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-id { font: 600 11px var(--font-mono); color: var(--muted); flex: none; }

/* a follow-up that happened at the site says so */
.tl-at { display: inline-flex; align-items: center; gap: 3px; color: var(--series-1);
  text-decoration: none; font-weight: 650; }
.tl-at .ic { width: 12px; height: 12px; }
.tl-at:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .hdr-search .gs-label, .hdr-search kbd { display: none; }
  .hdr-search { padding: 0 9px; }
  .gs-back { padding: 6vh 10px 10px; }
}

/* Today's Work is the page a rep opens in the field — the tiles must not eat
   the screen before the first job shows up */
@media (max-width: 760px) {
  body[data-page="today"] .tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  body[data-page="today"] .tile { padding: 10px 10px 11px; }
  body[data-page="today"] .tile-ico { display: none; }
  body[data-page="today"] .tile .k { font-size: 9.5px; }
  body[data-page="today"] .tile .v { font-size: 20px; }
  body[data-page="today"] .tile .d { font-size: 10px; }
}

/* an alert opens the records behind it — say so, so nobody treats it as text */
.notif-w { display: flex; align-items: center; gap: 8px; }
.notif-go { margin-left: auto; font-weight: 750; color: var(--series-1); opacity: 0;
  transition: opacity .15s var(--ease); white-space: nowrap; }
.notif:hover .notif-go, .notif.unread .notif-go { opacity: 1; }
@media (hover: none) { .notif-go { opacity: 1; } }

/* ---------------- put it on the phone ---------------- */
.installcard {
  display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-md);
  border-left: 3px solid var(--teal);
}
.ins-ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: flex;
  align-items: center; justify-content: center; color: var(--teal);
  background: color-mix(in srgb, var(--teal) 14%, transparent); }
.ins-ic .ic { width: 20px; height: 20px; }
.ins-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ins-txt b { font-size: 14px; }
.ins-txt span { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.ins-x { border: none; background: none; cursor: pointer; color: var(--muted);
  font-size: 14px; padding: 4px 6px; line-height: 1; flex: none; }
.ins-x:hover { color: var(--ink); }
@media (max-width: 560px) {
  .installcard { flex-wrap: wrap; }
  .ins-txt { flex-basis: calc(100% - 56px); }
  .installcard .primary { flex: 1; }
}

/* ---------------- the three desks a day is worked from ---------------- */
.desks { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.desk {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer; font: inherit;
  padding: 10px 14px; border-radius: var(--radius-sm); text-align: left;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  box-shadow: var(--shadow);
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.desk:hover { transform: translateY(-1px); border-color: var(--series-1); }
.desk.on { border-color: var(--series-1); background: var(--tint); color: var(--ink); }
.desk b { font-size: 18px; font-weight: 800; color: var(--head);
  font-variant-numeric: tabular-nums; line-height: 1; }
.desk.on b { color: color-mix(in srgb, var(--series-1) 78%, var(--ink)); }
.desk span { font-size: 12.5px; font-weight: 650; }
.desk i { font-style: normal; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .desks { display: grid; grid-template-columns: 1fr 1fr; }
  .desk { padding: 9px 11px; }
  .desk i { display: none; }
}

/* a slice of the overdue book — red, because all of it is already late */
.ovrow .win-fill { background: linear-gradient(90deg,
  color-mix(in srgb, var(--critical) 55%, transparent), var(--critical)); }

/* a shipped card that cannot be exercised yet, and what it is waiting on */
.rm-wait {
  display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; line-height: 1.5;
  color: var(--ink-2); border-radius: 7px; padding: 7px 9px;
  background: color-mix(in srgb, var(--critical) 9%, transparent);
}
.rm-wait .ic { width: 13px; height: 13px; flex: none; margin-top: 2px;
  color: color-mix(in srgb, var(--critical) 78%, var(--ink)); }
.rm-wait b { color: color-mix(in srgb, var(--critical) 78%, var(--ink)); font-weight: 750; }
:root[data-theme="dark"] .rm-wait .ic, :root[data-theme="dark"] .rm-wait b { color: var(--critical); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rm-wait .ic,
  :root:not([data-theme="light"]) .rm-wait b { color: var(--critical); }
}

/* ---- the one-time reset code, shown once and never again ---- */
.onetime { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 4px 0 2px; }
.onetime-code { flex: 1 1 220px; font-family: ui-monospace, "Cascadia Mono", Consolas,
  monospace; font-size: 26px; font-weight: 700; letter-spacing: 4px; text-align: center;
  padding: 14px 10px; border-radius: 10px; color: var(--head);
  background: var(--tint); border: 1px dashed var(--border); }
.onetime-note { flex: 1 1 100%; font-size: 12px; color: var(--muted); }

/* ---- reason-before-you-do-it dialog (clearing a GPS pin) ---- */
.dlgwrap { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 4px; }
.rchips { display: flex; flex-wrap: wrap; gap: 6px; }
.rchip { font-size: 12px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); }
.rchip:hover { border-color: var(--teal); }
.rchip.on { background: var(--tint); border-color: var(--teal); color: var(--head);
  font-weight: 600; }
.dlgwrap textarea { width: 100%; box-sizing: border-box; padding: 9px 11px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); font: inherit; resize: vertical; }
.dlgwrap textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
button.danger-link { color: var(--critical); }
button.danger-link:hover { border-color: var(--critical); }

/* ---- data health: what is wrong with the data today ---- */
.secttl { margin: 22px 0 10px; font-size: 15px; color: var(--head); }
.secttl:first-of-type { margin-top: 4px; }
.hcards { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.hcard { background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; box-shadow: var(--shadow); }
.hcard.tone-critical { border-left-color: var(--critical); }
.hcard.tone-warning { border-left-color: var(--warning); }
.hcard-top { display: flex; align-items: flex-start; gap: 12px;
  justify-content: space-between; }
.hcard-t { font-weight: 650; color: var(--head); line-height: 1.3; }
.hcard-n { flex: none; font-weight: 700; font-size: 15px; cursor: pointer;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border); background: var(--page); color: var(--head);
  font-variant-numeric: tabular-nums; }
.hcard-n:hover { border-color: var(--teal); color: var(--teal); }
.hcard-w { margin-top: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.hcard-f { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.hcard-act { margin-top: 10px; }
.hclean { margin-top: 12px; font-size: 12px; color: var(--muted); }
.tidylist { display: flex; flex-direction: column; gap: 6px; max-height: 320px;
  overflow-y: auto; }
.tidyrow { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tidy-from { color: var(--critical); text-decoration: line-through; }
.tidy-arrow { color: var(--muted); }
.tidy-to { font-weight: 600; color: var(--head); }
.tidy-n { margin-left: auto; color: var(--muted); font-size: 12px; }

/* ---- controlled lists: pick a place, do not invent one ---- */
.vocabfield { display: block; }
.vocab-note { margin-top: 5px; font-size: 12px; line-height: 1.5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.vocab-bad { color: var(--critical); }
.vocab-pick { font-size: 12px; padding: 2px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--critical); background: transparent; color: var(--critical);
  font-weight: 600; }
.vocab-pick:hover { background: var(--critical); color: #fff; }
.vocab-add { font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--border); background: transparent; color: var(--muted); }
.vocab-add:hover { border-color: var(--teal); color: var(--teal); }
.vocab-new.on { color: var(--teal); font-weight: 600; }

/* ============================================================================
   THE LOOK, SECOND PASS
   ----------------------------------------------------------------------------
   The first one was correct and timid: navy on grey, six accent colours at
   once, a table wearing a heavy navy bar, and numbers no bigger than their own
   labels. Nothing in it was wrong and nothing in it had a point of view.

   Three references settled the direction, and they agreed with each other more
   than they disagreed: a light rail rather than a dark one, small-caps section
   labels with counts, one accent used without apology, a very large page title,
   soft borders, generous space, and a movement chip under the figures. The one
   reference that was a landing page is the one to borrow least from — it holds
   attention for ten seconds, this holds it for hours over rupee columns. So the
   energy goes on the chrome and the data surfaces stay quiet.

   Colour on a data screen has to keep meaning something: red is late, amber is
   a warning, green is good. If everything were the accent, none of those would
   read. So there is exactly one accent, and it is the mark's own orange rather
   than a colour borrowed from somebody else's brand.
   ========================================================================== */
:root {
  --page: #f7f6f3;              /* warm, not the blue-grey it was */
  --surface: #ffffff;
  --ink: #14161a;               /* near-black reads confident; navy read corporate */
  --ink-2: #4a5058;
  --muted: #8b9099;
  --grid: #eceae5;
  --border: #e5e2db;
  --accent: #f0602a;            /* the mark's orange, the only accent in here */
  --accent-ink: #c1400f;
  --accent-tint: color-mix(in srgb, var(--accent) 10%, transparent);
  --head: #14161a;
  --navy: #14161a;              /* kept as a name so the older rules follow along */
  --navy-2: #24272d;
  --sidebar: #ffffff;           /* a light rail, as in every reference */
  --sidebar-2: #f7f6f3;
  --sidebar-ink: #4a5058;
  --teal: #f0602a;              /* the old second accent becomes the one accent */
  --series-1: #f0602a;
  --tint: var(--accent-tint);
  --shadow: 0 1px 2px rgba(20, 22, 26, .04);
  --shadow-md: 0 1px 3px rgba(20, 22, 26, .05), 0 10px 28px rgba(20, 22, 26, .06);
  --shadow-lg: 0 18px 44px rgba(20, 22, 26, .12), 0 2px 8px rgba(20, 22, 26, .05);
  --radius: 16px;
  --radius-sm: 11px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #14161a; --surface: #1c1f25; --ink: #f2f0ec; --ink-2: #c3c7cd;
    --muted: #8b9099; --grid: #2a2e35; --border: #2f333b;
    --accent: #ff7a45; --accent-ink: #ffa07a;
    --head: #f2f0ec; --navy: #f2f0ec; --navy-2: #e3e0d9;
    --sidebar: #1c1f25; --sidebar-2: #14161a; --sidebar-ink: #c3c7cd;
    --teal: #ff7a45; --series-1: #ff7a45;
  }
}
:root[data-theme="dark"] {
  --page: #14161a; --surface: #1c1f25; --ink: #f2f0ec; --ink-2: #c3c7cd;
  --muted: #8b9099; --grid: #2a2e35; --border: #2f333b;
  --accent: #ff7a45; --accent-ink: #ffa07a;
  --head: #f2f0ec; --navy: #f2f0ec; --navy-2: #e3e0d9;
  --sidebar: #1c1f25; --sidebar-2: #14161a; --sidebar-ink: #c3c7cd;
  --teal: #ff7a45; --series-1: #ff7a45;
}

/* Type. Inter is a variable font here, so the display weights cost nothing to
   reach for, and a number is the loudest thing on the screen so it should look
   it. The page title takes the reference's size and weight almost literally. */
h1 { font-weight: 860; letter-spacing: -.04em; font-size: 34px; }
h2, .card h3 { font-weight: 780; letter-spacing: -.02em; }
.tile .v, .bv, .kpi-v { letter-spacing: -.035em; }
.tile .v { font-size: 32px; font-weight: 840; }
.tile .k { text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px;
  font-weight: 750; color: var(--muted); }
td, th, .tile .v, .bv, .rank-val, .hbar-row .val, .win-v, .dn, .dv {
  font-variant-numeric: tabular-nums; }

/* The table stops shouting. A navy bar across the top of every grid was the
   loudest thing on a page whose entire subject is the rows underneath it. */
th, .gridscroll thead th {
  background: var(--surface);
  color: var(--muted);
  border-bottom: 2px solid var(--border);
  text-transform: uppercase; letter-spacing: .08em;
  font-size: 10px; font-weight: 750; padding: 12px 14px;
}
th.sortable:hover { color: var(--accent); }
td { padding: 13px 14px; }
tbody tr { transition: background .1s var(--ease); }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* The primary action is near-black; the accent is for meaning and emphasis,
   not for every button on the page. */
button.primary, .btn.primary {
  background: var(--ink); color: var(--surface); border: none; font-weight: 650;
}
button.primary:hover, .btn.primary:hover {
  background: var(--accent); filter: none;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 34%, transparent);
}

.card { border-radius: var(--radius); }
.tile { border-radius: var(--radius); padding: 18px 18px 16px; }
.tile.link:hover { transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }

/* ---- the cockpit: the three numbers a director actually opens this for ---- */
.cockpit { display: flex; flex-direction: column; gap: 18px; margin: 18px 0 4px; }
.bigrow { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bigcard { display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 20px 18px; box-shadow: var(--shadow);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease),
              border-color .14s var(--ease); }
.bigcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.bk { text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px;
  font-weight: 750; color: var(--muted); }
.bvrow { display: flex; align-items: baseline; gap: 10px; margin-top: 6px;
  flex-wrap: wrap; }
.bv { font-size: 38px; font-weight: 860; line-height: 1; color: var(--ink); }
.bd { color: var(--ink-2); font-size: 12.5px; margin-top: 7px; }
.btrack { height: 6px; border-radius: 99px; background: var(--grid);
  margin-top: 14px; overflow: hidden; }
.btrack i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.bdl { font-size: 11.5px; color: var(--muted); margin-top: 7px; }
.bdl b { color: var(--ink-2); font-weight: 750; }

.kdelta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px;
  font-weight: 750; padding: 3px 8px; border-radius: 99px; }
.kdelta.good { color: var(--good-text, var(--good));
  background: color-mix(in srgb, var(--good) 14%, transparent); }
.kdelta.bad { color: var(--critical);
  background: color-mix(in srgb, var(--critical) 13%, transparent); }
.kdelta.flat { color: var(--muted); background: var(--grid); }

.trendnote { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--muted); background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px; }
.trendnote .ic { width: 15px; height: 15px; flex: none; }

.cgrid { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.cpanel { margin-bottom: 0; }
.decides { display: flex; flex-direction: column; gap: 8px; }
.decide { display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer;
  text-align: left; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: inherit;
  transition: border-color .12s var(--ease), background .12s var(--ease); }
.decide:hover { border-color: var(--accent); background: var(--accent-tint); }
.dn { font-size: 20px; font-weight: 840; color: var(--critical); min-width: 44px; }
.dt { flex: 1; font-size: 13px; font-weight: 600; }
.dv { font-size: 13px; font-weight: 750; color: var(--ink-2); }

/* The hero was still wearing the old navy, which against a warm cream page
   read as two different products stapled together. Ink, and the accent only
   where it is doing work. */
:root { --accent-grad: linear-gradient(150deg, #24272d, #14161a); }
:root[data-theme="dark"] { --accent-grad: linear-gradient(150deg, #2a2e35, #1c1f25); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent-grad: linear-gradient(150deg, #2a2e35, #1c1f25); }
}
.hero-cta { color: var(--ink); font-weight: 700; }
.hero-cta:hover { background: var(--accent); color: #fff; }

/* Four module cards in four different colours was the six-accent problem in
   its most visible form. They are one family; only the icon carries a tint. */
.modgrid .card h3, .modgrid .card h3 * { color: var(--head); }
.modgrid .card .tile-ico, .modgrid .card .mod-ico {
  color: var(--accent); background: var(--accent-tint); }
.modgrid .card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* Two things the first pass missed because they do not use the tokens.

   The hero painted its navy in literally, so it kept the old identity while
   everything around it moved — against a warm cream page that read as two
   products stapled together. And the four module cards each carried their own
   colour through --mc, which is the six-accent problem in its most visible
   form: four headings in four hues, none of them meaning anything. One family,
   and the accent does the pointing. */
.launcher .hero {
  background:
    radial-gradient(120% 140% at 88% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 58%),
    linear-gradient(135deg, #24272d, #14161a);
  box-shadow: 0 18px 44px rgba(20, 22, 26, .18);
}
.launcher .hero h1 { font-size: 40px; font-weight: 860; letter-spacing: -.04em; }
.launcher .hero p { opacity: .72; }

.mod-stock, .mod-coll, .mod-sales, .mod-admin { --mc: var(--accent); }
:root[data-theme="dark"] .mod-stock,
:root[data-theme="dark"] .mod-coll,
:root[data-theme="dark"] .mod-sales,
:root[data-theme="dark"] .mod-admin { --mc: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mod-stock,
  :root:not([data-theme="light"]) .mod-coll,
  :root:not([data-theme="light"]) .mod-sales,
  :root:not([data-theme="light"]) .mod-admin { --mc: var(--accent); }
}
.modcard h3 { color: var(--head); }

/* The rail was written for deep navy, so it painted its brand, its active row
   and its section captions in literal #fff and two hardcoded blues. Turned
   light, those became white-on-cream — the brand name vanished outright and the
   selected page could not be read at all. Everything here is a token now, so it
   survives the rail being either colour. */
#sidebar { border-right: 1px solid var(--border); }
#sidebar .logo .brand-mark {
  background: var(--accent-tint); color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
#sidebar .logo b { color: var(--head); font-weight: 800; letter-spacing: -.01em; }
#sidebar .logo small { color: var(--muted); }
#nav .cap { color: var(--muted); text-transform: uppercase; letter-spacing: .1em;
  font-weight: 750; }
#nav a { color: var(--ink-2); }
#nav a:hover { background: var(--grid); color: var(--ink); }
#nav a.active {
  color: var(--accent-ink); font-weight: 700;
  background: var(--accent-tint);
  box-shadow: inset 3px 0 0 var(--accent);
}
#nav a.active .ico { color: var(--accent); }
:root[data-theme="dark"] #nav a.active,
:root[data-theme="dark"] #sidebar .logo b { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #nav a.active { color: var(--accent); }
  :root:not([data-theme="light"]) #nav a:hover { background: var(--grid); color: var(--ink); }
}

/* The aging bars were still navy while everything around them moved. */
.hbar-fill, .rank-fill, .win-fill { background: var(--accent); }

/* The charts read their colours from these tokens at draw time, so the ramps
   move without touching a line of chart code.

   Two different jobs, two different ramps. Aging is SEQUENTIAL — 90+ is not a
   different kind of thing from 30-45, it is more of it — so it is one hue
   getting deeper, and it runs warm because the thing it measures gets worse.
   Owner is CATEGORICAL: three names, no order between them. That one used to
   come out green / orange / pink, which quietly told the reader that VIJIL was
   the good one and Q-BATH was the pink one. On a screen where green already
   means healthy and red already means late, a category must not borrow either. */
:root {
  --seq-250: #fbd9c4; --seq-350: #f8b48c; --seq-450: #f28a56;
  --seq-550: #e2632c; --seq-650: #bf4a1c; --seq-700: #8f3512;
  --cat-2: #2f4858; --cat-3: #c98b3c; --cat-4: #7b8ea3; --cat-5: #f0602a;
  --cat-6: #5a6b7d;
  --baseline: #cfcac1;
}
:root[data-theme="dark"] {
  --seq-250: #6b3a22; --seq-350: #8f4a26; --seq-450: #b85f2c;
  --seq-550: #d97a3f; --seq-650: #f0955c; --seq-700: #ffb489;
  --cat-2: #8fa8bb; --cat-3: #e0b070; --cat-4: #a9b8c7; --cat-5: #ff7a45;
  --cat-6: #90a1b1;
  --baseline: #4a5058;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --seq-250: #6b3a22; --seq-350: #8f4a26; --seq-450: #b85f2c;
    --seq-550: #d97a3f; --seq-650: #f0955c; --seq-700: #ffb489;
    --cat-2: #8fa8bb; --cat-3: #e0b070; --cat-4: #a9b8c7; --cat-5: #ff7a45;
    --cat-6: #90a1b1;
    --baseline: #4a5058;
  }
}

/* Two the contrast suite caught, both introduced by aliasing --navy to the ink
   colour: in dark mode that token is now NEAR-WHITE, so a rule painting white
   text on it left the Roadmap tab at 1.14:1 — invisible rather than merely
   low. Inverting through the ink/surface pair is right in both themes: dark
   chip with light text in the day, light chip with dark text at night. */
body[data-page="roadmap"] .hdr-tab { background: var(--ink); color: var(--surface); }

/* And the neutral badges sat at 4.33-4.39 against 4.5. They were reading
   ink-2 on a ground mixed FROM ink, which in dark mode moves the two towards
   each other. The label carries the full ink colour now; the dot and the tint
   still do the categorising. */
.badge { color: var(--ink); }
.badge.plain { color: var(--ink-2); }

/* The hero CTA is on the dark hero in BOTH themes, so it wants a fixed light
   chip and dark ink regardless of the page theme — not --navy, which now
   flips to near-white in the dark and left white-on-white (1.14:1). */
.hero-cta { background: #fff; color: #14161a; }
.hero-cta:hover { background: var(--accent); color: #fff; }

/* The status badges were landing at 4.33-4.39 in dark: the tinted grounds are
   mixed with --surface, and the semantic text tokens are not quite bright
   enough over them. A hair more contrast on each clears 4.5 without changing
   what any of them mean. */
:root[data-theme="dark"] { --good-text: #9bedbf; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --good-text: #9bedbf; }
}
:root[data-theme="dark"] .badge, :root[data-theme="dark"] .badge.plain { color: #f2f0ec; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge,
  :root:not([data-theme="light"]) .badge.plain { color: #f2f0ec; }
}
:root[data-theme="dark"] .badge.good { color: #9bedbf; }
:root[data-theme="dark"] .badge.info { color: #ffb489; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge.good { color: #9bedbf; }
  :root:not([data-theme="light"]) .badge.info { color: #ffb489; }
}

/* ============================================================================
   THE BENTO COCKPIT
   ----------------------------------------------------------------------------
   The reference the owner settled on was a bento wall: cards of different
   weights, one vibrant tile carrying the headline number, a radial dial, a
   little bar chart, all on soft raised surfaces. He named the finish too —
   neumorphism. Full neumorphism is a known trap on a data screen: its whole
   idea is low contrast, and this screen is read for hours over rupee columns,
   so the reference itself does not actually use it on its numbers — it uses
   soft raised surfaces and keeps the figures at full strength. That is the line
   taken here: the SURFACES are soft and raised, the NUMBERS are loud, and the
   accent still only ever means what it means elsewhere.
   ========================================================================== */
.cockpit { margin: 18px 0 6px; }
.bento-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
}
.bento {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  border-radius: 22px; padding: 20px; text-decoration: none; color: inherit;
  border: 1px solid var(--border); background: var(--surface);
  /* the soft raised finish — a light source top-left, shadow bottom-right */
  box-shadow: -6px -6px 16px rgba(255, 255, 255, .7),
               8px 10px 24px rgba(20, 22, 26, .10);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.bento:hover { transform: translateY(-3px);
  box-shadow: -6px -6px 16px rgba(255, 255, 255, .8),
               12px 16px 34px rgba(20, 22, 26, .16); }
.bento.big { grid-column: span 2; grid-row: span 2; }
.bento.wide { grid-column: span 2; }
.bento.gaugecell, .bento.barscell { grid-row: span 2; }

.bento-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bento-k { text-transform: uppercase; letter-spacing: .09em; font-size: 11px;
  font-weight: 750; color: var(--muted); }
.bento-k.light { color: rgba(255, 255, 255, .78); }
.bento-ico { width: 36px; height: 36px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .22); color: #fff; }
.bento-ico.soft { background: var(--accent-tint); color: var(--accent); }
.bento-ico.onDark { background: rgba(255, 255, 255, .12); color: #fff; }
.bento-ico .ic { width: 18px; height: 18px; }
.bento-tag { font-size: 12px; font-weight: 700; color: var(--muted); }
.bento-tag.link { color: var(--accent); text-decoration: none; }

.bento-v { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 34px; font-weight: 860; line-height: 1.02; letter-spacing: -.035em;
  color: #fff; margin-top: auto; }
.bento-v.ink { color: var(--ink); }
.bento.big .bento-v { font-size: 46px; }
.bento-d { font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.bento-d.ink { color: var(--ink-2); }
.bento-meter { height: 7px; border-radius: 99px; overflow: hidden;
  background: rgba(255, 255, 255, .25); }
.bento-meter.light { background: var(--grid); }
.bento-meter i { display: block; height: 100%; border-radius: 99px; background: #fff; }
.bento-meter.light i { background: var(--accent); }
.bento-foot { font-size: 11.5px; color: rgba(255, 255, 255, .8); }
.bento-foot.ink { color: var(--muted); }
.bento-foot b, .bento-foot.ink b { font-weight: 800; color: inherit; }
.bento-foot.ink b { color: var(--ink-2); }

/* the one vibrant tile — the headline number rides the accent */
.bento.hot { border: none; color: #fff;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 92%, #fff), var(--accent));
  box-shadow: 10px 14px 34px color-mix(in srgb, var(--accent) 34%, transparent); }
.bento.hot:hover {
  box-shadow: 12px 18px 44px color-mix(in srgb, var(--accent) 44%, transparent); }
.bento.hot .kdelta.bad { background: rgba(0, 0, 0, .18); color: #fff; }
.bento.hot .kdelta.good { background: rgba(255, 255, 255, .22); color: #fff; }

/* the dark tile for the little bar charts */
.bento.dark { border: none; background: linear-gradient(160deg, #24272d, #14161a);
  box-shadow: 10px 14px 30px rgba(20, 22, 26, .28); }

/* radial gauge */
.gaugecell { align-items: center; justify-content: flex-start; }
.gauge { position: relative; width: 170px; max-width: 100%; margin: 6px auto 0;
  display: flex; flex-direction: column; align-items: center; }
.gauge-svg { width: 170px; height: 170px; display: block; }
.gauge-arc { transition: stroke-dasharray .6s var(--ease); }
.gauge-mid { position: absolute; top: 62px; left: 0; right: 0; text-align: center; }
.gauge-pct { font-size: 38px; font-weight: 860; letter-spacing: -.03em; color: var(--ink); }
.gauge-lbl { font-size: 11px; color: var(--muted); font-weight: 600; margin-top: -2px; }
.gauge-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* mini vertical bars */
.minibars { display: flex; align-items: flex-end; gap: 10px; flex: 1;
  min-height: 130px; padding-top: 8px; }
.mb-col { flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 8px; height: 100%; justify-content: flex-end; cursor: default; }
.mb-bar { width: 100%; flex: 1; display: flex; align-items: flex-end;
  border-radius: 8px 8px 0 0; }
.mb-bar i { width: 100%; border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent));
  transition: height .5s var(--ease); }
.mb-bar i.mb-warn { background: linear-gradient(180deg, #ffc98a, var(--warning)); }
.mb-bar i.mb-crit { background: linear-gradient(180deg, #ff9a7a, var(--critical)); }
.mb-lbl { font-size: 10.5px; color: rgba(255, 255, 255, .7); font-weight: 650;
  letter-spacing: .02em; }

.bento.wide .decides { gap: 8px; }

/* the soft raised finish is a light-source effect, so its highlight has to go
   dark when the ground does */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bento {
    box-shadow: -4px -4px 14px rgba(255, 255, 255, .03),
                 8px 10px 26px rgba(0, 0, 0, .5); }
  :root:not([data-theme="light"]) .bento:hover {
    box-shadow: -4px -4px 14px rgba(255, 255, 255, .05),
                 12px 16px 36px rgba(0, 0, 0, .6); }
  :root:not([data-theme="light"]) .bento-meter i { background: var(--ink); }
}
:root[data-theme="dark"] .bento {
  box-shadow: -4px -4px 14px rgba(255, 255, 255, .03),
               8px 10px 26px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .bento:hover {
  box-shadow: -4px -4px 14px rgba(255, 255, 255, .05),
               12px 16px 36px rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .bento-meter i { background: var(--ink); }

@media (max-width: 1000px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento.big { grid-column: span 2; }
}
@media (max-width: 560px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento.big, .bento.wide { grid-column: span 1; }
}

/* On the vibrant tile the label and the meter track were tuned for a light
   card, so MONEY OUTSIDE came out dark-on-orange — unreadable. Everything on
   the hot tile is white at a legible strength. */
.bento.hot .bento-k { color: rgba(255, 255, 255, .82); }
.bento.hot .bento-ico { background: rgba(255, 255, 255, .2); color: #fff; }

/* the gauge should not reserve two rows — it left a hole the grid could not
   pack. One row each, and the dense flow fills tightly. */
.bento.gaugecell { grid-row: span 1; }

/* ---- bento, corrected ----
   The big tile spanned two rows and its number was pinned to the bottom, so on
   a wide screen the card was a 500px-tall rectangle with the figure lost near
   the floor and a void of orange above it — it read as broken. Every tile is
   one row now, its height set by its content, and the number sits up top where
   the eye lands. The wall is also given a composed maximum width and centred,
   so it stops stretching the full 1900px like a spreadsheet. */
.cockpit { max-width: 1160px; margin: 18px auto 6px; width: 100%; }
.bento-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; }
.bento.big { grid-column: span 2; grid-row: span 1; }
.bento.gaugecell, .bento.barscell { grid-row: span 1; }
.bento-v { margin-top: 0; }
.bento.big { justify-content: flex-start; gap: 8px; }
.bento.big .bento-v { font-size: 44px; margin-top: 2px; }
.bento.big .bento-meter { margin-top: 12px; }
.minibars { min-height: 96px; }
.gauge { width: 150px; }
.gauge-svg { width: 150px; height: 150px; }
.gauge-mid { top: 52px; }
.gauge-pct { font-size: 32px; }

/* the hero and the cockpit share one width so the page reads as one column */
.launcher { max-width: 1160px; }

/* the first move, filling what was empty space at the foot of the big tile */
.bento-lead { margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .22); }
.bento-lead-k { font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; background: rgba(255, 255, 255, .22); color: #fff;
  padding: 3px 8px; border-radius: 6px; flex: none; }
.bento-lead-n { font-size: 13px; font-weight: 650; color: #fff; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.bento-lead-v { font-size: 14px; font-weight: 800; color: #fff; flex: none; }
.bento.big { justify-content: flex-start; }

/* ---- home fits one screen, no scroll ----
   The owner asked for it plainly: the home must not scroll, and shrinking the
   cards to make that true is fine. The hero and the four module cards are the
   two big consumers of height, so both come down; nothing is clipped, they are
   genuinely smaller. Cards shrink before the page does. */
body[data-page="home"] #main { padding-top: 14px; padding-bottom: 18px; }
.launcher .hero { padding: 16px 26px 18px; }
.launcher .hero h1 { font-size: 28px; margin: 0 0 3px; }
.launcher .hero p { font-size: 13px; }
.hero-pills { margin-top: 9px; gap: 8px; }
.hpill { padding: 6px 11px; font-size: 12.5px; }
.hero-cta { margin-top: 11px; padding: 8px 14px; font-size: 12.5px; }
.skyline { height: 40px; }
.modgrid { margin-top: 13px; gap: 13px; }
.modcard { padding: 14px 15px; }
.modcard .modico { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 10px; }
.modcard .modico .ic { width: 20px; height: 20px; }
.modcard h2 { font-size: 15.5px; margin: 0 0 3px; }
.modcard p { font-size: 12px; line-height: 1.32; margin: 0 0 8px; min-height: 0; }
.pulserow { margin: 1px 0 8px; gap: 6px; }
.pulse { padding: 5px 9px 5px 8px; }
.pulse b { font-size: 15px; }
.pulse span { font-size: 11px; }
.modcard .modstat { padding: 4px 10px; font-size: 12px; }
.modcard .open { font-size: 13px; margin-top: 8px; }
.launch-foot { margin-top: 12px; padding: 6px 0; font-size: 11.5px; }

/* ---- responsive to screen HEIGHT, not just width ----
   "No scroll" cannot mean one fixed size — a 1080p desktop and a 1366 laptop
   have very different page heights. So the home adapts: on a short screen the
   hero question and the card descriptions drop away (they are the decoration;
   the live numbers are the point), and everything tightens. It fits from a big
   monitor down to a small laptop without a scrollbar. */
@media (max-height: 720px) {
  .launcher .hero { padding: 13px 24px 15px; }
  .launcher .hero h1 { font-size: 25px; }
  .skyline { height: 34px; }
  .modcard p { -webkit-line-clamp: 2; line-height: 1.28; margin-bottom: 7px; }
  .modgrid { margin-top: 11px; gap: 12px; }
}
@media (max-height: 660px) {
  body[data-page="home"] #main { padding-top: 10px; padding-bottom: 12px; }
  .launcher .hero { padding: 11px 22px 12px; }
  .launcher .hero h1 { font-size: 22px; }
  .launcher .hero p { display: none; }        /* the question is decoration here */
  .skyline { display: none; }
  .hero-pills { margin-top: 7px; }
  .hero-cta { margin-top: 9px; padding: 7px 12px; }
  .modcard { padding: 11px 13px; }
  .modcard p { display: none; }                /* title + live numbers are enough */
  .modcard .modico { width: 32px; height: 32px; margin-bottom: 7px; }
  .modcard h2 { font-size: 15px; }
  .modgrid { margin-top: 9px; gap: 10px; }
  .launch-foot { margin-top: 8px; }
}
@media (max-height: 560px) {
  .launcher .hero { padding: 9px 20px 10px; }
  .launcher .hero h1 { font-size: 19px; }
  .hero-pills { display: none; }               /* the CTA still carries the headline */
  .modcard .modico { display: none; }
}

/* ---- the row actions stop pushing the table off the screen ----
   The actions cell carries three icon buttons and three word buttons, and at
   281px it was the single widest column on the page — wide enough that the last
   one sat past the right edge with no visible scrollbar to explain why. Nothing
   is removed: the words get tighter, the icons get smaller, and the widest text
   columns give back the rest. */
.rowbtns { gap: 1px; }
.rowbtns button.ghost { padding: 4px 6px; font-size: 12px; }
.rowbtns .rbtn, .rbtns .rbtn { width: 26px; height: 26px; }
.rowbtns .rbtn .ic, .rbtns .rbtn .ic { width: 13px; height: 13px; }
.rbtns { gap: 2px; }
/* the two long text columns do not need 160px each on a money page */
td.wrap { min-width: 130px; }
.card td.wrap { max-width: 190px; }

/* And when a grid genuinely is wider than its box, say so. A table that is cut
   off with no scrollbar reads as broken; one with a visible bar reads as wide. */
.gridscroll { scrollbar-width: thin; }
.gridscroll::-webkit-scrollbar { height: 10px; }
.gridscroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 26%, transparent); border-radius: 99px; }
.gridscroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink) 40%, transparent); }
.gridscroll::-webkit-scrollbar-track { background: var(--grid); border-radius: 99px; }

/* ---- the stage rail: the whole pipeline as one row of chevrons ----
   Each step points at the next, so the row reads left-to-right as a journey
   rather than as a set of buttons. The one the deal is on is filled and keeps
   its arrow head; the ones behind it are tinted as done; the ones ahead are
   plain and clickable. The two closed stages sit at the end, flat rather than
   pointed, because nothing follows them. */
.railwrap { margin: 14px 0 4px; }
.rail-hint { font-size: 12.5px; font-weight: 650; color: var(--ink-2); margin-bottom: 8px; }
.rail {
  display: flex; align-items: stretch; gap: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 8px; overflow-x: auto; scrollbar-width: thin;
}
.rail-step {
  position: relative; flex: 1 1 0; min-width: 132px;
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px 11px 26px; border: none; cursor: pointer;
  background: transparent; color: var(--ink-2); text-align: left;
  font: inherit; transition: background .14s var(--ease), color .14s var(--ease);
  /* the chevron: a pointed right edge with a matching notch on the left */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%,
                     0 100%, 14px 50%);
}
.rail-step:first-child { padding-left: 16px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.rail-step:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); }
.rail-step:hover:not(:disabled) { background: var(--accent-tint); color: var(--ink); }
.rail-step:hover:not(:disabled) .rail-ico { color: var(--sh, var(--accent)); }
.rail-step:disabled { cursor: default; }

.rail-ico { width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--grid); color: var(--muted); }
.rail-ico .ic { width: 14px; height: 14px; }
.rail-txt { display: flex; flex-direction: column; min-width: 0; }
.rail-txt b { font-size: 13.5px; font-weight: 750; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-txt i { font-size: 11px; font-style: normal; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* behind the deal — done */
.rail-step.done { background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink-2); }
.rail-step.done .rail-ico { background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-ink); }

/* where the deal actually is */
.rail-step.on { background: var(--ink); color: #fff; }
.rail-step.on .rail-ico { background: rgba(255, 255, 255, .18); color: #fff; }
.rail-step.on .rail-txt b { color: #fff; }
.rail-step.on .rail-txt i { color: rgba(255, 255, 255, .72); }

/* the two ways a deal ends */
.rail-step.closed .rail-txt b { color: var(--muted); }
.rail-step.closed:hover:not(:disabled) .rail-txt b { color: var(--critical); }
.rail-step.closed.on { background: var(--critical); }
.rail-step.closed.on .rail-txt b, .rail-step.closed.on .rail-txt i { color: #fff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rail-step.on { background: var(--accent); color: #14161a; }
  :root:not([data-theme="light"]) .rail-step.on .rail-txt b { color: #14161a; }
  :root:not([data-theme="light"]) .rail-step.on .rail-txt i { color: rgba(20,22,26,.7); }
  :root:not([data-theme="light"]) .rail-step.on .rail-ico { background: rgba(20,22,26,.16); color: #14161a; }
}
:root[data-theme="dark"] .rail-step.on { background: var(--accent); color: #14161a; }
:root[data-theme="dark"] .rail-step.on .rail-txt b { color: #14161a; }
:root[data-theme="dark"] .rail-step.on .rail-txt i { color: rgba(20,22,26,.7); }
:root[data-theme="dark"] .rail-step.on .rail-ico { background: rgba(20,22,26,.16); color: #14161a; }

.nextstep { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 10px 0 2px; }

@media (max-width: 900px) {
  .rail-step { min-width: 118px; padding: 9px 11px 9px 22px; }
  .rail-txt i { display: none; }
}

/* The rail replaced the old three-button block, but that block still had a
   tinted panel behind it — with nothing inside, it rendered as an empty pink
   strip under the rail. It only wears a panel when it actually holds a button. */
.nextstep { background: none; border: none; padding: 0; margin: 10px 0 2px; }
.nextstep:empty { display: none; }

/* And the current step was coming out grey: --ink is set on .rail-step for the
   text colour, so  resolved against the inherited value
   rather than the near-black token. Named outright. */
.rail-step.on { background: #14161a !important; color: #fff !important; }
.rail-step.on .rail-txt b { color: #fff !important; }
.rail-step.on .rail-txt i { color: rgba(255,255,255,.72) !important; }
.rail-step.on .rail-ico { background: rgba(255,255,255,.2) !important; color: #fff !important; }
.rail-step.closed.on { background: var(--critical) !important; }
:root[data-theme="dark"] .rail-step.on { background: var(--accent) !important; color: #14161a !important; }
:root[data-theme="dark"] .rail-step.on .rail-txt b { color: #14161a !important; }
:root[data-theme="dark"] .rail-step.on .rail-txt i { color: rgba(20,22,26,.7) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rail-step.on { background: var(--accent) !important; color: #14161a !important; }
  :root:not([data-theme="light"]) .rail-step.on .rail-txt b { color: #14161a !important; }
  :root:not([data-theme="light"]) .rail-step.on .rail-txt i { color: rgba(20,22,26,.7) !important; }
}

/* The current step is marked disabled — you cannot move a lead to where it
   already is — and the app's global button styling dims a disabled button to
   45% opacity. On this rail that turned the one step that should be loudest
   into the faintest thing on the row. It is not unavailable, it is where you
   already are, so it keeps its full strength and simply does not respond. */
.rail-step:disabled { opacity: 1; }
.rail-step.on:disabled { opacity: 1; cursor: default; }

/* The footer belongs at the bottom of the screen, not tucked under the cards.
   It had `margin-top: auto` — the flex trick that pushes it down into whatever
   space is left — and the compact pass overwrote that with a fixed 12px, so it
   rode up and sat directly beneath the last card with a page of blank below it.
   The auto margin comes back; the compact pass now only trims its padding. */
.launch-foot { margin-top: auto; padding: 14px 0 4px; }
.launcher { min-height: 100%; }

/* A column that stepped aside so the rest could fit, and the line that says so. */
.col-off { display: none !important; }
.tbl-toolbar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; }
.tbl-hidden { font-size: 11.5px; color: var(--muted); }
.tbl-hidden b { color: var(--ink-2); font-weight: 700; }

/* ---- receivables grouped by party: a summary line that folds open ---- */
.pgroups { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pgroup { border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); overflow: hidden; }
.pg-head { display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  cursor: pointer; transition: background .12s var(--ease); }
.pg-head:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.pg-chev { color: var(--muted); font-size: 12px; flex: none; width: 12px;
  transition: transform .15s var(--ease); }
.pg-chev.down { transform: rotate(90deg); color: var(--accent); }
.pg-main { flex: 1; min-width: 0; }
.pg-name { font-weight: 700; font-size: 14px; color: var(--head);
  display: flex; align-items: center; gap: 9px; }
.pg-count { font-size: 11px; font-weight: 650; color: var(--muted);
  background: var(--grid); padding: 2px 8px; border-radius: 99px; flex: none; }
.pg-sub { font-size: 12px; color: var(--muted); margin-top: 3px;
  display: flex; gap: 12px; }
.pg-age.bad { color: var(--critical); font-weight: 650; }
.pg-age.warn { color: color-mix(in srgb, var(--warning) 74%, var(--ink)); font-weight: 600; }
.pg-money { text-align: right; flex: none; }
.pg-total { font-size: 17px; font-weight: 800; color: var(--head);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pg-due { font-size: 11px; color: var(--muted); margin-top: 1px; }
.pg-open { flex: none; font-size: 12.5px; font-weight: 650; color: var(--accent);
  text-decoration: none; white-space: nowrap; }
.pg-open:hover { text-decoration: underline; }

/* ---- premium account row (receivables / payables): a severity rail, a proper
   chevron, a party monogram and a calmer hierarchy. Scoped to .pg-acct so the
   stock grouped view (shared .pgroup / .pg-head / .pg-chev) is untouched. ---- */
.pg-acct { position: relative; }
.pg-acct::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: color-mix(in srgb, var(--muted) 32%, transparent); }
.pg-acct.sev-crit::before    { background: var(--critical); }
.pg-acct.sev-serious::before { background: var(--serious); }
.pg-acct.sev-warn::before    { background: var(--warning); }
.pg-acct .pg-head { gap: 12px; padding: 12px 18px 12px 15px; align-items: center; }
/* the chevron: a real glyph in a soft rounded target that turns on open */
.pg-acct .pg-chev { width: 26px; height: 26px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; color: var(--muted);
  transition: background .12s var(--ease), color .12s var(--ease); }
.pg-acct .pg-head:hover .pg-chev { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.pg-acct .pg-chev .ic { width: 15px; height: 15px; transition: transform .18s var(--ease); }
.pg-acct .pg-chev.down { color: var(--accent); }
.pg-acct .pg-chev.down .ic { transform: rotate(90deg); }
/* party monogram — identity + a touch of colour, same family as the login avatars */
.pg-acct .pg-ava { flex: none; display: inline-flex; }
.pg-acct .pg-ava .av { width: 34px; height: 34px; font-size: 12.5px; letter-spacing: .04em;
  box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.pg-acct .pg-name { font-size: 14.5px; letter-spacing: -.01em; }
.pg-acct .pg-sub { align-items: center; gap: 10px; margin-top: 2px; }
.pg-acct .pg-owner { display: inline-flex; align-items: center; gap: 5px; font-weight: 600;
  color: var(--ink-2); }
.pg-acct .pg-owner::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .55; }
/* aging as a quiet pill, coloured by severity (the rail's twin) */
.pg-acct .pg-agebadge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px;
  letter-spacing: .01em; background: var(--grid); color: var(--ink-2); white-space: nowrap; }
.pg-acct .pg-agebadge.crit    { background: color-mix(in srgb, var(--critical) 15%, transparent);
  color: color-mix(in srgb, var(--critical) 82%, var(--ink)); }
.pg-acct .pg-agebadge.serious { background: color-mix(in srgb, var(--serious) 18%, transparent);
  color: color-mix(in srgb, var(--serious) 70%, var(--ink)); }
.pg-acct .pg-agebadge.warn    { background: color-mix(in srgb, var(--warning) 22%, transparent);
  color: color-mix(in srgb, var(--warning) 50%, var(--ink)); }
.pg-acct .pg-total { font-size: 18px; }
/* due status under the amount: due-now is the chase number (warm), otherwise a calm grey */
.pg-acct .pg-due-on { color: color-mix(in srgb, var(--critical) 52%, var(--ink)); font-weight: 700; }
.pg-acct .pg-due-off { color: var(--muted); font-weight: 600; }

.pg-bills { max-height: 0; overflow: hidden; transition: max-height .22s var(--ease);
  background: color-mix(in srgb, var(--ink) 2.5%, var(--surface)); }
.pg-bills.open { max-height: 1400px; overflow-x: auto; border-top: 1px solid var(--border); }
.pg-billtable { width: 100%; font-size: 12.5px; }
.pg-billtable td { padding: 9px 14px; border-bottom: 1px solid var(--grid);
  vertical-align: middle; white-space: nowrap; }
.pg-billtable tr:last-child td { border-bottom: none; }
.pgb-ref { font-weight: 600; color: var(--ink); }
.pgb-cat { margin-left: 8px; font-size: 10px; font-weight: 650; color: var(--muted);
  background: var(--grid); padding: 1px 7px; border-radius: 4px; }
.pgb-age.bad { color: var(--critical); font-weight: 650; }
.pgb-age.warn { color: color-mix(in srgb, var(--warning) 72%, var(--ink)); }
.pgb-age.ok { color: var(--muted); }
.pgb-amt { font-weight: 750; color: var(--head); font-variant-numeric: tabular-nums; }
.pgb-act { display: flex; gap: 1px; justify-content: flex-end; }
.pgb-act button.ghost { padding: 4px 7px; font-size: 12px; }
.viewtoggle { font-weight: 650; font-size: 13px; }

/* ---- expanded receivables/payables bill grid: labelled, de-duplicated, tight.
   Everything is ADDITIVE and scoped to .pgb-recv so the shared stock-summary
   table (also .pg-billtable, using .pgb-age.bad/.warn/.ok) is left untouched. ---- */
.pgb-recv thead th { padding: 7px 14px 6px; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
.pgb-recv thead th.num { text-align: right; }
/* one greedy identity column soaks up the slack on the LEFT, so Due / Overdue /
   Amount / Actions cluster tight against the right edge — ends the sparse spread */
/* invoice + category cluster on the left, a greedy gap, then the money block
   on the right — every column hugs its content except the gap that pools slack */
.pgb-recv .pgb-c-gap { width: 100%; }
.pgb-recv .pgb-c-ref,
.pgb-recv .pgb-c-cat,
.pgb-recv .pgb-c-due,
.pgb-recv .pgb-c-age,
.pgb-recv .pgb-c-amt,
.pgb-recv .pgb-c-act { width: 1%; white-space: nowrap; }
.pgb-recv .pgb-c-cat { padding-right: 18px; }
.pgb-recv .pgb-c-amt { padding-left: 22px; }
.pgb-recv .pgb-dash { color: var(--muted); }
/* "#" so a bare "1" reads as an invoice ref, not a serial number */
.pgb-recv .pgb-hash { color: var(--muted); font-weight: 600; margin-right: 1px; }
/* secondary but readable (var(--ink-2), not --muted): dates, category chips and
   low-severity overdue must clear 4.5:1 in BOTH themes, not just dark */
.pgb-recv .pgb-due { color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* category is its own column now — a clean chip, not glued to the invoice */
.pgb-recv .pgb-cat { margin-left: 0; color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 5%, transparent); }
/* the merged Overdue cell: precise days carrying the bucket's full 4-level tone.
   crit/serious/plain are new; .pgb-age.warn is inherited from the rule above. */
.pgb-recv .pgb-age { font-variant-numeric: tabular-nums; font-weight: 600; }
.pgb-recv .pgb-age.crit    { color: var(--critical); font-weight: 700; }
.pgb-recv .pgb-age.serious { color: var(--serious); font-weight: 650; }
.pgb-recv .pgb-age.plain   { color: var(--ink-2); }
/* Amount is the hero: largest, boldest figure on the row, pinned right */
.pgb-recv .pgb-amt { font-size: 13.5px; font-weight: 800; color: var(--head);
  letter-spacing: -.01em; min-width: 104px; }
@media (max-width: 720px) {
  .pg-open { display: none; }
  .pg-head { flex-wrap: wrap; }
}

/* the bill-count chip fell just under 4.5:1 in dark mode against its grey pill */
.pg-count { color: var(--ink-2); }
:root[data-theme="dark"] .pg-count { color: #dce6f7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-count { color: #dce6f7; }
}