.student-signal { position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; min-width: 26px; min-height: 26px; margin: 2px 3px; padding: 2px 4px; border: 1px solid #dce5df; border-radius: 7px; background: #f7faf8; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 17px; line-height: 1.2; cursor: help; }
.student-signal:focus-visible { outline: 2px solid #286620; outline-offset: 2px; }
.student-signal:is(:hover, :focus)::after { content: attr(data-label); position: absolute; z-index: 100; top: 100%; left: 0; width: max-content; max-width: min(240px, 65vw); padding: 7px 9px; border-radius: 5px; background: #183c2a; color: #fff; font: 500 12px/1.4 "DM Sans", sans-serif; white-space: normal; text-align: left; box-shadow: 0 3px 12px #0002; pointer-events: none; }
@media print { .student-signal::after { display: none; } }