/**
 * Sena Design System v1.0
 * Strategy Card: the Competitive Strategist's artifacts (Porter, Disruptive
 * Innovation, Playing to Win, Blue Ocean, Jobs to Be Done), and the card
 * family other agents share: the Pricing Agent's three, the Decision Maker's
 * six, the Market Analyst's five, the Positioning Agent's six, the Growth
 * Agent's five, the Operations Agent's five, the Problem Solver's five
 *
 * Requires: colors.css + theme.css
 *
 * Markup comes from svelte/src/lib/strategy-card.js (strategyArtifactHtml).
 * A 2 x 2 matrix: competitive advantage across, market scope down, the
 * user's position highlighted, then the recommended position underneath.
 */

.cs-artifact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-16);
  background: var(--bg-card);
  border: 1px solid var(--stroke-card);
  border-radius: var(--spacing-16);
  box-shadow: var(--shadow-card);
  margin: var(--spacing-12) 0;
  /* The value net re-lays itself out on a narrow card (@container below). */
  container-type: inline-size;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.cs-head { display: flex; flex-direction: column; gap: var(--spacing-4); }
.cs-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.cs-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: 1.3;
}
.cs-market { font-size: var(--text-sm); color: var(--text-secondary); }

/* ─── Matrix ─────────────────────────────────────────────────────────────── */
.cs-matrix {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: var(--spacing-8);
}
.cs-axis {
  display: grid;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.cs-axis-top {
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: 1fr 1fr;
  text-align: center;
}
/* Each label turns, not the column: rotating the whole column made its rows
   run sideways, so both labels sat side by side at mid-height instead of
   beside their own rows. */
.cs-axis-left {
  grid-column: 1;
  grid-row: 2;
  grid-template-rows: 1fr 1fr;
  row-gap: var(--spacing-8);
  align-items: center;
  justify-items: center;
}
.cs-axis-left span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
}
.cs-grid {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--spacing-8);
}
.cs-cell {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-12);
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--spacing-12);
}
.cs-cell-you {
  background: var(--bg-accent-light);
  border-color: var(--stroke-accent);
}
.cs-cell-label { font-size: var(--text-sm); color: var(--text-secondary); }
.cs-cell-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-6); }
.cs-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-4) var(--spacing-10, 10px);
  border-radius: 999px;
  background: var(--bg-primary);
  border: 1px solid var(--stroke-card);
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
}
.cs-chip-you {
  background: var(--bg-accent);
  border-color: var(--bg-accent);
  color: var(--text-on-accent);
  font-weight: var(--fw-bold);
}

/* Porter's four strategies each wear a soft tint of a data colour (DES-199),
   mixed over the card so dark mode follows on its own. The user's quadrant
   keeps its tint, deepened, with the accent outline. */
.cs-cell[data-cs-quadrant="cost-broad"] { --cs-tint: var(--data-neutral-2); }
.cs-cell[data-cs-quadrant="differentiation-broad"] { --cs-tint: var(--data-neutral-1); }
.cs-cell[data-cs-quadrant="cost-narrow"] { --cs-tint: var(--data-warning-1); }
.cs-cell[data-cs-quadrant="differentiation-narrow"] { --cs-tint: var(--data-neutral-3); }
.cs-matrix .cs-cell[data-cs-quadrant] {
  background: color-mix(in srgb, var(--cs-tint) 18%, var(--bg-card));
}
.cs-matrix .cs-cell[data-cs-quadrant].cs-cell-you {
  background: color-mix(in srgb, var(--cs-tint) 34%, var(--bg-card));
  border: 2px solid var(--fg-accent);
  padding: calc(var(--spacing-12) - 1px);
}

/* ─── Disruption diagram + ladder ────────────────────────────────────────── */
.cs-chart.cs-chart-disruption { min-height: 340px; }
/* Below this the diagram's labels can only collide; the tier rows beneath
   carry the same players, so the card falls back to them alone. */
@container (max-width: 560px) {
  .cs-chart.cs-chart-disruption { display: none; }
}
.cs-ladder { display: flex; flex-direction: column; gap: var(--spacing-8); }
.cs-tier {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: var(--spacing-12);
  align-items: center;
  padding: var(--spacing-12);
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--spacing-12);
}
.cs-tier.cs-cell-you { background: var(--bg-accent-light); border-color: var(--stroke-accent); }
.cs-tier-label { display: flex; flex-direction: column; gap: 2px; }
.cs-tier-hint { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.4; }
.cs-chip-motion {
  margin-left: var(--spacing-6);
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: normal;
  text-transform: none;
}
.cs-chip-you .cs-chip-motion { color: var(--text-on-accent); }
.cs-chip-motion-up .cs-chip-motion { color: var(--data-positive-1); }
.cs-chip-motion-down .cs-chip-motion { color: var(--data-negative-1, var(--text-tertiary)); }
.cs-chip-you.cs-chip-motion-up .cs-chip-motion,
.cs-chip-you.cs-chip-motion-down .cs-chip-motion { color: var(--text-on-accent); }
.cs-signals { display: flex; flex-direction: column; gap: var(--spacing-4); }
.cs-signals ul { padding-left: var(--spacing-16); list-style: disc; }
.cs-signals li { font-size: var(--text-base); color: var(--text-primary); line-height: 1.5; }

