/* The big iPhone on iPip's home page (functions/_homespots.js stageMarkup, public/phone.js), option A of
   mockups/v4/phone-play, about 280px wide so the names under the icons read. In iPip's own style: beige plastic, ink lines,
   MacPip's colours. No phone maker's logo, wallpaper or status bar; the island is iPip's capsule. */
.stage2{margin-top:var(--cl-s5)}
.pwrap{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.bigphone{position:relative;width:280px;max-width:100%;padding:12px 11px 34px;border:1.5px solid var(--ink);border-radius:46px;background:linear-gradient(90deg,var(--plastic),var(--box));box-shadow:var(--bevel),5px 6px 0 var(--ink)}
.pscr{position:relative;aspect-ratio:9/16;border:1.5px solid var(--ink);border-radius:34px;overflow:hidden;isolation:isolate;background:var(--cream);contain:layout paint;-webkit-user-select:none;user-select:none}
.pisl{position:absolute;z-index:9;top:9px;left:50%;width:30%;height:20px;margin-left:-15%;border-radius:12px;background:#0b0a08;pointer-events:none}
/* the home screen, and its still blurred copy that fades in while an app is open */
.phome{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;gap:11px;padding:40px 11px 9px;transform-origin:50% 50%}
.phome.pblur{z-index:2;opacity:0;filter:blur(8px) saturate(1.2);pointer-events:none}
.pwall{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(80% 55% at 18% 8%,#fffaf0,transparent 70%),var(--cream)}
.pbands{position:absolute;left:-30%;top:60%;width:170%;height:24%;display:flex;flex-direction:column;transform:rotate(-31deg)}
.pbands i{flex:1;opacity:.8}
.pbands i:nth-child(1){background:var(--g)}.pbands i:nth-child(2){background:var(--y)}.pbands i:nth-child(3){background:var(--o)}.pbands i:nth-child(4){background:var(--r)}.pbands i:nth-child(5){background:var(--v)}.pbands i:nth-child(6){background:var(--b)}
:root[data-theme=crt] .pbands{display:none}
/* the widget spot: a 4x2 widget at the top of the home screen */
.pwdg{flex:none;display:flex;flex-direction:column;gap:2px;height:94px;padding:9px 11px;border:1.5px solid var(--ink);border-radius:20px;background:var(--paper);box-shadow:2px 3px 0 var(--ink);color:var(--ink);text-decoration:none;overflow:hidden;-webkit-tap-highlight-color:transparent}
.pwhd{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.pwhd img{width:30px;height:30px;border-radius:8px;border:1px solid var(--ink);flex:none}
.pwk{font:7.5px/1.3 var(--pixel);letter-spacing:.08em;text-transform:uppercase;padding:2px 4px;border-radius:3px;background:#e9cf6d;color:#1d1b17}
.pwk small{display:block;font:8.5px var(--sans);letter-spacing:0;text-transform:none;color:#5f5a4e}
.pwdg b{font:500 16px/1.1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pwdg>small{font-size:10px;line-height:1.3;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pwfree{border-style:dashed;background:var(--gold-bg);box-shadow:none}
.pwfree .pwk{background:none;padding:0}
.pwplus{display:grid;place-items:center;width:30px;height:30px;flex:none;border:1.5px dashed var(--mute);border-radius:8px;font-size:18px;color:var(--mute)}
/* the apps: Featured seats with a small gold ring, then today's free launches, and the dock */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 4px}
.pic{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.pii{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:11px;border:1px solid var(--ink);background:var(--paper);overflow:hidden;transform-origin:50% 50%}
.pii img{display:block;width:100%;height:100%;object-fit:cover}
.pfeat .pii{box-shadow:0 0 0 1.5px var(--paper),0 0 0 3px var(--gold)}
.pic.add .pii{border-style:dashed;background:var(--gold-bg);color:var(--mute);font:300 21px/1 var(--sans)}
.pnm{max-width:100%;font:9px/1.15 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pic.add .pnm{color:var(--mute)}
.pic:focus-visible .pii,.pwdg:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.pdock{flex:none;margin-top:auto;display:flex;justify-content:space-evenly;padding:7px 4px;border:1.5px solid var(--ink);border-radius:22px;background:color-mix(in srgb,var(--paper) 80%,transparent)}
.pdock .pnm{display:none}
/* the layers phone.js adds: the dim, the open app, the icon that flies, the fingertip */
.pdim{position:absolute;inset:0;z-index:3;background:#1d1b17;opacity:0;pointer-events:none}
.player{position:absolute;inset:0;z-index:5;pointer-events:none}
.pwin{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:32px;overflow:hidden;transform-origin:0 0;background:#111;box-shadow:0 12px 34px rgba(29,27,23,.28);pointer-events:auto;touch-action:none;cursor:pointer}
.pwin.pempty{background:var(--paper)}
.pstrip{position:absolute;inset:0}
.psh{position:absolute;left:0;width:100%;height:100%;background:#111}
.psh img{position:absolute;left:0;top:30px;width:100%;height:calc(100% - 30px);object-fit:cover;object-position:50% 0;display:block}
.psh.pshone{top:0;display:grid;place-items:center;background:color-mix(in srgb,var(--y) 14%,var(--paper))}
.psh .picon{position:static;width:76px;height:76px;border-radius:18px;border:1px solid var(--ink)}
.pcap{position:absolute;left:8px;right:8px;bottom:18px;display:flex;align-items:center;gap:8px;padding:7px 8px;background:rgba(250,246,236,.96);border:1.5px solid var(--ink);border-radius:14px;box-shadow:2px 2px 0 var(--ink);color:#1d1b17}
.pcap>img{flex:none;width:28px;height:28px;border-radius:7px;border:1px solid var(--ink)}
.pcap .tx{flex:1;min-width:0}
.pcap b{font:500 14px/1.1 var(--serif)}
.ptag{display:inline-flex;align-items:center;height:13px;padding:0 3px;margin-inline-start:4px;vertical-align:2px;border-radius:3px;font:6.5px/1 var(--pixel);letter-spacing:.08em;text-transform:uppercase;border:1px solid #e9cf6d;background:#fff6d6;color:#1d1b17}
.ptag.pday{border-color:#cfc6b1;background:#faf6ec}
.pcap small{display:block;margin-top:2px;font:9.5px/1.2 var(--sans);color:#5f5a4e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pgo{flex:none;display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:7px;background:#1d1b17;color:#faf6ec;font:10.5px var(--sans);text-decoration:none;white-space:nowrap;position:relative;overflow:hidden}
.pgo::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--stripes)}
.pemp{position:absolute;inset:44px 14px 50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;border:1.5px dashed var(--gold-line);border-radius:22px;background:var(--gold-bg);color:var(--ink)}
.pemp.pwcard{border-style:solid;border-color:var(--ink);background:var(--paper);box-shadow:2px 3px 0 var(--ink)}
.pemp img{width:66px;height:66px;border-radius:16px;border:1px solid var(--ink)}
.pemp b{font:500 22px/1.05 var(--serif);padding:0 10px}
.pemp small{font-size:11px;color:var(--mute);padding:0 14px}
.pemp .pgo{height:30px;padding:0 12px;margin-top:6px;font-size:11.5px}
.pplus{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;border:1.5px dashed var(--mute);font-size:26px;color:var(--mute)}
.phb{all:unset;position:absolute;left:50%;bottom:6px;width:36%;height:12px;margin-left:-18%;cursor:pointer;display:flex;align-items:center}
.phb::before{content:"";width:100%;height:4px;border-radius:3px;background:#fff;opacity:.85}
.pwin.pempty .phb::before{background:var(--ink);opacity:.6}
.pfly{position:absolute;left:0;top:0;z-index:6;width:44px;height:44px;border-radius:11px;overflow:hidden;opacity:0;transform-origin:0 0;border:1px solid var(--ink);background:var(--paper);pointer-events:none}
.pfly img{display:block;width:100%;height:100%;object-fit:cover}
.pfly.ph{display:grid;place-items:center;border-style:dashed;background:var(--gold-bg);font:300 21px/1 var(--sans);color:var(--mute)}
.pfly.pflyw{border-radius:20px;border-width:1.5px;padding:9px 11px;display:flex;flex-direction:column;gap:2px;font-size:10px}
.ptouch,.pring{position:absolute;left:0;top:0;z-index:10;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;opacity:0;pointer-events:none}
.ptouch{background:rgba(255,255,255,.38);border:1.5px solid rgba(29,27,23,.62);box-shadow:0 0 0 2px rgba(255,255,255,.55),0 2px 6px rgba(0,0,0,.18)}
.pring{border:1.5px solid rgba(29,27,23,.5)}
/* the controls under the phone: whose turn it is, pause and next */
.pctl{display:flex;align-items:center;gap:6px;width:280px;max-width:100%;padding-inline:4px}
.pctl[hidden]{display:none}
.pdots{display:flex;gap:4px;margin-inline-end:auto}
.pdots i{width:6px;height:6px;border-radius:50%;border:1px solid var(--ink)}
.pdots i.on{background:var(--ink)}
.pctl button{width:26px;height:22px;padding:0;border:1px solid var(--ink);border-radius:5px;background:var(--paper);font-size:11px;line-height:1;color:var(--ink);cursor:pointer}
.pctl button:focus-visible{outline:2px solid var(--b);outline-offset:2px}
/* a finger-sized target around each small control, unseen (speed and bugs pass, 15 Nov 2026: 26x22 was too small to hit) */
.pctl button{position:relative}.pctl button::after{content:"";position:absolute;inset:-11px -3px}
.stage2>.cl-label{margin:var(--cl-s3) 0 0}
.stage2>.cl-label span{text-transform:none;letter-spacing:0;font:12px var(--sans);margin-inline-start:6px}
@media (max-width:380px){.bigphone,.pctl{width:262px}.phome{gap:9px;padding:38px 9px 8px}.pwdg{height:86px}.pii{width:40px;height:40px;border-radius:10px}}
@media (prefers-reduced-motion:reduce){.phome.pblur{display:none}}