/*
 * CA Ballot Portal - public styles.
 *
 * Neutral by design: support and opposition use the same accent color
 * (no red/green), and every value is a CSS variable so a theme can override it.
 * Mobile first, light and dark friendly, no external requests.
 */

.cabp-archive,
.cabp-single {
	--cabp-text: var(--wp--preset--color--contrast, #1c1f23);
	--cabp-muted: #5b6470;
	--cabp-bg: var(--wp--preset--color--base, #ffffff);
	--cabp-surface: #f4f6f8;
	--cabp-border: #d5dae0;
	--cabp-accent: var(--wp--preset--color--primary, #1f5f8b);
	--cabp-accent-contrast: #ffffff;
	--cabp-accent-soft: #b9cfdf;
	--cabp-radius: 10px;
	--cabp-gap: 1rem;
	color: var(--cabp-text);
}

.cabp-archive *,
.cabp-single * {
	box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
	.cabp-archive,
	.cabp-single {
		--cabp-text: var(--wp--preset--color--contrast, #eef1f4);
		--cabp-muted: #a8b2bd;
		--cabp-bg: var(--wp--preset--color--base, #14171a);
		--cabp-surface: #1d2226;
		--cabp-border: #333c44;
		--cabp-accent: var(--wp--preset--color--primary, #6fb3dd);
		--cabp-accent-contrast: #0d1114;
		--cabp-accent-soft: #3b6d8e;
	}
}

/* Layout ---------------------------------------------------------------- */

.cabp-archive .cabp-container,
.cabp-single .cabp-container {
	max-width: 72rem;
	margin-inline: auto;
	padding: 1rem;
}

.cabp-archive .cabp-page-header,
.cabp-single .cabp-measure-header {
	margin-block: 1rem 1.5rem;
}

.cabp-page-title,
.cabp-measure-title {
	margin: 0 0 0.25rem;
	line-height: 1.2;
}

.cabp-page-intro,
.cabp-measure-official-title {
	margin: 0;
	color: var(--cabp-muted);
}

/* Cards ----------------------------------------------------------------- */

.cabp-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cabp-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.cabp-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 60em) {
	.cabp-card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cabp-card {
	position: relative;
	border: 1px solid var(--cabp-border);
	border-radius: var(--cabp-radius);
	background: var(--cabp-surface);
	padding: 1rem;
}

.cabp-card-link {
	color: inherit;
	text-decoration: none;
}

/* Stretched link: the title link covers the whole card without nesting anchors. */
.cabp-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--cabp-radius);
}

.cabp-card-link:focus-visible {
	outline: 2px solid var(--cabp-accent);
	outline-offset: 2px;
}

.cabp-card:has(.cabp-card-link:focus-visible) {
	outline: 2px solid var(--cabp-accent);
	outline-offset: 2px;
}

.cabp-card-number {
	display: inline-block;
	min-width: 2.25rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: var(--cabp-accent);
	color: var(--cabp-accent-contrast);
	font-size: 0.8rem;
	font-weight: 700;
	text-align: center;
}

.cabp-card-title {
	margin: 0.5rem 0 0.25rem;
	font-size: 1.05rem;
	line-height: 1.3;
}

.cabp-card-summary {
	margin: 0 0 0.75rem;
	color: var(--cabp-muted);
	font-size: 0.9rem;
}

.cabp-card-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.75rem;
}

/* Chips ----------------------------------------------------------------- */

.cabp-chip {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--cabp-border);
	border-radius: 999px;
	background: var(--cabp-bg);
	color: var(--cabp-muted);
	font-size: 0.75rem;
	line-height: 1.6;
	white-space: nowrap;
}

/* Effect and confidence chips share the neutral accent; they are told apart
   by a subtle outline style, never by red/green. */
.cabp-effect-positive,
.cabp-effect-negative,
.cabp-effect-mixed,
.cabp-effect-neutral,
.cabp-effect-unclear {
	border-color: var(--cabp-accent);
	color: var(--cabp-accent);
	font-weight: 600;
}

.cabp-effect-neutral,
.cabp-effect-unclear {
	font-weight: 400;
}

.cabp-confidence-high,
.cabp-confidence-medium,
.cabp-confidence-low {
	border-style: dashed;
}

/* Funding bar ----------------------------------------------------------- */

.cabp-funding-bar {
	display: flex;
	height: 1.4rem;
	border: 1px solid var(--cabp-border);
	border-radius: 999px;
	overflow: hidden;
	background: var(--cabp-bg);
	font-size: 0.7rem;
	line-height: 1.4rem;
}

.cabp-funding-yes,
.cabp-funding-no {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

.cabp-funding-yes {
	background: var(--cabp-accent);
	color: var(--cabp-accent-contrast);
}

.cabp-funding-no {
	background: var(--cabp-accent-soft);
	color: var(--cabp-text);
}

.cabp-funding-pct {
	font-variant-numeric: tabular-nums;
}

/* Single measure -------------------------------------------------------- */

.cabp-draft-banner {
	margin: 0 0 1rem;
	padding: 0.6rem 0.85rem;
	border-inline-start: 4px solid var(--cabp-accent);
	border-radius: 4px;
	background: var(--cabp-surface);
	color: var(--cabp-muted);
	font-size: 0.9rem;
}

.cabp-measure-number {
	display: inline-block;
	margin-bottom: 0.35rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--cabp-accent);
	color: var(--cabp-accent-contrast);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cabp-measure-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	color: var(--cabp-muted);
	font-size: 0.85rem;
}

.cabp-section {
	margin: 0 0 1.75rem;
}

.cabp-section-title {
	margin: 0 0 0.6rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--cabp-border);
	font-size: 1.2rem;
}

.cabp-means-grid,
.cabp-who-grid,
.cabp-sides-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cabp-gap);
}

