:root {
  /* HAC brand palette (2026-11-04): colors sampled from the HAC logo mark and
     healthanalyticsconnect.com. Navy text, HAC blue accent, logo green/teal,
     HAC orange for "watch" states. */
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f1f8fd;
  --border: rgba(31,59,87,0.11);
  --border-strong: rgba(31,59,87,0.20);
  --text: #1f3b57;
  --text-dim: #5b6b7c;
  --text-dimmer: #8c99a6;
  --navy: #1f3b57;
  --accent: #005aa6;
  --accent-dim: rgba(0,90,166,0.10);
  --accent-deep: #083a81;
  --teal: #00909d;
  --teal-dim: rgba(0,144,157,0.12);
  --orange: #f07c1b;
  --orange-dim: rgba(253,125,22,0.14);
  --green: #2a9446;
  --green-dim: rgba(51,167,76,0.13);
  --amber: #d9690b;
  --amber-dim: rgba(253,125,22,0.14);
  --red: #c62f2f;
  --red-dim: rgba(198,47,47,0.11);
  --radius: 12px;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  height: 100%;
}

button, input {
  font-family: inherit;
  color: inherit;
}

.app {
  display: flex;
  min-height: 100vh;
}

/* ---------- SIDEBAR ---------- */

.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 8px;
}

/* HAC platform header — the vendor's own identity, static regardless of
   which Plan/Employer workspace is active below it. Deliberately slimmer and
   more muted than the workspace block below (small logo, dimmed label) so it
   reads as background chrome, not the primary identity in this part of the
   sidebar. Split out from .brand-block on 2026-09-30 (Denise) — see
   change-tracker.md. */
.platform-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 2px;
}
.platform-logo {
  width: 30px;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
}
.platform-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar branding — reflects the Plan/Employer relationship toggle just
   below it (currentRelationshipMode/currentWorkspace). Which EMPLOYER client
   within Plan mode still switches via the inline .scope-switch-wrap controls
   elsewhere in the app, unchanged. Given a tinted card treatment (2026-09-30)
   so it reads as its own distinct block, visually separate from the static
   platform-header row above it — see change-tracker.md. */
.brand-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--panel-2);
  border-radius: 10px;
}
.brand-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.brand-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-role { font-size: 12px; color: var(--text-dim); }
.brand-sub { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Plan / Employer relationship-mode toggle — moved below the sidebar footer
   user card (2026-09-20, Denise; was a segmented pill directly under the
   brand block). Deliberately subdued now: plain small text labels with a
   thin divider, no pill/segmented-control chrome, no accent fill — reads as
   a quiet demo-mode switch tucked in the corner, not a primary nav action.
   With exactly one plan and (for now) one direct employer, there's nothing
   to pick beyond the two modes themselves, so a dropdown isn't warranted
   either. */
.relationship-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 2px;
  margin: 0 4px;
}
.relationship-toggle-btn {
  border: none;
  background: transparent;
  padding: 2px 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dimmer);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.relationship-toggle-btn:hover { color: var(--text-dim); }
.relationship-toggle-btn.active {
  color: var(--text-dim);
  font-weight: 700;
}
.relationship-toggle-divider { font-size: 11px; color: var(--border); }

/* Inline scope switcher — mounted into the Outcomes Analyzer header, the
   InHouseIQ header, and (only while scoped to one employer) the employer
   detail header in place of the back-link. Menu markup/behavior mirrors
   the old sidebar workspace switcher; only where it lives moved. */
.scope-switch-wrap { position: relative; display: inline-block; }
.scope-switch-wrap.hidden { display: none; }

.scope-switch-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  padding: 7px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}
.scope-switch-btn:hover { background: var(--panel-2); }

.scope-switch-avatar {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.scope-switch-label { font-size: 13px; font-weight: 600; white-space: nowrap; }

.scope-switch-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  z-index: 30;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.scope-switch-menu.hidden { display: none; }

.workspace-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.workspace-item:hover { background: var(--panel-2); }
.workspace-item.active { background: var(--accent-dim); }

.workspace-item-avatar {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.workspace-item-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.workspace-item-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-item-sub { font-size: 11px; color: var(--text-dimmer); }
.workspace-item-check { color: var(--accent); font-weight: 700; flex-shrink: 0; }

.chevron { color: var(--text-dim); }

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--text-dim);
  cursor: pointer;
  margin-bottom: 8px;
}
.search-placeholder { flex: 1; text-align: left; font-size: 14px; }
.kbd {
  font-size: 11px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--text-dimmer);
}

