/* cup-draw-public.css - ONLY what the Cup grid needs.
 *
 * The shell comes from lane-draw-public.css, loaded first: header, legend bar,
 * table skin, day sections, footer, print rules.
 *
 * Same orientation as the Clash draw: LANES ACROSS, blocks down.
 *
 * The Clash has ten pair columns. The Cup has twenty lane columns, so the cells
 * have to be half the width to fit the page. They do fit, because a Cup cell is
 * a short stack of logo plus surname, not two full team names either side of a
 * "v". The table is laid out fixed and sized to the viewport, so it does not
 * scroll sideways.
 */

/* ---- fit the page ------------------------------------------------------ */

/* lane-draw-public.css puts min-width 900px on .pub-table (and 1760px on
   .pub-table-wide) because a Clash pair cell needs room for two team names.
   That min-width is what forces a sideways scroll. The Cup sizes its own
   columns instead. */
.pub-table.cup-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.cup-table .cup-th-block,
.cup-table .cup-td-block { width: 52px; }
.cup-table .cup-th-time,
.cup-table .cup-td-time  { width: 64px; }

/* every lane column shares what is left, evenly */
.cup-table .cup-th-lane,
.cup-table .cup-td-lane  { width: auto; }

/* ---- the lane column header -------------------------------------------- */

/* The division is shown by TINTING the whole column, the same way the Clash
   washes a divided cell. A coloured line down the edge of a cell is easy to miss
   and, on a Cup, the division is the only thing telling a Girls lane from a Boys
   lane, because both carry the same franchise logos. */
.cup-th-lane {
  padding: 5px 2px;
}
.cup-th-lane.cup-has-div {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cup-div, transparent) 30%, transparent) 0%,
    color-mix(in srgb, var(--cup-div, transparent) 16%, transparent) 100%
  );
  box-shadow: inset 0 -3px 0 0 var(--cup-div, transparent);
}
.cup-th-lane .pub-th-lanes-inner { justify-content: center; }
.cup-th-lane-num {
  color: #ffffff;          /* same as the Clash draw, which renders its lane numbers white */
  font-size: 12px;
  font-weight: 800;
}

/* ---- a cell: the people on that lane in that block ---------------------- */

.cup-td-lane {
  vertical-align: top;
  padding: 4px 2px;
}
.cup-td-lane.cup-has-div {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cup-div, transparent) 22%, transparent) 0%,
    color-mix(in srgb, var(--cup-div, transparent) 12%, transparent) 100%
  );
}

/* A browser with no color-mix still has to show something, or the divisions are
   ambiguous. Same fallback the Clash uses. */
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
  .cup-td-lane.cup-has-div,
  .cup-th-lane.cup-has-div {
    background-image: none;
    box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.02),
                inset 0 -3px 0 0 var(--cup-div, transparent);
  }
}

.cup-lane-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cup-lane-row {
  display: flex;
  align-items: center;
  min-width: 0;
}
.cup-lane-row + .cup-lane-row {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Logo ABOVE the surname, the same as the Clash. Putting the logo beside the name
   eats half a 60px column and every surname ends up cut off with an ellipsis,
   which is useless: the name is the thing people are looking for. Stacked, the
   surname gets the full column width. */
.cup-lane-row {
  width: 100%;
}
.cup-lane-row .pub-name,
.cup-lane-row .pub-name-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  width: 100%;
}
.cup-lane-row .pub-team-logo {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
/* First name and surname on separate lines, each getting the full column width.
   Side by side they would not fit a 60px column and both would be cut off. */
/* ONE LINE, always. A name never wraps and never gets an ellipsis: if it is too
   long for the column it is SHRUNK to fit. The browser does this on its own with
   a fitted font size scaled to the column, so a long surname just renders a
   little smaller rather than breaking across two lines. */
.cup-lane-row .cup-first,
.cup-lane-row .pub-team-short {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;          /* so the fitter can measure the overflow */
}
.cup-lane-row .cup-first {
  font-size: 9px;            /* starting point. cup-draw-public.js shrinks it if it does not fit. */
  font-weight: 500;
  opacity: 0.75;
}
.cup-lane-row .pub-team-short {
  font-size: 10px;           /* starting point. shrunk to fit if the surname is long. */
  font-weight: 700;
}

/* dim and highlight have to reach the first name too */
.pub-name-dim .cup-first { opacity: 0.3; }
.pub-name-highlight .cup-first { opacity: 1; }

/* The gold highlight on the Cup is a PLATE LAYER behind the bowler, not a
   background on the name span. The cup cells collapse to a few pixels (their
   content deliberately overflows), so plating the span painted a sliver with a
   glow smear, and any content-sized plate either vanished or spilled across
   neighbouring lanes. The plate is a fixed-width layer, centred under the
   bowler's stack: wide enough to wrap the logo and the fitted name, narrower
   than any lane column, so it can never touch a neighbour. The name keeps its
   fitted size and weight - the plate changes NO text metrics, so a name that
   fit before the gold still fits on it. */
.cup-lane-row {
  position: relative;
}
.cup-lane-row.cup-hl-card::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  top: -2px;
  bottom: -2px;
  /* Identical treatment to the Clash highlight, which is the benchmark: same
     gradient, same 4px radius, same glow. The cup plate is the cup's equivalent
     of the Clash cell plate - gold wrapping the logo and the name as one unit. */
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.65), 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 0;
}
.cup-lane-row.cup-hl-card > * {
  position: relative;
  z-index: 1;
}
/* Kill the shell's per-name gold entirely on cup rows - the plate does the job.
   No background, no glow, no weight change, no padding: text metrics identical
   to the unhighlighted state, so the fitter's sizing always holds. */
