/* ni-charts.css — Visualisation styles for Nonprofit Intelligence
 * Works with ni-charts.js and ni-shell.css
 */

/* ── Chart containers ─────────────────────────────────────────────────────── */
.ni-chart-wrap {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.ni-chart-wrap canvas { max-height: 340px; width: 100% !important; }
.ni-chart-title {
  font-size: .82rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 2px;
}
.ni-chart-question {
  font-size: .75rem; color: var(--text-tertiary);
  margin-bottom: 14px; font-style: italic; line-height: 1.5;
}
.ni-chart-footer {
  font-size: .7rem; color: var(--text-tertiary);
  margin-top: 10px; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 6px;
}
.ni-chart-footer a { color: rgba(82,183,136,.8); text-decoration: none; }
.ni-chart-footer a:hover { text-decoration: underline; }

/* ── Metric / control bar ─────────────────────────────────────────────────── */
.ni-metric-bar {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}
.ni-metric-btn {
  font-size: .75rem; padding: 5px 13px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.ni-metric-btn.active,
.ni-metric-btn:hover {
  background: rgba(82,183,136,.09);
  border-color: rgba(82,183,136,.35);
  color: var(--domain-nonprofits-500, #52b788);
}

.ni-year-select, .ni-cause-select {
  font-size: .78rem; padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-subtle);
  color: var(--text-secondary); cursor: pointer;
}

/* ── AU State Map ─────────────────────────────────────────────────────────── */
.ni-au-map-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  margin-bottom: 16px;
}
.ni-map-header {
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.ni-map-header-title { font-size: .82rem; font-weight: 700; color: var(--text-primary); }
.ni-map-header-question { font-size: .72rem; color: var(--text-tertiary); font-style: italic; }
.ni-map-body { padding: 16px 20px 8px; }
.ni-map-svg { width: 100%; max-width: 640px; margin: 0 auto; display: block; }
.ni-map-svg .state-path {
  stroke: var(--bg, #0d1117); stroke-width: 2;
  transition: opacity .15s, filter .15s;
  cursor: pointer;
}
.ni-map-svg .state-path:hover { opacity: .82; filter: brightness(1.18); }
.ni-map-svg .state-path:focus { outline: 2px solid #52b788; outline-offset: 2px; }
.ni-map-svg .state-label {
  font-size: 11px; font-weight: 700; fill: rgba(255,255,255,.8);
  pointer-events: none; text-anchor: middle; dominant-baseline: middle;
}
.ni-map-svg .state-abbr {
  font-size: 9px; fill: rgba(255,255,255,.55);
  pointer-events: none; text-anchor: middle; dominant-baseline: middle;
}
.ni-map-footer {
  padding: 10px 20px 14px;
  display: flex; justify-content: space-between;
  align-items: flex-start; flex-wrap: wrap; gap: 10px;
}
.ni-map-source { font-size: .7rem; color: var(--text-tertiary); line-height: 1.6; }

/* Map tooltip */
.ni-map-tooltip {
  position: absolute; z-index: 20;
  background: var(--bg-surface, #13202c);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; font-size: .78rem;
  color: var(--text-secondary); pointer-events: none;
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
  min-width: 170px; display: none; max-width: 220px;
  transition: opacity .12s;
}
.ni-map-tooltip.visible { display: block; }
.ni-map-tooltip-name {
  font-size: .88rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 6px;
}
.ni-map-tooltip-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 2px 0;
}
.ni-map-tooltip-val { font-weight: 600; color: var(--domain-nonprofits-500, #52b788); }

/* Legend */
.ni-legend {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.ni-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: .7rem; color: var(--text-tertiary);
}
.ni-legend-swatch {
  width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
}
.ni-legend-label { white-space: nowrap; }

/* ── Scatter quadrant labels ──────────────────────────────────────────────── */
.ni-scatter-note {
  font-size: .72rem; color: var(--text-tertiary);
  font-style: italic; margin-top: 8px; line-height: 1.5;
}

/* ── Observation cards ────────────────────────────────────────────────────── */
.ni-obs-grid { display: grid; gap: 12px; }
.ni-obs-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px;
}
.ni-obs-tag {
  display: inline-block; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; border-radius: 6px;
  padding: 2px 9px; margin-bottom: 10px;
}
/* Text colors on these tags were bumped for WCAG AA (axe flagged
   concentration at 3.79:1 and capacity-gap at 3.11:1 against the tag's own
   background, both below the 4.5:1 required for bold text under 14pt). */
.ni-obs-tag.rapid-change    { background: rgba(243,156,18,.12);  color: #e6a817; }
.ni-obs-tag.concentration   { background: rgba(231,76,60,.12);   color: #f47a6a; }
.ni-obs-tag.capacity-gap    { background: rgba(155,89,182,.12);  color: #c9a4dc; }
.ni-obs-tag.workforce       { background: rgba(52,183,136,.12);  color: #52b788; }
.ni-obs-tag.funding         { background: rgba(59,130,246,.12);  color: #60a5fa; }
.ni-obs-statement {
  font-size: .885rem; color: var(--text-primary);
  line-height: 1.7; margin-bottom: 10px;
}
.ni-obs-evidence {
  font-size: .73rem; color: var(--text-tertiary);
  border-top: 1px solid var(--border); padding-top: 9px;
  line-height: 1.6;
}
.ni-obs-evidence a { color: rgba(96,165,250,.8); text-decoration: none; }
.ni-obs-evidence a:hover { text-decoration: underline; }

/* ── Stat grid ────────────────────────────────────────────────────────────── */
.ni-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 12px;
}

/* ── Section anchors for sticky sidebar ──────────────────────────────────── */
.ni-section-anchor { scroll-margin-top: 80px; }

/* ── Sidebar TOC (optional, used on au/index) ────────────────────────────── */
.ni-page-with-toc {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 860px) {
  .ni-page-with-toc { grid-template-columns: 1fr; }
  .ni-toc-sidebar { display: none; }
}
.ni-toc-sidebar {
  position: sticky; top: 90px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.ni-toc-sidebar h4 {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-tertiary); margin-bottom: 10px;
}
.ni-toc-sidebar a {
  display: block; font-size: .78rem; color: var(--text-secondary);
  padding: 5px 0; text-decoration: none; border-left: 2px solid transparent;
  padding-left: 8px; margin-left: -8px; transition: all .12s;
}
.ni-toc-sidebar a:hover,
.ni-toc-sidebar a.active {
  color: var(--domain-nonprofits-500, #52b788);
  border-left-color: var(--domain-nonprofits-500, #52b788);
}