/* Compact controls layered onto the existing PWA status popover.
 * The automatic-update control intentionally reuses Header's global .panel-toggle component.
 */

.pwa-desktop-status-popover [data-rslive-desktop-pwa-actions],
.pwa-desktop-status-popover [data-rslive-desktop-pwa-note] {
  display: none !important;
}

/* Stage remains a presentation signal published by MascotSiteTitle, but it no longer owns a separate
 * visible row. Fold the active content/maps group into the existing progress label so stage changes do
 * not change the popover/mobile block height. `hidden` on the legacy desktop row remains the phase gate. */
.pwa-desktop-status-popover [data-rslive-desktop-pwa-stage-row],
.rslive-mobile-offline-progress__stage {
  display: none !important;
}

html[data-rslive-offline-busy='true'][data-rslive-offline-stage='content'] {
  --rslive-offline-stage-suffix: ' · материалы';
}

html[data-rslive-offline-busy='true'][data-rslive-offline-stage='maps'] {
  --rslive-offline-stage-suffix: ' · карты';
}

html:lang(en)[data-rslive-offline-busy='true'][data-rslive-offline-stage='content'] {
  --rslive-offline-stage-suffix: ' · content';
}

html:lang(en)[data-rslive-offline-busy='true'][data-rslive-offline-stage='maps'] {
  --rslive-offline-stage-suffix: ' · maps';
}

html:lang(sr)[data-rslive-offline-busy='true'][data-rslive-offline-stage='content'] {
  --rslive-offline-stage-suffix: ' · садржај';
}

html:lang(sr)[data-rslive-offline-busy='true'][data-rslive-offline-stage='maps'] {
  --rslive-offline-stage-suffix: ' · мапе';
}

html[data-rslive-offline-busy='true']
  .pwa-desktop-status-popover:has([data-rslive-desktop-pwa-stage-row]:not([hidden]))
  [data-rslive-desktop-pwa-label='progress']::after,
html[data-rslive-offline-busy='true']
  .rslive-mobile-offline-progress:is([data-state='downloading'], [data-state='paused'])
  [data-rslive-offline-progress-label]::after {
  content: var(--rslive-offline-stage-suffix, '');
}

/* The nav-edge progress line predates compact desktop offline controls and was originally gated to
 * installed standalone mode. Those controls can now start the same transactional preparation from an
 * ordinary desktop browser tab. Keep PWARegistration as the sole owner of phase/percentage, but make
 * its existing line visible on any desktop while preparation is actually active. Higher specificity is
 * intentional: it overrides the legacy `[hidden]`/`display-mode: browser` presentation gate only for
 * the states that PWARegistration already publishes as progress states. */
@media (min-width: 50rem) {
  html .rslive-desktop-offline-progress[data-state='downloading'] {
    display: block !important;
  }

  html[data-rslive-offline-preference='enabled'][data-rslive-offline-ready='false']
    .rslive-desktop-offline-progress:is([data-state='checking'], [data-state='paused'], [data-state='error']) {
    display: block !important;
  }
}

.pwa-desktop-status-popover__inline-control {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 0;
}

.pwa-desktop-status-popover__auto-toggle.panel-toggle {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}

.pwa-desktop-status-popover__trash {
  position: relative;
  display: inline-grid;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 1.55rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: var(--sl-color-gray-3);
  cursor: pointer;
}

.pwa-desktop-status-popover__trash:hover,
.pwa-desktop-status-popover__trash:focus-visible {
  background: var(--sl-color-bg-nav);
  color: #dc2626;
  outline: none;
}

.pwa-desktop-status-popover__trash:disabled {
  cursor: default;
  opacity: 0.35;
}

.pwa-desktop-status-popover__trash-icon {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v5M14 11v5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v5M14 11v5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .pwa-desktop-status-popover__auto-toggle.panel-toggle,
  .pwa-desktop-status-popover__auto-toggle .panel-toggle__check {
    transition: none;
  }
}