/* ==========================================================================
   MEDIA BOX — СТРАНИЦА «СОБСТВЕННЫЙ СОФТ» (p-software.css)
   --------------------------------------------------------------------------
   Подключается только на software.html: после pages.css и screens.css,
   перед future.css. Общие блоки (.page-hero, .dash-visual, .dash, .bento,
   .devrow, .split, .feature, .cta, .mphone, .svc-chip…) — в pages.css;
   здесь только правки и новые элементы этой страницы.

   Содержание:
     1. Шапка: строка цены (.sw-price-note), подпись под визуалом
     2. Окно софта с телеметрией (.sw-dash, .tm, .tm-detail)
     3. «Уже работает»: правки сетки, варианты описаний (.sw-opts)
     4. «Автоматика + ручное управление»: окно экрана телефона (.sw-modes,
        переключатель .sw-switch)
     5. «В разработке»: пунктирные карточки (.sw-soon)
     6. Reduced motion

   Правила (как во всём проекте):
     • анимируются только transform и opacity (ключевые кадры v2-pulse
       и v2-blink — из pages.css, раздел v2.1);
     • hover — только внутри @media (hover: hover) and (pointer: fine);
     • брейкпоинты: телефон < 640px, планшет 640–1023px, ПК ≥ 1024px;
     • цвета — переменные из base.css; цвет проекта/статуса подкрашивает
       фон через псевдоэлемент с opacity.
   Пауза анимаций вне экрана — атрибут [data-live] (software.js).
   ========================================================================== */


/* ==========================================================================
   1. ШАПКА
   ========================================================================== */

/* Строка цены под кнопками: «$300 ≈ … грн» + пояснение.
   Гривны подставляет layout.js по data-uah (если курса нет — скрывает). */
.sw-price-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  max-width: 560px;
  margin-top: 18px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.sw-price-note__price {
  white-space: nowrap;
}

.sw-price-note .price__usd {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sw-price-note .price__uah {
  font-weight: 600;
}

.sw-price-note__text {
  flex: 1 1 260px;
  min-width: 0;
}

/* Визуал + подпись «значения — для примера» */
.sw-hero-visual {
  min-width: 0;
}

.sw-hero-visual > .v2-footnote {
  margin-top: 12px;
}


/* ==========================================================================
   2. ОКНО СОФТА С ТЕЛЕМЕТРИЕЙ
   --------------------------------------------------------------------------
   Основа — .dash-visual / .dash из pages.css (v2.5). Внутри .dash размеры
   в cqw (1cqw = 1% ширины окна), снаружи — от ширины всего визуала.
   Телефон справа внизу — «экран, выведенный на компьютер»: он меньше,
   чем в базовом макете, и закрывает только карточку .tm-detail
   (у неё справа пустое поле), а не таблицу.
   ========================================================================== */

.sw-dash .dash {
  margin-bottom: 20cqw;
}

.sw-dash .dash-visual__phone .mphone {
  --pw: 20cqw;
  --ph: calc(20cqw * 2.06);
}

/* --- Таблица телеметрии: устройство · проект · заряд · темп. · статус --- */
.tm {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1.8cqw;
  background: rgba(255, 255, 255, .025);
}

.tm__row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .75fr) minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 1.4cqw;
  height: 5.8cqw;
  padding: 0 2cqw;
  font-size: max(7px, 2.05cqw);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.tm__row + .tm__row {
  border-top: 1px solid var(--border);
}

.tm__row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm__row--head {
  height: 4.6cqw;
  font-size: max(6px, 1.65cqw);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(255, 255, 255, .02);
}

/* Строка телефона, который сейчас публикует: мягкая подсветка (opacity) */
.tm__row--active::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--accent-2);
  opacity: 0;
  animation: tm-row 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tm-row {
  0%, 100% { opacity: 0; }
  50%      { opacity: .12; }
}

/* Устройство: индикатор связи + имя */
.tm__dev {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  font-weight: 700;
}

.tm__led {
  flex-shrink: 0;
  width: 1.3cqw;
  height: 1.3cqw;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 1cqw rgba(52, 224, 161, .8);
  animation: v2-blink 3.2s ease-in-out var(--d, 0s) infinite;
}

/* Проект: буква в плашке цвета проекта (A / B / C) */
.tm__proj {
  --pc: var(--accent);

  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  width: 3.8cqw;
  height: 3.6cqw;
  border-radius: 1cqw;
  font-size: max(7px, 1.9cqw);
  font-weight: 800;
  line-height: 1;
  color: var(--pc);
}

.tm__proj::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--pc);
  opacity: .16;
}

.tm__proj--b {
  --pc: var(--accent-2);
}

.tm__proj--c {
  --pc: var(--accent-3);
}

/* Заряд: батарейка (заливка — статичный scaleX) + проценты */
.tm__bat {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
}

.tm__cell {
  position: relative;
  flex-shrink: 0;
  width: 4.6cqw;
  height: 2.3cqw;
  border: 1px solid var(--border-strong);
  border-radius: .6cqw;
}

