/*
 * The rankings browser.
 *
 * WHERE THIS LOADS, which decides what belongs in it. functions.php enqueues
 * this file only when the QV_RANKINGS_BROWSER query var is set, so it reaches
 * /rankings/browser/ and nothing else. The only markup it can ever style is
 * what template-parts/rankings-browser-view.php prints, plus the Avada page
 * chrome around it.
 *
 * That is worth stating because two other templates print class names from this
 * file and never receive it: templates/division-hub.php prints win-btn-tier2
 * and win-btn-leaf, and templates/event-landing.php prints win-rankings-table
 * and win-table-full. Those elements render unstyled. The rules for them were
 * removed from here on 2026-08-31 rather than left looking load-bearing; if the
 * intent is that those pages be styled, the fix is an enqueue, not a rule here.
 *
 * REMOVED IN THE SAME PASS, none of it reachable from the browser view:
 *
 *   .wp-block-group / .wp-site-blocks   a block-theme compatibility shim. This
 *                                       site runs Avada, a classic theme, and
 *                                       neither wrapper appears on the page.
 *   .win-division-bar and its -sub and  a division bar the view does not print.
 *   -leaf variants                      Only the buttons outlived it, and they
 *                                       went to division-hub.php.
 *   .win-btn-tier1 / -tier2 / -leaf     see above. Their .active variants went
 *                                       too: nothing adds that class, in the
 *                                       template or in win-ui-state.js, which
 *                                       toggles only is-collapsed and
 *                                       win-division-pref-collapsed.
 *   .win-choice-grid                    unprinted, and its grid-template-columns
 *                                       was invalid anyway: repeat() takes a
 *                                       count or auto-fill, never bare `auto`.
 *   .win-weight-list                    unprinted.
 *   .win-mobile-filter-row / -cell      unprinted. .win-mobile-filter-pair, a
 *                                       different element, is printed and stays.
 *   .win-division-panel-label           unprinted.
 *   .win-event-season-select            unprinted.
 *   --high-school and                   both families below are keyed by
 *   --senior-level-international on     weight_class_set, which has no such
 *   .win-choice-item and                cases. They are division_group values,
 *   .win-weight-choices-field           which is the neighbouring enum.
 *
 * Empty rules whose every declaration was commented out (.col-school and the
 * base .win-weight-choices-field) went with them, along with the commented-out
 * declarations scattered through the rules that stayed.
 */

/*
 * ONE SIZING SYSTEM, in em against this wrap.
 *
 * There were five. Absolute keywords (large, small, x-small), relative keywords
 * (smaller, larger), em, rem, and one `unset !important`. Nine sizes rendered on
 * a single screen.
 *
 * The absolute keywords were the reason it came apart on a phone. `large` is
 * 18px and `small` is 13px whatever they sit inside, because they resolve
 * against the browser's default rather than their parent. So the width rule
 * below, which drops this wrap to make the whole component smaller, could not
 * reach them: the legend stayed 18px inside a 13px component, ending up larger
 * than the thing containing it.
 *
 * Everything is now a multiple of this wrap, so changing this one size moves the
 * whole component and the ratios hold. The values were chosen to render exactly
 * what the keywords did at desktop: 1.125em is the 18px `large` was, 0.8125em
 * the 13px of `small`.
 *
 * Font families are still not set anywhere here, and should not be. Those come
 * from Avada. The two buttons are the only exceptions and they say why.
 */
.win-rankings-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25em;
}

/* Was label.win-rankings-notice. It is a span now, because it labelled no
   control, so the element is out of the selector. */
.win-rankings-notice {
    padding: 0.25em;
    font-style: oblique;
    font-weight: bold;
}

/*
 * The floor under a selection with no rows, which nine empty table rows used to
 * hold up. A min-height keeps the column from collapsing beside the sidebar
 * without inventing content to announce.
 *
 * Not matched to the sidebar. The sidebar's height follows the weight class
 * count, which runs from two rows to a dozen and more, so any fixed pairing
 * would be wrong for most divisions. This only has to stop the page looking
 * broken, and the sidebar is not there to match at narrow widths anyway.
 */
