/* ═══════════════════════════════════════════════════════════════
   scenarios.css — Decision Tree (zoomable 2D flowchart) + animated
   practice (investigation simulator).
   Clean light theme · white surfaces · semantic accents · no gradients.
   Crisp black ink everywhere — no gray text. Mobile-first.
   ═══════════════════════════════════════════════════════════════ */

/* Accent helpers shared by both features */
.accent-bp    { --accent: var(--brand); --accent-wash: var(--brand-wash); }
.accent-bg    { --accent: var(--blue);  --accent-wash: var(--blue-wash); }
.accent-ortho { --accent: var(--teal);  --accent-wash: var(--teal-wash); }
.accent-hr    { --accent: var(--indigo); --accent-wash: var(--indigo-wash); }
.accent-bal   { --accent: var(--good);  --accent-wash: var(--good-wash); }

/* ═════════════════ DECISION TREE — home (picker) ═════════════════ */
.dt-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.9rem; margin: 0 auto 1rem; }
.dt-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; font-weight: 700; color: var(--ink); }
.dt-legend-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 16%, transparent); }
.dt-legend-item.kind-good  { --k: var(--good); }
.dt-legend-item.kind-warn  { --k: var(--warn); }
.dt-legend-item.kind-refer { --k: var(--refer); }
.dt-legend-item.kind-stop  { --k: var(--stop); }

.dt-intro { max-width: 620px; margin: 0 auto 1.1rem; text-align: center; font-size: 0.92rem; line-height: 1.6; color: var(--ink); font-weight: 500; }
.dt-intro strong { font-weight: 700; }

.dt-track-grid { display: grid; gap: 0.8rem; max-width: 640px; margin: 0 auto; }
.dt-track-card {
  display: flex; align-items: center; gap: 0.9rem; text-align: left; width: 100%;
  padding: 1.05rem 1.1rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--accent);
  border-radius: var(--radius); font-family: inherit; color: var(--ink); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dt-track-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); }
