@layer components{.pill-bar{grid-template-columns:minmax(0,1fr);gap:10px;display:grid}.pill-bar-field{border:1px solid var(--color-line-strong);background:var(--color-card);height:58px;transition:border-color .2s var(--ease-out-soft), box-shadow .2s var(--ease-out-soft);border-radius:999px;align-items:center;gap:10px;padding:0 18px;display:flex;box-shadow:0 1px 2px #1a24310a}.pill-bar-field:focus-within{border-color:var(--primary);box-shadow:0 0 0 5px #00787a1f}.pill-bar input{width:0;min-width:0;height:100%;color:var(--foreground);background:0 0;border:0;outline:none;flex:auto;font-size:1rem}.pill-bar input::placeholder{color:var(--muted-foreground);opacity:1}.pill-bar>button{height:52px}.pill-bar.pill-bar-compact{border:1px solid var(--color-line-strong);background:var(--color-card);height:58px;transition:border-color .2s var(--ease-out-soft), box-shadow .2s var(--ease-out-soft);border-radius:999px;align-items:center;gap:0;padding:0 5px 0 0;display:flex;box-shadow:0 1px 2px #1a24310a}.pill-bar.pill-bar-compact:focus-within{border-color:var(--primary);box-shadow:0 0 0 5px #00787a1f}.pill-bar-compact .pill-bar-field,.pill-bar-compact .pill-bar-field:focus-within{height:100%;box-shadow:none;background:0 0;border:0;flex:auto;padding:0 10px 0 18px}.pill-bar.pill-bar-compact>button{height:46px}@media (min-width:560px){.pill-bar{border:1px solid var(--color-line-strong);background:var(--color-card);height:66px;transition:border-color .2s var(--ease-out-soft), box-shadow .2s var(--ease-out-soft);border-radius:999px;align-items:center;gap:0;padding:0 7px 0 0;display:flex;box-shadow:0 1px 2px #1a24310a}.pill-bar:focus-within{border-color:var(--primary);box-shadow:0 0 0 5px #00787a1f}.pill-bar-field,.pill-bar-field:focus-within{height:100%;box-shadow:none;background:0 0;border:0;flex:auto;padding:0 12px 0 22px}.pill-bar>button{height:50px}}}