/* GEA Global Initiatives Atlas — applying GEA Visual Identity 2025 */

:root {
  /* === GEA primary palette === */
  --forest-green: #084f38;
  --verdant-green: #2e8055;
  --mint-green: #84c98f;
  --solar-yellow: #fdce07;
  --warm-sand: #fcc089;
  --earth-clay: #aa6227;

  /* === GEA extended palette (for data viz only, alongside primary) === */
  --desert-rose: #bf4f59;
  --faded-dewberry: #8c5983;
  --ocean-blue: #2a6a86;
  --coral-pink: #f7a4ac;
  --lavender-mist: #c7b8da;
  --sky-blue: #8bcdd2;

  /* Forest Green tints (from PDF) — used as neutrals on dark theme */
  --fg-90: #285a45;
  --fg-80: #3e6652;
  --fg-70: #527261;
  --fg-60: #658170;
  --fg-50: #7a9082;
  --fg-40: #90a195;
  --fg-30: #a7b4ab;
  --fg-20: #c0c8c2;
  --fg-10: #dbdfdb;

  /* Solar Yellow tints */
  --sy-5:  #fffbf0;
  --sy-10: #fff7e5;
  --sy-30: #ffedbc;

  /* === Surface system (dark, brand-led) === */
  --ground:    #042820;            /* near-black forest */
  --panel:     var(--forest-green); /* #084f38 */
  --panel-2:   #0c5d44;             /* slight lift */
  --panel-3:   #0f6b4f;             /* hover */
  --line:      rgba(132,201,143,0.18); /* mint-green hairline */
  --line-2:    rgba(132,201,143,0.10);

  /* Text on dark forest */
  --text-hi:   #ffffff;
  --text:      #f4f3ed;             /* warm white */
  --text-mid:  #c0c8c2;             /* fg-20 */
  --text-low:  #90a195;             /* fg-40 */
  --text-dim:  #7a9082;             /* fg-50 */

  /* Accent */
  --accent:        var(--solar-yellow);
  --accent-soft:   rgba(253,206,7,0.18);
  --accent-line:   rgba(253,206,7,0.45);

  /* Heatmap ramp — Solar Yellow on Forest */
  --heat-1: rgba(253,206,7,0.10);
  --heat-2: rgba(253,206,7,0.22);
  --heat-3: rgba(253,206,7,0.42);
  --heat-4: rgba(253,206,7,0.65);
  --heat-5: rgba(253,206,7,0.92);

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;

  /* Type — Figtree (fallback for Modern Era) */
  --font-sans: 'Figtree', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Roboto Mono', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300; /* Light, per type spec for body */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
strong, b { font-weight: 700; } /* Bold for emphasis, per spec */

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select { font: inherit; color: inherit; }
a {
  color: var(--solar-yellow);
  text-decoration: underline; /* per type spec: links always underlined */
  text-underline-offset: 2px;
  font-weight: 500; /* Medium, per spec */
}
a:hover { text-decoration: underline; opacity: 0.85; }

/* === App shell === */
.app {
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* === Header === */
.app-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 28px;
  background: var(--forest-green);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand--btn { background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.brand--btn:hover .brand-title { opacity: 0.8; }

.brand-title {
  font-family: var(--font-sans);
  font-weight: 800; /* ExtraBold per heading spec */
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--text-hi);
  line-height: 1.1;
}
.brand-title em {
  color: var(--solar-yellow);
  font-style: normal;
  font-weight: 900;
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--mint-green);
  text-transform: uppercase;
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
/* Give the Global Energy Alliance name more presence within the tagline. */
.brand-sub-gea {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--text-hi);
}

/* GEA logo in the header, linking to energyalliance.org. */
.header-gea-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.app-header > .header-gea-logo { margin-left: auto; } /* push to top-right in the app view */
.header-gea-logo:hover { opacity: 0.8; }
.header-gea-logo img {
  height: 34px;
  width: auto;
  display: block;
}

.header-meta {
  margin-left: auto;
  display: flex;
  gap: 28px;
}
.header-meta .label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--mint-green);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 2px;
}
.header-meta b {
  display: block;
  font-weight: 800;
  color: var(--solar-yellow);
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* === Tabs === */
.tabs {
  display: flex;
  gap: 0;
  padding: 0 28px;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.tabs::-webkit-scrollbar { height: 6px; }
.tabs::-webkit-scrollbar-thumb { background: rgba(132,201,143,0.35); border-radius: 3px; }
.tabs::-webkit-scrollbar-track { background: transparent; }
.tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-mid);
  border-bottom: 2px solid transparent;
  position: relative;
  margin-bottom: -1px;
  transition: color .15s;
  white-space: nowrap;
}
.tab:hover { color: var(--text-hi); }
.tab.is-active {
  color: var(--solar-yellow);
  border-bottom-color: var(--solar-yellow);
}
.tabs-separator {
  width: 1px;
  margin: 10px 8px;
  background: var(--line);
  align-self: stretch;
}

/* === Workspace === */
.workspace {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 0;
  overflow: hidden;
}
.workspace--no-rail {
  grid-template-columns: 1fr;
}
}

/* === Filter rail === */
.rail {
  border-right: 1px solid var(--line);
  background: var(--panel);
  overflow-y: auto;
  padding: 18px 16px 32px;
}
.rail-section { margin-bottom: 22px; }
.rail-section h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint-green);
  margin: 0 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rail-section h4 .clear {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-mid);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rail-section h4 .clear:hover { color: var(--solar-yellow); }

.chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  margin: 2px 0;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
  transition: background .12s, color .12s;
  text-align: left;
  white-space: nowrap;
}
.chip > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chip:hover { background: var(--panel-2); color: var(--text-hi); }
.chip.is-on {
  background: var(--accent-soft);
  color: var(--solar-yellow);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  font-weight: 500;
}
.chip .count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-low);
  font-weight: 500;
}
.chip.is-on .count { color: var(--solar-yellow); }

.search {
  display: block;
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-hi);
  outline: none;
  font-family: var(--font-sans);
}
.search:focus { border-color: var(--solar-yellow); }
.search::placeholder { color: var(--text-low); }

.rail-summary {
  padding: 12px 14px;
  margin-bottom: 18px;
  background: var(--panel-2);
  border-left: 3px solid var(--solar-yellow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12px;
  color: var(--text);
}
.rail-summary b {
  color: var(--solar-yellow);
  font-weight: 800;
  font-size: 16px;
  font-family: var(--font-sans);
}
.rail-summary .reset {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--mint-green);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rail-summary .reset:hover { color: var(--solar-yellow); }

/* === View pane === */
.view {
  position: relative;
  overflow: auto;
  background: var(--ground);
}
.view-inner { padding: 24px 28px 60px; }
.view-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
}
.view-title h2 {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-weight: 900; /* Black, per heading spec */
  font-size: 28px;
  letter-spacing: -0.015em;
  color: var(--text-hi);
}
.view-title em {
  color: var(--solar-yellow);
  font-style: normal;
}
.view-title p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-mid);
  max-width: 680px;
}
.view-search {
  position: relative;
  flex-shrink: 0;
  margin-left: 24px;
  align-self: center;
}
.view-search-input {
  width: 300px;
  padding: 10px 34px 10px 38px;
  background-color: rgba(255,255,255,0.07);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bfd0c5' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.2-4.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 13px center;
  background-size: 16px;
  border: 1.5px solid rgba(132,201,143,0.55);
  border-radius: 999px;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.view-search-input::placeholder { color: var(--text-mid, #b3c4b9); opacity: 1; }
.view-search-input:hover { border-color: rgba(132,201,143,0.8); background-color: rgba(255,255,255,0.1); }
.view-search-input:focus {
  border-color: var(--accent, #fdce07);
  background-color: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 3px rgba(253,206,7,0.18);
}
.view-search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  background: rgba(132,201,143,0.18);
  color: var(--text);
  border: none;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.view-search-clear:hover { background: rgba(132,201,143,0.35); }

/* ── Search results side panel ───────────────────────────── */
.sp-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 360px;
  background: rgba(8, 36, 28, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid rgba(132,201,143,0.22);
  box-shadow: -20px 0 50px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  z-index: 90;
  animation: sp-slide 220ms ease-out;
}
@keyframes sp-slide {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.sp-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(132,201,143,0.16);
}
.sp-label {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-mint, #84c98f); font-weight: 600; margin-bottom: 6px;
}
.sp-count { font-size: 13px; color: var(--text); }
.sp-count em { color: var(--text-hi); font-style: normal; font-weight: 600; }
.sp-close {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(132,201,143,0.14); border: none; color: var(--text);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sp-close:hover { background: rgba(132,201,143,0.28); }
.sp-hint {
  padding: 10px 18px;
  font-size: 11px; color: var(--text-mid); border-bottom: 1px solid rgba(132,201,143,0.10);
}
.sp-list {
  flex: 1; overflow-y: auto; padding: 12px 12px 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.sp-empty { padding: 28px 14px; text-align: center; }
.sp-empty-title { font-size: 14px; font-weight: 600; color: var(--text-hi); margin-bottom: 6px; }
.sp-empty-sub { font-size: 12px; color: var(--text-mid); line-height: 1.5; }
.sp-card {
  text-align: left;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(132,201,143,0.14);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
  display: flex; flex-direction: column; gap: 6px;
}
.sp-card:hover { background: rgba(132,201,143,0.08); border-color: rgba(132,201,143,0.35); }
.sp-card.is-active {
  background: rgba(253,206,7,0.10);
  border-color: rgba(253,206,7,0.55);
  box-shadow: 0 0 0 1px rgba(253,206,7,0.25);
}
.sp-card-row { display: flex; align-items: center; gap: 8px; }
.sp-card-pillar {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.4);
}
.sp-pillar--grids { background: var(--c-mint, #84c98f); }
.sp-pillar--powering { background: var(--c-yellow, #fdce07); }
.sp-pillar--both { background: linear-gradient(135deg, var(--c-mint, #84c98f) 50%, var(--c-yellow, #fdce07) 50%); }
.sp-card-name { font-size: 13.5px; font-weight: 600; color: var(--text-hi); line-height: 1.3; }
.sp-card-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-mid); }
.sp-card-type {
  background: rgba(132,201,143,0.12); color: var(--c-mint, #84c98f);
  padding: 2px 7px; border-radius: 4px; font-weight: 500;
}
.sp-card-regions { color: var(--text-mid); }
.sp-card-desc { font-size: 12px; color: var(--text-mid); line-height: 1.45; }
.sp-card-actions {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; padding-top: 4px;
}
.sp-card-tag { color: var(--c-yellow, #fdce07); font-weight: 600; letter-spacing: 0.03em; }
.sp-card-open {
  color: var(--c-mint, #84c98f); font-weight: 600; cursor: pointer;
}
.sp-card-open:hover { color: var(--text-hi); }
.sp-hl { background: rgba(253,206,7,0.32); color: var(--text-hi); padding: 0 2px; border-radius: 2px; }

/* push view content over to make room for the panel when open */
body.has-search-panel .view-inner { padding-right: 380px; }

/* Type-color dots — using GEA palette */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.dot--mdb { background: var(--ocean-blue); }
.dot--bil { background: var(--earth-clay); }
.dot--igo { background: var(--faded-dewberry); }
.dot--coa { background: var(--verdant-green); }
.dot--ngo { background: var(--solar-yellow); }
.dot--res { background: var(--sky-blue); }

/* === Matrix view === */
.matrix-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--text-mid);
  flex-wrap: wrap;
}
.seg {
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.seg button {
  padding: 7px 14px;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
  color: var(--text-mid);
}
.seg button:hover { color: var(--text-hi); }
.seg button.is-on {
  background: var(--solar-yellow);
  color: var(--forest-green);
  font-weight: 700;
}

.matrix-wrap {
  display: grid;
  grid-template-columns: 240px 1fr;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.matrix-rows { border-right: 1px solid var(--line); }
.matrix-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 30px;
  font-size: 12px;
  color: var(--text);
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  transition: background .1s;
}
.matrix-row-head:hover { background: var(--panel-2); }
.matrix-row-head.is-hover { background: var(--panel-3); color: var(--text-hi); }
.matrix-row-head .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.matrix-row-head .type-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--panel-3);
  color: var(--mint-green);
  letter-spacing: 0.06em;
}
.matrix-grid { display: grid; position: relative; }
.matrix-col-head {
  height: 110px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line-2);
  position: relative;
  background: var(--panel);
}
.matrix-col-head span {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform-origin: 0 0;
  transform: rotate(-55deg);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
}
.matrix-cell {
  border-bottom: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  position: relative;
  cursor: pointer;
}
.matrix-cell.is-on::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--solar-yellow);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(253,206,7,0.25), 0 1px 4px rgba(253,206,7,0.4);
}
.matrix-cell.is-on.dim::after { opacity: 0.18; box-shadow: none; }
.matrix-cell.is-hover-col, .matrix-cell.is-hover-row {
  background: rgba(132,201,143,0.06);
}
.matrix-col-head.is-hover { background: var(--panel-2); }
.matrix-col-head.is-hover span { color: var(--solar-yellow); }

.matrix-totals-row {
  display: grid;
  background: var(--panel-2);
  border-top: 1px solid var(--line);
}
.matrix-total-cell {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 7px 0;
  border-right: 1px solid var(--line-2);
  color: var(--text);
  position: relative;
}
.matrix-total-cell .bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--solar-yellow);
}
.matrix-total-cell.is-gap { color: var(--text-low); }
.matrix-total-cell.is-gap .bar { background: var(--fg-50); height: 1px; }

.matrix-legend {
  display: flex;
  gap: 22px;
  font-size: 11.5px;
  color: var(--text-mid);
  margin-top: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.matrix-legend .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: middle; }

/* === Geo view === */
.geo-canvas {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 40%, #0a5a40 0%, var(--ground) 75%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 1100 / 620;
  width: 100%;
  overflow: hidden;
}
.geo-canvas svg { width: 100%; height: 100%; display: block; }
.geo-tooltip {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--forest-green);
  border: 1px solid var(--mint-green);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  pointer-events: none;
  max-width: 280px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  color: var(--text-hi);
}
.geo-tooltip .t-name { font-weight: 700; margin-bottom: 4px; color: var(--solar-yellow); }
.geo-tooltip .t-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-mid); font-weight: 400; }

/* === Directory === */
.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
}
.dir-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px 16px 20px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.dir-card:hover { border-color: var(--solar-yellow); background: var(--panel-2); }
.dir-card .accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.dir-card .head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.dir-card .name {
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  color: var(--text-hi);
  line-height: 1.25;
}
.dir-card .type-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 2px;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  color: var(--forest-green);
}
.dir-card .meta {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-mid);
  font-weight: 500;
}
.dir-card .meta b {
  color: var(--text-hi);
  font-weight: 700;
}
.dir-card .desc {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dir-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}
.dir-card .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--panel-2);
  color: var(--text);
}
.dir-card .tag.region { color: var(--solar-yellow); background: var(--accent-soft); }

