/* ===========================================================
   Auth Overlay — covers UX audit P0–P3 for /my/auth/* views
   Targets unscoped classes shared by Login/Register/Forgot/Reset
   =========================================================== */

/* Activated only when body has .auth-ov class (set by JS guard) */

/* --- P0: focus-visible rings (keyboard navigation) --- */
.auth-ov .btn-primary:focus-visible,
.auth-ov .forgot-link:focus-visible,
.auth-ov .auth-footer a:focus-visible,
.auth-ov .page-footer a:focus-visible,
.auth-ov .input-action:focus-visible {
  outline: 3px solid #10b981 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
.auth-ov .form-group input:focus-visible {
  outline: 3px solid #10b981 !important;
  outline-offset: 1px !important;
  border-color: #10b981 !important;
  box-shadow: none !important;
}

/* --- P1: subtitle contrast (#6b7280 -> #4B5563, contrast ≥4.5) --- */
.auth-ov .auth-subtitle {
  color: #4B5563 !important;
}
.auth-ov .auth-footer span,
.auth-ov .forgot-link {
  color: #4B5563 !important;
}
.auth-ov .form-group label {
  color: #1f2937 !important;
  font-weight: 600 !important;
}

/* --- P2: card visual depth --- */
.auth-ov .auth-card {
  border: 1px solid #e5e7eb !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.04) !important;
}

/* --- P2: spacing logo→form rhythm --- */
.auth-ov .auth-container > .auth-logo,
.auth-ov .auth-container > img:first-child {
  margin-bottom: 24px !important;
}
.auth-ov .auth-form {
  gap: 18px !important;
}

/* --- P2: "Forgot password" underline affordance --- */
.auth-ov .forgot-link {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}
.auth-ov .forgot-link:hover {
  color: #10b981 !important;
  text-decoration-thickness: 2px !important;
}

/* --- P2: footer position + auth links underline on hover --- */
.auth-ov .auth-footer a {
  color: #10b981 !important;
  font-weight: 600 !important;
}
.auth-ov .auth-footer a:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.auth-ov .page-footer {
  margin-top: 40px !important;
}
.auth-ov .page-footer a:hover {
  color: #10b981 !important;
  text-decoration: underline !important;
}

/* --- P0/P1: required asterisk + helper text --- */
.auth-ov .form-group label .req-mark {
  color: #dc2626;
  margin-left: 2px;
  font-weight: 700;
}
.auth-ov .ov-required-note {
  font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  color: #4B5563;
  margin: -8px 0 -4px;
}
.auth-ov .ov-required-note .req-mark {
  color: #dc2626;
  font-weight: 700;
}

/* --- P2: Remember me checkbox --- */
.auth-ov .ov-remember-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -6px;
  font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #1f2937;
}
[data-theme="dark"] .auth-ov .ov-remember-row,
[data-theme="dark"] .auth-ov .ov-remember-row label {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .auth-ov .ov-remember-row input[type="checkbox"] {
  accent-color: #16d129;
}
.auth-ov .ov-remember-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #10b981;
  cursor: pointer;
  margin: 0;
}
.auth-ov .ov-remember-row label {
  cursor: pointer;
  user-select: none;
  color: #1f2937;
  font-weight: 500;
}

/* --- P1: password strength meter --- */
.auth-ov .ov-pwd-meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: -10px;
}
.auth-ov .ov-pwd-meter-bars {
  display: flex;
  gap: 4px;
  height: 4px;
}
.auth-ov .ov-pwd-meter-bar {
  flex: 1;
  background: #e5e7eb;
  border-radius: 2px;
  transition: background 0.18s ease;
}
.auth-ov .ov-pwd-meter[data-score="1"] .ov-pwd-meter-bar:nth-child(-n+1),
.auth-ov .ov-pwd-meter[data-score="2"] .ov-pwd-meter-bar:nth-child(-n+2),
.auth-ov .ov-pwd-meter[data-score="3"] .ov-pwd-meter-bar:nth-child(-n+3),
.auth-ov .ov-pwd-meter[data-score="4"] .ov-pwd-meter-bar:nth-child(-n+4) {
  background: var(--ov-pwd-color, #10b981);
}
.auth-ov .ov-pwd-meter-label {
  font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  color: #4B5563;
  display: flex;
  justify-content: space-between;
}
.auth-ov .ov-pwd-meter-label strong {
  color: var(--ov-pwd-color, #4B5563);
}

/* --- P2: live password match indicator --- */
.auth-ov .ov-match-hint {
  font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  margin-top: -10px;
}
.auth-ov .ov-match-hint[data-state="ok"] {
  color: #10b981;
}
.auth-ov .ov-match-hint[data-state="no"] {
  color: #dc2626;
}

/* --- P3: hint texts ("Зачем нам это нужно") --- */
.auth-ov .ov-field-hint {
  font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
  line-height: 1.4;
}

/* --- P2: form-error icon-friendly --- */
.auth-ov .field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b91c1c !important;
  font-weight: 500;
}
.auth-ov .field-error::before {
  content: "⚠";
  font-size: 14px;
  line-height: 1;
}

/* --- Reduced motion safety --- */
@media (prefers-reduced-motion: reduce) {
  .auth-ov .ov-pwd-meter-bar,
  .auth-ov .btn-primary,
  .auth-ov .form-group input {
    transition: none !important;
  }
}