.geohubengine-geostory {
  --kgs-bg: #07152f;
  --kgs-bg-2: #0c1d42;
  --kgs-panel: rgba(9, 20, 46, 0.82);
  --kgs-line: rgba(255, 255, 255, 0.12);
  --kgs-text: #f5f8ff;
  --kgs-muted: rgba(245, 248, 255, 0.74);
  --kgs-accent: #1bc9a4;
  --kgs-accent-2: #1e90ff;
  --kgs-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  color: var(--kgs-text);
  background:
    radial-gradient(circle at top left, rgba(27, 201, 164, 0.18), transparent 28%),
    radial-gradient(circle at top right, rgba(30, 144, 255, 0.16), transparent 26%),
    linear-gradient(180deg, var(--kgs-bg-2), var(--kgs-bg));
  border: 1px solid var(--kgs-line);
  border-radius: 28px;
  padding: clamp(18px, 3vw, 30px);
  box-shadow: var(--kgs-shadow);
  overflow: hidden;
}

.kgs-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.kgs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--kgs-accent);
  margin-bottom: 10px;
}

.kgs-title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  line-height: 1.05;
}

.kgs-subtitle {
  margin: 12px 0 0;
  color: var(--kgs-muted);
  max-width: 62ch;
  font-size: 1.02rem;
}

.kgs-head-badge {
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--kgs-line);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  backdrop-filter: blur(10px);
}

.kgs-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.kgs-search input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--kgs-line);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
  font-size: 1rem;
}

.kgs-search input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.kgs-search input:focus {
  border-color: rgba(27, 201, 164, 0.8);
  box-shadow: 0 0 0 4px rgba(27, 201, 164, 0.12);
}

.kgs-search button,
.kgs-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--kgs-accent), var(--kgs-accent-2));
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 12px 26px rgba(30, 144, 255, 0.22);
}

.kgs-search button:hover,
.kgs-cta:hover {
  transform: translateY(-1px);
  color: #fff;
  box-shadow: 0 16px 32px rgba(30, 144, 255, 0.28);
}

.kgs-search.is-loading button {
  opacity: 0.7;
  pointer-events: none;
}

.kgs-compare-wrap {
  position: relative;
  width: 100%;
}

.kgs-compare {
  position: relative;
  width: 100%;
  height: var(--kgs-height, 520px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--kgs-line);
  background: rgba(255, 255, 255, 0.03);
}

.kgs-pane {
  position: absolute;
  inset: 0;
}

.kgs-pane-street {
  background: #0b1d3c;
}

.kgs-pane-satellite {
  width: var(--kgs-split, 50%);
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,0.14);
}

.kgs-map {
  position: absolute;
  inset: 0;
}

.kgs-pane-label {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 500;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(4, 11, 28, 0.65);
  color: #fff;
  font-size: 0.86rem;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}

.kgs-split-slider {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 600;
  width: calc(100% - 36px);
  appearance: none;
  height: 0;
  background: transparent;
  pointer-events: auto;
}

.kgs-split-slider::-webkit-slider-thumb {
  appearance: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(135deg, var(--kgs-accent), var(--kgs-accent-2));
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
  cursor: ew-resize;
  margin-top: -17px;
}

.kgs-split-slider::-moz-range-thumb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(135deg, var(--kgs-accent), var(--kgs-accent-2));
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
  cursor: ew-resize;
}

.kgs-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--kgs-split, 50%);
  width: 2px;
  transform: translateX(-1px);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 0 18px rgba(255,255,255,0.35);
  z-index: 550;
  pointer-events: none;
}

.kgs-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kgs-accent), var(--kgs-accent-2));
  border: 3px solid #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.kgs-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.kgs-stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--kgs-line);
  border-radius: 18px;
  padding: 14px 16px;
}

.kgs-stat-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}

.kgs-stat-value {
  display: block;
  color: #fff;
  font-size: 0.98rem;
  line-height: 1.4;
}

.kgs-story {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.kgs-story-main,
.kgs-bullets {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--kgs-line);
  border-radius: 18px;
}

.kgs-story-main {
  padding: 16px;
  color: var(--kgs-muted);
  line-height: 1.6;
}

.kgs-bullets {
  margin: 0;
  padding: 16px 20px 16px 34px;
  list-style: disc;
  color: #fff;
}

.kgs-bullets li + li {
  margin-top: 8px;
}

.kgs-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 18px;
}

.kgs-hint {
  color: rgba(255,255,255,0.72);
  font-size: 0.92rem;
}

.kgs-pane .leaflet-container {
  background: #0a1830;
}

.kgs-marker-icon {
  background: transparent;
  border: 0;
}

.kgs-marker-icon span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ff3b4a;
  border: 3px solid #fff;
  box-shadow: 0 0 0 10px rgba(255,59,74,0.18), 0 0 26px rgba(255,59,74,0.4);
}

@media (max-width: 980px) {
  .kgs-head,
  .kgs-story {
    grid-template-columns: 1fr;
    display: grid;
  }

  .kgs-head-badge {
    justify-self: start;
  }

  .kgs-insights {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .kgs-search {
    grid-template-columns: 1fr;
  }

  .kgs-compare {
    height: 380px;
  }

  .kgs-pane-label {
    left: 12px;
    bottom: 12px;
  }

  .kgs-split-slider {
    left: 12px;
    right: 12px;
    width: calc(100% - 24px);
    bottom: 12px;
  }
}

/* ── Nigeria / West Africa regional context flags ────────────── */
.kgs-region-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(27, 201, 164, 0.06);
  border: 1px solid rgba(27, 201, 164, 0.22);
  border-radius: 16px;
  animation: kgs-flags-in 0.4s ease both;
}

@keyframes kgs-flags-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.kgs-flag-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Flood risk — amber */
.kgs-flag--flood {
  background: rgba(255, 180, 0, 0.15);
  border-color: rgba(255, 180, 0, 0.4);
  color: #ffd666;
}

/* Agricultural belt — green */
.kgs-flag--agric {
  background: rgba(80, 200, 80, 0.12);
  border-color: rgba(80, 200, 80, 0.35);
  color: #7de07d;
}

/* Sahel / desertification — sand */
.kgs-flag--sahel {
  background: rgba(220, 165, 80, 0.13);
  border-color: rgba(220, 165, 80, 0.35);
  color: #e8c07a;
}

/* Niger Delta — teal/blue */
.kgs-flag--delta {
  background: rgba(27, 201, 164, 0.12);
  border-color: rgba(27, 201, 164, 0.35);
  color: #1bc9a4;
}

/* River — blue */
.kgs-flag--river {
  background: rgba(30, 144, 255, 0.12);
  border-color: rgba(30, 144, 255, 0.35);
  color: #69b4ff;
}

/* Urban / FCT — purple-blue */
.kgs-flag--urban {
  background: rgba(130, 100, 255, 0.12);
  border-color: rgba(130, 100, 255, 0.35);
  color: #b09cff;
}

/* West Africa (non-Nigeria) — warm orange */
.kgs-flag--westafrica {
  background: rgba(255, 120, 40, 0.12);
  border-color: rgba(255, 120, 40, 0.32);
  color: #ffaa70;
}

@media (max-width: 640px) {
  .kgs-region-flags {
    gap: 6px;
    padding: 10px 12px;
  }
  .kgs-flag-badge {
    font-size: 0.72rem;
    padding: 4px 10px;
  }
}

/* ── Leaflet attribution — restyled for license compliance ───────
   OSM (ODbL) and Esri tile licenses require attribution to remain
   in the DOM and visible. We restyle it to fit the dark card UI
   rather than showing the default white box.                      */
.geohubengine-geostory .leaflet-control-attribution {
  background: rgba(4, 11, 28, 0.55) !important;
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.38) !important;
  font-size: 0.62rem !important;
  padding: 2px 6px !important;
  border-radius: 4px 0 0 0 !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.geohubengine-geostory .leaflet-control-attribution a {
  color: rgba(255, 255, 255, 0.45) !important;
}

.geohubengine-geostory .leaflet-control-attribution a:hover {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Hide the Leaflet logo SVG prefix — the text credit is sufficient */
.geohubengine-geostory .leaflet-control-attribution svg {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER INTELLIGENCE PANEL
   Ten analysis layers rendered as a card grid below the story.
   Each card: layer name + icon, value (colour-coded), detail,
   confidence pill, satellite sensor, and service action hook.
   ═══════════════════════════════════════════════════════════════════ */

.kgs-layers {
  margin-top: 18px;
  border: 1px solid var(--kgs-line);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.025);
  animation: kgs-flags-in 0.4s ease both;
}

.kgs-layers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--kgs-line);
  background: rgba(255, 255, 255, 0.03);
}

.kgs-layers-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--kgs-accent);
}

