/*
  Оформление тела задания ЕГЭ/ОГЭ: списки вариантов, столбцы «А Б В Г»,
  таблица для ответа, схема превращений.

  Файл подключают и банк заданий (/ege-tasks.html), и страница одного
  задания (/task.html) — разметка в базе одна, поэтому и стили общие.
*/

/* --- варианты ответа: «1)», «2)» … вместо «1.», «2.» ------------------ */
.task-content ol.opts,
.inline-solution ol.opts {
    list-style: none;
    counter-reset: opt;
    padding-left: 0;
    margin: 10px 0;
}

.task-content ol.opts > li,
.inline-solution ol.opts > li {
    counter-increment: opt;
    position: relative;
    padding-left: 34px;
    margin-bottom: 6px;
}

.task-content ol.opts > li::before,
.inline-solution ol.opts > li::before {
    content: counter(opt) ")";
    position: absolute;
    left: 0;
    width: 26px;
    text-align: right;
    font-weight: 700;
    color: #9CA3AF;
}

/* Левый столбец заданий на соответствие нумеруется буквами. */
.task-content ol.opts.opts-alpha > li::before {
    content: counter(opt, upper-alpha) ")";
}

/*
  В русской раскладке нужны А, Б, В, Г — латинские A, B, C, D дали бы
  «C)» там, где ученик ждёт «В)». Поэтому первые четыре буквы задаём руками.
*/
.task-content ol.opts.opts-alpha > li:nth-child(1)::before { content: "А)"; }
.task-content ol.opts.opts-alpha > li:nth-child(2)::before { content: "Б)"; }
.task-content ol.opts.opts-alpha > li:nth-child(3)::before { content: "В)"; }
.task-content ol.opts.opts-alpha > li:nth-child(4)::before { content: "Г)"; }
.task-content ol.opts.opts-alpha > li:nth-child(5)::before { content: "Д)"; }

/* --- заголовки столбцов в заданиях на соответствие ------------------- */
.task-content .opts-title,
.task-content .col_name {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 0.9em !important;
    letter-spacing: 0.04em;
    color: #6B7280;
}

/*
  Два столбца задания на соответствие — рядом, а не друг под другом.
  Разметку .wrap_flex_table отдаёт источник, но стилей для неё на сайте
  не было, и столбцы вытягивались в одну длинную колонку: сначала все
  буквы, потом все цифры, и сопоставлять приходилось, прокручивая экран.
*/
.task-content .wrap_flex_table {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin: 14px 0;
}

.task-content .wrap_flex_table_col {
    flex: 1 1 0;
    min-width: 0;
}

/* Источник щедро сыплет пустыми <p> между блоками — они рвут столбец. */
.task-content .wrap_flex_table p:empty {
    display: none;
}

.task-content .wrap_flex_table .col_content p,
.task-content .wrap_flex_table .col_content div {
    margin: 0 0 6px;
}

.task-content .wrap_flex_table .opts {
    margin-top: 0;
}

/*
  На телефоне столбцы остаются рядом, как в бланке экзамена: раньше до
  640 px они вставали друг под друга, и сопоставлять «А) хлорид аммония»
  с «1) Ba(NO₃)₂, KOH» приходилось, листая вверх-вниз. Два столбца по
  ~160 px вмещают и названия веществ, и формулы; картинки формул внутри
  столбца сжимаются по его ширине.
*/
@media (max-width: 640px) {
    .task-content .wrap_flex_table {
        gap: 14px;
    }

    .task-content .wrap_flex_table img {
        max-width: 100%;
        height: auto;
    }
}

/* --- таблица для ответа (X | Y или А | Б | В | Г) -------------------- */
.task-content table.ans-table {
    border-collapse: collapse;
    margin: 14px 0 4px;
    min-width: 160px;
}

.task-content table.ans-table th,
.task-content table.ans-table td {
    border: 1px solid #D6D1C9;
    padding: 8px 20px;
    text-align: center;
    font-size: 1em !important;
}

.task-content table.ans-table th {
    background: #F7F5F2;
    font-weight: 700;
    color: #4B5563;
}

.task-content table.ans-table td {
    height: 36px;
    background: #fff;
}

/*
  Таблица ответа в заданиях из ФИПИ: в исходной разметке у неё только
  «border:1px» инлайном, который браузер игнорирует, и на странице от
  таблицы оставались две висящие буквы «X  Y».
*/
.task-content table[style*="border:1px"] {
    border-collapse: collapse;
    margin: 14px 0 4px;
}

.task-content table[style*="border:1px"] td {
    border: 1px solid #D6D1C9;
    padding: 8px 20px;
    text-align: center;
    min-width: 46px;
    height: 34px;
}

/* Первая строка такой таблицы — шапка с буквами X, Y или А, Б, В, Г. */
.task-content table[style*="border:1px"] tr:first-child td {
    background: #F7F5F2;
    font-weight: 700;
    color: #4B5563;
}

