/* ==========================================================================
   CageMetrics — "Broadcast Light" design system
   Light, editorial, data-forward. Charcoal text on off-white, red accent,
   condensed Oswald display headings, layered white cards with soft shadows.
   ========================================================================== */

/* Cross-document view transitions — opt every same-origin navigation into a
   smooth animated transition. Chrome 126+ / Edge / Safari TP pick this up and
   render the navigation as a cross-fade; the column-header drag-drop reorder
   in particular feels much smoother when the old/new tables fade through
   each other. Older browsers ignore the rule and navigate as normal. */
@view-transition { navigation: auto; }

/* Self-hosted variable display face (weights 200–700). Latin subset only. */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/oswald-latin.5f49329007f1.woff2") format("woff2");
}

:root {
  --maxw: 1040px;

  /* surfaces */
  --bg: #f3f4f6;
  --bg-top: #e9ebef;
  --surface: #ffffff;
  --surface-2: #eef1f5;   /* insets, meter tracks, row hover */
  --border: #e4e7ec;
  --border-strong: #d3d8e0;

  /* ink */
  --text: #14161a;
  --text-2: #3c4250;
  --muted: #6b7280;
  --faint: #9aa1ab;

  /* brand + status */
  --accent: #d62828;
  --accent-strong: #b01c1c;
  --accent-soft: #fdebeb;
  --ok: #15803d;
  --ok-soft: #e6f4ec;
  --info: #1d4ed8;
  --info-soft: #e9efff;
  --title: #9a6a12;

  /* podium */
  --gold: #b7791f;
  --silver: #71808f;
  --bronze: #a4663b;

  /* chaos meter gradient (cool→hot) */
  --chaos-a: #f59e0b;
  --chaos-b: #ef4444;

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .07);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, .07);
  --shadow-lg: 0 16px 44px rgba(16, 24, 40, .13);

  --radius: 12px;
  --radius-sm: 8px;

  --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-top), var(--bg) 220px);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.75rem 1.25rem 4rem;
}

a { color: var(--text); text-decoration: none; transition: color 120ms; }
a:hover { color: var(--accent); }

/* ---- typography ---------------------------------------------------------- */
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.05;
  letter-spacing: .005em;
  margin: 0 0 1.1rem;
}
h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; }

.section-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-2);
  margin: 0 0 .85rem;
}

.crumbs { color: var(--muted); margin: 0 0 1.1rem; font-size: .9rem; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }

code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .9em;
}

/* ---- header -------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.site-head-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .7rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.brand { display: inline-flex; align-items: center; gap: .5rem; }
.brand-mark { width: 26px; height: 26px; display: block; flex: none; }
.brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
}
.brand:hover .brand-text { color: var(--accent); }

.site-nav { display: flex; align-items: center; gap: 1.1rem; font-size: .95rem; }
.site-nav a {
  color: var(--text-2);
  font-weight: 600;
  padding: .15rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Docs dropdown — built on <details>/<summary> so tap-outside-to-close and
   keyboard toggle work without any JS. The default disclosure marker is
   suppressed and replaced with a custom chevron that matches the editorial
   tone of the rest of the nav. */
.nav-dropdown { position: relative; }
.nav-dropdown > summary {
  list-style: none;
  cursor: pointer;
  color: var(--text-2);
  font-weight: 600;
  font-size: inherit;
  padding: .15rem 0;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  user-select: none;
  transition: color 120ms, border-color 120ms;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::marker { content: ""; }
.nav-dropdown > summary:hover,
.nav-dropdown[open] > summary { color: var(--accent); border-bottom-color: var(--accent); }
.nav-dropdown > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.nav-dropdown-caret {
  color: var(--muted);
  font-size: .75em;
  line-height: 1;
  transition: transform 150ms, color 120ms;
}
.nav-dropdown[open] > summary .nav-dropdown-caret { transform: rotate(180deg); color: var(--accent); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: .3rem 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
}
.nav-dropdown-menu a {
  display: block;
  padding: .45rem .9rem;
  color: var(--text);
  font-weight: 500;
  font-size: .92rem;
  border-bottom: none;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

/* search */
.search { position: relative; flex: 1; max-width: 360px; margin-left: auto; }
.search-input {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: .5rem 1rem;
  font-size: .9rem;
  font-family: inherit;
  transition: border-color 120ms, box-shadow 120ms;
}
.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-input::placeholder { color: var(--faint); }

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 50;
}
.search-section { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.search-section:last-child { border-bottom: none; }
.search-section h4 {
  margin: 0;
  padding: .3rem .9rem;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--faint);
  font-weight: 700;
  font-family: var(--font);
}
.search-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .5rem .9rem;
  color: var(--text);
}
.search-item:hover, .search-item.is-active { background: var(--accent-soft); color: var(--accent); }
.search-item-title { font-size: .92rem; font-weight: 500; }
.search-item-meta { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.search-empty { padding: .85rem; color: var(--muted); font-size: .85rem; margin: 0; }

/* ---- footer -------------------------------------------------------------- */
.site-foot {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.75rem 1.25rem;
  color: var(--faint);
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   Cards / shared surfaces
   ========================================================================== */
.event-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.event-card a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.event-card a:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.event-card--upcoming a {
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-soft), var(--surface) 55%);
}
/* Quiet "more upcoming events →" chip below the single upcoming hero
   card; jumps to the dedicated /events/upcoming/ page. */
