/* FightIQ — fighter-page stylesheet. GENERATED by gen_fighter.py; do not edit by hand. Source: gen_site.PAGE_CSS + gen_fighter.FIGHTER_CSS + bonus_view.BONUS_CSS + strikezone_view.STRIKEZONE_CSS + takedown_view.TAKEDOWN_CSS + rankhistory_view.RANKHISTORY_CSS + fightermap_view.FIGHTERMAP_ASSETS + fantasy_view.FIGHTER_BLOCK_CSS. */

* { box-sizing: border-box; }
html,body { margin:0; background:var(--bg-app); color:var(--fg-1); font-family:var(--font-body); }
a { color:inherit; text-decoration:none; }
.wrap { max-width: var(--container-xl, 1280px); margin:0 auto; padding:0 24px; }
.disp { font-family:var(--font-display); font-weight:900; text-transform:uppercase; letter-spacing:-0.01em; line-height:1; }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.eyebrow { font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--red-400); }

/* live bar (kept at very top, per operator) */
.livebar { background:var(--ink-1000); border-bottom:1px solid var(--border); }
.livebar .wrap { display:flex; align-items:center; gap:14px; height:38px; font-size:12.5px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 var(--red-glow); animation:pulse 1.8s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 var(--red-glow);} 70%{box-shadow:0 0 0 7px rgba(230,38,47,0);} 100%{box-shadow:0 0 0 0 rgba(230,38,47,0);} }
.livebar b { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; }
.livebar .muted { color:var(--fg-3); }
.livebar .cta { margin-left:auto; color:var(--red-400); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
/* the event/venue line is the only elastic item in the bar: it truncates, everything
   else keeps its intrinsic width. Without min-width:0 a flex item refuses to shrink
   below its longest word, which is what pushed a 380px page out to 500px+. */
.livebar b, .livebar .cta { flex:none; white-space:nowrap; }
.livebar .muted { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* THE BAR SAYS THE NAME, OR IT SAYS NOTHING (2026-09-08). Measured at 390px:
   `.muted` had 67px of the 384px it wanted, so the reader got 'Silva vs D…' and
   the venue was gone anyway — 83% of the string ellipsed, i.e. a site-wide bar
   carrying no information at all. Hiding the venue alone does not fix it: the
   eyebrow and the CTA are both nowrap and together leave ~52px for a name that
   needs ~95px. So below 480px the bar becomes two rows — card name on the first,
   the CTA on its own line under it — the venue is dropped rather than ellipsed,
   and the name is allowed to print in full. Above 480px nothing changes and the
   ellipsis stays as the last resort. */
@media (max-width:480px){
  .livebar .wrap { flex-wrap:wrap; height:auto; padding-top:6px; padding-bottom:6px;
                   row-gap:2px; column-gap:10px; }
  .livebar .ven { display:none; }
  .livebar .muted { white-space:normal; overflow:visible; text-overflow:clip; }
  .livebar .cta { margin-left:0; flex-basis:100%; }
}

/* nav */
.nav { position:sticky; top:0; z-index:200; background:rgba(11,14,19,.82); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--border); }
.nav .wrap { min-height:64px; padding-top:6px; padding-bottom:6px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:9px; }
.brand .mk { width:26px; height:26px; }
.brand .wm { font-family:var(--font-display); font-weight:900; font-size:23px; text-transform:uppercase; letter-spacing:-.5px; }
.brand .wm .iq { color:var(--red-500); }
.navrow { display:flex; align-items:center; gap:26px; min-width:0; }
.navlinks { display:flex; flex-wrap:wrap; gap:4px; margin-left:6px; min-width:0; overflow-x:visible; }
.navlinks a { font-family:var(--font-display); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-3); padding:8px 12px; white-space:nowrap; flex:0 0 auto; }
.navlinks a.on, .navlinks a:hover { color:var(--fg-1); }
/* MOBILE NAV OVERFLOW (fixed 2026-08-22, and the reason .navrow exists as a class
   rather than an inline style). Seven nav items cannot fit a 380px viewport, and a
   flex row that cannot fit does not wrap by default — it grows, and it grew the whole
   PAGE, so every surface scrolled sideways at phone width.
   The fix was the smallest correct one: the link row itself becomes horizontally
   scrollable and everything above it is allowed to shrink (min-width:0 on both the row
   and its flex parent — without that, overflow-x:auto is inert on a flex child). No
   hamburger, no JS, no second nav to keep in sync; every link stays reachable.

   …AND IT TRADED ONE BUG FOR ANOTHER (F18). Measured at a true 390x844 viewport:
   scrollWidth − clientWidth = 191px hidden, with `scrollbar-width:none` and a zeroed
   webkit scrollbar on top of it. Compare was clipped; RECORD, METHOD and NEWS were
   invisible. A link nobody can see is not reachable — and the two the entire product
   argument rests on, the receipts and the methodology, were the two off the edge.
   "Short enough to swipe" was an assumption, and it was measured wrong.

   The fix below is still not a hamburger — a second nav to keep in sync is a worse
   trade for one row of links. It is the affordance the scroll was missing:

     * FOUR REAL ROWS UNDER 620px. `flex-wrap:wrap` with a fixed 4-column grid lets the
       row become two lines instead of one clipped line. Nothing is hidden, nothing
       needs discovering, and it costs 34px of sticky header on the narrowest phones —
       which is the honest price of having seven destinations.
     * BETWEEN 620 AND 900px there is room for one row, so it stays a row and simply
       gets its scrollbar BACK (a thin, styled one) plus a right-edge fade that
       disappears at the end of the scroll.
   Tap targets: the links go to 44px of vertical hit area, the Apple/Google minimum,
   which the 8px padding did not meet either.

   …AND NINE ITEMS RETIRED THE SCROLL BAND ENTIRELY (2026-09-01). /search and
   /record-books took the row from seven destinations to nine, and the row's natural
   width from 427px to 587px under the mobile type scale. MEASURED, not assumed, in a
   real browser at fourteen viewport widths — the F18 lesson was that "short enough to
   swipe" was an assumption measured wrong, so this time the numbers came first:

       viewport   587px row needs   hidden with the OLD 621-900 scroll band
         621px         467px avail            120px  <- 2 destinations off the edge
         700px         546px avail             41px
         800px         587px avail              0px  <- fits exactly here

   At seven items nothing was ever hidden at ANY width (measured: 0px at 621, 700, 800,
   900). At nine, the 621-780px band would have gone back to hiding links behind a 3px
   scrollbar — reintroducing the exact defect F18 existed to fix, on the band where most
   tablets and landscape phones live. So the wrap threshold moves 620 -> 800px, which is
   where the one-row layout genuinely stops fitting, and the scroll band and its
   scroll-driven fade are DELETED rather than kept: below 800px there is now nothing to
   scroll, and a mask keyed on a scroll timeline with no overflow paints a permanent
   fade over the last link, which is a cosmetic bug with no upside.

   Column counts are picked so the last row is never a lone orphan — nine items are
   5+4 in the tablet band and a clean 3x3 on phones:
       >= 801px    one flex row, 0px hidden  (measured 0 at 801/860/899/901/1000/1280)
       621-800px   grid, 5 columns -> 2 rows, nav header 148px
       <= 620px    grid, 3 columns -> 3 rows, nav header 190px
   Widest label "Record Books" measured 71px against an 83px cell at a 320px viewport,
   so nothing spilled even on the narrowest phone still in use. Body horizontal overflow
   is 0px at every width tested from 320 to 1440.

   …AND THE WIDEST LABEL CHANGED (2026-09-07). "Record Books" and "Stats" became one
   entry, "Stats & Records", which is three characters longer than the label the 83px
   cell was measured against. The count is still nine, so the 5+4 / 3x3 column maths
   above is unchanged — but a nowrap label wider than its cell does not clip in a grid,
   it PUSHES, and a pushed grid track is what re-grows the page sideways. So inside the
   two wrapped bands the links are allowed to break onto a second line (they already
   have a 44px min-height box to break inside) and nowrap is left in force only in the
   one-row desktop layout, where there is room for it.

   …AND A TENTH ITEM BROKE THE ONE-ROW DESKTOP LAYOUT (#289, 2026-09-08). Adding
   "Fantasy" was measured before it was shipped, in a real browser, at sixteen widths
   from 320 to 1440 — and the row that had 0px hidden at every desktop width with nine
   items hid THREE destinations with ten:

       viewport   px of nav hidden behind the invisible scrollbar, 10 items, old CSS
         801px         291px      <- ~3 destinations, unreachable and undiscoverable
         899px         193px
         901px         338px      (the >900px type scale is bigger, so it gets worse)
        1000px         239px
        1200px          39px
        1239px           0px      <- the one-row layout finally fits, here and no lower

   That is the F18 defect exactly: `overflow-x:auto` with `scrollbar-width:none` does not
   report an overflow, it swallows it, so nothing on this site would have gone red. The
   one-row layout does not fit ten items below 1239px, and a 1024px or 1152px laptop is
   not an edge case.

   THE FIX IS TO LET THE DESKTOP ROW WRAP TOO, and to DELETE the silent scroller rather
   than move a threshold. `.navlinks` is now `flex-wrap:wrap` with `overflow-x:visible`
   at every width: one row where ten fit (>=1240px, measured 64px of header — the same
   64px the nine-item row had), two natural lines where they do not (80px at 901-1239,
   104px at 801-900), and 0px hidden and 0px spilled at every one of the sixteen widths
   re-measured after the fix. `.nav .wrap` swaps its fixed 64px height for `min-height` so
   the bar
   grows only on the widths that need it — the desktop chrome is unchanged wherever the
   old one-row layout was actually working.

   THE PHONE BAND GOES TO FOUR COLUMNS. Ten items in three columns is 3+3+3+1: a 232px
   sticky header AND the lone orphan the column counts above exist to avoid. Four columns
   is 4+4+2 at 188px — shorter than the nine-item nav's own 190px, and no orphan. The cost
   is a 61px cell at a 320px viewport, which the longest single word in the longest label
   ("Records") overflowed by 6px with the old 4px side padding — a grid track pushed by
   its own content, which is the 2026-09-07 failure mode again. So the wrapped bands' side
   padding goes 4px -> 2px, and 320px re-measures at 0px hidden and 0px spilled. Five
   columns is still rejected for the 2026-09-07 reason: a 71px cell for "Stats &
   Records". */
