/* Semantic search view styles */

@layer components {
	.search-view--detail {
		.search-detail-query {
			font-size: var(--font-size-3xl);
			color: var(--color-text-heading);
			margin: var(--space-2) 0 var(--space-4);

			@media (max-width: 767px) {
				font-size: var(--font-size-2xl);
				margin-block-end: var(--space-1);
			}
		}
	}

	.search-form {
		display: flex;
		gap: var(--space-2);
		margin-bottom: var(--space-4);
	}

	.search-input {
		flex: 1;
		padding: var(--space-2) var(--space-3);
	}

	.search-button {
		flex-shrink: 0;
		min-width: 80px;
	}

	.search-meta-row {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		margin-bottom: var(--space-6);
		padding-bottom: var(--space-3);
		border-bottom: 1px solid var(--color-border-default);

		@media (max-width: 767px) {
			gap: 0;
		}
	}

	.search-meta-terms {
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
	}

	.search-meta-constraints {
		display: flex;
		gap: var(--space-2);
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-normal);
		color: var(--color-text-muted);
	}

	.search-status {
		color: var(--color-text-secondary);
		font-size: var(--font-size-sm);
		padding: var(--space-4) 0;
	}

	.search-error {
		color: var(--color-error);
		font-size: var(--font-size-sm);
		padding: var(--space-4) 0;
	}

	.search-pending-state {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-6) 0;
		color: var(--color-text-secondary);
		font-size: var(--font-size-sm);
	}

	.search-pending-icon {
		color: var(--color-accent-primary);
	}

	.search-results {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		border: 1px solid var(--color-border-default);
		background: var(--color-bg-surface);
	}

	.search-results > li {
		border-bottom: 1px solid var(--color-border-subtle);

		&:last-child {
			border-bottom: none;
		}
	}

	.search-result-card {
		display: flex;
		align-items: flex-start;
		gap: var(--space-4);
		padding: var(--space-5);
		text-decoration: none;
		color: inherit;
		border-left: 3px solid transparent;
		transition:
			background-color var(--transition-fast),
			border-left-color var(--transition-fast);

		@media (max-width: 767px) {
			padding: var(--space-3);
			gap: var(--space-3);
		}

		&:hover {
			background: var(--color-cream-dark);
			border-left-color: var(--color-copper);
		}
	}

	.search-result-thumb {
		flex-shrink: 0;
		height: 64px;
		width: auto;
		mix-blend-mode: multiply;
	}

	.search-result-body {
		flex: 1;
		min-width: 0;
	}

	.search-result-header {
		display: flex;
		align-items: baseline;
		gap: var(--space-3);
		margin-bottom: var(--space-2);
	}

	.search-result-name {
		flex: 1;
		font-family: var(--font-display);
		font-size: var(--font-size-2xl);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-heading);
		line-height: var(--line-height-snug);
		letter-spacing: var(--letter-spacing-tight);
		transition: color var(--transition-fast);

		@media (max-width: 767px) {
			font-size: var(--font-size-xl);
		}

		.search-result-card:hover & {
			color: var(--color-copper-dark);
		}
	}

	.search-result-vintage {
		font-weight: var(--font-weight-normal);
		color: var(--color-text-tertiary);
		font-size: var(--font-size-xl);
	}

	.search-result-price {
		flex-shrink: 0;
		align-self: flex-start;
		font-family: var(--font-mono);
		font-size: var(--font-size-lg);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-secondary);
		font-variant-numeric: tabular-nums;
		padding-top: 6px;

		@media (max-width: 767px) {
			font-size: var(--font-size-base);
		}
	}

	.search-result-sub {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--font-size-sm);
		margin-bottom: var(--space-1);
	}

	.search-result-type {
		color: var(--color-accent-primary);
		font-weight: var(--font-weight-medium);
	}

	.search-result-country {
		color: var(--color-text-secondary);

		&::before {
			content: "·";
			margin-right: var(--space-2);
			color: var(--color-border-default);
		}
	}

	.search-result-explanation {
		margin: 0;
		font-size: var(--font-size-md);
		color: var(--color-text-secondary);
		line-height: var(--line-height-relaxed);

		@media (max-width: 767px) {
			font-size: var(--font-size-sm);
		}
	}

	.search-history {
		margin-top: var(--space-6);
	}

	.search-query-list {
		display: flex;
		flex-direction: column;
		border: 1px solid var(--color-border-default);
		background: var(--color-bg-surface);
	}

	.search-query-pending {
		color: var(--color-accent-primary);
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	.search-query-error-indicator {
		color: var(--color-error);
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	.search-query-row {
		display: flex;
		flex-direction: column;
		padding: var(--space-3) var(--space-5);
		border-bottom: 1px solid var(--color-border-subtle);
		border-left: 3px solid transparent;
		transition:
			background-color var(--transition-fast),
			border-left-color var(--transition-fast);

		@media (max-width: 767px) {
			padding: var(--space-3);
		}

		&:last-child {
			border-bottom: none;
		}

		&:hover {
			background: var(--color-cream-dark);
			border-left-color: var(--color-copper);
		}
	}

	.search-query-link {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		text-decoration: none;
		color: inherit;
		min-width: 0;
	}

	.search-query-text {
		flex: 1;
		font-family: var(--font-display);
		font-size: var(--font-size-xl);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-primary);
		line-height: var(--line-height-normal);
		letter-spacing: var(--letter-spacing-tight);
		transition: color var(--transition-fast);

		@media (max-width: 767px) {
			font-size: var(--font-size-lg);
		}

		.search-query-link:hover & {
			color: var(--color-copper-dark);
		}
	}

	.search-query-meta {
		display: flex;
		flex-direction: column;
	}

	.search-query-terms {
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
	}

	.search-query-constraints {
		display: flex;
		gap: var(--space-2);
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-muted);
	}

	.search-query-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.search-query-date {
		flex-shrink: 0;
		font-family: var(--font-mono);
		font-size: var(--font-size-xs);
		letter-spacing: var(--letter-spacing-wide);
		color: var(--color-text-muted);
	}

	.search-query-delete {
		flex-shrink: 0;
		opacity: 0.4;
		transition: opacity var(--transition-fast);

		.search-query-row:hover & {
			opacity: 1;
		}
	}

	.back-link {
		display: inline-block;
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
		text-decoration: none;
		margin-bottom: var(--space-2);

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