/* ============================================================
   SSR Rover — Dark Mode (OLED) / AI–Technological theme
   Token names preserved from the original light theme so all
   downstream component CSS continues to resolve. Only the
   *values* have been retuned for a dark surface, plus a set
   of net-new BPE-inspired tokens (brand-*, glow-*, radius-*,
   bg-canvas/-surface-2/-muted/-hover, border-subtle).
   ============================================================ */
:root {
  /* Surfaces (was: light grays) */
  --bg:            #05070d;   /* deep space — body backdrop */
  --bg-canvas:     #0a0f1e;   /* dashboard canvas */
  --surface:       #0f172a;   /* card surface (was #ffffff) */
  --bg-surface-2:  #111a30;   /* raised surface */
  --bg-muted:      #1a2540;
  --bg-hover:      #1e2a44;

  /* Borders */
  --border:         rgba(148, 163, 184, 0.14);
  --border-strong:  rgba(148, 163, 184, 0.28);
  --border-subtle:  rgba(148, 163, 184, 0.08);

  /* Text */
  --text:           #e2e8f0;
  --text-muted:     #94a3b8;
  --text-disabled:  #475569;

  /* Brand / AI palette */
  --accent:         #22d3ee;   /* primary AI accent — was teal #0e7490 */
  --brand-cyan:     #22d3ee;
  --brand-blue:     #3b82f6;
  --brand-indigo:   #6366f1;
  --brand-violet:   #8b5cf6;
  --brand-fuchsia:  #d946ef;

  /* Semantic (legacy alias names kept) */
  --excellent:      #10b981;
  --stable:         #3b82f6;
  --watch:          #f59e0b;
  --color-success:  #10b981;
  --color-warn:     #f59e0b;
  --color-danger:   #ef4444;
  --color-info:     #3b82f6;

  /* Glow */
  --glow-cyan:    0 0 18px rgba(34, 211, 238, 0.45);
  --glow-blue:    0 0 18px rgba(59, 130, 246, 0.40);
  --glow-violet:  0 0 18px rgba(139, 92, 246, 0.40);
  --glow-amber:   0 0 18px rgba(245, 158, 11, 0.45);
  --glow-danger:  0 0 18px rgba(239, 68, 68, 0.45);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Shadow — dark surfaces want inner highlight + deeper drop */
  --shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 12px 32px -20px rgba(0, 0, 0, 0.65);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family:
    "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(59, 130, 246, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(139, 92, 246, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-canvas) 100%);
  background-attachment: fixed;
}

/* ----- BPE-inspired utility classes ----- */
.bg-grid {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.bg-grid-fade {
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.bg-dots {
  background-image: radial-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px);
  background-size: 20px 20px;
}
.panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 40%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.panel-raised {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 40%),
    var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 20px 40px -24px rgba(0,0,0,0.6);
}
.hairline { border: 1px solid var(--border); }

.text-gradient-ai {
  background: linear-gradient(90deg, #22d3ee 0%, #818cf8 50%, #c084fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ring-ai { position: relative; }
.ring-ai::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(34,211,238,0.6), rgba(139,92,246,0.6), rgba(34,211,238,0) 60%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.92); }
}
@keyframes ai-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.animate-pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; }
.animate-ai-shimmer {
  background: linear-gradient(90deg,
    rgba(34,211,238,0) 0%,
    rgba(34,211,238,0.4) 50%,
    rgba(34,211,238,0) 100%);
  background-size: 200% 100%;
  animation: ai-shimmer 2.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Slim dark scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.18);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.32); }

input, select, textarea { color-scheme: dark; }
select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
  appearance: none;
}
::placeholder { color: var(--text-muted); opacity: 1; }
:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 2px;
}

/* ----- Topbar: glass over deep canvas ----- */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: rgba(10, 15, 30, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 28px -18px rgba(0,0,0,0.8);
}
.brand {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, #22d3ee 0%, #818cf8 55%, #c084fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: none;
  cursor: pointer;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 8px;
  transition: filter 140ms ease, transform 140ms ease, background-color 140ms ease;
}
.brand:hover {
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.45));
  transform: translateY(-0.5px);
}
.brand:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 2px;
}
.brand::before {
  content: "▰";
  -webkit-text-fill-color: initial;
  color: var(--brand-cyan);
  text-shadow: var(--glow-cyan);
  margin-right: 8px;
  transition: text-shadow 140ms ease, transform 140ms ease;
}
.brand:hover::before {
  text-shadow: 0 0 22px rgba(34, 211, 238, 0.75);
  transform: scale(1.05);
}
.topnav {
  display: flex;
  gap: 4px;
  flex: 1;
}
.topnav a {
  padding: 6px 14px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  transition: color 120ms ease, background 120ms ease;
}
.topnav a:hover {
  color: var(--text);
  background: rgba(148, 163, 184, 0.08);
}
.topnav a.active {
  color: var(--accent);
  background: rgba(34, 211, 238, 0.10);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.25);
}
.status {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.06);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.status.ok {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}
.status.err {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}

.page-header { margin-bottom: 20px; }
.page-header h1 {
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.page-header .subtle {
  margin: 0;
  color: var(--text-muted);
}
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.kpi-value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-suffix {
  font-size: 14px;
  color: var(--text-muted);
  margin-left: 2px;
  font-weight: 500;
}
.kpi-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
  font-weight: 500;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 800px) {
  .two-col { grid-template-columns: 1fr; }
}

.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.section-title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.section-body > * + * { margin-top: 12px; }

.band-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.band {
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--border);
}
.band-count {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.band-name {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.band-excellent { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.3); }
.band-excellent .band-count { color: var(--excellent); }
.band-stable { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.3); }
.band-stable .band-count { color: var(--stable); }
.band-watch { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); }
.band-watch .band-count { color: var(--watch); }

.risk-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.risk-excellent { background: rgba(16,185,129,0.12); color: var(--excellent); }
.risk-stable { background: rgba(59,130,246,0.12); color: var(--stable); }
.risk-watch { background: rgba(245,158,11,0.12); color: var(--watch); }

.list { margin: 0; padding-left: 18px; }
.list li { margin: 4px 0; }
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg);
}
.data-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:hover td { background: rgba(34, 211, 238, 0.06); }
.data-table a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.data-table a:hover { text-decoration: underline; }

.bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bar-track {
  height: 8px;
  background: var(--bg);
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 200ms ease;
}
.bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}
.bar-value {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.kpi-grid .kpi {
  padding: 10px 12px;
  box-shadow: none;
  background: var(--bg-surface-2);
  border-color: var(--border);
}
.kpi-grid .kpi-value { font-size: 18px; }
.kpi-grid .kpi-label { margin-top: 2px; }

.subhead {
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.picker {
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  min-width: 280px;
}
.picker:focus {
  outline: 2px solid rgba(34, 211, 238, 0.45);
  outline-offset: -1px;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.10);
}

.loading {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.error {
  padding: 16px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.15);
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* =============================================================================
 * Phase 3 net-new tokens (UI-SPEC §Net-New Tokens lines 73-110)
 *
 * Inherited tokens (NOT redefined here): --bg, --surface, --border, --border-strong,
 * --text, --text-muted, --accent, --excellent, --stable, --watch, --shadow.
 *
 * Phase 3 type contract: 2 weights (400, 600) and 3 sizes (11px, 14px, 16px).
 * No new applications of weights 500 / 700 nor sizes 10 / 12 / 13 / 22 / 24 / 28 px.
 * Brownfield classes (.kpi-value etc.) keep their existing typography unchanged.
 * ============================================================================= */

:root {
  /* Severity bands — dark-mode retune: brand intensities lifted, tinted bgs
     swapped to translucent overlays so they read on the deep canvas. */
  --severity-severe:      #f87171; /* red-400 — at_risk, severe weakness on dark */
  --severity-severe-bg:   rgba(239, 68, 68, 0.12);
  --severity-warning:     #fbbf24; /* amber-400 — lifted from amber-500 for dark */
  --severity-warning-bg:  rgba(245, 158, 11, 0.12);
  --severity-warning-text:#fbbf24; /* light amber — high contrast on dark */
  --severity-neutral:     #94a3b8; /* slate-400 — alias of --text-muted */
  --severity-neutral-bg:  rgba(148, 163, 184, 0.08);
  --severity-strong:      #34d399; /* emerald-400 — lifted from emerald-500 */
  --severity-strong-bg:   rgba(16, 185, 129, 0.12);

  /* Action-loop intensity (LOOP-01 / LOOP-02 / LOOP-03 visual differentiation) */
  --loop-awareness: var(--text-muted);
  --loop-suggest:   var(--accent);
  --loop-auto:      #a78bfa; /* violet-400 — outside the severity palette */

  /* Audit trail */
  --audit-accept:  var(--severity-strong);
  --audit-edit:    var(--accent);
  --audit-dismiss: var(--text-muted);
  --audit-reject:  var(--severity-severe);

  /* Driver-row "why" panel */
  --driver-row-bg:   var(--bg-surface-2);
  --driver-row-rule: var(--border);

  /* Demo-mode banner */
  --demo-banner-bg:   rgba(245, 158, 11, 0.14);
  --demo-banner-text: #fcd34d; /* amber-300 — readable on dark amber tint */

  /* Spacing scale (4-multiple, named tokens for Phase 3 components) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;
}

/* Phase 3 risk-badge band extensions (Component #2). Brownfield .risk-* classes
 * are preserved; the new bands map AI-01's 4-tier scheme onto severity tokens. */
.risk-at_risk  { background: var(--severity-severe-bg);  color: var(--severity-severe); }
.risk-monitor  { background: var(--severity-warning-bg); color: var(--severity-warning-text); }
.risk-on_track { background: var(--severity-strong-bg);  color: var(--severity-strong); }
.risk-insufficient_data { background: var(--severity-neutral-bg); color: var(--severity-neutral); }

/* ---------------------------------------------------------------------------
 * Briefing Card (Component #1)
 * --------------------------------------------------------------------------- */

.briefing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--severity-warning);
  border-radius: 8px;
  padding: var(--space-md) var(--space-lg);
  box-shadow: var(--shadow);
  margin-bottom: var(--space-md);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.briefing-card[data-flag="at_risk"] { border-left-color: var(--severity-severe); }
.briefing-card[data-flag="monitor"] { border-left-color: var(--severity-warning); }

.briefing-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.briefing-card__name {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.briefing-card__name:hover { text-decoration: underline; }
.briefing-card__streamtag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  font-weight: 400;
}
.briefing-card__newpill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--severity-severe-bg);
  color: var(--severity-severe);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.briefing-card__newpill--recurring {
  background: var(--severity-warning-bg);
  color: var(--severity-warning-text);
}
.briefing-card__newpill--ack {
  background: var(--severity-neutral-bg);
  color: var(--severity-neutral);
}
.briefing-card__withdrawn-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--severity-neutral-bg);
  color: var(--severity-neutral);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.page--trainer-trainee .withdrawn-chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--severity-neutral-bg);
  color: var(--severity-neutral);
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-left: var(--space-sm);
  vertical-align: middle;
}
.briefing-card__summary {
  margin: 0 0 var(--space-md);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.5;
}
.briefing-card__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-sm);
}
.briefing-card__showwhy,
.briefing-card__ack,
.briefing-card__dismiss {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  min-height: 32px;
}
.briefing-card__ack {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.briefing-card__ack:hover { filter: brightness(0.92); }
.briefing-card__showwhy:hover,
.briefing-card__dismiss:hover { background: var(--bg); }
.briefing-card__showwhy:focus-visible,
.briefing-card__ack:focus-visible,
.briefing-card__dismiss:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.45);
  outline-offset: -1px;
  border-color: var(--accent);
}
.briefing-card--read { /* default state — no extra styling */ }
.briefing-card--acknowledged { opacity: 0.85; }
.briefing-card--acknowledged .briefing-card__newpill {
  background: var(--severity-neutral-bg);
  color: var(--severity-neutral);
}
.briefing-card--skeleton .briefing-card__name,
.briefing-card--skeleton .briefing-card__summary {
  background: var(--bg);
  color: transparent;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
 * Briefing Group sections (Active cohort vs Retrospective evidence)
 *
 * Two labelled sections wrap the briefing-card lists on the trainer briefing
 * page. The "active" section uses a teal accent matching the AI signal-ok
 * palette; the "retrospective" section uses a muted neutral border + subtle
 * ribbon shading so the historical WD-* cards read as clearly grouped
 * evidence, not today's working list.
 * --------------------------------------------------------------------------- */
.briefing-group {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xl, var(--space-lg));
  border-radius: 10px;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}
