/* ===========================================================
   Технокомпас — тема поверх Bootstrap 5.3
   Патентно-информационный поиск.

   Все цвета, радиусы и тени задаются токенами в :root.
   Здесь же переопределяются переменные Bootstrap, поэтому
   штатные компоненты (.btn-primary, .form-control, .nav-pills)
   подхватывают тему без дополнительных классов.
   =========================================================== */

:root {
  /* Фирменные цвета */
  --ds-primary:      #c8102e;
  --ds-primary-600:  #a10c24;
  --ds-primary-050:  #fdeef0;

  /* Нейтральные */
  --ds-ink:          #16202e;
  --ds-logo:         #46403e;   /* надпись в логотипе — свой тёплый тон */
  --ds-ink-soft:     #3d4a5c;
  --ds-muted:        #64707f;
  --ds-line:         #e2e8f0;
  --ds-line-soft:    #eef2f6;
  /* Рамка поля ввода — темнее линий разметки: на белом фоне светло-серая
     граница просто не видна, и поле перестаёт читаться как поле.
     Контраст к белому около 3,5:1 — столько требуется границам
     элементов управления. */
  --ds-field:        #7a8798;
  --ds-field-hover:  #5d6b7d;
  /* Псевдоним для линий панелей: часть правил ссылается на него. */
  --ds-border:       #e2e8f0;
  --ds-surface:      #f6f8fb;
  --ds-surface-2:    #eef2f7;

  /* Статусы правовой охраны.
     «Прекращён» намеренно нейтрально-серый: красный занят фирменным цветом. */
  --ds-ok:           #17784c;
  --ds-ok-bg:        #e6f5ee;
  --ds-warn:         #96600a;
  --ds-warn-bg:      #fdf3e0;
  --ds-stop:         #56636f;
  --ds-stop-bg:      #eef1f4;

  /* Форма */
  --ds-radius:       .625rem;
  --ds-radius-lg:    1rem;
  --ds-shadow:       0 1px 2px rgba(22, 32, 46, .06), 0 8px 24px rgba(22, 32, 46, .06);
  --ds-shadow-sm:    0 1px 2px rgba(22, 32, 46, .08);

  /* Переопределение Bootstrap */
  --bs-primary: var(--ds-primary);
  --bs-primary-rgb: 200, 16, 46;
  --bs-body-color: var(--ds-ink);
  --bs-secondary-color: var(--ds-muted);
  --bs-body-bg: #fff;
  --bs-border-color: var(--ds-line);
  --bs-border-radius: var(--ds-radius);
  /* Bootstrap красит ссылки через *-rgb (a{color:rgba(var(--bs-link-color-rgb)…)}),
     поэтому одного --bs-link-color мало. */
  --bs-link-color: var(--ds-primary);
  --bs-link-color-rgb: 200, 16, 46;
  --bs-link-hover-color: var(--ds-primary-600);
  --bs-link-hover-color-rgb: 161, 12, 36;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: .9375rem;

  /* Используются .alert-primary и утилитами *-subtle */
  --bs-primary-text-emphasis: var(--ds-primary-600);
  --bs-primary-bg-subtle: var(--ds-primary-050);
  --bs-primary-border-subtle: rgba(200, 16, 46, .28);
}

body {
  -webkit-font-smoothing: antialiased;
  /* clip, а не hidden: не создаёт контекст прокрутки и не ломает sticky */
  overflow-x: clip;
}

:target { scroll-margin-top: 5.5rem; }

/* --- Типографика ------------------------------------------------------- */

h1, h2, h3, h4, h5 {
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ds-ink);
}

.text-muted-ds { color: var(--ds-muted) !important; }

.eyebrow {
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ds-primary);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* --- Каркас страницы --------------------------------------------------- */

.page-section { padding: 3.5rem 0; }
.page-section-lg { padding: 5rem 0; }
.bg-surface { background-color: var(--ds-surface); }
.bg-surface-2 { background-color: var(--ds-surface-2); }

.hr-soft {
  border: 0;
  border-top: 1px solid var(--ds-line);
  opacity: 1;
}

/* --- Шапка ------------------------------------------------------------- */

.ds-header {
  background: #fff;
  border-bottom: 1px solid var(--ds-line);
}

/* Логотип — одна картинка со знаком и надписью. Высота задаётся здесь,
   ширина считается из viewBox 506x64, поэтому пропорции не плывут. */
.ds-brand {
  display: inline-flex;
  align-items: center;
  color: var(--ds-logo);
  text-decoration: none;
}

.ds-brand svg {
  display: block;
  height: 1.75rem;
  width: auto;
  max-width: 100%;
}

.ds-brand:hover { color: var(--ds-primary); }

/* На узких экранах рядом с логотипом ещё кнопка меню */
@media (max-width: 575.98px) {
  .ds-brand svg { height: 1.5rem; }
}

.ds-header .nav-link {
  color: var(--ds-ink-soft);
  font-weight: 500;
  padding-inline: .85rem;
  border-radius: var(--ds-radius);
}

.ds-header .nav-link:hover { color: var(--ds-primary); background: var(--ds-primary-050); }
.ds-header .nav-link.active { color: var(--ds-primary); font-weight: 600; }

/* --- Поисковая строка -------------------------------------------------- */

