/* Piku Print Club, the site (v3). THE TOUR: one phone, pinned in the middle of the screen, that follows the page.
   Loaded LAST (see partials/head.html): it resets the old per-chapter section rules in the demo css (#snap, #goof.efx, #stick.dc-sec, #keep.kp-stage)
   with higher specificity (an id plus .tour), so those files only have to care about their screens and satellites. Contract: src/README.md ("The tour").

   Markup:  #tour.tour[data-step] > header.hero
                                  + .tour-track > .tour-phone > .bigphone > .bigphone-body > five .tscr[data-step]   (partials/tour-phone.html)
                                  + four section.step.on-blue|on-pink|on-mint|on-teal > .stage-dots + .step-stage > (.step-title, .step-side, .step-sats)

   NO stacking context on .tour, .step or .step-stage (no isolation, transform, opacity, filter, z-index there): everything below paints in the page's own
   context, in this order:  step backgrounds (auto)  <  halftone .stage-dots (auto, tree order)  <  satellites (their own demo z, 1 to 5)  <  step words (2)
   <  the phone (10)  <  satellites that overlap the phone (.sat-over, 12)  <  the loose Decorate stickers (.boom-field, 12, painted later so above)  <  the nav pill (60). */

/* ============ the numbers ============
   --vh100 is one screen tall (svh where it exists, so a mobile browser bar never changes the layout).
   The phone: --pw wide, --ph tall. The real bezel (css/phone.css): body = 3px border + 3.4% of the width on every side around a 360:700 screen, so
   height = --k * width - --kc (K 1.8802 and 5.67px, measured: see README). --pt is where it pins (centred), --peek how much of it shows in the hero. */
/* the nav pill's height scales with the screen (chrome.css); the phone keeps its own room under it */
:root{--navh:clamp(58px,4.1vw,96px)}
.tour{--vh100:100vh}
@supports (height:100svh){.tour{--vh100:100svh}}
.tour{
  position:relative;
  --k:1.8840;--kc:0px;
  --pwmax:clamp(300px,31vw,760px);
  --navroom:calc(var(--navh) * 1.7);      /* above the phone: the pill (top 26% + its height) and a clear gap under it */
  --below:calc(var(--navh) * .72);        /* under the phone (room for its hard shadow) */
  --ph:min(calc(var(--vh100) - var(--navroom) - var(--below)),calc(var(--pwmax) * var(--k) - var(--kc)));
  --pw:calc((var(--ph) + var(--kc)) / var(--k));
  --pt:calc(var(--navroom) + (var(--vh100) - var(--navroom) - var(--below) - var(--ph)) / 2);
  --peek:calc(var(--ph) * .36);
  --hero-h:var(--vh100);
  --tpw:var(--pw);           /* the phone's width, kept under another name for places that must not read a chapter's own --pw */
  --kpw:var(--pw);           /* Keep's old name for it (css/demo-prints.css) */
  --gap:clamp(16px,2.4vw,64px);      /* between the phone and the words */
  --pad:clamp(20px,3.6vw,96px);      /* the stage's side padding */
}
/* a short, wide window (a phone on its side, 700 to 999 wide and up to 520 tall): the three-column stage with a phone that gives up the nav pill's room */
@media (max-height:520px){
  .tour{--ph:min(calc(var(--vh100) * .82),calc(var(--pwmax) * var(--k) - var(--kc)))}
}
/* phones and tablets: the words sit in the top ~30% of the screen, the phone below them, sized by height so it always fits whole */
@media (max-width:999.98px) and (min-height:521px),(max-width:699.98px){
  .tour{
    --zone:calc(var(--vh100) * .3);
    --pw:min(78vw,calc((var(--vh100) - var(--zone) - 24px + var(--kc)) / var(--k)));
    --ph:calc(var(--pw) * var(--k) - var(--kc));
    --pt:var(--zone);
    --gap:16px;--pad:16px;
  }
}

