/* ============================================================
   Конфигуратор тестов — стили.
   Цвета завязаны на переменные MkDocs Material, тема подхватывается
   автоматически при переключении data-md-color-scheme.

   Структура классов:
   - tests-widget           контейнер виджета
   - tests-screen[.active]  4 экрана: s1-category / s2-subcategory / s3-quiz / s4-result
   - tests-list             обёртка-сетка (модификаторы --cols-N ниже)
   - tests-card             кликабельная карточка (категория/подкатегория/работа)
     .tests-card--full      на всю ширину, с подписью .sub
     .tests-card--compact   компактный пункт списка
     .tests-card__title--truncate  однострочный span внутри карточки, обрезка текста
   - tests-answer           вариант ответа в квизе (НЕ карточка категории)
   - crumb-nav              верхняя навигация (4 слота, общая для всех экранов)
   ============================================================ */

.tests-page-wrap {
  position: relative;
  padding: 12px 20px;
  display: flex;
  justify-content: center;
}

/* На светлой теме дефолтный hover-фон (--md-default-fg-color--lighter)
   слишком тёмный для кнопок — смягчаем точечно, тёмную тему не трогаем. */
[data-md-color-scheme="default"] .tests-widget {
  --tests-hover-bg: rgba(0, 0, 0, 0.20);
}
[data-md-color-scheme="default"] .tests-card:hover,
[data-md-color-scheme="default"] .tests-answer:hover,
[data-md-color-scheme="default"] .share-link-copy:hover {
  background: var(--tests-hover-bg);
}

.md-content__inner {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.md-content__inner::before {
  display: none !important;
}

.tests-widget {
  width: 100%;
  max-width: 800px;
  padding: 25px 25px 25px;
  border-radius: 12px;
  background: var(--md-default-fg-color--lightest);
  border: 1px solid var(--md-default-fg-color--lighter);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--md-default-fg-color);
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   #crumb-nav — верхняя навигация вместо крошек. 4 слота в ряд:
   1) crumb-home        — сквозная кнопка "Выбор теста" (акцентный фон);
                           тот же класс переиспользуется для кнопки
                           "Пройти ещё раз" на экране результата
   2) crumb-slot--category — родительская категория, не кликабельна
   3) crumb-slot--work     — "автор · работа" текущего/последнего вопроса
   4) crumb-slot--counter  — "N / total", прижат к правому краю
   Пустые слоты рендерятся с классом --empty и схлопываются в 0,
   чтобы не растягивать ряд на s1/s2, где часть слотов не заполнена.
   ------------------------------------------------------------ */
#crumb-nav {
  display: flex; align-items: center; gap: 10px; margin: 0 0 20px;
  font-size: 13px; line-height: 20px; color: var(--md-default-fg-color--light);
  min-height: 26px;
}
.crumb-home,
.crumb-slot {
  font-size: 13px; line-height: 20px; padding: 3px 12px; box-sizing: border-box;
}
.crumb-home,
button.crumb-slot--category {
  flex-shrink: 0; border: 1px solid #4fa8e0; border-radius: 6px;
  background: rgba(79,168,224,0.25); color: #000; font-family: inherit;
  cursor: pointer; transition: background 0.15s ease;
}
.crumb-home:hover,
button.crumb-slot--category:hover { background: rgba(79,168,224,0.4); }
[data-md-color-scheme="slate"] .crumb-home,
[data-md-color-scheme="slate"] button.crumb-slot--category { color: #fff; }

.crumb-slot--category,
.crumb-slot--work,
.crumb-slot--counter {
  background: var(--md-default-fg-color--lightest);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 6px;
}
.crumb-slot--category {
  flex-shrink: 0; color: var(--md-default-fg-color); cursor: default; text-align: center;
}
.crumb-slot--work {
  min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--md-default-fg-color);
}
.crumb-slot--counter { flex-shrink: 0; margin-left: auto; color: var(--md-default-fg-color); white-space: nowrap; }
.crumb-slot--empty { display: none; }

.quiz-question-wrap {
  display: flex; align-items: flex-start; box-sizing: border-box; width: 100%;
  min-height: 50px; padding: 4px 7px; margin: 0 0 6px;
}
.quiz-question { font-size: 15px; font-weight: 700; line-height: 1.4; margin: 0; min-width: 0; white-space: normal; overflow-wrap: break-word; }
.quiz-result-text { font-size: 15px; font-weight: 700; line-height: 1.4; margin: 0; }

/* ------------------------------------------------------------
   tests-list — обёртка-сетка. Модификаторы задают число колонок.
   Раньше это были 4 разных класса (tests-grid/volumes/vol-items/categories).
   ------------------------------------------------------------ */