.upcoming-more { text-align: right; margin-top: -.1rem; margin-bottom: .35rem; }
.upcoming-more a {
  font-size: .85rem;
  color: var(--muted);
  border-bottom: 1px dotted var(--border-strong);
  padding-bottom: 1px;
}
.upcoming-more a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.event-row-main { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.event-row-left { display: flex; flex-direction: column; gap: .2rem; }
.event-name { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: .01em; }
.event-date-loc { color: var(--muted); font-size: .85rem; }
.event-row-stats { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.stat {
  color: var(--text-2);
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface-2);
  border-radius: 999px;
  padding: .2rem .6rem;
}
.stat--chaos { color: #fff; background: linear-gradient(90deg, var(--chaos-a), var(--chaos-b)); }

.upcoming-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
  margin-right: .4rem;
}

.hint {
  background: var(--info-soft);
  border: 1px solid #cdddff;
  padding: .6rem .85rem;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: .9rem;
  margin: 0;
}
.empty {
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  padding: 1.5rem;
  border-radius: var(--radius-sm);
  text-align: center;
}

/* ==========================================================================
   Home
   ========================================================================== */
.hero { margin-bottom: 2rem; }
.hero-card {
  position: relative;
  display: block;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--accent-soft), transparent 60%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: var(--shadow-md);
  transition: box-shadow 120ms, transform 120ms;
}
.hero-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1.04;
  letter-spacing: .005em;
  margin: .55rem 0 .3rem;
}
.hero-title a { color: var(--text); }
.hero-title a:hover { color: var(--accent); }
.hero-meta { color: var(--muted); margin: 0 0 1.1rem; font-size: .95rem; }
.hero-main {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-sm);
}
.hero-main-label {
  display: block;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .09em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: .55rem;
}
.hero-weight { color: var(--muted); font-size: .85rem; margin: .6rem 0 0; }
.hero-cta { color: var(--accent); font-weight: 700; font-size: .95rem; }
.hero-cta:hover { color: var(--accent-strong); }

.home-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 2rem; align-items: start; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .85rem; }
.section-head .section-title { margin: 0; }
.section-link { color: var(--muted); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.section-link:hover { color: var(--accent); }

/* P4P teaser becomes a card sidebar on desktop */
.home-col--side {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.rank-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.rank-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--border);
}
.rank-row:last-child { border-bottom: none; }
.rank-num {
  font-family: var(--font-display);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.05rem;
  min-width: 1.5rem;
  text-align: center;
}
.rank-name { flex: 1; font-weight: 600; }
.rank-div { display: block; color: var(--muted); font-size: .76rem; font-weight: 400; }
.rank-elo { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; color: var(--text); }

/* podium colours for the top three (pure position-based, no markup needed) */
.rank-list .rank-row:nth-child(1) .rank-num { color: var(--gold); }
.rank-list .rank-row:nth-child(2) .rank-num { color: var(--silver); }
.rank-list .rank-row:nth-child(3) .rank-num { color: var(--bronze); }

/* ==========================================================================
   Event detail — bouts
   ========================================================================== */
.event-head { margin-bottom: 1.5rem; }
.event-head .event-meta { color: var(--muted); margin: .3rem 0 .5rem; }
.event-meta { color: var(--muted); font-size: .9rem; }
.event-times { color: var(--text-2); font-size: .85rem; margin: 0 0 .85rem; font-weight: 600; }

.fight-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin: 1rem 0 .25rem; font-size: .88rem;
}
.fight-toolbar-label { color: var(--muted); font-weight: 600; margin-right: .15rem; }
.fight-toolbar-sep {
  display: inline-block; width: 1px; height: 1rem; background: var(--border);
  margin: 0 .35rem;
}
.toolbar-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: .3rem .8rem; font-weight: 600; line-height: 1.2;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.toolbar-pill:hover { border-color: var(--accent); color: var(--accent); }
.toolbar-pill.is-active {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
}

