/* Keep the existing ribbon geometry and hover/touch behaviour when switched off. */
html.csp-ribbons-always-visible .resource-ribbon-panel {
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  right: 0;
  transform: translateX(0);
  visibility: visible;
}
/* Remove the hamburger and its reserved panel offset while pinned open. */
html.csp-ribbons-always-visible .resource-ribbon-toggle { display: none; }
.csp-ribbon-preference { margin-bottom: .75rem; color: #626b69; font-size: .8rem; }
.csp-ribbon-preference label { display: inline-flex; align-items: center; gap: .5rem; position: relative; cursor: pointer; }
.csp-ribbon-preference input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.csp-ribbon-switch { display: inline-block; flex-shrink: 0; width: 30px; height: 18px; border-radius: 999px; background: #929b99; transition: background-color .2s; }
.csp-ribbon-switch::after { content: ''; display: block; width: 14px; height: 14px; margin: 2px; border-radius: 50%; background: #fff; transition: transform .2s; }
.csp-ribbon-preference input:checked + .csp-ribbon-switch { background: #4c9f95; }
.csp-ribbon-preference input:checked + .csp-ribbon-switch::after { transform: translateX(12px); }
.csp-ribbon-preference input:focus-visible + .csp-ribbon-switch { outline: 2px solid #4c9f95; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .csp-ribbon-switch, .csp-ribbon-switch::after { transition: none; }
}