/* -- Tokens -----------------------------------------------
   "Flag-off dark": the palette of a 4:30am tropical road race —
   indigo night, sodium-lamp amber, pre-dawn violet.
   Light theme is the complete definition; dark redefines tokens only. */
:root{
  --ground:#EBEEF5; --surface:#FFFFFF; --surface-2:#F5F7FB; --surface-3:#EDF0F7;
  --ink:#131A2E; --ink-2:#4A5468; --ink-3:#79839A;
  --line:#DCE1EC; --line-2:#C7CEDD;
  --half:#B4690E; --half-soft:#FBEFDD;
  --full:#5B4BD6; --full-soft:#EAE7FB;
  --accent:#B4690E; --accent-ink:#FFFFFF;
  --focus:#5B4BD6;
  --shadow:0 1px 2px rgba(19,26,46,.06), 0 8px 24px -12px rgba(19,26,46,.18);
  --grid:#E6EAF2;
  --good:#1B7A3E; --good-soft:#E3F2E8;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0B1020; --surface:#141A2E; --surface-2:#1A2137; --surface-3:#222A43;
    --ink:#EDF0F7; --ink-2:#A6B0C6; --ink-3:#7A8199;
    --line:#2A3350; --line-2:#3A4566;
    --half:#C87C1C; --half-soft:#33260F;
    --full:#7A68EE; --full-soft:#221F44;
    --accent:#E5A24E; --accent-ink:#1A1207;
    --focus:#8E7EF5;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
    --grid:#232C46;
    --good:#3FA76A; --good-soft:#11291E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0B1020; --surface:#141A2E; --surface-2:#1A2137; --surface-3:#222A43;
  --ink:#EDF0F7; --ink-2:#A6B0C6; --ink-3:#7A8199;
  --line:#2A3350; --line-2:#3A4566;
  --half:#C87C1C; --half-soft:#33260F;
  --full:#7A68EE; --full-soft:#221F44;
  --accent:#E5A24E; --accent-ink:#1A1207;
  --focus:#8E7EF5;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
  --grid:#232C46;
  --good:#3FA76A; --good-soft:#11291E;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.55; -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
h1,h2,h3{margin:0; font-family:"Saira Condensed","Arial Narrow",sans-serif; font-weight:700; text-wrap:balance; letter-spacing:.005em}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
button{font:inherit; color:inherit; cursor:pointer}

.wrap{max-width:920px; margin:0 auto; padding:0 18px 72px}

/* -- Masthead ------------------------------------------- */
.mast{
  position:relative; padding:34px 0 22px;
  border-bottom:1px solid var(--line);
}
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.mast h1{
  font-size:clamp(38px,9vw,60px); line-height:.92; margin:10px 0 8px;
  text-transform:uppercase; letter-spacing:-.005em;
}
.mast h1 em{font-style:normal; color:var(--half)}
.mast p{margin:0; max-width:56ch; color:var(--ink-2); font-size:15px}
.themebtn{
  position:absolute; top:30px; right:0; width:38px; height:38px;
  display:grid; place-items:center; border:1px solid var(--line);
  border-radius:50%; background:var(--surface); color:var(--ink-2);
}
.themebtn:hover{border-color:var(--line-2); color:var(--ink)}

/* -- Stat strip ----------------------------------------- */
.stats{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  gap:1px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; margin:22px 0 30px;
}
.stat{
  background:var(--surface); padding:13px 15px 14px; min-width:0;
  border-left:3px solid transparent; box-shadow:0 0 0 1px var(--line);
}
/* totals span a third of the row, personal bests a quarter of the next */
.stat{grid-column:span 4}
.stat.keyed{grid-column:span 3}

@media (max-width:780px){
  .stats{grid-template-columns:repeat(6,minmax(0,1fr))}
  .stat{grid-column:span 2}
  .stat.keyed{grid-column:span 3}
}
@media (max-width:560px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat, .stat.keyed{grid-column:span 1}
  .stats .stat:last-child:nth-child(odd){grid-column:1 / -1}
}
.stat.keyed{border-left-color:var(--dot)}
.stat .k{
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.stat .v{
  font-family:"Saira Condensed",sans-serif; font-weight:700;
  font-size:29px; line-height:1.1; margin-top:3px; font-variant-numeric:tabular-nums;
}
.stat .s{font-size:12px; line-height:1.35; color:var(--ink-3); margin-top:2px; text-wrap:pretty}

/* Labels and subtitles wrap freely, so the three rows are pinned to a shared
   track set - otherwise a two-line label shunts that tile's number out of line. */
@supports (grid-template-rows: subgrid){
  .stat{display:grid; grid-template-rows:subgrid; grid-row:span 3; align-content:start}
}

/* -- Panels --------------------------------------------- */
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); margin-bottom:26px;
}
.panel-hd{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:10px; padding:16px 18px 0;
}
.panel-hd h2{font-size:21px; text-transform:uppercase; letter-spacing:.01em}
.panel-hd .sub{font-size:12.5px; color:var(--ink-3)}

