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

/* ── Кнопки ── */

.btn {
  --btn-h: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--btn-h);
  padding-inline: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-snug);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

/* Нажатие смещает на пиксель. Этого достаточно, чтобы кнопка ощущалась
   физической; scale и тени здесь выглядят игрушечно. */
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.btn--primary {
  background: var(--c-accent);
  color: var(--c-text-on-accent);
  font-weight: var(--fw-semi);
}
.btn--primary:hover { background: var(--c-accent-hover); }
.btn--primary:active { background: var(--c-accent-active); }

/* Градиент — не более одной кнопки на экран, обычно главный CTA в hero */
.btn--hero {
  background: var(--g-accent);
  color: var(--c-text-on-accent);
  font-weight: var(--fw-semi);
  box-shadow: var(--sh-inset-top);
}
.btn--hero:hover { filter: brightness(1.06); }

.btn--secondary {
  background: var(--c-surface-2);
  border-color: var(--c-border-strong);
  color: var(--c-text);
}
.btn--secondary:hover {
  background: var(--c-surface-3);
  border-color: rgba(255, 255, 255, 0.18);
}

.btn--ghost { color: var(--c-text-secondary); }
.btn--ghost:hover { color: var(--c-text); background: var(--c-surface-2); }

.btn--danger {
  background: var(--c-danger-wash);
  border-color: color-mix(in srgb, var(--c-danger) 32%, transparent);
  color: var(--c-danger-bright);
}
.btn--danger:hover { background: color-mix(in srgb, var(--c-danger) 20%, transparent); }

.btn--lg { --btn-h: 3rem; padding-inline: var(--s-5); font-size: var(--t-base); }
.btn--sm { --btn-h: 2rem; padding-inline: var(--s-3); font-size: var(--t-xs); }
.btn--icon { padding-inline: 0; width: var(--btn-h); }
.btn--block { width: 100%; }

.btn__icon { width: 1em; height: 1em; flex: none; }

/* Иконки из макроса icons.html. Размер наследуется от кегля строки, поэтому
   иконка всегда в масштабе своего текста и не требует правки на каждый случай. */
.icon { width: 1.15em; height: 1.15em; flex: none; }

/* Стрелка в кнопке уезжает вперёд при наведении — короткий жест,
   подсказывающий направление, без «прыгающих» кнопок. */
.btn .btn__icon { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__icon { transform: translateX(3px); }

/* ── Бейджи состояния ──
   Единственный словарь состояний на весь сайт. Страница не имеет права
   заводить свои названия статусов: этим болел V1, и статус модели читался
   по-разному в каталоге и на странице статуса. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.2rem var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-snug);
  white-space: nowrap;
}
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: currentColor;
  flex: none;
}

.badge--ok      { background: var(--c-ok-wash);      color: var(--c-ok); }
.badge--warn    { background: var(--c-warn-wash);    color: var(--c-warn); }
.badge--danger  { background: var(--c-danger-wash);  color: var(--c-danger); }
.badge--info    { background: var(--c-info-wash);    color: var(--c-info); }
.badge--neutral { background: var(--c-neutral-wash); color: var(--c-text-muted); }
.badge--accent  { background: var(--c-accent-wash);  color: var(--c-accent); }

/* ── Чипы: фильтры каталога, теги возможностей ── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 1.875rem;
  padding-inline: var(--s-3);
  border-radius: var(--r-full);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-secondary);
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.chip:hover { color: var(--c-text); border-color: var(--c-border-strong); }
.chip[aria-pressed="true"] {
  background: var(--c-accent-wash-2);
  border-color: var(--c-border-accent);
  color: var(--c-accent);
}

.chip--static { cursor: default; }
.chip--static:hover { color: var(--c-text-secondary); border-color: var(--c-border); }

/* ── Метка-надпись над значением ── */

.label {
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* ── Ссылка с подчёркиванием, растущим из-под текста ── */

.link {
  color: var(--c-text);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-base) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.link:hover { background-size: 100% 1px; }
.link--accent { color: var(--c-accent); }

/* На сенсорных экранах строчные ссылки получают запас по высоте: точность
   пальца — около 9 мм, а строка текста высотой 18px в неё не попадает. */
@media (pointer: coarse) {
  .link { display: inline-block; min-height: 32px; line-height: 32px; }
}

/* ── Числовая метрика ── */

.metric { display: flex; flex-direction: column; gap: var(--s-1); }
.metric__value {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.metric__unit {
  font-size: 0.55em;
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  margin-left: 0.15em;
}
.metric__label { font-size: var(--t-xs); color: var(--c-text-muted); }

/* ── Скелетон загрузки. Обязателен: страницы кабинета ходят в сеть, и без
   скелетона интерфейс прыгает при каждом ответе. ── */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  color: transparent !important;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, 0.045), transparent);
  animation: skeleton-sweep 1.4s var(--ease-in-out) infinite;
}
@keyframes skeleton-sweep { to { transform: translateX(100%); } }

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

/* ── Лента в заголовке ──
   Живёт здесь, а не в pages/home.css: `.hl` стоит в заголовках шести
   страниц — /docs, /models, /install, /dashboard, превью моделей и главной.
   Пока правило лежало в стилях главной, на всех остальных страницах span
   оставался обычным текстом, и приём просто не работал. */
/* Подложка под частью заголовка — приём из референса. Не сплошная заливка
   строки, а лента под текстом: она подчёркивает, а не перекрикивает.

   Лента — фон самой строки, а не отдельный слой под ней. Так при переносе
   каждая строка получает собственную подложку. Раньше здесь лежал
   абсолютный ::before, который умел ровно одну строку; из-за него стоял
   white-space: nowrap, и на телефоне заголовок «если есть API поставщика»
   не мог перенестись и выпихивал страницу вбок на 21px (на 360px — на 55). */
.hl {
  /* inline-block, а не inline: лента ведёт себя как единый кусок. Если она
     не влезает в остаток строки — уходит на следующую целиком, как было с
     white-space: nowrap. Но, в отличие от nowrap, на узком экране она
     переносится внутри себя, а не выпихивает страницу вбок. */
  display: inline-block;
  padding-inline: 0.13em;
  margin-inline: -0.13em;
  border-radius: var(--r-sm);
  background: var(--g-accent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Заголовку с лентой нужен воздух между строками: подложка рисуется по
   кегельной площадке шрифта, а она выше межстрочного расстояния 1.08 — без
   этого ленты соседних строк наезжали бы друг на друга. */
:is(h1, h2, h3):has(.hl) { line-height: 1.26; }