/* Карточка компании — стили макета design/cards/company.html.

   Взяты целиком, без изменений. Файл подключается лишь на /company/<инн>/ и идёт после
   встроенного <style> общего шаблона, поэтому перекрывает светлые токены.
*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Onest:wght@400;600;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root{
  --bg:#0a0c12; --panel:#11141d; --panel2:#161a25; --edge:#242a3a;
  --ink:#eef1f7; --dim:#a4adc2; --faint:#8b95ab;
  --cyan:#22d3ee; --blue:#5b8cff; --mag:#e879f9; --viol:#a78bfa;
  --amber:#fbbf24; --orange:#fb923c; --green:#34d399; --red:#fb7185;
  --focus:#7dd3fc;
  /* фирменные, из гайдлайна CheyBrend: градиент #2563EB -> #3B82F6.
     На тёмном фоне --brand даёт 3.78:1 — для текста мало, только заливки.
     Для ссылок и подписей брать --brand-lt (5.32:1). */
  --brand:#2563eb; --brand-lt:#3b82f6; --brand-ink:#f5f7fa;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.6 "IBM Plex Sans",system-ui,sans-serif;padding:var(--s5) var(--s4) 72px}
/* Та же ширина, что у main и у подвала: иначе содержимое карточки
   стоит на 40 px правее, чем колонки подвала под ним. */
.wrap{max-width:1200px;margin:0 auto}
h1,h2,h3{font-family:Onest,"IBM Plex Sans",sans-serif;margin:0;text-wrap:balance}
/* Цифры набираем IBM Plex Sans с табличными знаками, а не Plex Mono.
   У Plex Mono ноль нарисован с точкой внутри (три контура вместо двух),
   чтобы не спутать его с буквой O. Отключить точку нечем: Google отдаёт
   урезанные файлы без стилевых наборов. Табличные знаки Plex Sans держат
   ту же ровную колонку цифр, а ноль остаётся обычным.
   Имена --mono и .mono оставлены: они стоят в разметке сотен тысяч
   страниц и означают «числовой набор», а не «моноширинный шрифт». */
