/*
 * first-login.css — mandatory first-sign-in password setup modal
 * Glass-cosmic, matches the auth screen. Critical positioning is also inlined
 * on #first-login-overlay in js/first-login.js so the gate works even if this
 * file fails to load.
 */

#first-login-overlay {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  opacity: 0;
  transition: opacity 0.32s ease;
}
#first-login-overlay.fl-in { opacity: 1; }
#first-login-overlay.fl-done { opacity: 0; transition: opacity 0.4s ease; }

.fl-backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(56, 189, 248, 0.10), transparent 55%),
    radial-gradient(120% 120% at 50% 100%, rgba(167, 139, 250, 0.10), transparent 55%),
    rgba(4, 5, 15, 0.86);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.fl-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 34px 34px 30px;
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(56, 189, 248, 0.08), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(167, 139, 250, 0.08), transparent 55%),
    rgba(10, 16, 26, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(56, 189, 248, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(14px) scale(0.985);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.32, 1), opacity 0.42s ease;
}
#first-login-overlay.fl-in .fl-card { transform: translateY(0) scale(1); opacity: 1; }
#first-login-overlay.fl-done .fl-card { transform: translateY(-8px) scale(0.99); }

.fl-emblem {
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.22);
  color: rgba(125, 211, 252, 1);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.18);
}
.fl-emblem svg { width: 40px; height: 40px; }

.fl-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(125, 211, 252, 0.85);
  margin-bottom: 7px;
}
.fl-title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0 0 10px;
}
.fl-sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(186, 211, 232, 0.78);
  margin: 0 0 22px;
}
.fl-sub b { color: rgba(224, 242, 254, 1); font-weight: 600; }

.fl-form { display: flex; flex-direction: column; gap: 14px; }
.fl-field { display: flex; flex-direction: column; gap: 7px; }
.fl-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(186, 211, 232, 0.65);
}
.fl-input-wrap { position: relative; display: flex; align-items: center; }
.fl-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 46px 13px 15px;
  font-size: 15px;
  font-family: inherit;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.fl-input::placeholder { color: rgba(186, 211, 232, 0.35); }
.fl-input:focus {
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(56, 189, 248, 0.05);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
}
.fl-eye {
  position: absolute;
  right: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: rgba(186, 211, 232, 0.55);
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.16s ease, background 0.16s ease;
}
.fl-eye:hover { color: rgba(224, 242, 254, 1); background: rgba(255, 255, 255, 0.05); }
.fl-eye svg { width: 18px; height: 18px; }

