/* directory.css — раздел справочников /directory. Отдельный файл под один раздел
   (как calendar.css): правки оформления справочников не задевают общий styles.css.
   Цвета и радиусы — только переменные из styles.css, своей палитры у раздела нет.
   Префикс .dir- обязателен: он гарантирует, что ни одно правило отсюда не «протечёт»
   на соседние страницы через совпадение имени класса. */

/* ── Карточка справочника (индекс раздела) ────────────────────────────────
   Раньше здесь были три растянутые полосы с крошечным заголовком и кнопкой
   «Открыть →» у правого края — на широком экране между заголовком и кнопкой
   висело полметра пустоты. Теперь это карточки той же породы, что .ed-sit
   в ситуациях, но первым идёт САМА ЦИФРА: за ней человек и пришёл. */
.dir-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0}
.dir-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:20px 22px 18px;color:inherit;text-decoration:none}
.dir-card:hover{border-color:var(--accent);box-shadow:var(--shadow-card)}
.dir-card .dir-card-v{font-size:30px;font-weight:800;line-height:1.05;letter-spacing:-.02em;
  color:var(--accent);font-variant-numeric:tabular-nums}
.dir-card .dir-card-u{font-size:13px;color:var(--subtle);margin-top:4px}
.dir-card .dir-card-t{font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.2;margin-top:14px}
.dir-card .dir-card-d{font-size:14.5px;line-height:1.45;color:var(--muted);margin-top:8px}
.dir-card .dir-card-m{font-size:13.5px;color:var(--accent);font-weight:600;margin-top:auto;padding-top:14px}

/* ── Главная цифра страницы ──────────────────────────────────────────────
   Требование: значение читается сразу, без прокрутки. Поэтому цифра крупнее
   заголовка страницы, а основание (акт) стоит рядом, а не в сноске внизу. */
.dir-hero{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:24px 26px;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:22px 40px;align-items:flex-start}
.dir-hero-main{min-width:min(100%,240px)}
.dir-hero-v{font-size:clamp(38px,6vw,58px);font-weight:800;line-height:1;letter-spacing:-.025em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.dir-hero-l{font-size:15px;color:var(--muted);margin-top:8px;max-width:38ch}
.dir-hero-side{flex:1 1 300px;min-width:min(100%,280px);border-left:1px solid var(--line);padding-left:26px}
.dir-hero-side .dir-basis{margin-top:0}
/* Сравнение «регион ↔ федерация» — вторая по важности вещь на странице региона. */
.dir-cmp{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:14px}
.dir-cmp-i{min-width:130px}
.dir-cmp-v{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}
.dir-cmp-l{font-size:12.5px;color:var(--subtle);margin-top:2px}
.dir-cmp-i.is-up .dir-cmp-v{color:var(--green)}

/* Основание — акт, которым величина установлена. Не украшение: без него страница
   ничем не лучше числа из поиска, поэтому у неё свой видимый блок. */
.dir-basis{margin-top:16px;font-size:14px;line-height:1.5;color:var(--muted)}
.dir-basis b{display:block;font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--subtle);margin-bottom:5px}

/* ── Ряд вспомогательных значений (группы ПМ, расчёт с коэффициентом) ──── */
.dir-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:18px 0}
.dir-facts .dir-f{background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.dir-facts .dir-f-v{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dir-facts .dir-f-l{font-size:12.5px;color:var(--subtle);line-height:1.35}
.dir-facts--3{grid-template-columns:repeat(3,1fr)}
.dir-facts--2{grid-template-columns:repeat(2,1fr)}

/* ── Навигация по регионам ───────────────────────────────────────────────
   85 ссылок подряд не просматриваются, поэтому список разбит по федеральным
   округам и свёрнут в <details> на странице региона. */
.dir-regions{margin-top:6px}
.dir-fd{margin-top:18px}
.dir-fd-h{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--subtle);margin-bottom:8px}
.dir-fd-list{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0}
.dir-fd-list a{display:inline-block;font-size:14px;padding:6px 12px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);color:var(--muted)}
.dir-fd-list a:hover{border-color:var(--accent);color:var(--accent);background:var(--tint-soft)}
.dir-fd-list a.is-cur{border-color:var(--accent);background:var(--accent);color:#fff;font-weight:600}
.dir-fold{border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin:18px 0}
.dir-fold>summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none}
.dir-fold>summary::-webkit-details-marker{display:none}
.dir-fold>summary::after{content:' ▾';color:var(--subtle)}
.dir-fold[open]>summary::after{content:' ▴'}

/* Соседние регионы: со страницы региона надо идти дальше, а не назад в общий список. */
.dir-pager{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:20px}
.dir-pager a{flex:1 1 240px;border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 16px;color:inherit;background:var(--surface)}
.dir-pager a:hover{border-color:var(--accent)}
.dir-pager .dir-pager-l{display:block;font-size:12px;color:var(--subtle);margin-bottom:3px}
.dir-pager .dir-pager-n{font-weight:700;font-size:15px}
.dir-pager a.is-next{text-align:right}

/* Регионы без собственной страницы перечисляем текстом: ссылка обещала бы страницу,
   которой нет, — а тонкие страницы этому сайту уже дорого обошлись. */
.dir-plain{font-size:14.5px;line-height:1.7;color:var(--muted)}

/* Ссылка на регион прямо в таблице справочника. */
.data-table td .dir-rl{color:var(--accent);font-weight:600}
.data-table td .dir-rl:hover{text-decoration:underline}

@media (max-width:980px){
  .dir-cards{grid-template-columns:repeat(2,1fr)}
  .dir-facts{grid-template-columns:repeat(2,1fr)}
  .dir-hero-side{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:18px}
}
@media (max-width:640px){
  .dir-cards{grid-template-columns:1fr;gap:14px}
  .dir-facts,.dir-facts--3{grid-template-columns:1fr}
  .dir-hero{padding:18px 18px}
  .dir-card{padding:16px 18px 14px}
}