/* ============================================================
   Sign-in overlay (#authOverlay, ui/auth.js) — "Forged Lantern". An .fModal card:
   crest, 3-step indicator (Email · Code · Username), title, the step body, then
   Back (code step only) + Close. Inputs/buttons keep their ids for the handlers.
   Cursors: never a bare value (CLAUDE.md §4).
   ============================================================ */

.authModal{ gap: 14px; width: min(100%, 460px); border-color: var(--accent); }
.authModal .crest{ width: 56px; height: 56px; background: var(--accent); border: 0; color: var(--accent-ink, #10140f); }
.authModal .crest svg{ width: 26px; height: 26px; stroke-width: 1.8; }
.authModal h2{ font-size: 1.7rem; line-height: 1.15; }

.authSteps{ list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; }
.authSteps li{ display: inline-flex; align-items: center; gap: 8px; color: var(--c-dim); font: 600 .78rem var(--f-body); letter-spacing: .04em; text-transform: uppercase; }
.authSteps i{ display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--c-line); font: 700 .75rem var(--f-body); font-style: normal; }
.authSteps .on{ color: var(--accent-hi); }
.authSteps .on i{ background: var(--accent); border-color: var(--accent-hi); color: var(--accent-ink, #10140f); }
.authSteps .done i{ background: hsl(var(--h) 30% 92% / .1); color: var(--accent-hi); }
.authSteps .i{ width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

#authBody{ display: flex; flex-direction: column; gap: 14px; }
.authText{ margin: 0; }
.authText b{ color: var(--c-text); overflow-wrap: anywhere; }
.authFld{ display: flex; flex-direction: column; gap: 6px; text-align: left; color: var(--c-dim); font: 600 .8rem var(--f-body); }
.authFld input{ width: 100%; min-height: 48px; font-size: 1rem; }
.authFld .authCode{ text-align: center; font: 700 1.6rem var(--f-display); letter-spacing: .35em; padding-left: .35em; }
.authErr, .authBanner{
  margin: 0; padding: 10px 14px; border-radius: 12px; text-align: left; font: 500 .88rem/1.45 var(--f-body);
  border: 1px solid var(--c-danger, #e0624e); background: hsl(0 60% 30% / .18); color: var(--c-danger, #e0624e);
}
.modal.fModal .authBanner{ color: var(--c-text); border-color: var(--accent); background: hsl(var(--h) 40% 40% / .14); }
.modal.fModal .authErr{ color: var(--c-danger, #e0624e); }
.authMain{ width: 100%; min-height: 48px; }
.authLinks{ display: flex; justify-content: center; gap: 10px; }
.authLinks button{ width: auto; min-height: 44px; margin: 0; }

@media (max-width: 480px){
  .authModal{ padding: 22px 18px 18px; border-radius: 22px; }
  .authModal h2{ font-size: 1.45rem; }
  .authSteps{ gap: 6px 10px; }
}