/* ── Strength meter ───────────────────────────────────────────────────── */
.fl-strength { display: flex; align-items: center; gap: 12px; margin: -2px 0 2px; }
.fl-meter {
  flex: 1 1 auto;
  height: 7px;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
}
.fl-meter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: #64748b;
  transition: width 0.28s ease, background 0.28s ease;
}
.fl-meter i[data-tier="1"], .fl-meter i[data-tier="2"] { background: linear-gradient(90deg, #f87171, #fb923c); }
.fl-meter i[data-tier="3"] { background: linear-gradient(90deg, #fb923c, #fbbf24); }
.fl-meter i[data-tier="4"] { background: linear-gradient(90deg, #fbbf24, #a3e635); }
.fl-meter i[data-tier="5"], .fl-meter i[data-tier="6"] { background: linear-gradient(90deg, #4ade80, #22c55e); }
.fl-verdict {
  flex-shrink: 0;
  min-width: 74px;
  text-align: right;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(186, 211, 232, 0.55);
}
.fl-verdict[data-tier="1"], .fl-verdict[data-tier="2"] { color: #fca5a5; }
.fl-verdict[data-tier="3"] { color: #fcd34d; }
.fl-verdict[data-tier="4"] { color: #bef264; }
.fl-verdict[data-tier="5"], .fl-verdict[data-tier="6"] { color: #86efac; }
html[data-theme="light"] .fl-verdict { color: rgba(71, 85, 105, 0.6); }

.fl-rules {
  list-style: none;
  margin: 4px 0 2px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 16px;
}
@media (max-width: 420px) { .fl-rules { grid-template-columns: 1fr; } }
.fl-rule {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: rgba(186, 211, 232, 0.55);
  transition: color 0.2s ease;
}
.fl-rule-dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.28);
  color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.fl-rule-dot svg { width: 11px; height: 11px; }
.fl-rule.is-ok { color: rgba(187, 247, 208, 0.95); }
.fl-rule.is-ok .fl-rule-dot {
  background: rgba(74, 222, 128, 0.18);
  border-color: rgba(74, 222, 128, 0.55);
  color: rgba(134, 239, 172, 1);
  transform: scale(1.06);
}

.fl-error {
  font-size: 12.5px;
  color: rgba(252, 165, 165, 1);
  background: rgba(248, 113, 113, 0.10);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 10px;
  padding: 9px 12px;
}

.fl-submit {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #04101c;
  background: linear-gradient(135deg, #7dd3fc, #38bdf8 55%, #818cf8);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(56, 189, 248, 0.30);
  transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}
.fl-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(56, 189, 248, 0.40); filter: brightness(1.04); }
.fl-submit:active:not(:disabled) { transform: translateY(0) scale(0.99); }
.fl-submit:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* Escape hatch — "wrong account? log out". Quiet text button under the CTA. */
.fl-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 11px;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 11px;
  color: rgba(148, 163, 184, 0.78);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.fl-logout:hover {
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.16);
  border-color: rgba(248, 113, 113, 0.32);
}
.fl-logout:active { transform: translateY(0) scale(0.99); }
.fl-logout svg { opacity: 0.85; }
html[data-theme="light"] .fl-logout { color: #64748b; }
html[data-theme="light"] .fl-logout:hover { color: #b91c1c; background: rgba(254, 226, 226, 0.7); border-color: rgba(248, 113, 113, 0.4); }

.fl-submit-spin {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(4, 16, 28, 0.35);
  border-top-color: #04101c;
  border-radius: 50%;
  animation: fl-spin 0.7s linear infinite;
}
@keyframes fl-spin { to { transform: rotate(360deg); } }

/* ── Light theme ──────────────────────────────────────────────────────── */
html[data-theme="light"] .fl-backdrop {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(2, 132, 199, 0.10), transparent 55%),
    rgba(240, 244, 255, 0.85);
}
html[data-theme="light"] .fl-card {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(2, 132, 199, 0.06), transparent 55%),
    rgba(255, 255, 255, 0.97);
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22);
}
html[data-theme="light"] .fl-title { color: #0f172a; }
html[data-theme="light"] .fl-sub { color: rgba(51, 65, 85, 0.85); }
html[data-theme="light"] .fl-sub b { color: #0f172a; }
html[data-theme="light"] .fl-label { color: rgba(71, 85, 105, 0.85); }
html[data-theme="light"] .fl-input { color: #0f172a; background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.14); }
html[data-theme="light"] .fl-input::placeholder { color: rgba(71, 85, 105, 0.45); }
html[data-theme="light"] .fl-rule { color: rgba(71, 85, 105, 0.70); }
html[data-theme="light"] .fl-rule.is-ok { color: rgba(22, 101, 52, 1); }
html[data-theme="light"] .fl-submit { color: #fff; }

/* Eyebrow + emblem icon are light-sky (sky-300) — washed out on the white card.
   Drop to the darker cyan accent so they read. */
html[data-theme="light"] .fl-eyebrow { color: var(--accent-cyan); }
html[data-theme="light"] .fl-emblem {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.28);
  color: var(--accent-cyan);
}
/* Show/hide-password eye is light slate on the (now white) input — invisible.
   #fff hover likewise disappears. Re-tint to slate / dark primary. */
html[data-theme="light"] .fl-eye { color: rgba(71, 85, 105, 0.65); }
html[data-theme="light"] .fl-eye:hover { color: #0f172a; background: rgba(15, 23, 42, 0.05); }
/* Error text was red-300 on pale-red — too low contrast on white; deepen it. */
html[data-theme="light"] .fl-error {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.30);
}
/* Strength verdict tiers were pastel (red/amber/green-300) — fail AA on white.
   Swap to the darker semantic shades. */
html[data-theme="light"] .fl-verdict[data-tier="1"],
html[data-theme="light"] .fl-verdict[data-tier="2"] { color: #dc2626; }
html[data-theme="light"] .fl-verdict[data-tier="3"] { color: #d97706; }
html[data-theme="light"] .fl-verdict[data-tier="4"] { color: #65a30d; }
html[data-theme="light"] .fl-verdict[data-tier="5"],
html[data-theme="light"] .fl-verdict[data-tier="6"] { color: #16a34a; }

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #first-login-overlay,
  #first-login-overlay .fl-card { transition: none !important; }
  .fl-submit-spin { animation: none !important; }
}

/* ── Small screens ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .fl-card { padding: 26px 22px 24px; border-radius: 18px; }
  .fl-title { font-size: 23px; }
}

/* ── MOBILE (2026-07-06 overhaul) — scoped, desktop untouched ──────────── */
@media (max-width: 768px) {
  /* P0 — iOS Safari auto-zooms on focus for any input under 16px; on this
     mandatory full-screen gate that leaves the card zoomed + mis-centered. */
  .fl-input { font-size: 16px; }

  /* Top-align the tall 7-rule card so it can scroll fully into view above
     the on-screen keyboard. !important is required only to beat the inline
     gate styles set in js/first-login.js (align-items:center; padding:24px). */
  #first-login-overlay {
    align-items: flex-start !important;
    padding: 16px !important;
  }
  .fl-card { margin: 8px auto; }

  /* ── Auth screen (#auth-screen) — selectors live in css/animations.css,
     which loads BEFORE this file, so equal-specificity overrides here win. */
  /* Press Start 2P wordmark at 40px/4px tracking overflows 320–360px cards */
  .torus-wordmark { font-size: 30px; letter-spacing: 2px; }
  /* clamp() floored at 60px can graze the 320px edge — refloor for phones */
  .auth-title { font-size: clamp(40px, 13vw, 60px); }
  /* Footer was absolute-pinned to the layout viewport bottom and floated
     over the form when the keyboard opened; let it flow after the content.
     (#auth-screen is a centered flex column, so static keeps it centered.) */
  .auth-footer {
    position: static;
    margin-top: 24px;
    padding-bottom: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
}

/* Rules list: two columns of 12px text wrap awkwardly between 421–520px —
   widen the single-column band (base file already goes 1-col at 420px). */
@media (max-width: 520px) {
  .fl-rules { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .torus-wordmark { font-size: 24px; }
}

/* Touch-target sizing only (44px floor for primary touch controls) */
@media (pointer: coarse) {
  .fl-eye { width: 44px; height: 44px; right: 6px; }
  .fl-input { padding-right: 56px; }
  .auth-theme-btn {
    width: 44px;
    height: 44px;
    top: max(14px, env(safe-area-inset-top, 0px));
    right: max(14px, env(safe-area-inset-right, 0px));
  }
}