.dir-filters {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px;
}
.dir-controls {
  display: flex; gap: 10px; align-items: center; margin-bottom: 14px;
}

/* === Drawer === */
.drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(4,40,32,0.7);
  backdrop-filter: blur(2px);
  z-index: 50;
  animation: fade-in .15s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 520px;
  background: var(--panel);
  border-left: 1px solid var(--mint-green);
  z-index: 51;
  overflow-y: auto;
  animation: slide-in .25s cubic-bezier(.2,.8,.2,1);
  box-shadow: -16px 0 48px rgba(0,0,0,0.5);
}
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }
.drawer-header {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--panel); z-index: 2;
}
.drawer-close {
  position: absolute; top: 18px; right: 20px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text-mid);
  transition: background .12s, color .12s;
}
.drawer-close:hover { background: var(--panel-2); color: var(--solar-yellow); }
.drawer-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--mint-green);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.drawer h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900; /* Black */
  font-size: 26px;
  letter-spacing: -0.015em;
  color: var(--text-hi);
  line-height: 1.15;
  padding-right: 36px;
}
.drawer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  margin: 18px 0 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.drawer-stat {
  background: var(--panel-2);
  padding: 12px 14px;
}
.drawer-stat .label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint-green);
  display: block;
  margin-bottom: 4px;
}
.drawer-stat .value {
  font-size: 16px;
  color: var(--text-hi);
  font-weight: 700;
}
.drawer-stat .value.mono {
  font-family: var(--font-mono);
  font-size: 14px;
}
.drawer-body { padding: 22px 24px 40px; }
.drawer-section { margin-bottom: 22px; }
.drawer-section h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint-green);
  margin: 0 0 10px;
}
.drawer-section p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
}
.drawer-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.drawer-tag {
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
}
.drawer-tag.region {
  color: var(--solar-yellow);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.drawer-tag.stage { background: var(--panel-3); color: var(--mint-green); }

.collab-list { display: flex; flex-direction: column; gap: 4px; }
.collab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text);
  background: var(--panel-2);
  cursor: pointer;
  transition: background .12s;
}
.collab-item:hover { background: var(--panel-3); color: var(--solar-yellow); }
.collab-item.is-known::before { content: '↗'; color: var(--solar-yellow); font-family: var(--font-mono); font-weight: 700; }
.collab-item.is-external::before { content: '·'; color: var(--text-low); }

.empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-mid);
}
.empty h4 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 24px;
  color: var(--text-hi);
  margin: 0 0 6px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fg-70); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--mint-green); }

/* === Value Chain View === */
.vc-view { display: flex; flex-direction: column; gap: 18px; }
.vc-controls {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.vc-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vc-legend-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint-green);
  font-weight: 700;
}
.vc-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  transition: background .12s, border-color .12s, opacity .12s;
}
.vc-pill:hover { background: var(--panel-2); }
.vc-pill.is-on {
  background: var(--accent-soft);
  border-color: var(--solar-yellow);
  color: var(--solar-yellow);
}
.vc-pill.is-faded { opacity: 0.45; }
.vc-pill-dot { width: 10px; height: 10px; border-radius: 50%; }
.vc-pill-icon { display: inline-flex; color: var(--mint-green); }
.vc-pill.is-on .vc-pill-icon { color: var(--solar-yellow); }
.vc-pill--clear { color: var(--text-low); border-style: dashed; }
.vc-layer-seg { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.vc-layer-seg .seg { flex-shrink: 0; }

.vc-insights {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: var(--panel);
  border-left: 3px solid var(--solar-yellow);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.vc-insights-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--solar-yellow);
  flex-shrink: 0;
  padding-top: 2px;
}
.vc-insights b { color: var(--text-hi); font-weight: 700; }

.vc-layer { display: flex; flex-direction: column; gap: 12px; }
.vc-layer-head { display: flex; flex-direction: column; gap: 4px; }
.vc-layer-title { display: flex; align-items: baseline; gap: 12px; }
.vc-layer-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--mint-green);
  letter-spacing: 0.16em;
}
.vc-layer-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-hi);
  letter-spacing: -0.005em;
}
.vc-layer-head p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-mid);
  font-weight: 300;
}

.vc-grid {
  display: grid;
  gap: 10px;
}
.vc-col {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .15s, background .15s;
  min-height: 200px;
}
.vc-col.is-hover {
  border-color: var(--solar-yellow);
  background: var(--panel-2);
}
.vc-col-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.vc-col-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(132,201,143,0.10);
  color: var(--mint-green);
  transition: background .15s, color .15s, transform .15s;
}
.vc-col.is-hover .vc-col-icon {
  background: var(--accent-soft);
  color: var(--solar-yellow);
  transform: scale(1.05);
}
.vc-col-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.vc-col-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--mint-green);
  letter-spacing: 0.14em;
}
.vc-col-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-hi);
  line-height: 1.25;
}
.vc-col-count {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--solar-yellow);
}
.vc-col-tiles {
  display: grid;
  gap: 4px;
  align-content: flex-start;
}
.vc-tile {
  position: relative;
  padding: 6px 8px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  color: #042820;
  text-align: left;
  min-height: 32px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: transform .1s, opacity .12s;
  overflow: hidden;
}
.vc-tile:hover { transform: translateY(-1px); }
.vc-tile.is-dim { opacity: 0.22; }
.vc-tile-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vc-empty {
  font-size: 11px;
  font-style: italic;
  color: var(--text-low);
  padding: 8px 4px;
  grid-column: 1 / -1;
  text-align: center;
}

.vc-grid--with-arrows {
  align-items: stretch;
}
.vc-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 32px; /* align with top of column header */
  color: var(--solar-yellow);
  width: 36px;
}
.vc-flow-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vc-flow-caption span:first-child { color: var(--mint-green); }
.vc-flow-caption span:last-child { color: var(--solar-yellow); }

.vc-footnote {
  font-size: 11.5px;
  color: var(--text-low);
  font-style: italic;
  text-align: center;
  margin-top: 8px;
}

/* === Network View === */
.net-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--text-mid);
  margin-bottom: 12px;
}
.net-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.net-legend-dot { width: 10px; height: 10px; border-radius: 50%; }

/* Clickable filter legend (types / barriers / value-chain part) */
.net-filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12px;
  position: relative;
}
.net-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.net-filter-label {
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-low);
  margin-right: 4px;
  min-width: 110px;
}
.net-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; font-size: 11.5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--text-mid);
  border: 1px solid var(--line);
  transition: background .12s, border-color .12s, color .12s, opacity .12s;
  cursor: pointer;
}
.net-filter-chip:hover { background: rgba(132,201,143,0.12); border-color: rgba(132,201,143,0.4); color: var(--text-hi); }
.net-filter-chip.is-on {
  background: rgba(253,206,7,0.18);
  border-color: var(--solar-yellow);
  color: var(--text-hi);
  font-weight: 600;
}
.net-filter-chip.is-faded { opacity: 0.4; }
.net-filter-clear {
  align-self: flex-start;
  padding: 3px 10px;
  font: 600 11px/1.1 var(--font-mono);
  color: var(--text-mid);
  background: transparent;
  border: 1px dashed rgba(132,201,143,0.4);
  border-radius: 4px;
  cursor: pointer;
}
.net-filter-clear:hover { color: var(--text-hi); border-color: var(--solar-yellow); }

