/* TOM component styles. Every color comes from tokens.css. Class prefix: tom- */

/* State skins: set one on <html> or <body> per site. Missouri is the default. */
.tom-skin-mo { --accent: var(--mo-brand); --accent-strong: var(--mo-strong); --accent-soft: var(--mo-soft); }
.tom-skin-ok { --accent: var(--ok-brand); --accent-strong: var(--ok-strong); --accent-soft: var(--ok-soft); }
.tom-skin-tx { --accent: var(--tx-brand); --accent-strong: var(--tx-strong); --accent-soft: var(--tx-soft); }

.tom { font-family: var(--font-sans); color: var(--ink); background: var(--paper); font-size: 15px; line-height: 22px; }
.tom *, .tom *::before, .tom *::after { box-sizing: border-box; }
.tom-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.tom-label { font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.tom-muted { color: var(--ink-muted); }
.tom :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Button */
.tom-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font: 700 15px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; }
.tom-btn--primary { background: var(--accent-strong); color: var(--on-accent); }
.tom-btn--access { background: var(--gold); color: var(--on-gold); }
.tom-btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--hairline); }
.tom-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; }

/* Rank chip */
.tom-rank { display: inline-grid; place-items: center; min-width: 36px; height: 28px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--surface-sunk); color: var(--ink); font: 700 18px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tom-rank--1 { background: var(--gold); color: var(--on-gold); }
.tom-rank--2 { background: var(--silver); color: var(--on-gold); }
.tom-rank--3 { background: var(--bronze); color: var(--on-gold); }
.tom-rank--nr { background: transparent; color: var(--ink-muted); border: 1px solid var(--hairline); font-size: 14px; }

/* Badge */
.tom-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font: 600 11px/1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; background: var(--surface-sunk); color: var(--ink); }
.tom-badge--accent { background: var(--accent-soft); color: var(--accent-strong); }
.tom-badge--gold { background: var(--gold); color: var(--on-gold); }
.tom-badge--outline { background: transparent; border: 1px solid var(--hairline); color: var(--ink-muted); }