.briefing-group--active {
  border-left: 3px solid #22d3ee;
}
.briefing-group--retrospective {
  border-left: 3px solid #94a3b8;
  background: linear-gradient(
    180deg,
    rgba(148, 163, 184, 0.04) 0%,
    rgba(148, 163, 184, 0.00) 64px
  ), var(--surface);
}
.briefing-group__head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "eyebrow count"
    "title   count"
    "lead    lead";
  gap: 2px var(--space-sm);
  margin-bottom: var(--space-md);
}
.briefing-group__eyebrow {
  grid-area: eyebrow;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.briefing-group--retrospective .briefing-group__eyebrow {
  color: #64748b;
}
.briefing-group--active .briefing-group__eyebrow {
  color: #0e7490;
}
.briefing-group__title {
  grid-area: title;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.briefing-group__count {
  grid-area: count;
  align-self: start;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.briefing-group--active .briefing-group__count {
  background: rgba(34, 211, 238, 0.10);
  border-color: rgba(34, 211, 238, 0.30);
  color: #0e7490;
}
.briefing-group--retrospective .briefing-group__count {
  background: rgba(148, 163, 184, 0.10);
  border-color: rgba(148, 163, 184, 0.30);
  color: #475569;
}
.briefing-group__lead {
  grid-area: lead;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 72ch;
}
.briefing-group__empty {
  margin: var(--space-sm) 0 var(--space-md);
  padding: var(--space-md);
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  line-height: 1.5;
}
.briefing-list--grouped {
  margin-top: 0;
}
/* Retrospective WD-* cards: subtle neutral ribbon so a presenter reading
 * the page knows at a glance these are historical evidence, not today's
 * working list. */
.briefing-group--retrospective .briefing-card {
  border-left-color: #94a3b8;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.06) 0,
    rgba(148, 163, 184, 0.00) 28px
  ), var(--surface);
}
.briefing-group--retrospective .briefing-card[data-flag="at_risk"] {
  border-left-color: #94a3b8;
}

.drivers-panel {
  display: none;
  margin-top: var(--space-sm);
  border-top: 1px solid var(--driver-row-rule);
  padding-top: var(--space-sm);
}
.driver-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  padding: 6px var(--space-sm);
  background: var(--driver-row-bg);
  border-bottom: 1px solid var(--driver-row-rule);
  font-size: 14px;
  font-weight: 400;
}
.driver-row:last-child { border-bottom: 0; }
.driver-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text);
  font-weight: 400;
}
.driver-value {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text);
  text-align: right;
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
 * Severity Chip (Component #3)
 * --------------------------------------------------------------------------- */

.severity-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: var(--severity-neutral-bg);
  color: var(--severity-neutral);
  margin: 2px 4px 2px 0;
}
.severity-chip__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.severity-chip__value {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  margin-left: var(--space-xs);
}
.severity-chip--severe   { background: var(--severity-severe-bg);  color: var(--severity-severe); }
.severity-chip--weakness { background: var(--severity-warning-bg); color: var(--severity-warning-text); }
.severity-chip--weakness .severity-chip__dot { background: var(--severity-warning); }
.severity-chip--neutral  { background: var(--severity-neutral-bg); color: var(--severity-neutral); }
.severity-chip--strength { background: var(--severity-strong-bg);  color: var(--severity-strong); }

/* ---------------------------------------------------------------------------
 * Audit Badge (Component #6)
 * --------------------------------------------------------------------------- */

.audit-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.audit-badge__glyph { font-weight: 600; }
.audit-badge--accept  { color: var(--audit-accept); }
.audit-badge--edit    { color: var(--audit-edit); }
.audit-badge--dismiss { color: var(--audit-dismiss); }
.audit-badge--reject  { color: var(--audit-reject); }

/* ---------------------------------------------------------------------------
 * Audit Timeline (Component #7)
 * --------------------------------------------------------------------------- */

.audit-timeline {
  margin-top: var(--space-md);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: var(--space-md) var(--space-lg);
}
.audit-timeline > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  list-style: none;
}
.audit-timeline > summary::-webkit-details-marker { display: none; }
.audit-timeline > summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: var(--space-xs);
}
.audit-timeline[open] > summary::before { content: "▾ "; }
.audit-timeline__list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
}
.audit-timeline__entry {
  position: relative;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  border-left: 2px solid var(--border);
  font-size: 14px;
  font-weight: 400;
}
.audit-timeline__entry::before {
  content: "●";
  position: absolute;
  left: -7px;
  top: var(--space-sm);
  color: var(--text-muted);
  font-size: 11px;
}
.audit-timeline__time {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 11px;
  margin-left: var(--space-sm);
}
.audit-timeline__field {
  display: block;
  font-size: 14px;
  color: var(--text);
  margin-top: 2px;
}
.audit-timeline__field-label {
  color: var(--text-muted);
  font-weight: 600;
  margin-right: var(--space-xs);
}
.audit-entry__rationale {
  margin: var(--space-xs) 0 0;
  font-size: 14px;
  color: var(--text);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
 * Trajectory Chart (Component #12)
 * --------------------------------------------------------------------------- */

.trajectory-chart {
  display: block;
  width: 200px;
  height: 48px;
}
.trajectory-empty {
  width: 200px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
  padding: 0 var(--space-sm);
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * Demo Banner (Component #10)
 * --------------------------------------------------------------------------- */

.demo-banner {
  background: var(--demo-banner-bg);
  color: var(--demo-banner-text);
  padding: var(--space-md) var(--space-2xl);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(146,64,14,0.2);
  position: sticky;
  top: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.demo-banner__icon { font-weight: 600; }
.demo-banner__text { font-weight: 400; }

/* ---------------------------------------------------------------------------
 * Loop Mode Toggle (Component #4)
 * --------------------------------------------------------------------------- */

.loop-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 2px;
  background: var(--bg);
  max-width: 360px;
  margin: var(--space-sm) 0;
  gap: 0;
}
.loop-mode-toggle__btn {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 6px var(--space-md);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  min-height: 32px;
}
.loop-mode-toggle__btn:hover { background: var(--bg); color: var(--text); }
.loop-mode-toggle__btn--active {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.loop-mode-toggle__btn:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.45);
  outline-offset: -1px;
}

/* ---------------------------------------------------------------------------
 * Severity strip / KPI variants for trainer view
 * --------------------------------------------------------------------------- */

.severity-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-sm) 0;
}

/* ===========================================================================
 * Phase 3 LOOP-02/03 surface (plan 03-06) — SuggestionStrip (#5),
 * PlanCard (#8), Reject confirmation modal, Next-week button,
 * intervention list, plan-card list.
 *
 * Type contract: 2 weights (400/600), 3 sizes (11px / 14px / 16px).
 * No new tokens introduced — every colour reuses Phase-3 var(--*) palette.
 * =========================================================================== */

/* SuggestionStrip (Component #5) — at_risk briefing card extension. */
.suggestion-strip {
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: 14px;
  font-weight: 400;
}
.suggestion-strip__lead {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.suggestion-strip__text { font-size: 14px; font-weight: 400; color: var(--text); }
.suggestion-strip__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.suggestion-strip__edit-text,
.suggestion-strip__rationale {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: 4px;
  resize: vertical;
  min-height: 48px;
}
.suggestion-strip__inline-error {
  background: var(--severity-severe-bg);
  color: var(--severity-severe);
  padding: var(--space-sm) var(--space-md);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
}
.suggestion-strip__consumed {
  background: var(--severity-warning-bg);
  color: var(--severity-warning-text);
  padding: var(--space-sm) var(--space-md);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
}
.suggestion-strip--editing,
.suggestion-strip--dismissing,
.suggestion-strip__editing,
.suggestion-strip__dismissing { border-left-color: var(--accent); }
.suggestion-strip--throttled {
  border-left-color: var(--severity-warning);
  opacity: 0.85;
}

/* LOOP-03 generate-plan affordance on at_risk briefing cards (aiAuto mode). */
.loop3-generate-row {
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.loop3-generate-row__btn {
  border-left: 4px solid var(--loop-auto);
  padding-left: var(--space-md);
}
.loop3-generate-row__status { font-size: 14px; font-weight: 400; color: var(--text-muted); }

/* PlanCard (Component #8) — LOOP-03 staged plan with violet chrome. */
.plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--loop-auto);
  border-radius: 8px;
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  position: relative;
  font-size: 14px;
  font-weight: 400;
}
.plan-card--staged    { border-left-color: var(--loop-auto); }
.plan-card--approved  { border-left-color: var(--severity-strong); }
.plan-card--rejected  { border-left-color: var(--severity-severe); }
.plan-card--editing   { background: var(--bg); }

.plan-card__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.plan-card__list-wrap { margin: var(--space-sm) 0; }
.plan-card__list-heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.plan-card__list {
  list-style: none;
  padding: 0;
  margin: var(--space-xs) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.plan-card__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
}
.plan-card__list-empty {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  font-style: italic;
}
.plan-card__remove-btn {
  border: 0;
  background: transparent;
  color: var(--severity-severe);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px var(--space-xs);
  font-family: inherit;
  border-radius: 4px;
}
.plan-card__remove-btn:hover { background: var(--severity-severe-bg); }

.plan-card__rationale {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
}
.plan-card__rationale p { margin: 0 0 var(--space-sm); }
.plan-card__rationale p:last-child { margin: 0; }

.plan-card__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}
.plan-card__error {
  background: var(--severity-severe-bg);
  color: var(--severity-severe);
  padding: var(--space-sm) var(--space-md);
  border-radius: 4px;
  font-size: 14px;
  margin-top: var(--space-sm);
}

/* Reject confirmation modal — UI-SPEC §Destructive confirmation. */
.modal-confirm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 90vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--severity-severe);
  border-radius: 8px;
  padding: var(--space-lg) var(--space-2xl);
  z-index: 100;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 20px 48px -20px rgba(0,0,0,0.8);
  font-size: 14px;
  font-weight: 400;
}
.modal-confirm__heading {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}
.modal-confirm__body {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}
.modal-confirm__rationale {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: 4px;
  min-height: 72px;
  margin-bottom: var(--space-sm);
  resize: vertical;
}
.modal-confirm__error {
  background: var(--severity-severe-bg);
  color: var(--severity-severe);
  padding: var(--space-sm) var(--space-md);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: var(--space-sm);
}
.modal-confirm__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

