/* =====================================================================
   HW History Timeline
   All visuals are driven by custom properties. Presets set them on the
   root; Elementor controls write the same properties with higher
   specificity, so a control always wins over a preset.
   ===================================================================== */

.hw-tl {
	/* structure */
	--hw-tl-count: 4;
	--hw-tl-cols: 3;
	--hw-tl-gap: 24px;
	--hw-tl-pace: 70;
	--hw-tl-buffer: 20;
	--hw-tl-stage: 100;
	--hw-tl-progress: 0;
	--hw-tl-line-top: 50%;

	/* palette (preset overridable) */
	--hw-tl-accent: #4f46e5;
	--hw-tl-surface: #ffffff;
	--hw-tl-ink: #0f172a;
	--hw-tl-muted: #64748b;
	--hw-tl-hairline: #e2e8f0;

	/* line */
	--hw-tl-line-color: var(--hw-tl-hairline);
	--hw-tl-line-progress-color: var(--hw-tl-accent);
	--hw-tl-line-size: 3px;
	--hw-tl-line-radius: 999px;

	/* card */
	--hw-tl-card-bg: var(--hw-tl-surface);
	--hw-tl-card-width: 88%;
	--hw-tl-card-radius: 16px;
	--hw-tl-card-padding: 24px;
	--hw-tl-card-gap: 28px;
	--hw-tl-card-align: start;
	--hw-tl-card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -8px rgba(15, 23, 42, .12);
	--hw-tl-card-border: 1px solid rgba(15, 23, 42, .06);
	--hw-tl-card-lift: -4px;
	--hw-tl-card-scale: 1;
	--hw-tl-card-transition: 250ms;
	--hw-tl-shadow-room: 48px;
	--hw-tl-pin-offset: 0px;

	/* arrow + stem */
	--hw-tl-arrow-size: 9px;
	--hw-tl-arrow-color: var(--hw-tl-card-bg);
	--hw-tl-arrow-offset: 0px;
	--hw-tl-stem-size: 2px;
	--hw-tl-stem-color: var(--hw-tl-hairline);

	/* marker */
	--hw-tl-marker-size: 34px;
	--hw-tl-marker-icon-size: 14px;
	--hw-tl-marker-bg: var(--hw-tl-accent);
	--hw-tl-marker-fg: #ffffff;
	--hw-tl-marker-ring: 4px;
	--hw-tl-marker-ring-color: var(--hw-tl-surface);
	--hw-tl-marker-pop-scale: 1.3;
	--hw-tl-pulse-color: var(--hw-tl-accent);

	/* text */
	--hw-tl-date-color: var(--hw-tl-accent);
	--hw-tl-title-color: var(--hw-tl-ink);
	--hw-tl-content-color: var(--hw-tl-muted);

	/* image */
	--hw-tl-image-height: 180px;
	--hw-tl-image-radius: 12px;
	--hw-tl-image-gap: 16px;
	--hw-tl-image-fit: cover;
	--hw-tl-image-zoom: 1.05;

	/* navigation */
	--hw-tl-nav-size: 44px;
	--hw-tl-nav-bg: var(--hw-tl-surface);
	--hw-tl-nav-fg: var(--hw-tl-ink);
	--hw-tl-nav-bg-hover: var(--hw-tl-accent);
	--hw-tl-nav-fg-hover: #ffffff;
	--hw-tl-dot-color: var(--hw-tl-hairline);
	--hw-tl-dot-active-color: var(--hw-tl-accent);
	--hw-tl-progress-size: 4px;
	--hw-tl-progress-track: var(--hw-tl-hairline);
	--hw-tl-progress-fill: var(--hw-tl-accent);
	--hw-tl-quick-bg: transparent;
	--hw-tl-quick-fg: var(--hw-tl-muted);
	--hw-tl-quick-border: var(--hw-tl-hairline);
	--hw-tl-quick-bg-active: var(--hw-tl-accent);
	--hw-tl-quick-fg-active: #ffffff;
	--hw-tl-hint-color: var(--hw-tl-muted);

	/* animation */
	--hw-tl-item-delay: 0ms;
	--hw-tl-reveal: 1;
	--hw-tl-col-w: calc((100% - (var(--hw-tl-cols) - 1) * var(--hw-tl-gap)) / var(--hw-tl-cols));
	--hw-tl-anim-duration: 600ms;
	--hw-tl-anim-easing: cubic-bezier(.22, 1, .36, 1);
	--hw-tl-line-draw-duration: 1000ms;
	--hw-tl-dim: 1;

	position: relative;
	display: block;
	width: 100%;
}

