/* FAC public pages: the class schedule. FAC's own look: black, one gold, the site's header and its three buttons.
   Tokens are the live site's (--ink, --paper, --panel, --gold). No web fonts, no external files. */
:root {
  --ink: #f9f4e9; --paper: #101112; --panel: #1b2022; --panel-2: #14181a; --muted: #b8b2a6;
  --gold: #ffd640; --gold-soft: rgba(255, 214, 64, .14); --gold-line: rgba(255, 214, 64, .34);
  --red: #ff7a6e; --ok: #8fe3a6; --radius: 24px; --radius-sm: 14px;
  /* the site's metal gold (src/styles.css --fac-yellow-metal-*) */
  --gold-metal: linear-gradient(180deg, rgba(255, 255, 255, .78), transparent 42%), linear-gradient(145deg, #fff9cf 0%, #facc15 27%, #d99a06 58%, #7b430c 100%);
  --gold-metal-border: rgba(117, 74, 8, .62); --gold-metal-text: #3b2a12;
  --gold-metal-shadow: 0 12px 28px rgba(0, 0, 0, .32), 0 0 18px rgba(255, 209, 61, .16), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(92, 49, 8, .64);
  --font: Inter, Montserrat, Arial, sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --hdr: 58px; /* the header's height; schedule.js keeps it exact */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--font); }
a { color: var(--gold); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.15; margin: 0; }
.vh, .skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 60; background: var(--gold); color: #1a1406; padding: 8px 14px; border-radius: 10px; font-weight: 800; }

/* ---------------- the site header, as on every other FAC page ----------------
   Lifted from the site's own stylesheet (index-4BDQ53DO.css, live 2026-10-23): every rule that styles the header or
   anything in it, at any width and in any state, rewritten so it reaches nothing outside <header class="site-header">.
   Edit the site header first, then lift it again; do not restyle it here. */
:where(.site-header) { --fac-yellow-metal-border: rgba(117, 74, 8, .62); font-family: Inter, Montserrat, Arial, sans-serif; font-size: 16px; line-height: normal; color: rgb(249, 244, 233); letter-spacing: normal; font-weight: 400; -webkit-font-smoothing: auto; text-rendering: auto; --gold: #ffd640; --radius-sm: 12px; --fac-yellow-metal-highlight: rgba(255, 244, 167, .82); --fac-yellow-metal-text: #3b2a12; --fac-yellow-metal-bg: linear-gradient(180deg, rgba(255, 255, 255, .78), transparent 42%), linear-gradient(145deg, #fff9cf 0%, #facc15 27%, #d99a06 58%, #7b430c 100%); --fac-yellow-metal-shadow: 0 12px 28px rgba(0, 0, 0, .32), 0 0 18px rgba(255, 209, 61, .16), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(92, 49, 8, .64); --fac-yellow-metal-hover-text: #fff7c7; --fac-yellow-metal-hover-bg: linear-gradient(120deg, rgba(255, 255, 255, .44), rgba(255, 226, 112, .2) 30%, rgba(0, 0, 0, .18) 58%, rgba(255, 255, 255, .1)), linear-gradient(145deg, rgba(255, 251, 225, .34) 0%, rgba(255, 217, 45, .34) 28%, rgba(228, 162, 10, .3) 60%, rgba(138, 74, 11, .26) 100%), rgba(18, 18, 14, .28); --fac-yellow-metal-hover-shadow: 0 14px 30px rgba(0, 0, 0, .36), 0 0 24px rgba(255, 226, 112, .22), inset 0 1px 0 rgba(255, 255, 255, .44), inset 0 -1px 0 rgba(0, 0, 0, .58); }
:is(*):where(.site-header),
:where(.site-header) :is(*) { box-sizing: border-box; }
:is(*):where(.site-header),
:where(.site-header) :is(*) { scrollbar-width: thin; scrollbar-color: rgba(124, 179, 255, 0.22) transparent; }
:is(*):where(.site-header)::-webkit-scrollbar,
:where(.site-header) :is(*)::-webkit-scrollbar { width: 6px; height: 6px; }
:is(*):where(.site-header)::-webkit-scrollbar-track,
:where(.site-header) :is(*)::-webkit-scrollbar-track { background: transparent; }
:is(*):where(.site-header)::-webkit-scrollbar-thumb,
:where(.site-header) :is(*)::-webkit-scrollbar-thumb { background: rgba(124, 179, 255, 0.18); border-radius: 999px; }
:is(*):where(.site-header)::-webkit-scrollbar-corner,
:where(.site-header) :is(*)::-webkit-scrollbar-corner { background: transparent; }
:where(.site-header) :is(img) { display: block; max-width: 100%; }
:where(.site-header) :is(a),
:where(.site-header) :is(button, :where(a.header-member-shortcut, a.nav-member-access, .location-switch a)) { color: inherit; text-decoration: none; }
:where(.site-header) :is(button, :where(a.header-member-shortcut, a.nav-member-access, .location-switch a)),
:where(.site-header) :is(a) { -webkit-tap-highlight-color: transparent; }
:where(.site-header) :is(button, :where(a.header-member-shortcut, a.nav-member-access, .location-switch a)) { font: inherit; }
:where(.site-header) :is(button, :where(a.header-member-shortcut, a.nav-member-access, .location-switch a)),
:where(.site-header) :is(a) { transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, color 0.18s, transform 0.18s; }
:where(.site-header) :is(button:focus-visible, :where(a.header-member-shortcut, a.nav-member-access, .location-switch a):focus-visible),
:where(.site-header) :is(a:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
:is(.site-header):where(.site-header) { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 12px clamp(18px, 4vw, 54px); background: rgba(11, 12, 12, 0.84); border-bottom: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(16px); }
:where(.site-header) :is(.brand img) { width: min(210px, 48vw); }
:where(.site-header) :is(.nav) { display: flex; align-items: center; gap: 8px; color: rgb(255, 255, 255); font-size: 0.78rem; font-weight: 800; letter-spacing: 0px; text-transform: uppercase; }
:where(.site-header) :is(.nav-group) { position: relative; }
:where(.site-header) :is(.nav-trigger) { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0px 12px; border: 0px; border-radius: var(--radius-sm); background: transparent; color: rgb(255, 255, 255); font: inherit; text-transform: inherit; cursor: pointer; opacity: 0.86; }
:where(.site-header) :is(.nav-trigger:hover),
:where(.site-header) :is(.nav-trigger:focus-visible),
:where(.site-header) :is(.nav-trigger.active-link),
:where(.site-header) :is(.nav-group.open .nav-trigger) { opacity: 1; color: rgb(255, 226, 122); background: rgba(255, 214, 64, 0.12); box-shadow: rgba(255, 214, 64, 0.26) 0px 0px 0px 1px inset, rgba(255, 214, 64, 0.1) 0px 0px 18px; }
:where(.site-header) :is(.nav-trigger svg) { transition: transform 0.18s; }
:where(.site-header) :is(.nav-group.open .nav-trigger svg) { transform: rotate(180deg); }
:where(.site-header) :is(.nav-panel) { position: absolute; top: calc(100% + 12px); left: 0px; z-index: 5; display: grid; gap: 6px; width: 310px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 22px; background: rgba(16, 17, 18, 0.96); box-shadow: rgba(0, 0, 0, 0.42) 0px 24px 70px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.16s, transform 0.16s; backdrop-filter: blur(18px); }
:where(.site-header) :is(.nav-group.open .nav-panel),
:where(.site-header) :is(.nav-group:focus-within .nav-panel) { opacity: 1; pointer-events: auto; transform: translateY(0px); }
:where(.site-header) :is(.nav-panel a) { display: grid; gap: 5px; width: 100%; min-height: 74px; padding: 14px; border: 0px; border-radius: 16px; background: transparent; color: rgb(255, 255, 255); text-align: left; cursor: pointer; }
:where(.site-header) :is(.nav-panel a:hover),
:where(.site-header) :is(.nav-panel a:focus-visible),
:where(.site-header) :is(.nav-panel a.active-link) { background: linear-gradient(135deg, rgba(255, 214, 64, 0.14), rgba(255, 214, 64, 0.08)), rgb(32, 38, 40); box-shadow: rgba(255, 214, 64, 0.28) 0px 0px 0px 1px inset; transform: translate(3px); }
:where(.site-header) :is(.nav-panel strong) { font-size: 0.88rem; }
:where(.site-header) :is(.nav-panel span) { color: rgb(207, 198, 186); font-size: 0.76rem; font-weight: 700; line-height: 1.35; text-transform: none; }
:where(.site-header) :is(.nav-cta) { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0px 18px; border-radius: var(--radius-sm); font-weight: 900; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0px; white-space: nowrap; }
:where(.site-header) :is(.location-switch) { display: inline-grid; grid-template-columns: repeat(2, minmax(74px, 1fr)); gap: 3px; margin-left: 4px; padding: 3px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.08); }
:where(.site-header) :is(.location-switch :is(button, a)) { min-height: 34px; border: 0px; border-radius: 9px; background: transparent; color: rgb(255, 255, 255); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.7rem; cursor: pointer; }
:where(.site-header) :is(.location-switch :is(button, a).active) { background: var(--gold); color: rgb(17, 17, 17); }
:where(.site-header) :is(.nav-cta) { background: linear-gradient(135deg,var(--gold),#e3b700); color: rgb(17, 17, 17); box-shadow: rgba(255, 214, 64, 0.22) 0px 14px 32px; }
:where(.site-header) :is(.nav-member-access) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0px 15px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.72rem; font-weight: 900; letter-spacing: 0px; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
:where(.site-header) :is(.nav-member-access:hover),
:where(.site-header) :is(.nav-member-access:focus-visible) { border-color: rgba(74, 163, 255, 0.62); background: rgba(74, 163, 255, 0.18); color: rgb(255, 255, 255); box-shadow: rgba(74, 163, 255, 0.18) 0px 0px 24px; transform: translateY(-2px); }
:where(.site-header) :is(.nav-cta:hover),
:where(.site-header) :is(.nav-cta:focus-visible) { background: linear-gradient(135deg,#ffe777,var(--gold)); box-shadow: rgba(255, 214, 64, 0.36) 0px 0px 28px, rgba(0, 0, 0, 0.24) 0px 16px 36px; transform: translateY(-2px); }
:where(.site-header) :is(.nav-cta),
:where(.site-header) :is(.nav-trigger),
:where(.site-header) :is(.location-switch :is(button, a)),
:where(.site-header) :is(.nav-panel a) { position: relative; overflow: hidden; }
:where(.site-header) :is(.nav-cta)::after,
:where(.site-header) :is(.nav-trigger)::after,
:where(.site-header) :is(.location-switch :is(button, a))::after,
:where(.site-header) :is(.nav-panel a)::after { position: absolute; inset: 0px; content: ""; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(255, 226, 122, 0) 28%, rgba(255, 226, 122, 0.52) 50%, rgba(255, 226, 122, 0) 72%, transparent 100%) left top / 42% 1px no-repeat, linear-gradient(270deg, transparent 0%, rgba(255, 226, 122, 0) 28%, rgba(255, 226, 122, 0.25) 50%, rgba(255, 226, 122, 0) 72%, transparent 100%) right bottom / 42% 1px no-repeat; opacity: 0.26; animation: 4.2s linear 0s infinite normal none running fac-highlight-chaser; }
:where(.site-header) :is(.nav-cta:hover)::after,
:where(.site-header) :is(.nav-trigger:hover)::after,
:where(.site-header) :is(.nav-trigger:focus-visible)::after,
:where(.site-header) :is(.location-switch :is(button, a):hover)::after,
:where(.site-header) :is(.location-switch :is(button, a):focus-visible)::after,
:where(.site-header) :is(.nav-panel a:hover)::after,
:where(.site-header) :is(.nav-panel a:focus-visible)::after { opacity: 0.9; animation-duration: 2.4s; }
:where(.site-header) :is(.menu-button) { display: none; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); }
:where(.site-header) :is(.header-member-shortcut) { display: none; align-items: center; justify-content: center; gap: 7px; min-height: 38px; margin-left: auto; padding: 0px 12px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); font-size: 0.68rem; font-weight: 900; letter-spacing: 0px; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
:where(.site-header) :is(.header-member-shortcut:hover),
:where(.site-header) :is(.header-member-shortcut:focus-visible) { border-color: rgba(74, 163, 255, 0.66); background: rgba(74, 163, 255, 0.18); box-shadow: rgba(74, 163, 255, 0.16) 0px 0px 24px; }
:where(.site-header) :is(.nav-phone-action) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; margin-right: auto; padding: 0px 12px; border: 1px solid rgba(255, 214, 64, 0.18); border-radius: 999px; color: rgb(255, 245, 194); font-size: 0.76rem; font-weight: 900; letter-spacing: 0px; text-decoration: none; white-space: nowrap; background: rgba(255, 214, 64, 0.08); box-shadow: rgba(255, 255, 255, 0.1) 0px 1px inset; transition: border-color 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s; }
:where(.site-header) :is(.nav-phone-action:hover),
:where(.site-header) :is(.nav-phone-action:focus-visible) { color: rgb(255, 255, 255); border-color: rgba(255, 226, 112, 0.5); background: rgba(255, 214, 64, 0.15); box-shadow: rgba(255, 214, 64, 0.13) 0px 0px 22px, rgba(255, 255, 255, 0.16) 0px 1px inset; transform: translateY(-1px); }
@media (max-width: 980px) {
:where(.site-header) :is(.menu-button) { display: inline-grid; place-items: center; }
}
@media (max-width: 980px) {
:where(.site-header) :is(.header-member-shortcut) { display: inline-flex; }
}
@media (max-width: 980px) {
:where(.site-header) :is(.nav) { position: absolute; top: 76px; left: 0px; right: 0px; display: none; flex-direction: column; align-items: stretch; gap: 0px; padding: 14px 18px 20px; background: rgba(11, 12, 12, 0.97); }
}
@media (max-width: 980px) {
:where(.site-header) :is(.nav.open) { display: flex; }
}
@media (max-width: 980px) {
:where(.site-header) :is(.nav-group) { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
}
@media (max-width: 980px) {
:where(.site-header) :is(.nav-trigger) { justify-content: space-between; width: 100%; min-height: 50px; padding: 0px; background: transparent; }
}
@media (max-width: 980px) {
:where(.site-header) :is(.nav-trigger:hover),
:where(.site-header) :is(.nav-trigger.active-link),
:where(.site-header) :is(.nav-group.open .nav-trigger) { background: transparent; }
}
@media (max-width: 980px) {
:where(.site-header) :is(.nav-panel) { position: static; display: none; width: 100%; margin: 0px 0px 12px; padding: 8px; border-radius: 18px; background: rgb(16, 17, 18); box-shadow: none; opacity: 1; pointer-events: auto; transform: none; }
}
@media (max-width: 980px) {
:where(.site-header) :is(.nav-group.open .nav-panel),
:where(.site-header) :is(.nav-group:focus-within .nav-panel) { display: grid; }
}
@media (max-width: 980px) {
:where(.site-header) :is(.location-switch) { width: 100%; margin: 12px 0px 0px; grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
@media (max-width: 980px) {
:where(.site-header) :is(.nav-cta) { margin-top: 10px; }
}
@media (max-width: 980px) {
:where(.site-header) :is(.nav-member-access) { width: 100%; justify-content: center; margin-top: 8px; }
}
@media (max-width: 640px) {
:is(.site-header):where(.site-header) { min-height: 68px; }
}
@media (max-width: 640px) {
:where(.site-header) :is(.brand img) { width: 172px; }
}
@media (max-width: 640px) {
:where(.site-header) :is(.nav) { top: 68px; }
}
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav-panel) { width: min(310px, -28px + 100vw); padding: 8px; border-radius: 16px; background: linear-gradient(rgba(255, 214, 64, 0.055), rgba(255, 255, 255, 0.02)), rgba(12, 13, 14, 0.97); }
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav-panel a) { min-height: 58px; padding: 11px 12px; border-radius: 12px; }
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav-panel span) { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 780px) {
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav-panel a) { min-height: 50px; }
}
:is(body:not(:has(.admin-shell-live)) .site-header):where(.site-header) { min-height: 58px; padding: 7px clamp(14px, 3vw, 38px); background: rgba(8, 9, 10, 0.78); backdrop-filter: blur(18px); }
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .brand img) { width: min(156px, 40vw); max-height: 42px; object-fit: contain; }
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav-phone-action) { min-height: 34px; padding: 0px 10px; border-radius: 10px; font-size: 0.66rem; }
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav) { gap: 5px; font-size: 0.68rem; }
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav-trigger) { min-height: 34px; gap: 4px; padding: 0px 9px; border-radius: 10px; }
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .location-switch) { grid-template-columns: repeat(2, minmax(58px, 1fr)); gap: 2px; margin-left: 2px; padding: 2px; border-radius: 10px; }
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .location-switch :is(button, a)) { min-height: 28px; padding: 0px 7px; border-radius: 8px; font-size: 0.62rem; }
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav-cta) { min-height: 36px; padding: 0px 13px; border-radius: 10px; font-size: 0.68rem; }
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav-member-access) { min-height: 36px; max-width: 150px; padding: 0px 12px; border-radius: 10px; font-size: 0.66rem; }
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav-member-access span) { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 980px) {
:is(body:not(:has(.admin-shell-live)) .site-header):where(.site-header) { min-height: 60px; }
}
@media (max-width: 980px) {
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav-phone-action) { margin-left: 6px; margin-right: auto; }
}
@media (max-width: 980px) {
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .menu-button) { width: 38px; height: 38px; border-radius: 10px; }
}
@media (max-width: 980px) {
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav) { top: 60px; padding: 10px 14px 14px; }
}
@media (max-width: 640px) {
:is(body:not(:has(.admin-shell-live)) .site-header):where(.site-header) { min-height: 56px; padding-block: 6px; }
}
@media (max-width: 640px) {
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .brand img) { width: 142px; max-height: 38px; }
}
@media (max-width: 640px) {
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav-phone-action) { width: 36px; min-width: 36px; min-height: 36px; padding: 0px; }
}
@media (max-width: 640px) {
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav-phone-action span) { display: none; }
}
@media (max-width: 640px) {
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav) { top: 56px; }
}
:is(.site-header):where(.site-header) { isolation: isolate; background: linear-gradient(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.016) 36%, rgba(0, 0, 0, 0.26)), rgba(8, 9, 10, 0.9); border-bottom-color: rgba(255, 226, 112, 0.18); box-shadow: rgba(0, 0, 0, 0.38) 0px 18px 48px, rgba(255, 255, 255, 0.16) 0px 1px inset; }
:is(.site-header):where(.site-header)::before { content: ""; position: absolute; inset: 0px; z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 226, 112, 0.12), transparent 58%), linear-gradient(rgba(255, 255, 255, 0.08), transparent 32%); opacity: 0.92; }
:where(.site-header) :is(.brand) { display: inline-flex; align-items: center; min-width: 0px; }
:where(.site-header) :is(.brand img) { width: auto; height: clamp(46px, 5.4vw, 62px); max-width: min(180px, 40vw); object-fit: contain; filter: drop-shadow(rgba(0, 0, 0, 0.6) 0px 8px 16px) drop-shadow(rgba(255, 226, 112, 0.18) 0px 0px 12px); }
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .brand img) { width: auto; height: 50px; max-height: none; max-width: min(164px, 35vw); }
:where(.site-header) :is(.nav-trigger),
:where(.site-header) :is(.nav-member-access),
:where(.site-header) :is(.location-switch :is(button, a)),
:where(.site-header) :is(.header-member-shortcut) { position: relative; overflow: hidden; border-color: rgba(255, 226, 112, 0.18); box-shadow: rgba(255, 255, 255, 0.1) 0px 1px inset; }
:where(.site-header) :is(.nav-trigger)::after,
:where(.site-header) :is(.nav-member-access)::after,
:where(.site-header) :is(.location-switch :is(button, a))::after,
:where(.site-header) :is(.header-member-shortcut)::after { content: ""; position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(110deg, transparent 0px, transparent 18%, rgba(255, 255, 255, 0.18) 42%, transparent 58%); opacity: 0; transform: translate(-70%); transition: opacity 0.18s, transform 0.26s; }
:where(.site-header) :is(.nav-trigger:hover)::after,
:where(.site-header) :is(.nav-trigger:focus-visible)::after,
:where(.site-header) :is(.nav-member-access:hover)::after,
:where(.site-header) :is(.nav-member-access:focus-visible)::after,
:where(.site-header) :is(.location-switch :is(button, a):hover)::after,
:where(.site-header) :is(.location-switch :is(button, a):focus-visible)::after,
:where(.site-header) :is(.header-member-shortcut:hover)::after,
:where(.site-header) :is(.header-member-shortcut:focus-visible)::after { opacity: 1; transform: translate(72%); }
@media (max-width: 640px) {
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .brand img) { height: 42px; max-width: 118px; }
}
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .location-switch :is(button, a).active),
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav-cta) { border: 1px solid var(--fac-yellow-metal-border); border-left: 1px solid var(--fac-yellow-metal-highlight); color: var(--fac-yellow-metal-text); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58); background: var(--fac-yellow-metal-bg); box-shadow: var(--fac-yellow-metal-shadow); cursor: pointer; }
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .location-switch :is(button, a).active:hover),
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .location-switch :is(button, a).active:focus-visible),
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav-cta:hover),
:where(.site-header) :is(body:not(:has(.admin-shell-live)) .nav-cta:focus-visible) { color: var(--fac-yellow-metal-hover-text); text-shadow: rgba(0, 0, 0, 0.72) 0px 1px 2px; background: var(--fac-yellow-metal-hover-bg); box-shadow: var(--fac-yellow-metal-hover-shadow); backdrop-filter: blur(8px) saturate(1.15); }
:where(.site-header) :is(body:not(:has(.admin-shell-live)) :is(.button.primary, .nav-cta, .location-switch :is(button, a).active, .facbook-filter-bar button.active, .visit-actions .button.primary, .footer a[href^="tel:"], .facbook-quick-action-body button:not(.danger), .facbook-quick-guest-form button:not(.danger), .facbook-primary-actions button:not(.danger), .facbook-booking-form > button, .facbook-code-actions button, .facbook-member-booking-actions button:not(.danger), .commerce-card a, .booking-actions a, .facbook-booking-actions a)) { border-width: 1px; border-style: solid; border-color: rgba(117, 74, 8, 0.62) rgba(117, 74, 8, 0.62) rgba(117, 74, 8, 0.62) rgba(255, 244, 167, 0.82); border-image: none; color: rgb(59, 42, 18); text-shadow: rgba(255, 255, 255, 0.58) 0px 1px 0px; background: linear-gradient(rgba(255, 255, 255, 0.78), transparent 42%), linear-gradient(145deg, rgb(255, 249, 207), rgb(250, 204, 21) 27%, rgb(217, 154, 6) 58%, rgb(123, 67, 12)); box-shadow: rgba(0, 0, 0, 0.32) 0px 12px 28px, rgba(255, 209, 61, 0.16) 0px 0px 18px, rgba(255, 255, 255, 0.7) 0px 1px inset, rgba(92, 49, 8, 0.64) 0px -2px inset; }
:where(.site-header) :is(body:not(:has(.admin-shell-live)) :is(.button.primary, .nav-cta, .location-switch :is(button, a).active, .facbook-filter-bar button.active, .visit-actions .button.primary, .footer a[href^="tel:"], .facbook-quick-action-body button:not(.danger), .facbook-quick-guest-form button:not(.danger), .facbook-primary-actions button:not(.danger), .facbook-booking-form > button, .facbook-code-actions button, .facbook-member-booking-actions button:not(.danger), .commerce-card a, .booking-actions a, .facbook-booking-actions a):hover),
:where(.site-header) :is(body:not(:has(.admin-shell-live)) :is(.button.primary, .nav-cta, .location-switch :is(button, a).active, .facbook-filter-bar button.active, .visit-actions .button.primary, .footer a[href^="tel:"], .facbook-quick-action-body button:not(.danger), .facbook-quick-guest-form button:not(.danger), .facbook-primary-actions button:not(.danger), .facbook-booking-form > button, .facbook-code-actions button, .facbook-member-booking-actions button:not(.danger), .commerce-card a, .booking-actions a, .facbook-booking-actions a):focus-visible) { color: rgb(255, 247, 199); text-shadow: rgba(0, 0, 0, 0.72) 0px 1px 2px; background: linear-gradient(120deg, rgba(255, 255, 255, 0.44), rgba(255, 226, 112, 0.2) 30%, rgba(0, 0, 0, 0.18) 58%, rgba(255, 255, 255, 0.1)), linear-gradient(145deg, rgba(255, 251, 225, 0.34), rgba(255, 217, 45, 0.34) 28%, rgba(228, 162, 10, 0.3) 60%, rgba(138, 74, 11, 0.26)), rgba(18, 18, 14, 0.28); box-shadow: rgba(0, 0, 0, 0.36) 0px 14px 30px, rgba(255, 226, 112, 0.22) 0px 0px 24px, rgba(255, 255, 255, 0.44) 0px 1px inset, rgba(0, 0, 0, 0.58) 0px -1px inset; }
:where(.site-header) :is(:is(.button.primary, .nav-cta, .location-switch :is(button, a).active, .schedule-tools button.active, .day-strip button.active, .program-controls > button.active, .commerce-filters button.active, .commerce-options button.active, .pricing-tabs button.active, .plan-tabs button.active, .pricing-card-body a, .purchase-priority-actions a, .facbook-filter-bar button.active, .facbook-booking-form > button, .facbook-code-actions button, .facbook-primary-actions button:not(.danger), .facbook-quick-action-body button:not(.danger), .facbook-quick-guest-form button:not(.danger), .facbook-member-booking-actions button:not(.danger), .commerce-card a, .academy-card a, .academy-card button, .academy-lead-form button, .photo-actions button, .expanded-gallery-header button, .event-actions a, .party-package-card a, .lead-capture > button, .contact-actions button, .contact-form button, .booking-actions a, .facbook-booking-actions a, .visit-actions .button.primary, .footer a[href^="tel:"], .checkout-actions .button.primary, .admin-save-button, .price-save-button, .academy-save-button, .member-profile-actions button.primary, .member-account-actions button.primary)) { text-shadow: rgba(255, 255, 255, 0.58) 0px 1px 0px; border-top-color:  !important; border-right-color:  !important; border-bottom-color:  !important; border-left-color: var(--fac-yellow-metal-highlight) !important; background: var(--fac-yellow-metal-bg) !important; color: var(--fac-yellow-metal-text) !important; box-shadow: var(--fac-yellow-metal-shadow) !important; }
:where(.site-header) :is(:is(.button.primary, .nav-cta, .location-switch :is(button, a).active, .schedule-tools button.active, .day-strip button.active, .program-controls > button.active, .commerce-filters button.active, .commerce-options button.active, .pricing-tabs button.active, .plan-tabs button.active, .pricing-card-body a, .purchase-priority-actions a, .facbook-filter-bar button.active, .facbook-booking-form > button, .facbook-code-actions button, .facbook-primary-actions button:not(.danger), .facbook-quick-action-body button:not(.danger), .facbook-quick-guest-form button:not(.danger), .facbook-member-booking-actions button:not(.danger), .commerce-card a, .academy-card a, .academy-card button, .academy-lead-form button, .photo-actions button, .expanded-gallery-header button, .event-actions a, .party-package-card a, .lead-capture > button, .contact-actions button, .contact-form button, .booking-actions a, .facbook-booking-actions a, .visit-actions .button.primary, .footer a[href^="tel:"], .checkout-actions .button.primary, .admin-save-button, .price-save-button, .academy-save-button, .member-profile-actions button.primary, .member-account-actions button.primary):not(:disabled):hover),
:where(.site-header) :is(:is(.button.primary, .nav-cta, .location-switch :is(button, a).active, .schedule-tools button.active, .day-strip button.active, .program-controls > button.active, .commerce-filters button.active, .commerce-options button.active, .pricing-tabs button.active, .plan-tabs button.active, .pricing-card-body a, .purchase-priority-actions a, .facbook-filter-bar button.active, .facbook-booking-form > button, .facbook-code-actions button, .facbook-primary-actions button:not(.danger), .facbook-quick-action-body button:not(.danger), .facbook-quick-guest-form button:not(.danger), .facbook-member-booking-actions button:not(.danger), .commerce-card a, .academy-card a, .academy-card button, .academy-lead-form button, .photo-actions button, .expanded-gallery-header button, .event-actions a, .party-package-card a, .lead-capture > button, .contact-actions button, .contact-form button, .booking-actions a, .facbook-booking-actions a, .visit-actions .button.primary, .footer a[href^="tel:"], .checkout-actions .button.primary, .admin-save-button, .price-save-button, .academy-save-button, .member-profile-actions button.primary, .member-account-actions button.primary):not(:disabled):focus-visible) { text-shadow: rgba(0, 0, 0, 0.72) 0px 1px 2px; border-color: rgba(255, 226, 112, 0.76) !important; background: var(--fac-yellow-metal-hover-bg) !important; color: var(--fac-yellow-metal-hover-text) !important; box-shadow: var(--fac-yellow-metal-hover-shadow) !important; }
@media print {
:is(body *):where(.site-header),
:where(.site-header) :is(body *) { visibility: hidden !important; }
}

