/* Собственные стили поверх Pico. Всё, что здесь есть, — это либо починка
   того, что Pico не покрывает, либо честная разметка временных состояний. */

/* Шапка не помещалась на телефоне: пунктов шесть, а <nav> у Pico не переносит
   строки, и кнопка «Выйти» уезжала за правый край на всех ширинах до 600px —
   выйти из аккаунта с телефона было физически невозможно. */
header nav {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}

header nav ul {
  flex-wrap: wrap;
}

/* Форма выхода стоит в строке меню — лишние отступы Pico тут ломают выравнивание. */
header nav form {
  margin: 0;
}

/* Индикатор ожидания HTMX. Библиотека сама вешает класс htmx-request на время
   запроса, но прятать элемент до этого должны мы — иначе полоса висела бы
   на странице всегда. */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: block;
}

/* Ссылка возврата над заголовком: приглушена, чтобы не спорить с ним за внимание. */
.back-link {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

/* Ряд действий на карточке задачи. Pico по умолчанию растягивает кнопки
   на всю ширину контейнера — для трёх подряд это выглядит громоздко. */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.actions form {
  margin: 0;
}

.actions [role="button"],
.actions button {
  width: auto;
  margin: 0;
  padding: 0.5rem 1rem;
}

/* Заголовок над полем кода: подпись слева, выбор языка справа. */
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.code-head label {
  margin: 0;
}

.code-head select {
  width: auto;
  margin: 0;
  padding: 0.25rem 2rem 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

/* Подсветка в поле ввода: textarea разметку не отображает, поэтому под ним
   лежит подсвеченный <pre>, а у самого поля текст прозрачный — виден только
   курсор и выделение. Оба слоя обязаны совпадать по шрифту, отступам и
   переносам до пикселя, иначе текст «двоится». */
.code-editor {
  position: relative;
}

.code-editor > textarea,
.code-editor__view {
  margin: 0;
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  font-family: var(--pico-font-family-monospace);
  font-size: 0.875rem;
  line-height: 1.5;
  tab-size: 4;
  white-space: pre-wrap;
  word-break: break-word;
  border: var(--pico-border-width) solid transparent;
  border-radius: var(--pico-border-radius);
}

.code-editor__view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Слой только показывает — клики и выделение достаются полю под ним. */
  pointer-events: none;
  background: var(--pico-form-element-background-color);
}

.code-editor__view code {
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
}

.code-editor > textarea {
  position: relative;
  width: 100%;
  background: transparent;
  /* Текст прозрачный: его рисует слой снизу. Курсор оставляем видимым. */
  color: transparent;
  caret-color: var(--pico-color);
  resize: vertical;
}

.code-editor > textarea::placeholder {
  color: var(--pico-form-element-placeholder-color);
}

/* «Другая задача» отделена от отметок: это не оценка попытки, а смена карточки. */
.actions__aside {
  margin-left: auto;
}

/* Таблицы истории: и блок под формой задачи (#35), и страница целиком (#36).
   Мельче основного текста — строк много, и обычный кегль превращает список
   в простыню. */
.history {
  font-size: 0.875rem;
}

.history td,
.history th {
  padding: 0.4rem 0.6rem;
}

/* Переход по страницам истории (#36). Номер посередине, стрелки по краям. */
/* Стрелки и номера стоят вместе по центру, а не по краям страницы: листать
   длинную историю удобно, когда всё под одним курсором. Переносится на
   узком экране — при шестидесяти страницах номеров набирается десяток. */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  margin-top: 1.5rem;
}

.pager__page,
.pager__step,
.pager__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Одинаковая ширина у всех клеток: иначе строка дёргалась бы при переходе
     с однозначной страницы на двузначную. */
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.4rem;
  border-radius: var(--pico-border-radius);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.pager__page:hover,
.pager__step:hover {
  background: var(--pico-secondary-background);
  color: var(--pico-secondary-inverse);
}

/* Текущая страница — не ссылка: нажимать на неё некуда. */
.pager__page--current {
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
  font-weight: 600;
}

/* Край списка. Стрелка остаётся на месте, чтобы номера не съезжали вбок. */
.pager__off {
  color: var(--pico-muted-color);
}

.pager__gap {
  color: var(--pico-muted-color);
  min-width: 1.5rem;
}

/* Язык решения: короткое слово, переносить его посреди ячейки незачем. */
.lang {
  white-space: nowrap;
}

/* Предупреждение о неполных данных: заметное, но не кричащее. */
.notice {
  border-left: 3px solid var(--pico-primary);
  border-radius: 0;
  padding: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}

/* Дашборд профиля навыков (#34). Полосы собственные, а не <progress>: у Pico
   он один на все случаи, а здесь нужны своя высота, свой цвет у слабейшей
   темы и подпись в той же строке. */
.skills {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

.skill__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.skill__tag {
  font-weight: 600;
}

/* Уровни выстроены в столбик, поэтому цифры моноширинные — иначе разряды
   не совпадают по вертикали и колонка выглядит рваной. */
.skill__level {
  color: var(--pico-muted-color);
  font-variant-numeric: tabular-nums;
}

/* Дорожка обязана быть видна целиком: длина полосы читается только в
   сравнении с полной шириной. Фон полей для этого не годится — в светлой
   теме он почти белый, и незаполненная часть пропадала со страницы. */
.skill__track {
  height: 0.6rem;
  margin: 0.35rem 0 0.3rem;
  border-radius: 1rem;
  background: var(--pico-muted-border-color);
  overflow: hidden;
}

.skill__bar {
  height: 100%;
  border-radius: inherit;
  background: var(--pico-primary);
}

/* Слабейшая тема выделена цветом, а не только длиной полосы: именно с неё
   начинается подбор задач, и на неё человек и пришёл смотреть. */
.skill--weakest .skill__bar {
  background: var(--pico-del-color);
}

.skill--weakest .skill__tag {
  color: var(--pico-del-color);
}

.skill__facts {
  color: var(--pico-muted-color);
}