/* Единая страница моделей и статуса: живая сводка, каталог и подробности. */

#health { scroll-margin-top: 7rem; }

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

.models-head {
  position: relative;
  padding-block: clamp(2.75rem, 1.6rem + 4vw, 5.5rem) var(--s-8);
}

.models-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
  gap: var(--s-7) var(--s-9);
  align-items: end;
}

.models-hero__copy { max-width: 49rem; }
.models-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  color: var(--c-accent-soft);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-wide);
}
.models-live {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--r-full);
  background: var(--c-neutral);
  box-shadow: 0 0 0 4px var(--c-neutral-wash);
  transition: background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.models-live[data-fresh="true"] {
  background: var(--c-ok);
  box-shadow: 0 0 0 4px var(--c-ok-wash);
}
.models-hero__title {
  max-width: 15ch;
  font-size: var(--t-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
.models-hero__sub {
  max-width: 45rem;
  margin-top: var(--s-5);
  color: var(--c-text-secondary);
  font-size: var(--t-md);
  line-height: var(--lh-base);
}

.models-hero__signal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, var(--c-surface-highlight), transparent),
              var(--c-bg-elevated);
  box-shadow: var(--sh-inset-top);
}
.models-hero__badge { align-self: flex-end; }
.models-hero__signal-note {
  color: var(--c-text-muted);
  font-size: var(--t-xs);
}

/* Короткий путь сигнала вместо декоративного радара: линия соответствует
   реальной последовательности «запрос страницы → gateway → модель». */
.models-signal {
  position: relative;
  width: 100%;
  height: 2.5rem;
}
.models-signal::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--c-border-strong), var(--c-accent), var(--c-ok));
}
.models-signal::after,
.models-signal span,
.models-signal i {
  position: absolute;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid var(--c-bg-elevated);
  border-radius: var(--r-full);
  background: var(--c-accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px var(--c-accent-wash);
}
.models-signal span { left: 0.35rem; }
.models-signal i { left: 50%; }
.models-signal::after {
  content: "";
  left: calc(100% - 0.35rem);
  background: var(--c-ok);
  box-shadow: 0 0 0 4px var(--c-ok-wash);
}
.models-hero__signal[data-state="neutral"] .models-signal::before {
  background: var(--c-border-strong);
}
.models-hero__signal[data-state="neutral"] .models-signal::after,
.models-hero__signal[data-state="neutral"] .models-signal span,
.models-hero__signal[data-state="neutral"] .models-signal i {
  background: var(--c-neutral);
  box-shadow: 0 0 0 4px var(--c-neutral-wash);
}
.models-hero__signal[data-state="warn"] .models-signal::after {
  background: var(--c-warn);
  box-shadow: 0 0 0 4px var(--c-warn-wash);
}
.models-hero__signal[data-state="danger"] .models-signal::after {
  background: var(--c-danger);
  box-shadow: 0 0 0 4px var(--c-danger-wash);
}

.models-hero__meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--c-border);
}
.models-hero__meta > div {
  min-width: 0;
  padding: var(--s-4) var(--s-5);
}
.models-hero__meta > div + div { border-left: 1px solid var(--c-border); }
.models-hero__meta dt {
  margin-bottom: var(--s-1);
  color: var(--c-text-faint);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}
.models-hero__meta dd {
  margin: 0;
  color: var(--c-text-secondary);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

.health-incident {
  display: grid;
  grid-template-columns: 0.25rem minmax(0, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-warn-wash);
}
.health-incident[hidden] { display: none; }
.health-incident__mark {
  width: 0.25rem;
  min-height: 100%;
  border-radius: var(--r-full);
  background: var(--c-warn);
}
.health-incident[data-tone="danger"] { background: var(--c-danger-wash); }
.health-incident[data-tone="danger"] .health-incident__mark { background: var(--c-danger); }
.health-incident__title {
  color: var(--c-text);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
}
.health-incident__text,
.health-incident__eta {
  margin: var(--s-1) 0 0;
  color: var(--c-text-secondary);
  font-size: var(--t-sm);
  line-height: var(--lh-base);
}

.health-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--s-5);
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-bg-elevated);
  box-shadow: var(--sh-inset-top);
}
.health-kpi {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-3);
  min-width: 0;
  padding: var(--s-5);
}
.health-kpi + .health-kpi { border-left: 1px solid var(--c-border); }
.health-kpi__icon {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-md);
  background: var(--c-neutral-wash);
  color: var(--c-text-muted);
}
.health-kpi__icon svg { width: 0.95rem; height: 0.95rem; }
.health-kpi__label {
  align-self: center;
  color: var(--c-text-muted);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}
