/* Step 04: ICP lab */
#s4 .s4-loop { list-style: none; padding: 0; margin: 4px 0 18px; display: grid; gap: 10px; counter-reset: s4l; }
#s4 .s4-loop > li { counter-increment: s4l; position: relative; padding-left: 38px; margin: 0; }
#s4 .s4-loop > li::before { content: counter(s4l); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-mono); font-size: 0.8rem; font-weight: 600; color: var(--source); border: 1.5px solid var(--source); }

#s4 .s4-stage { display: grid; gap: 12px; align-content: start; }
#s4 .s4-legend { font-size: 0.84rem; gap: 4px 16px; margin-top: -2px; }
#s4 .s4-legend > span { white-space: nowrap; }
#s4 .s4-mk { display: inline-block; vertical-align: middle; margin-right: 6px; position: relative; top: -1px; }
#s4 .s4-mk.line { width: 16px; border-top: 1.5px solid var(--match); }
#s4 .s4-mk.dash { width: 16px; border-top: 1.5px dashed var(--bad); }
#s4 .s4-mk.ring { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--source); }

#s4 .s4-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
#s4 .s4-bar .btns { flex: none; }
#s4 #s4-play { min-width: 5.4em; }
#s4 .s4-status { flex: 1 1 18rem; margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--muted); min-height: 2.9em; display: flex; align-items: center; }

#s4 .s4-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 14px; overflow: visible; }
#s4 .s4-stats > div { display: grid; min-width: 0; }
#s4 .s4-stats .k { font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#s4 .s4-stats b { font-size: 0.98rem; white-space: nowrap; }
#s4 .s4-stats b.good { color: var(--good); }
#s4 .s4-stats b.bad { color: var(--bad); }

#s4 .s4-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; font-size: 0.84rem; color: var(--muted); margin-bottom: 4px; }
#s4 .s4-keys { display: inline-flex; gap: 14px; }
#s4 .s4-keys [hidden] { display: none; }
#s4 .s4-sw { display: inline-block; width: 16px; border-top: 2px solid var(--source); vertical-align: middle; margin-right: 6px; position: relative; top: -1px; }
#s4 .s4-sw.prev { border-top-color: var(--match); }

#s4 .s4-gt { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin: 6px 0 -2px; display: flex; justify-content: space-between; gap: 8px; }
#s4 .s4-gt:first-child { margin-top: 0; }
#s4 #s4-loop-it { color: var(--source); letter-spacing: 0.04em; }
#s4 .s4-group { display: grid; gap: 10px; }
#s4 .ctl .ctl-val { grid-row: 1; grid-column: 2; }
#s4 .ctl input[type=range] { grid-row: 2; }
#s4 .controls select { min-width: 0; max-width: 12rem; }

#s4 .steps li { font-size: 0.88rem; line-height: 1.42; padding: 7px 10px; transition: border-color 0.15s, color 0.15s, background-color 0.15s; }
#s4 .steps li::before { margin-top: -1px; }
#s4 .steps li b { color: var(--ink); }
#s4 .steps li.on { background: color-mix(in srgb, var(--source) 9%, var(--bg)); }
#s4 .steps li.skip { border-style: dashed; opacity: 0.65; }
@media (prefers-reduced-motion: reduce) { #s4 .steps li { transition: none; } }

@media (max-width: 640px) {
  #s4 .s4-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #s4 .s4-legend { font-size: 0.8rem; gap: 2px 12px; }
  #s4 .s4-status { min-height: 4.3em; }
}
@media (max-width: 640px) { #s4 canvas.plot { aspect-ratio: 4 / 3; } }
#s4 canvas.plot { touch-action: auto; } /* no drag interaction here, so let swipes scroll the page */