/* ===== Попапы регалий слайда 4 (Solution) — Figma node 2945:1553
     ("Solution (desktop)-pressed") =====
     Два попапа: "Роспатент" и "Реестр Минцифры". Открываются КЛИКОМ по
     соответствующему блоку-регалии внизу слайда (.sol-block, см.
     css/slide3-cost.css), закрываются крестиком / кликом по затемнению /
     Esc / любой прокруткой (см. js/solution-popups.js и js/slides.js).
     Третий, центральный блок ("И он уже здесь — продукт от компании медиа5")
     попапа тут не имеет: он открывает уже существующий оверлей "О компании"
     (слайд 12, js/slide11-lastpopup.js).

     ПОЧЕМУ СНАРУЖИ СЦЕНЫ. Ровно та же причина, что у Lastpopup (см. подробный
     разбор в css/lastpopup.css): затемняется ВЕСЬ реальный экран, включая
     .menubar и .apps-sidebar (явное решение пользователя 2026-08-05), значит
     затемнение обязано быть настоящим fixed-элементом выше них, а раскрытая
     карточка — выше самого затемнения. Внутри #stage-content это
     недостижимо: он ограничен 1440×760-канвасом и сдвинут center-offset'ом,
     а поднять z-index всей .stage-wrap означало бы поднять над затемнением и
     контент слайда.

     ЛЕСТНИЦА z-index проекта: .menubar/.apps-sidebar 100 → ЭТИ ДВА 120/130 →
     Lastpopup 150/200 → демо-панель 300/310. Попапы регалий НИЖЕ Lastpopup
     намеренно: оба живут на одном слайде, и "О компании", открытый
     центральным блоком, обязан ложиться поверх.

     #solution-popup-canvas переиспользует var(--stage-scale) (тот же CSS-var,
     что и #stage, обновляется в js/stage.js fitStage()) — поэтому координаты
     карточек внутри написаны в дизайн-px 1:1 из Figma и не требуют ни одного
     пересчёта на resize. Центрирование flex'ом в диапазоне
     top:var(--header-h)…bottom:0 совпадает с тем, как .stage-wrap центрирует
     #stage — значит "свёрнутая" геометрия карточки (top:495/height:233)
     попадает ТОЧНО туда, где на сцене стоит сам блок .sol-block, и морф
     блок→карточка получается бесшовным. */
  #solution-screen-backdrop{
    position:fixed; inset:0; z-index:120;
    background:rgba(0,0,0,0.6);
    opacity:0; pointer-events:none;
  }
  #solution-popup-wrap{
    position:fixed; left:0; right:0; top:var(--header-h); bottom:0;
    display:flex; align-items:center; justify-content:center;
    z-index:130; pointer-events:none;
  }
  /* Клики ловят ТОЛЬКО сама карточка и крестик (см. .is-open ниже), а обёртка
     и канвас остаются pointer-events:none НАВСЕГДА — иначе прозрачный
     1440×760-канвас перехватывал бы клик мимо карточки, и "клик по
     затемнению закрывает" работал бы лишь по узким полям за краем канваса.
     Дочерний pointer-events:auto прекрасно работает внутри родителя с none —
     это не наследуемое свойство, а поэлементное. */
  #solution-screen-backdrop.is-open{ pointer-events:auto; }
  #solution-popup-canvas{
    position:relative; width:1440px; height:760px;
    transform:scale(var(--stage-scale));
    pointer-events:none;
  }

  /* Раскрытая карточка. top/height здесь — СВЁРНУТОЕ состояние (совпадает с
     .sol-block на сцене), в раскрытое (top:418/height:310, 1:1 из Figma:
     bottom:32 при height:310) её разгоняет js/solution-popups.js. opacity:0 —
     страховочный CSS-дефолт того же рода, что у .lastpopup-card: элемент
     живёт в DOM постоянно, вне условного рендеринга, и без дефолта висел бы
     тёмным прямоугольником поверх Hero до самого первого открытия (ровно тот
     баг, что ловили на слайде 12 — см. память проекта). Продублировано и в
     JS-модуле сразу при инициализации. */
  .sol-popup{
    position:absolute; top:495px; width:230px; height:233px; box-sizing:border-box;
    padding:24px 16px; background:#1A1A1C; border-radius:24px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:#fff; opacity:0; pointer-events:none;
  }
  .sol-popup.is-open{ pointer-events:auto; }
  .sol-popup--rospatent{ left:199px; gap:14px; }
  .sol-popup--mindigital{ left:1015px; gap:15px; }
  /* Иконки в тёмной карточке белые. Отдельных "белых" файлов не заводим —
     обе иконки одноцветные чёрные с прозрачным фоном, поэтому
     brightness(0) invert(1) даёт ровно белый силуэт того же контура
     (brightness(0) сначала гасит любой цвет в чёрный, invert(1) переводит
     чёрное в белое; прозрачность не трогается). */
  .sol-popup__icon{ display:block; flex-shrink:0; filter:brightness(0) invert(1); }
  .sol-popup__icon--rospatent{ width:177px; height:128px; }
  .sol-popup__icon--mindigital{ width:132px; height:128px; object-fit:contain; }
  .sol-popup__label{
    margin:0; font-family:'Unbounded',sans-serif; font-weight:400;
    font-size:21px; line-height:1.4; text-align:center;
  }
  .sol-popup--mindigital .sol-popup__label{ line-height:1; }
  .sol-popup__detail{
    margin:0; font-family:'Source Sans Pro',sans-serif; font-weight:400;
    font-size:16px; line-height:1.4; text-align:center;
  }
  /* 600, не 700: у Source Sans Pro в проекте вшиты только 400 и 600 (см.
     css/fonts.css), и 700 браузер либо подменял тем же 600, либо рисовал
     фальшивый жирный. Правка 2026-08-07. */
  .sol-popup__detail b{ font-weight:600; }

  /* Крестик — жёлтый кружок 48×48 РОВНО по центру верхнего края карточки
     (Figma: центр X совпадает с центром карточки, центр Y — с её top:418,
     то есть левый верхний угол = центрX−24 / 418−24=394). Отдельный элемент,
     а не ребёнок .sol-popup: карточка на открытии меняет height, и крестик,
     будучи внутри, ездил бы вместе с её содержимым.

     Картинки тут НЕТ и не нужно: это ровно та же кнопка, что уже есть в
     мобильной ветке (.m-ov__close--round в css/mobile.css — крестик формы и
     попапа "О компании"), а она нарисована CSS'ом — круг + два повёрнутых
     <span>. Геометрия перенесена оттуда 1:1 (48×48, перекладины 17.6×2.5),
     чтобы кнопка на десктопе и в мобилке была буквально одной и той же
     вещью. Свой класс, а не переиспользование мобильного: мобильные правила
     живут в своей ветке и своей системе координат, связывать их не стоит. */
  .sol-popup-close{
    position:absolute; top:394px; width:48px; height:48px;
    margin:0; padding:0; border:none;
    background:var(--yellow); border-radius:50%;
    cursor:pointer; opacity:0; pointer-events:none;
    -webkit-appearance:none; appearance:none;
  }
  .sol-popup-close.is-open{ pointer-events:auto; }
  .sol-popup-close--rospatent{ left:290px; }
  .sol-popup-close--mindigital{ left:1106px; }
  .sol-popup-close span{
    position:absolute; left:50%; top:50%; width:17.6px; height:2.5px;
    margin:-1.25px 0 0 -8.8px; background:var(--ink); border-radius:2px;
  }
  .sol-popup-close span:first-child{ transform:rotate(45deg); }
  .sol-popup-close span:last-child{ transform:rotate(-45deg); }