/* app.css — base surface, control styling and the deck's keyframes.
   Everything else is authored inline in the deck markup.

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

html, body { margin: 0; padding: 0; background: var(--color-bg); overflow: hidden; }
* { box-sizing: border-box; }
::selection { background: var(--color-accent); color: #fff; }

body { font-family: var(--font-body); }

/* --- range inputs ------------------------------------------------------- */

/* Базовая ручка ползунка. Крупные ползунки калькулятора (data-big) и зелёная
   ручка ключевых конверсий (data-hi) сюда не переносились — калькулятора
   в этой деке нет. */
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent); border: none; cursor: pointer; }

/* Двойной ползунок диапазона чека на экране 11: два <input type="range"> лежат
   друг на друге. Один и тот же указатель не может достаться обоим, поэтому сам
   input указатель не ловит (pointer-events: none), а бегунок ловит (auto) —
   жест достаётся ровно той ручке, по которой попали. */
input[type="range"][data-dual] { position: absolute; left: 0; width: 100%; height: 6px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; outline: none; pointer-events: none; }
input[type="range"][data-dual]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 999px; background: var(--color-accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(17,17,17,0.25); cursor: pointer; }
input[type="range"][data-dual]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 999px; background: var(--color-accent); border: 2px solid #fff; cursor: pointer; }

/* --- design-system components (mounted via <x-import>) ------------------ */

.ds-section-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-pill);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
}

.ds-status-badge { display: inline-flex; align-items: center; gap: 8px; }
.ds-status-badge > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-live);
  display: inline-block;
}
.ds-status-badge > span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-on-dark-secondary);
}

/* --- каркас заглушки экрана --------------------------------------------- */

/* Временная плашка «ЭКРАН NN» вместо содержимого. Уходит по мере переноса
   экранов из hr/source/xHuman HR.dc.html — по одному экрану за задачу.
   Цвет задаётся инлайном из headerMutedColor: на тёмных экранах 04 и 13
   серый по светлому фону был бы нечитаемым. */
.slide-stub {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(11px, 1.6vh, 16px);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
}

/* --- animations --------------------------------------------------------- */

@keyframes scLtIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes scRowIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes scOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scPopIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes scStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Смена содержимого области на экране 02. Два одинаковых имени нужны, чтобы
   анимация перезапускалась при каждом переключении таба: чередование имён —
   единственный способ заставить браузер проиграть её заново на том же узле.
   Определения перенесены из hr/source/xHuman HR.dc.html дословно. */
@keyframes scSwapA { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes scSwapB { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* --- заглушка для узких экранов ------------------------------------------ */

/* HR показывается только с ноутбука, мобильной раскладки в этой версии нет.
   Вместо поехавшего десктопа на узком экране показываем заглушку. Решение
   целиком на CSS: флаг isMobile в js зафиксирован false и к заглушке
   отношения не имеет. */

#mobile-stub { display: none; }

@media (max-width: 767px) {
  #mobile-stub {
    display: flex; position: fixed; inset: 0; z-index: 99999;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 20px; padding: 32px; text-align: center;
    background: var(--color-surface-dark, #161616);
  }
  #mobile-stub-mark {
    width: 64px; height: 64px; border-radius: 14px;
    background: var(--color-accent, #FF5A1F); color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: 28px;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: -0.04em;
  }
  #mobile-stub-text {
    font-family: var(--font-mono); font-weight: 500; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
  }
  body > *:not(#mobile-stub) { display: none !important; }
}