/* ─── Playing to Win cascade ─────────────────────────────────────────────── */
.cs-cascade { display: flex; flex-direction: column; gap: var(--spacing-8); }
.cs-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--spacing-12);
  padding: var(--spacing-12);
  background: var(--bg-secondary);
  border-radius: var(--spacing-12);
}
.cs-step:first-child { background: var(--bg-accent-light); border: 1px solid var(--stroke-accent); }
.cs-step-n {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1px solid var(--stroke-card);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}
.cs-step-body { display: flex; flex-direction: column; gap: var(--spacing-4); min-width: 0; }
.cs-step-body ul { padding-left: var(--spacing-16); list-style: disc; }
.cs-step-body li, .cs-step-single { font-size: var(--text-base); color: var(--text-primary); line-height: 1.5; }
.cs-step-single { font-weight: var(--fw-bold); }
.cs-step-empty { font-size: var(--text-sm); color: var(--text-tertiary); font-style: italic; }

/* ─── Blue Ocean: Strategy Canvas + four actions (DES-24) ────────────────── */
.cs-canvas, .cs-errc, .cs-section { display: flex; flex-direction: column; gap: var(--spacing-8); }
/* The chart engine draws into this box (renderCanvasChart on the chat page);
   until it does, or wherever it never runs, the scores table below shows. */
.cs-chart { min-height: 260px; }
.cs-chart:has(.cs-canvas-table) { min-height: 0; }
.cs-canvas-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cs-canvas-table th, .cs-canvas-table td {
  padding: var(--spacing-6) var(--spacing-8);
  border-bottom: 1px solid var(--stroke-card);
  text-align: left;
  color: var(--text-primary);
}
.cs-canvas-table th { color: var(--text-secondary); font-weight: var(--fw-bold); }
/* .cs-grid is placed inside the Porter matrix; the four-actions grid stands
   alone and flows to one column on a narrow card. */
.cs-grid.cs-grid-auto {
  grid-column: auto;
  grid-row: auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  grid-template-rows: none;
}
.cs-errc .cs-cell { min-height: 0; }
.cs-list { padding-left: var(--spacing-16); list-style: disc; }
.cs-list li { font-size: var(--text-base); color: var(--text-primary); line-height: 1.5; }

/* ─── Jobs to Be Done: the jobs map (DES-24) ─────────────────────────────── */
.cs-main-job {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-12);
  background: var(--bg-secondary);
  border-radius: var(--spacing-12);
}
.cs-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--spacing-8);
}
.cs-job {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--spacing-12);
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--spacing-12);
  min-width: 0;
}
.cs-job.cs-cell-you { background: var(--bg-accent-light); border-color: var(--stroke-accent); }
.cs-job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-8); }
.cs-job-name { font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--text-primary); line-height: 1.4; }
.cs-served {
  flex-shrink: 0;
  padding: 2px var(--spacing-8);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg-primary);
  border: 1px solid var(--stroke-card);
  color: var(--text-secondary);
  white-space: nowrap;
}
.cs-served-poorly { background: var(--bg-accent); border-color: var(--bg-accent); color: var(--text-on-accent); }
.cs-job-line { font-size: var(--text-sm); color: var(--text-primary); line-height: 1.5; }
.cs-job-key { display: block; font-size: var(--text-xs); color: var(--text-tertiary); }

/* ─── Pricing Agent (DES-18, markup from pricing-card.js) ────────────────── */
/* Key figures under a chart: the acceptable range, the optimal price. */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--spacing-8);
}
.cs-stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-12);
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--spacing-12);
}
.cs-stat-accent { background: var(--bg-accent-light); border-color: var(--stroke-accent); }
.cs-stat-label { font-size: var(--text-sm); color: var(--text-secondary); }
.cs-stat-value { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text-primary); }

/* Conjoint part-worths: one bar per level, its length relative to the
   strongest level of that attribute (--w, set by the markup). */
