/*
 * IT DAO cursors: native fallback plus optional HiDPI enhancement. Load after the site's existing styles.
 * One black-outlined arrow is used on ordinary and clickable content.
 * Display canvas: 32 × 32 CSS px; 128 × 128 px image for sharp HiDPI display.
 * Visible arrow remains approximately 24–26 px tall. Hotspot: 6 4.
 * URLs are relative to this stylesheet, so this folder can be hosted anywhere.
 */
@media (hover: hover) and (pointer: fine) {
  html:root {
    --it-dao-cursor-default: url("./cursor-default-32.png") 6 4, default;
    --it-dao-cursor-current: var(--it-dao-cursor-default);
    --it-dao-cursor-mode: default;
  }

  /* Browsers that support density-aware cursor images may also use the 4x
   * artwork natively. Keep the proven small PNG next in the cursor list: some
   * browsers cap native cursor resource dimensions even with a density hint.
   */
  @supports (cursor: image-set(url("./cursor-default-128.png") 4x) 6 4, default) {
    html:root {
      --it-dao-cursor-default: image-set(url("./cursor-default-128.png") 4x) 6 4,
        url("./cursor-default-32.png") 6 4, default;
    }
  }

  /* Native fallback remains available until the visual cursor image is ready.
   * These variables inherit through icons, SVGs and nested control labels.
   * Important overrides the site's ordinary cursor:pointer declarations.
   */
  html:root,
  html:root body,
  html:root body *,
  html:root body *::before,
  html:root body *::after {
    cursor: var(--it-dao-cursor-current, var(--it-dao-cursor-default)) !important;
  }

  /* The old landing cursor follows the mouse as a DOM overlay. The shared
   * native cursor replaces it, including its rule that hides the system one.
   */
  html:root body .dao-reference-cursor {
    display: none !important;
    visibility: hidden !important;
  }
  html:root.dao-reference-running,
  html:root.dao-reference-running body,
  html:root.dao-reference-running body *,
  html:root.dao-reference-running body *::before,
  html:root.dao-reference-running body *::after {
    cursor: var(--it-dao-cursor-current, var(--it-dao-cursor-default)) !important;
  }

  /* Keep an insertion caret in fields and rich text editors. The native
   * arrow is used again inside explicitly non-editable editor content.
   */
  html:root body :where(
    textarea,
    input:not(:is([type="button"], [type="submit"], [type="reset"], [type="image"],
      [type="checkbox"], [type="radio"], [type="range"], [type="file"],
      [type="color"], [type="hidden"])),
    [contenteditable=""],
    [contenteditable="true"],
    [contenteditable="plaintext-only"],
    [role="textbox"]
  ) {
    --it-dao-cursor-current: text;
    --it-dao-cursor-mode: native;
  }

  html:root body :where([contenteditable="false"]) {
    --it-dao-cursor-current: var(--it-dao-cursor-default);
    --it-dao-cursor-mode: default;
  }

  /* Preserve explicit native drag/resize/busy semantics. Components may also
   * opt into these using data-cursor="grab", data-cursor="ew-resize", etc.
   * Matching style attributes does not inspect or execute application code.
   */
  html:root body :where([data-cursor="auto"], .cursor-auto,
    [style*="cursor: auto" i], [style*="cursor:auto" i]) {
    --it-dao-cursor-current: auto;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="default"], .cursor-default,
    [style*="cursor: default" i], [style*="cursor:default" i]) {
    --it-dao-cursor-current: var(--it-dao-cursor-default);
    --it-dao-cursor-mode: default;
  }
  html:root body :where([data-cursor="text"], .cursor-text,
    [style*="cursor: text" i], [style*="cursor:text" i]) {
    --it-dao-cursor-current: text;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="vertical-text"], .cursor-vertical-text,
    [style*="cursor: vertical-text" i], [style*="cursor:vertical-text" i]) {
    --it-dao-cursor-current: vertical-text;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="grab"], .cursor-grab,
    [style*="cursor: grab" i], [style*="cursor:grab" i], [draggable="true"]) {
    --it-dao-cursor-current: grab;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="grabbing"], .cursor-grabbing,
    [style*="cursor: grabbing" i], [style*="cursor:grabbing" i]) {
    --it-dao-cursor-current: grabbing;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="move"], .cursor-move,
    [style*="cursor: move" i], [style*="cursor:move" i]) {
    --it-dao-cursor-current: move;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="crosshair"], .cursor-crosshair,
    [style*="cursor: crosshair" i], [style*="cursor:crosshair" i]) {
    --it-dao-cursor-current: crosshair;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="col-resize"], .cursor-col-resize,
    [style*="cursor: col-resize" i], [style*="cursor:col-resize" i]) {
    --it-dao-cursor-current: col-resize;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="row-resize"], .cursor-row-resize,
    [style*="cursor: row-resize" i], [style*="cursor:row-resize" i]) {
    --it-dao-cursor-current: row-resize;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="n-resize"], .cursor-n-resize,
    [style*="cursor: n-resize" i], [style*="cursor:n-resize" i]) {
    --it-dao-cursor-current: n-resize;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="e-resize"], .cursor-e-resize,
    [style*="cursor: e-resize" i], [style*="cursor:e-resize" i]) {
    --it-dao-cursor-current: e-resize;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="s-resize"], .cursor-s-resize,
    [style*="cursor: s-resize" i], [style*="cursor:s-resize" i]) {
    --it-dao-cursor-current: s-resize;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="w-resize"], .cursor-w-resize,
    [style*="cursor: w-resize" i], [style*="cursor:w-resize" i]) {
    --it-dao-cursor-current: w-resize;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="ne-resize"], .cursor-ne-resize,
    [style*="cursor: ne-resize" i], [style*="cursor:ne-resize" i]) {
    --it-dao-cursor-current: ne-resize;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="nw-resize"], .cursor-nw-resize,
    [style*="cursor: nw-resize" i], [style*="cursor:nw-resize" i]) {
    --it-dao-cursor-current: nw-resize;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="se-resize"], .cursor-se-resize,
    [style*="cursor: se-resize" i], [style*="cursor:se-resize" i]) {
    --it-dao-cursor-current: se-resize;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="sw-resize"], .cursor-sw-resize,
    [style*="cursor: sw-resize" i], [style*="cursor:sw-resize" i]) {
    --it-dao-cursor-current: sw-resize;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="ew-resize"], .cursor-ew-resize,
    [style*="cursor: ew-resize" i], [style*="cursor:ew-resize" i]) {
    --it-dao-cursor-current: ew-resize;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="ns-resize"], .cursor-ns-resize,
    [style*="cursor: ns-resize" i], [style*="cursor:ns-resize" i]) {
    --it-dao-cursor-current: ns-resize;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="nesw-resize"], .cursor-nesw-resize,
    [style*="cursor: nesw-resize" i], [style*="cursor:nesw-resize" i]) {
    --it-dao-cursor-current: nesw-resize;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="nwse-resize"], .cursor-nwse-resize,
    [style*="cursor: nwse-resize" i], [style*="cursor:nwse-resize" i]) {
    --it-dao-cursor-current: nwse-resize;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="zoom-in"], .cursor-zoom-in,
    [style*="cursor: zoom-in" i], [style*="cursor:zoom-in" i]) {
    --it-dao-cursor-current: zoom-in;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="zoom-out"], .cursor-zoom-out,
    [style*="cursor: zoom-out" i], [style*="cursor:zoom-out" i]) {
    --it-dao-cursor-current: zoom-out;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="wait"], .cursor-wait,
    [style*="cursor: wait" i], [style*="cursor:wait" i]) {
    --it-dao-cursor-current: wait;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="progress"], .cursor-progress,
    [style*="cursor: progress" i], [style*="cursor:progress" i]) {
    --it-dao-cursor-current: progress;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([data-cursor="not-allowed"], .cursor-not-allowed,
    [style*="cursor: not-allowed" i], [style*="cursor:not-allowed" i]) {
    --it-dao-cursor-current: not-allowed;
    --it-dao-cursor-mode: native;
  }

  /* Embedded documents and native media controls render their own cursor. */
  html:root body :where(iframe, object, embed, video[controls], audio[controls],
    [data-cursor="native"], [data-cursor="native"] *) {
    --it-dao-cursor-current: auto;
    --it-dao-cursor-mode: native;
  }

  /* Apply to descendants as well, even when they are actionable controls. */
  html:root body :where([aria-busy="true"], [aria-busy="true"] *,
    [data-loading="true"], [data-loading="true"] *) {
    --it-dao-cursor-current: progress;
    --it-dao-cursor-mode: native;
  }
  html:root body :where(:disabled, :disabled *,
    [aria-disabled="true"], [aria-disabled="true"] *) {
    --it-dao-cursor-current: not-allowed;
    --it-dao-cursor-mode: native;
  }
  html:root body :where([inert], [inert] *) {
    --it-dao-cursor-current: var(--it-dao-cursor-default);
    --it-dao-cursor-mode: default;
  }
}

