/*
 * Wrestler comparison. Retokenised in feature 048; no colour is typed here.
 */
/**
 * Wrestler scout / compare (feature 014, Phase 2).
 */

.fedman-compare, .fedman-compare-page { font-size: 1.0125rem; }

.fedman-compare-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; }
.fedman-compare-side { font-weight: 700; font-size: 1.1125rem; }
.fedman-compare-a { color: var(--csds-link); }
/*
 * The two sides of a matchup.
 *
 * Side B was crimson text — 3.22:1 at this size. Both names now take `ink`, and
 * the two sides are told apart by the probability bar and by position, not by
 * colour. That is the data-visualisation rule this project already holds to:
 * a reading must not depend on colour alone, and these are 17px names on a
 * dark ground.
 */
.fedman-compare-b { color: var(--csds-ink); }
.fedman-compare-vs { color: var(--csds-ink-muted); text-transform: uppercase; font-size: .8125rem; }

.fedman-compare-controls { text-align: center; margin-bottom: 14px; }
.fedman-compare-controls select, .fedman-compare-pickers select { padding: 4px 8px; border: 1px solid var(--csds-border-default); border-radius: 6px; }

/* Win probability bar */
.fedman-prob-bar {
	display: flex;
	height: 34px;
	border-radius: var(--csds-radius-xs);
	overflow: hidden;
	font: var(--csds-body-button);
	letter-spacing: var(--csds-body-button-letter-spacing);
	/* ink, not the panel colour: the segment fills are dark, and a near-black
	   label on a crimson fill measured 3.22:1. */
	color: var(--csds-ink);
}
.fedman-prob-a { background: var(--csds-link); display: flex; align-items: center; justify-content: flex-start; padding-left: 8px; min-width: 40px; }
.fedman-prob-b { background: var(--csds-blood); display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; min-width: 40px; }
.fedman-prob-caption { text-align: center; color: var(--csds-ink-muted); font-size: .8825rem; margin: 6px 0 0; }

/* Head-to-head */
.fedman-compare-h2h { margin-top: 18px; }
.fedman-h2h-summary { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; justify-content: center; margin-bottom: 14px; }
.fedman-h2h-record strong { font-size: 1.6rem; }
.fedman-h2h-record span { color: var(--csds-ink-muted); margin-left: 6px; }
.fedman-h2h-init { color: var(--csds-ink-muted); font-size: .9125rem; }
.fedman-h2h-donuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
/* 071: a ring per group, with its picker. */
.fedman-h2h-group { display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--csds-surface-panel); border: 1px solid var(--csds-border-default); border-radius: 10px; padding: 14px 12px; }
.fedman-h2h-group-title { margin: 0; font-size: .8625rem; color: var(--csds-ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.fedman-donut-pick { max-width: 100%; }
.fedman-donut-view[hidden] { display: none; }

/* Dedicated page pickers */
.fedman-compare-pickers { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; margin-bottom: 20px; }
.fedman-compare-pickers label { display: flex; flex-direction: column; gap: 4px; font-size: .8625rem; color: var(--csds-ink-muted); }
.fedman-compare-panel { min-height: 60px; }

/* 071: the scout offer — buy the odds with one item. */
.fedman-scout-offer { text-align: center; margin-inline: auto; }
/* 071: the offer sits in the middle of the panel. */
.fedman-compare-prob:has(.fedman-scout-offer) { margin-inline: auto; max-width: 520px; }
.fedman-scout-lead { margin: 0 0 10px; color: var(--csds-ink-muted); }
.fedman-scout-offer .fedman-scout-btn { margin: 0 6px 8px; }
.fedman-scout-result { margin-top: 10px; text-align: left; }
.fedman-scout-note { text-align: center; color: var(--csds-ink-muted); font-size: .8825rem; margin: 4px 0 0; }