/* Epic 0050 — attendance tracking: the night grid (Go, Go Manage and HQ share
   it), the team report, the history modal and the HQ pages.

   Every colour is a token, so Go's dark mode needs nothing extra here.

   iOS Safari: the pinned columns use `position: sticky` on the CELLS. Never
   absolutely-position against a <tr>, and keep `position: relative` on the
   scroll container — an absolute child would otherwise inflate it. */

/* ── Page ──────────────────────────────────────────────────────────────── */

.att-night { display: flex; flex-direction: column; gap: 0.75rem; }

.att-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.25rem;
}
.att-toolbar__summary { font-size: var(--text-sm); color: var(--ink-3); font-weight: 600; }
.att-toolbar__action { white-space: nowrap; }
.att-toolbar__summary { margin-right: auto; }
/* "Flip Table": turns the grid the other way (players across ⇄ down). */
.att-flip { white-space: nowrap; }

.att-errors {
  padding: 0.6rem 0.75rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--r-sm);
}

.att-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-3); }
.att-empty__title { font-weight: 700; color: var(--ink); margin-bottom: 0.25rem; }
.att-empty__desc { margin: 0; font-size: var(--text-sm); }

.att-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.att-filter {
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.att-filter span { margin-left: 0.25rem; color: var(--ink-3); }
.att-filter.is-active { color: var(--accent-dark); background: var(--accent-light); border-color: transparent; }

.att-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-3);
  background: var(--bg-2);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.att-chip--done { color: var(--success-dark); background: var(--success-soft); }
.att-chip--edit { color: var(--accent-dark); background: var(--accent-light); }
.att-chip--warn { color: var(--warning-dark); background: var(--warning-soft); }

/* ── One team's table ──────────────────────────────────────────────────── */

.att-table {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.att-table[hidden] { display: none; }

.att-table__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--line);
}
.att-table__name { font-weight: 700; color: var(--ink); }
.att-table__meta { font-size: var(--text-xs); color: var(--ink-3); }
.att-table__spacer { flex: 1; }
.att-table__caret { color: var(--ink-3); transition: transform 0.15s; }
.att-table--collapsed .att-table__head { border-bottom: none; }
.att-table--collapsed .att-table__caret { transform: rotate(-90deg); }
.att-table--collapsed .att-table__body { display: none; }

.att-table__scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* The sideways scrollbar: on a touch screen the platform's own, which shows
   only while scrolling; with a mouse, always visible, because not every
   mouse scrolls sideways and the bar is then the way across. */
@media (pointer: coarse) {
  /* Nothing until the section has been scrolled once (touch-scrollbar
     controller): Chrome's phone emulation otherwise paints a bar on every
     table at load. */
  .att-table__scroll:not(.is-scrolled) { scrollbar-width: none; }
  .att-table__scroll:not(.is-scrolled)::-webkit-scrollbar { display: none; }
}
@media (pointer: fine) {
  .att-table__scroll { scrollbar-width: auto; scrollbar-color: var(--ink-4) var(--bg-2); }
  .att-table__scroll::-webkit-scrollbar { height: 10px; }
  .att-table__scroll::-webkit-scrollbar-track { background: var(--bg-2); }
  .att-table__scroll::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 5px; border: 2px solid var(--bg-2); }
}

.att-table__add {
  display: block;
  padding: 0.6rem 0.75rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  border-top: 1px solid var(--line);
}

/* ── The grid ──────────────────────────────────────────────────────────── */

.att-grid {
  --att-player-w: 8.25rem;
  --att-all-w: 3.5rem;
  width: 100%;
  /* list.css gives every bare <table> a 1rem margin and row spacing; inside
     a card that reads as an empty row above and below the grid. */
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.att-grid th, .att-grid td {
  padding: 0.3rem 0.35rem;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--line-2);
  background: var(--card-bg);
}
.att-grid thead th {
  vertical-align: bottom;
  font-weight: 600;
  color: var(--ink-3);
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--line);
  /* The header row's light grey, as on every other table. */
  background: var(--table-header-bg);
}

