/* Sign-in gate and Settings account block. Uses the page's own tokens so it
   follows light and dark mode with the rest of Pass. */
#passGate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;padding-top:calc(16px + env(safe-area-inset-top,0px));background:var(--bg);overflow:auto}
#passGate[hidden]{display:none}
#passGate .pg-card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px}
#passGate .pg-brand{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
#passGate .pg-brand b{font-family:var(--f-display);font-size:2rem;color:var(--accent);letter-spacing:-.02em}
#passGate .pg-brand span{color:var(--muted);font-size:.95rem}
#passGate h1{font-family:var(--f-display);font-size:1.5rem;margin:0;color:var(--ink)}
#passGate form,#passGate .pg-list{display:flex;flex-direction:column;gap:10px}
#passGate label{font-size:.85rem;font-weight:600;color:var(--muted);margin-top:4px}
#passGate input{font:inherit;font-size:16px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink)}
#passGate input:focus{outline:2px solid var(--accent);outline-offset:1px}
#passGate .pg-btn{font:inherit;font-weight:600;min-height:48px;padding:12px 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
#passGate .pg-btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);margin-top:6px}
#passGate .pg-note{color:var(--muted);margin:0;line-height:1.5}
#passGate .pg-msg{min-height:1.4em;margin:0;color:var(--muted);font-size:.9rem}
.pg-account{border-top:1px solid var(--line);padding-top:14px}
.pg-account h3{margin:0 0 4px}