.faq-item summary, .article-link, .article-navigation-link, .language-trigger, .language-options a {
  transition: background-color var(--help-motion-duration) var(--help-motion-easing),
    color var(--help-motion-duration) var(--help-motion-easing);
}
.chevron { transition: transform var(--help-motion-duration) var(--help-motion-easing); }
.faq-item[open] summary { background: var(--help-selected-background); }
@media (hover: hover) {
  .faq-item summary:hover, .article-link:hover, .article-navigation-link:hover {
    background: var(--help-selected-background);
  }
}
/* Native details remains usable where animated details content is unsupported. */
.faq-item[open] .faq-answer { animation: answer-reveal var(--help-motion-duration) var(--help-motion-easing); }
@keyframes answer-reveal {
  from { opacity: 0; transform: translateY(calc(-1 * var(--help-menu-offset))); }
  to { opacity: 1; transform: translateY(0); }
}
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    height: 0;
    overflow: clip;
    opacity: 0;
    transition: height var(--help-motion-duration) var(--help-motion-easing),
      opacity var(--help-motion-duration) var(--help-motion-easing),
      content-visibility var(--help-motion-duration) allow-discrete;
  }
  .faq-item[open]::details-content { height: auto; opacity: 1; }
  .faq-item[open] .faq-answer { animation: none; }
}
.language-options {
  opacity: 0;
  transform: translateY(calc(-1 * var(--help-menu-offset)));
  transition: opacity var(--help-motion-duration) var(--help-motion-easing),
    transform var(--help-motion-duration) var(--help-motion-easing),
    display var(--help-motion-duration) allow-discrete,
    overlay var(--help-motion-duration) allow-discrete;
}
.language-options:popover-open { opacity: 1; transform: translateY(0); }
@starting-style {
  .language-options:popover-open { opacity: 0; transform: translateY(calc(-1 * var(--help-menu-offset))); }
}