/* ════════════════════════════════════════════════════════════════════
 * AUTH + NEWSLETTER PAGES - centered card auth + newsletter states
 * Reuses tokens.css + homepage.css + hub.css (newsletter landing).
 * ════════════════════════════════════════════════════════════════════ */

/* ── Auth shell ── */
.auth-wrap{ min-height:calc(100vh - 65px - 110px); display:flex; align-items:center; justify-content:center; padding:var(--space-12) var(--space-5); background:var(--bg-subtle); }
.auth-card{ width:100%; max-width:440px; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:var(--space-8); }
@media (min-width:480px){ .auth-card{ padding:var(--space-10); } }
.auth-card h1{ font-size:var(--text-h3); letter-spacing:var(--tracking-tight); text-align:center; margin-bottom:var(--space-2); }
.auth-sub{ text-align:center; font-size:var(--text-body-sm); color:var(--text-secondary); margin-bottom:var(--space-8); }

.auth-field{ display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-5); }
.auth-field label{ font-size:var(--text-body-sm); font-weight:var(--weight-semibold); color:var(--text-primary); }
.auth-field input[type=email], .auth-field input[type=text], .auth-field input[type=password]{ width:100%; font-family:var(--font-body); font-size:var(--text-body); color:var(--text-primary); background:var(--bg); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); min-height:48px; transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.auth-field input:focus{ outline:none; border-color:var(--brand-blue); box-shadow:var(--shadow-focus-ring); }
.auth-field input:user-invalid{ border-color:var(--color-danger); }
.auth-field .err{ font-size:var(--text-caption); color:var(--color-danger-text); display:none; }
.auth-field input:user-invalid ~ .err{ display:block; }

/* password show/hide (CSS-only checkbox) */
.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right:56px !important; }
.pw-toggle{ position:absolute; right:6px; top:6px; bottom:6px; display:inline-flex; align-items:center; padding:0 var(--space-3); font-size:var(--text-caption); font-weight:var(--weight-semibold); color:var(--text-secondary); background:transparent; border:0; cursor:pointer; border-radius:var(--radius-sm); }
.pw-toggle:hover{ color:var(--text-primary); background:var(--bg-subtle); }
.pw-check{ position:absolute; opacity:0; width:1px; height:1px; }
.pw-show-label{ display:inline; } .pw-hide-label{ display:none; }
.pw-check:checked ~ .pw-wrap .pw-show-label{ display:none; }
.pw-check:checked ~ .pw-wrap .pw-hide-label{ display:inline; }

.auth-radio-row{ display:flex; gap:var(--space-3); }
.auth-radio{ flex:1; position:relative; }
.auth-radio input{ position:absolute; opacity:0; }
.auth-radio label{ display:flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:44px; padding:var(--space-2) var(--space-3); border:1px solid var(--border-default); border-radius:var(--radius-md); cursor:pointer; font-size:var(--text-body-sm); font-weight:var(--weight-medium); color:var(--text-primary); }
.auth-radio input:checked + label{ border-color:var(--brand-purple); background:var(--brand-purple-light); color:var(--brand-purple-hover); }
.auth-radio input:focus-visible + label{ box-shadow:var(--shadow-focus-ring); }

.auth-check{ display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--text-body-sm); color:var(--text-secondary); margin-bottom:var(--space-6); line-height:var(--leading-snug); }
.auth-check input{ width:18px; height:18px; accent-color:var(--brand-purple); margin-top:2px; flex:none; }
.auth-inline{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-6); font-size:var(--text-body-sm); }
.auth-inline label{ display:flex; align-items:center; gap:var(--space-2); color:var(--text-secondary); }
.auth-inline input{ width:18px; height:18px; accent-color:var(--brand-purple); }
.auth-card .btn{ width:100%; }
.auth-alt{ text-align:center; font-size:var(--text-body-sm); color:var(--text-secondary); margin-top:var(--space-6); }
.auth-alt a{ color:var(--brand-blue); font-weight:var(--weight-semibold); text-decoration:none; }
.auth-alt a:hover{ color:var(--brand-blue-hover); }
.auth-divider{ display:flex; align-items:center; gap:var(--space-3); margin:var(--space-6) 0; color:var(--text-tertiary); font-size:var(--text-caption); }
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--border-subtle); }

/* multi-state via :target */
.auth-state{ display:none; }
.auth-state:target{ display:block; }
#default-state{ display:block; }
.auth-state:target ~ #default-state{ display:none; }

/* success check */
.auth-success{ width:64px; height:64px; border-radius:var(--radius-full); background:var(--color-success-bg); display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-5); }
.auth-success svg{ width:32px; height:32px; color:var(--color-success-text); }
.auth-links{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-6); }
.auth-link-row{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) var(--space-4); border:1px solid var(--border-subtle); border-radius:var(--radius-md); text-decoration:none; font-size:var(--text-body-sm); font-weight:var(--weight-semibold); color:var(--text-primary); }
.auth-link-row:hover{ border-color:var(--brand-blue); background:var(--bg-subtle); text-decoration:none; }
.auth-link-row span:last-child{ color:var(--brand-blue); }

/* ── Newsletter landing ── */
.nl-signup-card{ max-width:520px; margin:var(--space-8) auto 0; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); padding:var(--space-8); text-align:center; }
.nl-signup-card .newsletter-form{ margin-bottom:var(--space-3); }
.nl-count{ font-size:var(--text-caption); color:var(--text-tertiary); }