/*!
 * timeline.css — styles for timeline.js
 *
 * Everything is scoped under .tl-timeline. Colours, dot size and the line
 * colour are exposed as CSS custom properties so a host page can re-theme
 * the timeline without touching this file.
 */

.tl-timeline,
.tl-list-root {
  --tl-line: #c9ced8;
  --tl-bg: #ffffff;
  --tl-text: #1f2430;
  --tl-muted: #6b7280;
  --tl-border: #e5e7eb;

  --tl-low: #9aa3b2;
  --tl-medium: #2f7de1;
  --tl-high: #e8552d;

  --tl-dot: 15px;

  position: relative;
  box-sizing: border-box;
  color: var(--tl-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}
.tl-timeline *,
.tl-timeline *::before,
.tl-timeline *::after,
.tl-list-root *,
.tl-list-root *::before,
.tl-list-root *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ *
 * Plot area — the padded region the line and nodes live in.
 * ------------------------------------------------------------------ */
.tl-timeline.tl-h { height: 440px; }
.tl-timeline.tl-h .tl-plot { position: absolute; top: 176px; bottom: 96px; left: 88px; right: 88px; }

.tl-timeline.tl-v { min-height: 384px; }
.tl-timeline.tl-v .tl-plot { position: absolute; top: 40px; bottom: 64px; left: 158px; right: 232px; }

.tl-plot { pointer-events: none; }
.tl-plot > * { pointer-events: auto; }

/* ------------------------------------------------------------------ *
 * The line and its end caps
 * ------------------------------------------------------------------ */
.tl-track { position: absolute; background: var(--tl-line); border-radius: 3px; }
.tl-h .tl-track { left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; }
.tl-v .tl-track { top: 0; bottom: 0; left: 0; width: 3px; margin-left: -1.5px; }

/* broken-axis squiggle: marks a compressed gap between two clusters. Its
 * opaque backing hides the straight track so the line reads as broken. */
.tl-break { position: absolute; color: var(--tl-line); background: var(--tl-bg); pointer-events: none; z-index: 2; }
.tl-break svg { display: block; }
.tl-h .tl-break-h { top: 50%; transform: translate(-50%, -50%); padding: 0 4px; }
.tl-h .tl-break-h svg { width: 44px; height: 24px; }
.tl-v .tl-break-v { left: 0; transform: translate(-50%, -50%); padding: 4px 0; }
.tl-v .tl-break-v svg { width: 24px; height: 44px; }

.tl-cap { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--tl-line); }
.tl-h .tl-cap-start { left: 0; top: 50%; transform: translate(-50%, -50%); }
.tl-h .tl-cap-end { right: 0; top: 50%; transform: translate(50%, -50%); }
.tl-v .tl-cap-start { top: 0; left: 0; transform: translate(-50%, -50%); }
.tl-v .tl-cap-end { bottom: 0; left: 0; transform: translate(-50%, 50%); }

/* ------------------------------------------------------------------ *
 * A node — a zero-size anchor sitting exactly on the line.
 * ------------------------------------------------------------------ */
.tl-node { position: absolute; width: 0; height: 0; }
.tl-h .tl-node { top: 50%; }
.tl-v .tl-node { left: 0; }
.tl-node:focus { outline: none; }
.tl-node:focus-visible .tl-dot:first-of-type { box-shadow: 0 0 0 3px rgba(47, 125, 225, 0.45); }

/* dots */
.tl-dots { position: absolute; left: 0; top: 0; }
.tl-hit {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px;
  transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer; z-index: 1;
}
.tl-dot {
  position: absolute; left: 0; top: 0;
  width: var(--tl-dot); height: var(--tl-dot);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--tl-low);
  border: 2px solid var(--tl-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 0.08s ease;
}
.tl-dot.tl-imp-low { background: var(--tl-low); }
.tl-dot.tl-imp-medium { background: var(--tl-medium); }
.tl-dot.tl-imp-high { background: var(--tl-high); width: calc(var(--tl-dot) + 4px); height: calc(var(--tl-dot) + 4px); }

.tl-node:hover .tl-dot:first-of-type,
.tl-node.tl-active .tl-dot:first-of-type { transform: translate(-50%, -50%) scale(1.18); }
.tl-node.tl-active .tl-dot:first-of-type { box-shadow: 0 0 0 4px rgba(47, 125, 225, 0.22), 0 1px 3px rgba(0, 0, 0, 0.28); }

/* "+N" overflow indicator for clusters with more than three events */
.tl-count {
  position: absolute; left: 20px; top: -20px;
  font-size: 11px; font-weight: 700; color: var(--tl-muted);
  background: var(--tl-bg); border: 1px solid var(--tl-border);
  border-radius: 10px; padding: 0 5px; line-height: 16px; z-index: 25;
}

