/* DigiSavvy feedback form (/feedback/). ACSS tokens only: no raw px sizes or hex colors.
   Layout dimensions are derived from ACSS tokens; the only literal 1px values are the screen-reader/honeypot clip. */

.dgs-fb {
	--dgs-fb-col: min(var(--width-60), 100%);
	--dgs-fb-bar: calc(var(--space-xs) / 4);
	--dgs-fb-ring: var(--focus-width) solid var(--focus-color);

	box-sizing: border-box;
	inline-size: var(--content-width-safe);
	max-inline-size: var(--dgs-fb-col);
	margin-inline: auto;
	padding-block: var(--space-l) var(--space-xxl);
	color: var(--text-dark);
}
.dgs-fb *, .dgs-fb *::before, .dgs-fb *::after { box-sizing: border-box; }

.dgs-fb__sr, .dgs-fb__hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Page heading */
.dgs-fb__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin-block-end: var(--space-l);
}
.dgs-fb__title {
	margin: 0;
	font-size: var(--h2);
	text-wrap: balance;
}
.dgs-fb__intro {
	margin: 0;
	font-size: var(--text-l);
	color: var(--text-dark-muted);
	max-inline-size: 60ch;
}

/* Progress */
.dgs-fb__progress {
	block-size: var(--dgs-fb-bar);
	border-radius: var(--radius-circle);
	background: var(--bg-light);
	overflow: hidden;
}
.dgs-fb__bar {
	display: block;
	block-size: 100%;
	inline-size: 0;
	background: var(--primary);
	transition: inline-size var(--transition-duration) ease-out;
}
.dgs-fb__progress-label {
	font-size: var(--text-s);
	color: var(--text-dark-muted);
	margin: calc(var(--space-xs) / 2) 0 var(--space-m);
}

/* Answer thread */
.dgs-fb__thread {
	list-style: none;
	margin: 0 0 var(--space-s);
	padding: 0;
	display: grid;
	gap: var(--space-xs);
}
.dgs-fb__thread:empty { display: none; }
.dgs-fb__item {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: var(--space-s);
	align-items: center;
	padding: var(--space-xs) var(--space-s);
	border-radius: var(--radius);
	background: var(--bg-ultra-light);
	border: var(--border-size) solid var(--border-color-dark);
}
.dgs-fb__item-q { font-size: var(--text-s); color: var(--text-dark-muted); }
.dgs-fb__item-a {
	grid-column: 1;
	font-size: var(--text-m);
	font-weight: 500;
	overflow-wrap: anywhere;
}
.dgs-fb__item-a.is-skipped { font-weight: 400; font-style: italic; color: var(--text-dark-muted); }
.dgs-fb__edit {
	grid-column: 2;
	grid-row: 1 / span 2;
	font: inherit;
	font-size: var(--text-s);
	font-weight: 600;
	color: var(--primary-semi-dark);
	background: none;
	border: 0;
	padding: calc(var(--space-xs) / 2);
	cursor: pointer;
}
.dgs-fb__edit:hover { text-decoration: underline; }
.dgs-fb__edit:focus-visible { outline: var(--dgs-fb-ring); outline-offset: var(--focus-offset); }

/* Current question */
.dgs-fb__card {
	background: var(--white);
	border: var(--border-size) solid var(--border-color-dark);
	border-radius: var(--radius);
	box-shadow: var(--box-shadow-1);
	padding: var(--space-m) var(--space-m);
	margin-block-end: var(--space-s);
}
.dgs-fb__fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.dgs-fb__q {
	font-family: var(--heading-font-family);
	font-size: var(--h3);
	font-weight: 600;
	line-height: var(--heading-line-height);
	margin: 0 0 var(--space-xs);
	padding: 0;
}
.dgs-fb__q:focus { outline: none; }
.dgs-fb__hint { font-size: var(--text-s); color: var(--text-dark-muted); margin: 0 0 var(--space-s); }