/* ============ the track and the pinned phone ============
   The track is only the sticky containing block (absolute over the whole .tour box, no pointer events). It stops --pt short of the bottom, so the phone leaves
   at the same moment the last stage does. The phone's natural place is the bottom edge of the hero (--hero-bottom is the hero's real height, set by core.js;
   --hero-h is the css value), pulled up by --peek: that is the "peek". Scrolling lifts it to --pt, where it pins. */
/* bottom inset = the free space under the pinned phone (equals --pt on desktop where it is centred; on small screens --pt is the words zone, so it is computed) */
.tour-track{position:absolute;inset:0 0 calc(var(--vh100) - var(--pt) - var(--ph)) 0;pointer-events:none}
.tour-phone{position:sticky;top:var(--pt);z-index:10;width:var(--pw);height:var(--ph);margin:calc(var(--hero-bottom,var(--hero-h)) - var(--peek)) auto 0;pointer-events:auto}
.tour-phone .bigphone{--pw:var(--tpw);margin:0}
.tour .bigphone-body{display:grid}

/* the five screens, one on top of the other; only .is-active shows (core.js also sets inert + aria-hidden on the rest).
   A leaving screen fades quickly, the arriving one springs up with a small scale (the app's motion), instant for reduced motion. visibility keeps the layout
   of a hidden screen (the demos measure it) but takes it out of the tab order and out of painting. */
.tscr{grid-area:1/1;min-width:0;position:relative;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(calc(var(--pw) * .028)) scale(.965);
  transition:opacity .2s ease-out,transform .2s ease-out,visibility 0s linear .2s}
.tscr.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .3s ease-out .07s,transform .55s var(--spring-pop) .07s,visibility 0s}
.tscr>.scr{width:100%}

/* ============ the step bands ============
   Four full-bleed colour bands with hard seams. A band is ~175 screens tall: while it crosses the screen its .step-stage is pinned for the last 75%, and that
   is when its demo plays (the phone is pinned the whole time). */
.tour .step{position:relative;display:block;min-height:calc(var(--vh100) * 1.75);padding:0;margin:0;scroll-margin-top:-68px}
.step.on-blue{background:var(--blue);color:var(--paper)}
.step.on-pink{background:var(--pink);color:var(--ink)}
.step.on-mint{background:var(--mint);color:var(--ink)}
.step.on-teal{background:var(--teal);color:var(--ink)}
/* the old chapter css put layout and stacking on the sections by id: undo all of it (an id and .tour beat every #snap / #goof.efx / .dc-sec / .kp-stage rule) */
.tour #snap.step,.tour #goof.step,.tour #stick.step,.tour #keep.step{display:block;flex-direction:row;align-items:stretch;padding:0;margin:0;z-index:auto;isolation:auto;--pw:var(--tpw)}
.tour #goof.step{--efx-pw:var(--tpw)}
/* the halftone: paper dots on the band, behind everything of the step (tree order, above the band's own colour), never over the phone */
.tour .step .stage-dots{z-index:auto}

/* ============ the stage: sticky, one screen tall, the words and the satellites ============ */
.step-stage{position:sticky;top:0;height:var(--vh100);pointer-events:none;
  display:grid;grid-template-columns:minmax(0,1fr) calc(var(--pw) + 2 * var(--gap)) minmax(0,1fr);align-items:center;padding:0 var(--pad);
  --c1w:calc((100vw - 20px - 2 * var(--pad) - var(--pw) - 2 * var(--gap)) / 2)}
.step-stage button,.step-stage a{pointer-events:auto}
/* the satellites' frame: a box exactly on the pinned phone (same width, same height, same place), so the demo css can place round it from the phone's size */
.step-sats{position:absolute;left:50%;top:var(--pt);width:var(--pw);height:var(--ph);translate:-50% 0;pointer-events:none}
.step-sats>*{z-index:1}
.tour .step-sats .sat-over{z-index:12}

