/*
 * auth.atlantajamaat.org - sign in, password help, sessions, passkeys.
 *
 * Bootstrap 5 does the card, the fields, the buttons, the alerts and the
 * lists. This is only what Bootstrap does not ship: the jamaat's navy and
 * gold handed to Bootstrap through its own variables, the navy ground the
 * card floats on, the gold emblem at two corners, and the Arabic greeting
 * in the community's own lettering.
 *
 * Dark is Bootstrap's own data-bs-theme, stamped in PHP from the same
 * .atlantajamaat.org cookie the member app writes, so a member who chose
 * Dark arrives here to a dark page with no flash. The ground stays navy in
 * both: it is the jamaat's colour, not a light-mode decision.
 */
@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;
}

:root{
    --navy:#21225B; --navy-deep:#171848; --navy-glow:#2A2C6F;
    --gold:#C09924; --gold-light:#E7C978; --gold-ink:#8A6B12;
    /* Bootstrap resolves a link through the -rgb pair, so setting only
       --bs-link-color leaves anchors on its own blue */
    --bs-link-color:#21225B; --bs-link-color-rgb:33,34,91;
    --bs-link-hover-color:#16173d; --bs-link-hover-color-rgb:22,23,61;
}
[data-bs-theme="dark"]{
    --bs-link-color:#E7C978; --bs-link-color-rgb:231,201,120;
    --bs-link-hover-color:#F3DFA6; --bs-link-hover-color-rgb:243,223,166;
}

/* ---- the ground ----
   iOS draws its frosted status bar over the top of the page and picks
   light or dark glass from what is underneath; the html background is the
   deepest navy so nothing outside the body ever flashes white. */
html{background:var(--navy-deep);}
.auth-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 fixed;
    font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.auth-shell{
    position:relative;overflow:hidden;
    min-height:100vh;min-height:100dvh;
    display:grid;align-items:center;
    padding:calc(28px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
}
.auth-centre{width:100%;max-width:440px;margin:0 auto;position:relative;z-index:2;}
.auth-centre.is-wide{max-width:620px;}

/* the emblem, very quietly, at two opposite corners */
.auth-flourish{
    position:absolute;width:260px;height:auto;opacity:.06;pointer-events:none;user-select:none;
}
.auth-flourish.is-tl{top:-56px;left:-72px;}
.auth-flourish.is-br{bottom:-56px;right:-72px;transform:rotate(180deg);}
@media (max-width:575.98px){
    .auth-flourish{width:190px;}
    .auth-flourish.is-tl{top:-40px;left:-56px;}
    .auth-flourish.is-br{bottom:-40px;right:-56px;}
}

/* ---- the card ---- */
.auth-card{
    position:relative;
    border:0;border-radius:0;
    border-top:3px solid var(--gold);
    box-shadow:0 40px 80px -40px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.14);
}
.auth-emblem{display:block;margin:0 auto 10px;}
.auth-word{
    font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--gold-ink);
}
[data-bs-theme="dark"] .auth-word{color:var(--gold-light);}

/* the back chevron, out at the corner of the card rather than in the flow */
.auth-back{
    position:absolute;top:14px;left:14px;
    display:inline-grid;place-items:center;width:36px;height:36px;
    color:var(--bs-secondary-color);text-decoration:none;
}
.auth-back:hover,.auth-back:focus-visible{color:var(--bs-body-color);}

/* ---- Ahlan wa sahlan, in the community's own lettering ---- */
.auth-greet{
    font-family:"AlKanz",serif;
    font-size:clamp(2.1rem,9vw,2.7rem);line-height:1.5;
    color:var(--gold-ink);text-align:center;margin:0 0 4px;
}
[data-bs-theme="dark"] .auth-greet{color:var(--gold-light);}

.auth-title{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;text-align:center;}
.auth-lead{font-size:.92rem;color:var(--bs-secondary-color);text-align:center;}

/* ---- the form ----
   Bootstrap's own controls, squared off to match the rest of the site and
   with the jamaat's gold on the focus ring rather than its blue. */
.auth-card .form-control,
.auth-card .input-group-text,
.auth-card .btn{border-radius:0;}
.auth-card .form-control{padding-top:.62rem;padding-bottom:.62rem;}
.auth-card .form-control:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 .2rem rgba(192,153,36,.28);
}
.auth-card .input-group-text{
    background:var(--bs-tertiary-bg);
    color:var(--bs-secondary-color);
    min-width:44px;justify-content:center;
}
.auth-card .form-label{font-size:.8rem;font-weight:600;letter-spacing:.01em;}
.auth-card .form-check-input:checked{background-color:var(--navy);border-color:var(--navy);}
[data-bs-theme="dark"] .auth-card .form-check-input:checked{background-color:var(--gold);border-color:var(--gold);}
.auth-card .form-check-input:focus{border-color:var(--gold);box-shadow:0 0 0 .2rem rgba(192,153,36,.28);}