.win-rankings-empty {
    min-height: 18em;
}

/* Filter form */
.win-rankings-filter-form {
    padding: 0.75em 0 0.5em;
    margin-bottom: 1em;
}

/*
 * MIN-WIDTH 0, because this is a fieldset.
 *
 * A fieldset carries min-inline-size: min-content from the user agent, which no
 * other element does. It will not shrink below the widest thing inside it, so
 * where there is not room it grows past its own container instead. Measured at a
 * 360px viewport: the form sat correctly at 20 to 341, and the fieldset inside it
 * ran 20 to 352, twelve pixels beyond, carrying the legend and both select rows
 * out past the wrap's right padding.
 *
 * That is why the right edge looked cut while the left looked padded. It was not
 * the padding. Widening the padding made it worse, since everything it pushed
 * right had nowhere to go.
 */
.win-division-columns {
    margin: 0 0 0.8em;
    padding: 0;
    border: 0;
    min-width: 0;
}

.win-division-columns > legend {
    font-size: 1.125em;
    color: #374151;
    margin-bottom: 0.5em;
}

.win-division-panel-head {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    flex-shrink: 1;
    flex: 1;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 0.5em 0.625em;
    margin-bottom: 0.5em;
    box-sizing: border-box;
}

.win-division-panel-head-left {
    display: inline-flex;
    align-content: flex-start;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
    flex-shrink: 1;
    flex: 1;
    min-width: 0;
}

.win-division-quick-select {
    order: 1;
    min-width: 4em;
}

.win-division-panel-current {
    order: 1;
    font-size: 0.82em;
    color: #111827;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 0.2em 0.55em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 28em;
}

.win-division-toggle {
    min-width: 6em; /* maintain size of button as it toggles */
    margin-left: auto;
    border: 1px solid #7d848f;
    border-radius: 0.375em;
    padding: 0.3em 0.6em;
    /*
     * Was 0.55em, which computed to 9.9px against the legend it sits in — the
     * smallest text anywhere in the form and well under the site's floor. The
     * other controls in this form sit at 13 to 16px; this now lands in that
     * range instead of below it.
     */
    font-size: 0.8em;
    /*
     * INHERIT THE FAMILY, which a button does not do on its own. Form controls
     * carry the user agent's own font, so with nothing stated here this button
     * rendered in Arial while every control around it was in the site's Inter.
     * The selects escape it only because Avada styles them.
     *
     * Nothing is installed by saying this. It hands the button back to whatever
     * the page is already using, which is the same thing the rest of this file
     * does by saying nothing at all.
     */
    font-family: inherit;
    font-weight: 600;
    background: #f8fafc;
    color: #111827;
    cursor: pointer;
    display: inline-flex;
    gap: 0.5em;
    order: 2;
}

.win-division-toggle::after {
    content: "▾";
    display: inline-block;
    line-height: 1;
    transition: transform 180ms ease;
}

.win-division-toggle[aria-expanded="false"]::after {
    transform: rotate(-90deg);
}

.win-division-panel-body {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 180ms ease, opacity 180ms ease;
    margin: 0;
    padding: 0;
}

.win-division-panel-body > .win-division-columns-grid {
    min-height: 0;
    overflow: hidden;
}

/*
 * Two routes to the same collapsed state, grouped rather than written twice as
 * they were. is-collapsed is what win-ui-state.js toggles on the panel once the
 * reader has chosen; win-division-pref-collapsed is set on <html> before paint
 * from the stored preference, so a panel that should start closed never flashes
 * open first. The media query below repeats this pair, deliberately, to replace
 * the animated height with display:none on small screens.
 */
.win-division-columns.is-collapsed .win-division-panel-body,
.win-division-pref-collapsed .win-division-columns[data-division-panel] .win-division-panel-body {
    grid-template-rows: 0fr;
    opacity: 0;
}

.win-division-columns.is-collapsed .win-division-panel-head,
.win-division-pref-collapsed .win-division-columns[data-division-panel] .win-division-panel-head {
    margin-bottom: 0;
}

.win-division-columns-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(8em, 1fr));
    gap: 0.75em;
}

