/* ═══════════════════════════════════════════════════════════════
   Меню «Сервисы» Trely — стили пакета
   ═══════════════════════════════════════════════════════════════

   У каждой переменной есть значение по умолчанию: на странице,
   где токенов Trely нет, меню возьмёт запасное и будет выглядеть
   так же. Где токены есть — подхватит их.

   Все правила начинаются с .svc — за пределы меню пакет не лезет
   и чужие button/a/ul не трогает.

   Собственный сброс тут не прихоть: на нашем сайте есть глобальный
   `* { margin:0; padding:0 }`, а на чужой странице его может не быть,
   и список меню приехал бы с браузерными отступами и маркерами. */

.svc, .svc *, .svc-scrim, .svc-panel, .svc-panel * { box-sizing: border-box; }

.svc {
  position: relative;
  display: inline-flex;
  font-family: var(--ff, 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
  letter-spacing: -0.01em;
}

/* ─────────── кнопка ─────────── */
/* Область нажатия 44 px набрана высотой и отступами, а не кеглем. */
.svc-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--line, #E5E2DC);
  border-radius: var(--r-pill, 999px);
  background: var(--white, #FFFFFF);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: inherit;
  color: var(--black, #0F1014);
  cursor: pointer;
}
.svc-btn:hover { border-color: var(--gold, #C6A064); color: var(--gold, #C6A064); }
.svc-dots { width: 18px; height: 18px; flex: 0 0 18px; color: var(--gold, #C6A064); }
.svc-chev { width: 16px; height: 16px; flex: 0 0 16px; opacity: .5; transition: transform .18s; }
.svc-btn[aria-expanded="true"] .svc-chev { transform: rotate(180deg); }
.svc-btn:focus-visible,
.svc-list a:focus-visible {
  outline: 2px solid var(--gold, #C6A064);
  outline-offset: 3px;
  border-radius: var(--r-sm, 8px);
}

/* ─────────── прозрачный слой ─────────── */
/* Без него клик «мимо, чтобы закрыть» проваливается в то, что лежит
   под меню, и уводит человека со страницы: он хотел закрыть. */
.svc-scrim { position: fixed; inset: 0; z-index: 55; }
.svc-scrim[hidden] { display: none; }

/* ─────────── панель ─────────── */
/* Во всю ширину окна с одинаковым зазором по краям и вплотную к шапке:
   панель продолжает шапку вниз, поэтому сверху углов нет, а снизу есть.
   Позиция от окна, а не от кнопки — на 1280 и на 1920 ведёт себя одинаково.
   Высота шапки и зазор — переменные: у другого продукта шапка своя. */
.svc-panel {
  position: fixed;
  top: var(--svc-top, 72px);
  left: var(--svc-gap, 20px);
  right: var(--svc-gap, 20px);
  z-index: 60;
  /* Узор лежит под содержимым и прижат к краям панели. cover, а не
     растяжение: пропорции завитка сохраняются, лишнее просто обрезается. */
  background: var(--white, #FFFFFF) url("panel-bg.7ba6f23a.webp") right center / cover no-repeat;
  border: 1px solid var(--line, #E5E2DC);
  border-top: none;
  border-radius: 0 0 var(--r-xl, 32px) var(--r-xl, 32px);
  box-shadow: var(--sh-soft, 0 4px 24px rgba(39, 60, 63, .06));
  /* Сверху воздуха больше, чем снизу, — как на макете: панель растёт
     от шапки, и верхний отступ отделяет её от неё. */
  padding: 48px var(--s-4, 32px) 36px;
  text-align: left;
  overflow: hidden;
}
.svc-panel[hidden] { display: none; }

/* ─────────── колонки ─────────── */
/* По верхнему краю и по содержимому: у одного продукта пункт один,
   у другого пять — растянуть короткие значит добить их пустотой.
   Не сжимаются: иначе короткий пункт ломается на две строки
   из-за длинного соседа по колонке. */
/* Зазор между колонками — padding, а не gap: линия под названиями
   продуктов должна идти сплошной, а gap разорвал бы её на промежутках.
   Список выходит в этот зазор отрицательным полем и возвращает его себе
   своим padding — сама линия смыкается, пункты остаются в колонке.
   Последняя колонка растянута, чтобы линия дошла до края содержимого. */
.svc-grid { display: flex; align-items: flex-start; gap: 0; }
.svc-col { flex: none; min-width: 0; padding-right: 36px; }
.svc-col:last-child { flex: 1; padding-right: 0; }
.svc-name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--black, #0F1014);
  white-space: nowrap;
}
.svc-note {
  font-size: 13px;
  line-height: 1.4;
  color: var(--gray, #6B6F71);
  margin: 2px 0 0;
  white-space: nowrap;
}
/* Линия отделяет названия продуктов от пунктов, воздух вокруг неё
   тот же сверху и снизу. */
.svc-list {
  list-style: none;
  margin: var(--s-3, 24px) -36px 0 0;
  padding: 48px 36px 0 0;
  border-top: 1px solid var(--line, #E5E2DC);
  display: flex;
  flex-direction: column;
}
.svc-list li { margin: 0; padding: 0; list-style: none; }
/* Строка нажимается пальцем: 36 px высоты плюс отступы. */
.svc-list a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 36px;
  max-width: 300px;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--gray, #6B6F71);
  text-decoration: none;
}
.svc-list a:hover { color: var(--gold, #C6A064); }
/* Значок держится первой строки: у длинной подписи выравнивание
   по центру увело бы его на середину блока. */
.svc-ico { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; color: var(--gold, #C6A064); }

/* ─────────── узкие экраны ─────────── */
/* Кнопка остаётся на любой ширине: это навигация по продуктам,
   на телефоне она нужнее всего. А панель перестаёт быть выпадашкой
   у края и разворачивается во всю ширину — пять колонок в 375 px
   не живут. */
@media (max-width: 900px) {
  .svc-panel {
    max-height: calc(100vh - var(--svc-top, 72px) - 24px);
    overflow-y: auto;
    padding: var(--s-3, 24px);
    border-radius: 0 0 var(--r-lg, 24px) var(--r-lg, 24px);
  }
  .svc-grid { flex-direction: column; gap: var(--s-3, 24px); }
  .svc-col, .svc-col:last-child { flex: none; width: 100%; padding-right: 0; }
  .svc-list { margin: 12px 0 0; padding: 16px 0 0; }
  .svc-name, .svc-note { white-space: normal; }
}
/* Ниже 600 px подпись кнопки не помещается рядом с логотипом
   и «Профилем» — остаётся решётка. Имя для экранного диктора
   держится на aria-label в разметке. */
@media (max-width: 600px) {
  .svc-btn span { display: none; }
  .svc-btn { padding: 0 12px; }
}

/* ─────────── ДВЕ ЗОНЫ: где ты сейчас и куда ещё можно уйти ───────────
   Задача 134. Панель на сайте продукта делится надвое: слева разделы
   этого продукта, справа остальные продукты по одной ссылке.

   Разметку отдаёт render(current=...). Без current панель прежняя —
   правила ниже к ней не применяются вовсе, они висят на модификаторе. */

/* ─────────── ПАНЕЛЬ КАК НА trely.io ───────────
   Образец утверждён руководителем 24.08: ряд колонок, у каждой название
   продукта и подпись, вся колонка — одна ссылка. Ни списков, ни галочек.

   Это НЕ выпадашка под шапкой: панель открывается от верха окна, шапка
   лежит поверх неё, и ряд встаёт в одну строку с логотипом. Шапке для
   этого нужна одна строка на стороне слоя:

     header.site { position: sticky; z-index: 50; }   — как и было

   **Панель обязана лежать ВНУТРИ шапки**, последним элементом перед
   `</header>`. Снаружи шапка перекрывает её целиком и забирает себе
   все нажатия: ряд продуктов видно, а щёлкнуть по нему нельзя — клик
   достаётся шапке. На это наступили 24.08 сразу на четырёх сайтах.

   Внутри шапки порядок правильный сам собой: сначала её фон, потом
   панель (z-index 60), потом логотип и правые кнопки (z-index 80).
   Фон шапке снимать не надо — панель закрывает его изнутри, а по краям
   окна, куда панель не достаёт, полоса шапки остаётся на месте.

   Логотип пакет поднимает сам. Правые кнопки шапки — тоже он, правилом
   ниже: имена классов у нас общие на все шесть сайтов.

   Фон шапки НЕ снимаем. Панель ложится поверх него — она и так белая,
   полоска остаётся белой, мигать нечему. Поверх панели поднимаются
   только логотип (это делает пакет) и правые кнопки шапки.

   **У шапки не должно быть своего z-index.** С ним она становится
   отдельным слоем, и её дети не могут подняться выше панели, сколько
   им ни ставь: логотип уедет под панель.

   Две величины зависят от шапки сайта — задай их у себя:

     .svc-panel { --svc-col-left: 241px; }

   --svc-col-left  отводит слева место под сам логотип: правый край
                   группы плюс 42 px воздуха, минус 21 px — на столько
                   панель отступает от края окна сама. Величину надо
                   измерить в браузере: у каждого сайта свой логотип.

   --svc-row-top   трогать не нужно. Запасные 23.4 px ставят названия
                   продуктов ровно на высоту слова «Профиль» справа —
                   решение руководителя 24.08. Считано, а не подобрано:
                   при шапке 72 px подпись «Профиля» занимает 27…45 от
                   верха окна, и на столько же опущен ряд. Карточки при
                   этом уходят ниже середины логотипа — так и задумано,
                   ровняемся по строке текста, а не по картинкам.
                   Меняется только если у сайта другая высота шапки.

   Класс --split вешает скрипт, а не селектор :has(): браузер, который
   :has() не разбирает, молча выбрасывал это правило целиком — и панель
   открывалась из-под шапки, вместо того чтобы встать вровень с логотипом.
   На это уже наступили 24.08. */

.svc-panel--split {
  top: 0;
  padding-top: var(--svc-row-top, 23.4px);
  padding-left: var(--svc-col-left, 241px);
}

/* Колонка-ссылка: квадратная карточка со значком, справа имя и подпись.
   Вся колонка нажимается целиком. */
.svc-col--one { display: flex; }
.svc-col--one > a {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; text-decoration: none; color: inherit;
}
.svc-col-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Карточка — квадрат со скруглением, значок внутри с полями.
   Фон бежевый, а не белый: на белой панели белый квадрат не виден. */
/* Карточка — квадрат со скруглением, внутри наш рисованный ассет.
   Фон бежевый, а не белый: на белой панели белый квадрат не виден. */
.svc-tile {
  flex: none; position: relative; overflow: hidden;
  width: 48px; height: 48px; border-radius: var(--r-md, 12px);
  background: var(--beige, #F7F6F4);
  transition: background .15s;
}
/* Ассет крупнее карточки и прижат к её левому верхнему углу: вылезает
   вправо и вниз, где его и срезает край. Слева и сверху не режется —
   рисунок должен начинаться целым. */
.svc-tile img {
  position: absolute; top: 5px; left: 5px;
  width: 48px; height: 48px; display: block; object-fit: contain; object-position: left top;
}
.svc-col--one > a:hover .svc-tile { background: var(--tag, #EDE4D1); }
.svc-col--one .svc-name { transition: color .15s; }
.svc-col--one > a:hover .svc-name { color: var(--gold, #C6A064); }
.svc-col--one > a:focus-visible { outline: 2px solid var(--gold, #C6A064); outline-offset: 3px; border-radius: var(--r-sm, 8px); }

/* На узком ряд становится столбцом — правило .svc-grid выше это уже
   делает, здесь только снимаем отступ под логотип. */
@media (max-width: 900px) {
  .svc-panel--split { top: var(--svc-top, 72px); padding-left: var(--s-3, 24px); padding-top: var(--s-3, 24px); }
}

/* ─────────── ГРУППА ЛОГОТИПА КАК КНОПКА МЕНЮ ───────────
   Задача 134. Приём обкатан на trely.io в 131 и перенесён сюда,
   чтобы на всех сайтах он был один. Кто зовёт render_group(),
   получает эти правила; кто оставил кнопку — они ему не мешают,
   классы свои. Переменные с запасными значениями: пакет ставится
   на пять разделов с разными наборами токенов. */

/* Группа поднята над панелью: панель ложится на фон шапки, а логотип,
   решётка и галочка обязаны остаться видимыми и нажимаемыми. */
.lgroup{position:relative;z-index:80;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.lgroup-dots{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:44px;padding:0;border:0;background:none;color:var(--gold, #C6A064);cursor:pointer;border-radius:var(--r-sm, 8px)}
.lgroup-dots svg{width:20px;height:20px;display:block}
.lgroup-dots:focus-visible{outline:2px solid var(--gold, #C6A064);outline-offset:3px}
.lgroup-chev{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:44px;color:var(--black, #0F1014);opacity:.5;cursor:pointer}
.lgroup-chev svg{width:16px;height:16px;display:block;transition:transform .18s}
.lgroup[data-open="true"] .lgroup-chev svg{transform:rotate(180deg)}
.lgroup:hover .lgroup-chev{opacity:.75}
.lgroup[data-open="true"]::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
/* Наведение на логотип — как на trely.io, где «Trely Go» одна ссылка:
   гаснет вся надпись целиком и ничего не перекрашивается. У остальных
   сайтов логотип из двух ссылок («Trely» + «Blog», «Категории»,
   «Направления»), и без этого правила гасла только та половина, на
   которой стоит мышь, а вторая ещё и меняла цвет — по-разному от сайта
   к сайту. Решение руководителя 24.08: везде одинаково. */
/* Правая часть шапки — поверх панели. Панель лежит внутри шапки, и без
   этого «Профиль» и переключатель языка уходили бы под неё. Классы общие
   на все наши сайты, поэтому правило здесь, а не в каждом слое: там его
   один раз уже забыли. */
header .profile-pill, header .lang-switch{position:relative;z-index:80}
.lgroup:hover .logo{opacity:.7}
.lgroup .logo{transition:opacity .15s}
/* Цвет логотипа при наведении не меняется — только яркость. Правило
   нужно потому, что на страницах Shipping висит общее `a:hover{color:gold}`,
   и оно перекрашивало «Trely» в золото, а «Категории» и «Blog» — каждый
   по-своему. Запасные значения совпадают с токенами всех наших сайтов:
   на trely.io они называются --tr-ink и --tr-gold, цвета те же. */
.lgroup a.logo:hover{color:var(--black, #0F1014)}
.lgroup a.logo-section:hover,
.lgroup a.logo-blog:hover{color:var(--gold, #C6A064)}
.lgroup{transition:transform .28s cubic-bezier(.22,1,.36,1)}
.lgroup[data-open="true"]{transform:translateY(-1.5px)}
/* На узком экране группа поджимается: логотип и «Профиль»
   в 375 стоят впритык. */
@media (max-width: 600px) {
  .lgroup{gap:2px}
  .lgroup-dots{min-width:36px}
  .lgroup-chev{min-width:22px}
}

/* ─────────── ДВИЖЕНИЕ ПАНЕЛИ ───────────
   Перенесено с trely.io: панель раскрывается слева направо, колонки
   вступают по очереди с лёгким перелётом, пункты внутри — следом.
   Образец утверждён руководителем 24.08.

   Кадры длинные, потому что пружина посчитана и разложена по кадрам,
   а не набрана кривой Безье: так она одинаково выглядит везде.

   Кто просил систему убрать движение, получает панель без анимации. */

@keyframes svc-raskryt{
      0%{clip-path:inset(0 100.00% 0 0)}
      10%{clip-path:inset(0 75.45% 0 0)}
      20%{clip-path:inset(0 37.73% 0 0)}
      30%{clip-path:inset(0 11.56% 0 0)}
      40%{clip-path:inset(0 0.00% 0 0)}
      50%{clip-path:inset(0 0.00% 0 0)}
      60%{clip-path:inset(0 0.00% 0 0)}
      70%{clip-path:inset(0 0.00% 0 0)}
      80%{clip-path:inset(0 0.00% 0 0)}
      90%{clip-path:inset(0 0.00% 0 0)}
      100%{clip-path:inset(0 0.00% 0 0)}
    }
@keyframes svc-kolonka{
      0%{opacity:0.00;transform:translate(-18px,calc(var(--col-y) * 1.000)) rotate(calc(var(--col-rot) * 1.000)) scale(0.955)}
      8%{opacity:0.37;transform:translate(-14.51px,calc(var(--col-y) * 0.806)) rotate(calc(var(--col-rot) * 0.806)) scale(0.9637)}
      16%{opacity:1.00;transform:translate(-8.55px,calc(var(--col-y) * 0.475)) rotate(calc(var(--col-rot) * 0.475)) scale(0.9786)}
      24%{opacity:1.00;transform:translate(-3.7px,calc(var(--col-y) * 0.206)) rotate(calc(var(--col-rot) * 0.206)) scale(0.9907)}
      32%{opacity:1.00;transform:translate(-0.83px,calc(var(--col-y) * 0.046)) rotate(calc(var(--col-rot) * 0.046)) scale(0.9979)}
      40%{opacity:1.00;transform:translate(0.42px,calc(var(--col-y) * -0.023)) rotate(calc(var(--col-rot) * -0.023)) scale(1.0011)}
      48%{opacity:1.00;transform:translate(0.71px,calc(var(--col-y) * -0.039)) rotate(calc(var(--col-rot) * -0.039)) scale(1.0018)}
      56%{opacity:1.00;transform:translate(0.58px,calc(var(--col-y) * -0.032)) rotate(calc(var(--col-rot) * -0.032)) scale(1.0014)}
      64%{opacity:1.00;transform:translate(0.34px,calc(var(--col-y) * -0.019)) rotate(calc(var(--col-rot) * -0.019)) scale(1.0009)}
      72%{opacity:1.00;transform:translate(0.15px,calc(var(--col-y) * -0.008)) rotate(calc(var(--col-rot) * -0.008)) scale(1.0004)}
      80%{opacity:1.00;transform:translate(0.03px,calc(var(--col-y) * -0.002)) rotate(calc(var(--col-rot) * -0.002)) scale(1.0001)}
      88%{opacity:1.00;transform:translate(-0.02px,calc(var(--col-y) * 0.001)) rotate(calc(var(--col-rot) * 0.001)) scale(1)}
      96%{opacity:1.00;transform:translate(-0.03px,calc(var(--col-y) * 0.002)) rotate(calc(var(--col-rot) * 0.002)) scale(0.9999)}
      100%{opacity:1;transform:none}
    }
@keyframes svc-punkt{
      0%{opacity:0.00;transform:translate(-8px,7px)}
      12%{opacity:0.51;transform:translate(-6.13px,5.36px)}
      24%{opacity:1.00;transform:translate(-3.19px,2.79px)}
      36%{opacity:1.00;transform:translate(-1.07px,0.93px)}
      48%{opacity:1.00;transform:translate(-0.02px,0.02px)}
      60%{opacity:1.00;transform:translate(0.3px,-0.26px)}
      72%{opacity:1.00;transform:translate(0.28px,-0.24px)}
      84%{opacity:1.00;transform:translate(0.16px,-0.14px)}
      96%{opacity:1.00;transform:translate(0.07px,-0.06px)}
      100%{opacity:1;transform:none}
    }
@keyframes svc-svernut{
      from{clip-path:inset(0 0 0 0);opacity:1}
      to{clip-path:inset(0 100% 0 0);opacity:.6}
    }

/* Панель раскрывается слева направо — как на образце. */
.svc-panel.svc-in{animation:svc-raskryt .52s linear both}
.svc-panel .svc-col{--col-rot:0deg;--col-y:0px}
.svc-panel.svc-in .svc-col{animation:svc-kolonka .56s linear both;transform-origin:20% 120%}
.svc-panel.svc-in .svc-col:nth-child(1){--col-rot:-1.5deg;--col-y:15px;animation-delay:.06s}
.svc-panel.svc-in .svc-col:nth-child(2){--col-rot:.9deg;--col-y:5px;animation-delay:.115s}
.svc-panel.svc-in .svc-col:nth-child(3){--col-rot:-.5deg;--col-y:0px;animation-delay:.17s}
.svc-panel.svc-in .svc-col:nth-child(4){--col-rot:1.2deg;--col-y:5px;animation-delay:.225s}
.svc-panel.svc-in .svc-col:nth-child(5){--col-rot:-1.1deg;--col-y:15px;animation-delay:.28s}
.svc-panel.svc-in .svc-col:nth-child(6){--col-rot:.8deg;--col-y:9px;animation-delay:.335s}
.svc-panel.svc-in .svc-col:nth-child(7){--col-rot:-.7deg;--col-y:6px;animation-delay:.39s}
.svc-panel.svc-in .svc-col:nth-child(8){--col-rot:1deg;--col-y:11px;animation-delay:.445s}
.svc-panel.svc-in .svc-list li{animation:svc-punkt .42s linear both;animation-delay:calc(var(--col-d,0s) + var(--li-d,0s))}
.svc-panel.svc-in .svc-col:nth-child(1){--col-d:.14s}
.svc-panel.svc-in .svc-col:nth-child(2){--col-d:.195s}
.svc-panel.svc-in .svc-col:nth-child(3){--col-d:.25s}
.svc-panel.svc-in .svc-col:nth-child(4){--col-d:.305s}
.svc-panel.svc-in .svc-col:nth-child(5){--col-d:.36s}
.svc-panel.svc-in .svc-col:nth-child(6){--col-d:.415s}
.svc-panel.svc-in .svc-col:nth-child(7){--col-d:.47s}
.svc-panel.svc-in .svc-col:nth-child(8){--col-d:.525s}
.svc-panel.svc-in .svc-list li:nth-child(2){--li-d:.034s}
.svc-panel.svc-in .svc-list li:nth-child(3){--li-d:.068s}
.svc-panel.svc-in .svc-list li:nth-child(4){--li-d:.102s}
.svc-panel.svc-in .svc-list li:nth-child(5){--li-d:.136s}
.svc-panel.svc-in .svc-list li:nth-child(6){--li-d:.17s}
.svc-panel.svc-out{animation:svc-svernut .18s cubic-bezier(.4,0,1,1) both}

@media (prefers-reduced-motion: reduce) {
  .svc-panel.svc-in > .svc-grid, .svc-panel.svc-out > .svc-grid,
  .svc-panel.svc-in .svc-col, .svc-panel.svc-in .svc-list li { animation: none; }
}