/* the title: huge DynaPuff, left, in the left column. --tw is how wide the longest line is in em, so the type is also held to the column (never under the phone) */
.tour .step-title{grid-column:1;justify-self:start;position:relative;z-index:2;margin:0;text-align:left;
  font-size:min(11vw,calc(var(--vh100) * .17),14rem,calc(var(--c1w) / var(--tw,3)));line-height:.9;letter-spacing:-.01em;padding:0 .06em;rotate:var(--r,0deg);
  font-variation-settings:"wght" 700,"wdth" var(--wd,85);text-wrap:balance}
.step-title span{display:block}
.on-blue .step-title{color:var(--paper);text-shadow:-.03em .035em 0 var(--ghost-blue)}
.on-pink .step-title{color:var(--ink);text-shadow:-.03em .035em 0 var(--ghost-pink)}
.on-mint .step-title{color:var(--ink);text-shadow:-.03em .035em 0 var(--ghost-mint)}
.on-teal .step-title{color:var(--ink);text-shadow:-.03em .035em 0 var(--ghost-teal)}

/* the side: one line, the icon chips stacked, Show me */
.step-side{grid-column:3;justify-self:start;position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;max-width:min(100%,34rem)}
.tour .step-line{margin:0 0 .7em;font-family:var(--font-title);font-weight:700;font-variation-settings:"wght" 700,"wdth" 100;font-size:clamp(1.7rem,2.35vw,3.7rem);line-height:1.12;letter-spacing:-.005em;text-wrap:balance;color:inherit}
.on-teal .step-line{color:var(--on-teal)}
.tour .step-chips{display:flex;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;justify-content:flex-start;gap:.5em;margin:0 0 1.2em;padding:0;max-width:none;font-size:clamp(1.25rem,1.6vw,2.4rem)}
.tour .step-chip{display:flex;align-items:center;gap:.6em;min-height:0;padding:.1em 0;border:0;border-radius:0;background:none;color:inherit;font-weight:800;font-size:1em;line-height:1;white-space:nowrap;text-align:left;rotate:var(--r,0deg)}
.on-teal .step-chip{color:var(--on-teal)}
.tour .step-ico{flex:none;display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:var(--c,var(--mint));color:var(--ink);border:.11em solid var(--ink)}
.on-blue .step-ico{border-color:var(--paper)}
.step-ico .ic{width:1.15em;height:1.15em}
/* Show me: only offered once the script has run. A flat pill (pink on blue, mint and teal; ink on pink), one small soft shadow, no ring */
.step-cap{margin:.9em 0 0;font-weight:800;font-size:clamp(1rem,1.05vw,1.4rem);line-height:1.25;color:inherit;max-width:16em}
/* Decorate's chips are buttons that open that tool: keep them quiet (the old chapter css gave them a pill) */
.tour .step-chip.dc-chip,.tour .step-chip.tab-chip{padding:.1em .6em .1em .1em;margin-left:-.1em;border-radius:999px;cursor:pointer;scale:1;rotate:0deg}   /* straight: a tilted pill looks sloppy */
.tour .step-chip.dc-chip:hover,.tour .step-chip.tab-chip:hover{background:rgba(30,42,36,.07)}
/* the open tool: a heavier word on a soft chip, the hover's tint turned up (--chip-on). Darker on the blue band, where the text is paper. No underline. */
.tour .step-chip.dc-chip[aria-pressed=true],.tour .step-chip.tab-chip[aria-pressed=true]{font-weight:900;background:var(--chip-on,rgba(30,42,36,.17))}
.on-blue .step-chip{--chip-on:rgba(30,42,36,.3)}
.on-teal .step-chip{--chip-on:rgba(30,42,36,.16)}
.tour .step-chip.tab-chip{transition:background-color .2s}
.tour .step-side .dc-boom{margin-top:0;margin-bottom:1.1em}
.tour .step-side .dc-boom{--bw:clamp(170px,14vw,380px)}

/* the Keep kid stickers: to the left of the phone, low (they pick whose prints the phone shows); interactive */
.step-sats .kp-aside{position:absolute;right:calc(100% + var(--gap) * .5);bottom:2%;top:auto;margin:0;z-index:1;pointer-events:none}
.step-sats .kp-aside .turn{pointer-events:auto}

