@layer components {
  /* ——— Notification help ———
     The recipes behind "Notifications aren't allowed" (settings/notifications,
     pwa/_*_settings): a disclosure each, numbered steps inside, the other
     product's controls drawn inline where the step names them. Chalet's,
     in the house voice: a hairline box, the summary a quiet button. */
  .notifications-help {
    padding: var(--block-space-half) var(--inline-space);
    border: var(--border);
    border-radius: var(--border-radius);

    & + .notifications-help {
      margin-block-start: var(--block-space-half);
    }

    summary {
      display: flex;
      align-items: center;
      gap: var(--inline-space);
      list-style: none;
      cursor: pointer;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    h3 {
      margin-block: var(--block-space) var(--block-space-half);
    }

    ol {
      padding-inline-start: var(--inline-space-double);
    }

    li {
      margin-block: var(--block-space-half);
    }

    /* Pictures of somebody else's controls, in the line that names them. */
    img {
      display: inline;
      vertical-align: text-top;
    }
  }

  /* Inverted for the dark theme the way the theme is decided everywhere
     (utilities.css): the stored choice first, the system's only without one. */
  html[data-theme="dark"] .notifications-help img { filter: invert(1); }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .notifications-help img { filter: invert(1); }
  }
}