/* ============ Tokens ============ */
:root{
  --color-bg: #FFFFFF;
  --color-surface: #F4F7F8;
  --color-surface-2: #E8EEF0;
  --color-text: #16202B;
  --color-text-muted: #55636B;
  --color-header-bg: #0F1D33;
  --color-header-text: #FFFFFF;
  --color-accent: #146C8C;
  --color-accent-hover: #0F5468;
  --color-accent-bright: #1C8AB2;
  --color-accent-contrast: #FFFFFF;
  --color-gold: #B8863B;
  --color-gold-bright: #E4C77A;
  --color-flag: #B8863B;
  --color-flag-soft: #F0E4C9;
  --color-flag-text: #6b4f1f;
  --color-border: #D8DEE2;
  --color-danger: #B3261E;
  --color-danger-soft: #F7E2DF;
  --color-focus: #146C8C;
  --color-hero-accent: #5FC7DE;
  --shadow-card: 0 1px 2px rgba(15,29,51,0.06), 0 2px 6px rgba(15,29,51,0.05), 0 16px 32px -14px rgba(15,29,51,0.28), 0 32px 56px -32px rgba(15,29,51,0.22), inset 0 1px 0 rgba(255,255,255,0.7);
  --shadow-button: 0 1px 2px rgba(9,20,34,0.18), 0 8px 18px -6px rgba(20,108,140,0.45);
  --shadow-button-hover: 0 2px 4px rgba(9,20,34,0.2), 0 12px 26px -6px rgba(20,108,140,0.55);
  --radius-card: 12px;
  --radius-control: 7px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-hero-accent: #5FC7DE;
    --color-bg: #0A121C;
    --color-surface: #101B29;
    --color-surface-2: #16222F;
    --color-text: #E7EDF0;
    --color-text-muted: #9FB0BA;
    --color-header-bg: #060D18;
    --color-header-text: #FFFFFF;
    --color-accent: #4FB3CC;
    --color-accent-hover: #6FC4D9;
    --color-accent-bright: #6FC4D9;
    --color-accent-contrast: #04222B;
    --color-gold: #D9AE64;
    --color-gold-bright: #EFD6A0;
    --color-flag: #D9A544;
    --color-flag-soft: #3A2F19;
    --color-flag-text: #D9A544;
    --color-border: #223243;
    --color-danger: #E2897A;
    --color-danger-soft: #3A2019;
    --color-focus: #4FB3CC;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.3), 0 16px 32px -14px rgba(0,0,0,0.55), 0 32px 56px -32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    --shadow-button: 0 1px 2px rgba(0,0,0,0.4), 0 8px 20px -6px rgba(79,179,204,0.4);
    --shadow-button-hover: 0 2px 4px rgba(0,0,0,0.45), 0 12px 28px -6px rgba(79,179,204,0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --color-hero-accent: #5FC7DE;
  --color-bg: #0A121C;
  --color-surface: #101B29;
  --color-surface-2: #16222F;
  --color-text: #E7EDF0;
  --color-text-muted: #9FB0BA;
  --color-header-bg: #060D18;
  --color-header-text: #FFFFFF;
  --color-accent: #4FB3CC;
  --color-accent-hover: #6FC4D9;
  --color-accent-bright: #6FC4D9;
  --color-accent-contrast: #04222B;
  --color-gold: #D9AE64;
  --color-gold-bright: #EFD6A0;
  --color-flag: #D9A544;
  --color-flag-soft: #3A2F19;
  --color-flag-text: #D9A544;
  --color-border: #223243;
  --color-danger: #E2897A;
  --color-danger-soft: #3A2019;
  --color-focus: #4FB3CC;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.3), 0 16px 32px -14px rgba(0,0,0,0.55), 0 32px 56px -32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  --shadow-button: 0 1px 2px rgba(0,0,0,0.4), 0 8px 20px -6px rgba(79,179,204,0.4);
  --shadow-button-hover: 0 2px 4px rgba(0,0,0,0.45), 0 12px 28px -6px rgba(79,179,204,0.5);
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:"Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight:800;
  text-wrap:balance;
  letter-spacing:-0.01em;
  color:var(--color-text);
  margin:0;
}
.mono, .price, time, .tabular{ font-variant-numeric: tabular-nums; }
a{ color:inherit; }
button{ font-family:inherit; }
::selection{ background:var(--color-flag-soft); }
:focus-visible{ outline:3px solid var(--color-focus); outline-offset:2px; border-radius:4px; }
[hidden]{ display:none !important; }
img{ max-width:100%; display:block; }

@media (prefers-reduced-motion:no-preference){
  .fade-in{ animation:fadeIn .4s ease both; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
}

.wrap{ max-width:1080px; margin:0 auto; padding-left:24px; padding-right:24px; }
@media (max-width:640px){ .wrap{ padding-left:16px; padding-right:16px; } }

/* ============ Header ============ */
header.site{
  background:var(--color-header-bg);
  color:var(--color-header-text);
  border-bottom:2px solid var(--color-gold);
  box-shadow:0 1px 0 rgba(0,0,0,0.25);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--color-header-text); cursor:pointer; background:none; border:0; padding:0;}
.crest{
  width:40px; height:40px; border-radius:50%;
  background: linear-gradient(155deg, var(--color-accent-bright) 0%, var(--color-accent) 45%, #0B241A 100%);
  border:1.5px solid var(--color-gold);
  box-shadow:0 2px 6px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.35);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.crest svg{ width:22px; height:22px; }
.crest-logo{ width:44px; height:44px; flex:none; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.brand-text .name{ font-family:"Manrope",sans-serif; font-weight:800; font-size:1.02rem; line-height:1.15; letter-spacing:-0.01em; }
.brand-text .sub{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
nav.top{ display:flex; align-items:center; gap:6px; }
.navlink{
  background:none; border:0; color:var(--color-header-text); opacity:.85;
  font-size:.92rem; padding:8px 10px; border-radius:var(--radius-control); cursor:pointer;
}
.navlink:hover{ opacity:1; background:rgba(255,255,255,0.08); }
.navlink.current{ opacity:1; background:rgba(255,255,255,0.12); }
.btn-pill{
  border:0; color:#fff;
  background:linear-gradient(160deg, var(--color-accent-bright) 0%, var(--color-accent) 60%, var(--color-accent-hover) 100%);
  padding:8px 18px; border-radius:var(--radius-control); font-size:.88rem; font-weight:600; cursor:pointer;
  box-shadow:var(--shadow-button); transition:transform .15s ease, box-shadow .15s ease;
}
.btn-pill:hover{ transform:translateY(-1px); box-shadow:var(--shadow-button-hover); }
.nav-short{ display:none; }
nav.top .navlink, nav.top .btn-pill{ white-space:nowrap; }
@media (max-width:720px){ .nav-long{ display:none; } .nav-short{ display:inline; } }

/* ============ Buttons / inputs (shared) ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:8px; font-size:.95rem; font-weight:700;
  border:1.5px solid transparent; cursor:pointer; line-height:1.2;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{
  background:linear-gradient(160deg, var(--color-accent-bright) 0%, var(--color-accent) 55%, var(--color-accent-hover) 100%);
  color:var(--color-accent-contrast);
  box-shadow:var(--shadow-button);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-button-hover); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{ background:none; border-color:var(--color-border); color:var(--color-text); }
.btn-ghost:hover{ background:var(--color-surface-2); transform:translateY(-1px); }
.btn-danger-text{ background:none; border:0; color:var(--color-danger); font-size:.85rem; cursor:pointer; text-decoration:underline; padding:4px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; }
.field{ margin-bottom:16px; }
.hint{ font-size:.8rem; color:var(--color-text-muted); margin-top:5px; }
input[type="text"],input[type="email"],input[type="tel"],input[type="date"],input[type="password"],textarea,select{
  width:100%; padding:11px 13px; border-radius:var(--radius-control);
  border:1.5px solid var(--color-border); background:var(--color-surface); color:var(--color-text);
  font-size:.96rem; font-family:inherit;
}
textarea{ resize:vertical; min-height:80px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .row2{ grid-template-columns:1fr; } }
.error-text{ color:var(--color-danger); font-size:.82rem; margin-top:5px; }
.checkline{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; font-weight:400; margin-bottom:12px; }
.checkline input{ margin-top:3px; flex:none; width:16px; height:16px; }
.checkline.needs-tick{ outline:2px solid var(--color-flag); outline-offset:6px; border-radius:6px; background:var(--color-flag-soft); }

.card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); }

.modal-overlay{
  position:fixed; inset:0; background:rgba(6,13,22,0.6);
  display:flex; align-items:center; justify-content:center; padding:20px;
  z-index:80;
}
.modal-card{ width:100%; max-width:440px; padding:26px; max-height:90vh; overflow-y:auto; }
.modal-card h3{ margin-bottom:18px; font-size:1.15rem; }
.actions-cell{ white-space:nowrap; }
.actions-cell .btn-danger-text{ text-decoration:none; }
.actions-cell .btn-danger-text + .btn-danger-text{ margin-left:10px; }
.banner{
  background:var(--color-flag-soft); border:1px solid var(--color-flag); color:var(--color-text);
  border-radius:10px; padding:12px 16px; font-size:.86rem; display:flex; gap:10px; align-items:flex-start;
}
.badge{ display:inline-block; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; padding:3px 9px; border-radius:5px; background:var(--color-surface-2); color:var(--color-text-muted); border:1px solid var(--color-border); }
.badge.sample{ background:var(--color-flag-soft); color:var(--color-flag-text); border-color:var(--color-flag); }

/* ============ Sections ============ */
main{ display:block; }
section.view{ padding:44px 0 64px; }
section.view[data-view="home"]{ padding-top:0; }

.hero{
  background:
    linear-gradient(125deg, var(--color-header-bg) 0%, #123B44 55%, #1C5A4E 100%);
  color:var(--color-header-text);
  position:relative;
  overflow:hidden;
  border-bottom:2px solid var(--color-gold);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 85% 10%, rgba(228,199,122,0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 15%, rgba(95,199,222,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 95%, rgba(0,0,0,0.25) 0%, transparent 50%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 90px);
  pointer-events:none;
}
.hero-inner{ position:relative; padding-top:56px; padding-bottom:48px; }
@media (max-width:640px){
  .hero-inner{ text-align:center; padding-top:40px; padding-bottom:36px; }
  .eyebrow::after{ margin-left:auto; margin-right:auto; background:var(--color-gold-bright); }
  .hero h1, .hero p.lede{ margin-left:auto; margin-right:auto; }
  .hero-facts{ justify-content:center; gap:20px 28px; }
}
.eyebrow{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-hero-accent); font-weight:700; margin-bottom:14px; }
.eyebrow::after{ content:""; display:block; width:32px; height:2px; margin-top:10px; background:linear-gradient(90deg, var(--color-gold-bright), transparent); }
.hero h1{ color:var(--color-header-text); font-size:clamp(1.9rem, 4vw, 2.9rem); max-width:18ch; }
.hero p.lede{ margin-top:16px; max-width:52ch; color:rgba(255,255,255,0.82); font-size:1.05rem; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.hero-facts{ display:flex; gap:28px; flex-wrap:wrap; margin-top:36px; }
.hero-fact .num{ font-size:1.3rem; font-weight:800; color:var(--color-hero-accent); font-family:"Manrope",sans-serif; }
.hero-fact .label{ font-size:.78rem; color:rgba(255,255,255,0.7); }

.section-head{ margin-bottom:26px; }
.section-head .kicker{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--color-accent); font-weight:700; margin-bottom:8px; }
.section-head .kicker::after{ content:""; display:block; width:28px; height:2px; margin-top:9px; background:linear-gradient(90deg, var(--color-gold), transparent); }
.section-head h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); }
.section-head p{ color:var(--color-text-muted); max-width:60ch; margin-top:8px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:800px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } }

.roster-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:8px; }
@media (max-width:800px){ .roster-grid{ grid-template-columns:1fr; } }
.roster-card{ padding:18px 20px; }
.roster-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:2px; }
.roster-card-head h4{ font-size:.98rem; margin:0; }
.roster-card .fine{ color:var(--color-text-muted); }
table.reg-table.small th, table.reg-table.small td{ padding:7px 8px; font-size:.84rem; }

