/* ── Живая ERP в странице ─────────────────────────────────────────
   Вместо снимка экрана в рамке стоит сама система: demo/index.html
   в iframe. Человек переключает вкладки, крутит списки, открывает
   карточки — и видит настоящий интерфейс, а не картинку.

   Три вещи, ради которых написан этот файл:

   1. Ширина. ERP нарисована под рабочий стол. Внутри колонки в 760px
      она бы сжалась в мобильную раскладку и перестала быть похожа на
      себя. Поэтому кадр всегда 1440×900, а вписывается он масштабом:
      --k считает скрипт, здесь только применяем.
   2. Прокрутка. Пока кадр не «разбужен» кликом, он не ловит указатель:
      иначе колесо мыши остановилось бы внутри чужого списка и человек
      не смог бы уйти со страницы.
   3. Вес. Полтора мегабайта на раздел — это много, поэтому iframe
      создаётся скриптом при подходе к экрану, а до того здесь просто
      подложка. Место под кадр зарезервировано, страница не прыгает. */

.erp {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: var(--paper);
}

/* Кадр фиксированного размера, вписанный масштабом. transform-origin
   в левом верхнем углу, поэтому после сжатия он ровно ложится в угол
   рамки и обрезки не остаётся. */
.erp__mount {
  position: absolute;
  top: 0;
  left: 0;
  /* Место, которое кадр занимает после сжатия. Без этого на телефоне
     справа оставалась бы пустая полоса: transform уменьшает картинку,
     но не занимаемую строку. */
  width: calc(var(--fw, 1440px) * var(--k, 1));
  height: calc(var(--fh, 900px) * var(--k, 1));
}
.erp__mount iframe {
  width: var(--fw, 1440px);
  height: var(--fh, 900px);
  transform: scale(var(--k, 1));
  transform-origin: 0 0;
  border: 0;
  display: block;
  background: var(--canvas);
  /* Спит, пока не разбудили: колесо и клики проходят мимо. */
  pointer-events: none;
}
.erp.is-live .erp__mount iframe { pointer-events: auto; }

/* Пока грузится — спокойная подложка с бегущей полосой, а не пустота. */
.erp__load {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--paper);
  transition: opacity var(--t-state) var(--ease);
}
.erp.is-ready .erp__load { opacity: 0; pointer-events: none; }
.erp__load span {
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: -.01em;
}
.erp__load::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  transform: translateX(-100%);
  animation: erp-load 1.4s linear infinite;
}
@keyframes erp-load { to { transform: translateX(100%); } }

/* Приглашение потрогать. Лежит поверх кадра, пока тот спит; исчезает
   после первого клика и больше не возвращается. */
.erp__veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  transition: opacity var(--t-state) var(--ease), background var(--t-state) var(--ease);
}
/* Указателю она прозрачна (см. ниже), поэтому ни курсора-руки, ни
   подсветки по наведению здесь нет: подсвечивать нечего, кликают
   сквозь неё. Пока система не вошла — прячем совсем. */
.erp:not(.is-ready) .erp__veil { opacity: 0; }

.erp__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 980px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  letter-spacing: -.01em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  transform: translateY(6px);
  opacity: 0;
  transition: transform var(--t-state) var(--ease), opacity var(--t-state) var(--ease);
}
.erp.is-ready .erp__hint { transform: none; opacity: 1; }
.erp:hover .erp__hint { transform: translateY(-2px); }
.erp__hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Метка «живой блок» — чтобы не приняли за картинку. */
.erp__live {
  position: absolute;
  /* Внизу слева, а не вверху справа: сверху справа у самой системы
     поиск, переключатель темы и аватар — метка ложилась поверх них. */
  bottom: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 980px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0;
  transition: opacity var(--t-state) var(--ease);
}
.erp.is-ready .erp__live { opacity: 1; }
.erp__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1db954;
  box-shadow: 0 0 0 0 rgba(29, 185, 84, .5);
  animation: erp-pulse 2.4s var(--ease) infinite;
}
@keyframes erp-pulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(29, 185, 84, .45); }
  35%           { box-shadow: 0 0 0 6px rgba(29, 185, 84, 0); }
}

/* На весь экран. Тот же кадр, только рамка растягивается: iframe не
   пересоздаётся, раздел и прокрутка внутри сохраняются. */
