/* ============================================================
   BPL - the four LIVE instruments on building-pulse.html
   (Every Utility Cycle section, rebuilt 2026-07-23 per KP).

   Replaces the bpa demo miniatures with the four real projections
   - demand outlook, usage, emissions, bill - streaming read-only
   from the public-demo building (FMC_PULSE_DEMO_SITES exemption in
   haystack_routes, John's 2026-06-09 call). When the live feed is
   unavailable the same widgets render labeled demo data.

   Visual language: extends css/bpa.css (glass panel .bpa, liquid
   capsule .bpa__ranges, split bar .bpa__bar/.bpa__legend, tooltip
   .bpa__tip) - bpa.css must load first. Behavior: bpl-live.js.
   ============================================================ */

/* equal-height rows: the glass panel fills its card and the capsule
   pins to the panel bottom, so a short card (emissions) doesn't strand
   whitespace next to a tall one (bill) */
.answers .card { display: flex; flex-direction: column; }
.answers .card .bpa { flex: 1; display: flex; flex-direction: column; align-items: stretch; }
.answers .bpa .bpa__rangerow { margin-top: auto; padding-top: 10px; }

/* - headline row (usage · emissions · bill) - */
.bpl__toprow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 8px; }
.bpl__big { display: flex; align-items: baseline; gap: 7px; }
.bpl__big-val {
  font-size: 30px; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1; color: var(--bpa-ink);
}
.bpl__big-unit { font-size: 12.5px; font-weight: 700; color: var(--bpa-ink-3); }
.bpl__delta {
  display: inline-flex; align-items: center; margin-top: 3px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 10px; border: 1px solid; white-space: nowrap;
}
.bpl__delta[data-tone="good"] { color: #157a3a; background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.35); }
.bpl__delta[data-tone="bad"]  { color: #b91c1c; background: rgba(220,38,38,0.10); border-color: rgba(220,38,38,0.35); }
.bpl__delta[data-tone="flat"] { color: #4d5b6c; background: rgba(77,91,108,0.08); border-color: rgba(77,91,108,0.30); }
.bpl__sub { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--bpa-ink-3); }
.bpl__sub b { color: var(--bpa-ink); font-weight: 700; }

/* - demand card: status line + limit bar with pins - */
.bpl__status { margin-top: 9px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--bpa-ink); }
.bpl__limitbar { position: relative; margin: 30px 0 4px; }
.bpl__limitbar-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #7FBF54 0%, #B7C24A 55%, #E9B94F 78%, #d2694f 100%);
  box-shadow: inset 0 1px 2px rgba(14,42,82,0.12);
}
.bpl__pin { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; transform: translateX(-1px); }
/* two-line pin label - bold number over a tiny caption (matches the
   real app's 74/PROJECTED · 79/PEAK treatment; single-line labels
   collided when the pins sat close together) */
.bpl__pin i {
  position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  font-style: normal; font-size: 6.5px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap; line-height: 1.25;
}
.bpl__pin i b { font-size: 11px; font-weight: 800; letter-spacing: 0; }
.bpl__pin--proj { background: var(--bpa-ink); }
.bpl__pin--proj i { color: var(--bpa-ink); }
.bpl__pin--peak { background: var(--bpa-red); }
.bpl__pin--peak i { color: var(--bpa-red-deep); }
.bpl__limit-scale {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-size: 9.5px; font-weight: 700; color: var(--bpa-ink-3); letter-spacing: 0.04em;
}
.bpl__limit-scale .lim { color: var(--bpa-purple); }

/* - canvases (forecast · usage trend · emissions rate) - */
.bpl__viz { position: relative; margin-top: 10px; }
.bpl__viz--forecast { height: 120px; }
.bpl__viz--trend { height: 108px; }
.bpl__viz--erate { height: 104px; margin-top: 6px; }
.bpl__viz canvas {
  display: block; width: 100%; height: 100%; cursor: crosshair;
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}

