/* qrnavod application styles. Loaded after Pico CSS. */

:root {
	color-scheme: light;
}

body {
	background: var(--bg);
	color: var(--ink);
	overflow-x: clip;
}

.container.narrow {
	max-width: 26rem;
	margin-top: 12vh;
}

article {
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

.error {
	color: var(--danger);
	background: var(--danger-soft);
	border: 1px solid var(--danger-line);
	border-radius: 0.4rem;
	padding: 0.6rem 0.8rem;
}

.app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.app-header h1 {
	margin: 0;
	font-size: 1.4rem;
}

form.inline {
	margin: 0;
}

form.inline button {
	margin: 0;
	width: auto;
}

/* Public machine page (no JavaScript required) */

main.machine {
	max-width: 46rem;
	/* Pico's container drops its horizontal gutter between 576 and 900 px, so
	   the content touched the window edge on tablets and narrow desktops. Keep a
	   real gutter at every width instead. */
	width: 100%;
	padding-inline: clamp(1rem, 3vw, 1.5rem);
	padding-block: 2rem;
}

.machine-header {
	border-bottom: 2px solid var(--brand, var(--ink));
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
}

main.machine a[role="button"]:not(.secondary):not(.outline) {
	background: var(--brand, var(--ink));
	border-color: var(--brand, var(--ink));
	color: var(--on-brand);
}

main.machine a[role="button"]:not(.secondary):not(.outline):hover,
main.machine a[role="button"]:focus {
	color: var(--on-brand);
	filter: brightness(1.1);
}

.machine-id {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	color: var(--ink-soft);
	margin: 0;
}

.machine-header h1 {
	margin: 0.3rem 0 0;
	font-size: 1.9rem;
	line-height: 1.15;
}

.machine-sub {
	margin: 0.2rem 0 0;
	color: var(--ink-soft);
}

.machine-facts {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2rem;
}

.machine-facts th {
	text-align: left;
	font-weight: 600;
	color: var(--ink-soft);
	width: 40%;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--line);
}

.machine-facts td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--line);
}

.machine-docs h2 {
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

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

.machine-footer {
	margin-top: 3rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	font-size: 0.85rem;
	color: var(--ink-faint);
}

@media print {
	.machine-footer {
		display: none;
	}
}

/* Print: paper is not a screen. The switchers, the navigation and the phone
   mockup are screen chrome, and a filled button loses its background when the
   browser does not print backgrounds - white text on white paper. */
@media print {
	.theme-switch,
	.lang-switch,
	.site-nav,
	.hero-media,
	.doc-actions,
	.skip-link {
		display: none !important;
	}

	a[role="button"],
	button {
		background: transparent !important;
		color: var(--ink) !important;
		border: 1px solid var(--ink) !important;
		box-shadow: none !important;
	}

	main,
	.section,
	article {
		break-inside: avoid;
	}
}

/* The PDF viewer bundle (PDF.js) ships its own link colour, which is a blue that
   just misses AA on our paper background. Keep the brand accent so the back link
   matches the rest of the product. */
main.viewer .app-header a {
	color: var(--brand);
	text-decoration: none;
}

main.viewer .app-header a:hover,
main.viewer .app-header a:focus-visible {
	text-decoration: underline;
}

/* Public document list, revision switcher and PIN box */
.breadcrumb {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 0.35rem;
	font-size: 0.85rem;
	color: var(--ink-soft);
	margin-bottom: 1rem;
}

.doc-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line);
}

.doc-folder {
	margin: 1.25rem 0 0.25rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.doc-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 0.75rem;
	align-items: baseline;
	padding: 0.8rem 0.75rem;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	color: inherit;
}

.doc-row:hover {
	background: var(--surface-soft);
}

.doc-title {
	font-weight: 600;
}

.doc-meta {
	font-size: 0.8rem;
	color: var(--ink-faint);
	white-space: nowrap;
}

.doc-lock {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0 0.35rem;
	border: 1px solid var(--line-strong);
	border-radius: 0.25rem;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

.rev-switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
}

.rev-pill {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	font-size: 0.85rem;
	text-decoration: none;
	color: inherit;
}

.rev-current {
	background: var(--ink);
	border-color: var(--ink);
	/* --bg always contrasts with --ink, while --on-brand belongs to --brand. */
	color: var(--bg);
}

.banner-warning {
	background: var(--warn-soft);
	border: 1px solid var(--warn-line);
	border-radius: 0.4rem;
	padding: 0.7rem 0.9rem;
	color: var(--warn-ink);
}

