.wg-searchpage { max-width: 720px; margin: 0 auto; }
.wg-searchpage .wg-search { margin: 8px 0 18px; }

.wg-gs-sec { margin-bottom: 22px; }
.wg-gs-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--wg-border); padding-bottom: 6px; }
.wg-gs-sechead h2 { margin: 0; font-size: 1.05rem; color: var(--wg-text); }
.wg-gs-more { font-size: 0.85rem; color: var(--wg-color); text-decoration: none; white-space: nowrap; }
.wg-gs-list { display: flex; flex-direction: column; }
.wg-gs-item { display: flex; align-items: center; gap: 12px; padding: 10px 8px; text-decoration: none; color: inherit; border-bottom: 1px solid #f0f2f0; border-radius: 10px; transition: background .14s ease, transform .14s var(--wg-ease-spring, ease); }
.wg-gs-item:hover { background: var(--wg-tint, #f4fbf7); }
.wg-gs-item:active { transform: scale(0.99); }
.wg-gs-item:last-child { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .wg-gs-item { transition: none; } .wg-gs-item:active { transform: none; } }
.wg-gs-thumb { flex: none; width: 44px; height: 44px; border-radius: 8px; background-size: cover; background-position: center; background-color: #f1f3f5; }
.wg-gs-text { min-width: 0; display: flex; flex-direction: column; }
.wg-gs-title { font-size: 0.92rem; color: var(--wg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-gs-sub { font-size: 0.8rem; color: var(--wg-muted); margin-top: 1px; }
/* "Related" tag on semantic (meaning-based) fillers — distinguishes them from
   literal keyword matches so a loose hit doesn't read as broken. */
.wg-gs-rel { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; vertical-align: middle; background: var(--wg-surface, #f0f4f8);
  color: var(--wg-muted); border: 1px solid var(--wg-border); }

/* Rich cards — "object" results (marketplace, jobs, events, workers, lucky):
   image + up to three decision attributes, so the searcher can judge pre-click. */
.wg-gs-card { display: flex; gap: 12px; align-items: stretch; padding: 11px; margin-bottom: 9px;
  background: var(--wg-card, #fff); border: 1px solid var(--wg-border); border-radius: 14px;
  text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .12s var(--wg-ease-spring, ease); }
.wg-gs-card:hover { box-shadow: 0 4px 16px rgba(16,24,40,.09); }
.wg-gs-card:active { transform: scale(0.995); }
@media (prefers-reduced-motion: reduce) { .wg-gs-card { transition: none; } .wg-gs-card:active { transform: none; } }
.wg-gs-cthumb { flex: none; width: 72px; height: 72px; border-radius: 10px; background-size: cover;
  background-position: center; background-color: var(--wg-surface, #f1f3f5);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wg-gs-cthumb.is-icon { color: var(--wg-muted); }
.wg-gs-cthumb.is-icon svg { width: 30px; height: 30px; }
.wg-gs-cthumb.is-initial { font-weight: 800; font-size: 1.4rem; color: var(--wg-muted);
  background: linear-gradient(135deg, #dfe7f2, #eef2f8); }
.wg-gs-cbody { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.wg-gs-ctitle { font-weight: 700; font-size: 0.95rem; color: var(--wg-text); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-gs-cmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0.8rem; color: var(--wg-muted); }
.wg-gs-strong { color: var(--wg-text); font-weight: 700; }
.wg-gs-emph { color: var(--wg-color-dark, #0b7d39); font-weight: 800; font-size: 0.9rem; }
.wg-gs-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--wg-muted); opacity: .5; flex: none; }
.wg-gs-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; background: var(--wg-surface, #f0f4f8); color: var(--wg-muted); border: 1px solid var(--wg-border); }
.wg-gs-chip.g { background: rgba(14,175,76,.10); color: var(--wg-color-dark, #0b7d39); border-color: rgba(14,175,76,.30); }
.wg-gs-chip.a { background: #fff5e6; color: #b26a00; border-color: transparent; }
@media (prefers-color-scheme: dark) { .wg-gs-chip.a { background: #2a2113; color: #e9b866; } }

/* Best match — the authoritative direct destination for a navigational query. */
.wg-gs-best { margin-bottom: 18px; }
.wg-gs-best-lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--wg-color-dark, #0b7d39); margin-bottom: 6px; }
.wg-gs-best-item { display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none;
  background: rgba(14,175,76,.07); border: 1px solid rgba(14,175,76,.35); }
.wg-gs-best-item:hover { background: rgba(14,175,76,.12); }
.wg-gs-best-title { display: block; font-size: 1rem; font-weight: 700; color: var(--wg-text); }
.wg-gs-best-sub { display: block; font-size: 0.8rem; color: var(--wg-muted); margin-top: 1px; }
/* Type badge naming WHAT the best match is (e.g. "Available for Work", "Visa"). */
.wg-gs-ckind { align-self: flex-start; display: inline-flex; align-items: center; margin-bottom: 3px;
  padding: 2px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--wg-color-dark, #0b7d39); background: rgba(14,175,76,.12);
  border: 1px solid rgba(14,175,76,.28); }
.wg-gs-best-item .wg-gs-ckind { margin-bottom: 6px; }
/* The best match rendered as a rich card: give it the accent treatment so the top
   hit reads as authoritative, and let it show more (taller thumb, wrapping title). */
.wg-gs-best-card { border-color: rgba(14,175,76,.38); background: rgba(14,175,76,.05); }
.wg-gs-best-card:hover { box-shadow: 0 6px 20px rgba(14,175,76,.14); }
.wg-gs-best-card .wg-gs-ctitle { font-size: 1.02rem; white-space: normal; }
@media (prefers-color-scheme: dark) {
  .wg-gs-ckind { color: #58d98a; background: rgba(14,175,76,.16); border-color: rgba(14,175,76,.34); }
}

/* Loading state: visible status + shimmer skeletons (no blank "no results" gap). */
.wg-gs-loading { display: flex; align-items: center; gap: 10px; color: var(--wg-muted);
  font-size: 0.9rem; margin: 4px 0 14px; }
.wg-gs-spinner { width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid var(--wg-border); border-top-color: var(--wg-color, #0eaf4c);
  animation: wg-gs-spin 0.7s linear infinite; }
@keyframes wg-gs-spin { to { transform: rotate(360deg); } }
.wg-gs-skel { height: 44px; border-radius: 10px; margin-bottom: 8px;
  background: linear-gradient(90deg, var(--wg-surface,#eef1f5) 25%, #e2e7ee 37%, var(--wg-surface,#eef1f5) 63%);
  background-size: 400% 100%; animation: wg-gs-shimmer 1.3s ease infinite; }
@keyframes wg-gs-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .wg-gs-spinner, .wg-gs-skel { animation: none; }
}

/* Did you mean + error/retry */
.wg-gs-dymtop { margin: 0 0 10px; font-size: 0.95rem; color: var(--wg-muted); }
/* AI "Try instead" alternative-search chips (weak searches only). */
.wg-gs-try { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 16px; font-size: 0.9rem; }
.wg-gs-try-lbl { color: var(--wg-muted); }
.wg-gs-trychip { display: inline-block; padding: 4px 12px; border-radius: 999px; text-decoration: none;
  font-size: 0.85rem; font-weight: 600; background: var(--wg-surface, #f0f4f8); color: var(--wg-text);
  border: 1px solid var(--wg-border); }
.wg-gs-trychip:hover { border-color: var(--wg-color, #0eaf4c); color: var(--wg-color-dark, #0b7d39); }
.wg-gs-dym { display: inline-block; margin-top: 6px; font-size: 0.9rem; }
.wg-gs-dym a { font-weight: 700; }
/* Comfortable touch targets on coarse pointers (P2-4: >= 44px tappable). */
@media (pointer: coarse) {
  .wg-gs-trychip { min-height: 44px; padding: 10px 16px; display: inline-flex; align-items: center; }
  .wg-gs-dym a, .wg-gs-dymtop a { display: inline-block; min-height: 44px; line-height: 44px; }
}
.wg-gs-error { display: flex; align-items: center; gap: 12px; color: var(--wg-muted); padding: 12px 0; }

/* A result that matched one of the thread's ANSWERS rather than its title or
   body. Quoting the line is the whole point — it tells the searcher why this
   thread is here and often answers them without a click. */
.wg-gs-answer {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--wg-muted);
  border-left: 2px solid var(--wg-border);
  padding-left: 8px;
}
.wg-gs-answer b { color: var(--wg-text); font-weight: 600; }