.cs-attr { gap: var(--spacing-6); }
.cs-level {
  display: grid;
  grid-template-columns: minmax(64px, 1fr) 2fr auto;
  align-items: center;
  gap: var(--spacing-8);
}
.cs-level-name { font-size: var(--text-sm); color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }
.cs-level-bar {
  display: block;
  height: 8px;
  width: var(--w, 0%);
  border-radius: 999px;
  background: var(--data-positive-1);
}
.cs-level-neg { background: var(--data-negative-1); }
.cs-level-val { font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* NPS: the score, then the promoter / passive / detractor split as one bar. */
.cs-nps {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-16);
  align-items: center;
  padding: var(--spacing-12);
  background: var(--bg-secondary);
  border-radius: var(--spacing-12);
}
.cs-nps-score { display: flex; flex-direction: column; gap: 2px; }
.cs-nps-number { font-size: calc(36px + var(--text-bump)); line-height: 40px; font-weight: var(--fw-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cs-nps-bench { font-size: var(--text-sm); color: var(--text-secondary); }
.cs-nps-split { display: flex; flex-direction: column; gap: var(--spacing-8); min-width: 0; }
.cs-nps-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--bg-primary); }
.cs-nps-seg { display: block; height: 100%; width: var(--w, 0%); }
.cs-nps-promoters { background: var(--data-positive-1); }
.cs-nps-passives { background: var(--data-neutral-2); }
.cs-nps-detractors { background: var(--data-negative-1); }
.cs-nps-legend { display: flex; flex-wrap: wrap; gap: var(--spacing-12); }
.cs-nps-key { display: inline-flex; align-items: center; gap: var(--spacing-6); font-size: var(--text-sm); color: var(--text-primary); }
.cs-nps-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ─── Decision Maker (DES-27, markup from decision-card.js) ──────────────── */
/* Wide tables (criteria or years across) scroll inside the card rather than
   pushing it wider than the chat column. */
.cs-table-wrap { overflow-x: auto; }
/* Numbers stay on one line (scores, cash flows); text tables (the
   scorecard's objectives) wrap like prose. */
.cs-table-wrap .cs-canvas-table td { font-variant-numeric: tabular-nums; }
.cs-table-wrap .cs-num-table td, .cs-raci-table td { white-space: nowrap; }
.cs-table-wrap .cs-canvas-table td:first-child { white-space: normal; min-width: 96px; }
.cs-th-sub { display: block; font-weight: var(--fw-regular, 400); color: var(--text-tertiary); }
.cs-row-win td { background: var(--bg-accent-light); }
.cs-row-win td:first-child { font-weight: var(--fw-bold); }
/* The bar well fits its bars: renderBarChart packs ~64px per row. */
.cs-chart.cs-chart-bar { min-height: calc(var(--rows, 3) * 64px + 24px); }
.cs-chart:has(> .cs-step-empty) { min-height: 0; }
.cs-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-12);
  background: var(--bg-secondary);
  border-radius: var(--spacing-12);
  font-size: var(--text-base);
  color: var(--text-primary);
  line-height: 1.5;
}

/* Scenario verdicts: a neutral pill with a status dot, readable in both
   themes (a filled data colour would carry the label's contrast). */
.cs-verdict-holds, .cs-verdict-strains, .cs-verdict-breaks,
.cs-force-low, .cs-force-medium, .cs-force-high,
.cs-impact-opportunity, .cs-impact-threat,
.cs-test-pill-confirmed, .cs-test-pill-killed, .cs-test-pill-open { display: inline-flex; align-items: center; gap: var(--spacing-6); }
.cs-verdict-holds::before, .cs-verdict-strains::before, .cs-verdict-breaks::before,
.cs-force-low::before, .cs-force-medium::before, .cs-force-high::before,
.cs-impact-opportunity::before, .cs-impact-threat::before,
.cs-test-pill-confirmed::before, .cs-test-pill-killed::before, .cs-test-pill-open::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.cs-verdict-holds::before { background: var(--data-positive-1); }
.cs-verdict-strains::before { background: var(--data-warning-1); }
.cs-verdict-breaks::before { background: var(--data-negative-1); }
/* A strong force squeezes profit: high reads as the warning. */
.cs-force-low::before, .cs-impact-opportunity::before { background: var(--data-positive-1); }
.cs-force-medium::before { background: var(--data-warning-1); }
.cs-force-high::before, .cs-impact-threat::before { background: var(--data-negative-1); }
.cs-test-pill-confirmed::before { background: var(--data-positive-1); }
.cs-test-pill-killed::before { background: var(--data-negative-1); }
.cs-test-pill-open::before { background: var(--data-warning-1); }

