/* ==========================================================================
   فهيم — Account pages (signin.html, verify.html, reset.html)
   One centred card on cream paper. Needs tokens.css, components.css, reading.css.
   ========================================================================== */
body { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--canvas); }
[hidden] { display: none !important; }

.auth { width: 100%; max-width: 420px; display: grid; gap: 18px; }
.auth > .logo { justify-self: center; }
.auth__card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-panel); padding: 28px 24px; display: grid; gap: 18px; }
.auth__head { display: grid; gap: 6px; text-align: center; }
.auth__head h1 { font-size: 26px; font-weight: var(--w-display); line-height: 1.35; }
.auth__head p { color: var(--muted); font-size: var(--text-sm); line-height: 1.7; }
.auth__head p b { color: var(--ink); font-weight: var(--w-semibold, 600); }
.auth .seg { justify-self: center; }
.auth form { display: grid; }
.auth .field { margin-bottom: 14px; }
.auth .field input { width: 100%; }
.auth .field input[dir="ltr"] { text-align: left; }

/* password with show/hide (the wrapper is LTR so the toggle sits at the end of the text) */
.pw { position: relative; display: block; }
.pw button { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); padding: 6px 8px; cursor: pointer; border-radius: 6px; }
.pw button:hover { color: var(--ink); background: var(--canvas); }
.pw input { padding-inline-end: 64px; }

.auth__row { display: flex; justify-content: flex-end; margin: -6px 0 14px; font-size: 13px; }
.auth__error { background: #fbe6dc; border: 1px solid var(--terracotta); color: var(--ink); border-radius: 8px; padding: 10px 12px; font-size: var(--text-sm); line-height: 1.7; margin-bottom: 14px; }
.auth__error .link--btn { font-size: inherit; margin-inline-start: 4px; }
.auth form .btn, .auth__actions .btn { width: 100%; justify-content: center; }
.auth__actions { display: grid; gap: 10px; }
.auth__back { justify-self: center; font-size: 13px; }

.auth__or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; border-top: 1.5px dashed var(--border); }
.auth__demo { display: grid; gap: 6px; text-align: center; }
.auth__demo .btn { width: 100%; justify-content: center; }
.auth__demo small { color: var(--muted); font-size: 12px; }

/* "check your inbox" / success / failure states */
.auth__state { display: grid; justify-items: center; gap: 14px; text-align: center; }
.auth__badge { width: 64px; height: 64px; border-radius: 16px; background: var(--highlight); border: 1px solid var(--border-strong); display: grid; place-items: center; }
.auth__badge--bad { background: var(--tint-peach); }
.auth__badge svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth__hint { font-size: 12px; color: var(--muted); background: var(--canvas); border: 1.5px dashed var(--border-strong); border-radius: 8px; padding: 8px 12px; line-height: 1.7; }

.auth__private { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--muted); line-height: 1.7; padding: 0 4px; }
.auth__private svg { width: 18px; height: 18px; flex: none; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.btn[aria-busy="true"], .btn:disabled { opacity: .6; pointer-events: none; }