/* Case Timeline — inherits the active theme's colors and fonts where available. */
.wp-block-jst-timeline {
	--jst-ink: var(--wp--preset--color--foreground, #111113);
	--jst-muted: var(--wp--preset--color--foreground-alt, #55555a);
	--jst-card: var(--wp--custom--color--background-raised, #ffffff);
	--jst-rule: rgba(17, 17, 19, 0.14);
	--jst-serif: var(--wp--preset--font-family--source-serif-pro, Georgia, serif);
	--jst-mono: var(--wp--preset--font-family--space-mono, ui-monospace, Menlo, monospace);
	--jst-gutter: 44px;
	--jst-line-x: 10px;

	position: relative;
	padding-left: var(--jst-gutter);
	margin: 2rem 0;
	color: var(--jst-ink);
}
.wp-block-jst-timeline::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	bottom: 0;
	left: calc(var(--jst-line-x) - 1px);
	width: 2px;
	background: linear-gradient(to bottom, var(--jst-ink), var(--jst-rule) 92%, transparent);
}

/* Year headings */
.wp-block-jst-timeline-year {
	position: relative;
	margin: 3rem 0 1.25rem;
}
.wp-block-jst-timeline > .wp-block-jst-timeline-year:first-child { margin-top: 0; }
.wp-block-jst-timeline-year::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(var(--jst-line-x) - var(--jst-gutter) - 9px);
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background: var(--jst-ink);
	outline: 5px solid var(--wp--preset--color--background, #e7e7e7);
}
.wp-block-jst-timeline-year .jst-year__title {
	margin: 0;
	font-family: var(--jst-serif);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--jst-ink);
}

/* Events */
.wp-block-jst-timeline-event {
	position: relative;
	margin: 0 0 1.25rem;
	padding: 1.25rem 1.5rem 1.35rem;
	background: var(--jst-card);
	border: 1px solid var(--jst-rule);
	border-left: 3px solid var(--jst-ink);
}
.wp-block-jst-timeline-event::before {
	content: "";
	position: absolute;
	top: 1.55rem;
	left: calc(var(--jst-line-x) - var(--jst-gutter) - 6px - 1px);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--jst-card);
	border: 3px solid var(--jst-ink);
	box-sizing: border-box;
}
.wp-block-jst-timeline-event::after { /* connector from line to card */
	content: "";
	position: absolute;
	top: calc(1.55rem + 5px);
	left: calc(var(--jst-line-x) - var(--jst-gutter) + 6px);
	width: calc(var(--jst-gutter) - var(--jst-line-x) - 6px - 1px);
	height: 2px;
	background: var(--jst-ink);
}
.jst-event__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	margin: 0 0 0.45rem;
}
.jst-event__date {
	margin: 0;
	font-family: var(--jst-mono);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jst-muted);
}
.jst-event__title {
	margin: 0 0 0.6rem;
	font-family: var(--jst-serif);
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--jst-ink);
}
.jst-event__body > * { margin-top: 0; margin-bottom: 0.75rem; }
.jst-event__body > :last-child { margin-bottom: 0; }
.jst-event__body a { text-decoration: underline; text-underline-offset: 3px; }
.jst-event__body blockquote { margin-left: 0; padding-left: 1rem; border-left: 2px solid var(--jst-rule); font-style: italic; }
.jst-event__body img { max-width: 100%; height: auto; }

/* Status badges */
.jst-event__status {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	font-family: var(--jst-mono);
	font-size: 0.65rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
	border: 1px solid currentColor;
	color: var(--jst-ink);
}
.jst-event__status--allegation  { color: #8a5a00; }
.jst-event__status--disputed    { color: #8a2b2b; }
.jst-event__status--speculation { color: #4a5568; border-style: dashed; }

@media (max-width: 600px) {
	.wp-block-jst-timeline { --jst-gutter: 30px; --jst-line-x: 7px; }
	.wp-block-jst-timeline-event { padding: 1rem 1rem 1.1rem; }
}