.nav-group { display: flex; flex-direction: column; gap: 2px; }

.nav-item.hidden { display: none; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  color: var(--text-dim);
}
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: var(--panel-2); color: var(--text); font-weight: 600; }
.nav-icon { width: 16px; text-align: center; opacity: 0.9; }

/* External-product nav links (Analytic Recipes, Healthcare Analytics
   Foundations) — same look as an internal nav-item, but they're plain <a>
   tags to a different site, so no JS view-switch wiring is needed, and a
   small "leaves the app" icon distinguishes them from internal tabs. */
.nav-item-external { text-decoration: none; }
.nav-item-external .nav-external-icon {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.55;
}

.nav-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dimmer);
  padding: 12px 10px 2px;
}

.sidebar-spacer { flex: 1; }

.ask-advisor-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--text);
}
.ask-advisor-btn:hover { border-color: var(--border-strong); }
.ask-advisor-btn .kbd { margin-left: auto; }

.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
}
.user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.user-text { display: flex; flex-direction: column; min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: var(--text-dim); }

/* ---------- MAIN ---------- */

.main {
  flex: 1;
  padding: 32px 40px;
  overflow-x: hidden;
  min-width: 0;
}

.view.hidden { display: none; }

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.view-header h1 { margin: 0 0 6px; font-size: 26px; }
.subtitle { margin: 0; color: var(--text-dim); font-size: 14px; max-width: 560px; }

.view-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.view-title-row h1 { margin: 0; }

.header-actions { display: flex; gap: 10px; flex-shrink: 0; }
.header-actions .btn.hidden { display: none; }

.btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-solid { background: var(--green-dim); color: var(--green); border-color: rgba(51,167,76,0.3); }
.btn-solid:hover { background: rgba(51,167,76,0.22); }
.btn-outline { background: transparent; color: var(--accent); border-color: rgba(0,90,166,0.35); }
.btn-outline:hover { background: var(--accent-dim); }

/* Stat cards */

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

/* Outlined in the app's accent blue (2026-09-30, Denise — wanted the KPI
   boxes to "stand out a bit more"). One consistent accent color across every
   .stat-card instance (Outcomes Analyzer, InHouseIQ, Home, Employer Detail,
   Program Detail top stats) rather than a different color per card — keeps
   it a deliberate brand accent instead of a rainbow of unrelated colors. */
.stat-card {
  background: var(--panel);
  border: 1.5px solid rgba(0,90,166,0.4);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,90,166,0.08);
}
.stat-label { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.stat-value { font-size: 26px; font-weight: 700; margin-bottom: 6px; }
.stat-sub { font-size: 12px; color: var(--text-dimmer); }
.stat-sub.positive { color: var(--green); }
.stat-sub.warn { color: var(--red); font-weight: 600; }

/* Filters */

.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* flex-wrap added 2026-09-21 — Company ABC's business-group pill labels
   ("Retail Banking", "Trading & Markets", etc.) run longer than the G1-G5
   quintile labels this was originally sized for; wrapping keeps them from
   overflowing on narrower windows without affecting the shorter labels
   elsewhere, which still fit on one line. */
.pill-group { display: flex; flex-wrap: wrap; gap: 6px; background: var(--panel-2); padding: 4px; border-radius: 10px; border: 1px solid var(--border); }
.pill {
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}
.pill.active { background: var(--bg); color: var(--text); font-weight: 600; }

.excat-toggle {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}
.excat-toggle:hover { background: var(--panel-2); }
.excat-toggle.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: rgba(0,90,166,0.35);
  font-weight: 600;
}

.search-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 260px;
}
.search-input-wide { min-width: 320px; }
.search-input input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  flex: 1;
  color: var(--text);
}
.search-input input::placeholder { color: var(--text-dimmer); }
.icon-search { color: var(--text-dimmer); }

/* Table */

.table-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
  text-align: left;
  padding: 12px 16px;
  color: var(--text-dim);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table tr:last-child td { border-bottom: none; }
.tip { cursor: help; color: var(--text-dimmer); font-size: 11px; }

.row-name-cell { display: flex; align-items: center; gap: 12px; }
.row-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}
.row-icon.red { background: var(--red-dim); color: var(--red); }
.row-icon.violet { background: var(--orange-dim); color: var(--orange); }
.row-icon.blue { background: var(--accent-dim); color: var(--accent); }
.row-icon.teal { background: var(--teal-dim); color: var(--teal); }
.row-icon.green { background: var(--green-dim); color: var(--green); }
.row-icon.gray { background: var(--panel-2); color: var(--text-dimmer); }

