/* login.css -- het inlogscherm, in EXACT de stijl van #gone (docs/studio-specs.md,
 * het herverbindscherm): volle-pagina scrim, groot icoon, een kopregel -- hier met een
 * formulier eronder in plaats van een pogingregel. Tokens uit core.css, geen eigen hex
 * (het icoon citeert de twee kleuren die #gone/de titelbalk ook al gebruiken).
 *
 * GEEN OVERLAY MEER SINDS S-0000-0383: login.js zet dit scherm rechtstreeks als de hele
 * document.body (index.html roept Studio.boot() niet aan zonder sessie, dus er is nooit
 * een #app of een #gone eronder om overheen te liggen) -- geen z-index-gevecht, geen
 * [hidden]-toggle, geen "loginlocked"-klasse meer nodig. */

#loginoverlay {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  background: var(--bg);
}
#loginoverlay svg { width: 96px; height: 96px; }
#loginoverlay h1 {
  font-size: calc(var(--ui-fs) * 24 / 13); font-weight: 600; margin: 16px 0 20px; color: var(--text-strong);
  text-align: center;
}

.loginform {
  display: flex; flex-direction: column; gap: 10px;
  width: 260px;
}
.loginform input {
  background: var(--surface); color: var(--text); border: 1px solid var(--rule);
  border-radius: 3px; padding: 8px 10px; font: inherit;
}
.loginform input:focus-visible { outline: 1px solid var(--focus); outline-offset: -1px; }
.loginbtn {
  background: var(--accent); color: var(--accent-tx); border-radius: 3px;
  padding: 8px 10px; font: inherit; font-weight: 600;
}
.loginbtn:hover { background: var(--accent-hi); }
.loginbtn:disabled { opacity: .6; }
.loginbtn:focus-visible { outline: 1px solid var(--focus); outline-offset: 2px; }

.loginerr {
  color: var(--danger-tx); font-size: calc(var(--ui-fs) * 13 / 13); margin: 0; text-align: center;
}
.loginerr[hidden] { display: none; }

/* "Forgot your password?" under the form, in a hosted studio (S-0000-0523) */
.loginlost { margin: 14px 0 0; font-size: 14px; text-align: center; }
.loginlost a { color: var(--text-dim); }
.loginlost a:hover { color: var(--text-strong); }