/* v166 — formal account authentication and session states. */

.account-modal-card {
  width: min(640px, calc(100vw - 32px));
  max-width: 640px;
  max-height: min(860px, calc(100vh - 32px));
  overflow-y: auto;
}

.account-auth-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 18px 0 4px;
  padding: 5px;
  border: 1px solid #dfe6f1;
  border-radius: 14px;
  background: #f2f5fa;
}

.account-auth-mode button {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #66748a;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.account-auth-mode button[aria-selected="true"] {
  background: #fff;
  color: #1f5fd4;
  box-shadow: 0 5px 16px rgba(34, 76, 143, 0.11);
}

.account-modal-card[data-auth-mode="login"] [data-account-register-field],
.account-modal-card[data-auth-mode="login"] #accountGuestMigrationOption,
.account-modal-card[data-auth-mode="login"] [data-account-verification-field],
.account-modal-card[data-auth-mode="reset"] [data-account-register-field],
.account-modal-card[data-auth-mode="reset"] #accountGuestMigrationOption,
.account-modal-card[data-auth-mode="reset"] #accountSavedProfiles {
  display: none !important;
}

.account-modal-card[data-auth-mode="login"] .account-modal-grid {
  grid-template-columns: minmax(0, 1fr);
}

.account-modal-card[data-auth-mode="reset"] .account-modal-grid {
  grid-template-columns: minmax(0, 1fr);
}

.account-verification-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.account-verification-input-row #accountSendVerificationBtn {
  min-width: 116px;
  min-height: 48px;
  padding-inline: 14px;
  white-space: nowrap;
}

.account-verification-input-row #accountSendVerificationBtn:disabled {
  cursor: wait;
  opacity: 0.64;
}

.account-modal-grid input[autocomplete="username"],
.account-modal-grid input[type="password"] {
  min-height: 48px;
}

#accountModal .account-password-field { display: grid; gap: 8px; min-width: 0; }
#accountModal .account-password-input-row { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
#accountModal .account-password-input-row input { flex: 1; width: 0; min-width: 0; }
#accountModal #accountPasswordToggle { flex: 0 0 auto; min-width: 60px; padding: 8px 12px; }
#accountModal #accountForm .account-password-error { margin: 0; color: #b42318 !important; font-size: 14px; }
#accountModal .account-password-error[hidden] { display: none; }
html[data-theme="dark"] #accountModal #accountForm .account-password-error { color: #ff9b90 !important; }

.account-form-status[data-tone="warn"] {
  border-color: rgba(220, 38, 38, 0.18);
  background: rgba(254, 242, 242, 0.96);
  color: #b42318;
}

.account-form-status[data-tone="good"] {
  border-color: rgba(5, 150, 105, 0.18);
  background: rgba(236, 253, 245, 0.96);
  color: #047857;
}

.account-modal-card .form-actions {
  position: sticky;
  bottom: -1px;
  z-index: 2;
  margin-top: 16px;
  padding-top: 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 18px);
}

body[data-account-state="local-profile"] .sidebar-account-card {
  border-color: rgba(245, 158, 11, 0.24) !important;
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(255, 247, 237, 0.98)) !important;
}

html[data-theme="dark"] .account-auth-mode {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.72);
}

html[data-theme="dark"] .account-auth-mode button {
  color: #94a3b8;
}

html[data-theme="dark"] .account-auth-mode button[aria-selected="true"] {
  background: rgba(51, 65, 85, 0.96);
  color: #bfdbfe;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.28);
}

html[data-theme="dark"] .account-form-status[data-tone="warn"] {
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(127, 29, 29, 0.22);
  color: #fecaca;
}

html[data-theme="dark"] .account-form-status[data-tone="good"] {
  border-color: rgba(52, 211, 153, 0.22);
  background: rgba(6, 78, 59, 0.24);
  color: #a7f3d0;
}

html[data-theme="dark"] .account-modal-card .form-actions {
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0), #101827 18px);
}

@media (max-width: 620px) {
  .account-modal-card {
    width: min(100%, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
  }

  .account-modal-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-modal-grid .full {
    grid-column: auto;
  }

  .account-auth-mode {
    grid-template-columns: minmax(0, 1fr);
  }
}