.fight-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: .85rem; }
.fight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.fight-card--title { border-color: #e6c875; box-shadow: 0 0 0 1px #e6c875, var(--shadow-sm); }

.bout { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: .75rem; }
.bout-fighter { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.bout-fighter--b { align-items: flex-end; text-align: right; }
.bout-name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.15; letter-spacing: .01em; }
.bout-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8rem; color: var(--muted); }
.bout-fighter--b .bout-sub { justify-content: flex-end; }
.bout-fighter .odds-badge { margin: .15rem 0 0; align-self: flex-start; white-space: nowrap; }
.bout-fighter--b .odds-badge { align-self: flex-end; }

.bout-vs {
  align-self: center;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bout-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; justify-content: center; margin-top: .85rem; }
.bout-weight {
  color: var(--text-2);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--surface-2);
  border-radius: 999px;
  padding: .15rem .6rem;
}

.bout-rank {
  color: var(--info);
  background: var(--info-soft);
  border: 1px solid #cdddff;
  border-radius: 999px;
  padding: .05rem .5rem;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- odds badges --------------------------------------------------------- */
.odds-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
  vertical-align: middle;
}
.odds-role { text-transform: uppercase; letter-spacing: .04em; opacity: .8; margin-right: .15rem; }
.odds-pct { font-variant-numeric: tabular-nums; }
.odds-badge--fav { background: var(--ok-soft); color: var(--ok); }
.odds-badge--dog { background: var(--accent-soft); color: var(--accent); }
.odds-badge--even { background: var(--surface-2); color: var(--muted); }

