/* Public pages share this header; the dashboard has its own navigation. */
html.public-site {
  --public-header-height: 113px;
  --public-header-offset: calc(var(--public-header-height) + 8px);
  scroll-padding-top: var(--public-header-offset);
}
.public-site :is(main[id], section[id]) { scroll-margin-top: 0; }
.public-header { background: #fff; }
.public-nav-disclosure { display: none; }

@media (max-width: 1023px) {
  html.public-site { --public-header-height: 60px; }
  .public-header { height: 60px; }
  .public-header > .nav-inner {
    height: 59px;
    min-height: 59px;
    padding: 0 16px;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .public-header .brand-lockup { gap: 8px; font-size: 20px; }
  .public-header .brand-lockup :is(img, svg) {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .public-header .public-nav-desktop { display: none; }
  .public-nav-disclosure { display: block; flex: 0 0 44px; }
  .public-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
  }
  .public-nav-toggle::-webkit-details-marker { display: none; }
  .public-nav-toggle::marker { content: ""; }
  .public-nav-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .public-nav-toggle:hover { background: var(--surface-soft); }
  .public-nav-toggle__close,
  .public-nav-disclosure[open] .public-nav-toggle__bars { display: none; }
  .public-nav-disclosure[open] .public-nav-toggle__close { display: block; }
  .public-header .public-nav-panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    max-height: calc(100vh - var(--public-header-height));
    max-height: max(0px, calc(var(--public-viewport-height, 100dvh) - var(--public-header-height)));
    gap: 6px;
    padding: 12px 16px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 12px 24px rgb(25 28 30 / 8%);
  }
  .public-nav-disclosure:not([open]) > .public-nav-panel { display: none; }
  .public-header .public-nav-panel > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 14px;
    white-space: normal;
  }
  .public-header .public-nav-panel > :is(.btn-primary, .btn-outline) { justify-content: center; }
  .public-nav-panel .nav-logout { display: flex; flex: 0 0 auto; }
  .public-nav-panel .nav-logout > button { width: 100%; min-height: 44px; }
}