/**
 * Standalone stylesheet for template-parts/login-modal.php - deliberately
 * NOT part of blog.css. This modal must render correctly on every real
 * page including the homepage (front-page.php), which has its own
 * completely separate homepage.css (defining its own conflicting
 * `.content-card` etc.) - loading the whole of blog.css there just for
 * this one modal would collide. Self-contained: only relies on `.button`/
 * `.icon-btn` and the `--ink`/`--surface`/`--line`/etc. custom-property
 * names, which both blog.css AND homepage.css already define identically
 * (same design system, same token names) - so this file only adds what
 * neither host stylesheet already has (`.field`, `.anonymous`, and every
 * login/OTP-specific class).
 */
/* Real bug found+fixed 2026-09-06: pa_icon()'s <svg class="icon"> only gets
   sized (width/height:1em) by a rule that lives in blog.css - on the
   homepage (no blog.css) every icon inside this modal rendered at its raw
   intrinsic size instead, blowing up the whole layout. Same declaration,
   duplicated here so this modal is genuinely self-contained. */
.icon{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:-.125em;flex:none}

.login-modal{width:min(100%,400px);margin:auto;padding:30px;border:0;border-radius:var(--r-feature);background:var(--pearl);color:var(--text)}
.login-modal::backdrop{background:rgba(5,13,22,.74);backdrop-filter:blur(7px)}
.login-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;font-weight:850;font-size:15px}
.login-modal-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 0 20px;font-size:11px}
.login-modal-row a{color:var(--mineral);font-weight:800}
.login-modal-register{margin:16px 0 0;text-align:center;color:var(--muted);font-size:12px}
.login-modal-register a{color:var(--mineral);font-weight:800}

.field{display:grid;gap:7px;margin-bottom:14px}
.field label{font-size:11px;font-weight:800}
.field input{width:100%;height:52px;padding-inline:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface);outline:0}
.field input:focus{border-color:var(--mineral);box-shadow:0 0 0 3px color-mix(in srgb,var(--mineral) 18%,transparent)}
.anonymous{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px}
.anonymous input{width:18px;height:18px;accent-color:var(--mineral)}

/* Login modal tabs (OTP by default + password fallback) */
.login-tabs{display:flex;gap:6px;margin-bottom:22px;padding:4px;border-radius:14px;background:var(--mist)}
.login-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-size:12px;font-weight:850}
.login-tab.is-active{background:var(--surface);color:var(--text);box-shadow:var(--soft)}
.login-panel{display:none}
.login-panel.is-active{display:block}

/* OTP 2-step flow */
.otp-progress{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:22px}
.otp-dot{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--mist);color:var(--muted);font-size:12px;font-weight:850}
.otp-dot.is-active{background:var(--ink);color:#edf3f5}
.otp-dot.is-done{background:var(--champagne);color:var(--ink)}
.otp-line{width:36px;height:2px;background:var(--line)}
.otp-step{display:none}
.otp-step.is-active{display:block}
.otp-sub{margin:0 0 16px;color:var(--muted);font-size:13px;text-align:center}
.otp-error{min-height:20px;margin:8px 0 0;color:#c0392b;font-size:11px}
.otp-resend-row{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:11px}
.otp-resend-row button{border:0;background:transparent;color:var(--mineral);font-weight:800}
.otp-resend-row button:disabled{color:var(--muted);cursor:default}
.otp-resend-row button i{margin-left:5px}