/* Site Engine site search (marker <!-- SEARCH /-->). Zero-specificity defaults: the site CSS overrides them. */
:where(.search) { max-width: 48rem; }
:where(.search__form) { display: flex; flex-direction: column; gap: 0.35rem; }
:where(.search__input) { width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem; font: inherit; border: 1px solid currentColor; border-radius: 0.25rem; background: transparent; color: inherit; }
:where(.search__status) { margin: 0.75rem 0 0.5rem; font-size: 0.875em; opacity: 0.8; }
:where(.search__results) { list-style: none; margin: 0; padding: 0; }
:where(.search__result) { padding: 0.75rem 0; border-top: 1px solid rgb(128 128 128 / 0.3); }
:where(.search__link) { font-weight: 700; }
:where(.search__kind) { display: block; font-size: 0.8em; opacity: 0.75; }
:where(.search__snippet) { margin: 0.35rem 0 0; font-size: 0.9em; }
:where(.search__snippet mark) { background: rgb(255 214 0 / 0.45); color: inherit; }

/* <!-- SEARCH:BUTTON /-->: magnifier + popup over the page (light: a card, no heavy frame) */
:where(.search-button) { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; font-size: 1.25rem; color: inherit; background: none; border: 0; border-radius: 50%; cursor: pointer; }
:where(.search-button:hover, .search-button:focus-visible) { background: rgb(128 128 128 / 0.15); }
:where(.search-dialog) { width: min(40rem, calc(100vw - 2rem)); max-height: min(80vh, 44rem); margin: 10vh auto auto; padding: 1.5rem 1.5rem 1rem; border: 0; border-radius: 0.75rem; background: #fff; color: #1d2730; box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.3); overflow: auto; }
:where(.search-dialog)::backdrop { background: rgb(10 20 30 / 0.55); backdrop-filter: blur(2px); }
:where(.search-dialog .search) { max-width: none; }
:where(.search-dialog__close) { position: absolute; top: 0.5rem; right: 0.6rem; width: 2.25rem; height: 2.25rem; font-size: 1.5rem; line-height: 1; color: inherit; background: none; border: 0; border-radius: 50%; cursor: pointer; }
:where(.search-dialog__close:hover, .search-dialog__close:focus-visible) { background: rgb(128 128 128 / 0.15); }