/* Axes with three or four divisions (risk map, Wardley map). */
.cs-axis-top.cs-axis-3 { grid-template-columns: repeat(3, 1fr); column-gap: var(--spacing-8); }
.cs-axis-top.cs-axis-4 { grid-template-columns: repeat(4, 1fr); column-gap: var(--spacing-8); }
.cs-axis-left.cs-axis-3 { grid-template-rows: repeat(3, 1fr); row-gap: var(--spacing-8); }
/* Two ends of a scale over any number of rows (Wardley depth). */
.cs-axis-left.cs-axis-2 span:first-child { align-self: start; }
.cs-axis-left.cs-axis-2 span:last-child { align-self: end; }

/* Real options: the plan, and its options branching off it. The connectors
   use --stroke-primary: --stroke-card nearly vanishes on a dark card. */
.cs-tree { display: flex; flex-direction: column; gap: var(--spacing-8); }
.cs-tree-branches {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin-left: var(--spacing-16);
  padding-left: var(--spacing-16);
  border-left: 2px solid var(--stroke-primary);
}
.cs-tree-branches > .cs-job { position: relative; }
.cs-tree-branches > .cs-job::before {
  content: '';
  position: absolute;
  top: var(--spacing-24);
  left: calc(-1 * var(--spacing-16) - 2px);
  width: var(--spacing-16);
  border-top: 2px solid var(--stroke-primary);
}

/* Pre-mortem: likelihood down, impact across, the danger zone tinted. */
.cs-riskmap, .cs-wardley {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: var(--spacing-8);
}
.cs-riskgrid, .cs-wardley-grid {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  gap: var(--spacing-8);
  min-width: 0;
}
.cs-riskgrid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.cs-risk, .cs-wcell {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--spacing-6);
  min-width: 0;
  min-height: 64px;
  padding: var(--spacing-8);
  background: var(--bg-secondary);
  border-radius: var(--spacing-12);
}
.cs-risk-hot { background: var(--bg-error-subtle); }
.cs-risk .cs-chip, .cs-wcell .cs-chip {
  flex-wrap: wrap;
  column-gap: var(--spacing-6);
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Below these widths the cells get too narrow to read: the map keeps its
   width and scrolls inside the card (.cs-table-wrap), like the wide tables. */
.cs-riskmap { min-width: 420px; }
.cs-wardley { min-width: 560px; }

/* Wardley map: evolution stages across, depth in the value chain down. */
.cs-wardley-grid { grid-template-columns: repeat(4, 1fr); }
.cs-wcell { min-height: 48px; }
.cs-chip-soon { border-style: dashed; border-color: var(--fg-accent); }
.cs-chip-move {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.cs-chip-you .cs-chip-move { color: var(--text-on-accent); }

/* ─── Market Analyst (DES-12, markup from market-card.js) ────────────────── */
.cs-forces { display: flex; flex-direction: column; gap: var(--spacing-8); }
.cs-chart.cs-chart-radar { min-height: 320px; }

/* PESTEL: one column per letter, each factor tagged by impact and horizon. */
.cs-pestel .cs-cell { min-height: 0; }
.cs-factor {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--spacing-8);
  border: 1px solid var(--stroke-primary);
  border-radius: var(--spacing-8);
}
.cs-factor-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-6); }
.cs-factor-when { font-size: var(--text-sm); color: var(--text-tertiary); }

/* Value chain: the activities as a strip, cost and value as three-dot
   meters (filled up to the level). */
.cs-chain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: var(--spacing-8);
}
/* The primary activities stay one row, in order: on a phone the row
   scrolls inside the card (.cs-table-wrap) rather than wrapping. */
.cs-chain-primary {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(104px, 1fr);
}
.cs-activity {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  min-width: 0;
  padding: var(--spacing-12);
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--spacing-12);
}
.cs-activity.cs-cell-you { background: var(--bg-accent-light); border-color: var(--stroke-accent); }
.cs-meters { display: flex; flex-direction: column; gap: var(--spacing-4); }
.cs-meter { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-8); }
.cs-meter-dots { display: inline-flex; gap: var(--spacing-2); }
.cs-meter-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--stroke-primary); }
.cs-meter[data-cs-meter="low"] i:nth-child(-n+1),
.cs-meter[data-cs-meter="medium"] i:nth-child(-n+2),
.cs-meter[data-cs-meter="high"] i { background: var(--fg-secondary); }

/* Value net: customers above, suppliers below, competitors and
   complementors either side, the company in the middle. */
.cs-net {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    ". customers ."
    "competitors company complementors"
    ". suppliers .";
  gap: var(--spacing-8);
}
.cs-net .cs-cell { min-height: 0; min-width: 0; }
.cs-net .cs-chip { white-space: normal; max-width: 100%; }
.cs-net-customers { grid-area: customers; }
.cs-net-competitors { grid-area: competitors; }
.cs-net-complementors { grid-area: complementors; }
.cs-net-suppliers { grid-area: suppliers; }
.cs-net-company {
  grid-area: company;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12);
}
@container (max-width: 520px) {
  .cs-net {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "company" "customers" "competitors" "complementors" "suppliers";
  }
  .cs-net-company { justify-content: flex-start; padding: 0; }
}

