/* Sign-in screens: split layout, brand panel + form card on a drifting gradient.
   ONE FILE FOR BOTH PORTALS: identical copies in client.swiftdox.com/login/login.css (Bootstrap 5) and
   chamber.swiftdox.com/login/login.css (Bootstrap 4). Every font size is set here explicitly so the two Bootstrap
   versions render the same. Edit one, copy it over the other. Loaded after css/theme.css (--sd-* colours, Roboto). */
body.auth {
  min-height: 100vh; margin: 0; background: #fff; color: var(--sd-ink);
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-size: .9375rem; line-height: 1.55;
}
.auth-shell { display: flex; min-height: 100vh; }

/* brand panel */
.auth-brand {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  width: 42%; max-width: 34rem; padding: 2.5rem 3rem; color: #fff; overflow: hidden;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .12), transparent 60%), linear-gradient(160deg, var(--sd-nav), var(--sd-nav-deep));
}
.auth-brand img { height: 2.25rem; width: auto; }
.auth-eyebrow { display: inline-block; margin-bottom: .75rem; padding: .2rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .75rem; font-weight: 700; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.auth-brand h1 { font-size: 2rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .75rem; color: #fff; }
.auth-brand .lead { font-size: 1rem; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, .8); margin: 0; }
.auth-points { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.auth-points li { display: flex; gap: .875rem; align-items: flex-start; font-size: .9375rem; line-height: 1.55; color: rgba(255, 255, 255, .85); }
.auth-points > li > i, .auth-points .auth-icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.125rem; }
.auth-points b { display: block; font-weight: 600; color: #fff; }
.auth-brand-foot { font-size: .8125rem; color: rgba(255, 255, 255, .6); }

/* form column: slow drifting brand-blue gradient, form on a white card, links underneath */
.auth-main {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background: linear-gradient(120deg, #e4edf9, #f4f7fc 30%, #dfe9f8 55%, #ece8f8 80%, #e2f1f3);
  background-size: 300% 300%;
  animation: auth-drift 24s ease-in-out infinite;
}
@keyframes auth-drift {
  0%, 100% { background-position: 0% 30%; }
  50% { background-position: 100% 70%; }
}
@media (prefers-reduced-motion: reduce) { .auth-main { animation: none; } }
.auth-main-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.auth-main-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; padding: 1rem 1.5rem 1.5rem; font-size: .8125rem; color: var(--sd-faint); }
.auth-main-foot a { color: var(--sd-muted); }
.auth-card {
  width: 100%; max-width: 25rem; padding: 2.25rem 2.5rem;
  background: #fff; border: 1px solid rgba(29, 74, 128, .08); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 38, 66, .04), 0 12px 32px -8px rgba(16, 38, 66, .14);
}
.auth-card.auth-card-wide { max-width: 34rem; }

/* card typography */
.auth-card h2 { font-size: 1.625rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 .25rem; }
.auth-card .auth-sub { font-size: .9375rem; line-height: 1.55; color: var(--sd-muted); margin: 0 0 1.75rem; }
.auth-card .form-group { margin-bottom: 1.125rem; }
.auth-card .form-label, .auth-card .form-group > label { display: inline-block; font-size: .875rem; font-weight: 600; line-height: 1.5; color: var(--sd-ink); margin-bottom: .375rem; }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.auth-label-row a { font-size: .8125rem; }
.auth-card .form-control { height: auto; padding: .625rem .875rem; font-size: .9375rem; line-height: 1.5; }
.auth-card .form-text { font-size: .8125rem; }
.auth-card .btn-lg { width: 100%; justify-content: center; padding: .7rem 1.25rem; font-size: .9375rem; font-weight: 600; line-height: 1.5; }
.auth-card .alert { font-size: .875rem; }
.auth-switch { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--sd-line); text-align: center; color: var(--sd-muted); font-size: .875rem; }
.auth-forgot { display: block; margin-top: 1.25rem; text-align: center; font-size: .875rem; }
.auth-mobile-logo { display: none; }

@media (max-width: 991.98px) {
  .auth-shell { flex-direction: column; }
  .auth-brand { width: auto; max-width: none; padding: 1.25rem 1.5rem; }
  .auth-brand-copy, .auth-brand-foot { display: none; }
  .auth-main-body { align-items: flex-start; padding-top: 2rem; }
}
@media (max-width: 575.98px) { .auth-card { padding: 1.5rem 1.25rem; border-radius: 12px; } }

/* notices (errors under the forms) */
.notice { display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border: 1px solid; border-radius: 8px; font-size: .875rem; line-height: 1.55; }
.notice > i:first-child { margin-top: .2rem; }
.notice p { margin: 0; }
.notice.d-none { display: none; }
.notice-red { background: var(--sd-bad-tint); color: var(--sd-bad-ink); border-color: var(--sd-bad-line); }

/* 6-digit email code (sign up confirmation, password reset) */
.auth-card .form-control.auth-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.5rem; letter-spacing: .5em; text-align: center; padding: .5rem .875rem; }
.auth-card .auth-code::placeholder { color: var(--sd-faint); opacity: .45; }
.auth-resend { margin: 1rem 0 0; text-align: center; color: var(--sd-muted); font-size: .875rem; }
.auth-resend a.disabled { pointer-events: none; color: var(--sd-faint); }

/* password fields: show/hide button + rule checklist (sign up, reset password) */
.pw-field { position: relative; }
.pw-field .form-control { padding-right: 2.75rem; }
.pw-toggle { position: absolute; top: 0; right: 0; bottom: 0; width: 2.75rem; border: 0; background: none; color: var(--sd-muted); }
.pw-toggle:hover, .pw-toggle:focus-visible { color: var(--sd-ink); }
.pw-rules { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .8125rem; color: var(--sd-muted); }
.pw-rules i { width: 1rem; text-align: center; margin-right: .25rem; }
.pw-rules .mdi-circle, .pw-rules .fa-circle { font-size: .4rem; vertical-align: middle; color: var(--sd-faint); }
.pw-rules li.met { color: var(--sd-ok); }
.pw-rules li.unmet { color: var(--sd-bad); }