/* ============================================================
   «Мой Род» — design system
   Белый фон, глубина из типографики, тонких линий и воздуха.
   Плоскости разделяются границей 1px, тени не используются.
   ============================================================ */

/* ---------- 1. Токены ---------- */
:root{
  --bg:         #FFFFFF;
  --surface:    #FAFAF9;
  --surface-2:  #F4F4F2;
  --ink:        #14140F;
  --ink-soft:   #56564C;
  --ink-faint:  #8A8A80;
  --line:       #E4E4DF;
  --accent:     #0E4D40;
  --accent-deep:#093229;
  --accent-soft:#E8F0EC;
  --clay:       #C7622E;
  --clay-soft:  #F7EAE1;

  /* Ступени плотности карты: от «нет данных» до акцента. Ими же красится
     легенда под картой, поэтому цвета живут здесь, а не в разметке SVG. */
  --map-0: #EDEDE9;
  --map-1: #BFD4CB;
  --map-2: #7FAA9C;
  --map-3: #3C7566;
  --map-4: var(--accent);

  --r-card: 18px;
  --r-btn:  12px;
  --r-pill: 999px;

  --wrap: 1180px;
  --gap: 24px;
  /* Расстояние между секциями и поля корпуса страницы — токенами, чтобы узкий
     экран сжимал весь вертикальный ритм разом, а не по правилу на блок. */
  --stack-lg: 56px;
  --pad-x: 20px;
  --body-top: 44px;
  --body-bottom: 72px;

  --f-head: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --f-text: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- 2. База ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
svg{ display:block; }
/* Раскладочные правила ниже задают элементам display, и без !important они
   перебивали бы hidden: скрытый блок остался бы видимым. */
[hidden]{ display:none !important; }

/* Списки на сайте — почти всегда конструкция раскладки, а не текст: браузерная
   втяжка под маркеры сдвигала бы сетки вправо. Маркеры и втяжку возвращает
   .prose — единственное место, где список читается как перечисление. */
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
.ic{ fill:currentColor; flex:none; }
.ic-inline{ display:inline-block; vertical-align:-.15em; }

::selection{ background:var(--accent-soft); color:var(--accent-deep); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:16px; top:-60px; z-index:100;
  background:var(--accent); color:#fff; padding:10px 16px; border-radius:var(--r-btn);
  transition:top .15s ease;
}
.skip:focus{ top:12px; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- 3. Раскладка ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad-x); }

/* Двухколоночная страница: контент + боковой рельс (сводка, реклама).
   Рельс не липкий — блоки стоят на своих местах и не едут за скроллом.
   Уже 1480px рельс встаёт в поток сразу под шапкой страницы. */
/* Колонка объявлена как minmax(0,1fr), а не 1fr: у 1fr минимум равен auto,
   то есть ширине самого широкого содержимого, и одна нежмущаяся строка внутри
   раздвигала бы всю страницу вбок. */
.layout{ display:grid; gap:40px; grid-template-columns:minmax(0,1fr); align-items:start; }
.rail{ display:flex; flex-direction:column; gap:var(--gap); position:relative; }
@media (max-width:1479px){
  .rail{ order:-1; }
  .rail .ad-rail{ min-height:120px; }
}
@media (min-width:1480px){
  .layout{ grid-template-columns:minmax(0,1fr) 320px; gap:56px; }
}

/* Основной корпус страницы под шапкой объекта. */
.page-body{ padding-top:var(--body-top); padding-bottom:var(--body-bottom); }

/* Отступы задают внутренние .wrap: страницы открываются полосой во всю
   ширину, и общий padding у main её бы отбил. */
main{ padding:0; }
.rule{ border:0; border-top:1px solid var(--line); }

/* Вертикальный ритм задаёт контейнер, а не соседство элементов.
   Раньше это был `section + section{ margin-top }`, и он рвался, стоило
   поставить между секциями рекламную врезку: пустой слот не является
   секцией, селектор не срабатывал, и блоки слипались вплотную. У .stack
   расстояние принадлежит контейнеру и не зависит от того, что внутри.
   position:relative — опора для незаполненных слотов, см. ads.css. */
.stack{ display:flex; flex-direction:column; gap:var(--stack,var(--stack-lg)); position:relative; }
.stack-tight{ --stack:var(--gap); }
.stack-sm{ --stack:22px; }

/* ---------- 4. Типографика ---------- */
/* overflow-wrap:break-word — заголовки набираются крупно, и на узкой колонке
   одно длинное русское слово («профессиональную») шире её целиком. Без переноса
   внутри слова оно вылезало за край и растягивало всю страницу вбок. */
h1,h2,h3,h4{ font-family:var(--f-head); font-weight:600; color:var(--ink); margin:0; line-height:1.15; letter-spacing:-.015em; overflow-wrap:break-word; }
h1{ font-size:clamp(34px,5vw,54px); }
h2{ font-size:clamp(24px,2.6vw,32px); }
h3{ font-size:20px; letter-spacing:-.01em; }
h4{ font-size:17px; font-family:var(--f-text); font-weight:700; letter-spacing:0; }
/* Абзац сам себе отступов не ставит: расстояние между блоками задаёт контейнер
   через gap, иначе margin абзаца складывается с gap и щель выходит двойной.
   Сплошной текст — исключение: там ритм нужен внутри одного блока, и его
   держит .prose p ниже. */
