/* ═══════════════════════════════════════════════════════════════════
   DESKTOP PAGE — classic full-width layout for the reference modules
   (standings.html / schedule.html / brackets.html)

   Those three pages used to add `.mobile-frame` on any non-touch UA, which
   pinned them inside a 440px phone column on a 27" screen. They are reference
   content — tables, fixtures, a knockout tree — not a thumb-driven game, so
   on a real desktop viewport the body gets `.desktop-page` INSTEAD and the
   page lays out like an ordinary web page: wide, scrollable, no phone frame,
   no bottom dock, no burger.

   Everything is scoped to `body.desktop-page`, which only these three pages
   ever set, so nothing else on the platform can be reached from here.
   The three module layouts are told apart with `#modules:has(> li.…)` —
   the same UL holds a very different tree on each page and no page-level
   class exists to key off.
   ═══════════════════════════════════════════════════════════════════ */

/* No @media gate here on purpose. The page's own script owns the breakpoint
   and sets .desktop-page; a second width test in CSS could only ever disagree
   with it — and it did: `window.innerWidth` counts the scrollbar and a media
   query does not, so a window a few pixels above the threshold got the class
   with none of the rules, leaving the phone dock and its burger on screen.
   One gate, in one place. */

  /* ── ROOT SCALE ────────────────────────────────────────────────────
     main.css sets html{font-size:3vh} — ~32px on a 1080px-tall desktop.
     That is calibrated for a 440px phone column; across 1400px of page it
     turns every rem into a poster. Cap it back to page proportions. */
  html:has(body.desktop-page) {
    font-size: clamp(15px, 1.85vh, 19px);
    overflow-x: hidden;
    height: auto;
  }

  /* ── PAGE SHELL ────────────────────────────────────────────────────
     main.css has body{display:flex} + html,body{height:100%} and main{
     height:100%;overflow:hidden} — a fixed-height single screen. These
     pages scroll, so the whole chain goes back to auto height. */
  body.desktop-page {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
  }
  body.desktop-page .wrapper,
  body.desktop-page #wrapper {
    height: auto;
    min-height: 0;
    width: 100%;
  }
  body.desktop-page main,
  body.desktop-page #main {
    height: auto;
    overflow: visible;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px 72px;
  }
  body.desktop-page .game { width: 100%; }

  /* ── HEADER ────────────────────────────────────────────────────────
     The mobile header is a 15vh block with a 300px logo padded by 50px —
     half a desktop screen before any content. Compact banner instead.
     !important is needed twice over: main.css and brackets.css both set the
     logo box with !important. */
  body.desktop-page header {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0 4px;
  }
  body.desktop-page header a {
    position: static;
    height: auto;
    margin: 0;
  }
  body.desktop-page header a .logo,
  body.desktop-page #header_logo.logo,
  body.desktop-page #header_logo2.logo {
    position: static;
    padding: 0 !important;
    max-width: 260px !important;
    max-height: 104px !important;
    margin: 0 auto !important;
  }
  body.desktop-page h1 {
    margin-bottom: 1.4rem;
    max-width: 100%;
  }

  /* No language switcher on the desktop pages. lang-switcher.css already has
     a `.mobile-only` opt-out, but its base rule is `display:flex !important`,
     so the opt-out never wins — hence the !important here. */
  body.desktop-page #switcher,
  body.desktop-page .lang-switcher { display: none !important; }

  /* ── NO BOTTOM BAR ─────────────────────────────────────────────────
     The dock is a thumb-reach bar anchored to the bottom of a phone frame.
     There is no frame here and no thumb, so it simply does not belong — and
     ext-slider.js does not even build it on a .desktop-page body. These rules
     are the second line of defence, for a stale script or a bar built before
     a resize crossed into desktop width. */
  body.desktop-page .ext-dock,
  body.desktop-page .ext-dock.always-visible,
  body.desktop-page .ext-dock-menu,
  body.desktop-page .ext-slider { display: none !important; }

  /* The pages reserve ~110px at the bottom of #modules for the fixed dock.
     No dock here, so reclaim it. Their inline rule uses !important. */
  body.desktop-page main #modules { padding-bottom: 24px !important; }

  /* ── STANDINGS ─────────────────────────────────────────────────────
     brackets.css already ships a ≥1024px grid for this (events in a flex
     row, pools in two columns) — it simply never ran, because the frame
     kept the viewport 440px wide. It runs now; this only widens it out to
     the full page and gives each pool a card to sit in. */
  body.desktop-page #modules:has(> li.standings) {
    display: block;
    max-width: 100%;
    margin: 2rem auto 0;
  }
  /* One event = one row of pool cards. brackets.css lays each event out as a
     fixed 2-column grid at ≥1024px, which was written for the framed column:
     `1fr 1fr` refuses to go below the tables' min-content, so at full width
     the columns overflow their event and print on top of the next one.
     auto-fit + minmax gives the same two columns on a laptop and three or
     four on a wide screen, and never overflows.
     The `#modules >` is load-bearing: the pool <li>s carry `.standings.active`
     themselves, and must not become grids of their own. */
  body.desktop-page #modules > li.standings.active {
    display: grid;
    grid-template-areas: none;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    align-items: start;
    gap: 24px;
    width: 100%;
  }
  body.desktop-page #modules > li.standings + li.standings { margin-top: 28px; }
  body.desktop-page .standings .pools li {
    width: 100%;
    margin-top: 0;
    align-items: stretch;
    padding: 18px 22px 22px;
    border-radius: 18px;
    corner-shape: squircle;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .3);
  }

  /* landing.min.css carries a blanket `h3{display:none}` that leaks onto every
     page linking it, so the pool names never render. On a phone the pools are
     read one after the other and the loss is survivable; four unlabelled tables
     side by side on a desktop are not. Restore them here only. */
  body.desktop-page .standings .pools h3 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    margin: 0 0 14px;
    font-size: var(--secondary-font-size, 1rem);
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  body.desktop-page .standings .pools h3 a {
    flex: 0 0 auto;
    font-size: .78em;
    font-weight: 600;
    text-decoration: none;
    color: var(--fourth-color, #eef4fb);
    opacity: .72;
  }
  body.desktop-page .standings .pools h3 a:hover { opacity: 1; text-decoration: underline; }

  body.desktop-page .standings table {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
    border-collapse: collapse;
  }
  /* the fixed 50/150/60px column widths are phone measurements */
  body.desktop-page .standings table th,
  body.desktop-page .standings table td { width: auto; padding: 7px 6px; }
  body.desktop-page .standings table th:nth-child(2),
  body.desktop-page .standings table td:nth-child(2) { width: auto; text-align: left; }
  body.desktop-page .standings table tbody tr + tr td {
    border-top: 1px solid rgba(255, 255, 255, .07);
  }

  /* ── SCHEDULE ──────────────────────────────────────────────────────
     A stack of 85%-wide buttons is a phone list; across 1440px it is one
     word per line of whitespace. Same buttons, tiled. */
  body.desktop-page #modules:has(> li.schedule) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    align-items: stretch;
    gap: 16px;
    max-width: 100%;
    margin: 2rem auto 0;
  }
  body.desktop-page #modules:has(> li.schedule) > li { display: flex; }
  body.desktop-page #modules:has(> li.schedule) > li button {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  /* ── BRACKETS ──────────────────────────────────────────────────────
     This one is a display page: on desktop the tree claims the screen
     instead of sitting in a phone-sized band at the top of it. Giving
     .bt-wrap the leftover height is what does it — the rounds are stretch
     flex items, so they grow to that height and `space-around` on .bt-col
     spreads the cards down it. The connectors are measured from the laid-out
     cards by a ResizeObserver, so they follow with no extra work.

     min-height, not height: the medal games sit under the tree on some
     events and must still be able to push the page taller. The 190px is the
     header (logo + title) above it — an underestimate on purpose, since
     being a little short only means a little scroll, while overshooting
     would clip the final. */
  body.desktop-page #modules:has(> li.bt-root) {
    display: block;
    max-width: 100%;
    margin: 1.4rem auto 0;
  }
  body.desktop-page .bt-root {
    --bt-fs: clamp(15px, 1.05vw, 21px);
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 190px);
  }
  body.desktop-page .bt-wrap { flex: 1 1 auto; min-height: 0; display: flex; }
  body.desktop-page .bt-tree {
    flex: 1 1 auto;
    align-items: stretch;
    gap: clamp(30px, 3.4vw, 70px);
    justify-content: center;
    min-width: 100%;
  }
  body.desktop-page .bt-round { flex: 0 0 clamp(216px, 17vw, 330px); }
  body.desktop-page .bt-head { padding-bottom: 18px; }
  body.desktop-page .bt-side { padding: 10px 13px; }
  body.desktop-page .bt-side img,
  body.desktop-page .bt-noflag { width: 30px; height: 22px; }
  body.desktop-page .bt-when { padding: 7px 0; }
  body.desktop-page .bt-medals { max-width: 860px; margin: 34px auto 0; }

  /* ── CATEGORY CAPTION ──────────────────────────────────────────────
     Replaces the chips on desktop (see brackets-tree.js): says which draw
     is on screen and how far through the rotation it is. Read-only — the
     dots are decoration, not controls, so they carry no hit target. */
  body.desktop-page .bt-chips { display: none; }
  body.desktop-page .bt-cat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 10px 22px;
  }
  body.desktop-page .bt-cat-name {
    font-weight: 700;
    font-size: calc(var(--bt-fs) * 1.05);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--primary-color, #fff);
  }
  body.desktop-page .bt-cat-dots { display: flex; align-items: center; gap: 6px; }
  body.desktop-page .bt-cat-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bt-ink, #fff) 26%, transparent);
    transition: background .3s ease, transform .3s ease;
  }
  body.desktop-page .bt-cat-dot.active {
    background: var(--primary-color, #fff);
    transform: scale(1.35);
  }