/* "How $196.44 is worked out", the pinned sideways track (founder, 24 Oct; prototype worked-out-proto, without the
   stacked bar). The default is the list (WorkedOut.astro's table, unchanged): everything below that draws the stage is
   scoped to .wt--pin, which src/scripts/worked-out.ts adds only with JavaScript, no reduced motion and a window at
   least 560px tall. While scrolling only transform (the track, the 390 window) and opacity (bands, panels, dots)
   change; positions are measured in the script and handed over as custom properties. No style attribute anywhere. */

/* Lenis (lenis@1.3.26, MIT, dist/lenis.css): its rules, verbatim. Lenis starts only in pinned mode. */
html.lenis, html.lenis body{ height:auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow:clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal]{ overscroll-behavior:contain; }
.lenis.lenis-smooth iframe{ pointer-events:none; }
.lenis.lenis-autoToggle{ transition-property:overflow; transition-duration:1ms; transition-behavior:allow-discrete; }

/* the track's offset: not inherited, so setting it each frame restyles the track alone */
@property --wt-x{ syntax:'<number>'; inherits:false; initial-value:0; }

.wt__runway, .wt__phone, .wt__win, .wt__view, .wt__ctl{ display:none; }

.wt--pin .wt__runway{ display:block; height:calc(100svh + 6 * 80svh); }
.wt--pin .wt__stage{ position:sticky; top:0; height:100svh; overflow:hidden; display:grid;
  grid-template-columns:auto minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto;
  column-gap:var(--s6); row-gap:18px; padding-top:26px; padding-bottom:22px; }
.wt--pin .wt__stage:focus{ outline:none; }
/* While the consent bar shows (html.has-consent, --consent-h from src/scripts/consent.ts) the stage stops at its top
   edge, so the ‹ › buttons are never under it (WCAG 2.2 SC 2.4.11). The script re-measures when the stage's height
   changes. Nothing on the stage moves or rescales: it is the same stage, with its foot above the bar. */
html.has-consent .wt--pin .wt__stage{ height:calc(100svh - var(--consent-h, 0px)); }
.wt--pin .wt__stage:focus-visible{ outline:2.5px solid var(--brand-deep); outline-offset:-3px; }

