@layer components {
  /* Parts about this device are in the page from the start; the state written on <html> shows them. */
  .device-when { display: none; }
  html[data-notifications="true"][data-push-device="receiving"] .device-when[data-when~="receiving"],
  html[data-notifications="true"][data-push-device="not_here"] .device-when[data-when~="not_here"],
  html[data-notifications="true"][data-push-device="install"] .device-when[data-when~="install"],
  html[data-notifications="true"][data-push-device="blocked"] .device-when[data-when~="blocked"],
  html[data-notifications="true"][data-push-device="unsupported"] .device-when[data-when~="unsupported"] {
    display: var(--when-display, block);
  }

  /* One sentence per platform; only this browser's is shown. */
  .unblock-when { display: none; }
  html[data-device-platform="chromium"] .unblock-when[data-platform="chromium"],
  html[data-device-platform="firefox"] .unblock-when[data-platform="firefox"],
  html[data-device-platform="mac_safari"] .unblock-when[data-platform="mac_safari"],
  html[data-device-platform="android"] .unblock-when[data-platform="android"],
  html[data-device-platform="ios"] .unblock-when[data-platform="ios"] { display: inline; }

  /* A cached copy cannot activate anything. */
  html[data-offline-copy] .device-offline-hidden { display: none; }
}