/* 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(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.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; }
  .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 ------------------------------------------------------ */

.bar nav { display: flex; gap: 1rem; }
.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; }

/* =====================================================================
   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;
}

/* ---- 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);
}