/* Atlantic Short Track — results reading, phone first.
   The time is the content. Everything else is context for it. */

:root {
  --ice:    #eef2f5;   /* page ground: ice under arena light */
  --card:   #ffffff;
  --ink:    #12171c;
  --slate:  #5c6873;
  --rule:   #d9e0e6;
  --track:  #1f5fa8;   /* track markers and links */
  --best:   #b01414;   /* personal best — carried over, still means the same */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ice);
  color: var(--ink);
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

/* ---- Shell ---------------------------------------------------------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.1rem;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  color: var(--track);       /* blue: it is a link, to the front page */
  text-decoration: none;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}
@media (min-width: 48rem) { .wordmark { font-size: 1.25rem; } }

.find {
  color: var(--track);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.25rem 1.1rem 4rem;
}

/* Phone first, but the cap is lifted once there is room. A grid of times
   wants width — squeezing it into a reading column forces sideways
   scrolling that the screen size does not require. */
@media (min-width: 48rem) {
  main { max-width: 64rem; padding: 1.75rem 2rem 5rem; }

  /* Identity on the left, personal bests on the right, as in the
     original. Below this width they stay stacked. */
  .top {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 2.5rem;
    align-items: start;
    margin-bottom: 1rem;
  }

  .profile-head { margin-bottom: 0; }
  .profile-head h1 { font-size: 2.75rem; }

  /* Room to breathe once the screen has it. */
  .grid { font-size: 0.9rem; line-height: 1.4; }
  .grid th { padding: 0.5rem 0.7rem; font-size: 0.78rem; }
  .grid td { padding: 0.55rem 0.7rem; }
  .grid td.meet-col,
  .grid th.meet-col { min-width: 17rem; max-width: none; }
  .grid td.meet-col .when { font-size: 0.75rem; }
  /* Each season is its own table; fixed widths make the columns line up
     from one season to the next. */
  .grid { table-layout: fixed; }
  .grid th.meet-col { width: 40%; }
  .chip { padding: 0.1rem 0.4rem; }
}

/* ---- Profile head --------------------------------------------------- */

.profile-head { margin-bottom: 2rem; }

.profile-head h1 {
  margin: 0;
  font-size: clamp(2rem, 9vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.context {
  margin: 0.5rem 0 0;
  color: var(--slate);
  font-size: 0.95rem;
}

.hedge { font-size: 0.85em; }

/* ---- Personal bests -------------------------------------------------
   Grouped by track size, because times across track sizes are not
   comparable. The coloured rule marks that boundary. */

.track {
  margin: 0 0 1.5rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--track);
}

.track h2,
.meets h2 {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--slate);
}

.bests {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.bests li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--rule);
}

.bests li:last-child { border-bottom: 0; }

.what { min-width: 0; }

.distance {
  display: block;
  font-weight: 600;
  font-size: 1rem;
}

.where {
  display: block;
  color: var(--slate);
  font-size: 0.82rem;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.where:hover { color: var(--track); }

/* The signature: the time is the largest thing on the row.
   Not coloured — every time in this block is a personal best, so red
   here would carry no information. Red is reserved for the grid below. */
.time {
  flex: none;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---- Meet history grid ---------------------------------------------
   One row per meet, one column per distance, so a distance can be read
   down its column across seasons. On a phone the grid scrolls sideways
   rather than shrinking — the column comparison is the point of it. */

.history { margin-top: 2.75rem; clear: both; }

.history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.history-head h2 { margin: 0; }
.history-head a { font-size: 0.85rem; }

.legend {
  margin: 0.4rem 0 1.25rem;
  color: var(--slate);
  font-size: 0.78rem;
}

.legend .chip { margin-right: 0.25rem; }
.legend .chip + span { margin-left: 0; }

.track-label {
  margin: 1.75rem 0 0.75rem;
  padding-bottom: 0.3rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--track);
}

.season-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1.1rem 0 0.35rem;
}

.season-head .season { font-weight: 600; font-size: 0.95rem; }
.season-head .club { color: var(--slate); font-size: 0.85rem; }

