/* ============================================================
   BPA - the four "answer instruments" on building-pulse.html.
   One interactive miniature per card in the Every Utility Cycle
   section, in the same visual language as the hero LIVE DEMAND
   card (css/bph.css): glass panel, liquid-glass range capsule
   with a sliding red indicator, navy ink, tabular numerals.

   One truth on every surface - every number here derives from the
   same demo story as the hero card and buildingpulse-mockup.html:
   34 kW now · 79 kW cycle peak (Wed, Jul 1) · 85 kW goal ·
   ~22 kW overnight base · ~61 kW midday plateau. Demo bill math:
   $4,030 usage (≈25,200 kWh × $0.16) + $1,810 demand
   (79 kW × $22.90) = $5,840 projected.

   Behavior: bpa-demo.js. Requires --font-d from the host page.
   ============================================================ */
.bpa {
  --bpa-ink: #0E2A52;
  --bpa-ink-3: #4d5b6c;
  --bpa-red: #c0392b;
  --bpa-red-deep: #a02a1d;
  --bpa-line: rgba(14, 42, 82, 0.10);
  --bpa-green: #16a34a;
  --bpa-amber: #d97706;
  --bpa-purple: #8E2C86;
  position: relative;
  margin-top: 20px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, #f2f5f3 0%, #edf1f0 60%, #f4efec 100%);
  border: 0.5px solid var(--bpa-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 26px -18px rgba(14, 42, 82, 0.30);
  padding: 14px 16px 14px;
  font-family: var(--font-d);
  color: var(--bpa-ink);
  font-variant-numeric: tabular-nums;
}
.bpa__stamp {
  position: absolute; top: 11px; right: 14px; z-index: 3;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bpa-ink-3); opacity: 0.75;
}
.bpa__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--bpa-ink-3);
}
.bpa__label::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--bpa-red); opacity: 0.75;
}

/* - liquid-glass capsule, the hero card's signature control - */
.bpa__rangerow { display: flex; justify-content: center; margin: 10px 0 2px; }
.bpa__ranges {
  position: relative; display: inline-flex; align-items: center; padding: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.14));
  backdrop-filter: blur(30px) saturate(2) brightness(1.06);
  -webkit-backdrop-filter: blur(30px) saturate(2) brightness(1.06);
  border: 0.5px solid rgba(255,255,255,0.60);
  box-shadow: 0 8px 20px -10px rgba(10,40,55,0.30), inset 0 1px 0 rgba(255,255,255,0.80), inset 0 -1px 1px rgba(10,40,55,0.05);
}
.bpa__range-ind {
  position: absolute; top: 3px; left: 0; width: 0; height: calc(100% - 6px);
  border-radius: 999px; z-index: 0; transform: translateX(3px);
  background: linear-gradient(180deg, var(--bpa-red), var(--bpa-red-deep));
  box-shadow: 0 4px 12px -4px rgba(192,57,43,0.50), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .42s cubic-bezier(.34,1.36,.46,1), width .42s cubic-bezier(.34,1.36,.46,1);
}
.bpa__ranges button {
  position: relative; z-index: 1; background: transparent; border: none;
  color: #54635f; font: 600 11px/1 var(--font-d); letter-spacing: 0.01em;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: color .3s ease;
}
.bpa__ranges button:hover { color: var(--bpa-ink); }
.bpa__ranges button[aria-pressed="true"] { color: #fff; }

/* - 1 · Projected bill - */
.bpa__billrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 8px; }
.bpa__bill { display: flex; align-items: baseline; gap: 8px; }
.bpa__bill-val {
  font-size: 34px; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1; color: var(--bpa-ink);
}
.bpa__bill-band { font-size: 12.5px; font-weight: 700; color: var(--bpa-ink-3); }
.bpa__risk {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 10px; white-space: nowrap;
  border: 1px solid; transition: color .3s ease, background .3s ease, border-color .3s ease;
}
.bpa__risk::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bpa__risk[data-risk="low"]   { color: #157a3a; background: rgba(22,163,74,0.10);  border-color: rgba(22,163,74,0.35); }
.bpa__risk[data-risk="watch"] { color: #b45309; background: rgba(217,119,6,0.10);  border-color: rgba(217,119,6,0.35); }
.bpa__risk[data-risk="high"]  { color: #b91c1c; background: rgba(220,38,38,0.10);  border-color: rgba(220,38,38,0.35); }
.bpa__note { margin-top: 9px; font-size: 11.5px; line-height: 1.45; color: var(--bpa-ink-3); }
.bpa__cycle { margin-top: 12px; }
.bpa__cycle-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bpa-ink-3); margin-bottom: 6px;
}
.bpa__cycle-head b { color: var(--bpa-ink); font-weight: 800; }
.bpa__track {
  position: relative; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #e6e9e4, #e3e7ec);
  box-shadow: inset 0 1px 2px rgba(14,42,82,0.10);
}
.bpa__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #7FBF54, #B7C24A 65%, #E9B94F);
  transition: width .6s cubic-bezier(.3,1,.4,1);
}
.bpa__tick { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; }
.bpa__tick--peak { background: var(--bpa-red); }
.bpa__tick--goal { background: var(--bpa-purple); }
/* stat strip, not an axis - centered with dot separators so it can't be
   misread as scale labels for the progress bar above it */
