/* ============================================================
   Brand & Store — Shopper Insight · Basket & Price section
   bs-shopper-insight-basket.css  (FE-035 slice 3)
   Namespaced: .bs-si-basketprice, .bs-si-bp-*
   Tokens only — cohort colors via var(--bs-cohort-new / --bs-cohort-ret),
   defined once on .bs-si-page (bs-shopper-insight.css):
     New  = cyan   (--bs-cohort-new)
     Ret  = orange (--bs-cohort-ret)
   .card / .card__header / .card-title-sep / .bs-si-state
   are inherited from shared CSS.
   ============================================================ */

/* ---- root wrapper ---- */
.bs-si-basketprice {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
}

/* ================================================================
   Order-Price Composition + Basket Size side-by-side on one row
   (feedback 2026-06-04: two charts, one line); stacks below 1024px.
================================================================ */
.bs-si-bp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5, 20px);
  align-items: start;
}
@media (max-width: 1023px) {
  .bs-si-bp-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Legend — top-center, shared style across all three panels
================================================================ */
.bs-si-bp-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-5, 20px) 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.bs-si-bp-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.bs-si-bp-swatch--new { background: var(--bs-cohort-new); }
.bs-si-bp-swatch--ret { background: var(--bs-cohort-ret); }

.bs-si-bp-legend-lbl {
  color: var(--text-secondary);
}

/* ================================================================
   Basket-size AREA chart (Panel 2 — PBIX areaChart; New/Returning
   over basket sizes 1..15+). SVG scales responsively; strokes stay
   crisp via vector-effect on the line paths.
================================================================ */
.bs-si-bp-area-wrap { padding: var(--space-3, 12px) var(--space-5, 20px) var(--space-4, 16px); }
.bs-si-bp-area { width: 100%; height: auto; display: block; overflow: visible; }
.bs-si-bp-axis { stroke: var(--border-default, rgba(148, 163, 184, 0.20)); stroke-width: 1; }
.bs-si-bp-area-fill--new { fill: var(--bs-cohort-new); opacity: 0.16; }
.bs-si-bp-area-fill--ret { fill: var(--bs-cohort-ret); opacity: 0.16; }
.bs-si-bp-area-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.bs-si-bp-area-line--new { stroke: var(--bs-cohort-new); }
.bs-si-bp-area-line--ret { stroke: var(--bs-cohort-ret); }
.bs-si-bp-dot { cursor: help; }
.bs-si-bp-dot--new { fill: var(--bs-cohort-new); }
.bs-si-bp-dot--ret { fill: var(--bs-cohort-ret); }
.bs-si-bp-xlbl,
.bs-si-bp-ymax { fill: var(--text-tertiary); font-size: 12px; font-family: var(--font-mono, 'Geist Mono', monospace); }

/* On-chart peak (mode) value labels — surface-colored halo so they stay legible
   over the translucent area fills, in both themes. */
.bs-si-bp-peak {
  font-size: 11px; font-weight: 700;
  font-family: var(--font-mono, 'Geist Mono', monospace);
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--bg-surface); stroke-width: 3px; stroke-linejoin: round;
}
.bs-si-bp-peak--new { fill: var(--bs-cohort-new); }
.bs-si-bp-peak--ret { fill: var(--bs-cohort-ret); }

/* ================================================================
   Category list — wraps all paired-bar blocks
================================================================ */
.bs-si-bp-list {
  padding: var(--space-3, 12px) var(--space-5, 20px) var(--space-4, 16px);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Compact variant for basket size (15 rows — tighter row height) */
.bs-si-bp-list--compact .bs-si-bp-block {
  padding: var(--space-1, 4px) 0;
}

.bs-si-bp-list--compact .bs-si-bp-row {
  height: 16px;
}

.bs-si-bp-list--compact .bs-si-bp-track {
  height: 10px;
}

/* ================================================================
   Per-category block
   Layout: [category label 80px] [bars 1fr]
================================================================ */
.bs-si-bp-block {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) 0;
  border-bottom: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.12));
}
.bs-si-bp-block:last-child {
  border-bottom: none;
}

/* Category label */
.bs-si-bp-cat {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Bars column: stacks New row then Returning row */
.bs-si-bp-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ================================================================
   Each bar row: [track flex-1] [value auto]
================================================================ */
.bs-si-bp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2, 8px);
  height: 20px;
}

.bs-si-bp-track {
  position: relative;
  height: 12px;
  border-radius: 3px;
  background: var(--bg-inset, rgba(148, 163, 184, 0.08));
  overflow: hidden;
}

.bs-si-bp-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 3px;
  transition: width 0.25s ease;
}
.bs-si-bp-fill--new { background: var(--bs-cohort-new); }
.bs-si-bp-fill--ret { background: var(--bs-cohort-ret); }

/* Value label */
.bs-si-bp-val {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, 'Geist Mono', monospace);
  font-style: normal;
  color: var(--text-primary);
  text-align: right;
  white-space: nowrap;
  min-width: 72px;
}

/* ================================================================
   Responsive: 390px mobile
================================================================ */
@media (max-width: 560px) {
  .bs-si-bp-block {
    grid-template-columns: 64px 1fr;
    gap: var(--space-2, 8px);
  }

  .bs-si-bp-cat {
    font-size: 11px;
  }

  .bs-si-bp-val {
    min-width: 52px;
    font-size: 11px;
  }

  .bs-si-bp-list--compact .bs-si-bp-block {
    padding: 2px 0;
  }
}