/* The entry app's own page layout: the sign-in card and its states. The tokens and the shared components come
   from common/theme, served at /theme/theme.css (with the dealer's overrides) and linked first. Tokens only —
   no literals (agents/theming.md). Built against docs/mockups/login.html. */

.auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.auth-card {
  width: 100%; max-width: 24rem; border: 1px solid var(--card-border); border-radius: 0.75rem;
  background: var(--card); padding: 2rem; text-align: center; box-shadow: var(--shadow-sm);
}
.logo-wrap { display: flex; justify-content: center; margin-bottom: 1rem; }
.dealer-logo {
  height: 2.5rem; width: 2.5rem; border-radius: var(--radius-md); color: var(--logo-ink);
  font-weight: 700; font-size: var(--text-xs); display: inline-flex; align-items: center;
  justify-content: center; line-height: 1;
}
.dealer-name { font-size: var(--text-sm); font-weight: 600; color: var(--foreground); margin-bottom: 0.25rem; }
.auth-card h2 { font-size: 1.125rem; font-weight: 600; color: var(--foreground); margin: 0.75rem 0 0; }
.auth-card .subtitle { margin-top: 0.5rem; font-size: var(--text-sm); color: var(--muted); }
.auth-body { margin-top: 1.5rem; text-align: left; }

.redirect { display: flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 1.25rem 0 0.25rem; color: var(--muted); font-size: var(--text-sm); }

.as { margin-top: 0.75rem; font-size: var(--text-sm); color: var(--muted); }
.as b { color: var(--foreground); font-weight: 500; }
.row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.75rem; }

.footer { margin-top: 1.25rem; text-align: center; }
.footer .powered { font-size: 0.78571rem; color: var(--muted); }

/* The not-found page reuses the auth card; only the message + the link differ. */
.notfound .subtitle { margin-bottom: 1.25rem; }
.notfound .code { font-family: var(--font-mono); font-size: 0.78571rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }

/* The sign-in form's Google block — shown only when the email is at the super-admin domain (the client toggles
   .hidden on #google-hint and #google-actions). */
.or { margin: 1rem 0 .5rem; text-align: center; font-size: var(--text-sm); color: var(--muted); }
.btn-block {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; padding: 0.5rem 0.75rem; font-size: var(--text-sm); font-weight: 500;
}
.btn-block .g { font-weight: 700; }

/* The two-step method chooser: full-width buttons that read as cards. */
.method { display: block; width: 100%; padding: 0.625rem 0.75rem; text-align: left; font-size: var(--text-sm); }
.method + .method { margin-top: 0.5rem; }
.method .t { display: block; font-weight: 500; }
.method .h { display: block; margin: 0; font-size: 0.82143rem; color: var(--muted); }

/* The reCAPTCHA widget is invisible (the badge sits bottom-right); the container only has to exist. */
#recaptcha-container { margin-top: 0.75rem; }

/* A hidden page state must win over the components that set their own display (.chip, .actions, .btn-block,
   .method) — base.css's .hidden loses to those at equal specificity. */
.hidden { display: none !important; }