/* Pinned: the player's name, then "All games". */
.att-grid .att-grid__player {
  position: sticky;
  left: 0;
  z-index: 2;
  width: var(--att-player-w);
  min-width: var(--att-player-w);
  max-width: var(--att-player-w);
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.att-grid thead .att-grid__player { color: var(--ink-3); }
.att-grid .att-grid__all {
  position: sticky;
  left: var(--att-player-w);
  z-index: 2;
  width: var(--att-all-w);
  min-width: var(--att-all-w);
  border-right: 1px solid var(--line);
}

.att-grid__game { min-width: 4.75rem; max-width: 7rem; }
.att-grid__game--locked { opacity: 0.75; }
.att-grid__time { font-weight: 700; color: var(--ink); }
.att-grid__opp-icon { margin: 0.2rem 0; line-height: 0; }
/* Wraps to two lines, then cuts with …; the full name is the title. */
.att-grid__opp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
  color: var(--ink-2);
  font-weight: 600;
}
/* Where the game is, under its header; one line, cut with … */
.att-grid__venue {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.15rem;
  min-height: 1em;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "Sir John A Macdonal… (Court 1)": the facility gives way, the court stays. */
.att-grid__venue-facility { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.att-grid__venue-court { flex: none; }
.att-grid__lock { margin-left: 0.25rem; font-size: 0.8em; }
.att-grid__game .att-box--bulk { margin-top: 0.3rem; }
/* Games across (players down): every header starts with its time at the
   top, and the opponent's name keeps two lines' room whether it needs one
   or two, so the bulk boxes under the headers stay level. */
.att-grid--down thead th { vertical-align: top; }
.att-grid--down thead .att-grid__player, .att-grid--down thead .att-grid__all { vertical-align: bottom; }
.att-grid--down .att-grid__opp { min-height: 2.4em; }

.att-grid__tally { font-weight: 700; color: var(--ink); }
.att-grid__tally span { font-weight: 500; color: var(--ink-3); }

/* A group heading ("Mon Feb 23 · Edit") spans the whole table; its content
   stays at the left edge while the table scrolls sideways. */
.att-grid__group th > .att-grid__group-label,
.att-grid__group th > .att-report__nighthead {
  position: sticky;
  left: 0.6rem;
  display: inline-flex;
  width: max-content;
  max-width: calc(100vw - 3rem);
}
.att-grid__group th {
  text-align: left;
  padding: 0.4rem 0.6rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-2);
}
.att-grid__off-team .att-grid__name { color: var(--ink-3); }

.att-grid__row--new th, .att-grid__row--new td,
th.att-grid__row--new, td.att-grid__row--new { background: var(--accent-subtle); }

/* A player's icon beside the name (players down)… */
.att-grid__player .player-icon { margin-right: 0.3rem; vertical-align: middle; }
/* The night above a game's time, in a table that runs across nights. */
.att-grid__night { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }

/* ── Players ACROSS, games down (attendance/_grid_across and the team
   report's log). The pinned first column is the GAME: its time, the
   opponent, and on a night page its state line. ── */
.att-grid--across { --att-player-w: 8rem; --att-all-w: 3.25rem; width: auto; min-width: 100%; }
/* On a phone the opponent goes under the time, so the pinned column stays
   narrow and more players fit beside it. */
.att-grid--across .att-grid__gameline { flex-wrap: wrap; row-gap: 0.1rem; }
.att-grid--across .att-grid__all { text-align: center; }
/* …and above it (players across). */
/* Players across: every header starts with its icon at the top, and the
   name keeps two lines' room whether it needs one or two, so the bulk
   boxes under the names stay level. */
.att-grid__person { min-width: 3.75rem; max-width: 6.5rem; vertical-align: top; }
.att-grid__person-icon { line-height: 0; margin-bottom: 0.25rem; }
.att-grid__person .att-grid__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 700;
}
.att-grid__person-tags { min-height: 1rem; }
.att-grid__person-tags .att-tag { margin-left: 0; }
.att-grid__person .att-box--bulk { margin-top: 0.3rem; }
.att-grid__person .att-grid__tally { display: block; margin-top: 0.2rem; }
.att-grid__person--off .att-grid__name { color: var(--ink-3); }
.att-grid__off-note { display: block; font-size: 0.65rem; font-weight: 600; color: var(--ink-3); }
.att-grid__gamerow { font-weight: 500 !important; }
.att-grid__gameline { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.att-grid__gameline .att-grid__time { flex-shrink: 0; min-width: 3.9rem; }
/* "7:00 PM  vs  [icon] Dig Deep": the opponent a size down and not bold. */
.att-grid__vs { font-size: 0.65rem; font-weight: 500; color: var(--ink-4); }
.att-grid__gameline .att-grid__opp {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--text-xs);
  font-weight: 500;
}
.att-grid--across tr.att-grid__game--locked th, .att-grid--across tr.att-grid__game--locked td { opacity: 0.75; }