@media (max-width:900px){
  .nav .wrap { gap:12px; padding:6px 16px; }
  .navrow { gap:14px; }
  .navlinks { margin-left:0; }
  .navlinks a { padding:11px 9px; font-size:13px; min-height:44px; display:flex; align-items:center; }
}
@media (max-width:800px){
  /* WRAP. Eleven links (Lab added 2026-09-28, operator), real rows, nothing off-screen.
     6+5 here: five columns would leave 5+5+1, a lone orphan. At 621px a sixth column is
     ~98px, wider than the 71px cell "Stats & Records" was rejected at below. */
  .nav .wrap { height:auto; padding-top:8px; padding-bottom:8px; align-items:flex-start; }
  .navrow { flex-direction:column; align-items:flex-start; gap:6px; width:100%; }
  .navlinks { display:grid; grid-template-columns:repeat(6,1fr); gap:0 2px; width:100%;
              overflow-x:visible; }
  .navlinks a { padding:12px 2px; font-size:12px; min-height:44px; justify-content:center;
                text-align:center; white-space:normal; line-height:1.15; }
}
@media (max-width:620px){
  /* 4+4+2 rather than 3+3+3+1 (a lone orphan, and 44px taller). Five columns is still
     rejected: at phone width it puts "Stats & Records" in a 71px cell. */
  .navlinks { grid-template-columns:repeat(4,1fr); }
}
/* TAP TARGETS (F18, second half). Measured on the live site: 21 tap targets under 32px
   tall on picks.html, including the primary CTAs — "See this week's picks" at 18px and
   "Full breakdown" at 26px. Apple's and Google's minimum is 44px, and a 17px target is
   not a style choice, it is a link a thumb misses.
   Scoped to touch pointers so the desktop layout, where a mouse hits an 18px link
   fine, is untouched; and applied to the CTAs — the things a reader is being ASKED to
   press — not to inline links inside prose, where a 44px box would just be a bug of a
   different kind. */
