/* Sign-in pages (Nov 2026): green header band with the logo on an ivory badge, clean card, roomy fields.
   Works in light and dark appearance; overrides auth-experience.css without rebuilding the bundle. */
.fhf-auth { --a-green: #00664a; --a-green-dark: #003b2c; --a-gold: #c99a3e; --a-surface: #fff; --a-canvas: #f3f1ea; --a-ink: #12352b; --a-muted: #5a6e65; --a-line: #dfe3dc; --a-field: #fff; --a-link: #00664a; }
html[data-cms-theme=dark] .fhf-auth { --a-surface: #13252b; --a-canvas: #0a171c; --a-ink: #eef5f3; --a-muted: #a9bcc4; --a-line: #2f444c; --a-field: #0c1c22; --a-link: #7fd6b3; }

body.fhf-auth { background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--a-green) 10%, var(--a-canvas)), var(--a-canvas) 70%); color: var(--a-ink); }
.fhf-auth .auth-shell { width: min(100%, 440px); padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.fhf-auth .auth-back { color: var(--a-ink); font-size: 14px; font-weight: 600; opacity: .85; }
.fhf-auth .auth-back:hover { opacity: 1; }

.fhf-auth .auth-card { border: 1px solid var(--a-line); border-radius: 22px; background: var(--a-surface); box-shadow: 0 18px 50px rgba(0, 40, 30, .12); }
html[data-cms-theme=dark] .fhf-auth .auth-card { box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }

/* Header band */
.fhf-auth .auth-brand { position: relative; height: 150px; padding: 0; align-items: center; background: url('/brand/auth/skyline-band.svg') center bottom / cover no-repeat, radial-gradient(circle at 14px 14px, rgba(255, 255, 255, .06) 1.6px, transparent 2px) 0 0 / 22px 22px, linear-gradient(160deg, #0a7a58, var(--a-green-dark) 70%); }
.fhf-auth .auth-brand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--a-gold), transparent); }
.fhf-auth .auth-brand a { display: grid; place-items: center; width: 116px; height: 104px; margin-top: 6px; border-radius: 20px; background: #fffaf0; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18), 0 10px 24px rgba(0, 0, 0, .25); }
.fhf-auth .auth-brand img { width: 96px; height: 86px; }

/* Body */
.fhf-auth .auth-card-body { padding: 22px 24px 24px; }
.fhf-auth h1 { color: var(--a-ink); font-size: clamp(25px, 6.4vw, 30px); letter-spacing: -.01em; }
.fhf-auth .auth-subtitle { margin: 4px 0 4px; color: var(--a-muted); font-size: 15px; }
.fhf-auth .auth-form { gap: 16px; margin-top: 20px; }
.fhf-auth .fhf-field label { color: var(--a-ink); font-size: 14px; font-weight: 650; margin-bottom: 7px; }
.fhf-auth :is(input:not([type=checkbox]):not([type=hidden]), select), .fhf-auth .auth-password { min-height: 50px; border: 1.5px solid var(--a-line) !important; border-radius: 12px; background: var(--a-field) !important; color: var(--a-ink) !important; transition: border-color .15s, box-shadow .15s; }
.fhf-auth .auth-password input:not([type=checkbox]):not([type=hidden]) { min-height: 47px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.fhf-auth :is(input:not([type=checkbox]):not([type=hidden]), select):focus, .fhf-auth .auth-password:focus-within { outline: none; border-color: var(--a-green) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--a-green) 18%, transparent); }
.fhf-auth .auth-password input:focus { box-shadow: none; }
.fhf-auth .auth-password button { color: var(--a-link); font-size: 13px; font-weight: 700; }
.fhf-auth .fhf-checkbox, .fhf-auth label:has(> input[type=checkbox]) { display: flex; align-items: center; gap: 10px; color: var(--a-ink); font-size: 14px; font-weight: 600; }
.fhf-auth input[type=checkbox] { width: 20px; height: 20px; border-radius: 6px; accent-color: var(--a-green); }
.fhf-auth .auth-help { margin-top: -6px; color: var(--a-muted); font-size: 12.5px; }
.fhf-auth .auth-primary { min-height: 50px; border-radius: 12px; font-size: 16px; font-weight: 700; background: linear-gradient(110deg, #0a7a58, var(--a-green-dark)); border-color: transparent; box-shadow: 0 8px 18px color-mix(in srgb, var(--a-green) 30%, transparent); }
.fhf-auth .auth-primary:hover { filter: brightness(1.06); }
.fhf-auth .auth-text-link { margin-top: 4px; color: var(--a-link); font-size: 14px; text-decoration: none; }
.fhf-auth .auth-text-link:hover { text-decoration: underline; }

/* "New to First Hijrah?" as a divided secondary action */
.fhf-auth .auth-register { display: grid; gap: 10px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--a-line); color: var(--a-muted); font-size: 14px; }
.fhf-auth .auth-register a { justify-content: center; min-height: 46px; border: 1.5px solid var(--a-line); border-radius: 12px; color: var(--a-link); font-size: 15px; font-weight: 700; text-decoration: none; }
.fhf-auth .auth-register a:hover { border-color: var(--a-green); }

.fhf-auth :is(.auth-notice, .auth-errors) { border-radius: 12px; }
html[data-cms-theme=dark] .fhf-auth .auth-notice { background: #163a31; border-color: #245245; color: #e2f3ec; }
html[data-cms-theme=dark] .fhf-auth .auth-errors { background: #3a1d17; border-color: #6b3a2e; color: #ffd9cf; }

/* Language button, top right */
.fhf-auth .interface-actions { display: flex; justify-content: flex-end; }
.fhf-auth .fhf-language > summary { min-height: 36px; padding: 4px 10px; border: 1px solid var(--a-line) !important; border-radius: 10px; background: var(--a-surface) !important; color: var(--a-ink) !important; font-size: 13px; }

@media (max-width: 360px) { .fhf-auth .auth-card-body { padding-inline: 18px; } .fhf-auth .auth-brand { height: 132px; } }
@media (prefers-reduced-motion: reduce) { .fhf-auth * { transition: none !important; } }
.fhf-auth .auth-secondary { min-height: 48px; border-radius: 12px; background: transparent; border: 1.5px solid var(--a-line); color: var(--a-link); font-weight: 700; }
.fhf-auth .auth-secondary:hover { border-color: var(--a-green); }
/* Pages built with the shared utility classes (Request an Account and others) get the same colours and buttons. */
.fhf-auth :is(.fhf-muted, .fhf-body-sm.fhf-muted) { color: var(--a-muted) !important; }
.fhf-auth :is(.text-fhf-green, a.text-fhf-green) { color: var(--a-link) !important; }
.fhf-auth .fhf-h1 { text-align: center; }
.fhf-auth .auth-card-body > .fhf-body-sm { text-align: center; }
.fhf-auth form .fhf-btn:not(.fhf-btn-secondary):not(.fhf-btn-ghost) { min-height: 50px; border-radius: 12px; font-size: 16px; font-weight: 700; background: linear-gradient(110deg, #0a7a58, var(--a-green-dark)); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--a-green) 30%, transparent); }
html[data-cms-theme=dark] .fhf-auth :is(p, span, label) { color: inherit; }

/* Request to Join: two-up name row, optional details, interest chips. */
.auth-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:380px){.auth-row-2{grid-template-columns:1fr}}
.auth-more{border:1px solid #dfe7e2;border-radius:12px;padding:10px 12px}
.auth-more>summary{cursor:pointer;font-weight:700;font-size:14px;color:#0b5d3f;list-style:none}
.auth-more>summary::-webkit-details-marker{display:none}
.auth-more>summary::before{content:"+ "}
.auth-more[open]>summary::before{content:"− "}
.auth-more[open]>summary{margin-bottom:10px}
.auth-more>*+*{margin-top:10px}
.auth-more select,.auth-more textarea{width:100%}
.auth-chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.auth-chips legend{font-size:13px;font-weight:700;margin-bottom:6px;padding:0}
.auth-chips label{position:relative;display:inline-flex}
.auth-chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.auth-chips span{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid #cfdbd5;border-radius:99px;font-size:13px}
.auth-chips input:checked+span{background:#dcefe4;border-color:#0b5d3f;color:#0b5d3f;font-weight:600}
.auth-chips input:focus-visible+span{outline:3px solid #c9a227;outline-offset:2px}
.auth-facts{display:grid;gap:4px;margin:14px 0 0;padding:10px 12px;border:1px solid #dfe7e2;border-radius:12px;font-size:14px}
.auth-facts div{display:flex;justify-content:space-between;gap:12px}
.auth-facts dt{color:#5b6f66}.auth-facts dd{margin:0;font-weight:700;overflow-wrap:anywhere;text-align:right}
.auth-signed-out{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:#dcefe4;color:#0b5d3f;font-size:14px;font-weight:600;text-align:center}
.fhf-auth .auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; color: var(--a-muted, #6b7280); font-size: 14px; }
.fhf-auth .auth-or::before, .fhf-auth .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--a-line); }
.fhf-auth [data-passkey-login] .auth-secondary { width: 100%; }