/* Tournaments being played over the board: the index, and one event.

   An **app page**, layered on `style.css` and `ui.css` like `history.css` and `trophies.css` are.
   It was a poster page dressed in `landing.css`, and that was wrong for the reason this file now
   has none of its own colours: `/tournaments` is in the rail, it is somewhere a signed-in player
   goes, and a section of the app in a different palette and a different typeface reads as a
   different product. Every colour below is a token from `style.css`, so this page follows the
   theme switch and the contrast work along with everything else.

   One stylesheet for both pages, because they are the same object at two zoom levels, a list of
   events and a list of rounds, and two files describing one card is how two pages end up half a
   pixel apart. The same argument `openings.css` makes for sitting on top of `history.css`. */

/* --- Both pages take the window ------------------------------------------------------------------ */
/*
   `.dash` is a 1240px column, which is right for `account.html` and wrong for both of these. At
   1600x900 that left 56px of empty page down each side of the index and 110px to the right of the
   panel on an event, with the board held at 520 by a cap below; on a 2560 monitor it is half the
   screen showing background. Neither page is prose: one is a list of cards and the other is a
   board and a column beside it, and both are content that scales.

   The asymmetric padding is `.dash-main`'s, for `.dash-main`'s reason: the left is the gutter
   between the content and the rail, which is a boundary and should read as one, and the right is
   the page edge, which the cards were otherwise running into. */
.tourneys-page .dash,
.tourney-page .dash {
  width: 100%;
  max-width: none;
}

/* The padding only where the rail is a rail. Below 901px it is a bottom bar, there is no boundary
   on the left to hold away from, and 86px of side padding is 86px off a phone's board. `.dash`'s
   own 18 a side is right down there. */
@media (min-width: 901px) {
  .tourneys-page .dash,
  .tourney-page .dash { padding: 28px 52px 24px 34px; }
}

/* --- The index's list --------------------------------------------------------------------------- */
/*
   A grid whose columns are wide enough for the names. It was a single column, on the argument that
   the longest thing on each card is the event's name, which runs to sixty characters on a FIDE
   event ("46th FIDE Chess Olympiad Samarkand 2026 | Open | Matches 1-12"), and that a
   three-column grid turns every one of those into four lines of type.

   That argument is about the *column width*, not about the number of columns, and it is the whole
   of why this is **two columns and not as many as fit**. It was `auto-fill` with a 340px floor for
   one revision, which on a wide monitor is five columns: every Olympiad name broken over three
   lines, the cards at five different heights, and the whole thing reading as rubble. Two is a
   number the card can be designed for, and the card now has a picture in it that wants the room.

   The heights are the other half of it. The cards *stretch* to their row: the tally is pinned to
   the bottom edge below, so the "12 tactics found so far" lines run straight across the page and
   the eye has something to follow. `align-items: start` was worse than it sounds on paper, because
   what varies here is not a pixel or two: a card with a headline-players line and a tally is 60px
   taller than one with neither, and a row of those has a different bottom edge under every
   card. */

.tourneys-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

/* Two from 1460px up, and one below it. The breakpoint is the card's arithmetic rather than a
   round number. A card spends 36 on its padding, 14 on the gap and 180 on the picture, so its
   words get its width less 230; 1460 is where two columns leave about 330 for them, which is where
   a sixty-character event name stops needing a third line. Measured at 1320, which was the first
   guess: 489px cards, 257px of text, and the Olympiad's name over three lines in both columns. One
   wide card reads better than two cramped ones, so the split waits until there is room for it. */
