/* FightIQ — fighter-page stylesheet. GENERATED by gen_fighter.py; do not edit by hand. Source: gen_site.PAGE_CSS + gen_fighter.FIGHTER_CSS + strikezone_view.STRIKEZONE_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; }

/* 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 { height:64px; 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; gap:4px; margin-left:6px; min-width:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.navlinks::-webkit-scrollbar { width:0; height:0; }
.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 is 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 the
   scrollbar is hidden because the row is short enough to swipe. */
@media (max-width:900px){
  .nav .wrap { gap:12px; padding:0 16px; }
  .navrow { gap:14px; }
  .navlinks { margin-left:0; }
  .navlinks a { padding:8px 9px; font-size:13px; }
}
.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); }
.names { display:grid; grid-template-columns:1fr auto 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; }
.vs { font-family:var(--font-display); color:var(--fg-4); font-size:13px; font-weight:700; }
.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)); }
.cbar span { display:flex; align-items:center; font-family:var(--font-mono); font-size:12px; font-weight:600; color:#fff; padding:0 10px; }
.cbar .b span { margin-left:auto; }
.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; }
.tier.LOCK { background:var(--red-tint); color:var(--red-400); }
.tier.HIGH { background:var(--corner-blue-bg); color:#7fb0ff; }
.tier.STANDARD { background:var(--ink-600); color:var(--fg-2); }
.tier.TOSSUP { background:var(--ink-600); color:var(--fg-3); }
.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); }

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

/* 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; }
.mater { font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal; }

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

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

/* fighter header */
.fhead { border-bottom:1px solid var(--border); background:radial-gradient(120% 100% at 12% 0%, rgba(230,38,47,.10), transparent 60%); }
.fhead .wrap { padding:26px 24px 26px; }
.fhero { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.fhero .av { width:74px; height:74px; border-radius:50%; background:var(--ink-600); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--fg-2); flex:none; border:2px solid var(--corner-red); }
.fhero .nm { font-family:var(--font-display); text-transform:uppercase; font-weight:900; font-size:clamp(28px,5vw,46px); letter-spacing:-.01em; line-height:1; }
.fhero .sub { color:var(--fg-3); font-size:13.5px; margin-top:8px; display:flex; gap:8px 16px; flex-wrap:wrap; align-items:center; }
.fhero .rec { font-family:var(--font-mono); color:var(--fg-1); }
.factchip { font-family:var(--font-display); text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--win); background:rgba(46,196,120,.10); padding:3px 8px; border-radius:5px; }
.pendchip { font-family:var(--font-display); text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--fg-4); background:var(--ink-600); padding:3px 8px; border-radius:5px; }

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

/* tale of the tape (single fighter, key/value) */
.kv { width:100%; border-collapse:collapse; }
.kv td { padding:11px 10px; border-bottom:1px solid var(--border); font-size:14px; }
.kv td.k { font-family:var(--font-display); text-transform:uppercase; font-size:11px; letter-spacing:.06em; color:var(--fg-3); width:170px; }
.kv td.v { font-family:var(--font-mono); color:var(--fg-1); }
.kv td.v.pend { color:var(--fg-4); font-family:var(--font-body); font-style:italic; }

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

/* our record (the moat) */
.recwrap .headline { font-size:16px; color:var(--fg-2); line-height:1.5; margin:0 0 14px; }
.recwrap .headline b { color:var(--fg-1); }
.recwrap .headline .big { font-family:var(--font-display); font-weight:900; font-size:22px; color:var(--win); }
/* The 5-column verdict table cannot fit a phone. Found while verifying the 390px nav
   fix: it was the one remaining thing making a page scroll SIDEWAYS at that width — the
   whole document moved, so the header and the body text went with it. It now scrolls
   inside its own box instead, which is the only place a wide table is allowed to scroll. */
.vscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.vtable { width:100%; min-width:430px; border-collapse:collapse; font-size:13.5px; }
.vtable th, .vtable td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); }
.vtable th { font-family:var(--font-display); text-transform:uppercase; font-size:11px; letter-spacing:.05em; color:var(--fg-3); font-weight:700; }
.vtable td.mono { font-family:var(--font-mono); }
.vres { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:11px; letter-spacing:.04em; padding:2px 7px; border-radius:5px; }
.vres.ok { color:var(--win); background:rgba(46,196,120,.12); }
.vres.no { color:var(--red-400); background:var(--red-tint); }

/* recent form chips */
.formchips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.fchip { display:flex; flex-direction:column; gap:2px; border:1px solid var(--border); border-radius:9px; padding:8px 11px; min-width:120px; }
.fchip .r { font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.04em; }
.fchip.w .r { color:var(--win); }
.fchip.l .r { color:var(--red-400); }
.fchip .o { font-size:12px; color:var(--fg-2); }
.fchip .d { font-family:var(--font-mono); font-size:10.5px; color:var(--fg-4); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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