/* Embedded mode: these pages inside an <iframe> on panaxeo.com.
 *
 * Switched on by the `embedded` class each page's head script sets when
 * it detects framing — see the note there for why detection rather than a
 * query parameter.
 *
 * The parent's frames are `height="640px" scrolling="no"`, copied from the
 * 2025 page that marketing will reuse. `scrolling="no"` does not hide the
 * overflow behind a scrollbar, it *clips* it: anything past 640px is gone
 * and unreachable. So nothing here may rely on scrolling — a long list
 * pages instead, which in a fixed box reads as a deliberate design rather
 * than as a viewport somebody cut off.
 */

/* The site nav belongs to the site. Inside the frame the parent page has
 * its own structure — and two separate frames, one per view — so our bar
 * would offer to navigate this box somewhere it is not meant to go. */
.embedded .gbely-nav { display: none; }

/* 3.5rem of it was breathing room on a full page. In a 640px box it is a
 * tenth of the height spent on nothing. */
.embedded main {
  padding: 1.1rem 1.2rem 1rem;
  max-width: none;          /* the frame is the measure now, not the page */
  /* A hard height, not a minimum. Everything inside is sized against the
     box, and a box that can grow is a box whose bottom gets clipped —
     which is how a replay GIF ended up half outside the frame. */
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* The standfirst under the heading. Four lines of § 07 explanation is a
   third of a 640px box, and the page around the frame is where that
   belongs — marketing's own copy introduces the section. */
.embedded .sub { display: none; }

/* And the heading itself, on the two pages that are a *section* of
   somebody else's page. Squarespace sets "Odovzdaj svojho agenta" and
   "Leaderboard" above the frame, so carrying them inside it is the same
   title twice, one of them in the wrong typeface.
   Marked per page rather than hitting every `h1`: web/status.html is
   also framable and its heading is not a section title anybody else
   provides — it is reached from a result e-mail, on its own. */
.embedded .section-title { display: none; }

/* The table takes whatever is left between the controls and the pager.
   `min-height: 0` because a flex child otherwise refuses to shrink below
   its content, which is exactly the refusal that pushes rows past the
   clip.

   Scoped to `main`, which is the leaderboard's and the status page's
   layout root. The rules page uses `.page` and its own `.table-wrap`
   holds § 02's terrain tables, which are `min-width: 480px` and scroll
   sideways by design — unscoped, this clipped a column off each of them
   the moment that page learned to be framed. */
.embedded main .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  /* Sideways, not clipped. `overflow: hidden` took the vertical clip the
     pager exists to manage and threw in the horizontal one for free — so
     on a phone, where the frame is narrower than the table's 420px
     minimum, the last three columns were simply unreachable. Vertical
     stays hidden: that axis is what paging is for. */
  overflow-x: auto;
  overflow-y: hidden;
}

/* --- rows the pager can count -------------------------------------------
 *
 * Reported from the real frame: paging back and forth changed the number
 * of pages, 4 then 3 then 5 then 3, and reshuffled which rows were where.
 *
 * The pager measures how many rows fit by reading the height of the first
 * row on screen. That is only a useful number if every row is the same
 * height, and they were not: a row whose submission has a replay carries
 * a "Pozrieť" button and a row without carries an em dash, so the answer
 * depended on which kind of row happened to be first on the page you were
 * looking at. Long team names wrapping to a second line did the same.
 *
 * So rows are one line, always. Names that do not fit are cut with an
 * ellipsis rather than wrapped, and the replay button is sized to sit
 * inside a line instead of setting the height of one.
 */
/* One height for every row, set here rather than inferred from what the
   row happens to contain.
   Trimming the button to fit inside a line was the obvious way and it
   does not converge — 43.8px, then 42.2px, then 42.4px against a plain
   row's 40.9px, chasing a border and a baseline through three attempts.
   A row given an explicit height is simply that height, whether it holds
   a button or an em dash, and the pager's arithmetic becomes exact
   instead of nearly right. */
.embedded main tbody tr { height: 2.5rem; }
.embedded main tbody td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 0;
  padding-bottom: 0;
}
/* Wide enough to tell two teams apart. It was 14ch, which on a phone cut
   "[TEST] Letničie Lovci" down to "[TEST] Letni…" — every row starting
   the same way and none of them distinguishable. The table scrolls
   sideways now, so a wider name column costs a little more scrolling
   rather than a column nobody can reach. */