/* ─── Positioning Agent (DES-13, markup from positioning-card.js) ────────── */
/* SWOT: always 2 x 2 (the auto grid would make it 3 + 1), helpful on the
   left edge in green, harmful in red. */
/* .cs-grid.cs-swot: .cs-grid.cs-grid-auto would outrank a lone class. */
.cs-grid.cs-swot, .cs-swot + .cs-errc .cs-grid-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-swot .cs-cell, .cs-swot + .cs-errc .cs-cell { min-height: 0; }
.cs-swot-strengths, .cs-swot-opportunities { border-left: 3px solid var(--data-positive-1); }
.cs-swot-weaknesses, .cs-swot-threats { border-left: 3px solid var(--data-negative-1); }

/* VRIO: each resource climbs the four tests; the one it fails is marked and
   the ones it never reaches are dimmed. */
.cs-vrio { display: flex; flex-direction: column; gap: var(--spacing-8); }
.cs-vrio-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-12);
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--spacing-12);
}
.cs-vrio-row.cs-cell-you { background: var(--bg-accent-light); border-color: var(--stroke-accent); }
.cs-vrio-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-vrio-steps { display: flex; flex-wrap: wrap; gap: var(--spacing-4); }
.cs-vrio-step {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: 2px var(--spacing-8);
  border: 1px solid var(--stroke-primary);
  border-radius: 999px;
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
}
.cs-vrio-step .fa-solid { font-size: 10px; letter-spacing: normal; text-transform: none; }
.cs-vrio-pass .fa-solid { color: var(--data-positive-1); }
.cs-vrio-fail { border-color: var(--data-negative-1); }
.cs-vrio-fail .fa-solid { color: var(--data-negative-1); }
.cs-vrio-skip { color: var(--text-tertiary); border-style: dashed; }

/* Competence tree: branches, trunk, roots, top to bottom. */
.cs-ctree { display: flex; flex-direction: column; gap: var(--spacing-8); }
.cs-ctree-tier {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  align-items: start;
  gap: var(--spacing-12);
  padding: var(--spacing-12);
  background: var(--bg-secondary);
  border-radius: var(--spacing-12);
}
.cs-ctree-cards { display: flex; flex-wrap: wrap; gap: var(--spacing-8); min-width: 0; }
.cs-ctree-card {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--stroke-primary);
  border-radius: var(--spacing-8);
}
.cs-ctree-card.cs-cell-you { background: var(--bg-accent-light); border-color: var(--stroke-accent); }

/* McKinsey 7S: hard S's left, soft right, shared values at the hub. */
.cs-7s {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.8fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-8);
}
.cs-7s-side { display: flex; flex-direction: column; gap: var(--spacing-8); min-width: 0; }
.cs-7s .cs-cell { min-height: 0; }
.cs-7s .cs-cell.cs-7s-misfit { border-color: var(--data-negative-1); }

/* Business Model Canvas: the canonical layout, partners to segments across
   the top, costs and revenue along the bottom. */
.cs-bmc {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-areas:
    "partners partners activities activities value value relationships relationships segments segments"
    "partners partners resources resources value value channels channels segments segments"
    "costs costs costs costs costs revenue revenue revenue revenue revenue";
  gap: var(--spacing-8);
}
.cs-bmc .cs-cell { min-height: 0; min-width: 0; }
.cs-bmc .cs-list li { font-size: var(--text-sm); }
.cs-bmc .cs-cell.cs-bmc-weak { border-color: var(--data-negative-1); }
.cs-bmc-partners { grid-area: partners; }
.cs-bmc-activities { grid-area: activities; }
.cs-bmc-resources { grid-area: resources; }
.cs-bmc-value { grid-area: value; }
.cs-bmc-relationships { grid-area: relationships; }
.cs-bmc-channels { grid-area: channels; }
.cs-bmc-segments { grid-area: segments; }
.cs-bmc-costs { grid-area: costs; }
.cs-bmc-revenue { grid-area: revenue; }

/* Each layout stacks at the width where its own cells stop reading: the
   ten-column canvas first, the 2 x 2 last. */
