/* Заголовок первого блока главной.
 *
 * Полное официальное название занимает в четыре раза больше места, чем
 * прежний слоган, поэтому кегль уменьшен: иначе заголовок съедает
 * пол-экрана и выталкивает кнопку «Вступить» за первый экран, а ТЗ 7.1
 * (блок 6) требует, чтобы она была видна без прокрутки.
 */
.hero__title {
  font-size: clamp(1.4rem, 3.4vw, 2.5rem);
  max-width: 34ch;
}

/* На узких экранах перенос после «организация» убирается: там и так всё
   переносится по словам, и жёсткий перенос оставлял висячий пробел. */
@media (max-width: 720px) {
  .hero__break {
    display: none;
  }
}

/* Первый блок главной: текст слева, герб справа.
 *
 * Две колонки, а не герб под заголовком: кнопка «Вступить» должна быть
 * видна в первом экране без прокрутки (ТЗ 7.1, отдельный пункт
 * приёмки), а герб высотой в пол-экрана вытолкнул бы её вниз.
 *
 * Ширина герба задана колонкой, а не самой картинкой: файл 640 пикселей
 * и на экране занимает не больше 320, то есть ровно 2x.
 */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: 3rem;
  align-items: start;
}

.hero__text {
  min-width: 0;
}

.hero__emblem {
  margin: 0;
}

.hero__emblem img {
  display: block;
  width: 100%;
  height: auto;
}

/* Узкий экран: одна колонка, герб уходит под кнопки.
 *
 * Порядок здесь не декоративный: текст и кнопка «Вступить» остаются в
 * первом экране, а герб — уже после них. Две колонки держатся до 900px:
 * на 1024px тексту остаётся 640 пикселей, и заголовок влезает в четыре
 * строки, а ниже — герб рядом с подписью.
 */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .hero__emblem {
    order: 2;
    justify-self: center;
    width: min(200px, 55vw);
  }
}

/* Сетка и общий каркас страницы — ТЗ 4.3. */

/* Закреплённая шапка перекрывает заголовок при переходе по якорю: браузер
   подводит секцию к верхнему краю окна, где стоит шапка. Отступ сверху
   оставляет заголовок видимым. */
:target,
.section[id],
section[id] {
  scroll-margin-top: 5rem;
}

/* На узком экране меню переносится на вторую-третью строку, и шапка
   становится выше 125px — прежних 5rem перестало хватать, и переход по
   якорю приводил секцию ПОД шапку. Отступ повторяет её высоту. */
@media (max-width: 720px) {
  :target,
  .section[id],
  section[id] {
    scroll-margin-top: 8.5rem;
  }
}

.container {
  width: min(1200px, 100% - 3rem);
  margin-inline: auto;
}

/* Шапка закреплена наверху и следует при прокрутке.
 *
 * Фон непрозрачный: размытие подложки запрещено ТЗ 4.3, а полупрозрачный
 * фон без него показывал бы текст страницы под шапкой.
 *
 * z-index выше 1000 — столько у панелей Leaflet, иначе на странице карты
 * шапку перекрывали бы кнопки зума.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1200;
  background: var(--bg);
  border-bottom: 1px solid var(--accent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.75rem;
}

/* Знак и расшифровка в шапке.
 *
 * Раньше в шапке был только акроним «АМКБ»: четыре буквы без расшифровки не
 * говорят посетителю ничего, а из поиска он попадает сюда впервые. Теперь
 * знак и полное название стоят рядом, и по имени сразу видно, кто перед
 * посетителем.
 *
 * Шрифты разные намеренно. Знак — моноширинный в разрядку, как и раньше:
 * это метка, её тяжело спутать с текстом. Расшифровка — обычным шрифтом
 * сайта, потому что читается, а не сканируется.
 *
 * Правка высоты шапки тянет за собой scroll-margin-top в блоке выше: там
 * записана высота шапки, при переносе меню на узком экране она меняется.
 * Расшифровка на узком экране скрывается (правило ниже), поэтому и
 * запас там прежний.
 */
.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.site-header__mark {
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg);
}

.site-header__full {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

/* Название — главный элемент блока, а не пояснение к знаку.
 *
 * Раньше стояло 0.82rem обычным начертанием, и полное название почти не
 * отличалось от строки под ним: между 0.82rem и 0.7rem разницы не видно, а
 * из трёх строк выделить было нечего. Теперь разница в три ступени —
 * знак, название, правовая форма, — и читается она с одного взгляда.
 */
.site-header__name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--fg);
}

/* Отличающая часть названия выходит из общего ряда: «Ассоциация» — слово
   родовое, такая организация может быть одна; «Межрегиональной Кооперации
   Бизнеса» — имя собственное, и именно оно отличает Организацию от любой
   другой.
 *
 * Выделено цветом акцента по требованию заказчика. Оранжевого в шапке теперь
   три пятна — эта часть названия, заливка кнопки «Вступить» и черта активного
 * пункта меню, — но они разного калибра: строка мелкая и тонкая, кнопка
 * сплошная, черта подчёркивающая. Между собой они не спорят.
 *
 * Курсива нет намеренно: наклонный кириллический набор в шапке читается
 * как типографская ошибка, а не как акцент. */
