:root { color-scheme:light; --auth-blue:#176489; --auth-red:#df252b; --auth-ink:#182d43; --auth-muted:#526477; --auth-line:#d8e1eb; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { background:#fff; }
body { margin:0; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; background:#fff; color:var(--auth-ink); font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.6; -webkit-text-size-adjust:100%; }
a { color:var(--auth-blue); text-underline-offset:3px; }
a:hover { color:var(--auth-red); }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--auth-red); outline-offset:4px; }
.auth-skip { position:fixed; z-index:10; top:10px; left:16px; transform:translateY(-180%); padding:10px 16px; background:var(--auth-blue); color:#fff; }
.auth-skip:focus { transform:none; }
.auth-header { border-top:4px solid var(--auth-red); border-bottom:1px solid var(--auth-line); }
.auth-header-inner { width:calc(100% - 48px); max-width:1080px; margin:0 auto; padding:20px 0; }
.auth-brand { display:inline-flex; align-items:center; gap:14px; color:var(--auth-blue); font-size:18px; font-weight:700; line-height:1.3; text-decoration:none; }
.auth-brand img { display:block; width:48px; height:48px; object-fit:contain; }
.auth-footer { width:calc(100% - 48px); max-width:1080px; margin:0 auto; display:flex; justify-content:center; gap:24px; padding:20px 0; border-top:1px solid var(--auth-line); font-size:14px; }
.auth-footer a { display:inline-flex; align-items:center; min-height:44px; }
.wf-shell { width:calc(100% - 48px); max-width:800px; margin:0 auto; padding:44px 0 56px; flex:1; }
.wf-auth-main { flex:1; display:grid; place-items:center; width:100%; padding:48px 24px 64px; }
.wf-auth-panel { width:100%; max-width:580px; padding:32px; border:1px solid var(--auth-line); border-top:3px solid var(--auth-blue); border-radius:4px; box-shadow:0 8px 28px #143f7008; }
.wf-auth-panel h1 { margin:0 0 14px; color:var(--auth-blue); font-size:30px; line-height:1.25; letter-spacing:-.5px; }
.wf-auth-panel p { margin:0 0 18px; }
.wf-auth-status,.wf-auth-note { color:var(--auth-muted); font-size:14px; }
.wf-auth-status { padding-top:6px; }
.wf-auth-button { display:flex; justify-content:center; align-items:center; width:100%; min-height:48px; margin:8px 0 14px; padding:12px 18px; border:1px solid var(--auth-blue); border-radius:3px; background:var(--auth-blue); color:#fff; font:inherit; font-weight:700; line-height:1.4; cursor:pointer; }
.wf-auth-button:hover:not(:disabled) { background:#0c2d53; }
.wf-auth-error { padding:12px 14px; border-left:3px solid var(--auth-red); background:#fff6f6; color:#7f1c29; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.wf-auth-retry { min-height:44px; padding:8px 0; border:0; background:transparent; color:var(--auth-blue); font-size:14px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.wf-auth-retry:hover:not(:disabled) { color:var(--auth-red); }
.member-login-shell { max-width:580px; display:flex; flex-direction:column; justify-content:center; padding:48px 0 64px; }
.member-login-heading { margin:0 0 24px; }
.member-login-heading h1 { margin:0; color:var(--auth-blue); font-size:32px; line-height:1.2; letter-spacing:-.6px; }
.wf-eyebrow { display:block; margin-bottom:8px; color:var(--auth-red); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.member-signin-panel { padding:32px; border:1px solid var(--auth-line); border-top:3px solid var(--auth-blue); border-radius:4px; box-shadow:0 8px 28px #143f7008; }
.member-signin-panel h1,.member-signin-panel h2 { margin:0 0 12px; color:var(--auth-blue); font-size:27px; line-height:1.25; letter-spacing:-.4px; }
.member-signin-panel p { margin:0 0 18px; }
.member-service { display:flex; align-items:center; gap:9px; margin-bottom:24px; color:var(--auth-muted); font-size:14px; }
.member-service p { margin:0; }
.member-service-dot { width:8px; height:8px; flex:none; border-radius:50%; background:#718096; }
.member-service[data-state="ready"] .member-service-dot { background:var(--auth-blue); }
.member-service[data-state="unavailable"] .member-service-dot { background:var(--auth-red); }
.wf-button,.member-signin-button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:12px 18px; border:1px solid var(--auth-blue); border-radius:3px; background:var(--auth-blue); color:#fff; font:inherit; font-weight:700; line-height:1.4; text-align:center; text-decoration:none; cursor:pointer; }
.member-signin-button { width:100%; margin:8px 0 12px; }
.member-signin-button:hover:not(:disabled) { background:#0c2d53; }
button:disabled { opacity:.55; cursor:wait; }
.member-text-button { min-height:44px; padding:8px 0; border:0; background:transparent; color:var(--auth-blue); font-size:14px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.member-text-button:hover:not(:disabled) { color:var(--auth-red); }
.member-help,.member-notice { color:var(--auth-muted); font-size:14px; line-height:1.6; }
.member-feedback-area { margin-top:16px; }
.member-feedback { padding:12px 14px; border-left:3px solid var(--auth-red); background:#fff6f6; color:#7f1c29; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.wf-help { margin:18px 0; padding:16px 0; border-top:1px solid var(--auth-line); border-bottom:1px solid var(--auth-line); }
.wf-help + .wf-help { border-top:0; margin-top:-18px; }
.wf-help summary { min-height:44px; display:list-item; align-content:center; color:var(--auth-blue); font-weight:700; cursor:pointer; }
.wf-help p { margin:12px 0 0; line-height:1.75; }
.wf-page-heading { margin-bottom:28px; }
.wf-page-heading h1 { margin:0 0 12px; color:var(--auth-blue); font-size:32px; line-height:1.25; letter-spacing:-.6px; }
.wf-page-heading p { margin:0; color:var(--auth-muted); }
@media(max-width:600px) { .auth-header-inner,.auth-footer,.wf-shell { width:calc(100% - 32px); }.auth-header-inner { padding:16px 0; }.auth-brand { font-size:16px; gap:11px; }.auth-brand img { width:42px; height:42px; }.wf-auth-main { padding:32px 16px 40px; }.wf-auth-panel { padding:24px 20px; }.wf-auth-panel h1 { font-size:28px; }.member-login-shell { padding:32px 0 40px; }.member-signin-panel { padding:24px 20px; }.member-login-heading h1,.wf-page-heading h1 { font-size:28px; }.member-signin-panel h1,.member-signin-panel h2 { font-size:25px; }.auth-footer { padding:12px 0; } }
/* The public login uses one quiet waterfront image; app navigation remains private. */
body[data-portal-page="login"] { position:relative; isolation:isolate; background:#e4eef0; }
body[data-portal-page="login"]::before { content:""; position:fixed; inset:0; z-index:-2; background-image:url('/assets/login-waterfront.webp'); background-size:cover; background-position:center; pointer-events:none; }
body[data-portal-page="login"]::after { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(250,249,245,.85),rgba(250,249,245,.48) 42%,rgba(241,248,250,.12) 72%); pointer-events:none; }
body[data-portal-page="login"] .auth-header { border:0; background:#0d385f; }
body[data-portal-page="login"] .auth-header-inner { width:calc(100% - 112px); max-width:1320px; padding:20px 0; }
body[data-portal-page="login"] .auth-brand,body[data-portal-page="login"] .auth-brand:hover { color:#fff; font-size:18px; gap:12px; }
body[data-portal-page="login"] .auth-brand img { display:none; }
body[data-portal-page="login"] .wf-auth-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,448px); gap:64px; align-items:center; width:calc(100% - 112px); max-width:1320px; margin:0 auto; padding:40px 0 64px; }
body[data-portal-page="login"] .wf-auth-welcome { position:relative; min-width:0; width:100%; padding:24px 0; text-align:center; }
body[data-portal-page="login"] .wf-auth-welcome::after { content:""; position:absolute; inset:-22px -28px; z-index:-1; border-radius:28px; background:radial-gradient(ellipse at center,rgba(255,253,247,.94) 15%,rgba(255,253,247,.7) 55%,rgba(255,253,247,0) 76%); pointer-events:none; }
body[data-portal-page="login"] .wf-welcome-logo { display:block; width:208px; height:208px; object-fit:contain; margin:0 auto 24px; mix-blend-mode:multiply; }
body[data-portal-page="login"] .wf-auth-welcome h1 { margin:0; color:#102f41; font-size:clamp(38px,4.8vw,64px); line-height:1.1; font-weight:700; letter-spacing:-2px; text-shadow:0 1px 2px rgba(255,255,255,.9); }
body[data-portal-page="login"] .wf-auth-panel { max-width:448px; padding:42px 40px; border:1px solid rgba(255,255,255,.9); border-radius:14px; background:rgba(255,255,255,.97); box-shadow:0 24px 64px -20px rgba(15,52,71,.3),0 2px 8px rgba(15,52,71,.05); }
body[data-portal-page="login"] .wf-auth-panel::before { content:""; display:block; width:32px; height:3px; margin-bottom:24px; background:var(--auth-blue); }
body[data-portal-page="login"] .wf-auth-panel h2 { margin:0 0 12px; color:#183e52; font-size:34px; line-height:1.25; font-weight:600; letter-spacing:-1px; }
body[data-portal-page="login"] .wf-auth-panel p { color:#526477; font-size:15px; }
body[data-portal-page="login"] .wf-auth-panel p:empty { display:none; }
body[data-portal-page="login"] .wf-auth-button { gap:14px; min-height:52px; margin:30px 0 0; padding:14px 18px; border-radius:7px; font-size:15px; box-shadow:0 4px 12px rgba(23,100,137,.13); }
body[data-portal-page="login"] .wf-auth-button::after { content:"→"; font-size:20px; font-weight:400; line-height:1; }
body[data-portal-page="login"] .wf-auth-status { padding-top:0; }
body[data-portal-page="login"] .wf-auth-note,body[data-portal-page="login"] .wf-auth-error { margin:18px 0 0; }
body[data-portal-page="login"] .wf-auth-panel .wf-auth-error { color:#7f1c29; }
body[data-portal-page="login"] .wf-auth-retry { margin-top:14px; }
body[data-portal-page="login"] .auth-footer { justify-content:flex-end; width:calc(100% - 112px); max-width:1320px; padding:0 0 24px; border:0; }
body[data-portal-page="login"] .auth-footer a { min-height:44px; padding:0 18px; border:1px solid rgba(255,255,255,.3); border-radius:24px; background:rgba(19,56,74,.8); color:#fff; text-decoration:none; }
body[data-portal-page="login"] .auth-footer a:hover { background:#173e52; text-decoration:underline; }
@media(max-width:900px) {
 body[data-portal-page="login"]::before { background-position:32% center; }
 body[data-portal-page="login"] .auth-header-inner,body[data-portal-page="login"] .wf-auth-main,body[data-portal-page="login"] .auth-footer { width:calc(100% - 40px); }
 body[data-portal-page="login"] .auth-header-inner { padding:20px 0; }
 body[data-portal-page="login"] .auth-brand { font-size:16px; }
 body[data-portal-page="login"] .wf-welcome-logo { width:144px; height:144px; margin:0 auto 20px; }
 body[data-portal-page="login"] .wf-auth-main { grid-template-columns:minmax(0,1fr); gap:26px; justify-items:center; align-content:center; padding:30px 0 40px; }
 body[data-portal-page="login"] .wf-auth-welcome { width:100%; max-width:448px; padding:0; }
 body[data-portal-page="login"] .wf-auth-welcome::after { inset:-16px -12px; }
 body[data-portal-page="login"] .wf-auth-welcome h1 { font-size:36px; letter-spacing:-1px; }
 body[data-portal-page="login"] .wf-auth-panel { padding:34px 28px; }
 body[data-portal-page="login"] .wf-auth-panel h2 { font-size:30px; }
 body[data-portal-page="login"] .auth-footer { justify-content:center; padding-bottom:20px; }
}
@media(max-width:360px) {
 body[data-portal-page="login"] .wf-auth-panel { padding-inline:24px; }
 body[data-portal-page="login"] .wf-auth-button { gap:10px; padding-inline:12px; font-size:14px; }
}
@media(max-height:600px) {
 body[data-portal-page="login"] .auth-header-inner { padding-block:14px; }
 body[data-portal-page="login"] .wf-auth-main { padding-block:20px; }
 body[data-portal-page="login"] .wf-auth-panel { padding-block:28px; }
}
/* One calm entrance and a finite prompt; never loop a call to action. */
.wf-auth-success { padding:8px 0 4px; text-align:center; }
.wf-auth-check { display:grid; place-items:center; width:68px; height:68px; margin:0 auto 18px; border:1px solid #cce5de; border-radius:50%; background:#edf7f3; color:#23725b; font-size:32px; line-height:1; }
body[data-portal-page="login"] .wf-auth-success p { margin:0 0 12px; color:#23725b; font-size:18px; }
body[data-portal-page="login"] .wf-auth-panel[data-state="success"] { text-align:center; }
body[data-portal-page="login"] .wf-auth-panel[data-state="success"]::before { margin-inline:auto; }
body[data-portal-page="login"] .wf-auth-panel[data-state="opening"] .wf-auth-button { opacity:1; background:#0d385f; }
body[data-portal-page="login"] .wf-auth-panel[data-state="opening"] .wf-auth-button::after { content:""; width:17px; height:17px; border:2px solid #ffffff55; border-top-color:#fff; border-radius:50%; }
@media(prefers-reduced-motion:no-preference) {
 body[data-portal-page="login"] .wf-auth-welcome h1 { animation:wf-auth-arrive .65s ease-out both; }
 body[data-portal-page="login"] .wf-auth-panel { animation:wf-auth-arrive .55s .12s ease-out both; }
 body[data-portal-page="login"] .wf-auth-panel[data-state="ready"] .wf-auth-button { animation:wf-auth-invite 1.5s .45s 2; }
 body[data-portal-page="login"] .wf-auth-button { transition:background .18s,transform .18s; }
 body[data-portal-page="login"] .wf-auth-button:hover:not(:disabled) { transform:translateY(-2px); }
 body[data-portal-page="login"] .wf-auth-panel[data-state="opening"] .wf-auth-button::after { animation:wf-auth-spin .8s linear infinite; }
 body[data-portal-page="login"] .wf-auth-panel[data-state="success"] { animation:wf-auth-confirm .9s ease both; }
 .wf-auth-success .wf-auth-check { animation:wf-auth-arrive .35s ease-out both; }
 @keyframes wf-auth-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
 @keyframes wf-auth-invite { 0%,100% { box-shadow:0 4px 12px #17648921; } 50% { box-shadow:0 0 0 5px #1764891c,0 6px 18px #17648924; } }
 @keyframes wf-auth-spin { to { transform:rotate(360deg); } }
 @keyframes wf-auth-confirm { 0% { opacity:.4; transform:translateY(6px); } 25%,80% { opacity:1; transform:translateY(0); } 100% { opacity:.25; transform:translateY(-5px); } }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }