.article-icon {
display: inline-block;
width: 30px;
height: 30px;
flex: 0 0 auto;
object-fit: contain;
vertical-align: middle;
filter: drop-shadow(0 0 2px #00e0ff66) drop-shadow(0 0 6px #00e0ff33);
}
.article-mark {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
min-height: 36px;
border-radius: 6px;
vertical-align: middle;
}
.article-mark:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }
.ops-cards .article-mark::after {
content: attr(data-article-label);
position: absolute;
z-index: 35;
left: 0;
top: calc(100% + 4px);
max-width: min(240px, calc(100vw - 56px));
width: max-content;
padding: 6px 9px;
border: 1px solid var(--border);
border-radius: 6px;
background: #101820;
color: var(--text);
box-shadow: 0 4px 12px #0008;
font: 12px/1.4 var(--font);
white-space: normal;
overflow-wrap: anywhere;
text-align: left;
pointer-events: none;
visibility: hidden;
opacity: 0;
}
.ops-cards .article-mark:focus::after, .ops-cards .article-mark:hover::after { visibility: visible; opacity: 1; }
.ops-cards .article-mark[data-article-label=""]::after { display: none; }
table.data td.article-cell { text-align: center; width: 66px; }
.msel-article .article-icon { width: 25px; height: 25px; }
.msel-article { min-height: 40px; }
.site-footer .article-attribution { font-size: 0.72rem; opacity: 0.8; }
@media (min-width: 701px) and (max-width: 1379px) {
.ops-table table.data td.article-cell { text-align: left; width: auto; }
}
@media (max-width: 700px) {
.article-mark { min-width: 44px; min-height: 40px; justify-content: flex-start; }
.article-icon { width: 32px; height: 32px; }
.msel-article { min-height: 44px; }
}