/* Timeline - an ordered list on a rail. Vertical by default; .tl-h turns
   into a sideways-scrolling row from 480px up. No animation anywhere. */
.tl-heading { margin: 0 0 12px; font-size: 1.05em; font-weight: 750; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tl-list { list-style: none; margin: 0; padding: 0; }
.tl-item { position: relative; padding: 0 0 18px 30px; min-width: 0; }
.tl-item:last-child { padding-bottom: 2px; }
.tl-item::before {
    content: ""; position: absolute; left: 8px; top: 20px; bottom: -2px; width: 2px; border-radius: 2px;
    background: color-mix(in srgb, var(--e-accent) 35%, var(--e-line));
}
.tl-item:last-child::before { display: none; }
.tl-dot {
    position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--e-bg); border: 3px solid var(--e-accent); box-sizing: border-box;
}
.tl-past .tl-dot { background: var(--e-accent); }
.tl-now .tl-dot { background: var(--e-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--e-accent) 22%, transparent); }
.tl-next .tl-dot { border-color: var(--e-line-strong); }
.tl-now::before, .tl-next::before { background: repeating-linear-gradient(to bottom, var(--e-line-strong) 0 4px, transparent 4px 8px); }
.tl-body { min-width: 0; }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tl-date { font-size: .8em; font-weight: 700; letter-spacing: .02em; color: var(--e-accent-fg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tl-pill { background: var(--e-accent); color: var(--e-accent-ink); }
html:not(.e-custom-accent) .tl-pill { background: linear-gradient(135deg, var(--e-accent), var(--e-accent-2)); }
.tl-title { margin: 3px 0 0; font-size: 1em; line-height: 1.3; font-weight: 700; color: var(--e-ink); overflow-wrap: anywhere; }
.tl-desc { margin: 3px 0 0; font-size: .9em; color: var(--e-ink-2); overflow-wrap: anywhere; }
.tl-link {
    display: inline-flex; align-items: center; min-height: 40px; margin: -4px 0 -10px; font-size: .86em; font-weight: 650;
    color: var(--e-accent-fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.tl-link:hover { text-decoration-thickness: 2px; }
.tl-next .tl-title, .tl-next .tl-desc { color: var(--e-ink-2); }

/* horizontal: a row that scrolls sideways (keyboard: the region is focusable) */
@media (min-width: 480px) {
    .tl-h .tl-scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 2px 10px; border-radius: var(--e-radius-sm); }
    .tl-h .tl-scroll:focus-visible { outline: 2px solid var(--e-focus); outline-offset: 2px; }
    .tl-h .tl-list { display: flex; width: max-content; min-width: 100%; }
    .tl-h .tl-item { flex: 0 0 210px; width: 210px; padding: 30px 18px 0 0; scroll-snap-align: start; }
    .tl-h .tl-item::before { left: 20px; right: 0; top: 8px; bottom: auto; width: auto; height: 2px; }
    .tl-h .tl-now::before, .tl-h .tl-next::before { background: repeating-linear-gradient(to right, var(--e-line-strong) 0 4px, transparent 4px 8px); }
    .tl-h .tl-dot { top: 0; }
}
html[data-compact="1"] .tl-item { padding-bottom: 12px; }

@media print {
    .tl-h .tl-scroll { overflow: visible; }
    .tl-h .tl-list { display: block; width: auto; }
}