/* Senate ratings graphics. Diverging scale: blue (Democratic) to red
   (Republican) with a neutral gray toss-up. Every color is paired with a
   text label, a letter or a position, never color alone. */

:root {
	--ew-safe-d: #184f95;
	--ew-likely-d: #3987e5;
	--ew-lean-d: #86b6ef;
	--ew-tossup: #77756f;
	--ew-lean-r: #f09897;
	--ew-likely-r: #e34948;
	--ew-safe-r: #a82625;
}

.ew-r-safe_d { --c: var(--ew-safe-d); --on: #fff; }
.ew-r-likely_d { --c: var(--ew-likely-d); --on: #18212E; }
.ew-r-lean_d, .ew-r-tilt_d { --c: var(--ew-lean-d); --on: #18212E; }
.ew-r-tossup { --c: var(--ew-tossup); --on: #fff; }
.ew-r-lean_r, .ew-r-tilt_r { --c: var(--ew-lean-r); --on: #18212E; }
.ew-r-likely_r { --c: var(--ew-likely-r); --on: #18212E; }
.ew-r-safe_r { --c: var(--ew-safe-r); --on: #fff; }
.ew-r-not_up_d { --c: var(--ew-safe-d); }
.ew-r-not_up_r { --c: var(--ew-safe-r); }

/* Rating label: a color swatch beside ink text */
.ew-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.2;
	color: #18212E;
	white-space: nowrap;
}
.ew-chip::before {
	content: "";
	width: 0.8em;
	height: 0.8em;
	border-radius: 2px;
	background: var(--c);
	flex: none;
}
.ew-chip.ew-r-tilt_d::before,
.ew-chip.ew-r-tilt_r::before {
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--c);
}
.ew-chip--plain { font-weight: 500; }

/* Hover and focus tooltips */
[data-tip] { position: relative; }
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
	content: attr(data-tip);
	position: absolute;
	z-index: 20;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 220px;
	padding: 0.4rem 0.6rem;
	border-radius: 4px;
	background: #18212E;
	color: #fff;
	font: 500 0.8rem/1.35 var(--wp--preset--font-family--sans, sans-serif);
	text-align: left;
	white-space: normal;
	pointer-events: none;
}

/* ---------- Sidebar summary ---------- */
.ew-ratings-summary {
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	margin-bottom: 2.25rem;
}
.ew-seatcount {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	gap: 0.5rem;
	margin: 0.6rem 0 0.5rem;
}
.ew-seatcount__side { margin: 0 !important; font-size: 0.78rem; line-height: 1.25; color: #566170; }
.ew-seatcount__side--t { text-align: center; }
.ew-seatcount__side--r { text-align: right; }
.ew-seatcount__num {
	display: block;
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1;
	color: #18212E;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}
.ew-seatbar {
	position: relative;
	display: flex;
	gap: 2px;
	height: 20px;
	margin: 0.25rem 0 0.4rem;
}
.ew-seatbar__seg {
	flex-basis: 0;
	min-width: 3px;
	background: var(--c);
}
.ew-seatbar__seg:first-child { border-radius: 4px 0 0 4px; }
.ew-seatbar__seg:nth-last-child(2) { border-radius: 0 4px 4px 0; }
.ew-seatbar__seg.ew-r-not_up_d,
.ew-seatbar__seg.ew-r-not_up_r {
	background: repeating-linear-gradient(135deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 55%, #fff) 3px 6px);
}
.ew-seatbar__seg:focus-visible { outline: 2px solid #18212E; outline-offset: 2px; }
.ew-seatbar__mid {
	position: absolute;
	left: calc(50% - 1px);
	top: -5px;
	bottom: -5px;
	width: 2px;
	background: #18212E;
	pointer-events: none;
}
.ew-seatbar__note { font-size: 0.78rem; line-height: 1.4; color: #566170; margin: 0.6rem 0 0 !important; }

.ew-closelist__title {
	font-size: 0.9rem !important;
	margin: 1.25rem 0 0.25rem !important;
}
.ew-closelist { list-style: none; margin: 0; padding: 0; }
.ew-closelist li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid #D5DBE1;
	font-size: 0.95rem;
	font-weight: 600;
}
.ew-ratings-summary__foot { font-size: 0.8rem; color: #566170; margin: 0.6rem 0 0 !important; }
.ew-ratings-summary__foot a { display: block; margin-top: 0.2rem; font-weight: 600; }

/* ---------- Article grid: forecasters by rating ---------- */
.ew-grid-figure {
	margin: 2rem 0;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
}
.ew-grid-figure__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.75rem; color: #18212E; }
.ew-grid { display: grid; gap: 0; }
.ew-grid__row {
	display: grid;
	grid-template-columns: minmax(6.5rem, 9rem) repeat(7, minmax(0, 1fr));
	align-items: stretch;
	border-bottom: 1px solid #D5DBE1;
}
.ew-grid__row--head { border-bottom: 0; align-items: end; }
.ew-grid__colhead {
	padding: 0.4rem 0.15rem 0.35rem;
	border-bottom: 4px solid var(--c);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	color: #18212E;
}
.ew-grid__state {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0.55rem 0.5rem 0.55rem 0;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.2;
}
.ew-grid__row--head .ew-grid__state { font-size: 0.72rem; color: #566170; padding-bottom: 0.4rem; }
.ew-grid__held { font-size: 0.72rem; font-weight: 500; color: #566170; margin-top: 0.15rem; }
.ew-grid__cell {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	gap: 3px;
	padding: 0.4rem 0.1rem;
	border-left: 1px solid #EEF1F4;
}
.ew-grid__cell--consensus { background: #EEF1F4; box-shadow: inset 0 0 0 2px #C3CCD6; border-radius: 4px; }
.ew-mark {
	display: inline-grid;
	place-items: center;
	width: 1.45rem;
	height: 1.45rem;
	border-radius: 50%;
	background: var(--c);
	color: var(--on);
	box-shadow: 0 0 0 2px #fff;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1;
	cursor: default;
}
.ew-mark--tilt {
	background: #fff;
	color: #18212E;
	box-shadow: inset 0 0 0 2.5px var(--c), 0 0 0 2px #fff;
}
.ew-mark:focus-visible { outline: 2px solid #18212E; outline-offset: 2px; }
.ew-mark--key { --c: #C3CCD6; --on: #18212E; margin-right: 0.4rem; }
.ew-mark--key.ew-mark--tilt { --c: #566170; }
.ew-grid__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.1rem;
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
	font-size: 0.8rem;
	color: #2E3846;
}
.ew-grid__legend li { display: flex; align-items: center; margin: 0 !important; }
.ew-grid__swatch { width: 1.2rem; height: 0.9rem; margin-right: 0.4rem; background: #EEF1F4; box-shadow: inset 0 0 0 2px #C3CCD6; border-radius: 3px; }
.ew-grid__note { font-size: 0.8rem; color: #566170; margin: 0.5rem 0 0 !important; }

@media (max-width: 560px) {
	.ew-grid__row { grid-template-columns: 5.6rem repeat(7, minmax(0, 1fr)); }
	.ew-grid__colhead { font-size: 0.62rem; }
	.ew-mark { width: 1.2rem; height: 1.2rem; font-size: 0.64rem; }
	.ew-grid__state { font-size: 0.8rem; }
}

/* ---------- Latest changes ---------- */
.ew-changes { margin: 2rem 0; font-family: var(--wp--preset--font-family--sans, sans-serif); }
.ew-changes__title { font-size: 1.05rem !important; margin: 0 0 0.5rem !important; }
.ew-changes ul { list-style: none; margin: 0; padding: 0; }
.ew-changes li {
	display: grid;
	grid-template-columns: 4rem minmax(8rem, 1fr) auto;
	grid-template-areas: "date what move" "date dir dir";
	gap: 0.1rem 0.75rem;
	align-items: center;
	padding: 0.55rem 0;
	border-bottom: 1px solid #D5DBE1;
	font-size: 0.9rem;
	margin: 0 !important;
}
.ew-changes time { grid-area: date; color: #566170; font-size: 0.82rem; }
.ew-changes__what { grid-area: what; }
.ew-changes__move { grid-area: move; display: inline-flex; align-items: center; gap: 0.4rem; }
.ew-changes__arrow { color: #566170; }
.ew-changes__dir { grid-area: dir; font-size: 0.78rem; color: #566170; }
@media (max-width: 560px) {
	.ew-changes li { grid-template-columns: 3.4rem 1fr; grid-template-areas: "date what" "date move" "date dir"; }
}

/* ---------- Text table ---------- */
.ew-rtable { overflow-x: auto; margin: 2rem 0; }
.ew-rtable table { width: 100%; border-collapse: collapse; font-family: var(--wp--preset--font-family--sans, sans-serif); font-size: 0.88rem; }
.ew-rtable th, .ew-rtable td { padding: 0.5rem 0.6rem; border-bottom: 1px solid #D5DBE1; text-align: left; vertical-align: middle; }
.ew-rtable thead th { border-bottom: 2px solid #18212E; font-weight: 700; white-space: nowrap; }
.ew-rtable thead a { color: inherit; text-decoration: underline; text-decoration-color: #C3CCD6; text-underline-offset: 3px; }
.ew-rtable tbody th { font-weight: 700; min-width: 9rem; }
.ew-rtable__cand { display: block; margin-top: 0.15rem; font-size: 0.78rem; font-weight: 400; line-height: 1.35; color: #566170; }
.ew-rtable td { white-space: nowrap; }
.ew-rtable figcaption { font-size: 0.8rem; color: #566170; margin-top: 0.5rem; }

/* Keep the summary's own spacing; ignore the theme's block gap inside it. */
.ew-ratings-summary > * { margin-block-start: 0; }
.ew-ratings-summary > .ew-seatbar { margin-top: 0.5rem; }
