/* The front door (/manage/, account/door.js): one card, light, the same on every company's way in. */
:root{color-scheme:light;--ink:#18161a;--mute:#6b6670;--line:#e6e2dc;--bg:#f7f5f2}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:16px/1.5 "Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
main{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.card{width:min(460px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 26px;display:flex;flex-direction:column;gap:14px;box-shadow:0 18px 50px -30px rgba(20,16,30,.35)}
.eb{margin:0;font:600 11.5px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
h1{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.01em}
p{margin:0;color:var(--mute);font-size:15px}
p strong{color:var(--ink)}
.host{font:500 14px/1.4 ui-monospace,"JetBrains Mono",monospace;color:var(--ink);background:var(--bg);border-radius:8px;padding:8px 10px;word-break:break-all}
.err{color:#a3261b}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--ink);animation:s .8s linear infinite;display:inline-block;vertical-align:-3px;margin-right:8px}
@keyframes s{to{transform:rotate(360deg)}}
.row{display:flex;gap:10px;flex-wrap:wrap}
a.btn,button.btn{appearance:none;border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:999px;padding:10px 16px;font:600 14px/1 inherit;text-decoration:none;cursor:pointer}
a.btn.ghost,button.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
button.btn:disabled{opacity:.6;cursor:default}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.list a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none}
.list a:hover,.list a:focus-visible{border-color:var(--ink)}
.list small{color:var(--mute);font-size:13px}
.aside{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.other summary{cursor:pointer;color:var(--ink);font-size:14px;font-weight:600}
.other[open]{display:flex;flex-direction:column;gap:10px}
.other input{flex:1 1 200px;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:999px;font:inherit;font-size:14px}
.ok{color:#1d6b3a}
.list.plain li{padding:2px 0;color:var(--ink)}
/* The team's sign-in (account/door.js signIn): whose pages, what signing in is for, and the ways in. */
.card.in{gap:16px;padding:32px 28px 22px}
.co{display:flex;align-items:center;gap:12px;padding-bottom:6px}
.co span{font-size:13px;color:var(--mute);padding-left:12px;border-left:1px solid var(--line)}
.mark{display:block;height:30px;width:auto;max-width:180px;object-fit:contain}
.mark.dark{background:#16181d;padding:5px 9px;border-radius:7px;height:38px}
.mark.name{height:auto;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.can{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:14.5px;color:var(--ink)}
.can li{display:flex;gap:10px;align-items:baseline}
.can li::before{content:"";flex:0 0 auto;width:13px;height:7px;border-left:2px solid #2F5BD8;border-bottom:2px solid #2F5BD8;transform:rotate(-45deg) translateY(-3px)}
.in .btn{font:600 15px/1.2 "Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
button.btn.google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px 16px;background:#fff;color:var(--ink);border-color:var(--line)}
button.btn.google:hover{border-color:var(--ink)}
.or{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.link{display:flex;flex-direction:column;gap:8px}
.link label{font-size:13px;font-weight:600;color:var(--ink)}
.link input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
.link input:focus{outline:2px solid #2F5BD8;outline-offset:1px;border-color:transparent}
.link .btn{width:100%;padding:13px 16px}
.msg{font-size:14px;color:var(--ink)}.msg.err{color:#a3261b}.msg.ok{color:#1d6b3a}
.small{font-size:13.5px}.small a,.back{color:var(--ink);font-weight:600}
.back{font-size:14px;text-decoration:none;align-self:flex-start}.back:hover{text-decoration:underline}
.by{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line);color:#8d8892;font-size:12px;text-decoration:none}
.by b{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:#6b6670}
.by:hover,.by:hover b{color:var(--ink)}
:focus-visible{outline:2px solid #2F5BD8;outline-offset:2px}