.grid-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

/* The grid gets its own type scale. Body text is read; a table of times
   is scanned, and at 17px it wastes width that the phone does not have. */
.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  line-height: 1.25;
}

.grid th {
  padding: 0.35rem 0.45rem;
  text-align: right;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--slate);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.grid td {
  padding: 0.4rem 0.45rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  background: var(--card);
}

.grid tr:last-child td { border-bottom: 0; }

/* The meet name stays put while the times scroll past it. */
.grid th.meet-col,
.grid td.meet-col {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  min-width: 8.5rem;
  max-width: 11rem;
  border-right: 1px solid var(--rule);
}

.grid td.meet-col a { text-decoration: none; font-weight: 500; }
.grid td.meet-col .when {
  display: block;
  color: var(--slate);
  font-size: 0.68rem;
}

.figure { text-align: right; white-space: nowrap; }

/* Two strengths of the same idea: a personal best, and a season best. */
.chip {
  display: inline-block;
  padding: 0.05rem 0.28rem;
  border-radius: 3px;
}

.chip.best {
  background: var(--best);
  color: #fff;
  font-weight: 600;
}

.chip.season {
  background: #f6d8d8;
  color: #6d1111;
}

/* ---- Meets ---------------------------------------------------------- */

.meets { margin-top: 2.25rem; }

.rows { list-style: none; margin: 0; padding: 0; }

.rows li { border-bottom: 1px solid var(--rule); }
.rows li:first-child { border-top: 1px solid var(--rule); }

.rows a {
  display: block;
  padding: 0.75rem 0;
  text-decoration: none;
  color: var(--ink);
}

.when {
  display: block;
  color: var(--slate);
  font-size: 0.8rem;
}

.name {
  display: block;
  font-weight: 500;
  color: var(--track);
}

.count {
  display: block;
  color: var(--slate);
  font-size: 0.8rem;
}

.empty { color: var(--slate); }

/* ---- Pages not yet redesigned: keep them legible -------------------- */

h1 { font-size: 1.5rem; letter-spacing: -0.02em; }
h3 { font-size: 0.9rem; color: var(--slate); margin: 1.4rem 0 0.3rem; }
a { color: var(--track); }
.quiet { color: var(--slate); font-size: 0.85rem; }
.path { color: var(--slate); font-size: 0.82rem; word-break: break-all; }
.error { color: var(--best); }

form { display: flex; gap: 0.5rem; margin: 1rem 0 1.5rem; }
input[type="search"] {
  flex: 1; min-width: 0;
  padding: 0.65rem 0.7rem;
  font-size: 17px;              /* stops iOS zooming in on focus */
  font-family: inherit;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
button {
  padding: 0.65rem 1rem;
  font-size: 17px;
  font-family: inherit;
  border: 1px solid var(--track);
  border-radius: 4px;
  background: var(--track);
  color: #fff;
}

table { width: 100%; border-collapse: collapse; background: var(--card); }
td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--rule);
}
td:last-child { text-align: right; }
.num { white-space: nowrap; }

dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.25rem; }
dt { color: var(--slate); }
dd { margin: 0; }

@media (min-width: 34rem) {
  .rows a {
    display: grid;
    grid-template-columns: 8.5rem 1fr auto;
    align-items: baseline;
    gap: 0.75rem;
  }
  .when, .name, .count { display: inline; }
}

/* ---- Navigation ------------------------------------------------------ */

/* The name and the links share one row while they fit. When they don't,
   the links drop to a row of their own and wrap, rather than running
   off the right edge of a phone. */
.bar { flex-wrap: wrap; row-gap: 0.4rem; }
.wordmark { white-space: nowrap; }
.bar nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }

/* On phones the links are one row under the name, swiped sideways if
   they don't all fit, instead of wrapping onto a third line. */
