/* CANPL data pages: /lifters/ (the search and the profiles). Loaded after site.css, whose tokens,
   tables, .table-wrap (scroll cue, position: relative), .cols-optional / .show-cols ("Show all
   columns" below 640 px), .sticky-first, tr:target, .pager, .tag, .status, .att-* and .derived it
   uses. Mobile first; no inline styles anywhere (CSP 'self'), no JavaScript: the toggles are
   checkboxes. */

/* ---------------------------------------------------------------- search form */
.lifter-search { margin: 0 0 1.25em; }
.search-label { display: block; margin: 0 0 4px; }
.search-row { display: flex; gap: 8px; max-width: 40em; }
.search-row input[type="search"] { flex: 1 1 auto; min-width: 0; font-size: 1.125rem; }
.search-row button { flex: 0 0 auto; }
.search-hint { margin: 6px 0 0; }
.filters { margin: 12px 0 0; border-top: 1px solid var(--line); padding-top: 4px; }
.filters .fields { margin-top: 8px; }
.filters select, .filters input[type="text"] { width: 100%; }
.filter-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 4px 0 0; }
/* The closed panel's summary names the filters set (C6). */
.filter-summary { font-weight: 400; color: var(--text); }

/* The list a search opens at (the form's action and the list links end in #found). */
#found { scroll-margin-top: 8px; }

/* ---------------------------------------------------------------- lists */
.search-tips ul { padding-left: 1.2em; margin: 0; }
.search-tips li { margin: 0 0 .4em; }
.result-tools { margin: 0 0 .5em; }
.sort-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 .5em; }
.sort-links ul { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.sort-links a, .sort-links [aria-current] { display: inline-block; padding: 6px 0; }
.sort-links [aria-current] { font-weight: 700; }
.people-table .name, .results-table .name { white-space: normal; min-width: 6.5em; }
.results-table .meet, .history-table .meet { white-space: normal; min-width: 8em; }
.history-table tbody th, .results-table tbody th.name { font-weight: 400; }
.results-table .name a, .people-table .name a { font-weight: 600; }
.pts-label { font-size: .75rem; color: var(--muted); }
.legend-line { margin-top: -.5em; }
.pager-nav { margin: 0; }
.pager .gap { border: 0; min-width: 0; padding-left: 2px; padding-right: 2px; }

/* A meet cell's second line on a phone (C3): the date and the event, whose own columns are
   .cols-optional there. Gone from 640 px, and when "Show all columns" brings the columns back. */
.phone-only { display: block; }
.sub { font-size: .8125rem; color: var(--muted); margin-top: 2px; }
.show-cols:checked ~ .table-wrap .phone-only { display: none; }

/* Phones: tighter cells, so the key columns fit a 375 px screen without scrolling. */
@media (max-width: 639px) {
  .people-table th, .people-table td,
  .results-table th, .results-table td,
  .history-table th, .history-table td,
  .bests-table th, .bests-table td { padding-left: 6px; padding-right: 6px; }
  .results-table .place .status, .history-table .place .status { font-size: .8125rem; }
  /* A long name or meet word ("Jeyabalasingam", "Championships") may break rather than push
     the place off the screen. */
  .results-table .name, .results-table .meet, .history-table .meet, .people-table .name { overflow-wrap: anywhere; }
}
@media (min-width: 640px) {
  .phone-only { display: none; }
  .people-table .name { min-width: 11em; }
  .results-table .name { min-width: 7.5em; }
  .results-table .meet { min-width: 9em; }
  .history-table .meet { min-width: 14em; }
  /* C1: every column of the results list fits a 1280 px screen (the Total, Points and Place at
     its end were cut off): narrower cells, and the event may wrap. */
  .results-table th, .results-table td { padding-left: 6px; padding-right: 6px; }
  .results-table td.event, .results-table td.age { white-space: normal; min-width: 4.5em; }
}

/* ---------------------------------------------------------------- profile */
.profile-head dl.facts { margin-bottom: 0; }
.bests-table td { white-space: nowrap; }
.bests-table th { white-space: normal; }   /* "GL points (recalculated)", "Equipped Powerlifting" wrap on a phone */
.best-year { font-size: .75rem; color: var(--muted); }
.history h2 .count { font-weight: 600; letter-spacing: 0; }

/* The attempts toggle: the columns marked .att show only while the box is ticked. */
.att-toggle { width: 22px; height: 22px; margin: 0 6px 0 0; vertical-align: middle; accent-color: var(--red-text); }
.att-toggle-label { display: inline-block; padding: 11px 0; font-weight: 600; vertical-align: middle; cursor: pointer; }
.att-toggle:focus-visible + .att-toggle-label { outline: 3px solid var(--red); outline-offset: 2px; }
.att-toggle:not(:checked) ~ .table-wrap .att { display: none; }
.show-cols-label { margin-right: 6px; }   /* both switches on one line at 375 px */
.history-table th.att, .history-table td.att { color: var(--text); background-clip: padding-box; }
.history-table thead th.att { color: #fff; }

/* ---------------------------------------------------------------- chart */
.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; max-width: 640px; }
.chart figcaption { margin-top: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; padding: 0; list-style: none; font-size: .875rem; }
.legend svg { width: 32px; height: 10px; vertical-align: middle; }
/* Phones (C17): the 560-unit chart is drawn about 330 px wide, so its 14-unit labels would be
   8 px. 22 units is about 12 px there; every other year label (class "minor") is left out so
   the larger ones don't touch. */
@media (max-width: 639px) {
  .chart text { font-size: 22px; }
  .chart text.minor { display: none; }
}

@media print {
  .lifter-search, .att-toggle, .att-toggle-label, .pager-nav, .sort-links, .result-tools { display: none; }
  .phone-only { display: none; }
}