/* Piku Print Club, the site (v3). Step 4 (Keep): the My Prints screen (in the pinned tour phone) and the step's two satellites, the kid stickers and the fan of prints.
   Sized from --u like the camera screen. Text is never below 11px, controls are at least 44px.
   Scrolling: the phone is PINNED to the middle of the page, so a thumb or a wheel over it is nearly always trying to scroll the PAGE. The prints list therefore
   does not scroll by wheel or touch (overflow-y hidden; it shows the first days and the rest is cropped by the screen, like a list that goes on; keyboard focus
   still brings a print into view). The viewer only claims sideways swipes (touch-action: pan-y). */
/* ============ screen: My Prints, and the "Whose turn?" row ============ */
.kp-head{position:relative;flex:none;padding:calc(24*var(--u)) calc(40*var(--u)) calc(6*var(--u))}
.kp-head::before{content:"";position:absolute;left:50%;top:calc(9*var(--u));width:calc(42*var(--u));height:calc(5*var(--u));margin-left:calc(-21*var(--u));border-radius:9px;background:rgba(30,42,36,.18)}
.kp-head .modes{margin:0;height:max(calc(52*var(--u)),calc(50px*var(--fl,1)))}
.kp-modes button{font-size:max(calc(11px*var(--ffl,1)),calc(12*var(--u)));border-radius:999px}
.kp-modes .ic{min-width:15px;min-height:15px}
/* a pink dot on a tab that got a new print while you were looking at another one */
.kp-modes button[data-new]::after{content:"";position:absolute;top:calc(6*var(--u));left:calc(50% + 10px);width:9px;height:9px;border-radius:50%;background:var(--pink)}
.kp-modes button[aria-checked=true][data-new]::after{display:none}
.kp-grid{position:relative;flex:1;min-height:0;overflow-y:hidden;scrollbar-width:none;padding:0 calc(16*var(--u)) calc(36*var(--u))}
.kp-grid::-webkit-scrollbar{display:none}
/* day labels look like the app's pinned day headers but are not headings (the rows carry the day in their label) */
.kp-day{font-family:var(--font-body);font-variation-settings:normal;position:sticky;top:0;z-index:3;margin:0 calc(-16*var(--u));padding:calc(10*var(--u)) calc(16*var(--u)) calc(8*var(--u));background:var(--paper);font-weight:800;font-size:max(calc(15px*var(--ffl,1)),calc(17*var(--u)))}
.kp-row{display:grid;grid-template-columns:1fr 1fr;gap:calc(16*var(--u));align-items:start}
.kp{position:relative;display:block;padding:0;border:0;background:none;text-align:left;-webkit-tap-highlight-color:transparent}
.kp .pcard{border-radius:3.5%/2.5%;transition:transform .34s var(--spring-press)}
.kp:active .pcard{transform:scale(.97)}
/* a booth strip is a narrow print: the button shrink-wraps it, so its star hangs off the strip's own corner */
.kp.strip{display:block;width:calc(74*var(--u));justify-self:center}
/* the Booth tab: strips are narrow, so a day's row holds four of them, centred (a row of three or two is still centred, never left with a hole) */
.kp-row.strips{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(14*var(--u)) calc(12*var(--u))}
.kp-row.strips .kp.strip{width:calc((100% - 36*var(--u)) / 4)}
.kp.strip:only-child{grid-column:1/-1}           /* a day with one strip: centred across the row */
/* a day with an odd number of prints: the last one stands centred across the row (no hole beside it) */
.kp:last-child:nth-child(odd):not(.strip){grid-column:1/-1;justify-self:center;width:calc((100% - 16*var(--u)) / 2)}
.kp.strip .bstrip{display:block;position:relative;width:100%;rotate:2deg}
.scr-keep img{-webkit-touch-callout:none}
.kp.fresh .pcard,.kp.fresh .bstrip{animation:freshin .6s var(--spring-pop) both}
@keyframes freshin{from{scale:.78;opacity:0}to{scale:1;opacity:1}}
/* prints made in the other chapters: the Monster from Snap, and the decorated card from Decorate (its stickers are sized in cqw) */
.pcard.dc-made{container-type:inline-size}
/* the star sticker: a sunflower star on an ink disc with a white rim, hanging over the print's corner */
.starstk{position:absolute;right:calc(-8*var(--u));top:calc(-8*var(--u));z-index:3;width:calc(30*var(--u));height:calc(30*var(--u));border-radius:50%;background:var(--ink);border:calc(2.4*var(--u)) solid #fff;color:var(--sunflower);display:grid;place-items:center;rotate:12deg;scale:.4;opacity:0;box-shadow:0 1px 3px rgba(30,42,36,.25);transition:scale .4s var(--spring-pop),opacity .15s}
.starstk .ic{width:calc(15*var(--u));height:calc(15*var(--u));fill:currentColor;stroke:currentColor}
.kp.starred .starstk,.starstk.on{scale:1;opacity:1}
/* nothing in this tab (after the last print of a tab is binned): the tab's riso drawing at 120, 14 above the words, the pair centred in the room under the switch
   (the app: VStack(spacing 14) { spot(120), "Nothing here yet!" 19 heavy, ink }, framed to fill the rest of the tray). The drawing is a die-cut sticker (its white edge is part of it),
   with the app's soft shadow, and fades in over .25s when it was fetched just now. */
.kp-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(14*var(--u));margin:0;padding:0 calc(16*var(--u)) calc(24*var(--u));text-align:center;font-weight:800;font-size:max(calc(17px*var(--ffl,1)),calc(19*var(--u)));color:var(--ink)}
.kp-spot{display:block;width:max(calc(96px*var(--fl,1)),calc(120*var(--u)));height:max(calc(96px*var(--fl,1)),calc(120*var(--u)));object-fit:contain;opacity:0;transition:opacity .25s ease-out;pointer-events:none;-webkit-user-drag:none;user-select:none;filter:drop-shadow(0 calc(1.5*var(--u)) calc(1.8*var(--u)) rgba(30,42,36,.3))}
.kp-spot.is-in{opacity:1}