.hw-tl *,
.hw-tl *::before,
.hw-tl *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------
   PRESETS
   --------------------------------------------------------------------- */

.hw-tl--preset-modern {
	--hw-tl-accent: #4f46e5;
	--hw-tl-card-radius: 18px;
	--hw-tl-card-padding: 26px;
	--hw-tl-card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .18);
	--hw-tl-card-border: 1px solid rgba(15, 23, 42, .06);
	--hw-tl-line-size: 3px;
	--hw-tl-marker-size: 36px;
	--hw-tl-image-height: 180px;
	--hw-tl-image-radius: 12px;
}

.hw-tl--preset-minimal {
	--hw-tl-accent: #0f172a;
	--hw-tl-card-bg: transparent;
	--hw-tl-card-shadow: none;
	--hw-tl-card-border: 0;
	--hw-tl-card-padding: 4px 8px;
	--hw-tl-card-radius: 0px;
	--hw-tl-card-lift: 0px;
	--hw-tl-line-size: 1px;
	--hw-tl-marker-size: 14px;
	--hw-tl-marker-ring: 3px;
	--hw-tl-arrow-size: 0px;
	--hw-tl-image-radius: 6px;
	--hw-tl-nav-bg: transparent;
}

.hw-tl--preset-cards {
	--hw-tl-accent: #0ea5e9;
	--hw-tl-card-radius: 12px;
	--hw-tl-card-padding: 22px;
	--hw-tl-card-shadow: 0 10px 30px -10px rgba(15, 23, 42, .28);
	--hw-tl-card-border: 0;
	--hw-tl-card-lift: -8px;
	--hw-tl-marker-size: 30px;
}

.hw-tl--preset-bold {
	--hw-tl-accent: #f59e0b;
	--hw-tl-surface: #111827;
	--hw-tl-ink: #f9fafb;
	--hw-tl-muted: #9ca3af;
	--hw-tl-hairline: #374151;
	--hw-tl-card-radius: 4px;
	--hw-tl-card-padding: 24px;
	--hw-tl-card-shadow: none;
	--hw-tl-card-border: 0;
	--hw-tl-line-size: 6px;
	--hw-tl-marker-size: 44px;
	--hw-tl-marker-fg: #111827;
	--hw-tl-marker-ring: 6px;
	--hw-tl-marker-ring-color: #111827;
	--hw-tl-nav-fg: #f9fafb;
	--hw-tl-nav-bg: #1f2937;
	--hw-tl-image-radius: 0px;
}

.hw-tl--preset-outline {
	--hw-tl-accent: #059669;
	--hw-tl-card-bg: transparent;
	--hw-tl-card-border: 2px solid var(--hw-tl-accent);
	--hw-tl-card-shadow: none;
	--hw-tl-card-radius: 10px;
	--hw-tl-arrow-color: transparent;
	--hw-tl-marker-bg: transparent;
	--hw-tl-marker-fg: var(--hw-tl-accent);
	--hw-tl-marker-ring: 2px;
	--hw-tl-marker-ring-color: var(--hw-tl-accent);
	--hw-tl-nav-bg: transparent;
}

/* ---------------------------------------------------------------------
   PIN STAGE
   Spacer height comes from CSS so there is no layout shift on load and
   responsive --hw-tl-cols is honoured without JS.
   --------------------------------------------------------------------- */

.hw-tl__spacer { display: block; width: 100%; }

.hw-tl__sticky { position: relative; width: 100%; }

.hw-tl--mode-scroll_pin .hw-tl__spacer {
	height: calc(var(--hw-tl-stage) * 1vh);
	height: calc(
		var(--hw-tl-stage) * 1svh +
		(max(0, var(--hw-tl-count) - var(--hw-tl-cols)) * var(--hw-tl-pace) + var(--hw-tl-buffer)) * 1svh
	);
}