.dgs-fb__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-end: var(--space-s); }
.dgs-fb__chip { position: relative; max-inline-size: 100%; }
.dgs-fb__chip-input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.dgs-fb__chip-text {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--space-xs) / 2);
	font-size: var(--text-m);
	font-weight: 500;
	line-height: var(--heading-line-height);
	color: var(--text-dark);
	background: var(--white);
	border: var(--border-size) solid var(--border-color-dark);
	border-radius: var(--radius-circle);
	padding: calc(var(--space-xs) / 1.5) var(--space-s);
	cursor: pointer;
	user-select: none;
	transition: background-color var(--transition-duration), border-color var(--transition-duration);
}
.dgs-fb__chip-text:hover { border-color: var(--primary); }
.dgs-fb__chip-input:checked + .dgs-fb__chip-text {
	background: var(--primary-ultra-light);
	border-color: var(--primary-semi-dark);
}
.dgs-fb__chip-input:checked + .dgs-fb__chip-text::before { content: "✓"; font-weight: 700; color: var(--primary-semi-dark); }
.dgs-fb__chip-input:focus-visible + .dgs-fb__chip-text { outline: var(--dgs-fb-ring); outline-offset: var(--focus-offset); }
.dgs-fb__chip-input:disabled + .dgs-fb__chip-text { opacity: .45; cursor: not-allowed; }

.dgs-fb__field { margin-block-end: var(--space-s); }
.dgs-fb__label {
	display: block;
	font-size: var(--text-s);
	font-weight: 600;
	color: var(--text-dark-muted);
	margin-block-end: calc(var(--space-xs) / 2);
}
.dgs-fb__input {
	inline-size: 100%;
	font: inherit;
	font-size: var(--text-m);
	color: var(--text-dark);
	background: var(--white);
	border: var(--border-size) solid var(--border-color-dark);
	border-radius: var(--radius);
	padding: var(--space-xs) var(--space-s);
}
.dgs-fb__input--area { resize: vertical; line-height: var(--text-line-height); }
.dgs-fb__input:focus { outline: var(--dgs-fb-ring); outline-offset: 0; border-color: var(--primary); }

.dgs-fb__check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	font-size: var(--text-m);
	margin-block-end: var(--space-s);
	cursor: pointer;
}
.dgs-fb__check-input { inline-size: var(--text-m); block-size: var(--text-m); margin-block-start: calc(var(--space-xs) / 4); accent-color: var(--primary-semi-dark); flex-shrink: 0; }
.dgs-fb__check-input:focus-visible { outline: var(--dgs-fb-ring); outline-offset: var(--focus-offset); }

.dgs-fb__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); margin-block-start: var(--space-xs); }
.dgs-fb__next[disabled] { opacity: .45; cursor: not-allowed; }
.dgs-fb__skip {
	font: inherit;
	font-size: var(--text-m);
	font-weight: 500;
	color: var(--text-dark-muted);
	background: none;
	border: 0;
	padding: calc(var(--space-xs) / 2);
	cursor: pointer;
}
.dgs-fb__skip:hover { color: var(--text-dark); text-decoration: underline; }
.dgs-fb__skip:focus-visible { outline: var(--dgs-fb-ring); outline-offset: var(--focus-offset); }
.dgs-fb__error { font-size: var(--text-s); color: var(--accent-semi-dark); margin: var(--space-xs) 0 0; }
.dgs-fb__error:empty { display: none; }

/* Done */
.dgs-fb__card.is-done { text-align: start; }
.dgs-fb__thanks { font-size: var(--text-l); line-height: var(--text-line-height); margin: 0 0 var(--space-xs); }
.dgs-fb__thanks:focus { outline: none; }
.dgs-fb__signoff { font-size: var(--text-l); font-weight: 600; margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.dgs-fb__bar, .dgs-fb__chip-text { transition: none; }
}