.att-tag {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.3rem;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.3rem;
  border-radius: var(--r-sm);
  vertical-align: middle;
  white-space: nowrap;
}
.att-tag--captain { color: var(--accent-dark); background: var(--accent-light); }
.att-tag--sub { color: var(--sub-dark); background: var(--sub-soft); }
.att-tag--player { color: var(--ink-3); background: var(--bg-2); }

/* ── A box ─────────────────────────────────────────────────────────────── */

/* View mode. */
.att-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  font-weight: 800;
  color: var(--ink-4);
  border-radius: var(--r-sm);
  text-decoration: none;
  vertical-align: middle;
}
.att-cell--p { color: var(--success-dark); background: var(--success-soft); }
.att-cell--a { color: var(--danger); background: var(--danger-soft); }
.att-cell--link:hover { box-shadow: var(--focus-ring); }

.att-conflict {
  margin-left: 0.15rem;
  font-size: 0.8em;
  color: var(--warning-dark);
  text-decoration: none;
}

/* Edit mode: a 2.25rem tap target. */
.att-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font: inherit;
  font-weight: 800;
  color: var(--ink-4);
  background: var(--surface);
  border: 1.5px solid var(--input-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Not the default `baseline`: an EMPTY inline-flex box has no text, so its
     baseline is its bottom edge and it rode higher than a ticked one beside
     it — and made its row taller. */
  vertical-align: middle;
}
.att-box:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.att-box[data-value="p"] { color: var(--success-dark); background: var(--success-soft); border-color: var(--success); }
.att-box[data-value="a"] { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
.att-box[data-value="mixed"] { color: var(--ink-2); background: var(--bg-2); }
.att-box--bulk { border-style: dashed; }
.att-box:disabled { opacity: 0.4; cursor: default; }

/* ── Submit bar ────────────────────────────────────────────────────────── */

.att-footer {
  position: sticky;
  /* Clears Go's bottom tab bar (64px plus the phone's home-bar inset,
     go.css) with a little air above it. */
  bottom: calc(64px + env(safe-area-inset-bottom) + 0.5rem);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.att-footer__summary { margin: 0; font-size: var(--text-sm); color: var(--ink-2); }
.att-footer__actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

@media (min-width: 769px) {
  .att-grid { --att-player-w: 11rem; --att-all-w: 4.5rem; }
  .att-report__col--wide { display: table-cell; }
  .att-grid--across { --att-player-w: 16rem; --att-all-w: 4.5rem; }
  .att-grid--across .att-grid__gameline { flex-wrap: nowrap; }
  .att-grid__person { min-width: 5.5rem; max-width: 8rem; }
  .att-grid__game { min-width: 7rem; max-width: 10rem; }
  /* No bottom tab bar from here up (go.css). */
  .att-footer { bottom: 1rem; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* HQ has no bottom tab bar. */
.hq-attendance .att-footer { bottom: 1rem; }

/* ── The reports for one box (history modal) ───────────────────────────── */

.att-history__game { margin: 0 0 0.75rem; font-size: var(--text-sm); color: var(--ink-2); }
.att-history__table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.att-history__table th {
  padding: 0.35rem 0.5rem;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.att-history__table td { padding: 0.5rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.att-history__now {
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-light);
  border-radius: var(--r-sm);
}
.att-history__role { margin-left: 0.25rem; color: var(--ink-3); font-size: var(--text-xs); }
.att-history__note { margin: 0.75rem 0 0; font-size: var(--text-xs); color: var(--ink-3); }

/* ── The team season report (Go team tab, HQ Teams tab, HQ team modal):
   a summary card and a log card, the same on a phone and a desktop. ── */

.att-report { display: flex; flex-direction: column; gap: 1rem; }
.att-report__card { overflow: hidden; padding: 0; }
.att-report__card .att-grid th:last-child, .att-report__card .att-grid td:last-child { padding-right: 0.75rem; }
.att-report__actions { display: flex; justify-content: flex-end; margin-bottom: -0.25rem; }

.att-report__summary { width: 100%; }
.att-report__who { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

.att-report__who .att-tag { margin-left: 0; }
.att-report__num { text-align: center !important; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.att-report__num strong { color: var(--ink); }
.att-report__name { color: var(--ink); font-weight: 700; }
.att-report__row--off .att-report__name { color: var(--ink-3); }
.att-report__row--own td,
.att-report__table .att-report__player--own { background: var(--accent-subtle) !important; }

/* A night's heading: the date, Edit immediately to its right, then a note. */
.att-report__nighthead { align-items: center; gap: 0.5rem; }
/* Phone: the summary shows Games Played and Nights Played only. */
.att-report__col--wide { display: none; }
.att-report__edit { text-transform: none; letter-spacing: 0; }
.att-report__flag {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-4);
}
/* Upcoming games are dimmed. A night nobody recorded is NOT marked: its
   boxes are a dot on a plain background, like any other blank (round 11). */
.att-report__night--upcoming td, .att-report__night--upcoming .att-grid__gamerow { opacity: 0.5; }

/* HQ's Teams page Attendance tab. */
.team-attendance { margin-top: 1rem; }
.team-attendance__bar { display: flex; justify-content: flex-end; margin-bottom: 0.75rem; }

.att-history__back { display: inline-block; margin-top: 0.75rem; font-size: var(--text-sm); font-weight: 600; color: var(--accent); }

/* ── HQ › Attendance: the team modal, the Log, the editor ──────────────── */

.att-hq-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 1rem 0;
}
.att-hq-filters label { display: flex; flex-direction: column; gap: 0.2rem; }
.att-hq-filters__label { font-size: var(--text-xs); font-weight: 700; color: var(--ink-3); }
.att-hq-filters__check { flex-direction: row !important; align-items: center; gap: 0.4rem !important; font-size: var(--text-sm); padding-bottom: 0.45rem; }
.att-hq-filters__clear { margin-left: 0.35rem; color: inherit; text-decoration: none; }

.att-hq-modal { max-width: min(96vw, 80rem); }

.att-log { overflow-x: auto; }
.att-log__head, .att-log__row {
  display: grid;
  grid-template-columns: 9.5rem 10rem 7.5rem 6rem 6.5rem minmax(10rem, 1fr) 4rem 7.5rem 7.5rem;
  gap: 0.75rem;
  align-items: center;
  min-width: 68rem;
  padding: 0.55rem 0.9rem;
  font-size: var(--text-sm);
}
.att-log__head {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--table-header-text);
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--line);
}
.att-log__item { border-bottom: 1px solid var(--line-2); }
.att-log__row { cursor: pointer; list-style: none; }
.att-log__row::-webkit-details-marker { display: none; }
.att-log__row:hover { background: var(--table-row-hover); }
.att-log__item[open] > .att-log__row { background: var(--accent-subtle); }
.att-log__by { font-weight: 600; color: var(--ink); }
.att-log__via { color: var(--ink-2); }
/* The Submissions page's role chips. */
.att-log__row .att-tag { margin-left: 0; }
.att-tag--role-captain { color: var(--accent-dark); background: var(--accent-light); }
.att-tag--role-player, .att-tag--role-team_referee { color: var(--ink-3); background: var(--bg-2); }
.att-tag--role-staff, .att-tag--role-staff_referee { color: var(--ink); background: var(--bg-2); }
.att-log__teams { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-log__entries { display: block; padding: 0 0.9rem 0.9rem; }
.att-log__loading { margin: 0.5rem 0; font-size: var(--text-sm); color: var(--ink-3); }
.att-log__whose { color: var(--ink-3); font-size: var(--text-xs); }
.att-log__whose--other { color: var(--warning-dark); font-weight: 600; }
.att-log__blank { color: var(--ink-4); }
.att-log__pages { margin-top: 1rem; }

/* ── HQ's attendance editor (attendance/_editor_modal) ───────────────────
   Its own frame, BELOW the shared "modal" frame (z-index 200): Add player
   and a box's history open there and must layer above the editor — the
   match editor's arrangement (match_editor.css). */
turbo-frame#attendance_editor:not(:empty) {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: block;
}
turbo-frame#attendance_editor .modal-backdrop { z-index: 190; }

.att-editor .modal__title { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.att-editor__subject { font-weight: 500; color: var(--ink-3); }
.att-editor__tools { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.att-editor__body { display: flex; flex-direction: column; gap: 0.75rem; background: var(--bg); }
/* The body scrolls; its tables keep their height (a flex child would
   otherwise be squeezed to fit, hiding rows). */
.att-editor__body > * { flex-shrink: 0; }
.att-editor__footer { margin: 0; }
.att-editor__footer .att-footer__summary { flex: 1; }
/* A small pill with its label centred: a fixed height and no vertical
   padding (padding plus line-height: 1 left the word sitting low). */
.att-report__edit.btn { height: 1.4rem; padding: 0 0.65rem; font-size: var(--text-xs); line-height: 1.4rem; }

/* ── HQ › Attendance › Tracker (attendances/nights/_tracker) ──────────────
   The team page's log grid, season-wide: a row per player under a heading
   row per team, a column per night. */
.att-tracker__table { min-width: 100%; }
.att-tracker__table thead th { white-space: nowrap; }
/* A player's cell: indented a step past the team's icon; the name plain. */
.att-tracker__who { font-weight: 500 !important; padding-left: 1.6rem !important; }
.att-tracker__who .att-report__who { flex-wrap: nowrap; }
.att-tracker__who .att-report__name { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.att-tracker__who .att-tag { flex-shrink: 0; }
/* The team's icon at the player icon's size (26px). */
.att-tracker__table .att-grid__group .team-icon-sm { width: 26px; height: 26px; font-size: 0.8rem; }
.att-tracker__team { font-weight: 700; text-transform: none; letter-spacing: 0; font-size: var(--text-sm); color: var(--ink); }
.att-tracker__num { text-align: center !important; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.att-tracker__num strong { color: var(--ink); }
.att-tracker__night { min-width: 4.5rem; }
.att-tracker__dow { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; }
.att-tracker__date { display: block; font-weight: 700; color: var(--ink); line-height: 1.2; }
.att-tracker__night-edit { margin-top: 0.3rem; }
.att-tracker__night--upcoming { opacity: 0.6; }
.att-tracker__cell { white-space: nowrap; }
/* "6 of 6": green for every game, red for none, yellow between, grey for
   nothing recorded. */
.att-tracker__badge {
  display: inline-block;
  min-width: 3.4rem;
  padding: 0.1rem 0.45rem;
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-pill);
  color: var(--ink-3);
  background: var(--bg-2);
}
.att-tracker__badge--full { color: var(--success-dark); background: var(--success-soft); }
.att-tracker__badge--missed { color: var(--danger-dark); background: var(--danger-soft); }
.att-tracker__badge--partial { color: var(--warning-dark); background: var(--warning-soft); }
@media (min-width: 769px) {
  .att-tracker__table { --att-player-w: 17rem; }
}