/* date label near each node */
.tl-date { position: absolute; font-size: 12px; color: var(--tl-muted); white-space: nowrap; }
.tl-h .tl-date { top: 20px; left: 0; transform: translateX(-50%); }
/* stagger onto a second row so labels of nearby events don't collide */
.tl-h .tl-node.tl-alt .tl-date { top: 42px; }
.tl-v .tl-date { left: -18px; top: 0; transform: translate(-100%, -50%); text-align: right; width: max-content; max-width: 128px; white-space: normal; }

/* ------------------------------------------------------------------ *
 * Persistent flag (callout) shown for high-importance events.
 * ------------------------------------------------------------------ */
.tl-flag { position: absolute; }
.tl-flag-line { position: absolute; background: var(--tl-high); }
.tl-flag-body {
  position: absolute;
  background: var(--tl-bg);
  border: 1px solid var(--tl-border);
  border-left: 3px solid var(--tl-high);
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  width: max-content;
  max-width: 160px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.tl-flag-title { color: var(--tl-text); text-decoration: none; }
a.tl-flag-title { color: var(--tl-high); }
a.tl-flag-title:hover { text-decoration: underline; }

/* horizontal: flag rises above the dot */
.tl-h .tl-flag-line { left: 0; bottom: 9px; width: 2px; height: var(--tl-len); transform: translateX(-1px); }
.tl-h .tl-flag-body { left: 0; bottom: calc(9px + var(--tl-len)); transform: translateX(-50%); }

/* vertical: flag extends to the right of the dot */
.tl-v .tl-flag-line { top: 0; left: 9px; height: 2px; width: var(--tl-len); transform: translateY(-1px); }
.tl-v .tl-flag-body { top: 0; left: calc(9px + var(--tl-len)); transform: translateY(-50%); }

/* ------------------------------------------------------------------ *
 * Click callout (popup)
 * ------------------------------------------------------------------ */
.tl-popup {
  position: absolute; z-index: 1000;
  width: 320px; max-width: min(90vw, 360px);
  max-height: 340px; overflow: auto;
  background: var(--tl-bg);
  border: 1px solid var(--tl-border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  padding: 14px 16px;
}
.tl-popup-close {
  position: absolute; top: 6px; right: 8px;
  width: 26px; height: 26px;
  border: none; background: transparent;
  font-size: 20px; line-height: 1; color: var(--tl-muted);
  cursor: pointer; border-radius: 6px;
}
.tl-popup-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--tl-text); }

.tl-popup-item + .tl-popup-item { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tl-border); }
.tl-popup-title { font-weight: 700; font-size: 15px; margin-right: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.tl-popup-link { color: var(--tl-text); text-decoration: none; }
a.tl-popup-link { color: var(--tl-medium); }
a.tl-popup-link:hover { text-decoration: underline; }
.tl-popup-date { font-size: 12px; color: var(--tl-muted); margin: 3px 0 8px; }
.tl-popup-desc { font-size: 14px; line-height: 1.55; }
.tl-popup-desc :first-child { margin-top: 0; }
.tl-popup-desc :last-child { margin-bottom: 0; }
.tl-popup-desc img { max-width: 100%; height: auto; }
.tl-popup-desc a { color: var(--tl-medium); }

/* importance badge */
.tl-badge {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #fff; padding: 1px 7px; border-radius: 999px; vertical-align: middle;
}
.tl-badge.tl-imp-low { background: var(--tl-low); }
.tl-badge.tl-imp-medium { background: var(--tl-medium); }
.tl-badge.tl-imp-high { background: var(--tl-high); }
.tl-badge.tl-shadow-banned { background: #6b21a8; }

/* empty state */
.tl-empty { padding: 48px 24px; text-align: center; color: var(--tl-muted); }

/* ------------------------------------------------------------------ *
 * Event list (Timeline.renderList) — the full events with descriptions,
 * shown beneath a timeline.
 * ------------------------------------------------------------------ */
.tl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tl-list-item { padding-left: 14px; border-left: 3px solid var(--tl-line); }
.tl-list-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tl-list-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tl-low); align-self: center; flex: 0 0 auto;
}
.tl-list-dot.tl-imp-low { background: var(--tl-low); }
.tl-list-dot.tl-imp-medium { background: var(--tl-medium); }
.tl-list-dot.tl-imp-high { background: var(--tl-high); }
.tl-list-date { font-size: 12px; color: var(--tl-muted); white-space: nowrap; }
.tl-list-title { font-weight: 700; color: var(--tl-text); text-decoration: none; }
a.tl-list-title { color: var(--tl-medium); }
a.tl-list-title:hover { text-decoration: underline; }
.tl-list-action { margin-left: auto; }
.tl-list-meta { margin-top: 2px; font-size: 12px; color: var(--tl-muted); }
.tl-list-desc { margin-top: 5px; font-size: 14px; line-height: 1.55; }
.tl-list-desc :first-child { margin-top: 0; }
.tl-list-desc :last-child { margin-bottom: 0; }
.tl-list-desc img { max-width: 100%; height: auto; }
.tl-list-desc a { color: var(--tl-medium); }