/* Glossary tooltip styles — active only when [data-glossary="on"] is set on */ html[data-glossary="on"] .glossary-term { border-bottom: 1px dotted var(--pst-color-secondary, #7ee787); cursor: help; position: relative; } html:not([data-glossary="on"]) .glossary-term { /* No visual change when glossary is off */ } .glossary-tooltip { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--pst-color-surface, #1e1e2e); color: var(--pst-color-text-base, #cdd6f4); border: 1px solid var(--pst-color-border, #45475a); border-radius: 6px; padding: 8px 12px; font-size: 0.85rem; line-height: 1.4; max-width: 360px; min-width: 200px; z-index: 1000; white-space: normal; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); pointer-events: none; } html[data-glossary="on"] .glossary-term:hover .glossary-tooltip, html[data-glossary="on"] .glossary-term:focus .glossary-tooltip { display: block; } .glossary-tooltip .glossary-ref { display: block; margin-top: 4px; font-size: 0.8em; opacity: 0.7; } #glossary-toggle { position: fixed; bottom: 16px; right: 16px; z-index: 999; background: var(--pst-color-surface, #1e1e2e); color: var(--pst-color-text-base, #cdd6f4); border: 1px solid var(--pst-color-border, #45475a); border-radius: 6px; padding: 6px 12px; font-size: 0.8rem; cursor: pointer; opacity: 0.6; transition: opacity 0.2s; } #glossary-toggle:hover { opacity: 1; }