.page-health-control{
  --ph-color:#43df96;
  cursor:pointer!important;
  user-select:none;
}

.page-health-control[data-status="green"]{
  --ph-color:#43df96;
  border-color:#277155!important;
  background:#05251d!important;
  color:#c5f8e0!important;
}

.page-health-control[data-status="yellow"]{
  --ph-color:#ffc45b;
  border-color:#8a6b24!important;
  background:#2b2209!important;
  color:#ffe09a!important;
}

.page-health-control[data-status="red"]{
  --ph-color:#ff7280;
  border-color:#90404c!important;
  background:#2b0d13!important;
  color:#ffc2c8!important;
}

.page-health-control[data-status="gray"]{
  --ph-color:#91a6c6;
}

.page-health-control i,
.page-health-control .pulse{
  width:9px!important;
  height:9px!important;
  border-radius:50%!important;
  background:var(--ph-color)!important;
  box-shadow:0 0 10px color-mix(in srgb,var(--ph-color) 70%,transparent)!important;
  display:inline-block!important;
}

.page-health-popover{
  --ph-color:#43df96;
  position:fixed;
  z-index:100000;
  right:20px;
  top:92px;
  width:min(520px,calc(100vw - 32px));
  max-height:calc(100vh - 115px);
  overflow:auto;
  background:#07172e;
  color:#f5f7ff;
  border:1px solid #294d74;
  border-top:3px solid var(--ph-color);
  border-radius:14px;
  box-shadow:0 18px 55px rgba(0,0,0,.5);
  padding:14px;
  font:12px/1.4 Inter,system-ui,sans-serif;
}

.page-health-popover[data-status="green"]{--ph-color:#43df96}
.page-health-popover[data-status="yellow"]{--ph-color:#ffc45b}
.page-health-popover[data-status="red"]{--ph-color:#ff7280}
.page-health-popover[data-status="gray"]{--ph-color:#91a6c6}

.page-health-popover__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.page-health-popover__head b{
  display:block;
  font-size:15px;
}

.page-health-popover__head span{
  display:block;
  margin-top:2px;
  color:var(--ph-color);
  font-weight:900;
}

.page-health-popover__close{
  border:0;
  background:transparent;
  color:#b9c8dd;
  font-size:24px;
  cursor:pointer;
  line-height:1;
}

.page-health-popover__summary{
  color:#c2d0e2;
  margin:12px 0;
}

.page-health-popover__metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}

.page-health-popover__metric{
  background:#061327;
  border:1px solid #203e65;
  border-radius:8px;
  padding:7px 8px;
}

.page-health-popover__metric span{
  display:block;
  color:#91a6c6;
  text-transform:uppercase;
  font-size:8px;
  font-weight:800;
}

.page-health-popover__metric b{
  display:block;
  margin-top:2px;
  font-size:14px;
}

.page-health-popover__time{
  color:#91a6c6;
  font-size:10px;
  margin:11px 0 0;
}

.page-health-popover details{
  margin-top:10px;
  border-top:1px solid #244263;
  padding-top:9px;
}

.page-health-popover summary{
  cursor:pointer;
  font-weight:900;
  color:#dce6f5;
}

.page-health-popover__details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:8px;
}

.page-health-popover__details ul{
  margin:4px 0 0;
  padding-left:18px;
}

.page-health-popover__details code{
  font-size:10px;
  color:#b8cae2;
  word-break:break-all;
}

/* Legacy body health should never consume page real estate. */
#page-health-summary,
.page-health:not(.page-health-popover){
  display:none!important;
}

@media(max-width:700px){
  .page-health-popover{
    right:10px;
    top:82px;
    width:calc(100vw - 20px);
  }

  .page-health-popover__metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .page-health-popover__details{
    grid-template-columns:1fr;
  }
}