/* ============ phones and tablets: words on top, the phone below ============ */
@media (max-width:999.98px) and (min-height:521px),(max-width:699.98px){
  .step-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-content:start;align-items:start;justify-items:center;text-align:center;column-gap:12px;row-gap:.3rem;padding:62px var(--pad) 0}
  .tour .step-title{grid-column:1;grid-row:1;justify-self:center;text-align:center;font-size:min(17vw,calc(var(--vh100) * .095),6.4rem);line-height:.9}
  .step-title span{display:inline}
  .step-side{display:contents}
  .tour .step-line{grid-column:1 / -1;grid-row:2;margin:0;text-align:center;font-size:clamp(1.15rem,3.6vw,1.6rem);line-height:1.12}
  .tour .step-chips{grid-column:1 / -1;grid-row:3;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:.3em 1em;margin:.25em 0 0;font-size:clamp(.85rem,2.6vw,1.1rem)}
  .tour .step-chip.dc-chip,.tour .step-chip.tab-chip{padding-right:.4em}
  .step-cap,.tour .step-side .dc-boom{display:none}
  .tour .step-title{font-size:min(17vw,calc(var(--vh100) * .095),6.4rem,calc((100vw - 2 * var(--pad) - 70px) / var(--tw1,var(--tw,3))))}
  /* nothing fits beside a phone this wide: the satellites are trimmed (a step that wants one on a small screen adds .sat-m to it) */
  .step-sats>:not(.sat-m){display:none}
  /* the words wait until their step's stage is pinned (js/core.js adds .words-in to the step), then rise in one after the other: while a step is still sliding in from
     below its words would scroll over the pinned phone, which here sits right under them */
  .js .tour .step:not(.words-in) :is(.step-title,.step-line,.step-chips){opacity:0;translate:0 18px}
  .js .tour .step :is(.step-title,.step-line,.step-chips){transition:opacity .4s ease-out,translate .55s var(--spring-pop)}
  .js .tour .step.words-in .step-line{transition-delay:.08s}
  .js .tour .step.words-in .step-chips{transition-delay:.16s}
}
@media (max-width:520px){
  /* Show me shrinks to a round button (its label stays in aria-label) so a long title like Decorate keeps the row */
}
/* (the chips used to be dropped on short screens; the smaller words now leave room for them) */

/* ============ reduced motion: the screen simply swaps ============ */
@media (prefers-reduced-motion:reduce){
  .tscr,.tscr.is-active{transform:none;transition:none}
}
@media print{
  .tscr:not(.is-active){display:none}
}

/* keyboard-only entry into the pinned screen: invisible until it has focus, then a plain text button */
.step-try{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;pointer-events:none}
.step-try:focus-visible{position:static;width:auto;height:auto;margin:.6em 0 0;padding:.5em .9em;clip:auto;overflow:visible;pointer-events:auto;border-radius:12px;background:var(--paper);color:var(--ink);font-weight:800;font-size:1rem}

