@layer components {
  /* Neutral, never red: being offline is no fault. Under a thread's header; elsewhere atop the column. */
  .connection-banner {
    flex: none; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px var(--gutter);
    border-bottom: 1px solid var(--border); background: var(--muted); color: var(--foreground); font-size: 0.875rem;
  }
  .connection-banner[hidden] { display: none; }
  .connection-banner-icon { display: flex; flex: none; color: var(--muted-foreground); }
  .connection-banner-icon > svg { width: 17px; height: 17px; }
  /* The clock for a page not synced yet, the cut network for the rest. */
  .connection-banner[data-state="stale"] [data-icon="offline"],
  .connection-banner:not([data-state="stale"]) [data-icon="stale"] { display: none; }
  .connection-banner-text { min-width: 0; }
  .connection-banner-detail { margin-left: auto; color: var(--muted-foreground); font-size: var(--text-meta); }
  .connection-banner-detail[hidden] { display: none; }
  /* Atop a page's column, the banner is a card within its padding. */
  .app-main > .connection-banner { margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
  /* A column without padding gives the card the margin it lacks. */
  .app-main--flush > .connection-banner { margin: var(--gutter) var(--gutter) 16px; }

  /* A file or document that needs the network says so while a page is shown from its offline copy. */
  .offline-unavailable { margin: 6px 0 0; color: var(--muted-foreground); font-size: var(--text-meta); }

  @media (min-width: 1100px) {
    /* On the desktop, a thread's banner tops the column, above the header. */
    .conversation > .connection-banner { order: -1; }
  }
}