/* =========================================================================
   State versus Trait Tracker — tool-specific styling
   -------------------------------------------------------------------------
   Shared page furniture comes from components/tool-kit.css. The snapshot rows
   and the four-series line charts are what is particular to this tool.
   ========================================================================= */

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

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

#tracker .control + .control {
  margin-top: var(--space-4);
}

#tracker input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Snapshot rows
   ---------------------------------------------------------------------- */

.snapshot {
  display: grid;
  gap: var(--space-2);
  max-width: 34rem;
}

.snapshot__row {
  display: grid;
  grid-template-columns: minmax(4rem, 1fr) auto minmax(0, auto) auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: 2.75rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-sm);
  background-color: var(--colour-surface-raised);
}

@media (max-width: 30em) {
  .snapshot__row {
    grid-template-columns: 1fr auto;
  }
}

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

.snapshot__value {
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--colour-accent);
}

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

.snapshot select {
  min-height: 2.75rem;
  min-width: 4.5rem;
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--colour-text);
  background-color: var(--colour-page);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
   Series charts
   -------------------------------------------------------------------------
   Four people on one pair of axes. Each line is distinguished by colour AND
   by a dash pattern AND by its name printed at the end of the line, so the
   series remain separable in greyscale and in forced colours. The table
   beneath carries every summary figure.
   ---------------------------------------------------------------------- */

.series__line {
  fill: none;
  stroke-width: 1.9;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.series__line--one {
  stroke: var(--colour-accent);
}

.series__line--two {
  stroke: var(--colour-personality-individual-differences);
  stroke-dasharray: 7 3;
}

.series__line--three {
  stroke: var(--colour-neuropsychology);
  stroke-dasharray: 2 3;
}

.series__line--four {
  stroke: var(--colour-cognitive);
  stroke-dasharray: 10 3 2 3;
}

/* The person's own mean, drawn faintly behind their series. */
.series__mean {
  stroke-width: 1;
  stroke-opacity: 0.55;
  stroke-dasharray: 4 4;
}

.series__mean--one {
  stroke: var(--colour-accent);
}

.series__mean--two {
  stroke: var(--colour-personality-individual-differences);
}

.series__mean--three {
  stroke: var(--colour-neuropsychology);
}

.series__mean--four {
  stroke: var(--colour-cognitive);
}

/* The moment used in the opening round. */
.series__snapshot {
  stroke: var(--colour-text);
  stroke-width: 1.5;
  stroke-dasharray: 2 2;
  stroke-opacity: 0.8;
}

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

  .series__line--one,
  .series__line--three {
    stroke: CanvasText;
  }

  .series__line--two,
  .series__line--four {
    stroke: Highlight;
  }

  .series__mean,
  .series__snapshot {
    stroke: GrayText;
  }
}