/* BeyondPMF brand tokens & components — extracted from app.py BRAND_CSS (v6) */

:root {
  --bg-deep:#1a1a1a; --bg-app:#2d2c38; --bg-card:#353443; --bg-card-alt:#3d3c4d;
  --border-soft:rgba(178,166,217,0.14); --border-strong:rgba(178,166,217,0.28);
  --fg-primary:#fffdf6; --fg-secondary:#cdc2f9; --fg-muted:#9991bc; --fg-dim:#787099;
  --purple-50:#e5e1ff; --purple-100:#cdc2f9; --purple-200:#b2a6d9; --purple-300:#9991bc; --purple-400:#787099;
  --sage:#9ab2a2; --sage-soft:#d3e5db; --rose:#c69d9d; --rose-soft:#f5c2c2;
  --slate-blue:#5285a8; --coral:#e55555; --coral-soft:#ff7676; --gold:#cebe6f; --gold-soft:#fff18f;
  --font-display:"Cormorant Garamond","Playfair Display",Georgia,serif;
  --font-sans:"Inter",-apple-system,"Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;
  --radius-sm:6px; --radius-md:10px; --radius-lg:18px; --radius-pill:999px;
}
* { box-sizing: border-box; }
body {
  margin:0; background:var(--bg-app); color:var(--fg-primary);
  font-family:var(--font-sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color: var(--fg-secondary); text-decoration: none; }
a:hover { color: var(--fg-primary); }

.container      { max-width: 920px;  margin: 0 auto; padding: 32px 24px 96px; }
.container-wide { max-width: 1320px; margin: 0 auto; padding: 0 24px 96px; }

h1 {
  font-family:var(--font-display); font-weight:500; color:var(--fg-primary);
  margin:0 0 14px; font-size:42px; line-height:1.1;
  letter-spacing:-0.01em; text-wrap:balance;
}
h2 {
  font-family:var(--font-display); font-weight:500; color:var(--fg-primary);
  margin:32px 0 14px; font-size:28px; line-height:1.15; letter-spacing:-0.005em;
}
h3 {
  font-family:var(--font-sans); font-weight:600; color:var(--fg-primary);
  margin:24px 0 8px; font-size:14px; text-transform:uppercase; letter-spacing:.1em;
}
.eyebrow {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-muted);
}
p { margin: .5em 0; color: var(--fg-primary); }
.lead {
  font-size:17px; line-height:1.55; color:var(--fg-secondary);
  max-width:70ch; text-wrap:pretty;
}
.lead strong { color: var(--fg-primary); font-weight: 600; }
.muted { color: var(--fg-muted); font-size: 13px; }
.dim   { color: var(--fg-dim);   font-size: 12px; }

/* === Buttons === */
.btn {
  display:inline-block; background:var(--purple-200); color:#2d2c38;
  padding:11px 22px; border-radius:14px; text-decoration:none; border:0; cursor:pointer;
  font-size:13px; font-weight:500; font-family:var(--font-sans);
  letter-spacing:.01em; line-height:1.2;
}
.btn:hover { background: var(--purple-100); color: #2d2c38; }
.btn-ghost {
  background:transparent; color:var(--fg-primary);
  border:1px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--bg-card); color: var(--fg-primary); }
.btn-coral { background: var(--coral); }
.btn-coral:hover { background: var(--coral-soft); }
.btn-disabled, .btn:disabled {
  background:var(--bg-card-alt); color:var(--fg-dim); cursor:not-allowed;
}
.btn-small { padding: 6px 14px; font-size: 12px; }
.btn-tiny  { padding: 3px 10px; font-size: 11px; }

/* === Form === */
input, textarea, select {
  font-family:var(--font-sans); font-size:14px; padding:10px 12px;
  border:1px solid var(--border-soft); border-radius:var(--radius-md);
  background:var(--bg-card); color:var(--fg-primary); width:100%;
}
input:focus, textarea:focus, select:focus {
  outline:none; border-color:var(--purple-200);
  box-shadow:0 0 0 3px rgba(178,166,217,0.15);
}
input::placeholder, textarea::placeholder { color: var(--fg-dim); }
textarea { min-height: 80px; resize: vertical; }
label {
  display:block; font-weight:500; margin-bottom:6px;
  font-size:13px; color:var(--fg-secondary);
}
select option { background: var(--bg-card); color: var(--fg-primary); }
input[type=checkbox] { accent-color: var(--purple-200); }

