/* ═══════════════════════════════════════════════════════════════════
   ПАТТЕРН — слой новых эффектов
   Подключается после site.css и site-motion.css.

   1. Радиальное меню
   2. Кнопка музыки в шапке
   3. Тарифы на дуге
   4. Текст, разбегающийся от курсора
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────
   1. РАДИАЛЬНОЕ МЕНЮ
   Тёмно-синяя «консоль» поверх светлой страницы: на светлом фоне
   игровой интерфейс не читается, ему нужна своя тёмная комната.
   ─────────────────────────────────────────────────────────────────── */

/* Старое выпадающее меню остаётся в разметке как запасной вариант,
   но как только радиальное собралось — прячем его совсем. */
.mnav--replaced { display: none !important; }

/* Бургер теперь нужен на всех ширинах: радиальное меню — не «мобильное». */
html.has-rmenu .burger { display: inline-flex !important; }

.rmenu {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .32s var(--ease);
}
.rmenu.is-open { display: flex; }
.rmenu.is-in   { opacity: 1; pointer-events: auto; }

.rmenu__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(18,39,92,.86), rgba(6,14,34,.97) 70%),
    linear-gradient(0deg, rgba(6,14,34,.9), rgba(6,14,34,.9));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ——— верхняя строка ——— */
.rmenu__top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px;
  color: #F3F6FB;
}
.rmenu__brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.rmenu__brand svg { height: 21px; width: auto; color: var(--cyan); }
.rmenu__brand b { font-size: 13px; font-weight: 700; letter-spacing: .16em; }

