/* PWA Broker — login shell styles (mobile-first, dark-mode-aware).
 * Self-contained: no imports, no JS, no external fonts.
 * Designed for 320px (iPhone SE) → 4K desktop.
 */

:root {
  --login-bg: #f8fafc;
  --login-fg: #0f172a;
  --login-muted: #64748b;
  --login-border: #e2e8f0;
  --login-surface: #ffffff;
  --login-brand: #0f172a;
  --login-brand-fg: #ffffff;
  --login-accent: #0ea5e9;
  --login-error: #991b1b;
  --login-error-bg: #fef2f2;
  --login-error-border: #fecaca;
  --login-radius: 10px;
  --login-touch: 44px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --login-bg: #020617;
    --login-fg: #f8fafc;
    --login-muted: #94a3b8;
    --login-border: #1e293b;
    --login-surface: #0f172a;
    --login-brand: #0ea5e9;
    --login-brand-fg: #020617;
    --login-error-bg: #450a0a;
    --login-error-border: #7f1d1d;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  min-height: 100vh;
  background: var(--login-bg);
  color: var(--login-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 16px; /* iOS: prevents zoom on focus */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.login-shell {
  min-height: 100vh;
  /* Safe-area insets for notched phones in landscape */
  padding-top: var(--sat);
  padding-bottom: var(--sab);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: calc(1rem + var(--sal));
  padding-right: calc(1rem + var(--sar));
}

.login-card {
  max-width: 24rem;
  width: 100%;
  background: var(--login-surface);
  border: 1px solid var(--login-border);
  border-radius: var(--login-radius);
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.login-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  text-align: center;
  color: var(--login-fg);
}

.login-tagline {
  text-align: center;
  color: var(--login-muted);
  font-size: 0.875rem;
  margin: 0 0 1.5rem;
}

.login-error {
  color: var(--login-error);
  background: var(--login-error-bg);
  border: 1px solid var(--login-error-border);
  border-radius: 6px;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  margin: 0 0 1rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--login-muted);
}

.login-label input {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--login-border);
  border-radius: 6px;
  background: var(--login-surface);
  color: var(--login-fg);
  font: inherit;
  min-height: var(--login-touch);
  /* Disable iOS autocorrect overlays that break the form */
  -webkit-appearance: none;
  appearance: none;
}

.login-label input:focus {
  outline: none;
  border-color: var(--login-accent);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

.login-submit {
  margin-top: 0.5rem;
  min-height: var(--login-touch);
  padding: 0.625rem 1rem;
  background: var(--login-brand);
  color: var(--login-brand-fg);
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  touch-action: manipulation; /* Disable double-tap zoom on iOS */
}

.login-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.login-foot {
  margin: 1.5rem 0 0;
  font-size: 0.75rem;
  color: var(--login-muted);
  text-align: center;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}