/* ============ the viewer ============ */
.kp-box{position:absolute;inset:0 0 -1px;z-index:6;display:flex;flex-direction:column;background:rgba(30,42,36,.34);-webkit-backdrop-filter:blur(max(4px,calc(var(--pw,400px) * .016)));backdrop-filter:blur(max(4px,calc(var(--pw,400px) * .016)));animation:fadein .25s ease-out both}
.kp-box[hidden]{display:none}
/* the app's lightbox is an overlay, not a page: the album stays behind it, blurred and dimmed (spec 4.5: blur and ink at 16 to 20%), so the screen is full of
   colour whether a print is open or not. Without backdrop blur the album is simply covered by paper. The blur is sized from the phone's width (--pw, in px): Safari
   drops a backdrop-filter that is written in container units (cqw), which is what --u is made of. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.kp-box{background:rgba(243,238,227,.96)}}
.kp-lbtns{position:relative;flex:none;display:flex;align-items:center;gap:calc(10*var(--u));padding:calc(22*var(--u)) calc(14*var(--u)) 0}
.lb{position:relative;display:grid;place-items:center;width:max(calc(44*var(--u)),calc(44px*var(--fl,1)));height:max(calc(44*var(--u)),calc(44px*var(--fl,1)));padding:0;border:0;border-radius:50%;background:rgba(30,42,36,.55);color:#fff;text-decoration:none;flex:none}
.lb .ic{width:calc(19*var(--u));height:calc(19*var(--u));min-width:17px;min-height:17px;stroke-width:2.4}
.lb-bin{background:#fff;color:#E0475E;box-shadow:inset 0 0 0 calc(2.5*var(--u)) rgba(224,71,94,.35);-webkit-touch-callout:none}
.lb-star{transition:scale .3s var(--spring-pop),background-color .2s}
.lb-star[aria-pressed=true]{background:rgba(30,42,36,.88);color:var(--sunflower);scale:1.08}
.lb-star[aria-pressed=true] .ic{fill:currentColor}
.lb-deco[hidden]{display:none}
.lb-count{flex:1;min-width:0;display:flex;justify-content:center}
/* a narrow screen (a small phone) has no room for the count between the bin and the three buttons */
@container (max-width:330px){.lb-count{display:none}}
.lb-count b{padding:calc(6*var(--u)) calc(13*var(--u));border-radius:999px;background:#fff;color:var(--ink);font-weight:800;font-size:max(calc(12px*var(--ffl,1)),calc(13*var(--u)));line-height:1;white-space:nowrap;box-shadow:var(--bx-sticker)}
/* "Press and hold": what a quick tap on the bin tells you (a white sticker label, never an ink bar) */
.lb-tip{position:absolute;left:calc(14*var(--u));top:calc(28*var(--u) + max(calc(44*var(--u)),calc(44px*var(--fl,1))));z-index:4;padding:calc(6px*var(--fl,1)) calc(12px*var(--fl,1));border-radius:999px;background:#fff;color:var(--ink);font-weight:800;font-size:max(calc(12px*var(--ffl,1)),calc(13*var(--u)));box-shadow:var(--bx-sticker);animation:cnt .4s var(--spring-pop) both}
.lb-tip[hidden]{display:none}
/* the viewer is a print gallery: the print is as wide as the screen allows (a screen is 360 units wide, the print is 318) and sits between the top
   buttons and a pair of arrows underneath it, so the cream around it is an even, designed margin and no control covers the picture */
.kp-big{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:calc(6*var(--u)) calc(14*var(--u)) calc(88*var(--u));touch-action:pan-y}
.kp-card{display:grid;place-items:center;min-width:0}
.kp-card .pcard{width:min(calc(290*var(--u)),calc(100cqw - 28px));rotate:-1.5deg;box-shadow:0 calc(9*var(--u)) calc(32*var(--u)) rgba(30,42,36,.22);animation:glide .5s var(--spring-glide) both}
.kp-card .pcard.fly{animation:fly .45s ease-in both}
.kp-card .bstrip{position:relative;width:calc(140*var(--u));rotate:1.5deg;animation:glide .5s var(--spring-glide) both}
.kp-card .bstrip.fly{animation:fly .45s ease-in both}
.lb-nav{position:absolute;top:auto;bottom:calc(30*var(--u));background:rgba(30,42,36,.55);z-index:2}
/* the two arrows sit together, centred under the print (the fan of prints covers the right corner of the phone, and the kid stickers a small screen's bottom edge) */
.lb-prev{left:calc(50% - max(calc(44*var(--u)),calc(44px*var(--fl,1))) - 6px)}
.lb-next{left:calc(50% + 6px)}
.lb-nav[hidden]{display:none}

/* the Undo toast: a white sticker label with ink text and a pink Undo (an ink bar would be a solid black band) */
/* it stops short of the right edge: the fan of prints lies over the phone's lower right corner and must never cover the Undo button */
.kp-toast{position:absolute;left:calc(16*var(--u));right:calc(100*var(--u));bottom:calc(16*var(--u));z-index:9;display:flex;align-items:center;gap:calc(10*var(--u));padding:5px 5px 5px calc(18*var(--u));border-radius:999px;background:#fff;color:var(--ink);font-weight:800;font-size:max(calc(14px*var(--ffl,1)),calc(15*var(--u)));box-shadow:var(--bx-sticker),0 calc(8*var(--u)) calc(18*var(--u)) rgba(30,42,36,.2);rotate:-.8deg;animation:btnin .4s var(--spring-pop) both}
.kp-toast[hidden]{display:none}
.kp-toast>.ic{width:calc(17*var(--u));height:calc(17*var(--u));min-width:15px;min-height:15px}
.kp-toast span{flex:1}
.kp-toast button{display:flex;align-items:center;gap:calc(6*var(--u));min-height:calc(44px*var(--fl,1));padding:0 calc(16px*var(--fl,1));border:0;border-radius:999px;background:var(--pink);color:var(--ink);font-weight:800;font-size:max(calc(14px*var(--ffl,1)),calc(16*var(--u)))}
.kp-toast button .ic{width:calc(16*var(--u));height:calc(16*var(--u));min-width:14px;min-height:14px}
/* the viewer's confirm card sits over the lower part of the print */
.kp-box .ask{bottom:calc(24*var(--u))}

/* ============ KEEP, the step (v3) ============
   The words (title, line, chips, Show me) and the pinned phone are laid out by css/tour.css; this is only the two satellites and the halftone. Everything is
   placed from the phone's size (--pw, --ph, --pt, set on .tour) and from the title's size, so it scales with a bigger display and never needs a fixed offset.
   Object: a hand of three finished prints (different characters, each with a sticker) LEFT of the phone under the title. No profile picker. No small stickers, sparkles or stars. Type sits straight on the teal: no pills, cards or white rings (the prints
   and stickers keep their white die-cut edge).
   z-order: both satellites are .sat-over (12), above the phone (10) and above the words (2); they never touch the words (see the sums below). */
.kp-stage .step-stage{
  --kk:var(--kcu,1px);                                                                /* 1px at 1440 wide, growing to 2.4px on a very big display (chrome.css) */
  --kfs:min(11vw,calc(var(--vh100) * .17),14rem,calc(var(--c1w) / 2.4));              /* the title's font size: the same sum as tour.css */
  --kth:calc(min(12vw,21rem) + 30px + max(0px,calc(1300px - 100vw)) * .14);           /* about half the height of the words on the right (line, chips, Show me; the line wraps under 1300px) */
  --tb:calc(var(--vh100) - var(--pt) - var(--ph));                                    /* the room under the phone inside the stage */
}
/* the stage is position:sticky, which makes it a stacking context (z-index auto = level 0 of the page): the pinned phone (10) and the crew section (later in
   the tree) would paint over everything in it, so the fan could neither lie over the phone's corner nor cross the seam. Keep's stage sits above the phone
   (11). It is transparent and has pointer-events:none, so the phone stays clickable; only the kid stickers take clicks. */
.tour #keep .step-stage{z-index:11}
/* the halftone: one soft patch, low left, behind the kid stickers and clear of the title. It lives in the stage so it stays put while the stage is pinned */
.kp-stage .stage-dots::before{right:auto;top:auto;left:-6%;bottom:-18%;width:min(60vw,calc(var(--kk) * 880));opacity:.5;
  -webkit-mask-image:radial-gradient(farthest-side at 40% 56%,#000 20%,transparent 88%);mask-image:radial-gradient(farthest-side at 40% 56%,#000 20%,transparent 88%)}

/* the hand of three prints: LEFT of the phone, under the title (v3.2). Its right edge sits a little way from the phone's left side and its foot is just above the
   phone's foot. --kfu is the fan's width: the room under the title allows (a short window shrinks it so it never touches the title). Each print is .42 of it wide
   (a print is 1 wide by 1.306 tall), spread so every print shows its picture and its sticker. */
.kp-stage .step-stage{
  --kfu:max(calc(var(--pw) * .5),min(calc(var(--pw) * .98),calc((var(--ph) * .5 - var(--kfs) * .72 - 24px) * 1.45)));
}
.kp-fan{--fu:var(--kfu);position:absolute;right:calc(100% + var(--gap) * .5 + 28px);bottom:calc(var(--ph) * .035);width:var(--fu);height:calc(var(--fu) * .78);pointer-events:none}
.kf{--fw:calc(var(--fu) * .42);position:absolute;width:var(--fw);rotate:var(--r,0deg);box-shadow:0 2px 3px rgba(30,42,36,.2),0 12px 26px rgba(30,42,36,.3);container-type:normal}
.kf1{left:0;bottom:4%;z-index:1}
.kf2{left:27%;bottom:22%;z-index:2}
.kf3{right:0;bottom:0;z-index:3}
.kf .stamp{height:30%}

/* ---- tablets: room at the phone's left side for the same hand of prints; phones: no room beside the phone, so it is left out ---- */
@media (max-width:999.98px) and (min-height:521px),(max-width:699.98px){
  .kp-fan{display:none}
}
@media (min-width:640px) and (max-width:999.98px) and (min-height:521px),(min-width:640px) and (max-width:699.98px){
  .kp-stage .step-stage{--kside:calc((100vw - var(--pw)) / 2);--kfu:min(var(--pw),calc(var(--kside) - 18px))}
  .kp-fan{display:block;right:calc(100% + 8px);bottom:calc(var(--ph) * .03)}
}

/* ============ My Prints: reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  .kp-box .pcard,.kp-card .pcard,.kp-card .bstrip,.kp-toast,.lb-tip,.kp.fresh .pcard,.kp.fresh .bstrip{animation-duration:.01s!important;animation-delay:0s!important}
  .starstk,.lb-star{transition-duration:.01s}
  .kp-spot{transition:none}
}