/* ===========================================
   Activity timeline (partials/_activity_timeline.html + js/activity_timeline.js)
   Fine-grained traffic chart: toolbar, plot, hint. Presets reuse .preset-tabs.
   =========================================== */

.timeline-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.timeline-reset { flex-shrink: 0; }
.timeline-reset[hidden] { display: none; }

.timeline-live {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--green);
}

.timeline-live[hidden] { display: none; }

.timeline-meta {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--label-3);
}

.timeline-canvas {
    position: relative;
    height: 320px;
    cursor: crosshair;
    user-select: none;
}

.activity-timeline.compact .timeline-canvas { height: 200px; }

.timeline-canvas canvas[hidden],
.timeline-empty[hidden] { display: none; }

.timeline-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--label-3);
}

.timeline-hint {
    margin: 0.4rem 0 0;
    font-size: 0.7rem;
    color: var(--label-3);
}