/* Общий блок «Вопросы и ответы» (partials/site/faq.html, js/site-faq.js): фильтры-группы, раскрывающиеся ответы, поиск и счётчик.
   Слой site: вид по умолчанию берёт переменные каркаса --site-*; страница меняет его переменными --faq-* и правилами в своём слое page.
   Переменные: --faq-accent (цвет выбранной группы и стрелки), --faq-accent-ink (текст на нём), --faq-radius, --faq-bg, --faq-bg-open, --faq-line-open, --faq-cols (колонок на широком экране). */
@layer site {
  .site-faq { display: grid; gap: 1.2rem; margin-top: 2rem; }
  .site-faq__tools { display: grid; gap: 1rem; }
  .site-faq__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .site-faq__tab { margin: 0; padding: 0.5rem 1rem; border: 1px solid var(--site-line); border-radius: 2rem; background: transparent; color: var(--site-dim); cursor: pointer; font: inherit; font-size: 0.92rem; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
  .site-faq__tab:hover { border-color: var(--faq-accent, var(--site-fg)); color: var(--site-fg); }
  .site-faq__tab[aria-pressed="true"] { background: var(--faq-accent, var(--site-fg)); border-color: var(--faq-accent, var(--site-fg)); color: var(--faq-accent-ink, var(--site-accent-ink)); font-weight: 600; }
  .site-faq__search { display: grid; gap: 0.3rem; max-width: 24rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faq-accent, var(--site-dim)); }
  .site-faq__search input { padding: 0.65rem 1rem; border: 1px solid var(--site-line); border-radius: 0.4rem; background: var(--faq-bg, rgba(255, 255, 255, 0.025)); color: var(--site-fg); font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; }
  .site-faq__search input::placeholder { color: var(--site-dim); }
  .site-faq__search input:focus-visible { border-color: var(--faq-accent, var(--site-fg)); }
  .site-faq__list { display: grid; gap: 0.6rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 62em) { .site-faq__list { grid-template-columns: repeat(var(--faq-cols, 2), minmax(0, 1fr)); gap: 0.7rem 1.2rem; } }
  .site-faq__list > .site-faq__none { grid-column: 1 / -1; }
  .site-faq__q { border: 1px solid var(--site-line); border-radius: var(--faq-radius, 0.4rem); background: var(--faq-bg, rgba(255, 255, 255, 0.025)); transition: background-color 0.2s, border-color 0.2s; }
  .site-faq__q[hidden], .site-faq__none[hidden] { display: none; }
  .site-faq__q:hover, .site-faq__q[open] { border-color: var(--faq-line-open, rgba(255, 255, 255, 0.45)); }
  .site-faq__q[open] { background: var(--faq-bg-open, var(--faq-bg, rgba(255, 255, 255, 0.025))); }
  .site-faq__q summary { position: relative; display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem; cursor: pointer; list-style: none; font-weight: 600; color: var(--site-fg); }
  .site-faq__q summary::-webkit-details-marker { display: none; }
  /* значок раскрытия: стрелка справа; страница может заменить его (ячейка, плюс) правилами для .site-faq__mark */
  .site-faq__t { flex: 1; min-width: 0; }
  .site-faq__mark { order: 2; flex: none; width: 0.55rem; height: 0.55rem; margin-inline-end: 0.4rem; border: solid var(--faq-accent, var(--site-fg)); border-width: 0 2px 2px 0; transform: translateY(-25%) rotate(45deg); transition: transform 0.3s; }
  .site-faq__q[open] .site-faq__mark { transform: translateY(25%) rotate(-135deg); }
  .site-faq__a { padding: 0 1.1rem 1.1rem; color: var(--site-dim); }
  .site-faq__a p { margin: 0 0 0.8rem; }
  .site-faq__a p:last-child { margin-bottom: 0; }
  .site-faq__act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; }
  .site-faq__link { color: var(--faq-accent, var(--site-fg)); text-decoration: none; border-bottom: 1px solid var(--site-line); }
  .site-faq__link:hover { border-bottom-color: currentColor; }
  .site-faq__none { margin: 0.5rem 0 0; color: var(--site-dim); }
  .site-faq__count { margin: 0; font-size: 0.85rem; color: var(--site-dim); }
  .site-faq__count b { color: var(--faq-accent, var(--site-fg)); }
  @media (max-width: 40em) { .site-faq__btn { width: 100%; } }
  @media (prefers-reduced-motion: reduce) { .site-faq__mark, .site-faq__tab, .site-faq__q { transition: none; } }
}