p{ margin:0; }

.lede{ font-size:20px; line-height:1.55; color:var(--ink-soft); max-width:62ch; }
.muted{ color:var(--ink-soft); }
.faint{ color:var(--ink-faint); }
.small{ font-size:14px; line-height:1.5; }
.label{ font-size:13px; color:var(--ink-faint); letter-spacing:.01em; }

.prose{ max-width:68ch; }
.prose p{ margin-bottom:1.15em; }
.prose p:last-child{ margin-bottom:0; }
.prose h3{ margin:2em 0 .6em; }
.prose h3:first-child{ margin-top:0; }
.prose ul, .prose ol{ padding-left:1.15em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li{ margin-bottom:.4em; }
.prose a{ color:var(--accent); text-underline-offset:3px; }

a{ color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--accent-deep); }
.plain{ text-decoration:none; }
.plain:hover{ text-decoration:underline; }

.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }

/* Цифры */
.num{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

/* ---------- 5. Шапка ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:20px;
  min-height:68px;
}
.logo{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-head); font-weight:600; font-size:19px; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.logo svg{ color:var(--accent); }
.logo:hover{ color:var(--accent-deep); }

/* Поле поиска уже кнопок справа и не упирается в край: фиксированная
   доля ширины, а не «весь остаток строки». */
.header-search{ flex:0 1 300px; max-width:300px; }
.header-search .field{ padding-right:88px; font-size:15px; }

/* Кнопка-лупа и бургер живут только на узких экранах. Селекторы с .site-header
   намеренно специфичнее одного класса: правила ниже по файлу (.search, .btn-icon)
   задают display, и при равном весе побеждали бы они — форма поиска оставалась
   бы в строке и выдавливала бургер за край экрана. */
.site-header .nav-search{ display:none; }
.site-header .burger{ display:none; }
.site-header .nav-head{ display:none; }

.site-nav{ margin-left:auto; }
.site-nav ul{ display:flex; align-items:center; gap:2px; }
/* Значки нужны в дровере: в строке десктопного меню они только шумят. */
.site-nav .ic{ display:none; }
.site-nav a{
  display:block; padding:9px 11px; border-radius:var(--r-btn);
  color:var(--ink-soft); text-decoration:none; font-size:15px; font-weight:500;
  transition:background .15s ease, color .15s ease;
}
.site-nav a:hover{ background:var(--surface-2); color:var(--ink); }
.site-nav a[aria-current="page"]{ color:var(--accent); background:var(--accent-soft); }

.site-nav .btn{ padding:9px 16px; font-size:15px; }
.site-nav .btn-outline{ color:var(--accent); background:var(--bg); border-color:var(--accent); }
.site-nav .btn-outline:hover{ background:var(--accent-soft); color:var(--accent-deep); }
.site-nav li.nav-login{ margin-left:10px; }

.burger{
  width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); border-radius:var(--r-btn);
  color:var(--ink); cursor:pointer;
}
.burger:hover{ background:var(--surface-2); }

/* Затемнение под дровером. Скрыто не через display, чтобы появление и уход
   можно было провести переходом; visibility снимается с задержкой в длину
   анимации, иначе фон исчезает раньше, чем панель уезжает. */
.nav-backdrop{
  position:fixed; inset:0; z-index:60; background:rgba(20,20,15,.45);
  opacity:0; visibility:hidden;
  transition:opacity .22s ease, visibility 0s linear .22s;
}
.nav-backdrop.is-open{ opacity:1; visibility:visible; transition-delay:0s; }

@media (max-width:1279px){
  /* Меню из семи пунктов и поле поиска в одну строку уже не помещаются —
     оставляем меню, поиск сворачиваем в кнопку-лупу. */
  .site-header .header-search{ display:none; }
  .site-header .nav-search{ display:inline-flex; margin-left:auto; }
  .site-nav{ margin-left:0; }
}

/* ---- Мобильная шапка: логотип, лупа, бургер ---- */
@media (max-width:900px){
  .header-inner{ min-height:56px; gap:10px; }
  .site-header .burger{ display:inline-flex; }
  .site-header .nav-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:9px 10px 9px 20px; border-bottom:1px solid var(--line);
  }
  .nav-title{ font-family:var(--f-head); font-weight:600; font-size:17px; }

  /* Дровер, а не полоса под шапкой: раскрытое меню из восьми пунктов удлиняло
     документ и уезжало вверх вместе со скроллом. Панель фиксирована, скролл
     страницы под ней снимает html.nav-open. */
  .site-nav{
    position:fixed; top:0; right:0; bottom:0; z-index:70;
    width:min(320px,86vw); margin:0;
    display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
    background:var(--bg); border-left:1px solid var(--line);
    transform:translateX(100%); visibility:hidden;
    transition:transform .22s ease, visibility 0s linear .22s;
  }
  .site-nav.is-open{ transform:none; visibility:visible; transition-delay:0s; }
  .site-nav ul{ flex-direction:column; align-items:stretch; gap:2px; padding:12px; }
  .site-nav .ic{ display:block; color:var(--ink-faint); }
  .site-nav a{
    display:flex; align-items:center; gap:14px; min-height:52px; padding:0 14px;
    border-radius:var(--r-btn); font-size:16.5px; color:var(--ink);
  }
  .site-nav a[aria-current="page"] .ic{ color:var(--accent); }
  .site-nav li.nav-login{
    margin:10px 0 0; padding-top:14px; border-top:1px solid var(--line);
  }
  .site-nav .btn{ width:100%; padding:14px; font-size:16px; }
}
html.nav-open{ overflow:hidden; }

