/* 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
 * overview's filters and the agenda's expand-all use.
 */

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

/* --- the four numbers ----------------------------------------------------- */

.ty-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

/* Fill, not outline. Four bordered boxes in a row read as four controls; the
 * design states its numbers on a plain fill and lets whitespace do the rest. */
.ty-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--panel);
}

.ty-stat-n {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.ty-stat-l { font-size: var(--size-small); font-weight: var(--weight-semibold); }
.ty-stat-note { font-size: var(--size-micro); color: var(--soft); }

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

.ty-kicker {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--size-kicker);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--soft);
}

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

.ty-pod-bar {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--card);
  overflow: hidden;
}

.ty-pod-fill { display: block; height: 100%; background: var(--t-tea); }

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

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

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

.ty-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

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

.ty-who { flex: 1; min-width: 0; }

.ty-name {
  display: block;
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
}

.ty-detail {
  display: block;
  font-size: var(--size-micro);
  color: var(--soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.ty-flag { font-size: var(--size-small); font-weight: var(--weight-bold); }
.ty-flag.is-ok { color: var(--live); }
.ty-flag.is-under { color: var(--soon); }

@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%; }
}