.net-canvas {
  position: relative;
  background: radial-gradient(ellipse at center, #053828 0%, var(--ground) 75%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 1600 / 1000;
  width: 100%;
  overflow: hidden;
}
.net-canvas svg { width: 100%; height: 100%; display: block; }
.net-edge {
  stroke: var(--mint-green);
  stroke-opacity: 0.22;
  pointer-events: none;
  transition: stroke .15s, stroke-opacity .15s;
}
.net-edge.is-active {
  stroke: var(--solar-yellow);
  stroke-opacity: 0.95;
}
.net-node circle.halo {
  fill: none;
  stroke: var(--solar-yellow);
  stroke-width: 2;
  opacity: 0;
  pointer-events: none;
}
.net-node:hover circle.halo,
.net-node.is-focus circle.halo { opacity: 0.9; }
.net-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  fill: var(--text);
  pointer-events: none;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--ground);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  transition: fill .12s, font-size .12s;
}
.net-label.is-focus {
  fill: var(--solar-yellow);
  font-size: 12px;
  font-weight: 700;
}
.net-foot {
  font-size: 11.5px;
  color: var(--text-low);
  font-style: italic;
  margin-top: 10px;
}

/* Make tile color text legible on yellow vs dark tiles */
.vc-tile[style*="rgb(253, 206, 7)"], .vc-tile[style*="#fdce07"] { color: #042820; }


/* ─────────────────────────────────────────────────────────────────
   Matrix view — Region × value-chain segment
   ───────────────────────────────────────────────────────────────── */
.mx-view { display: flex; flex-direction: column; gap: 14px; }

.mx-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.mx-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: 500 12.5px/1 var(--font-sans);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
.mx-btn:hover { background: var(--panel-3); border-color: var(--accent-line); }
.mx-btn.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.mx-btn-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mx-btn-dot--heat {
  background: linear-gradient(135deg, rgb(38,128,92), rgb(253,206,7), rgb(240,136,62), rgb(224,58,49));
  box-shadow: 0 0 0 2px rgba(255,255,255,0.10);
}
.mx-btn--clear { background: transparent; color: var(--text-low); }
.mx-btn--clear:hover { color: var(--text); }
.mx-toolbar-hint {
  margin-left: 6px;
  color: var(--text-low);
  font-size: 11.5px;
  font-style: italic;
}
.mx-toolbar-spacer { flex: 1; }

/* Prominent Rows axis toggle that sits above the toolbar */
.mx-rowmode-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(253,206,7,0.10), rgba(132,201,143,0.08));
  border: 1px solid rgba(253,206,7,0.35);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.mx-rowmode-banner-label {
  font: 700 13px/1 var(--font-sans);
  color: var(--text-hi);
  letter-spacing: 0.02em;
  margin-right: 4px;
}
.mx-rowmode-banner-btn {
  padding: 7px 16px;
  font: 600 13px/1 var(--font-sans);
  color: var(--text-mid);
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.mx-rowmode-banner-btn:hover { color: var(--text-hi); border-color: rgba(132,201,143,0.5); }
.mx-rowmode-banner-btn.is-on {
  background: var(--solar-yellow);
  color: #042820;
  border-color: var(--solar-yellow);
  font-weight: 700;
}
.mx-rowmode-banner-hint {
  margin-left: 6px;
  font-size: 12px;
  color: var(--text-mid);
  font-style: italic;
}
.mx-rowmode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}
.mx-rowmode-label {
  font-size: 11px;
  color: var(--text-mid);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 2px;
}
.mx-rowmode-btn {
  background: transparent;
  border: 1px solid var(--line-2, rgba(132,201,143,0.22));
  color: var(--text-mid);
  padding: 5px 11px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.mx-rowmode-btn:hover { color: var(--text); border-color: rgba(132,201,143,0.45); }
.mx-rowmode-btn.is-on {
  background: rgba(253,206,7,0.16);
  border-color: rgba(253,206,7,0.55);
  color: var(--text-hi);
}
.mx-legend {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}
.mx-legend-label {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-low);
  padding-right: 4px;
  border-right: 1px solid var(--line);
  margin-right: 4px;
}
.mx-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-mid);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.mx-legend-item.is-clickable { cursor: pointer; border-color: var(--line); transition: background .12s, border-color .12s, color .12s, opacity .12s; }
.mx-legend-item.is-clickable:hover { background: var(--panel-3); color: var(--text); }
.mx-legend-item.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.mx-legend-item.is-faded { opacity: 0.4; }
.mx-legend-item.is-static { cursor: default; }
.mx-legend--types { row-gap: 4px; }
.mx-modal-legend-chip.is-static { cursor: default; }
.mx-modal-legend-chip.is-static:hover { border-color: rgba(255,255,255,0.08); }
.mx-modal-legend--types { margin-bottom: 4px; }
.mx-legend-clear {
  background: transparent; color: var(--text-low);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font: 500 11.5px/1 var(--font-sans);
  cursor: pointer;
}
.mx-legend-clear:hover { color: var(--accent); border-color: var(--accent-line); }
.mx-legend-dot {
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.15);
}

/* Unified filter highlight — Types, Barriers and Geography filters all use
   this one style so any active filter reads the same. */
.mx-dot.is-match,
.mx-dot.is-role {
  box-shadow: 0 0 0 2.2px var(--mint-green), 0 0 10px rgba(132,201,143,0.55);
  transform: scale(1.12);
  z-index: 2;
}

.mx-banner {
  padding: 8px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
}
.mx-banner b { color: var(--accent); font-weight: 700; }

