/* One sign-in design for the member app and the owner portal (authui.js builds the markup).
   Left: the form. Right: a rounded panel tinted with the current colour theme, with a small slideshow.
   Everything colours itself from the app's theme variables, so the theme switcher recolours it. */
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url("/static/fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url("/static/fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url("/static/fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url("/static/fonts/poppins-700.woff2") format("woff2")}

/* tokens live on :root so the theme popover also works inside the owner portal's sidebar */
:root{
  --au-font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --au-ink:var(--text);--au-field:color-mix(in srgb,var(--text) 55%,var(--surface));
  --au-btn:var(--text);--au-btn-ink:var(--bg);
  --au-tint:color-mix(in srgb,var(--accent) 13%,var(--surface));--au-tint2:color-mix(in srgb,var(--accent) 30%,var(--surface));
}
.au{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:var(--bg);color:var(--au-ink);font-family:var(--au-font)}
.au *{box-sizing:border-box}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- form side ---- */
.au-left{display:flex;flex-direction:column;padding:22px clamp(24px,5vw,72px) 26px;min-width:0}
.au-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.au-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;letter-spacing:-.01em}
.au-brand .logo{width:34px;height:34px;border-radius:11px;display:grid;place-items:center}
.au-tbtn{font-family:var(--au-font,system-ui,sans-serif)}
.au-center{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:28px 0}
.au-card{width:100%;max-width:400px}
.au-badge{display:inline-flex;align-items:center;gap:7px;margin:0 auto 14px;padding:5px 13px;border-radius:99px;border:1.5px solid var(--accent);color:var(--accent);font-size:12.5px;font-weight:600}
.au-card{text-align:center}
.au-h{margin:0;font-size:clamp(34px,4.2vw,50px);line-height:1.08;font-weight:700;letter-spacing:-.025em}
.au-sub{margin:14px auto 30px;max-width:25em;font-size:13.5px;line-height:1.6;color:var(--muted)}
.au-sub b{color:var(--au-ink);font-weight:600}
.au-form{display:grid;gap:14px;text-align:left}
.au-field{position:relative;display:block}
.au-field input{width:100%;height:52px;padding:0 54px 0 24px;border:1.5px solid var(--au-field);border-radius:99px;background:transparent;color:var(--au-ink);font:400 14.5px var(--au-font);outline:0;transition:border-color .15s,box-shadow .15s}
.au-field input::placeholder{color:var(--muted);opacity:1}
.au-field input:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.au-field input:-webkit-autofill{-webkit-text-fill-color:var(--au-ink);transition:background-color 9999s}
.au-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.au-eye:hover{color:var(--au-ink);background:color-mix(in srgb,var(--text) 7%,transparent)}
.au-eye:focus-visible,.au-link:focus-visible,.au-dot:focus-visible,.au-tbtn:focus-visible,.au-foot a:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}
.au-row{display:flex;justify-content:flex-end;margin-top:-4px}
.au-link{border:0;background:none;padding:2px 4px;color:var(--au-ink);font:500 12.5px var(--au-font);cursor:pointer}
.au-link:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.au-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin-top:4px;border:0;border-radius:99px;background:var(--au-btn);color:var(--au-btn-ink);font:500 15px var(--au-font);cursor:pointer;transition:transform .12s,filter .15s}
.au-btn:hover:not(:disabled){filter:brightness(1.18)}
.au-btn:active:not(:disabled){transform:scale(.99)}
.au-btn:disabled{opacity:.65;cursor:progress}
.au-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:3px}
.au-btn .spin{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:au-spin .7s linear infinite}
.au-btn .spin[hidden]{display:none}
@keyframes au-spin{to{transform:rotate(360deg)}}
.au-err{min-height:20px;margin:2px 0 0;text-align:center;font-size:13px;line-height:1.45;color:var(--fail)}
.au-err.info{color:var(--muted)}
.au-note{margin:14px 0 0;padding:12px 16px;border-radius:18px;background:var(--au-tint);font-size:13px;line-height:1.55;text-align:left;color:var(--au-ink)}
.au-note.warn{background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
.au-note code{display:block;margin-top:6px;padding:7px 10px;border-radius:10px;background:color-mix(in srgb,var(--text) 8%,transparent);font:12px ui-monospace,"Cascadia Code",Consolas,monospace;word-break:break-all;user-select:all}
.au-pre{display:grid;gap:14px}
.au-step{display:none}
.au-card.mfa .au-step{display:block}
.au-card.mfa .au-pre{display:none}
.au-foot{margin:0;text-align:center;font-size:13.5px;color:var(--au-ink)}
.au-foot a{color:var(--accent);font-weight:600;text-decoration:none}
.au-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.au-foot span{color:var(--muted)}

/* ---- theme switcher ---- */
.au-theme{position:relative}
.au-tbtn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 12px;border:1.5px solid var(--au-field);border-radius:99px;background:transparent;color:var(--au-ink);font:500 13px var(--au-font);cursor:pointer}
.au-tbtn:hover{border-color:var(--accent);color:var(--accent)}
.au-tbtn .dot{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--accent)}
.au-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:262px;padding:14px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 18px 44px -14px rgba(0,0,0,.35);text-align:left;font-family:var(--au-font)}
.au-theme.up .au-pop{top:auto;bottom:calc(100% + 8px);left:0;right:auto}
.au-pop[hidden]{display:none}
.au-pop h4{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--muted)}
.au-pop h4+.au-modes,.au-pop h4+.au-sw{margin-bottom:14px}
.au-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:99px;background:color-mix(in srgb,var(--text) 7%,transparent)}
.au-modes button{height:32px;padding:0 4px;white-space:nowrap;border:0;border-radius:99px;background:transparent;color:var(--au-ink);font:500 12.5px var(--au-font);cursor:pointer}
.au-modes button[aria-pressed=true]{background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.au-sw{display:flex;flex-wrap:wrap;gap:10px}
.au-sw button{width:34px;height:34px;border-radius:50%;border:0;padding:0;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.14);display:grid;place-items:center;color:#fff}
.au-sw button svg{opacity:0}
.au-sw button[aria-pressed=true]{box-shadow:0 0 0 2.5px var(--surface),0 0 0 4.5px var(--au-ink)}
.au-sw button[aria-pressed=true] svg{opacity:1}
.au-sw button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:3px}

