/* ═══════════════════════════════════════════════════════════════
   UNIFIED INTERACTIVE COMPONENTS  ·  v2
   One contract for every chapter modal.
   Tier 1 = the stepper shell (header · steps · footer)
   Tier 2 = in-step depth (accordion · selector→detail · decisions)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   TIER 1 — MODAL SHELL
   ───────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease);
  padding: 16px;
}
.modal.on { opacity: 1; pointer-events: all; }

.mbk {
  position: absolute; inset: 0;
  background: rgba(2,4,12,0.72);
  backdrop-filter: blur(3px);
}

.mbox {
  position: relative; z-index: 1;
  width: min(720px, 96vw);
  height: min(620px, calc(100dvh - 88px));
  max-height: calc(100dvh - 88px);
  display: flex; flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--cyan-border);
  border-top: 2px solid var(--c);
  box-shadow: 0 0 0 1px rgba(23,174,212,0.06),
              0 30px 90px rgba(0,0,0,0.85),
              0 0 70px rgba(23,174,212,0.07);
  transform: translateY(16px) scale(0.985);
  transition: transform 0.32s var(--ease);
  overflow: hidden;
}
.modal.on .mbox { transform: translateY(0) scale(1); }
.mbox-wide { width: min(860px, 96vw); }

/* amber-keyed modals (present, beyond, research) */
.mbox.amber { border-top-color: var(--a); border-color: var(--amber-border); }

/* HEADER */
.m-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 18px 12px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.m-topbar-left { min-width: 0; }
.m-topbar-title {
  font-family: var(--ff-heading); font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.m-topbar-sub {
  font-family: var(--ff-mono); font-size: 9px; color: var(--ink3);
  margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.m-pips { display: flex; gap: 5px; }
.m-pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.16); transition: all 0.2s var(--ease);
}
.m-pip.on   { background: var(--c); transform: scale(1.35); }
.m-pip.done { background: rgba(23,174,212,0.45); }
.mbox.amber .m-pip.on   { background: var(--a); }
.mbox.amber .m-pip.done { background: rgba(254,153,15,0.45); }
.m-step-label, .m-count {
  font-family: var(--ff-mono); font-size: 10px; color: var(--ink3);
  letter-spacing: 0.06em;
}
.mclose {
  background: none; border: none; color: var(--ink3);
  font-size: 15px; cursor: pointer; line-height: 1; padding: 4px;
  transition: color 0.15s;
}
.mclose:hover { color: var(--ink); }

/* STEPS AREA */
.msteps { flex: 1 1 auto; position: relative; overflow: hidden; min-height: 0; }
.mstep {
  position: absolute; inset: 0; overflow-y: auto;
  padding: 20px 22px 22px;
  opacity: 0; transform: translateX(22px); pointer-events: none;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
  scrollbar-width: thin; scrollbar-color: rgba(23,174,212,0.3) transparent;
}
.mstep.active  { opacity: 1; transform: translateX(0); pointer-events: all; position: relative; }
.mstep.exiting { opacity: 0; transform: translateX(-22px); position: absolute; }
.mstep::-webkit-scrollbar { width: 5px; }
.mstep::-webkit-scrollbar-track { background: transparent; }
.mstep::-webkit-scrollbar-thumb { background: rgba(23,174,212,0.3); border-radius: 3px; }
.mstep::-webkit-scrollbar-thumb:hover { background: rgba(23,174,212,0.5); }

/* STEP LABEL */
.slabel {
  font-family: var(--ff-mono); font-size: 8.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--c);
  margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.slabel::after { content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(23,174,212,0.28), transparent); }
.slabel.amber { color: var(--a); }
.slabel.amber::after { background: linear-gradient(90deg, rgba(254,153,15,0.28), transparent); }

/* step intro paragraph */
.step-intro {
  font-size: 12.5px; color: var(--ink2); line-height: 1.7; margin-bottom: 16px;
}
.step-intro strong { color: var(--ink); font-weight: 600; }

/* FOOTER */
.mfoot {
  display: flex; align-items: stretch; justify-content: space-between;
  border-top: 1px solid var(--rule); background: rgba(0,0,0,0.18);
  flex-shrink: 0;
}
.mfoot-left  { display: flex; align-items: center; padding: 0 18px; gap: 12px; flex: 1; }
.mfoot-right { display: flex; }
.mnav-step {
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--ink3);
}
.mnav {
  font-family: var(--ff-heading); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; border: none; cursor: pointer;
  padding: 14px 22px; transition: opacity 0.15s; color: #000;
}
.mnav:hover { opacity: 0.85; }
.mnav-back   { color: var(--ink3); background: transparent; }
.mnav-back:hover { color: var(--ink); opacity: 1; }
.mnav-next   { background: var(--c); }
.mnav-finish { background: var(--a); }

