/* Search: the header field, its type-ahead card, and the results page. */

/* Header field */

.search-field { position: relative; display: flex; align-items: center; margin: 0; }

/* A soft grey pill with "Search mail" and the / shortcut, so it reads as a
   field at a glance (Scott's pick); it grows and turns white while in use */
.search-field__icon {
  position: absolute;
  left: 12px;
  z-index: 1;
  width: 19px;
  height: 19px;
  color: var(--color-muted);
  pointer-events: none;
}

.search-field__input {
  width: 260px;
  height: 37.19px;
  padding: 0 40px 0 39px;
  border: 1px solid var(--popup-line);
  border-radius: 33px;
  background: var(--popup-tile); /* the Postboxey menu search box's */
  color: var(--color-ink);
  font: 400 16px/22px var(--font);
  transition: width 0.15s ease;
  appearance: none;
}

.search-field__input::placeholder { color: var(--color-muted); opacity: 1; }
.search-field__input::-webkit-search-cancel-button,
.search-field__input::-webkit-search-decoration { appearance: none; }

/* Full width while it holds a search, as HEY's does */
.search-field__input:not(:placeholder-shown) { width: 286px; }

/* Grows on focus; a quiet border instead of a focus ring. */
.search-field__input:focus,
.search-field__input:focus-visible {
  width: 286px;
  border-color: rgb(var(--ink-rgb) / 0.15);
  background: var(--color-sheet);
  outline: none;
  box-shadow: none;
}

.search-field__input:focus::placeholder { color: var(--color-muted); }

/* The / shortcut, shown while the field is empty and not in use */
.search-field__key { position: absolute; right: 11px; padding: 0 6px; border: 1px solid var(--popup-line); border-radius: 5px; background: var(--color-sheet); color: var(--color-muted); font: 400 12px/18px var(--font); pointer-events: none; }
.search-field__input:focus ~ .search-field__key,
.search-field__input:not(:placeholder-shown) ~ .search-field__key { display: none; }

/* × to clear, while the field is focused and holds a search: the same soft
   filled circle as a recent search's Remove (Scott's pick) */
.search-field__clear {
  position: absolute;
  right: 9px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: rgb(var(--ink-rgb) / 0.2);
  cursor: pointer;
}

.search-field__clear-icon { width: 22px; height: 22px; }

.search-field__input:placeholder-shown ~ .search-field__clear,
.search-field:not(:focus-within) .search-field__clear { display: none; }
.search-field__clear:hover { color: rgb(var(--ink-rgb) / 0.4); }


/* Type-ahead card */

.search-field__suggestions { position: absolute; top: calc(100% + 42.4px); left: 9.5px; z-index: 6; }
.search-field__suggestions:empty { display: none; }
/* By the avatar, the card opens leftwards so it stays on screen */
.app-header__side--end .search-field__suggestions { right: 0; left: auto; }

.search-card {
  width: min(660px, calc(100vw - 32px));
  padding: 35.2px;
  border-radius: 26.4px;
  background: var(--color-sheet);
  box-shadow: rgb(var(--warm-rgb) / 0.5) 0 0 33px 0, rgb(var(--ink-rgb) / 0.06) 0 2px 8px;
  color: var(--color-ink);
}

.search-card__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  min-height: 56.9px;
  padding: 7.92px 11.616px 7.92px 52.8px;
  border-radius: 8.8px;
  color: inherit;
  text-decoration: none;
}

.search-card__row[aria-selected="true"] { background: rgb(var(--shade-rgb) / 0.12); }
.search-card__row:focus { outline: none; }
.search-card__row:focus-visible { background: rgb(var(--shade-rgb) / 0.12); }

.search-card__icon { position: absolute; left: 17.6px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--color-ink); }

.search-card__primary {
  grid-column: 1;
  overflow: hidden;
  font-size: 17.6px;
  line-height: 24.64px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-card__secondary {
  grid-column: 1;
  margin-top: -2.04px;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 13.2px;
  line-height: 18.48px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-card__date {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding-left: 13.2px;
  color: var(--color-muted);
  font-size: 13.2px;
  line-height: 18.48px;
  font-weight: 500;
}

/* View all sits between faint rules, as HEY's */
.search-card__row--all { min-height: 52.8px; margin-top: 1px; box-shadow: 0 -1px 0 rgb(var(--ink-rgb) / 0.05), 0 1px 0 rgb(var(--ink-rgb) / 0.05); }
.search-card__row--all .search-card__primary { grid-row: 1; align-self: center; }

.search-card__hint {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font: inherit;
  font-size: 12.1px;
  opacity: 0.6;
}

/* Matches */

.search-page mark {
  padding: 0 2.475px;
  border-radius: 3.96px;
  background: #fcebc4;
  color: #5c3d06;
}


/* Recent searches, as HEY's: a heading, then each query with a history icon
   and an × to forget it, rules between rows from the text on. */
.search-card__heading { margin: 0 0 8.8px; padding-left: 17.6px; font-size: 19.8px; line-height: 27.72px; font-weight: 700; }
.search-card__recent { position: relative; }
.search-card__recent + .search-card__recent::before { content: ""; position: absolute; top: 0; left: 52.8px; right: 0; height: 1px; background: rgb(var(--ink-rgb) / 0.1); }
.search-card__row--recent { min-height: 52.8px; padding-right: 52.8px; }
.search-card__row--recent .search-card__primary { font-size: 19.8px; line-height: 27.72px; font-weight: 400; }

.search-card__forget {
  position: absolute;
  top: 50%;
  right: 22px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  translate: 0 -50%;
  padding: 0;
  border: none;
  background: none;
  color: rgb(var(--ink-rgb) / 0.2);
  cursor: pointer;
}

.search-card__forget:hover { color: rgb(var(--ink-rgb) / 0.4); }
.search-card__forget-icon { width: 22px; height: 22px; }
/* Results page, measured from HEY's at 1512px: the filters on the left, a
   700px results column on the right. */

.search-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 700px);
  column-gap: 22px;
  align-content: start;
  width: min(1042px, 100%);
  padding: 39.6px;
}

.search-refine__form { display: flex; flex-direction: column; gap: 3.6px; margin: 0; }

.search-refine__heading { position: relative; display: flex; align-items: center; gap: 8.8px; padding: 1px 0; }

.search-refine__title,
.search-section__title { margin: 8.8px 0; font-size: 17.6px; line-height: 17.6px; font-weight: 700; }

.search-refine__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 28px;
  margin: -5.2px 0;
  border: 1px solid rgb(var(--ink-rgb) / 0.15);
  border-radius: 33px;
  color: inherit;
  font-size: 13.2px;
  font-weight: 500;
  text-decoration: none;
}

.search-refine__clear:hover { background: var(--color-tint); }

.search-filter { position: relative; display: flex; align-items: center; width: 220px; height: 36px; padding-left: 21.56px; font-size: 15.4px; }

/* The reference draws these icons about 15px across, centred 7.7px in. Ours
   have margins inside their 24-unit boxes, so each box is sized until its
   drawing is 15px, centred on the same line. */
.search-filter__icon { position: absolute; left: 7.3px; top: 50%; width: 18px; height: 18px; translate: -50% -50%; color: var(--color-ink); opacity: 0.5; pointer-events: none; }
.search-filter__icon--person { width: 18.5px; height: 18.5px; }
.search-filter__icon--paperclip { width: 19.5px; height: 19.5px; }
.search-filter__icon--envelope { width: 20px; height: 20px; }
.search-filter__icon--quote { width: 20.5px; height: 20.5px; translate: -50% calc(-50% + 1.5px); }
.search-filter__icon--plus_words, .search-filter__icon--minus_words { width: 21px; height: 21px; }

.search-filter__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.search-filter__control {
  width: 198px;
  height: 36px;
  padding: 6.16px;
  border: 1px solid transparent;
  border-radius: 8.8px;
  background: var(--color-sheet);
  color: rgb(var(--ink-rgb) / 0.6);
  font: 15.4px/21.56px var(--font);
  appearance: none;
}

.search-filter__control--narrow { width: 183px; }
input.search-filter__control { color: var(--color-ink); }
select.search-filter__control { cursor: pointer; }
.search-filter__control::placeholder { color: rgb(var(--ink-rgb) / 0.6); opacity: 1; }
.search-filter__control--set { color: var(--color-ink); }

.search-filter__control:hover,
.search-filter__control:focus { background: var(--color-tint); outline: none; box-shadow: none; }

.search-page__results { display: flex; flex-direction: column; min-width: 0; }

.search-contacts {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 19.8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.search-contact {
  display: flex;
  flex: 0 0 224px;
  flex-direction: column;
  justify-content: center;
  height: 68px;
  padding: 9.9px 17.6px;
  border-radius: 8.8px;
  background: rgb(var(--warm-rgb) / 0.15);
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
}

.search-contact:hover { background: rgb(var(--warm-rgb) / 0.35); }
.search-contact__name,
.search-contact__email { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15.4px; }
.search-contact__name { line-height: 20.02px; font-weight: 700; }
.search-contact__email { margin-top: 6px; color: rgb(var(--ink-rgb) / 0.66); line-height: 21.56px; }

.search-result {
  position: relative;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  column-gap: 12.4px;
  padding: 9.9px 17.6px;
  border-radius: 8.8px;
  color: inherit;
  text-decoration: none;
}

.search-result:hover { background: rgb(48 114 221 / 0.05); }
.search-result:focus { outline: none; }
.search-result:focus-visible { box-shadow: 0 0 0 2px #a4d2ff; }


.search-result__avatar .avatar { --avatar-size: 45px; font-size: 16px; }
.search-result__content { display: flex; flex-direction: column; min-width: 0; }
.search-result__title { padding-top: 0.5px; font-size: 19.8px; line-height: 26px; }

.search-result__summary {
  display: -webkit-box;
  overflow: hidden;
  color: rgb(var(--ink-rgb) / 0.66);
  font-size: 15.4px;
  line-height: 21.56px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.search-result__pill {
  display: inline-block;
  margin: 0 0 1px;
  padding: 0.66px 6.6px;
  border: 1px solid rgb(201 36 0 / 0.75);
  border-radius: 13.2px;
  color: rgb(201 36 0 / 0.75);
  font-size: 13.2px;
  line-height: 18.48px;
}

.search-result__time {
  align-self: end;
  margin-left: 9.625px;
  padding-bottom: 1px;
  color: rgb(var(--ink-rgb) / 0.66);
  font-size: 15.4px;
  line-height: 15.4px;
  white-space: nowrap;
}

.search-results__none { margin: 22px 0; color: var(--color-muted); font-size: 17.6px; }

.search-blank { display: flex; flex-direction: column; align-items: center; padding: 66px 22px; text-align: center; }
.search-blank__icon { width: 33px; height: 33px; color: var(--color-accent); }
.search-blank__text { max-width: 420px; margin: 16.5px 0 0; font-size: 19.8px; line-height: 27.72px; }
.search-blank__more { margin: 13.2px 0 0; font-size: 15.4px; }
.search-blank__more a { color: var(--color-accent); font-weight: 500; }

@media (max-width: 640px) {
  .search-field__input { width: 39px; padding: 0 0 0 39px; }
  .search-field__input::placeholder { color: transparent; }
  .search-field__icon { left: 10px; }
  .search-field__key { display: none; }
  .search-field__input:focus { width: min(286px, calc(100vw - 140px)); padding-right: 38px; }
  .search-field__suggestions { left: 0; }

  .search-page { grid-template-columns: minmax(0, 1fr); row-gap: 22px; padding: 22px 16px; }
  .search-refine__form { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 3.6px 11px; }
  .search-refine__heading { grid-column: 1 / -1; }
  .search-filter { width: auto; }
  .search-filter__control, .search-filter__control--narrow { width: 100%; }
  .search-result { padding-inline: 0; }
}