/* ---------- 6. Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:var(--r-btn);
  font:inherit; font-weight:600; font-size:16px; line-height:1;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-deep); color:#fff; }
.btn-outline{ background:var(--bg); color:var(--accent); border-color:var(--accent); }
.btn-outline:hover{ background:var(--accent-soft); color:var(--accent-deep); }
.btn-quiet{ background:var(--bg); color:var(--ink); border-color:var(--line); }
.btn-quiet:hover{ background:var(--surface-2); }
.btn-sm{ padding:9px 14px; font-size:14px; }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }
.btn-icon{
  width:44px; height:44px; padding:0; border-radius:var(--r-btn);
  border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-icon:hover{ background:var(--surface-2); }

/* ---------- 7. Поля и поиск ---------- */
.field{
  width:100%; padding:12px 14px;
  font:inherit; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-btn);
  transition:border-color .15s ease, background .15s ease;
}
.field::placeholder{ color:var(--ink-faint); }
.field:hover{ border-color:#D2D2CB; }
.field:focus{ outline:none; border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }

.search{ display:flex; position:relative; }
.search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-faint); pointer-events:none; }
.search .field{ padding-left:42px; padding-right:96px; border-radius:var(--r-pill); }
.search .btn{ position:absolute; right:5px; top:5px; bottom:5px; padding:0 18px; border-radius:var(--r-pill); }
.search-lg .field{ padding:20px 150px 20px 54px; font-size:19px; }
.search-lg svg{ left:20px; width:22px; height:22px; }
.search-lg .btn{ right:7px; top:7px; bottom:7px; padding:0 26px; font-size:17px; }
@media (max-width:609px){
  /* Кнопка уходит из-под поля вниз, поэтому строка становится колонкой.
     Лупу при этом убираем: она позиционирована от середины формы, а середина
     теперь приходится на щель между полем и кнопкой. */
  .search-lg{ flex-direction:column; gap:10px; }
  .search-lg svg{ display:none; }
  .search-lg .field{ padding:16px 18px; font-size:17px; }
  .search-lg .btn{ position:static; width:100%; padding:15px 0; }
}

/* Форма инструмента: полей бывает от одного до четырёх, поэтому число колонок
   не задано, а набирается auto-fit — иначе каждому инструменту понадобился бы
   свой набор брейкпойнтов под своё число полей. */
.tool-form{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px;
  align-items:end; padding:22px 24px;
  border:1px solid var(--line); border-radius:var(--r-card);
}
.tool-form > div{ display:flex; flex-direction:column; gap:6px; }
.tool-form label{ font-size:13.5px; color:var(--ink-faint); }
.tool-form .btn{ width:100%; }
@media (max-width:520px){ .tool-form{ grid-template-columns:1fr; padding:18px; } }

/* ---------- 8. Чипы и теги ---------- */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--bg);
  color:var(--ink-soft); font-size:14.5px; font-weight:500; text-decoration:none;
  cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover{ background:var(--surface-2); color:var(--ink); text-decoration:none; }
