/* Size the mobile search sheet to its content, bounded by the visible viewport. */
@media (max-width: 991.98px) {
  .DocSearch-Container {
    --didww-search-gap-top: max(8px, env(safe-area-inset-top, 0px));
    --didww-search-gap-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    --didww-search-edge-top: max(24px, env(safe-area-inset-top, 0px));
    --didww-search-edge-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    --didww-search-chrome-color: #747f91;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    /* The scrim must still cover content behind Safari's translucent controls
       when the keyboard reduces only the visual viewport. */
    height: 100dvh !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: calc(var(--didww-search-viewport-top, 0px) + var(--didww-search-gap-top))
             max(8px, env(safe-area-inset-right, 0px))
             var(--didww-search-gap-bottom)
             max(8px, env(safe-area-inset-left, 0px));
    overflow: hidden;
  }

  html[data-theme="dark"] .DocSearch-Container {
    --didww-search-chrome-color: #01050a;
  }

  @supports (color: color-mix(in srgb, black, white)) {
    /* Opaque equivalents of the existing scrim over the theme's page canvas. */
    html[data-theme="light"] .DocSearch-Container {
      --didww-search-chrome-color: color-mix(in srgb, #071b3a 56%, var(--pst-color-background, #fff));
    }
    html[data-theme="dark"] .DocSearch-Container {
      --didww-search-chrome-color: color-mix(in srgb, black 72%, var(--pst-color-background, #041225));
    }
  }

  .DocSearch-Container .DocSearch-Modal {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    width: min(800px, 100%) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(var(--didww-search-viewport-height, 100dvh) - var(--didww-search-gap-top) - var(--didww-search-gap-bottom)) !important;
    margin: 0 auto !important;
    z-index: 1;
  }

  /* Safari samples ordinary fixed surfaces at viewport edges for browser tint.
     Keep them behind the panel and cover both viewport coordinate systems. */
  .didww-search-browser-edge {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 0;
    background: var(--didww-search-chrome-color);
    pointer-events: none;
  }
  .didww-search-browser-edge--layout-top { top: 0; height: var(--didww-search-edge-top); }
  .didww-search-browser-edge--layout-bottom { bottom: 0; height: var(--didww-search-edge-bottom); }
  .didww-search-browser-edge--visual-top { top: var(--didww-search-viewport-top, 0px); height: var(--didww-search-edge-top); }
  .didww-search-browser-edge--visual-bottom { top: calc(var(--didww-search-viewport-top, 0px) + var(--didww-search-viewport-height, 100dvh) - var(--didww-search-edge-bottom)); height: var(--didww-search-edge-bottom); }

  .DocSearch-Modal > :is(.DocSearch-SearchBar, .DocSearch-Footer) {
    flex: 0 0 auto;
  }

  .DocSearch-Container .DocSearch-Dropdown {
    flex: 0 1 auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}