/*
 * app-login.css — full-page login splash for the app subdomain.
 *
 * Replaces the modal-style auth UI from the apex-root site. The splash
 * fills the viewport on entry whenever no user is signed in; once
 * authenticated, it slides out of view and the normal page chrome
 * (header + .page sections) takes over.
 *
 * Styling follows the desktop-site conventions established in
 * styles.css: bar-style buttons (top + bottom border, no fill,
 * accent-on-hover), underline-only inputs (no boxed fields), and the
 * same green-on-black palette. Dimensions assume a wide viewport — the
 * Flutter Web app at mobile.apexballistics.com handles narrow phones
 * separately.
 */

.app-login-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  background:
    radial-gradient(circle at top, rgba(74, 222, 128, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(15, 22, 18, 1), rgba(8, 12, 10, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  overflow-y: auto;
}

.app-login-splash[hidden] {
  display: none;
}

body.app-login-splash-active {
  overflow: hidden;
}

.app-login-card {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.app-login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 0.5rem;
}

.app-login-mark {
  width: clamp(140px, 18vw, 220px);
  height: auto;
  filter: drop-shadow(0 0 24px rgba(74, 222, 128, 0.18));
}

.app-login-wordmark {
  font-family: 'Barlow Condensed', 'Manrope', system-ui, sans-serif;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ffffff;
  text-transform: uppercase;
  text-align: center;
}

.app-login-rule {
  border: 0;
  border-top: 1px solid rgba(143, 156, 149, 0.30);
  margin: 0;
}

.app-login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 0.25rem;
}

.app-login-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Underline-only input style — no fill, no full border, just a bottom
 * line that brightens on focus. Matches the Flutter app's
 * UnderlineInputBorder + the desktop site's recent input redesign. */
.app-login-input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(143, 156, 149, 0.45);
  padding: 0.75rem 0.25rem;
  color: #ffffff;
  font-size: 1.05rem;
  font-family: inherit;
  width: 100%;
  outline: none;
  transition: border-color 0.18s ease, color 0.18s ease;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.app-login-input::placeholder {
  color: rgba(255, 255, 255, 0.42);
  font-weight: 400;
}

.app-login-input:hover {
  border-bottom-color: rgba(143, 156, 149, 0.7);
}

.app-login-input:focus {
  border-bottom-color: #4ade80;
}

.app-login-input:-webkit-autofill {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

.app-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.app-login-link {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: color 0.18s ease;
}

.app-login-link:hover,
.app-login-link:focus-visible {
  color: #4ade80;
  outline: none;
}

/* "Back to apexballistics.com" — the way OUT of the app from the login
   splash (which is a full-screen overlay, so the page header's Home
   link is hidden behind it). Quiet centered text link under the form. */
.app-login-home {
  display: block;
  text-align: center;
  margin-top: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 0.18s ease;
}
.app-login-home:hover,
.app-login-home:focus-visible {
  color: #4ade80;
  outline: none;
}

/* Stay-Signed-In toggle. Visual-only at the moment — Supabase
 * persists sessions in localStorage by default. Hooked to a
 * localStorage flag (`apex_app_stay_signed_in`) that read paths can
 * consult later when we add a session-only mode. */
.app-login-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  user-select: none;
}

.app-login-toggle-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.app-login-toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
  background: rgba(143, 156, 149, 0.32);
  border: 1px solid rgba(143, 156, 149, 0.45);
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.app-login-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}

.app-login-toggle-switch[aria-pressed="true"] {
  background: rgba(74, 222, 128, 0.35);
  border-color: rgba(74, 222, 128, 0.65);
}

.app-login-toggle-switch[aria-pressed="true"]::after {
  background: #4ade80;
  transform: translateX(24px);
}

.app-login-toggle-switch:focus-visible {
  outline: 2px solid #4ade80;
  outline-offset: 3px;
}

.app-login-status {
  min-height: 1.4em;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.app-login-status[data-state="error"] {
  color: #ff8a8a;
}

.app-login-status[data-state="success"] {
  color: #4ade80;
}

.app-login-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
}

/* Bar-style action buttons matching the rest of the site:
 * top + bottom border separators, no fill at rest, accent on hover.
 * `.app-login-primary` is the green-text variant for the headline
 * action; `.app-login-secondary` is the muted variant. */
.app-login-action {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(143, 156, 149, 0.30);
  border-bottom: 1px solid rgba(143, 156, 149, 0.30);
  padding: 1rem 1.5rem;
  font: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  width: 100%;
}

.app-login-primary {
  color: #4ade80;
}

.app-login-primary:hover,
.app-login-primary:focus-visible {
  color: #c7f7df;
  border-top-color: rgba(74, 222, 128, 0.7);
  border-bottom-color: rgba(74, 222, 128, 0.7);
  outline: none;
}

.app-login-secondary {
  color: #ffffff;
}

.app-login-secondary:hover,
.app-login-secondary:focus-visible {
  color: #4ade80;
  border-top-color: rgba(74, 222, 128, 0.7);
  border-bottom-color: rgba(74, 222, 128, 0.7);
  outline: none;
}

.app-login-action:active {
  transform: translateY(1px);
}

/* Small-viewport adjustments (the mobile redirect catches phones, but
 * tablets and narrow desktops still hit this surface). */
@media (max-width: 640px) {
  .app-login-splash {
    padding: 1.5rem 1rem;
  }
  .app-login-card {
    gap: 1.25rem;
  }
  .app-login-form {
    gap: 1.15rem;
  }
  .app-login-row {
    gap: 0.75rem;
  }
  .app-login-action {
    padding: 0.85rem 1rem;
    font-size: 1rem;
  }
}

