@font-face {
	font-family: "Bricolage Grotesque";
	src: url("/static/fonts/bricolage-grotesque-latin-wght.woff2") format("woff2");
	font-weight: 200 800;
	font-display: swap;
}

:root {
	--bg: #f6f4ef;
	--card: #ffffff;
	--text: #1d1d1b;
	--muted: #6b6b66;
	--line: #e3e0d8;
	--accent: #1f6f5c;
	--accent-soft: color-mix(in srgb, var(--accent) 14%, var(--card));
	/* The same tint, see-through, for the nav pill that slides over the menu. */
	--accent-wash: color-mix(in srgb, var(--accent) 14%, transparent);
	/* Money keeps fixed colours whatever the theme: green you receive, red you pay. */
	--gain: #1f6f5c;
	--error: #b3261e;
	--danger-soft: #fbe9e7;
	--radius: 14px;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #141513;
		--card: #1e201d;
		--text: #ecebe6;
		--muted: #9c9b94;
		--line: #30322e;
		--accent: #5cc3a3;
		--accent-soft: color-mix(in srgb, var(--accent) 22%, var(--card));
		--accent-wash: color-mix(in srgb, var(--accent) 22%, transparent);
		--gain: #5cc3a3;
		--error: #f2877f;
		--danger-soft: #3a1f1d;
		color-scheme: dark;
	}
}

/* Personal theme colours, set on <html> by the layout (and on each swatch on
   the profile page, which is why groen has a rule of its own too). Every value has at least 4.5:1 contrast for button text and for
   coloured text on the page, in light and in dark mode. */