.hw-tl--mode-scroll_pin .hw-tl__sticky {
	position: sticky;
	top: 0;
	height: calc(var(--hw-tl-stage) * 1vh);
	height: calc(var(--hw-tl-stage) * 1svh);
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

.hw-tl--mode-scroll_pin.hw-tl--pin-top .hw-tl__sticky { justify-content: flex-start; }
.hw-tl--mode-scroll_pin.hw-tl--pin-bottom .hw-tl__sticky { justify-content: flex-end; }

/* The offset moves the stage content, not the sticky box itself: changing the
   sticky element's `top` would also change when it starts and stops sticking,
   and therefore the whole scroll mapping. Translating the inner wrapper keeps
   the pin timing untouched.

   Deliberately the standalone `translate` property, not `transform`: transform
   is a crowded property that themes, animation libraries and Elementor's own
   effects all write to, and any of them would silently wipe the offset. */
.hw-tl.hw-tl--mode-scroll_pin .hw-tl__inner {
	translate: 0 var(--hw-tl-pin-offset);
}

@supports not (translate: 0px) {
	.hw-tl.hw-tl--mode-scroll_pin .hw-tl__inner {
		transform: translateY(var(--hw-tl-pin-offset));
	}
}

body.admin-bar .hw-tl--mode-scroll_pin .hw-tl__sticky {
	top: var(--wp-admin--admin-bar--height, 32px);
	height: calc(var(--hw-tl-stage) * 1svh - var(--wp-admin--admin-bar--height, 32px));
}

.hw-tl__inner {
	display: flex;
	flex-direction: column;
	/* Must not be stretched or squashed to the stage height — otherwise there
	   is no free space left and justify-content on the stage does nothing. */
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	max-height: 100%;
	min-height: 0;
	padding: 8px 0;
}

/* Controls, quick-nav and progress keep their size; only the track area shrinks,
   so navigation is never pushed out of the pinned stage. */
.hw-tl__year-nav,
.hw-tl__controls,
.hw-tl__progress-track,
.hw-tl__hint { flex: 0 0 auto; }

/* ---------------------------------------------------------------------
   TRACK & ITEMS
   --------------------------------------------------------------------- */

/* overflow:hidden makes this a real scroll container: not scrollable by the
   user, fully scrollable from script, and scrollWidth/clientWidth are exact.
   All horizontal movement in this widget goes through its scrollLeft. */
.hw-tl__viewport {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 0;
	flex: 1 1 auto;
	overflow-x: hidden;
	overflow-y: hidden;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	/* A theme-level `scroll-behavior: smooth` would fight the per-frame
	   scrollLeft writes and make the timeline stutter or stall. */
	scroll-behavior: auto;

	/* This element must clip horizontally, and `overflow: hidden` always
	   clips both axes — `overflow-x: clip` would keep the Y axis visible but
	   would also stop it being a scroll container, which the whole widget
	   depends on. So the clip box is grown vertically by exactly as much as
	   the negative margin takes back: card shadows get room to breathe while
	   the occupied layout height stays identical. */
	padding-block: var(--hw-tl-shadow-room);
	margin-block: calc(-1 * var(--hw-tl-shadow-room));
}
.hw-tl__viewport::-webkit-scrollbar { display: none; }

/* Track and line share this box. The line has to span the full scrollable
   width — inside the viewport it would only ever be one screen wide and
   would scroll out of sight along with the content. */
.hw-tl__canvas {
	position: relative;
	display: block;
	width: max-content;
	min-width: 100%;
}

.hw-tl__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--hw-tl-col-w);
	grid-template-rows: 1fr auto 1fr;
	align-items: stretch;
	column-gap: var(--hw-tl-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 2;
	width: 100%;
}

.hw-tl__item {
	display: grid;
	grid-row: 1 / span 3;
	grid-template-rows: subgrid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	position: relative;
	min-width: 0;
}

@supports not (grid-template-rows: subgrid) {
	.hw-tl__item { grid-template-rows: 1fr auto 1fr; }
}

/* Card and stem live in one branch so they can never be auto-placed into a
   second implicit column, which used to push the stem off to the side. */
.hw-tl__branch {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-height: 0;
}

.hw-tl--dim-inactive .hw-tl__item:not(.is-active) {
	opacity: var(--hw-tl-dim);
	transition: opacity var(--hw-tl-card-transition) ease;
}

/* above / below placement */
.hw-tl__item--above .hw-tl__branch { grid-row: 1; justify-content: flex-end; }
.hw-tl__item--below .hw-tl__branch { grid-row: 3; justify-content: flex-start; }
.hw-tl__item--below .hw-tl__stem { order: -1; }
.hw-tl__item .hw-tl__marker { grid-row: 2; grid-column: 1; align-self: center; }

/* ---------------------------------------------------------------------
   CARD
   --------------------------------------------------------------------- */

.hw-tl__card {
	position: relative;
	display: block;
	width: var(--hw-tl-card-width);
	max-width: 100%;
	margin: 0;
	flex: 0 1 auto;
	min-height: 0;
	padding: var(--hw-tl-card-padding);
	background: var(--hw-tl-card-bg);
	border: var(--hw-tl-card-border);
	border-radius: var(--hw-tl-card-radius);
	box-shadow: var(--hw-tl-card-shadow);
	text-align: var(--hw-tl-card-align);
	text-decoration: none;
	color: inherit;
	transition: transform var(--hw-tl-card-transition) ease,
		box-shadow var(--hw-tl-card-transition) ease,
		background-color var(--hw-tl-card-transition) ease,
		border-color var(--hw-tl-card-transition) ease;
}

.hw-tl__card:hover,
.hw-tl__card:focus-within {
	transform: translateY(var(--hw-tl-card-lift)) scale(var(--hw-tl-card-scale));
}

/* card arrow */
.hw-tl__card::after {
	content: "";
	position: absolute;
	left: calc(50% + var(--hw-tl-arrow-offset));
	translate: -50% 0;
	width: 0;
	height: 0;
	border-left: var(--hw-tl-arrow-size) solid transparent;
	border-right: var(--hw-tl-arrow-size) solid transparent;
}

.hw-tl__item--above .hw-tl__card::after {
	bottom: calc(-1 * var(--hw-tl-arrow-size));
	border-top: var(--hw-tl-arrow-size) solid var(--hw-tl-arrow-color);
}

.hw-tl__item--below .hw-tl__card::after {
	top: calc(-1 * var(--hw-tl-arrow-size));
	border-bottom: var(--hw-tl-arrow-size) solid var(--hw-tl-arrow-color);
}

.hw-tl--hide-arrows .hw-tl__card::after { display: none; }

/* stem */
.hw-tl__stem {
	display: block;
	flex: 0 0 auto;
	width: var(--hw-tl-stem-size);
	height: var(--hw-tl-card-gap);
	background: var(--hw-tl-stem-color);
}

.hw-tl--stem-dashed .hw-tl__stem,
.hw-tl--stem-dotted .hw-tl__stem {
	background: none;
	border-left-width: var(--hw-tl-stem-size);
	border-left-color: var(--hw-tl-stem-color);
	width: 0;
}
.hw-tl--stem-dashed .hw-tl__stem { border-left-style: dashed; }
.hw-tl--stem-dotted .hw-tl__stem { border-left-style: dotted; }

.hw-tl--hide-stems .hw-tl__stem { visibility: hidden; }

/* ---------------------------------------------------------------------
   CARD CONTENT
   --------------------------------------------------------------------- */

.hw-tl__media {
	margin: 0 0 var(--hw-tl-image-gap);
	border-radius: var(--hw-tl-image-radius);
	overflow: hidden;
}

.hw-tl__media img {
	display: block;
	width: 100%;
	height: var(--hw-tl-image-height);
	object-fit: var(--hw-tl-image-fit);
	transition: transform var(--hw-tl-card-transition) ease, filter var(--hw-tl-card-transition) ease;
}

.hw-tl__card:hover .hw-tl__media img,
.hw-tl__card:focus-within .hw-tl__media img { transform: scale(var(--hw-tl-image-zoom)); }

.hw-tl__date {
	display: inline-block;
	margin-bottom: 6px;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hw-tl-date-color);
}

.hw-tl__title {
	margin: 0 0 8px;
	font-size: 1.1875rem;
	line-height: 1.3;
	color: var(--hw-tl-title-color);
	transition: color var(--hw-tl-card-transition) ease;
}

.hw-tl__content {
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--hw-tl-content-color);
}

.hw-tl__content > *:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   MARKER
   --------------------------------------------------------------------- */

.hw-tl__marker {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--hw-tl-marker-size);
	height: var(--hw-tl-marker-size);
	border-radius: 50%;
	background: var(--hw-tl-marker-bg);
	color: var(--hw-tl-marker-fg);
	box-shadow: 0 0 0 var(--hw-tl-marker-ring) var(--hw-tl-marker-ring-color);
	font-size: calc(var(--hw-tl-marker-icon-size) * .9);
	font-weight: 700;
	line-height: 1;
	z-index: 5;
	transition: transform 300ms cubic-bezier(.34, 1.56, .64, 1),
		background-color var(--hw-tl-card-transition) ease,
		color var(--hw-tl-card-transition) ease,
		box-shadow var(--hw-tl-card-transition) ease;
}

