/* cubeandtree top-bar search and its preview panel. Shared by every page, so colours are
   written out here instead of borrowed from a page's own variables. */
.search {
  position: relative;
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  width: min(260px, 42vw); height: 32px; padding: 0 12px;
  border: 1px solid #1f1f23; border-radius: 999px;
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  transition: border-color .2s;
}
.search:focus-within { border-color: #8a8a91; }
.search > svg { width: 13px; height: 13px; flex: none; fill: none; stroke: #8a8a91; stroke-width: 1.4; stroke-linecap: round; }
.search input {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0;
  background: transparent; border: 0; outline: none; box-shadow: none;
  color: #ededed; font: inherit; font-size: 12px; letter-spacing: 0.04em;
  -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: #55555c; }
.search input::-webkit-search-cancel-button { filter: invert(0.6); }

/* Previews: a small panel under the field, one tiny thumbnail per result */
.search-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 320px; max-height: min(420px, 70vh); overflow-y: auto;
  padding: 6px;
  background: rgba(11, 11, 13, 0.97);
  border: 1px solid #1f1f23; border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  text-align: left;
}
.search-panel[hidden] { display: none; }
.sr-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px; border-radius: 8px;
  color: #ededed; text-decoration: none;
}
.sr-item[aria-selected="true"] { background: #17171b; }
.sr-thumb {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  background: #000; border: 1px solid #1f1f23; border-radius: 7px;
}
.sr-thumb svg { width: 30px; height: 30px; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sr-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sr-title { font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-title b { font-weight: 500; color: #ffbf57; }
.sr-sub { font-size: 10px; letter-spacing: 0.04em; color: #8a8a91; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-soon { opacity: 0.5; cursor: default; }
.sr-empty { margin: 0; padding: 10px; font-size: 12px; color: #8a8a91; }