/* Old-school FileGooi look: grey page, blue links, centred, no frills. */
:root {
	--bg: #EEEEEE;
	--text: #000000;
	--link: #0000FF;
	--box: #FFFFFF;
	--border: #AAAAAA;
	--accent: #B0C4DE; /* LightSteelBlue, as on the old donation box */
}
* { box-sizing: border-box; }
body {
	margin: 0;
	padding: 0 16px;
	background: var(--bg);
	color: var(--text);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.4;
}
a { color: var(--link); }
header, footer { text-align: center; }
header { padding: 16px 0 8px; }
.logo { max-width: 100%; height: auto; }
.tagline { margin: 4px 0 16px; }
main { max-width: 640px; margin: 0 auto; }
.box {
	background: var(--box);
	border: 1px solid var(--border);
	border-radius: 15px;
	padding: 16px;
	margin: 0 0 16px;
	text-align: center;
}
footer { font-size: 12px; padding: 24px 0; }
input, button, select, textarea { font: inherit; max-width: 100%; }
nav { margin-bottom: 8px; }
form.inline { display: inline; }
button.link { background: none; border: none; padding: 0; color: var(--link); text-decoration: underline; cursor: pointer; }
form.stacked { max-width: 360px; margin: 0 auto; text-align: left; }
form.stacked label { display: block; margin: 0 0 12px; }
form.stacked input:not([type=checkbox]) { display: block; width: 100%; padding: 6px; margin-top: 2px; }
form.stacked label.check { display: flex; gap: 6px; align-items: baseline; }
form.stacked button { padding: 6px 16px; }
.problem { border-color: #CC0000; color: #CC0000; }
.bar { width: 100%; max-width: 400px; height: 14px; margin: 0 auto 8px; border: 1px solid var(--border); background: var(--box); }
.bar > div { width: 0; height: 100%; background: var(--accent); }
table.stats { margin: 0 auto; text-align: left; }
table.stats td:first-child { padding-right: 8px; }
p.link input { width: 100%; max-width: 480px; padding: 6px; text-align: center; }
a.button, button { display: inline-block; padding: 6px 16px; }
a.button { border: 1px solid var(--border); border-radius: 4px; background: var(--box); text-decoration: none; }
main:has(.wide) { max-width: 960px; }
table.files { width: 100%; border-collapse: collapse; text-align: left; }
table.files th, table.files td { padding: 4px 6px; border-bottom: 1px solid var(--bg); vertical-align: top; }
table.files th { background: var(--accent); }
table.files tr.gone { color: #888; }
table.files td.actions, table.files td[data-label="Size"] { white-space: nowrap; }
/* Phones: each file becomes a little card. */
@media (max-width: 640px) {
	table.files thead { display: none; }
	table.files tr { display: block; border-bottom: 1px solid var(--border); padding: 6px 0; }
	table.files td { display: block; border: none; padding: 2px 0; }
	table.files td[data-label]::before { content: attr(data-label) ": "; font-weight: bold; }
}
form.bay label { display: block; max-width: 360px; margin: 0 auto 12px; text-align: left; }
form.bay label input { display: block; width: 100%; padding: 6px; margin-top: 2px; }
form.stacked textarea { display: block; width: 100%; padding: 6px; margin-top: 2px; }
.colours { display: flex; gap: 16px; flex-wrap: wrap; }
.colours input[type=color] { width: 64px !important; height: 32px; padding: 0 !important; }
.saved { color: #006600; font-weight: bold; }
table.compare { margin: 0 auto 16px; max-width: 520px; }
table.compare td:first-child { font-weight: bold; }
.plans { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
@media (max-width: 640px) { table.compare thead { display: table-header-group; } table.compare tr { display: table-row; } table.compare td { display: table-cell; } }
/* Honeypot: off-screen for people, still there for bots. */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.box.text { text-align: left; }
.box.text h2 { text-align: center; }
.box.text ul, .box.text ol { padding-left: 20px; }
.box.text li { margin-bottom: 4px; }
.poll { font-size: 11px; color: #777; margin-bottom: 8px; }
.poll button.link { text-decoration: none; font-size: 12px; }