/* css/auth.css: Sign-in screens. Loaded in the order listed in index.html. */
/* ===== PHASE 5.4 AUTH UI ===== */
.auth{position:relative;min-height:100vh;display:flex;flex-direction:column}
.auth__top{position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:5}
.auth__brand{background:var(--navy-800);color:#fff;display:flex;justify-content:center;align-items:center;padding:64px 16px 28px}
.auth__main{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:24px 16px 40px}
.auth__card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:var(--s5)}
.logo--lg svg{width:56px;height:56px}.logo--lg .logo__ar{font-size:1.75rem}
.fld{margin-bottom:16px}.fld label{display:block;font-weight:600;font-size:.875rem;color:var(--navy-800);margin-bottom:6px}
.input{width:100%;min-height:48px;padding-inline:14px;border:1px solid var(--border);border-radius:var(--r-md);background:#fff;font:inherit;color:var(--text)}
.input:focus{outline:none;border-color:var(--sky-500);box-shadow:var(--focus)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.fld__err{color:var(--danger);font-size:.8125rem;margin-top:6px}
.pw{position:relative}.pw .input{padding-inline-end:48px}
.pw__btn{position:absolute;inset-block:0;inset-inline-end:0;width:48px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.check{display:flex;align-items:center;gap:10px;margin:4px 0 16px;cursor:pointer}.check input{width:20px;height:20px;accent-color:var(--navy-800)}
.btn--block{width:100%}.btn:disabled{opacity:.7;cursor:not-allowed}
.spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:rot .7s linear infinite}@keyframes rot{to{transform:rotate(360deg)}}
.link{display:block;margin:16px auto 0;border:0;background:transparent;color:var(--navy-700);font-weight:600;cursor:pointer;text-decoration:underline;padding:8px}
.alert,.ok{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:16px;border-radius:var(--r-md)}
.alert{background:#fbe3e3;color:#9b2c2c}.ok{background:#dff5ea;color:#17744a}
.notice{font-size:.8125rem;color:var(--muted);background:var(--sky-100);border-radius:var(--r-md);padding:8px 12px;margin-bottom:16px}
.demo{margin-top:20px;border-top:1px solid var(--border);padding-top:12px;font-size:.875rem}.demo summary{cursor:pointer;font-weight:600;color:var(--navy-700)}
.demo__list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{border:1px solid var(--border);background:#fff;border-radius:var(--r-pill);padding:6px 12px;font-size:.8125rem;cursor:pointer;color:var(--navy-800)}.chip:hover{background:var(--sky-100)}
@media(min-width:900px){.auth{flex-direction:row}.auth__brand{flex:1;padding:48px}.auth__main{flex:1;align-items:center;padding:48px}.logo--lg svg{width:72px;height:72px}.logo--lg .logo__ar{font-size:2.5rem}}

/* ===== 5.4 frosted-glass login (same approved navy + sky colours) ===== */
.auth__main{position:relative;overflow:hidden}
.auth__main::before,.auth__main::after{content:"";position:absolute;border-radius:50%;filter:blur(55px);pointer-events:none}
.auth__main::before{width:300px;height:300px;background:var(--sky-400);opacity:.6;inset-block-start:-60px;inset-inline-start:-80px}
.auth__main::after{width:320px;height:320px;background:var(--navy-600);opacity:.5;inset-block-end:-80px;inset-inline-end:-90px}
.auth__card{position:relative;z-index:1;background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.75);box-shadow:0 8px 32px rgba(11,42,91,.14)}
.auth__card h1,.auth__card>.muted{text-align:center}
.auth__card .input{background:rgba(255,255,255,.7);border-color:rgba(11,42,91,.14)}
.auth__card .fld label{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.auth__card .notice{background:rgba(227,243,253,.8)}
.link--end{display:block;margin:6px 0 0;margin-inline-start:auto;padding:4px 0}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.auth__card{background:rgba(255,255,255,.92)}}