/* web.css — browser adaptations layered on top of styles.css.
 *
 * The Electron build renders as a transparent, click-through overlay over the
 * desktop (styles.css sets html,body { background: transparent }). Served as a
 * normal web page there is no desktop behind it, so we paint an opaque app
 * background in Milo's palette and make the sign-in card / dock / sidebar usable
 * on a plain scrolling page. Everything here is small and scoped; load AFTER
 * styles.css so these win. */

/* Deep-space app background — very dark base with faint nebula glows in the Milo
   purple/blue palette, so the 3D starfield (starfield.js, on #starfield above this)
   reads crisply. Replaces the transparent overlay backdrop of the Electron build. */
html, body {
  background:
    radial-gradient(1200px 820px at 80% -10%, color-mix(in srgb, var(--milo-purple) 16%, transparent) 0%, transparent 62%),
    radial-gradient(1000px 720px at 8% 112%, color-mix(in srgb, var(--milo-blue) 14%, transparent) 0%, transparent 60%),
    linear-gradient(165deg, #070810 0%, #05060b 50%, #04050a 100%);
  background-attachment: fixed;
  background-color: #05060a; /* fallback under the gradients */
}

/* 3D parallax starfield canvas — fixed, non-interactive, behind all app content
   (sign-in 80, sidebar 30, dock 50, wake HUD 55 all sit above z-index 0). */
#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* The page is a real document now, not a fixed-size overlay: let it use the full
   viewport and allow the sidebar/panels to scroll instead of being clipped. */
body {
  min-height: 100vh;
  height: auto;
  overflow: auto;
}

/* The sign-in layer is pointer-events:none in the overlay (clicks fall through to
   the desktop); on a web page there is nothing behind it, so make the whole layer
   interactive and keep the card centered in the viewport. */
.signin { pointer-events: auto; min-height: 100vh; }

/* Window-quit "X" on the sign-in card is meaningless in a browser tab (win.close
   is a no-op). Hide it. #sbQuit (sidebar) is left visible — it only hides the
   sidebar, which is still useful. */
#signinQuit { display: none !important; }

/* Email login block (browser only): shown by app.js when __MILO_WEB__. Match the
   sign-in card's button rhythm. */
#webLogin { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
#webLogin input {
  width: 100%;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
#webLogin input::placeholder { color: var(--muted); }
#webLogin input:focus {
  border-color: color-mix(in srgb, var(--glow) 60%, transparent);
  background: rgba(255, 255, 255, 0.07);
}