:root {
	color-scheme: light dark;

	--color-background: light-dark(oklch(97.5% .008 90), oklch(17% .012 155));
	--color-surface: light-dark(oklch(94.5% .011 90), oklch(21% .014 155));
	--color-surface-hover: light-dark(oklch(92.5% .013 90), oklch(24% .016 155));
	--color-text: light-dark(oklch(22% .018 155), oklch(93% .01 90));
	--color-muted: light-dark(oklch(43% .018 155), oklch(70% .012 90));
	--color-rule: light-dark(oklch(84% .015 145), oklch(34% .018 155));
	--color-control: light-dark(oklch(60% .018 155), oklch(52% .018 155));
	--color-accent: light-dark(oklch(43% .11 151), oklch(79% .13 151));
	--color-accent-hover: light-dark(oklch(36% .095 151), oklch(82% .12 151));
	--color-on-accent: light-dark(oklch(98.5% .005 90), oklch(16% .012 155));
	--color-focus: light-dark(oklch(54% .14 151), oklch(78% .14 151));
	--color-warning: light-dark(oklch(48% .112 60), oklch(80% .13 75));
	--color-attention: light-dark(oklch(93% .05 75), oklch(28% .05 70));
	--color-paper: white;
	--tint: 12%;

	--font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--text-xs: .8125rem;
	--text-sm: .875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.75rem;
	--text-2xl: 2.25rem;
	--weight-medium: 500;
	--weight-bold: 600;
	--leading-tight: 1.1;
	--leading-snug: 1.3;
	--leading-normal: 1.5;
	--tracking-tight: -.03em;
	--tracking-wide: .06em;
	--underline-offset: .2em;

	--space-1: .25rem;
	--space-2: .5rem;
	--space-3: .75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;

	--rule-width: 1px;
	--rule: var(--rule-width) solid var(--color-rule);
	--indicator-width: calc(2 * var(--rule-width));
	--focus-width: 3px;
	--radius: .375rem;
	--radius-pill: 999rem;
	--radius-card: .75rem;
	--marker-size: 1.25rem;
	--mark-size: 1.5rem;
	--icon-size: 1.25em;
	--shadow-popover: 0 .5rem 1.5rem oklch(0% 0 0 / .16), 0 .0625rem .1875rem oklch(0% 0 0 / .12);
	--tint-hover: 8%;
	--tint-press: 14%;

	--measure: 42rem;
	--gutter: var(--space-4);
	--tap-target: 2.75rem;
	--tap-target-quiet: 1.75rem;
	--nav-gap: var(--space-4);
	--section-gap: var(--space-12);
	--field-gap: var(--space-2);
	--group-gap: var(--space-8);
	--page-top: var(--space-8);
	--card-padding: var(--space-4);
	--card-gap: var(--space-3);
	--step-row-inset: var(--space-4);
	--speed: .16s;
	--press-scale: .96;
}

@media (width >= 40rem) {
	:root {
		--text-xl: 2rem;
		--text-2xl: 3rem;
		--gutter: var(--space-12);
		--nav-gap: var(--space-6);
		--section-gap: var(--space-12);
		--group-gap: var(--space-8);
		--page-top: var(--space-12);
		--card-padding: var(--space-6);
	}
}

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

/* Components set display, which would otherwise override the hidden attribute. */
[hidden] { display: none !important; }

html {
	background: var(--color-background);
	font-family: var(--font-sans);
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}

body {
	min-height: 100dvh;
	margin: 0;
	color: var(--color-text);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

h1, h2, h3, h4, p, ul, dl, dd { margin: 0; }

h1 {
	margin: 0;
	font-size: var(--text-2xl);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-tight);
	text-wrap: balance;
}

h2, h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-snug); }

::selection { background: var(--color-accent); color: var(--color-on-accent); }

a { color: inherit; text-underline-offset: var(--underline-offset); text-decoration-thickness: from-font; }
a:hover { color: var(--color-accent-hover); }
:is(a, button, summary, input, label):focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-width); }
label:has(> .visually-hidden:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-width); }

/* A section reached by its anchor after an action keeps a gap above it, so its message isn't cut by the window's edge. */
[id] { scroll-margin-block-start: var(--space-6); }

