/* imp-auth.css — P41: the sign-in pages (sign in, sign up, set password, two-step, the signed-out
   error), a promo panel and a card: a promo panel on the left and one card on the
   right, stacking to the card alone below 900px. Colours are brand.css tokens only. */

.auth {
  min-height: 100vh; display: grid; place-items: center; padding: 72px var(--sp-4) var(--sp-7);
  background:
    radial-gradient(60% 55% at 0% 0%, var(--imp-primary-wash-2), var(--imp-primary-halo-clear) 70%),
    radial-gradient(50% 50% at 100% 100%, var(--imp-accent-soft), var(--imp-accent-clear) 70%),
    var(--imp-bg);
}
.auth-wrap { width: 100%; max-width: 1040px; display: grid; gap: var(--sp-6); align-items: center; }
.auth--solo .auth-wrap { max-width: 480px; }
@media (min-width: 900px) {
  .auth-wrap { grid: auto / minmax(0, 1fr) 460px; gap: 56px; }
  .auth--solo .auth-wrap { grid: auto / minmax(0, 1fr); }
}

/* the crest: the brand, a link back to the front page */
.auth-crest { display: inline-flex; align-items: center; gap: var(--sp-3); width: max-content; text-decoration: none;
  font-family: var(--imp-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--imp-ink); }
.auth-crest img { display: block; }
.auth-crest:hover { color: var(--imp-primary-strong); }
.auth-crest:focus-visible, .auth a:focus-visible, .auth summary:focus-visible, .auth-eye:focus-visible {
  outline: 2px solid var(--imp-primary-strong); outline-offset: 3px; border-radius: var(--imp-radius-ctl); }

/* ---- promo ---- */
.auth-promo { display: none; flex-direction: column; }
@media (min-width: 900px) { .auth-promo { display: flex; } }
.auth-promo__title { margin: var(--sp-7) 0 var(--sp-3); font-family: var(--imp-display); font-weight: 800; color: var(--imp-ink);
  font-size: clamp(30px, 1.6vw + 16px, 42px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; max-width: 16ch; }
.auth-promo__sub { margin: 0 0 var(--sp-7); max-width: 42ch; color: var(--imp-secondary); font-size: var(--fs-3); line-height: 1.6; }
.auth-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.auth-feats li { display: grid; gap: 2px; padding: 14px var(--sp-4); border-radius: 12px;
  background: var(--imp-primary-wash); border: 1px solid var(--imp-primary-wash-2); border-left: 3px solid var(--imp-primary); }
.auth-feats b { font-size: var(--fs-2); color: var(--imp-ink); }
.auth-feats span { font-size: var(--fs-2); color: var(--imp-muted); line-height: 1.45; }
.auth-facts { margin: var(--sp-7) 0 0; display: grid; grid: auto / repeat(3, minmax(0, 1fr)); gap: 10px; }
.auth-facts div { padding: 14px 10px; border-radius: 12px; background: var(--imp-surface); border: 1px solid var(--imp-rule); text-align: center; }
.auth-facts dt { font-family: var(--imp-display); font-weight: 800; font-size: var(--fs-4); letter-spacing: -0.02em; color: var(--imp-primary-strong); }
.auth-facts dd { margin: 2px 0 0; font-size: var(--fs-1); color: var(--imp-muted); }
.auth-steps { list-style: none; margin: var(--sp-7) 0 0; padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-3);
  border-radius: var(--imp-radius); background: var(--imp-surface); border: 1px solid var(--imp-rule); }
.auth-steps li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-2); font-weight: 600; color: var(--imp-ink); }
.auth-steps span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--imp-primary); color: var(--imp-primary-ink); font-weight: 800; font-size: var(--fs-1); }

/* ---- the card ---- */
.auth-card { width: 100%; max-width: 460px; justify-self: center; padding: 36px var(--sp-7);
  background: var(--imp-surface); border: 1px solid var(--imp-rule); border-radius: 22px; box-shadow: var(--imp-shadow-md); }
.auth-crest--sm { font-size: var(--fs-4); gap: 10px; margin-bottom: var(--sp-6); }
@media (min-width: 900px) { .auth-crest--sm { display: none; } }
.auth-card__title { margin: 0; font-family: var(--imp-display); font-weight: 800; font-size: var(--fs-5); line-height: 1.15;
  letter-spacing: -0.02em; color: var(--imp-ink); }
.auth-card__sub { margin: 6px 0 var(--sp-6); color: var(--imp-muted); font-size: var(--fs-2); line-height: 1.55; }
.auth-card .ref { margin: calc(-1 * var(--sp-3)) 0 var(--sp-5); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.auth-card--notice .auth-crest { margin-bottom: var(--sp-6); }

.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-field { gap: var(--sp-2); }

/* an input with its icon on the left and, for a password, the eye on the right */
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input__icon { position: absolute; left: 14px; color: var(--imp-muted); pointer-events: none; }
.auth .auth-input input { width: 100%; height: 52px; padding: 0 var(--sp-4) 0 44px; font-size: var(--fs-3); border-radius: 12px; }
.auth .auth-input input::placeholder { color: var(--imp-muted); opacity: 0.75; }
.auth .auth-input input[aria-invalid="true"] { padding: 0 15px 0 43px; }
.auth .auth-input--eye input { padding-right: 52px; }
.auth .auth-input--eye input[aria-invalid="true"] { padding-right: 51px; }
.auth-input:focus-within .auth-input__icon { color: var(--imp-primary-strong); }
.auth-field.is-invalid .auth-input__icon { color: var(--imp-red); }
.auth-eye { position: absolute; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--imp-radius-ctl); background: none; color: var(--imp-muted); cursor: pointer; }
.auth-eye:hover { color: var(--imp-primary-strong); background: var(--imp-primary-wash); }
.auth-eye[hidden] { display: none; }
.auth-eye__hide { display: none; }
.auth-eye.is-shown .auth-eye__show { display: none; }
.auth-eye.is-shown .auth-eye__hide { display: block; }