/* === Cards & Layout === */
.card {
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); padding:24px; margin:16px 0;
}
.card-alt {
  background:var(--bg-card-alt); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); padding:24px; margin:16px 0;
}
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* === Header === */
.bpmf-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; border-bottom:1px solid var(--border-soft); background:var(--bg-deep);
}
.bpmf-brand { display: flex; align-items: center; gap: 14px; }
.bpmf-logo { width: 36px; height: 36px; }
.bpmf-brand-text {
  font-family:var(--font-display); font-size:20px; font-weight:500;
  color:var(--fg-primary); letter-spacing:.01em; line-height:1.1;
}
.bpmf-brand-text .by {
  font-family:var(--font-mono); font-size:10px; color:var(--fg-muted);
  letter-spacing:.18em; text-transform:uppercase; display:block; margin-top:-2px;
}
.bpmf-nav { display: flex; gap: 24px; font-size: 14px; align-items: center; }
.bpmf-nav a { color: var(--fg-muted); text-decoration: none; }
.bpmf-nav a:hover { color: var(--fg-secondary); }
.bpmf-nav a.active { color: var(--fg-primary); font-weight: 500; }
.bpmf-actions {
  display:flex; gap:14px; align-items:center;
  font-size:13px; color:var(--fg-muted);
}

/* === Tables === */
table {
  width:100%; border-collapse:collapse; font-size:14px; background:var(--bg-card);
  border:1px solid var(--border-soft); border-radius:var(--radius-md); overflow:hidden;
}
th, td {
  padding:11px 14px; text-align:left;
  border-bottom:1px solid var(--border-soft); vertical-align:top;
}
tr:last-child td { border-bottom: none; }
th {
  background:var(--bg-card-alt); color:var(--fg-secondary); font-weight:500;
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  font-family:var(--font-mono);
}
td { color: var(--fg-primary); }

