/* Раскладка для планшета и ноутбука: слева полка или список лекций, справа
   конспект. Порог 860 px — iPad в альбомной ориентации; в книжной остаётся
   одноколоночный вид.

   В левой колонке всегда ровно один экран: полка или список лекций предмета.
   Кто из них — решает приложение через body[data-side], потому что .active
   на широком экране относится к правой половине. */

@media (min-width: 860px) {
  body {
    display: grid;
    grid-template-columns: 340px 1fr;
    grid-template-rows: 100dvh;
    overflow: hidden;
  }

  #screen-shelf,
  #screen-subject {
    display: none;
    grid-column: 1;
    grid-row: 1;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    background: var(--ground);
    padding-bottom: 90px;
  }
  /* До первого перехода атрибута ещё нет — полка должна быть видна и так. */
  body:not([data-side="subject"]) #screen-shelf { display: block; }
  body[data-side="subject"] #screen-subject { display: block; }

  #screen-note, #screen-record, #screen-cards { grid-column: 2; grid-row: 1; }
  #screen-note:not(.active) { display: none; }
  #screen-record:not(.active) { display: none; }
  #screen-cards:not(.active) { display: none; }
  #screen-cards.active { min-height: 0; height: 100dvh; }
  #screen-record.active { display: block; overflow-y: auto; }
  /* Справка тоже живёт справа. Без своего места в сетке она вставала в ряд
     высотой 100dvh и обрезалась: тело с overflow:hidden не листается, а сам
     экран листаться не умел — так и пропадала нижняя половина текста. */
  #screen-help { grid-column: 2; grid-row: 1; }
  #screen-help:not(.active) { display: none; }
  #screen-help.active { display: block; min-height: 0; height: 100dvh; overflow-y: auto; }

  .stage-empty {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-content: center;
    text-align: center;
    color: var(--hint);
    padding: 40px;
  }
  .stage-empty h2 { color: var(--text); font-size: 19px; margin: 0 0 8px; font-family: var(--serif); }
  .stage-empty p { margin: 0 auto; max-width: 34ch; line-height: 1.6; font-size: 14.5px; }

  /* В боковой панели три книги в ряд слишком узкие — названия режутся. */
  .grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }

  /* Полоса витрины живёт в той же узкой колонке: кнопка рядом с текстом
     сжимала объяснение в столбик по три слова. Кнопка — под текстом, как на
     телефоне. */
  .demo-bar { grid-template-columns: 1fr; }
  .demo-out { grid-column: 1; grid-row: auto; margin-top: 6px; justify-self: start; }

  .sheet-wrap { padding: 26px 26px 120px; }
  .sheet { padding: 40px 44px 52px 62px; }
  .sheet::before { left: 44px; }
  .sheet h1 { font-size: 30px; }
  .sheet h2 { font-size: 20px; }

  .fab { left: 16px; right: auto; width: 308px; bottom: 16px; }
  .player { left: auto; right: 26px; width: 340px; }

  .sheet-modal { align-items: center; justify-content: center; }
  .sheet-modal .panel { width: 460px; border-radius: 18px; max-height: 80vh; padding: 24px; }

    /* Нижней панели у конспекта нет; плеер стоит у нижнего края. */
  #screen-note.active .player { bottom: 16px; }

  /* Экран повторения: карточка и ответы и так по 560 px, но шапка на всю
     ширину смотрелась как заголовок сайта. */
  .cards-head { padding-left: 26px; padding-right: 26px; }
}

@media (min-width: 1400px) {
  body { grid-template-columns: 380px 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ПЕЧАТЬ И СОХРАНЕНИЕ В PDF

   На бумаге остаётся только лист. Всё, что помогает на экране — панели,
   шторки, плашки, фактура бумаги, — на печати превращается в грязь, а
   тёмное оформление ещё и в чёрный разворот на весь лист. */
@media print {
  /* Тёмная тема на бумаге не имеет смысла: печатаем по светлым значениям
     тех же токенов, и весь лист вместе с блоками, метками и формулами
     приходит в порядок сам, без правил на каждый класс. */
  :root, html.dark {
    --paper: #ffffff;
    --paper-rule: transparent;
    --ink: #14171F;
    --ink-soft: #4A5261;
    --rule: #D8D8D2;
    --paper-label: #5A5346;
    --chip-paper: #F1F1EE;
    --margin-line: #C9A29C;
    --exam: #FFFBEC;
    --exam-line: #C9A227;
    --exam-text: #6B4708;
    --accent: #0F766E;
    --accent-soft: #EDF5F4;
    --line: #DEDEDE;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }

  body { display: block; background: #fff; overflow: visible; }

  /* Всё, что не текст конспекта. Список длинный намеренно: любая забытая
     плашка выходит на печать поверх первого абзаца. */
  /* .infinite здесь НЕТ намеренно: доска печатается. Её печатные правила
     собраны в board.css — там же, где всё остальное про доску. */
  .fab, .note-tools, .note-banners, .player, .sheet-modal, .toast,
  .ask-panel, .quote-bar, .formula-modal, .photo-view, .rec-pill,
  .readonly-note, .limit-note, .stream-note, .save-badge,
  .block-handle, .block-acts, .block-add, .block-preview-label,
  .stage-empty, #screen-shelf, #screen-subject, #screen-record,
  #screen-cards { display: none !important; }

  #screen-note { display: block !important; overflow: visible; height: auto; }
  .board { overflow: visible; }
  .sheet-wrap { position: static; transform: none !important; width: auto !important; padding: 0; }
  .sheet { box-shadow: none; border-radius: 0; padding: 0; }
  .sheet::before { display: none; }

  /* Блок конспекта не должен разрываться посередине определения. */
  .block, .exam-block, .tldr { break-inside: avoid; }
  .sheet h1, .sheet h2, .sheet h3 { break-after: avoid; }
}