.event-compact{width:10px;height:10px;border-radius:50%;background:#f4a623;border:2px solid #fff;box-shadow:0 1px 3px #555;box-sizing:border-box}.event-compact.closure{background:#d3222a}.event-compact.incident{background:#f4a623}.event-compact.works{background:#d99a00}

.site-vms-icon{background:transparent!important;border:0!important}.site-lane-strip{height:40px;display:flex;gap:3px;align-items:center;justify-content:center;background:#111;padding:3px;border:1px solid #444;border-radius:3px;box-shadow:0 1px 3px #555}.site-lane{width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;flex:0 0 30px!important;aspect-ratio:1/1;display:inline-flex;align-items:center;justify-content:center;background:#080808;border:1px solid #555;color:#ffb51b;font:800 14px/1 system-ui;box-sizing:border-box;padding:0!important}.site-lane.off{background:#333;border-color:#777}.site-lane.mandatory{border:4px solid #d71920;border-radius:50%!important;background:#fff;color:#111;font-size:11px}.site-lane.closed{color:#e31b23;font-size:25px;font-weight:800}.site-lane.control{color:#ffb51b;font-size:16px}.site-lane.end{font-size:9px;color:#ffb51b}.site-lane.nsl{border-radius:3px;background:#111;padding:3px!important}.site-lane.nsl:after{content:'';width:20px;height:20px;border-radius:50%;background:linear-gradient(45deg,#fff 42%,#111 43%,#111 57%,#fff 58%);border:1px solid #888}

.matrix-face{position:relative;width:34px;min-width:34px;height:34px;min-height:34px;aspect-ratio:1/1;display:inline-flex;align-items:center;justify-content:center;background:#070707;border:1px solid #555;border-radius:3px;color:#ffb51b;font:800 14px/1 ui-monospace,monospace;box-sizing:border-box;padding:0}.matrix-face.four-lamp i,.vms-semantic-attention>i,.site-panel-board.four-lamp>i{position:absolute;border-radius:50%;background:#ffb51b;box-shadow:0 0 4px #ffb51b}.matrix-face.four-lamp i{width:5px;height:5px}.matrix-face.four-lamp .tl{left:2px;top:2px}.matrix-face.four-lamp .tr{right:2px;top:2px}.matrix-face.four-lamp .bl{left:2px;bottom:2px}.matrix-face.four-lamp .br{right:2px;bottom:2px}

@keyframes four-lamp-top{0%,49%{opacity:1}50%,100%{opacity:.18}}@keyframes four-lamp-bottom{0%,49%{opacity:.18}50%,100%{opacity:1}}.matrix-face.four-lamp .tl,.matrix-face.four-lamp .tr,.vms-semantic-attention>.tl,.vms-semantic-attention>.tr,.site-panel-board.four-lamp>.tl,.site-panel-board.four-lamp>.tr{animation:four-lamp-top .9s steps(1,end) infinite}.matrix-face.four-lamp .bl,.matrix-face.four-lamp .br,.vms-semantic-attention>.bl,.vms-semantic-attention>.br,.site-panel-board.four-lamp>.bl,.site-panel-board.four-lamp>.br{animation:four-lamp-bottom .9s steps(1,end) infinite}

/* Normal-map VMS markers describe meaning, not miniature gantry hardware. */
.vms-semantic{width:30px;height:30px;border-radius:5px;background:#111;border:2px solid #666;box-shadow:0 1px 3px #555;display:flex;align-items:center;justify-content:center;color:#ffb51b;font:900 19px/1 system-ui;box-sizing:border-box;position:relative}.vms-semantic-attention{width:36px;height:36px;position:relative;display:flex;align-items:center;justify-content:center}.vms-semantic-attention>i{width:5px;height:5px;z-index:2}.vms-semantic-attention>.tl{left:0;top:0}.vms-semantic-attention>.tr{right:0;top:0}.vms-semantic-attention>.bl{left:0;bottom:0}.vms-semantic-attention>.br{right:0;bottom:0}.vms-semantic.speed{border-radius:50%;background:#fff;border:4px solid #d71920;color:#111;font-size:10px}.vms-semantic.advisory{font-size:12px}.vms-semantic.nsl:after{content:'';width:20px;height:20px;border-radius:50%;background:linear-gradient(45deg,#fff 42%,#111 43%,#111 57%,#fff 58%);border:1px solid #888}.vms-semantic.end{font-size:10px}.vms-semantic.info{font:800 15px/1 Georgia,serif;color:#d7d7d7;border-color:#555}.vms-semantic.warning{font-size:21px}.vms-semantic.red-x{color:#e31b23;font-size:27px;border-color:#666}

/* Queue/congestion: compact row of vehicles, intentionally without a red triangle. */
.vms-semantic.queue{gap:2px;padding:7px 3px}.vms-semantic.queue span{width:7px;height:9px;border:2px solid #ffb51b;border-radius:2px;box-sizing:border-box;position:relative}.vms-semantic.queue span:after{content:'';position:absolute;left:1px;right:1px;bottom:-4px;height:2px;border-left:2px solid #ffb51b;border-right:2px solid #ffb51b}

/* Compact semantic vehicle pictograms. */
.vms-semantic.accident .car,.vms-semantic.breakdown .car{display:block;width:17px;height:9px;border:2px solid #ffb51b;border-radius:2px;position:relative;box-sizing:border-box}.vms-semantic.accident .car{transform:rotate(-22deg)}.vms-semantic.accident .car:before,.vms-semantic.breakdown .car:before{content:'';position:absolute;left:2px;right:2px;top:-5px;height:5px;border:2px solid #ffb51b;border-bottom:0;border-radius:3px 3px 0 0}.vms-semantic.accident .car:after,.vms-semantic.breakdown .car:after{content:'';position:absolute;left:1px;right:1px;bottom:-5px;height:3px;border-left:3px solid #ffb51b;border-right:3px solid #ffb51b}.vms-semantic.breakdown .car:before{transform:rotate(-28deg);transform-origin:left bottom;left:0;right:auto;width:12px;top:-8px}.vms-semantic.pedestrian span{font-size:15px;transform:rotate(45deg);display:block}.vms-semantic.time span{width:19px;height:19px;border:2px solid #d7d7d7;border-radius:50%;position:relative;display:block}.vms-semantic.time span:before{content:'';position:absolute;width:2px;height:6px;background:#d7d7d7;left:7px;top:3px;transform-origin:bottom center;transform:rotate(0deg)}.vms-semantic.time span:after{content:'';position:absolute;width:6px;height:2px;background:#d7d7d7;left:8px;top:9px;transform-origin:left center;transform:rotate(28deg)}

.site-message{width:20px;height:13px;background:#090909;border:2px solid #555;border-radius:2px;box-shadow:0 1px 3px #555}.site-message.campaign{border-color:#666}.site-message.information{border-color:#444}

.site-panel-sign{display:inline-flex;flex-direction:column;align-items:stretch;min-width:230px;max-width:100%;vertical-align:top}.site-panel-board{display:block;width:100%;min-width:0;box-sizing:border-box;background:#080808;border:2px solid #555;border-radius:5px;color:#ffd94a;padding:9px 14px;text-align:center;font:700 17px/1.25 ui-monospace,monospace}.site-panel-board.campaign{border-color:#666}.site-panel-board.four-lamp{position:relative;padding:12px 19px}.site-panel-board.four-lamp>i{width:6px;height:6px}.site-panel-board.four-lamp>.tl{left:4px;top:4px}.site-panel-board.four-lamp>.tr{right:4px;top:4px}.site-panel-board.four-lamp>.bl{left:4px;bottom:4px}.site-panel-board.four-lamp>.br{right:4px;bottom:4px}.site-panel-lanes{display:flex;width:100%;box-sizing:border-box;align-items:flex-end;justify-content:center;gap:6px;margin-top:9px}.site-panel-lanes.single{justify-content:center}.site-panel-lane{display:flex;flex:0 0 34px;min-width:34px;flex-direction:column;gap:3px;align-items:center;justify-content:flex-end}.site-panel-lane small{font-size:10px;color:#aaa;line-height:1}

/* Combined large board: message/blank area on the left, circular speed roundel on the right. */
.site-panel-combined{display:grid;grid-template-columns:minmax(180px,1fr) 58px;width:100%;min-width:230px;max-width:430px;background:#080808;border:2px solid #555;border-radius:5px;overflow:hidden;box-sizing:border-box}.site-panel-combined .site-panel-board{border:0!important;border-radius:0!important;min-height:68px;display:flex;align-items:center;justify-content:center}.site-panel-combined .combined-blank{min-height:68px;background:#080808}.site-panel-combined .combined-speed{display:flex;align-items:center;justify-content:center;border-left:1px solid #444;background:#080808}.site-panel-combined .combined-speed .site-lane.mandatory{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;flex:0 0 44px!important;font-size:13px}

/* Older fallback renderer: keep any remaining legacy aspect square and four-lamp. */
.legacy-matrix{aspect-ratio:1/1!important}.legacy-matrix .wigwam{top:2px!important;margin:0!important;width:5px!important;height:5px!important}.legacy-matrix .wigwam.left{left:2px!important}.legacy-matrix .wigwam.right{right:2px!important}.legacy-matrix .wigwam:after{content:'';position:absolute;left:0;top:17px;width:5px;height:5px;border-radius:50%;background:#ffb51b;box-shadow:0 0 4px #ffb51b}.legacy-matrix.wigwams .wigwam.left,.legacy-matrix.wigwams .wigwam.right{animation:four-lamp-top .9s steps(1,end) infinite!important}.legacy-matrix.wigwams .wigwam.left:after,.legacy-matrix.wigwams .wigwam.right:after{animation:four-lamp-bottom .9s steps(1,end) infinite!important}