/* =========================================================================
   Response-Style Simulator — tool-specific styling
   -------------------------------------------------------------------------
   Shared page furniture comes from components/tool-kit.css. The response
   grids are what is particular here.
   ========================================================================= */

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

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

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

/* -------------------------------------------------------------------------
   Response grids
   -------------------------------------------------------------------------
   Each answer is printed as its own digit, so the grid is readable as text
   and does not depend on the shading. The shading is a redundant cue that
   makes the pattern visible at a glance across twenty items, which is the
   thing a table of numbers alone does not give you.
   ---------------------------------------------------------------------- */

.grids {
  display: grid;
  gap: var(--space-4);
}

.grid-card {
  padding: var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background-color: var(--colour-surface);
}

.grid-card__name {
  margin: 0 0 0.15rem;
  font-size: var(--text-sm);
}

.grid-card__note {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

.grid-row {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  counter-reset: item;
}

.grid-row > li {
  margin-top: 0;
}

.grid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--colour-text);
  background-color: var(--colour-surface-raised);
}

/* Shading by value. Redundant with the printed digit. */
.grid-cell[data-value="1"] { background-color: var(--colour-surface); }
.grid-cell[data-value="2"] { background-color: var(--colour-accent-soft); }
.grid-cell[data-value="3"] { background-color: var(--colour-accent-soft); opacity: 0.85; }
.grid-cell[data-value="4"] { background-color: var(--colour-accent); color: var(--colour-on-accent); }
.grid-cell[data-value="5"] { background-color: var(--colour-accent); color: var(--colour-on-accent); }

/* Reverse-keyed items carry a dotted underline as well as being listed in
   the explanatory text, so the distinction is not colour-only. */
.grid-cell[data-keyed="reverse"] {
  border-bottom: 3px dotted var(--colour-personality-individual-differences);
}

@media (forced-colors: active) {
  .grid-card,
  .grid-cell {
    border: 1px solid CanvasText;
  }

  .grid-cell[data-value="4"],
  .grid-cell[data-value="5"] {
    background-color: Highlight;
    color: Canvas;
  }

  .grid-cell[data-keyed="reverse"] {
    border-bottom: 3px dotted Highlight;
  }
}