/* Мобайл-фёрст. Раскладки/видимость — CSS-состояния над единым потоком пар. */

* { box-sizing: border-box; }

:root {
  --bg: #fdfcf8;
  --fg: #26221c;
  --muted: #8a8377;
  --panel: #f4f1e8;
  --border: #e0dbcd;
  --accent: #b07a2c;
  --accent-soft: rgba(176, 122, 44, 0.22);
  --active-bg: rgba(176, 122, 44, 0.07);
  --error: #b03030;
}

body[data-theme="sepia"] {
  --bg: #f3ead6;
  --fg: #5a4636;
  --muted: #927a5c;
  --panel: #eaddc2;
  --border: #d9c8a3;
  --accent: #9a5a28;
  --accent-soft: rgba(154, 90, 40, 0.20);
  --active-bg: rgba(154, 90, 40, 0.08);
  --error: #a83232;
}

body[data-theme="dark"] {
  --bg: #191a1c;
  --fg: #d8d4cb;
  --muted: #847f74;
  --panel: #222326;
  --border: #36373b;
  --accent: #d09a4e;
  --accent-soft: rgba(208, 154, 78, 0.28);
  --active-bg: rgba(208, 154, 78, 0.09);
  --error: #e07070;
}

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 3.4rem 0 3.6rem;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.65 Georgia, "Times New Roman", serif;
}

/* В режиме чтения горизонтальный жест принадлежит приложению (смена глав), поэтому
   браузерная навигация «назад/вперёд» свайпом здесь выключена: иначе тот же жест
   уводил на карточку книги. Возврат остаётся кнопками и системной «назад». */
body[data-view="reading"] { overscroll-behavior-x: contain; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}
button:active { background: var(--accent-soft); }

/* ===== панели сверху/снизу ===== */
#topbar, #bottombar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem;
  background: var(--panel);
}
#topbar { top: 0; border-bottom: 1px solid var(--border); }
#bottombar { bottom: 0; border-top: 1px solid var(--border); justify-content: space-between; }

#progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 21;
  height: 3px;
  pointer-events: none;
}
#progress i {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: var(--accent);
  transition: width 0.15s linear;
}
body[data-view="library"] #progress { display: none; }

#chapter-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}

#btn-vis { font-size: 0.8rem; letter-spacing: 0.03em; }
#btn-warn { color: var(--error); font-size: 0.85rem; }
#page-indicator { color: var(--muted); font-size: 0.92rem; }
#btn-scan { color: var(--accent); font-size: 0.92rem; }
/* стрелки переходов между разделами — крупнее и чётче */
#btn-prev, #btn-next {
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--accent);
  padding: 0.1rem 0.7rem;
}
#btn-prev:active, #btn-next:active { background: var(--accent-soft); }
.nav-hidden { visibility: hidden; pointer-events: none; }

/* ===== поток пар ===== */
#stream {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0.5rem var(--read-pad, 0.8rem);
}

.pair {
  position: relative;
  margin: 0.3rem 0;
  padding: 0.55rem 0.7rem;
  border-inline-start: 3px solid transparent;
  border-radius: 8px;
  scroll-margin-top: 3.6rem;
  scroll-margin-bottom: 3.8rem;
}
.pair.active {
  border-inline-start-color: var(--accent);
  background: var(--active-bg);
}
.pair.bookmarked { padding-inline-end: 1.7rem; } /* резерв под метку, чтобы не налезала на текст */
.pair.bookmarked::after {
  content: "🔖";
  position: absolute;
  top: 0.45rem;
  inset-inline-end: 0.3rem;
  font-size: 0.8rem;
  opacity: 0.85;
}

#btn-bookmark.active-mark { color: var(--accent); }

.member { min-width: 0; }
.member p { margin: 0.3em 0; }
body[data-align="justify"] .member p { text-align: justify; }

