/**
 * Lišta kroků (includes/kroky.php).
 *
 * Kostra a chování; barvy jsou na tokenech --ded-fe-*. Značkový vzhled
 * (praporky se šikmým řezem) si bere šablona webu, viz docs/vzhled.md.
 */

.ded-kroky { margin: 0 0 30px; }

.ded-kroky-pas {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ded-krok {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px 14px 18px;
	background: var(--ded-fe-surface-alt, #efefef);
	color: var(--ded-fe-muted-strong, #5a5a5a);
}

/* Klikatelný krok (žádost) vypadá stejně jako neklikatelný (tip). */
.ded-krok-tl {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.ded-krok-cislo {
	font-size: 19px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	opacity: 0.5;
	flex: 0 0 auto;
}
.ded-krok-nazev {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Hotové kroky jsou tmavé, ten aktuální červený. Text na tmavém podkladu
   musí být plně bílý, jinak se na černé nedá číst. */
.ded-krok.je-hotovy {
	background: var(--ded-fe-ink, #000);
	color: var(--ded-fe-white, #fff);
}
.ded-krok.je-hotovy .ded-krok-cislo { opacity: 0.75; }

.ded-krok.je-tady {
	background: var(--ded-fe-red, #a81521);
	color: var(--ded-fe-white, #fff);
}
.ded-krok.je-tady .ded-krok-cislo { opacity: 1; }

.ded-krok-tl:focus-visible {
	outline: 2.5px solid var(--ded-fe-red, #a81521);
	outline-offset: 3px;
}

/* Doplňkový řádek u dlouhé lišty (žádost): kolikátý krok a kolik hotovo. */
.ded-kroky-info {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--ded-fe-muted, #8a8a8a);
}

@media (max-width: 900px) {
	/* Sedm praporků vedle sebe se nevejde; názvy zůstanou jen tam, kde
	   návštěvník právě stojí. */
	.ded-kroky--dlouha .ded-krok { flex: 0 1 auto; padding-inline: 12px 14px; }
	.ded-kroky--dlouha .ded-krok .ded-krok-nazev { display: none; }
	.ded-kroky--dlouha .ded-krok.je-tady .ded-krok-nazev { display: block; }
}

@media (max-width: 640px) {
	.ded-kroky-pas { flex-direction: column; }
	.ded-krok { padding: 11px 16px; }
	.ded-kroky--dlouha .ded-krok .ded-krok-nazev { display: block; }
}