.embedded main tbody td.team { max-width: 24ch; }
/* Small enough to sit inside the row height above without pushing it. */
.embedded main tbody button {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  height: 1.5rem;
  padding: 0 0.55rem;
  font-size: 0.78rem;
  line-height: 1;
}

.embedded h1 { font-size: 1.35rem; }
.embedded .sub, .embedded p.lede { margin-bottom: 0.9rem; }
.embedded .refresh-row { margin-bottom: 0.9rem; }
.embedded footer { display: none; }

/* The legend under the board explains columns. Useful on the full page,
 * and in a 640px box it is three rows of table it would be eating.
 *
 * Scoped to `main`, which the leaderboard and the status page have and
 * web/finale.html does not. Unscoped it also hid the finale's *map* key
 * — the one thing that says which colour is which army — leaving a
 * picture of nine colours and no way to read it. */
.embedded main .legend { display: none; }

/* --- paging -------------------------------------------------------------
 *
 * Shown only when framed and only when there is more than one page. The
 * control sits at the bottom of the flex column so it stays put as the
 * rows change under it, rather than moving with the shortest page.
 */
.pager { display: none; }
.embedded .pager {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: auto;         /* pinned to the bottom of the box */
  padding-top: 0.9rem;
  font-size: 0.86rem;
  color: var(--muted);
}
.embedded /* Hidden, but still taking its space.
 *
 * The other half of the page-count flapping: with one page the pager was
 * removed from the layout, which gave the table more room, which fitted
 * more rows, which could make it one page again. Reserving the space
 * always means the height the rows are measured against never depends on
 * how many rows there are.
 */
.embedded .pager[hidden] { display: flex; visibility: hidden; }
.pager[hidden] { display: none; }
.pager button { padding: 0.3rem 0.7rem; font-size: 0.86rem; }
.pager button[disabled] { opacity: 0.4; cursor: default; }
.pager .of { font-variant-numeric: tabular-nums; }

/* --- the replay view -----------------------------------------------------
 *
 * Bounded by height, not width. The GIF is 480px wide natively and
 * `width: 100%` in a frame nearly twice that stretched it to about 1080px
 * tall — most of it past the clip, with the caption and the way back
 * among the parts that were gone.
 *
 * `object-fit: contain` letterboxes rather than distorts, so a board that
 * is square stays square whatever shape the frame turns out to be.
 */
.embedded #replay-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.embedded #replay-image {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  object-position: top;
}
.embedded #replay-view p { margin: 0; }

/* --- the rules page -----------------------------------------------------
 *
 * A different shape of problem from the other three. Those are short
 * views that have to be made to fit a 640px box; this is a long document
 * that cannot be, and pretending otherwise means a participant reads as
 * far as § 00 and then hits the clip with no way to know the rest exists.
 *
 * So it is the one framed page that scrolls. The frame's own
 * `scrolling="no"` does not prevent that — it suppresses the *iframe's*
 * scrollbar, while an element inside with `overflow-y: auto` scrolls
 * normally. `height: 100vh` is what gives that element something to
 * overflow.
 *
 * The rules page uses `.page` rather than `<main>`, so none of the rules
 * above reach it except the hidden nav and footer, which is what it
 * wants anyway.
 */
.embedded .page {
  max-width: none;
  padding: 1.1rem 1.3rem 2rem;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* iOS, inside a frame, needs asking */
  box-sizing: border-box;
}

/* The hero is a title page. In a box a tenth this tall it is the part
   that has to give: the decorative grid goes, and the rest tightens. */
.embedded header.hero { padding: 0 0 1.3rem; margin-bottom: 1.6rem; }
.embedded .grid-motif { display: none; }
.embedded h1.title { font-size: clamp(1.8rem, 5vw, 2.3rem); max-width: none; }
.embedded .kicker { margin-bottom: .6rem; }
.embedded section { margin: 2.2rem 0; }

/* The way out, shown only when framed.
 *
 * Everything else here makes a long document survive a short box. This
 * admits that surviving is not the same as being comfortable, and hands
 * the reader the page itself — in a new tab, because the frame is
 * somebody else's layout and navigating it away from what it was showing
 * is not ours to do.
 */
.embed-out { display: none; }
.embedded .embed-out {
  display: block;
  margin: 0 0 1.2rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .78rem;
  letter-spacing: .04em;
}