/* Energy Model page components, layered on top of the shared .samx system
 * (accelerator-model.scss loads first). Page-only pieces: the one-line hero
 * title, and the supply-demand gap ledger that gives the page its signature
 * section.
 */
/* "Energy Model" is short enough for a single line; the shared spans stack. */
.samx-energy .samx-hero__title-line,
.samx-energy .samx-hero__title-accent {
  display: inline;
}

/* Keep the shared four-across strip with every value on a single line: the
 * Tracking chip gets a wider track and a slightly smaller value so
 * "30+ OEMs; 60+ BAs" fits whole, and minmax(0, fr) keeps any track from
 * ever growing past its share. Wrapping and centering stay as a graceful
 * fallback that never triggers at these sizes. Below the shared strip's
 * own two-column breakpoint the chips are wide enough as-is. */
.samx-energy .samx-strip dd {
  white-space: normal;
}
.samx-energy .samx-strip .samx-strip__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1320px) {
  .samx-energy .samx-strip {
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 0.95fr) minmax(0, 1.2fr) minmax(0, 0.87fr);
  }
  .samx-energy .samx-strip .samx-strip__item {
    padding: 12px;
  }
  .samx-energy .samx-strip dt {
    font-size: 10.5px;
    letter-spacing: 0.3px;
  }
  .samx-energy .samx-strip dd {
    font-size: 18px;
  }
  .samx-energy .samx-strip .samx-strip__item:nth-child(3) dd {
    font-size: 15.5px;
  }
}
/* ==========================================================================
   The gap ledger: projected load vs firm capacity, market by market
   ========================================================================== */
.samx-gapgrid {
  margin-top: 30px;
  padding: clamp(1.25rem, 2.6vw, 2rem);
  background: var(--samx-grad-card);
  border: 1px solid var(--samx-border);
  border-radius: 14px;
}

.samx-gapgrid__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-bottom: 22px;
}

.samx-gapgrid__key {
  position: relative;
  padding-left: 20px;
  font-family: var(--samx-ft-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--samx-tx-muted);
}
.samx-gapgrid__key::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  transform: translateY(-50%);
}

.samx-gapgrid__key--cap::before {
  background: linear-gradient(180deg, #1e6a55, #175243);
}

.samx-gapgrid__key--dem::before {
  background: linear-gradient(180deg, rgba(247, 176, 65, 0.95), rgba(224, 146, 52, 0.88));
}

.samx-gapgrid__key--gap::before {
  background-color: rgba(247, 176, 65, 0.92);
  background-image: repeating-linear-gradient(135deg, rgba(224, 99, 71, 0.85) 0 3px, transparent 3px 6px);
}

.samx-gapgrid__rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.samx-gapgrid__row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 4px 0;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
.samx-gapgrid__row:hover {
  background: rgba(255, 255, 255, 0.02);
}
.samx-gapgrid__row:hover .samx-gapgrid__tag {
  opacity: 1;
  transform: none;
}
.samx-gapgrid__row:hover .samx-gapgrid__name {
  color: var(--samx-tx);
}

/* stylelint-disable-next-line no-descending-specificity */
.samx-gapgrid__name {
  font-family: var(--samx-ft-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--samx-tx-muted);
  transition: color 0.2s ease;
}

/* The track layers three opaque pieces so nothing blends muddy: projected
 * load behind (solid amber, full extent), the coral hatch marking only the
 * overshoot, and firm capacity on top (opaque teal, so the served portion
 * reads clean). The amber-with-hatch tail past the teal edge is the gap. */
.samx-gapgrid__track {
  position: relative;
  height: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--samx-border);
  border-radius: 7px;
  overflow: hidden;
}

.samx-gapgrid__dem,
.samx-gapgrid__cap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  transform-origin: left center;
  transition: transform 1.1s var(--samx-ease);
  transition-delay: calc(0.15s + var(--samx-row, 0) * 120ms);
}

/* Bars draw in when the ledger enters the viewport; without JS they are
 * simply visible (the hidden state only exists under .samx-js). */
.samx-js .samx-gapgrid:not(.is-in) .samx-gapgrid__dem,
.samx-js .samx-gapgrid:not(.is-in) .samx-gapgrid__cap {
  transform: scaleX(0);
}

.samx-js .samx-gapgrid:not(.is-in) .samx-gapgrid__gap {
  opacity: 0;
}

.samx-gapgrid__dem {
  width: var(--samx-dem, 80%);
  background: linear-gradient(180deg, rgba(247, 176, 65, 0.95), rgba(224, 146, 52, 0.88));
}

/* stylelint-disable-next-line no-descending-specificity */
.samx-gapgrid__gap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--samx-cap, 60%);
  width: calc(var(--samx-dem, 80%) - var(--samx-cap, 60%));
  background: repeating-linear-gradient(135deg, rgba(224, 99, 71, 0.85) 0 3px, transparent 3px 7px);
  opacity: 1;
  transition: opacity 0.5s ease;
  transition-delay: calc(0.75s + var(--samx-row, 0) * 120ms);
}

.samx-gapgrid__cap {
  width: var(--samx-cap, 60%);
  background: linear-gradient(180deg, #1e6a55, #175243);
  border-right: 2px solid rgba(46, 173, 142, 0.9);
  transition-delay: calc(0.3s + var(--samx-row, 0) * 120ms);
}

/* stylelint-disable-next-line no-descending-specificity */
.samx-gapgrid__tag {
  padding: 3px 10px;
  font-family: var(--samx-ft-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--samx-coral);
  background: rgba(224, 99, 71, 0.08);
  border: 1px solid rgba(224, 99, 71, 0.35);
  border-radius: 999px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s var(--samx-ease);
}

.samx-gapgrid__note {
  max-width: 68ch;
  margin: 18px 2px 0;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--samx-tx-muted);
}

/* ==========================================================================
   Motion preferences & responsive
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .samx-gapgrid__dem,
  .samx-gapgrid__cap,
  .samx-js .samx-gapgrid:not(.is-in) .samx-gapgrid__dem,
  .samx-js .samx-gapgrid:not(.is-in) .samx-gapgrid__cap {
    transform: scaleX(1);
    transition: none;
  }
  .samx-gapgrid__gap,
  .samx-js .samx-gapgrid:not(.is-in) .samx-gapgrid__gap {
    opacity: 1;
    transition: none;
  }
  .samx-gapgrid__tag {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media (max-width: 720px) {
  .samx-gapgrid__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
  }
  .samx-gapgrid__name {
    grid-column: 1;
    grid-row: 1;
  }
  .samx-gapgrid__tag {
    grid-column: 2;
    grid-row: 1;
    opacity: 1;
    transform: none;
  }
  .samx-gapgrid__track {
    grid-column: 1/-1;
    grid-row: 2;
    height: 22px;
  }
}
/*# sourceMappingURL=energy-model.css.map */