.kgs-layers-sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.42);
  font-style: italic;
}

/* ── Grid ─────────────────────────────────────────────────────── */

.kgs-layers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

/* ── Individual layer card ───────────────────────────────────── */

.kgs-layer-card {
  padding: 14px 16px 13px;
  border-right: 1px solid var(--kgs-line);
  border-bottom: 1px solid var(--kgs-line);
  transition: background 0.18s ease;
  position: relative;
  overflow: hidden;
}

/* Remove right border on every second card (right column) */
.kgs-layer-card:nth-child(2n) {
  border-right: none;
}

/* Remove bottom border on last two cards */
.kgs-layer-card:nth-last-child(-n+2) {
  border-bottom: none;
}

/* If only one card in last row (odd total), remove bottom border */
.kgs-layer-card:last-child {
  border-bottom: none;
}

.kgs-layer-card:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Subtle left accent bar — colour set by JS via --kgs-lc-accent */
.kgs-layer-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--kgs-lc-accent, var(--kgs-accent));
  opacity: 0.7;
}

/* ── Card header row ─────────────────────────────────────────── */

.kgs-lc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.kgs-lc-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: rgba(255, 255, 255, 0.55);
}

.kgs-lc-icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* ── Confidence pill ─────────────────────────────────────────── */

.kgs-lc-confidence {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.kgs-lc-confidence--live {
  background: rgba(27, 201, 164, 0.15);
  border-color: rgba(27, 201, 164, 0.45);
  color: #1bc9a4;
}

.kgs-lc-confidence--derived {
  background: rgba(30, 144, 255, 0.14);
  border-color: rgba(30, 144, 255, 0.4);
  color: #69b4ff;
}

.kgs-lc-confidence--estimated {
  background: rgba(255, 180, 0, 0.13);
  border-color: rgba(255, 180, 0, 0.38);
  color: #ffd666;
}

.kgs-lc-confidence--unavailable {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.42);
}

/* ── Value label (the hero number / reading) ─────────────────── */

.kgs-lc-value {
  display: block;
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 5px;
  color: var(--kgs-lc-accent, #fff);
  word-break: break-word;
}

/* Risk / density colour overrides — set via utility classes on card */
.kgs-lc--risk-very-high { --kgs-lc-accent: #ff4d6d; }
.kgs-lc--risk-high      { --kgs-lc-accent: #ff8c42; }
.kgs-lc--risk-moderate  { --kgs-lc-accent: #ffd166; }
.kgs-lc--risk-low       { --kgs-lc-accent: #7de07d; }
.kgs-lc--risk-very-low  { --kgs-lc-accent: #a8edbc; }
.kgs-lc--live           { --kgs-lc-accent: #1bc9a4; }
.kgs-lc--neutral        { --kgs-lc-accent: rgba(255, 255, 255, 0.82); }

/* ── Detail text ─────────────────────────────────────────────── */

.kgs-lc-detail {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.55;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Footer row: sensor + action ─────────────────────────────── */

.kgs-lc-footer {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.kgs-lc-sensor {
  font-size: 0.67rem;
  color: var(--kgs-accent-2);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kgs-lc-action {
  font-size: 0.67rem;
  color: var(--kgs-accent);
  opacity: 0.85;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Skeleton loading state ─────────────────────────────────── */

.kgs-layer-card--skeleton .kgs-lc-value,
.kgs-layer-card--skeleton .kgs-lc-detail,
.kgs-layer-card--skeleton .kgs-lc-sensor,
.kgs-layer-card--skeleton .kgs-lc-action {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: transparent !important;
  animation: kgs-shimmer 1.4s ease infinite;
}

.kgs-layer-card--skeleton .kgs-lc-value  { width: 60%;  height: 16px; display: block; }
.kgs-layer-card--skeleton .kgs-lc-detail { height: 38px; }
.kgs-layer-card--skeleton .kgs-lc-sensor { width: 80%; height: 10px; display: block; }
.kgs-layer-card--skeleton .kgs-lc-action { width: 70%; height: 10px; display: block; }

@keyframes kgs-shimmer {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.5; }
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 760px) {
  .kgs-layers-grid {
    grid-template-columns: 1fr;
  }

  .kgs-layer-card {
    border-right: none;
  }

  .kgs-layer-card:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--kgs-line);
  }

  .kgs-layer-card:last-child {
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  .kgs-layers-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .kgs-lc-detail {
    -webkit-line-clamp: 2;
  }
}