* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Sidebar "soon" tag for placeholder pages (IOD, Sick leave). Dims the row
   slightly so an admin's eye skips over it, and renders a small chip after
   the label so there's no surprise when the page is empty. */
.nav-item--soon { opacity: 0.72; }
.nav-item--soon:hover { opacity: 0.95; }
.nav-item--soon.active { opacity: 1; }
.nav-soon {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.75);
}

/* ─── Loading skeletons ─────────────────────────────────────────────────
   Any element that will eventually show a number renders a skeleton bar
   until its first data arrival. The SPA replaces the placeholder with
   textContent, which clears the skeleton class — no JS wiring per card
   needed, just the initial markup.

   To use: `<div class="hero-value" data-skeleton>—</div>` and when
   setStat / textContent assigns a real string, call clearSkeleton(el)
   (or rely on the data-loaded attribute if the loader sets it).
*/
@keyframes skeleton-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
[data-skeleton]:not([data-loaded]) {
  color: transparent !important;
  background:
    linear-gradient(
      90deg,
      rgba(226, 232, 240, 0) 0,
      rgba(226, 232, 240, 0.85) 50%,
      rgba(226, 232, 240, 0) 100%
    ),
    rgba(226, 232, 240, 0.55);
  background-size: 200px 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: -200px 0, 0 0;
  border-radius: 6px;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  display: inline-block;
  min-width: 2.5em;
  min-height: 1em;
  user-select: none;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-skeleton]:not([data-loaded]) { animation: none; }
}

:root {
  --c-bg:        #f4f6fa;
  --c-surface:   #ffffff;
  --c-text:      #0f1e2e;
  --c-text-mute: #5a6a82;
  --c-line:      #e3e8ef;
  --c-line-soft: #eef1f6;

  /* Sidebar background — stays this navy regardless of client theming so the
     white sidebar text is always legible. Client colours only override the
     prominent accents below. */
  --c-nav-bg:    #0a2f55;

  /* Client-themable primary (hero numbers, buttons, accents). Overridden at
     runtime by app.js applyClientTheme() based on dbo.Client.Colour. */
  --c-primary:    #0d3b66;
  --c-primary-d:  #0a2d4f;

  --c-fit:        #1f9d7e;
  --c-restricted: #6cc4a8;
  --c-followup:   #e0a33a;
  --c-unfit:      #d8533f;
  --c-pending:    #c5cbd6;
  --c-grey:       #5a6a82;

  --c-warn:       #e0a33a;
  --c-alert:      #d8533f;
  --c-ok:         #1f9d7e;

  /* HealthImpact sub-brands — ExecCare (executive medicals) and Phila
     (Employee Assistance Programme). Promoted to :root so every reference
     uses the same hex (previously an off-brand red/purple drifted into the
     service-card CSS and nowhere else). */
  --c-execcare:    #c8102e;
  --c-execcare-d:  #7a0f1f;
  --c-phila:       #6b2e8a;
  --c-phila-d:     #4a1d6e;

  /* Layered shadow — a thin border-like stroke close to the card, a soft
     lift shadow further away. Gives the cards physical presence without
     the "heavy dropshadow" look. */
  --shadow-card:
    0 0 0 1px rgba(15, 30, 46, 0.04),
    0 1px 2px rgba(15, 30, 46, 0.03),
    0 4px 14px rgba(15, 30, 46, 0.05);
  --shadow-card-hover:
    0 0 0 1px rgba(15, 30, 46, 0.06),
    0 2px 4px rgba(15, 30, 46, 0.05),
    0 10px 28px rgba(15, 30, 46, 0.08);

  --sidebar-w: 240px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.4;
  font-size: 14px;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: var(--c-primary);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}
button:hover { background: var(--c-primary-d); }

/* ---- Full-screen sign-in / error fallback ---------------------------- */
.fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}
.error-card {
  background: var(--c-surface);
  border-radius: 12px;
  padding: 40px;
  max-width: 460px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.error-card h2 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: var(--c-primary);
}
.error-card p {
  margin: 0 0 24px 0;
  color: var(--c-text-mute);
}

/* ====================================================================== */
/* ---- LANDING PAGE (split-screen sign-in) ---------------------------- */
/* ====================================================================== */
.landing {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: var(--c-bg);
  overflow: hidden;
  z-index: 50;
  animation: landing-fade-in 400ms ease-out;
}
@keyframes landing-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (max-width: 900px) {
  .landing { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
}

/* ---- Left panel (brand + value) ------------------------------------- */
.landing-left {
  position: relative;
  background: linear-gradient(135deg, #0a2f55 0%, #0d3b66 50%, #1c5a93 100%);
  color: white;
  padding: 64px 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
@media (max-width: 1100px) { .landing-left { padding: 48px 40px; } }
@media (max-width: 600px)  { .landing-left { padding: 40px 24px; } }

.landing-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.32;
  animation: orb-drift 14s ease-in-out infinite alternate;
}
.orb-1 {
  width: 360px; height: 360px;
  background: #2ea391;
  top: -80px; left: -80px;
}
.orb-2 {
  width: 280px; height: 280px;
  background: #e0a33a;
  bottom: -60px; right: -40px;
  animation-delay: -5s;
}
.orb-3 {
  width: 220px; height: 220px;
  background: #6cc4a8;
  top: 40%; right: 12%;
  opacity: 0.18;
  animation-delay: -9s;
}
@keyframes orb-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(40px, -30px); }
}

.brand-stack { position: relative; z-index: 1; }
.brand-mark-xl {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
}
.brand-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 6px;
  font-weight: 600;
}

.landing-headline {
  position: relative;
  z-index: 1;
  margin: 56px 0 24px 0;
  font-size: 52px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -1.2px;
  color: white;
}
.landing-headline .accent {
  color: #6cc4a8;
  background: linear-gradient(90deg, #6cc4a8 0%, #2ea391 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 1100px) { .landing-headline { font-size: 40px; } }
@media (max-width: 600px)  { .landing-headline { font-size: 32px; margin-top: 32px; } }

.landing-lead {
  position: relative;
  z-index: 1;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  max-width: 560px;
  margin: 0 0 36px 0;
}

.landing-points {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 540px;
}
.landing-points li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 16px;
  align-items: start;
}
.point-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6cc4a8;
  margin-top: 6px;
  box-shadow: 0 0 0 4px rgba(108,196,168,0.22);
}
.point-body strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}
.point-body span {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}

.landing-foot {
  position: relative;
  z-index: 1;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.landing-foot strong { color: rgba(255,255,255,0.85); font-weight: 600; }

/* ---- Right panel (sign-in card) ------------------------------------- */
.landing-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);
}
@media (max-width: 600px) { .landing-right { padding: 32px 24px 48px 24px; } }

.signin-card {
  background: white;
  border-radius: 16px;
  padding: 48px;
  max-width: 420px;
  width: 100%;
  box-shadow:
    0 1px 2px rgba(15,30,46,0.04),
    0 8px 24px rgba(15,30,46,0.06),
    0 0 0 1px rgba(15,30,46,0.04);
}
@media (max-width: 600px) { .signin-card { padding: 32px 28px; } }

.signin-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 12px;
}
.signin-card h2 {
  margin: 0 0 10px 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.8px;
  color: var(--c-text);
}
.signin-card p {
  margin: 0 0 28px 0;
  font-size: 15px;
  color: var(--c-text-mute);
  line-height: 1.5;
}

.signin-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  background: var(--c-primary);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(13,59,102,0.25);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.signin-btn:hover {
  background: var(--c-primary-d);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(13,59,102,0.32);
}
.signin-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(13,59,102,0.22);
}
.signin-btn .arrow {
  font-size: 18px;
  transition: transform 120ms ease;
}
.signin-btn:hover .arrow { transform: translateX(3px); }

.signin-help {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
  font-size: 12px;
  line-height: 1.55;
  color: var(--c-text-mute);
}
.signin-help strong { color: var(--c-text); font-weight: 600; }

/* ---- Command-centre landing additions ------------------------------- */
.brand-pipe {
  font-weight: 300;
  opacity: 0.55;
  margin: 0 6px;
}
.brand-stack { position: relative; z-index: 1; }
.brand-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 16px;
}
.brand-cross {
  color: #6cc4a8;
  filter: drop-shadow(0 0 8px rgba(108,196,168,0.55));
}
.brand-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding: 4px 10px 4px 8px;
  border: 1px solid rgba(108,196,168,0.4);
  border-radius: 999px;
  background: rgba(108,196,168,0.08);
  font-weight: 600;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6cc4a8;
  box-shadow: 0 0 0 0 rgba(108,196,168,0.5);
  animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(108,196,168,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(108,196,168,0); }
  100% { box-shadow: 0 0 0 0 rgba(108,196,168,0); }
}

/* EKG line drifting across the landing background */
.landing-bg .ekg {
  position: absolute;
  inset: auto 0 14% 0;
  width: 200%;
  height: 220px;
  opacity: 0.5;
  animation: ekg-drift 18s linear infinite;
}
@keyframes ekg-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Small status dots scattered in the bg */
.landing-bg .dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6cc4a8;
  opacity: 0.4;
  box-shadow: 0 0 0 6px rgba(108,196,168,0.06);
}
/* Dots colour-matched to the four service-area tabs (OCH/PHC/Uptake/Sites). */
.landing-bg .dot-1 { top: 18%; left: 12%; background: #1f6fb6; box-shadow: 0 0 0 6px rgba(31,111,182,0.10); }   /* OCH blue */
.landing-bg .dot-2 { top: 64%; left: 38%; background: #c4344c; box-shadow: 0 0 0 6px rgba(196,52,76,0.10); }   /* PHC red */
.landing-bg .dot-3 { top: 30%; left: 70%; background: #e07c2b; box-shadow: 0 0 0 6px rgba(224,124,43,0.10); }  /* Uptake orange */
.landing-bg .dot-4 { top: 72%; left: 82%; background: #2e9d6b; box-shadow: 0 0 0 6px rgba(46,157,107,0.10); }  /* Sites green */

/* ---- Hero card ribbon (OCH / PHC tags on Overview) ----------------- */
.hero-card { position: relative; overflow: hidden; }
.ribbon {
  position: absolute;
  top: 14px;
  right: 14px;
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}
/* Default ribbon colours mapped to the card's accent — overridden below. */
.ribbon { background: var(--c-primary); }
.ribbon-alt { background: var(--c-fit); }

/* ---- Service-area banner (top of OCH / PHC pages) ------------------ */
.service-banner {
  position: relative;
  padding: 24px 28px;
  border-radius: 14px;
  color: white;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.service-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 30%, rgba(255,255,255,0.18), transparent 50%);
  pointer-events: none;
}
.service-banner .banner-eyebrow {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  font-weight: 600;
  margin-bottom: 6px;
}
.service-banner h2 {
  margin: 0 0 6px 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: white;
}
.service-banner p {
  margin: 0;
  color: rgba(255,255,255,0.86);
  font-size: 14px;
  max-width: 60ch;
}
/* OCH banner — coral/orange, matches the Overview OCH card. */
.och-banner  { background: linear-gradient(135deg, #a85516 0%, #e8832e 55%, #f5b464 100%); }
/* PHC banner — emerald, matches the Overview PHC card. */
.phc-banner  { background: linear-gradient(135deg, #1a6b43 0%, #2ea86b 55%, #67c795 100%); }
/* Drug banner — red (positives are the signal we want clients to feel). */
.drug-banner { background: linear-gradient(135deg, #701514 0%, #c9302c 55%, #e26665 100%); }
/* Decorative glyph in the top-right of every service banner. Each page
   points --sb-glyph at a themed data-URI SVG; the mask lets the brand
   colour show through at low opacity instead of a hard-coded fill. */
.service-banner::before {
  content: '';
  position: absolute;
  right: -24px;
  top: -24px;
  width: 160px;
  height: 160px;
  background: rgba(255,255,255,0.45);
  mask-image: var(--sb-glyph, none);
  -webkit-mask-image: var(--sb-glyph, none);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  opacity: 0.22;
  pointer-events: none;
}
.och-banner  { --sb-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 4a7 7 0 0 0-7 7v3H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-1v-3a7 7 0 0 0-7-7Zm-5 7a5 5 0 0 1 3-4.58V11H7Zm10 0h-3V6.42A5 5 0 0 1 17 11Z"/></svg>'); }
.phc-banner  { --sb-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M14 4h-4a1 1 0 0 0-1 1v4H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h4v4a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-4h4a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-4V5a1 1 0 0 0-1-1Z"/></svg>'); }
.drug-banner { --sb-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2a1 1 0 0 1 .95.68l1.5 4.5a1 1 0 0 0 .72.66l4.7 1.1a1 1 0 0 1 .52 1.68l-3.3 3.4a1 1 0 0 0-.27.83l.6 4.7a1 1 0 0 1-1.45 1.04l-4.17-2.2a1 1 0 0 0-.93 0l-4.17 2.2a1 1 0 0 1-1.45-1.04l.6-4.7a1 1 0 0 0-.27-.83L1.68 10.62a1 1 0 0 1 .52-1.68l4.7-1.1a1 1 0 0 0 .72-.66l1.5-4.5A1 1 0 0 1 12 2Z"/></svg>'); }

/* ---- Card-note (small italic helper text under a card) ------------ */
.card-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line-soft);
  font-size: 12px;
  color: var(--c-text-mute);
  line-height: 1.55;
}
.card-note em { font-style: italic; }
.card-note code {
  background: var(--c-line-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--c-text);
}
.card-pill {
  display: inline-block;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-d) 100%);
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  /* .card-title is a flex container with gap:10px — don't add a second
     10px of margin here or the pill reads at double the dot-to-title
     spacing. One gap source, consistently 10px across every card. */
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(13, 59, 102, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ---- Kiosk exit floating button ----------------------------------- */
.kiosk-exit {
  position: fixed;
  top: 18px;
  right: 22px;
  display: none;                  /* shown only when body.kiosk */
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(15, 30, 46, 0.85);
  backdrop-filter: blur(6px);
  color: white;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  z-index: 250;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.kiosk-exit:hover {
  background: rgba(15, 30, 46, 0.95);
  transform: translateY(-1px);
}
body.kiosk .kiosk-exit { display: inline-flex; }
body.kiosk::after { display: none; } /* hide the small Esc text — explicit button replaces it */

/* ====================================================================== */
/* ---- TERMS & CONDITIONS MODAL ---------------------------------------- */
/* ====================================================================== */
.terms-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 24, 40, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 24px;
  animation: landing-fade-in 200ms ease-out;
}
.terms-card {
  background: white;
  border-radius: 16px;
  max-width: 720px;
  width: 100%;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1px 2px rgba(15,30,46,0.04),
    0 24px 48px rgba(15,30,46,0.18);
  overflow: hidden;
}
.terms-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 32px 20px 32px;
  border-bottom: 1px solid var(--c-line);
}
.terms-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 6px;
}
.terms-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--c-text);
}
.terms-version {
  font-size: 11px;
  color: var(--c-text-mute);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-top: 6px;
}
.terms-body {
  padding: 24px 32px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text);
  flex: 1;
}
.terms-body h1, .terms-body h2, .terms-body h3 {
  color: var(--c-primary);
  letter-spacing: -0.3px;
}
.terms-body h1 { display: none; }            /* h1 inside body is redundant with modal title */
.terms-body h2 { font-size: 16px; margin: 24px 0 10px 0; font-weight: 700; }
.terms-body h3 { font-size: 14px; margin: 16px 0 6px 0; font-weight: 600; }
.terms-body p { margin: 8px 0; }
.terms-body ul { padding-left: 22px; margin: 8px 0; }
.terms-body li { margin: 4px 0; }
.terms-body strong { color: var(--c-text); font-weight: 700; }
.terms-body hr {
  border: none;
  border-top: 1px solid var(--c-line);
  margin: 20px 0;
}
.terms-body::-webkit-scrollbar { width: 8px; }
.terms-body::-webkit-scrollbar-track { background: transparent; }
.terms-body::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 4px; }
.terms-body::-webkit-scrollbar-thumb:hover { background: var(--c-text-mute); }

.terms-foot {
  padding: 20px 32px 24px 32px;
  border-top: 1px solid var(--c-line);
  background: #fafbfd;
}
.terms-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--c-text);
  cursor: pointer;
  user-select: none;
}
.terms-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--c-primary);
}
#terms-accept[disabled] {
  background: var(--c-line);
  color: var(--c-text-mute);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
