/* Опасное действие: один вид на весь сайт.
   ------------------------------------------------------------------
   Отдельным листом, а не строкой в style.css, по простой причине: общий
   style.css берут только карта, тема, сборщик, таблица лидеров и отчёт.
   Школа, домашка, СОР, срез и конспект урока держат свои стили нарочно —
   они одностраничные и грузятся быстрее (CLAUDE.md), и тянуть в них
   сто шестнадцать килобайт карты ради одного правила нельзя. А правило
   нужно именно всем: беда была ровно в том, что разметку опасного
   придумывали на каждой странице заново.

   Чем это кончилось, видно на двух примерах. Обнуление курса в сборщике
   стоит в красной рамке и требует набрать имя курса руками. Удаление
   курса — серая строка в ящике, отличающаяся от «Завести курс» одним
   словом. «Убрать из школы» — четвёртая кнопка в ряду одинаковых, с
   пометкой, невидимой до наведения. То есть менее разрушительное
   защищено сильнее, чем более разрушительное.

   Говорят ВЕС и МЕСТО, а не цвет. Цвет здесь третий по счёту нарочно:
   экран у нас на трёх языках и человек нередко видит не свой, а среди
   учителей дальтоник вероятнее, чем кажется. Слово и цвет могут отказать
   разом — отступ, черта и пустота не откажут.

   Класс продублирован (.опасно.опасно) не по небрежности: на страницах со
   своими стилями кнопки описаны как button.act и подобными, и одиночный
   класс проиграл бы им по весу. Дублирование поднимает вес ровно на
   столько, чтобы хватило, и не требует !important. */

.опасно.опасно {
  border-left: 3px solid #6b3a33;
  padding-left: 11px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.опасно.опасно:hover,
.опасно.опасно:focus-visible {
  border-left-color: #e0705f;
  color: #ff7b72;
}

/* Черта над опасным: рисует её отдельный разделитель, а не рамка кнопки —
   рамка сверху читается как обводка, а нужна граница участка. */
.опасно-черта {
  height: 1px;
  margin: 12px 0 8px;
  background: #24384a;
}

/* Опасное в ряду кнопок: сверху места нет, отделяем вбок пустотой. */
.опасно-вбок.опасно-вбок {
  margin-left: auto;
}

/* На телефоне пустоты не остаётся: ряд переносится, и кнопка, прижатая
   вправо, встаёт к самому краю — а на узкой карточке ещё и подрезается.
   Проверено снимком на 390 точках. Поэтому на узком экране отделяем не
   пустотой, а строкой: опасное уходит под безобидные и занимает всю ширину,
   то есть остаётся отдельным местом, а не соседом в ряду. */
@media (max-width: 620px) {
  .опасно-вбок.опасно-вбок {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
  }
}

/* Опасное в строке таблицы. Переносить его некуда — строка одна, — но
   пустота нужна и здесь: в списке из двадцати девяти человек кнопка «Убрать»
   стоит вплотную к «Паролю», и рука, метясь в пароль, промахивается на один
   шаг. Отступ делает этот шаг заметным. */
.опасно-поодаль.опасно-поодаль {
  margin-left: 12px;
}

/* Число, над сколькими людьми или темами занесена рука. Стоит на самой
   кнопке: в окошко подтверждения смотрят не всегда, а цифра понятна на
   любом из трёх языков. Моноширинные цифры — чтобы кнопка не прыгала,
   когда 7 становится 12. */
.счёт {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}