/* ============================================================
   PASSAGE by Khoshà — auth screens
   Sign-in, first-run setup wizard, sign-out control, and the gate
   that keeps `.app` hidden until a session + Store.load() are both
   ready. Reuses the house component classes (.btn, .btn-gold, .fld,
   .frow, .m-title-style headings, --tokens from styles.css) rather
   than reinventing form styling — this file only adds the screen
   chrome those components sit inside. Mobile-first: the base rules
   below target a phone; the desktop card treatment is layered on
   at 560px+.
   ============================================================ */

/* the whole app stays invisible until auth.js adds .auth-ready —
   same specificity as styles.css's `.app{display:flex}`, and this
   file is linked after it, so this wins until the class flips it
   the other way (higher specificity, wins regardless of order). */
.app{display:none}
.app.auth-ready{display:flex}

.auth-screen{
  position:fixed; inset:0; z-index:150;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100dvh; padding:28px 18px calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto;
  background:var(--paper);
  background-image:
    radial-gradient(560px 420px at 8% -8%, #EADFC8 0%, transparent 68%),
    radial-gradient(480px 420px at 108% 108%, #E4EAE2 0%, transparent 66%);
}
.auth-screen[hidden]{display:none}

.auth-card{
  width:100%; max-width:400px;
  background:#fff; border:1px solid var(--stroke-soft); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:30px 24px 26px;
}
.auth-brand{display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:22px}
.auth-mark{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  color:var(--paper);
  background:radial-gradient(circle at 32% 28%, var(--gold-hi), var(--gold) 58%, var(--gold-deep));
  box-shadow:var(--shadow-soft); margin-bottom:10px;
}
.auth-mark-svg{width:30px; height:30px}
.auth-word{font-family:var(--disp); font-weight:800; font-size:24px; letter-spacing:.28em; margin-left:.28em}
.auth-byline{color:var(--ink-faint); font-size:11px; letter-spacing:.05em; margin-top:4px}

.auth-title{font-family:var(--disp); font-weight:800; font-size:21px; margin-bottom:4px}
.auth-lede{color:var(--ink-soft); font-size:13px; margin-bottom:20px; line-height:1.55}
.auth-optional{text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink-faint)}

.auth-submit{width:100%; padding:12px 18px; font-size:14.5px; margin-top:6px}
.auth-submit:disabled{opacity:.6; cursor:default; transform:none}
.auth-actions{display:flex; gap:10px; margin-top:6px}
.auth-actions .btn{flex:0 0 auto}
.auth-actions .auth-submit{flex:1; margin-top:0}

.auth-error{
  background:rgba(140,59,46,.08); border:1px solid rgba(140,59,46,.25); color:var(--red);
  border-radius:var(--r-sm); padding:9px 12px; font-size:12.5px; line-height:1.5; margin-bottom:12px;
}
.auth-error[hidden]{display:none}

.auth-pw-hint{font-size:11.5px; color:var(--ink-faint); margin:-6px 0 12px 2px; min-height:14px}
.auth-pw-hint.weak{color:var(--ink-faint)}
.auth-pw-hint.ok{color:var(--gold-deep)}
.auth-pw-hint.good{color:var(--green-soft)}
.auth-pw-hint.strong{color:var(--green)}

.auth-steps{display:flex; justify-content:center; gap:7px; margin-bottom:18px}
.auth-step-dot{width:7px; height:7px; border-radius:50%; background:var(--stroke)}
.auth-step-dot.on{background:var(--gold)}

.auth-foot{color:var(--ink-faint); font-size:11px; margin-top:18px; text-align:center}

@media (min-width:560px){
  .auth-card{padding:38px 40px 32px}
  .auth-mark{width:64px; height:64px}
  .auth-mark-svg{width:34px; height:34px}
  .auth-word{font-size:27px}
}

/* ---------- sidebar who-am-i + sign out ---------- */
.auth-whoami{
  display:flex; align-items:center; gap:10px; padding:10px 4px 12px; margin-bottom:10px;
  border-bottom:1px solid var(--stroke-soft);
}
.auth-whoami-user{display:flex; align-items:center; gap:9px; min-width:0; flex:1}
.auth-whoami-initials{
  width:32px; height:32px; flex:0 0 32px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:700; color:#FFFDF7;
  background:radial-gradient(circle at 32% 28%, var(--gold-hi), var(--gold) 58%, var(--gold-deep));
}
.auth-whoami-text{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.auth-whoami-name{font-size:12.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.auth-whoami-role{font-size:10.5px; color:var(--ink-faint)}
.auth-signout{
  flex:0 0 auto; border:1px solid var(--stroke); background:transparent; color:var(--ink-soft);
  border-radius:99px; padding:5px 11px; font-size:11px; font-weight:600; transition:all .2s;
}
.auth-signout:hover{border-color:var(--gold); color:var(--gold-deep)}
.auth-signout:disabled{opacity:.6; cursor:default}