/* ============================================================auth.css — login / sign-up experience.Calm yoga backdrop: sky, sun, layered mountains, ocean, hills.Pure CSS + inline SVG scene (no image files needed).============================================================ */
.auth-body {
margin: 0;
min-height: 100vh;
font-family: var(--font-body, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif);
color: #2a2340;
position: relative;
overflow-x: hidden;
}
/* ---------- Scenic backdrop ---------- */
.auth-scene {
position: fixed;
inset: 0;
z-index: -2;
background: linear-gradient(180deg, #bfe8f5 0%, #dff3ec 42%, #eaf7e4 62%, #f3fbee 100%);
}
.auth-scene__sun {
position: absolute;
top: 9%;
left: 50%;
transform: translateX(-50%);
width: 130px;
height: 130px;
border-radius: 50%;
background: radial-gradient(circle, #fff6d8 0%, #ffe6a4 55%, rgba(255, 220, 150, 0) 72%);
filter: blur(1px);
animation: authSun 9s ease-in-out infinite;
}
.auth-scene__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Login page: a photo backdrop (Mt Taranaki at dawn) instead of the drawn
   scene. The login / sign-up card itself is unchanged. */
.auth-scene--photo {
background: #b9a3c4 url("../assets/login-background-taranaki.jpg") center 38% / cover no-repeat;
}
.auth-scene--photo > * { display: none; }
.auth-scene__cloud {
position: absolute;
background: rgba(255, 255, 255, 0.85);
border-radius: 999px;
filter: blur(2px);
animation: authDrift linear infinite;
}
.auth-scene__cloud::before,
.auth-scene__cloud::after {
content: "";
position: absolute;
background: inherit;
border-radius: 50%;
}
.auth-scene__cloud.c1 { width: 120px; height: 26px; top: 16%; left: -160px; animation-duration: 46s; }
.auth-scene__cloud.c1::before { width: 54px; height: 54px; top: -22px; left: 20px; }
.auth-scene__cloud.c1::after { width: 40px; height: 40px; top: -14px; left: 62px; }
.auth-scene__cloud.c2 { width: 90px; height: 20px; top: 26%; left: -140px; animation-duration: 62s; opacity: 0.8;
}
.auth-scene__cloud.c2::before { width: 42px; height: 42px; top: -18px; left: 14px; }
.auth-scene__cloud.c2::after { width: 30px; height: 30px; top: -10px; left: 48px; }
/* ---------- Layout ---------- */
.auth-wrap {
min-height: 100vh;
display: grid;
place-items: center;


padding: 32px 16px 56px;
box-sizing: border-box;
}
.auth-body.is-verify .auth-wrap {
place-items: start center;
padding-top: 12px;
padding-bottom: 20px;
}
.auth-card {
width: min(560px, 100%);
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 26px;
box-shadow: 0 30px 80px rgba(46, 33, 90, 0.22);
padding: 30px clamp(20px, 4vw, 40px) 34px;
font-family: var(--font-body, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif);
}
.auth-body.is-verify .auth-card {
padding-top: 18px;
padding-bottom: 22px;
}
.auth-body.is-verify .auth-card {
padding-top: 18px;
padding-bottom: 22px;
}
.auth-body.is-verify .auth-card {
padding-top: 18px;
padding-bottom: 22px;
}
.auth-brand {
display: flex;
align-items: center;
gap: 12px;
justify-content: center;
margin-bottom: 6px;
text-decoration: none;
}
/* Login page: no tagline under the logo, so the logo block carries the
gap above the Login / Sign up tabs itself. */
.auth-brand--solo { margin-bottom: 20px; }
.auth-brand img {
width: 54px;
height: 54px;
border-radius: 14px;
box-shadow: 0 5px 16px rgba(107, 79, 214, 0.4);
}
.auth-brand span {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.7rem;
color: #3f2d73;
}
.auth-tag {
text-align: center;
color: #6f6390;
margin: 0 0 20px;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 0.72rem;
}
.auth-body.is-verify .auth-tag,
.auth-body.is-verify .auth-tabs,
.auth-body.is-auth-modal .auth-tag,
.auth-body.is-auth-modal .auth-tabs {
display: none;
}
/* ---------- Tabs ---------- */
.auth-tabs {
display: flex;
gap: 6px;
background: #efe9fb;
padding: 5px;
border-radius: 999px;
margin-bottom: 22px;
}
.auth-tab {
flex: 1;
border: 0;
background: transparent;
padding: 10px 8px;
border-radius: 999px;
min-height: 44px;
font: 700 0.95rem var(--font-ui, var(--font-body, inherit));
color: #6f6390;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.auth-tab.is-active { background: #fff; color: #4a2fb0; box-shadow: 0 4px 12px rgba(74, 47, 176, 0.18); }


.auth-panel { display: none; }
.auth-panel.is-active { display: block; animation: authFade 0.35s ease; }
/* ---------- Form fields ---------- */
.auth-field { margin-bottom: 16px; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 0; }
@media (max-width: 460px) { .auth-row { grid-template-columns: 1fr; } }
.auth-field label {
display: block;
font-family: var(--font-ui, var(--font-body, inherit));
font-size: 0.82rem;
font-weight: 700;
color: #4a4066;
margin-bottom: 6px;
}
.auth-field .req { color: #d1584f; }
.auth-input,
.auth-select,
.auth-textarea {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border: 1.5px solid #ded6f0;
border-radius: 12px;
background: #fff;
min-height: 46px;
font: 500 0.95rem var(--font-ui, var(--font-body, inherit));
color: #2a2340;
transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input:focus,
.auth-select:focus,
.auth-textarea:focus {
outline: none;
border-color: #3d9970;
box-shadow: 0 0 0 3px rgba(136, 119, 196, 0.18);
}
.auth-textarea { resize: vertical; min-height: 62px; }
/* Show/hide password button inside password fields (js/password-toggle.js). */
.pw-wrap { position: relative; display: block; }
.pw-wrap .auth-input { padding-right: 52px; }
.pw-toggle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 46px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 0 12px 12px 0;
background: transparent;
color: #8a7fa8;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.pw-toggle:hover { color: #3d9970; }
.pw-toggle:focus { outline: none; }
.pw-toggle:focus-visible { box-shadow: inset 0 0 0 2px #3d9970; color: #3d9970; }
.pw-toggle svg { display: block; pointer-events: none; }
/* Live password helpers (js/password-help.js): length tick, match tick, Caps Lock. */
/* mvp.css forces paragraph colour through --yv-copy-color, so set that too. */
.auth-hint.is-met { --yv-copy-color: #23734f; color: #23734f; font-weight: 600; }
.pw-note {
font-family: var(--font-ui, var(--font-body, inherit));
font-size: 0.76rem;
font-weight: 600;
margin: 6px 2px 0;
}
.pw-note:empty { display: none; }
.pw-note--ok { --yv-copy-color: #23734f; color: #23734f; }
.pw-note--warn { --yv-copy-color: #985210; color: #985210; }
.pw-tick { font-weight: 700; }
.pw-sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* Hide the browser's own reveal / clear buttons so there is only one eye. */
.pw-wrap input::-ms-reveal,
.pw-wrap input::-ms-clear { display: none; }
select[multiple].auth-select { min-height: 132px; padding: 8px; }
.auth-hint { font-family: var(--font-ui, var(--font-body, inherit)); font-size: 0.76rem; color: #8a7fa8; margin: 6px 2px 0; }
.auth-radios { display: flex; gap: 18px; padding-top: 4px; }
.auth-radios label { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: #3a3357;
cursor: pointer; }
.auth-check {
display: flex;
gap: 10px;
align-items: flex-start;
font-family: var(--font-ui, var(--font-body, inherit));
font-size: 0.86rem;
color: #4a4066;
margin: 2px 0 18px;
}
.auth-check input { margin-top: 3px; }
.auth-check a {
color: #2563eb;
text-decoration: underline;
text-underline-offset: 2px;
}
.auth-check a:hover { color: #1d4ed8; }
/* Sign-up validation (js/auth.js). The summary stays in the page from load
(empty = collapsed) so screen readers reliably announce it when filled. */
.su-summary {
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 16px;
background: #fdecec;
color: #a5322a;
border: 1px solid #f4c7c3;
font-family: var(--font-ui, var(--font-body, inherit));
font-size: 0.88rem;
}
.su-summary:empty { padding: 0; margin: 0; border: 0; }
.su-summary:focus { outline: none; }
.su-summary p { margin: 0 0 6px; font-weight: 700; }
.su-summary ul { margin: 0; padding-left: 1.1rem; }
.su-summary li { margin: 3px 0; }
.su-summary a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.su-error {
font-family: var(--font-ui, var(--font-body, inherit));
font-size: 0.8rem;
font-weight: 600;
color: #a5322a;
margin: 6px 2px 0;
}
.su-error:empty { display: none; }
.su-error--check { margin: -12px 2px 16px; }
.auth-input[aria-invalid="true"],
.auth-select[aria-invalid="true"] {
border-color: #d1584f;
}
.auth-input[aria-invalid="true"]:focus,
.auth-select[aria-invalid="true"]:focus {
border-color: #d1584f;
box-shadow: 0 0 0 3px rgba(209, 88, 79, 0.18);
}
.auth-check input[aria-invalid="true"] { outline: 2px solid #d1584f; outline-offset: 2px; }
.auth-hidden { display: none; }
/* ---------- Buttons ---------- */
.auth-btn {
width: 100%;
border: 0;
padding: 14px;
border-radius: 999px;


font: 700 0.98rem var(--font-ui, var(--font-body, inherit));
color: #fff;
background: linear-gradient(120deg, #2d7d52, #3d9970 55%, #6ecba0);
cursor: pointer;
box-shadow: 0 12px 26px rgba(107, 79, 214, 0.35);
transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(107, 79, 214, 0.42); }
.auth-btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.auth-btn--secondary {
background: #fff;
color: #2d7d52;
border: 1.5px solid #b8dec8;
box-shadow: none;
}
.auth-btn--secondary:hover { box-shadow: 0 10px 22px rgba(45, 125, 82, 0.16); }
.auth-or { text-align: center; color: #9488ad; margin: 18px 0 14px; font-size: 0.82rem; position: relative; }
.auth-or::before, .auth-or::after {
content: ""; position: absolute; top: 50%; width: 38%; height: 1px; background: #e2dcf0;
}
.auth-or::before { left: 0; } .auth-or::after { right: 0; }
.auth-google {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px;
border: 1.5px solid #dcd6ec;
border-radius: 999px;
background: #fff;
font: 700 0.95rem var(--font-ui, var(--font-body, inherit));
color: #3a3357;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
}
.auth-google:hover { background: #faf9ff; box-shadow: 0 6px 16px rgba(60, 45, 115, 0.12); }
.auth-google svg { width: 20px; height: 20px; }
#googleReal { margin-top: 10px; display: flex; justify-content: center; }
.auth-links { display: flex; justify-content: space-between; margin-top: 14px; font-family: var(--font-ui, var(--font-body, inherit)); font-size: 0.86rem; }
.auth-links--login { margin: -4px 0 16px; }
.auth-links--center { justify-content: center; margin-top: 16px; }
.auth-links a { color: #6455ad; text-decoration: none; cursor: pointer; }
.auth-links a:hover { text-decoration: underline; }
.auth-copy {
color: #5b4f7a;
font-family: var(--font-ui, var(--font-body, inherit));
font-size: 0.92rem;
margin-top: 0;
}
/* ---------- Messages ---------- */
.auth-msg {
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 16px;
font-family: var(--font-ui, var(--font-body, inherit));
font-size: 0.9rem;
display: none;
}
.auth-msg.show { display: block; animation: authFade 0.3s ease; }
.auth-msg.err { background: #fdecec; color: #a5322a; border: 1px solid #f4c7c3; }
.auth-msg.ok { background: #e7f7ec; color: #1f7a44; border: 1px solid #bfe6cc; }
.auth-msg.info { background: #eaf2fd; color: #29558c; border: 1px solid #c6dbf4; }
.auth-msg a {
color: inherit;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.auth-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
place-items: center;
padding: 18px;
}
.auth-modal.is-open { display: grid; }
.auth-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(38, 28, 68, 0.46);
backdrop-filter: blur(5px);
}
.auth-modal__panel {
position: relative;
width: min(420px, 94vw);
padding: 26px 24px 24px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(255, 255, 255, 0.76);
box-shadow: 0 30px 80px rgba(46, 33, 90, 0.28);
text-align: center;
color: #342c4d;
}
.auth-modal__close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border: 0;
border-radius: 50%;
background: #f4eefb;
color: #5b4f7a;
font-weight: 700;
cursor: pointer;
}
.auth-modal__icon {
width: 50px;
height: 50px;
margin: 0 auto 12px;
border-radius: 50%;
display: grid;
place-items: center;
background: #fdecec;
color: #a5322a;
font-weight: 700;
font-size: 1.5rem;
}
.auth-modal h2 {
margin: 0 0 8px;
font: 700 1.35rem var(--font-heading);
color: #3f2d73;
}
.auth-modal p {
margin: 0 0 18px;
font-size: 0.95rem;
line-height: 1.5;
color: #5b4f7a;
}
.auth-modal__actions {
display: grid;
gap: 10px;
}
.auth-success { text-align: center; color: #342c4d; font-family: var(--font-ui, var(--font-body, inherit)); }
.auth-success__icon {
width: 52px;
height: 52px;
margin: 2px auto 10px;
border-radius: 50%;
display: grid;
place-items: center;
background: #e7f7ec;
color: #1f7a44;
font-size: 1.8rem;
font-weight: 700;
}
.auth-success h1 {
margin: 0 0 14px;
font-size: 1.55rem;
line-height: 1.2;
color: #2d2450;
}
.auth-success p {
margin: 0 auto 12px;
font-size: 0.94rem;
line-height: 1.55;
color: #5b4f7a;
}
.auth-success__label {
margin: 0 0 6px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #84799f;
}
.auth-success__email {
margin: 0 0 12px;
padding: 12px 14px;
border: 1px solid #d8eedf;
border-radius: 12px;
background: #f6fcf8;
color: #1f7a44;
font-weight: 700;
word-break: break-word;
}
.auth-success__note {
padding: 10px 12px;
border-radius: 12px;
background: #fff8e8;
border: 1px solid #f1dba7;
color: #6b541d !important;
}
.auth-success__status {
min-height: 20px;
margin: 0 0 10px;
font-size: 0.86rem;
font-weight: 700;
color: #1f7a44;
}
.auth-success__status.err { color: #a5322a; }
.auth-actions {
display: grid;
gap: 10px;
margin-top: 10px;
}
body.auth-body .auth-card .auth-field label,
body.auth-body .auth-card .auth-hint,
body.auth-body .auth-card .auth-check,
body.auth-body .auth-card .auth-links,
body.auth-body .auth-card .auth-copy,
body.auth-body .auth-card .auth-msg,
body.auth-body .auth-card .auth-success {
font-family: var(--font-ui, var(--font-body, inherit)) !important;
}
@media (max-width: 460px) {
.auth-body.is-verify .auth-wrap { padding-top: 8px; }
.auth-body.is-verify .auth-card { padding: 16px 18px 18px; border-radius: 22px; }
.auth-body.is-verify .auth-brand { margin-bottom: 10px; }
.auth-body.is-verify .auth-brand img { width: 46px; height: 46px; }
.auth-body.is-verify .auth-brand span { font-size: 1.45rem; }
.auth-success__icon { width: 48px; height: 48px; margin-bottom: 8px; }
.auth-success h1 { font-size: 1.38rem; margin-bottom: 12px; }
.auth-success__note { font-size: 0.86rem; line-height: 1.42; }
.auth-btn { padding: 12px; }
}
/* ---------- Google demo popup ---------- */
.gpop-backdrop {
position: fixed; inset: 0; z-index: 9999;
background: rgba(30, 22, 52, 0.5);
display: none; place-items: center; padding: 16px;
}
.gpop-backdrop.show { display: grid; }
.gpop {
width: min(400px, 94vw);
background: #fff; border-radius: 16px; overflow: hidden;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4); animation: authPop 0.25s ease;


}
.gpop__head { padding: 20px 22px 14px; border-bottom: 1px solid #eee; }
.gpop__head h3 { margin: 0 0 3px; font-size: 1.1rem; color: #202124; }
.gpop__head p { margin: 0; font-size: 0.82rem; color: #5f6368; }
.gpop__body { padding: 18px 22px 22px; }
.gpop__note { font-size: 0.76rem; color: #8a7fa8; margin: 0 0 14px; }
.gpop__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.gpop__btn { border: 0; border-radius: 8px; padding: 9px 16px; font-weight: 600; cursor: pointer; }
.gpop__btn--ghost { background: #f1f1f4; color: #444; }
.gpop__btn--go { background: #1a73e8; color: #fff; }
.auth-foot { text-align: center; margin-top: 20px; }
.auth-foot a { color: #5b4fa0; font-size: 0.86rem; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }
/* ---------- Animations ---------- */
@keyframes authFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes authPop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes authSun { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.95; } 50% { transform:
translateX(-50%) scale(1.06); opacity: 1; } }
@keyframes authDrift { from { transform: translateX(0); } to { transform: translateX(115vw); } }
@media (prefers-reduced-motion: reduce) {
.auth-scene__sun, .auth-scene__cloud { animation: none; }
}