/* NWEF School Choice Index — compare two states.
   Semantic, theme-friendly baseline. Colors come from the same custom properties as the rankings
   widget (with fallbacks); the host theme overrides --sc-* to restyle. No baked-in visual design. */

.scindex-compare {
	--sc-tier-lead: var(--brand-success, #2e7d5b);
	--sc-tier-grow: var(--brand-warning, #b06d0f);
	--sc-tier-lag:  var(--brand-danger,  #a23b4a);
	--sc-bar-track: var(--surface-2, #edf1f5);
	--sc-border:    var(--surface-3, #e2e8f0);
	--sc-muted:     var(--text-muted, #5b6672);

	display: block;
	color: inherit;
	font: inherit;
	background: #fff;
	border: 1px solid var(--sc-border);
	border-radius: 14px;
	overflow: hidden;
}
.scindex-compare *,
.scindex-compare *::before,
.scindex-compare *::after { box-sizing: border-box; }

/* Guide CTA underline: our own (the host section's `.ay-section a` rule is excluded via the
   `.no-underline` marker on the link); two classes so it also wins over a `.no-underline` utility. */
.scindex-compare .scindex-compare-cta { text-decoration: underline; }

/* Controls -------------------------------------------------------------- */
.scindex-compare-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.75rem;
	padding: 1rem;
	border-bottom: 1px solid var(--sc-border);
}
.scindex-compare-field { flex: 1 1 12rem; min-width: 10rem; margin: 0; }
.scindex-compare-label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sc-muted);
}
.scindex-compare-select {
	width: 100%;
	padding: 0.55rem 0.7rem;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid var(--sc-border);
	border-radius: 10px;
}
.scindex-compare-select:focus-visible { outline: 2px solid var(--sc-tier-grow); outline-offset: 1px; }
.scindex-compare-vs {
	align-self: center;
	padding-bottom: 0.4rem;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sc-muted);
}

/* Results --------------------------------------------------------------- */
.scindex-compare-results { padding: 1rem; }

.scindex-compare-overall {
	margin: 0 0 0.85rem;
	font-size: 1.05em;
	font-weight: 700;
	text-align: center;
}

.scindex-compare-badges {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
}
.scindex-compare-col {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.scindex-compare-badge {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 1rem 0.75rem;
	text-align: center;
	border: 1px solid var(--sc-border);
	border-top: 4px solid var(--sc-muted);
	border-radius: 12px;
}
.scindex-compare-badge[data-tier="lead"] { border-top-color: var(--sc-tier-lead); }
.scindex-compare-badge[data-tier="grow"] { border-top-color: var(--sc-tier-grow); }
.scindex-compare-badge[data-tier="lag"]  { border-top-color: var(--sc-tier-lag); }
.scindex-compare-badge[data-ahead="true"] { box-shadow: 0 0 0 2px var(--sc-border) inset; }

.scindex-compare-name { font-weight: 700; font-size: 1.05em; }
.scindex-compare-ahead {
	order: -1;
	font-size: 0.62em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.15em 0.55em;
	border-radius: 999px;
	color: #fff;
	background: var(--sc-muted);
}
.scindex-compare-badge[data-tier="lead"][data-ahead="true"] .scindex-compare-ahead { background: var(--sc-tier-lead); }
.scindex-compare-badge[data-tier="grow"][data-ahead="true"] .scindex-compare-ahead { background: var(--sc-tier-grow); }
.scindex-compare-badge[data-tier="lag"][data-ahead="true"]  .scindex-compare-ahead { background: var(--sc-tier-lag); }

.scindex-compare-score {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	font-size: 2em;
	line-height: 1;
}
.scindex-compare-score-max { font-size: 0.5em; font-weight: 600; color: var(--sc-muted); }
.scindex-compare-rank { font-variant-numeric: tabular-nums; font-size: 0.9em; color: var(--sc-muted); }
.scindex-compare-tier {
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	color: #fff;
	background: var(--sc-muted);
}
.scindex-compare-badge[data-tier="lead"] .scindex-compare-tier { background: var(--sc-tier-lead); }
.scindex-compare-badge[data-tier="grow"] .scindex-compare-tier { background: var(--sc-tier-grow); }
.scindex-compare-badge[data-tier="lag"]  .scindex-compare-tier { background: var(--sc-tier-lag); }

.scindex-compare-tally {
	margin: 0 0 0.85rem;
	padding: 0.6rem 0.75rem;
	text-align: center;
	background: var(--sc-bar-track);
	border-radius: 10px;
}

.scindex-compare-cta {
	display: block;
	text-align: center;
	font-weight: 600;
	color: inherit;
}
.scindex-compare-cta:hover { text-decoration: none; }
.scindex-compare-cta:focus-visible { outline: 2px solid var(--sc-tier-grow); outline-offset: 2px; }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 560px) {
	.scindex-compare-vs { display: none; }
}