/* ============================================================================
   MMA.SOCIAL — POLL FAMILY corrections (2026-08).
   /rankings/css/poll-fixes-2026.css

   Loaded with a plain <link> AFTER includes/header.php on exactly three pages:
     rankings/skill-poll.php            (/polls/{skill}/)
     rankings/hottest-female-fighters.php
     rankings/hot-hall-of-fame.php
   It is NOT in the bundle list in includes/header.php, so it is not minified
   into cache/site-*.min.css and needs no cache clear — assetV() stamps filemtime.
   Because it is only linked from those three files, every selector in here is
   already scoped to the poll family; no wrapper class is needed.

   ⚠️ WHY A SEPARATE FILE AND WHY THE `:not(#_)` PADDING.
   css/arena-components.css owns .sp-lb-* and lands LATE in the bundle with
   !important on several declarations. rankings/css/* is bundled BEFORE it, so a
   plain rule here can never win on order. `#_` inside :not() matches nothing but
   counts as an ID, which lifts specificity above arena-components without
   duplicating its rules or editing a file this page family does not own.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. ICONS THE SHARED SET DOES NOT SHIP YET.

   The house rule is ic-* mask icons, never a text glyph: a glyph cannot take
   currentColor reliably, renders at a different optical size in every font
   fallback, and is read aloud by screen readers ("black up-pointing triangle").
   css/arena-components.css defines 23 icons; these seven are the ones the poll
   pages needed and it does not have. Same 24px grid, same 1.8 stroke, same
   `--i` contract, so [class^="ic-"] in arena-components picks them up for free.
   If the shared set ever adds one of these names, arena-components loads first
   and this file simply keeps winning — both would be the same glyph.
   ------------------------------------------------------------------------ */
