/* =========================================================================
   Aphasia Profile Comparator — tool-specific styling
   -------------------------------------------------------------------------
   Shared page furniture comes from components/tool-kit.css. Specific here:
   the paired bar chart and the two note panels beneath it.

   The two profiles are distinguished by fill AND by the profile letter
   printed at the start of each bar; every bar prints its own score and the
   table repeats all of it. Nothing depends on hue.
   ========================================================================= */

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

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

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

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

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

/* -------------------------------------------------------------------------
   The paired chart
   ---------------------------------------------------------------------- */

#aphasia [data-compare] {
  max-width: 32rem;
}

/* The second series uses the module's own colour rather than the tool-kit
   default, so the pair reads as one family. Both bars also carry their
   profile letter, so the distinction survives greyscale. */
#aphasia .chart__bar--two {
  fill: var(--colour-neuropsychology);
}

.aph__gap {
  font-family: var(--font-body);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  fill: var(--colour-text-muted);
}

/* -------------------------------------------------------------------------
   Notes and tables
   ---------------------------------------------------------------------- */

.aphasia__notes {
  gap: var(--space-3);
}

@media (min-width: 56em) {
  .aphasia__notes {
    grid-template-columns: 1fr 1fr;
  }
}

.aphasia__notes > * {
  min-width: 0;
}

.chart__table td[data-mark="top"] {
  background-color: var(--colour-accent-soft);
  font-weight: 650;
}

.data-table td[data-mark="picked"] {
  background-color: var(--colour-accent-soft);
  font-weight: 650;
}

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

@media (forced-colors: active) {
  #aphasia .chart__bar--two {
    fill: Highlight;
  }

  .aph__gap {
    fill: CanvasText;
  }

  .chart__table td[data-mark="top"],
  .data-table td[data-mark="picked"] {
    background-color: Canvas;
    border: 2px solid Highlight;
  }
}