/* Maxton Vehicle Damage Diagram
 * Colours: keep --mdd-selected in sync with HIGHLIGHT in tools/build-render.py
 * so the emailed image matches what the claimant saw.
 */
.gfield.maxton-damage-diagram {
	--mdd-line: #1d1d1b;
	--mdd-fill: #ffffff;
	--mdd-hover: #d9f2fa;
	--mdd-selected: #7fd3ec;
	--mdd-tip-bg: #111111;
}

.mdd { margin: 0 0 1rem; }

.mdd-help { margin: 0 0 .5rem; font-size: .95em; }

.mdd-canvas {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
}

.mdd-svg {
	display: block;
	width: 100%;
	height: auto;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}

.mdd-svg .mdd-zone * {
	fill: var(--mdd-fill);
	stroke: var(--mdd-line);
	stroke-width: .7;
	stroke-linejoin: round;
	cursor: pointer;
	transition: fill .15s ease;
}
.mdd-svg .mdd-dash { stroke-dasharray: 1 .6; }

.mdd-svg .mdd-label {
	font-family: inherit;
	font-size: 7px;
	letter-spacing: .02em;
	fill: var(--mdd-line);
	pointer-events: none;
}

@media (hover: hover) {
	.mdd-svg .mdd-zone:hover * { fill: var(--mdd-hover); }
}
.mdd-svg .mdd-zone.is-selected * { fill: var(--mdd-selected); }

/* Tooltip (matches the existing black label style) */
.mdd-tip {
	position: absolute;
	z-index: 5;
	transform: translate(14px, -50%);
	padding: .35em .65em;
	border-radius: 4px;
	background: var(--mdd-tip-bg);
	color: #fff;
	font-size: 13px;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.mdd-tip.is-flipped { transform: translate(calc(-100% - 14px), -50%); }
.mdd-tip[hidden] { display: none; }

/* Selected summary */
.mdd-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin-top: .75rem;
	font-size: .95em;
}
.mdd-summary-label { font-weight: 600; margin-right: .25rem; }

.mdd-chip {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .3em .7em;
	border: 1px solid var(--mdd-selected);
	border-radius: 999px;
	background: #eef9fd;
	color: inherit;
	font: inherit;
	font-size: .9em;
	line-height: 1.2;
	cursor: pointer;
}
.mdd-chip::after { content: "\00d7"; font-size: 1.1em; opacity: .7; }
.mdd-chip:hover,
.mdd-chip:focus-visible { background: var(--mdd-selected); }

/* List fallback */
.mdd-list { margin-top: .75rem; }
.mdd-list > summary { cursor: pointer; font-size: .95em; text-decoration: underline; }
.mdd-list[open] > summary { margin-bottom: .5rem; }
.mdd-list .gfield_checkbox {
	display: block !important;
	columns: 2 15rem;
	column-gap: 1.5rem;
}
.mdd-list .gchoice { break-inside: avoid; margin-bottom: .25rem; }