/* ---- badges (title / bonus) --------------------------------------------- */
.title-badge, .bonus-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.title-badge { background: var(--title); }
.bonus-fotn { background: var(--accent); }
.bonus-potn { background: var(--ok); }
.bonus-ko   { background: #e76f51; }
.bonus-sub  { background: #3d6f99; }

/* ---- chaos meter + fight metrics ---------------------------------------- */
.fight-metrics { display: grid; grid-template-columns: 1fr auto; gap: 1rem; margin-top: 1rem; align-items: center; }
.metric-label {
  display: block;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: .3rem;
}
.metric-value { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1; }
.metric-value small { color: var(--faint); font-weight: 400; font-size: .72rem; font-family: var(--font); }
.metric--pending .metric-value { color: var(--faint); }
.metric--expected .metric-value { color: var(--text-2); }

.bar {
  margin-top: .5rem;
  height: 9px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .08);
}
.bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--chaos-a), var(--chaos-b));
}
/* Expected (pre-fight forecast) chaos — grey so it reads as a prediction. */
.bar--expected span { background: linear-gradient(90deg, #c4cad3, #98a0ab); }
.fight-metrics .metric-sub, .fight-chaos .metric-sub {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  margin-top: .35rem;
}

/* Subtle inline CageMetrics-model pick line, shown under upcoming bouts. */
.cm-pick {
  margin: .7rem 0 0;
  font-size: .75rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem;
}
.cm-pick-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: .62rem;
  color: var(--faint);
}
.cm-pick-name { color: var(--text-2); font-weight: 600; }
.cm-pick-pct { color: var(--text-2); font-variant-numeric: tabular-nums; }

.pill {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pill--yes { background: var(--ok-soft); color: var(--ok); }
.pill--no { background: var(--surface-2); color: var(--muted); }
.pill--pending { background: var(--surface-2); color: var(--faint); }

.fight-details-link { display: inline-block; margin-top: .85rem; color: var(--muted); font-size: .82rem; font-weight: 600; }
.fight-details-link:hover { color: var(--accent); }

/* spoiler */
.spoiler { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .85rem; }
.spoiler summary { cursor: pointer; color: var(--muted); font-size: .85rem; font-weight: 600; user-select: none; }
.spoiler summary:hover { color: var(--accent); }
.spoiler[open] summary { color: var(--accent); }
.spoiler-body { margin-top: .55rem; }
.spoiler-body p { margin: .15rem 0; }
.spoiler-body .method { color: var(--muted); font-size: .9rem; }

/* ==========================================================================
   Fight detail
   ========================================================================== */
.fight-head { margin-bottom: 1.5rem; }
.matchup { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-weight: 600; }
.matchup--lg { font-size: 1.5rem; gap: .85rem; font-family: var(--font-display); letter-spacing: .01em; }
.matchup .fighter > a { color: var(--text); }
.matchup .fighter > a:hover { color: var(--accent); }
.vs {
  color: var(--muted);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: var(--font-display);
}
.matchup--lg .vs { font-size: .95rem; }
.fight-meta { color: var(--muted); margin: .5rem 0 0; font-size: .92rem; }

.fight-result, .fight-chaos {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.fight-result { margin-bottom: 1rem; }
.fight-chaos { margin-bottom: 1.5rem; }
.result-line { margin: 0; font-size: 1.1rem; }
.fight-result .method { color: var(--muted); margin: .4rem 0 0; font-size: .9rem; }
.fight-chaos .metric-label { display: block; }
.fight-chaos .metric-value { display: block; font-size: 1.7rem; margin-top: .3rem; }

/* fight stats */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.stat-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.stat-block h3 { margin: 0 0 .7rem; font-size: 1.05rem; letter-spacing: .01em; }
.stat-lines { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; font-size: .9rem; }
.stat-lines dt { color: var(--muted); }
.stat-lines dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.stat-lines small { color: var(--faint); font-weight: 400; }

/* ==========================================================================
   Fighter detail
   ========================================================================== */
.fighter-head { margin-bottom: 1.5rem; }
.fighter-nickname { color: var(--muted); margin: -.4rem 0 .5rem; font-style: italic; }
.fighter-record { margin: .5rem 0 1.1rem; font-size: 1rem; }
.fighter-record strong { font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* Bio stats. Two layouts, no wrapping in either:
   - wide: a single-row tale-of-the-tape strip (all 5 across, thin dividers);
   - phones: a vertical spec list, label left / value right, one per row. */
.bio-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 0;
  box-shadow: var(--shadow-sm);
}
.bio-item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
  padding: .2rem 1.1rem;
  border-left: 1px solid var(--border);
}
.bio-item:first-child { border-left: none; }
.bio-item dt { text-transform: uppercase; font-size: .66rem; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.bio-item dd { margin: 0; font-size: 1.02rem; font-weight: 600; line-height: 1.25; }

@media (max-width: 620px) {
  .bio-grid { grid-template-columns: 1fr; padding: .3rem 1.15rem; }
  .bio-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .62rem 0;
    border-left: none;
    border-bottom: 1px solid var(--border);
  }
  .bio-item:last-child { border-bottom: none; }
}

/* rank badges */
.rank-badges { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 1.5rem; }
.rank-badge {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .8rem 1.15rem;
  min-width: 132px;
  box-shadow: var(--shadow-sm);
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
a.rank-badge:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.rank-badge--p4p { border-top: 3px solid var(--accent); }
.rank-badge--chaos { border-top: 3px solid var(--chaos-a); cursor: default; }
.rank-badge-label { text-transform: uppercase; font-size: .66rem; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.rank-badge-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.rank-badge--p4p .rank-badge-value { color: var(--accent); }
.rank-badge--chaos .rank-badge-value { color: #d97a14; }

/* fighter metric tiles */
.fighter-metrics { margin: 1.5rem 0; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .7rem; }
.metric-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.metric-tile .metric-label { display: block; }
.metric-tile .metric-value { display: block; font-size: 1.7rem; margin-top: .3rem; }
.metric-tile .metric-sub { display: block; color: var(--muted); font-size: .78rem; margin-top: .2rem; }

/* ==========================================================================
   Fighter fight-history table
   ========================================================================== */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.history-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.history-table thead th {
  text-align: left;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 700;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.history-table th.num, .history-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.history-table tbody td {
  padding: .62rem .85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.history-table tbody tr:last-child td { border-bottom: none; }
.history-table tbody tr:hover { background: var(--surface-2); }
.history-table .nowrap { white-space: nowrap; }
.history-table .muted, td.muted { color: var(--muted); }

/* ==========================================================================
   Rankings board — tiers as individual cards. The header row and every fighter
   line share ONE CSS grid template, so columns line up by construction (no
   table). Each tier is its own rounded rectangle.
   ========================================================================== */
.rank-headrow,
.rank-line {
  display: grid;
  align-items: center;
  gap: .85rem;
  padding: .5rem .9rem;
}
/* division boards: #  Fighter  Record  Elo-rating */
.rank-board .rank-headrow,
.rank-board .rank-line { grid-template-columns: 2.4rem minmax(0, 1fr) 5.5rem minmax(120px, 34%); }
/* pound-for-pound adds a Division column */
.rank-board--p4p .rank-headrow,
.rank-board--p4p .rank-line { grid-template-columns: 2.4rem minmax(0, 1fr) 8rem 5.5rem minmax(120px, 34%); }

.rank-headrow {
  border: 1px solid transparent;   /* match the card border so columns align */
  margin-bottom: .5rem;
  text-transform: uppercase;
  font-size: .66rem;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--muted);
}

.tier-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: .7rem;
  overflow: hidden;
}
.tier-card:last-child { margin-bottom: 0; }
.tier-card-head { padding: .45rem .9rem .15rem; text-align: center; }

.rank-line { color: var(--text); border-top: 1px solid var(--border); }
.tier-card-head + .rank-line { border-top: none; }
.rank-line:hover { background: var(--surface-2); }
.rank-line:hover .rl-name { color: var(--accent); }

.rl-num { text-align: center; }
.rank-line .rl-num { font-family: var(--font-display); color: var(--faint); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.rl-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-rec { text-align: right; }
.rank-line .rl-div, .rank-line .rl-rec { font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* podium tints for the top three (more specific than .rl-num's own colour) */
.rank-line .rank-pos--1 { color: var(--gold); }
.rank-line .rank-pos--2 { color: var(--silver); }
.rank-line .rank-pos--3 { color: var(--bronze); }

/* Divisional champion (#1 by Elo in a weight-class board): gold left rail +
   a small crown glyph beside the name. Not shown on the P4P board — that's a
   ranking, not a title. */
.rank-line--champion {
  box-shadow: inset 3px 0 0 var(--gold);
  background: linear-gradient(90deg, rgba(183, 121, 31, .06), transparent 40%);
}
.champion-mark {
  color: var(--gold);
  font-size: 1rem;
  line-height: 1;
  margin-right: .15rem;
  vertical-align: -1px;
}

/* Elo-rating cell: number on top, the rating-spread bar beneath. The bar is
   normalised across the displayed board (lengths step down with the gaps) and
   its colour ramps amber→green up the board (hue set inline per fighter). */
.rank-elo-num { display: block; margin-bottom: .35rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.elo-bar {
  display: block;
  width: 100%;
  height: 9px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .08);
}
.elo-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d8e08a, #5aa02a);  /* fallback; hue set inline */
}

.tier-break-label {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .6rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: .12rem .65rem;
  border-radius: 999px;
}

.outcome { display: inline-block; font-weight: 700; font-size: .76rem; padding: 2px 8px; border-radius: 999px; letter-spacing: .03em; }
.outcome--w { background: var(--ok-soft); color: var(--ok); }
.outcome--l { background: var(--accent-soft); color: var(--accent); }
.outcome--dnc, .outcome--pending { background: var(--surface-2); color: var(--muted); }

.rankings-note { color: var(--muted); font-size: .9rem; margin: -.4rem 0 1.5rem; max-width: 62ch; }

/* division filter */
.division-filter { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.division-filter label { text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.division-select {
  flex: 1;
  max-width: 280px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: .55rem 2rem .55rem .85rem;
  font-size: .95rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236b7280' stroke-width='1.5'%3e%3cpath d='M1 1.5 6 6.5 11 1.5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: .7rem;
  box-shadow: var(--shadow-sm);
}
.division-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.division-select optgroup { color: var(--muted); }
.division-select option { color: var(--text); background: var(--surface); font-weight: 400; }

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin: 1.75rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--border); font-size: .9rem; }
.page-link {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  padding: .5rem .95rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: border-color 120ms, color 120ms;
}
.page-link:hover { border-color: var(--accent); color: var(--accent); }
.page-link--disabled { color: var(--faint); background: transparent; border-color: var(--border); box-shadow: none; cursor: default; }
.page-link--disabled:hover { border-color: var(--border); color: var(--faint); }
.page-info { color: var(--muted); }

/* ==========================================================================
   Explorer tables (Fighters / Fights)
   ========================================================================== */
.explorer-head { margin: 0 0 1.1rem; }
.explorer-meta { color: var(--muted); font-size: .9rem; margin: -.5rem 0 0; }
.explorer-meta strong { color: var(--text); font-weight: 600; }

.explorer-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin: 0 0 .75rem;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: .25rem .6rem .25rem .7rem;
  font-size: .82rem; font-weight: 600; line-height: 1.2;
}
.chip-label { font-weight: 700; }
.chip-op { font-family: var(--font-display); font-weight: 700; opacity: .8; }
.chip-value { font-variant-numeric: tabular-nums; }
.chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  color: var(--accent); background: rgba(214, 40, 40, .12);
  font-weight: 700; font-size: .85rem; line-height: 1; margin-left: .15rem;
}
.chip-x:hover { background: var(--accent); color: #fff; }

.add-filter { display: block; flex-basis: 100%; margin-top: 0; }
.add-filter-summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: .82rem; font-weight: 600; color: var(--text-2);
  background: var(--surface); border: 1px dashed var(--border-strong);
  padding: .25rem .7rem; border-radius: 999px;
}
.add-filter-summary::-webkit-details-marker { display: none; }
.add-filter-summary:hover { color: var(--accent); border-color: var(--accent); }
.add-filter[open] .add-filter-summary { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.add-filter-form {
  display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: .55rem .65rem;
  box-shadow: var(--shadow-sm); margin-top: .5rem;
}
.add-filter-form select, .add-filter-form input[type="text"],
.add-filter-form input[type="number"], .add-filter-form input[type="date"] {
  font: inherit; font-size: .88rem; padding: .35rem .5rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.add-filter-form input { width: 8rem; }
.add-filter-form select { max-width: 14rem; }
.add-filter-form select[multiple] { min-width: 12rem; padding: .25rem; }
.page-link--ghost { background: transparent; box-shadow: none; border-color: var(--border); color: var(--muted); }
.page-link--ghost:hover { border-color: var(--accent); color: var(--accent); }

.explorer-cols { margin: 0 0 1rem; }
.explorer-cols-summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: .82rem; font-weight: 600; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border-strong);
  padding: .3rem .75rem; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.explorer-cols-summary::-webkit-details-marker { display: none; }
.explorer-cols-summary .muted { font-weight: 400; margin-left: .4rem; }
.explorer-cols[open] .explorer-cols-summary { color: var(--accent); border-color: var(--accent); }

.explorer-cols-form {
  margin: .5rem 0 0; padding: .85rem 1rem 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.cols-help { color: var(--muted); font-size: .82rem; margin: 0 0 .65rem; }

.column-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .15rem .65rem; list-style: none; padding: 0; margin: 0 0 .85rem;
}
.col-row {
  padding: .25rem .4rem; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent;
}
.col-row:hover { background: var(--surface-2); }
.col-label {
  display: flex; align-items: center; gap: .45rem;
  font-size: .88rem; color: var(--text-2);
  cursor: pointer; min-width: 0;
}
.col-label input[type="checkbox"] { accent-color: var(--accent); flex-shrink: 0; }
.col-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-row input[type="checkbox"]:checked + .col-name { color: var(--text); font-weight: 600; }

.cols-actions { display: flex; gap: .5rem; }

.explorer-table-wrap {
  overflow-x: auto; margin: 0 -.25rem;
  /* Smooth-scroll feedback on momentum-scroll devices. */
  -webkit-overflow-scrolling: touch;
  /* Anchor for the absolutely-positioned drag-drop indicator line. */
  position: relative;
}
.explorer-table {
  /* Grow to natural width — never squeeze cells onto a second line. The
     overflow-x:auto wrap above scrolls if columns push past the viewport. */
  width: max-content; min-width: 100%;
  border-collapse: collapse; font-size: .92rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.explorer-th {
  position: sticky; top: 0;
  background: var(--surface-2); color: var(--muted);
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; font-size: .7rem; letter-spacing: .05em;
  padding: .6rem .65rem; border-bottom: 1px solid var(--border);
  white-space: nowrap;
  /* The entire <th> is draggable — show a grab cursor everywhere except the
     inner sort-link, which gets its own pointer style for clarity. */
  cursor: grab;
  user-select: none;
}
.explorer-th:active { cursor: grabbing; }
.explorer-th.is-th-dragging {
  opacity: .35;
  /* While dragging this header, the cursor's already grabbing — keep it
     consistent and dim the source so the drop indicator stands out. */
}
.explorer-th-link { cursor: pointer; }

/* Animated drop indicator — a single absolutely-positioned vertical line
   inside the table-wrap that we move along the X axis as the cursor crosses
   column boundaries. Transitioning `left` on one element is smoother than
   toggling visibility on multiple targets. */
.th-drop-line {
  position: absolute; top: 0; bottom: 0; width: 3px;
  background: var(--accent); border-radius: 2px;
  pointer-events: none; opacity: 0;
  transition: left 140ms cubic-bezier(.2, 0, .1, 1), opacity 90ms;
  box-shadow: 0 0 0 1px var(--accent-soft), 0 4px 14px rgba(214, 40, 40, .25);
  z-index: 4;
}
.th-drop-line.is-visible { opacity: 1; }
.explorer-th--right { text-align: right; }
.explorer-th--left { text-align: left; }
.explorer-th-link { color: inherit; display: inline-flex; align-items: center; gap: .25rem; }
.explorer-th-link:hover { color: var(--accent); }
.explorer-th.is-sorted { color: var(--accent); background: var(--accent-soft); }
.sort-arrow { font-size: .65rem; line-height: 1; }

.explorer-row { border-top: 1px solid var(--border); }
.explorer-row:first-child { border-top: none; }
.explorer-row:hover { background: var(--surface-2); }

.explorer-td {
  padding: .55rem .65rem; font-variant-numeric: tabular-nums;
  vertical-align: middle; color: var(--text);
  /* Cells never wrap — keep stat rows on a single line, let the wrap scroll. */
  white-space: nowrap;
}
.explorer-td--right { text-align: right; }
.explorer-td--left { text-align: left; }
.explorer-td .muted { color: var(--faint); }

.explorer-row-link { color: var(--text); font-weight: 600; }
.explorer-row-link:hover { color: var(--accent); }

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

/* ==========================================================================
   Matchup predictor — /matchup/
   Two side-by-side fighter pickers with autocomplete, a title-fight toggle,
   and a result panel that reuses the .compare-table look from the docs pages.
   ========================================================================== */
.matchup-page { max-width: 760px; margin: 0 auto; }
.matchup-page h1 { font-size: 2.1rem; margin-bottom: .35rem; }
.matchup-lede {
  color: var(--muted);
  font-size: 1rem;
  margin: 0 0 2rem;
}

.matchup-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem 1.5rem 1.2rem;
  margin-bottom: 2rem;
}

.matchup-pickers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: end;
}
.matchup-picker { position: relative; }
.matchup-picker label {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: .3rem;
}
.matchup-picker-input {
  width: 100%;
  padding: .6rem .8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: .95rem;
  font-family: inherit;
  color: var(--text);
  transition: border-color 120ms, box-shadow 120ms;
}
.matchup-picker-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.matchup-vs {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-bottom: .5rem;
  align-self: center;
}

.matchup-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 260px;
  overflow-y: auto;
  z-index: 50;
}
.matchup-suggestion {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .8rem;
  width: 100%;
  padding: .55rem .85rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: inherit;
  font-size: .92rem;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.matchup-suggestion:last-child { border-bottom: none; }
.matchup-suggestion:hover,
.matchup-suggestion.is-active,
.matchup-suggestion:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}
.matchup-suggestion-meta { color: var(--muted); font-size: .82rem; }
.matchup-suggestions-empty {
  margin: 0;
  padding: .8rem;
  color: var(--muted);
  font-size: .88rem;
}

.matchup-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.3rem;
  flex-wrap: wrap;
}
.matchup-toggles {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.matchup-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  font-size: .92rem;
  color: var(--text-2);
}
.matchup-toggle input { accent-color: var(--accent); }

.matchup-submit {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: .65rem 1.3rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color 120ms;
}
.matchup-submit:hover { background: var(--accent-strong); }

.matchup-error {
  color: var(--accent);
  background: var(--accent-soft);
  padding: .8rem 1rem;
  border-radius: var(--radius-sm);
  margin: 0 0 1.5rem;
  font-size: .95rem;
}

.matchup-result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.5rem;
}
.matchup-result .section-title { margin-top: 0; }
.matchup-pick {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  margin: .25rem 0 1.3rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.matchup-pick-name { color: var(--text); }
.matchup-pick-pct { color: var(--accent); font-variant-numeric: tabular-nums; }
.matchup-pick--tossup { color: var(--muted); font-weight: 600; font-size: 1.4rem; }

.matchup-table { margin: 0 0 1rem; }
.matchup-footnote {
  color: var(--muted);
  font-size: .85rem;
  margin: 0;
}

.matchup-mode-tag {
  display: inline-block;
  margin-left: .35rem;
  font-family: var(--font);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: .14rem .45rem;
  border-radius: 999px;
  vertical-align: middle;
}
.matchup-peak-date {
  display: block;
  font-size: .76rem;
  color: var(--muted);
  font-weight: 500;
  margin-top: .15rem;
}

.matchup-result--ineligible { background: var(--surface-2); }
.matchup-priors {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
  color: var(--text-2);
}
.matchup-priors li { padding: .15rem 0; }

@media (max-width: 600px) {
  .matchup-pickers { grid-template-columns: 1fr; }
  .matchup-vs { padding: .3rem 0; text-align: center; align-self: stretch; }
  .matchup-controls { justify-content: stretch; }
  .matchup-submit { flex: 1; }
}

/* ==========================================================================
   Methodology pages (/predictions, /elo) — long-form editorial layout.
   Narrower column for readability, drop-cap-free; section headings stay in
   Oswald so the page reads like the rest of the site. Charts, tables and
   stat callouts share the same surface/border treatment as fighter tiles.
   ========================================================================== */
.methodology { max-width: 760px; margin: 0 auto; }
.methodology h1 { font-size: 2.4rem; margin-bottom: .3rem; }
.methodology .lede {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 0 2rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.4rem;
}
.methodology h2 {
  font-size: 1.55rem;
  font-weight: 700;
  margin: 2.6rem 0 .7rem;
  letter-spacing: .005em;
}
.methodology h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 1.6rem 0 .5rem;
  color: var(--text-2);
}
.methodology p { margin: 0 0 1rem; line-height: 1.65; }
.methodology ul, .methodology ol { padding-left: 1.25rem; margin: 0 0 1.1rem; }
.methodology li { margin-bottom: .35rem; line-height: 1.6; }
.methodology code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .88em;
}
.methodology .updated {
  display: inline-block;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  font-weight: 700;
  background: var(--surface-2);
  padding: .25rem .55rem;
  border-radius: 999px;
}

/* Stat callouts (the inline result cards) reuse metric-tile styling but
   span the page width as a grid for the "headline numbers" block. */
.stat-callouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  margin: 1.2rem 0 1.8rem;
}
.stat-callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1.05rem;
  box-shadow: var(--shadow-sm);
}
.stat-callout--accent { border-left: 3px solid var(--accent); }
.stat-callout--ok     { border-left: 3px solid var(--ok); }
.stat-callout--info   { border-left: 3px solid var(--info); }
.stat-callout-label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 700;
}
.stat-callout-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: .35rem;
}
.stat-callout-sub {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  margin-top: .25rem;
}