.site-header__name em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

.site-header__kind {
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--fg-muted);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Ссылки меню.
 *
 * Оформлены как короткие надписи в моноширинном шрифте, а не как обычные
 * подчёркнутые ссылки: меню перестаёт выглядеть текстом страницы. Подпись
 * активного пункта держит акцентную черту — без неё на странице из
 * полудюжины ссылок непонятно, где вы находитесь.
 */
.site-header__nav a {
  display: inline-block;
  position: relative;
  padding: 0.35rem 0;
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-muted);
}

.site-header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  /* Без перехода подчёркивание появлялось бы мгновенно и выглядело
     как чужеродная черта поверх текста. */
  transition: transform 150ms ease;
  transform: scaleX(0);
  transform-origin: left;
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible {
  color: var(--fg);
}

.site-header__nav a:hover::after,
.site-header__nav a:focus-visible::after {
  transform: scaleX(1);
}

.site-header__nav a[aria-current="page"] {
  color: var(--fg);
}

.site-header__nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Вход — та же строка, что и остальные ссылки: кнопка «Выйти» прежде
   была вдвое выше соседей и ломала строку. */
.site-header__nav .btn {
  min-height: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

/* Форма выхода в шапке: без flex и обнуления полей блочная форма внутри
   flex-ряда сдвигала кнопку относительно ссылок. */
.site-header__nav form {
  display: flex;
  margin: 0;
}

/* Узкие экраны: меню уезжает в панель под шапкой.
 *
 * Раньше пункты переносились на вторую и третью строки, и шапка занимала
 * пол-экрана. Теперь в строке остаётся знак и кнопка «Меню», а пункты
 * открываются панелью на всю ширину под шапкой.
 */
.site-header__toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--fg);
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.site-header__toggle:hover {
  background: var(--accent);
  color: var(--fg);
}

.site-header__toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Три линии — из одного элемента: средняя линия сам элемент, крайние
 * рисуются псевдоэлементами. Значок, а не картинка: иконки-эмодзи
 * запрещены ТЗ 4.3. */
.site-header__toggle-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: background-color 150ms ease;
}

.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition: transform 200ms ease;
}

.site-header__toggle-icon::before {
  top: -6px;
}

.site-header__toggle-icon::after {
  top: 6px;
}

/* Открытое меню: три линии складываются в крест. */
.site-header--menu-open .site-header__toggle-icon {
  background: transparent;
}

.site-header--menu-open .site-header__toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header--menu-open .site-header__toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 720px) {
  .site-header__inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 1rem;
  }

  .site-header__toggle {
    display: inline-flex;
  }

  /* Панель — под шапкой и на всю её ширину. Прокручивается, если
   * пунктов много, а экран низкий.
   *
   * Скрыта через visibility, а не display: так она умеет плавно
   * выезжать и уезжать, оставаясь вне фокуса и вне кликов в закрытом
   * состоянии. */
  .site-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem 1.5rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--accent);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity 160ms ease,
      transform 180ms ease,
      visibility 0s linear 180ms;
  }

  .site-header--menu-open .site-header__nav {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity 180ms ease,
      transform 200ms ease;
  }

  /* Открытое меню не даёт странице прокручиваться под пальцем. */
  :root.menu-open,
  :root.menu-open body {
    overflow: hidden;
  }

  .site-header__nav a {
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .site-header__nav .btn {
    margin-top: 1rem;
    width: 100%;
    justify-content: center;
  }
}

/* Расшифровка акронима показывается не везде, а только там, где шапка
 * остаётся в одну строку.
 *
 * Порог не 720px, как у переноса меню, а 1024px. На замере: при 1024px и
 * шире название идёт одной строкой и шапка занимает 57px; на 768px оно
 * переносится на две строки и шапка растёт до 88px. А scroll-margin-top для
 * якорей на этой полосе равен 5rem = 80px, то есть заголовок секции уходил
 * под шапку на 8px. Расшифровка — украшение, и платить за неё работоспособностью
 * перехода по якорю не стоит.
 *
 * Ниже порога остаётся короткий «АМКБ»: полное название есть в подвале, в
 * заголовке вкладки и в первом блоке главной. */
@media (max-width: 1023px) {
  .site-header__full {
    display: none;
  }
}

.site-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--accent);
  padding-block: 2rem;
}

/* Герб в подвале — в правом нижнем углу полосы подвала, на каждой
 * странице.
 *
 * Мелкий и полупрозрачный: это знак, а не картинка. Он должен читаться
 * как метка в углу, но не спорить с текстом подвала. При наведении
 * проявляется целиком. */
