@layer components {

  /* Search Dialog — top-of-screen overlay
  /* ------------------------------------------------------------------------ */

  .search-dialog {
    background: transparent;
    border: none;
    inset: 0;
    margin: 0;
    max-block-size: 100dvh;
    max-inline-size: 100vw;
    inline-size: 100vw;
    block-size: 100dvh;
    overflow: visible;
    padding: 0;

    &::backdrop {
      background: oklch(var(--lch-black) / 0.4);
      transition: background 200ms ease-out;

      @starting-style {
        background: oklch(var(--lch-black) / 0);
      }
    }

    &[open] {
      display: flex;
      align-items: start;
      justify-content: center;
    }
  }

  .search-dialog__panel {
    background: var(--color-canvas);
    border-radius: 0 0 0.75em 0.75em;
    box-shadow: var(--shadow-lg);
    color: var(--color-ink);
    inline-size: calc(100vw - 2 * var(--main-padding));
    margin-block-start: 0;
    max-inline-size: 60ch;
    overflow: hidden;

    animation: search-slide-down 150ms ease-out;
  }

  @keyframes search-slide-down {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
  }

  .search-dialog__results {
    .popup__grid {
      --popup-grid-columns: 1fr auto;
      max-block-size: 50dvh;
      overflow-y: auto;
    }
  }

  /* Form
  /* ------------------------------------------------------------------------ */

  .search__form {
    align-items: center;
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space) var(--inline-space-double);
  }

  .search__label {
    font-weight: 700;
    white-space: nowrap;
  }

  .search__input {
    flex: 1;
    min-inline-size: 0;

    &::-webkit-search-cancel-button {
      display: none;
    }
  }

  .search__reset {
    --btn-size: 1.5lh;
  }

  /* Header search — inline form in header (tablet+ only)
  /* ------------------------------------------------------------------------ */

  .header-search__form {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
  }

  .header-search__input {
    flex: 1;
    min-inline-size: 0;

    &::-webkit-search-cancel-button {
      display: none;
    }
  }

  .header__search-results {
    background: var(--color-canvas);
    border-radius: 0 0 0.75em 0.75em;
    box-shadow: var(--shadow-lg);
    color: var(--color-ink);
    inline-size: 100%;
    inset-block-start: 100%;
    inset-inline-start: 0;
    max-inline-size: 40ch;
    overflow: hidden;
    position: absolute;
    z-index: var(--z-popup);

    &[hidden] {
      display: none;
    }

    .popup__grid {
      --popup-grid-columns: 1fr auto;
      max-block-size: 50dvh;
      overflow-y: auto;
    }
  }
}