@container (max-width: 600px) {
  .cs-bmc { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .cs-bmc > * { grid-area: auto; }
}
@container (max-width: 480px) {
  .cs-vrio-row, .cs-ctree-tier, .cs-7s { grid-template-columns: minmax(0, 1fr); }
  .cs-7s-hub { order: -1; }
}
@container (max-width: 420px) {
  .cs-grid.cs-swot, .cs-swot + .cs-errc .cs-grid-auto { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Growth Agent (DES-14, markup from growth-card.js) ──────────────────── */
.cs-chart.cs-chart-bcg { min-height: 340px; }
.cs-bcg-groups .cs-cell { min-height: 0; }
/* Nine-box bands: invest in the accent, hold neutral, harvest in red. */
.cs-risk.cs-band-invest, .cs-band-swatch.cs-band-invest { background: var(--bg-accent-light); }
.cs-risk.cs-band-hold, .cs-band-swatch.cs-band-hold { background: var(--bg-secondary); }
.cs-risk.cs-band-harvest, .cs-band-swatch.cs-band-harvest { background: var(--bg-error-subtle); }
.cs-band-swatch { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--stroke-primary); }
/* Ansoff: the moves in each cell; risk reads from the pill. */
.cs-ansoff-moves { display: flex; flex-direction: column; gap: var(--spacing-6); }
.cs-factor.cs-cell-you { background: var(--bg-accent-light); border-color: var(--stroke-accent); }
/* Three Horizons: the investment split in the curves' colours. */
.cs-horizon-h1 { background: var(--data-positive-1); }
.cs-horizon-h2 { background: var(--data-neutral-2); }
.cs-horizon-h3 { background: var(--data-neutral-3); }
/* Profit pools: each stage a column, width its revenue share, height its
   margin against the deepest stage's; names underneath at the same widths. */
.cs-pools {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 200px;
  padding-top: var(--spacing-24);
  border-bottom: 1px solid var(--stroke-primary);
}
.cs-pool {
  position: relative;
  flex: 0 0 calc(var(--w, 10%) - 2px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}
.cs-pool-bar {
  display: block;
  height: var(--h, 0%);
  min-height: 2px;
  border-radius: var(--spacing-4) var(--spacing-4) 0 0;
  background: var(--data-neutral-2);
}
.cs-pool-deep .cs-pool-bar { background: var(--data-positive-1); }
.cs-pool-neg .cs-pool-bar { background: var(--data-negative-1); }
/* Above the bar, out of the flow, so every bar's height is measured against
   the same box (in the flow, the label squeezed only the tallest bar). */
.cs-pool-margin {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--h, 0%) + 2px);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}
.cs-pools-names { display: flex; gap: 2px; }
.cs-pools-names span {
  flex: 0 0 calc(var(--w, 10%) - 2px);
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Operations Agent (DES-15, markup from operations-card.js) ──────────── */
/* Balanced Scorecard: the perspectives stacked, financial on top, joined by
   the strategy map's arrows pointing up. */
.cs-bsc { display: flex; flex-direction: column; }
.cs-bsc-tier {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-12);
  background: var(--bg-secondary);
  border-radius: var(--spacing-12);
}
.cs-bsc-link { display: flex; justify-content: center; padding: var(--spacing-4) 0; }
.cs-bsc-link .fa-solid { font-size: 12px; color: var(--text-tertiary); letter-spacing: normal; text-transform: none; }

/* OKRs: one card per objective, each key result with its bar and pill. */
.cs-okrs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--spacing-8);
}
.cs-kr {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--stroke-primary);
}
.cs-kr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8); }
.cs-kr-bar {
  flex: 1 1 80px;
  height: 6px;
  border-radius: 999px;
  background: var(--stroke-primary);
  overflow: hidden;
}
.cs-kr-bar span { display: block; height: 100%; width: var(--w, 0%); background: var(--data-positive-1); }
.cs-kr-pct { font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Lean: the process as a flow of steps, hotspots outlined in red, the steps
   that add value edged in green. */
.cs-flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-6); }
.cs-flow-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-4);
  min-width: 110px;
  max-width: 190px;
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--stroke-primary);
  border-radius: var(--spacing-8);
}
.cs-flow-va { border-left: 3px solid var(--data-positive-1); }
.cs-flow-hot { border-color: var(--data-negative-1); }
.cs-flow-hot.cs-flow-va { border-left-color: var(--data-positive-1); }
.cs-flow-arrow { font-size: 12px; color: var(--text-tertiary); letter-spacing: normal; text-transform: none; }

/* Kotter: the cascade's timeline, the current step in the accent (not the
   first, as Playing to Win's cascade does), done steps checked. */
.cs-kotter .cs-step:first-child { background: var(--bg-secondary); border: 0; }
.cs-kotter .cs-step.cs-kotter-now { background: var(--bg-accent-light); border: 1px solid var(--stroke-accent); }
.cs-kotter-done .cs-step-n { background: var(--bg-accent); border-color: var(--bg-accent); color: var(--text-on-accent); }
.cs-kotter-done .cs-step-n .fa-solid { font-size: 12px; letter-spacing: normal; text-transform: none; }
.cs-kotter-next .cs-cell-label { color: var(--text-tertiary); }