.card-photo{
  height:84px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  background:linear-gradient(120deg, var(--color-header-bg) 0%, #123B44 55%, #1C5A4E 100%);
  border-radius:var(--radius-card) var(--radius-card) 0 0;
  border-bottom:2px solid var(--color-gold);
}
.card-photo::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,0.16) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(228,199,122,0.18) 0%, transparent 65%);
}
.card-photo svg{ width:30px; height:30px; opacity:.95; position:relative; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }
.card-body{ padding:20px; display:flex; flex-direction:column; gap:10px; }
.program-card{ display:flex; flex-direction:column; gap:0; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.program-card:hover{ transform:translateY(-3px); }
.program-card .card-body{ gap:10px; }
.program-card .fee{ font-size:1.5rem; font-weight:800; color:var(--color-accent); }
.program-card .fee sup{ font-size:.6em; }
.program-card ul{ margin:0; padding-left:18px; font-size:.88rem; color:var(--color-text-muted); }
.program-card ul li{ margin-bottom:4px; }

.coach-row{ display:flex; gap:32px; align-items:center; margin-bottom:36px; }
.coach-row.reverse{ flex-direction:row-reverse; }
.coach-photo{
  flex:0 0 180px; width:180px; height:180px; border-radius:10px;
  background:linear-gradient(150deg, var(--color-accent-bright) 0%, var(--color-accent) 50%, #0B241A 100%);
  color:#fff; font-family:"Manrope",sans-serif; font-weight:800; font-size:2.6rem;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--color-gold);
  box-shadow:0 10px 24px -10px rgba(15,29,51,0.4), inset 0 1px 1px rgba(255,255,255,0.25);
}
.coach-info{ flex:1; min-width:220px; }
@media (max-width:640px){
  .coach-row, .coach-row.reverse{ flex-direction:column; align-items:flex-start; gap:16px; }
  .coach-photo{ width:120px; height:120px; font-size:1.8rem; }
}

.camp-card{ display:flex; flex-direction:column; gap:0; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.camp-card:hover{ transform:translateY(-3px); }
.camp-card .card-body{ gap:8px; }
.camp-card .dates{ font-size:.86rem; }
.camp-card .groups{ display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:var(--color-text-muted); }

footer.site{ background:var(--color-header-bg); color:rgba(255,255,255,0.75); padding:32px 0; margin-top:40px; border-top:2px solid var(--color-gold); }
footer.site .wrap{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:flex-start; }
footer.site a.footlink{ color:var(--color-hero-accent); text-decoration:none; font-size:.85rem; cursor:pointer; background:none; border:0; padding:0;}
footer.site .fine{ font-size:.74rem; max-width:52ch; opacity:.8; margin-top:10px; }

/* auth */
.auth-shell{ max-width:420px; margin:0 auto; }
.auth-tabs{ display:flex; gap:6px; background:var(--color-surface-2); padding:4px; border-radius:8px; margin-bottom:24px; }
.auth-tab{ flex:1; text-align:center; padding:9px; border-radius:6px; border:0; background:none; cursor:pointer; font-weight:600; font-size:.88rem; color:var(--color-text-muted); }
.auth-tab.active{ background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-card); }
.auth-card{ padding:28px; }

/* dashboard */
.dash-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.child-chip{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border:1px solid var(--color-border); border-radius:10px; background:var(--color-surface); margin-bottom:8px; }
.child-chip .name{ font-weight:600; }
.child-chip .age{ font-size:.8rem; color:var(--color-text-muted); }
table.reg-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
table.reg-table th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); padding:8px 10px; border-bottom:1.5px solid var(--color-border); }
table.reg-table td{ padding:10px 10px; border-bottom:1px solid var(--color-border); vertical-align:top; }
.reg-table input.adm-input, .reg-table textarea.adm-input{
  width:100%; min-width:80px; padding:6px 8px; font-size:.85rem; border-radius:6px;
  border:1.5px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font-family:inherit;
}
.reg-table textarea.adm-input{ min-height:44px; resize:vertical; }
.reg-table input[data-field="fee"], .reg-table input[data-field="price"]{ width:90px; min-width:70px; }
table.reg-table tr:last-child td{ border-bottom:0; }
.table-scroll{ overflow-x:auto; }
.empty-state{ padding:32px; text-align:center; color:var(--color-text-muted); border:1.5px dashed var(--color-border); border-radius:12px; }

