/* CANPL results pages (/results/…): meet lists, the meet search, one meet's tables and how they
   fit each width. Loaded after site.css (the layout's $styles), mobile first, no inline styles
   or scripts anywhere (CSP 'self').

   A meet's results table (templates/results/meet.php) has its columns in a fixed order, and
   columns are hidden by position, so the 867 rows of a big meet carry no per-cell classes:
     1 place, 2 name, 3 province, 4 age, 5 bodyweight, 6 class, then per lift its three attempts
     (on a table marked .att) and its best, then total, then points (on a table marked .pts;
     .nopts: no points column). On an .att table the bests are columns 10, 14 and 18 (4n+10).
   What shows (the meet page is $wide: a card up to 1400 px):
     below 760 px   place, name, class, total, points ("compact", a little tighter below 360 px);
                    the toggle: "Show all columns"
     760–1279 px    everything but the attempts; the toggle: "Show attempts" (.has-attempts only)
     1280 px up     everything (#1511's widest table fits the 1,200 px card at 1280); no toggle
   The toggle is one checkbox (#all-columns, .cols-toggle) placed before .meet-results; ticked,
   every column shows. The name column stays in view (sticky) when a table scrolls sideways,
   and so does a group's heading. site.css gives .table-wrap its scroll shadows and highlights
   tr:target (a link to …#r{id}); stripes here are translucent (--row-alt) and set --row-tint,
   which the sticky name cell paints over its white. */

/* ---------------------------------------------------------------- search */
.meet-search { margin: 0 0 1.5em; }
.meet-search label { display: block; margin: 0 0 4px; }
.search-row { display: flex; gap: 8px; max-width: 36em; }
.search-row input[type="search"] { flex: 1 1 auto; min-width: 0; }
.search-row button { flex: 0 0 auto; }
.search-aside { margin: -.75em 0 1.5em; }
.search-results { margin-bottom: 1.5em; }

/* ---------------------------------------------------------------- lists */
.meet-facts { color: var(--muted); font-size: .9375rem; }
.tiles li { padding: 6px 0; }
.tiles a { font-weight: 600; }
.jump ul {
  display: flex; flex-wrap: wrap; gap: 0 16px;
  margin: 0 0 1em; padding: 0; list-style: none;
}
.jump li { padding: 2px 0; }
.jump a { display: inline-block; padding: 8px 0; }
.year-list {
  display: flex; flex-wrap: wrap; gap: 0 4px;
  margin: 0 0 1em; padding: 0; list-style: none;
}
.year-list a { display: inline-block; min-width: 44px; padding: 10px 6px; text-align: center; }
.province-list {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px;
  margin: 0 0 1em; padding: 0; list-style: none;
}
.province-list li { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1px solid var(--line); }
.province-list a { font-weight: 600; }
@media (min-width: 600px) {
  .province-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.year-pager ul {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  margin: 0 0 1em; padding: 0; list-style: none;
}
.year-pager a { display: inline-block; padding: 10px 0; }

/* ---------------------------------------------------------------- one meet: header and contents */
.meet-head .meta { color: var(--muted); }
.meet-actions { margin: 0 0 1em; }
.entered-as ul { margin: .25em 0 0; padding-left: 1.2em; }
.entered-as summary { font-weight: 400; }
/* Contents: the sections in a wrapping row; a count never wraps away from its section (C10). */
.contents li { white-space: nowrap; }
h2 .count {
  font-size: .875rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted);
  white-space: nowrap;
}
.results-section { margin: 0 0 1em; }
/* A line under a section's heading that explains its "≈", "—" or why it is on its own. */
.section-note { margin: -.25em 0 .75em; font-size: .875rem; color: var(--muted); }

/* ---------------------------------------------------------------- one meet: tables */
.results-table { font-size: .875rem; }
.results-table th, .results-table td { padding: 5px 6px; }
.results-table tbody th { font-weight: 600; white-space: normal; overflow-wrap: anywhere; min-width: 8em; }
.results-table tbody th a { font-weight: 600; }
.results-table .total { font-weight: 700; }
/* Numbers: bodyweight (column 5) and everything after it, right-aligned by position. */
.results-table td:nth-child(n+5), .results-table thead th:nth-child(n+5) { text-align: right; font-variant-numeric: tabular-nums; }
/* Stripes: the results rows alternate from each group's heading row (site.css counts that row). */
.results-table tbody tr:nth-child(even) { background: transparent; --row-tint: transparent; }
.results-table tbody tr:nth-child(odd):not(.group-head) { background: var(--row-alt); --row-tint: var(--row-alt); }
.results-table tbody + tbody tr.group-head th { padding-top: 16px; }
.results-table tr.group-head th { white-space: normal; }
/* A group's heading stays at the left while a wide table scrolls. */
.results-table tr.group-head th > span { display: inline-block; position: sticky; left: 6px; }

