/* ===========================================================
   POLISH v1 — детали поверх существующего дизайна (Этап 1)
   Аддитивный слой: НЕ меняет тексты, разметку, SEO.
   Откат = удалить один <link> из index.html.
   Специфичность: префикс `html` побеждает inline-стили app.js
   независимо от порядка вставки <style> в DOM.
   =========================================================== */

/* --- 1.1 Слот-индикатор: свободные ГОРЯТ (mint), занятые гаснут.
   Было наоборот: занятые — signal-заливка, свободные — контур.
   Семантика согласована с зелёным pulse-dot и текстом «2 свободных». */
html .v-disp .hero-slot {
  width: 16px; height: 8px;
  border: 1px solid var(--green);
  background: var(--green);
  box-shadow: 0 0 10px color-mix(in oklab, var(--green) 45%, transparent);
}
html .v-disp .hero-slot.taken {
  background: transparent;
  border-color: var(--tan-deep);
  box-shadow: none;
}

/* --- 1.3 Hover / focus: единый язык лифта (как у .prog и .disp-btn) --- */
/* faq summary НЕ дублируем: app.js уже даёт outline-offset:4px */
html .v-disp .disp-btn:focus-visible,
html .v-disp .stack-tile:focus-visible,
html .v-disp .kb-blog-card:focus-visible,
html .v-disp .kb-term-card:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}
html .v-disp .duo-card {
  transition: transform 0.2s, box-shadow 0.2s;
}
html .v-disp .duo-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--fg);
}
/* Гигантские цифры .alt-num почти невидимы (bg-deep) — на hover проявляются */
html .v-disp .alt { transition: border-color 0.2s; }
html .v-disp .alt:hover { border-color: var(--green); }
html .v-disp .alt-num { transition: color 0.3s; }
html .v-disp .alt:hover .alt-num { color: var(--green-soft); }
/* FAQ: реакция и до клика, не только [open] */
html .v-disp .faq-q { cursor: pointer; }
html .v-disp .faq-item > summary:hover .faq-tg {
  transform: scale(1.25);
  color: var(--signal);
}
html .v-disp .faq-item[open] > summary:hover .faq-tg {
  transform: rotate(45deg) scale(1.25);
}
html .v-disp .faq-item > summary:hover .faq-text { color: var(--fg-soft); }

/* --- 1.4 Цифры: tabular-nums — цены и статы не «пляшут» --- */
html .v-disp .prog-price,
html .v-disp .duo-stat-v,
html .v-disp .hero-side-v,
html .v-disp .hero-stamp-y,
html .v-disp .faq-n {
  font-variant-numeric: tabular-nums;
}

/* --- 1.5 Секционные разделители: линия-руль после mono-тега --- */
html .v-disp .sec-tag::after {
  content: "";
  flex: 1;
  align-self: center;
  height: 1px;
  background: var(--hair);
  min-width: 40px;
}

/* --- Signal-подчёркивания: scroll-reveal (прогрессивно, без JS = статично) --- */
html.js-reveal .v-disp .underline::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1);
}
html.js-reveal .v-disp .underline.in-view::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .v-disp .underline::after {
    transform: none;
    transition: none;
  }
}

/* --- 1.9 Мобила --- */
@media (max-width: 760px) {
  /* тач-зоны FAQ ≥44px */
  html .v-disp .faq-item > summary { min-height: 44px; display: flex; align-items: center; }
  html .v-disp .faq-item > summary .faq-q { width: 100%; }
  /* слоты заметнее на телефоне */
  html .v-disp .hero-slot { width: 20px; height: 9px; }
}
@media (max-width: 480px) {
  /* CTA-кнопки в столбик на всю ширину — большой палец попадает */
  html .v-disp .hero-cta .disp-btn,
  html .v-disp .cta .disp-btn {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
  }
}