/* availability toggle — one click, saves instantly */
.switch{ position:relative; display:inline-block; width:40px; height:23px; flex:none; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch-slider{ position:absolute; inset:0; cursor:pointer; background:var(--color-border); border-radius:999px; transition:background .15s ease; }
.switch-slider::before{ content:""; position:absolute; height:17px; width:17px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .15s ease; box-shadow:0 1px 2px rgba(0,0,0,.35); }
.switch input:checked + .switch-slider{ background:var(--color-accent); }
.switch input:checked + .switch-slider::before{ transform:translateX(17px); }
.switch input:focus-visible + .switch-slider{ outline:3px solid var(--color-focus); outline-offset:2px; }
.avail-cell{ display:flex; align-items:center; gap:8px; }
.avail-cell .avail-label{ font-size:.78rem; color:var(--color-text-muted); font-weight:600; white-space:nowrap; }
tr.row-unavailable{ opacity:.5; }

/* program picker */
.pick-tabs{ display:flex; gap:10px; margin-bottom:20px; }
.pick-tab, .season-tab{ padding:10px 18px; border-radius:10px; border:1.5px solid var(--color-border); background:var(--color-surface); cursor:pointer; font-weight:600; font-size:.9rem; }
.pick-tab.active, .season-tab.active{ border-color:var(--color-accent); background:var(--color-surface-2); color:var(--color-accent); }
.option-card{ position:relative; display:block; cursor:pointer; padding:16px 18px; border:1.5px solid var(--color-border); border-radius:12px; background:var(--color-surface); margin-bottom:10px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.option-card:hover{ transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(15,29,51,0.25); }
.option-card input{ position:absolute; top:16px; right:16px; width:18px; height:18px; }
.option-card.selected{ border-color:var(--color-accent); background:var(--color-surface-2); box-shadow:0 0 0 1px var(--color-accent), 0 8px 20px -10px rgba(20,108,140,0.45); }
.option-card.waitlist{ border-color:var(--color-flag); background:var(--color-flag-soft); }
.option-card.booked{ cursor:default; opacity:.75; border-style:dashed; background:var(--color-bg); }
.option-card.booked:hover{ transform:none; box-shadow:none; }
.booked-badge{ background:var(--color-surface); color:var(--color-text-muted); border-color:var(--color-border); }
.staff-alert{ margin:0 0 16px; padding:12px 16px; border:1.5px solid var(--color-flag); background:var(--color-flag-soft); color:var(--color-flag-text); border-radius:12px; font-size:.92rem; line-height:1.5; }
.staff-alert .link-btn{ color:inherit; font-weight:700; font-size:inherit; }
.option-card.waitlist.selected{ border-color:var(--color-flag); background:var(--color-flag-soft); box-shadow:0 0 0 1px var(--color-flag), 0 8px 20px -10px rgba(184,134,59,0.45); }
.option-card .title{ font-weight:700; padding-right:28px; }
.option-card .meta{ font-size:.84rem; color:var(--color-text-muted); margin-top:4px; }
.month-picker{ cursor:default; margin-top:12px; padding-top:12px; border-top:1px solid var(--color-border); }
.month-picker-label{ font-size:.8rem; font-weight:600; color:var(--color-text-muted); margin-bottom:8px; }
.month-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.month-chip{ cursor:pointer; padding:6px 12px; border-radius:8px; border:1.5px solid var(--color-border); background:var(--color-surface); font-size:.82rem; font-weight:600; color:var(--color-text-muted); }
.month-chip.checked{ border-color:var(--color-accent); background:var(--color-accent); color:#fff; }
.month-picker-amount{ font-size:.82rem; color:var(--color-text-muted); margin-top:8px; font-weight:600; }

.stat-pill{ display:inline-flex; gap:6px; align-items:center; font-size:.78rem; padding:5px 11px; border-radius:999px; background:var(--color-surface-2); border:1px solid var(--color-border); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--color-accent); }

.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--color-header-bg); color:var(--color-header-text); padding:12px 20px;
  border-radius:8px; border:1px solid var(--color-hero-accent); font-size:.88rem; box-shadow:var(--shadow-card);
  z-index:50;
}