@media (min-width: 1460px) {
  .tourneys-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A `.dash-card` that is a link. The hover is the whole of what marks it as one: a card that lifts
   is a card you can press, and an underline on a 17px name in a list of forty is noise. */
.tourney-card {
  display: flex;
  gap: 14px;
  align-items: stretch;
  padding: 14px 18px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease;
}

.tourney-card:hover {
  border-color: var(--gold-dim);
  background: var(--surface-2);
}

.tourney-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* The words, as a column, so the tally can be pushed to the foot of it. The picture is the card's
   other child and must not be caught by the `display: block` below, which is why that rule is
   scoped to this box rather than to the card. */
.tourney-card-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.tourney-card-text > span { display: block; }

/* The event's own picture, from lichess. A band down the right-hand edge, the height of the card
   rather than a fixed rectangle: with the cards sharing a row height, that makes the pictures line
   up into a column of their own and is what turns a list of boxes into something with a shape.

   `object-fit: cover` because the source is 800x400 and this is nearer square, so it crops rather
   than squashes. `min-height` for the shortest card, which is a name, a facts line and a tally and
   would otherwise give the picture 72px to be in.

   A card whose event has no picture simply has none, and its words take the full width. */
.tourney-card-shot {
  flex: none;
  align-self: stretch;
  width: 180px;
  /* `height: auto` is load-bearing, not tidiness. The `height="400"` attribute on the tag is a
     presentational hint, so without this the picture is laid out 400px tall, `align-self: stretch`
     has no auto cross size to stretch, and every card in the list becomes 432px high. The
     attributes stay because they are what reserves the right shape before the bytes arrive. */
  height: auto;
  min-height: 92px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  /* Something to be while it loads, and the thing behind a transparent PNG. */
  background: var(--surface-2);
}

/* Not on a phone. The two ways to keep it there are both worse than dropping it: beside the words
   it leaves 185px for a name that runs to sixty characters, and above them as a banner it roughly
   doubles the length of a forty-event list to carry decoration. The picture is what a wide window
   has the room for, and this is the page saying so. */
@media (max-width: 719px) {
  .tourney-card-shot { display: none; }
}

.tourney-card-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--text);
}

.tourney-card-facts {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-dim);
}

/* The headline players, which lichess supplies as a comma-separated line. Dimmer than the facts
   above it: it is the least load-bearing line on the card and the longest.

   Two lines at most. lichess hands back as many names as the organiser typed, and the Pall Mall
   Masters' six run to three lines of a card whose neighbours have none: with the cards sharing a
   row height, one long line of the least important thing on the page was setting the height of
   four other cards. */
.tourney-card-text > .tourney-card-players {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-faint);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* How many tactics are in it. `--gold-ink` rather than `--gold`: the accent proper belongs to the
   buttons that start something, and forty of these down a page at full strength would shout over
   the one control that matters. See the note on that token in `style.css`. */
.tourney-card-tally {
  /* `auto`, so it sits on the card's bottom edge and the tallies line up across a row. The 8px it
     used to have is the padding, which still holds it off whatever is above. */
  margin-top: auto;
  padding-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* --- The search box ------------------------------------------------------------------------------ */

.tourneys-find { margin-top: 12px; }

/* `.username-input` is the site's field, so this only sets the width. Not the full column: a
   search box the width of a 1900px page reads as somewhere to write a paragraph, and what goes in
   it is one word. */
.tourneys-search { width: min(380px, 100%); }

/* Safari draws a magnifier and an inner shadow on `type="search"` that no other field on the site
   has, and its own clear button, which is the one part worth keeping. */
.tourneys-search { -webkit-appearance: none; appearance: none; }

/* **A card is a flex box, so `hidden` alone does not hide it.** The `[hidden] { display: none }`
   in the browser's own stylesheet loses to any author rule that sets `display`, and `.tourney-card`
   sets `flex`. Without this line the search filters nothing and every card stays on the page,
   which is the sort of failure that looks like the JavaScript never ran. */
.tourney-card[hidden] { display: none; }

.tourneys-none {
  margin: 0;
  padding: 18px 0;
  font-size: 13.5px;
  color: var(--text-dim);
}

/* What the miner is doing, under the page's own lede. Empty most of the time, and it holds its
   line so the list does not jump when it fills. */
.tourneys-status {
  margin: 8px 0 0;
  min-height: 1.4em;
  font-size: 12.5px;
  color: var(--gold-ink);
}

.tourneys-cta { margin-top: 4px; }

/* A measure, not a column width. `.dash-sub` is a one-line caption everywhere else on the site, so
   it has never needed one; the lede on this page is three sentences and was being set 1157px wide,
   which is roughly twice what prose is comfortably read at.

   The card at the foot of the index gets the same, and now needs it more: the page runs the width
   of the window, so on a wide monitor its four lines of prose would be set across the whole of
   it. */
.dash-page .dash-head .dash-sub,
.tourneys-page .dash-card-lede { max-width: 84ch; }

/* --- One event ------------------------------------------------------------------------------------ */

.dash-crumb {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.dash-crumb a { color: var(--text-dim); text-decoration: none; }
.dash-crumb a:hover { color: var(--gold-ink); }

/* One screen tall, and the play card fills it. `.dash` is a flex column, so `flex: 1` on the body
   hands it everything the header does not take, and the card stretching into that is what puts the
   strip at the foot of the window rather than halfway up it with a band of page underneath.

   The rounds card is exempt below: it is a list, and a nine-round list stretched to the height of
   the board beside it is a card with 200px of nothing in it. */
.tourney-page .dash { min-height: 100svh; }

.tourney-body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--dash-gap, 16px);
  align-items: start;
  flex: 1;
  min-height: 0;
}

