/**
 * @file map-renewables.css
 * @purpose Style solar/wind mode previews, legends, and cell details.
 * @dependencies map-mode-legends.css, shared layer-menu and project-details styles.
 * @public Renewable classes used by map.html and map-renewables.js.
 * @sideEffects Presentation changes only for renewable modes and panels.
 */

.layer-swatch-solar {
  background:
    radial-gradient(circle at 72% 28%, #fff6b5 0 13%, transparent 14%),
    linear-gradient(
      135deg,
      #30123b,
      #2c7be5 24%,
      #18b7d5 37%,
      #20c987 49%,
      #b8d62e 64%,
      #f1d32b 76%,
      #f89c20 86%,
      #c1121f
    );
}

.layer-swatch-wind {
  background:
    repeating-radial-gradient(ellipse at 70% 65%, transparent 0 5px, rgba(255, 255, 255, 0.4) 6px 7px, transparent 8px 12px),
    linear-gradient(
      135deg,
      #30123b,
      #2c7be5 24%,
      #18b7d5 37%,
      #20c987 49%,
      #b8d62e 64%,
      #f1d32b 76%,
      #f89c20 86%,
      #c1121f
    );
}

/* Mode visibility stays coupled to the existing map-tool state. */
.renewable-legend { display: none; }

body[data-map-tool="solar"] .renewable-legend-solar,
body[data-map-tool="wind"] .renewable-legend-wind {
  display: block;
}

.renewable-legend-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.renewable-legend-heading strong {
  font-size: 1rem;
}

.renewable-legend-heading span { color: #d4dce1; font-size: .7rem; white-space: nowrap; }
.renewable-legend-metric { display: block; margin-top: .4rem; color: #d4dce1; font-size: .75rem; }

.renewable-gradient {
  height: 1.25rem;
  margin-top: 0.64rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2px;
}

.renewable-gradient-solar {
  background: linear-gradient(
    90deg,
    #30123b,
    #4145ab 10%,
    #2c7be5 20%,
    #18b7d5 30%,
    #20c987 40%,
    #63cc3b 50%,
    #b8d62e 60%,
    #f1d32b 70%,
    #f89c20 80%,
    #ec4d22 90%,
    #c1121f
  );
}

.renewable-gradient-wind {
  background: linear-gradient(
    90deg,
    #30123b,
    #4145ab 10%,
    #2c7be5 20%,
    #18b7d5 30%,
    #20c987 40%,
    #63cc3b 50%,
    #b8d62e 60%,
    #f1d32b 70%,
    #f89c20 80%,
    #ec4d22 90%,
    #c1121f
  );
}

/* Labels align with their actual percentile stops, including the wider end bands. */
.renewable-gradient-labels { position: relative; height: 1.1rem; margin-top: .28rem; color: #fff; font-size: .65rem; }
.renewable-gradient-labels span { position: absolute; top: 0; transform: translateX(-50%); }
.renewable-gradient-labels [data-renewable-stop-index="0"] { left: 0; transform: none; }
.renewable-gradient-labels [data-renewable-stop-index="3"] { left: 30%; }
.renewable-gradient-labels [data-renewable-stop-index="5"] { left: 50%; }
.renewable-gradient-labels [data-renewable-stop-index="7"] { left: 70%; }
.renewable-gradient-labels [data-renewable-stop-index="10"] { right: 0; transform: none; }

.renewable-legend-status,
.renewable-legend-note {
  display: block;
  margin-top: 0.58rem;
  color: #d4dce1;
  font-size: .75rem;
  line-height: 1.4;
}

.renewable-legend-status {
  color: #fff;
}

.renewable-details {
  z-index: 7;
  color: #20312a;
}

.renewable-summary {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  padding: 0.35rem 0 0.95rem;
  border-bottom: 1px solid #dce5df;
}

.renewable-summary > strong {
  padding: 0.65rem 0.72rem;
  border: 1px solid #b9d2c6;
  border-radius: 0.75rem;
  color: #173a2b;
  font-size: 0.78rem;
  line-height: 1.2;
  text-align: center;
  background: #eff6f2;
}

.renewable-summary-solar > strong {
  border-color: #e9c883;
  color: #7f4a13;
  background: #fff7df;
}

.renewable-summary-wind > strong {
  border-color: #91c9d1;
  color: #13566b;
  background: #eaf7f8;
}

.renewable-summary b,
.renewable-summary small {
  display: block;
}

.renewable-summary b {
  color: #22342b;
  font-size: 0.7rem;
}

.renewable-summary small {
  margin-top: 0.2rem;
  color: #68786f;
  font-size: 0.55rem;
  line-height: 1.4;
}

.renewable-facts {
  display: grid;
  grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1.2fr);
  gap: 0.48rem 0.8rem;
  margin: 0.9rem 0 0;
  font-size: 0.6rem;
}

.renewable-facts dt {
  color: #6a7971;
}

.renewable-facts dd {
  margin: 0;
  color: #273b31;
  font-weight: 650;
}

.renewable-note {
  margin: 0.78rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid #dce5df;
  color: #66776e;
  font-size: 0.54rem;
  line-height: 1.5;
}

@media (max-width: 680px) {
  .renewable-summary {
    grid-template-columns: 1fr;
  }
}