.row-name-text { display: flex; flex-direction: column; }
.row-name { font-weight: 600; }
.row-sub { font-size: 12px; color: var(--text-dimmer); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.status-pill.Active { background: var(--green-dim); color: var(--green); }
.status-pill.Active .dot { background: var(--green); }
.status-pill.Pilot { background: var(--accent-dim); color: var(--accent); }
.status-pill.Pilot .dot { background: var(--accent); }

.signal-pill { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.signal-pill.Action { background: var(--red-dim); color: var(--red); }
.signal-pill.Monitor { background: var(--amber-dim); color: var(--amber); }
.signal-pill.Healthy { background: var(--green-dim); color: var(--green); }

.trend-up { color: var(--green); }
.trend-down { color: var(--red); }

/* Connectors (Data Sources) */

.connector-heading { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.connector-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }

.connector-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  flex-wrap: wrap;
}
.connector-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.connector-body { flex: 1; min-width: 200px; }
.connector-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.connector-name { font-weight: 600; }
.freq-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--green-dim); color: var(--green);
}
.freq-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.connector-desc { font-size: 13px; color: var(--text-dim); }
.connector-sync { font-size: 12px; color: var(--text-dimmer); margin-top: 2px; }
.connector-status { font-size: 13px; font-weight: 600; flex-shrink: 0; }
.connector-status.connected { color: var(--green); }
.connector-status.disconnected { color: var(--text-dimmer); }

/* ---------- ADVISOR PANEL ---------- */

.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 40;
}
.overlay.hidden { display: none; }

.advisor-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--panel);
  border-left: 1px solid var(--border);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.advisor-panel.hidden { display: none; }

.advisor-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.advisor-icon { color: var(--accent); font-size: 16px; }
.advisor-title-block { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.advisor-title-row { display: flex; align-items: center; gap: 8px; }
.advisor-title { font-weight: 700; font-size: 15px; }
.advisor-online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.advisor-subtitle { font-size: 12px; color: var(--text-dimmer); }
.advisor-close {
  background: transparent; border: none; color: var(--text-dim);
  font-size: 15px; cursor: pointer; padding: 4px;
}
.advisor-close:hover { color: var(--text); }

.advisor-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.advisor-msg { display: flex; gap: 10px; align-items: flex-start; }
.advisor-msg.user { justify-content: flex-end; }
.advisor-msg-avatar {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--accent-dim); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
}
.advisor-msg-bubble {
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 320px;
}
.advisor-msg.bot .advisor-msg-bubble { color: var(--text); }
.advisor-msg.user .advisor-msg-bubble {
  background: var(--accent);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px 12px 2px 12px;
  font-weight: 600;
}
.advisor-msg-bubble p { margin: 0 0 10px; }
.advisor-msg-bubble p:last-child { margin-bottom: 0; }

/* Live AI Advisor typing indicator — merged in from the former
   hac-outcomes-demo-aiadvisor fork (2026-09-19). Shown in place of a bot
   message while a real call to /api/advisor is in flight. */
.advisor-typing-dots { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.advisor-typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); opacity: 0.4;
  animation: advisor-typing-bounce 1.1s infinite ease-in-out;
}
.advisor-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.advisor-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes advisor-typing-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.advisor-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 18px 14px;
}
.quick-action-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.quick-action-btn:hover { background: var(--panel-2); }

.advisor-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 18px 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 6px 6px 12px;
}
.advisor-input-row input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  padding: 8px 0;
}
.advisor-input-row input::placeholder { color: var(--text-dimmer); }
.advisor-send {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
}

.advisor-footer {
  text-align: center;
  font-size: 11px;
  color: var(--text-dimmer);
  padding: 6px 18px 16px;
}

.mobile-nav-toggle { display: none; }
.mobile-nav-backdrop { display: none; }

@media (max-width: 860px) {
  .main { padding: 20px; padding-top: 64px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }

  /* Sidebar becomes a slide-in drawer, opened by the hamburger button. */
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 24px rgba(0,0,0,0.15);
  }
  .sidebar.open { transform: translateX(0); }

  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 50;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
  }
  .mobile-nav-toggle:hover { background: var(--panel-2); }

  .mobile-nav-backdrop.hidden { display: none; }
  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 55;
  }
}

/* ---------- PROGRAM DETAIL PAGE ---------- */

.clickable-row { cursor: pointer; }
.clickable-row:hover { background: var(--panel-2); }

.back-link {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 0 0 10px;
}
.back-link:hover { color: var(--text); }
.back-link.hidden { display: none; }

