/* Base styles - Editorial Luxury + Brutalist Design System */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

@layer reset, base, components, utilities;

@view-transition {
	navigation: auto;
}

#app {
	view-transition-name: main-content;
}

:root {
	/* Typography - Editorial System */
	--font-display: "Cormorant Garamond", Georgia, serif;
	--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono: "JetBrains Mono", "Courier New", monospace;

	/* Typography Scale */
	--font-size-xs: 0.7rem;
	--font-size-sm: 0.8125rem;
	--font-size-base: 0.9375rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.5rem;
	--font-size-2xl: 1.75rem;
	--font-size-3xl: 2.25rem;
	--font-size-4xl: 3rem;
	--font-size-5xl: 4rem;

	/* Baseline grid
	   Primary unit: 24px (--line-height-normal) = one line of body text.
	   All vertical measurements must be multiples of 12px (half-baseline).
	   Valid values: 12, 24, 36, 48, 72, 96px. Nothing else aligns to the grid. */
	--baseline: 0.75rem; /* 12px = half-baseline — minimum valid vertical increment */

	/* --line-height-heading removed — headings use line-height: 1 via the base h1–h6 rule */

	/* Body/UI line heights (absolute rem — strict multiples of --baseline) */
	--line-height-tight: 0.75rem; /* 12px = 1 half-baseline — xs/sm labels only, never multi-line */
	--line-height-snug: 1.5rem; /* 24px = 1 baseline */
	--line-height-normal: 1.5rem; /* 24px = 1 baseline — primary body text */
	--line-height-relaxed: 1.5rem; /* 24px = 1 baseline — no valid value between 24px and 48px */
	--line-height-loose: 3rem; /* 48px = 2 baselines — spacious display contexts */

	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--letter-spacing-tight: -0.02em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide: 0.025em;
	--letter-spacing-wider: 0.05em;
	--letter-spacing-widest: 0.1em;

	/* Color System - Mediterranean Sun-Washed Vineyard */
	--color-limestone: #e8dfd4;
	--color-limestone-light: #f2ebe3;
	--color-limestone-dark: #d9cdbf;
	--color-sand: #d4c4b0;
	--color-sand-dark: #bfab93;
	--color-terracotta-rich: #b8634d;
	--color-wine-barrel: #8b5a3c;
	--color-golden-hour: #d4a574;
	--color-olive-shadow: #7a7566;

	/* Legacy color names (for backwards compatibility) */
	--color-charcoal: #1a1614;
	--color-charcoal-light: #2d2926;
	--color-charcoal-lighter: #3f3a36;
	--color-cream: #f8f6f1;
	--color-cream-light: #faf8f4;
	--color-cream-dark: #ebe7df;
	--color-cream-darker: #ddd7ca;

	--color-copper: #9b6b4a;
	--color-copper-light: #b8836a;
	--color-copper-dark: #7d5539;
	--color-copper-darker: #5e3f2a;

	--color-slate: #5a6e7f;
	--color-slate-light: #738a9c;
	--color-slate-dark: #475563;

	--color-terracotta: #c8826d;
	--color-terracotta-light: #d9a08d;
	--color-terracotta-dark: #a6654e;

	/* Semantic Colors */
	--color-bg-base: var(--color-cream);
	--color-bg-surface: #ffffff;
	--color-bg-elevated: #ffffff;
	--color-bg-overlay: rgba(26, 22, 20, 0.6);
	--color-bg-hover: var(--color-cream-dark);
	--color-bg-active: var(--color-cream-darker);

	--color-text-heading: #2a1f16;
	--color-text-primary: #3a2f26;
	--color-text-secondary: #5a4d42;
	--color-text-tertiary: #897b6e;
	--color-text-muted: #a89987;
	--color-text-inverse: var(--color-cream);

	--color-border-subtle: #e8e3dc;
	--color-border-default: #d4cec3;
	--color-border-strong: var(--color-charcoal-lighter);

	--color-accent-primary: var(--color-copper);
	--color-accent-secondary: var(--color-slate);
	--color-accent-interactive: var(--color-terracotta);

	/* Semantic aliases */
	--color-surface: var(--color-bg-surface);
	--color-surface-elevated: var(--color-bg-elevated);
	--color-brand-primary: var(--color-accent-primary);

	/* Wine type colors - refined */
	--color-wine-red: #8b4049;
	--color-wine-white: #c5a875;
	--color-wine-rose: #d47b84;
	--color-wine-sparkling: #7a9b84;

	/* Status colors */
	--color-success: #567d5f;
	--color-success-bg: #e8f0ea;
	--color-warning: #9b7d4a;
	--color-warning-bg: #f5efe3;
	--color-error: #9b4a4a;
	--color-error-bg: #f5e8e8;
	--color-info: var(--color-slate);
	--color-info-bg: #e8ecf0;
	--color-error-dark: #8b3a3a;

	/* Rating system colors */
	--color-rating-bad: #dc2626;
	--color-rating-bad-bg: #fef2f2;
	--color-rating-bad-dark: #b91c1c;
	--color-rating-ok: #f59e0b;
	--color-rating-ok-bg: #fef3c7;
	--color-rating-ok-dark: #d97706;
	--color-rating-good: #22c55e;
	--color-rating-good-bg: #dcfce7;
	--color-rating-good-dark: #16a34a;
	--color-rating-very-good: #3b82f6;
	--color-rating-very-good-bg: #dbeafe;
	--color-rating-very-good-dark: #2563eb;
	--color-rating-excellent: #a855f7;
	--color-rating-excellent-bg: #f3e8ff;
	--color-rating-excellent-dark: #9333ea;
	--color-rating-spectacular: #eab308;
	--color-rating-spectacular-bg: #fef9c3;
	--color-rating-spectacular-dark: #d97706;
	--color-rating-star: #f59e0b;
	--color-rating-star-hover: #fb923c;

	/* Spacing System */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-7: 2rem;
	--space-8: 2.5rem;
	--space-9: 3rem;
	--space-10: 4rem;

	/* Border Radius */
	--radius-none: 0;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;

	/* Shadows - Warm and subtle */
	--shadow-sm: 0 1px 3px rgba(58, 47, 38, 0.08);
	--shadow-md: 0 4px 12px rgba(58, 47, 38, 0.1);
	--shadow-lg: 0 8px 24px rgba(58, 47, 38, 0.12);
	--shadow-xl: 0 16px 48px rgba(58, 47, 38, 0.15);
	--shadow-ink: 0 2px 8px rgba(184, 99, 77, 0.15);

	/* Transitions - Weighty and refined */
	--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slower: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

	/* Transition Utilities - Common Combinations */
	--transition-button:
		background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast),
		transform var(--transition-fast);

	--transition-input:
		border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);

	--transition-lift: box-shadow var(--transition-base), transform var(--transition-base);

	/* Layout */
	--sidebar-width: 280px;
	--mobile-header-height: 56px;
	--mobile-touch-target: 44px;
	--content-max-width: 1400px;
	--content-narrow-width: 1000px;
	--bottom-nav-height: 60px;

	/* Z-index scale */
	--z-base: 0;
	--z-sticky: 10;
	--z-header: 100;
	--z-overlay: 500;
	--z-sidebar: 600;
	--z-modal: 1000;

	/* Icon System */
	--icon-size-sm: 16px;
	--icon-size-base: 20px;
	--icon-size-lg: 24px;
	--icon-stroke-width: 1.75px;
	--icon-stroke-width-emphasis: 2px;
}

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
}

