/* Болтик · печатный лист А4.

   Один и тот же CSS обслуживает и превью на экране, и бумагу. Размеры поэтому заданы
   в мм и пунктах, а не в пикселях: пиксель на экране и пиксель на принтере — разные
   вещи, и «на глаз подобранный» лист вылезает за поля именно на печати.

   Цвет здесь почти не используется. Лист печатают дома и в школе, часто на чёрно-белом
   принтере и на экономном режиме: всё, что несёт смысл, нарисовано линией, а не заливкой. */

:root{
    --ink:#1c2128;          /* основной текст */
    --ink-soft:#5b6673;     /* подписи, служебное */
    --rule:#aab3bd;         /* линии для письма */
    --rule-soft:#d5dae0;
    --accent:#2f8f5b;       /* зелёный «Болтика» — только акцент, не заливка */
    --paper:#fff;
}

/* Шрифты только системные: лист должен одинаково печататься без интернета.
   Verdana первым не случайно — у неё широкие буквы и крупный «глаз», для 1–3 класса
   это читается заметно легче, чем узкая Arial. */
.page{
    font-family:Verdana,"Segoe UI",Tahoma,"DejaVu Sans",sans-serif;
    color:var(--ink);
    background:var(--paper);
    width:210mm;
    min-height:297mm;
    padding:12mm;
    margin:0 auto 10mm;
    box-sizing:border-box;
    box-shadow:0 4px 24px rgba(20,30,45,.18);
    display:flex;
    flex-direction:column;
}

/* ---------- шапка ---------- */
.page-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8mm;
    border-bottom:.8mm solid var(--accent);
    padding-bottom:3mm;
}
.page-head h1{
    font-size:19pt;
    line-height:1.15;
    margin:0;
    letter-spacing:-.2pt;
}
.page-head .sub{
    margin:1.5mm 0 0;
    font-size:9.5pt;
    color:var(--ink-soft);
}
.page-head .brand{
    display:flex;
    align-items:center;
    gap:2mm;
    color:var(--accent);
    font-size:8.5pt;
    font-weight:700;
    letter-spacing:.6pt;
    white-space:nowrap;
    padding-top:1mm;
}
.page-head .mark{width:7mm;height:7mm;flex:none}

/* ---------- имя и дата ---------- */
.namebar{
    display:flex;
    gap:10mm;
    margin-top:4mm;
    font-size:10pt;
    color:var(--ink-soft);
}
.namebar .field{display:flex;align-items:baseline;gap:2mm;flex:1}
.namebar .lbl{flex:none}

/* ---------- задание ----------
   Правило «Болтика»: то, что нужно сделать, объявляется до начала, крупно и отдельным
   блоком. Мелкая подпись сбоку не работает — ребёнок её не читает и делает наугад. */
.instruction{
    margin:5mm 0 0;
    font-size:12.5pt;
    font-weight:700;
    line-height:1.3;
}
.note{
    margin:2mm 0 0;
    padding:2.5mm 3mm;
    font-size:9.5pt;
    line-height:1.4;
    color:var(--ink-soft);
    border-left:.6mm solid var(--rule-soft);
}
.page-body{flex:1;margin-top:6mm;display:flex;flex-direction:column}

/* ---------- сетки заданий ----------
   minmax(0,1fr), а не 1fr: у 1fr нижняя граница — содержимое колонки, и один длинный
   пример молча раздвигает всю сетку шире листа. Обрезанный по краю пример виден сразу,
   уехавшая на 9 сантиметров вправо колонка — только на бумаге. */
.grid{display:grid;column-gap:5mm;row-gap:4mm;align-content:start}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* Кегль крупный намеренно. Мелким шрифтом в четыре колонки влезает больше примеров,
   но семилетнему это читать тяжело, а писать ответ негде. Лучше три колонки покрупнее. */
.ex{
    display:flex;
    align-items:baseline;
    gap:1.5mm;
    min-width:0;
    font-size:18pt;
    line-height:1.9;
    break-inside:avoid;
}
/* Номер фиксированной ширины — иначе «1)» и «10)» сдвигают примеры друг относительно
   друга, и колонка перестаёт читаться сверху вниз. */
.ex .n{
    flex:none;
    width:6mm;
    text-align:right;
    font-size:10pt;
    color:var(--ink-soft);
}
.ex .q{white-space:nowrap}

/* Места для письма. Три вида: клетка под знак, полоса под ответ-число,
   линейка под слово или решение.
   Полоса тянущаяся, а не фиксированной ширины: так все ответы в колонке кончаются
   на одной вертикали, и лишний десяток пикселей уходит в неё, а не за край листа. */
.write{display:inline-block;border-bottom:.4mm solid var(--rule)}
.write.box{flex:1;min-width:8mm}
.write.line{flex:1;min-width:12mm}
.write.cell{
    flex:none;
    width:9mm;
    height:9mm;
    border:.4mm solid var(--rule);
    border-radius:1mm;
    align-self:center;
}