/* ─────────────────────────────────────────────
   TIER 2a — ACCORDION CARDS (auto-collapse)
   ───────────────────────────────────────────── */
.acc { display: flex; flex-direction: column; gap: 8px; }
.acc-item {
  border: 1px solid var(--rule); border-left: 2px solid rgba(23,174,212,0.3);
  background: rgba(255,255,255,0.025); overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
}
.acc-item.open { border-left-color: var(--c); background: rgba(23,174,212,0.05); }
.acc-item.amber.open { border-left-color: var(--a); background: rgba(254,153,15,0.05); }
.acc-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; cursor: pointer; text-align: left;
  background: none; border: none; color: inherit;
}
.acc-tag {
  font-family: var(--ff-mono); font-size: 8px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c); border: 1px solid rgba(23,174,212,0.3);
  padding: 2px 7px; flex-shrink: 0;
}
.acc-item.amber .acc-tag { color: var(--a); border-color: rgba(254,153,15,0.3); }
.acc-title { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--ink); min-width: 0; }
.acc-meta { font-family: var(--ff-mono); font-size: 9px; color: var(--ink3); flex-shrink: 0; }
.acc-chev {
  width: 14px; height: 14px; flex-shrink: 0; color: var(--ink3);
  transition: transform 0.25s var(--ease);
}
.acc-item.open .acc-chev { transform: rotate(180deg); color: var(--c); }
.acc-body-wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.acc-item.open .acc-body-wrap { grid-template-rows: 1fr; }
.acc-body { overflow: hidden; }
.acc-body-inner { padding: 0 16px 14px 16px; }
.acc-body-inner p { font-size: 11.5px; color: var(--ink2); line-height: 1.65; }
.acc-body-inner .dist {
  font-family: var(--ff-mono); font-size: 9px; color: var(--c);
  margin-bottom: 6px; display: block;
}

/* ─────────────────────────────────────────────
   TIER 2b — SELECTOR → DETAIL (two-pane)
   ───────────────────────────────────────────── */
.sd-layout {
  display: grid; grid-template-columns: 188px 1fr; gap: 0;
  border: 1px solid var(--rule);
  height: 100%;            /* fill the step; mstep handles outer scroll */
  min-height: 300px; max-height: 100%;
  overflow: hidden;
}
.sd-list {
  padding: 12px 10px; border-right: 1px solid var(--rule);
  overflow-y: auto; scrollbar-width: thin;
}
.sd-btn {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 11px; margin-bottom: 5px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--rule); border-left: 2px solid rgba(255,255,255,0.1);
  transition: all 0.15s;
}
.sd-btn:hover { background: rgba(23,174,212,0.07); border-left-color: rgba(23,174,212,0.4); }
.sd-btn.active { background: rgba(23,174,212,0.11); border-left-color: var(--c);
  border-color: rgba(23,174,212,0.25); }
.sd-btn-label { display: block; font-size: 11px; color: var(--ink); font-weight: 500; margin-bottom: 2px; }
.sd-btn-meta  { display: block; font-family: var(--ff-mono); font-size: 8.5px; color: var(--c); }
.sd-btn-sub   { display: block; font-size: 9.5px; color: var(--ink3); margin-top: 1px; }
.sd-detail {
  padding: 16px 18px; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: rgba(23,174,212,0.3) transparent;
}
.sd-detail::-webkit-scrollbar, .sd-list::-webkit-scrollbar { width: 5px; }
.sd-detail::-webkit-scrollbar-thumb, .sd-list::-webkit-scrollbar-thumb {
  background: rgba(23,174,212,0.3); border-radius: 3px;
}
.sd-empty { display: flex; align-items: center; justify-content: center;
  height: 220px; color: var(--ink3); font-style: italic; font-size: 13px; }

/* detail header */
.sd-hd { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 10px; }
.sd-hd-name { font-family: var(--ff-mono); font-size: 9px; color: var(--ink3); }
.sd-hd-badge { font-family: var(--ff-mono); font-size: 8px; color: var(--c);
  border: 1px solid rgba(23,174,212,0.3); padding: 2px 7px; }