.cup-lane-row .pub-name-highlight,
.cup-lane-row .pub-name-logo.pub-name-highlight {
  background: none !important;
  box-shadow: none !important;
  font-weight: inherit !important;
  padding: 0 !important;
  width: 100%;
  margin: 0;
  letter-spacing: 0;
  line-height: inherit;
  border-radius: 0;
}
.cup-lane-row .pub-name-highlight .cup-first,
.cup-lane-row .pub-name-highlight .pub-team-short {
  color: #000 !important;
  font-weight: inherit !important;
}

/* And no ellipsis, ever. The shell puts one on .pub-team-short. A name is shrunk
   to fit, not cut off. */
.cup-lane-row .cup-first,
.cup-lane-row .pub-team-short {
  text-overflow: clip;
}

/* ---- the block column -------------------------------------------------- */

/* A block is the games bowled on a lane before moving, so the block cell says
   which games it covers. A Clash game column carries one game number and needs
   no such thing. */
.cup-td-block { white-space: nowrap; }
.cup-block-games {
  display: block;
  font-size: 9px;
  font-weight: 600;
  opacity: 0.6;
  margin-top: 1px;
}

/* ---- squad picker, in the legend bar ----------------------------------- */

.cup-legend-squads { gap: 5px; }

.cup-squad-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.cup-squad-chip:hover { background: rgba(255, 255, 255, 0.1); }
.cup-squad-chip--on   { border-color: #6366f1; background: rgba(99, 102, 241, 0.22); }

.cup-div-legend .pub-div-legend-swatch { background: var(--cup-div, transparent); }

/* ---- the legend bar must fit too --------------------------------------- */

.pub-legend-inner    { flex-wrap: wrap; }
.pub-legend-controls { flex-wrap: wrap; min-width: 0; }

/* ---- narrow screens ---------------------------------------------------- */

/* Twenty lanes cannot be read at phone width, and squeezing them to nine pixels
   each would be worse than scrolling. Below 1100px the table gets a floor and
   scrolls inside its own box, exactly as the Clash draw already does. The PAGE
   never scrolls sideways. */
@media (max-width: 1100px) {
  .pub-table.cup-table { min-width: 1000px; }
}

@media (max-width: 700px) {
  .pub-legend-controls { width: 100%; margin-left: 0; }
  .pub-legend-controls .pub-team-select { flex: 1 1 100%; min-width: 0; width: 100%; }
  .pub-legend-controls .pub-pdf-btn,
  .pub-legend-controls .pub-img-btn { flex: 1 1 auto; }
  .cup-legend-squads { flex-wrap: wrap; }
}

@media print {
  .cup-lane-row + .cup-lane-row { border-top-color: rgba(0, 0, 0, 0.12); }
}

/* A selector that is locked out because the other one is in use. */
.pub-team-select--off {
  opacity: 0.4;
  cursor: not-allowed;
}