.visually-hidden {
	position: absolute;
	inset-inline-start: 0;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.shell { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }

main { padding-block: var(--page-top) var(--section-gap); }

.skip-link {
	position: fixed;
	inset: var(--space-3) auto auto var(--space-3);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius);
	background: var(--color-text);
	color: var(--color-background);
	translate: 0 -200%;
	&:focus { translate: none; }
}

/* Navigation: the mark and wordmark, then the tabs on signed-in pages. */

.nav {
	display: flex;
	align-items: center;
	column-gap: var(--nav-gap);
	min-block-size: var(--tap-target);
	border-block-end: var(--rule);
	& .wordmark {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-block-size: var(--tap-target);
		margin-inline-end: auto;
		color: var(--color-text);
		font-weight: var(--weight-bold);
		letter-spacing: var(--tracking-tight);
		text-decoration: none;
		&:hover { color: var(--color-text); }
	}
}

/* Below 360px the three tabs keep one line and the mark stands for the wordmark. The mark carries the name. */
@media (width < 22.5rem) {
	.nav .wordmark > span { display: none; }
}

.tabs {
	display: flex;
	gap: var(--nav-gap);
	padding: 0;
	list-style: none;
	& a {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-height: var(--tap-target);
		color: var(--color-muted);
		font-size: var(--text-sm);
		font-weight: var(--weight-bold);
		text-decoration: none;
		white-space: nowrap;
	}
	& a:hover { color: var(--color-text); }
	& a[aria-current] {
		color: var(--color-accent);
		box-shadow: inset 0 calc(-1 * var(--indicator-width)) var(--color-accent);
	}
}

/* The menu's rows have no border of their own, so the links and the button read as one list. */
.menu {
	position: relative;
	/* The button's box is the icon and its padding, so the current-page line spans it like a tab's label. The hit area reaches the full tap target. */
	& > summary {
		position: relative;
		padding-inline: var(--space-1);
		color: var(--color-muted);
		font-weight: normal;
		&::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 50%; inline-size: var(--tap-target); translate: -50% 0; }
		&::after { content: none; }
		&:hover { color: var(--color-text); }
		&[aria-current] { color: var(--color-accent); box-shadow: inset 0 calc(-1 * var(--indicator-width)) var(--color-accent); }
	}
	&[open] > summary { margin-block-end: 0; color: var(--color-text); }
	& > .panel {
		position: absolute;
		z-index: 10;
		inset-inline-end: 0;
		inset-block-start: calc(100% + var(--space-1));
		min-inline-size: 12rem;
		padding-block: var(--space-2);
		border-radius: var(--radius-card);
		background: var(--color-surface);
		box-shadow: var(--shadow-popover);
	}
	& .panel > ul { padding: 0; list-style: none; }
	& .panel > form { margin-block-start: var(--space-2); padding-block-start: var(--space-2); border-block-start: var(--rule); }
	& :is(a, button) {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		inline-size: 100%;
		min-height: var(--tap-target);
		padding: 0 var(--space-4);
		border: 0;
		background: none;
		color: var(--color-text);
		font: inherit;
		text-decoration: none;
		cursor: pointer;
		&:is(:hover, :focus-visible) { background: var(--color-surface-hover); color: var(--color-text); }
		&:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
		&[aria-current] { color: var(--color-accent); font-weight: var(--weight-bold); }
	}
}

.mark { inline-size: var(--mark-size); block-size: var(--mark-size); }

/* Solar Linear icons, drawn in the text colour next to a label, never alone. */
.icon { flex: none; inline-size: var(--icon-size); block-size: var(--icon-size); }

.badge {
	min-inline-size: var(--marker-size);
	padding-inline: var(--space-1);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-xs);
	font-variant-numeric: tabular-nums;
	line-height: var(--marker-size);
	text-align: center;
	[aria-current] > & { background: var(--color-accent); color: var(--color-on-accent); }
}

.flash {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-1) var(--space-4);
	margin-block-end: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-card);
	background: color-mix(in oklch, var(--color-accent) var(--tint), var(--color-background));
}

.back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: var(--tap-target);
	color: var(--color-muted);
	font-size: var(--text-sm);
	text-decoration: none;
	&:hover { color: var(--color-accent-hover); }
}

/* Page structure */

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