/* === Pills & Quadrants === */
.pill {
  display:inline-block; padding:3px 11px; border-radius:var(--radius-pill);
  font-size:11px; font-weight:500; letter-spacing:.04em;
  font-family:var(--font-mono); text-transform:uppercase;
}
.pill-invited   { background: rgba(178,166,217,0.10); color: var(--fg-muted); border: 1px solid var(--border-soft); }
.pill-started   { background: rgba(206,190,111,0.15); color: var(--gold); }
.pill-completed { background: rgba(154,178,162,0.15); color: var(--sage); }
.pill-anchor    { background: var(--purple-200); color: #2d2c38; font-weight: 600; }

.quadrant-Optimal                { background:rgba(154,178,162,0.18); color:var(--sage);     font-weight:500; padding:3px 10px; border-radius:var(--radius-pill); font-size:11px; font-family:var(--font-mono); letter-spacing:.04em; }
.quadrant-FrustratedCustomers    { background:rgba(198,157,157,0.18); color:var(--rose);     font-weight:500; padding:3px 10px; border-radius:var(--radius-pill); font-size:11px; font-family:var(--font-mono); letter-spacing:.04em; }
.quadrant-FrustratedOrganization { background:rgba(206,190,111,0.18); color:var(--gold);     font-weight:500; padding:3px 10px; border-radius:var(--radius-pill); font-size:11px; font-family:var(--font-mono); letter-spacing:.04em; }
.quadrant-Deadweight             { background:rgba(120,112,153,0.18); color:var(--fg-muted); font-weight:500; padding:3px 10px; border-radius:var(--radius-pill); font-size:11px; font-family:var(--font-mono); letter-spacing:.04em; }

/* === Progress === */
.progress { background: var(--bg-card-alt); height: 6px; border-radius: 3px; overflow: hidden; }
.progress-bar { background: var(--purple-200); height: 100%; transition: width .3s; }

/* === Question / Scale === */
.question-block {
  margin:20px 0; padding:22px; background:var(--bg-card);
  border:1px solid var(--border-soft); border-radius:var(--radius-md);
  border-left:3px solid var(--purple-200);
}
.question-text {
  font-weight:500; margin-bottom:14px; color:var(--fg-primary);
  font-size:16px; line-height:1.4;
}
/* === Slider scale (0-10 with anchors at 0/5/10) === */
.slider-wrap {
  position:relative; padding:8px 0 32px; margin:4px 0 16px;
}
.slider-wrap .slider {
  -webkit-appearance:none; appearance:none; width:100%; height:38px;
  background:transparent; border-radius:3px; outline:none;
  cursor:pointer; margin:0;
}
.slider-wrap .slider::-webkit-slider-runnable-track {
  height:6px; border-radius:3px;
  background:linear-gradient(90deg, var(--purple-200) 0%, var(--purple-200) var(--fill,50%), var(--border-soft) var(--fill,50%), var(--border-soft) 100%);
}
.slider-wrap .slider::-moz-range-track {
  height:6px; border-radius:3px; background:var(--border-soft);
}
.slider-wrap .slider::-moz-range-progress {
  height:6px; border-radius:3px; background:var(--purple-200);
}
.slider-wrap .slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:28px; height:28px; border-radius:50%;
  background:var(--purple-200); border:2px solid var(--bg-deep);
  cursor:pointer; transition:transform .12s; margin-top:-11px;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.slider-wrap .slider::-moz-range-thumb {
  width:28px; height:28px; border-radius:50%;
  background:var(--purple-200); border:2px solid var(--bg-deep);
  cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.slider-wrap .slider::-webkit-slider-thumb:hover { transform:scale(1.15); }
.slider-wrap .slider:disabled {
  opacity:.7; cursor:default;
}
.slider-wrap .slider:disabled::-webkit-slider-runnable-track {
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold) var(--fill,50%), var(--border-soft) var(--fill,50%), var(--border-soft) 100%);
}
.slider-wrap .slider:disabled::-webkit-slider-thumb {
  background:var(--gold); cursor:default; transform:none;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.slider-wrap .slider:disabled::-moz-range-progress {
  background:var(--gold);
}
.slider-wrap .slider:disabled::-moz-range-thumb {
  background:var(--gold); cursor:default;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
/* Unanswered state: hide thumb until first interaction */
.slider-wrap.unanswered .slider::-webkit-slider-thumb { opacity:0; }
.slider-wrap.unanswered .slider::-moz-range-thumb { opacity:0; }
.slider-wrap.unanswered .slider { background:var(--border-soft); }
.slider-wrap.unanswered .slider::-webkit-slider-runnable-track { background:var(--border-soft); }
/* Current value label — prominent caption above slider */
.slider-caption {
  text-align:center; min-height:22px; margin-bottom:2px;
}
.slider-value-label {
  display:inline-block; font-size:14px; font-weight:600;
  color:var(--purple-200); font-family:var(--font-body);
  letter-spacing:.01em; transition:opacity .15s;
}
.slider-wrap.unanswered .slider-value-label { opacity:0; }
/* Tick marks — all 11 numbered */
.slider-ticks {
  position:relative; height:28px; margin-top:2px;
}
.slider-ticks .tick {
  position:absolute; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  font-size:10px; color:var(--fg-muted); font-family:var(--font-mono);
  text-align:center; cursor:default; line-height:1;
}
.slider-ticks .tick::before {
  content:''; display:block;
  width:1px; height:6px; background:var(--fg-dim);
  margin-bottom:3px;
}
.slider-ticks .tick.major {
  font-size:11px; font-weight:600; color:var(--fg-secondary);
}
.slider-ticks .tick.major::before {
  height:10px;
}
/* Anchor labels */
.slider-anchors {
  display:flex; justify-content:space-between; margin-top:12px;
  font-size:13px; color:var(--fg-secondary); line-height:1.35;
  font-weight:500;
}
.slider-anchors .anchor-at-0 { text-align:left; max-width:32%; }
.slider-anchors .anchor-at-5 { text-align:center; max-width:32%; color:var(--fg-muted); font-weight:400; }
.slider-anchors .anchor-at-10 { text-align:right; max-width:32%; }

/* === Question help tooltips === */
.q-help {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:var(--bg-card-alt); color:var(--fg-muted);
  font-size:11px; font-weight:600; font-family:var(--font-mono);
  cursor:help; vertical-align:middle; margin-left:4px;
  border:1px solid var(--border-soft); transition:background .15s;
}
.q-help:hover, .q-help:focus { background:var(--purple-200); color:var(--bg-deep); outline:none; }

/* === Phase 2 matrix === */
.matrix-row {
  display:grid; grid-template-columns:200px 1fr; gap:18px;
  padding:14px 0; border-bottom:1px solid var(--border-soft); align-items:center;
}
.matrix-row:last-child { border-bottom: none; }
.matrix-row .product-label { font-weight: 500; color: var(--fg-primary); font-size: 14px; }
.matrix-row.is-anchor {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg-deep); border-bottom: 2px solid var(--gold);
}
.matrix-row.is-anchor .product-label { color: var(--gold); }
.matrix-row .product-label .product-meta {
  display:block; font-family:var(--font-mono); font-size:10px;
  color:var(--fg-muted); letter-spacing:.08em; text-transform:uppercase; margin-top:2px;
}

/* === Side navigation arrows === */
.side-nav {
  position:fixed; top:50%; z-index:50;
  width:44px; height:72px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  color:var(--purple-200); text-decoration:none;
  opacity:.7; transition:opacity .2s, background .2s;
}
.side-nav:hover { opacity:1; background:var(--bg-card-alt); color:var(--fg-primary); }
.side-nav-icon { font-size:28px; line-height:1; }
.side-nav-label { font-size:9px; font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
.side-nav-left  { left:8px;  transform:translateY(-50%); border-radius:0 var(--radius-md) var(--radius-md) 0; }
.side-nav-right { right:8px; transform:translateY(-50%); border-radius:var(--radius-md) 0 0 var(--radius-md); }
@media (max-width:768px) { .side-nav { width:36px; height:56px; } .side-nav-icon { font-size:22px; } .side-nav-label { font-size:8px; } }

/* === Save indicator === */
.save-status {
  position:fixed; bottom:24px; right:24px; background:var(--bg-card);
  border:1px solid var(--border-soft); border-radius:var(--radius-md);
  padding:10px 16px; font-size:12px; color:var(--fg-muted);
  box-shadow:0 8px 24px rgba(0,0,0,.4); opacity:0; transition:opacity .3s;
  font-family:var(--font-mono); letter-spacing:.04em; z-index:100;
}
.save-status.show  { opacity: 1; }
.save-status.saved { border-color: var(--sage); color: var(--sage); }

/* === Dashboard matrix SVG === */
.matrix-svg {
  width:100%; max-width:800px; height:auto; aspect-ratio:640/580;
  background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  display:block; margin:0 auto;
}

/* === Details === */
details {
  margin:16px 0; border:1px solid var(--border-soft);
  border-radius:var(--radius-md); padding:0; background:var(--bg-card);
}
details summary {
  padding:14px 20px; cursor:pointer; font-weight:500;
  color:var(--fg-secondary); font-size:14px;
}
details summary:hover { color: var(--fg-primary); }
details[open] summary {
  border-bottom:1px solid var(--border-soft); color:var(--fg-primary);
}
details .details-body { padding: 18px 20px; color: var(--fg-primary); }
details .details-body ul, details .details-body ol { padding-left: 20px; }
details .details-body li { margin: 6px 0; }

/* === Messages === */
.error-msg   { background:rgba(229,85,85,0.10);  color:var(--coral); padding:14px 18px; border:1px solid rgba(229,85,85,0.30);  border-radius:var(--radius-md); margin:14px 0; }
.success-msg { background:rgba(154,178,162,0.10); color:var(--sage);  padding:14px 18px; border:1px solid rgba(154,178,162,0.30); border-radius:var(--radius-md); margin:14px 0; }
.info-msg    { background:rgba(206,190,111,0.08); color:var(--gold);  padding:14px 18px; border:1px solid rgba(206,190,111,0.25); border-radius:var(--radius-md); margin:14px 0; }

/* === Checkbox list === */
.checkbox-list {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:6px;
  max-height:320px; overflow:auto; border:1px solid var(--border-soft);
  border-radius:var(--radius-md); padding:14px; background:var(--bg-card-alt);
}
.checkbox-list label {
  display:flex; align-items:center; gap:10px; padding:6px;
  border-radius:var(--radius-sm); cursor:pointer; font-weight:400; font-size:13px;
  margin:0; color:var(--fg-primary);
}
.checkbox-list label:hover { background: var(--bg-card); }
.checkbox-list input[type=checkbox] { width: auto; margin: 0; accent-color: var(--purple-200); }

/* === Inline forms === */
.inline-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.inline-form > div { flex: 1; min-width: 140px; }
.inline-form > button { flex: none; }

/* === Phase banner === */
.phase-banner {
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-left:3px solid var(--gold); border-radius:var(--radius-md);
  padding:20px 24px; margin-bottom:24px;
}
.phase-banner.phase1 { border-left-color: var(--purple-200); }
.phase-banner.phase2 { border-left-color: var(--gold); }

/* === Floating summary === */
.floating-summary {
  position:sticky; top:0; background:var(--bg-deep);
  border-bottom:1px solid var(--border-soft); padding:14px 24px;
  margin:0 -24px 24px; display:flex; gap:24px; align-items:center; z-index:10;
}
.summary-stat {
  font-size:12px; color:var(--fg-muted);
  font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
}
.summary-stat strong {
  display:block; color:var(--fg-primary); font-size:22px; font-weight:600;
  font-family:var(--font-display); letter-spacing:-0.01em; margin-top:2px;
}

/* === Product cards === */
.product-card {
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:var(--radius-md); padding:18px; cursor:pointer; transition:all .15s;
  display:block; text-decoration:none; color:inherit;
}
.product-card:hover {
  border-color:var(--purple-200); transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.product-card.anchor    { border-left: 3px solid var(--gold); }
.product-card.completed { opacity: .65; }
.product-card.locked    { opacity: .45; cursor: not-allowed; pointer-events: none; }
.product-card strong    { color: var(--fg-primary); }

/* === Dashboard controls === */
.dashboard-controls {
  display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-bottom:18px;
  padding:14px 18px; background:var(--bg-card);
  border:1px solid var(--border-soft); border-radius:var(--radius-md);
}
.dashboard-controls .ctl {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-muted);
}
.dashboard-controls select { width: auto; min-width: 140px; }

/* === SVG hover tooltip === */
.svg-tooltip {
  position:absolute; background:var(--bg-deep); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); padding:12px 16px; font-size:13px; color:var(--fg-primary);
  box-shadow:0 12px 32px rgba(0,0,0,.6); pointer-events:none; z-index:50;
  max-width:300px; display:none;
}
.svg-tooltip.show { display: block; }
.svg-tooltip strong {
  display:block; font-family:var(--font-display); font-size:16px;
  color:var(--fg-primary); margin-bottom:6px;
}
.svg-tooltip .kpi-row {
  display:flex; justify-content:space-between; gap:18px; padding:3px 0;
  font-family:var(--font-mono); font-size:11px; color:var(--fg-secondary); letter-spacing:.04em;
}
.svg-tooltip .kpi-row .k {
  color:var(--fg-muted); text-transform:uppercase; letter-spacing:.08em;
}
.svg-tooltip .trend-up   { color: var(--sage); }
.svg-tooltip .trend-down { color: var(--rose); }
.svg-tooltip .trend-flat { color: var(--fg-muted); }

/* === KPI spreadsheet === */
.kpi-spreadsheet td input { padding: 5px 8px; font-size: 13px; }
.kpi-spreadsheet td       { padding: 6px 8px; }

.period-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.period-tab {
  padding:8px 14px; border-radius:var(--radius-md); background:var(--bg-card);
  border:1px solid var(--border-soft); color:var(--fg-secondary);
  text-decoration:none; font-size:13px;
  font-family:var(--font-mono); letter-spacing:.04em;
}
.period-tab:hover  { background: var(--bg-card-alt); color: var(--fg-primary); }
.period-tab.active { background: var(--purple-200); color: #2d2c38; border-color: var(--purple-200); font-weight: 600; }

/* === Conflict flags (Punkt 22.3) === */
.conflict-flag {
  font-family:var(--font-mono); letter-spacing:.04em; font-weight:600;
}

/* === Phase chevron progress === */
.phase-chevrons { display: flex; gap: 0; margin: 18px 0 20px; }
.phase-chevron {
  flex:1; position:relative; padding:14px 18px 14px 28px; text-align:center;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
  background:var(--bg-card-alt); color:var(--fg-dim);
  transition:background .2s, color .2s;
}
.phase-chevron:first-child { clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); padding-left:18px; border-radius:var(--radius-md) 0 0 var(--radius-md); }
.phase-chevron:last-child  { clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%); border-radius:0 var(--radius-md) var(--radius-md) 0; }
.phase-chevron.phase-done   { background:var(--sage); color:var(--bg-deep); }
.phase-chevron.phase-active { background:var(--purple-200); color:var(--bg-deep); }
.phase-chevron.phase-ready  { background:var(--gold); color:var(--bg-deep); }
.phase-chevron.phase-future { background:var(--bg-card-alt); color:var(--fg-dim); }
.phase-label { display:block; font-weight:600; font-size:13px; font-family:var(--font-sans); }
.phase-desc  { display:block; font-size:11px; font-family:var(--font-mono); margin-top:2px; opacity:.85; }

