/* POST screen and the sign-in dialog that sits on the desktop.
   There is no page around the machine: the desktop is the whole product. */

:root {
  --led-on:   #64ff8c;
  --led-warm: #ffb03a;
}

/* ---------------- POST ---------------- */

#boot {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  color: #cfcfcf;
  font: 13px/1.55 "Courier New", Courier, monospace;
  padding: 26px 30px;
  overflow: hidden;
  cursor: pointer;
}

#boot .post-brand { color: #fff; font-weight: bold; }
#boot .post-dim   { color: #6f6f6f; }
#boot .post-ok    { color: var(--led-on); }
#boot .post-warm  { color: var(--led-warm); }
#boot pre { margin: 0; white-space: pre-wrap; }

#boot .post-skip {
  position: absolute;
  right: 30px;
  bottom: 24px;
  color: #5a5a5a;
  font-size: 12px;
}

#boot .scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 4px);
}

body.booting #lockScreen { visibility: hidden; }

/* ---------------- the login dialog, on the desktop ---------------- */

/* the machine fills the viewport and nothing lives outside it, so the page
   itself never scrolls no matter what a hidden container measures */
html, body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background: #05060a;
}

/* the desktop is always the backdrop, signed in or not, so this has to sit
   above #desktop (z-index 800). At 400 the shell painted straight over the
   dialog and #deskIcons swallowed every click on it. */
#lockScreen {
  position: fixed;
  inset: 0;
  z-index: 850;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 8, 20, .45);
}

#lockScreen .win-lock {
  width: 424px;
  max-width: calc(100vw - 24px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .7);
}

/* the machine identifies itself above the dialog, as a login banner would */
.login-brand {
  position: fixed;
  top: 22px; left: 0; right: 0;
  z-index: 851;
  text-align: center;
  pointer-events: none;
  font: bold 15px/1.5 "Pixelated MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: .14em;
  color: #dbe6ff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.login-brand small {
  display: block;
  font-weight: normal;
  font-size: 10px;
  letter-spacing: .18em;
  color: #93a6c7;
}

body:not(.locked) .login-brand { display: none; }

/* the List Manager is one app among the others now, not a landing page */
#app { display: none !important; }

/* desktop.css hides page-level containers whenever the desktop is on, which is
   now always. The login dialog is not page content: it belongs on the desktop,
   so it opts back in while the machine is locked. */
body.desktop-on.locked > #lockScreen {
  display: flex !important;
}

/* the machine is not usable until someone signs in, so the shell behind the
   dialog takes no clicks */
body.desktop-on.locked #desktop { pointer-events: none; }