/* ==========================================================================
   StopPDFL — A5 Sledovanie stavu podnetu
   Nadstavba nad base.css a front.css. Definuje len to, čo tam ešte nie je:
   vyhľadanie kódu, mriežku výsledku, spojnice časovej osi a prázdny stav.
   ========================================================================== */

/* --- Vyhľadanie sledovacieho kódu ------------------------------------------ */

.code-search { margin-top: 36px; max-width: 640px; }

.code-search__row { display: flex; gap: 14px; flex-wrap: wrap; }

.code-search__input {
	flex: 1 1 260px;
	min-width: 0;
	height: 56px;
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0 18px;
	font-family: var(--font-mono);
	/* 17 px — pod 16 px iOS pri fokuse priblíži celú stránku a rozbije layout */
	font-size: 17px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink);
	transition: border-color var(--dur-fast) var(--ease-out);
}
/* Rám hrubne na 2 px, o rovnaký 1 px sa uberie z paddingu, aby text neposkočil */
.code-search__input:focus {
	outline: none;
	border-color: var(--ink);
	border-width: 2px;
	padding: 0 17px;
}
.code-search__input::placeholder { color: var(--ink-quiet); opacity: 1; text-transform: none; }

.code-search__row--error .code-search__input {
	border-color: var(--signal);
	border-width: 2px;
	padding: 0 17px;
}

/* Rovnaká výška ako pole, aby dvojica sadla na jednu linku */
.code-search__submit { flex: none; min-height: 56px; padding: 0 28px; }

.code-search__error { margin-top: 10px; }

.code-search__mask {
	margin-top: 14px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-quiet);
}

/* --- Mriežka výsledku ------------------------------------------------------ */

.status-grid {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--gutter-md) 100px;
	display: grid;
	grid-template-columns: 8fr 4fr;
	gap: 44px;
	align-items: start;
}

.status-side { display: flex; flex-direction: column; gap: 20px; }

/* --- Karta spisu ----------------------------------------------------------- */

/* Karta spisu dýcha viac než bežná .card__body — je to hlavný obsah obrazovky */
.status-case .card__body { padding: 40px 48px; }

.status-case__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 22px;
}
.status-case__code { font-size: 18px; letter-spacing: .05em; font-weight: 500; color: var(--ink); }
.status-case__meta {
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-quiet);
}

/* --- Časová os spisu: spojnice medzi uzlami -------------------------------- */

/* front.css počíta so samostatným .timeline__spine s pevnou výškou. Tú by sme
   museli rátať v šablóne, preto si spojnicu k ďalšiemu uzlu kreslí každý uzol sám. */
.timeline--case { list-style: none; margin: 34px 0 0; }

.timeline--case .timeline__item::before {
	content: "";
	position: absolute;
	/* Stred bodky je 25 px vľavo od textu, čiara je 2 px široká */
	left: -26px;
	top: 10px;
	bottom: -10px;
	width: 2px;
	background: var(--ink);
	transform-origin: top center;
	animation: spdl-spine 420ms var(--ease-inout) both;
	animation-delay: calc(var(--i, 0) * 60ms);
}
.timeline--case .timeline__item:last-child::before { content: none; }

/* Úsek k stavu, ktorý ešte nenastal — prerušovaný, aby nič nesľuboval */
.timeline--case .timeline__item--to-future::before {
	width: 0;
	background: none;
	border-left: 2px dashed var(--line);
}

.timeline--case .timeline__item {
	animation: spdl-node-in 420ms var(--ease-out) both;
	animation-delay: calc(var(--i, 0) * 60ms);
}
/* Pečiatka dosadá o čosi neskôr než uzol — otlačok, nie výplň */
.timeline--case .stamp {
	animation: spdl-stamp 360ms var(--ease-out) both;
	animation-delay: calc(var(--i, 0) * 60ms + 120ms);
}

@keyframes spdl-spine {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}
@keyframes spdl-node-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}
/* Samostatná vlastnosť scale, aby sa nezmazal rotate(-2deg) z .stamp */
@keyframes spdl-stamp {
	from { opacity: 0; scale: 1.22; }
	to { opacity: 1; scale: 1; }
}

/* Výsledok aj prázdny stav prichádzajú tichým fade + posunom (M12) */
.status-case,
.status-empty { animation: spdl-result-in var(--dur) var(--ease-out) both; }

@keyframes spdl-result-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

/* --- Prázdny stav (kód ešte nie je zadaný) --------------------------------- */

.status-empty .card__body { padding: 48px; }
.status-empty__icon { color: var(--ink-faint); }
.status-empty__title { font-size: 26px; margin-top: 20px; }
.status-empty__text {
	margin-top: 12px;
	font-family: var(--font-display);
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--ink-soft);
	max-width: 48ch;
}
.status-empty .fineprint { display: block; margin-top: 26px; }

/* --- Bočné panely ---------------------------------------------------------- */

/* Nadpis panela v editoriálnom reze — 22 px podľa A5 */
.info-panel__title--display { display: block; font-size: 22px; line-height: 1.25; }

.helpline-list { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }

.status-side .info-panel__label { margin: 0; font-weight: 500; }
.info-panel__text--quote { font-style: italic; margin-top: 20px; }

/* Číslo linky je odkaz na vytáčanie, preto musí mať dotykový cieľ aspoň 44 px */
.status-side .helpline { min-height: 44px; }
.status-side .helpline__number {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-left: 10px;
	color: var(--ink);
	text-decoration: none;
}
.status-side .helpline__number:hover {
	color: var(--signal-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Responzívne ----------------------------------------------------------- */

@media (max-width: 980px) {
	.status-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 72px; }
	.status-case .card__body { padding: 32px 28px; }
	.status-empty .card__body { padding: 36px 28px; }
}

@media (max-width: 720px) {
	.code-search { margin-top: 28px; }
	.code-search__submit { width: 100%; }
	.status-grid { padding: 0 var(--gutter-md) 56px; }
	.status-case .card__body { padding: 26px 20px; }
	.status-empty .card__body { padding: 28px 20px; }
	.status-case__code { font-size: 16px; }
	.status-empty__title { font-size: 22px; }
}

/* --- Pohyb vypnutý na želanie systému -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.status-case,
	.status-empty,
	.timeline--case .timeline__item,
	.timeline--case .timeline__item::before,
	.timeline--case .stamp,
	.code-search__row--error {
		animation: none;
		opacity: 1;
		transform: none;
		scale: 1;
	}
	/* Pečiatky si musia ponechať svoje natočenie aj bez animácie */
	.timeline--case .stamp { transform: rotate(-2deg); }
	.timeline--case .stamp--ink { transform: rotate(-1deg); }
	.timeline--case .stamp--future { transform: none; }
}