.leaderboard-order-tools { position:relative; display:flex; flex:0 0 auto; }
.leaderboard-order-tools[hidden], .leaderboard-order-panel[hidden], .leaderboard-order-reset[hidden] { display:none !important; }
.leaderboard-controls .search-wrapper { align-items:center; flex-wrap:wrap; gap:.5rem; min-width:0; }
.leaderboard-controls .search-container { flex:1 1 10rem; min-width:min(10rem,100%); margin-right:0; }
.leaderboard-actions { display:flex; align-items:center; gap:.5rem; flex:0 0 auto; margin-left:auto; }
.leaderboard-controls #athleteSearch { padding-right:max(44px,2.75rem); text-overflow:ellipsis; }
.leaderboard-controls .search-container:has(#athleteSearch:not(:placeholder-shown)) .search-icon { display:none; }
.leaderboard-controls .search-container .clear-icon { right:0; width:44px; height:44px; }
.leaderboard-order-toggle {
    display:inline-grid; place-items:center; width:max(44px, 2.75rem); height:max(44px, 2.75rem); padding:0; box-sizing:border-box;
    background:var(--lwc-surface); border:1px solid var(--lwc-border); border-radius:var(--lwc-radius-md, 8px);
    color:var(--lwc-accent); font:inherit; font-size:1.2rem; line-height:1; cursor:pointer; box-shadow:none;
}
.leaderboard-order-toggle:hover, .leaderboard-order-toggle.is-active, .leaderboard-order-toggle[aria-expanded="true"] {
    background:var(--lwc-accent-soft); border-color:var(--lwc-accent);
}
.leaderboard-order-toggle:disabled { opacity:.55; cursor:wait; }
.leaderboard-order-toggle.is-active { border-radius:var(--lwc-radius-md,8px) 0 0 var(--lwc-radius-md,8px); }
.leaderboard-order-reset {
    display:grid; place-items:center; flex:0 0 auto; box-sizing:border-box; width:44px; height:max(44px,2.75rem); min-height:44px; padding:0;
    color:var(--lwc-accent); background:var(--lwc-accent-soft); border:1px solid var(--lwc-accent); border-left:0;
    border-radius:0 var(--lwc-radius-md,8px) var(--lwc-radius-md,8px) 0; box-shadow:none; transform:none; cursor:pointer;
}
.leaderboard-order-reset svg { width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.leaderboard-order-reset:hover { background:var(--lwc-surface-muted); }
.leaderboard-order-panel {
    container:order-panel / inline-size;
    display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:.5rem;
    position:absolute; z-index:105; right:0; top:calc(100% + .5rem); box-sizing:border-box;
    width:26rem; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:min(.75rem,12px); overflow-y:auto;
    background:var(--lwc-surface); color:var(--lwc-ink); border:1px solid var(--lwc-border);
    border-radius:var(--lwc-radius-md, 10px); box-shadow:0 8px 24px #0002;
    transform:translate(var(--order-panel-shift,0px),var(--order-panel-shift-y,0px));
    transition:none;
}
.leaderboard-order-rows { min-width:0; }
.leaderboard-order-row { display:grid; grid-template-columns:minmax(0, 1fr); align-items:center; gap:.35rem; }
.leaderboard-order-row + .leaderboard-order-row { margin-top:.5rem; }
.leaderboard-order-row label { font-size:.8rem; font-weight:500; color:var(--lwc-muted); margin:0; }
.leaderboard-order-field {
    display:grid; grid-template-columns:minmax(0,1fr) 44px 44px; min-width:0; box-sizing:border-box;
    border:1px solid var(--lwc-border); border-radius:var(--lwc-radius-sm,6px); background:var(--lwc-surface); overflow:hidden;
}
.leaderboard-order-field:has(:focus-visible) { outline:2px solid var(--lwc-accent); outline-offset:2px; }
.leaderboard-order-select { position:relative; display:block; min-width:0; }
#leaderboardOrderPanel select {
    display:block; appearance:none; width:100%; min-width:0; height:max(44px,2.75rem); padding:0 2rem 0 .75rem; margin:0; box-sizing:border-box;
    border:0; border-radius:var(--lwc-radius-sm,6px) 0 0 var(--lwc-radius-sm,6px); outline:0; box-shadow:none;
    color:var(--lwc-ink); background:transparent; font:inherit; font-size:.9rem; line-height:1.25; cursor:pointer;
}
#leaderboardOrderPanel select:disabled { color:var(--lwc-muted); cursor:default; }
.order-select-chevron { position:absolute; right:.65rem; top:50%; width:1rem; height:1rem; transform:translateY(-50%); color:var(--lwc-muted); pointer-events:none; }
.leaderboard-order-field svg { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.leaderboard-order-direction, .leaderboard-order-clear, .leaderboard-order-swap {
    display:grid; place-items:center; width:100%; min-height:max(44px,2.75rem); padding:0; margin:0; box-sizing:border-box;
    border:0; border-left:1px solid var(--lwc-border); border-radius:0;
    color:var(--lwc-accent); background:transparent; box-shadow:none; cursor:pointer;
}
.leaderboard-order-direction svg, .leaderboard-order-clear svg, .leaderboard-order-swap svg { width:1.1rem; height:1.1rem; pointer-events:none; }
.leaderboard-order-clear { color:var(--lwc-muted); border-radius:0 var(--lwc-radius-sm,6px) var(--lwc-radius-sm,6px) 0; }
.leaderboard-order-swap { align-self:center; border:0; border-radius:var(--lwc-radius-sm,6px); height:44px; }
.leaderboard-order-swap svg { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.leaderboard-order-direction[data-direction="asc"] svg { transform:rotate(180deg); }
.leaderboard-order-direction:disabled, .leaderboard-order-clear:disabled, .leaderboard-order-swap:disabled { color:var(--lwc-muted); cursor:default; }
.leaderboard-order-direction:disabled svg, .leaderboard-order-clear:disabled svg, .leaderboard-order-swap:disabled svg { opacity:.35; }
.leaderboard-order-direction:hover:enabled, .leaderboard-order-clear:hover:enabled, .leaderboard-order-swap:hover:enabled, .leaderboard-order-select:hover:has(select:enabled) { background:var(--lwc-surface-muted); }
#leaderboardOrderPanel .leaderboard-order-direction:focus-visible, #leaderboardOrderPanel .leaderboard-order-clear:focus-visible { outline:0; background:var(--lwc-accent-soft); }
.leaderboard-order-toggle:focus-visible, .leaderboard-order-reset:focus-visible,
.leaderboard-order-swap:focus-visible, .leaderboard-column-order:focus-visible, .leaderboard-rules-link:focus-visible { outline:2px solid var(--lwc-accent); outline-offset:3px; }

/* Keep a heading and its unit together. The arrow has its own fixed place. */
.leaderboard > table > thead th { word-break:normal; overflow-wrap:normal; }
.leaderboard table th[data-order-key] { position:relative; vertical-align:middle; }
.leaderboard table .leaderboard-column-order {
    display:inline-grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:.3rem; row-gap:.1rem;
    min-height:44px; max-width:100%; margin:0; padding:0; box-sizing:border-box; vertical-align:middle;
    border:0; border-radius:2px; background:transparent; box-shadow:none; color:inherit;
    font:inherit; text-transform:inherit; letter-spacing:inherit; text-align:inherit; line-height:1.3; white-space:normal; min-width:0; cursor:pointer;
}
.order-heading { display:contents; }
.order-heading-label { grid-column:1 / -1; grid-row:1; display:block; min-width:0; word-break:normal; overflow-wrap:normal; }
th[data-order-direction="asc"] .order-heading-label, th[data-order-direction="desc"] .order-heading-label { grid-column:2; }
.leaderboard-column-order small { grid-column:2; grid-row:2; display:block; margin:0; font-size:.8em; font-weight:400; letter-spacing:0; text-transform:none; color:var(--lwc-muted); }
.leaderboard .leaderboard-column-order:hover { color:var(--lwc-accent); background:transparent; }
.leaderboard-order-tools .leaderboard-order-toggle,
.leaderboard-order-tools .leaderboard-order-reset,
#leaderboardOrderPanel .leaderboard-order-direction,
#leaderboardOrderPanel .leaderboard-order-clear,
#leaderboardOrderPanel .leaderboard-order-swap,
.leaderboard table .leaderboard-column-order { transform:none; box-shadow:none; }
.order-indicator { grid-column:1; grid-row:1; align-self:start; margin-top:.1em; color:var(--lwc-accent); line-height:1; }
.order-indicator svg { display:block; width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
th[data-order-direction="asc"] .order-indicator svg { transform:rotate(180deg); }
.order-indicator:empty { display:none; }
.leaderboard-metric-heading { display:inline-flex; flex-wrap:nowrap; align-items:center; min-width:0; max-width:100%; vertical-align:middle; }
#athleteLeaderboard .leaderboard-metric-heading > .leaderboard-column-order { min-width:0; max-width:none; }
#athleteLeaderboard .leaderboard-metric-heading > .leaderboard-rules-link { display:inline-flex; flex:0 0 24px; width:24px; box-sizing:border-box; margin:0; padding:0; }
.leaderboard table .leaderboard-rules-link { display:inline-flex; align-items:center; justify-content:center; width:24px; min-height:44px; color:var(--lwc-muted); margin:0; padding:0; font-size:.8em; vertical-align:middle; }
.leaderboard table th[data-order-key="metric"] { white-space:nowrap; }
.leaderboard table th.leaderboard-order-column, .leaderboard table td.leaderboard-order-value { text-align:right; font-variant-numeric:tabular-nums; }
.leaderboard--ordered > table { table-layout:auto; }
#athleteLeaderboard.leaderboard--ordered { container:leaderboard-results / inline-size; }
.leaderboard--ordered > table td.leaderboard-order-value { color:var(--lwc-ink); white-space:nowrap; }
.leaderboard--ordered .order-missing { color:var(--lwc-muted); }
.leaderboard--ordered .media-contact-handle { max-width:7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; vertical-align:middle; }
@media (min-width:769px) {
    #athleteLeaderboard.leaderboard--ordered { --order-cell-gutter:clamp(4px,calc(16cqi - 9rem),16px); }
    #athleteLeaderboard.leaderboard--ordered > table th,
    #athleteLeaderboard.leaderboard--ordered > table tbody tr[data-athlete-name] > td { padding-inline:var(--order-cell-gutter); }
    #athleteLeaderboard.leaderboard--ordered > table th[data-order-key="name"] { padding-left:calc(var(--portrait-size) + var(--order-cell-gutter) + 1.1rem); }
    #athleteLeaderboard.leaderboard--ordered > table thead th[data-order-key="rank"] { width:clamp(52px,6cqi,4.75rem); }
    #athleteLeaderboard.leaderboard--ordered > table thead th.sponsor-th { width:clamp(72px,9cqi,7rem); }
    #athleteLeaderboard.leaderboard--ordered > table thead th[data-order-key="metric"] { width:clamp(112px,13cqi,9.5rem); }
    #athleteLeaderboard.leaderboard--ordered > table thead th.leaderboard-order-column { width:clamp(112px,15cqi,10.75rem); min-width:0; }
    #athleteLeaderboard.leaderboard--ordered > table thead .media-contact-th { width:clamp(72px,8cqi,6rem); min-width:0; word-break:normal; }
    .leaderboard--ordered > table th[data-order-key="name"], .leaderboard--ordered > table td.athlete-td { width:auto; }
    .leaderboard--ordered table tbody tr:not(.no-results):not(.tier-separator) .athlete-td {
        grid-template-columns:var(--portrait-size) minmax(0,1fr); column-gap:.65rem;
    }
    .leaderboard--ordered table tbody .athlete-td .badge-section { grid-column:2; min-width:0; }
    .leaderboard--ordered table tbody .athlete-td .badge-section:empty { display:none; }
    .leaderboard--ordered > table th[data-order-key="metric"], .leaderboard--ordered > table td.age-reduction-td { text-align:right; }
}
@media (max-width:768px), (max-width:932px) and (max-height:480px) and (orientation:landscape) {
    .leaderboard-order-panel { width:min(26rem,calc(100vw - 24px)); right:calc(-1 * (max(44px, 2.75rem) + .5rem)); }
}
@container leaderboard-results (max-width:55em) {
    .leaderboard--ordered > table {
        --portrait-size:40px; display:block; flex:1 1 0; width:100%; min-width:0; container:ordered-board / inline-size;
        border-radius:var(--lwc-radius-lg,12px); overflow:clip;
    }
    .leaderboard--ordered > table > thead, .leaderboard--ordered > table > tbody { display:block; width:100%; }
    /* Headings and rows share tracks; selected fields take priority over context. */
    #athleteLeaderboard.leaderboard--ordered > table > :is(thead,tbody) > tr {
        --order-value-count:1; --order-metric-offset:0;
        --order-tracks:2.75rem minmax(0,1.6fr) repeat(var(--order-value-count),minmax(5.5rem,1fr));
        --order-name-column:2; --order-score-column:3; --order-first-column:calc(3 + var(--order-metric-offset));
        --order-value-row:1; --order-value-gap:0; --order-column-gap:.75rem;
    }
    #athleteLeaderboard.leaderboard--ordered[data-order-columns="2"] > table > :is(thead,tbody) > tr,
    #athleteLeaderboard.leaderboard--ordered[data-order-columns="1"]:has(th[data-order-key="metric"]:is([data-order-level="1"],[data-order-level="2"])) > table > :is(thead,tbody) > tr { --order-value-count:2; }
    #athleteLeaderboard.leaderboard--ordered:has(th[data-order-key="metric"]:is([data-order-level="1"],[data-order-level="2"])) > table > :is(thead,tbody) > tr { --order-metric-offset:1; }
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr,
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr[data-athlete-name] {
        display:grid; grid-template-columns:var(--order-tracks); grid-template-areas:none;
        align-items:center; column-gap:var(--order-column-gap); row-gap:var(--order-value-gap); padding:.5rem .75rem; box-sizing:border-box;
    }
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > th,
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > th[data-order-key] {
        display:flex; align-items:center; width:auto; min-width:0; height:auto; padding:0; margin:0; border:0; background:none; font-size:.8rem; text-align:left;
    }
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > .sponsor-th,
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > .media-contact-th,
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr > .sponsor-td,
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr > .media-contact-td { display:none; }
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > th[data-order-key="rank"] { grid-column:1; grid-row:1; justify-content:center; }
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > th[data-order-key="name"] { grid-column:var(--order-name-column); grid-row:1; padding-left:calc(var(--portrait-size) + .5rem); }
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > th[data-order-key="metric"] { grid-column:var(--order-score-column); grid-row:var(--order-value-row); justify-content:flex-end; text-align:right; }
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > th.leaderboard-order-column {
        grid-column:var(--order-first-column); grid-row:var(--order-value-row); align-self:stretch; align-items:stretch; justify-content:flex-end; text-align:right;
    }
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > th.leaderboard-order-column ~ th.leaderboard-order-column { grid-column:calc(var(--order-first-column) + 1); }
    .leaderboard--ordered > table > thead .leaderboard-column-order { min-height:44px; }
    .leaderboard--ordered > table > thead .leaderboard-order-column .leaderboard-column-order { align-content:start; grid-template-rows:auto auto; }
    .leaderboard--ordered > table > thead .leaderboard-order-column .order-heading-label { align-self:start; }
    .leaderboard--ordered > table > thead > tr > th[data-order-key="metric"] .leaderboard-column-order { min-height:44px; }
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr[data-athlete-name] { padding-block:.625rem; }
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr.tier-amateur[data-athlete-name] { padding-left:calc(.75rem - 4px); }
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr[data-athlete-name] > td {
        grid-area:auto; width:auto; min-width:0; margin:0; border:0; padding:0;
    }
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr[data-athlete-name] > .rank-td { grid-column:1; grid-row:1; justify-content:center; }
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr[data-athlete-name] > .athlete-td { display:flex; grid-column:var(--order-name-column); grid-row:1; gap:.5rem; }
    .leaderboard--ordered .athlete-td :is(.badge-section,.athlete-name-links) { display:none; }
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr[data-athlete-name] > .age-reduction-td { grid-column:var(--order-score-column); grid-row:var(--order-value-row); text-align:right; align-items:flex-end; }
    #athleteLeaderboard.leaderboard--ordered:not([data-order-columns="0"]):not(:has(th[data-order-key="metric"]:is([data-order-level="1"],[data-order-level="2"]))) > table > thead > tr > th[data-order-key="metric"],
    #athleteLeaderboard.leaderboard--ordered:not([data-order-columns="0"]):not(:has(th[data-order-key="metric"]:is([data-order-level="1"],[data-order-level="2"]))) > table > tbody > tr[data-athlete-name] > .age-reduction-td { display:none; }
    #athleteLeaderboard.leaderboard--ordered .athlete-name { padding-inline:0; font-size:.95rem; line-height:1.25; }
    .leaderboard--ordered .athlete-td .rank-change :is(.new-bubble,.rank-arrow) {
        z-index:2; left:auto; right:-3px; top:auto; bottom:-3px; transform:none; width:14px; height:14px;
        border:2px solid var(--lwc-surface); border-radius:50%; font-size:8px; box-sizing:border-box;
    }
    .leaderboard--ordered table td.age-reduction-td::before { content:none; }
    .leaderboard--ordered table .age-reduction { font-size:.95rem; white-space:normal; }
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr[data-athlete-name] > .leaderboard-order-value {
        grid-column:var(--order-first-column); grid-row:var(--order-value-row); text-align:right; white-space:normal; overflow-wrap:anywhere; font-size:.95rem; line-height:1.35;
    }
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr[data-athlete-name] > .leaderboard-order-value ~ .leaderboard-order-value { grid-column:calc(var(--order-first-column) + 1); }
    .leaderboard--ordered > table > tbody > tr[data-athlete-name] > .leaderboard-order-value::before { content:none; }
}
@container ordered-board (max-width:32em) {
    #athleteLeaderboard.leaderboard--ordered:where([data-order-columns="2"],[data-order-columns="1"]:has(th[data-order-key="metric"]:is([data-order-level="1"],[data-order-level="2"]))) > table > :is(thead,tbody) > tr {
        --order-tracks:2.75rem minmax(0,1fr) minmax(0,1fr);
        --order-name-column:2 / -1; --order-score-column:2; --order-first-column:calc(2 + var(--order-metric-offset));
        --order-value-row:2; --order-value-gap:.35rem;
    }
}
@container order-panel (max-width:18em) {
    .leaderboard-order-rows { grid-column:1 / -1; grid-row:1; }
    .leaderboard-order-swap { grid-column:1 / -1; grid-row:2; width:44px; justify-self:center; }
}
/* Stack before the longest selected heading outgrows its sort button. */
@container ordered-board (max-width:18.75em) {
    #athleteLeaderboard.leaderboard--ordered > table > :is(thead,tbody) > tr {
        --order-tracks:2.25rem minmax(0,1fr); --order-name-column:2; --order-score-column:2;
        --order-value-row:2; --order-value-gap:.35rem; --order-column-gap:.5rem;
    }
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > th.leaderboard-order-column,
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr[data-athlete-name] > .leaderboard-order-value { grid-column:2; grid-row:calc(2 + var(--order-metric-offset)); }
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > th.leaderboard-order-column ~ th.leaderboard-order-column,
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr[data-athlete-name] > .leaderboard-order-value ~ .leaderboard-order-value { grid-column:2; grid-row:3; }
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > th:is([data-order-level="1"],[data-order-level="2"]) .leaderboard-column-order { grid-template-columns:minmax(0,1fr); }
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > th:is([data-order-level="1"],[data-order-level="2"]) .order-heading-label { grid-column:1; grid-row:2; min-height:0; }
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > th:is([data-order-level="1"],[data-order-level="2"]) .order-indicator { grid-column:1; grid-row:1; justify-self:end; }
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > th:is([data-order-level="1"],[data-order-level="2"]) small { grid-column:1; grid-row:3; }
}
/* At enlarged text sizes even the longest name word cannot share the remaining
   identity width with a portrait. Give every name the same start below it. */
@container ordered-board (max-width:10em) {
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr > th[data-order-key="name"] { padding-left:0; }
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr[data-athlete-name] > .athlete-td { flex-direction:column; flex-wrap:nowrap; align-items:flex-start; }
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr[data-athlete-name] > .rank-td { align-self:start; min-height:var(--portrait-size); }
}
@media (max-width:360px) {
    .leaderboard-order-panel { padding:min(.75rem,12px); }
    .leaderboard-order-row { column-gap:.35rem; }
    #leaderboardOrderPanel select { font-size:.85rem; }
    #athleteLeaderboard.leaderboard--ordered > table > thead > tr,
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr[data-athlete-name] { padding-inline:.5rem; }
    #athleteLeaderboard.leaderboard--ordered > table > tbody > tr.tier-amateur[data-athlete-name] { padding-left:calc(.5rem - 4px); }
    #athleteLeaderboard.leaderboard--ordered table .age-reduction { font-size:.9rem; }
}