/* Поле со списком и поиском (ниша, тема, формат): «наклеечное» поле Рикко, как строка поиска на главной.
   1.5px чёрная кромка, жёсткая тень, при фокусе тень краснеет и поле чуть приподнимается. Список открывается карточкой с такой же кромкой. */
@layer components {
 .search-select {position:relative;min-width:0;width:100%}
 .search-select [hidden] {display:none!important}
 .search-select-input {box-sizing:border-box;display:block;width:100%;min-width:0;min-height:52px;padding:13px 46px 13px 17px;border:1.5px solid var(--ink);border-radius:18px;background:var(--paper);color:var(--ink);
  font:inherit;font-size:16px;line-height:1.5;text-overflow:ellipsis;box-shadow:3px 3px 0 var(--ink);transition:box-shadow var(--d-2),translate var(--d-2),background-color var(--d-2)}
 .search-select-input::placeholder {color:var(--ink-3)}
 .search-select-input:hover {background:var(--card)}
 .search-select-input:focus {box-shadow:5px 5px 0 var(--accent);translate:-1px -1px;background:var(--card)}
 .search-select-input:focus-visible {outline:3px solid var(--focus-ring-solid);outline-offset:3px}
 .search-select-input[aria-invalid=true] {border-color:var(--bad);box-shadow:3px 3px 0 var(--bad)}
 .search-select-input:disabled {opacity:.6;cursor:wait;box-shadow:none}
 .search-select::after {content:'';position:absolute;right:16px;top:18px;width:18px;height:18px;background:var(--ink);pointer-events:none;transition:rotate var(--d-2) var(--ease-pop);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat}
 .search-select:has([aria-expanded=true])::after {rotate:180deg}
 .search-select-options,.search-select-message {position:absolute;z-index:35;inset:calc(100% + 10px) 0 auto;margin:0;padding:8px;background:var(--card);border:1.5px solid var(--ink);border-radius:18px;
  box-shadow:4px 4px 0 var(--ink);max-height:280px;max-height:min(var(--select-room,280px),45dvh);overflow:auto;overscroll-behavior:contain;list-style:none}
 .search-select.opens-up .search-select-options,.search-select.opens-up .search-select-message{top:auto;bottom:calc(100% + 10px)}
 @media (prefers-reduced-motion:no-preference) {
  .search-select:not(:has(input:focus-visible)) .search-select-options,.search-select:not(:has(input:focus-visible)) .search-select-message {animation:select-open .18s var(--ease-out)}
  @keyframes select-open {from {opacity:0;translate:0 -8px}}
 }
 .search-select-options li {padding:12px 14px;min-height:44px;box-sizing:border-box;cursor:pointer;border-radius:12px;line-height:1.4;overflow-wrap:anywhere;font-size:1rem;color:var(--ink);transition:background-color var(--d-1)}
 .search-select-options [aria-selected=true] {background:var(--butter);box-shadow:inset 4px 0 var(--accent)}
 .search-select-message {padding:16px;font-size:.875rem;line-height:1.5;color:var(--ink-2)}
 @media (hover:hover) {.search-select-options li:hover {background:var(--paper-sunken)}.search-select-options [aria-selected=true]:hover {background:var(--butter)}}
}