/* ============================================================
   Brand & Store — Affiliate v2 · "Other" tab scope (BsAffV2OtherTab)
   Design tokens only — no hardcoded colors. Numerics tabular-nums.
   ============================================================ */

.aff-other-tab { display: flex; flex-direction: column; gap: var(--space-4); }

/* Header */
.aff-other-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-default);
}
.aff-other-titlegroup { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.aff-other-badge {
  display: inline-flex; align-items: center;
  background: var(--color-brand); color: var(--bg-surface);
  font: 700 11px var(--font-mono, monospace);
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-sm);
}
.aff-other-title {
  font-family: var(--font-display); font-size: var(--font-h3, 1rem);
  font-weight: 700; color: var(--text-primary); margin: 0;
}
.aff-other-sub { font-size: var(--font-small, 0.75rem); color: var(--text-tertiary); }

/* Sections / cards */
.aff-other-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.aff-other-cardhead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3);
}
.aff-other-cardtitle {
  font-family: var(--font-display); font-size: var(--font-h3, 1rem);
  font-weight: 600; color: var(--text-primary);
}
.aff-other-cardsub {
  font-size: var(--font-small, 0.75rem); color: var(--text-secondary); margin-top: 2px;
}

/* KPI chips */
.aff-other-kpis { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.aff-other-kpi { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.aff-other-kpi .k-lbl {
  font-size: var(--font-xs, 0.6875rem); color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.aff-other-kpi .k-val {
  font-family: var(--font-mono, monospace); font-weight: 600;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}

/* Chart */
.aff-other-chartwrap { width: 100%; overflow: hidden; }
.aff-other-svg { display: block; width: 100%; overflow: visible; }
.aff-other-bar { fill: var(--color-action); opacity: 0.85; }
.aff-other-bar:hover { opacity: 1; }
.aff-other-barval {
  fill: var(--text-secondary); font-family: var(--font-mono, monospace);
  font-size: 10.5px; font-variant-numeric: tabular-nums;
}
.aff-other-barlbl {
  fill: var(--text-tertiary); font-family: var(--font-sans, sans-serif); font-size: 11px;
}
.aff-other-empty {
  padding: var(--space-6); text-align: center; color: var(--text-tertiary);
  font-size: var(--font-small, 0.75rem);
}

/* Error */
.aff-other-error {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  color: var(--color-danger); font-size: var(--font-small, 0.75rem);
}

/* Honest gated shell */
.aff-other-gate {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-5); text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg-inset);
}
.aff-other-gate-icon { font-size: 26px; color: var(--text-tertiary); }
.aff-other-gate-title {
  font-family: var(--font-display); font-weight: 600; color: var(--text-secondary);
}
.aff-other-gate-body {
  max-width: 640px; margin: 0; color: var(--text-tertiary);
  font-size: var(--font-small, 0.75rem); line-height: 1.5;
}
.aff-other-gate-body strong { color: var(--text-secondary); }