main > h1 + .lead { margin-block-start: var(--space-2); }
main > .lead + .lead { margin-block-start: var(--space-1); }
main > :is(h1, .lead) + :not(.lead) { margin-block-start: var(--space-8); }
main > * + :is(section, footer, details, .page-end) { margin-block-start: var(--section-gap); }

.label, .sublabel {
	margin-block-end: var(--space-3);
	color: var(--color-muted);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.sublabel { margin-block-start: var(--space-6); letter-spacing: normal; text-transform: none; }
.label + .sublabel { margin-block-start: 0; }

/* Postavke: short lists of one kind, closer together than the sections of Platiti. */
.groups { display: grid; gap: var(--group-gap); }

/* An empty list is one line. */
.none { color: var(--color-muted); }
section section + section { margin-block-start: var(--space-8); }

.hint { color: var(--color-muted); font-size: var(--text-sm); text-wrap: pretty; }
section > .hint { margin-block-end: var(--space-3); max-inline-size: 60ch; }

.warning { color: var(--color-warning); font-weight: var(--weight-bold); }

.stack > * + * { margin-block-start: var(--space-3); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.notice {
	position: relative;
	padding: var(--card-padding);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	& + & { margin-block-start: var(--card-gap); }
	& .notice-title { font-weight: var(--weight-bold); }
	&.attention .notice-title { color: var(--color-warning); }
}

/* The interrupt: a failed check or a lost connection, the only full-width warning block, on every page. Its tint keeps
   it apart from the cards. */
.notice.attention {
	display: grid;
	justify-items: start;
	gap: var(--space-1);
	background: var(--color-attention);
	main > & + :not(.notice) { margin-block-start: var(--space-8); }
}

/* Until a source has delivered once: setup facts, not work. */
.first-open {
	display: grid;
	gap: var(--space-2);
	padding: var(--card-padding);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	color: var(--color-muted);
	font-size: var(--text-sm);
	list-style: none;
	main > & + * { margin-block-start: var(--space-8); }
	main > .lead + & { margin-block-start: var(--space-6); }
}

/* Platiti: the title and its one meta line, then the bills without a label of their own. */
main > :is(.lead, .first-open) + #platiti { margin-block-start: var(--space-8); }
#platiti > .flash:first-child + * { margin-block-start: 0; }

/* A whole card or row opens its first link. */
.stretch {
	text-decoration: none;
	&::after { content: ""; position: absolute; inset: 0; }
}

li:has(.stretch) :is(form, button, label) { position: relative; z-index: 1; }

.section-end {
	display: grid;
	justify-items: start;
	gap: var(--space-3);
	margin-block-start: var(--space-6);
}

/* From 640px the ready block's two actions share one row at its start, the primary first. Its sentence wraps within
   the block, which keeps the width of the cards. */
@media (width >= 40rem) {
	.section-end {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		& > p { flex-basis: 100%; }
	}
}

.meta { color: var(--color-muted); font-size: var(--text-sm); }

/* A fact that connects two items, never an action. Inside a card it is set in the page colour, one step back. */
.fact {
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius);
	background: var(--color-surface);
	font-size: var(--text-sm);
	.cards & { background: var(--color-background); }
}

/* Lists: one card per item, things that belong together share a card. */

.cards {
	display: grid;
	gap: var(--card-gap);
	padding: 0;
	list-style: none;
	& > li {
		position: relative;
		padding: var(--card-padding);
		border-radius: var(--radius-card);
		background: var(--color-surface);
	}
	& > li:has(> a.item) { padding: 0; }
	& > li > a.item { padding: var(--card-padding); border-radius: inherit; }
	& > li:has(> :first-child > .stretch):hover { background: var(--color-surface-hover); }
}

details > .cards, .cards + details { margin-block-start: var(--card-gap); }

/* The slips of one document share its card under one heading, each a row aligned with the card's edge. */
.slip-group {
	& > h2 { margin-block-end: var(--space-1); font-size: var(--text-base); font-weight: var(--weight-bold); }
	& > ul { display: grid; padding: 0; list-style: none; }
	& .item { padding-inline: 0; border-radius: var(--radius); }
}
.cards + .hint { margin-block-start: var(--space-3); }

/* Two-line row: title and amount, then details. */
.item {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: var(--space-1) var(--space-4);
	& > :first-child { font-size: var(--text-base); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
	& > :first-child .money { font-weight: normal; }
	& > .meta { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--text-sm); }
	& > .side { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
	&:has(> .side) > .meta { grid-column: 1; }
	&:not(:has(> .meta)) { align-items: center; & > .side { grid-row: 1; } }
	&.settled > :first-child { color: var(--color-muted); font-weight: normal; }
	& > a:first-child { text-decoration-color: var(--color-rule); }
	& > a:first-child:hover { text-decoration-color: currentColor; }
	& > .item-actions { grid-column: 1 / -1; margin-block-start: var(--space-2); }
	& > .item-end { grid-column: 2; justify-self: end; align-self: center; }
	&:has(> .item-end) > .meta { grid-column: 1; }
	a& {
		padding-block: var(--space-4);
		text-decoration: none;
		&:hover { color: inherit; background: var(--color-surface-hover); }
	}
}

.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* Nedostaje račun: one block per payee, one compact line per payment. */
.payee-head {
	display: grid;
	gap: var(--space-1);
	& h3 {
		display: -webkit-box;
		overflow: hidden;
		font-size: var(--text-base);
		font-weight: var(--weight-medium);
		overflow-wrap: anywhere;
		text-wrap: balance;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	& .meta { color: var(--color-muted); font-size: var(--text-sm); }
}

.payee > * + * { margin-block-start: var(--space-3); }
.payee > .payee-actions { margin-block-start: var(--space-4); }

/* A line: date and the bank's description on the left, the amount on the right. */
.lines {
	display: grid;
	gap: var(--space-3);
	padding: 0;
	list-style: none;
	& > li {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: baseline;
		gap: var(--space-2) var(--space-4);
	}
}

.line-text {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	min-inline-size: 0;
	font-size: var(--text-sm);
	& .meta { flex: none; }
}

.line-description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.line-amount { font-size: var(--text-base); font-weight: var(--weight-medium); }

/* Prikaži još: the rest of a list, anywhere in the app. One compact muted line with the chevron after the words, and a
   hit area that reaches the full tap target. */
details.more {
	& > summary {
		position: relative;
		justify-content: start;
		gap: var(--space-2);
		min-height: var(--tap-target-quiet);
		color: var(--color-muted);
		font-size: var(--text-sm);
		font-weight: var(--weight-medium);
		&::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: var(--tap-target); translate: 0 -50%; }
		&:hover { color: var(--color-text); }
	}
	&[open] > summary { margin-block-end: var(--space-2); }
}

/* Card actions in one row at their natural width, wrapping only when they don't fit. Dodaj račun is the one outlined
   button, at body weight from 640px so the cards stay lighter than the bills above them. */
.payee-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

@media (width >= 40rem) {
	.payee-actions .button.secondary { font-weight: normal; }
}

.sender > * + * { margin-block-start: var(--space-3); }
.sender > .actions { margin-block-start: var(--space-4); }

.files {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-3);
	padding: 0;
	list-style: none;
	font-size: var(--text-sm);
}

/* Vanjski sustavi: one card, a row per system. Each check is a label over its value, so the rows read the same on a
   phone, where the two checks sit side by side under the name, and from 640px, where the rows line up as columns. */
.systems {
	display: grid;
	padding: var(--space-2) var(--card-padding);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	list-style: none;
	& > li {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: var(--space-2) var(--space-4);
		padding-block: var(--space-3);
	}
}

.system-name { font-weight: var(--weight-medium); }

.system-checks {
	display: grid;
	grid-template-columns: 3fr 2fr;
	grid-column: 1 / -1;
	gap: var(--space-4);
	font-size: var(--text-sm);
	& dt { color: var(--color-muted); font-size: var(--text-xs); }
	& dd { display: grid; font-variant-numeric: tabular-nums; }
}

.system-action { grid-row: 1; grid-column: 2; }

@media (width >= 40rem) {
	.systems { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; column-gap: var(--space-4); }
	.systems > li { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; }
	.system-checks { grid-column: 2 / 4; grid-template-columns: subgrid; }
	.system-action { grid-column: 4; }
}

/* Plaćanje and Račun: payee, amount and state on top. On Plaćanje everything above the details fits one phone screen for the screenshot. */

.record {
	display: grid;
	gap: var(--space-3);
	& h1 { margin: 0; font-size: var(--text-xl); }
	& .amount { font-size: var(--text-2xl); }
	& .barcode { margin-block: var(--space-2); }
	& .button:not(.quiet) { inline-size: 100%; }
}

.record + :is(dl, .actions, section), section + :is(dl, .actions) { margin-block-start: var(--space-8); }
.fields + .actions { margin-block-start: var(--space-6); }
main > * + dl.facts { margin-block-start: var(--space-8); }

/* The state of a bill, the same on Plaćanje and Račun. */
.status {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--space-1) var(--space-4);
	padding: var(--space-4);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	& > p:first-child { font-weight: var(--weight-medium); }
	& > :not(p:first-child, form) { grid-column: 1 / -1; }
	& > form { grid-row: 1; grid-column: 2; }
	& > .button { margin-block-start: var(--space-2); }
	& .chip { padding: 0; background: none; font-size: inherit; line-height: inherit; }
}