/* the mode / family chips are buttons: they switch the app preview (same quiet look as Decorate's chips; a plain button reset) */
.tour .step-chip.tab-chip{font:inherit;font-weight:800;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
html:not(.js) .tab-chip{cursor:default}

/* phones: there is no nav pill (css/chrome.css), so the words start near the top and the phone sits higher, leaving the bottom corner for the arrows */
@media (max-width:700px){
  .step-stage{padding-top:22px}
  .tour{--zone:calc(var(--vh100) * .25)}
}

/* a tablet (701 to 999 wide, upright): the nav pill is shown and is taller than the stage's top padding, so the words start lower and a bit smaller */
@media (min-width:701px) and (max-width:999.98px) and (min-height:521px){
  .tour{--zone:calc(var(--vh100) * .35)}
  .step-stage{padding-top:92px}
  .tour .step-title{font-size:min(17vw,calc(var(--vh100) * .082),6.4rem,calc((100vw - 2 * var(--pad) - 70px) / var(--tw1,var(--tw,3))))}
}
/* a phone: the phone itself is a little narrower so the stacked arrows (css/chrome.css) fit in the margin beside it; Decorate's four long chips make a tidy 2 x 2, not 3 + 1 (Effects' four short ones already fit one row) */
@media (max-width:700px){
  .tour{--pw:min(calc(100vw - 100px),78vw,calc((var(--vh100) - var(--zone) - 24px + var(--kc)) / var(--k)))}
}
@media (max-width:429.98px){
  .tour #stick .step-chips{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;gap:.3em 1.6em}
}

/* ============ phones (up to 700 wide): the vibe of Decorate on every step ============
   The words are smaller and the zone above the phone taller, so even Decorate's four chips (two rows) clear the phone; and beside the phone, in the margins, die-cut
   stickers tuck in behind its sides (--m is the margin on each side). Snap and Keep add them as .edge-sats (decoration, in the markup); Effects moves its eight live
   pieces there (css/demo-fx.css); Decorate already scatters its own (js/demo-decorate.js). They appear with the words (.words-in, js/core.js) and go when the step leaves. */
.edge-sats{display:none}
@media (max-width:700px){
  .tour{--m:calc((100vw - var(--pw)) / 2);--zone:clamp(172px,calc(var(--vh100) * .245),250px)}
  .tour .step-title{font-size:min(12.4vw,calc(var(--vh100) * .068),4.6rem,calc((100vw - 2 * var(--pad) - 70px) / var(--tw1,var(--tw,3))))}
  .tour .step-line{font-size:clamp(1rem,3.9vw,1.3rem)}
  .edge-sats{display:block;position:absolute;inset:0;pointer-events:none}
  .es{--e:2.4px;--e2:1.7px;position:absolute;top:var(--y);height:auto;max-width:none;width:calc(min(var(--m) + 10px,78px) * var(--k,1));rotate:var(--r,0deg);
    transition:opacity .35s ease-out var(--d,0s),scale .6s var(--spring-pop) var(--d,0s);-webkit-user-drag:none;
    filter:drop-shadow(var(--e) 0 0 #fff) drop-shadow(calc(var(--e) * -1) 0 0 #fff) drop-shadow(0 var(--e) 0 #fff) drop-shadow(0 calc(var(--e) * -1) 0 #fff)
      drop-shadow(var(--e2) var(--e2) 0 #fff) drop-shadow(calc(var(--e2) * -1) calc(var(--e2) * -1) 0 #fff) drop-shadow(var(--e2) calc(var(--e2) * -1) 0 #fff) drop-shadow(calc(var(--e2) * -1) var(--e2) 0 #fff)
      drop-shadow(0 3px 4px rgba(30,42,36,.28))}
  .es.l{left:calc(var(--m) * -1 + 3px)}
  .es.r{left:calc(100% - 10px)}
  .js .tour .step:not(.words-in) .es{opacity:0;scale:.35}
}
@media (prefers-reduced-motion:reduce){.es{transition:none}}

/* a phone on its side (short and wide, up to 1199): the chips sit in a row (two rows of two where the column is narrow) UNDER THE TITLE on the left, not as a tall column
   beside the phone; the one line stays on the right */
@media (max-height:520px) and (min-width:560px) and (max-width:1199.98px){
  .step-side{display:contents}
  .step-stage{grid-template-rows:auto auto;align-content:center;row-gap:.35rem}
  .tour .step-title{grid-column:1;grid-row:1;align-self:end}
  .tour .step-chips{grid-column:1;grid-row:2;align-self:start;display:grid;grid-template-columns:repeat(2,max-content);gap:.2em 1.2em;margin:0;font-size:.9rem}
  .p-sunglasses,.p-starglasses{display:none}   /* they would sit on the title and the line here */
  .tour .step-line{grid-column:3;grid-row:1 / span 2;align-self:center;margin:0}
  .step-cap,.tour .step-side .dc-boom{display:none}
}