.program-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.program-switch-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}
.program-switch-pill:hover { background: var(--panel-2); color: var(--text); }
.program-switch-pill.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: rgba(0,90,166,0.35);
  font-weight: 600;
}
.program-switch-pill .pill-icon {
  width: 22px;
  height: 22px;
  font-size: 12px;
  flex-shrink: 0;
}

.detail-title-row { display: flex; align-items: flex-start; gap: 14px; }
.detail-title-row .row-icon { width: 44px; height: 44px; font-size: 19px; flex-shrink: 0; }
.detail-title-line { display: flex; align-items: center; gap: 10px; }
.detail-title-line h1 { margin: 0; font-size: 22px; }

.employer-scope-note {
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--accent-dim);
  border: 1px solid rgba(0,90,166,0.25);
  border-radius: 9px;
  padding: 10px 14px;
  margin: -10px 0 16px;
}
.employer-scope-note.hidden { display: none; }

.cohort-unmatched-note {
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--accent-dim);
  border: 1px solid rgba(0,90,166,0.25);
  border-radius: 9px;
  padding: 10px 14px;
  margin: 0 0 16px;
}

.detail-tab-strip {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
}
.detail-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--text-dim);
  cursor: grab;
  white-space: nowrap;
}
.detail-tab:hover { color: var(--text); }
.detail-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* User-sortable tab strip: drag any tab to reorder the row. .dragging marks
   the tab being dragged (dimmed, so its original slot reads as "lifted");
   .drag-over marks whichever tab the pointer is currently over (a left-edge
   accent bar shows where the dragged tab would land if dropped now). */
.detail-tab.dragging { opacity: 0.35; cursor: grabbing; }
.detail-tab.drag-over { box-shadow: inset 2px 0 0 var(--accent); }

.detail-section-heading { font-size: 13px; color: var(--text-dim); margin: 4px 0 10px; }

.segment-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.segment-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.segment-name { font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.segment-n { font-weight: 400; color: var(--text-dimmer); font-size: 12px; margin-left: 4px; }
.segment-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.segment-stats > div { display: flex; flex-direction: column; gap: 3px; }
.seg-label { font-size: 10.5px; color: var(--text-dimmer); text-transform: uppercase; letter-spacing: 0.03em; }
.seg-value { font-size: 16px; font-weight: 700; }
.segment-pct { font-size: 12px; color: var(--text-dim); }

.detail-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 900px) { .detail-grid-2 { grid-template-columns: 1fr; } }

.detail-pad { padding: 18px; margin-bottom: 16px; }
.detail-card-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.detail-card-sub { font-size: 12px; color: var(--text-dimmer); margin-bottom: 14px; }

.savings-chart-card { padding: 18px; margin-bottom: 16px; }
.savings-bar-row {
  display: grid;
  grid-template-columns: 168px 1fr 72px;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.savings-bar-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  min-width: 0;
}
.savings-bar-label .pill-icon { width: 22px; height: 22px; font-size: 11px; flex-shrink: 0; }
.savings-bar-label span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.savings-bar-track {
  height: 10px;
  background: var(--panel-2);
  border-radius: 999px;
  overflow: hidden;
}
.savings-bar-fill { height: 100%; border-radius: 999px; }
.savings-bar-value { font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap; }

.table-mini-bar-cell { display: flex; flex-direction: column; gap: 4px; min-width: 90px; }
.table-mini-bar-value { font-size: 13px; }
.table-mini-bar-track {
  height: 5px;
  background: var(--panel-2);
  border-radius: 999px;
  overflow: hidden;
}
.table-mini-bar-fill { height: 100%; border-radius: 999px; }

.compact-table th, .compact-table td { padding: 10px 12px; font-size: 13px; }

.trend-chart { width: 100%; height: auto; }
.trend-line-main { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.trend-line-control { fill: none; stroke: var(--text-dimmer); stroke-width: 2; stroke-dasharray: 4 3; }
.trend-dot { fill: var(--accent); }
.trend-dot-control { fill: var(--text-dimmer); }
.trend-gridline { stroke: var(--border); stroke-width: 1; opacity: 0.6; }
.trend-area { opacity: 0.10; }
.trend-gap-label { font-size: 10px; font-weight: 700; }
.trend-axis-label { fill: var(--text-dimmer); font-size: 10px; }
.chart-legend { display: flex; gap: 18px; margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.legend-swatch { display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 1px; }
.legend-swatch.legend-main { background: var(--accent); }
/* Dashed, like the comparison line it labels (2026-11-06). */
.legend-swatch.legend-control { background: repeating-linear-gradient(90deg, var(--text-dimmer) 0 4px, transparent 4px 7px); }

.check { color: var(--green); font-weight: 700; }

.quality-summary-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-dim);
}
.quality-highlight { color: var(--green); font-weight: 600; }
.detail-summary { font-size: 13px; color: var(--text-dim); margin-top: 12px; line-height: 1.5; }

