/* Wine notes list and editor */

@layer components {
	/* ── Container ───────────────────────────────────────────── */

	wine-notes {
		display: block;
	}

	.wine-notes-heading {
		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-wider);
		color: var(--color-text-secondary);
	}

	/* ── Note list ───────────────────────────────────────────── */

	.wine-notes-list {
		display: flex;
		flex-direction: column;
	}

	.wine-note-row {
		border-top: 1px solid var(--color-border-default);
		padding: var(--space-3) 0;

		&:last-child {
			border-bottom: 1px solid var(--color-border-default);
		}

		&.wine-note-row--pinned {
			border-top-color: var(--color-copper);
		}
	}

	/* ── Meta row ────────────────────────────────────────────── */

	.wine-note-meta-row {
		margin-block-end: var(--space-2);
	}

	.wine-note-journalist {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		font-size: var(--font-size-xs);
		color: var(--color-text-secondary);
	}

	/* ── Pin button ──────────────────────────────────────────── */

	.wine-note-pin-btn {
		color: var(--color-text-muted);
		transition:
			color var(--transition-fast),
			transform var(--transition-fast);

		&:hover {
			color: var(--color-copper);
		}

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

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

		&.wine-note-pin-btn--pinned {
			color: var(--color-copper);
		}
	}

	/* ── Note content ────────────────────────────────────────── */

	.wine-note-content {
		font-size: var(--font-size-sm);
		color: var(--color-text-primary);
		line-height: var(--line-height-relaxed);
		text-wrap: pretty;

		p {
			margin-block-end: var(--space-3);
		}
		p:first-child {
			margin-block-start: 0;
		}
		p:last-child {
			margin-block-end: 0;
		}

		ul,
		ol {
			padding-inline-start: var(--space-5);
		}
		li {
			margin-block-end: var(--space-1);
		}

		h2,
		h3,
		h4 {
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-semibold);
			margin-block-end: var(--space-2);
		}

		code {
			font-family: var(--font-mono);
			font-size: 0.9em;
			background: var(--color-bg-elevated);
			padding: 0.1em 0.3em;
		}

		pre {
			background: var(--color-bg-elevated);
			padding: var(--space-3);
			overflow-x: auto;

			code {
				background: none;
				padding: 0;
			}
		}

		blockquote {
			border-inline-start: 3px solid var(--color-border-default);
			padding-inline-start: var(--space-3);
			color: var(--color-text-secondary);
		}

		a {
			color: var(--color-copper);
			text-decoration: underline;
		}
	}

	/* ── Image thumbnails ────────────────────────────────────── */

	.wine-note-images {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-block-start: var(--space-3);
	}

	.wine-note-thumb-link {
		display: block;
		flex-shrink: 0;
	}

	.wine-note-thumb {
		display: block;
		max-width: 120px;
		max-height: 80px;
		width: auto;
		height: auto;
		object-fit: cover;
		border: 1px solid var(--color-border-default);
	}

	/* ── Note actions ────────────────────────────────────────── */

	.wine-note-actions {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		margin-block-start: var(--space-2);

		.wine-note-date {
			font-size: var(--font-size-xs);
			color: var(--color-text-muted);
		}

		.wine-note-pin-btn {
			margin-inline-start: auto;
		}
	}

	.wine-note-actions--confirm {
		gap: var(--space-2);

		.wine-note-confirm-label {
			font-size: var(--font-size-xs);
			color: var(--color-text-muted);
			margin-inline-end: auto;
		}
	}

	/* ── Editor slot ─────────────────────────────────────────── */

	.wine-notes-editor-slot {
		margin-block: var(--space-3);
	}

	/* ── Editor form ─────────────────────────────────────────── */

	wine-note-editor {
		display: block;
	}

	.wine-note-editor {
		border-block-start: 1px solid var(--color-border-default);
		padding-block-start: var(--space-3);
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.wine-note-editor-fields {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
		align-items: flex-end;

		.form-field {
			min-width: 140px;
			gap: 0;

			> span {
				font-size: var(--font-size-xs);
			}
		}
	}

	/* ── Content area ────────────────────────────────────────── */

	.wine-note-editor-content-area {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.wine-note-textarea {
		width: 100%;
		min-height: 120px;
		resize: vertical;
		font-family: var(--font-body);
		font-size: var(--font-size-sm);
		line-height: var(--line-height-normal);
		color: var(--color-text-primary);
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-default);
		padding: var(--space-3);
		box-sizing: border-box;
		transition: border-color var(--transition-fast);

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

	.wine-note-preview-area {
		min-height: 120px;
		border: 1px solid var(--color-border-default);
		padding: var(--space-3);
		background: var(--color-bg-surface);

		p:first-child {
			margin-block-start: 0;
		}
	}

	/* ── Image management ────────────────────────────────────── */

	.wine-note-editor-images,
	.wine-note-pending-images {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.wine-note-editor-image-row {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}

	.wine-note-pending-filename {
		font-size: var(--font-size-xs);
		color: var(--color-text-secondary);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 200px;
	}

	/* ── Editor footer ───────────────────────────────────────── */

	.wine-note-editor-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		flex-wrap: wrap;
	}

	.wine-note-upload-btn {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		cursor: pointer;
	}

	.wine-note-editor-actions {
		display: flex;
		gap: var(--space-3);
		margin-inline-start: auto;
	}

	.wine-note-editor-error {
		margin-block: 0;
	}
}