.searchbar {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.searchbar:focus-within {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 .2rem rgba(200, 16, 46, .16);
}

.searchbar .form-control,
.searchbar .form-select {
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  background: transparent;
}

.searchbar .form-select {
  flex: 0 0 auto;
  width: auto;
  color: var(--ds-muted);
  border-right: 1px solid var(--ds-line);
  font-size: .875rem;
}

.searchbar .btn {
  border-radius: 0;
  padding-inline: 1.5rem;
  font-weight: 600;
  /* иначе на узком контейнере иконка переносится под подпись */
  white-space: nowrap;
}

.searchbar-lg .form-control { font-size: 1.0625rem; padding: 1rem 1.125rem; }
.searchbar-lg .btn { padding-inline: 2rem; }

/* --- Первый экран ------------------------------------------------------ */

.hero {
  position: relative;
  padding: 4rem 0 3.5rem;
  background:
    radial-gradient(90% 120% at 50% -10%, rgba(200, 16, 46, .1), transparent 62%),
    var(--ds-surface);
  border-bottom: 1px solid var(--ds-line);
}

@media (min-width: 992px) {
  .hero { padding: 5.5rem 0 4.5rem; }
}

.hero-hints .badge {
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

/* --- Карточка документа ------------------------------------------------ */

.doc-card {
  position: relative;
  display: block;
  padding: 1.25rem 1.375rem;
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.doc-card:hover {
  border-color: rgba(200, 16, 46, .45);
  box-shadow: var(--ds-shadow);
  color: inherit;
}

.doc-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  font-size: .8125rem;
  color: var(--ds-muted);
}

.doc-card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  margin: .5rem 0 .5rem;
  color: var(--ds-ink);
  /* Заголовок стоит в строке с галочкой отбора и кнопкой избранного.
     Без min-width гибкий блок не ужимается меньше самого длинного
     слова, и на узком экране кнопка уезжает за край. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.doc-card:hover .doc-card__title { color: var(--ds-primary); }

.doc-card__abstract {
  font-size: .875rem;
  line-height: 1.65;
  color: var(--ds-ink-soft);
  margin-bottom: .75rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Совпадения в фрагментах выдачи сервер обёртывает в <b> */
.doc-card__abstract b {
  font-weight: 600;
  color: var(--ds-primary-600);
  background: var(--ds-primary-050);
  border-radius: .1875rem;
  padding: 0 .0625rem;
}

.doc-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  font-size: .8125rem;
  color: var(--ds-muted);
  padding-top: .75rem;
  border-top: 1px solid var(--ds-line-soft);
}

.doc-card mark {
  padding: 0 .125rem;
  background: #fff2c4;
  color: inherit;
  border-radius: 2px;
}

/* --- Статусы ----------------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .1875rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
}

.status::before {
  content: "";
  width: .4375rem;
  height: .4375rem;
  border-radius: 50%;
  background: currentColor;
}

.status-active   { color: var(--ds-ok);   background: var(--ds-ok-bg); }
.status-pending  { color: var(--ds-warn); background: var(--ds-warn-bg); }
.status-expired  { color: var(--ds-stop); background: var(--ds-stop-bg); }
/* Не работает и не должен: разовое задание между запусками. */
.status-idle     { color: var(--ds-muted); background: var(--ds-surface-2); }
/* Сломалось. Красный здесь оправдан: рядом в панели той же тревоги
   набрано предупреждение, и серая отметка рядом с ним читалась бы
   как «ничего страшного». */
.status-fatal    { color: #a4132b; background: #fdeaed; }

/* --- Метка МПК --------------------------------------------------------- */

.ipc {
  display: inline-block;
  padding: .125rem .4375rem;
  border: 1px solid var(--ds-line);
  border-radius: .3125rem;
  background: var(--ds-surface);
  font-size: .75rem;
  color: var(--ds-ink-soft);
}

/* --- Фильтры ----------------------------------------------------------- */

/* Подпись фильтра делит строку с переключателем «И / ИЛИ» */
.param-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .375rem;
}

.op-group .btn {
  --bs-btn-padding-y: .0625rem;
  --bs-btn-padding-x: .4375rem;
  --bs-btn-font-size: .6875rem;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--ds-muted);
  --bs-btn-border-color: var(--ds-line);
  --bs-btn-hover-color: var(--ds-primary-600);
  --bs-btn-hover-bg: var(--ds-primary-050);
  --bs-btn-hover-border-color: rgba(200, 16, 46, .3);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ds-primary);
  --bs-btn-active-border-color: var(--ds-primary);
  letter-spacing: .03em;
}

/* Пальцем в кнопку высотой 21 px не попасть — на сенсорных экранах
   увеличиваем, места в строке хватает даже при 320 px. */
@media (pointer: coarse) {
  .op-group .btn {
    --bs-btn-padding-y: .3125rem;
    --bs-btn-padding-x: .75rem;
  }
}

.filters {
  position: sticky;
  top: 5.5rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: #fff;
}

/* Панель фильтров не выше окна, и список параметров в ней
   прокручивается сам.

   Раньше панель росла вместе с числом параметров: на инструменте
   с десятком полей её низ уходил за нижний край экрана, а sticky
   держит только верх — до кнопок «Найти» и «Очистить фильтры»
   было не добраться, пока не долистаешь всю страницу.

   Прокручивается именно список параметров, а заголовок и кнопки
   стоят на месте. Кнопка поиска показывает ход поиска (см. .is-busy),
   и уехавший за край признак показывать некому.

   Только на широком экране: ниже 992 точек колонки складываются
   в одну, панель идёт над выдачей, и ограничивать её высотой окна
   значило бы прокручивать страницу внутри страницы. */
@media (min-width: 992px) {
  .filters {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 7rem);
    /* Полоса прокрутки внутри не должна рисоваться поверх
       скруглённого угла. */
    overflow: hidden;
  }

  .filters > .tool-params {
    flex: 1 1 auto;
    min-height: 0;            /* иначе flex не даст блоку сжаться */
    overflow-y: auto;
    /* Докрутив список до края, не увозим за собой страницу. */
    overscroll-behavior: contain;
  }

  .filters > .filters__group:not(.tool-params) { flex: 0 0 auto; }

  /* Полоса тонкая и серая: она внутри карточки, и стандартная
     системная выглядела бы здесь тяжело. */
  .filters > .tool-params {
    scrollbar-width: thin;
    /* Место под полосу занято всегда: иначе поля дёргаются вбок
       в тот момент, когда список становится длиннее окна. */
    scrollbar-gutter: stable;
  }

  .filters > .tool-params::-webkit-scrollbar { width: 8px; }

  .filters > .tool-params::-webkit-scrollbar-thumb {
    background: var(--ds-line);
    border: 2px solid #fff;
    border-radius: 4px;
  }

  .filters > .tool-params::-webkit-scrollbar-thumb:hover { background: var(--ds-muted); }
}

.filters__group + .filters__group { border-top: 1px solid var(--ds-line-soft); }
.filters__group { padding: 1.125rem 1.25rem; }

.filters__title {
  font-size: .8125rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ds-muted);
  margin-bottom: .75rem;
}

/* --- Плитка показателя ------------------------------------------------- */

.stat-tile {
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: #fff;
  height: 100%;
}

.stat-tile__value {
  /* Длинные числа («3 412 780») не помещаются в col-6 на узких экранах,
     поэтому кегль плавающий. */
  font-size: clamp(1.25rem, 4.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ds-ink);
}

.stat-tile__label {
  font-size: .8125rem;
  color: var(--ds-muted);
  margin-top: .25rem;
}

/* Пока показатель не пришёл, на его месте слово, а не число.
   Кегль меньше и цвет приглушён: иначе «загружается» выглядело бы
   как значение показателя, набранное крупно и жирно. Высота плитки
   не меняется — от строки к строке ряд не прыгает. */
.stat-tile__value--wait {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ds-muted);
  animation: ds-fade 1.4s ease-in-out infinite;
}

/* Не загрузилось — так и говорим. Оставить «загружается» навсегда
   значит соврать: ждать уже нечего. Вид тот же, что у ожидания,
   но без мигания: мигает то, что вот-вот изменится. */
.stat-tile__value--failed {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ds-muted);
}

@keyframes ds-fade {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* --- Иконка в кружке --------------------------------------------------- */

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ds-radius);
  background: var(--ds-primary-050);
  color: var(--ds-primary);
  font-size: 1.25rem;
  flex: 0 0 auto;
}

/* --- Аватар ------------------------------------------------------------ */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ds-primary);
  color: #fff;
  font-weight: 650;
  letter-spacing: .01em;
  flex: 0 0 auto;
  overflow: hidden;
}

.avatar-sm { width: 2rem;   height: 2rem;   font-size: .8125rem; }
.avatar-md { width: 3rem;   height: 3rem;   font-size: 1rem; }
.avatar-lg { width: 5.5rem; height: 5.5rem; font-size: 1.75rem; }

/* --- Профиль ----------------------------------------------------------- */

.profile-cover {
  background:
    radial-gradient(80% 140% at 15% 0%, rgba(200, 16, 46, .16), transparent 60%),
    var(--ds-surface);
  border-bottom: 1px solid var(--ds-line);
  padding: 2.5rem 0 0;
}

.profile-tabs .nav-link {
  color: var(--ds-muted);
  font-weight: 550;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: .875rem .25rem;
  margin-right: 1.75rem;
}

.profile-tabs .nav-link:hover { color: var(--ds-ink); }

.profile-tabs .nav-link.active {
  color: var(--ds-primary);
  background: transparent;
  border-bottom-color: var(--ds-primary);
}

/* --- Личный кабинет ---------------------------------------------------- */

