/**
 * TX Power Compare.
 *
 * Scoped under .tpc and built on CSS custom properties so a theme can restyle
 * it by overriding the tokens rather than fighting specificity. Colours are
 * deliberately neutral so it inherits the look of the page it sits on.
 */

.tpc {
	--tpc-fg: #14181d;
	--tpc-muted: #5b6672;
	--tpc-line: #dfe4ea;
	--tpc-bg: #fff;
	--tpc-soft: #f6f8fa;
	--tpc-accent: #0b5cad;
	--tpc-pos: #10693b;
	--tpc-neg: #a3341f;
	--tpc-radius: 10px;

	color: var(--tpc-fg);
	background: var(--tpc-bg);
	font-size: 16px;
	line-height: 1.5;
	container-type: inline-size;
}

@media (prefers-color-scheme: dark) {
	.tpc:not([data-tpc-theme="light"]) {
		--tpc-fg: #e8ecf1;
		--tpc-muted: #9aa7b4;
		--tpc-line: #2b333d;
		--tpc-bg: #12161b;
		--tpc-soft: #1a2027;
		--tpc-accent: #6fb2f2;
		--tpc-pos: #5cc98d;
		--tpc-neg: #f08a6f;
	}
}

/*
 * An explicit stamp wins over the OS preference in both directions. A
 * light-only host page must be able to pin this, otherwise a visitor whose OS
 * is in dark mode gets the widget's light-on-dark palette painted onto the
 * host's light background, and the text disappears.
 */
.tpc[data-tpc-theme="dark"] {
	--tpc-fg: #e8ecf1;
	--tpc-muted: #9aa7b4;
	--tpc-line: #2b333d;
	--tpc-bg: #12161b;
	--tpc-soft: #1a2027;
	--tpc-accent: #6fb2f2;
	--tpc-pos: #5cc98d;
	--tpc-neg: #f08a6f;
}

/* The widget paints its own surface; a host that strips that background must
   not be left with the widget's text colours. Pinning light restores both. */
.tpc[data-tpc-theme="light"] {
	--tpc-fg: #14181d;
	--tpc-muted: #5b6672;
	--tpc-line: #dfe4ea;
	--tpc-bg: #fff;
	--tpc-soft: #f6f8fa;
	--tpc-accent: #0b5cad;
	--tpc-pos: #10693b;
	--tpc-neg: #a3341f;
}

.tpc__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	line-height: 1.25;
}

/* ---------- controls ---------- */

.tpc__controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1rem;
	padding: 1rem;
	margin-bottom: 1.25rem;
	background: var(--tpc-soft);
	border: 1px solid var(--tpc-line);
	border-radius: var(--tpc-radius);
}

.tpc__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.tpc__field > label,
.tpc__field > legend {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--tpc-muted);
	padding: 0;
}

.tpc__field select,
.tpc__field input[type="number"] {
	width: 100%;
	max-width: 100%;
	padding: 0.5rem 0.6rem;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--tpc-fg);
	background: var(--tpc-bg);
	border: 1px solid var(--tpc-line);
	border-radius: 7px;
	box-sizing: border-box;
}

.tpc__field--checks label {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--tpc-fg);
}

/* What the chosen home size works out to in kWh. Printed rather than implied:
   the control is easier to answer than "monthly usage", but it hides more, and
   an assumption a reader cannot see is one they cannot disagree with. */
.tpc__usage {
	margin: 0.15rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--tpc-muted);
}

