/* ============================================================
   studio.INTERVAL — v2 search field + filter states
   ============================================================ */

.si-search{ display:inline-flex; align-items:center; gap:8px; position:relative;
  border-bottom:1px solid var(--line); padding:4px 2px; min-width:210px;
  transition:border-color .2s; }
.si-search:focus-within{ border-color:var(--ink); }
.si-search.has{ border-color:var(--accent); }
.si-search__ic{ width:15px; height:15px; flex:none; color:var(--grey-2); transition:color .2s; }
.si-search:focus-within .si-search__ic{ color:var(--ink); }
.si-search.has .si-search__ic{ color:var(--accent); }
.si-search__in{ border:none; background:none; outline:none; font:inherit; font-size:13.5px;
  letter-spacing:-0.01em; color:var(--ink); width:100%; padding:2px 0; }
.si-search__in::placeholder{ color:var(--grey-2); }
.si-search__in::-webkit-search-cancel-button{ -webkit-appearance:none; }
.si-search__x{ border:none; background:none; color:var(--grey-2); font-size:12px; line-height:1;
  padding:2px 3px; cursor:pointer; opacity:0; transition:opacity .15s, color .15s; }
.si-search.has .si-search__x{ opacity:1; }
.si-search__x:hover{ color:var(--accent); }
.si-search__n{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.04em; color:var(--grey-2);
  white-space:nowrap; min-width:0; }

/* hashtag chips + suggestion popup (Projekte search) */
.si-chips{ display:inline-flex; gap:5px; align-items:center; }
.si-chip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11px;
  background:var(--accent-soft); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 32%, transparent);
  padding:3px 4px 3px 8px; border-radius:999px; white-space:nowrap; }
.si-chip button{ border:none; background:none; color:var(--accent); opacity:.6; font-size:11px; line-height:1; padding:0 2px; cursor:pointer; }
.si-chip button:hover{ opacity:1; }
.si-sugg{ position:absolute; top:100%; left:0; min-width:180px; margin-top:9px; z-index:70;
  background:color-mix(in srgb,var(--bg) 78%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--line-2); box-shadow:0 16px 40px rgba(0,0,0,.10);
  border-radius:10px;
  display:flex; flex-direction:column; padding:5px 0; max-height:240px; overflow-y:auto; }
.si-sugg[hidden]{ display:none; }
.si-sugg__i{ text-align:left; border:none; background:none; font-family:var(--mono); font-size:12px;
  color:var(--ink-2); padding:7px 14px; cursor:pointer; transition:color .15s; }
.si-sugg__i:hover, .si-sugg__i.on{ color:var(--accent); background:transparent; }

/* — Projekte: sits to the right of the view switch — */
.si-search--flow{ margin-left:auto; align-self:center; }
@media(max-width:760px){
  .si-search--flow{ margin-left:0; flex:1 1 100%; min-width:0; margin-top:6px; }
}

/* — list pages: a row above the grid — */
.si-search-head{ display:flex; justify-content:flex-end; margin:0 0 22px; }
.si-search--page{ min-width:min(320px,70vw); }
@media(max-width:560px){ .si-search-head{ justify-content:stretch; } .si-search--page{ width:100%; } }

/* — landing: floating, top-right, only in gallery mode — */
.si-search--land{ position:fixed; top:68px; right:16px; z-index:60;
  background:color-mix(in srgb,var(--bg) 86%, transparent);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  border:1px solid var(--line); border-bottom:1px solid var(--line); padding:7px 11px; min-width:230px; }
.si-search--land:focus-within{ border-color:var(--ink); }
.si-search--land.has{ border-color:var(--accent); }
body:not(.mode-gallery) .si-search--land{ display:none; }

/* ---------- filter states ---------- */
.si-hide{ display:none !important; }
/* research index needs a flex parent for order to apply while filtering */
.res.si-filtering{ display:flex; flex-direction:column; }
/* soft-grid is already grid — order works as-is */

/* landing dim / lift */
.land-stage .si-dim{ opacity:0.12; filter:grayscale(0.6); transition:opacity .35s ease, filter .35s ease; }
.land-stage .si-lift{ transition:opacity .35s ease; }
.land-stage .si-lift::after{ content:""; position:absolute; inset:-6px; border:1px solid var(--accent);
  opacity:0.5; pointer-events:none; }
.land-stage .shard{ transition:opacity .35s ease, filter .35s ease; }