@media (max-width: 47.99rem) {
  .bar nav {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .bar nav::-webkit-scrollbar { display: none; }
  .bar nav a { white-space: nowrap; }
}
.bar nav a {
  color: var(--track);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
}

.lede { color: var(--slate); font-size: 0.9rem; margin: 0.4rem 0 1.25rem; }

/* ---- Filters ---------------------------------------------------------
   Filters are form controls that write to the address, so any filtered
   view is a link that can be shared or bookmarked. */

.filters {
  display: block;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.85rem;
  margin: 0 0 1.5rem;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem 0.8rem;
}

.field { display: block; min-width: 0; }
.field.grow { grid-column: 1 / -1; }

.field span {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 0.15rem;
}

.field select,
.field input[type="search"] {
  width: 100%;
  padding: 0.45rem 0.5rem;
  font-size: 16px;              /* below 16px iOS zooms on focus */
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.ages { margin-top: 0.8rem; }

.ages summary {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
}

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 0.5rem;
}

.checks label {
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.85rem;
}

.actions a { font-size: 0.85rem; }

.filters button {
  padding: 0.45rem 1.1rem;
  font-size: 0.9rem;
}

/* ---- Leaderboard table ----------------------------------------------- */

.board .rank-col {
  min-width: 2rem;
  text-align: right;
  color: var(--slate);
  padding-right: 0.3rem;
}

.board td.meet-col { min-width: 9.5rem; }
.board .strong { font-weight: 600; }

/* Club, age and meet are context. On a phone they are dropped rather
   than pushed off the edge, so the ranking stays readable without
   scrolling. They return once there is room. */
.board .wide { display: none; }

@media (min-width: 48rem) {
  .board .wide { display: table-cell; }
  .board td.meet-col { min-width: 12rem; }
}

/* ---- Personal bests --------------------------------------------------
   One tile per distance, grouped by track size. The time is the figure;
   the distance labels it and the date says when it was set. Tiles wrap,
   so a skater with three distances and one with nine both look right. */

.pbs h2 { margin-top: 0; }

.pb-group { margin-bottom: 1.1rem; }

.pb-track {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--slate);
}

.pb-tiles {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

.pb-tiles li { flex: 0 0 auto; }

.pb-tiles a {
  display: block;
  min-width: 5.4rem;
  padding: 0.4rem 0.6rem 0.45rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
}

.pb-tiles a:hover {
  border-color: var(--track);
}

.pb-dist {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--slate);
}

.pb-time {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.pb-when {
  display: block;
  font-size: 0.68rem;
  color: var(--slate);
}

/* Used on the meet page's fastest-of-each-distance line. */
.pb-line { margin: 0 0 0.6rem; line-height: 2; }
.pb-entry { display: inline-block; white-space: nowrap; }
.pb-who { color: var(--track); font-size: 0.82rem; margin-left: 0.25rem;
          text-decoration: none; }
.pb-sep { color: var(--rule); margin: 0 0.45rem; }

/* ---- Meet page ------------------------------------------------------- */

.clubs, .divisions, .races { margin-top: 2rem; }

.tally { list-style: none; margin: 0; padding: 0; }

.tally li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9rem;
}

.tally li:first-child { border-top: 1px solid var(--rule); }
.tally-count { color: var(--slate); }

.division { margin-bottom: 2rem; }

.race-label {
  margin: 1.25rem 0 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate);
}

.races summary {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--track);
  cursor: pointer;
  padding: 0.5rem 0;
}

.races .grid { border: 1px solid var(--rule); border-radius: 4px; }

td.nowrap { white-space: nowrap; }
.meet-summary { margin-top: 1.25rem; }
.meet-summary p { margin: 0.5rem 0 0; }
.races details.distance { border-top: 1px solid var(--rule); }
.races details.distance:last-child { border-bottom: 1px solid var(--rule); }
.races details.distance[open] { padding-bottom: 1rem; }
/* Every race table the same widths, so columns line up down the page. */
.races table.data { table-layout: fixed; width: 100%; }
.races table.data .col-rank { width: 2.5rem; }
.races table.data .col-num { width: 6rem; }
/* Division standings: rows past the top few show when the drop-down
   below the table is open. */
