:root {
	--text: #1a1a1a;
	--muted: #555;
	--faint: #6b6b6b;
	--border: #e0e0e0;
	--border-input: #ccc;
	--surface-tint: #f7f7f7;
	--link: #1a5fb4;
	--link-hover: #154a8c;
	--warn-bg: #fff8e1;
	--warn-border: #f0d78c;
	--info-bg: #eef4ff;
	--info-border: #c6d9f7;
	--good: #087a08;
	--good-bg: #f4faf4;
	--good-border: #cfe8cf;
	--custom-bg: #fbf9f2;
	--custom-border: #ece5d0;
	--custom-label: #8a6d00;
	--cliff: #a33b00;
	--condition: #6a4c93;
	--energy: #2a78d6;
	--delivery: #eb6834;
}

body { font-family: system-ui, sans-serif; padding: 0 1rem; color: var(--text); }
body.page-cost { max-width: 1600px; margin: 3rem auto; }
body.page-plans { max-width: 900px; margin: 3rem auto; }
body.page-doc { max-width: 700px; margin: 3rem auto; line-height: 1.6; }
body.page-error { max-width: 700px; margin: 5rem auto; text-align: center; }

h1 { margin-bottom: 0.25rem; }
h2 { margin-top: 2rem; font-size: 1.15rem; }
p.tagline { color: var(--muted); margin-top: 0; }
nav.crumb { font-size: 0.9rem; margin-top: 0.5rem; }
nav.crumb a { color: var(--text); }
a { color: var(--link); }
p.updated { color: var(--faint); font-size: 0.85rem; }

/* brand */
.brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--text); }
.brand:hover .brand-name { color: var(--link); }
.brand-mark { display: block; flex-shrink: 0; }
.brand-name { font-weight: 800; letter-spacing: -0.02em; }
h1 .brand-name { font-size: 1.9rem; }

.brand-compact { margin-bottom: 0.75rem; }
.brand-compact .brand-name { font-size: 0.95rem; font-weight: 700; color: var(--faint); }
.brand-compact:hover .brand-name { color: var(--link); }

.notice { background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 4px; padding: 0.6rem 0.9rem; margin-top: 1rem; font-size: 0.9rem; }
.hint { background: var(--info-bg); border: 1px solid var(--info-border); border-radius: 4px; padding: 0.6rem 0.9rem; margin-top: 1rem; font-size: 0.9rem; }

/* filter forms (cost + plans) */
.basic-filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-top: 1.5rem; padding: 1rem; background: var(--surface-tint); border-radius: 6px; }
.basic-filters div { display: flex; flex-direction: column; gap: 0.25rem; }
.basic-filters label { font-size: 0.8rem; color: var(--muted); }
.basic-filters input[type="search"], .basic-filters select { font-size: 1rem; padding: 0.4rem 0.6rem; border: 1px solid var(--border-input); border-radius: 4px; }
.basic-filters input[type="search"] { width: 8rem; }
.basic-filters div.tou-toggle { flex-direction: row; align-items: center; }
.tou-toggle label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text); cursor: help; }

/* results table (cost + plans) */
.table-scroll { overflow-x: auto; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
th { color: var(--muted); font-weight: 600; }
.price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.links { white-space: nowrap; }
.links a { font-size: 0.8rem; text-decoration: none; }
.links .efl { color: var(--muted); margin-right: 0.6rem; text-decoration: underline dotted; }
.links .enroll { background: var(--link); color: #fff; padding: 0.3rem 0.7rem; border-radius: 4px; }
.links .enroll:hover { background: var(--link-hover); }
.provider-logo { height: 20px; width: auto; max-width: 70px; object-fit: contain; vertical-align: middle; margin-right: 0.4rem; }
.provider-link { color: inherit; text-decoration: none; }
.provider-link:hover { text-decoration: underline; }

.tou-badge { display: block; margin-top: 0.3rem; font-size: 0.75rem; font-weight: 600; color: var(--link); cursor: help; }
.condition-badge { display: block; margin-top: 0.3rem; font-size: 0.75rem; font-weight: 600; color: var(--condition); cursor: help; }
.condition-hint { display: block; margin-top: 0.3rem; font-size: 0.72rem; font-style: italic; color: var(--faint); cursor: help; }

.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; color: var(--muted); font-size: 0.9rem; }
.pager a { color: var(--text); text-decoration: none; padding: 0.4rem 0.8rem; border: 1px solid var(--border-input); border-radius: 4px; cursor: pointer; }
.pager a.disabled { color: #ccc; border-color: #eee; pointer-events: none; }

footer, .site-footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--faint); }
footer .disclaimer, .site-footer .disclaimer { margin: 0 0 0.6rem; }
footer a, .site-footer a { color: var(--faint); margin-right: 1rem; text-decoration: none; }
footer a:hover, .site-footer a:hover { text-decoration: underline; }

@media (max-width: 640px) {
	body.page-cost, body.page-plans, body.page-doc { margin: 1.5rem auto; }
	body.page-error { margin: 3rem auto; }

	.basic-filters { flex-direction: column; align-items: stretch; padding: 0.85rem; }
	.basic-filters input[type="search"], .basic-filters select { width: 100%; box-sizing: border-box; }
	.basic-filters div.tou-toggle { flex-direction: row; }

	.pager { flex-wrap: wrap; gap: 0.5rem; }

	th, td { padding: 0.5rem 0.6rem; font-size: 0.85rem; }

	footer a, .site-footer a { display: inline-block; margin-bottom: 0.4rem; }
}