/* G1 Sign-in gate. Sits in FRONT of the app, so it is natively responsive (no 1600x872 stage, no fit scaling): a sign-in link is opened on a phone. Tokens from tokens.css only. No person image. */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--font-ui);-webkit-font-smoothing:antialiased;color:var(--t1)}
body{background:#111;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
button,input{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;outline:none;text-align:inherit}
:is(button,a,input):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.room{position:fixed;inset:0;z-index:0;background:var(--room) center/cover no-repeat}
[data-theme=light] .room{--room:url(bg-light.jpg)}
[data-theme=dark] .room{--room:url(bg-dark.jpg)}
.gate{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px 72px}
.card{width:min(440px,100%);border-radius:var(--r-panel);padding:36px 32px 30px;position:relative;overflow:hidden;
 border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
 box-shadow:0 26px 40px rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.35)}
[data-theme=dark] .card{background:linear-gradient(180deg,rgba(60,70,78,.78),rgba(22,26,30,.86) 60%)}
[data-theme=light] .card{background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(226,228,232,.86) 60%);border-color:rgba(255,255,255,.9)}
.card::before{content:"";position:absolute;left:28px;right:28px;top:0;height:2px;border-radius:2px;background:var(--glow_edge);box-shadow:0 0 10px var(--glow_edge)}
.card>*{position:relative}
.wordmark{display:block;font-family:var(--font-wordmark);font-weight:900;font-size:38px;letter-spacing:.04em;line-height:1;margin:0 0 22px;
 background:linear-gradient(180deg,#ffd58e,#e4a24a 70%,#d08a2f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 var(--halo))}
h1[tabindex]:focus{outline:none}
h1{font-size:26px;font-weight:500;line-height:1.2;margin:0 0 10px;letter-spacing:.005em;text-wrap:balance}
p{margin:0 0 14px;font-size:15.5px;line-height:1.5;color:var(--t2)}
p.lead{color:var(--t1)}
label{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tgold);margin:18px 0 8px}
.field{display:block;width:100%;height:50px;padding:0 16px;border-radius:var(--r-button);font-size:17px;color:var(--t1);
 border:1px solid var(--grule);background:rgba(0,0,0,.22)}
[data-theme=light] .field{background:rgba(255,255,255,.75)}
.field::placeholder{color:var(--tidle)}
.field:focus{border-color:var(--glow_edge);box-shadow:0 0 0 3px rgba(74,142,145,.25)}
.actions{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;height:48px;padding:0 22px;border-radius:24px;font-size:17px;font-weight:500;cursor:pointer}
.btn-cta{border:2px solid var(--glow_edge);color:var(--tactiverail);background:rgba(95,230,255,.10);box-shadow:0 0 18px rgba(95,230,255,.35),inset 0 0 10px rgba(95,230,255,.12)}
[data-theme=dark] .btn-cta{color:var(--tglow);border-color:#3fd0e0}
[data-theme=light] .btn-cta{background:rgba(31,95,103,.12);box-shadow:0 0 14px rgba(31,95,103,.25)}
.btn-cta[aria-disabled=true]{opacity:.55;cursor:default;box-shadow:none}
.btn-ghost{border:1px solid var(--grule);color:var(--t1);background:rgba(255,255,255,.04)}
[data-theme=light] .btn-ghost{background:rgba(255,255,255,.5)}
.link{align-self:center;font-size:15px;color:var(--tglow);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 4px}
[data-theme=light] .link{color:var(--tglow)}
.hint{margin:16px 0 0;font-size:13.5px;line-height:1.45;color:var(--t2)}
.notice{margin:18px 0 0;padding:12px 14px;border-radius:var(--r-card);font-size:14px;line-height:1.45;
 background:var(--gold_fill);border:1px solid var(--gold_edge);color:var(--goldheading)}
[data-theme=light] .notice{color:var(--ton_gold)}
.notice b{font-weight:500}
.alert{display:none;margin:14px 0 0;padding:11px 14px;border-radius:var(--r-card);font-size:14.5px;line-height:1.45;color:var(--tfail);border:1px solid var(--tfail);background:none}
[data-theme=light] .alert{border-color:var(--failfill);background:rgba(181,69,42,.10)}
.status{min-height:0;margin:12px 0 0;text-align:center;font-size:14px;color:var(--t2)}
.status:empty{display:none}
.glyph{display:block;width:44px;height:44px;margin:0 0 16px;stroke:var(--tglow);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
[data-theme=light] .glyph{stroke:var(--glow_fill)}
.glyph.bad{stroke:var(--tfail)}

/* states: every view is in the markup; data-state on .gate chooses one */
.view{display:none}
.gate[data-state="0"] .view-signin,.gate[data-state="6"] .view-signin{display:block}
.gate[data-state="1"] .view-sent{display:block}
.gate[data-state="2"] .view-confirm{display:block}
.gate[data-state="3"] .view-noaccess{display:block}
.gate[data-state="4"] .view-expired{display:block}
.gate[data-state="5"] .view-signedout{display:block}
.gate[data-state="6"] .alert{display:block}

/* review chrome (kit only) */
.state-strip{display:none;position:fixed;left:0;right:0;bottom:0;z-index:5;gap:8px;justify-content:center;padding:8px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow-x:auto}
.strip-on .state-strip{display:flex}
.state-strip button{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;flex:none}
.state-strip .thumb{display:block;width:100px;height:56px;border-radius:6px;background:#222 center/cover;border:2px solid transparent}
.state-strip button[aria-current=true] .thumb{border-color:var(--glow_edge);box-shadow:0 0 10px var(--glow_edge)}
.state-strip .cap{font-size:11px;color:#ddd}
.review-bar{position:fixed;right:10px;top:10px;z-index:6;display:flex;gap:6px}
.review-bar button{padding:5px 10px;border-radius:8px;background:rgba(0,0,0,.5);color:#eee;font-size:12px;border:1px solid rgba(255,255,255,.25);cursor:pointer}
@media (max-width:420px){.card{padding:30px 22px 26px}h1{font-size:23px}.wordmark{font-size:34px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- THE WORDMARK: one component, one asset, one place (Duncan, 2026-10-04). brand/storii-wordmark.png with its fluorescent glow. ---------- */
.brand{position:absolute;left:60px;top:16px;width:150px;height:55px;display:block;z-index:3;text-decoration:none}
.brand img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 1.5px rgba(255,236,190,.95)) drop-shadow(0 0 6px rgba(255,214,140,.75)) drop-shadow(0 0 16px rgba(246,193,115,.5)) drop-shadow(0 0 34px rgba(246,193,115,.3))}
[data-theme=light] .brand{filter:drop-shadow(0 0 1px rgba(255,248,225,.9)) drop-shadow(0 0 6px rgba(246,193,115,.55)) drop-shadow(0 0 16px rgba(246,193,115,.3))}[data-theme=light] .brand img{visibility:hidden}[data-theme=light] .brand::after{content:"";position:absolute;inset:0;background:var(--gold_edge);-webkit-mask:url(brand/storii-wordmark.png) center/contain no-repeat;mask:url(brand/storii-wordmark.png) center/contain no-repeat}/* light: the cream glyphs washed out on the light sheet (storii, 2026-10-05); the same PNG masks the theme gold, one asset, one place */
.brand:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:6px}
.card .brand{position:relative;left:auto;top:auto;width:150px;height:55px;margin:0 0 18px}
.g1foot{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:center;gap:12px;font-size:13px;color:var(--t2);width:max-content;max-width:calc(100vw - 32px);padding:6px 14px;border-radius:999px;background:rgba(10,14,18,.55)}[data-theme=light] .g1foot{background:rgba(243,244,243,.88)}/* the room backdrop darkens at the foot; the links sit on a plate of their own so they read in both themes (contrast probe, 2026-10-05) */.g1foot a{color:var(--t2);text-decoration:none}.g1foot a:hover{color:var(--t1);text-decoration:underline}.g1foot .sep{width:1px;height:12px;background:var(--grule)}