/* ---- T4 · the walkthrough (E12c): the steps, and the scene they play on ---
   In motion the walk is a track (--n steps, 50vh of scroll each) and its
   box is pinned under the nav while the track scrolls by: the steps on the
   left, as an index with a bar that fills, the scene on the right
   (how.js). Narrower than 1200 the steps are a row of keys over the scene,
   the step's words under them. Still, nothing pins. */
/* G13: "How it works", plain small text over the headline (the user asked
   for it, 2026-10-13; never a pill, BRAND-VOICE) */
.how .head .hlabel{margin:0 0 18px;font:600 17px/1.2 var(--ui);color:var(--dim)}
.how .head .h2{max-width:14em}
/* "your mouse", the words that land, keep to one line, the highlighter unbroken */
.how .head .h2 .hl{white-space:nowrap}
.walk{position:relative;margin-top:clamp(36px,4vw,56px)}
html.motion .walk{height:calc(var(--n,7) * 50vh + 100vh - var(--navh))}
.wpin{position:relative}
/* the box is centred by its auto margins, which give way when it is the
   taller (B1): it then runs off the bottom, never up under the nav */
html.motion .wpin{position:sticky;top:var(--navh);height:calc(100vh - var(--navh));display:flex;flex-direction:column}
html.motion .wbox{margin-block:auto;padding-block:16px}
.wbox{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,3.4vw,48px);align-items:center;width:100%}
.windex{position:relative;padding-left:26px}
.wbar{position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--line)}
.wbar i{position:absolute;inset:0;border-radius:3px;background:var(--key);transform:scaleY(0);transform-origin:top}
html.still .wbar i{transform:none}
.wsteps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.wstep{display:flex;align-items:center;gap:16px;min-height:60px;padding:6px 12px 6px 10px;margin-left:-10px;border-radius:14px;color:var(--dim);font:600 17.5px/1.3 var(--ui);transition:color 200ms ease,background-color 200ms ease,box-shadow 200ms ease,transform 160ms var(--ease-out)}
/* each step's key a large keycap, as the hero's (S5) */
.wstep .hk{font-size:44px;flex:none;min-width:2.85em}
.wstep .kc{transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out),opacity 200ms ease}
.wstep:not(.on) .kc{opacity:.62}
.wstep.on{color:var(--ink);background:#fff;box-shadow:var(--shadow-raised)}
.wstage{position:relative}
.wstage .scene{margin-left:0}
.wghost{position:absolute!important;pointer-events:none;z-index:6}
@media (hover:hover) and (pointer:fine){.wstep:not(.on):hover{color:var(--ink)}}
.wstep:active{transform:scale(.98);transition-duration:80ms}
.wstep:not(.on):active{background:rgba(255,255,255,.6)}

/* G13's tenth step: on a short screen the ten keys and their words, at 64 px
   a step, outgrew the pinned box (the last ended at 738 of 720 at 1280 × 720),
   so they close up there, the keys still large beside their words */
@media (min-width:1200px) and (max-height:820px){
  .wsteps{gap:2px}
  .wstep{min-height:50px;padding-block:3px}
  .wstep .hk{font-size:36px}
}
@media (max-width:1279px){.wbox{grid-template-columns:minmax(0,300px) auto}}
/* the website review: beside the steps from 1200, the scene took the stacked
   layout's 830 px window (page.css) and ran 25 px off a 1200 px screen; the
   wide layout's 712 and 640 fit beside 300 px of steps */
@media (min-width:1200px) and (max-width:1279px){.wstage .scene{width:712px;margin-left:auto}.wstage .sc-win{width:640px}}
@media (max-width:1199px){
  .wbox{grid-template-columns:minmax(0,1fr);row-gap:14px;align-content:center}
  .windex{padding-left:0;padding-top:12px}
  .wbar{left:0;right:0;top:0;bottom:auto;width:auto;height:3px}
  .wbar i{transform:scaleX(0);transform-origin:left}
  html.still .wbar i{transform:none}
  .wsteps{display:flex;gap:2px;padding-bottom:34px}
  .wstep{position:static;justify-content:center;min-width:44px;min-height:44px;padding:4px 6px;margin:0;border-radius:12px}
  .wstep .hk{font-size:36px;min-width:0}
  /* the step's words: under the row, the chosen one's alone */
  .wstep .wt{position:absolute;left:0;right:0;bottom:4px;font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity 200ms ease}
  .wstep.on .wt{opacity:1}
  html.still .wstep .wt{position:static;opacity:1;white-space:normal}
  html.still .wsteps{display:grid;grid-template-columns:none;padding-bottom:0}
  html.still .wstep{justify-content:flex-start}
}
@media (max-width:600px){
  /* E20's keys, ten since G13's ←, are wider than a phone (462 px in 324 at 360 for nine): they
     sit on two rows of five, centred, each key keeping its 44 px */
  .wsteps{display:grid;grid-template-columns:repeat(5,auto);gap:0 2px;justify-content:center;padding-bottom:28px}
  /* and the two rows give back the room they take, so the scene still ends
     on a 700 px screen at its 0.72 floor */
  .windex{padding-top:4px}
  .wstep{padding:4px 3px}
  .wstep .hk{font-size:28px}
  .wstep .wt{font-size:15px}
}