/*
 * Comptes, espaces et invitations (ECL-17), et l'écran de connexion en deux
 * panneaux de la coquille Studio (ECL-23) — au-dessus du design system,
 * jamais contre lui.
 *
 * Aucune couleur littérale : tout passe par les jetons de dashboard.css. Le
 * jaune de la marque reste la MARQUE : le [AI] du logo, et lui seul (les puces et le
 * filigrane du panneau navy). Nulle part une décoration.
 * Aucun `!important` (scripts/check-css.js). Les couleurs sémantiques ne
 * disent que des ÉTATS : un refus, une réussite.
 */

/* ---------- L'écran public : marque à gauche, formulaire à droite ---------- */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}

.auth-brand {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--text-invert);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
}

.auth-logo {
  font-family: var(--font-display);
  color: var(--text-invert);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}

.auth-claim {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 12em;
  margin: 0;
  position: relative;
  z-index: 1;
}

.auth-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--on-navy-muted);
  position: relative;
  z-index: 1;
}
.auth-points li { display: flex; align-items: flex-start; gap: var(--space-3); }

/* La marque : la coche de chaque promesse, et le [AI] en filigrane (ADR-0006). */
.auth-point { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; color: var(--brand-yellow); }
.auth-watermark {
  position: absolute;
  right: 16px;
  bottom: -28px;
  font-family: var(--font-display);
  font-size: 200px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand-yellow);
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.auth-panel {
  background: var(--surface);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.auth-locale { position: absolute; top: var(--space-4); right: var(--space-4); }
.auth-locale .select { width: auto; min-height: 32px; padding: 2px var(--space-2); font-size: 0.85rem; }

/* Sur le panneau navy, le mot-marque est blanc — `.brand-name` pose sinon la
   couleur du texte de la page, qui EST le navy. */
.auth-logo .brand-name { color: var(--text-invert); }

.auth-card { width: 100%; max-width: 380px; }
.auth-card h2 { font-size: 1.5rem; }

/* « ou avec votre adresse » : un trait, un mot, un trait. */
.auth-sep {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: var(--space-4) 0 0;
}
.auth-sep::before,
.auth-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

@media (max-width: 860px) {
  .auth { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth-brand { padding: var(--space-5); gap: var(--space-4); }
  .auth-claim { font-size: 1.5rem; }
  .auth-watermark { font-size: 120px; right: 12px; bottom: -16px; }
  .auth-panel { padding: var(--space-5) var(--space-4) var(--space-6); }
  .auth-locale { position: static; align-self: flex-end; margin-bottom: var(--space-4); }
}

.account-shell {
  display: flex;
  justify-content: center;
  padding-top: var(--space-4);
}

.account-card {
  width: 100%;
  max-width: 420px;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.account-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.account-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

.account-hint {
  margin: 0;
}

.account-message {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.account-message-error {
  background: var(--danger-soft);
  color: var(--danger);
}

.account-message-ok {
  background: var(--success-soft);
  color: var(--success);
}

/**
 * ECL-74 — la porte. Le bandeau d'invitation nomme l'espace AVANT la premiere
 * saisie ; le titre de porte fermee remplace le lien d'inscription. Couleurs
 * semantiques pour un ETAT, jamais la marque (ADR-0004).
 */
.account-invited {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-left: 3px solid var(--primary);
}

.account-invited p {
  margin: 0;
}

.account-invited-org {
  font-weight: 600;
}

.account-door-title {
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
  font-size: 1rem;
}

.account-google {
  margin-top: var(--space-3);
  text-align: center;
  text-decoration: none;
}

.account-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.account-link {
  font-size: 0.9rem;
}

.account-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0;
}

.account-facts dt {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.account-facts dd {
  margin: 0;
  font-weight: 500;
}

.account-card h3 {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}