/* Brethren sign-in / join sheet (public/js/auth-sheet.js). Deep blue + gold, private --as-* tokens. */
.as-root {
    --as-bg: #060c2e; --as-bg2: #0a1442; --as-bg3: #0f1d5a; --as-bg4: #16277a;
    --as-gold: #f5a623; --as-gold-hi: #ffc964; --as-ink: #f0f2ff; --as-ink2: #b8c4e8; --as-ink3: #7a8ec0;
    --as-edge: rgba(122, 142, 192, 0.28); --as-edge-gold: rgba(245, 166, 35, 0.45); --as-alert: #ff5d6c;
    position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--as-ink);
}
.as-root[hidden] { display: none; }
html.as-open { overflow: hidden; }
.as-scrim { position: absolute; inset: 0; background: rgba(2, 6, 30, 0.72); backdrop-filter: blur(4px); }
.as-card {
    position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 26px 22px 22px;
    background: radial-gradient(120% 60% at 50% -10%, rgba(245, 166, 35, 0.12), transparent 60%), linear-gradient(180deg, var(--as-bg3), var(--as-bg2));
    border: 1px solid var(--as-edge-gold); box-shadow: 0 30px 80px rgba(2, 6, 30, 0.7);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    animation: asIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes asIn { from { opacity: 0; transform: translateY(14px); } }
.as-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--as-edge); background: var(--as-bg3); color: var(--as-ink2); cursor: pointer; }
.as-mark { width: 54px; height: 54px; margin: 0 auto; }
.as-mark img { width: 54px; height: 54px; border-radius: 50%; display: block; }
.as-eyebrow { margin: 12px 0 0; text-align: center; font: 800 11px 'Sora', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--as-gold); }
.as-card h2 { margin: 6px 0 0; text-align: center; font: 800 21px/1.25 'Sora', sans-serif; }
.as-why { margin: 8px 0 0; text-align: center; font-size: 14px; line-height: 1.55; color: var(--as-ink2); }
.as-tabs { display: flex; gap: 4px; margin: 18px 0 12px; padding: 4px; border-radius: 99px; background: var(--as-bg); border: 1px solid var(--as-edge); }
.as-tabs button { flex: 1; height: 38px; border: 1px solid transparent; border-radius: 99px; background: none; color: var(--as-ink3); font: 700 13px 'Sora', sans-serif; cursor: pointer; }
.as-tabs button.on { background: var(--as-bg4); border-color: var(--as-edge-gold); color: var(--as-ink); }
.as-msg { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 93, 108, 0.12); color: #ffc2c8; font-size: 13px; line-height: 1.45; }
.as-msg.ok { background: rgba(245, 166, 35, 0.12); color: var(--as-gold-hi); }
.as-form { display: grid; gap: 10px; }
.as-form[hidden] { display: none; }
.as-form label { display: grid; gap: 5px; font: 700 12px 'Plus Jakarta Sans', sans-serif; color: var(--as-ink3); }
.as-form input, .as-form select { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--as-edge); background: var(--as-bg); color: var(--as-ink); font: 600 15px 'Plus Jakarta Sans', sans-serif; outline: none; box-sizing: border-box; }
.as-form select option { background: var(--as-bg2); }
.as-form input:focus, .as-form select:focus { border-color: var(--as-gold); }
.as-form small { font-weight: 500; color: var(--as-ink3); }
.as-form small.bad { color: var(--as-alert); }
.as-pw, .as-phone { position: relative; display: flex; align-items: center; }
.as-pw input { padding-right: 46px; }
.as-eye { position: absolute; right: 6px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--as-ink3); cursor: pointer; }
.as-dial { flex: none; height: 46px; padding: 0 12px; display: grid; place-items: center; border-radius: 12px 0 0 12px; border: 1px solid var(--as-edge); border-right: 0; background: var(--as-bg3); font: 700 14px 'Sora', sans-serif; color: var(--as-gold); }
.as-phone input { border-radius: 0 12px 12px 0; }
.as-link { justify-self: end; font: 700 12.5px 'Plus Jakarta Sans', sans-serif; color: var(--as-gold); text-decoration: none; }
.as-go { height: 50px; margin-top: 4px; border: 0; color: var(--as-bg); background: linear-gradient(180deg, var(--as-gold-hi), var(--as-gold)); font: 700 15px 'Sora', sans-serif; cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.as-go:disabled { opacity: 0.6; cursor: default; }
.as-go.busy { animation: asPulse 1s infinite; }
@keyframes asPulse { 50% { opacity: 0.75; } }
.as-fine { margin: 2px 0 0; text-align: center; font-size: 12px; color: var(--as-ink3); }
@media (max-width: 599px) {
    .as-root { place-items: end center; padding: 0; }
    .as-card { width: 100%; max-height: 92dvh; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); clip-path: none; border-radius: 22px 22px 0 0; border-bottom: 0; }
}