.health-kpi__value {
  grid-column: 1 / -1;
  color: var(--c-text);
  font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  line-height: 1;
  letter-spacing: var(--tr-tight);
}
.health-kpi__note {
  grid-column: 1 / -1;
  min-height: 2.5em;
  color: var(--c-text-faint);
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
}
.health-kpi--ok .health-kpi__value { color: var(--c-ok-bright); }
.health-kpi--ok .health-kpi__icon { color: var(--c-ok); background: var(--c-ok-wash); }
.health-kpi--down .health-kpi__value { color: var(--c-danger-bright); }
.health-kpi--down .health-kpi__icon { color: var(--c-danger); background: var(--c-danger-wash); }
.health-kpi--down.is-clear .health-kpi__value { color: var(--c-ok-bright); }

.health-services {
  margin-top: var(--s-5);
  padding: var(--s-5);
}
.health-services__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-4);
}
.health-services__kicker {
  color: var(--c-accent-soft);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-wide);
}
.health-services__title {
  margin-top: var(--s-1);
  font-size: var(--t-lg);
  letter-spacing: var(--tr-snug);
}
.health-services__summary {
  color: var(--c-text-muted);
  font-size: var(--t-xs);
  text-align: right;
}
.health-services__summary[data-state="ok"] { color: var(--c-ok); }
.health-services__summary[data-state="warn"] { color: var(--c-warn); }
.svc-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
}
.health-service {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-1) var(--s-2);
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.health-service__signal {
  align-self: center;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--r-full);
  background: var(--c-neutral);
}
.health-service--ok .health-service__signal { background: var(--c-ok); }
.health-service--down .health-service__signal { background: var(--c-danger); }
.health-service__name {
  overflow: hidden;
  color: var(--c-text);
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-service__detail {
  grid-column: 2;
  color: var(--c-text-faint);
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
}
.health-service .badge {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: var(--s-2);
}
.svc-list > .skeleton { min-height: 6.2rem; border-radius: var(--r-md); }

.catalog-section { padding-top: var(--s-8); }
.catalog-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-7);
  margin-bottom: var(--s-6);
}
.catalog-head h2 {
  margin-top: var(--s-2);
  font-size: var(--t-2xl);
  letter-spacing: var(--tr-tight);
}
.catalog-head p {
  max-width: 37rem;
  color: var(--c-text-secondary);
  font-size: var(--t-sm);
  line-height: var(--lh-base);
}