.side-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  color: var(--ds-ink-soft);
  font-weight: 500;
  border-radius: var(--ds-radius);
  padding: .5625rem .75rem;
}

.side-nav .nav-link:hover { background: var(--ds-surface); color: var(--ds-ink); }

.side-nav .nav-link.active {
  background: var(--ds-primary-050);
  color: var(--ds-primary);
  font-weight: 600;
}

.side-nav .nav-link i { font-size: 1rem; }

.panel {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: #fff;
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ds-line-soft);
}

.panel__title { font-size: 1rem; font-weight: 650; margin: 0; }
.panel__body { padding: 1.25rem; }

.list-rows { list-style: none; margin: 0; padding: 0; }

.list-rows > li {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
}

.list-rows > li + li { border-top: 1px solid var(--ds-line-soft); }
.list-rows > li:hover { background: var(--ds-surface); }

/* --- Библиотека элементов ---------------------------------------------- */

.kit-nav {
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 7rem);
  max-height: calc(100svh - 7rem);   /* мобильная Safari: 100vh больше видимой области */
  overflow-y: auto;
}

.kit-nav .nav-link {
  padding: .3125rem 0 .3125rem .75rem;
  font-size: .875rem;
  color: var(--ds-muted);
  border-left: 2px solid var(--ds-line);
}

.kit-nav .nav-link:hover { color: var(--ds-ink); }

.kit-nav .nav-link.active {
  color: var(--ds-primary);
  border-left-color: var(--ds-primary);
  font-weight: 600;
}

.kit-section + .kit-section { margin-top: 3.5rem; }

.kit-demo {
  padding: 1.5rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius) var(--ds-radius) 0 0;
  background: #fff;
}

.kit-demo + .kit-code { margin-top: -1px; }

.kit-code {
  margin: 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ds-line);
  border-radius: 0 0 var(--ds-radius) var(--ds-radius);
  background: var(--ds-surface);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--ds-ink-soft);
  overflow-x: auto;
}

.kit-code code { color: inherit; white-space: pre; }

.swatch {
  height: 4.5rem;
  border-radius: var(--ds-radius);
  border: 1px solid rgba(22, 32, 46, .08);
}

.swatch-name { font-size: .8125rem; font-weight: 600; margin-top: .5rem; }
.swatch-var  { font-size: .75rem; color: var(--ds-muted); }

/* --- Подвал ------------------------------------------------------------ */

.ds-footer {
  background: var(--ds-ink);
  color: rgba(255, 255, 255, .62);
  padding: 3rem 0 1.75rem;
  font-size: .875rem;
}

