/* Shared website chrome. The public shell and storefront use the same surfaces. */
:is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar) {
  --ch-nav-glass: var(--theme-surface, #fff);
  --ch-nav-current: var(--theme-soft, #e8effb);
  background-color: var(--ch-nav-glass) !important;
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  @media (prefers-reduced-transparency: no-preference) {
    :is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar) {
      --ch-nav-glass: color-mix(in srgb, var(--theme-surface, #fff) 94%, transparent);
    }
  }
}

:is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar)
  .public-nav-more-content {
  color: var(--theme-text, #192332);
  scrollbar-width: thin;
  scrollbar-color: var(--theme-line, #c8d5e6) transparent;
}

:is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar)
  .public-nav-more-content .public-nav-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 6px;
  margin: 0;
  padding: 5px 0 7px;
  border: 0;
}

:is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar)
  .public-nav-more-content .public-nav-group + .public-nav-group {
  padding-top: 9px;
  border-block-start: 1px solid var(--theme-line, #c8d5e6);
}

:is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar)
  .public-nav-more-content .public-nav-group-title {
  grid-column: 1 / -1;
  margin: 1px 8px 4px;
  color: var(--theme-muted, #405471);
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.35;
}

:is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar)
  .public-nav-more-content .public-nav-group > a {
  display: flex;
  grid-column: auto;
  justify-content: flex-start;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 10px;
  color: var(--theme-text, #192332);
  font-size: .9375rem;
  line-height: 1.3;
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
}

:is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar)
  .public-nav-more-content .public-nav-appearance {
  padding: 9px 4px;
  border-block-start: 1px solid var(--theme-line, #c8d5e6);
}

:is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar)
  .public-nav-appearance :is(.ch-theme-control, select) {
  width: 100%;
  max-width: none;
}

:is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar)
  .public-nav-more-content .public-nav-edges {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 0;
  padding: 4px 0 0;
  border-block-start: 1px solid var(--theme-line, #c8d5e6);
}

:is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar)
  .public-nav-more-content .public-nav-edges a {
  min-height: 44px;
  padding: 6px 8px;
  color: var(--theme-muted, #405471);
  font-size: .875rem;
  font-weight: 500;
  white-space: normal;
}

:is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar)
  :is(.public-nav-more-content a, .account):focus-visible {
  outline: 2px solid var(--theme-focus, #2455d6);
  outline-offset: -2px;
}

html[data-client-surface="website"] body .topbar .account[aria-current="page"] {
  background-color: var(--ch-nav-current) !important;
  background-image: none !important;
  border-color: transparent;
  color: var(--theme-link, #2455d6) !important;
}

@media (min-width: 961px) {
  :is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar)
    :is(.public-nav, .desktop-nav) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  :is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar)
    .public-nav-more-content {
    width: min(336px, calc(100vw - 40px));
    max-height: calc(100vh - var(--floating-header-height, 104px) - 12px);
    max-height: calc(100dvh - var(--floating-header-height, 104px) - 12px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 10px;
    border: 1px solid var(--theme-line, #c8d5e6);
    background-color: var(--theme-surface, #fff) !important;
    box-shadow: var(--theme-shadow, 0 14px 40px #19233216) !important;
  }
}

@media (max-width: 960px) {
  :is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar)
    :is(.public-nav, .desktop-nav) {
    grid-template-columns: minmax(0, 1fr) !important;
    max-height: calc(100vh - var(--floating-header-height, 104px) - 12px);
    max-height: calc(100dvh - var(--floating-header-height, 104px) - 12px);
    padding: 10px;
    overflow-x: hidden;
    background-color: var(--theme-surface, #fff) !important;
    box-shadow: var(--theme-shadow, 0 14px 40px #19233216);
    scrollbar-width: thin;
    scrollbar-color: var(--theme-line, #c8d5e6) transparent;
  }

  :is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar)
    .public-nav-more-content {
    max-height: none;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    isolation: auto;
  }

  :is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar)
    .public-nav-more-content .public-nav-group {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-site .public-header:not([data-nav-enhanced]) .public-nav {
    max-height: none;
  }

  html[data-client-surface="website"] body .topbar :is(.topbar-right, .account, #account-name) {
    min-width: 0;
  }

  html[data-client-surface="website"] body .topbar .topbar-right {
    flex-shrink: 1;
  }
}

@media (forced-colors: active) {
  :is(html body.public-site .public-header, html[data-client-surface="website"] body .topbar) {
    --ch-nav-glass: Canvas;
    --ch-nav-current: Highlight;
  }

  html[data-client-surface="website"] body .topbar .account[aria-current="page"] {
    color: HighlightText !important;
  }
}

/* Keep the public shell's native semantics during a short visual exit. */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 961px) {
    .public-site .public-header[data-nav-enhanced] .public-nav-more > summary::after {
      transition: transform var(--motion-duration-feedback, 150ms) var(--motion-ease, ease-out);
    }

    @supports selector(details::details-content) {
      .public-site .public-header[data-nav-enhanced] .public-nav-more::details-content {
        opacity: 0;
        content-visibility: hidden;
        transition: opacity 120ms ease-in, content-visibility 120ms allow-discrete;
      }

      .public-site .public-header[data-nav-enhanced] .public-nav-more[open]::details-content {
        opacity: 1;
        content-visibility: visible;
        transition: opacity 180ms var(--motion-ease, ease-out), content-visibility 180ms allow-discrete;
      }
    }
  }

  @supports (transition-behavior: allow-discrete) {
    @media (max-width: 960px) {
      .public-site .public-header[data-nav-enhanced] .public-nav {
        opacity: 1;
        translate: none;
        transition: opacity 180ms var(--motion-ease, ease-out), translate 180ms var(--motion-ease, ease-out), display 180ms allow-discrete;
      }

      .public-site .public-header[data-nav-enhanced] .public-nav[hidden] {
        opacity: 0;
        translate: 0 -5px;
        transition-duration: 120ms;
      }

      @starting-style {
        .public-site .public-header[data-nav-enhanced] .public-nav:not([hidden]) {
          opacity: 0;
          translate: 0 -5px;
        }
      }
    }

    @supports (overlay: auto) {
      .public-site .mi127-dialog {
        opacity: 0;
        translate: 0 5px;
        transition: opacity 120ms ease-in, translate 120ms ease-in, display 120ms allow-discrete, overlay 120ms allow-discrete;
      }

      .public-site .mi127-dialog[open] {
        opacity: 1;
        translate: none;
        transition-duration: 200ms;
        transition-timing-function: var(--motion-ease, ease-out);
      }

      .public-site .mi127-dialog::backdrop {
        opacity: 0;
        transition: opacity 120ms ease-in, display 120ms allow-discrete, overlay 120ms allow-discrete;
      }

      .public-site .mi127-dialog[open]::backdrop {
        opacity: 1;
        transition-duration: 200ms;
        transition-timing-function: var(--motion-ease, ease-out);
      }

      @starting-style {
        .public-site .mi127-dialog[open] { opacity: .72; translate: 0 5px; }
        .public-site .mi127-dialog[open]::backdrop { opacity: 0; }
      }
    }
  }
}