/* Keep the service links and personal workspace distinct in both layouts. */
.site-header[data-site-navigation] { gap: 24px; }
.site-header[data-site-navigation] .site-nav { margin-left: auto; gap: 20px; }
.site-nav-links, .site-nav-accounts { display: flex; align-items: center; gap: 20px; }
.site-nav-accounts { border-left: 1px solid var(--line); padding-left: 20px; }
.site-header[data-site-navigation] .site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); white-space: nowrap;
}
.site-header[data-site-navigation] :is(a, summary):focus-visible {
  outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px;
}
.site-header[data-site-navigation] .site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-header[data-site-navigation] .mobile-nav { margin-left: auto; }
.site-header[data-site-navigation] .mobile-nav summary { min-height: 44px; font-size: 14px; }
.site-header[data-site-navigation] .mobile-nav nav {
  width: min(300px, calc(100vw - 36px));
  max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain;
}
.mobile-nav .site-nav-links, .mobile-nav .site-nav-accounts { display: grid; gap: 2px; }
.mobile-nav .site-nav-accounts { border-left: 0; border-top: 1px solid var(--line); padding: 10px 0 0; margin-top: 10px; }
.site-header[data-site-navigation] .mobile-nav nav a {
  display: flex; align-items: center; min-height: 44px;
  padding: 10px 12px; font-size: 16px; color: var(--ink);
}
.site-header[data-site-navigation] .mobile-nav [data-display-mode-control] { padding: 12px 12px 4px; }
html[data-display-mode="clear"] .site-header[data-site-navigation] a { color: var(--clear-fg); }
html[data-display-mode="clear"] .site-nav-accounts { border-color: var(--clear-border); }
@media (max-width: 1200px) {
  .site-header[data-site-navigation] .site-nav { display: none; }
  .site-header[data-site-navigation] .mobile-nav { display: block; }
}