/* Step 02 · Procrustes with known matches */
#s2 .s2-legend { margin-top: 8px; font-size: 0.86rem; }
#s2 .s2-ring { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--target); margin-right: 6px; vertical-align: -0.05em; box-sizing: border-box; }
#s2 .s2-math { margin-top: 10px; min-height: 7.4rem; display: grid; gap: 6px; align-content: start; }
#s2 .s2-r { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
#s2 .s2-r.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
#s2 .s2-r b { font-weight: 600; }
#s2 .s2-math .mat-label { white-space: nowrap; }
#s2 .s2-badmat table.mat { border-color: var(--bad); color: var(--bad); }
#s2 .s2-math.s2-isbad { border-color: var(--bad); }
#s2 .s2-trap, #s2 .s2-mnote { margin: 10px 0 0; }
#s2 .steps li { cursor: pointer; font-size: 0.93rem; line-height: 1.45; padding: 7px 10px; }
#s2 .steps li > div > b { font-weight: 700; }
#s2 .steps li:hover { border-color: color-mix(in srgb, var(--source) 55%, var(--rule)); }
#s2 .steps li .s2-desc { display: none; margin: 4px 0 0; font-size: 0.88rem; color: var(--ink); }
#s2 .steps li.on .s2-desc { display: block; }
#s2 .steps li.on { background: var(--surface); }
#s2 .s2-nav .btn { flex: 1 1 0; }
#s2 .s2-opts { display: grid; gap: 10px; border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 4px; }
#s2 .s2-opts-title { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; }
#s2 .ctl .ctl-val { grid-row: 1; grid-column: 2; }
#s2 .demo > .try { margin-top: 14px; }
@media (min-width: 900px) {
  #s2 .demo-grid { grid-template-columns: minmax(0, 1fr) 19.5rem; }
}
#s2 .readout b.bad, #s2 .readout .bad { color: var(--bad); }
#s2 .readout b.good, #s2 .readout .good { color: var(--good); }
#s2 .s2-skipped { display: none; color: var(--bad); font-weight: 700; }
#s2 .s2-nodet .s2-skipped { display: inline; }
#s2 canvas.plot.s2-tall { aspect-ratio: 1 / 1.18; }
/* let the page scroll over the plot; JS cancels the gesture only when a touch starts on a draggable point */
#s2 canvas.plot { touch-action: pan-y; touch-action: pan-y pinch-zoom; }
/* phones: keep the step controls right under the plot, and list only the current step */
@media (max-width: 899px) {
  #s2 #s2-lab .stage, #s2 #s2-lab .controls { display: contents; }
  #s2 #s2-plot { order: 1; }
  #s2 .s2-legend { order: 2; margin-top: -6px; }
  #s2 .stepper { order: 3; }
  #s2 #s2-math { order: 4; margin-top: 0; }
  #s2 #s2-trap, #s2 #s2-mnote { order: 5; margin: 0; }
  #s2 .s2-opts { order: 6; }
  #s2 .steps li:not(.on) { display: none; }
}
/* narrow phones: tighter matrix cells so the 2 x n data matrices fit without scrolling */
@media (max-width: 560px) {
  #s2 .s2-math table.mat td { padding: 1px 4px; }
  #s2 .s2-math { padding: 8px 8px; }
}
/* step badges: number each item explicitly, so the badge stays right when the other items are hidden (phones) */
#s2 .steps li:nth-child(1)::before { content: "1"; }
#s2 .steps li:nth-child(2)::before { content: "2"; }
#s2 .steps li:nth-child(3)::before { content: "3"; }
#s2 .steps li:nth-child(4)::before { content: "4"; }
#s2 .steps li:nth-child(5)::before { content: "5"; }
#s2 .steps li:nth-child(6)::before { content: "6"; }
/* the det-fix note has two texts: target mirrored on purpose, or a reflection caused by moved points */
#s2 .s2-mnote p { margin-bottom: 0; }
#s2 .s2-mnote .s2-mn-other { display: none; }
#s2 .s2-mnote.s2-other .s2-mn-mirror { display: none; }
#s2 .s2-mnote.s2-other .s2-mn-other { display: block; }