/* tr-doors.css — the doors: splash, sign-in, sign-up, reset, confirm, districts,
   pitch, privacy. Links AFTER tr-system.css, which owns the tokens and the
   self-hosted faces. Nothing feature-specific, nothing from a third party. */
/* The doors' text face, on <body> and not only on .door-page: a door whose
   markup starts inside a wrapper leaves body itself on the UA serif, which is
   what a signed-out person's browser falls back to for anything the wrapper
   does not contain. Every door that wants its own body (the splash's navy,
   the marketing pages' own stack) sets it in its own <style>, which is later. */
body{font-family:var(--tr-font-body);background:var(--tr-bg)}
.door-page{min-height:100vh;display:grid;place-items:center;padding:32px 20px;background:var(--tr-bg);font-family:var(--tr-font-body);color:var(--tr-text2);-webkit-font-smoothing:antialiased}
.door{width:min(440px,100%);background:var(--tr-surface);border:1px solid var(--tr-border);border-radius:var(--tr-r-card);box-shadow:var(--tr-shadow-elev);padding:36px 32px;box-sizing:border-box}
.door.wide{width:min(560px,100%)}
.door-brand{text-align:center;margin-bottom:26px}
.door-brand .ss-mark{display:block;margin:0 auto 12px}
.door-word{font-family:var(--tr-font-display);font-weight:500;font-size:1.6rem;color:var(--tr-navy);letter-spacing:-.01em;line-height:1.1}
.door-word span{color:var(--tr-teal)}
.door-eyebrow{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tr-text2);margin-top:6px}
.door-rule{width:48px;height:3px;border-radius:2px;background:var(--tr-teal);margin:16px auto 0}
.door h1,.door h2{font-family:var(--tr-font-display);font-weight:500;color:var(--tr-ink);line-height:1.2;margin:0 0 8px}
.door h2{font-size:1.5rem}
.door p{font-size:.92rem;line-height:1.6;color:var(--tr-text2);margin:0 0 14px}
.door .field{margin-bottom:16px}
.door label{display:block;font-size:.8rem;font-weight:600;color:var(--tr-ink);margin-bottom:6px}
.door input{width:100%;min-height:44px;padding:10px 14px;border:1.5px solid var(--tr-border);border-radius:var(--tr-r-ctl);font:400 .95rem var(--tr-font-body);color:var(--tr-ink);background:var(--tr-surface);box-sizing:border-box;outline:none;transition:border-color .15s,box-shadow .15s}
.door input:focus{border-color:var(--tr-teal);box-shadow:var(--tr-focus)}
.door input:focus-visible{outline:2px solid var(--tr-teal);outline-offset:2px}
.door input::placeholder{color:var(--tr-muted)}
.door .password-wrap{position:relative}
.door .password-wrap input{padding-right:44px}
.door .toggle-pw{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;background:none;border:0;border-radius:var(--tr-r-ctl);color:var(--tr-muted);cursor:pointer}
.door .toggle-pw:hover,.door .toggle-pw:focus-visible{color:var(--tr-teal-ink);background:var(--tr-teal-soft)}
.door .toggle-pw:focus-visible{outline:2px solid var(--tr-teal);outline-offset:2px}
.door .toggle-pw .tr-ic{width:18px;height:18px}
.door .btn-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;padding:11px 18px;background:var(--tr-teal);color:var(--tr-surface);border:0;border-radius:var(--tr-r-ctl);font:700 .92rem var(--tr-font-body);cursor:pointer;transition:background .15s,transform .1s}
.door .btn-submit:hover:not(:disabled){background:var(--tr-teal-h)}
.door .btn-submit:active:not(:disabled){transform:scale(.99)}
.door .btn-submit:disabled{opacity:.55;cursor:default}
.door .btn-submit:focus-visible{outline:2px solid var(--tr-teal);outline-offset:2px;box-shadow:var(--tr-focus)}
.door .btn-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:var(--tr-surface);border-radius:50%;animation:door-spin .7s linear infinite;display:none}
.door .btn-submit.loading .btn-spinner{display:block}
.door .btn-submit.loading .btn-text{opacity:.7}
@keyframes door-spin{to{transform:rotate(360deg)}}
.door .alert{display:none;padding:11px 14px;border-radius:var(--tr-r-ctl);font-size:.88rem;line-height:1.5;margin-bottom:16px}
.door .alert.show{display:block}
.door .alert.error{background:var(--tr-danger-soft);color:var(--tr-danger);border:1px solid var(--tr-danger)}
.door .alert.success{background:var(--tr-teal-soft);color:var(--tr-teal-ink);border:1px solid var(--tr-teal)}
.door .created-banner{background:var(--tr-teal-soft);color:var(--tr-teal-ink);border:1px solid var(--tr-teal);border-radius:var(--tr-r-ctl);padding:11px 14px;font-size:.88rem;margin-bottom:16px}
.door .forgot-link,.door a{color:var(--tr-teal);text-decoration:none}
.door a:hover{text-decoration:underline}
.door a:focus-visible{outline:2px solid var(--tr-teal);outline-offset:2px}
.door .divider{border:0;border-top:1px solid var(--tr-border);margin:20px 0}
.door .signup-link,.door-foot{font-size:.8rem;line-height:1.6;color:var(--tr-text2)}
.door-foot{margin-top:22px;text-align:center}
.door .form-header{margin-bottom:22px}
.door-status-icon{width:56px;height:56px;border-radius:50%;background:var(--tr-teal-soft);color:var(--tr-teal-ink);display:grid;place-items:center;margin:0 auto 16px}
.door-status-icon .tr-ic{width:26px;height:26px}
.door-status-icon.warn{background:var(--tr-amber-soft);color:var(--tr-ink)}
.door .state{display:none}
.door .state.active{display:block}
.door .center{text-align:center}
@media(max-width:480px){.door-page{padding:20px 14px}.door{padding:28px 20px}}
@media(prefers-reduced-motion:reduce){.door input,.door .btn-submit{transition:none}.door .btn-spinner{animation:none}}
