/* prototype-only layout + motion. Colours/type come from ../../tokens/tokens.css + ../../flow2/tokens-flow2.css + ../tokens-flow3.css; component looks from ../flow3.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);margin:0}
.side .sub{margin:6px 0 0;font:400 13px/1.5 var(--font-brand);color:#4a4f4f}
.steps{list-style:none;padding:0;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;margin:0}
.note{margin:14px 0 0;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;display:inline-block}
.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)}
.stage #screen{width:390px;height:844px}

.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,.fld input:focus-visible,.tg:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.hd [data-act]:focus-visible{outline-color:#fff}
.mbtn:active,.sbtn:active,.det:active{filter:brightness(.96)}
.mbtn{cursor:pointer}.mbtn:disabled{cursor:default}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.embed,html.embed body{background:transparent;overflow:hidden}
html.embed .proto{padding:0;min-height:100%}
html.embed .side{display:none}
@media (max-width:760px){.side{display:none}.proto{padding:0}}
@media (prefers-reduced-motion:reduce){.scr,.scr.active,.pd{transition:none}}

/* login: keyboard open/close is a fade, not a slide */
.scr[data-screen="welcome"],.scr[data-screen="number"]{transform:none}
/* the mock keyboard is only for pointer devices; touch devices get the real one */
@media (pointer:coarse){.kb{display:none}}

/* confirmation animation */
.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}
}