#terms-accept[disabled]:hover { background: var(--c-line); }
.terms-error {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fdecea;
  border-left: 3px solid var(--c-alert);
  border-radius: 4px;
  font-size: 13px;
  color: #6e1f12;
}

/* ---- Sidebar + content shell ---------------------------------------- */
#shell {
  display: grid;
  /* minmax(0, 1fr) is critical: without the explicit 0 min, the 1fr track
     adopts its content's intrinsic min-width, so any oversized card
     (correlation strip, wide table, long legend) pushes the entire main
     column — and therefore every row — past the viewport. The horizontal
     scrollbar + clipped Open-IOD card Roy saw are both this. */
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* Mobile: collapse the sidebar to a hamburger-triggered slide-over so the
   data column gets the full viewport width. The sidebar still mounts in the
   DOM (so nav / client picker still work) but is translated off-screen until
   #nav-toggle is :checked. */
#nav-toggle { display: none; }
.nav-toggle-btn {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1001;
  background: var(--c-nav-bg);
  color: #fff;
  border: 0;
  border-radius: 10px;
  width: 42px;
  height: 42px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(10, 20, 32, 0.3);
}
.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 32, 0.45);
  z-index: 999;
}
@media (max-width: 720px) {
  #shell { grid-template-columns: 1fr; }
  #sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 280px;
    max-width: 85vw;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .nav-toggle-btn { display: flex; align-items: center; justify-content: center; }
  #nav-toggle:checked ~ #sidebar { transform: translateX(0); }
  #nav-toggle:checked ~ .nav-scrim { display: block; }
  /* Push main content down so the hamburger doesn't overlap the page title. */
  .page-head, .page-title, .exec-header { padding-top: 56px; }
}

#sidebar {
  background: var(--c-nav-bg);
  color: white;
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

#sidebar .brand {
  padding: 0 24px 24px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 16px;
}
#sidebar .brand-mark {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
#sidebar .brand-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-top: 4px;
}

/* Sidebar logo. Asset is the cropped 1600×255 wordmark (~6.3:1), so 24px tall
   renders at ~150px wide — fits comfortably within the 280-wide sidebar. */
.brand-logo-side {
  display: block;
  height: 24px;
  width: auto;
  margin-bottom: 4px;
}

/* Landing page logo. Cropped aspect ratio means height=52 renders ~326px wide,
   which balances against the "HealthImpact Command Centre" headline below. */
.brand-logo-landing {
  display: block;
  height: 52px;
  width: auto;
  margin-bottom: 16px;
}
@media (max-width: 600px) { .brand-logo-landing { height: 40px; } }

/* Inversion filter for placing the dark-on-white logo onto navy backgrounds.
   Turns the whole logo into white silhouette — works because the PNG has a
   transparent or near-white background. */
.invert-on-dark { filter: brightness(0) invert(1); }

/* Brand watermark — bottom-right on every dashboard page. Smaller height now
   that the asset is wordmark-width (~6.3:1) — 18px tall ≈ 113px wide. */
.page-watermark {
  position: fixed;
  bottom: 16px;
  /* Moved to bottom-LEFT (16px past the sidebar) to clear the Thuso FAB in
     the opposite corner — they used to stack on short pages. */
  left: calc(var(--sidebar-w, 240px) + 16px);
  right: auto;
  height: 18px;
  width: auto;
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
  transition: opacity 200ms ease;
}
.page-watermark:hover { opacity: 0.6; }
body.kiosk .page-watermark { bottom: 22px; left: auto; right: 26px; height: 24px; opacity: 0.55; }

/* Client brand chip — shows the client's colour + name in the sidebar */
.client-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
}
/* Coloured swatch retired — chip now reads as the client name only. The
   span still ships (JS sets its background from the brand hex) so if we
   want it back later it's a display:none flip, not a wiring job. */
.client-chip-swatch { display: none; }
.client-chip-name {
  font-size: 13px;
  font-weight: 600;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-chip[hidden] { display: none !important; }

.nav-group {
  padding: 12px 14px;
}
.nav-label {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 10px 8px 10px;
  font-weight: 600;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 6px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  margin: 1px 0;
  transition: background 100ms ease;
}
.nav-item:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}
.nav-item.active {
  background: rgba(255,255,255,0.15);
  color: white;
}
.nav-item.active .nav-icon { color: white; }
.nav-item .nav-icon {
  display: inline-block;
  width: 18px;
  text-align: center;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
}

