/*
 * Brand tokens (Rolling Tape style guide): off-black/off-white ink pair,
 * plus the six-step "retro" ramp. The ramp fails as an unlabeled data-identity
 * palette (adjacent reds too close, teal/purple read low-chroma, sub-3:1
 * contrast on the cream surface) — so it's used two ways: two well-separated
 * hues for the always-labeled meter bars/badges, and the full six-color set
 * as pure decoration (card accent bars) where nothing depends on the reader
 * telling colors apart.
 */
#op-hub,
#op-category,
#op-predictors,
#op-predictor,
#op-leaderboard {
	--op-ink: #393839;
	--op-ink-secondary: rgba(57, 56, 57, 0.7);
	--op-ink-muted: rgba(57, 56, 57, 0.5);
	--op-surface: #ded2bc;
	--op-pill: #f5ecd9;
	--op-gold: #dea83f;
	--op-track: rgba(57, 56, 57, 0.15);
	--op-win: #78bea3;
	--op-nom: #e79d35;
	--op-up: #78bea3;
	--op-down: #981c32;
	--op-retro-1: #78bea3;
	--op-retro-2: #e79d35;
	--op-retro-3: #de4b2d;
	--op-retro-4: #d12628;
	--op-retro-5: #981c32;
	--op-retro-6: #521c47;

	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--op-ink);
	background: var(--op-surface);
	padding: 1.5rem;
	border-radius: 12px;
}

/* Every page shares the gold/pill poster-style treatment approved for the
   category page — the hub used to stay on a quieter cream style, but now
   matches so the hub cards read as the same product as everything else. */
#op-hub,
#op-category,
#op-predictors,
#op-predictor,
#op-leaderboard {
	background: var(--op-gold);
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 32px 32px;
}

@media (max-width: 480px) {
	#op-hub,
	#op-category,
	#op-predictors,
	#op-predictor,
	#op-leaderboard {
		padding: 1.1rem;
	}
}

.op-hub-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.1rem;
}

@media (max-width: 560px) {
	.op-hub-grid {
		grid-template-columns: 1fr;
	}
}

.op-predictor-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.9rem;
}

@media (max-width: 480px) {
	.op-predictor-grid {
		grid-template-columns: 1fr;
	}
}

.op-hub-card {
	display: block;
	padding: 1rem 1.1rem;
	border: none;
	border-radius: 14px;
	text-decoration: none;
	color: var(--op-ink);
	background: var(--op-pill);
	box-shadow: 0 3px 0 rgba(57, 56, 57, 0.18);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

a.op-hub-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 0 rgba(57, 56, 57, 0.2);
}

.op-hub-card-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.05rem;
	font-weight: 800;
	margin: 0 0 0.7rem;
}

.op-hub-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0;
	border-top: 1px solid rgba(57, 56, 57, 0.08);
}

.op-hub-row:first-of-type {
	border-top: none;
}

.op-hub-rank {
	flex: 0 0 auto;
	width: 16px;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--op-ink-muted);
}

.op-hub-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.op-hub-trend {
	flex: 0 0 auto;
	font-size: 0.68rem;
	width: 24px;
	text-align: right;
}

.op-hub-mini-badge {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.68rem;
	font-weight: 800;
}

/* The #1 pick gets real visual weight — bigger badge, a highlighted band,
   larger name — instead of reading the same as the rest of the top 5. */
.op-hub-row-winner {
	border-top: none;
	background: linear-gradient(90deg, rgba(255, 106, 0, 0.14), rgba(255, 106, 0, 0));
	border-radius: 8px;
	margin: 0 -0.4rem 0.2rem;
	padding: 0.5rem 0.4rem;
}

.op-hub-row-winner .op-hub-name {
	font-size: 0.98rem;
	font-weight: 800;
}

.op-hub-row-winner .op-hub-mini-badge {
	width: 48px;
	height: 48px;
	font-size: 0.8rem;
	box-shadow: 0 2px 0 rgba(57, 56, 57, 0.25);
}

.op-hub-crown {
	flex: 0 0 auto;
	width: 16px;
	color: #ff6a00;
}

.op-volatility-badge {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 2px 10px;
	border-radius: 999px;
	color: #fff;
	font-size: 0.62rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	vertical-align: middle;
	box-shadow: 0 2px 0 rgba(57, 56, 57, 0.25);
}

.op-volatility-lock {
	background: var(--op-retro-1);
}

.op-volatility-tossup {
	background: var(--op-retro-2);
}

