/* The palette lives here and nowhere else.

   Every colour below is a variable so the dark theme can be a second list of
   values rather than a second copy of the stylesheet - and so that the one
   thing this site is about, a green win and a red loss, stays recognisable in
   both. The light values are exactly what the original site used; the dark
   ones are chosen to keep the same reading at the same contrast, not to look
   like the light ones dimmed.

   Bootstrap 5.3 switches its own components on `data-bs-theme`, so that is
   the attribute used here too: one switch, both halves of the page. */
:root {
  --surface:       #ffffff;
  --surface-2:     #f8f9fa;
  --surface-3:     #e9ecef;
  --border:        #dee2e6;
  --border-strong: #ced4da;
  --ink:           #212529;
  --ink-2:         #495057;
  --muted:         #6c757d;
  --muted-2:       #adb5bd;
  --accent:        #0d6efd;
  --race-f:        #eb6834;
  --win:           #198754;
  --loss:          #dc3545;

  /* The eight the race's line view deals out when it is asked for a colour
     per fighter. Slots 0 and 1 are --accent and --race-f, so a board keeps
     the colours it already had and gains six; the other six are the standard
     categorical eight, stepped for this surface. The order is the one that
     keeps neighbouring slots apart under colour blindness, so it is not
     cosmetic - do not re-sort it. Aqua, yellow and magenta sit under 3:1
     against white, which is why every line carries a name on hover and the
     leaders carry one on screen: the colour separates, the label identifies. */
  --race-c0: #0d6efd;  --race-c1: #eb6834;  --race-c2: #1baf7a;
  --race-c3: #eda100;  --race-c4: #e87ba4;  --race-c5: #008300;
  --race-c6: #4a3aa7;  --race-c7: #e34948;

  --res-win-bg:  #C6EFCE;  --res-win-fg:  #006100;
  --res-loss-bg: #FFC7CE;  --res-loss-fg: #9C0006;
  --res-draw-bg: #dbdad5;  --res-draw-fg: inherit;
  --res-nc-bg:   #cfcfcf;  --res-nc-fg:   inherit;

  --m-ko:  #E2CFF1;  --m-sub: #D9FDE9;
  --m-dec: #FDE9D9;  --m-dq:  #DAF3F4;
  --m-fg:  inherit;

  --rec-w:  #d7f5e3;  --rec-l: #ffe0e4;  --rec-n: #dde3f0;
  --am-bg:  #fff6e0;  --am-bg-hover: #ffeec6;
  --am-tag-bg: #ffd98a;  --am-tag-fg: #6b4c00;
  --grid:   #eeeeee;
  --shadow: 0 4px 14px rgba(0, 0, 0, .12);
  --title-bg: #ffe69c;
  --title-fg: #212529;

  /* the card cheatsheet: a solid background for the frozen columns, plus the
     rule and corner flashes that say which two rows are one bout */
  --card-bg:   #ffffff;
  --bout-rule: #adb5bd;
  --corner-1:  #f0b429;
  --corner-2:  #9fb3c8;
  --belt:      #b8860b;
  --hit:       #b8860b;

  /* the home page: cards sit on a tinted floor, and the red and blue
     corners, like the gold of a number one, read the same in both themes
     because the panels that carry them are dark in both */
  --hp-bg:      #f1f3f5;
  --hp-card:    #ffffff;
  --hp-line:    #e3e6ea;
  --hp-hover:   #f4f6f8;
  --hp-face-bg: #e9ecef;
  --hp-red:     #e5484d;
  --hp-blue:    #3e8bff;
  --hp-gold:    #e3b341;
  --hp-women:   #c2257a;
}

[data-bs-theme="dark"] {
  --surface:       #1b1f24;
  --surface-2:     #22272e;
  --surface-3:     #2d333b;
  --border:        #30363d;
  --border-strong: #3d444d;
  --ink:           #e6edf3;
  --ink-2:         #c9d1d9;
  --muted:         #8b949e;
  --muted-2:       #6e7681;
  --accent:        #4493f8;
  --race-f:        #d95926;
  --win:           #3fb950;
  --loss:          #f85149;

  /* The same eight hues re-stepped for the dark surface, not the light ones
     dimmed - all eight clear 3:1 against #1b1f24 where three of the light
     ones do not. */
  --race-c0: #4493f8;  --race-c1: #d95926;  --race-c2: #199e70;
  --race-c3: #c98500;  --race-c4: #d55181;  --race-c5: #008300;
  --race-c6: #9085e9;  --race-c7: #e66767;

  --res-win-bg:  #0f3620;  --res-win-fg:  #6ee787;
  --res-loss-bg: #3d1418;  --res-loss-fg: #ff9492;
  --res-draw-bg: #30363d;  --res-draw-fg: #c9d1d9;
  --res-nc-bg:   #262c33;  --res-nc-fg:   #c9d1d9;

  --m-ko:  #2b2136;  --m-sub: #12301f;
  --m-dec: #33261a;  --m-dq:  #152b2e;
  --m-fg:  #d7dde3;

  --rec-w:  #10371d;  --rec-l: #3d1418;  --rec-n: #1f2937;
  --am-bg:  #332a12;  --am-bg-hover: #3d3216;
  --am-tag-bg: #6b5008;  --am-tag-fg: #ffd98a;
  --grid:   #2a2f36;
  --shadow: 0 6px 18px rgba(0, 0, 0, .55);
  --title-bg: #4a3a06;
  /* was var(--am-tag-bg) - dark brown on dark brown, which nothing had
     drawn text with until the MMA math chain did */
  --title-fg: #ffd98a;

  --card-bg:   #1b1f24;
  --bout-rule: #484f58;
  --corner-1:  #d29922;
  --corner-2:  #57606a;
  --belt:      #e3b341;
  --hit:       #e3b341;

  --hp-bg:      #111418;
  --hp-card:    #1b1f24;
  --hp-line:    #2a3038;
  --hp-hover:   #232931;
  --hp-face-bg: #2d333b;
  --hp-women:   #e685b5;
}

/* Carried over from the original site so the tables read the same way:
   green means a win, red a loss, and each finishing method has its own tint. */

body { font-size: 0.95rem; }

h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }

/* ---------- tables ---------- */
table.compact th,
table.compact td {
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}
table.compact td.text-start,
table.compact th.text-start { text-align: left; }

thead.sticky th {
  position: sticky;
  top: 0;
  z-index: 5;
  /* fixed, not --ink: the header is dark in both themes, so it reads as a
     header and not as an inverted strip of page */
  background: #212529;
  color: #fff;
}

/* DataTables un-sticks any header it is initialised on: its own sort-arrow
   rule is `table.dataTable > thead > tr > th.sorting { position: relative }`,
   two classes and four elements, which outranks `thead.sticky th` above. An
   id wins that outright, which is also how #tbl does it on the rankings page
   - so a DataTable that wants a pinned header names itself here. */
#placed thead th { position: sticky; top: 0; z-index: 5; }

.table-wrap { overflow-x: auto; }
.table-wrap.tall { max-height: 70vh; overflow-y: auto; }

/* ---------- results ---------- */
.res-win   { background-color: var(--res-win-bg) !important; color: var(--res-win-fg) !important; font-weight: 600; }
.res-loss  { background-color: var(--res-loss-bg) !important; color: var(--res-loss-fg) !important; font-weight: 600; }

/* MONEY UP AND MONEY DOWN. Bootstrap's .text-success is #198754 in both
   themes, which is about 2.9:1 against the dark surface - you can tell it is
   green and you cannot read it. These reuse the result palette, which is
   already defined per theme, so a P&L column is legible in both. */
.pl-up   { color: var(--res-win-fg)  !important; }
.pl-down { color: var(--res-loss-fg) !important; }
.res-draw  { background-color: var(--res-draw-bg) !important; }
.res-nc    { background-color: var(--res-nc-bg) !important; }

/* ---------- methods ---------- */
.m-ko   { background-color: var(--m-ko) !important; }
.m-sub  { background-color: var(--m-sub) !important; }
.m-dec  { background-color: var(--m-dec) !important; }
.m-dq   { background-color: var(--m-dq) !important; }

/* ---------- odds ---------- */
.odds-dog { color: var(--loss) !important; }   /* underdog price, positive */
.odds-fav { color: var(--win) !important; }   /* favourite price, negative */

/* ---------- rating movement ---------- */
.up   { color: var(--win) !important; font-weight: 600; }
.down { color: var(--loss) !important; font-weight: 600; }
.flat { color: var(--muted) !important; }

/* ---------- cards ---------- */
.stat-card {
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .75rem 1rem;
  background: var(--surface);
  height: 100%;
}
.stat-card .label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.stat-card .value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.stat-card .sub { font-size: .8rem; color: var(--muted); }

/* ---------- ranker ---------- */
.pick-list { max-height: 320px; overflow-y: auto; }
.picked {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--surface-3); border-radius: 1rem;
  padding: .15rem .6rem; margin: .15rem;
  font-size: .85rem;
}
.picked button {
  border: 0; background: none; line-height: 1;
  color: var(--muted); font-size: 1rem; padding: 0;
}

/* ---------- bars ---------- */
.bar { background: var(--surface-3); border-radius: .2rem; height: .55rem; min-width: 60px; }
.bar > span { display: block; height: 100%; border-radius: .2rem; background: var(--accent); }

/* the model and the market side by side */
.bar-model > span  { background: var(--accent); }
.bar-market > span { background: var(--muted); }

.edge-pos { color: var(--win); font-weight: 600; }
.edge-neg { color: var(--loss); }

/* ---------- rating chart ---------- */
.chart-wrap { position: relative; }
#curve { cursor: crosshair; }
#curve .pt { pointer-events: none; }

.chart-tip {
  position: absolute;
  z-index: 20;
  min-width: 210px;
  max-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: .4rem;
  box-shadow: var(--shadow);
  padding: .5rem .6rem;
  font-size: .8rem;
  pointer-events: none;      /* never steal the mouse from the chart */
}
.chart-tip .tip-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem; }
.chart-tip .badge-res {
  font-weight: 700; font-size: .7rem; padding: .05rem .35rem; border-radius: .2rem;
}
.chart-tip .tip-date { color: var(--muted); }
.chart-tip .tip-title {
  font-size: .65rem; text-transform: uppercase; letter-spacing: .04em;
  background: var(--title-bg); border-radius: .2rem; padding: .05rem .3rem;
}
.chart-tip .tip-opp { font-weight: 600; margin-bottom: .1rem; }
.chart-tip .tip-opp a { pointer-events: auto; }
.chart-tip .tip-meta { color: var(--muted); margin-bottom: .35rem; }
.chart-tip .tip-tbl { width: 100%; border-collapse: collapse; }
.chart-tip .tip-tbl th {
  text-align: left; font-weight: 400; color: var(--muted); padding: .05rem 0;
}
.chart-tip .tip-tbl td { text-align: right; font-variant-numeric: tabular-nums; }
.chart-tip .tip-event { margin-top: .35rem; color: var(--ink-2); line-height: 1.2; }
.chart-tip .tip-org { color: var(--muted-2); font-size: .75rem; }