/* The site pins its header with position: fixed and pads every page under it; this page lets the header take its own
   room and stay at the top (sticky), which looks the same and needs no padding to keep in step. */
html body header.site-header.site-header { position: sticky; z-index: 30; }
/* Sign in and the location switch are links here (real addresses), buttons in the app. A browser gives a button its
   own text defaults; these give the links the same, at zero weight, so every lifted rule still decides. */
:where(.site-header .location-switch a, .site-header a.header-member-shortcut, .site-header a.nav-member-access) {
  text-transform: none; letter-spacing: normal; word-spacing: normal; text-indent: 0; text-shadow: none; line-height: normal; text-align: center; }
:where(.site-header .location-switch a) { display: inline-flex; align-items: center; justify-content: center; }
.site-header .menu-button .lucide-x, .site-header .menu-button[aria-expanded="true"] .lucide-menu { display: none; }
.site-header .menu-button[aria-expanded="true"] .lucide-x { display: block; }

footer.site { margin-top: 48px; padding: 28px clamp(16px, 3vw, 32px) 40px; border-top: 1px solid var(--gold-line); color: var(--muted); font-size: 14px; }
footer.site p { margin: 4px 0; }
.announce-slot { margin: 0 0 16px; }
.announce-slot:empty { display: none; }

/* ---------------- buttons: the site's three kinds (src/styles.css, "FAC public button system") ----------------
   main action: metal gold · every other action: the "Explore this art" outline · filters and choices: the pill */