.pin-box {
	border: 1px solid var(--line-strong);
	padding: 1rem;
}

.doc-actions {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	margin-block: 1rem;
}

.doc-facts {
	font-size: 0.85rem;
	color: var(--ink-faint);
}


@media print {
	.breadcrumb,
	.doc-actions,
	.rev-switcher {
		display: none;
	}
}


/* Public landing page */

main.landing {
	max-width: 52rem;
	padding-block: 3rem;
}

.landing-header h1 {
	font-size: 2rem;
	line-height: 1.15;
	margin-bottom: 0.4rem;
}

.landing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
	margin-top: 2rem;
}

.landing-grid article {
	margin: 0;
}


/* Language switcher on public pages */

.machine-topbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 0.5rem;
}

.lang-switch {
	display: flex;
	gap: 0.35rem;
	align-items: center;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
}

.lang-switch a,
.lang-switch .lang-active {
	padding: 0.15rem 0.4rem;
	border-radius: 0.25rem;
	text-decoration: none;
	color: var(--ink-soft);
}

.lang-switch .lang-active {
	background: var(--brand, var(--ink));
	color: var(--on-brand);
}


/* Diagonal watermark for superseded safety documents (SPEC R-76). */

main.machine {
	position: relative;
	isolation: isolate;
}

.watermark {
	position: fixed;
	z-index: -1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-32deg);
	font-size: clamp(3rem, 14vw, 9rem);
	font-weight: 800;
	letter-spacing: 0.12em;
	color: color-mix(in srgb, var(--danger) 16%, transparent);
	border: 0.35rem solid color-mix(in srgb, var(--danger) 16%, transparent);
	padding: 0.2em 0.4em;
	pointer-events: none;
	user-select: none;
	z-index: -1;
	white-space: nowrap;
}

@media print {
	.watermark {
		position: fixed;
		color: color-mix(in srgb, var(--danger) 28%, transparent);
		border-color: color-mix(in srgb, var(--danger) 28%, transparent);
	}
}


/* Public landing page */

body.landing-body {
	background: var(--surface);
	color: var(--ink);
}

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap: 0.2rem;
	gap: 0.8rem;
	max-width: 72rem;
	margin: 0 auto;
	padding: 0.15rem 1.25rem;
	border-bottom: 1px solid var(--line);
}

.site-logo img,
.site-logo svg {
	display: block;
	height: 30px;
	width: auto;
}

/* The lockup carries a claim below the wordmark. Optically centre the large
   wordmark on the nav text, not the whole image box, and give the newer,
   wider claim enough room to read. */
.site-header .site-logo img {
	height: 32px;
	position: relative;
	/* The claim sits below the wordmark; nudge the wordmark baseline onto the
	   nav text baseline rather than centring the whole image box. */
	top: 4px;
}

.site-header .theme-switch .theme-toggle {
	width: 2rem;
	height: 2rem;
	min-width: 2rem;
	min-height: 2rem;
}

.site-nav {
	display: flex;
	gap: 0.95rem;
	flex-wrap: wrap;
	font-size: 0.88rem;
}
.site-actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-left: auto;
}

.site-admin {
	display: inline-flex;
	align-items: center;
	height: 2rem;
	padding: 0 0.75rem;
	border: 1px solid var(--line-strong);
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
}

.site-admin:hover {
	border-color: var(--brand);
	color: var(--brand);
	text-decoration: none;
}


.site-nav a {
	color: var(--ink-soft);
	text-decoration: none;
}

.site-nav a:hover {
	color: var(--brand, var(--brand));
	text-decoration: underline;
}

main {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 1.25rem;
}

.hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 2rem;
	align-items: center;
	padding: 3rem 0 2rem;
}

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--brand, var(--brand));
	margin-bottom: 0.5rem;
}

.hero h1 {
	font-size: clamp(1.7rem, 3.4vw, 2.7rem);
	line-height: 1.12;
	margin-bottom: 0.9rem;
}

.lead {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

.lead.narrow {
	max-width: 46rem;
}

.hero-actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 1.2rem;
}

.hero-media img {
	width: 100%;
	height: auto;
	max-width: 420px;
	margin: 0 auto;
	display: block;
}

.section {
	padding: 2.4rem 0;
	border-top: 1px solid var(--line);
}

.section h2 {
	font-size: clamp(1.3rem, 2.4vw, 1.8rem);
	margin-bottom: 1rem;
}

.steps {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
	counter-reset: step;
}

.steps li {
	border-left: 3px solid var(--brand, var(--brand));
	padding: 0.2rem 0 0.2rem 1rem;
}

