/* lane-draw-public.css - ANC Public Draw Viewer */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pub-bg:       #0a0a12;
  --pub-surface:  #12121e;
  --pub-card:     #1a1a2e;
  --pub-border:   rgba(255,255,255,0.08);
  --pub-text:     #f0f0f8;
  --pub-muted:    #8888aa;
  --pub-accent:   #6366f1;
  --pub-green:    #10B981;
  --pub-amber:    #F59E0B;
  --pub-gold:     #fbbf24;
  --pub-radius:   10px;
  --pub-radius-sm: 6px;
  --pub-font:     'Inter', system-ui, sans-serif;
  --pub-shadow:   0 4px 24px rgba(0,0,0,0.4);
}

html { font-size: 15px; scroll-behavior: smooth; }

body {
  background: var(--pub-bg);
  color: var(--pub-text);
  font-family: var(--pub-font);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ─────────────────────────────────────────────────── */

/* Every pixel spent here is a game pushed off the bottom of the screen. The banner still has
   to look like something, but 28px of dead air top and bottom is not what makes it. */
.pub-header {
  background: linear-gradient(135deg, #0d0d1a 0%, #1a1a3e 50%, #0d1a2e 100%);
  border-bottom: 1px solid rgba(99,102,241,0.3);
  padding: 12px 0;
  position: relative;
  overflow: hidden;
}

.pub-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,241,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.pub-header-inner {
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
}

.pub-logo {
  height: 56px;
  width: auto;
  flex-shrink: 0;
  filter: brightness(1.1);
}

.pub-header-info { flex: 1; }
.pub-header-info-fixed { flex: 0 0 auto; max-width: 320px; }

.pub-event-name {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: 4px;
}

.pub-event-sub {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pub-accent);
  margin-bottom: 6px;
}

.pub-event-venue {
  font-size: 0.82rem;
  color: var(--pub-muted);
  margin-bottom: 4px;
}

.pub-event-dates {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}



.pub-header-meta {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
  align-self: center;
}

.pub-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius);
  padding: 12px 20px;
  min-width: 72px;
}

.pub-meta-val {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.pub-meta-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pub-muted);
  margin-top: 4px;
}


/* ── Legend ─────────────────────────────────────────────────── */

.pub-legend {
  background: var(--pub-surface);
  border-bottom: 1px solid var(--pub-border);
  padding: 7px 0;
}

.pub-legend-inner {
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.pub-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pub-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pub-legend-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pub-text);
}

.pub-legend-note {
  font-size: 0.75rem;
  color: var(--pub-muted);
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  padding: 1px 6px;
}

.pub-legend-note-item { margin-left: auto; }

.pub-legend-note-text {
  font-size: 0.75rem;
  color: var(--pub-muted);
  font-style: italic;
}

/* ── Main ────────────────────────────────────────────────────── */

/* Tight. Every row of padding here is a row of the draw pushed off the screen. */
.pub-main {
  padding: 8px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Stage Sections ──────────────────────────────────────────── */

.pub-stage { }

.pub-stage-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.pub-stage-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 14px;
  border-radius: 20px;
}

.pub-stage-1 .pub-stage-label {
  background: rgba(99,102,241,0.15);
  color: #a5b4fc;
  border: 1px solid rgba(99,102,241,0.3);
}

.pub-stage-2 .pub-stage-label {
  background: rgba(16,185,129,0.12);
  color: #6ee7b7;
  border: 1px solid rgba(16,185,129,0.3);
}

.pub-stage-pos .pub-stage-label {
  background: rgba(251,191,36,0.12);
  color: #fde68a;
  border: 1px solid rgba(251,191,36,0.3);
}

/* ── Table ───────────────────────────────────────────────────── */

.pub-stage {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pub-table {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--pub-card);
  border-radius: var(--pub-radius);
  overflow: hidden;
  border: 1px solid var(--pub-border);
  box-shadow: var(--pub-shadow);
}

/* Wide houses. With 8 or more lane pairs the default 900px leaves each matchup
   column too narrow for a real team name, so give the table a proper width and
   let .pub-stage scroll it horizontally. Capped below the 1800px viewport the
   PDF exporter renders at, so the printed draw is never clipped. */
.pub-table-wide {
  min-width: 1760px;
}

.pub-table thead tr {
  background: rgba(255,255,255,0.04);
}

