/* Roadrunner athletics: school purple + gold, with the mascot's blue as the accent. */
:root {
  color-scheme: light;
  --purple-900: #1e0b3a;
  --purple-800: #2c1257;
  --purple-700: #3d1a78;
  --purple-600: #52259c;
  --purple-100: #eee8f8;
  --purple-50: #f7f4fc;
  --gold: #f6b819;
  --gold-deep: #d9970a;
  --gold-soft: #fff3cf;
  --blue: #2f7de1;
  --blue-soft: #e3effd;
  --orange: #f27a24;
  --ink: #1b1530;
  --ink-soft: #5c5670;
  --line: #e6e1ef;
  --page: #f5f3f9;
  --card: #ffffff;
  --radius: 18px;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); line-height: 1.45; font-size: 16px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: .01em; }
h2 { font-size: 1.75rem; text-transform: uppercase; color: var(--purple-700); line-height: 1.05; }
.hint { color: var(--ink-soft); margin: 4px 0 0; font-size: .95rem; }
select, input, button { font: inherit; color: var(--ink); }

/* ---------- header ---------- */
.top {
  color: #fff;
  background:
    repeating-linear-gradient(-62deg, transparent 0 46px, rgba(255,255,255,.05) 46px 50px),
    linear-gradient(120deg, var(--purple-900) 0%, var(--purple-700) 55%, var(--purple-600) 100%);
  position: relative;
}
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(90deg, var(--gold) 0 60%, var(--blue) 60% 80%, var(--orange) 80%); }
.top-inner { max-width: 1080px; margin: 0 auto; padding: 18px 16px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* Gold ring around the mascot's purple disc. The image isn't clipped, so the
   roadrunner's head and tail run out over the ring. Sizes line the disc up with the badge. */
.logo-badge { --badge: 96px; position: relative; flex: none; width: var(--badge); height: var(--badge);
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--gold), 0 8px 20px rgba(0,0,0,.35); }
.logo { position: absolute; width: 114.6%; left: -9.2%; top: -2.1%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.title { flex: 1; min-width: 220px; }
.title h1 { font-size: clamp(2rem, 5vw, 2.9rem); font-style: italic; font-weight: 800; text-transform: uppercase; line-height: .95; }
.title p { margin: 6px 0 0; color: rgba(255,255,255,.82); font-size: .95rem; }
.season { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: rgba(255,255,255,.85); }
.season select { border: 0; border-radius: 10px; padding: 6px 10px; }

main { max-width: 1080px; margin: 0 auto; padding: 24px 16px 56px; display: grid; gap: 22px; }
.card { background: var(--card); border-radius: var(--radius); padding: 24px; min-width: 0;
  box-shadow: 0 1px 2px rgba(30,11,58,.06), 0 10px 30px rgba(30,11,58,.07); }

/* ---------- whole club ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: var(--radius); padding: 28px 24px 24px; text-align: center; color: #fff;
  background:
    radial-gradient(circle at 85% 20%, rgba(246,184,25,.25), transparent 45%),
    linear-gradient(135deg, var(--purple-800), var(--purple-600));
  box-shadow: 0 14px 34px rgba(61,26,120,.28);
}
/* track lanes */
.hero::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 120%; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.08); box-shadow: 0 0 0 28px rgba(255,255,255,.035), 0 0 0 56px rgba(255,255,255,.03); pointer-events: none; }
.hero p { margin: 0; position: relative; }
.eyebrow { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; font-size: 1.05rem; color: var(--gold); }
.hero-num { font-family: var(--display); font-weight: 800; font-style: italic; line-height: 1; margin: 4px 0 14px !important;
  font-size: clamp(3.6rem, 13vw, 6.5rem); }
