/* The tally board.
 *
 * Tokens only, no raw colour values (guardrail 10). Quiet on purpose: this is a
 * table of numbers people scan for their own name, so the only colour that
 * carries meaning is the one on the "has enough shifts" flag.
 *
 * The sort buttons are `.filter-chip` from app.css — the same primitive the
 * schedule agenda's expand-all uses.
 */

.ty-head { margin-bottom: var(--space-4); }

/* --- the four numbers -----------------------------------------------------
 * The tiles themselves are the shared `statTile()` (`components/ui.js`) —
 * this was one of four independent stat-tile treatments in the app, and three
 * of them put the number above the label, which the shared one's own comment
 * calls out as the wrong order: the label is the question, the number is
 * meaningless above it. Only the grid that arranges them stays here. */
.ty-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

/* --- controls ------------------------------------------------------------- */

.ty-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.ty-search { flex: 1 1 260px; }
.ty-controls .filter { flex: 0 1 180px; }

.ty-sorts { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* --- pods ----------------------------------------------------------------- */

.ty-board { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }

.ty-pods { width: 100%; }

/* The "By pod" heading is now `sectionHead(…, { rule: true })`
 * (`components/ui.js`) — it drew the identical border, weight and letter-
 * spacing under its own name here. */

.ty-podlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ty-pod {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 34px;
  font-size: var(--size-small);
}

.ty-pod-name { flex: 0 0 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The bar itself is the shared `progressBar()` (`components/ui.js`) — this
 * used to be `.ty-pod-bar`/`.ty-pod-fill` at 8px, one of two progress-bar
 * heights in the app; the shared one is `--bar-height` (10px). `.ty-pod` lays
 * its three children out as a flex row and the bar is the one that should
 * fill whatever the name and the number leave — `.ui-bar` itself does not
 * assume it is ever the middle of a row, so that is set here. */
.ty-pod .ui-bar { flex: 1; }

.ty-pod-n {
  flex: none;
  min-width: 52px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.ty-pods-note {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-size: var(--size-micro);
  color: var(--soft);
}

/* --- the people ----------------------------------------------------------- */

.ty-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The whole row is the door to that person's page: `personRow()`
 * (`components/ui.js`). This used to be its own `<a class="ty-row-link">` —
 * one of three different answers the app had to "make a row a door", and the
 * only one built on an `<a>` rather than a `<button>` or a hand-rolled div.
 * `.ty-row` is now just the flex line that holds the rank number beside it. */
.ty-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.ty-row > .ui-person { flex: 1 1 auto; min-width: 0; }

.ty-rank {
  flex: none;
  width: 26px;
  color: var(--soft);
  font-size: var(--size-micro);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ty-weight {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.ty-weight-n {
  font-size: var(--size-h2);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* Three states, three treatments. `is-under` is below `shifts_minimum` — the
   only one that is a flag at all. `is-met` is the camper who has done exactly
   what camp asks and is on the full fee: a tick, in the page's own ink, because
   there is nothing wrong. `is-ok` is the discount earned. */
.ty-flag { font-size: var(--size-small); font-weight: var(--weight-bold); }
.ty-flag.is-ok { color: var(--live); }
.ty-flag.is-met { color: var(--soft); }
.ty-flag.is-under { color: var(--soon); }

/* --- the 401/403 -----------------------------------------------------------
 *
 * Whose screen this is, where your own number lives, and a way back in. Styled
 * as a page rather than an error panel: nothing has gone wrong, the wrong
 * person is simply looking. */

.ty-locked { max-width: 34rem; }
.ty-locked .lede { margin-top: var(--space-3); }

/* The row itself is `buttonRow()` (`components/ui.js`); this wrapper is only
 * the spacing above it. */
.ty-locked-actions { margin-top: var(--space-5); }

@media (max-width: 767px) {
  .ty-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .ty-controls .filter { flex: 1 1 140px; }
  .ty-pod-name { flex: 0 0 45%; }
}