/* Карточка книги (docs/SEO_HOWTO.md) — отдельная страница вместо того,
   чтобы книга сразу открывалась читалкой. Классы ленты (.rail и все
   вложенные) — из webapp/css/home.css, подключённого рядом (card.html):
   та же лента «Похожие книги», что и на главной, один и тот же компонент.

   Раскладка объяснена подробно в §2 и §5 — коротко: .card-left (обложка +
   кнопка) и .card-right (описание, мазмуну, характеристики) в разметке
   стоят в порядке, нужном широкому экрану, а на телефоне сами группы
   растворяются (display: contents), и порядок каждого куска отдельно
   держит CSS order. Так мазмуну может встать сразу после обложки на
   телефоне, оставаясь в правой колонке рядом с описанием на широком
   экране — без второй копии разметки. */

/* --- §1. Путь до страницы ----------------------------------------------
   .crumbs сам — в webapp/css/base.css: та же строка «Башкы бет / …» теперь
   и на странице класса (webapp/grade.html), общий кусок держим в одном
   месте, а не в двух файлах, которые могут разойтись. */

/* --- §2. Порядок на телефоне ----------------------------------------------
   .card-page-body — колонка flex, а не обычный блочный поток: order ниже
   работает только у flex/grid-детей. .card-left/.card-right «прозрачны»
   (display: contents) — сами они из потока пропадают, а их дети (обложка,
   кнопка, описание, мазмуну, характеристики) становятся прямыми элементами
   этой колонки и выстраиваются по своему order, а не по тому, в какую из
   двух групп они попали в разметке (card.html). */

.card-page-body { display: flex; flex-direction: column; }
.card-left, .card-right { display: contents; }

.card-title       { order: 1; }
.card-cover       { order: 2; }
.toc-block        { order: 3; }
.card-read-wrap   { order: 4; }
.card-description { order: 5; }
.card-characteristics { order: 6; }

/* --- §3. Заголовок, обложка, описание, кнопка, характеристики ----------- */

.card-title {
  font-size: var(--text-2xl);
  text-align: left;
  margin: 0 0 var(--space-5);
}

.card-cover {
  text-align: center;
  /* Тот же отступ, что и у мазмуну ниже (margin-bottom там же) — обложка,
     мазмуну и кнопка читаются одной группой, и интервалы между ними
     сделаны одинаковыми нарочно, а не оставлены на волю случайных
     отступов соседних блоков. */
  margin-bottom: var(--space-4);
}
.card-cover img {
  width: 220px;
  /* Не 60%, как было: 60% от ширины .wrap на обычном телефоне (375px)
     это около 206px — меньше самого width, а max-width в CSS побеждает
     (та же ошибка, что уже ловил на десктопе). 90% — щедрый запас на
     редкий очень узкий экран, самому width не мешает нигде. */
  max-width: 90%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.card-read-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  /* Сверху отступа нет намеренно: интервал до кнопки уже дала margin-bottom
     у того, что стоит перед ней, — обложка (§3) или мазмуну (§4), смотря
     что есть у книги. Снизу — обычный отступ до описания, самостоятельный,
     в эту тройку равных интервалов не входит. */
  margin: 0 0 var(--space-6);
}
.card-read-btn { display: inline-flex; }

/* Скачивание офлайн — второе по значимости действие, поэтому обычный .btn
   (серый), а не primary: синий на странице должен значить одно — «Онлайн
   окуу», иначе непонятно, с какой кнопки начинать. */
.card-download-btn.done { color: var(--ok); border-color: var(--ok); }

.card-description {
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}

/* --- §4. Оглавление ------------------------------------------------------
   <details> нативный: раскрывается без JS, содержимое читается поисковиком
   и свёрнутым. summary убирает свой треугольник по умолчанию — свой,
   через .toc-block > summary::marker, чтобы не зависеть от браузерных
   стилей списков. */