/* Sim dropdown inside sidebar */
.nav-item--static { cursor: default; }
.nav-item--static:hover { background: transparent; }
.nav-select {
  background: rgba(255,255,255,0.08);
  color: white;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  cursor: pointer;
  outline: none;
  -webkit-appearance: menulist;
  appearance: menulist;
}
.nav-select:hover { background: rgba(255,255,255,0.12); }
.nav-select option { color: var(--c-text); background: white; }
.nav-select optgroup { color: var(--c-text-mute); background: #f4f6fa; }

/* Simulation banner above page header */
.sim-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #fff2d4, #ffe2b3);
  border: 1px solid #e0a33a;
  border-radius: 8px;
  font-size: 13px;
  color: #6b4f17;
  margin-bottom: 16px;
  font-weight: 500;
}
.sim-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0a33a;
  box-shadow: 0 0 0 0 rgba(224,163,58,0.5);
  animation: pulse-ring 1.8s ease-out infinite;
}
.sim-banner strong { color: #4a3611; }
.sim-banner-stop {
  margin-left: auto;
  background: transparent;
  color: #6b4f17;
  border: 1px solid #c89a3e;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.sim-banner-stop:hover { background: rgba(224,163,58,0.15); }

.sidebar-foot {
  margin-top: auto;
  padding: 16px 14px 0 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-left: 8px;
  margin-right: 8px;
}
.app-version {
  padding: 10px 10px 8px;
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.02em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  user-select: text;
}
.app-version:empty { display: none; }
.user-block {
  padding: 10px 10px;
  margin-bottom: 4px;
}
.user-name {
  font-size: 13px;
  color: white;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-email {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Main content area ---------------------------------------------- */
#content {
  padding: 32px 40px;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

.page-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
}
/* When a client colour is applied, accent the page-head with a short coloured stripe */
.themed .page-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 80px;
  height: 3px;
  background: var(--c-brand, var(--c-primary));
  border-radius: 2px;
}
.page-meta {
  font-size: 12px;
  color: var(--c-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.scope-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: help;
}
.scope-badge--all {
  background: #fff0ec;
  color: #b23030;
  border: 1px solid #f5c7bd;
}
/* Compact variant of .hero-card used inside .hero-row--compact grids
   (e.g. the HIV counselling mini-hero on the PHC page). The standard
   .hero-card reserves ~72px on the left for an icon chip; these nested
   cards don't carry an icon, so clawing that padding back stops the
   value from wrapping into the empty chip space on ~1200px viewports. */
.hero-card--compact {
  padding-left: 16px;
}
.hero-card--compact::before,
.hero-card--compact .hero-icon { display: none; }
/* Compact hero cards (HIV mini-hero) are only ~190px wide, so the full
   "Ask Thuso" chip (~110px) overlapped the title. Shrink the chip to
   icon-only on these — the full label still shows on wider cards. */
.hero-card--compact .ask-hive-chip { padding: 4px 7px; gap: 4px; }
.hero-card--compact .ask-hive-chip > span:not(.ask-hive-chip-arrow) { display: none; }
.hero-card--compact .hero-label { padding-right: 44px; }

/* Dot shown next to each client name in the aggregate Top Sites table so
   a cross-client mix (Rainbow Chicken + Barloworld + Trident) reads as
   such at a glance. Colour is stable per client via clientColor(). */
.client-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

/* YoY chip under each hero stat value. "Good" direction (employees up,
   sites up, fit % up, risk cases down) is green; "bad" is red; flat is
   neutral grey. Hover tooltip carries the exact period labels. */
.yoy-chip {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: default;
  white-space: nowrap;
}
.yoy-chip--good { background: #e6f5ec; color: #1a7a3f; border: 1px solid #c3e4cf; }
.yoy-chip--bad  { background: #fdecec; color: #b23030; border: 1px solid #f5c7bd; }
.yoy-chip--flat { background: #eef1f6; color: #5a6b85; border: 1px solid #dbe1ec; }

/* Correlation strip on Overview — "signals moving together across your
   sites". Compact: top-2 cards side-by-side, light styling so it doesn't
   compete with the hero stats below. */
.correlation-strip {
  background: #f7f9fc;
  border: 1px solid #d8dee9;
  border-left: 4px solid #0d3b66;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.correlation-strip-head {
  margin-bottom: 6px;
}
.correlation-strip-title {
  font-size: 11px;
  font-weight: 700;
  color: #0d3b66;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.correlation-strip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-right: 6px;
  background: #0d3b66;
  color: #ffffff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
}
.correlation-strip-rows {
  display: grid;
  grid-template-columns: 1fr;    /* default: single column so narrow views don't overflow */
  gap: 10px;
}
/* Only promote to a two-column layout when there's actually room — long
   metric labels like "Drug & alcohol positive rate" push each card well
   past 380px of content, and the old auto-fit grid let that content
   drag the whole page wider than the viewport. */
@media (min-width: 1280px) {
  .correlation-strip-rows { grid-template-columns: 1fr 1fr; }
}
.correlation-card {
  background: #ffffff;
  border: 1px solid #e2e6ee;
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  position: relative;
  overflow: hidden;
  min-width: 0;        /* allow this grid cell to shrink past its content */
  max-width: 100%;
}
.correlation-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #0d3b66;
}
.correlation-card--neg::before { background: #1b8aa3; }
.correlation-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  color: #8892a4;
}
/* .correlation-card-rchip / --pos / --neg / .is-strong / .is-moderate
   were the monospace "r = +0.76" chip the correlation strip rendered
   before the plain-English rewrite. The chip is gone from the JS; the
   rules were dead CSS so they've been removed. */
.correlation-card-tag {
  color: #0d3b66;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-transform: none;
}
.correlation-card--neg .correlation-card-tag { color: #0d6b85; }
.correlation-card-sentence {
  font-size: 15px;
  line-height: 1.45;
  color: #0d1e2e;
  padding: 2px 0;
}
.correlation-card-sentence strong {
  color: #0d3b66;
  font-weight: 700;
  background: #f1f6fb;
  padding: 1px 6px;
  border-radius: 5px;
  overflow-wrap: anywhere;
}
.correlation-card--neg .correlation-card-sentence strong { background: #e6f2f6; color: #0d6b85; }
.correlation-card-interpret {
  font-size: 12px;
  color: #586780;
  line-height: 1.45;
  padding: 8px 10px;
  background: #f6f8fb;
  border-left: 2px solid #d8dee9;
  border-radius: 0 6px 6px 0;
  font-style: italic;
}
/* When a card has no interpretation text, keep the slot but invisible —
   this stops the Ask-Thuso foot from floating up and misaligning with
   the sibling card's foot in a two-across layout. */
.correlation-card-interpret.is-empty {
  background: transparent;
  border-left-color: transparent;
  color: transparent;
}
.correlation-card-foot {
  display: flex;
  justify-content: flex-end;
}
.correlation-card-ask {
  background: linear-gradient(135deg, #0d3b66 0%, #164a7a 100%);
  color: #ffffff;
  border: none;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: transform 0.1s ease;
}
.correlation-card-ask:hover { opacity: 0.95; transform: translateY(-1px); }
.correlation-card-ask .ask-arrow { font-weight: 800; margin-right: 4px; }

/* MSK heat matrix on PHC — site × body-region grid.
   Dense enough to scan a 20×6 matrix at a glance; row-sticky + col-sticky
   so headers stay visible while scrolling the data region. */
.msk-matrix {
  overflow: auto;
  max-width: 100%;
  max-height: 540px;
  border: 1px solid #e2e6ee;
  border-radius: 10px;
}
.msk-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
.msk-table th, .msk-table td {
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.msk-head {
  background: #0d3b66;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 11px;
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: center;      /* default — body-region cols use centered % */
}
.msk-head--left { text-align: left;  padding-left: 14px; }
.msk-head--num  { text-align: right; padding-right: 14px; }
.msk-col { background: #164a7a; color: #ffffff; font-weight: 700; }
.msk-cell {
  border: 1px solid #dbe1ec;
  font-weight: 700;
  min-width: 56px;
}
.msk-cell--blank {
  background: #f6f8fb;
  color: #8892a4;
  border-color: #e2e6ee;
}
/* Site + Client + Assessed cells scroll with the rest of the matrix —
   trying to pin the first columns via position:sticky overlapped the
   Client and Site cells in cross-client scope (both at left:0) and
   broke the frozen group on horizontal scroll. The matrix is narrow
   enough (6 body regions + 2-3 label cols) that normal horizontal
   scroll is fine; the sticky-top header row still keeps column labels
   visible on vertical scroll. */
.msk-site-cell {
  text-align: left;
  background: #ffffff;
  border-top: 1px solid #e2e6ee;
  padding-right: 14px;
}
.msk-site-cell--num {
  text-align: right;
  min-width: 92px;
}
.msk-site-sub {
  font-weight: 500;
  color: #8892a4;
  font-size: 11px;
}

/* Anomaly strip above the exec stats on Overview. Compact one-line rows
   with a severity dot on the left, the server-generated explanation in
   the middle, and action buttons (Open / Ask Thuso) on the right. Tight
   padding so the strip stays scannable without hogging screen height. */
.anomaly-strip {
  background: #fffaf2;
  border: 1px solid #f0d8a6;
  border-left: 4px solid #e3a51a;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(227, 165, 26, 0.06);
}
.anomaly-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.anomaly-strip-title {
  font-size: 11px;
  font-weight: 700;
  color: #7a4b00;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.anomaly-strip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-right: 6px;
  background: #e3a51a;
  color: #ffffff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
}
.anomaly-strip-dismiss {
  background: transparent;
  border: none;
  color: #8c6610;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.anomaly-strip-dismiss:hover { background: rgba(227, 165, 26, 0.14); }
.anomaly-strip-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.anomaly-row {
  display: grid;
  grid-template-columns: 8px 16px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: #ffffff;
  border: 1px solid #f0e4c6;
  border-radius: 6px;
  font-size: 12px;
  color: #3b2d10;
}
.anomaly-row-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.anomaly-row--high .anomaly-row-dot { background: #d64545; }
.anomaly-row--med  .anomaly-row-dot { background: #e3a51a; }
.anomaly-row-dir {
  font-weight: 800;
  font-size: 14px;
  text-align: center;
}
.anomaly-row-dir.is-up   { color: #d64545; }
.anomaly-row-dir.is-down { color: #0d6b85; }
.anomaly-row-msg { line-height: 1.4; }
.anomaly-row-view, .anomaly-row-ask-thuso {
  background: transparent;
  border: 1px solid #d8dee9;
  color: #0d3b66;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.anomaly-row-view:hover { background: #f1f6fb; }
.anomaly-row-ask-thuso {
  background: linear-gradient(135deg, #0d3b66 0%, #164a7a 100%);
  color: #ffffff;
  border-color: transparent;
}
.anomaly-row-ask-thuso .ask-arrow { font-weight: 800; margin-right: 4px; }
.anomaly-row-ask-thuso:hover { opacity: 0.92; }
@media (max-width: 720px) {
  .anomaly-row {
    grid-template-columns: 10px 20px 1fr;
    row-gap: 8px;
  }
  .anomaly-row-view, .anomaly-row-ask-thuso {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
.page-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--c-text);
}
.page-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-updated {
  font-size: 11px;
  color: var(--c-text-mute);
}
.ghost-btn {
  background: transparent;
  color: var(--c-text-mute);
  border: 1px solid var(--c-line);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
}
.ghost-btn:hover {
  background: var(--c-line-soft);
  color: var(--c-text);
}
.back-btn { margin-bottom: 16px; }

/* ---- Hero strip ------------------------------------------------------ */
/* Each Overview hero card picks its OWN palette (not the client brand) so
   HealthImpact's dashboard reads as one considered product. Four palettes:
     Total patients  → purple  (people / membership)
     Occupational    → coral   (safety / workforce)
     Primary health  → emerald (clinical / vitality)
     Lead share      → amber   (opportunity / sunlight)
   Each card carries: a soft diagonal gradient wash in the palette's tint,
   a bold accent border down the left, the hero number in the palette's
   deep shade, a decorative glyph in the bottom-right at ~12% opacity,
   and a hover lift. The hero-delta line sits on a tinted chip so the
   "vs last month" story reads at a glance. */
.hero-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
/* ---- Modern hero-card (uplift to Executive Overview language) ----------
   Flat white surface with a 3 px top stripe in the page's tone colour, a
   36 px pastel icon chip in the top-left, and a two-row content column:
   label on top, big value + delta underneath. Lifts on hover. Keeps the
   per-tone --hc-* vars so OCH stays coral, PHC emerald, Drug red, etc. */
.hero-card {
  --hc-tint:   #eef1f6;
  --hc-wash:   #f6f8fb;   /* retained for back-compat; no longer painted */
  --hc-accent: #5b4ac3;
  --hc-deep:   #3f3287;
  --hc-glyph:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2 2 7v10l10 5 10-5V7z"/></svg>');
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.05);
  border-top: 3px solid var(--hc-accent);
  border-radius: 14px;
  padding: 20px 22px 20px 72px;   /* leave room for the icon chip */
  box-shadow: 0 1px 2px rgba(13,30,46,0.04), 0 6px 18px rgba(13,30,46,0.06);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  min-height: 128px;
}
.hero-card:hover {
  box-shadow: 0 2px 6px rgba(13,30,46,0.08), 0 14px 32px rgba(13,30,46,0.12);
  transform: translateY(-2px);
}
/* Icon chip = pastel rect (::before) + deep-colour glyph on top (::after),
   both anchored to the top-left padding gutter. Two pseudo-elements beat
   trying to layer a background-image over mask-image on one element. */
.hero-card::before {
  content: '';
  position: absolute;
  top: 20px; left: 22px;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--hc-tint);
}
.hero-card::after {
  content: '';
  position: absolute;
  top: 29px; left: 31px;        /* centred on 36×36 chip */
  width: 18px; height: 18px;
  background: var(--hc-deep);
  mask-image: var(--hc-glyph);
  -webkit-mask-image: var(--hc-glyph);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
}
.hero-label {
  font-size: 12px;
  color: #4a5a63;
  font-weight: 600;
  letter-spacing: 0.15px;
  text-transform: none;
  margin-bottom: 10px;
  line-height: 1.3;
}
.hero-value {
  font-size: 32px;
  font-weight: 800;
  color: #0d1e2e;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.hero-delta {
  font-size: 11.5px;
  color: #586780;
  display: block;
  padding: 0;
  background: none;
  border: none;
  line-height: 1.4;
}
.hero-delta .pos  { color: #1f7a4d; font-weight: 700; }
.hero-delta .neg  { color: #c9302c; font-weight: 700; }
.hero-delta .flat { color: #586780; }

/* ---- Per-card palettes & glyphs -------------------------------------- */
/* data-card="total" → purple / people */
.hero-card[data-card="total"] {
  --hc-tint:   #efecfb;
  --hc-wash:   #f7f5fd;
  --hc-accent: #5b4ac3;
  --hc-deep:   #3f3287;
  --hc-glyph:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm7 .5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-7 2c-3 0-6 1.5-6 4.5V20h12v-2c0-3-3-4.5-6-4.5Zm7 .5c-.9 0-1.7.14-2.4.4 1.7.95 2.9 2.3 2.9 4.1V20h6v-1.6c0-2.6-2.9-4.4-6.5-4.4Z"/></svg>');
}
/* data-card="och" → coral / hard-hat (occupational / workforce) */
.hero-card[data-card="och"] {
  --hc-tint:   #fcebe0;
  --hc-wash:   #fef5ee;
  --hc-accent: #e8832e;
  --hc-deep:   #a85516;
  --hc-glyph:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 4a7 7 0 0 0-7 7v3H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-1v-3a7 7 0 0 0-7-7Zm-5 7a5 5 0 0 1 3-4.58V11H7Zm10 0h-3V6.42A5 5 0 0 1 17 11Z"/></svg>');
}
/* data-card="phc" → emerald / medical cross (primary healthcare) */
.hero-card[data-card="phc"] {
  --hc-tint:   #e4f5ec;
  --hc-wash:   #f1faf4;
  --hc-accent: #2ea86b;
  --hc-deep:   #1a6b43;
  --hc-glyph:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M14 4h-4a1 1 0 0 0-1 1v4H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h4v4a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-4h4a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-4V5a1 1 0 0 0-1-1Z"/></svg>');
}
/* data-card="lead" → amber-gold / rising trend (opportunity) */
.hero-card[data-card="lead"] {
  --hc-tint:   #fbf2d7;
  --hc-wash:   #fef8e5;
  --hc-accent: #d9a21a;
  --hc-deep:   #8b6610;
  --hc-glyph:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M3 19h18v2H3zm2-4 4-5 4 3 6-8 2 1.5-8 10-4-3-4 5Z"/></svg>');
}
/* The service-area ribbon pills (OCH / PHC) inherit the card's accent. */
.hero-card[data-card="och"] .ribbon,
.hero-card[data-card="phc"] .ribbon,
.hero-card[data-card="phc"] .ribbon-alt { background: var(--hc-accent); }

/* ---- Section-scoped hero palettes ------------------------------------ */
/* Every secondary .hero-card on a service page inherits that page's palette
   automatically, so the OCH page reads coral all the way down, PHC reads
   emerald, Drug Testing reads red (positives / alerts), Workforce reads
   teal (integration / coverage), and Sites reads purple (people-shaped
   roll-ups). The Overview page is excluded — its data-card variants
   already pick their own palettes per card. */
/* Each page gets a default icon so a plain .hero-card (no data-card) still
   renders a meaningful glyph. Keep the Wellness-only data-card variants
   below for their specific icons (people/cross/trend). */
.page[data-page="och"] .hero-card {
  --hc-tint: #fcebe0; --hc-wash: #fef5ee; --hc-accent: #e8832e; --hc-deep: #a85516;
  --hc-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 4a7 7 0 0 0-7 7v3H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-1v-3a7 7 0 0 0-7-7Zm-5 7a5 5 0 0 1 3-4.58V11H7Zm10 0h-3V6.42A5 5 0 0 1 17 11Z"/></svg>');
}
.page[data-page="phc"] .hero-card {
  --hc-tint: #e4f5ec; --hc-wash: #f1faf4; --hc-accent: #2ea86b; --hc-deep: #1a6b43;
  --hc-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M14 4h-4a1 1 0 0 0-1 1v4H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h4v4a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-4h4a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-4V5a1 1 0 0 0-1-1Z"/></svg>');
}
.page[data-page="drug"] .hero-card {
  --hc-tint: #fde8e8; --hc-wash: #fef3f3; --hc-accent: #c9302c; --hc-deep: #8a1f1c;
  /* flask / vial */
  --hc-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 3h6v2h-1v4.17l4.26 7.1A2 2 0 0 1 16.55 19H7.45a2 2 0 0 1-1.71-2.73L10 9.17V5H9V3zm3 6.17V5h0v4.17l-1.52 2.54c.47-.11.97-.1 1.52.02.86.19 1.64.61 2.37.95L12 9.17z"/></svg>');
}
.page[data-page="workforce"] .hero-card {
  --hc-tint: #e2f3f5; --hc-wash: #eff9fa; --hc-accent: #22a1a8; --hc-deep: #10656a;
  /* group of people */
  --hc-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm7 .5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-7 2c-3 0-6 1.5-6 4.5V20h12v-2c0-3-3-4.5-6-4.5Zm7 .5c-.9 0-1.7.14-2.4.4 1.7.95 2.9 2.3 2.9 4.1V20h6v-1.6c0-2.6-2.9-4.4-6.5-4.4Z"/></svg>');
}
.page[data-page="sites"] .hero-card,
.page[data-page="site-detail"] .hero-card {
  --hc-tint: #efecfb; --hc-wash: #f7f5fd; --hc-accent: #5b4ac3; --hc-deep: #3f3287;
  /* map pin */
  --hc-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"/></svg>');
}

/* ---- Grid for cards -------------------------------------------------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.grid-2 .span-2 { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2 .span-2 { grid-column: auto; }
}

/* ---- Card surface --------------------------------------------------- */
.card {
  --card-accent: #1b8aa3;
  background: var(--c-surface);
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(1200px 200px at 100% 0%,
    color-mix(in srgb, var(--card-accent) 5%, transparent),
    transparent 62%);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
/* Thin accent sliver across the top of every card — same colour as the
   section's palette, so a glance tells you which service area you're in. */
.card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--card-accent) 0%, color-mix(in srgb, var(--card-accent) 40%, transparent) 60%, transparent 100%);
  opacity: 0.9;
}
.page[data-page="och"]       .card { --card-accent: #e8832e; }
.page[data-page="phc"]       .card { --card-accent: #2ea86b; }
.page[data-page="drug"]      .card { --card-accent: #c9302c; }
.page[data-page="workforce"] .card { --card-accent: #22a1a8; }
.page[data-page="sites"]     .card,
.page[data-page="site-detail"] .card { --card-accent: #5b4ac3; }
.page[data-page="overview"]  .card { --card-accent: #5b4ac3; }

.card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 14px 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-title::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--card-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-accent) 18%, transparent);
  flex-shrink: 0;
}
.empty-state {
  color: var(--c-text-mute);
  font-size: 13px;
  text-align: center;
  padding: 36px 16px;
  background: linear-gradient(180deg, transparent 0%, var(--c-line-soft) 100%);
  border-radius: 10px;
  margin: 6px 0 2px;
}
/* Celebratory empty-state — used when a "bad thing" count is zero and we
   want to reward the reader (e.g. no positive drug tests this month).
   When shown, we collapse the sibling donut + legend so the celebrate
   block occupies the whole card and vertically centres itself. */
.empty-state-celebrate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  min-height: 260px;
  flex: 1;
}
.chart-card:has(> .empty-state-celebrate:not([hidden])) {
  display: flex;
  flex-direction: column;
}
.chart-card:has(> .empty-state-celebrate:not([hidden])) > .donut-wrap,
.chart-card:has(> .empty-state-celebrate:not([hidden])) > .chart-legend {
  display: none;
}
.celebrate-svg {
  width: 84px;
  height: 84px;
  margin-bottom: 4px;
}
.empty-state-headline {
  margin: 0;
  color: var(--c-text);
  font-size: 15px;
  font-weight: 600;
}
.empty-state-sub {
  margin: 0;
  color: var(--c-text-mute);
  font-size: 13px;
}
/* Red flag on a numeric cell — used for the sites table positive-rate
   column when the rate is greater than zero. */
.rate-positive { color: var(--c-alert); font-weight: 600; }

/* Compact status pill that sits inline with a card title (e.g. "Alcohol
   readings — this month  [12 positive]"). Colour flips based on state. */
.card-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  margin-left: 10px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.card-status-pill::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.card-status-pill.pill-ok    { background: #e3f5f3; color: #146c6c; }
.card-status-pill.pill-alert { background: #fdecea; color: #8f2318; }

/* Give the sites card a bit more breathing room around the subtitle
   before the table starts. Default .card-subtitle sits negative-margin
   under the title, which reads tight on this wider table card. */
.sites-card .card-subtitle { margin: 4px 0 20px 0; }
.sites-card .data-table    { margin-top: 4px; }

/* ---- Charts --------------------------------------------------------- */
.chart-card { position: relative; }
/* Horizontal-bar + line charts live as a bare <canvas> directly inside
   .chart-card. Chart.js (responsive, maintainAspectRatio:false) measures
   the parent on first paint — if .chart-card sizes to its canvas's
   intrinsic height (150px, HTML default), that measurement races the
   initial paint and the chart ends up collapsed. Pinning .chart-card to
   a predictable minimum when a direct <canvas> is present gives Chart.js
   a stable height to read, every time. */
.chart-card:has(> canvas) { min-height: 300px; }
/* Pin a direct <canvas> in .chart-card to a baseline height even on first
   paint — before Chart.js has sized it. Prevents the 0-height blank-chart
   case Roy hit on PHC trend after a scope switch: the chart-card had
   min-height 300px but the canvas was auto-sized against siblings, and
   if the browser hadn't committed layout yet when Chart.js read parent
   dimensions, the canvas rendered at 0 and the chart stayed invisible. */
.chart-card > canvas { display: block; width: 100%; min-height: 240px; }

/* ═══ COMMANDER — floating chat widget ═══════════════════════════════ */
.commander-fab {
  position: fixed; right: 26px; bottom: 26px; z-index: 900;
  /* Distinctive tri-tone gradient — navy authority, teal life, warm accent —
     picks Commander out from the dashboard's cool palette without looking
     out of place. */
  background: linear-gradient(135deg, #0d3b66 0%, #1b8aa3 55%, #e0a33a 130%);
  color: #fff; border: 0;
  padding: 16px 22px 16px 20px; border-radius: 18px;
  font-family: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  box-shadow:
    0 10px 32px rgba(13, 30, 46, 0.32),
    0 4px 12px rgba(224, 163, 58, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4), box-shadow 0.2s ease;
  min-width: 220px;
  overflow: visible;
  position: fixed;    /* second declaration keeps rules ordered */
}
.commander-fab::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.commander-fab:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 14px 40px rgba(13, 30, 46, 0.38),
    0 6px 16px rgba(224, 163, 58, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Thuso mark — the HealthImpact triangle PNG. The navy outline would blend
   into the navy FAB / navy→teal chat header background, so wrap it in a
   white rounded-square backdrop whenever it sits on a dark surface. */
.commander-fab .commander-helmet,
.commander-head .commander-helmet,
.thuso-fab-mark {
  display: inline-block;
  flex-shrink: 0;
  background: #fff;
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
  box-sizing: content-box;
}
.commander-head .commander-helmet { padding: 3px; border-radius: 6px; }
.commander-helmet { vertical-align: middle; margin-right: 4px; }

/* Two-line label — headline + subtitle to sell the feature. */
.commander-fab-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.commander-fab-title { font-size: 15px; font-weight: 700; letter-spacing: 0.01em; }
.commander-fab-sub   { font-size: 11px; font-weight: 500; opacity: 0.85; margin-top: 3px; letter-spacing: 0.02em; }

/* "AI" chip pinned to the top-right corner — tells people at a glance
   what this is, and reinforces the "smart" positioning. */
.commander-fab-badge {
  position: absolute; top: -8px; right: -6px;
  background: #ffffff; color: #0d3b66;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Breathing pulse rings — demoted. The ring now only animates when
   `body.thuso-quiet` is NOT set (body gets that class whenever an attention
   strip at the top of the page is unread). Avoids three things fighting
   for attention above the fold on page load. Opacity also halved so the
   effect is a hint, not a strobe. */
.commander-fab-pulse {
  position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(27, 138, 163, 0.28);
  animation: commander-pulse 3.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}
.commander-fab-pulse-2 { animation-delay: 1.7s; }
@keyframes commander-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(27, 138, 163, 0.28); }
  70%  { box-shadow: 0 0 0 14px rgba(27, 138, 163, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 138, 163, 0); }
}
/* When an attention strip above the fold is unread, kill the pulse so
   the FAB doesn't compete. The SPA toggles body.thuso-quiet whenever
   correlation strip or anomaly strip is rendering an unread chip. */
body.thuso-quiet .commander-fab-pulse,
body.thuso-quiet .commander-fab-pulse-2 { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .commander-fab-pulse { animation: none; }
  .commander-teaser { animation: none; }
}

/* First-visit teaser — pointer arrow sits below the bubble, aiming at the FAB. */
.commander-teaser {
  position: fixed; right: 26px; bottom: 108px; z-index: 899;
  width: 280px; max-width: calc(100vw - 60px);
  background: #ffffff; color: #0d1e2e;
  border-radius: 12px; padding: 14px 34px 14px 16px;
  box-shadow: 0 12px 40px rgba(13, 30, 46, 0.28);
  border: 1px solid rgba(224, 163, 58, 0.35);
  animation: commander-teaser-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
@keyframes commander-teaser-in {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0);    }
}
.commander-teaser-title { font-size: 13px; font-weight: 700; color: #0d3b66; margin-bottom: 4px; }
.commander-teaser-body  { font-size: 12px; color: #586780; line-height: 1.45; }
.commander-teaser-close {
  position: absolute; top: 6px; right: 8px;
  background: transparent; border: 0; font-size: 18px; color: #8892a4; cursor: pointer; line-height: 1; padding: 2px 6px;
}
.commander-teaser-close:hover { color: #0d1e2e; }
.commander-teaser-arrow {
  position: absolute; bottom: -8px; right: 40px;
  width: 16px; height: 16px; background: #ffffff;
  border-right: 1px solid rgba(224, 163, 58, 0.35);
  border-bottom: 1px solid rgba(224, 163, 58, 0.35);
  transform: rotate(45deg);
}
/* Spartan helmet reuses the parent's text colour via currentColor. */
.commander-helmet { display: inline-block; vertical-align: -4px; margin-right: 6px; }
.commander-head h2 { display: flex; align-items: center; gap: 6px; }
.commander-head h2 .commander-helmet { margin-right: 0; vertical-align: middle; }

.commander-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 950;
  width: 420px; max-width: calc(100vw - 44px); max-height: calc(100vh - 44px);
  background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(13,30,46,0.35);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(13, 30, 46, 0.1);
}
.commander-head {
  padding: 14px 16px; background: linear-gradient(135deg, #0d3b66, #1b8aa3);
  color: #fff; display: flex; justify-content: space-between; align-items: flex-start;
}
.commander-head h2 { margin: 4px 0 0; font-size: 18px; }
.commander-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.commander-head-actions { display: flex; align-items: center; gap: 8px; }
.commander-newchat { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); font-size: 11px; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.commander-newchat:hover { background: rgba(255,255,255,0.22); }
.commander-close { background: transparent; color: #fff; border: 0; font-size: 22px; cursor: pointer; padding: 0 6px; line-height: 1; }
.commander-scope { padding: 8px 16px; background: #eef1f6; font-size: 12px; color: #586780; border-bottom: 1px solid #e2e6ee; }
.commander-messages { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.commander-intro { font-size: 12px; color: #586780; padding: 10px; background: #f6f8fb; border-radius: 8px; border-left: 3px solid #1b8aa3; }
.commander-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.commander-chip { font-size: 11px; padding: 6px 10px; border: 1px solid #d0d6df; background: #fff; border-radius: 999px; cursor: pointer; color: #0d3b66; }
.commander-chip:hover { background: #eef1f6; }
.commander-msg { display: flex; flex-direction: column; gap: 4px; }
.commander-msg-user   { align-self: flex-end;   max-width: 88%; background: #0d3b66; color: #fff; padding: 8px 12px; border-radius: 12px 12px 2px 12px; font-size: 13px; }
.commander-msg-bot    { align-self: flex-start; max-width: 92%; background: #f6f8fb; color: #0d1e2e; padding: 8px 12px; border-radius: 12px 12px 12px 2px; font-size: 13px; line-height: 1.5; }
.commander-msg-bot strong { color: #0d3b66; }
/* Paragraphs produced by renderInline(): neighbouring sentences flow as a
   single block, with a comfortable gap between paragraphs rather than a
   full 1em default margin (which cracks the chat bubble open). */
.commander-msg-bot .cmd-p { margin: 0 0 8px 0; }
.commander-msg-bot .cmd-p:last-child { margin-bottom: 0; }
.commander-msg-bot ul { margin: 0 0 8px 18px; padding: 0; }
.commander-msg-bot ul:last-child { margin-bottom: 0; }
.commander-msg-bot li { margin: 2px 0; }
/* Risk-tinted numbers inside Commander replies. Slightly bolder weight so
   they read as emphasis without needing markdown bold on top. */
.commander-msg-bot .cmd-hi   { color: #c9302c; font-weight: 600; }   /* high risk / alert */
.commander-msg-bot .cmd-med  { color: #d47a1c; font-weight: 600; }   /* medium risk / warning */
.commander-msg-bot .cmd-blue { color: #1b8aa3; font-weight: 600; }   /* neutral / positive */
.commander-msg-bot .commander-table { border-collapse: collapse; margin: 6px 0 4px; width: 100%; font-size: 12.5px; }
.commander-msg-bot .commander-table th,
.commander-msg-bot .commander-table td { padding: 5px 10px 5px 0; text-align: left; vertical-align: top; border-bottom: 1px solid #e6ebf2; }
.commander-msg-bot .commander-table th { color: #586780; font-weight: 600; font-size: 11px; letter-spacing: 0.3px; text-transform: uppercase; border-bottom-color: #cfd6e0; }
.commander-msg-bot .commander-table td + td,
.commander-msg-bot .commander-table th + th { text-align: right; padding-right: 0; }
.commander-msg-bot .commander-table tr:last-child td { border-bottom: none; }

/* Long-reply collapse. The first block (TL;DR line) stays visible;
   everything else lives in .cmd-rest and reveals when the reader clicks
   the inline toggle. Keeps the chat panel scrollable at a glance when
   Thuso lands a 6-paragraph answer. */
.commander-msg-bot .cmd-rest   { margin-top: 2px; }
.commander-msg-bot .cmd-toggle {
  margin: 6px 0 0 0;
  padding: 2px 0;
  background: transparent;
  border: 0;
  color: #1b8aa3;
  font: inherit;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.commander-msg-bot .cmd-toggle::after {
  content: '↓';
  font-size: 11px;
  transition: transform 0.15s ease;
}
.commander-msg-bot .cmd-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.commander-msg-bot .cmd-toggle:hover { text-decoration: underline; }

/* ---- Ask HIVE chip (per-card deeper-layer affordance) ---------------- */
/* A tiny pill in the top-right of every card/row. Hidden-ish at rest so
   it doesn't clutter the dashboard; brightens on hover of its parent card
   and on its own hover, inviting the click. Every card title / hero label
   reserves padding-right so the chip never overlaps the text underneath it. */
.card-title       { padding-right: 110px; }
.hero-label       { padding-right: 90px;  }
.card-subtitle    { padding-right: 110px; }
.ask-hive-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  color: #0d3b66;
  border: 1px solid #d7dde6;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  opacity: 0.42;
  transform: translateY(-1px);
  transition: opacity 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(13,30,46,0.04);
}
.ask-hive-chip .ask-hive-chip-arrow { font-size: 11px; color: #1b8aa3; opacity: 0.9; }
.hero-card:hover .ask-hive-chip,
.card:hover      .ask-hive-chip,
.pipeline-row:hover .ask-hive-chip,
.ask-hive-chip:hover { opacity: 1; border-color: #1b8aa3; box-shadow: 0 2px 10px rgba(27,138,163,0.18); transform: translateY(-2px); }
.ask-hive-chip:focus-visible { outline: 2px solid #1b8aa3; outline-offset: 2px; opacity: 1; }
/* Hero cards already carry a glyph bottom-right; keep the chip anchored
   top-right where there's whitespace. For ribboned cards (OCH / PHC) nudge
   the chip left so it doesn't overlap the ribbon pill. */
.hero-card--ribbon .ask-hive-chip { right: 58px; }
/* Chart / pipeline cards reserve the top-right for actions already; the
   chip sits there alone. */
.chart-card .ask-hive-chip,
.table-card .ask-hive-chip,
.pipeline-card .ask-hive-chip { top: 14px; right: 16px; }
/* Inline variant on pipeline rows: sits inside the row flex, pushes the
   value chip left so the row still balances. */
.pipeline-row { position: relative; }
.ask-hive-chip-inline {
  position: static;
  margin-left: 12px;
  padding: 3px 8px 3px 6px;
  font-size: 10px;
}

.commander-briefing { display: flex; flex-direction: column; gap: 8px; margin: 0 0 4px; }
.commander-briefing-head { font-size: 13px; color: #0d1e2e; line-height: 1.5; }
.commander-briefing-head strong { color: #0d3b66; font-weight: 600; }
.commander-briefing-meta { font-size: 11px; color: #8892a4; margin-top: 2px; }
.commander-briefing-cards { display: flex; flex-direction: column; gap: 8px; }
.commander-finding { display: flex; gap: 8px; align-items: flex-start; border: 1px solid #e2e6ee; border-left: 3px solid #8892a4; border-radius: 8px; padding: 9px 11px; background: #fff; }
.commander-finding-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; }
.commander-finding-body { flex: 1; min-width: 0; }
.commander-finding-headline { font-weight: 600; font-size: 12.5px; color: #0d1e2e; line-height: 1.35; }
.commander-finding-context { font-size: 11.5px; color: #586780; line-height: 1.4; margin-top: 2px; }
.commander-finding-context .cmd-hi   { color: #c9302c; font-weight: 600; }
.commander-finding-context .cmd-med  { color: #d47a1c; font-weight: 600; }
.commander-finding-context .cmd-blue { color: #1b8aa3; font-weight: 600; }
.commander-finding-btn { margin-top: 5px; background: transparent; border: 1px solid #d0d6df; color: #1b8aa3; font-size: 11px; padding: 3px 10px; border-radius: 999px; font-family: inherit; cursor: pointer; }
.commander-finding-btn:hover { background: #f6f8fb; border-color: #1b8aa3; }
.commander-fab-newcount { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px; background: #c9302c; color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.commander-history-toggle { align-self: stretch; margin: 2px 0 4px; padding: 8px 12px; background: transparent; border: 1px dashed #cfd6e0; border-radius: 8px; color: #586780; font-size: 12px; font-family: inherit; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 6px; }
.commander-history-toggle:hover { background: #f6f8fb; color: #0d3b66; border-color: #a9b4c3; }
.commander-history-toggle::before { content: "▸"; font-size: 10px; opacity: 0.6; }
.commander-tool-badge { align-self: flex-start; font-size: 10px; color: #586780; background: #eef1f6; padding: 2px 8px; border-radius: 999px; }
.commander-thinking   { align-self: flex-start; font-size: 12px; color: #586780; font-style: italic; }
.commander-error      { align-self: flex-start; font-size: 12px; color: #a63c2c; padding: 8px 12px; background: #fdecea; border-radius: 8px; }
.commander-form { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid #e2e6ee; background: #fff; }
.commander-form input { flex: 1; padding: 10px 12px; border: 1px solid #d0d6df; border-radius: 8px; font-size: 13px; font-family: inherit; }
.commander-form input:focus { outline: 2px solid #1b8aa3; outline-offset: -1px; }
.commander-form button { padding: 10px 16px; background: #0d3b66; color: #fff; border: 0; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.commander-form button:disabled { opacity: 0.5; cursor: not-allowed; }
.commander-foot { font-size: 10px; color: #8892a4; text-align: center; padding: 6px 12px 10px; }

/* Kiosk mode hides Commander — no interactive input on wall displays. */
body.kiosk .commander-fab, body.kiosk .commander-panel { display: none !important; }

/* Cardiometabolic / wellness sub-cards (multi-metric donut grid). */
.cm-card {
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 14px 14px 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,30,46,0.03);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.cm-card:hover {
  border-color: color-mix(in srgb, var(--c-primary) 22%, var(--c-line));
  box-shadow: 0 6px 16px rgba(15, 30, 46, 0.06);
  transform: translateY(-1px);
}
.cm-card .cm-title { font-size: 13px; font-weight: 700; color: #0d1e2e; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; letter-spacing: 0.01em; }
.cm-card .cm-pill  { font-size: 11px; font-weight: 600; color: #586780; background: var(--c-line-soft); border-radius: 999px; padding: 3px 10px; font-variant-numeric: tabular-nums; }
.cm-card .chart-legend { margin-top: 6px; }
.cm-card .chart-legend .legend-row { grid-template-columns: 12px auto max-content; font-size: 11px; padding: 1px 0; }
.cm-card .chart-legend .legend-swatch { width: 10px; height: 10px; border-radius: 3px; }
.chart-card canvas { max-height: 260px; }
.donut-wrap {
  position: relative;
  width: 100%;
  min-width: 160px;
  height: 200px;
  margin-bottom: 12px;
}
.donut-wrap canvas { display: block; max-width: 100%; max-height: 200px; }

.chart-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.legend-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 8px;
}
/* Compact 2-column variant for legends that don't carry a count/value
   (trend-line legends, pyramid gender key, etc.). Replaces the ten+ copies
   of inline `style="grid-template-columns: 14px auto;"` that used to live
   in app.js. */
.legend-row--compact {
  grid-template-columns: 14px auto;
}
.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.legend-label { color: var(--c-text); }
.legend-value {
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.muted { color: var(--c-text-mute); font-weight: 400; }

/* ---- Quality strip (service-quality KPI card) ----------------------- */
.quality-card { margin-bottom: 24px; }
.card-subtitle {
  font-size: 13px;
  color: var(--c-text-mute);
  margin: -8px 0 16px 0;
  line-height: 1.5;
  max-width: 800px;
  /* Align with the title text, which is indented past the 7px accent dot
     + 10px flex gap on .card-title. Without this the subtitle starts at
     the card's left edge, visibly out of alignment with the heading. */
  padding-left: 17px;
}
/* Days 1-3 of a month: chart shows last month's data with this badge above. */
.card-fallback-note {
  font-size: 12px;
  color: var(--c-text-mute);
  background: #fff7e6;
  border: 1px solid #f7d998;
  border-radius: 6px;
  padding: 4px 10px;
  margin: 0 0 12px 0;
  display: inline-block;
}
.quality-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .quality-stats { grid-template-columns: repeat(2, 1fr); }
}
.quality-stat {
  padding: 16px;
  background: var(--c-bg);
  border-radius: 10px;
  border: 1px solid var(--c-line-soft);
}
.quality-stat-label {
  font-size: 11px;
  color: var(--c-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 8px;
}
.quality-stat-value {
  /* Match .hero-value typography so the OCH page reads as one system — the
     two stat classes used to disagree on weight (700 vs 800), colour
     (--c-primary vs #0d1e2e) and letter-spacing (-0.5px vs -0.02em). */
  font-size: 32px;
  font-weight: 800;
  color: #0d1e2e;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.quality-stat-sub {
  font-size: 12px;
  color: var(--c-text-mute);
}

/* Risk-prevention hazard breakdown — small inline rows under the quality stats */
.hazard-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line-soft);
}
.hazard-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
}
.hazard-row .hazard-label { color: var(--c-text-mute); }
.hazard-row .hazard-count {
  color: var(--c-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hazard-empty {
  color: var(--c-text-mute);
  font-size: 12px;
  font-style: italic;
}

/* ---- Pipeline rows --------------------------------------------------- */
.pipeline-card { padding: 12px 0; }
.pipeline-card .card-title { padding: 0 24px; }
.pipeline-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 24px;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: 14px;
  transition: background 0.18s ease;
}
.pipeline-row:last-of-type { border-bottom: none; }
.pipeline-row:hover { background: color-mix(in srgb, var(--card-accent, #1b8aa3) 4%, transparent); }
.pipeline-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
  font-weight: 500;
}
.pipeline-label::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-accent, #1b8aa3) 40%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-accent, #1b8aa3) 12%, transparent);
}
.pipeline-value {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 26px;
  color: var(--card-accent, var(--c-primary));
  letter-spacing: -0.02em;
}
.pipeline-row.ok    .pipeline-value { color: #1f7a4d; }
.pipeline-row.ok    .pipeline-label::before { background: #2ea86b; box-shadow: 0 0 0 3px rgba(46,168,107,0.18); }
.pipeline-row.warn  .pipeline-value { color: #a85516; }
.pipeline-row.warn  .pipeline-label::before { background: #e8832e; box-shadow: 0 0 0 3px rgba(232,131,46,0.18); }
.pipeline-row.alert .pipeline-value { color: #8a1f1c; }
.pipeline-row.alert .pipeline-label::before { background: #c9302c; box-shadow: 0 0 0 3px rgba(201,48,44,0.22); }

/* ---- Data table ----------------------------------------------------- */
.table-card { padding: 0; overflow: hidden; }
.table-card .card-title { padding: 20px 24px 0 24px; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 12px;
}
.data-table th, .data-table td {
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--c-line-soft);
  vertical-align: middle;
}
/* Text columns (anything not a numeric column) get consistent width so
   the Site column stops swinging between single-client scope (Site at
   first-child) and admin aggregate (Client at first-child, Site shifts).
   Both get the same min / max window; sibling tables on the same page
   also share this behaviour. */
.data-table th:not(.num), .data-table td:not(.num) {
  min-width: 160px;
  max-width: 280px;
}
/* Numeric columns get a sane minimum so headers like "AUDIOGRAMS" don't
   sit tight against the next column. Keeps the right-edge alignment clean. */
.data-table th.num, .data-table td.num {
  min-width: 100px;
  padding-right: 20px;
}
.data-table th {
  background: var(--c-bg);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text-mute);
  font-weight: 600;
}
.data-table td.num, .data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table tr:last-child td { border-bottom: none; }
/* Fit % column traffic-lighting — see renderOchSites */
.data-table td.fit-pct-alert { color: var(--c-alert); font-weight: 700; }
.data-table td.fit-pct-ok    { color: var(--c-ok);    font-weight: 700; }
.data-table tbody tr.clickable { cursor: pointer; }
.data-table tbody tr.clickable:hover { background: var(--c-line-soft); }

/* ---- Data notes ----------------------------------------------------- */
.data-notes {
  padding: 12px 20px;
  background: #fff8e1;
  border-left: 4px solid var(--c-warn);
  border-radius: 4px;
  font-size: 13px;
  color: #5d4a1a;
  margin-bottom: 24px;
}
.data-notes .note { margin: 4px 0; }

/* ---- Site detail ---------------------------------------------------- */
.detail-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--c-text);
}

/* ---- Kiosk mode ----------------------------------------------------- */
body.kiosk #sidebar { display: none; }
body.kiosk #shell   { grid-template-columns: 1fr; }
body.kiosk #content { padding: 24px 32px; max-width: none; }
body.kiosk .page-head { padding-bottom: 8px; margin-bottom: 16px; }
body.kiosk .page-title { font-size: 24px; }
body.kiosk .hero-value { font-size: 64px; line-height: 1; }
body.kiosk .hero-card  { padding: 32px; }
body.kiosk .hero-label { font-size: 13px; }
body.kiosk .card-title { font-size: 14px; }
body.kiosk .pipeline-value { font-size: 32px; }
body.kiosk .chart-card canvas { max-height: 320px; }
body.kiosk .page-actions { display: none; }

/* Kiosk exit hint */
body.kiosk::after {
  content: "Esc to exit kiosk";
  position: fixed;
  bottom: 12px;
  right: 14px;
  font-size: 11px;
  color: var(--c-text-mute);
  background: rgba(255,255,255,0.6);
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ---- Admin page (kept compatible) ----------------------------------- */
.admin-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 24px;
}
.admin-tab {
  background: transparent;
  border: none;
  color: var(--c-text-mute);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.admin-tab:hover { color: var(--c-text); }
.admin-tab.active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}
.section-subtitle {
  color: var(--c-text-mute);
  font-size: 13px;
  margin: -8px 0 18px 0;
  max-width: 800px;
  line-height: 1.5;
}
.admin-tab-panel[hidden] { display: none; }
#terms-print-header { display: none; }

/* PDF print styles — invoked via window.print() */
@media print {
  body { background: white; }
  /* Hide everything except the print panel */
  .top-bar, .admin-tabs, .admin-toolbar.no-print, .no-print,
  #signin-section, #forbidden-section,
  .admin-tab-panel[data-tab-panel="users"] { display: none !important; }
  #terms-print-header {
    display: block !important;
    padding: 16px 20px;
    background: white;
    border-bottom: 2px solid var(--c-primary);
  }
  #terms-print-header strong { font-size: 16px; display: block; margin-bottom: 4px; }
  #terms-print-header span { font-size: 11px; color: #555; }
  .section-title, .section-subtitle { display: none; }
  .card.table-card { box-shadow: none; border: 1px solid #ccc; }
  .users-table { font-size: 11px; }
  .users-table th, .users-table td { padding: 6px 10px; }
  th.no-print, td.no-print { display: none; }
  /* Force page breaks roughly every 30 rows */
  tr { page-break-inside: avoid; }
  @page { size: A4 landscape; margin: 12mm; }
}

.admin-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
.admin-toolbar select, .admin-toolbar input {
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: var(--c-surface);
  min-width: 220px;
}
.admin-toolbar .grow { flex: 1; }

/* Per-client group header in the admin users table. Sticky at the top of its
   group so the client name stays visible while scrolling the rows beneath. */
.users-group-header td {
  background: #f5f7fa;
  font-size: 13px;
  padding: 10px 16px;
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 2;
}
.users-group-header:hover td { background: #ebeff4; }
.users-group-name  { font-weight: 600; color: var(--c-text); }
.users-group-count { color: var(--c-text-mute); margin-left: 8px; font-weight: 400; font-size: 12px; }
button.secondary {
  background: transparent;
  color: var(--c-text-mute);
  border: 1px solid var(--c-line);
}
button.secondary:hover { background: var(--c-line-soft); color: var(--c-text); }
/* Danger button — used only on the Purge action which permanently deletes
   a ClientUser and their Entra guest. Distinct red border/text so admins
   can't confuse it with the softer "Deactivate" alongside it. */
button.danger {
  background: transparent;
  color: var(--c-alert);
  border: 1px solid var(--c-alert);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
button.danger:hover { background: var(--c-alert); color: white; }
.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.users-table th, .users-table td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--c-line-soft);
}
.users-table th {
  background: var(--c-bg);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text-mute);
  font-weight: 600;
}
.users-table tbody tr:hover { background: var(--c-line-soft); cursor: pointer; }
.users-table td.muted-cell { color: var(--c-text-mute); font-size: 12px; }
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge.active   { background: #d4f1e8; color: #226a5b; }
.badge.inactive { background: var(--c-line-soft); color: var(--c-text-mute); }
.badge.manager  { background: #fff2d4; color: #6b5117; }
.badge.viewall  { background: #e4d9f7; color: #4a2f7f; }
.badge.demo     { background: #ffd9b8; color: #7d3f00; }
.badge.switch   { background: #d6e8d6; color: #2e5b34; }

/* =============================================================================
   Training-video modal
   - Full-viewport overlay so the video is the focal point.
   - Player is wrapped so we can paint a watermark on top of it (the
     viewer's email, rotated, semi-transparent) — any screen recording then
     carries identifying provenance.
   ============================================================================= */
.training-overlay {
  position: fixed; inset: 0;
  background: rgba(13, 30, 46, 0.78);
  display: flex; align-items: center; justify-content: center;
  z-index: 5000;
  padding: 24px;
}
.training-card {
  background: var(--c-surface, #ffffff);
  width: min(960px, 100%);
  max-height: 90vh;
  display: flex; flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.training-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-line-soft);
}
.training-header h2 { margin: 0; font-size: 17px; color: var(--c-text, #0e3144); }
.training-body {
  padding: 16px 18px;
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: 12px;
}
.training-error { color: #b32d2d; font-size: 14px; padding: 8px 0; }
.training-player-wrap {
  position: relative;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
}
.training-player-wrap video {
  width: 100%; height: 100%; display: block;
  background: #000;
}
/* Watermark — rotated, semi-transparent, repeating diagonally so it can't
   easily be cropped out of a screen capture. JS sets the textContent to
   the viewer's email. */
.training-watermark {
  position: absolute; inset: 0;
  pointer-events: none;
  color: rgba(255,255,255,0.18);
  font-family: monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-22deg);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  white-space: nowrap;
  user-select: none;
}
.training-footer {
  font-size: 12px;
  color: var(--c-text-mute, #6b7280);
  padding: 12px 18px;
  background: #f5f7fa;
  border-top: 1px solid var(--c-line-soft);
}
#training-btn svg { vertical-align: middle; }

/* =============================================================================
   South Africa province map (Overview page).
   Leaflet container with CartoDB Positron tiles. Per-province markers sized
   by site count and coloured by service mix (OCH = blue, PHC = red,
   both = teal). Province stays SA-local even in demo mode.
   ============================================================================= */
.sa-map-card .card-subtitle {
  color: var(--c-text-mute);
  font-size: 13px;
  margin: 0 0 12px;
}
.sa-map-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sa-map-leaflet {
  width: 100%;
  height: 520px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--c-line-soft);
  background: #f4f6f9;   /* shows until tiles load */
  box-shadow: inset 0 0 0 1px rgba(13, 59, 102, 0.04);
}
/* Desaturate the base-map tiles for a muted dashboard look. CSS filter
   acts on the whole tile pane but leaves markers/tooltips (overlay pane)
   alone, so the dot colours still pop. Keeps us on OSM-standard tiles
   (free, no API key) without the bright green parks and yellow motorways. */
.sa-map-leaflet .leaflet-tile-pane {
  filter: grayscale(0.9) saturate(0.25) brightness(1.04) contrast(0.95);
}
/* Zoom controls — tighter, borderless, tinted to the brand. */
.sa-map-leaflet .leaflet-control-zoom {
  box-shadow: 0 2px 8px rgba(13, 59, 102, 0.12);
  border: 0;
}
.sa-map-leaflet .leaflet-control-zoom a {
  background: #ffffff;
  color: #0d3b66;
  border: 1px solid rgba(13, 59, 102, 0.1);
  width: 28px;
  height: 28px;
  line-height: 26px;
  font-size: 16px;
}
.sa-map-leaflet .leaflet-control-zoom a:hover {
  background: #0d3b66;
  color: #ffffff;
  border-color: #0d3b66;
}
.sa-map-leaflet .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  color: #64748b;
  padding: 1px 6px;
}
.sa-map-leaflet .leaflet-control-attribution a { color: #0d3b66; }
.sa-map-tooltip {
  background: rgba(14, 49, 68, 0.95) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 11px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 14px rgba(14, 49, 68, 0.25) !important;
}
.sa-map-tooltip::before { border-top-color: rgba(14, 49, 68, 0.95) !important; }
/* Soft outer ring on each site marker — gives the dots a little depth
   against the muted base map without needing a drop-shadow filter
   (which would blur the circle edges). */
.sa-map-leaflet .leaflet-overlay-pane svg path.leaflet-interactive {
  transition: fill-opacity 0.15s ease;
}
.sa-map-leaflet .leaflet-overlay-pane svg path.leaflet-interactive:hover {
  fill-opacity: 1 !important;
}
.sa-map-legend {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--c-text-mute);
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.sa-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.sa-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sa-dot-och  { background: #1f6fb6; }
.sa-dot-phc  { background: #c4344c; }
.sa-dot-both { background: #1b8aa3; }
.badge.invite-redeemed { background: #d4ecf7; color: #1f4e6b; }
.badge.invite-pending  { background: #fef2c5; color: #7a5b00; }
.badge.invite-none     { background: var(--c-line-soft); color: var(--c-text-mute); }

/* =============================================================================
   App-wide background ECG heartbeat.
   Sits fixed behind every dashboard page (and admin), drifts horizontally,
   and gently pulses opacity at ~72 bpm so the feel matches a resting heart
   rate without being distracting. Tinted with the client brand colour
   (var --c-brand, set per-tenant by applyClientTheme()).
   ============================================================================= */
.app-bg-ecg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.app-bg-ecg svg {
  position: absolute;
  inset: auto 0 32% 0;
  width: 200%;
  height: 260px;
  animation: app-bg-ecg-drift 22s linear infinite,
             app-bg-ecg-pulse 0.83s ease-in-out infinite;   /* ~72 bpm */
  will-change: transform, opacity;
}
.app-bg-ecg svg path {
  stroke: var(--c-brand, #1b8aa3);
  stroke-width: 2;
  fill: none;
  opacity: 0.10;
}
@keyframes app-bg-ecg-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes app-bg-ecg-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 8px var(--c-brand, #1b8aa3)); }
}
/* Make sure real content stacks above the background. */
#shell, #app { position: relative; z-index: 1; }

/* Per-tab colour override for the background ECG. Overview keeps the client
   brand colour; the four service-line tabs use a fixed hue so the section
   identity is visually unambiguous. The drop-shadow pulse picks up the same
   colour via currentColor so the glow matches the stroke. */
body[data-active-page="och"]         .app-bg-ecg svg path { stroke: #1f6fb6; }   /* OCH — Blue */
body[data-active-page="phc"]         .app-bg-ecg svg path { stroke: #c4344c; }   /* PHC — Red */
body[data-active-page="workforce"]   .app-bg-ecg svg path { stroke: #e07c2b; }   /* Uptake — Orange */
body[data-active-page="sites"]       .app-bg-ecg svg path { stroke: #2e9d6b; }   /* Sites — Green */
body[data-active-page="site-detail"] .app-bg-ecg svg path { stroke: #2e9d6b; }   /* Site detail — Green */
body[data-active-page="och"]         .app-bg-ecg svg { animation: app-bg-ecg-drift 22s linear infinite, app-bg-ecg-pulse-och 0.83s ease-in-out infinite; }
body[data-active-page="phc"]         .app-bg-ecg svg { animation: app-bg-ecg-drift 22s linear infinite, app-bg-ecg-pulse-phc 0.83s ease-in-out infinite; }
body[data-active-page="workforce"]   .app-bg-ecg svg { animation: app-bg-ecg-drift 22s linear infinite, app-bg-ecg-pulse-workforce 0.83s ease-in-out infinite; }
body[data-active-page="sites"]       .app-bg-ecg svg,
body[data-active-page="site-detail"] .app-bg-ecg svg { animation: app-bg-ecg-drift 22s linear infinite, app-bg-ecg-pulse-sites 0.83s ease-in-out infinite; }
@keyframes app-bg-ecg-pulse-och       { 0%,100% { filter: drop-shadow(0 0 0 transparent);} 50% { filter: drop-shadow(0 0 8px #1f6fb6);} }
@keyframes app-bg-ecg-pulse-phc       { 0%,100% { filter: drop-shadow(0 0 0 transparent);} 50% { filter: drop-shadow(0 0 8px #c4344c);} }
@keyframes app-bg-ecg-pulse-workforce { 0%,100% { filter: drop-shadow(0 0 0 transparent);} 50% { filter: drop-shadow(0 0 8px #e07c2b);} }
@keyframes app-bg-ecg-pulse-sites     { 0%,100% { filter: drop-shadow(0 0 0 transparent);} 50% { filter: drop-shadow(0 0 8px #2e9d6b);} }

/* Respect user motion preferences — disable both animations for users who
   set "reduce motion" at the OS level. */
@media (prefers-reduced-motion: reduce) {
  .app-bg-ecg svg { animation: none; }
}

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,30,46,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal {
  background: var(--c-surface);
  border-radius: 12px;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--c-line);
  display: flex; justify-content: space-between; align-items: center;
}
.modal-header h2 { margin: 0; font-size: 16px; color: var(--c-primary); }
.modal-body { padding: 20px 24px; }
.modal-footer {
  padding: 12px 24px;
  border-top: 1px solid var(--c-line);
  display: flex; justify-content: flex-end; gap: 8px;
}
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-mute);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.field input[type="text"], .field input[type="email"], .field input[type="date"], .field select {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: var(--c-surface);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.checkbox-row {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0; font-size: 14px;
}
.sites-list {
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--c-line); border-radius: 6px;
  padding: 8px; background: var(--c-bg);
}
.sites-list label {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; font-size: 13px; cursor: pointer;
}
.sites-list label:hover { background: var(--c-line-soft); border-radius: 4px; }
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  padding: 12px 20px;
  background: var(--c-text);
  color: white; border-radius: 6px; font-size: 14px;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.toast.error { background: var(--c-alert); }
.toast.ok    { background: var(--c-ok); }
.header-link {
  color: var(--c-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
}
.header-link:hover { background: var(--c-line-soft); }

/* ============================================================
   THUSO public landing — dark theme, teal accents, SA map,
   process flow, Ask THUSO panel, demo form modal.
   ============================================================ */
.thuso-landing {
  position: absolute; inset: 0; overflow: auto;
  background: #0a1420;
  color: #e5efe9;
  font-family: inherit;
}
.thuso-landing .accent { color: #49d6b7; }

/* -- Nav bar -------------------------------------------------- */
.thuso-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 32px;
  background: rgba(10,20,32,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.thuso-nav-left { display: flex; align-items: center; gap: 42px; }
.thuso-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.thuso-logo-mark {
  /* Triangle mark has a navy outline, which would blend into the dark
     landing nav bg. White rounded backdrop keeps it legible. */
  background: #fff;
  padding: 4px;
  border-radius: 7px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  box-sizing: content-box;
  flex-shrink: 0;
}
.thuso-logo-name { font-weight: 700; letter-spacing: 1px; color: #fff; font-size: 15px; }
.thuso-logo-sub  { font-size: 10px; color: #7a8a90; letter-spacing: 0.5px; }
.thuso-nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.thuso-nav-links a { color: #c7d4cc; text-decoration: none; font-size: 14px; }
.thuso-nav-links a:hover { color: #49d6b7; }
.thuso-nav-right { display: flex; gap: 10px; }
.thuso-btn-outline {
  background: transparent; color: #e5efe9; border: 1px solid rgba(255,255,255,0.15);
  padding: 10px 18px; border-radius: 10px; font-size: 14px; cursor: pointer; font-family: inherit;
}
.thuso-btn-outline:hover { border-color: #49d6b7; color: #49d6b7; }
.thuso-btn-primary {
  background: linear-gradient(135deg, #49d6b7 0%, #2a9d8f 100%);
  color: #0a1420; border: 0;
  padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 24px rgba(73,214,183,0.25);
}
.thuso-btn-primary:hover { transform: translateY(-1px); }
.thuso-btn-ghost {
  background: transparent; color: #e5efe9; border: 1px solid rgba(255,255,255,0.15);
  padding: 12px 20px; border-radius: 10px; font-size: 14px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.thuso-btn-ghost .play { color: #49d6b7; }

/* -- Hero ----------------------------------------------------- */
.thuso-hero {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px;
  padding: 56px 56px 72px;
  align-items: center;
  background: radial-gradient(1200px 500px at 70% 0%, rgba(42,157,143,0.12), transparent 60%);
}
.thuso-hero h1 { font-size: 52px; font-weight: 800; margin: 0 0 24px; letter-spacing: 2px; color: #fff; }
.thuso-hero h2 { font-size: 42px; font-weight: 700; margin: 0 0 20px; line-height: 1.15; color: #fff; }
.thuso-hero p  { font-size: 15px; color: #a9b7af; max-width: 480px; line-height: 1.6; margin: 0 0 28px; }
.thuso-hero-ctas { display: flex; gap: 12px; margin-bottom: 36px; }
.thuso-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  color: #cfd9d4;
  font-size: 13px;
}
.thuso-hero-pills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  background: rgba(73, 214, 183, 0.08);
  border: 1px solid rgba(73, 214, 183, 0.2);
  border-radius: 999px;
  color: #e5efe9;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.thuso-hero-pills li:hover { background: rgba(73,214,183,0.14); border-color: rgba(73,214,183,0.4); }
.thuso-hero-pills .pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1b8aa3 0%, #49d6b7 100%);
  color: #fff;
  flex-shrink: 0;
}
.thuso-hero-pills .pill-icon svg { display: block; }

/* -- Fake laptop mockup -------------------------------------------
   Mirrors the real logged-in dashboard: navy sidebar (var(--c-nav-bg)
   #0a2f55), light main area (#f4f6fa), white panels with subtle shadow.
   Same 5-stat hero, same navigation groups, same panel order (map →
   trend → risk donut + top sites). "Medicals Due" was retired from
   the real app so it's not shown here. */
.thuso-laptop { position: relative; }
.thuso-laptop-screen {
  background: #f4f6fa;
  border: 1px solid rgba(13,30,46,0.1);
  border-radius: 14px 14px 2px 2px;
  padding: 12px;
  display: grid; grid-template-columns: 150px 1fr; gap: 12px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.45);
  color: #0d1e2e;
}
.thuso-laptop-base {
  height: 10px;
  background: linear-gradient(180deg, #1a2a3e, #0a1420);
  border-radius: 0 0 20px 20px;
  margin: 0 -20px;
}
/* Sidebar — navy block mirroring the real #sidebar */
.laptop-sidebar { background: #0a2f55; border-radius: 10px; padding: 14px 10px; color: #fff; }
.laptop-brand { padding: 0 6px 10px 6px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 10px; }
.laptop-brand-mark { font-size: 12px; font-weight: 700; letter-spacing: -0.2px; color: #fff; }
.laptop-brand-sub  { font-size: 9px; color: rgba(255,255,255,0.65); margin-top: 2px; }
.laptop-nav + .laptop-nav { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); }
.laptop-nav-label { font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); padding: 0 8px; margin-bottom: 4px; }
.laptop-nav-item { font-size: 10px; color: rgba(255,255,255,0.78); padding: 5px 8px; border-radius: 5px; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.laptop-nav-item span:first-child { opacity: 0.65; width: 10px; display: inline-block; text-align: center; }
.laptop-nav-item.active { background: rgba(73,214,183,0.14); color: #49d6b7; }
.laptop-nav-item.active span:first-child { opacity: 1; color: #49d6b7; }
/* Main — light content area */
.laptop-main { display: grid; grid-template-rows: auto auto auto auto; gap: 10px; }
/* 5-stat hero mirroring .exec-stats */
.laptop-stats { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.laptop-stat { background: #fff; border-radius: 7px; padding: 8px 9px; border: 1px solid rgba(13,30,46,0.06); border-left: 3px solid #378add; box-shadow: 0 1px 2px rgba(13,30,46,0.04); min-width: 0; }
.laptop-stat[data-tone="blue"]  { border-left-color: #378add; }
.laptop-stat[data-tone="teal"]  { border-left-color: #1b8aa3; }
.laptop-stat[data-tone="green"] { border-left-color: #2ea86b; }
.laptop-stat[data-tone="amber"] { border-left-color: #ef9f27; }
.laptop-stat[data-tone="red"]   { border-left-color: #c9302c; }
.laptop-stat-head { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.laptop-stat-icon { font-size: 10px; opacity: 0.65; }
.laptop-stat-lbl  { font-size: 8.5px; color: #586780; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.laptop-stat-val  { font-size: 15px; font-weight: 800; color: #0d1e2e; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.laptop-stat-delta{ font-size: 8.5px; color: #8892a4; margin-top: 1px; }
/* Panels — white cards with subtle shadow matching .card / .exec-panel */
.laptop-panel { background: #fff; border-radius: 8px; padding: 10px 12px; border: 1px solid rgba(13,30,46,0.05); box-shadow: 0 1px 2px rgba(13,30,46,0.04); }
.laptop-panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.laptop-panel-head h3 { font-size: 10.5px; font-weight: 700; color: #0d1e2e; margin: 0; letter-spacing: -0.01em; }
.laptop-panel-sub { font-size: 8.5px; color: #8892a4; }
.laptop-sa-map, .laptop-trend-lines { width: 100%; display: block; }
.laptop-sa-map { height: 170px; }
.laptop-trend-lines { height: 54px; }
/* Bottom row — risk donut + top sites, mirrors the real .exec-row */
.laptop-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.laptop-risk { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; }
.laptop-donut { width: 70px; height: 70px; }
.laptop-risk-legend { display: flex; flex-direction: column; gap: 2px; font-size: 8.5px; color: #0d1e2e; }
.laptop-risk-legend div { display: flex; align-items: center; gap: 5px; }
.laptop-risk-legend span { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.laptop-risk-legend strong { margin-left: auto; color: #0d3b66; font-variant-numeric: tabular-nums; }
.laptop-topsites { display: flex; flex-direction: column; gap: 4px; }
.laptop-topsite { display: grid; grid-template-columns: 10px 1fr 42px 20px; gap: 6px; align-items: center; font-size: 9px; color: #0d1e2e; }
.laptop-topsite .r { color: #8892a4; font-weight: 600; text-align: right; }
.laptop-topsite .n { color: #0d1e2e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.laptop-topsite .b { height: 5px; background: #eef1f6; border-radius: 3px; overflow: hidden; }
.laptop-topsite .b span { display: block; height: 100%; background: linear-gradient(90deg, #e24b4a, #f0997b); border-radius: 3px; }
.laptop-topsite .p { color: #c9302c; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
/* Light-theme map adjustments — the SVG defines dark-bg colours in-line
   but the light-bg laptop needs lower-contrast strokes + more opaque fill. */
.laptop-sa-map .sa-prov { fill: #e8edf4; stroke: #c3cad6; }
.laptop-sa-map .sa-lesotho { fill: #d7dce5; stroke: #a9b3c2; }
.laptop-sa-map .site-dot { filter: none; }

/* -- Content sections ----------------------------------------- */
.thuso-section { padding: 72px 56px; }
.thuso-section-light { background: #f6f8f7; color: #0a1420; }
.thuso-section-light h2 { color: #0a1420; }
.thuso-section-light .accent { color: #2a9d8f; }
.thuso-section-light p, .thuso-section-light .thuso-section-lead { color: #4a5a51; }
.thuso-section-dark { background: #0a1420; }
.thuso-section-dark .accent { color: #49d6b7; }
.thuso-section h2 { font-size: 38px; font-weight: 700; margin: 0 0 16px; line-height: 1.2; letter-spacing: -0.5px; }
.thuso-section-lead { font-size: 15px; max-width: 640px; margin: 0 0 36px; line-height: 1.65; }

/* "Turn workforce health data into stronger business outcomes" — 4 feature
   cards. SVG icons sit in a gradient navy→teal rounded square so they
   stand out against the light section background. Each card has a subtle
   border + hover lift. */
.thuso-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 36px; }
.thuso-feature {
  background: #fff;
  border: 1px solid #e2e8e5;
  border-radius: 14px;
  padding: 24px 22px 22px;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.thuso-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(13,30,46,0.08);
  border-color: #cbd5e1;
}
.thuso-feature-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, #0d3b66 0%, #1b8aa3 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 10px rgba(13,59,102,0.25);
}
.thuso-feature-icon svg { display: block; }
.thuso-feature h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: #0a1420; letter-spacing: -0.01em; }
.thuso-feature p  { font-size: 13px; color: #586780; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .thuso-feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .thuso-feature-grid { grid-template-columns: 1fr; } }

/* -- Dark middle section (service grid + tagline) ------------- */
.thuso-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
.thuso-split h2 { color: #fff; }
.thuso-split p { color: #a9b7af; margin-bottom: 32px; max-width: 540px; }
/* "A complete view of occupational and primary healthcare" — 9-item
   service grid on the dark section. Each item is a horizontal row with
   an SVG icon in a teal-tinted rounded square, label aligned beside. */
.thuso-service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px 20px; margin-top: 28px; }
.thuso-service-grid div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(73,214,183,0.14);
  border-radius: 10px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.thuso-service-grid div:hover { background: rgba(73,214,183,0.08); border-color: rgba(73,214,183,0.3); }
.thuso-service-grid .svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, #1b8aa3 0%, #49d6b7 100%);
  color: #0a1420;
  flex-shrink: 0;
}
.thuso-service-grid .svc-icon svg { display: block; }
.thuso-service-grid strong { color: #e5efe9; font-size: 13.5px; font-weight: 500; line-height: 1.35; }
@media (max-width: 900px) { .thuso-service-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .thuso-service-grid { grid-template-columns: 1fr; } }
.thuso-tagline { font-size: 24px; font-weight: 800; line-height: 1.15; color: #49d6b7; letter-spacing: 1px; text-align: right; padding-top: 20px; }

/* -- Platform / SA map ---------------------------------------- */
.thuso-platform-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: center; }
/* "One platform. Every site. Every health signal." — 4 stat cards in a
   2×2 grid left of the National visibility map. Each card has a tone-
   coded left accent + gradient SVG icon badge mirroring the real
   dashboard's .exec-stat treatment. */
.thuso-platform-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-self: start; }
.thuso-stat-card {
  background: #fff;
  border: 1px solid #e2e8e5;
  border-left: 4px solid #378add;
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  gap: 14px;
  align-items: center;
  box-shadow: 0 1px 2px rgba(13,30,46,0.04);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.thuso-stat-card:hover { box-shadow: 0 10px 24px rgba(13,30,46,0.08); transform: translateY(-2px); }
.thuso-stat-card[data-tone="blue"]  { border-left-color: #378add; }
.thuso-stat-card[data-tone="teal"]  { border-left-color: #1b8aa3; }
.thuso-stat-card[data-tone="green"] { border-left-color: #2ea86b; }
.thuso-stat-card[data-tone="amber"] { border-left-color: #ef9f27; }
.thuso-stat-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, #0d3b66 0%, #1b8aa3 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(13,59,102,0.22);
}
.thuso-stat-card[data-tone="blue"]  .thuso-stat-icon { background: linear-gradient(135deg, #0d3b66 0%, #378add 100%); }
.thuso-stat-card[data-tone="teal"]  .thuso-stat-icon { background: linear-gradient(135deg, #0d3b66 0%, #1b8aa3 100%); }
.thuso-stat-card[data-tone="green"] .thuso-stat-icon { background: linear-gradient(135deg, #1f7a4d 0%, #2ea86b 100%); }
.thuso-stat-card[data-tone="amber"] .thuso-stat-icon { background: linear-gradient(135deg, #c57016 0%, #ef9f27 100%); }
.thuso-stat-icon svg { display: block; }
.thuso-stat-val { font-size: 28px; font-weight: 800; color: #0d1e2e; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.thuso-stat-lbl { font-size: 11.5px; color: #586780; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-top: 3px; }
.thuso-platform-map { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; background: #0f1d2e; border-radius: 16px; padding: 28px; color: #e5efe9; }
.thuso-maplegend-title { font-weight: 700; color: #fff; margin-bottom: 6px; }
.thuso-maplegend-sub { font-size: 12px; color: #a9b7af; margin-bottom: 20px; line-height: 1.5; }
.thuso-provinces > div { display: grid; grid-template-columns: 110px 1fr 38px; gap: 10px; align-items: center; font-size: 12px; color: #c7d4cc; margin-bottom: 8px; }
.thuso-provinces .bar { background: rgba(255,255,255,0.08); height: 6px; border-radius: 3px; overflow: hidden; }
.thuso-provinces .bar span { display: block; height: 100%; background: #49d6b7; border-radius: 3px; }
.thuso-sa { width: 100%; height: auto; }

/* Pulsing, glowing risk pins on the laptop + national SA maps. The glow is
   baked into the SVG via <filter>; CSS adds a subtle pulse so the pins read
   as live telemetry rather than static dots. */
@keyframes riskPulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.35); }
}
.site-dot, .sa-dot { transform-origin: center; transform-box: fill-box; }
.site-dot.risk-red,   .sa-dot.sa-dot-red   { animation: riskPulse 1.9s ease-in-out infinite; }
.site-dot.risk-amber, .sa-dot.sa-dot-amber { animation: riskPulse 2.6s ease-in-out infinite; }
.site-dot.risk-green, .sa-dot.sa-dot-green { animation: riskPulse 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .site-dot, .sa-dot { animation: none; }
}

/* Risk legend under the big SA map. */
.thuso-sa-risk-legend {
  display: flex; justify-content: center; gap: 24px;
  margin-top: 10px; font-size: 12px; color: #c7d4cc;
}
.thuso-sa-risk-legend .dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: middle; margin-right: 6px;
  box-shadow: 0 0 10px currentColor;
}
.thuso-sa-risk-legend .dot.red   { background: #ef4444; color: #ef4444; }
.thuso-sa-risk-legend .dot.amber { background: #f59e0b; color: #f59e0b; }
.thuso-sa-risk-legend .dot.green { background: #22c55e; color: #22c55e; }

/* -- Flow / process ------------------------------------------- */
/* Workflow diagram — numbered steps on a horizontal rail with gradient
   circles. Mirrors the brand navy→teal palette used elsewhere; replaces
   the earlier emoji-dot layout.  */
.thuso-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: 56px;
  padding: 0 8px;
}
/* Connecting rail — a soft dashed line behind the circles that reads as
   "same flow, same thread". Sits visually behind each circle. */
.thuso-flow-rail {
  position: absolute;
  top: 86px;              /* aligns with the circle vertical centres */
  left: 8%;
  right: 8%;
  height: 2px;
  background-image: linear-gradient(to right, #cbd5e1 0, #cbd5e1 10px, transparent 10px, transparent 20px);
  background-size: 20px 2px;
  z-index: 0;
}
.thuso-flow-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 0 4px;
  transition: transform 0.18s ease;
}
.thuso-flow-step:hover { transform: translateY(-3px); }
.flow-step-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #1b8aa3;
  background: #e6f4f3;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 2px;
}
.flow-circle {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d3b66 0%, #1b8aa3 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 6px 18px rgba(13, 59, 102, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  position: relative;
}
.flow-circle::after {
  /* subtle ring halo that pulses on hover */
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(27, 138, 163, 0.18);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.thuso-flow-step:hover .flow-circle::after { opacity: 1; }
.flow-step-title {
  font-size: 14px;
  font-weight: 700;
  color: #0a1420;
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.flow-step-sub {
  font-size: 12px;
  color: #586780;
  line-height: 1.45;
  max-width: 160px;
}

@media (max-width: 900px) {
  .thuso-flow { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .thuso-flow-rail { display: none; }
}
@media (max-width: 540px) {
  .thuso-flow { grid-template-columns: 1fr; }
}

/* -- Ask THUSO ------------------------------------------------ */
.thuso-ask-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
.thuso-ask-chips { display: flex; flex-direction: column; gap: 10px; }
.thuso-ask-chips div {
  background: #fff;
  border: 1px solid #e2e8e5;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: #0a1420;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.thuso-ask-chips div:hover { border-color: #1b8aa3; box-shadow: 0 4px 12px rgba(13,30,46,0.08); transform: translateY(-1px); }
.thuso-ask-chips div.is-active { border-color: #0d3b66; background: #f1f6fb; box-shadow: inset 3px 0 0 #0d3b66; }
.thuso-ask-chat { background: transparent; padding: 0; }

/* Chat panel mock — reuses the live chat's .commander-* classes so the
   visual stays in lock-step with the real experience. The one tweak is
   to drop the fixed-position / viewport-anchored sizing the live panel
   uses (it's a floating widget) and let the mock flow with the page. */
.thuso-chat-mock {
  position: static;
  width: 100%;
  max-width: 100%;
  max-height: none;
  box-shadow: 0 20px 60px rgba(13,30,46,0.2);
}
.thuso-chat-mock .commander-messages { max-height: 320px; overflow: hidden; }
.thuso-chat-mock .commander-form { padding: 10px 14px; background: #f6f8fb; border-top: 1px solid #e2e6ee; display: flex; gap: 8px; }
.thuso-chat-mock .commander-form input { flex: 1; border: 1px solid #d0d6df; border-radius: 8px; padding: 7px 10px; font-size: 13px; background: #fff; color: #0d1e2e; font-family: inherit; }
.thuso-chat-mock .commander-form button { background: #0d3b66; color: #fff; border: 0; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: default; font-family: inherit; }

/* -- Security ------------------------------------------------- */
.thuso-security-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 32px; }
.thuso-security-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13px; color: #0a1420; }
.sec-icon { font-size: 20px; color: #2a9d8f; }

/* ═════════════════════════════════════════════════════════════════════
   ExecCare + Phila services section — two sister-programme cards sitting
   between the Command Centre platform story and the IOD workflow strip.
   ═════════════════════════════════════════════════════════════════════ */
.thuso-services-section { padding-top: 56px; padding-bottom: 72px; }
.thuso-services-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.thuso-services-head .thuso-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1b8aa3;
  background: #e6f4f3;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.thuso-services-head h2 { margin: 0 0 14px; }
.thuso-services-head .thuso-section-lead { margin: 0 auto; }

.thuso-services-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.thuso-service-card {
  position: relative;
  background: #fff;
  border: 1px solid #e2e8e5;
  border-radius: 18px;
  padding: 32px 32px 28px;
  box-shadow: 0 2px 6px rgba(13,30,46,0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Thick coloured top rail — distinguishes the two programmes at a glance. */
.thuso-service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
}
.thuso-service-card--execcare::before { background: linear-gradient(90deg, var(--c-execcare-d), var(--c-execcare)); }
.thuso-service-card--phila::before    { background: linear-gradient(90deg, var(--c-phila-d), #8b5fbf); }

/* Brand logos — displayed natively at their own aspect ratio. */
.thuso-brand-logo {
  display: block;
  height: auto;
  width: auto;
  margin-bottom: 18px;
  object-fit: contain;
}
.thuso-brand-logo--execcare { max-height: 128px; max-width: 240px; }
.thuso-brand-logo--phila    { max-height: 128px; max-width: 128px; }

.thuso-service-card h3 {
  font-size: 24px;
  font-weight: 800;
  color: #0a1420;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  line-height: 1.22;
}
.thuso-service-card > p {
  font-size: 14px;
  color: #334155;
  line-height: 1.6;
  margin: 0 0 20px;
}
.thuso-service-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.thuso-service-list li {
  font-size: 13.5px;
  color: #334155;
  line-height: 1.55;
  padding-left: 20px;
  position: relative;
}
.thuso-service-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 10px; height: 10px;
  border-radius: 3px;
}
.thuso-service-card--execcare .thuso-service-list li::before { background: linear-gradient(135deg, var(--c-execcare-d), var(--c-execcare)); }
.thuso-service-card--phila    .thuso-service-list li::before { background: linear-gradient(135deg, var(--c-phila-d), #8b5fbf); }
.thuso-service-card--execcare .thuso-service-list strong { color: var(--c-execcare-d); font-weight: 700; }
.thuso-service-card--phila    .thuso-service-list strong { color: var(--c-phila-d); font-weight: 700; }

.thuso-service-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 12px 18px;
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  align-self: flex-start;
  transition: background 0.15s ease, transform 0.1s ease;
}
.thuso-service-cta span { transition: transform 0.15s ease; }
.thuso-service-cta:hover { transform: translateY(-1px); }
.thuso-service-cta:hover span { transform: translateX(2px); }
.thuso-service-card--execcare .thuso-service-cta        { background: var(--c-execcare); }
.thuso-service-card--execcare .thuso-service-cta:hover  { background: var(--c-execcare-d); }
.thuso-service-card--phila    .thuso-service-cta        { background: var(--c-phila); }
.thuso-service-card--phila    .thuso-service-cta:hover  { background: var(--c-phila-d); }

@media (max-width: 900px) {
  .thuso-services-split { grid-template-columns: 1fr; gap: 20px; }
}

/* Expanded security section — one row per control, left-icon + title + body. */
.sec-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin-top: 32px; }
.sec-stack-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  background: #fff;
  border: 1px solid #e2e8e5;
  border-radius: 12px;
  padding: 18px 20px;
  align-items: start;
}
.sec-stack-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0d3b66 0%, #1b8aa3 100%);
  color: #fff;
  border-radius: 9px;
  font-size: 18px;
  flex-shrink: 0;
}
.sec-stack-head {
  font-size: 15px;
  font-weight: 700;
  color: #0a1420;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.sec-stack-body {
  font-size: 13px;
  color: #334155;
  line-height: 1.55;
}
.sec-stack-body strong { color: #0d3b66; }

/* Compliance pills — a quiet strip under the detail cards to anchor the
   "which standards does this align with" summary at a glance. */
.sec-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  justify-content: center;
}
.sec-pill {
  background: #0d3b66;
  color: #fff;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

@media (max-width: 900px) {
  .sec-stack { grid-template-columns: 1fr; }
}

/* -- Final CTA ------------------------------------------------ */
.thuso-section-cta {
  background: linear-gradient(135deg, #0a1420 0%, #0f1d2e 100%);
  color: #fff; text-align: center;
}
.thuso-section-cta h2 { color: #fff; }
.thuso-section-cta .thuso-section-lead { color: #a9b7af; margin-left: auto; margin-right: auto; }
.thuso-cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 28px; }

.thuso-footer { padding: 24px 56px; background: #060d16; color: #7a8a90; font-size: 12px; display: flex; justify-content: space-between; }
.thuso-footer a { color: #a9b7af; text-decoration: none; margin: 0 8px; }
.thuso-footer a:hover { color: #49d6b7; }

/* -- Demo modal ---------------------------------------------- */
.thuso-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.thuso-modal[hidden] { display: none; }
.thuso-modal-card { background: #fff; color: #0a1420; border-radius: 16px; padding: 32px; max-width: 480px; width: 100%; position: relative; box-shadow: 0 40px 80px rgba(0,0,0,0.4); }
.thuso-modal-card h3 { margin: 0 0 8px; font-size: 22px; }
.thuso-modal-card p { color: #4a5a51; font-size: 14px; margin-bottom: 20px; }
.thuso-modal-card label { display: block; font-size: 12px; color: #4a5a51; margin-bottom: 12px; }
.thuso-modal-card input, .thuso-modal-card select, .thuso-modal-card textarea {
  width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid #d0d6df; border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; color: #0a1420;
}
.thuso-modal-card textarea { resize: vertical; min-height: 80px; }
.thuso-modal-close { position: absolute; top: 14px; right: 14px; background: transparent; border: 0; font-size: 22px; cursor: pointer; color: #4a5a51; }
.thuso-demo-status { margin-top: 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px; }
.thuso-demo-status.ok  { background: #e8f8f3; color: #1a6b43; }
.thuso-demo-status.err { background: #fdecea; color: #a63c2c; }

/* Responsive breakdown */
@media (max-width: 1100px) {
  .thuso-hero, .thuso-split, .thuso-platform-split, .thuso-ask-split { grid-template-columns: 1fr; }
  .thuso-feature-grid, .thuso-security-grid { grid-template-columns: 1fr 1fr; }
  .thuso-tagline { text-align: left; }
}
@media (max-width: 700px) {
  .thuso-nav-links { display: none; }
  .thuso-section { padding: 48px 24px; }
  .thuso-hero { padding: 32px 24px; }
  .thuso-hero h1 { font-size: 36px; }
  .thuso-hero h2 { font-size: 28px; }
  .thuso-feature-grid, .thuso-security-grid { grid-template-columns: 1fr; }
  .thuso-flow { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); }
}

/* ============================================================
   Coming-soon placeholder (IOD + Sick leave modules)
   ============================================================ */
.coming-soon-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 44px 48px;
  box-shadow: 0 1px 2px rgba(13,30,46,0.04), 0 10px 24px rgba(13,30,46,0.08);
  border: 1px solid rgba(0,0,0,0.04);
  max-width: 720px;
  margin: 24px auto;
  position: relative;
  overflow: hidden;
}
.coming-soon-card::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, #2a9d8f, #49d6b7, transparent);
}
.coming-soon-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(42,157,143,0.12);
  color: #2a9d8f;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  margin-bottom: 18px;
}
.coming-soon-card h2 { margin: 0 0 6px; font-size: 22px; color: #0d3b66; }
.coming-soon-card p  { font-size: 14px; color: #586780; line-height: 1.6; margin: 0 0 18px; }
.coming-soon-card ul { padding-left: 20px; margin: 0 0 24px; color: #0d1e2e; font-size: 14px; line-height: 1.7; }
.coming-soon-card li strong { color: #0d3b66; }
.coming-soon-cta {
  padding: 14px 18px;
  background: #f6f8fb;
  border: 1px solid #e2e6ee;
  border-radius: 10px;
  font-size: 13px;
  color: #586780;
}
.coming-soon-cta a { color: #1b8aa3; font-weight: 600; text-decoration: none; }
.coming-soon-cta a:hover { text-decoration: underline; }
/* Privacy callout — distinct from the generic CTA. Used on confidential-
   service pages (e.g. Phila EAP) to make the "what this view NEVER shows"
   contract immediately readable. */
.coming-soon-privacy {
  padding: 14px 18px;
  background: #fef7ed;
  border: 1px solid #f3dca8;
  border-left: 4px solid #d47a1c;
  border-radius: 10px;
  font-size: 13px;
  color: #6b4a1a;
  line-height: 1.6;
  margin-bottom: 16px;
}
.coming-soon-privacy strong { color: #4a3010; }

/* ============================================================
   Wellness Snapshot page — centre-value donuts + insight cards
   ============================================================ */
.wellness-donut-card {
  position: relative;
  padding: 24px 24px 20px;
}
.wellness-donut-wrap {
  position: relative;
  width: 100%;
  min-width: 180px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wellness-donut-wrap canvas {
  display: block;
  max-width: 100%;
  max-height: 220px;
}
.wellness-donut-centre {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.wellness-donut-centre .val {
  font-size: 36px;
  font-weight: 800;
  color: #0d3b66;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.wellness-donut-centre .lbl {
  font-size: 11px;
  color: #586780;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-top: 4px;
}
.wellness-legend .legend-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  padding: 4px 0;
  color: #0d1e2e;
}
.wellness-legend .legend-swatch {
  width: 12px; height: 12px; border-radius: 3px;
}
.wellness-legend .legend-label { flex: 1; }
.wellness-legend .legend-value { font-weight: 600; color: #0d3b66; font-variant-numeric: tabular-nums; }
.wellness-legend .muted { color: #8892a4; font-weight: 400; font-size: 11px; margin-left: 4px; }

.wellness-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 12px;
}
.wellness-insight {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #f6f8fb 0%, #ffffff 100%);
  border: 1px solid rgba(0,0,0,0.04);
  border-left: 3px solid #2a9d8f;
  border-radius: 10px;
}
.wellness-insight-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.wellness-insight-head {
  font-size: 13px;
  font-weight: 700;
  color: #0d3b66;
  margin-bottom: 4px;
}
.wellness-insight-body {
  font-size: 13px;
  color: #586780;
  line-height: 1.5;
}

/* Each wellness card leans into its own palette, matching the hero accent */
.wellness-donut-card[data-metric="smoking"]   { --card-accent: #c9302c; }
.wellness-donut-card[data-metric="alcohol"]   { --card-accent: #8c5fc5; }
.wellness-donut-card[data-metric="exercise"]  { --card-accent: #2ea86b; }
.wellness-donut-card[data-metric="bmi"]       { --card-accent: #e8832e; }

/* ============================================================
   Executive Health Overview — light-mode redesign
   ============================================================ */
.exec-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 4px 0 28px; }
.exec-title { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: #0d1e2e; margin: 0 0 6px; }
.exec-sub   { font-size: 14px; color: #586780; margin: 0; }
.exec-range {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: #fff; border: 1px solid #e2e6ee;
  border-radius: 10px; font-size: 13px; color: #0d3b66; font-weight: 500;
  box-shadow: 0 1px 2px rgba(13,30,46,0.04);
}
.exec-range-icon { opacity: 0.8; }

/* -- Hero stat row (4 cards after the Sites card was retired). Auto-fit
      minmax keeps cards readable at any viewport: 4 across on desktop,
      wraps to 2 on narrower, 1 on phone-size — no more squeezing an
      IOD card into 1/6 of the row and clipping its sparkline. -- */
.exec-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.exec-stat {
  --tone-fill: #e6f1fb;
  --tone-ink:  #185fa5;
  --tone-mid:  #378add;
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px 20px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 1px 2px rgba(13,30,46,0.04), 0 6px 18px rgba(13,30,46,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  position: relative;
}
.exec-stat:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(13,30,46,0.08), 0 12px 28px rgba(13,30,46,0.12); }
.exec-stat::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tone-mid); opacity: 0.9; }
.exec-stat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.exec-stat-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--tone-fill); color: var(--tone-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.exec-stat-label { font-size: 12px; color: #4a5a63; font-weight: 600; letter-spacing: 0.2px; }
.exec-stat-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.exec-stat-val { font-size: 32px; font-weight: 800; color: #0d1e2e; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.exec-stat-delta { font-size: 11.5px; color: #586780; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.exec-stat-delta .pos  { color: #1f7a4d; font-weight: 700; }
.exec-stat-delta .neg  { color: #c9302c; font-weight: 700; }
.exec-stat-delta .flat { color: #586780; }
.exec-spark { width: 90px !important; height: 36px !important; }

/* Per-tone palette for the six cards */
.exec-stat[data-tone="blue"]   { --tone-fill: #e6f1fb; --tone-ink: #185fa5; --tone-mid: #378add; }
.exec-stat[data-tone="teal"]   { --tone-fill: #e1f5ee; --tone-ink: #0f6e56; --tone-mid: #1d9e75; }
.exec-stat[data-tone="green"]  { --tone-fill: #eaf3de; --tone-ink: #3b6d11; --tone-mid: #639922; }
.exec-stat[data-tone="amber"]  { --tone-fill: #faeeda; --tone-ink: #854f0b; --tone-mid: #ef9f27; }
.exec-stat[data-tone="red"]    { --tone-fill: #fcebeb; --tone-ink: #a32d2d; --tone-mid: #e24b4a; }
.exec-stat[data-tone="purple"] { --tone-fill: #eeedfe; --tone-ink: #3c3489; --tone-mid: #7f77dd; }

/* -- Panel rows -- */
.exec-row { display: grid; grid-template-columns: 2fr 1.3fr; gap: 20px; margin-bottom: 24px; }
.exec-row + .exec-row { grid-template-columns: 1fr 1.4fr; }
.exec-panel {
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px 24px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 1px 2px rgba(13,30,46,0.04), 0 6px 18px rgba(13,30,46,0.06);
  position: relative;
  overflow: hidden;
}
.exec-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.exec-panel h2   { font-size: 18px; font-weight: 700; color: #0d1e2e; margin: 0 0 4px; letter-spacing: -0.01em; }
.exec-panel p    { font-size: 12.5px; color: #586780; margin: 0; }
.exec-legend     { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: #586780; flex-wrap: wrap; }
.exec-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Trend chart panel */
.exec-panel-trend canvas { max-height: 300px; }

/* Full-width panel row — used by the SA map + the Trend chart so each gets
   its own line and the map has enough room to actually render tiles. */
.exec-row-full   { margin-bottom: 24px; }
.exec-row-full > .exec-panel { width: 100%; }

/* SA map panel (full-width inside the panel; province table removed). */
.exec-map-wrap   { display: block; }
.exec-map-canvas { position: relative; min-height: 420px; }
.exec-map-canvas .sa-map-leaflet { height: 420px; border-radius: 10px; }
.exec-provinces  { background: #f6f8fb; border: 1px solid #e2e6ee; border-radius: 10px; padding: 14px 16px; font-size: 12px; max-height: 320px; overflow-y: auto; }
.exec-provinces-head { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #e2e6ee; font-weight: 700; color: #0d3b66; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1px; }
.exec-provinces-head .num { min-width: 44px; text-align: right; }
.exec-provinces-row  { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef1f6; }
.exec-provinces-row:last-child { border-bottom: none; }
.exec-provinces-row .prov-name  { display: flex; align-items: center; gap: 8px; color: #0d1e2e; }
.exec-provinces-row .prov-dot   { width: 8px; height: 8px; border-radius: 50%; background: #2ea86b; }
.exec-provinces-row .prov-sites { color: #0d3b66; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; }
.exec-provinces-row .prov-emp   { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; color: #0d3b66; font-weight: 600; min-width: 70px; justify-content: flex-end; }
.exec-provinces-row .prov-emp-bar { width: 50px; height: 4px; background: #e2e6ee; border-radius: 2px; overflow: hidden; }
.exec-provinces-row .prov-emp-bar span { display: block; height: 100%; background: #378add; border-radius: 2px; }

/* Risk donut panel — the donut div needs explicit WIDTH as well as height
   so Chart.js (responsive, maintainAspectRatio:false) reads a non-zero
   parent on the first paint. Without width, the grid cell can collapse
   before layout settles and Chart.js records a 0×0 canvas that never
   catches a resize. */
.exec-risk-wrap  { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; }
.exec-risk-donut { position: relative; width: 220px; height: 220px; flex-shrink: 0; }
.exec-risk-donut canvas { display: block; max-width: 220px; max-height: 220px; }
.exec-risk-centre { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.exec-risk-centre .val { font-size: 28px; font-weight: 800; color: #0d1e2e; letter-spacing: -0.02em; }
.exec-risk-centre .lbl { font-size: 11px; color: #586780; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-top: 2px; }
.exec-risk-legend .legend-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.exec-risk-legend .legend-row:hover { background: #f6f8fb; }
.exec-risk-legend .legend-swatch { width: 14px; height: 14px; border-radius: 4px; }
.exec-risk-legend .legend-label  { flex: 1; color: #0d1e2e; }
.exec-risk-legend .legend-value  { font-weight: 700; color: #0d3b66; font-variant-numeric: tabular-nums; }
.exec-risk-legend .muted { color: #8892a4; font-weight: 400; font-size: 11px; margin-left: 4px; }

/* Top sites panel */
.exec-topsites { display: flex; flex-direction: column; gap: 10px; }
.exec-topsite-row { display: grid; grid-template-columns: 20px minmax(0, 180px) 1fr 46px 60px; gap: 14px; align-items: center; padding: 8px 0; }
.exec-topsite-rank { font-size: 13px; color: #8892a4; font-weight: 600; text-align: right; }
.exec-topsite-name {
  font-size: 13.5px; color: #0d1e2e; font-weight: 500;
  /* Long site names (incl. the sub-company prefix) truncate instead of
     bleeding into the bar column that sits to their right. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.exec-topsite-bar  { height: 8px; background: #f6f8fb; border-radius: 4px; overflow: hidden; }
.exec-topsite-bar  span { display: block; height: 100%; background: linear-gradient(90deg, #e24b4a, #f0997b); border-radius: 4px; }
.exec-topsite-pct  { font-size: 13px; color: #c9302c; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.exec-topsite-count{ font-size: 13px; color: #0d3b66; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.exec-topsites-legend { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #586780; }

/* Insights strip */
.exec-insights-strip { background: #fff; border-radius: 16px; padding: 22px 24px 24px; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 1px 2px rgba(13,30,46,0.04), 0 6px 18px rgba(13,30,46,0.06); margin-bottom: 24px; }
.exec-insights-head  { margin-bottom: 16px; }
.exec-insights-head h2 { font-size: 18px; font-weight: 700; color: #0d1e2e; margin: 0 0 4px; }
.exec-insights-head p  { font-size: 12.5px; color: #586780; margin: 0; }
.exec-insights-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.exec-insight-card   {
  --insight-fill: #e8f6ee;
  --insight-ink:  #1a6b43;
  --insight-mid:  #2ea86b;
  background: var(--insight-fill);
  border: 1px solid rgba(0,0,0,0.04);
  border-left: 4px solid var(--insight-mid);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  text-decoration: none;   /* <a> conversion — kill the default link underline */
  color: inherit;
}
.exec-insight-card:hover { box-shadow: 0 6px 18px rgba(13,30,46,0.1); transform: translateY(-1px); }
.exec-insight-card:focus-visible { outline: 2px solid var(--insight-mid); outline-offset: 2px; }
.exec-insight-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.5); color: var(--insight-ink); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.exec-insight-body { flex: 1; min-width: 0; }
.exec-insight-head { font-size: 14px; font-weight: 700; color: var(--insight-ink); margin-bottom: 4px; }
.exec-insight-text { font-size: 12.5px; color: #0d1e2e; line-height: 1.5; }
.exec-insight-card[data-tone="red"]    { --insight-fill: #fdeeee; --insight-ink: #a32d2d; --insight-mid: #e24b4a; }
.exec-insight-card[data-tone="amber"]  { --insight-fill: #fdf3e0; --insight-ink: #854f0b; --insight-mid: #ef9f27; }
.exec-insight-card[data-tone="green"]  { --insight-fill: #e8f6ee; --insight-ink: #1a6b43; --insight-mid: #2ea86b; }
.exec-insight-arrow { font-size: 18px; color: var(--insight-ink); opacity: 0.5; align-self: center; }

/* Responsive breakdown — .exec-stats itself uses auto-fit so it adapts
   without explicit media queries; the breakpoints below only handle the
   wider row/map/insight layouts. */
@media (max-width: 1100px) {
  .exec-row, .exec-row + .exec-row, .exec-map-wrap, .exec-risk-wrap { grid-template-columns: 1fr; }
  .exec-insights-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .exec-title { font-size: 28px; }
}

/* ============================================================
   Visual polish wave — donut centre labels, taller span-2
   horizontal bars, lifted pyramid, mobile breakpoints
   ============================================================ */

/* Shared centre label for the OCH + Drug donuts so they match the
   Wellness + Exec Overview centre treatment. .donut-wrap must be the
   relatively-positioned container. */
.donut-wrap { position: relative; }
.donut-centre {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.donut-centre .val {
  font-size: 26px;
  font-weight: 800;
  color: var(--c-text, #0d1e2e);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.donut-centre .lbl {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--c-text-mute, #586780);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 4px;
}
/* Chart-glow plugin paints a shadow around the stroke; hide the centre
   label while the donut dataset is empty so there's no "0" sitting on
   top of a hidden canvas. renderOutcomes / renderSubDonut toggle this. */
.donut-centre[hidden] { display: none; }

/* Span-2 horizontal-bar cards were cramming 6-10 bars into 260px which
   compressed the labels. 360px gives ~36px per band and the labels
   stay legible. Specific overrides for the biggest bars. */
.chart-card.span-2 canvas { max-height: 360px; }
#wf-pyramid-chart        { max-height: 420px; }
#wf-bu-chart,
#wf-job-chart,
#phc-chronic-chart       { max-height: 360px; }

/* Mobile — collapse the sidebar + flow hero strips into a single
   column with smaller type so a phone-width visitor can still read
   the numbers. 700px is the Executive Overview's own breakpoint. */
@media (max-width: 700px) {
  .hero-strip   { gap: 12px; }
  /* Shrink the chip to 30px + tighter gutter so hero-cards still breathe
     at phone width without clipping the icon. */
  .hero-card    { min-height: 118px; padding: 16px 18px 18px 60px; }
  .hero-card::before { top: 16px; left: 18px; width: 30px; height: 30px; border-radius: 8px; }
  .hero-card::after  { top: 23px; left: 25px; width: 16px; height: 16px; }
  .hero-value   { font-size: 28px; letter-spacing: -0.02em; }
  .hero-label   { font-size: 11px; margin-bottom: 8px; }
  .hero-delta   { font-size: 11px; }
  .donut-centre .val { font-size: 22px; }
  .exec-topsite-row {
    grid-template-columns: 20px 1fr auto;
    row-gap: 4px;
  }
  .exec-topsite-row .exec-topsite-bar  { display: none; }
  .exec-topsite-row .exec-topsite-pct  { display: none; }
}

/* ---- Master client registry — admin modal ---------------------------------
   One master = one real-world company; the picker reveals that company's
   native row in every service we integrate (CTP NXT, ExecCare, …). Four
   side-by-side columns at desktop width; stacks under 1000px. */
.modal--wide { max-width: 1120px; width: calc(100vw - 48px); }
.master-pickers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.master-picker {
  border: 1px solid var(--c-line, #d8dde6);
  border-radius: 10px;
  background: #fafbfc;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 320px;
  max-height: 420px;
}
.master-picker h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--c-text); }
.master-picker-search {
  padding: 6px 8px;
  border: 1px solid var(--c-line, #d8dde6);
  border-radius: 6px;
  font-size: 12px;
}
.master-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.master-picker-row {
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 120ms;
}
.master-picker-row:hover { background: rgba(13, 59, 102, 0.06); }
.master-picker-row label {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 6px;
  align-items: center;
  cursor: pointer;
  font-size: 12.5px;
}
.master-picker-row input[type="checkbox"] { margin: 0; }
.master-picker-name { font-weight: 500; }
.master-picker-extra { font-size: 11px; display: block; }
.master-picker-foreign { font-size: 11px; display: block; font-style: italic; }
.master-picker-row.is-foreign { opacity: 0.75; }
.master-picker-empty { padding: 10px; text-align: center; font-size: 12px; }
.master-picker-note { font-size: 12px; margin-top: 12px; }

@media (max-width: 1000px) {
  .master-pickers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .master-pickers { grid-template-columns: 1fr; }
}

/* ---- ExecCare banner (service area header on the ExecCare tab) --------- */
.execcare-banner { background: linear-gradient(135deg, #8a5a0e 0%, #d49a3a 55%, #ebc689 100%); }
.execcare-banner { --sb-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" fill="%23000"/><circle cx="12" cy="12" r="9" fill="none" stroke="%23000" stroke-width="2"/></svg>'); }

/* ---- Executive health: health signals hero (Score + pillars) ----------
   One wide amber-tinted band showing the averaged Executive Score and
   its pillar components. Below it the regular hero-strip tiles reuse
   the standard look so no new tile styles are needed. */
.exec-score-strip {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  background: linear-gradient(135deg, #faeeda 0%, #fff8ec 100%);
  border: 1px solid #ebd59a;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 14px;
}
.exec-score-hero { display: flex; flex-direction: column; gap: 4px; }
.exec-score-label { font-size: 12px; color: var(--c-text-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.exec-score-val   { font-size: 68px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.exec-score-band  { font-size: 14px; font-weight: 600; }
.exec-score-sub   { font-size: 12px; color: var(--c-text-mute); margin-top: 6px; }
.exec-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: center;
}
.exec-pillar {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #ebd59a;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}
.exec-pillar-label { font-size: 11px; color: var(--c-text-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.exec-pillar-val   { font-size: 28px; font-weight: 700; color: #854f0b; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .exec-score-strip { grid-template-columns: 1fr; }
  .exec-score-val { font-size: 56px; }
  .exec-pillars { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Executive health: cancellation billable bands ---------------------
   Three equal-weight tiles side-by-side: 100% / 50% / 0% billable.
   Band colour tracks severity (red for 100% billable chargebacks). */
.exec-cancel-bands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}
.exec-cancel-band {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--c-line, #d8dde6);
  border-radius: 10px;
  padding: 16px 14px;
  text-align: center;
  position: relative;
}
.exec-cancel-band[data-band="full"] { border-left: 4px solid #c9302c; background: linear-gradient(135deg, #fdecec 0%, #fff5f5 100%); }
.exec-cancel-band[data-band="half"] { border-left: 4px solid #e0a33a; background: linear-gradient(135deg, #fff5e0 0%, #fffaef 100%); }
.exec-cancel-band[data-band="none"] { border-left: 4px solid #6d8aa8; background: linear-gradient(135deg, #eef3f8 0%, #f7faff 100%); }
.exec-cancel-band-pct { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--c-text-mute); }
.exec-cancel-band-val { font-size: 32px; font-weight: 700; margin: 4px 0; font-variant-numeric: tabular-nums; }
.exec-cancel-band-lbl { font-size: 11px; color: var(--c-text-mute); text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 600px) {
  .exec-cancel-bands { grid-template-columns: 1fr; }
}