/* =============================================================================
   MMA.SOCIAL — THE BOARD ROW, 2026.  ONE TREATMENT, ~89 PAGES.
   /css/stats-boards-2026.css     loaded by stats/includes/board-style.php
   -----------------------------------------------------------------------------
   WHAT THIS REPLACES

   Three markup vocabularies print the same thing on this site — a ranked list of
   fighters — and had drifted into five different looks. Measured at 375px against
   the served bundle before this file existed:

     element        .ranking-row (45+5+11)   .sl-item (10)   .fr-item (18)
     row height     99.6 / 133.3 / 261.9px   167.8px         52.4px
     rank #1        19.52px  --belt          19.52px --belt  16.32px --ash  <-- bug
     rank #2..n     16.32px                  16.32px         16.32px
     name           16.32px                  15.68px         14.08px
     figure         22.4px                   24px            17.6px (gradient text)
     photo          48x66                    56x74           32x32 round
     round chip     —                        —               9.6px          <-- bug
     column head    yes                      hidden <=600px  absent

   The owner's "rankings too small in single round and multiple round" is the
   16.32px flat-ash rank on the 18 fight-records boards. Its cause was a DEAD
   SELECTOR: the bundle already shipped a unifier keyed on `.fr-rank.gold`, while
   fight-records-template.php emits the medal class on the ROW as `g1/g2/g3` and a
   bare `<span class="fr-rank">`. Nothing has ever matched. This file keys on what
   the template actually emits, and goes past the old baseline: the rank numeral is
   now the largest thing on the row.

   -----------------------------------------------------------------------------
   THREE RULES THIS FILE OBEYS (2026 design direction)

   * Colour is information. --accent-gold (which IS cyan #4DD8E6) = the metric this
     page ranks by. --belt #E8B830 = champion / rank 1, and nothing else. --chalk
     for names, --ash for meta. One cyan number per row, ever.
   * Nothing under 11px (--fs-micro). The scale steps 11-12-14-16-20-24-28 with no
     cliff — the tokens live in css/type-contrast-2026.css.
   * Square. 2px maximum radius, no per-row cards, no glow, nothing sticky.

   -----------------------------------------------------------------------------
   ⚠️ WHY EVERY RULE CARRIES THREE :not(#id) AND !important

   The bundle's own overrides top out at TWO ids-inside-:not() plus !important, e.g.
   `html body .rankings-page-narrow .rankings-list .ranking-row:not(#_):not(#__)`
   at (2,3,2)!important, and type-2026.css ships the row grid with !important below
   600px. An id inside :not() counts as an id, and id count dominates the
   comparison, so `:not(#_):not(#__):not(#___)` = 3 ids beats all of them
   regardless of source order. That matters because this sheet is injected at
   </head> while two boards still <link> a stylesheet from the BODY — load order
   alone would lose. Read the computed value back on the SERVED bundle after any
   edit here; the source looking right proves nothing.

   ⚠️ This is the leaf sheet for the board component. Nothing else should override
   it. If a rule here has to be beaten, change it here.
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
.rankings-list,
.sl-list,
.fr-list {
    /* Rank column. 40px holds "15" at 28px Oswald; the track is minmax(_,auto)
       so a /rankings/ ladder deep enough to print a four-digit rank widens it
       for the whole page instead of clipping. Every row on a page carries the
       same digit count (they are within 15 of each other), so the column stays
       straight. */
    --brd-rank: 40px;
    --brd-pic: 48px;      /* the board photo. 1:1 — see PHOTOS below. */
    --brd-gap: 10px;
    --brd-px: 12px;       /* row horizontal padding */
    --brd-min: 68px;      /* career row: 2 lines of text + air, > the 44px floor */
    --brd-min-moment: 80px;   /* single-round / single-fight: 3 lines */
    /* THE FIGURE COLUMN IS A FIXED WIDTH, NOT minmax(_,auto), AND THAT IS LOAD-
       BEARING. The column head is a sibling of the rows in the same list but a
       grid of its own, so an `auto` track sizes each of them to ITS OWN content:
       "Sig. Strikes" is 98px and "141" is 40px, and the caption ended up 34px off
       the column it names. A declared width is the only thing that makes the two
       agree without measuring anything at runtime. 78px holds the widest figure
       these boards print at 24px Oswald tabular ("533:52" = 74px). */
    --brd-fig: 78px;
    /* .sl-item hangs a second fact under the figure ("111.9/fight · 48.2% acc",
       152px at 11px) which SPANS the name and figure columns below 760px. A
       spanning item inflates an `auto` track: measured 191.7px of figure column
       against 17.3px of name. Fixed width, so the span cannot reach it. */
    --brd-fig-sl: 80px;
    --brd-line: var(--edge, #1D1E28);
}
@media (min-width: 600px) {
    .rankings-list, .sl-list, .fr-list {
        --brd-rank: 48px; --brd-gap: 14px; --brd-px: 14px; --brd-fig: 92px;
    }
}
@media (min-width: 1024px) {
    .rankings-list, .sl-list, .fr-list {
        --brd-pic: 52px; --brd-fig: 128px; --brd-fig-sl: 168px; --brd-px: 16px;
    }
}

