.bus-status-head { position: relative; overflow: hidden; isolation: isolate; }
.bus-status-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(1); opacity: 0.16; z-index: 0; pointer-events: none; }
.bus-status-photo[hidden] { display: none; }
.bus-status-heading { position: relative; z-index: 1; min-width: 0; flex: 1; }
.bus-status-controls { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; align-self: start; }
.bus-status-controls svg { width: 20px; height: 20px; }
.bus-status-route h4 { margin: 0 0 var(--space-3); font-size: var(--text-lg); color: var(--text-strong); text-align: left; }
.bus-status-punctuality { font-weight: 700; }
.bus-status-heading .bus-status-punctuality { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.bus-status-punctuality--on-time { color: var(--text-success, #2e7d50); }
.bus-status-punctuality--late { color: #b45309; }
.bus-status-punctuality--very-late { color: var(--action-danger); }
.bus-status-punctuality--unknown { color: var(--text-muted); }
.bus-status-route { margin-top: 0; }
.bus-status-timeline { position: relative; padding: 0; margin: var(--space-5) 0; list-style: none; }
.bus-status-timeline.has-earlier { padding-top: var(--space-6); }
.bus-status-timeline.has-earlier::before, .bus-status-timeline.has-later::after { content: ''; position: absolute; left: 8px; width: 2px; pointer-events: none; z-index: 0; }
.bus-status-timeline.has-earlier::before { top: 0; height: calc(var(--space-6) + 11px); background: var(--action-primary); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 85%); mask-image: linear-gradient(180deg, transparent 0, #000 85%); }
.bus-status-timeline.has-later::after { top: var(--bus-tail-top); height: var(--space-6); background: var(--border-subtle); -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 85%); mask-image: linear-gradient(0deg, transparent 0, #000 85%); }
.bus-status-timeline > li { position: relative; display: flex; align-items: start; gap: var(--space-4); padding: 0 0 var(--space-5) var(--space-8); min-height: 48px; box-sizing: border-box; overflow-wrap: anywhere; }
.bus-status-timeline > li[hidden] { display: none; }
.bus-status-timeline > li::before { content: ''; position: absolute; left: 8px; top: 10px; bottom: -10px; width: 2px; background: var(--border-subtle); }
.bus-status-timeline > li:last-child::before { display: none; }
.bus-status-dot { position: absolute; left: 2px; top: 4px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border-subtle); background: white; z-index: 1; }
.bus-status-stop.is-passed::before { background: var(--action-primary); }
.bus-status-stop.is-passed .bus-status-dot { background: var(--action-primary); border-color: var(--action-primary); }
.bus-status-stop.is-next .bus-status-dot { border-color: var(--action-primary); }
.bus-status-timeline[data-prev] > .bus-status-stop::before { top: 11px; bottom: auto; height: var(--bus-line-length); background: linear-gradient(to bottom, var(--action-primary) 0 var(--bus-line-fill), var(--border-subtle) var(--bus-line-fill) 100%); }
.bus-status-timeline[data-prev] > .is-last-visible::before { display: none; }
.bus-status-timeline[data-prev] > .bus-status-position { position: absolute; left: -7px; transform: translateY(-50%); padding: 0; min-height: 0; width: 32px; height: 32px; border-radius: var(--radius-md); border: 2px solid white; background: var(--action-primary); color: white; z-index: 2; align-items: center; justify-content: center; pointer-events: none; }
.bus-status-timeline[data-prev] > .bus-status-position::before { display: none; }
.bus-status-position svg { width: 24px; height: 24px; }
.bus-status-timeline s { color: var(--text-muted); }
.bus-status-timeline p { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.bus-status-position { color: var(--text-info); }
.bus-status-position > div { padding: var(--space-3); background: var(--surface-info); border: 1px solid var(--border-info); border-radius: var(--radius-md); min-width: 0; flex: 1; }
.bus-status-marker { position: absolute; left: -2px; top: 12px; border: 2px solid white; border-radius: 50%; color: var(--action-primary); background: white; line-height: 18px; width: 18px; text-align: center; z-index: 1; }