@media (max-width: 64rem) {
  .models-hero { grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--s-6); }
  .health-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-kpi:nth-child(3) { border-left: 0; border-top: 1px solid var(--c-border); }
  .health-kpi:nth-child(4) { border-top: 1px solid var(--c-border); }
  .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 44rem) {
  .models-head { padding-top: var(--s-7); }
  .models-hero { grid-template-columns: 1fr; gap: var(--s-5); }
  .models-hero__signal { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .models-hero__badge { align-self: auto; }
  .models-hero__signal-note { grid-column: 1 / -1; }
  .models-hero__meta { grid-template-columns: 1fr; }
  .models-hero__meta > div { padding-inline: 0; }
  .models-hero__meta > div + div { border-left: 0; border-top: 1px solid var(--c-border); }
  .health-kpis { grid-template-columns: 1fr 1fr; }
  .health-kpi { padding: var(--s-4); }
  .health-services { padding: var(--s-4); }
  .health-services__head,
  .catalog-head { align-items: flex-start; flex-direction: column; gap: var(--s-3); }
  .health-services__summary { text-align: left; }
  .svc-list { grid-template-columns: 1fr; }
}

@media (max-width: 28rem) {
  .health-kpis { grid-template-columns: 1fr; }
  .health-kpi + .health-kpi { border-left: 0; border-top: 1px solid var(--c-border); }
}

/* ── Панель управления ── */

.catalog-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

@media (min-width: 72rem) {
  .catalog-bar {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: var(--s-4);
  }
}

.catalog-search {
  position: relative;
  display: flex;
  align-items: center;
}
.catalog-search__icon {
  position: absolute;
  left: var(--s-3);
  width: 16px;
  height: 16px;
  color: var(--c-text-faint);
  pointer-events: none;
}
.catalog-search__input {
  width: 100%;
  height: 2.75rem;
  padding: 0 2.5rem 0 2.5rem;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--t-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.catalog-search__input::placeholder { color: var(--c-text-faint); }
.catalog-search__input:focus {
  border-color: var(--c-border-accent);
  background: var(--c-surface-2);
}
/* Системный крестик у type="search" в вебките не поддаётся стилизации
   и выглядит чужеродно на тёмном — рисуем свой. */
.catalog-search__input::-webkit-search-cancel-button { display: none; }
.catalog-search__clear {
  position: absolute;
  right: var(--s-2);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-sm);
  color: var(--c-text-muted);
  font-size: 1.25rem;
  line-height: 1;
}
.catalog-search__clear:hover { color: var(--c-text); background: var(--c-surface-3); }

.catalog-filters { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.catalog-availability {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: rgba(7, 6, 9, 0.72);
}
.catalog-availability__button {
  appearance: none;
  min-height: 2.25rem;
  padding: 0.35rem 0.65rem;
  border: 0;
  border-radius: calc(var(--r-md) - 0.2rem);
  color: var(--c-text-muted);
  background: transparent;
  font: inherit;
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.catalog-availability__button[aria-pressed="true"] {
  color: var(--c-text);
  background: color-mix(in srgb, var(--c-accent) 11%, transparent);
}
.catalog-availability__button--ok[aria-pressed="true"] { color: var(--c-ok); background: var(--c-ok-wash); }
.catalog-availability__button--down[aria-pressed="true"] { color: var(--c-danger); background: var(--c-danger-wash); }
.catalog-availability__button:active { transform: scale(0.97); }

@media (max-width: 40rem) {
  .catalog-availability { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-availability__button { padding-inline: 0.35rem; }
}

.catalog-sort__select {
  height: 2.75rem;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-secondary);
  font-size: var(--t-sm);
  cursor: pointer;
}
.catalog-sort__select:hover { color: var(--c-text); border-color: var(--c-border-strong); }

.catalog-count {
  margin-bottom: var(--s-4);
  font-size: var(--t-xs);
  color: var(--c-text-faint);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

/* ── Сетка ── */

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: var(--s-4);
}

.model-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 13rem;
  cursor: pointer;
  text-align: left;
}
.model-card.skeleton { min-height: 13rem; }

.model-card__top { display: flex; align-items: flex-start; gap: var(--s-3); }
.model-card__brand {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  padding: 0.4rem;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  transition: transform var(--dur-base) var(--ease-out);
}
.model-card:hover .model-card__brand { transform: scale(1.08); }

.model-card__name {
  font-size: var(--t-base);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-snug);
}
.model-card__provider { font-size: var(--t-xs); color: var(--c-text-muted); }
.model-card__state { margin-left: auto; flex: none; }

/* Идентификатор — кнопка копирования. Подтверждение показывается на самой
   кнопке: всплывающее уведомление ради двух слов увело бы взгляд с карточки. */
.model-card__id {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  max-width: 100%;
  padding: 0.25rem var(--s-2);
  border-radius: var(--r-sm);
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.model-card__id:hover { border-color: var(--c-border-accent); color: var(--c-text); }
.model-card__id svg { flex: none; opacity: 0.6; }
.model-card__id:hover svg { opacity: 1; }

.model-card__id[data-copied]::after {
  content: "скопировано";
  font-family: var(--font-sans);
  color: var(--c-ok);
}
.model-card__id[data-copied="no"]::after { content: "не удалось"; color: var(--c-warn); }
.model-card__id[data-copied] > span,
.model-card__id[data-copied] > svg { display: none; }
.model-card__id span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-card__desc {
  font-size: var(--t-sm);
  line-height: var(--lh-base);
  color: var(--c-text-secondary);
  /* Три строки максимум: карточки в сетке должны быть одной высоты,
     иначе ряд рвётся и каталог выглядит неаккуратно. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.model-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}
.model-spec {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: var(--t-xs);
  color: var(--c-text-muted);
}
.model-spec b {
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
  font-variant-numeric: tabular-nums;
}
.model-spec--coef b { color: var(--c-accent); }

/* ── Подробная карточка ── */

/* Базовые правила .drawer живут в components/surfaces.css: тот же диалог
   используется в админке для подтверждения опасных действий. Здесь —
   только то, что специфично для карточки модели. */

.drawer__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 3rem;
  margin-bottom: var(--s-5);
  padding-right: 3.4rem;
}
.drawer__brand {
  width: 3rem;
  height: 3rem;
  flex: none;
  padding: 0.55rem;
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
}
.drawer__state { margin-left: auto; flex: none; }
.drawer__title { font-size: var(--t-xl); letter-spacing: var(--tr-tight); }
.drawer__sub { font-size: var(--t-sm); color: var(--c-text-muted); }

.drawer__hint {
  margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-bg-elevated);
  font-size: var(--t-sm);
  color: var(--c-text-secondary);
}

.drawer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.drawer__cell { display: flex; flex-direction: column; gap: var(--s-1); }
.drawer__cell dt {
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.drawer__cell dd {
  margin: 0;
  font-size: var(--t-base);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.drawer__idrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  margin-bottom: var(--s-5);
}
.drawer__id {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  overflow-x: auto;
  white-space: nowrap;
}

.drawer__caps { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.drawer__foot { display: flex; flex-wrap: wrap; gap: var(--s-3); }

@media (max-width: 40rem) {
  .drawer__head {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: start;
    gap: 0.35rem 0.85rem;
    padding-right: 3.2rem;
  }
  .drawer__brand { grid-row: 1 / 3; }
  .drawer__state {
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
  }
}

/* ── Разделение по семействам ───────────────────────────────────────────
   Заголовок — элемент той же сетки, растянутый на всю ширину. Так карточки
   не меняют раскладку, а между ними появляется структура. */

.catalog-group {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-7) 0 calc(var(--s-1) * -1);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--t-lg, 1.125rem);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-snug);
}