.win-division-column {
    border: 1px solid #e5e7eb;
    padding: 0.5em;
    background: #fafafa;
}

.win-division-column-title {
    margin: 0 0 0.5em 0;
    font-size: 0.8125em;
    font-weight: 600;
}

.win-choice-stack {
    display: grid;
    gap: 0.25em;
    align-content: start;
    grid-auto-rows: max-content;
}

#win-season-select {
    font-weight: 600;
}

#win-season-select-label {
    font-size: 1.125em;
    font-weight: 600;
}

.win-filter-field {
    display: flex;
    flex-direction: column;
    margin: 0 0 1em 0;
}

.win-filter-field label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0;
}

/*
 * Controls follow the SITE's shape, at the browser's own scale.
 *
 * The site's form controls are 1px solid #002559 with a 6px radius — measured
 * on the issues filter, which is unstyled by us and therefore shows the theme's
 * own treatment. This form had four font sizes, three border treatments and
 * radius on some controls and not others.
 *
 * What is NOT adopted is the site's 50px control height. There are 29 controls
 * in this form; at that height the browser becomes a scrolling column. Shape is
 * matched, bulk is not — operator direction 2026-08-18.
 *
 * Three selects below this rule set a 2px grey border and, being later at equal
 * specificity, win. So the navy described here reaches every control except
 * those three. See the note on that rule.
 */
.win-filter-control {
    border: 1px solid var(--wp--preset--color--awb-color-3, #002559);
    border-radius: 0.375em;
    background: #fff;
    color: #111827;
    /* inherit, which is what `unset` meant here, said plainly. The !important
       stays because it is beating Avada's own control sizing. A control takes
       the size of whatever it sits in, so one in the legend is larger than one
       in the sidebar. That follows from inheriting and is left as it was. */
    font-size: inherit !important;
    height: 2em !important;
    padding: 0 0.4em;
}

/*
 * A focus ring, on the controls a keyboard moves through.
 *
 * The four selects had no ring at all, computed outline-style none, so anyone
 * driving this form from the keyboard could not see where they were. Black, so
 * it sits at full contrast on the white card and stays clear of the seven
 * division colours, none of which is black.
 *
 * :focus-visible rather than :focus, so a ring appears for the keyboard and not
 * around a control somebody has just clicked. The submit button keeps its own
 * treatment below, where focus changes the fill instead.
 */
.win-filter-control:focus-visible,
.win-division-toggle:focus-visible,
.win-choice-item input[type="radio"]:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 1px;
}

.win-weight-choices-field > legend {
    font-size: 1.125em;
    font-weight: 600;
    color: #374151;
}

.win-choice-item {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    gap: 0.5em;
    /*
     * Border stays NEUTRAL by default, deliberately, and does not adopt the
     * site's navy. Navy is also college-men's checked colour, so a navy
     * default would erase the checked signal for that division — the very
     * thing the per-division palette below exists to carry. Shape matches the
     * site; the colour stays the division system's to use.
     */
    /*
     * #7d848f, not the #d1d5db this was. That grey came to 1.47 against white,
     * where WCAG 1.4.11 asks 3 for the boundary of a control, so the outline of
     * all 25 of these was effectively not there for a reader with low vision.
     *
     * Measured against the column tints rather than against white, because that
     * is what these actually sit on. #8b919b clears 3 on white at 3.17 and fails
     * on the tint at 2.97. This one gives 3.77 and 3.54.
     *
     * It is the lightest value that clears both, deliberately. Darker greys were
     * available and would have made an unchecked item heavier than a checked one
     * carrying a light division colour, which trades one 1.4.11 problem, the
     * boundary, for another, the state.
     */
    border: 1px solid #7d848f;
    border-radius: 0.375em;
    padding: 0.25em 0.5em;
    margin-top: 0.5em;
    background: #fff;
    color: #374151;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.5em;
    cursor: pointer;
    min-height: 2em;
    min-width: 10em;
}