/* === Footer === */
.bpmf-footer {
  text-align:center; padding:32px 24px 24px; margin-top:48px;
  border-top:1px solid var(--border-soft);
  font-family:var(--font-mono); font-size:11px; color:var(--fg-dim);
  letter-spacing:.06em;
}

/* === Print-only elements === */
.print-only { display: none !important; }

/* === Print stylesheet === */
@media print {
  /* Reset to light background for print */
  :root {
    --bg-deep:#ffffff; --bg-app:#ffffff; --bg-card:#ffffff; --bg-card-alt:#f5f5f5;
    --border-soft:rgba(0,0,0,0.12); --border-strong:rgba(0,0,0,0.25);
    --fg-primary:#1a1a1a; --fg-secondary:#333333; --fg-muted:#666666; --fg-dim:#999999;
    --purple-200:#7c6fb0; --purple-300:#6b5fa0; --purple-400:#5a5090;
    --sage:#4a8060; --rose:#b05050; --coral:#c04040; --gold:#9a8a30;
  }
  body { background:#fff !important; color:#1a1a1a !important; font-size:11px; line-height:1.4; }

  /* Hide interactive / navigation elements */
  .no-print, .bpmf-header, .bpmf-footer, .bpmf-nav, .bpmf-actions,
  .dashboard-controls, .period-tabs, .svg-tooltip,
  .save-status, .side-nav { display:none !important; }

  /* Show print-only elements */
  .print-only { display:block !important; }

  /* Page setup */
  @page { size:A4 landscape; margin:15mm 12mm 18mm 12mm; }
  @page :first { margin-top:10mm; }

  /* Container full-width */
  .container, .container-wide { max-width:100%; padding:0; margin:0; }

  /* Matrix: full width on first page */
  #matrix-wrap { max-width:100% !important; margin:0 auto; }
  .matrix-svg {
    max-width:100% !important; border:1px solid #ccc !important;
    border-radius:0 !important; background:#fff !important;
  }

  /* Tables: readable print styling */
  table { font-size:10px; border:1px solid #ccc; page-break-inside:auto; }
  th { background:#f0f0f0 !important; color:#333 !important; font-size:9px; }
  td { border-bottom:1px solid #ddd; padding:6px 8px; }
  tr { page-break-inside:avoid; }

  /* Cards in print */
  .card, .card-alt { border:1px solid #ddd; background:#fff; page-break-inside:avoid; }

  /* Grid: single column for narrow print */
  .grid-4 { grid-template-columns:repeat(4,1fr); gap:8px; }

  /* Pills: ensure visible on white */
  .pill { border:1px solid #ccc; }
  .pill-anchor { background:#7c6fb0; color:#fff; }
  .quadrant-Optimal { background:#d3e5db; color:#2d5e3f; }
  .quadrant-FrustratedCustomers { background:#f5d4d4; color:#8b3a3a; }
  .quadrant-FrustratedOrganization { background:#f0ebc0; color:#6b5e10; }
  .quadrant-Deadweight { background:#e0ddf0; color:#4a4570; }

  /* Details: force open and visible in print */
  details { border:none; padding:0; display:block !important; }
  details summary { display:none !important; }
  details .details-body,
  details > div, details > table, details > p { display:block !important; }

  /* Show all detail panels (override JS tab display:none) */
  .detail-panel { display:block !important; page-break-before:auto; margin-top:16px; }

  /* Page breaks */
  h2 { page-break-after:avoid; margin-top:18px; font-size:18px; }
  h3 { page-break-after:avoid; }

  /* KPI stat cards smaller */
  .grid-4 .card { padding:10px; }
  .grid-4 .card div[style*="font-size:36px"] { font-size:20px !important; }

  /* Print header */
  .print-header {
    display:flex !important; justify-content:space-between; align-items:flex-start;
    padding:0 0 12px; margin-bottom:16px;
    border-bottom:2px solid #1a1a1a;
  }
  .print-header h1 { font-size:22px; margin:0; }
  .print-header .print-meta { text-align:right; font-size:10px; color:#666; font-family:var(--font-mono); }

  /* Print footer */
  .print-footer {
    display:block !important; position:fixed; bottom:0; left:0; right:0;
    text-align:center; font-size:9px; color:#999; font-family:var(--font-mono);
    letter-spacing:.06em; padding:8px 0;
    border-top:1px solid #ddd;
  }

  /* Respondent tokens table: hide in print (operational, not analytical) */
  .print-hide-tokens { display:none !important; }

  /* Links: no underline, show as text */
  a { color:#333 !important; text-decoration:none !important; }
}
</content>