/*-----------------------------------*\
  #PUBLIC BRACKETS PAGE  (br-*)
\*-----------------------------------*/

/*
  Companion to track_record_style.css, not a replacement for it: the blue
  .division-header banner, .bracket-header, .schedule-standings-table and the
  whole filter bar are shared with the public schedule and standings pages and
  are deliberately NOT redefined here. This file adds only what a group draw
  needs on top of them.

  Root font-size is 10px site-wide (style.css), so 1rem = 10px here.
*/

/*
  Groups sit side by side — a draw is read by comparing groups, which a single
  1200px column of six-row tables makes needlessly hard.

  Pinned to the same 90vw / 1200px / 600px-min box as .division-header so the
  banner and the groups beneath it share one left and right edge. That alignment
  is why the widths are repeated rather than inherited: the standings page gets
  it for free from one full-width table, and a grid that sized itself to its
  content would drift out from under the banner on every division.
*/
.br-brackets-grid {
  width: 90vw;
  max-width: 1200px;
  min-width: 600px;
  margin: 0 auto;
  display: grid;
  /* 28rem = 280px, about the narrowest a club-qualified team name stays on one
     or two lines. auto-fit means a division with two groups gets two wide
     columns rather than two narrow ones with a hole beside them. */
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: 1rem 2rem;
  align-items: start;
}

@media (max-width: 650px) {
  .br-brackets-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
  }
}

/*
  Inside a grid cell the table fills the cell. The 600px min-width
  .schedule-standings-table carries is right for a games table with eight
  columns and wrong for one column of team names — it would force every cell to
  scroll horizontally.
*/
.br-bracket-table.schedule-standings-table {
  width: 100%;
  min-width: 0;
}

/* Group size, beside the group name. Reviewing a draw is largely counting: an
   uneven group is the thing you are looking for. */
.br-team-count {
  margin-left: 0.8rem;
  font-size: var(--fs-10);
  font-weight: 400;
  color: var(--black-coral);
  white-space: nowrap;
}

/* Logo + name, matching the standings page's team cell. */
.br-team {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Logo sizing now lives with the schedule and standings versions of this row,
   in track_record_style.css (.team-logo) -- the three are one component wearing
   three markups, and they were drifting (24px here, 32px inline there). */

/* Loading / empty / error line. */
.br-message {
  text-align: center;
  font-size: var(--fs-8);
  color: var(--black-coral);
  margin: 3rem auto;
}

.br-message--error {
  color: var(--cinnamon-satin);
}