.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 var(--wg-border); border-radius: 10px; transition: background .14s ease, transform .14s var(--wg-ease-spring, ease); }
.wg-gs-item:hover { background:var(--wg-tint); }
.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:var(--wg-surface-2); }
.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);
  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); 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);
  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: var(--wg-surface-2); }
.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); 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); 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); border-color:rgba(14,175,76,.30); }
.wg-gs-chip.a { background:var(--wg-warn-tint); color:var(--wg-warn-ink); border-color:transparent; }
/* dark styling, scoped: an explicit Light choice can never be
   overridden by the OS - auto consults the media query, dark does not */
:root[data-theme="dark"] .wg-gs-chip.a { background:#2a2113; color:#e9b866; }
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] .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); 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); 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; }
/* dark styling, scoped: an explicit Light choice can never be
   overridden by the OS - auto consults the media query, dark does not */
:root[data-theme="dark"] .wg-gs-ckind { color:#58d98a; background:rgba(14,175,76,.16); border-color:rgba(14,175,76,.34); }
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] .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);
  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) 25%, var(--wg-surface-2) 37%, var(--wg-surface) 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); color:var(--wg-text);
  border:1px solid var(--wg-border); }
.wg-gs-trychip:hover { border-color:var(--wg-color); color:var(--wg-color-dark); }
.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; }

/* Empty state (2026-09): what search covers, popular searches, the doors. */
.wg-gs-start { padding: 8px 0 0; }
.wg-gs-start-h { margin: 6px 0 4px; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.wg-gs-start-p { margin: 0 0 16px; color: var(--wg-muted); font-size: .9rem; line-height: 1.45; }
.wg-gs-start-h2 { margin: 0 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wg-muted); }
.wg-gs-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.wg-gs-chips .wg-chip { display: inline-flex; align-items: center; padding: 5px 11px; border: 1px solid var(--wg-border); border-radius: 999px; background: var(--wg-raised); color: var(--wg-text); font-size: .78rem; font-weight: 600; text-decoration: none; }
.wg-gs-chips .wg-chip:hover { border-color: var(--wg-color); text-decoration: none; }
.wg-gs-doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.wg-gs-door { display: flex; align-items: center; gap: 9px; padding: 12px 13px; border: 1px solid var(--wg-border-soft); border-radius: 12px; background: var(--wg-raised); color: var(--wg-text); font-weight: 700; font-size: .9rem; text-decoration: none; box-shadow: var(--wg-shadow-card); }
.wg-gs-door:hover { text-decoration: none; border-color: var(--wg-color); }
.wg-gs-door .wg-ico { width: 18px; height: 18px; color: var(--wg-color-dark); }
.wg-gs-start-new { margin: 16px 0 0; color: var(--wg-muted); font-size: .82rem; }
@media (min-width: 640px) { .wg-gs-doors { grid-template-columns: repeat(4, 1fr); } }

/* Sample: rows with live numbers and a rail of the newest listings. */
.wg-gs-doors { grid-template-columns: 1fr; }
.wg-gs-door { position: relative; padding-right: 36px; }
.wg-gs-chev { position: absolute; right: 12px; width: 16px; height: 16px; color: var(--wg-muted); }
.wg-gs-start-h2b { margin-top: 18px; }
.wg-gs-rail { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.wg-gs-rail::-webkit-scrollbar { display: none; }
.wg-gs-item { flex: 0 0 140px; display: flex; flex-direction: column; border: 1px solid var(--wg-border-soft); border-radius: 12px; overflow: hidden; background: var(--wg-raised); color: var(--wg-text); text-decoration: none; }
.wg-gs-item:hover { text-decoration: none; }
.wg-gs-item-img { display: block; height: 100px; background: var(--wg-surface, #f2f4f3); }
.wg-gs-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wg-gs-item b { padding: 8px 10px 0; font-size: .82rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wg-gs-item-p { padding: 2px 10px 10px; font-size: .84rem; font-weight: 800; color: var(--wg-color-dark); }
@media (min-width: 640px) { .wg-gs-doors { grid-template-columns: repeat(2, 1fr); } }