/* ScaffSkills interactive components, shared styles.
   Inherits palette variables from the host page (no :root redefine).
   All classes are .scaff- prefixed and scope safely inside any module
   page's existing style block. */

.scaff-scenario {
  background: var(--ink, #0B1929);
  border-radius: 12px;
  padding: 36px 32px;
  margin: 40px 0;
  color: var(--cloud, #B8CDD9);
  font-family: 'Inter', system-ui, sans-serif;
}
@media (max-width: 480px) {
  .scaff-scenario { padding: 24px 20px; }
}

.scaff-scenario__header {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.scaff-scenario__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent, #2A7DE1);
  margin-bottom: 8px;
}
.scaff-scenario__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 32px);
  text-transform: uppercase;
  color: #FFFFFF;
  letter-spacing: 0.2px;
  margin: 0;
  line-height: 1.05;
}

.scaff-card {
  animation: scaff-fade-in 220ms ease-out;
}
@keyframes scaff-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scaff-card__step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--steel, #6B90AE);
  margin: 0 0 12px;
}
.scaff-card__prompt {
  font-size: 17px;
  line-height: 1.6;
  color: #FFFFFF;
  margin: 0 0 22px;
}
.scaff-card__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--white, #FFFFFF);
  margin: 0 0 16px;
}
.scaff-card__meta {
  font-size: 13px;
  line-height: 1.55;
  color: var(--steel, #6B90AE);
  margin: 0 0 16px;
  font-style: italic;
}
.scaff-card__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.scaff-options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scaff-options__item { margin: 0; }
.scaff-options__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 16px 18px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--white, #FFFFFF);
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.scaff-options__btn:hover,
.scaff-options__btn:focus-visible {
  border-color: var(--accent, #2A7DE1);
  background: rgba(42,125,225,0.10);
  outline: none;
}
.scaff-options__btn:active { transform: translateY(1px); }
.scaff-options__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--accent, #2A7DE1);
  color: #FFFFFF;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.scaff-options__label { flex: 1 1 auto; }

.scaff-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, border-color 0.2s;
}
.scaff-btn--primary {
  background: var(--accent, #2A7DE1);
  color: #FFFFFF;
}
.scaff-btn--primary:hover { background: var(--accent-dk, #1C5CB5); transform: translateY(-1px); }
.scaff-btn--ghost {
  background: transparent;
  color: var(--cloud, #B8CDD9);
  border: 1px solid rgba(255,255,255,0.18);
}
.scaff-btn--ghost:hover { border-color: var(--accent, #2A7DE1); color: var(--accent, #2A7DE1); }

.scaff-outcome-badge {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 18px;
}
.scaff-outcome-badge[data-outcome="good"]  { background: var(--success-lt, #DCFCE7); color: var(--success, #16A34A); }
.scaff-outcome-badge[data-outcome="bad"]   { background: var(--fail-lt, #FEE2E2);    color: var(--fail, #DC2626); }
.scaff-outcome-badge[data-outcome="mixed"] { background: rgba(180,83,9,0.16);         color: #FBBF24; }

.scaff-block {
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--accent, #2A7DE1);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 14px 0;
}
.scaff-block--lesson { border-left-color: var(--success, #16A34A); }
.scaff-block__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent, #2A7DE1);
  margin: 0 0 8px;
}
.scaff-block--lesson .scaff-block__label { color: var(--success, #16A34A); }
.scaff-block__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--white, #FFFFFF);
  margin: 0;
}
.scaff-block__ref {
  font-size: 12px;
  color: var(--steel, #6B90AE);
  font-style: italic;
  margin: 10px 0 0;
}

/* INTERACTIVE DIAGRAM
   Indented expandable tree, brand-light card for use within a normal
   content section. Mirrors info-box styling so it sits naturally next
   to existing static components. */
.scaff-diagram {
  background: var(--mist, #EDF2F7);
  border: 1px solid var(--border, #D0DCE6);
  border-radius: 12px;
  padding: 28px 28px 24px;
  margin: 32px 0;
  font-family: 'Inter', system-ui, sans-serif;
}
@media (max-width: 480px) {
  .scaff-diagram { padding: 22px 18px 20px; }
}
.scaff-diagram__header { margin-bottom: 22px; }
.scaff-diagram__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent, #2A7DE1);
  margin-bottom: 6px;
}
.scaff-diagram__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 26px);
  text-transform: uppercase;
  color: var(--ink, #0B1929);
  margin: 0 0 8px;
}
.scaff-diagram__intro {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-body, #3A4E62);
  margin: 0;
}
.scaff-diagram__hint {
  font-size: 12px;
  color: var(--text-muted, #6B8499);
  margin: 16px 0 4px;
  font-style: italic;
}
.scaff-diagram__progress {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent, #2A7DE1);
  margin: 4px 0 0;
}

.scaff-tree { list-style: none; padding: 0; margin: 0; }
.scaff-tree--nested { margin-top: 8px; padding-left: 22px; border-left: 1px dashed rgba(42,125,225,0.35); margin-left: 14px; }
.scaff-tree__item { margin: 0 0 10px; }
.scaff-tree__card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--white, #FFFFFF);
  border: 1px solid var(--border, #D0DCE6);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #0B1929);
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.scaff-tree__card:hover,
.scaff-tree__card:focus-visible {
  border-color: var(--accent, #2A7DE1);
  background: rgba(42,125,225,0.04);
  outline: none;
}
.scaff-tree__item.is-open > .scaff-tree__card {
  border-color: var(--accent, #2A7DE1);
  background: rgba(42,125,225,0.06);
}
.scaff-tree__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--accent, #2A7DE1);
  color: var(--white, #FFFFFF);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.scaff-tree__label { flex: 1 1 auto; }

.scaff-tree__panel {
  display: none;
  background: var(--white, #FFFFFF);
  border-left: 3px solid var(--accent, #2A7DE1);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 6px 0 0 12px;
}
.scaff-tree__item.is-open > .scaff-tree__panel { display: block; }
.scaff-tree__detail {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-body, #3A4E62);
  margin: 0;
}
.scaff-tree__ref {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted, #6B8499);
  margin: 8px 0 0;
}

/* SORT-INTO-BUCKETS
   Each item is a row: label on the left, bucket buttons on the right.
   On reveal, rows colour green/red and feedback appears below. */
.scaff-sort {
  background: var(--mist, #EDF2F7);
  border: 1px solid var(--border, #D0DCE6);
  border-radius: 12px;
  padding: 28px 28px 24px;
  margin: 32px 0;
  font-family: 'Inter', system-ui, sans-serif;
}
@media (max-width: 480px) {
  .scaff-sort { padding: 22px 18px 20px; }
}
.scaff-sort__header { margin-bottom: 18px; }
.scaff-sort__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent, #2A7DE1);
  margin-bottom: 6px;
}
.scaff-sort__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 26px);
  text-transform: uppercase;
  color: var(--ink, #0B1929);
  margin: 0 0 8px;
}
.scaff-sort__intro {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-body, #3A4E62);
  margin: 0 0 12px;
}
.scaff-sort__summary { margin-bottom: 14px; }
.scaff-sort__score {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 6px 14px;
  border-radius: 4px;
  margin: 0;
}
.scaff-sort__score[data-outcome="good"]  { background: var(--success-lt, #DCFCE7); color: var(--success, #16A34A); }
.scaff-sort__score[data-outcome="mixed"] { background: rgba(180,83,9,0.16);         color: #92400E; }
.scaff-sort__score[data-outcome="bad"]   { background: var(--fail-lt, #FEE2E2);     color: var(--fail, #DC2626); }

.scaff-sort__list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.scaff-sort__item {
  background: var(--white, #FFFFFF);
  border: 1px solid var(--border, #D0DCE6);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 640px) {
  .scaff-sort__item { flex-direction: row; align-items: center; justify-content: space-between; }
}
.scaff-sort__item.is-correct { border-color: var(--success, #16A34A); background: rgba(22,163,74,0.05); }
.scaff-sort__item.is-wrong   { border-color: var(--fail, #DC2626);    background: rgba(220,38,38,0.05); }
.scaff-sort__label {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink, #0B1929);
  flex: 1 1 auto;
}
.scaff-sort__buckets { display: flex; gap: 6px; flex-wrap: wrap; }
.scaff-sort__bucket-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--border, #D0DCE6);
  background: var(--white, #FFFFFF);
  color: var(--text-body, #3A4E62);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.scaff-sort__bucket-btn:hover,
.scaff-sort__bucket-btn:focus-visible { border-color: var(--accent, #2A7DE1); color: var(--accent, #2A7DE1); outline: none; }
.scaff-sort__bucket-btn.is-selected { background: var(--accent, #2A7DE1); border-color: var(--accent, #2A7DE1); color: var(--white, #FFFFFF); }
.scaff-sort__feedback {
  flex-basis: 100%;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-body, #3A4E62);
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed var(--border, #D0DCE6);
}
.scaff-sort__item.is-correct .scaff-sort__feedback { color: var(--success, #16A34A); }
.scaff-sort__item.is-wrong   .scaff-sort__feedback { color: var(--fail, #DC2626); }
.scaff-sort__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* AUDIO NARRATION
   Dark-card treatment so the player feels distinct from text content
   and reads as a "press play" affordance. Transcript inherits page
   readability rules. */
.scaff-audio {
  background: var(--ink, #0B1929);
  border-radius: 12px;
  padding: 28px 28px 24px;
  margin: 32px 0;
  color: var(--cloud, #B8CDD9);
  font-family: 'Inter', system-ui, sans-serif;
}
@media (max-width: 480px) {
  .scaff-audio { padding: 22px 18px 20px; }
}
.scaff-audio__header { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.scaff-audio__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent, #2A7DE1);
  margin-bottom: 6px;
}
.scaff-audio__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 26px);
  text-transform: uppercase;
  color: var(--white, #FFFFFF);
  margin: 0 0 4px;
}
.scaff-audio__voice {
  font-size: 12px;
  color: var(--steel, #6B90AE);
  margin: 0;
}

.scaff-audio__player {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.scaff-audio__player--placeholder {
  border-style: dashed;
  border-color: rgba(251,191,36,0.4);
  background: rgba(180,83,9,0.10);
}
.scaff-audio__pending {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #FBBF24;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.35);
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.scaff-audio__placeholder-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--cloud, #B8CDD9);
  margin: 0;
}
.scaff-audio__controls {
  display: flex;
  align-items: center;
  gap: 14px;
}
.scaff-audio__play {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: var(--accent, #2A7DE1);
  color: var(--white, #FFFFFF);
  border: none;
  border-radius: 4px;
  padding: 8px 18px;
  cursor: pointer;
  min-width: 70px;
}
.scaff-audio__play:hover { background: var(--accent-dk, #1C5CB5); }
.scaff-audio__bar {
  flex: 1 1 auto;
  height: 6px;
  background: rgba(255,255,255,0.10);
  border-radius: 3px;
  overflow: hidden;
}
.scaff-audio__bar-fill {
  width: 0;
  height: 100%;
  background: var(--accent, #2A7DE1);
  transition: width 0.1s linear;
}
.scaff-audio__time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--steel, #6B90AE);
  min-width: 80px;
  text-align: right;
}

.scaff-audio__transcript-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--steel, #6B90AE);
  margin: 0 0 10px;
}
.scaff-audio__line {
  font-size: 14px;
  line-height: 1.7;
  color: var(--white, #FFFFFF);
  margin: 0 0 10px;
}
.scaff-audio__speaker {
  font-weight: 700;
  color: var(--white, #FFFFFF);
}

/* SEQUENTIAL FLOW CHART
   Vertical numbered process. Each step is a card with a one-line
   summary visible and a detail panel that opens on tap. Connecting
   line between numbers shows sequence. Mirrors the live lifecycle-wrap
   visual language so the interactive version reads as a natural
   evolution of the existing static pattern. */
.scaff-flow {
  background: var(--ink, #0B1929);
  border-radius: 12px;
  padding: 28px;
  margin: 32px 0;
  color: var(--cloud, #B8CDD9);
  font-family: 'Inter', system-ui, sans-serif;
}
@media (max-width: 480px) {
  .scaff-flow { padding: 22px 18px; }
}
.scaff-flow__header { margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.scaff-flow__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent, #2A7DE1);
  margin-bottom: 6px;
}
.scaff-flow__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 26px);
  text-transform: uppercase;
  color: var(--white, #FFFFFF);
  margin: 0 0 6px;
}
.scaff-flow__intro {
  font-size: 14px;
  line-height: 1.6;
  color: var(--white, #FFFFFF);
  margin: 0;
}

.scaff-flow__list { list-style: none; padding: 0; margin: 0; }
.scaff-flow__item {
  position: relative;
  display: flex;
  gap: 18px;
  margin: 0 0 18px;
}
.scaff-flow__item:last-child { margin-bottom: 0; }
.scaff-flow__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 52px;
  bottom: -18px;
  width: 2px;
  background: rgba(42,125,225,0.30);
}
.scaff-flow__item.is-open:not(:last-child)::before { background: rgba(42,125,225,0.60); }

.scaff-flow__num {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: rgba(184,205,217,0.55);
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.10);
  border-radius: 50%;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.scaff-flow__item.is-open .scaff-flow__num {
  color: var(--white, #FFFFFF);
  border-color: var(--accent, #2A7DE1);
  background: var(--accent, #2A7DE1);
}

.scaff-flow__main { flex: 1 1 auto; min-width: 0; }
.scaff-flow__card {
  width: 100%;
  display: block;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.scaff-flow__card:hover,
.scaff-flow__card:focus-visible {
  border-color: var(--accent, #2A7DE1);
  background: rgba(42,125,225,0.08);
  outline: none;
}
.scaff-flow__item.is-open .scaff-flow__card {
  border-color: var(--accent, #2A7DE1);
  background: rgba(42,125,225,0.10);
}

.scaff-flow__card-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.scaff-flow__step-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--white, #FFFFFF);
  letter-spacing: 0.5px;
  flex: 0 0 auto;
}
.scaff-flow__step-summary {
  font-size: 13px;
  color: var(--steel, #6B90AE);
  flex: 1 1 200px;
  line-height: 1.5;
}
.scaff-flow__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--accent, #2A7DE1);
  color: var(--white, #FFFFFF);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
  line-height: 1;
}

.scaff-flow__panel {
  display: none;
  background: rgba(0,0,0,0.20);
  border-left: 3px solid var(--accent, #2A7DE1);
  border-radius: 0 6px 6px 0;
  padding: 14px 18px;
  margin: 10px 0 0;
}
.scaff-flow__item.is-open .scaff-flow__panel { display: block; }
.scaff-flow__detail {
  font-size: 14px;
  line-height: 1.7;
  color: var(--white, #FFFFFF);
  margin: 0;
}
.scaff-flow__ref {
  font-size: 12px;
  color: var(--steel, #6B90AE);
  font-style: italic;
  margin: 8px 0 0;
}

.scaff-flow__hint {
  font-size: 12px;
  color: var(--steel, #6B90AE);
  margin: 18px 0 4px;
  font-style: italic;
}
.scaff-flow__progress {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent, #2A7DE1);
  margin: 4px 0 0;
}

/* CHAIN ENHANCE
   Progressive enhancement for existing .hier-chain-wrap and
   .lifecycle-wrap blocks. The existing visual is preserved; these
   rules add affordances (pointer cursor, +/- marker, hover lift)
   and the styles for the expandable detail panel inserted under
   each clickable node. */
.scaff-chain-host { position: relative; }
.scaff-chain__hint {
  font-size: 12px;
  color: var(--steel, #6B90AE);
  margin: 0 0 16px;
  font-style: italic;
  text-align: center;
}
.scaff-chain-node {
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.scaff-chain-node:hover,
.scaff-chain-node:focus-visible {
  border-color: var(--accent, #2A7DE1);
  outline: none;
  transform: translateY(-1px);
}
.scaff-chain-node.is-open {
  border-color: var(--accent, #2A7DE1);
  background: rgba(42,125,225,0.10);
}
.scaff-chain-marker {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  color: var(--cloud, #B8CDD9);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.scaff-chain-node.is-open .scaff-chain-marker {
  background: var(--accent, #2A7DE1);
  color: var(--white, #FFFFFF);
  border-color: var(--accent, #2A7DE1);
}

.scaff-chain-panel {
  display: none;
  background: rgba(42,125,225,0.10);
  border: 1px solid rgba(42,125,225,0.30);
  border-left: 4px solid var(--accent, #2A7DE1);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 10px auto;
  max-width: 500px;
  width: 100%;
  box-sizing: border-box;
  animation: scaff-fade-in 200ms ease-out;
}
.scaff-chain-panel.is-open { display: block; }
.scaff-chain-panel__detail {
  font-size: 14px;
  line-height: 1.7;
  color: var(--white, #FFFFFF);
  margin: 0;
}
.scaff-chain-panel__ref {
  font-size: 12px;
  color: var(--cloud, #B8CDD9);
  font-style: italic;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* Lifecycle-specific: panel sits in the flex container as a sibling
   of .lifecycle-row, indented past the number column. width:auto lets
   the panel respect the parent's right padding rather than overflowing. */
.lifecycle-wrap > .scaff-chain-panel {
  max-width: none;
  width: auto;
  margin: 8px 0 12px 96px;
}
@media (max-width: 480px) {
  .lifecycle-wrap > .scaff-chain-panel { margin-left: 0; }
}

/* SPECIFICITY OVERRIDES, host-page conflicts
   The live module pages (and the sandbox copies of them) carry rules
   like `.content-section p { color: var(--text-body); ... }` with
   specificity 0,1,1. That out-specifies a plain `.scaff-card__body`
   rule (0,1,0) regardless of source order, so all our white body
   text was being pulled back to the dark text colour intended for
   light backgrounds. The qualified selectors below sit at 0,2,0,
   which beats the host page rules. Kept as a single block at the
   end of the stylesheet so they can be audited or peeled off as a
   group if the host CSS is ever cleaned up. */

.scaff-scenario .scaff-card__body,
.scaff-scenario .scaff-card__prompt,
.scaff-scenario .scaff-options__btn,
.scaff-scenario .scaff-block__body { color: var(--white, #FFFFFF); }
.scaff-scenario .scaff-card__meta,
.scaff-scenario .scaff-card__step,
.scaff-scenario .scaff-block__ref { color: var(--steel, #6B90AE); }
.scaff-scenario .scaff-block__label { color: var(--accent, #2A7DE1); }
.scaff-scenario .scaff-block--lesson .scaff-block__label { color: var(--success, #16A34A); }

.scaff-flow .scaff-flow__intro,
.scaff-flow .scaff-flow__detail { color: var(--white, #FFFFFF); }
.scaff-flow .scaff-flow__step-summary,
.scaff-flow .scaff-flow__ref,
.scaff-flow .scaff-flow__hint { color: var(--steel, #6B90AE); }

.scaff-audio .scaff-audio__line,
.scaff-audio .scaff-audio__placeholder-note { color: var(--white, #FFFFFF); }
.scaff-audio .scaff-audio__voice { color: var(--steel, #6B90AE); }

.scaff-chain-panel .scaff-chain-panel__detail { color: var(--white, #FFFFFF); }
.scaff-chain-panel .scaff-chain-panel__ref { color: var(--cloud, #B8CDD9); }