/* AstraVortex shared sidebar shell.
   This file styles the navigation only. It deliberately does not resize the
   page, center column, right sidebar, article, header or footer. Product and
   Portfolio keep their existing page-specific layout rules. */

:root {
  --av-sidebar-bg-top: rgba(20, 21, 24, 0.58);
  --av-sidebar-bg-bottom: rgba(13, 14, 17, 0.48);
  --av-sidebar-border: rgba(255, 255, 255, 0.1);
  --av-sidebar-muted: rgba(226, 230, 236, 0.76);
  --av-sidebar-strong: #f4f5f7;
}

/* Keep Quartz utility chrome out of the AstraVortex interface. The runtime
   script removes these nodes as well; these rules prevent a flash before JS. */
#quartz-root.page > #quartz-body > footer {
  display: none !important;
}

body[data-slug="index"]
  #quartz-root.page
  > #quartz-body
  > .sidebar.right
  .graph,
body[data-slug="admin"]
  #quartz-root.page
  > #quartz-body
  > .sidebar.right
  .graph,
body[data-slug^="admin/"]
  #quartz-root.page
  > #quartz-body
  > .sidebar.right
  .graph {
  display: none !important;
}

/* General Quartz pages use the same edge-to-edge shell as product pages.
   Only the existing grid columns are normalized; page-specific rows and areas
   remain untouched. */