.hero-num .unit { font-size: .38em; margin-left: .25em; font-style: normal; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.hero-chips { position: relative; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.chip { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 14px; font-size: .95rem; }
.chip b { font-family: var(--display); font-size: 1.25rem; font-weight: 700; margin-right: 4px; color: #fff; }

/* ---------- run around the world ---------- */
.journey-map { margin-top: 16px; width: 100%; }
.journey-map svg { display: block; width: 100%; height: auto; }
.journey-map .ocean { fill: #e8f1fc; stroke: #cfe0f6; stroke-width: 1; }
.journey-map .graticule { fill: none; stroke: #d6e5f8; stroke-width: .6; }
.journey-map .land { fill: #d8cfeb; stroke: #fff; stroke-width: .5; }
.journey-map .route-todo { fill: none; stroke: var(--purple-600); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .55; }
.journey-map .route-done { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.journey-map .stop { fill: #fff; stroke: var(--purple-600); stroke-width: 1.5; cursor: pointer; }
.journey-map .stop.done { fill: var(--gold); stroke: var(--gold-deep); }
.journey-map .home { fill: var(--purple-700); stroke: #fff; stroke-width: 2.5; }
.journey-map .anti { fill: var(--orange); stroke: #fff; stroke-width: 2.5; cursor: pointer; }
.journey-map .maplbl { font-family: var(--display); font-weight: 700; font-size: 14px; fill: var(--purple-800);
  paint-order: stroke; stroke: rgba(255,255,255,.9); stroke-width: 4px; text-transform: uppercase; letter-spacing: .04em; }
.journey-map .runner-mark { filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.journey-bar { position: relative; height: 14px; margin: 18px 4px 26px; background: var(--purple-100); border-radius: 999px; }
.journey-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--orange)); }
.journey-bar .half { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: var(--orange); border-radius: 2px; }
.journey-bar .lbl { position: absolute; top: 18px; font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
.journey-bar .l0 { left: 0; } .journey-bar .l1 { left: 50%; transform: translateX(-50%); } .journey-bar .l2 { right: 0; }
.journey-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.journey-stats > div { background: var(--purple-50); border-radius: 14px; padding: 12px 14px; }
.journey-stats b { display: block; font-family: var(--display); font-size: 2rem; font-weight: 700; line-height: 1.05; color: var(--purple-700); }
.journey-stats span { font-size: .88rem; color: var(--ink-soft); }
.journey-stats .last b { color: var(--gold-deep); }

/* ---------- find a runner ---------- */
.find-row { display: flex; gap: 10px; margin-top: 16px; max-width: 460px; }
.find-row input { flex: 1; min-width: 0; font-family: var(--display); font-size: 1.9rem; font-weight: 700; padding: 6px 16px;
  border: 2px solid var(--line); border-radius: 14px; background: var(--purple-50); }
.find-row input::placeholder { color: #a9a2ba; font-weight: 600; }
.find-row input:focus { outline: none; border-color: var(--purple-600); background: #fff; }
button { background: linear-gradient(180deg, #ffc93a, var(--gold)); color: var(--purple-900); border: 0; border-radius: 14px;
  padding: 10px 22px; cursor: pointer; font-family: var(--display); font-weight: 800; font-size: 1.35rem; text-transform: uppercase;
  letter-spacing: .04em; box-shadow: 0 4px 0 var(--gold-deep), 0 8px 16px rgba(217,151,10,.3); }
button:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--gold-deep); }

.runner { margin-top: 22px; display: grid; gap: 18px; }
.athlete { border-radius: 16px; overflow: hidden; color: #fff; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 22px;
  padding: 20px 22px; position: relative;
  background:
    repeating-linear-gradient(-62deg, transparent 0 40px, rgba(255,255,255,.05) 40px 44px),
    linear-gradient(120deg, var(--purple-800), var(--purple-600)); }
.athlete .bibno { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 1.15rem; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }
.athlete .room { color: rgba(255,255,255,.8); font-size: .95rem; }
.athlete .miles { grid-row: span 2; text-align: center; padding-right: 22px; border-right: 1px solid rgba(255,255,255,.18); }
.athlete .miles .v { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 4.2rem; line-height: .9; }
.athlete .miles .l { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--gold); font-weight: 700; }
.athlete .laps { font-size: .95rem; color: rgba(255,255,255,.85); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 12px 16px; position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent, var(--purple-600)); }
.stat .v { font-family: var(--display); font-size: 2.1rem; font-weight: 700; line-height: 1.05; color: var(--ink); }
.stat .l { font-size: .85rem; color: var(--ink-soft); }
.a1 { --accent: var(--orange); } .a2 { --accent: var(--blue); } .a3 { --accent: var(--purple-600); } .a4 { --accent: var(--gold); }

.next { background: var(--gold-soft); border-radius: 14px; padding: 16px 18px 18px; }
.next p { margin: 0 0 12px; font-size: 1.05rem; }
.next p b { font-family: var(--display); font-size: 1.45rem; color: var(--purple-700); }
.track { position: relative; height: 16px; background: #fff; border-radius: 999px; box-shadow: inset 0 0 0 2px rgba(217,151,10,.35); }
.track > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; min-width: 16px;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.25) 0 8px, transparent 8px 16px), linear-gradient(90deg, var(--gold), var(--orange)); }
.track img { position: absolute; top: 50%; width: 46px; height: 46px; transform: translate(-60%, -58%); filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }

.sub-h { margin: 6px 0 12px; font-size: 1.3rem; text-transform: uppercase; color: var(--purple-700); }

/* Medal-style ribbon badges */
.ribbons { position: relative; z-index: 0; display: flex; flex-wrap: wrap; gap: 18px 12px; padding-bottom: 14px; }
.rosette { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), transparent 42%), var(--c);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.7), inset 0 0 0 6px var(--c), 0 4px 10px rgba(30,11,58,.18); }
.rosette::before, .rosette::after { content: ""; position: absolute; bottom: -14px; width: 15px; height: 24px; background: var(--c); z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); filter: brightness(.88); }
.rosette::before { left: 16px; transform: rotate(16deg); }
.rosette::after { right: 16px; transform: rotate(-16deg); }
.rosette span { text-align: center; line-height: 1; font-family: var(--display); font-weight: 800; font-size: 1.45rem; }
.rosette small { display: block; font-size: .55rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 1px; }
.rosette.todo { --c: #e4dfec; color: #9a93aa; background: #f1eef6; box-shadow: inset 0 0 0 2px #d6cfe2; }
.rosette.todo::before, .rosette.todo::after { background: #e4dfec; filter: none; }

/* ---------- classroom ---------- */
.room-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
#room { font-family: var(--display); font-size: 1.35rem; font-weight: 700; padding: 6px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--purple-50); }
.room-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 16px; }
.tiles-h { margin: 24px 0 10px; font-size: .95rem; color: var(--ink-soft); }
.map { position: relative; width: 100%; border-radius: 14px; overflow: hidden; }
.map .tile { position: absolute; display: grid; place-items: center; text-decoration: none; font-family: var(--display); font-weight: 700;
  border: 2px solid #fff; border-radius: 10px; color: var(--purple-900); overflow: hidden; transition: transform .12s; }
.map .tile:hover, .map .tile:focus { outline: 3px solid var(--gold); outline-offset: -3px; z-index: 1; }
.tile.s0 { background: #e3effd; } .tile.s1 { background: #b7d3f6; } .tile.s2 { background: #86b6ef; }
.tile.s3 { background: #3987e5; color: #fff; } .tile.s4 { background: #256abf; color: #fff; } .tile.s5 { background: #184f95; color: #fff; }
.rb-bars { display: grid; gap: 8px; max-width: 640px; }
.rb-row { display: grid; grid-template-columns: 16px 80px 1fr 36px; align-items: center; gap: 10px; }
.rb-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.rb-label { font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--ink-soft); }
.rb-track { height: 12px; background: var(--purple-100); border-radius: 999px; overflow: hidden; }
.rb-track > span { display: block; height: 100%; border-radius: 999px; }
.rb-n { font-family: var(--display); font-weight: 700; font-size: 1.2rem; text-align: right; }

/* ---------- charts ---------- */
.chart { margin-top: 14px; width: 100%; overflow: hidden; }
.chart svg { display: block; width: 100%; height: auto; }
.chart text { fill: var(--ink-soft); font-size: 12px; font-family: "Inter", sans-serif; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .bar { fill: var(--blue); }
.chart .bar.manual { opacity: .35; }
.chart .bar.me { fill: var(--gold); }
.chart .hit { fill: transparent; }
.chart g:hover .bar { opacity: .8; }

/* ---------- lookup-only page (?lookup) ---------- */
.lookup-only .hero, .lookup-only .journey, .lookup-only .room, .lookup-only .notes, .lookup-only .days, .lookup-only .season { display: none !important; }
.lookup-only main { max-width: 780px; }
.lookup-link { display: none; margin-top: 18px; }
.lookup-only .lookup-link { display: block; }
.full-link { color: var(--purple-600); font-weight: 600; text-decoration: none; }

.notes { box-shadow: none; background: transparent; border: 1px dashed #cfc7dd; padding: 14px 18px; }
.notes summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.notes ul { margin: 10px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: .88rem; }

.tip { position: fixed; z-index: 10; pointer-events: none; background: var(--purple-900); color: #fff;
  padding: 8px 11px; border-radius: 10px; font-size: .85rem; line-height: 1.4; max-width: 240px; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.miss { font-size: 1.05rem; color: var(--ink-soft); }

@media (max-width: 560px) {
  .card { padding: 18px; }
  .logo-badge { --badge: 68px; }
  .journey-map .maplbl { font-size: 11px; }
  .journey-stats b { font-size: 1.6rem; }
  .athlete { grid-template-columns: 1fr; text-align: center; }
  .athlete .miles { grid-row: auto; padding: 0 0 12px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
}