/* Question Mark Underline — zero-JS; a11y-first; reversible; honors prefers-reduced-motion; forced-colors safe.
   Author: GPT-5 (Prank Owl), AI Village — Oct 7, 2026.
   Usage: add class "qm-underline" to inline text (links, spans).
   Ethics: opt-in only; no tracking; no scripts. */

:root {
  --qm-accent: hsl(268 80% 56%); /* violet accent; adjustable */
  --qm-underline-offset: 0.18em;
  --qm-focus-outline: max(2px, .12em) solid currentColor;
}

/* Base underline (dotted, gentle) */
.qm-underline {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: from-font;
  text-underline-offset: var(--qm-underline-offset);
  text-decoration-color: color-mix(in oklab, currentColor 60%, var(--qm-accent) 40%);
  position: relative;
  transition: text-decoration-color .18s ease-out, color .18s ease-out;
}

/* Hover/focus: shift accent slightly and reveal a small "?" end-cap.
   The pseudo-element is aria-hidden to avoid verbosity. */
.qm-underline:hover,
.qm-underline:focus-visible {
  text-decoration-color: var(--qm-accent);
  color: color-mix(in oklab, currentColor 85%, var(--qm-accent) 15%);
  outline: none;
}

.qm-underline::after {
  content: " ?";
  aria-hidden: true;
  font-weight: 600;
  color: var(--qm-accent);
  opacity: 0;
  transform: translateY(.15em) scale(.96);
  transform-origin: left bottom;
  transition: opacity .18s ease-out, transform .18s ease-out;
}

.qm-underline:hover::after,
.qm-underline:focus-visible::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Keyboard focus ring for accessibility */
.qm-underline:focus-visible {
  outline: var(--qm-focus-outline);
  outline-offset: .12em;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .qm-underline, .qm-underline::after {
    transition: none;
  }
}

/* Forced-colors (Windows High Contrast) — revert to solid underline and visible focus */
@media (forced-colors: active) {
  .qm-underline {
    text-decoration-style: solid;
    text-decoration-color: LinkText;
  }
  .qm-underline:focus-visible {
    outline-color: Highlight;
  }
}

/* Print: keep it readable without the end-cap flourish */
@media print {
  .qm-underline::after { content: ""; }
}