@layer base {
	html {
		font-size: 16px;
	}

	html,
	body {
		height: 100%;
		margin: 0;
		overflow: hidden;
	}

	body {
		font-family: var(--font-body);
		font-size: var(--font-size-base);
		line-height: var(--line-height-normal);
		color: var(--color-text-primary);
		background-color: var(--color-bg-base);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--font-display);
		font-weight: var(--font-weight-semibold);
		line-height: 1;
		letter-spacing: var(--letter-spacing-tight);
		color: var(--color-text-primary);
		margin-block-start: 0;
		text-box-trim: trim-start;
		text-box-edge: cap alphabetic;
	}

	input[type="text"],
	input[type="number"],
	input[type="email"],
	textarea,
	select {
		font-family: var(--font-body);
		font-size: var(--font-size-base);
		padding: var(--space-2) var(--space-3);
		border: 1px solid var(--color-border-default);
		background-color: var(--color-bg-surface);
		color: var(--color-text-primary);
		border-radius: var(--radius-sm);
		transition:
			border-color var(--transition-fast),
			background-color var(--transition-fast),
			box-shadow var(--transition-fast);

		&:focus {
			outline: none;
			border-color: var(--color-accent-primary);
			background-color: white;
			box-shadow: 0 0 0 3px rgba(155, 107, 74, 0.1);
		}

		&::placeholder {
			color: var(--color-text-muted);
		}
	}

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

		&:hover {
			background-color: var(--color-accent-primary);
			color: var(--color-text-inverse);
			box-shadow: var(--shadow-ink);
		}

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

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

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

	a {
		color: var(--color-accent-primary);
		text-decoration: none;
		transition: color var(--transition-fast);

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

@layer components {
	.app-layout {
		display: flex;
		height: 100%;
		position: relative;
		background-color: var(--color-bg-base);
		opacity: 0;
		transition: opacity var(--transition-fast);

		html.app-ready & {
			opacity: 1;
		}

		@media (max-width: 767px) {
			display: block;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			padding-bottom: var(--bottom-nav-height);
		}
	}

	.sidebar {
		width: var(--sidebar-width);
		background: linear-gradient(180deg, var(--color-limestone-light) 0%, var(--color-limestone) 100%);
		color: var(--color-text-primary);
		padding: var(--space-6) 0 var(--space-3);
		display: flex;
		flex-direction: column;
		border-inline-end: 1px solid var(--color-border-default);
		flex-shrink: 0;
		box-shadow: var(--shadow-sm);
		position: relative;

		.sidebar-brand {
			display: block;
			text-decoration: none;
			color: inherit;
			margin-block-end: var(--space-6); /* 24px = 1 baseline */
		}

		h1 {
			font-size: var(--font-size-4xl);
			margin-block-end: 0;
			padding-inline: var(--space-5);
			color: var(--color-text-heading);
		}

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
			pointer-events: none;
			z-index: 1;
		}

		h1,
		nav {
			position: relative;
			z-index: 2;
		}

		@media (max-width: 767px) {
			position: fixed;
			left: 0;
			top: 0;
			height: 100%;
			z-index: var(--z-sidebar);
			transform: translateX(-100%);
			transition: transform var(--transition-fast);
			overflow-y: auto;

			&.open {
				transform: translateX(0);
			}
		}
	}

	.sidebar-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background-color: var(--color-bg-overlay);
		z-index: var(--z-overlay);
		backdrop-filter: blur(4px);
		opacity: 0;
		transition: opacity var(--transition-base);

		&.open {
			display: block;
			opacity: 1;
		}
	}

	.mobile-header {
		display: none;
	}

	.mobile-app-title {
		font-family: var(--font-display);
		font-size: var(--font-size-2xl);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-heading);
		margin: 0;
		letter-spacing: var(--letter-spacing-tight);
	}

	.menu-toggle {
		display: none;

		@media (max-width: 767px) {
			display: flex;
			align-items: center;
			justify-content: center;
			width: var(--mobile-touch-target);
			height: var(--mobile-touch-target);
			padding: 0;
			background-color: transparent;
			color: var(--color-wine-barrel);
			border: 1px solid var(--color-terracotta-rich);
			cursor: pointer;
			font-size: var(--font-size-xl);
			flex-shrink: 0;
			border-radius: var(--radius-sm);
			text-transform: none;

			&:hover {
				background-color: var(--color-terracotta-rich);
				color: var(--color-cream);
			}
		}
	}

	.main-content {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		background-color: var(--color-bg-base);
		overflow: hidden;
		position: relative;

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

	#app {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		max-width: 100%;
		width: 100%;
		margin: 0;
		overflow: hidden;

		@media (max-width: 767px) {
			display: block;
			overflow: visible;
		}
	}

	wine-list,
	chat-assistant,
	wine-table-view {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		min-height: 0;

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

	settings-index-view,
	settings-taste-profile-view,
	settings-ai-details-view,
	settings-embeddings-view,
	settings-appearance-view,
	chat-list-view,
	search-list-view,
	search-detail-view,
	tasting-history-view,
	sync-view,
	csv-import,
	home-view {
		flex-grow: 1;
		overflow-y: auto;
		min-height: 0;

		@media (max-width: 767px) {
			overflow-y: visible;
		}
	}

	.main-nav {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow-y: auto;
		min-height: 0;

		section {
			margin-block-end: var(--space-6); /* 24px = 1 baseline */

			&:last-child {
				margin-block-end: 0;
			}
		}

		a {
			color: var(--color-text-secondary);
			text-decoration: none;
			padding: var(--space-3) var(--space-5);
			padding-inline-end: calc(var(--space-5) - 2px);
			margin-block-end: 0;
			display: block;
			font-size: var(--font-size-base);
			font-weight: var(--font-weight-medium);
			transition:
				background-color var(--transition-fast),
				color var(--transition-fast);
			border-inline-end: 2px solid transparent;
			letter-spacing: var(--letter-spacing-wide);

			&:hover {
				background-color: var(--color-sand-dark);
				color: var(--color-text-heading);
			}

			&.active {
				background-color: var(--color-sand);
				font-weight: var(--font-weight-semibold);
				color: var(--color-wine-barrel);
				border-inline-end: 2px solid var(--color-terracotta-rich);
			}
		}
	}

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

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

	.sidebar-user-email {
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		letter-spacing: 0.01em;
	}

	.sidebar-footer-icons {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		flex-shrink: 0;
	}

	.sign-out-button,
	.sidebar-icon-btn {
		flex-shrink: 0;
		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);
		text-decoration: none;
		position: relative;
		transition: color var(--transition-fast);

		&:hover {
			color: var(--color-wine-barrel);
			background: none;
		}
	}

	.nav-section-title {
		font-family: var(--font-body);
		font-size: var(--font-size-sm);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-widest);
		color: var(--color-wine-barrel);
		margin-block-end: var(--space-3);
		font-weight: var(--font-weight-semibold);
		padding-inline: var(--space-5);
		text-decoration: underline;
	}

	.chat-link-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-block-end: 0;
		border-inline-end: 2px solid transparent;

		&:hover {
			background-color: var(--color-sand-dark);

			.delete-chat-button {
				display: block;
			}
		}

		&.active {
			background-color: var(--color-sand);
			border-inline-end: 2px solid var(--color-terracotta-rich);
			border-inline-start: none;

			a {
				border-inline-start: none;
				border-inline-end: none;
				color: var(--color-wine-barrel);
			}
		}

		a {
			flex-grow: 1;
			margin-block-end: 0;
			padding: var(--space-3) var(--space-5);
			padding-inline-start: calc(var(--space-5) - 2px);
			border-inline-start: none;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.delete-chat-button {
		background: none;
		border: none;
		border-inline-start: 1px solid var(--color-sand);
		color: var(--color-wine-barrel);
		cursor: pointer;
		font-size: var(--font-size-lg);
		padding-inline: var(--space-3);
		line-height: 1;
		display: none;
		z-index: 1;
		position: relative;
		text-transform: none;
		border-radius: 0;

		&:hover {
			color: var(--color-terracotta-rich);
			background-color: var(--color-sand);
		}
	}

	.topic-edit-input {
		width: 100%;
		background: var(--color-limestone-light);
		border: 1px solid var(--color-terracotta-rich);
		color: var(--color-text-primary);
		padding: var(--space-2) var(--space-3);
		font-size: var(--font-size-base);
		font-family: var(--font-body);
		outline: none;
		border-radius: var(--radius-sm);

		&::placeholder {
			color: var(--color-text-muted);
		}
	}

	#new-chat-button {
		margin-block-end: var(--space-3);
		margin-inline: var(--space-3);
		width: calc(100% - var(--space-3) * 2);
		background: linear-gradient(135deg, var(--color-copper) 0%, var(--color-copper-dark) 100%);
		color: var(--color-cream);
		border: 1px solid var(--color-copper-light);
		font-weight: var(--font-weight-semibold);
		box-shadow: var(--shadow-ink);

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

/* Settings view */
.settings-view {
	overflow-y: visible; /* prevent double scroll — parent custom element handles scrolling */
}

.settings-header {
	margin-block-end: var(--space-6);
}

.settings-tabs {
	display: flex;
	border-block-end: 1px solid var(--color-border-default);
	margin-block-end: var(--space-6);
	gap: 0;
}

.settings-tab {
	background: none;
	border: none;
	border-block-end: 2px solid transparent;
	margin-block-end: -1px;
	padding: var(--space-2) var(--space-5);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
	cursor: pointer;

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

	&.settings-tab--active {
		color: var(--color-text-heading);
		border-block-end-color: var(--color-accent-primary);
	}
}

.settings-body > .settings-section {
	border-block-start: none;
	padding-block-start: 0;
}

.settings-back {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	text-decoration: none;
	display: inline-block;
	margin-block-end: var(--space-4);

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

.settings-title {
	font-size: var(--font-size-3xl);
	color: var(--color-text-heading);
	margin-block-end: 0;
}

.settings-section {
	border-block-start: 1px solid var(--color-border-default);
	padding-block-start: var(--space-6);
}

.settings-section-title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-heading);
	margin: 0 0 var(--space-2);
}

