:root { --bg:#0f1216; --panel:#1a1e25; --line:#2a3038; --txt:#dde2e8;
        --dim:#828b98; --acc:#f0a830; --ax1:#6fb3e0; --ax2:#e0706f; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { background:radial-gradient(1200px 500px at 50% -200px,#1c2530,var(--bg));
       color:var(--txt); margin:0; min-height:100vh; min-height:100dvh;
       font:15px/1.45 system-ui,Segoe UI,sans-serif; }
a { color:var(--ax1); text-decoration:none; } a:hover { text-decoration:underline; }
.wrap { max-width:1120px; margin:0 auto; padding:26px 22px 40px; }
.hdr { border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:18px; }
h1 { font-size:30px; margin:0; letter-spacing:1px; font-weight:800; }
/* logo sits on the far left of the topbar and fills the vertical space with a
   FIXED height — bounded so it can never stretch the bar or push the separator
   down. The wordmark/tagline/nav column sits to its right. */
.brandlogo-link { display:flex; align-items:center; flex:0 0 auto;
  text-decoration:none; }
.brandlogo { height:190px; width:auto; display:block; object-fit:contain; }
.brand-col { display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; gap:8px; flex:1 1 auto; min-width:0; max-width:100%; }
.brand-top { display:flex; align-items:center; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; width:100%; max-width:100%; }
.brandlock { display:inline-flex; flex-direction:column; justify-content:center;
  align-items:flex-start; text-align:left; text-decoration:none; max-width:100%; }
.brandlock h1 { line-height:1; }
/* .nav and .brand-top are flex items of a flex-start-aligned column, so
   without an explicit width they size to their own (unwrapped) content and
   can overflow the header on narrow screens instead of wrapping; max-width
   alone still let inline content overflow the box, so force a definite
   width (100% of the column) so line-wrapping actually applies to it. */
.brand-col .nav { text-align:left; width:100%; max-width:100%; }
@media (max-width:520px){ h1{ font-size:24px } }
h1 a { color:var(--txt); } h1 .acc { color:var(--acc); }
.tagline { color:var(--dim); font-size:13.5px; margin:5px 0 0; }
.tagline b { color:var(--txt); font-weight:600; }
h2 { font-size:13px; color:var(--dim); margin:26px 0 9px;
     text-transform:uppercase; letter-spacing:1px; font-weight:700; }