.pub-table th {
  padding: 10px 14px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pub-muted);
  text-align: left;
  border-bottom: 1px solid var(--pub-border);
  white-space: nowrap;
}

.pub-th-game  { width: 52px; text-align: center; }
.pub-th-time  { width: 70px; }
.pub-th-lanes {
  width: auto;
}

.pub-th-lanes-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
}

.pub-th-lane-left  { text-align: left; }
.pub-th-lane-right { text-align: right; }


.pub-table tbody tr {
  transition: background 0.1s;
}

.pub-table tbody tr:hover {
  background: rgba(255,255,255,0.025);
}

.pub-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--pub-border);
}

.pub-table td {
  padding: 10px 14px;
  vertical-align: middle;
}

/* Game number cell */
.pub-td-game {
  text-align: center;
  width: 68px;
}

.pub-game-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pub-text);
}

.pub-row-pos .pub-game-num {
  background: rgba(251,191,36,0.15);
  color: var(--pub-gold);
}

.pub-pos-badge {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--pub-gold);
  margin-top: 3px;
  letter-spacing: 0.05em;
}

.pub-td-time {
  font-size: 0.75rem;
  color: var(--pub-muted);
  white-space: normal;
  line-height: 1.3;
}

.pub-time-clock {
  display: block;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.9);
  font-weight: 700;
}

/* Matchup cells */
.pub-td-matchup {
  padding: 6px 8px;
  overflow: hidden;
}

.pub-matchup {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  border-radius: var(--pub-radius-sm);
  /* 8px of side padding was costing the two team halves 4px each, which was the whole reason
     "Bullfrogs" would not fit: the half measured 49px and the name needed 51px. The room was
     there, it was just being spent on padding. */
  padding: 5px 3px;
  background: rgba(255,255,255,0.03);
}

/* The teams themselves. Sits inside .pub-matchup so a division chip can stack
   above it without stealing horizontal room from the team names or logos. */
.pub-matchup-row {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

/* Division chip. Both sides of a matchup are always in the same division, so it
   is shown once here rather than repeated in every team name. Only appears on
   events whose teams sit under a category. */
.pub-div-chip {
  display: block;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}

.pub-matchup-chipped {
  padding-top: 2px;
}

.pub-matchup-tinted {
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Tint colours now handled by .pub-accent-green and .pub-accent-amber classes */

.pub-team {
  flex: 1;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  line-height: 1.25;
}

.pub-team-left  { text-align: left; }
.pub-team-right { text-align: right; }

.pub-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pub-text);
}

/* ── Franchise logos ─────────────────────────────────────────
   A team renders as its franchise logo where one exists, and falls back to its
   name where one does not, so a draw stays readable while logos are still being
   collected. The wrapper keeps .pub-name and data-team-id in both cases, so the
   highlight picker needs no changes. */
.pub-name-logo {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0;
}

.pub-team-left  .pub-name-logo { justify-content: flex-start; }
.pub-team-right .pub-name-logo { justify-content: flex-end; }

/* A FIXED BOX, not a max-height.
   With max-height only, a wide logo renders short and a tall one renders full height, so the
   short name underneath lands at a different baseline in every single cell and the row looks
   like a broken keyboard. A fixed height with object-fit: contain gives every logo the same
   box, the logo sits centred inside it at whatever aspect it likes, and every short name in
   the row lines up. */
.pub-team-logo {
  display: block;
  width: 100%;
  height: 42px;
  object-fit: contain;
}

/* A logo with no alpha channel carries its own background, so give it a light
   plate instead of letting it sit as a hard block on the dark cell. */
.pub-team-logo-solid {
  background: #fff;
  border-radius: 4px;
  padding: 2px;
}

.pub-pos {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pub-muted);
}

.pub-seed {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--pub-muted);
}

.pub-bye {
  font-size: 0.75rem;
  color: #555;
  font-style: italic;
}

.pub-empty {
  color: rgba(255,255,255,0.1);
  font-size: 0.8rem;
}

.pub-vs {
  font-size: 0.72rem;
  font-weight: 900;
  color: #ef4444;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Position round row */
.pub-row-pos td {
  background: rgba(251,191,36,0.04);
}

/* Stage 2 rows get subtle split indicator */
.pub-stage-2 .pub-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ── Footer ──────────────────────────────────────────────────── */

.pub-footer {
  background: var(--pub-surface);
  border-top: 1px solid var(--pub-border);
  padding: 16px 0;
}

.pub-footer-inner {
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--pub-muted);
}

