/*
 * Styling for the visx charts on the promo pages. Colours come from Mantine
 * tokens so the charts follow the console theme and the light/dark scheme —
 * this is what Bklit does with its --chart-* variables, mapped onto Mantine.
 */

.chartWrap {
  position: relative;
  width: 100%;
  /* Land with no signups, and the country outlines. Named here so the map picks
     up the light/dark scheme without computing colours in JS. */
  --map-empty: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
  --map-stroke: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4));
  /* Sankey country nodes stay neutral — the ribbons carry the campaign colour,
     so tinting both ends would imply a country "has" a colour of its own. */
  --flow-node: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
}

/* ---------------------------------------------------------- Stacked bars */

.barGrid {
  stroke: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.barBaseline {
  stroke: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.barAxisLabel {
  font-size: 11px;
  fill: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
}

.barTotal {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  fill: light-dark(var(--mantine-color-dark-7), var(--mantine-color-gray-1));
}

/* Series legend below the chart group. */
.legendPill {
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
  border: 1px solid
    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  box-shadow: 0 1px 2px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.3));
}

.legendPillDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.14));
}

/* Vertical marker on the hovered country in the line chart. */
.lineCrosshair {
  stroke: var(--promo-accent, var(--mantine-color-indigo-6));
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.55;
}

/* Graticule + ocean backdrop on the map. */
.mapGraticule {
  fill: none;
  stroke: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  stroke-width: 0.4;
  opacity: 0.7;
}

.mapSphere {
  fill: light-dark(var(--mantine-color-blue-0), rgba(255, 255, 255, 0.03));
  stroke: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  stroke-width: 0.6;
}

/* Separates stacked campaigns without a hard dark line. */
.barDivider {
  stroke: light-dark(rgba(255, 255, 255, 0.55), rgba(0, 0, 0, 0.35));
  stroke-width: 1;
}

.tooltipTotal {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid
    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  font-weight: 700;
}

/* -------------------------------------------------------------- Treemap */

/* Country frame behind each group of campaign cells. */
.treemapGroup {
  fill: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
}

.treemapCountry {
  font-size: 11px;
  fill: light-dark(var(--mantine-color-dark-6), var(--mantine-color-gray-2));
}

/* Sits on a saturated cell, so it needs its own contrast rather than a token. */
.treemapValue {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(15, 23, 42, 0.32);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------- Map zoom */

.zoomControls {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Grab cursor while panning the map. */
.mapSurface {
  cursor: grab;
  touch-action: none;
}

.mapSurfaceDragging {
  cursor: grabbing;
}

/* Sequential ramp swatch under the map. */
.mapLegend {
  width: 96px;
  height: 8px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px light-dark(rgba(15, 23, 42, 0.12), rgba(255, 255, 255, 0.16));
}

/* Centre readout of the donut, layered over the SVG hole. */
.donutCenter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.donutValue {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: light-dark(var(--mantine-color-dark-7), var(--mantine-color-gray-0));
}


/* Cursor-following tooltip. Matches the panels already used on these pages. */
.tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  white-space: nowrap;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: var(--mantine-radius-md);
  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  box-shadow: 0 8px 20px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.5));
  color: light-dark(var(--mantine-color-dark-7), var(--mantine-color-gray-1));
}

.tooltipTitle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  margin-bottom: 3px;
}

.tooltipSwatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}