/* Над первой группой отступ не нужен — там уже есть отступ панели фильтров. */
.catalog-group:first-child {
  margin-top: 0;
}

.catalog-group__name {
  color: var(--c-text);
}

.catalog-group__meta {
  font-size: var(--t-xs);
  font-weight: var(--fw-normal);
  color: var(--c-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .catalog-group {
    margin-top: var(--s-6);
    font-size: 1rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ЧЕСТНОЕ СОСТОЯНИЕ МОДЕЛИ
   ══════════════════════════════════════════════════════════════════════════

   Карточка отвечает на два разных вопроса и не даёт им смешиваться:

     «можно ли пользоваться сейчас»  — ярлык, берётся из selectable, то есть из
                                       того же флага, которым шлюз решает,
                                       пропускать ли запрос;
     «что мы измерили»               — полоска, отклик и процент проверок,
                                       всегда под своей подписью.

   До этого измеренное стояло в общем ряду характеристик без подписи, и на
   недоступной модели рядом оказывались «Не работает» и «100% проверок за
   сутки». Оба числа верны, и именно поэтому карточка читалась как сломанная. */

/* ── Полоска проверок ──
   Один столбик — одна реальная проверка. Высота — время ответа, цвет — прошла
   она или нет. Пустая история значит пустую полоску: рисовать благополучие,
   которого не измеряли, нельзя. */

.model-strip {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 1.75rem;
  padding: 0.25rem 0;
}
.model-strip__bar {
  flex: 1 1 0;
  min-width: 2px;
  height: var(--h, 50%);
  border-radius: 1px;
  background: var(--c-ok);
  opacity: 0.75;
  transform-origin: bottom;
  animation: strip-rise 420ms var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 22ms);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.model-strip__bar--bad {
  background: var(--c-danger);
  opacity: 0.9;
}
.model-card:hover .model-strip__bar { opacity: 1; }

@keyframes strip-rise {
  from { transform: scaleY(0.06); opacity: 0; }
  to   { transform: scaleY(1); }
}

/* ── Измеренное, под своей подписью ── */

.model-measured {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.model-measured__label {
  font-size: 0.6875rem;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.model-measured__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

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

.model-fresh {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  font-size: var(--t-xs);
  color: var(--c-text-faint);
  font-variant-numeric: tabular-nums;
}
.model-fresh__tick {
  width: 5px;
  height: 5px;
  border-radius: var(--r-full);
  background: currentColor;
  opacity: 0.7;
}
/* Просроченный результат не прячем и не красим в тревогу — он просто перестаёт
   быть проходной деталью и начинает читаться как оговорка. */
.model-fresh--stale { color: var(--c-warn); }
.model-fresh--stale .model-fresh__tick {
  opacity: 1;
  animation: fresh-blink 2.4s var(--ease-in-out) infinite;
}
@keyframes fresh-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* ── Оговорки на карточке ── */

.model-note {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  border-left: 2px solid var(--c-danger);
  background: var(--c-danger-wash);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--c-text-secondary);
}
/* Расхождение двух измерений — не авария, а объяснение. Тон соответственно
   предупреждающий, а не аварийный: модель действительно недоступна, но причина
   не в ней, и покупателю стоит это прочитать, а не испугаться. */
.model-note--split {
  border-left-color: var(--c-warn);
  background: var(--c-warn-wash);
}

/* Недоступная карточка приглушена, но читаема: спрятать её значило бы скрыть
   от покупателя часть витрины, а выкрасить целиком в красный — соврать о
   масштабе. Приглушение говорит ровно то, что есть: сюда сейчас нельзя. */
.model-card--off .model-card__brand { filter: grayscale(0.65); opacity: 0.75; }
.model-card--off .model-card__name  { color: var(--c-text-secondary); }

/* ── Появление карточек ──
   Волна по сетке. Задержка ограничена: на двадцатой карточке ждать секунду
   уже раздражает, а не радует. */

.model-card:not(.skeleton) {
  animation: card-in 380ms var(--ease-out) backwards;
  animation-delay: calc(min(var(--card-i, 0), 14) * 28ms);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Живой индикатор — только у работающей модели. У неработающей точка
   неподвижна: пульс читался бы как признак жизни там, где её нет. */
.model-card__state.badge--ok .badge__dot,
.drawer__state.badge--ok .badge__dot {
  animation: dot-breathe 2.6s var(--ease-in-out) infinite;
}
@keyframes dot-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-ok) 55%, transparent); }
  70%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-ok) 0%, transparent); }
}

/* ── Строка о состоянии проверок ── */

.catalog-monitoring {
  margin-bottom: var(--s-4);
  animation: card-in 320ms var(--ease-out) backwards;
}

/* ── Полоска в подробной карточке ── */

.drawer__strip { margin-bottom: var(--s-5); }
.drawer__strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.drawer__strip-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-text-faint);
}
.drawer__strip-legend .model-strip__bar {
  flex: none;
  width: 3px;
  height: 0.7rem;
  animation: none;
}
.drawer__strip .model-strip { height: 2.5rem; }

/* Движение — украшение, а не носитель смысла: всё, что оно показывает, есть в
   тексте и цвете. Поэтому по просьбе системы выключаем его целиком. */
@media (prefers-reduced-motion: reduce) {
  .model-strip__bar,
  .model-card:not(.skeleton),
  .catalog-monitoring,
  .model-fresh--stale .model-fresh__tick,
  .model-card__state.badge--ok .badge__dot,
  .drawer__state.badge--ok .badge__dot {
    animation: none;
  }
}