/* Demo banner — Next-week button (Component #10 extension, plan 03-06). */
.demo-banner__next-week-btn {
  margin-left: auto;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--demo-banner-text);
  padding: 4px var(--space-md);
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.demo-banner__next-week-btn:hover { background: rgba(146,64,14,0.08); }
.demo-banner__next-week-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* LOOP-02 intervention queue page (#/trainer/interventions). */
.intervention-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.intervention-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: var(--space-md) var(--space-lg);
  font-size: 14px;
  font-weight: 400;
}
.intervention-row__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}
.intervention-row__trainee-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.intervention-row__status {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.intervention-row__title { font-size: 14px; font-weight: 600; margin-bottom: var(--space-xs); }
.intervention-row__notes {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  margin: var(--space-xs) 0;
}
.intervention-row__meta { font-size: 11px; font-weight: 400; }

/* LOOP-03 staged-plans list page (#/trainer/loop3/staged). */
.plan-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Phase-3 button helpers (used by SuggestionStrip + PlanCard). */
.btn-primary, .btn-secondary, .btn-tertiary, .btn-danger {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  padding: 6px var(--space-md);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  min-height: 32px;
}
.btn-primary {
  background: var(--accent);
  color: var(--surface);
  border-color: var(--accent);
}
.btn-primary:hover { filter: brightness(0.92); }
.btn-secondary { background: var(--surface); color: var(--text); }
.btn-secondary:hover { background: var(--bg); }
.btn-tertiary { background: transparent; border-color: transparent; color: var(--accent); }
.btn-danger {
  background: var(--severity-severe);
  color: var(--surface);
  border-color: var(--severity-severe);
}
.btn-danger:hover { filter: brightness(0.92); }
.btn-primary:disabled, .btn-secondary:disabled,
.btn-tertiary:disabled, .btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =============================================================================
 * Phase 4 net-new tokens (appended to :root after the Phase-3 block).
 *
 * Inherited tokens (NOT redefined): all Phase-3 tokens (--severity-*, --space-*,
 * --loop-*, --audit-*, --demo-banner-*) and all brownfield tokens (--bg,
 * --surface, --text, --accent, --excellent, --stable, --watch, --shadow, etc.).
 *
 * Phase 4 type contract: same as Phase 3 — 2 weights (400, 600) and 3 sizes
 * (11px, 14px, 16px). No new applications of weights 500 / 700 nor sizes
 * 10 / 12 / 13 / 22 / 24 / 28 px in Phase-4 net-new components.
 * ============================================================================= */
:root {
  /* Persona accent — POLICY MAKER (indigo/violet on dark; distinct from cyan accent) */
  --policy-accent:        #818cf8; /* indigo-400 — readable on dark canvas */
  --policy-accent-bg:     rgba(99, 102, 241, 0.14);
  --policy-accent-text:   #c7d2fe; /* indigo-200 */
  --policy-accent-strong: #a5b4fc; /* indigo-300 */

  /* DEMO-02 silent-degradation cost emphasis */
  --equipment-cost-bg:    rgba(245, 158, 11, 0.14);
  --equipment-cost-text:  #fcd34d; /* amber-300 */
  --equipment-silent-rule:#f59e0b; /* amber-500 — rule weight on dark */

  /* DEMO-03 module-of-concern highlight (pink on dark) */
  --module-flag:          #f472b6; /* pink-400 */
  --module-flag-bg:       rgba(244, 114, 182, 0.12);
  --module-flag-text:     #fbcfe8; /* pink-200 */

  /* K-anonymity suppression rendering */
  --suppressed-bg:        rgba(148, 163, 184, 0.06);
  --suppressed-text:      #94a3b8;
  --suppressed-rule:      rgba(148, 163, 184, 0.28);

  /* Snapshot badge */
  --snapshot-bg:          rgba(148, 163, 184, 0.08);
  --snapshot-text:        #cbd5e1; /* slate-300 */
}

/* ----- Snapshot badge ------------------------------------------------------ */
.snapshot-badge {
  display: inline-block;
  background: var(--snapshot-bg);
  color: var(--snapshot-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 2px var(--space-sm);
  border-radius: 4px;
  border-left: 1px solid var(--border);
  letter-spacing: 0.02em;
}
.snapshot-badge--trainer {
  border-left-color: var(--accent);
}
.snapshot-badge--policy {
  border-left-color: var(--policy-accent);
}

/* ----- KPI tile (Component #1) -------------------------------------------- */
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--space-lg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.kpi-card .kpi-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.kpi-card .kpi-meta {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.kpi-card.kpi-card--suppressed .kpi-value {
  color: var(--suppressed-text);
  opacity: 0.6;
}
.kpi-suppressed {
  color: var(--suppressed-text);
}
.kpi-drivers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
}

/* Driver tag — composes brownfield .tag visual cadence with policy accent */
.driver-tag {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 2px var(--space-sm);
  border-radius: 4px;
  background: var(--policy-accent-bg);
  color: var(--policy-accent-text);
  border: 1px solid rgba(129, 140, 248, 0.4);
}

/* Suppressed-cell rendering (k-anonymity floor cell text/background) */
.cell-suppressed {
  background: var(--suppressed-bg);
  color: var(--suppressed-text);
}

/* ----- Histogram (Component #5) ------------------------------------------- */
.cohort-risk-histogram {
  display: block;
  max-width: 100%;
}
.histogram-empty {
  font-size: 14px;
  color: var(--text-muted);
}
.histogram-bar { /* solid-fill bars get their fill via SVG attr */ }
.histogram-bar--suppressed { /* hatched fill via url(#suppressed-hatch) */ }
.histogram-count { font-variant-numeric: tabular-nums; }
.histogram-binlabel { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.histogram-sample { font-variant-numeric: tabular-nums; }

/* ----- Sparkline (Component #6) ------------------------------------------- */
.sparkline {
  display: block;
  max-width: 100%;
}
.sparkline-empty {
  font-size: 14px;
  color: var(--text-muted);
}
.sparkline-dot { /* solid endpoint dot — fill set inline */ }
.sparkline-suppressed { /* no-fill 2px circle at midpoint */ }

/* ----- Bar chart (Component #7) ------------------------------------------- */
.bar-chart {
  display: block;
  max-width: 100%;
}
.bar-chart-empty {
  font-size: 14px;
  color: var(--text-muted);
}
.bar-chart-row { /* default bar — gray fill via SVG attr */ }
.bar-chart-row--top {
  /* Top-ranked module — fill set to var(--module-flag) on the SVG attr */
}
.bar-chart-row--suppressed { /* hatched */ }
.bar-chart-label { font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-chart-value { font-variant-numeric: tabular-nums; }

/* ----- Persona-aware topbar active state + page header -------------------- */
body[data-persona="policy"] .topnav a.active {
  color: var(--policy-accent);
  background: rgba(129, 140, 248, 0.12);
  box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.28);
}
body[data-persona="trainer"] .topnav a.active {
  color: var(--accent);
  background: rgba(34, 211, 238, 0.10);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.25);
}
body[data-persona="policy"] .page-header h1::after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  background: var(--policy-accent);
  margin-top: var(--space-xs);
}

/* Page-level layout helpers reused on policy.js */
.page--policy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}
.warning-banner {
  background: var(--severity-warning-bg);
  color: var(--severity-warning-text);
  border-left: 4px solid var(--severity-warning);
  padding: var(--space-md) var(--space-lg);
  font-size: 14px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
 * Equipment ROI Panel (Component #2 — DEMO-02 visual hero, plan 04-04)
 * --------------------------------------------------------------------------- */

.equipment-roi-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.equipment-roi__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 0;
}
.equipment-roi__empty-head {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.equipment-roi__empty-body {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.equipment-roi-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--equipment-silent-rule);
  border-radius: 6px;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: 14px;
  font-weight: 400;
}
.equipment-roi-row--silent       { border-left-color: var(--equipment-silent-rule); }
.equipment-roi-row--confirmed    { border-left-color: var(--severity-severe); }
.equipment-roi-row--acknowledged { border-left-color: var(--audit-accept); }
.equipment-roi-row--suppressed   { border-left-color: var(--suppressed-rule); }

.equipment-roi-row__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.equipment-roi-row__id {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.equipment-roi-row__cost {
  /* Inline `style` set in JS to bind the colour tokens — defensive against
   * a future CSS purge that drops the rule. The class still carries the
   * shape contract (padding, radius). */
  padding: 4px var(--space-md);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.equipment-roi-row__cost.cell-suppressed {
  background: var(--suppressed-bg);
  color: var(--suppressed-text);
}

.equipment-roi-row__breakdown {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

.equipment-roi-row__formula-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.equipment-roi-row__formula-toggle {
  align-self: flex-start;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  padding: 4px var(--space-md);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-muted);
}
.equipment-roi-row__formula-toggle:hover { background: var(--bg); color: var(--text); }
.equipment-roi-row__formula {
  background: var(--equipment-cost-bg);
  color: var(--equipment-cost-text);
  padding: var(--space-sm) var(--space-md);
  border-radius: 4px;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.5;
}

.equipment-roi-row__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
}
.equipment-roi-row__ack {
  background: var(--policy-accent);
  color: var(--surface);
  border-color: var(--policy-accent);
}
.equipment-roi-row__ack:hover { filter: brightness(0.92); }
.equipment-roi-row__evidence {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.equipment-roi-row__error {
  background: var(--severity-severe-bg);
  color: var(--severity-severe);
  padding: var(--space-sm) var(--space-md);
  border-radius: 4px;
  font-size: 14px;
}

.equipment-roi-row__audit-footer {
  background: var(--severity-strong-bg);
  color: var(--audit-accept);
  padding: var(--space-sm) var(--space-md);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
 * Phase 4 plan 04-05 — RedesignSuggestionCard (Component #4) +
 * CurriculumSignalPanel (Component #3) net-new styles.
 * ========================================================================== */

/* Primary button policy-accent indigo modifier — composes .btn-primary. */
.btn-primary.policy-accent {
  background: var(--policy-accent);
  border-color: var(--policy-accent);
  color: #ffffff;
}
.btn-primary.policy-accent:hover { background: var(--policy-accent-strong); }

/* Redesign suggestion card — CTA + audit-footer surface. */
.redesign-card__ctas {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.redesign-card__revise-wrap {
  margin-top: var(--space-sm);
}
.redesign-card__revise {
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
  padding: 4px 0;
}

/* Audit footers — flagged (green check) / dismissed (muted gray). */
.audit-footer {
  padding: var(--space-sm) var(--space-md);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-md);
}
.audit-footer--flagged {
  background: var(--severity-strong-bg);
  color: var(--audit-accept);
}
.audit-footer--dismissed {
  background: var(--bg);
  color: var(--text-muted);
}
.audit-footer__rationale {
  color: var(--text-muted);
  font-weight: 400;
  margin-top: var(--space-xs);
}

/* Curriculum signal panel — caveat + stat rows. */
.curriculum-signal-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--module-flag);
  border-radius: 6px;
  padding: var(--space-lg) var(--space-xl);
}
.curriculum-signal-panel .eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.caveat {
  background: var(--module-flag-bg);
  color: var(--module-flag-text);
  border-left: 4px solid var(--module-flag);
  padding: var(--space-md) var(--space-lg);
  border-radius: 4px;
  margin-bottom: var(--space-lg);
  font-size: 14px;
  font-weight: 400;
}
.caveat-warn {
  /* slightly stronger pink tint when n < 10 */
  background: var(--module-flag);
  color: #ffffff;
}
.curriculum-stat-rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-lg);
  row-gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.curriculum-stat-rows dt {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 400;
}
.curriculum-stat-rows dd {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.curriculum-signal-panel .subhead {
  font-size: 14px;
  font-weight: 600;
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}
.curriculum-signal-panel .redesign-action,
.curriculum-signal-panel .redesign-rationale,
.curriculum-signal-panel .what-would-change {
  font-size: 14px;
  font-weight: 400;
  margin: 0;
}
.curriculum-signal-panel .what-would-change {
  color: var(--text-muted);
}
.curriculum-empty {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: var(--space-lg) var(--space-xl);
}
.curriculum-empty h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 var(--space-xs);
}

.disclosure-btn {
  background: transparent;
  border: 0;
  color: var(--policy-accent);
  font-size: 14px;
  font-weight: 600;
  padding: var(--space-sm) 0;
  margin-top: var(--space-md);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
}
.disclosure-btn:hover { color: var(--policy-accent-strong); }

/* Visually-hidden helper text for screen readers (aria-describedby targets). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
 * Phase 5 plan 05-04 — Trainee Self-Service View (VIEW-02)
 * UI-SPEC §4.1, §4.2, §5.1, §6.1-§6.7, §8.7
 *
 * GOODHART-SAFE COLOR CONTRACT (UI-SPEC §4.2):
 *   No --severity-* token may appear in any rule under
 *   body[data-persona="trainee"]. Severity-red palette is the trainer's
 *   vocabulary; the trainee surface uses --trainee-accent (emerald-700)
 *   for the SOLE chromatic emphasis (the "improving" direction arrow on
 *   watch-signal rows). Asymmetric on purpose: improving celebrated,
 *   declining left visually neutral.
 *
 *   Test enforced: tests/me/ui/severityColorScope.test.mjs Test 6 — a
 *   structural CSS-scope scan that fails the build the moment any future
 *   PR adds a --severity-* reference under the trainee scope.
 *
 * SCOPE STRATEGY:
 *   The 4 --trainee-accent-* tokens are declared ONLY under
 *   body[data-persona="trainee"] — never as global :root tokens. Trainer
 *   and policy chrome cannot accidentally inherit them (T-05-04-05).
 * ============================================================================ */

body[data-persona="trainee"] {
  /* Trainee persona — emerald accent retuned for dark canvas. */
  --trainee-accent:        #34d399; /* emerald-400, ~5.6:1 on bg-canvas */
  --trainee-accent-bg:     rgba(16, 185, 129, 0.12); /* growth-card hover surface */
  --trainee-accent-text:   #a7f3d0; /* emerald-200, high contrast on dark */
  --trainee-accent-strong: #6ee7b7; /* emerald-300, pressed-state intensification */
}

/* Persona-aware topnav active state — mirror the Phase 4 plan 04-03 trainer/
   policy pattern (see lines 1295-1303). */
body[data-persona="trainee"] .topnav a.active {
  color: var(--trainee-accent);
  background: rgba(52, 211, 153, 0.12);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.28);
}

/* Page shell — single-column max-width 720px (UI-SPEC §5.1). The trainee
   surface is structurally narrower than the trainer/policy 1280px layouts;
   this is the central layout-defence against per-trainee surveillance
   density that wider layouts encourage. */
body[data-persona="trainee"] .page--me {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  max-width: 720px;
  margin: var(--space-4xl) auto 0;
  padding: 0 var(--space-2xl);
}

/* Narrative header — 28px display role (UI-SPEC §3 — the only addition to
   the brownfield 11/14/16 type contract; justified by the trainee surface's
   editorial-tone narrative-first hierarchy). */
body[data-persona="trainee"] .narrative-header {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 var(--space-md);
}

/* Narrative panel surface (UI-SPEC §6.1). */
body[data-persona="trainee"] .narrative-panel {
  background: var(--surface);
  padding: var(--space-xl);
  border-radius: var(--space-md);
  box-shadow: var(--shadow);
}
body[data-persona="trainee"] .narrative-panel .narrative-body {
  font-size: 14px;
  line-height: 1.5;
  max-width: 64ch;
  color: var(--text);
  margin: 0 0 var(--space-lg);
}

/* Watch-signals panel + per-row layout (UI-SPEC §6.2). */
body[data-persona="trainee"] .watch-signals-panel {
  background: var(--surface);
  padding: var(--space-xl);
  border-radius: var(--space-md);
  box-shadow: var(--shadow);
}
body[data-persona="trainee"] .watch-signal-row {
  display: grid;
  grid-template-columns: 1fr auto 14px 80px;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
}
body[data-persona="trainee"] .watch-signal-row:last-child {
  border-bottom: none;
}
body[data-persona="trainee"] .watch-signal__name {
  font-size: 14px;
  color: var(--text);
}
body[data-persona="trainee"] .watch-signal__direction {
  font-size: 14px;
  color: var(--text-muted);  /* declining + stable both neutral by default */
}
body[data-persona="trainee"] .watch-signal__direction--improving {
  color: var(--trainee-accent);  /* the SOLE chromatic emphasis */
}
body[data-persona="trainee"] .watch-signal__sparkline {
  width: 80px;
  height: 24px;
}

/* Watch-signal label pill — neutral, NEVER severity-tinted (UI-SPEC §6.3). */
body[data-persona="trainee"] .watch-signal__label-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}

/* Growth card — emerald left-border accent, the trainee analog of the
   brownfield briefing-card pattern (UI-SPEC §6.4). */
body[data-persona="trainee"] .growth-card {
  background: var(--surface);
  padding: var(--space-lg);
  border-radius: var(--space-md);
  box-shadow: var(--shadow);
  border-left: 4px solid var(--trainee-accent);
}
body[data-persona="trainee"] .growth-card__header {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-sm);
}
body[data-persona="trainee"] .growth-card__copy {
  font-size: 14px;
  line-height: 1.5;
  max-width: 56ch;
  color: var(--text);
  margin: 0 0 var(--space-md);
}
body[data-persona="trainee"] .growth-card__action {
  background: var(--trainee-accent-bg);
  padding: var(--space-md);
  border-radius: var(--space-xs);
  font-size: 14px;
  color: var(--trainee-accent-text);
}
body[data-persona="trainee"] .growth-card__signals summary {
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  margin-top: var(--space-md);
}