/* The rounds card is a column of its own and must not stretch to the height of the board beside
   it: an eleven-round list is already tall, and a nine-round one padded out to match a 600px board
   is a card with 200px of nothing under it. */
.tourney-rounds-card {
  gap: 10px;
  padding: 16px 14px 16px;
}

/* An eleven-round list is 662px tall, which is more than a 760px window has under the header: on a
   laptop it, and not the board, was what made this page scroll. Capped to what the window leaves
   below the card's own top (28 of page padding, 99 of header, the 16px gap under it) and above its
   foot (24), the list scrolls inside its card and the page does not scroll at all.

   Railed widths only. Below 901px the rounds are a wrapping row of chips above the board, a
   handful of lines tall, and a scroller there would be a box inside a box. */
@media (min-width: 901px) {
  .tourney-rounds-card { max-height: calc(100svh - 151px); }

  .tourney-rounds {
    overflow-y: auto;
    min-height: 0;
    /* Room for the scrollbar, so the count on the right is not under it. */
    padding-right: 2px;
  }
}

/* A column, not a row of tabs. Eleven Olympiad rounds as tabs either wrap to three lines or scroll
   sideways, and both are worse than a list that is simply long. */
.tourney-rounds {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tourney-round {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  text-decoration: none;
  transition: background 140ms ease;
}

.tourney-round:hover { background: var(--surface-2); }

.tourney-round.is-open {
  border-color: var(--gold-dim);
  background: color-mix(in srgb, var(--gold) 10%, var(--surface-2));
}

.tourney-round:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.tourney-round-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.tourney-round-meta {
  grid-column: 1;
  font-size: 11px;
  color: var(--text-faint);
}

/* The count spans both rows on the right, so a round with a two-line label does not push it down
   away from the name it belongs to. */
.tourney-round-count {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-ink);
}

.tourney-none {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-dim);
}

/* --- The board and its panel ------------------------------------------------------------------------ */

.tourney-play {
  min-width: 0;
  gap: 14px;
  /* Against `align-items: start` on the body above, which is there for the rounds card. */
  align-self: stretch;
}

.tourney-playhead { margin: 0; }