/*
 * BLACK DOT, BECAUSE THE DEFAULT IS THE READER'S OWN. Left alone, a radio paints
 * its dot in the accent colour the operating system is set to, so the same page
 * shows a blue dot to most visitors, purple to one whose Mac is set that way,
 * and so on. That colour then sits inside a control whose border and tint carry
 * the division's colour, and the two have nothing to do with each other.
 *
 * accent-color is stated here so the dot is the same for everyone. Black rather
 * than the division colour: the dot is 8px across, the smallest coloured thing
 * on the page, and a coloured dot inside a same-coloured border reads as a
 * smudge. The border and the tint carry the division; the dot only has to say
 * which row is chosen.
 */
.win-choice-item input[type="radio"] {
    margin: 0;
    accent-color: #000000;
}

/*
 * The fallback for a checked choice with no division colour of its own.
 *
 * It was the brand red on a pink tint, which was wrong twice. The red was the
 * same value college women carried, so an uncoloured division and college women
 * looked identical and the colour said nothing at all. The tint was the last
 * pink left in the file.
 *
 * Grey, because what this actually means is that nothing has been assigned, and
 * grey is the one thing no division claims. Almost no chroma also keeps it clear
 * of all seven whatever their lightness.
 *
 * #6b7280 rather than the lighter #9ca3af first chosen here. That one was picked
 * for colour distance alone and came to 2.54 against white, failing the 3 that
 * WCAG 1.4.11 asks of a control's boundary. Distance from the teal falls from
 * 35.8 to 25.8 in exchange, which is the right way round: this says "unassigned"
 * and never has to be told apart from a division at a glance, whereas a boundary
 * nobody can see is a fault whatever colour it is.
 *
 * Nothing reaches this today. Every choice the view prints carries a modifier,
 * and color_key_for_division falls back to college-men rather than to nothing,
 * so this shows only once a case is added to weight_class_set without a colour
 * below, which is exactly when a reader should see "unassigned" instead of a
 * colour that means something else.
 */
.win-choice-item:has(input[type="radio"]:checked) {
    border-color: #6b7280;
    background: #f4f4f5;
    color: #111827;
}

.win-choice-item.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/*
 * Division and weight colour coding.
 *
 * Two different enums key these, which is the trap. The column classes take
 * division_group, four cases. The choice-item and weight-choices-field classes
 * take weight_class_set, seven cases, via DivisionCatalog::color_key_for_division().
 * Both sets below are now exactly their enum, no more and no less, so a case
 * added to either enum without a rule here is the only way they can drift.
 */
.win-division-column--college-men {
    border-color: #b9cde6;
    background: #f4f8fd;
}

/* Was a pale pink, #f0c1c5 on #fff7f8, which put the stereotype in the column
   tint as well as in the checked colour. */
.win-division-column--college-women {
    border-color: #f0cdb2;
    background: #fefaf6;
}

.win-division-column--high-school {
    border-color: #c8d9ec;
    background: #f7fbff;
}

.win-division-column--senior-level-international {
    border-color: #eadcb7;
    background: #fffbf2;
}

.win-choice-item--college-men:has(input[type="radio"]:checked) {
    border-color: #002559;
    background: #e8eef7;
}

/*
 * Orange, where this was the brand red opposite college men's navy.
 *
 * Moving high school girls off pink left half the pattern standing: the men's
 * school division in blue, the women's in red. Operator direction 2026-08-31,
 * take the hue relationship out altogether, so no men's division and no
 * women's division are paired by colour.
 *
 * Wine, #831843, separated further at 53 against this one's 35.5, and was not
 * taken: it is still the red family, which is the association being removed.
 * 35.5 clears the set's tightest existing pair, the two blues at 32.5.
 */
.win-choice-item--college-women:has(input[type="radio"]:checked) {
    border-color: #c2410c;
    background: #fce9db;
}

.win-choice-item--high-school-boys:has(input[type="radio"]:checked) {
    border-color: #1f6fb4;
    background: #e8f2fb;
}

/*
 * Green, where this was pink. Operator direction 2026-08-31: pink is a
 * stereotype about who is being listed, and the palette should not carry one.
 *
 * The scheme it came from put the two men's school divisions in blues and the
 * two women's in pink and red, which is that stereotype spelled out in the
 * stylesheet. It also read badly: those reds sat within 3.5 points of lightness
 * of each other and could not be told apart. Green is 41.2 from its nearest
 * neighbour, against 30.1 for the pink it replaces.
 */
