/*
 * Optional default theme for <rangefind-search>.
 *
 * This is opt-in — the component injects nothing itself. Link it only if you
 * are NOT styling the component with Tailwind or your own CSS:
 *   <link rel="stylesheet" href="/dist/rangefind-search.css">
 *
 * Everything targets the namespaced rf-search* hook classes on the element's
 * light DOM, so it composes with the host page. Tweak the look with the CSS
 * custom properties on .rf-search below (e.g. --rf-accent) instead of editing
 * rules. Light and dark are both handled via prefers-color-scheme.
 */

.rf-search {
  --rf-accent: #2563eb;
  --rf-bg: #ffffff;
  --rf-fg: #111827;
  --rf-muted: #6b7280;
  --rf-border: #d1d5db;
  --rf-panel-bg: #ffffff;
  --rf-option-hover: #f3f4f6;
  --rf-option-active: #e0edff;
  --rf-mark-bg: #fef08a;
  --rf-mark-fg: inherit;
  --rf-radius: 8px;
  --rf-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);

  position: relative;
  display: block;
  font: inherit;
  color: var(--rf-fg);
}

.rf-search__input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font: inherit;
  color: var(--rf-fg);
  background: var(--rf-bg);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius);
  outline: none;
  appearance: none;
}

.rf-search__input:focus-visible {
  border-color: var(--rf-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-accent) 25%, transparent);
}

.rf-search__panel {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  margin-top: 0.35rem;
  background: var(--rf-panel-bg);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius);
  box-shadow: var(--rf-shadow);
  overflow: hidden;
  max-height: min(60vh, 30rem);
  overflow-y: auto;
}

.rf-search__suggest,
.rf-search__list {
  list-style: none;
  margin: 0;
  padding: 0.25rem;
}

.rf-search__suggest {
  border-bottom: 1px solid var(--rf-border);
}

.rf-search__suggest-item {
  padding: 0.4rem 0.6rem;
  border-radius: calc(var(--rf-radius) - 2px);
  color: var(--rf-muted);
  cursor: pointer;
}

.rf-search__suggest-item[aria-selected="true"],
.rf-search__suggest-item:hover {
  background: var(--rf-option-hover);
  color: var(--rf-fg);
}

.rf-search__option {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: calc(var(--rf-radius) - 2px);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.rf-search__option:hover {
  background: var(--rf-option-hover);
}

.rf-search__option[aria-selected="true"] {
  background: var(--rf-option-active);
}

.rf-search__option-title {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}

.rf-search__option-snippet {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.9em;
  line-height: 1.4;
  color: var(--rf-muted);
}

.rf-search__option-url {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78em;
  color: color-mix(in srgb, var(--rf-accent) 80%, var(--rf-muted));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rf-search__mark {
  padding: 0 0.05em;
  border-radius: 2px;
  background: var(--rf-mark-bg);
  color: var(--rf-mark-fg);
}

.rf-search__empty {
  padding: 0.9rem 0.75rem;
  color: var(--rf-muted);
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .rf-search {
    --rf-accent: #60a5fa;
    --rf-bg: #0b1220;
    --rf-fg: #e5e7eb;
    --rf-muted: #9ca3af;
    --rf-border: #334155;
    --rf-panel-bg: #0f172a;
    --rf-option-hover: #1e293b;
    --rf-option-active: #1d3a63;
    --rf-mark-bg: #ca8a04;
    --rf-mark-fg: #0b1220;
    --rf-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}