/* ============================================================
   BPH - the interactive LIVE DEMAND card.
   A faithful clone of the real BuildingPulse card (styles ported from
   styles-alt.css "BPH v2", 2026-07-06 - "almost identical" per John),
   driven by bph-demo.js on labeled demo data. Numbers match
   buildingpulse-mockup.html (34 kW now · 79 kW peak · 85 kW goal), so
   the card, the sample dashboard, and the product tell one story.

   Two surfaces use it:
     .bph           building-pulse.html hero (full card, with the
                    peak/goal stat tiles underneath)
     .bph .bph--home  index.html boardroom act (compact: range capsule
                    rides the value row, trace height follows the
                    viewport, no stat tiles) - see the modifier block
                    at the bottom.

   Requires --font-d from the host page.
   ============================================================ */
.bph {
  --bph-ink: #0E2A52;
  --bph-ink-3: #4d5b6c;
  --bph-red: #c0392b;
  --bph-red-deep: #a02a1d;
  --bph-line: rgba(14, 42, 82, 0.10);
  --bph-green: #16a34a;
  background: #eef3f1;
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.18);
  font-family: var(--font-d);
  color: var(--bph-ink);
}
.bph__brandrow {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 2px 6px 10px;
}
.bph__wordmark { font-size: 19px; letter-spacing: -0.015em; }
.bph__wordmark b { font-weight: 700; color: var(--bph-ink); }
.bph__wordmark em { font-style: normal; font-weight: 300; color: var(--bph-red); }
.bph__site { font-size: 11.5px; color: var(--bph-ink-3); white-space: nowrap; }
.bph__banner {
  position: relative;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.50) 60%, rgba(254,247,245,0.55) 100%),
    radial-gradient(ellipse 600px 180px at 12% 50%, rgba(192,57,43,0.06), transparent 70%);
  border: 0.5px solid var(--bph-line);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 24px -14px rgba(14, 42, 82, 0.25);
  padding: 14px 18px 12px;
  overflow: hidden;
}
.bph__banner::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 45%);
  mix-blend-mode: screen; opacity: 0.6;
}
.bph__updated {
  position: absolute; top: 12px; right: 16px; z-index: 3;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--bph-ink-3); font-variant-numeric: tabular-nums;
}
.bph__updated::before {
  content: '·'; display: inline-block; margin-right: 6px;
  color: var(--bph-green); font-weight: 900;
  transform: scale(1.6) translateY(-1px);
}
.bph__live-label {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--bph-ink-3);
}
.bph__ekg { width: 38px; height: 14px; flex: 0 0 auto; overflow: visible; display: block; }
.bph__ekg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bph__ekg-base { stroke: var(--bph-red); stroke-width: 1.4; opacity: 0.16; }
.bph__ekg-spark {
  stroke: var(--bph-red); stroke-width: 1.8;
  stroke-dasharray: 16 100;
  filter: drop-shadow(0 0 1.5px rgba(192,57,43,0.45));
  animation: bphEkgSweep 1.8s linear infinite;
}
@keyframes bphEkgSweep { from { stroke-dashoffset: 116; } to { stroke-dashoffset: 0; } }
.bph__valrow { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.bph__value {
  font-size: 44px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--bph-ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.bph__unit { font-size: 16px; font-weight: 500; color: var(--bph-ink-3); margin-left: 4px; }
.bph__delta {
  font-size: 13px; font-weight: 700; color: var(--bph-green);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap;
}
.bph__rangerow { display: flex; justify-content: center; margin: 8px 0 10px; position: relative; z-index: 2; }
.bph__ranges {
  position: relative; display: inline-flex; align-items: center; padding: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12));
  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.55);
  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);
}
.bph__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(--bph-red), var(--bph-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);
}
.bph__ranges button {
  position: relative; z-index: 1; background: transparent; border: none;
  color: #54635f; font: 600 11.5px/1 var(--font-d); letter-spacing: 0.01em;
  padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: color .3s ease;
}
.bph__ranges button:hover { color: var(--bph-ink); }
.bph__ranges button[aria-pressed="true"] { color: #fff; }
.bph__tracewrap { position: relative; z-index: 2; height: 112px; margin-top: 4px; }
.bph__tracewrap canvas {
  display: block; width: 100%; height: 100%; cursor: crosshair;
  touch-action: pan-y; /* scrubbing owns horizontal, the page keeps vertical scroll */
  -webkit-user-select: none; user-select: none;
}
.bph__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(--bph-line); border-radius: 12px;
  box-shadow: 0 6px 18px -8px rgba(14,42,82,0.35);
  padding: 5px 9px; white-space: nowrap;
}
.bph__tip b { display: block; font-size: 13px; font-weight: 700; color: var(--bph-ink); font-variant-numeric: tabular-nums; }
.bph__tip span { display: block; font-size: 10px; font-weight: 600; color: var(--bph-ink-3); font-variant-numeric: tabular-nums; }
.bph__tip[hidden] { display: none; }
.bph__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.bph__stat {
  background: rgba(255,255,255,0.72); border: 0.5px solid var(--bph-line);
  border-radius: 12px; padding: 11px 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.bph__stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bph-ink-3); }