/* ---------- сравнение ---------- */
.cmp{gap:2.5mm;line-height:1.6}
.cmp .cmp-side{min-width:0}

/* ---------- слова с пропуском ---------- */
.wd{font-size:17pt;line-height:2.1}
.wd .word{
    flex:none;
    min-width:32mm;
    letter-spacing:1.2pt;   /* пропуск «_» должен читаться как отдельная позиция */
}

/* ---------- примеры в столбик ---------- */
.stacks{row-gap:7mm}
.stack{display:flex;gap:1.5mm;break-inside:avoid}
.stack .n{
    flex:none;width:6mm;text-align:right;
    font-size:10pt;color:var(--ink-soft);
    padding-top:1.5mm;
}
.st{
    flex:1;
    min-width:0;
    max-width:calc(var(--d,2)*.68em + 1.15em);
    font-size:17pt;
    line-height:1.35;
    text-align:right;
    /* табличные цифры: без них единица уже семёрки и разряды разъезжаются */
    font-variant-numeric:tabular-nums;
    letter-spacing:.5pt;
}
.st-row{position:relative}
/* Знак стоит слева от нижнего числа и не участвует в выравнивании разрядов —
   иначе он сдвигает всю строку на свою ширину. */
.st-op{position:absolute;left:0}
.st-rule{border-top:.5mm solid var(--ink);margin:1mm 0 0}
.st-ans{height:9mm}

/* ---------- пропущенное число ---------- */
.miss{line-height:1.7}
.miss .cell{margin:0 .5mm}

/* ---------- уравнения ---------- */
.eqs{row-gap:6mm}
.eq{break-inside:avoid}
.eq-q{display:flex;align-items:baseline;gap:1.5mm;font-size:17pt;line-height:1.4}
.eq-q .n{
    flex:none;width:6mm;text-align:right;
    font-size:10pt;color:var(--ink-soft);
}
.eq-line{display:block;height:8mm;margin-left:7.5mm}

/* ---------- текстовые задачи ---------- */
.stories{display:flex;flex-direction:column;gap:5mm}
.story{break-inside:avoid}
.story-q{
    display:flex;
    gap:2mm;
    font-size:12pt;
    line-height:1.45;
}
.story-q .n{
    flex:none;width:8mm;text-align:right;
    font-size:9.5pt;color:var(--ink-soft);
    position:relative;top:1.5pt;
}
.solve{
    display:flex;
    align-items:baseline;
    gap:2mm;
    margin:3.5mm 0 0 10mm;
    font-size:10.5pt;
    color:var(--ink-soft);
}
.solve-lbl{flex:none}

/* ---------- текст для чтения ---------- */
.rtext{flex:1;display:flex;flex-direction:column}
/* Рамка отделяет «это читают» от «это делают». Заливки нет: лист печатают
   на чёрно-белом принтере, и серый фон под текстом съедает контраст букв. */
.rt-body{
    border:.4mm solid var(--rule-soft);
    border-left:1.2mm solid var(--accent);
    border-radius:1.5mm;
    padding:5mm 6mm;
}
.rt-line{
    font-size:16pt;
    line-height:1.95;   /* начинающий читатель ведёт по строке пальцем — строкам нужен воздух */
    margin:0;
}
.rt-line + .rt-line{margin-top:1.5mm}

/* Вопросы распределяются по остатку листа сами: текст бывает и в три строки,
   и в шесть, и подгонять отступы под каждый было бы вручную. */
.rt-qs{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    margin-top:6mm;
}
.rt-item{break-inside:avoid}
.rt-q{
    display:flex;
    gap:2mm;
    font-size:12.5pt;
    line-height:1.4;
    break-inside:avoid;
}
.rt-q .n{
    flex:none;width:7mm;text-align:right;
    font-size:10pt;color:var(--ink-soft);
    position:relative;top:1pt;
}
.rt-ans{display:block;height:9mm;margin:2mm 0 0 9mm}

/* ---------- часы ----------
   Геометрию (циферблат, стрелки) рисует B.drawClock() в assets/clock.js — общий код
   с интерактивным тренажёром (practice/). Здесь только раскладка и то, как эта
   геометрия выглядит на бумаге: линией, без заливки — те же правила, что у всего
   остального листа (лист печатают и на чёрно-белом принтере). */
.clocks{row-gap:9mm}
.clock-item{display:flex;flex-direction:column;align-items:center;gap:3mm;break-inside:avoid}
.clock-item .n{align-self:flex-start;font-size:10pt;color:var(--ink-soft)}
.clockface{width:36mm;height:36mm}
.cf-face{fill:none;stroke:var(--ink);stroke-width:2}
.cf-tick{stroke:var(--ink-soft);stroke-width:1.2}
.cf-tick.big{stroke:var(--ink);stroke-width:2.2}
.cf-hand{stroke:var(--ink);stroke-linecap:round}
.cf-hand.hour{stroke-width:4.5}
.cf-hand.min{stroke-width:2.5}
.cf-hub{fill:var(--ink)}
.cf-num{fill:var(--ink);font-weight:700;font-family:Verdana,"Segoe UI",Tahoma,sans-serif}
/* Ровно 4 варианта всегда (1 верный + 3 похожих на ошибку) — сетка 2×2 жёстко,
   а не flex-wrap: тот сам переносил четвёртый вариант на свою строку и центрировал
   её отдельно, и на листе рядом оказывались то ряд из четырёх, то «три и один» —
   разные карточки выглядели по-разному собранными. */