/* - emissions: rate-chart chrome (mirrors the dashboard card) - */
.bpl__ratehead {
  display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bpa-ink-3);
}
.bpl__ratehead b { font-size: 10px; color: var(--bpa-ink); letter-spacing: 0.04em; }
.bpl__axisrow {
  display: flex; justify-content: space-between; margin-top: 3px;
  font-size: 9px; font-weight: 700; color: var(--bpa-ink-3); letter-spacing: 0.04em;
}
.bpl__axisrow[hidden] { display: none; }
/* band legend - swatches mirror the dashboard's .bp-clean--* palette */
.bpl__bandlegend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 5px; margin-top: 7px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.03em; color: var(--bpa-ink-3);
}
.bpl__bandlegend[hidden] { display: none; }
.bpl__bandlegend .sw { width: 9px; height: 9px; border-radius: 3px; margin-left: 5px; }
.bpl__bandlegend .sw-clean    { background: rgba(22,163,74,0.30); }
.bpl__bandlegend .sw-moderate { background: rgba(214,165,28,0.40); }
.bpl__bandlegend .sw-elevated { background: rgba(232,112,42,0.36); }
.bpl__bandlegend .sw-high     { background: rgba(220,38,38,0.32); }
.bpl__bandlegend .sw-proj     { background: rgba(214,165,28,0.22); border: 1px dashed rgba(214,165,28,0.9); }
.bpl__bandlegend .yl { width: 14px; height: 2.5px; border-radius: 2px; background: #0a6b60; }
.bpl__bandlegend .gsep { margin-left: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; font-size: 8.5px; }
.bpl__eyebrow {
  margin-top: 12px; font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bpa-ink-3);
}
.bpl__equiv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 7px; }
.bpl__eq {
  background: rgba(255,255,255,0.72); border: 0.5px solid var(--bpa-line);
  border-radius: 10px; padding: 8px 10px; text-align: center;
}
.bpl__eq b { display: block; font-size: 15px; font-weight: 700; color: var(--bpa-ink); letter-spacing: -0.01em; }
.bpl__eq span {
  display: block; margin-top: 2px; font-size: 8.5px; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--bpa-ink-3);
}

/* - stat pair (usage card footer) - */
.bpl__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.bpl__stat {
  background: rgba(255,255,255,0.72); border: 0.5px solid var(--bpa-line);
  border-radius: 10px; padding: 8px 11px;
}
.bpl__stat span {
  display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bpa-ink-3);
}
.bpl__stat b { display: block; margin-top: 3px; font-size: 15px; font-weight: 700; color: var(--bpa-ink); }

/* - bill card: cycle line + gradient split bar (mirrors the dashboard's
   Projected Electric Bill: teal usage / orange demand, thin rounded bar) - */
.bpl__cycletxt { margin-top: 9px; font-size: 11.5px; line-height: 1.45; color: var(--bpa-ink-3); }
.bpl__cycletxt b { color: var(--bpa-ink); font-weight: 700; }
.bpl__breakhead {
  margin-top: 14px; font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bpa-ink-3);
}
.bpl__splitbar {
  display: flex; height: 7px; border-radius: 999px; overflow: hidden; margin-top: 8px; gap: 2px;
}
.bpl__splitbar-usage {
  border-radius: 999px;
  background: linear-gradient(90deg, #0a4f47, #14957f);
  transition: flex-basis .6s cubic-bezier(.3,1,.4,1);
}
.bpl__splitbar-demand {
  border-radius: 999px;
  background: linear-gradient(90deg, #c2410c, #ea8c1f);
  transition: flex-basis .6s cubic-bezier(.3,1,.4,1);
}
.bpl__leg--teal .bpa__leg-head i { background: #0f766e !important; }
.bpl__leg--orange .bpa__leg-head i { background: #ea580c !important; }

/* live/demo stamp tones - .bpa__stamp supplies the geometry */
.bpa__stamp[data-live="1"] { color: #157a3a; opacity: 1; }
.bpa__stamp[data-live="1"]::before {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #16a34a; margin-right: 5px; vertical-align: 1px;
  animation: bpl-pulse 2.2s ease-in-out infinite;
}
@keyframes bpl-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (max-width: 480px) {
  .bpl__big-val { font-size: 26px; }
  .bpl__equiv { gap: 6px; }
  .bpl__eq b { font-size: 13.5px; }
  .bpl__viz--forecast { height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .bpa__stamp[data-live="1"]::before { animation: none; }
}