.settings-section-desc {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-5);
	line-height: 1.6;
}

.settings-subsection-title {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-heading);
	margin: var(--space-6) 0 var(--space-2);
}

.settings-prompt-textarea {
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
	font-family: var(--font-mono, monospace);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-snug);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);
	background: var(--color-bg-surface);
	color: var(--color-text-secondary);
	margin-block-end: var(--space-4);

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

.settings-profile-textarea {
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-snug);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);
	background: var(--color-bg-surface);
	color: var(--color-text-primary);
	margin-block-end: var(--space-4);

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

.settings-actions {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.settings-error {
	font-size: var(--font-size-sm);
	color: var(--color-error, #c0392b);
	margin-block-end: var(--space-3);
}

.settings-success {
	font-size: var(--font-size-sm);
	color: var(--color-success, #27ae60);
	margin-block-end: var(--space-3);
}

.ai-regen-summary {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-3);
}

.ai-regen-status-msg {
	font-size: var(--font-size-sm);
	color: var(--color-accent-secondary);
	margin: 0 0 var(--space-3);
}

.ai-regen-list {
	max-height: 60vh;
	overflow-y: auto;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);
	background: var(--color-bg-surface);
}

.ai-regen-row {
	display: grid;
	grid-template-columns: 1.25rem 1fr auto;
	align-items: baseline;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	font-size: var(--font-size-xs);
	border-block-end: 1px solid var(--color-border-subtle, var(--color-border-default));

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

.ai-regen-icon {
	font-size: 0.65rem;
	text-align: center;

	.ai-regen-processing & {
		animation: spin 1s linear infinite;
		display: inline-block;
	}
}

.ai-regen-name {
	color: var(--color-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ai-regen-vintage {
	color: var(--color-text-secondary);
	margin-inline-start: var(--space-1);
}

.ai-regen-err {
	color: var(--color-error, #c0392b);
	font-size: var(--font-size-xs);
	grid-column: 2 / -1;
	word-break: break-word;
}

.ai-regen-pending .ai-regen-icon {
	color: var(--color-text-muted);
}
.ai-regen-processing .ai-regen-icon {
	color: var(--color-accent-secondary);
}
.ai-regen-done .ai-regen-icon {
	color: var(--color-success, #27ae60);
}
.ai-regen-skipped .ai-regen-icon {
	color: var(--color-text-muted);
}
.ai-regen-error .ai-regen-icon {
	color: var(--color-error, #c0392b);
}

.ai-regen-skipped .ai-regen-name {
	color: var(--color-text-muted);
}
.ai-regen-done .ai-regen-name {
	color: var(--color-text-secondary);
}

.settings-loading {
	padding: var(--space-8);
	color: var(--color-text-secondary);
}

.theme-swatches {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.theme-swatch {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	color: var(--color-text-primary);
	padding: var(--space-3) var(--space-4);
	cursor: pointer;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	border-radius: var(--radius-sm);
	transition:
		border-color var(--transition-fast),
		box-shadow var(--transition-fast);

	&:hover {
		border-color: var(--color-accent-primary);
		background: var(--color-bg-surface);
		color: var(--color-text-primary);
		box-shadow: none;
	}

	&.theme-swatch--active {
		border-color: var(--color-accent-primary);
		border-width: 2px;
		color: var(--color-accent-primary);
		font-weight: var(--font-weight-semibold);
	}
}

.theme-swatch-chip {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 1px solid rgba(0, 0, 0, 0.12);
}

.theme-swatch--vineyard .theme-swatch-chip {
	background: linear-gradient(135deg, #e8dfd4 50%, #9b6b4a 50%);
}

.theme-swatch--cellar .theme-swatch-chip {
	background: linear-gradient(135deg, #231f1c 50%, #c8826d 50%);
}

.theme-swatch--verdure .theme-swatch-chip {
	background: linear-gradient(135deg, #f0f4ec 50%, #a85a38 50%);
}

.theme-swatch--pomme .theme-swatch-chip {
	background: linear-gradient(135deg, #faf6e8 50%, #3d6b3a 50%);
}

.theme-swatch--adriatic .theme-swatch-chip {
	background: linear-gradient(135deg, #f4f8fb 50%, #c8826d 50%);
}

/* Animations */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

@keyframes icon-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.icon-spin {
	animation: icon-spin 1s linear infinite;
}

.mobile-bottom-nav {
	display: none;

	@media (max-width: 767px) {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: var(--bottom-nav-height);
		background: var(--color-bg-surface);
		border-top: 1px solid var(--color-border-default);
		z-index: var(--z-header);
		align-items: stretch;
		box-shadow: 0 -2px 8px rgba(58, 47, 38, 0.08);
		view-transition-name: mobile-nav;
	}
}

.mobile-bottom-nav-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-tertiary);
	text-decoration: none;
	padding-block: var(--space-3);
	transition: color var(--transition-fast);
	background: none;
	border: none;
	border-inline-start: 1px solid var(--color-border-default);
	cursor: pointer;

	&:first-child {
		border-inline-start: none;
	}

	&.active {
		color: var(--color-accent-primary);
		background-color: color-mix(in srgb, var(--color-accent-primary) 6%, transparent);
	}

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

.settings-nav-tiles {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border-default);
	background: var(--color-bg-surface);
}

.settings-nav-tile {
	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;
	text-decoration: none;
	color: var(--color-text-primary);
	transition:
		background-color var(--transition-fast),
		border-left-color var(--transition-fast);

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

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

.settings-nav-tile-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.settings-nav-tile-title {
	font-family: var(--font-display);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-heading);
	line-height: var(--line-height-normal);
	letter-spacing: var(--letter-spacing-tight);
	transition: color var(--transition-fast);

	.settings-nav-tile:hover & {
		color: var(--color-copper-dark);
	}
}

.settings-nav-tile-desc {
	font-size: var(--font-size-xs);
	color: var(--color-text-secondary);
}

.home-view {
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}

.home-heading {
	font-size: var(--font-size-3xl);
	color: var(--color-text-heading);
	margin-block-end: var(--space-1);
}

.home-nav-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
	margin-block-start: var(--space-7);

	@media (max-width: 767px) {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2);
	}
}

.home-nav-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-5);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--color-text-primary);
	min-height: 100px;
	text-align: center;
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast);

	&:hover {
		background-color: var(--color-bg-surface);
		border-color: var(--color-accent-primary);
	}
}

.home-nav-tile-icon {
	color: var(--color-accent-primary);
}

.home-nav-tile-title {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-heading);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
}

.home-recent {
	margin-block-start: var(--space-8);
}

.home-recent-title {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	margin: 0 0 var(--space-3);
}

.home-recent-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-block-end: 1px solid var(--color-border-default);
	text-decoration: none;
	color: var(--color-text-primary);

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

.home-wine-thumb {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.home-recent-item-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.home-recent-wine {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-heading);
}

.home-recent-meta {
	font-size: var(--font-size-xs);
	color: var(--color-text-secondary);
}

/* Baseline grid overlay — dev tool, toggled via #baseline-grid-toggle */
/* Uses background-size tiling rather than repeating-linear-gradient to avoid
   calc(rem - px) resolution failures in gradient color-stop positions. */
.baseline-grid-overlay {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
	/* Body baseline — 1px magenta line at bottom of every 24px tile */
	background-image:
		linear-gradient(to bottom, rgba(0, 0, 0, 0) calc(100% - 1px), rgba(200, 0, 80, 0.35) calc(100% - 1px)),
		/* 8px sub-grid — 1px indigo line at bottom of every 8px tile */
		linear-gradient(to bottom, rgba(0, 0, 0, 0) calc(100% - 1px), rgba(50, 80, 200, 0.12) calc(100% - 1px));
	background-size:
		100% var(--line-height-normal),
		100% var(--baseline);
	background-repeat: repeat;
	display: none;
}

html.baseline-grid-active .baseline-grid-overlay {
	display: block;
}

.baseline-grid-toggle {
	&.baseline-grid-toggle--active {
		color: rgba(200, 0, 80, 0.7);
	}
}

/* Narrow view container — canonical layout for all single-column content views.
   Apply this class to the root content div of every narrow view.
   Never hand-roll width, max-width, or padding-block/inline on a view root. */
.narrow-view {
	width: var(--content-narrow-width);
	max-width: 100%;
	padding-block-start: var(--space-6);
	padding-inline: var(--space-6);

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

/* View header — shared heading block for all narrow views */
.view-header {
	margin-bottom: var(--space-6);

	h1 {
		font-size: var(--font-size-3xl);
		/* Push cap-top down so the baseline aligns with the sidebar h1 (font-size-4xl).
		   The sidebar uses padding-block-start equal to .narrow-view, but its h1 is 4/3×
		   larger, so its cap extends further down. The correction is 1cap × (4/3 − 1) = 1cap/3
		   where 1cap is measured at this element's own font-size (font-size-3xl). */
		padding-block-start: calc(1cap / 3);
		margin-block-end: var(--space-2);
	}

	.view-description {
		font-size: var(--font-size-base);
		color: var(--color-text-secondary);
		margin: 0;
	}
}

.btn-primary {
	background: var(--color-copper);
	border: 1px solid var(--color-copper-dark);
	color: var(--color-text-inverse);
	padding: var(--space-2) var(--space-3);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		transform var(--transition-fast),
		box-shadow var(--transition-fast);

	&:hover {
		background-color: var(--color-copper-dark);
		border-color: var(--color-copper-darker);
		box-shadow: var(--shadow-md);
	}
}

.btn-secondary {
	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);
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast);

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

.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--line-height-normal);
	background: none;
	border: none;
	padding: 0 var(--space-2);
	cursor: pointer;
	color: var(--color-text-secondary);
	border-radius: var(--radius-sm);
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast);

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

.list-empty {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	padding: var(--space-3) var(--space-5);
	margin: 0;

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

.list-filter-input {
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);
	background: var(--color-bg-surface);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);

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

	&::placeholder {
		color: var(--color-text-muted);
		font-style: italic;
	}

	&:disabled {
		opacity: 0.5;
	}
}

@layer utilities {
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
}