/* fight.css — FightIndex's own layer on top of the shared Identity A sheets.
   Kept deliberately small: styles.css + data.css already carry the ring's type
   scale, colour tokens, tables and bands. Everything here is either the brand
   accent repair or a component the ring does not have. */

/* ACCENT — follow the ring's mechanism, do not invent a second one.
   data.css sets `body { --accent: var(--site-accent, …) }` and the shell emits
   `<body data-site="fight" style="--site-accent:#8C2F39">`. Because the custom
   property is set on BODY, a `:root[data-theme="dark"]` override never reaches
   any element inside it — the first attempt here did exactly that, and every
   chart kept the light-mode maroon on a dark background while :root reported
   the dark value. The dark rule has to match the shared selector shape. */
:root[data-theme="dark"] body[data-site="fight"] {
  --accent: #E0707C;
  --accent-2: #E0707C;
  --accent-3: #E0707C;
  --accent-soft: color-mix(in srgb, #E0707C 14%, var(--paper));
}
body[data-site="fight"] {
  --accent-soft: color-mix(in srgb, var(--site-accent, #8C2F39) 12%, var(--paper));
}

/* ------------------------------------------------------------ answer band
   AAA+++ §4: the answer loses its box. It was a 3px-left-accent callout — the
   Bootstrap-alert shape — which framed the one thing the page exists to say
   as a widget. It is now open typography on paper: the record itself at
   display size, the sentence under it, one hairline, then the source line.
   `.answer.aaa` in data.css §20.10 does the unboxing; this sets the register. */
/* `.answer.aaa` (0,2,0) in data.css zeroes padding and the shared `.answer`
   caps the SECTION at --measure. On this site the answer section is a full
   band containing the record line, so both need lifting back — at (0,3,0) so
   the unboxing still wins everything it is meant to win. */
.band.answer.aaa { padding-block: clamp(1.2rem, 3.4vw, 2.2rem); max-width: none; margin-top: 0; }
.answer { padding-block: clamp(1.1rem, 3vw, 1.9rem); }
.answer .answer-t {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.12rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.42; margin: .35rem 0 0; max-width: 62ch;
}
/* The record, set as the record book sets it: figures locked to a common
   width so a column of them reads as a column. */
.answer .stat-display { display: block; margin: 0; }
.answer .stat-display .sepd { color: var(--faint); margin: 0 .06em; }
.answer .stat-display .nc { font-size: .3em; font-family: var(--mono); letter-spacing: .08em; color: var(--muted); vertical-align: .55em; margin-left: .5em; }
.rec-legend { margin: .45rem 0 0; }

/* ============================================================================
   THE RECORD LINE — the set piece (see viz.mjs for the argument).
   A ruled register: hairlines and solid axis-aligned stamps. No caps, no
   arcs, no tapers — deliberately unlike every other hand in the ring.
   ========================================================================== */
.rline { margin: 1rem 0 .4rem; }
/* A FIXED box, not `height:auto`. The viewBox width is one slot per bout, so
   its aspect ratio runs from about 1:1 (a three-bout record) to 10:1 (a
   hundred-bout one); `height:auto` would have rendered the short records
   two thousand pixels tall. A reserved box plus `preserveAspectRatio="…meet"`
   keeps every stamp undistorted, left-aligns the line so short records read
   as short, and reserves its space before paint — CLS 0.00. */
.rline svg {
  width: 100%; height: clamp(78px, 11vw, 118px); display: block;
}
.rline .rl-rule { stroke: var(--ink-2, currentColor); stroke-width: .5; vector-effect: non-scaling-stroke; opacity: .85; }
.rline .rl-tick { stroke: var(--line-2, currentColor); stroke-width: .5; vector-effect: non-scaling-stroke; opacity: .5; }
.rline .rl-gut  { stroke: var(--muted, currentColor); stroke-width: .5; vector-effect: non-scaling-stroke; opacity: .7; }
.rline .rl-yr {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;
  font-size: 4.4px; letter-spacing: .3px; fill: var(--muted, currentColor);
}
/* Result = side of the rule (already in the geometry). Colour only reinforces
   it — the drawing is fully readable in greyscale. */
.rline .rl-win  { fill: var(--accent); }
.rline .rl-loss { fill: currentColor; opacity: .42; }
.rline .rl-draw, .rline .rl-nc, .rline .rl-u { fill: currentColor; opacity: .26; }
.rline .rl-hollow { fill: none; stroke: var(--accent); stroke-width: .5; vector-effect: non-scaling-stroke; }
.rline .rl-loss.rl-hollow { stroke: currentColor; }
.rline .rl-unknown { opacity: .3; }
/* Undated bouts are drawn, never hidden and never dated — but they are
   visibly outside the chronology, which is exactly what they are. */
.rline .rl-undated { opacity: .34; }
.rline figcaption {
  display: flex; flex-wrap: wrap; gap: .35rem 1.4rem;
  margin-top: .5rem; text-transform: uppercase; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: .5rem;
}
.rline figcaption .sep { color: var(--faint); margin: 0 .45em; }
.rline figcaption .rl-span { margin-left: auto; }
.rline .rl-k {
  display: inline-block; width: .5rem; height: .5rem; margin-right: .35rem;
  vertical-align: baseline; border-radius: 0;
}
.rline .rl-k.rl-win { background: var(--accent); }
.rline .rl-k.rl-loss { background: currentColor; opacity: .42; }
@media (max-width: 560px) {
  .rline figcaption .rl-span { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------- the percentile bar
   The site's core visual. A track, a fill to the percentile, and a marker at
   the exact position. Deliberately not a chart library: it is three divs, it
   renders identically everywhere, and it costs nothing. */
.pbar { margin: .9rem 0 .35rem; }
.pbar-track {
  position: relative; height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-2, #e8e2d9), var(--accent-soft));
  border: 1px solid var(--rule, #0001);
}
.pbar-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: var(--accent); opacity: .22;
}
.pbar-mark {
  position: absolute; top: 50%; width: 3px; height: 22px; border-radius: 2px;
  background: var(--accent); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--bg, #fff);
}
.pbar-scale {
  display: flex; justify-content: space-between;
  font-size: .74rem; letter-spacing: .02em; opacity: .6; margin-top: .45rem;
}

/* --------------------------------------------------------- distribution chart
   The cohort's whole shape, with a pin where this fighter lands. The bars are
   deliberately low-contrast and the pin is the accent: the reader should see
   the position first and the distribution second. */
.dist { margin: .2rem 0 1.1rem; }
.dist svg { width: 100%; height: clamp(78px, 12vw, 104px); display: block; overflow: visible; }
.d-bar { fill: var(--accent); opacity: .2; }
.d-axis { stroke: var(--rule, #0002); stroke-width: .5; vector-effect: non-scaling-stroke; }
.d-pin { stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.d-dot { fill: var(--accent); }
.dist figcaption, .tline figcaption {
  display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  font-size: .74rem; letter-spacing: .02em; opacity: .62; margin-top: .3rem;
}
.dist figcaption span:nth-child(2) { opacity: .9; }

/* ------------------------------------------------------------ career timeline */
.tline { margin: .3rem 0 1.2rem; }
.tline svg { width: 100%; height: clamp(58px, 9vw, 76px); display: block; overflow: visible; }
.t-w { fill: var(--accent); opacity: .85; }
.t-l { fill: currentColor; opacity: .3; }
.t-d { fill: currentColor; opacity: .16; }
.t-grid { stroke: var(--rule, #0001); stroke-width: .4; vector-effect: non-scaling-stroke; }
.t-lbl { font-size: 5px; fill: currentColor; opacity: .45; }
.tline figcaption .k::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem;
  border-radius: 1px; margin-right: .3rem; vertical-align: baseline;
}
.k-w::before { background: var(--accent); opacity: .85; }
.k-l::before { background: currentColor; opacity: .3; }
.k-d::before { background: currentColor; opacity: .16; }
.tl-span { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- method mix bar */
.mbar { margin: .4rem 0 1rem; }
.mbar svg { width: 100%; height: 10px; display: block; border-radius: 999px; overflow: hidden; }
.m-ko { fill: var(--accent); opacity: .9; }
.m-sub { fill: var(--accent); opacity: .55; }
.m-dec { fill: currentColor; opacity: .22; }
.mkey { list-style: none; padding: 0; margin: .55rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .84rem; }
.mkey i { display: inline-block; width: .62rem; height: .62rem; border-radius: 2px; margin-right: .35rem; }
.mkey i.m-ko { background: var(--accent); opacity: .9; }
.mkey i.m-sub { background: var(--accent); opacity: .55; }
.mkey i.m-dec { background: currentColor; opacity: .22; }
.mkey b { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- result pills */
.res {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; border-radius: 4px;
  font-size: .74rem; font-weight: 700; letter-spacing: 0;
}
.res-win { background: var(--accent); color: #fff; }
/* In dark mode the accent lightens to #E0707C, and white-on-that is 3.10:1 —
   below AA for a glyph this small. Ink on the light accent instead (5.8:1). */
:root[data-theme="dark"] body[data-site="fight"] .res-win { color: #161512; }
.res-loss { background: color-mix(in srgb, currentColor 14%, transparent); }
.res-draw, .res-nc, .res-u { background: color-mix(in srgb, currentColor 8%, transparent); opacity: .7; }

/* Any wide table scrolls inside its own box — the page body never does. */
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: -.2rem; }
.scroller > .tbl { min-width: 32rem; }

/* ---------------------------------------------------------------- stat tiles */
.statrow { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat { padding: .2rem 0; }
.stat-k { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .65; margin: 0 0 .2rem; }
.stat-v { font-family: Fraunces, Georgia, serif; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }
.stat-v .u { font-size: .5em; opacity: .6; margin-left: .08em; }
.stat-n { font-size: .84rem; opacity: .72; margin: .3rem 0 0; max-width: 34ch; }
.stat.big .stat-v { color: var(--accent); }

.grid-2 { display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ------------------------------------------------------------------- tables */
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl caption { text-align: left; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .65; padding-bottom: .5rem; }
.tbl th, .tbl td { padding: .55rem .6rem; border-bottom: 1px solid var(--rule, #0001); text-align: left; }
.tbl thead th { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.tbl .pc, .tbl .adv { color: var(--accent); white-space: nowrap; }
.tbl .rk { opacity: .5; width: 2.5rem; }
.tbl .alt { opacity: .55; font-size: .88em; }
/* Wide tables scroll inside .scroller (above), which owns the overflow now.
   The old `.tbl.rank { display: block }` fought that wrapper and broke column
   alignment, so rank tables stay real tables at every width. */
.band .wrap > .tbl { display: block; overflow-x: auto; }

.tbl.vs td { width: 38%; }
.tbl.vs th[scope="row"] { text-align: center; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.tbl.vs td.w { font-weight: 650; color: var(--accent); }
.tbl.vs thead th { text-align: center; font-size: 1rem; text-transform: none; opacity: 1; }
.tbl.vs thead th:nth-child(1) { text-align: left; }
.tbl.vs thead th:nth-child(3) { text-align: right; }
.tbl.vs td:last-child { text-align: right; }

/* -------------------------------------------------------------- mix meters */
.mix { list-style: none; padding: 0; margin: .6rem 0 1.4rem; display: grid; gap: .45rem; }
.mix li { display: grid; grid-template-columns: 8rem 1fr 3rem; gap: .7rem; align-items: center; font-size: .9rem; }
.mix-k { text-transform: capitalize; opacity: .8; }
.mix-b { height: 9px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.mix-b i { display: block; height: 100%; background: var(--accent); opacity: .55; }
.mix-v { text-align: right; font-variant-numeric: tabular-nums; opacity: .75; }

/* ------------------------------------------------------------------- cards */
.cards { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cards a {
  display: grid; gap: .18rem; padding: .8rem .9rem; height: 100%;
  border: 1px solid var(--rule, #0002); border-radius: 10px; text-decoration: none;
  transition: border-color .12s ease, background-color .12s ease;
}
.cards a:hover { border-color: var(--accent); background: var(--accent-soft); }
.c-n { font-weight: 620; }
.c-v { font-family: Fraunces, Georgia, serif; font-size: 1.3rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.c-s { font-size: .82rem; opacity: .7; }

/* ------------------------------------------------------------------ a-to-z */
.az { list-style: none; padding: 0; margin: .5rem 0 1.6rem; columns: 2; column-gap: 2rem; }
@media (min-width: 900px) { .az { columns: 3; } }
.az li { break-inside: avoid; padding: .16rem 0; font-size: .93rem; }
.az-m { opacity: .55; font-size: .82em; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- prose */
.lede-s { max-width: 62ch; opacity: .82; }
.note { font-size: .88rem; opacity: .72; margin-top: .8rem; }
.formula {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .95rem;
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  padding: .7rem .9rem; border-radius: 0 6px 6px 0; overflow-x: auto;
}
.bullets { max-width: 66ch; }
.bullets li { margin-bottom: .5rem; }
/* NOTE: `.srcline { font-size:.84rem; opacity:.7 }` used to live here and it
   beat data.css §20.9 on load order, so this site alone rendered the promoted
   E-E-A-T source line as faded prose instead of the ring's mono spec voice.
   The shared rule owns it now; nothing site-local should restyle it. */

/* ------------------------------------------------------------ AAA+++ layer
   The ring mechanics (data.css §20) applied to this site's own components.
   Nothing here changes a layout property, so CLS stays 0.00. */

/* Every label on this site is a field name in a ledger, not a caption. */
.stat-k, .tbl caption, .tbl thead th, .pbar-scale, .mkey, .dist figcaption, .tline figcaption {
  font-family: var(--mono);
  letter-spacing: .06em;
}
.stat-k, .tbl caption, .tbl thead th { color: var(--muted); opacity: 1; }

/* §3.4 — this is the most comparison-dense site in the ring after salary.
   Every figure a reader lines up: record, rounds, dates, reach, weight. */
.tbl, .tbl td, .tbl th, .stat-v, .az-m, .c-v, .mix-v, .num, td.n, .res, .rl-span {
  font-variant-numeric: tabular-nums lining-nums;
}
/* The bout table is a register: the year column is the spine and must never
   wrap or jiggle. */
.tbl.rec td.n { white-space: nowrap; }
.tbl.rec td.rd { text-align: right; }

/* Vintage chip in a table caption (§4). */
.tbl caption .vintage {
  display: inline-block; margin-left: .7rem; padding: 2px 7px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm, 8px);
  color: var(--muted); font-size: .92em;
}

/* Cards keep their hairline-only elevation and darken on hover — never move
   (§3.6: motion here costs CLS and reads as a template animation). */
.cards a { box-shadow: none; transition: border-color var(--t-fast, 140ms) var(--ease-out, ease); }
.cards a:hover { border-color: var(--accent); background: var(--accent-soft); }

/* One full-width breath per page (§20.16) sits before the related block. */
.breathe { display: block; }

/* The FAQ: questions the record actually raises, answered from the record. */
.faq { margin: 0; }
.faq dt { font-weight: 650; margin-top: 1.15rem; }
.faq dd { margin: .35rem 0 0; color: var(--ink-2); max-width: 64ch; }
.faq dt:first-child { margin-top: 0; }