/* static/css/catalogue.css: Catalogue pane (#paneCat), owned by Task 4.
   Port of design-language/redesign.html .srch .chips .chip .dlbl (+ the kit list/rows/empty from kit.css). */

/* search: red focus ring, barcode shortcut back to the camera */
.k-srch{display:flex;align-items:center;gap:10px;height:48px;margin-top:16px;padding:0 8px 0 14px;border-radius:16px;background:var(--surface);
  border:1.5px solid var(--hairline);color:var(--faint);min-width:0;box-sizing:border-box;transition:border-color 160ms ease,box-shadow 160ms ease}
.k-srch:focus-within{border-color:var(--red);box-shadow:0 0 0 4px var(--red-wash)}
.k-srch>svg{flex:none;display:block}
.k-srch input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0;font:500 15.5px var(--body);color:var(--ink);-webkit-appearance:none;appearance:none}
.k-srch input::placeholder{color:var(--faint)}
.k-kb{flex:none;width:34px;height:34px;border:0;border-radius:11px;background:var(--surface-soft);display:grid;place-items:center;color:var(--ink);padding:0}
.k-kb svg{display:block}

/* status chips: one line, horizontal scroll, edge fade; active chip red */
.k-chips{display:flex;gap:8px;margin:12px -16px 0;padding:0 16px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent)}
.k-chips::-webkit-scrollbar{display:none}
.k-chips::after{content:"";flex:none;width:8px}
.k-chip{flex:none;height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 13px;border-radius:99px;background:var(--surface);border:1px solid var(--hairline);
  font:600 13.5px var(--body);color:var(--body-c);white-space:nowrap;
  transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,transform var(--k-press) var(--ease-out)}
.k-chip svg{display:block;flex:none}
.k-chip .k-cc{font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums;transition:color 180ms ease}
.k-chip.on{background:var(--red);border-color:var(--red);color:var(--on-red)}
.k-chip.on .k-cc{color:var(--on-red);opacity:.8}
.k-chip:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* group label + count */
.k-glbl{display:flex;justify-content:space-between;gap:12px;margin:16px 4px 6px;font:700 11.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);min-width:0}
.k-glbl .k-gn{flex:none;font-variant-numeric:tabular-nums}

/* paging */
#catMore .k-btns{margin-top:12px}
#catMore .k-btn{height:46px;font-size:14.5px}
.cat-retry{display:block}

/* small phones: slightly tighter chips */
@media (max-width:374px){ .k-chip{padding:0 11px;gap:5px} }