.global-search {
  min-height: 44px;
  gap: var(--space-3);
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
  font-weight: var(--typography-button-weight);
  text-align: left;
}

.global-search:hover { background: color-mix(in srgb, var(--color-secondary) 94%, var(--color-primary)); }
.global-search-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

html.catalogue-search-page-locked { overflow: hidden; }

.catalogue-search-dialog {
  --color-on-surface: #fff;
  --color-muted: #cbd5e1;
  --color-secondary: rgb(255 255 255 / 10%);
  --color-outline: rgb(255 255 255 / 18%);
  position: fixed;
  inset: min(10vh, var(--space-10)) auto auto 50%;
  width: min(760px, calc(100vw - 2 * var(--space-6)));
  max-height: min(80svh, 720px);
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  border: var(--stroke-thin) solid var(--color-outline);
  border-radius: var(--radius-xl);
  background: rgb(17 24 39 / 86%);
  color: var(--color-on-surface);
  color-scheme: dark;
  box-shadow: var(--shadow-floating);
  backdrop-filter: blur(16px) saturate(120%);
  overflow: hidden;
  flex-direction: column;
  opacity: 0;
  transition: opacity 180ms ease-in, display 180ms allow-discrete, overlay 180ms allow-discrete;
}

.catalogue-search-dialog[open] { display: flex; opacity: 1; transition-duration: 120ms; transition-timing-function: ease-out; }
.catalogue-search-dialog::backdrop {
  background: transparent;
  backdrop-filter: blur(0);
  transition: backdrop-filter 180ms ease-in;
}
.catalogue-search-dialog[open]::backdrop { backdrop-filter: blur(6px); transition-duration: 120ms; transition-timing-function: ease-out; }

@starting-style {
  .catalogue-search-dialog[open] { opacity: 0; }
  .catalogue-search-dialog[open]::backdrop {
    backdrop-filter: blur(0);
  }
}

.catalogue-search-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--stroke-thin) solid var(--color-outline);
}

.catalogue-search-icon { flex: none; color: var(--color-muted); }
.catalogue-search-top input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--color-on-surface); font: var(--typography-body); }
.catalogue-search-top input:focus-visible { outline: none; }
.catalogue-search-top input::placeholder { color: var(--color-muted); }
.catalogue-search-top input::-webkit-search-cancel-button { display: none; }
.catalogue-search-body { overflow-y: auto; padding: var(--space-6); }
.catalogue-search-category + .catalogue-search-category { margin-top: var(--space-7); }
.catalogue-search-category h3, .catalogue-search-group h3 { margin-bottom: var(--space-4); }
.catalogue-search-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.catalogue-search-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--surface-size-sm); padding: var(--space-2) var(--space-4); border: var(--stroke-thin) solid var(--color-outline); border-radius: var(--radius-full); background: var(--color-secondary); }
.catalogue-search-chip:hover, .catalogue-search-chip:focus-visible { background: color-mix(in srgb, var(--color-secondary) 90%, var(--color-primary)); }
.catalogue-search-chip-count { color: var(--color-muted); }

.catalogue-search-group:not([hidden]) + .catalogue-search-group:not([hidden]) { margin-top: var(--space-6); }
.catalogue-search-count { margin-left: var(--space-2); color: var(--color-muted); }
.catalogue-search-list { display: grid; }
.catalogue-search-result { display: flex; align-items: center; gap: var(--space-4); min-height: 68px; padding: var(--space-3); border-top: var(--stroke-thin) solid var(--color-outline); }
.catalogue-search-result:hover, .catalogue-search-result:focus-visible { border-radius: var(--radius-md); background: var(--color-secondary); }
.catalogue-search-result-copy { display: grid; gap: var(--space-1); min-width: 0; }
.catalogue-search-result-meta { color: var(--color-muted); }
.catalogue-search-result-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); margin-left: auto; color: var(--color-muted); }
.catalogue-search-none { padding: var(--space-7) 0; color: var(--color-muted); }
.catalogue-search-dialog [hidden] { display: none; }

@media (max-width: 600px) {
  .catalogue-search-dialog { inset: var(--space-4) auto auto 50%; width: calc(100vw - 2 * var(--space-4)); max-height: calc(100svh - 2 * var(--space-4)); }
  .catalogue-search-top { padding: var(--space-3) var(--space-4); }
  .catalogue-search-body { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .catalogue-search-dialog, .catalogue-search-dialog[open], .catalogue-search-dialog::backdrop, .catalogue-search-dialog[open]::backdrop { transition: none; }
}