.sd-title { font-family: var(--ff-serif); font-size: 15px; font-weight: 700;
  color: var(--ink); margin-bottom: 4px; }
.sd-tagline { font-size: 12px; color: var(--a); margin-bottom: 10px; font-weight: 500; }

/* ─────────────────────────────────────────────
   TIER 2c — DECISION SEQUENCE
   ───────────────────────────────────────────── */
.context-box {
  background: rgba(255,255,255,0.03); border-left: 2px solid rgba(23,174,212,0.3);
  padding: 11px 15px; margin-bottom: 14px;
}
.context-box p { font-size: 12px; color: var(--ink2); line-height: 1.7; white-space: pre-line; }
.q-prompt {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--a); margin: 14px 0 9px;
}
.q-choices { display: flex; flex-direction: column; gap: 7px; }
.cbtn {
  background: rgba(255,255,255,0.035); border: 1px solid var(--rule);
  border-left: 2px solid rgba(255,255,255,0.12); padding: 11px 14px;
  color: var(--ink2); font-size: 12px; line-height: 1.5; text-align: left;
  cursor: pointer; transition: all 0.15s; font-family: var(--ff-body);
}
.cbtn:hover:not(:disabled) { background: rgba(23,174,212,0.08);
  border-left-color: var(--c); color: var(--ink); }
.cbtn.chosen { background: rgba(254,153,15,0.09); border-color: rgba(254,153,15,0.3);
  border-left-color: var(--a); color: var(--ink); }
.cbtn:disabled { opacity: 0.5; cursor: default; }
.cbtn-key { background: rgba(23,174,212,0.06); }

/* reveal / outcome */
.reveal {
  background: rgba(23,174,212,0.05); border: 1px solid rgba(23,174,212,0.18);
  border-left: 2px solid var(--c); padding: 12px 16px; margin-top: 12px;
  animation: revIn 0.32s var(--ease) forwards;
}
.reveal.amber { background: rgba(254,153,15,0.05); border-color: rgba(254,153,15,0.18);
  border-left-color: var(--a); }
.reveal-tag {
  font-family: var(--ff-mono); font-size: 8px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c); margin-bottom: 6px;
}
.reveal.amber .reveal-tag { color: var(--a); }
.reveal p { font-size: 11.5px; color: rgba(255,255,255,0.74); line-height: 1.65; }
@keyframes revIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* continue button (in-step advance) */
.continue-btn {
  margin-top: 13px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c);
  background: rgba(23,174,212,0.08); border: 1px solid rgba(23,174,212,0.35);
  padding: 8px 15px; cursor: pointer; transition: all 0.15s;
}
.continue-btn:hover { background: rgba(23,174,212,0.18); }
.continue-btn.amber { color: var(--a); background: rgba(254,153,15,0.08);
  border-color: rgba(254,153,15,0.35); }
.continue-btn.amber:hover { background: rgba(254,153,15,0.18); }

/* try-again (subtle reset) */
.try-again {
  margin-top: 12px; font-family: var(--ff-mono); font-size: 8.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3);
  background: none; border: none; cursor: pointer; padding: 6px 0;
  transition: color 0.15s; display: block;
}
.try-again:hover { color: var(--ink2); }

/* ─────────────────────────────────────────────
   SHARED — FINDING / SUB-PROGRESS / CARDS
   ───────────────────────────────────────────── */
.finding {
  background: rgba(255,255,255,0.03); border-left: 2px solid var(--c);
  padding: 11px 15px; margin: 0;
}
.finding.amber { border-left-color: var(--a); }
.finding-label {
  font-family: var(--ff-mono); font-size: 8px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c); margin-bottom: 6px;
}
.finding.amber .finding-label { color: var(--a); }
.finding p { font-size: 12px; color: var(--ink2); line-height: 1.7; }
.finding p + p { margin-top: 8px; }

.pg-italic { font-family: var(--ff-serif); font-style: italic; }

/* sub-progress dots (within a step, e.g. diagnostic stages) */
.subprog { display: flex; align-items: center; gap: 5px; }
.subprog-dot { width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.16); }
.subprog-dot.done { background: var(--c); }
.subprog-dot.active { background: var(--a); transform: scale(1.3); }