/* RACI: one letter per cell; rows without a single owner tinted red. */
.cs-raci-table th:not(:first-child), .cs-raci-table td.cs-raci-cell { text-align: center; }
.cs-raci-table td:first-child .cs-served { margin-left: var(--spacing-8); }
.cs-raci-flagged td { background: var(--bg-error-subtle); }
.cs-raci {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--spacing-6);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.cs-raci-A { background: var(--bg-accent); border-color: var(--bg-accent); color: var(--text-on-accent); }
.cs-raci-R { background: var(--bg-accent-light); border-color: var(--stroke-accent); }
.cs-raci-C { border-color: var(--stroke-primary); }
.cs-raci-I { color: var(--text-tertiary); border-style: dashed; border-color: var(--stroke-primary); }

/* ─── Problem Solver (DES-16, markup from problem-card.js) ──────────────── */
/* Issue tree: each level indented off its parent's line, a tick to each
   branch; the branches to answer first in the accent. */
.cs-itree { display: flex; flex-direction: column; gap: var(--spacing-8); }
.cs-itree-kids {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin-left: var(--spacing-16);
  padding-left: var(--spacing-16);
  border-left: 2px solid var(--stroke-primary);
}
.cs-itree-kids > .cs-itree-node { position: relative; display: flex; flex-direction: column; gap: var(--spacing-8); }
.cs-itree-kids > .cs-itree-node::before {
  content: '';
  position: absolute;
  top: 20px;
  left: calc(-1 * var(--spacing-16) - 2px);
  width: var(--spacing-16);
  border-top: 2px solid var(--stroke-primary);
}
.cs-itree-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--stroke-primary);
  border-radius: var(--spacing-8);
}
.cs-itree-q.cs-cell-you { background: var(--bg-accent-light); border-color: var(--stroke-accent); }

/* Hypothesis: the statement tinted by where the evidence stands. */
.cs-hypo-confirmed { background: var(--bg-accent-light); }
.cs-hypo-killed { background: var(--bg-error-subtle); }
.cs-job.cs-test-killed { border-color: var(--data-negative-1); }

/* Pyramid: the answer on top, the arguments side by side under it. */
.cs-pyr { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-8); }
.cs-pyr-top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: min(100%, 72%);
  padding: var(--spacing-12);
  border: 1px solid var(--stroke-accent);
  border-radius: var(--spacing-12);
}
.cs-pyr-args {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--spacing-8);
}

/* Fishbone: bones above and below a spine that ends in the problem. The
   whole diagram keeps its width and scrolls inside the card on a phone. */
.cs-fish { display: flex; flex-direction: column; gap: var(--spacing-8); min-width: 560px; }
.cs-fish-row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) 160px;
  gap: var(--spacing-8);
}
.cs-bone {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-8) var(--spacing-12);
  background: var(--bg-secondary);
  border-radius: var(--spacing-8);
}
.cs-fish-row:first-child .cs-bone { border-bottom: 2px solid var(--fg-secondary); }
.cs-fish-row:last-child .cs-bone { border-top: 2px solid var(--fg-secondary); }
.cs-bone .cs-list li { font-size: var(--text-sm); }
.cs-bone .cs-list li.cs-bone-root {
  font-weight: var(--fw-bold);
  background: var(--bg-accent-light);
  border-radius: var(--spacing-4);
}
.cs-fish-spine { display: flex; align-items: center; gap: var(--spacing-8); }
.cs-fish-line { flex: 1; height: 3px; border-radius: 999px; background: var(--fg-secondary); }
.cs-fish-head {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-12);
  background: var(--bg-error-subtle);
  border: 1px solid var(--data-negative-1);
  border-radius: var(--spacing-12);
}
.cs-whys .cs-step:first-child { background: var(--bg-secondary); border: 0; }

/* Pareto: the chart well. */
.cs-chart.cs-chart-pareto { min-height: 300px; }

/* ─── Summary and recommendation ─────────────────────────────────────────── */
.cs-summary { font-size: var(--text-base); color: var(--text-primary); line-height: 1.5; }
.cs-rec {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
  background: var(--bg-secondary);
  border-radius: var(--spacing-12);
}
.cs-rec-head { display: flex; flex-direction: column; gap: var(--spacing-4); }
.cs-rec-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.cs-rec-strategy { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text-primary); }
.cs-rec-block { display: flex; flex-direction: column; gap: var(--spacing-4); }
.cs-rec-label { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-secondary); }
.cs-rec-block ul { padding-left: var(--spacing-16); list-style: disc; }
.cs-rec-block li { font-size: var(--text-base); color: var(--text-primary); line-height: 1.5; }
.cs-sources { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.5; }