.cards { display:flex; gap:11px; flex-wrap:wrap; margin-top:4px; }
.card { background:linear-gradient(180deg,#222934,#1a1e25);
        border:1px solid var(--line); border-radius:10px;
        padding:14px 20px; min-width:140px; flex:1; }
.card b { display:block; font-size:28px; color:var(--acc); font-weight:800;
          font-variant-numeric:tabular-nums; line-height:1.1;
          overflow-wrap:anywhere; }
/* the name card holds text, not a number: smaller, allowed to wrap+grow */
.card.name { flex:2; }
.card.name b { font-size:19px; }
.card span { color:var(--dim); font-size:11.5px; text-transform:uppercase;
             letter-spacing:.8px; }
table { width:100%; border-collapse:collapse; background:var(--panel);
        border:1px solid var(--line); border-radius:10px; overflow:hidden; }
th, td { padding:7px 11px; text-align:right; white-space:nowrap; }
th:first-child, td:first-child { text-align:left; }
th { background:#222934; color:var(--dim); font-size:11.5px;
     text-transform:uppercase; letter-spacing:.5px; user-select:none; }
/* sortable headers are server-side links; keep them looking like headers */
th a { color:inherit; text-decoration:none; display:block; cursor:pointer; }
th a:hover { color:var(--txt); text-decoration:none; }
th a.sort-on { color:var(--acc); }
.sort-arr { font-size:9px; vertical-align:middle; }
tr:nth-child(even) td { background:#161a20; }
td { border-top:1px solid var(--line); font-variant-numeric:tabular-nums; }
tbody tr:hover td { background:#202732; }
.t1 { color:var(--ax1); } .t2 { color:var(--ax2); }
.dim { color:var(--dim); } .ai { color:var(--dim); font-style:italic; }
.rank { color:var(--dim); font-variant-numeric:tabular-nums; width:1px; }
tbody tr:nth-child(1) .rank { color:#ffd34d; font-weight:800; }
tbody tr:nth-child(2) .rank { color:#cfd4da; font-weight:700; }
tbody tr:nth-child(3) .rank { color:#d6924a; font-weight:700; }
.muted { font-size:12px; color:var(--dim); margin-top:22px; }
.muted b { color:var(--acc); }
/* class fingerprint: a lives-weighted stacked bar of soldier classes */
.fp { margin-top:4px; }
.fp-arch { font-size:14px; font-weight:700; color:var(--txt);
           margin:0 0 8px; }
.fp-arch .dim { font-weight:400; }
.fp-bar { display:flex; height:26px; border-radius:7px; overflow:hidden;
          border:1px solid var(--line); background:var(--panel); }
.fp-seg { min-width:2px; }
.fp-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:9px;
             font-size:11.5px; color:var(--dim); }
.fp-legend span { display:inline-flex; align-items:center; gap:5px;
                  white-space:nowrap; }
.fp-dot { width:10px; height:10px; border-radius:3px; display:inline-block; }
.fp-legend b { color:var(--txt); font-variant-numeric:tabular-nums;
               font-weight:700; }
/* flex+gap instead of margin-right on each link: a trailing inline margin
   on the last link of a wrapped line still extends past the line box, which
   let the nav overflow its container (and the viewport) on narrow screens
   even though the links themselves wrapped correctly. */
.nav { margin:0; font-size:13.5px; display:flex; flex-wrap:wrap;
        column-gap:18px; row-gap:6px; }
.nav a { color:var(--dim); font-weight:600; }
.nav a:hover { color:var(--acc); }
.nav a.active { color:var(--acc); border-bottom:2px solid var(--acc);
                padding-bottom:2px; }
/* touch targets are cramped at this line-height on phones; add breathing
   room so each link is comfortably tappable without enlarging desktop nav */
@media (max-width:640px){ .nav a{ display:inline-block; padding:6px 0; } }
/* Nav groups are native <details>/<summary>: click a label to expand its
   links, no JS required for the disclosure itself (NAV_JS only auto-opens
   the current section's group and adds the active-highlight class). Reset
   the browser's default marker/indent so it reads as a nav pill, not a
   generic collapsible box. */
.nav-group { position:relative; }
.nav-group summary { list-style:none; cursor:pointer; color:var(--txt);
                      font-weight:700; padding:2px 0; }
.nav-group summary::-webkit-details-marker { display:none; }
.nav-group summary::after { content:'\25BE'; display:inline-block;
                             margin-left:5px; font-size:10px; color:var(--dim); }
.nav-group[open] summary::after { content:'\25B4'; }
/* A pinned group stays open after the pointer leaves, so it needs to look
   different from one that's merely open under the cursor -- otherwise the
   menu that follows you and the menu that doesn't are indistinguishable.
   The accent marker is the affordance: it says "this one is held". */
.nav-group.pinned summary::after { color:var(--acc); }
/* The group holding the current page. This used to take the accent color,
   which made three different things on one screen the same orange: the
   brand wordmark, this label, and the actual current-page link inside the
   menu (which is ALSO underlined). Readers took the label to mean "the
   page you're on" when it only opens a menu, and it competed with the real
   current-page marker one line below.
   The accent now stays reserved for the page you're actually on. The
   section keeps a quieter cue: normal text color, plus a soft underline
   that reads as "you're somewhere in here" without impersonating a link. */
.nav-group.active summary { color:var(--txt);
                            box-shadow:inset 0 -2px 0 var(--line); }
/* Hover bridge. The popover is offset `margin-top:4px` from the summary, so
   the pointer crosses a dead strip on its way down and mouseleave fires --
   the menu would shut just as you reached for it. This invisible pad spans
   the gap so the group stays hovered the whole way. It exists only while
   the group is open, or it would swallow clicks on the row beneath.
   Paired with the 180ms close delay in NAV_JS; belt and braces, since the
   pad can't cover a diagonal exit past the popover's edge. */
.nav-group[open]::after { content:''; position:absolute; top:100%; left:0;
                          width:100%; height:6px; }
.nav-links { display:flex; flex-direction:column; gap:4px;
             position:absolute; top:100%; left:0; z-index:5;
             background:var(--panel); border:1px solid var(--line);
             border-radius:6px; padding:8px 12px; margin-top:4px;
             min-width:140px; }
/* Collapsed groups stack in normal flow at mobile width instead of
   floating a popover, matching the existing .nav wrap behavior there. */
@media (max-width:640px){
  .nav-links { position:static; border:none; background:none;
               padding:4px 0 4px 14px; margin-top:0; }
}
.footer-links { display:flex; flex-wrap:wrap; column-gap:18px; row-gap:6px;
                margin-top:10px; font-size:12px; }
.footer-links a { color:var(--dim); font-weight:600; }
.footer-links a:hover { color:var(--acc); }
/* display:flex is load-bearing for the scroll hint, not cosmetic. ::after was
   position:absolute with right:0, but .scroll is BOTH the containing block and
   the scroller, so `right:0` resolved against the full scrollWidth -- the hint
   sat at the end of the CONTENT and slid inward as you swiped. Measured in a
   360px viewport: it shifted -272px (exactly the overflow), landing over the
   middle columns. Reported on Android Chrome + Firefox 2026-08-18.
   A flex container lets ::after be position:sticky instead, which tracks the
   visible edge. The alternative -- a non-scrolling wrapper div -- is the
   textbook fix but would touch all 24 `class=scroll` call sites. */
.scroll { position:relative; overflow-x:auto; border:1px solid var(--line);
  border-radius:10px; -webkit-overflow-scrolling:touch; display:flex; }
/* the table must not shrink inside the flex container, or flex-shrink would
   compress it to fit and there would be nothing left to scroll. */
.scroll > table { flex:0 0 auto; }
/* The generic `table` rule sets overflow:hidden to clip its own border-radius.
   Inside .scroll that makes the TABLE a scroll container, so position:sticky on
   its cells anchors to the table (which never scrolls) instead of to .scroll --
   the sticky first column below silently did nothing. .scroll already clips and
   rounds, so the table does not need its own. */
.scroll table { border:0; overflow:visible; }
/* the pinned column must be fully opaque and sit above both the scrolling
   cells and the ::after swipe hint (z-index:2), or scrolled content shows
   through it. background must track --panel: a hardcoded colour drifts from
   the table behind it and leaves a mismatched stripe down the left edge. */
.scroll th:first-child, .scroll td:first-child {
  position:-webkit-sticky; position:sticky; left:0; background:var(--panel);
  z-index:3; }
/* horizontal-scroll hint: a fade + chevron pinned to the right edge, shown only
   while the table has more to swipe. JS (scrollHintJs) toggles .at-end when the
   user reaches the right edge, and .no-scroll when nothing overflows. */
.scroll::after {
  /* U+203A single right-pointing angle quote. ONE backslash: a doubled one
     makes CSS emit the literal text "\203A" (reported 2026-07-30). */
  content:"\203A"; position:sticky; right:0; flex:0 0 44px; margin-left:-44px;
  align-self:stretch;
  display:flex; align-items:center; justify-content:flex-end; padding-right:9px;
  font:800 26px/1 system-ui,sans-serif; color:var(--acc); pointer-events:none;
  background:linear-gradient(90deg, rgba(26,30,37,0), var(--panel) 72%);
  opacity:1; transition:opacity .2s; z-index:2; }
.scroll.at-end::after, .scroll.no-scroll::after { opacity:0; }
@media (min-width:1000px){ /* desktop rarely needs the swipe hint */
  .scroll::after { font-size:20px; width:34px; } }
/* On a phone the 44px hint is a big slice of a ~346px table, and reaching full
   --panel at 72% left the last column washed out under it -- the tier label on
   /elo sat behind the opaque end of the gradient at rest (reported 2026-08-15).
   Narrow it and hold the ramp translucent until the final few px, so the fade
   still says "more to swipe" without veiling a column you are trying to read. */
@media (max-width:640px){
  .scroll::after { width:26px; padding-right:4px; font-size:19px;
    background:linear-gradient(90deg, rgba(26,30,37,0) 0%,
                               rgba(26,30,37,.72) 62%, var(--panel) 100%); } }
/* .wrap's 22px side padding costs 44px of a 390px phone -- a wide table was
   boxed in a gutter and lost ~13% of its width to it. Let scroll containers
   break out to the full viewport while every other child keeps the padding
   (headings, filters and pagers still need it). Side border and radius go too,
   since a full-bleed panel has no visible edge to round. Desktop is unaffected:
   there the gutter is wanted and the table is nowhere near the viewport edge. */
@media (max-width:640px){
  .wrap > .scroll { margin-left:-22px; margin-right:-22px;
    width:calc(100% + 44px); border-left:0; border-right:0; border-radius:0; } }
.wide th, .wide td { padding:5px 9px; font-size:12px; }
.lead td:first-child { font-weight:600; }
/* give the player/name column room so wide (e.g. CJK) names don't cramp */
.lead th:nth-child(2), .lead td:nth-child(2) { min-width:200px; }
/* mobile: 200px on the name column hid the actual data (e.g. the weapons
   Kills column). Trim it + tighten padding so narrow tables fit; wide tables
   still scroll (with the swipe hint). Seeing the numbers beats never wrapping. */
@media (max-width:640px) {
  .lead th:nth-child(2), .lead td:nth-child(2) { min-width:118px; }
  .lead th, .lead td { padding:6px 7px; }
  /* The career leaderboard (.lead.compact) is 19 columns and always scrolls on
     a phone, so the name column can afford a wider floor than the 118px above
     -- 150px fits a 17-char handle like "CaptCatrenko@live" at 11.5px instead
     of wrapping or crushing it. Ranked tables lead with a numeric "#", so the
     .scroll ellipsis cap below never applies to the name cell here; opt it out
     of nowrap explicitly anyway so an over-long name wraps to a second line
     rather than being silently truncated. */
  .lead.compact th:nth-child(2), .lead.compact td:nth-child(2) { min-width:150px; }
  .lead.compact td:nth-child(2) { white-space:normal; overflow-wrap:anywhere; }
  /* Pin the NAME as well as the rank. .scroll pins :first-child, but on a ranked
     leaderboard that is the ~31px numeric "#" -- swiping right kept a bare digit
     and scrolled the player name away, so the visible stats belonged to nobody
     identifiable (reported 2026-08-15). Pin both columns and offset the name by
     the rank width so they sit flush. Scoped to tables that actually have a rank
     cell: on /player the .lead first column is already the name, and pinning two
     columns there would eat ~300px of a 390px viewport.
     The pinned cells must repeat the tr:nth-child(even) stripe from line 60 --
     they paint their own background, so without it every other row shows the
     unstriped --panel and the frozen pair looks detached from its row. */
  .scroll table:has(td.rank) th:first-child,
  .scroll table:has(td.rank) td:first-child {
    width:31px; min-width:31px; z-index:4; }
  .scroll table:has(td.rank) th:nth-child(2),
  .scroll table:has(td.rank) td:nth-child(2) {
    position:-webkit-sticky; position:sticky; left:31px; z-index:4;
    background:var(--panel); min-width:118px; max-width:118px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    border-right:1px solid var(--line);
    box-shadow:6px 0 6px -4px rgba(0,0,0,.55); }
  .scroll table:has(td.rank) tr:nth-child(even) td:first-child,
  .scroll table:has(td.rank) tr:nth-child(even) td:nth-child(2) {
    background:#161a20; }
  /* .longname tables (maps, vehicles) have very long names that otherwise fill
     the whole viewport and hide the ranked metric. Cap + ellipsis the name so
     the primary stat column is visible; full name is on the detail page. */
  .longname td:nth-child(2) { max-width:150px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
  .longname th:nth-child(2), .longname td:nth-child(2) { min-width:0; }
  /* some tables (player match-history / weapons-tab / vehicles) lead with a
     long NAME in the sticky first column, which fills the viewport and hides
     the stats. Cap that first cell too; a numeric "#" first cell is short and
     never hits the cap, so ranked tables are unaffected. */
  .scroll td:first-child { max-width:150px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
  /* Ladder name cell carrying an incognito owner tag `Alias (RealName)`: two
     names in one cell would otherwise double the column width and push the Elo
     badge off a phone screen (th/td default to nowrap). Let it wrap to a second
     line instead, and shrink the tag so the alias stays primary. min-width:0 is
     required -- the .lead floor above would otherwise keep reserving the
     single-name width and the wrap would never help. */
  td.lb-name { white-space:normal; overflow-wrap:anywhere; min-width:0;
               max-width:170px; }
  td.lb-name .name-now { font-size:.78em; margin-left:.25em;
                         display:inline-block; }
}
/* Very narrow phones: the owner tag is supplementary, so let the alias itself
   keep the space. Kept as its own breakpoint rather than hiding it at 640px --
   at typical phone widths both still fit on two short lines, and the whole
   point of the tag is that people can see whose run it is. */
@media (max-width:380px) {
  td.lb-name { max-width:132px; }
  td.lb-name .name-now { font-size:.74em; }
}
/* compact: squeeze a wide many-column leaderboard so it fits w/o scroll */
.compact th, .compact td { padding:4px 6px; font-size:11.5px; }
.compact th { letter-spacing:0; }
/* Desktop only: drop .lead's 200px name floor so 19 columns fit unscrolled.
   Scoped to a width query because on a phone this rule used to win over
   .lead's mobile floor (same specificity, declared later) and collapsed the
   name column to its narrowest possible box -- names like "CaptCatrenko@live"
   and CJK handles ended up cramped against the Elo badge. The table already
   lives in .scroll with a sticky first column and a swipe hint, so below this
   breakpoint the name keeps a real floor and the row scrolls instead. */
@media (min-width:641px) {
  .compact th:nth-child(2), .compact td:nth-child(2) { min-width:0; }
}
/* match scoreboard: two per-team lists side by side, wrap on narrow screens */
/* break out of the 1120 wrap cap so the wide gap fits without wrapping */
.teamboards { display:flex; gap:75px; flex-wrap:nowrap; align-items:flex-start;
              width:calc(100vw - 44px); max-width:1600px; }
.teamcol { flex:1; min-width:0; }
.teamcol h3 { margin:0 0 6px; font-size:15px; }
.teamcol table { width:100%; }
/* vertical dividers between columns in the per-team scoreboards */
.teamcol th + th, .teamcol td + td { border-left:1px solid var(--line); }
/* let the players leaderboard use the full window width, not the 1120 cap */
.fullbleed { max-width:none; margin-right:22px; }
/* .filt REMOVED. It was the pre-rework inline-filter-row class. Every one of
   its six call sites (home.py x2, elo.py x2, player.py x2) migrated to .fbar,
   so the rule styled nothing. Left in place it would invite a new page to
   reach for the old row class instead of the labelled filter bar -- the same
   hazard that let .pill/.subtabs/.pager drift into byte-identical rules.
   Pinned by test_no_dead_control_css_survives. */

/* Filter bar: one labelled container per page for every filter axis. */
.fbar { border:1px solid var(--line); border-radius:7px; padding:9px 12px;
        background:#141a20; margin:14px 0 10px; }
.fbar-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
            margin-bottom:6px; }
.fbar-row:last-child { margin-bottom:0; }
.fbar-l { flex:0 0 auto; min-width:56px; font-size:10px; text-transform:uppercase;
          letter-spacing:.07em; color:var(--dim); font-weight:700; }
.fbar-note { margin:7px 0 0; font-size:12px; color:var(--dim); }
@media (max-width:640px){
  .fbar-row { align-items:flex-start; }
  .fbar-l { flex-basis:100%; }
}

/* Applied-filter summary: names each active value, not just a count. */
.fapplied { display:flex; align-items:center; gap:7px; flex-wrap:wrap;
            margin:8px 0 0; font-size:12px; }
.fchip { display:inline-flex; align-items:center; gap:5px; padding:2px 4px 2px 9px;
         border:1px solid var(--line); border-radius:11px; color:var(--dim); }
.fchip b { color:var(--txt); font-weight:600; }
.fchip-x { padding:0 5px; color:var(--dim); font-weight:700; }
.fchip-x:hover { color:var(--ax2); text-decoration:none; }
.fclear { color:var(--ax1); }
.patreon-btn { display:inline-block; background:#FF424D; color:#fff !important;
               font-weight:700; font-size:12.5px; padding:5px 13px;
               border-radius:6px; text-decoration:none !important;
               white-space:nowrap; letter-spacing:.3px; }
.patreon-btn:hover { background:#e03040; color:#fff !important; }
.patreon-btn .heart { display:inline-block; margin-right:6px;
                      color:#fff; font-size:.95em; transform:translateY(.5px); }
.patreon-btn:hover .heart { animation:heartbeat .9s ease-in-out infinite; }
@keyframes heartbeat { 0%,100%{transform:translateY(.5px) scale(1);}
  25%{transform:translateY(.5px) scale(1.22);}
  40%{transform:translateY(.5px) scale(1.05);}
  60%{transform:translateY(.5px) scale(1.18);} }
@media (prefers-reduced-motion:reduce){ .patreon-btn:hover .heart{animation:none;} }
.search-wrap { position:relative; display:inline-block; margin-left:auto; }
#psearch { background:#222934; border:1px solid var(--line); border-radius:7px;
           color:var(--txt); padding:6px 13px; font-size:14px; width:240px;
           outline:none; }
#psearch:focus { border-color:var(--acc); }
#psearch::placeholder { color:var(--dim); }
/* iOS Safari auto-zooms the page on focus if an input's font-size is under
   16px; bump it back up on narrow screens without touching desktop sizing */
@media (max-width:640px){ #psearch{ font-size:16px } }
#psearch-results { position:absolute; top:calc(100% + 4px); left:0; right:0;
                   background:#222934; border:1px solid var(--line);
                   border-radius:7px; z-index:100; display:none;
                   max-height:280px; overflow-y:auto; }
#psearch-results a { display:block; padding:7px 13px; color:var(--txt);
                     font-size:14px; text-decoration:none; }
#psearch-results a:hover { background:#2a3038; color:var(--acc); }
/* .pill was removed 2026-08-17: every filter call site now uses .seg below.
   It was byte-identical to .subtabs and .pager span.pg.on, which is what made
   filters, view-swapping and paging look like the same control. */
/* Segmented control: the FILTER token. One enclosed track with divided
   segments -- deliberately distinct from .nav/.rail anchors (bare text +
   underline), because a box means "pick a value" and bare text means "go
   somewhere". Replaces the old .pill-row idiom, which was visually identical
   to .subtabs and .pager and so said nothing about what a click would do. */
.seg { display:inline-flex; border:1px solid var(--line); border-radius:6px;
       overflow:hidden; background:#151a20; vertical-align:middle;
       flex-wrap:wrap; }
.seg a { padding:4px 12px; font-size:13px; color:var(--txt); font-weight:500;
         border-right:1px solid var(--line); }
.seg a:last-child { border-right:none; }
.seg a:hover { background:#1e242c; text-decoration:none; }
.seg a.on { background:var(--acc); color:#15181d; font-weight:700; }
.seg b { font-weight:700; opacity:.65; margin-left:4px; }
.ddgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px;
          align-items:start; }
.ddcol { min-width:0; }
.ddcol table { font-size:11.5px; }
.ddcol th, .ddcol td { padding:3px 8px; }
/* stack to one column on narrow screens; each column's table can scroll
   horizontally inside itself so a long stat key never overflows the page.
   (grid track uses minmax(0,1fr) so it can shrink below the table's width.) */
@media (max-width:820px){
  .ddgrid { grid-template-columns:minmax(0,1fr); }
  .ddcol { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
/* Elo tiers — one hue per rank band, readable on the dark panel */
.elo { font-weight:700; font-variant-numeric:tabular-nums; }
.elo-bronze   { color:#cd7f32; }
.elo-silver   { color:#c8d2dc; }
.elo-gold     { color:#ffd34d; }
.elo-platinum { color:#5fd7c9; }
.elo-diamond  { color:#8ab8ff; }
.elo-none     { color:var(--dim); font-weight:400; }
.elo-delta { font-size:11px; margin-left:4px; }
.tier-tag { font-size:10.5px; text-transform:uppercase; letter-spacing:1px;
            font-weight:800; display:block; }
/* ladder placement on the player-page elo card; tabular so the digits
   don't jitter between the main and console cards */
.place { color:var(--txt); font-weight:700; font-variant-numeric:tabular-nums; }
.tq { background:#222934; border:1px solid var(--line); border-radius:7px;
      color:var(--txt); padding:6px 13px; font-size:14px; width:230px;
      outline:none; }
.tq:focus { border-color:var(--acc); }
.tq::placeholder { color:var(--dim); }
@media (max-width:640px){ .tq{ font-size:16px } }
/* full-bleed top bar: spans the whole viewport, content stays centered */
.topbar { border-bottom:1px solid var(--line); background:#13171c;
          padding:0; margin:0; }
.topbar-inner { max-width:1120px; margin:0; padding:12px 18px;
  display:flex; align-items:center; gap:20px; }
@media (max-width:520px){ .brandlogo{ height:56px } }
/* pagination control — page-size selector + prev/next + numbered pages */
.pager { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
         margin:12px 0; font-size:13px; color:var(--dim); }
.pager .pages { display:flex; gap:4px; flex-wrap:wrap; }
/* DEMOTED deliberately: paging is table-local state and the least important of
   the four control kinds, but it used to share .pill's exact border+accent
   treatment, so two pagers per table competed with the filters and the rail.
   Muted border + no accent on .on. The pager still renders TWICE per table
   ({pg}{tbl}{pg}) -- the top copy carries the page-size selector, so removing
   it would be a functional regression. */
.pager a, .pager span.pg { display:inline-block; min-width:30px; text-align:center;
         padding:5px 9px; border:1px solid #232a32; border-radius:6px;
         color:var(--dim); font-weight:600; font-variant-numeric:tabular-nums; }
.pager a:hover { border-color:#3a424c; text-decoration:none; }
.pager span.pg.on { background:#2a3038; color:var(--txt); border-color:#3a424c; }
.pager span.pg.gap { border:0; color:var(--dim); min-width:0; padding:5px 2px; }
.pager .szsel { margin-left:auto; }
.pager select { background:#222934; border:1px solid var(--line); border-radius:6px;
         color:var(--txt); padding:4px 8px; font-size:13px; }
/* .subtabs was removed 2026-08-17 with the player profile's tab strip -- the
   site's only one. Sections now render together with a .rail to jump between
   them, so there is no view-swapping control left to style. */
/* lobby-type badges */
.ltype { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.5px;
         text-transform:uppercase; padding:2px 6px; border-radius:4px; vertical-align:middle;
         margin-left:5px; }
.ltype-mixed   { background:#2a3a2a; color:#6fcf6f; border:1px solid #3a5a3a; }
.ltype-console { background:#2a2a3a; color:#7faeff; border:1px solid #3a3a5a; }
.ltype-pc      { background:#3a2a3a; color:#cf8eff; border:1px solid #5a3a5a; }
.ltype-bots    { background:#3a3a2a; color:#cfbf6f; border:1px solid #5a5a2a; }
/* lobby distribution bar */
.ltype-bar { display:flex; height:8px; border-radius:4px; overflow:hidden;
             margin:6px 0 2px; gap:1px; }
.ltype-bar span { display:block; height:100%; }
/* ---- Enlisted-style visual scoreboard (recreated from the game's Dagor UI:
   scoreTableColumns.nut / mkScoresStatistics.nut / style.nut; emblems from
   uiskin.vromfs.bin). Fluid: each team fills 100% of the container width and
   reflows with the window / zoom — the name column absorbs all slack. ------- */
.sb {
  --sb-ally-hdr:#3a586b; --sb-enemy-hdr:#7a483e;   /* muted, from in-game shot */
  --sb-t0:rgb(150,160,255); --sb-t1:rgb(255,160,160); --sb-my:rgb(150,255,160);
  --sb-line-h:40px; --sb-idx:34px; --sb-elo:96px;
  --sb-num:48px; --sb-score:66px; --sb-hicon:30px; --sb-emblem:26px;
  width:100%;
}
.sb-strip { display:flex; flex-wrap:wrap; padding:2px 4px 8px; color:var(--txt); gap:2px 0; }
.sb-strip .side { flex:1 1 240px; font-size:18px; color:#d6dde3; }
.sb-strip .side.r { text-align:right; }
.sb-strip .side b { font-weight:700; }
.sb-strip .mid { flex:0 0 8px; text-align:center; white-space:nowrap;
                 font-size:16px; color:var(--dim); }
.sb-teams { display:flex; flex-direction:column; gap:20px; width:100%; }
.sb-team { width:100%; min-width:0; }
.sb-hdr { display:flex; align-items:center; height:var(--sb-line-h); font-size:18px; }
.sb-hdr.ally  { background:var(--sb-ally-hdr); }
.sb-hdr.enemy { background:var(--sb-enemy-hdr); }
/* title block spans idx+name: grows to fill everything the fixed cells leave */
.sb-title { flex:1 1 auto; min-width:0;
            display:flex; align-items:center; gap:9px; padding-left:8px; overflow:hidden; }
.sb-title img { width:var(--sb-emblem); height:var(--sb-emblem); flex:0 0 var(--sb-emblem); }
.sb-title .nm { color:#eef2f5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-hcell { width:var(--sb-num); flex:0 0 var(--sb-num); display:flex;
            align-items:center; justify-content:center; }
.sb-hcell.elo { width:var(--sb-elo); flex:0 0 var(--sb-elo); font-size:14px; color:#dfe6ea; }
.sb-hcell.score { width:var(--sb-score); flex:0 0 var(--sb-score); }
.sb-hcell img { width:var(--sb-hicon); height:var(--sb-hicon); }
.sb-rows { border:1px solid; border-top:0; }
.sb-team.ally  .sb-rows { border-color:var(--sb-ally-hdr); }
.sb-team.enemy .sb-rows { border-color:var(--sb-enemy-hdr); }
.sb-row { display:flex; align-items:stretch; height:var(--sb-line-h); }
.sb-row:nth-child(odd)  { background:rgba(255,255,255,.045); }
.sb-row:nth-child(even) { background:rgba(0,0,0,.28); }
.sb-row:hover { background:rgba(120,140,160,.14); }
.sb-cell { display:flex; align-items:center; justify-content:center;
           font-size:16px; font-variant-numeric:tabular-nums;
           width:var(--sb-num); flex:0 0 var(--sb-num); border-left:1px solid; }
.sb-team.ally  .sb-cell { color:var(--sb-t0); border-left-color:var(--sb-ally-hdr); }
.sb-team.enemy .sb-cell { color:var(--sb-t1); border-left-color:var(--sb-enemy-hdr); }
.sb-cell.idx  { width:var(--sb-idx); flex:0 0 var(--sb-idx); border-left:0;
                font-size:13px; color:var(--dim); }
/* name column absorbs all slack so each team fills the container at any width */
.sb-cell.name { flex:1 1 auto; min-width:0; justify-content:flex-start;
                gap:7px; padding:0 6px 0 8px; overflow:hidden; }
.sb-cell.name .nick { flex:0 1 auto; overflow:hidden; text-overflow:ellipsis;
                      white-space:nowrap; }
.sb-cell.name a { color:inherit; }
/* current-identity annotation: `Played (now Current)` / `(incognito · Current)`.
   Muted + smaller so the played name stays primary; incognito tinted. */
.name-now { color:var(--dim); font-size:.85em; margin-left:.4em; }
.name-now::before { content:"("; } .name-now::after { content:")"; }
.name-now a { color:var(--dim) !important; text-decoration:none; }
.name-now a:hover { text-decoration:underline; }
.name-now.incog { color:var(--acc); }
.name-now.incog a { color:var(--acc) !important; }
.sb-cell.score { width:var(--sb-score); flex:0 0 var(--sb-score); color:var(--txt); }
.sb-cell.elo  { width:var(--sb-elo); flex:0 0 var(--sb-elo); gap:5px; }
.sb-row.my .name .nick, .sb-row.my .idx { color:var(--sb-my) !important; }
.sb-row.dc .sb-cell { opacity:.55; }
.sb-squad { margin-left:auto; display:inline-flex; align-items:center;
            justify-content:center; width:19px; height:19px; border-radius:50%;
            font-size:12px; color:#12181f; }
.sb-team.ally  .sb-squad { background:var(--sb-t0); }
.sb-team.enemy .sb-squad { background:var(--sb-t1); }
.sb .elo-val { font-variant-numeric:tabular-nums; }
.sb .sb-delta { font-size:11px; }
.sb .sb-delta.up { color:var(--ax1); } .sb .sb-delta.dn { color:var(--ax2); }
.sb .sb-bot { font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--dim); }
.sb .sb-none { color:var(--dim); }
/* very narrow (phones): shed a little padding so the fixed columns still fit */
@media (max-width:820px) {
  .sb { --sb-num:38px; --sb-elo:74px; --sb-score:54px; --sb-idx:26px; font-size:15px; }
  .sb-cell, .sb-hcell.elo { font-size:14px; }
  /* idx+elo+6 stat cols alone need ~328px at these sizes, before the name
     column gets anything — instead of crushing every column illegibly, give
     the name column a sane floor and let each team's table scroll
     horizontally (header + rows together) rather than overflow the page.
     Breakpoint is 820px, not 520px: at 590 CSS px (a DPR-2 phone) the fixed
     columns already starve the name to a single character, and the old query
     never fired there.
     `flex:none` + `width:max-content` are load-bearing. .sb-teams is a COLUMN
     flex container, so its default align-items:stretch sized each .sb-team to
     the container's 393px cross size and .sb-team's own `width:100%` resolved
     against that same box — min-width:480px never won, the row never grew past
     the viewport, overflow-x had nothing to scroll, and .sb-cell.name (flex:1
     1 auto; min-width:0) absorbed the entire shortfall down to ~21px: one
     truncated character per row. Opting out of the stretch and sizing to
     content makes the row genuinely wider than the viewport, which is what
     turns overflow-x:auto into an actual scroll.

     min-width is 100%, not the old 480px floor. max-content sizes to CONTENT,
     which also means it stops at the content when the content is NARROWER than
     the container: at an 820px viewport the box is 776px and the table drew at
     610px, stranding 166px of dead space down the right (the gap opened from
     ~656px up to the breakpoint, worst exactly at 820px). min-width:100% settles
     both directions from one declaration -- max-content wins while the content
     overflows, 100% wins once it fits. The 480px floor it replaces is subsumed:
     100% of the container is >=480px wherever 480px would have mattered, and
     below that the fixed columns overflow anyway, so the scroll still engages. */
  .sb-teams { overflow-x:auto; -webkit-overflow-scrolling:touch; align-items:flex-start; }
  .sb-team { flex:none; width:max-content; min-width:100%; }
  /* the name column is the point of the scroll — give it a real floor so it
     grows with the row instead of staying collapsed */
  .sb-cell.name { flex:1 0 150px; min-width:150px; }
  /* ...but a floor is not enough on its own: the rank+name pair must also stay
     PINNED while the rest of the row scrolls past. Without this the identity
     columns swipe away with the stats and every row becomes an anonymous strip
     of numbers -- reported 2026-09-01 ("except i cant see shit"), measured in a
     390px viewport as .sb-cell.name at x=-215, fully outside the visible box.
     The <table> pages have had this since the sticky-column work; the
     scoreboard missed it because it is a flexbox grid, so neither
     `.scroll td:first-child` nor the `:has(td.rank)` pair ever matched it.

     Backgrounds are load-bearing, not decoration: a pinned cell paints over the
     cells sliding beneath it, so a transparent one would show the numbers
     ghosting through. .sb-row's own stripes are semi-transparent overlays, so
     the pinned pair repeats them as SOLID colours composited against --bg
     (#0f1216): .045 white -> #1a1d20, .28 black -> #0b0d10. Recompute both if
     --bg ever moves, or a seam appears down the frozen edge.

     `left:var(--sb-idx)` rather than a literal 26px: this same block rewrites
     --sb-idx (34px desktop -> 26px here), and a hardcoded offset would leave
     the name overlapping the rank or floating a gap away from it. */
  .sb-row .sb-cell.idx {
    position:-webkit-sticky; position:sticky; left:0; z-index:3;
    background:#1a1d20; }
  .sb-row .sb-cell.name {
    position:-webkit-sticky; position:sticky; left:var(--sb-idx); z-index:3;
    background:#1a1d20;
    box-shadow:6px 0 6px -4px rgba(0,0,0,.55); }
  .sb-row:nth-child(even) .sb-cell.idx,
  .sb-row:nth-child(even) .sb-cell.name { background:#0b0d10; }
  /* the header's title block spans exactly those two columns; pin it as well so
     the team name and emblem stay aligned over their frozen rows instead of
     sliding off while the rows below hold still. It is opaque via the .sb-hdr
     team colour, which it must repeat for the same reason as above. */
  .sb-hdr .sb-title {
    position:-webkit-sticky; position:sticky; left:0; z-index:3; }
  .sb-hdr.ally  .sb-title { background:var(--sb-ally-hdr); }
  .sb-hdr.enemy .sb-title { background:var(--sb-enemy-hdr); }
}
/* ---- In-page anchor rail -------------------------------------------------
   Sticky table of contents for long pages. Deliberately styled like .nav
   (bare text, accent underline/bar, NO box) because it does the same KIND of
   job at a smaller scale: .nav moves between pages, .rail moves within one.
   Boxes are reserved for .seg, which picks a value.

   No scrollspy -- native fragment jumps. Sports-Reference ships the same
   pattern with zero IntersectionObserver on a 1.94MB page.

   .topbar is NOT sticky (see its rule below), so `top` only needs a small
   gutter rather than clearing a fixed header.

   CAUTION: `overflow:hidden` on an ancestor breaks sticky containment -- see
   the .scroll comment above. Do not add it to .railwrap or .railmain. */
.railwrap { display:grid; grid-template-columns:200px minmax(0,1fr); gap:26px;
            align-items:start; }
.railmain { min-width:0; }
.rail { position:-webkit-sticky; position:sticky; top:18px; align-self:start;
        max-height:calc(100vh - 36px); overflow-y:auto; }
.rail-h { margin:0 0 6px; font-size:10px; text-transform:uppercase;
          letter-spacing:.09em; color:var(--dim); font-weight:700; }
.rail a { display:block; padding:3px 8px; color:var(--ax1); font-size:13px;
          border-left:2px solid transparent; }
.rail a:hover { color:var(--acc); text-decoration:none; }
.rail a.on { color:var(--acc); font-weight:700; border-left-color:var(--acc); }
.rail a.rail-out { color:var(--dim); }
.rail hr { border:none; border-top:1px solid var(--line); margin:9px 0 7px; }
/* Railed pages need more width than the 1120px default. */
.wrap.railed { max-width:1400px; }
/* Collapse to a horizontal anchor row above the content. Same breakpoint the
   .ddgrid data-dictionary grid uses, so the two agree. */
@media (max-width:820px){
  .railwrap { grid-template-columns:minmax(0,1fr); gap:12px; }
  .rail { position:static; max-height:none; overflow:visible;
          display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline;
          border-bottom:1px solid var(--line); padding-bottom:9px; }
  .rail a { border-left:none; padding:2px 0; }
  .rail a.on { border-bottom:2px solid var(--acc); }
  .rail hr { display:none; }
  .rail-h { flex-basis:100%; margin:0; }
}

.wsb{max-width:378px;padding:8px;background:rgba(19,24,31,.85);border:1px solid rgba(179,189,193,.35);
 color:#C6C7DC;font-size:13px;border-radius:4px}
.wsb-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.wsb-type{color:#B3BDC1;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.wsb-name{color:#FAFAFA;font-weight:600;text-align:right;font-size:16px;line-height:1.2}
.wsb-row{display:flex;justify-content:space-between;gap:8px;padding:2px 0}
.wsb-row .v{color:#FAFAFA;white-space:nowrap}
.wsb-bar{height:8px;background:#3E413F;margin:1px 0 4px}
.wsb-fill{height:100%;background:#FCB11D}
.wsb-tbl{width:100%;border:1px solid #B3BDC1;border-collapse:collapse;margin:2px 0 6px;font-size:12px}
.wsb-tbl th,.wsb-tbl td{border-left:1px solid #B3BDC1;text-align:center;padding:2px 3px}
.wsb-tbl th:first-child,.wsb-tbl td:first-child{border-left:none}
.wsb-tbl th{color:#B3BDC1;font-weight:400}
.wsb-tbl td{color:#FAFAFA}
.wsb-chg{color:#FCB11D;font-size:11px;margin-left:4px}
.wsb-chg s{color:#B3BDC1}
.wsb-raw{margin-top:8px;border-top:1px solid rgba(179,189,193,.25);padding-top:6px}
.wsb-raw summary{cursor:pointer;color:#B3BDC1;font-size:12px}
.wsb-raw .wsb-row{font-size:12px}
.wsb-derived{margin-top:8px;border-top:1px solid rgba(179,189,193,.25);padding-top:6px}
.wsb-derived summary{cursor:pointer;color:#FCB11D;font-size:12px}
.wsb-derived .wsb-row{font-size:12px}
.wsb-upgrades{margin-top:6px;font-size:12px;color:#B3BDC1}
.wsb-upgrades .wsb-row span:first-child{color:#FCB11D;flex:none}
.wsb-tier{color:#FCB11D;letter-spacing:.05em;margin-left:6px}
.wsb-base{color:#B3BDC1;font-size:11px;margin-left:4px}
.wsb-base s{color:#7C8592}
.wsb-ident{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:-2px 0 6px;
 font-size:12px;color:#B3BDC1}
.wsb-ident .br{color:#FCB11D;font-weight:600;letter-spacing:.03em}
.wsb-ident .fac{color:#C6C7DC}
.wsb-ident .iid{color:#7C8592;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
 word-break:break-all}
.wsb-usage{margin-top:8px;border-top:1px solid rgba(179,189,193,.25);padding-top:6px}
.wsb-usage .lbl{color:#B3BDC1;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
 display:block;margin-bottom:2px}
.wsb-usage .wsb-row{font-size:12px}
.wsb-sub{color:#7C8592;font-size:11px}
.wsb-strong{color:#FCB11D;font-weight:600}
.wsb-warn{color:#FCB11D;font-size:11px;font-style:italic;padding:1px 0 3px}
.wsb-slash{position:relative;color:#7C8592;font-size:11px;padding:1px 7px;cursor:help;
 border:1px solid rgba(214,86,86,.55);border-radius:2px;background:rgba(214,86,86,.07);overflow:hidden}
.wsb-slash::after{content:'';position:absolute;inset:0;background:linear-gradient(to top right,
 transparent calc(50% - 1px),rgba(214,86,86,.85) 50%,transparent calc(50% + 1px))}
.wsb-slash:hover,.wsb-slash:focus{color:#C6C7DC;border-color:rgba(214,86,86,.9);outline:none}
.wsb-chips{display:flex;flex-wrap:wrap;gap:3px;margin:6px 0}
.wsb-chip-r{position:absolute;opacity:0;pointer-events:none}
.wsb-chip{font-size:10px;padding:2px 6px;border:1px solid rgba(179,189,193,.4);border-radius:2px;
 color:#B3BDC1;cursor:pointer;text-transform:uppercase;letter-spacing:.03em}
.wsb-pane{display:none}
.wsb-pane.solo{display:block}
.wsbtr0,.wsbtr1{position:absolute;opacity:0;pointer-events:none}
.wsb-star-toggle{display:flex;gap:2px;margin:-2px 0 6px}
.wsb-star-toggle label{font-size:10px;padding:2px 7px;border:1px solid rgba(179,189,193,.4);
 border-radius:2px;color:#B3BDC1;cursor:pointer;text-transform:uppercase;letter-spacing:.03em}
.wsb .wsbtr1:checked ~ .wsb-star-toggle .wsbtl1,.wsb .wsbtr0:checked ~ .wsb-star-toggle .wsbtl0
 {background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
/* Default (3-star checked): show the starred value, hide base. */
.wsbv0{display:none}
.wsbv1{display:inline}
/* Base checked: swap which span shows, everywhere a toggle pair appears --
 a plain row's .v span or a table cell, both are siblings-of-siblings of the
 radios (every row/table is a direct child of .wsb, same as the radios), so
 one selector pair reaches both shapes. */
.wsb .wsbtr0:checked ~ .wsb-row .wsbv0,.wsb .wsbtr0:checked ~ .wsb-tbl .wsbv0{display:inline}
.wsb .wsbtr0:checked ~ .wsb-row .wsbv1,.wsb .wsbtr0:checked ~ .wsb-tbl .wsbv1{display:none}
/* The kill cluster: filter buttons and the numbers they change, boxed
 together so the grouping is visible and not just implied by adjacency. */
.wsb-kill{margin:4px 0 2px;padding:6px;border:1px solid rgba(179,189,193,.22);
 border-radius:3px;background:rgba(255,255,255,.025)}
.wsb-kill .wsb-row:last-child{padding-bottom:0}
.wsb-kill-f{margin-bottom:4px}
.wsb-fr{display:flex;align-items:flex-start;gap:4px;margin-bottom:4px}
.wsb-fr:last-child{margin-bottom:2px}
.wsb-fr .lbl{font-size:10px;color:#7C8592;align-self:center;min-width:34px;
 text-transform:uppercase;letter-spacing:.03em}
.wsb-f{display:flex;flex-wrap:wrap;gap:3px}
.wsb-f button{font:inherit;font-size:10px;line-height:1;padding:3px 6px;cursor:pointer;
 background:transparent;color:#B3BDC1;border:1px solid rgba(179,189,193,.4);border-radius:2px;
 text-transform:uppercase;letter-spacing:.03em}
.wsb-f button:hover,.wsb-f button:focus{color:#FAFAFA;border-color:rgba(179,189,193,.8);outline:none}
.wsb-f button[aria-pressed=true]{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr0:checked ~ .wsb-pane.wsbp0{display:block}
.wsb .wsbr0:checked ~ .wsb-chips .wsbc0{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr1:checked ~ .wsb-pane.wsbp1{display:block}
.wsb .wsbr1:checked ~ .wsb-chips .wsbc1{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr2:checked ~ .wsb-pane.wsbp2{display:block}
.wsb .wsbr2:checked ~ .wsb-chips .wsbc2{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr3:checked ~ .wsb-pane.wsbp3{display:block}
.wsb .wsbr3:checked ~ .wsb-chips .wsbc3{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr4:checked ~ .wsb-pane.wsbp4{display:block}
.wsb .wsbr4:checked ~ .wsb-chips .wsbc4{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr5:checked ~ .wsb-pane.wsbp5{display:block}
.wsb .wsbr5:checked ~ .wsb-chips .wsbc5{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr6:checked ~ .wsb-pane.wsbp6{display:block}
.wsb .wsbr6:checked ~ .wsb-chips .wsbc6{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr7:checked ~ .wsb-pane.wsbp7{display:block}
.wsb .wsbr7:checked ~ .wsb-chips .wsbc7{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr8:checked ~ .wsb-pane.wsbp8{display:block}
.wsb .wsbr8:checked ~ .wsb-chips .wsbc8{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr9:checked ~ .wsb-pane.wsbp9{display:block}
.wsb .wsbr9:checked ~ .wsb-chips .wsbc9{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr10:checked ~ .wsb-pane.wsbp10{display:block}
.wsb .wsbr10:checked ~ .wsb-chips .wsbc10{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr11:checked ~ .wsb-pane.wsbp11{display:block}
.wsb .wsbr11:checked ~ .wsb-chips .wsbc11{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr12:checked ~ .wsb-pane.wsbp12{display:block}
.wsb .wsbr12:checked ~ .wsb-chips .wsbc12{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr13:checked ~ .wsb-pane.wsbp13{display:block}
.wsb .wsbr13:checked ~ .wsb-chips .wsbc13{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr14:checked ~ .wsb-pane.wsbp14{display:block}
.wsb .wsbr14:checked ~ .wsb-chips .wsbc14{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}
.wsb .wsbr15:checked ~ .wsb-pane.wsbp15{display:block}
.wsb .wsbr15:checked ~ .wsb-chips .wsbc15{background:#FCB11D;color:#13181F;border-color:#FCB11D;font-weight:600}

.dm-item{margin:14px 0 4px;font-size:15px}
.dm-changes{border-collapse:collapse;font-size:13px}
.dm-changes td{padding:2px 10px 2px 0;border-bottom:1px solid var(--line)}
.dm-delta.up{color:#3DB613}.dm-delta.down{color:#FF5522}.dm-delta.same{color:var(--dim)}
.dm-src,.dm-list{color:var(--dim);font-size:12.5px}