/* Бланк ответов и сканер.

   Лист печатают на «Материалдар базасы», а читают телефоном в
   «Кураторлық» — разметка у них одна, поэтому стили лежат отдельно от
   страницы: кружки должны стоять ровно там, где их потом ищут.

   Размер листа — 794×1123 точки (A4 при 96 dpi). Числа здесь не
   украшение: по ним сканер считает, где какой кружок (web/lib/omr.js). */
.omr-a4 {
  display: block; position: relative; box-sizing: border-box;
  width: 794px; height: 1123px; padding: 36px 44px 44px; overflow: hidden;
  background: #fff; color: #1d1d1f;
  font-family: var(--font, system-ui), system-ui, -apple-system, sans-serif;
}
/* Половина листа: два бланка на A4 — на класс уходит вдвое меньше бумаги.
   Углы, кружки и метка те же, меньше только поля и шапка. */
.omr-page {
  display: block; position: relative; box-sizing: border-box;
  width: 794px; height: 1123px; overflow: hidden; background: #fff;
}
/* Поля у половины шире, чем кажется нужным: между угловой меткой и
   текстом должен быть воздух. Стояли вплотную — на фотографии метка
   слипалась с буквой в одно пятно, и лист читался мимо. */
.omr-a4.is-half { width: 794px; height: 552px; padding: 24px 44px 26px; }
.omr-a4.is-half .omr-head b { font-size: 15px; }
.omr-a4.is-half .omr-head small { font-size: 11px; margin-right: 116px; }
.omr-a4.is-half .omr-head b { margin-right: 116px; }
/* QR на половине не мельче, чем на целом листе: его ищут телефоном с
   рук, и лишние точки тут дороже места. */
.omr-a4.is-half .omr-qr { top: 12px; right: 44px; width: 96px; height: 96px; }
.omr-a4.is-half .omr-head { height: 42px; }
.omr-a4.is-half .omr-who { height: 38px; margin: 0; }
.omr-a4.is-half .omr-note { height: 18px; }
.omr-a4.is-half .omr-who span { margin: 0 6px 6px 0; padding: 4px 8px; font-size: 12px; }
.omr-a4.is-half .omr-note { font-size: 10px; }
/* На половине листа кружки чуть мельче и стоят теснее: двадцать строк
   математики должны уместиться в колонку и не налезть на подпись. */