.amount {
	font-size: var(--text-xl);
	font-weight: var(--weight-medium);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-tight);
}

.alert {
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-card);
	background: var(--color-attention);
	color: var(--color-warning);
	font-weight: var(--weight-bold);
}

/* Black on white with a quiet zone in both themes so banking apps can scan it. */
.barcode {
	display: block;
	width: 100%;
	height: auto;
	padding: var(--space-4);
	border-radius: var(--radius);
	background: var(--color-paper);
	image-rendering: pixelated;
}

/* Values select whole on tap so they can be copied without a copy button. */
.fields {
	display: grid;
	gap: var(--field-gap);
	& > div { padding-block: var(--space-2); }
	& dt { color: var(--color-muted); font-size: var(--text-sm); }
	& dd { font-size: var(--text-lg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
	& dd > span { user-select: all; -webkit-user-select: all; }
	& dd:has(> .copy) { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); user-select: auto; -webkit-user-select: auto; }
	& .copy { flex: none; user-select: none; -webkit-user-select: none; }
	&.facts > div { display: grid; grid-template-columns: minmax(7rem, 1fr) 2fr; align-items: baseline; gap: var(--space-4); }
	&.facts dt { text-wrap: balance; }
	&.facts dd { font-size: var(--text-base); }
}

details {
	& > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: var(--tap-target);
		font-weight: var(--weight-bold);
		cursor: pointer;
		list-style: none;
		&::-webkit-details-marker { display: none; }
		/* Solar alt-arrow-down-linear, drawn in the text colour through a mask. */
		&::after {
			content: "";
			flex: none;
			inline-size: var(--icon-size);
			block-size: var(--icon-size);
			background: var(--color-muted);
			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19 9L12 15L5 9'/%3E%3C/svg%3E") center / contain no-repeat;
			transition: rotate var(--speed) ease-out;
		}
	}
	&[open] > summary { margin-block-end: var(--space-3); &::after { rotate: 180deg; } }
	& > .hint { margin-block-end: var(--space-3); }
}