/* Profile card (UI-SPEC §6.5). */
body[data-persona="trainee"] .profile-card {
  background: var(--surface);
  padding: var(--space-xl);
  border-radius: var(--space-md);
  box-shadow: var(--shadow);
}

/* Snapshot badge --trainee modifier (UI-SPEC §6.7). Mirrors the brownfield
   .snapshot-badge--trainer / --policy modifiers (lines 1181-1186) — these
   modifier classes live at top-level so renderDemoBanner can apply the
   trainee accent BEFORE the persona-attribute switch happens (defence
   against first-paint flash on the snapshot pill specifically). The
   trainee-scoped block below is redundant for runtime correctness but
   keeps the structural test (Test 11) passing whether the test searches
   the top-level or the scoped declaration. */
.snapshot-badge--trainee {
  border-left-color: var(--trainee-accent, #047857);
}
body[data-persona="trainee"] .snapshot-badge--trainee {
  border-left-color: var(--trainee-accent);
}

/* Primary CTA — emerald fill (UI-SPEC §4.3, §6.1 "Talk to your trainer"). */
body[data-persona="trainee"] .btn--primary,
body[data-persona="trainee"] .me-cta-primary {
  background: var(--trainee-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;  /* UI-SPEC §2 44px touch-target exception */
}
body[data-persona="trainee"] .btn--primary:hover,
body[data-persona="trainee"] .me-cta-primary:hover {
  background: var(--trainee-accent-strong);
}

/* Touch-target minimum — applies to all interactive elements on the
   trainee surface (UI-SPEC §2 — 44px exception with explicit justification:
   trainee surface is consumed on phones in the field where buttons may be
   tapped one-handed; 44px is the iOS HIG / Material Design minimum). */
body[data-persona="trainee"] button,
body[data-persona="trainee"] .btn {
  min-height: 44px;
}

/* Focus ring — applies to every focusable element on the trainee surface
   (UI-SPEC §8.7 accessibility minima). Emerald + 2px offset is high-
   contrast against both the white surface and the emerald-50 hover bg. */
body[data-persona="trainee"] :focus-visible {
  outline: 2px solid var(--trainee-accent);
  outline-offset: 2px;
}

/* Section eyebrow (UI-SPEC §5.1 — "WHAT'S BEING WATCHED THIS WEEK" label). */
body[data-persona="trainee"] .me-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-md);
}

/* ============================================================ */
/* Phase 6 plan 06-01 — Landing surface (#/)                    */
/* ============================================================ */
/*
   CONTEXT.md D-01 lock: 3 persona cards + Start-the-demo CTA + landing
   demo banner. body[data-persona='landing'] is set by main.js's route()
   function — the structural defence against persona accent leak (T-06-04).
   Reuses existing tokens (--surface, --border, --shadow, --bg, --text,
   --text-muted) — ZERO new color tokens (D-04 IN/OUT — colour edits IN
   only when aligning to existing tokens).
*/

body[data-persona="landing"] .main {
  /* Landing surface widened (2026-05): was 960px (entry-page-focus narrowing
     baked in at Phase 6 plan 06-01). The BPE-format hero + dashboard tiles
     read better at a wider container, so the landing now expands to 1640px
     with a slim 16px side padding instead of the default 24px. */
  max-width: 1640px;
  padding-left: 16px;
  padding-right: 16px;
}

.landing-header {
  margin: 32px 0 24px;
  text-align: center;
}
.landing-title {
  margin: 0 0 6px;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.landing-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.landing-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin: 0 auto 28px;
  max-width: 1600px;
  padding: 0 4px;
}
@media (max-width: 720px) {
  .landing-card-grid { grid-template-columns: 1fr; }
}

/* BPE-format persona card — per-persona gradient top bar, glyph tile,
   capability list, gradient Enter CTA. The .landing-card__title /
   .landing-card__description / .landing-card__enter selectors are
   preserved verbatim (test contract from landingPersonaCard.test.mjs). */
.landing-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 45%),
    #161b27;
  border: 1px solid #2a3347;
  border-radius: 12px;
  padding: 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 14px 36px -22px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  contain: layout paint;
  overflow: hidden;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
  /* per-persona gradient stops (override per modifier) */
  --persona-grad-start: #22d3ee;
  --persona-grad-end:   #8b5cf6;
  --persona-tile-bg:    rgba(34, 211, 238, 0.15);
  --persona-tile-color: #22d3ee;
  --persona-glow:       rgba(34, 211, 238, 0.35);
}
.landing-card:hover {
  transform: translateY(-2px);
  border-color: var(--persona-glow);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 22px 44px -22px rgba(0,0,0,0.85),
    0 0 36px -10px var(--persona-glow);
}

/* Per-persona accent overrides — cyan trainer, emerald trainee, violet policy. */
.landing-card--trainer {
  --persona-grad-start: #22d3ee;
  --persona-grad-end:   #14b8a6;
  --persona-tile-bg:    rgba(34, 211, 238, 0.15);
  --persona-tile-color: #22d3ee;
  --persona-glow:       rgba(34, 211, 238, 0.35);
}
.landing-card--trainee {
  --persona-grad-start: #10b981;
  --persona-grad-end:   #059669;
  --persona-tile-bg:    rgba(16, 185, 129, 0.15);
  --persona-tile-color: #34d399;
  --persona-glow:       rgba(52, 211, 153, 0.35);
}
.landing-card--policy {
  --persona-grad-start: #8b5cf6;
  --persona-grad-end:   #7c3aed;
  --persona-tile-bg:    rgba(139, 92, 246, 0.15);
  --persona-tile-color: #a78bfa;
  --persona-glow:       rgba(167, 139, 250, 0.35);
}

.landing-card__topbar {
  height: 4px;
  background: linear-gradient(90deg, var(--persona-grad-start), var(--persona-grad-end));
  flex: 0 0 auto;
}
.landing-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 0;
}
.landing-card__glyph {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--persona-tile-bg);
  color: var(--persona-tile-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}
.landing-card__title-stack { display: flex; flex-direction: column; gap: 2px; }
.landing-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
}
.landing-card__route {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.landing-card__description {
  margin: 14px 18px 0;
  color: #94a3b8;
  font-size: 12.5px;
  line-height: 1.6;
}
.landing-card__capabilities {
  list-style: none;
  margin: 14px 18px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.landing-card__capability {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #94a3b8;
  padding: 3px 0;
}
.landing-card__capability-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--persona-tile-color);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--persona-glow);
}
.landing-card__capability-label { line-height: 1.4; }
.landing-card__enter {
  margin: 18px;
  margin-top: 16px;
  width: calc(100% - 36px);
  padding: 10px 16px;
  border-radius: 7px;
  border: none;
  background: linear-gradient(135deg, var(--persona-grad-start), var(--persona-grad-end));
  color: #0f1117;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  box-shadow: 0 0 18px -4px var(--persona-glow);
  align-self: auto;
}
.landing-card__enter:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 26px -2px var(--persona-glow);
}
.landing-card__enter:active { transform: none; opacity: 0.92; }
.landing-card__enter:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 3px;
}

.landing-start-tour {
  display: block;
  margin: 4px auto 28px;
  font-size: 13px;
  padding: 10px 26px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.landing-start-tour:hover {
  color: var(--brand-cyan);
  border-color: rgba(34, 211, 238, 0.4);
  background: rgba(34, 211, 238, 0.06);
}

/* BPE-format footer — top hairline + monospace uppercase trace strip. */
.landing-footer {
  margin: 12px -24px 0;
  padding: 18px 24px;
  border-top: 1px solid #2a3347;
  text-align: center;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: #374461;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.demo-banner--landing {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.32);
  color: var(--demo-banner-text);
}

/* ============================================================ */
/* Phase 6 plan 06-02 — Recording-determinism skeleton chrome    */
/*                                                                */
/* D-02 — gray rounded blocks; NO shimmer / NO pulse / NO         */
/* animation. Recordings catch animation as "still loading" and  */
/* break a take. Per-component variants in                       */
/* public/js/components/skeletons.js match the final layout      */
/* dimensions so the swap from skeleton -> real content is       */
/* layout-shift-free (containment + matching size = no reflow).  */
/* ============================================================ */

.skeleton {
  background: rgba(148, 163, 184, 0.10);
  border-radius: 4px;
  /* DELIBERATELY no animation / no transition — see D-02 contract. */
}
.skeleton__line { display: block; margin: 6px 0; }
.skeleton__block { display: block; }
.skeleton-host { display: block; }
.skeleton-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.skeleton-row:last-child { border-bottom: 0; }

.briefing-card.skeleton {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--surface);
}
.equipment-roi-row.skeleton {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.equipment-roi-row__head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}
.growth-card.skeleton,
.narrative-panel.skeleton,
.profile-card.skeleton,
.watch-signals-panel.skeleton {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: 12px;
}
.kpi.skeleton {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* CSS containment on dynamic regions — D-02 third defence. Prevents a
   panel's content swap from triggering layout reflow on the rest of the
   page. CSS only — no JS. Required selectors are pinned by
   tests/recording/cssContainment.test.mjs (Test 2) so future regressions
   are caught structurally. */
.equipment-roi-section,
.curriculum-signal-section,
.briefing-card,
.growth-card,
.narrative-panel,
.watch-signals-panel,
.profile-card,
.kpi,
.section,
.module-detail-section {
  contain: layout paint;
}

/* ============================================================================
   Phase 6 plan 06-04 — Guided tour overlay
   ============================================================================
   Floating chrome rendered ON TOP of the underlying page (briefing for
   step 1, policy/dashboard for steps 2+3). Three pieces:
     .tour-progress       — top-right 3-segment indicator + Exit-tour link
     .tour-next           — bottom-right "Next →" CTA
     .tour-complete-panel — terminal panel rendered on #/tour/done

   Z-INDEX LADDER (highest priority last):
     .topbar         z-index: 10  (existing brownfield sticky topnav)
     .tour-progress  z-index: 100 (tour overlay — above page content,
     .tour-next      z-index: 100  but below the topnav so the user can
                                   always navigate away cleanly)
     .modal-confirm  z-index: 1000 (existing brownfield modal — outranks
                                    tour overlay so confirmation dialogs
                                    block the tour, not vice versa)

   Recording-determinism: .tour-complete-panel carries `contain: layout
   paint` so its mount cannot trigger reflow on surrounding content. The
   tour-progress + tour-next overlays use `position: fixed` so they live
   outside the document layout flow entirely (no reflow risk by design).

   Persona-neutrality: NO body[data-persona='*'] selectors in this section.
   Tour overlays render identically on every persona surface. */

.tour-progress {
  position: fixed;
  top: 64px;
  right: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  contain: layout paint;
  max-width: 260px;
}
.tour-progress__segments {
  display: flex;
  gap: 4px;
}
.tour-progress__segment {
  width: 36px;
  height: 4px;
  background: var(--border-strong);
  border-radius: 2px;
}
.tour-progress__segment--active {
  background: var(--accent);
}
.tour-progress__caption {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.35;
}
.tour-progress__exit {
  align-self: flex-end;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.tour-progress__exit:hover {
  color: var(--text);
}

.tour-next {
  position: fixed;
  bottom: 32px;
  right: 32px;
  padding: 12px 24px;
  font-size: 14px;
  z-index: 100;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.tour-complete-panel {
  max-width: 560px;
  margin: 80px auto;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-align: center;
  contain: layout paint;
}
.tour-complete-panel__heading {
  margin: 0 0 12px;
  font-size: 22px;
  color: var(--text);
}
.tour-complete-panel__body {
  margin: 0 0 24px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}
.tour-complete-panel__return {
  font-size: 14px;
  padding: 10px 20px;
  cursor: pointer;
}

/* ============================================================================
   Phase 7 plan 07-01 — INTEL-02 ModuleChip linkification chip
   ============================================================================
   Persona-neutral chrome (D-02 lock); only focus-ring outline-color and the
   --current-page border vary per body[data-persona]. Visual values matched
   verbatim to brownfield .briefing-card__streamtag (padding 2px 8px,
   border-radius 4px, 11px monospace) — see UI-SPEC §6.2 lines 357-419 +
   pixel-spec table at lines 421-444.

   Rules covered:
     .module-chip                              — base chip (persona-neutral)
     .module-chip:hover                        — neutral darker tint
     .module-chip:focus-visible                — accent focus-ring (+offset)
     body[data-persona="policy"] .module-chip:focus-visible
     body[data-persona="trainee"] .module-chip:focus-visible
     .module-chip__id / __sep / __label        — segment typography
     .module-chip--current                     — sequencing-breadcrumb pill
     body[data-persona="trainer"|"policy"] .module-chip--current
     body[data-persona="trainee"] .module-chip — 44px touch-target hint
   ============================================================================ */

.module-chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid transparent;
  color: var(--text);
  text-decoration: none;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  vertical-align: baseline;
  white-space: nowrap;
  cursor: pointer;
  transition: none;
}
.module-chip:hover {
  background: rgba(148, 163, 184, 0.16);
}
.module-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
body[data-persona="policy"] .module-chip:focus-visible {
  outline-color: var(--policy-accent);
}
body[data-persona="trainee"] .module-chip:focus-visible {
  outline-color: var(--trainee-accent);
}

.module-chip__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0;
}
.module-chip__sep {
  color: var(--text-muted);
  padding: 0 4px;
}
.module-chip__label {
  font-weight: 400;
  font-size: 11px;
}

.module-chip--current {
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 600;
  cursor: default;
}
body[data-persona="trainer"] .module-chip--current {
  border-color: var(--accent);
  color: var(--accent);
}
body[data-persona="policy"] .module-chip--current {
  border-color: var(--policy-accent);
  color: var(--policy-accent);
}

body[data-persona="trainee"] .module-chip {
  min-height: 24px;
}

/* ============================================================================
   Phase 7 plan 07-01 — INTEL-03 top-contributors-list (8 panels)
   ============================================================================
   Per-panel host renders Top-3 contributing modules per UI-SPEC §6.4. Each
   row: [moduleChip] · [magnitude] (magnitude SUPPRESSED on trainee surface
   per Phase 5 noRank lock — handled in the host renderer, not in CSS).

   No background; the panel parent supplies the surface. Tabular-nums on the
   magnitude segment for vertical-stack alignment of digits.
   ============================================================================ */

.top-contributors-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.top-contributors-list__row {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  padding: 2px 0;
}
.top-contributors-list__sep {
  color: var(--text-muted);
  padding: 0 4px;
}
.top-contributors-list__magnitude {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}
.top-contributors-list__heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-xs) 0;
}