/* форматирование контента (общий словарь с Вычиткой) */
.member u { text-decoration: underline; }
.member blockquote {
  margin: 0.4em 0; padding: 0.15em 0.9em;
  border-inline-start: 3px solid var(--accent-soft); color: var(--muted);
}
.member ul, .member ol { margin: 0.3em 0; padding-inline-start: 1.5em; }
.member li { margin: 0.15em 0; }
.member .callout {
  margin: 0.5em 0; border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: 6px; background: var(--panel); overflow: hidden;
}
.member .callout-title {
  font-weight: 600; padding: 0.3em 0.7em; font-size: 0.95em;
  background: var(--accent-soft); color: var(--fg);
}
.member .callout-body { padding: 0.25em 0.7em; }
.member .callout-body > :first-child { margin-top: 0.15em; }
.member .callout-body > :last-child { margin-bottom: 0.15em; }
.member .callout-warning, .member .callout-important { border-inline-start-color: #c9821e; }
.member .callout-danger, .member .callout-failure { border-inline-start-color: var(--error); }
.member .callout-success { border-inline-start-color: #3f8f54; }
/* таблицы (справочники: соответствия терминов, парадигмы). Ключевое — .table-wrap:
   широкая таблица прокручивается ВНУТРИ себя, страница вбок не разъезжается. */
.member .table-wrap {
  margin: 0.6em 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: 6px;
  /* без этого прокрутка на упоре «протекает» наверх и браузер понимает жест как
     «назад» — из главы улетало на карточку книги вместо следующей главы */
  overscroll-behavior-x: contain;
}
.member .table-wrap table {
  border-collapse: collapse; width: 100%;
  font-size: 0.92em; line-height: 1.4;
}
.member .table-wrap th, .member .table-wrap td {
  padding: 0.35em 0.6em; text-align: start;
  border-inline-end: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  /* колонки не должны схлопываться в лесенку из одиночных букв на узком экране */
  min-width: 4.5em; hyphens: none;
}
.member .table-wrap th:last-child, .member .table-wrap td:last-child { border-inline-end: 0; }
.member .table-wrap tr:last-child td { border-bottom: 0; }
.member .table-wrap thead th {
  background: var(--panel); font-weight: 600;
  position: sticky; top: 0;   /* шапка держится при прокрутке длинной таблицы */
}
/* выравнивание из разделителя (:--, --:, :-:) приходит инлайн-стилем — оно и побеждает */

/* блок формул и ASCII-схем: моноширинно, пробелы значимы, своя прокрутка */
.member pre.code {
  margin: 0.6em 0; padding: 0.6em 0.7em; overflow-x: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: 0.88em; line-height: 1.45; white-space: pre; tab-size: 2;
  overscroll-behavior-x: contain;   /* та же защита от жеста «назад», что у таблиц */
  /* формулы и схемы латинские — в RTL-книге блок всё равно читается слева направо */
  direction: ltr; text-align: left;
}
.member pre.code code { font: inherit; background: none; padding: 0; }
.member code {
  font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: 0.9em; padding: 0.05em 0.3em; border-radius: 4px;
  background: var(--accent-soft); direction: ltr; unicode-bidi: isolate;
}

/* иллюстрация в тексте: ![подпись](media/…) — график, схема, пояснение.
   Тап по картинке → полноэкранный просмотр (тот же, что у сканов страниц). */
.member .fig { margin: 0.7em 0; text-align: center; }
.member .fig img {
  max-width: 100%; height: auto; border-radius: 6px;
  border: 1px solid var(--border); cursor: zoom-in;
  /* схемы часто рисуют на белом — в тёмной теме такая картинка слепит */
  background: #fff;
}
.member .fig figcaption {
  margin-top: 0.35em; font-size: 0.85em; color: var(--muted);
  text-align: center; line-height: 1.35;
}
/* сворачиваемые callout’ы: [!тип]+ (раскрыт) / [!тип]- (свёрнут) */
.member details.callout-foldable > summary.callout-title {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 0.4em;
}
.member details.callout-foldable > summary.callout-title::-webkit-details-marker { display: none; }
.member details.callout-foldable > summary.callout-title::before {
  content: "\25B8"; font-size: 0.85em; flex: 0 0 auto;
  transition: transform 0.15s;
}
.member details.callout-foldable[open] > summary.callout-title::before { transform: rotate(90deg); }
.member details.callout-foldable:not([open]) > .callout-body { display: none; }
.member + .member {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--border);
}
.member[dir="rtl"] {
  font-family: "Scheherazade New", "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;
  font-size: 1.35em;
  line-height: 1.95;
}
.member.lang-hidden { display: none; }

/* «подсмотреть» второй язык: тап по паре в одноязычном режиме */
body[data-peek] .pair { cursor: pointer; }
.pair.peek .member.lang-hidden { display: block; opacity: 0.72; }

/* самопроверка: скрытый перевод обозначен заглушкой, тап по паре раскрывает/прячет */
body[data-quiz] .pair:not(.peek):not(.is-footnote):has(> .member.lang-hidden)::after {
  content: '· · · тапни — проверь себя · · ·';
  display: block;
  text-align: center;
  font-size: 0.78em;
  opacity: 0.4;
  padding: 0.05rem 0 0.15rem;
}

/* две колонки (альбом/планшет или ручной тумблер) */
body[data-layout="h"] .pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.2rem;
  align-items: flex-start;
}
body[data-layout="h"] .pair > .member { flex: 1 1 0; margin-top: 0; padding-top: 0; border-top: none; }
body[data-layout="h"] .fn-label { flex-basis: 100%; }

/* разделитель — физически на левом крае правой колонки (контейнер всегда ltr) */
body[data-layout="h"]:not([data-colrtl]) .pair > .member + .member {
  border-left: 1px dashed var(--border);
  padding-left: 1.2rem;
}

/* односторонний сектор во всю ширину: основной текст (только перевод) или
   оригинал без готового перевода — занимает всю строку, без пустой колонки */
body[data-layout="h"] .pair.solo > .member { flex-basis: 100%; }

/* «оригинал есть, перевод готовится»: во всю ширину + тонкая акцентная метка.
   Слово — в подсказке (title), в каждом секторе предложение не повторяем.
   Показываем только в параллельном чтении (в одноязычном просмотре data-peek). */
body:not([data-peek]) .pair.awaiting { position: relative; }
body:not([data-peek]) .pair.awaiting > .member {
  border-inline-end: 2px dashed var(--accent-soft);
  padding-inline-end: 0.9rem;
}
body:not([data-peek]) .pair.awaiting::after {
  content: "⟳";
  position: absolute; top: 0.3rem; inset-inline-end: 0.45rem;
  font-size: 0.8rem; line-height: 1; color: var(--accent); opacity: 0.6;
  pointer-events: none;
}

/* RTL-язык справа: порядок по направлению письма, разделитель — на правой колонке */
body[data-layout="h"][data-colrtl] .pair > .member[dir="ltr"] { order: 1; }
body[data-layout="h"][data-colrtl] .pair > .member[dir="rtl"] {
  order: 2;
  border-left: 1px dashed var(--border);
  padding-left: 1.2rem;
}

/* ===== сноски ===== */
.fnref {
  padding: 0 0.2em;
  color: var(--accent);
  font-size: 0.68em;
  font-weight: bold;
  vertical-align: super;
  line-height: 1;
}

.fn-divider {
  margin: 2rem 0 0.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 1rem;
  font-weight: normal;
  font-style: italic;
}

.pair.is-footnote { font-size: 0.95em; }

.fn-label {
  width: 100%;
  margin-bottom: 0.2rem;
  color: var(--muted);
  font-size: 0.85em;
}
.fn-back { color: var(--accent); font-size: 0.95em; }

.fn-inline {
  margin: 0.1rem 0 0.7rem 1.1rem;
  padding: 0.5rem 0.7rem;
  border-inline-start: 2px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--panel);
  font-size: 0.95em;
}
.fn-missing { color: var(--error); }

/* подсветка после прыжка/возврата */
.flash { animation: flash-bg 1.7s ease-out; }
@keyframes flash-bg {
  0%, 50% { background-color: var(--accent-soft); }
  100% { background-color: transparent; }
}

/* ===== оверлеи (оглавление, настройки) ===== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.45);
}
.overlay .sheet {
  width: 100%;
  max-height: 80vh;
  overflow: auto;
  padding: 1rem 1.2rem 1.5rem;
  border-radius: 14px 14px 0 0;
  background: var(--bg);
}
.sheet h2 { margin: 0 0 0.8rem; font-size: 1.05rem; }
.sheet label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.7rem 0;
}
.sheet select { font: inherit; padding: 0.2rem; max-width: 55%; }
.backup-row { display: flex; gap: 0.5rem; margin: 0.9rem 0; }
.backup-row button {
  flex: 1;
  padding: 0.45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent);
}
.link-btn { display: block; margin-top: 0.6rem; padding: 0.4rem 0; color: var(--accent); text-align: start; }

.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.1rem;
  border-bottom: 1px solid var(--border);
}
.stat-row b { font-size: 1.05rem; }
.stat-note { margin: 0.9rem 0 0; color: var(--muted); font-size: 0.9rem; }

.sheet.help h3 { margin-top: 1rem; }
.sheet.help ul { margin: 0.3rem 0; padding-inline-start: 1.2rem; }
.sheet.help li { margin: 0.3rem 0; font-size: 0.95rem; }
.sheet input[type="range"] { flex: 1; max-width: 55%; accent-color: var(--accent); }

/* ===== настройки шрифтов (на каждый язык) ===== */
#set-fonts { margin: 0.4rem 0; }
.font-group {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
}
.font-lang {
  margin-bottom: 0.1rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.font-group label { margin: 0.45rem 0; }
.font-size-val { color: var(--muted); font-size: 0.85rem; min-width: 3ch; text-align: end; }
.font-hint { color: var(--muted); font-size: 0.82rem; line-height: 1.35; margin-top: 0.15rem; }

/* Поиск по полке: кнопка, на её месте вырастает поле (см. app.js — Chrome
   заполнял почтой поле, существующее на загрузке). */
.shelf-qwrap { flex: 1 1 12rem; min-width: 0; display: flex; }
.shelf-qwrap .shelf-search { width: 100%; }
.shelf-qbtn {
  width: 100%; font: inherit; text-align: start;
  padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--muted); cursor: pointer;
}
.shelf-qbtn:hover { color: var(--fg); }

/* ===== ПОДСТРОЧНИК: перевод под словом ======================================
 * Глоссу рисует ПСЕВДОЭЛЕМЕНТ из data-g, а не <ruby><rt> — и это не украшение,
 * а условие совместимости: содержимое ::after не входит в textContent. От
 * textContent члена пары считаются смещения пометок (highlightRange), выделение
 * в режиме перевода (caretOffset/wordAt) и поиск по книге; глосса внутри <ruby>
 * влила бы туда русские слова и сдвинула бы всё сразу — включая то, что
 * попадает в буфер при копировании абзаца. См. шапку gloss.js.
 *
 * inline-grid, а не inline-block: базовая линия inline-grid берётся от ПЕРВОГО
 * ряда, то есть от самого слова, и строка текста не пляшет. У inline-block она
 * взялась бы от последней строки — то есть от глоссы, и слово уехало бы вверх.
 * Заодно ширина ячейки = max(слово, глосса), поэтому подписи соседних слов не
 * наезжают друг на друга без единой абсолютной координаты.
 */
.gl[data-g] {
  display: inline-grid;
  grid-template-rows: auto auto;
  /* слово по центру своей подписи: когда глосса шире слова, ячейка всё равно
     раздвигается, и при выключке влево вся дыра собиралась справа от слова —
     строка выглядела рваной. По центру просвет делится на две стороны и читается
     как разрядка, а не как пропущенное слово. */
  justify-items: center;
  /* интерлиньяж абзаца (до 2.6 в настройках) относится к целой строке, а не к
     слову: унаследованный, он отбивал подпись далеко вниз, и связь с её словом
     терялась. Ряду со словом хватает собственной высоты. */
  line-height: 1.1;
}
.gl[data-g]::after {
  content: attr(data-g);
  grid-row: 2;
  font-family: "PT Sans", system-ui, sans-serif;
  font-size: var(--gl-size, 0.62em);
  line-height: 1.15;
  color: var(--muted);
  opacity: var(--gl-dim, 0.62);
  letter-spacing: 0.01em;
  /* Длинная глосса не должна растаскивать абзац: хвост срезаем, полный текст
     всё равно показывает плашка по тапу. */
  max-width: 14em;
  padding-inline-end: 0.25em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#btn-gloss.on { color: var(--accent); }

/* Сектор, который человек не выверял. Пунктиром под каждой подписью тут не обойтись:
   пока не выверено ничего, это пунктир на всей странице, то есть шум, который
   перестают замечать за минуту. Гарантию для тафсира даёт переключатель «только
   выверенное» — он просто не рисует подписи; а грань нужна, чтобы читатель понял,
   что здесь подписи СКРЫТЫ, а не отсутствуют. */
body[data-gloss][data-gloss-ok] .pair.gl-unverified {
  border-inline-start: 2px dashed var(--border);
  padding-inline-start: 0.6rem;
}

/* плашка по тапу: полный перевод — в строке длинная глосса срезается многоточием,
   и без плашки прочитать её было бы негде. */
#gl-pop {
  position: absolute;
  z-index: 36;
  max-width: min(20rem, 90vw);
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  font-size: 0.9rem;
}
.gl-pop-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; }
#gl-pop-gloss { color: var(--muted); }
.gl-pop-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.gl-pop-actions button {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent);
}

/* пояснения и ряды кнопок внутри блоков настроек */
.set-hint { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.85rem; }
.set-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.set-actions button {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.9rem;
}
.set-actions button:disabled { color: var(--muted); }

.sheet-sub { margin: 0.8rem 0 0.3rem; color: var(--muted); font-size: 0.8rem; font-weight: normal; letter-spacing: 0.03em; text-transform: uppercase; }
#bm-list { margin: 0; padding: 0; list-style: none; }
.bm-item { display: flex; align-items: center; gap: 0.3rem; border-bottom: 1px solid var(--border); }
.bm-go { flex: 1; min-width: 0; display: block; padding: 0.55rem 0.2rem; text-align: start; }
.bm-meta { display: block; font-size: 0.9rem; }
.bm-note { display: block; color: var(--muted); font-size: 0.85rem; }
.bm-actions { display: flex; flex: none; }
.bm-actions button { padding: 0.4rem 0.35rem; font-size: 0.95rem; }

#toc-list { margin: 0; padding: 0; list-style: none; }
#toc-list li { border-bottom: 1px solid var(--border); }
#toc-list li.current button { color: var(--accent); font-weight: bold; }
#toc-list button {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.2rem;
  text-align: start;
}
#toc-list .toc-title { flex: 1; min-width: 0; }
#toc-list .toc-pages { flex: none; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
/* иерархия глав: дерево по level */
#toc-list li.toc-li { display: flex; align-items: baseline; }
#toc-list .toc-twist { flex: 0 0 auto; width: 1.4rem; padding: 0.6rem 0; background: none; border: none; color: var(--muted); font-size: 0.75rem; text-align: center; cursor: pointer; }
#toc-list .toc-twist.leaf { visibility: hidden; cursor: default; }
#toc-list .toc-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 0.6rem; width: auto; padding: 0.6rem 0.2rem; background: none; border: none; color: inherit; cursor: pointer; text-align: start; font: inherit; }
#toc-list li.current .toc-link { color: var(--accent); font-weight: bold; }
#toc-list .toc-grouptitle { flex: 1 1 auto; padding: 0.6rem 0.2rem; font-weight: 700; }
#toc-list li.toc-header { background: var(--accent-soft); }

@media (min-width: 600px) {
  .overlay { align-items: center; justify-content: center; }
  .overlay .sheet { max-width: 26rem; border-radius: 14px; }
}

/* ===== библиотека (стартовый экран) ===== */
.book-list { margin: 0 auto; padding: 0; max-width: 46rem; list-style: none; }
.book-list li { border-bottom: 1px solid var(--border); }
.book-list button {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  padding: 0.85rem 0.3rem;
  text-align: start;
}
.book-list .book-title { font-size: 1.05rem; }
.book-list .book-sub { color: var(--muted); font-size: 0.95rem; }
.book-list .book-note { color: var(--accent); font-size: 0.82rem; }

.continue-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  max-width: 46rem;
  margin: 0.2rem auto 0.8rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--accent-soft);
  border-inline-start: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--active-bg);
  text-align: start;
}
.continue-card .continue-cap { color: var(--accent); font-size: 0.8rem; letter-spacing: 0.02em; }
.continue-card .continue-title { font-size: 1.05rem; }

/* в библиотеке скрыты элементы режима чтения */
body[data-view="library"] #btn-home,
body[data-view="library"] #btn-toc,
body[data-view="library"] #btn-bookmark,
body[data-view="library"] #btn-mtmode,
body[data-view="library"] #btn-gloss,
body[data-view="library"] #btn-vis,
body[data-view="library"] #btn-warn,
body[data-view="library"] #bottombar { display: none !important; }
body[data-view="library"] { padding-bottom: 1rem; }

/* ── каталог: кнопки дерева/фильтра только в библиотеке ── */
#btn-cattree { display: none; }
body[data-view="library"] #btn-cattree,
.shelf-filter {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.3rem;
  position: relative;
  font: inherit; font-size: 0.9rem;
  padding: 0.34rem 0.7rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: inherit; cursor: pointer;
}
.shelf-filter:hover { border-color: var(--accent); color: var(--accent); }
.shelf-filter .filter-badge { position: static; margin-inline-start: 0.15rem; }
.filter-badge {
  margin-inline-start: 0.15rem; min-width: 1.05em; height: 1.05em; padding: 0 0.25em;
  font-size: 0.7rem; line-height: 1.05em; text-align: center;
  background: var(--accent); color: #fff; border-radius: 999px;
}

/* ── боковое дерево категорий ── */
#cat-tree {
  position: fixed; top: 3.4rem; left: 0; bottom: 0; width: 80%; max-width: 290px;
  z-index: 30; overflow-y: auto; background: var(--panel);
  border-inline-end: 1px solid var(--border); padding: 0.4rem 0.2rem 1rem;
  transform: translateX(-101%); transition: transform 0.2s ease;
}
#cat-tree.open { transform: none; box-shadow: 4px 0 16px rgba(0,0,0,0.25); }
body:not([data-view="library"]) #cat-tree { display: none; }
#tree-backdrop { position: fixed; inset: 0; z-index: 29; background: rgba(0,0,0,0.4); }
.tree-row { display: flex; align-items: center; }
.tree-twist {
  flex: 0 0 auto; width: 1.4rem; text-align: center; color: var(--muted);
  font-size: 0.75rem; padding: 0.35rem 0; background: none; border: none; cursor: pointer;
}
.tree-twist.leaf { visibility: hidden; }
.tree-link {
  flex: 1 1 auto; min-width: 0; text-align: start; background: none; border: none;
  color: inherit; cursor: pointer; padding: 0.35rem 0.4rem; border-radius: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem;
}
.tree-link:hover { background: var(--accent-soft); }
.tree-link.active { background: var(--active-bg); color: var(--accent); font-weight: 600; }
.tree-link.empty { color: var(--muted); }
.tree-link .tree-count { color: var(--muted); font-size: 0.8rem; font-weight: normal; }

/* ── строка «Продолжить» (тонкая, условная) ── */
.continue-line {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.5rem 0.7rem; margin: 0 0 0.5rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--active-bg); color: inherit; cursor: pointer;
  text-align: start; font: inherit;
}
.continue-line .cl-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.continue-line .cl-arrow { flex: 0 0 auto; color: var(--muted); }

/* ── широкий экран: дерево — постоянная колонка слева ── */
@media (min-width: 700px) {
  body[data-view="library"] #btn-cattree { display: none; }
  body[data-view="library"] #cat-tree { transform: none; box-shadow: none; width: 250px; }
  body[data-view="library"] #tree-backdrop { display: none !important; }
  body[data-view="library"] #stream { margin-inline-start: 250px; }
}

/* ── нижняя панель фильтров ── */
#filter-body .facet { margin: 0.2rem 0 0.8rem; }
#filter-body .facet-label { display: block; margin-bottom: 0.35rem; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase; }
.facet-empty { color: var(--muted); padding: 0.5rem 0; }
.filter-actions { display: flex; gap: 0.6rem; margin-top: 1rem; }
.filter-actions button {
  flex: 1; padding: 0.55rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: inherit; font: inherit; cursor: pointer;
}
.filter-actions button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── широкий экран: фильтры — выдвижная панель справа ──
   На телефоне это нижняя шторка, и там она уместна. На десктопе шторка
   висела посреди пустого экрана; вместо неё панель во всю высоту у правого
   края — зеркально дереву категорий слева. Правила намеренно привязаны к
   #filter-sheet: прочие .overlay (настройки, справка) остаются шторками. */
@keyframes filter-slide-in { from { transform: translateX(100%); } to { transform: none; } }
@media (min-width: 700px) {
  #filter-sheet { align-items: stretch; justify-content: flex-end; }
  #filter-sheet .sheet {
    width: 370px;
    max-width: 92vw;
    max-height: none;
    height: 100%;
    border-radius: 0;
    padding: 1.1rem 1.3rem 1.2rem;
    display: flex;
    flex-direction: column;
    box-shadow: -6px 0 20px rgba(0, 0, 0, 0.28);
    border-inline-start: 1px solid var(--border);
    animation: filter-slide-in 0.2s ease;
  }
  /* список фасетов прокручивается, кнопки прижаты к низу панели */
  #filter-sheet #filter-body { flex: 1 1 auto; overflow-y: auto; margin-inline-end: -0.4rem; padding-inline-end: 0.4rem; }
  #filter-sheet .filter-actions {
    flex: 0 0 auto;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
  }
}
@media (prefers-reduced-motion: reduce) {
  #filter-sheet .sheet { animation: none; }
}

/* ── переключатель видов ── */
.view-switch { display: flex; gap: 0.3rem; justify-content: flex-end; margin: 0.6rem 0 0.2rem; }
.vs-btn { padding: 0.25rem 0.55rem; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--muted); cursor: pointer; font-size: 1rem; }
.vs-btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ── вид «Корешки» ── */
.spineshelf {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px;
  max-width: 46rem; margin: 0.8rem auto 0; padding: 0 4px;
  min-height: 250px;
  border-bottom: 14px solid #8a5c2e; box-shadow: 0 5px 9px rgba(0, 0, 0, 0.28);
}
.spine {
  position: relative; flex: 0 0 auto; height: 240px; border: none;
  border-radius: 2px 3px 3px 2px; cursor: pointer; padding: 0; overflow: hidden; color: #fff;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.12) inset, -1px 0 2px rgba(0, 0, 0, 0.3);
  display: flex; align-items: center; justify-content: center;
}
.spine-stripe { position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.spine-stripe.st-ok { background: #3f8f54; }
.spine-stripe.st-warn { background: #c9821e; }
.spine-title {
  writing-mode: vertical-rl; text-orientation: mixed;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 86%;
  font-size: 0.8rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ── вид «Список» ── */
.booklist { max-width: 46rem; margin: 0.6rem auto 0; display: flex; flex-direction: column; gap: 0.3rem; }
.book-row {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: inherit; cursor: pointer; text-align: start; font: inherit;
}
.book-row .br-thumb { flex: 0 0 auto; width: 34px; height: 48px; border-radius: 2px; overflow: hidden; display: block; background: #fff; }
.book-row .br-thumb img, .book-row .br-thumb .cover-gen { width: 100%; height: 100%; object-fit: cover; }
.book-row .br-thumb .cover-gen { font-size: 0.5rem; padding: 0.2rem; gap: 0.15rem; }
.book-row .br-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-row .br-status { flex: 0 0 auto; display: flex; gap: 0.2rem; }
.book-row .br-status .review-badge { position: static; }

/* ===== поиск по книге ===== */
#search-form { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
#search-input { flex: 1; min-width: 0; font: inherit; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); }
#search-go { color: var(--accent); }
#search-results { font-size: 0.95rem; }
.search-count { margin-bottom: 0.4rem; color: var(--muted); font-size: 0.85rem; }
.search-item {
  display: block;
  width: 100%;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid var(--border);
  text-align: start;
}
.search-meta { display: block; margin-bottom: 0.15rem; color: var(--muted); font-size: 0.8rem; }
.search-snip { display: block; }
.search-snip mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 0.1em; }

/* подсветка найденного фрагмента в тексте после перехода */
mark.search-hit { background: var(--accent); color: var(--bg); border-radius: 3px; padding: 0 0.05em; }

/* сноска языка, который сейчас скрыт переключателем видимости */
.pair.is-footnote.fn-hidden { display: none; }

/* ===== пометки: выделения в тексте =====
   Цвета заданы полупрозрачными: одна и та же краска должна читаться и на светлой,
   и на сепии, и на тёмной теме, а сам текст остаётся цветом темы. */
:root {
  --mk-yellow: rgba(240, 190, 40, 0.34);
  --mk-green: rgba(90, 190, 110, 0.32);
  --mk-blue: rgba(80, 160, 230, 0.30);
  --mk-pink: rgba(230, 110, 180, 0.28);
  --mk-red: rgba(225, 80, 70, 0.28);
  /* Те же краски, но плотные: на трёхпиксельной грани списка и на кружке палитры
     полупрозрачный вариант почти не виден. */
  --mkb-yellow: #e0a81f;
  --mkb-green: #46a862;
  --mkb-blue: #3d86cc;
  --mkb-pink: #d15c9c;
  --mkb-red: #cf4a40;
}
body[data-theme="dark"] {
  --mk-yellow: rgba(240, 200, 60, 0.28);
  --mk-green: rgba(110, 210, 130, 0.26);
  --mk-blue: rgba(110, 180, 240, 0.26);
  --mk-pink: rgba(240, 130, 195, 0.24);
  --mk-red: rgba(240, 110, 100, 0.26);
}

mark.hl {
  background: var(--mk-yellow);
  color: inherit;
  border-radius: 2px;
  cursor: pointer;
}
mark.hl-yellow { background: var(--mk-yellow); }
mark.hl-green { background: var(--mk-green); }
mark.hl-blue { background: var(--mk-blue); }
mark.hl-pink { background: var(--mk-pink); }
mark.hl-red { background: var(--mk-red); }

/* у пометки есть заметка — подчеркнём, иначе выделение с мыслью неотличимо от простого */
mark.hl.has-note { box-shadow: inset 0 -0.14em 0 var(--accent); }

/* ===== палитра (панель выделения и редактор пометки) ===== */
.palette { display: inline-flex; gap: 0.25rem; align-items: center; }
.swatch {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.45);
  cursor: pointer;
  padding: 0;
}
.palette-lg { display: flex; gap: 0.45rem; margin: 0.5rem 0 0.2rem; }
.palette-lg .swatch { width: 1.7rem; height: 1.7rem; }
.swatch.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw-yellow { background: var(--mkb-yellow); }
.sw-green { background: var(--mkb-green); }
.sw-blue { background: var(--mkb-blue); }
.sw-pink { background: var(--mkb-pink); }
.sw-red { background: var(--mkb-red); }

/* плавающая панель над выделением текста */
#sel-toolbar {
  position: fixed;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.45rem;
  border-radius: 10px;
  background: var(--fg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
/* :not(.swatch) обязательно — селектор с id перебил бы .sw-* и кружки палитры
   вышли бы бесцветными (в редакторе пометки такого правила нет, и там всё красилось). */
#sel-toolbar button:not(.swatch) {
  padding: 0.3rem 0.55rem;
  border-radius: 7px;
  background: transparent;
  color: var(--bg);
  font-size: 0.85rem;
}
#sel-toolbar .swatch { border-color: rgba(255, 255, 255, 0.5); }

/* ===== переход к странице ===== */
#page-popover {
  position: fixed;
  bottom: 3.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
#page-form { display: flex; gap: 0.4rem; }
#page-input { width: 7rem; font: inherit; padding: 0.25rem 0.4rem; }
#page-form button { color: var(--accent); }

/* ===== скан страницы ===== */
#img-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  overflow: auto;
  background: rgba(0, 0, 0, 0.88);
}
#img-scan {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  cursor: zoom-in;
}
#img-scan.zoom {
  max-width: none;
  max-height: none;
  width: 200%;
  cursor: zoom-out;
}

/* ===== панель валидатора ===== */
#debug-panel {
  position: fixed;
  bottom: 3.4rem;
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 35vh;
  overflow: auto;
  padding: 0.5rem 0.9rem;
  border-top: 2px solid var(--error);
  background: var(--panel);
  font: 13px/1.5 ui-monospace, "Cascadia Mono", Menlo, monospace;
}
#debug-panel .ok { color: #3a8a3a; }
#debug-panel .bad { color: var(--error); font-weight: bold; }
#debug-panel ul { margin: 0.3rem 0 0; padding-inline-start: 1.2rem; }

/* ===== служебное ===== */
.load-error {
  margin: 2rem auto;
  padding: 1rem;
  border: 1px solid var(--error);
  border-radius: 8px;
  color: var(--error);
}

.toast {
  position: fixed;
  bottom: 4.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.9rem;
  opacity: 0.95;
}

/* брендинг */
.brand {
  margin: 2rem 0 1rem;
  text-align: center;
  font-size: 0.82rem;
  opacity: 0.55;
}
.brand a { color: inherit; }
.about-logo {
  display: block;
  margin: 0 auto 0.6rem;
  max-width: 96px;
  max-height: 96px;
}
.about-line { margin: 0.5rem 0; }

/* ── аккаунт (вход по ссылке на почту) ── */
#acc-form { display: flex; gap: 0.4rem; margin: 0.7rem 0; flex-wrap: wrap; }
#acc-email { flex: 1; min-width: 11rem; font: inherit; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); }
#acc-form button.primary { padding: 0.35rem 0.7rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }
#acc-form button[disabled] { opacity: 0.6; cursor: default; }
.acc-note { color: var(--muted); font-size: 0.88rem; }

/* категории на полке */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0 0.4rem;
}
.chip {
  border: 1px solid var(--border, #c4bcad);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.chip.active {
  background: var(--accent, #b07a2c);
  border-color: var(--accent, #b07a2c);
  color: #fff;
}
.chip-off { opacity: 0.4; cursor: default; }
#search-scope { margin: 0.5rem 0 0.2rem; }

/* ===== классификатор библиотеки: дерево категорий + фасеты ===== */
.classifier { margin: 0.6rem 0 0.2rem; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.3rem; margin-bottom: 0.5rem; }
.crumb { padding: 0.15rem 0.35rem; border-radius: 6px; color: var(--accent); font-size: 0.92rem; }
.crumb.active { color: var(--fg); font-weight: bold; cursor: default; }
.crumb-sep { color: var(--muted); }
.cat-chip { font-weight: 600; }
.cat-chip.cat-empty { font-weight: 500; opacity: 0.55; border-style: dashed; }
.facet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin: 0.35rem 0; }
.facet-label { color: var(--muted); font-size: 0.8rem; min-width: 3.2rem; }
.facet-reset { margin: 0.3rem 0 0.2rem; color: var(--muted); font-size: 0.85rem; }
.shelf-empty { margin: 1.2rem 0; color: var(--muted); text-align: center; }

/* полка с обложками */
.shelf {
  margin: 1rem auto 0;
  max-width: 46rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  row-gap: 1.7rem;
}
.shelf-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 10px 16px;
}
.shelf-item::after { /* доска: сегменты соседних ячеек сливаются в сплошную полку */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  background: linear-gradient(180deg, #b0824a, #8a5c2e 45%, #6b4421);
  box-shadow: 0 5px 9px rgba(0, 0, 0, 0.28);
}
.cover {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 112px;
  aspect-ratio: 5 / 7.4;
  padding: 0;
  border: none;
  border-radius: 2px 5px 5px 2px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  box-shadow: -3px 3px 0 rgba(0, 0, 0, 0.12), 3px 5px 12px rgba(0, 0, 0, 0.35);
  margin-bottom: 2px;
}
.cover::before { /* блик у корешка */
  content: '';
  position: absolute;
  left: 4px; top: 0; bottom: 0;
  width: 3px;
  background: rgba(255, 255, 255, 0.28);
  z-index: 2;
  pointer-events: none;
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-gen {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.45rem;
  color: #fff;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.25;
}
.cover-gen-ar { font-size: 0.85rem; opacity: 0.85; }
.cover-badge {
  position: absolute;
  z-index: 2;
  right: 4px; bottom: 4px;
  background: var(--accent, #b07a2c);
  color: #fff;
  font-size: 0.68rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}
/* бейдж статуса доверия: одобрено / требует проверки / в работе */
.review-badge {
  position: absolute;
  z-index: 3;
  top: 4px; left: 4px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.66rem; font-weight: 700; line-height: 1;
  padding: 0.14rem 0.42rem;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.review-approved { background: #3f8f54; }   /* одобрение — слева */
.review-caution  { background: #c9821e; }
/* готовность — справа, чтобы не наезжать на бейдж одобрения */
.review-wip, .review-ready { left: auto; right: 4px; }
.review-wip   { background: #6f6f68; }
.review-ready { background: #3f8f54; }
.bookinfo-status { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.1rem 0 0.55rem; }
.bookinfo-status .review-badge { position: static; font-size: 0.74rem; }

/* карточка книги */
.bookinfo-back {
  display: block;
  margin: 0.8rem auto 0;
  max-width: 46rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--accent, #b07a2c);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.3rem 0;
}
.bookinfo-back:hover { text-decoration: underline; }
.bookinfo {
  margin: 0.4rem auto 0;
  max-width: 46rem;
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.bookinfo-cover {
  /* Телефон: места хватает на обложку во весь блок — 160px тут мелочь. */
  flex: 0 0 min(62vw, 300px);
  max-width: min(62vw, 300px);
  margin-inline: auto;
  aspect-ratio: 5 / 7.4;
  /* Без этого флекс-контейнер растягивает колонку обложки по высоте длинного
     описания, aspect-ratio уступает растяжке, и `object-fit: cover` срезает
     обложку по бокам — у широкого заголовка отъедает первую и последнюю букву. */
  align-self: flex-start;
  cursor: default;
}
.bookinfo-meta { flex: 1 1 16rem; min-width: 0; }
/* Десктоп: места хватает — обложку крупнее, карточку шире. */
@media (min-width: 700px) {
  .bookinfo { max-width: 58rem; gap: 2rem; flex-wrap: nowrap; }
  .bookinfo-cover { flex: 0 0 260px; max-width: 260px; margin-inline: 0; }
}
@media (min-width: 1100px) {
  .bookinfo { max-width: 64rem; }
  .bookinfo-cover { flex: 0 0 320px; max-width: 320px; }
}
.bookinfo-meta h2 { margin: 0 0 0.3rem; }
.bookinfo-sub { font-size: 1.05rem; color: var(--muted, #777); margin-bottom: 0.5rem; }
.bookinfo-line { margin: 0.25rem 0; }
.bookinfo-dim { color: var(--muted, #777); font-size: 0.9rem; }
.bookinfo-desc { margin: 0.7rem 0 0; line-height: 1.55; }
.bookinfo-actions { margin-top: 1rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.bookinfo-draft {
  padding: 0.5rem 0.8rem; border-radius: 8px;
  border: 1px dashed var(--border); color: var(--muted, #777);
  background: var(--panel); font-size: 0.95rem;
}
.bookinfo-read {
  background: var(--accent, #b07a2c);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.4rem;
  font-size: 1rem;
  cursor: pointer;
}
.bookinfo-restart {
  background: transparent;
  color: inherit;
  border: 1px solid var(--border, #c4bcad);
  border-radius: 8px;
  padding: 0.55rem 1rem;
  cursor: pointer;
}

/* ===== пометки: списки, редактор, вырезки ===== */
.sub-count { color: var(--muted); font-size: 0.8em; font-weight: normal; }

/* строка пометки: слева цветная грань — видно цвет, не открывая запись */
.mark-item { align-items: flex-start; }
.mark-item.is-clip { border-inline-start: 3px solid transparent; padding-inline-start: 0.45rem; }
.mark-item.c-yellow { border-inline-start-color: var(--mkb-yellow); }
.mark-item.c-green { border-inline-start-color: var(--mkb-green); }
.mark-item.c-blue { border-inline-start-color: var(--mkb-blue); }
.mark-item.c-pink { border-inline-start-color: var(--mkb-pink); }
.mark-item.c-red { border-inline-start-color: var(--mkb-red); }
.mark-item.is-bm { border-inline-start: 3px solid var(--accent); padding-inline-start: 0.45rem; }

/* В списке цитата подрезается пятью строками — иначе одна длинная вырезка вытесняет
   с экрана все остальные. Сама запись не трогается: полный текст виден в редакторе. */
.mark-quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  margin: 0.15rem 0;
  font-size: 0.95rem;
  line-height: 1.45;
}
.bm-meta { color: var(--muted); }
.mark-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.mark-tag {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
}

/* редактор пометки */
.mark-where { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.4rem; }
.mark-text {
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.75rem;
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-soft, rgba(128, 128, 128, 0.1));
  border-radius: 0 6px 6px 0;
  font-size: 0.95rem;
  line-height: 1.5;
  max-height: 11rem;
  overflow-y: auto;
}
#mark-note, #mark-tags, #clips-q {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: inherit;
  font: inherit;
}
#mark-note { resize: vertical; min-height: 4.5rem; }
#clips-q { margin: 0.5rem 0 0.2rem; }
.tag-chip { font-size: 0.78rem; padding: 0.15rem 0.6rem; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-new { border-style: dashed; }

/* вырезки */
.clips-tabs { margin: 0.2rem 0 0.4rem; }
.clip-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.4rem 0 0.2rem; }
/* .sheet label — общий стиль «подпись слева, поле справа во всю ширину». Фильтрам он
   не годится (они должны стоять в ряд), поэтому специфичность здесь выше нарочно. */
.clip-filters .clip-filter {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.clip-filters .clip-filter select {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.15rem 0.3rem;
  max-width: 11rem;
}
.clip-list, .coll-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.clips-empty { color: var(--muted); font-size: 0.9rem; margin: 1rem 0; }

/* сборники */
.coll-new { margin: 0.4rem 0; }
.coll-list li { border-bottom: 1px solid var(--border); }
.coll-open {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.2rem;
  text-align: start;
  background: transparent;
  color: inherit;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.coll-count {
  flex: none;
  min-width: 1.6rem;
  text-align: center;
  border-radius: 999px;
  background: var(--accent-soft, rgba(128, 128, 128, 0.15));
  color: var(--muted);
  font-size: 0.78rem;
  padding: 0.1rem 0.45rem;
}
.coll-head { margin-bottom: 0.5rem; }
.coll-head h3 { margin: 0.4rem 0 0.2rem; }
.coll-tools { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }

/* Заметка и теги — поля во всю ширину под подписью: у .sheet label поле прижато вправо
   и ужато до 55%, а сюда пишут предложениями. */
.sheet label.stack {
  display: block;
  margin: 0.7rem 0;
}
.sheet label.stack > small { color: var(--muted); font-size: 0.8rem; }
.sheet label.stack input, .sheet label.stack textarea { margin-top: 0.25rem; max-width: none; }

/* ===== панель полки: поиск, порядок, виды, счётчик ===== */
.shelf-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  max-width: 46rem;
  margin: 0.5rem auto 0.2rem;
}
.shelf-search {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
}
.shelf-sort {
  flex: 0 0 auto;
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
}
/* переключатель видов встал внутрь панели — свой верхний отступ ему больше не нужен */
.shelf-bar .view-switch { margin: 0; flex: 0 0 auto; }
.shelf-count {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-inline-start: 0.1rem;
}

/* маячок досыпки списка: место под него нужно, видимым он быть не должен */
.shelf-sentinel { height: 1px; }

/* Строка списка стала двухэтажной: название и под ним автор с разделом.
   Поэтому выравнивание по верху, а не по центру. */
.book-row { align-items: flex-start; }
.book-row .br-main { flex: 1 1 auto; min-width: 0; display: block; }
.book-row .br-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.book-row .br-meta {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book-row .br-meta b { font-weight: 600; color: color-mix(in srgb, var(--fg) 62%, var(--muted)); }

/* ===== фильтр оглавления ===== */
#toc-filter {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.4rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  font-size: 0.88rem;
}
/* отфильтрованный список плоский: отступы уровней сняты, вместо них путь под названием */
.toc-li.toc-flat { padding-inline-start: 0.3rem; }
.toc-flat .toc-link { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.toc-trail { font-size: 0.72rem; color: var(--muted); }
.toc-none { padding: 0.7rem 0.3rem; color: var(--muted); font-size: 0.88rem; }

/* ===== машинный перевод =====
   Карточка нарочно не похожа на текст книги: своя рамка, свой фон, значок и
   подпись. Рядом стоит выверенный человеческий перевод, и спутать их нельзя. */
#mt-card {
  position: fixed;
  z-index: 57;
  left: 50%;
  bottom: 4.2rem;
  transform: translateX(-50%);
  width: min(34rem, calc(100vw - 1.6rem));
  max-height: min(55vh, 26rem);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.mt-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--border);
}
.mt-badge {
  flex: none;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.mt-source { flex: 1; min-width: 0; font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mt-close { flex: none; padding: 0.15rem 0.4rem; color: var(--muted); }
.mt-body {
  padding: 0.7rem 0.8rem;
  overflow-y: auto;
  font-size: 0.98rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.mt-body.mt-error { color: var(--error); font-size: 0.9rem; }
/* Подвал карточки — тремя ЭТАЖАМИ, а не в один ряд. В ряд не влезало: три движка
   («Быстро», «ИИ (сервер)», «ИИ (свой ключ)») плюс «В заметку» и «Копировать» на
   экране телефона шире карточки, а вложенный flex без переноса не сжимался — чипсы
   движков молча уезжали под кнопки действий и обрезались краем карточки. */
.mt-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  padding: 0.5rem 0.7rem;
  border-top: 1px solid var(--border);
}
.mt-providers { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.mt-prov {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.78rem;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}
.mt-prov.on { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }
.mt-prov.off { opacity: 0.4; cursor: default; }
.mt-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.mt-actions button {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.3rem 0.7rem;
  font-size: 0.82rem;
  background: var(--bg);
}

/* ===== режим перевода: своё выделение вместо системного =====
   user-select: none — не украшение, а весь смысл: пока браузер считает, что
   выделять нечего, он не рисует своё «Копировать / Поиск», и наша панель ничем
   не перекрыта. -webkit-touch-callout гасит долгий тап в iOS. */
body[data-mtmode] #stream .member {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: pointer;
}
body[data-mtmode] #stream { padding-bottom: 9rem; }   /* панель не должна закрывать текст */
#btn-mtmode.on { color: var(--accent); }

mark.mtsel {
  background: var(--accent-soft);
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 3px;
  color: inherit;
}

#mtsel-bar {
  position: fixed;
  /* ниже оверлеев (40): открытая панель настроек или оглавления должна накрывать
     эту, а не наоборот. Выше нижней панели глав (20) — она под ней и стоит. */
  z-index: 38;
  left: 50%;
  bottom: 3.4rem;   /* над панелью «‹ стр. N ›», иначе они наезжают друг на друга */
  transform: translateX(-50%);
  width: min(34rem, calc(100vw - 1.2rem));
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom));
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.28);
}
.mtsel-head { display: flex; align-items: flex-start; gap: 0.5rem; }
.mtsel-preview {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  line-height: 1.35;
  max-height: 3.6em;
  overflow: hidden;
}
.mtsel-preview.mtsel-empty { color: var(--muted); font-size: 0.78rem; }
#mtsel-off { flex: none; padding: 0.1rem 0.35rem; color: var(--muted); }
.mtsel-actions { display: flex; gap: 0.4rem; }
.mtsel-actions button {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
  background: var(--bg);
}
.mtsel-actions button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.mtsel-actions button:disabled { opacity: 0.45; }

/* ===== промпты перевода ===== */
.mt-prompts { display: flex; flex-wrap: wrap; gap: 0.25rem; flex-basis: 100%; }
.mt-prompt {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  font-size: 0.76rem;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}
.mt-prompt.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.mt-prompt-list { list-style: none; margin: 0.3rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.mt-prompt-item {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.45rem 0.6rem;
}
.mt-prompt-item.built-in { opacity: 0.75; }
.mt-prompt-name { font-size: 0.85rem; font-weight: 600; }
.mt-prompt-text { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.mt-prompt-actions { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
.mt-prompt-actions button { font-size: 0.76rem; color: var(--accent); }
#mt-prompt-form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
#mt-prompt-form input, #mt-prompt-form textarea {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
}

/* ===== карточка перевода ПОД абзацем =====
   Смысл встроенного вида: перевод виден вместе с тем, что переводишь, и ничего
   не заслоняет. Селектор с id+классом — иначе правила #mt-card (fixed, transform)
   перебили бы позиционирование обратно во всплывашку.
   ⚠️ Плашка «⚡ машинный перевод» и акцентная грань — не украшение: этот текст
   стоит вплотную к выверенному человеческому переводу, и спутать их нельзя. */
#mt-card.mt-inline {
  position: static;
  transform: none;
  width: auto;
  max-height: none;
  margin: 0.4rem 0 1.1rem;
  border-inline-start: 3px solid var(--accent);
  box-shadow: none;
}
#mt-card.mt-inline .mt-body { overflow: visible; max-height: none; }

/* пометка потеряла своё место после переимпорта книги */
.mark-orphan {
  display: block;
  font-size: .78rem;
  color: var(--warn, #a2662a);
  margin-top: .15rem;
}