.tpc__advanced-toggle,
.tpc__monthly-clear {
	grid-column: 1 / -1;
	justify-self: start;
	padding: 0;
	font: inherit;
	font-size: 0.875rem;
	color: var(--tpc-accent);
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

.tpc__monthly {
	grid-column: 1 / -1;
}

.tpc__hint {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	color: var(--tpc-muted);
}

.tpc__monthly-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.tpc__month {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-size: 0.75rem;
	color: var(--tpc-muted);
}

.tpc__month input {
	width: 100%;
	padding: 0.35rem 0.4rem;
	font: inherit;
	font-size: 0.875rem;
	color: var(--tpc-fg);
	background: var(--tpc-bg);
	border: 1px solid var(--tpc-line);
	border-radius: 6px;
	box-sizing: border-box;
}

/* ---------- status ---------- */

.tpc__status {
	padding: 0.75rem 0;
	font-size: 0.9375rem;
	color: var(--tpc-muted);
}

.tpc__status--error {
	color: var(--tpc-neg);
}

.tpc-notice {
	padding: 0.75rem 1rem;
	border-radius: var(--tpc-radius);
	background: var(--tpc-soft);
	font-size: 0.9375rem;
}

.tpc-notice--error {
	color: var(--tpc-neg);
	border: 1px solid currentColor;
}

/* ---------- verdict ---------- */

.tpc__verdict {
	padding: 1.1rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid var(--tpc-line);
	border-left: 4px solid var(--tpc-accent);
	border-radius: var(--tpc-radius);
	background: var(--tpc-soft);
}

.tpc__verdict--cps {
	border-left-color: var(--tpc-pos);
}

.tpc__verdict--market {
	border-left-color: var(--tpc-neg);
}

.tpc__verdict-lede {
	margin: 0 0 0.2rem;
	font-size: 1.0625rem;
	font-weight: 600;
}

.tpc__verdict-sum {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--tpc-muted);
}

.tpc__warn {
	padding: 0.85rem 1rem;
	margin-bottom: 1rem;
	font-size: 0.875rem;
	line-height: 1.5;
	border: 1px solid var(--tpc-neg);
	border-radius: var(--tpc-radius);
	color: var(--tpc-fg);
}

/* ---------- cards ---------- */

.tpc__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

.tpc__card {
	padding: 1rem 1.15rem;
	border: 1px solid var(--tpc-line);
	border-radius: var(--tpc-radius);
}

.tpc__card h3 {
	margin: 0 0 0.4rem;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tpc-muted);
}

.tpc__big {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.tpc__sub {
	margin-top: 0.2rem;
	font-size: 0.8125rem;
	color: var(--tpc-muted);
}

.tpc__worse {
	margin-top: 0.55rem;
	padding-top: 0.55rem;
	border-top: 1px solid var(--tpc-line);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--tpc-neg);
}

.tpc__range {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	margin-top: 0.7rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--tpc-line);
	font-size: 0.75rem;
	color: var(--tpc-muted);
	font-variant-numeric: tabular-nums;
}

/* ---------- outcomes ---------- */

.tpc__two {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.tpc__outcome {
	padding: 0.9rem 1rem;
	background: var(--tpc-soft);
	border-radius: var(--tpc-radius);
}

.tpc__outcome-label {
	font-weight: 600;
	font-size: 0.9375rem;
}

.tpc__outcome-sub {
	font-size: 0.8125rem;
	color: var(--tpc-muted);
}

.tpc__outcome-val {
	margin-top: 0.4rem;
	font-size: 1.0625rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.tpc__pos {
	color: var(--tpc-pos);
}

.tpc__neg {
	color: var(--tpc-neg);
}

/* ---------- host-theme guard ----------
 *
 * The widget is usually dropped inside a theme's article wrapper, and article
 * styles reach into it. This project's theme right-aligns every table column
 * after the first, which is right for a budget table and wrong here — it put
 * "Regulated wires company" hard against the numbers.
 *
 * Two-class selectors, because a bare `.tpc table td` loses to the theme's
 * `.prose td:nth-child(n+2)` on specificity. These tie, and this file loads
 * after the theme's, so they win. The widget's own alignment is then restated
 * below at the same weight.
 */

.tpc .tpc__table th,
.tpc .tpc__table td,
.tpc .tpc__feetable th,
.tpc .tpc__feetable td {
	text-align: left;
}

/* ---------- table ---------- */

.tpc__details {
	margin-bottom: 1.25rem;
	border: 1px solid var(--tpc-line);
	border-radius: var(--tpc-radius);
}

.tpc__details summary {
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.tpc__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

.tpc__table th,
.tpc__table td {
	padding: 0.5rem 0.75rem;
	text-align: left;
	border-top: 1px solid var(--tpc-line);
}

.tpc__table th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tpc-muted);
}

.tpc .tpc__table td:nth-child(n+4) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.tpc__table a {
	color: var(--tpc-accent);
}

.tpc__tag {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.05rem 0.4rem;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--tpc-neg);
	border: 1px solid currentColor;
	border-radius: 4px;
	cursor: help;
}