/* -- Segmented control ---------------------------------- */
.seg{display:inline-flex; background:var(--surface-3); border-radius:8px; padding:3px; gap:2px}
.seg button{
  border:0; background:transparent; color:var(--ink-2);
  font-size:12.5px; font-weight:500; padding:5px 11px; border-radius:6px;
  white-space:nowrap;
}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.12)}

/* -- Chart ---------------------------------------------- */
.chartbox{position:relative; padding:6px 8px 4px}
.chartbox svg{display:block; width:100%; height:auto; touch-action:pan-y}
.chart-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px;
  padding:2px 18px 16px; border-top:1px solid var(--line); margin-top:4px; padding-top:12px;
}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2)}
.legend span{display:inline-flex; align-items:center; gap:7px}
.swatch{width:11px; height:11px; border-radius:50%; flex:none}
.swatch.hollow{background:var(--surface) !important; box-shadow:inset 0 0 0 2.5px var(--ring,var(--half))}
.linkbtn{
  margin-left:auto; border:0; background:none; color:var(--ink-2);
  font-size:12.5px; text-decoration:underline; text-underline-offset:3px; padding:2px 0;
}
.linkbtn:hover{color:var(--ink)}
.tip{
  position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,-100%);
  background:var(--surface); border:1px solid var(--line-2); border-radius:9px;
  padding:8px 11px; box-shadow:var(--shadow); min-width:150px; z-index:5;
  transition:opacity .1s linear;
}
.tip.on{opacity:1}
.tip.below{transform:translate(-50%,0)}
.tip .t-name{font-size:12.5px; font-weight:600; line-height:1.3}
.tip .t-date{font-size:11px; color:var(--ink-3); margin-top:1px}
.tip .t-row{display:flex; justify-content:space-between; gap:16px; font-size:12px; margin-top:5px; color:var(--ink-2)}
.tip .t-row b{font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}

/* -- Data table ----------------------------------------- */
.tablewrap{overflow-x:auto; padding:0 18px 18px}
table{border-collapse:collapse; width:100%; font-size:13px; min-width:640px}
th,td{text-align:left; padding:7px 12px 7px 0; border-bottom:1px solid var(--line); white-space:nowrap}
th{
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
td.num{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
/* utility: must win over any component's own display value */
.hidden{display:none !important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* -- Filter row ----------------------------------------- */
.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 16px}
.filters .grow{flex:1}
.rowlabel{
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}

/* -- Timeline ------------------------------------------- */
.timeline{list-style:none; margin:0; padding:0; position:relative}
.timeline::before{
  content:""; position:absolute; left:66px; top:12px; bottom:12px;
  width:1px; background:var(--line-2);
}
@media (max-width:640px){ .timeline::before{left:0} }

.race{display:grid; grid-template-columns:56px 1fr; gap:0 22px; padding:0 0 16px; position:relative}
.rail{
  text-align:right; padding-top:15px; position:relative;
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
}
.rail .yy{display:block; font-size:11px; font-weight:600; color:var(--ink-3); letter-spacing:.04em}
.rail .dd{display:block; font-size:12.5px; color:var(--ink-2); font-weight:500}
.rail::after{
  content:""; position:absolute; left:62px; top:20px;
  width:9px; height:9px; border-radius:50%;
  background:var(--surface); box-shadow:0 0 0 2.5px var(--dot,var(--ink-3));
}
.card{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--dot,var(--line-2));
  border-radius:11px; padding:13px 15px; box-shadow:var(--shadow);
  scroll-margin-top:20px; transition:border-color .2s, transform .2s;
}
.card.flash{border-color:var(--dot); transform:translateY(-2px)}
.card-top{display:flex; align-items:flex-start; gap:12px}
.card h3{font-size:19px; line-height:1.15; flex:1; min-width:0}
.card h3 .yr{color:var(--ink-3); font-weight:600}
.where{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.finish{text-align:right; flex:none}
.finish .t{
  font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:21px;
  line-height:1.1; font-variant-numeric:tabular-nums;
}
.finish .p{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.tag{
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  padding:3px 7px; border-radius:5px; background:var(--surface-3); color:var(--ink-2);
}
.tag.dist{background:var(--soft); color:var(--dot)}
.tag.pb{background:var(--dot); color:var(--surface); font-weight:600}
.tag.faster{background:var(--good-soft); color:var(--good)}
.tag.slower{background:var(--surface-3); color:var(--ink-3)}
.note{
  font-size:12.5px; color:var(--ink-2); margin-top:9px; padding-top:9px;
  border-top:1px dashed var(--line); line-height:1.5;
}
.rowbtns{display:flex; gap:12px; margin-top:9px}
.rowbtns button{border:0; background:none; color:var(--ink-3); font-size:12px; text-decoration:underline; text-underline-offset:3px; padding:0}
.rowbtns button:hover{color:var(--ink)}

@media (max-width:640px){
  .race{grid-template-columns:1fr; gap:0}
  .rail{text-align:left; padding:0 0 6px 16px; display:flex; gap:8px; align-items:baseline}
  .rail .yy, .rail .dd{display:inline}
  .rail::after{left:-4px; top:6px}
  .card{margin-left:16px}
  .finish .t{font-size:19px}
}

/* -- PB grid -------------------------------------------- */
.pbs{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; padding:14px 18px 18px}
.pb{border:1px solid var(--line); border-radius:11px; padding:13px 15px; background:var(--surface-2); border-left:3px solid var(--dot)}
.pb.aside{background:transparent; border-style:dashed; border-left-style:solid}
.pb .k{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.pb .v{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:27px; line-height:1.2; margin-top:4px; font-variant-numeric:tabular-nums}
.pb .m{font-size:12.5px; color:var(--ink-2); margin-top:2px}

/* -- Form / dialog -------------------------------------- */
.addbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 30px}
.btn{
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  border-radius:8px; padding:8px 14px; font-size:13.5px; font-weight:500;
}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:600}
.btn.primary:hover{filter:brightness(1.06)}
dialog{
  border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink);
  padding:0; width:min(460px,calc(100vw - 28px)); box-shadow:var(--shadow);
}
dialog::backdrop{background:rgba(8,12,24,.55)}
.dlg-hd{padding:16px 18px 12px; border-bottom:1px solid var(--line)}
.dlg-hd h2{font-size:20px; text-transform:uppercase}
form.fields{padding:16px 18px; display:grid; gap:12px}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
label{display:grid; gap:4px}
label span{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
input,select,textarea{
  font:inherit; font-size:14px; padding:8px 10px; border-radius:7px;
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink); width:100%;
}
input::placeholder{color:var(--ink-3)}
.chk{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2)}
.chk input{width:auto}
.dlg-ft{display:flex; gap:10px; justify-content:flex-end; padding:0 18px 18px}
.dlg-ft .del{margin-right:auto; color:var(--ink-3); border:0; background:none; font-size:13px; text-decoration:underline; text-underline-offset:3px}
.err{color:var(--full); font-size:12.5px; min-height:0}

