/* ──────────────────────────────────────────────────────────────────
   StartBrazil Dashboard — design tokens (brand-governed)
   Brand green #33B713 · light #D4FFD4 · ink #141414 · rule #E4E4E4
   Headings = Clash Display · body/UI = Manrope
   ────────────────────────────────────────────────────────────────── */
:root {
  --sb-bg:            #FBFBF8;   /* warm paper */
  --sb-surface:       #FFFFFF;
  --sb-sunken:        #F2F5EE;   /* green-tinted inset */
  --sb-ink:           #141414;
  --sb-ink-2:         #2A2E29;
  --sb-border:        #E4E4E4;   /* brand rule */
  --sb-border-strong: #141414;
  --sb-muted:         #6B6F6A;

  --sb-green:         #33B713;   /* brand green — primary */
  --sb-green-dk:      #1F6B0C;
  --sb-green-dk2:     #2A8F12;
  --sb-green-lt:      #8FE06F;
  --sb-green-lt2:     #BDEEAB;
  --sb-light:         #D4FFD4;   /* light green wash */

  /* Categorical data palette — distinct hues so charts read by category at a glance
     (mirrors the published report's blue / gold / green family). Brand green leads;
     no alarming reds. Single-series bars stay brand green; multi-category charts cycle. */
  --viz-1: #33B713;   /* brand green */
  --viz-2: #2F7DC9;   /* blue        */
  --viz-3: #E2A516;   /* gold        */
  --viz-4: #1F8F7A;   /* teal        */
  --viz-5: #7E5AA8;   /* plum        */
  --viz-6: #4A5A6A;   /* slate       */
  --viz-7: #8FE06F;   /* light green */
  --viz-8: #C77D3A;   /* amber-brown */
  --viz-line: #33B713;
  --viz-track: #EAEAE6;

  --pos-bg: #D4FFD4; --pos-ink: #1F6B0C;
  --neg-bg: #F6E6DC; --neg-ink: #A05A1E;
  --flat-bg: #F2F5EE; --flat-ink: #6B6F6A;

  --sb-display: 'Clash Display', 'Manrope', -apple-system, sans-serif;
  --sb-sans:    'Manrope', -apple-system, 'Segoe UI', sans-serif;

  --sb-r-card: 14px;
  --sb-r-chip: 999px;
  --sb-r-panel: 22px;
  --sb-shadow: 0 1px 2px rgba(20,20,20,0.04), 0 8px 24px rgba(20,20,20,0.04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--sb-ink); color: var(--sb-ink); font-family: var(--sb-sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--sb-green); color: #fff; }
a { color: inherit; text-decoration: none; }

.eyebrow {
  font-family: var(--sb-sans); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-muted);
}
.eyebrow.green { color: var(--sb-green-dk2); }

.card {
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-r-card);
}

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sb-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.03em; padding: 3px 10px; border-radius: var(--sb-r-chip);
}
.chip.pos { background: var(--pos-bg); color: var(--pos-ink); }
.chip.neg { background: var(--neg-bg); color: var(--neg-ink); }
.chip.flat { background: var(--flat-bg); color: var(--flat-ink); }
.chip.src { background: var(--sb-sunken); color: var(--sb-ink); letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--sb-border); border-radius: 6px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  font-family: var(--sb-sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--sb-green); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* scrollbar polish for the dark rail */
aside::-webkit-scrollbar { width: 8px; }
aside::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }

/* map: two columns on desktop, stacked on mobile */
.sb-map-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: center; }
@media (max-width: 860px) {
  .sb-map-split { grid-template-columns: 1fr; gap: 14px; }
}