.ic-refresh   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7'/%3E%3Cpath d='M20 4v4.5h-4.5'/%3E%3C/svg%3E"); }
.ic-arr-left  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.ic-arr-right { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ic-arr-down  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
.ic-up        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 6l7 12H5z'/%3E%3C/svg%3E"); }
.ic-down      { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 18L5 6h14z'/%3E%3C/svg%3E"); }
.ic-close     { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }


/* ---------------------------------------------------------------------------
   2. THE CROWN BELONGS TO RANK 1, NOT TO ROW 1.

   ⚠️ THE BUG. css/arena-components.css:522-524 keys the gold treatment off
   `.sp-lb-row:first-child`. The boards paginate 10/15 rows a page, so on
   /polls/{skill}/?page=7 the FIRST ROW ON THE PAGE — rank 61 — came out in
   --belt #E8B830, gold rank chip, gold points, gold photo ring. Measured live:
   row "61" (Renan Barao) rankColor rgb(232,184,48). Nine of ten poll pages and
   nine of ten hot pages were crowning a fighter who is not the champion, which
   is the exact thing --belt is reserved to mean.

   Both renderers (the PHP row loop and the JS spBoardRow) already stamp `.r1`
   on the true rank-1 row, keyed off the ABSOLUTE rank, so the class to hang
   this on already exists. First neutralise :first-child, then re-apply on .r1.
   Same specificity, .r1 second, so on page 1 row 1 matches both and gold wins;
   on page 7 only :first-child matches and the row stays neutral.
   ------------------------------------------------------------------------ */
.sp-lb-row:first-child:not(#_) .sp-lb-rank  { color: var(--ash, #8A8FA0) !important; border-color: var(--edge, #1D1E28) !important; }
.sp-lb-row:first-child:not(#_) .sp-lb-photo { box-shadow: 0 0 0 1px rgba(var(--rgb-blue), calc(.35 * var(--glow-k))); }
.sp-lb-row:first-child:not(#_) .sp-lb-pts   { color: var(--cyan, #4DD8E6); }

.sp-lb-row.r1:not(#_) .sp-lb-rank  { color: var(--belt, #E8B830) !important; border-color: var(--belt, #E8B830) !important; }
.sp-lb-row.r1:not(#_) .sp-lb-photo { box-shadow: 0 0 0 1px var(--belt, #E8B830); }
.sp-lb-row.r1:not(#_) .sp-lb-pts   { color: var(--belt, #E8B830); }


/* ---------------------------------------------------------------------------
   3. ONE RANK CHIP, ONE COLUMN.

   ⚠️ Measured at 1280 on /polls/best-striker: rows 1-3 (.top) rendered a
   30.00 x 30.00 chip at 13.6px starting at x=304; rows 4-10 rendered
   34.00 x 24.08 at 14.72px starting at x=302. Two chip sizes, two type sizes
   and a 2px horizontal jog inside a single column, because `.sp-lb-row.top
   .sp-lb-rank` set an explicit 30px disc + `margin:0 auto` for a
   gold/silver/bronze medal that arena-components had already flattened
   (`background:transparent!important`). The medal is gone; its geometry was
   still there.

   The chip now fills its grid track at one height and one type size for every
   row, .top or not. Filling the track (width:100%) rather than a fixed px is
   what keeps it aligned when the track narrows to 26px under 600px.
   ------------------------------------------------------------------------ */
.sp-lb-row:not(#_) .sp-lb-rank,
.sp-lb-row.top:not(#_) .sp-lb-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: var(--fs-body, 14px);
    line-height: 1;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 2px !important;
}


/* ---------------------------------------------------------------------------
   4. A ROW THAT IS NOT A LINK MUST NOT LOOK LIKE ONE.

   hot_fighters is its own roster and ~29% of it has no fighter profile to point
   at, so those rows render as <div class="sp-lb-row no-link">. The page already
   had rules to dim them — they never applied, because arena-components sets
   `background` and `border` on the bare `.sp-lb-row` with !important and a
   plain `.sp-lb-row.no-link` cannot beat that. Measured: 8 of 15 rows on
   ?page=5 were pixel-identical to the 7 real links. Restated here with the
   specificity to land.
   ------------------------------------------------------------------------ */
.sp-lb-row.no-link:not(#_) {
    cursor: default;
    background: linear-gradient(145deg, rgba(var(--rgb-lift), .028), rgba(var(--rgb-lift), .012)) !important;
    border: 1px dashed rgba(var(--rgb-lift), .10) !important;
}
.sp-lb-row.no-link:not(#_) .sp-lb-name { color: var(--text-secondary, #B9BDC9); font-weight: 600; }
.sp-lb-row.no-link:not(#_) .sp-lb-photo { box-shadow: 0 0 0 1px rgba(var(--rgb-lift), .08); }
a.sp-lb-row:not(#_) .sp-lb-name { color: var(--chalk, #E6E8EF); }


/* ---------------------------------------------------------------------------
   5. THE META LINE: WRAP BETWEEN FACTS, NEVER INSIDE ONE.

   ⚠️ At 375 the meta wraps to two lines (by design — a truncated record is
   missing data). The browser was taking the hyphen as a break opportunity, so
   12 of 14 rows on the hot board split a RECORD down the middle:
   "Light Heavyweight · 12W-" / "18L". Measured with per-character client rects.

   The fix is structural, not a width hack: each fact is its own .sp-lb-seg and
   only the " · " between segments is a break opportunity. The column keeps its
   full minmax(0,1fr) width and still wraps freely — it just can no longer wrap
   through a number.
   ------------------------------------------------------------------------ */
.sp-lb-meta .sp-lb-seg { white-space: nowrap; }
.sp-lb-meta .sp-lb-sep { color: var(--edge, #1D1E28); padding: 0 .12em; }

/* The record is a poll tally, not a fight record — see the "H2H" unit that
   follows it in the markup and the legend under each board heading. */
.sp-lb-meta .sp-lb-h2h {
    font-size: var(--fs-micro, 11px);
    letter-spacing: .1em;
    color: var(--ash, #8A8FA0);
    opacity: .85;
    margin-left: .28em;
}
.sp-lb-meta .chg      { font-weight: 700; display: inline-flex; align-items: center; gap: .16em; }
.sp-lb-meta .chg i    { font-size: 1.05em; }
.sp-lb-meta .chg.up   { color: var(--win, #7CFFB3); }
.sp-lb-meta .chg.down { color: var(--loss-ink, #E4544A); }
.sp-lb-meta .chg.new  { color: var(--cyan, #4DD8E6); }
.sp-lb-meta .chg.flat { color: var(--ash, #8A8FA0); font-weight: 600; }

/* The board legend that says what W-L counts. One line, under the heading. */
.sp-lb-legend {
    margin: 0;
    padding: .55rem 1.1rem .7rem;
    border-bottom: 1px solid var(--border, #1D1E28);
    font-size: var(--fs-micro, 11px);
    line-height: 1.45;
    letter-spacing: .04em;
    color: var(--ash, #8A8FA0);
}


/* ---------------------------------------------------------------------------
   6. BREADCRUMBS: REAL TAP TARGETS, AND A GAP BETWEEN THEM.

   Measured on all three pages at 375/768/1280/1440: every crumb was
   ~48 x 20.3px and adjacent crumbs shared an edge (Home right 54.4 ==
   Polls left 54.4), so on a phone the two targets touch and neither is 44px.
   The separator is a text "›", which contributes no spacing.

   A min-height on an INLINE box does nothing, which is why the component's own
   `display:inline` rule left them 20px tall. The nav becomes a wrapping flex row
   with a real column gap, and each crumb an inline-flex box 44px tall: the gap
   is now empty nav, not the edge of the next link, so a near-miss on "Home" hits
   nothing instead of navigating to "Polls".

   The component deliberately used inline flow because the separator used to be
   12px against 13.12px links and flex centring made it float. That cause is
   gone — the separator is a ::before that inherits its crumb's font-size — so
   centring equal boxes cannot reintroduce the drift.

   ⚠️ `display` NEEDS !important HERE and nothing else does. THREE global rules
   force it — `.rankings-breadcrumbs{display:flex!important}` in the bundle,
   `.rankings-breadcrumbs{display:block!important}` inline from the page chrome,
   and `.rankings-breadcrumbs a{display:inline!important}` beside it. Without
   matching that priority the min-height lands on an inline box and does nothing:
   measured 44px COMPUTED and 15.5px RENDERED, which is exactly the trap that
   makes this look fixed when it is not. Everything else here wins on
   specificity alone.
   ------------------------------------------------------------------------ */
nav.rankings-breadcrumbs:not(#_) {
    /* `gap` carries !important for the same reason `display` does: the inline
       chrome rule sets `gap:0!important`, and without the 6px the two 44px
       boxes go back to sharing an edge. Verified by reading columnGap back. */
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px !important;
}
nav.rankings-breadcrumbs:not(#_) a.crumb,
nav.rankings-breadcrumbs:not(#_) .crumb {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    box-sizing: border-box;
}
/* The separator's own left margin is now the flex gap's job — keeping both put
   ~12px of air on one side of the chevron and 6px on the other. */
nav.rankings-breadcrumbs:not(#_) .crumb + .crumb::before { margin-left: 0; }


/* ---------------------------------------------------------------------------
   7. IN-LIST DISPLAY SLOTS — the label was the smallest type on the page.

   Measured 10.03px (.ad-slot-label) and 9.60px (.ad-inarticle-label) against an
   11px floor (--fs-micro). The slot components are shared and owned elsewhere,
   so the floor is applied here, where the poll boards mount them.
   ------------------------------------------------------------------------ */
.ad-slot-label:not(#_),
.ad-inarticle-label:not(#_) {
    font-size: var(--fs-micro, 11px);
    line-height: 1.4;
}


/* ---------------------------------------------------------------------------
   8. SHARE-CARD CHIPS (skill-poll page).

   The chip IS the remove control, so it has to be a 44px target, and the bare
   "×" text node inside it (measured 8.4 x 15.5px) is decoration — it is
   replaced by an ic-close mask sized off the chip's own type, with the glyph
   collapsed to font-size:0 rather than removed, because js/stat-image.js writes
   that text node and this page does not own that file.
   ------------------------------------------------------------------------ */
.sp-chips:not(#_) .sp-chip {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 2px;
}
.sp-chips:not(#_) .sp-chip .sp-chip-x {
    display: inline-block;
    width: 14px;
    height: 14px;
    font-size: 0;
    line-height: 0;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ---------------------------------------------------------------------------
   9. HALL OF FAME MONTH CARDS.

   ⚠️ WHY THESE LIVE HERE AND NOT IN rankings/css/rankings-pages.css, where
   .hof-card is defined. Two reasons, both load-bearing:

   1. CASCADE. rankings-pages.css is bundled in $pageCssFiles, which is BEFORE
      css/arena-overhaul.css and the type layers. Those set `.stat-value
      {font-size:clamp(1.35rem,5.2vw,1.7rem)}` and `.stat-label{color:
      rgba(255,248,234,.64)!important}` on bare single-class selectors, and they
      won every one of these declarations from the later position. Fixing it at
      the definition site is not possible without !important warfare in a sheet
      that four page families share.
   2. BLAST RADIUS. rankings-pages.css is also loaded by /stats and /about, and
      is under active edit by other work. This file is linked by three pages and
      every selector below is .hof-card-scoped, so nothing outside the Hall of
      Fame can be touched by it.
   ------------------------------------------------------------------------ */

/* ⚠️ THE HIERARCHY WAS UPSIDE DOWN. Measured on the live cards: .card-name
   13.6px, .card-division 10.4px, .stat-value 21.6px — the champion's NAME was
   the smallest thing on a card whose entire subject is that champion, and the
   points figure was 8px larger than it. The name is the subject and takes
   --fs-sub; the three supporting figures step down to --fs-lede. */
.hof-card:not(#_) .card-name {
    font-size: var(--fs-sub, 20px) !important;
    line-height: 1.15;
    font-weight: 700;
    color: var(--chalk, #E6E8EF);
    margin-bottom: 4px;
}

/* ⚠️ THE THREE FIGURES DID NOT LINE UP CARD TO CARD.
   `display:flex; justify-content:center` centres the trio as a GROUP, so each
   column's x depends on how wide that card's own values happen to be: measured,
   "Points" started anywhere from x=87.9 to x=117.5 across the eight cards — a
   29.6px jog down a grid of otherwise identical tiles. Three equal tracks give
   every card the same three columns; tabular figures stop the values shifting
   inside a column as the digits change. The PHP now always emits all three
   stats, so the track count is constant too — a 3-track grid holding two items
   would reintroduce the misalignment it is here to remove. */
.hof-card:not(#_) .card-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    justify-content: stretch;
    gap: .5rem;
}
.hof-card:not(#_) .card-stats .stat-value {
    font-size: var(--fs-lede, 16px) !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--accent-gold, #4DD8E6) !important;
}
/* Was rgba(255,248,234,.64) — a warm off-white that is not in the palette —
   at .6rem = 10.03px, under the 11px floor. --ash is the muted-label colour. */
.hof-card:not(#_) .card-stats .stat-label {
    font-size: var(--fs-micro, 11px) !important;
    color: var(--ash, #8A8FA0) !important;
    letter-spacing: .06em;
    margin-top: 2px;
}

/* Type floor: .month-label measured 10.03px, .card-division and .view-daily
   10.4px. Nothing on this site is allowed under 11px (--fs-micro). */
.hof-card:not(#_) .month-label   { font-size: var(--fs-label, 12px) !important; letter-spacing: .08em; }
.hof-card:not(#_) .card-division { font-size: var(--fs-label, 12px) !important; margin-bottom: 10px; }
.hof-card:not(#_) .view-daily    { font-size: var(--fs-label, 12px) !important;
    display: inline-flex; align-items: center; gap: .35rem; margin-top: 10px;
    color: var(--accent-gold, #4DD8E6); }
.hof-card:not(#_) .status-text   { font-size: var(--fs-body, 14px) !important; }

/* PALETTE. The month in progress was on #22c55e (Tailwind green-500), which is
   not in the palette; --win #7CFFB3 is the one green and it means "good result".
   A month still being voted on is not a result, it is the LIVE one — that is
   interaction, and interaction is cyan. The crowned months keep --belt. */
/* border-top carries !important because a square-pass rule sets `border` on
   .hof-card wholesale; read back as rgba(255,255,255,.11) without it. */
.hof-card.voting:not(#_) {
    border-top: 2px solid var(--cyan, #4DD8E6) !important;
    background: linear-gradient(135deg, var(--glass-bg), rgba(var(--rgb-blue), .07)) !important;
}
.hof-card.voting:not(#_) .month-label,
.hof-card.voting:not(#_) .status-text { color: var(--cyan, #4DD8E6) !important; }

/* Was a violet-to-indigo gradient with `color:white` at .55rem — neither hue is
   in the palette, #fff is explicitly not the site's light ink (--chalk is), and
   8.8px is far under the floor. A promotion is a quiet qualifier. */
.hof-card:not(#_) .promo-tag {
    background: transparent !important;
    border: 1px solid var(--edge, #1D1E28);
    color: var(--ash, #8A8FA0) !important;
    font-size: var(--fs-micro, 11px) !important;
    border-radius: 2px;
    letter-spacing: .06em;
    padding: 2px 6px;
}

/* ⚠️ NO backdrop-filter on a grid of 9-21 cards. --glass-bg is effectively
   opaque here, so the blur had nothing to blur — it is one of the invisible
   backdrop-filters behind the Chrome-only repaint storm, and a grid is the
   worst case for it. An invisible effect is not a feature. */
.hof-card:not(#_) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }


/* ---------------------------------------------------------------------------
   PICK SOUNDS — the mute toggle.  (behaviour: /js/poll-sfx.js)

   The button is created by JS and dropped into the [data-poll-sfx] slot that
   both duel footers now carry. It is NOT rendered in PHP on purpose: if Web
   Audio is missing there is nothing to toggle, and an inert control is worse
   than no control. Nothing else on the site owns .sp-sfx, so these are plain
   rules — no :not(#_) padding needed.

   Two icons the shared set does not ship, same 24px grid / 1.8 stroke / --i
   contract as section 1 above, so [class^="ic-"] in arena-components picks
   them up and they inherit currentColor for free.
   ------------------------------------------------------------------------ */
.ic-sound     { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h3l4.5-3.5v13L7 15H4z'/%3E%3Cpath d='M15.5 9.2a4 4 0 0 1 0 5.6'/%3E%3Cpath d='M18.2 6.6a7.6 7.6 0 0 1 0 10.8'/%3E%3C/svg%3E"); }
.ic-sound-off { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h3l4.5-3.5v13L7 15H4z'/%3E%3Cpath d='M16 9.5l5 5'/%3E%3Cpath d='M21 9.5l-5 5'/%3E%3C/svg%3E"); }

/* 44px tall, 2px square, --fs-micro floor, ash by default. Sits beside Skip. */
.sp-sfx {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 12px; box-sizing: border-box;
    background: transparent; border: 1px solid var(--edge, #1D1E28); border-radius: 2px;
    color: var(--ash, #8A8FA0);
    font-family: var(--f-data, 'JetBrains Mono', monospace);
    font-size: var(--fs-micro, 11px); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; line-height: 1;
    cursor: pointer; white-space: nowrap;
}
.sp-sfx:hover { border-color: rgba(var(--rgb-blue), .5); color: var(--chalk, #E6E8EF); }
.sp-sfx:focus-visible { outline: 2px solid var(--cyan, #4DD8E6); outline-offset: 2px; }
/* ON reads cyan (a live control), MUTED reads ash (a resting one). */
.sp-sfx[aria-pressed="true"] { color: var(--cyan, #4DD8E6); border-color: rgba(var(--rgb-blue), .45); }
.sp-sfx[aria-pressed="true"]:hover { color: var(--cyan, #4DD8E6); }
.sp-sfx .sp-sfx-ic { font-size: 1.1em; }

/* Skip and the sound toggle are one left-hand group so "See rankings" keeps
   the right edge. Both duel footers use the same two class names. */
.sp-footer .sp-foot-l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* At 375 the three controls total ~250px inside a ~248px card on the skill
   duel, so the label is dropped there and the button becomes a 44x44 icon.
   Measured, not guessed — see the note in includes/skill-poll-widget.php. */
@media (max-width: 430px) {
    .sp-sfx { padding: 0; width: 44px; gap: 0; }
    .sp-sfx .sp-sfx-tx { position: absolute; width: 1px; height: 1px; overflow: hidden;
                         clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}


/* ---------------------------------------------------------------------------
   THE POLL'S TOTAL VOTE COUNT, UNDER THE PAGE TITLE.

   Owner 2026-08-11: "ON POLL PAGES TOTAL VOTES ON TOP OF THOSE SHOULD SHOW.
   EVEN IF SMALL GREY TEXT UNDER TITLE."

   One rule for both poll surfaces — /polls/<skill> (rankings/skill-poll.php)
   and /rankings/hottest-female-fighters — because both already load this file.
   It inherits text-align from its hero, so it centres under the skill-poll H1
   and sits left under the hot-poll H1 without a per-page override.

   ⚠️ This figure exists exactly ONCE per page. It was moved out of the
   .sp-lb-legend line, not duplicated into the header: two printings of one
   number is how a poll ends up quoting two different totals.
   --------------------------------------------------------------------------- */
.sp-total {
    margin: .35rem 0 0;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--text-muted, #8A8FA0);
    font-variant-numeric: tabular-nums;
}
/* The hot hero puts a button straight after this line, so it needs the gap the
   lede used to provide. The skill-poll header has its own margin-bottom. */
.hot-hero .sp-total { margin-bottom: .85rem; }