.legend { display: flex; gap: .4rem; }
.legend-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid var(--border); background: var(--surface); border-radius: 1rem;
  padding: .05rem .5rem; font-size: .75rem; color: var(--ink-2);
}
.legend-btn span { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.legend-btn.off { opacity: .4; text-decoration: line-through; }

.dot-key {
  display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  vertical-align: middle;
}
.dot-key.win { background: var(--win); }
.dot-key.loss { background: var(--loss); }

/* ---------- fighter picture ---------- */
.fighter-pic {
  width: 104px; height: 104px; object-fit: cover; object-position: top center;
  border-radius: .5rem; border: 1px solid var(--border); background: var(--surface-2);
}

/* ---------- flags ---------- */
.flag {
  vertical-align: -2px; margin-right: .35rem;
  border: 1px solid rgba(0,0,0,.12); border-radius: 1px;
}

/* ---------- record summary ---------- */
/* Laid out like the summary table on a fighter's Wikipedia page: a totals
   header, one row per method split win/loss, and draws and no contests
   spanning both columns because they are neither. */
.record-tbl { table-layout: fixed; }
.record-tbl th, .record-tbl td {
  text-align: center; padding: .3rem .5rem; vertical-align: middle;
}
.record-tbl th.text-start { text-align: left; }
.record-tbl tr.rec-head th { background: var(--surface-3); font-weight: 700; }
.record-tbl tbody th { background: var(--surface-3); font-weight: 700; }
.record-tbl td.rec-w { background: var(--rec-w); }
.record-tbl td.rec-l { background: var(--rec-l); }
.record-tbl tr.rec-head th.rec-w { background: var(--rec-w); }
.record-tbl tr.rec-head th.rec-l { background: var(--rec-l); }
.record-tbl td.rec-n { background: var(--rec-n); }

/* ---------- amateur fights ---------- */
.am-row > td { background-color: var(--am-bg) !important; }
.am-row:hover > td { background-color: var(--am-bg-hover) !important; }
.am-tag {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
  background: var(--am-tag-bg); color: var(--am-tag-fg); border-radius: .2rem;
  padding: 0 .25rem; margin-left: .2rem;
}


/* a no contest rated on its original result */
.nc-tag { color: #b8860b; margin-left: .2rem; font-size: .8em; }

/* A bounded scroll region, so the sticky header has something to stick to.
   Without a height the wrapper never scrolls and `position: sticky` on the
   header does nothing at all. */
.table-scroll {
  max-height: calc(100vh - 235px);
  min-height: 300px;
  overflow: auto;
}

/* ---------- betting: why a pick was made ---------- */
.model-box {
  border: 1px solid var(--border); border-radius: .5rem; padding: .6rem .8rem;
  background: var(--surface-2);
}
.model-box > summary { cursor: pointer; }
.why { max-width: 24rem; }
.why .up { color: var(--win); }
.why .down { color: var(--loss); }
.why .flat { color: var(--muted); }


/* ---------- the rest of the page follows the theme too ---------- */
body { background: var(--surface-2); color: var(--ink); }
main  { background: var(--surface); }

/* Figures in a column should line up. Proportional digits make a rating of
   1,111 visibly narrower than 1,888, which turns a column of numbers into a
   ragged edge the eye has to re-find on every row. */
table.compact td,
table.compact th,
.stat-card .value,
.stat-card .sub { font-variant-numeric: tabular-nums; }

/* ---------- theme switch ---------- */
.theme-btn {
  border: 1px solid rgba(255, 255, 255, .25);
  background: transparent; color: #fff;
  border-radius: .35rem; padding: .1rem .45rem;
  font-size: .95rem; line-height: 1.4;
}
.theme-btn:hover { background: rgba(255, 255, 255, .12); }
.theme-btn .t-icon { pointer-events: none; }

/* A card called "CFFC 161 - Cage Fury Fighting Championships 161: Lleshi vs.
   Calvert" is 66 characters of mostly-repeated text, and in a nowrap table it
   pushes the ratings and the price off the right-hand edge. Clip it and keep
   the whole name in the tooltip. */
.ellipsis {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 992px) { .ellipsis { max-width: 11rem; } }

/* ---------- the card cheatsheet ----------
   Thirty-odd columns is wider than any screen, so the two that say WHICH
   ROW YOU ARE ON stay put while the rest scrolls under them. The old
   cheatsheet solved this by repeating the fighter's name at the far right,
   which works only if you scroll all the way. */
/* The second frozen column is pinned at the first one's width, so that width
   cannot be a guess: if --stick-1 is narrower than the bout-number column
   actually renders, the two leave a gap and the table scrolls through it. The
   column is therefore given the width rather than measured for it. */
.card-sheet { --stick-1: 3.2rem; }
.card-sheet th.stick-1,
.card-sheet td.stick-1 { position: sticky; left: 0; z-index: 3;
                         width: var(--stick-1); min-width: var(--stick-1);
                         max-width: var(--stick-1); overflow: hidden; }
.card-sheet th.stick-2,
.card-sheet td.stick-2 { position: sticky; left: var(--stick-1); z-index: 3;
                         min-width: 9.5rem;
                         /* the frozen edge, so the half-scrolled column that
                            ends up against it does not read as part of it */
                         border-right: 2px solid var(--bout-rule); }
/* a sticky cell has the rows behind it scrolling past, so it needs a solid
   background of its own or the text underneath shows through */
.card-sheet td.stick-1, .card-sheet td.stick-2 { background-color: var(--card-bg); }
.card-sheet thead th.stick-1,
.card-sheet thead th.stick-2 { z-index: 5; background-color: #212529; }

/* Where one bout ends and the next begins. Two rows belong together and
   nothing else on the page says so. */
.card-sheet tr.bout-top > td { border-top: 2px solid var(--bout-rule); }

/* The corner a fighter is in. Faint, because it is a grouping cue and not
   information - the name and the result carry the meaning. */
.card-sheet td.corner-1 { box-shadow: inset 3px 0 0 var(--corner-1); }
.card-sheet td.corner-2 { box-shadow: inset 3px 0 0 var(--corner-2); }

/* The five-round marker, painted as a LAYER over the solid background
   rather than replacing it. A frozen column has the rest of the table
   scrolling underneath it, so a translucent background on one is a window:
   the division cell of the bout below showed through the bout number. */
.card-sheet td.five { background-color: var(--card-bg) !important;
                      background-image: linear-gradient(rgba(255, 193, 7, .30),
                                                        rgba(255, 193, 7, .30));
                      font-weight: 600; }
.card-sheet .belt { font-size: .7rem; line-height: 1; color: var(--belt); }
.card-sheet td.w-cell { background-color: rgba(25, 135, 84, .10); }
.card-sheet td.l-cell { background-color: rgba(220, 53, 69, .10); }
.card-sheet td.div-cell.m { background-color: rgba(13, 110, 253, .12); }
.card-sheet td.div-cell.f { background-color: rgba(214, 51, 132, .14); }

/* The price the result came in on. An outline rather than a fill, because the
   fill is already saying how short the price was and both facts matter: a
   +900 that landed is a different story from a -400 that landed. */
.card-sheet td.hit { outline: 2px solid var(--hit); outline-offset: -2px;
                     font-weight: 700; }
.hit-key { outline: 2px solid var(--hit); outline-offset: -1px;
           padding: 0 .2rem; font-weight: 700; }


/* The older, taller or longer of the two corners. Grey rather than a colour:
   it is a fact about the matchup, not a good or a bad thing, and the heat maps
   beside it already own red and green. */
.card-sheet td.edge-cell { background-color: rgba(127, 127, 127, .22);
                           font-weight: 600; }

/* ---------- MMA math (/mmamath) ----------
   Two corners and the options between them, then each direction's chain on
   its own card: a rail down the left, a fighter at each stop, and the fight
   that joins two stops sitting on the rail between them. */
.mm-pickers { display: grid; grid-template-columns: minmax(0, 1fr) 15rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.mm-side { display: flex; flex-direction: column; gap: .7rem; border-top: 3px solid var(--hp-red); }
.mm-side.c2 { border-top-color: var(--hp-blue); }
.mm-side-l { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--hp-red); }
.mm-side.c2 .mm-side-l { color: var(--hp-blue); }
.mm-mid { display: flex; flex-direction: column; gap: .8rem; align-items: stretch; }
.mm-mid .rk-sel select { width: 100%; min-width: 0; }
.mm-swap { justify-content: center; align-self: stretch; }
.mm-card-slot:empty { display: none; }
.mm-card { display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; border-radius: 12px;
           background: var(--hp-bg); border: 1px solid var(--hp-line); }
.mm-side.c1 .mm-card .hp-face { box-shadow: 0 0 0 2px var(--hp-card), 0 0 0 4px var(--hp-red); }
.mm-side.c2 .mm-card .hp-face { box-shadow: 0 0 0 2px var(--hp-card), 0 0 0 4px var(--hp-blue); }
.mm-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mm-card-name { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.mm-card-name:hover { color: var(--accent); }
.mm-card-body small { font-size: .76rem; color: var(--muted); }
.mm-clear { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--muted);
            font-size: 1.1rem; line-height: 1; padding: 0; }
.mm-clear:hover { background: var(--hp-hover); color: var(--ink); }
.mm-panel { display: flex; flex-direction: column; gap: 1.25rem; }
.mm-panel:empty { display: none; }
.mm-wait { font-size: .85rem; color: var(--muted); }
.mm-chain { border-top: 3px solid var(--hp-red); }
.mm-chain.c2 { border-top-color: var(--hp-blue); }
.mm-claim { font-size: 1.05rem; margin-bottom: .75rem; line-height: 1.35; }
.mm-claim span { display: block; font-size: .8rem; color: var(--muted); }
.mm-none { color: var(--muted); max-width: 40rem; margin: 0; font-size: .88rem; }
.mm-steps { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--hp-line); }
.mm-node { display: flex; align-items: center; gap: .6rem; margin: .2rem 0; position: relative; }
.mm-node-name { display: flex; flex-direction: column; line-height: 1.2; }
.mm-node-name a { font-weight: 750; color: var(--ink); }
.mm-node-name a:hover { color: var(--accent); }
.mm-node-name small { font-size: .74rem; color: var(--muted); }
.mm-step { position: absolute; left: -2.35rem; width: 1.7rem; height: 1.7rem; border-radius: 50%;
           display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800;
           color: var(--muted); background: var(--hp-card); border: 2px solid var(--hp-line); }
.mm-chain.c1 .mm-node:first-child .mm-step, .mm-chain.c2 .mm-node:last-child .mm-step { color: #fff; background: var(--hp-red); border-color: var(--hp-red); }
.mm-chain.c1 .mm-node:last-child .mm-step, .mm-chain.c2 .mm-node:first-child .mm-step { color: #fff; background: var(--hp-blue); border-color: var(--hp-blue); }
.mm-link { display: flex; gap: .6rem; align-items: baseline; padding: .35rem 0 .35rem .1rem; }
.mm-beat { flex: none; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--win); padding-top: .1rem; }
.mm-fight { font-size: .84rem; min-width: 0; }
.mm-where { font-size: .74rem; color: var(--muted); }
.mm-method { padding: .02rem .4rem; border-radius: 6px; font-size: .74rem; font-weight: 700; }
.mm-title-tag { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
                background: var(--hp-gold); color: #1f1600; border-radius: 999px; padding: .02rem .4rem; }
.mm-verdict { margin: 0; }
@media (max-width: 991px) {
  .mm-pickers { grid-template-columns: minmax(0, 1fr); }
  .mm-mid { flex-direction: row; flex-wrap: wrap; align-items: center; order: 3; }
  .mm-side.c2 { order: 2; }
}

/* ------------------------------------------------------- fighter stat strip
   One panel of small figures rather than a row of boxes: the same seven
   numbers in roughly a third of the height, and no number has to be dropped
   or demoted to fit the grid. */
.stat-strip { display: flex; flex-wrap: wrap; align-items: stretch;
              border: 1px solid var(--border); border-radius: .5rem;
              background: var(--surface); overflow: hidden; }
.stat-strip .st { flex: 1 1 7rem; min-width: 6.5rem; padding: .45rem .75rem;
                  border-left: 1px solid var(--border); }
.stat-strip .st:first-child { border-left: 0; }
.stat-strip .st-l { font-size: .65rem; text-transform: uppercase;
                    letter-spacing: .05em; color: var(--muted); line-height: 1.4; }
.stat-strip .st-v { font-size: 1.15rem; font-weight: 600; line-height: 1.2;
                    font-variant-numeric: tabular-nums; }
.stat-strip .st-s { font-size: .7rem; color: var(--muted); line-height: 1.3;
                    white-space: nowrap; overflow: hidden;
                    text-overflow: ellipsis; }
@media (max-width: 575px) {
  .stat-strip .st { flex: 1 1 5.5rem; min-width: 5rem; padding: .4rem .5rem; }
  .stat-strip .st-v { font-size: 1rem; }
}


/* ----------------------------------------------------------------- the race
   /race draws its bars as DOM rows rather than SVG, for two reasons: every bar
   carries a photo and a flag, which are elements either way, and a row that
   keeps its identity across frames can be MOVED with a transform instead of
   redrawn - so twenty bars re-sorting is twenty transforms on the compositor
   rather than an SVG rebuilt sixty times a second.

   Rows are absolutely positioned inside .race-plot and placed with
   translateY. The interpolation is driven from JavaScript, so there is no CSS
   transition on the transform or the width: one would fight the scrub bar and
   lag a frame behind it. Colour and opacity do transition, because nothing
   drives those per frame.

   The left gutter is a fixed width so that every bar starts at the same x.
   Without that the bars measure from wherever each name happened to end, and
   the lengths stop being comparable - which is the whole chart. */
.race {
  --race-gutter: 12rem;   /* rank + photo + name + class */
  --race-row: 2.05rem;    /* row pitch; the bar is thinner, leaving a gap */
  --race-tail: 3.2rem;    /* room after the bar for its value */
}
.race-plot {
  position: relative;
  overflow: hidden;
  z-index: 0;   /* a stacking context, so a row's z-index stays local */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .5rem .75rem;
}

/* The axis. Hairlines one shade off the surface, labels below the plot. The
   scale grows as the ratings do, so both slide as the years pass. */
.race-grid { position: absolute; inset: 0; pointer-events: none; }
.race-gl { position: absolute; top: .4rem; bottom: .25rem; width: 1px;
           background: var(--grid); }
.race-axis { position: relative; height: 1.15rem; }
.race-gt { position: absolute; top: .15rem; transform: translateX(-50%);
           font-size: .68rem; color: var(--muted-2);
           font-variant-numeric: tabular-nums; white-space: nowrap; }

/* One fighter. An anchor, so the whole row is clickable and tab-reachable. */
.race-row {
  position: absolute; left: .75rem; right: .75rem; top: .5rem;
  display: flex; align-items: center; gap: .4rem;
  height: var(--race-row);
  text-decoration: none; color: inherit;
  will-change: transform;
}
.race-row:hover .race-nm, .race-row:focus-visible .race-nm { text-decoration: underline; }
.race-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px;
                          border-radius: .2rem; }

/* The ruler. Invisible but laid out, so the track can always be measured -
   a display:none row measures zero, and every bar was ten pixels wide. */
.race-gauge { visibility: hidden; pointer-events: none; top: .5rem; }

.race-head { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem;
             background: var(--surface); }
.race-rank { flex: 0 0 1.4rem; text-align: right; font-size: .72rem;
             color: var(--muted); font-variant-numeric: tabular-nums; }
.race-face { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
             object-fit: cover; background: var(--surface-3);
             border: 1px solid var(--border); }
.race-lab { flex: 0 0 var(--race-gutter); display: flex; align-items: center;
            gap: .3rem; min-width: 0; }
.race-nm { flex: 0 1 auto; white-space: nowrap; overflow: hidden;
           text-overflow: ellipsis; font-weight: 500; }
.race-lab .flag { flex: 0 0 auto; }
.race-div { flex: 0 0 auto; margin-left: auto; padding-left: .3rem;
            font-size: .62rem; color: var(--muted); text-transform: uppercase;
            letter-spacing: .03em; white-space: nowrap; }

/* The track holds the bar and its value. The bar stops short of the right
   edge by --race-tail, so a long bar can never clip its own number.
   4px rounded data-end, square against the baseline it grows from. */
.race-track { position: relative; flex: 1 1 auto; min-width: 0;
              height: var(--race-row); }
.race-bar { position: absolute; left: 0; top: 50%; height: 1.5rem;
            margin-top: -.75rem; border-radius: 0 4px 4px 0;
            background: var(--accent); transition: background-color .2s linear; }
.race-row.f .race-bar { background: var(--race-f); }
/* 67 fighters in the whole warehouse have no recorded gender - mostly early
   Japanese atomweights and a few super heavyweights - and painting them as men
   would be a guess the data does not support. Grey is not a third series; it is
   the absence of one. */
.race-row.u .race-bar { background: var(--muted-2); }
.race-val { position: absolute; top: 50%; transform: translateY(-50%);
            font-size: .78rem; font-weight: 600; color: var(--ink-2);
            font-variant-numeric: tabular-nums; white-space: nowrap;
            /* opaque, so a value stays readable over a gridline and over the
               bar of a row it is crossing */
            background: var(--surface); padding: 0 .2rem; border-radius: 2px; }

/* ---- the line view ----
   The same board as trajectories. Lines are recessive by default and only the
   leaders and the hovered one come forward: twenty lines all shouting is a
   ball of wool, and identity here is carried by the end labels and the hover,
   not by twenty colours nobody could tell apart. */
.race-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The zoom is a transform on the group, not a rebuild of the paths, so the
   stroke has to be told not to come along for the ride - otherwise a 6x
   vertical zoom draws six-pixel-thick lines. */
.race-lines .rl { fill: none; stroke-width: 1.6; opacity: .3;
                  vector-effect: non-scaling-stroke;
                  stroke-linejoin: round; stroke-linecap: round; }
/* Eight hues and twenty lines means each colour is on screen two or three
   times, so a recessive line has to be readable enough for its hue to count
   for anything - .3 was tuned for one blue and one orange. */
.race-lines.tint .rl { opacity: .5; }
.race-lines .rl.top { opacity: .95; stroke-width: 2; }
.race-lines .rl.hot { opacity: 1; stroke-width: 3; }
.race-lines .rl-gl { stroke: var(--grid); stroke-width: 1; }
.race-lines .rl-cursor { stroke: var(--border-strong); stroke-width: 1; }
.race-lines .rl-yt { fill: var(--muted-2); font-size: 10.5px; text-anchor: end;
                     font-variant-numeric: tabular-nums; }
.race-lines .rl-xt { fill: var(--muted-2); font-size: 10.5px; text-anchor: middle;
                     font-variant-numeric: tabular-nums; }
.race-lines .rl-end { font-size: 11px; font-weight: 600; }
/* the watermark would sit on top of the lines, where the bars left it room */
.race-plot.is-lines .race-stamp { display: none; }

/* The date, large and recessive, in the corner the bars leave empty. */
.race-stamp {
  position: absolute; right: 1rem; bottom: .4rem; z-index: 0;
  font-size: clamp(1.7rem, 5.5vw, 3.2rem); font-weight: 700; line-height: 1;
  color: var(--muted-2); opacity: .4; pointer-events: none;
  letter-spacing: -.02em;
}
.race-none { position: absolute; inset: 0; display: flex; align-items: center;
             justify-content: center; color: var(--muted); font-size: .9rem;
             pointer-events: none; }

/* Transport: play, the scrub bar, the date it is parked on. */
.race-ctl { display: flex; align-items: center; gap: .6rem; }
.race-scrub { flex: 1 1 auto; }
.race-when { flex: 0 0 auto; min-width: 5.5rem; text-align: right;
             font-variant-numeric: tabular-nums; font-weight: 600; }
.race-play { flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border-radius: 50%;
             border: 1px solid var(--border-strong); background: var(--surface);
             color: var(--ink); font-size: .85rem; line-height: 1;
             display: inline-flex; align-items: center; justify-content: center; }
.race-play:hover { background: var(--surface-2); }

.race-opts { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.race-opts .form-check { min-height: 0; }

.race-key { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.race-key .k { display: inline-flex; align-items: center; gap: .3rem;
               font-size: .75rem; color: var(--muted); }
.race-key .sw { width: .8rem; height: .8rem; border-radius: 2px; }

@media (min-width: 992px) { .race { --race-gutter: 15rem; } }
@media (max-width: 767px) {
  .race { --race-gutter: 8.5rem; }
  .race-div { display: none; }
}
@media (max-width: 575px) {
  .race { --race-gutter: 7rem; --race-row: 1.85rem; --race-tail: 2.8rem; }
  .race-plot { padding: .5rem; }
  .race-row { left: .5rem; right: .5rem; gap: .3rem; }
  .race-rank { flex-basis: 1rem; font-size: .65rem; }
  .race-face { width: 1.35rem; height: 1.35rem; }
  .race-bar { height: 1.3rem; margin-top: -.65rem; }
  .race-val { font-size: .7rem; }
  .race-nm { font-size: .8rem; }
}

/* ---------- home page ----------
   A dashboard, not a table: cards on a tinted floor, one dark "stage" panel
   for the next fight, and the same row shape (face, name, one number) in
   every list so the eye learns it once. Everything is prefixed hp- so none
   of it can leak into the table pages. */
main:has(> .hp) { background: var(--hp-bg); }
.hp { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.hp a { text-decoration: none; }

/* faces: a circle suits the UFC's transparent cut-outs and a cropped photo
   alike, which a square frame does not */
.hp-face { display: inline-block; flex: 0 0 auto; border-radius: 50%;
           object-fit: cover; object-position: top center; background: var(--hp-face-bg); }
.hp-face.sm  { width: 36px;  height: 36px; }
.hp-face.lg  { width: 64px;  height: 64px; }
.hp-face.xl  { width: 148px; height: 148px; }
.hp-face.xxl { width: 150px; height: 150px; }
.hp-face-init { display: inline-flex; align-items: center; justify-content: center;
                font-weight: 700; font-size: .8rem; color: var(--muted); }
.hp-face-init.lg { font-size: 1.3rem; }
.hp-face-init.xl, .hp-face-init.xxl { font-size: 2.6rem; }
.hp-face.ring { box-shadow: 0 0 0 2px var(--hp-card), 0 0 0 4px var(--hp-gold); }

/* ---- the next fight ---- */
.hp-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  border-radius: 18px; overflow: hidden; color: #f3f5f7;
  background:
    radial-gradient(55% 95% at 14% 42%, rgba(229, 72, 77, .34), transparent 70%),
    radial-gradient(55% 95% at 64% 42%, rgba(62, 139, 255, .30), transparent 70%),
    linear-gradient(135deg, #181b22 0%, #0c0e12 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}
.hp-hero-main { padding: 1.1rem 1.5rem 1.25rem; min-width: 0; }
.hp-hero-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .88rem; }
.hp-when { background: var(--hp-red); color: #fff; font-weight: 800; font-size: .68rem;
           text-transform: uppercase; letter-spacing: .08em; padding: .22rem .6rem; border-radius: 999px; }
.hp-hero-ev a { color: #fff; font-weight: 700; }
.hp-hero-ev a:hover { text-decoration: underline; }
.hp-dim { color: rgba(255, 255, 255, .6); }

.hp-bout { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
           align-items: center; gap: 1rem; margin: 1rem 0 1.1rem; }
.hp-corner { --c: var(--hp-red); display: flex; flex-direction: column; align-items: center;
             text-align: center; gap: .15rem; color: inherit; min-width: 0; }
.hp-corner.c2 { --c: var(--hp-blue); }
.hp-corner .hp-face { border: 3px solid var(--c); background: rgba(255, 255, 255, .07);
                      transition: transform .15s ease; }
.hp-corner .hp-face-init { color: rgba(255, 255, 255, .5); }
a.hp-corner:hover .hp-face { transform: scale(1.03); }
a.hp-corner:hover .hp-corner-name { text-decoration: underline; }
.hp-corner-name { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em;
                  line-height: 1.15; margin-top: .55rem; max-width: 100%; }
.hp-corner-meta { color: rgba(255, 255, 255, .65); font-size: .82rem; }
.hp-corner-meta .flag { border-color: rgba(255, 255, 255, .2); }
.hp-corner-elo { font-size: 1.65rem; font-weight: 800; line-height: 1.1; color: var(--c);
                 font-variant-numeric: tabular-nums; }
.hp-corner-elo small { font-size: .66rem; font-weight: 700; margin-left: .3rem; letter-spacing: .1em;
                       text-transform: uppercase; color: rgba(255, 255, 255, .5); }

.hp-vs { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.hp-vs-word { font-size: 2.4rem; font-weight: 900; font-style: italic; text-transform: uppercase;
              line-height: 1; padding: 0 .1em;
              background: linear-gradient(90deg, var(--hp-red), var(--hp-blue));
              -webkit-background-clip: text; background-clip: text; color: transparent; }
.hp-vs-sub { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
             color: rgba(255, 255, 255, .6); white-space: nowrap; }
.hp-belt { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
           color: #1f1600; background: var(--hp-gold); border-radius: 999px; padding: .12rem .5rem;
           white-space: nowrap; }
.hp-belt.dim { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); }

.hp-splits { max-width: 660px; margin: 0 auto; display: flex; flex-direction: column; gap: .45rem; }
.hp-split { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: .7rem; }
.hp-split-lab { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
                color: rgba(255, 255, 255, .6); text-align: right; }
.hp-split-bar { display: flex; gap: 2px; height: 1.4rem; border-radius: 999px; overflow: hidden; }
.hp-split-bar i { font-style: normal; font-size: .76rem; font-weight: 800; color: #fff;
                  display: flex; align-items: center; padding: 0 .6rem; white-space: nowrap;
                  min-width: 2.9rem; font-variant-numeric: tabular-nums; }
.hp-split-bar .c1 { background: var(--hp-red); }
.hp-split-bar .c2 { background: var(--hp-blue); justify-content: flex-end; }
.hp-hero-links { display: flex; justify-content: center; gap: 1.4rem; flex-wrap: wrap;
                 margin-top: .55rem; font-size: .84rem; }
.hp-hero-links a { color: #fff; opacity: .8; font-weight: 700; }
.hp-hero-links a:hover { opacity: 1; text-decoration: underline; }

.hp-hero-side { background: rgba(255, 255, 255, .035); border-left: 1px solid rgba(255, 255, 255, .08);
                padding: 1rem .8rem; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.hp-side-h { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
             color: rgba(255, 255, 255, .55); margin: 0 .5rem .4rem; }
.hp-up { display: flex; align-items: center; gap: .7rem; padding: .45rem .5rem;
         border-radius: 10px; color: inherit; }
.hp-up:hover { background: rgba(255, 255, 255, .07); }
.hp-date { flex: 0 0 2.6rem; height: 2.6rem; border-radius: 9px; background: rgba(255, 255, 255, .08);
           display: flex; flex-direction: column; align-items: center; justify-content: center;
           font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
           color: rgba(255, 255, 255, .6); line-height: 1; }
.hp-date b { font-size: 1.05rem; color: #fff; margin-bottom: .12rem; }
.hp-up-body { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.hp-up-ev, .hp-up-me { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-up-ev { font-weight: 700; font-size: .86rem; }
.hp-up-me { font-size: .76rem; color: rgba(255, 255, 255, .6); }
.hp-side-more { margin: auto .5rem 0; padding-top: .6rem; font-size: .8rem; font-weight: 700;
                color: rgba(255, 255, 255, .75); }
.hp-side-more:hover { color: #fff; }

/* ---- by the numbers: a hairline grid, drawn by the gap over a lined floor ---- */
.hp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.5fr);
           gap: 1px; background: var(--hp-line); border: 1px solid var(--hp-line);
           border-radius: 14px; overflow: hidden; }
.hp-kpi { background: var(--hp-card); padding: .75rem 1.1rem; display: flex; flex-direction: column;
          justify-content: center; min-width: 0; }
.hp-kpi b { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15;
            font-variant-numeric: tabular-nums; }
.hp-kpi span { font-size: .75rem; color: var(--muted); }
.hp-kpi-spark svg { width: 100%; height: 30px; display: block; margin-bottom: .15rem; }
.hp-kpi-spark .area { fill: var(--accent); opacity: .14; }
.hp-kpi-spark .line { fill: none; stroke: var(--accent); stroke-width: 1.6;
                      vector-effect: non-scaling-stroke; }

/* ---- cards and the one row shape ---- */
.hp-grid { display: grid; gap: 1.25rem; }
.hp-grid-p4p { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.hp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-card { background: var(--hp-card); border: 1px solid var(--hp-line); border-radius: 14px;
           padding: 1rem 1.1rem .9rem; min-width: 0; }
.hp-h { display: flex; align-items: baseline; gap: .25rem .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.hp-h h2 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.hp-h-sub { font-size: .78rem; color: var(--muted); }
.hp-h-link { margin-left: auto; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.hp-h-link:hover { text-decoration: underline; }
.hp-sub-h { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
            margin: .1rem 0 .15rem; }
.hp-sub-h.up { color: var(--win); }
.hp-sub-h.down { color: var(--loss); margin-top: .8rem; }

.hp-list { list-style: none; margin: 0; padding: 0; }
.hp-row { display: flex; align-items: center; gap: .65rem; padding: .38rem .5rem; margin: 0 -.5rem;
          border-radius: 10px; color: inherit; }
.hp-row:hover { background: var(--hp-hover); }
.hp-rk { flex: 0 0 1.35rem; text-align: center; font-weight: 800; font-size: .88rem;
         color: var(--muted); font-variant-numeric: tabular-nums; }
.hp-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.22; }
.hp-nm b, .hp-nm small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-nm b { font-weight: 650; }
.hp-row:hover .hp-nm b { color: var(--accent); }
.hp-nm small { font-size: .76rem; color: var(--muted); }
.hp-rt { flex: 0 0 auto; min-width: 3.4rem; display: flex; flex-direction: column; align-items: flex-end;
         gap: 3px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hp-meter { display: block; width: 3.4rem; height: 4px; border-radius: 2px; background: var(--hp-line); overflow: hidden; }
.hp-meter i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.hp-empty { color: var(--muted); font-size: .85rem; padding: .4rem 0; }

.hp-mv { flex: 0 0 auto; min-width: 2rem; text-align: center; font-size: .72rem; font-weight: 800;
         font-variant-numeric: tabular-nums; }
.hp-mv.up   { color: var(--win); }
.hp-mv.down { color: var(--loss); }
.hp-mv.flat { color: var(--muted-2); }
.hp-mv.new  { color: var(--accent); font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; }

.hp-pill { flex: 0 0 auto; font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums;
           padding: .14rem .55rem; border-radius: 999px; }
.hp-pill.up   { color: var(--res-win-fg);  background: var(--res-win-bg); }
.hp-pill.down { color: var(--res-loss-fg); background: var(--res-loss-bg); }
.hp-pill.dog  { color: var(--title-fg);    background: var(--title-bg); }
.hp-streak { flex: 0 0 auto; font-size: .72rem; font-weight: 800; color: var(--muted); }
.hp-streak b { font-size: 1.2rem; color: var(--ink); margin-right: 1px; font-variant-numeric: tabular-nums; }

/* ---- pound for pound: the number one gets the champion's card ---- */
.hp-p4p { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.1rem; align-items: start; }
.hp-top1 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem;
           padding: 1.4rem 1rem 1rem; border-radius: 14px; color: #fff;
           background:
             radial-gradient(75% 55% at 50% 24%, rgba(227, 179, 65, .33), transparent 72%),
             linear-gradient(160deg, #252a33, #101216); }
.hp-top1 .hp-face { border: 3px solid var(--hp-gold); background: rgba(255, 255, 255, .07);
                    transition: transform .15s ease; }
.hp-top1:hover .hp-face { transform: scale(1.03); }
.hp-top1-body { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 100%; }
.hp-eyebrow { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--hp-gold); }
.hp-top1-name { font-size: 1.55rem; font-weight: 850; letter-spacing: -.01em; line-height: 1.1; }
.hp-top1:hover .hp-top1-name { text-decoration: underline; }
.hp-top1-meta { font-size: .8rem; color: rgba(255, 255, 255, .65); }
.hp-top1-meta .flag { border-color: rgba(255, 255, 255, .2); }
.hp-top1-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%;
                 margin-top: .65rem; padding-top: .7rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.hp-top1-stats > span { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.hp-top1-stats b, .hp-top1 .hp-mv { font-size: 1.2rem; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; }
.hp-top1-stats small { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
                       color: rgba(255, 255, 255, .55); }
.hp-top1 .hp-mv.up { color: #3fb950; }
.hp-top1 .hp-mv.down { color: #f85149; }
.hp-top1 .hp-mv.flat { color: rgba(255, 255, 255, .8); }
.hp-top1-career { display: block; width: 100%; margin-top: .45rem; }
.hp-top1-career svg { display: block; width: 100%; height: 42px; }
.hp-top1-career .area { fill: var(--hp-gold); opacity: .16; }
.hp-top1-career .line { fill: none; stroke: var(--hp-gold); stroke-width: 1.8;
                        vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hp-top1-career small { display: block; margin-top: .15rem; font-size: .62rem; letter-spacing: .06em;
                        text-transform: uppercase; color: rgba(255, 255, 255, .45); }

/* ---- division leaders ---- */
/* align-items: start so opening one card does not stretch its row-mates */
.hp-divs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.hp-div { background: var(--hp-card); border: 1px solid var(--hp-line); border-radius: 14px;
          padding: .8rem .9rem .55rem; display: flex; flex-direction: column; min-width: 0; }
.hp-div-h { display: flex; align-items: center; justify-content: space-between; gap: .4rem;
            margin-bottom: .65rem; font-size: .7rem; font-weight: 800; text-transform: uppercase;
            letter-spacing: .09em; color: var(--ink-2); }
.hp-div-h:hover > span:first-child { color: var(--accent); }
.hp-tag { font-size: .58rem; letter-spacing: .07em; padding: .12rem .45rem; border-radius: 999px; }
.hp-tag.m { color: var(--accent);   background: color-mix(in srgb, var(--accent) 13%, transparent); }
.hp-tag.f { color: var(--hp-women); background: color-mix(in srgb, var(--hp-women) 14%, transparent); }
.hp-div-top { display: flex; align-items: center; gap: .8rem; color: inherit;
              padding: 0 0 .65rem .15rem; border-bottom: 1px solid var(--hp-line); }
.hp-div-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.hp-div-who b { font-size: 1rem; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-div-top:hover .hp-div-who b { color: var(--accent); }
.hp-div-who small { font-size: .76rem; color: var(--muted); }
.hp-div-rt { display: flex; align-items: center; gap: .3rem; margin-top: .15rem;
             font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.hp-div-rt .hp-mv { min-width: 0; }
.hp-div-rest { list-style: none; margin: .35rem 0 0; padding: 0; }
.hp-div-rest a { display: flex; align-items: center; gap: .45rem; padding: .22rem .35rem; margin: 0 -.35rem;
                 border-radius: 8px; color: inherit; font-size: .85rem; }
.hp-div-rest a:hover { background: var(--hp-hover); }
.hp-div-rest .hp-rk { flex-basis: 1rem; font-size: .76rem; }
.hp-div-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-div-r { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hp-div-more > summary { list-style: none; cursor: pointer; text-align: center; margin: .2rem -.35rem 0;
                         padding: .22rem; border-radius: 8px; font-size: .72rem; font-weight: 800;
                         text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.hp-div-more > summary::-webkit-details-marker { display: none; }
.hp-div-more > summary:hover { background: var(--hp-hover); }
.hp-div-more > summary::after { content: " \25BE"; }
.hp-div-more[open] > summary::after { content: " \25B4"; }
.hp-div-more:not([open]) .less, .hp-div-more[open] .more { display: none; }
.hp-div-more > .hp-div-rest { margin-top: .1rem; }

/* Everyone / UFC only: a two-button segmented control; the section's
   data-org decides which set of boards (and which note) is on screen. */
.hp-seg { display: inline-flex; padding: 2px; border-radius: 999px; gap: 2px;
          background: var(--hp-line); align-self: center; }
.hp-seg button { border: 0; background: transparent; color: var(--ink-2); font-size: .74rem;
                 font-weight: 700; padding: .2rem .7rem; border-radius: 999px; line-height: 1.4; }
.hp-seg button[aria-pressed="true"] { background: var(--hp-card); color: var(--ink);
                                      box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.hp-leaders[data-org="all"] [data-org="ufc"]:not(button),
.hp-leaders[data-org="ufc"] [data-org="all"]:not(button) { display: none; }
.hp-note { margin: .6rem 0 0; font-size: .76rem; color: var(--muted); }

/* last card: how it ended, then what it was worth */
.hp-results .hp-nm b { display: flex; align-items: center; gap: .35rem; }
.hp-results .hp-belt { font-size: .56rem; padding: .08rem .4rem; }
.hp-how { flex: 0 0 4.2rem; display: flex; flex-direction: column; align-items: flex-end;
          font-size: .8rem; font-weight: 750; line-height: 1.2; }
.hp-results .c-odds, .hp-res-head .c-odds { flex: 0 0 3.8rem; display: flex; justify-content: flex-end; }
.hp-results .c-elo,  .hp-res-head .c-elo  { flex: 0 0 3.6rem; display: flex; justify-content: flex-end; }
.hp-res-head { display: flex; gap: .65rem; padding: 0 0 .2rem; margin-top: -.3rem;
               font-size: .62rem; font-weight: 800; letter-spacing: .08em;
               text-transform: uppercase; color: var(--muted); }
.hp-res-head .hp-res-sp { flex: 1; }
.hp-res-head .c-how { flex: 0 0 4.2rem; text-align: right; }
.hp-pill.fav { color: var(--ink-2); background: var(--hp-line); }
.hp-how small { font-size: .72rem; font-weight: 500; color: var(--muted); }
.hp-delta { min-width: 3.1rem; text-align: center; }

/* ---- narrower screens ---- */
/* Between a phone and a wide screen the side panels drop under the board
   they sat beside, so a single list would run the full width with nothing
   in it: the movers split into rising | falling, and the all-time list takes
   two columns under the other two cards. */
@media (max-width: 1199px) {
  .hp-divs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-grid-p4p { grid-template-columns: minmax(0, 1fr); }
  .hp-movers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
  .hp-movers .hp-sub-h.down { margin-top: .1rem; }
  .hp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-grid-3 > :last-child { grid-column: 1 / -1; }
  .hp-list-2 { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto);
               grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
}
@media (max-width: 991px) {
  .hp-hero { grid-template-columns: minmax(0, 1fr); }
  .hp-hero-side { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
  .hp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-kpi-spark { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .hp-p4p { grid-template-columns: minmax(0, 1fr); }
  .hp-divs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .hp-grid-3, .hp-movers { grid-template-columns: minmax(0, 1fr); }
  .hp-movers .hp-sub-h.down { margin-top: .8rem; }
  .hp-list-2 { display: block; }
}
@media (max-width: 575px) {
  .hp { gap: 1rem; }
  .hp-hero { border-radius: 14px; }
  .hp-hero-main { padding: .9rem .8rem 1rem; }
  .hp-hero-side .hp-up:nth-of-type(n+4) { display: none; }
  .hp-bout { gap: .35rem; margin: .8rem 0 .9rem; }
  .hp-face.xl { width: 92px; height: 92px; }
  .hp-face-init.xl { font-size: 1.8rem; }
  .hp-corner-name { font-size: 1.02rem; }
  .hp-corner-meta { font-size: .72rem; }
  .hp-corner-elo { font-size: 1.2rem; }
  .hp-vs-word { font-size: 1.5rem; }
  .hp-vs-sub { display: none; }
  .hp-split { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .hp-split-lab { text-align: left; }
  .hp-card { padding: .85rem .8rem .7rem; }
  .hp-div { padding: .7rem .65rem .45rem; }
  .hp-div-top { flex-direction: column; text-align: center; gap: .45rem; padding-left: 0; }
  .hp-div-who { align-items: center; max-width: 100%; }
  .hp-div-who b { font-size: .9rem; max-width: 100%; }
  .hp-div-rt { justify-content: center; }
  .hp-div-rest .hp-mv { display: none; }
  .hp-div-rest a { font-size: .8rem; }
  .hp-kpi { padding: .6rem .8rem; }
  .hp-kpi b { font-size: 1.1rem; }
  /* the last card has three number columns; the name needs the photo's room */
  .hp-results .hp-face { display: none; }
  .hp-results .c-odds, .hp-res-head .c-odds { flex-basis: 3.3rem; }
  .hp-results .hp-how, .hp-res-head .c-how { flex-basis: 3.8rem; }
  .hp-results .c-elo, .hp-res-head .c-elo { flex-basis: 3.1rem; }
}

/* ---------- UFC rankings vs Elo ----------
   Built from the home page's pieces (hp-card, hp-row, hp-face, the pills);
   what is here is only the table and the controls that page did not need. */
.ur-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; }
.ur-head h1 { font-size: 1.6rem; font-weight: 850; letter-spacing: -.01em; margin: 0 0 .2rem; }
.ur-head p { margin: 0; color: var(--muted); font-size: .9rem; max-width: 46rem; }
.ur-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.ur-chip { font-size: .76rem; padding: .22rem .65rem; border-radius: 999px; white-space: nowrap;
           background: var(--hp-card); border: 1px solid var(--hp-line); color: var(--ink-2); }

.ur-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ur-gaps .hp-seg { margin-left: auto; }
.ur-gaps[data-side="up"] ol[data-side="down"],
.ur-gaps[data-side="down"] ol[data-side="up"] { display: none; }
.ur-agree .hp-row.on { background: var(--hp-hover); }
.ur-agree .hp-row.on .hp-nm b { color: var(--accent); }
.ur-rho-bar { flex: 0 0 38%; height: 6px; border-radius: 3px; background: var(--hp-line); overflow: hidden; }
.ur-rho-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.ur-rho-bar i.neg { background: var(--loss); }
.ur-rho { flex: 0 0 2.6rem; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

.ur-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.ur-tab { flex: 0 0 auto; white-space: nowrap; padding: .34rem .8rem; border-radius: 999px; font-size: .82rem;
          font-weight: 650; color: var(--ink-2); background: var(--hp-card); border: 1px solid var(--hp-line); }
.ur-tab:hover { border-color: var(--border-strong); color: var(--ink); }
.ur-tab.on { background: var(--ink); border-color: var(--ink); color: var(--hp-card); }

.ur-wrap { overflow-x: auto; margin: 0 -.25rem; }
.ur-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; }
.ur-table th { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
               color: var(--muted); text-align: center; white-space: nowrap;
               padding: .3rem .45rem .45rem; border-bottom: 1px solid var(--hp-line); }
.ur-table td { text-align: center; padding: .32rem .45rem; border-bottom: 1px solid var(--hp-line);
               font-variant-numeric: tabular-nums; white-space: nowrap; }
.ur-table tbody tr:last-child td { border-bottom: 0; }
.ur-table tbody tr:hover td { background: var(--hp-hover); }
.ur-table th.nm, .ur-table td.nm { text-align: left; width: 40%; max-width: 0; }
.ur-who { display: flex; align-items: center; gap: .6rem; color: inherit; min-width: 0; }
.ur-who:hover .hp-nm b { color: var(--accent); }
.ur-pos { font-weight: 800; color: var(--muted); width: 2.2rem; }
.ur-pos.c, .ur-c { color: var(--hp-gold); font-weight: 800; }
.ur-rk { font-weight: 700; }
.ur-table .hp-mv { min-width: 0; margin-left: .25rem; }
.ur-elo { font-weight: 800; }
.ur-none, .ur-same { color: var(--muted-2); font-size: .8rem; }
.ur-snubs .hp-rt { min-width: 3rem; }
.ur-foot { color: var(--muted); font-size: .78rem; margin: 0; max-width: 60rem; }

@media (max-width: 991px) {
  .ur-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  /* one scrolling row on a phone rather than four wrapped ones */
  .ur-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: thin; }
}
@media (max-width: 575px) {
  .ur-head h1 { font-size: 1.35rem; }
  .ur-table td.nm { width: auto; }
  /* the four that make the comparison; Meta and the raw rating are on desktop */
  .ur-table { min-width: 0; }
  .ur-table .ur-opt { display: none; }
}

/* ---------- hover explanations (static/js/tips.js) ----------
   One fixed element on <body>, so a table that scrolls in its own box cannot
   clip it. Anything carrying a tip gets a dotted underline where it is text,
   which is the only hint a reader has that hovering will say something. */
.site-tip { position: fixed; z-index: 2000; max-width: 300px; padding: .45rem .65rem;
            border-radius: 8px; background: var(--ink); color: var(--surface);
            font-size: .78rem; font-weight: 500; line-height: 1.4; letter-spacing: 0;
            text-transform: none; box-shadow: var(--shadow); pointer-events: none; }
th[data-tip], .hp-kpi[data-tip] span, .fp-mr-h[data-tip] {
  cursor: help; text-decoration: underline dotted; text-decoration-color: var(--muted-2);
  text-underline-offset: 3px; }
[data-tip] { cursor: help; }
a[data-tip], button[data-tip] { cursor: pointer; }

/* ---------- fighter page ----------
   Built from the home page's pieces - the dark stage, cards, the one row
   shape, pills and segmented buttons - so a profile reads as the same site.
   What is here is only what a profile has and the home page does not. */

/* the header: who, how good, and what is next */
.fp-hero { position: relative; display: grid; gap: 1.25rem 2rem; align-items: center;
           grid-template-columns: minmax(0, 1fr) auto auto;
           padding: 1.4rem 1.6rem 1.6rem; border-radius: 18px; color: #f3f5f7;
           background:
             radial-gradient(60% 120% at 8% 30%, rgba(62, 139, 255, .26), transparent 70%),
             radial-gradient(40% 90% at 78% 50%, rgba(227, 179, 65, .14), transparent 70%),
             linear-gradient(135deg, #181b22 0%, #0c0e12 100%);
           box-shadow: 0 10px 30px rgba(0, 0, 0, .16); }
.fp-id { display: flex; align-items: center; gap: 1.4rem; min-width: 0; }
.fp-pic .hp-face { border: 3px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .07); }
.fp-pic .hp-face-init { color: rgba(255, 255, 255, .5); }
.fp-who { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.fp-name { font-size: 2.1rem; font-weight: 850; letter-spacing: -.02em; line-height: 1.05; margin: 0; }
.fp-nick { font-size: .95rem; color: rgba(255, 255, 255, .6); font-style: italic; }
.fp-meta { font-size: .85rem; color: rgba(255, 255, 255, .7); display: flex; flex-wrap: wrap;
           align-items: center; gap: .2rem .1rem; }
.fp-meta .flag { border-color: rgba(255, 255, 255, .2); }
.fp-dot::before { content: "\00b7"; margin: 0 .45rem; color: rgba(255, 255, 255, .4); }
.fp-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.fp-chip { font-size: .72rem; font-weight: 750; padding: .22rem .65rem; border-radius: 999px;
           color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
.fp-chip:hover { background: rgba(255, 255, 255, .18); }
.fp-chip.gold { color: #1f1600; background: var(--hp-gold); border-color: var(--hp-gold); }
.fp-chip.ufc { background: rgba(229, 72, 77, .18); border-color: rgba(229, 72, 77, .45); }

.fp-elo { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.1; }
.fp-elo-l { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
            color: var(--hp-gold); }
.fp-elo b { font-size: 3.2rem; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fp-elo-s { font-size: .78rem; color: rgba(255, 255, 255, .6); }

.fp-next { display: flex; flex-direction: column; gap: .45rem; width: 250px; padding: .85rem .95rem;
           border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.fp-next-h { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
             color: var(--hp-red); }
.fp-next-opp { display: flex; align-items: center; gap: .7rem; color: inherit; }
.fp-next-opp .hp-face { border: 2px solid var(--hp-blue); background: rgba(255, 255, 255, .07); }
.fp-next-opp span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.fp-next-opp b { font-size: 1.02rem; font-weight: 800; }
.fp-next-opp small { font-size: .74rem; color: rgba(255, 255, 255, .6); }
a.fp-next-opp:hover b { text-decoration: underline; }
.fp-next-ev { font-size: .78rem; color: rgba(255, 255, 255, .75); }
.fp-next-ev:hover { color: #fff; text-decoration: underline; }
.fp-next-odds { display: flex; align-items: center; gap: .6rem; font-size: .78rem; font-weight: 700;
                font-variant-numeric: tabular-nums; }
.fp-next-odds a { margin-left: auto; color: #fff; }
.fp-next-odds a:hover { text-decoration: underline; }

.fp-links { position: absolute; right: 1.1rem; bottom: .55rem; display: flex; gap: .8rem;
            font-size: .7rem; color: rgba(255, 255, 255, .4); }
.fp-links a { color: rgba(255, 255, 255, .55); }
.fp-links a:hover { color: #fff; text-decoration: underline; }

/* the number strip: six across */
.fp-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fp-up { color: var(--win); }
.fp-down { color: var(--loss); }

/* the chart card: the existing SVG, framed like everything else */
.fp-chart .chart-wrap { margin-top: -.2rem; }
.fp-chart .hp-seg { margin-left: auto; }

/* the record: W-L large, then a butterfly by method */
.fp-record .hp-seg { margin-left: auto; }
.fp-wl { display: flex; align-items: baseline; gap: .35rem; margin: .1rem 0 .7rem; }
.fp-wl-n { font-size: 2.6rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.fp-wl-n.win { color: var(--win); }
.fp-wl-n.loss { color: var(--loss); }
.fp-wl-sep { font-size: 1.8rem; color: var(--muted-2); }
.fp-wl-x { margin-left: .5rem; font-size: .82rem; color: var(--muted); }
.fp-bars { display: flex; flex-direction: column; gap: .35rem; }
.fp-bf { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 6.2rem minmax(0, 1fr) 1.6rem;
         align-items: center; gap: .4rem; font-size: .82rem; }
.fp-bf .n { font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
.fp-bf .n.win { color: var(--win); }
.fp-bf .n.loss { color: var(--loss); }
.fp-bf .lab { text-align: center; color: var(--ink-2); font-weight: 600; }
.fp-bf .bw, .fp-bf .bl { display: flex; height: .7rem; border-radius: 4px; background: var(--hp-hover); overflow: hidden; }
.fp-bf .bw { justify-content: flex-end; }
.fp-bf .bw i, .fp-bf .bl i { display: block; height: 100%; border-radius: 4px; }
.fp-bf .bw i { background: var(--win); }
.fp-bf .bl i { background: var(--loss); }
.fp-bf-h { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.fp-bf-h .n { color: var(--muted); }
.fp-mr { display: flex; align-items: flex-end; gap: 1.1rem; margin-top: 1rem; padding-top: .8rem;
         border-top: 1px solid var(--hp-line); }
.fp-mr-h { flex: 1; font-size: .72rem; color: var(--muted); align-self: center; }
.fp-mr > span:not(.fp-mr-h) { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.fp-mr small { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fp-mr b { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.fp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* the fight table: the rankings pages' shape, not a spreadsheet's */
.fp-wrap { overflow: auto; max-height: 78vh; margin: 0 -.25rem; }
.fp-table { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; }
.fp-table thead th { position: sticky; top: 0; z-index: 2; background: var(--hp-card);
                     font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
                     color: var(--muted); text-align: center; white-space: nowrap;
                     padding: .35rem .45rem .45rem; border-bottom: 1px solid var(--hp-line); }
.fp-table td { text-align: center; padding: .38rem .45rem; border-bottom: 1px solid var(--hp-line);
               font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .86rem;
               vertical-align: middle; }
.fp-table th.l, .fp-table td.l { text-align: left; }
.fp-table tbody tr:last-child td { border-bottom: 0; }
.fp-table tbody tr:hover td { background: var(--hp-hover); }
.fp-table tr.am td { background: var(--am-bg); }
.fp-table tr.am:hover td { background: var(--am-bg-hover); }
.fp-table td small { display: block; font-size: .72rem; color: var(--muted); line-height: 1.2; }
.fp-no { color: var(--muted); font-weight: 700; }
.fp-opp a { color: var(--ink); font-weight: 650; }
.fp-opp a:hover { color: var(--accent); }
.fp-ev { max-width: 18rem; }
.fp-ev a { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.fp-ev a:hover { color: var(--accent); }
.fp-ev small { overflow: hidden; text-overflow: ellipsis; }
.fp-ev .hp-belt { font-size: .56rem; padding: .02rem .35rem; }
.fp-arrow { color: var(--muted-2); margin: 0 .3rem; font-size: .75rem; }
.fp-na { color: var(--muted-2); }
.fp-odds .dog { color: var(--loss); }
.fp-odds .fav { color: var(--win); }
.fp-table .hp-pill { font-size: .76rem; padding: .08rem .5rem; }
.fp-res { display: inline-block; min-width: 1.9rem; padding: .1rem .4rem; border-radius: 6px;
          font-size: .72rem; font-weight: 800; text-align: center; background: var(--hp-line); color: var(--ink-2); }
.fp-res.win  { background: var(--res-win-bg);  color: var(--res-win-fg); }
.fp-res.loss { background: var(--res-loss-bg); color: var(--res-loss-fg); }
.fp-m { display: inline-block; padding: .06rem .45rem; border-radius: 6px; font-size: .74rem; font-weight: 700;
        background: var(--hp-line); color: var(--m-fg); }
.fp-m.ko  { background: var(--m-ko); }
.fp-m.sub { background: var(--m-sub); }
.fp-m.dec { background: var(--m-dec); }
.fp-m.dq  { background: var(--m-dq); }
.fp-meth small { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; margin-top: .1rem; }

@media (max-width: 1199px) {
  .fp-hero { grid-template-columns: minmax(0, 1fr) auto; }
  .fp-next { grid-column: 1 / -1; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; }
  .fp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .fp-hero { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 1rem 2rem; }
  .fp-elo { align-items: flex-start; text-align: left; }
  .fp-elo b { font-size: 2.6rem; }
  .fp-two { grid-template-columns: minmax(0, 1fr); }
  .fp-table { min-width: 640px; }
  .fp-table .fp-opt { display: none; }
}
@media (max-width: 575px) {
  .fp-id { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .fp-pic .hp-face.xl { width: 104px; height: 104px; }
  .fp-name { font-size: 1.7rem; }
  .fp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-links { left: 1rem; right: auto; }
}

/* ---------- the site header ----------
   Dark in both themes - the same near-black as the stage panels - with the
   octagon mark from the favicon, pill links, and the fighter search. Sticky,
   and a touch translucent so the page reads as scrolling under it. */
.sh { position: sticky; top: 0; z-index: 1030;
      background: rgba(12, 14, 18, .94); border-bottom: 1px solid rgba(255, 255, 255, .08);
      backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); }
.sh-bar { padding: .45rem 0; }
.sh-in { gap: .5rem 1rem; flex-wrap: nowrap; max-width: 1480px; }
.sh-brand { display: inline-flex; align-items: center; gap: .55rem; flex: 0 0 auto;
            color: #fff; text-decoration: none; }
.sh-brand:hover { color: #fff; }
.sh-mark { width: 32px; height: 32px; display: block; transition: transform .2s ease; }
/* a lift, not a spin: turning the octagon would tilt the chevrons */
.sh-brand:hover .sh-mark { transform: translateY(-1px) scale(1.05); }
.sh-word { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700;
           font-size: 1.55rem; letter-spacing: .02em; line-height: 1; white-space: nowrap; }
.sh-word b { font-weight: 700; }

/* search: a pill that widens when you use it */
.sh-search { position: relative; flex: 0 1 300px; min-width: 0; display: flex; align-items: center;
             transition: flex-basis .2s ease; }
.sh-search:focus-within { flex-basis: 380px; }
.sh-glass { position: absolute; left: .75rem; width: 15px; height: 15px; color: rgba(255, 255, 255, .5);
            pointer-events: none; }
.sh-search input { width: 100%; height: 36px; padding: 0 2.2rem 0 2.2rem; border-radius: 999px;
                   border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .07);
                   color: #fff; font-size: .88rem; outline: none; }
.sh-search input::placeholder { color: rgba(255, 255, 255, .45); }
.sh-search input:focus { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .3);
                         box-shadow: 0 0 0 3px rgba(62, 139, 255, .25); }
.sh-search input::-webkit-search-cancel-button { display: none; }
.sh-kbd { position: absolute; right: .6rem; padding: .05rem .4rem; border-radius: 5px; font-size: .7rem;
          font-family: inherit; color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08);
          border: 1px solid rgba(255, 255, 255, .12); pointer-events: none; }
.sh-search:focus-within .sh-kbd { display: none; }

.sh-res { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 320px;
          max-height: 70vh; overflow-y: auto; padding: .35rem; border-radius: 14px;
          background: #1b1f26; border: 1px solid rgba(255, 255, 255, .1);
          box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.sh-item { display: flex; align-items: center; gap: .65rem; padding: .45rem .55rem; border-radius: 10px;
           color: #f3f5f7; text-decoration: none; }
.sh-item.on { background: rgba(255, 255, 255, .08); }
.sh-item:hover { color: #fff; }
.sh-face { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
           object-position: top center; background: rgba(255, 255, 255, .08); }
.sh-init { display: inline-flex; align-items: center; justify-content: center;
           font-size: .75rem; font-weight: 700; color: rgba(255, 255, 255, .5); }
.sh-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sh-nm b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-nm small { font-size: .74rem; color: rgba(255, 255, 255, .55); white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.sh-nm .flag { width: 16px; height: 12px; vertical-align: -1px; margin-right: .3rem;
               border-color: rgba(255, 255, 255, .2); }
.sh-elo { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
          font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sh-elo small { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
                color: rgba(255, 255, 255, .45); }
.sh-none { padding: .7rem .8rem; font-size: .85rem; color: rgba(255, 255, 255, .6); }

/* links: quiet until hovered, a pill when you are on the page */
.sh-links { align-items: center; gap: .15rem; }
.sh .sh-link { color: rgba(255, 255, 255, .72); font-size: .88rem; font-weight: 600;
               padding: .38rem .75rem !important; border-radius: 999px; }
.sh .sh-link:hover, .sh .sh-link:focus-visible { color: #fff; background: rgba(255, 255, 255, .07); }
.sh .sh-link.active, .sh .sh-link.show { color: #fff; background: rgba(255, 255, 255, .12); }
.sh .sh-link { white-space: nowrap; }
/* a laptop-width window: the full bar, a little tighter, rather than
   "UFC vs Elo" breaking over three lines */
@media (min-width: 992px) and (max-width: 1199px) {
  .sh .sh-link { padding: .38rem .5rem !important; font-size: .84rem; }
}
.sh .dropdown-toggle::after { margin-left: .35em; vertical-align: .15em; border-top-width: .28em;
                              border-right-width: .28em; border-left-width: .28em; opacity: .7; }
.sh-menu { --bs-dropdown-bg: #1b1f26; --bs-dropdown-border-color: rgba(255, 255, 255, .1);
           --bs-dropdown-link-color: #e9edf2; --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .08);
           --bs-dropdown-link-active-bg: rgba(62, 139, 255, .22); --bs-dropdown-link-active-color: #fff;
           border-radius: 12px; padding: .35rem; margin-top: .45rem !important; min-width: 12rem;
           box-shadow: 0 16px 40px rgba(0, 0, 0, .45); font-size: .88rem; }
.sh-menu .dropdown-item { border-radius: 8px; padding: .4rem .7rem; }
.sh-tools { margin-left: .35rem; }
.sh .theme-btn { width: 34px; height: 34px; border-radius: 50%; padding: 0; display: inline-flex;
                 align-items: center; justify-content: center; border-color: rgba(255, 255, 255, .16); }
.sh-install { margin-left: .4rem; height: 34px; padding: 0 .9rem; border-radius: 999px; font-size: .82rem;
              font-weight: 700; color: #fff; background: var(--hp-red); border: 0; }
.sh-install:hover { filter: brightness(1.1); }
.sh-burger { border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; padding: .3rem .5rem;
             flex: 0 0 auto; }
.sh-burger:focus { box-shadow: 0 0 0 3px rgba(62, 139, 255, .25); }

@media (max-width: 991px) {
  .sh-in { flex-wrap: wrap; }
  .sh-search { flex: 1 1 0; order: 2; }
  .sh-search:focus-within { flex-basis: 0; }
  .sh-burger { order: 3; }
  .sh-kbd { display: none; }
  #nav { order: 4; flex-basis: 100%; }
  .sh-links { align-items: stretch; gap: .1rem; padding: .5rem 0 .3rem; }
  .sh .sh-link { border-radius: 10px; }
  .sh-menu { box-shadow: none; margin-top: .1rem !important; background: rgba(255, 255, 255, .04); }
  .sh-tools { margin: .4rem 0 0; }
}
@media (max-width: 575px) {
  /* the list takes the screen's width, not the box's */
  .sh-res { position: fixed; left: .75rem; right: .75rem; top: 56px; min-width: 0; }
}
@media (max-width: 359px) {
  .sh-word { display: none; }
}

/* ---------- rankings ----------
   The controls are one card of pills and small labelled boxes; the board is
   the fight table's shape (hairline rows, faces, small second lines) with
   sortable headings and the site's own paging. */
.rk-ctl { display: flex; flex-direction: column; gap: .75rem; }
.rk-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .9rem; }
.rk-row2 { padding-top: .75rem; border-top: 1px solid var(--hp-line); align-items: center; }

.rk-search { position: relative; flex: 1 1 220px; max-width: 320px; margin: 0; }
.rk-search svg { position: absolute; left: .75rem; top: 50%; width: 15px; height: 15px;
                 transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.rk-search input { width: 100%; height: 38px; padding: 0 .9rem 0 2.2rem; border-radius: 999px;
                   border: 1px solid var(--hp-line); background: var(--hp-bg); color: var(--ink);
                   font-size: .9rem; outline: none; }
.rk-search input:focus, .rk-sel input:focus, .rk-sel select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.rk-seg { align-self: center; }
.rk-seg button { font-size: .82rem; padding: .32rem .85rem; }

.rk-sel { display: flex; flex-direction: column; gap: .15rem; margin: 0; }
.rk-sel > span { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
                 color: var(--muted); }
.rk-sel input, .rk-sel select { height: 34px; min-width: 9rem; padding: 0 .7rem; border-radius: 10px;
                                border: 1px solid var(--hp-line); background: var(--hp-bg);
                                color: var(--ink); font-size: .86rem; outline: none; }
.rk-sel select { padding-right: 1.8rem; }
.rk-org input { min-width: 13rem; }
.rk-small input { min-width: 0; width: 6.5rem; }
.rk-row2 .rk-sel { flex-direction: row; align-items: center; gap: .45rem; }
.rk-row2 .rk-sel > span { white-space: nowrap; }

.rk-switch { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: .86rem;
             font-weight: 600; cursor: pointer; user-select: none; }
.rk-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rk-track { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--hp-line);
            transition: background .15s ease; }
.rk-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
                   border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
                   transition: transform .15s ease; }
.rk-switch input:checked + .rk-track { background: var(--accent); }
.rk-switch input:checked + .rk-track::after { transform: translateX(16px); }
.rk-switch input:focus-visible + .rk-track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

.rk-more { flex: 1 1 100%; order: 10; }
.rk-more > summary { display: inline-flex; align-items: center; gap: .3rem; list-style: none; cursor: pointer;
                     font-size: .82rem; font-weight: 700; color: var(--accent); }
.rk-more > summary::-webkit-details-marker { display: none; }
.rk-more > summary::after { content: "\25BE"; font-size: .7rem; }
.rk-more[open] > summary::after { content: "\25B4"; }
.rk-more-in { display: flex; flex-wrap: wrap; gap: .6rem .9rem; margin-top: .6rem; }
.rk-more-in .rk-sel { flex-direction: column; align-items: stretch; }
.rk-reset { margin-left: auto; height: 32px; padding: 0 .9rem; border-radius: 999px; font-size: .8rem;
            font-weight: 700; color: var(--ink-2); background: transparent; border: 1px solid var(--hp-line); }
.rk-reset:hover { background: var(--hp-hover); color: var(--ink); }
.rk-chip { cursor: pointer; }
.rk-chip:hover { border-color: var(--border-strong); }
.rk-chip span { margin-left: .2rem; color: var(--muted); }

/* the board */
.rk-board { padding-bottom: .6rem; }
.rk-wrap { overflow: auto; max-height: 78vh; margin: -.2rem -.25rem 0; }
.rk-table { width: 100%; min-width: 960px; border-collapse: separate; border-spacing: 0; transition: opacity .15s; }
.rk-table.rk-busy { opacity: .45; }
.rk-table thead th { position: sticky; top: 0; z-index: 2; background: var(--hp-card);
                     font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
                     color: var(--muted); text-align: center; white-space: nowrap; cursor: pointer;
                     padding: .45rem .5rem .5rem; border-bottom: 1px solid var(--hp-line); user-select: none; }
.rk-table thead th:hover { color: var(--ink); }
.rk-table thead th.on { color: var(--accent); }
.rk-table thead th.on::after { content: " \25BE"; }
.rk-table thead th.on[data-dir="asc"]::after { content: " \25B4"; }
.rk-table td { text-align: center; padding: .4rem .5rem; border-bottom: 1px solid var(--hp-line);
               font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .86rem; }
.rk-table th.l, .rk-table td.l { text-align: left; }
.rk-table tbody tr:last-child td { border-bottom: 0; }
.rk-table tbody tr:hover td { background: var(--hp-hover); }
.rk-table td small { display: block; font-size: .72rem; color: var(--muted); line-height: 1.25; }
.rk-n { width: 3rem; color: var(--muted); font-weight: 800; }
.rk-who a { display: flex; align-items: center; gap: .65rem; color: inherit; min-width: 0; }
.rk-who a:hover .rk-nm b { color: var(--accent); }
.rk-face { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
           object-position: top center; background: var(--hp-face-bg); }
.rk-init { display: inline-flex; align-items: center; justify-content: center; font-size: .72rem;
           font-weight: 700; color: var(--muted); }
.rk-nm { display: flex; flex-direction: column; line-height: 1.22; min-width: 0; }
.rk-nm b { font-weight: 700; }
.rk-nm .flag { width: 16px; height: 12px; vertical-align: -1px; margin-right: .3rem; }
.rk-elo { font-weight: 800; font-size: .95rem !important; }
.rk-last small a { color: var(--muted); }
.rk-last small a:hover { color: var(--accent); }
.rk-na { color: var(--muted-2); }
.rk-msg { padding: 2rem 1rem !important; color: var(--muted); white-space: normal !important; }
.rk-retry { margin-left: .6rem; height: 30px; padding: 0 .8rem; border-radius: 999px; border: 0;
            background: var(--accent); color: #fff; font-size: .8rem; font-weight: 700; }

.rk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
           padding-top: .7rem; margin-top: .2rem; border-top: 1px solid var(--hp-line); }
.rk-count { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rk-size { margin: 0; font-size: .8rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; }
.rk-size select { height: 30px; padding: 0 1.6rem 0 .6rem; border-radius: 8px; border: 1px solid var(--hp-line);
                  background: var(--hp-bg); color: var(--ink); font-size: .8rem; }
.rk-pages { margin-left: auto; display: flex; align-items: center; gap: .2rem; }
.rk-pages button { min-width: 32px; height: 32px; padding: 0 .55rem; border-radius: 8px; border: 0;
                   background: transparent; color: var(--ink-2); font-size: .84rem; font-weight: 700;
                   font-variant-numeric: tabular-nums; }
.rk-pages button:hover:not(:disabled) { background: var(--hp-hover); color: var(--ink); }
.rk-pages button.on { background: var(--ink); color: var(--hp-card); }
.rk-pages button:disabled { opacity: .35; cursor: default; }
.rk-gap { color: var(--muted); padding: 0 .15rem; }

@media (max-width: 767px) {
  .rk-search { max-width: none; flex-basis: 100%; }
  /* two boxes to a row rather than a column of them */
  .rk-row > .rk-sel { flex: 1 1 calc(50% - .5rem); }
  .rk-row > .rk-sel input, .rk-row > .rk-sel select { width: 100%; min-width: 0; }
  .rk-table { min-width: 560px; }
  .rk-table .rk-opt { display: none; }
  .rk-pages { margin-left: 0; }
  .rk-reset { margin-left: 0; }
}

/* ---------- events ----------
   Coming-up cards are small versions of the home page's stage (dark, red and
   blue corners); results are rows by month, each with how its main event
   ended and how strong a card it was. */
.ev-ctl { display: flex; flex-direction: column; gap: .7rem; }
.ev-ctl-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .9rem; }
.ev-go { height: 34px; padding: 0 1.1rem; border-radius: 999px; border: 0; background: var(--accent);
         color: #fff; font-size: .84rem; font-weight: 700; }
.ev-go:hover { filter: brightness(1.08); }
.ev-ctl .rk-reset { margin-left: 0; display: inline-flex; align-items: center; text-decoration: none; }
.ev-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ev-chip { padding: .28rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 650;
           color: var(--ink-2); background: var(--hp-bg); border: 1px solid var(--hp-line); }
.ev-chip:hover { color: var(--ink); border-color: var(--border-strong); }
.ev-chip.on { color: var(--hp-card); background: var(--ink); border-color: var(--ink); }

/* the date badge, light or dark with the page */
.ev-date { flex: 0 0 2.9rem; height: 2.9rem; border-radius: 10px; display: flex; flex-direction: column;
           align-items: center; justify-content: center; line-height: 1; background: var(--hp-bg);
           border: 1px solid var(--hp-line); font-size: .6rem; font-weight: 700; text-transform: uppercase;
           letter-spacing: .06em; color: var(--muted); }
.ev-date b { font-size: 1.1rem; color: var(--ink); margin-bottom: .12rem; letter-spacing: 0; }

/* coming up */
.ev-up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.ev-up { display: flex; flex-direction: column; gap: .7rem; padding: .95rem 1rem .85rem; border-radius: 16px;
         color: #f3f5f7; text-decoration: none;
         background:
           radial-gradient(60% 80% at 12% 70%, rgba(229, 72, 77, .22), transparent 70%),
           radial-gradient(60% 80% at 88% 70%, rgba(62, 139, 255, .22), transparent 70%),
           linear-gradient(135deg, #181b22 0%, #0c0e12 100%);
         box-shadow: 0 8px 22px rgba(0, 0, 0, .14); transition: transform .15s ease, box-shadow .15s ease; }
.ev-up:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .22); }
.ev-up-top { display: flex; align-items: center; gap: .7rem; }
.ev-up .ev-date { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .1);
                  color: rgba(255, 255, 255, .6); }
.ev-up .ev-date b { color: #fff; }
.ev-up-when { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.ev-up-in { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--hp-red); }
.ev-up-org { font-size: .8rem; color: rgba(255, 255, 255, .65); }
.ev-up-name { font-size: .98rem; font-weight: 800; line-height: 1.25; }
.ev-up-bout { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .4rem; }
.ev-up-c { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; min-width: 0; }
.ev-up-c b { font-size: .84rem; font-weight: 700; line-height: 1.2; max-width: 100%;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-up-c .hp-face { border: 2px solid var(--hp-red); background: rgba(255, 255, 255, .07); }
.ev-up-c.c2 .hp-face { border-color: var(--hp-blue); }
.ev-up-c .hp-face-init { color: rgba(255, 255, 255, .5); }
.ev-up-vs { font-size: 1.1rem; font-weight: 900; font-style: italic; text-transform: uppercase;
            background: linear-gradient(90deg, var(--hp-red), var(--hp-blue));
            -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .1em; }
.ev-up-split { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; }
.ev-up-split .c1 { background: var(--hp-red); }
.ev-up-split .c2 { background: var(--hp-blue); }
.ev-up-pct { display: flex; justify-content: space-between; margin-top: -.45rem; font-size: .74rem;
             font-weight: 800; font-variant-numeric: tabular-nums; }
.ev-up-pl { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
            color: rgba(255, 255, 255, .45); align-self: center; }
.ev-up-foot { font-size: .74rem; color: rgba(255, 255, 255, .55); border-top: 1px solid rgba(255, 255, 255, .08);
              padding-top: .55rem; }

/* results */
.ev-key { font-size: .7rem; color: var(--muted); font-weight: 600; }
.ev-month { margin: .9rem 0 .35rem; font-size: .68rem; font-weight: 800; text-transform: uppercase;
            letter-spacing: .1em; color: var(--muted); }
.ev-month:first-of-type { margin-top: .1rem; }
.ev-list { list-style: none; margin: 0; padding: 0; }
.ev-row { display: grid; grid-template-columns: 2.9rem minmax(0, 1.25fr) minmax(0, 1fr) 7.5rem;
          align-items: center; gap: .9rem; padding: .45rem .5rem; margin: 0 -.5rem; border-radius: 12px;
          color: inherit; text-decoration: none; }
.ev-row:hover { background: var(--hp-hover); color: inherit; }
.ev-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ev-name b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-row:hover .ev-name b { color: var(--accent); }
.ev-name small, .ev-main-t small { font-size: .75rem; color: var(--muted); white-space: nowrap;
                                   overflow: hidden; text-overflow: ellipsis; }
.ev-main { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.ev-main-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ev-main-t b { font-weight: 650; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-str { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; line-height: 1.1;
          font-variant-numeric: tabular-nums; }
.ev-str b { font-weight: 800; }
.ev-str .hp-meter { width: 5.5rem; }
.ev-str small { font-size: .7rem; color: var(--muted); }
.ev-older { display: inline-block; margin-top: .9rem; font-size: .85rem; font-weight: 700; }
.ev-older:hover { text-decoration: underline; }

@media (max-width: 767px) {
  /* the main event drops under the card's name rather than off the row */
  .ev-row { grid-template-columns: 2.9rem minmax(0, 1fr) auto; row-gap: .3rem;
            grid-template-areas: "d n s" "d m s"; }
  .ev-row > .ev-date { grid-area: d; }
  .ev-row > .ev-name { grid-area: n; }
  .ev-row > .ev-main { grid-area: m; }
  .ev-row > .ev-str { grid-area: s; }
  .ev-main .hp-face { width: 26px; height: 26px; }
  .ev-str .hp-meter { width: 3.8rem; }
  /* a swipeable row, not six cards stacked above the results */
  .ev-up-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .75rem;
                margin: 0 -1rem; padding: 0 1rem .5rem; scrollbar-width: none; }
  .ev-up-grid::-webkit-scrollbar { display: none; }
  .ev-up { flex: 0 0 84%; scroll-snap-align: center; }
}

/* ---------- one card (/event) ----------
   The home page's stage for the main event, a bout list for reading, and the
   cheat sheet behind a toggle for working. Both views are in the page; the
   .evp data-view attribute decides which one shows. */
.evp[data-view="bouts"] [data-part="sheet"],
.evp[data-view="sheet"] [data-part="bouts"] { display: none; }

.evp-title { font-size: 1.05rem; }
.evp-done { background: rgba(255, 255, 255, .14); }
.evp-hero .hp-corner-pic { position: relative; display: inline-block; }
.evp-w { position: absolute; right: 4px; bottom: 6px; min-width: 30px; height: 30px; padding: 0 .4rem;
         border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
         font-size: .8rem; font-weight: 900; color: #fff; background: var(--win);
         border: 2px solid #111418; }
.evp-w.sm { position: static; min-width: 22px; height: 22px; font-size: .66rem; border-width: 0; flex: 0 0 auto; }
.evp-lost { opacity: .6; }
.evp-hero .hp-vs { gap: .25rem; }
.evp-how { font-size: 1.35rem; font-weight: 900; color: #fff; line-height: 1.1; white-space: nowrap; }
.evp-clock { font-size: .8rem; font-weight: 700; color: rgba(255, 255, 255, .65); }

.evp-aside { gap: .5rem; }
.evp-stat { display: flex; align-items: baseline; gap: .45rem; padding: .35rem .5rem; }
.evp-stat b { font-size: 1.25rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.evp-stat span { font-size: .78rem; color: rgba(255, 255, 255, .6); }
.evp-stat-t { flex-direction: column; align-items: flex-start; gap: .1rem; }
.evp-stat-t > span { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.evp-stat-t b { font-size: .92rem; font-weight: 800; line-height: 1.25; }
.evp-stat-t small { font-size: .74rem; color: rgba(255, 255, 255, .6); }
.evp-finish { display: flex; gap: 3px; margin: .25rem .5rem; border-radius: 8px; overflow: hidden; }
.evp-fin { min-width: 2.6rem; padding: .3rem .4rem; font-size: .72rem; font-weight: 800; text-align: center;
           color: #fff; white-space: nowrap; }
.evp-fin.ko { background: #c2413b; }
.evp-fin.sub { background: #3b8f5c; }
.evp-fin.dec { background: #3b6fc2; }
.evp-fin.other { background: #5b6270; }
.evp-dog { color: var(--hp-gold); font-weight: 800; }
.evp-fav { color: var(--win); font-weight: 700; }

.evp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.evp-note { font-size: .78rem; color: var(--muted); }

/* the bout list: a row per bout, winner on the left */
.evp-list { list-style: none; margin: 0; padding: 0; }
.evp-list > li + li { border-top: 1px solid var(--hp-line); }
.evp-bout { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 11rem minmax(0, 1fr);
            align-items: center; gap: .9rem; padding: .6rem .5rem; margin: 0 -.5rem; border-radius: 12px;
            color: inherit; text-decoration: none; }
a.evp-bout:hover { background: var(--hp-hover); color: inherit; }
.evp-no { font-weight: 800; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.evp-list > li:first-child .evp-no { color: var(--hp-gold); }
.evp-side { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.evp-side.s2 { flex-direction: row-reverse; text-align: right; }
.evp-side.lost { opacity: .55; }
.evp-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.evp-who b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evp-side.won .evp-who b { font-weight: 850; }
.evp-who small { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden;
                 text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.evp-mid { display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; line-height: 1.2; }
.evp-mid .evp-how { font-size: .95rem; color: var(--ink); }
.evp-mid .evp-clock { font-size: .74rem; color: var(--muted); }
.evp-div { font-size: .7rem; color: var(--muted); white-space: nowrap; }
.evp-div .hp-belt { font-size: .56rem; padding: .02rem .35rem; }
.evp-vs { font-weight: 900; font-style: italic; color: var(--muted-2); text-transform: uppercase; }
.evp-pct { display: flex; align-items: center; gap: .4rem; width: 100%; font-size: .8rem;
           font-variant-numeric: tabular-nums; }
.evp-pct b { font-weight: 800; min-width: 1.6rem; }
.evp-bar2 { flex: 1; display: block; height: 6px; border-radius: 3px; background: var(--hp-blue); overflow: hidden; }
.evp-bar2 i { display: block; height: 100%; background: var(--hp-red); }

/* the cheat sheet, framed like the other tables */
.evp-sheet .table-wrap { margin: 0 -.25rem; }
.card-sheet thead.cs-head th { background: var(--surface-2); color: var(--ink-2); font-size: .7rem;
                               font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
                               border-color: var(--hp-line); vertical-align: middle; }
.card-sheet thead.cs-head th.stick-2 { background: var(--surface-2); }
[data-bs-theme="dark"] .card-sheet thead.cs-head th { background: #22272e; }

@media (max-width: 767px) {
  .evp-bout { grid-template-columns: 1.4rem minmax(0, 1fr) minmax(0, 1fr); row-gap: .35rem;
              grid-template-areas: "n a b" "n m m"; }
  .evp-bout > .evp-no { grid-area: n; }
  .evp-bout > .evp-side.s1 { grid-area: a; }
  .evp-bout > .evp-side.s2 { grid-area: b; }
  .evp-bout > .evp-mid { grid-area: m; flex-direction: row; justify-content: center; gap: .6rem; }
  .evp-how { font-size: 1.05rem; }
  /* names first: no photo or W badge beside them, and they may wrap - the
     winner is still the bold one and the loser still faded */
  .evp-bout .evp-side .hp-face, .evp-w.sm { display: none; }
  .evp-who b, .evp-who small { white-space: normal; }
}

/* ---------- the cheat sheet, in the site's own style ----------
   A heat map of rounded tiles on the card rather than a ruled grid. The
   gaps between tiles are BORDERS, not border-spacing: the first two columns
   stay put while the rest scrolls under them, and a real gap would be a
   window onto the scrolling cells. So every cell carries a 2px border -
   transparent on the scrolling ones, the card's own colour on the frozen
   ones - and paints its tint inside it. Bouts are told apart by a little
   more space above each, where the old sheet ruled a line. */
.evp .card-sheet { --card-bg: var(--hp-card); --corner-1: var(--hp-red); --corner-2: var(--hp-blue);
                   --bs-table-bg: transparent; --bs-table-color: var(--ink);
                   border-collapse: separate; border-spacing: 0; margin: 0;
                   font-size: .84rem; font-variant-numeric: tabular-nums; }
.evp .card-sheet > :not(caption) > * > * { border: 2px solid transparent !important;
                                            background-clip: padding-box; border-radius: 9px;
                                            padding: .34rem .5rem; }
.evp .card-sheet tbody tr.bout-top > td { border-top-width: 7px !important; }

/* headings: quiet, with each group underlined */
.evp .card-sheet thead.cs-head th { background: transparent !important; color: var(--muted);
                                    font-size: .62rem; letter-spacing: .08em; }
.evp .card-sheet thead tr:first-child th[colspan] { box-shadow: inset 0 -2px 0 var(--hp-line); border-radius: 0; }
.evp .card-sheet thead th.stick-1, .evp .card-sheet thead th.stick-2 { background: var(--hp-card) !important; }

/* the frozen columns: solid all round, a faint edge where the scroll starts */
.evp .card-sheet td.stick-1, .evp .card-sheet td.stick-2,
.evp .card-sheet th.stick-1, .evp .card-sheet th.stick-2 { border-color: var(--hp-card) !important;
                                                            border-radius: 0; background-clip: border-box; }
.evp .card-sheet td.stick-2, .evp .card-sheet th.stick-2 { border-right-color: var(--hp-line) !important; }
.evp .card-sheet td.stick-1 { font-size: 1rem; font-weight: 800; color: var(--muted); }
.evp .card-sheet td.stick-1 a { color: inherit; }
.evp .card-sheet td.stick-1 a:hover { color: var(--accent); }
.evp .card-sheet td.five { background-image: linear-gradient(color-mix(in srgb, var(--hp-gold) 22%, transparent),
                                                             color-mix(in srgb, var(--hp-gold) 22%, transparent)); }
.evp .card-sheet .belt { color: var(--hp-gold); font-size: .8rem; }

.cs-who { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.cs-who a { color: var(--ink); font-weight: 650; }
.cs-who a:hover { color: var(--accent); }
.hp-face.xs { width: 24px; height: 24px; }
.hp-face-init.xs { font-size: .56rem; }
.evp .card-sheet td.corner-1, .evp .card-sheet td.corner-2 { padding-left: .6rem; }
.evp .card-sheet .cs-elo { font-weight: 800; }

/* the tints, a shade lighter than the old sheet's: tiles read darker than a
   ruled grid at the same alpha */
.evp .card-sheet td.w-cell { background-color: color-mix(in srgb, var(--win) 11%, transparent); }
.evp .card-sheet td.l-cell { background-color: color-mix(in srgb, var(--loss) 11%, transparent); }
.evp .card-sheet td.div-cell { font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.evp .card-sheet td.div-cell.m { background-color: color-mix(in srgb, var(--hp-blue) 12%, transparent); }
.evp .card-sheet td.div-cell.f { background-color: color-mix(in srgb, var(--hp-women) 13%, transparent); }
.evp .card-sheet td.edge-cell { background-color: color-mix(in srgb, var(--muted) 18%, transparent); }
.evp .card-sheet td.hit { outline: 0; box-shadow: inset 0 0 0 2px var(--hp-gold); }

.evp .card-sheet .cs-res .fp-res { margin-right: .35rem; }
.cs-how { font-size: .74rem; color: var(--muted); }

/* ---------- the race page, in the site's own style ----------
   The board sits on a card like every other page's. The plot gives up its
   own frame and takes the card's colour - which the opaque name block and the
   value label have to match, or they show as patches as the bars cross. */
.race .race-plot { background: transparent; border: 0; border-radius: 0; padding: .5rem 0; }
.race .race-row { left: 0; right: 0; }
.race .race-head, .race .race-val { background: var(--hp-card); }
.race .race-rank { flex-basis: 1.6rem; font-size: .8rem; font-weight: 800; }
.race .race-face { background: var(--hp-face-bg); border: 0; }
.race .race-nm { font-weight: 650; }
.race .race-val { font-weight: 800; color: var(--ink); }
/* The bar fades in from the left: the axis does not start at zero, and a
   bar that is solid from its first pixel claims that it does. */
.race .race-bar { border-radius: 0 7px 7px 0;
                  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), var(--accent)); }
.race .race-row.f .race-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--race-f) 35%, transparent), var(--race-f)); }
.race .race-row.u .race-bar { background: var(--muted-2); }
.race .race-row.top1 .race-rank { color: var(--hp-gold); }
.race .race-row.top1 .race-face { box-shadow: 0 0 0 2px var(--hp-card), 0 0 0 3.5px var(--hp-gold); }
.race .race-stamp { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700;
                    font-size: clamp(2.6rem, 8vw, 5.5rem); letter-spacing: .01em; color: var(--muted);
                    opacity: .2; right: .1rem; bottom: .1rem; }

.rc-rules { border-bottom: 1px dotted var(--muted); cursor: help; white-space: nowrap; }
.rc-ctl .rc-small select { min-width: 6.8rem; }
.rc-ctl .rc-view { margin-left: auto; }

/* the records: the live No. 1 on the stage, three all-time marks beside it */
.rc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
           background: var(--hp-line); border: 1px solid var(--hp-line); border-radius: 14px; overflow: hidden; }
.rc-kpi { display: flex; flex-direction: column; gap: .45rem; min-width: 0; padding: .75rem 1rem;
          background: var(--hp-card); border: 0; color: inherit; font: inherit; text-align: left; }
button.rc-kpi { cursor: pointer; transition: background-color .15s; }
button.rc-kpi:hover:not(:disabled) { background: var(--hp-hover); }
button.rc-kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rc-kpi-l { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.rc-kpi-row { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.rc-kpi-who { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rc-kpi-who b { font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-kpi-who small { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden;
                    text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rc-kpi-v { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.rc-kpi-v b { font-size: 1.35rem; font-weight: 850; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rc-kpi-v small { font-size: .66rem; color: var(--muted); white-space: nowrap; }
.rc-face { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
           object-position: top; background: var(--hp-face-bg); }
.rc-init { display: inline-flex; align-items: center; justify-content: center;
           font-size: .74rem; font-weight: 800; color: var(--muted); }
.rc-now { color: #f3f5f7;
          background: radial-gradient(90% 140% at 0% 0%, rgba(214, 170, 60, .32), transparent 70%), #14181d; }
.rc-now .rc-kpi-l { color: var(--hp-gold); }
.rc-now .rc-kpi-who small, .rc-now .rc-kpi-v small { color: rgba(255, 255, 255, .62); }
.rc-now .rc-face { box-shadow: 0 0 0 2px #14181d, 0 0 0 3.5px var(--hp-gold); background: #2d333b; }
.rc-now .rc-init { color: rgba(255, 255, 255, .7); }

/* the board card: plot or table, then the transport, then the key */
.rc-board { padding-top: .75rem; }
.race .race-ctl { align-items: flex-start; margin-top: .6rem; padding-top: .8rem; border-top: 1px solid var(--hp-line); }
.race .race-play { width: 2.6rem; height: 2.6rem; border: 0; color: #fff; font-size: .9rem;
                   background: var(--accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent); }
.race .race-play:hover { background: color-mix(in srgb, var(--accent) 82%, #000); }
.rc-scrub { flex: 1 1 auto; min-width: 0; padding-top: .55rem; }
.rc-scrub .race-scrub { display: block; width: 100%; }
.rc-years { position: relative; height: 1rem; margin-top: .15rem; pointer-events: none; }
.rc-years span { position: absolute; top: 0; transform: translateX(-50%); font-size: .66rem;
                 color: var(--muted-2); font-variant-numeric: tabular-nums; }
.race .race-when { min-width: 5.8rem; padding-top: .6rem; font-size: 1rem; font-weight: 800; }
.rc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
           gap: .4rem 1.25rem; margin-top: .35rem; }
.rc-note { font-size: .76rem; color: var(--muted); max-width: 46rem; }

.rc-table-wrap { overflow-x: auto; margin: 0 -.25rem; }
.rc-table { min-width: 560px; }
.rc-table caption { caption-side: top; padding: 0 .5rem .6rem; font-size: .78rem; color: var(--muted); }
.rc-table .rc-rk { width: 2.6rem; font-weight: 800; color: var(--muted); }
.rc-table tr.top1 .rc-rk { color: var(--hp-gold); }
.rc-table .rc-elo { font-weight: 800; }
.rc-who { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); }
.rc-who:hover { color: var(--accent); }
.rc-who b { font-weight: 700; }
.rc-who .rc-face { width: 28px; height: 28px; }
.rc-who .rc-init { font-size: .6rem; }
.rc-table tr.top1 .rc-face { box-shadow: 0 0 0 2px var(--hp-card), 0 0 0 3.5px var(--hp-gold); }

@media (max-width: 1199px) {
  .rc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .rc-ctl .rc-view { margin-left: 0; }
}
@media (max-width: 575px) {
  /* one tile a row: in two columns every name was cut to its first word */
  .rc-kpis { grid-template-columns: minmax(0, 1fr); }
  .rc-kpi { padding: .55rem .8rem; gap: .3rem; }
  .rc-face { width: 32px; height: 32px; }
  .rc-kpi-v b { font-size: 1.15rem; }
  .rc-ctl .rk-sel { flex: 1 1 8rem; }
  .rc-ctl .rk-sel select { min-width: 0; width: 100%; }
  .race .race-when { min-width: 4.6rem; font-size: .9rem; }
  .rc-years span:nth-child(even) { display: none; }
  .rc-table th:nth-child(3), .rc-table td:nth-child(3) { display: none; }
  .rc-table { min-width: 0; }
}

/* ---------- fighter page: weight class column, pinned header ---------- */
.fp-table td.fp-wc { font-size: .82rem; white-space: nowrap; color: var(--ink-2); }
.fp-wc .hp-belt { font-size: .56rem; padding: .02rem .35rem; }

/* The slim header. Fixed under the site bar (fighter.js sets `top` to its
   height) and dark in both themes, like the header it stands in for. */
.fp-pin { position: fixed; left: 0; right: 0; top: 0; z-index: 1020; color: #f3f5f7;
          background:
            radial-gradient(40% 180% at 6% 50%, rgba(62, 139, 255, .22), transparent 70%),
            linear-gradient(135deg, #181b22 0%, #0f1115 100%);
          border-top: 1px solid rgba(255, 255, 255, .07);
          box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
          transform: translateY(-110%); visibility: hidden;
          transition: transform .22s ease, visibility 0s linear .22s; }
.fp-pin.on { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; }
.fp-pin-in { max-width: 1440px; margin: 0 auto; padding: .45rem 1rem; display: flex; align-items: center; gap: .6rem 1.1rem; }
.fp-pin-id { display: flex; align-items: center; gap: .65rem; min-width: 0; color: inherit; }
.fp-pin-id .hp-face { border: 2px solid rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .07); }
.fp-pin-id .hp-face-init { color: rgba(255, 255, 255, .55); }
.fp-pin-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.fp-pin-who b { font-size: 1.02rem; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-pin-who small { font-size: .74rem; color: rgba(255, 255, 255, .6); white-space: nowrap; }
a.fp-pin-id:hover b { text-decoration: underline; }
.fp-pin-elo { display: flex; align-items: baseline; gap: .35rem; font-variant-numeric: tabular-nums; }
.fp-pin-elo small { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--hp-gold); }
.fp-pin-elo b { font-size: 1.35rem; font-weight: 900; }
.fp-pin-next { margin-left: auto; font-size: .8rem; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.fp-pin-next small { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--hp-red); margin-right: .2rem; }
.fp-pin-next:hover { color: #fff; }
.fp-pin-x { margin-left: auto; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16);
            background: transparent; color: rgba(255, 255, 255, .7); font-size: 1.05rem; line-height: 1; padding: 0; }
.fp-pin-next + .fp-pin-x { margin-left: 0; }
.fp-pin-x:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.fp-pin-opt { border: 0; background: transparent; padding: 0; color: rgba(255, 255, 255, .55); font: inherit; }
.fp-pin-opt:hover { color: #fff; text-decoration: underline; }
.fp-pin-opt[aria-pressed="true"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
                                           background: var(--win); margin-right: .35rem; vertical-align: 1px; }

@media (max-width: 767px) {
  .fp-pin-chip, .fp-pin-next { display: none; }
  .fp-pin-in { padding: .4rem .75rem; }
}

/* the records beside each result: tabular, so a column of them lines up */
.fp-table td.fp-resc small { margin-top: .12rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-orec { font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* the live No. 1's unbroken run, the tile's second headline */
.rc-kpi-who small.rc-run, .rc-now .rc-kpi-who small.rc-run { color: var(--hp-gold); font-weight: 750; font-size: .78rem; }

/* a current champion, beside the name */
.hp-champ { display: inline-flex; align-items: center; margin-left: .4rem; vertical-align: 1px;
            color: var(--hp-gold); cursor: help; }
.hp-champ svg { width: 19px; height: 11px; display: block; }
.hp-champ:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---------- promotions (/promotions and /promotions/<org>) ----------
   The list leads with the four strongest leagues on the dark stage, then the
   filters and the full table. A promotion's own page borrows the fighter
   page's header and number strip, so the two read as the same kind of page. */
.pr-feat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.pr-fcard { position: relative; display: flex; flex-direction: column; gap: .6rem; min-width: 0;
            padding: 1rem 1.05rem .95rem; border-radius: 16px; color: #f3f5f7;
            background: radial-gradient(80% 110% at 0% 0%, rgba(62, 139, 255, .22), transparent 70%),
                        linear-gradient(135deg, #181b22 0%, #0c0e12 100%);
            box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.pr-fcard.top { background: radial-gradient(80% 110% at 0% 0%, rgba(214, 170, 60, .3), transparent 70%),
                            linear-gradient(135deg, #1b1a16 0%, #0c0e12 100%); }
.pr-fhead { display: flex; align-items: flex-start; gap: .55rem; min-width: 0; }
.pr-frank { flex: 0 0 auto; min-width: 1.6rem; height: 1.6rem; border-radius: 8px; display: inline-flex;
            align-items: center; justify-content: center; font-size: .82rem; font-weight: 900;
            background: rgba(255, 255, 255, .1); }
.pr-fcard.top .pr-frank { background: var(--hp-gold); color: #1f1600; }
.pr-fname { color: #fff; font-size: 1.02rem; font-weight: 850; line-height: 1.2; letter-spacing: -.01em; }
.pr-fname:hover { text-decoration: underline; color: #fff; }
.pr-flevel { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.pr-flevel > b { font-size: 2.1rem; font-weight: 900; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.pr-flevel > small { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--hp-gold); }
.pr-ftrend { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.pr-ftrend .pr-spark { width: 92px; height: 26px; }
.pr-ftrend small { font-size: .68rem; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.pr-ftrend small.up { color: #5fd08a; }
.pr-ftrend small.down { color: #ff8b8f; }
.pr-fcard .pr-spark .line { stroke: #8fb8ff; }
.pr-fcard .pr-spark .area { fill: #8fb8ff; }
.pr-fcard.top .pr-spark .line { stroke: var(--hp-gold); }
.pr-fcard.top .pr-spark .area { fill: var(--hp-gold); }
.pr-fstats { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: .78rem; color: rgba(255, 255, 255, .62); }
.pr-fstats b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.pr-fcard .pr-ends { width: 100%; height: 6px; }
.pr-ftop { display: flex; align-items: center; gap: .55rem; min-width: 0; margin-top: auto; padding-top: .55rem;
           border-top: 1px solid rgba(255, 255, 255, .09); color: inherit; }
.pr-ftop .hp-face { border: 2px solid rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .07); }
.pr-ftop .hp-face-init { color: rgba(255, 255, 255, .55); }
.pr-ftop > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pr-ftop small { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .5); }
.pr-ftop b { font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-ftop:hover b { text-decoration: underline; }
.pr-felo { font-weight: 900; font-variant-numeric: tabular-nums; }
.pr-fnext { font-size: .76rem; color: rgba(255, 255, 255, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-fnext small { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--hp-red); margin-right: .2rem; }
.pr-fnext:hover { color: #fff; }

/* the finish split: one bar, three colours, the same ones as the event page */
.pr-ends { display: flex; height: 7px; border-radius: 4px; overflow: hidden; gap: 1px; background: var(--hp-line); }
.pr-ends i { display: block; height: 100%; }
.pr-ends i.ko, .pr-endbar i.ko { background: #c2413b; }
.pr-ends i.sub, .pr-endbar i.sub { background: #3b8f5c; }
.pr-ends i.dec, .pr-endbar i.dec { background: #3b6fc2; }

/* the table */
.pr-ctl .rk-search { max-width: 280px; }
.pr-wrap { overflow-x: auto; margin: -.2rem -.25rem 0; }
.pr-table { min-width: 940px; }
.pr-table td { padding: .45rem .5rem; }
.pr-rk { width: 2.6rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-rk.one { color: var(--hp-gold); }
.pr-org a { color: var(--ink); font-weight: 700; }
.pr-org a:hover { color: var(--accent); }
.pr-org small { display: block; font-size: .72rem; color: var(--muted); }
.pr-tag { margin-left: .45rem; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
          padding: .08rem .4rem; border-radius: 999px; background: color-mix(in srgb, var(--hp-red) 16%, transparent);
          color: var(--hp-red); vertical-align: 1px; white-space: nowrap; cursor: help; }
.pr-lv { display: flex; align-items: center; gap: .6rem; }
.pr-lv b { min-width: 2.9rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.pr-bar { flex: 1 1 auto; min-width: 5rem; max-width: 9rem; height: 6px; border-radius: 3px; background: var(--hp-line); overflow: hidden; }
.pr-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), var(--accent)); }
.pr-trend { display: inline-flex; align-items: center; gap: .4rem; }
.pr-trend .pr-spark { width: 72px; height: 22px; }
.pr-trend small { min-width: 2.4rem; text-align: right; font-size: .74rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-trend small.up { color: var(--win); }
.pr-trend small.down { color: var(--loss); }
.pr-spark { display: block; overflow: visible; }
.pr-spark .line { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pr-spark .area { fill: var(--accent); opacity: .12; }
.pr-fin { display: inline-flex; align-items: center; gap: .45rem; }
.pr-fin .pr-ends { width: 64px; }
.pr-fin small { min-width: 2.2rem; text-align: right; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.pr-who { display: inline-flex; align-items: center; gap: .45rem; max-width: 15rem; color: var(--ink); }
.pr-who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pr-who small { font-size: .74rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-who:hover span { color: var(--accent); }
.pr-last { white-space: nowrap; font-size: .82rem; color: var(--ink-2); }
.pr-more { text-align: center; padding-top: .7rem; font-size: .85rem; font-weight: 700; }

/* one promotion */
.pr-hero { grid-template-columns: minmax(0, 1fr) auto auto; }
.pr-hid { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.pr-hero .fp-name { font-size: 2rem; }
.pr-next-ev { font-size: .9rem; font-weight: 800; color: #fff; line-height: 1.25; }
.pr-next-vs { display: flex; align-items: center; gap: .45rem; font-size: .8rem; line-height: 1.2; }
.pr-next-vs > span { flex: 1; min-width: 0; text-align: center; }
.pr-next-vs small { color: rgba(255, 255, 255, .5); }
.pr-next-vs .hp-face { border: 2px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .07); }
.pr-next-vs .hp-face-init { color: rgba(255, 255, 255, .55); }

.pr-grid-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.pr-grid-2b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-chart { display: block; width: 100%; height: auto; }
.pr-chart .gl { stroke: var(--grid); stroke-width: 1; }
.pr-chart .yt { fill: var(--muted-2); font-size: 10.5px; text-anchor: end; font-variant-numeric: tabular-nums; }
.pr-chart .xt { fill: var(--muted-2); font-size: 10.5px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.pr-chart .bar { fill: var(--hp-line); }
.pr-chart .ref { fill: none; stroke: var(--hp-red); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .7; }
.pr-chart .lv { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pr-chart .dot { fill: var(--hp-card); stroke: var(--accent); stroke-width: 2; pointer-events: none; }
.pr-chart .hit { fill: transparent; cursor: help; outline: none; }
.pr-chart .hit:hover + .dot, .pr-chart .hit:focus + .dot { fill: var(--accent); }
.pr-key { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .35rem; font-size: .75rem; color: var(--muted); }
.pr-key span { display: inline-flex; align-items: center; gap: .35rem; }
.pr-key i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.pr-key i.lv { background: var(--accent); }
.pr-key i.ref { background: repeating-linear-gradient(90deg, var(--hp-red) 0 4px, transparent 4px 7px); }
.pr-key i.bar { height: 9px; width: 9px; background: var(--hp-line); }

.pr-endlist { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.pr-endlist li { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) 2.6rem 3rem; align-items: center; gap: .6rem; }
.pr-endlab { font-size: .84rem; font-weight: 700; }
.pr-endbar { height: 10px; border-radius: 5px; background: var(--hp-line); overflow: hidden; }
.pr-endbar i { display: block; height: 100%; border-radius: 5px; }
.pr-endlist b { text-align: right; font-weight: 850; font-variant-numeric: tabular-nums; }
.pr-endlist small { text-align: right; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.1rem;
            padding-top: .9rem; border-top: 1px solid var(--hp-line); }
.pr-facts > div { display: flex; flex-direction: column; line-height: 1.25; }
.pr-facts small { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.pr-facts b { font-size: 1.35rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.pr-facts span { font-size: .76rem; color: var(--muted); }

.pr-roster { columns: 2; column-gap: 1.4rem; }
.pr-roster li { break-inside: avoid; }
.pr-gold { color: var(--hp-gold); }
.pr-elo { flex: 0 0 auto; font-weight: 850; font-variant-numeric: tabular-nums; }

.pr-title { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); grid-template-areas: "div w" "div def";
            column-gap: .75rem; row-gap: .05rem; align-items: center; padding: .5rem 0; }
.pr-title + .pr-title { border-top: 1px solid var(--hp-line); }
.pr-title.old { opacity: .6; }
.pr-tdiv { grid-area: div; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pr-tw { grid-area: w; display: flex; align-items: center; gap: .5rem; min-width: 0; color: var(--ink); }
.pr-tw b { font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-tw:hover b { color: var(--accent); }
.pr-tw .hp-face { width: 30px; height: 30px; }
.pr-tdef { grid-area: def; padding-left: calc(30px + .5rem); font-size: .8rem; color: var(--ink-2); min-width: 0; }
.pr-tdef a { color: var(--ink-2); }
.pr-tdef a:hover { color: var(--accent); }
.pr-tdef small { margin-left: .3rem; font-size: .74rem; color: var(--muted); }
.pr-tdef small a { color: var(--muted); }

.pr-cdate { flex: 0 0 2.6rem; display: flex; flex-direction: column; align-items: center; line-height: 1.05;
            padding: .25rem 0; border-radius: 8px; background: var(--hp-line); }
.pr-cdate b { font-size: 1rem; font-weight: 900; }
.pr-cdate small { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pr-back { margin: 0; font-size: .85rem; font-weight: 700; }

@media (max-width: 1199px) {
  .pr-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .pr-grid-2, .pr-grid-2b { grid-template-columns: minmax(0, 1fr); }
  .pr-hero { grid-template-columns: minmax(0, 1fr) auto; }
  .pr-hero .fp-next { grid-column: 1 / -1; width: auto; }
}
@media (max-width: 767px) {
  .pr-table { min-width: 0; }
  .pr-table .pr-opt { display: none; }
  .pr-bar { display: none; }
  .pr-hero { grid-template-columns: minmax(0, 1fr); }
  .pr-hero .fp-elo { align-items: flex-start; text-align: left; }
  .pr-roster { columns: 1; }
}
@media (max-width: 575px) {
  .pr-feat { grid-template-columns: minmax(0, 1fr); }
  .pr-title { grid-template-columns: minmax(0, 1fr); grid-template-areas: "div" "w" "def"; }
  .pr-endlist li { grid-template-columns: 5.4rem minmax(0, 1fr) 2.4rem; }
  .pr-endlist small { display: none; }
}
.pr .hp-rt small { font-size: .66rem; font-weight: 600; color: var(--muted); }

/* ---------- betting: the tabs, and the pick list (/bets/all/upcoming) ----------
   The fight is the unit, as it always was on this page: a card per event, each
   fight named once with its two faces, and the legs the model would take on it
   beside it. The legs are a grid rather than a table so a phone can re-flow
   them under the fight instead of squeezing six columns into 375px. */
.bt-tabs { margin-bottom: 1rem; }
.hp > .bt-tabs { margin-bottom: 0; }

.bt-bank { display: grid; grid-template-columns: 1.1fr repeat(3, minmax(0, 1fr)); gap: 1px;
           background: var(--hp-line); border: 1px solid var(--hp-line); border-radius: 14px; overflow: hidden; }
.bt-tile { display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding: .75rem 1rem;
           background: var(--hp-card); }
.bt-tile[data-tip] { cursor: help; }
.bt-l { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.bt-tile > b { font-size: 1.35rem; font-weight: 850; letter-spacing: -.01em; line-height: 1.15;
               font-variant-numeric: tabular-nums; }
.bt-tile > small { font-size: .74rem; color: var(--muted); }
.bt-state { color: #f3f5f7;
            background: radial-gradient(90% 140% at 0% 0%, rgba(46, 160, 67, .34), transparent 70%), #14181d; }
.bt-state.halved { background: radial-gradient(90% 140% at 0% 0%, rgba(214, 170, 60, .38), transparent 70%), #14181d; }
.bt-state.stopped { background: radial-gradient(90% 140% at 0% 0%, rgba(229, 72, 77, .42), transparent 70%), #14181d; }
.bt-state .bt-l { color: #5fd08a; }
.bt-state.halved .bt-l { color: var(--hp-gold); }
.bt-state.stopped .bt-l { color: #ff8b8f; }
.bt-state > small { color: rgba(255, 255, 255, .65); }

.bt-ctl .hp-seg { flex-wrap: wrap; }
.bt-n { display: inline-block; min-width: 1.2rem; margin-left: .2rem; padding: 0 .3rem; border-radius: 999px;
        font-size: .68rem; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.bt-past { margin-left: auto; display: inline-flex; align-items: center; }

.bt-card { padding-bottom: .4rem; }
.bt-card-h { display: flex; align-items: center; gap: .85rem; padding-bottom: .75rem; border-bottom: 1px solid var(--hp-line); }
.bt-date { flex: 0 0 3rem; display: flex; flex-direction: column; align-items: center; line-height: 1.05;
           padding: .35rem 0; border-radius: 10px; color: #fff; background: #14181d; }
.bt-date b { font-size: 1.2rem; font-weight: 900; }
.bt-date small { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--hp-gold); }
.bt-ev { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bt-ev a, .bt-ev > b { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.bt-ev a:hover { color: var(--accent); }
.bt-ev small { font-size: .78rem; color: var(--muted); }
.bt-card-sum { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; font-size: .8rem;
               color: var(--muted); line-height: 1.3; }
.bt-card-sum b { color: var(--ink); font-weight: 800; }
.bt-card-stake { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* one fight: who on the left, its legs on the right */
.bt-fight { display: grid; grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr); gap: .5rem 1rem;
            padding: .55rem 0; border-top: 1px solid var(--hp-line); }
.bt-cols + .bt-fight { border-top: 0; }
.bt-cols { padding: .45rem 0 .15rem; border-top: 0; font-size: .64rem; font-weight: 800; text-transform: uppercase;
           letter-spacing: .07em; color: var(--muted); }
.bt-cols [data-tip] { cursor: help; }
.bt-who { display: flex; align-items: flex-start; gap: .55rem; min-width: 0; }
.bt-no { flex: 0 0 1.6rem; height: 1.6rem; border-radius: 7px; display: inline-flex; align-items: center;
         justify-content: center; font-size: .74rem; font-weight: 800; color: var(--muted); background: var(--hp-line);
         font-variant-numeric: tabular-nums; }
.bt-no:empty { visibility: hidden; }
.bt-pair { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.bt-c { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.bt-c a, .bt-c b { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-c a:hover { color: var(--accent); }
.bt-prev { flex: 0 0 auto; align-self: center; font-size: .72rem; font-weight: 700; padding: .15rem .55rem;
           border-radius: 999px; border: 1px solid var(--hp-line); color: var(--ink-2); }
.bt-prev:hover { background: var(--hp-hover); color: var(--ink); }
.bt-fight.none .bt-c a, .bt-fight.none .bt-c b { color: var(--muted); font-weight: 600; }

.bt-legs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.bt-leg { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem 4.6rem 3.8rem 4.4rem; align-items: center;
          gap: .75rem; padding: .3rem .5rem; margin: 0 -.5rem; border-radius: 9px; }
.bt-cols .bt-leg { padding-top: 0; padding-bottom: 0; }
.bt-legs .bt-leg:hover { background: var(--hp-hover); }
.bt-leg .r { text-align: right; justify-self: end; }
.bt-pick { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.bt-pick b { font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-pick small { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.bt-pm { display: flex; flex-direction: column; gap: .2rem; }
.bt-pm-bar { position: relative; height: 6px; border-radius: 3px; background: var(--hp-line); }
.bt-pm-bar .mkt { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px;
                  background: color-mix(in srgb, var(--muted) 45%, transparent); }
.bt-pm-bar .mod { position: absolute; top: -3px; width: 3px; height: 12px; margin-left: -1.5px; border-radius: 2px;
                  background: var(--win); }
.bt-pm small { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bt-pm .vs { color: var(--muted-2); }
.bt-edge .hp-pill { font-size: .78rem; padding: .1rem .5rem; }
.bt-price { font-weight: 850; font-variant-numeric: tabular-nums; }
.bt-price.dog { color: var(--hp-gold); }
.bt-stake { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-variant-numeric: tabular-nums; }
.bt-stake b { font-weight: 850; }
.bt-stake small { font-size: .72rem; color: var(--muted); }
.bt-leg.no { opacity: .55; }
.bt-leg.no .bt-pm-bar .mod { background: var(--muted); }

@media (max-width: 991px) {
  .bt-bank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-fight { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .bt-cols > span:first-child { display: none; }
  .bt-legs { padding-left: 2.15rem; }
  .bt-cols .bt-leg { margin-left: 1.65rem; }
}
@media (max-width: 575px) {
  .bt-card-h { flex-wrap: wrap; }
  .bt-card-sum { flex-basis: 100%; flex-direction: row; justify-content: space-between; align-items: baseline; }
  .bt-leg { grid-template-columns: minmax(0, 1fr) 3.9rem 3.3rem 3.6rem; gap: .5rem; }
  .bt-pm, .bt-cols .bt-leg > span:nth-child(2) { display: none; }
  .bt-legs { padding-left: 0; }
  .bt-cols .bt-leg { margin-left: -.5rem; }
  .bt-prev { display: none; }
}
.bt-ctl .hp-seg { border-radius: 16px; }

/* ---------- betting: the record pages (/bets, /bets/all, /bets/props,
   /bets/placed, /market) ----------
   One kit for all of them: the number strip, the running-profit curve, the
   warning that has to be read first, a collapsible explanation, the grouped
   tables with a profit bar, and the long table of bets itself. */
.bt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px;
           background: var(--hp-line); border: 1px solid var(--hp-line); border-radius: 14px; overflow: hidden; }
.bt-tile > b.bt-sm { font-size: 1.05rem; }
.bt-hero { color: #f3f5f7; background: radial-gradient(90% 140% at 0% 0%, rgba(120, 130, 145, .3), transparent 70%), #14181d; }
.bt-hero.up { background: radial-gradient(90% 140% at 0% 0%, rgba(46, 160, 67, .36), transparent 70%), #14181d; }
.bt-hero.down { background: radial-gradient(90% 140% at 0% 0%, rgba(229, 72, 77, .4), transparent 70%), #14181d; }
.bt-hero .bt-l { color: rgba(255, 255, 255, .6); }
.bt-hero.up .bt-l { color: #5fd08a; }
.bt-hero.down .bt-l { color: #ff8b8f; }
.bt-hero > small { color: rgba(255, 255, 255, .65); }
.bt-up { color: var(--win); }
.bt-down { color: var(--loss); }
.bt-muted { color: var(--muted); }

/* the warning that has to be read before the numbers */
.bt-warn { padding: .75rem 1rem; border-radius: 12px; font-size: .84rem; line-height: 1.45; color: var(--ink-2);
           background: color-mix(in srgb, var(--hp-gold) 12%, var(--hp-card));
           border: 1px solid color-mix(in srgb, var(--hp-gold) 38%, transparent);
           border-left-width: 4px; }
.bt-warn b { color: var(--ink); }
.bt-warn.danger { background: color-mix(in srgb, var(--loss) 10%, var(--hp-card));
                  border-color: color-mix(in srgb, var(--loss) 40%, transparent); }
.bt-warn.info { background: var(--hp-card); border-color: var(--hp-line); border-left-color: var(--accent); }

/* the running total */
.bt-curve-wrap { margin: 0; }
.bt-curve-h { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
.bt-curve-h b { font-size: 1.3rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.bt-curve-h b.up { color: var(--win); }
.bt-curve-h b.down { color: var(--loss); }
.bt-curve-h small { font-size: .76rem; color: var(--muted); }
.bt-curve { display: block; width: 100%; height: 150px; }
.bt-curve .zero { stroke: var(--hp-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bt-curve .line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bt-curve .line.up { stroke: var(--win); }
.bt-curve .line.down { stroke: var(--loss); }
.bt-curve .area { opacity: .13; }
.bt-curve .area.up { fill: var(--win); }
.bt-curve .area.down { fill: var(--loss); }
.bt-curve-x { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted-2); margin-top: .2rem;
              font-variant-numeric: tabular-nums; }

/* the explanation, folded */
.bt-more > summary { display: flex; align-items: baseline; gap: .45rem; list-style: none; cursor: pointer; }
.bt-more > summary::-webkit-details-marker { display: none; }
.bt-more > summary b { font-size: 1.02rem; font-weight: 800; }
.bt-more > summary span { font-size: .8rem; color: var(--muted); }
.bt-more > summary::after { content: "Show"; margin-left: auto; font-size: .74rem; font-weight: 700; color: var(--accent); }
.bt-more[open] > summary::after { content: "Hide"; }
.bt-more-in { margin-top: .75rem; font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
.bt-more-in p { margin: 0 0 .6rem; }
.bt-more-in p:last-child { margin-bottom: 0; }
.bt-more-in ol, .bt-more-in ul { margin: 0 0 .6rem; padding-left: 1.2rem; }

/* segmented links (the group-by switch is a set of links, not buttons) */
.hp-seg a { color: var(--ink-2); font-size: .74rem; font-weight: 700; padding: .2rem .7rem; border-radius: 999px; line-height: 1.4; }
.hp-seg a:hover { color: var(--ink); }
.hp-seg a[aria-current="true"] { background: var(--hp-card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.bt-seg { margin-left: auto; }

/* tables */
.bt-wrap { overflow-x: auto; margin: -.2rem -.25rem 0; }
.bt-table { min-width: 620px; }
.bt-table td { padding: .42rem .5rem; font-variant-numeric: tabular-nums; }
.bt-table tfoot td { font-weight: 800; border-top: 2px solid var(--hp-line); border-bottom: 0; }
.bt-per a { color: var(--ink); font-weight: 700; }
.bt-per a:hover { color: var(--accent); }
.bt-card-link { margin-left: .4rem; font-size: .72rem; color: var(--muted); }
.bt-run { font-weight: 800; }
.bt-plcell { display: inline-flex; align-items: center; gap: .55rem; }
.bt-plcell > span:last-child { min-width: 4.8rem; text-align: right; font-weight: 700; }
.bt-plbar { position: relative; display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--hp-line); overflow: hidden; }
.bt-plbar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--muted-2); }
.bt-plbar i { position: absolute; top: 0; bottom: 0; }
.bt-plbar i.up { background: var(--win); border-radius: 0 4px 4px 0; }
.bt-plbar i.down { background: var(--loss); border-radius: 4px 0 0 4px; }
.bt-rows { min-width: 1080px; }
.bt-rows td { font-size: .84rem; }
.bt-rows tr.bt-in td { opacity: .5; }
.bt-date-c { white-space: nowrap; color: var(--muted); }
.bt-ev-c { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.bt-nm { white-space: nowrap; }
.bt-nm a { color: var(--ink); font-weight: 650; }
.bt-nm a:hover { color: var(--accent); }
.bt-nm small { margin-left: .3rem; font-size: .72rem; color: var(--muted); }
.bt-alt { margin-left: .3rem; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
          padding: .05rem .35rem; border-radius: 999px; background: var(--hp-line); color: var(--muted); cursor: help; }
.bt-resc { white-space: nowrap; }
.bt-resc small { display: block; font-size: .68rem; color: var(--muted); margin-top: .1rem; }
.bt-rows .fp-res { min-width: 1.6rem; }
.why { max-width: 20rem; font-size: .76rem; }
.why .up { color: var(--win); }
.why .down { color: var(--loss); }
.why .flat { color: var(--muted); }
.bt-table .hp-pill { font-size: .72rem; padding: .05rem .5rem; }

/* filters */
.bt-apply { height: 34px; padding: 0 1.1rem; border-radius: 999px; border: 0; font-size: .82rem; font-weight: 800;
            color: #fff; background: var(--accent); align-self: flex-end; }
.bt-apply:hover { filter: brightness(1.08); }
.bt-ghost { height: 34px; padding: 0 1rem; border-radius: 999px; font-size: .8rem; font-weight: 700; display: inline-flex;
            align-items: center; align-self: flex-end; border: 1px solid var(--hp-line); color: var(--ink-2); background: transparent; }
.bt-ghost:hover { background: var(--hp-hover); color: var(--ink); }
.bt-focus { padding-top: .6rem; border-top: 1px solid var(--hp-line); font-size: .82rem; color: var(--muted); }
.bt-focus b { color: var(--ink); }
.bt-ctl .rk-row { align-items: flex-end; }
.bt-ctl .rk-switch { align-self: center; margin-top: .9rem; }

/* pager */
.bt-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .75rem; font-size: .8rem; color: var(--muted); }
.bt-pager .bt-ghost { height: 30px; }
.bt-pager > span { margin-right: auto; }

.bt-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 991px) {
  .bt-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .bt-seg { margin-left: 0; }
}
@media (max-width: 575px) {
  .bt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-plbar { width: 56px; }
}
.bt-plcell { display: flex; width: 100%; }
.bt-plcell .bt-plbar { flex: 1 1 auto; width: auto; min-width: 60px; max-width: 280px; }
.bt-mkt { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
          padding: .12rem .45rem; border-radius: 999px; background: var(--hp-line); color: var(--ink-2); }
.bt-pickc b { font-weight: 700; white-space: nowrap; }
.bt-pickc small { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.bt-ctl-go { margin-left: auto; display: inline-flex; gap: .5rem; }
.bt-mini { min-width: 420px; }
.bt-props { min-width: 560px; }
.bt-group td { padding-top: .8rem; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
               color: var(--ink-2); border-bottom: 1px solid var(--hp-line); }
.bt-group td small { margin-left: .4rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
.bt-table tr.bt-no td { opacity: .55; }
.bt-bout { font-size: .84rem; white-space: nowrap; }
.bt-wf { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
.bt-h3 { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .35rem; }
a.rc-rules { color: inherit; }
@media (max-width: 767px) { .bt-opt { display: none; } }
.bt-table tr.bt-group td { text-align: left; }
.bt-tall { max-height: 78vh; overflow: auto; }
.bt-mkt-t { min-width: 900px; }
.bt-ctl .rc-small input { min-width: 0; width: 7rem; }
/* bets placed: the result as a pill, and DataTables' own controls in the site's shape */
.bt-result { display: inline-block; min-width: 2.6rem; padding: .08rem .45rem; border-radius: 6px; font-size: .72rem;
             font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: var(--hp-line); color: var(--muted); }
.bt-result.won { background: var(--res-win-bg); color: var(--res-win-fg); }
.bt-result.lost { background: var(--res-loss-bg); color: var(--res-loss-fg); }
.bt-placed { min-width: 1000px; }
.bt-note-c { max-width: 16rem; font-size: .76rem; }
.bt-dt-filters { margin-bottom: .6rem; }
.bt-dt .dataTables_wrapper .row { margin: 0; align-items: center; }
.bt-dt .dataTables_wrapper .row > * { padding: 0; }
.bt-dt .dataTables_filter input, .bt-dt .dataTables_length select {
  height: 32px; border-radius: 999px; border: 1px solid var(--hp-line); background: var(--hp-bg); color: var(--ink);
  padding: 0 .8rem; font-size: .82rem; outline: none; }
.bt-dt .dataTables_length select { border-radius: 10px; padding-right: 1.6rem; }
.bt-dt .dataTables_info { font-size: .78rem; color: var(--muted); padding-top: .6rem !important; }
.bt-dt .pagination { margin: .5rem 0 0; gap: .2rem; }
.bt-dt .page-link { border-radius: 999px !important; border: 1px solid var(--hp-line); background: transparent; color: var(--ink-2);
                    font-size: .78rem; padding: .2rem .65rem; }
.bt-dt .page-item.active .page-link { background: var(--ink); border-color: var(--ink); color: var(--hp-card); }
.bt-dt table.dataTable { margin: 0 !important; }
.bt-dt table.dataTable > thead > tr > th { padding-right: 1.4rem; }
.bt-grid-2 .bt-mini { min-width: 0; }
.bt-grid-2 .bt-plcell .bt-plbar { min-width: 40px; }
.bt-grid-2 .bt-plcell > span:last-child { min-width: 3.8rem; }

/* ---------- one bout (/fight) ----------
   The home page's stage for the two corners, then the tape and the prices as
   mirrored rows - the eye runs down the middle and each line says who is
   ahead - and each man's whole career underneath. */
.fx-nick { font-size: .78rem; font-style: italic; color: rgba(255, 255, 255, .55); margin-top: -.15rem; }
.fx-v-sep { font-size: .7rem; font-weight: 700; color: rgba(255, 255, 255, .45); margin: 0 .15rem; }
.fx-asof { margin: .5rem .5rem 0; font-size: .74rem; line-height: 1.4; color: rgba(255, 255, 255, .6); }
.fx-asof b { color: #fff; }
.fx-hero .evp-stat b { font-size: 1.05rem; }

/* the compact bar under the site header */
.fx-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 1020; color: #f3f5f7;
          background: linear-gradient(90deg, color-mix(in srgb, var(--hp-red) 30%, #14181d), #14181d 35%, #14181d 65%, color-mix(in srgb, var(--hp-blue) 30%, #14181d));
          border-top: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
          transform: translateY(-110%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
.fx-bar.show { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; }
.fx-bar-in { max-width: 1100px; margin: 0 auto; padding: .4rem 1rem; display: grid;
             grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; }
.fx-bar-side { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.fx-bar-side.r { flex-direction: row-reverse; text-align: right; }
.fx-bar-side b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-bar-side .hp-face { border: 2px solid var(--hp-red); background: rgba(255, 255, 255, .07); }
.fx-bar-side.r .hp-face { border-color: var(--hp-blue); }
.fx-bar-side .hp-face-init { color: rgba(255, 255, 255, .55); }
.fx-bar-vs { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .7); }

.fx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
.fx-col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

/* the mirrored rows */
.fx-names { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: .35rem; font-size: .72rem;
            font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.fx-names .c1 { color: var(--hp-red); }
.fx-names .c2 { color: var(--hp-blue); text-align: right; }
.fx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(6rem, auto) minmax(0, 1fr); align-items: center;
          gap: .75rem; padding: .32rem 0; border-top: 1px solid var(--hp-line); }
.fx-names + .fx-row, .fx-split + .fx-row { border-top: 0; }
.fx-l { text-align: center; font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.fx-l[data-tip] { cursor: help; }
.fx-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-v.c1 { justify-self: start; }
.fx-v.c2 { justify-self: end; }
.fx-v.on { padding: .02rem .5rem; border-radius: 7px; color: #fff; }
.fx-v.c1.on { background: var(--hp-red); }
.fx-v.c2.on { background: var(--hp-blue); }
.fx-odds { font-weight: 850; }
.fx-v.hit, .fx-tot.hit { outline: 2px solid var(--hit); outline-offset: 1px; border-radius: 6px; }
.fx-split { margin-top: .7rem; padding-bottom: .2rem; font-size: .64rem; font-weight: 800; text-transform: uppercase;
            letter-spacing: .09em; color: var(--muted); text-align: center; border-bottom: 1px solid var(--hp-line); }
.fx-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .45rem; margin-top: .5rem; }
.fx-tot { display: flex; flex-direction: column; align-items: center; padding: .4rem .3rem; border-radius: 10px;
          background: var(--hp-bg); border: 1px solid var(--hp-line); }
.fx-tot small { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fx-tot b { font-weight: 850; font-variant-numeric: tabular-nums; }

/* the model's legs, the same row as the pick list */
.fx-bets { list-style: none; margin: 0; padding: 0; }
.fx-bets li { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem 4.4rem 3.6rem 4.2rem; align-items: center;
              gap: .7rem; padding: .45rem 0; border-top: 1px solid var(--hp-line); }
.fx-bets li:first-child { border-top: 0; }
.fx-bets li.no { opacity: .55; }
.fx-bets .hp-pill, .fx-bet-res { justify-self: end; }
.fx-bets .bt-price { text-align: right; }

/* the careers */
.fx-hist-intro h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 .2rem; }
.fx-hist-intro p { margin: 0; font-size: .8rem; color: var(--muted); }
.fx-key { padding: 0 .35rem; border-radius: 5px; font-weight: 700; }
.fx-key.this { background: color-mix(in srgb, var(--hp-gold) 22%, transparent); color: var(--ink); }
.fx-key.after { opacity: .5; background: var(--hp-line); }
.fx-hist { border-top: 3px solid var(--hp-red); }
.fx-hist.c2 { border-top-color: var(--hp-blue); }
.fx-hist-h { display: flex; align-items: center; gap: .65rem; margin-bottom: .6rem; }
.fx-hist-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.fx-hist-who b { font-size: 1.02rem; font-weight: 800; }
.fx-hist-who b a { color: var(--ink); }
.fx-hist-who b a:hover { color: var(--accent); }
.fx-hist-who small { font-size: .76rem; color: var(--muted); }
.fx-wrap { overflow: auto; max-height: 70vh; margin: 0 -.25rem; }
.fx-table { min-width: 1000px; }
.fx-table thead th { position: sticky; top: 0; z-index: 2; }
.fx-table td { padding: .38rem .45rem; font-variant-numeric: tabular-nums; }
.fx-table td small { display: block; font-size: .7rem; color: var(--muted); line-height: 1.2; }
.fx-table tr.fx-after td { opacity: .45; }
.fx-table tr.fx-this td { background: color-mix(in srgb, var(--hp-gold) 14%, transparent); }
.fx-table tr.am td { background: var(--am-bg); }
.fx-this { margin-left: .35rem; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
           padding: .05rem .4rem; border-radius: 999px; background: var(--hp-gold); color: #1f1600; vertical-align: 1px; }
.fx-elo small.up { color: var(--win); }
.fx-elo small.down { color: var(--loss); }

@media (max-width: 991px) {
  .fx-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
  .fx-bets li { grid-template-columns: minmax(0, 1fr) 4rem 3.4rem 3.8rem; }
  .fx-bets .bt-pm { display: none; }
  .fx-bar-vs { font-size: .68rem; }
}

/* ---------- compare fighters (/ranker) ---------- */
.cmp-pick { display: flex; flex-direction: column; gap: .75rem; }
.cmp-find { position: relative; max-width: 460px; }
.cmp-search { max-width: none; }
.cmp-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; display: none;
               max-height: 360px; overflow: auto; padding: .35rem; border-radius: 14px; background: var(--hp-card);
               border: 1px solid var(--hp-line); box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }
.cmp-results.open { display: block; }
.cmp-hit { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .4rem .5rem; border: 0; border-radius: 10px;
           background: transparent; color: inherit; text-align: left; }
.cmp-hit:hover, .cmp-hit:focus-visible { background: var(--hp-hover); outline: none; }
.cmp-hit-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cmp-hit-who b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-hit-who small { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-hit-elo { display: flex; flex-direction: column; align-items: flex-end; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cmp-hit-elo small { font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cmp-picked { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.cmp-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .3rem .2rem .25rem; border-radius: 999px;
            background: var(--hp-bg); border: 1px solid var(--hp-line); font-size: .84rem; font-weight: 700; }
.cmp-chip a { color: var(--ink); }
.cmp-chip a:hover { color: var(--accent); }
.cmp-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--muted);
                   line-height: 1; font-size: 1rem; padding: 0; }
.cmp-chip button:hover { background: var(--hp-hover); color: var(--ink); }
.cmp-none { font-size: .82rem; color: var(--muted); }
.cmp-panel { display: flex; flex-direction: column; gap: 1.25rem; }
.cmp-panel:empty { display: none; }
.cmp-wrap { overflow-x: auto; margin: 0 -.25rem; }
.cmp-table { min-width: 560px; }
.cmp-table th.l { white-space: nowrap; font-size: .76rem; color: var(--muted); }
.cmp-table tbody th { font-weight: 700; }
.cmp-table td { font-variant-numeric: tabular-nums; }
.cmp-table td small { display: block; font-size: .7rem; color: var(--muted); }
.cmp-table td.on { font-weight: 850; color: var(--accent); }
.cmp-th { display: inline-flex; flex-direction: column; align-items: center; gap: .35rem; color: var(--ink); text-transform: none;
          letter-spacing: 0; font-size: .86rem; }
.cmp-th:hover b { color: var(--accent); }
.cmp-mu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.cmp-mu li + li { padding-top: .9rem; border-top: 1px solid var(--hp-line); }
.cmp-mu-who { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem; margin-bottom: .45rem; }
.cmp-mu-who a { display: flex; align-items: center; gap: .5rem; min-width: 0; color: var(--ink); }
.cmp-mu-who a b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-mu-who a.c2 { justify-content: flex-end; }
.cmp-mu-who a.c1 .hp-face { box-shadow: 0 0 0 2px var(--hp-card), 0 0 0 4px var(--hp-red); }
.cmp-mu-who a.c2 .hp-face { box-shadow: 0 0 0 2px var(--hp-card), 0 0 0 4px var(--hp-blue); }
.cmp-mu-who a:hover b { color: var(--accent); }
.cmp-mu-gap { font-size: .74rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.cmp-bar { height: 1.3rem; }
.cmp-bar[data-tip] { cursor: help; }
.cmp-mu-foot { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-top: .35rem;
               font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-mu-foot small { font-size: .72rem; font-weight: 500; color: var(--muted); text-align: center; }
.cmp-met-date { flex: 0 0 5.6rem; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cmp-met em { font-style: normal; color: var(--muted); font-weight: 500; }
.cmp-search { display: block; width: 100%; max-width: none; }
.mm-mid .mm-swap { align-self: stretch; justify-content: center; }

/* ---------- calculators, and the not-found / offline pages ---------- */
.calc-card { display: flex; flex-direction: column; gap: .9rem; }
.calc-legs { display: flex; flex-direction: column; gap: .4rem; counter-reset: leg; }
.calc-leg { display: flex; align-items: center; gap: .5rem; counter-increment: leg; }
.calc-leg-n { flex: 0 0 3.2rem; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.calc-leg-n::after { content: " " counter(leg); }
.calc-leg input, .calc-row .rk-sel input { height: 36px; border-radius: 10px; border: 1px solid var(--hp-line); background: var(--hp-bg);
                                            color: var(--ink); padding: 0 .75rem; font-size: .92rem; font-weight: 700;
                                            font-variant-numeric: tabular-nums; outline: none; }
.calc-leg input { flex: 1; min-width: 0; max-width: 12rem; }
.calc-leg input:focus, .calc-row .rk-sel input:focus { border-color: var(--accent); }
.calc-leg button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.1rem; }
.calc-leg button:hover { background: var(--hp-hover); color: var(--ink); }
.calc-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .9rem; }
.calc-row .rk-sel input { min-width: 0; width: 9rem; }
.calc-stake { margin-left: auto; }
.calc-out { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.calc-out .bt-tile > b { font-size: 1.2rem; }

.sx-card { max-width: 34rem; margin: 3rem auto; text-align: center; padding: 2.2rem 1.5rem; }
.sx-code { display: inline-block; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-size: 3.2rem; font-weight: 700;
           line-height: 1; color: var(--hp-gold); letter-spacing: .02em; }
.sx-card h1 { font-size: 1.5rem; font-weight: 850; margin: .5rem 0 .4rem; }
.sx-card p { color: var(--muted); margin: 0 auto 1.2rem; max-width: 26rem; }
.sx-go { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.sx-btn { display: inline-flex; align-items: center; text-decoration: none; }
.sx-btn:hover { color: #fff; }
/* the display face is subset to the digits and a few capitals, so a word uses the page's own */
.sx-code.sx-word { font-family: inherit; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
/* the result strip: the headline across the top, the rest in one row below;
   an unfilled cell takes the card's colour rather than showing the gap */
.calc-out { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); background: var(--hp-card); }
.calc-out .bt-hero { grid-column: 1 / -1; }
.calc-out .bt-tile + .bt-tile:not(.bt-hero) { box-shadow: -1px 0 0 var(--hp-line); }
@media (max-width: 575px) { .bt-more > summary span { display: none; } }