:root {
  --navy: #1f4e8c;
  --navy-bright: #2b6dc4;
  --orange: #fe6902;
  --bg: #f7f8fa;
  --border: #dde1e6;
  --text: #1c2530;
}

* { box-sizing: border-box; }

/* Form controls don't inherit the page font by default (browser UA stylesheets give
   them their own, e.g. Chrome's default input/button font is ~13px Arial) - without
   this every text input/select/button on the site would silently look inconsistent
   with the surrounding body text and with each other. */
input, button, select, textarea { font: inherit; color: inherit; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: white;
  border-bottom: 1px solid var(--border);
}
.site-header-bar { display: flex; align-items: center; gap: 0.75rem; }
.site-header .brand img { height: 36px; display: block; }
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.menu-toggle span { display: block; width: 100%; height: 2px; background: var(--navy); border-radius: 1px; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-header nav a { font-weight: 600; color: var(--text); border-bottom: 2px solid transparent; }
.site-header nav a:hover { text-decoration: none; border-bottom-color: var(--navy); }
.site-header nav a.active { color: var(--navy); border-bottom-color: var(--orange); }
.site-header nav a.active:hover { border-bottom-color: var(--orange); }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

footer {
  text-align: center;
  font-size: 0.85rem;
  color: #6b7686;
  padding: 1.5rem 1rem 2.5rem;
}

/* Narrower than the default 1100px main column - this is prose, not a wide results
   table, and reads better at a normal line length. */
.about-page { max-width: 700px; }
.about-page h2 { margin-top: 2rem; color: var(--navy); }
.about-page li { margin-bottom: 0.5rem; }
.about-page code {
  background: #eef1f5;
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  font-size: 0.9em;
}

.status { padding: 2rem 0; text-align: center; color: #6b7686; }
.status.error { color: #b3261e; }
.hint { color: #5b6573; font-size: 0.9rem; }
.leg-split { color: #6b7686; font-size: 0.8rem; }
.place-gain { color: #1a7f37; font-weight: 600; }
.place-loss { color: #cf222e; font-weight: 600; }

.hero { text-align: center; padding: 1.5rem 0 2rem; }
.hero h1 { margin-bottom: 0.25rem; color: var(--navy); }
.hero-stats { color: #5b6573; margin-bottom: 1.25rem; }
.hero-stats strong { color: var(--orange); }

.search-box {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.search-box input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: min(360px, 80vw);
}
.search-box button,
.tabs button,
.sex-filter button,
.last-edition-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: white;
  border-radius: 6px;
  cursor: pointer;
}
.country-select {
  position: relative;
  display: inline-block;
  width: min(360px, 80vw);
  text-align: left;
}
/* Single box-model layer (border+padding) on the outer div only, matching
   .search-box input exactly - the <input> inside is stripped of its own border/padding
   (see .country-select-input) so it doesn't stack a second layer on top and grow taller. */
.country-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  cursor: text;
}
.country-select-trigger:hover { border-color: var(--navy); }
.country-select-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  background: none;
}
.country-select-input::placeholder { color: #8b95a3; }
.country-select-caret { margin-left: auto; color: #8b95a3; }
.country-select-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
  text-align: left;
}
.country-select-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  font: inherit;
  color: var(--text);
  cursor: pointer;
}
.country-select-list li:hover { background: #f5f8fc; }
.country-select-empty { color: #8b95a3; cursor: default; }
.country-select-empty:hover { background: none; }
.suggestion-years { margin-left: auto; color: #8b95a3; font-size: 0.85em; }

.years-timeline {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  margin: 1rem 0 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.years-timeline-year {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.years-timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #e3e6ea;
  border: 1px solid var(--border);
  flex: none;
}
.years-timeline-dot.participated { background: var(--navy); border-color: var(--navy); }
.years-timeline-dot.absent { background: white; }
.years-timeline-dot.no-edition {
  background: repeating-linear-gradient(45deg, #e3e6ea, #e3e6ea 3px, white 3px, white 6px);
}
.years-timeline-label {
  writing-mode: vertical-rl;
  font-size: 0.7rem;
  color: #5b6573;
  letter-spacing: 0.5px;
}
.years-timeline-legend {
  display: flex;
  gap: 1.25rem;
  font-size: 0.85rem;
  color: #5b6573;
  margin-bottom: 1.5rem;
}
.years-timeline-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.years-timeline-legend .years-timeline-dot { width: 12px; height: 12px; }

.year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.9rem;
  margin-top: 1.5rem;
}
.year-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem;
  text-align: center;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  transition: box-shadow 0.15s, transform 0.15s;
}
.year-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); transform: translateY(-2px); text-decoration: none; }
.year-card img { max-height: 56px; max-width: 100%; object-fit: contain; }
.year-card-year { display: block; font-weight: 700; font-size: 1.1rem; }
.year-card-city { display: block; font-size: 0.8rem; color: #6b7686; }

.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.9rem;
  margin-top: 1.5rem;
}
.country-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem;
  text-align: center;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  transition: box-shadow 0.15s, transform 0.15s;
}
.country-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); transform: translateY(-2px); text-decoration: none; }
.country-card-name { font-weight: 700; }

.event-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.event-header h1 { margin: 0; color: var(--navy); }
.event-header p { margin: 0.1rem 0; color: #5b6573; }
.event-logo { max-height: 80px; max-width: 120px; object-fit: contain; }

.view-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.view-tabs button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--orange);
  background: white;
  color: var(--orange);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.view-tabs button.active { background: var(--orange); color: white; }

.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.tabs button, .sex-filter button {
  background: white; color: var(--navy);
}
.tabs button.active, .sex-filter button.active {
  background: var(--navy); color: white;
}

.course-info { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.course-chip {
  background: white;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}
.course-chip:hover { border-color: var(--navy-bright); }
.course-chip.active {
  background: var(--navy-bright);
  border-color: var(--navy-bright);
  color: white;
}

/* Year-range pickers (Medals page) - same "Jump to a country" dropdown component as the
   home page (.country-select etc.), just narrower since a year is 4 digits, not a
   country name, and with no text-filtering since there are only ~25 options. */
.year-range { align-items: center; }
.year-range .hint { margin: 0; }
.year-select { width: 90px; }
.year-select .country-select-trigger { cursor: pointer; justify-content: space-between; }
.country-select-list li.active { background: #eef4fb; color: var(--navy); font-weight: 600; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.pagination button {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: white;
  border-radius: 6px;
  cursor: pointer;
}
.pagination button:disabled {
  background: white;
  color: #b6bdc6;
  border-color: var(--border);
  cursor: default;
}
.pagination span { color: #5b6573; font-size: 0.9rem; }

.sex-filter { display: flex; gap: 0.5rem; margin-bottom: 1rem; }

/* Every results table is wrapped in this - on a phone-width viewport the table scrolls
   horizontally inside its own box instead of squeezing every column down to illegible
   widths or blowing out the page's horizontal scroll. */
.table-scroll { overflow-x: auto; }
.results-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
}
.results-table th, .results-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.results-table th { cursor: pointer; background: #eef1f5; user-select: none; white-space: nowrap; }
.results-table tbody tr:hover { background: #f5f8fc; }
.results-table .col-rank, .results-table .col-time, .results-table .col-diff { text-align: right; }
.results-table .col-medal { text-align: center; }

.rank-first-half { font-weight: 700; }
.runner-matched { font-weight: 700; }

/* Highlights the specific competitor/leg runner a "Class" link from the athlete search
   page was clicked for - a tinted full row for the individual table, a tinted chip
   around just that one name for the relay table (since a relay row has three names and
   only one of them is the one being pointed at). */
.row-highlight { background: #fff3cd; }
.results-table tbody tr.row-highlight,
.results-table tbody tr.row-highlight:hover { background: #fff3cd; }
.results-table td > div.row-highlight { display: inline-block; padding: 0 0.3rem; border-radius: 4px; }

/* Small icon in front of a rank: a numbered medal-on-a-ribbon for 1st-3rd, a navy/orange
   podium silhouette for 4th-6th. No icon class is set (rankIconClass returns "") for
   anything else, in which case .rank-icon stays sized 0x0 and takes up no visible space.
   The medals are SVG (drawn with the brand navy/orange ribbon) rather than emoji, same
   reasoning as the podium icon below and the flag images in flags.js - consistent
   cross-platform rendering instead of depending on emoji font support. */
.rank-icon { display: inline-block; vertical-align: middle; }
.rank-label { margin-left: 0.3em; }
.rank-icon-gold, .rank-icon-silver, .rank-icon-bronze {
  width: 14px;
  height: 18px;
  margin-right: 0.35rem;
  background-repeat: no-repeat;
  background-size: contain;
}
.rank-icon-gold {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpolygon points='7,0 11,0 12,15 8,17' fill='%231f4e8c'/%3E%3Cpolygon points='13,0 17,0 16,17 12,15' fill='%23fe6902'/%3E%3Ccircle cx='12' cy='20' r='8' fill='%23ffd23f' stroke='%23a8842a'/%3E%3Ctext x='12' y='23.5' font-family='Arial,sans-serif' font-size='9' font-weight='700' text-anchor='middle' fill='%236b4f00'%3E1%3C/text%3E%3C/svg%3E");
}
.rank-icon-silver {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpolygon points='7,0 11,0 12,15 8,17' fill='%231f4e8c'/%3E%3Cpolygon points='13,0 17,0 16,17 12,15' fill='%23fe6902'/%3E%3Ccircle cx='12' cy='20' r='8' fill='%23c8ccd1' stroke='%23888d94'/%3E%3Ctext x='12' y='23.5' font-family='Arial,sans-serif' font-size='9' font-weight='700' text-anchor='middle' fill='%233f444a'%3E2%3C/text%3E%3C/svg%3E");
}
.rank-icon-bronze {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpolygon points='7,0 11,0 12,15 8,17' fill='%231f4e8c'/%3E%3Cpolygon points='13,0 17,0 16,17 12,15' fill='%23fe6902'/%3E%3Ccircle cx='12' cy='20' r='8' fill='%23cd7f32' stroke='%238b5a2b'/%3E%3Ctext x='12' y='23.5' font-family='Arial,sans-serif' font-size='9' font-weight='700' text-anchor='middle' fill='%23fff'%3E3%3C/text%3E%3C/svg%3E");
}
.rank-icon-podium {
  width: 16px;
  height: 13px;
  margin-right: 0.35rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Crect x='0' y='10' width='7' height='10' fill='%231f4e8c'/%3E%3Crect x='8.5' y='5' width='7' height='15' fill='%23fe6902'/%3E%3Crect x='17' y='12' width='7' height='8' fill='%231f4e8c'/%3E%3C/svg%3E");
}

.flag {
  width: 20px;
  height: 15px;
  vertical-align: middle;
  object-fit: cover;
}
.flag-lg {
  width: 32px;
  height: 24px;
}

.badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  border-radius: 999px;
  background: #fff3cd;
  color: #8a6500;
}

canvas { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; margin-bottom: 1.5rem; max-height: 320px; }

@media (max-width: 640px) {
  .site-header { flex-direction: column; align-items: stretch; }
  .site-header-bar { justify-content: space-between; }
  .event-header { flex-direction: column; align-items: flex-start; }

  /* Hamburger toggle replaces the always-visible link row from the desktop/tablet
     layout - nav becomes a collapsible full-width dropdown under the brand bar,
     opened/closed via mobileMenuOpen (Eyoc.appRoot, the body's x-data). */
  .menu-toggle { display: flex; }
  .site-header nav {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
  }
  .site-header nav.open {
    display: flex;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
  }
  .site-header nav a {
    padding: 0.65rem 0.25rem 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
  }
  .site-header nav a.active {
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--orange);
    padding-left: calc(0.75rem - 3px);
  }

  main { padding: 1rem 0.75rem 2rem; }

  /* Force cells to their natural width instead of cramming/wrapping text into a
     squeezed column - .table-scroll (always present, see above) then scrolls
     horizontally instead of the page itself overflowing. */
  .results-table td { white-space: nowrap; }

  /* Medal table header: icons alone identify the column on narrow screens,
     so drop the text label and keep just the icon. */
  .rank-label { display: none; }

  .search-box { flex-wrap: wrap; justify-content: stretch; }
  .search-box input,
  .search-box button,
  .country-select:not(.year-select) { width: 100%; }

  /* The home page's two stacked pickers (search box, country select) read as one
     control on a phone-width column rather than two separately-centered ~360px boxes. */
  .hero .search-box { margin-bottom: 0.5rem; }
}