/* =========================================================================
   /stats/finish-rates - page sheet (2026-10-09 redesign)
   Owner: "THESE ARE SO BAD IMPROVE THE DESIGN". The answer first and big, one set
   of method colours everywhere, every chart drawn server-side as HTML/CSS (no
   Chart.js, no CDN, no empty boxes), the explanation at the bottom.

   COLOUR ROLES (house rules)
     gold  --belt          the key number (the finish rate) - nowhere else
     red   --k-red         interaction: the active period, links, the open toggle
     KO    --fan-ko        SUB --fan-sub        DEC --fan-dec (a muted fill on bars)
     ink   --k-ink / --k-ink2 / --k-ink3 (metadata)
   Loaded after the whole bundle by stats/finish-rates.php (output-buffer <link>),
   inside @layer fan with !important - the same mechanism as fan-2026 / kombat /
   blog-2026: layered !important beats every unlayered rule in the older sheets, and
   these selectors are more specific than the layer's own element rules.
   Every class is .frx-* and lives only on this page.
   ========================================================================= */
@layer fan {

.frx {
  --frx-ko:  var(--fan-ko, #DB5A5E);
  --frx-sub: var(--fan-sub, #56B6FF);
  --frx-dec: var(--fan-dec, #9AA3B5);
  /* DEC is the remainder, not a third "colour": a quieter fill that still clears 3:1
     on the plate and sits >= 20 dE from the SUB blue (validated both themes). */
  --frx-dec-fill: rgba(var(--fan-rgb-dec, 154,163,181), .6);
  --frx-plate:  var(--k-plate, #131419);
  --frx-plate2: var(--k-plate2, #1A1B21);
  --frx-edge:   var(--k-edge, #2A2C35);
  --frx-ink:    var(--k-ink, #F3F3F5);
  --frx-ink2:   var(--k-ink2, #B9BCC5);
  --frx-ink3:   var(--k-ink3, #8C909B);
  --frx-red:    var(--k-red, #B01D26);
  --frx-tap:    var(--k-red-ink, #DB5A5E);
  --frx-gold:   var(--belt, #F4C542);
  --frx-gap:    var(--frx-plate);
  /* small TEXT in a method colour. Dark KO #DB5A5E is ~4.0:1 on the plate, so text takes the
     lighter ink kombat-2026 uses for small KO text (6.9:1); chips sit on a tint and get their own. */
  --frx-ko-ink:  #F07B7E;
  --frx-sub-ink: var(--frx-sub);
  --frx-chip-ko:  #F07B7E;
  --frx-chip-sub: #8CCBFF;
}
:root[data-theme="light"] .frx {
  --frx-ko-ink:  var(--fan-ko, #A8121C);
  --frx-chip-ko:  #8A0F17;
  --frx-chip-sub: #0A4F9E;
}
:root[data-theme="light"] .frx { --frx-dec-fill: rgba(var(--fan-rgb-dec, 86,96,116), .7); }

.frx-sr { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; margin: -1px !important; padding: 0 !important; border: 0 !important; }

/* ---- shared pieces ---------------------------------------------------------- */
.frx .frx-card { background: var(--frx-plate) !important; border: 1px solid var(--frx-edge) !important; border-radius: 2px !important;
  padding: 20px 22px !important; box-shadow: none !important; margin: 0 !important; }
.frx .frx-sec { margin: 34px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
.frx .frx-head { display: flex !important; align-items: center !important; justify-content: space-between !important;
  flex-wrap: wrap !important; gap: 10px 16px !important; margin: 0 0 12px !important; }
.frx .frx-h { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important;
  font: 800 clamp(20px, 2.4vw, 25px)/1.05 var(--k-display) !important; letter-spacing: .01em !important;
  text-transform: uppercase !important; color: var(--frx-ink) !important; background: none !important; border: 0 !important; }
.frx .frx-h::before { content: '' !important; display: inline-block !important; flex: none !important; width: 8px !important; height: .9em !important;
  margin: 0 10px 0 0 !important; background: var(--frx-red) !important; border-radius: 0 !important; transform: none !important; }
.frx .frx-h::after { content: none !important; display: none !important; }

/* method swatch + method-coloured labels */
.frx .frx-sw { display: inline-block !important; flex: none !important; width: 10px !important; height: 10px !important; margin: 0 6px 0 0 !important;
  border-radius: 2px !important; vertical-align: 0 !important; background: var(--frx-ink3) !important; }
.frx .ko  .frx-sw, .frx .ko.frx-sw   { background: var(--frx-ko) !important; }
.frx .sub .frx-sw, .frx .sub.frx-sw  { background: var(--frx-sub) !important; }
.frx .dec .frx-sw, .frx .dec.frx-sw  { background: var(--frx-dec-fill) !important; }

/* the one bar: KO | SUB | DEC on a 0-100 track, 2px plate-coloured gaps between fills */
.frx .frx-bar { position: relative !important; display: block !important; height: 12px !important; margin: 0 !important; padding: 0 !important;
  background: var(--frx-plate2) !important; border-radius: 2px !important; overflow: hidden !important; }
.frx .frx-bar .s { position: absolute !important; top: 0 !important; bottom: 0 !important; box-sizing: border-box !important; display: block !important; }
.frx .frx-bar .s-ko  { left: 0 !important; width: calc(var(--ko) * 1%) !important; background: var(--frx-ko) !important; }
.frx .frx-bar .s-sub { left: calc(var(--ko) * 1%) !important; width: calc(var(--sub) * 1%) !important; background: var(--frx-sub) !important;
  border-left: 2px solid var(--frx-gap) !important; }
.frx .frx-bar .s-dec { left: calc((var(--ko) + var(--sub)) * 1%) !important; width: calc(var(--dec) * 1%) !important; background: var(--frx-dec-fill) !important;
  border-left: 2px solid var(--frx-gap) !important; }

/* ---- page frame -------------------------------------------------------------- */
.frx .rk-main { min-width: 0 !important; }
.frx .rankings-hero { margin-bottom: 14px !important; }

/* ---- time period: one segmented control -------------------------------------- */
.frx .frx-period { display: flex !important; gap: 2px !important; margin: 0 0 16px !important; padding: 3px !important;
  background: var(--frx-plate) !important; border: 1px solid var(--frx-edge) !important; border-radius: 2px !important; }
.frx .frx-seg { flex: 1 1 0 !important; min-width: 0 !important; min-height: 40px !important; display: flex !important; align-items: center !important;
  justify-content: center !important; padding: 0 8px !important; margin: 0 !important; border: 0 !important; border-radius: 2px !important;
  background: transparent !important; box-shadow: none !important; transform: none !important;
  font: 800 14px/1 var(--k-display) !important; letter-spacing: .07em !important; text-transform: uppercase !important;
  color: var(--frx-ink2) !important; -webkit-text-fill-color: currentColor !important; text-decoration: none !important; white-space: nowrap !important; }
.frx .frx-seg:hover { background: var(--frx-plate2) !important; color: var(--frx-ink) !important; }
.frx .frx-seg.is-on, .frx .frx-seg.is-on:hover { background: var(--frx-red) !important; color: #FFFFFF !important; }
/* three faces of the same label, picked by the control's OWN width (container query), so the
   1080px layout - main column ~700px beside the rail - gets the middle face, not a squeeze.
   "Last 30 days" / "30 days" / "30D". The media query is the fallback for old engines. */
.frx .frx-period { container-type: inline-size !important; }
.frx .frx-seg-m, .frx .frx-seg-s { display: none !important; }
@container (max-width: 780px) {
  .frx .frx-seg-l { display: none !important; }
  .frx .frx-seg-m { display: inline !important; }
}
@container (max-width: 540px) {
  .frx .frx-seg-m { display: none !important; }
  .frx .frx-seg-s { display: inline !important; }
  .frx .frx-seg:first-child { flex-grow: 1.7 !important; }
  .frx .frx-seg { padding: 0 4px !important; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 719px) {
    .frx .frx-seg-l { display: none !important; }
    .frx .frx-seg-s { display: inline !important; }
    .frx .frx-seg:first-child { flex-grow: 1.7 !important; }
    .frx .frx-seg { padding: 0 4px !important; }
  }
}

/* ---- 1. the answer ------------------------------------------------------------ */
.frx .frx-answer { padding: 22px 24px 20px !important; }
.frx .frx-kick { display: block !important; margin: 0 0 14px !important; padding: 0 !important;
  font: 700 12px/1.2 var(--f-data) !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--frx-ink3) !important; }
.frx .frx-kick::before, .frx .frx-kick::after { content: none !important; display: none !important; }
.frx .frx-ans-top { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: end !important; gap: 18px 32px !important; margin: 0 0 22px !important; }
.frx .frx-ans-main { display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 !important; }
.frx .frx-ans-fig { display: block !important; font: 800 clamp(84px, 10vw, 128px)/.8 var(--k-display) !important; letter-spacing: -.01em !important;
  color: var(--frx-gold) !important; -webkit-text-fill-color: var(--frx-gold) !important; font-variant-numeric: tabular-nums !important; }
.frx .frx-ans-fig small { font-size: .5em !important; margin-left: 2px !important; color: inherit !important; -webkit-text-fill-color: inherit !important; }
.frx .frx-ans-cap { display: block !important; max-width: 24ch !important; font: 800 clamp(18px, 2vw, 23px)/1.1 var(--k-display) !important;
  letter-spacing: .01em !important; text-transform: uppercase !important; color: var(--frx-ink) !important; text-wrap: balance !important; }
.frx .frx-ans-facts { display: flex !important; margin: 0 !important; padding: 0 !important; }
.frx .frx-fact { min-width: 150px !important; max-width: 190px !important; padding: 2px 0 2px 20px !important; margin: 0 !important; border-left: 1px solid var(--frx-edge) !important; }
.frx .frx-fact + .frx-fact { margin-left: 20px !important; }
.frx .frx-fact dt { margin: 0 0 8px !important; font: 700 11px/1 var(--f-data) !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--frx-ink3) !important; }
.frx .frx-fact dd { display: flex !important; flex-direction: column !important; gap: 5px !important; margin: 0 !important; }
.frx .frx-fact dd b { font: 800 40px/.88 var(--k-display) !important; color: var(--frx-ink) !important; font-variant-numeric: tabular-nums !important; }
.frx .frx-fact dd span { font-size: 13px !important; line-height: 1.3 !important; color: var(--frx-ink2) !important; }
.frx .frx-bar--lg { height: 22px !important; }
.frx .frx-split { display: grid !important; grid-template-columns: var(--cols) !important; gap: 0 !important; margin: 10px 0 0 !important; padding: 0 !important; list-style: none !important; }
.frx .frx-split-i { display: flex !important; flex-direction: column !important; gap: 6px !important; margin: 0 !important; padding: 0 14px 0 0 !important; min-width: 0 !important; }
.frx .frx-split-i::before, .frx .frx-split-i::marker { content: none !important; }
.frx .frx-split-l { display: flex !important; align-items: center !important; font: 700 11.5px/1 var(--f-data) !important; letter-spacing: .1em !important; text-transform: uppercase !important; white-space: nowrap !important; }
.frx .frx-split-i.ko  .frx-split-l { color: var(--frx-ko-ink) !important; }
.frx .frx-split-i.sub .frx-split-l { color: var(--frx-sub) !important; }
.frx .frx-split-i.dec .frx-split-l { color: var(--frx-dec) !important; }
.frx .frx-split-v { font: 800 30px/1 var(--k-display) !important; color: var(--frx-ink) !important; font-variant-numeric: tabular-nums !important; }
.frx .frx-ans-note { margin: 14px 0 0 !important; font-size: 12.5px !important; line-height: 1.4 !important; color: var(--frx-ink3) !important; }

@media (max-width: 719px) {
  /* phone order: the number, its bar and split, THEN the two round facts */
  .frx .frx-answer { display: flex !important; flex-direction: column !important; padding: 18px 16px 16px !important; }
  .frx .frx-ans-top { display: contents !important; }
  .frx .frx-kick { order: 0 !important; }
  .frx .frx-ans-main { order: 1 !important; margin-bottom: 18px !important; }
  .frx .frx-bar--lg { order: 2 !important; }
  .frx .frx-split { order: 3 !important; }
  .frx .frx-ans-note { order: 4 !important; }
  .frx .frx-ans-facts { order: 5 !important; margin-top: 18px !important; }
  .frx .frx-ans-fig { font-size: 92px !important; }
  .frx .frx-ans-facts { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; padding-top: 16px !important; border-top: 1px solid var(--frx-edge) !important; }
  .frx .frx-fact { min-width: 0 !important; max-width: none !important; padding: 0 12px 0 0 !important; border-left: 0 !important; }
  .frx .frx-fact + .frx-fact { margin-left: 0 !important; padding: 0 0 0 14px !important; border-left: 1px solid var(--frx-edge) !important; }
  .frx .frx-fact dd b { font-size: 34px !important; }
  .frx .frx-split { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .frx .frx-split-i { padding-right: 8px !important; }
  .frx .frx-split-l { font-size: 10.5px !important; letter-spacing: .06em !important; }
  .frx .frx-split-v { font-size: 26px !important; }
}

/* ---- 2. by year --------------------------------------------------------------- */
.frx .frx-years { padding: 18px 22px 6px !important; }
.frx .frx-ro { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 6px 18px !important; min-height: 28px !important;
  margin: 0 0 18px !important; font-size: 13.5px !important; color: var(--frx-ink2) !important; }
.frx .frx-ro-y { font: 800 26px/1 var(--k-display) !important; color: var(--frx-ink) !important; font-variant-numeric: tabular-nums !important; }
.frx .frx-ro-f { font-weight: 600 !important; color: var(--frx-ink2) !important; }
.frx .frx-ro-f b { font: 800 24px/1 var(--k-display) !important; color: var(--frx-ink) !important; margin-right: 2px !important; font-variant-numeric: tabular-nums !important; }
.frx .frx-ro-m { display: inline-flex !important; align-items: center !important; white-space: nowrap !important; font-weight: 600 !important; }
.frx .frx-ro-ms { display: inline-flex !important; flex-wrap: wrap !important; gap: 6px 16px !important; }
.frx .frx-ro-m b { margin-left: 5px !important; font-weight: 700 !important; color: var(--frx-ink) !important; font-variant-numeric: tabular-nums !important; }

.frx .frx-yc { position: relative !important; padding: 0 0 0 40px !important; margin: 0 !important; }
.frx .frx-yc-plot { position: relative !important; height: 230px !important; }
.frx .frx-yc-g { position: absolute !important; left: -40px !important; width: 32px !important; bottom: calc(var(--at) * 1%) !important; height: 0 !important; }
.frx .frx-yc-g em { position: absolute !important; right: 0 !important; top: 0 !important; transform: translateY(-50%) !important;
  font: 600 11px/1 var(--f-data) !important; font-style: normal !important; color: var(--frx-ink3) !important; white-space: nowrap !important; }
.frx .frx-yc-g.is-base em { transform: translateY(-100%) !important; }
.frx .frx-yc-g:first-child em { transform: none !important; }
/* the dash is a repeating gradient, not border-style:dashed (which rendered solid here) */
.frx .frx-yc-avg { position: absolute !important; left: 0 !important; right: 0 !important; bottom: calc(var(--at) * 1%) !important; height: 2px !important;
  margin-bottom: -1px !important; border: 0 !important; z-index: 3 !important; pointer-events: none !important;
  background: repeating-linear-gradient(90deg, var(--frx-ink) 0 7px, transparent 7px 11px) !important; }
.frx .frx-yc-avg em { position: absolute !important; right: calc(100% + 8px) !important; top: 1px !important; transform: translateY(-50%) !important;
  font: 800 14px/1 var(--k-display) !important; font-style: normal !important; color: var(--frx-ink) !important; white-space: nowrap !important; }
.frx .frx-yc-cols { position: absolute !important; inset: 0 !important; display: flex !important; gap: 4px !important; }
.frx .frx-yc-col { appearance: none !important; -webkit-appearance: none !important; position: relative !important; flex: 1 1 0 !important; min-width: 0 !important;
  height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; transform: none !important; cursor: pointer !important; color: inherit !important; }
.frx .frx-yc-bar { position: absolute !important; inset: 0 !important; display: block !important; border-radius: 2px 2px 0 0 !important; overflow: hidden !important; }
.frx .frx-yc-bar .s { position: absolute !important; left: 0 !important; right: 0 !important; display: block !important; box-sizing: border-box !important; }
.frx .frx-yc-bar .s-ko  { bottom: 0 !important; height: calc(var(--ko) * 1%) !important; background: var(--frx-ko) !important; }
.frx .frx-yc-bar .s-sub { bottom: calc(var(--ko) * 1%) !important; height: calc(var(--sub) * 1%) !important; background: var(--frx-sub) !important;
  border-bottom: 2px solid var(--frx-gap) !important; }
.frx .frx-yc-bar .s-dec { bottom: calc((var(--ko) + var(--sub)) * 1%) !important; height: calc(var(--dec) * 1%) !important; background: var(--frx-dec-fill) !important;
  border-bottom: 2px solid var(--frx-gap) !important; }
.frx .frx-yc-col:hover .frx-yc-bar { filter: brightness(1.12) !important; }
.frx .frx-yc-col.is-sel .frx-yc-bar { box-shadow: inset 0 0 0 2px var(--frx-ink) !important; }
.frx .frx-yc-x { display: flex !important; gap: 4px !important; margin: 8px 0 0 !important; }
.frx .frx-yc-x > span { flex: 1 1 0 !important; min-width: 0 !important; padding: 0 0 6px !important; text-align: center !important;
  font: 600 11px/1 var(--f-data) !important; color: var(--frx-ink3) !important; border-bottom: 2px solid transparent !important; font-variant-numeric: tabular-nums !important; }
.frx .frx-yc-x > span.is-sel { color: var(--frx-ink) !important; font-weight: 800 !important; border-bottom-color: var(--frx-red) !important; }
.frx .frx-yc-x i { font-style: normal !important; }
.frx .frx-yc-x .s { display: none !important; }
.frx .frx-yc.is-few .frx-yc-cols, .frx .frx-yc.is-few .frx-yc-x { justify-content: center !important; }
.frx .frx-yc.is-few .frx-yc-col, .frx .frx-yc.is-few .frx-yc-x > span { flex: 0 0 64px !important; }
.frx .frx-yc-key { display: flex !important; align-items: center !important; gap: 8px !important; margin: 12px 0 0 -40px !important;
  font-size: 12.5px !important; line-height: 1.35 !important; color: var(--frx-ink3) !important; }
.frx .frx-dash { flex: none !important; width: 22px !important; height: 2px !important; background: repeating-linear-gradient(90deg, var(--frx-ink) 0 7px, transparent 7px 11px) !important; }

/* the table, folded under the chart */
.frx .frx-more { margin: 16px 0 0 !important; padding: 0 !important; border: 0 !important; border-top: 1px solid var(--frx-edge) !important; background: none !important; }
.frx .frx-more > summary { list-style: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important;
  min-height: 48px !important; margin: 0 !important; padding: 0 !important; cursor: pointer !important;
  font: 800 14px/1 var(--k-display) !important; letter-spacing: .07em !important; text-transform: uppercase !important; color: var(--frx-tap) !important; }
.frx .frx-more > summary::-webkit-details-marker { display: none !important; }
.frx .frx-more > summary::after { content: '+' !important; font: 700 20px/1 var(--f-data) !important; color: var(--frx-tap) !important; }
.frx .frx-more[open] > summary::after { content: '\2212' !important; }
.frx .frx-more > summary:hover { color: var(--frx-ink) !important; }
.frx .frx-tbl-wrap { overflow-x: auto !important; margin: 0 0 12px !important; }
.frx .frx-tbl { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; background: none !important; font-size: 14px !important; font-variant-numeric: tabular-nums !important; }
html .frx.finish-rates-page .frx-tbl th, html .frx.finish-rates-page .frx-tbl td { -webkit-text-fill-color: currentColor !important; }
.frx .frx-tbl th, .frx .frx-tbl td { padding: 9px 8px !important; text-align: right !important; vertical-align: baseline !important; white-space: nowrap !important;
  border: 0 !important; border-bottom: 1px solid var(--frx-edge) !important; background: none !important; color: var(--frx-ink2) !important; }
html .frx.finish-rates-page .frx-tbl thead th { padding-top: 4px !important; font: 700 11px/1 var(--f-data) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--frx-ink3) !important; }
.frx .frx-tbl thead th .frx-sw { width: 8px !important; height: 8px !important; margin-right: 5px !important; }
.frx .frx-tbl th:first-child, .frx .frx-tbl td:first-child { text-align: left !important; padding-left: 0 !important; }
html .frx.finish-rates-page .frx-tbl tbody th { font: 800 16px/1 var(--k-display) !important; color: var(--frx-ink) !important; }
.frx .frx-tbl td.fin { color: var(--frx-ink) !important; font-weight: 700 !important; }
.frx .frx-tbl small { display: inline-block !important; min-width: 5ch !important; margin-left: 5px !important; text-align: left !important;
  font-size: 12px !important; font-weight: 500 !important; color: var(--frx-ink3) !important; }
.frx .frx-tbl tbody tr:last-child th, .frx .frx-tbl tbody tr:last-child td { border-bottom: 0 !important; }

@media (max-width: 719px) {
  .frx .frx-years { padding: 16px 14px 4px !important; }
  .frx .frx-ro { gap: 4px 14px !important; margin-bottom: 14px !important; }
  .frx .frx-ro-y { font-size: 24px !important; }
  .frx .frx-ro-m { font-size: 12.5px !important; }
  .frx .frx-ro-ms { flex: 1 1 100% !important; gap: 4px 14px !important; }
  .frx .frx-yc { padding-left: 32px !important; }
  .frx .frx-yc-plot { height: 190px !important; }
  .frx .frx-yc-g { left: -32px !important; width: 28px !important; }
  .frx .frx-yc-g em { font-size: 10px !important; }
  .frx .frx-yc-avg em { right: calc(100% + 4px) !important; font-size: 13px !important; }
  .frx .frx-yc-cols, .frx .frx-yc-x { gap: 2px !important; }
  .frx .frx-yc-x .l { display: none !important; }
  .frx .frx-yc-x .s { display: inline !important; }
  .frx .frx-yc-x > span { font-size: 9.5px !important; letter-spacing: -.03em !important; }
  .frx .frx-yc-key { margin-left: -32px !important; }
  .frx .frx-tbl { font-size: 13px !important; }
  .frx .frx-tbl th, .frx .frx-tbl td { padding: 8px 5px !important; }
  .frx .frx-tbl small { display: block !important; margin: 3px 0 0 !important; min-width: 0 !important; text-align: right !important; font-size: 11px !important; }
  .frx .frx-tbl thead th .frx-sw { display: none !important; }
}

/* ---- 3. by division --------------------------------------------------------------- */
.frx .frx-sort { display: flex !important; gap: 2px !important; padding: 2px !important; margin: 0 !important;
  background: var(--frx-plate) !important; border: 1px solid var(--frx-edge) !important; border-radius: 2px !important; }
.frx .frx-sort[hidden] { display: none !important; }
.frx .frx-sort button { appearance: none !important; min-height: 40px !important; min-width: 52px !important; margin: 0 !important; padding: 0 12px !important;
  border: 0 !important; border-radius: 2px !important; background: transparent !important; box-shadow: none !important; transform: none !important; cursor: pointer !important;
  font: 800 13px/1 var(--k-display) !important; letter-spacing: .07em !important; text-transform: uppercase !important; color: var(--frx-ink2) !important; }
.frx .frx-sort button:hover { background: var(--frx-plate2) !important; color: var(--frx-ink) !important; }
.frx .frx-sort button[aria-pressed="true"] { background: var(--frx-red) !important; color: #FFFFFF !important; }

.frx .frx-divs { padding: 8px 22px !important; }
.frx .frx-dh { display: none !important; }
.frx .frx-dl { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.frx .frx-dl > li { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--frx-edge) !important; }
.frx .frx-dl > li:last-child { border-bottom: 0 !important; }
.frx .frx-dl > li::before, .frx .frx-dl > li::marker { content: none !important; }
.frx .frx-dr { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "n f" "b b" "m m" !important;
  align-items: center !important; gap: 8px 12px !important; padding: 12px 0 !important; margin: 0 !important; min-height: 44px !important;
  text-decoration: none !important; color: var(--frx-ink) !important; background: none !important; border: 0 !important; }
.frx .frx-dr-n { grid-area: n !important; min-width: 0 !important; font: 800 17px/1.1 var(--k-display) !important; letter-spacing: .02em !important;
  text-transform: uppercase !important; color: var(--frx-ink) !important; }
.frx .frx-dr:hover .frx-dr-n { color: var(--frx-tap) !important; }
.frx .frx-dr .frx-bar { grid-area: b !important; height: 12px !important; }
.frx .frx-dr-m { grid-area: m !important; display: flex !important; flex-wrap: wrap !important; gap: 4px 16px !important; font-size: 12.5px !important; color: var(--frx-ink2) !important; }
.frx .frx-dr-m .v { display: inline-flex !important; align-items: center !important; white-space: nowrap !important; font-variant-numeric: tabular-nums !important; }
.frx .frx-dr-m .lab { font-style: normal !important; font-weight: 700 !important; margin-right: 4px !important; }
.frx .frx-dr-m .v.ko  .lab { color: var(--frx-ko-ink) !important; }
.frx .frx-dr-m .v.sub .lab { color: var(--frx-sub) !important; }
.frx .frx-dr-m .v.dec .lab { color: var(--frx-dec) !important; }
.frx .frx-dr-f { grid-area: f !important; font: 800 22px/1 var(--k-display) !important; color: var(--frx-ink) !important; font-variant-numeric: tabular-nums !important; text-align: right !important; }

@media (min-width: 720px) {
  .frx .frx-dh, .frx .frx-dr { grid-template-columns: minmax(130px, 190px) minmax(0, 1fr) 64px 56px 64px 70px !important;
    grid-template-areas: "n b ko sub dec f" !important; column-gap: 14px !important; }
  .frx .frx-dh { display: grid !important; align-items: end !important; padding: 12px 0 10px !important; border-bottom: 1px solid var(--frx-edge) !important;
    font: 700 11px/1 var(--f-data) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--frx-ink3) !important; }
  .frx .frx-dh .n { grid-area: n !important; } .frx .frx-dh .b { grid-area: b !important; }
  .frx .frx-dh .v, .frx .frx-dh .f { text-align: right !important; }
  .frx .frx-dh .v.ko { grid-area: ko !important; color: var(--frx-ko-ink) !important; }
  .frx .frx-dh .v.sub { grid-area: sub !important; color: var(--frx-sub) !important; }
  .frx .frx-dh .v.dec { grid-area: dec !important; color: var(--frx-dec) !important; }
  .frx .frx-dh .f { grid-area: f !important; color: var(--frx-ink2) !important; }
  .frx .frx-dr { padding: 10px 0 !important; min-height: 48px !important; }
  .frx .frx-dr-m { display: contents !important; }
  .frx .frx-dr-m .v { justify-content: flex-end !important; font-size: 14px !important; color: var(--frx-ink2) !important; }
  .frx .frx-dr-m .v.ko { grid-area: ko !important; } .frx .frx-dr-m .v.sub { grid-area: sub !important; } .frx .frx-dr-m .v.dec { grid-area: dec !important; }
  .frx .frx-dr-m .lab, .frx .frx-dr-m .frx-sw { display: none !important; }
  /* the column the list is sorted by reads as the strong one */
  .frx .frx-dl[data-sorted="ko"] .frx-dr-m .v.ko, .frx .frx-dl[data-sorted="sub"] .frx-dr-m .v.sub { color: var(--frx-ink) !important; font-weight: 700 !important; }
  .frx .frx-dr .frx-bar { height: 14px !important; }
  .frx .frx-dr:hover { background: linear-gradient(90deg, transparent, var(--frx-plate2) 8%, var(--frx-plate2) 92%, transparent) !important; }
}
@media (max-width: 719px) {
  .frx .frx-divs { padding: 2px 14px !important; }
  .frx .frx-dr { gap: 7px 12px !important; padding: 11px 0 !important; }
  .frx .frx-dr .frx-bar { height: 10px !important; }
  .frx .frx-head .frx-sort { width: 100% !important; }
  .frx .frx-sort button { flex: 1 1 0 !important; }
}

/* ---- 4. recent finishes ------------------------------------------------------------ */
.frx .frx-recent { padding: 4px 22px 8px !important; }
.frx .frx-ev + .frx-ev { border-top: 1px solid var(--frx-edge) !important; }
.frx .frx-ev-h { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 12px !important;
  margin: 0 !important; padding: 14px 0 6px !important; font: 700 12px/1.3 var(--f-data) !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: var(--frx-ink3) !important; background: none !important; border: 0 !important; }
.frx .frx-ev-h::before, .frx .frx-ev-h::after { content: none !important; display: none !important; }
.frx .frx-ev-n { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: var(--frx-ink2) !important; }
.frx .frx-ev-h time { flex: none !important; color: var(--frx-ink3) !important; }
.frx .frx-rl { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.frx .frx-rl > li { margin: 0 !important; padding: 0 !important; }
.frx .frx-rl > li::before, .frx .frx-rl > li::marker { content: none !important; }
.frx .frx-rl > li + li .frx-ri { border-top: 1px solid var(--fan-line, rgba(255,255,255,.07)) !important; }
.frx .frx-ri { display: grid !important; grid-template-columns: 62px minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important;
  min-height: 54px !important; padding: 8px 0 !important; margin: 0 !important; text-decoration: none !important; color: var(--frx-ink) !important; background: none !important; border-radius: 0 !important; }
.frx .frx-chip { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 24px !important; padding: 0 6px !important;
  border-radius: 2px !important; font: 800 12px/1 var(--k-display) !important; letter-spacing: .06em !important; }
.frx .frx-chip.ko  { background: rgba(var(--fan-rgb-ko, 219,90,94), .16) !important;  color: var(--frx-chip-ko) !important; }
.frx .frx-chip.sub { background: rgba(var(--fan-rgb-sub, 86,182,255), .18) !important; color: var(--frx-chip-sub) !important; }
.frx .frx-ri-who { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.frx .frx-ri-who > * { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.frx .frx-ri-who b { font: 700 15.5px/1.25 var(--f-data) !important; color: var(--frx-ink) !important; }
.frx .frx-ri-who > span { font-size: 13.5px !important; line-height: 1.3 !important; color: var(--frx-ink2) !important; }
.frx .frx-ri-det { font-style: normal !important; color: var(--frx-ink3) !important; }
.frx .frx-ri-when { font: 800 15px/1 var(--k-display) !important; letter-spacing: .03em !important; color: var(--frx-ink2) !important; white-space: nowrap !important; font-variant-numeric: tabular-nums !important; }
.frx .frx-ri:hover .frx-ri-who b { color: var(--frx-tap) !important; }
@media (min-width: 720px) {
  .frx .frx-ri-who { flex-direction: row !important; align-items: baseline !important; gap: 8px !important; }
  .frx .frx-ri-who b { flex: none !important; max-width: 50% !important; }
}
@media (max-width: 719px) {
  .frx .frx-recent { padding: 2px 14px 6px !important; }
  .frx .frx-ev-h { font-size: 11px !important; letter-spacing: .06em !important; }
  .frx .frx-ri { grid-template-columns: 58px minmax(0, 1fr) auto !important; gap: 10px !important; }
  .frx .frx-chip { font-size: 11px !important; padding: 0 4px !important; }
}

/* ---- links ---------------------------------------------------------------------------- */
.frx .frx-ll { list-style: none !important; display: grid !important; grid-template-columns: 1fr !important; padding: 0 !important; overflow: hidden !important; }
.frx .frx-ll > li { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--frx-edge) !important; }
.frx .frx-ll > li::before, .frx .frx-ll > li::marker { content: none !important; }
.frx .frx-ll a { position: relative !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 3px !important;
  min-height: 58px !important; padding: 10px 44px 10px 18px !important; margin: 0 !important; text-decoration: none !important; background: none !important; border: 0 !important;
  font: 800 16px/1.1 var(--k-display) !important; letter-spacing: .03em !important; text-transform: uppercase !important; color: var(--frx-ink) !important; }
.frx .frx-ll a span { font: 500 13px/1.3 var(--f-data) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--frx-ink3) !important; }
.frx .frx-ll a::after { content: '' !important; position: absolute !important; right: 20px !important; top: 50% !important; width: 8px !important; height: 8px !important;
  margin-top: -4px !important; border: solid var(--frx-tap) !important; border-width: 2px 2px 0 0 !important; transform: rotate(45deg) !important; background: none !important; }
.frx .frx-ll a:hover { background: var(--frx-plate2) !important; }
.frx .frx-ll a:hover { color: var(--frx-tap) !important; }
@media (min-width: 720px) {
  .frx .frx-ll { grid-template-columns: 1fr 1fr !important; }
  .frx .frx-ll > li:nth-child(odd) { border-right: 1px solid var(--frx-edge) !important; }
  .frx .frx-ll > li:nth-last-child(-n+2):nth-child(odd), .frx .frx-ll > li:last-child { border-bottom: 0 !important; }
}
@media (max-width: 719px) { .frx .frx-ll > li:last-child { border-bottom: 0 !important; } }

/* ---- the explanation + FAQ (bottom) --------------------------------------------------- */
.frx .frx-explain { margin: 44px 0 0 !important; padding: 26px 0 0 !important; border: 0 !important; border-top: 1px solid var(--frx-edge) !important; background: none !important; box-shadow: none !important; }
.frx .frx-explain .frx-h { margin-bottom: 12px !important; }
.frx .frx-explain p, .frx .frx-explain li { max-width: 68ch !important; font-size: 15px !important; line-height: 1.65 !important; color: var(--frx-ink2) !important; }
.frx .frx-explain p { margin: 0 0 12px !important; }
.frx .frx-explain h3 { margin: 20px 0 8px !important; padding: 0 !important; font: 800 17px/1.1 var(--k-display) !important; letter-spacing: .03em !important; text-transform: uppercase !important; color: var(--frx-ink) !important; }
.frx .frx-explain ul { margin: 0 !important; padding: 0 0 0 18px !important; }
.frx .frx-explain li { margin: 0 0 6px !important; }
.frx .frx-explain strong { color: var(--frx-ink) !important; }
.frx .rankings-faq { margin-top: 34px !important; }
.frx .rankings-faq > .frx-h { margin-bottom: 12px !important; }

/* ---- empty period ---------------------------------------------------------------------- */
.frx .frx-empty p { margin: 0 !important; font-size: 15px !important; color: var(--frx-ink2) !important; }
.frx .frx-empty a { color: var(--frx-tap) !important; font-weight: 700 !important; }

} /* @layer fan */