/* ==========================================================================
   Timeline Dots (Admin) — event markers and labels
   Public-style dots with era/category classes and clustering label modes,
   matching frontend timeline-dots.css / timeline-labels.css.
   Admin-only affordances: hover scale, selection ring.
   ========================================================================== */

/* ── Event Markers ─────────────────────────────────────────────────────── */

.admin-timeline-event {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-round);
    background: var(--accent);
    border: 1px solid var(--bg-surface);
    cursor: pointer;
    z-index: 2;
    padding: 0;
    position: absolute;
    margin: 0;
    transform: translate(-50%, -50%);
    transition:
        box-shadow var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}
.admin-timeline-event:hover {
    box-shadow: 0 0 0 4px var(--canvas-hover-shadow);
    transform: translate(-50%, -50%) scale(1.3);
    z-index: 3;
}
.admin-timeline-event--selected {
    background: var(--accent);
    border-color: var(--accent);
    transform: translate(-50%, -50%) scale(1.5);
    box-shadow: 0 0 0 3px var(--canvas-selection-shadow);
    z-index: 3;
}

/* Era dot colours (match frontend timeline.css exactly) */
.admin-timeline-event.era--pre-incarnation {
    background: var(--era-pre-incarnation);
}
.admin-timeline-event.era--old-testament {
    background: var(--era-old-testament);
}
.admin-timeline-event.era--early-life {
    background: var(--era-early-life);
}
.admin-timeline-event.era--life {
    background: var(--era-life);
}
.admin-timeline-event.era--galilee-ministry {
    background: var(--era-galilee-ministry);
}
.admin-timeline-event.era--judean-ministry {
    background: var(--era-judean-ministry);
}
.admin-timeline-event.era--passion-week {
    background: var(--era-passion-week);
}
.admin-timeline-event.era--post-passion {
    background: var(--era-post-passion);
}

/* Category overrides (after era rules, CSS-5) */
.admin-timeline-event.dot-cat--place {
    background: var(--admin-white);
    border-color: var(--admin-text-primary);
}
.admin-timeline-event.dot-cat--person {
    background: var(--admin-white);
    border-color: var(--admin-text-primary);
}
.admin-timeline-event.dot-cat--object {
    background: var(--text-muted);
}

/* ── Event Labels (sibling-positioned, matching frontend .timeline-label) ─ */

.admin-timeline-event-label {
    position: absolute;
    font-size: var(--text-2xs);
    font-family: var(--font-sans);
    color: var(--text-primary);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    line-height: var(--leading-small);
    max-width: 100px;
    text-align: center;
    transform: translateX(-50%);
}

/* Clustering label modes */
.admin-timeline-event-label.label--truncated {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.admin-timeline-event-label.label--hidden {
    display: none;
}