/* Side-by-side comparison table (model vs Elo, etc.). Tabular numerics. */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin: .5rem 0 1.5rem;
}
.compare-table th, .compare-table td {
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.compare-table thead th {
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--muted);
  background: var(--surface-2);
  font-weight: 700;
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table td.num, .compare-table th.num { text-align: right; }
.compare-table .row-label { font-weight: 600; }
.compare-table .row-win { color: var(--ok); font-weight: 700; }

/* Horizontal feature-importance bar list. Each row = a label, a bar, a
   number. The bar width is set inline by the template (--w). */
.feature-bars { margin: .25rem 0 1.5rem; }
.feature-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.6rem;
  align-items: center;
  gap: .9rem;
  padding: .35rem 0;
  font-size: .92rem;
}
.feature-bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-bar-track {
  background: var(--surface-2);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
  margin-top: 4px;
}
.feature-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  width: var(--w);
}
.feature-bar-value {
  font-variant-numeric: tabular-nums;
  font-size: .88rem;
  color: var(--muted);
  text-align: right;
}
/* Lerp curve: tiny SVG plot for the continuous-decision MOV explanation. */
.lerp-plot {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: .5rem auto 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem;
}

/* Pull quote / sidebar callout — for "why we chose X" highlights. */
.callout {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: .9rem 1.1rem;
  margin: 1.2rem 0 1.5rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout-label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: .35rem;
}

