.cl-sr-only, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.cl-skip {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 10001; padding: 0.7rem 1.1rem; border-radius: 0.75rem;
  background: rgb(var(--cl-fill, var(--color-indigo-600))); color: #fff; font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.cl-skip:focus { transform: none; }

html :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"], [contenteditable="true"]):focus-visible {
  outline: 2px solid rgb(var(--color-indigo-300)) !important;
  outline-offset: 2px !important;
}
html :where(.main:focus, [role="dialog"]:focus, [data-cl-trap]:focus) { outline: none; }

html .sp-btn, html .sp-tab.is-active, html .sp-unread, html .cm-btn, html .cm-pill.is-active, html .cm-pager .is-active, html .dc-btn, html .tm-button {
  --sp-accent: rgb(var(--cl-fill, var(--color-indigo-600)));
  --cm-accent: rgb(var(--cl-fill, var(--color-indigo-600)));
  --dc-accent: rgb(var(--cl-fill, var(--color-indigo-600)));
  --tm-accent: rgb(var(--cl-fill, var(--color-indigo-600)));
}
html .sg-btn, html .sg-page.is-active { --sg-accent: rgb(var(--cl-fill, var(--color-indigo-600))); }
html .nt-button, html .bg-indigo-500.text-white { --color-indigo-500: var(--cl-fill, var(--color-indigo-600)); }

html .cm { --cm-faint: rgb(255 255 255 / 0.62); }
html .sg-wrap { --sg-faint: rgb(255 255 255 / 0.62); }
html .nt-item-time { color: rgb(255 255 255 / 0.62); }
html .sp-input::placeholder, html .sg-input::placeholder, html .sg-textarea::placeholder, html .cm-input::placeholder { color: rgb(255 255 255 / 0.55); }
html .sg-server-desc { color: rgb(255 255 255 / 0.62); }
html .sgc-number, html .sgh-number, html .sgi-number { color: rgb(255 255 255 / 0.62); }
html .text-gray-500 { color: rgb(161 161 170); }

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}