.bph__stat-val { font-size: 19px; font-weight: 700; color: var(--bph-ink); font-variant-numeric: tabular-nums; }
.bph__stat-val small { font-size: 12px; font-weight: 500; color: var(--bph-ink-3); }
.bph__stat-sub { font-size: 11.5px; color: var(--bph-ink-3); }

/* the hero card centers itself once the BuildingPulse hero stacks */
@media (max-width: 980px) {
  .bph:not(.bph--home) { max-width: 440px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .bph__value { font-size: 36px; }
  /* on narrow phones the absolute top-right stamp would crowd the
     LIVE DEMAND label - give it its own quiet row instead */
  .bph__updated { position: static; display: block; text-align: right; margin-bottom: 4px; }
  /* and let the site line wrap rather than run off a 320px screen */
  .bph__site { white-space: normal; text-align: right; }
}
@media (prefers-reduced-motion: reduce) { .bph__ekg-spark { animation: none; } .bph__range-ind { transition: none; } }

/* ============================================================
   .bph--home - the boardroom act on the homepage.
   Same card, seated on a dark column and on a height budget: the range
   capsule rides the value row instead of taking one of its own, the
   trace height follows the viewport, and the peak/goal tiles are left
   to the BuildingPulse page. Lands shorter than the static screenshot
   it replaced, so the act's "Explore BuildingPulse" link clears the
   fold on a 13" laptop.
   ============================================================ */
.bph--home {
  margin: 1vh 0 0; /* it's a <figure> - kill the UA's 40px side margins */
  padding: 12px;
  /* the act's dark backdrop swallows the paper card's own shadow */
  box-shadow: 0 40px 80px -34px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.bph--home .bph__brandrow { padding: 0 4px 6px; }
.bph--home .bph__wordmark { font-size: 15.5px; }
.bph--home .bph__site { font-size: 10.5px; }
.bph--home .bph__banner { padding: 10px 13px 8px; border-radius: 12px; }
.bph--home .bph__updated { top: 9px; right: 12px; font-size: 10px; }
.bph--home .bph__live-label { font-size: 11px; letter-spacing: 0.9px; }
.bph--home .bph__ekg { width: 34px; height: 13px; }
.bph--home .bph__valrow { align-items: center; flex-wrap: nowrap; gap: 9px; margin-top: 4px; }
.bph--home .bph__value { font-size: 31px; }
.bph--home .bph__unit { font-size: 13px; }
.bph--home .bph__delta { font-size: 11.5px; }
.bph--home .bph__ranges { margin-left: auto; padding: 2px; flex: 0 0 auto; }
.bph--home .bph__ranges button { padding: 6px 11px; font-size: 11px; }
.bph--home .bph__range-ind { top: 2px; height: calc(100% - 4px); transform: translateX(2px); }
/* the trace is the card's shock absorber: it gives back height on a
   short laptop so the act still ends on its link, and takes it back on
   a tall display */
.bph--home .bph__tracewrap { height: clamp(56px, 8vh, 100px); margin-top: 5px; }

@media (max-width: 760px) {
  .bph--home { margin: 0; padding: 10px; }
  .bph--home .bph__banner { padding: 10px 12px 8px; }
  .bph--home .bph__updated { position: static; display: block; text-align: right; margin-bottom: 2px; font-size: 9.5px; }
  .bph--home .bph__site { white-space: normal; text-align: right; }
  .bph--home .bph__value { font-size: 28px; }
  .bph--home .bph__valrow { flex-wrap: wrap; }
  .bph--home .bph__delta { display: none; }
  .bph--home .bph__ranges button { padding: 5px 9px; font-size: 10.5px; }
  .bph--home .bph__tracewrap { height: 62px; }
}