.ds-footer h6 {
  color: #fff;
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.ds-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.ds-footer a:hover { color: #fff; }
/* На тёмном подвале надпись белая: цвет берётся из currentColor,
   поэтому достаточно перекрасить ссылку. Компасы в знаке свои
   и остаются как есть. */
.ds-footer .ds-brand { color: #fff; }
.ds-footer .ds-brand:hover { color: #fff; opacity: .85; }
.ds-footer .ds-brand b { color: #ff9aa5; }

.ds-footer__bottom {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8125rem;
}

/* --- Мелочи ------------------------------------------------------------ */

.btn { font-weight: 550; }

.form-control, .form-select {
  border-color: var(--ds-field);
  padding: .5625rem .8125rem;
}

/* Наведение и нажатие делают рамку ещё темнее: видно, что поле живое. */
.form-control:hover, .form-select:hover { border-color: var(--ds-field-hover); }

.form-control:focus, .form-select:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 .2rem rgba(200, 16, 46, .16);
}

.form-control:disabled, .form-select:disabled { border-color: var(--ds-line); }

/* Галочки и переключатели — те же правила: пустой квадратик со светлой
   рамкой на белом фоне не виден вовсе. */
.form-check-input {
  border-color: var(--ds-field);
  border-width: 1.5px;
}

.form-check-input:hover:not(:checked):not(:disabled) { border-color: var(--ds-field-hover); }
.form-check-input:disabled { border-color: var(--ds-line); }

.form-label { font-weight: 550; font-size: .875rem; margin-bottom: .375rem; }

.table > :not(caption) > * > * { padding: .75rem .875rem; }
.table thead th {
  font-size: .8125rem;
  font-weight: 650;
  color: var(--ds-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Конкуренты и партнёры --------------------------------------------- */

.party {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: .75rem 1.25rem;
  padding: .875rem 0;
  border-bottom: 1px solid var(--ds-line-soft);
}

.party:last-child { border-bottom: 0; }

.party__main { flex: 1 1 16rem; min-width: 0; }
.party__names { overflow-wrap: anywhere; }

/* Показатели портфеля: три подписанных числа в ряд.
   flex-wrap обязателен: при 320 px три подписи вроде «ПОЛЕЗНЫЕ
   МОДЕЛИ» в строку не помещаются и выдавливают страницу вбок. */
.party__counts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: 0;
  min-width: 0;
  flex: 0 1 auto;
}

.party__counts dt {
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ds-muted);
  white-space: nowrap;
}

.party__counts dd {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.party__actions {
  display: flex;
  gap: .375rem;
  flex: 0 0 auto;
}

/* На узком экране числа уходят под название, а не жмутся в строку */
@media (max-width: 575.98px) {
  .party__counts { gap: .5rem 1rem; }
  .party__counts dd { font-size: 1rem; }
  .party__counts dt { white-space: normal; }
}

/* Список написаний в окне правки: прокручиваемый, отмеченные сверху */
.party-names {
  max-height: 16rem;
  overflow-y: auto;
  padding: .5rem .75rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
}

.party-names__row { margin-bottom: .25rem; }
.party-names__row:last-child { margin-bottom: 0; }
.party-names .form-check-label { overflow-wrap: anywhere; }

/* Поля показателей: подпись «Сила патентного портфеля» длиннее
   прочих и переносится на две строки — выравниваем поля по низу,
   иначе ряд получается ступенькой. */
.party-metrics > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.party-metrics .form-label { margin-top: auto; }

/* --- Наборы и патентные исследования в кабинете ------------------------ */

.set,
.study {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--ds-border, #e3e3e3);
}

.set:last-child,
.study:last-child { border-bottom: 0; }

.set__main,
.study__main { flex: 1 1 16rem; min-width: 0; }

.set__actions,
.study__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

/* Таблицы регламента и журнала шире колонки кабинета: прокручиваем
   их саму таблицу, а не страницу. */
.table-scroll { overflow-x: auto; margin-bottom: .75rem; }
.table-scroll table { min-width: 46rem; }

.study-editor {
  padding-top: 1rem;
  border-top: 2px solid var(--ds-border, #e3e3e3);
}

/* --- Отбор документов в выдаче ----------------------------------------- */

/* Панель показывается, только когда что-то отмечено: пустая полоса
   над выдачей занимала бы место зря. */
.pick-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--ds-border, #e3e3e3);
  border-radius: .5rem;
  background: var(--ds-surface-2, #faf7f7);
}

.pick-bar__count { font-weight: 600; }

.pick-bar__actions,
.pick-bar__set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.pick-bar__set select { max-width: 14rem; }

/* Галочка отбора: у самого заголовка, чтобы не путать с избранным.
   Поле для нажатия больше самой галочки — на телефоне в 16 пикселей
   попасть трудно. */
.doc-card__pick {
  display: flex;
  align-items: flex-start;
  padding: .4rem .5rem .4rem 0;
  margin: -.4rem 0 -.4rem 0;
  cursor: pointer;
}

.detail-actions__export { margin-left: .25rem; }

@media (max-width: 575.98px) {
  .pick-bar { font-size: .875rem; }
  .pick-bar__set select { max-width: 100%; }
}

/* --- Карточка документа справа ----------------------------------------- */

.detail-panel {
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 7rem);
  max-height: calc(100svh - 7rem);
  display: flex;
  flex-direction: column;
}

@media (max-width: 991.98px) {
  .detail-panel { position: static; max-height: none; }
}

.detail-panel .panel__body {
  overflow-y: auto;
}

.detail-list {
  margin: 0 0 1.25rem;
  font-size: .875rem;
}

.detail-row {
  display: flex;
  gap: .75rem;
  padding: .4375rem 0;
  border-bottom: 1px solid var(--ds-line-soft);
}

.detail-row:last-child { border-bottom: 0; }

.detail-row dt {
  flex: 0 0 9rem;
  font-weight: 500;
  color: var(--ds-muted);
}

.detail-row dd {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.detail-subtitle {
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-muted);
  margin: 1.25rem 0 .625rem;
}

/* Выбранная карточка в выдаче */
.doc-card.is-selected {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 1px var(--ds-primary) inset;
}

/* Кнопка поиска во время запроса */
.btn.is-busy {
  position: relative;
  color: transparent !important;
}

.btn.is-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -.5rem 0 0 -.5rem;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ds-spin .7s linear infinite;
}

@keyframes ds-spin { to { transform: rotate(360deg); } }

/* Панель параметров инструмента */
.tool-params .form-label { font-size: .8125rem; }
.tool-params .form-text { font-size: .75rem; }


/* ===========================================================
   Перекраска компонентов Bootstrap

   Bootstrap 5.3 подставляет в .btn-primary и подобные литеральные
   значения (#0d6efd), а не var(--bs-primary), поэтому одной смены
   --ds-primary недостаточно: ниже переопределяются переменные
   самих компонентов. Все значения — из токенов темы, так что
   фирменный цвет по-прежнему меняется в одном месте.
   =========================================================== */

.btn-primary {
  --bs-btn-bg: var(--ds-primary);
  --bs-btn-border-color: var(--ds-primary);
  --bs-btn-hover-bg: var(--ds-primary-600);
  --bs-btn-hover-border-color: var(--ds-primary-600);
  --bs-btn-active-bg: var(--ds-primary-600);
  --bs-btn-active-border-color: var(--ds-primary-600);
  --bs-btn-disabled-bg: var(--ds-primary);
  --bs-btn-disabled-border-color: var(--ds-primary);
  --bs-btn-focus-shadow-rgb: 200, 16, 46;
}

.btn-outline-primary {
  --bs-btn-color: var(--ds-primary);
  --bs-btn-border-color: var(--ds-primary);
  --bs-btn-hover-bg: var(--ds-primary);
  --bs-btn-hover-border-color: var(--ds-primary);
  --bs-btn-active-bg: var(--ds-primary);
  --bs-btn-active-border-color: var(--ds-primary);
  --bs-btn-disabled-color: var(--ds-primary);
  --bs-btn-disabled-border-color: var(--ds-primary);
  --bs-btn-focus-shadow-rgb: 200, 16, 46;
}

.form-check-input:checked {
  background-color: var(--ds-primary);
  border-color: var(--ds-primary);
}

.form-check-input:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 .2rem rgba(200, 16, 46, .16);
}

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c8102e'/%3e%3c/svg%3e");
}

.progress, .progress-stacked { --bs-progress-bar-bg: var(--ds-primary); }

.pagination {
  --bs-pagination-color: var(--ds-primary);
  --bs-pagination-hover-color: var(--ds-primary-600);
  --bs-pagination-focus-color: var(--ds-primary-600);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(200, 16, 46, .16);
  --bs-pagination-active-bg: var(--ds-primary);
  --bs-pagination-active-border-color: var(--ds-primary);
}

.accordion {
  --bs-accordion-active-color: var(--ds-primary);
  --bs-accordion-active-bg: var(--ds-primary-050);
  --bs-accordion-btn-focus-border-color: var(--ds-primary);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(200, 16, 46, .16);
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c8102e'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.dropdown-menu { --bs-dropdown-link-active-bg: var(--ds-primary); }

.nav-pills { --bs-nav-pills-link-active-bg: var(--ds-primary); }

.list-group {
  --bs-list-group-active-bg: var(--ds-primary);
  --bs-list-group-active-border-color: var(--ds-primary);
}

/* Длинные тексты патента (формула, описание) в узкой колонке */
.detail-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: 1.65;
}

/* --- Карточка выдачи: сведения из get_patent ---------------------------- */

/* Классы в карточке: CPC и МПК идут раздельными группами,
   перед каждой — имя системы, как его вернул сервер */
.doc-card__class-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem;
  margin-right: .5rem;
}

.doc-card__class-system {
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: .04em;
  color: var(--ds-muted);
}

.doc-card__classes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  vertical-align: middle;
}

/* Класс МПК в карточке не должен рвать строку метаданных */
.doc-card__tech { font-size: .75rem; align-items: center; }
.doc-card__tech + .doc-card__tech { margin-top: .25rem !important; }

/* Группы технологий и слов в правой колонке: места хватает,
   поэтому подпись занимает свою строку над метками. */
.detail-tech { align-items: center; }
.detail-tech .doc-card__class-system { flex: 0 0 100%; }

/* Технологии и ключевые слова. Технологию выделяем заливкой —
   в одном поле сервер присылает и то и другое. */
.tech-chip { max-width: 100%; overflow-wrap: anywhere; }

.tech-chip--tech {
  background: var(--ds-primary-050);
  border-color: rgba(200, 16, 46, .22);
  color: var(--ds-primary-600);
  font-weight: 500;
}

/* Сколько меток не поместилось в карточку */
.doc-card__tech-more {
  align-self: center;
  font-size: .75rem;
  color: var(--ds-muted);
}

/* Подпись блока с припиской справа: сколько всего документов */
.detail-subtitle--split {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}

.detail-subtitle__note {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* Общее название семейства — один раз над списком */
.detail-patent__common {
  margin: -.25rem 0 .625rem;
  line-height: 1.45;
}

.detail-patent__more {
  padding: .25rem 0;
  margin-bottom: .5rem;
  font-size: .8125rem;
  text-decoration: none;
}

/* Тип документа в карточке выдачи — нейтральная метка,
   правовой статус здесь ни при чём */
.doc-card__type {
  color: var(--ds-ink-soft);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  font-weight: 500;
}

/* Точка у .status означает правовой статус — для типа документа
   она вводит в заблуждение, здесь вместо неё значок документа. */
.doc-card__type::before { display: none; }

/* Список документов в правой колонке: похожие, связанные, семейство.
   У записей появился заголовок, поэтому номер и дата стоят в строке,
   а название — под ними. */
.detail-patent {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .125rem .625rem;
  padding-bottom: .375rem;
  border-bottom: 1px solid var(--ds-line-soft);
}

.detail-patent:last-child { border-bottom: 0; padding-bottom: 0; }

.detail-patent__link {
  min-width: 0;
  text-decoration: none;
  display: block;
}

/* Строка без ссылки — приоритеты: номера заявок, а не документы
   в указателе, открывать по ним нечего */
.detail-patent__plain {
  min-width: 0;
}

/* В приоритетах номер не ведёт на документ, поэтому пунктир
   «ссылка на документ» снимается. Если номер стал ссылкой-поиском,
   у него своя штриховая линия от .facet-link — её оставляем. */
.detail-patent__plain span.detail-patent__number {
  border-bottom: 0;
  color: var(--ds-ink);
}

.detail-patent__plain a.detail-patent__number { color: var(--ds-ink); }

.detail-patent__number {
  font-weight: 600;
  border-bottom: 1px dotted currentColor;
}

/* Название длинное — две строки, дальше многоточие; полное в подсказке */
.detail-patent__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: .125rem;
  color: var(--ds-ink-soft);
  line-height: 1.4;
}

