/************************************************************************************
DESIGN TOKENS
Colours are defined once here. Dark values apply automatically when the visitor's
device is set to a dark theme.
All text/background pairings below meet WCAG AA (4.5:1) or better.
*************************************************************************************/
:root {
	--surface: #ffffff;
	--surface-alt: #f5f7fa;
	--text: #1d2733;
	--text-muted: #4a5868;
	--border: #cfd7e1;
	--link: #0a58ca;
	--focus: #0a58ca;
	--income: #0b6e4f;
	--expenditure: #9a3412;
	--track: #cfd7e1;
	--page-bg: #e9edf2;
	--notice-bg: #fff6df;
	--notice-border: #a76b00;

	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--page-width: 72rem;
	--radius: 10px;
	--tap: 2.75rem; /* minimum comfortable touch target (44px) */

	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--surface: #18222f;
		--surface-alt: #1f2b3a;
		--text: #e6ebf1;
		--text-muted: #a9b6c5;
		--border: #33425a;
		--link: #8dbdff;
		--focus: #8dbdff;
		--income: #5fd3a1;
		--expenditure: #ffa77a;
		--track: #3a4a60;
		--page-bg: #0e151e;
		--notice-bg: #2c2410;
		--notice-border: #e0a53a;
	}
}

/************************************************************************************
RESET
*************************************************************************************/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, figure, fieldset, legend {
	margin: 0;
	padding: 0;
}

fieldset {
	border: 0;
	min-width: 0;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
}

/* HTML5 elements to block (older browsers) */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
	display: block;
}

/************************************************************************************
BASE
*************************************************************************************/
body {
	background: var(--page-bg);
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--text);
	padding: 0 1rem 2rem;
}

a {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
a:hover {
	text-decoration-thickness: 2px;
}

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 4px;
}

p {
	margin: 0 0 1.1em;
	max-width: 70ch;
}

h1, h2, h3, h4, h5 {
	font-family: var(--font);
	line-height: 1.25;
	font-weight: 700;
	margin-bottom: 0.5em;
}
h1 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem); }
h2 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); }
h3 { font-size: 1.15rem; }
h4, h5 { font-size: 1rem; }

/* Forms */
input,
select,
textarea,
button {
	font: inherit;
	color: var(--text);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
	width: 100%;
	max-width: 32rem;
	min-height: var(--tap);
	padding: 0.5rem 0.75rem;
	background: var(--surface);
	border: 1px solid var(--text-muted);
	border-radius: 6px;
}
textarea {
	height: 8em;
	max-width: 100%;
}

input[type="submit"],
button {
	min-height: var(--tap);
	padding: 0.5rem 1.25rem;
	background: var(--link);
	color: var(--surface);
	border: 0;
	border-radius: 6px;
	font-weight: 700;
	cursor: pointer;
}
input[type="submit"]:hover,
button:hover {
	filter: brightness(1.1);
}

/* Tables */
.table-wrap {
	overflow-x: auto;
	max-width: 100%;
}
table {
	border-collapse: collapse;
}
th, td {
	border: 1px solid var(--border);
	padding: 0.5rem 0.75rem;
	text-align: left;
	vertical-align: top;
}
th {
	background: var(--surface-alt);
	font-weight: 700;
}

.gravatar {
	float: left;
	margin: 0 0.4rem 0.4rem 0;
}

/* Text only visible to screen readers */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* "Skip to content" link, visible only when focused */
.skip-link {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--surface);
	color: var(--link);
	border: 2px solid var(--focus);
	border-radius: 6px;
}
.skip-link:focus {
	top: 1rem;
}

/************************************************************************************
DISPLAY HELPERS
*************************************************************************************/
.clear { clear: both; }

.half-left,
.half-right {
	width: 100%;
}
@media (min-width: 48rem) {
	.half-left,
	.half-right {
		width: 48%;
		float: left;
	}
	.half-left { margin-right: 2%; }
}

.large  { font-size: large; }
.larger { font-size: larger; }

.home      { border: 3px solid var(--border); }
.new       { border: 3px dashed var(--link); }
.newanswer { border: 3px dashed var(--income); }

/************************************************************************************
SITE STRUCTURE (shared with the other pages)
*************************************************************************************/
#masthead,
#intro,
.question,
#ask,
#categories,
#login,
#register,
#colophon,
#sources {
	max-width: var(--page-width);
	margin: 0 auto 1rem;
	padding: 1.25rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

