.search-field{display:flex;align-items:center;gap:var(--gap-3);position:relative}.search-field .icon{flex-shrink:0;color:var(--text-muted);transition:color var(--duration-fast) var(--easing-standard)}.search-field__input{flex:1;min-width:0;border-radius:var(--radius-md);border:var(--line-strong);height:clamp(2.813rem,2.585rem + 1.14vw,3.438rem);padding:0 var(--padding-5);font-family:var(--font-text);font-size:var(--font-size-4);color:var(--text);background-color:var(--bg);transition:border-color var(--duration-fast) var(--easing-standard)}.search-field__input:focus{outline:none;border-color:var(--accent)}.search-field__input:focus-visible{border-color:var(--accent);outline:2px solid var(--focus-ring);outline-offset:3px}.search-field__label{position:absolute;left:calc(var(--icon-md) + var(--margin-3) + var(--margin-5));top:50%;transform:translateY(-50%);pointer-events:none;transition:transform var(--duration-base) var(--easing-standard),left var(--duration-base) var(--easing-standard);color:var(--text-muted);background-color:transparent;font-family:var(--font-text);font-size:var(--font-size-4);font-weight:var(--font-weight-regular);white-space:nowrap}.search-field__input:focus~.search-field__label,.search-field__input:not(:placeholder-shown)~.search-field__label{transform:translateY(-150%) scale(.85);left:calc(var(--icon-md) + var(--margin-3) + var(--margin-2));color:var(--text-accent);font-weight:var(--font-weight-medium);background-color:var(--bg);padding:0 var(--padding-3)}.search-field:has(.search-field__input:focus) .icon{color:var(--text-accent)}.search-field--sidebar{gap:var(--gap-2)}.search-field--sidebar .search-field__input{height:clamp(2.25rem,2rem + .63vw,2.625rem);padding:0 var(--padding-3);font-size:var(--font-size-2)}.search-field--sidebar .search-field__label{left:calc(var(--icon-sm) + var(--margin-2) + var(--margin-3));font-size:var(--font-size-2)}.search-field--sidebar .search-field__input:focus~.search-field__label,.search-field--sidebar .search-field__input:not(:placeholder-shown)~.search-field__label{left:calc(var(--icon-sm) + var(--margin-2) + var(--margin-1));padding:0 var(--padding-2)}.search-field__submit{position:relative;flex-shrink:0;inline-size:var(--icon-md);block-size:var(--icon-md);border:none;background:transparent}.search-field__submit:after{content:"";position:absolute;inset:calc(-1 * var(--margin-2))}.search-field__submit:hover .icon,.search-field__submit:focus-visible .icon{color:var(--text-accent)}@media(width<1024px){.search-field__input{height:var(--size-6)}}
