fieldset .input-text label.abs {
	position: static;
	opacity: 1;
	pointer-events: auto;
	transform: none;
	margin-block-end: .35em;
	font-size: var(--fnt-t-nt-s);
	font-weight: var(--fnt-t-4-w);
}

fieldset .input-text :is(input, textarea)::placeholder {
	color: transparent;
}

fieldset .input-text label.abs:has(+ :required)::after {
	content: " *";
}


.wr-stacked {

	/* The .abs floating label is suppressed inside .ctc-frm; these prompts are
	   sentence-length and sit above their control, so they must stay visible. */
	> label {
		opacity: 1;
		pointer-events: auto;
		position: static;
	}
}

.wr-file {

	input[type='file'] {
		width: 100%;
		cursor: pointer;
	}

	/* The browser's own button, brought in line with the palette. */
	input[type='file']::file-selector-button {
		margin-right: 1em;
		padding: 0.6em 1.2em;
		border: var(--frm-bdr-w) var(--frm-bdr-stl) currentColor;
		border-radius: var(--frm-bdr-rds);
		background: none;
		color: inherit;
		font: inherit;
		cursor: pointer;
		transition: background-color var(--g-trn-sp) var(--g-trn-tf);
	}

	input[type='file']:is(:hover, :focus-visible)::file-selector-button {
		background-color: hsl(from currentColor h s l / 0.12);
	}
}

/* The upload hint sits under a left-aligned label, so it reads as part of that
   field — keep it left even where the surrounding panel centres small text. */
.wr-file > small {
	display: block;
	text-align: left;
	text-wrap: pretty;
}

/* Chosen-file list — rendered by /scripts/file-upload-list.js so a wrong file can
   be removed without clearing the whole selection. */
.wr-file .fl-lst {

	--fl-lst-gp: 0.5em;

	margin-block-start: var(--fl-lst-gp);
	display: flex;
	flex-direction: column;
	gap: calc(var(--fl-lst-gp) / 2);

	&[hidden] {
		display: none;
	}

	li {
		display: flex;
		align-items: center;
		gap: var(--fl-lst-gp);
		padding: 0.4em 0.6em;
		border: var(--frm-bdr-w) var(--frm-bdr-stl) hsl(from currentColor h s l / 0.25);
		border-radius: var(--frm-bdr-rds);
		font-size: var(--fnt-t-nt-s);
		text-align: left;
	}

	.fl-nm {
		flex: 1 1 auto;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.fl-sz {
		flex: 0 0 auto;
		opacity: 0.7;
	}

	.fl-rm {
		flex: 0 0 auto;
		width: 1.6em;
		height: 1.6em;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: var(--frm-bdr-rds);
		background: none;
		color: inherit;
		font: inherit;
		line-height: 1;
		cursor: pointer;
	}

	.fl-rm:is(:hover, :focus-visible) {
		background-color: hsl(from currentColor h s l / 0.12);
	}
}