/* public/css/mobile/offline.css
 * DCM offline-state foundation (offline-first restore, Phase 0).
 *
 * - .dcm-offline-pill — small fixed chip, hidden unless body.dcm-offline is
 *   set by helpers/offlineState.js. Copy stays "Offline" — cold-offline PIN
 *   unlock (offlineUnlock.js) boots the same writable shell as a warm
 *   offline session, no separate read-only mode/copy.
 * - .dcm-offline .offline-disabled — shared dimmed/disabled affordance later
 *   phases apply to controls that don't work offline at all (offline-screen
 *   gating). The `.dcm-offline-read` variant is dead — that body class was
 *   set by a since-removed read-only mode and nothing sets it anymore.
 * - .dcm-pending-badge — base styles for the future write-queue "not yet
 *   submitted" badge (offline writes phase). Defined now so later phases
 *   only need to add the class where a queued item renders.
 *
 * Token-driven (ADR-030) via the --dcm-* aliases in dcm.css, which itself
 * maps onto the shared --ds-*/--cc13-* tokens — no hardcoded brand colors.
 */

.dcm-offline-pill {
  display: none;
  position: fixed;
  top: calc(var(--dcm-topbar-h) + env(safe-area-inset-top) + 8px);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--dcm-warning);
  background: var(--dcm-warning-wash);
  border: 1px solid var(--dcm-warning);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 30;
  pointer-events: none;
}

body.dcm-offline .dcm-offline-pill {
  display: flex;
}

.dcm-offline .offline-disabled,
.dcm-offline-read .offline-disabled {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(40%);
}

.dcm-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--dcm-warning);
  background: var(--dcm-warning-wash);
  border-radius: 999px;
  white-space: nowrap;
}