/* The name column stays in view when the table scrolls sideways (C7): opaque, white under the
   row's tint (stripe or :target yellow), black in the head, a rule on its right. */
.results-table thead th:nth-child(2),
.results-table tbody tr:not(.group-head) > th {
  position: sticky; left: 0; z-index: 1;
  background-color: var(--card);
  background-image: linear-gradient(var(--row-tint, transparent), var(--row-tint, transparent));
  box-shadow: inset -1px 0 0 var(--line);
}
.results-table thead th:nth-child(2) { background: #000; box-shadow: inset -1px 0 0 #444; z-index: 2; }
.results-table tbody tr:target:not(.group-head) > th { background: var(--target); }

/* The toggle (#all-columns, before .meet-results): below 760 px "Show all columns"; 760–1279 px
   "Show attempts", on a meet with attempts only; from 1280 px nothing is hidden, so no toggle. */
.cols-toggle { width: 22px; height: 22px; margin: 0 8px 0 0; vertical-align: middle; accent-color: var(--red-text); }
.cols-toggle-label { display: inline-block; padding: 11px 0; font-weight: 600; cursor: pointer; }
.cols-toggle:focus-visible + .cols-toggle-label { outline: 3px solid var(--red); outline-offset: 2px; }
.cols-toggle-label .cols-mid { display: none; }
@media (min-width: 760px) {
  .cols-toggle:not(.has-attempts), .cols-toggle:not(.has-attempts) + .cols-toggle-label { display: none; }
  .cols-toggle-label .cols-phone { display: none; }
  .cols-toggle-label .cols-mid { display: inline; }
}
@media (min-width: 1280px) {
  .cols-toggle, .cols-toggle-label { display: none; }
}

/* Compact (below 760 px): place, name, class, total and points. */
@media (max-width: 759.98px) {
  .cols-toggle:not(:checked) ~ .meet-results .results-table td:nth-child(n+3):nth-child(-n+5),
  .cols-toggle:not(:checked) ~ .meet-results .results-table thead th:nth-child(n+3):nth-child(-n+5),
  .cols-toggle:not(:checked) ~ .meet-results .results-table.pts td:nth-child(n+7):nth-last-child(n+3),
  .cols-toggle:not(:checked) ~ .meet-results .results-table.pts thead th:nth-child(n+7):nth-last-child(n+3),
  .cols-toggle:not(:checked) ~ .meet-results .results-table.nopts td:nth-child(n+7):nth-last-child(n+2),
  .cols-toggle:not(:checked) ~ .meet-results .results-table.nopts thead th:nth-child(n+7):nth-last-child(n+2) {
    display: none;
  }
  .results-table th, .results-table td { padding: 5px 4px; }
  .results-table tbody th { min-width: 6em; }
  .results-table tr.group-head th > span { left: 4px; }
}

/* The smallest phones (320 px): a little tighter still. */
@media (max-width: 359.98px) {
  .results-table { font-size: .8125rem; }
  .results-table th, .results-table td { padding: 5px 3px; }
  .results-table tbody th { min-width: 5.5em; }
}

/* 760–1279 px: everything but the attempts (the bests stay), until "Show attempts" is ticked. */
@media (min-width: 760px) and (max-width: 1279.98px) {
  .results-table tbody th { min-width: 7em; }
  .cols-toggle:not(:checked) ~ .meet-results .results-table.att.pts td:nth-child(n+7):nth-last-child(n+3):not(:nth-child(4n+10)),
  .cols-toggle:not(:checked) ~ .meet-results .results-table.att.pts thead th:nth-child(n+7):nth-last-child(n+3):not(:nth-child(4n+10)),
  .cols-toggle:not(:checked) ~ .meet-results .results-table.att.nopts td:nth-child(n+7):nth-last-child(n+2):not(:nth-child(4n+10)),
  .cols-toggle:not(:checked) ~ .meet-results .results-table.att.nopts thead th:nth-child(n+7):nth-last-child(n+2):not(:nth-child(4n+10)) {
    display: none;
  }
}

/* ---------------------------------------------------------------- notes */
.legend { margin-top: 1.5em; font-size: .875rem; color: var(--muted); }
.legend h2 { font-size: .9375rem; }
.legend ul { margin: 0; padding-left: 1.2em; }
.legend li { margin: 0 0 .35em; }

@media print {
  .cols-toggle, .cols-toggle-label, .jump, .meet-search, .search-aside, .meet-actions { display: none; }
  .results-table td, .results-table th { display: table-cell !important; }
  .results-table thead th:nth-child(2), .results-table tbody tr:not(.group-head) > th { position: static; background: none; box-shadow: none; }
}