/* ------------------------------------------------------------- THE LIST */
html body :is(.rankings-list, .sl-list, .fr-list):not(#_):not(#__):not(#___) {
    display: block !important;
    gap: 0 !important;
    margin: 0 0 1.1rem !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* The old 1px separator was an ::after on `.ranking-row + .ranking-row`, inset
   14px on both sides. It is replaced by a real border on the row so that (a) the
   inset matches the row padding at every breakpoint and (b) the every-fifth-row
   accent below has something to thicken. */
html body .rankings-list .ranking-row + .ranking-row:not(#_):not(#__):not(#___)::after {
    content: none !important;
}

/* --------------------------------------------------------------- THE ROW */
html body :is(.ranking-row, .sl-item, .fr-item):not(.sc-head):not(#_):not(#__):not(#___) {
    display: grid !important;
    align-items: center !important;
    column-gap: var(--brd-gap) !important;
    row-gap: 2px !important;
    min-height: var(--brd-min) !important;
    padding: 9px var(--brd-px) !important;
    margin: 0 !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--brd-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    color: inherit !important;
    /* No lift, no scale. A 68px row that jumps 2px under the thumb reads as the
       list slipping, and translateX on a grid row shifts the whole column. */
    transform: none !important;
    transition: background-color .12s ease, box-shadow .12s ease !important;
}

/* rank | (photo + name) | figure — .ranking-row and .fr-item nest the photo
   inside the middle cell, .sl-item hangs it off the row itself. */
html body :is(.ranking-row, .fr-item):not(.sc-head):not(#_):not(#__):not(#___) {
    grid-template-columns: minmax(var(--brd-rank), auto) minmax(0, 1fr) var(--brd-fig) !important;
}
html body .sl-item:not(.sc-head):not(#_):not(#__):not(#___) {
    grid-template-columns: minmax(var(--brd-rank), auto) var(--brd-pic) minmax(0, 1fr) var(--brd-fig-sl) !important;
    grid-template-areas: "rk pic nm fig" "rk pic sub sub" !important;
}

/* THE PODIUM INSET BAR. rows 1-3 only, drawn with an inset box-shadow rather
   than a ::before, because .ranking-row already owns ::after and three of the
   five renderers put their own pseudo-elements on the row. */
html body :is(.ranking-row.top-1, .sl-item.gold, .sl-item.sl-gold, .fr-item.g1):not(#_):not(#__):not(#___) {
    box-shadow: inset 3px 0 0 0 var(--belt, #E8B830) !important;
}
html body :is(.ranking-row.top-2, .sl-item.silver, .fr-item.g2):not(#_):not(#__):not(#___) {
    box-shadow: inset 3px 0 0 0 var(--chalk, #E6E8EF) !important;
}
html body :is(.ranking-row.top-3, .sl-item.bronze, .fr-item.g3):not(#_):not(#__):not(#___) {
    box-shadow: inset 3px 0 0 0 var(--ik-2) !important;
}

/* RHYTHM: a heavier rule under every fifth row so the eye can count in fives
   while scrolling. Element-qualified `a` on purpose — the two in-list ad slots
   are <div class="ad-slot"> / <div class="ad-inarticle">, so counting <a> of
   type skips them. On the three boards whose row is a <div> (fastest-finishes,
   the two streak boards) this simply does not match, and they keep the uniform
   1px rule rather than getting a miscounted one. */
html body .rankings-list > a.ranking-row:nth-of-type(5n):not(#_):not(#__):not(#___),
html body .sl-list > a.sl-item:nth-of-type(5n):not(#_):not(#__):not(#___),
html body .fr-list > a.fr-item:nth-of-type(5n):not(#_):not(#__):not(#___) {
    border-bottom-width: 2px !important;
    border-bottom-color: var(--sf-8) !important;
}

/* HOVER / ACTIVE / FOCUS.
   Hover is a ground change only — the row must not move, and the name must not
   turn cyan (cyan means "the ranked metric" on this site).
   The focus ring is new: this site under-served keyboard users on ~89 boards. */
html body :is(.ranking-row, .sl-item, .fr-item):not(.sc-head):hover:not(#_):not(#__):not(#___) {
    background: rgba(var(--rgb-lift), .045) !important;
    transform: none !important;
}
html body :is(.ranking-row, .sl-item, .fr-item):not(.sc-head):active:not(#_):not(#__):not(#___) {
    background: rgba(var(--rgb-lift), .07) !important;
    transform: none !important;
}
html body :is(.ranking-row, .sl-item, .fr-item, .fighter-cell):focus-visible:not(#_):not(#__):not(#___) {
    outline: 2px solid var(--accent-gold, #4DD8E6) !important;
    outline-offset: -2px !important;
    background: rgba(var(--rgb-blue), .07) !important;
}

/* ------------------------------------------------------------ THE RANK
   #1 at --fs-figure 28px in belt gold is the loudest thing on the row; 2 chalk,
   3 the light grey, 4+ ash, all at --fs-stat 24px. Same treatment in all three
   vocabularies, including the `.fr-item.g1 .fr-rank` branch the bundle's dead
   `.fr-rank.gold` unifier never reached. */
html body :is(.rank-cell, .sl-rank, .fr-rank):not(#_):not(#__):not(#___) {
    grid-area: auto !important;
    display: block !important;
    width: auto !important;
    min-width: var(--brd-rank) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 6px 0 0 !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--f-display, Oswald, "Arial Narrow", Impact, system-ui, sans-serif) !important;
    font-size: var(--fs-stat, 1.5rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -.01em !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
    text-align: center !important;
    color: var(--ash, #8A8FA0) !important;
    white-space: nowrap !important;
}
html body .sl-item .sl-rank:not(#_):not(#__):not(#___) { grid-area: rk !important; }

html body :is(.ranking-row.top-1 .rank-cell, .sl-item.gold .sl-rank, .sl-item.sl-gold .sl-rank,
              .sl-rank.gold, .fr-item.g1 .fr-rank, .fr-rank.gold):not(#_):not(#__):not(#___) {
    font-size: var(--fs-figure, 1.75rem) !important;
    color: var(--belt, #E8B830) !important;
}
html body :is(.ranking-row.top-2 .rank-cell, .sl-item.silver .sl-rank,
              .sl-rank.silver, .fr-item.g2 .fr-rank, .fr-rank.silver):not(#_):not(#__):not(#___) {
    color: var(--chalk, #E6E8EF) !important;
}
html body :is(.ranking-row.top-3 .rank-cell, .sl-item.bronze .sl-rank,
              .sl-rank.bronze, .fr-item.g3 .fr-rank, .fr-rank.bronze):not(#_):not(#__):not(#___) {
    color: var(--ik-2) !important;
}

/* ----------------------------------------------------------- THE PHOTO
   One component, two aspects, no exceptions: anything under 96px is 1:1. The
   audit profiled all 2,808 files in /uploads/fighters and found
   `cover` + `50% 0%` the ONLY fixed pair with zero head clipping at every box
   aspect tested — so that is the only object-position on a board row, replacing
   the 48x66 / 56x74 / 32x32-round spread the three renderers used.
   `cover` and not `contain`: 24% of the files render under 25% opaque when
   letterboxed, which is what an empty-looking frame actually was. */
html body :is(.ranking-row .fighter-photo-wrapper, .sl-photo, .fr-face):not(#_):not(#__):not(#___) {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: var(--brd-pic) !important;
    height: var(--brd-pic) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--edge, #1D1E28) !important;
    border-radius: 2px !important;
    /* The plinth. A subject cropped at the shoulders needs something under it or
       the frame reads as a loading failure. */
    background: radial-gradient(120% 90% at 50% 10%, var(--sf-8) 0%, var(--sf-5) 72%) !important;
    box-shadow: none !important;
}
html body .sl-item .sl-photo:not(#_):not(#__):not(#___) { grid-area: pic !important; }

html body :is(.ranking-row .fighter-photo-wrapper, .sl-photo, .fr-face) > img:not(#_):not(#__):not(#___) {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 50% 0% !important;
    border-radius: 0 !important;
    border: 0 !important;
    filter: none !important;
}

/* Missing photo: the same frame and plinth with the stroke icon at ~34% of the
   box in ash. No <img> is emitted by fighterPhoto()/fr_photo() in this case, so
   there is no broken-image state to hit. */
html body :is(.fighter-photo-wrapper, .sl-photo, .fr-face) > :is(.photo-fallback, .fr-noimg, span):not(img):not(#_):not(#__):not(#___) {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    font-size: calc(var(--brd-pic) * .34) !important;
    color: var(--ash, #8A8FA0) !important;
    opacity: 1 !important;
    background: none !important;
}
html body :is(.fighter-photo-wrapper, .sl-photo, .fr-face) > :is(.photo-fallback, .fr-noimg) > i:not(#_):not(#__):not(#___) {
    width: 1em !important; height: 1em !important;
}

/* Rank 1 wears the belt. This is the only ring on a board photo — no cyan, no
   pink, no glow (see mma-social-hot-hall-of-fame: a ring around a face that is
   not there reads as a bug, which is why the 1:1 + 50% 0% crop had to land
   first). */
html body :is(.ranking-row.top-1 .fighter-photo-wrapper, .sl-item.gold .sl-photo,
              .sl-item.sl-gold .sl-photo, .fr-item.g1 .fr-face):not(#_):not(#__):not(#___) {
    border-color: transparent !important;
    box-shadow: inset 0 0 0 2px var(--belt, #E8B830) !important;
}
/* The cyan "this fighter won" ring on the fight-records photo is gone: cyan is
   the metric colour. The result is stated in words on the row instead. */
html body .fr-face.win:not(#_):not(#__):not(#___) { border-color: var(--edge, #1D1E28) !important; }

/* --------------------------------------------------- NAME + META COLUMN */
html body :is(.ranking-row .fighter-cell, .fr-matchup):not(#_):not(#__):not(#___) {
    display: flex !important;
    align-items: center !important;
    gap: var(--brd-gap) !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
}
html body :is(.ranking-row .fighter-details, .sl-fighter-info, .fr-names):not(#_):not(#__):not(#___) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}
html body .sl-item .sl-fighter-info:not(#_):not(#__):not(#___) { grid-area: nm !important; }

/* THE NAME — one size on every row. The `.fr-item.g1 .fr-name` bump that made
   row 1 a different size from row 2 is gone; so is the two-line wrap, which was
   what made the rows 99px and 167px tall. */
html body :is(.fighter-name-text, .sl-name, .fr-name):not(#_):not(#__):not(#___) {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-family: var(--f-display, Oswald, "Arial Narrow", Impact, system-ui, sans-serif) !important;
    font-size: var(--fs-lede, 1rem) !important;
    font-weight: 600 !important;
    line-height: 1.16 !important;
    letter-spacing: .005em !important;
    color: var(--chalk, #E6E8EF) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    text-transform: none !important;
}

/* THE META LINE — division, record, opponent. 12px ash, one line. */
/* ⚠️ NOT A FLEX ROW. As a flex container with a non-shrinking record chip, the
   line overflowed its own hidden box and the tail was CUT with no ellipsis -
   measured 24-73px of silently missing text on longest-reach, most-title-fights
   and days-since-last-fight. A plain inline flow ellipsises properly, and the
   parts are ordered division · record · extra so the least important goes first. */
html body :is(.fighter-meta-text, .sl-meta, .fr-sub, .brd-meta):not(#_):not(#__):not(#___) {
    /* UP TO TWO LINES, then ellipsis. One nowrap line hid 91-105px of the meta on
       days-since-last-fight ("Lightweight · 26-4-0 · 512 days idle") and 62px on
       most-strikes ("Women's Strawweight"). A board whose meta needs two lines gets
       an 84px row instead of a 68px one - that is the content differing, not the
       component. Boards with a short meta are untouched at 68px. */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-family: var(--f-data, ui-monospace, "JetBrains Mono", Menlo, monospace) !important;
    font-size: var(--fs-label, .75rem) !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: .01em !important;
    color: var(--ash, #8A8FA0) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body :is(.fighter-meta-text, .sl-meta) > *:not(#_):not(#__):not(#___) {
    display: inline !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    font-size: inherit !important;
    color: inherit !important;
}
/* .sl-meta prints its two parts with no separator in the markup. */
html body .sl-meta > .sl-record + .sl-division:not(#_):not(#__):not(#___)::before {
    content: " \00B7\00A0" !important; color: var(--ash, #8A8FA0) !important;
}

/* ------------------------------------------------------------ THE FIGURE
   Flat cyan, tabular, right-aligned. The -webkit-text-fill-color:transparent
   gradient on .fr-val is deleted here: it was the only gradient text on the site
   and it sat on the one figure that was also too small. */
/* ⚠️ .sl-stat-display is deliberately NOT in this :is() list. :is() takes the
   specificity of its most specific argument - `.ranking-row .rating-cell` -
   so this selector scores (3,2,2), and the `display:contents` rule below,
   written as `html body .sl-stat-display:not…`, scores (3,1,2) and LOST despite
   coming later and carrying !important. The sub-figure then stayed inside the
   80px figure column and "111.9/fight · 48.2% acc" was clipped to "111.9". */
html body :is(.ranking-row .rating-cell, .fr-valwrap):not(#_):not(#__):not(#___) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 1px !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
    text-align: right !important;
}
/* .sl-stat-display holds a second fact ("111.9/fight · 48.2% acc") that is
   152px wide at 11px — it cannot share the figure column at 375px without
   crushing the name to 88px. display:contents lets the row place the figure and
   its caption in different grid areas instead of hiding the caption on phones.
   The .sr-only label between them is position:absolute, so it takes no track. */
html body .sl-stat-display:not(#_):not(#__):not(#___) { display: contents !important; }
html body .sl-stat-main:not(#_):not(#__):not(#___) {
    grid-area: fig !important; justify-self: end !important; align-self: center !important;
}
html body .sl-stat-sub:not(#_):not(#__):not(#___) {
    grid-area: sub !important; justify-self: end !important;
    min-width: 0 !important; max-width: 100% !important; overflow: hidden !important;
    margin: 0 !important;
    font-family: var(--f-data, ui-monospace, "JetBrains Mono", Menlo, monospace) !important;
    font-size: var(--fs-micro, .6875rem) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--ash, #8A8FA0) !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}
html body .sl-stat-sub b:not(#_):not(#__):not(#___) { color: var(--ik-2) !important; font-weight: 700 !important; }
html body .sl-stat-sub i:not(#_):not(#__):not(#___) { font-style: normal !important; margin: 0 .3em !important; opacity: .7 !important; }
@media (min-width: 760px) {
    /* Room to hang the caption under its own figure instead of under the name. */
    html body .sl-item:not(.sc-head):not(#_):not(#__):not(#___) {
        grid-template-areas: "rk pic nm fig" "rk pic nm sub" !important;
    }
    html body .sc-head.sl-item:not(#_):not(#__):not(#___),
    html body .sl-item:not(.sc-head):not(#_):not(#__):not(#___) {
        --brd-fig-sl: 168px;
    }
}

html body :is(.rating-score, .sl-stat-main, .sl-stat-value.primary, .fr-val):not(#_):not(#__):not(#___) {
    display: block !important;
    font-family: var(--f-display, Oswald, "Arial Narrow", Impact, system-ui, sans-serif) !important;
    font-size: var(--fs-stat, 1.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.04 !important;
    letter-spacing: -.005em !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
    /* THE ranked metric. Cyan, on every row including #1 — the belt is the rank,
       not the number, and two golds in one row would say the same thing twice. */
    color: var(--accent-gold, #4DD8E6) !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--accent-gold, #4DD8E6) !important;
    text-align: right !important;
    white-space: nowrap !important;
}
/* The bundle paints the first row's figure --belt. Rank 1 already wears the
   belt on its numeral, its inset bar and its photo; a fourth gold thing in the
   same row stops meaning "champion". */
html body :is(.ranking-row:first-child .rating-score, .sl-item.sl-gold .sl-stat-main,
              .sl-item.gold .sl-stat-main, .fr-item.g1 .fr-val):not(#_):not(#__):not(#___) {
    color: var(--accent-gold, #4DD8E6) !important;
    -webkit-text-fill-color: var(--accent-gold, #4DD8E6) !important;
}
/* The unit stays screen-reader-only: it is named once in the column head above
   the list, not fifty times down the column. js/stat-image.js still scrapes it. */
html body .rating-cell .rating-unit.sr-only:not(#_):not(#__):not(#___) {
    position: absolute !important; width: 1px !important; height: 1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
}

/* =============================================================================
   SINGLE-ROUND AND SINGLE-FIGHT BOARDS — the 18 .fr-item boards
   -----------------------------------------------------------------------------
   Same skeleton, one difference that carries meaning: the record belongs to a
   MOMENT, not a career. So the row gets a third line naming that moment, and
   the figure carries its denominator in the site's established "45 of 92" form.
   Everything else — rank sizes, name size, photo, rhythm, column head, filter
   bar — is inherited from above unchanged. That is the point.
   ========================================================================== */
html body .fr-item:not(.sc-head):not(#_):not(#__):not(#___) {
    min-height: var(--brd-min-moment) !important;
    /* The strip gets a line of its own spanning the name AND figure columns.
       Nested inside the name cell it had 137px at 375px, and the round chip plus
       the date consumed it: the event name rendered as "U…". */
    grid-template-areas: "rk nm fig" "rk ctx ctx" !important;
    align-content: center !important;
}
html body .fr-item .fr-rank:not(#_):not(#__):not(#___)    { grid-area: rk !important; align-self: center !important; }
html body .fr-item .fr-matchup:not(#_):not(#__):not(#___) { grid-area: nm !important; }
html body .fr-item .fr-valwrap:not(#_):not(#__):not(#___) { grid-area: fig !important; }
html body .fr-item .frx-ctx:not(#_):not(#__):not(#___)    {
    grid-area: ctx !important;
    /* Indented under the name, not under the face, so the three text lines form
       one left edge. */
    padding-left: calc(var(--brd-pic) + var(--brd-gap)) !important;
}
/* Row 1 was a centred marquee with a 76px photo and a 3rem figure, then two
   later blocks beat it back down with !important. Both are superseded: g1 is a
   normal row that happens to be first. */
html body .fr-item.g1:not(#_):not(#__):not(#___) {
    text-align: left !important;
    padding: 9px var(--brd-px) !important;
}
html body .fr-item.g1 .fr-matchup:not(#_):not(#__):not(#___) { justify-content: flex-start !important; }
html body .fr-item.g1 .fr-name:not(#_):not(#__):not(#___) { font-size: var(--fs-lede, 1rem) !important; }
html body .fr-item.g1 .fr-valwrap:not(#_):not(#__):not(#___) { text-align: right !important; }

/* DESKTOP: the moment gets its own column.
   At 768px+ the name column is 524-614px wide and a fight-records row was
   spending two of its three lines stacked inside it while the rest of the row sat
   empty. Split into four: RANK | FIGHTER (name over opponent) | BOUT (round,
   result, event, date) | FIGURE. Same information, one line shorter, ~20px less
   per row, and it reads as a table rather than as a stack. */
@media (min-width: 768px) {
    html body .fr-item:not(.sc-head):not(#_):not(#__):not(#___) {
        grid-template-columns: minmax(var(--brd-rank), auto) minmax(120px, .8fr) minmax(0, 1.6fr) var(--brd-fig) !important;
        grid-template-areas: "rk nm ctx fig" !important;
        min-height: var(--brd-min) !important;
    }
    html body .fr-item .frx-ctx:not(#_):not(#__):not(#___) {
        padding-left: 0 !important;
        align-self: center !important;
    }
}
@media (max-width: 767px) {
    /* The BOUT caption has no column of its own down here - the strip spans. */
    html body .sc-h-ctx:not(#_):not(#__):not(#___) { display: none !important; }
}

/* THE NAME AND THE OPPONENT.
   Both live INSIDE .fr-name because js/stat-image.js builds the saved card's row
   label from .fr-name.textContent — splitting them into siblings would have
   silently dropped the opponent from every exported record card. They are two
   elements purely so the CSS can size them apart. */
html body .fr-name .frn-main:not(#_):not(#__):not(#___) {
    display: block !important;
    font-size: var(--fs-lede, 1rem) !important;
    font-weight: 600 !important;
    color: var(--chalk, #E6E8EF) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body .fr-name .sub:not(#_):not(#__):not(#___) {
    display: block !important;
    margin-top: 1px !important;
    font-family: var(--f-data, ui-monospace, "JetBrains Mono", Menlo, monospace) !important;
    font-size: var(--fs-label, .75rem) !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: var(--ash, #8A8FA0) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Combined view: the pair is one text node and cannot be split, so give it two
   lines rather than ellipsising the second fighter away at 375px. */
html body .fr-combined .fr-name:not(#_):not(#__):not(#___) {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    overflow: hidden !important;
    line-height: 1.14 !important;
}

/* THE CONTEXT STRIP — "R2 · UFC 229 · 6 Oct 2018". 11px, the readable floor,
   never below it. */
html body .frx-ctx:not(#_):not(#__):not(#___) {
    display: flex !important;
    align-items: center !important;
    gap: .42em !important;
    max-width: 100% !important;
    margin: 1px 0 0 !important;
    font-family: var(--f-data, ui-monospace, "JetBrains Mono", Menlo, monospace) !important;
    font-size: var(--fs-micro, .6875rem) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--ash, #8A8FA0) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
/* The event name is the only elastic part; the round and the date never
   truncate, because they are what make the row a moment. */
html body .frx-ev:not(#_):not(#__):not(#___) {
    min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
html body .frx-date:not(#_):not(#__):not(#___) { flex: 0 0 auto !important; }
/* Short event below 768 (the strip shares one line with the round, the result and
   the date); full event from 768, where BOUT is a column of its own. */
html body .frx-ev-f:not(#_):not(#__):not(#___) { display: none !important; }
@media (min-width: 768px) {
    html body .frx-ev-s:not(#_):not(#__):not(#___) { display: none !important; }
    html body .frx-ev-f:not(#_):not(#__):not(#___) { display: inline !important; }
}
html body .frx-dot:not(#_):not(#__):not(#___) { flex: 0 0 auto !important; opacity: .55 !important; }

/* THE ROUND TOKEN is a chip, not shrunken text. It measured 9.6px — below the
   readable floor, on 18 boards, and the owner named it. */
html body :is(.fr-round, .frx-round):not(#_):not(#__):not(#___) {
    flex: 0 0 auto !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    background: var(--edge, #1D1E28) !important;
    border: 0 !important;
    border-radius: 2px !important;
    font-family: var(--f-data, ui-monospace, "JetBrains Mono", Menlo, monospace) !important;
    font-size: var(--fs-micro, .6875rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: var(--chalk, #E6E8EF) !important;
    white-space: nowrap !important;
}
/* Did the record holder win that fight? A word, not a cyan ring. */
html body .frx-res:not(#_):not(#__):not(#___) {
    flex: 0 0 auto !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
}
html body .frx-res.w:not(#_):not(#__):not(#___) { color: var(--win, #7CFFB3) !important; }
html body .frx-res.l:not(#_):not(#__):not(#___) { color: var(--loss-ink, #E4544A) !important; }

/* THE DENOMINATOR — "141" cyan over "of 214" ash. A career board shows a bare
   total; a moment board shows the rate. That single difference tells you which
   kind of board you are on without reading the title. */
html body .frx-den:not(#_):not(#__):not(#___) {
    display: block !important;
    margin: 0 !important;
    font-family: var(--f-data, ui-monospace, "JetBrains Mono", Menlo, monospace) !important;
    font-size: var(--fs-micro, .6875rem) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--ash, #8A8FA0) !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    text-align: right !important;
}

/* The old per-row chips and the 5px value bar. Neither survives: the chips
   restated the context strip and the bar only ever encoded "this number against
   the biggest number on the page", which the ranking already says. */
html body :is(.fr-chips, .fr-bar, .fr-vs):not(#_):not(#__):not(#___) { display: none !important; }

/* ---------------------------------------- FIGHT-RECORDS PAGE CHROME
   Ported from stats/css/fight-records.css, which these 18 boards used to <link>
   from the BODY — after the bundle, so it beat every attempt to unify them from
   a stylesheet. The template no longer loads it. Everything here is either the
   old rule made square, or the shared /stats/ chrome the other 71 boards use. */
html body .fr-count:not(#_):not(#__):not(#___) {
    margin: 0 0 .2rem !important;
    text-align: left !important;
    font-family: var(--f-data, ui-monospace, "JetBrains Mono", Menlo, monospace) !important;
    font-size: var(--fs-label, .75rem) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: var(--ash, #8A8FA0) !important;
}
html body .fr-scope-unit:not(#_):not(#__):not(#___) { color: var(--chalk, #E6E8EF) !important; font-weight: 700 !important; }

/* The scope line under the H1 — every board says exactly what it measures, and
   any board built on a metric we invented says so in the same place. */
html body .brd-scope:not(#_):not(#__):not(#___) {
    margin: -6px 0 14px !important;
    max-width: 72ch !important;
    font-size: var(--fs-body, .875rem) !important;
    line-height: 1.45 !important;
    color: var(--ash, #8A8FA0) !important;
}

html body .fr-related:not(#_):not(#__):not(#___) { margin-top: 1.6rem !important; }
html body .fr-related h3:not(#_):not(#__):not(#___) {
    margin: 0 0 .6rem !important;
    font-size: var(--fs-lede, 1rem) !important;
    letter-spacing: .02em !important;
    color: var(--chalk, #E6E8EF) !important;
}
html body .fr-related-links:not(#_):not(#__):not(#___) {
    display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
}
html body .fr-related-links a:not(#_):not(#__):not(#___) {
    display: inline-flex !important; align-items: center !important; gap: .4em !important;
    min-height: 44px !important;                 /* house tap-target floor */
    padding: .5rem .85rem !important;
    background: rgba(var(--rgb-lift), .04) !important;
    border: 1px solid var(--edge, #1D1E28) !important;
    border-radius: 2px !important;
    font-size: var(--fs-body, .875rem) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: var(--chalk, #E6E8EF) !important;
}
html body .fr-related-links a:hover:not(#_):not(#__):not(#___) {
    background: rgba(var(--rgb-blue), .1) !important;
    border-color: rgba(var(--rgb-blue), .45) !important;
    color: var(--accent-gold, #4DD8E6) !important;
}
html body .fr-related-links a:focus-visible:not(#_):not(#__):not(#___) {
    outline: 2px solid var(--accent-gold, #4DD8E6) !important; outline-offset: 2px !important;
}
html body .fr-empty:not(#_):not(#__):not(#___) {
    padding: 2.5rem 1rem !important; text-align: center !important;
    color: var(--ash, #8A8FA0) !important;
}
/* The stray strip-of-tabs / select chrome these boards used before the shared
   scope filter landed. Retired, and kept switched off so a stale wrapper cannot
   resurrect a second filter UI beside the real one. */
html body :is(.fr-tabs, .fr-controls, .fr-crumb, .fr-hero-badge):not(#_):not(#__):not(#___) { display: none !important; }

/* =============================================================================
   THE COLUMN HEAD — mandatory on every board, static, never sticky.
   Tracks are declared here for both the head and the row, so the two line up by
   construction. stat-col-head.php used to measure the first row at runtime and
   copy its computed widths; that is gone, and with it a resize listener, a
   document.fonts.ready callback and a transform-nudge pass on every board.
   ========================================================================== */
html body .sc-head:not(#_):not(#__):not(#___) {
    display: grid !important;
    align-items: end !important;
    column-gap: var(--brd-gap) !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 1rem 0 0 !important;
    padding: 0 var(--brd-px) .5rem !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--brd-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    cursor: default !important;
    pointer-events: none !important;
    position: static !important;
}
html body .sc-head.ranking-row:not(#_):not(#__):not(#___),
html body .sc-head.fr-item:not(#_):not(#__):not(#___) {
    grid-template-columns: minmax(var(--brd-rank), auto) minmax(0, 1fr) var(--brd-fig) !important;
    grid-template-areas: none !important;
}
/* The sl head carries a fourth, empty span standing over the photo column, so
   the FIGHTER caption starts above the names and not above the faces. */
html body .sc-head.sl-item:not(#_):not(#__):not(#___) {
    display: grid !important;
    grid-template-columns: minmax(var(--brd-rank), auto) var(--brd-pic) minmax(0, 1fr) var(--brd-fig-sl) !important;
    grid-template-areas: none !important;
    flex-wrap: nowrap !important;
}
html body :is(.sc-h-rank, .sc-h-name, .sc-h-stat, .sc-h-pic, .sc-h-ctx):not(#_):not(#__):not(#___) {
    font-family: var(--f-data, ui-monospace, "JetBrains Mono", Menlo, monospace) !important;
    font-size: var(--fs-label, .75rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--ash, #8A8FA0) !important;
    white-space: nowrap !important;
    transform: none !important;
    width: auto !important;
}
html body .sc-h-rank:not(#_):not(#__):not(#___) { text-align: center !important; padding-right: 6px !important; }
html body .sc-h-stat:not(#_):not(#__):not(#___) {
    /* Cyan, because it names the column that is cyan. */
    color: var(--accent-gold, #4DD8E6) !important;
    text-align: right !important;
    letter-spacing: .08em !important;
    /* Wraps inside its own fixed column instead of being clipped: "Sig. Str /
       Fight" is 100px at 12px and the column is 78px at 375. The head is
       bottom-aligned, so a two-line caption grows upward onto the same rule. */
    white-space: normal !important;
    overflow-wrap: break-word !important;
}
html body .sc-h-scope:not(#_):not(#__):not(#___) { display: none !important; }

/* ⚠️ ORDER, NOT SPECIFICITY. This repeats the desktop fight-records tracks from
   the section above because the generic `.sc-head.ranking-row, .sc-head.fr-item`
   3-column rule sits between them at the same specificity, and a media query adds
   none - the head fell back to three columns while the row had four, and
   "SIG. STRIKES" wrapped under the "#". Keep this block last in the file's head
   section. */
@media (min-width: 768px) {
    html body .sc-head.fr-item:not(#_):not(#__):not(#___) {
        grid-template-columns: minmax(var(--brd-rank), auto) minmax(120px, .8fr) minmax(0, 1.6fr) var(--brd-fig) !important;
    }
}

/* =============================================================================
   BOARDS THAT CARRY MORE THAN A NAME IN THE MIDDLE COLUMN
   -----------------------------------------------------------------------------
   /stats/biggest-upsets prints a two-fighter matchup plus event, date, method
   and both ELO figures in .fighter-details. Clamping that to one ellipsised
   line would DELETE data, so those rows opt out of the single-line name and
   grow instead. They keep the rank, photo, figure and rhythm — which is the
   part that was inconsistent. Row height is a consequence of content, not a
   divergence.
   ========================================================================== */
html body .ranking-row:has(.upset-matchup) :is(.fighter-name-text):not(#_):not(#__):not(#___) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: var(--fs-body, .875rem) !important;
    line-height: 1.2 !important;
}
html body .ranking-row:has(.upset-matchup) :is(.fighter-meta-text):not(#_):not(#__):not(#___) {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
html body .ranking-row:has(.upset-matchup) .fighter-meta-text > *:not(#_):not(#__):not(#___) {
    overflow: visible !important; text-overflow: clip !important; white-space: normal !important;
}
/* "def" between the two faces was 9.28px — under the floor. */
html body .upset-matchup:not(#_):not(#__):not(#___) {
    display: flex !important; align-items: center !important; gap: 6px !important; flex: 0 0 auto !important;
}
html body .upset-matchup > *:not(img):not(#_):not(#__):not(#___) {
    font-size: var(--fs-micro, .6875rem) !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: var(--ash, #8A8FA0) !important;
}
html body .upset-matchup img:not(#_):not(#__):not(#___) {
    width: 40px !important; height: 40px !important;
    object-fit: cover !important; object-position: 50% 0% !important;
    border-radius: 2px !important; border: 1px solid var(--edge, #1D1E28) !important;
}

/* One face at phone widths. Two 40px photos plus a "DEF" token is 106px of a
   195px column, which left 89px for a name, an event, a date, a method and two
   ELO figures - the rows measured 161-300px tall and read as a paragraph. Both
   fighters are still named in the row's own text, and the pair comes back at
   768px where there is room for it. */
@media (max-width: 767px) {
    html body .upset-matchup > *:not(:first-child):not(#_):not(#__):not(#___) { display: none !important; }
    html body .upset-matchup img:first-child:not(#_):not(#__):not(#___) {
        width: var(--brd-pic) !important; height: var(--brd-pic) !important;
    }
}
/* Two lines of name, two of context, one of ELO - a bounded row instead of an
   unbounded one, with nothing deleted. */
html body .ranking-row:has(.upset-matchup) .fighter-name-text:not(#_):not(#__):not(#___) {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    font-size: var(--fs-lede, 1rem) !important;
}
html body .ranking-row:has(.upset-matchup) .fighter-meta-text:not(#_):not(#__):not(#___) {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.35 !important;
}
html body .ranking-row:has(.upset-matchup) .fighter-meta-text + .fighter-meta-text:not(#_):not(#__):not(#___) {
    -webkit-line-clamp: 1 !important;
}

/* A NAME THAT IS REALLY TWO NAMES GETS TWO LINES.
   /stats/fastest-finishes prints "Winner def. Loser" in .fighter-name-text and
   most-followed-instagram appends a verified tick. Clamped to one ellipsised line
   the loser disappeared - measured 162px of the name cut on fastest-finishes. Two
   lines, still bounded. */
html body .ranking-row .fighter-name-text:has(.ff-sub):not(#_):not(#__):not(#___),
html body .ranking-row .fighter-name-text:has(.mfi-verified):not(#_):not(#__):not(#___) {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    line-height: 1.18 !important;
}

/* NOTHING ON A BOARD ROW BELOW 11px. These per-board tokens were shipped between
   9.3px and 10.7px - "17 SUB", "Never finished", "win streak", "KO/TKO",
   "Retired", "followers" - all of them inside a row that a fan is meant to read.
   The floor is --fs-micro, and it applies to every board this sheet owns. */
html body :is(.rankings-list, .sl-list, .fr-list) :is(
    .mf-word, .mf-chip, .nbf-word, .nbf-badge, .cbk-word, .lwe-word, .lwe-status,
    .mfi-status, .mfi-foll-word, .ff-type, .fmt-extra, .champ-tag,
    .rk-p-chip, .rk-p-meta):not(#_):not(#__):not(#___) {
    font-size: var(--fs-micro, .6875rem) !important;
    line-height: 1.3 !important;
}
html body :is(.ff-tab, .lwe-status, .nbf-badge, .mf-chip, .mfi-status, .ff-type, .champ-tag):not(#_):not(#__):not(#___) {
    border-radius: 2px !important;
}
html body .ff-tab:not(#_):not(#__):not(#___) {
    font-size: var(--fs-label, .75rem) !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* =============================================================================
   THE FIVE BOARDS THAT NAMED THEIR FIGURE SOMETHING ELSE
   -----------------------------------------------------------------------------
   fastest-finishes, most-finishes, never-been-finished, comeback-kings, the two
   streak boards and most-followed-instagram each hand-roll the third column with
   their own class names and their own inline <style> - .ff-time, .mf-num,
   .nbf-num, .cbk-num, .lwe-num, .mfi-foll-num - so none of them was reached by
   the shared figure rule. Measured before this block: 1.15rem (18.4px) at 375px
   against 24px everywhere else, two of them in a green (#4ade80) that is in no
   palette, and their captions at 9.9px. Same treatment as every other figure now.
   ========================================================================== */
html body :is(.ff-right, .mf-right, .cbk-right, .nbf-right, .lwe-right, .mfi-foll-cell):not(#_):not(#__):not(#___) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 1px !important;
    /* Their own min-widths were 96-150px against a 78px figure column. */
    min-width: 0 !important;
    width: auto !important;
    text-align: right !important;
}
html body :is(.ff-time, .mf-num, .cbk-num, .nbf-num, .lwe-num, .mfi-foll-num):not(#_):not(#__):not(#___) {
    display: block !important;
    font-family: var(--f-display, Oswald, "Arial Narrow", Impact, system-ui, sans-serif) !important;
    font-size: var(--fs-stat, 1.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.04 !important;
    letter-spacing: -.005em !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--accent-gold, #4DD8E6) !important;
    -webkit-text-fill-color: var(--accent-gold, #4DD8E6) !important;
    background: none !important;
    white-space: nowrap !important;
}
html body :is(.mf-word, .mf-of, .cbk-word, .cbk-of, .nbf-word, .nbf-of,
              .lwe-word, .mfi-foll-word):not(#_):not(#__):not(#___) {
    margin: 0 !important;
    font-family: var(--f-data, ui-monospace, "JetBrains Mono", Menlo, monospace) !important;
    font-size: var(--fs-micro, .6875rem) !important;
    font-weight: 500 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: var(--ash, #8A8FA0) !important;
    white-space: nowrap !important;
}
/* Status tokens read as chips, in the same square 2px shape as the round chip. */
html body :is(.lwe-status, .nbf-badge, .mfi-status, .ff-type, .mf-chip, .champ-tag):not(#_):not(#__):not(#___) {
    display: inline-block !important;
    margin: 1px 0 0 !important;
    padding: 2px 6px !important;
    border-radius: 2px !important;
    border: 0 !important;
    background: var(--edge, #1D1E28) !important;
    color: var(--chalk, #E6E8EF) !important;
    font-family: var(--f-data, ui-monospace, "JetBrains Mono", Menlo, monospace) !important;
    font-size: var(--fs-micro, .6875rem) !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}
/* Meaningful states keep their meaning, in palette colours only. #C8392B fails as
   text at 4.5:1, so a loss/broken state uses --loss-ink. */
html body :is(.lwe-status.lwe-standing, .nbf-badge):not(#_):not(#__):not(#___) { color: var(--win, #7CFFB3) !important; }
html body .lwe-status.lwe-broken:not(#_):not(#__):not(#___)                    { color: var(--loss-ink, #E4544A) !important; }
html body .champ-tag:not(#_):not(#__):not(#___)                                { color: var(--belt, #E8B830) !important; }

/* The value bar under every Instagram row. Bars were removed from every other
   board in 2026 (owner: they only encode "this number against the biggest number
   on the page", which the ranking already states); this one was named differently
   and survived the sweep. */
html body .mfi-bar:not(#_):not(#__):not(#___) { display: none !important; }

/* "Jorge Masvidal def." / "Ben Askren" broke mid-clause because .ff-sub is
   inline. On its own line it reads "Jorge Masvidal" / "def. Ben Askren". */
html body .ff-sub:not(#_):not(#__):not(#___) { display: block !important; }

/* fastest-finishes hides the division on its meta line and wraps the name; the
   shared row now handles both, so its "def. <loser>" tail just needs to read as
   secondary rather than as part of the name. */
html body :is(.ff-sub, .fr-name .sub):not(#_):not(#__):not(#___) {
    font-weight: 500 !important;
    color: var(--ash, #8A8FA0) !important;
}
/* most-followed-instagram's verified tick and status pill. */
html body .mfi-verified:not(#_):not(#__):not(#___) {
    display: inline-block !important; width: .8em !important; height: .8em !important;
    margin-left: .3em !important; vertical-align: baseline !important;
    color: var(--accent-gold, #4DD8E6) !important;
}
html body .mfi-verified svg:not(#_):not(#__):not(#___) { width: 100% !important; height: 100% !important; display: block !important; }

/* =============================================================================
   DESKTOP — the width is used, not left as gutter.
   At >=1024 the rows get taller type room and a wider figure column, and the
   list stays inside .rk-main beside the related rail so the page is two real
   columns rather than one narrow one in a sea of empty space.
   ========================================================================== */
@media (min-width: 1024px) {
    html body :is(.ranking-row, .sl-item, .fr-item):not(.sc-head):not(#_):not(#__):not(#___) {
        padding-block: 10px !important;
    }
    html body :is(.fighter-name-text, .sl-name, .fr-name):not(#_):not(#__):not(#___) {
        font-size: 1.0625rem !important;      /* 17px — one notch, still on scale */
    }
    html body :is(.fighter-meta-text, .sl-meta):not(#_):not(#__):not(#___) {
        font-size: var(--fs-body, .875rem) !important;
    }
    html body :is(.frx-ctx, .frx-den, .sl-stat-sub):not(#_):not(#__):not(#___) {
        font-size: var(--fs-label, .75rem) !important;
    }
    /* USE THE WIDTH. At 1280 the name column is 614px and a career row was
       spending it on "Derrick Lewis" over "HW · 20-12" with ~450px of nothing to
       the right. The meta moves onto the name's baseline and right-aligns against
       the figure, so the row reads as a real four-column table:
       RANK | PHOTO | NAME .......... DIVISION · RECORD | FIGURE.
       Career rows only - a fight-records row already uses its second and third
       lines for the opponent and the moment, and biggest-upsets carries a whole
       result in there. */
    html body :is(.ranking-row:not(:has(.upset-matchup)) .fighter-details,
                  .sl-fighter-info):not(#_):not(#__):not(#___) {
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        gap: 1rem !important;
    }
    html body :is(.ranking-row:not(:has(.upset-matchup)) .fighter-meta-text,
                  .sl-meta):not(#_):not(#__):not(#___) {
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
    }
    html body :is(.fr-round, .frx-round):not(#_):not(#__):not(#___) {
        font-size: var(--fs-label, .75rem) !important;
    }
}

/* The fight-records page becomes the same page shape as the other 71 boards:
   .rankings-page-narrow.rk-with-aside gives it the 1220px canvas and the
   300px related rail it never had, instead of 900px centred with ~380px of
   dead gutter on each side at 1280. */
html body .fr-page.rk-with-aside:not(#_):not(#__):not(#___) {
    max-width: 1220px !important;
    margin-inline: auto !important;
}
@media (max-width: 1023px) {
    html body .fr-page .rk-aside:not(#_):not(#__):not(#___) { margin-top: 1.4rem !important; }
}

/* ------------------------------------------------------------- MOTION */
@media (prefers-reduced-motion: reduce) {
    html body :is(.ranking-row, .sl-item, .fr-item):not(#_):not(#__):not(#___) {
        transition: none !important;
    }
}

/* =============================================================================
   THE /rankings/ LADDERS — the last family that had not converged
   -----------------------------------------------------------------------------
   MEASURED BEFORE THIS BLOCK, at 375px / 1280px (computed, on the served page):

     /rankings/p4p            97-109 / 107 px per row
     /rankings/elo            97-109 / 107
     /rankings/records       109 / 107
     /rankings/division      109 / 123
     /rankings/undefeated     81-109 /  77-107   <- jagged
     /rankings/rising-stars   81-109 /  77-107   <- jagged
     /rankings/fan-ratings   119 / 125
     /rankings/goat          127 / 142           <- the tallest row on the site

   against 68 / 73 for the 45 shared-template boards and 84-88 / 73 for the 18
   fight-records boards. A GOAT row was 1.95x the height of a most-wins row
   carrying the same four facts, so a phone showed six ranked fighters where a
   stats board showed eleven — and these eight ladders are the boards a fan
   opens FIRST.

   FOUR CAUSES, all layout, none of them data:

   1. `.rating-votes` (the unit under the figure: "Current ELO", "Peak: 1,772",
      "Most KO/TKO Wins") was set in uppercase with letter-spacing, which pushed
      an 11-character label past the 78px figure column. It wrapped on some rows
      and not others — that alone is the 97-vs-109 jaggedness — and where the
      cell was allowed to size to max-content instead of to its track it grew to
      134px and ATE 56px OF THE NAME COLUMN ("Justin Gaethje …" on
      /rankings/division, measured).
   2. `.extra-cell` (the chip strip: W16 / 3 KOs / 8 Subs) sits at
      `grid-column: 2 / -1`, so every ladder spent a WHOLE EXTRA GRID ROW on it
      at every width — including 1280px, where columns 3 and 4 are empty air.
      /rankings/goat carries two strips and therefore three grid rows.
   3. An EMPTY `.extra-cell` (a fighter with no recorded finishes) still claimed
      its 28px row: the 81-vs-109 jaggedness on undefeated and rising-stars.
   4. /rankings/division pins the champion and the #1 contender as
      `.champion-row` / `.contender-row`, which are not `.top-1` / `.top-2`, so
      those two rows missed the podium treatment every other board's top three
      gets — and the contender's numeral was painted CYAN, the colour this
      design reserves for the ranked figure. Two cyan numbers in one row.

   WHAT CHANGES. No markup, no data, nothing hidden at desktop.
   ========================================================================== */

/* ---- 1. THE UNIT UNDER THE FIGURE ------------------------------------
   11px ash, sentence case. Dropping the uppercase + .04em tracking is what
   makes it fit: "Current ELO" measures ~62px in sentence case against ~80px
   uppercase, so the common labels now sit on ONE line inside the 78px column
   and the rows stop disagreeing about their own height. A genuinely long label
   ("Undisputed Champion", "Most KO/TKO Wins") still gets a second line rather
   than being truncated — losing a word of a label is worse than 13px. */
html body .ranking-row .rating-votes:not(#_):not(#__):not(#___) {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-align: right !important;
    font-family: inherit !important;
    font-size: var(--fs-micro, .6875rem) !important;
    font-weight: 600 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ash, #8A8FA0) !important;
    max-width: 100% !important;
}
/* THE SECOND FLAME. /rankings/p4p and /rankings/elo print the "at peak form"
   mask icon TWICE in the same row - once after the fighter's name (where it has
   a title attribute and is the one a reader will hover) and once inside this
   unit label. The duplicate is the reason rows 1 and 3 measured 94px against
   89px for rows 2 and 4: "Current ELO" plus an icon does not fit one line in
   the 78px column, so those rows alone wrapped. One signal, one place. */
html body .ranking-row .rating-votes i:not(#_):not(#__):not(#___) { display: none !important; }
/* THE FIGURE CELL MAY NOT LEAVE ITS TRACK. Measured at 375px on
   /rankings/division: 134.2px of content in a 78px column, overflowing LEFT
   across the gap and over the fighter's name. A grid item only stretches to
   its track while `justify-self` is stretch; something upstream had set it to
   an alignment, at which point `width:auto` means max-content. */
html body .ranking-row .rating-cell:not(#_):not(#__):not(#___) {
    justify-self: stretch !important;
    min-width: 0 !important;
    max-width: var(--brd-fig) !important;
}
@media (min-width: 1024px) {
    html body .ranking-row .rating-votes:not(#_):not(#__):not(#___) {
        font-size: var(--fs-label, .75rem) !important;
    }
}

/* ---- 2. THE CHIP STRIP ------------------------------------------------
   One line, never two. An empty strip collapses so a fighter with no recorded
   finishes does not leave a 28px hole in the middle of the ladder. */
html body .ranking-row .extra-cell:not(#_):not(#__):not(#___) {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: 2 / -1 !important;
}
/* `:empty` misses a strip holding only whitespace, which is what the PHP
   actually emits; "has no element child" is the honest test. */
html body .ranking-row .extra-cell:not(:has(*)):not(#_):not(#__):not(#___) {
    display: none !important;
}
html body .ranking-row .extra-cell > :is(.extra-stat, .streak-badge, .elo-stat):not(#_):not(#__):not(#___) {
    display: inline-flex !important;
    align-items: center !important;
    gap: .3em !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    border-radius: 2px !important;
    border: 1px solid var(--edge, #1D1E28) !important;
    background: rgba(var(--rgb-lift), .04) !important;
    font-family: var(--f-data, ui-monospace, "JetBrains Mono", Menlo, monospace) !important;
    font-size: var(--fs-micro, .6875rem) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--ash, #8A8FA0) !important;
    text-transform: none !important;
}
html body .ranking-row .extra-cell :is(.elo-stat, .extra-stat, .streak-badge) :is(b, strong):not(#_):not(#__):not(#___) {
    color: var(--ik-2) !important;
    font-weight: 700 !important;
}
html body .ranking-row .extra-cell .es-label:not(#_):not(#__):not(#___) {
    font-size: var(--fs-micro, .6875rem) !important;
    color: var(--ash, #8A8FA0) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
}
/* A streak is a result, so it takes the site's result colours — the same pair
   the fight-records context strip uses. Text only; the chip stays neutral. */
html body .ranking-row .streak-badge.win:not(#_):not(#__):not(#___) { color: var(--win, #7CFFB3) !important; }
html body .ranking-row .streak-badge:is(.loss, .lose, .losing):not(#_):not(#__):not(#___) {
    color: var(--loss-ink, #E4544A) !important;
}
@media (min-width: 1024px) {
    html body .ranking-row .extra-cell > :is(.extra-stat, .streak-badge, .elo-stat):not(#_):not(#__):not(#___) {
        font-size: var(--fs-label, .75rem) !important;
        padding: 3px 8px !important;
    }
}

/* ---- 3. THE INLINE RATE CONTROLS -------------------------------------
   Two of them exist: `.fr-rate-inline` in the figure cell on
   /rankings/fan-ratings, and `.rate-btn-sm` inside the chip strip on
   /rankings/division. Both were drawn as small quiet tokens on a board where
   the whole row is itself a link, so nothing said "this part is a different
   target", and `.rate-btn-sm` measured 57x28 — under the 44px floor.

   `.rate-btn-sm` keeps its 28px visual height and gains a 44px HIT AREA via a
   negative block margin: the strip stays 28px tall (so the row does not grow
   16px on 26 division pages) while the button's border box is 44px. The strip
   deliberately does not clip, so nothing is cut off. */
html body .ranking-row :is(.fr-rate-inline, .rate-btn-sm):not(#_):not(#__):not(#___) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .3em !important;
    flex: 0 0 auto !important;
    border: 1px solid rgba(var(--rgb-blue), .45) !important;
    border-radius: 2px !important;
    background: rgba(var(--rgb-blue), .07) !important;
    color: var(--accent-gold, #4DD8E6) !important;
    font-family: inherit !important;
    font-size: var(--fs-micro, .6875rem) !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background-color .12s ease, border-color .12s ease !important;
}
html body .ranking-row :is(.fr-rate-inline, .rate-btn-sm):hover:not(#_):not(#__):not(#___) {
    background: rgba(var(--rgb-blue), .16) !important;
    border-color: var(--accent-gold, #4DD8E6) !important;
}
html body .ranking-row :is(.fr-rate-inline, .rate-btn-sm):focus-visible:not(#_):not(#__):not(#___) {
    outline: 2px solid var(--accent-gold, #4DD8E6) !important;
    outline-offset: 2px !important;
}
html body .ranking-row .fr-rate-inline:not(#_):not(#__):not(#___) {
    min-width: 52px !important; min-height: 44px !important; padding: 0 .6rem !important;
}
html body .ranking-row .extra-cell .rate-btn-sm:not(#_):not(#__):not(#___) {
    position: relative !important;
    min-width: 56px !important;
    min-height: 28px !important;
    padding: 3px .55rem !important;
}
/* The hit area, not the paint. A negative block margin was tried first and drew
   a 44px border box that visibly crossed the row rule underneath it; a pseudo
   element is part of the button for hit-testing and part of nothing for
   layout, so the target is 44px tall and the control still reads as a 28px
   chip in a 28px strip. -8px keeps it inside the row's own 9px padding, so it
   can never take a tap meant for the row below. */
html body .ranking-row .extra-cell .rate-btn-sm:not(#_):not(#__):not(#___)::after {
    content: "" !important;
    position: absolute !important;
    inset: -8px !important;
}
/* Score and button share one line on fan-ratings, so the figure cell is 44px
   instead of 70px — 26px off every row of that board. */
html body .ranking-row:has(.rating-cell .fr-rate-inline):not(#_):not(#__):not(#___) {
    --brd-fig: 104px;
}
html body .ranking-row .rating-cell:has(.fr-rate-inline):not(#_):not(#__):not(#___) {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    overflow: hidden !important;
}
/* ⚠️ MEASURED, do not drop these. Something upstream gives the figure cell's
   children `width:100%`: as a flex COLUMN that is invisible, but the moment the
   cell became a flex ROW both the score and the button computed to the full
   104px cell width, the line measured 216px, and the overflow ran LEFT across
   the gap and printed "8.5" hard against "Islam Makhachev". They size to their
   own content here, explicitly. */
html body .ranking-row .rating-cell:has(.fr-rate-inline) > *:not(#_):not(#__):not(#___) {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
}
html body .ranking-row .rating-cell:has(.fr-rate-inline) .rating-score:not(#_):not(#__):not(#___) {
    flex: 0 1 auto !important;
}

/* ---- 4. THE TWO PINNED ROWS ON /rankings/division ---------------------
   `.champion-row` and `.contender-row` are the same podium the other 109
   boards draw with `.top-1` / `.top-2`, under different class names, so they
   were the only ranked #1 and #2 on the site with no inset bar, no belt ring
   and a 24px numeral. And `.rank-contender` was cyan: on a row whose figure is
   also cyan, that says the numeral is the metric. Chalk, like every other #2. */
html body .ranking-row.champion-row:not(.contender-row):not(#_):not(#__):not(#___) {
    box-shadow: inset 3px 0 0 0 var(--belt, #E8B830) !important;
}
html body .ranking-row.contender-row:not(#_):not(#__):not(#___) {
    box-shadow: inset 3px 0 0 0 var(--chalk, #E6E8EF) !important;
}
html body .ranking-row.champion-row:not(.contender-row) .fighter-photo-wrapper:not(#_):not(#__):not(#___) {
    box-shadow: inset 0 0 0 2px var(--belt, #E8B830) !important;
    border-color: var(--belt, #E8B830) !important;
}
html body .ranking-row.champion-row:not(.contender-row) :is(.rank-cell, .rank-num.rank-champ):not(#_):not(#__):not(#___) {
    font-size: var(--fs-figure, 1.75rem) !important;
    color: var(--belt, #E8B830) !important;
    -webkit-text-fill-color: var(--belt, #E8B830) !important;
}
html body .ranking-row.contender-row :is(.rank-cell, .rank-num.rank-contender):not(#_):not(#__):not(#___) {
    color: var(--chalk, #E6E8EF) !important;
    -webkit-text-fill-color: var(--chalk, #E6E8EF) !important;
}

/* ---- 5. FROM 768px: THE CHIPS BECOME A COLUMN -------------------------
   RANK | FIGHTER | FORM | FIGURE. Every child is placed on grid row 1
   EXPLICITLY: with only the column named, sparse auto-placement will not move
   the cursor backwards past `.rating-cell` (earlier in the DOM than
   `.extra-cell`) and the strip drops onto a second row again.

   768 and not 1024: at 768 the row has 736px of content box, of which the rank
   (48), the figure (92) and three 14px gaps take 182 - so the chips take their
   ~150-240px out of a 554px name column and still leave a name column wider
   than the WHOLE ROW is at 375px. Waiting for 1024 left every tablet showing a
   two-line ladder next to a one-line stats board. */
@media (min-width: 768px) {
    html body .ranking-row:has(.extra-cell):not(.sc-head):not(#_):not(#__):not(#___) {
        grid-template-columns:
            minmax(var(--brd-rank), auto) minmax(0, 1fr) auto var(--brd-fig) !important;
    }
    html body .ranking-row:has(.extra-cell) > .rank-cell:not(#_):not(#__):not(#___)    { grid-area: 1 / 1 !important; }
    html body .ranking-row:has(.extra-cell) > .fighter-cell:not(#_):not(#__):not(#___) { grid-area: 1 / 2 !important; }
    html body .ranking-row:has(.extra-cell) > .extra-cell:not(#_):not(#__):not(#___)   { grid-area: 1 / 3 !important; }
    html body .ranking-row:has(.extra-cell) > .rating-cell:not(#_):not(#__):not(#___)  { grid-area: 1 / 4 !important; }

    /* /rankings/goat is the only ladder with two strips (the peak date, then
       the finish mix), so it gets a fifth track rather than stacking. */
    html body .ranking-row:has(.extra-cell + .extra-cell):not(.sc-head):not(#_):not(#__):not(#___) {
        grid-template-columns:
            minmax(var(--brd-rank), auto) minmax(0, 1fr) auto auto var(--brd-fig) !important;
    }
    html body .ranking-row:has(.extra-cell + .extra-cell) > .extra-cell + .extra-cell:not(#_):not(#__):not(#___) {
        grid-area: 1 / 4 !important;
    }
    html body .ranking-row:has(.extra-cell + .extra-cell) > .rating-cell:not(#_):not(#__):not(#___) {
        grid-area: 1 / 5 !important;
    }
    html body .ranking-row:has(.extra-cell) .fighter-details:not(#_):not(#__):not(#___) {
        padding-right: .6rem !important;
    }
}

/* ---- 6. PHONE: ONE CHIP STRIP, NOT TWO --------------------------------
   Only /rankings/goat has a second strip, and below 1024 there is no column
   for it: stacked, it made a 127px row. The strip that survives is the first
   (the peak date); the finish mix returns at 768. No other board loses a chip
   at any width. */
@media (max-width: 767px) {
    html body .ranking-row > .extra-cell + .extra-cell:not(#_):not(#__):not(#___) {
        display: none !important;
    }
}

/* =============================================================================
   THE BOARD PHOTO IS NOT ZOOMED
   -----------------------------------------------------------------------------
   Measured on the served bundle at 1280px: the <img> inside `.sl-photo` on the
   seven sl-* boards computed `transform: matrix(1.28, 0, 0, 1.28, 0, 3.84)` — a
   28% scale-up plus a 3.84px downward shift, left over from a card-hover rule
   that no longer has a hover to belong to. The frame is 52px and
   `overflow:hidden`, so the visible result was a 64px face cropped INTO a 52px
   box and pushed down: exactly the head-clipping that audit 1 spent 2,808 files
   proving `cover` + `50% 0%` prevents. The transform wins because it is applied
   after the object-position, so the fix has to be here.
   Applied to all three photo frames so no future hover rule can reintroduce it
   on the other two vocabularies.
   ========================================================================== */
html body :is(.ranking-row .fighter-photo-wrapper, .sl-photo, .fr-face) > img:not(#_):not(#__):not(#___),
html body :is(.ranking-row, .sl-item, .fr-item):hover :is(.fighter-photo-wrapper, .sl-photo, .fr-face) > img:not(#_):not(#__):not(#___) {
    transform: none !important;
    scale: none !important;
    translate: none !important;
}


/* =============================================================================
   NOT FIXED HERE, ON PURPOSE — `.mfi-handle` (/stats/most-followed-instagram)
   -----------------------------------------------------------------------------
   Every row on that one board carries a real <a> to instagram.com drawn as bare
   11.5px text, measured 78x17 at 375px: the only control on any of the 110
   boards still under the 44px floor, and its text was already being clipped by
   the right edge of the row before any of this work (the handle lives in the
   FIGURE column, which is 78px at 375px).

   Both CSS-only fixes were built and MEASURED, and both were reverted because
   neither was clearly better:
     - chip it at 28px with a -8px pseudo hit area: 94x44 target, no clashes,
       but the chip is wider than the 78px column, so the border was cut by the
       row edge - clipping now reading as a broken box instead of as truncation.
     - chip it AND widen the column to 134px for this board: handle fully
       readable, 44px target - but the name column drops 195px -> 141px, every
       name wraps to two lines, "Khabib Nurmagomedov" still ellipsises, and the
       row grows 78px -> 93px. The name is the primary content on a board row
       and the handle is a footnote; trading the first for the second is a
       regression whatever the tap target says.

   THE REAL FIX IS MARKUP, in stats/most-followed-instagram.php, which this
   agent does not own: emit `.mfi-handle` in the NAME cell's meta line, where
   there is width for a 44px chip, instead of under the follower count.
   ========================================================================== */

/* ==========================================================================
   ROW = NAME + FIGURE. Nothing else.
   Owner: "on stats pages like most knockouts no need of showing records, or
   fighter division. just fighter name and stat is enough ... dont make those
   congested."

   The meta line (`.fmt-div` "HW", `.fmt-rec` "· 20-12") answered a question
   nobody brought to a leaderboard. A reader here is scanning ONE column of
   figures against ONE column of names; a division code and a career record
   sitting between them are two extra things to skip past on every row, 15
   times a page. Both facts are one tap away on the fighter's own page, which
   is where someone who wants them is going anyway.

   Hidden rather than removed from the markup: ~50 board files emit these, the
   text stays available to screen readers' off-screen reading order, and this
   is one line to undo if it turns out the record was load-bearing somewhere.

   ⚠️ Scope: this sheet is injected by stats/includes/board-style.php, which is
   switched OFF for the /rankings/ ladders (owner preferred their pre-existing
   phone treatment). So this affects /stats/ boards only - which is exactly
   what was asked for.
   ========================================================================== */
.fmt-div,
.fmt-rec { display: none !important; }

/* The name cell no longer shares its line, so give the name the room the meta
   was using rather than leaving a gap where it stood. */
.ranking-row .fighter-name-text,
.sl-item .fighter-name-text,
.fr-item .fighter-name-text { max-width: none; }

/* =============================================================================
   BOARD AT A GLANCE - desktop rail card (includes/components/board-glance.php)
   The rail was ten links to RANKINGS pages sitting beside a page of numbers; on a
   stats board those are not even the relevant siblings. This card reads the board
   you are on, from figures the template already has in memory.
   ========================================================================== */
.bg-glance {
    background: var(--sf-2);
    border: 1px solid var(--sf-7);
    border-top: 2px solid var(--sem-blue-line);
    border-radius: 2px;
    padding: .85rem .9rem 1rem;
    margin-bottom: 1.1rem;
}
.bg-glance-h {
    display: flex; align-items: center; gap: .45rem;
    margin: 0 0 .75rem;
    font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ik-3);
}
.bg-glance-h > i { color: var(--sem-blue); }

/* The leader is the one thing worth a photo - it is the answer to the question the
   page title asks. Everything below it is supporting context. */
.bg-lead {
    display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: .6rem;
    align-items: center;
    padding: 0 0 .8rem; margin-bottom: .3rem;
    border-bottom: 1px solid var(--sf-7);
}
.bg-lead:hover .bg-lead-name { color: var(--sem-blue); }
.bg-lead-pic img,
.bg-lead-pic .photo-fallback {
    width: 46px; height: 46px; border-radius: 2px; object-fit: cover;
    background: var(--sf-4); display: block;
}
.bg-lead-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bg-eyebrow {
    font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ik-3);
}
.bg-lead-name {
    font-size: .92rem; font-weight: 700; color: var(--ik-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color .14s ease;
}
.bg-lead-val {
    font-family: var(--f-data, ui-monospace, monospace);
    font-size: .92rem; font-weight: 800; color: var(--sem-blue);
    font-variant-numeric: tabular-nums;
}
.bg-lead-val small { font-size: .62rem; font-weight: 700; color: var(--ik-3); letter-spacing: .04em; }

.bg-rows { margin: 0; }
.bg-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: .42rem 0;
    border-bottom: 1px solid var(--sf-6);
}
.bg-row:last-child { border-bottom: 0; padding-bottom: 0; }
.bg-row dt { font-size: .76rem; color: var(--ik-3); }
.bg-row dd {
    margin: 0;
    font-family: var(--f-data, ui-monospace, monospace);
    font-size: .84rem; font-weight: 700; color: var(--ik-1);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* The rail itself is hidden on phones; belt and braces so the card can never appear
   above the board it describes on a narrow screen. */
@media (max-width: 900px) { .bg-glance { display: none; } }