/* Global search — /search (Figma 489:3308, 489:83422) + TopBar live dropdown (263:3262 / 266:3886) */

/* ---- TopBar dropdown ---- */
.search-dd-wrap { position: absolute; top: 46px; inset-inline-start: 0; z-index: 40; width: 560px; }
.search-dd {
  background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12); padding: 6px; display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100vh - 80px); overflow-y: auto;
}
.search-dd__group { display: flex; justify-content: space-between; padding: 8px 10px 2px; font: var(--text-caption); color: var(--color-text-muted); }
.search-dd__item {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 6px;
  color: var(--color-text-primary); text-decoration: none; font: var(--text-body);
}
.search-dd__item .icon { width: 18px; height: 18px; flex: none; color: var(--color-gray-500); }
.search-dd__item:hover, .search-dd__item.is-active { background: var(--color-gray-100); text-decoration: none; }
.search-dd__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-dd__sub { color: var(--color-text-muted); }
.search-dd__empty { padding: 12px 10px; font: var(--text-body); color: var(--color-text-secondary); }
.search-dd__divider { height: 1px; background: var(--color-border); margin: 4px 0; }
.search-dd__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 10px; min-height: 32px; }
.search-dd__all { font: var(--text-body-strong); color: var(--color-text-brand); border-radius: 6px; padding: 0 4px; margin-inline-start: -4px; }
.search-dd__all.is-active { background: var(--color-gray-100); text-decoration: none; }
.search-dd__hints { display: inline-flex; align-items: center; gap: 6px; font: var(--text-small); color: var(--color-text-muted); white-space: nowrap; }
.search-dd__hints kbd {
  display: inline-block; min-width: 40px; height: 20px; padding: 0 6px; text-align: center; direction: ltr;
  font: 500 11px/18px system-ui, sans-serif; color: var(--color-gray-500); background: var(--color-gray-100);
  border: 1px solid var(--color-border); border-radius: 4px;
}
mark, .search-dd mark { background: none; color: var(--color-text-brand); font-weight: 700; }

/* ---- /search page ---- */
.search-page .page-header { margin-block-end: 24px; }
.search-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); margin-block-end: 20px; overflow-x: auto; }
.search-tabs__item {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin-bottom: -1px;
  font: var(--text-body); color: var(--color-text-secondary); border-bottom: 2px solid transparent; white-space: nowrap;
}
.search-tabs__item:hover { color: var(--color-text-primary); text-decoration: none; }
.search-tabs__item.is-active { color: var(--color-text-brand); font-weight: 500; border-bottom-color: var(--color-brand-amber); }
.search-tabs__count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-full); background: var(--color-gray-100); color: var(--color-text-secondary); font: var(--text-caption);
}
.search-tabs__item.is-active .search-tabs__count { background: var(--color-brand-navy-50); color: var(--color-text-brand); }

.search-results { display: flex; flex-direction: column; gap: 16px; }
.search-group { overflow: hidden; }
.search-group__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.search-group__head h2 { font: var(--text-h3); }
.search-group__head .btn { color: var(--color-text-brand); font-weight: 500; font-size: 14px; }
.search-group__head .btn .icon { width: 16px; height: 16px; }
.search-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary); text-decoration: none; background: var(--color-surface-card);
}
.search-item:last-child { border-bottom: 0; }
.search-item:hover { background: var(--color-gray-50); text-decoration: none; }
.search-item__icon { width: 36px; height: 36px; flex: none; border-radius: var(--radius-full); background: var(--color-brand-navy-50); color: var(--color-text-brand); display: grid; place-items: center; }
.search-item__icon .icon { width: 18px; height: 18px; }
.search-item__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.search-item__title { font: var(--text-body-strong); }
.search-item__sub { font: var(--text-small); color: var(--color-text-secondary); }
.search-item__meta { font: var(--text-small); color: var(--color-text-muted); white-space: nowrap; }
.search-group__more { display: flex; align-items: center; gap: 4px; padding: 10px 16px; font: var(--text-small); color: var(--color-text-brand); border-top: 1px solid var(--color-border); }
.search-group__more .icon { width: 16px; height: 16px; }
.search-empty { padding: 72px 24px 88px; }
.search-empty .empty { max-width: 472px; }
.search-empty .empty__icon { width: 96px; height: 96px; background: var(--color-gray-100); color: var(--color-gray-600); }
/* the TopBar's absolute-positioned search icon / Ctrl K rules must not leak into the dropdown */
.topbar__search .search-dd .icon, .topbar__search .search-dd kbd { position: static; inset: auto; z-index: auto; pointer-events: auto; }
.topbar__search .search-dd kbd { line-height: 18px; }