/* analytics.cageoracle.com -- one stylesheet for every page.
   Matches the approved fight-page design (dark, Big Shoulders Display for
   headings, IBM Plex Sans for text, IBM Plex Mono for numbers). */

:root {
  --bg: #0E0F11;
  --bar: #0B0C0E;
  --panel: #16181B;
  --panel-2: #1C1F23;
  --line: #2A2E33;
  --line-2: #23262A;
  --text: #ECE9E3;
  --muted: #A8A49C;
  --red: #E8613F;
  --red-text: #F5866A;
  --blue: #3D7BE0;
  --blue-text: #7AA7F2;
  --gold: #E9C46A;
  --gold-ink: #17140C;
  --win: #5CC98A;
  --loss: #F08080;
  --sharp: #8E8A83;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body { color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.5; }
a { color: inherit; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.red { color: var(--red-text); }
.blue { color: var(--blue-text); }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; left: -9999px; }

/* ---- header / footer ---- */
/* The header stays at the top while the page scrolls. Wide screens: one
   row. Narrower, phones included: logo and buttons on top, the tabs on one
   row of their own that slides sideways, with a fade on whichever edge has
   more and the current tab scrolled into view (search.js). On phones the
   header slides away while you scroll down and comes back as soon as you
   scroll up, and the search box opens from a magnifier button. --hdr-h
   keeps anchored jumps clear of the header. */
:root { --hdr-h: 69px; }
html { scroll-padding-top: calc(var(--hdr-h) + 14px); }
.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--line); background: var(--bar); }
.wrap.hdr { padding-top: 14px; padding-bottom: 14px; }
.hdr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav right" "msearch msearch msearch"; align-items: center; column-gap: 28px; }
.brand { grid-area: brand; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand span { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: 0.06em; white-space: nowrap; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand .o, .site-footer .about strong .o { color: var(--gold); font-size: inherit; letter-spacing: inherit; }
.main-nav { grid-area: nav; display: flex; gap: 20px; font-size: 14px; font-weight: 500; white-space: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a { color: var(--muted); text-decoration: none; padding: 6px 0; flex: none; }
.main-nav a.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--gold); }
.main-nav a:hover { color: var(--text); }
.main-nav.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
                   mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.main-nav.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
                   mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.main-nav.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
                          mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.header-right { grid-area: right; display: flex; align-items: center; gap: 16px; justify-self: end; }
.header-right a { color: var(--text); text-decoration: none; font-size: 14px; white-space: nowrap; }
.hdr-find { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; padding: 0; background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.search-open .hdr-find { border-color: var(--gold); color: var(--gold); }
.hdr-msearch { grid-area: msearch; display: none; padding-top: 12px; }
.hdr-msearch input { width: 100%; height: 42px; padding: 0 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; font-size: 16px; }
.hdr-msearch input::placeholder { color: var(--muted); }
@media (max-width: 1320px) {   /* eight tabs no longer fit beside the logo and search */
  :root { --hdr-h: 106px; }
  .hdr { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "brand right" "nav nav" "msearch msearch"; }
  .wrap.hdr { padding-bottom: 0; }
  .main-nav { margin: 8px -24px 0; padding: 0 24px; }
  .main-nav a { padding: 8px 0 11px; }
}
@media (max-width: 640px) {
  :root { --hdr-h: 93px; }
  .wrap.hdr { padding-top: 10px; }
  .hdr { column-gap: 10px; }
  .brand { gap: 7px; min-width: 0; }
  .brand svg { width: 24px; height: 24px; flex: none; }
  .brand span { font-size: 20px; letter-spacing: 0.04em; }
  .header-right { gap: 8px; }
  .header-right .search, .hdr-signin { display: none; }
  .hdr-find { display: inline-flex; }
  .hdr-cta { height: 38px; padding: 0 12px; font-size: 13px; }
  .main-nav { margin-top: 4px; }
  .main-nav a { padding: 8px 0 9px; }
  .site-header { transition: transform 0.22s ease; }
  .site-header.hdr-away { transform: translateY(-100%); }
  .search-open .hdr-msearch { display: block; padding-bottom: 12px; }
}
@media (max-width: 520px) {   /* the page's side gutter is 16px here */
  .main-nav { margin-left: -16px; margin-right: -16px; padding: 0 16px; gap: 18px; }
}
@media (max-width: 370px) {
  .brand span { font-size: 17px; letter-spacing: 0.03em; }
  .hdr-cta { padding: 0 9px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.btn-gold { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; background: var(--gold); color: var(--gold-ink) !important; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 14px; }
.site-footer { border-top: 1px solid var(--line); background: var(--bar); margin-top: 64px; }
.site-footer .wrap { padding-top: 28px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 18px 40px; font-size: 13px; color: var(--muted); }
.site-footer .about { flex: 1 1 340px; display: flex; flex-direction: column; gap: 6px; }
.site-footer .about strong { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: 0.06em; color: var(--text); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer nav a { color: var(--muted); }

/* ---- page title ---- */
.crumbs { padding: 22px 0 6px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--muted); }
.crumbs .here { color: var(--text); }
h1.title { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(36px, 10vw, 54px); line-height: 1.02; letter-spacing: 0.01em; text-wrap: balance; }
.subtitle { margin: 8px 0 0; color: var(--muted); }
.when { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 14px; }
.when strong { font-weight: 600; }
.live { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--win); display: inline-block; }
.live.frozen i { background: var(--muted); }
.result-banner { margin-top: 18px; padding: 14px 18px; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 8px; background: var(--panel); font-weight: 600; }

/* ---- matchup hero ---- */
.hero { margin-top: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-wrap: wrap; overflow: hidden; }
.corner { flex: 1 1 300px; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.corner.red-c { border-top: 4px solid var(--red); }
.corner.blue-c { border-top: 4px solid var(--blue); }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.fighter-name { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; overflow-wrap: anywhere; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; font-size: 13px; }
.stats .k { color: var(--muted); }
.stats .v { font-family: var(--mono); font-size: 15px; }
.stats .v.txt { font-family: var(--sans); }
.corner .more { font-size: 14px; text-decoration: none; font-weight: 500; }
.center { flex: 1.35 1 380px; padding: 26px 28px; background: var(--panel-2); display: flex; flex-direction: column; gap: 18px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.label-row span + span { font-weight: 400; letter-spacing: 0; text-transform: none; text-align: right; }
.big-pcts { margin-top: 8px; display: flex; justify-content: space-between; font-family: var(--display); font-weight: 800; font-size: 36px; line-height: 1; }
.small-pcts { margin-top: 8px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 20px; }
.split { margin-top: 8px; display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; }
.split.thin { height: 6px; border-radius: 3px; margin-top: 6px; }
.center-names { display: none; }
/* Narrower than the three columns need (tablets, phones): the numbers come
   first. The odds/model block goes on top, full width, with the two names
   over it so the red and blue numbers are labelled; the two fighters follow,
   side by side on a tablet and one under the other on a phone. */
@media (max-width: 1040px) {
  .hero .center { order: -1; flex-basis: 100%; }
  .center-names { display: flex; justify-content: space-between; gap: 16px; font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.05; }
  .center-names span { min-width: 0; overflow-wrap: anywhere; }
  .center-names span + span { text-align: right; }
}
@media (min-width: 640px) and (max-width: 1040px) {
  .hero .corner.blue-c { border-left: 1px solid var(--line); }
}
.split .ra { background: var(--red); }
.split .rb { background: var(--blue); flex: 1; }
.split.thin .ra, .split.thin .rb { opacity: 0.75; }
.note { margin-top: 8px; font-size: 13px; color: var(--muted); }
.locked-model { margin-top: 8px; padding: 12px 14px; border: 1px dashed #4A4536; border-radius: 8px; font-size: 13px; color: var(--muted); }
.locked-model a { color: var(--gold); }
.best { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.best > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); min-width: 0; }
.best .who { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.best .price { font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--gold); }
.move { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
.move svg { flex: none; margin-top: 2px; }
.move .mono { color: var(--text); }

/* ---- body layout ---- */
.cols { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.main-col { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.rail { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 24px 26px; }
.rail .panel { padding: 22px; }
.panel h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: 0.02em; line-height: 1.1; }
.rail .panel h2 { font-size: 26px; }
.panel .lede { margin: 6px 0 18px; color: var(--muted); font-size: 14px; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.panel-head .muted { font-size: 12px; }

/* ---- odds board ---- */
.ob-row { display: grid; grid-template-columns: minmax(0, 1fr) 82px 82px; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line-2); align-items: center; font-size: 14px; }
.ob-head { margin-top: 12px; font-size: 12px; color: var(--muted); padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.ob-head { align-items: end; }
.ob-sort { background: none; border: 0; padding: 2px 0; margin: 0; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.25; text-align: right; min-width: 0; }
.ob-head .ob-sort:not(.ob-sort-book) { justify-self: end; }
.ob-sort.ob-sort-book { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; }
.ob-sort.red { color: var(--red-text); }
.ob-sort.blue { color: var(--blue-text); }
.ob-sort span { overflow-wrap: anywhere; }
.ob-sort:hover span, .ob-sort-book:hover { text-decoration: underline; }
.ob-sort i { display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.35; }
.ob-sort.on i { opacity: 1; }
.ob-sort.on.rev i { border-top: 0; border-bottom: 5px solid currentColor; }
.ob-row > span:nth-child(2), .ob-row > span:nth-child(3) { text-align: right; }
.ob-book { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ob-book b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { font-size: 10px; letter-spacing: 0.06em; color: var(--muted); border: 1px solid #3A3E44; padding: 0 4px; border-radius: 3px; }
.px { font-family: var(--mono); padding: 2px 6px; border-radius: 4px; }
.px.best-px { background: var(--gold); color: var(--gold-ink); font-weight: 600; }
.ob-fair { border-bottom: 0; padding: 9px 0 4px; font-size: 13px; color: var(--muted); }
.ob-fair span:nth-child(n+2) { font-family: var(--mono); }
.btn-line { margin-top: 10px; width: 100%; height: 40px; background: transparent; border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.small-note { margin-top: 10px; font-size: 12px; color: var(--muted); }

/* ---- line movement ---- */
.ranges { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.ranges button { height: 32px; padding: 0 12px; border-radius: 5px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.ranges button[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--bg); }
.chart-cap { margin-top: 14px; font-size: 12px; color: var(--muted); }
.chart { margin-top: 6px; display: flex; gap: 8px; }
.chart .ylab { position: relative; width: 34px; height: 180px; font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; }
.chart .ylab span { position: absolute; right: 0; transform: translateY(-50%); }
.chart .plot { flex: 1; min-width: 0; }
.chart svg { display: block; width: 100%; height: 180px; overflow: visible; }
.xlab { position: relative; height: 16px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.xlab span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.xlab span:first-child { transform: none; }
.xlab span:last-child { transform: translateX(-100%); }
.legend { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend .sw-us { width: 16px; height: 3px; background: var(--red); }
.legend .sw-sharp { width: 16px; height: 0; border-top: 2px dashed var(--sharp); }
.chart-sum { margin-top: 10px; font-size: 13px; }

/* ---- round output ---- */
.rounds { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-end; }
.rbars { display: flex; gap: 26px; align-items: flex-end; }
.rbar { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rbar .pair { display: flex; gap: 6px; align-items: flex-end; height: 128px; }
.rbar .col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rbar .col span { font-family: var(--mono); font-size: 12px; }
.rbar .col i { display: block; width: 26px; border-radius: 3px 3px 0 0; }
.rbar .col.a i { background: var(--red); }
.rbar .col.b i { background: var(--blue); }
.rbar .lbl { font-size: 12px; color: var(--muted); }
.rounds-key { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }

/* ---- common opponents ---- */
.co-list { display: flex; flex-direction: column; gap: 12px; }
.co { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; padding: 14px; background: var(--panel-2); border-radius: 8px; }
.co .opp { font-family: var(--display); font-weight: 600; font-size: 22px; align-self: center; line-height: 1.1; }
.co .side { padding-left: 12px; }
.co .side.a { border-left: 3px solid var(--red); }
.co .side.b { border-left: 3px solid var(--blue); }
.co .res { font-weight: 600; }
.co .res.w { color: var(--win); }
.co .res.l { color: var(--loss); }
.co .det { font-size: 12px; color: var(--muted); }
.co .who { font-size: 12px; }

/* ---- card list ---- */
/* One fight per row, one fighter per line, every number on its fighter's
   line: odds now, where they opened, the best US price and book, the
   market's and the model's chance. Narrower screens drop the best price,
   then the opening price. */
.card-list { display: flex; flex-direction: column; }
.card-row, .cl-head { display: grid; grid-template-columns: minmax(0, 1fr) 70px 70px 176px 58px 58px; gap: 0 14px; }
.no-model .card-row, .no-model .cl-head { grid-template-columns: minmax(0, 1fr) 70px 70px 176px 58px; }
.card-row { padding: 11px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--text); align-items: start; font-size: 14px; }
.cl-head { padding: 12px 0 6px; border-bottom: 1px solid var(--line-2); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cl-head > span { text-align: right; }
.card-row:hover .fav { text-decoration: underline; }
.card-row .fav { font-weight: 600; }
.cr-who { min-width: 0; }
.cr-line, .cr-col > span { display: block; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-col { text-align: right; font-family: var(--mono); font-size: 13px; }
.cr-op, .cr-md { color: var(--muted); }
.cr-bk { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.cr-bk b { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); margin-right: 5px; }
.card-row .mv { font-style: normal; font-size: 9px; color: var(--gold); margin-right: 5px; vertical-align: 1px; }
.card-row .flag, .card-row .res, .card-row .mv-note { display: block; font-size: 12px; line-height: 18px; }
.card-row .flag { color: var(--gold); }
.card-row .res, .card-row .mv-note { color: var(--muted); }
@media (max-width: 900px) {
  .card-row, .cl-head { grid-template-columns: minmax(0, 1fr) 62px 62px 52px 52px; gap: 0 10px; }
  .no-model .card-row, .no-model .cl-head { grid-template-columns: minmax(0, 1fr) 62px 62px 52px; }
  .cr-best { display: none; }
}
.seg-head { margin: 22px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.seg-head:first-child { margin-top: 4px; }

.empty { margin-top: 28px; }


/* ---- shared bits added with the fighter and archive pages ---- */
.txt { color: var(--text); }
.gold { color: var(--gold); }
a.gold { color: var(--gold); }
.small-link { font-size: 14px; color: var(--text); }
.muted-strong { color: var(--text); font-weight: 400; }
.search input { width: 200px; max-width: 100%; height: 40px; padding: 0 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; font-size: 14px; }
.search input::placeholder, .big-search input::placeholder { color: var(--muted); }
.big-search { margin-top: 18px; display: flex; gap: 10px; max-width: 560px; }
.big-search input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; }
.big-search .btn-gold { height: 44px; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.fighter-name a { color: inherit; text-decoration: none; }
.fighter-name a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.result-banner .banner-note { margin-top: 4px; font-weight: 400; font-size: 14px; color: var(--muted); }

.ev-list { display: flex; flex-direction: column; }
.ev-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--text); font-size: 14px; }
.ev-row .ev-name { font-weight: 600; }
a.ev-row:hover .ev-name { text-decoration: underline; }

.stat-row, .stat-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.stat-row > span:nth-child(2), .stat-row > span:nth-child(3), .stat-head > span:nth-child(2), .stat-head > span:nth-child(3) { text-align: right; }

/* fighter page */
.form { display: inline-flex; gap: 4px; }
.form i { font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 600; width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 4px; }
.form .f-W { background: rgba(92, 201, 138, 0.16); color: var(--win); }
.form .f-L { background: rgba(240, 128, 128, 0.16); color: var(--loss); }
.form .f-D { background: var(--line); color: var(--muted); }
.next-fight { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; padding: 22px 26px; background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 10px; }
.nf-main { flex: 1 1 260px; min-width: 0; }
.nf-title { margin-top: 4px; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.1; }
.nf-title a { color: inherit; }
.nf-nums { display: flex; gap: 26px; }
.nf-nums small, .tiles small { display: block; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
.nf-nums span { font-family: var(--mono); font-size: 22px; font-weight: 600; }
.nf-nums em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.profile .stats.wide { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.fin { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.fin .k { display: inline-block; min-width: 92px; color: var(--muted); }
.pill { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--gold-ink); background: var(--gold); padding: 2px 7px; border-radius: 3px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 12px; }
.tiles > div { padding: 14px; background: var(--panel-2); border-radius: 8px; }
.tiles span { font-family: var(--mono); font-size: 22px; font-weight: 600; }
.callout { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.callout h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.callout p { margin: 0 0 6px; font-size: 14px; }
.pr-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 16px; }
.pr-units { font-family: var(--mono); font-size: 40px; font-weight: 600; line-height: 1; }
.pr-units.up, .pos { color: var(--win); }
.pr-units.down, .neg { color: var(--loss); }
.fh { display: grid; grid-template-columns: 100px minmax(0, 1fr) 64px 76px 70px; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; align-items: baseline; }
.fh-head { font-size: 12px; color: var(--muted); padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.fh .r { text-align: right; }
.fh-opp { min-width: 0; }
.fh-opp a { color: var(--text); font-weight: 600; text-decoration: none; }
.fh-opp a:hover { text-decoration: underline; }
.fh-opp small, .fh .r small { display: block; font-size: 12px; color: var(--muted); font-family: var(--sans); font-weight: 400; }
.fh-opp small a { color: var(--muted); font-weight: 400; text-decoration: underline; }
.res-W { color: var(--win); font-weight: 600; }
.res-L { color: var(--loss); font-weight: 600; }
.res-D { color: var(--muted); font-weight: 600; }
.cs { padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.cs:last-child { border-bottom: 0; }
.cs-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.cs-bar { margin-top: 6px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.cs-bar i { display: block; height: 100%; background: var(--gold); }
.cs-note { margin-top: 4px; font-size: 12px; color: var(--muted); }
.rbars.solo { gap: 22px; }
.name-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 20px; font-size: 14px; }
.name-grid a { padding: 6px 0; border-bottom: 1px solid var(--line-2); color: var(--text); text-decoration: none; }
.name-grid a:hover { text-decoration: underline; }
.co .opp a { color: inherit; text-decoration: none; }
.co .opp a:hover { text-decoration: underline; }

/* When the two columns stack (phones, small tablets), the odds come first:
   they are what most visitors came for. */
@media (max-width: 1000px) {
  .odds-first .rail { order: -1; }
}

@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  .fh { grid-template-columns: 74px minmax(0, 1fr) 54px 66px; }
  .fh > span:nth-child(5) { display: none; }
  .nf-nums { gap: 18px; }
  .corner, .center { padding: 22px 20px; }
  .panel { padding: 20px 18px; }
  .card-row, .cl-head { grid-template-columns: minmax(0, 1fr) 52px 48px 48px; gap: 0 8px; }
  .no-model .card-row, .no-model .cl-head { grid-template-columns: minmax(0, 1fr) 52px 48px; }
  .cl-head { font-size: 10px; letter-spacing: 0.02em; }
  .cr-op, .card-row .rec { display: none; }   /* phones: the names and the numbers come first */
  .ob-row { grid-template-columns: minmax(0, 1fr) 82px 82px; }
}

/* ---- schedule, announced cards, written text ---- */
/* Headings that are links (the next card's name and the results box title on
   the home page): underlined so they read as clickable, gold on hover. */
a.plain { color: inherit; text-decoration: underline; text-decoration-thickness: 0.06em;
          text-underline-offset: 0.14em; text-decoration-color: rgba(236, 233, 227, 0.5); }
a.plain:hover { text-decoration-color: var(--gold); }
.card-row .rec { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 400; white-space: nowrap; }
.card-row .tag { margin-left: 4px; color: var(--gold); border-color: #4A4536; }
.ev-row.sched > span { display: flex; flex-direction: column; min-width: 0; }
.ev-row.sched .r { text-align: right; flex: none; max-width: 45%; }
.ev-row .sub { font-size: 13px; color: var(--muted); }
.seg-times { display: flex; flex-direction: column; }
.st-row .mono { white-space: nowrap; }
.st-row { display: grid; grid-template-columns: minmax(0, 1.3fr) 84px 84px 84px minmax(0, 1.2fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; align-items: baseline; }
.st-head { font-size: 12px; color: var(--muted); padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.facts { margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0 28px; }
.facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.facts dt { color: var(--muted); flex: none; }
.facts dd { margin: 0; text-align: right; min-width: 0; }
.facts dd a { color: var(--text); }
.prose p { margin: 12px 0 0; max-width: 72ch; }
.stack { margin-top: 28px; display: flex; flex-direction: column; gap: 28px; }
.qa { margin-top: 6px; }
.qa-item { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.qa-item:last-child { border-bottom: 0; padding-bottom: 0; }
.qa-item h3 { margin: 0; font-size: 15px; font-weight: 600; }
.qa-item p { margin: 4px 0 0; color: var(--muted); font-size: 14px; max-width: 80ch; }
em.later { font-style: normal; font-size: 13px; color: var(--muted); font-family: var(--sans); font-weight: 400; }
@media (max-width: 520px) {
  .st-row { grid-template-columns: minmax(0, 1fr) 70px 70px 70px; gap: 6px; font-size: 13px; }
  .st-tv { display: none; }
}

/* ---- results box ---- */
.results-box { border-left: 4px solid var(--gold); }
.rb-main { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding: 14px 16px; background: var(--panel-2); border-radius: 8px; text-decoration: none; color: var(--text); }
.rb-main .rb-who { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.1; }
.rb-main:hover .rb-who strong { text-decoration: underline; }
.rb-main .muted { font-size: 14px; }
.rb-tiles { margin-top: 12px; }
.rb-tiles span { font-size: 20px; }
/* The three lists under the numbers: one card each, side by side when
   there's room, stacked on a phone. */
.rb-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.rb-grid.one { grid-template-columns: 1fr; }
.rb-card { padding: 18px 20px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.rb-card h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: 0.02em; line-height: 1.1; }
.rb-lede { margin: 6px 0 10px; font-size: 13px; color: var(--muted); }
.rb-card h3 + .rb-item { margin-top: 12px; }
.rb-item { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--text); font-size: 14px; }
a.rb-item:hover strong { text-decoration: underline; }
.rb-fight { color: var(--muted); }
.rb-fight strong { color: var(--text); font-weight: 600; }
.rb-sub { font-size: 13px; color: var(--muted); }
.rb-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.rb-name { font-weight: 600; }
@media (max-width: 520px) {
  .rb-main .rb-who { font-size: 24px; }
  .rb-card { padding: 16px; }
}

/* ---- previous / next event ---- */
.ev-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ev-nav a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); min-width: 0; }
.ev-nav a.r { text-align: right; }
.ev-nav small { font-size: 12px; color: var(--muted); }
.ev-nav span { font-weight: 600; }
.ev-nav a:hover span { text-decoration: underline; }
.ev-nav em { font-style: normal; font-size: 13px; color: var(--muted); }
@media (max-width: 520px) { .ev-nav { grid-template-columns: 1fr; } .ev-nav a.r { text-align: left; } }

/* ---- articles ---- */
.art-list { margin-top: 8px; display: flex; flex-direction: column; }
.art-row { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--text); }
.art-row:last-child { border-bottom: 0; padding-bottom: 0; }
.art-row:hover .art-head { text-decoration: underline; }
.art-kind { font-size: 12px; color: var(--gold); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.news-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.news-cols > :only-child { grid-column: 1 / -1; }
@media (max-width: 900px) { .news-cols { grid-template-columns: minmax(0, 1fr); } }
.art-head { font-size: 17px; font-weight: 600; line-height: 1.3; }
.art-sub { font-size: 14px; color: var(--muted); max-width: 80ch; }
.art { max-width: 740px; }
.art-kicker { margin: 4px 0 8px; font-size: 13px; color: var(--gold); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }
.art-title { font-size: clamp(34px, 7vw, 50px); }
.art-dek { margin: 14px 0 0; font-size: 19px; line-height: 1.45; color: var(--text); }
.art-byline { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.art-body { margin-top: 26px; font-size: 17px; line-height: 1.7; }
.art-body p { margin: 0 0 18px; }
.art-body h2 { margin: 34px 0 10px; font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: 0.02em; line-height: 1.15; }
.art-body h3 { margin: 26px 0 8px; font-size: 18px; font-weight: 600; }
.art-body ul, .art-body ol { margin: 0 0 18px; padding-left: 22px; }
.art-body li { margin: 0 0 8px; }
.art-body a, .art-sources a { color: var(--gold); text-underline-offset: 3px; }
.art-body blockquote { margin: 0 0 18px; padding: 4px 0 4px 16px; border-left: 3px solid var(--gold); color: var(--text); font-style: italic; }
.art-body blockquote p { margin: 0; }
.art-table { margin: 0 0 20px; overflow-x: auto; }
.art-table table { border-collapse: collapse; width: 100%; font-size: 14px; }
.art-table th, .art-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.art-table th { color: var(--muted); font-weight: 600; }
.art-table td:not(:first-child), .art-table th:not(:first-child) { font-family: var(--mono); text-align: right; }

/* ---- the AI crowd's charts (crowd_view.py) ----
   Dots: one per forecaster, Claude above the line and GPT below, in two
   colours checked for colour-blind separation on the panel. On the line:
   the crowd (gold), our model (light diamond), the market (grey). The
   grids colour each call by the picked fighter's corner. */
.cv { margin: 6px 0 28px; }
.cv-sec { position: relative; margin: 0 0 30px; }
.art-body .cv-lede { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.cv-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
.cv-key span { display: inline-flex; align-items: center; gap: 6px; }
.cv-key svg { width: 12px; height: 12px; overflow: visible; }
.cv-k-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.cv-k-dot.cv-c { background: #199e70; }
.cv-k-dot.cv-g { background: #9085e9; }
.cv-fight { margin: 0 0 10px; padding: 12px 14px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.cv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.cv-name { font-size: 15px; font-weight: 600; }
.art-body .cv-name a { color: inherit; text-decoration: none; }
.art-body .cv-name a:hover { text-decoration: underline; }
.cv-call { font-size: 14px; }
.cv-call strong, .cv-sub strong { font-family: var(--mono); font-weight: 600; }
.cv-n { margin-left: 6px; font-size: 12.5px; color: var(--muted); }
.cv-sub { margin-top: 1px; font-size: 12.5px; color: var(--muted); }
.cv-sub strong { color: var(--text); font-weight: 500; }
.cv-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; font-weight: 600; }
.cv-strip { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.cv-axis, .cv-tick { stroke: #3a3e44; stroke-width: 1; }
.cv-mid { stroke: #2A2E33; stroke-width: 1; }
.cv-dots circle { stroke: var(--panel); stroke-width: 0.8; }
.cv-dots.cv-c { fill: #199e70; }
.cv-dots.cv-g { fill: #9085e9; }
.cv-dots circle.on { stroke: var(--text); stroke-width: 1.4; }
.cv-m-crowd { fill: var(--gold); stroke: var(--panel); stroke-width: 1.6; }
.cv-m-model { fill: var(--text); stroke: var(--panel); stroke-width: 1.6; }
.cv-m-market { fill: var(--sharp); stroke: var(--panel); stroke-width: 1.6; }
.cv-ticks { position: relative; height: 16px; margin-top: 2px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.cv-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.cv-tip { position: absolute; z-index: 5; max-width: 260px; padding: 7px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); font-size: 12.5px; line-height: 1.4; pointer-events: none; }
.cv-tip b { display: block; font-family: var(--mono); font-size: 14px; }
.cv-tip span { color: var(--muted); }
.cv-sec h3 { margin-top: 20px; }
.cv-grid { margin: 0 0 18px; overflow-x: auto; }
.cv-grid table { border-collapse: separate; border-spacing: 2px; font-size: 13px; }
.cv-grid th { padding: 4px; color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; vertical-align: bottom; }
.cv-grid th[scope="row"] { position: sticky; left: 0; z-index: 1; padding-right: 10px; background: var(--bg); color: var(--text); font-size: 13px; text-align: left; vertical-align: middle; white-space: nowrap; }
.cv-grid th.cv-hl { color: var(--gold); }
.cv-grid td { min-width: 44px; height: 30px; border-radius: 4px; font-family: var(--mono); font-weight: 600; text-align: center; }
.cv-grid td.cv-none { color: var(--muted); }
.cv-grid .cv-first { border-right: 6px solid var(--bg); }
.cv-v { font-size: 11px; color: var(--muted); }
@media (max-width: 520px) {
  .cv-fight { padding: 10px 10px 6px; }
  .cv-ticks { font-size: 9.5px; }
}
.art-sources { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
.art-sources h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.art-sources ul { margin: 0; padding-left: 18px; color: var(--muted); }
.art-sources li { margin: 0 0 4px; }
.art-more { margin: 22px 0 0; }
.art-after { margin-top: 36px; max-width: 740px; }
@media (max-width: 560px) {
  .art-body { font-size: 16px; }
  .art-dek { font-size: 17px; }
}

/* ---- search suggestions ---- */
.has-suggest { position: relative; }
.suggest { position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; min-width: 100%; width: max-content; max-width: min(440px, 92vw); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.45); padding: 4px; }
.suggest-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 10px; border-radius: 6px; text-decoration: none; color: var(--text); }
.suggest-row:hover, .suggest-row.on { background: var(--line-2); }
.suggest-name { font-weight: 600; font-size: 14px; }
.suggest-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---- matchup ---- */
.mu-form { display: flex; flex-direction: column; gap: 16px; }
.mu-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: end; }
.mu-field label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.mu-input input { width: 100%; height: 48px; padding: 0 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; font-size: 16px; }
.mu-input input:focus { outline: none; border-color: var(--gold); }
.mu-vs { font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--muted); padding-bottom: 10px; text-transform: uppercase; }
.mu-opts { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; }
.mu-opts label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.mu-opts select { height: 40px; padding: 0 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; font-size: 14px; }
.mu-go { height: 40px; border: 0; cursor: pointer; font: inherit; font-weight: 600; padding: 0 22px; margin-left: auto; justify-content: center; }
.mu-form h2 { margin: 0; }
.mu-error { margin: 0; color: var(--red-text); font-size: 14px; }
.mu-suggest, .mu-try { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.mu-suggest a, .mu-try a { color: var(--gold); }
.mu-booked a { color: var(--gold); }
.mu-booked { font-weight: 400; }
.mu-verdict { margin: 14px 0 0; font-size: 16px; }
.mu-methods { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.mu-method { display: grid; grid-template-columns: 110px minmax(0, 1fr) 52px; gap: 12px; align-items: center; font-size: 14px; }
.mu-method .cs-bar { margin-top: 0; height: 10px; border-radius: 5px; }
.mu-method .mono { text-align: right; }
.mu-stat { font-size: 13px; }
@media (max-width: 640px) {
  .mu-pick { grid-template-columns: minmax(0, 1fr); }
  .mu-vs { padding: 0; font-size: 18px; }
  .mu-go { margin-left: 0; width: 100%; }
}

/* ---- research ----
   The study bodies are shared with the old site's /blog: their charts and
   tables are coloured with that site's variable names, mapped here to this
   site's dark palette. */
.rs-panel { margin-top: 22px; }
.rs-body {
  --near-black: var(--text); --white: var(--panel);
  --gray-1: var(--panel); --gray-2: var(--line-2); --gray-3: #3A3E44; --gray-4: var(--sharp);
  --gray-5: var(--muted); --gray-6: #D9D5CD; --hairline: var(--line);
  --blue: var(--blue-text); --red: var(--red-text); --green: var(--win);
  --green-ink: var(--win); --red-ink: var(--loss);
}
.rs-body .blog-lede { margin: 0 0 20px; font-size: 19px; line-height: 1.55; font-weight: 500; color: var(--text); }
.rs-body .blog-body p, .rs-body .blog-body li { color: var(--gray-6); }
.rs-body .blog-body strong, .rs-body .blog-body em { color: var(--text); }
.rs-body .blog-body ul { margin: 4px 0 20px; padding-left: 20px; }
.rs-body .blog-fig { margin: 22px 0; padding: 18px 18px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.rs-body .blog-fig svg { display: block; height: auto; font-family: var(--sans); }
.rs-body .blog-cap { margin: 10px 6px 2px; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
.rs-body .blog-table { width: 100%; margin: 6px 0 20px; border-collapse: collapse; font-size: 15px; }
.rs-body .blog-table th { padding: 8px 10px; border-bottom: 2px solid var(--line); text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.rs-body .blog-table td { padding: 10px; border-bottom: 1px solid var(--line-2); color: var(--text); }
.rs-body .blog-table td.num { text-align: right; font-family: var(--mono); font-weight: 600; }
.rs-body .blog-note { margin: 30px 0 0; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.rs-body .blog-note strong { color: var(--text); font-weight: 600; }
@media (max-width: 560px) {
  .rs-body .blog-lede { font-size: 17px; }
  .rs-body .blog-fig { padding: 12px 8px 8px; }
  .rs-body .blog-table { font-size: 14px; }
}

/* ---- lab ---- */
.lab-gap { margin-top: 22px; }
.lab-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lab-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text); transition: border-color .15s ease; }
.lab-card:hover { border-color: var(--gold); }
.lab-card:hover .lab-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lab-kicker { font-size: 12px; color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.lab-name { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.05; letter-spacing: 0.01em; }
.lab-desc { color: var(--muted); font-size: 14.5px; }
.lab-go { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; }
.lab-meta { margin: 18px 0 0; font-size: 14px; }
.lab-chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.lab-chips a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--text); background: var(--panel); white-space: nowrap; }
.lab-chips a:hover { border-color: var(--gold); }
.lab-stack { margin-top: 22px; }
.lab-one { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.lab-one .mu-go { margin-left: 0; }
.lab-form-note { font-size: 13px; color: var(--muted); align-self: center; }
.big-names { margin-top: 8px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* rankings */
.rk-panel { scroll-margin-top: calc(var(--hdr-h) + 14px); }
.small-note + .lab-form { margin-top: 22px; }
.rk-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 64px 48px 56px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.rk-row:last-child { border-bottom: 0; }
.rk-row > span:nth-child(n+3) { text-align: right; }
.rk-head { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 14px; }
.rk-pos { font-weight: 600; text-align: right; }
.rk-name { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-name a { color: var(--text); text-decoration: none; }
.rk-name a:hover { text-decoration: underline; }
.rk-champ { background: rgba(233, 196, 106, 0.07); }
.rk-champ .rk-pos { color: var(--gold); font-family: var(--display); font-weight: 800; font-size: 18px; }
.rk-disagree { color: var(--gold); font-weight: 600; }
.rk-mv .up { color: var(--win); font-size: 12.5px; font-weight: 600; }
.rk-mv .down { color: var(--loss); font-size: 12.5px; font-weight: 600; }
.rk-missing { opacity: 0.5; }

/* rematch */
.rm-fight { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 0.9fr); gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.rm-fight:last-child { border-bottom: 0; padding-bottom: 0; }
.rm-when { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font-size: 14px; }
.rm-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); background: var(--gold); border-radius: 4px; padding: 2px 6px; }
.rm-pcts { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; }
.rm-out { font-size: 14px; }
.lab-today { margin-top: 28px; }

/* matchmaker */
.mm-best { margin-top: 10px; font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1.05; }
.mm-best a { color: var(--text); text-decoration: none; }
.mm-best a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.mm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 200px) 52px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.mm-row:last-child { border-bottom: 0; }
.mm-row .mono { text-align: right; }
.mm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-name a { color: var(--text); }
.mm-bar { margin-top: 0; }

/* rounds */
.rd-big .gold { color: var(--gold); }
.rd-ou .ra { background: var(--gold); }
.rd-ou .rb { background: var(--line); }
.rd-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.rd-line { display: grid; grid-template-columns: minmax(0, 1fr) 56px 82px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.rd-line .rd-v, .rd-line .rd-o { text-align: right; }
.rd-v { font-weight: 600; }
.rd-split { margin-top: 18px; display: flex; height: 12px; gap: 2px; border-radius: 6px; overflow: hidden; }
.rd-split i, .rd-key i { display: block; }
.rd-a { background: var(--red); }
.rd-b { background: var(--sharp); }
.rd-c { background: var(--gold); }
.rd-key { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--muted); }
.rd-key span { display: inline-flex; align-items: center; gap: 7px; }
.rd-key i { width: 10px; height: 10px; border-radius: 2px; }

@media (max-width: 760px) {
  .lab-grid { grid-template-columns: minmax(0, 1fr); }
  .rd-lines { grid-template-columns: minmax(0, 1fr); }
  .rm-fight { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rm-when { flex-direction: row; align-items: center; }
}
@media (max-width: 520px) {
  .lab-name { font-size: 26px; }
  .lab-one { grid-template-columns: minmax(0, 1fr); }
  .lab-one .mu-go { width: 100%; }
  .rk-row { grid-template-columns: 26px minmax(0, 1fr) 46px 34px 44px; gap: 8px; font-size: 13.5px; }
  .mm-row { grid-template-columns: minmax(0, 1fr) 52px; }
  .mm-row .mm-bar { display: none; }
  .mm-best { font-size: 28px; }
  .rd-big { font-size: 28px; }
}
.ev-alias { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.ev-alias strong { color: var(--gold); font-weight: 600; }

/* ---- dream fights ---- */
.dream-panel { margin-top: 28px; }
.dream-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 28px; }
.dream-list a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--text); font-size: 14.5px; font-weight: 600; }
.dream-list a:hover span:first-child { text-decoration: underline; }
.dream-list a .muted { font-weight: 400; font-size: 12.5px; white-space: nowrap; }
.dream-read { font-size: 16px; line-height: 1.65; max-width: 760px; }
.dream-read p { margin: 0 0 12px; }
.dream-read p:last-child { margin-bottom: 0; }

/* ---- leaderboards ---- */
.lab-chips a.on { border-color: var(--gold); color: var(--gold); }
.win { color: var(--win); }
.loss { color: var(--loss); }
.bd-row { display: grid; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.bd-row:last-child { border-bottom: 0; }
.bd-head { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 0; }
.bd-name { min-width: 0; }
.bd-name a { color: var(--text); font-weight: 600; }
.bd-tag { display: inline-block; margin-left: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); background: var(--gold); border-radius: 4px; padding: 1px 5px; vertical-align: 1px; }
.bd-upsets { grid-template-columns: 32px minmax(0, 1fr) 84px 60px minmax(0, 0.8fr) 96px; }
.bd-moves { grid-template-columns: minmax(0, 1fr) 120px 120px minmax(0, 0.7fr); }
.bd-recs { grid-template-columns: minmax(0, 1fr) 60px 80px 76px; }
.bd-recs > span:nth-child(n+2), .bd-fav > span:nth-child(n+2) { text-align: right; }
.bd-fav { grid-template-columns: minmax(0, 1fr) 70px 60px 80px 110px 120px; }
.bd-two { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 820px) {
  .bd-two { grid-template-columns: minmax(0, 1fr); }
  .bd-upsets { grid-template-columns: 26px minmax(0, 1fr) 64px 44px; }
  .bd-upsets .bd-how, .bd-upsets > span:last-child { display: none; }
  .bd-moves { grid-template-columns: minmax(0, 1fr) 96px 96px; }
  .bd-moves > span:nth-child(4) { grid-column: 1 / -1; }
  .bd-head.bd-moves > span:nth-child(4) { display: none; }
  .bd-fav { grid-template-columns: minmax(0, 1fr) 46px 44px 52px 64px 64px; font-size: 12.5px; gap: 6px; }
}
@media (max-width: 520px) {
  .bd-fav { grid-template-columns: minmax(0, 1fr) 44px 48px 60px 60px; }
  .bd-fav > span:nth-child(2) { display: none; }
}
.only-sm { display: none; }
@media (max-width: 640px) {
  .only-sm { display: inline; }
  .only-lg { display: none; }
}
.lab-sec { margin: 40px 0 0; font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: 0.01em; }
.lab-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lab-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .lab-sec { margin-top: 32px; font-size: 27px; line-height: 1.15; } }
.lab-grid-1 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1000px) { .lab-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.lab-name-sm { font-size: 24px; }
@media (max-width: 1000px) { .lab-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .lab-grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---- email signup ---- */
.email-form { display: flex; gap: 10px; flex-wrap: wrap; }
.email-form input[type=email] { flex: 1 1 220px; min-width: 0; height: 44px; padding: 0 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; font-size: 16px; }
.email-form input[type=email]:focus { outline: none; border-color: var(--gold); }
.email-form .btn-gold { height: 44px; border: 0; cursor: pointer; font: inherit; font-weight: 600; padding: 0 18px; }
.email-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.email-form.big input[type=email] { height: 50px; font-size: 17px; }
.email-form.big .btn-gold { height: 50px; padding: 0 24px; }
.sub-panel { max-width: 640px; }
.email-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr); gap: 18px 28px; align-items: center; border-top: 3px solid var(--gold); }
.email-box h2 { font-size: 26px; }
.email-box .lede { margin-bottom: 0; }
@media (max-width: 760px) { .email-box { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- admin */
.adm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.adm-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; background: transparent; border: 1px solid var(--line); border-radius: 6px; color: var(--text) !important; font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.adm-btn:hover { border-color: var(--muted); }
.adm-btn.gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink) !important; font-weight: 600; }
.adm-btn.danger { color: var(--red-text) !important; }
.adm-btn.danger:hover { border-color: var(--red); }
.adm-msg { margin-top: 18px; }
.adm-sub { margin: 22px 0 4px; font-size: 15px; font-weight: 600; }
.adm-none { margin: 8px 0 0; font-size: 14px; }
.adm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 12px 0; border-top: 1px solid var(--line); }
.adm-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.adm-main a { color: var(--text); font-weight: 600; }
.adm-meta { font-size: 13px; color: var(--muted); }
.adm-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.adm-acts form { margin: 0; }
.adm-card input[type=text] { width: 200px; height: 34px; padding: 0 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; font-size: 14px; }
.adm-card input[type=text]:focus { outline: none; border-color: var(--gold); }
.adm-more { margin-top: 18px; }
.adm-more summary { cursor: pointer; font-size: 15px; font-weight: 600; padding: 4px 0 10px; }
.adm-counts { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.adm-counts div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.adm-counts small { font-size: 12px; color: var(--muted); }
.adm-counts span { font-size: 20px; }
.adm-counts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adm-warn { color: var(--red-text); }
.adm-newguest { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--gold); border-radius: 10px; background: var(--panel); }
.adm-newguest h2 { margin: 0 0 10px; font-size: 20px; }
.adm-newguest p { margin: 8px 0; }
.adm-newguest code { font-size: 18px; padding: 2px 8px; background: var(--bg); border-radius: 4px; margin-right: 6px; }
.adm-newguest .adm-btn { vertical-align: middle; }
.adm-guest-new { flex-wrap: wrap; }
.adm-guest-new .adm-acts { flex-wrap: wrap; }
.adm-off { margin-left: 6px; font-size: 12px; color: var(--red-text); }
.adm-db-big { font-size: 15px !important; overflow-wrap: anywhere; }
.adm-db { margin-top: 16px; }
.adm-db-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 90px 150px; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.adm-db-row > span:nth-child(2), .adm-db-row > span:nth-child(3) { text-align: right; }
.adm-db-head { font-size: 12px; color: var(--muted); border-top: 0; padding-top: 0; }
.adm-db-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-db-name .mono { overflow-wrap: anywhere; }
.adm-db-name small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.adm-db-share { display: flex; align-items: center; gap: 8px; }
.adm-db-share b { display: block; flex: none; width: 90px; height: 8px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.adm-db-share i { display: block; height: 100%; min-width: 2px; background: var(--gold); }
.adm-db-share .mono { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .adm-db-row { grid-template-columns: minmax(0, 1fr) 76px 70px; gap: 10px; }
  .adm-db-row > span:nth-child(4) { display: none; }
}
.adm-subs { margin-top: 14px; }
.adm-sub-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 110px; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.adm-email { overflow-wrap: anywhere; }
.adm-invite { margin-top: 18px; }
.adm-invite .adm-btn { margin-top: 14px; }
.adm-check { cursor: pointer; }
.adm-check input { margin: 0 8px 0 0; accent-color: var(--gold); vertical-align: -2px; }
.adm-login { max-width: 460px; margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.adm-login label { font-size: 14px; color: var(--muted); }
.adm-login-row { display: flex; gap: 10px; }
.adm-login input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; font-size: 16px; }
.adm-login input:focus { outline: none; border-color: var(--gold); }
.adm-login .btn-gold { height: 44px; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.adm-confirm { max-width: 640px; margin-top: 22px; }
.adm-confirm-title { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
@media (max-width: 640px) {
  .adm-row { flex-direction: column; align-items: stretch; }
  .adm-acts { flex-wrap: wrap; }
  .adm-card input[type=text] { flex: 1; width: auto; min-width: 0; font-size: 16px; }
  .adm-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-sub-row { grid-template-columns: minmax(0, 1fr) auto; }
  .adm-sub-row > span:last-child { display: none; }
}

/* ---- about ---- */
.about-lede { margin: 14px 0 0; max-width: 760px; font-size: 19px; line-height: 1.5; color: var(--text); }
.about-lede strong { font-weight: 600; }
.about-text { margin-top: 30px; }
.about-text .art-body h2 { scroll-margin-top: 90px; }   /* clear the sticky header when a link jumps to a section */
@media (max-width: 640px) { .about-lede { font-size: 17px; } }

/* The forecast scoreboard (web/analytics/scoreboard.py), its own tab: the
   record, then the big table. Each cell is a pick and how sure: 'Allen 56%'. */
.fs-full { padding: 12px 22px 16px; }
.bd-fs { grid-template-columns: minmax(0, 1fr) 60px 90px 70px; }
.bd-fs > span:nth-child(n+2) { text-align: right; }
.fs-line { margin: 6px 0 14px; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--muted); }
.fs-line strong { color: var(--text); font-weight: 600; }
.fs-line a { margin-left: auto; font-weight: 600; }
.fs-table { overflow-x: auto; }
.fs-table table { border-collapse: collapse; width: 100%; font-size: 14px; }
.fs-table th, .fs-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); text-align: right; white-space: nowrap; }
.fs-table th { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
               white-space: normal; vertical-align: bottom; min-width: 78px; }
.fs-table td { font-variant-numeric: tabular-nums; }
/* A long surname wraps its percentage under it rather than pushing the last columns off the page. */
.fs-big-t td { white-space: normal; min-width: 78px; }
.fs-big-t tr.fs-tot td { white-space: nowrap; }
/* Phones scroll the table sideways anyway: keep each cell on one line. */
@media (max-width: 760px) { .fs-big-t td { white-space: nowrap; } }
/* The fight stays put while a phone scrolls the columns sideways. */
.fs-table th:first-child, .fs-table td:first-child { text-align: left; white-space: normal; min-width: 190px;
                                                     position: sticky; left: 0; z-index: 1; background: var(--panel); }
.fs-table td:first-child a, .fs-fight { color: var(--text); font-weight: 600; }
.fs-res { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.fs-tot td { font-family: var(--mono); font-size: 13.5px; color: var(--text); }
.fs-tot td:first-child { font-family: var(--sans); font-weight: 600; }
.fs-tot td.lead { color: var(--gold); }
.fs-card td { padding-top: 18px; text-align: left; font-weight: 600; color: var(--text); border-bottom-color: var(--line); }
.fs-card td a { color: var(--text); }
.fs-card .muted { margin-left: 6px; font-size: 13px; font-weight: 400; }
.fs-table tr:last-child td { border-bottom: 0; }
.fs-table td.win { color: var(--win); }
.fs-table td.loss { color: var(--loss); }
.fs-table td.none { color: var(--muted); }
/* The Outcome column (a dash before the fight), and the tick or cross after each pick. */
.fs-table th.fs-out, .fs-table td.fs-out { text-align: left; min-width: 112px; }
.fs-mark { margin-left: 4px; font-weight: 700; }
/* The record: one row per forecaster, kept narrow so the numbers sit near the names. */
.fs-sum table { max-width: 760px; }
.fs-sum td { vertical-align: top; }
.fs-sum td:nth-child(n+2), .fs-sum th:nth-child(n+2) { min-width: 96px; }
.fs-short { display: none; }
@media (max-width: 520px) {
  .fs-full { padding: 8px 12px 14px; }
  .bd-fs { grid-template-columns: minmax(0, 1fr) 44px 64px 56px; gap: 8px; font-size: 13px; }
  .fs-table th, .fs-table td { padding: 8px; font-size: 13px; }
  .fs-table th:first-child, .fs-table td:first-child { min-width: 124px; max-width: 124px; padding-left: 0; }
  .fs-line a { margin-left: 0; }
}
/* Phones: the record fits without scrolling sideways (short headings, tighter cells). */
@media (max-width: 520px) {
  .fs-table th.fs-out, .fs-table td.fs-out { min-width: 72px; }
  .fs-big-t td.fs-out { white-space: normal; max-width: 104px; }
  .fs-sum th, .fs-sum td { padding: 8px 5px; }
  .fs-sum td:nth-child(n+2), .fs-sum th:nth-child(n+2) { min-width: 0; }
  .fs-sum th:first-child, .fs-sum td:first-child { min-width: 0; max-width: none; padding-left: 0; }
  .fs-sum th { letter-spacing: 0.03em; }
  .fs-long { display: none; }
  .fs-short { display: inline; }
}
/* The AI crowd in the Lab: its feature card, every card's row, its results on a card's page. */
.fs-feature { border-color: var(--gold); }
.fs-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: baseline; }
.fs-cards .fs-line { margin: 0; }
.fs-cards .fs-line a { margin-left: 0; }
.fs-went { margin: 22px 0 6px; }
.fs-went .fs-line { margin-top: 10px; }
.cr-ai { color: var(--muted); }
.with-crowd .card-row, .with-crowd .cl-head { grid-template-columns: minmax(0, 1fr) 70px 70px 176px 58px 58px 64px; }
@media (max-width: 900px) {
  .with-crowd .card-row, .with-crowd .cl-head { grid-template-columns: minmax(0, 1fr) 62px 62px 52px 52px 56px; }
}
@media (max-width: 760px) { .fs-cards { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
@media (max-width: 520px) {
  .with-crowd .card-row, .with-crowd .cl-head { grid-template-columns: minmax(0, 1fr) 50px 44px 44px 40px; gap: 0 6px; }
}
.crowd-how { max-width: 860px; }
/* The AI crowd's setup, at the top of each card's page (crowd_view.setup_html). */
.cv-setup { margin: 22px 0 6px; }
.cv-setup h2 { margin: 0; }
.cv-setup-lede { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.cv-setup-cols { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px 28px; }
.cv-setup h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.cv-setup .muted { font-size: 13.5px; }
.cv-setup p.muted { margin: 0 0 10px; line-height: 1.5; }
.cv-setup-models { list-style: none; margin: 0; padding: 0; }
.cv-setup-models li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-weight: 600; font-size: 14.5px; }
.cv-setup-models li:last-child { border-bottom: 0; }
.cv-setup-models .muted { margin-left: auto; font-weight: 400; white-space: nowrap; }
.cv-setup-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; align-self: center; }
.cv-setup-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cv-setup-chips li { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--text); background: var(--panel-2); }
@media (max-width: 700px) { .cv-setup-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- fighter photos
   photos.py: a circle with the fighter's picture, or his initials. A
   ufc.com headshot fills the circle from the top; a full-body picture is
   zoomed to the head; a Wikimedia photo is cropped from the upper middle. */
.av { display: inline-flex; align-items: center; justify-content: center; flex: none; position: relative; overflow: hidden; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-family: var(--sans); font-weight: 600; letter-spacing: 0.02em; vertical-align: middle; line-height: 1; }
.av img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.av.fit-body img { transform: scale(2.3); transform-origin: 50% 3%; }
.av.fit-photo img { object-position: 50% 25%; }
.av-xs { width: 22px; height: 22px; font-size: 0; border: 0; }
.av-sm { width: 30px; height: 30px; font-size: 10px; }
.av-md { width: 64px; height: 64px; font-size: 18px; }
.av-lg { width: 132px; height: 132px; font-size: 34px; }

.cr-line .av-xs { vertical-align: top; margin: 2px 8px 0 0; }
.card-list .cr-line, .card-list .cr-col > span { line-height: 26px; }
.card-list .cr-line { height: 26px; }
.name-grid.with-faces a { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.name-grid.with-faces a > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.suggest-row { align-items: center; }

/* The fighter page: his face beside the name (or, with only ufc.com's
   full-body picture, him standing). */
.f-head.has-photo { display: flex; align-items: center; gap: 24px; }
.f-head-txt { min-width: 0; flex: 1 1 auto; }
.f-photo { margin: 0; flex: none; }
.f-head .ph-credit { margin: 10px 0 0; }
.f-body-img { display: block; height: 200px; width: auto; max-width: 160px; object-fit: contain; object-position: 50% 100%; }

/* The fight page: each fighter's picture beside his name. */
.corner-id.has-photo { display: flex; align-items: flex-start; gap: 16px; }
.corner-ph { flex: none; display: block; line-height: 0; }
.corner-ph .av-md { border-width: 2px; }
.red-c .corner-ph .av-md { border-color: var(--red); }
.blue-c .corner-ph .av-md { border-color: var(--blue); }
.ph-credit { margin-top: 6px; font-size: 11px; color: var(--muted); }
.ph-credit a { color: inherit; }

@media (max-width: 640px) {
  .av-lg { width: 92px; height: 92px; font-size: 24px; }
  .av-md { width: 52px; height: 52px; font-size: 15px; }
  .f-head.has-photo { gap: 12px; }
  .f-body-img { height: 140px; max-width: 110px; }
  .f-head.has-photo { align-items: flex-start; }
}

/* ---------------------------------------------------------------- Invited
   The by-invitation talking points (creator.py, guests.py, invited*.html). */
.iv-gate { max-width: 520px; margin: 40px auto 20px; }
.iv-gate .title { margin-top: 6px; }
.iv-lede { margin: 12px 0 0; max-width: 760px; color: var(--text); line-height: 1.6; }
.iv-note { margin: 8px 0 0; color: var(--gold); font-size: 14px; }
.iv-form { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.iv-form label { font-size: 13px; color: var(--muted); margin-top: 6px; }
.iv-form input { height: 44px; padding: 0 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; font-size: 16px; }
.iv-form input:focus { outline: none; border-color: var(--gold); }
.iv-form .btn-gold { margin-top: 14px; height: 44px; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.iv-error { margin: 6px 0 0; color: var(--red-text); font-size: 14px; }
.iv-top { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.iv-top .crumbs { padding: 0; }
.iv-top form { margin: 0; }
.iv-out { background: transparent; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font: inherit; font-size: 13px; padding: 5px 10px; cursor: pointer; }
.iv-out:hover { color: var(--text); border-color: var(--muted); }
.ck-intro { margin: 12px 0 0; max-width: 760px; color: var(--text); }
.ck-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.ck-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.ck-btn:hover { border-color: var(--muted); }
.ck-btn.gold { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.ck-btn.ok, .tp-copy.ok { border-color: var(--win); color: var(--win); }
.ck-btn.gold.ok { background: var(--win); border-color: var(--win); color: var(--gold-ink); }
.ck-deal { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.ck-story { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: s; }
.ck-story li { counter-increment: s; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.ck-story li::before { content: counter(s); font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--gold); line-height: 1; }
.ck-where { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.tp-say { font-weight: 600; font-size: 16px; }
.tp-why { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.tp-why b { color: var(--text); font-weight: 600; }
.tp-copy { height: 30px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.tp-copy:hover { color: var(--text); border-color: var(--muted); }
.ck-jump { margin-top: 22px; }
.ck-fight { margin-top: 22px; }
.ck-fight > summary { list-style: none; cursor: pointer; }
.ck-fight > summary::-webkit-details-marker { display: none; }
.ck-fight-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.ck-fight:not([open]) .ck-fight-head::after { content: "Show \25BE"; font-size: 13px; color: var(--gold); }
.ck-vs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.ck-vs .nm { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.05; }
.ck-vs .nm small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--muted); }
.ck-vs .v { color: var(--muted); font-size: 15px; }
.ck-meta { color: var(--muted); font-size: 13px; }
.ck-fight[open] .ck-count { display: none; }
.ck-nums { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ck-nums div { padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.ck-nums small { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ck-nums span { display: block; margin-top: 4px; font-family: var(--mono); font-size: 17px; overflow-wrap: anywhere; }
.ck-nums em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: var(--muted); }
.ck-nums .none span { color: var(--muted); }
.ck-group { margin-top: 22px; }
.ck-group h3 { margin: 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.ck-tps { list-style: none; margin: 6px 0 0; padding: 0; }
.ck-tps li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.ck-row { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.ck-cards { list-style: none; margin: 10px 0 0; padding: 0; }
.ck-cards li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.ck-cards a { display: flex; flex-direction: column; gap: 2px; color: var(--text); text-decoration: none; min-width: 0; }
.ck-cards a span { font-size: 13px; color: var(--muted); }
.ck-cards li > .gold { font-size: 14px; white-space: nowrap; }
.ck-what { margin: 12px 0 0; padding-left: 18px; }
.ck-what li { margin: 8px 0; }
@media (max-width: 760px) {
  .ck-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-vs .nm { font-size: 24px; }
  .ck-vs .v { display: none; }
  .ck-story li { grid-template-columns: 24px minmax(0, 1fr); }
  .ck-story li .tp-copy, .ck-tps li .tp-copy { grid-column: 2; justify-self: start; }
  .ck-tps li { grid-template-columns: minmax(0, 1fr); }
  .ck-tps li .tp-copy { grid-column: 1; }
}