/* Focused styles for browse-swaps redesign
   Purpose: override heavy styles from main stylesheet for the browse page only.
*/

:root{
  --bs-page-bg:#F7F6F2; --bs-text:#1A1A18; --bs-accent:#1B6B3A; --bs-card:#FFFFFF; --bs-border:#E2DDD5; --bs-muted:#6B6B66; --bs-pill:#F2F1EE;
}

body { background: var(--bs-page-bg) !important; }

.bs-container{ max-width:1100px; margin:0 auto; padding:24px; }

.bs-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.bs-count{ font-weight:700; font-size:1rem; color:var(--bs-text); }

.bs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }

.bs-card{ background:var(--bs-card); border:1px solid var(--bs-border); border-radius:10px; padding:14px; display:flex; gap:12px; align-items:flex-start; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.bs-card .bs-accent{ width:6px; border-radius:6px; background:transparent; }
.bs-card.bs-verified .bs-accent{ background:linear-gradient(180deg,var(--bs-accent),#0f7a44); }
.bs-meta{ flex:1 }
.bs-title{ display:flex; gap:8px; align-items:center }
.bs-avatar{ width:40px; height:40px; border-radius:8px; background:var(--bs-pill); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--bs-text) }
.bs-name{ font-weight:700; font-size:1rem }
.bs-level{ font-size:0.85rem; color:var(--bs-muted); margin-left:6px }
.bs-route{ margin-top:8px; color:var(--bs-muted); font-weight:600 }
.bs-route strong{ color:var(--bs-accent) }
.bs-subjects{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap }
.bs-pill{ background:var(--bs-pill); color:var(--bs-text); padding:6px 8px; border-radius:999px; font-size:0.82rem; border:1px solid #eee }

.bs-actions{ display:flex; flex-direction:column; gap:8px; align-items:flex-end }
.bs-btn{ padding:8px 12px; border-radius:8px; border:1px solid var(--bs-border); background:transparent; color:var(--bs-text); cursor:pointer }
.bs-btn.primary{ background:var(--bs-accent); color:#fff; border-color:var(--bs-accent) }

/* Accessibility: increase contrast for filter chips */
.filter-chip{ background: rgba(27,107,58,0.12); color: var(--bs-accent); padding:6px 10px; border-radius:999px; font-weight:600; border:1px solid rgba(27,107,58,0.08) }

/* Remove forced min-heights that create whitespace */
.listing-card, .card, .bs-card { min-height: 0 !important; }

/* Wizard step clarity on small screens */
.wizard-step-number { width:36px; height:36px; font-size:0.9rem }
.wizard-step.completed .wizard-step-number::after{ content: '✓'; font-weight:800 }

@media (max-width:520px){
  .bs-actions{ align-items:flex-start }
}

/* Small utilities for swap badges */
.bs-new{ color:var(--bs-accent); font-weight:700; font-size:0.85rem }