:root {
  --ink: #1d1a16;
  --muted: #5e574c;
  --paper: #f4f0e8;
  --card: #fffdf8;
  --line: #ddd4c6;
  --rust: #8d3418;
  --good: #1d6b3a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 16px/1.45 "Segoe UI", "Helvetica Neue", sans-serif;
}

a { color: var(--rust); }

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.brand {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.brand span { color: var(--rust); font-weight: 600; }

nav { display: flex; flex-wrap: wrap; gap: 14px; }

nav a { color: var(--ink); text-decoration: none; }

nav a:hover { text-decoration: underline; }

main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }

h1 { font-size: 1.8rem; line-height: 1.2; margin: 0 0 8px; }

h2 { font-size: 1.15rem; margin: 28px 0 8px; }

.lead, .stats { color: var(--muted); }

.meet-list, .file-list, .photos { list-style: none; padding: 0; }

.meet-list li, .file-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.meet-list span, .file-list span { color: var(--muted); }

.pager { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 20px 0; }
.pager a, .pager span { min-width: 2.2em; padding: 4px 8px; text-align: center; border-radius: 4px; }
.pager a { border: 1px solid var(--line); background: var(--card); text-decoration: none; }
.pager [aria-current] { background: var(--rust); color: var(--card); font-weight: 600; }

.missing { color: var(--rust); font-style: normal; font-weight: 600; }

.file-list img { display: block; max-width: min(100%, 280px); height: auto; border: 1px solid var(--line); }

.photos { display: flex; flex-wrap: wrap; gap: 16px; }

.photos img { width: 180px; height: 220px; object-fit: cover; background: #ddd; }

.photos span { display: block; color: var(--muted); font-size: 0.9rem; }

.filters, .stack p { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }

/* Django wraps each field of a form rendered with as_p in a <p>, whose default
   margin would otherwise push the fields a line above the submit button. */
.filters p { margin: 0; }

label { display: grid; gap: 4px; font-size: 0.85rem; color: var(--muted); }

input, select, button {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 8px;
}

button { background: var(--ink); color: white; cursor: pointer; }

.table-wrap { overflow-x: auto; margin-top: 12px; }

table.results { width: 100%; border-collapse: collapse; background: var(--card); font-size: 0.92rem; }

table.results th, table.results td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

table.results th { font-size: 0.78rem; letter-spacing: 0.03em; color: var(--muted); font-weight: 600; }

.att-miss { color: var(--rust); text-decoration: line-through; }

.att-empty { color: #b3ab9e; }

table.results td.lift-best { text-align: center; }

.messages { padding-left: 18px; }

@media (max-width: 640px) {
  .site-header { align-items: flex-start; }
  h1 { font-size: 1.45rem; }
}

/* The results live in one scrolling pane so the filters, the sex heading and
   the column heads stay put while only the data moves. The pane has to be the
   scroll container in both axes: a wide table needs horizontal scrolling, and
   overflow-x:auto forces overflow-y to auto anyway, which would otherwise stop
   a viewport-sticky head from ever sticking. */
.results-pane {
  overflow: auto;
  max-height: calc(100vh - 14rem);
  min-height: 300px;
  border: 1px solid var(--line);
  background: var(--card);
  margin-top: 12px;
}

.sticky-filters {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--paper);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.results-pane .sex-group {
  position: relative;
  /* As wide as the table, so the heading band reaches the end of the row
     instead of stopping at the edge of the visible area. */
  width: max-content;
  min-width: 100%;
}

.results-pane .sex-heading {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0;
  padding: 8px 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

/* The band spans the table; the label itself stays at the left edge of the
   visible area so it survives horizontal scrolling. */
.results-pane .sex-heading span {
  position: sticky;
  left: 0;
  display: inline-block;
  padding: 0 10px;
}

.results-pane table.results thead th {
  position: sticky;
  top: var(--sex-h, 37px);
  z-index: 2;
  background: var(--card);
  box-shadow: inset 0 -1px 0 var(--line);
}

.results-pane table.results tr.class-row th {
  position: sticky;
  top: calc(var(--sex-h, 37px) + var(--head-h, 30px));
  z-index: 1;
  background: var(--paper);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
  box-shadow: inset 0 -1px 0 var(--line);
}

.results-pane table.results { margin-bottom: 0; }

/* The meet page gives the results as much of the screen as it can: the title
   block is tightened and the protocol links collapse to one line. */
/* The results table is wider than a column of text, so the meet page uses the
   whole window instead of the centred column the reading pages want. */
body.meet main { max-width: none; padding: 8px 16px 12px; }
body.meet .site-header { padding: 8px 20px; }

/* Title and the date/city line share a row, and each filter puts its label
   beside the control, so the chrome above the results stays about one sixth
   of the screen. */
body.meet .meet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin-bottom: 6px;
}

body.meet .meet-head h1 { font-size: 1.3rem; margin: 0; }
body.meet .meet-head .lead { margin: 0; font-size: 0.88rem; }
body.meet .filters { padding: 6px 0; gap: 6px 14px; }
body.meet .filters label { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
body.meet .filters select, body.meet .filters button { padding: 3px 6px; font-size: 0.86rem; }

.files-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.files-label { color: var(--muted); }

/* Reading across a row of twelve attempts is easier when the lifts are banded.
   Squat and deadlift keep the table's own colour and the bench sits between
   them a shade darker, so the eye lands on the right block without the page
   turning into stripes. The total is darker still, because it is the number
   most people came for. The tints are opaque rather than translucent: these
   cells appear in the sticky head, which has to hide the rows passing under it. */
:root {
  --band-bench: #f7f3ea;
  --band-total: #efe9dc;
}

table.results td.lift-bench,
table.results th.lift-bench { background: var(--band-bench); }

table.results td.col-total,
table.results th.col-total { background: var(--band-total); font-weight: 600; }

.results-pane table.results thead th.lift-bench { background: var(--band-bench); }
.results-pane table.results thead th.col-total { background: var(--band-total); }