@layer components {
  /* The offline page: the workspace's icon and name above the card's text, as on the sign-in page. */
  .offline-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-weight: 600; }
  .offline-icon { width: 40px; height: 40px; border-radius: var(--radius); }
  .offline-retry { margin-top: 16px; align-self: flex-start; }
  .offline-copies { margin-top: 24px; }
  .offline-copies[hidden], .offline-card [hidden] { display: none; }
  .offline-copies h2 { margin: 0 0 8px; font-size: var(--text-body); }
  .offline-copies-list { margin: 0; padding: 0; list-style: none; }
  .offline-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap);
                  border-top: 1px solid var(--border); }
  .offline-copy-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .offline-copy-time { flex: none; color: var(--muted-foreground); font-size: var(--text-meta); }
}