/* Combined page only — reuses styles.css's variables/cell classes (.cell,
 * .team-pill, .chip, .row.gold etc all still apply since combined.js
 * outputs the same class names), but defines its OWN grid template since
 * the column count differs (two day-groups + three total columns) from the
 * single-day board's `.board-head, .row` template in styles.css. */

/* Its own independent scroll region (like .feed), separate from the rest
 * of the page — same pattern as styles.css's .board, see that comment. */
.cboard {
  position: sticky; top: 108px;
  flex: none; width: max-content;
  max-height: var(--panel-max-h);
  overflow: auto;
  overscroll-behavior: contain;   /* don't chain scroll to the page once the board hits an edge */
}

/* .cboard-head is a plain (non-grid) sticky wrapper around its two child
 * rows (group-row, letter-row), each its OWN independent grid — it must
 * NOT also declare display:grid itself, or its children get auto-placed
 * into ITS grid cells instead of just stacking, which silently breaks
 * width:max-content propagation up to .cboard (manifests as the board's
 * apparent width being too narrow, overlapping the feed sidebar next to
 * it — happened once already, worth the warning). */
.cboard-head {
  position: sticky;
  top: 0;   /* sticks to the top of .cboard's OWN scroll box now that it
               scrolls independently, not the top of the whole page */
  z-index: 10;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  width: max-content;
  /* Opaque, covering the full bounding box — otherwise rows scrolled
   * underneath peek through the gaps between header cells (same fix as
   * styles.css's .board-head). */
  background: var(--bg);
}
.cboard-group-row, .cboard-letter-row {
  display: grid;
  grid-template-columns: 35px 365px var(--c-task-cols);
  column-gap: 3px;
  width: max-content;
}
.cboard-group-row { height: 22px; margin-bottom: 3px; }
.cboard-letter-row { height: 36px; margin-bottom: 8px; }
.th-corner { background: transparent; }
.th-group {
  display: flex; align-items: center; justify-content: center;
  background: var(--rose-deep); color: var(--rose-ink);
  border-radius: 4px; font-size: 12px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase;
  /* The first task column under it (.th-task.first-task, styles.css) has
   * its own 6px left margin for the wider gap after Contestant — without
   * matching it here, the "DAY 1"/"DAY 2" bar's left edge sits 6px left of
   * where the "A" column actually starts. */
  margin-left: 6px;
}
.cboard-letter-row > div {
  padding: 0 8px; display: flex; align-items: center;
  background: var(--rose); border-radius: 4px;
}
.cboard-letter-row .th-task { flex-direction: column; align-items: center; justify-content: center; padding: 0 2px; }
.cboard-letter-row .th-task .tname { font-size: 20px; font-weight: 800; line-height: 1.1; }
.th-grand { font-weight: 800; }

.crow {
  display: grid;
  grid-template-columns: 35px 365px var(--c-task-cols);
  align-items: stretch;
  column-gap: 3px;
  width: max-content;
  position: absolute; left: 0; right: 0; height: 30px; margin-bottom: 10px;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.cell.sum.grand .total { font-size: 17px; }

/* Ruler: a visible break between Day 1's tail ticks and Day 2's head ticks —
 * the scrub VALUE space has no gap (dragging crosses it in one motion), this
 * is purely the visual cue that a day boundary/overnight gap is there. */
.day-gap {
  position: absolute; top: -4px; bottom: -4px; width: 0;
  border-left: 2px dashed var(--border-strong);
}