/* Страница одного типа ЕГЭ — /types/<N>/.
   Подключается из templates/problems/problems_list.html только когда задан
   type_num; список задач, фильтры и карточки под шапкой общие с /problems/
   и стилями отсюда не затрагиваются.

   Палитра разделов (--subject-*) общая с /types/ и живёт в style.css. */

/* Чуть теснее общесайтовых 24px: рамка меню и без того отделяет заголовок
   от шапки. Основную пустую полосу тут создавало не это поле, а margin: 5ex
   у голого правила для <nav> — оно уносило пейджер, а вместе с ним и всю
   строку заголовка, на 42 пикселя вниз. Правила больше нет. */
.type-problems-page main {
  padding-top: 18px;
}

/* Вертикальный ритм шапки задают те элементы, между которыми нужен воздух:
   заголовок → тема (тесно, тема объясняет заголовок), тема → переключатель
   формата (это уже отдельный контрол), шапка → фильтры. Раньше отступ под
   шапкой держало поле снизу у пейджера, но пейджер лежит внутри строки
   заголовка и растягивал саму строку — отсюда и дыра под заголовком.

   text-align и hyphens сбрасываем явно: body на этом сайте набран с выключкой
   по формату, и без сброса текст внутри сегментов пейджера растягивается
   на всю их ширину («Тип     1»). */
.problem-type-header {
  margin: 0 0 16px;
  font-family: var(--ui);
  hyphens: manual;
  text-align: left;
}

/* В строке заголовка только номер типа и пейджер. Всё справочное —
   разделы, балл, описание, версия структуры — ушло строкой ниже: рядом с
   тридцатипиксельным заголовком мелкие подписи приходилось поднимать
   вручную, и любая из них удлиняла строку до переноса. */
.problem-type-title-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.problem-type-header h1 {
  margin: 0;
  color: var(--ink);
  font-size: 30px;
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
}

/* inline-block, а не inline-flex: у inline-flex базовая линия берётся от
   первого элемента, и точка-кружок увела бы бирку вверх относительно «1 балл».
   Поэтому точка — псевдоэлемент, а базовую линию задаёт сам текст. */
.problem-type-subject {
  display: inline-block;
  height: 23px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--subject-bg);
  color: var(--subject-ink);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 23px;
  white-space: nowrap;
}

.problem-type-subject::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 999px;
  background: var(--subject-dot);
  vertical-align: middle;
}

.problem-type-points {
  color: var(--muted-2);
  font-size: 12.5px;
  white-space: nowrap;
}

/* Справочная строка под заголовком: бирки разделов, балл, описание и
   тумблер версии. Всё выровнено по базовой линии — разнокалиберные
   подписи иначе разъезжаются по вертикали. Описание не сжимается ниже
   читаемой ширины, поэтому тумблер уходит на свою строку не раньше, чем
   строки действительно перестанет хватать. */
.problem-type-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 8px;
  gap: 6px 12px;
}

/* Текст приходит из админки и может быть в несколько строк, поэтому здесь
   ни nowrap, ни фиксированной высоты. */
.problem-type-topic {
  flex: 1 1 auto;
  min-width: 22ch;
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* Тумблер версии структуры прижат к правому краю справочной строки.
   margin-left: auto, а не justify-content, — после переноса он должен
   остаться справа, а не прыгнуть влево. Ссылка, а не чекбокс: состояние
   приходит с сервера. */
.problem-type-scope {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.problem-type-scope:hover {
  color: var(--ink);
  text-decoration: none;
}

.problem-type-scope[aria-checked="true"] {
  color: var(--ink);
  font-weight: 650;
}

.problem-type-scope-label {
  white-space: nowrap;
}

/* Запасной вид тумблера: версий стало больше двух и двух состояний не
   хватает. Ведёт себя в строке так же — не сжимается и жмётся вправо. */
.problem-type-structure-segments {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Пейджер — сегментированный контрол: видно, к какому номеру ведёт стрелка.
   align-items: stretch задан явно — сегменты обязаны занимать всю высоту,
   иначе разделитель между ними выходит высотой в текст, а не во всю рамку.
   Полей у пейджера нет: он стоит в строке заголовка и любым полем снизу
   растянул бы её. */
.problem-type-navigation {
  display: flex;
  flex: none;
  align-items: stretch;
  height: 32px;
  gap: 0;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  overflow: hidden;
}

/* line-height: 1 и центрирование по обеим осям: иначе наследуемый от body
   межстрочный интервал в 17.5pt смещает текст выше середины сегмента. */
.problem-type-navigation a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 14px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background 0.16s ease;
}

.problem-type-navigation a + a {
  border-left: 1px solid var(--soft-line);
}

.problem-type-navigation a:hover {
  background: #f5f4f1;
  color: var(--ink);
  text-decoration: none;
}

.problem-type-nav-label {
  color: var(--muted-2);
  white-space: nowrap;
}

.problem-type-navigation a:hover .problem-type-nav-label {
  color: var(--ink-2);
}

.problem-type-nav-arrow {
  font-size: 15px;
  line-height: 1;
}

@media (max-width: 620px) {
  .problem-type-header h1 {
    font-size: 23px;
  }

  /* Узко — пейджер уходит под заголовок и занимает всю ширину. */
  .problem-type-title-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }

  .problem-type-navigation {
    width: 100%;
    height: 44px;
    border-radius: 12px;
  }

  .problem-type-navigation a {
    flex: 1;
    background: var(--page-bg);
    font-size: 13.5px;
  }
}

@media print {
  .problem-type-subject {
    border: 1px solid #bbb;
  }
}