/**
 * Печатная вёрстка отчёта: то, что посетитель уносит с собой в PDF.
 *
 * Заведено 09.08.2026. Почему печать браузера, а не генератор PDF на сервере:
 * ни одной новой зависимости, ничего не считается на сервере, работает и на телефоне
 * (в диалоге печати есть «Сохранить в PDF»), и шрифты те же, что на экране.
 * Генератор на PHP потребовал бы библиотеки, своих шрифтов с кириллицей и отдельной
 * вёрстки, которая молча разъедется с экранной, — ровно та ловушка «вторая раскладка
 * отстаёт», из-за которой на этом сайте уже жил отдельный 404.php.
 *
 * ⚠️ Самое важное здесь — раскрыть аккордеоны. На экране их содержимое свёрнуто
 * через max-height: 0, и без принудительного раскрытия в PDF ушли бы одни заголовки:
 * отчёт выглядел бы полным, а был бы пустым.
 */

@media print {

    /* ── Что печатаем ────────────────────────────────────────────────────── */
    /* Всё лишнее убираем: шапка, подвал, форма, общие блоки главной.
       В отчёт идёт только персональный разбор. */
    .site-header,
    .site-footer,
    .mobile-menu,
    .hero-section,
    .what-you-get,
    .metodika,
    #about,
    #faq,
    .page-section--surface,
    .loading-indicator,
    .otchet-panel,
    .razdely,
    .svyaz,
    .info-icon,
    #matrix-tooltip,
    #health-tooltip,
    .article-cta {
        display: none !important;
    }

    /* ── Лист ────────────────────────────────────────────────────────────── */
    @page {
        size: A4 portrait;
        margin: 16mm 14mm 18mm;
    }

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

    body * { box-shadow: none !important; }

    /* ── Шапка отчёта: печатается только на бумаге ───────────────────────── */
    .otchet-shapka {
        display: block !important;
        border-bottom: 2pt solid #A34A08;
        padding-bottom: 4mm;
        margin-bottom: 5mm;
    }
    .otchet-shapka__nazvanie {
        font-family: var(--font-secondary), serif;
        font-size: 20pt;
        font-weight: 800;
        margin: 0 0 2mm;
        color: #7C2D12;
    }
    .otchet-shapka__data { font-size: 11pt; margin: 0 0 1mm; color: #1b1512; }
    .otchet-shapka__istochnik { font-size: 9pt; color: #6b5b4e; margin: 0; }

    /* ── Матрица ─────────────────────────────────────────────────────────── */
    /* Полезная ширина листа A4 при полях 14 мм — 182 мм, это примерно 688 px.
       Схема шириной 320 px при масштабе 1,65 занимает 528 px по ширине и 578 по высоте.
       Масштаб подобран ЗАМЕРОМ: при 1,8 низ схемы приходился на 1075 px при конце
       первого листа 1044, и она уезжала на второй, оставляя полстраницы пустой.
       Высоту рамки считаем ТОЙ ЖЕ формулой, что на экране, иначе вернётся обрезание. */
    .vision-block > .img {
        --matrix-scale: 1.65 !important;
        width: 100% !important;
        left: 0 !important;
        height: calc(var(--matrix-inner-h) * 1.65) !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .vision-block > .img > .i { transform: scale(1.65) !important; }
    .vision-block > .name > h2 { font-size: 15pt !important; }

    /* ── ⚠️ Печать наследует ТЕЛЕФОННУЮ раскладку ───────────────────────────
       Полезная ширина листа A4 — 182 мм, это около 688 px. Все медиазапросы вида
       @media (max-width: 768px) при печати ИСТИННЫ, поэтому лист получал мобильный
       вид: кружок аркана отдельной строкой над текстом, сводка в три колонки вместо
       пяти, разреженные строки таблицы. Отсюда и было 18 страниц вместо девяти.

       Селекторы ниже начинаются с `html`, чтобы поднять специфичность: свои правила
       со `!important` есть и в components/calculator/results.php, а они идут ПОЗЖЕ
       по документу и при равной специфичности побеждали. */

    /* Аккордеоны раскрыты полностью. */
    html .accordion-content {
        max-height: none !important;
        overflow: visible !important;
    }
    html .accordion-item {
        page-break-inside: auto;
        border: 0 !important;
        border-top: 1pt solid #EADDD0 !important;
        border-radius: 0 !important;
        margin: 0 0 3mm !important;
        background: none !important;
    }
    html .accordion-header {
        font-size: 11.5pt !important;
        font-weight: 700 !important;
        padding: 2mm 0 1.5mm !important;
        background: none !important;
        color: #7C2D12 !important;
        page-break-after: avoid;
        break-after: avoid;
    }
    html .accordion-header::after { content: '' !important; }
    html .accordion-item.is-highlighted { background: none !important; border-top: 1pt solid #EADDD0 !important; }
    html .accordion-content p.accordion-intro,
    html .accordion-content .interpretation-block {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    html p.accordion-intro {
        font-size: 9.5pt !important;
        color: #5C4C40 !important;
        margin: 0 0 2mm !important;
    }

    /* Блок трактовки: кружок СЛЕВА, текст справа. На телефоне он колонкой,
       и в печати это давало пустую строку под каждым кружком. */
    html .interpretation-block {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 0 2.5mm !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    html .interpretation-circle {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        width: 7mm !important;
        min-width: 7mm !important;
        height: 7mm !important;
        font-size: 9pt !important;
        margin: 0 3mm 0 0 !important;
    }
    html .interpretation-text h4 { font-size: 10pt !important; margin: 0 0 1mm !important; }
    html .interpretation-text p { font-size: 9.5pt !important; line-height: 1.45 !important; margin: 0 !important; }

    /* ── Сводка: пять колонок, а не три ──────────────────────────────────── */
    html #summary-placeholder .summary-container { margin: 2mm 0 4mm !important; padding: 0 !important; max-width: none !important; }
    /* Заголовок схемы с датой: на листе он дублирует шапку отчёта, где дата уже есть. */
    html .vision-block > .name { margin: 0 !important; }
    html .vision-block > .name .health-card-title { display: none !important; }
    html #summary-placeholder .summary-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 2mm !important;
    }
    html #summary-placeholder .summary-card {
        border: 1pt solid #EADDD0 !important;
        border-radius: 2mm !important;
        padding: 2.5mm 1.5mm !important;
        page-break-inside: avoid;
    }
    html #summary-placeholder .summary-card__value {
        font-size: 10pt !important;
        color: #A34A08 !important;
        margin-bottom: 1mm !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    html #summary-placeholder .summary-card__label { font-size: 6.5pt !important; min-height: 0 !important; line-height: 1.25 !important; }
    html #summary-placeholder .summary-title,
    html .interpretations-container .main-title,
    html .purpose-container .main-title {
        font-size: 13pt !important;
        margin: 4mm 0 2mm !important;
        page-break-after: avoid;
        break-after: avoid;
    }

    /* ── Карта здоровья: плотные строки ──────────────────────────────────── */
    html .health-card-container { border: none !important; padding: 0 !important; margin: 5mm 0 !important; background: none !important; }
    html .health-card-scroll-wrapper { overflow: visible !important; }
    html .health-card-header, html .health-card-body { min-width: 0 !important; }
    html .health-card-header, html .health-card-row {
        display: grid !important;
        grid-template-columns: 2fr 1fr 1fr 1fr !important;
        gap: 2mm !important;
        padding: 0 !important;
        min-height: 0 !important;
        align-items: center !important;
    }
    html .health-card-row { border-bottom: 0.5pt solid #EADDD0 !important; page-break-inside: avoid; }
    html .health-card-cell { font-size: 9pt !important; padding: 1.2mm 0 !important; border: 0 !important; display: block !important; }
    html .health-card-title { font-size: 11pt !important; margin: 0 0 2mm !important; padding: 0 !important; border: 0 !important; }
    html .mobile-label { display: none !important; }
    html .health-card-disclaimer {
        border-left: 2pt solid #D97706 !important;
        background: #FDF6EC !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        font-size: 8pt !important;
        padding: 2mm 3mm !important;
        margin: 0 0 3mm !important;
        page-break-inside: avoid;
    }

    /* ── Предназначение: четыре карточки в ряд ───────────────────────────── */
    html .purpose-container { padding: 0 !important; }
    html .cards-container { display: flex !important; flex-direction: row !important; gap: 2mm !important; }
    html .card {
        page-break-inside: avoid;
        border: 1pt solid #EADDD0 !important;
        border-radius: 2mm !important;
        padding: 3mm 2mm !important;
        flex: 1 1 0 !important;
        max-width: none !important;
        background: none !important;
    }
    html .card-title { font-size: 9.5pt !important; margin: 0 0 1.5mm !important; }
    html .card-description { font-size: 7.5pt !important; line-height: 1.35 !important; margin-bottom: 2.5mm !important; }
    html .circle { width: 9mm !important; height: 9mm !important; font-size: 10pt !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    html .label { font-size: 7pt !important; }
    html .operator { font-size: 9pt !important; }
    html .calculation { gap: 1.5mm !important; padding-top: 2mm !important; }

    /* ── Подвал отчёта ───────────────────────────────────────────────────── */
    .otchet-podval {
        display: block !important;
        margin-top: 8mm;
        padding-top: 4mm;
        border-top: 1pt solid #EADDD0;
        font-size: 8.5pt;
        color: #6b5b4e;
        page-break-inside: avoid;
    }

    a { text-decoration: none !important; color: inherit !important; }
}

/* На экране служебные части отчёта скрыты. */
.otchet-shapka, .otchet-podval { display: none; }