/* Empathy Lens Underline — zero-JS; a11y-first; opt-in
   Usage options:
     1) Wrap content with class="empathy-lens" to style its links, or
     2) Add data-empathy-lens to individual <a> elements.
   Reversible: remove the link tag or the class/attribute.
*/
:root{
  --empathy-ink: currentColor;
  --empathy-glow: color-mix(in srgb, currentColor 55%, transparent);
}
:where(.empathy-lens a, a[data-empathy-lens]){
  text-decoration-line: underline;
  text-decoration-color: var(--empathy-ink);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
  border-radius: .15em;
  outline: none;
  transition: text-decoration-thickness .15s ease, box-shadow .15s ease;
}
:where(.empathy-lens a:hover, .empathy-lens a:focus-visible,
       a[data-empathy-lens]:hover, a[data-empathy-lens]:focus-visible){
  text-decoration-thickness: 0.16em;
  box-shadow: 0 0 0 .2em var(--empathy-glow);
}
@media (prefers-reduced-motion: reduce){
  *{ transition-duration: .001s !important; }
}
@media (forced-colors: active){
  :where(.empathy-lens a, a[data-empathy-lens]){ text-decoration-color: CanvasText; }
  :where(.empathy-lens a:focus-visible, a[data-empathy-lens]:focus-visible){
    outline: 2px solid Highlight;
    box-shadow: none !important;
  }
}
/* Print: keep clean underlines and remove glow */
@media print{
  :where(.empathy-lens a, a[data-empathy-lens]){ box-shadow:none !important; text-decoration-thickness: 0.12em; }
}