.site-footer {
  position: relative;
}

.site-footer__emblem {
  position: absolute;
  right: 1.5rem;
  bottom: 5.5rem;
  width: 52px;
  height: auto;
  opacity: .4;
  transition: opacity 150ms ease;
}

.site-footer__emblem:hover {
  opacity: .9;
}

/* На узком экране герб встаёт в поток: иначе он налезал бы на текст. */
@media (max-width: 560px) {
  .site-footer__emblem {
    position: static;
    width: 44px;
    margin-top: 1rem;
    opacity: .35;
  }
}

/* Ссылки в подвале — слова, а не подчёркнутые слова.
 *
 * Правило `a` в base.css красит подчёркивание в --accent, и строка ссылок в
 * подвале превращалась в полосу из четырёх подчёркнутых слов. Подчёркивание
 * здесь лишнее: подвал — это оглавление страницы, а не набор действий, и
 * кнопками он быть не должен.
 *
 * Линия появляется по наведению и при фокусе с клавиатуры — тот же приём,
 * что в меню шапки, только короче на полпикселя: в подвале текст мельче.
 */
.site-footer a {
  position: relative;
  text-decoration: none;
}

.site-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transition: transform 150ms ease;
  transform: scaleX(0);
  transform-origin: left;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--accent);
}

.site-footer a:hover::after,
.site-footer a:focus-visible::after {
  transform: scaleX(1);
}

.grid {
  display: grid;
  gap: 1.5rem;
  /* Элемент сетки по умолчанию не может стать уже своего содержимого
     (min-width: auto). Внутри .cabinet, где ширину колонки задаёт сам
     контент, это выталкивало трек за контейнер: на 320px колонка была
     273.5px при контейнере 272px. min-width: 0 убирает этот нижний порог,
     ширину трека по-прежнему задаёт сам grid. */
  min-width: 0;
}

.grid > * {
  min-width: 0;
}

/* Минимум колонки через min(…, 100%): без него на 320px контейнер шире
   272px, а колонка всё равно растягивалась до 280px — блоки выходили за
   контейнер на 8px. Именно эти 8px и давали остаток горизонтального
   скролла на главной после того, как меню стало переноситься. */
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/* Текст блока «О Ассоциации» (03).
 *
 * После того как заголовок сократили до «АМКБ», на его фоне абзацы
 * читались мелко. Кегль подняли, отступы перенесли из инлайновых стилей
 * в класс.
 *
 * Затем заказчик заменил текст: вместо двух абзацев от третьего лица —
 * семь от первого, и блок вырос вчетверо. Прежняя сетка (текст слева, три
 * плашки справа) на этом сломалась: колонка с текстом стала вдвое выше
 * правой, и под плашками осталась пустота в пол-экрана.
 *
 * Теперь два уровня. Первый абзац — определение Организации, его нужно
 * прочитать обязательно, поэтому он крупнее и отбит полосой слева. Полоса
 * взята из .position, а не придумана: секция руководства на /about/ уже
 * использует этот приём, и два одинаковых средства в одном сайте читаются
 * как одна система. Второй уровень — поясняющие абзацы, мельче и в две
 * колонки.
 *
 * Две колонки, а не одна широкая: при 1200px одна колонка даёт строку за
 * 110 знаков, и глаз теряет её при возврате на начало строки. Пара колонок
 * по ~570px держит строку в пределах 70-80 знаков и вдвое уменьшает
 * высоту блока. Планки между колонками не ставим намеренно: текст должен
 * читаться как текст, а не как газетная полоса.
 *
 * Выравнивание по левому краю, а не по ширине: у русского текста много
 * длинных слов, и без переносов выключка по формату раздвигает пробелы
 * «реками». Проверка содержания — scripts/check_index.py. */
.about__lead {
  margin-top: 1.5rem;
  max-width: 44ch;
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.5;
}

.about__body {
  margin-top: 2.25rem;
  column-count: 2;
  column-gap: 3.5rem;
}

.about__body > p {
  font-size: 1rem;
  line-height: 1.7;
}

.about__body > p + p {
  margin-top: 1rem;
}

/* Одна колонка там, где две уже не помещаются: при узком экране колонки
   по 250px дают по три слова на строку. */
@media (max-width: 900px) {
  .about__body {
    column-count: 1;
    max-width: 68ch;
  }
}

