.event-graphs { position: relative; margin: 28px 0; padding: 22px 0 6px; border-top: 1px solid #e8ebee; }
.event-graphs h3 { font-size: 1.05rem; margin: 0; }
.graph-context { margin: 7px 0 18px; max-width: 650px; }
.graph-markers { margin: 0 0 18px; color: #31465a; font-variant-numeric: tabular-nums; }
.graph-dashboard-scroll { overflow-x: auto; border-radius: 5px; }
.graph-dashboard { min-width: 650px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.graph-panel { background: #181b1f; color: #d8d9da; border: 1px solid #303338; border-radius: 4px; padding: 14px 12px 10px; }
.graph-panel--timeline, .graph-panel--train { grid-column: 1 / -1; }
.graph-panel--sensor { min-width: 0; }
.graph-panel--sensor .graph-state-label, .graph-panel--sensor .graph-axis-label { font-size: 18px; }
.graph-panel h4 { font-size: .82rem; font-weight: 600; margin: 0 0 12px; color: #f1f1f2; text-align: center; }
.graph-panel-caption { font-size: .7rem; color: #9399a4; margin: 8px 0 0 14.3%; }
.state-graph { display: block; width: 100%; touch-action: pan-y; cursor: crosshair; user-select: none; }
.graph-state-label, .graph-axis-label { fill: #b3b8c2; font-size: 10px; }
.graph-guide { stroke: #34383e; stroke-width: 1; pointer-events: none; }
.graph-state-line { stroke: #939aa5; stroke-width: 1.25; fill: none; stroke-linecap: butt; vector-effect: non-scaling-stroke; pointer-events: none; }
.graph-state-line--unknown { stroke: #9aa4ae; stroke-dasharray: 3 3; }
.graph-state-line--unhealthy { stroke: #f2495c; }
.graph-observation { fill: #939aa5; opacity: .7; }
circle.graph-observation, circle.graph-timeline-observation, circle.graph-sensor-observation { stroke: transparent; stroke-width: 8; pointer-events: all; }
.graph-observation--unknown { fill: #9aa4ae; }
.graph-observation--unhealthy { fill: #f2495c; }
path.graph-trace--secondary { stroke: #5794f2; stroke-width: 1.6; stroke-dasharray: 5 4; }
circle.graph-trace--secondary { fill: none; stroke: #5794f2; stroke-width: 1.25; opacity: 1; }
.graph-trace-legend { display: flex; justify-content: center; gap: 22px; list-style: none; padding: 0; margin: 10px 0 2px; color: #b3b8c2; font-size: .72rem; }
.graph-trace-legend li { display: inline-flex; align-items: center; gap: 7px; }
.graph-trace-swatch { display: inline-block; width: 24px; border-top: 2px solid #939aa5; }
.graph-trace-swatch--secondary { border-color: #5794f2; border-top-style: dashed; }
.graph-sensor-threshold { fill-opacity: .15; pointer-events: none; }
.graph-sensor-color--green { fill: #73bf69; }
.graph-sensor-color--dark-yellow { fill: #e0b400; }
.graph-sensor-color--dark-green { fill: #37872d; }
.graph-sensor-color--dark-red { fill: #c4162a; }
.graph-sensor-color--dark-orange { fill: #fa6400; }
.graph-sensor-color--transparent { fill: transparent; }
.graph-timeline-track { fill: #26292e; }
.graph-timeline-segment { fill-opacity: .7; }
.graph-state--locked { fill: #73bf69; background: #73bf69; }
.graph-state--unhealthy { fill: #706969; background: #706969; }
.graph-state--train-passed { fill: #b877d9; background: #b877d9; }
.graph-state--boom-down { fill: #fade2a; background: #fade2a; }
.graph-state--open { fill: #c4162a; background: #c4162a; }
.graph-state--mislocked { fill: #ff9830; background: #ff9830; }
.graph-state--unknown { fill: #39414b; background: #39414b; stroke: #929aa5; stroke-dasharray: 3 3; }
.graph-timeline-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; list-style: none; padding: 3px 0 0; margin: 0 0 3px; justify-content: center; font-size: .68rem; color: #b3b8c2; }
.graph-timeline-legend li { display: inline-flex; gap: 6px; align-items: center; }
.graph-legend-swatch { width: 12px; height: 12px; border-radius: 2px; flex: 0 0 12px; }
.graph-event-band { fill: #d7a746; opacity: .08; }
.graph-event-marker { stroke: #e5b75b; stroke-width: 1; stroke-dasharray: 3 4; pointer-events: none; }
.graph-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.graph-toolbar button { min-width: 32px; padding: 5px 9px; font-size: .78rem; }
.graph-toolbar .muted { margin-left: auto; font-size: .73rem; font-variant-numeric: tabular-nums; }
.graph-selection { fill: #81b8ed; fill-opacity: .18; stroke: #81b8ed; stroke-width: 1; pointer-events: none; }
.graph-tooltip { position: absolute; z-index: 5; width: max-content; max-width: min(330px, calc(100vw - 24px)); padding: 12px 14px; background: #24282e; border: 1px solid #555c66; border-radius: 5px; box-shadow: 0 4px 16px #0005; color: #edf0f4; font-size: .73rem; pointer-events: none; overflow-wrap: anywhere; }
.graph-tooltip strong { display: block; font-size: .8rem; margin-bottom: 6px; }
.graph-tooltip p { margin: 3px 0; font-variant-numeric: tabular-nums; }
.graph-note { font-size: .75rem; margin: 10px 0 0; }
@media (max-width: 700px) { .graph-dashboard { grid-template-columns: 1fr; } }