/* Four domains, one value: reduction */

:where(.scene-reduce) .reduce-line .dot-in {
  fill: var(--primary);
}

:where(.scene-reduce) .reduce-line .dot-out {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 1.5;
}

:where(.scene-reduce) .reduce-line circle {
  transition:
    fill 250ms ease,
    stroke 250ms ease,
    r 250ms ease;
}

/* Both panels run to the row height so the two boxes end on the same line; the code
   simply has room to spare. */
:where(.scene-reduce) .reduce-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 16px;
  align-items: stretch;
}

:where(.scene-reduce) .reduce-layout > div {
  min-width: 0;
  padding: 14px 16px;
  background: var(--surface-muted);
  border-radius: var(--radius);
}

:where(.scene-reduce) .reduce-code {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

:where(.scene-reduce) .reduce-rows {
  display: grid;
  gap: 4px;
}

:where(.scene-reduce) .reduce-row,
:where(.scene-reduce) .reduce-axis {
  display: grid;
  grid-template-columns: 7.5rem 6.5rem minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 250ms ease;
}

:where(.scene-reduce) .reduce-axis {
  grid-template-columns: 14.5rem minmax(0, 1fr);
  padding-block: 0;
}

:where(.scene-reduce) .reduce-row.changed {
  background: var(--accent-soft);
}

:where(.scene-reduce) .reduce-row.together {
  margin-top: 4px;
  border-top: 1px dashed var(--border-strong);
  border-radius: 0 0 8px 8px;
}

:where(.scene-reduce) .reduce-name {
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 600;
}

:where(.scene-reduce) .reduce-val {
  padding: 0;
  background: none;
  border: 0;
  font-weight: 700;
}

.scene-reduce .reduce-line {
  max-width: 330px;
  margin: 0;
}

.scene-reduce .reduce-axis text {
  fill: var(--text-muted);
  font-size: 11px;
  text-anchor: middle;
}

/* Three lines at the widest layout, which is what each state's text wraps to, so the
   controls below it do not move as the states change. */
:where(.scene-reduce) .reduce-caption {
  min-height: 5em;
  margin: 14px 0 4px;
}

:where(.scene-reduce) .reduce-checks {
  display: flex;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 0;
  list-style: none;
}

@media (max-width: 640px) {
  :where(.scene-reduce) .reduce-row {
    grid-template-columns: 5.5rem 5.5rem minmax(0, 1fr);
  }

  :where(.scene-reduce) .reduce-axis {
    grid-template-columns: 11.5rem minmax(0, 1fr);
  }
}

@media (width <= 1000px) {
  :where(.scene-reduce) .reduce-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column gives the caption a width where the first state wraps a line
     shorter than the other two. */
  :where(.scene-reduce) .reduce-caption {
    min-height: 6.8em;
  }
}