.detail-patent__link:hover .detail-patent__title { color: var(--ds-primary-600); }

.detail-patent__date {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Встроенный просмотр PDF в правой колонке */
.detail-pdf {
  display: block;
  width: 100%;
  height: 60vh;
  height: 60svh;
  min-height: 20rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
}

@media (max-width: 575.98px) {
  .detail-pdf { height: 50vh; height: 50svh; min-height: 16rem; }
}

/* Встроенный просмотр PDF на телефонах не работает ни в Safari, ни в
   Chrome для Android — вместо документа остаётся пустая рамка. Там
   показываем только кнопки «Открыть» и «Скачать». */
@media (max-width: 575.98px) and (pointer: coarse) {
  .detail-pdf { display: none; }
}

/* Классы CPC отличаются от МПК заливкой */
.ipc-cpc {
  background: var(--ds-primary-050);
  border-color: rgba(200, 16, 46, .22);
  color: var(--ds-primary-600);
}

.doc-card__pending {
  margin-top: .625rem;
  padding-top: .625rem;
  border-top: 1px solid var(--ds-line-soft);
  opacity: .75;
}

/* Длинные списки авторов не должны ломать подвал карточки.
   min-width: 0 обязателен: без него флекс-элемент не сжимается
   ниже ширины содержимого и многоточие не появляется. */
/* inline-block, а не inline-flex: во флекс-контейнере текстовые узлы
   становятся отдельными элементами, и пробелы вокруг них обрезаются —
   «Selten,Stefan» вместо «Selten, Stefan». */
.doc-card__footer > span {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

/* --- Ссылки-фасеты: поиск по значению ---------------------------------- */

.facet-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(200, 16, 46, .45);
  cursor: pointer;
}

.facet-link:hover,
.facet-link:focus-visible {
  color: var(--ds-primary);
  border-bottom-color: var(--ds-primary);
}

/* Метка классификации в роли ссылки */
.ipc.facet-link { border-bottom-style: solid; }
.ipc.facet-link:hover { border-color: var(--ds-primary); background: var(--ds-primary-050); }

/* Поле, в которое только что подставили значение */
.is-facet-set {
  border-color: var(--ds-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(200, 16, 46, .18);
}

/* --- Карточка как кнопка ------------------------------------------------ */

.doc-card[role="button"] { cursor: pointer; }

.doc-card:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
}

/* --- Сворачивание правой колонки --------------------------------------- */

.btn-icon {
  --bs-btn-padding-x: .375rem;
  --bs-btn-padding-y: .125rem;
  --bs-btn-color: var(--ds-muted);
  --bs-btn-hover-color: var(--ds-ink);
  --bs-btn-hover-bg: var(--ds-surface-2);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  line-height: 1;
}

/* Стрелки «назад/вперёд» по просмотренным документам в шапке колонки */
.detail-nav {
  display: inline-flex;
  align-items: center;
  gap: .125rem;
  padding-right: .375rem;
  margin-right: .125rem;
  border-right: 1px solid var(--ds-line);
}

.detail-nav__count {
  min-width: 2.75rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Недоступная стрелка гаснет, но с места не двигается */
.detail-nav .btn-icon:disabled {
  opacity: .35;
  pointer-events: none;
}

/* Список занимает освободившееся место */
@media (min-width: 992px) {
  #searchLayout.detail-hidden .search-results-col { width: 75%; }
}

/* Вложенные наборы полей (массив объектов в ответе get_patent) */
.detail-list--nested {
  margin-bottom: .5rem;
  padding: .625rem .75rem;
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
}

.detail-list--nested .detail-row { padding: .25rem 0; }
.detail-list--nested .detail-row:last-child { border-bottom: 0; }
.detail-list--nested dt { flex-basis: 7rem; font-size: .8125rem; }
.detail-list--nested dd { font-size: .8125rem; }

/* --- Вкладки над выдачей ----------------------------------------------- */

/* Кнопка «Сведения» стоит рядом с вкладками, поэтому линию под ними
   рисует общая полоса, а не сам список. */
.results-head {
  border-bottom: 1px solid var(--ds-line);
}

.results-head .nav-tabs {
  border-bottom: 0;
  margin-bottom: -1px;
  flex-wrap: nowrap;
}

.results-head .nav-link {
  padding: .5rem .875rem;
  font-size: .9375rem;
  white-space: nowrap;
  color: var(--ds-muted);
}

.results-head .nav-link:hover { color: var(--ds-primary); }

.results-head .nav-link.active {
  color: var(--ds-ink);
  font-weight: 600;
}

/* --- Вкладка «Статистика»: гистограммы группировок ---------------------- */

#statsCharts {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem .75rem;
  margin-bottom: .625rem;
}

.chart__title {
  margin: 0;
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-muted);
}

.chart__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

/* Имя — полоса — значение. Имени отдана доля ширины, а не жёсткая
   колонка: в узкой колонке иначе не остаётся места под полосу. */
.chart__row {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 14fr) auto;
  align-items: center;
  gap: .625rem;
}

.chart__name {
  min-width: 0;
  font-size: .8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart__track {
  height: .875rem;              /* тонкая полоса: данные, а не плашка */
  background: var(--ds-line-soft);
  border-radius: .125rem;
  overflow: hidden;
}

/* Категории номинальные, поэтому цвет у всех полос один: величину
   уже показывает длина. Закруглён только конец полосы, основание — нет. */
.chart__bar {
  display: block;               /* span тоже должен слушаться высоты */
  height: 100%;
  background: var(--ds-primary);
  border-radius: 0 .25rem .25rem 0;
}

.chart__row:hover .chart__bar { background: var(--ds-primary-600); }

.chart__value {
  font-size: .8125rem;
  color: var(--ds-ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chart__more {
  align-self: flex-start;
  padding: .25rem 0;
  margin-top: .375rem;
  font-size: .8125rem;
  text-decoration: none;
}

@media (max-width: 575.98px) {
  /* На телефоне имя занимает свою строку — иначе от полосы ничего
     не остаётся, а длинные названия организаций обрезаются до пары букв. */
  .chart__row {
    grid-template-columns: 1fr auto;
    gap: .125rem .625rem;
  }
  .chart__name { grid-column: 1 / -1; }
}

/* Полоса с переключателем в шапке правой колонки */
.panel__toolbar {
  padding: .625rem 1.25rem;
  border-bottom: 1px solid var(--ds-line-soft);
  background: var(--ds-surface);
  flex: 0 0 auto;
  /* Переключателей в полосе два — в узкой колонке они переносятся */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1rem;
}

.panel__toolbar .form-check-label { color: var(--ds-muted); cursor: pointer; }
.panel__toolbar .form-check-input { cursor: pointer; }

/* Ширины колонок при разных сочетаниях свёрнутого.
   Селекторы из двух классов идут ниже — у них выше специфичность. */
@media (min-width: 992px) {
  #searchLayout.results-hidden #detail { width: 75%; }

  #searchLayout.filters-hidden .search-results-col { width: 58.333333%; }
  #searchLayout.filters-hidden #detail { width: 41.666667%; }

  #searchLayout.filters-hidden.detail-hidden .search-results-col { width: 100%; }
  #searchLayout.filters-hidden.results-hidden #detail { width: 100%; }
}

/* --- Страницы входа и восстановления пароля ---------------------------- */

.auth-page {
  min-height: 100vh;
  min-height: 100svh;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(200, 16, 46, .08), transparent 60%),
    var(--ds-surface);
}

.auth-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  gap: 1.25rem;
}

.auth-card {
  width: 100%;
  max-width: 25rem;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow);
}

