/* The sign-in pages (Sign in, Create an account, Join), copied from WeWeb's
   Auth pages: the cream background with blush/butter/mint blobs, one white
   400px card, forest links (berry on hover). */

body { margin: 0; }
.auth-page { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 100vh; padding: 32px 16px;
  background-color: var(--cream, #FAF7F1); background-repeat: no-repeat; background-attachment: fixed;
  background-size: 460px 380px, 180px 150px, 380px 320px;
  background-position: right -140px top -120px, right 18% bottom 22%, left 120px bottom -150px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 84'%3E%3Cpath transform='rotate%28-8 50 42%29' d='M46 2C70 0 96 14 98 38C100 62 80 82 52 82C24 82 2 66 2 42C2 18 22 4 46 2Z' fill='%23F7CBD3' fill-opacity='0.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 84'%3E%3Cpath transform='rotate%28-14 50 42%29' d='M46 2C70 0 96 14 98 38C100 62 80 82 52 82C24 82 2 66 2 42C2 18 22 4 46 2Z' fill='%23FBE9CC' fill-opacity='0.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 84'%3E%3Cpath transform='rotate%286 50 42%29' d='M46 2C70 0 96 14 98 38C100 62 80 82 52 82C24 82 2 66 2 42C2 18 22 4 46 2Z' fill='%23D3EFDF' fill-opacity='0.8'/%3E%3C/svg%3E"); }
.auth-card { display: flex; flex-direction: column; align-items: stretch; gap: 20px; width: 400px; max-width: 100%; padding: 36px 32px;
  border-radius: 24px; background-color: #FFFFFF; box-shadow: 0 20px 50px rgba(46,42,51,0.12); }
.auth-logo { align-self: center; width: 143px; height: 80px; object-fit: contain; }
.auth-dots { display: flex; flex-direction: row; justify-content: center; gap: 6px; }
.auth-dot { width: 10px; height: 10px; border-radius: 999px; background-color: #E2DACE; transition: width 0.2s ease; }
.auth-dot.reached { background-color: #2F5A4B; }
.auth-dot.current { width: 22px; }
.auth-title { font: 900 24px/1.2 'Nunito', sans-serif; color: var(--forest, #2F5A4B); text-align: center; margin: 0; }
.auth-subtitle { text-align: center; margin: -12px 0 0 0; }
.auth-form { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.auth-form.roomy { gap: 24px; }
.auth-error { font: 500 14px/1.5 'Jost', sans-serif; color: #B23E68; padding: 10px 12px; border-radius: 10px; background-color: #FCEBEE; }
.auth-submit { width: 100%; margin: 4px 0 0 0; text-align: center; justify-content: center; }
.auth-link { font: 500 14px/1.5 'Jost', sans-serif; color: var(--forest, #2F5A4B); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  background: none; border: 0; padding: 0; }
.auth-link:hover { color: #B23E68; }
.auth-forgot { align-self: flex-end; margin: -6px 0 0 0; }
.auth-page .small-action { max-width: 140px; }
.auth-row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.auth-back { display: flex; justify-content: center; }
/* the code step (2026-10-16): which number it went to, Send it again and Use a different number */
.auth-sent { text-align: center; margin: -8px 0 0 0; }
.auth-code-actions { justify-content: center; gap: 28px; }
.auth-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.auth-checkbox input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 0; border: 2px solid #D8D0C5;
  border-radius: 5px; background-color: #FFFFFF; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.auth-checkbox input:checked { border-color: #B23E68; background-color: #B23E68;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 14px; background-position: center; background-repeat: no-repeat; }
.auth-footer { width: 100%; max-width: 384px; margin: 24px 0 0 0; padding: 0 24px; text-align: center; font: 400 12px/1.5 'Jost', sans-serif; color: #71717a; }
.auth-footer a { color: var(--forest, #2F5A4B); text-decoration: underline; text-underline-offset: 3px; }   /* Terms and Privacy (F25), as .auth-link */
.auth-footer a:hover { color: #B23E68; }

@media (max-width: 767px) {
  .auth-page { background-attachment: scroll; background-size: 260px 215px, 110px 92px, 240px 200px;
    background-position: right -110px top -90px, right -30px bottom 30%, left -60px bottom -110px; }
  .auth-card { width: 100%; padding: 28px 20px; }
}