/* CYO Youth Basketball — theme.css
   The one place the look is defined. Every page links this file and keeps only
   its own layout. Brand of record: CLIENTS/CYO/Branding/brand-notes.md
   (AETHER Digital × CYO navy / gold / parish blue, locked in 2026-10-12).
   Fonts: Inter 300/400/500/600 from Google Fonts (link in each page's <head>). */

/* ── tokens ─────────────────────────────────────────────── */
:root{
  --bg:#0a1430; --surface:#071026; --card:#0d1a3b;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --head:#ffffff; --text:#dfe4ee; --body:#a9b3c6; --muted:#8a96a8; --faint:#7d889c;
  --gold:#f0a500; --gold-l:#ffc93c; --on-gold:#0f1f45;
  --blue:#4a5faa; --blue-l:#8d9ce0; --on-blue:#e3e7ff; --tag-blue:#cdd4ff;
  --ok:#27ae60; --ok-t:#7fe0a5; --err:#c0392b; --err-t:#f2a49b;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.4,0,.2,1);
  --r-card:24px; --r-tile:20px; --r-inner:16px; --r-input:14px; --r-pill:9999px;
  --shadow:0 30px 80px -20px rgba(0,0,0,.8);
  --glow:0 0 10px rgba(240,165,0,.35),0 0 50px -10px rgba(240,165,0,.4);
  color-scheme:dark;
}

/* ── base ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;overflow-x:hidden;background:var(--bg);color:var(--text);
  font:300 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
p{margin:0}
p+p{margin-top:10px}
strong,b{font-weight:600;color:var(--head)}
a{color:var(--gold-l);text-decoration:none;transition:color .3s var(--ease)}
a:hover{color:var(--head)}
p a,li a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,201,60,.4)}
:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
code{font:500 13px/1.5 var(--mono);color:var(--gold-l)}
.ico{flex:none;display:inline-block;vertical-align:middle}
main,.site-foot{position:relative;z-index:1}
/* short pages: the footer sits at the bottom of the screen, not mid-page */
body{display:flex;flex-direction:column}
body>*{flex-shrink:0}
body>main{flex:1 0 auto}

/* ── layout ─────────────────────────────────────────────── */
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-left:16px;padding-right:16px}
@media(min-width:720px){.wrap{padding-left:32px;padding-right:32px}}
.wrap.narrow{max-width:760px}
.center{text-align:center}
.stack{display:flex;flex-direction:column;gap:16px}
.page-head{padding-top:48px;padding-bottom:8px}
@media(min-width:900px){.page-head{padding-top:72px}}
.page-body{padding-top:24px;padding-bottom:64px}

/* ── nav ────────────────────────────────────────────────── */
.site-nav{position:sticky;top:0;z-index:30;background:rgba(10,20,48,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;min-height:44px;color:var(--body)}
.brand img,.brand .logo{width:30px;height:auto;flex:none}
.brand-word{font:600 18px/1 var(--sans);letter-spacing:-.02em;color:var(--body)}
.brand-word b{font-weight:600;color:var(--head)}
.nav-links{display:none;gap:24px}
@media(min-width:860px){.nav-links{display:flex}}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;font:500 12px/16px var(--sans);
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--head)}

/* ── type ───────────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:flex-start;gap:10px;margin:0;font:500 12px/16px var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l)}
.eyebrow::before{content:"";width:6px;height:6px;flex:none;margin-top:5px;border-radius:var(--r-pill);background:var(--gold);box-shadow:0 0 10px rgba(240,165,0,.9)}
.eyebrow.center{display:flex;justify-content:center}
.display{margin:16px 0 0;font:600 clamp(42px,6.4vw,64px)/1 var(--sans);letter-spacing:-.025em;color:var(--body);text-wrap:balance}
.display.sm{font-size:clamp(34px,5vw,52px)}
.grad{color:var(--gold);text-shadow:0 0 30px rgba(240,165,0,.35)}
.lede{margin:14px 0 0;max-width:60ch;color:var(--body);font-size:16px;font-weight:300}
.lede.center{margin-left:auto;margin-right:auto}
.h2{margin:12px 0 0;font:600 clamp(30px,4vw,44px)/1.05 var(--sans);letter-spacing:-.025em;color:var(--body)}
.h3{margin:0;font:600 26px/1.1 var(--sans);letter-spacing:-.02em;color:var(--head)}
.card-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;font:600 19px/1.2 var(--sans);color:var(--head)}
.label,.panel-title{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 13px/16px var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.panel-title .ico{color:var(--gold)}
.sub,.soft{color:var(--muted);font-size:13px}
.note{color:var(--muted);font-size:13px;margin:12px 0 0}
.prose p,.prose li{color:var(--body);font-size:15px;line-height:1.7}
.prose ul,.prose ol{padding-left:20px;margin:8px 0 0}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--gold)}

/* ── cards ──────────────────────────────────────────────── */
.card{position:relative;border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),var(--card);
  border:1px solid var(--line2);box-shadow:var(--shadow);padding:28px}
@media(max-width:600px){.card{padding:20px}}
.card.featured{border-color:rgba(240,165,0,.7);box-shadow:var(--glow),var(--shadow)}
.card.flush{padding:0;overflow:hidden}
.well{border-radius:var(--r-inner);background:var(--surface);border:1px solid var(--line);padding:16px 18px;color:var(--body);font-size:14px}

/* ── buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;cursor:pointer;
  border:1px solid transparent;border-radius:var(--r-pill);white-space:nowrap;text-decoration:none;
  font:500 14px/1 var(--sans);letter-spacing:.2px;
  transition:color .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.btn.lg{min-height:46px;padding:0 24px}
.btn.sm{min-height:40px;padding:0 16px}
.btn.xs{min-height:34px;padding:0 12px;font-size:13px}
.btn.wide{width:100%}
.btn-primary{background:var(--gold);color:var(--on-gold);font-weight:600}
.btn-primary:hover{background:var(--gold-l);color:var(--on-gold);box-shadow:0 0 24px rgba(240,165,0,.45)}
.btn-ghost{background:transparent;border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{border-color:rgba(255,255,255,.35);color:var(--head)}
.btn-sec{background:rgba(74,95,170,.22);border-color:rgba(141,156,224,.4);color:var(--on-blue)}
.btn-sec:hover{background:rgba(74,95,170,.32);color:var(--head)}
.btn-danger{background:transparent;border-color:rgba(192,57,43,.55);color:var(--err-t)}
.btn-danger:hover{background:rgba(192,57,43,.12);color:#ffd2cc}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;box-shadow:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ── forms ──────────────────────────────────────────────── */
.fgrid{display:grid;gap:14px}
@media(min-width:600px){.fgrid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;border:0;padding:0;margin:0}
.field.full{grid-column:1/-1}
.field label,.field legend{font:500 12px/16px var(--sans);letter-spacing:.3px;color:var(--body);padding:0}
.req{color:var(--gold)}
.input,.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{width:100%;min-height:46px;padding:0 14px;outline:none;
  border-radius:var(--r-input);border:1px solid var(--line2);background:var(--surface);color:var(--head);
  font:400 15px/1.4 var(--sans);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.field textarea{min-height:90px;padding:12px 14px;resize:vertical}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,165,0,.18),0 0 18px rgba(240,165,0,.2)}
.field input::placeholder,.field textarea::placeholder,.input::placeholder{color:var(--faint)}
.field.error input,.field.error select,.field.error textarea,.input.error{border-color:var(--err)}
.field-err{color:var(--err-t);font-size:13px}
.hint{color:var(--muted);font-size:13px}
.seg-row{display:flex;flex-wrap:wrap;gap:8px}
.seg-opt{position:relative;cursor:pointer}
.seg-opt input{position:absolute;opacity:0;pointer-events:none}
.seg-opt span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;
  border-radius:var(--r-pill);border:1px solid var(--line2);background:var(--surface);color:var(--body);font:500 14px/1 var(--sans);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease)}
.seg-opt input:checked+span{border-color:var(--gold);color:var(--head);box-shadow:0 0 14px rgba(240,165,0,.3)}
.seg-opt input:focus-visible+span{outline:2px solid var(--gold-l);outline-offset:2px}
.check{display:flex;gap:12px;align-items:flex-start;margin:14px 0;cursor:pointer;line-height:1.5;color:var(--body);font-size:14px}
.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--gold)}
.waiver{max-height:260px;overflow:auto;padding:16px 18px;border-radius:var(--r-inner);background:var(--surface);border:1px solid var(--line);color:var(--body);font-size:14px}

/* ── stepper ────────────────────────────────────────────── */
.stepper{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.stepper li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.stepper .num{width:32px;height:32px;border-radius:var(--r-pill);display:grid;place-items:center;border:1px solid var(--line2);
  background:var(--surface);font:600 13px/1 var(--sans);color:var(--muted)}
.stepper .lbl{font:500 12px/1.2 var(--sans);letter-spacing:.3px;color:var(--muted)}
@media(max-width:480px){.stepper .lbl{font-size:10.5px}}
.stepper li.on .num{background:var(--gold);border-color:var(--gold);color:var(--on-gold);box-shadow:0 0 16px rgba(240,165,0,.6)}
.stepper li.on .lbl{color:var(--head)}
.stepper li.done .num{border-color:rgba(240,165,0,.6);color:var(--gold-l)}

/* ── lists, summaries ───────────────────────────────────── */
.lines .line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.lines .line:last-child{border-bottom:0}
.line.total{border-top:1px solid var(--line2)}
.amt{font-weight:500;color:var(--head)}
.line.disc .amt{color:var(--ok-t)}
.amt.big{font:600 32px/1 var(--sans);letter-spacing:-.025em;color:var(--gold)}
.ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;color:var(--body);font-size:14px}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks .ico{margin-top:3px;color:var(--gold)}
.sched{list-style:none;padding:0;margin:0}
.sched li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--line)}
.sched li:last-child{border-bottom:0}
@media(min-width:600px){.sched li{flex-direction:row;justify-content:space-between;gap:16px}.sched .when{text-align:right}}
.sched .who{color:var(--head);font-weight:500}
.sched .when{color:var(--body);font-size:14px}

/* ── pills, tags, notices ───────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:var(--r-pill);padding:5px 11px;
  font:500 12px/1 var(--sans);letter-spacing:.3px;border:1px solid var(--line2);color:var(--body)}
.pill.ok,.pill.received{color:var(--ok-t);border-color:rgba(39,174,96,.5)}
.pill.pending,.pill.warn{color:var(--gold-l);border-color:rgba(240,165,0,.55)}
.pill.info,.pill.waived{color:var(--blue-l);border-color:rgba(141,156,224,.45)}
.pill.err,.pill.refunded{color:var(--err-t);border-color:rgba(192,57,43,.55)}
.pill.na,.pill.closed{color:var(--muted)}
.tag{display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:5px 10px;font:600 11px/1 var(--sans);
  letter-spacing:.12em;text-transform:uppercase;background:rgba(74,95,170,.25);color:var(--tag-blue)}
.tag.travel,.travel .tag{background:rgba(240,165,0,.16);color:var(--gold-l)}
.notice{border-radius:var(--r-inner);padding:14px 16px;font-size:14px;line-height:1.55;color:var(--text);
  background:rgba(74,95,170,.14);border:1px solid rgba(141,156,224,.3);border-left:3px solid var(--blue-l)}
.notice.warn{background:rgba(240,165,0,.10);border-color:rgba(240,165,0,.35);border-left-color:var(--gold)}
.notice.err{background:rgba(192,57,43,.12);border-color:rgba(192,57,43,.45);border-left-color:var(--err)}
.notice strong{color:var(--head)}

/* ── done / success mark ────────────────────────────────── */
.done-mark{width:64px;height:64px;margin:0 auto 18px;display:grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid var(--gold);color:var(--gold-l);background:var(--surface);box-shadow:0 0 30px rgba(240,165,0,.45)}

/* ── tables ─────────────────────────────────────────────── */
.tablewrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align:left;padding:10px 14px;vertical-align:middle}
.table th{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.table td{border-bottom:1px solid var(--line);font-size:14px;color:var(--body)}
.table tbody tr:last-child td{border-bottom:0}

/* ── stat tiles ─────────────────────────────────────────── */
.stat{padding:22px 24px}
.stat .k{font:600 12px/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stat .v{margin-top:10px;font:600 44px/1 var(--sans);letter-spacing:-.025em;color:var(--head)}
.stat .s{margin-top:8px;font-size:13px;color:var(--muted)}

/* ── toast ──────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;max-width:calc(100% - 32px);
  padding:12px 18px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line2);color:var(--head);
  font:500 14px/1.3 var(--sans);box-shadow:var(--shadow)}

/* ── the still line-trail (trail.js paints canvas.trail) ── */
.trail-host{position:relative;overflow:hidden}
.trail-host>*{position:relative;z-index:1}
.trail-host>canvas.trail{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85;border-radius:inherit}
.trail-host::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to top,rgba(7,16,38,.92),rgba(7,16,38,.55) 55%,rgba(7,16,38,.75))}

/* ── footer ─────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line);color:var(--muted);font-size:13px;background:var(--surface)}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:0 12px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.foot-inner a{min-height:44px;display:inline-flex;align-items:center;color:var(--body);text-decoration:none}
.foot-inner a:hover{color:var(--head)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ── print: paper is never navy ─────────────────────────── */
@media print{
  :root{color-scheme:light}
  html,body{background:#fff!important;color:#111!important}
  body::before,canvas.trail,.trail-host::after,.site-nav,.no-print,.btn,.toast{display:none!important}
  *{box-shadow:none!important;text-shadow:none!important}
  .card,.well,.notice,.waiver{background:#fff!important;border:1px solid #bbb!important;color:#111!important;break-inside:avoid}
  .display,.h2,.h3,.card-h,.label,.panel-title,.eyebrow,.lede,.sub,.soft,.note,.prose p,.prose li,strong,b,.grad,a,.site-foot{color:#111!important}
  .eyebrow::before{display:none}
  .site-foot{background:#fff!important;border-top:1px solid #bbb}
  a,p a,li a{color:#111!important;text-decoration:underline!important;text-decoration-color:#999!important}
  .prose li::marker{color:#111}
}