/* Engagement Funnel — horizontal bar chart (restored per Denise's request
   to match the reference build's treatment, instead of the plain
   numeric-arrow-chain style this briefly had). Each row's fill width is
   that stage's % of Eligible; the value label sits in the track itself
   (not the fill) so it stays legible even on a short bar like Completed. */
.engagement-funnel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.engagement-funnel-row:last-child { margin-bottom: 0; }
.engagement-funnel-label {
  width: 84px;
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dim);
}
.engagement-funnel-track {
  position: relative;
  flex: 1;
  height: 34px;
  background: var(--panel-2);
  border-radius: 8px;
  overflow: hidden;
}
.engagement-funnel-fill {
  position: absolute;
  inset: 0;
  height: 100%;
  background: var(--accent-dim);
  border-radius: 8px;
}
.engagement-funnel-value {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 12px;
  font-size: 13.5px;
  font-weight: 700;
}
.engagement-funnel-pct {
  width: 64px;
  flex-shrink: 0;
  text-align: right;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
}
.engagement-funnel-arrow { color: var(--text-dimmer); font-weight: 400; }

.channel-bar-row, .stage-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
}
.channel-name, .stage-bar-label { width: 150px; flex-shrink: 0; color: var(--text-dim); }
.channel-bar-track {
  flex: 1;
  height: 8px;
  background: var(--panel-2);
  border-radius: 999px;
  overflow: hidden;
}
.channel-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.channel-bar-fill.before { background: var(--amber); }
.channel-bar-fill.after { background: var(--green); }
.channel-pct { width: 40px; text-align: right; color: var(--text-dim); font-size: 12.5px; }

.stat-row-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-row-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }

/* Cohort Matching tab */

.cohort-matching-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .cohort-matching-layout { grid-template-columns: 1fr; } }

.cohort-var-panel { position: sticky; top: 0; min-width: 0; }
.cohort-results-panel { min-width: 0; }
.match-var-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dimmer);
  margin: 16px 0 8px;
}
.match-var-group-label:first-of-type { margin-top: 4px; }
.match-var-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 4px;
  font-size: 13.5px;
  cursor: pointer;
  border-radius: 7px;
}
.match-var-row:hover { background: var(--panel-2); }
.match-var-checkbox { width: 15px; height: 15px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }

.cohort-results-panel .stat-row { margin-bottom: 16px; }

.cohort-balance-banner {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-dim);
}

.balance-pill { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.balance-pill.balanced { background: var(--green-dim); color: var(--green); }
.balance-pill.marginal { background: var(--amber-dim); color: var(--amber); }
.balance-pill.unbalanced { background: var(--red-dim); color: var(--red); }

.validity-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.validity-row:last-child { border-bottom: none; }

/* ---------- Plan-side employer Outcomes Report (2026-09-22; restructured
   2026-09-23) ----------
   Landing table (#employerOutcomesReport) reuses the plan-wide Programs
   table's own classes (.table-card, .data-table, .row-name-cell, etc.) —
   no new rules needed there. view-employer-program-report reuses Program
   Detail's back-link/program-switcher/detail-title-row styles above. This
   app scopes .hidden per element type (.view.hidden, .nav-item.hidden,
   etc.) rather than as a generic utility class — these two need their own
   rule for the same reason, or toggling the class does nothing visually. */
#planPortfolioSection.hidden, #employerOutcomesReport.hidden { display: none; }

/* ---------- Vendor-level selection (Results tab) ---------- */

.vendor-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.vendor-single-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 0;
  font-size: 14px;
}
tr.vendor-row-active td { background: var(--accent-dim); }

/* ---------- Member Detail tab (cross-program) ---------- */

.program-switcher.hidden { display: none; }

.member-detail-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .member-detail-layout { grid-template-columns: 1fr; } }

.member-detail-filter-panel { position: sticky; top: 0; min-width: 0; }
.member-detail-results { min-width: 0; }

.member-filter-pill { display: inline-flex; align-items: center; gap: 6px; }

/* All six Member Detail filters (Program, Risk Band, Status, Age Band,
   Gender, Condition) are checkbox lists (2026-09-18, Denise — were pill
   buttons for the first three, dropdowns for the last three). Same visual
   language as the Cohort Methodology tab's matching-variable checkboxes
   (.match-var-row/.match-var-checkbox) for consistency across the app. */