.win-choice-item--high-school-girls:has(input[type="radio"]:checked) {
    border-color: #15803d;
    background: #e3f5e8;
}

.win-choice-item--mens-freestyle:has(input[type="radio"]:checked) {
    border-color: #b77900;
    background: #fff4d6;
}

.win-choice-item--mens-greco-roman:has(input[type="radio"]:checked) {
    border-color: #0f6a6a;
    background: #def4f4;
}

/*
 * Purple, where this was a third red.
 *
 * The two other international styles each have a hue of their own, amber for
 * men's freestyle and teal for men's greco. This one did not: it sat at #d7263d,
 * 19.8 from college women in CIE Lab, the closest pair in the whole set and
 * about a sixth of the distance between the furthest.
 *
 * Brightness was the real trouble rather than hue. The three women's colours
 * were all within 3.5 points of lightness, 50.7, 47.4 and 47.2, so a 2px line
 * could not tell them apart. The two blues are the same family and read fine
 * because they are 30 points apart. This sits at 37.9 and 69.5 from its nearest
 * neighbour.
 */
.win-choice-item--womens-freestyle:has(input[type="radio"]:checked) {
    border-color: #7e22ce;
    background: #f3e8ff;
}

/*
 * A line across the top of the sidebar in the colour of the division showing.
 *
 * THESE DREW NOTHING UNTIL 2026-08-31. The only element carrying them is the
 * sidebar aside, and .win-rankings-sidebar below set `border` on all four
 * sides; same weight, lower in the file, so it won and painted over the top
 * line. That rule now names three sides and leaves the top alone.
 *
 * Each colour is the one its division already uses for a checked choice, so a
 * reader sees the same colour in the filter and along the sidebar. The two
 * college lines were the exceptions, set at 20% opacity when the other five
 * were solid, which left them close to invisible even once they could draw.
 * Operator direction: make them solid, which also makes the rule above true of
 * all seven rather than five.
 */
.win-weight-choices-field--college-men {
    border-top: 2px solid #002559;
    padding-top: 0.25em;
}

.win-weight-choices-field--college-women {
    border-top: 2px solid #c2410c;
    padding-top: 0.25em;
}

.win-weight-choices-field--high-school-boys {
    border-top: 2px solid #1f6fb4;
    padding-top: 0.25em;
}

.win-weight-choices-field--high-school-girls {
    border-top: 2px solid #15803d;
    padding-top: 0.25em;
}

.win-weight-choices-field--mens-freestyle {
    border-top: 2px solid #b77900;
    padding-top: 0.25em;
}

.win-weight-choices-field--mens-greco-roman {
    border-top: 2px solid #0f6a6a;
    padding-top: 0.25em;
}

.win-weight-choices-field--womens-freestyle {
    border-top: 2px solid #7e22ce;
    padding-top: 0.25em;
}

/*
 * The same control, doing the same job, as the issues archive's Filter button,
 * so it is styled the same. Both are the scripting-off submit for a filter.
 * See .issues-volume-go in style.css.
 */