/* simple content card (non-accordion) */
.ccard {
  background: rgba(255,255,255,0.025); border: 1px solid var(--rule);
  border-left: 2px solid rgba(23,174,212,0.25); padding: 12px 16px; margin-bottom: 10px;
}
.ccard:last-child { margin-bottom: 0; }
.ccard-id { font-family: var(--ff-mono); font-size: 8px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c); margin-bottom: 4px; }
.ccard-title { font-size: 13px; color: var(--ink); font-weight: 600; margin-bottom: 3px; }
.ccard-sub { font-family: var(--ff-mono); font-size: 9px; color: var(--ink3); margin-bottom: 7px; }
.ccard-body { font-size: 11.5px; color: var(--ink2); line-height: 1.65; }
.ccard-body p + p { margin-top: 7px; }

/* link button */
.lbtn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c);
  background: rgba(23,174,212,0.08); border: 1px solid rgba(23,174,212,0.35);
  padding: 8px 14px; cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.lbtn:hover { background: rgba(23,174,212,0.18); }

/* signal readout (ch3) */
.signal-readout { margin-top: 14px; border: 1px solid rgba(23,174,212,0.2); padding: 12px 15px; }
.sig-title { font-family: var(--ff-mono); font-size: 9px; color: var(--c);
  letter-spacing: 0.1em; margin-bottom: 8px; }
.sig-line { font-family: var(--ff-mono); font-size: 10px; color: rgba(255,255,255,0.5);
  margin-bottom: 4px; min-height: 14px; transition: opacity 0.4s; }

/* metric bars (ch1 meiji) */
.mbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mbar-label { font-size: 11px; color: var(--ink2); flex: 1; }
.mbar-track { width: 90px; height: 4px; background: rgba(255,255,255,0.08); flex-shrink: 0; }
.mbar-fill { height: 100%; transition: width 0.5s var(--ease); }

/* delay bar (ch1 stamp) */
.delay-wrap { margin: 10px 0; }
.delay-track { height: 4px; background: rgba(255,255,255,0.08); position: relative; overflow: hidden; }
.delay-fill { height: 100%; background: var(--c); width: 0; }
.delay-events { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.delay-event { display: flex; align-items: flex-start; gap: 9px; opacity: 0;
  transition: opacity 0.4s; }
.delay-event.vis { opacity: 1; }
.de-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.de-dot.cyan { background: var(--c); }
.de-dot.amber { background: var(--a); }
.de-dot.red { background: #e0524a; }
.de-week { font-family: var(--ff-mono); font-size: 9px; color: var(--ink3);
  width: 38px; flex-shrink: 0; }
.de-text { font-size: 11.5px; color: var(--ink2); }

/* Hide floating overlays while a modal is open (they were stealing clicks) */
body.modal-open #orb,
body.modal-open #sov { opacity: 0 !important; pointer-events: none !important; visibility: hidden; }

/* Steps whose content is a self-scrolling two-pane fill the step exactly */
.mstep.mstep-fill { display: flex; flex-direction: column; overflow: hidden; }
.mstep.mstep-fill .step-intro { flex-shrink: 0; }
.mstep.mstep-fill .sd-layout { flex: 1 1 auto; min-height: 0; }

/* ═══════════════════════════════════════════════════════════════
   ALIVE COMPONENTS — purposeful interaction, not prose disclosure
   ═══════════════════════════════════════════════════════════════ */

/* ── DISTANCE RAIL (Ch1 timeline, Ch3 destination ladder) ── */
.drail { position: relative; padding: 6px 0 2px; }
.drail-track {
  position: absolute; left: 14px; top: 18px; bottom: 18px; width: 2px;
  background: linear-gradient(to bottom,
    rgba(23,174,212,0.55) 0%, rgba(23,174,212,0.35) 40%,
    rgba(254,153,15,0.55) 78%, rgba(255,255,255,0.25) 100%);
}
.drail-node {
  position: relative; padding: 0 0 4px 38px; margin-bottom: 6px; cursor: pointer;
}
.drail-dot {
  position: absolute; left: 8px; top: 5px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--bg2);
  border: 2px solid rgba(23,174,212,0.5);
  transition: all 0.25s var(--ease); z-index: 1;
}
.drail-node:hover .drail-dot { border-color: var(--c); box-shadow: 0 0 0 4px rgba(23,174,212,0.12); }
.drail-node.open .drail-dot { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 5px rgba(23,174,212,0.18); }
.drail-node.amber .drail-dot { border-color: rgba(254,153,15,0.6); }
.drail-node.amber.open .drail-dot { background: var(--a); border-color: var(--a); box-shadow: 0 0 0 5px rgba(254,153,15,0.18); }
.drail-head { display: flex; align-items: baseline; gap: 10px; }
.drail-era { font-family: var(--ff-mono); font-size: 9px; color: var(--ink3); letter-spacing: 0.05em; flex-shrink: 0; min-width: 60px; }
.drail-name { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; }
.drail-tag {
  font-family: var(--ff-mono); font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c); border: 1px solid rgba(23,174,212,0.3); padding: 1px 6px; flex-shrink: 0;
}
.drail-node.amber .drail-tag { color: var(--a); border-color: rgba(254,153,15,0.3); }
/* distance meter — the bar that visually scales with distance */
.drail-meter { margin-top: 5px; display: flex; align-items: center; gap: 8px; }
.drail-meter-track { flex: 1; height: 3px; background: rgba(255,255,255,0.06); position: relative; overflow: hidden; }
.drail-meter-fill { height: 100%; background: linear-gradient(90deg, rgba(23,174,212,0.6), rgba(254,153,15,0.6)); transition: width 0.5s var(--ease); }
.drail-meter-label { font-family: var(--ff-mono); font-size: 8.5px; color: var(--ink3); flex-shrink: 0; white-space: nowrap; }
/* expanding body */
.drail-body-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--ease); }
.drail-node.open .drail-body-wrap { grid-template-rows: 1fr; }
.drail-body { overflow: hidden; }
.drail-body-inner { padding: 10px 0 4px; }
.drail-problem {
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--a);
  margin-bottom: 7px; text-transform: uppercase;
}
.drail-body-inner p { font-size: 11.5px; color: var(--ink2); line-height: 1.65; }