.dt-track-card:active { transform: scale(0.99); }
.dt-track-icon {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: var(--accent-wash);
}
.dt-track-text { display: flex; flex-direction: column; gap: 0.3rem; margin-right: auto; min-width: 0; }
.dt-track-title { font-weight: 800; font-size: 1.04rem; letter-spacing: -0.2px; color: var(--ink); }
.dt-track-sub { font-size: 0.84rem; color: var(--ink); font-weight: 500; line-height: 1.45; }
.dt-track-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.1rem; }
.dt-meta-chip {
  display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 700; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  padding: 0.16rem 0.55rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.dt-meta-progress { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.dt-meta-progress.complete { background: var(--good); border-color: var(--good); color: #fff; }
.dt-track-go {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-wash); color: var(--accent); font-size: 1.05rem; font-weight: 800;
  transition: transform var(--dur) var(--ease);
}
.dt-track-card:hover .dt-track-go { transform: translateX(2px); }

/* ═════════════════ DECISION TREE — tree chrome (bar + progress) ═════════════════ */
.dt-open { max-width: 720px; margin: 0 auto; }
.dt-bar { display: flex; align-items: center; gap: 0.5rem 0.7rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.dt-bar-btn {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--ink);
  padding: 0.5rem 0.95rem; min-height: 40px; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dt-bar-btn:hover { border-color: var(--brand); color: var(--brand); }
.dt-bar-btn:active { transform: scale(0.97); }
.dt-bar-track {
  font-weight: 800; font-size: 0.95rem; color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.1rem; padding: 0 0.2rem; margin-right: auto;
}
/* Walk / Full-map segmented toggle */
.dt-mode-toggle {
  display: flex; gap: 3px; background: var(--line); border-radius: var(--radius-pill); padding: 3px;
}
.dt-mode-btn {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 0.8rem; font-weight: 800; color: var(--ink);
  padding: 0.42rem 0.9rem; min-height: 38px; border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dt-mode-btn.active { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }

.dt-progress {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.55rem 0.9rem; margin-bottom: 1rem;
  font-size: 0.84rem; font-weight: 600; color: var(--ink); box-shadow: var(--shadow-sm);
}
.dt-progress strong { font-weight: 800; color: var(--ink); }

/* ═════════════════ DECISION TREE — WALK mode ═════════════════ */
.dt-history { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1rem; }
.dt-history-label { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink); padding-left: 0.2rem; }
.dt-hist-row {
  display: flex; align-items: center; gap: 0.7rem; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.55rem 0.8rem; min-height: 52px; cursor: pointer; font-family: inherit;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dt-hist-row:hover { border-color: var(--ink); background: var(--wash); }
.dt-hist-row:active { transform: scale(0.99); }
.dt-hist-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; color: var(--ink); background: var(--wash); border: 1px solid var(--line-strong);
}
.dt-hist-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; margin-right: auto; }
.dt-hist-q { font-size: 0.82rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.dt-hist-a { font-size: 0.78rem; font-weight: 700; color: var(--accent); }
.dt-hist-redo {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 800; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}

.dt-walk-card {
  background: var(--surface); border: 1px solid var(--line-strong); border-left: 5px solid var(--accent);
  border-radius: var(--radius); padding: 1.15rem 1.2rem; box-shadow: var(--shadow);
  scroll-margin-top: 78px;
}
.dt-current { animation: fadeUp var(--dur-lg) var(--ease-spring) both; }
.dt-walk-kicker {
  display: inline-block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--accent); background: var(--accent-wash); padding: 0.22rem 0.6rem; border-radius: var(--radius-pill); margin-bottom: 0.55rem;
}
.dt-walk-q { font-family: var(--font-display); font-size: clamp(1.15rem, 4vw, 1.34rem); font-weight: 600; line-height: 1.35; color: var(--ink); letter-spacing: -0.2px; }
.dt-walk-q strong { color: var(--ink); font-weight: 700; }
.dt-walk-why {
  margin-top: 0.7rem; font-size: 0.88rem; line-height: 1.55; color: var(--ink); font-weight: 500;
  background: var(--wash); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem;
}
.dt-walk-why strong, .dt-walk-why em { font-weight: 700; font-style: normal; }
.dt-walk-choices { display: grid; gap: 0.55rem; margin-top: 1rem; }
.dt-walk-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; text-align: left;
  padding: 0.8rem 1rem; min-height: 54px; width: 100%;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-family: inherit; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (hover: hover) {
  .dt-walk-choice:hover { border-color: var(--ink); background: var(--wash); }
}
.dt-walk-choice:active { transform: scale(0.99); }
.dt-walk-choice-label { font-size: 0.96rem; font-weight: 700; line-height: 1.4; }
.dt-walk-choice-note { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.dt-walk-backlink {
  margin-top: 0.9rem; background: none; border: none; font-family: inherit; cursor: pointer;
  color: var(--ink); font-weight: 700; font-size: 0.82rem; text-decoration: underline; text-underline-offset: 3px; padding: 0.2rem 0;
}
.dt-walk-backlink:hover { color: var(--accent); }
.dt-walk-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.1rem; }
.dt-walk-btn {
  width: 100%; padding: 0.7rem 1rem; min-height: 48px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-family: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dt-walk-btn:hover { border-color: var(--ink); background: var(--wash); }
.dt-walk-btn:active { transform: scale(0.98); }
.dt-walk-btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.dt-walk-btn.primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); color: #fff; }

/* ═════════════════ DECISION TREE — outcome cards (walk + map) ═════════════════ */
.dt-outcome {
  position: relative;
  background: var(--surface); border: 1px solid var(--line-strong); border-left: 5px solid var(--k);
  border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm);
  scroll-margin-top: 78px;
}
.dt-outcome.big { padding: 1.15rem 1.2rem; box-shadow: var(--shadow); }
.dt-outcome.kind-good  { --k: var(--good); }
.dt-outcome.kind-warn  { --k: var(--warn); }
.dt-outcome.kind-refer { --k: var(--refer); }
.dt-outcome.kind-stop  { --k: var(--stop); }
.dt-outcome-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
.dt-outcome-badge {
  display: inline-block; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: #fff; background: var(--k); padding: 0.22rem 0.65rem; border-radius: var(--radius-pill);
}
.dt-outcome-title { font-family: var(--font-display); font-size: clamp(1.1rem, 3.6vw, 1.28rem); font-weight: 700; letter-spacing: -0.2px; color: var(--ink); margin-bottom: 0.35rem; line-height: 1.25; }
.dt-outcome-body { font-size: 0.92rem; line-height: 1.55; color: var(--ink); font-weight: 500; }
.dt-outcome-body strong { font-weight: 700; }
.dt-outcome-points { margin: 0.6rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.dt-outcome-points li { font-size: 0.9rem; line-height: 1.5; color: var(--ink); font-weight: 500; }
.dt-outcome-points li::marker { color: var(--k); font-weight: 800; }
.dt-outcome-points strong { font-weight: 700; }
.dt-outcome-link {
  margin-top: 0.7rem; background: none; border: none; font-family: inherit; cursor: pointer;
  color: var(--brand); font-weight: 800; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; padding: 0; display: block; text-align: left;
}
.dt-outcome-seen {
  position: absolute; top: 0.85rem; right: 0.9rem;
  font-size: 0.68rem; font-weight: 800; color: var(--good);
  background: var(--good-wash); border: 1px solid var(--good);
  padding: 0.14rem 0.5rem; border-radius: var(--radius-pill);
}

/* ═════════════════ DECISION TREE — FULL MAP mode ═════════════════
   A quiet tree: one thin neutral guide line per level, outlined branch
   labels, and outcomes collapsed to a single row until tapped. Color is
   reserved for the outcome badges, where it means something. */
.dt-map { display: flex; flex-direction: column; gap: 0.4rem; }
.dt-map-hint { font-size: 0.84rem; line-height: 1.55; color: var(--ink); font-weight: 500; margin-bottom: 0.6rem; text-align: center; max-width: 560px; align-self: center; }
.dt-map-hint strong { font-weight: 700; }
.dt-map-node { display: flex; flex-direction: column; }
.dt-map-q {
  position: relative;
  background: var(--surface); border: 1px solid var(--line-strong); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; box-shadow: var(--shadow-sm);
  scroll-margin-top: 78px;
}
.dt-map-qtext { font-size: 0.95rem; font-weight: 700; line-height: 1.4; color: var(--ink); padding-right: 6.4rem; }
.dt-map-qtext strong { color: var(--ink); }
.dt-map-walkbtn {
  position: absolute; top: 0.7rem; right: 0.8rem;
  background: none; border: none; padding: 0.1rem 0;
  color: var(--ink); font-family: inherit; font-size: 0.72rem; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.dt-map-walkbtn:hover { color: var(--accent); }
.dt-map-branches { display: flex; flex-direction: column; gap: 0.3rem; padding-left: 1rem; margin: 0.4rem 0 0.7rem; border-left: 1.5px solid var(--line-strong); }
.dt-map-branch { position: relative; padding-top: 0.35rem; }
.dt-map-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  color: var(--ink); font-family: inherit; font-size: 0.76rem; font-weight: 800;
  padding: 0.3rem 0.75rem; min-height: 32px; cursor: pointer; margin-bottom: 0.4rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dt-map-pill:hover { border-color: var(--ink); background: var(--wash); }
.dt-map-pill::after { content: '▾'; font-size: 0.7em; }
.dt-map-pill.collapsed { background: var(--wash); }
.dt-map-pill.collapsed::after { content: '▸'; }
.dt-map-child { padding-left: 0.2rem; }
.dt-map-jump {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: none; padding: 0.25rem 0; min-height: 34px;
  color: var(--ink); font-family: inherit; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; text-align: left;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.dt-map-jump em { font-style: normal; }
.dt-map-jump:hover { color: var(--accent); }
/* Outcomes on the map collapse to one row; tap to open the detail. */
.dt-outcome.compact { cursor: pointer; padding: 0.65rem 0.9rem; }
.dt-outcome.compact .dt-outcome-head { margin-bottom: 0; display: flex; align-items: center; gap: 0.5rem; }
.dt-outcome.compact .dt-outcome-title { font-size: 1rem; margin-bottom: 0; }
.dt-outcome.compact .dt-outcome-more {
  margin-left: auto; flex-shrink: 0; font-size: 0.72rem; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
/* the "explored" badge sits inline in the head row on the map */
.dt-outcome.compact .dt-outcome-seen { position: static; margin-left: auto; }
.dt-outcome.compact .dt-outcome-seen + .dt-outcome-more { margin-left: 0.5rem; }
.dt-outcome.compact:not(.open) .dt-outcome-body,
.dt-outcome.compact:not(.open) .dt-outcome-points,
.dt-outcome.compact:not(.open) .dt-outcome-link { display: none; }
.dt-outcome.compact.open { cursor: default; }
.dt-outcome.compact .dt-outcome-title { line-height: 1.3; }
.dt-outcome.compact.open .dt-outcome-title { margin-top: 0.35rem; }
.dt-flash { animation: dtFlash 1.2s var(--ease) both; }
@keyframes dtFlash {
  0%   { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* ═════════════════ PRACTICE — scenario list ═════════════════ */
.sc-list-intro { max-width: 620px; margin: 0 auto 1.5rem; text-align: center; font-size: 0.96rem; line-height: 1.6; color: var(--ink); font-weight: 500; }
.sc-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* One clean, uniform card per scenario — no per-station colours, no blurb.
   Title + who, then a single highlighted call-to-action so it's obvious
   exactly where to click. */
.sc-card {
  text-align: left; width: 100%; font-family: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 1.2rem 1.2rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.95rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sc-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--brand); }
.sc-card:active { transform: scale(0.99); }
.sc-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }

/* Top row: a numbered marker on the left, the saved-grade badge on the right. */
.sc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 28px; }
.sc-card-num {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.84rem; font-weight: 800; color: var(--ink);
  background: var(--accent-wash, var(--brand-wash)); border: 1px solid var(--line-strong);
}
/* Saved best score, colour-coded by how the run went. A checkmark on perfect. */
.sc-card-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.1rem;
  font-size: 0.78rem; font-weight: 800; line-height: 1; white-space: nowrap;
  padding: 0.32rem 0.6rem; border-radius: var(--radius-pill); border: 1px solid currentColor;
}
.sc-card-badge .sc-badge-slash { opacity: 0.5; margin: 0 0.06em; font-weight: 700; }
.sc-card-badge .sc-badge-check { font-weight: 900; }
.sc-card-badge.tier-perfect { color: #fff; background: var(--good); border-color: var(--good); }
.sc-card-badge.tier-good { color: var(--good); background: var(--good-wash); }
.sc-card-badge.tier-ok   { color: var(--warn); background: var(--warn-wash); }
.sc-card-badge.tier-low  { color: var(--stop); background: var(--stop-wash); }

.sc-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.3rem; }
.sc-card-title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 700; letter-spacing: -0.2px; line-height: 1.2; color: var(--ink); }
.sc-card-who { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
/* Red-outline call-to-action: white fill, red text, red border. Still the only
   coloured element on the card, so it stays the obvious place to click. Hover
   fills it red for a clear affordance. */
.sc-card-cta {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.72rem 1rem; min-height: 48px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--brand); border: 2px solid var(--brand);
  font-size: 0.92rem; font-weight: 800; letter-spacing: -0.1px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sc-card-cta span { transition: transform var(--dur) var(--ease); }
.sc-card:hover .sc-card-cta { background: var(--brand); color: #fff; box-shadow: var(--shadow); }
.sc-card:hover .sc-card-cta span { transform: translateX(4px); }
.sc-card-btns { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.sc-btn {
  flex: 1; padding: 0.7rem; min-height: 46px; border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-family: inherit; font-weight: 700; font-size: 0.84rem; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sc-btn:hover { border-color: var(--brand); color: var(--brand); }
.sc-btn:active { transform: scale(0.97); }
.sc-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.sc-btn.primary:hover { background: var(--brand-ink); color: #fff; }

/* ═════════════════ PRACTICE — detail / investigation ═════════════════ */
.sc-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; flex-wrap: wrap; scroll-margin-top: 12px; }
.sc-bar-btn {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-family: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ink); padding: 0.5rem 0.95rem; min-height: 40px; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sc-bar-btn:hover { border-color: var(--brand); color: var(--brand); }

.sc-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.9rem; }
.sc-detail-headtext { min-width: 0; }
.sc-detail-title { font-family: var(--font-display); font-size: clamp(1.35rem, 5vw, 1.7rem); font-weight: 700; letter-spacing: -0.3px; line-height: 1.15; margin-bottom: 0.25rem; }
.sc-detail-sub { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.sc-chip { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; padding: 0.28rem 0.7rem; border-radius: var(--radius-pill); background: var(--accent-wash, var(--brand-wash)); color: var(--accent, var(--brand)); }
.sc-chip.score { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); white-space: nowrap; }

/* roadmap stepper */
.sc-roadmap {
  display: flex; gap: 0.35rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0.2rem 0 0.7rem; margin-bottom: 0.9rem; scrollbar-width: none;
}
.sc-roadmap::-webkit-scrollbar { display: none; }
.sc-rm-step {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.74rem; font-weight: 700; color: var(--ink);
  padding: 0.35rem 0.7rem; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface);
  transition: all var(--dur) var(--ease); white-space: nowrap;
}
.sc-rm-step .sc-rm-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 800;
  background: var(--line-strong); color: var(--ink);
}
.sc-rm-step.done { opacity: 1; border-color: var(--good); }
.sc-rm-step.done .sc-rm-dot { background: var(--good); color: #fff; }
.sc-rm-step.current { opacity: 1; border-color: var(--ink); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.sc-rm-step.current .sc-rm-dot { background: var(--ink); color: #fff; }

/* "Meet the person" pop-up — the bio, gated so it gets read before play */
body.sc-modal-open { overflow: hidden; }
.sc-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  background: rgba(15, 20, 25, 0.45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: scModalFade var(--dur) var(--ease) both;
}
.sc-modal {
  position: relative; width: 100%; max-width: 460px;
  background: var(--surface); border: 1px solid var(--line);
  border-top: 5px solid var(--accent, var(--brand));
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 1.6rem 1.6rem 1.5rem; text-align: center;
  animation: scModalPop var(--dur-lg) var(--ease-spring) both;
}
.sc-modal-av { width: 92px; margin: 0 auto 0.5rem; }
.sc-modal-av .char { transform: none; opacity: 1; }
.sc-modal-av .char-svg { animation: none; }
/* Solid accent pill with white text — crisp and high-contrast, instead of the
   old faint accent-on-wash that washed out and read as muddy. */
.sc-modal-eyebrow {
  display: inline-block; margin-bottom: 0.7rem; padding: 0.3rem 0.8rem;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
  color: #fff; background: var(--accent, var(--brand));
  border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.sc-modal-name {
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 700;
  letter-spacing: -0.3px; color: var(--ink); margin-bottom: 0.7rem;
}
/* Bio as scannable bullets (left-aligned) rather than a centred paragraph —
   quicker to read, friendlier on a phone. Accent dot ties it to the theme. */
.sc-modal-bio-list {
  list-style: none; text-align: left; margin: 0 auto 1.4rem; max-width: 36ch;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.sc-modal-bio-list li {
  position: relative; padding-left: 1.4rem;
  font-size: 0.98rem; line-height: 1.5; font-weight: 500; color: var(--ink);
}
.sc-modal-bio-list li::before {
  content: ''; position: absolute; left: 0.2rem; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, var(--brand)); transform: translateY(-50%);
}
.sc-modal-start {
  width: 100%; min-height: 50px; padding: 0.85rem 1.2rem;
  border: none; border-radius: var(--radius-pill);
  background: var(--brand); color: #fff;
  font-family: inherit; font-weight: 800; font-size: 0.95rem; cursor: pointer;
  box-shadow: var(--shadow);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sc-modal-start:hover { background: var(--brand-ink); }
.sc-modal-start:active { transform: scale(0.98); }
@keyframes scModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scModalPop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }

/* conversation thread (accumulates each turn) */
.sc-thread { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1rem; }
.sc-msg { display: flex; align-items: flex-end; gap: 0.5rem; max-width: 88%; animation: fadeUp var(--dur) var(--ease) both; scroll-margin-top: 84px; }
.sc-msg.them { align-self: flex-start; }
.sc-msg.you { align-self: flex-end; flex-direction: row-reverse; }
.sc-msg-av { flex-shrink: 0; width: 38px; }
.sc-msg-av .char { transform: none; opacity: 1; }
.sc-msg-av .char-svg { animation: none; }
.sc-bubble {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 4px 16px 16px 16px; padding: 0.7rem 0.95rem;
  font-size: 1rem; line-height: 1.55; color: var(--ink); box-shadow: var(--shadow-sm);
}
.sc-msg.you .sc-bubble { background: var(--wash); border-color: transparent; border-radius: 16px 4px 16px 16px; }
.sc-msg.you.act .sc-bubble { background: var(--surface); border: 1px dashed var(--line-strong); }
.sc-bubble-name { display: block; font-size: 0.66rem; font-weight: 800; color: var(--ink); margin-bottom: 0.15rem; text-transform: uppercase; letter-spacing: 0.04em; }
.sc-msg.you .sc-bubble-name { text-align: right; }
.sc-bubble-text { min-height: 1.2em; }

/* centred system note: a stage direction / the reading you just took */
.sc-note {
  align-self: center; max-width: 92%; text-align: center;
  font-size: 0.88rem; font-style: italic; line-height: 1.5; color: var(--ink); font-weight: 500;
  background: var(--wash); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0.55rem 0.95rem; animation: fadeUp var(--dur) var(--ease) both; scroll-margin-top: 84px;
}

/* composer: the cue + the lines you could say — a clean white card, no
   accent stripe; the prompt typography carries the emphasis */
.sc-composer {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 0.95rem 1.05rem; box-shadow: var(--shadow); scroll-margin-top: 80px;
}
/* Held back while the participant is still "talking", then revealed so the
   conversation flows: read their line first, then your options appear. */
.sc-composer--pending { display: none; }
.sc-composer--reveal { animation: fadeUp var(--dur-lg) var(--ease-spring) both; }
.sc-prompt-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); margin-bottom: 0.4rem; }
.sc-prompt { font-family: var(--font-display); font-size: 1.28rem; font-weight: 600; color: var(--ink); line-height: 1.35; letter-spacing: -0.2px; margin-bottom: 1rem; }
.sc-choices { display: grid; gap: 0.6rem; }
.sc-choice {
  text-align: left; padding: 0.9rem 1.05rem; min-height: 54px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: 0.98rem; font-weight: 600; line-height: 1.45; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Only paint the hover wash on real pointers. On touch there's no true hover,
   so the browser leaves it stuck under the last tap and it bleeds onto the next
   turn's choice in that same spot. */
@media (hover: hover) {
  .sc-choice:hover { border-color: var(--ink); background: var(--wash); }
}
.sc-choice:active { transform: scale(0.99); }
.sc-choice.is-act { border-style: dashed; }
.sc-choice em { font-style: italic; }
.sc-choice.correct { border-color: var(--good); background: var(--good-wash); }
.sc-choice.wrong { border-color: var(--stop); background: var(--stop-wash); }

.sc-feedback { display: none; margin-top: 0.9rem; padding: 0.9rem 1.05rem; border-radius: var(--radius-sm); font-size: 0.96rem; line-height: 1.6; color: var(--ink); }
.sc-feedback.show { display: block; animation: fadeUp var(--dur) var(--ease) both; }
.sc-feedback.good { background: var(--good-wash); border: 1px solid var(--good); }
/* "try again" is a nudge, not an alarm — amber, not red */
.sc-feedback.retry { background: var(--warn-wash); border: 1px solid var(--warn); }
/* the reveal presents the correct move, so it reads green like a resolution */
.sc-feedback.reveal { background: var(--good-wash); border: 1px solid var(--good); }
.sc-ctrl {
  padding: 0.75rem 1rem; min-height: 48px; border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-family: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sc-ctrl:hover { border-color: var(--ink); }
.sc-ctrl:active { transform: scale(0.97); }
.sc-ctrl.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.sc-ctrl.primary:hover { background: var(--ink-soft); color: #fff; border-color: var(--ink-soft); }
.sc-next { display: block; margin-top: 0.9rem; width: 100%; }

/* Highlighter for key clinical values inside prompts, notes, and feedback.
   One consistent colour so it reads as emphasis, never as a new "category". */
.sc-hl {
  background: var(--hl); color: var(--ink); font-weight: 800;
  padding: 0.02em 0.34em; border-radius: 5px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* summary */
.sc-summary { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.2rem; box-shadow: var(--shadow); }
.sc-summary-score { font-size: 2.6rem; font-weight: 800; color: var(--brand); line-height: 1; }
.sc-summary.tier-perfect .sc-summary-score,
.sc-summary.tier-good .sc-summary-score { color: var(--good); }
.sc-summary.tier-ok .sc-summary-score { color: var(--warn); }
.sc-summary.tier-low .sc-summary-score { color: var(--stop); }
.sc-summary-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); font-weight: 700; margin-bottom: 1rem; }
.sc-summary-body { font-size: 0.9rem; line-height: 1.6; color: var(--ink); text-align: left; background: var(--surface); border: 1px solid var(--line); padding: 0.9rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.sc-summary .sc-card-btns { justify-content: center; }

/* ═════════════════ CHARACTER ANIMATION ═════════════════ */
.char { display: block; width: 100%; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); transform: scale(0.92); opacity: 0.72; }
.char.is-active { transform: scale(1); opacity: 1; }
.char-svg { display: block; width: 100%; height: auto; }
.char .hair, .char .head, .char .ear, .char .neck, .char .shirt { stroke: rgba(0,0,0,0.06); stroke-width: 1; }
.char .brow { stroke-width: 3.4; stroke-linecap: round; transition: transform 0.2s; transform-box: fill-box; transform-origin: center; }
.char .nose { stroke-width: 2.4; }
.char .m-smile, .char .m-flat { stroke-width: 3.4; stroke-linecap: round; transition: opacity 0.15s; }
.char .m-talk { opacity: 0; transform-box: fill-box; transform-origin: center; }
.char .m-flat { opacity: 0; }
.char .glasses { stroke: #3A3A3A; stroke-width: 2.4; fill: none; opacity: 0.85; }
.char .badge .lanyard { stroke: #C23B30; stroke-width: 3; }
.char .badge .badge-card { fill: #fff; stroke: #C9C9C9; stroke-width: 1; }
.char .badge line:not(.lanyard) { stroke: #B9C0C7; stroke-width: 1.4; }
.char .eye { transform-box: fill-box; transform-origin: center; transition: transform 0.08s ease; }

/* Emotions */
.char.emotion-concerned .m-smile { opacity: 0; }
.char.emotion-concerned .m-flat { opacity: 1; }
.char.emotion-concerned .brow-l { transform: rotate(10deg) translateY(-1px); }
.char.emotion-concerned .brow-r { transform: rotate(-10deg) translateY(-1px); }
.char.emotion-happy .brow-l, .char.emotion-happy .brow-r { transform: translateY(-2px); }

/* Talking + blinking */
.char.talking .m-smile, .char.talking .m-flat { opacity: 0; }
.char.talking .m-talk { opacity: 1; }
.char.blink .eye { transform: scaleY(0.12); }

@media (prefers-reduced-motion: no-preference) {
  .char-svg { animation: charBob 4.2s ease-in-out infinite; }
  .char.is-active .char-svg { animation-duration: 3s; }
  .char.talking .m-talk { animation: charTalk 0.26s ease-in-out infinite alternate; }
  @keyframes charBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  @keyframes charTalk { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
}

/* ═════════════════ MOBILE ═════════════════ */
@media (max-width: 560px) {
  .dt-bar { gap: 0.4rem; }
  .dt-mode-toggle { width: 100%; }
  .dt-mode-btn { flex: 1; }
  .dt-map-qtext { padding-right: 0; }
  .dt-map-walkbtn { position: static; display: inline-flex; margin-top: 0.5rem; }
  .dt-map-branches { padding-left: 0.55rem; }
  .sc-msg { max-width: 94%; }
  .sc-prompt { font-size: 1.14rem; }
  .sc-grid { grid-template-columns: 1fr; }
  /* "Meet the person" pop-up: roomier on a small screen */
  .sc-modal-backdrop { padding: 0.9rem; }
  .sc-modal { padding: 1.4rem 1.25rem 1.3rem; }
  .sc-modal-av { width: 80px; }
  .sc-modal-name { font-size: 1.38rem; }
  .sc-modal-bio-list { max-width: none; }
  .sc-modal-bio-list li { font-size: 0.95rem; }
}
@media (max-width: 380px) {
  .dt-walk-card, .dt-outcome.big { padding: 1rem 0.9rem; }
  .dt-hist-row { padding: 0.5rem 0.65rem; }
}