/* PEEK — карточка тайтла при наведении мышью в списках (www/js/modules/title-peek.js, protected/components/TitlePeek.php).
 * Панель сайта: --popover, тень --elev-3, цвета — токены темы (светлая и тёмная одинаково). position: fixed — вёрстку не
 * двигает; на сенсорных экранах её нет совсем. */
.tp-card {
	position: fixed; z-index: 900; left: 0; top: 0; box-sizing: border-box; width: 344px; max-width: calc(100vw - 16px);
	padding: 14px; border-radius: var(--radius-lg); background: var(--popover); color: var(--foreground); box-shadow: var(--elev-3);
	font-size: 13px; line-height: 1.45; text-align: left; white-space: normal;
	opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; pointer-events: none;
}
.tp-card[hidden] { display: none; }
.tp-card[data-side="r"] { transform: translateX(-4px); }
.tp-card[data-side="l"] { transform: translateX(4px); }
.tp-card[data-side="t"] { transform: translateY(-4px); }
.tp-card.is-in { opacity: 1; transform: none; pointer-events: auto; }
.tp-card *, .tp-card *::before, .tp-card *::after { box-sizing: border-box; }
.tp-card a:hover { text-decoration: none; }

.tp-top { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; }
.tp-cover { display: block; line-height: 0; }
.tp-cover .nb-cover { width: 84px; border-radius: var(--radius); box-shadow: var(--elev-1); }
.tp-cover .nb-cover .ph { font-size: 26px; }
.tp-head { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tp-title { color: var(--foreground); font-weight: 700; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tp-title:hover { color: var(--link); }
.tp-orig { color: var(--muted-foreground); line-height: 1; overflow: hidden; }
.tp-author { font-size: 12.5px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-langs { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted-foreground); }
.tp-langs svg { flex: none; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.tp-chips .nb-chip { font-size: 11px; line-height: 1.6; padding: 0 7px; }
.tp-age.is-adult { background: color-mix(in oklab, var(--destructive) 16%, transparent); color: var(--destructive); }

.tp-stats { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border);
	display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 12.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.tp-stats li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tp-stats li > svg { flex: none; opacity: .85; }
.tp-stats .nb-rating { gap: 3px; }
.tp-stats .nb-rating svg { width: 13px; height: 13px; }
.tp-rank { color: var(--rating-text); }
.tp-rank b { font-weight: 750; }
.tp-rank span { color: var(--muted-foreground); }
.tp-ready .nb-progress { display: inline-block; width: 54px; height: 4px; }
.tp-ready .nb-progress > i { background: var(--success); }

.tp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 0; }
.tp-tags span { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius);
	background: var(--secondary); color: var(--foreground); font-size: 11.5px; font-weight: 600; }
.tp-tags span:not(.is-genre) { font-weight: 500; color: var(--muted-foreground); }
.tp-descr { margin: 10px 0 0; font-family: var(--font-serif); font-size: 13.5px; line-height: 1.55; color: color-mix(in oklab, var(--foreground) 86%, transparent);
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tp-actions { display: flex; gap: 8px; margin-top: 12px; }
.tp-actions .nb-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }

/* каталог: старое превью сетки (.nfc-pop) по наведению мышью заменено этой карточкой — одна карточка за раз; по фокусу
 * с клавиатуры оно остаётся (класс tp-on ставит title-peek.js только на устройствах с мышью) */
html.tp-on .nfc[data-view=grid] .nfc-item:hover:not(:has(.nfc-link:focus-visible)) .nfc-pop { opacity: 0 !important; visibility: hidden !important; transition: none !important; }

@media (hover: none), (pointer: coarse) { .tp-card { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .tp-card, .tp-card[data-side] { transition: none; transform: none; } }
@media print { .tp-card { display: none !important; } }