.division tr.extra { display: none; }
.division:has(details.more[open]) tr.extra { display: table-row; }
details.more .if-open { display: none; }
details.more[open] .if-open { display: inline; }
details.more[open] .if-closed { display: none; }
details.more > summary {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--track);
  cursor: pointer;
  padding: 0.5rem 0;
}

/* =====================================================================
   Data tables
   A single set of conventions, so every table on the site behaves the
   same way. Three column kinds:
     .col-name  the thing the row is about, left, links
     .col-text  supporting words, left
     .col-num   anything countable, right, digits aligned
   Numbers right-align on their last digit so columns compare down the
   page. Labels stay left so the eye finds the row.
   ===================================================================== */

.scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  line-height: 1.35;
}

.data th {
  padding: 0.55rem 0.6rem;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--slate);
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
  background: var(--card);
}

.data td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.data tbody tr:last-child td { border-bottom: 0; }
.data tbody tr:hover td { background: #f7f9fb; }

.data .col-name,
.data .col-text { text-align: left; }

.data .col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data .col-rank {
  text-align: right;
  width: 2.5rem;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

/* The row's subject gets the width it needs and may wrap; nothing else
   does, so the numeric columns stay on one line each. */
.data .col-name {
  white-space: normal;
  min-width: 10rem;
}

.data .col-name a { text-decoration: none; font-weight: 500; }
.data .col-text { color: var(--slate); }
.data .strong { font-weight: 600; color: var(--ink); }

.data .gain { color: #16704a; }
.data .loss { color: var(--best); }

/* Secondary columns are dropped on a phone rather than pushed off the
   edge, so the table stays readable without scrolling. */
.data .wide { display: none; }

@media (min-width: 48rem) {
  .data .wide { display: table-cell; }
  .data { font-size: 0.88rem; }
  .data th { font-size: 0.75rem; padding: 0.6rem 0.75rem; }
  .data td { padding: 0.55rem 0.75rem; }
}

/* ---- Section headings with a control beside them --------------------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

section { margin-top: 2.25rem; }
section > h2 { margin-bottom: 0.5rem; }

/* ---- Switches: season and track pickers ------------------------------
   These are links rather than form controls, so each one is an address
   that can be shared. */

.switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1.25rem;
}

.switch a {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--card);
  color: var(--slate);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
}

.switch a.on {
  background: var(--track);
  border-color: var(--track);
  color: #fff;
}

.switch.small { margin: 0; }

/* ---- Headline figures ------------------------------------------------ */

.figures {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 0 0 1.5rem;
  padding: 0;
}

.figures div { display: block; }

.figures dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--slate);
}

