/* NEM map — real subregion/transmission/generator data on a light Leaflet
   basemap, plus a legend explaining the dots (fuel type) and line
   (transmission). Rendered by js/domain/nem-map.js. Used on the platform
   home page (dashboard.css) and the marketing home page (home_concept.css) —
   each page wraps .nem-map-card in its own layout; this file only owns the
   card's own internals. */
.nem-map-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 24rem;
  overflow: hidden;
}
.nem-map {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #eef1ec;
}

/* Optional top pane (map_info_title param) — same card-internal pane
   treatment as the legend below, just at the top with a bottom hairline
   instead of a top one. */
.nem-map-info {
  flex: 0 0 auto;
  padding: 0.875rem 1rem 0.75rem;
  background: #fff;
  border-bottom: 1px solid rgba(4, 43, 29, 0.08);
}
/* This is the first thing a signed-in user reads on the page, so it's a
   real title, not a routine eyebrow label — sized and weighted up from
   the plain h6 default. text-transform:none overrides branding.css's bare
   "h6, .h6 { text-transform: uppercase }": a class alone outranks that
   element selector on specificity for the properties it sets, but
   text-transform wasn't one of them, so the global rule was still winning
   and shouting the title in caps. */
.nem-map-info-title {
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--varial-gray-900, #131210);
  margin-bottom: 0.35rem;
}
/* Optional subtitle (map_info_subtitle param) — a normal-case lead-in
   sentence under the title, not a second heading: smaller and lighter
   than the title, but still darker than the plain explainer paragraphs
   below it. */
.nem-map-info .nem-map-info-subtitle {
  display: block;
  list-style: none;
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--varial-gray-700, #38352F);
}
/* Explainer paragraphs (nem_explainer.html) as a bullet list rather than a
   solid block of text — display:list-item works directly on the shared
   include's plain <p> tags without needing a real <ul>, and stays scoped
   to this pane (the marketing home page reuses the same include's text in
   its own container with its own styling, untouched by this). */
.nem-map-info p {
  display: list-item;
  list-style-type: disc;
  list-style-position: outside;
  margin: 0 0 0.3rem 1.1rem;
  padding-left: 0.15rem;
  font-size: 0.8125rem;
  color: var(--varial-gray-500, #6B6763);
  line-height: 1.5;
}
.nem-map-info p:last-child {
  margin-bottom: 0;
}
.nem-map-info p::marker {
  color: var(--varial-gray-300, #CCC9C3);
}

/* Optional closing line (map_info_closing param) — bridges the explainer to
   whatever sits beside the map (the dashboard's product cards): bolder and
   darker than the plain explainer paragraphs above, with an accent-coloured
   arrow nudging the reader rightward. Two classes to outweigh the plain
   ".nem-map-info p" rule above on specificity. */
.nem-map-info .nem-map-info-closing {
  display: block;
  list-style: none;
  margin: 0.5rem 0 0;
  font-weight: 600;
  color: var(--varial-gray-900, #131210);
}
.nem-map-info-closing-arrow {
  color: var(--varial-primary, #2563EB);
  font-weight: 700;
}

/* Colours are literal, matching FUEL_COLORS in js/domain/nem-map.js (not CSS
   custom properties, so keep the two in sync). */
.nem-map-legend {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.5rem 0.875rem;
  background: #fff;
  border-top: 1px solid rgba(4, 43, 29, 0.08);
  font-size: 0.75rem;
  color: var(--varial-gray-600, #4D4A46);
}
.nem-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.nem-map-legend-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.nem-map-legend-dot--coal { background: #6b7280; }
.nem-map-legend-dot--gas { background: #dc2626; }
.nem-map-legend-dot--solar { background: #f59e0b; }
.nem-map-legend-dot--wind { background: #10b981; }
.nem-map-legend-dot--hydro { background: #3b82f6; }
.nem-map-legend-dot--battery { background: #8b5cf6; }
.nem-map-legend-line {
  width: 0.875rem;
  height: 0;
  border-top: 2px solid #000000;
  flex-shrink: 0;
}

/* Light basemap — zoom control + attribution sit on light tiles. Leaflet's
   own stylesheet sets .leaflet-container to Helvetica Neue/Arial and the
   zoom buttons to a monospace font (leaflet.css) — neither matches the
   app's Inter everywhere else, which is what read as inconsistent. */
.nem-map.leaflet-container {
  font-family: var(--varial-font-family, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
.nem-map .leaflet-bar { border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.nem-map .leaflet-control-zoom a {
  background: rgba(255, 255, 255, 0.9); color: var(--varial-gray-700, #38352F);
  border-color: rgba(0, 0, 0, 0.08);
  font-family: var(--varial-font-family, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
.nem-map .leaflet-control-zoom a:hover { background: #fff; color: var(--varial-gray-900, #131210); }
.nem-map .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.7); color: var(--varial-gray-500, #6B6763);
  font-size: 0.625rem;
}
.nem-map .leaflet-control-attribution a { color: var(--varial-gray-600, #4D4A46); }
.leaflet-tooltip.nem-map-hover {
  background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--varial-gray-900, #131210); font-size: 0.6875rem; font-weight: 500;
  padding: 2px 7px; border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}