/* Page-specific responsive navigation for design-system.html. */
html[data-theme-switching="true"] *,
html[data-theme-switching="true"] *::before,
html[data-theme-switching="true"] *::after {
  transition: none !important;
}

.nav-toggle {
  display: none;
}

@media (max-width: 900px) {
  .top {
    gap: 10px;
  }

  .top .nav-toggle {
    display: inline-grid;
  }

  .top nav {
    position: absolute;
    top: calc(100% + 2px);
    right: 16px;
    left: 16px;
    display: grid;
    gap: 4px;
    padding: 8px;
    background: var(--bg-surface);
    border: 2px solid var(--text-primary);
    border-radius: 0 0 16px 16px;
    box-shadow: var(--shadow-pop-card);
  }

  .top nav:not([data-open="true"]) {
    display: none;
  }

  .top nav a {
    display: flex;
    min-height: 44px;
    align-items: center;
  }
}