/* VYC Track & Field — look "B · Bright". The whole look lives in this file (plus theme.js for the phone menu, logo and current-page highlight).
   Selectors are prefixed with "body" so they win over each page's own <style> block and the Tailwind utility classes without editing either. */
:root{
  --navy:#001C3B;--act:#1764C8;--act-dark:#0F4FA3;--act-soft:#E6F0FC;--clay:#D2451E;
  --ink:#0F1B2D;--muted:#5B6878;--line:#E1E7EF;--field:#C7D1DE;--bg:#F4F6F9;--soft:#F7F9FC;
  --ok:#1E7F52;--ok-bg:#E4F4EC;--warn:#8A5A00;--warn-bg:#FFF3D6;--bad:#B42318;--bad-bg:#FDE7E4;
  --head:'Barlow Semi Condensed','Inter',ui-sans-serif,system-ui,sans-serif;
  /* names the pages already use */
  --brand:var(--act);--brand2:var(--act-dark);--accent:var(--clay);--border:var(--line)
}
*{box-sizing:border-box}
html,html body{background:var(--bg)}
body{font-family:'Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;color:var(--ink)}
input,select,textarea,button{font-family:inherit}
::selection{background:var(--act);color:#fff}

/* ---------- headings ---------- */
body h1,body h2,body h3,body .tile .font-bold{font-family:var(--head);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--navy)}
body h1{line-height:1.1}
body h2.text-purple-800{color:#5B21B6}

/* ---------- top bar ---------- */
.topnav{background:#fff;color:var(--navy);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);box-shadow:inset 0 -3px 0 var(--clay)}
.topnav-inner{max-width:1100px;margin:0 auto;padding:.5rem 1rem .6rem;display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap}
.topnav .brand{color:var(--navy);font-family:var(--head);font-weight:700;text-decoration:none;font-size:1.25rem;letter-spacing:.02em;white-space:pre;display:inline-flex;align-items:center}
.topnav .brand b{color:var(--act);font-weight:700}
.topnav .brand-logo{margin-right:.55rem;width:38px;height:38px;border-radius:50%;object-fit:cover;background:#fff;flex:none}
.topnav nav{display:flex;gap:.15rem;flex-wrap:wrap;margin-left:auto}
.topnav nav a{color:#44536A;text-decoration:none;font-size:.85rem;font-weight:500;padding:.4rem .6rem;border-radius:7px;border:0;white-space:nowrap;transition:background .15s,color .15s}
.topnav nav a:hover{background:var(--act-soft);color:var(--act)}
.topnav nav a[aria-current="page"]{background:var(--act-soft);color:var(--act);font-weight:600}
.navtoggle{display:none;margin-left:auto;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--field);color:var(--navy);border-radius:8px;padding:.45rem .75rem;font-weight:600;font-size:.85rem;cursor:pointer}
.navtoggle i{display:block;width:14px;height:2px;background:var(--navy);box-shadow:0 4px var(--navy),0 -4px var(--navy)}
@media (max-width:860px){
  html.js-nav .navtoggle{display:inline-flex}
  html.js-nav .topnav nav{display:none;width:100%;margin:0;flex-direction:column;flex-wrap:nowrap;gap:0;padding-bottom:.3rem}
  html.js-nav .topnav.open nav{display:flex}
  html.js-nav .topnav nav a{padding:.8rem .5rem;font-size:1rem;border-radius:0;border-top:1px solid var(--line)}
}

/* ---------- cards ---------- */
body .card,body .tapcard,body details.meetwin{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 2px rgba(16,32,56,.06)}
body .tile{border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 2px rgba(16,32,56,.06);transition:border-color .15s,box-shadow .15s}
body .tile:hover{border-color:var(--act);box-shadow:0 0 0 3px var(--act-soft)}
body .tile .font-bold{display:flex;align-items:center;gap:.6rem;font-size:1.25rem}
body .tile .tile-ic{width:40px;height:40px;border-radius:10px;background:var(--act-soft);color:var(--act);display:inline-grid;place-items:center;flex:none}

/* page-title bands: Register (the card holding the "who are you" tabs) and Home */
body .card:has(#roleTabs),body .card.text-center:has(h1){background:var(--act);background-image:repeating-linear-gradient(100deg,rgba(255,255,255,.09) 0 2px,transparent 2px 46px);border-color:var(--act);color:#fff}
body .card:has(#roleTabs) h1,body .card.text-center:has(h1) h1{color:#fff}
body .card:has(#roleTabs) p,body .card.text-center:has(h1) p{color:#DCE9FA}
body .card.text-center:has(h1) a{color:#fff}
body #logoImg{max-height:84px!important;border-radius:50%;background:#fff}

/* ---------- Register: "who are you" tabs ---------- */
body #roleTabs{flex-wrap:wrap;gap:4px;background:#fff;border-radius:10px;padding:5px}
body .roletab{border:0;border-radius:7px;padding:9px 13px;font-weight:600;font-size:.92rem;line-height:1.2}
body .roletab:not(.active){background:transparent;color:var(--muted)}
body .roletab:not(.active):hover{background:var(--act-soft);color:var(--act)}
body .roletab.active{background:var(--act);color:#fff;border:0}

/* ---------- Register: numbered sections ---------- */
body #parentForm,body #coachForm,body #adminForm,body #timerForm,body #vusForm{counter-reset:sec}
body form > .card > h2:first-child{display:flex;align-items:center;gap:.6rem}
body form > .card > h2:first-child::before{counter-increment:sec;content:counter(sec);font-family:'Inter',sans-serif;font-size:13px;font-weight:700;letter-spacing:0;width:26px;height:26px;border-radius:50%;background:var(--act-soft);color:var(--act);display:inline-grid;place-items:center;flex:none}

/* ---------- form fields ---------- */
body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=image]),body select,body textarea{border:1.5px solid var(--field);border-radius:8px;background-color:#fff;color:var(--ink)}
body input:not([type=checkbox]):not([type=radio]):focus,body select:focus,body textarea:focus{outline:0;border-color:var(--act);box-shadow:0 0 0 3px var(--act-soft)}
body input:disabled,body select:disabled,body textarea:disabled,body input[readonly]{background-color:#F1F4F8;border-style:dashed;color:var(--ink);opacity:1}
body input[type=radio],body input[type=checkbox]{accent-color:var(--act)}
body ::placeholder{color:#8794A6}
body label.f{color:var(--ink)}
body form input:not([type=checkbox]):not([type=radio]):not([type=file]),body form select{min-height:46px}
@media (max-width:640px){ body form input:not([type=checkbox]):not([type=radio]),body form select,body form textarea{font-size:16px} }
body .legal{background:var(--soft);border-color:var(--line)}
body .rolecard{border-color:var(--line);border-radius:10px}
body .rolecard:hover{border-color:#9DC0EE}
body .rolecard:has(input:checked){border-color:var(--act);background:var(--act-soft)}
body .chip:has(input:checked){border-color:var(--act);background:var(--act-soft);color:var(--act-dark)}
body .subpick{background:var(--soft);border-color:var(--line)}

/* ---------- buttons ---------- */
body .btn,body .tapbtn{border-radius:8px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:filter .12s,background .12s,transform .05s}
body .btn:hover,body .tapbtn:hover{filter:brightness(.95)}
body .btn:active,body .tapbtn:active{transform:translateY(1px)}
/* main action */
body .btn.bg-blue-600,body .btn.bg-blue-700,body .btn.bg-blue-500,body .btn.pri,body .tapbtn.pri{background:var(--act);color:#fff;border-color:var(--act)}
/* other action */
body .btn.bg-gray-200,body .btn.bg-gray-100,body .btn.bg-gray-300,body .btn.bg-white,body .btn.lite,body .tapbtn.lite,body .btn:not([class*="bg-"]):not(.pri):not(.grn):not(.red):not(.seg):not(.tab):not(.tatab):not(.raceBtn){background:#fff;color:var(--ink);border-color:var(--field)}
/* strong secondary (was near-black) */
body .btn.bg-gray-900,body .btn.bg-gray-800,body .btn.bg-gray-700,body .btn.bg-slate-800,body .btn.bg-purple-700,body .btn.bg-purple-600{background:var(--navy);color:#fff;border-color:var(--navy)}
/* approve / confirm */
body .btn.bg-green-600,body .btn.bg-green-700,body .btn.grn,body .tapbtn.grn{background:var(--ok);color:#fff;border-color:var(--ok)}
/* delete / reject */
body .btn.red,body .btn.bg-red-600,body .btn.bg-red-700,body .btn.bg-red-100,body .btn.bg-red-50{background:#fff;color:var(--bad);border-color:#E7B4AE}
body .btn.red:hover,body .btn.bg-red-600:hover,body .btn.bg-red-100:hover{background:var(--bad-bg);filter:none}

/* ---------- switches and tabs ---------- */
body .seg,body .tab,body .tatab{font-weight:600;color:var(--muted)}
body .seg.active,body .tab.active,body .tatab.active{background:var(--act);color:#fff}
body .raceBtn{border-color:var(--field);border-radius:8px;font-weight:600}
body .raceBtn.active{background:var(--act);border-color:var(--act);color:#fff}

/* ---------- status tags ---------- */
body .pill,body .tappill{font-weight:600;font-size:11.5px;border-radius:999px;white-space:nowrap}
body .pill.ok,body .tappill.ok{background:var(--ok-bg);color:var(--ok)}
body .pill.warn,body .tappill.warn{background:var(--warn-bg);color:var(--warn)}
body .pill.bad,body .tappill.bad{background:var(--bad-bg);color:var(--bad)}
body .pill.gray{background:#EEF1F5;color:#4A5768}
body .bq{background:var(--ok-bg);color:var(--ok)}

/* ---------- tables ---------- */
body table.t th,body .tapt th,body .evtbl th,body .athtbl th{background:var(--soft);color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line)}
body table.t td,body .tapt td,body .evtbl td,body .athtbl td{border-color:#EEF1F5}
body table.t tbody tr:hover td{background:#FAFBFD}
body .evtbl tr.sel td{background:var(--act);color:#fff}
body .athtbl tr.entered td{background:var(--ok-bg)}
body .scroll,body .evgrid,body .rosterScroll{border-color:var(--line)}
body .col-head{border-bottom-color:var(--act)}
body .col-head h2{color:var(--navy)}
body .sexhead{color:var(--act)}
body .heathead{color:var(--act);background:var(--act-soft)}

/* ---------- colour utilities the pages use ---------- */
body .text-blue-600,body .text-blue-700,body .text-blue-800{color:var(--act)}
body .bg-blue-50{background-color:var(--act-soft)}
body .border-blue-500,body .border-blue-400{border-color:var(--act)}