/* Панель «Доска» под задачей (#8036): карточка тетради, холст Excalidraw, под ним плашка шага учителя.
   Высота холста меньше экрана — страницу всегда можно прокрутить пальцем мимо доски. */
.board-panel { position: relative; max-width: 760px; margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.kid .board-panel { max-width: 820px; }
.bp-head { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; padding: 14px 18px; }
.bp-head h2 { font: 500 22px / 1.2 var(--font-math); margin: 0; }
.bp-sub { flex: 1; min-width: 200px; font-size: var(--small); color: var(--ink-soft); }
.bp-toggle { margin-left: auto; }
.bp-body { display: none; }
.board-panel.open .bp-body { display: block; }
.bp-canvas { position: relative; height: min(560px, 62vh); min-height: 300px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.bp-wait { margin: 0; padding: 24px; color: var(--ink-soft); }
.bp-step { padding: 4px 18px 18px; }
.bp-step:empty { display: none; }
.bp-step .kicker { font-size: var(--small); color: var(--ink-soft); margin: 14px 0 0; }
.bp-step .actions { margin-top: 16px; }
.bp-step .btn:disabled { opacity: .5; cursor: default; }
.bp-q { font: 400 22px / 1.35 var(--font-math); margin: 14px 0 0; }
.bp-in { font: 400 24px / 1 var(--font-math); width: 140px; height: var(--control); padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); }
.bp-in:focus { outline: none; border-color: var(--ink); box-shadow: var(--focus); }
.kid .bp-in { width: 160px; font-size: 32px; border-radius: 12px; }
@media (max-width: 700px) {
  .bp-head { padding: 12px 14px; }
  .bp-sub { order: 3; flex-basis: 100%; }
  .bp-canvas { height: min(440px, 58vh); }
  .bp-step { padding: 2px 14px 16px; }
}

/* Планшет 820 (iPad): колонка сетки .page росла по самой длинной строке шапки (тема + клетки, nowrap) до 908 px,
   и правый край задачи, «Закончить» и «Свернуть» обрезались. Колонку держим по ширине экрана, шапку переносим.
   Место правки — style.css программиста; здесь, чтобы не конфликтовать в параллельной работе. */
.page { grid-template-columns: minmax(0, 1fr); }
.top { flex-wrap: wrap; row-gap: 6px; }

/* доска учителя над черновиком (#8036, правки после теста): появляется на время разбора */
.bp-teach { position: relative; height: min(400px, 46vh); min-height: 240px; border-top: 1px solid var(--line); background: var(--paper); }
.bp-teach[hidden] { display: none; }
.bp-teach + .bp-canvas { border-top-style: dashed; }
.bp-dots { letter-spacing: 3px; color: var(--ink); }
@media (max-width: 700px) { .bp-teach { height: min(340px, 44vh); } }