/* public/dashboard/styles/entry.css — L'HABILLAGE D'ENTRÉE.
   Connexion (#loginScreen de dashboard.html), inscription au Marché, acceptation d'invitation et nouveau mot de passe
   (<body class="w-entry">). Chaque règle vise l'un de ces écrans et rien d'autre : l'espace et la console n'en reçoivent
   aucune. Le préfixe `:root` donne à ses règles le pas sur le <style> de #loginScreen, lu après elle (dashboard.html), et
   sur components.css. Elle ne change que l'habillage : les formulaires, leurs champs, leurs messages et les mécanismes
   d'authentification restent ceux des pages.
   Tout vient des jetons de la peau de l'Atlas (tokens.css), jamais d'une couleur écrite : le papier et l'encre le jour,
   la nuit au choix gardé. Le rouge route n'appartient qu'au bouton principal ; coins de 2 à 3 px, traits de 1,5 px, ni
   ombre portée ni dégradé ; champs, boutons et liens d'au moins 44 px. */

/* La page publique : une carte centrée sur le papier. L'écran de connexion est déjà centré (dashboard.html). */
:root body.w-entry > main {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-5) var(--space-4);
}

/* La carte : un cartouche sur le papier, encadré à l'encre. */
:root #loginScreen .card,
:root body.w-entry .card,
:root body.w-entry .ui-card {
  width: 100%; max-width: 400px; margin: 0; padding: var(--space-5);
  background: var(--panel); color: var(--text);
  border: var(--line) solid var(--rule); border-radius: var(--radius); box-shadow: none;
}
/* Ses étapes se lisent en colonne, du même pas que le formulaire de connexion. */
:root body.w-entry .card > div,
:root body.w-entry .ui-card > div { display: flex; flex-direction: column; gap: var(--space-3); }

/* La marque, puis le titre. Sur la connexion, le titre est la marque ; ailleurs elle le précède. */
:root body.w-entry .card::before,
:root body.w-entry .ui-card::before {
  content: "Who's Deal"; display: block; margin-bottom: var(--space-2);
  font-size: var(--font-2); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
:root #loginScreen h1,
:root body.w-entry h1 {
  margin: 0 0 var(--space-4); padding-bottom: var(--space-3);
  border-bottom: var(--line) solid var(--rule);
  color: var(--text); font-weight: 800; line-height: 1.15;
}
:root #loginScreen h1 { font-size: var(--font-6); letter-spacing: .12em; text-transform: uppercase; }
:root body.w-entry h1 { font-size: var(--font-5); letter-spacing: 0; text-transform: none; }

:root #loginScreen .sub,
:root body.w-entry .sub,
:root body.w-entry p { margin: 0; font-size: var(--font-3); overflow-wrap: anywhere; }
:root #loginScreen .sub,
:root body.w-entry .sub { color: var(--muted); }
/* Ce que dit l'invitation (l'espace, le rôle, l'adresse) précède le formulaire, qui est l'étape suivante de la carte. */
:root body.w-entry #inviteFacts { margin-bottom: var(--space-3); }
/* Une clé à recopier, des codes à noter : à chasse fixe, en encre. */
:root #loginScreen #mfaEnrollSecret,
:root #loginScreen #mfaRecoveryCodesList { color: var(--text); font-family: var(--font-mono); letter-spacing: .06em; }

/* Les champs : le papier dans le cartouche, un trait de 1,5 px qui tient 3:1, un focus à l'encre. */
:root body.w-entry .ui-field { gap: var(--space-2); color: var(--text); font-size: var(--font-3); font-weight: 700; }
:root #loginScreen input,
:root body.w-entry input {
  width: 100%; min-height: var(--target-min); margin: 0; padding: var(--space-2) var(--space-3);
  background: var(--bg); color: var(--text);
  border: var(--line) solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--font-4); font-weight: 400;
}
:root #loginScreen input::placeholder,
:root body.w-entry input::placeholder { color: var(--muted); opacity: 1; }
:root #loginScreen input:focus,
:root body.w-entry input:focus { outline: 2px solid var(--text); outline-offset: 2px; border-color: var(--text); }

/* Le bouton principal : le seul rouge de la page, une étape après l'autre. */
:root #loginScreen button,
:root body.w-entry button {
  width: 100%; min-height: var(--target-min); margin: 0; padding: var(--space-2) var(--space-4);
  background: var(--brand-solid); color: var(--on-brand);
  border: var(--line) solid var(--brand-solid); border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--font-4); font-weight: 700; cursor: pointer;
}
:root #loginScreen button:hover:not(:disabled),
:root body.w-entry button:hover:not(:disabled) { filter: brightness(1.08); }
:root #loginScreen button:disabled,
:root body.w-entry button:disabled { opacity: .6; cursor: not-allowed; }
:root #loginScreen button:focus-visible,
:root body.w-entry button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Les liens : à l'encre et soulignés, jamais la couleur seule ; dans une colonne ils gardent la largeur de leur texte
   (l'anneau de focus ne cerne pas toute la ligne). Ceux de la connexion se rangent à droite. */
:root #loginScreen a,
:root body.w-entry a {
  display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--target-min);
  color: var(--text); font-size: var(--font-3); text-decoration: underline; text-underline-offset: 3px;
}
:root #loginScreen a { align-self: flex-end; }
:root #loginScreen a:focus-visible,
:root body.w-entry a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Les messages gardent leur place : rien ne saute quand ils arrivent. La couleur vient de la page (--bad, --muted). */
:root #loginScreen .login-msg,
:root body.w-entry #msg { min-height: 1.4em; margin: 0; font-size: var(--font-2); overflow-wrap: anywhere; }

/* Le QR de l'activation MFA tient dans la carte jusqu'à 320 px (le SVG a son viewBox). */
:root #loginScreen #mfaEnrollQr svg { max-width: 100%; height: auto; }