/* =========================================================================
   Portal Login Page — styles (CSP-safe, no inline <style>).
   Loaded by portal.php. Visual matches the dark-themed card layout.

   Tokens reference JPH variables where available (so themes apply),
   with hardcoded fallbacks for the dark-only login surface.
   ========================================================================= */

/* Environment indicator (LOCAL sandbox only) — same as portal-extensions.css.
   Subtle purple-tint overlay applied to <body> when $is_local. Fixed-position
   ::before pseudo-element with rgba alpha so it composites over the dark
   portal background. Live Spaceship uses HTTPS so this rule never applies
   there. Adjust the alpha value (currently 0.06) to tune intensity. */
@media not print {
  body.is-local::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(140, 40, 180, 0.13);
    pointer-events: none;
    z-index: 9998;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  background: #0a0a0a;
  color: #d8d8d8;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.portal {
  width: 100%;
  max-width: 380px;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 2.5rem 2rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.portal .back {
  color: #8ecaff;
  text-decoration: none;
  font-size: 0.8rem;
  display: inline-block;
  margin-bottom: 1.5rem;
}

.portal .back:hover { text-decoration: underline; }

.portal h1 {
  font-weight: 300;
  font-size: 1.5rem;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.portal .sub {
  color: #888;
  font-size: 0.875rem;
  margin-bottom: 2rem;
}

.portal .authed {
  color: #8ecaff;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.portal .authed a {
  color: #8ecaff;
  text-decoration: none;
  margin-left: 8px;
}

.portal .authed a:hover { text-decoration: underline; }

.portal label {
  display: block;
  font-size: 0.8rem;
  color: #aaa;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.portal input[type="text"] {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 1rem;
}

.portal input[type="text"]:focus {
  outline: none;
  border-color: #8ecaff;
}

.portal input[type="text"]:focus-visible {
  outline: 2px solid #8ecaff;
  outline-offset: 2px;
}

.portal button {
  width: 100%;
  padding: 0.75rem;
  background: #8ecaff;
  color: #0a0a0a;
  border: none;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.portal button:hover { background: #a8d4ff; }

.portal button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.portal .error {
  color: #ff8e8e;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 142, 142, 0.08);
  border-radius: 3px;
}

.portal .footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #2a2a2a;
  font-size: 0.75rem;
  color: #555;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .portal {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }
}