.member-filter-checkbox-group { display: flex; flex-direction: column; gap: 1px; margin-bottom: 14px; }
.member-filter-checkbox-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 4px;
  font-size: 13.5px;
  cursor: pointer;
  border-radius: 7px;
}
.member-filter-checkbox-row:hover { background: var(--panel-2); }
.member-filter-checkbox { width: 15px; height: 15px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.member-filter-reset { width: 100%; justify-content: center; margin-top: 4px; }

.member-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.member-detail-count { font-size: 13px; color: var(--text-dim); }

.member-program-cell { display: flex; align-items: center; gap: 8px; }
.member-program-cell .pill-icon { width: 20px; height: 20px; font-size: 11px; flex-shrink: 0; }

/* ---------- Gear icon (sidebar footer) + Platform/Audit modal ---------- */

.sidebar-footer-row { display: flex; align-items: center; gap: 8px; }
.sidebar-footer-row .user-card { flex: 1; min-width: 0; }

.gear-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-dim);
}
.gear-btn:hover { border-color: var(--border-strong); color: var(--text); }

.gear-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 620px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gear-modal.hidden { display: none; }

.gear-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.gear-modal-title { font-weight: 700; font-size: 15px; }

.gear-modal-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 18px 0;
  border-bottom: 1px solid var(--border);
}
.gear-modal-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 12px 10px;
  font-size: 13.5px;
  color: var(--text-dim);
  cursor: pointer;
}
.gear-modal-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

.gear-modal-body { padding: 18px; overflow-y: auto; }

.gear-settings-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.gear-settings-row:last-of-type { border-bottom: none; }

.gear-audit-program-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }

/* ---------- Home view (platform hub) ---------- */

.home-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.home-product-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
}
.home-product-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.home-product-card .row-icon { width: 40px; height: 40px; font-size: 17px; }

.home-product-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-product-title { font-weight: 700; font-size: 14.5px; }
.home-product-title .nav-external-icon { margin-left: 4px; font-size: 11px; opacity: 0.55; }
.home-product-title .coming-soon-badge { margin-left: 6px; vertical-align: middle; }
.home-product-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }

.coming-soon-badge {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dimmer);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}
.validity-row span { color: var(--text-dim); }


/* ---------- Cohort Methodology: simulated analysis engine (2026-10-05) ---------- */

.cohort-sim-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.sim-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--amber);
  background: var(--amber-dim);
  border: 1px solid rgba(217,105,11,0.3);
  cursor: help;
}
.cohort-sim-status { font-size: 12.5px; color: var(--text-dim); }

.cohort-run-controls { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.btn-run {
  width: 100%;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-run:hover:not(:disabled) { filter: brightness(1.08); }
.btn-run:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-run.attention { box-shadow: 0 0 0 3px var(--accent-dim); }
.cohort-run-note { margin-top: 9px; font-size: 12px; color: var(--text-dimmer); line-height: 1.4; }
.cohort-run-note.dirty { color: var(--amber); font-weight: 600; }

#cohortResultsBody { transition: opacity 0.2s ease; }
#cohortResultsBody.stale { opacity: 0.5; }

.run-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: run-spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes run-spin { to { transform: rotate(360deg); } }

.cohort-running { padding: 22px; }
.run-progress {
  height: 6px;
  background: var(--panel-2);
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0 18px;
}
.run-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.9s ease;
}
.run-steps { list-style: none; margin: 0; padding: 0; }
.run-steps li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; }
.run-steps li.done { color: var(--text-dim); }
.run-steps li.active { color: var(--text); font-weight: 600; }
.run-steps li.pending { color: var(--text-dimmer); }
.run-step-icon { width: 16px; text-align: center; color: var(--accent); flex-shrink: 0; }
.run-steps li.done .run-step-icon { color: var(--green); font-weight: 700; }
.run-steps li.pending .run-step-icon { color: var(--text-dimmer); }

.cohort-run-summary {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0 0 12px;
}
.cohort-run-summary strong { color: var(--text); }