/*
  Двухколоночная таблица заданий на соответствие без своих стилей:
  колонки слипались («НАЗВАНИЕ ВЕЩЕСТВА КЛАСС/ГРУППА» читалось одной
  строкой). Рамок здесь не нужно — это раскладка, а не таблица данных.
*/
.task-content table:not([class]):not([style]) {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}

.task-content table:not([class]):not([style]) th {
    text-align: left;
    font-weight: 700;
    font-size: 0.9em !important;
    letter-spacing: 0.04em;
    color: #6B7280;
    padding-bottom: 8px;
}

.task-content table:not([class]):not([style]) td {
    vertical-align: top;
    padding: 3px 0;
}

.task-content table:not([class]):not([style]) th + th,
.task-content table:not([class]):not([style]) td + td {
    padding-left: 32px;
}

/* --- сетка 3×3 для задания 5 ----------------------------------------- */
.task-content table.grid-table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
}

.task-content table.grid-table td {
    border: 1px solid #E8E4DE;
    padding: 10px 12px;
    text-align: center;
}

/* --- схема превращений ------------------------------------------------ */
.task-content .rx-scheme,
.inline-solution .rx-scheme {
    text-align: center;
    margin: 16px 0;
    line-height: 2.2 !important;
}

/*
  Стрелка реакции с условием над ней — две строки в одном inline-блоке:
  сверху подпись, снизу сама стрелка.

  Подпись НЕ вынесена из потока: раньше она стояла абсолютом и не занимала
  ширину, поэтому в длинных цепочках задания 32 соседние подписи налезали
  друг на друга. Теперь ширина блока равна ширине более широкой из двух
  строк, и подписи расходятся.

  vertical-align: baseline у inline-block выравнивает по базовой линии
  последней строки — то есть по самой стрелке. Так она стоит вровень с
  формулами вокруг и не проваливается вниз.
*/
.rx-arrow {
    display: inline-block;
    vertical-align: baseline;
    text-align: center;
    padding: 0 5px;
    line-height: 1.15;
    white-space: nowrap;
}

.rx-arrow .rx-label {
    display: block;
    font-size: 0.75em;
    font-style: italic;
    line-height: 1.2;
    color: #4B5563;
}

.rx-arrow .rx-body {
    display: block;
    line-height: 1;
}

/* Строке со стрелкой нужен небольшой запас по высоте под подпись. */
.task-content p:has(.rx-arrow),
.task-content li:has(.rx-arrow),
.task-content td:has(.rx-arrow),
.inline-solution p:has(.rx-arrow),
.inline-solution li:has(.rx-arrow) {
    line-height: 2 !important;
}

/*
  Дробь. В alt источника она записана словами («дробь: числитель: …,
  знаменатель: … конец дроби») и в таком виде попадала прямо в текст
  решения. Здесь из неё собирается обычная дробь с чертой.
*/
.frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 3px;
    line-height: 1.2;
    text-align: center;
}

.frac .frac-num {
    border-bottom: 1px solid currentColor;
    padding: 0 5px 1px;
}

.frac .frac-den {
    padding: 1px 5px 0;
}

/* Формула, собранная из alt картинки-формулы источника. */
.tex-text {
    font-family: 'Inter', sans-serif;
    white-space: normal;
}

/*
  Скелетные формулы (кольца, цепи) остаются картинками. Их нельзя
  подгонять под высоту строки, как встроенные формулы: изображение
  многострочное, и на высоте 1.2em от него оставалась закорючка.
*/
.task-content img.tex-drawing,
.inline-solution img.tex-drawing {
    height: auto !important;
    max-height: none;
    max-width: 100%;
    vertical-align: middle;
    /* Мелкие SVG источника отдаются в своём размере — слегка увеличиваем,
       чтобы подписи атомов читались. */
    zoom: 1.6;
}

/* --- задания части 2: развёрнутый ответ ------------------------------- */
.part2-note {
    flex: 1 1 260px;
    color: #6B7280;
    font-size: 0.92rem;
    line-height: 1.45;
}

.part2-note b {
    color: #4B5563;
}

@media (max-width: 600px) {
    .task-content ol.opts > li { padding-left: 28px; }
    .task-content ol.opts > li::before { width: 22px; }
    .task-content table.ans-table th,
    .task-content table.ans-table td { padding: 6px 12px; }
}

/*
  Увеличение 1.6 подобрано под компьютер, где текст условия около 18 px.
  На телефоне текст 15 px, и формулы, растянутые в те же 1.6 раза,
  выходили крупнее условия почти в полтора раза — подписи атомов
  ростом с заголовок. Здесь увеличение такое, чтобы подписи совпадали
  с текстом: исходные SVG рисуют атомы шрифтом около 13 px.
*/
@media (max-width: 720px) {
    .task-content img.tex-drawing,
    .inline-solution img.tex-drawing {
        zoom: 1.15;
    }
}