/* leagues — recurring league schedules by night.

   The switcher is CSS only. The radios sit before the tabs and the panels so a
   sibling combinator can reach both; they are moved off-screen rather than
   display:none, because a display:none radio is not focusable and the keyboard
   user loses the control entirely. */

/* The night panel bleeds to both edges of the page (see .leagues__panels), and
   it measures that bleed against this section rather than against the window.
   container-type is what makes that possible: it lets the panel read this
   element's inline size in cqi units.

   Why not 100vw: vw counts the scrollbar on most desktop browsers, so the panel
   came out 1440px wide inside a 1425px page - overhanging 7px on the left and
   falling 7px short on the right. cqi is the container's content width, which
   is the page width with the scrollbar already taken off.

   overflow-x is belt and braces against sub-pixel rounding. clip, not hidden:
   hidden on one axis forces the other to auto, which would make this a scroll
   container and break position:sticky for anything inside it. */
.leagues { container-type: inline-size; overflow-x: clip; }

.leagues__docs {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.leagues__doc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--gray-300);
  color: var(--color-navy);
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-semibold);
  transition: box-shadow var(--transition-fast), color var(--transition-fast);
}
.leagues__doc:hover { color: var(--accent-deep); box-shadow: inset 0 0 0 2px var(--accent); }
.tone--navy .leagues__doc { color: var(--color-white); box-shadow: inset 0 0 0 1px #ffffff40; }
.tone--navy .leagues__doc:hover { color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }

.leagues__pdf {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--text-subtle);
}
.leagues__pdf svg { width: 13px; height: 15px; display: block; }
a:hover > .leagues__pdf,
a:hover .leagues__pdf { color: inherit; }
.tone--navy .leagues__pdf { color: #ffffff8c; }

.leagues__switch { position: relative; }
.leagues__radio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}

