/* One stable navigation layout for every public page. */
html { scrollbar-gutter: stable; }
.public-page { --public-header-height: var(--header); }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--public-header-height);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand nav actions";
  align-items: center;
  gap: 32px;
  padding: 0 28px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
html.dark .site-header { background: var(--dark-950); border-bottom-color: var(--dark-700); }
.brand { grid-area: brand; display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 220px; color: var(--gray-900); font-weight: 700; text-decoration: none; }
.brand [data-fill] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html.dark .brand { color: var(--gray-100); }
.site-nav { grid-area: nav; display: flex; align-items: center; gap: 24px; min-width: 0; }
.site-nav a { padding: 8px 0; color: var(--gray-600); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.site-nav a:hover, .site-nav [aria-current="page"] { color: var(--primary-700); }
html.dark .site-nav a { color: var(--dark-300); }
html.dark .site-nav a:hover, html.dark .site-nav [aria-current="page"] { color: var(--primary-300); }
.site-actions { grid-area: actions; display: flex; align-items: center; gap: 8px; }
#header-cta { min-width: 98px; white-space: nowrap; }
#theme-toggle { min-width: 44px; }
@media (max-width: 600px) {
  .public-page { --public-header-height: calc(var(--header) + 40px); }
  .site-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--header) 40px; grid-template-areas: "brand actions" "nav nav"; gap: 0 12px; padding: 0 16px; }
  .brand { max-width: 180px; }
  .site-actions { gap: 4px; }
  .site-nav { align-self: stretch; gap: 28px; }
  .site-nav a { display: flex; align-items: center; padding: 0; }
}