/* SurgeX · foundation.css — the shell (member + staff), sign-in/reset, Today, not-found. Owner: foundation. */

/* ═════════ Shell ═════════ */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;height:36px;padding:0 12px;display:inline-flex;align-items:center;border-radius:8px;background:var(--btn);color:var(--btn-ink);font:600 13px/1 var(--ui);text-decoration:none}
.skip:focus{left:16px}
.view{display:block;min-width:0}
.view:focus{outline:none}

/* member: top bar */
.appbar{height:60px;display:flex;align-items:center;gap:28px;padding:0 var(--gutter);max-width:var(--maxw);margin:0 auto}
.appbar .brand{display:block;border-radius:6px;flex:none}
.appbar .logo{width:96px}
.nav{display:flex;gap:2px;margin-left:8px}
.nav a{height:32px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border-radius:8px;font:500 13px/18px var(--ui);color:var(--ink-2);text-decoration:none;transition:background-color var(--t-fast)}
.nav a[aria-current="page"]{background:var(--s2);color:var(--ink)}
.nav a [data-count]:empty{display:none}
.me{display:flex;align-items:center;gap:10px;height:40px;padding:0 6px 0 10px;border-radius:8px;font:500 13px/18px var(--ui);color:var(--ink);transition:background-color var(--t-fast)}
.me .tier{color:var(--ink-3)}
.me[aria-expanded="true"]{background:var(--s2)}
.tabbar{display:none}
@media (hover:hover){.nav a:not([aria-current="page"]):hover,.me:hover{background:var(--s2);color:var(--ink)}}
@media (max-width:1180px){.me .tier{display:none}}
@media (max-width:760px){
  body[data-chrome="member"]{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .appbar{height:52px;gap:12px}
  .appbar .logo{width:80px}
  .nav,.me .nm{display:none}
  .me{padding:0 4px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);height:calc(64px + env(safe-area-inset-bottom));padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--s1);box-shadow:0 -1px 0 var(--hair)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:500 11px/14px var(--ui);color:var(--ink-3);text-decoration:none;border-radius:8px;min-width:0}
  .tabbar a[aria-current="page"]{color:var(--ink)}
  .tabbar .ti{position:relative;display:grid}
  .tabbar .ti [data-count]{position:absolute;top:-6px;left:12px}
  .tabbar .ti .count{height:16px;min-width:16px;font-size:10px;padding:0 4px}
}

