/* semantic-search.css: the jevql look. Paper, ink, one lime accent, monospace. */
.semantic-search {
  --ink: #171715; --paper: #f7f6f0; --panel: #fffefa; --line: #c7c5bb; --muted: #66645e; --lime: #d4ff3f; --pink: #ee5ba6;
  max-width: 720px; margin: 0 auto; padding: 32px 0; color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.semantic-search form { display: flex; gap: 10px; }
.semantic-search input {
  flex: 1; min-width: 0; border: 1.5px solid var(--ink); border-radius: 0; background: var(--panel);
  padding: 12px 14px; font: 600 .9rem/1.3 inherit; color: var(--ink); outline: none;
}
.semantic-search input:focus { box-shadow: 3px 3px 0 var(--ink); }
.semantic-search button {
  border: 1.5px solid var(--ink); border-radius: 0; background: var(--lime); box-shadow: 3px 3px 0 var(--ink);
  padding: 12px 16px; font: 900 .72rem/1 inherit; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); cursor: pointer;
}
.semantic-search button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.semantic-search button:disabled { opacity: .5; cursor: progress; }
.semantic-search ol { list-style: none; margin: 20px 0 0; padding: 0; border: 1.5px solid var(--ink); background: var(--panel); }
.semantic-search li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.semantic-search li:last-child { border-bottom: 0; }
.semantic-search .score { min-width: 3.5em; padding: 3px 6px; background: var(--lime); font-size: .72rem; font-weight: 900; text-align: center; }
.semantic-search [role="alert"] { margin-top: 16px; border-left: 5px solid var(--pink); background: #ecebe4; padding: 10px 12px; font-size: .85rem; }
.semantic-search .footer { margin: 10px 0 0; color: var(--muted); font-size: .72rem; font-weight: 700; }
.semantic-search p:not(.footer):not([role="alert"]) { margin-top: 16px; color: var(--muted); font-size: .9rem; }
.semantic-search details.sql { margin-top: 12px; border: 1px solid var(--line); background: var(--panel); }
.semantic-search details.sql summary { padding: 8px 12px; font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.semantic-search details.sql pre { margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); font: 600 .74rem/1.55 inherit; white-space: pre-wrap; }