.op-volatility-volatile {
	background: var(--op-retro-3);
}

.op-hub-event-tag {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid rgba(57, 56, 57, 0.12);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--op-retro-5);
}

/* Category page header — bold poster-style headline on the gold panel. */
.op-category-title {
	margin: 0 0 0.15rem;
	font-size: 2.1rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #fbf6ec;
	text-shadow: 0 3px 0 rgba(57, 56, 57, 0.18);
}

.op-cat-nav {
	margin: 0 0 1.1rem;
}

.op-cat-nav-slider {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	background: rgba(57, 56, 57, 0.14);
	border-radius: 999px;
	padding: 0.35rem;
	margin-bottom: 0.6rem;
}

.op-cat-nav-btn {
	flex: 0 0 auto;
	max-width: 38%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border: none;
	border-radius: 999px;
	background: var(--op-pill);
	color: var(--op-ink);
	font-family: inherit;
	font-weight: 700;
	font-size: 0.8rem;
	padding: 0.5rem 1rem;
	text-decoration: none;
	box-shadow: 0 3px 0 rgba(57, 56, 57, 0.18);
	transition: transform 0.12s ease;
}

a.op-cat-nav-btn:hover {
	transform: translateY(-2px);
}

.op-cat-nav-btn svg {
	vertical-align: -2px;
}

.op-cat-nav-disabled {
	background: transparent;
	color: rgba(255, 255, 255, 0.4);
	box-shadow: none;
	padding: 0.5rem 0.7rem;
}