/* Zoom controls — shared by the Global Heat Map and the Regional table */
.tbl-zoom {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: auto;
  padding: 2px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.tbl-zoom-btn {
  width: 26px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  color: var(--text); background: transparent;
  border: none; border-radius: 999px; cursor: pointer;
  transition: background .12s;
}
.tbl-zoom-btn:hover:not(:disabled) { background: rgba(253,206,7,0.18); }
.tbl-zoom-btn:disabled { opacity: 0.35; cursor: default; }
.tbl-zoom-val {
  min-width: 44px; height: 24px; padding: 0 6px;
  font: 600 11.5px/1 var(--font-mono); color: var(--text-mid);
  background: transparent; border: none; border-radius: 999px; cursor: pointer;
}
.tbl-zoom-val:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.tbl-zoom-fit {
  height: 24px; padding: 0 10px; margin-left: 2px;
  font: 600 11px/1 var(--font-sans); color: var(--text);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.tbl-zoom-fit:hover { background: rgba(253,206,7,0.16); border-color: rgba(253,206,7,0.45); }

.mx-tablewrap {
  /* overflow visible (not auto) so this wrapper is NOT a scroll container —
     that lets the table flow full-length and the page scroll, while the
     sticky <thead> freezes against the page (.view) scroll. */
  overflow: visible;
  cursor: grab;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0;
  scrollbar-width: thin;
}
.mx-tablewrap::-webkit-scrollbar { height: 8px; }
.mx-tablewrap::-webkit-scrollbar-thumb { background: rgba(132,201,143,0.45); border-radius: 4px; }
.mx-tablewrap::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.mx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  min-width: 980px;
}
.mx-table th, .mx-table td { vertical-align: top; }

/* Group head (Grids / Production / Power) */
.mx-grouphead th {
  text-align: left;
  padding: 8px 11px 7px;
  font: 600 11px/1.1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 6;
  background: var(--panel);
}
.mx-grouphead-cell { position: relative; }
.mx-gap-before { border-left: 2px solid rgba(255,255,255,0.15) !important; }

/* Column heads */
.mx-colhead th {
  text-align: left;
  padding: 7px 8px 9px;
  font-weight: 500;
  background: linear-gradient(rgba(132,201,143,0.08), rgba(132,201,143,0.08)), var(--panel);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s;
  position: sticky; top: 27px; z-index: 5;
}
.mx-colhead th:hover { background: rgba(253,206,7,0.10); }
.mx-colhead-label { font-size: 11.5px; line-height: 1.2; color: var(--text); }
.mx-colhead-sub { font-size: 10px; color: var(--text-low); margin-top: 2px; }
.mx-colhead-hint {
  position: absolute; right: 8px; bottom: 6px;
  font-size: 9.5px; color: var(--text-low);
  opacity: 0;
  transition: opacity .12s;
  font-style: italic;
}
.mx-colhead th:hover .mx-colhead-hint { opacity: 1; }

/* Corner */
.mx-corner { background: var(--panel); width: 148px; min-width: 148px; }
.mx-corner--sub { border-bottom: 1px solid var(--line); }

/* Row head */
.mx-rowhead {
  text-align: left;
  width: 148px; min-width: 148px;
  padding: 9px 10px;
  background: rgba(132,201,143,0.06);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.mx-rowhead:hover { background: rgba(253,206,7,0.10); }
.mx-rowhead-label { display: block; font-weight: 500; font-size: 12px; color: var(--text); }
.mx-rowhead-metric {
  display: block; margin-top: 3px;
  font-size: 10px; color: var(--text-low);
  font-style: italic;
  letter-spacing: 0.01em;
}
.mx-rowhead-metric .mhelp { margin-left: 3px; }
.mx-rowhead-hint {
  display: block; margin-top: 4px;
  font-size: 10.5px; color: var(--text-low);
  font-style: italic;
  opacity: 0.6;
}
.mx-rowhead:hover .mx-rowhead-hint { opacity: 1; color: var(--accent); }

.mx-row--global .mx-rowhead {
  background: rgba(253,206,7,0.08);
  border-right-color: var(--accent-line);
}
.mx-row--global .mx-rowhead-label { color: var(--text-hi); font-weight: 700; }

/* Cell */
.mx-cell {
  padding: 4px;
  background: rgba(255,255,255,0.015);
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  min-height: 40px;
  transition: background .15s, box-shadow .15s;
}
.mx-cell.is-empty { background: transparent; }
.mx-cell.is-clickable { cursor: pointer; }
.mx-cell.is-clickable:hover { background: rgba(253,206,7,0.07); box-shadow: inset 0 0 0 1px rgba(253,206,7,0.30); }
.mx-cell-inner {
  display: flex; flex-direction: column; gap: 4px;
  align-content: flex-start;
  min-height: 26px;
}
.mx-cell-group {
  display: flex; flex-wrap: wrap; gap: 3px;
  align-content: flex-start;
}
.mx-cell-group--divided {
  padding-top: 5px;
  border-top: 1px dashed rgba(132,201,143,0.35);
}

/* Heatmap mode — count tinted by cell density (see Cell heatmap branch). */
.mx-cell--heat { text-align: center; }
.mx-cell-inner--heat {
  flex-direction: row;
  align-items: center; justify-content: center;
  min-height: 26px;
}
.mx-heat-num { font: 700 13px/1 var(--font-mono); color: var(--text); }
.mx-heat-num.is-dark { color: #1a1a1a; }

/* Heatmap gradient legend (shown in the toolbar while heatmap mode is on). */
.mx-heat-legend { display: inline-flex; align-items: center; gap: 6px; }
.mx-heat-legend-cap { font: 600 10.5px/1 var(--font-mono); color: var(--text-low); white-space: nowrap; }
.mx-heat-legend-bar {
  width: 96px; height: 10px; border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(to right,
    rgb(38,128,92), rgb(253,206,7), rgb(240,136,62), rgb(224,58,49));
}

/* Dot */
.mx-dot {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1.2px rgba(255,255,255,0.10);
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.mx-dot:hover {
  transform: scale(1.25);
  box-shadow: 0 0 0 2px var(--accent);
}
.mx-dot.is-focus {
  box-shadow: 0 0 0 2.4px var(--accent), 0 0 14px rgba(253,206,7,0.75);
  transform: scale(1.22);
  z-index: 3;
}
.mx-dot.is-collab {
  box-shadow: 0 0 0 2.4px #8bcdd2, 0 0 12px rgba(139,205,210,0.7);
  transform: scale(1.15);
  z-index: 2;
}
.mx-dot.is-dim { opacity: 0.14; }

/* Reveal button */
.mx-reveal {
  display: block;
  margin: 14px auto;
  background: var(--panel-2);
  color: var(--text);
  border: 1px dashed var(--accent-line);
  border-radius: var(--radius);
  padding: 10px 24px;
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.mx-reveal:hover { background: var(--panel-3); color: var(--accent); }
.mx-reveal--collapse { border-style: solid; opacity: 0.7; }

.mx-foot {
  font-size: 11.5px;
  color: var(--text-low);
  font-style: italic;
}

/* Context menu */
.mx-ctxmenu {
  position: fixed;
  z-index: 60;
  min-width: 240px;
  padding: 6px;
  background: #0a3a2a;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.mx-ctxmenu-item {
  display: block; width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  color: var(--text);
  border: 0;
  border-radius: var(--radius-sm);
  font: 400 12.5px/1.3 var(--font-sans);
  cursor: pointer;
}
.mx-ctxmenu-item:hover { background: var(--accent-soft); color: var(--accent); }

/* Modal */
.mx-modal-scrim {
  position: fixed; inset: 0;
  background: rgba(4,12,8,0.78);
  backdrop-filter: blur(3px);
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.mx-modal {
  width: min(1400px, 96vw);
  /* Capped height; the modal itself scrolls. The graph below renders at its
     natural aspect ratio (large + legible) rather than being squeezed to fit,
     so dense networks become scrollable instead of tiny. */
  max-height: 92vh;
  background: var(--panel);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mx-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
  /* Keep the title + close button reachable while the body scrolls. */
  position: sticky; top: 0; z-index: 5;
  background: var(--panel);
  flex: 0 0 auto;
}
.mx-modal-eyebrow {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-low);
}
.mx-modal-head h3 {
  margin: 4px 0 0; font: 700 18px/1.2 var(--font-sans); color: var(--text-hi);
}
.mx-modal-close {
  background: transparent; color: var(--text-mid);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 30px; height: 30px;
  font-size: 18px;
  cursor: pointer; line-height: 1;
}
.mx-modal-close:hover { color: var(--accent); border-color: var(--accent-line); }
.mx-modal-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 8px 20px;
  font-size: 12px; color: var(--text-mid);
  border-bottom: 1px solid var(--line-2);
}
.mx-modal-meta b { color: var(--text); }
.mx-modal-warn { color: var(--text-low); font-style: italic; }
.mx-modal-legend {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 14px;
  padding: 8px 20px 10px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12px;
  color: var(--text-mid, #c9d6cd);
}
.mx-modal-legend-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10.5px;
  color: var(--text-low, #8aa297);
  margin-right: 2px;
}
.mx-modal-legend-chip {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--line-2);
  color: inherit;
  font: inherit;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.mx-modal-legend-chip:hover { border-color: var(--accent-line, rgba(132,201,143,0.4)); }
.mx-modal-legend-chip.is-on {
  background: rgba(132,201,143,0.16);
  border-color: rgba(132,201,143,0.55);
  color: var(--text);
}
.mx-modal-legend-chip.is-off { opacity: 0.45; }
.mx-modal-legend-count {
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--text-low, #8aa297);
  margin-left: 2px;
}
.mx-modal-legend-chip.is-on .mx-modal-legend-count { color: var(--text); }
.mx-modal-legend-clear {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-mid, #c9d6cd);
  font: inherit; font-size: 11px;
  cursor: pointer;
  padding: 3px 10px;
  margin-left: 6px;
  border-radius: 999px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.mx-modal-legend-clear:hover {
  color: var(--text);
  background: rgba(132,201,143,0.10);
  border-color: rgba(132,201,143,0.45);
}
.mx-modal-legend-clear.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mx-modal-legend-clear.is-disabled:hover {
  background: transparent;
  border-color: var(--line-2);
  color: var(--text-mid, #c9d6cd);
}
.mx-modal-legend-dot {
  width: 11px; height: 11px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.mx-modal-canvas {
  /* Render at the graph's natural aspect ratio (matches the SVG viewBox) so
     there are no letterbox margins. Capped width keeps it a comfortable size —
     large/legible but not overwhelming; the modal scrolls when the content is
     taller than the viewport (see .mx-modal overflow-y). */
  flex: 0 0 auto;
  width: min(100%, 1120px);
  align-self: center;
  aspect-ratio: 1280 / 760;
  min-height: 420px;
  background: rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.mx-modal-canvas svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.mx-modal-empty { color: var(--text-low); font-style: italic; padding: 40px; }

/* Player list below the network graph. The modal scrolls as a whole, so the
   list expands naturally rather than nesting its own scrollbar. */
.mx-modal-list {
  flex: 0 0 auto;
  border-top: 1px solid var(--line-2);
  padding: 12px 20px 14px;
  background: rgba(0,0,0,0.10);
}
.mx-modal-list-head {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-low);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.mx-modal-list-count {
  font-family: var(--font-mono);
  background: rgba(255,255,255,0.08);
  color: var(--text-mid);
  border-radius: 10px; padding: 1px 8px; font-size: 11px;
}
.mx-modal-list-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 10px;
}
.mx-modal-list-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 5px;
  background: transparent; border: 1px solid transparent;
  text-align: left; cursor: pointer;
  color: var(--text); font-size: 12.5px;
  transition: background .12s, border-color .12s;
}
.mx-modal-list-item:hover { background: rgba(253,206,7,0.10); border-color: rgba(253,206,7,0.35); }
.mx-modal-list-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.mx-modal-list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-modal-list-type { color: var(--text-low); font-size: 10.5px; flex-shrink: 0; }

.mx-modal-foot {
  flex: 0 0 auto;
  padding: 8px 20px;
  font-size: 11.5px; color: var(--text-low);
  border-top: 1px solid var(--line-2);
  font-style: italic;
}

/* Hover card */
.mx-hover {
  position: fixed;
  z-index: 70;
  background: #0a4a35;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  overflow: hidden;
  display: flex;
  pointer-events: none;
  animation: mxHoverIn .12s ease-out;
}
@keyframes mxHoverIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.mx-hover-stripe { width: 6px; background: var(--solar-yellow); flex: 0 0 6px; }
.mx-hover-body { flex: 1; padding: 16px 18px 14px; }
.mx-hover-head { display: flex; gap: 12px; align-items: flex-start; }
.mx-hover-title {
  margin: 0; flex: 1;
  font: 700 16px/1.25 var(--font-sans);
  color: var(--text-hi);
}
.mx-hover-type {
  display: inline-block;
  padding: 4px 10px;
  background: var(--solar-yellow);
  color: #042820;
  font: 700 11px/1 var(--font-mono);
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.mx-hover-stats {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 10px;
  font-size: 13px; color: var(--text);
}
.mx-hover-stats em { font-style: normal; color: var(--text-low); font-size: 12.5px; margin-left: 3px; }
.mx-hover-stats b { font-weight: 700; }
.mx-hover-desc {
  margin: 10px 0 12px;
  font-size: 13px; line-height: 1.45;
  color: var(--text);
}
.mx-hover-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-hover-tag {
  padding: 4px 10px;
  background: rgba(132,201,143,0.10);
  border: 1px solid rgba(132,201,143,0.35);
  border-radius: 4px;
  font: 500 11.5px/1 var(--font-mono);
  color: var(--mint-green);
}
.mx-hover-tag--region {
  background: rgba(253,206,7,0.10);
  border-color: rgba(253,206,7,0.40);
  color: var(--solar-yellow);
}



/* ═══════════════════════════════════════════════════════════════════════
   Regional India — Visual 1 (Demand & Supply hex maps)
   ═══════════════════════════════════════════════════════════════════════ */
.ri-view { display: flex; flex-direction: column; gap: 14px; padding: 0 0 24px; }
.ri-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 8px;
  background: rgba(253,206,7,0.08); border: 1px solid rgba(253,206,7,0.25);
  font-size: 12.5px; color: var(--text-mid);
}
.ri-banner-pill {
  font: 700 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px;
  background: var(--solar-yellow); color: #042820;
}
.ri-stage { position: relative; }
.ri-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-width: 0; }
@media (max-width: 1200px) {
  .ri-panels { grid-template-columns: 1fr; }
}

/* ─── Regional overlay (India · Demand & Supply) ─── */
.regional-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(4, 16, 12, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px clamp(20px, 4vw, 56px);
  overflow-y: auto;
  animation: regOverlayFade .18s ease-out;
}
@keyframes regOverlayFade { from { opacity: 0; } to { opacity: 1; } }
.regional-overlay-sheet {
  position: relative;
  width: 100%; max-width: 1640px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  padding: 22px 28px 28px;
  animation: regOverlayRise .22s cubic-bezier(.22,.61,.36,1);
}
@keyframes regOverlayRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.regional-overlay-head {
  display: flex; gap: 24px; align-items: flex-start;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.regional-overlay-headtext { flex: 1; min-width: 0; }
.regional-overlay-eyebrow {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--solar-yellow);
  margin-bottom: 6px;
}
.regional-overlay-head h2 {
  margin: 0 0 6px; font: 700 24px/1.2 var(--font-sans);
  color: var(--text-hi);
}
.regional-overlay-head p {
  margin: 0; font-size: 13px; color: var(--text-mid); max-width: 96ch;
}
.regional-overlay-close {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; font-weight: 400;
  color: var(--text-mid);
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.regional-overlay-close:hover { background: var(--solar-yellow); color: #042820; border-color: var(--solar-yellow); }
.regional-overlay-body { min-width: 0; }
.ri-panel {
  background: var(--panel); border: 1.5px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
}
.ri-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(132,201,143,0.08), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(255,255,255,0.012) 7px 8px);
}
.ri-panel-head { position: relative; }
.ri-panel-tag {
  font: 700 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--solar-yellow); margin-bottom: 4px;
}
.ri-panel-head h3 { margin: 0 0 4px; font: 600 17px/1.25 var(--font-sans); color: var(--text-hi); }
.ri-panel-head p { margin: 0; font-size: 12.5px; color: var(--text-mid); }
.ri-toggle { display: inline-flex; gap: 2px; margin-top: 8px; padding: 2px; border-radius: 6px; background: rgba(0,0,0,0.25); }
.ri-toggle-btn { padding: 4px 10px; font: 600 11.5px/1.2 var(--font-mono); color: var(--text-mid); border-radius: 4px; }
.ri-toggle-btn.is-on { background: var(--solar-yellow); color: #042820; }
.ri-panel-body { display: flex; gap: 18px; align-items: stretch; flex: 1; min-width: 0; }
.ri-panel-map { position: relative; flex: 1 1 auto; min-width: 0; min-height: 480px; }
.ri-svg { width: 100%; height: 100%; min-height: 480px; max-height: 640px; display: block; }
.ri-hex polygon { transition: stroke .15s, filter .15s; }
.ri-hex.is-hover polygon { filter: brightness(1.18); }
.ri-legend { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 16px; font-size: 11px; flex: 0 0 170px; }
.ri-legend-block { flex: 0 0 auto; min-width: 0; width: 100%; }
.ri-legend-title { display: block; font: 600 11px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-low); margin-bottom: 6px; }
.ri-legend-items { display: flex; flex-direction: column; gap: 3px; color: var(--text); }
.ri-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ri-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex: 0 0 14px; border: 1px solid rgba(255,255,255,0.15); }
.ri-legend-source { display: block; margin-top: 5px; font-style: italic; color: var(--text-low); }
.ri-legend-bubbles { display: flex; align-items: flex-end; gap: 10px; }
.ri-legend-bubbles span { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); color: var(--text); }
.ri-context-pill {
  display: inline-block; margin-top: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(253,206,7,0.12); border: 1px solid rgba(253,206,7,0.35);
  color: var(--text-hi); font: 600 11px/1.2 var(--font-mono);
}
.ri-foot {
  padding: 14px 16px; border-radius: var(--radius);
  background: rgba(132,201,143,0.06); border: 1px dashed rgba(132,201,143,0.25);
  font-size: 13px; color: var(--text-mid); line-height: 1.6;
}
.ri-foot strong { color: var(--text-hi); }

/* Drawer — modal popup */
.ri-drawer-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(4, 16, 12, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px clamp(20px, 4vw, 64px);
  overflow-y: auto;
  animation: regOverlayFade .18s ease-out;
}
.ri-drawer {
  position: relative;
  width: 100%; max-width: 720px;
  display: flex; flex-direction: column;
  background: var(--panel-2); border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 26px 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  animation: regOverlayRise .22s cubic-bezier(.22,.61,.36,1);
}
  background: var(--panel-2); border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px;
  max-height: 92vh; overflow-y: auto;
  animation: riDrawerIn .25s ease-out;
}
@keyframes riDrawerIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.ri-drawer-head { position: relative; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ri-drawer-eyebrow { font: 700 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--solar-yellow); }
.ri-drawer-head h3 { margin: 4px 0 2px; font: 600 19px/1.2 var(--font-sans); color: var(--text-hi); }
.ri-drawer-sub { font-size: 12px; color: var(--text-low); }
.ri-drawer-code { font-family: var(--font-mono); color: var(--text); }
.ri-drawer-close { position: absolute; top: 0; right: 0; width: 28px; height: 28px; border-radius: 6px; background: rgba(0,0,0,0.25); color: var(--text); font-size: 22px; line-height: 26px; }
.ri-drawer-close:hover { background: rgba(0,0,0,0.45); }
.ri-drawer-section h4 { margin: 8px 0 8px; font: 600 12px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-low); }
.ri-kv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.ri-kv { display: flex; flex-direction: column; gap: 1px; }
.ri-kv-label { font-size: 11px; color: var(--text-low); }
.ri-kv b { font: 700 16px/1.2 var(--font-sans); color: var(--text-hi); }
.ri-kv em { font-style: normal; font-size: 11.5px; color: var(--text-low); font-weight: 400; margin-left: 2px; }
.ri-stack-wrap { margin-top: 10px; }
.ri-stack-label { font-size: 11.5px; color: var(--text-low); margin-bottom: 4px; }
.ri-stack { display: flex; height: 12px; border-radius: 4px; overflow: hidden; background: rgba(0,0,0,0.3); }
.ri-stack-seg { height: 100%; }
.ri-stack-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--text); }
.ri-stack-legend span { display: inline-flex; align-items: center; gap: 4px; }
.ri-stack-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.ri-stack-legend em { font-style: normal; color: var(--text-low); margin-left: 3px; }
.ri-projlist { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ri-projlist li { font-size: 12.5px; color: var(--text); padding: 6px 8px; background: rgba(0,0,0,0.18); border-radius: 5px; }
.ri-status { font: 600 10.5px/1 var(--font-mono); padding: 2px 6px; border-radius: 3px; letter-spacing: 0.04em; text-transform: uppercase; }
.ri-status--operational, .ri-status--commissioned { background: rgba(132,201,143,0.2); color: #b6e6bf; }
.ri-status--under-construction { background: rgba(253,206,7,0.18); color: #ffe27a; }
.ri-status--tendered { background: rgba(139,205,210,0.18); color: #b3e5e9; }
.ri-status--announced { background: rgba(140,89,131,0.2); color: #e0c7da; }
.ri-status--commissioning { background: rgba(132,201,143,0.18); color: #b6e6bf; }
.ri-nopipe { font-style: italic; color: var(--text-low); font-weight: 400; font-size: 13px; }
.ri-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ri-tag { padding: 3px 9px; font: 600 11px/1.2 var(--font-mono); border-radius: 999px; background: rgba(253,206,7,0.15); color: var(--text-hi); border: 1px solid rgba(253,206,7,0.35); }
.ri-note { font-size: 11.5px; color: var(--text-low); font-style: italic; margin: 6px 0 0; }
.ri-drawer-foot { font-size: 11px; color: var(--text-low); font-style: italic; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-2); }

/* ═══════════════════════════════════════════════════════════════════════
   India Players & Initiatives — Visual 2
   ═══════════════════════════════════════════════════════════════════════ */
.ip-view { display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }
.ip-toolbar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 10px 14px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ip-toolbar-group { display: inline-flex; align-items: center; gap: 6px; }
.ip-toolbar-label { font: 600 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-low); }
.ip-toolbar-hint { margin-left: auto; font-size: 11.5px; color: var(--text-low); font-style: italic; }
.ip-pill { padding: 5px 12px; font-size: 12px; border-radius: 999px; background: rgba(0,0,0,0.25); color: var(--text-mid); border: 1px solid var(--line); }
.ip-pill.is-on { background: var(--solar-yellow); color: #042820; border-color: var(--solar-yellow); font-weight: 700; }
.ip-select { padding: 5px 8px; background: rgba(0,0,0,0.3); color: var(--text); border: 1px solid var(--line); border-radius: 5px; font-size: 12.5px; }
.ip-tablewrap {
  /* overflow visible (not auto) so the page scrolls and the sticky <thead>
     freezes against the page (.view) scroll — see .mx-tablewrap. */
  overflow: visible;
  cursor: grab;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  scrollbar-width: thin;
}
.ip-tablewrap::-webkit-scrollbar { height: 8px; }
.ip-tablewrap::-webkit-scrollbar-thumb { background: rgba(132,201,143,0.45); border-radius: 4px; }
.ip-tablewrap::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
/* table-layout: fixed (matching the global heat map .mx-table) gives every
   column a definite width, so the dot cells' flex-wrap containers know where
   to wrap. Without it, auto layout leaves cell widths indefinite and the dots
   spill past the cell's right border at certain viewport widths. min-width
   keeps the 11 data columns at ~120px before the table starts to scroll. */
.ip-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  table-layout: fixed; min-width: 1480px;
  /* The table is wider than its wrapper, and .ip-tablewrap uses overflow:visible
     (so the sticky <thead> can freeze against the page scroll). That means the
     part of the table extending past the wrapper has no wrapper background
     behind it — it showed the dark .view --ground as a band on the right whose
     width changed with the viewport. Painting the panel onto the table itself
     covers the whole width, overflow included. radius matches the wrapper so the
     rounded corners are preserved. */
  background: var(--panel);
  border-radius: var(--radius-lg);
}
.ip-colhead-cell {
  padding: 7px 6px; vertical-align: bottom; min-width: 116px;
  background: linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.18)), var(--panel);
  border-bottom: 1.5px solid var(--line);
}
/* Freeze both header rows: group band on top, column heads just below it. */
.ip-grouphead th { position: sticky; top: 0; z-index: 6; }
.ip-colhead th { position: sticky; top: 27px; z-index: 5; }
.ip-col-label { font: 600 12px/1.2 var(--font-sans); color: var(--text-hi); }
.ip-col-sub { font: 400 10.5px/1.3 var(--font-sans); color: var(--text-low); margin-top: 2px; }
.ip-rowhead-corner { background: linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.18)), var(--panel); border-bottom: 1.5px solid var(--line); width: 168px; min-width: 168px; }
.ip-band--players { background: rgba(255,255,255,0.025); }
.ip-band--policymakers { background: rgba(140,89,131,0.07); }
.ip-band--initiatives { background: rgba(132,201,143,0.06); }
/* Separator between the value-chain bands (players → policymakers). */
.ip-band--players + .ip-band--policymakers { border-top: 2px solid rgba(140,89,131,0.40); }

