/* PWA runtime uses the shared component and theme contract. */
.pwa-status {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center;
  gap: var(--ui-space-3); max-width: var(--ui-page-width); margin: 0 auto var(--ui-space-4);
  padding: var(--ui-space-3) var(--ui-space-4); color: var(--text-secondary);
  font-size: 13px;
}
.app-main:has(> .page-container--narrow) > .pwa-status { max-width: var(--ui-form-width); }
.app-main:has(> .page-container--wide) > .pwa-status { max-width: var(--ui-detail-width); }
.pwa-status[hidden], .pwa-actions [hidden], .pwa-status-actions [hidden] { display: none; }
.pwa-status-icon { display: none; }
.pwa-status:has([data-pwa-update]) { grid-template-columns: auto minmax(0,1fr) auto; }
.pwa-status:has([data-pwa-update]) .pwa-status-icon {
  display: grid; place-items: center; width: var(--ui-control-height); height: var(--ui-control-height);
  border-radius: var(--ui-control-radius); background: var(--accent-light); color: var(--ui-primary);
}
.pwa-status:has([data-pwa-update]) .pwa-status-message {
  color: var(--text-primary); font-size: 16px; font-weight: 600; line-height: 1.45;
}
.pwa-status-message { min-width: 0; overflow-wrap: anywhere; }
.pwa-status[data-state="failed"], .pwa-status[data-state="conflicting"], .pwa-status[data-state="storageError"] { color: var(--ui-danger); }
.pwa-status:is([data-state="failed"],[data-state="conflicting"],[data-state="storageError"]) .pwa-status-message { color: inherit; }
.pwa-status:is([data-state="failed"],[data-state="conflicting"],[data-state="storageError"]) .pwa-status-icon { color: var(--ui-danger); background: var(--expense-light); }
.pwa-status-actions, .pwa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-1); }
.pwa-status-actions { gap: var(--ui-space-2); }
.pwa-status .pwa-status-actions .btn { width: auto; min-width: 0; flex: 0 0 auto; }
.pwa-status-actions .btn-ghost { padding-inline: var(--ui-space-1); font-size: 13px; }
.pwa-status-actions [data-pwa-update] { padding-inline: var(--ui-space-2); }
.pwa-status-actions:has([data-pwa-update]) > button:not([data-pwa-update]) { display: none; }
.pwa-status-actions:has([data-pwa-update][aria-busy="true"]) [data-pwa-news] { display: none; }
.pwa-device-page { min-height: 100dvh; padding: max(var(--ui-space-3),env(safe-area-inset-top)) max(var(--ui-space-2),env(safe-area-inset-right)) max(var(--ui-space-4),env(safe-area-inset-bottom)) max(var(--ui-space-2),env(safe-area-inset-left)); }
.pwa-device-heading .logo { margin-bottom: var(--ui-space-4); }
.pwa-device-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--ui-space-4); }
.pwa-device-controls p { margin: var(--ui-space-1) 0 0; }
.pwa-device-controls .pwa-actions { justify-content: flex-end; max-width: 330px; }
.pwa-device-columns { align-items: start; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--ui-space-4); margin-top: var(--ui-space-4); }
.pwa-device-columns > .card { min-width: 0; }
.pwa-device-columns .card-title { margin: 0; }
.pwa-device-row { display: grid; gap: var(--ui-space-1); padding-block: var(--ui-space-3); border-bottom: 1px solid var(--border); min-width: 0; overflow-wrap: anywhere; }
.pwa-device-row:first-child { padding-top: 0; }
.pwa-device-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pwa-device-row-title { font-weight: 600; color: var(--text-primary); }
.pwa-device-row-meta { color: var(--text-secondary); font-size: 13px; }
.pwa-form-message { margin-block: var(--ui-space-3); }
@media (max-width: 767px) {
  .pwa-status { padding: var(--ui-space-3); }
  .pwa-device-controls, .pwa-device-columns { grid-template-columns: minmax(0,1fr); }
  .pwa-device-controls .pwa-actions { max-width: none; justify-content: flex-start; }
  .pwa-actions .btn { flex: 1 1 auto; }
  .pwa-status-actions .btn { min-height: var(--ui-control-height); }
}
@media (display-mode: standalone) {
  .mobile-topbar { padding-top: max(var(--ui-space-2), env(safe-area-inset-top)); padding-left: max(var(--ui-space-3),env(safe-area-inset-left)); padding-right: max(var(--ui-space-3),env(safe-area-inset-right)); }
  .app-main { padding-bottom: max(var(--ui-space-3),env(safe-area-inset-bottom)); }
  .sidenav { padding-top: max(var(--ui-space-2),env(safe-area-inset-top)); padding-bottom: max(var(--ui-space-2),env(safe-area-inset-bottom)); }
}

.pwa-device-columns [data-pwa-pages] { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,170px),1fr)); gap: var(--ui-space-3); }
.pwa-device-columns [data-pwa-pages] .pwa-device-row { padding-block: 0 var(--ui-space-2); }
.pwa-device-row-meta [role="img"] { color: var(--ui-primary); margin-inline-start: 6px; }
@media (max-width: 540px) {
  .pwa-status { grid-template-columns: minmax(0,1fr); }
  .pwa-status:has([data-pwa-update]) { grid-template-columns: auto minmax(0,1fr); gap: var(--ui-space-2); }
  .pwa-status-actions { grid-column: 1 / -1; }
  .pwa-status:has(button) .pwa-status-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pwa-status-actions:has([data-pwa-update][aria-busy="true"]) { grid-template-columns: minmax(0,1fr); }
}

.pwa-actions .btn[aria-busy="true"]::before,
.pwa-status-actions .btn[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; flex: 0 0 auto;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: pwa-spin .9s linear infinite;
}
@keyframes pwa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pwa-actions .btn[aria-busy="true"]::before,
  .pwa-status-actions .btn[aria-busy="true"]::before { animation: none; }
}