/* ---------- notes ---------- */

.tpc__notes ul {
	margin: 0 0 0.75rem;
	padding-left: 1.1rem;
	font-size: 0.8125rem;
	color: var(--tpc-muted);
}

.tpc__notes li {
	margin-bottom: 0.3rem;
}

.tpc__stamp {
	margin: 0 0 0.4rem;
	font-size: 0.75rem;
	color: var(--tpc-muted);
}

.tpc__stamp--warn {
	color: var(--tpc-neg);
	font-weight: 600;
}

@container (max-width: 480px) {
	.tpc__big {
		font-size: 1.625rem;
	}
}

/* ---------- fee comparison ---------- */

.tpc__fees {
	padding: 1rem 1.15rem;
	margin-bottom: 1.25rem;
	border: 1px solid var(--tpc-line);
	border-radius: var(--tpc-radius);
}

.tpc__fees-title {
	margin: 0 0 0.6rem;
	font-size: 0.9375rem;
	font-weight: 700;
}

.tpc__feetable {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.tpc__feetable th,
.tpc__feetable td {
	padding: 0.5rem 0.6rem;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid var(--tpc-line);
}

.tpc__feetable thead th {
	border-top: 0;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tpc-muted);
}

.tpc__feetable tbody th {
	width: 30%;
	font-weight: 600;
}

@media (max-width: 560px) {
	.tpc__feetable,
	.tpc__feetable tbody,
	.tpc__feetable tr,
	.tpc__feetable td,
	.tpc__feetable th {
		display: block;
		width: auto;
	}

	.tpc__feetable thead {
		display: none;
	}

	.tpc__feetable tbody th {
		padding-bottom: 0.15rem;
	}

	.tpc__feetable td {
		border-top: 0;
		padding-top: 0;
		padding-left: 1.2rem;
	}

	.tpc__feetable td::before {
		content: "• ";
		color: var(--tpc-muted);
	}
}

/* ---------- realized prices ---------- */

.tpc__realized {
	padding: 1.1rem 1.2rem;
	margin-bottom: 1.25rem;
	border: 2px solid var(--tpc-neg);
	border-radius: var(--tpc-radius);
}

.tpc__realized-title {
	margin: 0 0 0.3rem;
	font-size: 1rem;
	font-weight: 700;
}

.tpc__realized-lede {
	margin: 0 0 0.8rem;
	font-size: 0.875rem;
	color: var(--tpc-muted);
}

.tpc__realized-big {
	font-size: 1.05rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.tpc__realized-note {
	font-size: 0.8125rem;
	color: var(--tpc-muted);
}

.tpc__realized-punch {
	margin: 0.8rem 0 0.4rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--tpc-fg);
}

/* The qualification carries as much weight as the number, so it is set as a
   block rather than a footnote — a reader who takes the gap away without it
   has been misled by the layout. */
.tpc__realized-caveat {
	margin: 0.7rem 0 0;
	padding: 0.75rem 0.9rem;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--tpc-fg);
	background: var(--tpc-soft);
	border-radius: 8px;
}

.tpc__realized-link {
	margin: 0.7rem 0 0.4rem;
	font-size: 0.875rem;
}

.tpc__realized-link a {
	color: var(--tpc-accent);
	font-weight: 600;
}

/* ---------- the twelve months everything was priced on ---------- */

.tpc__profile {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.75rem;
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	color: var(--tpc-muted);
	font-variant-numeric: tabular-nums;
}

.tpc__profile-label {
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.tpc__profile-cell b {
	margin-right: 0.3rem;
	font-weight: 600;
	color: var(--tpc-fg);
}

/* ---------- retailer listing ---------- */

.tpc-retailers { container-type: normal; }

.tpcr__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.9rem;
}

.tpcr__search {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	flex: 1 1 18rem;
}

.tpcr__search span {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--tpc-muted);
}