.pub-updated { opacity: 0.6; }

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 900px) {
  .pub-header-inner { flex-wrap: wrap; gap: 20px; }
  .pub-header-meta  { gap: 12px; }
  .pub-meta-item    { padding: 10px 14px; min-width: 60px; }
  .pub-meta-val     { font-size: 1.4rem; }
  .pub-event-name   { font-size: 1.6rem; }
  .pub-main         { padding: 20px 16px 40px; }
  .pub-legend-inner { padding: 0 16px; }
  .pub-header-inner { padding: 0 16px; }
  .pub-footer-inner { padding: 0 16px; flex-direction: column; gap: 4px; text-align: center; }
}

@media (max-width: 600px) {
  .pub-logo  { height: 40px; }
  .pub-event-name { font-size: 1.3rem; }
  .pub-table { font-size: 0.78rem; }
  .pub-matchup { padding: 4px 6px; }
  .pub-matchup-row { flex-direction: column; gap: 2px; }
  .pub-team-left, .pub-team-right { text-align: center; }
  .pub-team-left .pub-name-logo, .pub-team-right .pub-name-logo { justify-content: center; }
  .pub-vs { display: none; }
}

/* ── Team selector + PDF button ─────────────────────────────── */

.pub-legend-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.pub-team-select {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-sm);
  color: var(--pub-text);
  font-family: var(--pub-font);
  font-size: 0.82rem;
  padding: 6px 10px;
  cursor: pointer;
  min-width: 200px;
}

.pub-team-select option {
  background: #1a1a2e;
  color: var(--pub-text);
}

.pub-pdf-btn,
.pub-img-btn {
  border: none;
  border-radius: var(--pub-radius-sm);
  color: #fff;
  font-family: var(--pub-font);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.pub-pdf-btn {
  background: var(--pub-accent);
}

.pub-img-btn {
  background: #0f7a55;
}

.pub-pdf-btn:disabled,
.pub-img-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.pub-pdf-btn:hover   { opacity: 0.85; }
.pub-pdf-btn:disabled { opacity: 0.5; cursor: wait; }

/* ── Days ────────────────────────────────────────────────────
   A game's day is derived from the date on its start time, so segmentation is
   automatic. A draw whose games carry no date renders unsegmented, as before. */
.pub-day {
  padding: 14px 16px 16px;
  margin-bottom: 18px;
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--pub-radius);
}

.pub-day:last-child { margin-bottom: 0; }

.pub-day-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 6px 4px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pub-day-label {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pub-text);
}

.pub-day-date {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--pub-muted);
}

.pub-day-games {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* A day that carries on under the next stage header. */
.pub-day-cont {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--pub-muted);
}

/* ── Lane conditioning ───────────────────────────────────────
   Full width row sitting immediately before the game it precedes. */
.pub-cond-row td {
  background: rgba(245,158,11,0.10);
  border-top: 2px dashed rgba(245,158,11,0.55);
  border-bottom: 2px dashed rgba(245,158,11,0.55);
  padding: 8px 12px;
  text-align: center;
}

.pub-cond-icon {
  color: #f59e0b;
  margin-right: 8px;
  font-size: 0.7rem;
  vertical-align: middle;
}

.pub-cond-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fcd34d;
}

.pub-cond-time {
  margin-left: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(252,211,77,0.75);
}

/* ── Team name highlight ─────────────────────────────────────── */

.pub-name-highlight {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000 !important;
  font-weight: 800 !important;
  border-radius: 4px;
  padding: 2px 6px;
  box-shadow: 0 0 10px rgba(251,191,36,0.65), 0 2px 4px rgba(0,0,0,0.3);
  letter-spacing: 0.01em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 1.7;
}

/* Highlight and dim on a logo. The JS has always added .pub-name-dim, but no
   rule ever existed for it, so dimming did nothing. Both states now work
   whether the team renders as a logo or as text. */