/* the password rule as a checklist (js/password-rules.js ticks it) */
.auth-pw { display: flex; flex-direction: column; gap: var(--sp-2); }
.pw-rules { list-style: none; margin: 0; padding: 0; display: grid; grid: auto-flow / repeat(2, minmax(0, 1fr)); gap: 4px 14px;
  font-size: var(--fs-1); color: var(--imp-muted); }
.pw-rules li { display: flex; gap: 6px; align-items: baseline; }
.pw-rules li::before { content: "\2022"; flex: none; width: 12px; text-align: center; font-weight: 800; }
.pw-rules li[data-state="pass"] { color: var(--imp-green); }
.pw-rules li[data-state="pass"]::before { content: "\2713"; }
.pw-rules li[data-state="fail"] { color: var(--imp-secondary); }
.pw-rules li[data-state="fail"]::before { content: "\00D7"; color: var(--imp-red); }

/* "Forgot your password?": an honest answer, not a dead link */
.auth-forgot { margin-top: -6px; }
.auth-forgot summary { list-style: none; width: max-content; max-width: 100%; margin-left: auto; padding: var(--sp-1) 0; cursor: pointer;
  font-size: var(--fs-2); font-weight: 700; color: var(--imp-primary-strong); }
.auth-forgot summary::-webkit-details-marker { display: none; }
.auth-forgot summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-forgot p { margin: var(--sp-2) 0 0; padding: var(--sp-3) 14px; border-radius: var(--imp-radius-ctl);
  background: var(--imp-primary-wash); color: var(--imp-secondary); font-size: var(--fs-2); line-height: 1.55; }

.auth .auth-submit { min-height: 52px; margin-top: var(--sp-1); font-size: var(--fs-3); display: flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: 0 10px 24px var(--imp-primary-glow); }

/* "or", then a card to the other page */
.auth-or { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--imp-muted); font-size: var(--fs-1); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--imp-rule); }
.auth-switch { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) 18px; border-radius: 14px; text-decoration: none;
  border: 1.5px solid var(--imp-primary-wash-2); background: var(--imp-primary-wash); color: var(--imp-ink);
  transition: border-color var(--imp-ease), background var(--imp-ease); }
.auth-switch:hover { border-color: var(--imp-primary); background: var(--imp-primary-wash-2); }
.auth-switch__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--imp-radius-ctl);
  background: var(--imp-primary); color: var(--imp-primary-ink); }
.auth-switch__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.auth-switch__text b { font-size: var(--fs-2); }
.auth-switch__text span { font-size: var(--fs-1); color: var(--imp-muted); }
.auth-switch__go { flex: none; color: var(--imp-muted); transition: transform var(--imp-ease), color var(--imp-ease); }
.auth-switch:hover .auth-switch__go { transform: translateX(3px); color: var(--imp-primary-strong); }

/* notices (a spent link, an error) and the two-step extras */
.auth-notice__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--sp-4); border-radius: var(--imp-radius);
  background: var(--imp-primary-wash-2); color: var(--imp-primary-strong); font-size: 22px; }
.auth-notice__icon .auth-ico { width: 24px; height: 24px; }
.auth-notice__icon--warn { background: var(--imp-amber-wash); color: var(--imp-amber); }
.auth-help { margin: var(--sp-4) 0 0; font-size: var(--fs-2); color: var(--imp-muted); }
.auth-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: var(--sp-2);
  font-size: var(--fs-2); font-weight: 700; color: var(--imp-primary-strong); text-decoration: none; }
.auth-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-back .auth-ico { width: 16px; height: 16px; }
.auth-key { margin: 0 0 var(--sp-5); padding: var(--sp-4); border-radius: 12px; background: var(--imp-bg); border: 1px solid var(--imp-rule); }
.auth-key__label { margin: 0 0 6px; font-size: var(--fs-1); font-weight: 700; color: var(--imp-muted); }
.auth-key__row { margin: 0 0 var(--sp-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.auth-key__value { font-family: var(--imp-font); font-size: var(--fs-4); font-weight: 800; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums; color: var(--imp-ink); overflow-wrap: anywhere; }

/* the light/dark switch floats top right as a round icon; its name stays "Dark
   mode" and aria-pressed says whether it is on */
.imp-theme--float { width: 42px; height: 42px; padding: 0; border-radius: 50%; justify-content: center; }
.imp-theme--float .imp-theme__label { display: none; }

@media (max-width: 480px) {
  .auth { padding-top: 64px; }
  .auth-card { padding: 28px var(--sp-5); border-radius: var(--imp-radius-lg); }
  .pw-rules { grid: auto-flow / minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-switch, .auth-switch__go { transition: none; }
  .auth-switch:hover .auth-switch__go { transform: none; }
}