/** *** Progressive Enhancement - Stage 1 of 3 (Semantic HTML) *** Use Acronyms to shorten both scrollbars and read-time. *** Use ABBR tags on those acronyms to add a hover-over effect revealing their meaning. *** *** Progressive Enhancement - Stage 2 of 3 (CSS-enhanced) *** Hidden Checkbox/Toggle for users to visually expand/collapse ABBR-tags. *** Cost: Extra markup, boo. (Velocity makes it easier though.) *** *** Progressive Enhancement - Stage 3 of 3 (JS-enhanced) *** Remove the extra markup, add a click Listener. */
 ABBR[title]{
     text-decoration-color: #00cc81d4;
     text-underline-offset: 4px;
     cursor: help;
     --abbrTitle: attr(title);
    /* Pass the container's `title` attribute down to children */
     position:relative;
    /* `static` -> `relative`;
     we need to establish new positional context layer / scope. */
    /* Nested LABEL with its own nested input[CHECKBOX] */
     & > LABEL{
        /* Stretch clickable region to cover the entire parent ABBR */
         position:absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
         margin-bottom:0;
        /* Remove older style. */
         cursor:help;
        /* inherit ABBR's `help` cursor through. */
        /* Hide the checkbox from view (and screen readers) */
         & > INPUT[type="checkbox"]{
             display:none 
        }
    }
    /* If the area of the LABEL is clicked (causing the [hidden] checkbox to become "checked"): */
     &:has(:checked){
         font-size:0;
        /* [Visually] Hide the original text */
         text-decoration-color: #00cc8144;
        /* Tone-down the ABBR underline's opacity. */
         display:inline;
         & LABEL::AFTER{
             content: var(--abbrTitle);
            /* Display the value of the ABBR's [title] attribute. */
             font-size: .8854rem;
             margin-bottom:0;
        }
         & LABEL{
            /* cursor:pointer;
            /* Hint that it can be toggled back into its acronym */
             position:static;
             display:inline;
        }
    }