/* Status page: hide the original site chrome and style the summary strip.
   Colours follow the page's own palette (blue accent, slate surfaces). */

header,
footer,
.crisp-client,
#crisp-chatbox,
[class^="cc-"],
[data-cc-] { display: none !important; }

a[href*="billing"],
a[href*="my."] { display: none !important; }

main { padding-top: 1.5rem !important; }

/* Hero block.
   Hiding only the inner card left its wrapper behind, and that wrapper carries
   py-40 (10rem top and bottom) - so a screenful of empty space stayed above the
   metrics. The wrapper is what has to go. It is identifiable by py-40: the
   metrics section below uses the same bg-transparent but without it.
   Note: the wrapper is NOT a direct child of main - the page nests it inside
   #status-page, so a child combinator misses it. Match it on its own. */
div.bg-transparent.py-40 { display: none !important; }
main div[class*="outline-dashed"] { display: none !important; }

/* the metrics section then sits right under the summary */
#nodes-metrics { padding-top: 0 !important; }
img[src*="logo"], img[src*="darkhome"], img[src*="rkn-"] { display: none !important; }

/* tag badges - the part of "location" after a "·" separator */
.ms-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: Onest, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
  color: rgb(59 130 246);
  background: rgb(59 130 246 / .1);
  border: 1px solid rgb(59 130 246 / .25);
}
.dark .ms-tag {
  color: rgb(147 197 253);
  background: rgb(59 130 246 / .14);
  border-color: rgb(59 130 246 / .3);
}

#ms-sum { max-width: 80rem; margin: 0 auto 1.25rem; padding: 0 .25rem; }

#ms-sum h2 {
  font-family: Overpass, system-ui, sans-serif;
  font-weight: 600; font-size: 30px; letter-spacing: -.02em;
  color: rgb(30 41 59); margin-bottom: 6px;
}
.dark #ms-sum h2 { color: rgb(226 232 240); }

#ms-sum .sub {
  font-family: Onest, system-ui, sans-serif;
  color: rgb(100 116 139); font-size: 15px; margin-bottom: 20px;
}

#ms-sum .r {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: rgb(226 232 240);
  border: 1px solid rgb(226 232 240); border-radius: 16px; overflow: hidden;
}
.dark #ms-sum .r { background: rgb(30 41 59 / .6); border-color: rgb(30 41 59 / .6); }

#ms-sum .c { background: #fff; padding: 16px 18px; }
.dark #ms-sum .c { background: rgb(2 6 23 / .4); }

#ms-sum .v {
  font-family: Overpass, system-ui, sans-serif;
  font-weight: 600; font-size: 26px; line-height: 1.15;
  letter-spacing: -.02em; color: rgb(30 41 59);
}
.dark #ms-sum .v { color: rgb(226 232 240); }
#ms-sum .v small { font-size: 14px; font-weight: 500; color: rgb(100 116 139); margin-left: 3px; }

#ms-sum .k {
  font-family: Onest, system-ui, sans-serif; font-size: 12px; margin-top: 3px;
  color: rgb(100 116 139); text-transform: uppercase; letter-spacing: .06em;
}

#ms-sum .ok { color: #10b981; }
#ms-sum .warn { color: #f59e0b; }
#ms-sum .bad { color: #ef4444; }

#ms-sum .bar {
  height: 4px; border-radius: 3px; background: rgb(226 232 240);
  margin-top: 9px; overflow: hidden;
}
.dark #ms-sum .bar { background: rgb(30 41 59); }
#ms-sum .bar i {
  display: block; height: 100%; border-radius: 3px;
  background: #3b82f6; transition: width .5s;
}