/* The sidebar lookup (media/lookup.js): a ranked list of matches under the
   shelf's search field. Same vocabulary as the dock's palette (dock.css .hqp-*)
   so a title looks the same wherever it is found — the art box is the
   palette's (hqp-art), the row is its own, narrower cut for a 240px shelf. */
.klook {
  --hqp-brass: 198, 160, 94;
  --hqp-ember: 245, 158, 11;
  margin: 8px 0 2px;
  border: 1px solid rgba(var(--hqp-brass), .22);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 233, 196, .035), transparent 40%),
    rgba(12, 10, 9, .55);
  box-shadow: inset 0 1px 0 rgba(255, 233, 196, .06);
  overflow: hidden;
  animation: klook-in .16s ease-out;
}
.klook[hidden] { display: none; }
@keyframes klook-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.klook-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(52vh, 480px);
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
}
.klook-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 4px 8px 4px 4px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  color: var(--text);
  font: 500 13px/1.2 inherit;
  text-align: left;
  cursor: pointer;
  transition: background .13s ease, border-color .13s ease;
}
.klook-row:hover { background: rgba(255, 255, 255, .05); }
.klook-row.sel {
  background:
    linear-gradient(90deg, rgba(var(--hqp-ember), .2), rgba(var(--hqp-ember), .07) 60%, transparent),
    rgba(255, 255, 255, .03);
  border-color: rgba(var(--hqp-ember), .5);
  box-shadow: inset 0 1px 0 rgba(255, 233, 196, .1);
}
.klook-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The palette's art box, cut for the shelf: a 3:2 cover that still reads. */
.klook-row .hqp-art { width: 54px; height: 36px; border-radius: 7px; }
.klook-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* A 240px shelf is narrow for a title: two lines, then an ellipsis, and the
   whole title on the row's tooltip. The fact line stays one line. */
.klook-lbl {
  min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-height: 1.25; overflow-wrap: anywhere; text-wrap: pretty;
}
.klook-sub {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: 11.5px; font-weight: 500;
}
.klook-go { flex: none; color: rgba(var(--hqp-brass), .75); font-size: 12px; opacity: 0; transition: opacity .13s ease; }
.klook-row.sel .klook-go { opacity: 1; }

.klook-none {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 10px;
  text-align: left;
}
.klook-none-t { color: var(--text); font-size: 13px; font-weight: 600; text-wrap: balance; }
.klook-none-s { color: var(--muted); font-size: 11.5px; text-wrap: pretty; }

.klook-foot {
  padding: 6px 12px 7px;
  border-top: 1px solid rgba(var(--hqp-brass), .14);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.klook-foot:empty { display: none; }

@media (max-width: 700px) {
  .klook-list { max-height: 44vh; }
  .klook-row { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .klook { animation: none; }
  .klook-row, .klook-go { transition: none; }
}