body[data-auth-restoring] .screen.active,
body[data-auth-restoring] .brand-bar button {
  visibility: hidden;
}

body:not([data-auth-restoring]) #auth-loading {
  display: none;
}

#auth-loading {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 48px 28px;
  text-align: center;
}

#auth-loading-message {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Hidden as soon as Retry appears: the attempt has settled or is slow. */
.auth-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--line);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: auth-spin .8s linear infinite;
}

#auth-loading:has(#auth-retry:not([hidden])) .auth-spinner {
  display: none;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

#passcode-recovery-form[hidden],
.passcode-setup-form[hidden],
.passcode-setup-form label[hidden] {
  display: none;
}

#passcode-recovery-form {
  margin-top: 18px;
}

#passcode-recovery-open {
  display: block;
  margin: 16px 0 0 auto;
}

.passcode-setup-form {
  margin-top: 12px;
}

[data-passcode-input] {
  letter-spacing: .4em;
}

/* Eye / eye-off control that shows or hides the passcode digits. */
.passcode-toggle {
  position: absolute;
  right: 6px;
  top: 7px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--green);
  cursor: pointer;
}

.passcode-toggle svg {
  width: 22px;
  height: 22px;
}

.passcode-toggle:focus-visible {
  outline: 3px solid rgba(23, 107, 77, .25);
  outline-offset: 1px;
}

.passcode-wrap input {
  padding-right: 56px;
}

/* Account deletion: Settings confirmation and the deletion/recovery screen. */
.delete-account-button {
  margin-top: 10px;
  width: 100%;
  background: transparent;
  border: 1px dashed #e0c8c4;
  color: var(--danger);
}
.delete-account-confirm {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid #e0c8c4;
  border-radius: 18px;
  background: #fff;
  padding: 16px;
}
.delete-account-confirm[hidden],
#account-deletion [data-deletion-state][hidden] { display: none; }
.delete-account-confirm h3 { margin: 0; font: 800 17px/1.2 "Manrope", sans-serif; color: var(--danger); }
.delete-account-confirm ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.delete-account-confirm .confirm-check { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; font-weight: 700; color: var(--ink); }
.delete-account-confirm .confirm-check input { width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; flex: none; }
.delete-account-confirm .button { width: 100%; }
#account-deletion .deletion-notice { margin: 12px 0; border-radius: 14px; background: #edf2eb; padding: 14px 16px; color: var(--ink); font-size: 13px; line-height: 1.6; }
#account-deletion .deletion-date { color: var(--muted); font-size: 13px; }
#account-deletion .deletion-date strong,
#account-deletion [data-deletion-date] { color: var(--ink); }
#account-deletion .deletion-steps { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px 16px; font-size: 12px; }
#account-deletion .deletion-steps ol { margin: 8px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.7; }
#account-deletion .deletion-sent { min-height: 1em; color: var(--muted); font-size: 12px; }
#account-deletion form { display: grid; gap: 12px; }
#account-deletion h2 { font-size: clamp(24px, 6vw, 30px); }

#auth-sign-in-again {
  font-size: 13px;
  padding: 6px 4px;
}

.form-message.info {
  background: #e5ebe4;
  color: #59685f;
}

.optional-label {
  font-weight: 400;
  color: #59685f;
}

#confirm-email-copy strong {
  overflow-wrap: anywhere;
}