/* Build 681: a clear, calm email-verification handoff. */

html body .auth-card.verify-mode .auth-verification-panel {
  max-height: min(720px, calc(100dvh - 148px)) !important;
  gap: 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
}

html body .auth-verification-steps {
  display: grid !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 7px !important;
  list-style: none !important;
}

html body .auth-verification-steps > li {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  min-width: 0 !important;
  padding: 9px 10px !important;
  align-items: start !important;
  gap: 9px !important;
  border: 1px solid rgba(11, 117, 111, 0.1) !important;
  border-radius: 13px !important;
  color: #234f57 !important;
  background: rgba(247, 252, 249, 0.82) !important;
}

html body .auth-verification-steps > li > span {
  display: grid !important;
  width: 27px !important;
  height: 27px !important;
  place-items: center !important;
  border: 1px solid rgba(11, 133, 121, 0.18) !important;
  border-radius: 50% !important;
  color: #08756c !important;
  background: rgba(222, 246, 237, 0.94) !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

html body .auth-verification-steps p {
  display: grid !important;
  min-width: 0 !important;
  margin: 0 !important;
  gap: 2px !important;
}

html body .auth-verification-steps strong {
  color: #123f49 !important;
  font-size: 0.76rem !important;
  font-weight: 820 !important;
  line-height: 1.25 !important;
}

html body .auth-verification-steps small {
  color: #55767b !important;
  font-size: 0.68rem !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
}

html body .auth-verification-troubleshooting {
  margin: 0 !important;
  border: 1px solid rgba(213, 153, 51, 0.18) !important;
  border-radius: 13px !important;
  color: #244f57 !important;
  background: rgba(255, 248, 226, 0.64) !important;
}

html body .auth-verification-troubleshooting > summary {
  display: flex !important;
  min-height: 44px !important;
  padding: 9px 12px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  cursor: pointer !important;
  color: #315e63 !important;
  font-size: 0.72rem !important;
  font-weight: 790 !important;
  list-style: none !important;
}

html body .auth-verification-troubleshooting > summary::-webkit-details-marker {
  display: none !important;
}

html body .auth-verification-troubleshooting > summary::after {
  content: "+" !important;
  color: #9b6a20 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

html body .auth-verification-troubleshooting[open] > summary::after {
  content: "−" !important;
}

html body .auth-verification-troubleshooting > div {
  display: grid !important;
  padding: 0 12px 12px !important;
  gap: 8px !important;
}

html body .auth-verification-troubleshooting p {
  margin: 0 !important;
  color: #526f72 !important;
  font-size: 0.69rem !important;
  font-weight: 620 !important;
  line-height: 1.45 !important;
}

html body .auth-verification-troubleshooting p strong {
  color: #244f57 !important;
}

html body .auth-verification-auto-status {
  display: flex !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 6px 9px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 999px !important;
  color: #456d71 !important;
  background: rgba(226, 247, 239, 0.76) !important;
  font-size: 0.67rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

html body .auth-verification-auto-status > span {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  border-radius: 50% !important;
  background: #22aa82 !important;
  box-shadow: 0 0 0 4px rgba(34, 170, 130, 0.11) !important;
}

html body .auth-verification-actions .auth-text-button {
  min-height: 44px !important;
}

html body .auth-verification-actions {
  flex-wrap: wrap;
}

html body .auth-gate .auth-verification-actions .auth-delete-unverified-account {
  flex: 1 0 100%;
  color: #9f3f45 !important;
  font-size: 0.7rem;
  font-weight: 760;
}

@media (max-width: 760px) {
  html body .auth-card.verify-mode .auth-verification-panel {
    max-height: calc(100dvh - 122px) !important;
    padding: 16px !important;
    gap: 10px !important;
  }

  html body .auth-verification-steps {
    gap: 6px !important;
  }

  html body .auth-verification-steps > li {
    padding: 8px 9px !important;
  }
}

@media (max-width: 390px) {
  html body .auth-verification-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .auth-verification-panel *,
  html body .auth-verification-panel *::before,
  html body .auth-verification-panel *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}