/* ==========================================================================
   Экспорт и «тихое» чтение статьи: режим «только чтение», подсказка о копировании
   Markdown и печатная таблица стилей, из которой браузер делает PDF.
   Скрипт — themes/github-style/static/js/reader-export.js.
   Файл подключается последним в head.html, поэтому переопределяет и courses-v2.css,
   и печатные правила вендорных github.min.css / frameworks.min.css.
   ========================================================================== */

/* --------------------------------------------------------------- подсказка */
/* Одна строка внизу экрана: «скопировано», «не получилось», «открываем печать».
   Живёт вне <header>, потому что в режиме «только чтение» шапка прозрачна. */
.reader-export-toast {
  background: var(--course-surface);
  border: 1px solid var(--course-line-strong);
  border-radius: 10px;
  bottom: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  color: var(--course-text);
  font-size: 13px;
  left: 50%;
  line-height: 1.45;
  margin: 0;
  max-width: min(560px, 92vw);
  padding: 10px 16px;
  position: fixed;
  text-align: center;
  transform: translateX(-50%);
  z-index: 80;
}

.reader-export-toast[hidden] { display: none; }
.reader-export-toast[data-tone="success"] { border-color: var(--course-green); }
.reader-export-toast[data-tone="error"] { border-color: var(--course-red); }

/* Кнопка «Markdown» на пару секунд подтверждает результат и цветом. */
[data-markdown-copy][data-copied="true"] {
  border-color: var(--course-green);
  color: var(--course-text);
}

[data-markdown-copy][data-busy="true"] { cursor: progress; }

/* ------------------------------------------------------- только чтение */
/*
  Это не второй «Фокус». Фокус (html[data-focus-mode="on"]) меняет вёрстку:
  убирает боковые панели и увеличивает кегль. «Только чтение» убирает всё
  служебное и интерактивное вокруг текста, оставляя страницу такой, какой
  она уйдёт в печать. Режимы независимы и складываются.
*/
html[data-reading-mode="on"] .reader-header {
  opacity: 0;
  transition: opacity 0.18s ease;
}

/* Шапка остаётся на месте (страница не прыгает) и проявляется при наведении
   или когда в неё приходит фокус с клавиатуры — иначе из режима не выйти. */
html[data-reading-mode="on"] .reader-header:hover,
html[data-reading-mode="on"] .reader-header:focus-within {
  opacity: 1;
}

html[data-reading-mode="on"] .reader-progress,
html[data-reading-mode="on"] .reader-header__progress,
html[data-reading-mode="on"] .reader-sidebar,
html[data-reading-mode="on"] .reader-panel-backdrop,
html[data-reading-mode="on"] .reader-feedback,
html[data-reading-mode="on"] .reader-feedback-hint,
html[data-reading-mode="on"] .support-cta,
html[data-reading-mode="on"] .post-nav,
html[data-reading-mode="on"] .site-footer,
html[data-reading-mode="on"] .article-mode-button,
html[data-reading-mode="on"] .mermaid-toolbar,
html[data-reading-mode="on"] [data-reader-panel-open] {
  display: none !important;
}

html[data-reading-mode="on"] .reader-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1000px;
}

html[data-reading-mode="on"] .reader-article {
  background: transparent;
  border-color: transparent;
}

html[data-reading-mode="on"] .reader-content,
html[data-reading-mode="on"] .article-header {
  margin: 0 auto;
  max-width: 76ch;
}

html[data-reading-mode="on"] [data-reading-toggle] {
  border-color: var(--course-cyan);
  color: var(--course-cyan);
}

