/* Оформление текста теории (памятки ЕГЭ и ОГЭ) для публичных страниц /teoriya.
 * Скопировано из route/pamyatka.html — там те же правила живут inline; разметку
 * теории готовит app/services/theory_format.py. */
/* формулы наследуют цвет текста условия */
.katex { color: inherit; font-size: 1.02em; }
/* Чертежи — обычно PNG с чёрными линиями на белом фоне; на тёмном сайте
   это слепящий белый прямоугольник. Инвертируем: белый фон темнеет,
   линии светлеют. hue-rotate(180deg) компенсирует смещение оттенка у
   цветных элементов (напр. красные пометки), иначе после invert() они
   стали бы голубыми. */
.diagram-img { filter: invert(1) hue-rotate(180deg); background: #fff; }
/* СВГ-диаграммы (векторы, графики функций — нарисованы уже под тёмную
   тему: прозрачный фон, светлые оси/сетка) инверсия ломает — гасит белые
   оси на белом-после-инверсии фоне до полной невидимости. */
.diagram-img.diagram-svg { filter: none; background: transparent; }

/* блок теории */
.pm-theory { border:1px solid rgba(255,255,255,.08); border-radius:16px;
  background:#0d0e11; padding:4px 22px 22px; margin-bottom:16px; max-width:100%; overflow-x:hidden; }
/* Формулы и таблицы шире экрана — не обрезаем, а даём прокрутить, иначе
   на телефоне часть текста/формулы просто пропадает справа (у страницы
   везде overflow-x:hidden). */
/* У абзацев теории стоял overflow-x:auto «на случай широкой формулы». Он
   ничего не прокручивал (горизонтального переполнения в теории нет ни на
   одной памятке), зато по правилам CSS делал прокручиваемой и вертикаль —
   а встроенная дробь выступает за строку на 2-4px. В браузерах с обычными,
   не накладными полосами (Chrome на Windows) из-за этих трёх пикселей в
   каждом втором абзаце появлялась вертикальная полоса со стрелками.
   Широкое содержимое прокручивается там, где оно живёт: .katex-display,
   table и .formula — у каждого свой overflow-x ниже. */
.pm-theory p, .pm-theory li, .pm-theory .example, .pm-theory .ex-cond {
  max-width:100%; }
.pm-theory .katex-display { overflow-x:auto; overflow-y:hidden; padding:2px 0; -webkit-overflow-scrolling:touch; }
.pm-theory table { display:block; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; max-width:100%; }
.pm-theory-img { display:block; max-width:100%; height:auto; margin:14px auto;
  border-radius:12px; border:1px solid rgba(255,255,255,.08); background:#fff; }
.pm-theory h2 { font-size:1.55rem; font-weight:700; letter-spacing:-.015em;
  margin:30px 0 8px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); }
.pm-theory h2:first-of-type { border-top:none; padding-top:8px; }
/* Подзаголовок внутри раздела: в теории он был без стиля и падал
   на браузерный <h3> — крупнее нужного и с чужими отступами. */
.pm-theory h3 { font-size:1.18rem; font-weight:650; color:#eef1f6;
  letter-spacing:-.01em; margin:24px 0 9px; }
.pm-theory .when { font-size:.94rem; color:rgba(255,202,103,.95); margin:0 0 14px; font-weight:500; }
.pm-theory p { color:rgba(255,255,255,.88); font-size:1.06rem; line-height:1.68; margin:0 0 14px; }
/* Списки в теории идут без своего правила и наследовали мелкий кегль. */
.pm-theory ul li, .pm-theory ol li { color:rgba(255,255,255,.88); font-size:1.06rem;
  line-height:1.68; margin:0 0 7px; }
.pm-theory .formula { background:#101216; border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:16px 18px; margin:16px 0; text-align:center;
  overflow-x:auto; overflow-y:hidden; font-size:1.1rem; }
.pm-theory .steps { list-style:none; counter-reset:s; padding:0; margin:12px 0; }
.pm-theory .steps li { counter-increment:s; position:relative; padding:0 0 12px 36px;
  color:rgba(255,255,255,.88); font-size:1.04rem; line-height:1.6; }
.pm-theory .steps li::before { content:counter(s); position:absolute; left:0; top:0;
  width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.85); font-size:.74rem; font-weight:650;
  display:flex; align-items:center; justify-content:center; }
.pm-theory .example { background:#101216; border:1px solid rgba(255,255,255,.08);
  border-left:2px solid rgba(255,255,255,.18); border-radius:10px; padding:14px 16px; margin:14px 0 4px; }
.pm-theory .ex-lbl { font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.72); font-weight:650; margin-bottom:9px; }
/* Тип врезки (ex-warn / ex-tip / ex-task / ex-plain) и класс ex-answer
   проставляет сервер — app/services/theory_format.py. Раньше это делал JS
   после загрузки, и блок сначала рисовался обычным, а потом перекрашивался.
   «Важно», «Ловушка», «Ошибка» — единственное место с цветом: янтарный. */