/* ── CONCENTRIC CIRCLES (Ch2 three circles) ── */
.circles-stage {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 8px 0 4px;
}
.circles-svg { width: 200px; height: 200px; flex-shrink: 0; }
.circ-ring { fill: none; stroke-width: 2; transition: all 0.3s var(--ease); cursor: pointer; }
.circ-ring.spatial      { stroke: rgba(23,174,212,0.35); }
.circ-ring.temporal     { stroke: rgba(124,196,236,0.32); }
.circ-ring.experiential { stroke: rgba(254,153,15,0.35); }
.circ-ring.lit       { stroke-width: 3; }
.circ-ring.spatial.lit      { stroke: var(--c); filter: drop-shadow(0 0 8px rgba(23,174,212,0.5)); }
.circ-ring.temporal.lit     { stroke: #7cc4ec; filter: drop-shadow(0 0 8px rgba(124,196,236,0.5)); }
.circ-ring.experiential.lit { stroke: var(--a); filter: drop-shadow(0 0 8px rgba(254,153,15,0.5)); }
.circ-label { font-family: var(--ff-mono); font-size: 9px; fill: var(--ink3); text-anchor: middle; pointer-events: none; transition: fill 0.3s; }
.circ-label.lit { fill: var(--ink); }
.circles-readout { width: 100%; }
.circ-pick-row { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.circ-pick {
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px; cursor: pointer; background: rgba(255,255,255,0.03);
  border: 1px solid var(--rule); color: var(--ink3); transition: all 0.18s;
}
.circ-pick:hover { color: var(--ink2); border-color: rgba(255,255,255,0.2); }
.circ-pick.active { color: var(--ink); border-color: var(--c); background: rgba(23,174,212,0.08); }
.circ-pick.active.amber { border-color: var(--a); background: rgba(254,153,15,0.08); }

/* ── COMPOUND STACK (Ch2 diagnostic — lights up as stages add) ── */
.compound { display: flex; gap: 6px; align-items: center; margin: 4px 0 12px; }
.compound-seg {
  flex: 1; height: 5px; background: rgba(255,255,255,0.08); position: relative; overflow: hidden;
  transition: background 0.4s var(--ease);
}
.compound-seg.lit-s { background: var(--c); }
.compound-seg.lit-t { background: #7cc4ec; }
.compound-seg.lit-e { background: var(--a); }
.compound-seg.lit-x { background: #fff; }
.compound-lbl { font-family: var(--ff-mono); font-size: 7.5px; color: var(--ink3); letter-spacing: 0.1em; text-transform: uppercase; }

/* Steps whose body is a fixed two-pane: fill height, let inner panes scroll */
.mstep-fill { display: flex; flex-direction: column; }
.mstep-fill .step-intro { flex-shrink: 0; }
.mstep-fill .sd-layout { flex: 1 1 auto; min-height: 0; }