/* The hover card (js/hover-card.js): what is known about a row of the file list, beside the list */
.lan-card {
    position: fixed; z-index: 2147482500;
    width: 300px; max-width: calc(100vw - 16px); box-sizing: border-box;
    padding: 10px 12px 11px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface, #fff); color: var(--text-primary);
    box-shadow: 0 8px 26px rgba(9, 24, 44, .18);
    font-size: 12.5px; line-height: 1.35;
    pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) { .lan-card { animation: lan-card-in 110ms ease-out; } }
@keyframes lan-card-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.lan-card-head { padding-bottom: 7px; margin-bottom: 7px; border-bottom: 1px solid var(--border); }
.lan-card-title { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.lan-card-sub { color: var(--text-secondary); font-size: 11.5px; margin-top: 1px; }
.lan-card-section + .lan-card-section { margin-top: 7px; }
.lan-card-heading { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 3px; }
.lan-card dl { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 2px 10px; margin: 0; }
.lan-card dt { color: var(--text-secondary); white-space: nowrap; }
.lan-card dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.lan-card dd.good { color: var(--success-color); }
.lan-card dd.warn { color: var(--warning-color); }
.lan-card dd.bad { color: var(--danger-color); }
.lan-card dd.live { color: #c1121f; font-weight: 600; }
.lan-card-note { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 11.5px; }