.rmenu__close {
  position: relative; flex: none; width: 42px; height: 42px;
  border: 1px solid rgba(243,246,251,.22); border-radius: 12px;
  background: rgba(243,246,251,.05); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.rmenu__close:hover { background: rgba(234,88,12,.18); border-color: var(--cyan); }
.rmenu__close:active { transform: scale(.94); }
.rmenu__close i {
  position: absolute; top: 50%; left: 50%; width: 16px; height: 1.6px;
  margin: -.8px 0 0 -8px; border-radius: 2px; background: #F3F6FB;
}
.rmenu__close i:first-child { transform: rotate(45deg); }
.rmenu__close i:last-child  { transform: rotate(-45deg); }

/* ——— колесо ——— */
.rmenu__wheel { position: relative; z-index: 2; }

.rmenu__seg {
  position: absolute; inset: 0;
  color: #F3F6FB; text-decoration: none;
  background: rgba(243,246,251,.055);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  cursor: pointer;
}
.rmenu__seg-in {
  position: absolute; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; width: 8.6em; text-align: center; pointer-events: none;
}
.rmenu__seg-in svg { width: 26px; height: 26px; }
.rmenu__label {
  font-size: 12.5px; font-weight: 600; line-height: 1.25; letter-spacing: .01em;
}
.rmenu__seg.is-current .rmenu__label { color: var(--cyan); }

/* Подсветка: сектор «пробивает» в сплошной оранжевый, как выбор в
   консоли. Ступенчатая функция даёт мигание, а не плавный переход. */
.rmenu__seg:hover,
.rmenu__seg:focus-visible,
.rmenu__seg.is-aimed {
  animation: rmenuPick .34s steps(1,end) forwards;
  z-index: 10;
}
.rmenu__seg:hover .rmenu__seg-in,
.rmenu__seg:focus-visible .rmenu__seg-in,
.rmenu__seg.is-aimed .rmenu__seg-in {
  animation: rmenuPickIn .34s steps(1,end) forwards;
}

@keyframes rmenuPick {
  0%   { background: rgba(243,246,251,.055); }
  12%  { background: rgba(234,88,12,.70); }
  24%  { background: rgba(243,246,251,.12); }
  36%  { background: rgba(234,88,12,.85); }
  48%  { background: rgba(243,246,251,.20); }
  60%  { background: rgba(234,88,12,.92); }
  72%  { background: rgba(243,246,251,.26); }
  84%  { background: rgba(234,88,12,.96); }
  100% { background: var(--cyan); }
}
@keyframes rmenuPickIn {
  0%   { color: #F3F6FB; opacity: 1; }
  12%  { color: #0B1A3A; opacity: .45; }
  36%  { color: #0B1A3A; opacity: .35; }
  60%  { color: #fff;    opacity: .8; }
  84%  { color: #fff;    opacity: .9; }
  100% { color: #fff;    opacity: 1; }
}

/* Появление и уход секторов вразнобой — задержки расставляет JS. */
@keyframes rmenuFlickerIn {
  0%,20%,40%,60% { opacity: 0; }
  10%,30%,50%    { opacity: 1; }
  100%           { opacity: 1; }
}
@keyframes rmenuFlickerOut {
  0%,40%   { opacity: 1; }
  20%,60%  { opacity: 0; }
  100%     { opacity: 0; }
}

/* ——— шайба в центре ——— */
.rmenu__hub {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 116px; height: 116px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg,#FFFFFF,#F1EDE6);
  box-shadow:
    0 0 0 1px rgba(234,88,12,.5),
    0 0 0 7px rgba(234,88,12,.12),
    0 14px 44px rgba(0,0,0,.5);
  cursor: grab; user-select: none; touch-action: none; z-index: 20;
}
.rmenu__hub.is-held { cursor: grabbing; }
.rmenu__hub-mark { width: 52px; height: auto; color: var(--deep); }
.rmenu__hub::after {
  content: ""; position: absolute; inset: -18px; border-radius: 50%;
  border: 1px dashed rgba(234,88,12,.35); pointer-events: none;
}

/* ——— низ ——— */
.rmenu__foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; padding: 22px 24px;
}
.rmenu__cta { max-width: 320px; }

/* ——— кнопка музыки ——— */
.rmenu__music,
.music-btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 15px;
  border: 1px solid rgba(var(--fgc),.18); border-radius: 999px;
  background: transparent; color: rgb(var(--fgc));
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
}
.music-btn:hover { background: rgba(234,88,12,.09); border-color: rgba(234,88,12,.4); color: var(--ice); }
.music-btn:active { transform: scale(.96); }
.music-btn.is-on { background: rgba(234,88,12,.12); border-color: rgba(234,88,12,.45); color: var(--ice); }

.rmenu__music { border-color: rgba(243,246,251,.22); color: #F3F6FB; }
.rmenu__music:hover { background: rgba(234,88,12,.18); border-color: var(--cyan); }
.rmenu__music.is-on { background: rgba(234,88,12,.2); border-color: var(--cyan); color: #fff; }

/* Полоски эквалайзера: стоят, пока музыка выключена, пляшут когда идёт. */
.eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.eq i {
  display: block; width: 2.5px; height: 4px; border-radius: 1px;
  background: currentColor; transform-origin: 50% 100%;
}
.is-on .eq i { animation: eqPulse .9s ease-in-out infinite; }
.is-on .eq i:nth-child(2) { animation-duration: .72s; animation-delay: .1s; }
.is-on .eq i:nth-child(3) { animation-duration: 1.05s; animation-delay: .22s; }
.is-on .eq i:nth-child(4) { animation-duration: .84s; animation-delay: .05s; }
@keyframes eqPulse {
  0%,100% { height: 4px; }
  50%     { height: 14px; }
}

/* Кнопка музыки в шапке прячется там же, где и кнопка заявки. */
@media (max-width: 939px) { .music-btn { display: none; } }

@media (max-width: 620px) {
  .rmenu__top { padding: 14px 16px; }
  .rmenu__brand b { display: none; }
  .rmenu__music-t { display: none; }
  .rmenu__music { padding: 0 12px; }
  .rmenu__hub { width: 96px; height: 96px; }
  .rmenu__hub-mark { width: 44px; }
  .rmenu__seg-in { width: 7.4em; gap: 5px; }
  .rmenu__seg-in svg { width: 20px; height: 20px; }
  .rmenu__label { font-size: 11px; }
}

/* Без размытия сектор обязан читаться сам по себе: поднимаем плитку
   заметно выше тёмного фона, иначе подписи висят в тумане. */
@media (pointer: coarse) {
  .rmenu__seg {
    background: rgba(56,74,120,.72);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  @keyframes rmenuPick {
    0%   { background: rgba(56,74,120,.72); }
    12%  { background: rgba(234,88,12,.70); }
    24%  { background: rgba(56,74,120,.8); }
    36%  { background: rgba(234,88,12,.85); }
    48%  { background: rgba(56,74,120,.85); }
    60%  { background: rgba(234,88,12,.92); }
    72%  { background: rgba(56,74,120,.9); }
    84%  { background: rgba(234,88,12,.96); }
    100% { background: var(--cyan); }
  }
}

/* ───────────────────────────────────────────────────────────────────
   2. ФОН-ЖИДКОСТЬ
   Канвас поднят над вуалью: вуаль задумывалась как объединяющая
   дымка над полем точек, и она же гасила краску почти до невидимости.
   Под содержимым страницы (.page, z-index 10) он остаётся.
   ─────────────────────────────────────────────────────────────────── */
#bg { z-index: 2; opacity: .8; }
@media (max-width: 760px) { #bg { opacity: .62; } }

/* ——— запасной фон ———
   Ставится вместо решателя там, где он не запускается: на телефонах
   и планшетах, а также на видеокартах без сглаживания нужных текстур
   (именно от него гладкое пятно рассыпалось на отдельные точки).

   Три мягких пятна медленно плавают по своим траекториям. Двигается
   только transform, размытие задано один раз и не пересчитывается —
   для браузера это работа композитора, а не отрисовка. Такой фон не
   умеет тормозить в принципе. */
html.ink-fallback #bg { display: none; }

.ink {
  position: fixed; inset: 0; z-index: 2;
  overflow: hidden; pointer-events: none;
  opacity: .72;
}
.ink i {
  position: absolute; display: block;
  width: 74vmax; height: 74vmax; border-radius: 50%;
  left: 50%; top: 50%; margin: -37vmax 0 0 -37vmax;
  filter: blur(60px);
  will-change: transform;
}
/* Периоды нарочно несоизмеримы: 23, 27 и 31 секунда не сходятся в
   общий цикл, поэтому рисунок не повторяется и не выглядит заводным. */
.ink i:nth-child(1) {
  background: radial-gradient(circle at 50% 50%, rgba(234,88,12,.50), rgba(234,88,12,0) 68%);
  animation: inkDriftA 23s ease-in-out infinite;
}
.ink i:nth-child(2) {
  background: radial-gradient(circle at 50% 50%, rgba(27,58,120,.42), rgba(27,58,120,0) 68%);
  animation: inkDriftB 27s ease-in-out infinite;
}
.ink i:nth-child(3) {
  background: radial-gradient(circle at 50% 50%, rgba(249,163,60,.38), rgba(249,163,60,0) 66%);
  animation: inkDriftC 31s ease-in-out infinite;
}
@keyframes inkDriftA {
  0%,100% { transform: translate3d(-26vw,-22vh,0) scale(1); }
  33%     { transform: translate3d(20vw,-6vh,0) scale(1.18); }
  66%     { transform: translate3d(-8vw,24vh,0) scale(.9); }
}
@keyframes inkDriftB {
  0%,100% { transform: translate3d(24vw,18vh,0) scale(1.1); }
  40%     { transform: translate3d(-22vw,6vh,0) scale(.86); }
  70%     { transform: translate3d(4vw,-24vh,0) scale(1.22); }
}
@keyframes inkDriftC {
  0%,100% { transform: translate3d(6vw,26vh,0) scale(.94); }
  45%     { transform: translate3d(-24vw,-18vh,0) scale(1.16); }
  75%     { transform: translate3d(26vw,2vh,0) scale(1); }
}
@media (max-width: 760px) { .ink { opacity: .7; } .ink i { filter: blur(44px); } }
@media (prefers-reduced-motion: reduce) { .ink i { animation: none; } }

/* ───────────────────────────────────────────────────────────────────
   3. ТАРИФЫ НА ДУГЕ
   Карточки лежат на ободе огромного колеса под экраном и
   прокатываются через кадр по мере прокрутки страницы.
   ─────────────────────────────────────────────────────────────────── */
/* Всё в этом блоке перебивает прежнее оформление тарифов, в том числе
   мобильное: там сетка превращалась в горизонтальную ленту со свайпом
   и прилипанием. Теперь у тарифов один способ листаться на всех
   устройствах — дуга, — поэтому лента снимается целиком. */
.arc-on .c3-grid {
  display: block !important;
  width: 100% !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  /* Маска — не косметика, а то, из-за чего карточек не было видно
     вовсе. У ленты края растушёвывались градиентной маской, а маска
     обрезает по коробке элемента. Карточки стали absolute, коробка
     схлопнулась в нулевую высоту — и маска съела всё содержимое.
     Ошибка при этом молчаливая: элементы на месте, размеры верные,
     checkVisibility() отвечает «видно», а на экране пусто. */
  -webkit-mask: none !important;
  mask: none !important;
  /* Снимаем позиционирование: иначе карточки отсчитываются от самой
     сетки, а её высота теперь ноль — и top:50% превращается в ноль,
     из-за чего вся дуга уезжает вниз. Пусть точкой отсчёта будет
     сцена во весь экран. */
  position: static !important;
}
.arc-on { overflow-x: clip; }        /* не hidden: соседние карточки
                                        уезжают за кадр по замыслу, а
                                        hidden завёл бы полосу прокрутки */

.arc-track { position: relative; width: 100%; }

/* Надпись над тарифами внутри закреплённой сцены: прижата к верху,
   карточки проходят поверх неё. Верхний отступ секции убираем — иначе
   между приездом к разделу и его закреплением остаётся полоса, на
   которой страница ещё едет сама по себе. */
.arc-on { padding-top: 0 !important; }
.arc-stage .c3-watermark-container {
  /* Отступ сверху должен пропускать шапку: она закреплена поверх
     страницы, и прижатая к самому верху надпись пряталась под ней —
     на телефоне от первой строки оставалась половина. */
  position: absolute; top: clamp(62px, 9vh, 104px); left: 0; right: 0;
  margin: 0 !important; z-index: 1; pointer-events: none;
}
@media (max-width: 760px) {
  .arc-stage .c3-watermark-container { top: 60px; }
}
.arc-stage {
  position: absolute; top: 0; left: 0;
  /* Высоту в пикселях проставляет site-fx.js: она обязана совпадать с
     той, из которой считается длина пути. Значение здесь — на случай,
     если скрипт не успел отработать. */
  width: 100%; height: 100svh;
  display: grid; place-items: center;
  will-change: transform;
}
.arc-on .c3-card {
  position: absolute !important;
  left: 50% !important; top: 50% !important;
  flex: none !important;
  width: min(360px, 78vw) !important;
  margin: 0 !important;
  scroll-snap-align: none !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
/* Размер карточки на дуге.

   Раньше здесь стояла фиксированная ширина плюс правило по высоте экрана,
   который ужимал шрифты на невысоких экранах. От этого карточки
   выглядели разного размера: на ноутбуке мелкие, на телевизоре —
   совсем крошечные посреди огромного поля.

   Теперь ширина тянется за экраном: не меньше комфортных 340 пикселей,
   дальше треть ширины окна, потолок — 600. Шрифты не трогаем вовсе,
   читаемость от диагонали не должна зависеть. */
.arc-on .c3-card {
  width: clamp(340px, min(33vw, 46vh), 600px) !important;
  padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.2vw, 32px) !important;
  border-radius: 26px !important;
  min-height: 0 !important;
}
.arc-on .c3-desc { min-height: 0 !important; margin: 12px 0 18px !important; }
.arc-on .c3-list li { margin-bottom: 10px !important; }

@media (max-width: 760px) {
  .arc-on .c3-card { width: min(86vw, 400px) !important; }
}

.arc-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(var(--fgc),.10);
}
.arc-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--deep), var(--cyan));
}
.arc-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(var(--fgc),.42); white-space: nowrap; pointer-events: none;
  transition: opacity .3s var(--ease);
}

/* ───────────────────────────────────────────────────────────────────
   4. ТЕКСТ, РАЗБЕГАЮЩИЙСЯ ОТ КУРСОРА
   ─────────────────────────────────────────────────────────────────── */
.repel { -webkit-user-select: none; user-select: none; }
.repel .rl {
  display: inline-block; position: relative;
}
/* Собственный слой на видеокарте буквы получают только пока движутся.

   Постоянный will-change казался безобидным, но заголовков с буквами
   на сайте до пяти, в каждом до сорока букв — это под двести слоёв,
   которые видеокарта держит всё время, пока страница открыта. На
   ноутбуке с встроенной графикой именно это, а не сам расчёт, съедало
   память и кадры. Класс is-live ставит и снимает site-fx.js. */
.repel.is-live .rl { will-change: transform; }

/* Коробка одного слова: буквы внутри неё не переносятся по одной.
   Каждая буква — отдельный inline-block, а между двумя такими
   ящиками браузер вправе разорвать строку. Без этой коробки слово
   «глубже» вставало на две строки как «глуб» и «же.». */
.repel .rl-w { display: inline-block; white-space: nowrap; }

/* Освобождение букв из масок набора. Класс ставит site-fx.js, когда
   заголовок закончил набираться: до этого маска нужна, после — она
   съедает любую букву, вышедшую за пределы своего слова. */
.repel-free .tx-w {
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Разлетевшаяся буква должна проходить поверх соседних строк, а не
   нырять под них. Собственный слой ей при этом не заводим: у надписи
   с градиентной заливкой это отрезает её от фона-заливки. */
.repel-free .rl { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .rmenu__seg,
  .rmenu__seg:hover,
  .rmenu__seg.is-aimed { animation: none !important; }
  .rmenu__seg:hover,
  .rmenu__seg.is-aimed { background: var(--cyan); }
  .rmenu__seg:hover .rmenu__seg-in,
  .rmenu__seg.is-aimed .rmenu__seg-in { color: #fff; }
  .is-on .eq i { animation: none; height: 9px; }
  .arc-track { min-height: 0 !important; }
  .arc-stage { position: static; height: auto; }
  .arc-on .c3-card { position: static; transform: none !important; opacity: 1 !important; }
  .repel .rl { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   5. ОБЛЕГЧЁННЫЙ РЕЖИМ
   ───────────────────────────────────────────────────────────────────
   Класс .lite на <html> ставит theme-init.js (по паспорту машины) и
   site-app.js (по замеру настоящих кадров). Здесь описано, чем именно
   облегчается страница.

   Главное правило этого блока: НИ ОДНА анимация не выключается. Всё,
   что здесь снимается, — это эффекты, которые браузер обязан считать
   заново в каждом кадре на всю площадь элемента, и при этом почти не
   видны глазом.

   • Размытие подложки (backdrop-filter). Самое дорогое, что есть на
     странице. Под каждым «стеклом» течёт живой фон, то есть картинка
     под ним меняется постоянно, и размытие честно пересчитывается
     шестьдесят раз в секунду — для каждого стекла отдельно. Фоны при
     этом непрозрачны на три четверти и больше: разница видна, только
     если знать, куда смотреть.

   • Вторые слои свечения у карточек: пятно, ползущее за курсором.
     Каждое такое пятно — отдельный слой на видеокарте.

   • Мягкость запасного фона: то же движение, вдвое дешевле размытие.
   ═══════════════════════════════════════════════════════════════════ */
html.lite .glass,
html.lite .mock,
html.lite .c3-card,
html.lite .nav,
html.lite .nav::before,
html.lite .read__bar,
html.lite .mnav__bg,
html.lite .rmenu,
html.lite .rmenu__seg,
html.lite .success-modal__backdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Пятно света под курсором и косой блик на карточке тарифа. Оба —
   лишний слой поверх содержимого; на слабой машине они первыми
   отъедают кадры при наведении. */
html.lite .c3-card::after,
html.lite .deliv::before,
html.lite .info-card::before,
html.lite .case-card::before,
html.lite .timeline-item::before,
html.lite .scope-pill::before,
html.lite .service-track__item::before,
html.lite .metric-card::before,
html.lite .founder-card::before,
html.lite .leadership-note::before,
html.lite .contact-extra::before { display: none !important; }

html.lite .ink i { filter: blur(34px); }

/* Смазывание при появлении блоков. Filter:blur на входе каждого блока
   означает отдельный проход размытия на все две трети секунды его
   появления — и так по всей длине страницы. Сдвиг и прозрачность
   остаются, ощущение прихода блока — тоже. */
html.lite [data-stagger] > *,
html.lite .rv { filter: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   6. ИНТЕРАКТИВНАЯ КАРТА: ПРАВКА, УДАЛЕНИЕ, КРУЖКИ ОКНА
   ═══════════════════════════════════════════════════════════════════ */

/* Кнопка удаления. Красной делаем только при наведении: постоянно
   красная кнопка в ряду серых читается как предупреждение об ошибке,
   которой нет. */
.ico--danger:hover { background: rgba(190,18,60,.10); color: #BE123C; }
.ico--danger[hidden] { display: none; }

/* ——— поля, которые можно править ———
   Разбор, созданный посетителем, правится прямо по тексту карточки.
   Чтобы это было видно до нажатия, у таких полей появляется мягкая
   подложка и пунктирная кромка: место, куда можно вписать своё. */
.is-editable {
  border-radius: 8px;
  outline: 1px dashed rgba(var(--accent-rgb),.32);
  outline-offset: 3px;
  background: rgba(var(--accent-rgb),.045);
  transition: outline-color .2s var(--ease), background .2s var(--ease);
  cursor: text;
}
.is-editable:hover { outline-color: rgba(var(--accent-rgb),.5); }
.is-editable:focus {
  outline: 2px solid var(--cyan);
  background: rgba(var(--accent-rgb),.07);
}
/* Заголовок карточки — блочный, поэтому подложка у него шире строки;
   у строчных полей она обнимает сам текст. */
h3.is-editable { display: block; }

/* Подсказка появляется один раз на карточку, а не у каждого поля:
   пять одинаковых подписей рядом читаются как шум. */
.map-editing .read__body::before {
  content: "Это ваш разбор — текст можно править прямо здесь";
  display: block;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(var(--accent-rgb),.09);
  color: var(--ice);
  font-size: 11.5px; font-weight: 600;
}

/* В списке разборы посетителя помечены оранжевой чертой слева. */
.row--mine { box-shadow: inset 2px 0 0 var(--cyan); }

/* ——— кружки окна ———

   Свёрнутый макет: остаётся одна строка заголовка. Сначала гаснет
   содержимое (класс is-folding), и только потом оно убирается из
   раскладки (is-folded). Порядок держит site-app.js.

   Убирать содержимое сразу нельзя — исчезновение без перехода читается
   как сбой. Плавно менять высоту тоже нельзя: пришлось бы завести
   overflow:hidden, а он обрезал бы подсказки над кнопками карточки. */
.mock__body { transition: opacity .22s var(--ease); }
.mock.is-folding .mock__body { opacity: 0; }
.mock.is-folded .mock__body { display: none; }
/* Свёрнутое окно не должно оставлять после себя дыру в странице. */
.mock.is-folded { margin-bottom: 32px; }

/* Развёрнутый макет выходит за поля обёртки — ровно настолько,
   насколько позволяет ширина окна.

   Ширина и отрицательный отступ считаются в CSS, без transform. Так
   надо: у макета есть анимация появления, и она в конце ставит
   transform:none — свой сдвиг он бы просто стёр.

   Перехода по ширине здесь намеренно нет, хотя поначалу он был.
   Ширина и отступ — свойства раскладки: пока они плавно меняются,
   браузер в каждом кадре заново пересчитывает раскладку ВСЕГО, что
   лежит внутри макета, — а внутри целая карта бизнеса с боковым
   меню, списком находок и карточкой. Это ровно тот расход, ради
   снятия которого затевалась вся правка скорости. Разворот
   происходит сразу, как и положено разворачиванию окна. */
.mock.is-wide {
  width: min(1560px, calc(100vw - 32px));
  margin-left: calc((100% - min(1560px, 100vw - 32px)) / 2);
}
@media (max-width: 1024px) { .mock.is-wide { width: 100%; margin-left: 0; } }

/* ——— пасхальное окно ———
   То же окно, что показывает «Заявка отправлена», но со звездой вместо
   галочки и оранжевым кружком вместо зелёного: сообщение не деловое, и
   выглядеть оно должно иначе. */
.success-modal--egg .success-modal__icon {
  background: rgba(var(--accent-rgb),.14);
  color: var(--ice);
}
/* Значок прочерчивается пунктиром, а длина пунктира задана под
   галочку — тридцать единиц. У звезды контур почти вдвое длиннее, и с
   прежним значением она дорисовывалась только наполовину: получалась
   не звезда, а росчерк. */
.success-modal--egg .success-modal__icon svg path {
  stroke-dasharray: 50; stroke-dashoffset: 50;
  animation-duration: .78s;
}