/* Colors and type taken from the Pinterest inspiration board:
   deep indigo night, an orange-to-rust glow, off-white #EDEDF3 and gold #FDA136.
   The board uses General Sans + Halvar Breitschrift; Halvar is a paid font, so
   headings use Archivo at its widest setting as a free stand-in. */
:root {
  /* One color per region on the calendar: --region-bg is a soft tint, --region-solid a bold fill. */
  --region-bg: rgba(226, 87, 43, 0.3);
  --region-solid: linear-gradient(135deg, #fda136 0%, #e2572b 55%, #b5307a 100%);
  --bg: #0b0920;
  --bg-raised: #15122f;
  --bg-hover: #1e1a3d;
  --line: rgba(237, 237, 243, 0.12);
  --text: #ededf3;
  --muted: #a9a7bf;
  --gold: #fda136;
  --ember: #e2572b;
  --rust: #a8432a;
  --glow: linear-gradient(135deg, #fda136 0%, #e2572b 55%, #b5307a 100%);

  --font-body: "General Sans", system-ui, sans-serif;
  --font-display: "Archivo", "General Sans", system-ui, sans-serif;
  --radius: 14px;
  --page: min(1120px, 100% - 32px);
}

.region-R62 { --region-bg: rgba(226, 87, 43, 0.3); --region-solid: linear-gradient(135deg, #fda136 0%, #e2572b 55%, #b5307a 100%); }
.region-R61 { --region-bg: rgba(32, 178, 190, 0.3); --region-solid: linear-gradient(135deg, #7ff0d6 0%, #25b4c4 55%, #3a7bd5 100%); }
.region-champ { --region-bg: rgba(150, 105, 235, 0.35); --region-solid: linear-gradient(135deg, #d6b8ff 0%, #9a6be0 55%, #6a4bc4 100%); }

* { box-sizing: border-box; }

html { color-scheme: dark; scroll-padding-top: 90px; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* The diagonal orange haze from the inspiration image, fixed behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50% 70% at 0% 35%, rgba(226, 87, 43, 0.38), transparent 70%),
    radial-gradient(40% 60% at 25% 90%, rgba(253, 161, 54, 0.18), transparent 70%),
    radial-gradient(60% 50% at 100% 0%, rgba(80, 60, 160, 0.25), transparent 70%);
}

main { width: var(--page); margin: 0 auto; flex: 1; padding-bottom: 80px; }
main > section { margin-top: 64px; }

h1, h2, h3 { font-family: var(--font-display); font-stretch: 125%; line-height: 1.1; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
code { font-size: 0.9em; background: var(--bg-raised); padding: 0.1em 0.4em; border-radius: 6px; }
kbd { font: 500 0.8em var(--font-body); border: 1px solid var(--line); border-radius: 5px; padding: 0.05em 0.45em; color: var(--muted); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.eyebrow { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8em; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 46ch; }
.muted { color: var(--muted); }
.panel { background: rgba(21, 18, 47, 0.7); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(8px); }

.button { display: inline-block; padding: 0.7em 1.3em; border-radius: 999px; border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 500; transition: background 0.2s; }
.button:hover { background: var(--bg-hover); }
.button-primary { background: var(--glow); border-color: transparent; color: #1a0d05; }
.button-primary:hover { background: var(--glow); filter: brightness(1.08); }

/* ---- Header -------------------------------------------------------------- */
#site-header { position: sticky; top: 0; z-index: 10; background: rgba(11, 9, 32, 0.75); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.header-inner { width: var(--page); margin: 0 auto; display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 1rem var(--font-display); font-stretch: 125%; }
.brand-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 18px rgba(253, 161, 54, 0.5); }
nav { display: flex; gap: 4px; margin-right: auto; }
nav a { color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: 999px; }
nav a:hover { color: var(--text); }
nav a[aria-current="page"] { color: var(--text); background: var(--bg-raised); }
.search-trigger { display: flex; align-items: center; gap: 8px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px 6px 14px; color: var(--muted); }
.search-trigger:hover { color: var(--text); }

@media (max-width: 640px) {
  .header-inner { gap: 8px 16px; padding: 10px 0; }
  nav { order: 3; width: 100%; margin: 0 -12px; flex-wrap: wrap; }
  nav a { white-space: nowrap; padding: 6px 10px; }
  .search-trigger { margin-left: auto; }
  .search-trigger kbd { display: none; }
}

/* ---- Search dialog ------------------------------------------------------- */
.search-dialog { width: min(640px, 100% - 32px); max-height: min(70vh, 640px); margin: 12vh auto auto; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); color: var(--text); }
.search-dialog::backdrop { background: rgba(5, 4, 15, 0.7); backdrop-filter: blur(4px); }
.search-panel { display: flex; flex-direction: column; max-height: inherit; }
.search-form { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.search-form input { flex: 1; background: none; border: 0; color: var(--text); font: inherit; font-size: 1.1rem; padding: 6px; }
.search-form input:focus { outline: none; }
.search-form input::-webkit-search-cancel-button { display: none; } /* we already have an Esc button */
.search-close { background: none; border: 1px solid var(--line); border-radius: 6px; font-size: 0.75rem; color: var(--muted); padding: 2px 8px; }
.search-results { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.search-results a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; }
.search-results a:hover, .search-results a:focus { background: var(--bg-hover); outline: none; }
.result-type { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.result-snippet { font-size: 0.9rem; color: var(--muted); }
.search-results mark { background: rgba(253, 161, 54, 0.25); color: var(--text); border-radius: 3px; padding: 0 2px; }
.search-empty { padding: 16px 12px; color: var(--muted); }

/* ---- Home hero ----------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 40px; margin-top: 28px; }
.hero > * { min-width: 0; }
/* The sections under the hero sit closer together than the 64px used elsewhere. */
main > .hero ~ section { margin-top: 44px; }
.hero-actions { display: flex; flex-wrap: nowrap; gap: 5px; margin-top: 48px; }
.hero-actions .button { white-space: nowrap; padding: 0.85em 0.7em; font-size: min(0.95rem, calc((100vw - 48px) / 30)); }
@media (min-width: 560px) { .hero-actions { gap: 10px; } .hero-actions .button { padding: 0.7em 1.05em; } }
/* The three buttons always stay on one line; on narrow screens they shrink with the screen width (the min() font size above) to fit. */
/* "A SenderPics Media Production": a byline tucked under the big headline. */
.hero h1:has(+ .hero-byline) { margin-bottom: 0.1em; }
.hero-byline { margin: 0 0 1.4em 0.15em; font: 600 clamp(1rem, 1.6vw, 1.25rem)/1.3 var(--font-body); color: var(--gold); letter-spacing: 0.01em; }
.hero-byline a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* same gold as the line, just underlined */

/* The row of five glowing circles from the inspiration board. */
.orbs { display: flex; justify-content: center; }
.orbs span { width: clamp(70px, 11vw, 130px); aspect-ratio: 1; border-radius: 50%; margin-left: -6%; flex-shrink: 0; }
.orbs span:nth-child(1) { background: linear-gradient(90deg, rgba(200, 110, 90, 0.15), rgba(200, 110, 90, 0.55)); }
.orbs span:nth-child(2) { background: linear-gradient(90deg, #ededf3 30%, #6e6a80); }
.orbs span:nth-child(3) { background: radial-gradient(circle at 25% 85%, #b5307a, transparent 45%), linear-gradient(160deg, #fda136, #e2572b); box-shadow: 0 0 60px rgba(226, 87, 43, 0.45); z-index: 1; }
.orbs span:nth-child(4) { background: linear-gradient(90deg, #3d2a1c, #fda136); }
.orbs span:nth-child(5) { background: linear-gradient(90deg, rgba(120, 115, 150, 0.1), rgba(120, 115, 150, 0.6)); }
/* A circle holding an athlete photo: the photo fades in over the gradient. */
.orbs span.has-photo { position: relative; overflow: hidden; box-shadow: 0 0 0 2px rgba(237, 237, 243, 0.12), 0 10px 40px rgba(0, 0, 0, 0.45); z-index: 2; }
.orbs span:nth-child(3).has-photo { box-shadow: 0 0 0 2px rgba(253, 161, 54, 0.5), 0 0 60px rgba(226, 87, 43, 0.45); z-index: 3; }
.orbs .has-photo a { position: absolute; inset: 0; display: block; }
.orbs .has-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s, transform 0.3s; }
.orbs .has-photo img.is-loaded { opacity: 1; }
.orbs .has-photo a:hover img { transform: scale(1.06); }

@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; margin-top: 28px; }
  .orbs { order: -1; justify-content: flex-start; padding-left: 6%; }
}

.page-intro { margin-top: 56px; }
.section-foot { margin: 20px 0 0; text-align: right; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }

/* ---- Event cards --------------------------------------------------------- */
.event-list { display: grid; gap: 12px; }
.event-card { display: flex; gap: 18px; padding: 16px 18px; background: rgba(21, 18, 47, 0.7); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.3s; }
.event-card.is-highlighted { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 30px rgba(253, 161, 54, 0.2); }
.event-date { flex-shrink: 0; width: 56px; height: 60px; display: grid; place-content: center; text-align: center; border-radius: 10px; background: var(--region-solid); color: #1a0d05; line-height: 1; }
.event-date span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.event-date strong { font: 700 1.5rem var(--font-display); }
.event-body { flex: 1; min-width: 0; } /* use the whole card, so the who's-going names can spread out */
.event-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 4px; }
.event-body h3 { margin: 0; }
/* The Results button: filled with the site's glow gradient, a soft halo, and a shimmer that sweeps across now and then. */
.event-body .event-results { position: relative; overflow: hidden; padding: 5px 16px; border: 0; border-radius: 999px; background: var(--glow); color: #1a0d05; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; box-shadow: 0 0 14px rgba(253, 161, 54, 0.55), 0 0 28px rgba(226, 87, 43, 0.3); transition: transform 0.2s, box-shadow 0.2s; }
.event-body .event-results::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-20deg); animation: results-shine 3.2s ease-in-out infinite; }
.event-body .event-results:hover, .event-body .event-results:focus-visible { transform: translateY(-1px) scale(1.05); box-shadow: 0 0 20px rgba(253, 161, 54, 0.85), 0 0 40px rgba(226, 87, 43, 0.5); }
@keyframes results-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .event-body .event-results::after { animation: none; display: none; } }
.event-body h3 a { color: var(--text); text-decoration: none; }
.event-body h3 a:hover { color: var(--gold); }
.event-body p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.event-body .event-meta { color: var(--gold); font-size: 0.85rem; margin-bottom: 4px; }
.event-body .event-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.event-tags span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); }
.event-tags span:first-child { background: var(--region-bg); border-color: transparent; }
/* The countdown is plain text, not a pill: a big number and a few words, so it does not look like a button. */
.event-tags .event-countdown { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; text-transform: none; letter-spacing: 0; font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.event-countdown b { font: 700 1.5rem/1 var(--font-display); font-variant-numeric: tabular-nums; font-stretch: 125%; letter-spacing: -0.01em; color: var(--gold); }
.event-tags .event-countdown.is-soon { color: var(--gold); font-size: 1rem; font-weight: 700; }
.event-tags .event-countdown.is-live { color: #ff8a65; font-weight: 600; }
.event-countdown.is-live::before { content: ""; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: #ff5a36; box-shadow: 0 0 8px #ff5a36; }
.event-body .event-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 0.85rem; }
.event-going { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.event-going-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
/* Who's going: a count, a wrapping strip of round photos, and a button that opens the names. */
.going { display: grid; gap: 8px; min-width: 0; }
.going-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.going-count { font-weight: 600; font-size: 0.9rem; }
.going-toggle, .going-more { border: 1px solid var(--line); background: none; color: var(--gold); border-radius: 999px; font: inherit; font-size: 0.8rem; cursor: pointer; }
.going-toggle { padding: 2px 12px; }
.going-toggle:hover, .going-more:hover { background: var(--bg-hover); }
.going-spots { display: flex; flex-wrap: wrap; gap: 6px; }
.going-spots a { display: block; border-radius: 50%; transition: transform 0.15s; }
.going-spots a:hover { transform: translateY(-2px); }
.going-more { width: 34px; height: 34px; padding: 0; color: var(--text); background: var(--bg-hover); }
.going-names { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; }
.going-names[hidden] { display: none; }
.going-names a { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: 0.92rem; }
.going-names a:hover { color: var(--gold); }
.going-inline { margin: 0; font-size: 0.9rem; color: var(--muted); }
.athlete-initials.athlete-initials-sm { width: 34px; height: 34px; font-size: 0.7rem; }

/* ---- Season timeline ------------------------------------------------------ */
.timeline { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.timeline li { display: grid; gap: 4px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); border-top: 3px solid var(--ember); }
.timeline li:last-child { border-top-color: var(--gold); }
.timeline-when { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.timeline li span:last-child { color: var(--muted); font-size: 0.92rem; }
.fine-print { font-size: 0.85rem; color: var(--muted); margin-top: 14px; }

/* ---- Calendar ------------------------------------------------------------ */
.calendar-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; margin-top: 32px; }
.calendar { padding: 18px; }
.cal-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-toolbar h2 { margin: 0; }
.cal-buttons { display: flex; gap: 6px; }
.cal-buttons button { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; }
.cal-buttons button:hover { background: var(--bg-hover); }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-weekdays span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); text-align: center; padding-bottom: 6px; }
.cal-cell { min-height: 88px; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 6px; text-align: left; background: rgba(237, 237, 243, 0.03); border: 1px solid transparent; border-radius: 10px; }
.cal-cell.is-blank { background: none; }
button.cal-cell:hover { background: var(--bg-hover); }
.cal-num { font-size: 0.85rem; color: var(--muted); }
.cal-cell.is-today .cal-num { display: inline-grid; place-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--text); color: var(--bg); font-weight: 600; }
.cal-cell.is-selected { border-color: var(--gold); }
.cal-chip { font-size: 0.72rem; line-height: 1.3; padding: 2px 6px; border-radius: 5px; background: var(--region-bg); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-size: 0.7rem; color: var(--muted); }
.day-panel h2 { font-size: 1.1rem; }

/* Small colored dots (one per event) stand in for the titles on a phone. */
.cal-dots { display: none; gap: 3px; justify-content: center; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--region-solid); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--muted); }
.cal-legend li { display: flex; align-items: center; gap: 7px; }
.cal-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--region-solid); }
@media (max-width: 900px) {
  .calendar-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .calendar { padding: 12px; }
  .cal-weekdays, .cal-grid { gap: 3px; }
  .cal-cell { min-height: 48px; align-items: center; padding: 4px 2px; }
  /* No room for titles on a phone: show a dot instead. */
  .cal-chip, .cal-more { display: none; }
  .cal-dots { display: flex; }
}

/* ---- Athletes ------------------------------------------------------------ */
.athlete-filter { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.athlete-filter input { flex: 1; min-width: 220px; max-width: 420px; padding: 12px 16px; font: inherit; font-size: 1rem; color: var(--text); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 999px; }
.athlete-filter input::placeholder { color: var(--muted); }
.athlete-filter input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.athlete-card[hidden] { display: none; }
.athlete-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 20px; }
.athlete-grid:has(.stat-card) { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.athlete-card { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); color: var(--text); text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.athlete-card:hover { border-color: var(--gold); background: var(--bg-hover); }
.athlete-card h2 { margin: 0; font-size: 1.15rem; flex: 1; }
.athlete-arrow { color: var(--muted); transition: transform 0.2s, color 0.2s; }
.athlete-card:hover .athlete-arrow { color: var(--gold); transform: translateX(3px); }

/* Stat card (compact): a small photo with a curved edge on the left; name, team and four stats on the right. */
.stat-card { display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto 1fr; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.sc-photo { grid-row: 1 / 3; position: relative; display: grid; place-content: center; font: 700 1.6rem var(--font-display); font-stretch: 125%; color: #1a0d05; background: var(--glow); border-bottom-right-radius: 90% 60%; overflow: hidden; }
.sc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.sc-head { display: flex; padding: 10px 14px 0 12px; min-width: 0; }
.stat-card h2 { margin: 0; flex: 0 1 auto; min-width: 0; font: 800 0.95rem/1.15 var(--font-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-stats { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr; align-self: end; margin: 0; padding: 0 6px 8px 8px; }
.sc-stats > div { display: grid; gap: 1px; padding: 4px 4px 0; text-align: center; }
.sc-stats > div + div { border-left: 1px solid var(--line); }
.sc-stats dt { font-size: 0.56rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sc-stats dd { margin: 0; font: 700 1.05rem/1.15 var(--font-display); }
.sc-badges dd { font-weight: 800; font-size: 1.35rem; line-height: 1; background: var(--glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-stats dd small { display: block; font: 500 0.6rem var(--font-body); color: var(--muted); }
.athlete-initials { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-content: center; background: var(--glow); color: #1a0d05; font: 700 1rem var(--font-display); font-stretch: 125%; }
.athlete-initials[hidden] { display: none; }
/* A photo sits on top of the initials and is cropped to fill the circle. */
.athlete-initials { position: relative; overflow: hidden; }
.athlete-initials img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.athlete-initials-lg { width: 96px; height: 96px; font-size: 1.8rem; box-shadow: 0 0 40px rgba(226, 87, 43, 0.35); }
.athlete-hero-row { display: flex; align-items: center; gap: 24px; margin-top: 20px; }
.athlete-hero-row h1 { margin: 0; }
/* Name with the athlete's USAC member number in small type beside it. */
.athlete-name-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.member-no { font: 500 0.85rem var(--font-body); letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
.member-no[hidden] { display: none; }
.athlete-team { margin: 6px 0 0; font: 600 1rem var(--font-body); letter-spacing: 0.03em; color: var(--gold); }
.athlete-team[hidden] { display: none; }
.admin-athlete-name .member-no { margin-left: 8px; font-size: 0.8rem; }
.back-link { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.back-link:hover { color: var(--gold); }

/* ---- Admin page ----------------------------------------------------------- */
.admin-flash { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); max-width: 46ch; }
.admin-flash.is-ok { border-color: rgba(253, 161, 54, 0.6); background: rgba(253, 161, 54, 0.12); }
.admin-flash.is-error { border-color: rgba(226, 87, 43, 0.7); background: rgba(226, 87, 43, 0.15); }
.admin-list { display: grid; gap: 12px; margin-top: 20px; }
.admin-row, .admin-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); }
.admin-row strong, .admin-card strong { flex: 1; min-width: 10ch; }
.admin-card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-card-actions form { margin: 0; }
.admin-row input[type="file"] { max-width: 100%; color: var(--muted); font: inherit; font-size: 0.9rem; }
.admin-row button, .admin-event button { border: 0; }
.admin-event { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); }
.admin-event button { justify-self: start; }
.admin-event-head { display: grid; gap: 2px; }
.admin-event-head span { font-size: 0.85rem; }
.admin-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-check { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.admin-check:has(input:checked) { border-color: var(--gold); background: rgba(253, 161, 54, 0.12); }
.admin-check input { accent-color: var(--gold); width: 18px; height: 18px; }
#athletes, #events, #galleries, #going, #photos { scroll-margin-top: 24px; }
.admin-gallery-form { display: grid; gap: 14px; margin: 18px 0 24px; padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius); }
.admin-gallery-form label { display: grid; gap: 6px; font-weight: 500; }
.admin-gallery-form label .muted { font-weight: 400; font-size: 0.85rem; }
.admin-gallery-form input[type="text"], .admin-gallery-form textarea { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-raised); color: var(--text); font: inherit; font-size: 0.95rem; }
.admin-gallery-form textarea { resize: vertical; font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; }
.admin-gallery-form button { justify-self: start; border: 0; }
.admin-kind { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.admin-kind legend { font-weight: 500; margin-bottom: 6px; }
.admin-kind .admin-check { font-weight: 400; }
.admin-gallery-cover { width: 72px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.admin-gallery-cover.is-empty { display: grid; place-content: center; background: var(--bg-raised); color: var(--muted); font-size: 1.3rem; }
#events .admin-refresh button { border: 0; }
.admin-search { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.admin-search input { flex: 1; min-width: 220px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-raised); color: var(--text); font: inherit; }
.admin-search button { border: 0; }
.admin-matches { display: grid; gap: 8px; margin-bottom: 24px; padding: 16px; border: 1px dashed var(--line); border-radius: var(--radius); }
.admin-match { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border-radius: 10px; background: rgba(21, 18, 47, 0.7); }
.admin-match > div { display: grid; gap: 2px; }
.admin-match span { font-size: 0.85rem; }
.admin-match.is-manual { background: none; padding-top: 4px; }
.admin-athlete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); }
.admin-athlete-name { flex: 1; min-width: 14ch; }
.admin-athlete form { margin: 0; }
.admin-history { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.85rem; }
.admin-history label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); }
.admin-history input { width: 12ch; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-raised); color: var(--text); font: inherit; }
.admin-athlete .button, .admin-match .button { padding: 0.5em 1em; font-size: 0.9rem; background: var(--bg-raised); }
/* Compact athlete rows, two to a line: small avatar, name and details on one line, buttons underneath. */
#athletes .admin-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#athletes .admin-athlete { display: grid; grid-template-columns: 76px 1fr; align-items: start; gap: 4px 10px; padding: 10px 12px; }
#athletes .admin-athlete[hidden] { display: none; }
#athletes .admin-athlete .athlete-initials { width: 76px; height: 76px; font-size: 1.4rem; }
#athletes .admin-photo { grid-row: 1 / 3; margin: 0; }
.admin-photo-pick { position: relative; display: block; width: 76px; height: 76px; cursor: pointer; border-radius: 50%; }
.admin-photo-pick input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.admin-photo-pick:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.admin-photo-badge { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; display: grid; place-content: center; border-radius: 50%; background: var(--bg-raised); border: 1px solid var(--gold); color: var(--gold); font: 700 0.95rem/1 var(--font-body); padding: 0; cursor: pointer; }
.admin-photo-pick:hover .athlete-initials { filter: brightness(1.15); }
.admin-photo-pick.is-busy { opacity: 0.5; cursor: progress; }
#athletes .admin-athlete-name { min-width: 0; line-height: 1.3; }
#athletes .admin-athlete-name strong { font-size: 0.98rem; }
#athletes .admin-details { margin-top: 1px; }
#athletes .admin-details .cell-sub { display: inline; font-size: 0.76rem; }
#athletes .admin-details .cell-sub + .cell-sub::before { content: " · "; }
#athletes .admin-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
#athletes .admin-actions form, #athletes .admin-actions .admin-history { margin: 0; padding: 0; border: 0; flex-basis: auto; }
#athletes .admin-remove { margin: 0 0 0 auto; }
#athletes .admin-remove .button { color: #ff8a65; border-color: rgba(226, 87, 43, 0.45); background: transparent; }
#athletes .admin-remove .button:hover { background: rgba(226, 87, 43, 0.15); }
#athletes .admin-removed { margin-top: 28px; padding: 12px 16px; border: 1px dashed var(--line); border-radius: var(--radius); }
#athletes .admin-removed summary { cursor: pointer; font-weight: 600; }
#athletes .admin-removed-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); margin: 0; }
#athletes .admin-removed-row:first-of-type { border-top: 0; }
#athletes .admin-actions .admin-history.muted { font-size: 0.76rem; }
.admin-filter { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 4px; }
.admin-filter input { flex: 1; min-width: 220px; max-width: 420px; padding: 10px 16px; font: inherit; color: var(--text); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 999px; }
.admin-filter input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
@media (max-width: 720px) { #athletes .admin-list { grid-template-columns: 1fr; } }
.admin-athlete .button { padding: 0.3em 0.85em; font-size: 0.8rem; }
.admin-athlete .admin-check { padding: 2px 10px 2px 6px; gap: 7px; font-size: 0.85rem; }
.admin-athlete .admin-check input { width: 15px; height: 15px; }
.status-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line); color: var(--muted); vertical-align: middle; }
.status-tag.is-draft { border-color: rgba(253, 161, 54, 0.6); color: var(--gold); }
.admin-row button:disabled { opacity: 0.6; cursor: progress; }
.admin-row-error { flex-basis: 100%; margin: 0; color: #ff8a65; font-size: 0.9rem; }

/* ---- Athlete stats -------------------------------------------------------- */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 40px; }
.stat-tile { display: grid; gap: 2px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); }
.stat-tile strong { font: 700 2rem/1.1 var(--font-display); font-stretch: 125%; background: var(--glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-tile span { font-weight: 500; }
.stat-tile small { color: var(--muted); font-size: 0.8rem; }
.ranking-list { list-style: none; padding: 0; margin: 0 0 40px; display: grid; gap: 6px; }
.ranking-list strong { color: var(--gold); display: inline-block; min-width: 3ch; }
.results-head { align-items: center; margin-bottom: 8px; }
.results-head h2 { margin: 0; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-bar[hidden] { display: none; }
.filter-bar button { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; font-size: 0.9rem; }
.filter-bar button[aria-pressed="true"] { background: var(--glow); color: #1a0d05; border-color: transparent; font-weight: 500; }
/* "Season at a glance": seasons across, levels down, best finish in each square. */
.top6-wrap { margin-bottom: 40px; padding: 18px 16px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); }
.top6-bars { display: flex; align-items: flex-end; gap: clamp(4px, 1.5vw, 14px); height: 200px; }
.top6-col { position: relative; flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.top6-bar { width: 100%; max-width: 64px; min-height: 3px; display: flex; flex-direction: column; border-radius: 8px 8px 3px 3px; overflow: hidden; background: var(--line); box-shadow: 0 0 18px rgba(253, 161, 54, 0.18); }
.top6-bar i { display: block; border-top: 1px solid rgba(11, 9, 32, 0.55); }
.top6-bar i:first-child { border-top: 0; }
/* One color per place, following the site's glow (gold, ember, magenta) on into violet. */
[data-p="1"] { background: #fda136; }
[data-p="2"] { background: #f47a30; }
[data-p="3"] { background: #e2572b; }
[data-p="4"] { background: #b5307a; }
[data-p="5"] { background: #8a4fb0; }
[data-p="6"] { background: #6a66c4; }
[data-p="10"] { background: #4f86d6; }
.top6-num { font: 700 1.1rem var(--font-display); }
.top6-label { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.top6-sentence { margin: 14px 0 0; font-size: 1.05rem; }
.top6-sentence strong { color: var(--gold); }
.top6-legend { display: flex; gap: 16px; margin: 12px 0 0; font-size: 0.85rem; color: var(--muted); }
.top6-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.badge-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 40px; }
.badge { position: relative; color: inherit; font: inherit; cursor: pointer; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 18px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); }
.badge-medal { width: 52px; height: 52px; display: grid; place-content: center; border-radius: 50%; background: var(--glow); color: #1a0d05; font-size: 1.5rem; box-shadow: 0 0 22px rgba(253, 161, 54, 0.4); margin-bottom: 6px; }
.badge strong { font-weight: 600; line-height: 1.25; }
.badge small { color: var(--muted); }
.glance-help { margin-top: -6px; font-size: 0.9rem; }
.season-grid-wrap { margin-bottom: 40px; }
.season-grid { border-collapse: collapse; font-size: 0.85rem; min-width: 100%; }
.season-grid th { padding: 10px 8px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.season-grid thead th { font-size: 0.75rem; letter-spacing: 0.04em; border-bottom: 1px solid var(--line); }
.season-grid tbody th { text-align: left; position: sticky; left: 0; background: var(--bg-raised); z-index: 1; } /* level names stay put while seasons scroll */
.season-grid td { padding: 4px; text-align: center; border-bottom: 1px solid var(--line); }
.season-grid tr:last-child td, .season-grid tr:last-child th { border-bottom: 0; }
.grid-empty { color: rgba(237, 237, 243, 0.25); }
.grid-cell { display: inline-flex; align-items: baseline; gap: 3px; padding: 6px 8px; border-radius: 10px; border: 1px solid transparent; background: none; white-space: nowrap; }
.grid-cell:hover { border-color: var(--line); background: var(--bg-hover); }
.grid-cell.is-active { border-color: var(--gold); background: rgba(253, 161, 54, 0.12); }
.grid-cell small { font-size: 0.7rem; color: var(--muted); }
/* Phone layout: seasons down, five levels across, sized to fit a narrow screen. */
.season-grid.is-flipped { width: 100%; table-layout: fixed; }
.season-grid.is-flipped thead th:first-child { width: 4.6em; }
.season-grid.is-flipped th { padding: 9px 2px; }
.season-grid.is-flipped tbody th { padding-left: 10px; font-size: 0.75rem; }
.season-grid.is-flipped td { padding: 3px 0; }
.season-grid.is-flipped .grid-cell { flex-direction: column; align-items: center; padding: 4px 2px; gap: 0; font-size: 0.8rem; line-height: 1.25; }
.season-grid.is-flipped .place { padding: 0 6px; }
.season-grid.is-flipped .grid-cell small { font-size: 0.6rem; } /* "×2" sits under the place, so wide cells still fit */

/* Results filter bar: discipline and level chips, season, podiums, count. */
.results-filters { display: grid; gap: 10px; margin-bottom: 8px; }
.results-filters .filter-bar { flex-wrap: wrap; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.filter-select { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--muted); }
.filter-select select { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-raised); color: var(--text); font: inherit; }
.filter-toggle { font-size: 0.9rem; }
.filter-count { font-size: 0.85rem; }
.filter-clear { background: none; border: 0; padding: 0; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; font-size: 0.85rem; }
.results-empty { margin-top: 20px; }

/* Collapsible season cards in the results list. */
.season-block { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); overflow: hidden; }
.season-block summary { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 14px 16px; cursor: pointer; list-style: none; }
.season-block summary::-webkit-details-marker { display: none; } /* hide Safari's default triangle */
.season-block summary:hover { background: var(--bg-hover); }
.season-title { font: 600 1rem var(--font-display); font-stretch: 125%; }
.season-meta { flex: 1; font-size: 0.85rem; color: var(--muted); }
.season-chevron { width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform 0.2s; }
.season-block[open] .season-chevron { transform: rotate(225deg); margin-top: 4px; }
.season-block .table-wrap { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }

.season-heading { margin: 28px 0 10px; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); }
.results-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.results-table th { text-align: left; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); }
.results-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.results-table tr:last-child td { border-bottom: 0; }
.results-table td a { color: var(--text); text-decoration: none; }
.results-table td a:hover { color: var(--gold); }
.cell-sub { display: block; font-size: 0.8rem; }
.nowrap { white-space: nowrap; }
.place { font-weight: 600; }
.place-1, .place-2, .place-3 { display: inline-block; padding: 0 8px; border-radius: 999px; color: #1a0d05; }
.place-1 { background: var(--gold); }
.place-2 { background: #d9d9e3; }
.place-3 { background: #d08a5c; }

@media (max-width: 640px) {
  /* Phones: too narrow for five columns, so each row becomes a small card —
     date, event and discipline stacked on the left, place on the right. */
  .results-table thead { display: none; }
  .results-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .results-table tr:last-child { border-bottom: 0; }
  .results-table td { padding: 0; border: 0; }
  .results-table td:nth-child(1) { grid-row: 1; font-size: 0.8rem; color: var(--muted); }
  .results-table td:nth-child(2) { grid-row: 2; }
  .results-table td:nth-child(3) { grid-row: 3; font-size: 0.8rem; color: var(--muted); }
  .results-table td:nth-child(4) { display: none; }
  .results-table td:nth-child(5) { grid-column: 2; grid-row: 1 / span 3; align-self: center; text-align: right; }
}

/* ---- Gallery ------------------------------------------------------------- */
/* Link galleries: cover-photo cards that open the gallery in a new tab. */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gallery-grid:empty { display: none; }
.gallery-card { position: relative; display: flex; align-items: flex-end; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); color: var(--text); text-decoration: none;
  background: radial-gradient(circle at 30% 70%, rgba(253, 161, 54, 0.35), transparent 60%), var(--bg-raised); }
.gallery-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.gallery-card:hover img { transform: scale(1.04); }
.gallery-card-text { position: relative; display: grid; gap: 2px; width: 100%; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(5, 4, 15, 0.88)); }
.gallery-card-text strong { font-family: var(--font-display); font-stretch: 125%; font-size: 1rem; line-height: 1.25; }
.gallery-card-text span { font-size: 0.85rem; color: var(--gold); }

/* Embedded galleries: the same card, with the gallery (e.g. a slideshow) playing inside.
   The name strip lets clicks pass through to the gallery, except on its link. */
.gallery-card-embed { margin: 0; }
/* The slideshow fits each photo inside its frame and fills leftover space with
   its own (white) background, which we can't restyle. Making the frame 10% larger
   than the card and centring it trims those thin edge strips off. */
.gallery-card-embed iframe { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; border: 0; }
.gallery-card-embed .gallery-card-text { pointer-events: none; }
.gallery-card-embed .gallery-card-text a { pointer-events: auto; font-size: 0.85rem; color: var(--gold); text-decoration: none; justify-self: start; }
.gallery-card-embed .gallery-card-text a:hover { text-decoration: underline; }

/* ---- Footer -------------------------------------------------------------- */
#site-footer { border-top: 1px solid var(--line); }
.footer-inner { width: var(--page); margin: 0 auto; padding: 28px 0; color: var(--muted); font-size: 0.85rem; display: grid; gap: 6px; }

.admin-team-row { display: grid; grid-template-columns: minmax(10ch, 1fr) minmax(12ch, 2fr); gap: 10px; align-items: center; }
.admin-team-row input { font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; }

/* Admin tabs: one area at a time. */
.admin-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 6px; margin-top: 28px; padding: 10px 0; overflow-x: auto; background: var(--bg); border-bottom: 1px solid var(--line); }
.admin-tabs[hidden] { display: none; }
.admin-tabs a { flex: none; padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 500; }
.admin-tabs a:hover { color: var(--text); background: var(--bg-hover); }
.admin-tabs a.is-active { color: var(--text); border-color: var(--gold); background: rgba(253, 161, 54, 0.12); }
main > section.is-hidden { display: none; }
main > section { scroll-margin-top: 70px; }
.admin-tabs + section { margin-top: 36px; }

/* Popover with the exact numbers: on hover (mouse), focus (keyboard), or tap (phone). */
.top6-tip { position: absolute; bottom: calc(100% - 20px); left: 50%; transform: translateX(-50%); z-index: 2; display: none; gap: 4px; min-width: 150px; padding: 10px 12px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-hover); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); pointer-events: none; font-size: 0.85rem; line-height: 1.35; }
.top6-col:hover .top6-tip, .top6-col:focus-visible .top6-tip, .top6-col:focus .top6-tip { display: grid; }
.top6-col:first-child .top6-tip { left: 0; transform: none; }
.top6-col:last-child .top6-tip { left: auto; right: 0; transform: none; }
.top6-tip strong { font: 600 0.95rem var(--font-display); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.top6-tip small { color: var(--muted); }
.top6-col:hover .top6-bar, .top6-col:focus .top6-bar { filter: brightness(1.15); }
@media (max-width: 640px) { .top6-label { font-size: 0.65rem; line-height: 1.15; text-align: center; white-space: normal; } }

/* Badge hover/tap text: how the badge was earned. */
.badge-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 2; display: none; width: min(260px, 90vw); padding: 10px 12px; text-align: left; font-size: 0.85rem; line-height: 1.4; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-hover); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); pointer-events: none; }
.badge:hover .badge-tip, .badge:focus .badge-tip { display: block; }
.badge:first-child .badge-tip { left: 0; transform: none; }
.badge:last-child .badge-tip { left: auto; right: 0; transform: none; }

/* Ladder: four steps, each taller than the last. */
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 10px; margin-bottom: 40px; }
.ladder-step { position: relative; display: grid; align-content: end; justify-items: center; gap: 4px; padding: 14px 8px; min-height: calc(120px + var(--step) * 34px); color: inherit; font: inherit; cursor: pointer; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(21, 18, 47, 0.7), rgba(253, 161, 54, calc(0.05 + var(--step) * 0.05))); }
.ladder-step:hover, .ladder-step:focus { border-color: var(--gold); }
.ladder-step strong { font: 600 0.95rem var(--font-display); margin-top: 4px; }
.ladder-step small { color: var(--muted); font-size: 0.8rem; line-height: 1.25; }
.ladder-place, .ladder-none { display: inline-block; min-width: 3.2ch; padding: 2px 14px; border-radius: 999px; font: 700 clamp(1.2rem, 4vw, 1.8rem)/1.3 var(--font-display); color: #1a0d05; }
.ladder-place:not([data-p]) { color: var(--text); background: rgba(169, 167, 191, 0.25); }
.ladder-none { color: var(--muted); background: none; }
.ladder-place[data-p="4"], .ladder-place[data-p="5"], .ladder-place[data-p="6"] { color: #fff; }
.ladder-step:first-child .badge-tip { left: 0; transform: none; }
.ladder-step:last-child .badge-tip { left: auto; right: 0; transform: none; }
.ladder-step:hover .badge-tip, .ladder-step:focus .badge-tip { display: block; }

/* Boulder vs lead cards. */
.versus { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 40px; }
.vs-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); display: grid; gap: 10px; }
.vs-card h3 { margin: 0 0 4px; font-size: 1.3rem; }
.vs-row { position: relative; display: grid; grid-template-columns: 4.6em 1fr auto; align-items: center; gap: 10px; padding: 4px 6px; margin: 0 -6px; color: inherit; font: inherit; cursor: pointer; text-align: left; border: 0; border-radius: 8px; background: none; }
.vs-row:hover, .vs-row:focus { background: var(--bg-hover); }
.vs-label { font-weight: 500; }
.vs-track { height: 14px; border-radius: 999px; background: var(--line); overflow: hidden; }
.vs-track i { display: block; height: 100%; border-radius: 999px; }
.vs-count { min-width: 5.5em; text-align: right; color: var(--muted); font-size: 0.9rem; }
.vs-count strong { color: var(--text); font: 700 1.2rem var(--font-display); }
.vs-card-wide .vs-row { grid-template-columns: minmax(8.5em, 11em) 1fr auto; }
.vs-label small { display: block; color: var(--muted); font-size: 0.75rem; }
.vs-count small { display: block; font-size: 0.75rem; }
.vs-row .badge-tip { left: 0; transform: none; }
.vs-row:hover .badge-tip, .vs-row:focus .badge-tip { display: block; }
.vs-note { margin: 0; color: var(--muted); font-size: 0.85rem; }

.vs-fast { position: relative; display: grid; gap: 2px; padding: 10px 12px; color: inherit; font: inherit; cursor: pointer; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: rgba(253, 161, 54, 0.08); }
.vs-fast:hover, .vs-fast:focus { border-color: var(--gold); }
.vs-fast small { color: var(--muted); }
.vs-fast strong { font: 700 1.9rem/1.1 var(--font-display); font-stretch: 125%; background: var(--glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vs-fast .badge-tip { left: 0; transform: none; }
.vs-fast:hover .badge-tip, .vs-fast:focus .badge-tip { display: block; }

/* Athlete page tabs (Overview / Strengths / Results). */
/* The tabs are boxes like the cards below them: same border, corner radius and dark fill; the chosen one glows.
   On a phone they wrap into rows that fill the width (no sideways scrolling). */
.athlete-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.athlete-tabs button { flex: 0 0 auto; padding: 12px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); color: var(--muted); font: 600 0.95rem var(--font-body); cursor: pointer; white-space: nowrap; transition: border-color 0.2s, color 0.2s; }
.athlete-tabs button:hover { color: var(--text); border-color: rgba(253, 161, 54, 0.5); }
.athlete-tabs button[aria-selected="true"] { background: var(--glow); border-color: transparent; color: #1a0d05; }
@media (max-width: 640px) {
  .athlete-tabs { gap: 6px; }
  .athlete-tabs button { flex: 1 1 auto; padding: 10px 8px; font-size: 0.85rem; }
}
.athlete-panel[hidden] { display: none; }

/* Phones: popups must stay on screen. Things in the left half anchor to their left
   edge, things in the right half to their right edge (the rest stay centered). */
@media (max-width: 640px) {
  .badge:nth-child(odd) .badge-tip { left: 0; right: auto; transform: none; }
  .badge:nth-child(even) .badge-tip { left: auto; right: 0; transform: none; }
  .top6-col:nth-child(-n+3) .top6-tip { left: 0; right: auto; transform: none; }
  .top6-col:nth-last-child(-n+3) .top6-tip { left: auto; right: 0; transform: none; }
  .ladder-step:nth-child(-n+2) .badge-tip { left: 0; right: auto; transform: none; }
  .ladder-step:nth-child(n+3) .badge-tip { left: auto; right: 0; transform: none; }
}

/* Phones: four ladder steps have to fit in the screen width. */
@media (max-width: 640px) {
  .ladder { gap: 6px; }
  .ladder-step { padding: 10px 4px; min-height: calc(110px + var(--step) * 30px); }
  .ladder-place, .ladder-none { min-width: 0; padding: 2px 8px; font-size: 1.1rem; }
  .ladder-step strong { font-size: 0.75rem; }
  .ladder-step small { font-size: 0.68rem; overflow-wrap: anywhere; }
}

.admin-refresh-all { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }

.top-pct { color: var(--gold); font-size: 0.85em; }
.ladder-step small.top-pct { font-weight: 600; }

/* Extra detail on the discipline cards and in the results list. */
.vs-stats { display: grid; gap: 4px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.vs-stats p { margin: 0; }
.vs-stats strong { color: var(--text); font: 700 1.15rem var(--font-display); }
.vs-stats h4 { margin: 0 0 4px; font: 600 0.95rem var(--font-body); color: var(--muted); }
.vs-stats small { margin-top: 4px; }
.vs-trend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pb-tag { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: #1a0d05; background: var(--glow); }
.cell-detail { display: block; }

/* Team dashboard (Team_PlanetRock.html) */
.team-tiles { margin-top: 20px; }
.team-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.team-table th { text-align: left; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); }
.team-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.team-table tr:last-child td { border-bottom: 0; }
.team-table td a { color: var(--text); text-decoration: none; }
.team-table td a:hover { color: var(--gold); }
.team-table tr.is-quiet td { color: var(--muted); }
.team-athlete { display: flex; align-items: center; gap: 10px; }
a.athlete-team-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.filter-bar button small { opacity: 0.7; margin-left: 2px; }
.filter-bar button[aria-pressed="true"] small { color: inherit; }
#levels-disc { margin: 4px 0 6px; }
.ladder-place[data-time] { white-space: nowrap; min-width: 0; padding: 2px 8px; font-size: clamp(0.95rem, 3.2vw, 1.4rem); }
#levels-note { margin-top: 10px; }
#levels-note:empty { display: none; }

/* Gamified badges: tracks with Bronze → Diamond tiers (tier-0 = locked) */
.badge-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 18px 22px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); }
.badge-total { display: grid; }
.badge-total strong { font: 700 2.6rem/1 var(--font-display); font-stretch: 125%; background: var(--glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.badge-total span { color: var(--muted); font-size: 0.9rem; }
.tier-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tier-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-raised); font-size: 0.9rem; }
.tier-chip i { width: 14px; height: 14px; border-radius: 50%; background: var(--tier); border: 2px solid #0d0b24; box-shadow: 0 0 0 1px var(--tier), 0 0 8px var(--tier); }
.badge-group { margin-top: 28px; }
.badge-group summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; margin-bottom: 14px; }
.badge-group summary::-webkit-details-marker { display: none; }
.badge-group summary::before { content: "▾"; color: var(--muted); }
.badge-group:not([open]) summary::before { content: "▸"; }
.badge-group summary h2 { margin: 0; }
.track-row { margin-bottom: 8px; }
.tier-chip.tier-1, .track.tier-1, .level-pip.tier-1 { --tier: #b8bdd1; }
.tier-chip.tier-2, .track.tier-2, .level-pip.tier-2 { --tier: #4ade80; }
.tier-chip.tier-3, .track.tier-3, .level-pip.tier-3 { --tier: #2dd4bf; }
.tier-chip.tier-4, .track.tier-4, .level-pip.tier-4 { --tier: #60a5fa; }
.tier-chip.tier-5, .track.tier-5, .level-pip.tier-5 { --tier: #fbbf24; }
.tier-chip.tier-6, .track.tier-6, .level-pip.tier-6 { --tier: #fb923c; }
.tier-chip.tier-7, .track.tier-7, .level-pip.tier-7 { --tier: #f43f5e; }
.tier-chip.tier-8, .track.tier-8, .level-pip.tier-8 { --tier: #e879f9; }
.tier-chip.tier-9, .track.tier-9, .level-pip.tier-9 { --tier: #a78bfa; }
.tier-chip.tier-10, .track.tier-10, .level-pip.tier-10 { --tier: #fff3b0; }
.track.tier-0 { --tier: #4a4766; }
.track { border-color: color-mix(in srgb, var(--tier) 45%, var(--line)); }
.track .badge-medal { width: 56px; height: 56px; background: #0d0b24; border: 4px solid var(--tier); font-size: 1.5rem; box-shadow: 0 0 18px color-mix(in srgb, var(--tier) 60%, transparent), inset 0 0 10px rgba(0, 0, 0, 0.6); }
.track.tier-0 { opacity: 0.7; }
.track.tier-0 .badge-medal { box-shadow: none; }
.track.tier-0 .badge-medal { color: transparent; text-shadow: 0 0 0 #8a87a8; }
.track.tier-10 { box-shadow: 0 0 26px rgba(255, 243, 176, 0.3); }
.track-level { color: var(--muted); font-size: 0.75rem; }
.track .track-tier { color: var(--tier); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; }
.track.tier-0 .track-tier { color: var(--muted); }
.track-bar { width: 100%; height: 8px; margin-top: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.track-bar i { display: block; height: 100%; border-radius: 999px; background: var(--tier); }
.track.tier-0 .track-bar i { background: var(--muted); }

/* "How badges work" explainer */
.badge-help { margin: 14px 0 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); }
.badge-help summary { cursor: pointer; font-weight: 600; }
.badge-help ul { margin: 12px 0 14px; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); }
.badge-help li strong { color: var(--text); }
.level-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.level-pip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-raised); font-size: 0.85rem; }
.level-pip i { width: 26px; height: 26px; display: grid; place-content: center; border-radius: 50%; background: #0d0b24; border: 3px solid var(--tier); font: 700 0.75rem var(--font-body); font-style: normal; color: var(--text); }
.level-pip small { margin-left: 4px; color: var(--muted); }
.level-legend-note { margin: 8px 0 0; font-size: 0.85rem; }
.link-button { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; cursor: pointer; text-decoration: underline; }
.admin-event textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: inherit; font: inherit; }

/* Admin: the Sign out button sits at the top right of the page heading. */
.page-intro:has(.admin-logout) { position: relative; }
.admin-logout { position: absolute; top: 0; right: 0; margin: 0; }
.admin-logout .button { border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.admin-logout .button:hover { color: var(--text); border-color: var(--gold); }

/* ---- QE Rankings page and the athlete QE tab ---- */
.qe-search { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-raised); color: var(--text); font: inherit; font-size: 0.9rem; min-width: 12rem; }
.qe-table { width: 100%; border-collapse: collapse; }
.qe-table th, .qe-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.qe-table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.qe-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.qe-table .qe-rank { font: 700 1.1rem/1.2 var(--font-display); width: 3.5rem; }
.qe-table tr.is-ours { background: rgba(253, 161, 54, 0.07); }
.qe-table .cell-sub { display: block; font-size: 0.8rem; }
.status-tag.is-pr { border-color: rgba(253, 161, 54, 0.6); color: var(--gold); }
.status-tag.is-qualified { border-color: rgba(120, 220, 160, 0.6); color: #8de0b0; }
.qe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qe-chip { display: inline-flex; gap: 5px; align-items: baseline; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.78rem; background: var(--bg-raised); white-space: nowrap; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
.qe-chip b { color: var(--gold); }
.qe-chip i { font-style: normal; color: var(--muted); }
.qe-chip.is-dropped { opacity: 0.45; }
.qe-card { padding: 18px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); display: grid; gap: 8px; }
.qe-card h3 { margin: 0; font-size: 1.05rem; }
.qe-card .qe-big { font: 700 1.8rem/1.1 var(--font-display); font-stretch: 125%; background: var(--glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 640px) { .qe-chip { max-width: 14rem; } }

/* Admin: reminder to upload a photo */
.photo-note { display: block; font-size: 0.8rem; color: var(--gold); }
.photo-note-top { padding: 12px 16px; border: 1px dashed rgba(253, 161, 54, 0.5); border-radius: var(--radius); color: var(--muted); }
.photo-note-top strong { color: var(--gold); }

/* Compare page (compare.html; hidden from the menu until launch) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmp-link { display: inline-block; margin-top: 10px; font-size: 0.9rem; color: var(--gold); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; }
.cmp-link:hover { border-color: var(--gold); background: var(--bg-hover); }
.cmp-picks { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-top: 32px; }
.cmp-pick { display: grid; gap: 4px; flex: 1; min-width: 200px; max-width: 320px; font-size: 0.85rem; }
.cmp-pick select { padding: 12px 16px; font: inherit; font-size: 1rem; color: var(--text); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 999px; }
.cmp-pick select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.cmp-vs { padding-bottom: 12px; color: var(--muted); font: 600 0.9rem var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; }
.cmp-controls { display: grid; gap: 10px; margin-top: 24px; }
.cmp-note { margin: 10px 0 0; font-size: 0.9rem; max-width: 70ch; }
.cmp-empty { margin-top: 28px; }
.cmp-heads { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.cmp-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); }
.cmp-head:hover { border-color: var(--gold); }
.cmp-head-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.cmp-remove { flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--muted); font: 400 1.2rem/1 var(--font-body); cursor: pointer; }
.cmp-remove:hover, .cmp-remove:focus-visible { color: var(--text); border-color: var(--gold); background: var(--bg-hover); }
.cmp-head strong { font-size: 1.05rem; flex: 1; min-width: 0; }
.cmp-head .cmp-key { margin-left: 0; flex-shrink: 0; }
.cmp-h { margin: 40px 0 8px; font-size: 1.3rem; }
.cmp-sentence { margin: 0; font-size: 1.1rem; }
.cmp-sentence strong { color: var(--gold); }
.cmp-rows { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); }
.cmp-event { display: grid; gap: 2px; min-width: 0; }
.cmp-event small { font-size: 0.8rem; }
.cmp-pair { display: grid; gap: 8px; }
.cmp-side { display: grid; grid-template-columns: 4.5em 1fr; align-items: center; gap: 8px; }
.cmp-who { font-size: 0.85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-bar { position: relative; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.cmp-track { flex: 1; height: 14px; border-radius: 7px; background: var(--line); overflow: hidden; }
.cmp-track i { display: block; height: 100%; border-radius: 7px; background: var(--glow); opacity: 0.55; }
.cmp-bar-b .cmp-track i { background: linear-gradient(135deg, #7ff0d6 0%, #25b4c4 55%, #3a7bd5 100%); }
.cmp-bar-c .cmp-track i { background: linear-gradient(135deg, #d6b8ff 0%, #9a6be0 55%, #6a4bc4 100%); }
.cmp-val { min-width: 5.5em; font: 600 0.95rem var(--font-display); }
.cmp-side.is-ahead .cmp-track i { opacity: 1; box-shadow: 0 0 14px rgba(253, 161, 54, 0.35); }
.cmp-side.is-ahead .cmp-bar-b .cmp-track i { box-shadow: 0 0 14px rgba(37, 180, 196, 0.4); }
.cmp-side.is-ahead .cmp-bar-c .cmp-track i { box-shadow: 0 0 14px rgba(154, 107, 224, 0.45); }
.cmp-tip { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 2; display: none; width: max-content; max-width: 260px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-hover); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); pointer-events: none; font-size: 0.85rem; line-height: 1.35; }
.cmp-bar:hover .cmp-tip, .cmp-bar:focus .cmp-tip { display: block; }
.cmp-table { width: 100%; max-width: 620px; margin-top: 14px; border-collapse: collapse; }
.cmp-table th, .cmp-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.cmp-table thead th { font: 600 0.95rem var(--font-display); }
.cmp-table tbody th { font-weight: 500; color: var(--muted); }
.cmp-table td { font: 600 1.1rem var(--font-display); color: var(--muted); }
.cmp-table td.is-edge { color: var(--gold); }
@media (max-width: 640px) {
  .cmp-picks { flex-direction: column; align-items: stretch; gap: 6px; }
  .cmp-pick { max-width: none; }
  .cmp-vs { padding: 0; text-align: center; }
  /* Name cards stay side by side on a phone, each one a compact avatar over the name. */
  .cmp-heads { gap: 8px; margin-top: 20px; }
  .cmp-head { position: relative; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 10px 6px; text-align: center; }
  .cmp-head-link { flex: none; flex-direction: column; gap: 6px; }
  .cmp-remove { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; }
  .cmp-head .athlete-initials { width: 44px; height: 44px; font-size: 0.9rem; }
  .cmp-head strong { flex: none; font-size: 0.8rem; line-height: 1.2; overflow-wrap: anywhere; }
  .cmp-head .cmp-key { position: absolute; top: 10px; left: 10px; width: 8px; height: 8px; }
  .cmp-vs { display: none; }
  .cmp-row { grid-template-columns: 1fr; gap: 10px; }
}

/* Compare: timeline chart, levels, badges */
.cmp-h3 { margin: 28px 0 0; font-size: 1.05rem; }
.cmp-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 6px; margin-top: 14px; font-size: 0.9rem; }
.cmp-key { display: inline-block; width: 12px; height: 12px; margin-left: 12px; border-radius: 50%; }
.cmp-key:first-child { margin-left: 0; }
.cmp-key-c, .cmp-dot-c { background: linear-gradient(135deg, #d6b8ff, #9a6be0 55%, #6a4bc4); }
.cmp-key-a, .cmp-dot-a { background: linear-gradient(135deg, #fda136, #e2572b 60%, #b5307a); }
.cmp-key-b, .cmp-dot-b { background: linear-gradient(135deg, #7ff0d6, #25b4c4 55%, #3a7bd5); }
.cmp-chart-wrap { display: flex; gap: 8px; margin-top: 10px; }
.cmp-yaxis { position: relative; width: 3.2em; font-size: 0.75rem; color: var(--muted); }
.cmp-yaxis span { position: absolute; right: 0; transform: translateY(-50%); }
.cmp-yaxis span:nth-child(1) { top: 8%; }
.cmp-yaxis span:nth-child(2) { top: 50%; }
.cmp-yaxis span:nth-child(3) { top: 92%; }
.cmp-chart { position: relative; flex: 1; height: 260px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); }
.cmp-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--line); }
.cmp-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cmp-line { fill: none; stroke-width: 2; stroke-linejoin: round; opacity: 0.7; }
.cmp-line-a { stroke: #fda136; }
.cmp-line-b { stroke: #25b4c4; }
.cmp-line-c { stroke: #b48cf0; }
.cmp-dot { position: absolute; width: 16px; height: 16px; padding: 0; border: 2px solid var(--bg); border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; }
.cmp-dot-b { z-index: 1; }
.cmp-dot:hover, .cmp-dot:focus { z-index: 3; box-shadow: 0 0 0 3px rgba(237, 237, 243, 0.35); }
.cmp-dot .cmp-tip { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); text-align: left; }
.cmp-dot.tip-left .cmp-tip { left: -8px; transform: none; }
.cmp-dot.tip-right .cmp-tip { left: auto; right: -8px; transform: none; }
.cmp-dot:hover .cmp-tip, .cmp-dot:focus .cmp-tip, .cmp-hover:hover .cmp-tip, .cmp-hover:focus .cmp-tip { display: block; }
.cmp-xaxis { display: flex; justify-content: space-between; margin: 6px 0 0 calc(3.2em + 8px); font-size: 0.75rem; color: var(--muted); }
.cmp-none { font-size: 0.9rem; }
.cmp-hover { position: relative; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cmp-hover .cmp-tip { left: 0; font: 400 0.85rem var(--font-body); color: var(--text); text-align: left; }
@media (max-width: 640px) { .cmp-chart { height: 220px; } .cmp-yaxis { width: 2.6em; } .cmp-xaxis { margin-left: calc(2.6em + 8px); } }
.cmp-table td:last-child .cmp-tip { left: auto; right: 0; }

/* Compare: actions, roster button, notice, print */
.cmp-actions { margin-top: 16px; }
.cmp-notice { color: var(--gold); }
.cmp-add { padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-raised); color: var(--muted); font: inherit; font-size: 0.8rem; white-space: nowrap; cursor: pointer; }
.cmp-add:hover, .cmp-add:focus-visible { color: var(--text); border-color: var(--gold); }
.cmp-print-title { display: none; }
@media print {
  :root { --bg: #fff; --bg-raised: #f4f3fa; --bg-hover: #eceaf6; --text: #15122f; --muted: #555266; --line: rgba(21, 18, 47, 0.2); }
  html, body { background: #fff !important; }
  body::before { display: none; }
  body.print-compare #site-header, body.print-compare #site-footer, body.print-compare .page-intro { display: none; }
  body.print-compare #team-body > :not(#team-compare) { display: none; }
  body.print-compare main { width: 100%; padding: 0; }
  body.print-compare main > section { margin-top: 0; }
  body.print-compare .cmp-picks, body.print-compare .cmp-controls, body.print-compare .cmp-actions, body.print-compare .cmp-remove,
  body.print-compare .cmp-notice, body.print-compare #team-compare > h2, body.print-compare #team-compare > p { display: none; }
  body.print-compare .cmp-print-title { display: block; margin: 0 0 12px; font: 700 1.3rem var(--font-display); color: #15122f; }
  body.print-compare .cmp-print-title span { font: 400 0.85rem var(--font-body); color: var(--muted); }
  body.print-compare .cmp-chart-wrap, body.print-compare .cmp-chart, body.print-compare .cmp-dot, body.print-compare .cmp-track i,
  body.print-compare .cmp-line, body.print-compare .cmp-key { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.print-compare .cmp-head, body.print-compare .cmp-row, body.print-compare .cmp-chart { background: #f4f3fa; }
  body.print-compare .cmp-track { background: rgba(21, 18, 47, 0.12); }
  body.print-compare .cmp-row, body.print-compare .cmp-head, body.print-compare .cmp-chart-wrap, body.print-compare .cmp-table { break-inside: avoid; }
  body.print-compare .cmp-h { break-after: avoid; }
  body.print-compare .cmp-tip, body.print-compare .cmp-screen-only { display: none !important; }
  body.print-compare .cmp-sentence strong, body.print-compare .cmp-table td.is-edge { color: #b35a00; }
  body.print-compare .cmp-table td { color: #333; }
  body.print-compare .cmp-head-link { color: #15122f; }
}
@media (max-width: 640px) {
  /* On a phone the roster scrolls sideways; keep the Compare button pinned to the right edge. */
  .team-table .cmp-add-cell { position: sticky; right: 0; background: var(--bg-raised); box-shadow: -8px 0 8px -4px rgba(0, 0, 0, 0.5); padding-left: 8px; padding-right: 8px; }
}

/* Who's going: athletes registered with USA Climbing are checked by themselves and locked. */
.admin-check.is-registered { border-color: var(--gold); background: rgba(253, 161, 54, 0.12); cursor: default; }
.admin-check.is-registered input { cursor: default; }
.admin-check .status-tag { margin-left: 4px; }

/* Athlete page: "Upcoming events" with an optional finish range under each event. */
#athlete-upcoming { margin-top: 28px; }
#athlete-upcoming h2 { margin-bottom: 12px; }
.predict { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: rgba(237, 237, 243, 0.05); border: 1px solid var(--line); }
.predict strong { display: block; font: 700 1.05rem/1.3 var(--font-display); }
.predict small { display: block; margin-top: 4px; font-size: 0.8rem; line-height: 1.4; color: var(--muted); }

/* Fun forecast: a playful box under the real finish range. */
.fun { margin-top: 10px; padding: 12px 14px; border-radius: 10px; border: 1px dashed rgba(253, 161, 54, 0.55); background: rgba(253, 161, 54, 0.06); }
.fun-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.fun-head strong { font: 700 1rem var(--font-display); }
.fun-tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.fun-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.fun-chip { border: 1px solid var(--line); background: none; color: var(--text); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 0.82rem; cursor: pointer; }
.fun-chip small { color: var(--muted); }
.fun-chip:hover { background: var(--bg-hover); }
.fun-chip[aria-pressed="true"] { background: var(--glow); border-color: transparent; color: #1a0d05; font-weight: 600; }
.fun-chip[aria-pressed="true"] small { color: rgba(26, 13, 5, 0.7); }
.fun-result { margin: 4px 0 6px; font-size: 1.05rem; }
.fun-result strong { font: 700 1.1rem var(--font-display); }
.fun-vs { font-size: 0.82rem; color: var(--muted); }
.fun-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.85rem; color: var(--muted); }
.fun-lines strong { color: var(--text); margin-right: 4px; }
.fun-lines em { font-size: 0.78rem; }
.fun-delta { font-weight: 600; white-space: nowrap; }
.fun-delta.is-up { color: #7ee2a8; }
.fun-delta.is-down { color: #ff9a76; }
.fun-delta.is-flat { color: var(--muted); }

/* Fun forecast: the "How?" breakdown under each chip, and the snack picker. */
.fun-why { display: inline; }
.fun-why summary { display: inline; cursor: pointer; color: var(--gold); font-size: 0.78rem; text-decoration: underline; text-underline-offset: 2px; }
.fun-why[open] summary { display: block; margin-top: 4px; }
.fun-why-body { margin: 6px 0 4px; padding: 8px 10px; border-left: 2px solid var(--gold); background: rgba(237, 237, 243, 0.04); border-radius: 0 8px 8px 0; font-size: 0.82rem; line-height: 1.45; }
.fun-why-body p { margin: 0 0 6px; }
.fun-why-body ul { margin: 0 0 6px; padding-left: 18px; }
.fun-why-body li { display: list-item; }
.fun-snack, .fun-whatif { font: inherit; font-size: 0.82rem; color: var(--text); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; padding: 2px 6px; }
.fun-comps { margin-top: 2px; }
.fun-comps summary { cursor: pointer; color: var(--muted); font-size: 0.78rem; text-decoration: underline; text-underline-offset: 2px; }
.fun-comps ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.78rem; color: var(--muted); }

/* Fun forecast: the odds tiles, the intro line and the typed temperature. */
.fun-intro { margin: 4px 0 0; font-size: 0.85rem; color: var(--muted); }
.fun-odds { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 10px; }
.fun-odd { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(237, 237, 243, 0.04); }
.fun-odd span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fun-odd strong { font: 700 1.5rem/1.1 var(--font-display); background: var(--glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fun-odd small { font-size: 0.74rem; color: var(--muted); }
.fun-odd .is-up { color: #7ee2a8; font-weight: 600; }
.fun-odd .is-down { color: #ff9a76; font-weight: 600; }
.fun-degrees { white-space: nowrap; }
.fun-temp { width: 4.5em; font: inherit; font-size: 0.82rem; color: var(--text); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; padding: 2px 6px; }
.fun-fineprint { font-size: 0.74rem; color: var(--muted); }
.fun-odds[hidden] { display: none; }
.fun-base { margin: 8px 0 0; padding: 6px 10px; border-left: 2px solid var(--gold); background: rgba(237, 237, 243, 0.04); border-radius: 0 8px 8px 0; font-size: 0.84rem; color: var(--muted); }
.fun-base strong { color: var(--text); }
.fun-tip { display: block; margin: 1px 0 1px; color: var(--gold); font-style: italic; font-size: 0.8rem; }
.fun-claim { margin-left: 6px; font-style: normal; font-size: 0.78rem; color: var(--text); white-space: nowrap; cursor: pointer; }
.fun-claim input { accent-color: var(--gold); vertical-align: -2px; cursor: pointer; }
.fun-claim strong { color: #7ee2a8; }
.fun-bonus strong { color: #7ee2a8; }
.admin-athlete:focus-visible, #photos .admin-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The photo menu under an athlete's round picture: choose a file, paste, or remove. */
.admin-photo-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: 250px; padding: 6px; display: grid; gap: 2px; text-align: left; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); }
.admin-photo-menu[hidden] { display: none; }
.admin-photo-menu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; }
.admin-photo-menu button:hover, .admin-photo-menu button:focus-visible { background: var(--bg-hover); outline: none; }
.admin-photo-menu button.is-danger { color: #ff8a65; }

/* ---- Admin photo dialog (drop / paste, then crop) ------------------------ */
.photo-dialog { width: min(640px, 100% - 32px); max-height: 92vh; margin: auto; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); color: var(--text); overflow: auto; }
.photo-dialog::backdrop { background: rgba(5, 4, 15, 0.7); backdrop-filter: blur(4px); }
.photo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.photo-head h2 { margin: 0; font-size: 1.1rem; }
.photo-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.photo-close:hover { background: var(--bg-hover); }
.photo-step { padding: 16px; }
.photo-step[hidden] { display: none; }
.photo-drop { display: grid; justify-items: center; gap: 8px; padding: 32px 16px; text-align: center; border: 2px dashed var(--line); border-radius: var(--radius); color: var(--text-dim, var(--text)); transition: border-color .15s, background .15s; }
.photo-drop strong { color: var(--text); font-size: 1.05rem; }
.photo-drop.is-over { border-color: var(--gold, #ffb84d); background: rgba(255, 184, 77, 0.08); box-shadow: 0 0 24px rgba(255, 184, 77, 0.25); }
.photo-cloud { color: var(--gold, #ffb84d); }
.photo-drop-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.photo-error { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: rgba(226, 87, 43, 0.15); color: #ff8a65; font-size: 0.88rem; }
.photo-error[hidden] { display: none; }
.photo-crop-wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: center; }
.photo-stage { position: relative; flex: none; user-select: none; touch-action: none; background: #000; }
.photo-stage img { display: block; width: 100%; height: 100%; pointer-events: none; }
.photo-box { position: absolute; border: 2px solid var(--gold, #ffb84d); box-shadow: 0 0 0 9999px rgba(5, 4, 15, 0.6); cursor: move; touch-action: none; }
.photo-handle { position: absolute; width: 16px; height: 16px; background: var(--gold, #ffb84d); border-radius: 4px; }
.photo-handle[data-h=nw] { left: -9px; top: -9px; cursor: nwse-resize; }
.photo-handle[data-h=ne] { right: -9px; top: -9px; cursor: nesw-resize; }
.photo-handle[data-h=sw] { left: -9px; bottom: -9px; cursor: nesw-resize; }
.photo-handle[data-h=se] { right: -9px; bottom: -9px; cursor: nwse-resize; }
.photo-stage { overflow: hidden; }
.photo-preview { display: grid; justify-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-dim, var(--text)); }
.photo-preview-canvas { width: 120px; height: 120px; border-radius: 50%; border: 2px solid var(--line); }
.photo-preview p { margin: 0; }
.photo-hint { margin: 12px 0 0; font-size: 0.85rem; color: var(--text-dim, var(--text)); text-align: center; }
.photo-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.photo-spacer { flex: 1; }
.photo-remove { color: #ff8a65; }
.photo-step[data-step=pick] .photo-foot { margin-top: 12px; }

/* ---- Live results page (results.html) ------------------------------------ */
.results-meta { margin: 6px 0 0; color: var(--gold); font-size: 0.95rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(226, 87, 43, 0.18); border: 1px solid rgba(226, 87, 43, 0.6); color: #ff8a65; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.live-pill i { width: 8px; height: 8px; border-radius: 50%; background: #ff5a36; box-shadow: 0 0 8px #ff5a36; animation: live-blink 1.4s ease-in-out infinite; }
@keyframes live-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .live-pill i { animation: none; } }
.final-pill { display: inline-flex; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.results-warn { color: #ff8a65; }
.results-picker { display: grid; gap: 10px; margin: 24px 0 8px; }
.results-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.results-group-name { min-width: 4.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.results-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 12px; }
.results-round { margin: 0; }
.results-ours { padding: 4px 14px; font-size: 0.9rem; background: var(--bg-raised); cursor: pointer; }
.results-ours[aria-pressed="true"] { background: var(--glow); color: #1a0d05; border-color: transparent; font-weight: 600; }
.results-note { margin: 24px 0; padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.live-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); overflow: hidden; }
.live-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.live-table th { padding: 10px 14px; text-align: left; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.live-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.live-table tr:last-child td { border-bottom: 0; }
.live-table small { display: block; color: var(--muted); font-size: 0.78rem; }
.live-table .rank-col { width: 4.5rem; font: 700 1.05rem var(--font-display); font-stretch: 125%; color: var(--gold); }
.live-table th.rank-col { font: 600 0.72rem var(--font-body); font-stretch: normal; color: var(--muted); }
.live-table .score-col { text-align: right; white-space: nowrap; }
.live-table th.score-col { text-align: right; }
.live-table tr.is-ours td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.live-table tr.is-ours a { color: var(--gold); font-weight: 600; text-decoration: none; }
/* Boulder details on the live results page: tap a climber (or "Show details") for a box per boulder.
   Gold glow = a top that counts toward the score, outlined = a top that doesn't count, slash = tried
   but not topped, faint = not tried. The small number in a corner is the tries; a green dot = not confirmed yet. */
.live-table .details-link { display: block; margin: 4px 0 0 auto; padding: 4px 0 2px; border: 0; background: none; font: inherit; font-size: 0.78rem; color: var(--gold); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.live-table .details-link:hover, .live-table .details-link:focus-visible { color: var(--text); }
.details-bar { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.results-toggles { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; justify-content: space-between; } /* its own line under the round: Planet Rock only at the left edge, Show details at the right */
.live-table tr.has-details { cursor: pointer; }
.live-table tr.has-details:hover td { background: var(--bg-hover); }
.live-table tr.is-open td { border-bottom-color: transparent; }
.live-table .details-row td { padding-top: 2px; }
.live-table .details-row.is-ours td { box-shadow: inset 3px 0 0 var(--gold); }
.boulder-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px 5px; max-width: 640px; }
@media (min-width: 700px) { .boulder-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.boulder { display: grid; justify-items: center; align-content: start; gap: 2px; }
.boulder b { position: relative; display: grid; place-content: center; width: 100%; aspect-ratio: 1.15; border-radius: 6px; border: 1px solid var(--line); background: rgba(237, 237, 243, 0.05); font: 600 0.62rem/1 var(--font-body); color: var(--text); font-variant-numeric: tabular-nums; }
.boulder i { font-style: normal; font-size: 0.68rem; line-height: 1; color: var(--muted); }
.boulder.is-top b { background: var(--bg-raised); border-color: rgba(253, 161, 54, 0.6); }
.boulder.is-counted b { background: var(--glow); border-color: transparent; color: #1a0d05; }
.boulder.is-tried b { background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(237, 237, 243, 0.35) calc(50% - 1px), rgba(237, 237, 243, 0.35) calc(50% + 1px), transparent calc(50% + 1px)); color: var(--muted); }
.boulder sup { position: absolute; top: 2px; right: 3px; font-size: 0.55rem; line-height: 1; }
.boulder.is-unconfirmed::after, .boulder-dot { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #8de0b0; }
.boulder-sum { margin: 10px 0 2px; font-size: 0.82rem; color: var(--muted); }
.boulder-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 10px; font-size: 0.78rem; color: var(--muted); }
.boulder-key .boulder { width: 18px; }
.boulder-key .boulder b { aspect-ratio: 1; }
.boulder-key .key-item { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; white-space: nowrap; }
@media (max-width: 640px) { .live-table th, .live-table td { padding: 9px 10px; } .live-table .rank-col { width: 3rem; } }

/* The "Live" button label on an event card while the event is on. */
.event-body .event-results.is-live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #b3200a; box-shadow: 0 0 6px #b3200a; vertical-align: 1px; }

/* The "Live now" banner at the top of the home page while an event is on. */
.live-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 20px 0 0; padding: 12px 18px; border: 1px solid rgba(226, 87, 43, 0.6); border-radius: var(--radius); background: linear-gradient(90deg, rgba(226, 87, 43, 0.2), rgba(181, 48, 122, 0.15)); color: var(--text); text-decoration: none; box-shadow: 0 0 24px rgba(226, 87, 43, 0.25); }
.live-banner[hidden] { display: none; }
.live-banner span:last-child { margin-left: auto; color: var(--gold); font-weight: 600; }
.live-banner:hover { border-color: var(--gold); }

/* Finding a climber: the Planet Rock strip, the search box, and our climbers' rows. */
.pr-tag { display: inline-block; white-space: nowrap; flex: none; padding: 1px 9px; border-radius: 999px; background: var(--glow); color: #1a0d05; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.our-strip { margin: 22px 0 6px; padding: 14px; border: 1px solid rgba(253, 161, 54, 0.45); border-radius: var(--radius); background: linear-gradient(135deg, rgba(253, 161, 54, 0.14), rgba(181, 48, 122, 0.1)); }
.our-strip-title { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; }
.our-strip-title b { margin-left: auto; color: var(--gold); }
.our-strip .jump-list { margin-top: 8px; }
.jump-list { display: grid; }
.jump-head { margin: 14px 0 2px; padding: 0 2px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.jump-head small { margin-left: 6px; font-weight: 500; color: var(--muted); letter-spacing: 0.06em; }
.jump-head:first-child { margin-top: 4px; }
.jump-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.jump-row:last-child { border-bottom: 0; }
.jump-name { font-weight: 600; }
.jump-row.is-ours .jump-name { color: var(--gold); }
.jump-place { flex: none; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.jump-row:hover .jump-name, .jump-row:focus-visible .jump-name { text-decoration: underline; }
.results-find { display: block; width: 100%; margin: 16px 0 4px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-raised); color: var(--text); font: inherit; font-size: 16px; /* 16px or bigger stops iPhones zooming in when the box is tapped */ }
.results-find:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(253, 161, 54, 0.25); }
.who { display: flex; align-items: center; gap: 10px; }
.who .athlete-initials-sm { flex: none; }
.who-name { display: block; font-weight: 700; color: var(--gold); text-decoration: none; }
.live-table tr.is-ours { background: linear-gradient(90deg, rgba(253, 161, 54, 0.24), rgba(253, 161, 54, 0.07)); } /* one gradient across the whole row, not one per cell */
.live-table tr.is-ours .rank-col { color: var(--text); }
.live-table tr[data-athlete] { scroll-margin-top: 120px; }
.live-table tr.is-flash td { animation: row-flash 2.5s ease-out; }
@keyframes row-flash { 0%, 40% { background: rgba(253, 161, 54, 0.6); } }
@media (prefers-reduced-motion: reduce) { .live-table tr.is-flash td { animation: none; background: rgba(253, 161, 54, 0.4); } }

/* Phones are where this page is used: bigger tap targets, nothing wider than the screen. */
@media (max-width: 640px) {
  .results-picker .filter-bar button, .results-controls .filter-bar button { min-height: 40px; padding: 8px 14px; }
  .results-ours { min-height: 40px; }
  .live-table td { padding: 10px 8px; }
  .live-table .who { gap: 8px; }
  .live-table .score-col strong { font-size: 1.05rem; }
  .results-group-name { flex-basis: 100%; }
}

/* Move out dialog and the Former members list (admin, Athletes tab). */
.moveout-body { display: grid; gap: 14px; }
.moveout-reasons { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.moveout-reasons legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.moveout-reasons label, .moveout-body .admin-check { display: flex; align-items: center; gap: 8px; }
.moveout-field { display: grid; gap: 6px; font-size: 0.9rem; color: var(--muted); }
.moveout-field[hidden] { display: none; }
.moveout-field input { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised); color: var(--text); font: inherit; }
.moveout-body p { margin: 0; font-size: 0.85rem; }
#athletes .admin-moveout { margin-left: auto; }
#athletes .admin-moveout + .admin-remove { margin-left: 0; }
#athletes .admin-former { margin-top: 28px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.5); }
#athletes .admin-former h3 { margin: 0 0 4px; font-size: 1.05rem; }
#athletes .admin-former-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
#athletes .admin-former-row > span { flex: 1 1 240px; display: grid; gap: 2px; }
#athletes .admin-former-row form { margin: 0; }
#athletes .admin-former-date { display: flex; align-items: center; gap: 6px; }
#athletes .admin-former-date select, #athletes .admin-former-date input { min-height: 36px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised); color: var(--text); font: inherit; font-size: 0.85rem; }
.moveout-field select { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised); color: var(--text); font: inherit; }
.alumni-season { display: block; margin-top: 2px; font: 500 0.78rem var(--font-body); font-stretch: normal; letter-spacing: 0; text-transform: none; color: var(--muted); }
#athletes .admin-former-row .admin-photo-pick { width: 52px; height: 52px; }
#athletes .admin-former-row .admin-photo-badge { width: 20px; height: 20px; font-size: 0.8rem; }
#athletes .admin-former-photo { margin: 0; }

/* Alumni tab (admin) */
#alumni .admin-alumni-list { display: grid; gap: 12px; margin-top: 16px; }
#alumni .admin-alumnus { display: grid; grid-template-columns: 60px 1fr auto; gap: 8px 16px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21, 18, 47, 0.7); }
#alumni .admin-alumnus form { margin: 0; }
#alumni .admin-alumnus .admin-photo-pick { width: 60px; height: 60px; }
#alumni .admin-alumnus .athlete-initials { width: 60px; height: 60px; font-size: 1.1rem; }
#alumni .admin-alumnus-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; }
#alumni .admin-alumnus-fields { display: flex; flex-wrap: wrap; gap: 10px 16px; }
#alumni .admin-alumnus-fields label { display: grid; gap: 4px; font-size: 0.8rem; color: var(--muted); }
#alumni .admin-alumnus-fields label[hidden] { display: none; }
#alumni .admin-alumnus-fields select, #alumni .admin-alumnus-fields input { min-height: 38px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised); color: var(--text); font: inherit; font-size: 0.9rem; }
#alumni .admin-alumnus-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
#athletes .admin-alumni-note { margin-top: 24px; }
@media (max-width: 720px) { #alumni .admin-alumnus { grid-template-columns: 60px 1fr; } #alumni .admin-alumnus-back { grid-column: 1 / -1; } }
#alumni .admin-alumnus-actions .admin-check { white-space: nowrap; }

.winners { margin: 22px 0 6px; padding: 14px; border: 1px solid rgba(253, 161, 54, 0.45); border-radius: var(--radius); background: linear-gradient(135deg, rgba(253, 161, 54, 0.1), rgba(181, 48, 122, 0.08)); }
.winners h2 { margin: 0 0 6px; font-size: 1.2rem; }
.winners-ours { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.winners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 10px; }
.winner-card { padding: 10px 12px 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.04); overflow: hidden; }
.winner-card h3 { margin: 0 0 6px; font-size: 0.85rem; color: var(--gold); letter-spacing: 0.04em; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; margin: 0 -12px; padding: 0 8px; }
.podium-col { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.podium-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding-bottom: 6px; }
.podium .athlete-initials.athlete-initials-xs { width: 30px; height: 30px; font-size: 0.62rem; }
.podium .face.is-ours .athlete-initials { box-shadow: 0 0 0 2px var(--gold); }
.podium-step { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 8px; text-align: center; color: #1a0d05; border-top: 3px solid rgba(255, 255, 255, 0.55); }
.podium-medal { font-size: 1.5rem; line-height: 1.1; }
.podium-step > b { font-size: 1.4rem; line-height: 1.1; }
.podium-person { display: flex; flex-direction: column; align-items: center; flex: 1; width: 100%; min-width: 0; gap: 1px; padding: 4px 0 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.podium-person:hover .pp-name, .podium-person:focus-visible .pp-name { text-decoration: underline; }
.pp-name { font-size: 0.78rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.pp-team { display: block; max-width: 100%; font-size: 0.68rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.pp-pts { margin-top: auto; padding-top: 6px; font-size: 0.78rem; font-weight: 700; }
.wp-1 .podium-step { min-height: 190px; background: linear-gradient(180deg, #ffd45a, #e8962a); border-radius: 6px 6px 0 0; }
.wp-2 .podium-step { min-height: 152px; background: linear-gradient(180deg, #e6e8f2, #9aa0b8); border-radius: 6px 0 0 0; }
.wp-3 .podium-step { min-height: 124px; background: linear-gradient(180deg, #e0a070, #a8622f); border-radius: 0 6px 0 0; }
.podium .athlete-initials { background: #3a2766; color: #fff; border: 2px solid #6b57a8; }
.podium .face.is-ours .athlete-initials { background: #4a2f6d; color: var(--gold); border-color: var(--gold); box-shadow: none; }
.podium-step.is-tie .pp-team { display: none; }
.podium-step.is-tie .podium-person { flex: none; padding-top: 6px; }
.podium-step.is-tie .pp-name { font-size: 0.72rem; }
.podium-step.is-tie .pp-pts { margin-top: 0; padding-top: 0; font-size: 0.72rem; }