.tm__cell::before {
  content: '';
  position: absolute;
  inset: .35cqw;
  border-radius: .3cqw;
  background: var(--accent-3);
  transform-origin: left center;
  transform: scaleX(var(--b, .5));
}

/* «Плюс» батарейки */
.tm__cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -.75cqw;
  width: .5cqw;
  height: 1cqw;
  margin-top: -.5cqw;
  border-radius: 0 .2cqw .2cqw 0;
  background: var(--border-strong);
}

.tm__temp {
  color: var(--text-muted);
}

/* Статус: подпись в плашке цвета статуса */
.tm__st {
  --sc: var(--accent-3);

  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: .5cqw 1.4cqw;
  border-radius: 99px;
  font-size: max(6.5px, 1.8cqw);
  font-weight: 700;
  line-height: 1.3;
  color: var(--sc);
}

.tm__st::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--sc);
  opacity: .14;
}

.tm__st--warm {
  --sc: var(--accent);
}

.tm__st--pub {
  --sc: var(--accent-2);
}

.tm__st--man {
  --sc: var(--text);
}

/* --- Карточка выбранного телефона (справа — место под телефон) --- */
.tm-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1cqw;
  min-height: 19cqw;
  padding: 2cqw 14cqw 2cqw 2.4cqw;
  border: 1px solid var(--border);
  border-radius: 1.8cqw;
  background: rgba(255, 255, 255, .025);
}

.tm-detail__title {
  overflow: hidden;
  font-size: max(7.5px, 2.5cqw);
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
}

.tm-detail__line {
  overflow: hidden;
  font-size: max(7px, 2cqw);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-muted);
}

.tm-detail__line::before {
  content: '';
  display: inline-block;
  width: 1.2cqw;
  height: 1.2cqw;
  margin-right: 1cqw;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--accent-3);
}

.tm-detail__line--accent {
  color: var(--accent);
}

.tm-detail__line--accent::before {
  background: var(--accent);
}


/* ==========================================================================
   3. «УЖЕ РАБОТАЕТ»
   ========================================================================== */

/* Ряд устройств: базовый комплект — 5 телефонов, показываем все пять
   (pages.css на телефоне и узком ПК прячет 5-й и 6-й) */
.sw-feats .devrow__phone:nth-child(5) {
  display: block;
}

/* Телефон: ряд компактнее, чтобы 5 устройств помещались и на 320 px */
@media (max-width: 639.98px) {
  .sw-feats .devrow {
    gap: 8px;
    padding: 14px 12px;
  }

  .sw-feats .devrow__hub {
    width: 44px;
    height: 44px;
  }

  .sw-feats .devrow__phones {
    gap: 6px;
  }

  .sw-feats .devrow__phone {
    width: 22px;
    height: 42px;
  }
}

/* Планшет (2 колонки): последняя карточка — на всю ширину, без «дырки» */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .sw-feat--tail {
    grid-column: 1 / -1;
  }
}

/* --- Описания: два варианта, рекомендуемый выделен --- */
.sw-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: -4px;
}

.sw-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}

.sw-opt--rec {
  border-color: rgba(56, 217, 255, .35);
  background: rgba(56, 217, 255, .05);
}

.sw-opt__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.sw-opt__badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-on-accent);
  background: var(--accent-grad);
}

.sw-opt__text {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--text-muted);
}


/* ==========================================================================
   4. «АВТОМАТИКА + РУЧНОЕ УПРАВЛЕНИЕ»: ЭКРАН ТЕЛЕФОНА НА КОМПЬЮТЕРЕ
   --------------------------------------------------------------------------
   Переключатель режима сам ходит по кругу за 8 секунд:
     «Авто» → курсор нажимает «Вручную» → «Вручную» → снова «Авто».
   Двигаются только transform (ползунок, курсор) и opacity (курсор).
   ========================================================================== */

.sw-modes {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

.sw-modes__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(56, 217, 255, .14), rgba(123, 92, 255, .1) 50%, rgba(123, 92, 255, 0) 72%);
  pointer-events: none;
}

.sw-modes__win {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 40px 90px -40px rgba(0, 0, 0, .95),
    0 30px 80px -50px rgba(123, 92, 255, .6);
}

/* Заголовок окна */
.sw-modes__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .02);
}

.sw-modes__dots {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.sw-modes__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  opacity: .75;
}

.sw-modes__dots i:nth-child(2) {
  background: var(--text-muted);
}

.sw-modes__dots i:nth-child(3) {
  background: var(--accent-3);
}

.sw-modes__title {
  min-width: 0;
  overflow: hidden;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-muted);
}

/* Тело: телефон слева, режим и телеметрия справа */
.sw-modes__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  padding: clamp(18px, 3vw, 28px);
}

.sw-modes__phone {
  display: block;
}

