/*
    The sign-in, sign-up and password pages, which Breezer renders outside the Blazor app. Each host's auth.less imports
    this whole. Breezer's auth stylesheet reads the same CSS variables as the app, so setting them themes most of it;
    the rest is scoped under .auth-page so nothing here reaches the app's own pages, which also load auth.css.
*/
body:has(.auth-page) {
  background: #F4F7FA;
}
.auth-page {
  --background-colour: #F4F7FA;
  --primary-colour: #0D7C5F;
  --secondary-colour: #1A2332;
  --text-colour: #1A2332;
  --secondary-text-colour: #5A6B7F;
  --warning-colour: #E85D3A;
  --border-colour: #E2E7ED;
  --white: #FFFFFF;
  color: #1A2332;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.auth-page h1,
.auth-page h2,
.auth-page h3 {
  font-family: 'Fredoka', 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  color: #1A2332;
}
.auth-page a {
  color: #0D7C5F;
  font-weight: 500;
  text-decoration: none;
}
.auth-page a:hover {
  color: #095C47;
  text-decoration: underline;
}
.auth-page .auth-body-container {
  width: 440px;
  min-width: 0;
  max-width: calc(100vw - 32px);
  padding: 40px;
  border: 1px solid #E2E7ED;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(26, 35, 50, 0.08);
  background: #FFFFFF;
  box-sizing: border-box;
}
.auth-page .logo-container img {
  max-height: 72px;
  width: auto;
}
.auth-page .form-group label {
  font-size: 13px;
  font-weight: 500;
  color: #1A2332;
}
.auth-page .form-group input:not([type="checkbox"]) {
  padding: 10px 12px;
  border: 1px solid #D0D7E0;
  border-radius: 6px;
  background: #FFFFFF;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
}
.auth-page .form-group input:not([type="checkbox"]):focus {
  outline: none;
  border-color: #0D7C5F;
  box-shadow: 0 0 0 3px #E8F5F0;
}
.auth-page input[type="checkbox"] {
  accent-color: #0D7C5F;
}
.auth-page button,
.auth-page .button {
  width: 100%;
  padding: 11px 18px;
  border: 1px solid #0D7C5F;
  border-radius: 8px;
  background: #0D7C5F;
  color: #fff;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.auth-page button:hover,
.auth-page .button:hover {
  border-color: #095C47;
  background: #095C47;
}
.auth-page .pw-wrapper > button.pw-toggle {
  width: auto;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #8E9BB0;
  font-size: 12px;
  font-weight: 500;
}
.auth-page .pw-wrapper > button.pw-toggle:hover {
  background: none;
  color: #095C47;
}
.auth-page .section-separator {
  border-color: #E2E7ED;
}
.auth-page .auth-links {
  font-size: 14px;
  color: #5A6B7F;
}
.sign-up-flow .lead {
  text-align: center;
}
.sign-up-flow .lead h1 {
  margin-bottom: 6px;
}
.sign-up-flow .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 420px) {
  .sign-up-flow .form-row {
    grid-template-columns: 1fr;
  }
}
.sign-up-flow .field-error {
  display: block;
  margin-top: 4px;
  color: #E85D3A;
  font-size: 12px;
}
.sign-up-flow .field-hint {
  display: block;
  margin-top: 4px;
  color: #8E9BB0;
  font-size: 12px;
  line-height: 1.4;
}
.sign-up-flow__intro {
  margin: 0 0 8px;
  color: #5A6B7F;
  font-size: 14px;
  line-height: 1.5;
}
.sign-up-flow__body {
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}
.sign-up-flow__body p {
  margin: 0 0 12px;
}
.sign-up-flow__hint {
  margin-top: 20px !important;
  padding-top: 16px;
  border-top: 1px solid #E2E7ED;
  color: #8E9BB0;
  font-size: 13px;
}
.sign-up-flow__art {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 12px 0 12px;
}
.sign-up-flow__art img {
  height: auto;
}
.sign-up-flow__art--peek img {
  width: 74px;
  margin: 0 -6px;
}
.sign-up-flow__art--peek img:nth-child(1) {
  transform: rotate(-12deg) translateY(6px);
}
.sign-up-flow__art--peek img:nth-child(2) {
  width: 86px;
  z-index: 1;
}
.sign-up-flow__art--peek img:nth-child(3) {
  transform: rotate(12deg) translateY(6px);
}
.sign-up-flow__art--single img {
  width: 96px;
}
.sign-up-flow__art--letter {
  position: relative;
  width: 200px;
  height: 120px;
  margin: 32px auto 12px;
}
.sign-up-flow__letter {
  position: absolute;
  left: 28px;
  top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 92px;
  border-radius: 50%;
  background: #E8F5F0;
  color: #0D7C5F;
  transform: rotate(-8deg);
}
.sign-up-flow__letter svg {
  width: 64px;
  height: 48px;
}
.sign-up-flow__waver {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 92px;
  transform: rotate(10deg);
  animation: sign-up-wave 2.4s ease-in-out infinite;
  transform-origin: 50% 90%;
}
.sign-up-flow__coin {
  position: absolute;
  left: 8px;
  top: 0;
  width: 28px;
  animation: sign-up-bob 3s ease-in-out infinite;
}
@keyframes sign-up-wave {
  0%,
  100% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-4deg);
  }
}
@keyframes sign-up-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sign-up-flow__waver,
  .sign-up-flow__coin {
    animation: none;
  }
}
.terms-page .terms {
  color: #1A2332;
  font-size: 14px;
  line-height: 1.55;
}
.terms-page .terms h2 {
  margin: 18px 0 4px;
  font-size: 15px;
  font-weight: 600;
}
.terms-page .terms h2:first-child {
  margin-top: 0;
}
.terms-page .terms p {
  margin: 0;
}