/* =========================================================================
   Conformity Under Context — tool-specific styling
   -------------------------------------------------------------------------
   Shared page furniture comes from components/tool-kit.css. What is
   particular here: the preset buttons, the two-route bar chart and the
   distribution histogram.
   ========================================================================= */

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

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

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

/* -------------------------------------------------------------------------
   Presets
   ---------------------------------------------------------------------- */

.preset-buttons {
  display: grid;
  gap: var(--space-2);
}

.preset-buttons .button {
  min-height: 2.75rem;
  text-align: left;
}

/* -------------------------------------------------------------------------
   Stage navigation
   ---------------------------------------------------------------------- */

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

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

/* -------------------------------------------------------------------------
   Results
   ---------------------------------------------------------------------- */

.prevalence {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 650;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

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

.spec__coherence {
  margin: 0;
  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);
  font-size: var(--text-sm);
}

/* Wide, short charts: without a cap they stretch to the column width and
   become needlessly tall on a projector. */
/* 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. */
#conformity-lab .route-chart {
  max-width: 26rem;
}

.histogram {
  max-width: 26rem;
}

/* Every bar prints its own percentage or count beside it, and both routes are
   named in the text under the chart, so nothing depends on the fill. */
.bar--normative {
  fill: var(--colour-social-critical-psychology);
}

.bar--informational {
  fill: var(--colour-accent);
}

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

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

  .bar--normative,
  .bar--never {
    fill: CanvasText;
  }

  .bar--informational {
    fill: Highlight;
  }
}