/* --- the search palette ---------------------------------------------- */

/* A window over the page, high up, as tall as its results. No padding on the
   element itself — a click that lands on it is a click on the backdrop. */
dialog.palette {
  width: min(680px, calc(100vw - 24px));
  max-width: none;
  max-height: none;
  margin: min(12vh, 96px) auto auto;
  padding: 0;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--menu-shadow);
  overflow: hidden;
  opacity: 1;
  transform: none;
  transition:
    opacity 140ms ease-out,
    transform 140ms ease-out,
    overlay 140ms allow-discrete,
    display 140ms allow-discrete;
}

dialog.palette:not([open]) {
  opacity: 0;
  transform: translateY(-6px) scale(0.99);
}

@starting-style {
  dialog.palette[open] {
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
  }
}

dialog.palette::backdrop {
  background: rgba(12, 12, 12, 0.38);
}

.palette-body {
  display: flex;
  flex-direction: column;
  max-height: min(620px, calc(100dvh - 2 * min(12vh, 96px)));
}

.palette-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.palette-field input[type="search"] {
  appearance: none;
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 17px;
  outline: none;
}

/* The browser's own clear button, in its own colours, has no place in these
   fields: the palette selects its text on opening, so typing replaces it,
   and a panel's search has a close button of its own. */
.palette-field input[type="search"]::-webkit-search-cancel-button,
.sidebar-head input.side-search::-webkit-search-cancel-button {
  appearance: none;
}

.palette-tabs {
  align-self: flex-start;
  margin: 10px 16px 2px;
}

.palette-results {
  flex: 1 1 auto;
  min-height: 96px;
  overflow-y: auto;
  padding: 4px 8px 8px;
}

/* Results for an older query, while the new one is on its way. */
.search-groups.stale {
  opacity: 0.55;
  transition: opacity 120ms ease;
}

.palette-foot {
  margin: 0;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  dialog.palette {
    transition: none;
  }
}

.search-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 8px 10px 2px;
  font-size: 12px;
  letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform);
  color: var(--muted);
}

button.search-more {
  min-height: 0;
  padding: 2px 6px;
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
}

/* One found thing: its title (and a second line, for a card's back or a
   public deck's author) on the left, what it is about on the right. The
   pointer moves the choice as the arrow keys do, so hover adds nothing. */
button.search-result {
  width: 100%;
  min-height: 44px;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
  text-align: left;
}

button.search-result:hover:not(:disabled) {
  background: transparent;
}

button.search-result.active,
button.search-result.active:hover:not(:disabled) {
  background: var(--chip);
}

.search-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.search-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--muted);
}

.search-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-meta {
  flex-shrink: 0;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}

.search-note {
  margin: 0;
  padding: 10px;
  font-size: 14px;
}

/* The deck toolbar's card search, beside the layout switch. */
.card-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 260px;
  min-width: 160px;
}