/* CertaRounds — First login (src/screens/firstlogin.js). Frame, hero, card, alerts and links
   come from login.css (.auth*). Semantic tokens only. */

.fl-progress { display: flex; align-items: center; gap: var(--sp-3); }
.fl-progress__text { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-3); letter-spacing: .02em; }
.fl-nowrap { white-space: nowrap; }

.fl-form .fl-newpw { display: flex; flex-direction: column; gap: var(--sp-3); }
.fl-hidden-user {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}
.fl-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--text-3);
}
.fl-note .icon { flex-shrink: 0; margin-top: 2px; }
.fl-who {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 var(--sp-2);
  font-size: var(--fs-15);
  color: var(--text-2);
  text-align: center;
}

/* ============ Desktop panel: setup steps ============ */
.fl-panel__title { max-width: 14ch; }
.fl-steps { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-7); }
.fl-steps__item { display: flex; align-items: flex-start; gap: var(--sp-3); }
.fl-steps__mark {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  background: var(--surface);
  color: var(--text-3);
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}
.fl-steps__item[data-state="current"] .fl-steps__mark { background: var(--primary-gradient); color: var(--primary-fg); box-shadow: var(--primary-shadow); }
.fl-steps__item[data-state="done"] .fl-steps__mark { background: var(--success-fill); color: var(--success-fg); box-shadow: none; }
.fl-steps__body { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; min-width: 0; }
.fl-steps__title { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); }
.fl-steps__item[data-state="next"] .fl-steps__title { color: var(--text-2); }
.fl-steps__sub { font-size: var(--fs-13); line-height: 1.45; color: var(--text-2); }

@media (min-width: 1024px) {
  .auth--first .auth-card { gap: var(--sp-5); }
}
.fl-keep { align-self: center; }

/* F1: one-line greeting on phones (no eyebrow above it), tighter field rhythm so the note stays in reach */
.auth--first .auth-hero__title { font-size: var(--fs-30); }
.auth--first .auth-form__fields { gap: var(--sp-3); }
.auth--first .pwfield .pwstrength { margin-top: 4px; }

/* F2: one progress indicator per viewport — phones/tablets get the stepper plus what comes next;
   the desktop split shows only the panel's step list. */
.fl-progress-wrap { display: flex; flex-direction: column; gap: 6px; }
.fl-progress__next { font-size: var(--fs-13); line-height: 1.45; color: var(--text-2); }
/* New password: while its error shows, the meter's guidance line steps aside (one message) */
.pwstrength.is-quiet .pwstrength__line { display: none; }

/* ============ F3 ============ */
/* The lock note and helpers break evenly (no one-word widow) */
.fl-note span { text-wrap: pretty; }   /* F4: runs the card width; no forced balanced measure */
/* Panel: upcoming steps are hairline-outlined discs (the icon sheet's empty circles), not white
   buttons that look disabled */
.fl-steps__item[data-state="next"] .fl-steps__mark { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.fl-steps__item[data-state="next"] .fl-steps__title { color: var(--text); }