[data-accent="groen"] { --accent: #1f6f5c; }
[data-accent="blauw"] { --accent: #1d5fa8; }
[data-accent="petrol"] { --accent: #0e6f80; }
[data-accent="paars"] { --accent: #6b46b5; }
[data-accent="roze"] { --accent: #b0306e; }
[data-accent="oranje"] { --accent: #a8510f; }
[data-accent="mosterd"] { --accent: #8a6a00; }
[data-accent="antraciet"] { --accent: #4a5160; }

@media (prefers-color-scheme: dark) {
	[data-accent="groen"] { --accent: #5cc3a3; }
	[data-accent="blauw"] { --accent: #6aa8f0; }
	[data-accent="petrol"] { --accent: #5cc0d0; }
	[data-accent="paars"] { --accent: #a98ef0; }
	[data-accent="roze"] { --accent: #f08cbf; }
	[data-accent="oranje"] { --accent: #f2a35e; }
	[data-accent="mosterd"] { --accent: #e6c14d; }
	[data-accent="antraciet"] { --accent: #a7b0c0; }
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.45 "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-text-size-adjust: 100%;
}

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

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--card);
	position: sticky;
	top: 0;
	/* Above dimmed cards (opacity creates a stacking layer), which would
	   otherwise cover the header and the phone tab bar inside it. */
	z-index: 20;
}

.logo { text-decoration: none; color: var(--text); }

/* STREEPP with a green stroke through the middle arm of the E's.
   In Bricolage Grotesque (weight 800, line-height 1) the centre of that arm
   sits exactly halfway down the line box, measured from the rendered glyph. */
.wordmark {
	position: relative;
	display: inline-block;
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin-right: -.05em; /* cancel the letter-spacing after the last P */
}
.wordmark::after {
	content: "";
	position: absolute;
	left: -.15em;
	right: -.1em;
	top: .5em;
	height: .08em;
	transform: translateY(-50%);
	border-radius: .04em;
	background: var(--accent);
}

main {
	max-width: 560px;
	margin: 0 auto;
	padding: 16px;
}

h1 { margin: 0 0 16px; font-size: 1.6rem; }
h2 { margin: 0; font-size: 1.1rem; }
.muted { color: var(--muted); margin: 0 0 4px; font-size: .9rem; }

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	margin-bottom: 12px;
}

.narrow { max-width: 400px; margin: 32px auto; }
/* The "Nog geen account?" line under the login and register buttons. */
.narrow form + p { margin-top: 16px; }

/* Room between a page's introduction, or a hint, and the cards under it. */
main > section > p:last-child { margin-bottom: 16px; }
p.muted + .card { margin-top: 14px; }

form label {
	display: block;
	margin-bottom: 12px;
	font-weight: 600;
	font-size: .9rem;
}

input, textarea, select {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 12px;
	font: inherit;
	font-weight: 400;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 10px;
}

input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button {
	font: inherit;
	font-weight: 600;
	padding: 12px 18px;
	border: 0;
	border-radius: 10px;
	background: var(--accent);
	color: var(--card);
	cursor: pointer;
}

button.link {
	background: none;
	color: var(--accent);
	padding: 0;
	font-weight: 400;
	text-decoration: underline;
}

.narrow button[type=submit] { width: 100%; }

.error {
	color: var(--error);
	font-weight: 600;
	margin: 0 0 12px;
}

.row { display: flex; align-items: center; gap: 12px; }
.saved { color: var(--accent); font-weight: 600; }

/* Task list */

.tasks { list-style: none; margin: 0; padding: 0; }

.task {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 16px;
	margin-bottom: 10px;
}

.task.mine { border: 2px solid var(--accent); }
/* htmx swaps a task in with its old classes and settles to the new ones a
   moment later, so these transitions play when a task is ticked off. */
.task { transition: opacity .2s, border-color .2s; }
.task.done { opacity: .7; }
.task h2 { text-decoration: line-through transparent; transition: text-decoration-color .2s; }
.task.done h2 { text-decoration-color: currentColor; }

.task-body { flex: 1; min-width: 0; }
.desc { margin: 2px 0 6px; color: var(--muted); font-size: .9rem; }
.who { margin: 0; font-size: .9rem; }

.check {
	flex: none;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid var(--accent);
	background: transparent;
	color: var(--card);
	font-size: 1.4rem;
	line-height: 1;
	transition: background-color .2s, transform .15s;
}

.task.done .check { background: var(--accent); }
.check:active, .takeover:active { transform: scale(.92); }
.check.htmx-request { opacity: .5; }

.section-title { margin: 24px 0 14px; font-size: 1rem; color: var(--muted); }
/* A hint under a heading belongs to it; the room goes below the hint. */
.section-title:has(+ p.muted) { margin-bottom: 4px; }
.notice {
	background: var(--accent-soft);
	border-radius: 10px;
	padding: 10px 12px;
	margin: 0 0 16px;
}
.badge {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: .8rem;
	font-weight: 600;
}
.hint { margin: 4px 0 0; color: var(--muted); font-size: .85rem; }

.takeover {
	flex: none;
	padding: 10px 14px;
	background: transparent;
	color: var(--accent);
	border: 2px solid var(--accent);
	transition: transform .15s;
}
.takeover.htmx-request { opacity: .5; }

.check.static {
	display: grid;
	place-items: center;
	background: var(--accent);
	opacity: .6;
}

/* Vacation page */
.dates { display: flex; gap: 12px; }
.dates label { flex: 1; min-width: 0; }
.vacations { list-style: none; margin: 0; padding: 0; }
.vacations .card { padding: 12px 16px; }
.vacations form { margin: 0; }
.grow { flex: 1; }

/* Housemates page */
.housemates { list-style: none; margin: 0; padding: 0; }
.housemate { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.housemate.mine { border: 2px solid var(--accent); }
.housemate .who { margin-top: 2px; color: var(--muted); }
.pos { width: 1.5em; font-weight: 700; color: var(--accent); text-align: center; }
.move { display: flex; gap: 6px; }
.move form { margin: 0; }
.arrow {
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	color: var(--accent);
	border: 2px solid var(--accent);
	font-size: 1.2rem;
}
.arrow:disabled { opacity: .25; cursor: default; }

/* Navigation */

.mainnav { display: flex; gap: 4px; margin-left: auto; }

.navlink {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 999px;
	color: var(--muted);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s, color .15s;
}
.navlink:hover { color: var(--text); background: var(--bg); }
.navlink[aria-current=page] { color: var(--accent); }
.navlink[aria-current=page]:hover { background: none; }
/* The highlight behind the current tab. It is an element of its own, so a
   view transition can slide it from the old tab to the new one. */
.nav-pill {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 999px;
	background: var(--accent-wash);
	view-transition-name: nav-pill;
}

.logout { margin: 0; }
.logout button {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	font-size: .95rem;
}
.logout button:hover { color: var(--text); background: var(--bg); }

.icon { flex: none; }

/* On phones the menu becomes a tab bar at the bottom of the screen. */
@media (max-width: 860px) {
	.mainnav {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 10;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0;
		margin: 0;
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
		background: var(--card);
		border-top: 1px solid var(--line);
		view-transition-name: tabbar;
	}
	.navlink {
		flex-direction: column;
		gap: 2px;
		padding: 6px 2px;
		border-radius: 12px;
		font-size: .7rem;
	}
	.navlink:hover { background: none; }
	.navlink .icon { width: 48px; height: 30px; padding: 4px 13px; }
	.nav-pill { inset: 6px auto auto 50%; width: 48px; height: 30px; margin-left: -24px; }
	.navlink span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
	/* The menu moved to the bottom, so push the profile icon to the right,
	   next to log out, instead of letting it float in the middle. */
	.profile-link { margin-left: auto; }
	.logout button span { display: none; }
	.logout button { padding: 8px; }
	body.has-tabbar main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* Dropdown (dropdown.js): a select that looks the same everywhere. */
.field { margin-bottom: 12px; }
.field-label { display: block; margin-bottom: 4px; font-weight: 600; font-size: .9rem; }
.dropdown { position: relative; }
.dropdown-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 12px;
	background: var(--bg);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: 10px;
	font-weight: 400;
	text-align: left;
}
.dropdown-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dropdown-chevron { flex: none; color: var(--muted); transition: transform .15s; }
.dropdown-button[aria-expanded=true] .dropdown-chevron { transform: rotate(180deg); }
.dropdown-list {
	position: absolute;
	z-index: 15;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 280px;
	overflow: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.dropdown-list:focus { outline: none; }
.dropdown-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 8px;
	cursor: pointer;
}
.dropdown-list li.active { background: var(--accent-soft); }
.dropdown-list li[aria-selected=true] { color: var(--accent); font-weight: 600; }
.dropdown-check { flex: none; visibility: hidden; }
.dropdown-list li[aria-selected=true] .dropdown-check { visibility: visible; }
.dropdown-enter { transition: opacity .12s, transform .12s; }
.dropdown-from { opacity: 0; transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
	.dropdown-enter, .dropdown-chevron { transition: none; }
}

/* Date range picker */

[x-cloak] { display: none !important; }

.rangepicker > button[type=submit] { width: 100%; margin-top: 12px; }
button:disabled { opacity: .45; cursor: default; }

.cal-summary { margin: 0 0 12px; font-weight: 600; text-align: center; }

.cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.cal-title { font-weight: 700; font-size: 1.05rem; }
.cal-nav {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--accent);
	display: grid;
	place-items: center;
}
.cal-nav:hover:not(:disabled) { background: var(--accent-soft); }

.cal-grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 4px;
	table-layout: fixed;
}
.cal-grid th {
	padding: 4px 0;
	font-size: .75rem;
	font-weight: 600;
	color: var(--muted);
	text-transform: uppercase;
}
.cal-grid th.wk, .cal-grid tbody th { width: 2.2em; font-size: .7rem; color: var(--muted); opacity: .7; }
.cal-grid td { padding: 0; text-align: center; }

.cal-day {
	width: 100%;
	max-width: 44px;
	aspect-ratio: 1;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--text);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.cal-day:hover:not(:disabled) { background: var(--accent-soft); }
.cal-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-day:disabled { opacity: .3; }

.other-month .cal-day { color: var(--muted); }
.today .cal-day { box-shadow: inset 0 0 0 2px var(--line); }
.taken .cal-day { outline: 2px dashed var(--accent); outline-offset: -4px; }

/* The range is a band behind the days; start and end are filled circles. */
td.in-range { background: var(--accent-soft); }
td.range-start { border-radius: 999px 0 0 999px; }
td.range-end { border-radius: 0 999px 999px 0; }
td.range-start.range-end { border-radius: 999px; }
td.range-start .cal-day, td.range-end .cal-day {
	background: var(--accent);
	color: var(--card);
	font-weight: 700;
}
td.in-range:not(.range-start, .range-end) .cal-day:hover:not(:disabled) { background: transparent; }

.cal-legend { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: .85rem; color: var(--muted); }
.swatch { width: 14px; height: 14px; border-radius: 50%; outline: 2px dashed var(--accent); outline-offset: -2px; }
.vacations .past { opacity: .65; }

/* Destructive action: red outline, filled red on hover. */
button.danger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 999px;
	background: transparent;
	color: var(--error);
	border: 1.5px solid currentColor;
	font-size: .9rem;
	transition: background-color .15s, color .15s;
}
button.danger .icon { width: 18px; height: 18px; }
button.danger:hover, button.danger:focus-visible { background: var(--danger-soft); }
button.danger:active { background: var(--error); color: var(--card); }
.vacations .row { gap: 12px; }

@media (max-width: 400px) {
	button.danger span { display: none; }
	button.danger { padding: 8px; }
}

/* Fines page */
.balances { list-style: none; margin: 0 0 8px; padding: 4px 16px; }
.balances li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}
.balances li:last-child { border-bottom: 0; }
.balances li.mine { font-weight: 700; }
.balances li.house { color: var(--muted); }
.amount { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.amount.gain { color: var(--gain); font-weight: 700; }
.amount.owe { color: var(--error); font-weight: 700; }

.fines { list-style: none; margin: 0; padding: 0; }
.fine { display: flex; gap: 12px; align-items: center; }
/* Your own fines: red when you pay, green when you receive. */
.fine.i-pay { border: 2px solid var(--error); }
.fine.i-get { border: 2px solid var(--gain); }
.fine-week + .fine-week { margin-top: 14px; }
.fine-week-title { margin: 0 0 12px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.fine-task { font-size: .85rem; font-weight: 600; }
.fine p { margin: 0; }
.fine-who { margin: 2px 0; }
.fine-reason { font-size: .85rem; }
.fine-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.fine-side form { margin: 0; }
.fine-amount { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
button.pay { padding: 8px 14px; border-radius: 999px; font-size: .9rem; }
.empty { text-align: center; }
details.paid { margin-top: 16px; }
details.paid summary { cursor: pointer; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
details.paid .fine { opacity: .7; }

/* Registration switch on the housemates page */
.registration .row { align-items: flex-start; }
.registration p { margin: 2px 0 0; }
.registration form { margin: 12px 0 0; }
.registration .dot {
	flex: none;
	width: 12px;
	height: 12px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--error);
}
.registration .dot.on { background: var(--gain); }
.small { font-size: .8rem; }
button.wide { width: 100%; justify-content: center; }

/* Inactive housemates */
.housemate.inactive { opacity: .7; }
.badge.off { background: var(--line); color: var(--muted); }
.status-toggle { margin: 4px 0 0; }
.status-toggle button.link { font-size: .85rem; color: var(--muted); }
.owner-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.owner-actions form { margin: 0; }
.owner-actions button.link { font-size: .85rem; color: var(--muted); }
.owner-actions button.remove { color: var(--error); }
.inactive-notice p { margin: 0 0 10px; }
.refund-notice p { margin: 0 0 6px; }
.refund-notice a { font-weight: 600; }
.inactive-notice form { margin: 0; }
.inactive-notice button { width: 100%; }

/* Undo message after marking a fine as paid */
.toast {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 24px;
	z-index: 30;
	max-width: 528px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 12px 12px 16px;
	border-radius: var(--radius);
	background: var(--text);
	color: var(--bg);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}
.toast p { margin: 0; font-size: .9rem; }
.toast form { margin: 0; }
.toast-undo {
	padding: 8px 12px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--card);
	font-size: .9rem;
	white-space: nowrap;
}
.toast-close {
	padding: 4px 6px;
	background: transparent;
	color: inherit;
	font-size: 1.3rem;
	line-height: 1;
}
@media (max-width: 860px) {
	.toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* Profile: theme colour swatches */
.card-title { margin: 0 0 2px; font-size: 1.05rem; }
.swatch-help { margin: 0 0 12px; }
.swatches {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
}
.swatch-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 4px;
	border-radius: 12px;
	background: transparent;
	color: var(--text);
	font-weight: 500;
	font-size: .8rem;
	border: 2px solid transparent;
}
.swatch-btn:hover { background: var(--bg); }
.swatch-btn[aria-pressed=true] { border-color: var(--accent); font-weight: 700; }
/* Each swatch shows its own colour: data-accent sets --accent on the button. */
.swatch-dot {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 60%, var(--card));
}
.swatch-btn[aria-pressed=true] .swatch-dot { box-shadow: inset 0 0 0 3px var(--card), 0 0 0 2px var(--accent); }

.profile-link { display: grid; place-items: center; padding: 8px; color: var(--muted); border-radius: 999px; }
.profile-link:hover { color: var(--text); background: var(--bg); }
.profile-link[aria-current=page] { color: var(--accent); background: var(--accent-soft); }
.name-link { color: inherit; text-decoration: none; border-bottom: 2px solid var(--accent); }

/* Huisgenoten: link to editing the tasks */
.link-card { color: var(--text); text-decoration: none; }
.link-card .icon { color: var(--accent); }
.link-card .muted { display: block; margin: 0; }
.chevron { color: var(--muted); font-size: 1.6rem; line-height: 1; }

/* Bierpapier */
.beer-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.beer-stats .card { margin-bottom: 12px; padding: 12px 16px; }
.beer-stats .card p { margin: 0; }
.beer-stats .mine { border: 2px solid var(--accent); }
.beer-number { font-size: 2rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.krediet { color: var(--accent); }
.beer-stats .owe { border-color: var(--error); }
.beer-stats .owe .krediet { color: var(--error); }

.beer-counter {
	display: grid;
	grid-template-columns: 72px 1fr 72px;
	align-items: center;
	gap: 12px;
}
.beer-counter form { margin: 0; }
.beer-counter button {
	width: 72px;
	height: 72px;
	padding: 0;
	border-radius: 20px;
	font-size: 2.2rem;
	font-weight: 500;
	line-height: 1;
	transition: transform .15s;
}
.beer-counter button:active:not(:disabled) { transform: scale(.92); }
.beer-minus { background: transparent; color: var(--accent); border: 2px solid var(--accent); }
.beer-today { display: flex; flex-direction: column; align-items: center; }
.beer-today .muted { margin: 0; }

.beer-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.beer-actions form { display: flex; margin: 0; }
.beer-actions form .beer-action { flex: 1; }
.beer-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 4px;
	background: var(--card);
	color: var(--accent);
	border: 1.5px solid var(--accent);
	border-radius: 12px;
	font-size: .85rem;
	transition: background-color .15s;
}
.beer-action[aria-expanded=true] { background: var(--accent-soft); }
.beer-action.broken { color: var(--error); border-color: var(--error); }
.beer-action.broken[aria-expanded=true] { background: var(--danger-soft); }
.beer-panel .panel-title { margin: 0 0 10px; font-weight: 600; }
.beer-panel form { margin: 0 0 8px; }
.beer-panel .row { align-items: flex-end; }
.beer-panel .row label { margin: 0; }
.beer-panel .small { margin: 0; }
.beer-panel button.danger { padding: 12px 18px; border-radius: 10px; }
.check-row { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-weight: 400; font-size: 1rem; }
.check-row input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.beer-panel .wide { margin-top: 10px; }

.beer-people .owes { display: block; }
.person-counter { display: flex; align-items: center; gap: 6px; }
.person-counter form { margin: 0; }
.person-counter button {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 10px;
	font-size: 1.3rem;
	line-height: 1;
	transition: transform .15s;
}
.person-counter button:active:not(:disabled) { transform: scale(.9); }
.person-today { min-width: 1.4em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.beer-people .amount { min-width: 2.4em; text-align: right; }

/* Bierpapier: links for friends */
.new-link { border: 2px solid var(--accent); }
.new-link .panel-title { margin: 0 0 10px; font-weight: 600; }
.new-link input { margin: 0; font-size: .9rem; }
.share-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 10px 0; }
a.button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 18px;
	border-radius: 10px;
	background: var(--accent);
	color: var(--card);
	font-weight: 600;
	text-decoration: none;
}
button.secondary { background: transparent; color: var(--accent); border: 2px solid var(--accent); padding: 10px 16px; }
.invite-form .wide { margin-top: 4px; }

.crates { list-style: none; margin: 0 0 8px; padding: 4px 16px; }
.crates li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.crates li:last-child { border-bottom: 0; }
.crate-bar { height: 6px; margin-top: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.crate-bar div { height: 100%; border-radius: 3px; background: var(--accent); }

.beer-log { list-style: none; margin: 0; padding: 4px 16px; }
.beer-log li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.beer-log li:last-child { border-bottom: 0; }
.beer-log li.mine { font-weight: 600; }
.beer-log li.mine .muted { font-weight: 400; }
.beer-log .grow > span { display: block; }
.beer-log li.undone .log-text { text-decoration: line-through; color: var(--muted); }
.beer-log form { margin: 0; }
.beer-log button.link { font-size: .85rem; white-space: nowrap; }

/* Page transitions. Moving between pages fades the content over while the
   top bar and tab bar stay put and the tab highlight slides to the new tab.
   Browsers without view transitions just load the page as before. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
		types: page;
	}
}

.topbar { view-transition-name: topbar; }

::view-transition-group(*) {
	animation-duration: .22s;
	animation-timing-function: cubic-bezier(.2, 0, 0, 1);
}

html:active-view-transition-type(page)::view-transition-old(root) {
	animation: .12s ease-in both vt-fade-out;
}
html:active-view-transition-type(page)::view-transition-new(root) {
	animation: .22s cubic-bezier(.2, 0, 0, 1) .04s both vt-rise-in;
}

/* Housemate cards are named so they slide when reordered (see
   housemateTransition); on a page change they belong with the content. */
html:active-view-transition-type(page) .housemate { view-transition-name: none !important; }

@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(8px); } }

/* htmx swaps with transition:true call view transitions too; without motion
   they still swap, just instantly. */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
}