.polls-connectivity-spacer { height: var(--polls-offline-height, 0px); }
.polls-connectivity[hidden] { display: none; }
.polls-connectivity {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem 1rem;
  padding: .7rem max(1rem, env(safe-area-inset-left)); box-sizing: border-box;
  background: var(--surface, #fff); color: var(--ink, #1c2924);
  border-bottom: 2px solid var(--warning-ink, var(--warning, #785b18));
  font: inherit; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere;
}
.polls-connectivity p { margin: 0; max-width: 70ch; }
.polls-connectivity button {
  flex-shrink: 0; border: 1px solid currentColor; border-radius: var(--radius, 6px);
  padding: .45rem .8rem; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.polls-connectivity button:focus-visible {
  outline: 3px solid var(--accent, #16533b); outline-offset: 4px;
}
.polls-connectivity button:disabled { opacity: .65; cursor: wait; }
html { scroll-padding-top: calc(var(--polls-offline-height, 0px) + 5rem); }
/* Only the legacy sticky header needs an offset; React is already below the spacer. */
.shell__header { top: var(--polls-offline-height, 0px); }