/* Best Savings Core - Material 3 tokens, site-wide light/dark theming, base components. No framework.
 * Theme choice: html[data-theme="light|dark"] set by the toggle; without it the OS preference applies.
 * The theme's own palette (Twenty Twenty-Five presets) is mapped onto these tokens so the whole site follows. */

html:root {
	--md-primary: #2f6a3f;
	--md-on-primary: #ffffff;
	--md-primary-container: #b3f1bc;
	--md-on-primary-container: #00210b;
	--md-surface: #f7fbf3;
	--md-surface-container-low: #f1f5ed;
	--md-surface-container: #ebefe7;
	--md-surface-container-high: #e5e9e1;
	--md-on-surface: #181d18;
	--md-on-surface-variant: #414941;
	--md-outline: #717970;
	--md-outline-variant: #c1c9be;
	--md-error-container: #ffdad6;
	--md-on-error-container: #410002;
	--md-warn-container: #ffdcbe;
	--md-on-warn-container: #2c1600;
	--md-info-container: #d3e4ff;
	--md-on-info-container: #001c38;
	--md-radius-s: 8px;
	--md-radius-m: 12px;
	--md-radius-l: 16px;
	--md-radius-full: 999px;
	--md-space: 8px;
	color-scheme: light;
}

html:root[data-theme="dark"] {
	--md-primary: #98d5a1;
	--md-on-primary: #003916;
	--md-primary-container: #145129;
	--md-on-primary-container: #b3f1bc;
	--md-surface: #101510;
	--md-surface-container-low: #181d18;
	--md-surface-container: #1c211c;
	--md-surface-container-high: #262b26;
	--md-on-surface: #dfe4dc;
	--md-on-surface-variant: #c1c9be;
	--md-outline: #8b9389;
	--md-outline-variant: #414941;
	--md-error-container: #93000a;
	--md-on-error-container: #ffdad6;
	--md-warn-container: #653e00;
	--md-on-warn-container: #ffdcbe;
	--md-info-container: #00497d;
	--md-on-info-container: #d3e4ff;
	color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
	html:root:not([data-theme="light"]) {
		--md-primary: #98d5a1;
		--md-on-primary: #003916;
		--md-primary-container: #145129;
		--md-on-primary-container: #b3f1bc;
		--md-surface: #101510;
		--md-surface-container-low: #181d18;
		--md-surface-container: #1c211c;
		--md-surface-container-high: #262b26;
		--md-on-surface: #dfe4dc;
		--md-on-surface-variant: #c1c9be;
		--md-outline: #8b9389;
		--md-outline-variant: #414941;
		--md-error-container: #93000a;
		--md-on-error-container: #ffdad6;
		--md-warn-container: #653e00;
		--md-on-warn-container: #ffdcbe;
		--md-info-container: #00497d;
		--md-on-info-container: #d3e4ff;
		color-scheme: dark;
	}
}

/* Map the block theme's palette onto the tokens so header, footer and content all switch together. */
html:root {
	--wp--preset--color--base: var(--md-surface);
	--wp--preset--color--contrast: var(--md-on-surface);
	--wp--preset--color--accent-1: var(--md-primary-container);
	--wp--preset--color--accent-2: var(--md-surface-container-high);
	--wp--preset--color--accent-3: var(--md-primary);
	--wp--preset--color--accent-4: var(--md-on-surface-variant);
	--wp--preset--color--accent-5: var(--md-surface-container);
	--wp--preset--color--accent-6: var(--md-outline-variant);
}
body { background-color: var(--md-surface); color: var(--md-on-surface); }
a { color: var(--md-primary); }

/* Theme toggle */
.bs-theme-toggle {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin-left: 8px;
	border: 0;
	border-radius: var(--md-radius-full);
	background: transparent;
	color: var(--md-on-surface-variant);
	cursor: pointer;
	flex: none;
}
.bs-theme-toggle:hover { background: var(--md-surface-container-high); color: var(--md-on-surface); }
.bs-theme-toggle:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.bs-theme-toggle svg { width: 22px; height: 22px; }
.bs-theme-toggle .bs-icon-sun { display: none; }
html[data-theme="dark"] .bs-theme-toggle .bs-icon-sun { display: block; }
html[data-theme="dark"] .bs-theme-toggle .bs-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .bs-theme-toggle .bs-icon-sun { display: block; }
	html:not([data-theme="light"]) .bs-theme-toggle .bs-icon-moon { display: none; }
}

/* App components */
.bs-app { color: var(--md-on-surface); font-variant-numeric: tabular-nums; font-size: 1rem; line-height: 1.5; }
.bs-app *, .bs-app *::before, .bs-app *::after { box-sizing: border-box; }
.bs-app p { margin: 0 0 calc(var(--md-space) * 2); }
.bs-muted { color: var(--md-on-surface-variant); font-size: .875rem; }
.bs-lead { font-size: 1.125rem; color: var(--md-on-surface-variant); max-width: 65ch; }