/* Prominent gap between the Initiatives band (top) and the value-chain
   players beneath it — initiatives sit on top of the system, the players are
   the system, so the two groups read as visually distinct (feedback). The
   extra top padding on the following row's cells creates the gap; the thick
   border + shadow draws the dividing line. */
.ip-band--initiatives + .ip-band--players > *,
.ip-band--initiatives + .ip-band--policymakers > * {
  padding-top: 22px;
  border-top: 3px solid rgba(132,201,143,0.55);
  box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.45);
}
.ip-rowhead {
  text-align: left; vertical-align: top; padding: 10px 11px;
  border-right: 1px solid var(--line);
  width: 168px; min-width: 168px;
}
.ip-rowhead-tag { font: 700 9.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-low); margin-bottom: 3px; }
.ip-band--players .ip-rowhead { border-left: 4px solid #2a6a86; }
.ip-band--policymakers .ip-rowhead { border-left: 4px solid #8c5983; }
.ip-band--initiatives .ip-rowhead { border-left: 4px solid #5a8c66; }
.ip-rowhead-title { font: 700 13.5px/1.2 var(--font-sans); color: var(--text-hi); margin-bottom: 3px; }
.ip-rowhead-sub { font-size: 11px; color: var(--text-mid); line-height: 1.45; }
.ip-cell {
  vertical-align: top; padding: 7px 6px;
  border-bottom: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  min-width: 120px; max-width: 188px;
  position: relative;
}
.ip-cell.is-clickable { cursor: pointer; }
.ip-cell.is-clickable:hover { background: rgba(253,206,7,0.07); box-shadow: inset 0 0 0 1px rgba(253,206,7,0.30); }

/* Heatmap mode — initiatives band count tinted by cell density. */
.ip-cell--heat { text-align: center; }
.ip-cell-inner--heat {
  flex-direction: row;
  align-items: center; justify-content: center;
  min-height: 22px;
}
.ip-heat-num { font: 700 13px/1 var(--font-mono); color: var(--text); }
.ip-heat-num.is-dark { color: #1a1a1a; }

/* Keep the heatmap toggle tight to the zoom group on the right. Only the heat
   button carries the auto margin so the right cluster doesn't split apart. */
.ip-toolbar .mx-btn--heat { margin-left: auto; }
.ip-toolbar .tbl-zoom { margin-left: 6px; }
.ip-toolbar .ip-toolbar-hint { margin-left: 12px; }

.ip-cell-inner { display: flex; flex-direction: column; gap: 3px; }
.ip-dots {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding-top: 2px;
}
.ip-dot { width: 11px; height: 11px; }
.ip-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px; border-radius: 5px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 11.5px; line-height: 1.3;
  text-align: left;
  border: 1px solid var(--line-2);
  transition: background .12s, border-color .12s;
}
.ip-chip:hover { background: rgba(253,206,7,0.12); border-color: rgba(253,206,7,0.45); }
.ip-chip.is-anchor .ip-chip-name { font-weight: 700; color: var(--text-hi); }
/* Search highlight — the org picked in the search side panel. */
.ip-chip.is-highlight {
  background: rgba(253,206,7,0.18);
  border-color: #fdce07;
  box-shadow: 0 0 0 2px rgba(253,206,7,0.45);
}
.ip-chip.is-highlight .ip-chip-name { color: var(--text-hi); }
.ip-dot.is-highlight {
  outline: 2px solid #fdce07;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(253,206,7,0.35);
}
.ip-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.ip-chip-name { flex: 1; }
.ip-chip--initiatives { border-left: 3px solid #5a8c66; }
.ip-more {
  display: inline-block; padding: 3px 8px;
  font: 600 11px/1.2 var(--font-mono);
  color: var(--text-mid);
  border: 1px dashed rgba(132,201,143,0.4);
  background: transparent;
  border-radius: 4px;
  margin-top: 2px;
  align-self: flex-start;
}
.ip-more:hover { color: var(--text-hi); border-color: var(--solar-yellow); }
.ip-empty { color: var(--text-low); font-style: italic; font-size: 12px; }
.ip-foot { font-size: 12px; color: var(--text-low); line-height: 1.6; padding: 0 4px; }
.ip-foot em { color: var(--text); font-style: normal; font-family: var(--font-mono); }

/* === Login screen === */
.login-overlay {
  position: fixed; inset: 0;
  background: var(--ground);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.login-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 40px 36px;
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 28px;
}
.login-brand { display: flex; align-items: center; gap: 14px; }
.login-brand-title {
  font-family: var(--font-sans); font-size: 18px; font-weight: 700;
  color: var(--text-hi); letter-spacing: -0.3px;
}
.login-brand-title em { font-style: normal; color: var(--solar-yellow); }
.login-brand-sub { font-size: 12px; color: var(--text-low); margin-top: 2px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.6px;
}
.login-input {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-hi);
  font-family: var(--font-sans); font-size: 14px;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s;
}
.login-input:focus { border-color: var(--solar-yellow); }
.login-error {
  font-size: 13px; color: #f87171;
  background: rgba(248,113,113,0.1);
  border-radius: 5px; padding: 8px 10px;
}
.login-btn {
  background: var(--solar-yellow); color: var(--forest-green);
  border: none; border-radius: 6px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700;
  padding: 11px 0; cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 4px;
}
.login-btn:hover { opacity: 0.88; }

/* ============================================================
   Landing page  (all selectors scoped under .lp-page)
   ============================================================ */
.lp-page {
  font-family: 'Georgia', serif;
  background: var(--ground);
  color: #e8f5ee;
  min-height: 100vh;
  --lp-bg:          #0f2318;
  --lp-bg-card:     #1a3a28;
  --lp-bg-hover:    #1f4530;
  --lp-bg-deep:     #0a1f12;
  --lp-border:      #2d5a3d;
  --lp-border-l:    #3d7a4d;
  --lp-text:        #e8f5ee;
  --lp-text2:       #aed6bc;
  --lp-text3:       #6a9e7a;
  --lp-green:       #5DCAA5;
  --lp-amber:       #EF9F27;
  --lp-amber-bg:    rgba(239,159,39,.12);
  --lp-amber-bdr:   rgba(239,159,39,.3);
  --lp-amber-txt:   #FAC775;
  --lp-purple-bg:   rgba(127,119,221,.12);
  --lp-purple-bdr:  rgba(127,119,221,.3);
  --lp-purple-txt:  #AFA9EC;
  --lp-teal-bg:     rgba(29,158,117,.12);
  --lp-teal-bdr:    rgba(93,202,165,.3);
  --lp-teal-txt:    #9FE1CB;
}

/* Nav */
.lp-nav { background:var(--lp-bg-deep); border-bottom:.5px solid var(--lp-border); padding:10px 40px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; }
.lp-nav-left { display:flex; align-items:center; gap:10px; }
.lp-nav-logo { width:26px; height:26px; background:var(--lp-green); border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--lp-bg); font-family:'Helvetica Neue',sans-serif; flex-shrink:0; }
.lp-nav-brand { font-size:14px; font-weight:600; color:var(--lp-text); font-family:'Helvetica Neue',sans-serif; }
.lp-nav-sub { font-size:11px; color:var(--lp-text3); font-family:'Helvetica Neue',sans-serif; border-left:.5px solid var(--lp-border); padding-left:12px; margin-left:4px; }
.lp-nav-stats { display:flex; gap:24px; }
.lp-ns { text-align:right; }
.lp-ns-n { font-size:15px; font-weight:700; color:var(--lp-green); font-family:'Helvetica Neue',sans-serif; display:block; line-height:1; }
.lp-ns-l { font-size:8px; color:var(--lp-text3); font-family:'Helvetica Neue',sans-serif; text-transform:uppercase; letter-spacing:.07em; display:block; margin-top:2px; }

/* Hero */
.lp-hero { padding:52px 40px 44px; border-bottom:.5px solid var(--lp-border); display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; }
.lp-eyebrow { font-size:10px; font-family:'Helvetica Neue',sans-serif; letter-spacing:.1em; color:var(--lp-text3); text-transform:uppercase; margin-bottom:14px; }
.lp-hero-title { font-size:42px; font-weight:400; line-height:1.1; margin-bottom:18px; letter-spacing:-.01em; }
.lp-hero-title em { font-style:italic; color:var(--lp-green); }
.lp-hero-desc { font-size:15px; color:var(--lp-text2); line-height:1.65; margin-bottom:28px; font-family:'Helvetica Neue',sans-serif; }
.lp-btns { display:flex; gap:10px; }
.lp-btn-p { font-size:13px; font-family:'Helvetica Neue',sans-serif; font-weight:500; padding:9px 20px; border-radius:6px; background:var(--lp-green); color:var(--lp-bg); border:none; cursor:pointer; transition:opacity .15s; }
.lp-btn-p:hover { opacity:.85; }
.lp-btn-g { font-size:13px; font-family:'Helvetica Neue',sans-serif; padding:9px 20px; border-radius:6px; background:transparent; color:var(--lp-text2); border:.5px solid var(--lp-border-l); cursor:pointer; transition:border-color .15s,color .15s; text-decoration:none; display:inline-block; }
.lp-btn-g:hover { border-color:var(--lp-green); color:var(--lp-green); opacity:1; text-decoration:none; }

/* Pillars */
.lp-pillars { display:flex; flex-direction:column; gap:10px; }
.lp-pillar { background:var(--lp-bg-card); border:.5px solid var(--lp-border); border-radius:10px; padding:16px 18px; display:flex; gap:14px; align-items:flex-start; }
.lp-p-icon { width:30px; height:30px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; margin-top:1px; }
.lp-p-icon.lp-g { background:var(--lp-teal-bg); border:.5px solid var(--lp-teal-bdr); }
.lp-p-icon.lp-p { background:var(--lp-amber-bg); border:.5px solid var(--lp-amber-bdr); }
.lp-p-name { font-size:13px; font-weight:600; font-family:'Helvetica Neue',sans-serif; color:var(--lp-text); margin-bottom:3px; }
.lp-p-tag { display:inline-block; font-size:9px; font-family:'Helvetica Neue',sans-serif; padding:2px 8px; border-radius:8px; margin-bottom:7px; font-weight:500; letter-spacing:.03em; }
.lp-p-tag.lp-g { background:var(--lp-teal-bg); color:var(--lp-teal-txt); border:.5px solid var(--lp-teal-bdr); }
.lp-p-tag.lp-p { background:var(--lp-amber-bg); color:var(--lp-amber-txt); border:.5px solid var(--lp-amber-bdr); }
.lp-p-desc { font-size:12px; font-family:'Helvetica Neue',sans-serif; color:var(--lp-text3); line-height:1.5; }

/* Main / grid */
.lp-main { padding:36px 40px 52px; }
.lp-sec-label { font-size:10px; font-family:'Helvetica Neue',sans-serif; font-weight:600; letter-spacing:.08em; color:var(--lp-text3); text-transform:uppercase; margin-bottom:14px; }
.lp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:32px; }

/* Cards */
.lp-card { background:var(--lp-bg-card); border:.5px solid var(--lp-border); border-radius:10px; overflow:hidden; cursor:pointer; transition:border-color .15s,background .15s; display:flex; flex-direction:column; }
.lp-card:hover { border-color:var(--lp-border-l); background:var(--lp-bg-hover); }
.lp-card.lp-regional { position:relative; }
.lp-card.lp-regional::after { content:'India deep-dive'; position:absolute; top:8px; right:8px; font-size:8px; font-family:'Helvetica Neue',sans-serif; font-weight:500; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:6px; background:var(--lp-teal-bg); color:var(--lp-teal-txt); border:.5px solid var(--lp-teal-bdr); }
.lp-preview { height:80px; background:#1a3a28; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lp-plabel { font-size:8px; font-family:'Helvetica Neue',sans-serif; color:#6a9e7a; position:absolute; top:7px; left:9px; letter-spacing:.06em; text-transform:uppercase; }
.lp-cbody { padding:13px 15px 14px; display:flex; flex-direction:column; flex:1; }
.lp-cnum { font-size:9px; font-family:'Helvetica Neue',sans-serif; color:var(--lp-text3); margin-bottom:3px; letter-spacing:.04em; }
.lp-cname { font-size:13px; font-weight:600; font-family:'Helvetica Neue',sans-serif; color:var(--lp-text); margin-bottom:5px; line-height:1.3; }
.lp-cdesc { font-size:11px; font-family:'Helvetica Neue',sans-serif; color:var(--lp-text3); line-height:1.5; margin-bottom:10px; flex:1; }
.lp-cfooter { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.lp-tags { display:flex; gap:4px; flex-wrap:wrap; }
.lp-tag { font-size:9px; font-family:'Helvetica Neue',sans-serif; padding:2px 7px; border-radius:7px; font-weight:500; }
.lp-tag.lp-g { background:var(--lp-teal-bg); color:var(--lp-teal-txt); border:.5px solid var(--lp-teal-bdr); }
.lp-tag.lp-p { background:var(--lp-amber-bg); color:var(--lp-amber-txt); border:.5px solid var(--lp-amber-bdr); }
.lp-tag.lp-b { background:var(--lp-purple-bg); color:var(--lp-purple-txt); border:.5px solid var(--lp-purple-bdr); }
.lp-clink { font-size:11px; font-family:'Helvetica Neue',sans-serif; font-weight:500; color:var(--lp-green); white-space:nowrap; flex-shrink:0; }

/* About */
.lp-about { background:var(--lp-bg-card); border:.5px solid var(--lp-border); border-radius:10px; padding:20px 24px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.lp-a-title { font-size:12px; font-weight:600; font-family:'Helvetica Neue',sans-serif; color:var(--lp-text); margin-bottom:6px; }
.lp-a-desc { font-size:11px; font-family:'Helvetica Neue',sans-serif; color:var(--lp-text3); line-height:1.6; }
.lp-a-right { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.lp-pills { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.lp-pill { font-size:11px; font-weight:500; font-family:'Helvetica Neue',sans-serif; padding:4px 12px; border-radius:8px; background:var(--lp-bg); border:.5px solid var(--lp-border-l); color:var(--lp-text2); text-decoration:none; }
.lp-pill:hover { color:var(--lp-green); border-color:var(--lp-green); opacity:1; text-decoration:none; }
.lp-a-date { font-size:10px; font-family:'Helvetica Neue',sans-serif; color:var(--lp-text3); text-align:right; }

/* ───────────────────────────────────────────────────────────────────────────
   Landing page — top nav, row cards, footer
─────────────────────────────────────────────────────────────────────────── */
/* Top-right nav links in the landing header */
.lp-page .app-header {
  display: flex; align-items: center; justify-content: space-between;
}
.lp-topnav { display: flex; align-items: center; gap: 22px; }
.lp-topnav-link {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--lp-text2);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
  text-decoration: none;
  transition: color 0.15s;
}
.lp-topnav-link:hover { color: var(--lp-green); }

/* Hero collapses to single column when the pillar cards aren't there.
   No max-width so the title and description span the full window. */
.lp-hero.lp-hero--single { grid-template-columns: 1fr; }

/* Section labels — emphasis for "Global maps" / "Regional maps" */
.lp-sec-label--regional { margin-top: 28px; }

/* 3-column tile grid: globals on the first row, regionals on the second */
.lp-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 1100px) {
  .lp-stack { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .lp-stack { grid-template-columns: 1fr; }
}

/* Tile card — preview on top, content below */
.lp-row {
  display: flex;
  flex-direction: column;
  background: var(--lp-bg-card);
  border: .5px solid var(--lp-border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  position: relative;
}
.lp-row:hover { border-color: var(--lp-border-l); background: var(--lp-bg-hover); transform: translateY(-1px); }

/* Visual preview area — top section of the tile */
.lp-row-preview {
  background: var(--lp-bg-deep);
  border-bottom: .5px solid var(--lp-border);
  padding: 18px 16px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 120px;
}
.lp-row-preview > svg { display: block; max-width: 100%; height: auto; }
.lp-row-preview .lp-plabel {
  position: absolute; top: 8px; left: 10px;
  font-size: 9px; font-family: var(--font-mono);
  font-weight: 600; letter-spacing: 0.08em;
  color: var(--lp-text3); text-transform: uppercase;
}

/* Content area below preview */
.lp-row-body {
  padding: 16px 18px 16px;
  display: flex; flex-direction: column;
  position: relative;
  gap: 8px;
  flex: 1;
}
.lp-row-title {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 17px; font-weight: 600;
  color: var(--lp-text);
  letter-spacing: -0.005em;
  padding-right: 44px; /* leave room for the number badge */
  line-height: 1.25;
}
.lp-row-desc {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 12.5px; line-height: 1.55;
  color: var(--lp-text2);
}
.lp-row-foot {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: auto;
  padding-top: 6px;
}
.lp-row-foot .lp-clink { margin-left: auto; }

/* India "deep-dive" corner tag for regional tiles — anchor to preview corner */
.lp-row--regional::after {
  content: 'India deep-dive';
  position: absolute; top: 8px; right: 8px;
  font-size: 8px; font-family: 'Helvetica Neue', sans-serif;
  font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 6px;
  background: var(--lp-teal-bg); color: var(--lp-teal-txt);
  border: .5px solid var(--lp-teal-bdr);
}

/* Footer — © GEA on left, About / Contact on right */
.lp-footer {
  margin-top: 28px;
  padding: 18px 0 0;
  border-top: .5px solid var(--lp-border);
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 11px;
  color: var(--lp-text3);
}
.lp-footer-right { display: flex; gap: 20px; }
.lp-footer-right a { color: var(--lp-text2); text-decoration: none; transition: color .15s; }
.lp-footer-right a:hover { color: var(--lp-green); }

/* ───────────────────────────────────────────────────────────────────────────
   Persona cards — "Who it's for" row + detail modal
─────────────────────────────────────────────────────────────────────────── */
.lp-persona-section { margin-bottom: 34px; }

.lp-persona-stack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { .lp-persona-stack { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .lp-persona-stack { grid-template-columns: 1fr; } }

.lp-persona-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
  background: var(--lp-bg-card);
  border: .5px solid var(--lp-border);
  border-radius: 10px;
  padding: 18px 18px 16px;
  cursor: pointer;
  font-family: 'Helvetica Neue', sans-serif;
  transition: border-color .15s, background .15s, transform .1s;
}
.lp-persona-card:hover {
  border-color: var(--lp-border-l);
  background: var(--lp-bg-hover);
  transform: translateY(-1px);
}
.lp-persona-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--lp-teal-bg);
  border: .5px solid var(--lp-teal-bdr);
  color: var(--lp-green);
}
.lp-persona-label {
  font-size: 14.5px; font-weight: 600;
  color: var(--lp-text);
  line-height: 1.25;
}
.lp-persona-q {
  font-size: 12px; line-height: 1.5;
  color: var(--lp-text2);
  flex: 1;
}
.lp-persona-cue {
  font-size: 11.5px; font-weight: 500;
  color: var(--lp-green);
  margin-top: 2px;
}

/* Detail modal */
.persona-scrim {
  position: fixed; inset: 0;
  background: rgba(6, 18, 12, .68);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px 20px;
  z-index: 1000;
  animation: persona-fade .12s ease-out;
}
@keyframes persona-fade { from { opacity: 0; } to { opacity: 1; } }

.persona-modal {
  position: relative;
  width: 100%; max-width: 640px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--lp-bg-card);
  border: .5px solid var(--lp-border-l);
  border-radius: 14px;
  padding: 26px 28px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  animation: persona-pop .14s cubic-bezier(.2, .7, .3, 1);
}
@keyframes persona-pop {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.persona-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lp-bg-deep);
  border: .5px solid var(--lp-border);
  border-radius: 8px;
  color: var(--lp-text2);
  font-size: 13px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.persona-modal-close:hover { color: var(--lp-text); border-color: var(--lp-border-l); }

.persona-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding-right: 40px;
  margin-bottom: 18px;
}
.persona-modal-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--lp-teal-bg);
  border: .5px solid var(--lp-teal-bdr);
  color: var(--lp-green);
  flex-shrink: 0;
}
.persona-modal-head h3 {
  font-size: 19px; font-weight: 600;
  color: var(--lp-text);
  margin: 0;
}
.persona-modal-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--lp-text3);
  padding-bottom: 10px;
  border-bottom: .5px solid var(--lp-border);
  margin-bottom: 4px;
}

