/*
 * auth.atlantajamaat.org - the sign-in and reset pages.
 *
 * One stylesheet for both pages, so the card, fields, buttons and the
 * navy-and-gold shell cannot drift apart. The theme is the TDB Atlanta one
 * the jamaat's banners and decks use: navy 21225B, gold C09924, white cards
 * with soft shadows, the gold emblem as a corner flourish.
 *
 * The sign-in page is identifier-first: the ITS number, then Face ID or the
 * password. index.php reveals the second step with script; without script
 * both steps show as one ordinary form.
 */
@font-face{
    font-family:"Fraunces Display";
    src:url("fonts/Fraunces-Display.woff2") format("woff2");
    font-weight:500;font-style:normal;font-display:swap;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
    font-family:"AlKanz";
    src:url("fonts/AlKanz.woff2") format("woff2");
    font-weight:400;font-style:normal;font-display:swap;
    unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;
}

/*
 * A dark page, declared as one. iOS draws its frosted status bar over the
 * top of the page and picks light or dark glass from the page's colour
 * scheme; without this the navy got a white haze. The html background is
 * the deepest navy so nothing outside the body ever shows white.
 */
:root{
    color-scheme:dark;
    --navy:#21225B;--navy-deep:#171848;--navy-glow:#2A2C6F;
    --gold:#C09924;--gold-ink:#A06615;--gold-soft:#FFEDC9;
    --ink:#102B38;--muted:#5C7480;--faint:#93A7B0;
    --tint:#ECEEF7;--line:rgba(16,43,56,.14);--line-soft:rgba(16,43,56,.08);
    --green:#1F7A5C;--green-wash:#DCF3E7;--red:#994448;--red-wash:#FFF1F1;
    --card-shadow:0 40px 80px -40px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.08);
    --ui:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
    --display:"Fraunces Display",ui-serif,"New York",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{background:var(--navy-deep)}
body{
    min-height:100vh;min-height:100dvh;
    background:radial-gradient(120% 90% at 50% 0%,var(--navy-glow) 0%,var(--navy) 55%,var(--navy-deep) 100%) no-repeat;
    color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
button,input,a{font:inherit}
a{color:inherit}

/* ---- the shell ---- */
.auth-shell{
    position:relative;overflow:hidden;
    min-height:100vh;min-height:100dvh;
    display:grid;grid-template-rows:1fr;
}
.auth-centre{
    position:relative;z-index:2;
    display:grid;place-items:center;
    padding:clamp(24px,5vh,56px) 16px 24px;
}
.auth-flourish{
    position:absolute;z-index:1;width:min(440px,60vw);height:auto;
    opacity:.16;pointer-events:none;user-select:none;
}
.auth-flourish.is-tl{left:-14%;top:-16%;transform:rotate(-24deg)}
.auth-flourish.is-br{right:-14%;bottom:-18%;transform:rotate(156deg)}

/* ---- the card ---- */
.auth-card{
    color-scheme:light;
    position:relative;width:100%;max-width:440px;
    padding:28px 28px 26px;border-radius:24px;
    background:#fff;color:var(--ink);box-shadow:var(--card-shadow);
}
.auth-emblem{display:block;width:64px;height:auto;margin:0 auto}
.auth-word{
    display:block;margin-top:8px;text-align:center;
    font-size:.62rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);
}
.auth-salaam{
    display:block;margin:22px 0 0;text-align:center;
    font-family:"AlKanz",serif;font-size:1.7rem;line-height:1;color:var(--gold-ink);
    direction:rtl;
}
/* the sign-in card's only title: Ahlan wa Sahlan, gold, in AlKanz */
.auth-greet{
    margin:22px 0 0;text-align:center;
    font-family:"AlKanz",serif;font-weight:400;font-size:2.3rem;line-height:1.15;
    color:var(--gold-ink);direction:rtl;
}
.auth-greet + .auth-form{margin-top:18px}
.auth-title{
    margin:6px 0 0;text-align:center;
    font-family:var(--display);font-weight:500;font-size:2.15rem;line-height:1.05;letter-spacing:-.02em;color:var(--navy);
}
.auth-title.is-left{text-align:left;font-size:1.5rem;margin-top:16px}
.auth-lead{margin:8px 0 0;text-align:center;font-size:.9rem;color:var(--muted)}
.auth-lead.is-left{text-align:left}