.btn-gold{
    background:var(--gold);color:var(--navy-deep);border:0;
    font-weight:700;font-size:.9rem;letter-spacing:.04em;padding:.72rem 1rem;
}
.btn-gold:hover,.btn-gold:focus{background:var(--gold-light);color:var(--navy-deep);}
.btn-gold:disabled{background:var(--gold);color:var(--navy-deep);opacity:.65;}

/* the eye on the password field: a button that looks like the field's edge */
.auth-eye{
    border:1px solid var(--bs-border-color);border-left:0;
    background:var(--bs-body-bg);color:var(--bs-secondary-color);
    padding:0 .8rem;
}
.auth-eye:hover,.auth-eye:focus-visible{color:var(--bs-body-color);}

/* ---- messages, the same shape as the app's ----
   Square like every other edge, the tone on a left edge rather than the
   whole box, and the icon in a column of its own so a long message wraps
   against the words instead of tucking under the icon. */
.auth-card .alert{
    border-radius:0;border-left-width:3px;
    display:flex;gap:12px;align-items:flex-start;
    font-size:.9rem;line-height:1.5;
}
.auth-card .alert > .fa-solid,
.auth-card .alert > .fa-regular{flex:none;margin-top:.15rem;font-size:.95rem;}
.auth-card .alert > .alert-body{flex:1;min-width:0;}
.auth-card .alert p:last-child{margin-bottom:0;}

/* ---- "or continue with" ---- */
.auth-divider{
    display:flex;align-items:center;gap:12px;
    font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--bs-secondary-color);
}
.auth-divider::before,.auth-divider::after{
    content:"";flex:1;height:1px;background:var(--bs-border-color);
}

/* ---- Face ID and ITS52, side by side ---- */
.auth-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.auth-tiles.is-single{grid-template-columns:1fr;}
.auth-tiles .btn{
    display:flex;align-items:center;justify-content:center;gap:9px;
    font-size:.86rem;font-weight:600;padding:.7rem .6rem;
}
/* Outline buttons through Bootstrap's own variables rather than a restyle.
   btn-outline-secondary's grey is a light-mode colour: on the dark card it
   dropped to around three to one, and these two are the ways in for anyone
   who does not use a password. */
.auth-card .btn-outline-secondary{
    --bs-btn-color:var(--bs-body-color);
    --bs-btn-border-color:var(--bs-border-color);
    --bs-btn-hover-color:var(--bs-body-color);
    --bs-btn-hover-bg:var(--bs-tertiary-bg);
    --bs-btn-hover-border-color:var(--bs-secondary-color);
    --bs-btn-active-color:var(--bs-body-color);
    --bs-btn-active-bg:var(--bs-secondary-bg);
    --bs-btn-active-border-color:var(--bs-secondary-color);
}

/* ---- the quiet line at the foot of a card ----
   One link sits in the middle; two go to opposite edges, so the way back
   and the way on are not mistaken for a pair. */
.auth-links{
    display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:20px;
    font-size:.84rem;font-weight:500;
    justify-content:space-between;
}
.auth-links.is-centre{justify-content:center;}
.auth-links a{text-decoration:none;}
.auth-links a:hover,.auth-links a:focus-visible{text-decoration:underline;}

.auth-fine{font-size:.78rem;color:var(--bs-secondary-color);}

/* ---- lists: sessions, and saved passkeys ---- */
.auth-card .list-group-item{
    border-radius:0;
    display:flex;align-items:center;gap:14px;
    padding:14px 4px;
    background:transparent;
    border-left:0;border-right:0;
}
.auth-card .list-group-item:first-child{border-top:0;}
.auth-card .list-group-item:last-child{border-bottom:0;}
.auth-item-ic{
    flex:none;display:inline-grid;place-items:center;width:38px;height:38px;
    color:var(--navy);background:var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] .auth-item-ic{color:var(--gold-light);}
.auth-item-copy{flex:1;min-width:0;}
.auth-item-copy b{display:block;font-size:.94rem;}
.auth-item-copy small{display:block;font-size:.78rem;color:var(--bs-secondary-color);}

/* an ordinary-looking link that happens to submit a form */
.auth-danger{
    border:0;background:none;padding:0;
    font-size:.84rem;font-weight:600;color:var(--bs-danger-text-emphasis);
}
.auth-danger:hover,.auth-danger:focus-visible{text-decoration:underline;}

/* ---- the one who is already signed in ---- */
.auth-who{display:flex;align-items:center;gap:12px;}
.auth-avatar{
    flex:none;display:inline-grid;place-items:center;width:44px;height:44px;
    background:var(--navy);color:#fff;
    font-size:.7rem;font-weight:700;letter-spacing:.06em;
}
[data-bs-theme="dark"] .auth-avatar{background:var(--gold);color:var(--navy-deep);}

@media (prefers-reduced-motion:reduce){
    *{transition:none !important;animation:none !important;}
}