@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow+Semi+Condensed:wght@500;600&family=Inter:wght@400;500;600&display=swap');
:root{
  --bg:#0B1626; --navy:#0E1D33; --surface:#102138; --surface-2:#0F2138;
  --ink:#F4F1E8; --muted:#9FB2CB; --faint:#6E84A1;
  --amber:#F2A93B; --amber-lo:#FFC368; --amber-ink:#241803;
  --gold:#F2A93B; --silver:#CAD3DE; --bronze:#CC8A56;
  --line:rgba(159,178,203,.16); --line-2:rgba(159,178,203,.28);
  --danger:#E2696F; --danger-bg:#3A1820;
  --r:10px; --r-lg:13px;
  --fc:'Barlow Condensed','Inter',sans-serif;
  --fn:'Barlow Semi Condensed','Inter',sans-serif;
  --fb:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--fb); line-height:1.55; -webkit-font-smoothing:antialiased}
.wrap{max-width:840px; margin:0 auto; padding:0 22px 64px}
.cond{font-family:var(--fc)} .num{font-family:var(--fn); font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
::selection{background:var(--amber); color:var(--amber-ink)}

/* masthead */
.mast{padding:30px 0 0}
.kicker{font-family:var(--fc); text-transform:uppercase; letter-spacing:.22em; font-size:13px; color:var(--amber); font-weight:600}
.mast-row{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:2px}
.display{font-family:var(--fc); font-weight:700; font-size:clamp(34px,7vw,56px); line-height:.92; margin:0}
.meta{font-family:var(--fc); text-transform:uppercase; letter-spacing:.14em; font-size:15px; color:var(--muted); font-weight:600; padding-bottom:6px}
.meta b{color:var(--ink)}
.startline{height:3px; background:var(--amber); margin:16px 0 0; transform-origin:left; transform:scaleX(0); animation:draw .9s cubic-bezier(.2,.7,.3,1) .15s forwards}
@keyframes draw{to{transform:scaleX(1)}}

/* tabs */
.tabs{display:flex; gap:26px; margin:18px 0 0; border-bottom:1px solid var(--line)}
.tab{appearance:none; background:none; border:0; color:var(--muted); cursor:pointer; padding:12px 2px; font-family:var(--fc);
  text-transform:uppercase; letter-spacing:.1em; font-weight:600; font-size:16px; border-bottom:2px solid transparent; margin-bottom:-1px}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--amber)}
.tab:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:3px}

/* segmented */
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:4px}
.seg button{appearance:none; background:none; border:0; color:var(--muted); cursor:pointer; font-family:var(--fc); font-weight:600;
  letter-spacing:.06em; font-size:15px; padding:6px 15px; border-radius:8px; text-transform:uppercase}
.seg button[aria-pressed="true"]{background:var(--amber); color:var(--amber-ink)}
.seg button:focus-visible{outline:2px solid var(--amber); outline-offset:2px}

/* buttons */
.btn{appearance:none; cursor:pointer; font-family:var(--fc); text-transform:uppercase; letter-spacing:.07em; font-weight:600;
  font-size:15px; padding:10px 18px; border-radius:var(--r); border:1px solid var(--line-2); background:transparent; color:var(--ink)}
.btn:hover{border-color:var(--amber)}
.btn:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--amber); color:var(--amber-ink); border-color:var(--amber)}
.btn-primary:hover{background:var(--amber-lo)}
.btn-danger{color:var(--danger); border-color:#5a2630}
.btn-danger:hover{border-color:var(--danger)}

/* fields */
.field{display:block; margin:0 0 14px}
.field > label{display:block; font-family:var(--fc); text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:var(--muted); font-weight:600; margin:0 0 6px}
.input,.select,.clock{width:100%; height:42px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); color:var(--ink);
  font-family:var(--fb); font-size:15px; padding:0 12px}
.clock{font-family:var(--fn); font-variant-numeric:tabular-nums; letter-spacing:.04em}
.input::placeholder,.clock::placeholder{color:var(--faint)}
.input:focus,.select:focus,.clock:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px #f2a93b33}
.select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 18px,calc(100% - 12px) 18px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:34px}

/* timesheet entry row */
.entry{display:grid; grid-template-columns:54px 1fr 110px 96px; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line)}
.entry .clock,.entry .select{height:42px; margin:0}
.wh-toggle{appearance:none; cursor:pointer; height:42px; border-radius:var(--r); border:1px solid var(--line-2); background:transparent;
  color:var(--muted); font-family:var(--fc); text-transform:uppercase; letter-spacing:.06em; font-weight:600; font-size:13px}
.wh-toggle[aria-pressed="true"]{background:var(--amber); color:var(--amber-ink); border-color:var(--amber)}

