/* Search on a phone tab (P905): the search pill (src/studio/ui/search-pill.ts, component S8uyE) and the filters sheet
   (src/studio/ui/filter-sheet.ts, frames eLpEm / xQDDP). The pill is the one search on every Studio page: Explore and the
   Library open a full-screen search from it; History, Storage, the Library's panel and the Admin lists type in it
   (`searchField`, .st-pill--field). */

/* ---- The pill: white in both themes with a hairline, 52 high, the sliders inside on the right ---------------------- */

.st-pill {
  display: flex;
  align-items: center;
  /* UG's proportions (the user's side-by-side, P905): 44 high, 16px text, 18px glyph; the whole pill is the 44px target. */
  height: 44px;
  padding: 0 4px 0 0;
  border: 1px solid var(--st-line-strong);
  border-radius: 999px;
  background: #fff;
  color: #18181b;
}
.st-pill__open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 0 8px 0 14px;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.st-pill__glyph { flex: none; width: 18px; height: 18px; stroke-width: 2.5; }
.st-pill__prompt { flex: 1; min-width: 0; overflow: hidden; color: #5f5f68; font: 400 16px/20px var(--st-font); white-space: nowrap; text-overflow: ellipsis; }
.st-pill__prompt.is-typed { color: #18181b; }
.st-pill__filter {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}
.st-pill__filter > svg { width: 20px; height: 20px; }
.st-pill__dot { display: none; position: absolute; top: 5px; right: 4px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #ff2d55; }
.st-pill__filter.is-active .st-pill__dot { display: block; }
.st-pill :is(.st-pill__open, .st-pill__filter):focus-visible { outline: 2px solid var(--st-accent); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .st-pill__filter:hover { background: #f1f1f3; } }

/* ---- The pill with its field inside: 44 high and 16px text on a phone and a laptop alike; a × while there is text -- */

.st-pill--field { gap: 10px; height: 44px; padding: 0 8px 0 14px; cursor: text; }
.st-pill--field > .st-pill__glyph { width: 18px; height: 18px; }
.st-pill__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #18181b;
  /* 16px: iOS zooms into a smaller field on focus. */
  font: var(--st-type-input);
  --st-focus-ring-style: none;
}
.st-pill__input:focus-visible { outline: none; }
.st-pill__input::placeholder { color: #5f5f68; opacity: 1; }
.st-pill__input::-webkit-search-cancel-button { display: none; }
.st-pill__input:placeholder-shown ~ .st-pill__clear,
.st-pill__input:not(:placeholder-shown) ~ .st-kbd { display: none; }
.st-pill__clear { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #ececef; color: #5f5f68; cursor: pointer; }
.st-pill__clear > svg { width: 14px; height: 14px; stroke-width: 2.5; }
.st-pill--field > .st-kbd { margin-right: 4px; outline-color: #d4d4d8; background: none; color: #5f5f68; }
/* One ring, on the pill: the field's own ring stays off (controls.css). */
.st-pill--field:has(.st-pill__input:focus-visible) { outline: 2px solid var(--st-accent); outline-offset: -1px; }
.st-pill__clear:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 1px; }
.st-pill--field:has(.st-pill__input:disabled) { opacity: 0.5; cursor: default; }
@media (max-width: 640px), (max-width: 900px) and (min-height: 700px) {
  /* The phone design has no place for the shortcut; a laptop keeps it where the phone has its sliders. */
  .st-pill--field > .st-kbd { display: none; }
}

/* ---- The filters sheet: Reset · title · Done, chip rows, a switch, the count button ---------------------------------- */

.st-filters-sheet .ph-sheet__title { text-align: center; font-weight: 700; }
.st-filters__reset { flex: none; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--st-text-dim); font: 400 17px/22px var(--st-font); cursor: pointer; }
.st-filters { display: flex; flex-direction: column; gap: 22px; padding: 10px 0 8px; }
.st-filters__label { margin: 0 0 10px; color: var(--st-text-faint); font: 600 13px/1 var(--st-font); letter-spacing: 0.06em; text-transform: uppercase; }
.st-filters__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-filters__chip {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--st-line-strong);
  border-radius: 999px;
  background: none;
  color: var(--st-text);
  font: 500 15px/1 var(--st-font);
  cursor: pointer;
}
.st-filters__chip[aria-pressed='true'] { border-color: var(--st-accent); background: color-mix(in srgb, var(--st-accent) 13%, transparent); }
.st-filters__switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.st-filters__switch-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.st-filters__switch-title { color: var(--st-text); font: 500 16px/1.25 var(--st-font); }
.st-filters__hint, .st-filters__note { color: var(--st-text-faint); font: 400 13px/1.4 var(--st-font); }
.st-filters__note { margin: -6px 0 0; }
.st-filters__show { width: 100%; height: 50px; border-radius: 12px; font-size: 16px; }
.st-filters :is(button):focus-visible, .st-filters__reset:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }