.account-search {
  position: relative;
  width: 100%;
  max-width: var(--toolbar-search-max-width);
  margin-top: var(--space-10);
}

.account-search__field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: calc(var(--space-12) + var(--space-2));
  padding: 0 var(--space-2) 0 var(--space-5);
  background-color: var(--surface-base);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

.account-search__field:focus-within { box-shadow: var(--shadow-lg); }

.account-search__icon {
  flex: none;
  font-size: var(--text-2xl);
  color: var(--text-tertiary);
}

.account-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-base);
  outline: none;
  caret-color: var(--accent-primary);
}

.account-search__input::placeholder { color: var(--text-tertiary); }

.account-search__key {
  flex: none;
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-md);
  background-color: var(--surface-sunken);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.account-search__go {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring);
}

.account-search__go:hover {
  background-color: var(--button-primary-bg-hover);
  transform: translateX(var(--space-0-5));
}

.account-search__go .material-symbols-rounded { font-size: var(--text-xl); }

.account-search > turbo-frame { display: contents; }

.account-search__results {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  left: 0;
  z-index: var(--z-dropdown);
  overflow: hidden;
  background-color: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  text-align: start;
}

.account-search__group { padding: var(--space-2); }

.account-search__group + .account-search__group { padding-top: 0; }

.account-search__label {
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.account-search__result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  text-decoration: none;
}

.account-search__result:hover,
.account-search__result[aria-selected="true"] { background-color: var(--surface-selected); }

.account-search__result mark {
  border-radius: var(--radius-sm);
  background-color: var(--accent-muted);
  color: inherit;
  font-weight: var(--weight-semibold);
}

.account-search__result-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-search__result-meta {
  flex: none;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.account-search__result-enter {
  flex: none;
  font-size: var(--text-lg);
  color: var(--text-tertiary);
  visibility: hidden;
}

.account-search__result[aria-selected="true"] .account-search__result-enter { visibility: visible; }

.account-search__foot {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background-color: var(--surface-sunken);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.account-search__foot kbd {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

dialog.modal.modal--search {
  width: min(40rem, calc(100vw - var(--space-8)));
  max-height: calc(100dvh - 2 * var(--space-16));
  margin: var(--space-16) auto auto;
}

.modal--search .account-search {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: none;
  margin: 0;
}

.modal--search .account-search__field {
  flex: none;
  border-radius: 0;
  box-shadow: none;
}

.modal--search .account-search__go { display: none; }

.modal--search .account-search__results {
  position: static;
  overflow-y: auto;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  box-shadow: none;
}

.account-thumb {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-lg);
  background-color: var(--surface-sunken);
  color: var(--text-secondary);
}

.account-thumb .material-symbols-rounded { font-size: var(--text-xl); }

.account-search__result .account-thumb,
.account-search__result .avatar {
  width: var(--space-8);
  height: var(--space-8);
}

.account-search__result .account-thumb .material-symbols-rounded { font-size: var(--text-lg); }

@media (max-width: 767px) {
  .account-search { margin-top: var(--space-8); }
  .account-search__key { display: none; }
}