/* ─── Compact app-shell header ─────────────────────────────────────
 *
 * The marketing site at apexballistics.com keeps the larger header
 * with the 104px tall logo, gradient wordmark, and 2-row title block
 * stacked above the nav. The app subdomain inverts that priority —
 * the workflow surface is the page, the brand is just an anchor —
 * so we collapse the entire header into a single ~52px ribbon:
 *
 *   [white A logo]  APEX BALLISTICS  [Workflow] [Session] [Solver]      [Settings] [Account] [Logout]
 *
 * Logo, wordmark, nav, and account utilities all sit on one row
 * (no wrap on desktop), each scaled down. Drops the subtitle and
 * the gradient bar entirely. Login / Sign Up buttons aren't in the
 * markup at all on this shell — the full-page splash handles unauth
 * entry, so the only auth control needed in-header is Logout.
 *
 * Scoped to `body.app-shell` so the rules don't leak to the
 * marketing pages, which share `styles.css` with the app folder.
 */
body.app-shell .site-header-shell {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
}

body.app-shell .site-header::before,
body.app-shell .site-header::after {
  display: none !important;
}

body.app-shell .site-header-logo {
  flex-shrink: 0;
}

body.app-shell .site-header-mark {
  height: 36px !important;
}

body.app-shell .site-header-main {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0 !important;
}

body.app-shell .site-header-text {
  flex-shrink: 0;
  gap: 0 !important;
}

body.app-shell .site-header-title {
  font-size: 1rem !important;
  letter-spacing: 0.16em !important;
  line-height: 1 !important;
  white-space: nowrap;
  text-shadow: none !important;
}

body.app-shell .site-header-subtitle {
  display: none !important;
}

body.app-shell .site-header-nav {
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.3rem !important;
  margin-top: 0 !important;
  flex-wrap: wrap;
}

body.app-shell .site-header-nav .nav-link {
  font-size: 0.82rem !important;
  padding: 0.38rem 0.75rem !important;
  white-space: nowrap;
}

body.app-shell .site-header-actions {
  flex-shrink: 0;
  gap: 0.4rem !important;
  margin-top: 0 !important;
}

body.app-shell .site-header-actions .btn-secondary {
  font-size: 0.82rem !important;
  padding: 0.38rem 0.75rem !important;
  white-space: nowrap;
}

/* Tighter margin between the (now slim) header and the first page
 * section. The default `space-y-6` margin assumes a tall header
 * separates content from the chrome — with the slim ribbon the
 * gap looks oversized. Pull the page content up. */
body.app-shell main {
  padding-top: 0;
}

/* ─── App-shell page background ───────────────────────────────────
 *
 * Single source of truth for the dashboard slate-blue background
 * shared across every authenticated app-shell page (workflow,
 * active session, ballistic solver / V2 dashboard, my account).
 * Login splashes (.app-login-splash) and the marketing home page
 * keep their own treatments — those pages don't carry
 * `body.app-shell`, so this rule doesn't reach them.
 *
 * Color values mirror the V2 dashboard's slate palette
 * (solver-v2.css --solver-v2-bg-* variables) inlined here so the
 * rule works on pages that don't load solver-v2.css.
 *
 * Layered background:
 *   1. Off-axis cool-blue glow (top-left) — subtle depth.
 *   2. Off-axis cool-blue glow (top-right) — same.
 *   3. Faint vertical line grid — dashboard texture (96px col).
 *   4. Radial slate base — bright at top, deep at bottom.
 *
 * background-attachment: fixed keeps the gradient stationary as
 * the page scrolls, matching the V2 dashboard treatment.
 * ──────────────────────────────────────────────────────────────── */
body.app-shell {
  background-color: #11161e;
  background-image:
    radial-gradient(circle at 18% -10%, rgba(80, 120, 180, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 82% 14%, rgba(60, 90, 140, 0.08) 0%, transparent 50%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, #1c2530 0%, #11161e 38%, #0a0d12 100%);
  background-size: 100% 100%, 100% 100%, 96px 100%, 100% 100%;
  background-attachment: fixed;
}

/* ─── Password show/hide toggle ─────────────────────────────────────
 * Eye-icon button anchored to the right edge of every password input
 * across the app — splash login form (`#appLoginPassword`) AND the
 * legacy auth modal (`#authPassword`, `#authConfirmPassword`). HTML
 * wraps the input + button in `.password-input-wrap`; the JS handler
 * lives in `app-login.js` (window.apexTogglePassword). The
 * `is-showing` class on the button drives the eye/eye-off SVG swap.
 * ──────────────────────────────────────────────────────────────── */
.password-input-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.password-input-wrap > input {
  /* Reserve room on the right edge so typed characters don't slide
   * underneath the toggle button. 2.6rem fits the 1.15rem icon plus
   * its 0.3rem button padding plus 0.4rem from the field edge. */
  padding-right: 2.6rem;
  width: 100%;
  box-sizing: border-box;
}
.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 0.3rem;
  margin: 0;
  cursor: pointer;
  color: rgba(232, 240, 248, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 4px;
}
.password-toggle-btn:hover {
  color: rgba(232, 240, 248, 0.95);
}
.password-toggle-btn:focus-visible {
  color: rgba(232, 240, 248, 0.95);
  outline: 1px solid rgba(74, 222, 128, 0.6);
  outline-offset: 1px;
}
.password-toggle-btn .eye-icon {
  width: 1.15rem;
  height: 1.15rem;
  display: inline-block;
}
.password-toggle-btn .eye-icon--hide { display: none; }
.password-toggle-btn.is-showing .eye-icon--show { display: none; }
.password-toggle-btn.is-showing .eye-icon--hide { display: inline-block; }