@media (min-width: 576px) {
  .auth-card { padding: 2.5rem; }
}

.auth-card .ds-brand { display: flex; }

.auth-footnote {
  margin: 0;
  font-size: .875rem;
}

.auth-footnote a {
  color: var(--ds-muted);
  text-decoration: none;
}

.auth-footnote a:hover { color: var(--ds-primary); }

/* --- Избранное ---------------------------------------------------------- */

.favorite-btn.is-active {
  color: var(--ds-primary);
  border-color: var(--ds-primary);
  background: var(--ds-primary-050);
}

/* Строка сохранённого запроса в кабинете */
.query-row {
  padding: 1rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: #fff;
}

.query-row:hover { border-color: rgba(200, 16, 46, .35); }

/* Список строк, где содержимое переносится в столбец */
.list-rows > li.flex-column { align-items: stretch; }

/* --- Схемы деления ------------------------------------------------------ */

.scheme-tree {
  list-style: none;
  margin: 0;
  padding: .5rem 0;
}

/* Вложенность передаётся отступом: дерево плоское в разметке, поэтому
   его можно перебирать одним циклом и не городить вложенные списки. */
.scheme-node {
  padding: .625rem 1.25rem .625rem calc(1.25rem + var(--depth, 0) * 1.5rem);
  border-top: 1px solid var(--ds-line-soft);
}

.scheme-node:first-child { border-top: 0; }
.scheme-node:hover { background: var(--ds-surface); }

.scheme-node__head {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.scheme-node__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem;
  min-width: 0;
}

/* Рубрика глубже первого уровня получает засечку слева */
.scheme-node[style*="--depth: 0"] .scheme-node__title { font-size: 1rem; }

.scheme-node__actions {
  margin-left: auto;
  display: flex;
  gap: .25rem;
  flex-shrink: 0;
}

.scheme-node__note { margin-top: .25rem; }

.scheme-node__queries {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--ds-line);
}

.scheme-node__queries li {
  font-size: .875rem;
  padding: .125rem 0;
}

.scheme-node__editor {
  margin-top: .75rem;
  padding: 1rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: #fff;
}

/* --- Страница избранного ----------------------------------------------- */

.favorite-card { cursor: pointer; }

.favorite-card__note {
  margin-top: .5rem;
  padding: .375rem .625rem;
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  color: var(--ds-ink-soft);
}

.favorite-card__tools {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--ds-line-soft);
}

.favorite-card:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
}

/* --- Страница помощи ---------------------------------------------------- */

/* Снимок экрана: рамка обязательна — у интерфейса белый фон, и без неё
   непонятно, где кончается картинка и начинается текст страницы. */
.help-shot {
  margin: 0 0 1.25rem;
}

.help-shot img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: #fff;
}

.help-shot figcaption {
  margin-top: .5rem;
  font-size: .8125rem;
  color: var(--ds-muted);
}

/* Нумерованные шаги: цифра крупнее обычной, шаги читаются вразбивку. */
.help-steps {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.help-steps > li {
  margin-bottom: .5rem;
}

.help-tip {
  margin: 1.25rem 0;
  padding: .875rem 1rem;
  border-left: 3px solid var(--ds-primary);
  border-radius: 0 var(--ds-radius) var(--ds-radius) 0;
  background: var(--ds-surface);
  font-size: .9375rem;
}

.help-faq dt {
  margin-top: 1rem;
  font-weight: 600;
}

.help-faq dd {
  margin: .25rem 0 0;
  color: var(--ds-ink-soft);
}

/* Таблицы помощи — связный текст, а не плотные графы отчёта: держать
   46 rem им незачем, пусть переносятся по ширине колонки. Полностью
   снимать предел тоже нельзя: на телефоне три колонки сжались бы
   в столбики по одному слову. */
.table-scroll.help-table table { min-width: 26rem; }

/* --- Сообщения ---------------------------------------------------------- */

/* Значок непрочитанных в меню. */
.nav-badge {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: .375rem;
  padding: 0 .3125rem;
  border-radius: 999px;
  background: var(--ds-primary);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  vertical-align: text-top;
}

.dialog-list { display: flex; flex-direction: column; }

.dialog {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--ds-line-soft);
}

.dialog:last-child { border-bottom: 0; }

.dialog__link {
  display: block;
  flex: 1 1 auto;
  min-width: 0;                       /* длинная строка не растягивает колонку */
  padding: .625rem .25rem;
  color: inherit;
  text-decoration: none;
}

.dialog__link:hover { color: var(--ds-primary); }

.dialog.is-open { background: var(--ds-surface); }

.dialog__name { display: block; font-weight: 600; font-size: .9375rem; }

.dialog__preview,
.dialog__time {
  display: block;
  overflow: hidden;
  color: var(--ds-muted);
  font-size: .8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog__unread {
  flex: 0 0 auto;
  min-width: 1.5rem;
  padding: .125rem .375rem;
  border-radius: 999px;
  background: var(--ds-primary);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
}

.contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .625rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
}

.contact__main { min-width: 0; }
.contact__actions { display: flex; flex: 0 0 auto; gap: .25rem; }

/* Лента переписки: прокручивается сама, чтобы форма ответа
   оставалась на виду и на невысоком экране. */
.thread {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  max-height: 26rem;
  margin: 0;
  overflow-y: auto;
  padding-right: .25rem;
}

.msg {
  max-width: 85%;
  padding: .5rem .75rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: #fff;
}

/* Свои письма — справа и с заливкой: видно, кто что писал,
   не вчитываясь в подписи. */
.msg--mine {
  align-self: flex-end;
  border-color: rgba(200, 16, 46, .25);
  background: var(--ds-surface);
}

.msg__body { overflow-wrap: anywhere; }

.msg__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .25rem;
  color: var(--ds-muted);
  font-size: .75rem;
}

.msg__delete {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-muted);
  line-height: 1;
}

.msg__delete:hover { color: var(--ds-stop); }

@media (max-width: 575.98px) {
  .msg { max-width: 100%; }
  .contact { flex-wrap: wrap; }
}

.contact__alias {
  display: flex;
  gap: .25rem;
  margin-top: .375rem;
}

.contact__alias .form-control { font-size: .8125rem; }

/* --- Графики панели администрирования ---------------------------------- */

/* Палитра рядов: первый — фирменный, дальше различимые оттенки.
   Девять хватает: больше слоёв в столбце всё равно не читается,
   остальное сводится в «прочие». */
:root {
  --series-1: #c8102e;
  --series-2: #1f6feb;
  --series-3: #2f9e44;
  --series-4: #e8590c;
  --series-5: #7048e8;
  --series-6: #0c8599;
  --series-7: #d6336c;
  --series-8: #5c7cfa;
  --series-9: #868e96;
}

