.inet-tlj{
	/* Defaults to match screenshot */
	--inet-tlj-year-size: 64px;
	--inet-tlj-ring-inner: #FFFFFF;
	--inet-tlj-ring-outer: #D1D5DB;
	--inet-tlj-ring-inner-w: 6px;
	--inet-tlj-ring-outer-w: 1px;
	--inet-tlj-ring-gap: 4px;

	position: relative;
	width: 100%;
}

.inet-tlj__header{
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
}

/* Arrows like screenshot (thin red outline circle) */
.inet-tlj__arrow{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: #E11D2E;
	cursor: pointer;
	transition: transform .15s ease, opacity .15s ease, background-color .2s ease;
	flex: 0 0 auto;
}
.inet-tlj__arrow:hover{ transform: translateY(-1px); background-color: rgba(225,29,46,.06); }
.inet-tlj__arrow:disabled{ opacity: .35; cursor: not-allowed; transform: none; background: transparent; }
.inet-tlj__arrow span{ display: inline-block; font-size: 20px; line-height: 1; transform: translateY(-1px); }

/* Track area and line */
.inet-tlj__track-wrap{
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	padding: 14px 10px;
}
.inet-tlj__line{
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 2px;
	background: #D1D5DB;
	z-index: 0;
}

.inet-tlj__track{
	position: relative;
	display: flex;
	align-items: center;
	transform: translate3d(0,0,0);
	transition: transform .35s ease;
	z-index: 1;
	will-change: transform;
}

.inet-tlj__item{
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Year circle with double ring (outer gray + inner white) */
.inet-tlj__year{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--inet-tlj-year-size);
	height: var(--inet-tlj-year-size);
	border-radius: 999px;
	border: 0;
	background: #E11D2E; /* default red */
	color: #FFFFFF;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.inet-tlj__year::before{
	content: "";
	position: absolute;
	inset: calc(var(--inet-tlj-ring-inner-w) * -1);
	border-radius: 999px;
	border: var(--inet-tlj-ring-inner-w) solid var(--inet-tlj-ring-inner);
	pointer-events: none;
}
.inet-tlj__year::after{
	content: "";
	position: absolute;
	inset: calc((var(--inet-tlj-ring-inner-w) + var(--inet-tlj-ring-gap) + var(--inet-tlj-ring-outer-w)) * -1);
	border-radius: 999px;
	border: var(--inet-tlj-ring-outer-w) solid var(--inet-tlj-ring-outer);
	pointer-events: none;
}
.inet-tlj__year:focus{
	outline: none;
	box-shadow: 0 0 0 3px rgba(17,24,39,.14);
}
.inet-tlj__year-label{
	display: inline-block;
	transform: translateY(1px);
}

/* Active year like screenshot (black bg + white text) */
.inet-tlj__item.is-active .inet-tlj__year{
	background: #000000;
	color: #FFFFFF;
}

.inet-tlj__content{ margin-top: 48px; }
.inet-tlj__panel{ display: none; }
.inet-tlj__panel.is-active{ display: block; }

/* editor note box */
.inet-tlj__template-note{
	padding: 14px 16px;
	border: 1px dashed rgba(0,0,0,.2);
	border-radius: 10px;
	font-size: 13px;
	opacity: .8;
}