/* =========================================================================
   Measuring Prejudice: What Does the Instrument Capture? — tool styling
   -------------------------------------------------------------------------
   Shared page furniture comes from components/tool-kit.css. What is
   particular here: the respondent card and scatter in experiment 1, and the
   instrument picker and evidence card in experiment 2.
   ========================================================================= */

#latency-lab .interactive__controls,
#latency-lab .interactive__stage,
#instrument-lab .interactive__controls,
#instrument-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. */
#latency-lab .interactive__stage > *,
#instrument-lab .interactive__stage > * {
  min-width: 0;
}

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

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

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

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

#latency-lab .control--choice input,
#instrument-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 respondent card
   -------------------------------------------------------------------------
   Deliberately sparse. The learner is given a score and a percentile and
   nothing else, because the point of the experiment is what a score on its
   own does and does not license.
   ---------------------------------------------------------------------- */

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

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

.respondent__score {
  margin: 0 0 var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.respondent__value {
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.respondent__unit {
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}

.respondent + .stage-nav {
  margin-top: var(--space-3);
}

/* -------------------------------------------------------------------------
   The scatter
   -------------------------------------------------------------------------
   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.

   The selected respondent is marked by a ring AND a full-height stem, so it
   is found by shape and position rather than by colour. Every number in the
   chart is repeated in the caption beneath it and in the table below.
   ---------------------------------------------------------------------- */

#latency-lab .scatter {
  max-width: 30rem;
}

.scatter__selected {
  fill: none;
  stroke: var(--colour-social-critical-psychology);
  stroke-width: 2;
}

.scatter__stem {
  stroke: var(--colour-social-critical-psychology);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

#latency-lab .chart__point {
  fill-opacity: 0.55;
}

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

/* -------------------------------------------------------------------------
   The instrument picker and evidence card
   ---------------------------------------------------------------------- */

.instrument__body {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

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

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

.evidence__level {
  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);
}

.evidence__text {
  margin: 0;
  padding: var(--space-3);
  border-left: 4px solid var(--colour-social-critical-psychology);
  border-radius: var(--radius-sm);
  background-color: var(--colour-surface-raised);
  font-size: var(--text-sm);
  line-height: 1.55;
}

[data-levels-body] td {
  font-size: var(--text-sm);
}

/* -------------------------------------------------------------------------
   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) {
  .respondent,
  .evidence__text,
  .claims__results > li {
    border: 1px solid CanvasText;
  }

  .scatter__selected,
  .scatter__stem {
    stroke: Highlight;
  }

  #latency-lab .chart__point {
    fill: CanvasText;
    fill-opacity: 1;
  }
}