/* Формулы KaTeX.

   Своих цветов здесь нет: формула набирается currentColor и потому одинаково
   читается и на белой бумаге, и в тёмном оформлении, и на цветной карточке
   доски. Единственное исключение — красный текст ошибки, он берёт --danger.

   Вторая забота файла — ширина. Выключная формула на матанализе легко уезжает
   за край телефона. Её собственная полоса прокрутки спасает лист от
   горизонтального скролла, но сама по себе молчит: человек видит формулу,
   обрезанную ровно по краю бумаги, и не догадывается, что справа есть
   продолжение. Поэтому у прокрутки есть видимый край — тень, которая гаснет,
   когда доехал до конца (background-attachment: local, без единой строки JS). */

/* ── Кегль ──────────────────────────────────────────────────────────────────
   Родные 1.21em сделаны под шрифты с крупной строчной. У PT Serif, которым
   набран лист, строчная выше, чем у KaTeX Main, поэтому 1.21em выглядит как
   скачок, а 1.0em — как провал: буква x в формуле оказывается заметно мельче
   буквы x в слове. 1.12em выравнивает их оптически. */
.katex {
  font-size: 1.12em;
  color: currentColor;
}

/* Строчная формула внутри предложения.

   display:inline — не украшение, а условие: у inline-block с непрозрачной
   прокруткой базовая линия по спецификации съезжает на нижний край блока,
   и прежний костыль vertical-align:middle ронял каждую «$f$» и «$a$» ниже
   строки — в абзаце это читалось как опечатка набора. Оставленный inline
   отдаёт перенос самому KaTeX: он режет вывод на .base по знакам отношений
   и операциям, и длинная строчная формула переносится по ним сама. */
.math-inline {
  display: inline;
  overflow-wrap: break-word;
}

/* ── Выключная формула ──────────────────────────────────────────────────────
   Своя строка и своя прокрутка, а по краям — подсказка, что прокрутка есть.

   Как это устроено. Первые шесть слоёв — «заплатки» цветом подложки, они
   приклеены к содержимому (local) и потому едут вместе с формулой. Последние
   два — сами тени, они приклеены к рамке (scroll) и стоят на месте. Пока
   формула не сдвинута, левая заплатка накрывает левую тень; уехала вправо —
   заплатка ушла вместе с ней, и тень открылась. Справа зеркально.

   Заплатка на каждой стороне собрана из трёх слоёв, потому что столько их и
   бывает на самом деле: бумага, тонировка блока (жёлтый экзаменационный) и
   тонировка плашки формулы. Тонировки в палитре полупрозрачные, одним слоем
   их не повторить. Пока слоёв было два, у формулы в плашке внутри
   экзаменационного блока по краям стояли два светлых прямоугольника:
   заплатка красила её жёлтым мимо серой плашки. */
.math-block {
  display: block;
  max-width: 100%;
  min-width: 0;
  margin: 10px 0;
  padding: 2px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;

  /* Подложка снизу вверх: --math-base — бумага под блоком, --math-bg —
     тонировка блока, --math-tint — тонировка плашки формулы. Переопределяются
     ниже для каждого места, где формула лежит не на голом листе. */
  --math-base: var(--paper);
  --math-bg: transparent;
  --math-tint: transparent;
  --math-patch: 34px;
  --math-edge: 18px;

  background-repeat: no-repeat;
  background-attachment: local, local, local, local, local, local, scroll, scroll;
  background-position:
    left center, left center, left center,
    right center, right center, right center,
    left center, right center;
  background-size:
    var(--math-patch) 100%, var(--math-patch) 100%, var(--math-patch) 100%,
    var(--math-patch) 100%, var(--math-patch) 100%, var(--math-patch) 100%,
    var(--math-edge) 100%, var(--math-edge) 100%;
  background-image:
    linear-gradient(to right, var(--math-tint) 0, var(--math-tint) 20px, transparent var(--math-patch)),
    linear-gradient(to right, var(--math-bg) 0, var(--math-bg) 20px, transparent var(--math-patch)),
    linear-gradient(to right, var(--math-base) 0, var(--math-base) 20px, transparent var(--math-patch)),
    linear-gradient(to left, var(--math-tint) 0, var(--math-tint) 20px, transparent var(--math-patch)),
    linear-gradient(to left, var(--math-bg) 0, var(--math-bg) 20px, transparent var(--math-patch)),
    linear-gradient(to left, var(--math-base) 0, var(--math-base) 20px, transparent var(--math-patch)),
    linear-gradient(to right,
      color-mix(in srgb, currentColor 17%, transparent),
      color-mix(in srgb, currentColor 0%, transparent)),
    linear-gradient(to left,
      color-mix(in srgb, currentColor 17%, transparent),
      color-mix(in srgb, currentColor 0%, transparent));
}

.math-block .katex-display {
  /* Свои поля уже заданы у .math-block, родные от KaTeX их удваивают. */
  margin: 0;
  padding: 0 2px;
}

/* Внутри .formula блок уже сам по себе рамка с фоном — второй отступ лишний. */
.formula .math-block { margin: 0; }

/* Номер формулы (\tag) не должен уезжать вместе с прокруткой. */
.math-block .katex-display > .katex { text-align: center; }

/* Где формула лежит не на голой бумаге — там и заплатка другая. Иначе тень
   не гаснет до конца и висит серой полоской у края жёлтого блока. */
.formula .math-block { --math-tint: var(--chip-paper); }
.is-exam .math-block,
.exam-block .math-block { --math-bg: var(--exam); }
.tldr .math-block { --math-bg: var(--accent-soft); }
.card .math-block,
.kind-card .math-block,
.option .math-block,
.ask-log .math-block { --math-base: var(--card); }
.flash .math-block { --math-base: var(--paper); }

/* Полоса прокрутки у формулы появляется только когда она нужна, и остаётся
   ненавязчивой: это всё-таки текст конспекта, а не таблица. Тень у края уже
   сказала главное, полоске остаётся быть тоньше волоса. */
.math-block::-webkit-scrollbar { height: 3px; }
.math-block::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 2px;
}

/* Телефон. Выключная формула на 390 px обрезается на каждой второй теореме,
   и лучший способ этого избежать — не растить её. Кегль строчных формул тут
   не трогаем: они внутри предложения и обязаны совпадать с текстом. */
@media (max-width: 599px) {
  .math-block .katex-display > .katex { font-size: 1em; }
  .math-block { --math-patch: 28px; --math-edge: 15px; }
}

/* KaTeX не смог разобрать формулу. Красный из его настроек прописан инлайном,
   поэтому перебиваем его своим — иначе в тёмной теме он выжигает глаза. */
.katex .katex-error,
.katex-error,
.math-error {
  color: var(--danger) !important;
  font-style: normal;
  font-family: var(--sans);
  font-size: .95em;
}

/* katex не загрузился: показываем сам LaTeX. Курсив тот же, что был у .math
   до появления формул, чтобы конспект не изменился внешне. */
.math-raw {
  font-style: italic;
  color: var(--text-soft);
  overflow-x: auto;
  white-space: pre-wrap;
}

/* На доске карточка узкая, а формул в ней много — там формула ужимается.
   Классы именно эти: .card — карточка в списке лекций (app.css), .kind-card —
   карточка конспекта на доске (board.css). Ни .note-card, ни любого другого
   имени в разметке нет, и правило на него молча не работало бы. */
.card .math-block,
.kind-card .math-block { margin: 6px 0; }
.card .katex,
.kind-card .katex { font-size: 1.04em; }

/* Печать: прокрутки на бумаге нет, формула должна поместиться целиком, а
   тени и заплатки — это экранная механика, на бумаге они грязь. */
@media print {
  .math-block, .math-inline { overflow: visible; }
  .math-block { background-image: none; }
}