.tourney-round-name {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.tourney-round-sub {
  margin: 5px 0 0;
  min-height: 1.4em;
  font-size: 13px;
  color: var(--text-dim);
}

/* The panel has a ceiling now that the card runs the width of the window. It holds a name, a turn,
   a verdict, two buttons and the Plus note, none of which reads better at 700px than at 380, and
   the pair is centred in whatever the card has left rather than the board being pinned to the left
   edge with the slack piled up on the right.

   No floor, though, and that matters: the floor belongs in the board's budget below, where it is
   200. A `minmax(280px, ...)` track is a track the grid will overflow its card to honour, and
   `.dash-card` clips, so the panel simply loses its right-hand 12px at 1280 and nothing says
   so. */
.tourney-stage {
  display: grid;
  grid-template-columns: var(--board-size) minmax(0, 400px);
  justify-content: center;
  gap: 20px;
  align-items: start;
}

/* `--board-size` is `board.css`'s one required variable; without it `.board-wrap` has no height at
   all and the eight grid rows size themselves to the pieces. See the same note in `share.css`.
   `svh` and not `vh` because a page reached from a search result is opened on a phone, where `vh`
   is the height with the address bar hidden, which it is not when the page first paints.
   The railed budget is set below, the way `ui.css` sets the trainer's. */
.tourney-page {
  --board-size: max(240px, min(560px, calc(100vw - 372px), calc(100svh - 250px)));
}

/* With the rail, 232px of the window is gone before this page sees it, and the rounds card takes
   another 232 plus two gaps. The same arithmetic `ui.css` does for the trainer, and it has to live
   in a `min-width` query for the same reason: below 901px the rail is a bottom bar and takes no
   width at all. */
@media (min-width: 901px) {
  /* What the window has left. Across: the rail (232), the page's own padding (86), the rounds card
     (232), the gap to it (16), the play card's padding and borders (42), the gap to the panel (20)
     and 200 for the panel itself. 828. The panel is a `minmax(0, 400px)` track, so everything past
     that goes to it, up to 400, and it gives way rather than holding the board down: 200 is the
     width it is squeezed to on the narrowest window that still has the rail beside it.

     This was 828 rather than 908 for a reason worth keeping. Reserving the panel's comfortable
     width instead of its floor cost the board 80px at 1280x760, where the height budget allows 454
     and the board came out at 372: smaller than the 520px cap this whole exercise was lifting.

     Down: 28 of page padding, the crumb, the title and the facts line (99), the gap under the
     header (16), the card's padding (18) and its playhead (45) and gap (14) over the board; under
     it the gap to the strip (14), the strip (28), the card's bottom padding (20) and the page's
     (24). 306.

     The ceiling is 760 rather than 520 and binds on a large monitor only. The 520 was the whole of
     why this board was smaller than the trainer's on the same screen: both other terms allowed 650
     at 1600x900 and the cap took 130px off it for nothing. */
  .with-rail.tourney-page {
    --board-size: max(240px, min(760px, calc(100vw - 828px), calc(100svh - 306px)));
  }
}

.tourney-board { margin: 0; }

.tourney-panel { min-width: 0; }

/* Who missed it. The largest thing in the panel on purpose: a grandmaster's name on a position is
   the entire difference between this page and any other page of puzzles. */
.tourney-who {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.tourney-turn {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-ink);
}

.tourney-verdict {
  margin: 12px 0 0;
  min-height: 1.5em;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.tourney-verdict.is-right { color: var(--good); }
.tourney-verdict.is-wrong { color: var(--bad); }
.tourney-verdict.is-shown { color: var(--text); }

.tourney-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.tourney-actions .btn { display: inline-flex; align-items: center; }

.tourney-source {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-faint);
}

/* --- The strip of a round's positions ------------------------------------------------------------------ */
/*
   Numbered chips, one per tactic. Numbers rather than names: the name is on the position once it
   is up, and a strip reading "Caruana, Gukesh, Abdusattorov" is a strip that decides which board
   gets clicked for a reason that has nothing to do with the chess. */

.tourney-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tourney-chip {
  min-width: 32px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.tourney-chip:hover { background: var(--raised); color: var(--text); }

.tourney-chip.is-current {
  border-color: var(--gold-dim);
  background: color-mix(in srgb, var(--gold) 16%, var(--surface-2));
  color: var(--text);
}

/* Solved ones stay marked, so working through a round is visible. Deliberately not the same
   treatment as the current one: "where I am" and "where I have been" are different questions. */
.tourney-chip.is-done { color: var(--gold-ink); }

.tourney-chip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.tourney-empty {
  max-width: 54ch;
  margin: 0;
}

/* --- What Free is not shown ------------------------------------------------------------------------------ */

.tourney-locked {
  margin: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--gold-dim);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 7%, var(--surface-2));
}

.tourney-locked-eyebrow {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.tourney-locked-text {
  margin: 7px 0 12px;
  max-width: 50ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

/* --- Narrow -------------------------------------------------------------------------------------------------- */

@media (max-width: 980px) {
  /* Rounds above the board rather than beside it, and laid out as a wrapping row: at this width
     the column was taking a third of the screen to show eleven words. */
  .tourney-body { grid-template-columns: minmax(0, 1fr); }

  .tourney-rounds {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  .tourney-round {
    border-color: var(--border);
    grid-template-columns: auto auto;
  }

  .tourney-round-meta { display: none; }
  .tourney-round-count { grid-row: 1; }

  .tourney-stage { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .tourney-page {
    --board-size: max(240px, min(calc(100vw - 78px), calc(100svh - 290px)));
  }
}