/* Site-wide corrections to Tabler. Loaded immediately after tabler.css in
   every layout (app, league, tournament).
   Keep this file small and each rule explained — it wins over the vendor
   stylesheet, so anything in here is invisible to anyone reading tabler.css. */

/* Tabler sets, at >=992px:
       :root, :host { margin-left: calc(100vw - 100%); }
   That is its guard against the page jumping sideways when a scrollbar appears
   and disappears between pages. The cost is that the whole document is pushed
   right by the width of the scrollbar (~15px), so nothing can reach the left
   edge of the window — every navbar sits in from the edge with a strip of page
   background beside it.

   scrollbar-gutter does the same job properly: the browser reserves the
   scrollbar's space inside the viewport, so there is still no sideways jump,
   and the document once again starts at x=0. Browsers too old to know the
   property simply lose the jump-prevention, which is cosmetic. */
:root,
:host {
    margin-left: 0 !important;
    margin-right: 0 !important;
    scrollbar-gutter: stable;
}

/* How wide the page is allowed to get.

   Tabler caps .container-xl at 1320px from 1400px up, which on a wide monitor
   leaves a third of the screen as margin while the schedule board, the
   brackets and the registration tables scroll sideways inside it.

   A custom property rather than a literal: this is one number somebody will
   want to retune, and it is the only place it is written down.

   Only above Tabler's own 1400px breakpoint. Below that the container is
   already narrower than this and the rule would do nothing; written outside
   the query it would still do nothing, less obviously.

   Public league and tournament pages are untouched: their width is chosen per
   site in Page Design, and .pcw .page-body > .container-xl carries more
   specificity than this. */
:root {
    --pc-measure: 1620px;

    /* How wide a FORM is allowed to get, which is a different question.

       The measure above exists for tables and the schedule board, which want
       every pixel. A form does not: a text input a metre wide, with its label
       a metre from its value, is harder to fill than a narrow one. One number
       governing both is why settings screens stretched to the full width.

       Applied by hand with .pc-form-measure, never globally -- several admin
       screens called "settings" are genuinely wide (the registration-types
       table, the divisions editor with its inline Save rows, the page
       builder), and capping those would hurt. */
    --pc-form-measure: 900px;
}

@media (min-width: 1400px) {
    .container-xl {
        max-width: var(--pc-measure);
    }
}

/* Opt in per form. Not auto-centred: these sit under a left sidebar and a
   heading, and centring the fields away from both reads as a different page. */
.pc-form-measure {
    max-width: var(--pc-form-measure);
}