.clock-opts{display:grid;grid-template-columns:1fr 1fr;gap:2mm 4mm}
.clock-opt{
    font-size:13pt;font-weight:700;
    padding:1mm 3mm;
    text-align:center;
    border:.4mm solid var(--rule);border-radius:2mm;
}

/* ---------- поиск слов ---------- */
.wsearch{display:flex;flex-direction:column;align-items:center;gap:9mm;margin-top:2mm}
.wsgrid{border-collapse:collapse}
.wsgrid td{
    width:14mm;height:14mm;
    border:.3mm solid var(--rule-soft);
    text-align:center;vertical-align:middle;
    font-size:15pt;font-weight:700;
    font-variant-numeric:tabular-nums;
}
/* Найденное слово — рамкой потолще, без заливки; border-collapse сам сливает
   границы соседних клеток одного слова в сплошной контур. */
.wsgrid.ans td.found{border:.8mm solid var(--accent)}
.ws-words{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:3mm 9mm;
    font-size:14pt;font-weight:700;
    max-width:150mm;
}

/* ---------- слоговая таблица ---------- */
.sylt{
    width:100%;
    flex:1;        /* таблица тянется на весь лист: чем крупнее клетка, тем легче вести пальцем */
    border-collapse:collapse;
    table-layout:fixed;
    font-size:24pt;
    font-weight:700;
    letter-spacing:1pt;
}
.sylt th,.sylt td{
    border:.4mm solid var(--rule);
    text-align:center;
    padding:4mm 0;
}
/* Заголовки — служебные подсказки, а не то, что читают вслух: делаем их тише,
   чтобы взгляд ребёнка шёл по клеткам таблицы, а не по кромке. */
.sylt th{
    font-size:14pt;
    color:var(--accent);
    background:none;
    border-color:var(--rule-soft);
}
.sylt .corner{border:none}

/* ---------- лист ответов ---------- */
.is-answers .page-head{border-bottom-color:var(--rule)}
.is-answers .page-head h1{font-size:15pt}
.ans .ex{font-size:12pt;line-height:1.7}
.ans-a{font-weight:700}
.ans-long{display:flex;flex-direction:column;gap:2.5mm}
.ans-long .ans-row{font-size:10pt;line-height:1.35;align-items:baseline}
.ans-long .ans-q{flex:1;color:var(--ink-soft)}
.ans-long .ans-a{flex:none;margin-left:4mm}

/* ---------- пакетная печать: общий лист ответов ----------
   Кегль — переменная, а не число: с трёхзначными ответами и тремя десятками вариантов
   фиксированный размер не влезает ни при каком разумном значении, а
   B.fitBatchAnswers() в layout.js уменьшает --ba-size, если лист вышел выше А4. */
.batch-ans{display:flex;flex-direction:column;gap:1.8mm;--ba-size:10pt}
.ba-row{display:flex;gap:1mm 4mm;font-size:var(--ba-size);line-height:1.3;break-inside:avoid}
.ba-seed{flex:none;width:13mm;font-weight:700;color:var(--accent)}
.ba-list{flex:1;min-width:0;display:flex;flex-wrap:wrap;row-gap:.6mm}
.ba-item{white-space:nowrap}
/* Точка-разделитель вместо номера: короткие ответы (примеры, столбик) идут без
   номера строки — их порядок совпадает с порядком заданий на листе, а с номером
   строка была бы вдвое длиннее и переставала умещаться в один ряд. */
.ba-item:not(:last-child)::after{content:'·';margin:0 2mm;color:var(--rule)}
/* Длинные ответы (текст с вопросами) в ряд не идут — каждый со своей строки,
   и там номер уже есть в самом тексте (list.long заполняется с ним, см. layout.js). */
.ba-list.long{flex-direction:column;row-gap:1mm;color:var(--ink-soft)}
.ba-list.long .ba-item::after{content:none}

/* ---------- подвал ---------- */
.page-foot{
    display:flex;
    justify-content:space-between;
    margin-top:6mm;
    padding-top:2.5mm;
    border-top:.3mm solid var(--rule-soft);
    font-size:8pt;
    color:var(--ink-soft);
}

/* ---------- собственно печать ---------- */
@page{size:A4;margin:12mm}

@media print{
    /* Поля отдаём @page: если оставить и padding страницы, отступ удвоится
       и лист поедет вниз-вправо. */
    .page{
        width:auto;
        min-height:0;
        margin:0;
        padding:0;
        box-shadow:none;
    }
    .page+.page{break-before:page}
    .no-print{display:none!important}
}