/**
 * Editorial Visuals — Phase 29 components + Phase 30 screenshots.
 * Token-only styles. Mobile-first.
 */

/* ==========================================================================
   Shared shell
   ========================================================================== */

.vdm-ev {
	margin-block: var(--vdm-space-8);
	padding: var(--vdm-card-padding);
	background: var(--vdm-color-surface);
	border: 1px solid var(--vdm-color-border);
	border-radius: var(--vdm-radius);
	box-shadow: var(--vdm-shadow-sm);
}

.vdm-ev + .vdm-ev {
	margin-block-start: var(--vdm-space-6);
}

.vdm-ev__title {
	font-family: var(--vdm-font-heading);
	font-weight: 700;
	font-size: var(--vdm-text-h3, 1.25rem);
	line-height: var(--vdm-line-height-heading, 1.3);
	color: var(--vdm-color-primary);
	margin: 0 0 var(--vdm-space-6);
}

.vdm-ev__disclaimer {
	margin: var(--vdm-space-4) 0 0;
	font-size: var(--vdm-text-sm, 0.875rem);
	line-height: var(--vdm-line-height-caption);
	color: var(--vdm-color-text-secondary);
}

.vdm-cx-editorial-visuals {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.vdm-cx-media {
	margin-block: var(--vdm-space-6);
}

.vdm-cx-media .vdm-editorial-screenshot {
	margin-block-start: 0;
}

/* ==========================================================================
   a) Cost breakdown
   ========================================================================== */

.vdm-ev-cb__list {
	display: flex;
	flex-direction: column;
	gap: var(--vdm-space-4);
}

.vdm-ev-cb__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--vdm-space-4);
	margin-bottom: var(--vdm-space-2);
}

.vdm-ev-cb__label {
	font-weight: 600;
	color: var(--vdm-color-text-primary);
	font-size: var(--vdm-text-body, 1rem);
}

.vdm-ev-cb__value {
	font-size: var(--vdm-text-sm, 0.875rem);
	color: var(--vdm-color-text-secondary);
	white-space: nowrap;
}

.vdm-ev-cb__pct {
	color: var(--vdm-color-text-secondary);
}

.vdm-ev-cb__track {
	height: var(--vdm-space-2);
	background: var(--vdm-color-primary-subtle);
	border-radius: var(--vdm-radius-full);
	overflow: hidden;
}

.vdm-ev-cb__fill {
	height: 100%;
	background: var(--vdm-color-primary);
	border-radius: var(--vdm-radius-full);
	transition: width var(--vdm-duration-base) var(--vdm-ease-default);
}

.vdm-ev-cb__total {
	margin: var(--vdm-space-6) 0 0;
	font-size: var(--vdm-text-body, 1rem);
	color: var(--vdm-color-text-primary);
}

/* ==========================================================================
   b) Material table
   ========================================================================== */

.vdm-ev-mt__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.vdm-ev-mt__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--vdm-text-sm, 0.875rem);
	min-width: 36rem;
}

.vdm-ev-mt__table caption {
	caption-side: top;
	text-align: left;
	font-family: var(--vdm-font-heading);
	font-weight: 700;
	font-size: var(--vdm-text-h3, 1.25rem);
	color: var(--vdm-color-primary);
	margin-bottom: var(--vdm-space-4);
}

.vdm-ev-mt__table th,
.vdm-ev-mt__table td {
	padding: var(--vdm-space-3) var(--vdm-space-4);
	border-bottom: 1px solid var(--vdm-color-border);
	text-align: left;
	vertical-align: top;
}

.vdm-ev-mt__table th {
	font-weight: 600;
	color: var(--vdm-color-primary);
	background: var(--vdm-color-background);
}

.vdm-ev-mt__row--recommended {
	background: var(--vdm-color-primary-subtle);
}

.vdm-ev-mt__cost {
	font-weight: 600;
	white-space: nowrap;
}

.vdm-ev-mt__badge {
	display: inline-block;
	padding: var(--vdm-space-1) var(--vdm-space-3);
	background: var(--vdm-color-primary);
	color: var(--vdm-color-on-primary);
	border-radius: var(--vdm-radius-full);
	font-size: var(--vdm-text-xs, 0.75rem);
	font-weight: 600;
}

/* ==========================================================================
   c) Timeline
   ========================================================================== */

.vdm-ev-tl__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.vdm-ev-tl__item {
	display: grid;
	grid-template-columns: var(--vdm-space-8) 1fr;
	gap: var(--vdm-space-4);
	position: relative;
	padding-bottom: var(--vdm-space-6);
}

.vdm-ev-tl__item:not(.vdm-ev-tl__item--last)::before {
	content: '';
	position: absolute;
	left: calc(var(--vdm-space-8) / 2 - 1px);
	top: var(--vdm-space-8);
	bottom: 0;
	width: 2px;
	background: var(--vdm-color-border);
}

.vdm-ev-tl__node {
	width: var(--vdm-space-8);
	height: var(--vdm-space-8);
	border-radius: var(--vdm-radius-full);
	background: var(--vdm-color-primary);
	color: var(--vdm-color-on-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.vdm-ev-tl__num {
	font-weight: 700;
	font-size: var(--vdm-text-sm, 0.875rem);
}

.vdm-ev-tl__content {
	display: flex;
	flex-direction: column;
	gap: var(--vdm-space-1);
	padding-top: var(--vdm-space-1);
}

.vdm-ev-tl__stage {
	font-family: var(--vdm-font-heading);
	color: var(--vdm-color-primary);
	font-size: var(--vdm-text-body, 1rem);
}

.vdm-ev-tl__dur {
	font-size: var(--vdm-text-sm, 0.875rem);
	font-weight: 600;
	color: var(--vdm-color-secondary);
}

.vdm-ev-tl__del {
	font-size: var(--vdm-text-sm, 0.875rem);
	color: var(--vdm-color-text-secondary);
}

@media (min-width: 768px) {
	.vdm-ev-tl__list {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: var(--vdm-space-2);
		overflow-x: auto;
		padding-bottom: var(--vdm-space-4);
	}

	.vdm-ev-tl__item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		min-width: 8.5rem;
		flex: 1 1 0;
		padding-bottom: 0;
		grid-template-columns: none;
		gap: var(--vdm-space-3);
	}

	.vdm-ev-tl__item:not(.vdm-ev-tl__item--last)::before {
		left: var(--vdm-space-8);
		right: 0;
		top: calc(var(--vdm-space-8) / 2 - 1px);
		bottom: auto;
		width: auto;
		height: 2px;
	}
}

/* ==========================================================================
   d) Package cards
   ========================================================================== */

.vdm-ev-pc__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vdm-space-4);
}

@media (min-width: 768px) {
	.vdm-ev-pc__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.vdm-ev-pc__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.vdm-ev-pc__card {
	position: relative;
	padding: var(--vdm-space-6);
	background: var(--vdm-color-background);
	border: 1px solid var(--vdm-color-border);
	border-radius: var(--vdm-radius);
	display: flex;
	flex-direction: column;
	gap: var(--vdm-space-3);
	min-height: 100%;
}

.vdm-ev-pc__card--recommended {
	border-color: var(--vdm-color-primary);
	box-shadow: var(--vdm-shadow-md);
	background: var(--vdm-color-surface);
}

.vdm-ev-pc__badge {
	position: absolute;
	top: var(--vdm-space-3);
	right: var(--vdm-space-3);
	padding: var(--vdm-space-1) var(--vdm-space-3);
	background: var(--vdm-color-secondary);
	color: var(--vdm-color-on-secondary);
	border-radius: var(--vdm-radius-full);
	font-size: var(--vdm-text-xs, 0.75rem);
	font-weight: 600;
}

.vdm-ev-pc__name {
	font-family: var(--vdm-font-heading);
	font-weight: 700;
	font-size: var(--vdm-text-h4, 1.125rem);
	color: var(--vdm-color-primary);
	margin: 0;
}

.vdm-ev-pc__cost {
	font-size: var(--vdm-text-h3, 1.25rem);
	font-weight: 700;
	color: var(--vdm-color-text-primary);
	margin: 0;
}

.vdm-ev-pc__unit {
	font-size: var(--vdm-text-sm, 0.875rem);
	font-weight: 500;
	color: var(--vdm-color-text-secondary);
}

.vdm-ev-pc__list {
	margin: 0;
	padding: 0 0 0 var(--vdm-space-4);
	flex: 1;
	font-size: var(--vdm-text-sm, 0.875rem);
	color: var(--vdm-color-text-secondary);
}

.vdm-ev-pc__list li {
	margin-bottom: var(--vdm-space-2);
}

.vdm-ev-pc__cta {
	margin-top: auto;
	min-height: 44px;
}

/* ==========================================================================
   e) Calculator preview
   ========================================================================== */

.vdm-ev-cp {
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

.vdm-ev-cp__inner {
	padding: var(--vdm-space-8);
	background: var(--vdm-color-primary);
	color: var(--vdm-color-on-primary);
	border-radius: var(--vdm-radius);
	box-shadow: var(--vdm-shadow-md);
}

.vdm-ev-cp__inner .vdm-ev__title {
	color: var(--vdm-color-on-primary);
}

.vdm-ev-cp__inner .vdm-ev__disclaimer {
	color: var(--vdm-color-on-primary-muted);
}

.vdm-ev-cp__icon {
	width: var(--vdm-space-12);
	height: var(--vdm-space-12);
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--vdm-radius);
	margin-bottom: var(--vdm-space-4);
	color: var(--vdm-color-on-primary);
}

.vdm-ev-cp__label {
	margin: 0 0 var(--vdm-space-4);
	font-size: var(--vdm-text-sm, 0.875rem);
	font-weight: 600;
	letter-spacing: var(--vdm-letter-spacing-wide);
	text-transform: uppercase;
	color: var(--vdm-color-on-primary-muted);
}

.vdm-ev-cp__dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--vdm-space-2) var(--vdm-space-4);
	margin: 0 0 var(--vdm-space-6);
	font-size: var(--vdm-text-body, 1rem);
}

.vdm-ev-cp__dl dt {
	color: var(--vdm-color-on-primary-muted);
	font-weight: 500;
}

.vdm-ev-cp__dl dd {
	margin: 0;
	font-weight: 600;
	color: var(--vdm-color-on-primary);
}

.vdm-ev-cp__range {
	font-size: var(--vdm-text-h3, 1.25rem);
	font-weight: 800;
	color: var(--vdm-color-on-primary);
}

.vdm-ev-cp__cta {
	min-height: 44px;
	background: var(--vdm-color-secondary) !important;
	border-color: var(--vdm-color-secondary) !important;
	color: var(--vdm-color-on-secondary) !important;
}

.vdm-ev-cp__cta:hover,
.vdm-ev-cp__cta:focus-visible {
	filter: brightness(1.05);
}

/* ==========================================================================
   f) Cost bar
   ========================================================================== */

.vdm-ev-bar__track {
	display: flex;
	height: var(--vdm-space-8);
	border-radius: var(--vdm-radius);
	overflow: hidden;
	background: var(--vdm-color-primary-subtle);
}

.vdm-ev-bar__seg {
	height: 100%;
	min-width: 2px;
}

.vdm-ev-bar__seg--1,
.vdm-ev-bar__leg-dot.vdm-ev-bar__seg--1 { background: var(--vdm-color-primary); }
.vdm-ev-bar__seg--2,
.vdm-ev-bar__leg-dot.vdm-ev-bar__seg--2 { background: var(--vdm-color-link-hover); }
.vdm-ev-bar__seg--3,
.vdm-ev-bar__leg-dot.vdm-ev-bar__seg--3 { background: var(--vdm-color-secondary); }
.vdm-ev-bar__seg--4,
.vdm-ev-bar__leg-dot.vdm-ev-bar__seg--4 { background: var(--vdm-color-success); }
.vdm-ev-bar__seg--5,
.vdm-ev-bar__leg-dot.vdm-ev-bar__seg--5 { background: var(--vdm-color-warning); }

.vdm-ev-bar__legend {
	list-style: none;
	margin: var(--vdm-space-4) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vdm-space-3);
}

@media (min-width: 768px) {
	.vdm-ev-bar__legend {
		grid-template-columns: repeat(2, 1fr);
	}
}

.vdm-ev-bar__leg-item {
	display: flex;
	align-items: center;
	gap: var(--vdm-space-3);
	font-size: var(--vdm-text-sm, 0.875rem);
}

.vdm-ev-bar__leg-dot {
	width: var(--vdm-space-3);
	height: var(--vdm-space-3);
	border-radius: var(--vdm-radius-full);
	flex-shrink: 0;
}

.vdm-ev-bar__leg-label {
	flex: 1;
	color: var(--vdm-color-text-primary);
	font-weight: 500;
}

.vdm-ev-bar__leg-val {
	color: var(--vdm-color-text-secondary);
	white-space: nowrap;
}

/* ==========================================================================
   g) BOQ block
   ========================================================================== */

.vdm-ev-boq__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.vdm-ev-boq__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--vdm-text-sm, 0.875rem);
	min-width: 36rem;
}

.vdm-ev-boq__table caption {
	caption-side: top;
	text-align: left;
	font-family: var(--vdm-font-heading);
	font-weight: 700;
	font-size: var(--vdm-text-h3, 1.25rem);
	color: var(--vdm-color-primary);
	margin-bottom: var(--vdm-space-4);
}

.vdm-ev-boq__table th,
.vdm-ev-boq__table td {
	padding: var(--vdm-space-3) var(--vdm-space-4);
	border-bottom: 1px solid var(--vdm-color-border);
	text-align: left;
}

.vdm-ev-boq__table th {
	font-weight: 600;
	color: var(--vdm-color-primary);
	background: var(--vdm-color-background);
}

.vdm-ev-boq__item {
	font-weight: 600;
	color: var(--vdm-color-text-primary);
}

.vdm-ev-boq__num,
.vdm-ev-boq__total {
	white-space: nowrap;
}

.vdm-ev-boq__total {
	font-weight: 600;
}

/* ==========================================================================
   h) Decision flow
   ========================================================================== */

.vdm-ev-df__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--vdm-space-4);
}

.vdm-ev-df__node {
	display: flex;
	gap: var(--vdm-space-4);
	align-items: flex-start;
	padding: var(--vdm-space-4);
	border-radius: var(--vdm-radius);
	border: 1px solid var(--vdm-color-border);
	background: var(--vdm-color-background);
}

.vdm-ev-df__node--question {
	background: var(--vdm-color-primary-subtle);
	border-color: transparent;
}

.vdm-ev-df__node--yes {
	border-left: 4px solid var(--vdm-color-success);
}

.vdm-ev-df__node--no {
	border-left: 4px solid var(--vdm-color-warning);
}

.vdm-ev-df__node--action {
	border-left: 4px solid var(--vdm-color-primary);
}

.vdm-ev-df__node--outcome {
	background: var(--vdm-color-surface);
	border-color: var(--vdm-color-primary);
}

.vdm-ev-df__icon {
	flex-shrink: 0;
	width: var(--vdm-space-8);
	height: var(--vdm-space-8);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--vdm-radius-full);
	background: var(--vdm-color-surface);
	color: var(--vdm-color-primary);
	font-weight: 700;
	font-size: var(--vdm-text-sm, 0.875rem);
}

.vdm-ev-df__text {
	font-size: var(--vdm-text-body, 1rem);
	line-height: 1.5;
	color: var(--vdm-color-text-primary);
}

/* ==========================================================================
   Phase 30 screenshots
   ========================================================================== */

.vdm-editorial-screenshot {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--vdm-radius);
	box-shadow: var(--vdm-shadow-md);
	margin-block: var(--vdm-space-6) 0;
	border: 1px solid var(--vdm-color-border);
}

.vdm-editorial-screenshot-caption {
	font-size: 0.875rem;
	color: var(--vdm-color-text-secondary);
	font-family: var(--vdm-font-body);
	margin-block-start: var(--vdm-space-2);
	margin-block-end: var(--vdm-space-6);
	text-align: center;
	font-style: italic;
}

@media (min-width: 768px) {
	.vdm-editorial-screenshot {
		max-width: min(100%, 56.25rem);
		margin-inline: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vdm-ev-cb__fill,
	.vdm-editorial-screenshot {
		transition: none;
	}
}