/* FightIQ — bout (receipt) page stylesheet. GENERATED by gen_bout.py; do not edit by hand. Source: gen_site.PAGE_CSS + gen_fight.FIGHT_CSS + gen_bout.BOUT_CSS + tott_view.TOTT_CSS + roundzones_view.ROUNDZONES_CSS + scorecards_view.SCORECARDS_CSS + takedown_view.TAKEDOWN_CSS + oddschart_view.ODDSCHART_CSS + bonus_view.BONUS_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:28px 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); }
/* THE PAGE NAME, PROMOTED WHERE IT IS ALREADY WRITTEN (2026-09-08).
   Audited in-browser: the fight, event, fighter, compare-pair and 2026-bout
   templates carried NO h1 at all — roughly 13,500 of the estate's 14,072 pages
   had no primary heading, which is both the screen-reader landmark and the whole
   long-tail search surface. A fight page's name is 'A vs B', and the breadcrumb
   already ends with exactly that string, so that is the string that becomes the
   heading: same words, same place, `font:inherit` so it renders as the crumb it
   already was, and no visual change at any width.
   NOT the `.fmatch` versus block, which was the obvious candidate and is the
   wrong one — measured, its text content is 'Jean SilvaUFC 6-1 · Pro 17-3 VS
   Jose DelgadoUFC 4-1 · Pro 12-2', because the record lines live inside it. An
   h1 is read whole; a heading that recites two records is a worse heading than
   no h1 was, and pulling the records out of that grid would have been a redesign
   of the hero on 13,500 pages rather than an accessibility fix. */
h1.pgname { display:inline; font:inherit; color:inherit; margin:0; }

/* fight header */
.fhead { border-bottom:1px solid var(--border); background:radial-gradient(120% 100% at 50% 0%, rgba(230,38,47,.08), transparent 62%); }
.fhead .wrap { padding:22px 24px 28px; }
.fhead .wc { font-family:var(--font-display); text-transform:uppercase; font-weight:700; font-size:12.5px; letter-spacing:.06em; color:var(--fg-3); }
.fmatch { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; margin-top:12px; }
.fmatch .side { display:flex; align-items:center; gap:12px; min-width:0; }
.fmatch .side.blue { justify-content:flex-end; text-align:right; }
.fmatch .av { width:56px; height:56px; border-radius:50%; background:var(--ink-600); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--fg-2); flex:none; border:2px solid var(--corner-red); }
.fmatch .side.blue .av { border-color:var(--corner-blue); order:2; }
.fmatch .nm { font-family:var(--font-display); text-transform:uppercase; font-weight:900; font-size:clamp(20px,3vw,30px); letter-spacing:-.01em; line-height:1; }
.fmatch .nm a:hover { color:var(--red-400); }
.fmatch .rec { color:var(--fg-3); font-size:12.5px; margin-top:5px; }
/* a record we hold and will not publish, and the debutant with no register entry (#188).
   Quieter than the figures beside it and in the body face, so it cannot be read as one. */
.fmatch .rec .whn, .tott .whn { color:var(--fg-4); font-family:var(--font-body); font-style:italic; }
.fmatch .vs { font-family:var(--font-display); color:var(--fg-4); font-size:15px; font-weight:800; }

/* section shell */
.sec { padding:30px 0 4px; }
.sec > h2 { font-family:var(--font-display); text-transform:uppercase; font-weight:900; letter-spacing:-.01em; font-size:clamp(20px,3vw,26px); margin:0 0 4px; }
.sec .sub { 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:720px){ .grid2 { grid-template-columns:1fr; } }

/* AI overview */
.aiov { background:linear-gradient(180deg,var(--ink-700),var(--ink-800)); border:1px solid var(--border-strong); border-radius:14px; padding:22px 24px; position:relative; overflow:hidden; }
.aiov::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--corner-red),var(--corner-blue)); }
.aiov .lab { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:12px; letter-spacing:.08em; color:var(--red-400); margin-bottom:12px; }
.aiov p { color:var(--fg-1); font-size:16px; line-height:1.62; margin:0 0 10px; }
.aiov p b { color:#fff; }
.aiov .foot { color:var(--fg-4); font-size:11.5px; line-height:1.5; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }

/* prediction: confidence bar reuse + method/round bars */
.predtop { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.predtop .tier { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:11px; letter-spacing:.06em; padding:3px 8px; border-radius:6px; }
.predtop .tier.LOCK { background:var(--red-tint); color:var(--red-400); }
.predtop .tier.HIGH { background:var(--corner-blue-bg); color:#7fb0ff; }
.predtop .tier.STANDARD { background:var(--ink-600); color:var(--fg-2); }
.predtop .tier.TOSSUP { background:var(--ink-600); color:var(--fg-3); }
.predtop .call { font-size:15px; color:var(--fg-2); }
.predtop .call b { color:var(--fg-1); }
.cbar { height:38px; border-radius:8px; overflow:hidden; display:flex; background:var(--ink-600); }
.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; the name is the droppable half under 600px — see the
   note on the same rule in gen_site.PAGE_CSS. Both corners are named in the
   header directly above this bar. */
.cbar span { display:flex; align-items:center; font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:#fff; padding:0 12px; 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; } }

.dbar { margin:11px 0; }
.dbar .k { display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px; }
.dbar .k .lab { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em; color:var(--fg-2); font-size:12.5px; }
.dbar .k .v { font-family:var(--font-mono); color:var(--fg-1); }
.dbar .track { height:9px; border-radius:6px; background:var(--ink-600); overflow:hidden; }
.dbar .track i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--corner-blue),var(--red-500)); }
.metaline { display:flex; gap:22px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.metaline .cell .v { font-family:var(--font-display); font-weight:900; font-size:22px; }
.metaline .cell .l { color:var(--fg-3); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }

/* odds */
.oddsgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.obox { border:1px solid var(--border); border-radius:12px; padding:16px; background:var(--surface-card); }
.obox.pending { border-style:dashed; color:var(--fg-3); }
.obox .src { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:12px; letter-spacing:.05em; color:var(--fg-2); display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.obox .src .dot { width:7px; height:7px; }
.orow { display:flex; justify-content:space-between; align-items:center; margin:7px 0; font-size:14px; }
.orow .n { color:var(--fg-2); }
.orow .p { font-family:var(--font-mono); color:var(--fg-1); }
.obox .asof { color:var(--fg-4); font-size:11px; margin-top:10px; }
.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; }

/* props / stats tables */
.ptable { width:100%; border-collapse:collapse; font-size:13.5px; }
.ptable th, .ptable td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); }
.ptable th { font-family:var(--font-display); text-transform:uppercase; font-size:11px; letter-spacing:.05em; color:var(--fg-3); font-weight:700; }
.ptable td.mono, .ptable th.mono { font-family:var(--font-mono); text-align:right; }
.ptable td.our { color:var(--fg-1); font-weight:600; }
.ptable td.mkt { color:var(--fg-3); }

/* tale of the tape */
.tott { width:100%; border-collapse:collapse; }
.tott td { padding:11px 10px; border-bottom:1px solid var(--border); font-size:14px; }
.tott td.mid { text-align:center; font-family:var(--font-display); text-transform:uppercase; font-size:11px; letter-spacing:.06em; color:var(--fg-3); width:150px; }
.tott td.red { text-align:right; font-family:var(--font-mono); color:var(--fg-1); }
.tott td.blue { text-align:left; font-family:var(--font-mono); color:var(--fg-1); }
/* the full vitals table, folded under the living face-off (sec_tott_living). Closed by
   default and still in the markup, so nothing the table used to show is lost and a
   crawler still reads every row. */
.tottfull { margin-top:14px; }
.tottfull > summary { font-size:12px; color:var(--fg-3); cursor:pointer; font-family:var(--font-body); letter-spacing:.02em; }
.tottfull > summary:hover { color:var(--fg-2); }

/* stat H2H bars */
.h2h { margin:14px 0; }
.h2h .lab { text-align:center; font-family:var(--font-display); text-transform:uppercase; font-size:11.5px; letter-spacing:.05em; color:var(--fg-2); margin-bottom:5px; }
.h2h .bars { display:grid; grid-template-columns:1fr 54px 1fr; align-items:center; gap:8px; }
.h2h .val { font-family:var(--font-mono); font-size:12.5px; color:var(--fg-1); }
.h2h .val.r { text-align:right; }
.h2h .bar { height:8px; border-radius:6px; background:var(--ink-600); overflow:hidden; display:flex; }
.h2h .bar.r { justify-content:flex-end; }
.h2h .bar.r i { background:var(--corner-red); }
.h2h .bar.b i { background:var(--corner-blue); }
.h2h .bar i { display:block; height:100%; }
.h2h .mid { text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--fg-4); }

/* pending block */
.pending-block { border:1px dashed var(--border-strong); border-radius:12px; padding:22px; color:var(--fg-3); font-size:13.5px; line-height:1.6; }
.pending-block .pendtag { margin-bottom:10px; display:inline-block; }
.pending-block ul { margin:10px 0 0; padding-left:18px; }
.pending-block li { margin:3px 0; }