@media (min-width: 48em) {
	.cabp-means-grid,
	.cabp-who-grid,
	.cabp-sides-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cabp-means-box,
.cabp-who-box,
.cabp-side-box {
	padding: 0.85rem 1rem;
	border: 1px solid var(--cabp-border);
	border-radius: var(--cabp-radius);
	background: var(--cabp-surface);
}

.cabp-means-box h3,
.cabp-who-box h3,
.cabp-side-box h3 {
	margin: 0 0 0.4rem;
	font-size: 1rem;
}

.cabp-side-box h4 {
	margin: 1rem 0 0.35rem;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--cabp-muted);
}

/* Support and opposition use the same accent, mirroring the neutrality rule. */
.cabp-side-support,
.cabp-side-oppose {
	border-top: 4px solid var(--cabp-accent);
}

.cabp-list {
	margin: 0;
	padding-inline-start: 1.25rem;
}

.cabp-list li {
	margin-bottom: 0.4rem;
}

.cabp-list-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cabp-list-inline li {
	margin: 0;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--cabp-border);
	border-radius: 999px;
	background: var(--cabp-bg);
	font-size: 0.8rem;
}

.cabp-funders li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.6rem;
	align-items: baseline;
	padding-bottom: 0.35rem;
	border-bottom: 1px dashed var(--cabp-border);
}

.cabp-funder-name {
	font-weight: 600;
}

.cabp-funder-amount {
	font-variant-numeric: tabular-nums;
}

.cabp-funder-kind {
	flex-basis: 100%;
	color: var(--cabp-muted);
	font-size: 0.8rem;
}

/* Tables ---------------------------------------------------------------- */

.cabp-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cabp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.cabp-table th,
.cabp-table td {
	padding: 0.6rem 0.7rem;
	border-bottom: 1px solid var(--cabp-border);
	text-align: start;
	vertical-align: top;
}

.cabp-table thead th {
	border-bottom-width: 2px;
}

.cabp-table tbody th {
	font-weight: 600;
	white-space: nowrap;
}

/* Measures table (v0.3.0 / T15) ----------------------------------------- */

.cabp-filter {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.75rem;
}

.cabp-js .cabp-filter {
	display: flex;
}

.cabp-filter-label {
	margin-inline-end: 0.25rem;
	color: var(--cabp-muted);
	font-size: 0.85rem;
	font-weight: 600;
}

.cabp-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.cabp-filter-chip {
	padding: 0.2rem 0.7rem;
	border: 1px solid var(--cabp-border);
	border-radius: 999px;
	background: var(--cabp-bg);
	color: var(--cabp-text);
	font-size: 0.8rem;
	font-family: inherit;
	line-height: 1.6;
	cursor: pointer;
}

.cabp-filter-chip:hover,
.cabp-filter-chip:focus-visible {
	border-color: var(--cabp-accent);
}

.cabp-filter-chip.is-active {
	border-color: var(--cabp-accent);
	color: var(--cabp-accent);
	font-weight: 600;
}

.cabp-table-status {
	display: none;
	margin: 0 0 0.5rem;
	color: var(--cabp-muted);
	font-size: 0.85rem;
}

.cabp-js .cabp-table-status {
	display: block;
}

.cabp-table-caption {
	margin-bottom: 0.6rem;
	color: var(--cabp-muted);
	font-size: 0.85rem;
	text-align: start;
}

.cabp-measures-table tr[hidden] {
	display: none;
}

.cabp-measures-table th,
.cabp-measures-table td {
	vertical-align: top;
	overflow-wrap: break-word;
}

/* Long headline and fiscal text wraps here rather than being cut off. */
.cabp-measures-table tbody th {
	white-space: normal;
}