@media (min-width: 1201px) {
  body:not(.av-product-page):not([data-slug="portfolio"]) #quartz-root.page,
  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body:has(> .sidebar.left) {
    grid-template-columns: 280px minmax(0, 1fr) 320px !important;
    column-gap: 0 !important;
  }

  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body
    > .sidebar.left {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    margin: 0 !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body
    > .center {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding-right: clamp(1rem, 1.6vw, 2rem) !important;
    padding-left: clamp(1rem, 1.6vw, 2rem) !important;
    box-sizing: border-box !important;
  }

  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body
    > .sidebar.right {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 1680px) {
  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body:has(> .sidebar.left) {
    grid-template-columns: 292px minmax(0, 1fr) 320px !important;
  }

  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body
    > .sidebar.left {
    width: 292px !important;
    min-width: 292px !important;
    max-width: 292px !important;
  }
}

@media (min-width: 801px) and (max-width: 1200px) {
  body:not(.av-product-page):not([data-slug="portfolio"]) #quartz-root.page,
  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body:has(> .sidebar.left) {
    grid-template-columns: 245px minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }

  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body
    > .sidebar.left {
    width: 245px !important;
    min-width: 245px !important;
    max-width: 245px !important;
    margin: 0 !important;
    padding-right: 0.9rem !important;
    padding-left: 0.9rem !important;
  }

  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body
    > .center,
  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body
    > .sidebar.right {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 801px) {
  #quartz-root.page > #quartz-body > .sidebar.left {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
    padding-bottom: 6.2rem !important;
    overflow: hidden !important;
    background: linear-gradient(
      180deg,
      var(--av-sidebar-bg-top),
      var(--av-sidebar-bg-bottom)
    ) !important;
    border-right: 1px solid var(--av-sidebar-border) !important;
    box-shadow:
      inset -1px 0 0 rgba(255, 255, 255, 0.025),
      16px 0 42px rgba(0, 0, 0, 0.18) !important;
    -webkit-backdrop-filter: blur(26px) saturate(125%) !important;
    backdrop-filter: blur(26px) saturate(125%) !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left::before,
  #quartz-root.page > #quartz-body > .sidebar.left::after {
    background: transparent !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .page-title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 0.2rem !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .page-title a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.48rem !important;
    width: auto !important;
    max-width: 100% !important;
    color: var(--av-sidebar-strong) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    overflow: visible !important;
    min-height: 2.05rem !important;
  }

  .av-brand-mark {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    font-family:
      "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-size: 1.75rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transform: translateY(-0.02em) !important;
    overflow: visible !important;
  }

  .av-brand-word {
    display: inline !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left > .flex-component {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .search,
  #quartz-root.page > #quartz-body > .sidebar.left .search > button,
  #quartz-root.page > #quartz-body > .sidebar.left .search .search-button {
    min-width: 0 !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .explorer {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .explorer-content {
    max-height: calc(100vh - 13.2rem) !important;
    padding-bottom: 0.75rem !important;
    overflow: auto !important;
    scrollbar-width: thin !important;
    background: transparent !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .folder-container,
  #quartz-root.page > #quartz-body > .sidebar.left .folder-outer,
  #quartz-root.page > #quartz-body > .sidebar.left .explorer,
  #quartz-root.page > #quartz-body > .sidebar.left .explorer-content {
    background: transparent !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .folder-title,
  #quartz-root.page > #quartz-body > .sidebar.left .folder-button,
  #quartz-root.page > #quartz-body > .sidebar.left .folder-icon,
  #quartz-root.page > #quartz-body > .sidebar.left a {
    color: var(--av-sidebar-muted) !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left a:hover,
  #quartz-root.page > #quartz-body > .sidebar.left button:hover,
  #quartz-root.page > #quartz-body > .sidebar.left .folder-title:hover {
    color: var(--av-sidebar-strong) !important;
  }

  /* General pages: keep footer controls inside the actual sidebar box. Using
     absolute positioning avoids assumptions about the grid column width and
     keeps the buttons geometrically centered on every viewport. */
  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .av-sidebar-socials {
    position: absolute !important;
    z-index: 20 !important;
    right: 0 !important;
    bottom: 2.35rem !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.72rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .av-sidebar-copyright {
    position: absolute !important;
    z-index: 20 !important;
    right: 0 !important;
    bottom: 0.68rem !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0.7rem !important;
    box-sizing: border-box !important;
    color: rgba(199, 205, 214, 0.48) !important;
    font-size: 0.65rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* Product pages already position the social row in product-page-v3.css.
     Only the copyright line is supplied by the shared navigation script. */
  body.av-product-page .av-sidebar-copyright {
    position: fixed !important;
    z-index: 14 !important;
    bottom: 0.62rem !important;
    left: 0 !important;
    display: block !important;
    width: 280px !important;
    margin: 0 !important;
    padding: 0 0.7rem !important;
    box-sizing: border-box !important;
    color: rgba(199, 205, 214, 0.48) !important;
    font-size: 0.65rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  @media (min-width: 1680px) {
    body.av-product-page .av-sidebar-copyright {
      width: 292px !important;
    }
  }

  @media (max-width: 1260px) {
    body.av-product-page .av-sidebar-copyright {
      width: 245px !important;
    }
  }

  .av-sidebar-socials a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.2rem !important;
    height: 2.2rem !important;
    min-width: 2.2rem !important;
    min-height: 2.2rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(226, 231, 237, 0.16) !important;
    border-radius: 9px !important;
    background: rgba(226, 231, 237, 0.055) !important;
    color: rgba(235, 238, 243, 0.76) !important;
    line-height: 0 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition:
      color 140ms ease,
      border-color 140ms ease,
      background 140ms ease,
      transform 140ms ease !important;
  }

  .av-sidebar-socials a:hover {
    color: #fff !important;
    border-color: rgba(244, 246, 249, 0.38) !important;
    background: rgba(244, 246, 249, 0.1) !important;
    transform: translateY(-1px) !important;
  }

  .av-sidebar-socials svg {
    display: block !important;
    width: 1.2rem !important;
    height: 1.2rem !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }
}

@media (max-width: 800px) {
  #quartz-root.page > #quartz-body > .sidebar.left {
    position: sticky !important;
    z-index: 1000 !important;
    top: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.55rem !important;
    width: 100% !important;
    height: auto !important;
    min-height: 3.75rem !important;
    margin: 0 !important;
    padding: max(0.55rem, env(safe-area-inset-top))
      max(0.8rem, env(safe-area-inset-right)) 0.55rem
      max(0.8rem, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(235, 239, 245, 0.12) !important;
    background: rgba(13, 15, 18, 0.82) !important;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22) !important;
    -webkit-backdrop-filter: blur(20px) saturate(115%) !important;
    backdrop-filter: blur(20px) saturate(115%) !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .page-title {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .page-title a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.38rem !important;
    max-width: min(46vw, 176px) !important;
    color: #f4f5f7 !important;
    font-size: 1.04rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  .av-brand-mark {
    width: auto !important;
    height: auto !important;
    font-size: 1rem !important;
    line-height: 1 !important;
  }

  .av-brand-word {
    font-size: 1.04rem !important;
    line-height: 1 !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left > .flex-component {
    display: flex !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .search,
  #quartz-root.page > #quartz-body > .sidebar.left .darkmode,
  #quartz-root.page > #quartz-body > .sidebar.left .readermode,
  #quartz-root.page > #quartz-body > .sidebar.left .explorer {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .explorer .explorer-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100dvw !important;
    max-width: 100dvw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: calc(4.25rem + env(safe-area-inset-top))
      max(1rem, env(safe-area-inset-right))
      calc(2rem + env(safe-area-inset-bottom))
      max(1rem, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
    overflow: auto !important;
    background: rgba(12, 14, 17, 0.97) !important;
    -webkit-backdrop-filter: blur(24px) saturate(110%) !important;
    backdrop-filter: blur(24px) saturate(110%) !important;
  }

  .av-sidebar-socials,
  .av-sidebar-copyright {
    display: none !important;
  }
}

/* Account overview: hide Quartz's generated folder list, keep one intentional action panel. */
body[data-slug="account"] .page-listing,
body[data-slug="account/index"] .page-listing {
  display: none !important;
}

body[data-slug="account"] .account-actions,
body[data-slug="account/index"] .account-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.6rem;
}

body[data-slug="account"] .account-action-card,
body[data-slug="account/index"] .account-action-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.32rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--lightgray);
  border-radius: 12px;
  background: color-mix(in srgb, var(--light) 96%, var(--secondary) 4%);
  color: var(--darkgray) !important;
  text-decoration: none !important;
  box-shadow: none;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

body[data-slug="account"] .account-action-card:hover,
body[data-slug="account/index"] .account-action-card:hover {
  transform: translateY(-1px);
  border-color: var(--secondary);
  background: color-mix(in srgb, var(--light) 91%, var(--secondary) 9%);
}

body[data-slug="account"] .account-action-title,
body[data-slug="account/index"] .account-action-title {
  color: var(--secondary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

body[data-slug="account"] .account-action-description,
body[data-slug="account/index"] .account-action-description {
  color: var(--darkgray);
  font-size: 0.86rem;
  line-height: 1.45;
  opacity: 0.78;
}

@media (max-width: 680px) {
  body[data-slug="account"] .account-actions,
  body[data-slug="account/index"] .account-actions {
    grid-template-columns: 1fr;
  }
}

/* Password recovery routes stay directly accessible but are not navigation items. */
.explorer li:has(a[href$="/account/forgot-password"]),
.explorer li:has(a[href$="/account/set-new-password"]),
.explorer li:has(a[href$="/account/reset-password"]),
.explorer li:has(a[href$="/reset-password"]) {
  display: none !important;
}

/* Global account shortcut — lives in the same toolbar as search/theme controls. */
.av-account-toolbar-slot {
  flex: 0 0 auto !important;
  align-self: center !important;
}

.av-account-toolbar {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 2.35rem !important;
  height: 2.35rem !important;
  min-width: 2.35rem !important;
  min-height: 2.35rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(226, 231, 237, 0.15) !important;
  border-radius: 9px !important;
  background: rgba(226, 231, 237, 0.045) !important;
  color: rgba(235, 238, 243, 0.78) !important;
  text-decoration: none !important;
  line-height: 0 !important;
  box-sizing: border-box !important;
  transition:
    color 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease !important;
}

.av-account-toolbar:hover {
  color: #fff !important;
  border-color: rgba(244, 246, 249, 0.36) !important;
  background: rgba(244, 246, 249, 0.09) !important;
  transform: translateY(-1px) !important;
}

.av-account-toolbar svg {
  display: block !important;
  width: 1.22rem !important;
  height: 1.22rem !important;
  margin: 0 !important;
}

.av-account-toolbar-dot {
  position: absolute !important;
  right: 0.27rem !important;
  bottom: 0.27rem !important;
  width: 0.42rem !important;
  height: 0.42rem !important;
  border: 1px solid rgba(13, 15, 18, 0.95) !important;
  border-radius: 50% !important;
  background: rgba(160, 169, 182, 0.72) !important;
  box-shadow: none !important;
}

.av-account-toolbar[data-authenticated="true"] .av-account-toolbar-dot {
  background: #74d3a5 !important;
  box-shadow: 0 0 0 3px rgba(116, 211, 165, 0.12) !important;
}

@media (max-width: 800px) {
  .av-account-toolbar {
    width: 2.2rem !important;
    height: 2.2rem !important;
    min-width: 2.2rem !important;
    min-height: 2.2rem !important;
  }
}

/* On very narrow phones, keep the account shortcut and drop Reader Mode. */
@media (max-width: 430px) {
  #quartz-root.page > #quartz-body > .sidebar.left .readermode {
    display: none !important;
  }
}

/* 2026-08-12 mobile shell hardening.
   This belongs in the shared sidebar stylesheet because the mobile top bar is
   Quartz's .sidebar.left, not a homepage component. Keeping the fix here also
   makes the shell consistent on Portfolio, Assets, Docs and account pages. */
@media (max-width: 800px) {
  html,
  body,
  #quartz-root.page,
  #quartz-root.page > #quartz-body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  html,
  body {
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }

  /* Quartz adds 1rem horizontal padding to #quartz-body below desktop width.
     The sidebar/top bar lives inside that box, which is why it could stop
     before the right edge. Remove shell padding here and give it back only to
     the actual content column below. */
  #quartz-root.page > #quartz-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
    grid-template-areas:
      "grid-sidebar-left"
      "grid-header"
      "grid-center"
      "grid-sidebar-right"
      "grid-footer" !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left {
    grid-area: grid-sidebar-left !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: max(0.55rem, env(safe-area-inset-top))
      max(0.75rem, env(safe-area-inset-right)) 0.55rem
      max(0.75rem, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    background: rgba(13, 15, 18, 0.96) !important;
  }

  /* Keep the menu at the left, then the brand, then controls at the right.
     The Quartz Spacer is unnecessary once the title itself is flexible. */
  #quartz-root.page > #quartz-body > .sidebar.left > .explorer {
    order: 0 !important;
    flex: 0 0 auto !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left > .page-title {
    order: 1 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left > .mobile-only {
    display: none !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left > .flex-component {
    order: 2 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 0 0 auto !important;
    gap: 0.42rem !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .page-title a {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Search text is what makes the toolbar too wide on narrow devices. Search
     still opens the same overlay; only its closed-state button becomes an icon. */
  #quartz-root.page > #quartz-body > .sidebar.left .search {
    flex: 0 0 2.55rem !important;
    width: 2.55rem !important;
    min-width: 2.55rem !important;
    max-width: 2.55rem !important;
    margin: 0 !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .search > .search-button,
  #quartz-root.page > #quartz-body > .sidebar.left .search > button {
    display: grid !important;
    place-items: center !important;
    width: 2.55rem !important;
    min-width: 2.55rem !important;
    max-width: 2.55rem !important;
    height: 2.55rem !important;
    min-height: 2.55rem !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .search .search-button > p,
  #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .search
    .search-button
    > span:not(.search-icon),
  #quartz-root.page > #quartz-body > .sidebar.left .search .search-button kbd {
    display: none !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .search .search-button svg {
    width: 1.35rem !important;
    height: 1.35rem !important;
    margin: 0 !important;
  }

  /* Every content-bearing grid item must be allowed to shrink. A single child
     with min-width:auto is enough to make Android expose horizontal panning. */
  #quartz-root.page > #quartz-body > .center,
  #quartz-root.page > #quartz-body > .right.sidebar,
  #quartz-root.page > #quartz-body > footer,
  #quartz-root.page > #quartz-body > .center > article,
  #quartz-root.page
    > #quartz-body
    > .center
    .markdown-preview-view.markdown-rendered {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  #quartz-root.page > #quartz-body > .center {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
    overflow-x: clip !important;
  }

  #quartz-root.page > #quartz-body > .center img,
  #quartz-root.page > #quartz-body > .center video,
  #quartz-root.page > #quartz-body > .center iframe,
  #quartz-root.page > #quartz-body > .center canvas,
  #quartz-root.page > #quartz-body > .center svg:not(.search-button svg) {
    max-width: 100% !important;
  }

  #quartz-root.page > #quartz-body > .center pre,
  #quartz-root.page > #quartz-body > .center table {
    max-width: 100% !important;
  }

  /* The Explorer drawer is an overlay and must never participate in document
     width while open or closed. */
  #quartz-root.page > #quartz-body > .sidebar.left .explorer .explorer-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100dvw !important;
    min-width: 0 !important;
    max-width: 100dvw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
}

/* 2026-08-12 mobile bar final sizing: block-size semantics instead of 100vw. */
@media (max-width: 800px) {
  #quartz-root.page > #quartz-body > .sidebar.left {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-self: start !important;
    box-sizing: border-box !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left > .page-title {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left > .flex-component {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left > .flex-component > * {
    flex-shrink: 0 !important;
  }
}

/* 2026-08-12 mobile Explorer first-paint guard.
   On a full page navigation the Explorer is server-rendered before its client
   script adds the collapsed state. Hide the drawer by default on phones and
   only reveal it after the user explicitly opens it (aria-expanded=true).
   This removes the one-frame open/close flash without changing desktop. */
@media (max-width: 800px) {
  #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .explorer:not([aria-expanded="true"])
    .explorer-content,
  #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .explorer
    .mobile-explorer.hide-until-loaded
    ~ .explorer-content {
    display: none !important;
  }

  #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .explorer[aria-expanded="true"]
    .mobile-explorer:not(.hide-until-loaded)
    ~ .explorer-content {
    display: block !important;
  }
}

/* 2026-08-13 navigation architecture.
   Keep the public Explorer focused on content. Account/auth, administration and
   legal documents remain directly reachable, but are not primary tree items. */
.explorer li:has(a[href*="/account"]),
.explorer li:has(a[href*="/admin"]),
.explorer li:has(a[href*="/legal"]),
.explorer li:has(a[href*="/login"]),
.explorer li:has(a[href*="/register"]),
.explorer li:has(a[href*="/forgot-password"]),
.explorer li:has(a[href*="/reset-password"]),
.explorer li:has(a[href*="/payment-success"]) {
  display: none !important;
}

.explorer .av-explorer-overflow-hidden {
  display: none !important;
}

.explorer .av-explorer-view-all {
  margin-top: 0.18rem !important;
}

.explorer .av-explorer-view-all-link {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.7rem !important;
  padding-left: 0.08rem !important;
  color: rgba(205, 214, 226, 0.58) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  text-decoration: none !important;
}

.explorer .av-explorer-view-all-link:hover {
  color: var(--av-sidebar-strong) !important;
}

.explorer .av-explorer-direct-section > .folder-container .folder-icon {
  display: none !important;
}

.explorer .av-explorer-direct-section > .folder-container {
  padding-left: 0 !important;
}

.explorer .av-explorer-direct-link {
  display: inline-flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  color: var(--av-sidebar-muted) !important;
  text-decoration: none !important;
}

.explorer .av-current-section > .folder-container .folder-title,
.explorer .av-current-section > .folder-container .av-explorer-direct-link,
.explorer a.av-current-page {
  color: var(--av-sidebar-strong) !important;
  font-weight: 700 !important;
}

.explorer li.av-current-page > a,
.explorer .av-current-section > .folder-container {
  position: relative !important;
}

.explorer li.av-current-page > a::before,
.explorer .av-current-section > .folder-container::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: -0.58rem !important;
  width: 2px !important;
  height: 1.05rem !important;
  border-radius: 999px !important;
  background: rgba(154, 187, 255, 0.88) !important;
  transform: translateY(-50%) !important;
}

@media (min-width: 801px) {
  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .av-sidebar-legal {
    position: absolute !important;
    z-index: 20 !important;
    right: 0 !important;
    bottom: 5.15rem !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.08rem 0.32rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0.65rem !important;
    box-sizing: border-box !important;
    color: rgba(199, 205, 214, 0.36) !important;
    font-size: 0.62rem !important;
    line-height: 1.35 !important;
  }

  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .av-sidebar-legal
    a {
    color: rgba(205, 211, 220, 0.54) !important;
    font-size: inherit !important;
    text-decoration: none !important;
  }

  body:not(.av-product-page):not([data-slug="portfolio"])
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .av-sidebar-legal
    a:hover {
    color: var(--av-sidebar-strong) !important;
  }

  body.av-product-page .av-sidebar-legal {
    display: none !important;
  }
}

@media (max-width: 800px) {
  .av-sidebar-legal {
    display: none !important;
  }
}

/* Right-side Quartz chrome is useful for long documentation, not for the store,
   portfolio, account or legal pages. Those pages get the center width back. */
@media (min-width: 1201px) {
  body:not(.av-product-page):not([data-slug="portfolio"]):not(
      [data-slug^="documentations"]
    ):not([data-slug^="useful-data"])
    #quartz-root.page
    > #quartz-body:has(> .sidebar.left) {
    grid-template-columns: 280px minmax(0, 1fr) !important;
  }

  body:not(.av-product-page):not([data-slug="portfolio"]):not(
      [data-slug^="documentations"]
    ):not([data-slug^="useful-data"])
    #quartz-root.page
    > #quartz-body
    > .sidebar.right {
    display: none !important;
  }

  body[data-slug^="documentations"]
    #quartz-root.page
    > #quartz-body:has(> .sidebar.left),
  body[data-slug^="useful-data"]
    #quartz-root.page
    > #quartz-body:has(> .sidebar.left) {
    grid-template-columns: 280px minmax(0, 1fr) 300px !important;
  }

  body[data-slug^="documentations"]
    #quartz-root.page
    > #quartz-body
    > .sidebar.right,
  body[data-slug^="useful-data"]
    #quartz-root.page
    > #quartz-body
    > .sidebar.right {
    display: block !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
  }
}

@media (min-width: 1680px) {
  body:not(.av-product-page):not([data-slug="portfolio"]):not(
      [data-slug^="documentations"]
    ):not([data-slug^="useful-data"])
    #quartz-root.page
    > #quartz-body:has(> .sidebar.left) {
    grid-template-columns: 292px minmax(0, 1fr) !important;
  }

  body[data-slug^="documentations"]
    #quartz-root.page
    > #quartz-body:has(> .sidebar.left),
  body[data-slug^="useful-data"]
    #quartz-root.page
    > #quartz-body:has(> .sidebar.left) {
    grid-template-columns: 292px minmax(0, 1fr) 300px !important;
  }
}

/* 2026-08-14 mobile control geometry + embedded product documentation spacing. */
@media (max-width: 800px) {
  #quartz-root.page > #quartz-body > .sidebar.left .search,
  #quartz-root.page > #quartz-body > .sidebar.left .search > .search-button,
  #quartz-root.page > #quartz-body > .sidebar.left .search > button,
  #quartz-root.page > #quartz-body > .sidebar.left .darkmode,
  #quartz-root.page > #quartz-body > .sidebar.left .av-account-toolbar {
    width: 2.55rem !important;
    height: 2.55rem !important;
    min-width: 2.55rem !important;
    min-height: 2.55rem !important;
    max-width: 2.55rem !important;
    max-height: 2.55rem !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .search > .search-button,
  #quartz-root.page > #quartz-body > .sidebar.left .search > button,
  #quartz-root.page > #quartz-body > .sidebar.left .darkmode,
  #quartz-root.page > #quartz-body > .sidebar.left .av-account-toolbar {
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(226, 231, 237, 0.15) !important;
    border-radius: 9px !important;
    background: rgba(226, 231, 237, 0.045) !important;
    line-height: 0 !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .darkmode svg,
  #quartz-root.page > #quartz-body > .sidebar.left .search .search-button svg,
  #quartz-root.page > #quartz-body > .sidebar.left .av-account-toolbar svg {
    width: 1.35rem !important;
    height: 1.35rem !important;
    margin: 0 !important;
  }

  #quartz-root.page > #quartz-body > .sidebar.left .av-account-toolbar-dot {
    right: 0.28rem !important;
    bottom: 0.28rem !important;
  }
}

@media (max-width: 620px) {
  html
    body[data-slug="assets/product"]
    #quartz-root.page
    .dynamic-product-documentation {
    padding: 1rem !important;
  }

  html
    body[data-slug="assets/product"]
    #quartz-root.page
    .dynamic-product-documentation-content,
  html
    body[data-slug="assets/product"]
    #quartz-root.page
    .dynamic-product-documentation-content
    > article,
  html
    body[data-slug="assets/product"]
    #quartz-root.page
    .dynamic-product-documentation-content
    > .markdown-preview-view {
    box-sizing: border-box !important;
  }
}

/* 2026-08-15 shared sidebar + desktop search normalization.
   Keep the toolbar geometry identical on every Quartz page and make Search a
   content-area overlay instead of covering the navigation column. */
@media (min-width: 801px) {
  html body #quartz-root.page > #quartz-body > .sidebar.left > .flex-component {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  html
    body
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    > .flex-component
    > div:first-child {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html
    body
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    > .flex-component
    > div:has(> .darkmode:not([hidden])),
  html
    body
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    > .flex-component
    > div:has(> .readermode:not([hidden])),
  html
    body
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    > .flex-component
    > .av-account-toolbar-slot {
    flex: 0 0 2.35rem !important;
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    max-width: 2.35rem !important;
  }

  html
    body
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    > .flex-component
    > div:has(> .readermode[hidden]) {
    display: none !important;
  }

  html body #quartz-root.page > #quartz-body > .sidebar.left .search {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html
    body
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .search
    > .search-button {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 2.35rem !important;
    min-height: 2.35rem !important;
    margin: 0 !important;
    padding: 0 0.72rem !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(226, 231, 237, 0.15) !important;
    border-radius: 7px !important;
    background: rgba(226, 231, 237, 0.025) !important;
    color: rgba(235, 238, 243, 0.78) !important;
  }

  html
    body
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .search
    > .search-button:hover {
    border-color: rgba(244, 246, 249, 0.28) !important;
    background: rgba(244, 246, 249, 0.055) !important;
    color: #fff !important;
  }

  html
    body
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .search
    > .search-button
    svg {
    flex: 0 0 1.12rem !important;
    width: 1.12rem !important;
    min-width: 1.12rem !important;
    height: 1.12rem !important;
    margin: 0 0.52rem 0 0 !important;
  }

  html
    body
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .search
    > .search-button
    > p {
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(214, 219, 227, 0.58) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #quartz-root.page > #quartz-body > .sidebar.left .darkmode,
  html body #quartz-root.page > #quartz-body > .sidebar.left .readermode,
  html
    body
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .av-account-toolbar {
    width: 2.35rem !important;
    height: 2.35rem !important;
    min-width: 2.35rem !important;
    min-height: 2.35rem !important;
    max-width: 2.35rem !important;
    max-height: 2.35rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Quartz's stock Search is a 100vw modal, so it sits on top of the sidebar.
     Offset it by the measured live sidebar width instead. The JS helper keeps
     this variable correct for normal pages, product pages and wide layouts. */
  html
    body
    #quartz-root.page
    > #quartz-body
    > .sidebar.left:has(.search-container.active) {
    overflow: visible !important;
  }

  html
    body
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .search
    > .search-container {
    left: var(--av-live-sidebar-width, 280px) !important;
    width: calc(100dvw - var(--av-live-sidebar-width, 280px)) !important;
    max-width: calc(100dvw - var(--av-live-sidebar-width, 280px)) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
    background: rgba(8, 10, 13, 0.82) !important;
    -webkit-backdrop-filter: blur(16px) saturate(115%) !important;
    backdrop-filter: blur(16px) saturate(115%) !important;
  }

  html
    body
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .search
    > .search-container
    > .search-space {
    width: min(920px, calc(100% - 3rem)) !important;
    max-width: 920px !important;
    margin: clamp(4.5rem, 10vh, 7.5rem) auto 2rem !important;
  }

  html
    body
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .search
    .search-bar {
    min-height: 3rem !important;
    border-color: rgba(226, 231, 237, 0.18) !important;
    background: rgba(20, 22, 27, 0.96) !important;
    color: #f4f5f7 !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26) !important;
  }

  html
    body
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .search
    .search-layout {
    border-color: rgba(226, 231, 237, 0.13) !important;
    background: rgba(18, 20, 24, 0.97) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3) !important;
  }
}

/* 2026-08-15 final shared desktop sidebar contract.
   IMPORTANT: page-specific styles must not change the navigation geometry.
   The same width, horizontal padding, toolbar, Explorer and footer positions
   are used by Portfolio, Admin, Account and ordinary Quartz pages. */
@media (min-width: 801px) and (max-width: 1200px) {
  :root {
    --av-sidebar-width: 245px;
    --av-sidebar-pad-x: 0.9rem;
  }
}

@media (min-width: 1201px) and (max-width: 1679px) {
  :root {
    --av-sidebar-width: 280px;
    --av-sidebar-pad-x: 1rem;
  }
}

@media (min-width: 1680px) {
  :root {
    --av-sidebar-width: 292px;
    --av-sidebar-pad-x: 1rem;
  }
}

@media (min-width: 801px) {
  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left {
    position: sticky !important;
    z-index: 1001 !important;
    top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: var(--av-sidebar-width, 280px) !important;
    min-width: var(--av-sidebar-width, 280px) !important;
    max-width: var(--av-sidebar-width, 280px) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 6rem var(--av-sidebar-pad-x, 1rem) 6.35rem !important;
    gap: 1.15rem !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: linear-gradient(
      180deg,
      var(--av-sidebar-bg-top),
      var(--av-sidebar-bg-bottom)
    ) !important;
    border-right: 1px solid var(--av-sidebar-border) !important;
    box-shadow:
      inset -1px 0 0 rgba(255, 255, 255, 0.025),
      16px 0 42px rgba(0, 0, 0, 0.18) !important;
    -webkit-backdrop-filter: blur(26px) saturate(125%) !important;
    backdrop-filter: blur(26px) saturate(125%) !important;
  }

  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    > .page-title {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    > .page-title
    a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.48rem !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 2.05rem !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--av-sidebar-strong) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    > .flex-component {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    > .flex-component
    > div:first-child {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .search {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .search
    > .search-button {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 2.35rem !important;
    min-height: 2.35rem !important;
    margin: 0 !important;
    padding: 0 0.72rem !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(226, 231, 237, 0.15) !important;
    border-radius: 7px !important;
    background: rgba(226, 231, 237, 0.025) !important;
  }

  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .search
    > .search-button
    svg {
    flex: 0 0 1.12rem !important;
    width: 1.12rem !important;
    min-width: 1.12rem !important;
    height: 1.12rem !important;
    margin: 0 0.52rem 0 0 !important;
  }

  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .search
    > .search-button
    > p {
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(214, 219, 227, 0.58) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .darkmode,
  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .readermode,
  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .av-account-toolbar {
    flex: 0 0 2.35rem !important;
    width: 2.35rem !important;
    height: 2.35rem !important;
    min-width: 2.35rem !important;
    min-height: 2.35rem !important;
    max-width: 2.35rem !important;
    max-height: 2.35rem !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    > .explorer {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    > .explorer
    .explorer-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 0 0.75rem !important;
    overflow: auto !important;
    box-sizing: border-box !important;
    background: transparent !important;
    scrollbar-width: thin !important;
  }

  /* One footer geometry on every non-product desktop page. */
  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .av-sidebar-legal {
    position: absolute !important;
    z-index: 20 !important;
    right: var(--av-sidebar-pad-x, 1rem) !important;
    bottom: 5.1rem !important;
    left: var(--av-sidebar-pad-x, 1rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 0.08rem 0.3rem !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    color: rgba(199, 205, 214, 0.36) !important;
    font-size: 0.59rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .av-sidebar-legal
    a {
    color: rgba(205, 211, 220, 0.54) !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .av-sidebar-socials {
    position: absolute !important;
    z-index: 20 !important;
    right: 0 !important;
    bottom: 2.2rem !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.72rem !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html
    body:not(.av-product-page)
    #quartz-root.page
    > #quartz-body
    > .sidebar.left
    .av-sidebar-copyright {
    position: absolute !important;
    z-index: 20 !important;
    right: 0 !important;
    bottom: 0.58rem !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0.7rem !important;
    box-sizing: border-box !important;
    color: rgba(199, 205, 214, 0.48) !important;
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Search is portalled to <body> by auth-navigation.js after it opens. This
     prevents any Portfolio/product/page CSS, backdrop-filter containing block
     or sidebar overflow from covering the navigation itself. */
  body > .av-search-portal-host {
    display: contents !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body > .av-search-portal-host > .search-container {
    contain: layout !important;
    position: fixed !important;
    z-index: 1000 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: var(--av-search-left, var(--av-sidebar-width, 280px)) !important;
    display: none !important;
    width: auto !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    background: rgba(8, 10, 13, 0.84) !important;
    -webkit-backdrop-filter: blur(16px) saturate(115%) !important;
    backdrop-filter: blur(16px) saturate(115%) !important;
  }

  body > .av-search-portal-host > .search-container.active {
    display: block !important;
  }

  body > .av-search-portal-host > .search-container > .search-space {
    position: relative !important;
    width: min(920px, calc(100% - 3rem)) !important;
    max-width: 920px !important;
    margin: clamp(4.5rem, 10vh, 7.5rem) auto 2rem !important;
  }

  body
    > .av-search-portal-host
    > .search-container
    > .search-space
    > input.search-bar {
    box-sizing: border-box !important;
    min-height: 3rem !important;
    border: 1px solid rgba(226, 231, 237, 0.18) !important;
    background: rgba(20, 22, 27, 0.96) !important;
    color: #f4f5f7 !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26) !important;
  }

  body
    > .av-search-portal-host
    > .search-container
    > .search-space
    > .search-layout {
    border-color: rgba(226, 231, 237, 0.13) !important;
    background: rgba(18, 20, 24, 0.97) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3) !important;
  }
}