.tpcr__search input {
	padding: 0.55rem 0.7rem;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--tpc-fg);
	background: var(--tpc-bg);
	border: 1px solid var(--tpc-line);
	border-radius: 7px;
}

.tpcr__count {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--tpc-muted);
}

.tpcr__table { white-space: nowrap; }
.tpc td.tpcr__num { text-align: right; font-variant-numeric: tabular-nums; }
.tpcr__unknown { color: var(--tpc-muted); font-style: italic; }

.tpcr__links a {
	margin-right: 0.6rem;
	font-size: 0.8125rem;
	color: var(--tpc-accent);
}

/* ---------- campaign finance listing ---------- */

.tpc-donations { container-type: normal; }

/* The matching rule is stated before any number is shown, because on this
   subject the method is the thing that makes the numbers worth anything. */
.tpcd__rule {
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.1rem;
	font-size: 0.875rem;
	line-height: 1.55;
	border: 1px solid var(--tpc-line);
	border-left: 4px solid var(--tpc-accent);
	border-radius: var(--tpc-radius);
}

.tpcd__rule--quiet {
	margin-top: 1.1rem;
	border-left-color: var(--tpc-muted);
}

.tpcd__rule p {
	margin: 0 0 0.5rem;
}

.tpcd__rule p:last-child {
	margin-bottom: 0;
}

.tpcd__rule-title {
	font-weight: 700;
}

.tpcd__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.9rem;
}

.tpcd__count {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--tpc-muted);
}

.tpcd__table { white-space: nowrap; }

/* Company and role read as text; committees, money and years read as figures. */
.tpc .tpcd__table td:nth-child(n+3),
.tpc .tpcd__table th:nth-child(n+3) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.tpc .tpcd__recipients td:nth-child(2),
.tpc .tpcd__recipients th:nth-child(2) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Two columns only, so it would otherwise shrink to the width of the longest
   name and float in the middle of the panel. */
.tpc .tpcd__recipients {
	min-width: min(100%, 30rem);
	white-space: normal;
}

.tpcd__detail {
	margin-bottom: 0.5rem;
	border: 1px solid var(--tpc-line);
	border-radius: var(--tpc-radius);
}

.tpcd__detail summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem 1rem;
	padding: 0.7rem 1rem;
	cursor: pointer;
}

.tpcd__detail-name {
	font-size: 0.9375rem;
	font-weight: 600;
}

.tpcd__detail-sum {
	font-size: 0.8125rem;
	color: var(--tpc-muted);
	font-variant-numeric: tabular-nums;
}

.tpcd__detail > *:not(summary) {
	margin-left: 1rem;
	margin-right: 1rem;
}

.tpcd__detail > *:last-child {
	margin-bottom: 1rem;
}

.tpcd__note {
	margin: 0 0 0.6rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--tpc-muted);
}

.tpcd__h {
	margin: 0.9rem 0 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tpc-muted);
}

.tpcd__filers {
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
}

.tpcd__filers li {
	margin-bottom: 0.45rem;
}

.tpcd__filer-name {
	display: block;
	font-size: 0.875rem;
}

/* The filer number is the whole point of printing this: it is the handle a
   reader uses to pull the same record from the TEC and check the attribution. */
.tpcd__filer-meta {
	display: block;
	font-size: 0.75rem;
	color: var(--tpc-muted);
	font-variant-numeric: tabular-nums;
}

.tpcd__cycles {
	margin-bottom: 0.6rem;
	font-size: 0.75rem;
}

.tpcd__cycle {
	display: grid;
	grid-template-columns: 3.2rem 1fr 5.5rem;
	align-items: center;
	gap: 0.6rem;
	padding: 2px 0;
}

.tpcd__cycle-year {
	color: var(--tpc-muted);
	font-variant-numeric: tabular-nums;
}

.tpcd__cycle-track {
	height: 12px;
	background: var(--tpc-soft);
	border-radius: 2px;
	overflow: hidden;
}

.tpcd__cycle-bar {
	display: block;
	height: 100%;
	background: var(--tpc-accent);
}

.tpcd__cycle-val {
	text-align: right;
	color: var(--tpc-muted);
	font-variant-numeric: tabular-nums;
}