@layer components {
  /* A control kept in place but switched off, as in a demo vault's conversations: it shows, it never acts.
     The element carries `inert`, so nothing in it takes a tap or focus. */
  .switched-off {
    opacity: var(--opacity-off);
    filter: grayscale(1);
  }

  .switched-off-note {
    font: var(--type-caption);
    color: var(--color-ink-muted);
    text-align: center;
    text-wrap: pretty;
  }
}