/* YOSI portal skin v2: makes every portal page feel like the website.
   Loads AFTER yosi-ui.css (and shell.css on the admin). Needs portal-header.css + portal-bar.js for the site header. */
:root{--wrap:1200px;--gutter:clamp(16px,4vw,40px);--r-pill:999px;--hdr-h:78px;--green-d:#4f7d60}

/* ---------- the website header, on every portal page ---------- */
body.has-sitebar>header:not(.site-header){display:none!important}
.site-header{position:sticky;top:0;z-index:100;padding:14px var(--gutter);background:linear-gradient(#fff 72%,rgba(255,255,255,0));border:0;box-shadow:none;backdrop-filter:none;font:500 16px/1.55 Manrope,system-ui,sans-serif}
.site-header ul{list-style:none;margin:0;padding:0}
.site-header a{color:inherit;text-decoration:none}
.site-header img{display:block;max-width:100%}
.site-header .hdr{background:transparent}
.site-header .login-link{font-size:14px;font-weight:600;color:var(--ink);padding:6px 4px;white-space:nowrap}
.site-header .login-link.here{color:var(--green-d)}
.site-header .btn{border:1px solid transparent;font-family:inherit;line-height:1.2}
.site-header .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line);padding:9px 18px}
.site-header .btn-ghost:hover{border-color:var(--ink);background:#fff;box-shadow:none;transform:none}
.site-header .btn-primary{border:0}
.site-header button{box-shadow:none}
.site-header .burger{background:#fff;border:1px solid var(--line);color:var(--ink);padding:0;width:42px;height:42px;border-radius:12px}
.site-header .burger:hover{background:#fff;transform:none;box-shadow:none;border-color:var(--ink)}
/* site-style typography for the whole portal */
body{font-size:15px}
h1,h2,h3{font-weight:600}
h1{font-weight:500;letter-spacing:-.04em}

/* ---------- admin shell: light side panel instead of dark navy ---------- */
body.in #app{min-height:calc(100vh - var(--hdr-h))}
body.in .side{top:var(--hdr-h);height:calc(100vh - var(--hdr-h));background:#fff;color:var(--ink);border-right:1px solid var(--line);padding:14px 14px 18px}
body.in .sb-top{padding:0 4px 8px;justify-content:flex-end}
body.in .sb-top img{display:none}
body.in .sb-tog{background:var(--mist);color:var(--ink);border:1px solid var(--line)}
body.in .sb-tog:hover{background:#fff;border-color:var(--ink);transform:none;box-shadow:none}
body.in #snav .grp{color:var(--mut);letter-spacing:.14em}
body.in #snav a{color:#444;font-weight:600;border-radius:999px}
body.in #snav a:hover{background:var(--mist);color:var(--ink)}
body.in #snav a.on{background:var(--charcoal);color:#fff}
body.in #snav a:focus-visible,body.in .sb-tog:focus-visible{outline:3px solid rgba(29,74,139,.35)}
body.in .sb-foot{border-top:1px solid var(--line);color:var(--mut)}
body.in .sb-foot b{color:var(--ink)}
body.in .sb-foot .chip,body.in .side .sb-foot .chip{background:var(--mist)!important;color:var(--ink)!important}
body.in .sb-foot button{background:#fff;color:var(--ink);border:1px solid var(--line)}
body.in .sb-foot button:hover{border-color:var(--ink);background:#fff;transform:none;box-shadow:none}
body.in .topbar{top:var(--hdr-h)}
body.in:before{display:none}
/* page header: big light site-style headline */
#phead .ph{padding-top:34px}
#phead h1,.hm h1{font-weight:500;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.045em;line-height:1.05}
#phead .crumbs{color:var(--blue);letter-spacing:.16em;font-weight:700;font-size:11px}
#phead p,.hm .sub{font-size:16px}
.hm-card>h2,.card>h2{font-weight:600;letter-spacing:-.02em}
.card,.hm-card{border-radius:24px}
.eyebrow{color:var(--blue);letter-spacing:.16em}

/* ---------- sign-in: same card as the website's Member login ---------- */
body:not(.in){background:#fff}
body:not(.in):before{display:none}
#login{display:block!important;max-width:520px!important;margin:clamp(24px,6vh,64px) auto!important;padding:clamp(24px,4vw,44px)!important;border-radius:32px!important;overflow:visible!important;box-shadow:0 26px 60px -30px rgba(11,26,42,.28)!important;border:1px solid var(--line)}
#login>*:not(.hero){margin-left:0!important;margin-right:0!important}
#login>.hero{display:block;background:none!important;color:var(--ink);padding:0!important;min-height:0;margin:0 0 6px!important}
#login>.hero:after,#login>.hero img{display:none}
#login>.hero .eyebrow{color:var(--blue)}
#login>.hero h2{color:var(--ink)!important;font-weight:500!important;font-size:clamp(34px,5vw,48px)!important;letter-spacing:-.045em!important;margin:8px 0 6px!important}
#login>.hero+p{margin-top:8px!important;font-size:15.5px;line-height:1.6}
#login #sendc,#login #vfy{width:100%;padding:14px 22px;font-size:15px}
#login input{padding:14px 16px;font-size:16px}
#login #demoacc{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
#login #demoacc summary{color:var(--mut);font-size:13px;font-weight:700}
#login #accts{max-height:220px}
@media(max-width:1080px){:root{--hdr-h:70px}}
@media(max-width:860px){body.in .side{top:0;height:100vh;z-index:120}body.in .topbar{top:var(--hdr-h);z-index:90;background:#fff}body.in .topbar img{display:none}}

/* shared look for the public portal pages (registration, passes, forms) */
body.pub .pubhero{border-radius:0 0 32px 32px}
.wrap{max-width:1240px}

/* fixes */
body.in>header.site-header{display:block}
#login.hide{display:none!important}
#login input#em,#login input#cd,#login>input{width:100%!important}

/* public portal pages (apply, invite, submit, registration...): light page head like the website, the site header carries the logo */
body.has-sitebar .pubhero{background:none;color:var(--ink);border-radius:0;padding:30px var(--gutter) 6px;max-width:calc(var(--wrap) + 80px);margin:0 auto;overflow:visible}
body.has-sitebar .pubhero:after,body.has-sitebar .pubhero>img{display:none}
body.has-sitebar .pubhero .eyebrow{color:var(--blue)}
body.has-sitebar .pubhero h1{color:var(--ink);font-weight:500;font-size:clamp(32px,4.4vw,54px);letter-spacing:-.045em;line-height:1.05}
body.has-sitebar .pubhero .mut{color:var(--mut)}
body.has-sitebar .pubhero button.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
body.has-sitebar .pubhero button.ghost:hover{background:var(--mist);color:var(--ink)}
body.has-sitebar:not(.in){background:#fff}
body.has-sitebar:not(.in) .wrap{margin:0 auto}
.site-header .login-link{max-width:200px;overflow:hidden;text-overflow:ellipsis}
/* YOSI 360 logo on the sign-in card (Nov 2026) */
#login>.hero img.y360{display:block;width:64px;height:64px;border-radius:16px;margin:0 0 14px;box-shadow:0 10px 22px -10px rgba(2,12,40,.55)}