.win-filter-submit {
    margin-top: 0.75em;
    padding: 0.4em 1em;
    border: 0;
    border-radius: 0.2em;
    background: var(--wp--preset--color--awb-color-3, #002559);
    color: #fff;
    font-size: 0.9em;
    /* Same as the toggle above: a button does not inherit the family by itself,
       so without this it renders in Arial next to labels and selects in Inter.
       This one is inside <noscript>, where it is the only way to apply a filter,
       so it is the control that can least afford to look unrelated to the form
       around it. */
    font-family: inherit;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.win-filter-submit:hover,
.win-filter-submit:focus-visible {
    background: var(--wp--preset--color--awb-color-4, #ed1c25);
}

/* Layout */
.win-rankings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5em;
    padding-top: 0em;
    align-items: start;
}

.win-rankings-layout > .win-rankings-main {
    min-width: 0;
}

/* Was declared twice, the second occurrence overriding the first's padding.
   Merged, keeping the padding that won. */
.win-rankings-sidebar {
    position: sticky;
    top: 0.1em;
    width: auto;
    min-height: 2em;
    /*
     * THREE SIDES, NOT FOUR, so the top is left to the division colour set by
     * .win-weight-choices-field--* above. This was `border: 1px solid #e5e7eb`,
     * which drew all four; being lower in the file than those seven rules and
     * carrying the same weight, it won, and the coloured top line had never
     * once appeared. Naming the three sides means order stops mattering.
     */
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
    padding: 0.55em 0.7em;
    background: #fff;
}

.win-choice-stack-weights {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    display: grid;
    gap: 0.5em;
    justify-items: start;
}

.win-choice-stack-weights .win-choice-item {
    width: auto;
    min-width: 8em;
}

/* Main content */
.win-rankings-title {
    margin: 0;
    color: #111827;
}

.win-rankings-subtitle {
    margin: 0.5em 0 0 0;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

.win-rankings-subtitle2 {
    color: #6b7280;
    margin: 0.5em 0 0 0;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

/* Shown once when a URL was corrected, e.g. a weight class that does not
   exist for the selected division. Informational, not an error: the page
   below it is valid content, so this is muted rather than alarming. */
.win-rankings-correction {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.85rem;
    border-left: 3px solid #d1d5db;
    background: #f9fafb;
    color: #4b5563;
    /* em, not the rem this was. A rem is fixed to the page root and so ignored
       the width rule that shrinks this component. */
    font-size: 0.9375em;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

/*
 * #6b7280, not the #9ca3af this was, which gave 2.54 against white at 13px
 * where WCAG 1.4.3 asks 4.5 for text this size. It is now 4.83.
 *
 * The same grey .win-rankings-subtitle2 already uses, rather than a new value.
 * Both are muted lines under the title doing the same job, and that one was
 * already the passing side of the line at 4.83 while this one was not.
 */
.win-snapshot-info {
    color: #6b7280;
}

/* Table */
.win-rankings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83em;
}

.win-rankings-table thead {
    background: #1e293b;
    color: #fff;
}

.win-rankings-table th {
    padding: 0.625em 0.75em;
    text-align: left;
    font-weight: 600;
    /* Against the table, deliberately, so the head keeps its ratio to the rows
       under it rather than to the component. */
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.win-rankings-table td {
    padding: 0.625em 0.75em;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.win-rankings-table tbody tr:nth-child(odd) {
    background: #eff6ff80;
}

.win-rankings-table tbody tr:hover {
    background: #fff20490;
}

.col-notice {
    background-color: #eff6ff80;
    width: min-content;
    margin: 0 auto 0 auto;
}

.col-rank {
    width: 4em;
    font-weight: 500;
}

.col-rank.top-three {
    color: #991b1b;
    font-weight: 700;
}

.col-record {
    font-variant-numeric: tabular-nums;
}

.col-trend {
    width: 60px;
}

.trend-up {
    color: #166534;
}

.trend-down {
    color: #991b1b;
}

/*
 * The selects keep a 2px grey border, which beats the navy .win-filter-control
 * gives every other control: same one-class specificity, and these come later.
 * Left as it renders rather than quietly restyled during a cleanup.
 */
.win-division-quick-select {
    border: 2px solid #7d848f;
}

/* Mobile season/weight selects live in the panel head; hidden on desktop */
.win-mobile-season-select,
.win-mobile-weight-select {
    display: none;
    flex-shrink: 1;
    min-width: 5em;
    max-width: 12em;
    border: 2px solid #7d848f;
}

@media only screen and (device-width: 1000px),
       only screen and (max-width: 1000px) {
    #main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .win-rankings-wrap {
        margin: 0 auto;
        padding: 0 1.25em;
    }

    .win-rankings-subtitle {
        line-height: 100%;
    }

    .win-snapshot-info {
        line-height: 100%;
        padding-bottom: 5%;
    }

    .win-rankings-filter-form {
        padding: 0.2em 0 0.1em;
        margin-bottom: 0.15em;
    }

    .win-division-columns {
        margin-bottom: 0.15em;
    }

    .win-division-panel-head {
        padding: 0.35em 0.45em;
        flex-direction: column;
        align-items: stretch;
    }

    .win-division-columns-grid {
        grid-template-columns: 1fr 1fr;
    }

    .win-division-panel-current {
        max-width: 100%;
    }

    .win-rankings-layout {
        grid-template-columns: 1fr;
        gap: 0.2em;
    }

    /*
     * NOWRAP, so the toggle stays beside the division select.
     *
     * The base rule wraps, and this one set the direction without resetting
     * that. The select asks for max-content, which at these widths is wider
     * than what is left after the toggle, so the toggle was pushed onto a line
     * of its own with the row above half empty.
     *
     * The select can afford to give way: it already carries min-width 0 and
     * flex 1 1 auto, so it shrinks to whatever is left, and max-width caps how
     * far it grows rather than how far it shrinks. The toggle keeps its size
     * through flex-shrink 0 below.
     */
    .win-division-panel-head-left {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5em;
        min-width: 0;
    }

    .win-division-quick-select {
        order: 0;
        flex: 1 1 auto;
        min-width: 0;
        max-width: max-content;
    }

    .win-division-toggle {
        margin-left: auto;
        flex-shrink: 0;
        order: 2;
    }

    /* Pair div sits below head-left as its own row */
    .win-mobile-filter-pair {
        display: flex;
        flex-direction: row;
        gap: 0.4em;
        min-width: 0;
    }

    .win-mobile-season-select,
    .win-mobile-weight-select {
        display: block;
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }

    .win-rankings-title {
        margin-bottom: 0.08em;
    }

    .win-rankings-subtitle {
        margin-bottom: 0.3em;
    }

    .win-snapshot-info {
        margin-bottom: 0.2em;
    }

    /* On mobile, prioritize compactness over animated collapse body height */
    .win-division-columns.is-collapsed .win-division-panel-body,
    .win-division-pref-collapsed .win-division-columns[data-division-panel] .win-division-panel-body {
        display: none;
    }

    /* When collapsed on mobile, hide the current-division label — the select suffices */
    .win-division-columns.is-collapsed .win-division-panel-current,
    .win-division-pref-collapsed .win-division-columns[data-division-panel] .win-division-panel-current {
        display: none;
    }

    .win-rankings-sidebar {
        display: none;
    }

    /* The floor under an empty selection exists to stop the column collapsing
       beside the sidebar. The sidebar is gone by this width, so the floor is
       234px of nothing on a phone. */
    .win-rankings-empty {
        min-height: 0;
    }
}

@media only screen and (device-width: 800px),
       only screen and (max-width: 800px) {
    /*
     * The one knob. Every size in this file is a multiple of this wrap, so
     * setting it here moves the whole component and the ratios hold.
     *
     * 0.8125em is the 13px that `font-size: small` gave, said as a ratio so it
     * follows the page rather than the browser default. That keyword is also
     * why this rule used to do so little: the legend and the column title were
     * keywords too, and keywords ignore their parent, so they stayed at their
     * desktop size inside a component that had shrunk around them.
     */
    .win-rankings-wrap {
        font-size: 0.8125em !important;
        /*
         * 1.5em sideways, which is 19.5px against this wrap's 13px, so the gap
         * matches the 20px desktop gets from its own 1.25em.
         *
         * It was a flat 1em, 13px, meaning the narrow screen had LESS room at
         * the edges than the wide one. It reads worst on the right, where the
         * toggle and the weight select both end flush against the inset while
         * the division select on the left merely begins at it. Equal gaps, but
         * an edge that stops at the margin looks cut and one that starts at it
         * looks placed.
         */
        padding: 1em 1.5em;
        margin: 0;
        width: 100%;
    }

    label,
    .win-filter-control {
        padding: 0;
    }

    /*
     * The table needs no size of its own here any more. It is 0.83em of the
     * wrap, so shrinking the wrap above shrinks it: 10.8px, where the
     * `font-size: x-small` this replaces gave a flat 10px whatever the wrap did.
     * Slightly larger, and it now moves with everything else instead of being a
     * second place to remember.
     */
}