/* Hero draft entry — the per-match draft page and the bulk backfill accordion.
 *
 * Every colour routes through the site's semantic tokens so both themes work
 * without a second palette here. Text that sits on a brand-coloured fill uses a
 * literal #fff, never var(--text-primary), which flips to near-black in light
 * theme while the fill does not (see CLAUDE.md).
 * NOTE: adding or editing this file requires bumping CACHE_NAME in static/sw.js. */

/* ── Game selector ─────────────────────────────────────────────────────────── */
.draft-games {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.draft-game-tab {
  padding: .4rem .9rem;
  border-radius: 6px;
  border: 1px solid var(--border-color, rgba(127, 127, 127, .3));
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.draft-game-tab:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.draft-game-tab.active {
  background: var(--grad-primary, var(--brand-primary));
  border-color: transparent;
  color: #fff;
}

/* ── Screenshot switcher ───────────────────────────────────────────────────── */
.draft-shots { padding: 1rem; margin-bottom: 1rem; }
.draft-shot-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.draft-shot-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.draft-shot-tab {
  padding: .35rem .85rem;
  border-radius: 6px;
  border: 1px solid var(--border-color, rgba(127, 127, 127, .3));
  color: var(--text-secondary);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.draft-shot-tab.is-missing { opacity: .55; }
.draft-shot-radio:focus-visible + .draft-shot-tab { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* The label follows its own input, so :checked + label targets it directly. */
.draft-shot-radio:checked + .draft-shot-tab {
  background: var(--grad-primary, var(--brand-primary));
  border-color: transparent;
  color: #fff;
}

/* Panes are later siblings of both radios, so each radio can show its own. */
.draft-shot-pane { display: none; width: 100%; margin-top: .75rem; }
/* Attribute selector, not #id — the backfill accordion renders many of these
   radio pairs on one page with per-row ids, so a hardcoded #shotview-draft only
   ever matched the single per-match page and left every backfill pane stuck at
   display:none regardless of which screenshot existed. */
.draft-shot-radio[data-shot="draft"]:checked  ~ .draft-shot-pane[data-pane="draft"],
.draft-shot-radio[data-shot="result"]:checked ~ .draft-shot-pane[data-pane="result"] { display: block; }

.draft-shot-pane img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border-color, rgba(127, 127, 127, .3));
  display: block;
}
.draft-shot-empty {
  color: var(--text-muted);
  font-size: .85rem;
  margin: .5rem 0 0;
}

/* ── The form ──────────────────────────────────────────────────────────────── */
.draft-entry { padding: 1rem; }

.draft-sidebar {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  padding-bottom: .8rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--border-color, rgba(127, 127, 127, .25));
}
.draft-side-label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.draft-side-opt,
.draft-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.draft-first-team { font-size: .85rem; font-weight: 700; color: var(--text-primary); }
.draft-mode-toggle { margin-left: auto; }
.draft-mode-toggle + .draft-mode-toggle { margin-left: 0; }

.draft-teams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
@media (max-width: 720px) {
  .draft-teams { grid-template-columns: 1fr; }
  .draft-sidebar { gap: .6rem; }
  .draft-mode-toggle { margin-left: 0; }
}

.draft-team-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 .6rem;
}
.draft-block { margin-bottom: .9rem; }
.draft-block-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .35rem;
}

.draft-bans { display: flex; flex-wrap: wrap; gap: .35rem; }
.draft-bans .draft-hero-input { flex: 1 1 6.5rem; min-width: 0; }

.draft-picks { display: flex; flex-direction: column; gap: .35rem; }
.draft-pick-row {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: .35rem;
}
.draft-pick-num {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.draft-form.draft-fast .draft-pick-row { grid-template-columns: 1.4rem minmax(0, 1fr); }

.draft-hero-input,
.draft-slot,
.draft-paste { font-size: .85rem; padding: .35rem .5rem; }
.draft-paste { width: 100%; margin-top: .35rem; }

.draft-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .4rem;
  padding-top: .8rem;
  border-top: 1px solid var(--border-color, rgba(127, 127, 127, .25));
}
.draft-hint { font-size: .78rem; color: var(--text-muted); }