.chip[aria-pressed="true"],.chip.is-active{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.chip[aria-pressed="true"]:hover,.chip.is-active:hover{ background:var(--accent-deep); color:#fff; }
.chip-clear{ border:0; background:none; padding:0 4px; color:inherit; font:inherit; line-height:1; cursor:pointer; opacity:.75; }
.chip-clear:hover{ opacity:1; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }

.tag{
  display:inline-block; padding:4px 10px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--ink-soft); font-size:13px; text-decoration:none;
}
.tag:hover{ background:var(--accent-soft); color:var(--accent-deep); text-decoration:none; }
.tag-clay{ background:var(--clay-soft); color:var(--clay); }

/* Бейдж — признак объекта рядом с заголовком */
.badge{
  display:inline-flex; align-items:center; padding:6px 13px; border-radius:var(--r-pill);
  background:var(--accent-soft); color:var(--accent-deep);
  font-size:14px; font-weight:600; text-decoration:none;
}
a.badge:hover{ background:var(--accent); color:#fff; text-decoration:none; }
.badge-neutral{ background:var(--surface-2); color:var(--ink-soft); }
a.badge-neutral:hover{ background:var(--accent-soft); color:var(--accent-deep); }
.badges{ display:flex; flex-wrap:wrap; gap:8px; }

/* Подпись над заголовком: что это за объект */
/* Отступ под подписью задаёт gap контейнера (.hero-title, .fact): подпись
   встречается только первой строкой в колонке и своих полей не имеет. */
.caption{ display:block; font-size:15px; color:var(--ink-faint); }

/* Карточка-факт: короткое значение с подписью */
.fact{ display:flex; flex-direction:column; gap:5px; border:1px solid var(--line); border-radius:14px; padding:15px 18px; }
.fact .caption{ font-size:13.5px; }
.fact b{ font-size:16px; font-weight:600; }
.fact a{ font-weight:600; }

/* ---------- 9. Карточки ---------- */
.card{
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--bg); padding:24px;
}
.card-soft{ background:var(--surface); }
.card-link{ display:block; text-decoration:none; color:inherit; transition:border-color .15s ease, background .15s ease; }
.card-link:hover{ border-color:var(--accent); background:var(--surface); text-decoration:none; }
.card-link:hover .card-title{ color:var(--accent); }
.card-title{ font-family:var(--f-head); font-weight:600; font-size:18px; letter-spacing:-.01em; }
.grid{ display:grid; gap:var(--gap); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:609px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* ---------- 10. Статистика ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
}
.stat{ display:flex; flex-direction:column; gap:8px; padding:22px 24px; border-left:1px solid var(--line); }
.stat:first-child{ border-left:0; }
.stat-value{
  font-family:var(--f-head); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(26px,3.4vw,36px); color:var(--accent); line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.stat-value sup{ font-size:.5em; font-weight:500; }
.stat-label{ font-size:14px; color:var(--ink-soft); line-height:1.35; }
@media (max-width:860px){
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat:nth-child(odd){ border-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }
}

/* ---------- 11. Таблицы ---------- */
.table-wrap{ border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
table.data{ width:100%; border-collapse:collapse; font-size:16px; }
table.data caption{ text-align:left; padding:18px 22px 0; color:var(--ink-faint); font-size:14px; }
table.data th,table.data td{ padding:14px 22px; text-align:left; border-top:1px solid var(--line); vertical-align:middle; }
table.data thead th{
  border-top:0; background:var(--surface); color:var(--ink-soft);
  font-weight:600; font-size:14px; letter-spacing:.01em; white-space:nowrap;
}
table.data tbody tr:hover{ background:var(--surface); }
table.data td.n,table.data th.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.data td strong{ font-weight:700; }
.rank{ color:var(--ink-faint); font-variant-numeric:tabular-nums; width:1%; white-space:nowrap; }

@media (max-width:767px){
  .table-wrap{ border:0; border-radius:0; }
  table.data,table.data tr,table.data td{ display:block; width:100%; }
  table.data thead{ display:none; }
  /* На узком экране строки — карточки, и расстояние между ними держит
     колонка tbody, а не собственный margin строки. */
  table.data tbody{ display:flex; flex-direction:column; gap:12px; }
  table.data tr{
    border:1px solid var(--line); border-radius:var(--r-card);
    padding:6px 16px 10px;
  }
  table.data td{ border-top:0; padding:7px 0; display:flex; justify-content:space-between; gap:16px; text-align:right; }
  table.data td + td{ border-top:1px solid var(--line); }
  table.data td::before{
    content:attr(data-label); color:var(--ink-faint); font-size:14px;
    text-align:left; flex:0 0 auto;
  }
  table.data td.n{ text-align:right; }
}

/* Полоса-мера внутри таблиц и списков */
.bar{ display:block; height:6px; border-radius:var(--r-pill); background:var(--surface-2); overflow:hidden; min-width:80px; }
.bar span{ display:block; height:100%; background:var(--accent); border-radius:var(--r-pill); }

/* ---------- 12. Списки-ссылки (кластер, перелинковка) ---------- */
.linklist li{ border-top:1px solid var(--line); }
.linklist li:first-child{ border-top:0; }
.linklist a{
  display:flex; align-items:center; gap:12px; padding:13px 0;
  color:var(--ink); text-decoration:none; font-weight:500;
}
.linklist a:hover{ color:var(--accent); }
.linklist a svg{ margin-left:auto; color:var(--ink-faint); flex:none; }
.linklist a:hover svg{ color:var(--accent); }

/* ---------- 13. Пагинация и алфавит ---------- */
.pagination{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; }
.pagination a,.pagination span{
  min-width:42px; height:42px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--r-btn);
  color:var(--ink); text-decoration:none; font-variant-numeric:tabular-nums; font-size:15px;
}
.pagination a:hover{ background:var(--surface-2); }
.pagination [aria-current="page"]{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pagination .gap{ border:0; min-width:24px; color:var(--ink-faint); }

.alpha{ display:flex; flex-wrap:wrap; gap:4px; }
.alpha a{
  min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink); font-weight:500;
}
.alpha a:hover{ background:var(--surface-2); }
.alpha a.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------- 14. Хлебные крошки ---------- */
.crumbs{ font-size:14px; color:var(--ink-faint); }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:8px; }
.crumbs a{ color:var(--ink-soft); text-decoration:none; }
.crumbs a:hover{ color:var(--accent); text-decoration:underline; }
.crumbs li + li::before{ content:'/'; color:var(--line); margin-right:8px; }

/* Возврат к карточке — используется на всех подстраницах кластера */
.back{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; color:var(--accent); text-decoration:none; font-size:15px;
}
.back:hover{ text-decoration:underline; }

/* Реклама живёт в ads.css — здесь только заглушки макета, они не нужны. */

/* ---------- 16. Состояния ---------- */
/* Колонка выровнена по центру, поэтому свои поля частям не нужны: и зазор,
   и центрирование держит сам .state. */
.state{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:44px 28px; text-align:center;
}
.state svg{ color:var(--ink-faint); }
.state p{ color:var(--ink-soft); max-width:46ch; }
.state-error{ border-color:#E7CFC0; background:var(--clay-soft); }
.state-error svg{ color:var(--clay); }

.notice{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line); border-left:3px solid var(--clay);
  background:var(--clay-soft); border-radius:var(--r-btn);
  padding:14px 16px; font-size:15px; color:var(--ink-soft);
}
.notice svg{ color:var(--clay); flex:none; margin-top:2px; }

/* ---------- 17. Футер ---------- */
.site-footer{ border-top:1px solid var(--line); background:var(--surface); padding:48px 0 36px; }
.site-footer .wrap{ display:flex; flex-direction:column; gap:36px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; }
.footer-col{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.footer-brand{ gap:14px; }
.site-footer h4{ font-size:15px; }
.footer-about{ max-width:34ch; }
.site-footer ul{ display:flex; flex-direction:column; gap:9px; }
.site-footer a{ color:var(--ink-soft); text-decoration:none; font-size:15px; }
.site-footer a:hover{ color:var(--accent); text-decoration:underline; }
.footer-bottom{
  padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:var(--ink-faint); font-size:14px;
}
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:609px){
  .site-footer{ padding:32px 0 28px; }
  .site-footer .wrap{ gap:28px; }
  .footer-grid{ grid-template-columns:minmax(0,1fr); gap:24px; }
}

/* ---- 18. Шапка страницы объекта ---- */
.page-hero{ padding:26px 0 34px; border-bottom:1px solid var(--line); }
/* Крошки, кнопка «назад», лид и цифры — необязательные части шапки. Пока
   расстояние держали их собственные margin'ы, пропуск любой из них склеивал
   соседей; теперь интервал принадлежит колонке. */
.page-hero > .wrap{ display:flex; flex-direction:column; gap:22px; }
.hero-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
.hero-title{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.hero-title h1{ font-size:clamp(32px,4.6vw,54px); line-height:1.06; max-width:20ch; }
.hero-title h1.xl{ font-size:clamp(40px,6vw,72px); line-height:1; }
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.hero-lede{ max-width:70ch; font-size:18px; color:var(--ink-soft); }

/* ---- 19. Кластер подстраниц объекта ---- */
.cluster{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.cluster > *{
  display:flex; flex-direction:column; gap:8px; padding:20px;
  text-decoration:none; color:var(--ink);
  border-left:1px solid var(--line); border-top:1px solid var(--line);
  transition:background .15s ease;
}
.cluster > *:nth-child(4n+1){ border-left:0; }
.cluster > *:nth-child(-n+4){ border-top:0; }
.cluster a:hover{ background:var(--surface); color:var(--accent); }
.cluster .ic{ color:var(--accent); }
.cluster b{ font-weight:600; font-size:16px; }
.cluster i{ font-style:normal; font-size:14px; color:var(--ink-faint); }
.cluster a:hover i{ color:var(--ink-soft); }
.cluster a[aria-current="page"]{ background:var(--accent-soft); }
.cluster a[aria-current="page"] b{ color:var(--accent-deep); }
/* Заглушка: страница запланирована, но ещё не готова */
.cluster .is-soon{ background:var(--surface); color:var(--ink-faint); cursor:default; }
.cluster .is-soon .ic{ color:var(--ink-faint); }
.cluster .is-soon b{ color:var(--ink-soft); font-weight:600; }
.cluster .is-soon .soon{
  align-self:flex-start; margin-top:auto; padding:3px 9px; border-radius:var(--r-pill);
  background:var(--clay-soft); color:var(--clay); font-size:12.5px; font-weight:600; font-style:normal;
}
@media (max-width:900px){
  .cluster{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cluster > *:nth-child(4n+1){ border-left:1px solid var(--line); }
  .cluster > *:nth-child(-n+4){ border-top:1px solid var(--line); }
  .cluster > *:nth-child(odd){ border-left:0; }
  .cluster > *:nth-child(-n+2){ border-top:0; }
}
@media (max-width:609px){
  .cluster{ grid-template-columns:1fr; }
  .cluster > *{ border-left:0 !important; border-top:1px solid var(--line) !important; flex-direction:row; align-items:center; gap:12px; }
  .cluster > *:first-child{ border-top:0 !important; }
  .cluster i{ margin-left:auto; text-align:right; }
  .cluster .is-soon .soon{ margin-top:0; }
}

/* ---- 20. Карточки-факты, источники, списки людей ---- */
.facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:700px){ .facts{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .facts{ grid-template-columns:1fr; } }

.source{ font-size:13.5px; color:var(--ink-faint); border-left:2px solid var(--line); padding-left:14px; max-width:66ch; }

.people li{ border-top:1px solid var(--line); }
.people li:first-child{ border-top:0; }
.people a{ display:flex; gap:18px; align-items:baseline; padding:16px 0; text-decoration:none; color:var(--ink); }
.people a:hover .pname{ color:var(--accent); text-decoration:underline; }
.pname{ font-weight:600; font-size:17px; }
.pyears{ color:var(--ink-faint); font-variant-numeric:tabular-nums; font-size:15px; }
.pwhat{ color:var(--ink-soft); font-size:15px; margin-left:auto; text-align:right; }
@media (max-width:640px){
  .people a{ flex-wrap:wrap; gap:6px 14px; }
  .pwhat{ margin-left:0; text-align:left; flex:0 0 100%; }
}

/* Инициалы вместо портрета */
.avatar{
  width:54px; height:54px; flex:none; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-deep);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-head); font-weight:600; font-size:17px;
}

/* ---- 21. Карты и рейтинги ---- */
.map{ border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); padding:20px; }
.map svg{ width:100%; height:auto; display:block; }
/* Обводка цветом подложки, а не линией: соседние страны одной ступени иначе
   сливаются в одно пятно, а видимая граница спорит с заливкой. */
.map svg path{ stroke:var(--surface); stroke-width:.6; stroke-linejoin:round; }
/* Страна без класса — данных нет; .t1….t4 — ступени плотности. */
.tiers path{ fill:var(--map-0); }
.tiers path.t1{ fill:var(--map-1); }
.tiers path.t2{ fill:var(--map-2); }
.tiers path.t3{ fill:var(--map-3); }
.tiers path.t4{ fill:var(--map-4); }
.legend{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-soft); }
.legend i{ display:inline-block; width:30px; height:10px; border-radius:3px; }
.legend i.t0{ background:var(--map-0); }
.legend i.t1{ background:var(--map-1); }
.legend i.t2{ background:var(--map-2); }
.legend i.t3{ background:var(--map-3); }
.legend i.t4{ background:var(--map-4); }

