.app-public .public-sections { position: relative; }
.app-public .public-sections summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 8px 12px; border: 1px solid #ccd8e8; border-radius: 8px; }
.app-public .public-sections nav { position: absolute; right: 0; top: 100%; z-index: 90; display: grid; width: min(280px, calc(100vw - 32px)); padding: 12px; background: #fff; border: 1px solid #ccd8e8; border-radius: 8px; box-shadow: 0 8px 24px #172b4d26; }
.app-public .public-sections nav a { display: flex; align-items: center; min-height: 44px; padding: 8px; color: #172b4d; }
.app-public .public-sections a:focus-visible, .app-public .public-sections summary:focus-visible { outline: 3px solid #1875e8; outline-offset: 2px; }

/* Keep the public destinations visible at narrow widths. */
.app-public .public-nav .public-nav-link { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 900px) {
  .app-public .public-topbar { flex-wrap: wrap; height: auto; padding-block: 12px; }
  .app-public .public-nav { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 8px 16px; }
  .app-public .public-sections nav { right: auto; left: 0; }
}