/* API-145 / DEC-078: the product switcher shared with the ergodic docs. These rules are
   identical to the switcher rules in ergodic's docsite/assets/site.css, and docs.css stays
   byte-identical to the copy ergodic vendors. Tokens only (tokens.css). */
.product-switcher { position: relative; margin-right: 8px; }
.product-switcher > summary { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px 0 8px; border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--muted-foreground); font-size: 13px; font-weight: 500; cursor: pointer; list-style: none; white-space: nowrap; }
.product-switcher > summary::-webkit-details-marker { display: none; }
.product-switcher > summary:hover, .product-switcher[open] > summary { background: var(--hover); color: var(--foreground); }
.product-switcher > summary .icon { width: 14px; height: 14px; }
.product-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: grid; gap: 2px; width: 260px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); box-shadow: var(--shadow-sm); }
.product-menu a { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--radius-control); }
.product-menu a:hover { background: var(--hover); }
.product-menu a[aria-current="true"] { background: var(--secondary); }
.product-menu strong { display: flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; }
.product-menu strong .icon { width: 12px; height: 12px; color: var(--muted-foreground); }
.product-menu small { font-size: 12.5px; color: var(--muted-foreground); }

@media (max-width: 860px) { .product-switcher { margin-right: 0; } .product-menu { left: auto; right: -40px; } }