@media (max-width:900px) and (pointer:coarse){
  .livebar .wrap { height:auto; min-height:48px; padding-top:4px; padding-bottom:4px; }
  .livebar .cta { min-height:44px; display:inline-flex; align-items:center; }
  .exp-cta { min-height:44px; }
  .btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
}
.btn { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:13px; padding:9px 15px; border-radius:8px; cursor:pointer; border:1px solid transparent; }
.btn.primary { background:var(--red-500); color:#fff; box-shadow:0 0 20px var(--red-glow); }
.btn.ghost { background:transparent; color:var(--fg-2); border-color:var(--border-strong); }
.btn.sat { background:transparent; color:var(--red-400); border-color:rgba(230,38,47,.4); }

/* hero */
.hero { position:relative; border-bottom:1px solid var(--border); background:radial-gradient(120% 100% at 50% 0%, rgba(230,38,47,.10), transparent 60%); }
.hero .wrap { padding:48px 24px 40px; }
.hero h1.prop { font-family:var(--font-body); font-weight:700; text-transform:none; letter-spacing:.01em; font-size:16px; color:var(--fg-2); margin:0 0 18px; }
.hero .evname { font-size:clamp(38px,6vw,68px); margin:6px 0 6px; }
.hero .venue { color:var(--fg-3); font-size:14px; }
.trust { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; padding-top:20px; border-top:1px solid var(--border); align-items:baseline; }
.trust .big { font-family:var(--font-display); font-weight:900; font-size:30px; }
.trust .big .u { color:var(--win); }
.trust .lbl { color:var(--fg-3); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.trust .proof { margin-left:auto; color:var(--fg-2); font-size:13px; max-width:360px; line-height:1.5; }
.trust .proof a { color:var(--red-400); font-weight:700; }

/* card list */
.section { padding:40px 0 8px; }
.section h2 { font-size:15px; letter-spacing:.1em; color:var(--fg-2); margin:0 0 4px; }
.seg { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:12px; letter-spacing:.1em; color:var(--fg-4); margin:26px 0 12px; }
.seg.first { margin-top:14px; }
.fight { display:block; background:var(--surface-card); border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin-bottom:12px; transition:border-color .18s, transform .18s; }
.fight:hover { border-color:var(--border-strong); transform:translateY(-1px); }
.fight.main { border-left:3px solid var(--red-500); }
.fight .top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.fight .wc { font-family:var(--font-display); text-transform:uppercase; font-weight:700; font-size:12px; letter-spacing:.06em; color:var(--fg-3); }
/* THE VS TRACK IS FIXED AND THE NAME TRACKS CANNOT GROW PAST THEIR SHARE (2026-09-25).
   `1fr auto 1fr` is minmax(auto,1fr): a single long word ("DEMOPOULOS") sets the
   track's MINIMUM to its own width, so at 390px the name column grew into the middle
   track and "VS" sat on top of the name. minmax(0,1fr) caps each name column at half
   of what is left, the VS column is a fixed narrow track, and the name wraps inside
   its own column (below) instead of spilling into its neighbour's. */
.names { display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); gap:12px; align-items:center; margin-bottom:12px; }
.fighter { display:flex; align-items:center; gap:10px; min-width:0; }
.fighter.blue { justify-content:flex-end; text-align:right; }
.av { width:40px; height:40px; border-radius:50%; background:var(--ink-600); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--fg-2); flex:none; border:2px solid var(--corner-red); }
.fighter.blue .av { border-color:var(--corner-blue); order:2; }
.fn { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:17px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.vs { font-family:var(--font-display); color:var(--fg-4); font-size:13px; font-weight:700; text-align:center; min-width:0; }
.odds { font-family:var(--font-mono); font-size:12.5px; color:var(--fg-3); }
.odds.fav { color:var(--fg-1); }

/* confidence bar */
.cbar { height:34px; border-radius:8px; overflow:hidden; display:flex; background:var(--ink-600); position:relative; }
.cbar .r { background:linear-gradient(90deg, var(--corner-red), rgba(230,51,41,.55)); }
.cbar .b { background:linear-gradient(270deg, var(--corner-blue), rgba(46,125,246,.55)); }
/* SEGMENT TEXT NEVER WRAPS, AND THE NAME IS THE DROPPABLE HALF (2026-09-08).
   A segment is as wide as its own probability, so the narrow side of a 55/45 bar
   is ~90px on a phone and the fighter's name wrapped to two lines inside a 34px
   box. Both names are printed directly above every bar that carries them, so
   below 600px the segment prints its percentage alone rather than a broken
   label — and nowrap + overflow:hidden mean a long name can never push the bar
   out of shape at any width. */
.cbar span { display:flex; align-items:center; font-family:var(--font-mono); font-size:12px; font-weight:600; color:#fff; padding:0 10px; white-space:nowrap; overflow:hidden; }
.cbar .b span { margin-left:auto; }
.cbar .nm { display:inline; padding:0; margin-right:6px; }
@media (max-width:600px){ .cbar .nm { display:none; }
                          .cbar span { padding:0 7px; } }
.pickrow { display:flex; align-items:center; gap:10px; margin-top:12px; }
.tier { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:11px; letter-spacing:.06em; padding:3px 8px; border-radius:6px; white-space:nowrap; }
/* THE CONFIDENCE LADDER IS THE PRODUCT, SO IT HAS TO LOOK LIKE A LADDER (F10).
   `tier_class()` used to fold MED *and* LOW into STANDARD, and the stylesheet defined
   no .tier.MED or .tier.LOW at all — so across picks.html and the event pages, 110 MED
   chips and 83 LOW chips (193 picks) wore exactly the same grey. Two tiers apart on the
   bout page for the same fight, identical here. Five tiers, five treatments, one
   definition — and STANDARD is kept as an alias of MED so any legacy value still lands
   somewhere deliberate rather than falling through to "the grey one". */
.tier.LOCK { background:var(--red-tint); color:var(--red-400); }
.tier.HIGH { background:var(--corner-blue-bg); color:#7fb0ff; }
.tier.MED, .tier.STANDARD { background:var(--ink-600); color:var(--fg-2); }
.tier.LOW { background:transparent; color:var(--fg-3); box-shadow:inset 0 0 0 1px var(--border-strong); }
.tier.TOSSUP { background:transparent; color:var(--fg-4); box-shadow:inset 0 0 0 1px var(--border); font-style:italic; }
.tier.UNKNOWN { background:var(--red-500); color:#fff; }
.pickline { font-size:13.5px; color:var(--fg-2); }
.pickline b { color:var(--fg-1); font-weight:700; }
.livelozenge { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--fg-3); }
/* THE PICK CARD ON A PHONE (2026-09-08). Measured at 390px, not eyeballed: the
   name track is a 1fr column minus a 40px avatar and a 10px gap = 83px of
   clientWidth against up to 146px of scrollWidth, and `.fn` was nowrap +
   ellipsis — so 9 of the 24 names on /picks were cut ('JOSE DELGA…',
   'WALDO COR…', 'LONE'ER K…'). The two names ARE the card; an ellipsis inside
   one is not a truncation, it is the primary content of the flagship page
   failing. Under 420px the avatar steps down, the name steps down one size and
   is allowed a second line — no ellipsis on a name at any width — and the pick
   row wraps so the tier chip keeps its line instead of squeezing the sentence
   beside it. `.tier` above is nowrap for the same reason: 'TOSS-UP' was
   breaking into 'TOSS-' / 'UP' inside its own box. */
@media (max-width:430px){
  .names { gap:6px; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); }
  .fighter { gap:8px; }
  .av { width:32px; height:32px; font-size:12px; }
  /* `anywhere`, not `break-word`: break-word does not lower the min-content size, so
     a grid track still sized itself to the longest word; `anywhere` does. */
  .fn { font-size:15px; white-space:normal; overflow:visible; text-overflow:clip;
        overflow-wrap:anywhere; line-height:1.06; }
  .pickrow { flex-wrap:wrap; row-gap:6px; }
  .pickline { font-size:13px; }
}

/* inline-expand accordion (progressive disclosure, SSG-safe via <details>) */
details.fight { padding:0; }                 /* summary carries the padding so the collapsed look is identical */
details.fight > summary { list-style:none; cursor:pointer; padding:16px 18px; display:block; }
details.fight > summary::-webkit-details-marker { display:none; }
details.fight > summary::marker { content:""; }
details.fight[open] { border-color:var(--border-strong); }
.exp-hint { margin-left:auto; font-family:var(--font-display); text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--fg-4); display:flex; align-items:center; gap:3px; }
details.fight[open] .exp-hint .mater { transform:rotate(180deg); }
.exp-hint .mater { font-size:16px; transition:transform .18s; }
.exp-body { padding:0 18px 16px; border-top:1px solid var(--border); margin-top:2px; }
.exp-body .row { display:flex; flex-wrap:wrap; gap:8px 22px; padding:14px 0 4px; }
.exp-body .cell .l { color:var(--fg-4); font-size:10px; text-transform:uppercase; letter-spacing:.07em; }
.exp-body .cell .v { font-family:var(--font-mono); font-size:13.5px; color:var(--fg-1); margin-top:2px; }
.exp-read { color:var(--fg-2); font-size:13.5px; line-height:1.55; margin:10px 0 14px; }
/* P0-1b — the within-tolerance disagreement line (#288). Carried on `.exp-read
   .exp-note` so it is styled whatever happens to this rule: a class that exists only
   here would render as bare body text the day this file and the page disagree. Quieter
   and tighter than the model read below it, because it is a caveat about the two cells
   directly above, not a second read. */
.exp-note { color:var(--fg-3); font-size:12.5px; margin:4px 0 12px; }
.exp-read b { color:var(--fg-1); }
.exp-cta { display:inline-flex; align-items:center; gap:6px; color:var(--red-400); font-family:var(--font-display); text-transform:uppercase; font-weight:700; letter-spacing:.04em; font-size:13px; }
.exp-ed { border-left:2px solid var(--border-strong); padding-left:12px; margin:0 0 14px; color:var(--fg-2); font-size:13.5px; line-height:1.6; }
.exp-ed .edlab { display:block; font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:10px; letter-spacing:.07em; color:var(--fg-4); margin-bottom:4px; }
.exp-cta .mater { font-size:17px; }

/* dropped-bout honesty note */
.honest { margin:20px 0; padding:14px 16px; border:1px dashed var(--border-strong); border-radius:10px; color:var(--fg-3); font-size:13px; line-height:1.5; }
.honest b { color:var(--fg-2); }

/* news teaser */
.news { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:16px; }
.ncard { background:var(--surface-card); border:1px solid var(--border); border-radius:12px; padding:18px; }
.ncard .tag { font-size:10px; }
.ncard h3 { font-family:var(--font-display); text-transform:uppercase; font-size:18px; margin:10px 0 6px; line-height:1.05; }
.ncard p { color:var(--fg-3); font-size:13px; line-height:1.5; margin:0; }
.ncard .tag .ndate { font-family:var(--font-mono); font-weight:400; letter-spacing:0; color:var(--fg-4); margin-left:8px; text-transform:none; }
.buildstamp { font-family:var(--font-mono); font-size:11.5px; line-height:1.6; color:var(--fg-4); margin:-4px 0 18px; }
.buildstamp b { color:var(--fg-3); font-weight:400; }
.cell .l .asof { font-family:var(--font-mono); font-weight:400; letter-spacing:0; text-transform:none; color:var(--fg-4); }

/* footer */
footer { border-top:1px solid var(--border); background:var(--ink-900); margin-top:56px; }
footer .wrap { padding:34px 24px; display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
footer .disc { max-width:560px; color:var(--fg-4); font-size:12px; line-height:1.6; }
/* THE RANKINGS COLUMN (see gen_site.rankings_column). Thirteen links is past the size
   the 5-7-item stacks beside it handle, so this shape was MEASURED in a browser at real
   viewport widths rather than reasoned about — in an iframe, because a media query reads
   the viewport and not the element you resized.

   Two grid columns wide, ONE below 520px. The narrow rule is counter-intuitive (13 rows
   instead of 7) and it is what the tape says. The width is what matters on a phone, not
   the row count: the two-column box measures 276px WIDE, which is too wide to sit beside
   any other footer column inside 342px of content, so it forces all four columns onto
   their own rows — footer 1,109px at 390px. One column is 139px, the columns pair up
   again, and the footer measures 988px. Swept at 360/390/430/480/520/560/640/768/
   1024/1280: one column wins to 520px, two from 560px, and no label wraps at any width.

   The cost, measured, against the same page with the column removed:
     390px   619px -> 988px footer (13 rows, box 139x376)
     1280px  359px -> 472px footer ( 7 rows, box 276x239 — level with "FightIQ") */
footer .frank { display:grid; grid-template-columns:repeat(2,minmax(0,auto)); gap:8px 24px; font-size:13px; color:var(--fg-2); }
@media (max-width:520px) { footer .frank { grid-template-columns:minmax(0,auto); } }
/* THE ICON FACE (2026-09-08). `.mater` asked for a family nothing declared: the
   Google stylesheet that used to declare it went with the self-hosting cut-over,
   so every icon on the estate rendered as its own ligature NAME — 'shield
   MouthGuards.pro' in the footer of all 14,072 pages, 'expand_more' under every
   pick. The face is now declared in the design-system typography tokens file
   (self-hosted 2,892-byte subset, the nine glyphs we draw, font-display:block so
   a ligature name never flashes) and package_dist fails the build if it stops
   being declared.

   text-transform AND letter-spacing ARE THE OTHER HALF, and declaring the face
   alone would NOT have fixed this. Measured in Chrome against the real subset —
   qaB_icontest.py, all nine names, two contexts:

       on a plain parent          shield 24px  expand_more 24px   <- glyphs
       inside an uppercase label  shield 91px  expand_more 199px  <- the WORD

   Every icon this site draws sits inside a label that is text-transform:
   uppercase with tracking on it — `.exp-hint` ('Tap for the read'), `.exp-cta`
   ('Full breakdown'), the footer's sponsor line — and the ligature in the font
   is keyed on the LOWERCASE sequence, so on 'EXPAND_MORE' it never fires. That
   is exactly what the crawl photographed: the ligature name set larger than the
   label beside it, in a serif fallback. The two resets below are the fix; the
   ligature settings are belt-and-braces (this subset registers its substitutions
   under `rlig`, which is on by default, so they are not what was broken). */
.mater { font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal;
         font-variant-ligatures:normal; font-feature-settings:'liga','rlig';
         text-transform:none; letter-spacing:normal; word-wrap:normal; direction:ltr;
         display:inline-block; line-height:1; white-space:nowrap;
         -webkit-font-smoothing:antialiased; }

.av.has-photo { overflow:hidden; padding:0; background:var(--ink-600); }
.av.has-photo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }

.fp { padding:26px 0 8px; }
.crumbs { color:var(--fg-3); font-size:12.5px; margin:10px 0 6px; }
.crumbs a { color:var(--fg-2); }
.crumbs a:hover { color:var(--fg-1); }

/* fighter header */
.fhead { border-bottom:1px solid var(--border); background:radial-gradient(120% 100% at 12% 0%, rgba(230,38,47,.10), transparent 60%); }
.fhead .wrap { padding:26px 24px 26px; }
.fhero { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.fhero .av { width:74px; height:74px; border-radius:50%; background:var(--ink-600); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--fg-2); flex:none; border:2px solid var(--corner-red); }
.fhero .nm { font-family:var(--font-display); text-transform:uppercase; font-weight:900; font-size:clamp(28px,5vw,46px); letter-spacing:-.01em; line-height:1; }
/* the fighter's name is the page's h1 (2026-09-08) — every fighter page had none.
   The rule above already pins family, weight, size and leading, so the only thing
   the element swap changes is the UA margin, handed back here. */
.fhero h1.nm { margin:0; }
.fhero .sub { color:var(--fg-3); font-size:13.5px; margin-top:8px; display:flex; gap:8px 16px; flex-wrap:wrap; align-items:center; }
.fhero .rec { font-family:var(--font-mono); color:var(--fg-1); }
.factchip { font-family:var(--font-display); text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--win); background:rgba(46,196,120,.10); padding:3px 8px; border-radius:5px; }
.pendchip { font-family:var(--font-display); text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--fg-4); background:var(--ink-600); padding:3px 8px; border-radius:5px; }
/* THE RANK CHIP. Same chip furniture as the two above — same size, same weight, same
   radius, same letter-spacing — in the gold the division tables already use for a
   champion row (.drow .rk.c in gen_fighters_index). It is the only chip in this row
   that is a LINK, so it gets a hover state and nothing else new. */
a.rankchip { font-family:var(--font-display); text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--gold); background:var(--gold-bg); padding:3px 8px; border-radius:5px; border:1px solid transparent; }
a.rankchip:hover { border-color:var(--gold); }
a.rankchip:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* section shell (mirrors fight page) */
.sec { padding:28px 0 4px; }
.sec > h2 { font-family:var(--font-display); text-transform:uppercase; font-weight:900; letter-spacing:-.01em; font-size:clamp(19px,3vw,25px); margin:0 0 4px; }
.sec .subt { color:var(--fg-3); font-size:13px; margin:0 0 16px; }
.card { background:var(--surface-card); border:1px solid var(--border); border-radius:12px; padding:20px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:760px){ .grid2 { grid-template-columns:1fr; } }

