/* GigScope's summary bar above a Fiverr search, set in text as the extension renders it, with the card badges. */
.search-bar { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); padding: var(--s5); font-size: 0.9375rem; }
.search-bar p { margin: 0; }
.sb-line + .sb-chips { margin-top: var(--s2); }
.sb-rule { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.chip { display: inline-block; margin: 0 6px 6px 0; padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--radius-s); font-size: var(--t-small); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip.quiet, .chip.ad { color: var(--muted); }
.sb-demand { margin-top: var(--s4); padding: var(--s4); background: var(--tint); border-radius: var(--radius-s); }
.sb-demand-head { font-weight: 700; color: var(--muted); }
.sb-demand p + p { margin-top: var(--s2); }
.verdict { display: inline-block; padding: 0 10px; background: var(--gold); color: #1E1B18; font-weight: 800; border-radius: 4px; transform: rotate(-3deg); }
.sb-note { color: var(--muted); font-size: var(--t-small); }
.sb-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: var(--s5) 0 0; padding: var(--s4) 0 0; list-style: none; border-top: 1px solid var(--line); }
.sb-cards li { padding: 6px 6px 0; border: 1.5px dashed var(--line); border-radius: var(--radius-s); }
.sb-cards .chip { margin: 0 4px 6px 0; padding: 0 5px; font-size: 0.8125rem; }

/* the badges land on the cards one after another, each with the stamp press */
@media (prefers-reduced-motion: no-preference) {
  .search-figure.pending .sb-cards .chip { opacity: 0; }
  .search-figure.drawn .sb-cards .chip { animation: badge 120ms ease-out both; }
  .search-figure.drawn .sb-cards li:nth-child(1) .chip { animation-delay: 100ms; }
  .search-figure.drawn .sb-cards li:nth-child(2) .chip { animation-delay: 260ms; }
  .search-figure.drawn .sb-cards li:nth-child(3) .chip { animation-delay: 420ms; }
  .search-figure.drawn .sb-cards li:nth-child(4) .chip { animation-delay: 580ms; }
  @keyframes badge { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
}

@media (max-width: 960px) {
  .sb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .search-bar { padding: var(--s4); }
}