/* ============================================================
   Brand & Store — Shopper · Membership (#shopper-member)
   Namespaced .bs-mem-*. App tokens only (adapt per theme). Reuses
   .card / .bs-ov-section / .pnl-compare-toggle / .bs-ov-state from shared CSS.
   ============================================================ */

.bs-mem-shopee {
  display: inline-flex; align-items: center;
  background: #EE4D2D; color: #fff;
  font: 700 11px var(--font-mono, monospace); letter-spacing: 0.07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-sm, 6px);
}

/* ---- §2 KPI grid (7 metric cards) ---- */
.bs-mem-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3, 12px); padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-5, 20px);
}
.bs-mem-kpi--accent { outline: 1px solid color-mix(in srgb, var(--color-brand, #CB222A) 40%, transparent); border-radius: var(--radius-md, 10px); }

.bs-mem-custom { display: flex; gap: var(--space-4, 16px); padding: 0 var(--space-5, 20px) var(--space-3, 12px); font-size: 12px; color: var(--text-secondary); }
.bs-mem-custom input { margin-left: 6px; background: var(--bg-inset); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-sm, 6px); padding: 3px 6px; }

/* ---- §3 Column compare ---- */
.bs-mem-cmp { padding: var(--space-3, 12px) var(--space-5, 20px) var(--space-5, 20px); }
.bs-mem-cmp-legend { display: flex; gap: var(--space-4, 16px); justify-content: center; font-size: 12px; color: var(--text-secondary); margin-bottom: var(--space-3, 12px); }
.bs-mem-cmp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.bs-mem-cmp-row { display: grid; grid-template-columns: 130px 1fr 64px; align-items: center; gap: var(--space-3, 12px); padding: var(--space-2, 8px) 0; border-bottom: 1px solid var(--border-subtle); }
.bs-mem-cmp-row:last-child { border-bottom: none; }
.bs-mem-cmp-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.bs-mem-cmp-bars { display: flex; flex-direction: column; gap: 4px; }
.bs-mem-cmp-bar { position: relative; display: flex; align-items: center; gap: 8px; height: 18px; }
.bs-mem-cmp-fill { height: 12px; border-radius: 3px; min-width: 2px; transition: width .25s ease; }
.bs-mem-cmp-fill--cur { background: #2563EB; }
.bs-mem-cmp-fill--prev { background: #F59E0B; }
.bs-mem-cmp-v { font: 12px var(--font-mono, monospace); font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.bs-mem-cmp-delta { text-align: right; font: 600 12px var(--font-mono, monospace); font-variant-numeric: tabular-nums; color: var(--text-tertiary); }
.bs-mem-delta--up { color: #16A34A; }
.bs-mem-delta--down { color: #DC2626; }

/* ---- §4 Composition ---- */
.bs-mem-comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5, 20px); padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-5, 20px); align-items: start; }
@media (max-width: 1023px) { .bs-mem-comp-grid { grid-template-columns: 1fr; } }
.bs-mem-comp-col { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.bs-mem-sub { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; text-align: center; }

/* ---- matrix tables (age×tier + member-vs-nonmember summary) ---- */
.bs-mem-matrix-wrap { border: 1px solid var(--border-default); border-radius: var(--radius-md, 10px); overflow: hidden; }
.bs-mem-matrix { width: 100%; border-collapse: collapse; font-size: 12px; }
.bs-mem-matrix thead th { background: var(--bg-inset); color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; padding: 8px 12px; text-align: center; border-bottom: 1px solid var(--border-default); }
.bs-mem-matrix thead th:first-child, .bs-mem-matrix tbody td:first-child { text-align: left; }
.bs-mem-matrix tbody td { padding: 7px 12px; text-align: right; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); font-variant-numeric: tabular-nums; font-family: var(--font-mono, monospace); }
.bs-mem-matrix tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text-primary) 3.5%, transparent); }
.bs-mem-matrix tbody tr:hover td { background: var(--bg-hover); }
.bs-mem-matrix tbody td:first-child { font-family: var(--font-sans, sans-serif); color: var(--text-secondary); font-weight: 500; }

/* ---- §5 Tier bar charts (4 mini-charts) ---- */
.bs-mem-tierbars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5, 20px); padding: var(--space-4, 16px) var(--space-5, 20px) 0; }
.bs-mem-tierbar { display: flex; flex-direction: column; gap: 6px; }
.bs-mem-tierbar-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.bs-mem-tierbar-row { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 8px; height: 22px; }
.bs-mem-tierbar-lbl { font-size: 11px; color: var(--text-tertiary); }
.bs-mem-tierbar-track { height: 12px; border-radius: 3px; background: var(--bg-inset); overflow: hidden; }
.bs-mem-tierbar-fill { height: 100%; border-radius: 3px; transition: width .25s ease; min-width: 2px; }
.bs-mem-tierbar-v { font: 11px var(--font-mono, monospace); font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }

.bs-mem-count { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* NEW-BUILD #33 (G2) — §6 birthday-this-month highlight (token-driven, both themes) */
.bs-mem-meta { display: inline-flex; align-items: center; gap: var(--space-4, 16px); }
.bs-mem-bday-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
.bs-mem-bday-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--color-action-ghost, color-mix(in srgb, var(--color-action) 14%, transparent)); border: 1px solid var(--color-action-muted, color-mix(in srgb, var(--color-action) 35%, transparent)); }
.bs-mem-bday-cell--hit { background: var(--color-action-ghost, color-mix(in srgb, var(--color-action) 14%, transparent)); color: var(--color-action); font-weight: 700; padding: 1px 7px; border-radius: var(--radius-full, 999px); }

@media (max-width: 560px) {
  .bs-mem-cmp-row { grid-template-columns: 90px 1fr 48px; }
}