/* What a search says besides its results: a correction, other searches that find something,
   recent searches, and the way on from an empty screen. Shared by the landing and the app, in the
   palette of the table it sits above (Untitled UI grays, the purple focus accent). */

.search-assist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 24px;
  border-bottom: 1px solid #eaecf0;
  background: #fcfcfd;
  font-size: 13.5px;
  color: #344054;
  animation: search-assist-in .18s ease-out;
}
.search-assist[hidden] { display: none; }

@keyframes search-assist-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

.search-assist-note {
  margin: 0 !important;
  line-height: 1.5;
  color: #344054;
}
.search-assist-note strong { color: #101828; font-weight: 700; }
.search-assist-note q { quotes: "„" "”"; font-weight: 600; color: #101828; }
.search-assist-note::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #98a2b3;
  vertical-align: 1px;
}
/* A typo was corrected: the purple of the search field, so it reads as the search talking. */
.search-assist-note.is-corrected::before { background: #704fe6; }
.search-assist-note.is-empty::before { background: #f79009; }
.search-assist-note.is-warning { color: #93370d; }
.search-assist-note.is-warning::before { background: #dc6803; }

.search-assist-muted { color: #667085; font-weight: 400; }

.search-assist-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.search-assist-label {
  font-size: 12px;
  font-weight: 600;
  color: #667085;
  margin-right: 2px;
}
.search-assist-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 13px;
  border: 1px solid #d0d5dd;
  border-radius: 9999px;
  background: #ffffff;
  color: #344054;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.search-assist-chip:hover { border-color: #704fe6; color: #5925dc; background: #f9f5ff; }
.search-assist-chip:focus-visible { outline: 0; border-color: #704fe6; box-shadow: 0 0 0 3px rgba(112, 79, 230, .18); }

.search-assist-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}
.search-assist-link {
  border: 0;
  background: none;
  padding: 2px 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #5925dc;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(89, 37, 220, .35);
  text-underline-offset: 3px;
  align-self: flex-start;
}
.search-assist-link:hover { text-decoration-color: currentColor; }
.search-assist-link q { quotes: "„" "”"; }

/* The start of each searched word, in a result's name. */
.catalog-row mark,
.suggestion mark {
  background: #ebe9fe;
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* Searching: a small spinner at the end of the field, while the rows on screen stay put. */
.table-search-box { position: relative; }
.table-search-box.is-searching::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid #d9d6fe;
  border-top-color: #704fe6;
  border-radius: 50%;
  animation: search-assist-spin .7s linear infinite;
}
.table-search-box.is-searching .search-kbd { visibility: hidden; }

@keyframes search-assist-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .search-assist { animation: none; }
  .table-search-box.is-searching::after { animation-duration: 2s; }
}

@media (max-width: 620px) {
  .search-assist { padding: 12px 16px; }
  .search-assist-chip { min-height: 36px; }
}

/* Inside the landing's suggestion list: the same parts, without the band they have above a table. */
.suggestions .search-assist {
  padding: 8px 12px 10px;
  border: 0;
  background: transparent;
  gap: 8px;
}
.suggestions .search-assist + .suggestion { margin-top: 2px; }
.suggestion[aria-selected="true"] { background: #f0f4ed; }
.suggestions .search-assist-muted { font-size: 12.5px; }

/* An open list must reach below the hero. The landing's <main> clips its overflow (for the wide
   decorative art), which cut the list off at the hero's bottom edge; and the hero's copy is
   transformed by its entrance animation, a stacking context the next section would paint over.
   While the list is open only: sideways still clipped, downwards visible, and the hero lifted. */
.home:has(.suggestions:not([hidden])) { overflow-x: clip; overflow-y: visible; }
.hero:has(.suggestions:not([hidden])) { position: relative; z-index: 30; }
/* Redrawn on every keystroke there, so it must not fade in each time. */
.suggestions .search-assist { animation: none; }