/* ============================================================
   skill.css — страница навыка (skill.html)
   Только недостающие стили; базовые компоненты — в styles.css
   (заголовок шапки — единый .header-title из styles.css)
   ============================================================ */

/* --- Hero навыка --- */
.skill-hero h1 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.3px;
}

/* --- Блок «Как это работает» --- */
.skill-desc {
  padding: 0 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.how-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
  padding: 0 20px;
}
.how-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.how-num {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.how-step-text {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-2);
  padding-top: 4px;
}

/* --- Липкая зона: поиск + фильтры над списком моделей --- */
.filters-sticky {
  position: sticky;
  top: 0;
  z-index: 6;
  margin-top: 26px;
  padding: 8px 0 2px;
  background: rgba(19, 19, 22, .92); /* --screen с прозрачностью под blur */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.filters-sticky .mini-search { margin-bottom: 10px; }
.chip--active {
  background: rgba(47, 167, 233, .16);
  color: #5FBDF2;
}
.chip--active:active {
  background: rgba(47, 167, 233, .28);
  transform: scale(.97);
}

/* --- Список моделей --- */
.model-row--hidden { display: none; }
.chev-wrap {
  flex: none;
  display: inline-flex;
}
.model-row[data-selected="true"] .chev { color: var(--blue); }

/* ⓘ — переход на карточку модели */
.row-info {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-4);
  transition: background .15s;
}
.row-info:active { background: rgba(255, 255, 255, .1); }

/* --- Кнопка «Показать ещё N» --- */
.show-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.show-more {
  height: 42px;
  padding: 0 22px;
  border-radius: 21px;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  transition: background .15s, transform .12s;
}
.show-more:active { background: var(--surface-2); transform: scale(.97); }

/* --- Пустой список после фильтрации --- */
.empty-note {
  display: none;
  padding: 10px 20px 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-4);
}
.empty-note--visible { display: block; }