/* BOOKPAGE: вкладки тайтла — views/book/_tabs.php, views/book/index.php, www/js/modules/book-tabs.js.
 * Полоса в прежнем виде — .nb-novel-tabs из /css/nb.css: рамка на всю ширину страницы над тремя колонками, у вкладки
 * иконка, подпись и счётчик, активная — «таблетка» (--primary), справа «Настройки». Здесь — только то, что добавилось:
 * непрозрачный фон у липкой полосы, внутренняя лента с прокруткой вбок (затухание краёв, стрелки для мыши), отступ
 * прокрутки разделов под полосу и раскладка страницы тайтла, в которой основная колонка не шире своей ячейки сетки.
 * Разделы (#about, #toc, #comments, #reviews) идут подряд в основной колонке — вкладки только прокручивают к ним.
 * /css/nb.css подключается после этого файла — поэтому селекторы здесь на класс длиннее. */

/* ------------------------------------------------------------ полоса */
.nb-novel-tabs.nf-btabs-bar {
	/* рамка из nb.css (sticky, border, radius, margin) остаётся; лента с вкладками — внутри, в .nf-btabs-scroll */
	display: block; padding: 0; gap: 0; overflow: visible;
	top: var(--nf-btabs-top, 60px);   /* высоту шапки уточняет book-tabs.js */
	background: var(--background);    /* непрозрачный: прилипшая полоса не просвечивает текстом под собой */
	-webkit-backdrop-filter: none; backdrop-filter: none;
	transition: box-shadow .18s ease;
}
.nb-novel-tabs.nf-btabs-bar.is-stuck { box-shadow: 0 10px 18px -14px oklch(0 0 0 / .45); }
:root[data-theme="dark"] .nb-novel-tabs.nf-btabs-bar.is-stuck { box-shadow: 0 10px 20px -12px oklch(0 0 0 / .9); }
/* служебные страницы: та же полоса, но не липкая (у их содержимого свои якоря и панели) */
.nb-novel-tabs.nf-btabs-bar.is-links { position: relative; top: auto; z-index: 2; margin: 4px 0 22px; }

.nb-novel-tabs .nf-btabs-scroll {
	--nf-fade-l: 0px; --nf-fade-r: 0px;
	display: flex; gap: 2px; align-items: center; padding: 6px; border-radius: inherit;
	overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
}
.nb-novel-tabs .nf-btabs-scroll::-webkit-scrollbar { display: none; }
.nb-novel-tabs .nf-btabs-scroll > a { flex: none; -webkit-tap-highlight-color: transparent; }
.nb-novel-tabs .nf-btabs-scroll > a svg { flex: none; }
.nb-novel-tabs .nf-btabs-scroll > a:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.nb-novel-tabs .nf-btabs-scroll > a.active:hover { background: var(--primary); color: var(--primary-foreground); }
.nb-novel-tabs .nf-btabs-scroll > a.is-loading { opacity: .75; }
.nb-novel-tabs.nf-btabs-bar.is-fade-l .nf-btabs-scroll { --nf-fade-l: 36px; }
.nb-novel-tabs.nf-btabs-bar.is-fade-r .nf-btabs-scroll { --nf-fade-r: 36px; }
.nb-novel-tabs.nf-btabs-bar.is-fade-l .nf-btabs-scroll, .nb-novel-tabs.nf-btabs-bar.is-fade-r .nf-btabs-scroll {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--nf-fade-l), #000 calc(100% - var(--nf-fade-r)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--nf-fade-l), #000 calc(100% - var(--nf-fade-r)), transparent 100%);
}

/* стрелки прокрутки полосы (мышь; на сенсорных экранах — только затухание краёв) */
.nf-btabs-arrow {
	position: absolute; top: 1px; bottom: 1px; z-index: 2; width: 34px; padding: 0; border: 0; margin: 0;
	display: none; place-items: center; color: var(--foreground); cursor: pointer; background: transparent;
}
.nf-btabs-arrow.is-prev { left: 1px; background: linear-gradient(to right, var(--background) 45%, transparent); justify-items: start; padding-left: 4px; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.nf-btabs-arrow.is-next { right: 1px; background: linear-gradient(to left, var(--background) 45%, transparent); justify-items: end; padding-right: 4px; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.nf-btabs-arrow svg { width: 16px; height: 16px; opacity: .75; }
.nf-btabs-arrow:hover svg { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
	.nf-btabs-bar.is-fade-l .nf-btabs-arrow.is-prev, .nf-btabs-bar.is-fade-r .nf-btabs-arrow.is-next { display: grid; }
}

/* ------------------------------------------------------------ разделы подряд: описание → оглавление → комментарии → рецензии */
/* переход по якорю (вкладка, #comments, #rating из /rating, #Chapters, #d15 …): заголовок раздела, карточка правой
   колонки или элемент встают сразу под прилипшую полосу, а не под неё (высоту шапки и полосы меряет book-tabs.js) */
.nb-novel[data-book-tabs] [id] { scroll-margin-top: calc(var(--nf-btabs-top, 60px) + var(--nf-btabs-h, 52px) + 16px); }
/* рецензии (блок модуля отзывов, .nb-section) — с тем же отступом, что остальные разделы */
.nb-novel .nb-novel-main > #reviews { margin-top: 30px; }

/* ------------------------------------------------------------ блоки BookTabs «Команда», «Блог», «Анонсы»
 * (views/book/_tab_team.php, _tab_feed.php — ответ на X-NF-Partial: book-tab; страница тайтла их сейчас не подгружает) */
.nf-tab-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.nf-tab-head h2 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.nf-tab-head-n { margin-left: 4px; font-size: 14px; font-weight: 550; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.nf-tab-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.nf-tab-empty { padding: 28px 20px; }
.nf-tab-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13.5px; }

.nf-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nf-feed-item { min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.nf-feed-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted-foreground); }
.nf-feed-top .nb-chip { font-size: 11px; }
.nf-feed-time { margin-left: auto; }
.nf-feed-title { display: block; margin-top: 8px; color: var(--foreground); font-size: 16px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.nf-feed-title:hover { color: var(--link); text-decoration: none; }
.nf-feed-title.is-text { font-size: 14.5px; font-weight: 550; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nf-feed-text { margin: 6px 0 0; color: var(--muted-foreground); font-size: 13.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.nf-feed-meta { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--muted-foreground); }
.nf-feed-author { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--foreground); font-weight: 550; }
.nf-feed-ava { width: 22px; height: 22px; font-size: 10.5px; }
.nf-feed-cmt { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--muted-foreground); }
.nf-feed-cmt:hover { color: var(--foreground); text-decoration: none; }

.nf-tab-team-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 250px); gap: 18px 24px; align-items: start; }
.nf-tab-team-list { min-width: 0; }
.nf-tab-team-list .nb-team { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 14px; }
.nf-tab-team-list .nb-panel-more { display: none; }   /* «Вся команда» уже в шапке блока */
/* в карточке правой колонки строка заходит на поля карточки (margin: 0 -8px), здесь полей нет — не выходим за колонку */
.nf-tab-team-list .nb-team-row { margin-inline: 0; }
.nf-tab-team-join { display: grid; gap: 12px; justify-items: start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); font-size: 13px; }
.nf-tab-team-join p { margin: 0; }
.nf-tab-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.nf-tab-kv dt { color: var(--muted-foreground); font-weight: 500; }
.nf-tab-kv dd { margin: 0; font-weight: 550; min-width: 0; }
.nf-tab-status { display: flex; align-items: center; gap: 6px; font-weight: 550; }
.nf-tab-status.is-bad { color: var(--destructive); }
@media (max-width: 1000px) { .nf-tab-team-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ колонки: основная не шире своей ячейки сетки
 * Причина наложения: в оглавлении все ячейки, кроме названия, в одну строку (white-space: nowrap), а бейдж платной
 * главы («15 монет · бесплатно через 4 д») тоже не переносился — таблица становилась шире основной колонки (739 px
 * в колонке 632 px) и рисовалась поверх правой. Теперь оглавление меряет свою ширину (container query): в колонке
 * 530–720 px ячейки компактнее (поля 8 px, дата — в две строки, бейдж — в две строки), и все столбцы, как раньше,
 * помещаются; когда тесно и так — сначала уходит полоска прогресса (процент остаётся), потом «Активность», потом статус.
 * Страховка — прокрутка таблицы вбок внутри своей рамки, а не поверх правой колонки. */
.nb-novel-grid > .nb-novel-main { min-width: 0; }
.nb-novel .nb-toc { container: nb-toc / inline-size; max-width: 100%; overflow-x: auto; }
.nb-novel .nb-toc #Chapters { width: 100%; max-width: 100%; }
/* бейдж платной главы — строчный блок: в узкой ячейке текст переносится по словам, иконка остаётся у текста */
.nb-novel .nb-toc #Chapters .nb-coin-badge { display: inline-block; white-space: normal; max-width: 100%; box-sizing: border-box; }
.nb-novel .nb-toc #Chapters .nb-coin-badge svg { display: inline-block; vertical-align: -2px; }
.nb-novel .nb-toc #Chapters .nb-coin-badge .in { white-space: nowrap; }   /* «· бесплатно через 4 д» — одной строкой */
@container nb-toc (max-width: 720px) {
	/* «бесплатно через 4 д» — второй строкой бейджа и без разделителя «·» в начале строки */
	.nb-novel .nb-toc #Chapters .nb-coin-badge .in { display: block; white-space: normal; }
	.nb-novel .nb-toc #Chapters .nb-coin-badge .sep { display: none; }
}
@media (min-width: 761px) {
	/* «Активность», статус и полоска прогресса видны везде, где им хватает места (nb.css прятал их по ширине окна) */
	.nb-novel .nb-toc #Chapters .dat,
	.nb-novel .nb-toc #Chapters .st { display: table-cell; }
	.nb-novel .nb-toc #Chapters .nb-ready-cell .nb-progress { display: block; }
	@container nb-toc (max-width: 720px) {
		.nb-novel .nb-toc #Chapters thead th:not(.t),
		.nb-novel .nb-toc #Chapters tbody td:not(.t) { padding-left: 8px; padding-right: 8px; }
		.nb-novel .nb-toc #Chapters tbody td:last-child { padding-right: 10px; }
		.nb-novel .nb-toc #Chapters td.dat { white-space: normal; text-wrap: balance; }   /* «14 июля / 2026 г.» */
		.nb-novel .nb-toc #Chapters td.st .nb-chip { font-size: 11px; padding: 1px 7px; }
		.nb-novel .nb-toc #Chapters .nb-ready-cell { gap: 6px; }
		.nb-novel .nb-toc #Chapters .nb-ready-cell .nb-progress { width: 44px; }
		.nb-novel .nb-toc #Chapters .nb-ready-cell span { min-width: 32px; }
	}
	@container nb-toc (max-width: 600px) {
		.nb-novel .nb-toc #Chapters .nb-ready-cell .nb-progress { display: none; }
	}
	@container nb-toc (max-width: 540px) {
		.nb-novel .nb-toc #Chapters .dat { display: none; }
	}
	@container nb-toc (max-width: 460px) {
		.nb-novel .nb-toc #Chapters .st { display: none; }
	}
}
/* три колонки (от 1181 px): основная колонка не уже 533 px — «Активность» видна всегда, таблица в неё помещается */
@media (min-width: 1181px) {
	.nb-novel .nb-toc #Chapters .dat { display: table-cell; }
}
/* две колонки (планшет): правая колонка уходит под основную — сразу под неё, а не под длинную левую
   (иначе под короткой основной колонкой оставалась пустая полоса высотой в левую колонку) */
@media (min-width: 761px) and (max-width: 1180px) {
	.nb-novel-grid > .nb-novel-left { grid-row: 1 / span 2; }
	.nb-novel-grid > .nb-novel-main { grid-row: 1; }
	.nb-novel-grid > .nb-novel-right { grid-row: 2; }
}
/* строки над таблицей переносятся, а не распирают колонку */
.nb-novel .nb-toc-section .nb-section-head { flex-wrap: wrap; }
.nb-novel .nb-toc-head { flex-wrap: wrap; min-width: 0; }
.nb-novel .nb-toc-bar > * { min-width: 0; max-width: 100%; }

/* ------------------------------------------------------------ телефон */
@media (max-width: 760px) {
	/* как раньше: полоса во всю ширину экрана, только нижняя граница; вкладки прокручиваются вбок до самого края */
	.nb-novel-tabs.nf-btabs-bar { margin: 0 -16px 18px; border-width: 0 0 1px; border-radius: 0; }
	.nb-novel-tabs.nf-btabs-bar.is-links { margin: 0 -16px 18px; }
	.nb-novel-tabs .nf-btabs-scroll { padding: 5px 16px; scroll-padding-inline: 16px; border-radius: 0; }
	.nf-btabs-arrow.is-prev, .nf-btabs-arrow.is-next { border-radius: 0; }
	/* колонки здесь display: contents, разделы — ячейки общей сетки; порядок как на странице: описание, сведения,
	   оглавление, комментарии, рецензии (nb.css ставил рецензии перед комментариями) */
	.nb-novel .nb-novel-main > #comments { order: 8; }
	.nb-novel .nb-novel-main > #reviews { order: 9; margin-top: 30px; }
	.nf-feed-item { padding: 12px 14px; }
	/* блоки левой/правой колонки (в DOM раньше/позже разделов, на экране — ниже) не должны становиться якорем прокрутки:
	   когда оглавление или комментарии растут, браузер прокручивал страницу за ними */
	.nb-novel-left > *, .nb-novel-grid > .nb-novel-right { overflow-anchor: none; }
}

@media (prefers-reduced-motion: reduce) {
	.nb-novel-tabs.nf-btabs-bar { transition: none; }
}

/* ------------------------------------------------------------ BANNER: баннер тайтла — размытый фон верха страницы
 * (TitleBanner::backdropHtml(), views/book/index.php). Вместо фона из обложки (.nb-novel-backdrop в nb.css): широкая
 * картинка тайтла на всю ширину окна, размыта и чуть увеличена (края размытия не видны), сверху вниз уходит в цвет
 * страницы — к описанию текст стоит уже на чистом фоне (в тёмной теме это затемнение, в светлой — осветление).
 * Блок абсолютный и под содержимым (z-index: -1): вёрстку не сдвигает. Селекторы длиннее — nb.css подключается позже. */
.nb-novel > .nb-novel-backdrop.is-banner {
	--tbn-blur: 0px;	/* размытие баннера тайтла: владелец выбрал «без размытия» (было 20 → 15 → 8 → 5 → 2px); вернуть — поставить, например, 5px */
	--tbn-opacity: .5;	/* видимость баннера тайтла (владелец: 50%; было .8 в светлой и .95 в тёмной теме) */
	top: -28px; height: 600px; overflow: hidden; isolation: isolate;
	background: var(--background); filter: none; opacity: 1;
	-webkit-mask-image: none; mask-image: none;
}
.nb-novel > .nb-novel-backdrop.is-banner img {
	position: absolute; left: -48px; top: -48px; width: calc(100% + 96px); height: calc(100% + 96px); max-width: none;
	object-fit: cover; filter: blur(var(--tbn-blur)) saturate(1.2); opacity: var(--tbn-opacity); user-select: none; -webkit-user-drag: none;
}
.nb-novel > .nb-novel-backdrop.is-banner::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(180deg,
			color-mix(in oklab, var(--background) 34%, transparent) 0%,
			color-mix(in oklab, var(--background) 52%, transparent) 26%,
			color-mix(in oklab, var(--background) 78%, transparent) 56%,
			color-mix(in oklab, var(--background) 94%, transparent) 80%,
			var(--background) 100%);
}
/* тёмная тема: подложка сверху тоньше — к описанию сгущается в затемнение */
:root[data-theme="dark"] .nb-novel > .nb-novel-backdrop.is-banner img { opacity: var(--tbn-opacity); filter: blur(var(--tbn-blur)) saturate(1.3); }
:root[data-theme="dark"] .nb-novel > .nb-novel-backdrop.is-banner::after {
	background:
		linear-gradient(180deg,
			color-mix(in oklab, var(--background) 14%, transparent) 0%,
			color-mix(in oklab, var(--background) 38%, transparent) 26%,
			color-mix(in oklab, var(--background) 72%, transparent) 56%,
			color-mix(in oklab, var(--background) 93%, transparent) 80%,
			var(--background) 100%);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .nb-novel > .nb-novel-backdrop.is-banner img { opacity: var(--tbn-opacity); filter: blur(var(--tbn-blur)) saturate(1.3); }
	:root:not([data-theme="light"]) .nb-novel > .nb-novel-backdrop.is-banner::after {
		background: linear-gradient(180deg, color-mix(in oklab, var(--background) 14%, transparent) 0%, color-mix(in oklab, var(--background) 38%, transparent) 26%,
			color-mix(in oklab, var(--background) 72%, transparent) 56%, color-mix(in oklab, var(--background) 93%, transparent) 80%, var(--background) 100%);
	}
}
@media (max-width: 900px) {
	.nb-novel > .nb-novel-backdrop.is-banner { height: 420px; }
	.nb-novel > .nb-novel-backdrop.is-banner { --tbn-blur: 0px; }
}
@media (max-width: 560px) {
	.nb-novel > .nb-novel-backdrop.is-banner { height: 360px; }
}
/* меньше прозрачности / больше контраста: фон бледнее или без картинки */
@media (prefers-reduced-transparency: reduce) {
	.nb-novel > .nb-novel-backdrop.is-banner img { opacity: .4; }
}
@media (prefers-contrast: more), (forced-colors: active) {
	.nb-novel > .nb-novel-backdrop.is-banner { display: none; }
}
@media print {
	.nb-novel > .nb-novel-backdrop.is-banner { display: none; }
}