/* The sign-in screens (Isaac, 15 Oct 9:45 AM: "heading and text almost invisible, the logo a dark box on a white card").
   Only the desk's own color tokens (DeskCss), so light and dark both read: a navy band with the white logo on it, one
   centered card, a clear heading, one short line, the Google button, a small note. Contrast checked by walk_gate (axe). */
#gate{position:fixed;inset:0;z-index:100;overflow:auto;background:var(--bg);display:flex;align-items:flex-start;justify-content:center;padding:0 16px 40px}
#gate[hidden]{display:none}
#gate::before{content:"";position:fixed;left:0;right:0;top:0;height:250px;background:var(--header);z-index:-1}
#gate .gwrap{width:100%;max-width:420px;margin:64px auto 0;display:flex;flex-direction:column;align-items:center;gap:26px;position:relative}
#gate .gbrand img{display:block;width:210px;height:auto}
#gate .gcard{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(13,27,42,.18);padding:34px 28px 28px;width:100%;display:flex;flex-direction:column;gap:16px;text-align:center}
#gate h1{font-size:1.5em;line-height:1.25;font-weight:700;margin:0;color:var(--ink)}
#gate p{margin:0;color:var(--ink-2);line-height:1.55}
#gate .tiny{font-size:.84em;color:var(--ink-3)}
#gate #gbtn{display:flex;justify-content:center;min-height:44px;margin:6px 0 2px}
#gate .err{color:var(--bad);background:var(--bad-bg);padding:10px 12px;border-radius:10px;text-align:left}#gate .err:empty{display:none}
#gate form{display:flex;flex-direction:column;gap:12px}
#gate input[name=code]{font-size:1.5em;letter-spacing:.35em;text-align:center;padding:12px;width:100%;box-sizing:border-box;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink)}
#gate input[name=code]:focus{outline:2px solid var(--primary);outline-offset:1px}
#gate label.small{color:var(--ink-2);display:flex;gap:8px;align-items:center;justify-content:center;font-size:.92em}
#gate .btn{width:100%;justify-content:center}
#gate a{color:var(--primary)}
#gate code{background:var(--surface-2);color:var(--ink);padding:2px 6px;border-radius:6px;word-break:break-all;font-size:.95em}
#gate .gprog{display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 0}
#gate .gspin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--primary);animation:gspin .8s linear infinite;flex:none}
#gate .gbar{height:4px;border-radius:4px;background:var(--surface-2);overflow:hidden}#gate .gbar i{display:block;height:100%;width:40%;background:var(--primary);border-radius:4px;animation:gbar 1.4s ease-in-out infinite}
@keyframes gspin{to{transform:rotate(360deg)}}@keyframes gbar{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){#gate .gspin,#gate .gbar i{animation:none}}
#gate .qr{align-self:center;background:#fff;padding:12px;border-radius:10px;border:1px solid var(--line)}
#gate .codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-family:ui-monospace,Consolas,monospace;background:var(--surface-2);color:var(--ink);padding:14px;border-radius:10px}
@media (max-width:480px){#gate .gwrap{margin-top:40px}#gate .gcard{padding:28px 20px 22px}}
#signout{margin:6px 16px 14px;background:none;border:0;color:inherit;opacity:.7;font:inherit;font-size:.8em;cursor:pointer;text-decoration:underline}