/* =========================================================================
   Recovery and Plasticity Simulator — tool-specific styling
   -------------------------------------------------------------------------
   Shared page furniture comes from components/tool-kit.css. Specific here:
   the five-trajectory fan, the stacked decomposition bar and the marker that
   shows the month being read off.

   Nothing depends on colour. Each of the five trajectories has its own dash
   pattern AND its own label printed at the right-hand end; the trained and
   untrained lines are solid and dashed and both are labelled; the segments of
   the decomposition bar are drawn in a fixed order and every one of them is
   named, in that order, with its value, in the sentence underneath, which is
   the figure's text equivalent.
   ========================================================================= */

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

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

#recovery .control--choice {
  font-size: var(--text-sm);
  line-height: 1.3;
  align-items: flex-start;
  padding: 0.3rem 0;
}

#recovery .control--choice input {
  margin-top: 0.55rem;
}

#recovery [data-stage-one-controls],
#recovery [data-stage-two-controls] {
  display: grid;
  gap: 1.25rem;
}

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

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

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

/* -------------------------------------------------------------------------
   Charts
   ---------------------------------------------------------------------- */

.rec__figure [data-fan],
.rec__figure [data-transfer] {
  max-width: 30rem;
}

.rec__figure [data-decomp] {
  max-width: 28rem;
}

.rec__line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.rec__line--trained {
  stroke-width: 2.6;
}

.rec__line--untrained {
  stroke-width: 2.6;
  stroke: var(--colour-neuropsychology);
}

/* The month being read off. Drawn as a dotted vertical rule and labelled with
   the month number, so it is never only a colour. */
.rec__marker {
  stroke: var(--colour-text);
  stroke-width: 1.5;
  stroke-dasharray: 2 3;
}

.rec__legend {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
  line-height: 1.45;
}

/* -------------------------------------------------------------------------
   The decomposition bar
   -------------------------------------------------------------------------
   Five segments in a fixed left-to-right order: start, restitution,
   relearning, compensation, practice. The sentence under the figure names
   each in that order with its value, so the fills are a convenience rather
   than the carrier.
   ---------------------------------------------------------------------- */

.rec__seg {
  stroke: var(--colour-surface);
  stroke-width: 1;
}

.rec__seg--base {
  fill: var(--colour-border-strong);
}

.rec__seg--restitution {
  fill: var(--colour-accent);
}

.rec__seg--relearning {
  fill: var(--colour-neuropsychology);
}

.rec__seg--compensation {
  fill: var(--colour-accent-soft);
  stroke: var(--colour-accent);
  stroke-width: 1.5;
}

.rec__seg--practice {
  fill: var(--colour-status-bg);
  stroke: var(--colour-text);
  stroke-width: 1.5;
}

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

@media (forced-colors: active) {
  .rec__line,
  .rec__line--untrained {
    stroke: CanvasText;
  }

  .rec__line--untrained {
    stroke: Highlight;
  }

  .rec__marker {
    stroke: Highlight;
  }

  .rec__seg {
    fill: Canvas;
    stroke: CanvasText;
    stroke-width: 1.5;
  }

  .rec__seg--restitution,
  .rec__seg--compensation {
    fill: Canvas;
    stroke: Highlight;
  }
}