.cabp-measures-table .cabp-sort-group {
	display: none;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.cabp-js .cabp-measures-table .cabp-sort-group {
	display: inline-flex;
}

.cabp-js .cabp-measures-table th[aria-sort] .cabp-th-label {
	display: none;
}

.cabp-sort {
	padding: 0.1rem 0.4rem;
	border: 1px solid var(--cabp-border);
	border-radius: 4px;
	background: var(--cabp-bg);
	color: inherit;
	font: inherit;
	font-size: 0.75rem;
	cursor: pointer;
}

.cabp-sort:hover,
.cabp-sort:focus-visible {
	border-color: var(--cabp-accent);
}

.cabp-sort.is-active {
	border-color: var(--cabp-accent);
	color: var(--cabp-accent);
	font-weight: 700;
}

/* Sort direction marker is decorative: aria-sort on the header carries it. */
.cabp-sort[data-cabp-dir="asc"]::after {
	content: " \2191";
}

.cabp-sort[data-cabp-dir="desc"]::after {
	content: " \2193";
}

.cabp-table-prop {
	font-weight: 700;
}

.cabp-draft-chip {
	border-color: var(--cabp-accent);
	color: var(--cabp-accent);
	font-weight: 600;
}

.cabp-table-topics {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.cabp-raised {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.6rem;
	margin-bottom: 0.35rem;
	font-variant-numeric: tabular-nums;
}

.cabp-raised-line {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
}

.cabp-raised-side {
	color: var(--cabp-muted);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.cabp-raised-amount.is-none {
	color: var(--cabp-muted);
	font-style: italic;
}

/* Neutral split bar: one accent, two shades, no red/green. */
.cabp-split {
	display: flex;
	width: 100%;
	max-width: 9rem;
	height: 0.5rem;
	border: 1px solid var(--cabp-border);
	border-radius: 999px;
	overflow: hidden;
	background: var(--cabp-bg);
}

.cabp-split-part {
	display: block;
	height: 100%;
}

.cabp-split-yes {
	background: var(--cabp-accent);
}

.cabp-split-no {
	background: var(--cabp-accent-soft);
}

.cabp-table-empty,
.cabp-table-updated {
	margin: 0.75rem 0 0;
	color: var(--cabp-muted);
	font-size: 0.85rem;
}

/* Desktop column widths. The table spans the full plugin container width (like
   the old card grid) and columns follow the layout agreed with Paul on
   2026-10-17: "What it does" takes about 40 percent, Prop, Type, Topic and
   Raised stay compact, and Fiscal effect wraps. Nothing is nowrap and the font
   size is unchanged, so headlines up to 180 characters wrap instead of shrink. */
@media (min-width: 45em) {
	.cabp-measures-table {
		table-layout: fixed;
	}

	.cabp-measures-table thead th:nth-child(1) {
		width: 7%;
	}

	.cabp-measures-table thead th:nth-child(2) {
		width: 40%;
	}

	.cabp-measures-table thead th:nth-child(3) {
		width: 10%;
	}

	.cabp-measures-table thead th:nth-child(4) {
		width: 10%;
	}

	.cabp-measures-table thead th:nth-child(5) {
		width: 19%;
	}

	.cabp-measures-table thead th:nth-child(6) {
		width: 14%;
	}
}

/* Mobile (< 720px): every row is a stacked block, no horizontal scrolling.
   The header row stays in the accessibility tree for the column labels, but
   the sort buttons live in it, so they are hidden on small screens: rows keep
   the server-side proposition order and the topic filter stays available. */
@media (max-width: 44.99em) {
	.cabp-measures-table,
	.cabp-measures-table tbody,
	.cabp-measures-table tr,
	.cabp-measures-table th,
	.cabp-measures-table td {
		display: block;
		width: 100%;
	}

	.cabp-js .cabp-measures-table .cabp-sort-group {
		display: none;
	}

	.cabp-js .cabp-measures-table th[aria-sort] .cabp-th-label {
		display: block;
	}

	/* Keep the header row in the accessibility tree but out of sight. */
	.cabp-measures-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.cabp-measures-table tr {
		margin-bottom: 1rem;
		padding: 0.6rem 0.75rem;
		border: 1px solid var(--cabp-border);
		border-radius: var(--cabp-radius);
		background: var(--cabp-surface);
	}

	.cabp-measures-table tbody th,
	.cabp-measures-table td {
		padding: 0.2rem 0;
		border-bottom: 0;
		white-space: normal;
	}

	.cabp-measures-table tbody th,
	.cabp-measures-table td {
		margin-top: 0.4rem;
	}

	.cabp-measures-table th[data-label]::before,
	.cabp-measures-table tbody td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.1rem;
		color: var(--cabp-muted);
		font-size: 0.7rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.cabp-measures-table tbody th[data-label] {
		margin-top: 0;
		font-size: 1.05rem;
	}

	.cabp-measures-table tbody th[data-label]::before {
		margin-bottom: 0.15rem;
	}

	.cabp-split {
		max-width: none;
	}
}

/* Sources --------------------------------------------------------------- */

.cabp-sources-list {
	margin: 0;
	padding-inline-start: 1.5rem;
}

.cabp-sources-list li {
	margin-bottom: 0.6rem;
	scroll-margin-top: 5rem;
}

.cabp-source-ref {
	font-size: 0.7em;
	line-height: 0;
	margin-inline-start: 0.15em;
}

.cabp-source-link {
	text-decoration: none;
}

.cabp-source-link:focus-visible {
	outline: 2px solid var(--cabp-accent);
	outline-offset: 1px;
}

.cabp-source-publisher,
.cabp-source-accessed {
	display: block;
	color: var(--cabp-muted);
	font-size: 0.8rem;
}

.cabp-sources-list li:target {
	background: var(--cabp-surface);
	outline: 2px solid var(--cabp-accent);
	outline-offset: 2px;
}

.cabp-empty {
	color: var(--cabp-muted);
}

/* Ballot top nav -------------------------------------------------------- */

.cabp-ballot-nav {
	margin: 0 0 1.25rem;
}

.cabp-ballot-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cabp-ballot-nav-link {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--cabp-border);
	border-radius: 999px;
	background: var(--cabp-bg);
	color: var(--cabp-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
}

.cabp-ballot-nav-link:hover,
.cabp-ballot-nav-link:focus-visible {
	border-color: var(--cabp-accent);
}

.cabp-ballot-nav-link.is-current {
	border-color: var(--cabp-accent);
	background: var(--cabp-accent);
	color: var(--cabp-accent-contrast);
}

/* Contest archive ------------------------------------------------------- */

.cabp-contest-level {
	margin: 0 0 2rem;
}

.cabp-card-jurisdiction {
	margin: 0 0 0.6rem;
	color: var(--cabp-muted);
	font-size: 0.85rem;
}

.cabp-candidate-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cabp-candidate-list-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0;
}

.cabp-candidate-name {
	font-weight: 600;
}

.cabp-incumbent-tag {
	border-color: var(--cabp-accent);
	color: var(--cabp-accent);
}

/* Single contest -------------------------------------------------------- */

.cabp-contest-jurisdiction {
	margin: 0.5rem 0 0;
	color: var(--cabp-muted);
}

.cabp-candidates-note {
	margin: 0 0 1rem;
	color: var(--cabp-muted);
	font-size: 0.85rem;
}

.cabp-candidates-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cabp-gap);
}

