/* Timeline view — overrides + custom item styling on top of
   vis-timeline's default theme. */

.timeline-shell {
    position: relative;
}

/* Filter + zoom controls stick to the top of the viewport while the
   timeline canvas scrolls beneath them. Background + bottom border so
   the controls stay readable when items scroll past underneath. */
.timeline-controls {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #ffffff;
    padding: 0.75rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #dee2e6;
}

#timeline {
    height: calc(100vh - 240px);
    min-height: 480px;
    background-color: #fafafa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

/* Character lifeline ranges. The inline `style=` attr from JS supplies
   the linear-gradient background; this rule provides the structural
   bits (radius, border, label position). */
.vis-item.tl-life {
    border-width: 1px;
    border-radius: 3px;
    height: 22px;
    padding: 0;
}
.vis-item.tl-life .vis-item-content {
    padding: 2px 6px;
    font-size: 0.8rem;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 2px rgba(0,0,0,0.35);
}
.tl-life-label {
    font-weight: 500;
    pointer-events: none;
}

/* Chapter markers — a single small badge holding the scroll icon
   plus the chapter number side-by-side. */
.vis-item.tl-chapter {
    background: #0d6efd;
    border: 1px solid #0a58ca;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.vis-item.tl-chapter:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}
.vis-item.tl-chapter.vis-selected {
    box-shadow: 0 0 0 2px #ffc107;
}
.vis-item.tl-chapter .vis-item-content {
    padding: 2px 7px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.vis-item.tl-chapter .vis-item-content i {
    font-size: 0.85rem;
}
/* When a chapter span is a real range, vis-timeline stretches the
   item across years — left-justify the content so the icon + number
   sit at the start of the bar instead of being centered in dead
   space. */
.vis-item.tl-chapter.vis-range .vis-item-content {
    justify-content: flex-start;
    padding-left: 7px;
}
.tl-num {
    font-variant-numeric: tabular-nums;
}

/* Event markers — coloured circular badge with a white icon inside.
   Background, border, and icon colour all come from the inline
   style (event-type bg_colour / border_colour / font_colour);
   fallbacks here cover event-types that haven't been recoloured. */
.vis-item.tl-event {
    background: #6c757d;
    border: 1px solid #6c757d;
    color: #ffffff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.vis-item.tl-event:hover {
    transform: translateY(-1px) scale(1.1);
    filter: brightness(1.1);
}
.vis-item.tl-event.vis-selected {
    box-shadow: 0 0 0 2px #ffc107;
}
.vis-item.tl-event .vis-item-content {
    padding: 0;
    font-size: 0.85rem;
    line-height: 1;
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* For multi-year events the badge becomes a horizontal bar — switch
   to a rounded-rectangle shape, left-justify the icon, and let the
   width grow naturally with the year span. */
.vis-item.tl-event.vis-range {
    width: auto;
    border-radius: 13px;
    padding-left: 6px;
    padding-right: 8px;
}
.vis-item.tl-event.vis-range .vis-item-content {
    width: auto;
    justify-content: flex-start;
}

.vis-item.tl-chapter .vis-item-overflow,
.vis-item.tl-event .vis-item-overflow {
    overflow: visible;
}

/* For chapter and event box items: hide vis-timeline's vertical
   connector line + axis dot — the icon itself is the marker, and
   stacking position carries enough meaning without a line redrawing
   the same horizontal time everywhere. */
.vis-item.tl-chapter ~ .vis-line,
.vis-item.tl-chapter ~ .vis-dot,
.vis-item.tl-event ~ .vis-line,
.vis-item.tl-event ~ .vis-dot {
    display: none !important;
}
/* Belt-and-braces: the line/dot are actually siblings drawn as part
   of the same .vis-item box in some vis-timeline versions. */
.vis-item.tl-chapter .vis-line,
.vis-item.tl-chapter .vis-dot,
.vis-item.tl-event .vis-line,
.vis-item.tl-event .vis-dot {
    display: none !important;
}
/* Final catch — vis-timeline renders .vis-line and .vis-dot as
   independent elements parented to .vis-foreground for box items.
   Hide them globally; we never use the default box-with-line style. */
.vis-foreground .vis-line,
.vis-foreground .vis-dot {
    display: none !important;
}

/* Give the chapter and event group rails more vertical room so a
   bunch of icons clustering in the same year can stack without
   getting jammed up against the row boundary. */
.vis-labelset .vis-label.tl-group-chapters,
.vis-labelset .vis-label.tl-group-events {
    min-height: 110px;
}
.vis-foreground .vis-group.tl-group-chapters,
.vis-foreground .vis-group.tl-group-events {
    min-height: 110px;
}

/* Group label (left rail). */
.vis-labelset .vis-label.tl-group-chapters,
.vis-labelset .vis-label.tl-group-events {
    background-color: #f1f3f5;
    font-weight: 600;
}
.vis-labelset .vis-label {
    font-size: 0.85rem;
}
.vis-labelset .vis-label .vis-inner {
    padding: 4px 8px;
}
.vis-labelset .vis-label a {
    color: inherit;
    text-decoration: none;
}
.vis-labelset .vis-label a:hover {
    text-decoration: underline;
}
.tl-zh {
    color: #888;
    font-size: 0.75rem;
    margin-left: 4px;
}

/* Click-to-show detail card — floats next to the cursor at click
   time. JS sets `top` and `left` from the click event and clamps the
   card to the viewport, so position-fixed (relative to the viewport,
   not the timeline shell) is the right anchor here. */
.timeline-detail {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    width: 320px;
    max-width: calc(100vw - 1rem);
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    padding: 0.75rem 1rem;
}
.timeline-detail .btn-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}
.timeline-detail-kind {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    margin-bottom: 0.25rem;
}
.timeline-detail-title {
    margin-bottom: 0.5rem;
    padding-right: 1.5rem; /* clear the close button */
    font-size: 1.05rem;
}
.timeline-detail-title a {
    color: inherit;
    text-decoration: none;
}
.timeline-detail-title a:hover {
    text-decoration: underline;
}
.timeline-detail-meta {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    font-size: 0.85rem;
}
.timeline-detail-meta dt {
    font-weight: 600;
    color: #495057;
}
.timeline-detail-meta dd {
    margin: 0;
}