.hw-tl__marker--dot { --hw-tl-marker-size: 14px; }

.hw-tl__marker i,
.hw-tl__marker svg {
	font-size: var(--hw-tl-marker-icon-size);
	width: var(--hw-tl-marker-icon-size);
	height: var(--hw-tl-marker-icon-size);
	fill: currentColor;
}

.hw-tl__marker img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.hw-tl--marker-pop .hw-tl__item.is-active .hw-tl__marker {
	transform: scale(var(--hw-tl-marker-pop-scale));
}

/* pulse */
.hw-tl--marker-pulse .hw-tl__item.is-active .hw-tl__marker::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--hw-tl-pulse-color);
	animation: hwTlPulse 1.8s ease-out infinite;
}

@keyframes hwTlPulse {
	0%   { transform: scale(1); opacity: .7; }
	100% { transform: scale(2.2); opacity: 0; }
}

/* ---------------------------------------------------------------------
   LINE
   --------------------------------------------------------------------- */

.hw-tl__line {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--hw-tl-line-top);
	translate: 0 -50%;
	height: var(--hw-tl-line-size);
	border-radius: var(--hw-tl-line-radius);
	background: var(--hw-tl-line-color);
	z-index: 1;
}

.hw-tl--line-dashed .hw-tl__line,
.hw-tl--line-dotted .hw-tl__line {
	background: none;
	height: 0;
	border-top-width: var(--hw-tl-line-size);
	border-top-color: var(--hw-tl-line-color);
}
.hw-tl--line-dashed .hw-tl__line { border-top-style: dashed; }
.hw-tl--line-dotted .hw-tl__line { border-top-style: dotted; }

.hw-tl__line-progress {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--hw-tl-line-progress-color);
	transform-origin: left center;
	transform: scaleX(var(--hw-tl-progress));
}

[dir="rtl"] .hw-tl__line-progress { transform-origin: right center; }

.hw-tl--line-dashed .hw-tl__line-progress,
.hw-tl--line-dotted .hw-tl__line-progress { display: none; }

/* line draw */
.hw-tl--line-draw .hw-tl__line {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--hw-tl-line-draw-duration) cubic-bezier(.22, 1, .36, 1);
}
.hw-tl--line-draw.is-drawn .hw-tl__line { transform: scaleX(1); }

/* ---------------------------------------------------------------------
   CONTROLS
   --------------------------------------------------------------------- */

.hw-tl__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 20px;
}

.hw-tl__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hw-tl-nav-size);
	height: var(--hw-tl-nav-size);
	padding: 0;
	border: 1px solid var(--hw-tl-hairline);
	border-radius: 50%;
	background: var(--hw-tl-nav-bg);
	color: var(--hw-tl-nav-fg);
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease;
}

.hw-tl__arrow:hover,
.hw-tl__arrow:focus-visible {
	background: var(--hw-tl-nav-bg-hover);
	color: var(--hw-tl-nav-fg-hover);
}

.hw-tl__arrow[disabled] { opacity: .35; cursor: default; }
.hw-tl__arrow[disabled]:hover { background: var(--hw-tl-nav-bg); color: var(--hw-tl-nav-fg); }

.hw-tl__dots { display: flex; align-items: center; gap: 8px; }

.hw-tl__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hw-tl-dot-color);
	cursor: pointer;
	transition: background-color 200ms ease, transform 200ms ease;
}

.hw-tl__dot.is-active {
	background: var(--hw-tl-dot-active-color);
	transform: scale(1.35);
}

.hw-tl__progress-track {
	position: relative;
	width: 100%;
	height: var(--hw-tl-progress-size);
	margin-top: 20px;
	border-radius: 999px;
	background: var(--hw-tl-progress-track);
	overflow: hidden;
}

.hw-tl__progress-bar {
	width: 100%;
	height: 100%;
	background: var(--hw-tl-progress-fill);
	transform-origin: left center;
	transform: scaleX(var(--hw-tl-progress));
}

[dir="rtl"] .hw-tl__progress-bar { transform-origin: right center; }

/* quick nav */
.hw-tl__year-nav { margin-bottom: 24px; }

