/* Connection banner (static/netstatus.js). A sticky strip in the page flow: it pushes content down
   and never overlaps the player controls. Empty (zero height) until the script shows a message. */
.net-live { position: sticky; top: 0; z-index: 70; }
.net-banner { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top, 0px)); font-size: .9rem; line-height: 1.35;
  background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--line); text-align: center; }
.net-banner[hidden] { display: none; }
.net-banner.net-ok { background: var(--success-bg, var(--surface-2)); color: var(--success, var(--text)); }
.net-msg { min-width: 0; overflow-wrap: anywhere; }
.net-x { flex: none; min-width: 44px; min-height: 44px; margin: -8px -8px -8px 0; padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.net-x:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; border-radius: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .net-banner:not([hidden]) { animation: net-in .18s ease-out; }
  @keyframes net-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}