/* The gold plate must not STEAL WIDTH from the short name.
   Bullfrogs was being cut to BULLFR... while Scorpions sat next to it in full - same nine
   letters. The difference was the highlight: its horizontal padding ate into the same 100%
   width, so the name had less room to render in and ellipsised early. Only the highlighted
   team was ever affected, which is exactly the team you are looking for.

   border-box keeps the padding inside the width instead of on top of it, and the plate is
   stretched back out with a negative margin so the text keeps the full cell. */
.pub-name-logo {
  box-sizing: border-box;
}
.pub-name-logo.pub-name-highlight {
  padding: 2px 3px;
  /* The negative margin slides the gold plate outwards, but it does NOT give the CONTENT its
     width back - width:100% is still 100% of the parent, and the padding is then taken out of
     the inside of it. So the width has to be grown explicitly by exactly the padding, or the
     highlighted team - the one team you are actually looking for - is the only one whose name
     gets cut off. */
  width: calc(100% + 6px);
  margin: 0 -3px;
  line-height: 1;
}

.pub-name-dim {
  opacity: 0.3;
}

.pub-name-dim .pub-team-logo {
  filter: grayscale(1);
}

.pub-row-highlight .pub-game-num {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000;
  font-weight: 800;
  box-shadow: 0 0 8px rgba(251,191,36,0.5);
}

/* ── PDF / print mode ────────────────────────────────────────── */

.pub-no-print { }