.mono{font-family:"IBM Plex Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.lbl{font:600 10px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}

/* ---------- шапка ---------- */
.top{display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:center;
  background:var(--panel);border:1px solid var(--edge);border-radius:14px;
  padding:var(--s5) 26px}
.top h1{font-size:clamp(23px,4vw,33px);font-weight:800;letter-spacing:-.02em}
/* Что за объект перед вами. Стоит над названием отдельной строкой:
   в одну строку с именем оно читалось бы как часть названия. */
.top h1 .kind{display:block;margin-bottom:5px;
  font:600 11px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.crumb{color:var(--faint);font-size:12px;margin-bottom:var(--s2)}
.meta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.chip{background:var(--panel2);border:1px solid var(--edge);border-radius:999px;
  padding:5px 12px;font-size:12.5px;color:var(--dim)}
.chip b{color:var(--ink);font-weight:600}
/* Кнопка покупки: та же зелень, что у «Выгрузить» в каталоге — один
   язык у всех мест, где с сайта уходят за файлом. */
.buy{display:inline-flex;align-items:center;gap:7px;min-height:30px;
  padding:0 13px;border-radius:999px;border:1px solid rgba(52,211,153,.4);
  background:rgba(52,211,153,.11);color:#6ee7b7;text-decoration:none;
  font:600 12.5px/1 "IBM Plex Sans",sans-serif;white-space:nowrap;
  transition:background .18s ease,border-color .18s ease}
.buy:hover{background:rgba(52,211,153,.19);border-color:rgba(52,211,153,.65)}
.buy svg{width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Кнопка «Следить» рядом с выгрузкой: нейтральная, пока слежения нет,
   фирменный синий — когда есть. Состояние приходит с сервера скриптом
   (card.js) и только у вошедших: страница статическая, одна на всех. */
/* Ряд действий в шапке. Раньше три элемента стояли подряд без обёртки,
   и «Сравнить» с «Историей» — подчёркнутые ссылки с собственным
   отступом сверху — висели ниже таблеток «Выгрузить» и «Следить»
   и читались как случайные линии. Один flex-ряд, один вид у всех. */
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.tool{display:inline-flex;align-items:center;min-height:30px;padding:0 13px;
  border-radius:999px;border:1px solid var(--edge);background:var(--panel2);
  color:var(--dim);text-decoration:none;white-space:nowrap;
  font:600 12.5px/1 "IBM Plex Sans",sans-serif;
  transition:color .18s ease,border-color .18s ease}
.tool:hover{color:var(--ink);border-color:#3a4457}

/* Нажатие. Без него кнопка отзывается только наведением, а на тач-экране
   наведения нет вовсе: палец жмёт, и до ответа сервера ничего не меняется.
   Сдвиг на пиксель вниз и лёгкое затемнение — отклик за 0 мс, без анимации,
   поэтому и при prefers-reduced-motion остаётся на месте. */
.buy:active,.watch:active:not([disabled]),.tool:active,.tab:active,.cp:active,.cpall:active{transform:translateY(1px) scale(.985);filter:brightness(.93)}

.watch{display:inline-flex;align-items:center;gap:7px;min-height:30px;
  padding:0 13px;border-radius:999px;border:1px solid var(--edge);
  background:var(--panel2);color:var(--dim);cursor:pointer;
  font:600 12.5px/1 "IBM Plex Sans",sans-serif;white-space:nowrap;
  transition:color .18s ease,border-color .18s ease,background .18s ease}
.watch svg{width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.watch:hover{color:var(--ink);border-color:#3a4457}
.watch.on{color:var(--brand-ink);border-color:var(--brand);
  background:rgba(37,99,235,.22)}
.watch.on svg{fill:var(--brand-lt);stroke:var(--brand-lt)}
.watch[disabled]{opacity:.55;cursor:progress}
.watch .off{display:none}
.watch.on .on-t{display:none}
.watch.on .off{display:inline}
.gauge{text-align:center}
.gauge .val{font:800 30px/1 Onest,sans-serif;fill:var(--ink)}
.gauge .cap{font:600 9px/1 "IBM Plex Sans",system-ui,sans-serif;fill:var(--faint);letter-spacing:.13em}

/* ---------- вкладки ---------- */
.tabs{position:sticky;top:0;z-index:20;background:rgba(10,12,18,.93);
  backdrop-filter:blur(10px);margin:var(--s4) 0 var(--s4);
  border-bottom:1px solid var(--edge);overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tablist{display:flex;gap:var(--s1);min-width:max-content;padding:0 2px}
.tab{appearance:none;background:none;border:none;cursor:pointer;
  font:500 14px/1 "IBM Plex Sans",sans-serif;color:var(--faint);
  padding:14px var(--s4);min-height:46px;display:flex;align-items:center;
  gap:7px;white-space:nowrap;position:relative;
  transition:color .18s ease,background .18s ease;border-radius:8px 8px 0 0}
.tab svg{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tab:hover:not([disabled]){color:var(--ink);background:rgba(255,255,255,.04)}
.tab[aria-selected="true"]{color:var(--ink);font-weight:600}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:var(--s3);
  right:var(--s3);bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue))}
.tab[disabled]{color:#5b6479;cursor:not-allowed;opacity:.65}
.tab .dot{width:5px;height:5px;border-radius:50%;background:#4a5468;flex:none}

/* ---------- панели ---------- */
[role="tabpanel"][hidden]{display:none}
.grid{display:grid;gap:var(--s3);margin-bottom:var(--s3)}
.grid > *{min-width:0}
.g2{grid-template-columns:1fr 1fr}
@media(max-width:880px){.g2{grid-template-columns:1fr}.top{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:14px;
  padding:20px 22px;margin-bottom:var(--s3);
  /* Ячейка сетки по умолчанию не уже своего содержимого, а внутри
     карточки лежат таблицы с min-width:420px. На 375 px карточка
     растягивалась до 470 и уносила за край всю страницу — при том что
     у самой таблицы есть своя прокрутка (.tw). min-width:0 разрешает
     карточке сжаться, и прокручивается таблица, а не страница. */
  min-width:0}
.chead{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--s3);margin-bottom:18px}
.chead h2{font-size:17px;font-weight:600}
.chead h3{font-size:15px;font-weight:600}

/* ---------- индексы ---------- */
.ix{display:flex;align-items:center;gap:var(--s3);margin-bottom:13px}
.ix .nm{width:180px;flex:none;font-size:13.5px;color:var(--dim)}
.ix .track{flex:1;height:9px;background:#1e2434;border-radius:99px;overflow:hidden}
.ix .fill{display:block;height:100%;border-radius:99px;width:0;
  transition:width 1s cubic-bezier(.22,1,.36,1)}
.ix .n{width:52px;text-align:right;font:600 14px/1 "IBM Plex Sans",system-ui,sans-serif;
  font-variant-numeric:tabular-nums}
.f-a{background:linear-gradient(90deg,var(--cyan),var(--blue))}
.f-b{background:linear-gradient(90deg,var(--viol),var(--mag))}
.f-c{background:linear-gradient(90deg,var(--green),var(--cyan))}
.f-d{background:linear-gradient(90deg,var(--amber),var(--orange))}
.f-e{background:linear-gradient(90deg,var(--blue),var(--mag))}

/* ---------- место в отрасли ---------- */
.rank{margin-bottom:20px}
.rank:last-child{margin-bottom:0}
.rank__top{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:7px}
.rank__nm{font-size:13.5px;color:var(--dim)}
.rank__val{font:600 13px/1 "IBM Plex Sans",system-ui,sans-serif;color:var(--ink);
  font-variant-numeric:tabular-nums}
.rank__track{position:relative;height:8px;border-radius:99px;
  background:linear-gradient(90deg,
    var(--red) 0%, var(--red) 40%,
    var(--amber) 40%, var(--amber) 70%,
    var(--green) 70%, var(--green) 100%);
  opacity:.9}
.rank__fill{position:absolute;inset:0 auto 0 0;width:0;
  transition:width 1s cubic-bezier(.22,1,.36,1)}
.rank__dot{position:absolute;top:50%;right:-1px;width:14px;height:14px;
  border-radius:50%;background:var(--ink);border:2.5px solid var(--panel);
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 1px 4px rgba(0,0,0,.4);
  transform:translate(50%,-50%)}
@media(prefers-reduced-motion:reduce){.rank__fill{transition:none}}

/* ---------- графики ---------- */
.bars{display:flex;align-items:flex-end;gap:var(--s3);height:180px;
  padding:0 var(--s1);border-bottom:1px solid var(--edge)}
.bcol{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:7px;height:100%}
.bval{font:600 12px/1 "IBM Plex Sans",system-ui,sans-serif;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{width:100%;max-width:74px;border-radius:6px 6px 0 0;height:0;
  background:linear-gradient(180deg,var(--cyan),var(--blue));
  transition:height 1.1s cubic-bezier(.22,1,.36,1)}
.bx{display:flex;gap:var(--s3);padding:9px var(--s1) 0}
.bx span{flex:1;text-align:center;font:500 12px/1 "IBM Plex Sans",system-ui,sans-serif;color:var(--faint)}
/* Столбики выручки по годам. Подпись над столбиком набрана без
   переносов («704,0 млн»), и её минимальная ширина держала колонку:
   на 375 px восемь колонок растягивали ряд до 579 px и карточка
   разъезжалась вбок. Колонке разрешаем сжиматься, подписи — переноситься
   и уменьшиться; сам ряд остаётся один к одному с подписями годов. */
@media (max-width: 560px) {
  .bars, .bx { gap: var(--s1); }
  .bcol { min-width: 0; }
  /* Между числом и единицей стоит неразрывный пробел — «341,0 млн»
     остаётся одним словом, и перенос его не берёт. break-all даёт
     строке разорваться где угодно: на телефоне подпись встаёт
     в две строки, и ряд столбиков сжимается с 413 px до 297. */
  .bval { font-size: 10px; white-space: normal; word-break: break-all;
          line-height: 1.15; text-align: center; }
  .bx span { font-size: 10px; }
}

/* ---------- таблицы ---------- */
.tw{overflow-x:auto;margin:0 -6px}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:420px}
th{text-align:left;font:600 10px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);padding:0 var(--s2) 10px;
  border-bottom:1px solid var(--edge)}
td{padding:11px var(--s2);border-bottom:1px solid #1c2231;vertical-align:middle}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:rgba(255,255,255,.025)}
tr:last-child td{border-bottom:none}
td.r,th.r{text-align:right}
td.num{font-family:"IBM Plex Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.bname{font-weight:600}
.mini{height:6px;background:#1e2434;border-radius:99px;overflow:hidden;min-width:70px;display:block}
.mini i{display:block;height:100%;border-radius:99px;width:0;transition:width .8s ease-out}

/* ---------- свод «что мы проверили» ---------- */
/* Список фактов, а не плитки: важен порядок — тревожное сверху, — и
   читаемость строкой. Точка слева только помогает глазу, смысл несёт
   слово: цвет один ничего не значит (правило сквозное по справочнику). */
.chklist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.chk{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;
  line-height:1.5;color:var(--dim)}
.chk__dot{flex:none;font-size:9px;line-height:1.9;color:var(--faint)}
.chk--bad .chk__dot{color:var(--red)}
.chk--warn .chk__dot{color:var(--amber)}
.chk--up .chk__dot{color:var(--green)}
.chk__t b{color:var(--ink);font-weight:600}
.chk__s{color:var(--faint)}
@media(max-width:600px){.chk{font-size:13px}}

/* ---------- плитки ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:11px}
.tile{background:var(--panel2);border:1px solid var(--edge);border-radius:11px;padding:14px 15px}
.tile .k{font:600 9.5px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.tile .v{font:600 20px/1.15 "IBM Plex Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.tile .s{font-size:11.5px;color:var(--dim);margin-top:5px}
.up{color:var(--green)} .warn{color:var(--amber)} .bad{color:var(--red)}

.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;
  font:600 11px/1.5 "IBM Plex Sans",system-ui,sans-serif;white-space:nowrap}
.t-own{background:rgba(52,211,153,.15);color:#6ee7b7;border:1px solid rgba(52,211,153,.35)}
.t-con{background:rgba(232,121,249,.13);color:#f0abfc;border:1px solid rgba(232,121,249,.35)}
.note{margin-top:var(--s4);padding-top:15px;border-top:1px solid var(--edge);
  font-size:12.5px;color:var(--dim);line-height:1.65}
.src{font:500 10px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}

/* выгрузка раздела */
.dl{display:flex;align-items:center;gap:10px;margin-top:var(--s4);
  padding-top:15px;border-top:1px solid var(--edge);flex-wrap:wrap}
.dl button{appearance:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:8px;min-height:44px;padding:0 18px;border-radius:9px;
  border:1px solid rgba(52,211,153,.4);background:rgba(52,211,153,.11);
  color:#6ee7b7;font:600 13.5px/1 "IBM Plex Sans",sans-serif;
  transition:background .18s ease,border-color .18s ease}
.dl button:hover{background:rgba(52,211,153,.19);border-color:rgba(52,211,153,.65)}
.dl button svg{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dl .hint{font-size:12.5px;color:var(--faint)}

/* пустое состояние */
.empty{text-align:center;padding:44px 24px}
.empty svg{width:36px;height:36px;stroke:#4a5468;fill:none;stroke-width:1.5;margin-bottom:var(--s4)}
.empty h3{font-size:17px;margin-bottom:var(--s2)}
.empty p{color:var(--dim);font-size:13.5px;max-width:44ch;margin:0 auto;line-height:1.7}
.empty .what{margin-top:18px;padding:14px 18px;background:var(--panel2);
  border:1px solid var(--edge);border-radius:10px;font-size:12.5px;
  color:var(--dim);display:inline-block;text-align:left}

/* Оговорка внизу карточки — панелью. Селектор по элементу, поэтому
   исключаем общий подвал сайта: он тоже <footer>, но панелью быть
   не должен — иначе весь низ страницы уезжает в рамку с закруглением. */
footer:not(.foot){margin-top:var(--s5);padding:22px 24px;background:var(--panel);
  border:1px solid var(--edge);border-radius:14px;font-size:12.5px;
  color:var(--dim);line-height:1.75}
footer:not(.foot) b{color:var(--ink)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* --- гасим светлые правила общего шаблона --- */
/* Общий шаблон определяет свои токены светлой темы, а макет их не знает.
   Без переопределения .tile красился в --muted #6a6a7a и числа плиток
   выходили серыми на тёмном фоне. */
:root {
  --muted: var(--dim); --rule: var(--edge);
  --accent: var(--focus); --series-1: var(--blue);
}
.tile { color: var(--dim); }
.tile .v { color: var(--ink); }
.tile .v.up { color: var(--green); }
.tile .v.warn { color: var(--amber); }
.tile .v.bad { color: var(--red); }

main { max-width: 1200px; }
main > nav:first-of-type { font-size: 12px; color: var(--faint); margin-bottom: 14px; }
main > nav:first-of-type a { color: var(--faint); }
h1 { font-size: clamp(23px,4vw,33px); line-height: 1.15; }
a { color: var(--focus); }
.sub { color: var(--dim); }
thead th { text-transform: uppercase; }
tbody th {
  text-align: left; vertical-align: middle; width: 34%;
  font: 500 11px/1.4 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
  padding: 11px var(--s2); border-bottom: 1px solid #1c2231;
}
tbody tr:last-child th { border-bottom: none; }
.src, nav.hub { color: var(--faint); border-color: var(--edge); font-size: 12.5px; }
nav.hub a, .src a { color: var(--dim); }
.tag {
  border-color: var(--edge); color: var(--dim); background: var(--panel2);
  border-radius: 6px;
}
.tile { border-color: var(--edge); }

/* ---------------------------------------------------------------
   Шапка сайта на карточке: возврат домой, поиск, крошки.
   Поиска не было ни на одной из 187 851 страницы — человек, пришедший
   из поисковика, не мог искать дальше, не вернувшись на главную.
   --------------------------------------------------------------- */
.site {
  display: flex; align-items: center; gap: var(--s4);
  padding: 10px 0 14px; margin-bottom: var(--s4);
  border-bottom: 1px solid var(--edge);
}
.site .home {
  /* Начертание из гайдлайна: Montserrat Bold, «Chey» светлым и «Brend»
     синим. Прежний uppercase давал CHEYBREND — это уже другое имя. */
  display: flex; align-items: center; gap: 9px;
  font: 700 16px/1 Montserrat, Onest, "IBM Plex Sans", sans-serif;
  letter-spacing: -.01em;
  color: var(--brand-ink); text-decoration: none; white-space: nowrap;
}
.site .home img { display: block; height: 22px; width: auto; }
/* имя — один элемент строки: во flex-контейнере «Chey» и <span> разъехались
   бы на gap и читались как два слова */
.site .home b { font-weight: inherit; }
.site .home span { color: var(--brand-lt); }
.site .home:hover span { color: var(--focus); }
.site .find { position: relative; flex: 1; min-width: 0; max-width: 520px; }
.site .find input {
  width: 100%; height: 36px; padding: 0 12px;
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 9px;
  font: 400 13px/1 "IBM Plex Sans", sans-serif; outline: none;
}
.site .find input::placeholder { color: var(--faint); }
.site .find input:focus {
  border-color: var(--focus); box-shadow: 0 0 0 3px rgba(125, 211, 252, .16);
}
.site .adv {
  font: 400 12px/1 "IBM Plex Sans", sans-serif;
  color: var(--dim); text-decoration: none; white-space: nowrap;
}
.site .adv:hover { color: var(--focus); }
/* «Войти» — последняя ссылка шапки и единственная, ведущая в кабинет;
   отделяем её чертой, чтобы не читалась как ещё один раздел справочника.
   Вошедшему card.js меняет её на «Кабинет» — страница одна на всех. */
.site .adv--acct {
  padding-left: var(--s4); border-left: 1px solid var(--edge);
  color: var(--ink); font-weight: 500;
}

/* Видимых строк шесть, остальные листаются: подсказка отдаёт до тридцати
   совпадений (card_search.js). Высота под шесть строк с хвостиком седьмой,
   чтобы было видно продолжение. overscroll-behavior держит колесо внутри
   списка — иначе за ним уезжала бы сама карточка. */
.sugg {
  position: absolute; left: 0; right: 0; top: 42px; z-index: 40;
  margin: 0; padding: 5px; list-style: none; display: none;
  background: var(--panel); border: 1px solid var(--edge);
  border-radius: 11px; box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
  max-height: 222px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--edge) transparent;
}
.sugg::-webkit-scrollbar { width: 8px; }
.sugg::-webkit-scrollbar-thumb {
  background: var(--edge); border-radius: 99px;
  border: 2px solid var(--panel);
}
.sugg::-webkit-scrollbar-track { background: transparent; }
.sugg.open { display: block; }
.sugg li a {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: 8px 10px; border-radius: 7px;
  color: var(--ink); text-decoration: none;
  font: 400 13px/1.35 "IBM Plex Sans", sans-serif;
}
.sugg li a:hover { background: var(--panel2); }
.sugg li a b { font-weight: 500; }
.sugg li a span { color: var(--dim); font-size: 11.5px; white-space: nowrap; }
/* Третья строка подсказки: ИНН и регион. Названия юрлиц повторяются —
   «ООО АКВАМАРИН» в реестрах четыре штуки, — и без этой строки
   однофамильцы в списке неразличимы, выбирают наугад. */
.sugg li a { flex-wrap: wrap; }
.sugg li a i {
  flex: 0 0 100%; order: 3; font-style: normal; font-size: 11px;
  color: var(--faint); font-variant-numeric: tabular-nums;
}
/* Заголовок группы: выдача идёт из трёх источников сразу, и без
   разделителя строки тонкого слоя читались как продолжение списка
   марок. По нему не кликают — это не строка выбора. */
.sugg li.ghead {
  padding: 8px 10px 3px; cursor: default;
  font: 600 9.5px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
/* выдача расширенного поиска: список без маркеров, подпись под строкой */
.hits { list-style: none; margin: 0; padding: 0; }
.hits li { padding: 9px 0; border-bottom: 1px solid var(--edge); }
.hits li:last-child { border-bottom: 0; }
.hits .who {
  display: block; margin-top: 2px; color: var(--faint); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.sugg li.none {
  padding: 9px 10px; color: var(--dim);
  font: 400 12.5px/1.4 "IBM Plex Sans", sans-serif;
}

/* Ссылки шапки: в строку на широком экране, за кнопкой — на узком. */
.site { position: relative; }
.snav { display: flex; align-items: center; gap: var(--s4); margin-left: auto; }
.burger {
  display: none; width: 42px; height: 42px; padding: 0; border: 0;
  background: none; color: var(--ink); cursor: pointer; border-radius: 11px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .22s ease, opacity .18s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .burger span { transition: none; } }

@media (max-width: 720px) {
  /* Шапка карточки: заголовок слева, кнопка справа. На 375 px кнопка
     «Скопировать» не помещалась рядом с заголовком и вылезала за край
     карточки — ровно на свою ширину. Даём шапке переноситься: кнопка
     встаёт под заголовок и целиком видна. */
  .chead { flex-wrap: wrap; }
  .chead > :first-child { min-width: 0; flex: 1 1 100%; }
  .chead .cpall, .chead .src { flex: none; }

  /* Таблетки действий набраны в одну строку — «Справка с номерами
     документов · от 300 ₽» на 375 px уезжала за правый край экрана.
     Разрешаем перенос внутри кнопки: обрезанная цена хуже двух строк. */
  .buy, .tool, .watch {
    white-space: normal; text-align: center; max-width: 100%;
    min-height: 40px; padding-top: 8px; padding-bottom: 8px;
    line-height: 1.3;
  }
  .site { flex-wrap: wrap; gap: var(--s2); }
  .site .find { order: 3; flex: 1 0 100%; max-width: none; }
  /* Пять ссылок в узкую строку не встают, а прятать их совсем — значит
     оставить на карточке один выход: логотип. Уходят под кнопку. */
  .burger { display: flex; margin-left: auto; }
  .snav { display: none; }
  .site.open .snav {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; left: 0; right: 0; top: calc(100% - 6px); z-index: 30;
    margin: 0; padding: 8px; background: var(--panel);
    border: 1px solid var(--edge); border-radius: 16px;
    box-shadow: 0 28px 60px -28px rgba(0, 0, 0, .95);
  }
  .site.open .snav .adv {
    padding: 13px 14px; border-radius: 11px; font-size: 15px; color: var(--ink);
  }
  .site.open .snav .adv:active { background: var(--panel2); }
}

/* Срочность в таблице документов: до 30 дней красным, до 90 жёлтым.
   Архивная строка гасится — она не ошибка, по ней доказывают
   использование обозначения за прошлые годы. */
.tag.bad { color: var(--red); border-color: rgba(251, 113, 133, .4); }
.tag.warn { color: var(--amber); border-color: rgba(251, 191, 36, .4); }
tr.off { opacity: .55; }
tr.off .tag { color: var(--faint); }

/* ---------- копирование одним нажатием ----------
   Кнопка живёт внутри ячейки и до наведения почти не видна: реквизиты
   читают чаще, чем копируют, и ряд иконок отвлекал бы от самих цифр.
   На тач-устройствах наведения нет, поэтому там она видна всегда. */
.cp {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 2px; margin-left: 6px; vertical-align: -3px;
  color: var(--dim); opacity: .35;
  transition: opacity .15s ease, color .15s ease;
  line-height: 0; border-radius: 4px;
}
td:hover > .cp, th:hover > .cp, .chead:hover .cp, .cp:focus-visible { opacity: 1 }
.cp:hover { color: var(--brand-lt, #3b82f6); opacity: 1 }
.cp:focus-visible { outline: 2px solid var(--brand-lt, #3b82f6); outline-offset: 2px }
.cp svg { width: 13px; height: 13px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.cp.ok { color: #34d399; opacity: 1 }
.cp.bad { color: #f87171; opacity: 1 }
/* Галочку показываем подменой значка, а не текстом: ширина ячейки
   не должна прыгать при нажатии. */
.cp .v { display: none }
.cp.ok .v { display: inline }
.cp.ok .c { display: none }

/* Кнопка «скопировать всё» в шапке карточки — с подписью, её ищут глазами */
.cpall {
  appearance: none; cursor: pointer; font: 500 11.5px/1 inherit;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 7px;
  border: 1px solid var(--edge); background: transparent; color: var(--dim);
  transition: border-color .15s ease, color .15s ease;
}
.cpall:hover { border-color: var(--brand-lt, #3b82f6); color: var(--ink) }
.cpall.ok { border-color: #34d399; color: #34d399 }
.cpall svg { width: 13px; height: 13px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }

@media (hover: none) { .cp { opacity: .75 } }
@media (prefers-reduced-motion: reduce) { .cp, .cpall { transition: none } }

/* ---------- вкладка, в которой что-то есть ----------
   Тринадцать вкладок, и по виду не понять, где данные, а где «пока
   не подключено». Подсвечиваем те, что заполнены: подпись брендовым
   синим и мягкое свечение под ней. Не рамка и не точка — они бы
   спорили с индикатором выбранной вкладки. */
.tab.has { color: var(--brand-lt) }
.tab.has::after {
  content: ""; position: absolute; left: 50%; bottom: 4px;
  width: 60%; height: 10px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
              rgba(59, 130, 246, .40), transparent 70%);
  pointer-events: none; opacity: .9;
}
/* У выбранной вкладки своя подсветка снизу — две сразу читаются грязно. */
.tab[aria-selected="true"].has::after { opacity: 0 }
.tab.has:hover { color: var(--focus) }
@media (prefers-reduced-motion: reduce) { .tab.has::after { transition: none } }

/* ---------- закрытая часть списка ----------
   Не размытый текст под замком: размывать то, что всё равно лежит
   в разметке, — обман, который видно через «показать код», и клоакинг
   в глазах поисковика. Здесь честная заглушка: сколько строк осталось,
   почему их не показываем и чем открыть. */
.paywall {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: var(--s4); padding: 16px 18px; border-radius: 12px;
  border: 1px dashed var(--edge);
  background: linear-gradient(180deg, rgba(37, 99, 235, .07), transparent);
}
.paywall .pw-i { flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; background: rgba(37, 99, 235, .14);
  color: var(--brand-lt) }
.paywall .pw-i svg { width: 17px; height: 17px; stroke: currentColor;
  fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.paywall > div { flex: 1 1 260px; min-width: 0 }
.paywall b { display: block; color: var(--ink); font-size: 14px }
.paywall p { margin: 4px 0 0; color: var(--faint); font-size: 12.5px;
  line-height: 1.55 }
.paywall .buy { flex: none }

/* ============================================================
   Подвал сайта. Один на все страницы: статические разделы,
   карточки и то, что рисует сервер (кабинет грузит этот же файл).

   Крупный знак внизу — не украшение: это последний кадр страницы,
   и он должен называть, чей это справочник. Заливка знака градиентом
   бренда, при наведении светлая полоса проходит по буквам за 900 мс,
   тем же приёмом, что у кнопок. Бесконечной анимации нет: движение
   начинается от человека и заканчивается.
   ============================================================ */
/* Подвал стоит вне колонки страницы и центрует себя сам: внутри main
   на 840 px знак «CheyBrend» (кегль от ширины экрана) не помещался
   и обрезался по overflow. Ширина шире колонки намеренно — подвал
   держит ширину сайта, а не длину строки текста. */
.foot{border-top:1px solid var(--edge);margin-top:56px;padding:56px 0 0;
  position:relative;overflow:hidden}
/* Ширина ровно та же, что у main: подвал стоит вне колонки, но его
   столбцы обязаны начинаться там же, где заголовок страницы, иначе
   низ страницы выглядит съехавшим. */
.foot__in,.foot__mark,.foot__note{max-width:1200px;margin-left:auto;margin-right:auto}
.foot__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:36px 40px;margin-bottom:52px}
.foot__col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.foot__col b{font:600 11px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.foot__col a{color:var(--dim);font-size:14px;line-height:1.4;text-decoration:none;border-bottom:0;
  transition:color .18s ease}
.foot__col a:hover{color:var(--ink)}
.foot__col p{margin:0;color:var(--dim);font-size:13.5px;line-height:1.65}
.foot__col p a{font-size:inherit}

/* знак */
/* Знак повторяет шапку: «Chey» белым, «Brend» фирменным синим. Градиент
   только на второй половине — так знак читается как логотип, а не как
   декоративная надпись. Блик проходит по «Brend» при наведении. */
.foot__mark{display:block;text-decoration:none;border-bottom:0;line-height:.82;
  margin:0 auto 28px;padding-bottom:.06em;
  font:800 clamp(56px,13vw,190px)/.82 Onest,"IBM Plex Sans",sans-serif;
  letter-spacing:-.045em;white-space:nowrap;color:var(--brand-ink)}
.foot__mark span{
  background:linear-gradient(100deg,#1d4ed8 0%,#2563eb 22%,#60a5fa 44%,#22d3ee 58%,#3b82f6 78%,#1d4ed8 100%);
  background-size:280% 100%;background-position:78% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background-position .9s cubic-bezier(.22,1,.36,1)}
.foot__mark:hover span,.foot__mark:focus-visible span{background-position:8% 0}
/* мягкое свечение под знаком: тот же синий, что у кнопок */
.foot::after{content:"";position:absolute;left:0;right:0;bottom:-40%;height:70%;
  pointer-events:none;z-index:-1;
  background:radial-gradient(60% 100% at 50% 100%,rgba(37,99,235,.16),transparent 70%)}

.foot__note{margin:0 auto;padding:18px 0 32px;border-top:1px solid var(--edge);
  color:var(--faint);font-size:12.5px;line-height:1.65}
.foot__note a{color:var(--dim)}

/* Таблицы разделов лежат прямо в колонке, без обёртки .tw, которая есть
   у карточек. На узком экране четыре колонки с неразрывными числами
   требуют 420 px при 375 доступных, и вбок ехала вся страница вместе
   с подвалом. Даём такой таблице свою прокрутку — тот же приём, что .tw. */
@media (max-width:720px){
  /* min-width:0 обязателен: колонка — grid-контейнер, а у его детей
     автоматический минимум равен ширине содержимого (здесь 420 px),
     и прокрутка внутри таблицы без него не включается. Таблица бывает
     и внутри витрины раздела .hubgrid — там она тянет за собой всю
     сетку, включая колонку фасетов слева. */
  main > table,.hubgrid table{display:block;width:100%;min-width:0;
    overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hubgrid,.hubgrid > *{min-width:0}
}

@media (max-width:720px){
  .foot{margin-top:40px;padding-top:40px}
  .foot__in{gap:28px;margin-bottom:36px}
  .foot__mark{margin-bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  .foot__mark span{transition:none}
}