/*
 * Survey (Umfrage) – rebrush-2024
 * Ergänzungen zu den Kesselblech-Komponenten survey, radio-group, checkbox-group,
 * form-group, phase-timeline und announcement.
 */

/* ---------- Hinweise ---------- */

.survey__announcement {
	margin-bottom: var(--bw-space-600);
}

/* Antwort-/Danke-Texte sind oft mehrzeilig: volle Breite statt inline-block-Badge */
.survey__hint[role="status"] {
	display: block;
	margin-top: var(--bw-space-400);
}

.survey__hint[role="status"] p:last-child {
	margin-bottom: 0;
}

/* ---------- Fragen ---------- */

.survey__question .headline .label__required {
	text-decoration: none;
	color: var(--bw-foreground-warning);
	margin-left: var(--bw-space-100);
}

.survey__question-error {
	margin-top: var(--bw-space-300);
}

.survey__question--invalid .select,
.survey__question--invalid .input {
	border-color: var(--bw-border-warning);
}

.survey__free-choice .free_choice_input {
	margin-top: var(--bw-space-200);
	margin-left: calc(var(--bw-space-600) + var(--bw-space-200));
	width: calc(100% - var(--bw-space-600) - var(--bw-space-200));
}

/* ---------- Buttons / Pagination ---------- */

/* Kesselblech hat keine globale [hidden]-Regel; .button (inline-flex) und .announcement
   würden das Attribut sonst überstimmen */
.survey [hidden] {
	display: none !important;
}

.survey__result-link {
	margin-top: var(--bw-space-600);
}

/* ---------- Ergebnisseite: horizontales Balkendiagramm (Stil Kesselblech bar-chart) ---------- */

.survey__result {
	border: 1px solid var(--bw-border-subtle);
	border-radius: var(--bw-border-radius-100);
	padding: var(--bw-space-400);
}

.survey__chart {
	display: grid;
	grid-template-columns: minmax(6rem, 1fr) 2fr auto;
	column-gap: var(--bw-space-300);
	row-gap: var(--bw-space-300);
	align-items: center;
	margin: 0;
}

.survey__chart dt,
.survey__chart dd {
	margin: 0;
	font-family: var(--root-font-sans);
	font-size: var(--bw-font-size-200);
	line-height: var(--bw-leading-narrow);
	color: var(--bw-foreground-primary);
}

.survey__chart-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

.survey__chart-track {
	height: 4.8rem;
	display: flex;
	align-items: center;
}

/* Balkenstil wie .bar-chart__segment--horizontal im Kesselblech */
.survey__chart-fill {
	height: 100%;
	min-width: 0.2rem;
	box-sizing: border-box;
	background-color: var(--bw-background-accent);
	border: 1px solid var(--bw-border-primary);
	border-top-right-radius: var(--bw-border-radius-300);
	border-bottom-right-radius: var(--bw-border-radius-300);
	transition: width var(--default-transition-duration, 300ms) ease;
}

/* Wert wie .bar-chart__bar-value */
.survey__chart dd.survey__chart-value {
	font-weight: var(--bw-font-weight-bold);
	font-size: var(--bw-font-size-500);
	white-space: nowrap;
}

.survey__chart-votes {
	font-weight: var(--bw-font-weight-regular);
	font-size: var(--bw-font-size-200);
	color: var(--bw-foreground-muted);
}

@media print {
	.survey__chart-fill {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
}

@media (max-width: 47.9em) {
	.survey__chart {
		grid-template-columns: 1fr auto;
	}

	.survey__chart-label {
		grid-column: 1 / -1;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.survey__chart-fill {
		transition: none;
	}
}