/* ITS Roads CV2X — live feeds (hub + feed map) */
.live-hub .demo-card { border-top: 4px solid var(--yellow); }
.live-how { margin-top: 28px; }
.live-how .grid { margin-top: 10px; }
.live-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stats-strip { display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; }
.stats-strip .pill { font-variant-numeric: tabular-nums; }
.live-layout { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; margin-bottom: 20px; }
.live-main { min-width: 0; }
.live-map { height: 58vh; min-height: 340px; border: 1px solid var(--line); border-radius: var(--radius); z-index: 0; background: var(--paper-2); }
.live-controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 8px 0; font-size: .9rem; }
.live-controls .ctl { display: inline-flex; align-items: center; gap: 6px; }
.live-controls select { min-height: 32px; padding: 4px 8px; width: auto; font-size: .9rem; }
.live-controls .types { display: inline-flex; flex-wrap: wrap; gap: 4px 0; }
.live-controls .types label { margin-right: 8px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.live-controls .types input { width: 16px; height: 16px; }
.replay { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); }
.replay input[type=range] { flex: 1 1 160px; min-width: 120px; }
.live-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-2); padding: 4px 0 8px; align-items: center; }
.live-legend i { display: inline-block; vertical-align: middle; margin-right: 5px; }
.lg-marker { width: 12px; height: 12px; border-radius: 3px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.lg-line { width: 22px; height: 4px; border-radius: 2px; }
.lg-line.dashed { background: repeating-linear-gradient(90deg, #2ca02c 0 5px, transparent 5px 9px); }
.lg-grad i { width: 60px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #440154, #3b528b, #21918c, #5ec962, #fde725); }
.lg-pulse { width: 12px; height: 12px; border-radius: 50%; background: #e6b800; box-shadow: 0 0 0 3px rgba(230,184,0,.35); }
.live-side { padding: 12px 14px; min-width: 0; }
.live-side .tabs { margin-bottom: 10px; }
.live-side .tab { padding: 8px 10px; font-size: .9rem; }
.live-side .tab .count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--err); color: #fff; font-size: .72rem; text-align: center; margin-left: 4px; }
.live-side .tabpanel { max-height: 62vh; overflow: auto; }
.obj-list { display: flex; flex-direction: column; gap: 4px; }
.obj-row { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; font: inherit; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.obj-row:hover, .obj-row[aria-pressed="true"] { background: var(--paper-2); border-color: var(--line-2); }
.obj-row .sw { width: 12px; height: 12px; border-radius: 3px; }
.obj-row .id { font-family: var(--font-mono); font-size: .88rem; }
.obj-row .meta { color: var(--ink-2); font-size: .82rem; white-space: nowrap; }
.obj-row.stale { opacity: .55; }
.obj-detail { border: 1px solid var(--line-2); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; background: var(--paper-2); font-size: .9rem; }
.obj-detail h3 { margin: 0 0 6px; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.obj-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
.obj-detail dt { color: var(--ink-2); }
.obj-detail dd { margin: 0; font-variant-numeric: tabular-nums; word-break: break-word; }
.obj-detail .btn-row { margin-top: 8px; }
.sig-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.sig-table td, .sig-table th { padding: 4px 6px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.sig-table th { font-family: var(--font-display); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.sig-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.prio-item { border: 1px solid var(--line-2); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px; font-size: .9rem; }
.prio-item .st { font-weight: 700; font-family: var(--font-display); }
.prio-item .st.granted { color: var(--ok); } .prio-item .st.processing, .prio-item .st.requested { color: var(--warn); } .prio-item .st.rejected { color: var(--err); }
.alert-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.alert-list li { border-left: 4px solid var(--line); border-radius: 4px; padding: 6px 10px; background: var(--paper-2); font-size: .88rem; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: start; }
.alert-list li.sev-warning { border-left-color: #e6b800; } .alert-list li.sev-alert { border-left-color: var(--err); } .alert-list li.sev-info { border-left-color: var(--cyan); }
.alert-list li.acked { opacity: .6; }
.alert-list .when { color: var(--ink-3); font-size: .78rem; grid-column: 1 / -1; }
.rule-list { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.rule-list li { border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 10px; font-size: .88rem; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: space-between; }
.rule-list li.off { opacity: .55; }
.rule-list .k { color: var(--ink-2); font-size: .8rem; }
.rule-form { border-top: 1px solid var(--line-2); padding-top: 10px; }
.rule-form .rp { display: none; }
.rule-form .rp.on { display: flex; }
.rec-form { border-bottom: 1px solid var(--line-2); padding-bottom: 10px; margin-bottom: 10px; }
.rec-list .rec { border: 1px solid var(--line-2); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; font-size: .88rem; }
.rec-list .rec .btn-row { margin-top: 6px; }
.cmd pre { white-space: pre-wrap; word-break: break-all; background: var(--code-bg); padding: 8px; border-radius: 6px; margin: 6px 0; }
.live-layout [hidden], .stats-strip [hidden], .live-side [hidden] { display: none !important; }
/* map markers (colors are deliberately fixed, not themed) */
.veh { width: 26px; height: 26px; display: grid; place-items: center; transition: opacity .3s; position: relative; }
.veh svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.veh-label { position: absolute; left: 28px; top: 4px; font: 600 11px/1 var(--font-mono); color: #fff; background: rgba(11,27,43,.78); padding: 2px 4px; border-radius: 3px; white-space: nowrap; pointer-events: none; }
.veh.selected svg { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.leaflet-marker-icon.veh-icon { background: transparent; border: 0; }
.alert-pulse { width: 18px; height: 18px; border-radius: 50%; background: rgba(230,184,0,.9); animation: pulse 1.2s ease-out infinite; }
.alert-pulse.sev-alert { background: rgba(214,40,40,.9); } .alert-pulse.sev-info { background: rgba(27,143,199,.9); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(230,184,0,.6); } 100% { box-shadow: 0 0 0 18px rgba(230,184,0,0); } }
.spat-label { background: rgba(11,27,43,.85); color: #fff; border: 0; font: 700 11px/1.1 var(--font-mono); padding: 2px 5px; border-radius: 3px; box-shadow: none; }
.spat-label::before { display: none; }
.leaflet-container { font-family: var(--font-body); }
.leaflet-popup-content { font-size: .9rem; }
.draw-hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 500; background: var(--navy); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: .85rem; pointer-events: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-tile { filter: brightness(.72) contrast(1.05) saturate(.85); } :root:not([data-theme="light"]) .leaflet-control-attribution, :root:not([data-theme="light"]) .leaflet-bar a { background: var(--card); color: var(--ink); } }
:root[data-theme="dark"] .leaflet-tile { filter: brightness(.72) contrast(1.05) saturate(.85); }
:root[data-theme="dark"] .leaflet-control-attribution, :root[data-theme="dark"] .leaflet-bar a { background: var(--card); color: var(--ink); }
@media (min-width: 960px) { .live-layout { grid-template-columns: minmax(0, 1fr) 360px; } .live-map { height: calc(100vh - 230px); min-height: 480px; } .live-side { position: sticky; top: 72px; } .live-side .tabpanel { max-height: calc(100vh - 190px); } }
@media (min-width: 1200px) { .live-layout { grid-template-columns: minmax(0, 1fr) 400px; } }
@media (max-width: 480px) { .live-map { height: 52vh; } .obj-row { grid-template-columns: 14px 1fr; } .obj-row .meta { grid-column: 2; white-space: normal; } }