section details > summary { font-weight: var(--weight-medium); }

/* Privatnost: the policy in Croatian, then in English under its own title. */

.policy {
	max-inline-size: 60ch;
	text-wrap: pretty;
	& > * + * { margin-block-start: var(--space-3); }
	& > :is(h2, h3) { margin-block-start: var(--space-8); }
	& > h2:first-child {
		font-size: var(--text-xl);
		font-weight: var(--weight-medium);
		letter-spacing: var(--tracking-tight);
		line-height: var(--leading-tight);
	}
	& > h2:first-child + .lead { margin-block-start: var(--space-2); }
	& > .lead + * { margin-block-start: var(--space-8); }
	& address { font-style: normal; }
}

/* Mjesec */


.month-switch {
	display: flex;
	justify-content: space-between;
	margin-block-end: var(--space-4);
	& a {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		min-height: var(--tap-target);
		color: var(--color-muted);
		font-size: var(--text-sm);
		text-decoration: none;
	}
	& a:hover { color: var(--color-accent-hover); }
	& a[rel="next"] { margin-inline-start: auto; }
}

.lead.done, .status-line > .done { color: var(--color-accent); font-weight: var(--weight-bold); }

/* A sent month: the status and its Vrati on one line. */
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }

/* The marker is a status, not a control: a check when done, a dash when open. */
/* The checklist is one card: its lines belong together. */
.checklist {
	padding: var(--space-2) var(--card-padding);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	list-style: none;
}