.staff-note{ font-size:.78rem; color:var(--color-text-muted); margin-bottom:18px; }

/* payment */
.pay-summary-row{ display:flex; justify-content:space-between; gap:10px; font-size:.9rem; padding:6px 0; }
.pay-summary-row .item-label{ color:var(--color-text); }
.pay-summary-row .item-amount{ color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.pay-summary-total{ border-top:1.5px solid var(--color-border); margin-top:8px; padding-top:12px; font-weight:800; font-size:1.05rem; }
.paid-badge, .due-badge{ display:inline-block; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; padding:3px 9px; border-radius:5px; }
.paid-badge{ background:#EAF6EC; color:#2E6B3E; border:1px solid #79b98a; }
.due-badge{ background:var(--color-danger-soft); color:var(--color-danger); border:1px solid var(--color-danger); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .paid-badge{ background:#153A22; color:#7FD99A; border-color:#2E6B3E; } }
:root[data-theme="dark"] .paid-badge{ background:#153A22; color:#7FD99A; border-color:#2E6B3E; }
.badge.full-badge{ background:var(--color-danger-soft); color:var(--color-danger); border-color:var(--color-danger); }
.wait-badge{ display:inline-block; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; padding:3px 9px; border-radius:5px; background:var(--color-flag-soft); color:var(--color-flag-text); border:1px solid var(--color-flag); }

/* Academy term picker — deliberately more prominent than a plain tab so it reads as a required first step */
.term-picker{ margin-bottom:20px; padding:16px; border:1.5px dashed var(--color-border); border-radius:12px; background:var(--color-surface); }
.term-picker-label{ font-size:.88rem; font-weight:700; color:var(--color-text); margin-bottom:10px; }
.term-choice-row{ display:flex; gap:12px; flex-wrap:wrap; }
.term-choice{ flex:1 1 180px; min-width:160px; text-align:left; padding:14px 16px; border-radius:10px; border:1.5px solid var(--color-border); background:var(--color-bg); cursor:pointer; display:flex; flex-direction:column; gap:3px; transition:border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease; }
.term-choice:hover{ transform:translateY(-1px); border-color:var(--color-accent); box-shadow:0 6px 16px -8px rgba(15,29,51,0.2); }
.term-choice.active{ border-color:var(--color-accent); background:var(--color-surface-2); box-shadow:0 0 0 1px var(--color-accent); }
.term-choice-title{ font-weight:700; font-size:1rem; }
.term-choice-meta{ font-size:.8rem; color:var(--color-text-muted); }

/* weekly attendance */
.wk-att-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--color-border); }
.wk-att-row:last-child{ border-bottom:0; }
.wk-att-child{ font-weight:700; }
.wk-att-meta{ font-size:.82rem; color:var(--color-text-muted); }
.wk-att-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.wk-att-btn{ padding:8px 14px; border-radius:8px; border:1.5px solid var(--color-border); background:var(--color-bg); cursor:pointer; font-size:.85rem; font-weight:600; color:var(--color-text-muted); }
.wk-att-btn:hover{ border-color:var(--color-accent); }
.wk-att-btn.yes.active{ border-color:#2E6B3E; background:#EAF6EC; color:#2E6B3E; }
.wk-att-btn.no.active{ border-color:var(--color-danger); background:var(--color-danger-soft); color:var(--color-danger); }
:root[data-theme="dark"] .wk-att-btn.yes.active{ background:#153A22; color:#7FD99A; border-color:#2E6B3E; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wk-att-btn.yes.active{ background:#153A22; color:#7FD99A; border-color:#2E6B3E; } }

/* checkout redirect notice */
.spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--color-border); border-top-color:var(--color-accent); animation:spin 0.8s linear infinite; margin:0 auto 16px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============ Academy office: tabs, stats, filters ============ */
.wrap.wrap-wide{ max-width:1400px; }
.staff-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.staff-head .staff-note{ margin-bottom:0; }

.staff-stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:18px; }
@media (max-width:760px){ .staff-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.stat-tile{
  text-align:left; background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px;
  padding:12px 14px; cursor:pointer; color:var(--color-text); font:inherit;
  transition:border-color .15s ease, transform .15s ease;
}
.stat-tile:hover{ border-color:var(--color-accent); transform:translateY(-1px); }
.stat-tile .stat-num{ display:block; font-family:"Manrope",sans-serif; font-weight:800; font-size:1.5rem; line-height:1.1; }
.stat-tile .stat-label{ display:block; font-size:.78rem; color:var(--color-text-muted); margin-top:2px; }
.stat-tile.warn .stat-num{ color:var(--color-flag-text); }
.stat-tile.danger .stat-num{ color:var(--color-danger); }

.staff-tabs{
  position:sticky; top:0; z-index:20;
  display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  background:var(--color-bg); border-bottom:1.5px solid var(--color-border);
  margin:0 0 22px; padding-top:6px;
}
.staff-tabs::-webkit-scrollbar{ display:none; }
.staff-tab{
  flex:none; background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-1.5px;
  padding:10px 14px; font:inherit; font-size:.92rem; font-weight:600; color:var(--color-text-muted);
  cursor:pointer; white-space:nowrap;
}
.staff-tab:hover{ color:var(--color-text); }
.staff-tab.active{ color:var(--color-accent); border-bottom-color:var(--color-accent); }
.staff-tab .tab-count{ display:inline-block; margin-left:6px; font-size:.72rem; padding:1px 7px; border-radius:10px; background:var(--color-surface-2); color:var(--color-text-muted); }

.panel-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.panel-head h3{ font-size:1.15rem; margin:0 0 4px; }
.sub-head{ font-size:1rem; margin:0 0 12px; }

.staff-filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.staff-filters input[type="text"]{ flex:1 1 240px; max-width:340px; }
.staff-filters select{ flex:0 1 auto; width:auto; max-width:240px; }
.link-accent{ color:var(--color-accent) !important; }
.check-inline{ display:inline-flex; margin:0; font-weight:500; align-items:center; gap:8px; font-size:.88rem; color:var(--color-text-muted); cursor:pointer; }
.check-inline input{ width:auto; margin:0; }

.prog-short{ white-space:nowrap; }
.prog-short .prog-sub{ display:block; font-size:.78rem; color:var(--color-text-muted); }

/* Rosters as collapsible cards */
details.roster-card > summary{ list-style:none; cursor:pointer; }
details.roster-card > summary::-webkit-details-marker{ display:none; }
details.roster-card > summary .roster-card-head h4::before{ content:"▸"; display:inline-block; width:1em; color:var(--color-text-muted); transition:transform .15s ease; }
details.roster-card[open] > summary .roster-card-head h4::before{ transform:rotate(90deg); }
details.roster-card > summary p{ margin-bottom:0 !important; }
details.roster-card[open] > summary p{ margin-bottom:12px !important; }
.roster-empty-note{ color:var(--color-text-muted); font-size:.88rem; margin:4px 0 8px; }
.reg-table .paid-badge, .reg-table .due-badge, .reg-table .wait-badge{ white-space:nowrap; }
.roster-grid{ align-items:start; }
.pay-settings{ padding:16px 18px; margin-bottom:28px; max-width:720px; }
.pay-switch-row{ display:flex; flex-wrap:wrap; gap:14px 32px; }
.pay-option[hidden]{ display:none !important; }

/* ============ Parent booking flow ============ */
.book-btn{ margin-top:auto; width:100%; }
.program-card .card-body, .camp-card .card-body{ flex:1; }
.places{ font-size:.82rem; font-weight:600; color:#2E6B3E; }
.places.full{ color:var(--color-flag-text); }
.option-card .meta .places{ font-weight:600; }

.flow-steps{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 18px; font-size:.82rem; color:var(--color-text-muted); }
.flow-step{ display:inline-flex; align-items:center; gap:7px; font-weight:600; white-space:nowrap; }
.flow-step .num{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--color-border); font-size:.75rem; }
.flow-step.current{ color:var(--color-text); }
.flow-step.current .num{ background:var(--color-accent); border-color:var(--color-accent); color:#fff; }
.flow-step.done .num{ background:var(--color-surface-2); color:var(--color-accent); border-color:var(--color-accent); }
.flow-sep{ flex:0 1 24px; min-width:10px; height:1.5px; background:var(--color-border); }
.pending-note{ background:var(--color-flag-soft); border:1px solid var(--color-flag); color:var(--color-text); border-radius:10px; padding:10px 14px; font-size:.88rem; margin-bottom:18px; }

/* Payment choice as tappable cards */
.pay-options{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; }
@media (max-width:520px){ .pay-options{ grid-template-columns:1fr; } }
.pay-option{
  display:flex; align-items:flex-start; gap:12px; margin:0; cursor:pointer;
  padding:14px 16px; border:1.5px solid var(--color-border); border-radius:12px; background:var(--color-surface);
  font-weight:400; transition:border-color .15s ease, box-shadow .15s ease;
}
.pay-option input{ width:18px; height:18px; margin:2px 0 0; flex:none; accent-color:var(--color-accent); }
.pay-option:has(input:checked){ border-color:var(--color-accent); box-shadow:0 0 0 1px var(--color-accent); background:var(--color-surface-2); }
.pay-option-title{ font-weight:700; font-size:.95rem; }
.pay-option-meta{ font-size:.82rem; color:var(--color-text-muted); margin-top:2px; }

/* Running total */
.order-summary{ border:1.5px solid var(--color-border); border-radius:12px; padding:14px 16px; margin:18px 0 14px; background:var(--color-surface); }
.os-line{ display:flex; justify-content:space-between; gap:12px; font-size:.9rem; padding:4px 0; }
.os-sub{ display:block; font-size:.78rem; color:var(--color-text-muted); }
.os-total{ display:flex; justify-content:space-between; gap:12px; font-weight:800; font-size:1.02rem; border-top:1px solid var(--color-border); margin-top:8px; padding-top:10px; }

/* ============ Oct 2026 additions ============ */
.link-btn{ background:none; border:0; padding:0; font:inherit; font-size:.88rem; color:var(--color-accent); text-decoration:underline; cursor:pointer; }
.forgot-help{ margin-top:10px; font-size:.86rem; background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:10px; padding:10px 12px; color:var(--color-text); }
.btn-small{ padding:7px 14px; font-size:.84rem; }
.med-flag{ display:inline-block; margin-left:6px; font-size:.68rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:2px 7px; border-radius:5px; background:var(--color-danger-soft); color:var(--color-danger); border:1px solid var(--color-danger); white-space:nowrap; vertical-align:1px; cursor:help; }
.med-text{ display:block; font-size:.78rem; color:var(--color-danger); margin-top:3px; font-weight:500; }
.roster-tools{ display:flex; justify-content:flex-end; margin:-4px 0 6px; }
.pay-option.disabled{ opacity:.5; cursor:not-allowed; }

/* On-the-day register */
.att-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 14px; border:1.5px solid var(--color-border); border-radius:12px; background:var(--color-surface); margin-bottom:8px; }
.att-row.is-here{ border-color:#79b98a; }
.att-row.is-away{ opacity:.7; }
.att-info{ min-width:0; flex:1 1 220px; }
.att-name{ font-weight:700; }
.att-age{ display:inline-block; font-size:.72rem; font-weight:600; color:var(--color-text-muted); background:var(--color-surface-2); border-radius:10px; padding:1px 7px; margin-left:4px; }
.att-meta{ font-size:.8rem; color:var(--color-text-muted); margin-top:3px; }
.att-meta a{ color:var(--color-accent); }
.att-actions{ display:flex; gap:8px; }

/* Privacy notice */
.privacy h3{ font-size:1.05rem; margin:24px 0 8px; }
.privacy p, .privacy li{ color:var(--color-text-muted); font-size:.94rem; }
.privacy ul{ padding-left:20px; margin:0; }
.privacy li{ margin-bottom:6px; }
.privacy a{ color:var(--color-accent); text-decoration:underline; }
/* Let grid columns shrink so wide tables scroll inside them instead of widening the page on phones */
.grid-2 > *, .grid-3 > *{ min-width:0; }
#reg-session-select{ max-width:380px; }
.row3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
@media (max-width:560px){ .row3{ grid-template-columns:1fr 1fr; } }
.ns-preview{ font-size:.86rem; background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:10px; padding:10px 12px; margin:4px 0 12px; color:var(--color-text); }
.ns-warn{ margin-top:6px; color:var(--color-flag-text); font-weight:600; }
.modal-card select{ width:100%; }
.reg-table select.adm-input{ width:100%; padding:6px 8px; font-size:.85rem; border-radius:6px; }
/* Booking: choose a day, then a time */
.day-picker{ margin:0 0 16px; }
.day-choice-row{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:8px; }
.day-choice{ text-align:left; padding:11px 13px; border-radius:10px; border:1.5px solid var(--color-border); background:var(--color-bg); cursor:pointer; display:flex; flex-direction:column; gap:2px; font:inherit; color:var(--color-text); transition:border-color .15s ease, background .15s ease; }
.day-choice:hover{ border-color:var(--color-accent); }
.day-choice.active{ border-color:var(--color-accent); background:var(--color-surface-2); box-shadow:0 0 0 1px var(--color-accent); }
.day-choice-title{ font-weight:700; font-size:.95rem; }
.day-choice-meta{ font-size:.78rem; color:var(--color-text-muted); }
.day-choice.active .day-choice-meta{ color:var(--color-accent); }
/* Home: choose a day, then a time */
.home-days{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin-bottom:20px; }
.home-day{ text-align:left; padding:16px 18px; border-radius:12px; border:1.5px solid var(--color-border); background:var(--color-surface); cursor:pointer; display:flex; flex-direction:column; gap:4px; font:inherit; color:var(--color-text); box-shadow:var(--shadow-card); transition:border-color .15s ease, transform .15s ease; }
.home-day:hover{ border-color:var(--color-accent); transform:translateY(-2px); }
.home-day.active{ border-color:var(--color-accent); background:var(--color-surface-2); box-shadow:0 0 0 1px var(--color-accent); }
.home-day-name{ font-family:"Manrope",sans-serif; font-weight:800; font-size:1.15rem; }
.home-day-meta{ font-size:.82rem; color:var(--color-text-muted); }
.home-day.active .home-day-meta{ color:var(--color-accent); }
.time-card-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.time-card-time{ font-family:"Manrope",sans-serif; font-weight:800; font-size:1.3rem; }
/* Take register: choose a day, then a session time */
#reg-day-buttons{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
.time-choice-row{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:8px; }
.time-choice{ text-align:left; padding:11px 13px; border-radius:10px; border:1.5px solid var(--color-border); background:var(--color-bg); cursor:pointer; display:flex; flex-direction:column; gap:2px; font:inherit; color:var(--color-text); transition:border-color .15s ease, background .15s ease; }
.time-choice:hover{ border-color:var(--color-accent); }
.time-choice.active{ border-color:var(--color-accent); background:var(--color-surface-2); box-shadow:0 0 0 1px var(--color-accent); }
.time-choice-time{ font-weight:800; font-size:1.02rem; font-family:"Manrope",sans-serif; }
.time-choice.active .day-choice-meta{ color:var(--color-accent); }

/* ============ Accounts (revenue) ============ */
:root{ --acc-paid:#0A72A6; --acc-due:#A86F0A; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --acc-paid:#2496CC; --acc-due:#BF8418; } }
:root[data-theme="dark"]{ --acc-paid:#2496CC; --acc-due:#BF8418; }
.stat-tile.static{ cursor:default; }
.stat-tile.static:hover{ transform:none; border-color:var(--color-border); }
.acc-chart-card{ position:relative; padding:16px 18px 12px; }
.acc-chart-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.acc-legend{ display:flex; gap:16px; font-size:.82rem; color:var(--color-text-muted); }
.acc-legend span{ display:inline-flex; align-items:center; gap:6px; }
.acc-swatch{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.acc-legend .acc-swatch{ margin-right:0; }
.acc-swatch.paid{ background:var(--acc-paid); }
.acc-swatch.due{ background:var(--acc-due); }
.acc-chart{ position:relative; height:240px; padding-left:56px; }
.acc-grid{ position:absolute; inset:0 0 22px 0; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }
.acc-gridline{ position:relative; border-top:1px solid var(--color-border); height:0; }
.acc-gridline:last-child{ border-top-color:var(--color-text-muted); }
.acc-gridline span{ position:absolute; left:0; top:-8px; font-size:.7rem; color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.acc-bars{ position:absolute; left:56px; right:0; top:0; bottom:0; display:grid; grid-template-columns:repeat(12, 1fr); gap:6px; }
.acc-col{ display:flex; flex-direction:column; cursor:pointer; min-width:0; }
.acc-stack{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:2px; padding:0 18%; }
.acc-bar{ width:100%; min-height:0; }
.acc-bar.paid{ background:var(--acc-paid); border-radius:0; }
.acc-bar.due{ background:var(--acc-due); }
.acc-stack .acc-bar:first-child{ border-radius:4px 4px 0 0; }
.acc-xlabel{ height:22px; line-height:22px; text-align:center; font-size:.72rem; color:var(--color-text-muted); }
.acc-col.now .acc-xlabel{ color:var(--color-text); font-weight:700; }
.acc-col.dim .acc-stack{ opacity:.45; }
.acc-tip{ position:absolute; top:44px; transform:translateX(-50%); background:var(--color-bg); border:1px solid var(--color-border); border-radius:8px; padding:8px 10px; font-size:.8rem; box-shadow:0 8px 20px -8px rgba(15,29,51,.35); pointer-events:none; white-space:nowrap; z-index:5; }
.acc-tip div{ margin-top:3px; color:var(--color-text-muted); }
.acc-tip b{ color:var(--color-text); }
.acc-tip-total{ border-top:1px solid var(--color-border); padding-top:4px; }
.reg-table th.num, .reg-table td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.acc-total-row td{ font-weight:800; border-top:1.5px solid var(--color-border); }
.acc-now-row td{ background:var(--color-surface-2); }
@media (max-width:640px){ .acc-chart{ height:200px; padding-left:44px; } .acc-bars{ left:44px; gap:3px; } .acc-stack{ padding:0 8%; } .acc-xlabel{ font-size:.62rem; } }
.acc-grid{ left:56px; }
.acc-gridline span{ left:-56px; width:50px; text-align:right; }
@media (max-width:640px){ .acc-grid{ left:44px; } .acc-gridline span{ left:-44px; width:40px; } }
/* Accounts: costs */
:root{ --acc-cost:#B8456A; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --acc-cost:#D0668A; } }
:root[data-theme="dark"]{ --acc-cost:#D0668A; }
.acc-swatch.cost{ background:var(--acc-cost); }
.acc-bar.cost{ background:var(--acc-cost); border-radius:4px 4px 0 0; }
.acc-pair{ flex:1; display:flex; gap:2px; padding:0 10%; min-height:0; }
.acc-pair .acc-stack{ padding:0; flex:1; }
.reg-table td.num.neg{ color:var(--color-danger); }
.acc-costs-card{ padding:16px 18px; margin-top:22px; }
.cost-form{ display:grid; grid-template-columns:1.1fr 1.6fr .8fr 1fr 1.1fr auto; gap:12px; align-items:start; }
.cost-form .field{ margin-bottom:0; }
.cost-form input[type="number"], .cost-form input[type="month"]{ width:100%; padding:11px 13px; border-radius:var(--radius-control); border:1.5px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font:inherit; font-size:.96rem; }
.cost-repeat{ padding-top:30px; }
.cost-submit{ padding-top:24px; }
@media (max-width:900px){ .cost-form{ grid-template-columns:1fr 1fr; } .cost-repeat, .cost-submit{ padding-top:0; } }
@media (max-width:640px){ .acc-pair{ padding:0 4%; gap:1px; } }
.lesson-btn{ margin-top:14px; padding:9px 16px; font-size:.88rem; text-decoration:none; }
@media (max-width:640px){
  .header-inner{ padding:12px 16px; gap:10px; }
  .brand{ gap:10px; min-width:0; }
  .brand-text .name{ font-size:.95rem; }
  .brand-text .sub{ display:none; }
  .crest-logo{ width:40px; height:40px; }
  nav.top{ gap:2px; flex:none; }
  nav.top .navlink{ padding:8px; }
  nav.top .btn-pill{ padding:8px 12px; }
}