/* ==========================================================================
   Summation lab (pages/summation-lab.js): postsynaptic potentials and action
   potentials side by side, one row per model cell, the sum below, and a
   chart of how much of each sum survives the timing spread.
   ========================================================================== */

.sum-duo {
  --sum-psp: #d65a1b;
  --sum-ap: #2468c4;
  --sum-flip: #7a5bc4;
  --sum-ink: var(--text-color);
  --sum-muted: var(--text-secondary);
  --sum-grid: #ece8f2;
  --sum-cursor: var(--accent-color);
  --sum-panel: var(--surface-1);
  background: var(--surface-2, #f6f5f9);
  border: 1px solid var(--border-color);
}
body.dark .sum-duo {
  --sum-psp: #f59462;
  --sum-ap: #74aef5;
  --sum-flip: #b7a1f0;
  --sum-grid: rgba(255, 255, 255, 0.1);
  background: var(--surface-2);
  border-color: var(--border-color);
}

.sum-duo .sum-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem 1rem;
}
.sum-duo .sum-spread {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) 3.4rem;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-weight: 650;
  font-size: 0.9rem;
}
.sum-duo .sum-spread input { width: 100%; min-width: 0; accent-color: var(--accent-color); }
.sum-duo #sum-jitter-out { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; }
.sum-duo .sum-opposing-control { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.45rem; margin: 0; font-weight: 650; font-size: 0.9rem; }
.sum-duo .sum-opposing-control span { font-size: 0.75rem; font-weight: 500; color: var(--sum-muted); }
.sum-duo .sum-run { min-width: 96px; min-height: 42px; margin: 0; }

.sum-duo .sum-snapshot {
  margin: 0.75rem 0 0.6rem !important;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  background: var(--sum-panel);
  color: var(--sum-muted);
  font-size: 0.8rem !important;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.sum-duo .sum-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sum-duo .sum-panel,
.sum-duo .sum-curve-fig {
  margin: 0;
  padding: 0.65rem 0.7rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--sum-panel);
  min-width: 0;
}
.sum-duo .sum-panel figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  color: var(--sum-ink);
}
.sum-duo .sum-panel figcaption span { font-size: 0.78rem; color: var(--sum-muted); }
.sum-duo .sum-panel-psp figcaption strong { color: var(--sum-psp); }
.sum-duo .sum-panel-ap figcaption strong { color: var(--sum-ap); }
.sum-duo svg { display: block; width: 100%; height: auto; overflow: visible; }
.sum-duo .sum-keep { margin: 0.2rem 0 0 !important; font-size: 0.85rem !important; color: var(--sum-muted); }
.sum-duo .sum-keep strong { color: var(--sum-ink); font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.sum-duo .sum-curve-fig { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0.75rem; align-items: center; margin-top: 0.75rem; }
.sum-duo .sum-curve-fig figcaption { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--sum-ink); }
.sum-duo .sum-foot { margin: 0.6rem 0 0 !important; font-size: 0.78rem !important; line-height: 1.5; color: var(--sum-muted); }

/* SVG parts */
.sum-duo .sum-grid { stroke: var(--sum-grid); stroke-width: 1; }
.sum-duo .sum-zero { stroke: var(--border-color); stroke-width: 1.2; }
.sum-duo .sum-tick { fill: var(--sum-muted); font-size: 10.5px; font-family: inherit; }
.sum-duo .sum-label { fill: var(--sum-ink); font-size: 11.5px; font-weight: 700; font-family: inherit; }
.sum-duo .sum-note { fill: var(--sum-muted); font-size: 10.5px; font-family: inherit; }
.sum-duo .sum-cursor { stroke: var(--sum-cursor); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: 0.7; }
.sum-duo .sum-trace { fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.sum-duo .sum-fill { stroke: none; opacity: 0.16; }
.sum-duo .sum-ghost { fill: none; stroke: var(--sum-muted); stroke-width: 1.4; stroke-dasharray: 2 4; opacity: 0.75; }
.sum-duo .sum-total { fill: none; stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; }
.sum-duo .sum-head { stroke: var(--sum-panel); stroke-width: 2; }
.sum-duo .sum-panel-psp :is(.sum-trace, .sum-total) { stroke: var(--sum-psp); }
.sum-duo .sum-panel-psp :is(.sum-fill, .sum-dot, .sum-head) { fill: var(--sum-psp); }
.sum-duo .sum-panel-ap :is(.sum-trace, .sum-total) { stroke: var(--sum-ap); }
.sum-duo .sum-panel-ap :is(.sum-fill, .sum-dot, .sum-head) { fill: var(--sum-ap); }
.sum-duo .sum-panel .sum-trace.is-flipped { stroke: var(--sum-flip); }
.sum-duo .sum-panel :is(.sum-fill, .sum-dot).is-flipped { fill: var(--sum-flip); }
.sum-duo .sum-curve { fill: none; stroke-width: 3; stroke-linecap: round; }
.sum-duo .sum-curve-psp { stroke: var(--sum-psp); }
.sum-duo .sum-curve-ap { stroke: var(--sum-ap); }
.sum-duo .sum-curve-dot { stroke: var(--sum-panel); stroke-width: 2; }
.sum-duo .sum-curve-dot-psp { fill: var(--sum-psp); }
.sum-duo .sum-curve-dot-ap { fill: var(--sum-ap); }
.sum-duo .sum-curve-label { font-size: 12px; font-weight: 700; font-family: inherit; }
.sum-duo .sum-curve-label-psp { fill: var(--sum-psp); }
.sum-duo .sum-curve-label-ap { fill: var(--sum-ap); }

@media (max-width: 760px) {
  .sum-duo .sum-top { grid-template-columns: 1fr auto; }
  .sum-duo .sum-spread { grid-column: 1 / -1; }
  .sum-duo .sum-panels { grid-template-columns: 1fr; }
  .sum-duo .sum-curve-fig { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* the drawings shrink to about 75% (panels) and 55% (chart); keep their text near 10 px */
  .sum-duo .sum-panel :is(.sum-tick, .sum-note) { font-size: 13px; }
  .sum-duo .sum-panel .sum-label { font-size: 14px; }
  .sum-duo #sum-svg-curve :is(.sum-tick, .sum-note) { font-size: 17px; }
  .sum-duo #sum-svg-curve .sum-curve-label { font-size: 19px; }
}
@media (max-width: 420px) {
  .sum-duo .sum-top { grid-template-columns: 1fr; }
  .sum-duo .sum-run { justify-self: start; }
}