#masthead {
	margin-top: 1rem;
}
#masthead h1 {
	font-family: Georgia, serif;
	font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.25rem);
	margin-bottom: 0;
}

#colophon {
	clear: both;
	color: var(--text-muted);
}

.question p {
	margin-bottom: 0;
}

#questions h2 {
	display: none;
}

/* Top menu: wraps onto several lines on narrow screens, large tap targets */
#topmenu {
	max-width: var(--page-width);
	margin: 1rem auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}
#topmenu ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}
#topmenu ul li {
	list-style: none;
}
#topmenu > ul > li > a {
	display: block;
	padding: 0.75rem 1.25rem;
	min-height: var(--tap);
	line-height: 1.5;
	color: var(--text);
	text-decoration: none;
	font-weight: 600;
}
#topmenu > ul > li > a:hover,
#topmenu > ul > li > a:focus-visible {
	background: var(--link);
	color: var(--surface);
	text-decoration: none;
}

#main {
	max-width: var(--page-width);
	margin: 0 auto;
}

/************************************************************************************
SHOW / HIDE
*************************************************************************************/
.showhide {
	display: none;
}

/************************************************************************************
THE BUDGETRON
*************************************************************************************/
.budgetron {
	max-width: var(--page-width);
	margin: 0 auto;
}

.budget-header {
	margin: 1rem 0 1rem;
	padding: 1.25rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.budget-header p:last-child {
	margin-bottom: 0;
}

.budget-header .hint {
	color: var(--text-muted);
}

/* Totals bar: stays on screen while the sliders are moved */
.summary {
	position: sticky;
	top: 0;
	z-index: 10;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	margin: 0 -1rem 1.25rem;
	padding: 0.6rem 1rem;
	background: var(--surface);
	border-bottom: 2px solid var(--border);
}
.summary-item {
	margin: 0;
	min-width: 0;
}
.summary-label {
	display: block;
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--text-muted);
}
.summary-value {
	display: block;
	font-size: 0.95rem;
	line-height: 1.3;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.summary-sub {
	display: block;
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}
.summary-income      { border-left: 4px solid var(--income);      padding-left: 0.6rem; }
.summary-expenditure { border-left: 4px solid var(--expenditure); padding-left: 0.6rem; }
.summary-deficit     { border-left: 4px solid var(--text);        padding-left: 0.6rem; }
.summary-you         { border-left: 4px solid var(--link);        padding-left: 0.6rem; }

/* On narrow screens "Your tax" sits on a second row, on one line, to keep the bar short */
.summary-you {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5rem;
}
.summary-you .summary-label,
.summary-you .summary-value,
.summary-you .summary-sub {
	display: inline;
}

@media (min-width: 40rem) {
	.summary {
		grid-template-columns: repeat(4, 1fr);
		margin: 0 0 1.25rem;
		padding: 0.75rem 1rem;
		border: 2px solid var(--border);
		border-radius: var(--radius);
		top: 0.5rem;
	}
	.summary-you {
		grid-column: auto;
		display: block;
	}
	.summary-you .summary-label,
	.summary-you .summary-value,
	.summary-you .summary-sub {
		display: block;
	}
	.summary-label { font-size: 0.9rem; }
	.summary-value { font-size: 1.25rem; }
}

/* Income and expenditure panels */
.panel {
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-top-width: 6px;
	border-radius: var(--radius);
}
.panel-income      { border-top-color: var(--income); }
.panel-expenditure { border-top-color: var(--expenditure); }
.panel-income h2      { color: var(--income); }
.panel-expenditure h2 { color: var(--expenditure); }

.panel h3 {
	margin: 1.5rem 0 0.5rem;
}

.panel-intro {
	color: var(--text-muted);
}

.stats {
	width: 100%;
	max-width: 44rem;
	margin-bottom: 1rem;
	font-variant-numeric: tabular-nums;
}
.stats caption {
	text-align: left;
}

/* Sliders */
.slider-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 0.75rem;
}

