/**
 * DN AGRAR Timelines — Component styles.
 * All selectors live under the .dn-tl namespace.
 *
 * Design language:
 *   Headings   Lexend (var(--dn-tl-font-heading))
 *   Body/UI    Karla  (var(--dn-tl-font-body))
 *   Accents    brand greens + #d77b1a orange + #d5ed9f lime
 */

.dn-tl {
	font-family: var(--dn-tl-font-body);
	color: var(--dn-tl-text);
	font-size: 15px;
	line-height: 1.6;
	max-width: var(--content-width);
	margin: 0 auto;
	box-sizing: border-box;
}
.dn-tl *,
.dn-tl *::before,
.dn-tl *::after {
	box-sizing: border-box;
}

.dn-tl button {
	font-family: inherit;
	cursor: pointer;
	background: none;
	border: 0;
	color: inherit;
}

.dn-tl ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Screen-reader-only utility */
.dn-tl-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── Top header banner ───────────────────────────────────────────── */
.dn-tl__header {
	background:
		radial-gradient(120% 180% at 100% 0%, rgba(123,177,0,.18) 0%, rgba(123,177,0,0) 55%),
		linear-gradient(125deg, #0f3a22 0%, var(--dn-tl-green-800) 100%);
	border-radius: var(--dn-tl-radius-xl);
	padding: 26px 32px;
	margin-bottom: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	box-shadow: var(--dn-tl-shadow-md);
	color: #fff;
}
.dn-tl__header h2 {
	font-family: var(--dn-tl-font-heading);
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	margin: 0;
	letter-spacing: -0.4px;
	line-height: 1.18;
}
.dn-tl__header p {
	font-family: var(--dn-tl-font-body);
	font-size: 15px;
	color: rgba(255,255,255,.82);
	margin: 6px 0 0;
	font-weight: 400;
}
.dn-tl__pill {
	background: var(--dn-tl-orange-600);
	color: #fff;
	font-family: var(--dn-tl-font-body);
	font-size: 12.5px;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 999px;
	letter-spacing: .4px;
	text-transform: uppercase;
	box-shadow: 0 8px 22px rgba(215,123,26,.32);
	white-space: nowrap;
}

/* ── Filter bar ──────────────────────────────────────────────────── */
.dn-tl__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
}
.dn-tl__filter {
	font-family: var(--dn-tl-font-body);
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--dn-tl-border);
	background: var(--dn-tl-surface);
	color: var(--dn-tl-text-soft);
	transition: all var(--dn-tl-transition);
}
.dn-tl__filter:hover {
	box-shadow: var(--dn-tl-shadow-sm);
	transform: translateY(-1px);
	border-color: var(--dn-tl-green-200);
	color: var(--dn-tl-green-800);
}
.dn-tl__filter:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px rgba(16,119,1,.25);
}
.dn-tl__filter[aria-pressed="true"] {
	border-color: transparent;
	color: #fff;
	background: var(--dn-tl-green-700);
	box-shadow: var(--dn-tl-shadow-sm);
}
.dn-tl__filter[aria-pressed="true"][data-cat]:not([data-cat="all"]) {
	background: var(--dn-tl-cat-color, var(--dn-tl-green-700));
}

/* Per-category filter background when active (brand-tinted variants) */
.dn-tl__filter[data-cat="dairy"][aria-pressed="true"]      { background: var(--dn-tl-green-800); }
.dn-tl__filter[data-cat="wheat"][aria-pressed="true"]      { background: var(--dn-tl-green-700); }
.dn-tl__filter[data-cat="compost"][aria-pressed="true"]    { background: #8a6a1a; }
.dn-tl__filter[data-cat="energy"][aria-pressed="true"]     { background: var(--dn-tl-orange-600); }
.dn-tl__filter[data-cat="milkval"][aria-pressed="true"]    { background: #1a5a7a; }
.dn-tl__filter[data-cat="greenhouse"][aria-pressed="true"] { background: var(--dn-tl-green-500); color: #fff; }
.dn-tl__filter[data-cat="all"][aria-pressed="true"]        { background: var(--dn-tl-green-800); }

/* ── Project section (expandable) ────────────────────────────────── */
.dn-tl__project {
	margin-bottom: 16px;
	border: 1px solid var(--dn-tl-border);
	border-radius: var(--dn-tl-radius-lg);
	background: var(--dn-tl-surface);
	box-shadow: var(--dn-tl-shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--dn-tl-transition);
}
.dn-tl__project:hover { box-shadow: var(--dn-tl-shadow-md); }
.dn-tl__project[hidden] { display: none !important; }

.dn-tl__project-hdr {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	background: #fff;
	text-align: left;
	transition: background var(--dn-tl-transition);
}
button.dn-tl__project-hdr { cursor: pointer; }
div.dn-tl__project-hdr   { cursor: default; }
.dn-tl__project-hdr:hover { background: var(--dn-tl-green-50); }
button.dn-tl__project-hdr:focus-visible {
	outline: 0;
	box-shadow: inset 0 0 0 3px rgba(16,119,1,.22);
}

.dn-tl__cat-bar {
	width: 5px;
	height: 48px;
	border-radius: 999px;
	background: var(--dn-tl-cat-color);
	flex-shrink: 0;
}

.dn-tl__project-titlewrap {
	flex: 1;
	min-width: 220px;
}
.dn-tl__project-title {
	font-family: var(--dn-tl-font-heading);
	font-size: 19px;
	font-weight: 700;
	color: var(--dn-tl-green-800);
	letter-spacing: -0.2px;
	line-height: 1.25;
}
.dn-tl__project-sub {
	font-family: var(--dn-tl-font-body);
	font-size: 14px;
	color: var(--dn-tl-text-soft);
	display: block;
	margin-top: 4px;
	font-weight: 400;
}

.dn-tl__project-meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-left: auto;
}
.dn-tl__tag {
	font-family: var(--dn-tl-font-body);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 999px;
	white-space: nowrap;
	background: var(--dn-tl-green-200);
	color: var(--dn-tl-green-800);
	letter-spacing: .2px;
}
/* Optional semantic tag types — driven by data-type on tag element */
.dn-tl__tag[data-type="period"]     { background: var(--dn-tl-green-200);  color: var(--dn-tl-green-800); }
.dn-tl__tag[data-type="capacity"]   { background: var(--dn-tl-gold-100);   color: #6b4f00; }
.dn-tl__tag[data-type="investment"] { background: var(--dn-tl-orange-100); color: var(--dn-tl-orange-700); }
.dn-tl__tag[data-type="saving"]     { background: var(--dn-tl-green-100);  color: var(--dn-tl-green-700); }
.dn-tl__tag[data-type="revenue"]    { background: var(--dn-tl-green-100);  color: var(--dn-tl-green-700); }
.dn-tl__tag[data-type="status"]     { background: #fff5d6;                 color: #7a5a00; }

.dn-tl__toggle-icon {
	font-size: 14px;
	color: var(--dn-tl-green-700);
	flex-shrink: 0;
	transition: transform var(--dn-tl-transition);
}
.dn-tl__project-hdr[aria-expanded="true"] .dn-tl__toggle-icon { transform: rotate(180deg); }

/* Project body */
.dn-tl__project-body {
	border-top: 1px solid var(--dn-tl-border-soft);
}
.dn-tl__project-body[hidden] { display: none; }

/* ── Linked content card (Company / Project) ─────────────────────── */
.dn-tl__linked {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 18px 24px;
	min-height: 160px;
	border-radius: var(--dn-tl-radius-md);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: var(--dn-tl-surface);
	border: 1px solid var(--dn-tl-border);
	box-shadow: 0 4px 14px rgba(28,83,50,.06);
	transition:
		transform var(--dn-tl-transition),
		box-shadow var(--dn-tl-transition),
		border-color var(--dn-tl-transition);
}
.dn-tl__linked:hover,
.dn-tl__linked:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--dn-tl-shadow-md);
	border-color: var(--dn-tl-green-200);
	outline: 0;
}
.dn-tl__linked:focus-visible {
	box-shadow: var(--dn-tl-shadow-md), 0 0 0 3px rgba(16,119,1,.22);
}

.dn-tl__linked-media {
	flex: 0 0 auto;
	width: 38%;
	max-width: 280px;
	align-self: stretch;
	position: relative;
	background: var(--dn-tl-green-50);
	overflow: hidden;
}
.dn-tl__linked-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(28,83,50,0) 70%, rgba(28,83,50,.10) 100%);
	pointer-events: none;
	z-index: 1;
}
.dn-tl__linked-img {
	/*
	 * !important is required here to defeat common host-theme rules like
	 *   img { height: auto !important; max-width: 100% !important; }
	 * which would otherwise force the image back to its natural aspect ratio
	 * and leave a gap below wide images.
	 */
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center;
	display: block;
	transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.dn-tl__linked:hover .dn-tl__linked-img {
	transform: scale(1.04);
}

.dn-tl__linked-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 18px 22px;
	min-width: 0;
}
.dn-tl__linked-eyebrow {
	font-family: var(--dn-tl-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .9px;
	text-transform: uppercase;
	color: var(--dn-tl-orange-600);
}
.dn-tl__linked--company .dn-tl__linked-eyebrow { color: var(--dn-tl-green-700); }
.dn-tl__linked-title {
	font-family: var(--dn-tl-font-heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--dn-tl-green-800);
	letter-spacing: -0.2px;
	line-height: 1.3;
	overflow-wrap: break-word;
}
.dn-tl__linked-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	font-family: var(--dn-tl-font-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--dn-tl-orange-600);
	letter-spacing: .2px;
}
.dn-tl__linked--company .dn-tl__linked-cta { color: var(--dn-tl-green-700); }
.dn-tl__linked-cta-arrow {
	display: inline-block;
	transition: transform var(--dn-tl-transition);
}
.dn-tl__linked:hover .dn-tl__linked-cta-arrow,
.dn-tl__linked:focus-visible .dn-tl__linked-cta-arrow {
	transform: translateX(3px);
}

/* Text-only variant (no cover image): slim callout */
.dn-tl__linked--text {
	min-height: 0;
	background: linear-gradient(90deg, var(--dn-tl-green-50) 0%, #fff 60%);
}
.dn-tl__linked--text .dn-tl__linked-body {
	padding: 14px 20px;
}
.dn-tl__linked--text .dn-tl__linked-title { font-size: 16px; }

.dn-tl__capex {
	padding: 14px 24px;
	background: var(--dn-tl-surface-soft);
	font-family: var(--dn-tl-font-body);
	font-size: 13.5px;
	color: var(--dn-tl-text-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	border-bottom: 1px solid var(--dn-tl-border-soft);
}
.dn-tl__capex strong {
	color: var(--dn-tl-green-800);
	font-weight: 700;
}

/* ── Phases list ─────────────────────────────────────────────────── */
.dn-tl__phases {
	padding: 22px 24px;
}
.dn-tl__phase {
	display: flex;
	gap: 0;
	margin-bottom: 14px;
	position: relative;
}
.dn-tl__phase:last-child { margin-bottom: 2px; }
.dn-tl__phase-period {
	width: 140px;
	flex-shrink: 0;
	padding: 8px 18px 8px 0;
	font-family: var(--dn-tl-font-body);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: var(--dn-tl-green-700);
	text-align: right;
	border-right: 2px solid var(--dn-tl-green-200);
	position: relative;
}
.dn-tl__phase-period::after {
	content: '';
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--dn-tl-green-700);
	border: 2px solid #fff;
	position: absolute;
	right: -12px;
	top: 11px;
	box-shadow: 0 0 0 2px var(--dn-tl-green-200);
}
/* Phase status modifiers — drive period text + dot accent.
   .dn-tl__phase--finalized   → brand green (default, no override needed)
   .dn-tl__phase--in_progress → brand orange (legacy "milestone")
   .dn-tl__phase--future_work → anthracite / neutral
   .dn-tl__phase--custom      → editor-defined color via --dn-tl-phase-color
*/
.dn-tl__phase--in_progress .dn-tl__phase-period,
.dn-tl__phase--milestone   .dn-tl__phase-period {
	color: var(--dn-tl-orange-600);
}
.dn-tl__phase--in_progress .dn-tl__phase-period::after,
.dn-tl__phase--milestone   .dn-tl__phase-period::after {
	background: var(--dn-tl-orange-600);
	box-shadow: 0 0 0 2px rgba(215,123,26,.22);
	width: 22px;
	height: 22px;
	right: -12px;
}
.dn-tl__phase--future_work .dn-tl__phase-period {
	color: var(--dn-tl-gray-700);
}
.dn-tl__phase--future_work .dn-tl__phase-period::after {
	background: var(--dn-tl-gray-700);
	box-shadow: 0 0 0 2px var(--dn-tl-gray-200);
	width: 22px;
	height: 22px;
	right: -12px;
}
.dn-tl__phase--custom .dn-tl__phase-period {
	color: var(--dn-tl-phase-color, var(--dn-tl-green-700));
}
.dn-tl__phase--custom .dn-tl__phase-period::after {
	background: var(--dn-tl-phase-color, var(--dn-tl-green-700));
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--dn-tl-phase-color, var(--dn-tl-green-700)) 25%, transparent);
	width: 22px;
	height: 22px;
	right: -12px;
}
.dn-tl__phase-content {
	flex: 1;
	padding: 2px 0 4px 26px;
}
.dn-tl__phase-name {
	font-family: var(--dn-tl-font-heading);
	font-size: 17px;
	font-weight: 700;
	color: var(--dn-tl-text);
	letter-spacing: -0.15px;
	line-height: 1.3;
}
.dn-tl__steps {
	margin-top: 6px;
}
.dn-tl__steps li {
	font-family: var(--dn-tl-font-body);
	font-size: 14.5px;
	color: var(--dn-tl-text-soft);
	padding: 3px 0 3px 18px;
	position: relative;
	line-height: 1.6;
}
.dn-tl__steps li::before {
	content: '›';
	position: absolute;
	left: 0px;
	top: 0px;
	color: var(--dn-tl-orange-600);
	font-weight: 700;
	font-size: 17px;
}
.dn-tl__steps li b,
.dn-tl__steps li strong {
	color: var(--dn-tl-green-800);
	font-weight: 700;
}
.dn-tl__steps li em,
.dn-tl__steps li i {
	color: var(--dn-tl-text);
	font-style: italic;
}

/* Outcomes chips */
.dn-tl__outcomes {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 16px 24px 20px;
	border-top: 1px solid var(--dn-tl-border-soft);
	background: var(--dn-tl-green-50);
}
.dn-tl__outcome {
	font-family: var(--dn-tl-font-body);
	font-size: 13px;
	padding: 6px 13px;
	border-radius: 999px;
	font-weight: 600;
	background: var(--dn-tl-green-200);
	color: var(--dn-tl-green-800);
}

/* ── Yearly view ─────────────────────────────────────────────────── */
.dn-tl__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 22px;
	margin-bottom: 22px;
	background: #fff;
	border: 1px solid var(--dn-tl-border);
	border-radius: var(--dn-tl-radius-md);
	padding: 14px 18px;
}
.dn-tl__legend-item {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--dn-tl-font-body);
	font-size: 13px;
	color: var(--dn-tl-text-soft);
	font-weight: 600;
}
.dn-tl__legend-dot {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 0 0 2px rgba(0,0,0,.04);
}

.dn-tl__year {
	margin-bottom: 18px;
	border-radius: var(--dn-tl-radius-lg);
	border: 1px solid var(--dn-tl-border);
	background: var(--dn-tl-surface);
	box-shadow: var(--dn-tl-shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--dn-tl-transition);
}
.dn-tl__year:hover { box-shadow: var(--dn-tl-shadow-md); }

.dn-tl__year-hdr {
	padding: 18px 22px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--dn-tl-border-soft);
	background: linear-gradient(90deg, #fff 0%, var(--dn-tl-green-50) 100%);
}
.dn-tl__year-badge {
	font-family: var(--dn-tl-font-heading);
	font-size: 24px;
	font-weight: 800;
	color: #fff;
	background: var(--dn-tl-green-800);
	padding: 6px 16px;
	border-radius: var(--dn-tl-radius-md);
	letter-spacing: -0.3px;
	box-shadow: 0 4px 12px rgba(28,83,50,.18);
}
.dn-tl__year--final .dn-tl__year-badge {
	background: var(--dn-tl-orange-600);
	color: #fff;
	box-shadow: 0 4px 12px rgba(215,123,26,.28);
}
.dn-tl__year-theme {
	font-family: var(--dn-tl-font-heading);
	font-size: 16px;
	font-weight: 600;
	color: var(--dn-tl-orange-600);
	letter-spacing: -0.1px;
}
.dn-tl__year-capex {
	font-family: var(--dn-tl-font-body);
	font-size: 13px;
	color: var(--dn-tl-text-soft);
	margin-left: auto;
	font-weight: 500;
}

.dn-tl__year-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
	padding: 16px;
	background: var(--dn-tl-surface-soft);
}

.dn-tl__year-card {
	background: var(--dn-tl-surface);
	border: 1px solid var(--dn-tl-border);
	border-radius: var(--dn-tl-radius-md);
	padding: 18px 20px;
	box-shadow: 0 4px 14px rgba(28,83,50,.04);
	border-top: 5px solid var(--dn-tl-cat-color);
	transition: box-shadow var(--dn-tl-transition), transform var(--dn-tl-transition);
}
.dn-tl__year-card:hover {
	box-shadow: var(--dn-tl-shadow-md);
	transform: translateY(-2px);
}
.dn-tl__year-card-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.dn-tl__year-card-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--dn-tl-cat-color);
}
.dn-tl__year-card-title {
	font-family: var(--dn-tl-font-heading);
	font-size: 16px;
	font-weight: 700;
	color: var(--dn-tl-green-800);
	letter-spacing: -0.15px;
	line-height: 1.3;
}
.dn-tl__year-card-tag {
	display: inline-block;
	font-family: var(--dn-tl-font-body);
	font-size: 11px;
	font-weight: 700;
	padding: 5px 11px;
	border-radius: 999px;
	margin-top: 12px;
	background: var(--dn-tl-cat-light-bg);
	color: var(--dn-tl-cat-light-fg);
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* ── Unified tabs ────────────────────────────────────────────────── */
.dn-tl__tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 22px;
	background: #fff;
	border: 1px solid var(--dn-tl-border);
	border-radius: 999px;
	padding: 6px;
	box-shadow: var(--dn-tl-shadow-sm);
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
}
.dn-tl__tab {
	font-family: var(--dn-tl-font-body);
	font-size: 13.5px;
	font-weight: 700;
	padding: 9px 18px;
	border-radius: 999px;
	color: var(--dn-tl-text-soft);
	transition: all var(--dn-tl-transition);
	white-space: nowrap;
	letter-spacing: .2px;
}
.dn-tl__tab:hover { color: var(--dn-tl-green-800); }
.dn-tl__tab:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px rgba(16,119,1,.22);
}
.dn-tl__tab[aria-selected="true"] {
	background: var(--dn-tl-green-700);
	color: #fff;
	box-shadow: 0 4px 12px rgba(16,119,1,.22);
}

.dn-tl__tabpanel[hidden] { display: none !important; }

.dn-tl__tabs-wrap.is-sticky {
	position: sticky;
	top: 0;
	z-index: 30;
	padding: 14px 0;
	background: rgba(243,248,230,.92);
	backdrop-filter: blur(6px);
	margin: 0 -24px 12px;
	padding-left: 24px;
	padding-right: 24px;
	border-bottom: 1px solid var(--dn-tl-border-soft);
}

/* Optional sticky filter bar (projects view) and legend bar (yearly view).
   Pinned under the page top while the section is in view; same translucent
   chrome as the unified-tab switcher so the visual language stays consistent. */
.dn-tl__filters.is-sticky,
.dn-tl__legend.is-sticky {
	position: sticky;
	top: 0;
	z-index: 25;
	background: rgba(243,248,230,.94);
	backdrop-filter: blur(6px);
	margin: 0 -24px 18px;
	padding: 12px 24px;
	border-bottom: 1px solid var(--dn-tl-border-soft);
	border-radius: 0;
}
.dn-tl__legend.is-sticky {
	border: 0;
	border-bottom: 1px solid var(--dn-tl-border-soft);
}

/* When BOTH the unified tabs and the inner filters/legend are sticky, push
   the inner bar below the tab bar so they don't overlap. The tab bar is
   ~58px tall in default Elementor styling; using a CSS variable keeps it
   themable without touching JS. */
.dn-tl--unified .dn-tl__tabs-wrap.is-sticky ~ .dn-tl__tabpanel .dn-tl__filters.is-sticky,
.dn-tl--unified .dn-tl__tabs-wrap.is-sticky ~ .dn-tl__tabpanel .dn-tl__legend.is-sticky {
	top: var(--dn-tl-sticky-tabs-offset, 58px);
}

/* ── Single project widget standalone ───────────────────────────── */
.dn-tl--single .dn-tl__project { margin-bottom: 0; }
.dn-tl--single .dn-tl__project-hdr {
	cursor: default;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.dn-tl__empty {
	padding: 44px 22px;
	text-align: center;
	font-family: var(--dn-tl-font-body);
	color: var(--dn-tl-text-soft);
	background: var(--dn-tl-surface);
	border: 1px dashed var(--dn-tl-border);
	border-radius: var(--dn-tl-radius-md);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.dn-tl { padding: 0 20px; }
	.dn-tl__header { padding: 22px 24px; }
	.dn-tl__header h2 { font-size: 24px; }
}

@media (max-width: 768px) {
	.dn-tl { padding: 0px; font-size: 14.5px; }
	.dn-tl__header h2 { font-size: 20px; }
	.dn-tl__header p  { font-size: 13.5px; }
	.dn-tl__filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
	.dn-tl__filter { flex-shrink: 0; }
	.dn-tl__phase { flex-direction: column; }
	/* Stacked phase layout: text needs ~26px of left room so the bullet
	   (22px wide, anchored at left:-6px) doesn't bleed onto the first
	   character of the period label. */
	.dn-tl__phase-period {
		width: 100%;
		text-align: left;
		border-right: 0;
		border-left: 2px solid var(--dn-tl-green-200);
		padding: 4px 0 4px 26px;
		margin-bottom: 6px;
	}
	.dn-tl__phase-period::after,
	.dn-tl__phase--milestone   .dn-tl__phase-period::after,
	.dn-tl__phase--in_progress .dn-tl__phase-period::after,
	.dn-tl__phase--future_work .dn-tl__phase-period::after,
	.dn-tl__phase--custom      .dn-tl__phase-period::after { left: -12px; right: auto; top: 5px; }
	.dn-tl__phase-content { padding: 4px 0px; }
	.dn-tl__year-capex { margin-left: 0; flex-basis: 100%; }
	.dn-tl__year-grid  { grid-template-columns: 1fr; }

	/* Mobile project header: drop the cat-bar (the colored category rail is
	   only meaningful when the header has horizontal real estate to spare),
	   stack title above meta, and tuck the expand chevron flush right at
	   the end of the meta row. Grid is used only on mobile; the desktop
	   flex layout is preserved verbatim. */
	.dn-tl__project-hdr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"title  title"
			"meta   toggle";
		column-gap: 12px;
		row-gap: 8px;
		align-items: center;
	}
	/* When there are no meta-tag pills, fold the chevron back up next to
	   the title so we don't render an empty row just for the toggle. */
	.dn-tl__project-hdr:not(:has(.dn-tl__project-meta)) {
		grid-template-areas: "title toggle";
	}
	.dn-tl__cat-bar           { display: none; }
	.dn-tl__project-titlewrap { grid-area: title;  min-width: 0; }
	.dn-tl__toggle-icon       { grid-area: toggle; align-self: center; justify-self: end; }
	.dn-tl__project-meta      { grid-area: meta;   margin-left: 0; max-width: 100%; }
	.dn-tl__project-meta .dn-tl__tag { max-width: 100%; }

	.dn-tl__linked { flex-direction: column; margin: 16px 18px; min-height: 0; }
	.dn-tl__linked-media {
		width: 100%;
		max-width: none;
		aspect-ratio: 16 / 9;
	}
	.dn-tl__linked-media::after {
		background: linear-gradient(180deg, rgba(28,83,50,0) 70%, rgba(28,83,50,.12) 100%);
	}
	.dn-tl__linked-body { padding: 16px 18px; }
}

@media (max-width: 480px) {
	.dn-tl__project-hdr { padding: 16px 18px; gap: 12px; }
	/* Bar height intentionally fluid here: the 768px grid layout stretches
	   the bar across both header rows; locking a fixed height re-shrinks it. */
	.dn-tl__cat-bar     { min-height: 36px; }
	.dn-tl__project-title { font-size: 17px; }
	.dn-tl__capex   { padding: 12px 18px; font-size: 13px; }
	.dn-tl__phases  { padding: 16px 18px; }
	.dn-tl__outcomes { padding: 14px 18px 16px; }
	.dn-tl__filter   { padding: 8px 13px; font-size: 13px; }
	.dn-tl__pill     { font-size: 11.5px; padding: 6px 13px; }
	.dn-tl__year-badge { font-size: 21px; }
	.dn-tl__linked   { margin: 14px 14px 0; }
	.dn-tl__linked-title { font-size: 16px; }
}

/* -- phase status 
-------------------------------------------------- */
.dn-tl__phase-status--completed {
	color: var(--dn-tl-green-700);
}
.dn-tl__phase-status--in_progress {
	color: var(--dn-tl-orange-600);
}
.dn-tl__phase-status--future_work {
	color: var(--dn-tl-gray-700);
}

.dn-tl__phase-status {
	font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  margin-left: 20px;
}