/* Movement */
.tom-move { display: inline-flex; align-items: center; gap: 2px; font: 700 14px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tom-move--up { color: var(--up); }
.tom-move--down { color: var(--down); }
.tom-move--new { color: var(--accent-strong); font-family: var(--font-sans); font-size: 11px; letter-spacing: .06em; }
.tom-move--same { color: var(--ink-muted); }

/* Team mark: logo, or monogram fallback */
.tom-team { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.tom-team__logo { flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm); object-fit: contain; }
.tom-team__mono { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--surface-sunk); border: 1px solid var(--hairline); color: var(--ink); font: 700 12px/1 var(--font-display); letter-spacing: .02em; }
.tom-team__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Weight tabs */
.tom-weights { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.tom-weights::-webkit-scrollbar { display: none; }
.tom-weight { flex: none; height: 32px; min-width: 48px; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); font: 700 16px/1 var(--font-display); font-variant-numeric: tabular-nums; cursor: pointer; }
.tom-weight[aria-selected="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.tom-weight--meta { font-family: var(--font-sans); font-size: 12px; letter-spacing: .05em; }

/* Rankings table */
.tom-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.tom-table th { text-align: left; padding: var(--space-2) var(--space-3); background: var(--surface-sunk); font: 600 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.tom-table td { padding: var(--space-3); border-top: 1px solid var(--hairline); vertical-align: middle; }
.tom-table .num { text-align: right; font: 600 18px/20px var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tom-table th.num { text-align: right; font: 600 11px/16px var(--font-sans); letter-spacing: .06em; }

/* Result pills and state badges: data colors, identical on every site */
.tom-result { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 24px; padding: 0 6px; border-radius: var(--radius-sm); font: 700 12px/1 var(--font-sans); letter-spacing: .04em; white-space: nowrap; }
.tom-result--win { background: var(--data-win-bg); color: var(--data-win); }
.tom-result--loss { background: var(--data-loss-bg); color: var(--data-loss); }
.tom-state { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); font: 700 11px/1 var(--font-sans); letter-spacing: .02em; white-space: nowrap; color: var(--ink-muted); }
.tom-state--champ { background: var(--champ-bg); color: var(--champ-fg); border-color: var(--champ-line); }
.tom-state--2 { background: var(--place2-bg); color: var(--place2-fg); border-color: var(--place2-line); }
.tom-state--3 { background: var(--place3-bg); color: var(--place3-fg); border-color: var(--place3-line); }
.tom-table tr:hover td { background: var(--accent-soft); }
.tom-wrestler { display: flex; flex-direction: column; min-width: 0; }
.tom-wrestler__name { font: 700 17px/22px var(--font-sans); color: var(--ink); text-decoration: none; }
.tom-wrestler__name:hover { color: var(--accent-strong); }
.tom-wrestler__meta { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.tom-table-wrap { border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.tom-table-scroll { overflow-x: auto; }

/* Cards */
.tom-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.tom-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-2); }
.tom-card__title { margin: 0; font: 700 22px/26px var(--font-display); }
.tom-card__link { font: 600 13px/18px var(--font-sans); color: var(--accent-strong); text-decoration: none; white-space: nowrap; }

/* Leaderboard */
.tom-lb { list-style: none; margin: 0; padding: 0 0 var(--space-2); }
.tom-lb li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); }
.tom-lb li + li { border-top: 1px solid var(--hairline); }
.tom-lb__pos { font: 700 18px/1 var(--font-display); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tom-lb__stat { font: 700 24px/1 var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }
.tom-lb__unit { display: block; font: 600 10px/14px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.tom-bar { height: 4px; border-radius: 2px; background: var(--surface-sunk); overflow: hidden; margin-top: 4px; }
.tom-bar > span { display: block; height: 100%; background: var(--accent); }

/* Matchup */
.tom-matchup { display: grid; gap: var(--space-2); padding: var(--space-4); min-width: 220px; }
.tom-matchup__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3); }
.tom-matchup__score { font: 700 24px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tom-matchup__row--win .tom-team__name { color: var(--ink); }
.tom-matchup__row--loss .tom-team__name, .tom-matchup__row--loss .tom-matchup__score { color: var(--ink-muted); }
.tom-pill-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-sunk); }
.tom-pill-bar > span:first-child { background: var(--accent); }
.tom-pill-bar > span:last-child { background: var(--ink-muted); opacity: .35; }

