/*
 * Pod kapotou na úvodu (Home/lab/*.latte, lab.js): karta serveru ve stylu terminálu, dostupnost projektů,
 * jazyky, Gantt projektů a heatmapa commitů. Načítá jen úvodní stránka (default.latte, {block pageHead}).
 * Grafy jsou SVG ze serveru: poloha a délka přes atributy, barvy odsud (CSP: žádné inline styly).
 *
 * Barvy grafů vychází z tokenů (akcent, linky, papír). Navíc:
 * - šedá pro „ostatní“ (Gantt, jazyk Ostatní): 3,8 : 1 na papíře, 4,5 : 1 na tmavém,
 * - stupnice heatmapy: jeden odstín akcentu, více = tmavší (ve tmavém režimu světlejší), nejslabší úroveň
 *   má aspoň 3 : 1 proti papíru, sousední úrovně se liší o ΔL ≥ 0,06 (OKLCH), úroveň 0 = barva linky,
 * - terminál je tmavý v obou režimech (hodnoty tmavého režimu z tokens.css).
 */

.lab {
	--lab-gray: #7d796f;
	--lab-good: #15803d;
	--lab-bad: var(--danger);
	--lab-heat-0: var(--line);
	--lab-heat-1: #5880f5;
	--lab-heat-2: #3e62d4;
	--lab-heat-3: #2744b4;
	--lab-heat-4: #132594;

	--term-bg: #121212;
	--term-ink: #f1efe8;
	--term-dim: #aaa69b;
	--term-key: #8fa2ff;
	--term-line: #2f2d29;
}

/* Tmavě: s JS podle data-scheme (early.js: tmavý vzhled, systém v auto, tmavá paleta motivu Linkin Park), bez JS
   podle media query. Hodnoty jsou v obou blocích stejné. */
@media (prefers-color-scheme: dark) {
	:root[data-theme="auto"]:not([data-scheme]) .lab {
		--lab-gray: #807c73;
		--lab-good: #4ade80;
		--lab-heat-1: #4a5cbb;
		--lab-heat-2: #687de0;
		--lab-heat-3: #87a0ff;
		--lab-heat-4: #a9c3ff;
		--term-bg: #0b0b0a;
	}
}
:root[data-scheme="dark"] .lab {
	--lab-gray: #807c73;
	--lab-good: #4ade80;
	--lab-heat-1: #4a5cbb;
	--lab-heat-2: #687de0;
	--lab-heat-3: #87a0ff;
	--lab-heat-4: #a9c3ff;
	--term-bg: #0b0b0a;
}
/* Motiv Linkin Park: heatmapa a klíče v terminálu v akcentu alba místo modré (míchá se s papírem, ať platí
   pořadí úrovní ve světlé i tmavé paletě). */
:root[data-theme="lp"] .lab {
	--lab-heat-1: color-mix(in oklab, var(--accent) 50%, var(--paper));
	--lab-heat-2: color-mix(in oklab, var(--accent) 67%, var(--paper));
	--lab-heat-3: color-mix(in oklab, var(--accent) 84%, var(--paper));
	--lab-heat-4: var(--accent);
	/* Terminál je tmavý vždycky: klíče jako akcent alba zesvětlený k papíru terminálu (u světlých palet je akcent
	   tmavý a na černé by zmizel; axe 2026-10-20). */
	--term-key: color-mix(in oklab, var(--accent) 40%, #f1efe8);
}


/* ---------- rozvržení ---------- */

.lab__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 88px 24px;
}
.lab-block { min-width: 0; }
.lab-fetch { grid-column: 1 / span 7; }
.lab-code { grid-column: 8 / -1; }
.lab-status, .lab-timeline, .lab-heat { grid-column: 1 / -1; }

@media (max-width: 1079px) {
	.lab-fetch, .lab-code { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
	.lab__grid { row-gap: 72px; }
}

.lab-head {
	margin-bottom: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}
.lab-head__title {
	font: 700 clamp(24px, 2.4vw, 30px)/1.1 var(--font-display);
	letter-spacing: -0.03em;
}
.lab-head__note {
	max-width: 62ch;
	margin-top: 10px;
	color: var(--ink-muted);
	font-size: 15px;
	line-height: 1.55;
}

.lab-meta {
	margin-top: 18px;
	color: var(--ink-muted);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: none;
}

/* Popisek u kurzoru (sparkline, heatmapa). Vytváří lab.js, posouvá ho přes transform. */
.lab-tip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 80;
	padding: 8px 10px;
	background: var(--ink);
	color: var(--paper);
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	white-space: nowrap;
}
.lab-tip__value { display: block; font: 700 16px/1.2 var(--font-display); letter-spacing: -0.01em; }
.lab-tip__label { display: block; margin-top: 2px; font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.02em; opacity: 0.8; }


