/*
 * Společný základ tiskových listů (CV v obou návrzích a motivační dopis): stůl, lišta, list A4, patička, tisk,
 * hlavička dopisu a kontakty s ikonami. Barvy z tokenů (shared/tokens.css). CV je vždy světlé, list je bílý
 * kvůli tisku a kolem něj je „stůl“. Rozložení A4 je výchozí; telefon si ho upravuje jen pod @media screen,
 * takže tisk z telefonu dá stejné A4 jako z počítače. Návrhy CV: editorial.css a terminal.css.
 */
:root {
	--cv-desk: #e6e3da;
	--cv-sheet: #ffffff;
	--cv-shadow: 0 1px 2px rgb(18 18 18 / 0.08), 0 10px 36px rgb(18 18 18 / 0.13);
	--cv-pad-top: 11mm;
	--cv-pad-x: 15mm;
	--cv-pad-bottom: 9mm;
}

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

html {
	background: var(--cv-desk);
	color: var(--ink);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: var(--space-4) var(--space-4) var(--space-7);
	font: 400 16px/1.5 var(--font-body);
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.icon {
	flex: none;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Lišta nad listem – jen na obrazovce. */
.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-5);
	width: 210mm;
	max-width: 100%;
	margin: 0 auto var(--space-4);
}

.toolbar__home {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	margin-right: auto;
	font: 500 13px/1 var(--font-mono);
	letter-spacing: 0.04em;
}

.langs {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.langs a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	font: 500 13px/1 var(--font-mono);
	letter-spacing: 0.1em;
	color: var(--ink-muted);
}

.langs a[aria-current] {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Nenápadný odkaz z terminálového návrhu zpět na výchozí CV (jen obrazovka, lišta se netiskne). */
.toolbar__alt {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: 500 13px/1 var(--font-mono);
	color: var(--ink-muted);
	text-decoration: underline;
	text-decoration-color: var(--line);
	text-underline-offset: 4px;
}

.toolbar__alt:hover {
	color: var(--ink);
	text-decoration-color: currentColor;
}

.button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: 0 var(--space-4);
	border: var(--rule) solid var(--ink);
	border-radius: 0;
	background: var(--ink);
	color: var(--cv-sheet);
	font: 600 14px/1 var(--font-body);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.button:hover {
	border-color: var(--accent);
	background: var(--accent);
}

.button[hidden] {
	display: none;
}

/* List A4. Barvy podkladů (papírový sloupec, okno terminálu) se mají vytisknout, ne zahodit. */
.sheet {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 210mm;
	max-width: 100%;
	min-height: 297mm;
	margin: 0 auto;
	padding: var(--cv-pad-top) var(--cv-pad-x) var(--cv-pad-bottom);
	background: var(--cv-sheet);
	box-shadow: var(--cv-shadow);
	font: 400 8.6pt/1.4 var(--font-body);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
	/* Kdyby obsah přetekl na druhou stranu, okraje listu se zopakují i na ní. */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Modrá tečka za jménem (jako na lausman.dev). */
.dot {
	display: inline-block;
	color: var(--accent);
}

/* Kontakty s ikonami (CV „papír“ a dopis). */
.contact {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.5;
}

.contact a {
	display: inline-flex;
	align-items: center;
	gap: 1.6mm;
	overflow-wrap: anywhere;
}

.contact .icon {
	width: 1.05em;
	height: 1.05em;
	color: var(--ink-muted);
}

/* Hlavička dopisu: jméno s tečkou a role vlevo, kontakty vpravo, pod tím silná linka. */
.head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8mm;
	padding-bottom: 4mm;
	border-bottom: 1.5pt solid var(--line-strong);
}

.who__name {
	margin: 0;
	font: 700 3.6em/0.9 var(--font-display);
	letter-spacing: -0.05em;
}

.who__role {
	margin: 2.6mm 0 0;
	font: 500 1.3em/1.2 var(--font-display);
	letter-spacing: -0.01em;
}

.reach {
	display: flex;
	align-items: flex-end;
	gap: 4mm;
}

.head .contact {
	font-size: 0.96em;
}

.qr {
	flex: none;
	width: 19mm;
	height: 19mm;
	color: var(--ink);
}

.qr__code {
	display: block;
	width: 100%;
	height: 100%;
}

/* Patička sedí ve spodním okraji listu, ne v toku obsahu – jinak by delší (anglický) text přetekl na druhou
   stranu jen kvůli ní. Když obsah na druhou stranu přeteče, patička je na konci poslední strany. */
.foot {
	position: absolute;
	right: var(--cv-pad-x);
	bottom: 3.6mm;
	left: var(--cv-pad-x);
	margin: 0;
	font: 500 7.5pt/1.4 var(--font-mono);
	letter-spacing: 0.02em;
	color: var(--ink-muted);
}

/* Než motion.js převezme řízení, list se na obrazovce neukáže (jen s povoleným pohybem, pojistka v early.js). */
@media screen {
	html.motion:not(.motion-ready) .sheet {
		opacity: 0;
	}
}

/* Telefon a úzká okna: list se nezmenšuje, ale přeteče do jednoho sloupce s čitelným písmem. */
@media screen and (max-width: 40em) {
	body {
		padding: 0 0 var(--space-6);
	}

	.toolbar {
		gap: 0 var(--space-3);
		margin-bottom: 0;
		padding: var(--space-1) var(--space-4);
	}

	.toolbar__home {
		flex-basis: 100%;
	}

	.sheet {
		min-height: 0;
		padding: var(--space-5) var(--space-4);
		box-shadow: none;
		font-size: 15px;
	}

	.head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
	}

	.who__name {
		font-size: 2.4em;
	}

	.reach {
		width: 100%;
		justify-content: space-between;
	}

	/* Samostatné odkazy jako dotykové cíle aspoň 44 px. */
	.contact a,
	.foot a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* QR je pro papír; na telefonu, ze kterého by se měl načíst, nemá smysl. V tisku zůstane. */
	.qr {
		display: none;
	}

	.foot {
		position: static;
		margin-top: var(--space-5);
	}
}

@page {
	size: A4;
	margin: 0;
}

@media print {
	html,
	body {
		background: var(--cv-sheet);
	}

	body {
		padding: 0;
	}

	.toolbar {
		display: none;
	}

	.sheet {
		width: 210mm;
		max-width: none;
		/* O kousek menší než A4, aby zaokrouhlení nevyrobilo prázdnou druhou stranu. */
		min-height: 296mm;
		margin: 0;
		box-shadow: none;
	}

	/* Pohyb je jen pro obrazovku: kdyby se tisklo uprostřed animace, na papíře je vždy hotový stav. */
	.sheet,
	.sheet [data-rise],
	.sheet [data-line],
	.sheet [data-sec-head],
	.sheet [data-sec-head] > *,
	.sheet [data-node],
	.sheet [data-rail],
	.sheet [data-chip],
	.sheet [data-scale] > *,
	.sheet [data-dot],
	.sheet [data-name],
	.sheet [data-name] *,
	.sheet [data-type],
	.sheet [data-type] *,
	.sheet [data-cursor],
	.sheet .contact__item,
	.sheet .project,
	.sheet .summary {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		clip-path: none !important;
	}

	a:hover {
		text-decoration: none;
	}
}