/* Article card */
.tom-article { display: grid; grid-template-rows: auto 1fr; overflow: hidden; text-decoration: none; color: inherit; }
.tom-article__media { aspect-ratio: 16 / 9; max-width: 100%; background: var(--surface-sunk); display: grid; place-items: center; color: var(--ink-muted); font: 600 12px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.tom-article__body { display: grid; gap: var(--space-2); padding: var(--space-4); align-content: start; }
.tom-article__title { margin: 0; font: 700 22px/26px var(--font-display); text-wrap: balance; }

/* Paywall (locked rows: see placeholders in the layout section; never blur real data) */
.tom-locked { position: relative; }
.tom-paywall { position: absolute; inset: 0; display: grid; place-items: center; background: var(--scrim); padding: var(--space-4); }
.tom-paywall__box { display: grid; gap: var(--space-3); justify-items: center; text-align: center; max-width: 380px; padding: var(--space-6); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.tom-paywall__title { margin: 0; font: 700 26px/28px var(--font-display); text-wrap: balance; }

/* Header band */
.tom-header { background: var(--band); color: var(--on-band); }
.tom-header__inner { display: flex; align-items: center; gap: var(--space-6); height: 60px; padding: 0 var(--space-4); }
.tom-wordmark { font: 800 24px/1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; color: var(--on-band); white-space: nowrap; }
.tom-wordmark b { color: var(--accent); font-weight: 800; }
.tom-nav { display: flex; gap: var(--space-4); }
.tom-nav a { font: 600 14px/1 var(--font-sans); color: var(--on-band-muted); text-decoration: none; padding: 21px 0 18px; border-bottom: 3px solid transparent; }
.tom-nav a[aria-current="page"] { color: var(--on-band); border-bottom-color: var(--accent); }
.tom-header__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.tom-subnav { display: flex; gap: var(--space-4); padding: 0 var(--space-4); height: 44px; align-items: center; background: var(--surface); border-bottom: 1px solid var(--hairline); overflow-x: auto; }
.tom-subnav a { font: 600 14px/1 var(--font-sans); color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.tom-subnav a[aria-current="page"] { color: var(--ink); }

/* Bottom nav (phones) */
.tom-bottomnav { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--band); border-top: 1px solid var(--band); }
.tom-bottomnav a { display: grid; justify-items: center; gap: 4px; padding: var(--space-2) 0 var(--space-3); font: 600 11px/1 var(--font-sans); letter-spacing: .04em; color: var(--on-band-muted); text-decoration: none; }
.tom-bottomnav a[aria-current="page"] { color: var(--on-band); }
.tom-bottomnav a[aria-current="page"] svg { color: var(--accent); }
.tom-bottomnav svg { width: 22px; height: 22px; }

/* ---------- Layout and page patterns (added 2026-11-06, from the final boards) ---------- */
/* Breakpoint: desktop layout at 1024px and up. Below that, phone layout. */

/* Paywall placeholders: locked rows are drawn by the server as grey bars. Never real data, never blur. */
.tom-locked__rows { user-select: none; pointer-events: none; }
.tom-skeleton { display: block; height: 14px; border-radius: var(--radius-sm); background: var(--surface-sunk); }
.tom-skeleton--sm { height: 10px; }
.tom-placeholder-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--hairline); }
.tom-placeholder-row .tom-skeleton:nth-child(1) { width: 22px; }
.tom-placeholder-row .tom-skeleton:nth-child(2) { width: 60%; }
.tom-placeholder-row .tom-skeleton:nth-child(3) { width: 40px; }
.tom-paywall--inline { position: static; display: block; background: none; padding: 0; }
.tom-paywall--article { position: static; display: grid; gap: var(--space-3); padding: 22px; background: var(--surface); border: 1px solid var(--hairline); border-top: 3px solid var(--gold); border-radius: var(--radius-md); justify-items: start; text-align: left; }
.tom-paywall--article .tom-paywall__title { font: 800 26px/28px var(--font-display); }
/* .tom-fade goes on the last free paragraph only, never the whole teaser. */
.tom-fade { position: relative; }
.tom-fade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: linear-gradient(to bottom, transparent, var(--paper)); pointer-events: none; }
.tom-note { padding: 10px 14px; background: var(--note-bg); border: 1px solid var(--champ-line); border-radius: var(--radius-md); color: var(--champ-fg); font: 600 13px/18px var(--font-sans); }

/* Page shell and grids */
.tom-shell { max-width: 1240px; margin: 0 auto; padding: 0 var(--space-4); }
.tom-layout--sidebar-left, .tom-layout--sidebar, .tom-layout--3col { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
  .tom-layout--sidebar-left { grid-template-columns: 340px minmax(0, 1fr); gap: 32px; align-items: start; }
  .tom-layout--sidebar-left > aside { position: sticky; top: 16px; }
  .tom-layout--sidebar { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
  .tom-layout--sidebar > aside { position: sticky; top: 16px; }
  .tom-layout--sidebar.tom-layout--article { grid-template-columns: minmax(0, 760px) 360px; gap: 48px; }
  .tom-layout--sidebar.tom-layout--wide { grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; }
  .tom-layout--3col { grid-template-columns: 1.2fr 1fr 300px; gap: var(--space-6); }
  .tom-layout--3col.tom-layout--profile { grid-template-columns: 1.4fr 1fr 320px; }
}

/* Status bar, breadcrumb, hero */
.tom-statusbar { display: flex; align-items: center; gap: var(--space-2); padding: 10px var(--space-4); background: var(--surface); border-bottom: 1px solid var(--hairline); font: 600 13px/18px var(--font-sans); }
@media (min-width: 1024px) { .tom-statusbar { height: 44px; padding-top: 0; padding-bottom: 0; } }
.tom-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font: 600 13px/18px var(--font-sans); color: var(--ink-muted); }
.tom-breadcrumb a { color: inherit; text-decoration: none; }
.tom-breadcrumb > * + *::before { content: "›"; margin-right: 6px; }
.tom-hero--band { background: var(--band); color: var(--on-band); padding: 22px var(--space-4) 24px; }