.leagues__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 0;
}
.tone--navy .leagues__tabs { border-bottom-color: #ffffff2e; }
/* The night picker is the control the whole section turns on - "pick your
   night" is the instruction at the top of the page - so it is sized like one.
   At body-small with a 3px rule it read as secondary navigation and the page
   looked like it held one night's worth of content. */
.leagues__tab {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1 1 0;
  min-width: 108px;
  padding: 14px 4px 16px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--text-muted);
  border-bottom: 4px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.leagues__tab:hover { color: var(--accent-deep); }
.tone--navy .leagues__tab { color: #ffffffb3; }
.tone--navy .leagues__tab:hover { color: var(--accent); }

.leagues__panel { display: none; }
.leagues__note { margin: 0 0 20px; color: var(--text-muted); }
.leagues__primary { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }

.leagues__subhead { margin: 0 0 14px; color: var(--text-subtle); }
.tone--navy .leagues__subhead { color: var(--accent-decor); }

/* Multi-column, not grid. A reflowing grid maximises columns, and the real
   division counts are 1, 2, 4, 6, 7 and 9 - so almost every night ended with a
   ragged last row, and auto-fill (which keeps empty tracks, unlike auto-fit)
   left Wednesday's single division in a narrow column with five empty ones
   beside it. CSS columns BALANCE instead: 7 becomes 3/2/2, never 6+1. It also
   flows top-to-bottom, which is how a list of names is read. */
.leagues__divisions {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: 40px;
}
/* Without this a name can be split across a column break, rule and all. */
.leagues__divisions li { break-inside: avoid; }

@media (max-width: 1024px) { .leagues__divisions { columns: 2; } }
@media (max-width: 640px)  { .leagues__divisions { columns: 1; } }
.leagues__divisions li { border-top: 1px solid var(--gray-200); }
.tone--navy .leagues__divisions li { border-top-color: #ffffff26; }
/* Two lines, not one. The conference carries the row and the league/level sits
   above it as a label, so a column reads National / West / Central instead of
   seven strings that all begin "Men's A". The chip and arrow are the clickable
   tell - plain navy text in a list gave no sign these opened anything. */
.leagues__division {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 16px;
  padding: 14px 0;
  color: var(--color-navy);
  text-decoration: none;
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.leagues__division-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.leagues__division-label { color: var(--text-subtle); }
.leagues__division-name {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: .01em;
}
.leagues__division-meta { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.leagues__division-arrow { width: 16px; opacity: .55; transition: transform var(--transition-fast), opacity var(--transition-fast); }

a.leagues__division:hover { color: var(--accent-deep); padding-left: 6px; }
a.leagues__division:hover .leagues__division-arrow { transform: translateX(3px); opacity: 1; }
a.leagues__division:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }

/* Says why it is not a link, rather than leaving it looking like a broken one. */
.leagues__division-soon {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tone--navy .leagues__division-label { color: var(--accent-decor); }
.tone--navy .leagues__division-soon  { color: #ffffff8c; }
.tone--navy .leagues__division { color: var(--color-white); }
.tone--navy .leagues__division:hover { color: var(--accent); }

/* Named but with nothing to link to yet. Muted and not interactive, so it
   reads as "not published" rather than as a broken link. */
.leagues__division--pending { color: var(--text-muted); cursor: default; }
.tone--navy .leagues__division--pending { color: #ffffff73; }

@media (max-width: 600px) {
  .leagues__tabs { gap: 2px; }
  .leagues__tab { padding: 9px 12px 11px; font-size: var(--fs-meta); }
  .leagues__primary .btn { width: 100%; justify-content: center; }
}

/* --- the switch itself ---------------------------------------------------
   One pair per night: light up the label, show the panel. Written out rather
   than generated so what the browser gets is what is in the file. */
.leagues__radio:nth-of-type(1):checked ~ .leagues__tabs .leagues__tab:nth-child(1) {
  color: var(--color-navy);
  border-bottom-color: var(--accent);
}
.tone--navy .leagues__radio:nth-of-type(1):checked ~ .leagues__tabs .leagues__tab:nth-child(1) { color: var(--color-white); }
.leagues__radio:nth-of-type(1):checked ~ .leagues__panels .leagues__panel:nth-child(1) { display: block; }
.leagues__radio:nth-of-type(1):focus-visible ~ .leagues__tabs .leagues__tab:nth-child(1) {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.leagues__radio:nth-of-type(2):checked ~ .leagues__tabs .leagues__tab:nth-child(2) {
  color: var(--color-navy);
  border-bottom-color: var(--accent);
}
.tone--navy .leagues__radio:nth-of-type(2):checked ~ .leagues__tabs .leagues__tab:nth-child(2) { color: var(--color-white); }
.leagues__radio:nth-of-type(2):checked ~ .leagues__panels .leagues__panel:nth-child(2) { display: block; }
.leagues__radio:nth-of-type(2):focus-visible ~ .leagues__tabs .leagues__tab:nth-child(2) {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.leagues__radio:nth-of-type(3):checked ~ .leagues__tabs .leagues__tab:nth-child(3) {
  color: var(--color-navy);
  border-bottom-color: var(--accent);
}
.tone--navy .leagues__radio:nth-of-type(3):checked ~ .leagues__tabs .leagues__tab:nth-child(3) { color: var(--color-white); }
.leagues__radio:nth-of-type(3):checked ~ .leagues__panels .leagues__panel:nth-child(3) { display: block; }
.leagues__radio:nth-of-type(3):focus-visible ~ .leagues__tabs .leagues__tab:nth-child(3) {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.leagues__radio:nth-of-type(4):checked ~ .leagues__tabs .leagues__tab:nth-child(4) {
  color: var(--color-navy);
  border-bottom-color: var(--accent);
}
.tone--navy .leagues__radio:nth-of-type(4):checked ~ .leagues__tabs .leagues__tab:nth-child(4) { color: var(--color-white); }
.leagues__radio:nth-of-type(4):checked ~ .leagues__panels .leagues__panel:nth-child(4) { display: block; }
.leagues__radio:nth-of-type(4):focus-visible ~ .leagues__tabs .leagues__tab:nth-child(4) {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.leagues__radio:nth-of-type(5):checked ~ .leagues__tabs .leagues__tab:nth-child(5) {
  color: var(--color-navy);
  border-bottom-color: var(--accent);
}
.tone--navy .leagues__radio:nth-of-type(5):checked ~ .leagues__tabs .leagues__tab:nth-child(5) { color: var(--color-white); }
.leagues__radio:nth-of-type(5):checked ~ .leagues__panels .leagues__panel:nth-child(5) { display: block; }
.leagues__radio:nth-of-type(5):focus-visible ~ .leagues__tabs .leagues__tab:nth-child(5) {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.leagues__radio:nth-of-type(6):checked ~ .leagues__tabs .leagues__tab:nth-child(6) {
  color: var(--color-navy);
  border-bottom-color: var(--accent);
}
.tone--navy .leagues__radio:nth-of-type(6):checked ~ .leagues__tabs .leagues__tab:nth-child(6) { color: var(--color-white); }
.leagues__radio:nth-of-type(6):checked ~ .leagues__panels .leagues__panel:nth-child(6) { display: block; }
.leagues__radio:nth-of-type(6):focus-visible ~ .leagues__tabs .leagues__tab:nth-child(6) {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.leagues__radio:nth-of-type(7):checked ~ .leagues__tabs .leagues__tab:nth-child(7) {
  color: var(--color-navy);
  border-bottom-color: var(--accent);
}
.tone--navy .leagues__radio:nth-of-type(7):checked ~ .leagues__tabs .leagues__tab:nth-child(7) { color: var(--color-white); }
.leagues__radio:nth-of-type(7):checked ~ .leagues__panels .leagues__panel:nth-child(7) { display: block; }
.leagues__radio:nth-of-type(7):focus-visible ~ .leagues__tabs .leagues__tab:nth-child(7) {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* --- season panel ------------------------------------------------------- */
/* The league flyer's content, on the page. It was reachable only as a 2.3MB
   PDF, which is not a way to answer "when does it start and what does it
   cost" - the two questions a prospective team actually has. */
/* Beside the headline, not under it. The panel is its own object now, so the
   rule that used to separate it from the copy above is gone - two containers
   with a line between them is one device too many. */
/* Holds the headline and the document buttons. A single column since the season
   facts moved out from beside it and down below the switcher. */
.leagues__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  /* The picker is the turn in the page, so it gets room to read as a new beat
     rather than as the next line. */
  margin-bottom: 72px;
}
.leagues__intro { min-width: 0; }
/* Now the last thing in the block, under the night panels. The top margin is
   what separates it from the white panel above; without it the two read as one
   object and the facts look like part of whichever night is open. */
.leagues__season { margin: 64px 0 0; padding: 0; border: 0; }

@media (max-width: 1100px) {
  .leagues__top { margin-bottom: 52px; }
  .leagues__season { margin-top: 44px; }
}
/* One panel holding four divided cells - the aag "at-a-glance strip" structure
   (label over value, hairline rule between) but contained, so it reads as an
   object on the navy rather than text floating on it.

   aag's own values are poster-uppercase at h2, which works for "7 FIELDS" and
   falls apart on "$6 Sunday-Friday, $10 tournaments, ages 13+". So the
   structure is borrowed and the type is not: display face, sentence case, free
   to wrap to a second line without the cell changing height. */
.leagues__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  max-width: none;
  background: var(--gray-50);
  padding: 20px 24px;
}
.tone--navy .leagues__facts { background: #ffffff12; }

.leagues__fact {
  min-width: 0;
  padding-left: 20px;
  border-left: 1px solid var(--rule);
}
/* The rule divides cells, so the first in each row never carries one -
   otherwise a wrapped row opens with a rule against the panel's padding. */
.leagues__fact:nth-child(4n + 1) { padding-left: 0; border-left: 0; }

.leagues__fact dt {
  color: var(--accent-decor);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  margin: 0 0 6px;
}
.leagues__fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.3;
  color: inherit;
  overflow-wrap: break-word;
}

@media (max-width: 760px) {
  .leagues__facts { grid-template-columns: repeat(2, 1fr); gap: 20px 0; padding: 20px; }
  .leagues__fact:nth-child(4n + 1) { padding-left: 20px; border-left: 1px solid var(--rule); }
  .leagues__fact:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 520px) {
  .leagues__facts { grid-template-columns: 1fr; gap: 18px 0; padding: 20px; }
  .leagues__fact,
  .leagues__fact:nth-child(2n + 1),
  .leagues__fact:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
}

.leagues__start { margin: 0 0 6px; color: var(--text-muted); font-size: var(--fs-body-sm); }
.leagues__start .text-eyebrow { color: var(--text-subtle); margin-right: 6px; }

.tone--navy .leagues__fact dd { color: var(--color-white); }
.tone--navy .leagues__fact dt,
.tone--navy .leagues__start .text-eyebrow { color: var(--accent-decor); }

/* --- making the hidden nights visible ----------------------------------- */
/* The switcher shows one night of six. Nothing on the page said the other
   five existed, so side by side with a stacked list it read as missing
   content rather than as compression. The count on each tab is the fix. */
.leagues__tab { display: inline-flex; align-items: center; gap: 8px; }
.leagues__tab-count {
  font-size: 11px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: var(--radius-pill, 999px);
  background: var(--gray-100, #f1f1f4);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.tone--navy .leagues__tab-count { background: #ffffff1f; color: #ffffffd1; }

/* The count sits under the night rather than beside it now the label is
   display-sized - a pill next to 28px type reads as a badge on a heading. */
.leagues__tab-name { display: block; }
.leagues__tab-count {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0;
  background: none;
  color: var(--text-subtle);
}
.leagues__tab-count::after { content: " divisions"; }
.leagues__tab-count[data-one]::after { content: " division"; }

@media (max-width: 720px) {
  /* Six display-sized labels will not sit in a row on a phone; two rows of
     three keeps every night reachable without a horizontal scroll. */
  .leagues__tab { flex: 1 1 28%; min-width: 0; font-size: 18px; }
}


/* --- navy head, white body ----------------------------------------------
   The section runs navy down to the picker, then the chosen night becomes a
   white block flush against the white panel beneath it, so the two read as one
   surface the night was cut out of.

   Square corners and no borders on purpose. The rounded, bevelled folder tab
   is the thing that dates this pattern; the effect here comes only from the
   shape being continuous, which is why the tab strip carries no bottom rule
   and no margin - any gap at all and the illusion breaks.

   Inside the panel the tone tokens are re-pointed back to their light values
   rather than every child being corrected by name. That is what the token
   layer is for: three lines here instead of a rule per element. */
.leagues.tone--navy .leagues__tabs {
  border-bottom: 0;
  margin-bottom: 0;
  gap: 0 6px;
}
.leagues.tone--navy .leagues__tab {
  border-bottom: 0;
  border-radius: 0;
  padding: 18px 20px 20px;
  margin-bottom: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.leagues.tone--navy .leagues__tab:hover { background: #ffffff14; color: var(--color-white); }

.leagues.tone--navy .leagues__panels {
  --section-bg: var(--color-white);
  --text-muted: var(--gray-600);
  --text-subtle: var(--gray-500);
  --rule: var(--gray-200);
  /* The button and ornament roles have to come back too. tone--navy flips
     --btn-line to a translucent white for use ON navy; left flipped inside a
     white panel the outline button is white-on-white and simply disappears
     until you hover it. Same class of mistake as resetting the text tokens and
     forgetting these - the roles travel together, so they get reset together. */
  --btn-line: var(--color-navy);
  --btn-line-fg: var(--color-navy);
  --btn-invert-bg: var(--color-navy);
  --btn-invert-fg: var(--color-white);
  --accent-decor: var(--accent);
  background: var(--color-white);
  color: var(--color-navy);
  padding: 34px 32px 38px;

  /* Full bleed. The white runs to both edges of the page instead of sitting as
     a card on the navy, so the switcher reads as a change of ground rather than
     a panel.

     The negative margin is half the section minus half this element's own
     containing block, which is .sec__inner's content box. That difference is
     exactly the gutter on one side, at any width and with the section's
     max-width in play or not. The matching padding puts the content back where
     it was, so only the colour moves. */
  margin-inline: calc(50% - 50cqi);
  padding-inline: calc(50cqi - 50% + 32px);
}
/* The panel's own children were written against the light tokens, so only the
   two that hard-code a navy-tone colour need unwinding. */
.leagues.tone--navy .leagues__panels .leagues__subhead { color: var(--text-subtle); }
.leagues.tone--navy .leagues__panels .leagues__division { color: var(--color-navy); }
.leagues.tone--navy .leagues__panels .leagues__division-label { color: var(--text-subtle); }
.leagues.tone--navy .leagues__panels .leagues__start .text-eyebrow { color: var(--text-subtle); }
.leagues.tone--navy .leagues__panels .leagues__divisions li { border-top-color: var(--gray-200); }

.leagues.tone--navy .leagues__radio:nth-of-type(1):checked ~ .leagues__tabs .leagues__tab:nth-child(1) {
  background: var(--color-white);
  color: var(--color-navy);
}
.leagues.tone--navy .leagues__radio:nth-of-type(1):checked ~ .leagues__tabs .leagues__tab:nth-child(1) .leagues__tab-count { color: var(--gray-500); }
.leagues.tone--navy .leagues__radio:nth-of-type(2):checked ~ .leagues__tabs .leagues__tab:nth-child(2) {
  background: var(--color-white);
  color: var(--color-navy);
}
.leagues.tone--navy .leagues__radio:nth-of-type(2):checked ~ .leagues__tabs .leagues__tab:nth-child(2) .leagues__tab-count { color: var(--gray-500); }
.leagues.tone--navy .leagues__radio:nth-of-type(3):checked ~ .leagues__tabs .leagues__tab:nth-child(3) {
  background: var(--color-white);
  color: var(--color-navy);
}
.leagues.tone--navy .leagues__radio:nth-of-type(3):checked ~ .leagues__tabs .leagues__tab:nth-child(3) .leagues__tab-count { color: var(--gray-500); }
.leagues.tone--navy .leagues__radio:nth-of-type(4):checked ~ .leagues__tabs .leagues__tab:nth-child(4) {
  background: var(--color-white);
  color: var(--color-navy);
}
.leagues.tone--navy .leagues__radio:nth-of-type(4):checked ~ .leagues__tabs .leagues__tab:nth-child(4) .leagues__tab-count { color: var(--gray-500); }
.leagues.tone--navy .leagues__radio:nth-of-type(5):checked ~ .leagues__tabs .leagues__tab:nth-child(5) {
  background: var(--color-white);
  color: var(--color-navy);
}
.leagues.tone--navy .leagues__radio:nth-of-type(5):checked ~ .leagues__tabs .leagues__tab:nth-child(5) .leagues__tab-count { color: var(--gray-500); }
.leagues.tone--navy .leagues__radio:nth-of-type(6):checked ~ .leagues__tabs .leagues__tab:nth-child(6) {
  background: var(--color-white);
  color: var(--color-navy);
}
.leagues.tone--navy .leagues__radio:nth-of-type(6):checked ~ .leagues__tabs .leagues__tab:nth-child(6) .leagues__tab-count { color: var(--gray-500); }
.leagues.tone--navy .leagues__radio:nth-of-type(7):checked ~ .leagues__tabs .leagues__tab:nth-child(7) {
  background: var(--color-white);
  color: var(--color-navy);
}
.leagues.tone--navy .leagues__radio:nth-of-type(7):checked ~ .leagues__tabs .leagues__tab:nth-child(7) .leagues__tab-count { color: var(--gray-500); }

@media (max-width: 720px) {
  /* Two rows of tabs cannot all touch the panel, so the connection is dropped
     rather than faked on only one of them. */
  .leagues.tone--navy .leagues__tabs { gap: 4px; margin-bottom: 0; }
  .leagues.tone--navy .leagues__panels {
    padding-block: 24px 28px;
    padding-inline: calc(50cqi - 50% + 18px);
  }
}

/* Inside a filled button the mark has to ride on the button's own colour, not
   the muted grey it uses in a list row. */
.leagues__primary .btn { display: inline-flex; align-items: center; gap: 9px; }
.leagues__primary .btn .leagues__pdf { color: currentColor; opacity: .6; }
.leagues__primary .btn:hover .leagues__pdf { opacity: 1; }