/* =========================================================================
   Measurement-Invariance Translator — tool-specific styling
   -------------------------------------------------------------------------
   Shared page furniture comes from components/tool-kit.css. The parameter
   groups, the item-behaviour lines and the invariance ladder are what is
   particular here.
   ========================================================================= */

#invariance .interactive__controls,
#invariance .interactive__stage {
  min-width: 0;
}

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

#invariance .control + .control {
  margin-top: var(--space-3);
}

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

.preset-buttons .button {
  font-size: var(--text-xs);
  padding: 0.35rem 0.7rem;
  min-height: 2.75rem;
}

/* -------------------------------------------------------------------------
   Parameter groups
   ---------------------------------------------------------------------- */

.param-group {
  margin: 0;
  padding: 0 0 var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--colour-border);
}

.param-group + .param-group {
  padding-top: var(--space-3);
}

.param-group:last-of-type {
  border-bottom: 0;
}

/* Floated legend: a <legend> renders on the fieldset's top border, so one
   that wraps spills out of the box. Floating it makes it an ordinary block
   while keeping the item text announced with each slider. */
.param-group__name {
  float: left;
  width: 100%;
  padding: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.35;
}

/* The legend is floated, and a `.control` is a grid container, so it will not
   overlap the float: without a clear, the first slider of any group that has no
   note collapses to zero width beside the legend. */
.param-group .control {
  clear: both;
}

.param-group__note {
  clear: both;
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--colour-text-muted);
}

/* -------------------------------------------------------------------------
   Item-behaviour lines
   -------------------------------------------------------------------------
   Two lines per panel, distinguished by colour, by dash pattern AND by an
   "A" / "B" label at the right-hand end. The table beneath states every
   parameter and says in words whether the slope, the level or both differ.
   ---------------------------------------------------------------------- */

.inv__line {
  stroke-width: 2.6;
  stroke-linecap: round;
}

.inv__line--a {
  stroke: var(--colour-accent);
}

.inv__line--b {
  stroke: var(--colour-personality-individual-differences);
  stroke-dasharray: 7 4;
}

/* -------------------------------------------------------------------------
   The invariance ladder
   -------------------------------------------------------------------------
   Plain language first, technical label second, and the status written out —
   never carried by the border colour alone.
   ---------------------------------------------------------------------- */

.ladder {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
  counter-reset: rung;
}

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

.ladder__rung {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--colour-border);
  border-left: 4px solid var(--colour-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--colour-surface);
}

.ladder__rung[data-holds="yes"] {
  border-left-color: var(--colour-neuropsychology);
}

.ladder__rung[data-holds="no"] {
  border-left-color: var(--colour-social-critical-psychology);
}

.ladder__plain {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

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

.ladder__status {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
}

.ladder__rung[data-holds="yes"] .ladder__status {
  background-color: var(--colour-accent-soft);
  color: var(--colour-accent);
}

.ladder__rung[data-holds="no"] .ladder__status {
  background-color: var(--colour-status-bg);
  color: var(--colour-status-text);
}

.ladder__technical {
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

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

.evidence__item {
  margin: var(--space-3) 0 0;
}

@media (forced-colors: active) {
  .ladder__rung,
  .ladder__status {
    border: 1px solid CanvasText;
  }

  .inv__line--a { stroke: CanvasText; }
  .inv__line--b { stroke: Highlight; }
}

/* -------------------------------------------------------------------------
   One item at a time
   -------------------------------------------------------------------------
   The chooser decides which item's four sliders are on screen. Every item's
   parameters stay live and every item stays in the chart; this only decides
   what is in front of the learner while they work.
   ---------------------------------------------------------------------- */

.param-chooser {
  margin: 0 0 var(--space-3);
  padding: 0 0 var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--colour-border);
}

.param-chooser__legend {
  padding: 0;
  margin-bottom: var(--space-2);
}

/* The four panels are a 2x2 grid in the SVG itself, so letting it fill a wide
   stage column makes it taller than the viewport for no gain in legibility. */
#invariance .chart__svg {
  max-width: 30rem;
  margin-inline: auto;
}