/* Цель Организации (04).
 *
 * Сосед занял приём: направления (05) — нумерованный реестр с волосяной
 * линейкой снизу и моноширинными номерами. Здесь нужен свой.
 *
 * Нумерацию не ставим: шесть цели перечислены, но порядок между ними в
 * Уставе не задан, и номера выдали бы последовательность, которой в тексте
 * нет. Остаётся сетка из двух колонок, где каждая цель — самостоятельная
 * строка под волосяной линейкой. Читается как реестр, а не как карточки:
 * рамок и подложек нет, только линейка и воздух.
 *
 * Подлежащее вынесено в .goal__lead крупнее и полнее контраста, чем был
 * серый абзац: это ответ на вопрос заголовка «что мы объединяем», и он
 * должен читаться раньше перечисления.
 *
 * По требованию заказчика от 19.10.2026 блок приведён к набору соседнего
 * текста «О Ассоциации»: те же 1rem и line-height 1.7, что у .about__body p,
 * и то же обычное начертание. Задача была не «меньше», а «как там» —
 * читать шесть целей подряд было тяжело именно из-за 700, а не из-за кегля.
 *
 * Прежние значения для истории: подлежащее 1.35rem в 700, пункты 1.05rem
 * в 700. Разница между подлежащим и перечислением исчезла вместе с
 * жирностью: оба уровня теперь одного набора. Отличает их только то, что
 * подлежащее стоит перед сеткой отдельной строкой.
 */
.goal__lead {
  margin-top: 1.5rem;
  max-width: 40ch;
  font-size: 1rem;
  line-height: 1.7;
}

.goal__aims {
  margin-top: 2rem;
  list-style: none;
  /* Та же формула, что у .grid--3 на сайте: ширина колонки задаётся
     содержимым, лишние колонки убираются сами. На 1200px выходит три
     колонки, на 768px — две, на телефоне одна. Раньше стоял max-width:
     78ch, и правая половина секции пустовала. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 0 2.5rem;
}

.goal__aims li {
  padding: 0.9rem 0;
  /* Линейка сверху, а не снизу, как у .directions: у соседа она отделяет
     строки внутри одной колонки, здесь — верх каждой цели от пустоты над
     ней. Разная роль — разное и место. */
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 1rem;
  line-height: 1.7;
}

/* Плашки фактов — под текстом, а не сбоку от него. */
.about__facts {
  margin-top: 3rem;
}

.section {
  padding-block: 3.5rem;
}

.section__label {
  color: var(--accent);
  margin-bottom: 1rem;
}

/* Линия от подписи «02 / ЦИФРЫ» до правого края: держит взгляд внутри
   секции и перекликается с волосяными линейками реестров. */
.section--stats > .section__label {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section--stats > .section__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .12);
}

.stack > * + * {
  margin-top: 1rem;
}

/* Карьера: каждая должность — отдельный блок.
   Разделение сделано блоками, а не разрывом предложения: в одной строке
   «Сотрудник Аппарата Правительства РФ» читается, а разнесённое на две
   строки «Сотрудник» / «Аппарат Правительства РФ» — обрывки без смысла.
   Полоса слева — приём .box из base.css, но тоньше и без рамки со всех
   сторон: девять оранжевых прямоугольников подряд превращаются в полосу. */
.positions {
  list-style: none;
}

.position {
  background: var(--surface);
  border-left: 2px solid var(--accent);
  padding: 1.1rem 1.25rem;
}

.position + .position {
  margin-top: .75rem;
}

.position__label {
  color: var(--accent);
  margin-bottom: .45rem;
}

.position__text {
  font-weight: 700;
}

/* Текущая должность: рамка со всех сторон, как у .box, чтобы её находили
   сразу, а не дочитывали список до конца. */
.position--now {
  border: 1px solid var(--accent);
  border-left-width: 2px;
}

.position__badge {
  display: inline-block;
  margin-top: .7rem;
  color: var(--accent);
}

@media (max-width: 640px) {
  .position {
    padding: 1rem;
  }
}

.auth-form {
  max-width: 460px;
  margin-inline: auto;
}

.auth-form .field + .field {
  margin-top: 1.1rem;
}

/* Форма вне узкой колонки — «Написать нам» и кабинет.
 *
 * Без отступа между полями подпись следующего поля примыкает к подсказке
 * предыдущего и читается как её часть: под формой обратной связи без
 * воздуха выглядело так, будто «Фамилия, имя и отчество» относится к
 * полю Email, а не к ФИО. */
.form .field + .field {
  margin-top: 1.1rem;
}

.alert {
  border: 1px solid var(--accent);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

/* Результат отправки обращения. Палитра ограничена пятью токенами,
 * поэтому «успех» и «ошибку» различает не новый цвет, а форма рамки:
 * успех — обычная акцентная рамка, ошибка — светлая рамка с акцентной
 * полосой слева. Так сообщение читается и без цвета. */
.alert--success {
  border-color: var(--accent);
}

.alert--error {
  border-color: var(--fg);
  box-shadow: inset 4px 0 0 var(--accent);
}

.alert--info {
  border-color: var(--fg-muted);
}

.cabinet {
  display: grid;
  /* Третья колонка — герб Организации в правом верхнем углу. Она по
   * размеру своя, а не 1fr: иначе герб растянулся бы на всю ширину
   * колонки и перестал быть гербом. */
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 2.5rem;
  padding-block: 2.5rem;
  align-items: start;
}

/* Герб в кабинете: средний между подвалом (52px) и визиткой президента
 * (72px) — на странице с текстом он должен читаться, но не спорить с
 * заголовком раздела. */
.cabinet__emblem {
  display: block;
  width: 112px;
  height: auto;
}

/* Кабинет в одну колонку на узком экране — правило стоит в конце файла,
 * после базовых стилей меню: специфичность одинаковая, поэтому выигрывает
 * то, что ниже. */

.cabinet__nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* Пункты не растягиваются на всю колонку: иначе черта под словом
     занимала бы всю ширину меню, а не длину самого слова. */
  align-items: flex-start;
}

