/* ─── Popover — shared component styles ───────────────────────────────────────
   Single source of truth for component CSS.
   Values: site/tokens.css (--ds-surface-nb-hc · --ds-stroke-low · --ds-popover-shadow
           · --ds-text-primary · --ds-text-secondary · --ds-radius-lg)
   Primary consumers: site/preview/popover.html + src/components/Popover/Popover.tsx
   Naming: ds-popover prefix
   States: data-attributes only
     data-direction='top|right|bottom|left'  — Figma ось Direction (сторона стрелки)
     data-arrow='start|center|end'           — Figma Direction вложенной .Parts / Pointer
     data-reverse                            — Figma «Direction у Actions group» (реверс)

   ГРАУНД-ТРУС, снят Plugin API 2026-08-31 с набора Popover 1205:3278 (4 варианта):
     ось          Direction (↑ Top | → Right | ↓ Bottom | ← Left), по умолчанию ↑ Top
     контейнер    200×176, padding 12, gap 12, radius 12 (Radius/rad-150)
     рамка        1px Static/Border/Neutral-Blue/Low  → --ds-stroke-low   (#c0c6d0 в Light)
     заливка      Static/Surface/Neutral-Blue/High Contrast → --ds-surface-nb-hc
     тень         effectStyle «Shadow/md» → --ds-popover-shadow (уже был в tokens.css:1254)
     Title        Inter Medium 16/24, Static/Text/Neutral-Blue/Primary
     Description  Inter Regular 14/16, Static/Text/Neutral-Blue/Secondary
     Actions      HORIZONTAL, gap 16 (Gap/gap-200), высота 32
     Close        Tertiary IconOnly 32×32, АБСОЛЮТНО x=164 y=4 при ширине 200 → top 4 right 4
     Стрелка      12×6, инсет 12 от края контейнера, по умолчанию Center

   ЧТО ЗНАЧИТ Direction. Сторона, на которой стоит указывающий уголок. ↑ Top =
   уголок наверху, значит сама панель висит ПОД якорем. Спека и макет здесь
   согласны: фраза спеки «↑ Top — появится сверху» говорит о том, где появится
   УГОЛОК, а не панель (разъяснил владелец 2026-08-31). Я прочитал её иначе и
   записал сюда несуществующее расхождение — снято.

   ПОЧЕМУ СТРЕЛКА — ПОВЁРНУТЫЙ КВАДРАТ, А НЕ border-треугольник. Треугольник на
   границах не умеет иметь собственную рамку, а в макете у стрелки та же рамка 1px
   Static/Border/Neutral-Blue/Low, что и у панели. Квадрат со стороной 12/√2 = 8.485,
   повёрнутый на 45°, даёт ровно 12 в ширину и 6 в высоту выступающей части и несёт
   настоящую рамку на двух внешних гранях. Рамку панели в месте стыка закрывает
   собственная непрозрачная заливка стрелки — поэтому стрелка рисуется ПОВЕРХ, а не
   за панелью (z-index:-1 спрятал бы её под заливку панели вместе со стыком).

   ЗАЛИВКА СТРЕЛКИ — закрыто, макет исправлен. Стрелка стоит на токене ПАНЕЛИ
   (--ds-surface-nb-hc). До 2026-08-31 в макете у неё был свой токен,
   Static/Surface/Neutral/Overlay: в светлой теме оба #ffffff, но в Light-Invert
   они расходились — #222629 у панели против #33373b у стрелки, и на стыке был бы
   виден шов. Владелец подтвердил выбор и поручил починить макет; заливка мастера
   «.Pointer» (1206:4027) перепривязана через setBoundVariableForPaint, проверено
   чтением всех четырёх вариантов — контейнер и стрелка теперь на одном токене.
   ───────────────────────────────────────────────────────────────────────────── */

.ds-popover {
  /* Стрелка позиционируется от границ панели. */
  position: relative;
  /* ЭТАЖА ЗДЕСЬ НЕТ НАМЕРЕННО. Слой всплывшей карточки задаёт крепление
     useAnchoredPopover строчным стилем (--ds-popup-z, 950) — у карточки, вынутой из
     потока, а не у всякого узла с этим классом.
     ПОЧЕМУ НЕ ЗДЕСЬ. 2026-09-17 этаж был поставлен классу, и приёмка в тот же день
     поймала регрессию: z-index действует и на элементы гибкой раскладки БЕЗ
     позиционирования, поэтому 15 статических карточек витрины всплыли над липкой шапкой
     страницы (пересечение 340.6×18.3 px, проба точкой возвращала карточку вместо шапки).
     Стрелка от переезда не пострадала ни в одном из двух состояний — проверено пробой
     точкой в месте стыка при этаже 950 и при его отсутствии. */
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: calc(var(--ds-comp-unit) * 3);          /* Figma Container itemSpacing 12 */

  min-width: calc(var(--ds-comp-unit) * 50);   /* 200 — спека § Размеры и отступы */
  max-width: calc(var(--ds-comp-unit) * 120);  /* 480 — там же */

  padding: calc(var(--ds-comp-unit) * 3);      /* Figma Padding/pad-150 = 12 со всех сторон */

  /* 1px через долю сетки, а не числом — правило never-do про sub-4px. Форма взята
     у ближайшего соседа: dropdown-menu.css:21, та же роль плавающей панели и тот
     же токен рамки. */
  border: calc(var(--ds-comp-unit) * 0.25) solid var(--ds-stroke-low);
  border-radius: var(--ds-radius-lg);          /* rad-150 = 12 */
  background: var(--ds-surface-nb-hc);
  box-shadow: var(--ds-popover-shadow);        /* = --ds-shadow-md, зеркалит по темам */

  color: var(--ds-text-secondary);
}

