/* 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 #0000-0799: 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; }   /* the lock only: not the QR code of the set-up page that sits inside it */
#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 (#0000-0976) */
.loginlost { margin: 14px 0 0; font-size: 14px; text-align: center; }
.loginlost a { color: var(--text-dim); }
.loginlost a:hover { color: var(--text-strong); }

/* #0000-1039: the second step of the sign-in (two-step verification), in the same form */
.logincode-note { margin: 0; font-size: calc(var(--ui-fs) * 13 / 13); color: var(--text); text-align: center; line-height: 1.4; }
.logincode-note[hidden], .loginform input[hidden], .logincode-mail[hidden] { display: none; }
.loginform input[readonly] { opacity: .65; }
.logincode-mail { background: none; color: var(--text-dim); border: 0; padding: 2px; font: inherit; text-decoration: underline; cursor: pointer; }
.logincode-mail:hover { color: var(--text-strong); }

/* ---- on a phone (#0000-1408): the same screen, made usable with a thumb. A narrow screen (the width the
 * phone view starts at) gets: the form as wide as the screen allows, fields and buttons of 48 px, and
 * text of 17 px in the fields (smaller and a phone zooms in on focus). Nothing scrolls sideways; a tall
 * screen (the set-up page) scrolls itself. Desktop is untouched. */
@media (max-width: 700px), (pointer: coarse) and (max-width: 900px) {
  #loginoverlay {
    box-sizing: border-box; padding: 20px 16px; overflow-x: hidden; overflow-y: auto;
    justify-content: safe center; -webkit-overflow-scrolling: touch;
  }
  #loginoverlay h1 { font-size: 22px; margin: 12px 0 16px; overflow-wrap: anywhere; }
  .loginform { width: 100%; max-width: 360px; }
  .loginform input { min-height: 48px; box-sizing: border-box; padding: 10px 12px; font-size: 17px; border-radius: 6px; }
  .loginbtn { min-height: 48px; font-size: 17px; border-radius: 6px; }
  .logincode-note { font-size: 16px; }
  .logincode-mail { min-height: 44px; padding: 0 12px; font-size: 16px; }
  .loginerr { font-size: 16px; }
  .loginlost a { display: inline-block; padding: 13px 8px; font-size: 16px; }
}