/* Controls */
.tom-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 10px; background: var(--surface-sunk); }
.tom-segment__btn { height: 40px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-muted); font: 700 15px/1 var(--font-sans); cursor: pointer; }
.tom-segment__btn[aria-selected="true"] { background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); }
.tom-classpills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tom-classpills > * { height: 40px; display: grid; place-items: center; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); font: 700 14px/1 var(--font-sans); text-decoration: none; }
.tom-classpills > [aria-current="page"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.tom-search { position: relative; }
.tom-search input { width: 100%; height: 44px; padding: 0 var(--space-3) 0 42px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 15px/1 var(--font-sans); }
.tom-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-muted); }
.tom-search--lg input { height: 50px; }
.tom-stepper { display: inline-flex; align-items: center; gap: var(--space-3); }
.tom-stepper button { width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); cursor: pointer; }
.tom-stepper__value { font: 800 26px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tom-chipnav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tom-chipnav > * { height: 34px; display: inline-flex; align-items: center; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); font: 700 12px/1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.tom-chipnav > [aria-current="page"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.tom-explainer { border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 10px 14px; background: var(--surface); }
.tom-explainer summary { font: 600 14px/20px var(--font-sans); cursor: pointer; }

/* Weight grid (7 x 2) */
.tom-weightgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tom-weightgrid__btn { height: 46px; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); font: 700 17px/1 var(--font-display); font-variant-numeric: tabular-nums; text-decoration: none; }
.tom-weightgrid__btn[aria-current="page"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.tom-weightgrid__btn--locked { color: var(--ink-muted); }
.tom-weightgrid--pinned { position: sticky; top: 0; z-index: 5; gap: 5px; padding: var(--space-2) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--hairline); }
.tom-weightgrid--pinned .tom-weightgrid__btn { height: 44px; font-size: 15px; }
.tom-weighthead { display: flex; align-items: baseline; gap: var(--space-3); }
.tom-weighthead__weight { font: 800 46px/40px var(--font-display); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .tom-weighthead__weight { font-size: 64px; line-height: 54px; } }
.tom-weightgrid--pinned + * .tom-weighthead__weight, .tom-weighthead--pinned .tom-weighthead__weight { font-size: 22px; line-height: 1; }
.tom-weightcard__head { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-4); background: var(--band); color: var(--on-band); border-bottom: 3px solid var(--accent); font: 800 24px/1 var(--font-display); }

/* Ranked rows */
.tom-rankrow { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; }
.tom-rankrow + .tom-rankrow { border-top: 1px solid var(--hairline); }
.tom-rankrow__chip { min-width: 36px; padding: 0 4px; height: 26px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-sunk); font: 700 17px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tom-rankrow__chip.tom-rank--1 { background: var(--gold); color: var(--on-gold); }
.tom-rankrow__chip.tom-rank--2 { background: var(--silver); color: var(--on-gold); }
.tom-rankrow__chip.tom-rank--3 { background: var(--bronze); color: var(--on-gold); }
.tom-rankrow__meta { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.tom-team__mono--xs { width: 18px; height: 18px; border-radius: 50%; font-size: 8px; }
.tom-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--surface-sunk); }
@media (min-width: 1024px) { .tom-avatar--team { width: 96px; height: 96px; } }

/* Calls to action and ads */
.tom-ctaband { display: grid; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-md); background: var(--band); color: var(--on-band); }
.tom-ctaband__label { font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.tom-ctaband__title { margin: 0; font: 800 30px/32px var(--font-display); }
.tom-adslot { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--surface-sunk); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.tom-adslot__label { font: 600 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.tom-adslot__title { margin: 0; font: 800 20px/24px var(--font-display); }
.tom-adslot .tom-btn { height: 40px; background: var(--ink); color: var(--surface); }
.tom-adslot--row { border-radius: 0; border-left: 0; border-right: 0; }
.tom-adslot--inline { grid-template-columns: 1fr auto; align-items: center; }
@media (min-width: 1024px) { .tom-adslot__title { font-size: 26px; line-height: 28px; } .tom-adslot .tom-btn { height: 44px; } }

/* Profile and team */
.tom-profilehead__name { margin: 0; font: 800 34px/36px var(--font-display); }
.tom-profilehead__rank { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--gold); color: var(--on-gold); font: 700 14px/1 var(--font-sans); }
.tom-profilehead__rank--locked { background: var(--surface-sunk); color: var(--ink-muted); }
.tom-statstrip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.tom-statstrip__cell { display: grid; gap: 2px; padding: var(--space-3); text-align: center; }
.tom-statstrip__cell + .tom-statstrip__cell { border-left: 1px solid var(--hairline); }
.tom-statstrip__num { font: 800 28px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tom-hbar { display: grid; grid-template-columns: 84px 1fr 28px; align-items: center; gap: var(--space-2); font: 600 13px/18px var(--font-sans); }
.tom-hbar__track { height: 12px; border-radius: 3px; background: var(--surface-sunk); overflow: hidden; }
.tom-hbar__track > span { display: block; height: 100%; background: var(--data-bar); }
.tom-matchgroup__head { padding: var(--space-2) var(--space-3); background: var(--surface-sunk); font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.tom-matchrow { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); border-top: 1px solid var(--hairline); }
.tom-matchrow__opprank { display: inline-grid; place-items: center; width: 32px; height: 22px; border-radius: var(--radius-sm); background: var(--surface-sunk); font: 700 13px/1 var(--font-display); }
.tom-tier { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font: 700 11px/1 var(--font-sans); letter-spacing: .03em; white-space: nowrap; }
.tom-tier--1 { background: var(--data-1); color: var(--on-data-strong); }
.tom-tier--2 { background: var(--data-2); color: var(--on-data-strong); }
.tom-tier--3 { background: var(--data-3); color: var(--ink); }
.tom-tier--4 { background: var(--data-4); color: var(--ink); }
.tom-lineup { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; }
.tom-lineup__cell { height: 22px; border-radius: 3px; background: var(--data-4); }
.tom-lineup__cell--empty { background: transparent; border: 1px dashed var(--hairline); }
.tom-lineup__legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.tom-mapcard { height: 180px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunk); }
@media (min-width: 1024px) { .tom-mapcard { height: 300px; } }

/* Homepage heat map (SVG, viewBox 0 0 552 491) */
.tom-heatmap { width: 100%; height: auto; }
.tom-heatmap__dot { fill: var(--data-1); }
.tom-heatmap__glow { fill: var(--data-2); opacity: .55; }
.tom-heatmap__label { font: 600 11px/1 var(--font-sans); fill: var(--ink); }
.tom-heatmap__popup { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-3); }
.tom-heatmap__toplist { list-style: none; margin: 0; padding: 0; }

/* News */
.tom-storyrow { display: grid; grid-template-columns: 1fr 104px; gap: var(--space-3); padding: 14px 0; border-top: 1px solid var(--hairline); color: inherit; text-decoration: none; }
.tom-storyrow__thumb { width: 104px; aspect-ratio: 1; border-radius: 6px; object-fit: cover; background: var(--surface-sunk); }
.tom-byline { display: flex; align-items: center; gap: 10px; font: 700 14px/18px var(--font-sans); }
.tom-byline img { width: 36px; height: 36px; border-radius: 50%; }
.tom-prose { display: grid; gap: 18px; font: 400 18px/29px var(--font-sans); }
.tom-prose > * { margin: 0; }

/* Video */
.tom-video-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--video-ground); }
.tom-video-thumb__play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--video-play); color: #fff; }
.tom-video-thumb__dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--video-badge); color: #fff; font: 700 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; }
.tom-video-thumb__lock { position: absolute; left: 8px; top: 8px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: var(--radius-sm); background: var(--gold); color: var(--on-gold); font: 700 11px/1 var(--font-sans); }
.tom-videorow { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-3); align-items: start; }
.tom-videogrid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tom-player { position: relative; aspect-ratio: 16 / 9; background: var(--video-ground); }
.tom-player--locked { display: grid; place-items: center; align-content: center; gap: var(--space-3); background: var(--band); color: var(--on-band); text-align: center; padding: var(--space-6); }
.tom-player--locked .tom-btn { height: 44px; }
@media (min-width: 1024px) { .tom-video-thumb__play--lg { width: 76px; height: 76px; } }

/* Footer */
.tom-footer { background: var(--band); color: var(--on-band); padding: 28px var(--space-4); }
.tom-footer a { color: var(--on-band-muted); text-decoration: none; }

