.search-dock { width: 48px; max-width: 100%; flex: 0 0 auto; transition: width 450ms cubic-bezier(.2,.8,.2,1); }
.search-dock[data-expanded=true] { width: 320px; }
.search-dock button { display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #a9d2ff; background: #202934; border: 1px solid #5b91ce80; border-radius: 50%; cursor: pointer; }
.search-dock__open { width: 48px; height: 48px; }
.search-dock button:hover { background: #30465e; border-color: #5b91ce; }
.search-dock button:focus-visible, .search-dock:focus-within { outline: 2px solid #5b91ce; outline-offset: 4px; border-radius: 999px; }
.search-dock__form { position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; width: 100%; border: 1px solid #5b91ce80; border-radius: 999px; background: #202934e6; backdrop-filter: blur(12px); padding: 0 8px 0 16px; overflow: hidden; }
.search-dock__form > svg { flex: 0 0 18px; color: #5b91ce; }
.search-dock__form input { min-width: 0; width: 100%; flex: 1; height: 48px; padding: 0; color: #fff; background: transparent; border: 0; outline: none; font: 400 .94rem Barlow, Arial, sans-serif; }
.search-dock__form input::placeholder { color: #aeb8c2; }
.search-dock__form input::-webkit-search-cancel-button { appearance: none; }
.search-dock__form .search-dock__close { width: 36px; height: 36px; min-height: 36px; flex: 0 0 36px; background: transparent; border: 0; }
.search-dock svg { pointer-events: none; }
@media (max-width: 700px) { .archive-toolbar { align-items: flex-start; } .search-dock[data-expanded=true] { width: min(320px, 100%); } }
@media (prefers-reduced-motion: reduce) { .search-dock { transition: none; } }