/* The reference stylesheet supplies all geometry and colors. These states replace React. */
nav[data-chrome-hover] > a .nav-item-hover { background-color: transparent !important; }
nav[data-chrome-hover] > a:active .nav-item-hover { background-color: var(--nav-item-pressed) !important; }
nav[data-chrome-hover][data-chrome-theme="dark"] > a:not(:hover):not(:focus-visible) .nav-item { color: white; }
nav[data-chrome-hover][data-chrome-theme="light"] > a:not(:hover):not(:focus-visible) .nav-item { color: var(--color-text-primary); }
.chrome-mobile-close { position: absolute; top: 0; right: 4px; z-index: 3; height: 40px; width: 66px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.chrome-mobile-close[hidden] { display: none; }
[data-chrome-mobile][data-menu-state="open"] > div:first-child,
[data-chrome-mobile][data-menu-state="closing"] > div:first-child { height: calc(100% + 8px); }
[data-chrome-mobile][data-menu-state="opening"],
[data-chrome-mobile][data-menu-state="open"],
[data-chrome-mobile][data-menu-state="closing"] { z-index: 50; }
[data-chrome-mobile] .mobile-nav-extended[hidden] { display: none; }
#faq [data-chrome-faq-panel] { height: 0; transition: height 200ms cubic-bezier(.4,0,.2,1); }
#faq [data-chrome-faq-panel][hidden] { display: none; }
#faq [data-chrome-faq-card]:has(button:focus-visible) { z-index: 10; border-color: var(--color-blue-500); box-shadow: 0 0 0 3px rgba(66,181,220,.3); }
.chrome-mobile-close:focus-visible { outline: 2px solid var(--color-blue-500); outline-offset: -2px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) #faq [data-chrome-faq-panel],
  html:not([data-motion="full"]) #faq [data-chrome-faq-card] svg { transition: none !important; }
}
html[data-motion="reduced"] #faq [data-chrome-faq-panel],
html[data-motion="reduced"] #faq [data-chrome-faq-card] svg { transition: none !important; }