.series-1 { background: var(--series-1); }
.series-2 { background: var(--series-2); }
.series-3 { background: var(--series-3); }
.series-4 { background: var(--series-4); }
.series-5 { background: var(--series-5); }
.series-6 { background: var(--series-6); }
.series-7 { background: var(--series-7); }
.series-8 { background: var(--series-8); }
.series-9 { background: var(--series-9); }

/* Столбики по дням. Высота задаётся в процентах от колонки,
   поэтому график не зависит от числа дней и не требует расчётов
   в браузере. */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 11rem;
  overflow-x: auto;
  /* Поля по краям — под подписи: у крайних столбцов подпись шире
     колонки и без них срезалась бы краем прокручиваемой области. */
  padding: 1rem .75rem 0;
}

.bars__col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 10px;
  height: 100%;
}

.bars__bar,
.bars__stack {
  width: 100%;
  min-height: 1px;
  border-radius: 2px 2px 0 0;
  background: var(--ds-primary);
}

.bars__stack {
  display: flex;
  flex-direction: column-reverse;   /* первый слой — снизу */
  overflow: hidden;
  background: none;
}

/* Дорожка под столбик.
   Проценты высоты меряются от неё, а не от всей колонки. Иначе
   подписи сверху и снизу отъедают место у самого высокого
   столбика — он сжимается, а низкий нет, — и ряд 100/50/25/10
   рисуется как 100/60/30/12. Подписи при этом не ужимаются:
   у них flex: none. */
.bars__track,
.bars__group {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

/* Подписи занимают место всегда, даже когда пустые: их ставят
   через одну, и без заданной высоты дорожка у столбца с подписью
   и без неё получалась разной — соседние столбики рисовались
   по разным шкалам. */
.bars__value,
.bars__day {
  flex: none;
  height: .625rem;
}

.bars__seg { width: 100%; }

/* Несколько рядов рядом: столбики одной доли времени стоят
   в общей ячейке и меряются от общего потолка. */
.bars--groups { gap: 4px; }

.bars--groups .bars__col { min-width: 16px; }

.bars__group { gap: 1px; }

/* Свой класс, а не .bars__bar: тому задан цвет, и он перебил бы
   .series-N — правила одинаковой силы, побеждает то, что ниже. */
.bars__gbar {
  flex: 1 1 0;
  min-height: 1px;
  border-radius: 2px 2px 0 0;
}

/* Подпись шире колонки не обрезаем: её ставят через одну, и лишнее
   уходит на соседний столбец, у которого подписи нет. Обрезка
   давала «1,3 мл» вместо «1,3 млн». */
.bars__value {
  margin-bottom: .125rem;
  color: var(--ds-muted);
  font-size: .625rem;
  line-height: 1;
  white-space: nowrap;
}

/* Скрытая подпись на узком экране всё равно держит высоту:
   иначе столбики опять поедут по разным шкалам. */
@media (max-width: 767.98px) {
  .bars__value { visibility: hidden; }
}

.bars__day {
  margin-top: .25rem;
  color: var(--ds-muted);
  font-size: .625rem;
  line-height: 1;
  white-space: nowrap;
}

/* Подписи значений на узких столбиках только мешают — прячем,
   но место за ними остаётся (см. visibility выше). */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin: .75rem 0 0;
  font-size: .8125rem;
  color: var(--ds-ink-soft);
}

.legend__item { display: flex; align-items: center; gap: .375rem; }

.legend__dot {
  width: .75rem;
  height: .75rem;
  border-radius: 3px;
}

/* Карта путей: ленты между страницами. */
.paths { overflow-x: auto; }

.paths svg { min-width: 640px; }

.paths__label {
  fill: var(--ds-ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* --- Заполненность базы ------------------------------------------------ */

/* Числа в таблицах заполненности не переносятся: «2 480 000»,
   разорванное на две строки, читается как два разных числа. */
.coverage-table .mono,
#coverageRows .mono { white-space: nowrap; }

/* Название страны — кнопка, открывающая разбор по кодам видов.
   Подчёркивание у неё от ссылки, так что действие видно. */
.coverage-open { text-decoration: underline; }

/* --- Граф связей документа --------------------------------------------- */

/* Кнопка под списком схожих документов. */
.detail-graph__open { margin-top: .25rem; }

/* Окно графа — во весь экран: связи документа на полосе шириной
   в правую колонку не читаются. */
.patent-graph__body {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.patent-graph__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  padding: .5rem 1rem;
  border-bottom: 1px solid var(--ds-line);
  background: var(--ds-surface);
}

.patent-graph__hint { flex: 1 1 18rem; }

.patent-graph__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  color: var(--ds-muted);
}

.patent-graph__legend-item {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}

.patent-graph__dot {
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  display: inline-block;
}

.patent-graph__dot--patent   { background: var(--ds-primary); }
.patent-graph__dot--inventor { background: #2f6db5; }
.patent-graph__dot--owner    { background: var(--ds-ok); }

.patent-graph__notice {
  padding: .375rem 1rem;
  color: var(--ds-warn);
  background: var(--ds-warn-bg);
  border-bottom: 1px solid var(--ds-line);
}

.patent-graph__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, var(--ds-line) 1px, transparent 0) 0 0 / 24px 24px;
}

