/* CHQ-AUTH-LOOK-V1 (s158, David "ok, and accually the member portal when on a phone its actually looks like a phone sign in so make sure that still looks like a phone but the right colors").
   The ONE sign-in look: the staff login layout - a navy left panel (logo, Playfair headline with one gold italic word, a grey sub-line, gold-dot bullets)
   and a white right panel with the form. Every sign-in page loads this file through includes/chq-auth-shell.php (chq_auth_head) and keeps only the few
   rules that are truly its own. Brand: navy #0B2A57, blue #4D74AD, light blue #8FB0E0, gold #C9923A (accent words, bullet dots, small accents only).
   Nothing here is under 14px. Guarded by tests/unit/auth-look.test.php. */
:root{--navy:#0B2A57;--navy-hover:#163A70;--navy-pale:#EAF0F8;--blue:#4D74AD;--blue-light:#8FB0E0;--gold:#C9923A;--ink:#0E1B2E;--cream:#F5F7FB;--white:#FFFFFF;--gray-300:#D3DAE4;--gray-500:#5F6B7A;--gray-700:#3B4656;--border:rgba(11,42,87,0.12);--green:#16A34A;--red:#DC2626;--auth-panel:radial-gradient(120% 90% at 15% 0%,#1d4680 0%,#0f305f 48%,#0a2147 100%);}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--ink);min-height:100vh;display:flex;flex-direction:column;font-size:16px;}
a{color:var(--navy);}
.login-wrap{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:100vh;}
.login-left{background:var(--auth-panel);display:flex;flex-direction:column;justify-content:space-between;padding:3rem;position:relative;overflow:hidden;color:var(--white);}
.login-left::before{content:'';position:absolute;top:-20%;right:-20%;width:520px;height:520px;background:radial-gradient(circle,rgba(143,176,224,0.12) 0%,transparent 70%);border-radius:50%;pointer-events:none;}
.login-left>*{position:relative;z-index:1;}
.login-brand{display:inline-flex;align-items:center;gap:0.65rem;text-decoration:none;align-self:flex-start;}
.login-church{display:flex;align-items:center;gap:0.85rem;}
.login-church img{width:52px;height:52px;object-fit:contain;border-radius:12px;background:var(--white);padding:4px;flex-shrink:0;}
.login-church-name{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;color:var(--white);line-height:1.25;}
.login-tagline{flex:1;display:flex;flex-direction:column;justify-content:center;padding:2rem 0;}
.login-tagline h2{font-family:'Playfair Display',serif;font-size:clamp(1.9rem,2.6vw,2.6rem);font-weight:700;color:var(--white);line-height:1.2;letter-spacing:-0.02em;margin-bottom:1rem;}
.login-tagline h2 em{color:var(--gold);font-style:italic;}
.login-tagline p{font-size:0.95rem;color:rgba(255,255,255,0.62);line-height:1.7;max-width:400px;}
.trust-items{display:flex;flex-direction:column;gap:0.6rem;}
.trust-item{display:flex;align-items:center;gap:0.6rem;font-size:0.875rem;color:rgba(255,255,255,0.72);}
.trust-dot{width:6px;height:6px;background:var(--gold);border-radius:50%;flex-shrink:0;}
.auth-steps{list-style:none;display:flex;flex-direction:column;gap:0.75rem;margin:0 0 2rem;}
.auth-steps li{display:flex;align-items:center;gap:0.75rem;font-size:0.95rem;color:rgba(255,255,255,0.6);transition:color .3s;}
.auth-step-n{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--blue);display:inline-flex;align-items:center;justify-content:center;font-size:0.875rem;font-weight:600;flex-shrink:0;transition:all .3s;}
.auth-steps li.on{color:var(--white);font-weight:600;}
.auth-steps li.on .auth-step-n{background:var(--blue);border-color:var(--blue);color:var(--white);}
.auth-steps li.done .auth-step-n{background:var(--blue-light);border-color:var(--blue-light);color:var(--navy);}
.login-powered{display:flex;align-items:center;gap:0.5rem;margin-top:1.5rem;font-size:0.875rem;color:rgba(255,255,255,0.55);}
.login-mbar{display:none;background:var(--auth-panel);padding:0.9rem 1.25rem;align-items:center;}
.login-mbar a{display:inline-flex;}
.login-right{background:var(--white);display:flex;align-items:center;justify-content:center;padding:3rem 2rem;}
.login-form-wrap{width:100%;max-width:400px;}
.login-form-wrap.wide{max-width:440px;}
.login-title{font-family:'Playfair Display',serif;font-size:1.75rem;font-weight:700;color:var(--ink);margin-bottom:0.35rem;letter-spacing:-0.02em;}
.login-sub{font-size:0.95rem;color:var(--gray-500);margin-bottom:2rem;line-height:1.55;}
.form-group{margin-bottom:1.1rem;}
.form-label{display:block;font-size:0.875rem;font-weight:600;color:var(--gray-700);margin-bottom:0.4rem;letter-spacing:0.01em;}
.form-input{width:100%;padding:0.75rem 1rem;border:1.5px solid var(--gray-300);border-radius:8px;font-size:1rem;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--cream);outline:none;transition:all 0.2s;}
.form-input:focus,.code-input:focus{border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(77,116,173,0.18);}
.code-input{width:100%;padding:0.9rem 1rem;border:1.5px solid var(--gray-300);border-radius:10px;font-size:1.6rem;font-family:ui-monospace,monospace;letter-spacing:0.6rem;text-align:center;color:var(--ink);background:var(--cream);outline:none;transition:all 0.2s;margin-bottom:12px;}
.form-row-inline{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;margin-bottom:1.5rem;}
.form-row-inline label{font-size:0.875rem;color:var(--gray-700);cursor:pointer;display:inline-flex;align-items:center;gap:0.4rem;}
.form-row-inline a{font-size:0.875rem;color:var(--navy);font-weight:500;text-decoration:none;}
.form-row-inline a:hover{text-decoration:underline;}
.btn-login,.btn-primary{display:block;width:100%;padding:0.9rem;background:var(--navy);color:var(--white);border:none;border-radius:10px;font-size:1rem;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all 0.2s;text-align:center;text-decoration:none;}
.btn-login{margin-bottom:1rem;}
.btn-login:hover,.btn-primary:hover{background:var(--navy-hover);transform:translateY(-1px);box-shadow:0 10px 28px rgba(11,42,87,0.28);}
.btn-login:disabled,.btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-signup,.btn-secondary{display:block;width:100%;padding:0.85rem;background:transparent;color:var(--navy);border:1.5px solid var(--navy);border-radius:10px;font-size:1rem;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all 0.2s;text-align:center;text-decoration:none;}
.btn-signup:hover,.btn-secondary:hover{background:var(--navy);color:var(--white);}
.btn-danger{display:block;width:100%;padding:0.9rem;background:var(--red);color:var(--white);border:none;border-radius:10px;font-size:1rem;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;}
.btn-danger:hover{background:#B01C1C;}
.btn-text{display:block;width:100%;background:none;border:none;padding:0.7rem;margin-top:0.25rem;color:var(--gray-500);font-size:0.875rem;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;}
.btn-text:hover{color:var(--navy);}
.divider{display:flex;align-items:center;gap:1rem;margin:1.25rem 0;color:var(--gray-500);font-size:0.875rem;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--gray-300);}
.alert,.alert-error,.alert-success,.alert-info{border-radius:8px;padding:0.85rem 1rem;font-size:0.9rem;margin-bottom:1.25rem;font-weight:500;line-height:1.55;border:0;} /* s158 David: no coloured side bars - plain soft boxes */
.alert-error{background:#FEE2E2;border-color:var(--red);color:#991B1B;}
.alert-info{background:var(--navy-pale);border-color:var(--blue);color:var(--navy);}
.alert-success{background:#DCFCE7;border-color:var(--green);color:#166534;}
.alert svg{vertical-align:-2px;margin-right:5px;}
.alert-success strong{display:block;font-size:1rem;margin-bottom:0.35rem;}
.lock-icon{font-size:0.875rem;margin-bottom:1.5rem;color:var(--gray-500);display:flex;align-items:center;gap:0.4rem;}
.lock-icon svg{flex-shrink:0;}
.back-link,.need-help{display:block;text-align:center;margin-top:1.5rem;font-size:0.875rem;color:var(--gray-500);}
.back-link a,.need-help a,a.back-link{color:var(--navy);font-weight:500;text-decoration:none;}
.back-link a:hover,.need-help a:hover,a.back-link:hover{text-decoration:underline;}
.login-footer{text-align:center;padding:1.5rem;font-size:0.875rem;color:var(--gray-500);background:var(--cream);}
.login-footer a{color:var(--gray-500);text-decoration:none;margin:0 0.5rem;}
.login-footer a:hover{color:var(--navy);}
@media(max-width:768px){.login-wrap{grid-template-columns:1fr;grid-template-rows:auto 1fr;}.login-left{display:none;}.login-mbar{display:flex;}.login-right{padding:2rem 1.25rem;align-items:flex-start;}}