/* bib medallion */
.bib{position:relative; width:46px; height:34px; border-radius:5px; background:#F3EEE2; display:flex; align-items:center; justify-content:center; flex:none}
.bib b{font-family:var(--fc); font-weight:700; font-size:19px; color:#13243d; line-height:1}
.bib::before{content:""; position:absolute; top:0; left:6px; right:6px; height:4px;
  background:radial-gradient(circle,#0B162644 1px,transparent 1.4px) 0 0/5px 5px repeat-x; opacity:.5}
.bib i.pin{position:absolute; top:3px; width:4px; height:4px; border-radius:50%; background:#13243d33}
.bib i.l{left:4px} .bib i.r{right:4px}
.bib-lg{width:54px; height:40px} .bib-lg b{font-size:22px}
.is-1{box-shadow:inset 0 0 0 2px var(--gold)} .is-2{box-shadow:inset 0 0 0 2px var(--silver)} .is-3{box-shadow:inset 0 0 0 2px var(--bronze)}

/* result row + stagger bar */
.row{display:grid; grid-template-columns:46px 28px 1fr 92px; gap:14px; align-items:center; padding:12px 4px; border-bottom:1px solid var(--line)}
.pos{font-family:var(--fc); font-weight:700; font-size:22px; color:var(--faint); text-align:center; line-height:1}
.row.podium .pos{color:var(--ink)}
.name{font-weight:600; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stag{position:relative; height:16px; margin-top:7px}
.stag .track{position:absolute; left:0; right:0; top:7px; height:2px; background:var(--line); border-radius:2px}
.stag .fill{position:absolute; top:7px; height:2px; background:var(--amber); border-radius:2px}
.stag .tgt{position:absolute; top:-1px; width:1px; height:18px; background:var(--faint)}
.stag .tgt span{position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--faint); font-family:var(--fc); letter-spacing:.06em; white-space:nowrap}
.stag .dot{position:absolute; top:3px; width:10px; height:10px; border-radius:50%; transform:translateX(-50%)}
.stag .dot.s{background:var(--bg); box-shadow:inset 0 0 0 2px var(--amber)}
.stag .dot.f{background:var(--ink); box-shadow:0 0 0 2px var(--bg)}
.score{text-align:right}
.time{font-family:var(--fn); font-weight:600; font-variant-numeric:tabular-nums; font-size:18px; line-height:1}
.pts{font-size:11px; color:var(--amber); font-family:var(--fc); letter-spacing:.08em; text-transform:uppercase; font-weight:600; margin-top:3px}

/* cards */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 15px; display:flex; gap:13px; align-items:center}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.chips{display:flex; gap:6px; margin-top:6px; flex-wrap:wrap}
.chip{font-family:var(--fn); font-variant-numeric:tabular-nums; font-size:12.5px; background:var(--bg); border:1px solid var(--line); color:var(--muted); padding:2px 8px; border-radius:6px}
.chip b{color:var(--ink); font-weight:600}

/* standings table */
.tbl{width:100%; border-collapse:collapse; font-size:14.5px}
.tbl thead th{font-family:var(--fc); text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:var(--amber); font-weight:600; text-align:left; padding:0 12px 10px; border-bottom:1px solid var(--line-2)}
.tbl tbody td{padding:11px 12px; border-bottom:1px solid var(--line)}
.tbl tbody tr:hover{background:#ffffff08}
.tbl .r{text-align:right; font-family:var(--fn); font-variant-numeric:tabular-nums}
.tbl .rank{font-family:var(--fc); font-weight:700; color:var(--faint)}

/* pills */
.pill{display:inline-block; font-family:var(--fc); text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-size:11px; padding:2px 8px; border-radius:5px}
.pill-wh{background:#3a2a0f; color:var(--amber-lo)} .pill-tt{background:#13314a; color:#8fb6dd}
.pill-dnf{background:var(--danger-bg); color:#e79ba6} .pill-life{background:#13314a; color:var(--amber-lo)}

/* pin pad */
.pin-screen{max-width:300px; margin:8px auto; text-align:center}
.pin-dots{display:flex; gap:12px; justify-content:center; margin:14px 0 20px}
.pin-dots i{width:12px; height:12px; border-radius:50%; border:1.5px solid var(--line-2)}
.pin-dots i.on{background:var(--amber); border-color:var(--amber)}
.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.key{appearance:none; cursor:pointer; height:58px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); color:var(--ink); font-family:var(--fn); font-size:24px; font-variant-numeric:tabular-nums}
.key:hover{border-color:var(--amber)} .key:active{background:var(--surface-2)}

/* empty + note */
.empty{color:var(--muted); font-size:14px; padding:24px 0; max-width:50ch}
.empty b{color:var(--ink); font-weight:600}
.note{margin-top:30px; font-size:12.5px; color:var(--faint); display:flex; align-items:center; gap:7px}
.note i{width:7px; height:7px; border-radius:50%; background:var(--amber); animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #f2a93b66}70%{box-shadow:0 0 0 7px #f2a93b00}100%{box-shadow:0 0 0 0 #f2a93b00}}

/* section helper for the kit */
.kit-sec{margin:40px 0 0; padding-top:22px; border-top:1px solid var(--line)}
.kit-lbl{font-family:var(--fc); text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--faint); font-weight:600; margin:0 0 14px}

@media (max-width:560px){
  .row{grid-template-columns:40px 22px 1fr 78px; gap:10px}
  .entry{grid-template-columns:46px 1fr 92px; }
  .entry .wh-toggle{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){ .startline{animation:none; transform:none} .note i{animation:none} }