/* Staff app: same look as the member home (crossfitreigate.co.uk feel). Montserrat headings, Space Grotesk body,
   light green canvas, white rounded cards, pill buttons, green-on-white sidebar with the hexagon mark. Loaded after app.css. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
body:not(.member){
  --mg:#306D47;--mg2:#066F43;--mg-soft:#e3efe7;--ink:#0d1210;--muted:#5f6b63;--line:#e3e8e4;--bg:#f3f5f3;--card:#fff;--brand:var(--mg);--brand2:#3f8a5c;
  --radius:16px;--shadow:0 6px 22px rgba(10,30,18,.07);--head:'Montserrat',Arial,sans-serif;
  --sb:#fff;--sb-ink:#3d4a42;
  font-family:'Space Grotesk',Arial,Helvetica,sans-serif;font-size:14.5px;background:var(--bg);color:var(--ink);
}
body:not(.member) h1,body:not(.member) h2,body:not(.member) h3{font-family:var(--head);text-transform:uppercase;letter-spacing:-.01em}
body:not(.member) h1{font-weight:900;font-size:26px;line-height:1.05}body:not(.member) h2{font-weight:800;font-size:16px}body:not(.member) h3{font-weight:800;font-size:13px;letter-spacing:.03em}
/* Sidebar: white, green accents, hexagon mark */
body:not(.member) #sidebar{background:#fff;color:var(--sb-ink);border-right:1px solid var(--line)}
body:not(.member) .brand{border-bottom:1px solid var(--line);padding:18px 16px}
body:not(.member) .brand .logo,body:not(.member) .brand .brand-mark{background:var(--mg);color:#fff;width:40px;height:40px;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%)}
body:not(.member) .brand img.brand-mark{object-fit:cover;background:var(--mg) url(icons/mark-white.png) center/70% no-repeat;padding:0}
body:not(.member) .brand b{color:var(--ink);font-family:var(--head);font-weight:900;font-size:15px;letter-spacing:.02em;text-transform:uppercase}
body:not(.member) .brand small{color:var(--muted);letter-spacing:.14em;font-size:9.5px}
body:not(.member) #nav{padding:8px}
body:not(.member) #nav a{color:var(--sb-ink);border-left:0;border-radius:12px;margin:2px 0;padding:10px 12px;font-weight:600;font-size:13.5px}
body:not(.member) #nav a:hover{background:var(--mg-soft);color:var(--mg)}body:not(.member) #nav a.active{background:var(--mg);color:#fff;font-weight:700;box-shadow:0 6px 16px rgba(48,109,71,.25)}
body:not(.member) #nav a .ic{opacity:.9}
body:not(.member) .sb-foot{border-top:1px solid var(--line);color:var(--muted)}body:not(.member) .sb-foot a{color:var(--mg)}
/* Top bar: frosted like the member app */
body:not(.member) #topbar{background:rgba(243,245,243,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:0}
body:not(.member) #globalSearch,body:not(.member) input,body:not(.member) select,body:not(.member) textarea{border-radius:12px;border:1px solid var(--line);background:#fff}
body:not(.member) #globalSearch{background:#fff}
/* Cards, tiles, tables */
body:not(.member) .card,body:not(.member) .tile{border:0;border-radius:var(--radius);box-shadow:var(--shadow)}
body:not(.member) .grid.g4 .tile:first-child{background:var(--mg);background-image:none;color:#fff;box-shadow:0 10px 24px rgba(48,109,71,.28)}
body:not(.member) .tile .lbl{font-family:var(--head);font-weight:800;letter-spacing:.12em;font-size:10px}
body:not(.member) .tile .val{font-family:var(--head);font-weight:900;font-size:28px;letter-spacing:-.02em}
body:not(.member) th{font-family:var(--head);font-weight:800;font-size:10px;letter-spacing:.08em;background:transparent}
body:not(.member) tr:last-child td{border-bottom:0}
body:not(.member) .card.tight table{border-radius:var(--radius)}
/* Buttons: pills */
body:not(.member) .btn{border-radius:999px;font-family:var(--head);font-weight:800;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:9px 16px}
body:not(.member) .btn.sm{padding:7px 13px;font-size:10.5px}body:not(.member) .btn.xs{padding:4px 10px;font-size:9.5px}
body:not(.member) .btn.ghost{background:#fff;color:var(--mg)}body:not(.member) .btn.grey{background:#fff;color:var(--ink);border-color:var(--line)}
body:not(.member) .tabs{gap:6px;border:0;margin:0 0 14px;padding:4px;background:#e8ece9;border-radius:999px;display:inline-flex;max-width:100%;overflow-x:auto;scrollbar-width:none}
body:not(.member) .tabs a{padding:7px 14px;border:0;border-radius:999px;color:var(--muted);font-family:var(--head);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;margin:0}
body:not(.member) .tabs a.active{background:#fff;color:var(--mg);box-shadow:0 2px 8px rgba(0,0,0,.08);border:0;font-size:11px}
body:not(.member) .badge{font-family:var(--head);font-weight:800;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;border-radius:999px}
body:not(.member) .badge.green{background:var(--mg-soft);color:var(--mg)}
body:not(.member) .bars div{border-radius:6px 6px 0 0;background:var(--mg)}body:not(.member) .bars div:nth-child(even){background:#a7cdb6}
body:not(.member) .kcol{background:#e8ece9;border-radius:14px}body:not(.member) .kcard{border-radius:12px;border:0}
body:not(.member) .ev{border-radius:6px}body:not(.member) .cal{border-radius:14px;border:0;box-shadow:var(--shadow)}
body:not(.member) .modal-card{border-radius:18px}body:not(.member) .modal-head h3{font-size:15px}
body:not(.member) .avatar{background:var(--mg)}
/* Home hero: photo with a green wash, box name on top, greeting in the middle (same as the member home) */
.staff-hero{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/5;min-height:170px;margin-bottom:16px;background:#1b2a20 center/cover no-repeat;box-shadow:var(--shadow);animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.staff-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,111,67,.12) 0%,rgba(6,111,67,.35) 45%,rgba(8,20,13,.8) 100%)}
.staff-hero .boxname{position:absolute;top:14px;left:0;right:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-family:var(--head);font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.staff-hero .boxname img{height:24px}
.staff-hero .txt{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 16px}
.staff-hero .txt .kicker{font-family:var(--head);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.staff-hero .txt h1{color:#fff;margin:4px 0;font-size:clamp(30px,5vw,48px);text-shadow:0 2px 12px rgba(0,0,0,.35)}
.staff-hero .txt .sub{color:rgba(255,255,255,.88);font-size:13px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body:not(.member) .card{animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
body:not(.member) .grid.g4 .tile{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}body:not(.member) .grid.g4 .tile:nth-child(2){animation-delay:.06s}body:not(.member) .grid.g4 .tile:nth-child(3){animation-delay:.12s}body:not(.member) .grid.g4 .tile:nth-child(4){animation-delay:.18s}
@media(prefers-reduced-motion:reduce){body:not(.member) *{animation:none!important}}
/* "Go back to member page" link at the bottom of the staff nav */
body:not(.member) #nav a.to-member{margin-top:10px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;padding-top:14px;color:var(--mg);font-weight:700}
/* Dropdown menus (e.g. "More" on a member profile) must sit above the cards below them */
body:not(.member) .menu{position:relative}
body:not(.member) .menu.open{z-index:70}
body:not(.member) .card:has(.menu.open){position:relative;z-index:60;overflow:visible;animation:none}
body:not(.member) .menu .dd{z-index:80;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);border:1px solid var(--line);padding:6px 0}
body:not(.member) .menu .dd a{padding:9px 16px;font-weight:500}
/* Phone: keep the top bar inside the screen (it was pushing the page wider than the viewport) */
@media(max-width:900px){
  body:not(.member) #topbar{flex-wrap:nowrap;gap:8px;padding:10px 12px;overflow:hidden}
  body:not(.member) #globalSearch{flex:1 1 auto;min-width:0;width:auto}
  body:not(.member) #today{display:none}
  body:not(.member) #topbar .btn.ghost{display:none}
  body:not(.member) #searchResults{left:12px;right:12px;width:auto}
  body:not(.member) main#view{overflow-x:hidden;padding:14px 14px 40px}
  body:not(.member) .staff-hero{aspect-ratio:16/9;min-height:150px}
  body:not(.member) .staff-hero .txt h1{font-size:clamp(24px,8vw,40px)}
  body:not(.member) .staff-hero .boxname{font-size:11px;letter-spacing:.14em}
  body:not(.member) .page-head{gap:8px}body:not(.member) .page-head h1{font-size:22px}
  body:not(.member) .card.tight{overflow-x:auto}
}