.viewer.is-full {
  position: fixed;
  inset: 0;
  z-index: 90;
  margin: 0;
  max-width: none;
  padding: 24px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: rgba(245, 245, 247, .96);
  backdrop-filter: saturate(1.4) blur(20px);
  -webkit-backdrop-filter: saturate(1.4) blur(20px);
}
.viewer.is-full .viewer__window { min-height: 0; }
.viewer.is-full .erp { aspect-ratio: auto; height: 100%; }
/* На весь экран система работает в своём размере, без сжатия: ей
   отдаётся настоящее окно, она раскладывается по нему и прокручивается
   сама. Со сжатием кадр 1440×900 растягивался выше экрана, и низ
   карточек уходил за край — добраться было нельзя. */
.viewer.is-full .erp__mount { width: 100%; height: 100%; }
.viewer.is-full .erp__mount iframe {
  width: var(--fw, 100%);
  height: var(--fh, 100%);
  transform: scale(var(--k, 1));
  transform-origin: 0 0;
}
.viewer.is-full .viewer__foot { padding-bottom: 0; }

@media (max-width: 767px) {
  /* На телефоне вписанная целиком ERP была бы нечитаемой: 1440px в
     360 — это масштаб 0.25. Показываем часть кадра в живом масштабе и
     даём увести его вбок пальцем. */
  .erp { aspect-ratio: 4 / 5; overflow: auto; -webkit-overflow-scrolling: touch; }
  .erp__mount { position: relative; }
  .erp__hint { font-size: 13px; padding: 9px 16px; }
  .viewer.is-full { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .erp__load::after, .erp__live i { animation: none; }
  .erp__hint { transition: none; }
}

/* ── Значки в кнопках и карточках ────────────────────────────────────
   Эти правила потерялись при восстановлении, и последствия было видно
   сразу: иконка без заданного размера растягивается до размеров
   родителя, а стрелка без fill: none заливается чёрным. Вместо
   аккуратных значков на тёмной полосе стояли картинки в полкарточки,
   а «Відкрити в системі» превращалось в огромный чёрный треугольник.

   Правило одно на все места: размер задаём явно, заливки нет, рисует
   обводка цветом текста. */

/* Узел конвейера: кнопка «открыть раздел» на тёмной полосе. */
.pipeline__thumb {
  display: grid;
  place-content: center;
  gap: 8px;
  justify-items: center;
  border: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, .82);
  transition: transform var(--t-state) var(--ease), background var(--t-state) var(--ease), color var(--t-state) var(--ease);
}
.pipeline__thumb svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.pipeline__thumb span { font-size: 12px; letter-spacing: -.01em; opacity: .72; }
.pipeline__thumb:hover { background: #171b25; color: #fff; transform: translateY(-3px); }
.pipeline__thumb:active { transform: translateY(-1px) scale(.99); }

/* Второстепенное действие в карточке экосистемы — текстовая ссылка со
   стрелкой. Светлая капсула здесь спорила с главной кнопкой: на экране
   становилось две «кнопки», и глаз выбирал между ними вместо чтения. */
.eco__open {
  align-self: start;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--blue);
  font-size: 14px;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: color var(--t-state) var(--ease);
}
.eco__open svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-state) var(--ease);
}
.eco__open:hover { color: var(--blue-press); }
.eco__open:hover svg { transform: translateX(3px); }

/* Страховка на будущее: любой значок из спрайта внутри кнопки или
   ссылки без собственного размера всё равно останется значком, а не
   растянется во всю карточку. */
