/* HOME — главная: лента «Новые главы» (основная колонка) + сайдбар «Популярное» / «Последние комментарии» / «Жанры»,
 * страница «Все обсуждения» (/site/comments). Виды: views/site/index.php, _home_*.php; JS: /js/modules/home.js.
 * Только токены темы (nb.css), острые углы. До 1100px: одна колонка, разделы — вкладками (.is-tabbed ставит JS);
 * рядом с сайдбаром лента уже ~650px, и строки «в одну строку» там не читаются. Телефонные размеры кнопок — с 900px. */

/* ------------------------------------------------------------ раскладка */
.hm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px 30px; align-items: start; margin-top: 36px; }
.hm-feed, .hm-side { min-width: 0; }
.hm-side { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
/* «липкий» сайдбар: top считает home.js (min(шапка, высота окна − высота колонки)) — длинная колонка прилипает низом */
.hm-side.is-sticky { position: sticky; top: var(--hm-side-top, 76px); }
@media (max-width: 1180px) { .hm-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px 22px; } }
/* граница — та же, что MOBILE в home.js */
@media (max-width: 1100px) {
	.hm-layout { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
	.hm-side { gap: 26px; }
}

.hm-layout .nb-section-head { margin-bottom: 10px; }
.hm-side .nb-section-head h2 { font-size: 17px; }
.hm-card.nb-card { padding: 4px; }
.hm-empty { padding: 18px 16px; border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--muted-foreground); font-size: 13.5px; }
.hm-empty p { margin: 0; }

/* вкладки разделов на телефоне */
.hm-tabs {
	display: flex; gap: 2px; margin: 0 0 14px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-lg);
	background: var(--card); position: sticky; top: 60px; z-index: 20; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);	/* top — вплотную под шапкой (60px + её граница 1px поверх) */
}
.hm-tabs[hidden] { display: none !important; }
.hm-tabs button {
	flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 6px;
	border: 0; border-radius: var(--radius); background: transparent; color: var(--muted-foreground); font: 600 13px/1.1 var(--font-sans);
	cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-tabs button svg { flex: none; }
.hm-tabs button:hover { color: var(--foreground); background: var(--muted); }
.hm-tabs button[aria-selected="true"] { background: var(--primary); color: var(--primary-foreground); }
.hm-tabs button:focus-visible, .hm-seg-i:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.hm-layout.is-tabbed [data-hm-panel][hidden] { display: none !important; }
.hm-layout.is-tabbed .hm-side { gap: 0; }
.hm-layout.is-tabbed .hm-genres { margin-top: 28px; }

/* ------------------------------------------------------------ лента «Новые главы» */
.hm-feed-head { align-items: center; }
/* /?page=N#hm-feed: заголовок ленты не уходит под липкую шапку (и под полосу вкладок в режиме вкладок) */
.hm-feed { scroll-margin-top: 76px; }
.hm-layout.is-tabbed .hm-feed { scroll-margin-top: 118px; }
.hm-feed-head h2 small { font-size: 13px; font-weight: 500; }
.hm-feed-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hm-feed-all { white-space: nowrap; }

/* фильтр языков */
.hm-langs { position: relative; }
.hm-langs > summary { list-style: none; cursor: pointer; height: 28px; padding: 0 10px; font-size: 12.5px; box-sizing: border-box; }
.hm-langs > summary::-webkit-details-marker { display: none; }
.hm-langs > summary span { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.hm-langs[open] > summary svg:last-child { transform: rotate(180deg); }
.hm-langs-pop {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 260px; margin: 0; padding: 14px; display: grid; gap: 10px;
	background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-3);
}
.hm-langs-pop label { display: grid; gap: 4px; margin: 0; font-size: 12px; color: var(--muted-foreground); }
.hm-langs-pop select { width: 100%; margin: 0; }

.hm-list.nb-card { padding: 2px 6px; }
.hm-list { container-type: inline-size; }	/* ширина ленты — для узкого режима строк и предела ширины названия (cqw) */
.hm-day {
	margin: 0; padding: 12px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--muted-foreground); border-top: 1px solid var(--border);
}
.hm-list > .hm-day:first-child { border-top: 0; padding-top: 10px; }

/* строка ленты (общая для главной и /updates — //site/_upd_row) — ОДНА строка: [языки] [обложка] [название] [главы] … [время].
   Языковая пара — бейдж одной ширины (68px; редкая длинная пара вроде «шве → мом» расширяет только свою строку, а не
   обрезается): названия стоят ровной колонкой. Название и главы — две колонки сетки .hm-upd-main, обе
   minmax(свой минимум, своя длина): остаток строки делится между ними поровну, короткий берёт только свою длину, остальное —
   длинному. Поэтому текст обрезается, только когда места нет совсем, и пустоты рядом с многоточием не бывает.
   Минимумы: у названия — min(своя длина, 150px, 24 % ленты) (невидимый замер ::before из data-tt), у глав — номера, проценты,
   монеты и «и ещё N глав» целиком, сжимаются только названия глав (до «…», чтобы было видно, что текст обрезан).
   Если не влезают и минимумы, home.js (fitRows) прячет вторую главу — «и ещё N+1» (.is-fold), а в крайнем случае разрешает
   сжиматься и номеру (.is-tight). Высота у всех строк одна — 44px (граница сверху у каждой строки, у первой — прозрачная). */
.hm-upd {
	display: grid; grid-template-columns: auto 24px minmax(0, 1fr) auto; gap: 0 12px; align-items: center;
	min-height: 44px; padding: 3px 8px; box-sizing: border-box; border-top: 1px solid transparent; border-radius: var(--radius);
}
.hm-upd + .hm-upd { border-top-color: var(--border); border-radius: 0; }
.hm-upd:hover { background: var(--muted); }
.hm-pair {
	display: flex; align-items: center; justify-content: center; min-width: 68px; height: 20px; padding: 0 5px; box-sizing: border-box;
	border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--muted); color: var(--muted-foreground);
	font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; letter-spacing: .01em;
}
.hm-pair.is-empty { border-color: transparent; background: none; }
.hm-upd-cover { display: block; line-height: 0; }
.hm-upd-cover .nb-cover { width: 24px; box-sizing: border-box; border-radius: var(--radius-sm); }
.hm-upd-cover .nb-cover .ph { font-size: 11px; padding: 0; }
.hm-upd-cover .nb-cover .ph svg { width: 12px; height: 12px; }
.hm-upd-cover .nb-cover .ready { height: 2px; }
.hm-upd-main {
	display: grid; align-items: center; gap: 0 12px; min-width: 0; overflow: clip; overflow-clip-margin: 4px;	/* крайний случай без JS — срез, а не наезд на время */
	grid-template-columns: minmax(auto, max-content) minmax(auto, max-content);
}
/* невидимый «замер» названия (data-tt) в той же ячейке: минимум колонки названия; короткое название он не расширяет
   (max-width ограничивает только сам замер). Название-картинка (ShieldTitle, без data-tt) — не уже 80px. */
.hm-upd-main::before {
	content: attr(data-tt); grid-area: 1 / 1; align-self: start; height: 0; overflow: visible; visibility: hidden; pointer-events: none;
	font-size: 14px; font-weight: 650; line-height: 0; white-space: nowrap; max-width: 150px; max-width: min(150px, 24cqw);
}
.hm-upd-main:not([data-tt])::before { content: ""; width: 80px; }
.hm-upd.is-tight .hm-upd-main::before { display: none; }
.hm-upd-name { grid-area: 1 / 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.hm-upd-t {
	min-width: 0; height: 20px; color: var(--foreground); font-weight: 650; font-size: 14px; line-height: 20px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-upd-t:hover { color: var(--foreground); text-decoration: underline; }
/* картинка оригинального названия (ShieldTitle, 20px) — по верху строки, иначе строка на пару пикселей выше соседних */
.hm-upd-t .nf-ot { vertical-align: top !important; }
.hm-mine { flex: none; color: var(--rating-text); display: inline-flex; }
/* колонка глав не уже их минимума (min-width: auto; overflow: clip — не контейнер прокрутки) */
.hm-chaps {
	grid-area: 1 / 2; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center;
	gap: 0 8px; overflow: clip; overflow-clip-margin: 4px; font-size: 13px; line-height: 20px;	/* clip + поле: не срезать рамку фокуса */
}
/* главы делят свой кусок поровну, но не больше своей длины; минимум главы — номер + «…» + процент + монеты */
.hm-chaps li { flex: 1 1 0; max-width: max-content; overflow: clip; overflow-clip-margin: 4px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.hm-chaps li + li::before { content: "·"; flex: none; color: var(--muted-foreground); }
.hm-chaps li.hm-rest { flex: none; max-width: none; overflow: visible; }
.hm-chaps li.hm-rest::before { content: none; }
.hm-chaps a { color: var(--foreground); opacity: .88; white-space: nowrap; }
.hm-chaps a:hover { opacity: 1; }
/* номер — своя колонка (не сжимается), название главы — minmax(1.3em, 1fr): в минимум главы входит только «…» */
.hm-chaps li:not(.hm-rest) > a { display: grid; grid-template-columns: auto minmax(1.3em, 1fr); min-width: 0; overflow: hidden; }
.hm-cn { white-space: nowrap; }
.hm-ct { min-width: 0; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.hm-ct.is-all { grid-column: 1 / -1; }	/* без номера («Пролог»): обрезается всё название */
/* крайний случай (телефон, огромные номера и бейджи): «и ещё N глав» → «+N» (полный текст — в aria-label/title),
   и только если и так тесно — сжимается номер, с многоточием */
.hm-upd.is-tight .hm-chaps li:not(.hm-rest) > a { grid-template-columns: minmax(0, auto) minmax(1.3em, 1fr); }
.hm-upd.is-tight .hm-cn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hm-ready { flex: none; font-size: 11.5px; font-weight: 600; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.hm-chaps .nb-coin-badge { flex: none; font-size: 11px; line-height: 16px; padding: 0 6px; }
.hm-chaps .hm-rest a { color: var(--muted-foreground); opacity: 1; }
.hm-chaps .hm-rest a:hover { color: var(--foreground); }
/* «и ещё N глав»: полная форма; в узкой ленте — «+N»; вторая глава спрятана (.is-fold) — «и ещё N+1» (.hm-rest-*2) */
.hm-rest-s, .hm-rest-l2, .hm-rest-s2, .hm-chaps li.hm-rest.is-alt { display: none; }
.hm-chaps.is-fold .hm-c2, .hm-chaps.is-fold .hm-rest-l, .hm-chaps.is-fold .hm-rest-s { display: none; }
.hm-chaps.is-fold li.hm-rest.is-alt { display: flex; }
.hm-chaps.is-fold .hm-rest-l2 { display: inline; }
.hm-upd.is-tight .hm-rest-l, .hm-upd.is-tight .hm-chaps.is-fold .hm-rest-l2 { display: none; }
.hm-upd.is-tight .hm-rest-s, .hm-upd.is-tight .hm-chaps.is-fold .hm-rest-s2 { display: inline; }
.hm-upd.is-tight .hm-chaps.is-fold .hm-rest-s { display: none; }
.hm-when { min-width: 56px; text-align: right; font-size: 12px; color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* фокус с клавиатуры: a:focus из Bootstrap (тёмная рамка внутрь ссылки) перебивает общий :focus-visible — возвращаем кольцо темы;
   фокус мышью (после «Показать ещё» он переходит на новую строку) — без рамки и без подчёркивания a:focus из nb.css */
.hm-upd a:focus:not(:focus-visible) { outline: none; }
.hm-upd a:focus:not(:focus-visible):not(:hover) { text-decoration: none; }
.hm-upd a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }

/* узкая лента в одну строку (телефон в альбомной и узкое окно, 601–~790px): без обложки, «и ещё N глав» → «+N»
   (полный текст — в title/aria-label) — место отдаётся названиям глав */
@media (min-width: 601px) {
	@container (max-width: 760px) {
		.hm-upd { grid-template-columns: auto minmax(0, 1fr) auto; }
		.hm-upd-cover { display: none; }
		.hm-rest-l, .hm-chaps.is-fold .hm-rest-l2, .hm-chaps.is-fold .hm-rest-s { display: none; }
		.hm-rest-s, .hm-chaps.is-fold .hm-rest-s2 { display: inline; }
	}
}

/* «Показать ещё» */
.hm-more { display: flex; align-items: center; justify-content: center; gap: 10px 16px; flex-wrap: wrap; padding: 16px 8px 14px; border-top: 1px solid var(--border); }
.hm-more.is-end p { margin: 0; font-size: 13px; color: var(--muted-foreground); text-align: center; }
.hm-more-btn { min-width: 200px; }
.hm-more-btn.is-loading { opacity: .7; cursor: progress; }
.hm-more-btn.is-loading svg { animation: hm-spin 1s linear infinite; }
.hm-more-all { font-size: 13px; color: var(--muted-foreground); white-space: nowrap; }
@keyframes hm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hm-more-btn.is-loading svg { animation: none; } }
.hm-upd.is-new { animation: hm-in .35s ease-out; }
@keyframes hm-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .hm-upd.is-new { animation: none; } }

/* ------------------------------------------------------------ «Популярное» */
.hm-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.hm-seg[hidden] { display: none !important; }
.hm-seg-i {
	display: inline-flex; align-items: center; height: 28px; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--border);
	border-radius: var(--radius-pill); color: var(--muted-foreground); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.hm-seg-i:hover { color: var(--foreground); background: var(--muted); text-decoration: none; }
.hm-seg-i[aria-selected="true"] { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.hm-seg.is-sub { margin-top: -2px; gap: 4px; }
.hm-seg.is-sub .hm-seg-i { height: 24px; padding: 0 8px; font-size: 12px; border-style: dashed; }
.hm-seg.is-sub .hm-seg-i[aria-selected="true"] { border-style: solid; background: var(--secondary); color: var(--foreground); border-color: var(--ring); }
.hm-pop-panel { transition: opacity .15s; min-height: 120px; }
.hm-pop-panel[aria-busy="true"] { opacity: .5; }

.hm-pop-list { list-style: none; margin: 0; padding: 0; }
.hm-pop-list > li + li { border-top: 1px solid var(--border); }
.hm-pop-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px; color: var(--foreground); border-radius: var(--radius); }
.hm-pop-row:hover { background: var(--muted); color: var(--foreground); text-decoration: none; }
.hm-pop-row .nb-cover { width: 32px; flex: none; border-radius: var(--radius-sm); }
.hm-pop-row .nb-cover .ph { font-size: 14px; padding: 0; }
.hm-place { flex: none; width: 26px; display: grid; justify-items: center; gap: 1px; line-height: 1; }
.hm-place b { font-size: 15px; font-weight: 800; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.hm-place.is-top b { color: var(--foreground); }
.hm-delta { font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-delta.is-up { color: var(--success); }
.hm-delta.is-down { color: var(--destructive); }
.hm-delta.is-new { color: var(--link); font-weight: 600; }
.hm-pop-body { min-width: 0; flex: 1; display: grid; gap: 2px; }
.hm-pop-t { font-weight: 600; font-size: 13.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-pop-m { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-pop-m b { color: var(--foreground); font-weight: 600; }
.hm-pop-m .nb-rating { gap: 2px; font-weight: 700; }
.hm-dot { padding: 0 1px; }

/* ------------------------------------------------------------ комментарии */
.hm-cmts { display: grid; }
.hm-cmt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 8px; }
.hm-cmt + .hm-cmt { border-top: 1px solid var(--border); }
.hm-cmt-av { flex: none; display: block; line-height: 0; }
.hm-cmt-av .nb-avatar { width: 28px; height: 28px; font-size: 12px; }
.hm-cmt-body { min-width: 0; flex: 1; display: grid; gap: 3px; }
.hm-cmt-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 12.5px; }
.hm-cmt-who { font-weight: 650; color: var(--foreground); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.hm-cmt-who:hover { color: var(--foreground); }
.hm-cmt-head time { flex: none; margin-left: auto; font-size: 11.5px; color: var(--muted-foreground); white-space: nowrap; }
.hm-cmt-text {
	color: var(--foreground); opacity: .9; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-cmt-text:hover { opacity: 1; color: var(--foreground); text-decoration: none; }
.hm-cmt-where { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; }
.hm-cmt-where svg { flex: none; opacity: .8; }
.hm-cmt-where a { color: var(--muted-foreground); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hm-cmt-where a:hover { color: var(--foreground); }
.hm-cmt-where .hm-cmt-chap { flex: 0 1000 auto; }

/* страница «Все обсуждения» */
.hm-cmts.is-wide .hm-cmt { padding: 14px 12px; gap: 12px; }
.hm-cmts.is-wide .hm-cmt-av .nb-avatar { width: 36px; height: 36px; font-size: 14px; }
.hm-cmts.is-wide .hm-cmt-head { font-size: 13.5px; }
.hm-cmts.is-wide .hm-cmt-text { font-size: 14.5px; -webkit-line-clamp: 3; }
.hm-cmts.is-wide .hm-cmt-where { font-size: 12.5px; }
.hm-pager { margin-top: 22px; display: flex; justify-content: center; }
.hm-pager .pagination { margin: 0; }

/* ------------------------------------------------------------ жанры */
.hm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-chips .nb-chip { gap: 6px; }
.hm-count { font-size: .85em; font-weight: 500; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ телефон */
@media (max-width: 900px) {
	.hm-feed-head { align-items: flex-start; }
	.hm-feed-tools { width: 100%; justify-content: space-between; gap: 10px; }
	.hm-langs > summary { height: 34px; font-size: 13px; }
	.hm-langs-pop { left: 0; right: auto; width: min(300px, calc(100vw - 32px)); }
	.hm-list.nb-card { padding: 2px 4px; }
	.hm-more-btn { min-width: 0; flex: 1 1 100%; height: 44px; }
	.hm-seg-i { height: 34px; padding: 0 12px; font-size: 13px; }
	.hm-seg.is-sub .hm-seg-i { height: 30px; }
	.hm-pop-row { padding: 10px 6px; }
	.hm-cmt-where a, .hm-cmt-text, .hm-cmt-who { padding: 2px 0; }
	.hm-chips .nb-chip { min-height: 32px; }
}

/* узкий телефон: «языки → название» первой строкой, «главы … время» — второй (порядок чтения тот же); обложки нет
   (она встала бы между языками и названием и съела бы место у названия); обе строки не переносятся (многоточие) */
@media (max-width: 600px) {
	.hm-upd {
		grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pair name name" "chaps chaps when";
		gap: 3px 10px; padding: 7px 6px;
	}
	.hm-upd-cover { display: none; }
	.hm-upd-main { display: contents; }
	.hm-upd-main::before { display: none; }	/* иначе замер стал бы лишней ячейкой сетки строки */
	.hm-pair { grid-area: pair; }
	.hm-upd-name { grid-area: name; }
	.hm-chaps { grid-area: chaps; min-width: 0; }	/* вторая строка: не шире своей области; тесно — home.js сворачивает главы */
	.hm-when { grid-area: when; min-width: 0; font-size: 11.5px; }
}