/**
 * Festival Timeline — multi-stage day schedule (timeline.js).
 * Horizontal time axis, one lane per stage, performance blocks placed by time.
 * Shines under the "festival" and "night" presets.
 */

.mlhe-timeline { background: var(--mlhe-surface); border-radius: var(--mlhe-radius); padding: 20px; box-shadow: var(--mlhe-shadow); }

.mlhe-tl__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.mlhe .mlhe-tl__tab {
	font-family: var(--mlhe-font-head); font-weight: 700;
	border: 1.5px solid var(--mlhe-line); background: transparent; color: var(--mlhe-ink);
	border-radius: var(--mlhe-radius-pill); padding: 0.55em 1.15em; cursor: pointer;
	display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1;
	transition: all 0.25s var(--mlhe-ease);
}
.mlhe-tl__tab small { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mlhe-muted); font-weight: 700; }
.mlhe .mlhe-tl__tab.is-active { background: var(--mlhe-accent); border-color: var(--mlhe-accent); color: var(--mlhe-accent-ink); }
.mlhe-tl__tab.is-active small { color: var(--mlhe-accent-ink); opacity: 0.75; }

.mlhe-tl__scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
.mlhe-tl__inner { position: relative; min-width: max-content; }

/* Hour axis */
.mlhe-tl__axis {
	position: relative; height: 30px; margin-left: var(--mlhe-tl-label, 130px);
	border-bottom: 1px solid var(--mlhe-line);
}
.mlhe-tl__hour {
	position: absolute; top: 0; height: 100%;
	font-size: 0.68rem; font-weight: 600; color: var(--mlhe-muted);
	font-variant-numeric: tabular-nums;
	border-left: 1px solid var(--mlhe-line); padding-left: 5px;
}

/* Lanes */
.mlhe-tl__lane { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--mlhe-line); }
.mlhe-tl__lane:last-child { border-bottom: 0; }
.mlhe-tl__label {
	width: var(--mlhe-tl-label, 130px); flex: none;
	position: sticky; left: 0; z-index: 3;
	background: var(--mlhe-surface);
	display: flex; align-items: center; gap: 8px;
	padding: 14px 12px 14px 4px;
	font-family: var(--mlhe-font-head); font-weight: 700; font-size: 0.92rem; color: var(--mlhe-ink);
	border-right: 1px solid var(--mlhe-line);
}
.mlhe-tl__label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--mlhe-lane, var(--mlhe-accent)); flex: none; }
.mlhe-tl__track { position: relative; flex: 1; min-height: 74px; }
.mlhe-tl__gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--mlhe-line) 55%, transparent); }

.mlhe .mlhe-tl__block {
	position: absolute; top: 8px; bottom: 8px; left: 0;
	border-radius: 10px; padding: 8px 11px; overflow: hidden; cursor: pointer;
	text-align: left;
	background: color-mix(in srgb, var(--mlhe-lane, var(--mlhe-accent)) 22%, var(--mlhe-surface));
	border-left: 3px solid var(--mlhe-lane, var(--mlhe-accent));
	display: flex; flex-direction: column; justify-content: center;
	transition: transform 0.2s var(--mlhe-ease), box-shadow 0.2s var(--mlhe-ease);
}
.mlhe-tl__block:hover { transform: translateY(-2px); box-shadow: var(--mlhe-shadow-lg); z-index: 4; }
.mlhe-tl__block .time { font-size: 0.66rem; font-weight: 600; color: var(--mlhe-muted); font-variant-numeric: tabular-nums; }
.mlhe-tl__block .name { font-family: var(--mlhe-font-head); font-weight: 700; font-size: 0.9rem; color: var(--mlhe-ink); line-height: 1.1; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mlhe-tl__legend { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 16px; }
.mlhe-tl__legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 600; color: var(--mlhe-body); }
.mlhe-tl__legend i { width: 11px; height: 11px; border-radius: 3px; }

@media (max-width: 680px) {
	.mlhe-timeline { padding: 14px; }
	.mlhe-tl__label { width: 96px; font-size: 0.8rem; --mlhe-tl-label: 96px; }
}