/* ---------- čísla (kód, commity) ---------- */

/* Pevná mřížka (ne podle délky čísel): napočítávání nesmí posouvat okolí (CLS). */
.lab-block { container-type: inline-size; }
.lab-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	row-gap: 20px;
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line);
}
.lab-stat {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	min-width: 0;
	padding: 0 16px 0 20px;
	border-left: 1px solid var(--line);
}
.lab-stat:first-child { padding-left: 0; border-left: 0; }
.lab-stat__value {
	margin: 0;
	font: 700 clamp(28px, 3vw, 38px)/1 var(--font-display);
	letter-spacing: -0.03em;
	white-space: nowrap;
}
.lab-stat__label { margin-top: 8px; color: var(--ink-muted); font-size: 14px; line-height: 1.35; }

@container (max-width: 620px) {
	.lab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lab-stat { padding: 0 12px 0 16px; }
	.lab-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
}


/* ---------- neofetch ---------- */

.term {
	border: 1px solid var(--term-line);
	background: var(--term-bg);
	color: var(--term-ink);
	font: 500 13px/1.6 var(--font-mono);
}
.term ::selection { background: var(--term-key); color: var(--term-bg); }
.term__bar-top {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 14px;
	border-bottom: 1px solid var(--term-line);
	color: var(--term-dim);
	font-size: 12px;
}
.term__dots { display: inline-flex; gap: 6px; }
.term__dots span { width: 9px; height: 9px; border: 1px solid var(--term-dim); }
.term__body { padding: 18px 20px 16px; }
.term__cmd { color: var(--term-ink); }
.term__prompt { color: var(--term-key); }
.term__out {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px 32px;
	align-items: start;
	margin-top: 14px;
}
.term__logo {
	margin: 4px 0 0;
	color: var(--term-ink);
	font: inherit;
	line-height: 1.32;
	white-space: pre;
}
.term__logo-dot { color: var(--term-key); }
.term__host { color: var(--term-key); }
.term__rule { color: var(--term-dim); }
.term__list { margin: 0; }
.term__row {
	display: grid;
	grid-template-columns: 12.5ch minmax(0, 1fr);
	column-gap: 0.5ch;
}
.term__row[hidden] { display: none; }
.term__row dt { color: var(--term-key); }
.term__row dt::after { content: ":"; }
.term__row dd { margin: 0; overflow-wrap: anywhere; }
.term__dim { color: var(--term-dim); }
/* Soundtrack: Linkin Park – tlačítko na setlist (fx/lp.js) vypadá jako ostatní hodnoty, podtržení až při najetí. */
.term__link {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	text-decoration: underline dotted var(--term-dim);
	text-underline-offset: 0.25em;
}
.term__link:hover { color: var(--term-key); text-decoration-style: solid; text-decoration-color: currentColor; }
.term__link:focus-visible { outline: 2px solid var(--term-key); outline-offset: 2px; }
.term__link[hidden], [data-lp-static][hidden] { display: none; }
[data-f] { display: inline-block; }
dd[data-f] { display: block; }
.term__bar {
	display: inline-block;
	width: 64px;
	height: 8px;
	margin: 0 0.4ch;
	vertical-align: 0.05em;
}
.term__bar-track { fill: var(--term-line); }
.term__bar-fill { fill: var(--term-key); }
.term__swatches { display: flex; margin-top: 14px; }
.term__swatch { width: 26px; height: 14px; }
.term__swatch--1 { background: #3a3936; }
.term__swatch--2 { background: #ff8a80; }
.term__swatch--3 { background: #4ade80; }
.term__swatch--4 { background: #f5c451; }
.term__swatch--5 { background: #8fa2ff; }
.term__swatch--6 { background: #d59bf6; }
.term__swatch--7 { background: #67d4e0; }
.term__swatch--8 { background: #f1efe8; }
.term__stamp {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid var(--term-line);
	color: var(--term-dim);
	font-size: 12px;
}
.term__led { flex: none; width: 8px; height: 8px; background: var(--term-key); }
.term.is-stale .term__led { background: transparent; box-shadow: inset 0 0 0 1.5px var(--term-dim); }

@media (max-width: 560px) {
	.term { font-size: 12px; }
	.term__body { padding: 16px 14px 14px; }
	.term__out { grid-template-columns: minmax(0, 1fr); }
	.term__logo { font-size: 11px; }
	.term__row { grid-template-columns: 11.5ch minmax(0, 1fr); }
}


/* ---------- jazyky ---------- */

.lab-langs { list-style: none; display: grid; gap: 12px; }
.lab-lang {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr) 3.9rem 4.6rem;
	align-items: center;
	column-gap: 12px;
	font-size: 15px;
	line-height: 1.3;
}
.lab-lang__name { font-weight: 600; overflow-wrap: anywhere; }
.lab-lang__bar { display: block; width: 100%; height: 10px; }
.lab-lang__track { fill: none; }
.lab-lang__fill { fill: var(--accent); }
.lab-lang--other .lab-lang__fill { fill: var(--lab-gray); }
.lab-lang--other .lab-lang__name { color: var(--ink-muted); }
.lab-lang__pct, .lab-lang__lines { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lab-lang__lines { color: var(--ink-muted); font-size: 14px; }

@media (max-width: 480px) {
	.lab-lang {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas: "name pct lines" "bar bar bar";
		row-gap: 6px;
	}
	.lab-lang__name { grid-area: name; }
	.lab-lang__bar { grid-area: bar; }
	.lab-lang__pct { grid-area: pct; }
	.lab-lang__lines { grid-area: lines; min-width: 4.6rem; }
}


/* ---------- dostupnost ---------- */

.lab-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lab-table th, .lab-table td {
	padding: 10px 16px 10px 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: middle;
}
.lab-table th:last-child, .lab-table td:last-child { padding-right: 0; }
.lab-table thead th {
	padding-bottom: 12px;
	border-bottom-color: var(--line-strong);
	color: var(--ink-muted);
	font: 500 12px/1.3 var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	vertical-align: bottom;
}
.lab-table__num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lab-table__trend { width: 1%; }
.lab-table__name a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: 700 19px/1.2 var(--font-display);
	letter-spacing: -0.02em;
	text-decoration: none;
}
.lab-table__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.lab-table__label { display: none; }
.lab-table__note { max-width: 24ch; color: var(--ink-muted); font-size: 13px; line-height: 1.4; }
.lab-spark + .lab-table__note { margin-top: 2px; }

.lab-state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lab-state .icon { width: 16px; height: 16px; }
.lab-state--ok .icon { color: var(--lab-good); }
.lab-state--down { color: var(--lab-bad); font-weight: 600; }
.lab-state--none { color: var(--ink-muted); }

.lab-spark { display: block; width: 168px; line-height: 0; cursor: crosshair; }
.lab-spark__svg { display: block; width: 168px; height: 36px; overflow: visible; }
.lab-spark__base, .lab-spark__line, .lab-spark__hair, .lab-spark__end path, .lab-spark__dot { vector-effect: non-scaling-stroke; }
.lab-spark__base { stroke: var(--line); stroke-width: 1; }
.lab-spark__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lab-spark__end path, .lab-spark__dot { fill: none; stroke-linecap: round; }
.lab-spark__ring { stroke: var(--paper); stroke-width: 10; }
.lab-spark__dot-end { stroke: var(--accent); stroke-width: 6; }
.lab-spark__hair { stroke: var(--ink); stroke-width: 1; }
.lab-spark__dot { stroke: var(--ink); stroke-width: 8; }

/* Telefon: tabulka jako karty (role v šabloně drží sémantiku tabulky i při jiném display). */
@media (max-width: 760px) {
	.lab-table, .lab-table tbody, .lab-table tr, .lab-table th, .lab-table td { display: block; }
	.lab-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.lab-table tbody { border-top: 1px solid var(--line-strong); }
	.lab-table__row {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 4px 12px;
		padding: 14px 0 18px;
		border-bottom: 1px solid var(--line);
	}
	.lab-table th, .lab-table td { padding: 0; border: 0; }
	.lab-table__name { grid-column: 1 / 3; }
	.lab-table__state { grid-column: 3; align-self: center; text-align: right; }
	.lab-table__num { align-self: end; text-align: left !important; }
	.lab-table__label {
		display: block;
		margin-bottom: 2px;
		color: var(--ink-muted);
		font: 500 11px/1.3 var(--font-mono);
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}
	.lab-table__state .lab-table__label { display: none; }
	.lab-table__trend { grid-column: 1 / -1; width: auto; margin-top: 10px; }
	.lab-spark, .lab-spark__svg { width: 100%; }
	.lab-table__num { white-space: normal; }
	.lab-table__note { max-width: none; }
}


/* ---------- projekty v čase ---------- */

.lab-gantt { --label: 19rem; position: relative; }
.lab-gantt__axis { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); }
.lab-gantt__axis .lab-gantt__years { grid-column: 2; display: block; overflow: visible; }
.lab-gantt__years text { fill: var(--ink-muted); font: 500 12px var(--font-mono); letter-spacing: 0.06em; }
.lab-gantt__years .lab-gantt__today-label { fill: var(--ink); text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; }
.lab-gantt__grid {
	position: absolute;
	top: 20px;
	left: var(--label);
	width: calc(100% - var(--label));
	height: calc(100% - 40px);
	overflow: visible;
	pointer-events: none;
}
.lab-gantt__year-line { stroke: var(--line); stroke-width: 1; }
.lab-gantt__today { stroke: var(--ink); stroke-width: 1; }
.lab-gantt__rows { position: relative; list-style: none; padding-block: 6px; border-block: 1px solid var(--line); }
.lab-gantt__row {
	display: grid;
	grid-template-columns: var(--label) minmax(0, 1fr);
	align-items: center;
	min-height: 44px;
}
.lab-gantt__label { display: flex; align-items: baseline; gap: 12px; min-width: 0; padding-right: 20px; }
.lab-gantt__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 0;
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lab-gantt__link:hover { text-decoration: underline; }
.lab-gantt__row--main .lab-gantt__link { font-weight: 700; }
.lab-gantt__row--archived .lab-gantt__link { color: var(--ink-muted); }
.lab-gantt__period { flex: none; margin-left: auto; color: var(--ink-muted); font-size: 11px; letter-spacing: 0.04em; white-space: nowrap; }
.lab-gantt__track { display: block; overflow: visible; }
.lab-gantt__bar--main { fill: var(--accent); }
.lab-gantt__bar--other { fill: var(--lab-gray); }
.lab-gantt__bar--archived { fill: none; stroke: var(--lab-gray); stroke-width: 1.5; }
.lab-gantt__arrow { fill: var(--lab-gray); }
.lab-gantt__arrow--main { fill: var(--accent); }

.lab-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; color: var(--ink-muted); font-size: 14px; }
.lab-legend__item { display: inline-flex; align-items: center; gap: 10px; }
.lab-legend__item svg { flex: none; overflow: visible; }

@media (max-width: 700px) {
	.lab-gantt { --label: 0px; }
	.lab-gantt__row { grid-template-columns: minmax(0, 1fr); padding: 2px 0 8px; }
	.lab-gantt__label { padding-right: 0; }
	.lab-gantt__track { margin-right: 10px; }
	.lab-gantt__years { width: calc(100% - 10px); }
	.lab-gantt__grid { width: calc(100% - 10px); }
}


/* ---------- heatmapa ---------- */

.lab-heat__frame { position: relative; }
.lab-heat__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	padding: 4px 0 10px;
}
.lab-heat__scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.lab-heat__svg { display: block; width: 100%; height: auto; min-width: 822px; overflow: visible; }
.lab-heat__axis { fill: var(--ink-muted); font: 500 11px var(--font-mono); letter-spacing: 0.02em; }
.lab-heat__cell--0 { fill: var(--lab-heat-0); }
.lab-heat__cell--1 { fill: var(--lab-heat-1); }
.lab-heat__cell--2 { fill: var(--lab-heat-2); }
.lab-heat__cell--3 { fill: var(--lab-heat-3); }
.lab-heat__cell--4 { fill: var(--lab-heat-4); }
.lab-heat__cursor { fill: none; stroke: var(--ink); stroke-width: 2; visibility: hidden; }
.lab-heat__cursor.is-on { visibility: visible; }

/* Na úzkém displeji náznak, že mřížka pokračuje: okraj mizí do papíru (na straně, kam jde posunout). */
.lab-heat__frame::before, .lab-heat__frame::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 10px;
	width: 40px;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--dur) var(--ease-out);
}
.lab-heat__frame::before { left: 0; background: linear-gradient(to right, var(--paper), transparent); }
.lab-heat__frame::after { right: 0; background: linear-gradient(to left, var(--paper), transparent); }
@media (max-width: 899px) {
	.lab-heat__frame.can-left::before, .lab-heat__frame.can-right::after { opacity: 1; }
}

.lab-heat__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 10px 24px;
	margin-top: 10px;
	color: var(--ink-muted);
	font-size: 13px;
}
.lab-heat__hint { max-width: 60ch; }
.lab-heat__legend { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.lab-heat__legend svg { display: block; }

/* Nápověda ke klávesnici jen když je heatmapa vybraná; posun do strany jen tam, kde se nevejde. */
.lab-heat__hint--keys { display: none; }
.lab-heat:focus-within .lab-heat__hint--keys { display: block; }
.lab-heat:focus-within .lab-heat__hint--scroll { display: none; }
@media (min-width: 900px) {
	.lab-heat__hint--scroll { display: none; }
}

/* Režim vysokého kontrastu by všem úrovním dal jednu systémovou barvu a heatmapa by ztratila smysl. */
@media (forced-colors: active) {
	.lab-heat__svg, .lab-heat__legend svg { forced-color-adjust: none; }
}