@media print {
  .pub-no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .pub-header {
    background: #fff !important;
    border-bottom: 2px solid #000 !important;
    padding: 10px 0 !important;
  }
  .pub-event-name {
    background: none !important;
    -webkit-text-fill-color: #000 !important;
    color: #000 !important;
  }
  .pub-event-sub, .pub-event-venue, .pub-event-dates { color: #444 !important; }
  .pub-meta-item { background: #f0f0f0 !important; border-color: #ccc !important; }
  .pub-meta-val, .pub-meta-label { color: #000 !important; }
  .pub-main { padding: 8px !important; }
  /* NOT 'avoid'. The draw is now ONE merged table of forty squads: telling the browser to
     keep it on a single page makes it overflow and clip. Break wherever it needs to, just
     never through the middle of a game. */
  .pub-stage { page-break-inside: auto; }
  .pub-table tr { page-break-inside: avoid; }
  .pub-table thead { display: table-header-group; }
  .pub-table { background: #fff !important; border-color: #ccc !important; box-shadow: none !important; }
  .pub-table th { background: #f0f0f0 !important; color: #000 !important; border-color: #ccc !important; }
  .pub-table td { color: #000 !important; border-color: #eee !important; }
  .pub-matchup { background: #fff !important; border: none !important; }
  .pub-name, .pub-pos, .pub-seed, .pub-tba-tag, .pub-tba-pos { color: #000 !important; }
  .pub-vs { color: #cc0000 !important; }
  .pub-game-num { background: #eee !important; color: #000 !important; }
  .pub-stage-label { border-color: #ccc !important; background: #f5f5f5 !important; color: #000 !important; }
  .pub-footer { background: #fff !important; border-top: 1px solid #ccc !important; }
  .pub-footer-inner { color: #666 !important; }
  .pub-logo { filter: none !important; }
  .pub-accent-green .pub-matchup-tinted {
    background: rgba(16,185,129,0.1) !important;
    border-color: rgba(16,185,129,0.4) !important;
  }
  .pub-accent-amber .pub-matchup-tinted {
    background: rgba(245,158,11,0.1) !important;
    border-color: rgba(245,158,11,0.4) !important;
  }
}

/* Puppeteer pdf=1 mode - dark theme preserved, controls hidden */
.pub-pdf-mode .pub-no-print { display: none !important; }

/* CSP-safe accent classes replacing inline --cell-accent */
.pub-accent-green .pub-matchup-tinted {
  background: rgba(16,185,129,0.07);
  border-color: rgba(16,185,129,0.2);
}

.pub-accent-amber .pub-matchup-tinted {
  background: rgba(245,158,11,0.07);
  border-color: rgba(245,158,11,0.2);
}

/* ── Event banner (inside header) ───────────────────────────── */
.pub-header-banner {
  flex: 1;
  min-width: 0;
  padding: 4px 16px;
  align-self: stretch;
  display: flex;
  align-items: stretch;
}

.pub-header-banner-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  border-radius: 6px;
}

/* ── Divisions ──────────────────────────────────────────────────────────────
   The Adult Clash runs Mens and Ladies over the SAME twenty lanes at DIFFERENT
   times, so each division gets its own table rather than being crushed into one
   grid where one would overwrite the other. Draws with a single division (Junior
   Clash, ANC|50) never emit these wrappers and are untouched. */
.pub-division {
  display: block;
  margin: 0 0 3rem;
}
.pub-division + .pub-division {
  padding-top: 2.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pub-division-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pub-div-colour) 26%, transparent) 0%,
    color-mix(in srgb, var(--pub-div-colour) 6%, transparent) 60%,
    transparent 100%);
  border-left: 4px solid var(--pub-div-colour);
}
.pub-division-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pub-div-colour);
  flex: 0 0 auto;
}
.pub-division-name {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
}
.pub-division-meta {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 700px) {
  .pub-division-meta { display: none; }
}

/* ── Merged divisions ─────────────────────────────────────────
   The Mens and the Ladies now sit in ONE day-ordered table rather than two separate draws,
   because that is how the day actually runs at the centre. The division is carried by
   colour on the row and a short tag under the game number, so nothing is lost by putting
   them together. */
.pub-row-divided,
.pub-cond-row.pub-row-divided {
  border-left: 4px solid var(--pub-div-colour, transparent);
}
.pub-row-divided .pub-game-num {
  background: var(--pub-div-colour, #6366f1);
  color: #fff;
}
.pub-row-div {
  display: block;
  margin-top: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pub-div-colour, #6366f1);
  white-space: nowrap;
}
.pub-cond-div {
  margin-left: 0.6rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pub-div-colour, #6366f1);
}

/* The opponent of a highlighted team is NOT dimmed. When you look your own team up, the
   one thing you want to read off the page is who you are bowling. It is not tinted gold
   either - gold means "this is you". It is simply left alone. */

/* Without min-width:0 a flex child will not shrink below its content, so the short name
   forces the cell wider instead of ellipsising. */
.pub-team { min-width: 0; }

/* ── Lane columns: alternating bands ──────────────────────────
   Twenty lanes is a lot of columns to track across. Banding pair by pair is what stops the
   eye sliding onto the wrong lane halfway along the row. */
/* background-COLOR, not the `background` shorthand.
   The shorthand resets background-image to none, and this rule outweighs the division wash on
   specificity - so the wash was being WIPED on every alternating column. On the Juniors that
   is catastrophic: Boys and Girls alternate pair by pair, so exactly half the divisions ended
   up with no shading at all. And since Logan Wolves Boys and Logan Wolves Girls both read
   WOLVES, the shading is the ONLY thing distinguishing those two cells. */
.pub-table th.pub-col-alt,
.pub-table td.pub-col-alt {
  background-color: rgba(255, 255, 255, 0.045);
}
.pub-table tr:hover td.pub-col-alt {
  background-color: rgba(255, 255, 255, 0.075);
}

/* The lane numbers are the whole navigation of this table, so they are white, not grey. */
.pub-th-lane-left,
.pub-th-lane-right {
  color: #ffffff;
  font-weight: 700;
  opacity: 1;
}

/* ── Short name under the logo ────────────────────────────────
   At postage-stamp size a lot of the logos are genuinely hard to tell apart, and finding your
   own team fast is the entire job of a lane draw. */
.pub-name-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  width: 100%;
  min-width: 0;
}
/* The name gets the FULL width of its half of the cell, not just the width of the logo,
   so "Revolution" and "Renegades" read in full instead of "REVOLUT..." */
.pub-team-short {
  display: block;
  width: 100%;
  color: #ffffff;
  font-size: 0.55rem;
  font-weight: 700;
  /* No letter-spacing. At this size it buys nothing legible and costs a character. */
  letter-spacing: 0;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A dimmed team dims its short name with it. */
.pub-name-dim .pub-team-short { opacity: 0.35; }

/* HIGHLIGHTED: BLACK, not white and certainly not gold.
   The highlight paints a gold plate behind the team. The short name defaults to white, which
   is unreadable on it, and an earlier rule here set it to gold - gold on gold, invisible. The
   container already declares black; the name has to say so itself or its own colour wins on
   specificity. */
.pub-name-highlight .pub-team-short {
  color: #000000;
  text-shadow: none;
}

/* ── Pagination ───────────────────────────────────────────────
   THE PDF IS RENDERED WITH puppeteer emulating SCREEN media, so @media print rules do not
   apply to it at all. Anything that has to survive a page break must live out here, in the
   base stylesheet, or games get sliced in half at the bottom of every sheet. That is exactly
   what was happening. */
.pub-table tr {
  break-inside: avoid;
  page-break-inside: avoid;
}
.pub-table thead {
  display: table-header-group;      /* lane numbers repeat at the top of every page */
}
.pub-table tbody { break-inside: auto; }
.pub-table,
.pub-stage,
.pub-day { break-inside: auto; page-break-inside: auto; }
.pub-day-header { break-after: avoid; page-break-after: avoid; }

/* ── Divisions bowling SIDE BY SIDE in one game (the Junior shape) ─────────────
   The Adults have one division per row: Mens and Ladies share the lanes but bowl at different
   times, so the row carries the colour. The Juniors are the other shape entirely - Boys and
   Girls bowl SIMULTANEOUSLY, alternating pair by pair, so the division changes cell by cell
   ACROSS a single row. A row-level colour would be a lie there, so the cells carry it. */
/* A SOFT WASH, not coloured rules.
   The first cut drew a 2px division-coloured border down the edge of every cell where Boys
   met Girls and a 3px bar under each one. On a twenty lane grid that is eighteen pink and
   blue lines across every row, and it looked like a fault, not a draw.

   The division now reads as a low tint filling the cell, which is quieter and covers more
   area, so it is actually easier to scan. Where the division changes, the separator is a
   plain neutral rule - it says "these are different" without shouting a colour at you. */
/* The wash fills the WHOLE cell and is strong enough to read at a glance. On the Juniors it is
   not decoration - it is the only thing separating a Boys cell from a Girls cell, because both
   read the same franchise short name. */
.pub-row-split .pub-td-divided {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pub-div-colour, transparent) 22%, transparent) 0%,
    color-mix(in srgb, var(--pub-div-colour, transparent) 12%, transparent) 100%
  ) !important;
}
/* A browser with no color-mix still has to show SOMETHING, or half the draw is ambiguous. */
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
  .pub-row-split .pub-td-divided {
    background-image: none !important;
    box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.02),
                inset 0 -3px 0 0 var(--pub-div-colour, transparent);
  }
}
.pub-td-matchup.pub-div-edge {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
/* A split row has no single division, so the game cell must not claim one. */
.pub-row-split .pub-game-num {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* The division legend rides in the TOOLBAR, alongside the highlight picker, rather than taking
   a strip of its own. On a twenty lane draw vertical space is worth more than tidiness. */
.pub-legend-div .pub-legend-name {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pub-div-legend-swatch {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--pub-div-colour, #6366f1);
  flex: none;
}

/* ── The game and time columns are NOT part of the draw ───────────────────────
   They had no background at all, so they painted nothing and simply showed whatever was
   behind them. Sat next to a division wash that fills its cell edge to edge, the colour reads
   straight across into the date and the time and the row stops having a clean left edge.

   They are opaque now, and they sit above the wash, so the shading stops dead at the first
   lane. A division belongs to LANES, not to a clock. */
.pub-table td.pub-td-game,
.pub-table td.pub-td-time,
.pub-table th.pub-th-game,
.pub-table th.pub-th-time {
  background-color: var(--pub-surface);
  position: relative;
  z-index: 1;
}
/* A rule where the timing ends and the lanes begin, so the eye has a hard edge to start from. */
.pub-table td.pub-td-time,
.pub-table th.pub-th-time {
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}
/* Keep the hover state readable rather than punching a hole in it. */
.pub-table tbody tr:hover td.pub-td-game,
.pub-table tbody tr:hover td.pub-td-time {
  background-color: #171726;
}
/* An oil break spans the whole table, so it must not be cut in half by the opaque columns. */
.pub-cond-row td {
  position: relative;
  z-index: 2;
}

/* Position round slot with no team yet. The standings have not been struck, so
   the slot says TBA and carries the finishing position that will fill it. */
.pub-tba {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  gap: 2px;
}
.pub-tba-tag {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #e8e8ee;
  background: rgba(229, 62, 62, 0.22);
  border: 1px solid rgba(229, 62, 62, 0.45);
  border-radius: 4px;
  padding: 1px 7px;
}
.pub-tba-pos {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--pub-muted);
  text-transform: uppercase;
}