/* ART-102 dual-glyph hatch. Opt-in: ?highlight=dual
   Default highlighting.css stays one .word + transition: all (Chrome butter).
   Two pre-drawn faces. Never paint both — 400 and 700 glyphs have different
   widths, so a crossfade looks like a blur. Wrapper still eases scale/opacity. */

html[data-highlight="dual"] #pageViewDisplay .word,
html[data-highlight="dual"] #pageViewDisplay .word-lite {
    display: inline-grid;
    justify-items: start;
    align-items: baseline;
    vertical-align: baseline;
    position: relative;
    font-weight: 400;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

html[data-highlight="dual"] #pageViewDisplay .word.active,
html[data-highlight="dual"] #pageViewDisplay .word-lite.active {
    display: inline-grid;
    font-weight: 400;
    vertical-align: middle;
}

html[data-highlight="dual"] #pageViewDisplay .word.lookahead,
html[data-highlight="dual"] #pageViewDisplay .word-lite.lookahead,
html[data-highlight="dual"] #pageViewDisplay .word.lookback,
html[data-highlight="dual"] #pageViewDisplay .word-lite.lookback,
html[data-highlight="dual"] #pageViewDisplay .word.inactive-read,
html[data-highlight="dual"] #pageViewDisplay .word-lite.inactive-read,
html[data-highlight="dual"] #pageViewDisplay .word.inactive-future,
html[data-highlight="dual"] #pageViewDisplay .word-lite.inactive-future,
html[data-highlight="dual"] #pageViewDisplay .word.selected,
html[data-highlight="dual"] #pageViewDisplay .word-lite.selected {
    font-weight: 400;
}

html[data-highlight="dual"] #pageViewDisplay .word.paused-word,
html[data-highlight="dual"] #pageViewDisplay .word-lite.paused-word {
    font-weight: 400 !important;
}

html[data-highlight="dual"] #pageViewDisplay .word-face {
    grid-area: 1 / 1;
    transition: none;
}

html[data-highlight="dual"] #pageViewDisplay .word-face-light {
    font-weight: 400;
    opacity: 1;
    visibility: visible;
}

html[data-highlight="dual"] #pageViewDisplay .word-face-heavy {
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
}

html[data-highlight="dual"] #pageViewDisplay .word.active .word-face-light,
html[data-highlight="dual"] #pageViewDisplay .word-lite.active .word-face-light,
html[data-highlight="dual"] #pageViewDisplay .word.paused-word .word-face-light,
html[data-highlight="dual"] #pageViewDisplay .word-lite.paused-word .word-face-light,
html[data-highlight="dual"] #pageViewDisplay .word.selected .word-face-light,
html[data-highlight="dual"] #pageViewDisplay .word-lite.selected .word-face-light {
    opacity: 0;
    visibility: hidden;
}

html[data-highlight="dual"] #pageViewDisplay .word.active .word-face-heavy,
html[data-highlight="dual"] #pageViewDisplay .word-lite.active .word-face-heavy,
html[data-highlight="dual"] #pageViewDisplay .word.paused-word .word-face-heavy,
html[data-highlight="dual"] #pageViewDisplay .word-lite.paused-word .word-face-heavy,
html[data-highlight="dual"] #pageViewDisplay .word.selected .word-face-heavy,
html[data-highlight="dual"] #pageViewDisplay .word-lite.selected .word-face-heavy {
    opacity: 1;
    visibility: visible;
}