/* tale of the tape (single fighter, key/value) */
.kv { width:100%; border-collapse:collapse; }
.kv td { padding:11px 10px; border-bottom:1px solid var(--border); font-size:14px; }
.kv td.k { font-family:var(--font-display); text-transform:uppercase; font-size:11px; letter-spacing:.06em; color:var(--fg-3); width:170px; }
.kv td.v { font-family:var(--font-mono); color:var(--fg-1); }
.kv td.v.pend { color:var(--fg-4); font-family:var(--font-body); font-style:italic; }
/* a WITHHELD professional record. Deliberately NOT .pend: "pending" promises the field
   is coming, and this one is not — we have a record and we are refusing to print it.
   Body face, full sentence, no italics, because it is prose and not a missing value. */
.kv td.v.wh { color:var(--fg-2); font-family:var(--font-body); font-style:normal; line-height:1.6; font-size:13px; }
.kv td.v.wh b { color:var(--fg-1); font-weight:700; }
/* the two dates that bound a UFC record, wherever it is printed */
.ufcdates { font-family:var(--font-body); font-style:normal; color:var(--fg-4); font-size:11.5px; margin-left:8px; white-space:nowrap; }
.pstrip .v .ufcdates { display:block; margin:2px 0 0; white-space:normal; }
/* the standalone withheld block, above the profile strip */
.recwh { border:1px dashed var(--border-strong); border-radius:10px; padding:11px 13px; margin:0 0 14px; color:var(--fg-3); font-size:13px; line-height:1.65; }
.recwh b { color:var(--fg-1); font-weight:700; }
/* the verified social handles — one more row of the SAME key/value table, deliberately
   not a new component. No brand marks: Material Symbols has no X or Instagram glyph and
   this site does not carry third-party logos, so the platform is a text label in the
   same uppercase display face every other key on the page uses. */
.kv td.v .soc { display:flex; gap:4px 18px; flex-wrap:wrap; }
.kv td.v .soc a { color:var(--fg-2); text-decoration:none; border-bottom:1px solid var(--border); }
.kv td.v .soc a:hover { color:var(--fg-1); border-bottom-color:var(--fg-3); }
.kv td.v .soc a b { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:10px; letter-spacing:.06em; color:var(--fg-4); margin-right:6px; }
/* the source link on a Born in / Fights out of row (born_base.fighter_rows_html) */
.kv td.v a.srcl { margin-left:8px; font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:10px; letter-spacing:.06em; color:var(--fg-4); text-decoration:none; border-bottom:1px solid var(--border); }
.kv td.v a.srcl:hover { color:var(--fg-2); border-bottom-color:var(--fg-3); }

/* career rates — the public UFCStats career averages, as FACTS.
   Deliberately quieter than the metrics card that follows it: flat inset tiles, no
   gradient, no bar, no accent rail. A reader has to be able to see at a glance that
   this block is the source's arithmetic and the card below it is our ranking of it. */
.crgrp + .crgrp { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.crgrp > .h { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:11px; letter-spacing:.08em; color:var(--fg-3); margin:0 0 10px; }
.crtiles { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:760px){ .crtiles { grid-template-columns:repeat(2,1fr); } }
.crtiles .t { background:var(--surface-inset); border:1px solid var(--border); border-radius:10px; padding:11px 12px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; min-height:74px; }
.crtiles .t .k { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:9.5px; letter-spacing:.07em; line-height:1.45; color:var(--fg-4); }
.crtiles .t .v { font-family:var(--font-mono); font-size:19px; color:var(--fg-1); font-variant-numeric:tabular-nums; line-height:1; }
.crtiles .t .v.na { font-size:15px; color:var(--fg-4); }

/* FightIQ Metrics card (FIFA-style, screenshottable) */
/* overflow is VISIBLE, not hidden: the per-metric ⓘ bubbles sit above their row, and the
   top row's bubble would be clipped by the card. The 3px gradient bar keeps its rounded
   top corners via its own border-radius rather than by being clipped to the card's. */
.metrics { background:linear-gradient(180deg,var(--ink-700),var(--ink-800)); border:1px solid var(--border-strong); border-radius:16px; padding:22px 24px; position:relative; overflow:visible; }
.metrics::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; border-radius:16px 16px 0 0; background:linear-gradient(90deg,var(--corner-red),var(--corner-blue)); }
.metrics .lab { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:12px; letter-spacing:.08em; color:var(--red-400); margin-bottom:2px; }
.metrics .disc { color:var(--fg-4); font-size:11.5px; line-height:1.65; margin-bottom:16px; max-width:60ch; }
/* the inline "i" glyph in the subtitle, matching the real ⓘ buttons below it */
.miex { display:inline-grid; place-items:center; width:14px; height:14px; border-radius:50%; border:1px solid var(--border-strong); font-size:9px; font-weight:700; color:var(--fg-3); vertical-align:1px; }
.metrics .disc b { color:var(--fg-3); font-weight:700; }
.metrics .disc em { font-style:normal; color:var(--gold); }
.mrow .mn em.lim { font-family:var(--font-display); text-transform:uppercase; font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:.06em; color:var(--gold); background:var(--gold-bg); padding:1px 5px; border-radius:4px; margin-left:6px; vertical-align:1px; }
.mrow { margin:12px 0; }
.mrow .top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
.mrow .mn { font-family:var(--font-display); text-transform:uppercase; font-weight:700; font-size:13px; letter-spacing:.03em; color:var(--fg-1); }
.mrow .mn small { font-family:var(--font-body); text-transform:none; letter-spacing:0; color:var(--fg-4); font-weight:400; font-size:11px; margin-left:8px; }
.mrow .mv { font-family:var(--font-display); font-weight:900; font-size:20px; color:var(--fg-1); font-variant-numeric:tabular-nums; }
.mrow .mv.na { font-size:13px; color:var(--fg-4); font-weight:700; }
.mtrack { height:9px; border-radius:6px; background:var(--ink-600); overflow:hidden; }
.mtrack i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--corner-blue),var(--red-500)); }
.mtrack.na { background:repeating-linear-gradient(45deg,var(--ink-600),var(--ink-600) 6px,var(--ink-700) 6px,var(--ink-700) 12px); }
.mrow.iq { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.mrow.iq .mn { color:var(--red-400); font-size:14px; }
.mrow.iq .mv { font-size:26px; }
.mrow.iq .mtrack i { background:linear-gradient(90deg,var(--red-500),var(--red-400)); }

/* our record (the moat) */
.recwrap .headline { font-size:16px; color:var(--fg-2); line-height:1.5; margin:0 0 14px; }
.recwrap .headline b { color:var(--fg-1); }
.recwrap .headline .big { font-family:var(--font-display); font-weight:900; font-size:22px; color:var(--win); }
/* The 5-column verdict table cannot fit a phone. Found while verifying the 390px nav
   fix: it was the one remaining thing making a page scroll SIDEWAYS at that width — the
   whole document moved, so the header and the body text went with it. It now scrolls
   inside its own box instead, which is the only place a wide table is allowed to scroll. */
.vscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.vtable { width:100%; min-width:430px; border-collapse:collapse; font-size:13.5px; }
.vtable th, .vtable td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); }
.vtable th { font-family:var(--font-display); text-transform:uppercase; font-size:11px; letter-spacing:.05em; color:var(--fg-3); font-weight:700; }
.vtable td.mono { font-family:var(--font-mono); }
.vres { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:11px; letter-spacing:.04em; padding:2px 7px; border-radius:5px; }
.vres.ok { color:var(--win); background:rgba(46,196,120,.12); }
.vres.no { color:var(--red-400); background:var(--red-tint); }
/* The back-tested line is SECONDARY by construction, not by tone of voice: smaller type,
   muted colour, a literal "back-tested" tag, and no big number. A reader skimming the
   section has to be able to tell at a glance which of the two claims is the public
   record — if both blocks looked alike, the label would be doing all the work. */
.btcard { margin-top:10px; padding:14px 16px; background:transparent; border-style:dashed; }
.btcard p { margin:0; font-size:13px; line-height:1.6; color:var(--fg-3); }
.btcard p b { color:var(--fg-2); font-weight:700; }
.btlab { display:inline-block; font-family:var(--font-display); text-transform:uppercase; font-size:9.5px; font-weight:800; letter-spacing:.08em; color:var(--gold); background:var(--gold-bg); padding:2px 7px; border-radius:5px; margin-bottom:8px; }

/* fresh profile strip — every value on it is recomputed at build time */
.pstrip { display:flex; gap:10px 26px; flex-wrap:wrap; margin:0 0 14px; padding:0 0 14px; border-bottom:1px solid var(--border); }
.pstrip div { display:flex; flex-direction:column; gap:3px; }
.pstrip .k { font-family:var(--font-display); text-transform:uppercase; font-size:9.5px; font-weight:800; letter-spacing:.08em; color:var(--fg-4); }
.pstrip .v { font-family:var(--font-mono); font-size:15px; color:var(--fg-1); }
.runw, .runl, .rund { font-family:var(--font-display); font-weight:800; }
.runw { color:var(--win); }
.runl { color:var(--red-400); }
.rund { color:var(--fg-3); }

/* recent form chips */
.formchips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.fchip { display:flex; flex-direction:column; gap:2px; border:1px solid var(--border); border-radius:9px; padding:8px 11px; min-width:150px; max-width:230px; }
.fchip .r { font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.04em; }
.fchip.w .r { color:var(--win); }
.fchip.l .r { color:var(--red-400); }
/* .dr, not .d — `.fchip .d` is already the date line, and two selectors one space apart
   is how a stylesheet acquires a bug nobody can see. */
