/* ─── Modal ──────────────────────────────────────────────────────────────────
   Values: site/tokens.css (--ds-modal-* tokens)
   Consumers: site/preview/modal.html + src/components/Modal/Modal.tsx
   States: data-attributes only
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Backdrop ──────────────────────────────────────────────────────────────── */

.ds-modal-backdrop {
  position:        fixed;
  inset:           0;
  z-index:         var(--ds-modal-z);
  background:      var(--ds-modal-backdrop-bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--ds-modal-padding);

  opacity:    0;
  transition: opacity var(--ds-modal-dur) ease;
}

.ds-modal-backdrop[data-open] {
  opacity: 1;
}

/* ── Dialog ────────────────────────────────────────────────────────────────── */

.ds-modal {
  position:       relative;
  display:        flex;
  flex-direction: column;
  background:     var(--ds-modal-bg);
  border-radius:  var(--ds-modal-r);
  box-shadow:     var(--ds-modal-shadow);
  width:          var(--ds-modal-md-w);
  max-width:      calc(100vw - 48px);
  max-height:     calc(100vh - 96px);
  overflow:       hidden;
  /* Figma 1215:36573: padding и gap живут на КОНТЕЙНЕРЕ, а не на каждой секции.
     Раньше padding 24 стоял отдельно у header/body/footer, и между секциями
     набегало 24+24 = 48 вместо фигмовских 24. */
  padding:        var(--ds-modal-padding);
  gap:            var(--ds-modal-gap);

  opacity:    0;
  transform:  scale(0.96) translateY(4px);
  transition: opacity var(--ds-modal-dur) var(--ds-ease),
              transform var(--ds-modal-dur) var(--ds-ease);
}

.ds-modal[data-open] {
  opacity:   1;
  transform: scale(1) translateY(0);
}

/* ── Sizes ─────────────────────────────────────────────────────────────────── */

.ds-modal[data-size='sm'] { width: var(--ds-modal-sm-w); }
.ds-modal[data-size='lg'] { width: var(--ds-modal-lg-w); }

/* Fullscreen: 100vw x 100vh, no radius — plain fade (scale feels wrong) */
.ds-modal[data-size='fullscreen'] {
  width:         100vw;
  height:        100vh;
  max-width:     100vw;
  max-height:    100vh;
  border-radius: 0;
  box-shadow:    none;
  transform:     none;
}
.ds-modal[data-size='fullscreen'][data-open] {
  transform: none;
}

/* ── Header ────────────────────────────────────────────────────────────────── */

/* Figma Header FRAME = VERTICAL, padding 0, gap 8, HUG (h56 = Title 28 + gap 8 + Subtitle 20).
   Раньше здесь был ГОРИЗОНТАЛЬНЫЙ ряд title|close с собственным padding 24 и
   border-bottom — разделителя в макете нет вовсе (root.findAll по LINE / тонким RECT /
   именам divider|separator|line вернул пусто), а close вынесен из потока (см. ниже). */
.ds-modal-header {
  display:         flex;
  flex-direction:  column;
  align-items:     stretch;
  gap:             var(--ds-modal-header-gap);
  flex-shrink:     0;
}

/* Заголовок не должен заезжать под абсолютную кнопку закрытия. В Figma Title = FILL 592
   и формально перекрывается close'ом — на коротком макетном заголовке это не видно,
   но в проде заголовки длинные. Резерв включается ТОЛЬКО когда close реально есть. */
.ds-modal:has(> .ds-modal-close) .ds-modal-title {
  padding-inline-end: calc(var(--ds-comp-unit) * 12);  /* 40 close + 8 зазор */
}

.ds-modal-title {
  font-size:   var(--ds-modal-title-fs);
  font-weight: var(--ds-modal-title-fw);
  line-height: var(--ds-modal-title-lh);
  color:       var(--ds-text-primary);
  margin:      0;
  min-width:   0;
}

/* ── Close button ──────────────────────────────────────────────────────────── */

/* Figma: close это layoutPositioning=ABSOLUTE, constraints {horizontal:MAX, vertical:MIN},
   позиция rel 584/16 при ширине 640 → инсет 16 от верха и правого края, вне потока.
   Раньше кнопка сидела в потоке горизонтального хедера и получала инсет 24/24. */
.ds-modal-close {
  position:        absolute;
  top:             var(--ds-modal-close-inset);
  inset-inline-end: var(--ds-modal-close-inset);
  z-index:         1;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           calc(var(--ds-comp-unit) * 10); /* 40px */
  height:          calc(var(--ds-comp-unit) * 10); /* 40px */
  border:          none;
  background:      transparent;
  /* Крестик — ИКОНКА ghost-кнопки: макет (1215:36573, роль Tertiary/x/Vector.s) держит его на
     Icon/Neutral-Blue/Ghost/Default. Стоял --ds-text-tertiary, то есть иконку красили текстовым
     токеном — шестой случай этого класса за 2026-08-04. Ряды расходятся во ВСЕХ четырёх модах
     (#222629 против #6b7175 в светлой), так что здесь даже совпадения по значению не было. */
  color:           var(--ds-icon-neutral-ghost);
  border-radius:   var(--ds-radius-lg); /* 12px, Figma 1214:36323 */
  cursor:          pointer;
  outline:         none;
  transition:      background var(--ds-dur-2) ease, color var(--ds-dur-2) ease;
}

.ds-modal-close:hover {
  background: var(--ds-nba-20);
  color:      var(--ds-text-primary);
}

[data-theme='dark'] .ds-modal-close:hover {
  background: var(--ds-nba-40);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ds-modal-close:hover {
    background: var(--ds-nba-40);
  }
}

.ds-modal-close:focus-visible,
.ds-modal-close[data-focus-visible] {
  box-shadow: var(--ds-focus-ring);
}

/* ── Description ───────────────────────────────────────────────────────────── */

/* Figma «Subtitle» — второй ребёнок Header'а, под Title с gap 8 (не отдельный блок под
   хедером с собственным padding-top 12, как было). Кегль/интерлиньяж/вес — из макета. */
.ds-modal-description {
  color:       var(--ds-text-tertiary);   /* Figma 1215:36573 description = Static/Text/Neutral-Blue/Tertiary; was secondary */
  font-size:   var(--ds-modal-subtitle-fs);
  line-height: var(--ds-modal-subtitle-lh);
  font-weight: var(--ds-modal-subtitle-fw);
  margin:      0;
}

/* ── Body ──────────────────────────────────────────────────────────────────── */

/* Без заголовка хедер вообще не рендерится, и первая строка тела оказывалась в одной
   полосе с абсолютным крестиком — длинная строка уехала бы под него. Раньше клиренс
   давал сам хедер (он рисовался ради close даже без title). Резерв: close 40 + инсет 16
   = 56 от верха модалки, минус её собственный padding 24 → 32. */
.ds-modal:has(> .ds-modal-close):not(:has(> .ds-modal-header)) > .ds-modal-body {
  padding-block-start: calc(var(--ds-comp-unit) * 8);
}

/* Figma Swap Container = SLOT, padding 0, FILL — разрядку задаёт gap контейнера. */
.ds-modal-body {
  overflow-y:  auto;
  flex:        1 1 auto;
  min-height:  0;
  color:       var(--ds-text-secondary);
  font-size:   15px;
  line-height: 1.55;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */

/* Figma Buttons Group = FRAME padding 0, FILL; разделителя над футером в макете нет. */
.ds-modal-footer {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             var(--ds-space-2);
  flex-shrink:     0;
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ds-modal-backdrop,
  .ds-modal {
    transition: none;
  }
}