.bpa__scale {
  display: flex; justify-content: center; gap: 7px; margin-top: 6px;
  font-size: 9.5px; font-weight: 700; color: var(--bpa-ink-3); letter-spacing: 0.04em;
}
.bpa__scale span + span::before { content: '·'; margin-right: 7px; color: rgba(77,91,108,0.5); }
.bpa__scale .pk { color: var(--bpa-red-deep); }
.bpa__scale .gl { color: var(--bpa-purple); }

/* - 2 · Usage vs demand split - */
.bpa__totalrow { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.bpa__total { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.bpa__total-sub { font-size: 11.5px; font-weight: 600; color: var(--bpa-ink-3); }
.bpa__spike-chip {
  display: inline-block; margin-left: 2px; font-size: 10.5px; font-weight: 800;
  color: #b91c1c; background: rgba(220,38,38,0.10);
  border: 1px solid rgba(220,38,38,0.35); border-radius: 7px; padding: 3px 7px;
  opacity: 0; transform: translateY(3px);
  transition: opacity .35s ease, transform .35s ease;
}
.bpa__spike-chip.is-on { opacity: 1; transform: none; }
.bpa__bar {
  display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin-top: 12px;
  box-shadow: inset 0 1px 2px rgba(14,42,82,0.12);
}
.bpa__bar-usage {
  background: linear-gradient(180deg, #3f6ea6, #2f5a8d);
  transition: flex-basis .6s cubic-bezier(.3,1,.4,1);
}
.bpa__bar-demand {
  background: linear-gradient(180deg, #d2694f, var(--bpa-red-deep));
  transition: flex-basis .6s cubic-bezier(.3,1,.4,1);
}
.bpa__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.bpa__leg {
  background: rgba(255,255,255,0.72); border: 0.5px solid var(--bpa-line);
  border-radius: 10px; padding: 9px 11px;
}
.bpa__leg-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bpa-ink-3);
}
.bpa__leg-head i { width: 8px; height: 8px; border-radius: 3px; flex: 0 0 auto; }
.bpa__leg--usage  .bpa__leg-head i { background: #2f5a8d; }
.bpa__leg--demand .bpa__leg-head i { background: var(--bpa-red-deep); }
.bpa__leg-head .pct { margin-left: auto; color: var(--bpa-ink); }
.bpa__leg-val { font-size: 17px; font-weight: 700; color: var(--bpa-ink); margin-top: 3px; }
.bpa__leg-meta { font-size: 10.5px; color: var(--bpa-ink-3); margin-top: 2px; }

/* - 3 · Recommendations from transparent rules - */
.bpa__rec { margin-top: 10px; min-height: 66px; }
.bpa__rec-title { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--bpa-ink); }
.bpa__rec-rule { display: flex; align-items: baseline; gap: 7px; margin-top: 6px; }
.bpa__rec-rule b {
  flex: 0 0 auto; font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bpa-red-deep);
  border: 1px solid rgba(192,57,43,0.35); background: rgba(192,57,43,0.07);
  border-radius: 6px; padding: 2px 6px; transform: translateY(-1px);
}
.bpa__rec-rule span { font-size: 11.5px; line-height: 1.45; color: var(--bpa-ink-3); }
.bpa__spark { position: relative; height: 74px; margin-top: 10px; }
.bpa__spark canvas { display: block; width: 100%; height: 100%; }

/* - 4 · The deeper read - */
.bpa__viz { position: relative; height: 124px; margin-top: 12px; }
.bpa__viz canvas {
  display: block; width: 100%; height: 100%; cursor: crosshair;
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.bpa__tip {
  position: absolute; z-index: 4; pointer-events: none;
  transform: translate(-50%, -130%);
  background: rgba(255,255,255,0.95);
  border: 0.5px solid var(--bpa-line); border-radius: 10px;
  box-shadow: 0 6px 18px -8px rgba(14,42,82,0.35);
  padding: 4px 8px; white-space: nowrap;
}
.bpa__tip b { display: block; font-size: 12px; font-weight: 700; color: var(--bpa-ink); }
.bpa__tip span { display: block; font-size: 9.5px; font-weight: 600; color: var(--bpa-ink-3); }
.bpa__tip[hidden] { display: none; }

@media (max-width: 480px) {
  .bpa { padding: 12px 12px 12px; }
  .bpa__bill-val { font-size: 29px; }
  .bpa__total { font-size: 26px; }
  .bpa__ranges button { padding: 6px 9px; font-size: 10.5px; }
  .bpa__legend { grid-template-columns: 1fr; }
  .bpa__viz { height: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  .bpa__range-ind, .bpa__fill, .bpa__bar-usage, .bpa__bar-demand, .bpa__spike-chip { transition: none; }
}