/* ── Заголовок ─────────────────────────────────────────────────────────────── */
.ds-popover-title {
  margin: 0;
  color: var(--ds-text-primary);               /* Static/Text/Neutral-Blue/Primary */
  font-size: var(--ds-text-md);                /* 16 */
  line-height: calc(var(--ds-comp-unit) * 6);  /* 24 */
  font-weight: 500;                            /* Figma Inter Medium */
}

/* Крестик стоит абсолютно и НЕ раздвигает заголовок. В макете это решено вручную —
   спека прямо просит «делать ручной перенос текста в заголовке, чтобы он не залезал
   под крестик». Ручной перенос в код не переносится: место под кнопку резервирует
   отступ, ровно на её ширину от правого края контента (200 − 164 = 36, минус
   собственный padding контейнера 12 = 24). Тот же приём уже стоит в modal.css:93. */
.ds-popover:has(> .ds-popover-close) > .ds-popover-title {
  padding-right: calc(var(--ds-comp-unit) * 6);
}

/* ── Описание ──────────────────────────────────────────────────────────────── */
.ds-popover-description {
  margin: 0;
  color: var(--ds-text-secondary);             /* Static/Text/Neutral-Blue/Secondary */
  font-size: var(--ds-text-base);              /* 14 */
  line-height: calc(var(--ds-comp-unit) * 4);  /* 16 */
  font-weight: 400;                            /* Figma Inter Regular */
}

/* Спека § Рекомендации: описание не длиннее 5 строк, заголовок не длиннее 2.
   Прокрутка внутри запрещена той же спекой — поэтому обрезка, а не overflow. */
.ds-popover-title,
.ds-popover-description {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.ds-popover-title       { -webkit-line-clamp: 2; }
.ds-popover-description { -webkit-line-clamp: 5; }

/* ── Слот произвольного контента (Figma Swap Container) ────────────────────── */
.ds-popover-slot {
  min-width: 0;
}

/* ── Группа действий ───────────────────────────────────────────────────────── */
.ds-popover-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--ds-comp-unit) * 4);          /* Figma Gap/gap-200 = 16 */
  min-height: calc(var(--ds-comp-unit) * 8);   /* 32 — высота ряда в макете */
}

/* Figma «Direction у Actions group»: реверс порядка кнопки и ссылки. */
.ds-popover-actions[data-reverse] {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* ── Кнопка закрытия ───────────────────────────────────────────────────────── */
/* Позиция снята из макета: x=164, y=4 при ширине контейнера 200 и размере кнопки 32
   → top 4, right 4. Своих размеров и цветов здесь нет намеренно — это инстанс
   Button/Tertiary IconOnly, оформление берётся из button.css. */
.ds-popover-close {
  position: absolute;
  top: var(--ds-comp-unit);
  right: var(--ds-comp-unit);
}

/* ── Стрелка ───────────────────────────────────────────────────────────────── */
.ds-popover-arrow {
  position: absolute;

  /* 12 / √2 = 8.485: сторона квадрата, дающая после поворота ровно 12×6 наружу. */
  width: calc(var(--ds-comp-unit) * 3 / 1.41421356);
  height: calc(var(--ds-comp-unit) * 3 / 1.41421356);

  background: var(--ds-surface-nb-hc);
  border: 0 solid var(--ds-stroke-low);

  pointer-events: none;
}

/* Смещение вдоль грани: центр стрелки. 18 = инсет 12 от края + половина ширины 6,
   то есть при start видимая стрелка начинается ровно на 12 — как pad в макете. */
.ds-popover-arrow[data-arrow='start']  { --_pv-along: calc(var(--ds-comp-unit) * 4.5); }
.ds-popover-arrow[data-arrow='center'] { --_pv-along: 50%; }
.ds-popover-arrow[data-arrow='end']    { --_pv-along: calc(100% - var(--ds-comp-unit) * 4.5); }

/* Стрелка сверху панели (Figma ↑ Top): наружу смотрят северо-восточная и
   северо-западная грани — после поворота это border-top и border-left. */
.ds-popover[data-direction='top'] > .ds-popover-arrow {
  top: 0;
  left: var(--_pv-along, 50%);
  transform: translate(-50%, -50%) rotate(45deg);
  border-top-width: calc(var(--ds-comp-unit) * 0.25);
  border-left-width: calc(var(--ds-comp-unit) * 0.25);
}

/* Стрелка снизу (↓ Bottom): наружу — юго-восток и юго-запад. */
.ds-popover[data-direction='bottom'] > .ds-popover-arrow {
  bottom: 0;
  left: var(--_pv-along, 50%);
  transform: translate(-50%, 50%) rotate(45deg);
  border-bottom-width: calc(var(--ds-comp-unit) * 0.25);
  border-right-width: calc(var(--ds-comp-unit) * 0.25);
}

/* Стрелка слева (← Left): наружу — северо-запад и юго-запад. */
.ds-popover[data-direction='left'] > .ds-popover-arrow {
  left: 0;
  top: var(--_pv-along, 50%);
  transform: translate(-50%, -50%) rotate(45deg);
  border-left-width: calc(var(--ds-comp-unit) * 0.25);
  border-bottom-width: calc(var(--ds-comp-unit) * 0.25);
}

/* Стрелка справа (→ Right): наружу — северо-восток и юго-восток. */
.ds-popover[data-direction='right'] > .ds-popover-arrow {
  right: 0;
  top: var(--_pv-along, 50%);
  transform: translate(50%, -50%) rotate(45deg);
  border-top-width: calc(var(--ds-comp-unit) * 0.25);
  border-right-width: calc(var(--ds-comp-unit) * 0.25);
}