.rank-list{ display:grid; gap:10px; }
.rank-list li{
  display:grid; grid-template-columns:32px 1fr auto; gap:14px; align-items:center;
  padding:12px 16px; border:1px solid var(--line); border-radius:14px;
}
.rank-list .pos{ color:var(--ink-faint); font-variant-numeric:tabular-nums; font-size:14px; }
.rank-list .name{ font-weight:600; }
.rank-list .name small{ display:block; font-weight:400; color:var(--ink-faint); }
.rank-list .val{ font-variant-numeric:tabular-nums; color:var(--accent); font-weight:700; }
.rank-list li.hi{ border-color:var(--clay); }
.rank-list li.hi .val{ color:var(--clay); }

/* ---- 22. Переключатель режимов ---- */
.toggle{ display:inline-flex; padding:4px; gap:4px; border:1px solid var(--line); border-radius:var(--r-pill); }
.toggle button{
  border:0; background:none; font:inherit; font-size:15px; font-weight:500;
  padding:8px 18px; border-radius:var(--r-pill); color:var(--ink-soft); cursor:pointer;
}
.toggle button:hover{ color:var(--ink); }
.toggle button[aria-pressed="true"]{ background:var(--accent); color:#fff; }

/* ---- 23. Фильтры каталога ---- */
.filters{
  display:flex; flex-direction:column; gap:20px;
  border:1px solid var(--line); border-radius:var(--r-card); padding:22px 24px;
}
.filter-group{ display:flex; flex-direction:column; gap:12px; }
.filter-group + .filter-group{ padding-top:20px; border-top:1px solid var(--line); }
.filter-group h3{ font-family:var(--f-text); font-size:14px; font-weight:700; color:var(--ink-soft); }
.filter-row{ display:flex; gap:16px; flex-wrap:wrap; min-width:0; }
/* min-width:0 обязателен: по умолчанию флекс-элемент не сжимается уже своего
   содержимого, а содержимое здесь — кнопка с неразрывной подписью выбранного
   значения. Без этого пола ряд фильтров распирал страницу за край экрана. */
.filter-row > div{ flex:1 1 200px; min-width:0; display:flex; flex-direction:column; gap:6px; }
.filter-row label, .filter-label{ font-size:13.5px; color:var(--ink-faint); }
/* Стрелка нативного селекта: он остался в формах дерева и генератора ФИО,
   где выбор ничего не открывает, а только заполняет поле. */
select.field{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%); background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:40px; }
/* Строки над выдачей — соседи в колонке .stack: интервал под ними держит её
   gap, свои margin здесь только удваивали бы щель. */