.slider {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.15rem;
	padding: 0.75rem 1rem 0.25rem;
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: 8px;
}
.slider-name {
	font-weight: 700;
	line-height: 1.3;
}
.slider-value {
	min-height: 1.5em;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.slider-rate {
	color: var(--text);
	font-size: 1.25rem;
	font-weight: 700;
}

.slider input[type="range"] {
	--accent: var(--income);
	width: 100%;
	height: var(--tap);
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	accent-color: var(--accent);
}
.panel-expenditure .slider input[type="range"] {
	--accent: var(--expenditure);
}

.slider input[type="range"]::-webkit-slider-runnable-track {
	height: 0.5rem;
	background: var(--track);
	border-radius: 999px;
}
.slider input[type="range"]::-moz-range-track {
	height: 0.5rem;
	background: var(--track);
	border-radius: 999px;
}
.slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.75rem;
	height: 1.75rem;
	margin-top: -0.625rem; /* centres the thumb on the track */
	background: var(--accent);
	border: 3px solid var(--surface);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--accent);
}
.slider input[type="range"]::-moz-range-thumb {
	width: 1.25rem;
	height: 1.25rem;
	background: var(--accent);
	border: 3px solid var(--surface);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--accent);
}
.slider input[type="range"]:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 0;
	border-radius: 999px;
}

/* Flow diagrams: original figures on the left, the visitor's figures on the right.
   Each diagram sticks below the totals bar while its own section is on screen, then
   scrolls away with it so that the next section's diagram takes its place. */
.flow-panel {
	position: sticky;
	top: var(--flow-top, 0px);
	z-index: 9;
	margin: 0 0 0.75rem;
	padding: 0.5rem 1rem 0.25rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.flow-panel figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin-bottom: 0.25rem;
	font-size: 1rem;
	font-weight: 700;
}
.flow-toggle {
	min-height: 2rem;
	padding: 0.15rem 0.75rem;
	background: transparent;
	color: var(--link);
	border: 1px solid var(--border);
	font-size: 0.9rem;
	font-weight: 600;
}
.flow-toggle:hover {
	filter: none;
	background: var(--surface-alt);
}
.flows-hidden .flow-panel {
	position: static;
}
.flows-hidden .flow-body {
	display: none;
}
.flows-hidden .flow-panel figcaption {
	margin-bottom: 0.25rem;
}
.flow-panel svg {
	display: block;
	max-width: 100%;
	height: auto;
}
.flow-panel text {
	font: 12px/1.2 var(--font);
	fill: var(--text-primary);
}
.flow-panel text.flow-muted {
	fill: var(--text-secondary);
}

#sources {
	font-size: 0.9rem;
	color: var(--text-muted);
}
#sources p:last-child {
	margin-bottom: 0;
}

/************************************************************************************
TABBED CONTENT (tabber)
*************************************************************************************/
.tabberlive .tabbertabhide {
	display: none;
}
.tabberlive {
	margin-top: 1em;
}

ul.tabbernav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0.25rem 0 0;
	border-bottom: 2px solid var(--border);
	font-weight: 700;
}
ul.tabbernav li {
	list-style: none;
	margin: 0;
}
ul.tabbernav li a {
	display: block;
	padding: 0.6rem 1rem;
	min-height: var(--tap);
	background: var(--link);
	border: 1px solid var(--link);
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	text-decoration: none;
}
ul.tabbernav li a:link,
ul.tabbernav li a:visited {
	color: var(--surface);
}
ul.tabbernav li a:hover {
	filter: brightness(1.15);
}
ul.tabbernav li.tabberactive a,
ul.tabbernav li.tabberactive a:link,
ul.tabbernav li.tabberactive a:visited,
ul.tabbernav li.tabberactive a:hover {
	background: var(--surface);
	color: var(--link);
	border-color: var(--border);
	margin-bottom: -2px;
	padding-bottom: calc(0.6rem + 2px);
}

.tabberlive .tabbertab {
	padding: 1rem;
	border: 1px solid var(--border);
	border-top: 0;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertab h3 {
	display: none;
}
.tabberlive#tab2 .tabbertab {
	height: 200px;
	overflow: auto;
}

/************************************************************************************
USER PREFERENCES
*************************************************************************************/
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/************************************************************************************
RESET AND SHARE BUTTONS, EXPORT DIALOG
*************************************************************************************/
body {
	padding-bottom: 5rem;
}

.page-actions {
	position: fixed;
	right: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5rem;
}
.page-actions button {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.button-secondary {
	background: var(--surface);
	color: var(--link);
	border: 2px solid var(--link);
}
.button-secondary:hover {
	filter: none;
	background: var(--surface-alt);
}

.export-dialog {
	width: min(92vw, 44rem);
	max-height: 92vh;
	padding: 1rem;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.export-dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}
.export-dialog img {
	display: block;
	max-width: 100%;
	max-height: 60vh;
	margin: 0 auto 1rem;
	border: 1px solid var(--border);
}
.export-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.export-buttons [hidden] {
	display: none;
}