@layer components {
	editorial-import-page {
		display: block;

		.editorial-import-body {
			padding-block-end: var(--space-9);
		}

		.editorial-import-form {
			display: flex;
			flex-direction: column;
			gap: var(--space-5);
		}

		#journalist-field-wrap {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			row-gap: var(--space-2);
		}

		.editorial-import-actions {
			display: flex;
			justify-content: flex-end;
		}

		/* ── Wine card (preview + committing) ─────────────────── */

		.editorial-import-wine-list {
			display: flex;
			flex-direction: column;
			gap: var(--space-5);
		}

		.editorial-import-card {
			display: flex;
			flex-direction: row;
			border: 1px solid var(--color-border-default);
			background: var(--color-bg-surface);
			--form-field-label-color: var(--color-text-secondary);

			@media (width < 768px) {
				flex-direction: column;
			}
		}

		.editorial-import-note-col {
			flex: 1;
			min-width: 0;
			padding: var(--space-4);
			display: flex;
			flex-direction: column;
			gap: var(--space-2);
		}

		.editorial-import-action-col {
			flex: 0 0 220px;
			padding: var(--space-4);
			background: var(--color-cream-dark);
			border-inline-start: 1px solid var(--color-border-default);
			display: flex;
			flex-direction: column;
			gap: var(--space-3);

			@media (width < 768px) {
				flex: none;
				border-inline-start: none;
				border-block-start: 1px solid var(--color-border-default);
			}
		}

		.editorial-import-wine-name {
			font-family: var(--font-display);
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-semibold);
			color: var(--color-text-heading);
			margin: 0;
			line-height: var(--line-height-heading);
		}

		.editorial-import-summary {
			font-size: var(--font-size-base);
			color: var(--color-text-secondary);
			margin: 0;
			line-height: var(--line-height-normal);
			font-weight: var(--font-weight-bold);
		}

		.editorial-import-note-text {
			font-size: var(--font-size-sm);
			color: var(--color-text-secondary);
			line-height: var(--line-height-relaxed);
			margin: 0;
			white-space: pre-wrap;
		}

		/* Include checkbox — reset browser margin so it aligns with labels and inputs */
		.editorial-import-include-check {
			text-transform: none;
			font-weight: var(--font-weight-normal);
			font-size: var(--font-size-sm);

			input[type="checkbox"] {
				margin: 0;
			}
		}

		/* ID field */
		.editorial-import-id-field {
			input {
				width: 100%;
			}
		}

		/* Vinmonopolet link */
		.editorial-import-vmp-link {
			font-size: var(--font-size-sm);
			color: var(--color-text-secondary);
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}

			&:focus-visible {
				outline: 2px solid var(--color-accent-primary);
				outline-offset: 2px;
			}
		}

		/* ── Per-wine status (committing) ─────────────────────── */

		.editorial-import-status {
			font-size: var(--font-size-xs);
			font-weight: var(--font-weight-semibold);
			text-transform: uppercase;
			letter-spacing: var(--letter-spacing-wide);
			display: flex;
			align-items: center;
			gap: var(--space-2);
		}

		.editorial-import-status--pending {
			color: var(--color-text-muted);
		}

		.editorial-import-status--loading {
			color: var(--color-info);
		}

		.editorial-import-status--done {
			color: var(--color-success);
		}

		.editorial-import-status--error {
			color: var(--color-error);
			text-transform: none;
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-normal);
		}

		.editorial-import-status--skipped {
			color: var(--color-text-muted);
		}

		/* Extracting spinner — inline-flex so icon and text are vertically centred */
		.editorial-import-extracting {
			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
		}

		/* ── Preview footer ─────────────────────────────────────── */

		.editorial-import-list-footer {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: var(--space-4);
			margin-block-start: var(--space-5);

			@media (width < 768px) {
				flex-direction: column;
				align-items: stretch;

				.btn-primary {
					width: 100%;
					justify-content: center;
				}
			}
		}

		.editorial-import-parse-time {
			font-size: var(--font-size-xs);
			color: var(--color-text-muted);
		}

		.editorial-import-reparse {
			display: flex;
			align-items: center;
			gap: var(--space-2);
			margin-inline-start: auto;

			select {
				padding: var(--space-1) var(--space-2);
				border: 1px solid var(--color-cream-darker);
				border-radius: var(--radius-sm);
				font-size: var(--font-size-sm);
				background: var(--color-bg-surface);
				color: var(--color-text-primary);
			}

			@media (width < 768px) {
				margin-inline-start: 0;
			}
		}

		/* ── Recent imports (idle state) ──────────────────────── */

		.editorial-import-recent {
			margin-block-start: var(--space-7);
		}

		.editorial-import-recent-meta {
			margin-inline-start: auto;
			font-size: var(--font-size-xs);
			color: var(--color-text-muted);
		}

		/* ── Done state ─────────────────────────────────────────── */

		.editorial-import-done-sections {
			display: flex;
			flex-direction: column;
			gap: var(--space-7);
		}

		.editorial-import-done-meta {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: var(--space-3);
			font-size: var(--font-size-sm);
			color: var(--color-text-secondary);
		}

		.editorial-import-source-link {
			color: var(--color-text-secondary);
			text-decoration: underline;
			text-underline-offset: 2px;

			&:hover {
				color: var(--color-text-primary);
			}

			&:focus-visible {
				outline: 2px solid var(--color-accent-primary);
				outline-offset: 2px;
			}
		}

		.editorial-import-done-section {
			display: flex;
			flex-direction: column;
			gap: var(--space-4);
		}

		.editorial-import-done-list {
			display: flex;
			flex-direction: column;
		}

		.editorial-import-done-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: var(--space-2);
			padding: var(--space-2) 0;
			border-block-end: 1px solid var(--color-border-default);
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-medium);
			color: var(--color-text-heading);
			text-decoration: none;

			&:last-child {
				border-block-end: none;
			}

			&:is(a):hover {
				text-decoration: underline;
			}

			&:is(a):focus-visible {
				outline: 2px solid var(--color-accent-primary);
				outline-offset: 2px;
			}
		}

		.editorial-import-done-item--skipped {
			flex-direction: column;
			align-items: flex-start;
			font-weight: var(--font-weight-normal);
			color: var(--color-text-secondary);
		}

		.editorial-import-done-item--nolink {
			color: var(--color-text-secondary);
		}

		.editorial-import-skipped-reason {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}
	}
}