.active-filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.catalog-head{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.catalog-head .count{ color:var(--ink-soft); font-size:15px; }
.catalog-layout{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:32px; align-items:start; }
/* minmax(0,1fr), а не 1fr: минимум у 1fr — auto, то есть ширина самого широкого
   содержимого. Нескрываемая строка алфавита над таблицей растягивала колонку до
   тысячи с лишним пикселей, и вся страница уезжала вбок. */
@media (max-width:1023px){ .catalog-layout{ grid-template-columns:minmax(0,1fr); gap:24px; } }

/* ---- 24. Знак «Мой Род» ---- */
.logo .mark{ width:26px; height:26px; flex:none; }
.logo .mark .knot{ fill:var(--accent); }
.logo .mark .branch{ stroke:var(--accent); }
.logo .mark .seed{ fill:var(--clay); }
.logo:hover .mark .knot{ fill:var(--accent-deep); }
.logo:hover .mark .branch{ stroke:var(--accent-deep); }

/* ---- 25. Компактный алфавитный указатель над таблицей ---- */
.alpha-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.alpha-top .label{ flex:none; }
.alpha-top .alpha{ gap:3px; }
.alpha-top .alpha a{ min-width:32px; height:32px; border-radius:8px; font-size:14.5px; }
@media (max-width:609px){
  /* Указатель кладём на отдельную строку и обязательно даём min-width:0 —
     иначе флекс-элемент раздувается по содержимому и растягивает всю страницу. */
  .alpha-top{ gap:8px; flex-wrap:wrap; }
  .alpha-top .alpha{
    flex:1 1 100%; min-width:0; width:100%;
    overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; scrollbar-width:none;
  }
  .alpha-top .alpha::-webkit-scrollbar{ display:none; }
  .alpha-top .alpha a{ flex:none; }
}
/* Длинная таблица каталога: строки чуть плотнее */
.table-long table.data th, .table-long table.data td{ padding:11px 22px; }

/* ---- 26. Мобильный масштаб и сворачивание фильтров ----
   Один набор токенов сжимает поля, межсекционные интервалы и радиусы разом:
   на телефоне десктопный воздух съедает экран целиком, а до содержимого
   приходится долистывать. Горизонтальные отступы контейнера нельзя обнулять
   инлайновым padding — для вертикального ритма используйте padding-top. */
@media (max-width:609px){
  :root{
    --gap: 16px;
    --stack-lg: 38px;
    --pad-x: 16px;
    --body-top: 28px;
    --body-bottom: 48px;
    --r-card: 14px;
  }
  body{ font-size:16px; }
  .stack-sm{ --stack:18px; }
  .layout{ gap:28px; }
  .card{ padding:18px; }
  .lede{ font-size:17px; }
  .hero-lede{ font-size:16.5px; }
  h3{ font-size:18px; }
  .page-hero{ padding:18px 0 24px; }
  .page-hero > .wrap{ gap:16px; }
  /* Палец не попадает в цель ниже 40px, а чипы и теги на узких страницах —
     основной способ переключать фильтры. */
  .chip{ min-height:40px; padding:8px 14px; }
  .tag{ padding:6px 11px; }
}

.filters-toggle{ display:none; }
.filters-toggle .count-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px;
  padding:0 7px; border-radius:var(--r-pill); background:var(--accent); color:#fff;
  font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
}
.filters-toggle .sign{ font-size:20px; line-height:1; color:var(--ink-faint); }
@media (max-width:1023px){
  .filters-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; padding:14px 18px;
  }
  .filters{ display:none; }
  .filters.is-open{ display:flex; }
}

