/* ============================================================
   acrd.css — аккордеон на <details>/<summary>
   ============================================================ */

   details.acrd {
    /* ---------- Параметры темы ---------- */
    --acrd-primary: #0d5baa;
    --acrd-primary-hover: #0a4a8a;
    --acrd-text: #333333;
    --acrd-text-active: #ffffff;
    --acrd-bg: #ffffff;
    --acrd-bg-hover: #eef4fb;
    --acrd-border: #d7dde4;
    --acrd-radius: 6px;
    --acrd-duration: 0.3s;
    --acrd-padding-y: 12px;
    --acrd-padding-x: 16px;
    --acrd-gap: 8px;
    --acrd-font-size: 15px;
  
    /* ---------- Базовый блок ---------- */
    display: block;
    font-size: var(--acrd-font-size);
    color: var(--acrd-text);
    border: 1px solid var(--acrd-border);
    border-radius: var(--acrd-radius);
    background: var(--acrd-bg);
    margin-bottom: var(--acrd-gap);
    overflow: hidden;
  }
  details.acrd:last-child { margin-bottom: 0; }
  
  /* ---------- Заголовок (summary) ---------- */
  details.acrd > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--acrd-padding-y) var(--acrd-padding-x);
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    color: inherit;
    background: transparent;
    transition:
      background-color var(--acrd-duration) ease,
      color var(--acrd-duration) ease;
  }
  
  /* Убираем стандартный треугольник */
  details.acrd > summary { list-style: none; }
  details.acrd > summary::-webkit-details-marker { display: none; }
  details.acrd > summary::marker { content: ''; }
  
  details.acrd > summary:hover { background: var(--acrd-bg-hover); }
  details.acrd[open] > summary {
    background: var(--acrd-primary);
    color: var(--acrd-text-active);
  }
  details.acrd[open] > summary:hover {
    background: var(--acrd-primary-hover);
  }
  
  /* Иконка «+» / «−» — без span */
  details.acrd > summary::before {
    content: "+";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 16px/1 sans-serif;
  }
  details.acrd[open] > summary::before { content: "−"; }
  
  /* ---------- Содержимое ---------- */
  details.acrd > .acrd__body {
    padding: var(--acrd-padding-y) var(--acrd-padding-x);
    border-top: 1px solid var(--acrd-border);
    background: var(--acrd-bg);
  }
  
  /* Вложенные аккордеоны */
  details.acrd .acrd__body > details.acrd {
    margin-top: var(--acrd-gap);
  }
  
  /* ---------- Плавное раскрытие (современные браузеры) ----------
     В старых — просто мгновенное открытие/закрытие.
     Работает через нативный ::details-content, никаких обёрток
     типа panel/inner не требуется. */
  @supports selector(::details-content) and (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
  
    details.acrd::details-content {
      block-size: 0;
      overflow: hidden;
      transition:
        block-size var(--acrd-duration) ease,
        content-visibility var(--acrd-duration) allow-discrete;
    }
    details.acrd[open]::details-content {
      block-size: auto;
    }
  }