/* CBOM cursor: a classifier reticle leaving graded assets behind it. The trail tiles carry the same risk-band weighting as the background — mostly fine, a few things that are not — because that distribution is what an actual inventory looks like. */ .cb-cursor { position: fixed; top: 0; left: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; z-index: 9999; pointer-events: none; border: 1px solid rgba(56, 189, 248, 0.8); border-radius: 3px; transition: transform 0.12s ease-out, border-color 0.2s ease; will-change: transform; } /* Crosshair inside the reticle. */ .cb-cursor::before, .cb-cursor::after { content: ''; position: absolute; background: rgba(56, 189, 248, 0.55); } .cb-cursor::before { left: 50%; top: 3px; bottom: 3px; width: 1px; margin-left: -0.5px; } .cb-cursor::after { top: 50%; left: 3px; right: 3px; height: 1px; margin-top: -0.5px; } .cb-cursor-active { transform: scale(1.4); border-color: rgba(74, 222, 128, 0.95); } .cb-cursor-tile { position: fixed; top: 0; left: 0; width: 10px; height: 5px; margin: -2.5px 0 0 -5px; z-index: 9998; pointer-events: none; border-radius: 1px; will-change: transform, opacity; } /* Risk bands, matching the page's own scale. */ .cb-cursor-low { background: rgba(74, 222, 128, 0.65); } .cb-cursor-medium { background: rgba(250, 204, 21, 0.65); } .cb-cursor-high { background: rgba(249, 115, 22, 0.7); } .cb-cursor-critical { background: rgba(239, 68, 68, 0.8); } /* ── Hiding the native pointer ──────────────────────────────────────── */ /* * Gated behind a class the cursor script adds to once its elements are * in the DOM, never applied from CSS alone. If the script fails to load or * throws, the class is never set and the real pointer stays — a page that hides * the system cursor and then does not draw a replacement is unusable, and CSS * has no way to know whether the replacement arrived. * * The universal selector is deliberate: `cursor` is not inherited in the way * that matters here — links, buttons and resizable edges all set their own, so * hiding it on `body` alone leaves the arrow reappearing over exactly the * elements people move toward. */ .cb-cursor-on, .cb-cursor-on * { cursor: none; } /* * Text entry keeps the real caret. A custom dot gives no indication of where a * character will land, and these are fields people actually type into. */ .cb-cursor-on input[type="text"], .cb-cursor-on input[type="search"], .cb-cursor-on input[type="email"], .cb-cursor-on input[type="password"], .cb-cursor-on textarea { cursor: text; } @media (pointer: coarse) { .cb-cursor, .cb-cursor-tile { display: none; } }