/**
 * Tenant timeline (task-1755): one lane per team, one bar per run of seasons.
 * Plain CSS on purpose, outside Tailwind's @layer, with no @apply or theme():
 * the markup (templates/venues/partials/_tenant_timeline.html) and this file
 * are site-agnostic so ImperialismMap can reuse them (task-1810) and the file
 * can move verbatim to core/static/core/css/, as house_ad.css did. Linking it
 * from a template also keeps Tailwind's purge from dropping tl-tick--start and
 * tl-tick--end, which the partial only builds as tl-tick--{{ tick.align }}.
 *
 * Self-contained: it reads the tokens below and nothing else.
 *   surface  surface-muted  border  text-primary  text-muted
 * (sites/venuestats/static/css/tokens.css). Bar fills are team colours set as
 * SVG fill attributes from TeamIdentity (data, never tokens, never `style`).
 * Inline `style` carries only positions (left, width).
 */

.tl { margin: 0 0 1.5rem; }
.tl-caption { margin-bottom: 0.75rem; font-size: 0.75rem; color: var(--text-muted); }
.tl-body { font-variant-numeric: tabular-nums; }

.tl-eras { position: relative; height: 1.25rem; margin-bottom: 0.5rem; }
.tl-era {
    position: absolute;
    top: 0;
    box-sizing: border-box;
    height: 1.25rem;
    padding: 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    line-height: 1.125rem;
    color: var(--text-muted);
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
}

.tl-lane { margin-bottom: 0.5rem; }
.tl-lane__name {
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}
.tl-lane__bar {
    display: block;
    width: 100%;
    height: 0.875rem;
    background: var(--surface-muted);
    border-radius: 0.25rem;
    outline: 1px solid var(--border);
}
.tl-seg--nocolor { fill: var(--text-muted); }
.tl-rename { stroke: var(--surface); stroke-width: 2; }

.tl-axis {
    position: relative;
    height: 1rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--border);
}
.tl-tick {
    position: absolute;
    top: 0.125rem;
    transform: translateX(-50%);
    font-size: 0.6875rem;
    color: var(--text-muted);
}
.tl-tick--start { transform: none; }
.tl-tick--end { transform: translateX(-100%); }