.love-plot, .overlap-plot { width: 100%; max-width: 680px; min-width: 560px; height: auto; display: block; margin: 0 auto; }
.cohort-chart-scroll { overflow-x: auto; }
.love-grid { stroke: var(--border); stroke-width: 1; }
.love-tick { font-size: 11px; fill: var(--text-dimmer); }
.love-axis-title { font-size: 11.5px; fill: var(--text-dim); }
.love-label { font-size: 12px; fill: var(--text); }
.love-label-dim { fill: var(--text-dimmer); }
.love-link { stroke: var(--border-strong); stroke-width: 1.5; }
.love-before { fill: var(--panel); stroke: var(--text-dim); stroke-width: 1.8; }
.love-after { stroke: var(--panel); stroke-width: 1.5; }
.love-threshold { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 4 3; }
.love-threshold-label { font-size: 10.5px; fill: var(--text-dim); font-weight: 600; }
.overlap-title { font-size: 12.5px; font-weight: 700; fill: var(--text); }
.overlap-comp-area { fill: var(--accent); fill-opacity: 0.22; }
.overlap-comp-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.overlap-pool-area { fill: var(--text-dimmer); fill-opacity: 0.25; }
.overlap-pool-line { fill: none; stroke: var(--text-dim); stroke-width: 2; }
.overlap-matched-area { fill: var(--green); fill-opacity: 0.2; }
.overlap-matched-line { fill: none; stroke: var(--green); stroke-width: 2; }
.overlap-swatch-pool { background: var(--text-dim); }
.overlap-swatch-matched { background: var(--green); }

.cohort-spec { padding: 14px 18px; }
.cohort-spec summary { cursor: pointer; margin-bottom: 0; }
.cohort-spec[open] summary { margin-bottom: 10px; }
.cohort-spec-code {
  margin: 0;
  padding: 14px 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}

/* Cohort Comparability: 6 columns must fit the card; scroll only as a last resort */
.cohort-comp-wrap { overflow-x: auto; }
.cohort-comp-table th, .cohort-comp-table td { padding: 10px 8px; }
.cohort-comp-table th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.cohort-comp-table th:first-child, .cohort-comp-table td:first-child { padding-left: 12px; }

/* Cohort Methodology: empty state before the first Run Matching click */
.cohort-empty { text-align: center; padding: 56px 24px; }
.cohort-empty-icon { font-size: 34px; color: var(--text-dimmer); margin-bottom: 10px; line-height: 1; }
.cohort-empty-meta { margin-top: 18px; font-size: 12px; color: var(--text-dim); }

/* Cohort Methodology: results lead with the comparability table; diagnostics follow under a "Technical detail" heading */
.cohort-tech-head { margin: 26px 2px 10px; }
.cohort-tech-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.cohort-tech-sub { font-size: 12px; color: var(--text-dimmer); margin-top: 2px; }

