/* ═══════════════════════════════════════════════════════════════════════
   Branching head — click-to-reveal (handoff4 · design_handoff_branching_head)
   A cohort headshot on the left, curved connectors branching to up to 5
   click-to-reveal example blocks. Reskin per instance via data-head /
   data-cohort and a <ul class="bh__quotes"> of quotes.
   Geometry constants (must match branching-head.js): H=84 G=16 avX=88
   cardLeft=180 stage width=536.
   ═══════════════════════════════════════════════════════════════════════ */

.bh {
  max-width: 600px;
  margin: var(--s5) 0 var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  background: var(--mim-white);
  background-image: url('../../assets/mim/texture-photocopy-white.png');
  background-size: cover;
  box-shadow: var(--shadow-sm);
  padding: 32px 32px 36px;
}

/* ── Tips block ─────────────────────────────────────────────────────── */
.bh__tips-label {
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold, 600);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin: 0 0 20px;
}
.bh__tips { margin-bottom: 26px; display: flex; flex-direction: column; gap: 16px; }
.bh__tip { display: flex; gap: 12px; }
.bh__tip-mark { color: var(--mim-purple-aa); font-weight: 700; font-size: 18px; line-height: 1.35; }
.bh__tip p {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: var(--weight-light, 300);
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg-muted);
}
.bh__tip strong { font-weight: 600; color: var(--fg); }

/* ── Reveal all / Hide all pill ─────────────────────────────────────── */
.bh__revealall {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
}
.bh__revealall:hover { background: var(--fg); color: var(--fg-inverse); }
.bh__revealall.is-allopen { background: var(--fg); color: var(--fg-inverse); }

/* ── Stage (branching canvas) ───────────────────────────────────────── */
.bh__stage { position: relative; width: 536px; max-width: 100%; margin-top: 28px; }
.bh__svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.bh__svg path {
  fill: none;
  stroke-linecap: round;
  transition: stroke 0.4s var(--ease-standard), stroke-width 0.4s var(--ease-standard);
}

/* ── The head (cohort avatar) ───────────────────────────────────────── */
.bh__head {
  position: absolute;
  left: 0;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.bh__head-img { position: relative; width: 88px; height: 88px; }
.bh__head-ring {
  position: absolute; inset: -5px;
  border-radius: 999px;
  border: 1.5px solid var(--mim-purple);
  opacity: 0.65;
}
.bh__head-photo {
  position: absolute; inset: 0;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.12);
  background-size: cover;
  background-position: center 28%;
}
.bh__head-label {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mim-purple-aa);
  text-align: center;
}

/* ── Reveal blocks ──────────────────────────────────────────────────── */
.bh__block {
  position: absolute;
  left: 180px;
  right: 0;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0c0c;
  background-image: url('../../assets/mim/texture-photocopy-black.png');
  background-size: cover;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bh__block:focus-visible { outline: 2px solid var(--mim-purple); outline-offset: 2px; }
.bh__block-label {
  position: absolute; top: 12px; left: 18px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mim-purple);
}
.bh__block-icon {
  position: absolute; top: 11px; right: 14px;
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
}
.bh__hint {
  position: absolute; left: 18px; bottom: 14px;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-primary);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
}
.bh__quote {
  position: absolute; left: 18px; right: 16px; top: 34px;
  margin: 0;
  font-family: var(--font-feature);
  font-style: italic;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  display: none;
}
.bh__block.is-open .bh__hint { display: none; }
.bh__block.is-open .bh__quote { display: block; animation: bhReveal 0.42s var(--ease-out) both; }

/* ── The travelling ball ────────────────────────────────────────────── */
.bh__ball {
  position: absolute; top: 0; left: 0;
  width: 13px; height: 13px;
  border-radius: 999px;
  background: var(--mim-purple-aa);
  box-shadow: 0 0 10px rgba(183,163,252,0.95);
  offset-anchor: center;
  offset-rotate: 0deg;
  pointer-events: none;
  z-index: 6;
  animation: bhBall 0.6s var(--ease-out) forwards;
}

@keyframes bhReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bhBall {
  0%   { offset-distance: 0%;   opacity: 0; transform: scale(0.6); }
  14%  { opacity: 1; transform: scale(1); }
  82%  { opacity: 1; transform: scale(1); }
  100% { offset-distance: 100%; opacity: 0; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .bh__block.is-open .bh__quote { animation: none; }
  .bh__ball { display: none; }
}

/* Toggle twin of the @media block above — same state, driven by the
   in-course setting. A body class cannot un-match a media query, so the
   two entry points have to be authored in parallel. Keep them in step. */
body.reduced-motion .bh__block.is-open .bh__quote { animation: none; }
body.reduced-motion .bh__ball { display: none; }


/* ── Stacked fallback (narrow screens / no offset-path) ─────────────── */
.bh--stacked .bh__svg { display: none; }
.bh--stacked .bh__head { position: static; width: auto; margin: 0 auto 22px; }
.bh--stacked .bh__stage { width: 100%; height: auto !important; }
.bh--stacked .bh__block {
  position: relative;   /* was static — keep it a positioning context so the + icon
                           anchors to THIS block, not the shared stage (which made
                           every label/hint/icon pile up at one coordinate) */
  left: auto; right: auto;   /* clear the absolute-layout offset (base left:180px) */
  height: auto;
  min-height: 0;
  width: 100%;
  margin-bottom: 12px;
  padding: 14px 44px 16px 18px;   /* right pad clears the + icon */
  display: flex; flex-direction: column; gap: 8px;
}
/* Flow the label, hint and quote in-flow within each stacked block. */
.bh--stacked .bh__block-label,
.bh--stacked .bh__hint { position: static; top: auto; left: auto; bottom: auto; }
.bh--stacked .bh__quote { position: static; top: auto; left: auto; right: auto; padding: 0; }
.bh--stacked .bh__block.is-open { padding-top: 14px; }

/* ── Night mode ─────────────────────────────────────────────────────── */
body.night-mode .bh {
  background: rgba(255,255,255,0.03);
  background-image: none;
  border-color: rgba(255,255,255,0.12);
}
body.night-mode .bh__tip p { color: rgba(255,255,255,0.72); }
body.night-mode .bh__tip strong { color: #fff; }
body.night-mode .bh__revealall { border-color: rgba(255,255,255,0.4); color: #fff; }
body.night-mode .bh__revealall:hover,
body.night-mode .bh__revealall.is-allopen { background: #fff; color: #000; }