.op-cat-nav-current {
	flex: 1 1 auto;
	text-align: center;
	color: #fbf6ec;
	font-weight: 800;
	font-size: 0.9rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.op-cat-nav-current small {
	display: block;
	font-weight: 600;
	font-size: 0.62rem;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.op-cat-nav-dropdown {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.op-cat-nav-dropdown label {
	color: #fbf6ec;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.op-cat-nav-select {
	flex: 1 1 auto;
	max-width: 340px;
	padding: 0.5rem 0.9rem;
	border: none;
	border-radius: 999px;
	background: var(--op-pill);
	color: var(--op-ink);
	font-family: inherit;
	font-weight: 700;
	font-size: 0.85rem;
	box-shadow: 0 3px 0 rgba(57, 56, 57, 0.18);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%23393839' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	cursor: pointer;
}

@media (max-width: 560px) {
	.op-cat-nav-btn {
		max-width: 34%;
		font-size: 0.72rem;
		padding: 0.5rem 0.7rem;
	}
}

.op-last-synced {
	margin: 0 0 1.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
}

.op-events {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
}

.op-event-tag {
	background: rgba(57, 56, 57, 0.14);
	border-left: 4px solid var(--op-retro-3);
	border-radius: 6px;
	padding: 0.5rem 0.9rem;
	font-size: 0.85rem;
	color: #fbf6ec;
}

.op-event-tag strong {
	margin-right: 0.4rem;
}

.op-section-heading {
	display: inline-block;
	margin: 0 0 0.9rem;
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	background: rgba(57, 56, 57, 0.14);
	color: #fbf6ec;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Collapsed-by-default legend for the badge ramp / avatar rings / status
   icons — compact so it doesn't compete with the actual predictions. */
.op-key {
	margin: 0 0 0.9rem;
}

.op-key-trigger {
	border: none;
	background: rgba(57, 56, 57, 0.14);
	color: #fbf6ec;
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	cursor: pointer;
}

.op-key-panel {
	margin-top: 0.6rem;
	background: var(--op-pill);
	border-radius: 10px;
	padding: 0.7rem 0.9rem;
	max-width: 480px;
}

.op-key-ramp-row {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin-bottom: 0.4rem;
}

.op-key-ramp-label {
	width: 38px;
	flex: 0 0 auto;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--op-ink-secondary);
}

.op-key-swatch {
	width: 20px;
	height: 16px;
	border-radius: 3px;
	flex: 0 0 auto;
}

.op-key-ramp-note {
	margin-left: 0.4rem;
	font-size: 0.64rem;
	color: var(--op-ink-muted);
	white-space: nowrap;
}

.op-key-line {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	margin-top: 0.35rem;
}

.op-key-line:first-of-type {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid rgba(57, 56, 57, 0.1);
}

.op-key-pair {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--op-ink-secondary);
	white-space: nowrap;
}

.op-key-avatar-demo {
	width: 20px;
	height: 20px;
	margin-left: 0;
}

.op-key-icon-demo {
	width: 18px;
	justify-content: center;
}

.op-consensus-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding-left: 0;
	margin: 0 0 0.5rem;
}

.op-pill-row {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	background: var(--op-pill);
	border-radius: 999px;
	padding: 0.5rem 1rem 0.5rem 0.5rem;
	box-shadow: 0 3px 0 rgba(57, 56, 57, 0.18);
}

a.op-pill-row {
	text-decoration: none;
	color: inherit;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

a.op-pill-row:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 0 rgba(57, 56, 57, 0.2);
}

/*
 * Fixed-width group so the nominee title always starts at the same x
 * position whether a row has one badge or two.
 */
.op-badge-group {
	display: flex;
	gap: 0.5rem;
	flex: 0 0 auto;
	width: 132px;
}

.op-badge {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 800;
	line-height: 1;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}

/* Bold red-orange pops for the high/leading value, teal for the low one —
   swapped from the original teal-high/orange-low so the leader visually wins. */
.op-badge-high {
	background: var(--op-retro-3);
}

.op-badge-low {
	background: var(--op-retro-1);
}

/* A flat 0% (no predictor has this winning) — muted gray, not a tier color. */
.op-badge-mono0 {
	background: rgba(57, 56, 57, 0.25);
}

/*
 * Nom is always teal, Win is always orange — a single identity color per
 * stat, with a 5-step intensity ramp standing in for magnitude (100% is the
 * boldest/darkest step, low percentages fade toward a pale tint) instead of
 * a relative high/low tier. The orange ramp is a true vivid orange (approved
 * "Option A") rather than a red-leaning one, which read pink at light tints.
 * Ink text reads fine across every orange step (oranges stay light even at
 * full saturation); teal's darkest two steps need the badge's default white.
 */
.op-badge-teal-1, .op-badge-teal-2, .op-badge-teal-3,
.op-badge-orange-1, .op-badge-orange-2, .op-badge-orange-3, .op-badge-orange-4, .op-badge-orange-5 {
	color: var(--op-ink);
}

.op-badge-teal-1 { background: #d7ede4; }
.op-badge-teal-2 { background: #a9d9c7; }
.op-badge-teal-3 { background: #78bea3; }
.op-badge-teal-4 { background: #2f7d63; }
.op-badge-teal-5 { background: #12543f; }

.op-badge-orange-1 { background: #ffe4d1; }
.op-badge-orange-2 { background: #ffc399; }
.op-badge-orange-3 { background: #ffa361; }
.op-badge-orange-4 { background: #ff8229; }
.op-badge-orange-5 { background: #ff6a00; }

.op-badge-pct {
	font-size: 1.05rem;
}

.op-badge-label {
	font-size: 0.55rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.9;
	margin-top: -1px;
}

/* Smaller badge variant for a secondary/signed metric (vs-consensus, alignment). */
.op-badge-sm {
	width: 46px;
	height: 46px;
}

.op-badge-sm .op-badge-pct {
	font-size: 0.85rem;
}

.op-badge-up {
	background: var(--op-up);
}

.op-badge-down {
	background: var(--op-down);
}

.op-badge-even {
	background: rgba(57, 56, 57, 0.3);
}

.op-poster {
	flex: 0 0 auto;
	width: 46px;
	height: 66px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--op-track);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.op-poster-placeholder {
	background: linear-gradient(135deg, var(--op-track), rgba(57, 56, 57, 0.06));
	box-shadow: none;
}

.op-nominee-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.op-nominee-row {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

.op-nominee {
	font-weight: 800;
	font-size: 1.1rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.op-studio {
	color: var(--op-ink-secondary);
	font-size: 0.76rem;
	font-weight: 500;
	display: block;
	margin-top: 0.1rem;
}

.op-trend {
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
}

.op-trend-up {
	color: #1a7f4e;
}

.op-trend-down {
	color: var(--op-down);
}

.op-trend-even,
.op-trend-none {
	color: var(--op-ink-muted);
}

/* Status icons: certainty (lock/question mark) + movement (changed/new),
   shown together next to the nominee title on the consensus list. */
.op-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.op-icon svg {
	display: block;
}

.op-icon-lock {
	color: var(--op-win);
}

.op-icon-uncertain {
	width: 16px;
	height: 16px;
	color: var(--op-nom);
	font-weight: 800;
	font-size: 0.8rem;
}

.op-icon-new {
	color: var(--op-retro-6);
}

/* Predictor avatars who picked this nominee, shown left of the Win% meter —
   teal ring = picked to win (rank 1), orange ring = nominated only. */
.op-picker-avatars {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin-right: 0.2rem;
}

.op-picker-avatar {
	position: relative;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	margin-left: -8px;
	border: 2px solid var(--op-pill);
	box-shadow: 0 0 0 2px var(--op-track);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--op-track);
	text-decoration: none;
	color: var(--op-ink);
	font-size: 0.6rem;
	font-weight: 700;
	transition: transform 0.1s ease;
}

.op-picker-avatar:first-child {
	margin-left: 0;
}

.op-picker-avatar:hover {
	transform: translateY(-2px);
	z-index: 1;
}

.op-picker-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.op-picker-avatar-winning {
	box-shadow: 0 0 0 2px #ff6a00;
}

.op-picker-avatar-nominated {
	box-shadow: 0 0 0 2px var(--op-win);
}

.op-picker-avatar-extra {
	background: rgba(57, 56, 57, 0.15);
	font-size: 0.56rem;
}

.op-spark-pending {
	flex: 0 0 auto;
	width: 64px;
	text-align: center;
	color: var(--op-ink-muted);
	font-size: 0.9rem;
}

/* Optional "Role tag" (e.g. Awards Editor) shown next to a predictor's name
   wherever it appears — set per predictor in wp-admin, blank by default. */
.op-role-tag {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--op-gold);
	color: var(--op-ink);
	font-size: 0.58rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	vertical-align: middle;
}

.op-stats {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Win and Nom stacked in one column instead of two side by side — same info,
   about half the horizontal space on an already-busy pill row. */
.op-stat-bars {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	flex: 0 0 auto;
}

.op-stat-block {
	width: 92px;
}

.op-sparkline-trigger {
	flex: 0 0 auto;
	width: 64px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--op-win);
}

.op-sparkline {
	display: block;
	pointer-events: none;
}

@media (max-width: 720px) {
	.op-sparkline-trigger {
		display: none;
	}
}

/* Mobile: show just the two badges + title by default (the row that used to
   overflow — avatars, meter bars, sparkline, poster all competing for space
   in one line) and reveal the rest only on tap. */
.op-row-expand-toggle {
	display: none;
	width: 100%;
	margin-top: 0.5rem;
	border: none;
	background: rgba(57, 56, 57, 0.1);
	color: var(--op-ink-secondary);
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.4rem 0.7rem;
	border-radius: 999px;
	cursor: pointer;
}

@media (max-width: 640px) {
	.op-cat-nav-dropdown {
		flex-direction: column;
		align-items: stretch;
		gap: 0.3rem;
	}

	.op-cat-nav-select {
		max-width: none;
		width: 100%;
	}

	.op-pill-row {
		flex-wrap: wrap;
	}

	.op-stats,
	.op-poster {
		display: none;
	}

	.op-row-expand-toggle {
		display: block;
	}

	.op-row-expanded .op-stats {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		margin-top: 0.5rem;
	}

	.op-row-expanded .op-poster {
		display: block;
		margin: 0.5rem auto 0;
	}
}

.op-consensus-entry {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.op-spark-detail {
	background: var(--op-pill);
	border-radius: 12px;
	padding: 1rem 1.1rem;
}

.op-spark-detail-inner {
	position: relative;
}

.op-spark-chart {
	display: block;
	width: 100%;
	height: auto;
}

.op-spark-point {
	fill: var(--op-win);
	cursor: pointer;
	transition: r 0.1s ease;
}

.op-spark-point:hover {
	r: 7;
}

.op-spark-tooltip {
	position: absolute;
	transform: translate(-50%, calc(-100% - 10px));
	background: var(--op-ink);
	color: #fbf6ec;
	padding: 0.4rem 0.6rem;
	border-radius: 6px;
	font-size: 0.75rem;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.op-spark-tooltip strong {
	display: block;
}

.op-stat-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.7rem;
	color: var(--op-ink-secondary);
	margin-bottom: 3px;
	font-weight: 600;
}

.op-stat-label {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--op-ink-muted);
	font-weight: 700;
}

.op-meter {
	height: 6px;
	border-radius: 3px;
	background: var(--op-track);
	overflow: hidden;
	margin-bottom: 0.4rem;
}

.op-meter:last-child {
	margin-bottom: 0;
}

.op-meter-fill {
	height: 100%;
	border-radius: 3px;
}

/* Same teal/orange identity + intensity ramp as the badges above. */
.op-meter-teal-1 { background: #d7ede4; }
.op-meter-teal-2 { background: #a9d9c7; }
.op-meter-teal-3 { background: #78bea3; }
.op-meter-teal-4 { background: #2f7d63; }
.op-meter-teal-5 { background: #12543f; }

.op-meter-orange-1 { background: #ffe4d1; }
.op-meter-orange-2 { background: #ffc399; }
.op-meter-orange-3 { background: #ffa361; }
.op-meter-orange-4 { background: #ff8229; }
.op-meter-orange-5 { background: #ff6a00; }

.op-meter-alignment {
	background: var(--op-win);
}

.op-cutoff-divider {
	margin: 1rem 0;
	text-align: center;
	position: relative;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fbf6ec;
}

.op-cutoff-divider::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border-top: 3px dashed rgba(57, 56, 57, 0.25);
}

.op-cutoff-divider span {
	position: relative;
	background: var(--op-gold);
	padding: 0 1rem;
	text-shadow: 0 2px 0 rgba(57, 56, 57, 0.18);
}

.op-predictor-card {
	padding: 0.9rem 1rem;
	border: none;
	border-radius: 14px;
	background: var(--op-pill);
	color: var(--op-ink);
	box-shadow: 0 3px 0 rgba(57, 56, 57, 0.18);
}

.op-predictor-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.5rem;
}

.op-predictor-photo {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

.op-predictor-photo-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--op-retro-1);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
}

.op-predictor-name {
	font-weight: 700;
	font-size: 0.95rem;
}

.op-predictor-name-link {
	color: inherit;
	text-decoration: none;
}

.op-predictor-name-link:hover {
	text-decoration: underline;
}

.op-predictor-see-more {
	flex: 0 0 auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--op-ink-secondary);
	text-decoration: none;
	white-space: nowrap;
}

.op-predictor-see-more:hover {
	color: var(--op-ink);
}

.op-predictor-updated {
	display: block;
	font-size: 0.62rem;
	font-weight: 600;
	color: var(--op-ink-muted);
	margin-top: 1px;
}

.op-predictor-picks {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.85rem;
}

.op-predictor-picks li {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.15rem 0;
}

.op-pick-divider {
	position: relative;
	margin: 0.4rem 0;
	padding: 0.3rem 0;
	text-align: center;
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--op-ink-muted);
}

.op-pick-divider::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border-top: 2px dashed rgba(57, 56, 57, 0.2);
}

.op-pick-divider span {
	position: relative;
	background: var(--op-pill);
	padding: 0 0.5rem;
}

.op-pick-lower {
	font-size: 0.8rem;
	color: var(--op-ink-muted);
}

.op-pick-lower .op-pick-nominee {
	font-weight: 400;
	color: var(--op-ink-secondary);
}

.op-pick-rank {
	color: var(--op-ink-muted);
	font-weight: 700;
}

.op-pick-nominee {
	flex: 1 1 auto;
	overflow-wrap: anywhere;
	font-weight: 500;
}

.op-vs {
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.op-vs-up {
	color: var(--op-up);
}

.op-vs-down {
	color: var(--op-down);
}

.op-vs-even {
	color: var(--op-ink-muted);
}

/* Predictor directory ([op_predictors]) — pill rows, same language as the
   category page's consensus list: badge, info, photo where a poster would go. */

.op-directory-photo,
.op-profile-photo {
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
	background: var(--op-track);
}

.op-directory-photo {
	width: 46px;
	height: 46px;
}

.op-directory-photo-fallback,
.op-profile-photo-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--op-retro-1);
	color: #fff;
	font-weight: 700;
}

.op-directory-photo-fallback {
	font-size: 1.1rem;
}

.op-directory-name {
	font-weight: 800;
	font-size: 1.1rem;
}

.op-directory-meta {
	color: var(--op-ink-secondary);
	font-size: 0.78rem;
	font-weight: 500;
	margin-top: 0.1rem;
}

/* Predictor profile ([op_predictor]) */

.op-profile-header.op-pill-row {
	margin-bottom: 1rem;
}

.op-profile-photo {
	width: 64px;
	height: 64px;
}

.op-profile-photo-fallback {
	font-size: 1.4rem;
}

.op-profile-name {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--op-ink);
}

.op-profile-picks {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0;
	margin: 0;
}

.op-profile-category {
	color: var(--op-ink-muted);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.op-profile-nominee {
	font-weight: 800;
	font-size: 1.05rem;
}

.op-loading,
.op-empty,
.op-error {
	color: var(--op-ink-muted);
	font-style: italic;
}

.op-error {
	color: var(--op-retro-5);
}