/* ── Canonical Sign In / Sign Up modal — shared with static/auth-modal.js ──
   .auth-overlay/.auth-modal/.auth-modal-close already exist on every host page
   that loads this file (tickers.html, portfolio.html, tickers-stocks.html,
   tickers-ticker.html, everyday.html, calendar.html) — only the form-chrome
   classes below are new (or, on calendar.html, entirely absent until now).
   Values match index.html's own inline copy of this same modal. */

.auth-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.auth-tab { flex: 1; background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: 0.88rem; font-weight: 600; padding: 0.6rem 1rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; }
.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.auth-form { display: flex; flex-direction: column; gap: 0.9rem; }
.auth-field { display: flex; flex-direction: column; gap: 0.35rem; }
.auth-field label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.auth-field input { background: var(--surface2); border: 1px solid var(--border2); border-radius: 9px; padding: 0.65rem 0.9rem; color: var(--text); font-size: 0.88rem; font-family: inherit; outline: none; transition: border-color 0.15s; }
.auth-field input:focus { border-color: var(--accent); }
.auth-field-row { display: flex; align-items: center; justify-content: space-between; margin-top: -0.15rem; }

.auth-error { font-size: 0.78rem; color: var(--negative); background: var(--negative-subtle); border: 1px solid rgba(220,38,38,0.25); border-radius: 7px; padding: 0.5rem 0.75rem; display: none; }
.auth-error.visible { display: block; }

.auth-toggle { text-align: center; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.65rem; }
.auth-toggle a { color: var(--accent); text-decoration: none; font-weight: 600; cursor: pointer; }
.auth-toggle a:hover { text-decoration: underline; }

.auth-remember-label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--text-muted); cursor: pointer; user-select: none; }
.auth-remember-label input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
.auth-forgot-link { text-align: right; font-size: 0.75rem; }
.auth-forgot-link a { color: var(--text-muted); text-decoration: none; cursor: pointer; }
.auth-forgot-link a:hover { color: var(--text); text-decoration: underline; }

.auth-modal-back { display: flex; align-items: center; gap: 0.35rem; background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: 0.78rem; cursor: pointer; padding: 0; margin-bottom: 1.25rem; transition: color 0.15s; }
.auth-modal-back:hover { color: var(--text); }

.auth-success-msg { font-size: 0.85rem; color: var(--accent); background: var(--accent-dim); border: 1px solid rgba(37,99,235,0.25); border-radius: 8px; padding: 0.65rem 0.9rem; display: none; line-height: 1.45; }
.auth-success-msg.visible { display: block; }

.mfa-intro { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.5; }
.mfa-code-input { width: 100%; text-align: center; letter-spacing: 0.35em; font-size: 1.6rem; font-weight: 700; background: var(--surface2); border: 1px solid var(--border2); border-radius: 9px; padding: 0.7rem 1rem; color: var(--text); font-family: inherit; outline: none; transition: border-color 0.15s; }
.mfa-code-input:focus { border-color: var(--accent); }
.mfa-backup-toggle { font-size: 0.75rem; color: var(--text-muted); text-align: center; margin-top: 0.5rem; }
.mfa-backup-toggle a { color: var(--text-muted); cursor: pointer; text-decoration: underline; }
.mfa-backup-toggle a:hover { color: var(--text); }
.mfa-backup-input-box { margin-top: 0.75rem; }
.mfa-backup-code-input { width: 100%; background: var(--surface2); border: 1px solid var(--border2); border-radius: 9px; padding: 0.65rem 0.9rem; color: var(--text); font-size: 0.88rem; font-family: inherit; outline: none; letter-spacing: 0.1em; text-transform: uppercase; }
.mfa-submit-btn { margin-top: 0.75rem; }

/* ── Black & white palette test — #auth-overlay only, remove together if reverting ── */
#auth-overlay .auth-tab.active { color: #000; border-bottom-color: #000; }
#auth-overlay .auth-field input:focus { border-color: #000; }
#auth-overlay .auth-submit { background: #000 !important; border-color: #000 !important; }
#auth-overlay .auth-toggle a { color: #000; }
#auth-overlay .auth-remember-label input[type="checkbox"] { accent-color: #000; }
#auth-overlay .google-btn { border-color: #000; color: #000; }
#auth-overlay .google-btn:hover { background: #f2f2f2; }
#auth-overlay .auth-success-msg {
  color: var(--positive); background: var(--positive-subtle);
  border: 1px solid var(--positive);
}
#auth-overlay .mfa-code-input:focus { border-color: #000; }

.auth-age-row { display: flex; align-items: flex-start; gap: 0.45rem; margin-bottom: 0.1rem; }
.auth-age-row input[type="checkbox"] { margin-top: 0.2rem; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.auth-age-row label { font-size: 0.74rem; color: var(--text-muted); line-height: 1.45; cursor: pointer; }

.auth-turnstile-box { margin: 0.6rem 0; }
.auth-pw-hint { font-size: 0.72rem; color: var(--text-muted); text-align: center; margin-top: 0.4rem; }
.auth-exists-forgot { font-size: 0.78rem; text-align: center; margin: 0.25rem 0 0; }
.auth-exists-forgot-link { cursor: pointer; color: #000; }
.auth-modal-hidden { display: none; }

/* ── Thin "sign in required" interstitial (index.html's Type A gate pattern) ──
   Reuses each host page's own pre-existing .auth-gate-overlay/.auth-gate-modal
   and .auth-btn/.auth-btn-primary; only the heading/message/button-row layout
   classes below are new. */
.auth-gate-heading { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; text-align: center; }
.auth-gate-message { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 1.35rem; text-align: center; line-height: 1.5; }
.auth-gate-actions { display: flex; gap: 0.75rem; justify-content: center; }
.auth-gate-actions .auth-btn { padding: 0.5rem 1.25rem; font-size: 0.85rem; }

.pw-strength { margin-top: -0.15rem; }
.pw-strength-bar { display: flex; gap: 4px; }
.pw-strength-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--border2); transition: background-color 0.15s; }
.pw-strength-seg.fill-weak { background: #dc2626; }
.pw-strength-seg.fill-fair { background: #d97706; }
.pw-strength-seg.fill-strong { background: #2563eb; }
.pw-strength-seg.fill-vstrong { background: #16a34a; }
.pw-strength-label { font-size: 0.72rem; font-weight: 600; margin-top: 0.3rem; color: var(--text-muted); }
.pw-criteria { list-style: none; margin: 0.45rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.5rem; }
.pw-criteria li { font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.35rem; }
.pw-criteria li::before { content: "\2717"; font-size: 0.7rem; color: var(--red); flex-shrink: 0; }
.pw-criteria li.met { color: var(--positive); }
.pw-criteria li.met::before { content: "\2713"; color: var(--positive); font-weight: 700; }