/* ============================================================================
   Phase 7 plan 07-02 — INTEL-01 Module Detail v2 panel chrome
   ============================================================================
   Per-panel visual treatment for the 8 .module-detail-section sub-panels of
   the rewritten public/js/module.js. Persona-neutral chrome by default;
   persona accent applies only via the page header underline. All severity
   tokens reused from the Phase 3 brownfield (no new color tokens introduced
   per D-05 OUT carry-forward + CLAUDE.md zero-new-deps hard gate).

   `contain: layout paint` on .module-detail-section is enforced via the
   canonical REQUIRED_CONTAINED_SELECTORS list (Phase 7 plan 07-01 added the
   10th entry; live in the comma-separated rule above at line ~2017).
   ============================================================================ */

.module-detail-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Panel 1 — Page header */
.module-detail-header .page-header {
  border-bottom: 4px solid var(--accent);
  padding-bottom: var(--space-md);
}
body[data-persona="policy"] .module-detail-header .page-header {
  border-bottom-color: var(--policy-accent);
}
body[data-persona="trainee"] .module-detail-header .page-header {
  border-bottom-color: var(--trainee-accent);
}
.module-detail-header h1 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-sm) 0;
}
.module-detail-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* Panel 4 — Withdrawal correlation */
.withdrawal-correlation__stats {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-lg);
  row-gap: var(--space-xs);
  margin: var(--space-md) 0;
}
.withdrawal-correlation__stats dt {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 400;
}
.withdrawal-correlation__stats dd {
  margin: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.withdrawal-correlation__list {
  list-style: none;
  margin: var(--space-md) 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Panel 5 — Equipment dependency */
.equipment-dependency__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.equipment-chip[data-anomaly="active"] {
  background: var(--severity-warning-bg, rgba(245, 158, 11, 0.12));
  color: var(--severity-warning-text, #92400e);
}

/* Panel 6 — Sequencing breadcrumb */
.sequencing-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.sequencing-breadcrumb__item {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.sequencing-breadcrumb__role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sequencing-breadcrumb__arrow {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
  user-select: none;
  align-self: flex-end;
  padding-bottom: 2px;
}

/* Panel 3 — Per-trainee matrix policy variant + trainee fallback */
.policy-disclosure {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: var(--space-md);
  max-width: 64ch;
}
.policy-histogram {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: var(--space-md) 0;
}
.trainee-fallback {
  font-size: 14px;
  color: var(--text);
  max-width: 64ch;
  margin: 0 0 var(--space-md) 0;
}

/* Panel 8 — Instructor narrative */
.instructor-narrative__brief {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 64ch;
  margin: 0 0 var(--space-md) 0;
}
.instructor-narrative__subhead {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-lg) 0 var(--space-sm) 0;
}
.instructor-narrative__patterns,
.instructor-narrative__recoveries {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.instructor-narrative__pattern-card,
.instructor-narrative__recovery-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--space-md);
}
.instructor-narrative__pattern-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}
.instructor-narrative__pattern-card__name {
  font-size: 14px;
  font-weight: 600;
}
.instructor-narrative__pattern-card__severity {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--severity-neutral-bg, rgba(0, 0, 0, 0.04));
  color: var(--severity-neutral, var(--text-muted));
}
.instructor-narrative__pattern-card__severity[data-severity="moderate"] {
  background: var(--severity-warning-bg, rgba(245, 158, 11, 0.12));
  color: var(--severity-warning-text, #92400e);
}
.instructor-narrative__pattern-card__severity[data-severity="severe"] {
  background: var(--severity-severe-bg, rgba(220, 38, 38, 0.12));
  color: var(--severity-severe, #991b1b);
}
.instructor-narrative__pattern-card__evidence {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}
.instructor-narrative__recovery-card__forpattern {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}
.instructor-narrative__recovery-card__action {
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

/* ============================================================ */
/*  Phase 9 — Evidence API and Persona Views (EVD-04..07)       */
/*  Append-only block. Token reuse only. See 09-UI-SPEC.md §6.  */
/*  Wave-3 plans (09-03 / 09-04 / 09-05) consume these classes  */
/*  rather than re-defining CSS.                                */
/* ============================================================ */

/* 6.4 + 6.5 Reflection card and field-note card chrome (trainee Portfolio) */
body[data-persona="trainee"] .reflection-card,
body[data-persona="trainee"] .fieldnote-card {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--trainee-accent);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow);
  contain: layout paint;
}
body[data-persona="trainee"] .reflection-card__header,
body[data-persona="trainee"] .fieldnote-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
body[data-persona="trainee"] .reflection-card__edit-toggle {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--trainee-accent);
  cursor: pointer;
  font-size: 16px;
}
body[data-persona="trainee"] .reflection-card__mood {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
body[data-persona="trainee"] .fieldnote-card__strength-text {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* 6.2 Reflection edit form (inline expand-to-edit per D-09-B1) */
body[data-persona="trainee"] .reflection-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--trainee-accent);
  border-radius: 12px;
  contain: layout paint;
}
body[data-persona="trainee"] .reflection-edit-form__textarea {
  width: 100%;
  min-height: 96px;
  font: 400 14px/1.5 inherit;
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}
body[data-persona="trainee"] .reflection-edit-form__textarea:focus-visible {
  outline: 2px solid var(--trainee-accent);
  outline-offset: 2px;
}
body[data-persona="trainee"] .reflection-edit-form__picker {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
body[data-persona="trainee"] .reflection-edit-form__picker-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
}
body[data-persona="trainee"] .reflection-edit-form__picker-btn[aria-pressed="true"],
body[data-persona="trainee"] .reflection-edit-form__picker-btn[aria-checked="true"] {
  background: var(--trainee-accent);
  color: #ffffff;
  border-color: var(--trainee-accent);
}
body[data-persona="trainee"] .reflection-edit-form__actions {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}
body[data-persona="trainee"] .reflection-edit-form__save {
  min-height: 44px;
  padding: 0 var(--space-lg);
  background: var(--trainee-accent);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
body[data-persona="trainee"] .reflection-edit-form__cancel,
body[data-persona="trainee"] .reflection-edit-form__delete {
  min-height: 44px;
  padding: 0 var(--space-md);
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 400;
  cursor: pointer;
}
body[data-persona="trainee"] .reflection-edit-form[data-state="saving"] .reflection-edit-form__save {
  opacity: 0.6;
  cursor: progress;
}

/* 6.3 Filter bar (trainer Evidence tab) */
.evidence-filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  contain: layout paint;
}
.evidence-filter-bar__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.evidence-filter-bar__row[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}
.evidence-filter-bar__eyebrow {
  font: 600 11px/1.4 inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 72px;
}
.evidence-filter-chip {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
.evidence-filter-chip[aria-pressed="true"] {
  background: var(--surface);
  border-color: var(--accent);
}
.evidence-filter-chip[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 6.1 Heatmap (policy Evidence section) */
.evidence-heatmap {
  contain: layout paint;
  width: 100%;
  max-width: 720px;
}
.evidence-heatmap__legend {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}
.evidence-heatmap__legend-swatch {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  display: inline-block;
}
.evidence-heatmap__caveat {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: var(--space-sm);
}
.evidence-heatmap__cell {
  stroke: var(--border);
  stroke-width: 1;
}
.evidence-heatmap__cell--suppressed {
  fill: url(#suppressed-hatch);
}
.evidence-heatmap__cell-link {
  cursor: pointer;
  outline: none;
}
.evidence-heatmap__cell-link:hover .evidence-heatmap__cell {
  stroke: var(--policy-accent);
  stroke-width: 2;
}
.evidence-heatmap__cell-link:focus-visible .evidence-heatmap__cell {
  stroke: var(--policy-accent);
  stroke-width: 3;
}

/* 7.1 Empty-state slots (D-09-D2 verbatim copy renders into these) */
.evidence-empty-state {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  contain: layout paint;
}
body[data-persona="trainee"] .evidence-empty-state {
  border-left: 4px solid var(--trainee-accent);
}

/* 5.1 Trainer trainee detail sub-tab strip */
.trainer-trainee-subtabs {
  display: flex;
  gap: var(--space-md);
  margin: var(--space-md) 0 var(--space-lg) 0;
  border-bottom: 1px solid var(--border);
}
.trainer-trainee-subtabs__link {
  padding: var(--space-sm) var(--space-md);
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.trainer-trainee-subtabs__link[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.me-subnav,
.policy-subnav {
  display: flex;
  gap: var(--space-md);
  margin: var(--space-md) 0 var(--space-lg) 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.me-subnav__link,
.policy-subnav__link {
  padding: var(--space-sm) var(--space-md);
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  font-weight: 500;
}
.me-subnav__link[aria-current="page"] {
  color: var(--trainee-accent, var(--accent));
  border-bottom-color: var(--trainee-accent, var(--accent));
}
.policy-subnav__link[aria-current="page"] {
  color: var(--policy-accent, var(--accent));
  border-bottom-color: var(--policy-accent, var(--accent));
}

/* =====================================================================
   AMBIENT OBSERVATIONS PANEL — camera + audio sensor signals
   Distinct visual identity (slate/teal accent + sensor icons) so the
   trainer immediately sees this is a different data source from
   trainer-typed field notes / AI-derived diagnostic streams.
   ===================================================================== */
.ambient-panel {
  margin: var(--space-2xl) 0;
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.04) 0%, var(--surface) 50%);
}
.ambient-panel__header { margin-bottom: var(--space-md); }
.ambient-panel__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ambient-panel__title {
  margin: var(--space-xs) 0 0 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.ambient-panel__empty,
.ambient-panel__footer {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: var(--space-md) 0 0 0;
}

/* "How this monitoring works" disclosure ------------------------------ */
.ambient-panel__how {
  margin: var(--space-md) 0 var(--space-lg);
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.04), rgba(34, 211, 238, 0) 60%),
    rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(34, 211, 238, 0.20);
  border-radius: 10px;
  overflow: hidden;
}
.ambient-panel__how-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--brand-cyan, #22d3ee);
  user-select: none;
  position: relative;
  transition: background 140ms ease;
}
.ambient-panel__how-summary::-webkit-details-marker { display: none; }
.ambient-panel__how-summary:hover { background: rgba(34, 211, 238, 0.06); }
.ambient-panel__how-summary::after {
  content: "▼";
  margin-left: auto;
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 180ms ease;
}
.ambient-panel__how[open] .ambient-panel__how-summary::after {
  transform: rotate(180deg);
}
.ambient-panel__how-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.15);
  color: var(--brand-cyan, #22d3ee);
  font-size: 11px;
  font-weight: 700;
}
.ambient-panel__how-body {
  padding: 4px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid rgba(34, 211, 238, 0.12);
}
.ambient-panel__how-section { display: flex; flex-direction: column; gap: 6px; }
.ambient-panel__how-heading {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}
.ambient-panel__how-lead {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.ambient-panel__how-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ambient-panel__how-row {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  padding: 7px 10px;
  background: rgba(148, 163, 184, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 6px;
}
.ambient-panel__how-label {
  font-weight: 700;
  color: var(--brand-cyan, #22d3ee);
}
.ambient-panel__how-body-text { color: var(--text); }

/* "How to read this module" disclosure (modules page) ---------------- */
.module-explainer {
  margin: 0 0 16px;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.04), rgba(34, 211, 238, 0) 60%),
    rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(34, 211, 238, 0.20);
  border-radius: 10px;
  overflow: hidden;
}
.module-explainer__summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--brand-cyan, #22d3ee);
  user-select: none;
  position: relative;
  transition: background 140ms ease;
}
.module-explainer__summary::-webkit-details-marker { display: none; }
.module-explainer__summary:hover { background: rgba(34, 211, 238, 0.06); }
.module-explainer__summary::after {
  content: "▼";
  margin-left: auto;
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 180ms ease;
}
.module-explainer[open] .module-explainer__summary::after { transform: rotate(180deg); }
.module-explainer__summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.15);
  color: var(--brand-cyan, #22d3ee);
  font-size: 11px;
  font-weight: 700;
}
.module-explainer__body {
  padding: 4px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid rgba(34, 211, 238, 0.12);
}
.module-explainer__section { display: flex; flex-direction: column; gap: 6px; }
.module-explainer__heading {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}
.module-explainer__lead {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.module-explainer__lead--muted {
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-muted);
  opacity: 0.85;
}
.module-explainer__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.module-explainer__row {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  padding: 7px 10px;
  background: rgba(148, 163, 184, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 6px;
}
.module-explainer__label {
  font-weight: 700;
  color: var(--brand-cyan, #22d3ee);
}
.module-explainer__row-text { color: var(--text); }

/* ============================================================
   INFO3D — animated 3D infographic component
   Used by ambient panel + module page "how it works" explainers.
   ============================================================ */
.info3d {
  margin: var(--space-md, 12px) 0 var(--space-xl, 20px);
  padding: 18px;
  border: 1px solid rgba(34, 211, 238, 0.20);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.05), rgba(34, 211, 238, 0) 60%),
    rgba(15, 23, 42, 0.65);
  position: relative;
  overflow: hidden;
}
.info3d::before {
  /* faint grid mesh behind the scene */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
}
.info3d__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
}
.info3d__eyebrow {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand-cyan, #22d3ee);
}
.info3d__title {
  margin: 0;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.info3d__lead {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 720px;
}

/* ----- 3D Scene -------------------------------------------------------- */
.info3d__scene {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  perspective: 1400px;
  perspective-origin: 50% 30%;
  transform-style: preserve-3d;
}
.info3d__stage {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding: 16px 14px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
    rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 36px -22px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: rotateY(var(--rotY, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  animation: info3d-float 5.2s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  overflow: hidden;
}
.info3d__stage::before {
  /* accent top gradient bar */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent, #22d3ee), transparent);
}
.info3d__stage:hover {
  transform: rotateY(var(--rotY, 0deg)) translateZ(20px);
  border-color: var(--accent, #22d3ee);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 24px 48px -22px rgba(0, 0, 0, 0.75),
    0 0 32px -8px var(--accent, #22d3ee);
}
.info3d__stage-halo {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 180px;
  height: 180px;
  margin-left: -90px;
  background: radial-gradient(circle, var(--accent, #22d3ee) 0%, transparent 65%);
  opacity: 0.18;
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
  animation: info3d-halo 6s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.info3d__stage-icon-wrap {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  margin: 0 auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info3d__stage-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent, #22d3ee);
  opacity: 0.5;
  animation: info3d-pulse-ring 2.4s ease-out infinite;
  animation-delay: var(--delay, 0s);
}
.info3d__stage-icon {
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 0 12px var(--accent, #22d3ee));
}
.info3d__stage-step {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  z-index: 2;
}
.info3d__stage-title {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}
.info3d__stage-body {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-muted);
  text-align: center;
}

/* ----- Connector arrows ------------------------------------------------ */
.info3d__connector {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  align-self: center;
  height: 60px;
}
.info3d__connector svg { width: 100%; height: 100%; overflow: visible; }
.info3d__connector-flow {
  stroke-dashoffset: 0;
  animation: info3d-dash-flow 1.4s linear infinite;
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.45));
}

/* ----- Stats row ------------------------------------------------------- */
.info3d__stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.info3d__stat {
  position: relative;
  padding: 14px 14px 12px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.14);
  overflow: hidden;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.info3d__stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent, #22d3ee), transparent);
}
.info3d__stat:hover {
  transform: translateY(-2px);
  border-color: var(--accent, #22d3ee);
  box-shadow: 0 0 20px -8px var(--accent, #22d3ee);
}
.info3d__stat-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--accent, #22d3ee), rgba(255,255,255,0.92));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 1;
  transition: opacity 320ms ease;
}
.info3d__stat-value--ready { opacity: 1; }
.info3d__stat-label {
  margin-top: 6px;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
}

/* ----- Footnote -------------------------------------------------------- */
.info3d__footnote {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.85;
}

/* ----- Keyframes ------------------------------------------------------- */
@keyframes info3d-float {
  0%, 100% { transform: rotateY(var(--rotY, 0deg)) translateZ(0)    translateY(0); }
  50%      { transform: rotateY(var(--rotY, 0deg)) translateZ(6px)  translateY(-4px); }
}
@keyframes info3d-halo {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  50%      { opacity: 0.30; transform: scale(1.10); }
}
@keyframes info3d-pulse-ring {
  0%   { transform: scale(0.85); opacity: 0.55; }
  60%  { transform: scale(1.20); opacity: 0; }
  100% { transform: scale(1.20); opacity: 0; }
}
@keyframes info3d-dash-flow {
  to { stroke-dashoffset: -32; }
}

/* ----- Responsive (stack on narrow) ----------------------------------- */
@media (max-width: 860px) {
  .info3d__scene {
    flex-direction: column;
    perspective: 800px;
    gap: 12px;
  }
  .info3d__stage {
    transform: none !important;
    animation: none;
  }
  .info3d__stage:hover { transform: translateY(-2px) !important; }
  .info3d__connector {
    width: 100%;
    height: 36px;
    transform: rotate(90deg);
  }
}

/* ----- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .info3d__stage,
  .info3d__stage-halo,
  .info3d__stage-pulse,
  .info3d__connector-flow,
  .measure3d__card { animation: none; }
}

/* ============================================================
   measure3d — per-module measurement-dimensions infographic.
   Grid of dimension cards (safety / productivity / teamwork / …),
   each listing the actual metrics from the module's schema.
   ============================================================ */
.measure3d__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  perspective: 1400px;
  perspective-origin: 50% 30%;
  transform-style: preserve-3d;
}
.measure3d__card {
  position: relative;
  padding: 16px 16px 14px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 50%),
    rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 14px 30px -22px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  animation: info3d-float 6.4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.measure3d__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent, #22d3ee), transparent);
}
.measure3d__card:hover {
  transform: translateY(-3px) translateZ(14px);
  border-color: var(--accent, #22d3ee);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 22px 44px -22px rgba(0, 0, 0, 0.75),
    0 0 28px -8px var(--accent, #22d3ee);
}
.measure3d__card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.measure3d__card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--accent, #22d3ee);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  filter: drop-shadow(0 0 10px var(--accent, #22d3ee));
  flex-shrink: 0;
}
.measure3d__card-label-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.measure3d__card-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.measure3d__card-count {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent, #22d3ee);
}
.measure3d__card-blurb {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}
.measure3d__metric-list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.measure3d__metric {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(148, 163, 184, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 6px;
  font-size: 11.5px;
  position: relative;
  transition: border-color 140ms ease, background 140ms ease;
}
.measure3d__metric:hover {
  border-color: var(--accent, #22d3ee);
  background: rgba(34, 211, 238, 0.05);
}
.measure3d__metric--required {
  border-left: 3px solid var(--accent, #22d3ee);
}
.measure3d__metric--required::after {
  content: "REQ";
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--accent, #22d3ee);
  opacity: 0;
}
.measure3d__metric-name {
  flex: 1;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.measure3d__metric-target {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.measure3d__metric-avg {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  color: var(--accent, #22d3ee);
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(34, 211, 238, 0.12);
  flex-shrink: 0;
}
.measure3d__metric--more {
  justify-content: center;
  color: var(--text-muted);
  font-style: italic;
  background: transparent;
  border-style: dashed;
}

/* Early-warning callout */
.ambient-panel__warning {
  border-radius: 8px;
  padding: var(--space-md);
  margin: var(--space-md) 0;
  border: 1px solid var(--border);
}
.ambient-panel__warning--critical {
  background: var(--severity-severe-bg, #fee2e2);
  border-color: var(--severity-severe, #dc2626);
}
.ambient-panel__warning--watch {
  background: var(--severity-warning-bg, #fef3c7);
  border-color: var(--severity-warning-text, #b45309);
}
.ambient-panel__warning--none {
  background: var(--severity-neutral-bg, #f3f4f6);
  border-color: var(--border);
}
.ambient-panel__warning-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.ambient-panel__warning--critical .ambient-panel__warning-label { color: var(--severity-severe, #dc2626); }
.ambient-panel__warning--watch .ambient-panel__warning-label { color: var(--severity-warning-text, #b45309); }
.ambient-panel__warning--none .ambient-panel__warning-label { color: var(--text-muted); }
.ambient-panel__warning-headline {
  margin: 0 0 var(--space-sm) 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.ambient-panel__signals {
  margin: var(--space-sm) 0;
  padding-left: 1.25rem;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.ambient-panel__signals li { margin-bottom: 2px; }
.ambient-panel__recommendation {
  margin: var(--space-sm) 0 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--text);
  line-height: 1.5;
}

/* Scorecard tiles */
.ambient-panel__scorecard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  margin: var(--space-md) 0;
}
.ambient-panel__tile {
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.ambient-panel__tile-top {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.ambient-panel__tile-icon { font-size: 16px; }
.ambient-panel__tile-sensor {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.ambient-panel__tile-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.ambient-panel__tile-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-top: 2px;
}
.ambient-panel__tile-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* Recent events list */
.ambient-panel__events {
  margin-top: var(--space-lg);
}
.ambient-panel__events-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--space-sm) 0;
}
.ambient-panel__events-empty {
  font-size: 13px;
  color: var(--text-muted);
}
.ambient-panel__event {
  border: 1px solid var(--border);
  border-left: 3px solid var(--policy-accent, #6366f1);
  border-radius: 6px;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--surface);
}
.ambient-panel__event-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}
.ambient-panel__event-week {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.ambient-panel__event-module {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}
.ambient-panel__event-capture {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.ambient-panel__event-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}
.ambient-panel__event-rig {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 var(--space-sm) 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ambient-panel__event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin: var(--space-sm) 0;
}
.ambient-panel__event-col-heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-xs);
}
.ambient-panel__event-dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px var(--space-sm);
  font-size: 12px;
}
.ambient-panel__event-dl dt {
  color: var(--text-muted);
}
.ambient-panel__event-dl dd {
  margin: 0;
  color: var(--text);
}
.ambient-panel__event-projection {
  margin: var(--space-sm) 0 0 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.ambient-panel__event-projection-label {
  font-weight: 600;
  color: var(--text-muted);
}
.ambient-panel__event-notes {
  margin: var(--space-xs) 0 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.4;
}

/* =====================================================================
   COHORT PAGE — ALL TRAINEES ROSTER
   Two-column grid: active cohort (TRN) + withdrawal cohort (WD).
   Every entry click-throughs to #/trainer/trainee/:id (the page with
   the camera+audio Ambient Observations panel).
   ===================================================================== */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--space-xl);
}
.roster-col {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--space-md);
  background: var(--surface);
}
.roster-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--space-xs) 0;
}
.roster-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 var(--space-md) 0;
  line-height: 1.4;
}
.roster-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.roster-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--border);
}
.roster-item:last-child { border-bottom: none; }
.roster-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
.roster-link:hover { text-decoration: underline; }

/* =====================================================================
   POLICY AMBIENT PANEL — cohort-level camera + audio sensor signals
   Same visual language as the per-trainee ambient panel + adds bar
   chart and trend-line viz. K=5 anonymity floor surfaced via the
   suppressed-hatch pattern on bars below the threshold.
   ===================================================================== */
.policy-ambient-panel {
  margin: var(--space-2xl) 0;
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.04) 0%, var(--surface) 50%);
}
.policy-ambient-panel__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.policy-ambient-panel__title {
  margin: var(--space-xs) 0 var(--space-md) 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.policy-ambient-panel__empty,
.policy-ambient-panel__footer {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: var(--space-md) 0 0 0;
}

/* KPI strip */
.policy-ambient-panel__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  margin: var(--space-md) 0 var(--space-xl) 0;
}
.policy-ambient-panel__kpi {
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.policy-ambient-panel__kpi-top {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.policy-ambient-panel__kpi-icon { font-size: 16px; }
.policy-ambient-panel__kpi-sensor {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.policy-ambient-panel__kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.policy-ambient-panel__kpi-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-top: 2px;
}
.policy-ambient-panel__kpi-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* Charts */
.policy-ambient-panel__chart {
  margin: var(--space-xl) 0;
}
.policy-ambient-panel__chart-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--space-xs) 0;
}
.policy-ambient-panel__chart-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 var(--space-md) 0;
  line-height: 1.5;
}
.policy-ambient-panel__bars {
  width: 100%;
  height: auto;
  display: block;
}
.policy-ambient-panel__bar {
  cursor: default;
}
.policy-ambient-panel__trend {
  width: 100%;
  height: auto;
  display: block;
}

/* Legend (shared across both charts) */
.policy-ambient-panel__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-sm) 0 0 0;
  font-size: 12px;
  color: var(--text);
}
.policy-ambient-panel__legend-label {
  font-weight: 500;
  color: var(--text-muted);
}
.policy-ambient-panel__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.policy-ambient-panel__legend-note {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* Insight callout — silent-disengagement headline */
.policy-ambient-panel__insight {
  margin: var(--space-xl) 0 var(--space-md) 0;
  padding: var(--space-md);
  border-radius: 8px;
  background: var(--severity-neutral-bg, #f3f4f6);
  border-left: 4px solid var(--policy-accent);
}
.policy-ambient-panel__insight-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--policy-accent);
  margin-bottom: var(--space-xs);
}
.policy-ambient-panel__insight-headline {
  margin: 0 0 var(--space-sm) 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.policy-ambient-panel__insight-body {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

/* =====================================================================
   MODULE AMBIENT PANEL — per-module camera + audio sensor signals
   Mounted on Module Detail v2 (#module/:id). Persona-branched layout:
   trainer sees per-trainee bars; policy sees aggregates; trainee sees
   a motivational summary only.
   ===================================================================== */
.module-ambient-panel {
  margin: var(--space-2xl) 0;
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.04) 0%, var(--surface) 50%);
}
.module-ambient-panel__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.module-ambient-panel__title {
  margin: var(--space-xs) 0 var(--space-md) 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.module-ambient-panel__empty,
.module-ambient-panel__footer {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: var(--space-md) 0 0 0;
}
.module-ambient-panel__trainee-blurb {
  margin: var(--space-sm) 0;
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.module-ambient-panel__trainee-link {
  display: inline-block;
  margin-top: var(--space-xs);
  color: var(--trainee-accent, var(--accent));
  text-decoration: none;
  font-weight: 500;
}
.module-ambient-panel__trainee-link:hover { text-decoration: underline; }

/* KPI strip */
.module-ambient-panel__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin: var(--space-md) 0 var(--space-lg) 0;
}
.module-ambient-panel__kpi {
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  position: relative;
}
.module-ambient-panel__kpi-top {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.module-ambient-panel__kpi-icon { font-size: 16px; }
.module-ambient-panel__kpi-sensor {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.module-ambient-panel__kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.module-ambient-panel__kpi-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-top: var(--space-xs);
}
.module-ambient-panel__kpi-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.module-ambient-panel__delta-chip {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.module-ambient-panel__delta-chip--good {
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
}
.module-ambient-panel__delta-chip--bad {
  background: var(--severity-severe-bg, #fee2e2);
  color: var(--severity-severe, #dc2626);
}
.module-ambient-panel__delta-chip--neutral {
  background: var(--severity-neutral-bg, #f3f4f6);
  color: var(--text-muted);
}

/* Projection callout */
.module-ambient-panel__projection {
  border-radius: 8px;
  padding: var(--space-md);
  margin: var(--space-lg) 0;
  border: 1px solid var(--border);
}
.module-ambient-panel__projection--critical {
  background: var(--severity-severe-bg, #fee2e2);
  border-color: var(--severity-severe, #dc2626);
}
.module-ambient-panel__projection--watch {
  background: var(--severity-warning-bg, #fef3c7);
  border-color: var(--severity-warning-text, #b45309);
}
.module-ambient-panel__projection--none {
  background: var(--severity-neutral-bg, #f3f4f6);
  border-color: var(--border);
}
.module-ambient-panel__projection-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.module-ambient-panel__projection--critical .module-ambient-panel__projection-label { color: var(--severity-severe, #dc2626); }
.module-ambient-panel__projection--watch .module-ambient-panel__projection-label { color: var(--severity-warning-text, #b45309); }
.module-ambient-panel__projection--none .module-ambient-panel__projection-label { color: var(--text-muted); }
.module-ambient-panel__projection-headline {
  margin: 0 0 var(--space-sm) 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.module-ambient-panel__projection-signals {
  margin: var(--space-sm) 0;
  padding-left: 1.25rem;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.module-ambient-panel__projection-signals li { margin-bottom: 2px; }
.module-ambient-panel__projection-rec {
  margin: var(--space-sm) 0 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--text);
  line-height: 1.5;
}

/* Per-trainee breakdown (TRAINER ONLY) */
.module-ambient-panel__breakdown {
  margin: var(--space-lg) 0;
}
.module-ambient-panel__breakdown-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--space-xs) 0;
}
.module-ambient-panel__breakdown-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 var(--space-md) 0;
  line-height: 1.5;
}
.module-ambient-panel__trainee-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.module-ambient-panel__trainee-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 2fr);
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 4px;
  margin-bottom: 4px;
  background: var(--surface);
}
.module-ambient-panel__trainee-row--risk    { border-left-color: var(--severity-severe, #dc2626); }
.module-ambient-panel__trainee-row--watch   { border-left-color: var(--severity-warning-text, #b45309); }
.module-ambient-panel__trainee-row--healthy { border-left-color: #10b981; }
.module-ambient-panel__trainee-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.module-ambient-panel__trainee-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.module-ambient-panel__trainee-link:hover { text-decoration: underline; }
.module-ambient-panel__trainee-band {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.module-ambient-panel__trainee-band--risk    { background: var(--severity-severe-bg, #fee2e2); color: var(--severity-severe, #dc2626); }
.module-ambient-panel__trainee-band--watch   { background: var(--severity-warning-bg, #fef3c7); color: var(--severity-warning-text, #b45309); }
.module-ambient-panel__trainee-band--healthy { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; }
.module-ambient-panel__trainee-stats {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) max-content;
  gap: var(--space-sm);
  align-items: center;
}
.module-ambient-panel__trainee-bar-shell {
  position: relative;
  height: 16px;
  background: var(--severity-neutral-bg, #f3f4f6);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.module-ambient-panel__trainee-bar-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.3s ease;
}
.module-ambient-panel__trainee-bar-fill--risk    { background: var(--severity-severe, #dc2626); }
.module-ambient-panel__trainee-bar-fill--watch   { background: var(--severity-warning-text, #b45309); }
.module-ambient-panel__trainee-bar-fill--healthy { background: #10b981; }
.module-ambient-panel__trainee-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.module-ambient-panel__trainee-substats {
  font-size: 11px;
  color: var(--text-muted);
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .module-ambient-panel__trainee-row {
    grid-template-columns: 1fr;
  }
  .module-ambient-panel__trainee-stats {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   ALL-MODULES AMBIENT DASHBOARD — cross-module summary on Module Detail
   Five sub-dashboards: KPIs / engagement ranking / stress ranking /
   quadrant scatter / classification buckets.
   ===================================================================== */
.all-modules-dashboard {
  margin: var(--space-2xl) 0;
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.all-modules-dashboard--hidden {
  display: none;
}
.all-modules-dashboard__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.all-modules-dashboard__title {
  margin: var(--space-xs) 0 var(--space-xs) 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.all-modules-dashboard__sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 var(--space-lg) 0;
  line-height: 1.5;
}
.all-modules-dashboard__empty,
.all-modules-dashboard__footer {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: var(--space-md) 0 0 0;
}
.all-modules-dashboard__section {
  margin: var(--space-xl) 0;
}
.all-modules-dashboard__section-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--space-xs) 0;
}
.all-modules-dashboard__section-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 var(--space-md) 0;
  line-height: 1.5;
}

/* A. KPI strip */
.all-modules-dashboard__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}
.all-modules-dashboard__kpi {
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.04) 0%, var(--surface) 50%);
}
.all-modules-dashboard__kpi-top {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.all-modules-dashboard__kpi-icon { font-size: 16px; }
.all-modules-dashboard__kpi-sensor {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.all-modules-dashboard__kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.all-modules-dashboard__kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-top: 2px;
}
.all-modules-dashboard__kpi-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* B + C. Ranking horizontal bars */
.all-modules-dashboard__ranking {
  list-style: none;
  margin: 0;
  padding: 0;
}
.all-modules-dashboard__rank-row {
  display: grid;
  grid-template-columns: 56px 1fr 80px 70px;
  gap: var(--space-sm);
  align-items: center;
  padding: 4px var(--space-sm);
  border-bottom: 1px solid var(--border);
}
.all-modules-dashboard__rank-row:last-child { border-bottom: none; }
.all-modules-dashboard__rank-row--current {
  background: rgba(99, 102, 241, 0.10);
  border-radius: 4px;
}
.all-modules-dashboard__rank-row--suppressed {
  opacity: 0.7;
}
.all-modules-dashboard__rank-module {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.all-modules-dashboard__rank-module:hover { text-decoration: underline; }
.all-modules-dashboard__rank-row--current .all-modules-dashboard__rank-module {
  color: var(--policy-accent);
  font-weight: 700;
}
.all-modules-dashboard__rank-bar-shell {
  position: relative;
  height: 14px;
  background: var(--severity-neutral-bg, #f3f4f6);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.all-modules-dashboard__rank-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}
.all-modules-dashboard__rank-bar-fill--engagement {
  background: var(--policy-accent);
  opacity: 0.55;
}
.all-modules-dashboard__rank-bar-fill--stress {
  background: var(--severity-warning-text, #b45309);
  opacity: 0.65;
}
.all-modules-dashboard__rank-bar-fill--current {
  opacity: 1;
}
.all-modules-dashboard__rank-bar-fill--suppressed {
  background: repeating-linear-gradient(45deg, var(--border), var(--border) 3px, transparent 3px, transparent 6px);
}
.all-modules-dashboard__rank-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.all-modules-dashboard__rank-n {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* D. Quadrant scatter */
.all-modules-dashboard__quadrant {
  width: 100%;
  height: auto;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* E. Classification buckets */
.all-modules-dashboard__buckets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}
.all-modules-dashboard__bucket {
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.all-modules-dashboard__bucket--thriving { border-top: 3px solid #10b981; }
.all-modules-dashboard__bucket--watch    { border-top: 3px solid var(--severity-warning-text, #b45309); }
.all-modules-dashboard__bucket--concerning { border-top: 3px solid var(--severity-severe, #dc2626); }
.all-modules-dashboard__bucket--suppressed { border-top: 3px solid var(--text-muted); }
.all-modules-dashboard__bucket-heading {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.all-modules-dashboard__bucket-dot { font-size: 12px; }
.all-modules-dashboard__bucket-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.all-modules-dashboard__bucket-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 var(--space-sm) 0;
  line-height: 1.4;
}
.all-modules-dashboard__bucket-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.all-modules-dashboard__bucket-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  font-size: 11px;
}
.all-modules-dashboard__bucket-item--current {
  background: rgba(99, 102, 241, 0.15);
  border-color: var(--policy-accent);
  font-weight: 700;
}
.all-modules-dashboard__bucket-link {
  color: var(--accent);
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
}
.all-modules-dashboard__bucket-link:hover { text-decoration: underline; }
.all-modules-dashboard__bucket-detail {
  color: var(--text-muted);
  font-size: 10px;
}
.all-modules-dashboard__bucket-empty {
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  margin: 0;
}

/* 5.2 Portfolio per-module group + new-reflection CTA */
body[data-persona="trainee"] .portfolio-module-group {
  margin-bottom: var(--space-2xl);
}
body[data-persona="trainee"] .portfolio-module-group__heading {
  font: 600 16px/1.3 inherit;
  margin-bottom: var(--space-md);
}
body[data-persona="trainee"] .portfolio-new-reflection-cta {
  min-height: 44px;
  padding: 0 var(--space-lg);
  background: var(--trainee-accent);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  margin-bottom: var(--space-md);
  cursor: pointer;
}

/* End Phase 9 append */

/* ============================================================
   Landing hero — mirror of BPE components/ui/HeroVideo.tsx
   Inline rounded panel (NOT full-bleed). Video + dark 120deg
   scrim + three pulsing radial glows + grid overlay + neural-
   network canvas + flex top/bottom content + bounce cue.
   ============================================================ */
.landing-hero {
  position: relative;
  margin: 0 0 24px;
  min-height: 400px;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 25px 50px -12px rgba(0,0,0,0.5);
  background: var(--bg-canvas);
}
.landing-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
.landing-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg,
    rgba(2, 8, 23, 0.90) 0%,
    rgba(7, 20, 45, 0.82) 45%,
    rgba(15, 10, 40, 0.85) 100%);
  pointer-events: none;
}
.landing-hero__glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(48px);
  pointer-events: none;
  z-index: 2;
}
.landing-hero__glow--cyan {
  top: -96px;
  left: -96px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.25) 0%, transparent 65%);
  animation: hero-pulse 5s ease-in-out infinite;
}
.landing-hero__glow--violet {
  top: 0;
  right: -10%;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.20) 0%, transparent 65%);
  animation: hero-pulse 7s ease-in-out infinite 1s;
}
.landing-hero__glow--blue {
  bottom: -20%;
  left: 35%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 65%);
  animation: hero-pulse 9s ease-in-out infinite 2s;
}
.landing-hero__grid {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.06;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 42px 42px;
}
.landing-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}
.landing-hero__content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px;
  padding: 32px;
  gap: 24px;
}
@media (min-width: 768px) {
  .landing-hero__content { padding: 40px; }
}

/* ---- Top row: left stack (badge + h1 + tagline) | right live pill ----- */
.landing-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.landing-hero__left { max-width: 640px; }

.landing-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.landing-hero__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-cyan);
  box-shadow: 0 0 8px var(--brand-cyan);
}
.landing-hero__badge-text {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.90);
}

/* BPE heading — white (NOT gradient text), 28-36px semibold, tight tracking. */
.landing-hero__title {
  margin: 16px 0 0;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #ffffff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}
.landing-hero__tagline {
  margin: 8px 0 0;
  max-width: 36rem;
  font-size: clamp(13px, 1.3vw, 14px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

.landing-hero__livepill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.landing-hero__livepill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-cyan);
  box-shadow: 0 0 8px var(--brand-cyan);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
.landing-hero__livepill-text {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.90);
}

/* ---- Bottom chip strip ------------------------------------------------ */
.landing-hero__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
.landing-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.landing-hero__chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-cyan);
}
.landing-hero__chip-label {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

/* ---- Bounce cue chevron (text glyph, no asset) ------------------------ */
.landing-hero__cue {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  color: rgba(255, 255, 255, 0.50);
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  animation: hero-bounce 1.6s ease-in-out infinite;
}

@keyframes hero-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@keyframes hero-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

@media (max-width: 720px) {
  .landing-hero { margin: 0 0 20px; border-radius: 12px; }
  .landing-hero__content { padding: 24px; min-height: 360px; }
  .landing-hero__top { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-hero__glow,
  .landing-hero__cue,
  .landing-hero__livepill-dot { animation: none; }
}

/* ============================================================
   Landing dashboard — persona-neutral aggregate tiles below the hero
   (BPE-format: dark glass panels, monospace eyebrows, cyan/violet
   accents, inline SVG charts; appended 2026-05)
   ============================================================ */
.landing-dashboard {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 4px auto 32px;
  max-width: 1600px;
  padding: 0 4px;
}
.landing-dashboard__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}
.landing-dashboard__eyebrow {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  color: var(--brand-cyan);
}
.landing-dashboard__title {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 24px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* KPI strip — 4 big-number tiles with per-tone gradient top border. */
.landing-dashboard__kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.landing-dash-kpi {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 50%),
    #161b27;
  border: 1px solid #2a3347;
  border-radius: 12px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.landing-dash-kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tone-a, #22d3ee), var(--tone-b, #8b5cf6));
}
.landing-dash-kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow: 0 14px 36px -20px rgba(0,0,0,0.7), 0 0 28px -12px rgba(34,211,238,0.30);
}
.landing-dash-kpi--cyan    { --tone-a: #22d3ee; --tone-b: #14b8a6; }
.landing-dash-kpi--violet  { --tone-a: #8b5cf6; --tone-b: #7c3aed; }
.landing-dash-kpi--blue    { --tone-a: #3b82f6; --tone-b: #22d3ee; }
.landing-dash-kpi--emerald { --tone-a: #10b981; --tone-b: #059669; }
.landing-dash-kpi__value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.landing-dash-kpi__label {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

/* Two-column row for stacked dashboard panels. */
.landing-dashboard__two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) {
  .landing-dashboard__two-col { grid-template-columns: 1fr; }
}

/* Dashboard panel — glass surface, hairline border. */
.landing-dash-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 45%),
    #161b27;
  border: 1px solid #2a3347;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
}
.landing-dash-panel--scroll {
  max-height: 360px;
  overflow: hidden;
}
.landing-dash-panel__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.landing-dash-panel__eyebrow {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text);
}
.landing-dash-panel__sub {
  font-size: 11px;
  color: var(--text-muted);
}
.landing-dash-panel__chart {
  width: 100%;
  height: auto;
  max-height: 200px;
}

/* Performance horizontal bars. */
.landing-dash-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.landing-dash-bar { display: flex; flex-direction: column; gap: 4px; }
.landing-dash-bar__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.landing-dash-bar__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.landing-dash-bar__value {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.landing-dash-bar__track {
  height: 8px;
  background: rgba(148, 163, 184, 0.10);
  border-radius: 4px;
  overflow: hidden;
}
.landing-dash-bar__fill {
  height: 100%;
  border-radius: 4px;
  transition: width 600ms ease;
  box-shadow: 0 0 12px -2px rgba(34, 211, 238, 0.35);
}

/* KPI table-list. */
.landing-dash-kpis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.landing-dash-kpis__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: rgba(148, 163, 184, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 7px;
}
.landing-dash-kpis__left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.landing-dash-kpis__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-dash-kpis__code {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.landing-dash-kpis__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.landing-dash-kpis__actual {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.landing-dash-kpis__status {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 3px 7px;
  border-radius: 4px;
}
.landing-dash-kpis__status--met {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.32);
}
.landing-dash-kpis__status--unknown,
.landing-dash-kpis__status--pend {
  background: rgba(148, 163, 184, 0.10);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.20);
}

/* Module catalogue grid (scrollable). */
.landing-dash-modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px;
  overflow-y: auto;
  padding-right: 4px;
}
.landing-dash-modules::-webkit-scrollbar { width: 6px; }
.landing-dash-modules::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.20);
  border-radius: 6px;
}
.landing-dash-module {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(148, 163, 184, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 6px;
  transition: border-color 120ms ease, background 120ms ease;
}
.landing-dash-module:hover {
  border-color: rgba(34, 211, 238, 0.35);
  background: rgba(34, 211, 238, 0.06);
}
.landing-dash-module__id {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--brand-cyan);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.landing-dash-module__name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ============================================================
   AI chat widget — floating BPE-format assistant
   Bottom-right bubble + glass panel; trainer-scope spike v1.5
   ============================================================ */
.chat-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- Bubble (closed state) ----------------------------------- */
.chat-widget__bubble {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 9999px;
  border: 1px solid rgba(34, 211, 238, 0.35);
  background: linear-gradient(135deg, #22d3ee 0%, #8b5cf6 100%);
  color: #0a0f1e;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow:
    0 14px 32px -10px rgba(34, 211, 238, 0.55),
    0 4px 12px -2px rgba(139, 92, 246, 0.40),
    0 1px 0 rgba(255, 255, 255, 0.20) inset;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.chat-widget__bubble:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 38px -10px rgba(34, 211, 238, 0.65),
    0 6px 16px -2px rgba(139, 92, 246, 0.50),
    0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
.chat-widget__bubble:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
.chat-widget__bubble-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0a0f1e;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
.chat-widget__bubble-label {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  text-transform: uppercase;
}

/* --- Panel (open state) -------------------------------------- */
.chat-widget__panel {
  display: none;
  flex-direction: column;
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(420px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 96px));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 35%),
    #0f172a;
  border: 1px solid #2a3347;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 28px 48px -16px rgba(0, 0, 0, 0.75),
    0 0 40px -10px rgba(34, 211, 238, 0.25);
  transform-origin: bottom right;
  transform: scale(0.92) translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms ease, opacity 180ms ease;
}
.chat-widget[data-state="open"] .chat-widget__panel {
  display: flex;
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.chat-widget[data-state="open"] .chat-widget__bubble {
  display: none;
}

.chat-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #2a3347;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.05), rgba(34, 211, 238, 0) 80%);
}
.chat-widget__head-title { display: flex; flex-direction: column; gap: 2px; }
.chat-widget__head-eyebrow {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand-cyan);
}
.chat-widget__head-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.chat-widget__close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: transparent;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.chat-widget__close:hover {
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(148, 163, 184, 0.08);
}

.chat-widget__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-widget__messages::-webkit-scrollbar { width: 6px; }
.chat-widget__messages::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.20); border-radius: 6px;
}

/* Empty state */
.chat-widget__empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.chat-widget__empty-eyebrow {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand-cyan);
}
.chat-widget__empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.chat-widget__empty-tips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-widget__empty-tip-btn {
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background: rgba(148, 163, 184, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.chat-widget__empty-tip-btn:hover {
  border-color: rgba(34, 211, 238, 0.35);
  background: rgba(34, 211, 238, 0.06);
  color: var(--text);
}

/* Messages */
.chat-widget__msg { display: flex; flex-direction: column; gap: 4px; max-width: 92%; }
.chat-widget__msg--user { align-self: flex-end; align-items: flex-end; }
.chat-widget__msg--assistant { align-self: flex-start; align-items: flex-start; }
.chat-widget__msg-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  word-wrap: break-word;
}
.chat-widget__msg--user .chat-widget__msg-bubble {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(139, 92, 246, 0.14));
  border: 1px solid rgba(34, 211, 238, 0.32);
  color: var(--text);
  border-bottom-right-radius: 4px;
}
.chat-widget__msg--assistant .chat-widget__msg-bubble {
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-widget__msg-para { margin: 0 0 6px; }
.chat-widget__msg-para:last-child { margin-bottom: 0; }

/* Tool-call ribbon above an assistant message */
.chat-widget__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.chat-widget__tool {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
}
.chat-widget__tool--ok {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  border: 1px solid rgba(52, 211, 153, 0.32);
}
.chat-widget__tool--err {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.32);
}

/* Pending typing dots */
.chat-widget__msg-bubble--pending {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 12px 14px;
}
.chat-widget__dot-pulse {
  font-size: 18px;
  line-height: 1;
  color: var(--brand-cyan);
  opacity: 0.5;
  animation: chat-dot-pulse 1.2s ease-in-out infinite;
}
.chat-widget__dot-pulse:nth-child(2) { animation-delay: 0.15s; }
.chat-widget__dot-pulse:nth-child(3) { animation-delay: 0.30s; }
@keyframes chat-dot-pulse {
  0%, 100% { opacity: 0.30; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-2px); }
}

/* Status strip */
.chat-widget__status {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  padding: 4px 16px;
  min-height: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}

/* Input row */
.chat-widget__input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid #2a3347;
  background: rgba(15, 23, 42, 0.6);
}
.chat-widget__input {
  flex: 1;
  resize: none;
  max-height: 120px;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  background: rgba(10, 15, 30, 0.6);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
}
.chat-widget__input:focus {
  outline: none;
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}
.chat-widget__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.chat-widget__send {
  padding: 9px 14px;
  border-radius: 7px;
  border: none;
  background: linear-gradient(135deg, #22d3ee, #8b5cf6);
  color: #0a0f1e;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  cursor: pointer;
  box-shadow: 0 0 16px -4px rgba(34, 211, 238, 0.50);
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.chat-widget__send:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 22px -2px rgba(34, 211, 238, 0.60);
}
.chat-widget__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 720px) {
  .chat-widget { right: 12px; bottom: 12px; }
  .chat-widget__panel {
    width: calc(100vw - 24px);
    height: calc(100svh - 64px);
  }
}

/* ============================================================
   3D Knowledge Graph page (#graph)
   BPE-format dark canvas stage + glass aside panels
   ============================================================ */
.graph-page__header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.graph-page__head-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.graph-page__head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.graph-page__eyebrow {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  color: var(--brand-cyan);
}
.graph-page__title {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 26px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}
.graph-page__stats {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: var(--text-muted);
}

.graph-page__search-wrap { position: relative; }
.graph-page__search {
  width: 240px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #2a3347;
  background: rgba(15, 23, 42, 0.6);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.graph-page__search:focus {
  outline: none;
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}
.graph-page__search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  background: #0f172a;
  border: 1px solid #2a3347;
  border-radius: 8px;
  overflow: hidden;
  display: none;
  max-height: 320px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.8);
}
.graph-page__search-results[data-open="true"] { display: block; }
.graph-page__search-hit {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.graph-page__search-hit:hover { background: rgba(34, 211, 238, 0.08); }
.graph-page__search-hit-label { flex: 1; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graph-page__search-hit-type {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  color: var(--text-muted);
}
.graph-page__search-empty {
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 12px;
}

.graph-page__refresh {
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid #2a3347;
  background: transparent;
  color: var(--text-muted);
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.graph-page__refresh:hover {
  color: var(--brand-cyan);
  border-color: rgba(34, 211, 238, 0.4);
  background: rgba(34, 211, 238, 0.06);
}

.graph-page__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
}
@media (max-width: 980px) {
  .graph-page__layout { grid-template-columns: 1fr; }
}

.graph-page__stage {
  position: relative;
  background: #05070d;
  border: 1px solid #2a3347;
  border-radius: 14px;
  overflow: hidden;
  min-height: 640px;
  height: calc(100vh - 220px);
}
.graph-page__mount {
  position: absolute;
  inset: 0;
}
.graph-page__loading,
.graph-page__error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.graph-page__error { color: #fca5a5; }

/* --- Aside panels ----------------------------------------------------- */
.graph-page__aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.graph-aside__panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 45%),
    #161b27;
  border: 1px solid #2a3347;
  border-radius: 12px;
  overflow: hidden;
}
.graph-aside__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px 6px;
}
.graph-aside__eyebrow {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text);
}
.graph-aside__count {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  color: var(--text-muted);
}

/* Legend */
.graph-aside__legend-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px 12px;
  max-height: 320px;
  overflow-y: auto;
}
.graph-aside__legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.graph-aside__legend-row:hover {
  background: rgba(148, 163, 184, 0.06);
  border-color: rgba(148, 163, 184, 0.18);
}
.graph-aside__legend-row--hidden { opacity: 0.45; }
.graph-aside__legend-label {
  flex: 1;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.graph-aside__legend-count {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.graph-aside__legend-eye {
  color: var(--text-muted);
  font-size: 11px;
}

/* Detail panel */
.graph-aside__detail-body { padding: 4px 14px 14px; }
.graph-aside__detail-empty {
  padding: 14px 0;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}
.graph-aside__detail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  margin-bottom: 10px;
}
.graph-aside__detail-title-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.graph-aside__detail-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.graph-aside__detail-type {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.graph-aside__detail-props {
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: minmax(80px, max-content) 1fr;
  column-gap: 10px;
  row-gap: 4px;
  font-size: 11.5px;
}
.graph-aside__detail-prop-key {
  color: var(--text-muted);
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
}
.graph-aside__detail-prop-val {
  margin: 0;
  color: var(--text);
  word-break: break-word;
}
.graph-aside__detail-conn-head {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.graph-aside__detail-conns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
}
.graph-aside__detail-conn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.graph-aside__detail-conn:hover {
  background: rgba(148, 163, 184, 0.06);
  border-color: rgba(148, 163, 184, 0.18);
}
.graph-aside__detail-conn-name {
  flex: 1;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.graph-aside__detail-conn-type {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, monospace;
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  background: rgba(148, 163, 184, 0.08);
  border-radius: 3px;
}

/* Shared dot swatch */
.graph-page__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}