/* China sourcing network finder.
   Namespaced `sn-`, checked against the site's body classes — a bare component
   class matching one of those restyles the whole document. */

.sn-controls {
   background: var(--bg-card);
   border: 1px solid var(--border-dark, rgba(255, 255, 255, .08));
   border-radius: var(--radius-lg, 16px);
   padding: 22px 24px;
   margin-bottom: 28px;
}

.sn-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 16px;
}
.sn-chip {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   border: 1px solid var(--border-dark, rgba(255, 255, 255, .13));
   background: var(--bg-black);
   color: var(--text-mid);
   font: inherit;
   font-size: 13px;
   font-weight: 600;
   padding: 11px 16px;   /* 44px tall: the minimum comfortable tap target */
   border-radius: 100px;
   cursor: pointer;
   transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.sn-chip:hover { color: var(--text-bright); border-color: var(--border-m, rgba(255, 255, 255, .24)); }
.sn-chip.is-on {
   color: var(--gold-text, #F5BC45);
   background: var(--gold-pale);
   border-color: rgba(240, 165, 30, .42);
}
.sn-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.sn-row {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   align-items: center;
}
.sn-row input,
.sn-row select {
   background: var(--bg-black);
   border: 1px solid var(--border-dark, rgba(255, 255, 255, .13));
   border-radius: 10px;
   padding: 10px 13px;
   color: var(--text-bright);
   font: inherit;
   font-size: 14px;
}
.sn-row input { flex: 1 1 260px; min-width: 0; }
.sn-row select { flex: 0 1 200px; }
.sn-row input:focus,
.sn-row select:focus { outline: none; border-color: rgba(240, 165, 30, .55); }
.sn-count {
   margin-left: auto;
   font-size: 13px;
   color: var(--text-dim);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
}

/* ── results ────────────────────────────────────────────────────────────── */
.sn-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 16px;
}

.sn-card {
   background: var(--bg-card);
   border: 1px solid var(--border-dark, rgba(255, 255, 255, .08));
   border-left: 3px solid var(--border-m, rgba(255, 255, 255, .18));
   border-radius: 12px;
   padding: 18px 20px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}
/* The stripe encodes the entry type, so the four kinds stay distinguishable
   when the list is filtered to a mix of them. */
.sn-card--cluster    { border-left-color: var(--gold); }
.sn-card--fair       { border-left-color: var(--slate, #5B7E99); }
.sn-card--study      { border-left-color: #4ADE80; }
.sn-card--inspection { border-left-color: var(--red); }

.sn-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.sn-card__kind {
   flex-basis: 100%;
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--text-dim);
}
.sn-card__head h3 {
   margin: 0;
   font-size: 16.5px;
   font-weight: 700;
   color: var(--text-bright);
   letter-spacing: -.02em;
}
.sn-card__region {
   font-size: 12.5px;
   color: var(--text-dim);
}
.sn-card p {
   margin: 0;
   font-size: 13.5px;
   line-height: 1.6;
   color: var(--text-mid);
}
.sn-card__note {
   font-size: 12.5px !important;
   color: var(--gold-text, #F5BC45) !important;
   background: var(--gold-pale);
   border-radius: 8px;
   padding: 8px 10px;
}

.sn-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sn-tags li {
   font-size: 11.5px;
   color: var(--text-dim);
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .07);
   border-radius: 100px;
   padding: 3px 9px;
}

.sn-empty {
   grid-column: 1 / -1;
   text-align: center;
   padding: 40px 20px;
   color: var(--text-dim);
   font-size: 14px;
}

.sn-disclosure {
   margin-top: 32px;
   padding: 18px 20px;
   background: rgba(255, 255, 255, .02);
   border: 1px solid var(--border-dark, rgba(255, 255, 255, .08));
   border-radius: 12px;
   font-size: 13px;
   line-height: 1.65;
   color: var(--text-dim);
}
.sn-disclosure strong { color: var(--text-mid); }

@media (max-width: 620px) {
   .sn-controls { padding: 16px; }
   .sn-count { margin-left: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
   .sn-chip { transition: none; }
}