/* staff: side rail */
.shell-staff{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.rail{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:18px;padding:18px 12px 12px;background:var(--s1);box-shadow:1px 0 0 var(--hair);z-index:var(--z-bar)}
.rail .brand{display:block;padding:4px 8px;border-radius:6px;align-self:flex-start}
.rail .logo{width:88px}
.rail .xmark.compact{display:none}
.role-switch{display:flex;width:100%}
.role-switch button{flex:1;justify-content:center;height:30px}
.rail-nav{display:flex;flex-direction:column;gap:2px}
.rail-nav a{position:relative;display:flex;align-items:center;gap:10px;height:34px;padding:0 8px 0 10px;border-radius:8px;font:500 13px/18px var(--ui);color:var(--ink-2);text-decoration:none;transition:background-color var(--t-fast)}
.rail-nav a .lbl{flex:1;min-width:0}
.rail-nav a svg.i{color:var(--ink-3)}
.rail-nav a[aria-current="page"]{background:var(--s3);color:var(--ink);box-shadow:0 0 0 1px var(--edge)}
.rail-nav a[aria-current="page"] svg.i{color:var(--ink)}
.rail-me{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:8px;text-align:left;transition:background-color var(--t-fast)}
.rail-me .who{flex:1;min-width:0}
.rail-me b{display:block;font:600 13px/18px var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-me small{display:block;font:500 12px/16px var(--ui);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-me svg.i{color:var(--ink-3)}
.rail-me[aria-expanded="true"]{background:var(--s2)}
.staff-top{display:none}
.sheet-nav{display:flex;flex-direction:column;gap:2px}
.sheet-nav .menu-item{height:44px;font-size:15px}
.sheet-nav .menu-item[aria-current="page"]{background:var(--s3)}
@media (hover:hover){.rail-nav a:not([aria-current="page"]):hover,.rail-me:hover{background:var(--s2);color:var(--ink)}}
@media (max-width:1180px){
  .shell-staff{grid-template-columns:64px minmax(0,1fr)}
  .rail{padding:16px 10px 10px;align-items:center}
  .rail .brand{align-self:center;padding:4px}
  .rail .logo.full{display:none}
  .rail .xmark.compact{display:block;width:30px;height:30px}
  .role-switch{flex-direction:column;width:44px}
  .role-switch button span{display:none}
  .rail-nav a{width:44px;justify-content:center;padding:0}
  .rail-nav a .lbl{display:none}
  .rail-nav a [data-count]{position:absolute;top:-3px;right:-3px}
  .rail-nav a .count{height:16px;min-width:16px;font-size:10px;padding:0 4px}
  .rail-me{width:44px;justify-content:center;padding:6px 0}
  .rail-me .who,.rail-me > svg.i{display:none}
}
@media (max-width:760px){
  .shell-staff{display:block}
  .rail{display:none}
  .staff-top{display:flex;align-items:center;gap:12px;height:52px;padding:0 8px 0 16px;position:sticky;top:0;z-index:var(--z-bar);background:var(--page);box-shadow:0 1px 0 var(--hair)}
  .staff-top .brand{display:block;border-radius:6px}
  .staff-top .xmark{width:28px;height:28px}
  .staff-top .where{font:600 15px/20px var(--ui)}
}

/* ═════════ Sign in + reset ═════════ */
.auth{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.auth-main{display:flex;flex-direction:column;padding:28px 56px 28px;min-width:0}
.auth-main > .brand{display:block;align-self:flex-start;border-radius:6px}
.auth-main .logo{width:104px}
.auth-form{margin:auto 0;width:100%;max-width:400px;padding:40px 0}
.auth-form h1{font-size:40px;line-height:44px}
.auth-sub{margin:10px 0 28px}
.auth-sub .ink,.ink{color:var(--ink);font-weight:600}
.auth-back{margin-bottom:28px}
.auth-glyph{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:var(--s3);color:var(--ink-2);box-shadow:0 0 0 1px var(--edge);margin-bottom:18px}
.auth-glyph.ok{background:var(--ok-bg);color:var(--ok);box-shadow:none}
.auth-glyph.due{background:var(--due-bg);color:var(--due);box-shadow:none}
.auth-or{display:flex;align-items:center;gap:12px;margin:28px 0 12px;font:500 12px/16px var(--ui);color:var(--ink-3)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--hair)}
.personas .persona{min-height:56px;padding:8px 12px}
.persona-in{display:flex;align-items:center;gap:12px;min-width:0}
.persona .t{min-width:0}
.persona .t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.persona .r svg.i{color:var(--ink-3);transition:transform var(--t-fast)}
@media (hover:hover){.persona:hover .r svg.i{color:var(--ink);transform:translateX(2px)}}
.auth-honest{margin-top:10px}
.auth-new{margin-top:24px;font:500 13px/18px var(--ui);color:var(--ink-2)}
.auth-foot{margin-top:auto}
.auth-foot a{color:var(--ink-2);text-underline-offset:3px;text-decoration-color:var(--hair-2)}
.pw-rules{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.pw-rules li{display:flex;align-items:center;gap:6px;font:500 12px/16px var(--ui);color:var(--ink-3)}
.pw-rules li svg.i{opacity:.35}
.pw-rules li.met{color:var(--ok)} .pw-rules li.met svg.i{opacity:1}
.pw-rules li.miss:not(.met){color:var(--err)}
.auth-side{padding:16px 16px 16px 0;min-width:0}
.auth-stage{position:sticky;top:16px;height:calc(100vh - 32px);height:calc(100dvh - 32px);min-height:560px;border-radius:var(--r-panel);overflow:hidden;background:var(--stage-bg);color:var(--ink)}
.auth-stage > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.auth-stage::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(to top,rgba(7,16,11,.92) 0%,rgba(7,16,11,.55) 45%,rgba(7,16,11,0) 100%);pointer-events:none}
.auth-stage .hipline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.auth-stage .hipline .ln{stroke:#F4F1EC;stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke;opacity:.92}
.auth-stage .hipline .ln.d{stroke-dasharray:3 5;opacity:.7}
.auth-stage .hipline .j{fill:#F4F1EC}
.auth-stage .hud{position:absolute;left:16px;top:16px;display:flex;gap:6px;z-index:1}
.auth-stage .hud span{height:26px;display:inline-flex;align-items:center;padding:0 9px;border-radius:6px;background:var(--stage-hud);color:#ECE8E0;font:500 12px/1 var(--ui);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.auth-stage .hud .tc{font-size:13px}
.auth-card{position:absolute;left:32px;bottom:32px;width:min(460px,calc(100% - 64px));z-index:1}
.auth-card .cuecard{box-shadow:var(--shadow-float)}
.auth-tl{margin-top:4px;padding:0 4px}
.auth-tl .tl{margin-top:10px}
.auth-tl .tl .ph::after{box-shadow:0 0 0 2px rgba(7,16,11,.9)}
.auth-tl .tl .reps i{background:rgba(7,16,11,.9)}
@media (max-width:1100px){.auth{grid-template-columns:minmax(0,480px) minmax(0,1fr)}.auth-main{padding:24px 40px}}
@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-main{padding:18px var(--gutter) 28px}
  .auth-form{max-width:480px;margin:0 0 auto;padding:36px 0 32px}
}
@media (max-width:760px){.auth-form h1{font-size:34px;line-height:38px}.auth-main .logo{width:88px}}

/* ═════════ Today ═════════ */
.today .titlerow{padding-top:28px}
.today .titlerow .sub{gap:8px 14px}
.today .titlerow .sub .facts{gap:6px 14px}
.today-notice-phone{display:none}
.today-split .split-stage{display:flex;flex-direction:column}
.today-stage{aspect-ratio:21/9}
.today-blocks{margin-top:22px;padding:0 4px}
.mv > span:first-child{min-width:0}
.mv-focus{display:block;font:400 12px/18px var(--ui);color:var(--ink-3);margin-top:1px}
.today-foot{margin-top:auto}
.today-ctx{gap:22px}
.today-notice{transition:background-color var(--t-fast)}
.today-notice .btn{pointer-events:none}
.ctx-sec + .ctx-sec{padding-top:22px;border-top:1px solid var(--hair)}
.ctx-sec .allow.ruled{padding-top:0;border-top:0}
.ctx-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.ctx-note{margin-top:8px}
.callnext{display:flex;align-items:center;gap:12px}
.callnext b{display:block;font:600 13px/18px var(--ui)}
.callnext .meta{display:block}
.glyph-sm{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:var(--inset);color:var(--ink-3);flex:none}
@media (hover:hover){.today-notice:hover{background:var(--s2)}}
@media (max-width:1180px){.today-stage{aspect-ratio:16/7}}
@media (max-width:760px){
  .today .titlerow{padding-top:16px}
  .today .titlerow .acts{display:grid;grid-template-columns:1fr auto;gap:8px}
  .today .titlerow .acts .btn-s{padding:0 14px}
  .today-notice-phone{display:block;margin:0 0 16px}
  .today-notice-ctx{display:none}
  .today-stage{aspect-ratio:16/9}
  .today-blocks{padding:16px var(--gutter) 0;margin-top:0}
  .today-foot{margin:16px var(--gutter) 0 !important;padding-top:12px !important;border-top:1px solid var(--hair) !important}
  .today-ctx{padding-top:24px !important}
}

/* ═════════ Not found ═════════ */
.nf{padding-top:56px}
.nf-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.nf-copy .meta{margin-bottom:10px;letter-spacing:.04em}
.nf-copy .lead{margin-top:14px;max-width:44ch}
@media (max-width:900px){.nf{padding-top:24px}.nf-grid{grid-template-columns:1fr;gap:28px}}