@media (max-width: 600px) {
  .methodology h1 { font-size: 1.85rem; }
  .methodology h2 { font-size: 1.3rem; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 760px) {
  .home-cols { grid-template-columns: 1fr; gap: 1.75rem; }
  .home-col--side { padding: 1rem 1.1rem 1.15rem; }
}

@media (max-width: 600px) {
  .col-hide-sm { display: none; }

  main { padding: 1.25rem 1rem 3rem; }
  h1 { font-size: 1.7rem; }

  .site-head-inner { padding: .65rem 1rem; gap: .75rem; flex-wrap: wrap; }
  .brand-text { font-size: 1.2rem; }
  .site-nav { gap: .9rem; order: 3; flex-wrap: wrap; }
  .search { flex-basis: 100%; max-width: none; margin-left: 0; order: 2; }

  /* On phones the nav wraps; anchor the menu to the right edge of the
     trigger so a Docs item near the right side doesn't overflow viewport. */
  .nav-dropdown-menu { left: auto; right: 0; }

  .hero-card { padding: 1.2rem 1.15rem 1.05rem; border-radius: var(--radius); }
  .hero-title { font-size: 1.7rem; }
  .matchup--lg { font-size: 1.2rem; gap: .5rem; }

  .bout { gap: .45rem; }
  .bout-name { font-size: 1.05rem; }

  .history-table { font-size: .88rem; }
  .history-table thead th { padding: .55rem .55rem; }
  .history-table tbody td { padding: .55rem .55rem; }

  /* rankings: Division + Record drop out, so collapse to # / Fighter / rating */
  .rank-board .rank-headrow,
  .rank-board .rank-line,
  .rank-board--p4p .rank-headrow,
  .rank-board--p4p .rank-line { grid-template-columns: 2.2rem minmax(0, 1fr) minmax(104px, 42%); gap: .6rem; padding: .5rem .75rem; }

  .stat-grid { grid-template-columns: 1fr; }

  /* Explorer: shrink padding + font so the table fits on phones. The wrap is
     already overflow-x scrollable, so very wide column sets still work. */
  .explorer-table { font-size: .85rem; }
  .explorer-th { padding: .5rem .5rem; font-size: .65rem; }
  .explorer-td { padding: .45rem .5rem; }
  .add-filter-form { position: static; flex-wrap: wrap; }
}