/* prototype-only layout + motion. Colours/type come from ../../tokens/tokens.css + ../tokens-flow2.css; component looks from ../flow2.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,.otp-box input:focus-visible,.fld input:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.mbtn:active,.opt:active,.kid:active{filter:brightness(.96)}
.mbtn{cursor:pointer}.mbtn:disabled{cursor:default}
@keyframes spin{to{transform:rotate(360deg)}}
.rf.spin img{animation:spin .6s linear}

/* switch-school sheet as an overlay on the home screen */
.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}
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,.sheet-layer .scrim,.sheet-layer .sheet,.sheet-layer{transition:none}.rf.spin img{animation:none}}