/* The notice bar. Sits above everything, reads in one glance, gets out of the
   way when dismissed. Severity is carried by colour AND by the word, never by
   colour alone. */
.eres-notice {
  position: fixed; top: 0; left: 0; right: 0; z-index: 950;
  background: #1B2340; border-bottom: 1px solid #2B3557; color: #F2F4F8;
  font: 500 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.eres-notice.sev-degraded { background: #2C2210; border-bottom-color: #6b551f; }
.eres-notice.sev-down { background: #2E1712; border-bottom-color: #7a3626; }
.eres-notice-in {
  max-width: 1180px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
}
.eres-notice-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #7cc0ff; flex: 0 0 auto;
}
.sev-degraded .eres-notice-dot { background: #F5B84A; }
.sev-down .eres-notice-dot { background: #F97353; }
.eres-notice-txt { flex: 1; min-width: 0; }
.eres-notice-txt span { color: #C3CAD9; font-weight: 400; }
.eres-notice-x {
  background: none; border: 0; color: #9AA3B8; font-size: 22px; line-height: 1;
  cursor: pointer; padding: 0 4px; border-radius: 6px;
}
.eres-notice-x:hover { color: #fff; }
@media (max-width: 640px) { .eres-notice-in { padding: 9px 12px; font-size: 13px; } }

/* The site's own nav is fixed at the top of every page, so it moves down by the
   measured height of the bar instead of hiding behind it. */
body.has-eres-notice > nav { top: var(--eres-notice-h, 44px) !important; }
body.has-eres-notice { padding-top: var(--eres-notice-h, 44px); }