/* ---- notices ---- */
.auth-notice{
    margin:16px 0 0;padding:12px 14px;border-radius:14px;
    font-size:.82rem;font-weight:650;line-height:1.45;
}
.auth-notice.is-error{background:var(--red-wash);color:var(--red);border:1px solid rgba(165,67,70,.14)}
.auth-notice.is-success{background:var(--green-wash);color:#1E5E48;border:1px solid rgba(31,122,92,.14)}

/* ---- form ---- */
.auth-form{display:grid;gap:12px;margin-top:16px}
.auth-step{display:grid;gap:12px}
.auth-step[hidden]{display:none}
.auth-field{display:block}
.auth-field > span:first-child{display:block;margin:0 0 6px 2px;font-size:.72rem;font-weight:800;color:var(--ink)}
.auth-input{
    position:relative;display:flex;align-items:center;gap:8px;
    height:52px;padding:0 12px 0 42px;border:1px solid var(--line);border-radius:14px;background:#fff;
    transition:border-color .15s ease,box-shadow .15s ease;
}
.auth-input:focus-within{border-color:rgba(33,34,91,.55);box-shadow:0 0 0 4px rgba(33,34,91,.1)}
.auth-input input{
    flex:1;min-width:0;height:100%;border:0;outline:0;background:none;
    font-size:.95rem;color:var(--ink);
}
.auth-input input::placeholder{color:var(--faint)}
.auth-input > .auth-ic{position:absolute;left:13px;width:18px;height:18px;color:var(--faint);pointer-events:none}
.auth-input .auth-key{width:18px;height:18px;color:var(--gold-ink);opacity:.8;flex:0 0 auto}
.auth-eye{
    display:grid;place-items:center;width:34px;height:34px;margin-right:-6px;border:0;border-radius:9px;
    background:transparent;color:var(--faint);cursor:pointer;
}
.auth-eye:hover{background:var(--tint);color:var(--navy)}
.auth-eye svg{width:20px;height:20px}
.auth-field-error{display:block;margin:6px 0 0 2px;font-size:.74rem;font-weight:700;color:var(--red)}
.auth-field-error[hidden]{display:none}

.auth-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.auth-remember{display:flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;color:var(--muted)}
.auth-seg{display:inline-flex;padding:3px;border-radius:9px;background:rgba(16,43,56,.07)}
.auth-seg button{
    min-height:26px;padding:0 9px;border:0;border-radius:7px;background:transparent;
    font-size:.68rem;font-weight:800;color:var(--muted);cursor:pointer;
}
.auth-seg button.active{background:#fff;color:var(--navy);box-shadow:0 2px 6px rgba(16,43,56,.12)}
.auth-link{
    display:inline;padding:0;border:0;background:none;cursor:pointer;
    font-size:.76rem;font-weight:800;color:var(--navy);text-decoration:none;
}
.auth-link:hover{text-decoration:underline}
.auth-links{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.auth-links.is-centre{justify-content:center}

.auth-btn{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;min-height:52px;padding:0 16px;border:1px solid transparent;border-radius:14px;
    font-weight:800;font-size:.92rem;cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.auth-btn.is-gold{background:var(--gold);color:#1A1A3A;box-shadow:0 12px 26px -12px rgba(192,153,36,.7)}
.auth-btn.is-gold:hover{transform:translateY(-1px);box-shadow:0 16px 30px -12px rgba(192,153,36,.8)}
.auth-btn.is-navy{background:var(--navy);color:#fff;box-shadow:0 12px 26px -12px rgba(33,34,91,.6)}
.auth-btn:disabled{opacity:.7;cursor:wait;transform:none}
.auth-btn.is-quiet{background:#fff;border-color:var(--line);color:var(--navy);box-shadow:none}

/* a method: Face ID, ITS52 - equal in weight, one row each */
.auth-method{
    display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 14px;
    border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);
    text-align:left;text-decoration:none;cursor:pointer;
    transition:border-color .15s ease,transform .15s ease;
}
.auth-method:hover{border-color:rgba(33,34,91,.4);transform:translateY(-1px)}
.auth-method:disabled{opacity:.7;cursor:wait;transform:none}
.auth-method > .auth-ic{width:22px;height:22px;flex:0 0 auto;color:var(--navy)}
.auth-method > span{flex:1;min-width:0}
.auth-method b{display:block;font-size:.9rem;font-weight:800}
.auth-method small{display:block;margin-top:1px;font-size:.7rem;font-weight:650;color:var(--muted)}
.auth-method .auth-chev{width:16px;height:16px;flex:0 0 auto;color:var(--faint)}
.auth-help{
    margin:0;padding:10px 12px;border-radius:12px;
    background:var(--red-wash);color:var(--red);font-size:.78rem;font-weight:700;line-height:1.45;
}
.auth-help[hidden]{display:none}

.auth-divider{
    display:flex;align-items:center;gap:10px;margin:2px 0;
    font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.auth-divider[hidden]{display:none}

/* Remember me: one tick, thirty days */
.auth-check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.78rem;font-weight:750;color:var(--ink);user-select:none}
.auth-check input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.auth-check .auth-box{
    display:grid;place-items:center;flex:0 0 auto;width:20px;height:20px;border-radius:6px;
    border:1.5px solid rgba(16,43,56,.3);background:#fff;color:#fff;transition:background .15s ease,border-color .15s ease;
}
.auth-check .auth-box svg{width:13px;height:13px;opacity:0}
.auth-check input:checked + .auth-box{background:var(--navy);border-color:var(--navy)}
.auth-check input:checked + .auth-box svg{opacity:1}
.auth-check input:focus-visible + .auth-box{outline:3px solid rgba(192,153,36,.55);outline-offset:2px}

/* the two other ways in, side by side under the button */
.auth-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-tile{
    display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 10px;
    border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);
    font:inherit;font-weight:800;font-size:.86rem;text-decoration:none;cursor:pointer;
    transition:border-color .15s ease,transform .15s ease;
}
.auth-tile:hover{border-color:rgba(33,34,91,.4);transform:translateY(-1px)}
.auth-tile:disabled{opacity:.7;cursor:wait;transform:none}
.auth-tile .auth-ic{width:20px;height:20px;flex:0 0 auto}
.auth-tile span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth-tiles[hidden]{display:none}
.auth-divider.is-words{margin-top:6px}

/* who is signing in, once the ITS is known */
.auth-who{
    display:flex;align-items:center;gap:10px;margin-top:20px;padding:10px 12px;
    border-radius:14px;background:var(--tint);
}
.auth-who .auth-avatar{
    display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:50%;
    background:var(--navy);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.06em;
}
.auth-who > span:not(.auth-avatar){flex:1;min-width:0}
.auth-who b{display:block;font-size:.88rem;font-variant-numeric:tabular-nums}
.auth-who small{display:block;font-size:.7rem;color:var(--muted)}

.auth-fine{margin:10px 0 0;font-size:.7rem;line-height:1.45;color:var(--faint)}
.auth-dest{margin:16px 0 0;text-align:center;font-size:.7rem;color:var(--faint)}
.auth-dest b{color:var(--muted)}
.auth-dest a{color:var(--navy);font-weight:700;text-decoration:none}
.auth-dest a:hover{text-decoration:underline}

/* already signed in */
.auth-current{margin-top:20px;padding:16px;border:1px solid var(--line-soft);border-radius:16px;background:var(--tint)}
.auth-current small{display:block;font-size:.72rem;font-weight:700;color:var(--muted)}
.auth-current strong{display:block;margin:4px 0 14px;font-size:1.05rem;font-variant-numeric:tabular-nums}
.auth-current .auth-btn{text-decoration:none}
.auth-current .auth-switch{display:block;margin-top:12px;text-align:center}

/* back to sign-in, top-left of the card */
.auth-back{
    position:absolute;left:14px;top:14px;z-index:2;
    display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
    background:rgba(16,43,56,.07);color:var(--ink);text-decoration:none;
}
.auth-back:hover{background:var(--tint);color:var(--navy)}
.auth-back svg{width:18px;height:18px}

/* lists of things: passkeys, sessions */
.auth-card.is-wide{max-width:520px}
.auth-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.auth-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--tint)}
.auth-item form{margin:0;flex:0 0 auto}
.auth-item-ic{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--navy)}
.auth-item-ic svg{width:18px;height:18px}
.auth-item-copy{flex:1;min-width:0}
.auth-item-copy b{display:block;font-size:.88rem}
.auth-item-copy small{display:block;margin-top:2px;font-size:.7rem;color:var(--muted)}
.auth-badge{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--green-wash);color:var(--green);font-size:.62rem;font-weight:800;vertical-align:middle}
.auth-link.is-danger{color:var(--red)}
.auth-btn.is-quiet.is-danger{color:var(--red);border-color:rgba(153,68,72,.25)}
.auth-btn .auth-ic{width:20px;height:20px}
a.auth-btn{text-decoration:none}
.auth-notice[hidden]{display:none}

/* the reset page's sent state */
.auth-sent{display:grid;gap:10px;margin-top:18px;text-align:center;justify-items:center}
.auth-sent .auth-check{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--green-wash);color:var(--green)}
.auth-sent .auth-check svg{width:28px;height:28px}
.auth-sent p{margin:0;font-size:.9rem;color:var(--muted)}
.auth-sent p b{color:var(--ink)}

/* focus */
:is(.auth-btn,.auth-method,.auth-tile,.auth-link,.auth-eye,.auth-back,.auth-seg button):focus-visible{
    outline:3px solid rgba(192,153,36,.55);outline-offset:3px;
}

.auth-short{display:none}
/* ---- phones: the card sits at the foot, the flourish at the head ---- */
@media (max-width: 640px){
    .auth-centre{align-items:end;padding:max(56px,calc(env(safe-area-inset-top) + 40px)) 12px 12px}
    .auth-card{padding:24px 20px 22px}
    .auth-flourish{width:300px}
    .auth-flourish.is-tl{left:-110px;top:-80px}
    .auth-flourish.is-br{display:none}
    .auth-centre{padding-bottom:max(12px,env(safe-area-inset-bottom))}
}
@media (max-width: 400px){
    .auth-long{display:none}.auth-short{display:inline}
}
@media (max-width: 360px){
    .auth-title{font-size:1.9rem}
    .auth-row{gap:8px}
}
@media (prefers-reduced-motion: reduce){
    .auth-btn,.auth-method{transition:none}
}