.sw-modes__phone .mphone {
  --pw: 116px;
  --ph: calc(116px * 2.06);
}

@media (max-width: 639.98px) {
  .sw-modes__phone .mphone {
    --pw: 92px;
    --ph: calc(92px * 2.06);
  }
}

.sw-modes__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.sw-modes__label {
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sw-switch + .sw-modes__label {
  margin-top: 10px;
}

/* --- Переключатель «Авто / Вручную» --- */
.sw-switch {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 40px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg);
}

/* Ползунок: ширина — половина переключателя без внутреннего отступа,
   translateX(100%) переносит его ровно под «Вручную» */
.sw-switch__thumb {
  position: absolute;
  z-index: -1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--accent-grad);
  opacity: .32;
  transform: translateX(0);
  animation: sw-thumb 8s var(--ease-in-out) infinite;
}

.sw-switch__opt {
  display: grid;
  place-items: center;
  min-width: 0;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
}

/* Курсор появляется, «нажимает» «Вручную» и уходит */
.sw-switch__cursor {
  position: absolute;
  z-index: 2;
  left: 72%;
  top: 55%;
  width: 22px;
  height: 22px;
  color: var(--text);
  opacity: 0;
  animation: sw-cursor 8s var(--ease-in-out) infinite;
  pointer-events: none;
}

.sw-switch__cursor svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes sw-thumb {
  0%, 40%   { transform: translateX(0); }
  46%, 86%  { transform: translateX(100%); }
  92%, 100% { transform: translateX(0); }
}

@keyframes sw-cursor {
  0%, 16%   { opacity: 0; transform: translate(64px, 44px) scale(1); }
  22%       { opacity: 1; transform: translate(64px, 44px) scale(1); }
  36%       { opacity: 1; transform: translate(0, 0) scale(1); }
  40%       { opacity: 1; transform: translate(0, 0) scale(.82); }
  44%       { opacity: 1; transform: translate(0, 0) scale(1); }
  56%       { opacity: 0; transform: translate(28px, 36px) scale(1); }
  100%      { opacity: 0; transform: translate(28px, 36px) scale(1); }
}

/* --- Телеметрия выбранного телефона (значения — для примера) --- */
.sw-modes__stats {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}

.sw-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
}

.sw-stat + .sw-stat {
  border-top: 1px solid var(--border);
}

.sw-stat__k {
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-muted);
}

.sw-stat__v {
  font-size: .875rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sw-stat__v--on {
  color: var(--accent-3);
}


/* ==========================================================================
   5. «В РАЗРАБОТКЕ»
   --------------------------------------------------------------------------
   Визуально отличаются от «Уже работает»: пунктирная рамка, штриховка
   вместо заливки, приглушённая иконка и чип «В разработке».
   Сетка (6 карточек, с 04.10.2026 добавлена «Facebook и Threads»):
   телефон — 1 колонка; планшет — 2 колонки, 3 ряда; ПК — 3 колонки,
   2 ряда. Если карточек станет нечётное число, последняя на планшете
   растягивается на всю ширину, а на ПК неполный ряд делится поровну.
   ========================================================================== */

.sw-soon-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 20px);
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .sw-soon-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Нечётная последняя карточка — на всю ширину (при 6 карточках не срабатывает) */
  .sw-soon:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .sw-soon-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sw-soon {
    grid-column: span 2;
  }

  /* Неполный последний ряд. При 6 карточках не срабатывает: 2 ровных ряда
     по 3. Две карточки в ряду — по половине ширины, одна — на всю ширину. */
  .sw-soon:nth-child(3n + 1):nth-last-child(2),
  .sw-soon:nth-child(3n + 1):nth-last-child(2) + .sw-soon {
    grid-column: span 3;
  }

  .sw-soon:nth-child(3n + 1):last-child {
    grid-column: 1 / -1;
  }
}

.sw-soon {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 10px, rgba(255, 255, 255, 0) 10px 20px);
}

.sw-soon > * {
  margin: 0;
}

.sw-soon__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Иконка приглушена — функция ещё не в работе */
.sw-soon .card__icon {
  color: var(--text-muted);
  background: rgba(255, 255, 255, .04);
  border-color: var(--border-strong);
}

.sw-soon__chip {
  border-style: dashed;
  border-color: rgba(123, 92, 255, .6);
  color: var(--text);
  background: rgba(123, 92, 255, .12);
}

.sw-soon__chip .icon {
  color: var(--accent-2);
}

.sw-soon__title {
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--text);
}

.sw-soon__text {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}


/* ==========================================================================
   6. REDUCED MOTION
   Глобальное правило в base.css уже «гасит» анимации; здесь элементы
   ставятся в спокойный кадр: индикаторы горят ровно, переключатель
   стоит на «Авто», курсора нет.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .tm__led,
  .tm__row--active::after,
  .sw-switch__thumb,
  .sw-switch__cursor {
    animation: none !important;
  }

  .sw-switch__cursor {
    display: none;
  }
}