/* ─── Decision Maker: draggable weights and discount rate ────────────────── */
/* Markup from decision-card.js (matrixHtml, npvHtml), listeners in
   chat/decision-wire.js. The slider recipe follows the simulation's
   (.fp-slider): an accent fill up to the thumb via --fill. Each amber tick
   marks where another option takes the lead; --at is its place on the track
   as a 0 to 1 fraction, inset by half the thumb so it lines up with the
   thumb's centre. */
.cs-dm {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.cs-dm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-8);
}
.cs-dm-reset {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--fg-accent);
  cursor: pointer;
}
.cs-dm-reset:hover { text-decoration: underline; }
.cs-dm-reset[hidden] { display: none; }
.cs-dm-row {
  display: grid;
  grid-template-columns: minmax(96px, 32%) minmax(0, 1fr) 48px;
  align-items: center;
  gap: var(--spacing-12);
}
.cs-dm-row-solo { grid-template-columns: minmax(0, 1fr) 48px; }
.cs-dm-name {
  font-size: var(--text-base);
  color: var(--text-primary);
  line-height: 1.3;
}
.cs-dm-val {
  font-size: var(--text-base);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cs-dm-track {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 24px;
}
.cs-dm-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--bg-accent) 0 var(--fill, 50%),
    var(--stroke-contrast-light, var(--stroke-primary)) var(--fill, 50%) 100%
  );
  outline: none;
  cursor: pointer;
}
.cs-dm-slider:focus-visible { box-shadow: 0 0 0 3px var(--bg-accent-light); }
.cs-dm-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1px solid var(--stroke-contrast-light, var(--stroke-primary));
  box-shadow: var(--shadow-card);
  cursor: grab;
}
.cs-dm-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1px solid var(--stroke-contrast-light, var(--stroke-primary));
  box-shadow: var(--shadow-card);
  cursor: grab;
}
.cs-dm-tick {
  position: absolute;
  top: 50%;
  left: calc(9px + (100% - 18px) * var(--at, 0));
  width: 2px;
  height: 14px;
  margin-left: -1px;
  transform: translateY(-50%);
  background: var(--data-warning-2);
  pointer-events: none;
}
.cs-dm-tick[hidden] { display: none; }
.cs-dm-flip {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.5;
}
/* The user's values crown a different winner than Sena's: say so above the
   summary, and quiet Sena's summary and recommendation, which argue for
   its own winner. */
.cs-dm-notice {
  padding: var(--spacing-12);
  border: 1px solid var(--data-warning-2);
  border-radius: var(--spacing-12);
  font-size: var(--text-base);
  color: var(--text-primary);
  line-height: 1.5;
}
.cs-dm-notice[hidden] { display: none; }
.cs-artifact > .cs-summary,
.cs-artifact > .cs-rec { transition: opacity var(--duration-base) var(--ease-out); }
.cs-artifact.cs-overruled > .cs-summary,
.cs-artifact.cs-overruled > .cs-rec { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  .cs-artifact > .cs-summary,
  .cs-artifact > .cs-rec { transition: none; }
}

/* ─── Pricing Agent: test a price, drag a segment's lifetime value ──────── */
/* Markup from pricing-card.js (vwTestHtml, segmentsHtml), listeners in
   chat/decision-wire.js, slider recipe from .cs-dm-slider above. The price
   test shades the acceptable range on the track (--lo, --hi as percents)
   instead of filling up to the thumb. */
.cs-vw-slider {
  background: linear-gradient(
    to right,
    var(--stroke-contrast-light, var(--stroke-primary)) 0 var(--lo, 0%),
    var(--bg-accent) var(--lo, 0%) var(--hi, 0%),
    var(--stroke-contrast-light, var(--stroke-primary)) var(--hi, 0%) 100%
  );
}
.cs-vw-legend {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.cs-vw-shares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-8);
}
.cs-vw-share {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-8) var(--spacing-12);
  background: var(--bg-secondary);
  border-radius: var(--spacing-12);
}
.cs-vw-share-value {
  font-size: var(--text-lg);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* Segment values are money: give the value column room. */
.cs-dm-row:has(.cs-sg-val) { grid-template-columns: minmax(96px, 28%) minmax(0, 1fr) 88px; }
/* The Van Westendorp card, simplified (2026-10-19): the answer first, one
   line on how to read the chart. */
.cs-vw-answer {
  font-size: var(--text-lg);
  color: var(--text-primary);
  line-height: 1.4;
}
.cs-vw-answer strong { font-weight: var(--fw-bold); }
.cs-vw-help {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}