/* Notabenoid — модуль «Библиотека» (/library, /history, кнопка полки, лента «Продолжить чтение»).
 * Только переменные темы. nb.css подключается позже, поэтому переопределения его классов
 * пишутся с более специфичными селекторами. */

.nb-lib [hidden], .nb-shelf [hidden], .nb-lib-item [hidden], [data-show-if][hidden] { display: none !important; }

/* ------------------------------------------------------------ вкладки-полки */
.nb-lib-tabs {
	display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
	border-bottom: 1px solid var(--border); margin: 0 0 16px;
}
.nb-lib-tabs::-webkit-scrollbar { display: none; }
.nb-lib-tabs a {
	display: inline-flex; align-items: center; gap: 7px; flex: none;
	padding: 10px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent;
	color: var(--muted-foreground); font-size: 14px; font-weight: 550; white-space: nowrap;
}
.nb-lib-tabs a:hover { color: var(--foreground); text-decoration: none; }
.nb-lib-tabs a.is-active { color: var(--foreground); border-bottom-color: var(--primary); }
.nb-lib-tabs a svg { color: var(--destructive); }
.nb-lib-tabs b {
	min-width: 20px; box-sizing: border-box; padding: 1px 7px; border-radius: var(--radius-pill); text-align: center;
	background: var(--secondary); color: var(--muted-foreground); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.nb-lib-tabs a.is-active b { background: var(--primary); color: var(--primary-foreground); }

/* ------------------------------------------------------------ панель над сеткой */
.nb-lib-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; font-size: 13px; }
.nb-lib-toolbar b { color: var(--foreground); font-variant-numeric: tabular-nums; }
.nb-lib-sort { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.nb-lib-sort label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted-foreground); font-weight: 500; }
.nb-lib .nb-lib-sort select { width: auto; min-height: 32px; height: 32px; padding: 4px 8px; font-size: 13px; margin: 0; }

/* ------------------------------------------------------------ карточки */
.nb-lib-grid { align-items: start; }
.nb-lib-item { display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: opacity .2s, transform .2s; }
.nb-lib-item.is-leaving, .nb-lib-hrow.is-leaving { opacity: 0; transform: scale(.96); }
.nb-lib-item.is-busy { opacity: .65; }
.nb-lib-item .nb-book-card .m { align-items: center; }
.nb-lib-muted-bell { display: inline-flex; align-items: center; gap: 3px; }

.nb-cover .nb-lib-new {
	display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill);
	background: var(--primary); color: var(--primary-foreground); font-size: 11.5px; font-weight: 700;
	box-shadow: var(--elev-2); font-variant-numeric: tabular-nums;
}
.nb-cover .nb-lib-fav {
	display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-pill);
	background: var(--card-solid); color: var(--destructive); box-shadow: var(--elev-2);
}
.nb-cover .nb-lib-fav svg { fill: currentColor; }

.nb-lib-progline { display: flex; align-items: center; gap: 8px; margin-top: -2px; font-size: 11px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-lib-prog { flex: 1; min-width: 24px; height: 3px; border-radius: var(--radius-pill); background: var(--muted); overflow: hidden; }
.nb-lib-prog i { display: block; height: 100%; background: var(--primary); border-radius: inherit; }

.nb-lib-actions { display: flex; align-items: center; gap: 6px; }
.nb-lib-actions .nb-lib-cont { flex: 1 1 auto; min-width: 0; justify-content: flex-start; overflow: hidden; }
.nb-lib-actions .nb-lib-cont span { overflow: hidden; text-overflow: ellipsis; }
.nb-lib-actions span.nb-lib-cont { font-size: 12px; }
.nb-lib-actions .nb-lib-menu > summary.nb-btn { width: 30px; padding: 0; border-radius: var(--radius); justify-content: center; }
.nb-lib-actions .nb-lib-menu[open] > summary.nb-btn { background: var(--muted); }
/* узкие карточки (телефон): кнопке «Продолжить» не хватает места на иконку */
.nb-lib-item { container-type: inline-size; }
/* container-type делает карточку отдельным контекстом наложения — поднимаем ту, у которой открыто меню */
.nb-lib-item.is-menu-open, .nb-lib-item:has(.nb-lib-menu[open]) { position: relative; z-index: 30; }
@container (max-width: 150px) {
	.nb-lib-actions .nb-lib-cont { padding: 0 8px; gap: 5px; font-size: 12px; }
	.nb-lib-actions .nb-lib-cont svg { display: none; }
	.nb-lib-actions .nb-lib-menu > summary.nb-btn { width: 26px; }
}

/* меню полки (общие пункты _status_menu) */
.nb-lib-menu .nb-dropdown, .nb-shelf-menu .nb-dropdown { min-width: 230px; }
.nb-dropdown .nb-lib-check { margin-left: auto; display: inline-flex; visibility: hidden; }
.nb-dropdown button.on .nb-lib-check { visibility: visible; }
.nb-dropdown button.on { font-weight: 650; }
.nb-dropdown .nb-lib-danger, .nb-dropdown .nb-lib-danger:hover { color: var(--destructive); }
.nb-dropdown button[data-lib-action] svg:first-child { color: var(--muted-foreground); flex: none; }
.nb-dropdown button.on svg:first-child, .nb-dropdown .nb-lib-danger svg:first-child { color: currentColor; }

.nb-lib-pager { margin-top: 28px; display: flex; justify-content: center; }
.nb-lib-pager ul.yiiPager { margin: 0; padding: 0; list-style: none; }

/* ------------------------------------------------------------ пустые состояния, гость */
.nb-lib-empty p { max-width: 56ch; margin-left: auto; margin-right: auto; }
.nb-lib-empty-ico {
	display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-pill);
	background: var(--secondary); color: var(--foreground); margin-bottom: 12px;
}
.nb-lib-features { margin-top: 22px; }
.nb-lib-features .nb-card { padding: 18px 20px; }
.nb-lib-features .nb-lib-empty-ico { width: 36px; height: 36px; margin-bottom: 8px; }
.nb-lib-features h4 { margin: 0 0 4px; }
.nb-lib-features p { margin: 0; font-size: 13.5px; }

