/* Figma 117:54: the planner's four live summaries sit over the lower rooftop. */
@media (min-width:851px){
 #plannerView{position:relative}
 #plannerView .rooftop-banner.is-expanded{--banner-expanded-height:calc(100vw * 1565 / 2880);height:var(--banner-expanded-height)}
 #plannerView .rooftop-banner.is-expanded + .dashboard-content .analytics-main{position:static}
 #plannerView .rooftop-banner.is-expanded + .dashboard-content .planner-stats{
  position:absolute;z-index:12;top:calc(100vw * 1176 / 2880);left:calc(100vw * 279 / 2880);
  width:calc(100vw * 2321 / 2880);grid-template-columns:repeat(4,minmax(0,1fr));
  gap:calc(100vw * 31 / 2880);margin:0;pointer-events:auto
 }
 #plannerView .rooftop-banner.is-expanded + .dashboard-content .planner-stats>div{
  min-height:calc(100vw * 261 / 2880);padding:calc(100vw * 30 / 2880) calc(100vw * 37 / 2880);
  border:2px solid #252c34;border-radius:clamp(8px,.73vw,21px);
  background:rgba(18,22,27,.67);backdrop-filter:blur(9px);box-shadow:none;overflow:visible
 }
 #plannerView .rooftop-banner.is-expanded + .dashboard-content .planner-stats span{font-size:clamp(12px,1.11vw,32px);color:#fff;font-weight:600}
 #plannerView .rooftop-banner.is-expanded + .dashboard-content .planner-stats strong{margin-top:calc(100vw * 14 / 2880);font-size:clamp(32px,2.78vw,80px);font-weight:600}
 #plannerView .rooftop-banner.is-expanded + .dashboard-content .planner-week-spark{right:6%;bottom:8%;width:34%;height:26%;gap:4%}
 #plannerView .rooftop-banner.is-expanded + .dashboard-content .planner-week-spark i{width:10%;min-width:3px}
}
@media(prefers-reduced-motion:reduce){#plannerView .rooftop-banner.is-expanded + .dashboard-content .planner-stats>div{backdrop-filter:none}}