:root {
  --fw-auth-decode-ready: 1;
}

@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .auth-decode-pending :is(.auth-stage, .auth-language summary) {
    -webkit-text-fill-color: transparent;
  }
  .auth-decode-pending :is(.auth-stage, .auth-stage *, .auth-language summary) {
    text-shadow: none;
  }
  .auth-decode-pending .auth-stage :is(input, textarea, select, option, [contenteditable],
      [aria-live], [role="status"], .auth-alert, .auth-dev-reset, .auth-password-meter) {
    -webkit-text-fill-color: currentColor;
  }
}

/* Highlight only the paint: the original text still controls layout and labels. */
::highlight(fw-auth-decode) {
  color: transparent;
  text-shadow: none;
}

.auth-decode-layer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
}

.auth-decode-glyph {
  position: absolute;
  display: grid;
  place-items: center;
  overflow: hidden;
  white-space: pre;
  letter-spacing: 0;
  text-indent: 0;
  text-transform: none;
  opacity: .74;
  text-shadow: 0 0 7px currentColor;
  transition: opacity 110ms ease-out, filter 110ms ease-out;
}

.auth-decode-glyph.is-resolved {
  opacity: 0;
  filter: blur(2px);
}

.auth-decode-layer--compact .auth-decode-glyph {
  text-shadow: none;
  transition: opacity 80ms ease-out;
}

.auth-decode-layer--compact .auth-decode-glyph.is-resolved {
  filter: none;
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  ::highlight(fw-auth-decode) {
    color: inherit;
    text-shadow: none;
  }

  .auth-decode-layer {
    display: none;
  }
}