/* pgvector Playground: additions to db/play.css */
.qbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.qbar .ql { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.qbar select { max-width: min(100%, 520px); }
.qown { display: flex; gap: 6px; flex: 1 1 260px; min-width: 0; }
.qown input { flex: 1; min-width: 0; font: inherit; font-size: 13.5px; padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-2); color: var(--ink); }
.qnote { font-size: 12.5px; color: var(--muted); flex-basis: 100%; }
.qnote:empty { display: none; }
.pv-flow { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; padding: 0; margin: 10px 0 18px; }
.pv-flow li { counter-increment: s; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 10px; font-size: 13px; color: var(--ink-2); }
.pv-flow li b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 3px; }
.pv-flow li b::before { content: counter(s) ". "; color: var(--accent); }
.pv-flow li, .about dl.gl, .about .notes { font-variant-ligatures: none; }
.about dl.gl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 16px; margin: 8px 0 18px; }
.about dl.gl dt { font-weight: 600; color: var(--ink); }
.about dl.gl dd { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) { .about dl.gl { grid-template-columns: 1fr; gap: 2px; } .about dl.gl dd { margin-bottom: 8px; } }

/* run feedback: results dim while a query runs, and new results flash briefly */
#results.running { opacity: .45; transition: opacity .12s; pointer-events: none; }
#results.running::before { content: ""; display: block; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: dbrun 0.9s linear infinite; }
@keyframes dbrun { from { background-position: -40% 0; } to { background-position: 140% 0; } }
#results.fresh .res { animation: dbfresh 1.1s ease-out; }
@keyframes dbfresh { 0% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { #results.running::before, #results.fresh .res { animation: none; } }
.about details.pv-ex { border: 1px solid var(--line); border-radius: 8px; margin: 6px 0; background: var(--surface); }
.about details.pv-ex summary { cursor: pointer; padding: 7px 12px; font-weight: 600; }
.about details.pv-ex pre { margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); overflow-x: auto; font: 12.5px/1.5 'IBM Plex Mono', ui-monospace, monospace; background: var(--surface-2); }
.pv-tbl table { width: 100%; } .pv-tbl th[scope], .pv-tbl tbody th { text-align: left; white-space: nowrap; color: var(--ink); }