/* Login page only — keep superbloom background out of app-shell.css so map pages
   do not fetch this image while waiting for window "load". */
html:has(body.app-login) {
  height: 100%;
  height: -webkit-fill-available;
  height: 100svh;
  overflow: hidden;
}
body.app-login {
  margin: 0;
  height: 100%;
  height: -webkit-fill-available;
  height: 100svh;
  min-height: 100%;
  min-height: -webkit-fill-available;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: url("../img/superbloom-image.jpg") center center / cover no-repeat;
}
@media (orientation: landscape) and (min-width: 768px) {
  body.app-login {
    background-position: center bottom;
  }
}
body.app-login .login-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding: 0 1rem;
  box-sizing: border-box;
}
body.app-login .login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  padding: 2rem;
  box-sizing: border-box;
  border-radius: 8px;
}
body.app-login .login-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto 1.5rem;
}
body.app-login h1.font-title {
  font-family: 'Archivo Black', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(0.875rem, 3.6vw, 1.5rem) !important;
  white-space: nowrap !important;
  color: #fff !important;
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}
body.app-login .login-brand-icon {
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  color: #fff;
  background-color: currentColor;
  pointer-events: none;
  mask: url('../img/superbloom-logo-blank-black.png') center / contain no-repeat;
  -webkit-mask: url('../img/superbloom-logo-blank-black.png') center / contain no-repeat;
}
body.app-login .login-card > p {
  align-self: stretch;
  text-align: left;
}
body.app-login .login-btn {
  align-self: center;
  width: 20rem;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  border: 2px solid var(--bloom-color-white);
  background-color: var(--bloom-color-white);
  color: var(--bloom-color-success);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
body.app-login .login-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  width: 20rem;
  max-width: 100%;
}
body.app-login .login-actions .login-btn {
  align-self: stretch;
  width: 100%;
}
body.app-login .login-btn--secondary {
  background-color: transparent;
  border-color: var(--bloom-color-white);
  color: var(--bloom-color-white);
}
body.app-login .login-btn--secondary:hover,
body.app-login .login-btn--secondary:active,
body.app-login .login-btn--secondary:focus-visible {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: var(--bloom-color-white);
  color: var(--bloom-color-white);
}
body.app-login .magic-link-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
body.app-login .magic-link-panel.hidden {
  display: none;
}
body.app-login .magic-link-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
}
body.app-login .magic-link-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
}
body.app-login .magic-link-input {
  width: 100%;
  height: 3.05rem;
  box-sizing: border-box;
  border-radius: 8px;
  border: 2px solid var(--bloom-color-white);
  background-color: var(--bloom-color-white);
  color: var(--bloom-color-success);
  font-size: 0.875rem;
  padding: 0 1rem;
  outline: none;
}
body.app-login .magic-link-input::placeholder {
  color: color-mix(in srgb, var(--bloom-color-success) 45%, transparent);
}
body.app-login .magic-link-form .login-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}
body.app-login .magic-link-status {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
}
body.app-login .magic-link-status.hidden {
  display: none;
}
body.app-login .login-btn:hover,
body.app-login .login-btn:active,
body.app-login .login-btn:focus-visible {
  background-color: var(--bloom-color-success-dark);
  border-color: var(--bloom-color-success-dark);
  color: var(--bloom-color-white);
}
body.app-login .login-btn--secondary:hover,
body.app-login .login-btn--secondary:active,
body.app-login .login-btn--secondary:focus-visible {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: var(--bloom-color-white);
  color: var(--bloom-color-white);
}
@media (max-width: 767px) {
  body.app-login .login-main {
    padding: 0 1rem;
  }
  body.app-login .login-card {
    padding: 1rem 0;
  }
  body.app-login h1.font-title {
    font-size: clamp(0.7rem, 4.2vw, 1.125rem) !important;
  }
}