/* Offline bar and pending-changes sheet */
.offline-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .9rem; font-weight: 600; font-size: .92rem; background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid var(--border); }
.offline-bar[hidden] { display: none; }
.offline-bar[data-state="syncing"] { background: var(--surface-2); color: var(--text, inherit); }
.offline-bar[data-state="failed"] { background: var(--fail-bg); color: var(--danger); }
.offline-bar .ob-btn { font: inherit; font-weight: 700; min-height: 36px; padding: .2rem .8rem; border-radius: .5rem; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.pending-item { display: flex; gap: .6rem; align-items: flex-start; justify-content: space-between; padding: .6rem .2rem; border-bottom: 1px solid var(--border); }
.pending-item .body { flex: 1; min-width: 0; }
.pending-item .title { font-weight: 700; overflow-wrap: anywhere; }
.pending-item .meta { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: var(--muted, #667); }
.pending-item .err { color: var(--danger); font-size: .88rem; margin-top: .25rem; }
.pending-item .actions { display: flex; flex-direction: column; gap: .35rem; }
.pending-item[data-status="failed"] { background: var(--fail-bg); }