/* ------------------------------------------------------------ история */
.nb-lib-day { margin-bottom: 24px; }
.nb-lib-day > .nb-eyebrow { margin: 0 0 8px 4px; }
.nb-lib .nb-lib-day-card { padding: 4px; }
.nb-lib-hrow { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--radius-lg); transition: opacity .2s, transform .2s, background .15s; }
.nb-lib-hrow + .nb-lib-hrow { border-top: 1px solid var(--border); border-radius: 0; }
.nb-lib-hrow:hover { background: var(--muted); }
.nb-lib-hcover { flex: none; width: 48px; }
.nb-lib-hcover .nb-cover { border-radius: var(--radius); }
.nb-lib-hcover .nb-cover .ph { font-size: 18px; padding: 4px; }
.nb-lib-hcover .nb-cover .ph small { display: none; }
.nb-lib-hrow .body { flex: 1; min-width: 0; }
.nb-lib-hrow .t { display: block; font-weight: 600; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-lib-hrow .t:hover { text-decoration: none; color: var(--foreground); opacity: .85; }
.nb-lib-hrow .m { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-top: 2px; font-size: 12.5px; color: var(--muted-foreground); }
.nb-lib-hrow .m .ch { max-width: 28ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--foreground); }
.nb-lib-hprog { display: flex; align-items: center; gap: 8px; margin-top: 7px; max-width: 280px; font-size: 11.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.nb-lib-hprog .nb-progress { flex: 1; height: 4px; }
.nb-lib-hact { display: flex; align-items: center; gap: 4px; flex: none; }
.nb-lib .nb-btn.nb-lib-danger-text, .nb-lib .nb-btn.nb-lib-danger-text:hover { color: var(--destructive); }
@media (max-width: 600px) {
	.nb-lib-hrow { gap: 10px; padding: 10px 8px; }
	.nb-lib-hact .nb-btn .lbl { display: none; }
	.nb-lib-hact .nb-btn { width: 32px; padding: 0; }
	.nb-lib-hrow .m .ch { display: none; }
}

/* ------------------------------------------------------------ кнопка полки на странице перевода */
.nb-shelf { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; vertical-align: middle; }
.nb-shelf.is-busy { opacity: .65; pointer-events: none; }
.nb-shelf .nb-menu > summary.nb-btn { padding: 0 10px 0 12px; border-radius: var(--radius); gap: 7px; }
.nb-shelf .nb-menu > summary.nb-btn:not(.nb-btn-sm) { padding: 0 12px 0 14px; border-radius: var(--radius); }
.nb-shelf .nb-shelf-caret { opacity: .7; }
.nb-shelf.is-in .nb-shelf-main { border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); }
.nb-shelf .nb-shelf-toggle { width: 28px; padding: 0; color: var(--muted-foreground); }
.nb-shelf .nb-shelf-toggle:not(.nb-btn-sm) { width: 36px; }
.nb-shelf .nb-shelf-toggle:hover { color: var(--foreground); }
.nb-shelf .nb-shelf-fav.is-on { color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 40%, var(--border)); }
.nb-shelf .nb-shelf-bell.is-on { color: var(--foreground); border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); }
.nb-shelf .nb-shelf-toggle.is-on svg { fill: currentColor; }

/* ------------------------------------------------------------ лента «Продолжить чтение» */
.nb-lib-cont-card .m { font-variant-numeric: tabular-nums; }
.nb-lib-rail-prog { display: block; height: 4px; margin-top: 7px; border-radius: var(--radius-pill); background: var(--muted); overflow: hidden; }
.nb-lib-rail-prog i { display: block; height: 100%; background: var(--primary); border-radius: inherit; }

/* ------------------------------------------------------------ счётчики в профиле */
.nb-lib-mini .nb-eyebrow { display: flex; align-items: center; gap: 6px; }
.nb-lib-mini .nb-stats { margin-top: 0; }
.nb-lib-mini a.nb-stat { color: var(--foreground); transition: background .15s; }
.nb-lib-mini a.nb-stat:hover { background: var(--muted); text-decoration: none; }
.nb-lib-mini .nb-stat.is-zero b { color: var(--muted-foreground); }