.empty{padding:34px 18px; text-align:center; color:var(--ink-3); font-size:14px}
footer{
  margin-top:38px; padding-top:18px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-3); line-height:1.7;
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }
/* short-distance classes — 5K teal-blue, 10K magenta */
:root{ --fivek:#1B7FA8; --fivek-soft:#E3F0F7; --tenk:#C21F63; --tenk-soft:#FBE6EE }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --fivek:#2E8CB8; --fivek-soft:#122A3B; --tenk:#D2447A; --tenk-soft:#33101F } }
:root[data-theme="dark"]{
  --fivek:#2E8CB8; --fivek-soft:#122A3B; --tenk:#D2447A; --tenk-soft:#33101F }
.ax{font-family:"IBM Plex Mono",monospace;font-size:10.5px;fill:var(--ink-3)}
.ax.lab{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.val{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600}
#cross{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 3;opacity:0}
#halo{fill:none;stroke-width:2.5;opacity:0}


/* -- Account bar ---------------------------------------- */
.acct{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:9px 12px; margin:0 0 18px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  font-size:13px; color:var(--ink-2);
}
.acct .dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--ink-3); box-shadow:0 0 0 3px color-mix(in srgb, var(--ink-3) 20%, transparent);
}
.acct.ok    .dot{background:var(--good); box-shadow:0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent)}
.acct.warn  .dot{background:var(--half); box-shadow:0 0 0 3px color-mix(in srgb, var(--half) 22%, transparent)}
.acct .who{flex:1; min-width:140px}
.acct .who b{color:var(--ink); font-weight:600}
.acct .btn{padding:5px 11px; font-size:12.5px}

.setup{
  border:1px dashed var(--line-2); background:transparent; border-radius:10px;
  padding:14px 16px; margin:0 0 18px; font-size:13.5px; color:var(--ink-2); line-height:1.6;
}
.setup h3{font-size:15px; margin-bottom:4px; text-transform:uppercase; letter-spacing:.02em; color:var(--ink)}
.setup code{
  font-family:"IBM Plex Mono",monospace; font-size:12px;
  background:var(--surface-3); padding:1px 5px; border-radius:4px; color:var(--ink);
}

/* -- Sign-in dialog ------------------------------------- */
.hint{font-size:12.5px; color:var(--ink-3); line-height:1.5; margin-top:-2px}
.busy{opacity:.55; pointer-events:none}

textarea{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; line-height:1.5;
  resize:vertical; min-height:120px;
}