.persona-actions { display: flex; flex-direction: column; }
.persona-action {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 16px 0;
  border-bottom: .5px solid var(--lp-border);
}
.persona-action:last-child { border-bottom: none; padding-bottom: 2px; }
.persona-action-main { flex: 1; min-width: 0; }
.persona-action-title {
  font-size: 14px; font-weight: 600;
  color: var(--lp-text);
  line-height: 1.3; margin-bottom: 4px;
}
.persona-action-desc {
  font-size: 12.5px; line-height: 1.55;
  color: var(--lp-text2);
}
.persona-action-maps {
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0; width: 220px;
}
.persona-map-tag {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
  color: var(--lp-green);
  background: var(--lp-bg-deep);
  border: .5px solid var(--lp-teal-bdr);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.persona-map-tag:hover {
  background: var(--lp-teal-bg);
  border-color: var(--lp-green);
  transform: translateY(-1px);
}
.persona-map-arrow { margin-left: auto; flex-shrink: 0; }

@media (max-width: 560px) {
  .persona-action { flex-direction: column; gap: 10px; }
  .persona-action-maps { width: 100%; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Value Chain Map (vcm)
─────────────────────────────────────────────────────────────────────────── */
.vcm-view { display: flex; flex-direction: column; gap: 18px; padding-bottom: 24px; }

/* Diagram + legend layout — legend pinned beside the energy-system band */
.vcm-layout {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 18px;
}
.vcm-layout > .vcm-diagram { flex: 1 1 auto; min-width: 0; }
.vcm-sidebar-col {
  flex: 0 0 190px;
  position: relative;
}
/* Anchor the legend at 34% from the top of the column (= y=245 in the
   SVG viewBox of height 720), i.e. flush with the top of the energy-system
   band. align-items: stretch makes this column the same height as the SVG. */
.vcm-sidebar-col > .vcm-legend-wrap {
  position: absolute;
  top: 34%;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 1100px) {
  .vcm-layout { flex-direction: column; }
  .vcm-sidebar-col { flex: 0 0 auto; }
  .vcm-sidebar-col > .vcm-legend-wrap {
    position: static;
    flex-direction: row;
    gap: 12px;
  }
}

/* Compact pillar cards — icon + name only; description on hover */
.vcm-pillar {
  background: var(--panel);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex; gap: 9px; align-items: center;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  user-select: none;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  position: relative;
}
.vcm-pillar:hover { background: var(--panel-2); }
.vcm-pillar:focus-visible { outline: 2px solid var(--solar-yellow); outline-offset: 2px; }

.vcm-pillar--grids    { border: 2px dashed #84c98f; }
.vcm-pillar--powering { border: 2px solid var(--solar-yellow); }
.vcm-pillar--grids.is-active {
  background: linear-gradient(135deg, rgba(132,201,143,0.18), rgba(132,201,143,0.08));
  box-shadow: 0 0 0 1px #84c98f, 0 4px 14px rgba(132,201,143,0.25);
}
.vcm-pillar--powering.is-active {
  background: linear-gradient(135deg, rgba(253,206,7,0.18), rgba(253,206,7,0.06));
  box-shadow: 0 0 0 1px var(--solar-yellow), 0 4px 14px rgba(253,206,7,0.22);
}

.vcm-pillar-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.vcm-pillar--grids .vcm-pillar-icon {
  background: rgba(132,201,143,0.15); border: 1px solid rgba(132,201,143,0.4);
}
.vcm-pillar--powering .vcm-pillar-icon {
  background: rgba(253,206,7,0.15); border: 1px solid rgba(253,206,7,0.4);
}

.vcm-pillar-name {
  font-size: 12.5px; font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.vcm-pillar-state {
  margin-top: 4px;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-low);
}
.vcm-pillar.is-active .vcm-pillar-state {
  color: var(--solar-yellow);
}
.vcm-legend-hint {
  font-size: 11px;
  color: var(--text-low);
  font-style: italic;
  margin-top: 8px;
  padding: 0 2px;
  line-height: 1.4;
}
.vcm-india-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  margin-bottom: 10px;
  color: var(--text-hi, #e8f5ee);
  background: rgba(132,201,143,0.10);
  border: 1px solid rgba(132,201,143,0.35);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.vcm-india-link:hover {
  background: rgba(132,201,143,0.18);
  border-color: var(--solar-yellow, #fdce07);
}

/* Small ? hint used for methodology hovers across the app */
.mhelp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-left: 6px;
  font: 700 10px/1 var(--font-mono);
  color: var(--text-mid);
  background: rgba(132,201,143,0.18);
  border: 1px solid rgba(132,201,143,0.4);
  border-radius: 50%;
  cursor: help;
  user-select: none;
  vertical-align: middle;
}
.mhelp:hover {
  color: var(--text-hi);
  background: rgba(132,201,143,0.32);
}
/* Clickable ? bubble — deep-links to the Methodology tab. */
button.mhelp--link {
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-mono);
}
button.mhelp--link:hover {
  color: var(--text-hi);
  background: rgba(132,201,143,0.42);
  border-color: var(--mint-green);
}

/* Hover tooltip — appears to the left, toward the diagram */
.vcm-pillar-tooltip {
  display: none;
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  background: var(--panel-2, #16332a);
  border: 1px solid rgba(132,201,143,0.32);
  border-radius: 8px;
  padding: 11px 13px;
  z-index: 30;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  pointer-events: none;
}
.vcm-pillar:hover .vcm-pillar-tooltip,
.vcm-pillar:focus-visible .vcm-pillar-tooltip { display: block; }

.vcm-pillar-tooltip-tag {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.05em;
  padding: 2px 9px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.vcm-pillar--grids    .vcm-pillar-tooltip-tag {
  background: rgba(132,201,143,0.15); color: #9FE1CB; border: 1px solid rgba(132,201,143,0.35);
}
.vcm-pillar--powering .vcm-pillar-tooltip-tag {
  background: rgba(253,206,7,0.15);   color: #FAC775; border: 1px solid rgba(253,206,7,0.35);
}
.vcm-pillar-tooltip-desc {
  font-size: 12px; line-height: 1.5;
  color: var(--text-mid, #aed6bc);
}

/* On the narrow-screen fallback, drop the tooltip below the card so it
   doesn't shoot off-screen. */
@media (max-width: 1100px) {
  .vcm-pillar-tooltip {
    right: auto; left: 0;
    top: calc(100% + 8px);
    transform: none;
  }
}

/* Diagram container — let SVG breathe, no white box */
.vcm-diagram {
  background: transparent;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
/* SVG fills the container width. Aspect ratio (~2:1) keeps it from
   getting too tall — at typical view widths (~1200-1400px) the natural
   rendered height is ~600-700px, which fits a 1080p viewport without
   scrolling once the header / tabs / pillar cards above are accounted for. */
.vcm-diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Node hover & dim states */
.vcm-node rect { transition: opacity 0.18s, transform 0.1s; }
.vcm-node:hover rect { filter: brightness(1.05); }
.vcm-node.is-dim { opacity: 0.22; }
.vcm-node.is-dim:hover { opacity: 0.55; }

/* Modal popup */
.vcm-modal-scrim {
  position: fixed; inset: 0;
  background: rgba(4,12,8,0.78);
  backdrop-filter: blur(3px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  animation: vcmFadeIn 0.15s ease-out;
}
@keyframes vcmFadeIn { from { opacity: 0; } to { opacity: 1; } }
.vcm-modal {
  width: min(620px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  padding: 28px 32px 32px;
  position: relative;
}
.vcm-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: var(--text-mid, #aed6bc);
  font-size: 22px; line-height: 1;
  cursor: pointer;
}
.vcm-modal-close:hover { color: var(--solar-yellow); border-color: var(--solar-yellow); }
.vcm-modal-pillar {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 12px;
  margin-bottom: 14px;
}
.vcm-modal-pillar--grids    { background: rgba(132,201,143,0.18); color: #84c98f; border: 1px solid rgba(132,201,143,0.45); }
.vcm-modal-pillar--powering { background: rgba(253,206,7,0.16);   color: #fdce07; border: 1px solid rgba(253,206,7,0.45); }
.vcm-modal-pillar--both     { background: linear-gradient(135deg, rgba(132,201,143,0.18) 50%, rgba(253,206,7,0.16) 50%); color: #e8f5ee; border: 1px solid rgba(255,255,255,0.18); }
.vcm-modal-title {
  font-size: 24px; font-weight: 700;
  color: var(--text, #e8f5ee);
  margin: 0 0 16px;
  line-height: 1.25;
}
.vcm-modal-desc {
  font-size: 14px;
  color: var(--text-mid, #aed6bc);
  line-height: 1.65;
  margin: 0 0 12px;
}
.vcm-modal-desc:last-child { margin-bottom: 0; }
.vcm-modal-pill-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.vcm-modal-pill-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-mid, #aed6bc);
  margin-bottom: 10px;
}
.vcm-modal-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.vcm-modal-pills .ip-chip {
  cursor: default;
}
.vcm-modal-pills .ip-chip:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--line-2);
}

/* Sub-boxes shown under specific Energy Ecosystem nodes (Policymakers,
   Commercial banks) — labelled chips listed inside the node detail modal. */
.vcm-modal-subboxes {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.vcm-modal-subboxes-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-mid, #aed6bc);
  margin-bottom: 10px;
}
.vcm-modal-subboxes-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.vcm-modal-subbox {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(132,201,143,0.10);
  border: 1px solid rgba(132,201,143,0.32);
  color: #e8f5ee;
  font-size: 13px; font-weight: 500;
  line-height: 1.2;
}

/* Pillar-filter legend variant — same chip layout, but the dot uses pillar
   colours and clicking dims non-matching columns rather than orgs. */
.mx-legend--pillars { row-gap: 4px; }

/* Pillar-based column dimming — applied to <th>/<td> when a pillar filter is
   on and the column doesn't belong to that pillar. */
.mx-colhead-cell.is-pillar-dim,
.mx-grouphead-cell.is-pillar-dim,
.mx-cell.is-pillar-dim,
.ip-colhead-cell.is-pillar-dim,
.ip-grouphead-cell.is-pillar-dim,
.ip-cell.is-pillar-dim {
  opacity: 0.30;
  filter: grayscale(0.30);
  transition: opacity .12s, filter .12s;
}

/* India Heat Map group header row — mirrors .mx-grouphead so the column-
   group bands (Power production / Grids / Power demand / Overarching) read
   the same in both the global and India players & initiatives tables. */
.ip-grouphead th {
  text-align: left;
  padding: 8px 11px 7px;
  font: 600 11px/1.1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.ip-grouphead-cell { position: relative; }

/* ─────────────────── Feedback bar (under every page) ─────────────────── */
.page-feedback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding: 16px;
  border-top: 1px solid var(--line);
}
.page-feedback-text {
  color: var(--text-mid);
  font-size: 13px;
}
.page-feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: var(--accent);
  color: var(--forest-green);
  font-weight: 700;
  font-size: 13px;
  border-radius: 999px;
  text-decoration: none;
  transition: filter 0.15s, transform 0.15s;
}
.page-feedback-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.page-feedback-btn::before { content: '💬'; font-size: 14px; }

/* ───────────────────────── Methodology view ───────────────────────── */
.mth { max-width: 1100px; }

.mth-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 880px) {
  .mth-layout { grid-template-columns: 1fr; }
  .mth-toc { position: static !important; }
}

/* Sticky table of contents */
.mth-toc {
  position: sticky;
  top: 12px;
  font-size: 13px;
}
.mth-toc-head {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint-green);
  margin-bottom: 10px;
}
.mth-toc ol {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: mth;
  border-left: 1px solid var(--line);
}
.mth-toc li { counter-increment: mth; }
.mth-toc-link {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  padding: 6px 12px;
  color: var(--text-mid);
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.mth-toc-link::before {
  content: counter(mth, decimal-leading-zero) '  ';
  color: var(--mint-green);
  opacity: 0.6;
  font-family: var(--font-mono);
  font-size: 11px;
}
.mth-toc-link:hover {
  color: var(--text-hi);
  border-left-color: var(--mint-green);
}

/* Sections */
.mth-body { min-width: 0; }
.mth-section {
  padding: 18px 20px;
  margin-bottom: 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  scroll-margin-top: 16px;
  transition: box-shadow 0.4s, border-color 0.4s;
}
.mth-section.is-flash {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 2px var(--accent-soft), 0 0 22px rgba(253,206,7,0.25);
}
.mth-section-title {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 18px;
  color: var(--text-hi);
}
.mth-lead { margin: 0 0 12px; color: var(--text); line-height: 1.6; }
.mth-para { margin: 0 0 12px; color: var(--text-mid); line-height: 1.6; font-size: 14px; }

/* Subheading within a section */
.mth-sub {
  margin: 16px 0 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-hi);
}
.mth-sub:first-of-type { margin-top: 4px; }

/* Bullet lists */
.mth-list {
  margin: 4px 0 12px;
  padding-left: 20px;
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.6;
}
.mth-list li { margin: 4px 0; }

/* Label introducing a group of definitions */
.mth-defs-label {
  margin: 12px 0 4px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mid);
}

/* Source-citation line */
.mth-source {
  margin: 0 0 12px;
  color: var(--text-mid);
  font-size: 12px;
  line-height: 1.55;
  font-style: italic;
  opacity: 0.85;
}

/* Categorisation definition lists */
.mth-defs { margin: 4px 0 12px; }
.mth-def {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px dashed var(--line);
}
.mth-def:first-child { border-top: none; }
.mth-def dt {
  font-weight: 700;
  color: var(--text-hi);
  font-size: 13px;
}
.mth-def dd {
  margin: 0;
  color: var(--text-mid);
  font-size: 13px;
  line-height: 1.55;
}
@media (max-width: 620px) {
  .mth-def { grid-template-columns: 1fr; gap: 2px; }
}

.mth-foot {
  margin-top: 24px;
  color: var(--text-mid);
  font-size: 13px;
}
.mth-foot a { color: var(--accent); }

/* ===========================================================================
   Guided tour — launch button, dimming overlay, spotlight, popover
   =========================================================================== */

/* "Take a tour" button in the header. margin-left:auto pushes it (and the GEA
   logo that follows) to the right of the brand. */
.tour-launch {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
  background: rgba(253, 206, 7, 0.12);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tour-launch:hover {
  background: rgba(253, 206, 7, 0.22);
  border-color: var(--solar-yellow);
}
.tour-launch svg { color: var(--solar-yellow); }
/* In the in-app header, the tour button's auto margin pushes the right-hand
   group over; neutralise the logo's own auto margin so they stay adjacent. */
.app-header > .tour-launch + .header-gea-logo { margin-left: 0; }

/* Root layer sits above drawer / search panel. */
.tour-root {
  position: fixed;
  inset: 0;
  z-index: 4000;
}

/* Catches clicks so the page underneath stays inert during the tour. */
.tour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 40, 32, 0.45);
}

/* Spotlight ring around the highlighted element. The huge box-shadow darkens
   everything outside the ring, so the target reads as "lit up". */
.tour-spotlight {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(4, 40, 32, 0.62);
  border: 2px solid var(--solar-yellow);
  pointer-events: none;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

/* Popover with the step text and controls. */
.tour-pop {
  position: fixed;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: var(--panel-2);
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  padding: 20px 20px 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-family: var(--font-sans);
}
.tour-pop--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
}

.tour-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  color: var(--text-low);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.tour-x:hover { color: var(--text-hi); background: rgba(255, 255, 255, 0.06); }

.tour-step-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint-green);
  margin-bottom: 8px;
}
.tour-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-hi);
  line-height: 1.2;
  padding-right: 22px;
}
.tour-body {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-mid);
}

.tour-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.tour-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-70);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.tour-dot:hover { transform: scale(1.25); }
.tour-dot.is-active { background: var(--solar-yellow); }

.tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tour-actions-right { display: flex; gap: 8px; }

.tour-btn {
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tour-btn--primary {
  background: var(--solar-yellow);
  border: 1px solid var(--solar-yellow);
  color: var(--ground);
}
.tour-btn--primary:hover { background: #ffd838; border-color: #ffd838; }
.tour-btn--ghost {
  background: none;
  border: 1px solid var(--line);
  color: var(--text-mid);
}
.tour-btn--ghost:hover { border-color: var(--mint-green); color: var(--text-hi); }