/* =========================================================================
   Memory Systems Detective — tool-specific styling
   -------------------------------------------------------------------------
   Shared page furniture comes from components/tool-kit.css. Specific here:
   the profile bar chart and the grid of judgements.

   Every bar prints its own value and the measure table repeats it in words,
   so the fill is a redundant cue. Grid cells print the verdict as a word, and
   a mismatch prints the intended verdict beside it, so neither depends on the
   tint.
   ========================================================================= */

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

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

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

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

#memory .goal {
  margin-top: var(--space-4);
}

/* -------------------------------------------------------------------------
   The profile chart
   ---------------------------------------------------------------------- */

#memory [data-profile] {
  max-width: 32rem;
}

.mem__band {
  fill: var(--colour-accent-soft);
}

.mem__zero {
  stroke: var(--colour-border-strong);
  stroke-width: 1.5;
}

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

/* Clearly outside the control range: a darker fill, and the table says so in
   words in its own column. */
.mem__bar--below {
  fill: var(--colour-neuropsychology);
}

/* -------------------------------------------------------------------------
   Tables
   ---------------------------------------------------------------------- */

.data-table td[data-mark="below"],
.chart__table td[data-mark="below"] {
  background-color: var(--colour-status-bg);
}

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

.data-table td[data-mark="miss"] {
  background-color: var(--colour-status-bg);
}

#memory [data-grid-table] th[scope="row"] {
  font-weight: 550;
  min-width: 14rem;
}

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

@media (forced-colors: active) {
  .mem__band {
    fill: Canvas;
    stroke: GrayText;
    stroke-dasharray: 4 3;
  }

  .mem__zero {
    stroke: CanvasText;
  }

  .mem__bar {
    fill: GrayText;
  }

  .mem__bar--below {
    fill: CanvasText;
  }

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