/* ---------- InHouseIQ Placemat tab (Company ABC, 2026-10-05) ---------- */
.pm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.pm-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.pm-kpis .stat-value { font-size: 22px; }
@media (max-width: 1100px) { .pm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pm-findings ul { margin: 6px 0 0; padding-left: 18px; }
.pm-findings li { font-size: 13px; line-height: 1.55; color: var(--text); margin-bottom: 5px; }
.pm-findings li strong { font-weight: 700; }

.pm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(640px, 1fr)); gap: 0 16px; }
@media (max-width: 760px) { .pm-grid { grid-template-columns: 1fr; } }
.pm-card { min-width: 0; }
.pm-card-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.pm-code {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent);
  background: var(--accent-dim); border-radius: 6px; padding: 2px 6px;
}
.pm-table-wrap { overflow-x: auto; }
.pm-table th { white-space: normal; line-height: 1.25; vertical-align: bottom; font-size: 10.5px; padding: 8px 8px; }
.pm-table td { padding: 7px 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pm-table th:first-child, .pm-table td:first-child { padding-left: 10px; }
.pm-table tr.pm-total td { font-weight: 700; border-top: 1.5px solid var(--border-strong); background: var(--panel-2); }
.pm-table td.pm-warm { background: var(--amber-dim); color: #8a3f00; font-weight: 600; }
.pm-table td.pm-hot { background: var(--red-dim); color: #962020; font-weight: 700; }
.pm-bar-cell { display: flex; align-items: center; gap: 6px; min-width: 128px; }
.pm-bar-track { display: inline-flex; width: 56px; flex: 0 0 56px; }
.pm-bar { display: inline-block; height: 9px; border-radius: 3px; background: var(--accent); opacity: 0.75; }
.pm-bar-val { white-space: nowrap; }
.pm-small-n { color: var(--amber); font-weight: 700; cursor: help; }

.pm-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 11.5px; color: var(--text-dim); margin: 2px 2px 8px; }
.pm-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.pm-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.pm-swatch.pm-warm { background: var(--amber-dim); border: 1px solid rgba(217,105,11,0.4); }
.pm-swatch.pm-hot { background: var(--red-dim); border: 1px solid rgba(198,47,47,0.4); }

/* ---------- InHouseIQ Placemat Option 2 (visual story, 2026-10-05) ---------- */
.story-tiles { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 1200px) { .story-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .story-tile-wide { grid-column: span 3; } }
@media (max-width: 640px) { .story-tiles { grid-template-columns: 1fr 1fr; } .story-tile-wide { grid-column: span 2; } }
.story-tile .stat-value { font-size: 22px; }
.story-tile-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.story-tile-row .stat-value { margin-bottom: 0; }
.story-spark { display: block; }
.story-tile-delta { font-size: 13px; font-weight: 600; color: #b55400; margin-left: 4px; }
.story-gauge { height: 8px; background: var(--panel-2); border-radius: 999px; overflow: hidden; margin: 6px 8px 6px; }
.story-gauge-fill { height: 100%; background: #40566c; border-radius: 999px; }
.story-mini-bars { display: flex; flex-direction: column; gap: 4px; margin: 4px 4px 0; font-size: 11px; color: var(--text-dim); }
.story-mini-bars > div { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 6px; text-align: left; }
.story-mini-track { height: 7px; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.story-mini-track > div { height: 100%; background: var(--orange); border-radius: 999px; }
.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: 0 16px; }
@media (max-width: 700px) { .story-grid { grid-template-columns: 1fr; } }
.story-chart-wrap { overflow-x: auto; }
/* Placemat Option 2: bridge chart ~60% + narrative ~40% side by side; stacks
   below 1100px so the chart never gets squeezed. */
.story-bridge-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 0 16px; align-items: stretch; }
.story-bridge-row > .table-card { margin-bottom: 16px; }
.story-bridge-row .pm-findings ul { margin: 8px 0 0; padding-left: 18px; }
.story-bridge-row .pm-findings li { margin-bottom: 8px; line-height: 1.45; }
@media (max-width: 1100px) { .story-bridge-row { grid-template-columns: 1fr; } }
.story-chart { display: block; width: 100%; max-width: 100%; height: auto; min-width: 480px; }
.story-chips { display: inline-flex; gap: 6px; background: var(--panel-2); padding: 4px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 8px; }

/* Program evaluation result pills (2026-11-04). Only a finding gets a strong
   color: savings green, cost increase red; non-findings stay neutral. */
.result-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.result-pill.res-savings { background: var(--green-dim); color: var(--green); }
.result-pill.res-increase { background: var(--red-dim); color: var(--red); }
.result-pill.res-inconclusive { background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--border); }
.result-pill.res-insufficient { background: var(--panel-2); color: var(--text-dimmer); border: 1px dashed var(--border-strong); }
.result-pill.res-balance { background: var(--amber-dim); color: var(--amber); }

/* InHouseIQ client treemap and table sparklines (2026-11-05) */
.tm-wrap { position:relative; width:100%; height:380px; margin-top:10px; border-radius:8px; overflow:hidden; }
.tm-tile { position:absolute; border:1.5px solid #fff; padding:6px 8px; text-align:left; color:#fff; cursor:pointer; font:inherit; display:flex; flex-direction:column; justify-content:flex-start; overflow:hidden; opacity:.9; transition:opacity .12s; }
.tm-tile:hover { opacity:1; box-shadow:inset 0 0 0 2px #1f3b57; }
.tm-name { font-size:12px; font-weight:700; line-height:1.2; text-shadow:0 1px 1px rgba(0,0,0,.2); }
.tm-sub { font-size:11px; opacity:.92; margin-top:2px; }
.tm-legend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--text-dim); margin-top:10px; align-items:center; }
.tm-note { margin-left:auto; color:var(--text-dimmer); }
.spark-cell { width:120px; }
.spark-cell .hv-spark { width:110px; height:28px; }
@media (max-width: 700px) { .tm-wrap { height:300px; } .tm-note { margin-left:0; } }

/* Illustrative-data label (2026-11-06, Denise): vendor names and results are
   fictional until the team supplies real vendor data. Meant to be seen, so it
   uses HAC orange rather than the usual muted footnote style. */
.illustrative-tag { display:inline-block; vertical-align:middle; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--orange); border-radius:4px; padding:2px 7px; line-height:1.5; }
.illustrative-tag-title { margin-left:8px; position:relative; top:-1px; }
.illustrative-banner { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 4px; padding:10px 12px; background:var(--orange-dim); border:1px solid var(--orange); border-left-width:4px; border-radius:8px; color:var(--text); font-size:13px; line-height:1.45; }
.illustrative-banner strong { font-weight:700; }