/* =========================================================================
   Person or Setting? Workplace Explanation Laboratory — tool styling
   -------------------------------------------------------------------------
   Shared page furniture comes from components/tool-kit.css. What is
   particular here: the staged evidence list, the answer trail, the costed
   intervention picker and the outcome bars.
   ========================================================================= */

#rounds-lab .interactive__controls,
#rounds-lab .interactive__stage,
#intervention-lab .interactive__controls,
#intervention-lab .interactive__stage {
  min-width: 0;
}

/* The stage is a grid, and a grid item's automatic minimum size is its
   min-content width - so a wide table inside a .table-scroll still widens
   the whole track and pushes the stage past a narrow viewport, even though
   the scroller itself would have coped. Every direct child of the stage has
   to opt out of that minimum, not just the stage. */
#rounds-lab .interactive__stage > *,
#intervention-lab .interactive__stage > * {
  min-width: 0;
}

@media (min-width: 52em) {
  #rounds-lab .interactive__body,
  #intervention-lab .interactive__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 76em) {
  #rounds-lab .interactive__body {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  }

  #intervention-lab .interactive__body {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  }
}

/* Multi-line labels: the shared rule centres a single line, which leaves a
   wrapped option looking detached from its control. */
#rounds-lab .control--choice,
#intervention-lab .control--choice {
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--text-sm);
  line-height: 1.4;
}

#rounds-lab .control--choice input,
#intervention-lab .control--choice input {
  margin-top: 0.3rem;
}

.stage-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.stage-nav .button {
  min-height: 2.75rem;
}

/* -------------------------------------------------------------------------
   The staged evidence
   -------------------------------------------------------------------------
   Items released in a later round carry a heavier left rule, but each one
   also states its own number and the round headings say what has just
   arrived, so nothing is carried by the rule alone.
   ---------------------------------------------------------------------- */

.evidence {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.evidence__item {
  margin-top: 0;
  display: grid;
  gap: 0.15rem;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--colour-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--colour-surface-raised);
}

.evidence__item[data-round="1"] {
  border-left-color: var(--colour-neuropsychology);
}

.evidence__item[data-round="2"] {
  border-left-color: var(--colour-social-critical-psychology);
}

.evidence__number {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.evidence__text {
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   The answer trail
   -------------------------------------------------------------------------
   The pinned primary. Deliberately small: three short rows carrying what the
   learner said and how much evidence they had when they said it.
   ---------------------------------------------------------------------- */

.trail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.trail__empty {
  margin-top: 0;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  line-height: 1.5;
}

.trail__item {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-sm);
  background-color: var(--colour-surface-raised);
}

.trail__round {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

.trail__answer {
  font-size: var(--text-sm);
  font-weight: 650;
}

.trail__note {
  margin-top: 0;
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.45;
}

/* -------------------------------------------------------------------------
   The intervention picker
   ---------------------------------------------------------------------- */

.level-group + .level-group {
  margin-top: var(--space-3);
}

.level-group__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.pick {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background-color: var(--colour-surface-raised);
  cursor: pointer;
}

.pick + .pick {
  margin-top: var(--space-2);
}

.pick:has(input:checked) {
  border-color: var(--colour-accent);
  background-color: var(--colour-accent-soft);
}

/* Unaffordable options say so in their own cost line as well as being
   dimmed and disabled, so the state is never carried by opacity alone. */
.pick[data-over="yes"] {
  opacity: 0.6;
  cursor: not-allowed;
}

.pick__body {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.pick__text {
  font-size: var(--text-sm);
  line-height: 1.4;
}

.pick__cost {
  font-size: var(--text-xs);
  font-weight: 650;
  color: var(--colour-text-muted);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   The outcome bars
   -------------------------------------------------------------------------
   The id prefix is load-bearing, not decoration: interactive-shell.css sets
   `.interactive__stage svg { max-width: 100% }`, whose specificity (0,1,1)
   beats a bare class rule here, so an unprefixed cap is silently ignored and
   the chart stretches to the full stage width.

   Three bars, three fills, and every value printed beside its own bar and
   restated in the caption - so the comparison never rests on the colour.
   ---------------------------------------------------------------------- */

#intervention-lab .outcome-chart {
  max-width: 26rem;
}

.bar--after {
  fill: var(--colour-social-critical-psychology);
}

.bar--comparison {
  fill: var(--colour-neuropsychology);
}

.leaves {
  margin: var(--space-2) 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.leaves > li {
  margin-top: 0;
}

.verdict + .verdict {
  margin-top: var(--space-3);
}

/* -------------------------------------------------------------------------
   Challenge results
   ---------------------------------------------------------------------- */

.claims__results {
  margin: var(--space-3) 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: var(--space-3);
}

.claims__results > li {
  margin-top: 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--colour-border-strong);
}

.claims__results > li[data-agreed="yes"] {
  border-left-color: var(--colour-neuropsychology);
}

.claims__results > li[data-agreed="no"] {
  border-left-color: var(--colour-social-critical-psychology);
}

.claims__result-head {
  margin: 0 0 var(--space-1);
}

/* -------------------------------------------------------------------------
   Forced colours
   ---------------------------------------------------------------------- */

@media (forced-colors: active) {
  .evidence__item,
  .trail__item,
  .pick,
  .claims__results > li {
    border: 1px solid CanvasText;
  }

  .pick:has(input:checked) {
    border: 2px solid Highlight;
  }

  .bar--after {
    fill: Highlight;
  }

  .bar--comparison {
    fill: CanvasText;
  }
}