.figures dd {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---- Sortable headings -----------------------------------------------
   Headings are controls, so they read as controls: darker than the body
   text they label, and carrying an arrow once they are the sorted one. */

.data th {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.75rem;
  border-bottom: 2px solid var(--ink);
}

.data th.sortable {
  cursor: pointer;
  user-select: none;
}

.data th.sortable:hover { color: var(--track); }

.data th.sortable:focus-visible {
  outline: 2px solid var(--track);
  outline-offset: -2px;
}

.data th[aria-sort] { color: var(--track); }

.data th[aria-sort="ascending"]::after { content: " \2191"; }
.data th[aria-sort="descending"]::after { content: " \2193"; }

@media (min-width: 48rem) {
  .data th { font-size: 0.78rem; }
}

/* A second line under a name: province, or a meet's date. */
.data .sub {
  display: block;
  color: var(--slate);
  font-size: 0.72rem;
  font-weight: 400;
}

/* ---- Progression grid ------------------------------------------------
   One faceted grid, distances down and seasons across, matching how the
   original laid it out. Each row shares one times axis so a distance can
   be read straight across seasons; each column shares one dates axis. */

.progression { margin-top: 2.5rem; }

.chart-scroll { padding: 0.75rem 0.5rem 0.25rem; }

.facet-grid {
  display: block;
  min-width: 30rem;      /* below this it scrolls rather than squashes */
  width: 100%;
  height: auto;
}

.facet-frame {
  fill: none;
  stroke: var(--rule);
  stroke-width: 0.7;
}

.facet-gridline {
  stroke: var(--rule);
  stroke-width: 0.4;
  opacity: 0.7;
}

.facet-tick,
.facet-season,
.facet-distance {
  font-family: Archivo, system-ui, sans-serif;
  fill: var(--slate);
}

.facet-tick { font-size: 6.5px; }
.facet-tick.end { text-anchor: end; }

.facet-season {
  font-size: 8px;
  font-weight: 700;
  fill: var(--ink);
  text-anchor: middle;
}

.facet-distance {
  font-size: 8px;
  font-weight: 700;
  fill: var(--ink);
  text-anchor: middle;
}

/* ---- Results per meet ------------------------------------------------
   The database page's bar chart. Same axis and gridline styles as the
   progression grid; bars are links, so hover and click need no script. */

.meet-bars { margin-top: 2.5rem; }

.bars-chart {
  display: block;
  min-width: 30rem;      /* below this it scrolls rather than squashes */
  width: 100%;
  height: auto;
}

.bars-chart .bar { fill: var(--track); }
.bars-chart a:hover .bar,
.bars-chart a:focus .bar { fill: var(--ink); }

.bars-axis {
  stroke: var(--slate);
  stroke-width: 0.6;
}

.season-divider {
  stroke: var(--slate);
  stroke-width: 0.4;
  stroke-dasharray: 1.5 1.5;
}

/* ---- Information page ------------------------------------------------ */

.prose { max-width: 34rem; }
.prose h2 { font-size: 1.1rem; margin: 1.75rem 0 0.4rem; }
.prose p { margin: 0 0 0.9rem; }
.prose ul, .prose ol { margin: 0 0 0.9rem; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.3rem; }

/* ---- Participation grid ----------------------------------------------
   A table, not a picture: the numbers stay selectable and the column
   headings stay sortable. Colour carries the same information a second
   time, for reading at a glance rather than a value at a time. */

.participation { margin-top: 2.5rem; }

.heat .cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 2.2rem;
  border-right: 1px solid #fff;
  font-weight: 600;
}

.heat .heat-head {
  vertical-align: bottom;
  height: 6.5rem;
  padding: 0.3rem 0.15rem;
  min-width: 2.2rem;
}

/* Meet names are long and columns are narrow, so the headings turn. */
.heat .heat-head span {
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  text-align: left;
  font-weight: 700;
}

.legend {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
}

/* A legend written as a sentence rather than a row of chips. */
.legend.prose { display: block; line-height: 1.6; font-size: 0.88rem; }
.legend.prose .who { display: inline-block; margin-right: 1.75rem; }

.legend .chip {
  min-width: 1.6rem;
  text-align: center;
  font-weight: 600;
}

/* ---- Scope notice ----------------------------------------------------
   When a page is showing less than everything, it says so where it can
   be seen, with one click to widen. Filtering people out quietly is how
   a parent concludes their child is missing. */

.scope {
  margin: 0 0 1rem;
  padding: 0.5rem 0.7rem;
  background: #eaf1f7;
  border-left: 3px solid var(--track);
  border-radius: 0 3px 3px 0;
  font-size: 0.85rem;
  color: var(--ink);
}

.scope a { margin-left: 0.35rem; font-weight: 500; }

.sub-head {
  margin: 1.5rem 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--slate);
}

/* ---- Time cells that name their meet ---------------------------------
   The meet is shown under the time rather than only in hover text, since
   a phone has no hover. Kept small so the time still reads as the value. */

.timecell { line-height: 1.25; }

.timecell a { text-decoration: none; font-weight: 600; }

.timecell .at {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--slate);
  white-space: nowrap;
}

.field input[type="date"] {
  width: 100%;
  padding: 0.45rem 0.5rem;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
}

/* ---- Canada Games ----------------------------------------------------
   Named places and alternates are marked, because here the ranking does
   determine them — the bulletin says the top five are named. */