/* ---- 27. Узкие экраны: до 609px всё в одну колонку ----
   Правила с !important перекрывают страничные сетки, объявленные
   в <style> самих страниц, — они идут в коде позже дизайн-системы. */
@media (max-width:609px){
  /* Ключевые цифры: в две колонки длинные числа не помещаются */
  .stats{ grid-template-columns:1fr; }
  .stat{ padding:16px 18px; border-left:0; border-top:1px solid var(--line); }
  .stat:first-child{ border-top:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }
  .stat-value{ font-size:32px; }

  /* Все многоколоночные сетки страниц */
  .facts, .crosslinks, .demo, .geo, .rules, .sections, .dossier, .steps,
  .combos, .notable, .pgrid, .similar, .picks, .countries, .saved, .mytrees, .trees,
  .arts, .also, .err-links, .crest, .article, .editor, .filter-row{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .article, .crest, .demo{ gap:24px !important; }

  /* Списки с фиксированной первой колонкой */
  .symbols li{ flex-direction:column; gap:6px; }
  .symbols .what{ flex:none; }
  .usage li .q, .tl li .yr, .settings li > div{ flex-basis:100%; }
  .rank-list li{ grid-template-columns:30px minmax(0,1fr); row-gap:4px; }
  .rank-list .val{ grid-column:2; }
  .gauge-scale{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }

  /* Управление на всю ширину — пальцем удобнее */
  .hero-actions{ width:100%; }
  .hero-actions .btn{ flex:1 1 140px; justify-content:center; }
  .toggle{ width:100%; }
  .toggle button{ flex:1; padding:10px 6px; }
  .state{ padding:32px 20px; }

  /* Длинные значения в карточках-строках таблицы переносятся */
  table.data td{ flex-wrap:wrap; }
  .hero-title h1{ overflow-wrap:break-word; }
  .blazon{ font-size:16.5px; padding-left:14px; }
  .article .prose{ font-size:17px; }
}

/* ---- 28. Сортировка по колонкам ---- */
table.data th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
table.data th.sortable:hover{ background:var(--surface-2); color:var(--ink); }
table.data th.sortable:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
table.data th.sortable .arrow{ display:inline-block; margin-left:6px; color:var(--ink-faint); font-size:12px; }
table.data th[aria-sort="ascending"], table.data th[aria-sort="descending"]{ color:var(--accent); }
table.data th[aria-sort] .arrow{ color:var(--accent); }

/* ---- 29. Меню «Поделиться» ---- */
.share-wrap{ position:relative; }
.share-menu{
  position:absolute; right:0; top:calc(100% + 10px); z-index:60; width:262px; padding:8px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-card);
  display:flex; flex-direction:column;
}
.share-menu a, .share-menu button{
  display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px;
  border:0; border-radius:10px; background:none; font:inherit; font-size:15px; font-weight:500;
  color:var(--ink); text-decoration:none; text-align:left; cursor:pointer;
}
.share-menu a:hover, .share-menu button:hover{ background:var(--surface-2); text-decoration:none; }
.share-menu .mk{
  width:28px; height:28px; border-radius:8px; flex:none;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--f-head); font-weight:600; font-size:12px;
}
.mk-tg{ background:#2AABEE; } .mk-max{ background:#2A6BF2; } .mk-vk{ background:#0077FF; }
.mk-ok{ background:#EE8208; } .mk-wa{ background:#25D366; }
.mk-mail{ background:var(--ink-soft); } .mk-copy{ background:var(--accent); }
/* Разделитель — полоса во всю ширину меню минус его отступы; своей высоты у
   него нет, поэтому воздух вокруг даёт padding. */
.share-sep{ height:1px; background:var(--line); flex:none; margin:6px; }
@media (max-width:609px){ .share-menu{ right:auto; left:0; width:100%; min-width:250px; } }

/* ---- 30. Выпадашка фильтра ----
   Раскрытие держит <details>, пункты — ссылки: список работает без скриптов
   и целиком лежит в разметке, чтобы его обошёл поисковик. */
.select{ position:relative; }
.select-btn{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:12px 14px; font:inherit; color:var(--ink); text-align:left;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-btn);
  cursor:pointer; list-style:none; transition:border-color .15s ease, background .15s ease;
}
.select-btn::-webkit-details-marker{ display:none; }
.select-btn:hover{ border-color:#D2D2CB; background:var(--surface); }
.select[open] > .select-btn{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
/* min-width:0 — иначе неразрывная подпись выбранного значения («по
   распространённости фамилии») задаёт кнопке минимальную ширину, кнопка тянет
   за собой панель фильтров, а та распирает страницу за край экрана. */
.select-value{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.select-btn .ic{ color:var(--ink-faint); transition:transform .15s ease; }
.select[open] > .select-btn .ic{ transform:rotate(180deg); color:var(--accent); }

.select-menu{
  position:absolute; z-index:70; left:0; right:0; top:calc(100% + 6px);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-card);
  padding:6px; max-height:320px; display:flex; flex-direction:column; gap:6px;
}
.select-search{ position:relative; padding:4px 4px 8px; border-bottom:1px solid var(--line); }
.select-search input{ padding:10px 12px 10px 38px; font-size:15px; }
.select-search .ic{ position:absolute; left:16px; top:50%; transform:translateY(-60%); color:var(--ink-faint); }
.select-list{ overflow-y:auto; }
.select-list a{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:10px; font-size:15px; color:inherit;
}
.select-list a:hover{ background:var(--surface-2); color:inherit; }
.select-list a[aria-current]{ color:var(--accent); font-weight:600; }
.select-list a[aria-current]::after{ content:'✓'; }
.select-list a > span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.select-list small{ color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.select-empty{ padding:14px 12px; color:var(--ink-faint); font-size:14.5px; }

/* ---- 31. Подсказки в строке поиска ---- */
.suggest{
  position:absolute; z-index:80; left:0; right:0; top:calc(100% + 8px);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-card);
  padding:8px; max-height:70vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:6px;
}
.suggest-group + .suggest-group{ padding-top:6px; border-top:1px solid var(--line); }
.suggest-label{
  display:block; padding:6px 12px 4px;
  font-size:12.5px; font-weight:700; color:var(--ink-faint); letter-spacing:.01em;
}
.suggest-item{
  display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px;
  color:var(--ink); text-decoration:none; font-size:15px;
}
.suggest-item:hover, .suggest-item.is-cursor{ background:var(--surface-2); text-decoration:none; }
.suggest-item b{ font-weight:600; }
.suggest-item b mark{ background:none; color:var(--accent); }
.suggest-item .note{ margin-left:auto; color:var(--ink-faint); font-size:13.5px; text-align:right; white-space:nowrap; }
.suggest-item .dot{ width:26px; height:26px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--accent); }
.suggest-all{ display:block; padding:11px 12px; border-top:1px solid var(--line);
  color:var(--accent); font-weight:600; font-size:15px; text-decoration:none; }
.suggest-all:hover{ background:var(--surface); text-decoration:none; }
@media (max-width:609px){
  .suggest-item .note{ display:none; }
}