.dilema-submission-form,
.dilema-submission-form *,
.dilema-submission-form *::before,
.dilema-submission-form *::after {
	box-sizing: border-box;
}

.dilema-submission-form {
	max-width: 640px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

@media ( max-width: 480px ) {
	.dilema-submission-form {
		padding: 0 1rem;
		gap: 1rem;
	}

	.dilema-challenge,
	.dilema-upload-dropzone {
		padding: 0.85rem 1rem;
	}

	.dilema-submit-button {
		width: 100%;
		text-align: center;
	}

	.dilema-upload-text {
		min-width: 0;
	}

	.dilema-upload-filename {
		overflow-wrap: break-word;
		word-break: break-word;
	}
}

/* Scroll-reveal: fields start hidden/offset, JS adds .is-visible via
   IntersectionObserver when scrolled into view (see src/frontend/index.js). */
.dilema-field[data-reveal] {
	opacity: 0;
	transform: translateY( 16px );
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.dilema-field[data-reveal].is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

/* Sequential disappear on successful submit — see hideFieldsSequentially(). */
.dilema-field.is-hiding {
	opacity: 0;
	transform: translateY( -8px );
	max-height: 0;
	margin: 0;
	overflow: hidden;
	transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
}

.dilema-submit-button.is-hiding {
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Anti-spam station-name challenge — see initChallengeGate(). */
.dilema-challenge {
	padding: 1rem 1.25rem;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #fafafa;
}

.dilema-challenge label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.dilema-challenge-input {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid #d0d0d0;
	border-radius: 8px;
	font-size: 1rem;
}

.dilema-challenge-hint {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: #666;
}

.dilema-challenge.is-solved {
	opacity: 0;
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin: 0;
	overflow: hidden;
	border-width: 0;
	transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}

.dilema-form-fields {
	opacity: 0;
	transform: translateY( 8px );
	transition: opacity 0.4s ease, transform 0.4s ease;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/*
 * Same tied-specificity problem as .dilema-upload-status above:
 * `display: flex` here beat the browser's `[hidden] { display: none }`
 * rule, so setting `.hidden = true` on this container after a
 * successful submit (hideFieldsSequentially() in
 * src/frontend/index.js) did nothing visually — the required-fields
 * legend (not a `.dilema-field`, so never gets the per-field
 * `.is-hiding` collapse animation) stayed fully visible, and the
 * flex `gap` between the now-collapsed fields left a block of stray
 * whitespace behind.
 */
.dilema-form-fields[hidden] {
	display: none;
}

.dilema-form-fields.is-revealed {
	opacity: 1;
	transform: translateY( 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.dilema-field.is-hiding,
	.dilema-submit-button.is-hiding,
	.dilema-challenge.is-solved,
	.dilema-form-fields {
		transition: none;
	}
}

@keyframes dilema-shake {
	10%, 90% { transform: translateX( -1px ); }
	20%, 80% { transform: translateX( 2px ); }
	30%, 50%, 70% { transform: translateX( -4px ); }
	40%, 60% { transform: translateX( 4px ); }
}

.dilema-field.is-shaking {
	animation: dilema-shake 0.5s ease;
}

.dilema-field.is-shaking input,
.dilema-field.is-shaking textarea {
	border-color: #d1454a;
}

@keyframes dilema-spin {
	to { transform: rotate( 360deg ); }
}

.dilema-submit-button.is-loading::after {
	content: '';
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.5em;
	border: 2px solid rgba( 255, 255, 255, 0.5 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: dilema-spin 0.6s linear infinite;
	vertical-align: middle;
}

@keyframes dilema-fade-in {
	from { opacity: 0; transform: translateY( -4px ); }
	to { opacity: 1; transform: translateY( 0 ); }
}

.dilema-form-message:not( :empty ) {
	animation: dilema-fade-in 0.3s ease;
}

.dilema-form-message.is-success::before {
	content: '✓ ';
	font-weight: 700;
}

/* Audio upload widget */

.dilema-upload {
	position: relative;
}

.dilema-upload-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.dilema-upload-dropzone {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.1rem 1.25rem;
	border: 2px dashed #c9c9d6;
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.dilema-upload-dropzone:hover,
.dilema-upload-dropzone.is-dragover {
	border-color: #4a4af0;
	background: rgba( 74, 74, 240, 0.04 );
}

.dilema-upload-icon {
	font-size: 1.4rem;
	color: #4a4af0;
}

.dilema-upload-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.dilema-upload-choose {
	font-weight: 600;
}

.dilema-upload-filename {
	font-size: 0.85rem;
	color: #666;
}

.dilema-upload.has-file .dilema-upload-filename {
	color: #1a7f37;
	font-weight: 600;
}

.dilema-upload-progress {
	margin-top: 0.6rem;
	height: 6px;
	border-radius: 999px;
	background: #eee;
	overflow: hidden;
}

.dilema-upload-progress-bar {
	height: 100%;
	width: 0%;
	background: #4a4af0;
	border-radius: 999px;
	transition: width 0.2s ease;
}

.dilema-upload-status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.6rem;
	padding: 0.45rem 0.8rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	width: fit-content;
	background: #f0f0f4;
	color: #444;
}

/*
 * `display: flex` above has the same specificity as the browser's
 * built-in `[hidden] { display: none }` rule, and author styles win
 * ties over the UA stylesheet — so without this, the `hidden`
 * attribute JS sets/clears on this element (see src/frontend/index.js)
 * was silently ignored, leaving an empty grey pill visible on every
 * file field that never runs an AI check (e.g. Press Release).
 */
.dilema-upload-status[hidden] {
	display: none;
}

.dilema-upload-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.dilema-upload-status.is-analyzing .dilema-upload-status-dot {
	animation: dilema-pulse 1s ease-in-out infinite;
}

@keyframes dilema-pulse {
	0%, 100% { opacity: 1; transform: scale( 1 ); }
	50% { opacity: 0.4; transform: scale( 0.7 ); }
}

.dilema-upload-status.is-human {
	background: #e6f4ea;
	color: #1a7f37;
}

.dilema-upload-status.is-mixed {
	background: #fef3e0;
	color: #9a6700;
}

.dilema-upload-status.is-ai {
	background: #fde7e9;
	color: #c9272f;
}

.dilema-upload-status.is-unknown {
	background: #f0f0f4;
	color: #666;
}

.dilema-hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dilema-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.dilema-field input[type="text"],
.dilema-field input[type="email"],
.dilema-field input[type="url"],
.dilema-field select,
.dilema-field textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid #d0d0d0;
	border-radius: 8px;
	font-size: 1rem;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dilema-field input:focus,
.dilema-field select:focus,
.dilema-field textarea:focus {
	outline: none;
	border-color: #4a4af0;
	box-shadow: 0 0 0 3px rgba( 74, 74, 240, 0.15 );
}

.dilema-checkbox-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
}

.dilema-radio-group-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.dilema-radio-group {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.dilema-radio-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
}

.dilema-acceptance-terms {
	font-size: 0.85rem;
	color: #555;
	background: #f8f8fa;
	border-radius: 8px;
	padding: 0.85rem 1rem;
	margin-bottom: 0.6rem;
}

.dilema-required {
	color: #d1454a;
}

.dilema-field-help {
	font-size: 0.85rem;
	color: #666;
	margin: 0.15rem 0 0.5rem;
}

.dilema-submit-button {
	align-self: flex-start;
	padding: 0.75rem 1.75rem;
	border: none;
	border-radius: 999px;
	background: #4a4af0;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.2s ease;
}

.dilema-submit-button:hover:not(:disabled) {
	transform: translateY( -1px );
	background: #3d3dd6;
}

.dilema-submit-button:disabled {
	opacity: 0.7;
	cursor: default;
}

.dilema-form-message {
	font-size: 0.9rem;
}

.dilema-form-message.is-success {
	color: #1a7f37;
}

.dilema-form-message.is-error {
	color: #d1454a;
}

.dilema-photo-example {
	margin: 0.5rem 0 0.75rem;
}

.dilema-photo-example-thumb {
	display: block;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 6px;
	overflow: hidden;
	background: none;
	cursor: zoom-in;
	width: 220px;
	max-width: 100%;
}

.dilema-photo-example-thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.dilema-photo-example-tips {
	font-size: 0.85rem;
	color: #555;
	margin: 0.4rem 0 0;
	max-width: 480px;
}

/*
 * Moved to a direct child of <body> at runtime (see
 * initPhotoExampleWidgets()) rather than left nested inside its
 * .dilema-field — that field gets a CSS `transform` once revealed
 * (see [data-reveal].is-visible above), and ANY transformed ancestor
 * becomes the containing block for `position: fixed` descendants,
 * silently turning "fixed to the viewport" into "fixed to that field"
 * and trapping this overlay's z-index inside that field's own
 * stacking context — which is why it was rendering BEHIND later
 * fields like Bio despite z-index: 9999.
 *
 * Visibility is driven entirely from JS (is-hovering / is-open
 * classes), not a CSS `:hover` sibling selector — hovering the thumb
 * while `pointer-events` stayed enabled on this overlay made the
 * cursor land ON the overlay the instant it appeared, which fired the
 * thumb's mouseleave and hid it again, in a tight flicker loop.
 * `pointer-events: none` during hover-preview fixes that; only the
 * explicit `is-open` (click/tap) state re-enables clicking, so it can
 * still be dismissed by tapping it.
 */
.dilema-photo-example-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.75 );
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 1.5rem;
	cursor: zoom-out;
	pointer-events: none;
}

.dilema-photo-example-overlay img {
	max-width: 90vw;
	max-height: 90vh;
	border-radius: 8px;
}

.dilema-photo-example-overlay.is-hovering,
.dilema-photo-example-overlay.is-open {
	display: flex;
}

.dilema-photo-example-overlay.is-open {
	pointer-events: auto;
}

.dilema-embed-preview {
	margin-top: 0.5rem;
}

.dilema-embed-preview-content iframe {
	max-width: 100%;
}

.dilema-embed-preview-error {
	color: #9a6700;
	background: #fef3e0;
	border-radius: 4px;
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
	margin: 0;
}

.dilema-required-legend {
	font-size: 0.85rem;
	color: #666;
	margin: 0 0 0.5rem;
}

.dilema-social-row {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

/*
 * !important here is deliberate: many themes apply a global
 * `select, input { width: 100%; }` rule to every form element, which
 * hijacks flex-basis (flex-basis: auto uses the width property) and
 * makes the select refuse to shrink while the url input gets crushed —
 * exactly the "dropdown huge, link field tiny" bug this fixes.
 */
.dilema-social-row select {
	flex: 0 0 150px;
	width: 150px !important;
	min-width: 0;
}

.dilema-social-row input[type='url'] {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
}

.dilema-social-remove {
	flex: 0 0 auto;
	background: none;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	color: #c9272f;
	width: 2.25rem;
}

.dilema-social-add {
	background: none;
	border: 1px dashed #999;
	border-radius: 4px;
	padding: 0.4rem 0.8rem;
	cursor: pointer;
	color: #4a4af0;
	font-weight: 600;
}

@media ( max-width: 480px ) {
	.dilema-social-row {
		flex-wrap: wrap;
	}
	.dilema-social-row select,
	.dilema-social-row input[type='url'] {
		flex: 1 1 100%;
		width: 100% !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dilema-submit-button {
		transition: none;
	}
	.dilema-field[data-reveal],
	.dilema-field.is-shaking,
	.dilema-submit-button.is-loading::after,
	.dilema-form-message:not( :empty ) {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.dilema-upload-status.is-analyzing .dilema-upload-status-dot {
		animation: none;
	}
	.dilema-upload-progress-bar,
	.dilema-upload-dropzone {
		transition: none;
	}
}