/*
 * Resilience (js/core/resilience.js): the offline / degraded banner, the stale-data badge, the live-updates indicator
 * and the extras on the shared error state. Theme tokens only: light and dark come from the Carbon theme zone.
 */
.hr-banner {
  position: sticky;
  top: var(--cds-header-height, 3rem);
  z-index: 7800;                      /* under the connection-lost banner (7900), over the page */
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-04, 12px);
  padding: var(--cds-spacing-03, 8px) var(--cds-spacing-06, 24px);
  background: var(--cds-layer-accent-01, var(--cds-layer-01));
  color: var(--cds-text-primary);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  border-left: 4px solid var(--cds-support-info);
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
  line-height: var(--lh-normal, 1.4);
  min-width: 0;
}
.hr-banner[hidden] { display: none; }
.hr-banner[data-tone="offline"],
.hr-banner[data-tone="degraded"] { border-left-color: var(--cds-support-warning); }
.hr-banner[data-tone="ok"] { border-left-color: var(--cds-support-success); }
.hr-banner[data-tone="live"] { border-left-color: var(--cds-support-info); }
.hr-banner__dot {
  flex: none;
  width: var(--cds-spacing-03, 8px);
  height: var(--cds-spacing-03, 8px);
  border-radius: 50%;
  background: var(--cds-support-info);
}
.hr-banner[data-tone="offline"] .hr-banner__dot,
.hr-banner[data-tone="degraded"] .hr-banner__dot { background: var(--cds-support-warning); }
.hr-banner[data-tone="ok"] .hr-banner__dot { background: var(--cds-support-success); }
.hr-banner[data-tone="live"] .hr-banner__dot { animation: hr-pulse 1.4s ease-in-out infinite; }
@keyframes hr-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.hr-banner__body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.hr-banner__stale {
  display: inline-block;
  padding: 0 var(--cds-spacing-03, 8px);
  background: var(--hx-support-warning-subtle, var(--cds-layer-02));
  border: 1px solid var(--cds-border-subtle-01);
  border-radius: 2px;
  color: var(--cds-text-secondary);
  font-size: var(--cds-label-01-font-size, 0.75rem);
}
.hr-banner__stale[hidden] { display: none; }
.hr-banner__actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-04, 12px); }
.hr-banner__link { color: var(--cds-link-primary); }
.hr-banner__link[hidden],
.hr-banner__btn[hidden] { display: none; }
.hr-banner__btn {
  min-height: 32px;
  padding: 0 var(--cds-spacing-04, 12px);
  border: 1px solid var(--cds-border-inverse, var(--cds-text-primary));
  background: transparent;
  color: var(--cds-text-primary);
  font: inherit;
  cursor: pointer;
}
.hr-banner__btn:hover { background: var(--cds-layer-hover-01, var(--cds-layer-02)); }
.hr-banner__btn:disabled { cursor: progress; color: var(--cds-text-disabled); }
.hr-banner__btn:focus-visible,
.hr-banner__link:focus-visible,
.hr-error .hr-link:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 1px; }
@media (max-width: 671px) {
  .hr-banner { flex-wrap: wrap; padding: var(--cds-spacing-03, 8px) var(--cds-spacing-05, 16px); }
  .hr-banner__body { flex-basis: calc(100% - var(--cds-spacing-06, 24px)); }
}
@media (prefers-reduced-motion: reduce) { .hr-banner[data-tone="live"] .hr-banner__dot { animation: none; } }

/* The shared error state with the support links: they are links that look like the state's buttons. */
.hr-error .hr-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--cds-link-primary);
}
.hr-error .hr-link:hover { text-decoration: underline; }
/* The connection-lost banner already says it; this one waits. */
.carbon-heartbeat-banner.is-visible ~ .hr-banner { display: none; }