/* Offline read cache, phase 1 (js/offlinecache.js, js/app.js applyOfflineMode).
   Shown only when the per-device flag "Keep pages available offline (beta)" is
   on AND the network is down: a calm banner over the page / database view, and
   every write control visibly off. Uses the shared tokens only (--gold is the
   same tint the sync indicator's offline state uses), so it follows dark mode. */

.offline-banner {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px;
  font-size: 13.5px; line-height: 1.4; text-align: center;
  color: var(--text);
  background: color-mix(in srgb, var(--gold) 16%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, var(--border));
}
.offline-banner[hidden] { display: none; }
.offline-banner::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
}

/* write controls while offline: still focusable (the tooltip says why), never active */
body.is-offline-ro [data-offline-off] {
  opacity: 0.45;
  cursor: not-allowed;
}
body.is-offline-ro #page-title,
body.is-offline-ro #editor .block-content { cursor: default; }

.settings-offline-usage:empty { display: none; }