/* prototype-only layout + motion. Colours/type come from tokens.css; component looks from ../screens/components.css */
html,body{height:100%;background:#e9eeee}
body{display:block;color:var(--c-text);font-family:var(--font-brand)}
.proto{min-height:100%;display:flex;align-items:center;justify-content:center;gap:56px;padding:16px}
.side{width:260px;flex:none}
.side h1{font:600 22px/1.3 var(--font-brand);color:var(--c-primary)}
.side .sub{margin-top:6px;font:400 13px/1.5 var(--font-brand);color:#4a4f4f}
.steps{list-style:none;margin:20px 0 14px;display:flex;flex-direction:column;gap:6px;counter-reset:s}
.steps li{counter-increment:s}
.steps button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;font:500 14px/1.4 var(--font-brand);color:#2b2f2f;border:1px solid transparent}
.steps button::before{content:counter(s);width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid #cfd8d8;display:grid;place-items:center;font:600 12px var(--font-brand);flex:none}
.steps button:hover{background:#fff}
.steps button[aria-current="step"]{background:#fff;border-color:var(--c-primary);color:var(--c-primary)}
.steps button[aria-current="step"]::before{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.steps button:focus-visible,.restart:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.hint{font:400 13px/1.5 var(--font-brand);color:#4a4f4f}
.note{margin-top:14px;font:400 12px/1.5 var(--font-brand);color:#6b7272}
.restart{all:unset;box-sizing:border-box;margin-top:14px;cursor:pointer;padding:8px 16px;border-radius:100px;border:1px solid var(--c-primary);color:var(--c-primary);font:500 13px var(--font-brand);background:#fff}
.restart:hover{background:var(--c-tint)}

.stage-wrap{flex:none;display:flex;align-items:center;justify-content:center}
.stage{flex:none;width:390px;height:844px;transform-origin:center center;border-radius:36px;overflow:hidden;box-shadow:0 0 0 10px #16191a,0 24px 60px rgba(0,0,0,.28)}
#app.screen{width:390px;height:844px;overflow:hidden;overflow:clip}

/* screens */
.scr{position:absolute;inset:0;background:var(--c-page);opacity:0;visibility:hidden;transform:translateX(18px);transition:opacity .2s ease,transform .24s ease,visibility 0s .24s}
.scr.active{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .24s ease}
.scr.back{transform:translateX(-18px)}
.scr.active.back{transform:none}
[data-act]{cursor:pointer;-webkit-tap-highlight-color:transparent}
[data-act]:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.ttl [data-act]:focus-visible,.cam [data-act]:focus-visible{outline-color:#fff}
.sw[data-act]{cursor:pointer}
.btn:active,.chip:active{filter:brightness(.94)}
.btn.pulse{animation:pulse .32s ease}
@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(.96)}100%{transform:scale(1)}}

/* scrolling lists (hidden scrollbar, shadow room) */
.scroll{position:absolute;left:0;width:390px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
.scroll::-webkit-scrollbar{display:none}
.scroll[hidden]{display:none}
.stack{display:flex;flex-direction:column;gap:12px;padding:0 16px 24px}
.stack .card{width:358.814px}
.chips{z-index:2}

/* photos */
.pcount{left:16px}
.pcards{left:16px}
.pcards{gap:12px}
.pcard.gone,.pcard.later{display:none}
.empty{position:absolute;left:16px;top:147px;width:358px;color:#4a4f4f}
.empty[hidden]{display:none}
.btn.disabled{opacity:.45;pointer-events:none}

/* camera */
.camflash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.camflash.on{animation:flash .3s ease-out}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}

/* bottom sheet */
.sheet-layer{position:absolute;inset:0;pointer-events:none;z-index:20;visibility:hidden;transition:visibility 0s .26s}
.sheet-layer .scrim{opacity:0;transition:opacity .22s ease}
.sheet-layer .sheet{transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.sheet-layer.open{pointer-events:auto;visibility:visible;transition:none}
.sheet-layer.open .scrim{opacity:1}
.sheet-layer.open .sheet{transform:none}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){.side{display:none}.proto{padding:0}}
@media (prefers-reduced-motion:reduce){.scr,.scr.active,.sheet-layer .scrim,.sheet-layer .sheet,.sheet-layer{transition:none}.btn.pulse,.camflash.on{animation:none}}

/* embed mode (used by the portfolio's slide 9): phone only, transparent background */
html.embed,html.embed body{background:transparent;overflow:hidden}
html.embed .proto{padding:0;min-height:100%}
html.embed .side{display:none}

/* confirmation screen (built only from tokens.css: colours, radii, type styles) */
.done{position:absolute;left:0;top:240px;width:390px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;box-sizing:border-box}
.done :is(h2,p){margin:0}
.ok{position:relative;width:136px;height:136px;display:grid;place-items:center}
.ok .halo{position:absolute;inset:0;border-radius:50%;background:var(--c-tint);opacity:0;transform:scale(.6)}
.ok svg{position:relative;width:96px;height:96px;display:block;overflow:visible}
.ok .disc{fill:var(--c-primary);transform-box:fill-box;transform-origin:center;transform:scale(0)}
.ok .tick{fill:none;stroke:var(--c-on-primary);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.done-title{margin-top:28px;color:var(--c-text)}
.done-sub{margin-top:4px;color:var(--c-text-muted)}
.done-cd{margin-top:28px;color:var(--c-text)}
.done-cd .num{color:var(--c-primary);display:inline-block;min-width:1ch}
.cd{width:200px;height:4px;margin-top:14px;border-radius:var(--r-pill);background:var(--c-tint);overflow:hidden}
.cd i{display:block;height:100%;background:var(--c-primary);border-radius:inherit;transform-origin:left center}
.done-title,.done-sub,.done-cd,.cd{opacity:0}
.scr.play .halo{animation:okHalo .6s .05s ease-out forwards}
.scr.play .disc{animation:okPop .45s cubic-bezier(.2,.9,.3,1.25) forwards}
.scr.play .tick{animation:okDraw .4s .38s ease-out forwards}
.scr.play :is(.done-title,.done-sub){animation:okRise .4s .6s ease-out forwards}
.scr.play :is(.done-cd,.cd){animation:okRise .4s .8s ease-out forwards}
.scr.play .cd i{animation:okDrain var(--cd,3s) .9s linear forwards}
@keyframes okHalo{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
@keyframes okPop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes okDraw{to{stroke-dashoffset:0}}
@keyframes okRise{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@keyframes okDrain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){
  .scr.play .halo,.scr.play .disc,.scr.play .tick,.scr.play :is(.done-title,.done-sub,.done-cd,.cd),.scr.play .cd i{animation:none}
  .scr.play .halo{opacity:1;transform:none}.scr.play .disc{transform:none}.scr.play .tick{stroke-dashoffset:0}
  .scr.play :is(.done-title,.done-sub,.done-cd,.cd){opacity:1}
}