/* A line's actions sit under its text on phones and in a right column on wider screens, always in one place. */
.checklist > li {
	display: grid;
	gap: var(--space-2) var(--space-4);
	align-items: center;
	padding-block: var(--space-3);
	& > .step { display: flex; gap: var(--space-3); align-items: baseline; }
	& > .step > .icon { align-self: flex-start; margin-block-start: calc((1lh - var(--icon-size)) / 2); color: var(--color-muted); }
	& .meta { display: block; }
	& .meta:empty { display: none; }
	&.done > .step { color: var(--color-muted); }
	&.done > .step > .icon { color: var(--color-accent); }
}

.step-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	padding-inline-start: calc(var(--icon-size) + var(--space-3));
	&:not(:has(*)) { display: none; }
}

/* From 640px the lines' actions and their rows' actions end at one right edge, inset like the rows' content. */
@media (width >= 40rem) {
	.checklist > li { grid-template-columns: 1fr auto; }
	.step-actions { justify-content: end; padding-inline: 0 var(--step-row-inset); }
}

.invoice {
	& .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
	& .meta > span + span:not(.chip)::before { content: "·"; margin-inline-end: var(--space-2); }
	& > :first-child a { text-decoration: none; }
	& > :first-child a:hover { text-decoration: underline; }
}

.chip {
	display: inline-block;
	padding-inline: var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--color-background);
	color: var(--color-text);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	line-height: var(--marker-size);
	&.late { color: var(--color-warning); font-weight: var(--weight-bold); }
}

.page-end { font-size: var(--text-sm); }

/* Forms */

.form {
	display: grid;
	gap: var(--space-4);
	& label { display: grid; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); }
	& label:has(> [type="checkbox"]) { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-target); font-weight: normal; }
	& .button { justify-self: start; }
	& > label + .warning { margin-block-start: calc(var(--space-1) - var(--space-4)); font-size: var(--text-sm); }
	/* A result and its action follow the field as their own group: the amount, the euro under it, the step and its hint. */
	& > .amount { margin-block-start: var(--space-4); }
	& > :is(.amount, .actions) + .hint { margin-block-start: calc(var(--space-1) - var(--space-4)); }
}

/* :where keeps the selector light, so .visually-hidden still hides an input. */
input:where(:not([type="checkbox"], [type="hidden"], [type="file"])) {
	inline-size: 100%;
	min-height: var(--tap-target);
	padding: var(--space-2) var(--space-3);
	border: var(--rule-width) solid var(--color-control);
	border-radius: var(--radius);
	background: var(--color-background);
	color: var(--color-text);
	font: inherit;
	font-size: var(--text-base);
	font-weight: normal;
	font-variant-numeric: tabular-nums;
	&:hover { border-color: var(--color-muted); }
	&[aria-invalid="true"] { border-color: var(--color-warning); }
	&:focus-visible { outline-offset: 0; border-color: var(--color-focus); }
	&::placeholder { color: var(--color-muted); }
}

[type="checkbox"] { inline-size: var(--marker-size); block-size: var(--marker-size); margin: 0; accent-color: var(--color-accent); }

.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-4); }

/* Buttons */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--tap-target);
	padding: var(--space-2) var(--space-4);
	border: var(--rule-width) solid var(--color-accent);
	border-radius: var(--radius);
	background: var(--color-accent);
	color: var(--color-on-accent);
	font: inherit;
	font-weight: var(--weight-bold);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--speed) ease-out, scale var(--speed) ease-out;
	&:hover { border-color: var(--color-accent-hover); background: var(--color-accent-hover); color: var(--color-on-accent); }
	&:active { scale: var(--press-scale); }
}

.button.secondary {
	border-color: var(--color-control);
	background: transparent;
	color: var(--color-text);
	&:hover { border-color: var(--color-accent); color: var(--color-accent); }
}

/* A quiet button acts on one row: compact and outlined, tinted only on hover and press. A border means a control and a
   fill means a state, so it never reads as a chip or a label. Never underlined, since underline marks a link. */
