/* ---------- LOGIN SCREEN ---------- */
.login-screen{
  position:fixed; inset:0; z-index:80; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 28px; text-align:center;
}
.login-screen.hidden{display:none;}
.login-logo{width:56px; height:56px; border-radius:50%; background:var(--surface); border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.login-logo svg{width:28px; height:28px;}
.login-title{font-family:'Fraunces',serif; font-size:24px; font-weight:600; font-style:italic; margin:0 0 4px;}
.login-tag{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 34px;}
.login-pitch{font-size:13.5px; color:var(--ink-soft); line-height:1.55; max-width:280px; margin:0 0 34px;}

.google-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:300px;
  background:#fff; color:#1f1f1f; border:1px solid #dadce0; border-radius:999px; padding:12px 18px;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.08); transition:box-shadow .15s, background .15s;
}
.google-btn:hover{box-shadow:0 2px 6px rgba(0,0,0,.14); background:#f8f8f8;}
.google-btn:disabled{opacity:.7; cursor:default;}
.google-btn svg{width:18px; height:18px; flex-shrink:0;}

#appRoot.hidden{display:none;}

/* Au chargement (surtout après un « tirer pour rafraîchir »), la session Supabase
   met un instant à être relue : sans ça, l'écran de connexion s'affichait le temps
   de la vérification, donnant l'impression d'avoir été déconnecté. On garde le
   logo mais on masque l'appel à l'action tant qu'on ne sait pas. */
body.booting .login-pitch,
body.booting .google-btn{visibility:hidden;}
body.booting .login-screen::after{
  content:''; width:20px; height:20px; margin-top:6px; border-radius:50%;
  border:2px solid var(--border); border-top-color:var(--ink-soft);
  animation:bootSpin .7s linear infinite;
}
@keyframes bootSpin{to{transform:rotate(360deg);}}