/* Load after v2-layout.css. The stage keeps its existing size; answers use its list allocation. */
.faq-section:has(> .faq-list[data-faq-motion]) > :first-child { flex: 0 0 auto; }
.faq-section > .faq-list[data-faq-motion] {
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  grid-auto-rows: min-content;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  overflow-anchor: none;
}
.faq-list[data-faq-motion] > details { min-width: 0; box-sizing: border-box; }
.faq-list[data-faq-motion] > details > summary { min-height: 44px; }
.faq-list[data-faq-motion] > details > p { overflow-wrap: anywhere; }
.faq-list[data-faq-motion] > details[data-faq-state='opening'],
.faq-list[data-faq-motion] > details[data-faq-state='closing'] { will-change: height; }
.faq-list[data-faq-motion] > details > summary:focus-visible { outline: 3px solid var(--orange, #ff792d); outline-offset: -3px; }
.faq-list[data-faq-motion] > details > summary[aria-expanded='false'] > span { transform: none; }
.faq-list[data-faq-motion] > details > summary[aria-expanded='true'] > span { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .faq-list[data-faq-motion] > details > summary > span { transition: none; }
}