/* Chill Drink — one hand-written stylesheet, mobile first. */

:root {
	--ink: #241a12;
	--muted: #6b5c50;
	--line: #e2d8cf;
	--bg: #faf7f4;
	--card: #ffffff;
	--brand: #b4632a;
	--brand-ink: #ffffff;
	--good: #1f7a4d;
	--warn: #b3541e;
	--bad: #a3261e;
	--radius: 10px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--ink);
	background: var(--bg);
}

a {
	color: var(--brand);
}

.topbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	padding: 0.75rem 1rem;
	background: var(--card);
	border-bottom: 1px solid var(--line);
}

.brand {
	font-weight: 700;
	text-decoration: none;
	color: var(--ink);
}

.topbar nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	flex: 1;
}

.topbar nav a {
	text-decoration: none;
	color: var(--muted);
}

.topbar form {
	margin: 0;
}

main {
	max-width: 60rem;
	margin: 0 auto;
	padding: 1rem;
}

h1 {
	font-size: 1.35rem;
	margin: 0 0 0.75rem;
}

h2 {
	font-size: 1.1rem;
	margin: 1.25rem 0 0.5rem;
}

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1rem;
}

.stack {
	display: grid;
	gap: 0.75rem;
}

label {
	display: grid;
	gap: 0.25rem;
	color: var(--muted);
}

input,
select,
textarea {
	font: inherit;
	color: var(--ink);
	padding: 0.55rem 0.6rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	width: 100%;
}

button {
	font: inherit;
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--brand);
	border-radius: 8px;
	background: var(--brand);
	color: var(--brand-ink);
	cursor: pointer;
}

button.ghost {
	background: transparent;
	color: var(--brand);
}

table {
	width: 100%;
	border-collapse: collapse;
	background: var(--card);
}

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

.error {
	color: var(--bad);
}

.muted {
	color: var(--muted);
}

.badge {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	font-size: 0.85rem;
	border: 1px solid var(--line);
	background: #fff;
}

.badge-paid {
	color: var(--good);
	border-color: var(--good);
}

.badge-partial {
	color: var(--warn);
	border-color: var(--warn);
}

.badge-unpaid {
	color: var(--bad);
	border-color: var(--bad);
}

.quota {
	display: grid;
	gap: 0.25rem;
}

.quota-bar {
	height: 8px;
	border-radius: 999px;
	background: var(--line);
	overflow: hidden;
}

.quota-bar > span {
	display: block;
	height: 100%;
	background: var(--brand);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

.inline-check {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	align-items: center;
	color: var(--ink);
}

.inline-check input {
	width: auto;
}

@media print {
	.topbar,
	.no-print {
		display: none;
	}

	body {
		background: #fff;
	}
}