.cabinet__nav a {
  display: inline-block;
  position: relative;
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  padding: 0.5rem 0;
}

/* Непрочитанные уведомления — маркер, а не число в скобках.
 *
 * Число рядом с пунктом меню читалось как часть названия раздела и
 * постоянно меняло ширину меню. Квадратный маркер сообщает только факт
 * «есть новое», а количество видно на самой странице уведомлений.
 * Скруглений нет: ТЗ 4.3 запрещает радиусы больше 2px. */
.cabinet__nav-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.45rem;
  background: var(--accent);
  vertical-align: middle;
}

/* Карточка непрочитанного уведомления кликабельна целиком: нажатие
 * отмечает его прочитанным. Прозрачная кнопка лежит поверх содержимого,
 * поэтому карточка остаётся обычной разметкой, а фокус с клавиатуры
 * обводит всю её площадь. */
.notification-card {
  position: relative;
  border-color: rgba(255, 255, 255, .18);
}

/* Непрочитанное отличается не только действием, но и видом: акцентная
 * рамка с утолщённой верхней гранью и подпись «Непрочитано». Прочитанные
 * карточки остаются в той же сетке, но с нейтральной рамкой — акцент на
 * странице принадлежит только тому, что требует внимания. */
.notification-card--unread {
  cursor: pointer;
  border-color: var(--accent);
  border-top-width: 2px;
}

.notification-card--unread:hover {
  background: var(--bg);
}

.notification-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
}

.notification-card__meta .label {
  margin: 0;
}

.notification-card__status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .2rem .5rem;
  border: 1px solid var(--accent);
  color: var(--fg);
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.notification-card__status::before {
  content: "";
  flex: 0 0 auto;
  width: .4rem;
  height: .4rem;
  background: var(--accent);
}

.notification-card__action {
  position: absolute;
  inset: 0;
}

.notification-card__action button {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.notification-card__action button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Кнопки решения лежат выше прозрачной кнопки «прочитано»: иначе она
 * перехватывала бы клик по «Принять» и «Отказаться». */
.notification-card__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.notification-card__actions form {
  margin: 0;
}

.notification-card__actions .btn {
  min-height: 40px;
  padding: 0.55rem 1rem;
  font-size: 0.8rem;
}

/* Черта под пунктом — по длине слова, и только при наведении.
 *
 * Раньше она была border-bottom у пункта, а пункты меню растягивались на
 * всю колонку: черта выходила длиннее названия раздела втрое. Теперь это
 * тот же приём, что в меню в шапке: псевдоэлемент от left до right, то
 * есть ровно по ширине подписи, и появляется он по наведению.
 *
 * Текущий раздел помечен цветом, а не чертой: черта остаётся признаком
 * наведения и не мешает отличить активный пункт от того, над которым
 * просто навели мышь. */
.cabinet__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 150ms ease;
}

.cabinet__nav a:hover,
.cabinet__nav a:focus-visible,
.cabinet__nav a.is-active {
  color: var(--accent);
}

.cabinet__nav a:hover::after,
.cabinet__nav a:focus-visible::after {
  transform: scaleX(1);
}

/* Направления деятельности: нумерованный список — ТЗ 4.3 требует сетку
 * вместо карточек, но направлений десять, и плитка на экране выглядела бы
 * рвано. Список читается быстрее и ближе к Уставу.
 *
 * Нумерация здесь, в отличие от блока «Цель» (04), уместна: направления
 * перечислены в Уставе поимённо, это настоящий перечень, а не набор
 * равноправных целей.
 *
 * Две колонки, а не одна широкая: раньше стоял max-width: 80ch, и правая
 * половина секции пустовала, а список тянулся на весь экран. Порядок
 * чтения важнее плотности, поэтому колонки, а не сетка: сетка заполняет
 * строки по горизонтали (1, 2, 3 в верхнем ряду) и заставляет читать по
 * диагонали, а column-count идёт сверху вниз — 1…6 слева, 7…12 справа.
 */
.directions {
  counter-reset: direction;
  list-style: none;
  column-count: 2;
  column-gap: 3.5rem;
  margin-top: 1.5rem;
}

