/* w-samecode-scrolly · scoped styles for the §02 drawing (renderPair). The page owns the scrolly layout
   (.fs-* in assets/page.css); this file styles only what the widget renders into [data-canvas] and
   [data-step-snap]. Every value is a token.
   Grammar (Ch 01/02, CURRICULUM §5): figure plate with a mono header bar on blueprint ground; machine =
   outlined frame with a mono MACHINE · NAME bar; code row in c1, other rows in c2; image = c1 frame on
   c1-soft with a mono IMAGE · name header; markers SAME (good) and DIFFERENT (warn); test status as word
   + colour (PASS good, FAIL bad, others ink-3). No shadow: the drawing isn't interactive.
   One grid holds both machines and the marker column; frames are grid items spanning rows, and the
   cells sit on top of them, so the rows line up whatever wraps. */

[data-widget="w-samecode-scrolly"] .sc {
  --sc-pad: 6px;        /* cell inset inside a frame */
  --sc-inset: 6px;      /* image frame inset inside the machine frame */
  --sc-mk: 84px;        /* marker column */
  position: relative;
  background: var(--surface);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-1);
  color: var(--ink);
  font: 400 var(--fs-caption)/16px var(--font-mono);
}
[data-widget="w-samecode-scrolly"] .sc--narrow { --sc-pad: 3px; --sc-inset: 3px; --sc-mk: 22px; }
[data-widget="w-samecode-scrolly"] .sc p { margin: 0; }

/* header bar: W-01 · LANE … STEP n / N (the lane name alone on narrow canvases) */
[data-widget="w-samecode-scrolly"] .sc__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1);
  min-height: 28px; padding: var(--sp-half) var(--sp-1);
  border-bottom: var(--stroke) solid var(--ink);
  font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
[data-widget="w-samecode-scrolly"] .sc__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
[data-widget="w-samecode-scrolly"] .sc__step { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* blueprint ground (the style guide's .cp-blueprint, scoped) */
[data-widget="w-samecode-scrolly"] .sc__ground {
  padding: var(--sp-1);
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: var(--sp-4) var(--sp-4);
  background-position: -1px -1px;
}
[data-widget="w-samecode-scrolly"] .sc--narrow .sc__ground { padding: var(--sp-1) var(--sp-half); }

[data-widget="w-samecode-scrolly"] .sc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sc-mk) minmax(0, 1fr);
}

/* frames (behind the cells) */
[data-widget="w-samecode-scrolly"] .sc-frame {
  background: var(--surface);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-1);
}
[data-widget="w-samecode-scrolly"] .sc-imgframe {
  margin: var(--sc-pad) var(--sc-inset) 0;
  background: var(--c1-soft);
  border: var(--stroke) solid var(--c1); border-radius: var(--radius-1);
}
[data-widget="w-samecode-scrolly"] .sc-frame,
[data-widget="w-samecode-scrolly"] .sc-imgframe { position: relative; z-index: 0; }

/* cells (on top) */
[data-widget="w-samecode-scrolly"] .sc-mbar,
[data-widget="w-samecode-scrolly"] .sc-imghead,
[data-widget="w-samecode-scrolly"] .sc-cell,
[data-widget="w-samecode-scrolly"] .sc-mk { position: relative; z-index: 1; min-width: 0; }