.caveat {
  margin: 0 0 1.25rem;
  padding: 0.5rem 0.7rem;
  background: #fdf4e7;
  border-left: 3px solid #b8860b;
  border-radius: 0 3px 3px 0;
  font-size: 0.82rem;
}

/* Status is carried by a word as well as by colour, so it survives being
   printed, and doesn't depend on telling two blues apart. */
.tag {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}

.tag.team      { background: #1f5fa8; color: #fff; }
.tag.alternate { background: #cfe0f0; color: #12406b; }
.tag.ranked    { background: #eceff2; color: var(--slate); }
.tag.close     { background: #e3f1e8; color: #16704a; }
.tag.short     { background: #f2e6e6; color: #8c2b2b; }
.tag.waiting   { background: #eceff2; color: var(--slate); }

.data tr.row-team td { background: #f4f8fc; }
.data tr.row-team .col-rank { font-weight: 700; color: var(--ink); }
.data tr.row-short td,
.data tr.row-waiting td { color: var(--slate); }

.data .col-name .tag { margin-left: 0.4rem; }

.off { color: var(--best); font-size: 0.72rem; margin-left: 0.2rem; }

/* A time, with the meet it was set at underneath. */
.at-meet { text-decoration: none; color: inherit; display: block; }
.at-time { display: block; font-weight: 600; }
.at-where {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--slate);
}
.at-meet:hover .at-time, details.at > summary:hover .at-time { color: var(--track); }

/* A long track venue nobody has classified yet. */
.lt-flag { color: var(--best); }

/* ---- Tables that become cards on a phone -----------------------------
   Eight columns will never fit a phone, and shrinking the type is how
   the old app made it unreadable. Below this width each row becomes a
   block: the name across the top, the values beneath with their own
   labels. Nothing is hidden and nothing scrolls sideways. */

@media (max-width: 47.99rem) {
  .cards,
  .cards tbody,
  .cards tr,
  .cards td { display: block; width: auto; }

  .cards thead { display: none; }

  /* Two columns: the rank, then everything else stacked beside it.
     Absolute positioning put the number on top of long names. */
  .cards tr {
    display: grid;
    grid-template-columns: 2.8rem 1fr;
    column-gap: 0.9rem;
    align-items: baseline;
    padding: 0.6rem 0.7rem 0.7rem 0.5rem;
    border-bottom: 1px solid var(--rule);
  }

  .cards tr:last-child { border-bottom: 0; }

  .cards td.col-rank {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    border: 0;
    text-align: right;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 700;
    color: var(--slate);
  }

  .cards td:not(.col-rank) { grid-column: 2; }

  .cards td {
    padding: 0.15rem 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }

  .cards td.col-name {
    font-size: 1rem;
    margin-bottom: 0.35rem;
  }

  /* Values carry their own label, since the heading row is gone. */
  .cards td[data-label]:not(.col-name)::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 5rem;
    color: var(--slate);
    font-size: 0.75rem;
    font-weight: 600;
  }

  .cards td[data-label]:not(.col-name) {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
  }

  .cards td:empty { display: none; }

  .cards .at-meet, .cards details.at > summary { display: flex; align-items: baseline; gap: 0.4rem; }
  .cards .at-time, .cards .at-where { display: inline; }
  .cards details.at .at-more { max-width: none; }

  /* Nothing to scroll once the rows are blocks. */
  .scroll:has(.cards) { overflow-x: visible; }
}


/* ---- Front door ------------------------------------------------------
   Two ways in, because the site does two quite different jobs and most
   visitors know which one they came for. */

.doors {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

@media (min-width: 42rem) {
  .doors { grid-template-columns: 1fr 1fr; }
}

.door {
  display: block;
  padding: 1.25rem 1.25rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}

.door:hover { border-color: var(--track); }

.door h2 {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.door p {
  margin: 0 0 0.9rem;
  color: var(--slate);
  font-size: 0.9rem;
}

.door-go {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--track);
}

.door-note { margin-top: 1.5rem; }

.tag.undeclared { background: #efe7f3; color: #5b3a6b; }
.data tr.row-undeclared td { color: var(--slate); }
.caveat ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.caveat li { margin-bottom: 0.15rem; }

.discipline {
  margin: 2.5rem 0 0.5rem;
  padding-bottom: 0.3rem;
  font-size: 1.15rem;
  border-bottom: 2px solid var(--ink);
}

.discipline:first-of-type { margin-top: 1.5rem; }

/* ---- Standings: status by colour on the name ------------------------- */

.who { text-decoration: none; font-weight: 600; }
.who.met      { color: #16704a; }
.who.short    { color: #b01414; }
.who.waiting  { color: var(--slate); }
.who.undeclared { color: var(--slate); font-style: italic; }
.who:hover { text-decoration: underline; }

.legend .who { font-weight: 600; }


/* How far behind the fastest ranking time. */
.behind {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--slate);
}

/* An organisation's logo under a page title. Smaller on a phone, where
   the title itself already takes three lines. */
.profile-head .org-logo {
  display: block;
  width: 160px;
  height: auto;
  margin: 0.5rem 0 0.2rem;
}

@media (max-width: 600px) {
  .profile-head .org-logo { width: 90px; margin-top: 0.3rem; }
}

/* Issues folded behind a button. The count stays visible; the detail
   opens on demand. */
details.issues { margin: 0.6rem 0 1rem; }
details.issues > summary {
  display: inline-block;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  user-select: none;
}
details.issues > summary::-webkit-details-marker { display: none; }
details.issues[open] > summary { margin-bottom: 0.5rem; }

/* A time with its date underneath; the meet name opens on tap. Keeps the
   table narrow: the meet name is provenance, read when a time is
   questioned, not when the standings are. */
details.at > summary { list-style: none; cursor: pointer; }
details.at > summary::-webkit-details-marker { display: none; }
details.at .at-more {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: left;
  max-width: 12rem;
  color: var(--slate);
}

/* ---- Front page ------------------------------------------------------
   What the site is, the totals and a search, then the club map; below,
   the latest meet and this season; then three ways in. Phone first:
   everything stacks, and the map and charts scale to the column. */

.hero { display: grid; gap: 1.25rem; }
/* The logos share the row in proportion to their shapes (set on the
   element from the files), so all are one height and together fill the
   width. */
.logo-row { display: grid; align-items: center; gap: 0.5rem; margin: 0 0 1.25rem; }
@media (min-width: 48rem) { .logo-row { gap: 1rem; } }
.logo-row img {
  display: block; width: 100%; height: auto; box-sizing: border-box;
  background: #fff; border-radius: 4px; padding: 3px;   /* one tile each, so a
  logo with a white background (Nunavut) matches the rest */
}
@media (min-width: 48rem) { .logo-row img { padding: 6px; border-radius: 6px; } }
.logo-tile { position: relative; display: block; min-width: 0; }
/* Until its association gives permission (HOME_LOGOS_APPROVED), a
   logo is greyed out under its short name in block letters. */
.logo-tile.pending img { filter: grayscale(1); opacity: 0.25; }
.logo-short {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(0.9rem, 4.2vw, 2.4rem);
}
/* One line at every width: the size follows the screen, capped. */
.hero-head {
  font-size: clamp(1.2rem, 6.2vw, 3.8rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  color: var(--track);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.hero-sub { color: var(--slate); margin: 0 0 1.25rem; }
.hero-figures { gap: 1.5rem; margin-bottom: 0.25rem; }
.hero-note { margin: 0; }
.hero-search { display: block; margin: 0 0 0.5rem; }
.season-choice { display: block; margin: 1rem 0 1.25rem; }
.season-choice select { flex: 1; min-width: 0; font: inherit; padding: 0.55rem 0.6rem;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--card); color: var(--ink); }
.season-choice .quiet { margin: 0.3rem 0 0; }
.hero-label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.hero-search-row { display: flex; gap: 0.5rem; }
.hero-search-row input { flex: 1; min-width: 0; }

.hero-map { margin: 0; min-width: 0; }
.hero-map figcaption { margin-top: 0.4rem; }
.club-map {
  display: block;
  width: 100%;
  height: auto;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.map-land path { fill: #dbe3ea; stroke: var(--slate); stroke-width: 0.6; stroke-linejoin: round; }
.map-inset { fill: var(--ice); stroke: var(--rule); }
.map-inset-label { font-size: 8.5px; fill: var(--slate); letter-spacing: 0.03em; }
.map-dot { fill: var(--track); fill-opacity: 0.8; stroke: var(--card); stroke-width: 1; }
a:hover .map-dot, a:focus .map-dot { fill: var(--ink); }
.map-label { font-size: 12px; fill: var(--ink); }
.map-label a .map-name { fill: var(--track); font-weight: 600; }
.map-count { fill: var(--slate); font-size: 10.5px; }

.home-cards { display: grid; gap: 1rem; margin-top: 2rem; }
/* The season's figures are a short bar across the top; below it,
   personal bests then recent meets (side by side on a wide screen). */
.card-pbs { order: 2; }
.card-meets { order: 3; }
.card-season {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 2rem; row-gap: 0.3rem;
  padding: 0.65rem 1.1rem;
}
.card-season .card-label { margin: 0; }
.card-season .card-figures { margin: 0; gap: 0.4rem 1.5rem; }
.card-season .card-figures div { display: flex; align-items: baseline; gap: 0.4rem; }
.card-season .card-figures dd { font-size: 1.25rem; }
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  min-width: 0;
}
.card-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--slate);
  margin: 0 0 0.4rem;
}
.card-title { font-size: 1.15rem; margin: 0 0 0.2rem; }
.card-count { font-weight: 600; margin: 0.9rem 0 0.3rem; }
.card-figures { gap: 1.5rem; margin: 0.6rem 0 1rem; }
.card-sub { font-size: 0.9rem; margin: 0.5rem 0; }

.pb-list { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.pb-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--rule);
}
.pb-list .pb-what { margin-left: auto; white-space: nowrap; font-weight: 600; }
.pb-list li:nth-child(4) { display: none; }   /* three on phones */
.pb-picks li:nth-child(2) { display: none; }  /* picks: one on phones */
.pb-track-head { font-size: 1rem; margin: 1rem 0 0.2rem; padding-top: 0.6rem; border-top: 2px solid var(--rule); }
.pb-track-head:first-of-type { border-top: 0; padding-top: 0; margin-top: 0.3rem; }
.pb-note { margin: -0.2rem 0 0.6rem; }
.pb-sex { font-size: 0.78rem; font-weight: 700; color: var(--slate); margin: 0.5rem 0 0; text-transform: uppercase; letter-spacing: 0.06em; }
.pb-picks .pb-when { flex-basis: 100%; }
.meet-list { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.meet-list li { padding: 0.45rem 0; border-bottom: 1px solid var(--rule); }
.meet-list .quiet { display: block; }
.hero-controls { display: grid; gap: 1rem; min-width: 0; }
.hero-controls .hero-search, .hero-controls .season-choice { margin: 0; }


.doors { display: grid; gap: 1rem; margin-top: 2rem; }
.door {
  display: block;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--ink);
}
.door strong { display: block; color: var(--track); font-size: 1.1rem; margin-bottom: 0.25rem; }
.door span { color: var(--slate); font-size: 0.9rem; }
.door:hover, .door:focus { border-color: var(--track); }

.site-foot { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.search-head { font-size: 1rem; margin: 1.25rem 0 0.4rem; }

@media (min-width: 48rem) {
  .hero-controls { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .home-cards { grid-template-columns: 1fr 1fr; align-items: stretch; }   /* side-by-side cards share a height */
  .pb-list li:nth-child(4) { display: flex; }
  .pb-picks li:nth-child(2) { display: flex; }
  .card-season { grid-column: 1 / -1; }
  .doors { grid-template-columns: repeat(3, 1fr); }
}

/* Leaderboard split: women, men, not recorded. */
.board-part { margin-top: 1.5rem; }
.board-part h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }