/*
   app-styles.css (29.07.26) — вынесен из <style> внутри
   resources/views/layouts/app.blade.php по прямому запросу автора: "почему
   мы не можем создать один общий внешний файл стилей?". Причина, по которой
   стиль раньше жил inline в layout, была чисто исторической (так изначально
   сложилось в проекте), не архитектурным решением — выносить можно было
   всегда.

   Обычный статический CSS-файл, не через Vite/Tailwind-пайплайн (тот
   отдельный бандл, resources/css/app.css, используется только для
   vendor/laravel/framework .../pagination::tailwind — см. комментарий в
   layouts/app.blade.php и INTEGRATION_NOTES.md). Подключается напрямую
   через <link>, с версионированием ?v={filemtime} в самом layout — при
   правке этого файла кэш браузера у пользователей инвалидируется
   автоматически, без ручной правки версии здесь или в шаблоне.

   Все построчные комментарии-обоснования по конкретным правилам ниже
   перенесены из layout без изменений содержания — сам layout больше не
   хранит историю решений по CSS, теперь она здесь.
*/
:root {
    /* Тёплая палитра (25.07.26, по прямому запросу автора — прежний
       синий #2952cc воспринимался как "старомодный"): terracotta
       вместо корпоративного синего, тёплый бумажный фон/бордеры
       вместо холодного серого. --accent-rgb — тот же цвет --accent,
       но в виде r,g,b-компонентов для rgba() (focus-ring ниже) — CSS
       var() нельзя подставить внутрь готового rgba(), а color-mix()
       ещё не везде надёжен, поэтому дублируется явно, как и обычно
       делают в проектах на голом CSS без препроцессора. */
    color-scheme: light;
    --bg: #faf7f4;
    --surface: #ffffff;
    --border: #e6ded4;
    --text: #241f1a;
    --muted: #85796c;
    --accent: #b3492b;
    --accent-rgb: 179, 73, 43;
    --accent-dark: #8f3a22;
    --success-bg: #eef7ea;
    --success-text: #2f6b34;
    --danger-bg: #fbeaec;
    --danger-text: #c0293d;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* Раньше .brand была текстовой ссылкой ("Books") — правила веса/
   размера шрифта ниже здесь больше не нужны сами по себе (внутри
   теперь <img>, см. разметку .topbar), но оставлены на случай, если
   когда-нибудь рядом с картинкой снова появится текст. display: flex
   — просто хорошая практика для ссылки-контейнера картинки, не даёт
   img съехать по вертикали относительно остального .topbar. */
.topbar .brand {
    display: flex;
    align-items: center;
    font-weight: 700;
    color: var(--text);
    font-size: 1.1rem;
}
.topbar .brand img {
    display: block;
}
/* nav сам по себе не был flex — дочерние элементы (ссылки, форма
   logout, .user-menu с его padding-bottom для ховера) выравнивались
   по умолчанию (baseline), из-за чего .user-menu визуально уезжал
   вниз относительно простых ссылок. flex + align-items: center
   выравнивает все прямые дочерние элементы nav по вертикальному
   центру независимо от их внутренних отступов. */
.topbar nav {
    display: flex;
    align-items: center;
}
.topbar nav a {
    margin-left: 1.25rem;
    color: var(--muted);
    font-weight: 500;
}
.topbar nav a:hover {
    color: var(--accent);
    text-decoration: none;
}
.topbar nav form { display: inline; margin-left: 1.25rem; }
/* Кнопка мобильного меню (☰) — в разметке идёт сразу после .brand,
   ДО nav (layouts/app.blade.php), скрыта здесь по умолчанию: на
   широких экранах nav показывается как обычно, инлайн. Видна только
   ниже брейкпоинта в медиа-запросе внизу файла (30.07.26, адаптация
   под разные устройства) — тот же принцип минимализма, что и toggle
   HTML-исходника в Quill (content-edit.blade.php, INTEGRATION_NOTES.md
   §124): простой vanilla JS, переключающий один класс, без стороннего
   меню-фреймворка. */
.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.3rem 0.65rem;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
}
.nav-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}
/* Переключатель языка — настоящий <select> (не выпадающая панель по
   наведению, как .user-menu ниже — автор явно уточнил разницу между
   "выпадающий список" и "выпадающее окно"). Первый <select> в
   проекте, стиль — по образцу input[type="text"] выше, компактнее
   под топбар. */
.locale-select {
    margin-left: 1.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--muted);
    background: var(--surface);
    cursor: pointer;
}
.locale-select:hover,
.locale-select:focus {
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
}
.topbar nav form button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
}
.topbar nav form button:hover { color: var(--accent); }
.user-menu {
    display: inline-block;
    position: relative;
    margin-left: 1.25rem;
}
/* Заполняет зазор до выпадашки, чтобы наведение не срывалось между
   триггером и .user-menu-dropdown — раньше это делал padding-bottom
   прямо на .user-menu, но это добавляло блоку лишнюю высоту и
   сбивало вертикальное центрирование по .topbar nav (align-items:
   center считал центром центр раздутого блока, а не текста триггера).
   ::after — невидимая полоса, позиционированная absolute (не влияет
   на высоту .user-menu в потоке), но остаётся внутри .user-menu,
   поэтому наведение на неё не сбрасывает :hover. */
.user-menu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.75rem;
}
.user-menu .user-menu-trigger {
    /* Перебивает .topbar nav a { margin-left: 1.25rem } — иначе
       отступ дублируется (он уже задан самим .user-menu). */
    margin-left: 0;
    color: var(--muted);
    font-weight: 500;
}
.user-menu:hover .user-menu-trigger,
.user-menu .user-menu-trigger:hover {
    color: var(--accent);
    text-decoration: none;
}
.user-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0;
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    z-index: 20;
}
.user-menu:hover .user-menu-dropdown {
    display: block;
}
.user-menu-dropdown .user-menu-name {
    display: block;
    padding: 0.4rem 0.9rem;
    margin: 0;
    font-weight: 600;
    color: var(--text);
}
/* .user-menu .user-menu-dropdown ... (два класса) — специфичнее
   .topbar nav a/.topbar nav form выше, иначе те правила (margin-left,
   display: inline) перебивают вёрстку пунктов меню. */
.user-menu .user-menu-dropdown a,
.user-menu .user-menu-dropdown form button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.9rem;
    margin: 0;
    color: var(--muted);
    font-weight: 500;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}
.user-menu .user-menu-dropdown a:hover,
.user-menu .user-menu-dropdown form button:hover {
    color: var(--accent);
    text-decoration: none;
    background: var(--bg, #f5f5f7);
}
.user-menu .user-menu-dropdown form {
    display: block;
    margin: 0;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}
/* Заголовок сайта + подзаголовок на главной (books/index.blade.php,
   секция page_header) — 26.07.26, прямой запрос автора: вывести из
   .container. Рендерится ДО .container (см. разметку ниже), обёрнут
   в этот класс той же ширины/центрирования блока (max-width: 1200px,
   margin: 0 auto), что и остальной контент, но отдельным блоком, не
   внутри .public-layout/.public-main. text-align: center — сам текст
   заголовка/подзаголовка тоже по центру (тот же приём, что у
   .breadcrumbs/.reader-book-title), правка по итогам проверки (первая
   версия без обёртки-div, класс не был ни на чём навешан, поэтому
   центрирование не сработало). Обёртка выводится условно, только
   когда секция реально определена и не пуста — см. проверку прямо в
   разметке layouts/app.blade.php, подробное обоснование см.
   INTEGRATION_NOTES.md §94 (не повторяется здесь словами, чтобы снова
   случайно не задеть синтаксис шаблонизатора — см. предысторию там
   же). На страницах, не определяющих секцию, блок не рендерится
   вообще, не пустой div с лишним padding. */
.page-header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 0;
    text-align: center;
}
.status {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid #b9e6c1;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
.status-error {
    background: var(--danger-bg);
    color: var(--danger-text);
    border: 1px solid #f0c2c8;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    /* Админ-таблицы (.admin-table, всегда напрямую внутри .card — см.
       admin/users|books|comments|posts|pages|blocks/index.blade.php)
       ничем не ограничены по ширине столбцов — на узком экране это
       раньше давало горизонтальную прокрутку всей страницы, не только
       карточки. overflow-x: auto здесь ничего не меняет визуально,
       пока контент карточки помещается (подавляющее большинство
       .card — формы/текст, не таблицы); включается только когда
       реально не помещается, и тогда прокручивается сама карточка,
       а не вся страница (30.07.26, адаптация под разные устройства). */
    overflow-x: auto;
}
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="file"], input[type="datetime-local"], input[type="url"], textarea, select {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    margin-bottom: 0.5rem;
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea { min-height: 300px; }
/* Раньше фокус на полях ввода не был виден вообще (браузерный
   дефолтный outline нигде не сбрасывался и не заменялся) — добавлен
   явный focus-ring тем же акцентным цветом, тот же приём, что уже
   применён к .locale-select ниже, только теперь общий для всех
   полей формы на сайте, не только для одного select. */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
button, .button {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.55rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
button:hover, .button:hover {
    background: var(--accent-dark);
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(var(--accent-rgb), 0.25);
}
button:active, .button:active { transform: translateY(1px); }
/* БАГ (найден автором визуально, 29.07.26): кнопки/ссылки-действия
   слипались без зазора в нескольких не связанных друг с другом
   местах — .book-title-row (заголовок книги + "Edit"/"Tree Editor"
   подряд), "+ Создать новую книгу" сразу перед формой поиска
   (books/index.blade.php, home.blade.php), "Начать читать"/
   "Продолжить чтение" (books/show.blade.php). Общая причина у всех:
   не было ни одного переиспользуемого класса "группа действий" —
   gap между инлайн-элементами добавлялся не везде, а margin вокруг
   одиночных <p><a class="button">...</a></p> полагался на дефолтный
   margin браузера у <p>, не на явное правило проекта (хрупко: любой
   будущий сброс margin у p сломал бы отступ незаметно).

   .actions — новый общий класс (не дублирует .search-form/
   .book-title-row, применяется РЯДОМ с ними как обёртка вокруг
   группы кнопок/ссылок, тот же принцип, что уже даёт gap: 0.5rem у
   .search-form, только не привязан к конкретной форме). display:
   flex + flex-wrap: wrap — не разъезжается на узких экранах, gap
   работает и для инлайн-, и для block-элементов одинаково (в отличие
   от margin у отдельных детей, который пришлось бы сбрасывать у
   последнего). margin вокруг самого блока — тот же вертикальный
   отступ, что и у .search-form/.card (1.25rem), для единообразия
   ритма страницы, не собственное магическое число. */
.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
}
.actions:first-child { margin-top: 0; }
.actions:last-child { margin-bottom: 0; }
/* .actions-inline — модификатор для случая "группа действий внутри
   уже готового flex-ряда" (.book-title-row, books/show.blade.php:
   <h1> + .actions рядом, .book-title-row сам уже даёт gap между
   ними и вертикальный ритм страницы) — без внешнего margin/wrap,
   только горизонтальный gap между самими действиями. */
.actions-inline { margin: 0; flex-wrap: nowrap; }
/* .actions-center (29.07.26) — модификатор для одиночной акцентной кнопки
   посреди страницы (reader/access-required.blade.php, "Читать на {площадка}")
   — в отличие от остальных мест .actions (группы кнопок формы/навигации,
   выровненные по левому краю), здесь это единственное действие на всю
   ширину .card, по прямому запросу автора — по центру. */
.actions-center { justify-content: center; }
.search-form { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.search-form input[type="text"] { flex: 1; margin-bottom: 0; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
ul.plain li:last-child { border-bottom: none; }
.muted { color: var(--muted); }
.error { color: #c0293d; font-size: 0.9rem; margin: -0.25rem 0 0.5rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag {
    display: inline-block;
    background: var(--border);
    color: var(--muted);
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    font-size: 0.85rem;
}
.book-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.book-overview {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.book-meta-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.book-meta-list li {
    padding: 0.2rem 0;
}
.book-cover-wrap {
    width: 196px;
    flex-shrink: 0;
}
.book-cover {
    display: block;
    width: 100%;
    aspect-ratio: 196 / 280;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.author-avatar-wrap {
    width: 140px;
    flex-shrink: 0;
}
.author-avatar {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--border);
}
/* БАГ (найден автором визуально, 30.07.26): жёсткий repeat(4, 1fr) не
   имел нижней границы для ширины колонки — на узких экранах браузер
   продолжал сжимать все 4 колонки одновременно (обложка + текст внутри
   каждой карточки), пока контент карточки физически не переставал
   влезать (min-content текста/отступов), и тогда весь .book-list, а с
   ним и вся страница, получал горизонтальную прокрутку вместо переноса
   карточек на следующую строку — тот же класс проблемы, что и у шапки
   ниже (.topbar nav), просто не был замечен как общий раньше.

   Исправлено repeat(auto-fill, minmax(220px, 1fr)) — стандартный CSS
   Grid приём "сам знает, сколько колонок влезет", без отдельных медиа-
   запросов под каждую ширину экрана/каждое сочетание сайдбаров (более
   простое решение, чем набор breakpoint'ов, ADR §5 в AI_RULES.md — не
   вводит абстракцию, использует уже существующую возможность Grid).
   220px — минимум, ПОДОБРАННЫЙ под текущую ширину контента (не с
   потолка): на самом широком варианте страницы (.container 1200px,
   без сайдбаров, минус padding .container/.card) 5 колонок при этом
   минимуме уже не влезают, 4 влезают всегда — визуальный ряд "4 книги"
   на десктопе, который уже был задуман автором, сохраняется как
   максимум, а не жёстко фиксируется. На более узких экранах (или с
   сайдбарами, см. layouts/public.blade.php) колонок автоматически
   становится меньше вплоть до одной, без горизонтальной прокрутки на
   любой ширине. */
.book-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.book-list-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.35rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.book-list-item:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}
.book-list-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
/* Заголовок книги в карточке списка (books/index.blade.php,
   authors/show.blade.php) — семантически h2/h3 (звено в иерархии
   заголовков страницы, не просто ссылка: список карточек — это
   список отдельных сущностей, каждой нужен свой заголовок для
   навигации по заголовкам в скринридерах), но визуально должен
   остаться неотличим от обычной ссылки — той же карточке ничего не
   известно про то, какой уровень (h2 на /books, h3 внутри "Books" на
   /authors/{id}, см. эти шаблоны) корректен именно на этой странице,
   поэтому сброс общий по классу, не по тегу. */
.book-list-item-body h2,
.book-list-item-body h3 {
    margin: 0;
    font: inherit;
    /* Заголовок книги в карточке — жирным, прямой запрос автора,
       28.07.26. font: inherit выше сбрасывает и вес шрифта, поэтому
       переопределяем его отдельно после шорткаты. */
    font-weight: 700;
}
/* Обёртка-рамка над обложкой (31.07.26, прямой запрос автора: эффект
   наведения "как на tai-ecosafe.com" — картинка увеличивается ВНУТРИ своих
   границ, не поверх соседних карточек). Раньше scale() был прямо на самом
   <img> без overflow:hidden ни на одном предке — при наведении обложка
   визуально вылезала за рамку/тень карточки. border/border-radius
   перенесены сюда, с самой картинки — рамка должна оставаться на месте,
   пока увеличивается только содержимое внутри неё; card-level тень/подъём
   (.book-list-item:hover выше) не трогали — он не клипается, это другой
   элемент. */
.book-cover-frame {
    display: block;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.book-cover-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 196 / 280;
    object-fit: cover;
    transition: transform 0.25s ease;
}
.book-list-item a:hover .book-cover-thumb {
    transform: scale(1.08);
}
/* Второй потребитель (admin/users, admin/books) — переносится сюда,
   не дублируется в @push('styles') по каждой странице (PROJECT_CONTEXT.md
   §3 п.9 — абстракция/общий стиль по факту второго прецедента). */
.admin-table {
    width: 100%;
    border-collapse: collapse;
}
.admin-table th, .admin-table td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
}
/* БАГ (найден автором визуально, 29.07.26): несколько действий подряд
   в одной ячейке (edit-ссылка + toggle-форма + delete-форма — admin/
   blocks, admin/users, admin/comments) визуально слипались без
   зазора — display: inline не даёт горизонтального отступа сам по
   себе, а перенос строки/пробел между тегами в самой Blade-разметке
   не гарантирован (зависит от того, как шаблонизатор схлопывает
   whitespace между закрывающим и следующим открывающим тегом).
   Исправлено переносом отступа в CSS, а не добавлением &nbsp;/пробелов
   в каждый из трёх шаблонов по отдельности — иначе пришлось бы
   синхронизировать зазор вручную в нескольких местах. inline-block
   (не inline) — margin действует только у inline-block/block. Только
   у форм (не у ссылки "Edit" — у неё и так нет margin, ей нечего
   сбрасывать), :first-child на форме сбрасывает левый отступ, если
   форма — первое действие в ячейке (admin/comments, где нет отдельной
   edit-ссылки перед toggle-формой). */
.admin-table form { display: inline-block; margin-left: 0.5rem; }
.admin-table form:first-child { margin-left: 0; }
.admin-table button {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 0.25rem 0.6rem;
    font-size: 0.85rem;
    border-radius: 6px;
    cursor: pointer;
}
.admin-table button:hover { color: var(--accent); border-color: var(--accent); }
/* Хлебные крошки — на всех страницах, кроме главной (см.
   layouts/partials/_breadcrumbs.blade.php PHPDoc). Живут ВНУТРИ
   .container (см. разметку layout) — та же ширина/центрирование
   (max-width: 1200px, margin: 0 auto), что и у остального контента
   страницы, никакого отдельного фона/полосы во всю ширину экрана
   (правка 26.07.26 — первая версия визуально выглядела вторым
   хедером, автор попросил стиль/ширину как у контента). */
.breadcrumbs {
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--muted);
    text-align: center;
}
.breadcrumbs a { color: var(--muted); font-weight: 500; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumb-sep { margin: 0 0.4rem; color: var(--border); }
.breadcrumb-current { color: var(--text); font-weight: 600; }
/* Страница чтения (reader/show.blade.php, no-content.blade.php,
   access-required.blade.php) — 26.07.26, редизайн по образцу
   litnet.com (PROJECT_CONTEXT.md §10s): заголовок книги-ссылка +
   выпадающий список глав вместо бокового дерева, кнопки пред/след
   прямоугольные, во всю ширину. */
.reader-book-title {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}
.reader-book-title a { color: var(--text); }
.reader-book-title a:hover { color: var(--accent); }
.reader-toolbar {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.reader-toc-select {
    width: auto;
    max-width: 100%;
    min-width: 260px;
    margin-bottom: 0;
}
/* .reader-pager используется дважды на странице (над и под текстом
   главы, по прямому запросу автора) — margin с обеих сторон, не
   только margin-top, чтобы одинаково хорошо смотреться что перед
   <h1>, что после текста. */
.reader-pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0;
}
.reader-pager-btn {
    display: block;
    flex: 1;
    text-align: center;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}
.reader-pager-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}
/* Комментарии (create_comments_table, PROJECT_CONTEXT.md §10w/§10z) —
   один и тот же класс .comments на books/show (список + форма,
   comments/_thread.blade.php) и reader/show (только форма,
   comments/_form.blade.php). */
.comments {
    margin-top: 1.5rem;
}
.comment-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}
.comment {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}
.comment:last-child {
    border-bottom: none;
}
.comment-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-bottom: 0.25rem;
}
.comment-author {
    font-weight: 600;
}
.comment-date {
    font-size: 0.85rem;
}
.comment-body {
    margin: 0;
    white-space: pre-wrap;
}
/* .comment-body-html (30.07.26) — модификатор для темы/ответа болталки,
   которые с этой правки хранятся и выводятся как санитизированный HTML
   (Quill), не чистый текст. .comment-body сама по себе рассчитана на
   ПРОСТОЙ текст (book/chapter-комментарии, §10z — они не тронуты, остаются
   {{ }}) — white-space: pre-wrap для настоящего HTML с собственными <p>/<br>
   добавлял бы лишние отступы поверх уже готовой разметки. Картинки внутри
   контента (новая кнопка "image" в тулбаре) — max-width: 100%, чтобы не
   раздвигали карточку/страницу на узких экранах (см. правки под адаптацию
   выше). */
.comment-body-html {
    white-space: normal;
}
.comment-body-html img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
/* .page-body (blog/show.blade.php) — та же причина, что .comment-body-html
   img выше: с появлением загрузки картинок (30.07.26) пост блога тоже может
   содержать изображение шире экрана, без этого правила это была бы точно
   та же категория бага, что уже найдена и исправлена на /books (горизонтальная
   прокрутка на узких экранах). */
.page-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
/* Компактное поле ввода — общее правило textarea (min-height: 300px,
   выше) рассчитано на содержимое главы, для короткого комментария
   это слишком много места. */
.comment-form textarea {
    min-height: 100px;
}

/* Статус процесса написания книги (writingStatus) — раньше был обычным
   текстом в скобках ("(В процессе)"), по запросу автора заменён на цветной
   бейдж с иконкой (unicode-символ, ":before" — не отдельный <span> в
   разметке, чтобы не трогать текст перевода books.in_progress/completed
   отдельным HTML-элементом в каждом шаблоне, где он выводится). Цвет "в
   процессе" — переиспользован --accent (в палитре пока нет отдельного
   "жёлто-оранжевого" статусного цвета, заводить новую переменную ради
   одного места не стали); "завершено" — уже существующий --success-text. */
.status-progress {
    color: var(--accent);
    font-weight: 600;
}
.status-progress::before {
    content: "\23F0";
    margin-right: 0.35em;
}
.status-completed {
    color: var(--success-text);
    font-weight: 600;
}
.status-completed::before {
    content: "\2713";
    margin-right: 0.35em;
}

/* ==========================================================================
   Адаптация под мобильные/узкие экраны (30.07.26, прямой запрос автора:
   "проверь и измени адаптацию страниц под разные устройства... особенно
   books страница, в 4 книги сжимается до 705px, потом появляется
   прокрутка"). До этой правки в проекте был ровно один медиа-запрос
   (layouts/public.blade.php, max-width: 900px — переключение 3-колоночного
   сайдбар-грида в одну колонку); весь остальной layouts/app.blade.php был
   полностью фиксирован под широкий экран: шапка на 5 ссылок + меню
   пользователя без переноса строки, .book-list (исправлен выше отдельно,
   auto-fill/minmax — сам не даёт горизонтальной прокрутки ни на одной
   ширине, отдельного брейкпоинта под него здесь НЕ требуется), .container
   с одинаковым padding что на десктопе, что на телефоне. Ниже — то, что
   требовало явного брейкпоинта: шапка (не умеет переноситься сама по себе,
   flex без wrap) и точечные уменьшения отступов/размеров под очень узкие
   экраны.

   860px — брейкпоинт шапки, подобран не с потолка: логотип (~130px) +
   5 ссылок nav + блок логина/пользователя при текущих отступах (margin-left:
   1.25rem на каждой) физически не помещаются в одну строку уже примерно
   с этой ширины на любом реальном телефоне/маленьком планшете — раньше
   это тоже раздвигало страницу по горизонтали (тот же класс проблемы,
   что и у .book-list, просто автор не назвал его отдельно). */
@media (max-width: 860px) {
    .topbar {
        flex-wrap: wrap;
    }
    .nav-toggle {
        display: inline-block;
    }
    /* nav по умолчанию скрыт на узком экране — показывается только когда
       .topbar получает класс .nav-open (JS-переключатель на .nav-toggle,
       см. layouts/app.blade.php). flex-basis: 100% — переносит nav на
       вторую строку внутри уже flex-wrap: wrap .topbar, а не пытается
       ужать его в оставшееся место рядом с логотипом. */
    .topbar nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        margin-top: 0.85rem;
    }
    .topbar.nav-open nav {
        display: flex;
    }
    .topbar nav a,
    .topbar nav form,
    .locale-select,
    .user-menu {
        margin-left: 0;
    }
    .topbar nav form button {
        text-align: left;
    }
    /* Выпадашка .user-menu-dropdown в десктопной версии открывается по
       :hover — на тачскрине ховера физически нет. В мобильном (уже
       развёрнутом вертикально) меню она просто всегда видна как часть
       общего списка ссылок, без отдельного открытия/закрытия — те же
       3-4 пункта, что и на десктопе, лишний тап не нужен. */
    .user-menu-dropdown {
        display: block;
        position: static;
        border: none;
        box-shadow: none;
        padding: 0.35rem 0 0 0.75rem;
    }
    .user-menu-dropdown .user-menu-name {
        padding: 0 0 0.35rem;
    }
}

@media (max-width: 600px) {
    /* .container/.card padding — подобран под десктоп (1.5rem/1.25rem),
       на телефоне съедает заметную долю и без того узкого экрана. */
    .container,
    .page-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .card {
        padding: 1rem;
    }
    /* Обложка книги/аватар автора — фиксированные 196px/140px (см. выше)
       не переполняют экран сами по себе (.book-overview уже flex-wrap:
       wrap, обложка просто переносится на свою строку), но на маленьком
       телефоне выглядят непропорционально крупными рядом с более узкой
       колонкой метаданных — чисто эстетическая, не анти-overflow правка. */
    .book-cover-wrap {
        width: 150px;
    }
    .author-avatar-wrap {
        width: 110px;
    }
    /* min-width: 260px (десктопное значение) на очень узких телефонах
       (~320-360px логической ширины) вместе с padding .container/.card
       оставляет впритык — понижаем минимум, select остаётся auto-шириной
       (см. базовое правило выше), просто может стать уже. */
    .reader-toc-select {
        min-width: 0;
    }
}