/* Desktop discovery: compact categories, with the complete directory kept separate. */
.top-nav-group { position: relative; flex: 0 0 auto; }
.top-nav-group[hidden] { display: none; }
.top-nav-group > summary {
  display: flex; align-items: center; gap: 8px; list-style: none;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  color: var(--color-muted-ink); white-space: nowrap;
}
.top-nav-group > summary::-webkit-details-marker { display: none; }
.top-nav-group > summary::after {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px;
}
.top-nav-group[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
.top-nav-group:is([open],.is-current) > summary,.top-nav-group > summary:hover { color: var(--color-accent); }
.top-nav-group > summary:focus-visible,.top-nav-panel a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.top-nav-panel {
  position: absolute; left: 50%; top: calc(100% + 12px);
  transform: translateX(calc(-50% + var(--panel-shift,0px)));
  width: 288px; max-width: calc(100vw - 32px); max-height: calc(100dvh - var(--masthead-height,68px) - 28px);
  overflow-y: auto; overscroll-behavior: contain; z-index: 50;
  border: 1px solid var(--ref-border); border-radius: 8px;
  background: var(--color-surface); color: var(--color-ink);
  box-shadow: 0 10px 24px #0002;
}
.top-nav-articles { padding-block: 8px; }
.top-nav-panel a { display: block; padding: 10px 16px; font-size: 14px; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.top-nav-panel a:hover,.top-nav-panel a[aria-current='page'] { background: var(--ref-muted); color: var(--color-accent); }
.top-nav-panel .top-nav-more { border-top: 1px solid var(--ref-border); text-align: center; color: var(--color-accent); padding-block: 12px; }
@media (min-width: 768px) {
  .masthead[data-compact-nav='true'] #site-nav { display: none; }
  .masthead[data-overflow-nav='true'] .nav-toggle { display: inline-flex; }
  body:has(.masthead[data-overflow-nav='true']) .mobile-nav-panel {
    inset: calc(var(--masthead-height,68px) + 12px) 16px auto auto; margin: 0;
    width: min(480px,calc(100% - 32px)); max-width: 480px; height: auto;
    max-height: calc(100dvh - var(--masthead-height,68px) - 28px);
    border: 1px solid var(--ref-border); border-radius: 16px;
    background: var(--color-surface); color: var(--color-ink); box-shadow: 0 20px 64px #0004;
  }
}
@media (min-width:768px) and (max-width:1100px) {
  .top-nav-group > summary { padding-inline: 6px; font-size: 12px; gap: 6px; }
}
@media (max-width:767px) { .top-nav-group { display: none; } }