.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 / editorial prose */
.bioprose p { color:var(--fg-1); font-size:15px; line-height:1.66; margin:0 0 11px; max-width:72ch; }
.bioprose p:last-child { margin-bottom:0; }
.biocard { display:flex; flex-direction:column; }
.bioname { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:15px; letter-spacing:.01em; margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bioname a { color:var(--fg-1); }
.bioname a:hover { color:var(--red-400); }
.biokind { font-family:var(--font-display); text-transform:uppercase; font-size:9.5px; font-weight:800; letter-spacing:.06em; padding:3px 8px; border-radius:5px; }
.biokind.news { color:var(--red-400); background:var(--red-tint); }
.biokind.prof { color:var(--fg-3); background:var(--ink-600); }
.archchip { font-family:var(--font-display); text-transform:uppercase; font-size:9.5px; font-weight:800; letter-spacing:.06em; color:var(--fg-3); background:var(--ink-600); padding:3px 8px; border-radius:5px; }
.biofoot { color:var(--fg-4); font-size:11.5px; line-height:1.55; margin-top:auto; padding-top:12px; border-top:1px solid var(--border); }
.biofoot a { color:var(--red-400); font-weight:700; }
.facwrap { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.factitle { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:11px; letter-spacing:.07em; color:var(--fg-3); margin-bottom:8px; }
ul.factors { margin:0; padding-left:18px; }
ul.factors li { color:var(--fg-2); font-size:14px; line-height:1.55; margin:5px 0; }

/* related coverage */
.newslist { display:grid; gap:10px; }
.newsrow { display:block; background:var(--surface-card); border:1px solid var(--border); border-radius:12px; padding:14px 16px; transition:border-color .18s, transform .18s; }
.newsrow:hover { border-color:var(--border-strong); transform:translateY(-1px); }
.newsrow .nmeta { display:block; font-family:var(--font-mono); font-size:11px; color:var(--fg-4); text-transform:uppercase; letter-spacing:.05em; }
.newsrow .ntitle { display:block; font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:15px; color:var(--fg-1); margin-top:5px; line-height:1.2; }
.newsrow .ndek { display:block; color:var(--fg-3); font-size:13px; margin-top:5px; line-height:1.5; }

.mh2h { display:flex; flex-direction:column; gap:2px; }
.mh2h .mrowh { display:grid; grid-template-columns:1fr 190px 1fr; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.mh2h .mrowh:last-child { border-bottom:none; }
.mh2h .mrowh.iq { margin-top:6px; padding-top:15px; border-top:1px solid var(--border-strong); border-bottom:none; }
.mh2h .mlab { text-align:center; font-family:var(--font-display); text-transform:uppercase; font-size:11.5px; letter-spacing:.05em; color:var(--fg-2); line-height:1.3; }
.mh2h .mlab small { display:block; font-family:var(--font-body); text-transform:none; letter-spacing:0; color:var(--fg-4); font-size:10.5px; margin-top:3px; }
.mh2h .mrowh.iq .mlab { color:var(--red-400); font-size:12.5px; }
.mh2h .mside { display:flex; flex-direction:column; gap:5px; }
.mh2h .mside.r { align-items:flex-end; }
.mh2h .mside.b { align-items:flex-start; }
.mh2h .mv { font-family:var(--font-display); font-weight:900; font-size:19px; color:var(--fg-1); font-variant-numeric:tabular-nums; line-height:1; }
.mh2h .mv.na { font-size:12.5px; color:var(--fg-4); font-weight:700; }
.mh2h .mside.r.win .mv { color:var(--corner-red); }
.mh2h .mside.b.win .mv { color:#7fb0ff; }
.mh2h .mrowh.iq .mv { font-size:23px; }
.mh2h .mbar { width:100%; height:8px; border-radius:6px; background:var(--ink-600); overflow:hidden; display:flex; }
.mh2h .mside.r .mbar { justify-content:flex-end; }
.mh2h .mbar i { display:block; height:100%; }
.mh2h .mside.r .mbar i { background:var(--corner-red); opacity:.55; }
.mh2h .mside.b .mbar i { background:var(--corner-blue); opacity:.55; }
.mh2h .mside.win .mbar i { opacity:1; }
.mh2h .mbar.na { background:repeating-linear-gradient(45deg,var(--ink-600),var(--ink-600) 6px,var(--ink-700) 6px,var(--ink-700) 12px); }
.mh2h .lim { font-family:var(--font-display); text-transform:uppercase; font-style:normal; font-size:9px; font-weight:800; letter-spacing:.06em; color:var(--gold); background:var(--gold-bg); padding:1px 5px; border-radius:4px; }
.mh2h-names { display:grid; grid-template-columns:1fr 190px 1fr; gap:12px; margin-bottom:10px; font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:12.5px; letter-spacing:.04em; }
.mh2h-names .r { text-align:right; color:var(--corner-red); }
.mh2h-names .b { text-align:left; color:#7fb0ff; }
@media (max-width:640px){
  .mh2h .mrowh, .mh2h-names { grid-template-columns:1fr 110px 1fr; gap:8px; }
  .mh2h .mlab { font-size:10.5px; }
  .mh2h .mlab small { display:none; }
}

.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; }

/* line-movement chart (oddschart_view) — static SVG, no script */
.oc-card { background:var(--surface-card,#161b23); border:1px solid var(--border,rgba(255,255,255,.10)); border-radius:14px; padding:16px 18px 14px; }
.oc-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-bottom:10px; }
.oc-key { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--fg-2,#aeb8c4); }
.oc-key em { font-style:normal; color:var(--fg-4,#4b5563); }
.oc-sw { width:18px; height:0; border-top:3px solid currentColor; border-radius:2px; flex:none; }
.oc-sw.oc-red { color:var(--corner-red,#e63329); }
.oc-sw.oc-blue { color:var(--corner-blue,#2e7df6); }
.oc-sw.oc-solid { color:var(--fg-2,#aeb8c4); }
.oc-sw.oc-dashed { color:var(--fg-3,#717d8c); border-top-style:dashed; }
/* The chart is an 880-unit viewBox. Letting it shrink to a 360px phone would scale a
   10px tick to 4px — a chart nobody can read is worse than one you have to nudge. So
   below the breakpoint the drawing keeps a legible width and the FIGURE scrolls, the
   same treatment the data table gets. The page body itself never scrolls sideways. */
.oc-figure { margin:0; overflow-x:auto; overflow-y:hidden; }
.lm-svg { display:block; width:100%; height:auto; overflow:visible; }
@media (max-width:720px) { .lm-svg { width:760px; max-width:none; } }
.lm-svg text { font-family:var(--font-mono,'JetBrains Mono',monospace); }
.lm-grid { stroke:var(--line-soft,rgba(255,255,255,.06)); stroke-width:1; }
.lm-axis { stroke:var(--line,rgba(255,255,255,.10)); stroke-width:1; }
.lm-tick { fill:var(--fg-4,#4b5563); font-size:10px; }
.lm-line { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.lm-line.oc-red { stroke:var(--corner-red,#e63329); }
.lm-line.oc-blue { stroke:var(--corner-blue,#2e7df6); }
.lm-line.lm-dash { stroke-width:1.5; stroke-dasharray:4 4; opacity:.55; }
.lm-end.oc-red { fill:var(--corner-red,#e63329); }
.lm-end.oc-blue { fill:var(--corner-blue,#2e7df6); }
.lm-endring { fill:none; stroke:var(--surface-card,#161b23); stroke-width:2; }
.lm-svg text.lm-endlab { font-size:11.5px; font-weight:700; }
.lm-endlab.oc-red { fill:var(--corner-red,#e63329); }
.lm-endlab.oc-blue { fill:var(--corner-blue,#2e7df6); }
.lm-freezeline { stroke:var(--gold,#f5b32b); stroke-width:1.5; stroke-dasharray:3 3; opacity:.75; }
.lm-freezedot { fill:var(--gold,#f5b32b); }
.lm-freezering { fill:none; stroke:var(--surface-card,#161b23); stroke-width:2; }
/* `.lm-svg text` above sets the mono face for the ticks; this label is prose, so it
   needs the higher-specificity selector to win the face back. */
.lm-svg text.lm-freezelab { fill:var(--gold,#f5b32b); font-family:var(--font-display,'Saira Condensed',sans-serif); font-size:13px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.oc-read { font-size:13.5px; color:var(--fg-2,#aeb8c4); line-height:1.6; margin:12px 0 0; }
.oc-read b { color:var(--fg-1,#f4f6f8); }
.oc-table { margin-top:10px; }
.oc-table summary { font-size:11.5px; color:var(--fg-3,#717d8c); cursor:pointer; }
.oc-table summary:hover { color:var(--fg-2,#aeb8c4); }
.oc-tablewrap { overflow-x:auto; }
.oc-table table { width:100%; border-collapse:collapse; margin-top:8px; font-size:11.5px; }
.oc-table th, .oc-table td { text-align:left; padding:6px 9px; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); font-family:var(--font-mono,'JetBrains Mono',monospace); white-space:nowrap; }
.oc-table thead th { color:var(--fg-4,#4b5563); font-weight:700; letter-spacing:.04em; }
.oc-table tbody th { color:var(--fg-2,#aeb8c4); font-weight:600; white-space:normal; }
.oc-table td.v, .oc-table th.v { text-align:right; color:var(--fg-1,#f4f6f8); }
.oc-att { margin-top:12px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); padding-top:9px; font-size:10.5px; color:var(--fg-4,#4b5563); line-height:1.6; }
.oc-att b { color:var(--fg-3,#717d8c); }
.oc-att .mono { font-family:var(--font-mono,'JetBrains Mono',monospace); }
/* the settlement-truncation disclosure — quieter than the read, louder than the
   attribution line, because it changes what the numbers above it mean */
.oc-trunc { margin:9px 0 0; padding:8px 11px; border-left:2px solid var(--gold,#f5b32b); border-radius:0 8px 8px 0; background:var(--bg-raised,#11151c); font-size:11.5px; line-height:1.6; color:var(--fg-3,#717d8c); }
.oc-trunc .mono { font-family:var(--font-mono,'JetBrains Mono',monospace); color:var(--fg-2,#aeb8c4); }
/* "our number beside the market's" — one factual comparison, visually quiet */
.oc-ours { margin:10px 0 0; padding:10px 12px; border-radius:10px; border:1px solid var(--line,rgba(255,255,255,.10)); background:var(--bg-raised,#11151c); font-size:12.5px; line-height:1.6; color:var(--fg-2,#aeb8c4); }
.oc-ours b { color:var(--fg-1,#f4f6f8); }
.oc-ourswhy { display:block; margin-top:4px; font-size:11px; color:var(--fg-4,#4b5563); }
.oc-ourswhy a { color:var(--fg-3,#717d8c); text-decoration:underline; }

/* open -> close strip (no timeseries): HTML, not SVG, so long fighter names wrap and
   the lane never forces the page sideways at 380px. Two points, no line between. */
.oc-strip { padding:2px 0 0; }
.oc-slane { margin-bottom:16px; }
.oc-slane:last-of-type { margin-bottom:10px; }
.oc-sname { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:14.5px; text-transform:uppercase; letter-spacing:.02em; color:var(--fg-1,#f4f6f8); margin-bottom:7px; overflow-wrap:anywhere; }
.oc-smove { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:11px; font-weight:700; letter-spacing:0; text-transform:none; }
.oc-smove.up { color:var(--corner-red,#e63329); }
.oc-slane.b .oc-smove.up { color:var(--corner-blue,#2e7df6); }
.oc-smove.dn, .oc-smove.flat { color:var(--fg-4,#4b5563); }
.oc-strack { position:relative; height:14px; border-radius:7px; background:var(--ink-850,#0b0e13); border:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.oc-sbar { position:absolute; top:5px; height:4px; border-radius:2px; background:currentColor; opacity:.45; }
.oc-slane.r .oc-strack { color:var(--corner-red,#e63329); }
.oc-slane.b .oc-strack { color:var(--corner-blue,#2e7df6); }
.oc-sopen, .oc-sclose { position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; }
.oc-sopen { border:2px solid currentColor; background:var(--surface-card,#161b23); }
.oc-sclose { background:currentColor; box-shadow:0 0 0 2px var(--surface-card,#161b23); }
.oc-sfoot { display:flex; justify-content:space-between; gap:10px; margin-top:6px; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:11px; color:var(--fg-4,#4b5563); }
.oc-sfoot b { color:var(--fg-2,#aeb8c4); }
.oc-saxis { display:flex; justify-content:space-between; padding-top:6px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10px; color:var(--fg-4,#4b5563); }
.oc-skey { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:8px; font-size:11px; color:var(--fg-3,#717d8c); }
.oc-skey i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:baseline; }
.oc-kopen { border:2px solid var(--fg-3,#717d8c); }
.oc-kclose { background:var(--fg-2,#aeb8c4); }
.oc-nohist { border:1px dashed var(--border-strong,rgba(255,255,255,.16)); border-radius:14px; background:var(--bg-raised,#11151c); padding:16px 18px; }
.oc-nohist p { font-size:12.5px; color:var(--fg-3,#717d8c); line-height:1.6; margin:0; }
.oc-nohist .oc-why { color:var(--fg-4,#4b5563); }
.oc-nohist-sub { margin-top:6px !important; color:var(--fg-4,#4b5563) !important; font-size:11.5px !important; }
@media (max-width:560px) { .oc-card { padding:13px 12px 11px; } }

/* ---- bout (receipt) page ---- */
.bhead { border-bottom:1px solid var(--border); background:radial-gradient(120% 100% at 50% 0%, rgba(245,179,43,.07), transparent 62%); }
.bhead .wrap { padding:18px 24px 6px; }
.bp { padding:8px 0 8px; }

/* the receipt: our call beside the fight */
.receipt { display:grid; grid-template-columns:1fr auto 1fr; gap:0; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface-card); }
@media (max-width:760px) { .receipt { grid-template-columns:1fr; } }
.rcell { padding:18px 20px 20px; min-width:0; }
.rcell.call { background:linear-gradient(180deg, rgba(230,38,47,.07), transparent 70%); }
.rcell.fight { background:linear-gradient(180deg, rgba(245,179,43,.07), transparent 70%); }
.rsplit { width:1px; background:var(--border); }
@media (max-width:760px) { .rsplit { width:auto; height:1px; } }
.rlab { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:11px; letter-spacing:.14em; color:var(--fg-4); margin-bottom:10px; }
.rname { font-family:var(--font-display); text-transform:uppercase; font-weight:900; font-size:clamp(20px,3.4vw,30px); line-height:1.02; color:var(--fg-1); overflow-wrap:anywhere; }
.rline { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:9px; }
.rconf { font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--fg-1); }
.rmeta { margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); display:grid; gap:7px; }
.rmeta .m { display:flex; justify-content:space-between; gap:12px; font-size:12.5px; }
.rmeta .m span:first-child { color:var(--fg-3); }
.rmeta .m span:last-child { font-family:var(--font-mono); color:var(--fg-1); text-align:right; }

/* verdict banner — record-page marks, at receipt size */
.vbanner { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; padding:14px 18px; border-radius:12px; border:1px solid var(--border); background:var(--bg-raised,#11151c); }
.vbanner.win { border-color:rgba(45,190,120,.34); background:linear-gradient(90deg, rgba(45,190,120,.10), transparent 70%); }
.vbanner.loss { border-color:rgba(230,38,47,.30); background:linear-gradient(90deg, rgba(230,38,47,.10), transparent 70%); }
.vbanner .big { font-family:var(--font-display); text-transform:uppercase; font-weight:900; font-size:clamp(20px,3vw,28px); letter-spacing:.02em; line-height:1; }
.vbanner.win .big { color:var(--win); }
.vbanner.loss .big { color:var(--loss); }
.vbanner .say { font-size:13.5px; color:var(--fg-2); line-height:1.55; }
.vbanner .say b { color:var(--fg-1); }

/* identical to gen_record.RECORD_CSS */
.verdict { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:12px; letter-spacing:.04em; }
.verdict.win { color:var(--win); }
.verdict.loss { color:var(--loss); }
.verdict .dot { width:8px; height:8px; border-radius:50%; }
.verdict.win .dot { background:var(--win); }
.verdict.loss .dot { background:var(--loss); }
.mmark { font-size:11px; margin-left:5px; opacity:.8; cursor:help; }
.mmark.hit { color:var(--win); }
.mmark.miss { color:var(--loss); }
.rtier { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:10px; letter-spacing:.05em; padding:3px 7px; border-radius:5px; }
/* Same five-step ladder as .tier (gen_site) — LOW is an outline, not another grey fill,
   so MED and LOW are one glance apart here exactly as they are on picks.html. */
.rtier.LOCK { background:var(--red-tint); color:var(--red-400); }
.rtier.HIGH { background:var(--corner-blue-bg); color:#7fb0ff; }
.rtier.MED, .rtier.STANDARD { background:var(--ink-600); color:var(--fg-2); }
.rtier.LOW { background:transparent; color:var(--fg-3); box-shadow:inset 0 0 0 1px var(--border-strong); }
.rtier.TOSSUP { background:transparent; color:var(--fg-4); box-shadow:inset 0 0 0 1px var(--border); font-style:italic; }
/* a tier the mapper does not recognise must LOOK wrong, not like a mid pick */
.rtier.UNKNOWN { background:var(--red-500); color:#fff; }

/* The .soon placeholder rules that lived here are gone with the last placeholder
   (W5). Nothing on a bout page is "coming soon" any more — every section is either
   real or an honest, named absent state owned by the component that would have
   filled it. */

/* ---- TAPE-ONLY head (Phase 2B) ------------------------------------------------
   Every class here is deliberately NOT one of the receipt's (.receipt/.rcell/.vbanner/
   .verdict/.rtier/.mmark/#the-call). That is not tidiness: the build's cohort gate
   greps the WRITTEN HTML for those exact strings and fails if one appears on a page we
   published no call for, so the two vocabularies have to stay disjoint for the gate to
   mean anything. A shared class would make the gate pass by accident.

   The palette is the amber "record" side of the page, never the red "our call" side —
   a reader who has seen a receipt should be able to tell at a glance that this page is
   only the record. */
.tapehead { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface-card); margin:6px 0 4px; }
.tapehead .in { padding:18px 20px 20px; background:linear-gradient(180deg, rgba(245,179,43,.07), transparent 72%); }
.teyebrow { font-family:var(--font-body); text-transform:uppercase; font-weight:800; font-size:9.5px; letter-spacing:.16em; color:var(--fg-4); }
h1.tname { font-family:var(--font-display); text-transform:uppercase; font-weight:900; font-size:clamp(22px,4vw,36px); line-height:1.03; color:var(--fg-1); margin:8px 0 0; overflow-wrap:anywhere; }
/* THE RECEIPT PAGE'S h1 (2026-09-08). The tape-only bout page above has always
   had one; the 2026 receipt page had none — its header is a breadcrumb and its
   body is the receipt grid, whose two big names are 'our call' and 'the result',
   neither of which is the page's name. The bout's name is printed once, as the
   tail of the breadcrumb, so that is what gets promoted: same words, same place,
   `font:inherit` so it renders as the crumb it already was. Adding a second big
   heading above a receipt would have been a redesign, not an accessibility fix.
   Same class and same treatment as gen_fight / gen_compare. */
h1.pgname { display:inline; font:inherit; color:inherit; margin:0; }
.tres { margin-top:14px; padding-top:13px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; }
.tres .tk { font-family:var(--font-body); text-transform:uppercase; font-weight:800; font-size:9.5px; letter-spacing:.14em; color:var(--fg-4); }
.tres .tw { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:clamp(15px,2.2vw,20px); color:var(--fg-1); margin:5px 0 0; line-height:1.15; }
.tres .tw small { display:block; font-family:var(--font-body); text-transform:none; font-weight:400; font-size:12.5px; color:var(--fg-3); margin-top:4px; letter-spacing:0; }
.tmeta { display:flex; gap:20px; flex-wrap:wrap; }
.tmeta .k { font-family:var(--font-body); text-transform:uppercase; font-size:9px; font-weight:800; letter-spacing:.14em; color:var(--fg-4); }
.tmeta .v { font-family:var(--font-mono); font-size:14px; color:var(--fg-1); margin-top:3px; }
.tchips { display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.tchip { font-family:var(--font-body); font-size:11px; color:var(--fg-2); padding:4px 9px; border-radius:999px; border:1px solid var(--border); background:var(--ink-600,rgba(255,255,255,.03)); }
.tchip b { color:var(--fg-1); font-weight:700; }
.tnote { margin:12px 0 0; font-size:12px; line-height:1.6; color:var(--fg-3); }
.tnote b { color:var(--fg-2); }

/* onward links */
.blinks { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.blink { display:block; padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:var(--surface-card); }
.blink:hover { border-color:var(--border-strong,rgba(255,255,255,.16)); }
.blink .k { font-family:var(--font-body); text-transform:uppercase; font-size:9.5px; font-weight:800; letter-spacing:.14em; color:var(--fg-4); }
.blink .v { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:15px; color:var(--fg-1); margin-top:5px; line-height:1.15; overflow-wrap:anywhere; }
.backlink { display:inline-block; margin:22px 0 34px; color:var(--fg-2); font-size:13.5px; }
.backlink:hover { color:var(--fg-1); }

/* related bouts */
.rl-h { font-family:var(--font-body); text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.14em; color:var(--fg-3); margin:20px 0 10px; }
.rl-h:first-of-type { margin-top:4px; }

/* ===== FightIQ Living Tale of the Tape ===== */
/* The corner vars are declared on the CARD as well as the section: a caller is free
   to embed living_tott_block() in a wrapper of its own, and a var() with no fallback
   resolving to nothing is an invalid declaration, not a graceful one. */
.tvt, .tvt-card { --tvt-r: var(--corner-red,#e63329); --tvt-b: var(--corner-blue,#2e7df6); }
.tvt-card { position:relative; background:var(--surface-card,#161b23); border:1px solid var(--border,rgba(255,255,255,.10)); border-radius:16px; overflow:hidden; }

/* --- the face-off --- */
.tvt-faceoff { position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; background:var(--ink-850,#0b0e13); }
.tvt-side { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; min-height:clamp(190px,30vw,270px); padding:14px clamp(10px,2.4vw,22px) clamp(12px,2vw,18px); isolation:isolate; }
.tvt-side.blue { align-items:flex-end; text-align:right; }
/* the corner-tinted scrim: a wash from the outer edge, so the two portraits read as
   two corners of one cage rather than two cut-outs on a flat panel */
.tvt-side::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; }
/* The scrim does two jobs: tint the corner, and GUARANTEE the name is legible on top of
   a photograph nobody vetted. So it ramps to near-opaque from ~40% down, where the
   identity block actually sits, rather than only at the very bottom edge — at which
   point "RED CORNER" was being read off a fighter's chest. */
.tvt-side.red::before { background:radial-gradient(120% 90% at 6% 8%, rgba(230,38,47,.30) 0%, rgba(230,38,47,.07) 42%, transparent 72%), linear-gradient(180deg, transparent 10%, rgba(4,6,10,.58) 42%, rgba(4,6,10,.94) 80%); }
.tvt-side.blue::before { background:radial-gradient(120% 90% at 94% 8%, rgba(46,125,246,.30) 0%, rgba(46,125,246,.07) 42%, transparent 72%), linear-gradient(180deg, transparent 10%, rgba(4,6,10,.58) 42%, rgba(4,6,10,.94) 80%); }

/* The headshots are 160x160 cut-outs. The plate is capped just above that so the
   portrait never has to be blown up into mush; it bleeds off the top edge instead. */
.tvt-portrait { position:absolute; top:0; z-index:-1; width:clamp(120px,21vw,196px); height:clamp(120px,21vw,196px); display:flex; align-items:flex-end; justify-content:center; }
.tvt-side.red .tvt-portrait { left:clamp(4px,1.6vw,20px); }
.tvt-side.blue .tvt-portrait { right:clamp(4px,1.6vw,20px); }
.tvt-portrait img { width:100%; height:100%; object-fit:contain; object-position:bottom center; display:block; filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)); }
.tvt-mono { width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--ink-600,#1c222c); border:1px solid var(--line,rgba(255,255,255,.10)); font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:clamp(34px,6vw,56px); color:var(--fg-3,#717d8c); letter-spacing:.02em; }

/* text-shadow as well as the scrim: belt and braces on top of an arbitrary photograph */
.tvt-id { position:relative; z-index:1; min-width:0; text-shadow:0 1px 14px rgba(2,4,8,.92), 0 1px 3px rgba(2,4,8,.75); }
.tvt-corner { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body,system-ui); font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3,#717d8c); }
.tvt-corner::before { content:''; width:14px; height:2px; border-radius:2px; background:currentColor; }
.tvt-side.blue .tvt-corner { flex-direction:row-reverse; }
.tvt-side.red .tvt-corner { color:var(--tvt-r); }
.tvt-side.blue .tvt-corner { color:var(--tvt-b); }
.tvt-first { display:block; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:700; font-size:clamp(11px,2.1vw,15px); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2,#aeb8c4); margin-top:5px; }
.tvt-last { display:block; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:clamp(26px,6.4vw,58px); line-height:.92; letter-spacing:-.005em; text-transform:uppercase; color:var(--fg-1,#f4f6f8); overflow-wrap:anywhere; }
a.tvt-last { text-decoration:none; }
a.tvt-last:hover { color:#fff; }
.tvt-nick { display:block; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:700; font-size:clamp(11px,2vw,15px); letter-spacing:.05em; color:var(--gold,#f5b32b); margin-top:5px; }
.tvt-gym { display:block; font-family:var(--font-body,system-ui); font-size:11px; line-height:1.45; color:var(--fg-3,#717d8c); margin-top:5px; }

/* --- the centre column --- */
.tvt-centre { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:14px clamp(2px,1vw,10px); background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.10)); border-left:1px solid var(--line-soft,rgba(255,255,255,.06)); border-right:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.tvt-vs { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:clamp(15px,3vw,26px); letter-spacing:.06em; color:var(--fg-4,#4b5563); }
.tvt-ribbon { display:inline-block; padding:4px 10px; border-radius:999px; font-family:var(--font-body,system-ui); font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; border:1px solid var(--line,rgba(255,255,255,.10)); color:var(--fg-3,#717d8c); background:rgba(0,0,0,.30); }
.tvt-ribbon.settled { color:var(--gold,#f5b32b); border-color:rgba(245,179,43,.38); background:rgba(245,179,43,.10); }
.tvt-ribbon.upcoming { color:var(--tvt-r); border-color:rgba(230,38,47,.34); background:rgba(230,38,47,.10); }

/* --- meta strip under the face-off --- */
.tvt-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding:9px clamp(12px,2vw,18px); border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); background:rgba(0,0,0,.18); font-family:var(--font-body,system-ui); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3,#717d8c); }
.tvt-meta a { color:var(--fg-2,#aeb8c4); }
.tvt-meta b { color:var(--fg-2,#aeb8c4); font-weight:700; }

/* --- storyline bullets --- */
.tvt-story { list-style:none; margin:0; padding:14px clamp(12px,2vw,18px) 4px; display:grid; gap:9px; }
@media (min-width:760px) { .tvt-story { grid-template-columns:1fr 1fr; gap:9px 18px; } }
.tvt-storyhead { padding:14px clamp(12px,2vw,18px) 0; font-family:var(--font-body,system-ui); font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-4,#4b5563); }
.tvt-bul { position:relative; padding-left:13px; font-family:var(--font-body,system-ui); font-size:13px; line-height:1.5; color:var(--fg-2,#aeb8c4); }
.tvt-bul::before { content:''; position:absolute; left:0; top:7px; width:4px; height:4px; border-radius:50%; }
.tvt-bul.red::before { background:var(--tvt-r); }
.tvt-bul.blue::before { background:var(--tvt-b); }
.tvt-bul b { color:var(--fg-1,#f4f6f8); font-weight:700; }

/* --- the advantage ladder --- */
.tvt-ladder { padding:10px clamp(8px,2vw,14px) 6px; }
.tvt-lrow { display:grid; grid-template-columns:1fr minmax(76px,116px) 1fr; align-items:center; gap:6px; padding:9px 4px; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.tvt-lrow:last-child { border-bottom:none; }
.tvt-llab { text-align:center; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-4,#4b5563); }
.tvt-lv { display:flex; align-items:center; gap:8px; min-width:0; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:clamp(12px,2.2vw,15px); font-weight:600; color:var(--fg-2,#aeb8c4); }
/* Both VALUES hug the centre label, so the eye compares two numbers a few characters
   apart instead of two numbers at opposite ends of a wide card; the tick and chip sit
   OUTSIDE them, on the corner's own side. The cell's DOM order is fixed (tick, chip,
   text) so a screen reader always hears the mark before the value it qualifies —
   `row-reverse` on the blue side mirrors the painting, not the reading order. */
.tvt-lv.red { flex-direction:row; justify-content:flex-end; text-align:right; }
.tvt-lv.blue { flex-direction:row-reverse; justify-content:flex-end; text-align:left; }
.tvt-lv .tvt-txt { min-width:0; overflow-wrap:anywhere; }
.tvt-lv .tvt-sub { display:block; font-size:9.5px; font-weight:500; color:var(--fg-4,#4b5563); margin-top:2px; }
/* the tick bar: a corner-coloured rule on the OUTER edge of the winning value */
.tvt-lv.win { color:var(--fg-1,#f4f6f8); font-weight:700; }
.tvt-lv.win .tvt-tick { flex:none; width:3px; align-self:stretch; min-height:20px; border-radius:2px; }
.tvt-lv.red.win .tvt-tick { background:var(--tvt-r); box-shadow:0 0 8px rgba(230,38,47,.45); }
.tvt-lv.blue.win .tvt-tick { background:var(--tvt-b); box-shadow:0 0 8px rgba(46,125,246,.45); }
.tvt-chip { flex:none; padding:2px 7px; border-radius:999px; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10px; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.tvt-lv.red .tvt-chip { color:var(--tvt-r); background:rgba(230,38,47,.13); border:1px solid rgba(230,38,47,.30); }
.tvt-lv.blue .tvt-chip { color:#7fb0ff; background:rgba(46,125,246,.13); border:1px solid rgba(46,125,246,.30); }

/* --- footer --- */
.tvt-foot { padding:11px clamp(12px,2vw,18px) 13px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); background:rgba(0,0,0,.16); font-family:var(--font-body,system-ui); font-size:10.5px; line-height:1.6; color:var(--fg-4,#4b5563); }
.tvt-foot b { color:var(--fg-3,#717d8c); font-weight:700; }

/* --- motion. `.tvt-anim` is added by SCRIPT ONLY: with JS off none of these apply
       and the server-rendered final state is what the reader gets. --- */
.tvt-anim .tvt-id { opacity:0; transform:translateY(10px); transition:opacity 600ms var(--ease-out,cubic-bezier(.22,1,.36,1)), transform 600ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.tvt-anim .tvt-id.is-in { opacity:1; transform:none; }
.tvt-anim .tvt-bul { opacity:0; transform:translateY(6px); transition:opacity 520ms var(--ease-out,cubic-bezier(.22,1,.36,1)), transform 520ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.tvt-anim .tvt-bul.is-in { opacity:1; transform:none; }
.tvt-anim .tvt-lrow { opacity:0; transition:opacity 520ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.tvt-anim .tvt-lrow.is-in { opacity:1; }
.tvt-anim .tvt-lrow .tvt-lv { transform:translateX(var(--tvt-slide,0)); transition:transform 560ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.tvt-anim .tvt-lrow .tvt-lv.red { --tvt-slide:-14px; }
.tvt-anim .tvt-lrow .tvt-lv.blue { --tvt-slide:14px; }
.tvt-anim .tvt-lrow.is-in .tvt-lv { transform:none; }
.tvt-anim .tvt-chip, .tvt-anim .tvt-tick { opacity:0; transform:scale(.55); transition:opacity 320ms var(--ease-out,cubic-bezier(.22,1,.36,1)), transform 420ms cubic-bezier(.2,1.5,.4,1); }
.tvt-anim .tvt-lrow.is-in .tvt-chip, .tvt-anim .tvt-lrow.is-in .tvt-tick { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  .tvt-anim .tvt-id, .tvt-anim .tvt-bul, .tvt-anim .tvt-lrow,
  .tvt-anim .tvt-lv, .tvt-anim .tvt-chip, .tvt-anim .tvt-tick {
    opacity:1 !important; transform:none !important; transition:none !important; }
  .tvt * { animation:none !important; }
}

/* --- narrow: the face-off stays a face-off (that is the whole point), it just
       tightens. Nothing here may make the page scroll sideways. --- */
@media (max-width:560px) {
  .tvt-side { min-height:170px; padding:12px 8px 10px; }
  .tvt-gym { display:none; }
  .tvt-centre { padding:10px 2px; }
  .tvt-lrow { grid-template-columns:1fr minmax(58px,86px) 1fr; gap:4px; padding:8px 2px; }
  .tvt-llab { font-size:9px; letter-spacing:.08em; }
  .tvt-lv { gap:5px; }
  .tvt-chip { padding:1px 5px; font-size:9px; }
}

/* ===== FightIQ Round-by-Round Timeline ===== */
.rz-card { position:relative; background:var(--surface-card,#161b23); border:1px solid var(--border,rgba(255,255,255,.10)); border-radius:14px; overflow:hidden; }
.rz-defs { position:absolute; width:0; height:0; overflow:hidden; }

.rz-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:15px 18px 13px; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.rz-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; }
.rz-eyebrow::before { content:''; width:16px; height:2px; background:var(--corner-red,#e63329); border-radius:2px; }
.rz-title { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:21px; line-height:1.05; color:var(--fg-1,#f4f6f8); text-transform:uppercase; margin:5px 0 0; }
.rz-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* --- round scrubber + cumulative toggle (revealed by JS; hidden markup otherwise) --- */
.rz-scrub, .rz-mode { 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; }
.rz-scrub[hidden], .rz-mode[hidden] { display:none; }
.rz-scrub button, .rz-mode button { appearance:none; border:0; background:transparent; cursor:pointer; padding:6px 13px; 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); }
.rz-scrub button:hover, .rz-mode button:hover { color:var(--fg-1,#f4f6f8); }
.rz-scrub button[aria-selected="true"] { color:#fff; background:var(--corner-red,#e63329); box-shadow:0 2px 10px rgba(230,38,47,.35); }
.rz-mode button[aria-pressed="true"] { color:var(--ink-850,#0b0e13); background:var(--gold,#f5b32b); }
.rz-scrub button:focus-visible, .rz-mode button:focus-visible { outline:none; box-shadow:0 0 0 2px var(--ink-850,#0b0e13), 0 0 0 4px var(--red-400,#ff3b46); }
.rz-scrub button .rz-kdot { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--gold,#f5b32b); margin-left:5px; vertical-align:middle; }

/* --- one round --- */
.rz-round { padding:16px 18px 18px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.rz-round:first-child { border-top:none; }
.rz-card.rz-tabbed .rz-round { display:none; }
.rz-card.rz-tabbed .rz-round.is-on { display:block; border-top:none; }
@keyframes rz-fade-kf { from { opacity:0; transform:translateY(5px) } to { opacity:1; transform:none } }
.rz-card.rz-tabbed.rz-anim .rz-round.is-on { animation:rz-fade-kf 300ms var(--ease-out,cubic-bezier(.22,1,.36,1)) both; }

.rz-rlab { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0 0 12px; }
.rz-rn { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; text-transform:uppercase; font-size:15px; letter-spacing:.05em; color:var(--fg-1,#f4f6f8); }
.rz-rmeta { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10.5px; color:var(--fg-4,#4b5563); letter-spacing:.02em; }
.rz-flag { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px; font-family:var(--font-body,system-ui); font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.rz-flag.kd { color:var(--gold,#f5b32b); background:var(--gold-bg,rgba(245,179,43,.14)); border:1px solid rgba(245,179,43,.34); }
.rz-flag.kd.r { color:var(--corner-red,#e63329); background:var(--corner-red-bg,rgba(230,51,41,.16)); border-color:rgba(230,51,41,.34); }
.rz-flag.kd.b { color:#7fb0ff; background:var(--corner-blue-bg,rgba(46,125,246,.16)); border-color:rgba(46,125,246,.34); }
.rz-flag.sub { color:var(--fg-2,#aeb8c4); border:1px solid var(--line,rgba(255,255,255,.10)); }
.rz-flag.end { color:var(--fg-2,#aeb8c4); background:var(--ink-600,#1d2530); border:1px solid var(--line,rgba(255,255,255,.10)); }
@keyframes rz-flash-kf { 0%{ box-shadow:0 0 0 0 rgba(245,179,43,.55) } 70%{ box-shadow:0 0 0 9px rgba(245,179,43,0) } 100%{ box-shadow:0 0 0 0 rgba(245,179,43,0) } }
.rz-card.rz-anim .rz-round.is-on .rz-flag.kd { animation:rz-flash-kf 1400ms var(--ease-out,cubic-bezier(.22,1,.36,1)) 240ms 1; }

/* --- the silhouette pair --- */
.rz-stage { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:end; margin-bottom:6px; }
.rz-fig { min-width:0; margin:0; }
.rz-corner { text-align:center; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:.02em; color:var(--fg-1,#f4f6f8); margin:0 0 2px; line-height:1.12; overflow-wrap:anywhere; }
.rz-corner.r { color:var(--corner-red,#e63329); }
.rz-corner.b { color:#7fb0ff; }
.rz-corner small { display:block; font-family:var(--font-mono,'JetBrains Mono',monospace); font-weight:500; font-size:9.5px; letter-spacing:.03em; color:var(--fg-4,#4b5563); text-transform:none; margin-top:2px; }
.rz-svg { width:100%; max-width:224px; height:auto; display:block; margin:0 auto; overflow:visible; }
.rz-svg text { font-family:var(--font-display,'Saira Condensed',sans-serif); }
.rz-heat { opacity:0; transition:opacity 720ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.rz-lead { stroke:rgba(255,255,255,.20); stroke-width:1; }
.rz-zn { font-size:12px; font-weight:800; letter-spacing:.14em; fill:var(--fg-3,#717d8c); }
.rz-zp { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:21px; font-weight:700; fill:var(--fg-1,#f4f6f8); }
.rz-zs { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10.5px; font-weight:500; fill:var(--fg-3,#717d8c); letter-spacing:.02em; }
.rz-nothing { font-family:var(--font-body,system-ui); font-size:10.5px; text-align:center; color:var(--fg-4,#4b5563); margin:2px 0 0; }

/* --- the head-to-head ledger --- */
.rz-rows { margin-top:10px; }
.rz-row { display:grid; grid-template-columns:1fr 104px 1fr; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.rz-row:last-child { border-bottom:none; }
.rz-lab { text-align:center; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--fg-3,#717d8c); line-height:1.2; }
.rz-side { min-width:0; }
.rz-side.r { text-align:right; }
.rz-v { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:14px; font-weight:700; color:var(--fg-2,#aeb8c4); white-space:nowrap; }
.rz-side.lead .rz-v { color:var(--fg-1,#f4f6f8); }
.rz-side.r.lead .rz-v { color:var(--corner-red,#e63329); }
.rz-side.b.lead .rz-v { color:#7fb0ff; }
.rz-v em { font-style:normal; font-size:11px; color:var(--fg-4,#4b5563); }
.rz-bar { position:relative; height:7px; margin-top:5px; border-radius:4px; background:var(--ink-850,#0b0e13); border:1px solid var(--line-soft,rgba(255,255,255,.06)); overflow:hidden; }
.rz-bar i { position:absolute; top:0; bottom:0; width:0; border-radius:3px; transition:width 720ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.rz-side.r .rz-bar i { right:0; background:linear-gradient(270deg, var(--corner-red,#e63329), rgba(230,51,41,.45)); }
.rz-side.b .rz-bar i { left:0; background:linear-gradient(90deg, var(--corner-blue,#2e7df6), rgba(46,125,246,.45)); }

/* --- position rail (distance / clinch / ground) --- */
.rz-pos { display:grid; grid-template-columns:1fr 104px 1fr; align-items:center; gap:8px; padding:11px 0 2px; margin-top:2px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.rz-rail { display:flex; height:9px; border-radius:5px; overflow:hidden; background:var(--ink-850,#0b0e13); border:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.rz-seg { height:100%; }
.rz-side.r .rz-seg.distance { background:var(--corner-red,#e63329); }
.rz-side.r .rz-seg.clinch { background:rgba(230,51,41,.52); }
.rz-side.r .rz-seg.ground { background:rgba(230,51,41,.24); }
.rz-side.b .rz-seg.distance { background:var(--corner-blue,#2e7df6); }
.rz-side.b .rz-seg.clinch { background:rgba(46,125,246,.52); }
.rz-side.b .rz-seg.ground { background:rgba(46,125,246,.24); }
.rz-poskey { display:flex; gap:9px; flex-wrap:wrap; margin-top:6px; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:9px; color:var(--fg-4,#4b5563); }
.rz-side.r .rz-poskey { justify-content:flex-end; }
.rz-poskey i { display:inline-block; width:6px; height:6px; border-radius:2px; margin-right:4px; }

/* --- foot / absent --- */
.rz-foot { padding:11px 18px 13px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); background:rgba(0,0,0,.16); font-family:var(--font-body,system-ui); font-size:11px; line-height:1.55; color:var(--fg-4,#4b5563); margin:0; }
.rz-absent { padding:18px; }
.rz-absent-t { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-2,#aeb8c4); margin:0 0 6px; }
.rz-absent-p { font-family:var(--font-body,system-ui); font-size:12.5px; line-height:1.6; color:var(--fg-3,#717d8c); margin:0; max-width:64ch; }

/* The in-SVG labels are drawn in USER UNITS, so they shrink with the figure. Squeezing
   two 224px figures into a phone leaves the "8 of 8" line at about four physical pixels.
   Between 720px and 560px the type is scaled up to compensate; below that the pair
   STACKS, each figure gets the full column, and the base sizes are legible again. */
@media (max-width:720px) {
  .rz-stage { gap:4px; }
  .rz-svg { max-width:100%; }
  .rz-zp { font-size:30px; }
  .rz-zn { font-size:17px; }
  .rz-zs { font-size:15px; }
  .rz-row, .rz-pos { grid-template-columns:1fr 74px 1fr; gap:5px; }
  .rz-lab { font-size:9px; letter-spacing:.06em; }
  .rz-v { font-size:12.5px; }
  .rz-round { padding:14px 12px 16px; }
  .rz-head { padding:13px 12px 11px; }
  .rz-foot { padding:10px 12px 12px; }
}
@media (max-width:560px) {
  .rz-stage { grid-template-columns:1fr; gap:14px; }
  .rz-svg { max-width:300px; }
  .rz-zp { font-size:21px; }
  .rz-zn { font-size:12px; }
  .rz-zs { font-size:10.5px; }
}
@media (max-width:380px) {
  .rz-row, .rz-pos { grid-template-columns:1fr 60px 1fr; }
  .rz-v { font-size:11.5px; }
  .rz-v em { font-size:10px; }
  .rz-poskey { gap:4px 9px; }
  .rz-scrub button, .rz-mode button { padding:5px 9px; font-size:11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .rz-heat, .rz-bar i { transition:none !important; }
  .rz-card * { animation:none !important; }
}

/* ===== FightIQ Judges' Scorecards ===== */
.sc-card { background:var(--surface-card,#161b23); border:1px solid var(--border,rgba(255,255,255,.10)); border-radius:14px; overflow:hidden; }
.sc-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:15px 18px 13px; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.sc-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; }
.sc-eyebrow::before { content:''; width:16px; height:2px; background:var(--gold,#f5b32b); border-radius:2px; }
.sc-title { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:21px; line-height:1.05; color:var(--fg-1,#f4f6f8); text-transform:uppercase; margin:5px 0 0; }
.sc-ref { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10.5px; color:var(--fg-4,#4b5563); }
.sc-body { padding:14px 18px 16px; }
.sc-blk { margin-top:20px; }
.sc-blk:first-child { margin-top:0; }
.sc-blab { font-family:var(--font-body,system-ui); font-size:9.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-4,#4b5563); margin:0 0 9px; }

/* --- corner key --- */
.sc-key { display:flex; gap:16px; flex-wrap:wrap; margin:0 0 10px; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; }
.sc-key span { display:inline-flex; align-items:center; gap:6px; color:var(--fg-2,#aeb8c4); }
.sc-key i { width:9px; height:9px; border-radius:2px; display:inline-block; }
.sc-key i.r { background:var(--corner-red,#e63329); }
.sc-key i.b { background:var(--corner-blue,#2e7df6); }

/* --- the grid --- */
.sc-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.sc-grid { width:100%; min-width:340px; border-collapse:collapse; }
/* the totals-only table is two columns; stretched across a desktop page it puts a
   judge's name and his score at opposite ends of a metre of empty table */
.sc-wrap.narrow table.sc-grid { max-width:440px; min-width:0; }
.sc-grid th, .sc-grid td { padding:9px 6px; text-align:center; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.sc-grid thead th { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-4,#4b5563); border-bottom:1px solid var(--line,rgba(255,255,255,.10)); }
.sc-grid tbody tr:last-child td { border-bottom:none; }
.sc-jn { text-align:left !important; min-width:118px; }
.sc-jn b { display:block; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:13px; color:var(--fg-1,#f4f6f8); letter-spacing:.01em; line-height:1.2; }
.sc-jt { display:block; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:9px; color:var(--fg-4,#4b5563); margin-top:3px; letter-spacing:.01em; }
.sc-cell { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:13px; font-weight:700; color:var(--fg-3,#717d8c); white-space:nowrap; }
.sc-cell.r { color:var(--corner-red,#e63329); background:rgba(230,51,41,.07); }
.sc-cell.b { color:#7fb0ff; background:rgba(46,125,246,.07); }
.sc-cell.even { color:var(--fg-3,#717d8c); }
.sc-tot { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:14px; font-weight:700; color:var(--fg-2,#aeb8c4); white-space:nowrap; }
.sc-tot .w { display:inline-block; padding:2px 8px; border-radius:999px; color:var(--fg-1,#f4f6f8); }
.sc-tot .w.r { border:1px solid var(--corner-red,#e63329); background:var(--corner-red-bg,rgba(230,51,41,.16)); }
.sc-tot .w.b { border:1px solid var(--corner-blue,#2e7df6); background:var(--corner-blue-bg,rgba(46,125,246,.16)); }

/* --- warning mark: never silent --- */
.sc-warn { color:var(--gold,#f5b32b); font-size:11px; margin-left:5px; cursor:help; }
.sc-note { display:flex; gap:8px; align-items:flex-start; margin:11px 0 0; padding:10px 12px; border-radius:9px; border:1px solid rgba(245,179,43,.28); background:var(--gold-bg,rgba(245,179,43,.14)); }
.sc-note i { font-style:normal; color:var(--gold,#f5b32b); font-size:12px; line-height:1.5; }
.sc-note p { margin:0; font-family:var(--font-body,system-ui); font-size:11.5px; line-height:1.55; color:var(--fg-2,#aeb8c4); }

/* --- the per-round judges strip, rendered INTO a roundzones_view round panel ---
   It is styled here because this module writes it and owns what it means; it is
   POSITIONED by the panel it lands in, so it declares only its own internals plus the
   rule that separates it from the ledger above it. Both asset blocks are emitted on
   every bout page, so there is no page on which one is present without the other. */
.sc-jr { display:flex; align-items:center; gap:9px 15px; flex-wrap:wrap; margin:13px 0 0; padding:11px 0 0; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.sc-jr-lab { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-4,#4b5563); white-space:nowrap; }
/* flex:0 0 auto is load-bearing, not tidiness. As a shrinkable flex item the judge is
   squeezed into whatever the label left on the line and its nowrap name and pill then
   overflow the panel — at 380px the first judge's score was cut off by the card edge.
   Refusing to shrink makes it WRAP to the next line, which is what the strip is for. */
.sc-jr-j { display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; }
.sc-jr-j b { font-family:var(--font-body,system-ui); font-weight:600; font-size:11.5px; color:var(--fg-2,#aeb8c4); white-space:nowrap; overflow-wrap:anywhere; }
.sc-jr-s { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:12.5px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; color:var(--fg-3,#717d8c); background:var(--ink-850,#0b0e13); border:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.sc-jr-s.r { color:var(--corner-red,#e63329); background:rgba(230,51,41,.11); border-color:rgba(230,51,41,.30); }
.sc-jr-s.b { color:#7fb0ff; background:rgba(46,125,246,.11); border-color:rgba(46,125,246,.30); }
.sc-jr-chip { flex:1 1 auto; min-width:0; font-family:var(--font-body,system-ui); font-size:11px; line-height:1.5; color:var(--fg-4,#4b5563); max-width:62ch; }
.sc-jr-ptr { font-family:var(--font-body,system-ui); font-size:11.5px; line-height:1.55; color:var(--fg-3,#717d8c); margin:10px 0 0; max-width:70ch; }

/* --- media strip --- */
.sc-media { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:7px; }
.sc-m { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 11px; border:1px solid var(--line-soft,rgba(255,255,255,.06)); border-radius:9px; background:var(--ink-850,#0b0e13); }
.sc-m .who { font-family:var(--font-body,system-ui); font-size:11.5px; color:var(--fg-2,#aeb8c4); line-height:1.3; overflow-wrap:anywhere; }
.sc-m .sco { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:12.5px; font-weight:700; white-space:nowrap; }
.sc-m .sco.r { color:var(--corner-red,#e63329); }
.sc-m .sco.b { color:#7fb0ff; }
.sc-m .sco.even { color:var(--fg-3,#717d8c); }
.sc-more { appearance:none; margin-top:9px; padding:7px 14px; border-radius:999px; border:1px solid var(--line,rgba(255,255,255,.10)); background:transparent; color:var(--fg-2,#aeb8c4); cursor:pointer; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; }
.sc-more:hover { color:var(--fg-1,#f4f6f8); border-color:var(--line-strong,rgba(255,255,255,.16)); }
.sc-more[hidden] { display:none; }
.sc-m.is-hid { display:none; }

/* --- fan vote --- */
.sc-fanbar { display:flex; height:12px; border-radius:6px; overflow:hidden; background:var(--ink-850,#0b0e13); border:1px solid var(--line-soft,rgba(255,255,255,.06)); }
/* the hairline is what makes a bar of five red segments read as five scores rather
   than one block: a card where every voter picked the same fighter is the common case */
.sc-fanseg { height:100%; box-shadow:inset -1px 0 0 rgba(0,0,0,.45); }
.sc-fanseg:last-child { box-shadow:none; }
.sc-fanseg.r { background:var(--corner-red,#e63329); }
.sc-fanseg.b { background:var(--corner-blue,#2e7df6); }
.sc-fanseg.x { background:var(--ink-500,#28323f); }
.sc-fankey { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.sc-fankey span { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10.5px; color:var(--fg-3,#717d8c); }
.sc-fankey i { display:inline-block; width:7px; height:7px; border-radius:2px; margin-right:5px; }
.sc-fanfoot { font-family:var(--font-body,system-ui); font-size:10.5px; color:var(--fg-4,#4b5563); margin:8px 0 0; }

/* --- the finish banner --- */
.sc-finish { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:20px 22px; border-radius:14px; border:1px solid var(--border,rgba(255,255,255,.10)); background:var(--surface-card,#161b23); }
.sc-finish.r { border-left:4px solid var(--corner-red,#e63329); background:linear-gradient(90deg, rgba(230,51,41,.11), transparent 62%); }
.sc-finish.b { border-left:4px solid var(--corner-blue,#2e7df6); background:linear-gradient(90deg, rgba(46,125,246,.11), transparent 62%); }
.sc-fk { font-family:var(--font-body,system-ui); font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-4,#4b5563); }
.sc-fw { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; text-transform:uppercase; font-size:clamp(20px,3.2vw,30px); line-height:1.03; color:var(--fg-1,#f4f6f8); margin:4px 0 0; overflow-wrap:anywhere; }
.sc-fm { display:flex; gap:22px; flex-wrap:wrap; margin-left:auto; }
.sc-fm div { min-width:62px; }
.sc-fm .k { font-family:var(--font-body,system-ui); font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-4,#4b5563); }
.sc-fm .v { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:16px; font-weight:700; color:var(--fg-1,#f4f6f8); margin-top:3px; }
.sc-fnote { font-family:var(--font-body,system-ui); font-size:11.5px; line-height:1.55; color:var(--fg-3,#717d8c); margin:12px 0 0; max-width:74ch; }

/* --- foot / absent --- */
.sc-foot { padding:11px 18px 13px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); background:rgba(0,0,0,.16); font-family:var(--font-body,system-ui); font-size:11px; line-height:1.55; color:var(--fg-4,#4b5563); margin:0; }
.sc-absent { padding:18px; }
.sc-absent-t { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-2,#aeb8c4); margin:0 0 6px; }
.sc-absent-p { font-family:var(--font-body,system-ui); font-size:12.5px; line-height:1.6; color:var(--fg-3,#717d8c); margin:0; max-width:64ch; }

@media (max-width:640px) {
  .sc-head, .sc-body { padding-left:12px; padding-right:12px; }
  .sc-foot { padding-left:12px; padding-right:12px; }
  .sc-finish { padding:16px 14px; gap:12px; }
  .sc-fm { margin-left:0; gap:16px; }
  .sc-media { grid-template-columns:1fr; }
}
@media (max-width:380px) {
  .sc-grid th, .sc-grid td { padding:8px 3px; }
  .sc-cell, .sc-tot { font-size:11.5px; }
  .sc-jn { min-width:96px; }
  .sc-jn b { font-size:12px; }
  /* three judges on a 380px panel: the strip wraps to one judge per line rather than
     truncating a name, and the pill shrinks with it */
  .sc-jr { gap:7px 11px; }
  .sc-jr-j b { font-size:11px; }
  .sc-jr-s { font-size:11.5px; padding:2px 6px; }
}

/* ===== 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; }
}

/* line-movement chart (oddschart_view) — static SVG, no script */
.oc-card { background:var(--surface-card,#161b23); border:1px solid var(--border,rgba(255,255,255,.10)); border-radius:14px; padding:16px 18px 14px; }
.oc-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-bottom:10px; }
.oc-key { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--fg-2,#aeb8c4); }
.oc-key em { font-style:normal; color:var(--fg-4,#4b5563); }
.oc-sw { width:18px; height:0; border-top:3px solid currentColor; border-radius:2px; flex:none; }
.oc-sw.oc-red { color:var(--corner-red,#e63329); }
.oc-sw.oc-blue { color:var(--corner-blue,#2e7df6); }
.oc-sw.oc-solid { color:var(--fg-2,#aeb8c4); }
.oc-sw.oc-dashed { color:var(--fg-3,#717d8c); border-top-style:dashed; }
/* The chart is an 880-unit viewBox. Letting it shrink to a 360px phone would scale a
   10px tick to 4px — a chart nobody can read is worse than one you have to nudge. So
   below the breakpoint the drawing keeps a legible width and the FIGURE scrolls, the
   same treatment the data table gets. The page body itself never scrolls sideways. */
.oc-figure { margin:0; overflow-x:auto; overflow-y:hidden; }
.lm-svg { display:block; width:100%; height:auto; overflow:visible; }
@media (max-width:720px) { .lm-svg { width:760px; max-width:none; } }
.lm-svg text { font-family:var(--font-mono,'JetBrains Mono',monospace); }
.lm-grid { stroke:var(--line-soft,rgba(255,255,255,.06)); stroke-width:1; }
.lm-axis { stroke:var(--line,rgba(255,255,255,.10)); stroke-width:1; }
.lm-tick { fill:var(--fg-4,#4b5563); font-size:10px; }
.lm-line { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.lm-line.oc-red { stroke:var(--corner-red,#e63329); }
.lm-line.oc-blue { stroke:var(--corner-blue,#2e7df6); }
.lm-line.lm-dash { stroke-width:1.5; stroke-dasharray:4 4; opacity:.55; }
.lm-end.oc-red { fill:var(--corner-red,#e63329); }
.lm-end.oc-blue { fill:var(--corner-blue,#2e7df6); }
.lm-endring { fill:none; stroke:var(--surface-card,#161b23); stroke-width:2; }
.lm-svg text.lm-endlab { font-size:11.5px; font-weight:700; }
.lm-endlab.oc-red { fill:var(--corner-red,#e63329); }
.lm-endlab.oc-blue { fill:var(--corner-blue,#2e7df6); }
.lm-freezeline { stroke:var(--gold,#f5b32b); stroke-width:1.5; stroke-dasharray:3 3; opacity:.75; }
.lm-freezedot { fill:var(--gold,#f5b32b); }
.lm-freezering { fill:none; stroke:var(--surface-card,#161b23); stroke-width:2; }
/* `.lm-svg text` above sets the mono face for the ticks; this label is prose, so it
   needs the higher-specificity selector to win the face back. */
.lm-svg text.lm-freezelab { fill:var(--gold,#f5b32b); font-family:var(--font-display,'Saira Condensed',sans-serif); font-size:13px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.oc-read { font-size:13.5px; color:var(--fg-2,#aeb8c4); line-height:1.6; margin:12px 0 0; }
.oc-read b { color:var(--fg-1,#f4f6f8); }
.oc-table { margin-top:10px; }
.oc-table summary { font-size:11.5px; color:var(--fg-3,#717d8c); cursor:pointer; }
.oc-table summary:hover { color:var(--fg-2,#aeb8c4); }
.oc-tablewrap { overflow-x:auto; }
.oc-table table { width:100%; border-collapse:collapse; margin-top:8px; font-size:11.5px; }
.oc-table th, .oc-table td { text-align:left; padding:6px 9px; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); font-family:var(--font-mono,'JetBrains Mono',monospace); white-space:nowrap; }
.oc-table thead th { color:var(--fg-4,#4b5563); font-weight:700; letter-spacing:.04em; }
.oc-table tbody th { color:var(--fg-2,#aeb8c4); font-weight:600; white-space:normal; }
.oc-table td.v, .oc-table th.v { text-align:right; color:var(--fg-1,#f4f6f8); }
.oc-att { margin-top:12px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); padding-top:9px; font-size:10.5px; color:var(--fg-4,#4b5563); line-height:1.6; }
.oc-att b { color:var(--fg-3,#717d8c); }
.oc-att .mono { font-family:var(--font-mono,'JetBrains Mono',monospace); }
/* the settlement-truncation disclosure — quieter than the read, louder than the
   attribution line, because it changes what the numbers above it mean */
.oc-trunc { margin:9px 0 0; padding:8px 11px; border-left:2px solid var(--gold,#f5b32b); border-radius:0 8px 8px 0; background:var(--bg-raised,#11151c); font-size:11.5px; line-height:1.6; color:var(--fg-3,#717d8c); }
.oc-trunc .mono { font-family:var(--font-mono,'JetBrains Mono',monospace); color:var(--fg-2,#aeb8c4); }
/* "our number beside the market's" — one factual comparison, visually quiet */
.oc-ours { margin:10px 0 0; padding:10px 12px; border-radius:10px; border:1px solid var(--line,rgba(255,255,255,.10)); background:var(--bg-raised,#11151c); font-size:12.5px; line-height:1.6; color:var(--fg-2,#aeb8c4); }
.oc-ours b { color:var(--fg-1,#f4f6f8); }
.oc-ourswhy { display:block; margin-top:4px; font-size:11px; color:var(--fg-4,#4b5563); }
.oc-ourswhy a { color:var(--fg-3,#717d8c); text-decoration:underline; }

/* open -> close strip (no timeseries): HTML, not SVG, so long fighter names wrap and
   the lane never forces the page sideways at 380px. Two points, no line between. */
.oc-strip { padding:2px 0 0; }
.oc-slane { margin-bottom:16px; }
.oc-slane:last-of-type { margin-bottom:10px; }
.oc-sname { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:14.5px; text-transform:uppercase; letter-spacing:.02em; color:var(--fg-1,#f4f6f8); margin-bottom:7px; overflow-wrap:anywhere; }
.oc-smove { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:11px; font-weight:700; letter-spacing:0; text-transform:none; }
.oc-smove.up { color:var(--corner-red,#e63329); }
.oc-slane.b .oc-smove.up { color:var(--corner-blue,#2e7df6); }
.oc-smove.dn, .oc-smove.flat { color:var(--fg-4,#4b5563); }
.oc-strack { position:relative; height:14px; border-radius:7px; background:var(--ink-850,#0b0e13); border:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.oc-sbar { position:absolute; top:5px; height:4px; border-radius:2px; background:currentColor; opacity:.45; }
.oc-slane.r .oc-strack { color:var(--corner-red,#e63329); }
.oc-slane.b .oc-strack { color:var(--corner-blue,#2e7df6); }
.oc-sopen, .oc-sclose { position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; }
.oc-sopen { border:2px solid currentColor; background:var(--surface-card,#161b23); }
.oc-sclose { background:currentColor; box-shadow:0 0 0 2px var(--surface-card,#161b23); }
.oc-sfoot { display:flex; justify-content:space-between; gap:10px; margin-top:6px; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:11px; color:var(--fg-4,#4b5563); }
.oc-sfoot b { color:var(--fg-2,#aeb8c4); }
.oc-saxis { display:flex; justify-content:space-between; padding-top:6px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10px; color:var(--fg-4,#4b5563); }
.oc-skey { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:8px; font-size:11px; color:var(--fg-3,#717d8c); }
.oc-skey i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:baseline; }
.oc-kopen { border:2px solid var(--fg-3,#717d8c); }
.oc-kclose { background:var(--fg-2,#aeb8c4); }
.oc-nohist { border:1px dashed var(--border-strong,rgba(255,255,255,.16)); border-radius:14px; background:var(--bg-raised,#11151c); padding:16px 18px; }
.oc-nohist p { font-size:12.5px; color:var(--fg-3,#717d8c); line-height:1.6; margin:0; }
.oc-nohist .oc-why { color:var(--fg-4,#4b5563); }
.oc-nohist-sub { margin-top:6px !important; color:var(--fg-4,#4b5563) !important; font-size:11.5px !important; }
@media (max-width:560px) { .oc-card { padding:13px 12px 11px; } }

.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); }