.topbar__search kbd { margin-left: auto; height: 18px; font-size: 10px; }
.topbar__search input::-webkit-search-cancel-button { display: none; }

.spotlight {
  width: 680px;
  margin: 10vh auto auto;
  max-height: 76vh;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.spotlight[open] { display: flex; animation: confirm-in var(--dur-base) var(--ease-out); }
.spotlight__bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
.spotlight__bar > .ic { color: var(--gold-300); }
.spotlight__input {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: 500 17px/1 var(--font-sans);
}
.spotlight__input::placeholder { color: var(--text-disabled); }
.spotlight__input::-webkit-search-cancel-button { display: none; }
.spotlight__spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--gold-400); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spotlight__results { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px; min-height: 120px; }
.spotlight__foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--border-subtle); background: var(--surface-1); font: 400 11px/1 var(--font-sans); color: var(--text-muted); }
.spotlight__foot kbd { height: 18px; }

.search-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 20px; color: var(--text-muted); font-size: 13px; text-align: center; }
.search-empty .ic { width: 24px; height: 24px; }
.search-group + .search-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-subtle); }
.search-group__head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; font: var(--text-label); color: var(--text-muted); }
.search-group__head .ic { color: var(--gold-300); }
.search-group__more { display: inline-flex; align-items: center; gap: 2px; font: 600 11px/1 var(--font-sans); letter-spacing: 0; text-transform: none; }
.search-hit {
  --tone: var(--gold-300);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  text-decoration: none;
  min-width: 0;
}
.search-hit:hover, .search-hit.is-active { background: var(--accent-subtle); text-decoration: none; color: var(--text-primary); }
.search-hit.is-active { box-shadow: inset 2px 0 0 var(--accent); }
.search-hit--danger { --tone: var(--danger-fg); }
.search-hit--warning { --tone: var(--warning-fg); }
.search-hit--success { --tone: var(--success-fg); }
.search-hit--info { --tone: var(--info-fg); }
.search-hit__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--tone) 13%, transparent); color: var(--tone); }
.search-hit__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.search-hit__title { font: 600 13px/1.3 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-hit__sub { font: 400 12px/1.35 var(--font-sans); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-hit__meta { flex: none; font: 400 12px/1 var(--font-sans); color: var(--text-muted); }
.search-hit__enter { color: var(--text-disabled); opacity: 0; }
.search-hit.is-active .search-hit__enter { opacity: 1; }
.search-hit mark { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.search-all { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; padding: 10px; border-top: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font: 600 13px/1 var(--font-sans); }
.search-all:hover, .search-all.is-active { background: var(--accent-subtle); text-decoration: none; }

.search-page__form { display: flex; gap: 10px; margin-bottom: 16px; max-width: 760px; }
.search-page__form .control { flex: 1; }
.control--lg { height: var(--control-h-lg); }
.control--lg input { font-size: 15px; }
.search-page__results { padding: 6px; }
.search-page__results .search-hit__sub { white-space: normal; }

:target { scroll-margin-top: calc(var(--topbar-h) + 16px); }
:is(article, tr, div, section):target { animation: target-flash 2.4s var(--ease-out) 1; }
@keyframes target-flash { 0%, 30% { box-shadow: 0 0 0 2px var(--gold-400); } 100% { box-shadow: none; } }

@media (max-width: 640px) {
  .dialog.spotlight { margin: 0 auto auto; width: 100%; max-height: 92dvh; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .spotlight__foot, .search-hit__enter { display: none; }
  .search-page__form { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .spotlight[open], :is(article, tr, div, section):target { animation: none; }
}