.patent-graph__svg {
  display: block;
  width: 100%;
  height: 100%;
  /* Полотно тянут мышью, и без этого браузер начинает выделять подписи. */
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.patent-graph__edge {
  stroke: var(--ds-field);
  stroke-width: 1.25;
  stroke-opacity: .45;
}

.patent-graph__node { cursor: pointer; }

.patent-graph__node .patent-graph__dot-shape {
  fill: #fff;
  stroke-width: 2.5;
  transition: fill .15s ease;
}

.patent-graph__node--patent   .patent-graph__dot-shape { stroke: var(--ds-primary); }
.patent-graph__node--inventor .patent-graph__dot-shape { stroke: #2f6db5; }
.patent-graph__node--owner    .patent-graph__dot-shape { stroke: var(--ds-ok); }

/* Раскрытый узел залит: сразу видно, где граф уже достроен,
   а где клик ещё что-то добавит. */
.patent-graph__node--patent.is-open   .patent-graph__dot-shape { fill: var(--ds-primary-050); }
.patent-graph__node--inventor.is-open .patent-graph__dot-shape { fill: #e8f0f9; }
.patent-graph__node--owner.is-open    .patent-graph__dot-shape { fill: var(--ds-ok-bg); }

.patent-graph__node.is-seed .patent-graph__dot-shape {
  fill: var(--ds-primary);
  stroke: var(--ds-primary-600);
}

.patent-graph__node.is-current .patent-graph__dot-shape {
  stroke-width: 4;
}

.patent-graph__node.is-fail .patent-graph__dot-shape {
  stroke: var(--ds-stop);
  stroke-dasharray: 4 3;
}

.patent-graph__node.is-loading .patent-graph__dot-shape {
  stroke-dasharray: 6 4;
  animation: ds-fade 1.1s ease-in-out infinite;
}

.patent-graph__node:focus { outline: none; }

.patent-graph__node:focus-visible .patent-graph__dot-shape {
  stroke: var(--ds-ink);
  stroke-width: 4;
}

.patent-graph__label {
  fill: var(--ds-ink-soft);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.patent-graph__node--inventor .patent-graph__label,
.patent-graph__node--owner .patent-graph__label {
  font-family: inherit;
}

.patent-graph__node.is-seed .patent-graph__label { font-weight: 600; }

/* Плашка выбранного узла: висит рядом с ним, поверх полотна. */
.patent-graph__card {
  position: absolute;
  z-index: 2;
  width: 17rem;
  max-width: calc(100% - 1rem);
  padding: .625rem .75rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: #fff;
  box-shadow: var(--ds-shadow);
}

.patent-graph__card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Полные сведения — своё окно поверх графа, а не второе модальное:
   вложенные модальные окна Bootstrap ведут себя непредсказуемо. */
.patent-graph__sheet {
  position: absolute;
  z-index: 3;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  width: min(34rem, calc(100% - 2rem));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: #fff;
  box-shadow: var(--ds-shadow);
}

.patent-graph__sheet[hidden] { display: none; }

.patent-graph__sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--ds-line);
}

.patent-graph__sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

@media (max-width: 767.98px) {
  .patent-graph__hint { flex-basis: 100%; }
  .patent-graph__sheet { top: .5rem; right: .5rem; bottom: .5rem; left: .5rem; width: auto; }
  .patent-graph__card { width: 14rem; }
}

/* Кнопки масштаба: знаки «+» и «−» без подписи, поэтому ширину
   задаём сами, иначе они получаются разной величины. */
.patent-graph__zoom {
  min-width: 2.25rem;
  font-weight: 600;
  line-height: 1;
}

/* --- Метка технологии с кнопкой подробностей --------------------------- */

/* У метки два действия: имя ищет, кнопка открывает подробности.
   Внешне это по-прежнему одна метка — иначе в карточке, где меток
   с полдюжины, рябило бы от отдельных кнопок. */
.tech-chip--split {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding-right: .1875rem;
}

.tech-chip__name { overflow-wrap: anywhere; }

.tech-chip__more {
  display: inline-flex;
  align-items: center;
  padding: 0 .125rem;
  border: 0;
  border-left: 1px solid var(--ds-line);
  background: none;
  color: inherit;
  line-height: 1;
  opacity: .55;
}

.tech-chip--tech .tech-chip__more { border-left-color: rgba(200, 16, 46, .22); }

.tech-chip__more:hover,
.tech-chip__more:focus-visible { opacity: 1; color: var(--ds-primary); }

/* --- Окно сведений о технологии ---------------------------------------- */

.tech-card__kind { line-height: 1; }

/* Графиков в окне несколько, и разделены они так же, как на вкладке
   «Статистика», — расстоянием, а не линиями. */
.tech-card__charts {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* --- Линейный график по годам ------------------------------------------
   Год — величина непрерывная, поэтому ряд по нему читается линией,
   а не столбиками: видно не только «сколько», но и «куда идёт».
   Несколько рядов кладутся стопкой — верхний край даёт итог года,
   толщина полосы — вклад ряда. */

.chart__plot {
  position: relative;
  margin-bottom: .5rem;
}

.chart__plot svg { display: block; }

/* Сетка и подписи осей — служебные: их читают краем глаза,
   поэтому они тоньше и бледнее самих данных. */
.chart__grid {
  stroke: var(--ds-line-soft);
  stroke-width: 1;
}

.chart__tick {
  font-size: .6875rem;
  fill: var(--ds-muted);
}

.chart__line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Доля столбика. Просвет между долями режется геометрией, а не
   обводкой: обводка съедала бы долю и снаружи, а доля в один
   документ и так тонкая. */
.chart__seg { stroke: none; }

/* Подсветка года под курсором — подложка под столбиком, поэтому
   бледнее самой сетки: читают столбик, а не подсветку. */
.chart__band { fill: var(--ds-surface-2); }

.chart__band[hidden] { display: none; }

/* Точка там, где значение есть. Кольцо в цвет подложки не даёт
   точкам слиться, когда линии сходятся. */
.chart__dot {
  stroke: #fff;
  stroke-width: 2;
}

.chart__rule {
  stroke: var(--ds-field);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.chart__rule[hidden] { display: none; }

.chart__tip {
  position: absolute;
  top: 0;
  z-index: 2;
  pointer-events: none;
  min-width: 5rem;
  padding: .375rem .5rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: #fff;
  box-shadow: var(--ds-shadow-sm);
  font-size: .75rem;
  line-height: 1.5;
}

.chart__tip[hidden] { display: none; }

.chart__tip-year {
  font-weight: 650;
  color: var(--ds-ink);
}

/* Имя тянется, значение прижато вправо: числа читают столбцом. */
.chart__tip-row {
  display: flex;
  align-items: center;
  gap: .375rem;
  white-space: nowrap;
}

.chart__tip-name {
  flex: 1 1 auto;
  color: var(--ds-ink-soft);
}

.chart__tip-value { margin-left: auto; }

/* Цвет сам по себе именем не является, поэтому у каждой полосы
   стопки есть подпись в легенде. */
.chart__legend {
  list-style: none;
  margin: 0 0 .5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .125rem 1rem;
  font-size: .75rem;
  color: var(--ds-ink-soft);
}

.chart__legend-item {
  display: flex;
  align-items: center;
  gap: .375rem;
}

.chart__legend-total { color: var(--ds-muted); }

.chart__swatch {
  width: .625rem;
  height: .625rem;
  border-radius: .1875rem;
  flex: 0 0 auto;
}

/* Те же числа таблицей: часть цветов набора светлее контраста 3:1
   на белом, и одним цветом график держаться не может. */
.chart__table {
  font-size: .75rem;
  color: var(--ds-ink-soft);
}

.chart__table > summary {
  cursor: pointer;
  color: var(--ds-muted);
}

.chart__table > summary:hover { color: var(--ds-primary); }

.chart__table table {
  margin-top: .5rem;
  white-space: nowrap;
}

/* Столбцов у стопки столько же, сколько полос: на телефоне таблица
   прокручивается сама, а не растягивает окно. */
.chart__table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Наблюдения под графиком -------------------------------------------
   График показывает, что произошло; наблюдение говорит, что из этого
   следует. Поэтому оно стоит под графиком и набрано мельче: сначала
   смотрят, потом читают. */

.chart__notes {
  margin-top: .625rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

/* Свод обо всём окне — над графиками, в рамке: он о наборе целиком,
   а не о соседнем графике. */
.tech-card__summary {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: 1.5rem;
  padding: .75rem .875rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
}

/* Знак висит в своей колонке, а текст переносится ровным блоком,
   а не заезжает под значок. */
.chart__note {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: .375rem;
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ds-ink-soft);
}

.chart__note-mark {
  color: var(--ds-muted);
  line-height: 1.5;
}

/* Оговорка — о том, можно ли верить графику, поэтому цветом отделена
   от наблюдения. Не красным: это не ошибка страницы, а свойство
   данных. */
.chart__note--warn { color: var(--ds-warn); }

.chart__note--warn .chart__note-mark { color: var(--ds-warn); }

/* Справка, пришедшая отдельным запросом, появляется позже остальных.
   Проявление вместо скачка: строка, возникшая мгновенно, читается
   как ошибка отрисовки. */
.chart__notes--late {
  animation: chart-note-in .2s ease-out;
}

@keyframes chart-note-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chart__notes--late { animation: none; }
}

/* Ссылка на патент, пришедшая без кода страны: показать её надо,
   а вести ей некуда. Пунктир снизу отличает её от рабочей ссылки
   и от простого текста. */
.detail-patent__link--plain {
  color: var(--ds-ink-soft);
  text-decoration: underline dotted var(--ds-line);
  text-underline-offset: .2em;
  cursor: help;
}