.pm-theory .example.ex-warn { border-left-color:rgba(255,202,103,.9); }
.pm-theory .example.ex-warn .ex-lbl { color:rgba(255,202,103,.95); }
.pm-theory .example.ex-tip { border-left-color:rgba(255,255,255,.45); }
.pm-theory .example.ex-tip .ex-lbl { color:#fff; }
/* Разобранный пример читается как «условие → решение → ответ» */
.pm-theory .example.ex-task .ex-cond { color:#fff; font-weight:500; }
.pm-theory .example.ex-task .steps { margin-top:14px; }
.pm-theory .example.ex-task .steps::before { content:'Решение'; display:block; margin:0 0 10px;
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; font-weight:650;
  color:rgba(255,255,255,.45); }
.pm-theory .ex-answer { margin:14px 0 2px; padding:10px 14px; border-radius:8px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:#fff; font-size:1.06rem; overflow-x:auto; }
.pm-theory .ex-answer b { font-weight:700; margin-right:4px; }

/* Оглавление длинной темы (его собирает theory_format.add_toc). Якоря не
   должны прятаться под фиксированной шапкой, поэтому отступ при прокрутке. */
.pm-theory h2[id], .pm-theory h3[id] { scroll-margin-top:76px; }
.pm-theory .pm-toc { margin:18px 0 8px; border:1px solid rgba(255,255,255,.1);
  border-radius:12px; background:#101216; }
.pm-theory .pm-toc summary { cursor:pointer; list-style:none; display:flex;
  justify-content:space-between; align-items:center; gap:12px; padding:13px 16px;
  font-size:1rem; font-weight:650; color:#fff; }
.pm-theory .pm-toc summary::-webkit-details-marker { display:none; }
.pm-theory .pm-toc summary::after { content:'+'; font-weight:400; font-size:1.3rem;
  line-height:1; color:rgba(255,255,255,.5); margin-left:auto; }
.pm-theory .pm-toc[open] summary::after { content:'\2212'; }
.pm-theory .pm-toc summary span { font-size:.8rem; font-weight:500; color:rgba(255,255,255,.45); }
.pm-theory .pm-toc ol { list-style:none; margin:0; padding:0 16px 10px; }
.pm-theory .pm-toc li { padding:0; margin:0; font-size:1rem; }
.pm-theory .pm-toc a { display:block; padding:9px 0; color:rgba(255,255,255,.88);
  text-decoration:none; line-height:1.4; border-top:1px solid rgba(255,255,255,.07); }
.pm-theory .pm-toc a:hover { color:#fff; }
.pm-theory .pm-toc .toc-h3 a { padding-left:16px; font-size:.94rem; color:rgba(255,255,255,.62); }
.pm-theory .pm-toc .toc-h3 a:hover { color:#fff; }
.pm-theory .ex-cond { color:rgba(255,255,255,.88); font-size:1.04rem; line-height:1.62; margin:0 0 6px; }
.pm-theory .ex-check { color:rgba(255,255,255,.62); font-size:.94rem; margin:8px 0 0; }
.pm-theory .ex-table { width:100%; border-collapse:collapse; font-size:1rem;
  font-variant-numeric:tabular-nums; margin:8px 0; }
.pm-theory .ex-table td { padding:7px 9px; border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.84); }
.pm-theory .ex-table td:last-child { text-align:right; color:#f4f5f7; white-space:nowrap; }
.pm-theory .ex-table .total { color:#fff; font-weight:700; }

/* Справочная таблица-шпаргалка (признаки делимости и т.п.).
   Отдельный класс, а не инлайн-стили: раньше такие таблицы были со светлым
   фоном #b0b0b0 прямо в тексте теории и выбивались из тёмной темы. */
.pm-theory .ref-table { width:100%; border-collapse:collapse; font-size:.9rem;
  margin:0; background:transparent; }
.pm-theory .ref-wrap { background:#101216; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; margin:14px 0; padding:2px 2px 0; }
.pm-theory .ref-table th { text-align:left; padding:10px 12px; font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.42); border-bottom:1px solid rgba(255,255,255,.10); }
.pm-theory .ref-table td { padding:10px 12px; vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.06); color:rgba(255,255,255,.62); }
.pm-theory .ref-table tr:last-child td { border-bottom:none; }
.pm-theory .ref-table .ref-key { color:#f4f5f7; font-weight:600; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.pm-theory .ref-table .ref-ex { color:#f4f5f7; font-variant-numeric:tabular-nums; }
.pm-theory .ref-table .hl { color:rgba(255,202,103,.95); font-weight:600; }
/* На узком экране справочная таблица разваливается: колонка признака
   переносится по одному слову, а примеры уезжают за правый край и видны
   только после горизонтальной прокрутки. Ниже 560px строки перестраиваются
   в карточки — делитель, правило, примеры друг под другом. */
@media (max-width: 560px) {
  .pm-theory .ref-wrap { padding:0; }
  .pm-theory .ref-table thead { display:none; }
  .pm-theory .ref-table, .pm-theory .ref-table tbody,
  .pm-theory .ref-table tr, .pm-theory .ref-table td { display:block; width:100%; }
  .pm-theory .ref-table { overflow-x:visible; }
  .pm-theory .ref-table tr { padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,.06); }
  .pm-theory .ref-table tr:last-child { border-bottom:none; }
  .pm-theory .ref-table td { border:none; padding:0; }
  .pm-theory .ref-table .ref-key { font-size:1rem; margin-bottom:4px; }
  .pm-theory .ref-table .ref-key::before { content:'Делится на '; font-size:.72rem;
    letter-spacing:.06em; text-transform:uppercase; font-weight:600;
    color:rgba(255,255,255,.38); margin-right:5px; }
  .pm-theory .ref-table .ref-ex { margin-top:5px; font-size:.88rem; white-space:normal; }
}

@media (max-width:560px) {
  .pm-theory { padding:2px 16px 18px; }
}