.toc-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  /* var(--space-4), а не -6, как раньше: столько же, сколько между обложкой
     и мазмуну (§3) — обложка, мазмуну и кнопка идут одним рядом с равными
     интервалами. На широком экране мазмуну стоит в другом соседстве
     (после описания, перед характеристиками) — там нужен другой отступ,
     см. §6. */
  margin-bottom: var(--space-4);
  /* На телефоне свёрнутое мазмуну стоит сразу под обложкой — ширина та же
     (220px), чтобы это читалось одним компактным блоком, а не случайно
     узкой полоской посреди широкого экрана. На широком экране блок уже
     в своей колонке рядом с описанием — там ограничение снимается (§6).

     width, а не только max-width: у свёрнутого <details> внутри содержимое
     короткое («☰ Мазмуну»), и без явного width блок сжимался по этому
     содержимому вместо того, чтобы растянуться на всю выделенную ширину —
     сказалась примета .card-right (display: contents, §2): дети, которых
     он отпускает в общий flex-поток, растягиваются не всегда так, как
     растягивался бы обычный блочный элемент. max-width — только на случай
     совсем узкого экрана, где даже 220px не поместятся. */
  width: 220px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}
/* Развёрнутое — во всю ширину страницы: список из полусотни строк читать
   в узкой колонке неудобно, а свёрнутая ширина была рассчитана только на
   заголовок "Мазмуну", а не на содержимое. :has() смотрит на сам <details>
   внутри — атрибут open меняет браузер, JS тут ни при чём. */
.toc-block:has(details[open]) {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.toc-block summary {
  cursor: pointer;
  padding: var(--space-4);
  list-style: none;
}
.toc-block summary::-webkit-details-marker { display: none; }
.toc-block summary h2 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  margin: 0;
}
.toc-block summary .icon { width: 20px; height: 20px; }