/* the phone, held on the left: the app's T3-Maths sheet, open, in the site's phone frame */
.wt--pin .wt__phone{ display:flex; grid-column:1; grid-row:1 / 3; align-items:center; justify-content:center; min-height:0; }
.phone-frame--wt-fit{--k:0.8;--frame:image-set(url("/assets/phone-front-k080@1x.png") 1x, url("/assets/phone-front-k080@2x.png") 2x, url("/assets/phone-front-k080@3x.png") 3x);--frame-w:353px;--frame-h:714px;}
@media (min-width:1080px) and (min-height:840px){ .phone-frame--wt-fit{--k:0.88;--frame:image-set(url("/assets/phone-front-k088@1x.png") 1x, url("/assets/phone-front-k088@2x.png") 2x, url("/assets/phone-front-k088@3x.png") 3x);--frame-w:388px;--frame-h:785px;} }
/* never taller than the stage: a shorter window cuts the phone's foot, which fades out as the prototype's did */
.wt__pf .phone-frame__device{ height:min(calc(min(var(--box-h), var(--scr-y) + var(--crop-b, 9999) * var(--fit)) * var(--k) * 1px), calc(100svh - 48px));
  -webkit-mask:linear-gradient(#000 86%, transparent); mask:linear-gradient(#000 86%, transparent); }
/* the sheet shown open and still: the hero's scroll-linked opening (site.css M1b) is the hero phone's alone */
.wt .t3{ animation:none; clip-path:none; }
.wt__app{ position:relative; }
/* the bands sit over the screen in its own points; the script places each on its row from the rendered rows.
   Outline only: no dimming layer over the rest of the screen (founder, 24 Oct) */
.wt__bands{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.wt__band{ position:absolute; left:calc(var(--wt-l, 0) * 1px); top:calc(var(--wt-t, 0) * 1px); width:calc(var(--wt-w, 0) * 1px);
  height:calc(var(--wt-h, 0) * 1px); border:2.5px solid var(--brand); border-radius:10px;
  opacity:0; transition:opacity 180ms linear; }
.wt__band.is-on{ opacity:1; }

/* the track, on the right: one panel per view */
.wt--pin .wt__view{ display:block; grid-column:2; grid-row:1; overflow:hidden; min-height:0; position:relative; }
.wt__track{ margin:0; padding:0; list-style:none; display:flex; height:100%; transform:translate3d(calc(var(--wt-x) * 1px), 0, 0); }
.wt__panel{ flex:0 0 100%; width:100%; height:100%; padding-right:4px; display:flex; flex-direction:column; justify-content:safe center;
  overflow-x:hidden; overflow-y:auto; }
/* overflow-y:auto: with a reader's own text spacing (WCAG 1.4.12) a panel's words can outgrow it; they scroll inside
   the panel instead of being cut. At the site's own spacing nothing overflows, so nothing scrolls and nothing changes.
   Each panel carries tabindex="-1": a scrolling panel is never a Tab stop inside the aria-hidden track. */
.wt__panel p{ margin:0; }
.wt__h{ font:900 var(--t-mark)/1.02 var(--display); letter-spacing:-.03em; text-wrap:balance; color:var(--ink); }
.wt__lead{ margin-top:var(--s3) !important; font-size:var(--t-lead); line-height:var(--lh-body); color:var(--ink); }
.wt__step{ display:block; margin-bottom:14px; font:500 var(--t-micro)/1.4 var(--mono); letter-spacing:.12em; color:var(--muted); }
.wt__step::before{ content:attr(data-step); }
.wt__name{ font:900 var(--t-display)/1.08 var(--display); letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.wt__sub{ display:block; margin-top:var(--s1); font:400 var(--t-micro)/1.5 var(--mono); letter-spacing:.02em; color:var(--muted); }
.wt__amt{ display:block; margin-top:var(--s3); font:400 var(--t-53)/1.1 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  color:var(--ink); white-space:nowrap; }
.wt__notes{ margin-top:22px; max-width:46ch; display:grid; gap:var(--s2); color:var(--muted); font-size:17px; line-height:var(--lh-body); }
.wt__rule{ display:block; width:100%; max-width:420px; border-top:1.5px solid var(--ink); margin-bottom:18px; }
.wt__panel--total .wt__name{ font:700 var(--t-h2)/1.1 var(--body); letter-spacing:-.01em; }
.wt__panel--total .wt__amt{ font-size:var(--t-86); line-height:1; }

/* the controls: dots, then the two 44px buttons */
.wt--pin .wt__ctl{ display:flex; grid-column:2; grid-row:2; align-items:center; gap:12px; }
.wt__dots{ display:flex; gap:6px; align-items:center; margin-right:auto; }
.wt__dot{ width:8px; height:8px; border-radius:4px; background:var(--line); transition:transform 180ms linear, background-color 180ms linear; }
.wt__dot.is-on{ background:var(--ink); transform:scaleX(2.6); margin:0 7px; }
.wt__btn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1.5px solid var(--line);
  border-radius:999px; background:var(--surface); color:var(--ink); cursor:pointer; }
.wt__btn:hover{ border-color:var(--muted); }
.wt__btn svg{ width:18px; height:18px; display:block; }

/* the 390 window: the same sheet, scaled to the window and slid so the active row sits under a fixed band */
.wt__win{ position:relative; height:136px; border-radius:16px; overflow:hidden; background:var(--page); border:1px solid var(--line); }
.wt__win .wt__app{ position:absolute; left:0; top:0; transform-origin:0 0;
  transform:translate3d(0, calc(var(--wt-wy, 0) * 1px), 0) scale(var(--wt-ws, 1)); transition:transform 260ms cubic-bezier(.2,.7,.2,1); }
.wt__win .t3--scrim{ display:none; }
.wt__winband{ position:absolute; left:8px; right:8px; top:50%; height:calc(var(--wt-wh, 50) * 1px); transform:translateY(-50%);
  border:2.5px solid var(--brand); border-radius:10px; pointer-events:none; z-index:2; }
.wt__win::before, .wt__win::after{ content:""; position:absolute; left:0; right:0; height:36px; z-index:1; pointer-events:none; }
.wt__win::before{ top:0; background:linear-gradient(var(--page), rgba(255,255,255,0)); }
.wt__win::after{ bottom:0; background:linear-gradient(rgba(255,255,255,0), var(--page)); }

@media (max-width:759px){
  .wt__h{ font-size:var(--t-display); }
  .wt__name{ font-size:var(--t-h2); }
  .wt__amt{ font-size:min(var(--t-display), 12vw); margin-top:var(--s2); }   /* 12vw: under 349px wide the amount keeps clear of the panel's edge, with a reader's text spacing too (1.4.12) */
  .wt__panel--total .wt__amt{ font-size:var(--t-53); }
  .wt__panel--total .wt__name{ font-size:var(--t-h3); }
  .wt__notes{ font-size:var(--t-body); margin-top:14px; }
  .wt--pin .wt__stage{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; row-gap:14px; padding-top:14px; padding-bottom:10px; }
  .wt--pin .wt__phone{ display:none; }
  .wt--pin .wt__win{ display:block; grid-column:1; grid-row:1; }
  .wt--pin .wt__view{ grid-column:1; grid-row:2; }
  .wt__panel{ justify-content:flex-start; padding-top:6px; }
  .wt__panel--intro{ justify-content:center; }
  .wt--pin .wt__ctl{ grid-column:1; grid-row:3; }
}
@media (max-width:759px) and (max-height:700px){ .wt__win{ height:112px; } .wt__notes{ font-size:15px; } }