.tests-list { display: flex; flex-direction: column; gap: 10px; }
.tests-list--cols-1 { display: flex; flex-direction: column; gap: 10px; }
.tests-list--cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tests-list--cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* На узких экранах 2-3 колонки не помещаются — сворачиваем в одну.
   Порог 640px: типичная граница mobile/tablet в MkDocs Material. */

/* колонка внутри cols-2/cols-3 (например колонка работ автора, колонка тома) */
.tests-list-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* ------------------------------------------------------------
   tests-card — единая кликабельная карточка.
   Раньше: tests-volume-test, tests-item, tests-category.
   ------------------------------------------------------------ */
.tests-card {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  width: 100%; padding: 10px 14px; background: var(--md-default-fg-color--lightest);
  border: 1px solid var(--md-default-fg-color--lighter); border-radius: 8px; color: var(--md-default-fg-color);
  font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
  box-sizing: border-box; transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  font-family: inherit;
}
.tests-card:hover { background: var(--md-default-fg-color--lighter); border-color: var(--md-accent-fg-color); }
.tests-card:active { clip-path: inset(3px round 8px); }
.tests-card .sub { font-size: 12px; font-weight: 400; opacity: 0.6; margin-top: 6px; }

/* full — карточка верхнего уровня (экран 1, "весь том") */
.tests-card--full { height: 66px; }
.tests-card--full.tests-card--with-sub { height: auto; min-height: 66px; }
#s2-all-btn:not(:empty) { margin-bottom: 10px; }
.tests-list-col > .tests-card--full + .tests-list { margin-top: 2px; }

/* compact — пункт внутри списка (отдел, работа автора, пункт рубрики) */
.tests-card--compact {
  padding: 12px 14px; border-radius: 6px; font-size: 13.5px; font-weight: 400; line-height: 1.35;
}
.tests-card--compact:active { clip-path: inset(2.5px round 6px); }

.tests-card__title--truncate {
  display: block; width: 100%; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ------------------------------------------------------------
   tests-answer — вариант ответа в квизе. Отдельно от tests-card,
   т.к. смысл другой (ответ, а не категория) и есть свои состояния.
   ------------------------------------------------------------ */
.tests-answer {
  display: block; width: 100%; height: auto; min-height: 66px; padding: 10px 14px;
  background: var(--md-default-fg-color--lightest); border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 8px; color: var(--md-default-fg-color); font-size: 15px; font-weight: 400;
  font-family: inherit; text-align: left; line-height: 1.4; white-space: normal;
  cursor: pointer; box-sizing: border-box; transition: background 0.15s ease, border-color 0.15s ease;
}
.tests-answer:hover { background: var(--md-default-fg-color--lighter); border-color: var(--md-accent-fg-color); }
.tests-answer:active { clip-path: inset(3px round 8px); }
.tests-answer:disabled { cursor: default; }
.tests-answer.correct { border-color: #4caf50; background: rgba(76,175,80,0.18); }
.tests-answer.incorrect { border-color: #e53935; background: rgba(229,57,53,0.18); }

.tests-screen { display: none; }
.tests-screen.active { display: block; }

.quiz-result .quiz-question-wrap {
  min-height: 0;
  padding: 4px 7px 17px 0;
  margin-bottom: 8px;
}

.quiz-result { display: flex; flex-direction: column; align-items: flex-start; font-size: 18px; width: 100%; }
.quiz-result p { margin: 0; }
.quiz-result .quiz-question-wrap { margin-bottom: 0px; }
.quiz-result .share-link-box { margin-top: 0; margin-bottom: 15px; }
.quiz-result-actions { display: flex; gap: 12px; margin-top: 0; }

.share-link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  padding: 5px 8px 5px 14px;
  background: var(--md-default-fg-color--lightest);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 6px;
  box-sizing: border-box;
}
.share-link-text {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 12.5px;
  color: var(--md-default-fg-color--light);
  scrollbar-width: thin;
}
.share-link-copy {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: var(--md-default-fg-color--lightest);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 5px;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.share-link-copy:hover { background: var(--md-default-fg-color--lighter); border-color: var(--md-accent-fg-color); }
.share-link-copy svg { width: 15px; height: 15px; }
.share-link-copy.copied { color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); }

.tests-page-wrap ~ h1,
h1:has(+ .tests-page-wrap) { display: none; }

@media (max-width: 640px) {
  .tests-list--cols-2,
  .tests-list--cols-3 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tests-page-wrap {
    padding: 8px 0;
  }
  .tests-widget {
    padding: 16px 14px;
  }

  #crumb-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "home category category"
      "work work counter";
    row-gap: 8px;
    align-items: center;
    margin-bottom: 10px;
  }
  .crumb-home { grid-area: home; }
  .crumb-slot--category { grid-area: category; min-width: 0; }
  .crumb-slot--work { grid-area: work; min-width: 0; }
  .crumb-slot--counter { grid-area: counter; justify-self: end; }
}