/* WrestlerFinder Spotlight (branch wf-spotlight; inc/wf-spotlight.php + js/wf-spotlight.js).
   Square frame for every card; photo_url is WF's 800-wide copy at its original shape (portrait, landscape or
   square), cropped with object-fit: cover, center top, the way WrestlerFinder crops its own square avatars. */
.tom-wf { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; --wf-ratio: 1 / 1; --wf-focus: center top; }
.tom-wf-js .tom-wf--pending > .tom-adslot { display: none; }
.tom-wf .tom-adslot[hidden], .tom-wf [hidden] { display: none !important; }
.tom-wf__head { margin: 0; font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.tom-wf__list { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.tom-wf-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.tom-wf-card__photo { display: block; aspect-ratio: var(--wf-ratio); background: var(--surface-sunk); overflow: hidden; }
.tom-wf-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--wf-focus); }
.tom-wf-card__body { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3) var(--space-4) var(--space-4); min-width: 0; }
.tom-wf-card__name { margin: 0; font: 800 22px/26px var(--font-display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tom-wf-card__meta, .tom-wf-card__school { margin: 0; font: 600 14px/18px var(--font-sans); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tom-wf-card__meta { color: var(--ink); font-variant-numeric: tabular-nums; }
.tom-wf-card__chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin-top: 2px; }
.tom-wf-pill { display: inline-flex; align-items: center; max-width: 100%; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: var(--surface-sunk); color: var(--ink); font: 700 11px/1 var(--font-sans); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tom-wf-pill--gold { background: var(--champ-bg); color: var(--champ-fg); border-color: var(--champ-line); }
.tom-wf-pill--silver { background: var(--place2-bg); color: var(--place2-fg); border-color: var(--place2-line); }
.tom-wf-pill--bronze { background: var(--place3-bg); color: var(--place3-fg); border-color: var(--place3-line); }
.tom-wf-pill--gpa { background: transparent; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tom-wf-card__btn { justify-content: center; margin-top: var(--space-2); height: 40px; background: var(--wf-teal, #007C8A); color: #fff; border-color: transparent; overflow: hidden; text-overflow: ellipsis; }
/* Compact row (rankings sidebar): square thumb left, text right, small button. */
.tom-wf--row .tom-wf-card { flex-direction: row; align-items: flex-start; }
.tom-wf--row .tom-wf-card__photo { flex: none; width: 88px; height: 88px; aspect-ratio: 1 / 1; margin: 10px 0 10px 10px; border-radius: var(--radius-sm); }
.tom-wf--row .tom-wf-card__body { flex: 1; gap: 3px; padding: 10px 12px; }
.tom-wf--row .tom-wf-card__name { font-size: 18px; line-height: 22px; }
.tom-wf--row .tom-wf-card__meta, .tom-wf--row .tom-wf-card__school { font-size: 12px; line-height: 16px; }
.tom-wf--row .tom-wf-pill { height: 20px; font-size: 10px; padding: 0 6px; }
.tom-wf--row .tom-wf-card__btn { justify-content: flex-start; height: auto; margin-top: 4px; padding: 0; border: 0; background: transparent; color: var(--wf-teal, #007C8A); font-size: 13px; }
[data-theme="dark"] .tom-wf--row .tom-wf-card__btn { color: #4fd6e0; }
@media (min-width: 1024px) {
	.tom-wf-card__btn { height: 44px; }
	/* Article rail: sticky card stack. The theme sticks the whole aside (top 16px); with two cards it is taller than
	   most screens, so on an article with cards the aside scrolls normally, stretches to the article's height, and
	   the card stack moves to the bottom of the aside and sticks. JS sets --wf-sticky-top = min(76px, screen - stack
	   - 16px): on short screens the stack scrolls until its bottom card is in full view, then holds. */
	.tom-article-layout:has(.tom-wf) { align-items: stretch; }
	.tom-article-layout:has(.tom-wf) > .tom-post-aside { position: static; }
	.tom-post-aside > .tom-hide-phone:has(> .tom-wf[data-wf-placement="article-rail"]) { order: 99; position: sticky; top: var(--wf-sticky-top, 76px); }
}