/* Site search quick dialog (Brief 5.2) — global dialog styles only.
   Everything is prefixed .search-dialog / .kbd-hint. Shared components
   (btn, tag, status-line, visually-hidden) live in site.css. Custom
   properties use site.css names with literal fallbacks matching
   tokens.css, so the dialog renders even before token aliases land. */

.search-dialog {
  position: fixed; inset: 0; z-index: 300;
}
.search-dialog[hidden] { display: none; }
.search-dialog-backdrop {
  position: absolute; inset: 0;
  background: rgb(11 31 58 / 0.55);
}
.search-dialog-panel {
  position: relative;
  max-width: 640px;
  margin: 10vh var(--space-4, 16px) 0;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-lg, 0 20px 40px rgb(0 0 0 / 0.18));
  padding: var(--space-4, 16px);
}
@media (min-width: 640px) {
  .search-dialog-panel { margin-left: auto; margin-right: auto; }
}
.search-dialog-form { display: flex; gap: var(--space-2, 8px); }
.search-dialog-form input { flex: 1; min-width: 0; }
.search-dialog-results {
  list-style: none; margin: var(--space-3, 12px) 0 0; padding: 0;
  max-height: 50vh; overflow-y: auto;
}
.search-dialog-results:empty { margin-top: 0; }
.search-dialog-link {
  display: block; text-decoration: none; color: var(--color-ink, #0f172a);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-radius: var(--radius-sm, 8px);
}
.search-dialog-link:hover { color: var(--color-ink, #0f172a); }
.search-dialog-results li.is-active .search-dialog-link {
  background: var(--color-surface-alt, #f1f5f9);
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #2563eb);
  outline-offset: -2px;
}
.search-dialog-head {
  display: flex; align-items: center; gap: var(--space-2, 8px);
  justify-content: space-between;
}
.search-dialog-title { font-weight: var(--weight-semibold, 600); }
.search-dialog-desc {
  display: block; font-size: var(--text-sm, 14px);
  color: var(--color-ink-2, #475569); margin-top: 2px;
}
.search-dialog-results mark {
  background: var(--color-action-blue-tint, #dbeafe); color: inherit;
  padding: 0 1px; border-radius: 2px;
}
.search-dialog-note { padding: var(--space-2, 8px) var(--space-3, 12px); }
.search-dialog-status { margin-top: var(--space-3, 12px); }
.search-dialog-hint { margin: var(--space-2, 8px) 0 0; }
.kbd-hint { align-self: center; white-space: nowrap; }