/*
 * auth-shared.css — Shared auth-shell component styles
 *
 * Consumed by the unified auth page (login / signup / forgot-password).
 * Lifted verbatim from kit/signup.html <style> block (canonical source).
 *
 * ALL colours and sizes use var(--token) from css/colors_and_type.css.
 * The ONLY allowed hardcoded colours are:
 *   - color: #fff  on filled/primary buttons (white text on dark fill)
 *   - var(--dnuv-success, #1A7F37)  fallback already present in source
 *
 * R392 (onboarding audit) — alert FG/border + the error focus-ring now read
 * from tokens / color-mix(var(--dnuv-danger)…) so they re-tone for
 * [data-theme=dark] instead of staying light-mode literals.
 *
 * Do NOT add page-layout rules here (.auth-split, .auth-panel, step
 * containers, PF/PJ toggle, OTP input, verify step). Those live in the
 * consuming page's own stylesheet.
 */

/* ------------------------------------------------------------------ */
/* Local auth-page tokens (R392)                                        */
/* ------------------------------------------------------------------ */
/* The error focus-ring mirrors --ring-focus but tones from the danger
   brand red so the 3px glow matches the 1px aria-invalid border (both
   --dnuv-danger) AND re-tones for dark mode (color-mix tracks the token).
   --ring-focus lives in colors_and_type.css; this is its danger sibling,
   declared here because the auth page owns this sheet. The danger/warn
   alert *borders* get matching color-mix tokens for the same reason. */
:root {
  --ring-error: 0 0 0 3px color-mix(in srgb, var(--dnuv-danger) 30%, transparent);
  --color-danger-border: color-mix(in srgb, var(--dnuv-danger) 25%, transparent);
  --color-warn-border: color-mix(in srgb, var(--dnuv-warning) 25%, transparent);
}

/* ------------------------------------------------------------------ */
/* Reset + base                                                         */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* Visually-hidden but available to AT (standard sr-only pattern). Used for
   the single page-level <h1> and the polite live-region announcer (R392). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html, body {
  margin: 0; padding: 0; min-height: 100vh; min-height: 100dvh;
  font-family: var(--font-sans);
  color: var(--fg-2);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------------ */
/* Auth shell — centered card + gradient                                */
/* ------------------------------------------------------------------ */
.login-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(60, 179, 254, 0.18), transparent 70%),
    var(--bg-app);
}

.login-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);   /* R392 — was 20px (= --radius-lg) */
  padding: 36px;
  width: 100%;
  max-width: 460px;
  box-shadow: var(--shadow-lg);
}

.login-logo {
  display: flex; justify-content: center;
  margin-bottom: 20px;
}
.login-logo img { height: 44px; width: auto; }

.login-title {
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-700);
  color: var(--fg-1);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.login-sub {
  text-align: center;
  font-size: var(--fs-base);
  color: var(--fg-3);
  margin: 0 0 22px;
}

/* ------------------------------------------------------------------ */
/* Form fields                                                          */
/* ------------------------------------------------------------------ */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-500);
  color: var(--fg-3);
  margin-bottom: 6px;
}
.field label .opt {
  color: var(--fg-4);
  font-weight: var(--fw-400);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"] {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  padding: 11px 13px;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--fg-1);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input:focus {
  border-color: var(--dnuv-blue-light);
  box-shadow: var(--ring-focus);
}
.field input:disabled {
  background: var(--bg-sunken);
  color: var(--fg-4);
  cursor: not-allowed;
}
/* aria-invalid + inline helper-text */
.field input[aria-invalid="true"] {
  border-color: var(--dnuv-danger);
}
.field input[aria-invalid="true"]:focus {
  border-color: var(--dnuv-danger);
  box-shadow: var(--ring-error);
}
.input-error {
  color: var(--dnuv-danger);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  margin-top: 4px;
}
/* R392 a11y #4 — instructional hint text must clear AA (4.5:1) on white;
   --fg-4 (#94A3B8) is 2.5:1. --fg-3 (#64748B) clears it. */
.input-hint {
  color: var(--fg-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  margin-top: 4px;
}

/* ------------------------------------------------------------------ */
/* Two-up row (e.g. CPF + phone) — collapses to single column narrow   */
/* ------------------------------------------------------------------ */
.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 420px) {
  .row-2 { grid-template-columns: 1fr; gap: 0; }
}

/* ------------------------------------------------------------------ */
/* Password rule indicator                                              */
/* ------------------------------------------------------------------ */
.pw-rule {
  display: flex; align-items: center; gap: 6px;
  color: var(--fg-3);   /* R392 a11y #4 — was --fg-4 (2.5:1); real instruction */
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  margin-top: 4px;
}
.pw-rule .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border-2);
  flex: 0 0 auto;
}
.pw-rule.met { color: var(--dnuv-success, #1A7F37); }
.pw-rule.met .dot { background: var(--dnuv-success, #1A7F37); }

/* ------------------------------------------------------------------ */
/* Terms checkbox row                                                   */
/* ------------------------------------------------------------------ */
.check-row {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 16px;
}
.check-row input[type="checkbox"] {
  width: 18px; height: 18px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: var(--dnuv-blue-dark);
  cursor: pointer;
}
.check-row label {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--fg-3);
  line-height: 1.5;
  cursor: pointer;
}
.check-row a {
  color: var(--dnuv-blue-dark);
  text-decoration: none;
  font-weight: var(--fw-600);
}
.check-row a:hover { text-decoration: underline; }
.legal-ver {
  display: block;
  margin-top: 2px;
  color: var(--fg-3);   /* R392 a11y #4 — informative legal-version line */
  font-size: var(--fs-xs);
}
/* R392 a11y #11/#12 — terms-checkbox failure is conveyed by an explicit
   text error (.check-error, injected by JS with aria-invalid +
   aria-describedby) in addition to the colour cue below, so it is not
   colour-only. */
.check-row.invalid label { color: var(--dnuv-danger); }
.check-error {
  color: var(--dnuv-danger);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  margin: -10px 0 16px 28px;   /* align under the checkbox label, above next field */
}

/* ------------------------------------------------------------------ */
/* Buttons                                                              */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  font-family: inherit;
  font-weight: var(--fw-700);
  font-size: var(--fs-base);
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast);
}
.btn-primary { background: var(--dnuv-blue-dark); color: #fff; }
.btn-primary:hover { background: var(--dnuv-blue-600); }
.btn-primary:disabled { background: var(--border-2); cursor: not-allowed; opacity: 0.7; }
.btn-block { width: 100%; justify-content: center; padding: 12px; }

/* Trial CTA — bordered, surface-coloured alternative to the primary Free CTA */
.btn-trial {
  background: var(--bg-surface);
  color: var(--dnuv-blue-dark);
  border: 1px solid var(--dnuv-blue-100);
  font-weight: var(--fw-700);
  margin-top: 10px;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}
.btn-trial:hover { background: var(--dnuv-info-bg); }
.btn-trial:disabled { opacity: 0.7; cursor: not-allowed; }
.btn-trial .btn-sub {
  font-size: var(--fs-xs);
  font-weight: var(--fw-400);
  color: var(--fg-4);
}

/* Google SSO — bordered surface button (federates to Cognito → Google) */
.btn-google {
  background: var(--bg-surface);
  color: var(--fg-1);
  border: 1px solid var(--border-1);
  text-decoration: none; /* it's an <a>, not a <button> */
  font-weight: var(--fw-600);
}
.btn-google:hover { background: var(--bg-sunken); }
.btn-google .g-mark { width: 18px; height: 18px; flex: 0 0 auto; }

/* Loading state — spinner inside submit button while request is in-flight */
.spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: auth-spin 0.7s linear infinite;
  display: none;
}
.btn.loading .spinner { display: inline-block; }
.btn.loading .btn-label { opacity: 0.85; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ */
/* SSO divider ("ou")                                                   */
/* ------------------------------------------------------------------ */
.sso-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--fg-3);   /* R392 a11y #4 — "ou" is text; --fg-4 (2.5:1) fails AA */
  font-size: var(--fs-sm);
}
.sso-divider::before,
.sso-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-1);
}

/* ------------------------------------------------------------------ */
/* Alerts                                                               */
/* ------------------------------------------------------------------ */
.alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: var(--fs-small);
  line-height: 1.45;
  margin-bottom: 14px;
}
.alert-danger {
  background: var(--dnuv-danger-bg);
  color: var(--color-danger-fg);            /* R392 system #1 — dark-safe */
  border: 1px solid var(--color-danger-border);  /* R392 system #3 */
}
.alert-warn {
  background: var(--dnuv-warning-bg);
  color: var(--color-warn-fg);              /* R392 system #2 — dark-safe */
  border: 1px solid var(--color-warn-border);     /* R392 system #3 */
}
.alert-info {
  background: var(--dnuv-info-bg);
  color: var(--dnuv-blue-dark);
  border: 1px solid var(--dnuv-blue-100);
}
.alert b { display: block; margin-bottom: 2px; }

/* ------------------------------------------------------------------ */
/* Trial reassurance banner (under the card title)                     */
/* ------------------------------------------------------------------ */
.trial-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--dnuv-info-bg);
  color: var(--dnuv-blue-dark);
  border: 1px solid var(--dnuv-blue-100);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
  margin-bottom: 18px;
}

/* ------------------------------------------------------------------ */
/* Card footer (sign-in / sign-up toggle link)                         */
/* ------------------------------------------------------------------ */
.login-foot {
  text-align: center;
  margin-top: 18px;
  font-size: var(--fs-sm);
  color: var(--fg-3);   /* R392 a11y #4 — prompt text, was --fg-4 (2.5:1) */
}
.login-foot a {
  color: var(--dnuv-blue-dark);
  text-decoration: none;
  font-weight: var(--fw-600);
}
.login-foot a:hover { text-decoration: underline; }