.steps li strong {
	display: block;
	font-size: 1.02rem;
	margin-bottom: 0.25rem;
}

.steps li span {
	color: var(--ink-soft);
	font-size: 0.92rem;
}

.norm-grid,
.commit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1rem;
}

.norm-grid article,
.commit-grid article {
	margin: 0;
	border: 1px solid var(--line);
	border-radius: 0.5rem;
	padding: 1rem 1.1rem;
	background: var(--surface-soft);
}

.norm-grid h3,
.commit-grid h3 {
	font-size: 1rem;
	margin-bottom: 0.4rem;
}

.norm-grid p,
.commit-grid p {
	font-size: 0.9rem;
	color: var(--ink-soft);
	margin: 0;
	line-height: 1.55;
}

.cta {
	text-align: center;
}

.cta .hero-actions {
	justify-content: center;
}

.small {
	font-size: 0.82rem;
}

.site-footer {
	max-width: 72rem;
	margin: 2rem auto 0;
	padding: 1.5rem 1.25rem 2.5rem;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

.site-footer nav {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: 0.88rem;
}

@media (max-width: 760px) {
	.hero {
		grid-template-columns: 1fr;
		padding-top: 2rem;
	}
	.hero-media {
		order: -1;
	}
	/* Compact header: logo and theme on one row, navigation scrolls below. */
	.site-header {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding: 0.35rem 0.8rem;
		gap: 0.35rem 0.6rem;
	}
	.site-logo {
		order: 1;
	}
	.site-logo img,
	.site-logo svg {
		height: 26px;
	}
	.site-header .site-logo img {
		height: 26px;
		top: 2px;
	}
	.site-actions {
		order: 2;
		margin-left: auto;
	}
	.site-header .theme-switch {
		order: initial;
		margin-left: 0;
	}
	.site-header .theme-switch .theme-toggle {
		width: 2rem;
		height: 2rem;
		min-height: 2rem;
	}
	.site-nav {
		order: 3;
		flex: 1 0 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 1rem;
		font-size: 0.8rem;
		padding-bottom: 0.1rem;
		scrollbar-width: none;
	}
	.site-nav::-webkit-scrollbar {
		display: none;
	}
}


/* Long words (file names, serial numbers) must wrap instead of widening the page. */
.doc-title,
.doc-meta,
.doc-facts,
.machine-facts td,
.machine-facts th,
.machine-sub,
.machine-id {
	overflow-wrap: anywhere;
}

.machine-facts {
	table-layout: fixed;
	width: 100%;
}

@media (max-width: 560px) {
	main.machine {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.machine-topbar {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.doc-row {
		align-items: flex-start;
	}

	.watermark {
		font-size: clamp(2.5rem, 22vw, 6rem);
	}
}


/* Preview picture of the machine line. */
.machine-photo {
	margin: 1rem 0 1.25rem;
	border: 1px solid var(--line);
	border-radius: 0.6rem;
	overflow: hidden;
	background: var(--surface);
}

.machine-photo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 26rem;
	object-fit: cover;
}

.admin-thumb {
	width: 48px;
	height: 36px;
	object-fit: cover;
	border-radius: 0.3rem;
	border: 1px solid var(--line);
	background: var(--surface-soft);
	display: block;
}


/* Phone mockup in the hero: shows the product instead of a second logo. */
.hero-media {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.phone {
	width: min(280px, 78vw);
	border: 0.55rem solid var(--ink);
	border-radius: 2rem;
	padding: 0.4rem;
	background: var(--surface);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.phone-screen {
	background: var(--surface-soft);
	border-radius: 1.5rem;
	padding: 0.9rem 0.8rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.mock-id,
.mock-row {
	margin: 0;
	font-size: 0.72rem;
	color: var(--ink-faint);
}

.mock-title {
	margin: 0;
	font-weight: 700;
	font-size: 1rem;
	color: var(--ink);
}

.mock-button {
	align-self: flex-start;
	background: var(--brand);
	color: var(--on-brand);
	font-size: 0.78rem;
	padding: 0.35rem 0.7rem;
	border-radius: 0.35rem;
}

.mock-docs {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin-top: 0.35rem;
}

.mock-doc {
	font-size: 0.74rem;
	padding: 0.3rem 0.45rem;
	border-radius: 0.3rem;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink-soft);
}

.mock-locked {
	font-weight: 600;
	color: var(--ink);
}

.mock-caption {
	margin: 0;
	font-size: 0.82rem;
	color: var(--ink-faint);
	text-align: center;
	max-width: 16rem;
}


/* Revision navigation: a count with a link to the history at the bottom. */
.rev-meta {
	margin: 0.5rem 0 0.75rem;
	font-size: 0.85rem;
	color: var(--ink-soft);
}

.rev-meta a {
	font-weight: 600;
}

.rev-history {
	margin-top: 2rem;
	border-top: 1px solid var(--line);
	padding-top: 1rem;
}

.rev-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
}

.rev-table th,
.rev-table td {
	text-align: left;
	padding: 0.4rem 0.6rem;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

.rev-table th {
	color: var(--ink-soft);
	font-weight: 600;
}

.rev-table tr.rev-selected {
	background: var(--brand-soft);
}

.rev-table tr.rev-selected td {
	font-weight: 600;
}


/* Obligations table on the landing page. */
.table-wrap {
	overflow-x: auto;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
}

.norm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	background: var(--surface);
}

.norm-table th,
.norm-table td {
	text-align: left;
	padding: 0.55rem 0.7rem;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.norm-table th {
	color: var(--ink-soft);
	font-weight: 600;
	white-space: nowrap;
}

.norm-table td:nth-child(2) {
	color: var(--ink-soft);
}

.norm-table em {
	font-style: normal;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85em;
	color: var(--ink-soft);
}

.norm-table tbody tr:hover {
	background: var(--surface-soft);
}


/* Accessibility: keyboard users can jump straight to the content. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: var(--bg);
	padding: 0.6rem 1rem;
	border-radius: 0 0 var(--ui-radius, 0.4rem) 0;
	z-index: 100;
	font-size: 0.9rem;
}

.skip-link:focus,
.skip-link:focus-visible {
	left: 0;
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: 0;
}

/* Touch targets stay usable on phones. */
.theme-switch select,
.theme-switch button,
.lang-switch a,
.lang-switch .lang-active {
	min-height: 2.5rem;
	display: inline-flex;
	align-items: center;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Square controls and the machine search bar (classic look) ----------- */

.machine-topbar {
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	gap: 0.5rem;
	width: 100%;
	margin: 0;
	padding: 1rem 1.25rem 0;
}

.theme-switch {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
}

.theme-switch .theme-toggle {
	width: 2.5rem;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	margin: 0;
	border: 1px solid var(--line-strong);
	border-radius: 0;
	background: var(--surface);
	color: var(--ink);
}

/* Language switch: one sharp segmented strip, like the theme button. */
.lang-switch {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	height: 2.5rem;
	border: 1px solid var(--line-strong);
	border-radius: 0;
	background: var(--surface);
	overflow: hidden;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
}

.lang-switch a,
.lang-switch .lang-active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 0;
	padding: 0 0.7rem;
	margin: 0;
	border: 0;
	border-left: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	color: var(--ink-soft);
	font-weight: 600;
	text-decoration: none;
}

.lang-switch > :first-child {
	border-left: 0;
}

.lang-switch a:hover {
	background: var(--brand-soft);
	color: var(--brand-deep);
}

.lang-switch .lang-active {
	background: var(--brand);
	color: var(--on-brand);
}

/* Machine page search: just a square input and the Hledat button. */
.doc-search {
	display: block;
	margin: 1.5rem 0 2rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.doc-search-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	align-items: stretch;
	min-height: 3rem;
	border: 1px solid var(--line-strong);
	border-radius: 0;
	background: var(--surface);
	overflow: hidden;
}

.doc-search-row input {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0.8rem 1rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.doc-search-row input::-webkit-search-decoration,
.doc-search-row input::-webkit-search-cancel-button,
.doc-search-row input::-webkit-search-results-button,
.doc-search-row input::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.doc-search-row input:focus,
.doc-search-row input:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: -2px;
}

.doc-search-row button {
	flex: 0 0 auto;
	align-self: stretch;
	white-space: nowrap;
	margin: 0;
	padding: 0 1.5rem;
	border: 0;
	border-left: 1px solid var(--brand);
	border-radius: 0;
	background: var(--brand);
	color: var(--on-brand);
	font-weight: 600;
}

.doc-search-row button:hover {
	background: var(--brand-deep);
	border-left-color: var(--brand-deep);
}

@media (max-width: 560px) {
	.machine-topbar {
		padding: 0.75rem 1rem 0;
		gap: 0.5rem;
	}
	.doc-row {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}
	.doc-meta {
		white-space: normal;
	}
	.machine-logo img {
		height: 2rem;
	}
	.machine-topbar-actions {
		gap: 0.4rem;
	}
	.doc-search-row button {
		padding: 0 0.9rem;
	}
}

/* Hero phone with a QR code peeking out from behind it (landing only). */
.hero-phone {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 1.5rem 0 0 2rem;
}

.hero-phone .phone {
	position: relative;
	z-index: 1;
	width: min(250px, 72vw);
	padding: 0.2rem;
	border: 0.3rem solid #101613;
	border-radius: 2rem !important;
	background: #101613;
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
}

.hero-phone .phone::before {
	content: "";
	position: absolute;
	top: 0.2rem;
	left: 50%;
	width: 32%;
	height: 0.6rem;
	transform: translateX(-50%);
	background: #101613;
	border-radius: 0 0 0.7rem 0.7rem !important;
	z-index: 2;
}

.hero-phone .phone::after {
	content: "";
	position: absolute;
	top: 0.42rem;
	left: 50%;
	width: 0.3rem;
	height: 0.3rem;
	transform: translateX(-50%);
	background: #2c3a33;
	border-radius: 50% !important;
	z-index: 3;
}

.hero-phone .phone-screen {
	border-radius: 1.5rem !important;
	padding: 1.25rem 0.8rem 0.9rem;
}

.qr-peek {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 8.5rem;
	padding: 0.55rem;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
	transform: rotate(-8deg);
}

.qr-peek img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
}

@media (max-width: 760px) {
	.hero-phone {
		padding: 1rem 0 0 1.2rem;
	}
	.hero-phone .phone {
		width: min(215px, 68vw);
		border-width: 0.25rem;
		padding: 0.15rem;
		border-radius: 1.7rem !important;
	}
	.hero-phone .phone-screen {
		border-radius: 1.25rem !important;
		padding-top: 1.1rem;
	}
	.qr-peek {
		width: 6rem;
		padding: 0.4rem;
	}
}

/* Machine/document/paper topbar: brand home link on the left, controls right. */
.machine-topbar {
	justify-content: space-between;
	align-items: center;
}

.machine-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
}

.machine-logo img {
	display: block;
	height: 2.5rem;
	width: auto;
}

.machine-topbar-actions {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
	margin-left: auto;
}
/* The landing header's mobile order rule must not reverse the machine topbar. */
.machine-topbar .machine-logo {
	order: 0;
}

/* On dark surfaces the topbar controls need a lighter outline than the page
   border token, otherwise the square theme/language buttons disappear. */
:root[data-theme="dark"] .machine-topbar .lang-switch,
:root[data-theme="dark"] .machine-topbar .theme-switch .theme-toggle {
	border-color: #667085;
	background: #111a22;
}

:root[data-theme="dark"] .machine-topbar .lang-switch a {
	color: #d0d5dd;
}

:root[data-theme="dark"] .machine-topbar .lang-switch a:hover {
	background: #1d2939;
	color: #ffffff;
}

:root[data-theme="dark"] .machine-topbar .theme-switch .theme-toggle:hover {
	background: #1d2939;
	border-color: #98a2b3;
}

/* Global dark-surface controls: keep outlined square controls legible on the
   landing header, login and machine/document pages. */
:root[data-theme="dark"] .theme-switch .theme-toggle,
:root[data-theme="dark"] .site-admin {
	border-color: #667085;
	background: #111a22;
	color: #e4e7ec;
}

:root[data-theme="dark"] .theme-switch .theme-toggle:hover,
:root[data-theme="dark"] .site-admin:hover {
	border-color: #98a2b3;
	background: #1d2939;
	color: #ffffff;
}

/* Logo accent: the light cyan from the QRNAVOD mark. The tenant brand colour
   still themes headings and links, but primary machine actions stay visibly
   clickable and match the logo on both light and dark surfaces. */
:root {
	--brand-accent: #3ec8db;
	--brand-accent-hover: #2cb8cc;
	--brand-accent-ink: #08222a;
}

.doc-search-row button {
	background: var(--brand-accent);
	border-left-color: var(--brand-accent);
	color: var(--brand-accent-ink);
}

.doc-search-row button:hover {
	background: var(--brand-accent-hover);
	border-left-color: var(--brand-accent-hover);
	color: var(--brand-accent-ink);
}

main.machine a.brand-accent[role="button"] {
	background: var(--brand-accent);
	border-color: var(--brand-accent);
	color: var(--brand-accent-ink);
}

main.machine a.brand-accent[role="button"]:hover,
main.machine a.brand-accent[role="button"]:focus-visible {
	background: var(--brand-accent-hover);
	border-color: var(--brand-accent-hover);
	color: var(--brand-accent-ink);
	filter: none;
}