.fchip.dr .r { color:var(--fg-2); }
.fchip .o { font-size:12px; color:var(--fg-2); }
.fchip .d { font-family:var(--font-mono); font-size:10.5px; color:var(--fg-4); }
/* a form row we published a call on links to that bout's receipt page */
a.fchip.linked { position:relative; text-decoration:none; transition:border-color var(--dur,180ms) var(--ease-out,ease), background var(--dur,180ms) var(--ease-out,ease); }
a.fchip.linked:hover { border-color:var(--border-strong,rgba(255,255,255,.16)); background:rgba(255,255,255,.02); }
a.fchip.linked .fgo { position:absolute; top:7px; right:9px; font-size:12px; color:var(--fg-4); opacity:0; transition:opacity var(--dur,180ms) var(--ease-out,ease), transform var(--dur,180ms) var(--ease-out,ease); }
a.fchip.linked:hover .fgo { opacity:1; transform:translateX(2px); color:var(--red-400); }
a.fchip.linked:focus-visible { outline:2px solid var(--red-400); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { a.fchip.linked, a.fchip.linked .fgo { transition:none; } }

/* the full career table (sec_career) — the page's existing furniture, in table form.
   Collapsed by default: the eight form chips above are the summary, this is the record. */
.careerwrap > summary { list-style:none; cursor:pointer; display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
.careerwrap > summary::-webkit-details-marker { display:none; }
.careerwrap > summary .csum { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:13px; letter-spacing:.05em; color:var(--red-400); }
.careerwrap > summary .csum::after { content:" ▾"; }
.careerwrap[open] > summary .csum::after { content:" ▴"; }
.careerwrap > summary .chint { color:var(--fg-4); font-size:12px; }
.careerwrap > summary:focus-visible { outline:2px solid var(--red-400); outline-offset:3px; border-radius:4px; }
.ctable { margin-top:14px; overflow-x:auto; }
.ctable table { border-collapse:collapse; width:100%; min-width:520px; }
.ctable th { text-align:left; font-family:var(--font-display); text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.07em; color:var(--fg-4); padding:0 12px 8px 0; border-bottom:1px solid var(--border); white-space:nowrap; }
.ctable td { padding:8px 12px 8px 0; border-bottom:1px solid var(--border); font-size:13px; color:var(--fg-2); vertical-align:baseline; }
.ctable tr:last-child td { border-bottom:0; }
.ctable .cdate { font-family:var(--font-mono); font-size:12px; color:var(--fg-3); white-space:nowrap; }
.ctable .cdate a { color:var(--fg-2); }
.ctable .cdate a:hover, .ctable .copp a:hover { color:var(--red-400); }
.ctable .copp a { color:var(--fg-1); font-weight:600; }
.ctable .crnd { font-family:var(--font-mono); font-size:12px; color:var(--fg-3); }
.ctable .cev { color:var(--fg-4); font-size:12px; }
.ctable .cres { font-family:var(--font-display); font-weight:800; font-size:11.5px; letter-spacing:.04em; }
.ctable .cres.cw { color:var(--win); }
.ctable .cres.cl { color:var(--red-400); }
.ctable .cres.cd { color:var(--fg-3); }

/* Post-fight bonuses (#143). It reuses .ctable wholesale — same date/opponent/event
   vocabulary as the career table under it, because it IS that table filtered to the
   awarded rows, and a second grammar for the same fights would be a second thing to
   keep consistent. Only three rules are its own. */
.ctable .bcell { white-space:nowrap; padding-right:4px; }
.bnlede { color:var(--fg-2); font-size:14px; line-height:1.6; margin:0; }
.bnlede b { color:var(--fg-0); font-family:var(--font-display); font-size:17px; }
/* The small print carries the era, attribution and floor sentences. Quiet, but not so
   quiet it reads as decoration: a reader who takes the total at face value is reading
   a lower bound, and the sentence that says so has to be legible. */
.sec .subt.bnfoot { color:var(--fg-4); font-size:11.5px; line-height:1.55; margin:12px 0 0; max-width:78ch; }
.sec .subt.bnfoot + .subt.bnfoot { margin-top:6px; }

/* Weigh-ins and medical suspensions (#306). Reuses .ctable wholesale, same as the
   bonus table: it is the same fights in the same date order, and a second grammar for
   one more column of them would be a second thing to keep consistent. Four rules of
   its own — the made/missed word, the pending marker, and the suspension line. */
.ctable .cwt { font-family:var(--font-mono); font-size:12.5px; color:var(--fg-1); white-space:nowrap; }
.ctable .cmade { font-family:var(--font-display); font-weight:800; font-size:11.5px; letter-spacing:.04em; color:var(--win); }
.ctable .cmiss { font-family:var(--font-display); font-weight:800; font-size:11.5px; letter-spacing:.04em; color:var(--red-400); }
.ctable .cflag { color:var(--fg-4); font-size:11.5px; font-family:var(--font-body); font-weight:400; letter-spacing:0; }
.ctable .csrc a { color:var(--fg-4); font-size:11.5px; }
.ctable .csrc a:hover { color:var(--red-400); }
.suspline { border:1px solid var(--border-strong); border-left:3px solid var(--gold); border-radius:10px; padding:12px 14px; margin-top:14px; color:var(--fg-2); font-size:13.5px; line-height:1.6; }
.suspline b { color:var(--fg-0); }
.suspline .sscite { display:block; margin-top:6px; color:var(--fg-4); font-size:11.5px; }

/* strike-zone body map: all styling ships with the component (STRIKEZONE_ASSETS, in
   the head). Nothing for it here — the old placeholder rules went with the placeholder. */

/* generic pending */
.pending-block { border:1px dashed var(--border-strong); border-radius:12px; padding:20px; color:var(--fg-3); font-size:13.5px; line-height:1.6; }
.pending-block .pendtag { font-family:var(--font-display); text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--gold); background:var(--gold-bg); padding:2px 7px; border-radius:5px; display:inline-block; margin-bottom:8px; }

.backlink { display:inline-flex; align-items:center; gap:6px; margin:6px 0 0; color:var(--red-400); font-family:var(--font-display); text-transform:uppercase; font-weight:700; letter-spacing:.04em; font-size:13px; }

/* profile prose */
.bioprose p { color:var(--fg-1); font-size:15.5px; line-height:1.68; margin:0 0 12px; max-width:70ch; }
.bioprose p:last-child { margin-bottom:0; }
.biofoot { color:var(--fg-4); font-size:11.5px; line-height:1.55; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.archrow { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.archchip { font-family:var(--font-display); text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--fg-2); background:var(--ink-600); padding:3px 9px; border-radius:5px; }


.mrow, .mh2h .mrowh, .raterow { position:relative; }
button.mi { position:static; display:inline-grid; place-items:center; width:15px; height:15px;
  margin-left:6px; padding:0; border-radius:50%; border:1px solid var(--border-strong);
  background:transparent; color:var(--fg-4); font-family:var(--font-body); font-size:9.5px;
  font-weight:700; line-height:1; cursor:help; vertical-align:1px; flex:none;
  -webkit-tap-highlight-color:transparent; }
button.mi:hover, button.mi:focus { color:var(--fg-1); border-color:var(--fg-3); outline:none; }
button.mi .mtip { position:absolute; left:0; right:0; margin-inline:auto; bottom:100%;
  margin-bottom:7px; width:max-content; max-width:100%; box-sizing:border-box;
  background:var(--ink-1000); color:var(--fg-1); border:1px solid var(--border-strong);
  border-radius:8px; padding:8px 11px; font-family:var(--font-body); font-size:12px;
  font-weight:400; line-height:1.45; letter-spacing:0; text-transform:none; text-align:center;
  white-space:normal; opacity:0; visibility:hidden; transition:opacity .14s;
  box-shadow:0 10px 28px rgba(0,0,0,.55); z-index:60; pointer-events:none; }
button.mi:hover .mtip, button.mi:focus .mtip { opacity:1; visibility:visible; }
/* Centring in the row is right for the head-to-head layout, where the label (and so the
   ⓘ) sits in the middle column. On the single-fighter cards the label is hard left, so
   the bubble is left-anchored there instead — it still starts inside the row and is
   still capped at the row's width, so the no-overflow guarantee is unchanged. */
.mrow button.mi .mtip, .raterow button.mi .mtip { right:auto; margin-inline:0; text-align:left; }

/* ===== FightIQ Strike-Zone Body Map ===== */
.szmap { --sz-accent: var(--corner-red, #e63329); --sz-glow: var(--red-glow, rgba(230,38,47,.40)); }
.szmap-card { position:relative; background:var(--surface-card,#161b23); border:1px solid var(--border,rgba(255,255,255,.10)); border-radius:14px; overflow:hidden; }
.szmap-card::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 80% at 50% -12%, rgba(230,38,47,.10) 0%, transparent 58%); }

.szmap-head { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 18px 14px; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.szmap-eyebrow { font-family:var(--font-body,system-ui); font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3,#717d8c); display:flex; align-items:center; gap:8px; }
.szmap-eyebrow::before { content:''; width:16px; height:2px; background:var(--sz-accent); border-radius:2px; }
.szmap-title { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:22px; line-height:1.05; color:var(--fg-1,#f4f6f8); text-transform:uppercase; letter-spacing:.01em; margin:5px 0 0; }
.szmap-sub { font-family:var(--font-body,system-ui); font-size:12px; color:var(--fg-3,#717d8c); margin:4px 0 0; max-width:46ch; line-height:1.45; }

/* --- offence / defence toggle --- */
.szmap-toggle { display:inline-flex; padding:3px; gap:2px; background:var(--ink-850,#0b0e13); border:1px solid var(--line,rgba(255,255,255,.10)); border-radius:999px; }
.szmap-toggle button { appearance:none; border:0; background:transparent; cursor:pointer; padding:6px 15px; border-radius:999px; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:12.5px; letter-spacing:.10em; text-transform:uppercase; color:var(--fg-3,#717d8c); transition:color var(--dur,180ms) var(--ease-out,ease), background var(--dur,180ms) var(--ease-out,ease), box-shadow var(--dur,180ms) var(--ease-out,ease); }
.szmap-toggle button:hover { color:var(--fg-1,#f4f6f8); }
.szmap-toggle button[aria-pressed="true"] { color:#fff; background:var(--sz-accent); box-shadow:0 2px 10px rgba(230,38,47,.35); }
.szmap-toggle button:focus-visible { outline:none; box-shadow:0 0 0 2px var(--ink-850,#0b0e13), 0 0 0 4px var(--red-400,#ff3b46); }

/* --- layout --- */
.szmap-body { position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:6px 22px; padding:6px 18px 18px; align-items:center; }
@media (max-width:720px) { .szmap-body { grid-template-columns:1fr; gap:14px; padding:10px 14px 16px; } }

.szmap-stage { position:relative; display:flex; justify-content:center; }
.szmap-svg { width:100%; max-width:344px; height:auto; display:block; overflow:visible; }
.szmap-svg text { font-family:var(--font-display,'Saira Condensed',sans-serif); }

/* --- zones --- */
.szmap-base { fill:#1c222c; }
.szmap-heat { fill-opacity:0; transition:fill-opacity 760ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.szmap-edge { fill:none; stroke:rgba(255,255,255,.11); stroke-width:1.1; }
.szmap-zone.is-dom .szmap-edge { stroke:rgba(255,255,255,.24); }
/* The glow rides on the DOMINANT zone and has to survive the offence/defence toggle,
   which only swaps a class — so it is a CSS drop-shadow keyed to the instance accent,
   not an SVG <filter> baked into the markup at render time. It fades in with the fill
   because drop-shadow inherits the element's own fill-opacity. */
.szmap-zone.is-dom .szmap-heat { filter:drop-shadow(0 0 5px var(--sz-glow)); }
.szmap-spec { pointer-events:none; }
.szmap-contour { fill:none; stroke:rgba(255,255,255,.115); stroke-width:1; stroke-linecap:round; pointer-events:none; }
/* Arms carry NO data, so they are painted the same value as an unshaded zone. Anything
   darker turns them into the loudest shape on the card, which is backwards. */
.szmap-arm { fill:none; stroke:#212028; stroke-linecap:round; stroke-linejoin:round; }
.szmap-arm.up { stroke-width:15; }
.szmap-arm.fore { stroke-width:12; }
.szmap-arm-edge { fill:none; stroke:rgba(255,255,255,.10); stroke-linecap:round; stroke-linejoin:round; }
.szmap-arm-edge.up { stroke-width:16.6; }
.szmap-arm-edge.fore { stroke-width:13.6; }
.szmap-fist { fill:#212028; stroke:rgba(255,255,255,.10); stroke-width:1; }
.szmap-octa { fill:none; stroke:rgba(255,255,255,.085); stroke-width:1.2; }
.szmap-octa-in { fill:none; stroke:rgba(255,255,255,.03); stroke-width:1; }
.szmap-floor-edge { fill:none; stroke:rgba(255,255,255,.10); stroke-width:1; }

/* --- in-svg labels --- */
.szmap-lead { stroke:rgba(255,255,255,.20); stroke-width:1; }
.szmap-dot { fill:var(--sz-accent); }
.szmap-zone-name { font-size:12px; font-weight:800; letter-spacing:.15em; fill:var(--fg-2,#aeb8c4); }
.szmap-zone-pct { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:23px; font-weight:700; fill:var(--fg-1,#f4f6f8); }
.szmap-zone-sub { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10px; font-weight:500; fill:var(--fg-3,#717d8c); letter-spacing:.02em; }
.szmap-lg .szmap-zone-pct { fill:#fff; }

/* --- right-hand read panel --- */
.szmap-read { display:flex; flex-direction:column; gap:0; min-width:0; }
/* the derived read — the one interpreted thing on the card, labelled as such */
.szmap-verdict { margin:0 0 14px; padding:12px 14px; border-radius:10px; background:linear-gradient(180deg, rgba(230,38,47,.10), rgba(230,38,47,.03)); border:1px solid rgba(230,38,47,.22); border-left:3px solid var(--sz-accent); }
.szmap-verdict .szmap-vk { display:block; font-family:var(--font-body,system-ui); font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--sz-accent); margin-bottom:4px; }
.szmap-verdict b { display:block; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:20px; line-height:1.05; text-transform:uppercase; letter-spacing:.01em; color:var(--fg-1,#f4f6f8); }
.szmap-verdict small { display:block; font-family:var(--font-body,system-ui); font-size:11.5px; line-height:1.5; color:var(--fg-3,#717d8c); margin-top:5px; }
.szmap-readhead { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:8px; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.szmap-readhead b { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-2,#aeb8c4); }
.szmap-readhead span { font-family:var(--font-body,system-ui); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-4,#4b5563); }

.szmap-row { display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.szmap-row:last-of-type { border-bottom:none; }
.szmap-rlab { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:var(--fg-2,#aeb8c4); }
.szmap-track { position:relative; height:8px; border-radius:5px; background:var(--ink-850,#0b0e13); border:1px solid var(--line-soft,rgba(255,255,255,.06)); overflow:visible; }
.szmap-fill { position:absolute; inset:1px auto 1px 1px; width:0; border-radius:4px; background:linear-gradient(90deg, rgba(230,38,47,.55), var(--sz-accent)); transition:width 760ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.szmap-row.is-dom .szmap-fill { box-shadow:0 0 12px var(--sz-glow); }
.szmap-tick { position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; background:rgba(255,255,255,.34); border-radius:2px; }
.szmap-tick::after { content:''; position:absolute; left:50%; top:-4px; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:rgba(255,255,255,.45); }
.szmap-rval { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:13px; font-weight:700; color:var(--fg-1,#f4f6f8); min-width:52px; text-align:right; }
.szmap-acc { font-style:normal; color:var(--fg-4,#4b5563); }
.szmap-delta { display:block; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:9.5px; font-weight:500; margin-top:2px; color:var(--fg-4,#4b5563); }
.szmap-delta.up { color:var(--sz-accent); }
.szmap-delta.dn { color:var(--fg-3,#717d8c); }

/* --- range rail --- */
.szmap-range { margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); transition:opacity var(--dur,180ms) var(--ease-out,ease); }
.szmap-range.is-off { opacity:.25; }
.szmap-rangelab { font-family:var(--font-body,system-ui); font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-4,#4b5563); margin-bottom:7px; }
.szmap-rail { display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--ink-850,#0b0e13); border:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.szmap-seg { height:100%; width:0; transition:width 760ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.szmap-seg.distance { background:var(--sz-accent); }
.szmap-seg.clinch { background:rgba(230,38,47,.52); }
.szmap-seg.ground { background:rgba(230,38,47,.24); }
.szmap-rangekey { display:flex; gap:14px; flex-wrap:wrap; margin-top:7px; }
.szmap-rangekey i { display:inline-block; width:7px; height:7px; border-radius:2px; margin-right:5px; vertical-align:baseline; }
.szmap-rangekey span { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:9.5px; color:var(--fg-3,#717d8c); letter-spacing:.02em; }

/* --- footer / chips --- */
.szmap-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:11px 18px 13px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); background:rgba(0,0,0,.16); }
.szmap-note { font-family:var(--font-body,system-ui); font-size:11px; line-height:1.5; color:var(--fg-4,#4b5563); margin:0; max-width:70ch; }
.szmap-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font-family:var(--font-body,system-ui); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; border:1px solid var(--line,rgba(255,255,255,.10)); color:var(--fg-3,#717d8c); }
.szmap-chip.warn { color:var(--gold,#f5b32b); border-color:rgba(245,179,43,.34); background:rgba(245,179,43,.10); }
.szmap-chip.n { font-family:var(--font-mono,'JetBrains Mono',monospace); font-weight:600; letter-spacing:0; text-transform:none; }

/* --- empty state --- */
.szmap-empty { display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; padding:18px; }
@media (max-width:560px) { .szmap-empty { grid-template-columns:1fr; text-align:center; justify-items:center; } }
.szmap-empty .szmap-svg { max-width:150px; opacity:.30; }
.szmap-empty-t { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-2,#aeb8c4); margin:0 0 6px; }
.szmap-empty-p { font-family:var(--font-body,system-ui); font-size:12.5px; line-height:1.55; color:var(--fg-3,#717d8c); margin:0; max-width:52ch; }

/* --- H2H variant --- */
.szmap-h2h .szmap-body { grid-template-columns:1fr minmax(150px,190px) 1fr; gap:4px 14px; align-items:center; }
@media (max-width:760px) { .szmap-h2h .szmap-body { grid-template-columns:1fr; } }
.szmap-h2h .szmap-svg { max-width:220px; }
.szmap-corner { text-align:center; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:15px; text-transform:uppercase; letter-spacing:.02em; color:var(--fg-1,#f4f6f8); margin:0 0 2px; line-height:1.1; }
.szmap-corner small { display:block; font-family:var(--font-mono,'JetBrains Mono',monospace); font-weight:500; font-size:9.5px; letter-spacing:.04em; color:var(--fg-4,#4b5563); text-transform:none; margin-top:3px; }
.szmap-vsrow { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.szmap-vsrow:last-child { border-bottom:none; }
.szmap-vslab { text-align:center; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3,#717d8c); }
.szmap-vsv { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:15px; font-weight:700; color:var(--fg-2,#aeb8c4); }
.szmap-vsv.r { text-align:right; }
.szmap-vsv.win.r { color:var(--corner-red,#e63329); }
.szmap-vsv.win.b { color:#7fb0ff; }
.szmap-h2h .szmap-blue { --sz-accent:var(--corner-blue,#2e7df6); --sz-glow:rgba(46,125,246,.40); }

@media (prefers-reduced-motion: reduce) {
  .szmap-heat, .szmap-fill, .szmap-seg, .szmap-range { transition:none !important; }
  .szmap * { animation:none !important; }
}

@keyframes szmap-pulse-kf { 0%{opacity:0} 30%{opacity:.85} 100%{opacity:0} }
.szmap-pulsehalo { opacity:0; }
.szmap-pulse .szmap-pulsehalo { animation:szmap-pulse-kf 1500ms var(--ease-out,cubic-bezier(.22,1,.36,1)) 340ms 1; }

/* ===== FightIQ Takedown lane (takedown_view) ===== */
.tdmap { --td-accent: var(--corner-red, #e63329); --td-glow: var(--red-glow, rgba(230,38,47,.40)); }
.tdmap-card { position:relative; background:var(--surface-card,#161b23); border:1px solid var(--border,rgba(255,255,255,.10)); border-radius:14px; overflow:hidden; }
.tdmap-card::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 80% at 18% -10%, rgba(230,38,47,.10) 0%, transparent 58%); }
.tdmap-defs { position:absolute; width:0; height:0; overflow:hidden; }

.tdmap-head { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 18px 14px; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.tdmap-eyebrow { font-family:var(--font-body,system-ui); font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3,#717d8c); display:flex; align-items:center; gap:8px; }
.tdmap-eyebrow::before { content:''; width:16px; height:2px; background:var(--td-accent); border-radius:2px; }
.tdmap-title { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:22px; line-height:1.05; color:var(--fg-1,#f4f6f8); text-transform:uppercase; letter-spacing:.01em; margin:5px 0 0; }
.tdmap-sub { font-family:var(--font-body,system-ui); font-size:12px; color:var(--fg-3,#717d8c); margin:4px 0 0; max-width:48ch; line-height:1.45; }

/* --- offence / defence toggle (the strike map's control, same shape) --- */
.tdmap-toggle { display:inline-flex; padding:3px; gap:2px; background:var(--ink-850,#0b0e13); border:1px solid var(--line,rgba(255,255,255,.10)); border-radius:999px; }
.tdmap-toggle button { appearance:none; border:0; background:transparent; cursor:pointer; padding:6px 15px; border-radius:999px; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:12.5px; letter-spacing:.10em; text-transform:uppercase; color:var(--fg-3,#717d8c); transition:color var(--dur,180ms) var(--ease-out,ease), background var(--dur,180ms) var(--ease-out,ease), box-shadow var(--dur,180ms) var(--ease-out,ease); }
.tdmap-toggle button:hover { color:var(--fg-1,#f4f6f8); }
.tdmap-toggle button[aria-pressed="true"] { color:#fff; background:var(--td-accent); box-shadow:0 2px 10px rgba(230,38,47,.35); }
.tdmap-toggle button:focus-visible { outline:none; box-shadow:0 0 0 2px var(--ink-850,#0b0e13), 0 0 0 4px var(--red-400,#ff3b46); }

/* --- layout --- */
.tdmap-body { position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:6px 22px; padding:6px 18px 18px; align-items:center; }
@media (max-width:720px) { .tdmap-body { grid-template-columns:1fr; gap:14px; padding:10px 14px 16px; } }
.tdmap-stage { position:relative; display:flex; justify-content:center; }
.tdmap-svg { width:100%; max-width:344px; height:auto; display:block; overflow:visible; }
.tdmap-svg text { font-family:var(--font-display,'Saira Condensed',sans-serif); }

/* --- the lane --- */
.tdmap-hips { transition:opacity 760ms var(--ease-out,cubic-bezier(.22,1,.36,1)); filter:drop-shadow(0 0 6px var(--td-glow)); }
.tdmap-arc { stroke-dasharray:100; stroke-dashoffset:0; transition:stroke-dashoffset 900ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.tdmap-tip, .tdmap-stop { transition:opacity 420ms var(--ease-out,ease) 520ms; }
/* Only ONE lane is visible at a time; the toggle flips an attribute, it does not
   re-render. With scripting off the start mode is the mode that shows. */
.tdmap-lane { opacity:0; pointer-events:none; }
.tdmap-stage[data-tdmode="offense"] .tdmap-lane-off { opacity:1; }
.tdmap-stage[data-tdmode="defense"] .tdmap-lane-def { opacity:1; }
.tdmap-stage[data-tdmode="defense"] .tdmap-hips { opacity:.34 !important; filter:none; }
.tdmap-big { font-size:34px; font-weight:900; fill:var(--fg-1,#f4f6f8); letter-spacing:.01em; }
.tdmap-bigsub { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10px; font-weight:500; fill:var(--fg-4,#4b5563); letter-spacing:.06em; text-transform:uppercase; }

/* --- read panel --- */
.tdmap-read { display:flex; flex-direction:column; gap:0; min-width:0; }
.tdmap-verdict { margin:0 0 14px; padding:12px 14px; border-radius:10px; background:linear-gradient(180deg, rgba(230,38,47,.10), rgba(230,38,47,.03)); border:1px solid rgba(230,38,47,.22); border-left:3px solid var(--td-accent); }
.tdmap-verdict .tdmap-vk { display:block; font-family:var(--font-body,system-ui); font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--td-accent); margin-bottom:4px; }
.tdmap-verdict b { display:block; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:20px; line-height:1.05; text-transform:uppercase; letter-spacing:.01em; color:var(--fg-1,#f4f6f8); }
.tdmap-verdict small { display:block; font-family:var(--font-body,system-ui); font-size:11.5px; line-height:1.5; color:var(--fg-3,#717d8c); margin-top:5px; }
.tdmap-readhead { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:8px; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.tdmap-readhead b { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-2,#aeb8c4); }
.tdmap-readhead span { font-family:var(--font-body,system-ui); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-4,#4b5563); }

.tdmap-row { display:grid; grid-template-columns:96px 1fr auto; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.tdmap-row:last-child { border-bottom:none; }
.tdmap-rlab { display:flex; align-items:center; gap:6px; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-2,#aeb8c4); }
.tdmap-rank { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:9px; font-weight:600; letter-spacing:0; color:var(--fg-4,#4b5563); background:var(--ink-600,rgba(255,255,255,.06)); border-radius:4px; padding:1px 4px; }
.tdmap-track { position:relative; height:8px; border-radius:5px; background:var(--ink-850,#0b0e13); border:1px solid var(--line-soft,rgba(255,255,255,.06)); overflow:visible; }
.tdmap-fill { position:absolute; inset:1px auto 1px 1px; width:0; border-radius:4px; background:linear-gradient(90deg, rgba(230,38,47,.55), var(--td-accent)); transition:width 760ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.tdmap-tick { position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; background:rgba(255,255,255,.34); border-radius:2px; }
.tdmap-tick::after { content:''; position:absolute; left:50%; top:-4px; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:rgba(255,255,255,.45); }
.tdmap-rval { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:13px; font-weight:700; color:var(--fg-1,#f4f6f8); min-width:76px; text-align:right; }
.tdmap-delta { display:block; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:9.5px; font-weight:500; margin-top:2px; }
.tdmap-delta.up { color:var(--td-accent); }
.tdmap-delta.dn { color:var(--fg-3,#717d8c); }
.tdmap-row.is-na { grid-template-columns:96px 1fr auto; }
.tdmap-row.is-na .tdmap-rval b { color:var(--fg-4,#4b5563); font-weight:600; }
.tdmap-na { font-family:var(--font-body,system-ui); font-size:10.5px; line-height:1.45; color:var(--fg-4,#4b5563); }
.tdmap-scale { font-family:var(--font-body,system-ui); font-size:10.5px; line-height:1.5; color:var(--fg-4,#4b5563); margin:11px 0 0; }
.tdmap-mono { font-family:var(--font-mono,'JetBrains Mono',monospace); }

/* --- footer --- */
.tdmap-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:11px 18px 13px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); background:rgba(0,0,0,.16); }
.tdmap-note { font-family:var(--font-body,system-ui); font-size:11px; line-height:1.5; color:var(--fg-4,#4b5563); margin:0; max-width:74ch; }
.tdmap-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font-family:var(--font-body,system-ui); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; border:1px solid var(--line,rgba(255,255,255,.10)); color:var(--fg-3,#717d8c); }

/* --- empty state --- */
.tdmap-empty { display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; padding:18px; }
@media (max-width:560px) { .tdmap-empty { grid-template-columns:1fr; text-align:center; justify-items:center; } }
.tdmap-empty .tdmap-svg { max-width:150px; opacity:.30; }
.tdmap-empty-t { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-2,#aeb8c4); margin:0 0 6px; }
.tdmap-empty-p { font-family:var(--font-body,system-ui); font-size:12.5px; line-height:1.55; color:var(--fg-3,#717d8c); margin:0; max-width:52ch; }

/* --- H2H variant --- */
.tdmap-h2h .tdmap-body { grid-template-columns:1fr minmax(150px,200px) 1fr; gap:4px 14px; align-items:center; }
@media (max-width:760px) { .tdmap-h2h .tdmap-body { grid-template-columns:1fr; } }
.tdmap-h2h .tdmap-svg { max-width:220px; }
.tdmap-h2h .tdmap-big { font-size:30px; }
.tdmap-corner { text-align:center; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:15px; text-transform:uppercase; letter-spacing:.02em; color:var(--fg-1,#f4f6f8); margin:0 0 2px; line-height:1.1; overflow-wrap:anywhere; }
.tdmap-vsrow { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.tdmap-vsrow:last-child { border-bottom:none; }
.tdmap-vslab { text-align:center; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:10.5px; letter-spacing:.10em; text-transform:uppercase; color:var(--fg-3,#717d8c); }
.tdmap-vsv { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:14px; font-weight:700; color:var(--fg-2,#aeb8c4); }
.tdmap-vsv.r { text-align:right; }
.tdmap-vsv.win.r { color:var(--corner-red,#e63329); }
.tdmap-vsv.win.b { color:#7fb0ff; }
.tdmap-h2h .tdmap-blue { --td-accent:var(--corner-blue,#2e7df6); --td-glow:rgba(46,125,246,.40); }

@media (prefers-reduced-motion: reduce) {
  .tdmap-hips, .tdmap-arc, .tdmap-fill, .tdmap-tip, .tdmap-stop { transition:none !important; }
  .tdmap * { animation:none !important; }
}

/* ---- rank history: the career ladder ---- */
.rkh .rkh-wrap { position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:2px 0 10px; }
/* THE SCALE FLOOR IS WHY THIS IS LEGIBLE AT 360px, AND IT IS ARITHMETIC RATHER THAN
   TASTE. The ladder is one 900-unit viewBox. A phone card is about 280css px wide; left
   to shrink into that, a 16-unit label would render at 16 x 280/900 = 5px, which is not
   a small label, it is an unreadable one. So the SVG never renders narrower than 640css
   px and the wrapper scrolls instead — worst-case scale 0.711, smallest label 11.4px.
   It never renders wider than 900 either, so the labels stop growing on a desktop. */
.rkh .rkh-svg { display:block; width:100%; min-width:640px; max-width:900px; height:auto; }

.rkh-grid { stroke:var(--line-soft,rgba(255,255,255,.06)); stroke-width:1; }
.rkh-grid.on { stroke:var(--line,rgba(255,255,255,.10)); }
.rkh-xlab { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:15px; fill:var(--fg-4,#4b5563); }
.rkh-rowlab { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:19px; letter-spacing:.02em; text-transform:uppercase; fill:var(--fg-1,#f4f6f8); }
.rkh-rowmeta { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:13px; fill:var(--fg-4,#4b5563); }

/* the empty track IS "outside the table": near-transparent, so the absence of a band is
   visibly the absence of a ranking rather than a fill of its own. */
.rkh-track { fill:var(--line-soft,rgba(255,255,255,.06)); stroke:var(--line-soft,rgba(255,255,255,.06)); stroke-width:1; }

/* ONE HUE, THREE STEPS. Depth of rank reads as depth of colour, and no second hue is
   introduced anywhere on the card. Champion is the site's existing gold and sits above
   the three steps because a belt is not a rank. */
.rkh-band { stroke:none; }
.rkh-band.champ { fill:var(--gold,#f5b32b); fill-opacity:.62; }
.rkh-band.t5    { fill:var(--accent,#e6262f); fill-opacity:.82; }
.rkh-band.t10   { fill:var(--accent,#e6262f); fill-opacity:.50; }
.rkh-band.t15   { fill:var(--accent,#e6262f); fill-opacity:.26; }
.rkh-band.gap   { stroke:var(--line,rgba(255,255,255,.10)); stroke-width:1; }
.rkh-hatch { stroke:var(--fg-4,#4b5563); stroke-width:1.6; stroke-opacity:.55; }
.rkh-inband { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:14px; letter-spacing:.14em; fill:var(--ink-900,#07090d); fill-opacity:.72; }

.rkh-line-run { fill:none; stroke:var(--fg-1,#f4f6f8); stroke-opacity:.55; stroke-width:2.5; stroke-linecap:butt; }
.rkh-line-run.p4p { stroke:var(--fg-3,#717d8c); stroke-opacity:.7; }

.rkh-mark { stroke:var(--fg-2,#aeb8c4); stroke-width:1; stroke-dasharray:2 3; }
.rkh-marklab { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:700; font-size:14px; letter-spacing:.03em; text-transform:uppercase; fill:var(--fg-3,#717d8c); }

.rkh-hit { fill:transparent; }

.rkh-legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin:2px 0 14px; font-family:var(--font-body,system-ui); font-size:12px; color:var(--fg-3,#717d8c); }
.rkh-leg { display:inline-flex; align-items:center; gap:7px; }
.rkh-sw { width:20px; height:11px; border-radius:3px; flex:none; display:inline-block; background:var(--line-soft,rgba(255,255,255,.06)); }
.rkh-sw.champ { background:rgba(245,179,43,.62); }
.rkh-sw.t5    { background:rgba(230,38,47,.82); }
.rkh-sw.t10   { background:rgba(230,38,47,.50); }
.rkh-sw.t15   { background:rgba(230,38,47,.26); }
.rkh-sw.gap   { background:repeating-linear-gradient(45deg, transparent 0 3px, rgba(113,125,140,.75) 3px 5px); border:1px solid var(--line,rgba(255,255,255,.10)); }

.rkh-tiles { margin-top:2px; }
.rkh-tv { display:flex; flex-direction:column; gap:3px; }
.rkh-sub { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10.5px; color:var(--fg-4,#4b5563); letter-spacing:.02em; }
.rkh-cov { margin:14px 0 0; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:11px; color:var(--fg-3,#717d8c); }
.rkh-note { margin:8px 0 0; font-size:11.5px; line-height:1.55; color:var(--fg-4,#4b5563); max-width:74ch; }

/* the tooltip is PROGRESSIVE ENHANCEMENT. With no JS every band still carries its own
   <title>, which the browser shows unaided, so the fact is never behind the script. */
.rkh-tip { position:absolute; z-index:3; pointer-events:none; transform:translate(-50%,-100%); background:var(--ink-800,#11151c); border:1px solid var(--line-strong,rgba(255,255,255,.16)); border-radius:7px; padding:6px 9px; box-shadow:0 6px 20px rgba(0,0,0,.45); white-space:nowrap; }
.rkh-tip b { display:block; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:14px; letter-spacing:.03em; text-transform:uppercase; color:var(--fg-1,#f4f6f8); }
.rkh-tip i { display:block; font-style:normal; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:11px; color:var(--fg-3,#717d8c); margin-top:2px; }

/* ---- the wind-back. The SERVER renders the finished ladder; these classes are only
   ever applied BY THE SCRIPT, so a reader with no JS never meets a hidden chart. ---- */
.rkh-plot.rkh-wound { clip-path:inset(0 100% 0 0); }
.rkh-plot.rkh-play  { clip-path:inset(0 0 0 0); transition:clip-path 1100ms cubic-bezier(.22,.61,.36,1); }

@media (prefers-reduced-motion: reduce) {
  .rkh-plot { clip-path:none !important; transition:none !important; }
}

.bchip { display:inline-block; font-family:var(--font-display); text-transform:uppercase;
  font-size:9.5px; font-weight:800; letter-spacing:.06em; color:var(--gold);
  background:var(--gold-bg); padding:2px 7px; border-radius:5px; white-space:nowrap;
  vertical-align:middle; }
.bchip + .bchip { margin-left:4px; }
.bchip .bg { opacity:.7; margin-right:3px; font-weight:700; }
a.bchip { text-decoration:none; }
a.bchip:hover { background:rgba(245,179,43,0.24); }

/* THE BOX IS A FIXED SHAPE AND THE FRAME IS FITTED TO IT. Every mini-map on the
   estate is the same 26:9 letterbox, whatever the career inside it looks like, so the
   section never changes the height of the page it sits in — and a fighter with one
   hometown dot does not get a 700-pixel-tall map of Brazil, which is what a
   width:100%/height:auto SVG at 2:1 produced on the first pass. `frame()` squares
   every viewBox off to the same ratio, so `meet` fits it exactly with no letterboxing
   of its own. */
.fmapwrap { border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:var(--ink-900); margin-top:12px; max-width:820px;
  aspect-ratio:26/9; }
.fmapsvg { display:block; width:100%; height:100%; }
@supports not (aspect-ratio:1) { .fmapsvg { height:auto; } }
.fmland { fill:var(--ink-600); stroke:none; }
.fmd .k { stroke-width:0; }
.fmd-venue .k { fill:rgba(230,51,41,.8); stroke:#ff6a60; stroke-width:0; }
.fmd-gym .k { fill:rgba(46,125,246,.72); stroke:#7fb0ff; }
.fmd-home .k { fill:var(--gold); stroke:#ffd776; }
/* A camp or a hometown the gazetteer could only place to a COUNTRY is a hollow ring,
   never a filled dot — the same distinction /map draws, for the same reason: "somewhere
   in Brazil" and "in Rio" are different claims and a solid dot states the second. */
.fmd-country .k { fill:none; stroke-width:1.4; vector-effect:non-scaling-stroke;
  stroke-dasharray:3 3; }
.fmd.on .k { stroke:#fff; stroke-width:2; vector-effect:non-scaling-stroke; }
.fmaplist { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.fmrow { display:inline-flex; align-items:baseline; gap:8px; font-size:12.5px;
  color:var(--fg-2); border:1px solid var(--border); border-radius:8px;
  padding:6px 10px; background:var(--surface-card); }
a.fmrow:hover, a.fmrow:focus-visible { color:var(--fg-1);
  border-color:var(--border-strong); background:var(--surface-hover); }
.fmrow .sw { width:8px; height:8px; border-radius:50%; flex:none; align-self:center; }
.fmrow .nm { color:var(--fg-1); font-weight:600; }
.fmrow .nt { color:var(--fg-4); font-size:11px; font-family:var(--font-mono);
  white-space:nowrap; }
.fmapcred { color:var(--fg-4); font-size:11px; line-height:1.6; margin:10px 0 0; }
.fmapcred a { color:var(--fg-3); text-decoration:underline; }

/* the fighter-page fantasy block (#289). Same card furniture as the rest of the page —
   surface, border, radius — so it reads as one more section rather than a promo. */
.fanmini { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.fanmini li { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px;
              background:var(--surface-card); border:1px solid var(--border);
              border-radius:10px; padding:12px 14px; }
.fanmini li:hover { border-color:var(--border-strong); }
.fanmini .fmto { font-family:var(--font-display); text-transform:uppercase;
                 font-weight:800; font-size:14.5px; letter-spacing:.01em; color:var(--fg-1); }
.fanmini .fmto:hover { color:var(--red-400); }
.fanmini .fmmeta { color:var(--fg-3); font-size:12.5px; margin-left:auto; }
.fanmini .fmmeta a { color:var(--fg-2); }
.fanmini .fmmeta a:hover { color:var(--fg-1); }
@media (max-width:560px){ .fanmini .fmmeta { margin-left:0; width:100%; } }