/* Phase 1 · account and security (H1 Face ID lock, H2 passkey sign-in, H4 proof log, B5 approvals), in the shell's style. */
.gate{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--paper)}
.gate .card{width:min(440px,100%);background:var(--card);border:1px solid var(--line);border-radius:28px;padding:30px 28px;display:grid;gap:18px;box-shadow:0 1px 2px var(--shadow-hair),0 24px 60px -30px var(--shadow)}
.gate .mark{font:800 44px var(--display);letter-spacing:-.04em;display:flex;align-items:baseline;gap:2px}
.gate .mark i{width:9px;height:9px;border-radius:50%;background:var(--acc);display:inline-block}
.gate h2{font:800 28px/1.1 var(--display);letter-spacing:-.03em}
.gate h2 em{font:italic 400 1em var(--serif)}
.gate p{margin:0;color:var(--ink2);font-size:15px}
.gate .fid{display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:16px 20px;background:var(--ink);color:var(--paper);font:600 16px var(--body)}
.gate .fid svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.gate .alt{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13.5px}
.gate .alt span{color:var(--muted)}
.gate .alt b{font-weight:500;text-decoration:underline;text-underline-offset:3px}
.gate .rule{font-size:12.5px}
.facts{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.facts div{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink2)}
.facts div::before{content:"✓";color:var(--acc-deep);font-weight:700}
:root[data-theme="dark"] .facts div::before{color:var(--acc)}
/* locked: the app behind, blurred */
.locked-app{position:relative}
.locked-app > .wrap{filter:blur(14px);opacity:.55;pointer-events:none}
.lockover{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--paper) 35%,transparent)}
.lockover .card{width:min(380px,100%);text-align:center;justify-items:center}
.lockover .lk{width:64px;height:64px;border-radius:20px;background:var(--ink);display:grid;place-items:center}
.lockover .lk svg{width:30px;height:30px;stroke:var(--acc);fill:none;stroke-width:2;stroke-linecap:round}
/* account */
.acc{max-width:1100px;margin:0 auto;padding:calc(20px + env(safe-area-inset-top,0px)) 16px 100px;display:grid;gap:18px}
.acc .top{display:flex;align-items:center;gap:14px}
.acc .top .avatar{width:52px;height:52px;font-size:20px}
.acc .top h1{font:800 32px var(--display);letter-spacing:-.03em}
.acc .top span{color:var(--muted);font-size:14px}
.acc .back{border:0;background:none;font-size:14px;font-weight:500;color:var(--ink);padding:8px 0}
.agrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:18px;align-items:start}
.box{border:1px solid var(--line);border-radius:24px;padding:20px;background:var(--card);display:grid;gap:12px}
.box h3{font:700 18px var(--display)}
.dev{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.dev:last-of-type{border-bottom:0}
.dev .ic{width:38px;height:38px;border-radius:12px;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;font:600 11px var(--mono)}
.dev div{flex:1;display:grid}
.dev b{font-weight:500}
.dev span{font-size:12.5px;color:var(--muted)}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14.5px}
.seg2{display:inline-flex;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px}
.seg2 span{border-radius:999px;padding:6px 11px;font-size:13px;font-weight:500}
.seg2 .on{background:var(--ink);color:var(--paper)}
.approve{border:1px solid color-mix(in srgb,var(--acc) 50%,var(--line));border-radius:20px;padding:14px;display:grid;gap:8px}
.approve h4{margin:0;font:700 16px var(--display)}
.approve p{margin:0;font-size:13.5px;color:var(--ink2)}
.log{display:grid}
.log .ev{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.log .tm{font:400 12px var(--mono);color:var(--muted)}
.log b{font-weight:500}
.log .ba{font:400 11.5px var(--mono);color:var(--muted);display:block;margin-top:2px}
.log .who{font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:2px 7px;background:color-mix(in srgb,var(--acc) 20%,transparent);margin-left:6px}
.log .no{background:var(--warn);color:var(--warn-ink)}
@media (max-width:760px){
  .agrid{grid-template-columns:minmax(0,1fr)}
  .gate .card{padding:26px 22px}
  .acc .top h1{font-size:26px}
}
.acc .back{justify-self:start}
.log .ev > div{display:block;min-width:0}
.log .who{display:inline-block;vertical-align:2px}

/* in the app: the gate and the lock cover everything; Your account replaces the panels */
.gate.cover{position:fixed;inset:0;z-index:70;overflow:auto;padding-top:calc(24px + env(safe-area-inset-top,0px))}
.lockover{z-index:70}
body.is-locked .wrap,body.is-locked .tabbar,body.is-locked #tour,body.is-locked .chats{filter:blur(14px);opacity:.55;pointer-events:none}
body.on-account .wrap > header,body.on-account .grid,body.on-account #tour,body.on-account .chats{display:none!important}
.gate .err{color:var(--danger);font-size:13.5px;margin:0}
.gate .fid:disabled{opacity:.6}
.avatar{border:0;cursor:pointer}
.acc .row2{display:flex;gap:8px;flex-wrap:wrap}
.approve .when{font:400 11px var(--mono);color:var(--muted)}
.sheet .approve{border:0;padding:0}
.seg2 button{border:0;background:none;border-radius:999px;padding:6px 11px;font:500 13px var(--body);color:inherit}
.seg2 button.on{background:var(--ink);color:var(--paper)}
body.is-locked .toasts,body:has(#gate) .toasts{display:none}
.seg2 button{white-space:nowrap}
.setrow{flex-wrap:wrap}
.setrow > span:first-child{flex:1 1 auto}
/* signed in: the demo is in Your account (Explore Jarvis), not at the bottom of every screen */
body.signed-in:not(.touring) #tour{display:none}
body.signed-in:not(.touring) .wrap{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
@media (min-width:761px){body.signed-in:not(.touring) .wrap{padding-bottom:40px}}