button svg:not([width]):not([class]),
a svg:not([width]):not([class]) {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Подсказка стоит чуть выше середины кадра, а не у нижнего края: кадр
   высокий, и на ноутбуке его низ уходит за экран — подсказка торчала
   снизу наполовину срезанной. Указатель проходит сквозь неё: раньше
   это была настоящая заслонка, и первый клик уходил в неё, а не в
   систему. Гаснет не по наведению (так её никто не успевал прочитать),
   а когда человек в самом деле начал работать. */
.erp__veil {
  place-items: center;
  padding: 0 0 12%;
  pointer-events: none;
}
.erp__hint { max-width: calc(100% - 24px); text-align: left; }
/* Указатель зашёл на кадр — подсказка уходит на второй план, чтобы не
   закрывать то, что человек разглядывает. Совсем не убираем: он мог
   навести мышь просто по дороге. */
.erp.is-ready:hover .erp__veil { opacity: .3; }
/* А вот когда он в самом деле кликнул внутрь — убираем насовсем.
   Метку ставит скрипт: клик в чужом документе не виден, но виден его
   след — страница теряет фокус, активным остаётся наш iframe. */
.erp.is-used .erp__veil,
.erp.is-used:hover .erp__veil { opacity: 0; }

/* ── Общее окно системы поверх страницы ───────────────────────────
   Открывается кнопками «Відкрити» из тёмной полосы конвейера и из
   экосистемы (data-erp-open). Живёт в body, а не внутри блока: у
   блоков есть transform, и position: fixed внутри них считался бы от
   блока, а не от экрана.

   Этих правил на сайте не было вовсе — окно рисовалось как обычный
   блок в конце страницы: кнопка «Виробництво» уводила в самый низ,
   где стояла голая строка «RIVENO — Виробництво ✕» и кадр под ней.
   Стили потерялись при восстановлении и не были замечены: класс есть
   в разметке, проверка на мёртвые классы его не ловит.

   Система внутри работает в своём размере, без сжатия — так же, как
   в развёрнутом окне ленты: что не поместилось, прокручивается. */
.erp-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2vw, 28px);
  background: rgba(29, 29, 31, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.erp-modal[hidden] { display: none; }
.erp-modal__box {
  width: min(1600px, 100%);
  height: min(940px, 100%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #fff;
  border-radius: var(--r-tile, 18px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}
.erp-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 18px;
  border-bottom: 1px solid rgba(29, 29, 31, .10);
  background: var(--canvas, #f5f5f7);
}
.erp-modal__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.erp-modal__close {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.erp-modal__close:hover { background: var(--wash-press, #dedee4); }
.erp-modal__close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.erp-modal .erp { aspect-ratio: auto; height: 100%; min-height: 0; }
.erp-modal .erp__mount { width: 100%; height: 100%; }
.erp-modal .erp__mount iframe {
  width: var(--fw, 100%);
  height: var(--fh, 100%);
  transform: scale(var(--k, 1));
  transform-origin: 0 0;
  transform: none;
  pointer-events: auto;
}
@media (max-width: 767px) {
  .erp-modal { padding: 0; }
  .erp-modal__box { border-radius: 0; height: 100%; }
}

/* ═══════════ Вхід і вихід: великі підписані кнопки ═══════════
   У спокої в рамці — синя «На весь екран». На весь екран та сама кнопка
   стає чорною «Вийти з перегляду» з хрестиком і підказкою Esc — її видно
   завжди, бо рамка на весь екран зафіксована. У загальному вікні
   (кнопки «Відкрити») — така сама «Вийти з перегляду». */
/* Специфічність: .band--gray .viewer__zoom і .band--ink .viewer__zoom
   ставлять свій фон — без цього кнопка біла з білим текстом. */
.viewer__zoom--labeled, .band--gray .viewer__zoom--labeled, .band--ink .viewer__zoom--labeled {
  width: auto;
  height: 36px;
  border-radius: 999px;
  padding: 0 16px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue, #0071e3);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(0, 113, 227, .6);
}
.viewer__zoom--labeled:hover { background: #0077ed; transform: translateY(-1px); }
.viewer__zoom--labeled svg { flex: none; }
.viewer.is-full .viewer__zoom--labeled, .band--gray .viewer.is-full .viewer__zoom--labeled, .band--ink .viewer.is-full .viewer__zoom--labeled {
  height: 44px;
  padding: 0 20px 0 16px;
  font-size: 15px;
  background: var(--ink, #1d1d1f);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
}
.viewer.is-full .viewer__zoom--labeled:hover { background: #000; }
.viewer.is-full .viewer__zoom--labeled svg { display: none; }
.viewer.is-full .viewer__zoom--labeled::before { content: "\2715"; font-size: 14px; line-height: 1; }
.viewer.is-full .viewer__zoom--labeled::after {
  content: "Esc";
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .85;
}
@media (max-width: 767px) {
  .viewer__zoom-text { display: none; }
  .viewer__zoom--labeled { padding: 0 12px; }
  .viewer.is-full .viewer__zoom-text { display: inline; }
  .viewer.is-full .viewer__zoom--labeled::after { display: none; }
}
.erp-modal__close--labeled {
  width: auto;
  height: 40px;
  border-radius: 999px;
  padding: 0 18px 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink, #1d1d1f);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
}
.erp-modal__close--labeled:hover { background: #000; }
.erp-modal__close--labeled::after {
  content: "Esc";
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .85;
}