.toc-body { padding: 0 var(--space-4) var(--space-4); }
.toc-head {
  font-size: var(--text-sm);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: var(--space-4) 0 var(--space-1);
}
.toc-head:first-child { margin-top: 0; }
.toc-item {
  display: block;
  padding: var(--space-2) var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
/* Цвет и подчёркивание — только у ссылки. Без доступа пункт оглавления —
   простой текст (reader/card.html), и выглядеть кнопкой ему нельзя.
   У ссылки цвет виден сразу, не только при наведении: без этого пункты
   выглядели простым текстом, и было непонятно, что по ним можно нажать. */
a.toc-item { color: var(--accent); }
a.toc-item:hover { background: var(--bg); text-decoration: underline; }

/* --- §5. Характеристики --------------------------------------------------
   Список «факт: значение», каждый факт своей строкой — не в ряд: фактов
   до семи, в ряд они переносились бы вразнобой. */

.card-characteristics {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.card-characteristics > div {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.card-characteristics > div:last-child { border-bottom: none; }
.card-characteristics dt { flex: none; color: var(--muted); }
.card-characteristics dd { margin: 0; font-weight: 600; }
.card-characteristics dd a { font-weight: 600; }

/* --- §6. Раскладка на широком экране -------------------------------------
   .card-left и .card-right снова становятся настоящими группами (никакого
   display: contents) — каждая единой ячейкой сетки, со своей высотой,
   независимой от соседней. Это важно: раньше пробовал раскладывать каждую
   часть (обложку, кнопку, описание, мазмуну, характеристики) отдельной
   именованной областью сетки в общих строках с левой колонкой — высокая
   обложка слева заставляла строку с коротким описанием справа тянуться
   на всю её высоту, и после описания повисал пустой промежуток до
   мазмуну. Когда правая колонка — одна ячейка (а внутри неё текст просто
   идёт своим блочным порядком), лишней высоты неоткуда взяться. */

@media (min-width: 700px) {
  .card-page-body {
    display: grid;
    grid-template-columns: 265px 1fr;
    grid-template-areas: "title title" "left right";
    column-gap: var(--space-6);
  }
  .card-title { grid-area: title; }
  .card-left {
    grid-area: left;
    display: flex;
    flex-direction: column;
  }
  .card-right {
    grid-area: right;
    display: flex;
    flex-direction: column;
  }
  /* Внутри настоящих колонок порядок — снова обычный, из разметки
     (обложка → кнопка; описание → мазмуну → характеристики): order из §2
     был нужен только версии для телефона, где эти же части — плоский
     список без вложенных групп. */
  .card-cover, .card-read-wrap, .card-description,
  .toc-block, .card-characteristics { order: initial; }

  /* Мазмуну здесь — в своей колонке рядом с описанием, а не приклеен к
     обложке, как на телефоне: узкую ширину (и открытого, и свёрнутого,
     §4) оттуда снимаем целиком, вместе с явным width, а не только
     max-width — иначе он остался бы 220px и здесь. */
  .toc-block, .toc-block:has(details[open]) {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    /* На телефоне это var(--space-4) — интервал в тройке обложка/мазмуну/
       кнопка (§3-4). Здесь мазмуну в другом соседстве — после описания,
       перед характеристиками, — и той тройки не существует, поэтому
       отступ побольше, как у остальных промежутков между секциями. */
    margin-bottom: var(--space-6);
  }

  /* На телефоне обложка рядом с текстом того же предложения — 200px там
     уместны. На широком экране колонка пустая и просторная, и та же
     обложка выглядела мелкой рядом со своим же местом (+12,5% ширины).
     max-width тоже переопределяем: у него 60% от ширины колонки (265px) —
     это всего 159px, меньше самого width, а max-width в CSS побеждает. */
  .card-cover img { width: 225px; max-width: 100%; }

  /* Отступ до ленты «Похожие книги» здесь держали только оба столбца снизу
     (--space-6 у .card-characteristics/.card-read-wrap, смотря какой из
     них ниже) — с колонками рядом это читалось слишком плотным стыком.
     На телефоне порядок другой (§2) и .card-characteristics — последний
     видимый блок перед лентой без исключений, там уже достаточно воздуха
     и добавлять не нужно. */
  .rail { margin-top: var(--space-4); }
}

/* --- §7. Похожие книги ---------------------------------------------------
   Секция без внутренних правил: .rail и всё, что внутри, уже целиком
   описаны в webapp/css/home.css — та же лента, тот же компонент. */

/* --- §8. Окошко «Күтө туруңуз» на время скачивания (download.js) ---------
   .modal-overlay/.modal-box — общий каркас попапа (webapp/css/base.css,
   тот же, что и у «доступ закрыт»), здесь только своя середина: имя книги
   само переносится обычным текстом (без него длинное название вылезало бы
   за рамку), кружок ожидания и галочка успеха меняются местами через
   hidden — второй раз попап не пересобираем. */

.dl-modal p { margin: 0 0 var(--space-2); }
.dl-modal #dl-modal-size { color: var(--muted); }

.dl-modal-spin {
  width: 40px;
  height: 40px;
  margin: var(--space-4) auto;
  border: 4px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dl-spin-turn .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .dl-modal-spin { animation: none; }
}
@keyframes dl-spin-turn { to { transform: rotate(360deg); } }

/* [hidden] дублируем своим правилом — та же грабля, что и у .modal-overlay
   и .empty-state в base.css: без него .dl-modal-success{display:flex} ниже
   перебивает стандартное display:none у атрибута hidden (оба правила одной
   специфичности, а автор всегда сильнее браузерного по умолчанию), и
   галочка успеха видна с самого открытия окошка, ещё до конца скачивания —
   вместе с кружком ожидания разом. */
.dl-modal-success[hidden] { display: none; }
.dl-modal-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  color: var(--ok);
}
.dl-modal-success .icon { width: 40px; height: 40px; }
.dl-modal-success p { margin: 0; color: var(--ink); font-weight: 600; }