.btn-gold, .btn-line, .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 12px;
  font: 900 .78rem/1.15 var(--font); letter-spacing: 0; text-transform: uppercase; text-align: center; text-decoration: none; white-space: normal; cursor: pointer; }
.btn-gold { border: 1px solid var(--gold-metal-border); background: var(--gold-metal); color: var(--gold-metal-text); box-shadow: var(--gold-metal-shadow); }
.btn-gold:hover, .btn-gold:focus-visible { filter: brightness(1.06); }
.btn-gold:disabled { background: #2a2d2e; color: var(--muted); border-color: #3a3f41; box-shadow: none; filter: none; cursor: not-allowed; }
.btn-line, .btn-round { border: 1px solid rgba(255, 214, 64, .62); color: #ffd640;
  background: radial-gradient(circle at 50% -40%, rgba(255, 226, 122, .42), transparent 42%), linear-gradient(180deg, rgba(255, 214, 64, .19), rgba(255, 214, 64, .07) 46%, rgba(0, 0, 0, .18)), #0b0d0e;
  box-shadow: inset 0 1px 0 rgba(255, 244, 184, .2), inset 0 -10px 18px rgba(0, 0, 0, .24), 0 3px 0 rgba(91, 70, 0, .9), 0 12px 24px rgba(0, 0, 0, .32), 0 0 22px rgba(255, 214, 64, .15); }
.btn-line:hover, .btn-line:focus-visible, .btn-round:hover, .btn-round:focus-visible { border-color: rgba(255, 233, 132, .98); color: #ffe27a;
  background: radial-gradient(circle at 50% -35%, rgba(255, 237, 145, .58), transparent 44%), linear-gradient(180deg, rgba(255, 214, 64, .28), rgba(255, 214, 64, .1) 48%, rgba(0, 0, 0, .14)), #111315; }
.btn-line:disabled { opacity: .55; cursor: not-allowed; }
.btn-round { width: 44px; height: 44px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font: 800 22px/1 var(--font); cursor: pointer; }
.btn-danger { border: 1px solid rgba(255, 122, 110, .6); background: rgba(255, 122, 110, .1); color: var(--red); }
.btn-danger:hover { background: rgba(255, 122, 110, .2); }
.btn-danger:disabled { opacity: .6; cursor: progress; }
.sm { min-height: 36px; padding: 0 14px; font-size: .7rem; }
/* the pill ("What you train" on the programs page); the chosen one is metal gold */
.chips button, .locs a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border: 1px solid rgba(255, 214, 64, .18); border-radius: 999px;
  background: rgba(255, 214, 64, .043); color: #d8cfc2; font: 900 .72rem/1.1 var(--font); letter-spacing: 0; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.chips button:hover, .chips button:focus-visible, .locs a:hover, .locs a:focus-visible { border-color: rgba(255, 214, 64, .42); background: rgba(255, 214, 64, .1); color: #fff5c2; }
.chips button[aria-pressed="true"], .locs a[aria-current="page"] { border-color: var(--gold-metal-border); background: var(--gold-metal); color: var(--gold-metal-text); box-shadow: var(--gold-metal-shadow); }

/* ---------------- intro ---------------- */
main { padding: 0 clamp(16px, 3vw, 32px); max-width: 1400px; margin: 0 auto; }
.intro { padding: 32px 0 12px; }
.eyebrow { margin: 0 0 8px; color: var(--gold); font: 800 12px/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; }
h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 900; letter-spacing: -.01em; }
.lede { color: var(--muted); max-width: 640px; margin: 10px 0 18px; }
.events-link { margin: 0 0 16px; font-weight: 700; }
.events-link a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-line); }
.locs { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------- tools: week, day strip, filters ---------------- */
.tools { position: sticky; top: calc(var(--hdr) + 6px); z-index: 20; margin: 18px 0 8px; padding: 12px; border-radius: var(--radius); background: rgba(20, 24, 26, .94);
  border: 1px solid var(--gold-line); display: grid; gap: 12px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.weeknav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.weeklabel { margin: 0; font-weight: 800; text-align: center; }
.daystrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.daystrip button { border: 1px solid transparent; background: var(--panel-2); color: var(--ink); border-radius: var(--radius-sm); padding: 8px 2px; cursor: pointer; display: grid; gap: 2px; font: 700 12px/1.1 var(--font); min-height: 52px; }
.daystrip button b { font-size: 18px; }
.daystrip button .n { color: var(--muted); font-size: 11px; font-weight: 600; }
.daystrip button[aria-pressed="true"] { border-color: var(--gold-metal-border); background: var(--gold-metal); color: var(--gold-metal-text); box-shadow: var(--gold-metal-shadow); }
.daystrip button[aria-pressed="true"] .n { color: #5b4317; }
.daystrip button.past { opacity: .35; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.program { display: flex; align-items: center; gap: 8px; font: 900 .72rem/1.1 var(--font); text-transform: uppercase; color: var(--muted); }
.program select { background: rgba(255, 214, 64, .043); color: #d8cfc2; border: 1px solid rgba(255, 214, 64, .18); border-radius: 999px; padding: 0 14px; min-height: 36px; font: 800 13px var(--font); }
.live { color: var(--muted); font-size: 13px; margin: 6px 0 12px; }
.live.warn { color: var(--gold); }

/* ---------------- staff controls (teachers and the owner only; added by the script after the server says so) ---------------- */
.staffbar { margin: 6px 0; padding: 10px 14px; border-radius: 14px; border: 1px dashed var(--gold-line); color: var(--gold); font-weight: 700; font-size: 14px; }
.staffact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, .1); }
.chip { font: 800 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; }
.chip.ok { color: var(--ok); border: 1px solid rgba(143, 227, 166, .45); }
.chip.warn { color: var(--gold); border: 1px solid var(--gold-line); }
.pop .will { margin: 0; font-size: 13px; color: var(--muted); border-left: 2px solid var(--gold-line); padding: 6px 10px; }
.pop .will b { color: var(--ink); }

/* ---------------- days and classes (no script: one long agenda) ---------------- */
.days { display: grid; gap: 18px; }
.day h2 { font-size: 20px; font-weight: 900; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 6px 2px 10px; border-bottom: 1px solid var(--gold-line); }
.day h2 .dm { color: var(--muted); font-weight: 700; font-size: 16px; }
.tag-today { font: 800 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #3b2a12; background: var(--gold); padding: 5px 8px; border-radius: 999px; }
.none { color: var(--muted); margin: 10px 2px; }
.classes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.occ { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; grid-template-areas: "when what act" "when spots act"; gap: 2px 14px; align-items: center;
  padding: 14px 16px; border-radius: 18px; background: linear-gradient(rgba(255, 214, 64, .07), rgba(255, 255, 255, .015)), var(--panel); border: 1px solid rgba(255, 255, 255, .06); }
.occ .when { grid-area: when; display: grid; gap: 2px; align-self: start; }
.occ time { font-weight: 900; font-size: 17px; color: var(--gold); white-space: nowrap; }
.occ .until { color: var(--muted); font-size: 12px; white-space: nowrap; }
.occ .what { grid-area: what; min-width: 0; }
.occ h3 { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.occ .meta { margin: 2px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.occ .spots { grid-area: spots; margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--ok); }
.occ .spots.low { color: var(--gold); }
.occ .spots.full, .occ .spots.gone { color: var(--muted); }
.occ .act { grid-area: act; min-width: 0; }
.occ.is-cancelled { opacity: .72; background: var(--panel-2); }
.occ.is-cancelled h3 { text-decoration: line-through; text-decoration-color: var(--red); }
.occ.is-cancelled .spots { color: var(--red); }
.occ.mine { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }
/* an event (tickets on the Events page): the same card, marked and lit a little warmer */
.occ.is-event { border-color: var(--gold-line); background: radial-gradient(120% 90% at 0 0, rgba(255, 214, 64, .16), transparent 60%), linear-gradient(rgba(255, 214, 64, .07), rgba(255, 255, 255, .015)), var(--panel); }
.tag-event { margin: 0 0 4px; color: var(--gold); font: 800 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
/* a date the class moved away from: shown quietly with where it went; the moved-to card says where it came from */
.occ.is-moved { opacity: .7; background: var(--panel-2); border-style: dashed; }
.occ.is-moved .spots { color: var(--gold); }
.tag-moved { display: inline-block; font: 800 12px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px dashed var(--gold-line); padding: 8px 10px; border-radius: 999px; }
.moved-note { margin: 2px 0 0; color: var(--gold); font-size: 12px; font-weight: 700; }
/* ---------------- staff: the week as a timed grid; drag to move, the trash to cancel; ⋯ and right-click for the menu ---------------- */
.occ { position: relative; }
.kebab { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 1px solid var(--gold-line); background: rgba(12, 14, 15, .85); color: var(--gold); font: 900 16px/1 var(--font); cursor: pointer; z-index: 2; }
.kebab:hover, .kebab:focus-visible { background: var(--gold-soft); }
.ctx { position: fixed; z-index: 70; min-width: 220px; padding: 6px; border-radius: 14px; border: 1px solid var(--gold-line); background: #0c0e0f;
  box-shadow: 0 18px 40px -12px #000, 0 0 24px -12px rgba(255, 214, 64, .5); display: grid; gap: 2px; }
.ctx[hidden] { display: none; }
.ctx-title { margin: 4px 8px 6px; color: var(--muted); font: 800 11px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.ctx [role="menuitem"] { text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 700 14px var(--font); cursor: pointer; }
.ctx [role="menuitem"]:hover, .ctx [role="menuitem"]:focus-visible { background: var(--gold-soft); color: var(--gold); outline: none; }
.ctx [data-act="cancel"] { color: var(--red); }
@media (min-width: 1100px) {
  .js .days.week.grid { position: relative; padding-left: 58px; }
  .js .days.week.grid .classes { position: relative; display: block; margin-top: 10px;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .07) 0 1px, transparent 1px var(--hour)); border-radius: 12px; }
  .js .days.week.grid .classes > li { position: absolute; margin: 0; padding: 6px 8px; gap: 2px; overflow: hidden; border-radius: 10px; min-height: 0; box-sizing: border-box; border-width: 1px;
    align-content: start; align-items: start; }
  .js .days.week.grid .classes > li .act, .js .days.week.grid .classes > li .meta, .js .days.week.grid .classes > li .until, .js .days.week.grid .classes > li .staffact { display: none; }
  .js .days.week.grid .occ time { font-size: 13px; white-space: nowrap; }
  .js .days.week.grid .occ .when { padding-right: 22px; }
  .js .days.week.grid .occ h3 { font-size: 13px; line-height: 1.15; overflow-wrap: normal; word-break: normal; hyphens: auto; }
  .js .days.week.grid .occ .spots, .js .days.week.grid .moved-note, .js .days.week.grid .tag-event { font-size: 11px; margin: 0; }
  .js .days.week.grid .kebab { width: 24px; height: 24px; top: 4px; right: 4px; font-size: 13px; }
  .js .days.week.grid .none, .js .days.week.grid .nomatch { display: none; }
  .js .days.week.grid .hours { position: absolute; left: 0; width: 52px; }
  .js .days.week.grid .hours span { position: absolute; right: 6px; transform: translateY(-50%); color: var(--muted); font: 700 11px/1 var(--font); white-space: nowrap; }
  .js .days.week.grid .can-drag { cursor: grab; touch-action: none; }
}
.occ.dragging { opacity: .35; }
body.dragging-class, body.dragging-class * { cursor: grabbing !important; user-select: none; }
.ghost { position: fixed; z-index: 65; pointer-events: none; margin: 0; padding: 6px 8px; overflow: hidden; border-radius: 10px; border: 2px solid var(--gold);
  background: rgba(27, 32, 34, .96); box-shadow: 0 18px 40px -12px #000, 0 0 30px -10px rgba(255, 214, 64, .7); list-style: none;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; align-content: start; gap: 2px; }
.ghost > * { grid-area: auto !important; min-width: 0; }
.ghost time { font-size: 13px; }
.ghost .act, .ghost .meta, .ghost .until, .ghost .kebab, .ghost .staffact, .ghost .when, .ghost .spots, .ghost .moved-note { display: none; }
.ghost h3 { font-size: 13px; }
.ghost-when { margin: 0 0 4px; padding: 4px 8px; display: block; border-radius: 8px; background: var(--gold-metal); color: var(--gold-metal-text); font: 900 12px/1.25 var(--font); white-space: normal; }
.day.drop-here .classes { outline: 2px dashed var(--gold); outline-offset: 3px; }
.trash { position: fixed; z-index: 64; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 14px 22px;
  border-radius: 999px; border: 2px dashed rgba(255, 122, 110, .6); background: rgba(12, 14, 15, .95); color: var(--red); font: 800 14px var(--font); box-shadow: 0 18px 40px -12px #000; }
.trash[hidden] { display: none; }
.trash.hot { background: rgba(255, 122, 110, .22); border-style: solid; transform: translateX(-50%) scale(1.06); }
.trash-icon { font-size: 24px; line-height: 1; }
/* a signed-in member's one-tap book and cancel: what happened, with Undo */
.toast { position: fixed; z-index: 66; left: 50%; bottom: 22px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
  display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 16px; border: 1px solid var(--gold-line); background: rgba(12, 14, 15, .96);
  color: var(--ink); font: 700 14px/1.35 var(--font); box-shadow: 0 18px 40px -12px #000; }
.toast[hidden] { display: none; }
.toast.ok { border-color: rgba(143, 227, 166, .55); }
.toast.ok > span::before { content: "✓ "; color: var(--ok); }
.toast.err { border-color: rgba(255, 122, 110, .6); color: var(--red); }
.toast .btn-line { flex: none; }
.tag-cancel { display: inline-block; font: 800 12px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--red); border: 1px solid rgba(255, 122, 110, .5); padding: 8px 10px; border-radius: 999px; }
.how { margin-top: 36px; padding: 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--gold-line); }
.how h2 { font-size: 22px; margin-bottom: 8px; }
.how ul { margin: 0; padding-left: 20px; color: var(--muted); }
.how b { color: var(--ink); }

/* ---------------- with the script: one week at a time ---------------- */
.js .day[hidden], .js .occ[hidden] { display: none; }
.js .day .nomatch { color: var(--muted); margin: 10px 2px; }
@media (min-width: 1100px) {
  .js .days.week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: start; }
  .js .days.week .day { min-width: 0; }
  .js .days.week .day h2 .dm { flex-basis: 100%; } /* the date on its own line in every column, so the cards line up */
  /* one narrow column per day: every track may shrink below its content (minmax(0, 1fr)), and the button fills the card
     and wraps its words, so nothing reaches past the column */
  .js .days.week .occ { grid-template-columns: minmax(0, 1fr); grid-template-areas: "when" "what" "spots" "act"; padding: 12px; gap: 6px; }
  .js .days.week .occ .act > .btn-gold, .js .days.week .occ .act > .btn-line { width: 100%; padding: 0 10px; }
  .js .days.week .occ .tag-cancel { letter-spacing: .04em; }
  .js .daystrip { display: none; }
}

/* ---------------- the booking pop-up: grows from the button that opened it ---------------- */
dialog.pop { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid var(--gold-line); border-radius: var(--radius); color: var(--ink);
  background: radial-gradient(120% 60% at 50% -10%, rgba(255, 214, 64, .16), transparent 60%), linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .2)), #0c0e0f;
  box-shadow: 0 30px 80px -20px #000, 0 0 40px -16px rgba(255, 214, 64, .45); transform-origin: var(--ox, 50%) var(--oy, 50%); overflow: auto; }
dialog.pop[open] { animation: popIn .32s var(--ease) both; }
dialog.pop.closing { animation: popOut .16s ease both; }
@keyframes popIn { from { opacity: 0; transform: scale(.6); } }
@keyframes popOut { to { opacity: 0; transform: scale(.94); } }
dialog.pop::backdrop { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pop .ph { display: flex; justify-content: space-between; gap: 12px; padding: 20px 22px 12px; border-bottom: 1px solid var(--gold-line); }
.pop .ph h2 { font-size: 24px; font-weight: 900; }
.pop .when-full { margin: 6px 0 0; color: var(--gold); font-weight: 800; }
.pop .pmeta { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.pop .x { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--gold-line); background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; }
.pop .pb { padding: 16px 22px 22px; display: grid; gap: 12px; }
.pop label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.pop input, .pop select { background: var(--panel); color: var(--ink); border: 1px solid #3a3f41; border-radius: 12px; min-height: 46px; padding: 0 12px; font: 600 16px var(--font); }
.pop input[aria-invalid="true"] { border-color: var(--red); }
.pop .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pop .note { margin: 0; color: var(--muted); font-size: 13px; }
.pop .msg { margin: 0; font-weight: 700; }
.pop .msg.err { color: var(--red); }
.pop .msg.ok { color: var(--ok); }
.pop .msg.warn { color: var(--gold); }
.pop .done { padding: 14px; border-radius: 14px; border: 1px solid rgba(143, 227, 166, .45); background: rgba(143, 227, 166, .08); display: grid; gap: 4px; }
.pop .done b { font-size: 18px; }
.pop .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.pop .steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; font: 800 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pop .steps li[aria-current="step"] { color: var(--gold); }

@media (max-width: 430px) {
  .occ { grid-template-columns: 74px minmax(0, 1fr); grid-template-areas: "when what" "when spots" "act act"; }
  .occ .act { margin-top: 8px; }
  .occ .act .btn-gold, .occ .act .btn-line { width: 100%; }
  .pop .row2 { grid-template-columns: 1fr; }
  .weeklabel { font-size: 14px; }
  .daystrip button { padding: 8px 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (prefers-reduced-transparency: reduce) { .site-header, .tools, dialog.pop::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }
@media (forced-colors: active) { .btn-gold, .btn-line, .chips button[aria-pressed="true"], .locs a[aria-current="page"], .daystrip button[aria-pressed="true"] { border: 2px solid ButtonText; } }