.omr-a4.is-half .omr-who span { padding: 3px 8px; }
.omr-a4.is-half .omr-foot { bottom: 10px; left: 44px; right: 44px; }
/* Линия реза между бланками: её видно и на сером принтере. */
.omr-cut {
  display: flex; align-items: center; gap: 8px;
  height: 19px; padding: 0 44px; color: #a1a1a6; font-size: 11px;
}
.omr-cut i { flex: 1 1 auto; border-top: 1px dashed #a1a1a6; }

.omr-foot {
  position: absolute; left: 44px; right: 44px; bottom: 18px;
  display: flex; justify-content: space-between; gap: 12px;
  padding-top: 6px; border-top: 1px solid #e5e5ea; font-size: 11px; color: #a1a1a6;
}

/* ── части листа ──
   Лист на одного ученика: имя и ЖСН уже вписаны, кружки закрашивает он
   сам. По углам — чёрные квадраты: по ним сканер находит лист и выправляет
   перекос, поэтому их размер и отступ трогать нельзя. */
/* Сам бланк — обычный блок, а не колонка flex: html2canvas раскладывает
   блочных детей flex-колонки мимо места, и шапка уезжала к середине
   листа. Подпись внизу держится краем листа. */
/* Метки крупнее любого другого пятна на листе — так их и находят на
   фотографии: четыре самых больших сплошных квадрата. Кружок ответа 16
   точек, метка 24: перепутать нельзя даже на косом снимке. */
.omr-mark { position: absolute; width: 24px; height: 24px; background: #000; }
.omr-mark--tl { top: 10px; left: 10px; }
.omr-mark--tr { top: 10px; right: 10px; }
.omr-mark--bl { bottom: 10px; left: 10px; }
.omr-mark--br { bottom: 10px; right: 10px; }
/* Шапка и поля бланка — без flex-wrap и без выравнивания по базовой
   линии: html2canvas такую раскладку рисует мимо, и подпись уезжала на
   середину листа. Обычные блоки и inline-block он рисует точно. */
/* Высоты шапки заданы жёстко, а не по содержимому: сканер строит такой
   же лист по метке, но без названий и подписей — а кружки обязаны встать
   ровно там же, где на бумаге. Поэтому длина заголовка на разметку не
   влияет, лишнее просто не видно. */
.omr-head {
  box-sizing: border-box; height: 52px; overflow: hidden;
  padding-bottom: 8px; border-bottom: 3px solid #d9412b;
}
.omr-head b { display: block; margin-right: 124px; font-size: 20px; letter-spacing: -.02em; }
.omr-head small { display: block; margin: 2px 124px 0 0; font-size: 12px; color: #6e6e73; }
.omr-qr { position: absolute; top: 20px; right: 44px; width: 104px; height: 104px; }
.omr-qr svg { width: 100%; height: 100%; }
/* Без отступов: высоты шапки — те же числа, по которым считает
   орналасу(), и лишние 12 точек сдвинули бы всю сетку кружков. */
.omr-who { box-sizing: border-box; height: 46px; overflow: hidden; margin: 0; }
.omr-who span {
  display: inline-block; margin: 0 8px 8px 0; min-width: 130px;
  padding: 6px 10px; border: 1px solid #d2d2d7; border-radius: 8px; font-size: 13px; font-weight: 600;
}
.omr-who span.is-wide { min-width: 300px; }
.omr-who i { font-style: normal; margin-right: 8px; font-size: 11px; font-weight: 500; color: #6e6e73; }
/* Вариант ученик закрашивает сам: заранее он неизвестен, лист печатают
   пачкой на всю группу. */
.omr-v { background: #f5f5f7; }
.omr-v u {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 4px;
  border: 1.4px solid #1d1d1f; border-radius: 50%;
  text-decoration: none; line-height: 1; font-size: 10px; font-weight: 500; color: #a1a1a6;
}
.omr-note { box-sizing: border-box; height: 24px; overflow: hidden; margin: 0; font-size: 11px; color: #6e6e73; }
/* Слой с кружками: каждый стоит по своим числам из орналасу(). Ни шрифт,
   ни длина подписи на их место больше не влияют. */
.omr-layer { position: absolute; inset: 0; }
.omr-b {
  position: absolute; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.4px solid #1d1d1f; border-radius: 50%;
  text-decoration: none; line-height: 1; font-size: 10px; color: #a1a1a6;
}
.omr-n {
  position: absolute; display: flex; align-items: center; justify-content: flex-end;
  text-decoration: none; line-height: 1; font-size: 11px; color: #6e6e73;
}
.omr-cap {
  position: absolute; box-sizing: border-box;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  height: 20px; padding-bottom: 4px; border-bottom: 1px solid #d2d2d7;
  font-size: 13px; overflow: hidden;
}
.omr-cap span { font-size: 11px; font-weight: 500; color: #a1a1a6; }
.omr-vlabel {
  position: absolute; display: flex; align-items: center; justify-content: flex-end;
  height: 14px; font-style: normal; line-height: 1; font-size: 11px; font-weight: 500; color: #6e6e73;
}

.omr-page {
  display: block; position: relative; box-sizing: border-box;
  width: 794px; height: 1123px; overflow: hidden; background: #fff;
}
/* Поля у половины шире, чем кажется нужным: между угловой меткой и
   текстом должен быть воздух. Стояли вплотную — на фотографии метка
   слипалась с буквой в одно пятно, и лист читался мимо. */
.omr-a4.is-half { width: 794px; height: 552px; padding: 24px 44px 26px; }
.omr-a4.is-half .omr-head b { font-size: 15px; }
.omr-a4.is-half .omr-head small { font-size: 11px; margin-right: 116px; }
.omr-a4.is-half .omr-head b { margin-right: 116px; }
/* QR на половине не мельче, чем на целом листе: его ищут телефоном с
   рук, и лишние точки тут дороже места. */
.omr-a4.is-half .omr-qr { top: 12px; right: 44px; width: 96px; height: 96px; }
.omr-a4.is-half .omr-head { height: 42px; }
.omr-a4.is-half .omr-who { height: 38px; margin: 0; }
.omr-a4.is-half .omr-note { height: 18px; }
.omr-a4.is-half .omr-who span { margin: 0 6px 6px 0; padding: 4px 8px; font-size: 12px; }
.omr-a4.is-half .omr-note { font-size: 10px; }
/* На половине листа кружки чуть мельче и стоят теснее: двадцать строк
   математики должны уместиться в колонку и не налезть на подпись. */
.omr-a4.is-half .omr-who span { padding: 3px 8px; }
.omr-a4.is-half .omr-foot { bottom: 10px; left: 44px; right: 44px; }
/* Линия реза между бланками: её видно и на сером принтере. */
.omr-cut {
  display: flex; align-items: center; gap: 8px;
  height: 19px; padding: 0 44px; color: #a1a1a6; font-size: 11px;
}
.omr-cut i { flex: 1 1 auto; border-top: 1px dashed #a1a1a6; }

.omr-foot {
  position: absolute; left: 44px; right: 44px; bottom: 18px;
  display: flex; justify-content: space-between; gap: 12px;
  padding-top: 6px; border-top: 1px solid #e5e5ea; font-size: 11px; color: #a1a1a6;
}

/* ── части листа ──
   Лист на одного ученика: имя и ЖСН уже вписаны, кружки закрашивает он
   сам. По углам — чёрные квадраты: по ним сканер находит лист и выправляет
   перекос, поэтому их размер и отступ трогать нельзя. */
/* Сам бланк — обычный блок, а не колонка flex: html2canvas раскладывает
   блочных детей flex-колонки мимо места, и шапка уезжала к середине
   листа. Подпись внизу держится краем листа. */
/* Метки крупнее любого другого пятна на листе — так их и находят на
   фотографии: четыре самых больших сплошных квадрата. Кружок ответа 16
   точек, метка 24: перепутать нельзя даже на косом снимке. */
.omr-mark { position: absolute; width: 24px; height: 24px; background: #000; }
.omr-mark--tl { top: 10px; left: 10px; }
.omr-mark--tr { top: 10px; right: 10px; }
.omr-mark--bl { bottom: 10px; left: 10px; }
.omr-mark--br { bottom: 10px; right: 10px; }
/* Шапка и поля бланка — без flex-wrap и без выравнивания по базовой
   линии: html2canvas такую раскладку рисует мимо, и подпись уезжала на
   середину листа. Обычные блоки и inline-block он рисует точно. */
/* Высоты шапки заданы жёстко, а не по содержимому: сканер строит такой
   же лист по метке, но без названий и подписей — а кружки обязаны встать
   ровно там же, где на бумаге. Поэтому длина заголовка на разметку не
   влияет, лишнее просто не видно. */
.omr-head {
  box-sizing: border-box; height: 52px; overflow: hidden;
  padding-bottom: 8px; border-bottom: 3px solid #d9412b;
}
.omr-head b { display: block; margin-right: 124px; font-size: 20px; letter-spacing: -.02em; }
.omr-head small { display: block; margin: 2px 124px 0 0; font-size: 12px; color: #6e6e73; }
.omr-qr { position: absolute; top: 20px; right: 44px; width: 104px; height: 104px; }
.omr-qr svg { width: 100%; height: 100%; }
/* Без отступов: высоты шапки — те же числа, по которым считает
   орналасу(), и лишние 12 точек сдвинули бы всю сетку кружков. */
.omr-who { box-sizing: border-box; height: 46px; overflow: hidden; margin: 0; }
.omr-who span {
  display: inline-block; margin: 0 8px 8px 0; min-width: 130px;
  padding: 6px 10px; border: 1px solid #d2d2d7; border-radius: 8px; font-size: 13px; font-weight: 600;
}
.omr-who span.is-wide { min-width: 300px; }
.omr-who i { font-style: normal; margin-right: 8px; font-size: 11px; font-weight: 500; color: #6e6e73; }
/* Вариант ученик закрашивает сам: заранее он неизвестен, лист печатают
   пачкой на всю группу. */
.omr-v { background: #f5f5f7; }
.omr-v u {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 4px;
  border: 1.4px solid #1d1d1f; border-radius: 50%;
  text-decoration: none; line-height: 1; font-size: 10px; font-weight: 500; color: #a1a1a6;
}
.omr-note { box-sizing: border-box; height: 24px; overflow: hidden; margin: 0; font-size: 11px; color: #6e6e73; }
.omr-cols { display: flex; gap: 16px; }
.omr-block { flex: 1 1 0; min-width: 0; }
.omr-block > b {
  box-sizing: border-box; height: 24px; overflow: hidden;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #d2d2d7; font-size: 13px;
}
.omr-block > b span { font-size: 11px; font-weight: 500; color: #a1a1a6; }
.omr-rows { display: grid; gap: 4px; }
/* Высота строки задана числом, а не содержимым: иначе она зависит от
   шрифта — а шрифт на листе и у сканера может отличаться (он ещё и
   догружается). Сдвиг в полточки на строку к двадцатой превращается в
   целый ряд, и сканер читает соседний кружок. */
.omr-row { display: flex; align-items: center; gap: 5px; height: 19px; }
.omr-row s { width: 18px; line-height: 1; text-decoration: none; text-align: right; font-size: 11px; color: #6e6e73; }
.omr-row u {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: 1.4px solid #1d1d1f; border-radius: 50%;
  text-decoration: none; line-height: 1; font-size: 10px; color: #a1a1a6;
}

/* ── сканер ──
   Во весь экран: камера, подсказка и карточка с тем, кого нашли. Лист для
   разметки держим за краем экрана — он нужен только как линейка. */
.omr-lock { overflow: hidden; }
.omr-hidden-sheet { position: fixed; top: 0; left: -20000px; width: 794px; z-index: -1; }
.omr-scan {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; flex-direction: column;
  background: #000; color: #fff;
  font-family: var(--font, system-ui), system-ui, sans-serif;
}
.omr-scan-bar {
  display: flex; align-items: center; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  font-size: 15px; font-weight: 600;
}
.omr-x {
  width: 32px; height: 32px; border: 0; border-radius: 16px;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 16px; cursor: pointer;
}
.omr-scan-n { margin-left: auto; font-size: 13px; color: #a1a1a6; }
/* Номер сборки: по нему видно, обновилось ли приложение с домашнего экрана. */
.omr-scan-v { font-size: 11px; color: #6e6e73; font-variant-numeric: tabular-nums; }
/* Запасной путь: снять обычной камерой и отдать снимок. В приложении с
   домашнего экрана живой камеры может не быть вовсе. */
.omr-pick {
  padding: 7px 12px; border-radius: 12px; background: rgba(255, 255, 255, .14);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.omr-scan.is-nocam .omr-scan-view video { display: none; }
.omr-scan.is-nocam .omr-scan-frame { border-style: dashed; }
.omr-scan.is-nocam .omr-pick { background: var(--green, #2c9d62); }
.omr-scan-view { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.omr-scan-view video { width: 100%; height: 100%; object-fit: cover; }
/* Рамка-подсказка в пропорции бланка: половина листа шире, чем выше, и
   держать телефон удобнее поперёк. */
.omr-scan-frame {
  position: absolute; top: 50%; left: 5%; right: 5%;
  aspect-ratio: 794 / 552; transform: translateY(-50%);
  border: 2px solid rgba(255, 255, 255, .5); border-radius: 12px;
}
/* Поймали лист: зелёная вспышка по всему кадру. */
.omr-scan.is-hit .omr-scan-frame { border-color: #2c9d62; box-shadow: 0 0 0 100vmax rgba(44, 157, 98, .25) inset; }
.omr-scan-hint.is-good { color: #7ee2a8; }
.omr-scan-hint {
  position: absolute; left: 0; right: 0; bottom: 16px; margin: 0;
  text-align: center; font-size: 13px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.omr-scan-card {
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: #1c1c1e; border-radius: 20px 20px 0 0;
}
.omr-card-who { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.omr-card-who b { font-size: 20px; }
.omr-card-who span { font-size: 13px; color: #a1a1a6; }
.omr-card-rows { display: grid; gap: 4px; margin-bottom: 10px; }
.omr-card-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-size: 14px;
}
.omr-card-row b { font-size: 16px; }
.omr-card-row i { font-style: normal; font-size: 12px; color: #a1a1a6; }
.omr-card-meta { margin-bottom: 12px; font-size: 13px; color: #a1a1a6; }
.omr-card-meta i { font-style: normal; margin-left: 8px; color: #ffd60a; }
.omr-card-btns { display: flex; gap: 8px; }
.omr-btn {
  flex: 1 1 0; padding: 12px; border: 0; border-radius: 12px;
  background: var(--green, #2c9d62); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.omr-btn--ghost { background: rgba(255, 255, 255, .12); }

/* На половине листа подписи и номера мельче — кружки и так стоят по
   своим числам. */
.omr-a4.is-half .omr-cap { height: 18px; font-size: 12px; }
.omr-a4.is-half .omr-n { font-size: 10px; }
.omr-a4.is-half .omr-b { font-size: 10px; }