/* ================================================================= печать */
/*
  «Скачать PDF» — это window.print(): собирать 772 PDF на сборке долго и тяжело,
  а браузер печатает в PDF из коробки. Всё качество результата держится здесь.
  Вендорные @media print из github.min.css трогают только заголовки и абзацы,
  конфликта нет; наши правила подключены позже и перекрывают их.
*/
@media print {
  @page { margin: 18mm 16mm; }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11.5pt;
    line-height: 1.5;
  }

  /* Ни шапок, ни панелей, ни кнопок, ни обсуждения, ни футера. */
  .skip-link,
  .reader-header,
  .portal-header,
  .site-footer,
  .reader-sidebar,
  .reader-panel-backdrop,
  .reader-progress,
  .reader-feedback,
  .reader-feedback-hint,
  .reader-export-toast,
  .support-cta,
  .post-nav,
  .psearch,
  .kgraph,
  .course-graph,
  .article-mode-button,
  .digitable-novel-mode-shell,
  .digitable-novel-course-embed,
  .mermaid-toolbar,
  [data-reader-panel-open],
  [data-content-views] {
    display: none !important;
  }

  /* Текст разворачивается на всю ширину листа. */
  .reader-main,
  .reader-layout,
  .reader-article,
  .reader-content,
  .article-header {
    border: 0 !important;
    box-shadow: none !important;
    display: block !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    width: auto !important;
  }

  /* Чёрным по белому — какая бы тема ни была выбрана на экране. */
  .reader-article,
  .reader-article * {
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
    text-shadow: none !important;
  }

  /* Ничего не режем по высоте: скроллящиеся контейнеры на бумаге теряют содержимое.
     Особенно mermaid: на экране диаграмма живёт в окне 70vh со своим скроллом,
     и без этих правил в PDF уехала бы только её верхушка. */
  .reader-article,
  .reader-content,
  .reader-content pre,
  .reader-content table,
  .reader-content .highlight,
  .reader-content .mermaid,
  .reader-content .mermaid-viewport,
  .reader-content details {
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .reader-content .mermaid-viewport { padding: 6px !important; }

  /* Код и таблицы не разрываются между страницами. */
  .reader-content pre,
  .reader-content .highlight,
  .reader-content table,
  .reader-content figure,
  .reader-content blockquote,
  .reader-content .mermaid,
  .reader-content details,
  .reader-content img,
  .reader-content svg {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .reader-content h1,
  .reader-content h2,
  .reader-content h3,
  .reader-content h4 {
    break-after: avoid;
    page-break-after: avoid;
  }

  .reader-content pre,
  .reader-content .highlight {
    border: 1px solid #999 !important;
    border-radius: 4px;
    font-size: 9.5pt;
    padding: 8px 10px !important;
    white-space: pre-wrap !important;
    word-break: break-word;
  }

  .reader-content table {
    border-collapse: collapse !important;
    font-size: 10pt;
    width: 100% !important;
  }

  .reader-content th,
  .reader-content td {
    border: 1px solid #999 !important;
    padding: 4px 7px !important;
  }

  /* Шапка длинной таблицы повторяется на каждой странице. */
  .reader-content thead { display: table-header-group; }

  .reader-content details[open] > summary { font-weight: 700; }

  /* Картинки, SVG и mermaid не должны обрезаться и уезжать за поле. */
  .reader-content img,
  .reader-content svg,
  .reader-content .mermaid,
  .reader-content .mermaid svg,
  .reader-content .mermaid-viewport svg {
    height: auto !important;
    max-width: 100% !important;
  }

  /* Тёмная палитра mermaid на белом листе не читается — перекрашиваем.
     !important нужен: mermaid пишет цвета инлайновым стилем. */
  .reader-content .mermaid svg text,
  .reader-content .mermaid svg .label,
  .reader-content .mermaid svg tspan {
    fill: #000 !important;
  }

  .reader-content .mermaid svg .node rect,
  .reader-content .mermaid svg .node polygon,
  .reader-content .mermaid svg .node circle,
  .reader-content .mermaid svg .node ellipse,
  .reader-content .mermaid svg .cluster rect {
    fill: #fff !important;
    stroke: #000 !important;
  }

  .reader-content .mermaid svg .edgePath .path,
  .reader-content .mermaid svg .flowchart-link,
  .reader-content .mermaid svg line {
    stroke: #000 !important;
  }

  /* Ссылка на бумаге бесполезна без адреса. */
  .reader-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.82em;
    word-break: break-all;
  }

  .reader-content a {
    text-decoration: underline;
  }

  /* Откуда лист: адрес статьи внизу последней страницы. */
  .reader-article[data-reader-source]::after {
    border-top: 1px solid #999;
    content: "Источник: " attr(data-reader-source);
    display: block;
    font-size: 9pt;
    margin-top: 10mm;
    padding-top: 4mm;
  }
}