.bs-card {
	background: var(--md-surface-container);
	border-radius: var(--md-radius-l);
	padding: calc(var(--md-space) * 3);
	margin: 0 0 calc(var(--md-space) * 3);
}
.bs-card > :first-child { margin-top: 0; }
.bs-card > :last-child { margin-bottom: 0; }

.bs-section-title { font-size: 1.25rem; font-weight: 600; margin: calc(var(--md-space) * 4) 0 calc(var(--md-space) * 1.5); }

.bs-form { display: flex; flex-wrap: wrap; gap: calc(var(--md-space) * 2); align-items: flex-end; }
.bs-field { display: flex; flex-direction: column; gap: 6px; min-width: min(100%, 260px); flex: 1 1 260px; }
.bs-field label { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: var(--md-on-surface-variant); }
.bs-select {
	appearance: none;
	font: inherit;
	font-size: 1rem;
	color: var(--md-on-surface);
	background-color: var(--md-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23717970' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	border: 1px solid var(--md-outline);
	border-radius: var(--md-radius-s);
	padding: 12px 40px 12px 14px;
	min-height: 52px;
	width: 100%;
	text-overflow: ellipsis;
}
.bs-select:hover { border-color: var(--md-on-surface); }
.bs-select:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 0; border-color: var(--md-primary); }
.bs-select option, .bs-select optgroup { background: var(--md-surface); color: var(--md-on-surface); }
.bs-button {
	font: inherit;
	font-weight: 600;
	font-size: 1rem;
	background: var(--md-primary);
	color: var(--md-on-primary);
	border: 0;
	border-radius: var(--md-radius-full);
	padding: 0 28px;
	min-height: 52px;
	cursor: pointer;
}
.bs-button:hover { box-shadow: 0 1px 3px rgba(0,0,0,.25); filter: brightness(1.06); }
.bs-button:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

.bs-table-wrap { margin: 0 0 calc(var(--md-space) * 3); border: 1px solid var(--md-outline-variant); border-radius: var(--md-radius-m); overflow: hidden; }
.bs-table { width: 100%; border-collapse: collapse; font-size: .9375rem; background: var(--md-surface); }
.bs-table caption { text-align: left; font-weight: 600; font-size: 1.0625rem; padding: 14px 16px; background: var(--md-surface-container-low); border-bottom: 1px solid var(--md-outline-variant); caption-side: top; }
.bs-table th, .bs-table td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--md-outline-variant); color: var(--md-on-surface); }
.bs-table tbody tr:last-child > * { border-bottom: 0; }
.bs-table thead th { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--md-on-surface-variant); background: var(--md-surface-container); }
.bs-table th[scope="row"] { font-weight: 600; }
.bs-table tbody tr:hover > * { background: var(--md-surface-container-low); }

/* Narrow screens: rows become stacked cards; each cell shows its column label. */
@media (max-width: 640px) {
	.bs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.bs-table, .bs-table caption, .bs-table tbody, .bs-table tr, .bs-table th, .bs-table td { display: block; width: 100%; }
	.bs-table tr { padding: 12px 16px; border-bottom: 1px solid var(--md-outline-variant); }
	.bs-table tbody tr:last-child { border-bottom: 0; }
	.bs-table th, .bs-table td { border: 0; padding: 4px 0; }
	.bs-table td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--md-on-surface-variant); margin-bottom: 2px; }
	.bs-table th[scope="row"] { font-size: 1.0625rem; padding-bottom: 8px; }
	.bs-table td[data-label="Result"], .bs-table td[data-label="Confidence"], .bs-table td[data-label="Status"], .bs-table td[data-label="Membership"] { display: inline-block; width: auto; margin-right: 20px; }
	.bs-table tbody tr:hover > * { background: transparent; }
}

.bs-chip {
	display: inline-flex;
	align-items: center;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1;
	padding: 6px 10px;
	border-radius: var(--md-radius-s);
	border: 1px solid var(--md-outline);
	color: var(--md-on-surface-variant);
	white-space: nowrap;
}
.bs-chip--good { background: var(--md-primary-container); color: var(--md-on-primary-container); border-color: transparent; }
.bs-chip--warn { background: var(--md-warn-container); color: var(--md-on-warn-container); border-color: transparent; }
.bs-chip--bad  { background: var(--md-error-container); color: var(--md-on-error-container); border-color: transparent; }
.bs-chip--info { background: var(--md-info-container); color: var(--md-on-info-container); border-color: transparent; }

.bs-disclosure {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border-radius: var(--md-radius-m);
	padding: 14px 16px;
	margin: 0 0 calc(var(--md-space) * 3);
	background: var(--md-surface-container);
	color: var(--md-on-surface);
	font-size: .875rem;
	line-height: 1.5;
}
.bs-disclosure svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.bs-disclosure--safety { background: var(--md-error-container); color: var(--md-on-error-container); }
.bs-disclosure--community { background: var(--md-info-container); color: var(--md-on-info-container); }
.bs-cite { display: block; margin-top: 2px; font-size: .8125rem; color: var(--md-on-surface-variant); }
.bs-cite a { color: inherit; }
.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal; }