/* ==========================================================================
   roster.css — the Roster page.

   Scoped under .roster, and inherits its palette from /css/datapages.css.
   ========================================================================== */

.roster { max-width: 1500px; margin: 0 auto; padding: 0 16px; }

/* --- views + filters ------------------------------------------------------ */
.roster .views { display: flex; gap: 6px; margin: 16px 0 0; flex-wrap: wrap; }
.roster .vbtn {
  appearance: none; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600;
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
}
.roster .vbtn:hover { color: var(--ink); border-color: #35507a; }
.roster .vbtn[aria-pressed="true"] { color: #05121f; background: var(--blue-br); border-color: var(--blue-br); }
.roster .vbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.roster .filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin: 12px 0 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.roster .f-field { display: flex; flex-direction: column; gap: 4px; }
.roster .f-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--muted); }
.roster select, .roster input[type="search"] {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 8px; padding: 7px 11px; font: inherit; font-size: 13.5px;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.roster input[type="search"] { min-width: 220px; }
.roster select { cursor: pointer; }
.roster select:focus-visible, .roster input:focus-visible { outline: 2px solid var(--blue-br); outline-offset: 1px; }
.roster .chip.ghost {
  appearance: none; border: 1px dashed var(--line); background: var(--panel);
  color: var(--ink-2); font: inherit; font-size: 12.5px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.roster .chip.ghost:hover { color: #fff; border-color: var(--blue-br); }
.roster .f-count { margin-left: auto; font-size: 12.5px; color: var(--muted); align-self: center; }

/* --- the table ------------------------------------------------------------ */
.roster .tablewrap { overflow-x: auto; margin-top: 14px; }
.roster table {
  width: 100%; border-collapse: collapse; font-family: ui-sans-serif, system-ui, sans-serif;
  min-width: 900px;
}
.roster thead th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); font-weight: 600; padding: 8px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: #0b1424; z-index: 2;
}
.roster th[data-sort] { cursor: pointer; user-select: none; }
.roster th[data-sort]:hover { color: var(--ink); }
.roster th[data-sort]:focus-visible { outline: 2px solid var(--blue-br); outline-offset: -2px; }
.roster th.sorted { color: var(--ink); }
.roster th .caret { font-size: 8px; margin-left: 4px; color: var(--blue-br); }

.roster tbody td { padding: 6px 8px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.045); color: var(--ink-2); vertical-align: middle; }
.roster tbody tr:hover td { background: rgba(255,255,255,.028); }
.roster tbody tr.former td { opacity: .62; }
.roster .num { text-align: right; font-variant-numeric: tabular-nums; }

.roster .c-num, .roster .c-helm { width: 1%; padding-right: 4px; }

/* The car number, as text. Sharky, 2026-07-31: the drawn livery version was
   never legible in a table cell. The site's display face, tabular figures so
   the column lines up, and the string as stored — "07" keeps its leading zero,
   because that is the number the driver chose. */
.roster .carnum {
  font-family: "Racing Sans One", ui-sans-serif, system-ui, sans-serif;
  font-size: 20px; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: .5px;
  display: inline-block; min-width: 42px;
}
.roster .carnum.none { color: #3d5273; font-size: 13px; }

.roster .helm { height: 34px; width: 34px; display: block; }
.roster .none { color: #3d5273; font-size: 12px; }

.roster .c-who { min-width: 210px; }
.roster .nm { color: var(--ink); font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 1px; }
.roster .nick { font-size: 12px; color: var(--muted); font-style: italic; }
.roster .gone { font-size: 11px; color: #7d8ba3; }
/* Same treatment as everywhere else: a fixed circle with the art contained, so
   five badges of five different aspect ratios still line up. */
.roster .wbadge {
  display: inline-block; width: 17px; height: 17px; border-radius: 50%;
  background-color: rgba(255,255,255,.07); background-size: contain;
  background-repeat: no-repeat; background-position: center;
  border: 1px solid var(--line); margin-left: 5px;
}
.roster .c-date { white-space: nowrap; font-size: 12.5px; }

/* --- the season grid ------------------------------------------------------ */
/* One cell per season, inline with the member — the shape Sharky's sheet uses.
   The tick is the signal; the colour only groups the years, so a season is still
   readable without it. */
.roster .sgrid { display: flex; gap: 2px; }
.roster .scell {
  width: 17px; height: 20px; border-radius: 3px; flex: 0 0 17px;
  display: grid; place-items: center; font-size: 11px; line-height: 1;
  background: rgba(255,255,255,.035); color: transparent;
}
/* ONE COLOUR, not six. A hue per year made a rainbow of it and the colour was
   carrying nothing the tick did not already say. Years are still separable —
   alternate years get a faint band behind the whole column — but the signal is
   the tick, in the site's own blue. */
.roster .scell.on { background: #38a9e8; color: #05121f; font-weight: 700; }
.roster .scell.alt { background: rgba(255,255,255,.055); }
.roster .scell.alt.on { background: #2f93cd; }

.roster .scell.head.alt { background: rgba(255,255,255,.04); border-radius: 3px 3px 0 0; }
/* THE LABEL RUNS VERTICALLY, bottom to top -- Sharky, 2026-08-01: "make the
   season header names verticle ... 2023S3 should be written verticly".

   It was two stacked lines before, "2023" over "S3" at 8.5px, which is what a
   17px column forces if the text stays horizontal. Turned on its side the whole
   label is one run and can be read at a normal size.

   writing-mode + rotate(180deg), NOT transform alone. A bare rotate leaves the
   element's box the shape it was, so the column keeps the width of the
   horizontal text and every cell is thrown out of line with the grid beneath
   it. writing-mode re-flows the box first; the rotation only turns it the right
   way up, so it reads upward rather than downward.

   min-height fits the longest label at this size -- six characters, "2026S3". */
.roster .scell.head {
  height: auto; min-height: 62px; background: none; color: var(--muted);
  font-size: 10px; letter-spacing: .02em; white-space: nowrap; font-weight: 600;
  writing-mode: vertical-rl; transform: rotate(180deg);
  place-items: center; padding: 3px 0;
}
.roster .c-seasons { padding-left: 12px; }

.roster td.empty { text-align: center; color: var(--muted); padding: 28px 0; }
.roster .foot-note { color: var(--muted); font-size: 12px; margin: 22px 0 0; max-width: 78ch; }

@media (max-width: 900px) {
  .roster .f-count { margin-left: 0; }
  .roster input[type="search"] { min-width: 160px; }
}