/* ================================================================
   collapse.css — компонент сворачиваемых блоков (details/summary).

   Подключается ТОЛЬКО на crystalight.html и framelight.html в <head>
   после основного CSS (?v=1). Свой компонент: общие бандлы
   (framework.min.css, crystalight.min.css) не трогаем.

   Механика — нативный <details class="cl-collapse"> + <summary>:
   работает без JS, текст остаётся в HTML и индексируется, доступность
   из коробки (toggle встроен в браузер).

   Дизайн — дизайн-система v2: тёмный графит + лаймовый акцент,
   токены --cl-* переиспользуются (см. crystalight-v2.css).
   ================================================================ */

/* --- ПАНЕЛЬ сворачиваемого блока ---------------------------------- */
.cl-collapse{
  display:block;
  margin:18px 0 4px;
  border:1px solid var(--cl-line-soft, rgba(255,255,255,.06));
  border-radius:var(--cl-radius-md, 18px);
  background:var(--cl-panel, #151a16);
  overflow:hidden;
}

/* --- Заголовок-кнопка (summary) ----------------------------------- */
.cl-collapse > summary{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 48px 16px 18px;
  margin:0;
  cursor:pointer;
  list-style:none; /* убираем нативный маркер (Chrome/Safari) */
  font-family:var(--cl-font, 'Manrope','Open Sans',Arial,sans-serif);
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:.1px;
  color:var(--cl-text, #f2f4ec);
  background:transparent;
  border:none;
  transition:background .18s ease;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.cl-collapse > summary::-webkit-details-marker{display:none} /* Safari */
.cl-collapse > summary:-webkit-details-marker{display:none}
.cl-collapse > summary:hover{background:#ffffff08}
.cl-collapse > summary:focus-visible{
  outline:2px solid var(--cl-lime, #c4f66b);
  outline-offset:-2px;
  border-radius:var(--cl-radius-md, 18px);
}

/* Стрелка-индикатор справа */
.cl-collapse > summary .cl-collapse__caret{
  flex-shrink:0;
  width:20px;height:20px;
  margin-left:auto;
  color:var(--cl-lime, #c4f66b);
  transition:transform .22s ease;
}
.cl-collapse[open] > summary .cl-collapse__caret{transform:rotate(180deg)}

/* --- Контент блока ------------------------------------------------ */
.cl-collapse .cl-collapse__body{
  padding:0 18px 18px;
  border-top:1px solid var(--cl-line-soft, rgba(255,255,255,.06));
}
.cl-collapse[open] .cl-collapse__body{border-top:1px solid var(--cl-line-soft, rgba(255,255,255,.06))}

/* Сброс отступов у внутреннего контента, чтобы не задваивались */
.cl-collapse .cl-collapse__body > :first-child{margin-top:16px}
.cl-collapse .cl-collapse__body > :last-child{margin-bottom:0}

/* --- Редуцированное движение -------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .cl-collapse > summary .cl-collapse__caret{transition:none}
}

/* --- Мобильные подстройки ------------------------------------------ */
@media (max-width: 820px){
  .cl-collapse > summary{
    font-size:13.5px;
    padding:15px 44px 15px 16px;
  }
  .cl-collapse{margin:16px 0 4px}
}