/* ===================================================================
   Moby — Customer Login / Auth pages
   Shared tokens (colors, fonts, radii) live in _layout.css, loaded
   globally via _layout.html. This file is auth-page-specific only.
   =================================================================== */

.auth {
  min-height: 100vh;
  background: var(--paper);
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

@media (min-width: 900px) {
  .auth-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===================================================================
   Left visual panel — hidden on mobile, shown from tablet up
   =================================================================== */
.auth-visual {
  display: none;
  position: relative;
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--teal) 18%, transparent), transparent 55%),
    linear-gradient(160deg, #16384A 0%, #0E1F2D 70%);
  padding: 64px;
  align-items: center;
}

@media (min-width: 900px) {
  .auth-visual { display: flex; }
}

.auth-visual-content {
  max-width: 380px;
}

.auth-shield {
  width: 48px;
  height: 56px;
  color: var(--teal);
  margin-bottom: 32px;
}

.auth-visual-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 16px;
}

.auth-visual-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-on-dark);
  margin: 0;
}

/* ===================================================================
   Right form panel
   =================================================================== */
.auth-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 32px;
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
}

.auth-header { margin-bottom: 32px; }

.auth-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}

.auth-brand .brand-mark {
  width: 26px;
  height: 30px;
  color: var(--teal-deep);
}

.auth-brand .brand-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--ink);
}
.auth-brand .brand-word b { font-weight: 800; color: var(--teal-deep); }

.auth-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 6px;
}

.auth-header p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* ===================================================================
   Form — login-specific overrides (shared base is in _layout.css)
   =================================================================== */
.form-group {
  margin-bottom: 18px;
  position: relative; /* needed for password-toggle absolute positioning */
}

.form-control {
  background: var(--white); /* login uses white; app forms use --paper */
}

.password-field .form-control {
  padding-right: 42px;
}

.pw-wrap {
  position: relative;
}
.pw-wrap .form-control {
  padding-right: 42px;
}
.toggle-password {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.toggle-password:hover { color: var(--ink); }
.toggle-password:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* Strength meter — shared across login, reset, signup auth pages */
.strength-bar { height: 4px; border-radius: 2px; background: var(--mist, #e8e8e8); margin-top: 8px; overflow: hidden; }
.strength-fill { height: 100%; width: 0%; border-radius: 2px; transition: width 200ms ease, background 200ms ease; }
.strength-fill.weak   { width: 25%;  background: #D9534F; }
.strength-fill.fair   { width: 50%;  background: var(--amber, #f0a000); }
.strength-fill.good   { width: 75%;  background: #5BA3D9; }
.strength-fill.strong { width: 100%; background: var(--green, #2e7d32); }
.strength-text { display: block; margin-top: 5px; font-size: 11.5px; color: var(--text-secondary); }
.strength-text.weak   { color: #D9534F; }
.strength-text.fair   { color: var(--amber, #f0a000); }
.strength-text.good   { color: #4A90C2; }
.strength-text.strong { color: var(--green, #2e7d32); }
.match-text { display: block; margin-top: 6px; font-size: 11.5px; }
.match-text.match    { color: var(--green, #2e7d32); }
.match-text.no-match { color: #D9534F; }

.auth-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  font-size: 13px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  cursor: pointer;
}

.remember-me input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
  cursor: pointer;
}

.auth-options a {
  color: var(--teal-deep);
  font-weight: 600;
  text-decoration: none;
}
.auth-options a:hover { text-decoration: underline; }


/* ===================================================================
   Footer links
   =================================================================== */
.auth-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}

.auth-footer a {
  font-size: 12.5px;
  color: var(--text-secondary);
  text-decoration: none;
}
.auth-footer a:hover { color: var(--ink); text-decoration: underline; }