/* ---- picture side: liquid-metal panel (light) ----
   A white panel with soft silver blobs that merge like mercury (SVG "gooey" filter), drift on their own and follow the pointer a little.
   The only theme colour is a faint tint in the metal and a whisper of glow, so the theme switcher still changes the feel. */
.au{background:#fff}
.au-right{padding:14px 14px 14px 0;min-width:0}
.au-panel{--mercury:#fbfbfd;--mercury-dark:color-mix(in srgb,var(--accent) 20%,#b3b7c3);
  position:relative;height:100%;min-height:560px;border-radius:30px;overflow:hidden;isolation:isolate;color:var(--text);border:1px solid #e6e8ee;
  background:radial-gradient(70% 55% at 80% 8%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),
             radial-gradient(60% 50% at 6% 96%,color-mix(in srgb,var(--accent2,var(--accent)) 9%,transparent),transparent 70%),#fff}
.au-liquid{position:absolute;inset:0;z-index:0}
.au-defs{position:absolute;width:0;height:0}
.au-stage{position:absolute;inset:0;opacity:.95}
.au-blob{position:absolute;border-radius:50%;background:linear-gradient(135deg,var(--mercury),var(--mercury-dark));filter:blur(20px);
  box-shadow:inset -10px -10px 22px rgba(20,24,40,.22),10px 12px 30px rgba(20,24,40,.16);animation:au-float 20s infinite alternate ease-in-out;transition:margin .1s ease-out}
@keyframes au-float{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(10vw,20vh) scale(1.2)}
  66%{transform:translate(-5vw,10vh) scale(.8)}
  100%{transform:translate(5vw,-10vh) scale(1.1)}}
.au-copy{position:absolute;z-index:2;left:clamp(26px,4vw,48px);right:clamp(26px,4vw,48px);bottom:clamp(28px,4vw,46px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.au-id{font:400 11px ui-monospace,"Space Mono","Cascadia Code",Consolas,monospace;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.au-id i{font-style:normal;opacity:.5;margin:0 .35em}
.au-cap{margin:0;min-height:4.2em;max-width:15em;font-size:clamp(24px,2.7vw,38px);line-height:1.18;font-weight:400;letter-spacing:-.025em;text-align:left;color:var(--text);transition:opacity .22s ease,transform .22s ease}
.au-cap.out{opacity:0;transform:translateY(8px)}
.au-cap b{font-weight:700}
.au-dots{display:flex;gap:8px;margin-top:4px}
.au-dot{width:10px;height:10px;padding:0;border:0;border-radius:99px;background:color-mix(in srgb,var(--text) 18%,transparent);cursor:pointer;transition:width .25s,background .25s}
.au-dot[aria-current=true]{width:34px;background:var(--text)}
@media (prefers-reduced-motion:reduce){.au-blob{animation:none!important;transition:none}.au-cap,.au-dot{transition:none}}

/* ---- hidden owner-portal link (member sign-in only): a faint lock in the footer row. It sits in its own grid column, so it can
   never cover the footer text; its label is a small bubble above it that appears on hover or keyboard focus. ---- */
.au-bottom.has-lock{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;column-gap:8px}
.au-bottom.has-lock .au-foot{grid-column:2}
.au-owner{position:relative;grid-column:1;justify-self:start;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--muted);text-decoration:none;opacity:.45;transition:opacity .2s,background .2s}
.au-owner span{position:absolute;left:0;bottom:calc(100% + 8px);padding:6px 12px;border-radius:99px;background:var(--text);color:var(--bg);font:500 12px var(--au-font);white-space:nowrap;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .18s,transform .18s}
.au-owner:hover,.au-owner:focus-visible{opacity:1;background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text);text-decoration:none}
.au-owner:hover span,.au-owner:focus-visible span{opacity:1;transform:none}
.au-owner:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}


@media (max-width:900px){
  .au{grid-template-columns:1fr}
  .au-right{display:none}
  .au-left{padding:18px 22px 24px}
  .au-center{justify-content:flex-start;padding-top:36px}
}

.pside .au-pop{width:216px}

/* primary button: the theme accent (it was near-black, which felt heavy on the white page) */
.au{--au-btn:var(--accent);--au-btn-ink:var(--on-accent,#fff)}
.au-btn{box-shadow:0 10px 22px -10px color-mix(in srgb,var(--accent) 65%,transparent)}
.au-btn:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 12px 26px -10px color-mix(in srgb,var(--accent) 75%,transparent)}

/* phones: links and small buttons get a comfortable touch area */
@media (max-width:700px){
  .au-link{min-height:38px;padding:8px 10px}
  .au-foot a{display:inline-block;padding:9px 4px}
}

.au-legal{margin:6px 0 0;text-align:center;font-size:12px;color:var(--muted);white-space:nowrap}
.au-bottom.has-lock .au-legal{grid-column:2;grid-row:2}
.au-legal a{color:var(--muted);text-decoration:none}
.au-legal a:hover{color:var(--au-ink);text-decoration:underline;text-underline-offset:3px}
.au-legal i{font-style:normal;margin:0 4px}