: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(82% .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-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;
	--quiet-tint: 8%;
	--quiet-tint-hover: 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);
	--group-gap: var(--space-8);
	--page-top: var(--space-8);
	--card-padding: var(--space-4);
	--card-gap: var(--space-3);
	--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-16);
		--group-gap: var(--space-12);
		--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); }

.visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	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);
	}
}

.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;
	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 Na redu. */
.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); }
	& h2 { font-size: var(--text-base); }
	&.attention h2 { color: var(--color-warning); }
}

/* 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);
}

.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); }
.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; }

/* Nedostaje račun: one block per payee, one compact line per payment. */
.payee-head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	column-gap: var(--space-4);
	& h4 { font-size: var(--text-base); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
	& .money { justify-self: end; }
	& .meta { grid-column: 1 / -1; 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); }

.lines {
	display: grid;
	gap: var(--space-2);
	padding: 0;
	list-style: none;
	& > li {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: var(--space-4);
	}
}

.line-text {
	display: grid;
	min-inline-size: 0;
	font-size: var(--text-sm);
	& .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.payee details {
	& > summary {
		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);
	}
	&[open] > summary { margin-block-end: var(--space-2); }
}

/* Group actions: equal outlined buttons, each with its consequence under it. */
.payee-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	align-items: start;
	gap: var(--space-3);
	& form { display: grid; gap: var(--space-1); }
	& .button { inline-size: 100%; }
}

.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; }
}

.empty { max-inline-size: 36ch; font-size: var(--text-lg); text-wrap: pretty; }

/* 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 + .actions { margin-block-start: var(--space-8); }
.fields + .actions { margin-block-start: var(--space-6); }

/* 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: color-mix(in oklch, var(--color-warning) var(--tint), var(--color-background));
	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 {
	border-block-start: var(--rule);
	& > div { padding-block: var(--space-3); border-block-end: var(--rule); }
	& 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; gap: var(--space-4); }
	&.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; }
		&::after { content: "+"; color: var(--color-muted); font-weight: var(--weight-medium); }
	}
	&[open] > summary { margin-block-end: var(--space-3); &::after { content: "−"; } }
	& > .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;
		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 { color: var(--color-accent); font-weight: var(--weight-bold); }

/* 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::before {
		content: "–" / "";
		flex: none;
		inline-size: var(--marker-size);
		color: var(--color-muted);
		font-weight: var(--weight-bold);
		text-align: center;
	}
	& .meta { display: block; }
	& .meta:empty { display: none; }
	&.done > .step { color: var(--color-muted); }
	&.done > .step::before { content: "✓" / ""; 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(--marker-size) + var(--space-3));
	&:not(:has(*)) { display: none; }
}

@media (width >= 40rem) {
	.checklist > li { grid-template-columns: 1fr auto; }
	.step-actions { justify-content: end; padding-inline-start: 0; }
}

.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 { background: color-mix(in oklch, var(--color-warning) var(--tint), var(--color-background)); color: var(--color-warning); font-weight: var(--weight-bold); }
	&.review { outline: var(--rule-width) solid var(--color-warning); background: none; color: var(--color-warning); }
}

.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; }
}

input: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); }
	&: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-rule);
	background: transparent;
	color: var(--color-text);
	&:hover { border-color: var(--color-accent); color: var(--color-accent); }
}

/* A quiet button acts on one row: compact, on a faint tint of its own colour, 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: none;
	background: color-mix(in oklch, currentColor var(--quiet-tint), transparent);
	color: var(--color-muted);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	&:hover { background: color-mix(in oklch, currentColor var(--quiet-tint-hover), transparent); color: var(--color-text); }
}

/* 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 { transition: none; }
	.button:active { scale: none; }
}