/* static/css/vsearch.css: Catalogue photo search (design-language/visual-search.html screens 1 to 3).
   1. the search field: camera button, the photo-query pill (#vsQ), the first-run tip;
   2. results in #catList: read line, "Looks like" rows with a match bar + word, note, footer, skeleton, empty;
   3. the side-by-side push layer #vscompare (kit .k-push; bar / foot reuse catview.css .cv-bar / .cv-foot).
   Status tones only green / amber / grey; red is the action (camera button, primary button). */

/* ── 1. search field ── */
.k-kb.vs-cam{background:var(--red);color:var(--on-red);box-shadow:0 4px 10px rgba(234,56,58,.3)}
.k-srch>.k-kb+.k-kb{margin-left:-4px}
.vs-q{display:none;padding:0 7px 0 7px;gap:8px;color:var(--ink)}
#paneCat.vs-on .vs-q{display:flex}
#paneCat.vs-on>.k-srch:not(.vs-q),#paneCat.vs-on #catChips,#paneCat.vs-on #catTool,#paneCat.vs-on #catActs,#paneCat.vs-on #vsTip{display:none}
.vs-qimg{flex:none;width:34px;height:34px;border-radius:50%;object-fit:contain;background:var(--surface-soft);display:grid;place-items:center;color:var(--mute)}
.vs-qt{flex:1;min-width:0;height:100%;border:0;background:none;padding:0;text-align:left;font:600 15px var(--body);color:var(--ink);display:flex;align-items:center}
.vs-qx{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:none;display:grid;place-items:center;color:var(--mute);padding:0}
.vs-qx svg,.vs-qimg svg{display:block}

.vs-tip{display:flex;gap:10px;align-items:flex-start;width:100%;margin-top:10px;padding:11px 13px;border-radius:16px;background:var(--red-wash);
  border:1px solid color-mix(in srgb,var(--red) 22%,transparent);color:var(--red-ink);text-align:left;font:inherit;min-width:0;box-sizing:border-box}
.vs-tip>svg{flex:none;display:block;margin-top:1px}
.vs-tt{min-width:0}
.vs-tt b{display:block;font:700 14px var(--body)}
.vs-tt span{display:block;font-size:12.5px;line-height:1.35;color:var(--body-c);margin-top:1px}

/* ── 2. results ── */
.vs-read{display:flex;align-items:center;gap:8px;margin:14px 4px 0;font-size:13px;color:var(--mute);min-width:0;min-height:18px}
.vs-read[hidden]{display:none}
.vs-read b{color:var(--ink);font-weight:700}
.vs-read+.k-glbl{margin-top:10px}
.vs-ok{flex:none;display:grid;color:var(--ok)}
.vs-spin{flex:none;width:13px;height:13px;border-radius:50%;border:2px solid var(--hairline-strong);border-top-color:var(--red);animation:k-spin .8s linear infinite;box-sizing:border-box}

.vs-list .k-prow[data-w="best"]:first-child{background:linear-gradient(90deg,var(--ok-wash),var(--surface) 70%)}
.vs-mt{display:flex;align-items:center;gap:8px;margin-top:2px;min-width:0}
.vs-bar{flex:none;display:block;width:64px;height:5px;border-radius:9px;background:var(--surface-soft);overflow:hidden}
.vs-bar em{display:block;height:100%;border-radius:9px;transition:width 320ms var(--ease-inout),background-color 200ms ease}
.vs-bar.ok em{background:var(--ok)}.vs-bar.wa em{background:var(--warn)}.vs-bar.mu em{background:var(--hairline-strong)}
.vs-w{font:700 12px var(--body);white-space:nowrap;transition:color 200ms ease}
.vs-w.ok{color:var(--ok)}.vs-w.wa{color:var(--warn)}.vs-w.mu{color:var(--faint)}
.vs-chv{flex:none;display:grid;color:var(--faint)}
.vs-chv svg{display:block}
.vs-list .k-prow{will-change:auto}

.vs-note{margin:10px 4px 0;font-size:12.5px;color:var(--faint)}
.vs-foot{position:sticky;bottom:0;margin:12px -16px 0;padding:10px 16px 12px;background:linear-gradient(transparent,var(--canvas) 14px)}
.vs-foot .k-btn{height:48px;font-size:15px}

/* skeleton while the photo is searched */
.vs-sk{display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:68px;border-top:1px solid var(--hairline);box-sizing:border-box}
.vs-sk:first-child{border-top:0}
.vs-sk-t{flex:none;width:48px;height:48px;border-radius:13px}
.vs-sk span{flex:1;display:flex;flex-direction:column;gap:7px}
.vs-sk span i{display:block;height:9px;border-radius:9px}
.vs-sk span i:nth-child(1){width:70%}.vs-sk span i:nth-child(2){width:42%}.vs-sk span i:nth-child(3){width:64px;height:5px}
.vs-sk i{background:var(--surface-soft);animation:vs-pulse 1.2s ease-in-out infinite}
@keyframes vs-pulse{50%{opacity:.45}}

.vs-empty .k-empty{padding:56px 20px 18px}
.vs-empty .k-eic{background:var(--surface-soft);color:var(--mute)}   /* a state, not an action: never red */
.vs-empty .k-btns{justify-content:center}
.vs-empty .k-btn{flex:0 1 auto;height:46px;font-size:14.5px}

/* ── 3. side by side ── */
#vscompare.vs-cmp{z-index:21;overflow:hidden}
.vs-cbody{flex:1;min-height:0;overflow-y:auto;padding:2px 16px 16px;scrollbar-width:none;overscroll-behavior:contain}
.vs-cbody::-webkit-scrollbar{display:none}
.vs-pair{display:flex;gap:10px;min-width:0}
.vs-pc{flex:1 1 0;min-width:0;background:var(--surface);border:1px solid var(--hairline);border-radius:18px;padding:8px;text-align:center;box-shadow:var(--sh-sm)}
.vs-pim{position:relative;height:clamp(160px,30dvh,240px);border-radius:12px;background:var(--surface-soft);overflow:hidden;display:grid;place-items:center}
.vs-pim img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.vs-noimg{color:var(--faint);display:grid}
.vs-pc>span{display:block;margin-top:7px;font:700 11px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.vs-pi{margin-top:12px;background:var(--surface);border:1px solid var(--hairline);border-radius:18px;padding:13px 14px;box-shadow:var(--sh-sm);min-width:0}
.vs-br{font:700 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--red-ink)}
.vs-nm{font:600 19px/1.2 var(--disp);color:var(--ink);margin:3px 0 2px;overflow-wrap:anywhere}
.vs-gt{font:500 12px var(--mono);color:var(--faint)}
.vs-chk{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.vs-ck{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);min-width:0}
.vs-ck svg{flex:none;display:block}
.vs-ck.ok svg{color:var(--ok)}.vs-ck.wa svg{color:var(--warn)}.vs-ck.mu svg{color:var(--faint)}
#vscompare .cv-foot .k-btn:disabled{opacity:.6}

@media (max-width:374px){
  .vs-bar{width:52px}
  .vs-pim{height:clamp(140px,26dvh,200px)}
}
@media (prefers-reduced-motion:reduce){
  .vs-spin,.vs-sk i{animation-duration:2.4s}
  .vs-bar em{transition:none}
}