/* ── Saved draft board (match page / backfill "recorded" rows) ──────────
   Two sides split left and right like the in-game pick/ban screen: team name and
   ban rail on top, picks listed beneath. Both sides are lane-sorted, so the rows
   line up across the divider and can be read straight across. The right side is
   mirrored so its portraits sit outboard, again matching the game.

   Every text step uses a theme-aware token -- the ban rail is de-emphasised with
   --text-muted (6.9:1 on --bg-card), never a dimmer literal.

   Scoped under .draft-board on purpose: the entry form above owns its own
   unscoped .draft-picks and .draft-team-name, and this file loads after it. An
   unscoped rule here would silently retheme the form instead of the board. */
.draft-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .9rem;
  font-size: .8rem;
}
/* The analysis sits between the two drafts, so the board gains a centre column
   only when there is one to show. */
.draft-board--analysed { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem) minmax(0, 1fr); }
.draft-board .draft-side {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-width: 0;
  padding-left: .6rem;
  border-left: 3px solid var(--border-color, rgba(127, 127, 127, .3));
}
.draft-board .draft-side--first  { border-left-color: #2563eb; }
.draft-board .draft-side--second { border-left-color: #7c3aed; }

/* Right side mirrors: border and content flip outward, as on the draft screen. */
.draft-board .draft-side--right {
  padding-left: 0;
  padding-right: .6rem;
  border-left: 0;
  border-right: 3px solid var(--border-color, rgba(127, 127, 127, .3));
  text-align: right;
}
.draft-board .draft-side--right.draft-side--first  { border-right-color: #2563eb; }
.draft-board .draft-side--right.draft-side--second { border-right-color: #7c3aed; }
.draft-board .draft-side--right .draft-side-head,
.draft-board .draft-side--right .draft-bans-rail,
.draft-board .draft-side--right .draft-pick { flex-direction: row-reverse; }

.draft-board .draft-side-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .5rem;
}
.draft-board .draft-team-name {
  color: var(--text-primary);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.draft-board .draft-bans-rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem .4rem;
}
.draft-board .draft-bans-label {
  color: var(--text-muted);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.draft-board .draft-ban {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.draft-board .draft-ban img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: .65;
}
.draft-board .draft-ban-name { font-size: .66rem; text-decoration: line-through; }

/* One row per lane. Fixed row height keeps the two sides on the same baseline
   even when one side has a long IGN and the other does not. */
.draft-board .draft-picks {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.draft-board .draft-pick {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.35rem;
  min-width: 0;
}
.draft-board .draft-pick-art { position: relative; display: block; line-height: 0; flex: none; }
.draft-board .draft-pick-art img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-color, rgba(127, 127, 127, .35));
}
.draft-board .draft-pick-order {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--bg-card);
  border: 1px solid var(--border-color, rgba(127, 127, 127, .35));
  color: var(--text-muted);
  font-size: .6rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.draft-board .draft-side--right .draft-pick-order { right: auto; left: -2px; }

/* Counter-pick marker: the lane's later pick, i.e. the one drafted with the
   opponent's lane hero already on the board. Sits opposite the order badge so
   the two never collide, and out of flow so it cannot change the row height. */
.draft-board .draft-pick-counter {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--brand-primary, #7c3aed);
  color: var(--text-secondary);
  font-size: .58rem;
  font-weight: 800;
  line-height: 13px;
  text-align: center;
  cursor: help;
}
.draft-board .draft-side--right .draft-pick-counter { left: auto; right: -3px; }
.draft-pick-counter--inline { position: static; display: inline-block; vertical-align: middle; }

/* Lane marks are static/img/roles/*.svg with a hardcoded white fill, so they are
   masked rather than drawn: background-color carries the theme token and the SVG
   only supplies the shape. An <img> here would be invisible on light theme. */
.draft-lane-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: var(--text-muted);
  -webkit-mask-image: var(--lane-icon);
  mask-image: var(--lane-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex: none;
}
.draft-lane-icon--sm { width: 14px; height: 14px; }

/* The icon carries the lane on the board; the word is kept for assistive tech
   and for the no-mask fallback below. */
.draft-board .draft-pick-lane { display: inline-flex; align-items: center; gap: .3rem; }
.draft-board .draft-lane-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Without mask support the icon box would render as a blank square, so drop it
   and show the word instead. */
@supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
  .draft-lane-icon { display: none; }
  .draft-board .draft-lane-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

.draft-board .draft-pick-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
/* Lane mark and IGN on one line, mirrored with the row so the mark always sits
   on the outboard side of the name. */
.draft-board .draft-pick-sub { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.draft-board .draft-side--right .draft-pick-sub { flex-direction: row-reverse; }
.draft-board .draft-pick-hero {
  color: var(--text-secondary);
  font-size: .74rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.draft-board .draft-pick-player {
  color: var(--text-muted);
  font-size: .66rem;
  overflow-wrap: anywhere;
}
.draft-board .draft-pick-lane {
  margin-left: auto;
  color: var(--text-muted);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex: none;
}
/* The two sides share one lane spine down the middle. Both rows are the same
   lane, so printing the label on each side just reads as a stutter -- the left
   side's label carries it. Restored below when the sides stack. */
.draft-board .draft-side--right .draft-pick-lane { display: none; }

/* Stacked on narrow screens, and the mirror comes off -- two 1fr columns of
   portrait-plus-name do not survive a phone, and a right-aligned single column
   just reads as broken. */
@media (max-width: 720px) {
  .draft-board { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .draft-board .draft-side--right {
    padding-left: .6rem;
    padding-right: 0;
    border-left: 3px solid var(--border-color, rgba(127, 127, 127, .3));
    border-right: 0;
    text-align: left;
  }
  .draft-board .draft-side--right.draft-side--first  { border-left-color: #2563eb; }
  .draft-board .draft-side--right.draft-side--second { border-left-color: #7c3aed; }
  .draft-board .draft-side--right .draft-side-head,
  .draft-board .draft-side--right .draft-bans-rail,
  .draft-board .draft-side--right .draft-pick { flex-direction: row; }
  .draft-board .draft-side--right .draft-pick-order { right: -2px; left: auto; }
  /* Stacked, each side reads on its own, so it needs its own lane labels back. */
  .draft-board .draft-side--right .draft-pick-lane { display: inline-flex; margin-left: auto; margin-right: 0; }
}

/* ── Draft analysis (collapsed by default) ─────────────────────────────────── */
.draft-analysis { margin-top: .6rem; }
.draft-analysis-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border: 1px solid var(--border-color, rgba(127, 127, 127, .3));
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.draft-analysis-toggle::-webkit-details-marker { display: none; }
.draft-analysis-toggle:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.draft-analysis[open] .draft-analysis-toggle { border-color: var(--brand-primary); }

.draft-analysis-body { padding: .7rem .2rem .2rem; }
.draft-analysis-note {
  margin: 0 0 .6rem;
  color: var(--text-muted);
  font-size: .72rem;
  line-height: 1.5;
}

/* Lineup analysis, rendered in the board's centre column between the two drafts.
   Bars are drawn against a fixed 0-10 scale rather than against each other, so a
   6.2 is the same length in every game ever rendered. */
.draft-axes { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.draft-axis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.6rem minmax(0, 1fr);
  align-items: center;
  gap: .35rem;
}
.draft-axis-name {
  text-align: center;
  color: var(--text-muted);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.draft-bar { display: flex; align-items: center; gap: .4rem; min-width: 0; }
/* Both sides put their number outboard and grow their fill toward the centre
   label, so the pair reads as one mirrored scale rather than two charts. */
.draft-bar-track {
  flex: 1;
  height: 8px;
  min-width: 0;
  border-radius: 3px;
  background: rgba(127, 127, 127, .16);
  display: flex;
}
.draft-bar--left .draft-bar-track { justify-content: flex-end; }
.draft-bar-fill { height: 100%; border-radius: 3px; background: #2563eb; }
.draft-bar--right .draft-bar-fill { background: #7c3aed; }
.draft-bar-num {
  color: var(--text-muted);
  font-size: .64rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 1.6rem;
  flex: none;
}
.draft-bar--left .draft-bar-num { text-align: right; }
.draft-bar-num.is-leader { color: var(--text-primary); }

/* Leader marker. Semantic green rather than a side colour -- it means "higher",
   and the sides already own blue and purple. */
.draft-lead { color: var(--status-ongoing, #22c55e); font-size: .8em; margin-right: .15rem; }

.draft-middle {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
  padding: 0 .2rem;
}
.draft-middle-metrics {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--border-color, rgba(127, 127, 127, .25));
}
.draft-metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: .45rem;
}
.draft-metric-num {
  color: var(--text-secondary);
  font-size: .92rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.draft-metric-row .draft-metric-num:first-child { text-align: right; }
.draft-metric-num.is-up { color: var(--status-ongoing, #22c55e); }
.draft-metric-num i { font-size: .72em; margin-right: .1rem; }
.draft-metric-label {
  color: var(--text-muted);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.draft-analysis-foot {
  margin: .2rem 0 0;
  padding-top: .5rem;
  border-top: 1px solid var(--border-color, rgba(127, 127, 127, .25));
  color: var(--text-muted);
  font-size: .64rem;
}

/* Three columns need real room: inside the match page's card the sides get about
   280px each at 900px wide, which is not enough for a mirrored pick row. Below
   1100px the two drafts stay side by side and the analysis drops underneath at
   full width. */
@media (max-width: 1100px) {
  .draft-board--analysed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .draft-middle {
    grid-column: 1 / -1;
    order: 3;
    margin-top: .3rem;
    padding-top: .6rem;
    border-top: 1px solid var(--border-color, rgba(127, 127, 127, .25));
  }
  /* Full width now, so the bars get a proper centre label column back. */
  .draft-axis { grid-template-columns: minmax(0, 1fr) 6rem minmax(0, 1fr); }
}

.draft-strip-side {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .1rem .4rem;
  border-radius: 4px;
  color: #fff;
}
.draft-strip-side.first { background: #2563eb; }
.draft-strip-side.second { background: #7c3aed; }


/* ── Backfill worklist ─────────────────────────────────────────────────────── */
.backfill-list { display: flex; flex-direction: column; gap: .4rem; }

.backfill-row {
  border: 1px solid var(--border-color, rgba(127, 127, 127, .3));
  border-radius: 8px;
  background: var(--bg-card);
  overflow: hidden;
}
.backfill-row.is-recorded { border-color: rgba(34, 197, 94, .45); }

/* Saved work travelling to the bottom of the list. Without the movement being
   visible a submit just reshuffles the page and reads as "did that save?". */
.backfill-row.is-sinking {
  transition: opacity .25s ease, transform .25s ease;
  opacity: 0;
  transform: translateY(12px) scale(.98);
}
.backfill-row.is-landed { animation: backfill-land .7s ease; }

@keyframes backfill-land {
  0%   { opacity: 0; transform: translateY(-10px); }
  40%  { opacity: 1; transform: none; box-shadow: 0 0 0 2px rgba(34, 197, 94, .45); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .backfill-row.is-sinking { transition: none; opacity: 1; transform: none; }
  .backfill-row.is-landed { animation: none; }
}

/* Forfeited match: settled, so no draft is expected. Kept visible rather than
   filtered out so nobody goes hunting for picks that were never played. */
.backfill-row.is-walkover { opacity: .6; border-style: dashed; }
.backfill-row.is-walkover .backfill-state { color: var(--text-muted); }
.backfill-row.is-walkover .backfill-count { font-style: italic; }

/* Another operator has this match open. Advisory only — the row is greyed and
   un-expandable so two people don't type into the same draft. */
.backfill-row.is-locked { opacity: .55; border-style: dashed; }
/* Stand-in for a claimed match that lives on another page of the list. */
.backfill-row.is-ghost .backfill-count { font-style: italic; }
.backfill-row.is-ghost .backfill-summary { cursor: default; }
.backfill-row.is-locked .backfill-summary { cursor: not-allowed; }
.backfill-row.is-locked .backfill-body { display: none; }
.backfill-lock-badge {
  font-size: .72rem;
  color: var(--brand-secondary);
  padding: .05rem .45rem;
  border-radius: 999px;
  background: rgba(127, 127, 127, .16);
  white-space: nowrap;
}

/* The match this tab is holding. Not greyed — it's yours to type into. */
.backfill-row.is-mine { border-color: var(--brand-primary); opacity: 1; }
.backfill-row.is-mine .backfill-lock-badge { color: var(--brand-primary-light, var(--brand-primary)); }

/* ── Crew panel ────────────────────────────────────────────────────────────── */
/* Floats clear of the worklist on wide screens; drops to a normal block above
   the list on narrow ones, where there is no gutter to float into. */
.backfill-crew {
  position: fixed;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 15rem;
  max-height: 70vh;
  overflow-y: auto;
  border: 1px solid var(--border-color, rgba(127, 127, 127, .3));
  border-radius: 10px;
  background: var(--bg-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  font-size: .8rem;
}

.backfill-crew-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .7rem;
  cursor: pointer;
  color: var(--text-secondary);
  list-style: none;
}
.backfill-crew-head::-webkit-details-marker { display: none; }
.backfill-crew[open] .backfill-crew-head {
  border-bottom: 1px solid var(--border-color, rgba(127, 127, 127, .3));
}
.backfill-crew-count {
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.backfill-crew-label { color: var(--text-muted); font-size: .75rem; }

.backfill-crew-list { list-style: none; margin: 0; padding: .35rem; }
.backfill-crew-item {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  padding: .35rem .4rem;
  border-radius: 6px;
}
.backfill-crew-item.is-me { background: rgba(127, 127, 127, .12); }
.backfill-crew-item strong {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
  font-size: .78rem;
}
.backfill-crew-what {
  display: block;
  color: var(--text-muted);
  font-size: .72rem;
  line-height: 1.25;
}
/* Their match is not rendered in this viewer's filter/page, so no row here can
   grey out. Said plainly so the absence does not read as a broken lock. */
.backfill-crew-elsewhere { color: var(--text-muted); font-size: .68rem; opacity: .85; }

.backfill-crew-dot {
  flex: none;
  width: .5rem;
  height: .5rem;
  margin-top: .3rem;
  border-radius: 50%;
  background: var(--text-muted);
}
.backfill-crew-dot.is-busy { background: #22c55e; }

@media (max-width: 1400px) {
  .backfill-crew {
    position: static;
    transform: none;
    width: auto;
    max-width: 72rem;
    margin: 1rem auto 0;
    max-height: none;
  }
}

.backfill-summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .6rem .8rem;
  cursor: pointer;
  font-size: .85rem;
  color: var(--text-secondary);
  list-style: none;
}
.backfill-summary::-webkit-details-marker { display: none; }
.backfill-summary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }

.backfill-state { color: var(--text-muted); flex: none; }
.backfill-row.is-recorded .backfill-state { color: #22c55e; }

.backfill-teams { font-weight: 600; color: var(--text-primary); }
.backfill-meta {
  font-size: .75rem;
  color: var(--text-muted);
  padding: .05rem .4rem;
  border-radius: 4px;
  background: rgba(127, 127, 127, .12);
  white-space: nowrap;
}
.backfill-shots { color: var(--text-muted); font-size: .8rem; display: inline-flex; gap: .2rem; }
.backfill-count {
  margin-left: auto;
  font-size: .75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.backfill-body {
  padding: .8rem;
  border-top: 1px solid var(--border-color, rgba(127, 127, 127, .25));
}
.backfill-body .draft-shot-pane img { max-height: 320px; width: auto; }

.backfill-pager {
  display: flex;
  align-items: center;
  gap: .8rem;
  justify-content: center;
  margin-top: 1rem;
}

.manual-stats-table input[type="number"] {
  width: 100%;
  padding: .25rem .4rem;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .draft-game-tab { transition: none; }
}