.directions li {
  counter-increment: direction;
  position: relative;
  padding: 0.85rem 0 0.85rem 3.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.directions li::before {
  content: counter(direction, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.9rem;
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* Ниже 900px две колонки оставляют на пункт по 250px, а номер и отступ
   съедают треть ширины — строка ломалась бы после двух слов. */
@media (max-width: 900px) {
  .directions {
    column-count: 1;
  }
}

.tasks {
  list-style: none;
}

.tasks li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.tasks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.5rem;
  height: 1px;
  background: var(--accent);
}

/* Счётчики на главной — витрина цифр, а не три абзаца.
 *
 * Раньше это был просто текст в сетке: число 2.75rem и подпись. На фоне
 * остальных разделов блок выглядел как случайно оставленная строка.
 *
 * Теперь каждая цифра — самостоятельная плашка в языке сайта: тонкая
 * рамка, акцентная линия сверху, крупное число и моноширинный номер.
 * Никаких градиентов, теней и скруглений: только сетка, линии и воздух.
 * Ссылочные счётчики получают стрелку ↗ и акцентную рамку при наведении.
 */
a.stat {
  text-decoration: none;
  color: inherit;
}

a.stat:hover {
  color: inherit;
  border-color: var(--accent);
}

/* Каталог партнёров — REQ-P-2. Фильтры оформлены как горизонтальные
 * группы переключателей: при большом числе тегов плитка съедала бы
 * пол-экрана, а вертикальный список заставлял бы прокручивать. */
.catalog-filters {
  display: grid;
  gap: 1.5rem;
  border: 1px solid var(--accent);
  padding: 1.5rem;
  background: var(--surface);
}

.filter-group {
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding-bottom: 1rem;
}

.filter-group:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

/* Теги в форме компании — выпадающий список с галочками.
 *
 * Тегов в справочнике больше полутора сотен: плиткой они занимали
 * несколько экранов формы. Сводка выглядит как обычное поле, а список
 * раскрывается под ней и прокручивается внутри себя.
 *
 * Список стоит в потоке, а не накрывает соседние поля: иначе открытый
 * список перехватывал бы клик по кнопке «Сохранить», и сохранить форму
 * можно было бы только вторым нажатием.
 *
 * <details> выбран вместо скриптового выпадающего списка: он раскрывается
 * с клавиатуры и работает без JavaScript. Скрипт только обновляет счётчик
 * выбранных и закрывает список по Escape или клику мимо. */
.tag-select {
  margin-top: .5rem;
}

.tag-select__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: .75rem .9rem;
  border: 1px solid rgba(255, 255, 255, .25);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}

.tag-select__summary::-webkit-details-marker {
  display: none;
}

.tag-select__summary:hover,
.tag-select__summary:focus-visible,
.tag-select[open] .tag-select__summary {
  border-color: var(--accent);
}

.tag-select__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tag-select__value {
  font-size: 1rem;
}

.tag-select__chevron {
  flex: 0 0 auto;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.tag-select[open] .tag-select__chevron {
  transform: rotate(225deg);
}

.tag-select__panel {
  max-height: min(24rem, 60vh);
  margin-top: .25rem;
  overflow-y: auto;
  border: 1px solid var(--accent);
  background: var(--surface);
}

.tag-select__group {
  min-width: 0;
  border: 0;
}

.tag-select__group + .tag-select__group {
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.tag-select__legend {
  padding: .75rem .9rem .35rem;
  color: var(--fg-muted);
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tag-select__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: .15rem .75rem;
  padding: 0 .9rem .75rem;
}

.tag-select__option {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0;
  padding: .35rem 0;
  color: var(--fg);
  cursor: pointer;
  font-family: inherit;
  font-size: .9rem;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.tag-select__option:hover {
  color: var(--accent);
}

.tag-select__option input {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .15rem;
  accent-color: var(--accent);
}



.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

/* Метка с чекбоксом: input скрыт, но остаётся доступным с клавиатуры. */
.filter-option {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .4rem .75rem;
  border: 1px solid rgba(255, 255, 255, .25);
  cursor: pointer;
  font-family: inherit;
  font-size: .85rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
}

.filter-option:hover {
  border-color: var(--accent);
}

.filter-option input {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}

.filter-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--fg);
}

.filter-search {
  display: flex;
  gap: .75rem;
  margin-top: .75rem;
}

.filter-search input {
  flex: 1 1 auto;
}

.filter-search .btn {
  flex: 0 0 auto;
}

/* Карточка партнёра в каталоге.
 *
 * Выделение собрано из уже принятых приёмов, без новых цветов: палитра
 * утверждена заказчиком (tokens.css), ТЗ 4.3 запрещает скругления больше
 * 2px, тени и размытие.
 *
 * Полоса слева — приём .position--now: рамка остаётся, но левая сторона
 * вдвое толще, и карточка читается с одного взгляда. Раньше заголовок был
 * инлайном font-size: 1.35rem — он УМЕНЬШАЛ глобальный h2 (clamp до
 * 2.5rem), поэтому размер задан классом.
 *
 * line-height намеренно не задан: заголовки уже имеют 1.1 из base.css.
 *
 * Карточка — флекс-колонка, кнопка прижата к низу. По требованию
 * заказчика от 19.10.2026 контактов (почта, телефон, сайт) в карточке
 * больше нет, и описание осталось единственным блоком переменной длины.
 * Без прижатия кнопки соседние карточки в ряду заканчивались на разной
 * высоте: короткое описание — кнопка сразу под тегами, длинное — через
 * пять строк. Ряд читался неровно. Теперь низ у всех один. */
.company-card {
  display: flex;
  flex-direction: column;
  border-left-width: 2px;
}

.company-card__title {
  font-size: 1.5rem;
}

.company-card__place {
  margin-top: .5rem;
  font-size: .95rem;
}

.company-card__partners {
  margin-top: .65rem;
  font-weight: 700;
}

.company-card__offer-note {
  margin-top: 1.5rem;
  font-size: .9rem;
}

/* Ряд тегов — перенос и зазор, чтобы подписи не липли друг к другу. */
.company-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

/* Подвал карточки: пустое место перед кнопкой уходит вниз.
 *
 * auto прижимает кнопку к нижнему краю, а padding-top гарантирует
 * минимум 1.5rem даже когда описание заняло всю высоту и auto схлопнулся
 * бы в ноль. Оба свойства нужны: одно даёт выравнивание, другое — отступ. */
.company-card__foot {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* Кнопка во всю ширину карточки — та же конвенция, что в login.html и
   register.html. Иначе подпись переносится на три строки в колонке
   шириной 280px и кнопка выглядит случайно суженной. */
.company-card .btn {
  width: 100%;
}

/* Кнопка действия в карточке партнёра.
 *
 * Задача по требованию заказчика от 19.10.2026: кнопку сделать живее, но
 * не кричащей. Правила только здесь — .btn на остальных страницах не
 * тронут.
 *
 * Стрелка ↗ — та самая, что у ссылки «Сайт» на карте и в подвале, в
 * угол. Это и есть «интересно»: знак уже знаком посетителю, отдельный
 * выдуманный символ рядом с ним смотрелся бы подделкой.
 *
 * Заливка при наведении тише сплошной: 12% акцента вместо #FF450E. В
 * ряду семь кнопок, и сплошная оранжевая на каждой заливала пол-экрана.
 * Это тот же --accent с альфой, новый цвет в палитру не заведён.
 *
 * Ни следов, ни хвостов, ни пружинящих кривых: всё это пробовалось и
 * выглядело артефактом вёрстки. Осталось одно движение — короткий уход
 * стрелки в угол на 3px.
 *
 * focus-visible рядом с hover не для доступности «для галочки»: без него
 * кнопка с клавиатуры выглядела бы нажатой только по цвету подписи. */
.company-card__foot .btn {
  justify-content: space-between;
  gap: .75rem;
  padding-inline: 1.25rem;
}

.company-card__foot .btn:hover,
.company-card__foot .btn:focus-visible {
  background: rgba(255, 69, 14, .12);
  color: var(--accent);
}

.company-card__arrow {
  transition: transform 200ms ease;
}

.company-card__foot .btn:hover .company-card__arrow,
.company-card__foot .btn:focus-visible .company-card__arrow {
  transform: translate(3px, -3px);
}

/* Индикатор загрузки HTMX виден только во время запроса. */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

@media (max-width: 720px) {
  .filter-search {
    flex-direction: column;
  }
}

.stats {
  counter-reset: stat;
  gap: 1.5rem;
  /* Три счётчика — три равные колонки. Обычный auto-fit на 720px оставлял
     третью плашку одну во второй строке; здесь лучше сразу одна колонка. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats .stat {
  counter-increment: stat;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 200px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 2px solid var(--accent);
  background: var(--surface);
  color: var(--fg);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.stats .stat::before {
  content: counter(stat, decimal-leading-zero);
  color: var(--accent);
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.stats .stat__value {
  margin: auto 0 0;
  font-size: clamp(3.5rem, 6vw, 5.25rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  transition: color 160ms ease;
}

.stats .stat > .label {
  margin-top: 0.9rem;
  color: var(--fg-muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

.stats a.stat:hover,
.stats a.stat:focus-visible {
  color: inherit;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.03);
}

.stats a.stat:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.stats a.stat:hover .stat__value,
.stats a.stat:focus-visible .stat__value {
  color: var(--accent);
}

.stats a.stat::after {
  content: "\2197";
  position: absolute;
  top: 1.3rem;
  right: 1.4rem;
  color: var(--accent);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.stats a.stat:hover::after,
.stats a.stat:focus-visible::after {
  transform: translate(2px, -2px);
}

@media (max-width: 720px) {
  .stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .stats .stat {
    min-height: 160px;
    padding: 1.25rem;
  }

  .stats .stat__value {
    font-size: clamp(3rem, 16vw, 4.5rem);
  }
}

/* Контакты: карточка представителя.
 *
 * Имя — главный объект, поэтому оно крупнее подписи роли и адреса. Email
 * вынесен в отдельную строку-ссылку: на узком экране длинный адрес не
 * рвёт абзац с именем, а переносится внутри своей плашки. */
.contact-card {
  width: 100%;
  max-width: 620px;
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 2px solid var(--accent);
  background: var(--surface);
}

.contact-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}

.contact-card__role {
  margin: 0;
  color: var(--fg);
  font-size: .7rem;
  line-height: 1.5;
}

.contact-card__city {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0;
}

.contact-card__city .label {
  margin: 0;
  color: var(--fg-muted);
  font-size: .65rem;
}

.contact-card__city-value {
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
}

.contact-card__name {
  margin: 1.15rem 0 0;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.contact-card__email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.35rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(255, 255, 255, .18);
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.contact-card__email:hover,
.contact-card__email:focus-visible {
  border-color: var(--accent);
  background: rgba(255, 255, 255, .03);
  color: var(--fg);
}

.contact-card__email:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.contact-card__email-value {
  min-width: 0;
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  font-size: clamp(.72rem, 1.5vw, .8rem);
  line-height: 1.5;
  overflow-wrap: anywhere;
  transition: color 160ms ease;
}

.contact-card__email:hover .contact-card__email-value,
.contact-card__email:focus-visible .contact-card__email-value {
  color: var(--accent);
}

.contact-card__email-arrow {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.contact-card__email:hover .contact-card__email-arrow,
.contact-card__email:focus-visible .contact-card__email-arrow {
  transform: translate(2px, -2px);
}

@media (max-width: 720px) {
  .contact-card {
    padding: 1.25rem;
  }

  .contact-card__name {
    margin-top: 1rem;
  }

  .contact-card__email {
    margin-top: 1.15rem;
    padding: .75rem .85rem;
  }
}

.notice {
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
}

/* Кабинет на телефоне: одна колонка, герб сверху справа, а меню —
 * сетка разделов вместо строки ссылок. Шесть пунктов видны сразу,
 * каждый — крупная зона нажатия; активный раздел держит оранжевую
 * полосу сверху и подсветку. */
@media (max-width: 720px) {
  .cabinet {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .cabinet__emblem {
    order: -1;
    justify-self: end;
    width: 64px;
  }

  .cabinet__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    align-items: stretch;
    width: 100%;
    padding: 1px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .16);
  }

  .cabinet__nav a {
    display: flex;
    align-items: flex-end;
    min-height: 64px;
    padding: 0.7rem 0.55rem;
    border-bottom: 0;
    background: var(--bg);
    color: var(--fg-muted);
    font-size: clamp(0.58rem, 2.55vw, 0.68rem);
    line-height: 1.35;
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
    transition: background-color 160ms ease, color 160ms ease;
  }

  .cabinet__nav a::after {
    display: none;
  }

  .cabinet__nav a:hover,
  .cabinet__nav a:focus-visible {
    background: var(--surface);
    color: var(--fg);
  }

  .cabinet__nav a.is-active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: inset 0 2px 0 var(--accent);
  }

  .cabinet__nav a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }

  .cabinet__nav-dot {
    margin-left: 0.35rem;
  }
}

/* На очень узком экране трём колонкам тесно: «Подобрать партнёра»
 * переносится на три строки. Тогда сетка становится двухколоночной. */
@media (max-width: 360px) {
  .cabinet__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Панель «Связать» — REQ-S-1 … REQ-S-8, ТЗ 5.1.
 *
 * Здесь нет ни градиентов, ни скруглений больше 2px: панель —
 * рабочий инструмент администратора, а не витрина.
 */

.connect-form__mail {
  margin-top: 2.5rem;
  border: 1px solid var(--accent);
  padding: 1.5rem;
}

.connect-results {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.connect-result {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
}

.connect-result:has(input:checked) {
  border-color: var(--accent);
}

.connect-result input {
  width: auto;
  margin-top: 0.35rem;
  accent-color: var(--accent);
}

.connect-result__body {
  display: grid;
  gap: 0.35rem;
}

.connect-result__title {
  font-weight: 700;
}

.connect-result__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

/* Совпавший тег — REQ-S-4: выделяется цветом --accent, несовпавшие
 * остаются приглушёнными. */
.tag--match {
  border-color: var(--accent);
  color: var(--accent);
}

.letter-preview {
  margin-top: 0.5rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.letter-preview__text {
  margin-top: 0.5rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-family: inherit;
  white-space: pre-wrap;
}

.journal__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.journal__table th,
.journal__table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.75rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.journal__table th {
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

@media (max-width: 720px) {
  .journal__table th:nth-child(4),
  .journal__table td:nth-child(4) {
    display: none;
  }
}