/* JavaScript adds this flag only while a loaded visual cursor is visible. */
@media (hover: hover) and (pointer: fine) {
  html:root[data-it-dao-cursor-v6-active] {
    --it-dao-cursor-default: none;
  }
}

#it-dao-cursor-animated-v6 {
  all: initial !important;
  position: fixed !important;
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  user-select: none !important;
  visibility: hidden !important;
  will-change: transform !important;
}
#it-dao-cursor-animated-v6[data-visible] {
  visibility: visible !important;
}
#it-dao-cursor-animated-v6::backdrop {
  display: none !important;
  pointer-events: none !important;
}
#it-dao-cursor-animated-v6 > img {
  all: initial !important;
  position: absolute !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  max-width: none !important;
  max-height: none !important;
  pointer-events: none !important;
  visibility: inherit !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}
#it-dao-cursor-animated-v6 > .it-dao-cursor-default {
  left: -6px !important;
  top: -4px !important;
  width: 32px !important;
  height: 32px !important;
  opacity: 1 !important;
}

/* There is one visual state and no interpolation, including under reduced motion. */

/* A backdrop is outside the ordinary inheritance chain in some browsers.
 * Give native modal/backdrop hit testing the same unchanged branded artwork.
 */
@media (hover: hover) and (pointer: fine) {
  html:root body dialog::backdrop {
    cursor: url("./cursor-default-32.png") 6 4, default !important;
  }
  @supports (cursor: image-set(url("./cursor-default-128.png") 4x) 6 4, default) {
    html:root body dialog::backdrop {
      cursor: image-set(url("./cursor-default-128.png") 4x) 6 4,
        url("./cursor-default-32.png") 6 4, default !important;
    }
  }
  html:root[data-it-dao-cursor-v6-active] body dialog::backdrop {
    cursor: none !important;
  }
}