/* Wine detail page and consumption dialog styles */

@layer components {
	.modal-header {
		padding: var(--space-4) var(--space-5);
		border-bottom: 1px solid var(--color-border-default);
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-shrink: 0;
		background: var(--color-bg-surface);

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

		h2 {
			margin: 0;
			font-size: var(--font-size-3xl);
			color: var(--color-text-primary);
			font-family: var(--font-display);
			font-weight: var(--font-weight-semibold);
			letter-spacing: var(--letter-spacing-tight);

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

		.close-btn {
			background: none;
			border: 1px solid var(--color-border-default);
			font-size: var(--font-size-2xl);
			cursor: pointer;
			padding: var(--space-2);
			color: var(--color-text-secondary);
			transition:
				background-color var(--transition-fast),
				color var(--transition-fast),
				border-color var(--transition-fast);
			border-radius: var(--radius-sm);
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-transform: none;

			&:hover {
				background-color: var(--color-error);
				color: white;
				border-color: var(--color-error);
			}
		}
	}

	.modal-body {
		padding: var(--space-5);
		overflow-y: auto;
		flex-grow: 1;
		background-color: var(--color-bg-base);
	}

	.modal-footer {
		padding: var(--space-4) var(--space-5);
		border-top: 1px solid var(--color-border-default);
		display: flex;
		gap: var(--space-4);
		justify-content: flex-end;
		flex-shrink: 0;
		background: var(--color-bg-surface);

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

		button {
			padding: var(--space-2) var(--space-5);
			border: 1px solid var(--color-border-default);
			background-color: var(--color-bg-surface);
			cursor: pointer;
			font-size: var(--font-size-sm);
			transition:
				background-color var(--transition-fast),
				color var(--transition-fast),
				border-color var(--transition-fast),
				transform var(--transition-fast),
				box-shadow var(--transition-fast);
			border-radius: var(--radius-sm);
			text-transform: uppercase;
			letter-spacing: var(--letter-spacing-wide);
			font-weight: var(--font-weight-medium);

			&:hover:not(:disabled) {
				background-color: var(--color-copper);
				color: var(--color-cream);
				border-color: var(--color-copper-dark);
				box-shadow: var(--shadow-ink);
			}

			&:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}

			&.regenerate-btn,
			&.ask-followup-btn {
				background: linear-gradient(135deg, var(--color-copper) 0%, var(--color-copper-dark) 100%);
				border-color: var(--color-copper-light);
				color: white;
				font-weight: var(--font-weight-semibold);

				&:hover:not(:disabled) {
					background: linear-gradient(135deg, var(--color-copper-light) 0%, var(--color-copper) 100%);
					box-shadow: var(--shadow-md);
				}
			}
		}
	}

	/* Consumption Dialog */
	.consumption-dialog {
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-md);
		max-width: 580px;
		max-height: 90vh;
		width: 90vw;
		padding: 0;
		box-shadow: var(--shadow-xl);
		display: flex;
		flex-direction: column;

		&:not([open]) {
			display: none;
		}

		&::backdrop {
			background-color: var(--color-bg-overlay);
			backdrop-filter: blur(8px);
		}

		.modal-header {
			background: linear-gradient(135deg, var(--color-cream-light), var(--color-bg-surface));
			border-bottom: 2px solid var(--dialog-wine-color, var(--color-copper));
			padding: var(--space-4) var(--space-5);
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			gap: var(--space-4);

			.modal-header-content {
				display: flex;
				flex-direction: column;
				gap: var(--space-1);
				min-width: 0;
			}

			h2 {
				font-family: var(--font-display);
				font-size: var(--font-size-md);
				font-weight: var(--font-weight-semibold);
				letter-spacing: var(--letter-spacing-wider);
				color: var(--color-text-secondary);
				margin: 0;
				text-transform: uppercase;
			}

			.close-btn {
				background: none;
				border: 1px solid var(--color-border-default);
				font-size: var(--font-size-xl);
				cursor: pointer;
				padding: var(--space-2);
				color: var(--color-text-secondary);
				transition:
					background-color var(--transition-fast),
					color var(--transition-fast),
					border-color var(--transition-fast);
				border-radius: var(--radius-sm);
				width: 36px;
				height: 36px;
				display: flex;
				align-items: center;
				justify-content: center;

				&:hover {
					background-color: var(--color-error);
					color: white;
					border-color: var(--color-error);
				}
			}
		}

		.modal-body {
			padding: var(--space-5);
			background: var(--color-bg-base);
			overflow-y: auto;
			flex: 1;
			min-height: 0;
			overscroll-behavior-y: none;
		}

		.modal-footer {
			background: var(--color-cream-light);
			border-top: 1px solid var(--color-border-default);
			padding: var(--space-4) var(--space-5);
			display: flex;
			gap: var(--space-3);
			justify-content: flex-end;

			button {
				padding: var(--space-2) var(--space-5);
				transition: background-color var(--transition-fast);
			}
		}

		.consumption-wine-name {
			font-family: var(--font-display);
			font-size: var(--font-size-lg);
			font-weight: var(--font-weight-medium);
			letter-spacing: var(--letter-spacing-tight);
			line-height: 1.25;
			color: var(--color-slate-dark);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.consumption-body-layout {
			display: flex;
			flex-direction: column;
			gap: var(--space-3);
		}

		.consumption-form {
			display: flex;
			flex-direction: column;
			gap: var(--space-3);
		}

		.consumption-field {
			display: flex;
			flex-direction: column;
			gap: var(--space-2);

			> span {
				font-size: var(--font-size-sm);
				font-weight: var(--font-weight-semibold);
				color: var(--color-slate);
				text-transform: uppercase;
				letter-spacing: var(--letter-spacing-wider);
			}

			input,
			textarea,
			select {
				padding: var(--space-2) var(--space-3);
				border: 1.5px solid var(--color-cream-darker);
				border-radius: var(--radius-sm);
				font-size: var(--font-size-base);
				background: var(--color-bg-surface);
				color: var(--color-text-primary);
				transition:
					border-color var(--transition-fast),
					box-shadow var(--transition-fast),
					background-color var(--transition-fast);

				&:focus {
					outline: none;
					border-color: var(--color-copper);
					box-shadow: 0 0 0 3px rgba(184, 115, 90, 0.1);
					background: white;
				}

				&:hover:not(:focus) {
					border-color: var(--color-copper-light);
				}
			}

			textarea {
				resize: vertical;
			}
		}

		.consumption-reduce-inventory {
			flex-direction: row;
			align-items: center;
			gap: var(--space-2);

			> span {
				text-transform: none;
				font-size: var(--font-size-sm);
				font-weight: var(--font-weight-medium);
				letter-spacing: var(--letter-spacing-normal);
			}
		}

		.consumption-status {
			margin-top: var(--space-3);
			padding: var(--space-2) var(--space-3);
			border-radius: var(--radius-sm);
			font-size: var(--font-size-sm);

			&.error {
				background: var(--color-error-bg);
				color: var(--color-error);
			}
		}

		.tasting-rating-label,
		.value-rating-label {
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-semibold);
			color: var(--color-slate);
			text-transform: uppercase;
			letter-spacing: 0.05em;
		}

		.tasting-rating-selector {
			margin-top: var(--space-3);
			margin-bottom: 0;
		}

		.value-rating-selector {
			margin-bottom: 0;
		}

		.value-rating-label {
			margin-top: var(--space-3);
		}

		.tasting-quick-section {
			margin-top: 0;
			padding-top: var(--space-3);
			border-top: 1px solid var(--color-border-default);
		}

		@media (min-width: 768px) {
			&:has(.tasting-detailed-section) {
				max-width: min(1140px, calc(100vw - 80px));

				.consumption-body-layout {
					display: grid;
					grid-template-columns: 380px 1fr;
					gap: 0;
					align-items: start;
				}

				.consumption-form {
					padding-right: var(--space-6);
					border-right: 1px solid var(--color-border-default);
					position: sticky;
					top: 0;
				}

				.tasting-quick-section {
					border-top: none;
					margin-top: var(--space-3);
					padding-top: 0;

					h3 {
						font-family: var(--font-body);
						font-size: var(--font-size-sm);
						text-transform: uppercase;
						letter-spacing: var(--letter-spacing-wider);
						color: var(--color-slate);
						font-weight: var(--font-weight-semibold);
						padding-bottom: var(--space-1);
						border-bottom: 2px solid var(--color-copper);
						display: inline-block;
						margin-bottom: var(--space-4);
					}
				}

				.tasting-rating-buttons {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: var(--space-1);
				}

				.tasting-rating-btn {
					padding: var(--space-2) var(--space-2);
					font-size: var(--font-size-xs);
				}

				.tasting-detailed-section {
					margin-top: 0;
					padding-left: var(--space-6);
				}

				.descriptor-section {
					margin-bottom: var(--space-6);

					&:last-of-type {
						border-top: none;
						padding-top: 0;
						margin-top: 0;
					}
				}

				.descriptor-category {
					display: grid;
					grid-template-columns: 120px 1fr;
					align-items: center;
					gap: var(--space-4);
					margin-bottom: var(--space-2);
				}

				.descriptor-category-header {
					text-align: right;
					margin-bottom: 0;
					padding-left: 0;
				}

				.descriptor-category-content {
					margin-bottom: 0;
				}
			}
		}

		@media (max-width: 767px) {
			max-width: 100vw;
			width: 100vw;
			max-height: 100dvh;
			border-radius: 0;

			.modal-header {
				padding: var(--space-4);
			}

			.modal-body {
				padding: var(--space-5);
				max-height: calc(100dvh - 180px);
				overflow-y: auto;
			}

			.modal-footer {
				padding: var(--space-4);
				flex-direction: column;
				gap: var(--space-3);

				button {
					width: 100%;
				}
			}

			.consumption-wine-name {
				font-size: var(--font-size-lg);
			}
		}
	}

	/* Wine Detail Page */
	wine-detail-page {
		flex-grow: 1;
		min-height: 0;
		display: flex;
		overflow: hidden;

		@media (max-width: 1199px) {
			display: block;
			overflow-y: auto;
		}
	}

	.wine-detail-page {
		display: flex;
		flex: 1;
		min-height: 0;

		@media (max-width: 1199px) {
			display: block;
		}
	}

	.wine-detail-left {
		flex: 1;
		overflow-y: auto;
		padding: var(--space-6);
		min-width: 420px;
		max-width: 600px;

		@media (max-width: 1199px) {
			overflow: visible;
			padding: var(--space-4);
			min-width: 0;
			max-width: none;
		}
	}

	.wine-detail-right {
		flex: 2;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		min-width: 0;
		border-left: 1px solid var(--color-border-default);

		@media (max-width: 1199px) {
			border-left: none;
			border-top: 1px solid var(--color-border-default);
			min-height: 520px;
		}
	}

	.wine-detail-right-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		gap: var(--space-4);
		color: var(--color-text-muted);
		padding: var(--space-6);
	}

	.wine-detail-right-toolbar {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-4);
		border-bottom: 1px solid var(--color-border-default);
	}

	.wine-regen-ai-btn {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
	}

	.wine-detail-ai-error {
		padding: var(--space-2) var(--space-4);
		font-size: var(--font-size-sm);
		color: var(--color-error);
	}

	.wine-detail-section {
		margin-bottom: calc(var(--space-6) + var(--space-3)); /* 36px = 3 × baseline */

		&:last-child {
			margin-bottom: 0;
		}
	}

	.wine-detail-header {
		display: flex;
		gap: var(--space-5);
		align-items: flex-start;
		margin-bottom: var(--space-6);
	}

	.wine-detail-header-text {
		flex: 1;
		min-width: 0;
	}

	.wine-detail-header-bottle {
		flex-shrink: 0;
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		align-self: flex-end;
		transition: transform var(--transition-fast);

		&:hover {
			transform: scale(1.03);
			box-shadow: none;
		}

		&:active {
			transform: scale(0.97);
		}

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

	.wine-detail-header-bottle-img {
		display: block;
		height: 192px;
		width: auto;
		mix-blend-mode: multiply;

		@media (max-width: 767px) {
			height: 160px;
		}
	}

	.wine-detail-subtitle {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin-top: var(--space-3);
	}

	.wine-detail-subtitle-identity {
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height-snug);
	}

	.wine-detail-subtitle-link {
		color: var(--color-text-muted);
		text-decoration: none;
		font-family: var(--font-mono);
		font-size: var(--font-size-xs);

		&:hover {
			text-decoration: underline;
		}
	}

	.wine-detail-subtitle-region {
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
		line-height: var(--line-height-snug);
	}

	.wine-detail-subtitle-grapes {
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
		line-height: var(--line-height-relaxed);
	}

	.wine-detail-content {
		min-width: 0;
	}

	/* Image expand dialog */
	.wine-image-dialog {
		background: transparent;
		border: none;
		padding: var(--space-6);
		max-width: min(90vw, 600px);
		max-height: 90vh;

		&::backdrop {
			background-color: var(--color-bg-overlay);
			backdrop-filter: blur(8px);
		}
	}

	.wine-image-dialog-img {
		display: block;
		max-height: 80vh;
		max-width: 100%;
		height: auto;
		width: auto;
		margin: 0 auto;
		mix-blend-mode: multiply;
	}

	.wine-detail-back {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		color: var(--color-text-muted);
		text-decoration: none;
		font-size: var(--font-size-sm);
		margin-bottom: var(--space-2);

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

	.wine-detail-title {
		font-size: var(--font-size-2xl);
		font-weight: var(--font-weight-semibold);
		line-height: 2rem;
		margin: 0;
	}

	.wine-detail-vintage {
		font-weight: var(--font-weight-normal);
		color: var(--color-text-muted);
	}

	.wine-detail-col-header {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		border-bottom: 2px solid var(--color-copper);
		padding-bottom: var(--space-2);
		margin-bottom: var(--space-6); /* 24px = 2 × baseline */

		h2 {
			font-family: var(--font-body);
			font-size: var(--font-size-xs);
			font-weight: var(--font-weight-semibold);
			text-transform: uppercase;
			letter-spacing: var(--letter-spacing-widest);
			color: var(--color-copper);
			margin: 0;
		}
	}

	.wine-detail-facts {
		border: 1px solid var(--color-border-default);
		overflow: hidden;
	}

	.facts-section {
		padding: var(--space-3); /* 12px = 1 baseline */
		border-top: 1px solid var(--color-border-default);

		&:first-child {
			border-top: none;
		}

		&.facts-section--stock {
			display: flex;
			flex-direction: column;
			gap: 0;
			background: color-mix(in srgb, var(--wine-color, var(--color-copper)) 8%, var(--color-bg-surface));
			border-top: 1px solid var(--wine-color, var(--color-copper));
		}

		.facts-stock-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-4);
		}

		.facts-stock-controls {
			display: flex;
			align-items: center;
			gap: var(--space-1);
		}

		.facts-stock-value,
		.facts-desired-value {
			min-width: 24px;
			text-align: center;
			font-weight: var(--font-weight-semibold);
			font-family: var(--font-mono);
			font-size: var(--font-size-base);
		}

		.facts-stock-ctrl {
			background: var(--color-bg-surface);
			border: 1px solid var(--color-accent-primary);
			color: var(--color-accent-primary);
			cursor: pointer;
			width: 20px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: var(--font-size-sm);
			padding: 0;
			border-radius: var(--radius-sm);
			font-weight: var(--font-weight-semibold);
			transition:
				background-color var(--transition-fast),
				color var(--transition-fast);

			&:hover:not(:disabled) {
				background-color: var(--color-accent-primary);
				color: white;
			}

			&:disabled {
				opacity: 0.4;
				cursor: not-allowed;
			}
		}

		&.facts-section--technical {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: var(--space-4);
			background: var(--color-cream-dark);
		}

		&.facts-section--comment {
			background: var(--color-bg-surface);
		}

		&.facts-section--vintages {
			display: flex;
			align-items: baseline;
			gap: var(--space-4);
			flex-wrap: wrap;

			&:empty {
				display: none;
			}

			.facts-vintage-links {
				display: flex;
				flex-wrap: wrap;
				gap: var(--space-2);
			}
		}

		&.facts-section--similar {
			display: flex;
			flex-direction: column;

			.facts-similar-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				cursor: pointer;
				user-select: none;

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

			.facts-similar-header-actions {
				display: flex;
				align-items: center;
				gap: var(--space-1);
			}

			.facts-similar-chevron {
				color: var(--color-text-muted);
				transition: transform var(--transition-fast);

				&.facts-similar-chevron--open {
					transform: rotate(-180deg);
				}
			}

			.facts-similar-links {
				display: flex;
				flex-direction: column;
			}

			.facts-similar-item {
				display: flex;
				flex-direction: column;
			}

			.facts-similar-explanation {
				font-size: var(--font-size-sm);
				color: var(--color-text-secondary);
				line-height: var(--line-height-snug);
			}

			.facts-similar-refresh-btn {
				background: none;
				border: none;
				padding: var(--space-1);
				cursor: pointer;
				color: var(--color-text-muted);
				display: flex;
				align-items: center;
				border-radius: var(--radius-sm);
				transition: color var(--transition-fast);
				flex-shrink: 0;

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

				&:disabled {
					opacity: 0.4;
					cursor: default;
				}
			}
		}

		&.facts-section--links {
			background: var(--color-bg-surface);
			display: flex;
			align-items: center;
			gap: var(--space-4);
		}
	}

	.facts-label {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-bold);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-widest);
		color: var(--color-text-tertiary);
		white-space: nowrap;
	}

	.facts-value {
		color: var(--color-text-primary);
		font-weight: var(--font-weight-semibold);
		font-size: var(--font-size-base);
		text-align: right;
		word-break: break-word;
	}

	.facts-filter-link {
		color: inherit;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}

	.facts-value--usage {
		cursor: pointer;
		text-decoration: underline;
		text-decoration-style: dotted;
		text-underline-offset: 3px;
	}

	.facts-usage-select {
		display: block;
		margin-left: auto;
		font-size: var(--font-size-base);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-primary);
		background: var(--color-bg-elevated);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-sm);
		padding: 0 var(--space-1);
		cursor: pointer;
	}

	.facts-refresh-btn {
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-default);
		color: var(--color-text-primary);
		padding: var(--space-1) var(--space-3);
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-semibold);
		cursor: pointer;
		border-radius: var(--radius-sm);
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		margin-left: auto;
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast);

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

		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
	}

	.facts-tech-item {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.facts-tech-label {
		font-size: var(--font-size-xs);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-widest);
		color: var(--color-text-tertiary);
		font-weight: var(--font-weight-bold);
	}

	.facts-tech-value {
		font-family: var(--font-mono);
		font-size: var(--font-size-base);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-primary);
	}

	.facts-comment {
		margin: var(--space-2) 0 0;
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
		white-space: pre-wrap;
		word-break: break-word;
		line-height: var(--line-height-snug);
	}

	.facts-comment--editable {
		cursor: pointer;

		&:hover {
			text-decoration: underline;
			text-decoration-style: dotted;
			text-underline-offset: 3px;
		}
	}

	.facts-comment-add {
		margin-top: var(--space-2);
		background: none;
		border: none;
		padding: 0;
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
		cursor: pointer;

		&:hover {
			color: var(--color-text-secondary);
			text-decoration: underline;
		}
	}

	.facts-comment-textarea {
		width: 100%;
		margin-top: var(--space-2);
		padding: var(--space-2);
		font-size: var(--font-size-sm);
		color: var(--color-text-primary);
		background: var(--color-bg-elevated);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-sm);
		resize: vertical;
		line-height: var(--line-height-relaxed);
		box-sizing: border-box;
	}

	.facts-comment-actions {
		display: flex;
		gap: var(--space-2);
		margin-top: var(--space-2);
	}

	.wine-edit-form {
		padding: var(--space-4);
	}

	.wine-edit-fields {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2);
		margin-bottom: var(--space-4);
	}

	.wine-edit-field {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.wine-edit-label {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-medium);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-widest);
		color: var(--color-text-muted);
	}

	.wine-edit-input,
	.wine-edit-select {
		width: 100%;
		box-sizing: border-box;
		padding: var(--space-1) var(--space-2);
		font-size: var(--font-size-sm);
		line-height: var(--line-height-snug);
		border: 1px solid var(--color-border-default);
		background: var(--color-bg-surface);
		border-radius: var(--radius-sm);
		color: var(--color-text-primary);
		transition: border-color var(--transition-fast);

		&:focus {
			outline: none;
			border-color: var(--color-copper);
		}
	}

	.wine-edit-actions {
		display: flex;
		align-items: stretch;
		gap: var(--space-2);

		.btn-primary,
		.btn-secondary {
			padding: var(--space-2) var(--space-4);
			font-size: var(--font-size-sm);
			letter-spacing: var(--letter-spacing-wider);
			text-transform: uppercase;
		}
	}

	.wine-edit-delete {
		margin-inline-start: auto;
		padding: var(--space-2) var(--space-4);
		background: var(--color-error);
		color: white;
		border: 1px solid color-mix(in srgb, var(--color-error) 70%, black);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-semibold);
		letter-spacing: var(--letter-spacing-wider);
		text-transform: uppercase;
		cursor: pointer;
		border-radius: var(--radius-sm);
		transition:
			background-color var(--transition-fast),
			box-shadow var(--transition-fast);

		&:hover:not(:disabled) {
			background: color-mix(in srgb, var(--color-error) 80%, black);
			box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 30%, transparent);
		}

		&:disabled {
			opacity: 0.5;
			cursor: default;
		}
	}

	.wine-edit-error {
		font-size: var(--font-size-sm);
		color: var(--color-error);
		align-self: center;
	}

	.facts-link {
		color: var(--color-accent-secondary);
		text-decoration: none;
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-semibold);

		&:hover {
			text-decoration: underline;
		}
	}

	.wine-detail-empty,
	.wine-detail-loading,
	.wine-detail-error {
		color: var(--color-text-muted);
		padding: var(--space-4);
		text-align: center;
	}

	.wine-detail-right .chat-assistant {
		background: var(--color-cream-darker);

		.chat-window {
			max-width: 900px;
			margin-inline: 0;
			padding: var(--space-4) var(--space-5);
			background: var(--color-bg-base);
		}

		.chat-form {
			max-width: 900px;
			margin-inline: 0;
			padding: var(--space-3) var(--space-5);
		}
	}

	.wine-chat-date {
		color: var(--color-text-muted);
	}

	/* Tasting entries */
	.wine-detail-tasting-toolbar {
		margin-bottom: var(--space-4);
		display: flex;
		gap: var(--space-2);

		.btn-primary {
			padding: var(--space-1) var(--space-3);
			font-size: var(--font-size-xs);
		}
	}

	.tasting-entry {
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-md);
		overflow: hidden;
		margin-bottom: var(--space-4);
	}

	.tasting-entry-meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--space-2);
		padding: var(--space-3) var(--space-4);
		background: var(--color-cream-dark);
		border-bottom: 1px solid var(--color-border-subtle);
	}

	.tasting-entry-body {
		display: flex;
		flex-direction: column;
	}

	.tasting-entry-section {
		padding: var(--space-4);
		display: flex;
		flex-direction: column;
		gap: var(--space-3);

		& + .tasting-entry-section {
			border-top: 1px solid var(--color-border-default);
		}

		&.tasting-entry-section--flavor {
			background: var(--color-cream-light);
		}

		&.tasting-entry-section--quality {
			background: var(--color-cream-light);
		}
	}

	.tasting-entry-consumption {
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
		font-style: italic;
		margin-left: auto;
	}

	.tasting-entry-wine-link {
		font-weight: var(--font-weight-semibold);
		text-decoration: none;
		color: var(--color-text-primary);

		&:hover {
			text-decoration: underline;
		}
	}

	.tasting-entry-date {
		color: var(--color-text-muted);
		font-size: var(--font-size-sm);
	}

	.tasting-entry-quantity {
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
	}

	.tasting-entry-occasion {
		font-size: var(--font-size-sm);
		font-style: italic;
	}

	.tasting-rating-scale .tasting-rating-btn {
		cursor: default;
		pointer-events: none;
	}

	.tasting-entry-notes {
		margin: 0;
		color: var(--color-text-secondary);
	}

	.tasting-descriptor-chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-1);
		margin-bottom: var(--space-2);
	}

	.tasting-descriptor-area {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.tasting-flavor-groups {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.tasting-flavor-group {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.tasting-group-label {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-bold);
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--color-text-muted);
	}

	.tasting-flavor-values {
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
	}

	.tasting-flavor-note {
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
		font-style: italic;
	}

	.tasting-structure-grid {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
	}

	.tasting-structure-row {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}

	.tasting-structure-dim {
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
		width: 5rem;
		flex-shrink: 0;
	}

	.tasting-structure-scale {
		display: flex;
		gap: var(--space-1);
		align-items: center;
	}

	.tasting-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--color-border-default);
		flex-shrink: 0;

		&.tasting-dot--active {
			background: var(--color-copper);
		}
	}

	.tasting-structure-val {
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
	}

	.tasting-entry-actions {
		display: flex;
		gap: var(--space-2);
		padding: var(--space-3) var(--space-4);
		border-top: 1px solid var(--color-border-default);
		background: var(--color-cream-dark);
	}

	.copy-id-btn {
		background: none;
		border: none;
		padding: 0;
		margin-left: var(--space-1);
		cursor: pointer;
		color: var(--color-text-secondary);
		vertical-align: middle;
		line-height: 1;

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