.button.quiet {
	position: relative;
	gap: var(--space-1);
	min-height: var(--tap-target-quiet);
	padding: 0 var(--space-2);
	border-color: var(--color-control);
	background: transparent;
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	&:hover { border-color: var(--color-control); background: color-mix(in oklch, currentColor var(--tint-hover), transparent); color: var(--color-text); }
	&:active { background: color-mix(in oklch, currentColor var(--tint-press), transparent); }
}

/* Quiet buttons and links keep their compact line, and their hit area reaches the full tap target above and below. */
:is(.button.quiet, .link)::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; min-block-size: 100%; block-size: var(--tap-target); translate: 0 -50%; }

/* A link next to controls: underlined text with the same hit area as a quiet button. */
.link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target-quiet);
	color: var(--color-muted);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	text-decoration-color: color-mix(in oklch, currentColor 60%, transparent);
	&:hover { color: var(--color-accent-hover); text-decoration-color: currentColor; }
}

.link.download { gap: var(--space-1); }

/* Postavke's Prijava: the passkey form and Odjavi se share one row. The form's failure message takes its own line above. */
.section-actions {
	margin-block-start: var(--space-4);
	& > .form { display: contents; }
	& [data-passkey-failure] { flex-basis: 100%; order: -1; }
}

/* An upload being read or a passkey ceremony under way: the form keeps its place but can't be used twice. */
form[aria-busy="true"] { pointer-events: none; }
:is(form[aria-busy="true"] .button, .button:disabled) {
	border-color: var(--color-rule);
	background: transparent;
	color: var(--color-muted);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.button, details > summary::after { transition: none; }
	.button:active { scale: none; }
}

/* Google Drive: the account and its state, then the folders, the switch and what the app made. */
.account {
	display: grid;
	gap: var(--space-1);
	& > :first-child { color: var(--color-text); font-weight: var(--weight-medium); }
}
main > :is(.lead, .none) + .account-action { margin-block-start: var(--space-4); }
main > .account-action + * { margin-block-start: var(--space-8); }

/* Rows under a checklist line, the outgoing invoices and the Drive line's, sit inside the checklist card, one
   step back like a fact. */
.step-rows {
	display: grid;
	grid-column: 1 / -1;
	gap: var(--space-2);
	padding: 0;
	padding-inline-start: calc(var(--icon-size) + var(--space-3));
	list-style: none;
	& > .item {
		padding: var(--space-3) var(--step-row-inset);
		border-radius: var(--radius);
		background: var(--color-background);
		font-size: var(--text-sm);
	}
	& > .item > :first-child { font-size: var(--text-sm); }
	& > .item > .actions { grid-column: 1 / -1; margin-block-start: var(--space-2); }
	& > .item > .side { display: flex; align-items: center; gap: var(--space-4); }
}

/* A file's row, an outgoing invoice or a file waiting for Drive: on a phone its actions sit under the name, so a long
   name keeps the width. From 640px the name, its meta and the actions share one line. */
.step-rows > .file-row {
	& > .meta { grid-column: 1 / -1; }
	& > .side { grid-row: auto; grid-column: 1 / -1; justify-self: start; margin-block-start: var(--space-2); }
}

/* The files beyond the shown ones, behind Prikaži još in the Drive line's rows. Its rows keep the line's indent. */
.step-more .step-rows { padding-inline-start: 0; }

/* The switch on the Drive line: one muted line, quieter than the files it sits above. */
.step-rows > .switch-row > :first-child { color: var(--color-muted); }

@media (width >= 40rem) {
	.step-rows > .file-row {
		grid-template-columns: auto 1fr auto;
		align-items: center;
		column-gap: var(--space-2);
		& > .meta { grid-column: 2; white-space: nowrap; }
		& > .meta::before { content: "· "; }
		& > .side { grid-row: 1; grid-column: 3; margin-block-start: 0; margin-inline-start: var(--space-2); }
	}
}

/* Račun's Drive row: the state, then its actions. */
#drive dd {
	display: grid;
	justify-items: start;
	gap: var(--space-2);
	user-select: auto;
	-webkit-user-select: auto;
}
.drive-settings .item > .warning { grid-column: 1; font-size: var(--text-sm); }