[data-widget="w-samecode-scrolly"] .sc-mbar {
  margin: var(--stroke) var(--stroke) 0;
  padding: 2px var(--sc-pad);
  border-bottom: var(--stroke) solid var(--ink);
  font: 700 var(--fs-caption)/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
[data-widget="w-samecode-scrolly"] .sc-mbar__k { display: block; color: var(--ink-3); }
[data-widget="w-samecode-scrolly"] .sc-mbar__id { color: var(--ink); }
[data-widget="w-samecode-scrolly"] .sc--narrow .sc-mbar { font-size: 12px; letter-spacing: .02em; }

[data-widget="w-samecode-scrolly"] .sc-imghead {
  margin: calc(var(--sc-pad) + var(--stroke)) calc(var(--sc-inset) + var(--stroke)) 0;
  padding: 2px var(--sc-pad);
  border-bottom: var(--stroke) solid var(--c1);
  font: 700 var(--fs-caption)/16px var(--font-mono); overflow-wrap: anywhere;
}
[data-widget="w-samecode-scrolly"] .sc-imghead:empty { border-bottom-color: transparent; }
[data-widget="w-samecode-scrolly"] .sc-imghead__k { display: block; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
[data-widget="w-samecode-scrolly"] .sc-imghead__id { color: var(--ink); }
[data-widget="w-samecode-scrolly"] .sc--narrow .sc-imghead { font-size: 12px; }

[data-widget="w-samecode-scrolly"] .sc-cell { margin: 0 calc(var(--stroke) + var(--sc-pad)); padding: 3px 0; }
[data-widget="w-samecode-scrolly"] .sc-cell--in { margin: 0 calc(2 * var(--stroke) + var(--sc-inset) + var(--sc-pad)); }
[data-widget="w-samecode-scrolly"] .sc-cell--first { padding-top: var(--sc-pad); }
[data-widget="w-samecode-scrolly"] .sc-cell--in.sc-cell--last { padding-bottom: calc(var(--sc-pad) + var(--stroke)); }
[data-widget="w-samecode-scrolly"] .sc-cell--tests { padding: calc(var(--sc-pad) + 4px) 0 calc(var(--sc-pad) + var(--stroke)); }

/* rows: c1 for the code, c2 for what the app needs */
[data-widget="w-samecode-scrolly"] .sc-row {
  display: flex; flex-direction: column;
  padding: 2px var(--sc-pad); border-radius: var(--radius-1);
  overflow-wrap: anywhere;
}
[data-widget="w-samecode-scrolly"] .sc-row--c1 { background: var(--c1-soft); border: var(--stroke) solid var(--c1); }
[data-widget="w-samecode-scrolly"] .sc-row--c2 { background: var(--c2-soft); border: var(--stroke) solid var(--c2); }
[data-widget="w-samecode-scrolly"] .sc-row__k {
  font: 700 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
[data-widget="w-samecode-scrolly"] .sc-row__v { font: 400 var(--fs-caption)/18px var(--font-mono); color: var(--ink); }
[data-widget="w-samecode-scrolly"] .sc--narrow .sc-row { padding: 1px var(--sc-pad); }
[data-widget="w-samecode-scrolly"] .sc--narrow .sc-row__v { font-size: 12px; line-height: 16px; }

/* marker column */
[data-widget="w-samecode-scrolly"] .sc-mk { align-self: center; justify-self: center; padding: 3px 0; }
[data-widget="w-samecode-scrolly"] .sc-mk__w {
  display: inline-block; padding: 1px var(--sp-half);
  font: 700 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
  border: var(--stroke) solid transparent; border-radius: var(--radius-1);
}
[data-widget="w-samecode-scrolly"] .sc-mk__w.is-same { color: var(--good); }
[data-widget="w-samecode-scrolly"] .sc-mk__w.is-diff { color: var(--warn); border-color: var(--warn); }
[data-widget="w-samecode-scrolly"] .sc--narrow .sc-mk__w { padding: 0 2px; font-size: 16px; letter-spacing: 0; }
[data-widget="w-samecode-scrolly"] .sc-mk__w.is-enter { animation: sc-in var(--dur-2) var(--ease-out); }
@keyframes sc-in { from { opacity: 0; } to { opacity: 1; } }

/* tests */
[data-widget="w-samecode-scrolly"] .sc-test {
  display: flex; flex-direction: column;
  padding: 2px var(--sc-pad);
  background: var(--surface);
  border: var(--stroke) solid var(--ink-4); border-radius: var(--radius-1);
}
[data-widget="w-samecode-scrolly"] .sc-test__k { font: 700 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
[data-widget="w-samecode-scrolly"] .sc-test__st {
  font: 700 var(--fs-caption)/18px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
[data-widget="w-samecode-scrolly"] .sc-test__d { min-height: 32px; font: 400 12px/16px var(--font-mono); color: var(--ink-2); overflow-wrap: anywhere; }
[data-widget="w-samecode-scrolly"] .sc-test--pass .sc-test__st { color: var(--good); }
[data-widget="w-samecode-scrolly"] .sc-test--fail { border-color: var(--bad); }
[data-widget="w-samecode-scrolly"] .sc-test--fail .sc-test__st { color: var(--bad); }
[data-widget="w-samecode-scrolly"] .sc-test--unreleased { border-style: dashed; }
[data-widget="w-samecode-scrolly"] .sc-lamp { display: inline-block; width: var(--sp-1); height: var(--sp-1); margin-right: var(--sp-half); vertical-align: 0; }
[data-widget="w-samecode-scrolly"] .sc-test--pass .sc-lamp { background: var(--good); }
[data-widget="w-samecode-scrolly"] .sc-test--fail .sc-lamp { background: var(--bad); }

[data-widget="w-samecode-scrolly"] .sc__legend {
  margin-top: var(--sp-half); text-align: center;
  font: 700 11px/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}

/* step highlight: what changed in this step gets a 3px ink outline, for this step only.
   It eases in over dur-2 (≤ 300ms); the tokens make it instant under prefers-reduced-motion. */
[data-widget="w-samecode-scrolly"] .is-hl {
  outline: 3px solid transparent; outline-offset: 1px;
  transition: outline-color var(--dur-2) var(--ease-out);
}
[data-widget="w-samecode-scrolly"] .sc.is-lit .is-hl { outline-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  [data-widget="w-samecode-scrolly"] .is-hl { transition: none; }
  [data-widget="w-samecode-scrolly"] .sc-mk__w.is-enter { animation: none; }
}

/* Load-time reservation: the page reserves 420px (≥ 600px wide) or min(316px, 50vh) for every canvas
   slot; lane A draws shorter (no image row). Every state of a lane has the same height (CURRICULUM §8.5). */