/*
 * HeatPilot HP-012
 * Peak shaving + comfort-band visualization.
 *
 * Visual planning only.
 * No physical device command capability is implemented here.
 */

.hp012-planner{
  margin:10px 0;
  border:1px solid #25303b;
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(88,214,208,.075),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #0f171f,
      #090f15
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
  overflow:hidden;
}

.hp012-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  padding:15px 16px 13px;
  border-bottom:1px solid #25303b;
}

.hp012-head h2{
  margin:0;
  font-size:1.05rem;
}

.hp012-head-copy{
  margin-top:5px;
  max-width:760px;
  color:#8996a3;
  font-size:.72rem;
  line-height:1.5;
}

.hp012-mode{
  flex:0 0 auto;
  border:1px solid #384652;
  padding:7px 9px;
  font-size:.62rem;
  font-weight:850;
  letter-spacing:.1em;
  color:#f2bd63;
  background:#0a1016;
}

.hp012-summary{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:#25303b;
  border-bottom:1px solid #25303b;
}

.hp012-stat{
  min-height:92px;
  padding:12px 13px;
  background:#0b1219;
}

.hp012-stat span{
  display:block;
  color:#8996a3;
  font-size:.59rem;
  font-weight:850;
  letter-spacing:.12em;
}

.hp012-stat strong{
  display:block;
  margin-top:11px;
  color:#f5f7f8;
  font-size:1.25rem;
  line-height:1.05;
}

.hp012-stat small{
  display:block;
  margin-top:6px;
  color:#8996a3;
  font-size:.61rem;
  line-height:1.35;
}

.hp012-stat.hp012-danger strong{
  color:#ef7474;
}

.hp012-stat.hp012-good strong{
  color:#5cd09a;
}

.hp012-stat.hp012-cyan strong{
  color:#58d6d0;
}

.hp012-timeline-wrap{
  padding:15px 16px 12px;
}

.hp012-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:11px;
}

.hp012-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  color:#8996a3;
  font-size:.62rem;
  font-weight:750;
}

.hp012-legend-dot{
  width:10px;
  height:10px;
  border:1px solid rgba(255,255,255,.13);
}

.hp012-legend-dot.normal{
  background:#384652;
}

.hp012-legend-dot.preheat{
  background:#58d6d0;
}

.hp012-legend-dot.peak{
  background:#ef7474;
}

.hp012-legend-dot.recovery{
  background:#f2bd63;
}

.hp012-timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(96,minmax(4px,1fr));
  align-items:end;
  gap:2px;
  height:190px;
  padding:20px 0 25px;
  border-top:1px solid #25303b;
  border-bottom:1px solid #25303b;
  overflow:hidden;
}

.hp012-slot{
  position:relative;
  align-self:end;
  min-width:3px;
  height:var(--hp012-height,10%);
  background:#384652;
  opacity:.84;
  cursor:default;
}

.hp012-slot::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.03);
}

.hp012-slot.preheat{
  background:#58d6d0;
  opacity:.92;
}

.hp012-slot.peak{
  background:#ef7474;
  opacity:1;
  box-shadow:
    0 0 13px rgba(239,116,116,.18);
}

.hp012-slot.recovery{
  background:#f2bd63;
  opacity:.88;
}

.hp012-slot.current{
  outline:2px solid #fff;
  outline-offset:1px;
  z-index:3;
}

.hp012-slot:hover{
  opacity:1;
  z-index:10;
}

.hp012-slot:hover::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 7px);
  transform:translateX(-50%);
  z-index:100;
  min-width:170px;
  max-width:240px;
  padding:7px 9px;
  background:#020406;
  border:1px solid #384652;
  color:#fff;
  font-size:.62rem;
  line-height:1.35;
  white-space:normal;
  pointer-events:none;
}

.hp012-time-axis{
  display:flex;
  justify-content:space-between;
  margin-top:7px;
  color:#8996a3;
  font-size:.59rem;
}

.hp012-plan-title{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin:16px 0 8px;
}

.hp012-plan-title h3{
  margin:0;
  font-size:.86rem;
}

.hp012-plan-title span{
  color:#8996a3;
  font-size:.62rem;
}

.hp012-peaks{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}

.hp012-peak-card{
  border:1px solid #2b3742;
  background:#0a1016;
  padding:11px 12px;
}

.hp012-peak-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.hp012-peak-time{
  font-weight:850;
  font-size:.8rem;
}

.hp012-peak-price{
  color:#ef7474;
  font-weight:850;
  font-size:.8rem;
  text-align:right;
}

.hp012-phase{
  display:inline-block;
  margin-top:7px;
  border:1px solid rgba(239,116,116,.45);
  padding:4px 6px;
  color:#ef7474;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.1em;
}

.hp012-peak-copy{
  margin-top:8px;
  color:#8996a3;
  font-size:.66rem;
  line-height:1.45;
}

.hp012-comfort{
  padding:0 16px 16px;
}


.hp012-readiness{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:11px 16px;
  border-top:1px solid #25303b;
  background:#080e14;
}

.hp012-readiness-text{
  color:#8996a3;
  font-size:.64rem;
  line-height:1.45;
}

.hp012-readiness-text b{
  color:#f5f7f8;
}

.hp012-readiness-chip{
  flex:0 0 auto;
  border:1px solid #f2bd63;
  color:#f2bd63;
  padding:6px 8px;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.08em;
}

.hp012-empty{
  padding:14px;
  border:1px dashed #384652;
  color:#8996a3;
  font-size:.68rem;
}

@media(max-width:1180px){
  .hp012-summary{
    grid-template-columns:repeat(3,1fr);
  }

}

@media(max-width:820px){
  .hp012-head{
    display:block;
  }

  .hp012-mode{
    display:inline-block;
    margin-top:10px;
  }

  .hp012-summary{
    grid-template-columns:repeat(2,1fr);
  }

  .hp012-peaks{
    grid-template-columns:1fr;
  }


  .hp012-readiness{
    display:block;
  }

  .hp012-readiness-chip{
    display:inline-block;
    margin-top:9px;
  }
}

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

  .hp012-timeline{
    gap:1px;
    height:155px;
  }

  .hp012-head,
  .hp012-timeline-wrap{
    padding-left:11px;
    padding-right:11px;
  }
}