/* Walsall Wood identity, shared by the existing staff and member surfaces. */
:root{--ink:#173e49;--ink2:#244f5c;--cream:#f4f7f7;--card:#fff;--line:#d9e4e6;--line2:#e6eded;--line3:#bdcfd3;--gold:#226477;--gold-dk:#174e5e;--mut:#536c73}
body.light{--panel:#f1f6f7;--panel2:#f6f9f9;--line:#cbdcdf;--bright:#174e5e;--mut:#536c73;--txt:#17343e;--white:#174e5e;--tagk:#174e5e;--rowline:rgba(23,78,94,.13);--rowhover:rgba(23,78,94,.05);--nav-bg:#0f4252;--nav-mut:#c3d9df;--nav-accent:#fff}
body:has(.access-header){background:#f4f7f7}
.access-header{background:#0f4252;border-color:#245766;gap:12px;padding:12px max(16px,calc((100vw - 1200px)/2))}
.access-header .brand{font-size:20px;gap:12px;line-height:1.2;letter-spacing:0;color:#fff}
.access-header .brand img{width:78px;height:36px;filter:none;opacity:1;flex-shrink:0}
.header-note{color:#d7e7eb;text-transform:none;letter-spacing:.3px}
.auth-art{background:#0f4252;border-color:#245766}
.auth-art>img{width:150px;height:auto;filter:none;opacity:1}
.auth-art:after{border-color:#ffffff24;inset:16px}
.art-caption{left:16px;right:16px;bottom:16px;font-size:21px;color:#fff}
.art-caption span{color:#d7e7eb}
body:has(.auth-layout) main{padding:16px;align-items:flex-start;min-height:0;max-width:860px;flex:0 0 auto}
.auth-layout{min-height:0;grid-template-columns:minmax(180px,.85fr) minmax(0,1.15fr)}
.auth-form{padding:16px}
.auth-form h1{font-size:30px;margin:8px 0 16px}
.auth-form form>label:not(:first-child){margin-top:12px}
.field-heading{margin-top:12px}
.auth-submit{margin-top:16px;color:#fff;background:#174e5e}
.auth-submit:hover{background:#0f4252;color:#fff}
.auth-bottom{margin-top:12px}
footer{padding:12px 16px;text-align:center;line-height:1.5}
.ww-network{display:block;margin-top:4px;font-size:12px;color:#536c73}
.ww-shell-network{font-size:12px;border-top:1px solid var(--line);margin-top:12px;color:var(--mut)}
.ww-shell-network .ww-network{color:inherit}
nav .b .lg{width:68px;height:30px;object-fit:contain;filter:none!important}
nav .b{padding-right:12px}
.k{letter-spacing:.7px;text-transform:none}
nav #navtabs a,nav #navtabs button{text-transform:none}
#modroot[data-system="management"] .head{padding:12px 16px 0}
#modroot[data-system="management"] .wrap{padding:12px 16px 16px}
#modroot[data-system="management"] .tb{flex-wrap:wrap;gap:8px}
#modroot[data-system="management"] .tb input{min-width:0;flex:1 1 180px}
#modroot[data-system="management"] .tb>span{display:flex;flex-wrap:wrap;gap:6px}
#modroot[data-system="management"] :is(button,th,label,.l),.ww-management-dialog :is(button,.ec-cube-h,.ec-row .l){text-transform:none;letter-spacing:.2px}
.ww-management-dialog a,#modroot[data-system="management"] td a{color:var(--bright)}
.ww-management-dialog :is(button,.tbtn){min-height:44px;text-transform:none}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid #226477;outline-offset:3px}
@media(max-width:640px){
 .access-header{align-items:flex-start;flex-wrap:wrap;padding:12px}
 .access-header .brand{font-size:17px;max-width:100%;gap:10px}
 .access-header .brand img{width:64px;height:30px}
 .header-note{font-size:11px}
 body:has(.auth-layout) main{padding:12px;min-height:0}
 .auth-layout{display:block;min-height:0}
 .auth-art{display:none}
 .auth-form{padding:12px}
 .ww-network{max-width:290px;margin:4px auto 0}
 nav .b .lg{width:54px;height:26px}
}