/* The search box and its suggestions (docs/implementation/49-entity-ui-common-mock.html, 8): on every public page, because
   the menu's search uses it. In the menu the suggestions push the sections down; a page's box (<x-entity.search>) shows
   them below the box over the content. Sizes in px: the theme's rem is 10px, and 8.8px below 900px. */
.tkl-search { position: relative; color: #30252b; }
.tkl-search .tkl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tkl-search__box { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px 0 14px; border: 2px solid var(--tkl-accent, #b7354b); border-radius: 999px; background: #fff; }
.tkl-search__box > .tkl-icon { width: 20px; height: 20px; flex: 0 0 20px; color: var(--tkl-accent, #b7354b); }
.tkl-search__box input { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; outline: none; }
.tkl-search__box input::-webkit-search-cancel-button { cursor: pointer; }
.tkl-search__box:focus-within { box-shadow: 0 0 0 3px rgba(183, 53, 75, .18); }
.tkl-search__go { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--tkl-accent, #b7354b); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.tkl-search__go:hover { background: var(--tkl-accent-hover, #9c2b3f); }
.tkl-search__go:focus-visible { outline: 2px solid #30252b; outline-offset: 2px; }

.tkl-search__panel { margin-top: 6px; padding: 4px 0; border: 1px solid #e9dde3; border-radius: 10px; background: #fff; box-shadow: 0 6px 20px rgba(48, 37, 43, .08); font-size: 14px; line-height: 1.5; text-align: left; }
.tkl-search--dropdown .tkl-search__panel { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.tkl-search__panel[hidden] { display: none; }
.tkl-search__group + .tkl-search__group { border-top: 1px solid #f1e9ed; }
.tkl-search__head { display: flex; align-items: center; gap: 6px; margin: 8px 14px 2px; color: #6b6168; font-size: 12px; font-weight: 700; }
.tkl-search__head .tkl-icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--tkl-accent, #b7354b); }
.tkl-search__head > span { margin-left: auto; font-weight: 400; }
.tkl-search__panel ul { margin: 0; padding: 0; list-style: none; }
.tkl-search__panel li > a, .tkl-search__all, .tkl-search__submit { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px; color: #30252b; text-decoration: none; }
.tkl-search__panel li > a { flex-wrap: wrap; column-gap: 8px; row-gap: 0; background-image: none; }
/* The menu's links (.menu li a) and an article's lists (.art ul li, with the strength of an ID) leave the suggestions alone. */
.tkl-search ul:not(#\#), .tkl-search__panel ul:not(#\#) { margin: 0; padding: 0; list-style: none; }
.tkl-search li:not(#\#), .tkl-search__panel li:not(#\#) { margin: 0; list-style: none; }
.tkl-search__panel a { background-image: none; font-size: 14px; line-height: 1.5; }
.tkl-search__panel li > a > span { min-width: 0; overflow-wrap: anywhere; }
.tkl-search__panel li > a > small { color: #6b6168; font-size: 12px; }
.tkl-search__panel a:hover, .tkl-search__panel a:focus-visible { background: #faf6f8; outline: none; }
.tkl-search__panel a:focus-visible { box-shadow: inset 3px 0 0 var(--tkl-accent, #b7354b); }
.tkl-search__all { color: var(--tkl-accent, #b7354b); font-size: 13px; font-weight: 700; }
.tkl-search__submit { border-top: 1px solid #f1e9ed; color: var(--tkl-accent, #b7354b); font-weight: 700; }
.tkl-search__submit .tkl-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.tkl-search__recent { display: flex; align-items: center; }
.tkl-search__recent > a { flex: 1; }
.tkl-search__recent > button, .tkl-search__clear { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: #6b6168; cursor: pointer; }
.tkl-search__recent > button .tkl-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.tkl-search__clear { margin-left: auto; padding: 0 4px; font: inherit; font-size: 12px; font-weight: 400; text-decoration: underline; }
.tkl-search__note { margin: 4px 14px 8px; color: #6b6168; font-size: 11px; }

/* The menu's search keeps its own look; only its suggestions come from here. */
.menu .menu__search + .tkl-search__panel, .menu__search .tkl-search__panel { margin: 4px 16px 8px; }