@media (min-width: 52em) {
	.cabp-candidates-grid {
		grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
	}
}

.cabp-candidate {
	padding: 1rem;
	border: 1px solid var(--cabp-border);
	border-radius: var(--cabp-radius);
	background: var(--cabp-surface);
}

.cabp-candidate-header {
	margin: 0 0 0.75rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--cabp-border);
}

.cabp-candidate-heading {
	margin: 0 0 0.4rem;
	font-size: 1.15rem;
}

.cabp-candidate-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.cabp-candidate h4 {
	margin: 1rem 0 0.35rem;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--cabp-muted);
}

.cabp-position-group {
	margin-bottom: 0.6rem;
}

.cabp-position-topic {
	margin: 0 0 0.25rem;
	font-size: 0.9rem;
	font-weight: 700;
}

.cabp-candidate-funding .cabp-list {
	margin-top: 0.35rem;
}

.cabp-outside-spending,
.cabp-muted {
	color: var(--cabp-muted);
	font-size: 0.85rem;
}

.cabp-candidate-website {
	margin: 1rem 0 0;
}


/* Theme (Ollie) caps p/li at a reading width (~65ch). Inside the portal, text should fill its box. */
.cabp-container p,
.cabp-container li,
.cabp-container ul,
.cabp-container ol,
.cabp-container dl,
.cabp-container dd,
.cabp-container blockquote,
.cabp-container h2,
.cabp-container h3,
.cabp-container h4 {
	max-width: none;
}

/* Breadcrumbs ------------------------------------------------------------- */
.cabp-breadcrumbs {
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
}
.cabp-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cabp-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	margin: 0;
}
.cabp-breadcrumbs li + li::before {
	content: "\203A";
	margin: 0 0.5rem;
	opacity: 0.6;
}
.cabp-breadcrumbs a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.cabp-breadcrumbs [aria-current="page"] {
	opacity: 0.75;
}

/* Split long text into spaced paragraphs. */
.cabp-container p + p {
	margin-top: 0.85em;
}