.hw-tl__year-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hw-tl__year-btn {
	padding: 6px 16px;
	border: 1px solid var(--hw-tl-quick-border);
	border-radius: 999px;
	background: var(--hw-tl-quick-bg);
	color: var(--hw-tl-quick-fg);
	font-size: .8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.hw-tl__year-btn:hover,
.hw-tl__year-btn:focus-visible,
.hw-tl__year-btn.is-active {
	background: var(--hw-tl-quick-bg-active);
	color: var(--hw-tl-quick-fg-active);
	border-color: var(--hw-tl-quick-bg-active);
}

/* hint */
.hw-tl__hint {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-top: 16px;
	font-size: .8125rem;
	color: var(--hw-tl-hint-color);
	pointer-events: none;
	transition: opacity 400ms ease;
}

.hw-tl__hint-icon { animation: hwTlNudge 2s ease-in-out infinite; }

@keyframes hwTlNudge {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(5px); }
}

.hw-tl.is-scrolled .hw-tl__hint { opacity: 0; }

.hw-tl__debug {
	position: absolute;
	top: 8px;
	inset-inline-start: 8px;
	z-index: 99;
	max-width: 220px;
	padding: 10px 12px;
	border-radius: 6px;
	background: rgba(15, 23, 42, .92);
	color: #e2e8f0;
	font: 500 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
	white-space: pre;
	pointer-events: none;
}

.hw-tl__empty {
	padding: 24px;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	color: #64748b;
	text-align: center;
}

/* ---------------------------------------------------------------------
   FOCUS
   --------------------------------------------------------------------- */

.hw-tl a:focus-visible,
.hw-tl button:focus-visible {
	outline: 3px solid var(--hw-tl-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------------
   NAV MODES
   --------------------------------------------------------------------- */

/* Drag is the only mode where the user scrolls the viewport directly. */
.hw-tl--mode-drag .hw-tl__viewport {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}
.hw-tl--mode-drag .hw-tl__viewport.is-dragging { cursor: grabbing; }

.hw-tl--mode-drag.is-snap .hw-tl__viewport { scroll-snap-type: x mandatory; }
.hw-tl--mode-drag.is-snap .hw-tl__item { scroll-snap-align: start; }

.hw-tl--mode-static .hw-tl__canvas { width: 100%; min-width: 0; }
.hw-tl--mode-static .hw-tl__track { width: 100%; min-width: 0; }

/* ---------------------------------------------------------------------
   FALLBACK LAYOUTS
   Applied by JS on the root element, or by the short-viewport query.
   --------------------------------------------------------------------- */

.hw-tl.is-fallback .hw-tl__spacer { height: auto; }
.hw-tl.is-fallback .hw-tl__sticky { position: static; height: auto; overflow: visible; }
.hw-tl.is-fallback .hw-tl__canvas { width: 100%; min-width: 0; }
.hw-tl.is-fallback .hw-tl__track { width: 100%; min-width: 0; }
.hw-tl.is-fallback .hw-tl__inner { translate: none; transform: none; flex: 0 1 auto; }
.hw-tl.is-fallback .hw-tl__viewport {
	overflow: visible;
	padding-block: 0;
	margin-block: 0;
}
.hw-tl.is-fallback .hw-tl__hint { display: none; }
.hw-tl.is-fallback .hw-tl__item { opacity: 1; }

/* -- vertical timeline -- */
.hw-tl--fallback-vertical_timeline .hw-tl__viewport { overflow: visible; }

.hw-tl--fallback-vertical_timeline .hw-tl__track {
	display: flex;
	flex-direction: column;
	row-gap: var(--hw-tl-gap);
	column-gap: 0;
	width: 100%;
	padding-inline-start: calc(var(--hw-tl-marker-size) + 28px);
}

.hw-tl--fallback-vertical_timeline .hw-tl__item {
	display: block;
	position: relative;
	width: 100%;
}

.hw-tl--fallback-vertical_timeline .hw-tl__branch {
	display: block;
	width: 100%;
}

.hw-tl--fallback-vertical_timeline .hw-tl__card {
	width: 100%;
	margin: 0;
	text-align: start;
}

.hw-tl--fallback-vertical_timeline .hw-tl__card::after {
	top: calc(var(--hw-tl-marker-size) / 2);
	bottom: auto;
	left: calc(-1 * var(--hw-tl-arrow-size));
	translate: 0 -50%;
	border-top: var(--hw-tl-arrow-size) solid transparent;
	border-bottom: var(--hw-tl-arrow-size) solid transparent;
	border-left: 0;
	border-right: var(--hw-tl-arrow-size) solid var(--hw-tl-arrow-color);
}

.hw-tl--fallback-vertical_timeline .hw-tl__stem {
	position: absolute;
	left: -22px;
	top: calc(var(--hw-tl-marker-size) / 2);
	translate: 0 -50%;
	width: 22px;
	height: var(--hw-tl-stem-size);
	border: 0;
	background: var(--hw-tl-stem-color);
}

.hw-tl--fallback-vertical_timeline .hw-tl__marker {
	position: absolute;
	left: calc(-1 * (var(--hw-tl-marker-size) + 22px));
	top: 0;
}

.hw-tl--fallback-vertical_timeline .hw-tl__line {
	top: 0;
	bottom: 0;
	left: calc(var(--hw-tl-marker-size) / 2);
	right: auto;
	translate: -50% 0;
	width: var(--hw-tl-line-size);
	height: auto;
	border: 0;
	background: var(--hw-tl-line-color);
}

.hw-tl--fallback-vertical_timeline .hw-tl__line-progress {
	width: 100%;
	height: 100%;
	transform-origin: top center;
	transform: scaleY(var(--hw-tl-progress));
}

/* -- horizontal swipe -- */
.hw-tl--fallback-horizontal_swipe .hw-tl__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.hw-tl--fallback-horizontal_swipe .hw-tl__canvas {
	width: max-content;
	min-width: 100%;
}

.hw-tl--fallback-horizontal_swipe .hw-tl__track {
	grid-auto-columns: 82%;
	width: 100%;
}

.hw-tl--fallback-horizontal_swipe .hw-tl__item { scroll-snap-align: center; }

/* -- stacked list -- */
.hw-tl--fallback-stacked_list .hw-tl__viewport { overflow: visible; }

.hw-tl--fallback-stacked_list .hw-tl__track {
	display: flex;
	flex-direction: column;
	row-gap: var(--hw-tl-gap);
	column-gap: 0;
	width: 100%;
}

.hw-tl--fallback-stacked_list .hw-tl__item { display: block; width: 100%; }
.hw-tl--fallback-stacked_list .hw-tl__branch { display: block; width: 100%; }
.hw-tl--fallback-stacked_list .hw-tl__card { width: 100%; margin: 0; }
.hw-tl--fallback-stacked_list .hw-tl__card::after,
.hw-tl--fallback-stacked_list .hw-tl__stem,
.hw-tl--fallback-stacked_list .hw-tl__marker,
.hw-tl--fallback-stacked_list .hw-tl__line { display: none; }

/* short viewports (landscape phones) — pinning never makes sense here */
@media (max-height: 520px) {
	.hw-tl--mode-scroll_pin .hw-tl__spacer { height: auto; }
	.hw-tl--mode-scroll_pin .hw-tl__sticky { position: static; height: auto; overflow: visible; }
	.hw-tl.hw-tl--mode-scroll_pin .hw-tl__inner { translate: none; transform: none; }
	.hw-tl--mode-scroll_pin .hw-tl__viewport { overflow-x: auto; }
	.hw-tl--mode-scroll_pin .hw-tl__hint { display: none; }
}

/* ---------------------------------------------------------------------
   ENTRANCE ANIMATIONS
   Hiding is applied by JS (.hw-tl--anim) so a JS failure can never leave
   content invisible.
   --------------------------------------------------------------------- */

.hw-tl--anim .hw-tl__item {
	opacity: 0;
	transition:
		opacity var(--hw-tl-anim-duration) var(--hw-tl-anim-easing),
		transform var(--hw-tl-anim-duration) var(--hw-tl-anim-easing);
	transition-delay: var(--hw-tl-item-delay, 0ms);
}

.hw-tl--anim[data-entrance="fade_up"]         .hw-tl__item { transform: translateY(32px); }
.hw-tl--anim[data-entrance="fade_down"]       .hw-tl__item { transform: translateY(-32px); }
.hw-tl--anim[data-entrance="zoom"]            .hw-tl__item { transform: scale(.88); }
.hw-tl--anim[data-entrance="flip"]            .hw-tl__item { transform: perspective(700px) rotateY(-28deg); }
.hw-tl--anim[data-entrance="slide_from_line"] .hw-tl__item--above { transform: translateY(56px); }
.hw-tl--anim[data-entrance="slide_from_line"] .hw-tl__item--below { transform: translateY(-56px); }

/* Must stay LAST and outweigh every rule above it. The entrance rules carry a
   class + attribute + class; this carries two of each, so it always wins. */
.hw-tl--anim[data-entrance] .hw-tl__item.is-animated,
.hw-tl--anim[data-entrance] .hw-tl__item--above.is-animated,
.hw-tl--anim[data-entrance] .hw-tl__item--below.is-animated {
	opacity: 1;
	transform: none;
}

/* scrubbed variant */
.hw-tl--scrub .hw-tl__item { opacity: var(--hw-tl-reveal, 1); }
.hw-tl--scrub[data-entrance="fade_up"]   .hw-tl__item { transform: translateY(calc(32px * (1 - var(--hw-tl-reveal, 1)))); }
.hw-tl--scrub[data-entrance="fade_down"] .hw-tl__item { transform: translateY(calc(-32px * (1 - var(--hw-tl-reveal, 1)))); }
.hw-tl--scrub[data-entrance="zoom"]      .hw-tl__item { transform: scale(calc(.88 + .12 * var(--hw-tl-reveal, 1))); }
.hw-tl--scrub[data-entrance="slide_from_line"] .hw-tl__item--above { transform: translateY(calc(56px * (1 - var(--hw-tl-reveal, 1)))); }
.hw-tl--scrub[data-entrance="slide_from_line"] .hw-tl__item--below { transform: translateY(calc(-56px * (1 - var(--hw-tl-reveal, 1)))); }

/* ---------------------------------------------------------------------
   EDITOR — static preview mode only
   --------------------------------------------------------------------- */

.hw-tl.hw-tl--editor-static .hw-tl__spacer { height: auto; }
.hw-tl.hw-tl--editor-static .hw-tl__sticky { position: static; height: auto; overflow: visible; }
.hw-tl.hw-tl--editor-static .hw-tl__viewport { overflow-x: auto; }
.hw-tl.hw-tl--editor-static .hw-tl__inner { translate: none; transform: none; flex: 0 1 auto; }
.hw-tl.hw-tl--editor-static .hw-tl__item { opacity: 1; transform: none; }
.hw-tl.hw-tl--editor-static .hw-tl__line { transform: none; }
.hw-tl.hw-tl--editor-static .hw-tl__hint { display: none; }

/* ---------------------------------------------------------------------
   PRINT
   --------------------------------------------------------------------- */

@media print {
	.hw-tl__spacer, .hw-tl__sticky { height: auto !important; position: static !important; overflow: visible !important; }
	.hw-tl__viewport { overflow: visible !important; padding-block: 0 !important; margin-block: 0 !important; }
	.hw-tl__canvas { width: auto !important; min-width: 0 !important; }
	.hw-tl__track { display: block !important; width: auto !important; }
	.hw-tl__item { display: block !important; opacity: 1 !important; transform: none !important; page-break-inside: avoid; }
	.hw-tl__card { width: 100% !important; margin: 0 0 12pt !important; box-shadow: none !important; }
	.hw-tl__line, .hw-tl__marker, .hw-tl__stem, .hw-tl__controls,
	.hw-tl__progress-track, .hw-tl__hint, .hw-tl__year-nav { display: none !important; }
}

/* ---------------------------------------------------------------------
   REDUCED MOTION
   This block must override everything above — !important is intentional
   and required here. Do not "clean it up".
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hw-tl__spacer { height: auto !important; }
	.hw-tl__sticky { position: static !important; height: auto !important; overflow: visible !important; }
	.hw-tl__inner { translate: none !important; transform: none !important; }
	.hw-tl__viewport {
		overflow-x: auto !important;
		scroll-behavior: auto !important;
		padding-block: 0 !important;
		margin-block: 0 !important;
	}
	.hw-tl__canvas { width: max-content !important; }
	.hw-tl__track { width: 100% !important; transition: none !important; }
	.hw-tl__item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.hw-tl__card, .hw-tl__marker, .hw-tl__media img, .hw-tl__line, .hw-tl__line-progress {
		transition: none !important;
		animation: none !important;
	}
	.hw-tl--line-draw .hw-tl__line { transform: none !important; }
	.hw-tl--marker-pop .hw-tl__item.is-active .hw-tl__marker { transform: none !important; }
	.hw-tl--marker-pulse .hw-tl__item.is-active .hw-tl__marker::before { display: none !important; }
	.hw-tl__hint-icon { animation: none !important; }
	.hw-tl__inner { max-height: none !important; }
}