/* Meal Planner — editorial luxury + brutalist information architecture */

@layer components {
	/* ─── Mobile host elements: establish height chain for scroll-snap ─── */
	/* base.css sets these to display:block / overflow-y:visible on mobile,
	   breaking the height:100% chain. Give them an explicit svh-based height
	   so the inner scroll-snap container resolves correctly. */

	@media (width <= 767px) {
		meal-planner-view,
		recipe-view {
			display: block; /* custom elements default to inline; height has no effect on inline */
			height: calc(100svh - var(--bottom-nav-height));
			overflow: hidden;

			body.keyboard-open & {
				height: 100svh;
			}
		}
	}

	/* ─── Split layout (MealPlannerView + RecipeView) ─── */

	.meals-layout,
	.recipe-layout {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;

		@media (width <= 767px) {
			height: calc(100svh - var(--bottom-nav-height));
		}
	}

	/* ─── Panels scroll container (holds chat + content side by side) ─── */

	.meals-panels,
	.recipe-panels {
		display: flex;
		flex: 1;
		min-height: 0;
		overflow: hidden;

		@media (width <= 767px) {
			overflow-x: scroll;
			overflow-y: hidden;
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;
		}
	}

	/* ─── Chat panel (shared by week and recipe views) ─── */

	.meals-chat-panel,
	.recipe-chat-panel {
		order: -1; /* appears left of content on desktop */
		border-inline-end: 1px solid var(--color-border-default);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: var(--color-cream-dark);
		flex: 1 1 375px;
		max-width: 720px;
		min-width: 0;

		@media (width <= 767px) {
			order: 0; /* natural DOM order on mobile: content first, chat second */
			flex-basis: 100vw;
			flex-shrink: 0;
			max-width: 100vw;
			height: 100%;
			overflow-y: auto;
			overflow-x: hidden;
			scroll-snap-align: start;
			border-inline-end: none;
		}
	}

	@media (width >= 1035px) {
		.meals-chat-panel,
		.meals-week-panel,
		.recipe-chat-panel,
		.recipe-doc-panel {
			min-width: 375px;
		}
	}

	.meals-chat-header,
	.recipe-chat-header {
		display: flex;
		align-items: center;
		min-height: var(--space-10);
		padding-inline: var(--space-5);
		background: var(--color-bg-surface);
		border-block-end: 1px solid var(--color-border-default);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-bold);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		color: var(--color-text-muted);
		flex-shrink: 0;
	}

	.chat-window {
		flex: 1;
		overflow-y: auto;
		min-height: 0;
	}

	.meals-chat-panel .chat-window,
	.recipe-chat-panel .chat-window {
		padding-inline: var(--space-4);
	}

	.meals-chat-panel .chat-form,
	.recipe-chat-panel .chat-form {
		padding-inline-start: var(--space-4);
		padding-inline-end: calc(var(--space-4) + var(--scrollbar-width));
	}

	.recipe-chat-context-toggles {
		display: flex;
		flex-shrink: 0;
		gap: var(--space-3);
		align-items: center;
		padding: var(--space-2) var(--space-3);
		border-block-start: 1px solid var(--color-border-default);

		chat-form & {
			border-block-start: none;
			padding-inline: 0;
			padding-block-end: 0;
		}
	}

	.recipe-chat-toggle {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
		cursor: pointer;
		transition: color var(--transition-fast);

		input[type="checkbox"] {
			accent-color: var(--color-accent-primary);
			cursor: pointer;
		}

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

	.chat-panel-header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-inline: var(--space-3);
	}

	.chat-menu-btn {
		anchor-name: --chat-menu-anchor;
		font-size: var(--font-size-base);
		color: var(--color-text-muted);
		background: none;
		border: none;
		padding: var(--space-1) var(--space-2);
		cursor: pointer;
		border-radius: var(--radius-sm);
		line-height: 1;
		transition: color var(--transition-fast);

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

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

	.chat-menu-popover {
		position: fixed;
		position-anchor: --chat-menu-anchor;
		top: anchor(bottom);
		left: anchor(center);
		translate: -50% 0;
		margin: var(--space-1) 0 0;
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-md);
		min-width: 160px;
		padding: var(--space-1);
	}

	.chat-menu-item {
		display: block;
		width: 100%;
		text-align: start;
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-wide);
		padding: var(--space-2) var(--space-3);
		border-radius: var(--radius-sm);
		color: var(--color-text-primary);
		transition: background var(--transition-fast);

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

		&.chat-menu-item--danger {
			color: var(--color-error);
		}
	}

	.chat-menu-confirm-text {
		display: block;
		font-size: var(--font-size-xs);
		color: var(--color-text-secondary);
		padding: var(--space-2) var(--space-3) var(--space-1);
	}

	.chat-menu-confirm-actions {
		display: flex;
		gap: var(--space-1);
	}

	.meals-chat-panel,
	.recipe-chat-panel {
		.message {
			padding: var(--space-4);
			font-size: var(--font-size-sm);
			line-height: var(--line-height-normal);

			&.user {
				background: var(--color-bg-surface);
				border: 1px solid var(--color-border-default);
				border-inline-start: 3px solid var(--color-slate, var(--color-text-muted));
			}

			&.assistant {
				background: var(--color-bg-surface);
				border: 1px solid var(--color-border-default);
				border-inline-start: 3px solid var(--color-accent-primary);
			}

			&.thinking,
			&.error {
				padding: var(--space-3) var(--space-4);
				border: 1px solid var(--color-border-subtle);
			}

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

		.message-header {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			margin-block-end: var(--space-2);
			padding-block-end: var(--space-2);
			border-block-end: 1px solid var(--color-border-subtle);

			strong {
				font-size: var(--font-size-sm);
				font-weight: var(--font-weight-bold);
				letter-spacing: var(--letter-spacing-wide);
				text-transform: uppercase;
				color: var(--color-text-muted);
			}
		}

		.message-timestamp {
			font-family: var(--font-mono);
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}

		.message-content {
			font-size: var(--font-size-sm);
			line-height: var(--line-height-normal);
			color: var(--color-text-primary);

			p {
				margin-block: 0;
			}
		}
	}

	/* ─── Week panel ─── */

	.meals-week-panel {
		flex: 1 1 375px;
		min-width: 0;
		max-width: 720px;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		@media (width <= 767px) {
			flex-basis: 100vw;
			flex-shrink: 0;
			max-width: 100vw;
			overflow-y: auto;
			overflow-x: hidden;
			scroll-snap-align: start;
		}
	}

	.meals-week-header {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		padding: var(--space-4) var(--space-6);
		min-height: var(--height-3-baselines);
		background: var(--color-bg-surface);
		border-block-end: 1px solid var(--color-border-default);
		flex-shrink: 0;

		@media (width <= 767px) {
			flex-wrap: wrap;
			align-items: center;
			gap: 0 var(--space-2);
			padding-block: var(--space-1);
			padding-inline: var(--space-3);
			min-height: unset;
		}
	}

	.meals-week-title {
		flex: 1;
		min-width: 0;
		font-family: var(--font-display);
		font-size: var(--font-size-xl);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-heading);
		letter-spacing: var(--letter-spacing-tight);
		line-height: 1;
		margin: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

		@media (width <= 767px) {
			font-size: var(--font-size-sm);
			font-family: var(--font-body);
			font-weight: var(--font-weight-semibold);
			letter-spacing: var(--letter-spacing-normal);
			padding-block: var(--space-2);
		}
	}

	.meals-nav-btn {
		width: var(--space-7);
		height: var(--space-7);
		font-size: var(--font-size-lg);
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.meals-week-meta {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		flex-shrink: 0;

		@media (width <= 767px) {
			width: 100%;
			justify-content: flex-end;
			padding-block: var(--space-1);
			border-block-start: 1px solid var(--color-border-subtle);
		}
	}

	.meals-people-btn {
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		color: var(--color-text-muted);
		background: none;
		border: 1px solid transparent;
		border-radius: var(--radius-sm);
		padding: 0 var(--space-1);
		cursor: pointer;
		transition:
			color var(--transition-fast),
			border-color var(--transition-fast);

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

		&:active {
			scale: 0.92;
		}

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

	.meals-people-edit {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);

		.meals-day-header & {
			margin-inline-end: auto;
		}
	}

	.meals-people-input {
		width: 36px;
		text-align: center;
		font-size: var(--font-size-sm);
		padding: var(--space-1);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-sm);
		background: var(--color-bg-surface);
		color: var(--color-text-primary);
	}

	.meals-people-sep {
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
	}

	.meals-people-ok {
		font-size: var(--font-size-xs);
		color: var(--color-accent-primary);
		padding: 0 var(--space-1);

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

	.meals-week-more-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border: 1px solid transparent;
		border-radius: var(--radius-sm);
		color: var(--color-text-muted);
		font-size: var(--font-size-base);
		line-height: 1;
		cursor: pointer;
		transition:
			color var(--transition-fast),
			border-color var(--transition-fast);

		&:hover {
			color: var(--color-text-secondary);
			border-color: var(--color-border-default);
			box-shadow: var(--shadow-ink);
		}

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

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

	.meals-week-action-menu {
		position: fixed;
		top: calc(var(--height-2-baselines) + var(--space-1));
		right: var(--space-3);
		inset-inline-start: auto;
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-md);
		min-width: 160px;
		padding: var(--space-1);
		margin: 0;
	}

	.meals-week-action-item {
		display: block;
		width: 100%;
		text-align: start;
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-semibold);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		padding: var(--space-3) var(--space-4);
		border-radius: var(--radius-sm);
		color: var(--color-text-primary);
		transition: background var(--transition-fast);

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

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

		&.meals-week-action-item--danger {
			color: var(--color-error);
		}
	}

	.meals-delete-week-confirm {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-2) var(--space-6);
		background: var(--color-warning-bg);
		border-block-end: 1px solid var(--color-border-default);
		flex-shrink: 0;
		font-size: var(--font-size-sm);

		&[hidden] {
			display: none;
		}

		@media (width <= 767px) {
			padding-inline: var(--space-3);
			flex-wrap: wrap;
			gap: var(--space-2);
		}
	}

	.meals-delete-week-confirm-msg {
		flex: 1;
		color: var(--color-text-secondary);
	}

	/* ─── Week grid (7-column) ─── */

	.meals-grid {
		flex: 1;
		overflow-y: auto;
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		background: transparent;
		align-content: start;

		@media (width <= 767px) {
			/* Panel is the scroll container on mobile; let grid expand to natural height */
			flex: none;
			overflow-y: visible;
			min-height: unset;
		}
	}

	.meals-day {
		background: var(--color-bg-surface);
		padding: 0;
		display: flex;
		flex-direction: column;
		border-block-end: 1px solid var(--color-border-subtle);

		&.meals-day--today {
			border-inline-start: 3px solid var(--color-accent-primary);
		}
	}

	.meals-day-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-3) var(--space-4);
		background: var(--color-bg-base);
		box-shadow: 0 1px 0 var(--color-border-default);

		.meals-day--today & {
			background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-bg-base));
		}
	}

	.meals-day-household {
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
		background: none;
		border: 1px solid transparent;
		border-radius: var(--radius-sm);
		padding: 0 var(--space-1);
		cursor: pointer;
		margin-inline-start: var(--space-2);
		margin-inline-end: auto;

		transition:
			color var(--transition-fast),
			border-color var(--transition-fast);

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

		&:active {
			scale: 0.95;
		}

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

	.meals-day-name {
		font-size: var(--font-size-base);
		font-weight: var(--font-weight-bold);
		letter-spacing: var(--letter-spacing-wider);
		text-transform: uppercase;
		color: var(--color-text-primary);

		.meals-day--today & {
			color: var(--color-accent-primary);
		}
	}

	.meals-day-date {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-normal);
		letter-spacing: normal;
		text-transform: none;
		color: var(--color-text-secondary);
		margin-inline-start: var(--space-2);

		.meals-day--today & {
			color: var(--color-accent-primary);
		}
	}

	.meals-day-body {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		padding: var(--space-3) var(--space-4);
	}

	.meals-course-wrapper {
		display: flex;
		flex-direction: column;
	}

	.meals-course-slot-row {
		position: relative;
	}

	.meals-course-delete {
		position: absolute;
		top: 0;
		right: 0;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: none;
		color: var(--color-text-muted);
		font-size: var(--font-size-sm);
		line-height: 1;
		cursor: pointer;
		opacity: 0;
		transition:
			opacity var(--transition-fast),
			color var(--transition-fast);

		.meals-course-wrapper:hover & {
			opacity: 1;
		}

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

		&:active {
			color: var(--color-error);
			opacity: 1;
		}

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

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

	.meals-course-wrapper--confirming {
		padding: var(--space-2) var(--space-3);
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-default);
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.meals-course-confirm-msg {
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
	}

	.meals-course-confirm-actions {
		display: flex;
		gap: var(--space-2);
		flex-wrap: wrap;
	}

	.meals-course-confirm-btn {
		padding: var(--space-1) var(--space-3);
		font-size: var(--font-size-sm);

		&.meals-course-confirm-btn--cancel {
			color: var(--color-text-muted);

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

	.meals-course-label {
		align-self: flex-start;
		background: none;
		border: none;
		padding: 0;

		&:not(.meals-course-label--empty) {
			line-height: var(--line-height-normal);
		}
		font-family: var(--font-body);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-semibold);
		letter-spacing: var(--letter-spacing-normal);
		text-transform: none;
		color: var(--color-text-muted);
		cursor: pointer;
		text-align: start;
		transition: color var(--transition-fast);

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

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

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

		&.meals-course-label--empty {
			opacity: 0;
			transition: opacity var(--transition-fast);
		}
	}

	.meals-course-wrapper:hover .meals-course-label--empty {
		opacity: 1;
	}

	.meals-course-label-input {
		font-size: var(--font-size-sm);
	}

	.meals-course-rename-input {
		width: 100%;
		padding: var(--space-2) var(--space-3);
		border: 1px solid var(--color-accent-primary);
		box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
		background: var(--color-bg-surface);
		color: var(--color-text-primary);
		font-family: var(--font-body);
		font-size: var(--font-size-sm);

		&:focus {
			outline: none;
		}
	}

	.meals-course-slot {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		padding: var(--space-2) var(--space-3);
		min-height: var(--height-2-baselines); /* body-pad + slot + body-pad = 3 baselines */
		width: 100%;
		appearance: none;
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-subtle);
		color: var(--color-text-primary);
		text-decoration: none;
		text-align: start;
		text-transform: none;
		font-family: inherit;
		font-size: var(--font-size-base);
		cursor: pointer;
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast),
			box-shadow var(--transition-fast);

		&:has(.meals-course-thumb) {
			flex-direction: row;
			align-items: center;
			gap: var(--space-3);
			padding: 0;
			padding-inline-end: var(--space-3);
			min-height: var(--height-3-baselines); /* body-pad + slot + body-pad = 4 baselines */
		}

		&:hover {
			background: var(--color-bg-hover);
			border-inline-start-color: var(--color-copper-light);
		}

		&:active {
			box-shadow: var(--shadow-ink);
			transform: none;
		}

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

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

	.meals-course-slot--readonly {
		cursor: default;
		pointer-events: none;
	}

	.meals-course-no-recipe-note {
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
	}

	.meals-course-name {
		display: inline-flex;
		align-items: center;
		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: var(--line-height-normal);
		flex: 1;
		min-width: 0;
	}

	.meals-course-thumb {
		width: calc(
			var(--height-3-baselines) -
			2px
		); /* 70px: slot min-height minus top/bottom borders for 1:1 render */
		align-self: stretch;
		flex-shrink: 0;
		object-fit: cover;
		display: block;

		&[hidden] {
			display: none;
		}
	}

	.meals-course-placeholder {
		color: var(--color-text-muted);
		font-style: italic;
	}

	.meals-add-course {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		padding: var(--space-1) var(--space-3);
		background: none;
		border: 1px dashed var(--color-border-subtle);
		color: var(--color-text-muted);
		font-family: inherit;
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		letter-spacing: var(--letter-spacing-wide);
		cursor: pointer;
		text-align: start;
		transition:
			background-color var(--transition-fast),
			color var(--transition-fast),
			border-color var(--transition-fast);

		&:hover {
			background: var(--color-bg-hover);
			border-color: var(--color-border-default);
			color: var(--color-text-secondary);
		}

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

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

	.meals-day-notes {
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
	}

	.meals-add-course--compact {
		width: var(--space-6);
		height: var(--space-6);
		font-size: var(--font-size-base);
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* ─── Week CTA (empty week) ─── */

	.meals-week-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-5) var(--space-6);
		background: var(--color-bg-surface);
		border-block-end: 1px solid var(--color-border-default);
		flex-shrink: 0;

		&[hidden] {
			display: none;
		}
	}

	.meals-lucky-btn {
		padding: var(--space-3) var(--space-7);
	}

	/* ─── Recipe document panel ─── */

	.recipe-doc-panel {
		flex: 1 1 375px;
		min-width: 0;
		max-width: 720px;
		overflow-y: auto;
		background: var(--color-bg-surface);
		padding: var(--space-6);
		display: flex;
		flex-direction: column;
		gap: var(--space-6);

		@media (width <= 767px) {
			flex-basis: 100vw;
			flex-shrink: 0;
			max-width: 100vw;
			overflow-x: hidden;
			scroll-snap-align: start;
			padding: var(--space-4);
		}
	}

	/* ─── Recipe shared header ─── */

	.recipe-header {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		padding: var(--space-3) var(--space-5);
		background: var(--color-bg-surface);
		border-block-end: 1px solid var(--color-border-default);
		flex-shrink: 0;
		min-height: var(--space-10);

		@media (width <= 767px) {
			min-height: var(--height-2-baselines);
			padding: var(--space-2) var(--space-3);
		}
	}

	.recipe-header .recipe-back-link {
		flex-shrink: 0;
	}

	.recipe-header .recipe-title {
		flex: 1;
		min-width: 0;
		font-size: var(--font-size-lg);
		line-height: var(--line-height-normal);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		border-block-end: 1px solid transparent;

		&:focus {
			border-block-end-color: var(--color-accent-primary);
			white-space: normal;
			overflow: visible;
			text-overflow: unset;
		}
	}

	.recipe-day-label {
		display: none;
	}

	.recipe-header-spacer {
		display: none;
	}

	.recipe-day-nav {
		display: none;
	}

	@media (width >= 768px) {
		.recipe-header--week .recipe-title {
			flex: 0 1 auto;
		}

		.recipe-header--week .recipe-day-label {
			display: block;
			flex-shrink: 0;
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-medium);
			color: var(--color-text-secondary);
		}

		.recipe-header--week .recipe-header-spacer {
			display: block;
			flex: 1;
		}

		.recipe-header--week .recipe-day-nav {
			display: flex;
			align-items: center;
			gap: var(--space-1);
		}
	}

	.recipe-day-nav-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--space-8);
		height: var(--space-8);
		font-size: var(--font-size-lg);
		color: var(--color-text-muted);
		text-decoration: none;
		border-radius: var(--radius-sm);

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

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

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

		&[aria-disabled] {
			color: var(--color-text-muted);
			pointer-events: none;
		}
	}

	/* ─── Recipe doc header (status + actions row, inside doc panel) ─── */

	.recipe-doc-header {
		display: none;
	}

	.recipe-error {
		padding: var(--space-4);
		background: var(--color-error-bg);
		color: var(--color-error);
		font-size: var(--font-size-sm);
	}

	.recipe-back-link {
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		color: var(--color-text-muted);
		text-decoration: none;
		transition: color var(--transition-fast);

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

		@media (width <= 767px) {
			.recipe-back-label {
				display: none;
			}
		}
	}

	.recipe-status {
		font-weight: var(--font-weight-bold);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;

		&.recipe-status--draft {
			color: var(--color-info);
		}

		&.recipe-status--planned {
			color: var(--color-copper-dark);
		}

		&.recipe-status--cooked {
			color: var(--color-success);
		}
	}

	.recipe-cover-section {
		display: flex;
		gap: var(--space-5);
		align-items: flex-start;

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

	.recipe-cover-image {
		flex: 2 1 22rem;
		max-width: 640px;

		@media (width <= 767px) {
			width: 100%;
			flex: none;
		}
	}

	.recipe-cover-img {
		display: block;
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		cursor: zoom-in;
		grid-area: 1 / 1;
	}

	.recipe-cover-carousel {
		overflow-x: auto;
		display: flex;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.recipe-cover-slide {
		flex: 0 0 100%;
		scroll-snap-align: start;
		display: grid;
	}

	.recipe-cover-slide-label {
		grid-area: 1 / 1;
		position: sticky;
		left: var(--space-2);
		align-self: end;
		justify-self: start;
		margin-bottom: var(--space-2);
		background: rgba(0, 0, 0, 0.5);
		color: var(--color-text-inverse);
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-medium);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		padding: var(--space-1) var(--space-2);
		border-radius: var(--radius-sm);
		pointer-events: none;
	}

	.recipe-cover-delete-btn {
		grid-area: 1 / 1;
		position: sticky;
		right: var(--space-2);
		align-self: start;
		justify-self: end;
		margin-top: var(--space-2);
		opacity: 0;
		transition: opacity var(--transition-base);
		background: rgba(0, 0, 0, 0.55);
		color: var(--color-text-inverse);
		border: none;
		border-radius: var(--radius-sm);
		width: 1.75rem;
		height: 1.75rem;
		font-size: var(--font-size-base);
		line-height: 1;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;

		&:hover {
			background: rgba(0, 0, 0, 0.75);
		}

		&:active {
			background: rgba(0, 0, 0, 0.9);
		}

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

	.recipe-cover-slide:hover .recipe-cover-delete-btn {
		opacity: 1;
	}

	.recipe-cover-slide-confirm-overlay {
		grid-area: 1 / 1;
		display: none;
		align-items: center;
		justify-content: center;
		gap: var(--space-3);
		background: rgba(0, 0, 0, 0.65);

		& .btn-danger,
		& .btn-secondary {
			min-width: 6rem;
			height: 2.5rem;
		}
	}

	.recipe-cover-slide--confirming {
		& .recipe-cover-slide-confirm-overlay {
			display: flex;
		}

		& .recipe-cover-delete-btn,
		& .recipe-cover-label-pill,
		& .recipe-cover-img {
			pointer-events: none;
		}
	}

	.recipe-cover-label-pill {
		pointer-events: auto;
		cursor: text;
	}

	.recipe-cover-label-pill:empty::after {
		content: "Beskrivelse\2026";
		opacity: 0.45;
	}

	.recipe-cover-label-edit-input {
		grid-area: 1 / 1;
		position: sticky;
		left: var(--space-2);
		align-self: end;
		justify-self: start;
		margin-bottom: var(--space-2);
		background: rgba(0, 0, 0, 0.65);
		color: var(--color-text-inverse);
		border: 1px solid rgba(255, 255, 255, 0.4);
		border-radius: var(--radius-sm);
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-medium);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		padding: var(--space-1) var(--space-2);
		width: 10rem;
		outline: none;

		&:focus-visible {
			border-color: rgba(255, 255, 255, 0.8);
		}
	}

	.image-lightbox {
		background: transparent;
		border: none;
		padding: 0;
		margin: auto;
		max-width: 100vw;
		max-height: 100dvh;
		overflow: hidden;
		cursor: zoom-out;

		&::backdrop {
			background-color: var(--color-bg-overlay-dark);
		}

		&:focus-visible {
			outline: none;
		}
	}

	.image-lightbox-img {
		display: block;
		max-width: 92vw;
		max-height: 92dvh;
		object-fit: contain;
	}

	.recipe-cover-sidebar {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		flex: 0 0 auto;
		min-width: 10rem;

		& > .btn-secondary,
		& > .recipe-cooking-btn,
		& > .recipe-upload-image-label {
			width: 100%;
			text-align: center;
			display: block;
		}

		& > .recipe-upload-image-label > .btn-secondary {
			display: block;
			width: 100%;
			text-align: center;
		}

		@media (width <= 767px) {
			flex-direction: row;
			flex-wrap: wrap;
			min-width: 0;

			& > .btn-secondary,
			& > .recipe-cooking-btn,
			& > .recipe-upload-image-label {
				width: auto;
				display: inline-block;
			}

			& > .recipe-upload-image-label > .btn-secondary {
				display: inline-block;
				width: auto;
			}
		}
	}

	.recipe-cover-section:not(:has(.recipe-cover-image)) .recipe-cover-sidebar {
		flex-direction: row;
		flex-wrap: wrap;
		min-width: 0;
		max-width: 100%;

		& > .btn-secondary,
		& > .recipe-upload-image-label {
			width: auto;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		& > .recipe-upload-image-label > .btn-secondary {
			display: inline-flex;
			align-items: center;
			width: auto;
		}

		& > .recipe-cover-status,
		& > .recipe-cover-error {
			display: flex;
			align-items: center;
		}
	}

	.recipe-cover-status {
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
		font-style: italic;
	}

	.recipe-cover-error {
		font-size: var(--font-size-sm);
		color: var(--color-error);
	}

	.recipe-cover-dialog {
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-md);
		padding: var(--space-6);
		width: min(40rem, 90vw);
		background: var(--color-bg-base);
		box-shadow: var(--shadow-xl);

		&::backdrop {
			background-color: var(--color-bg-overlay-dark);
		}
	}

	.recipe-cover-dialog-title {
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-wide);
		color: var(--color-text-secondary);
		margin: 0 0 var(--space-4);
	}

	.recipe-cover-prompt-input {
		width: 100%;
		resize: vertical;
		font-size: var(--font-size-sm);
	}

	.recipe-cover-suggest-row {
		margin-block-start: var(--space-3);
	}

	.recipe-cover-dialog-actions {
		display: flex;
		gap: var(--space-3);
		margin-block-start: var(--space-4);
	}

	.recipe-remove-week-dialog {
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-md);
		padding: var(--space-6);
		width: min(28rem, 90vw);
		background: var(--color-bg-base);
		box-shadow: var(--shadow-xl);

		&::backdrop {
			background-color: var(--color-bg-overlay-dark);
		}
	}

	.recipe-remove-week-actions {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.recipe-remove-week-btn--danger {
		color: var(--color-error);

		&:hover {
			color: var(--color-error);
			background: color-mix(in srgb, var(--color-error) 8%, transparent);
		}

		&:active {
			background: color-mix(in srgb, var(--color-error) 14%, transparent);
		}
	}

	.recipe-remove-week-date-row {
		display: flex;
		gap: var(--space-2);
		align-items: center;
	}

	.recipe-remove-week-date-input {
		font-family: var(--font-body);
		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);
		padding: var(--space-1) var(--space-2);
		flex: 1 1 auto;
	}

	.recipe-error-inline {
		font-size: var(--font-size-sm);
		color: var(--color-error);
		margin: 0;
	}

	.recipe-doc-header {
		display: flex;
		flex-direction: column;
		gap: 0;

		@media (width <= 767px) {
			display: none;
		}
	}

	.recipe-doc-kicker {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-bold);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		color: var(--color-text-muted);
		margin: 0;

		& a {
			color: inherit;
			text-decoration: none;

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

	.recipe-doc-title {
		font-family: var(--font-display);
		font-size: var(--font-size-display);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-heading);
		letter-spacing: var(--letter-spacing-tight);
		line-height: 1;
		margin: 0;
	}

	.recipe-title {
		font-family: var(--font-display);
		font-size: var(--font-size-display);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-heading);
		letter-spacing: var(--letter-spacing-tight);
		line-height: 1;
		margin: 0;
		padding: 0;
		border: none;
		outline: none;
		background: none;
		cursor: text;
		border-block-end: 1px solid transparent;
		transition: border-color var(--transition-fast);

		&:focus {
			border-block-end-color: var(--color-accent-primary);
		}
	}

	.recipe-meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-4) var(--space-7);
	}

	.recipe-servings-people {
		display: flex;
		align-items: center;
		gap: var(--space-1);
	}

	.recipe-servings-sep {
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
	}

	.recipe-servings-input {
		font-family: var(--font-body);
		font-size: var(--font-size-sm);
		color: var(--color-text-primary);
		width: 40px;
		border: 1px solid var(--color-border-default);
		background: var(--color-bg-surface);
		padding: 0 0 0 var(--space-2);
		transition:
			border-color var(--transition-fast),
			box-shadow var(--transition-fast);

		&:focus {
			outline: none;
			border-color: var(--color-accent-primary);
			box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
		}
	}

	/* ─── Recipe rating ─── */

	.recipe-rating {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		padding: var(--space-4) 0 var(--space-4) var(--space-3);
		border-top: 1px solid var(--color-border-subtle);
		border-left: 3px solid transparent;
		cursor: pointer;
		transition:
			background-color var(--transition-fast),
			border-left-color var(--transition-fast);

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

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

		&.recipe-rating--empty {
			border-left-style: dashed;

			&:hover {
				border-left-color: var(--color-copper);
				border-left-style: solid;
			}
		}

		&.recipe-rating--editing {
			cursor: default;
			background: var(--color-cream-dark);
			border-left-color: var(--color-copper);
			gap: var(--space-3);
			padding-right: var(--space-4);

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

	.recipe-rating-invite {
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
		font-style: italic;
	}

	.recipe-rating-stars {
		display: flex;
		gap: var(--space-1);
		font-size: var(--font-size-xl);
		line-height: 1;
	}

	.recipe-star {
		color: var(--color-border-default);
	}

	.recipe-star--filled {
		color: var(--color-copper);
	}

	.recipe-rating-note {
		margin: 0;
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
		line-height: var(--line-height-normal);
	}

	.recipe-rating-note-input {
		width: 100%;
		box-sizing: border-box;
		resize: vertical;
		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: 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-accent-primary);
			box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
		}
	}

	.recipe-rating-edit-actions {
		display: flex;
		gap: var(--space-3);
		align-items: center;

		button {
			padding: var(--space-2) var(--space-3);
			font-size: var(--font-size-sm);
		}
	}

	/* ─── Recipe sections ─── */

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

	.recipe-section-title {
		font-size: var(--font-size-base);
		font-weight: var(--font-weight-bold);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		color: var(--color-text-primary);
	}

	.recipe-section-header {
		border-block-end: 1px solid var(--color-border-default);
	}

	.recipe-generate-cta {
		display: flex;
		justify-content: center;
		padding: var(--space-8) var(--space-6);
	}

	.recipe-generate-btn {
		padding: var(--space-3) var(--space-7);
		background: var(--color-accent-primary);
		color: var(--color-text-inverse);
		border: 1px solid var(--color-copper-dark);
		font-family: var(--font-body);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		cursor: pointer;
		transition:
			background-color var(--transition-fast),
			box-shadow var(--transition-fast);

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

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

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

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

	/* Ingredients */

	.recipe-ingredient-category {
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-semibold);
		letter-spacing: var(--letter-spacing-wider);
		text-transform: uppercase;
		color: var(--color-text-tertiary);
		margin-block-start: var(--space-6);

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

	.recipe-ingredient-row {
		display: grid;
		grid-template-columns: 80px 1fr;
		gap: var(--space-3);
		align-items: baseline;
		margin-block-end: -0.5px;
		font-size: var(--font-size-sm);
		line-height: var(--line-height-normal);
		color: var(--color-text-primary);
	}

	.recipe-ingredient-amount {
		font-family: var(--font-mono);
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
		text-align: end;
	}

	.recipe-ingredient-name {
		em {
			color: var(--color-text-muted);
			font-style: italic;
		}
	}

	/* Process steps */

	.recipe-step {
		display: grid;
		grid-template-columns: 28px 1fr;
		gap: var(--space-4);
		align-items: baseline;
	}

	.recipe-step-number {
		font-family: var(--font-display);
		font-size: var(--font-size-xl);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-muted);
		line-height: 1;
		text-align: end;
	}

	.recipe-step-text {
		font-size: var(--font-size-sm);
		color: var(--color-text-primary);
		line-height: var(--line-height-normal);
	}

	.recipe-plating-instructions {
		font-size: var(--font-size-sm);
		color: var(--color-text-primary);
		line-height: var(--line-height-normal);
	}

	.lead-in {
		font-weight: var(--font-weight-semibold);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-wide);
		font-size: var(--font-size-xs);
	}

	/* Wine pairings */

	.recipe-pairing-row {
		padding: var(--space-3) var(--space-4);
		border: 1px solid var(--color-border-default);
		background: var(--color-bg-surface);
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-4);

		& + & {
			border-block-start: none;
		}
	}

	.recipe-pairing-bottle {
		flex-shrink: 0;
		width: 40px;
		height: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.recipe-pairing-bottle-img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.recipe-pairing-bottle-placeholder {
		width: 100%;
		height: 100%;
		color: var(--color-border-strong);
	}

	.recipe-pairing-content {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
	}

	.recipe-pairing-label {
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-bold);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		color: var(--color-text-muted);
		text-decoration: none;

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

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

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

	.recipe-pairing-reasoning {
		font-size: var(--font-size-sm);
		color: var(--color-text-primary);
		line-height: var(--line-height-normal);
		margin: 0;
	}

	.recipe-pairing-note {
		margin-block-start: var(--space-3);
		padding-block-start: var(--space-3);
		border-block-start: 1px solid var(--color-border-subtle);
		display: flex;
		flex-direction: column;
	}

	.recipe-pairing-note-rating {
		display: flex;
		gap: var(--space-2);
		align-items: center;
		flex-wrap: wrap;
	}

	.recipe-pairing-note-text {
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
		line-height: var(--line-height-normal);
		margin: 0;
	}

	.recipe-pairings-subheader {
		padding: var(--space-2) var(--space-4);
		border: 1px solid var(--color-border-default);
		border-block-start: none;
		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-muted);
		background: var(--color-bg-base);
	}

	/* ─── Pantry notes ─── */

	.meals-pantry-notes {
		padding: var(--space-3) var(--space-6);
		border-block-start: 1px solid var(--color-border-default);
		background: var(--color-bg-surface);
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
		line-height: var(--line-height-normal);
		flex-shrink: 0;

		&[hidden] {
			display: none;
		}
	}

	/* ─── Recipe archive view ─── */

	.recipe-archive-header {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--space-4);
	}

	.recipe-new-btn {
		flex-shrink: 0;
		padding: var(--space-2) var(--space-5);
		background: var(--color-accent-primary);
		color: var(--color-text-inverse);
		border: 1px solid var(--color-copper-dark);
		font-family: var(--font-body);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		cursor: pointer;
		transition:
			background-color var(--transition-fast),
			box-shadow var(--transition-fast);

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

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

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

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

	.recipe-filter-tab {
		padding: var(--space-3) var(--space-5);
		background: none;
		border: none;
		border-block-end: 2px solid transparent;
		margin-block-end: -1px;
		font-family: var(--font-body);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-muted);
		cursor: pointer;
		transition:
			color var(--transition-fast),
			border-color var(--transition-fast);

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

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

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

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

	.recipe-list-row {
		display: flex;
		align-items: flex-start;
		border-block-end: 1px solid var(--color-border-subtle);
		border-inline-start: 3px solid transparent;
		transition:
			background-color var(--transition-fast),
			border-inline-start-color var(--transition-fast);

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

		&:hover {
			background: var(--color-bg-hover);
			border-inline-start-color: var(--color-copper);
		}
	}

	.recipe-list-link {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		padding: var(--space-4) var(--space-5);
		text-decoration: none;
		color: inherit;
		min-width: 0;
	}

	.recipe-list-name-row {
		display: flex;
		align-items: baseline;
		gap: var(--space-3);
	}

	.recipe-list-name {
		font-family: var(--font-display);
		font-size: var(--font-size-xl);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-primary);
		line-height: 1;
		letter-spacing: var(--letter-spacing-tight);
		transition: color var(--transition-fast);

		.recipe-list-link:hover & {
			color: var(--color-copper-dark);
		}
	}

	.recipe-list-meta {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-1) var(--space-3);
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
	}

	.recipe-list-date {
		font-family: var(--font-mono);
		letter-spacing: var(--letter-spacing-wide);
	}

	.recipe-list-variation {
		display: block;
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
		font-style: italic;
	}

	.recipe-clone-btn {
		align-self: center;
		flex-shrink: 0;
		margin-inline-end: var(--space-4);
		font-size: var(--font-size-xs);
		padding: var(--space-1) var(--space-3);
		background: none;
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-sm);
		color: var(--color-text-secondary);
		cursor: pointer;
		white-space: nowrap;
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast),
			color var(--transition-fast);

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

		&:active {
			background: color-mix(in srgb, var(--color-copper) 10%, transparent);
		}

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

	.recipe-delete-btn {
		align-self: center;
		flex-shrink: 0;
		margin-inline-end: var(--space-4);
		font-size: var(--font-size-xs);
		padding: var(--space-1) var(--space-3);
		background: none;
		border: 1px solid transparent;
		border-radius: var(--radius-sm);
		color: var(--color-text-muted);
		cursor: pointer;
		white-space: nowrap;
		transition:
			color var(--transition-fast),
			border-color var(--transition-fast);

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

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

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

	.recipe-delete-popover {
		position-area: top;
		margin-bottom: var(--space-3);
		position-try-fallbacks: --recipe-popover-pin-left;
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-md);
		padding: var(--space-4);
		min-width: 220px;
		max-width: 320px;
	}

	@position-try --recipe-popover-pin-left {
		position-area: left;
		margin-bottom: 0;
		margin-right: var(--space-3);
	}

	.recipe-delete-popover-title {
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-primary);
		margin: 0 0 var(--space-2);
	}

	.recipe-delete-popover-warning {
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
		margin: 0 0 var(--space-3);
		line-height: var(--line-height-normal);
	}

	.recipe-delete-popover-actions {
		display: flex;
		gap: var(--space-2);
	}

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

	.recipe-delete-cancel-btn {
		font-size: var(--font-size-xs);
		padding: var(--space-1) var(--space-3);
		background: none;
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-sm);
		color: var(--color-text-secondary);
		cursor: pointer;
		transition: background-color var(--transition-fast);

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

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

	/* ─── Recipe doc panel — action section (Lag igjen / Planlegg) ─── */

	.recipe-section--actions {
		padding: var(--space-4);
		border-top: 1px solid var(--color-border-subtle);
	}

	.recipe-action-form {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		flex-wrap: wrap;
	}

	.recipe-action-date {
		font-family: var(--font-body);
		font-size: var(--font-size-sm);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-sm);
		padding: var(--space-1) var(--space-2);
		background: var(--color-bg-surface);
		color: var(--color-text-primary);
	}

	.recipe-action-cancel {
		background: none;
		border: none;
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
		cursor: pointer;
		padding: var(--space-1) var(--space-2);
		text-decoration: underline;

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

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

	.recipe-action-confirm {
		font-size: var(--font-size-sm);
		color: var(--color-success);
		margin: 0;

		a {
			color: inherit;
		}
	}

	/* ─── Recipe action dialog (Lag igjen / Planlegg) ─── */

	.recipe-action-dialog {
		max-width: 380px;
		width: 90vw;
	}

	/* ─── Wine picker dialog (Laget og drukket) ─── */

	.wine-picker-dialog {
		max-width: 580px;
		width: 90vw;
		height: min(800px, 85vh);

		@media (width <= 767px) {
			width: 100%;
			max-width: 100%;
			height: 100%;
			max-height: 100%;
			margin: 0;
			border-radius: 0;
		}

		.dialog-body {
			overflow-y: auto;
			min-height: 0;
		}

		.dialog-footer {
			justify-content: flex-start;
		}
	}

	.wine-picker-section {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.wine-picker-paired,
	.wine-picker-search-results {
		display: flex;
		flex-direction: column;
		border: 1px solid var(--color-border-default);
		background: var(--color-bg-surface);
	}

	.wine-picker-search-input {
		font-family: var(--font-body);
		font-size: var(--font-size-sm);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-sm);
		padding: var(--space-2) var(--space-3);
		background: var(--color-bg-surface);
		color: var(--color-text-primary);
		width: 100%;

		&:focus {
			outline: 2px solid var(--color-copper);
			outline-offset: -1px;
			border-color: var(--color-copper);
		}
	}

	/* === Cooking Mode === */

	cooking-view {
		@media (width <= 767px) {
			display: block;
			height: 100svh;
			overflow: hidden;
		}
	}

	.cooking-layout {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;

		@media (width <= 767px) {
			height: 100svh;
		}
	}

	/* ─── Header ─── */

	.cooking-header {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding-inline: var(--space-5);
		min-height: var(--height-2-baselines);
		flex-shrink: 0;
		background: var(--color-bg-surface);
		border-block-end: 1px solid var(--color-border-default);

		@media (width <= 767px) {
			padding-inline: var(--space-3);
			gap: var(--space-1);
		}
	}

	.cooking-back-link {
		font-size: var(--font-size-sm);
		white-space: nowrap;
		flex-shrink: 0;

		@media (width <= 767px) {
			.cooking-back-label {
				display: none;
			}
		}
	}

	.cooking-header-title {
		flex: 1;
		font-family: var(--font-display);
		font-size: var(--font-size-lg);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-heading);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}

	.cooking-header-actions {
		display: flex;
		gap: var(--space-3);
		flex-shrink: 0;

		@media (width <= 767px) {
			display: none;
		}
	}

	.cooking-header-menu-btn {
		display: none;

		@media (width <= 767px) {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			width: var(--space-7);
			height: var(--space-7);
			font-size: var(--font-size-lg);
			line-height: 1;
			border: 1px solid transparent;
			border-radius: var(--radius-sm);
			color: var(--color-text-primary);
			cursor: pointer;
			transition:
				color var(--transition-fast),
				border-color var(--transition-fast);

			&:hover {
				border-color: var(--color-border-default);
				box-shadow: var(--shadow-ink);
			}

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

	.cooking-action-menu {
		position: fixed;
		top: calc(var(--height-2-baselines) + var(--space-1));
		right: var(--space-3);
		inset-inline-start: auto;
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-md);
		min-width: 160px;
		padding: var(--space-1);
		margin: 0;
	}

	.cooking-action-menu-item {
		display: block;
		width: 100%;
		text-align: start;
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-semibold);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		padding: var(--space-3) var(--space-4);
		border-radius: var(--radius-sm);
		color: var(--color-text-primary);
		transition: background var(--transition-fast);

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

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

		&.cooking-action-menu-item--danger {
			color: var(--color-error);
		}
	}

	/* ─── Mobile panel tabs ─── */

	.cooking-panel-tabs {
		display: none;
		flex-shrink: 0;
		background: var(--color-bg-surface);
		border-block-end: 2px solid var(--color-border-default);

		@media (width <= 767px) {
			display: flex;
		}
	}

	.cooking-panel-tab {
		flex: 1;
		padding-block: var(--space-3);
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-semibold);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		color: var(--color-text-muted);
		border-block-end: 2px solid transparent;
		margin-block-end: -2px;
		cursor: pointer;
		transition:
			color var(--transition-fast),
			border-color var(--transition-fast);

		&.cooking-panel-tab--active {
			color: var(--color-accent-primary);
			border-block-end-color: var(--color-accent-primary);
		}

		&:hover:not(.cooking-panel-tab--active) {
			color: var(--color-text-primary);
		}

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

	/* ─── Panels scroll container ─── */

	.cooking-panels {
		display: flex;
		flex: 1;
		min-height: 0;
		/* Mobile-first: horizontal scroll-snap */
		overflow-x: scroll;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;

		@media (width >= 768px) {
			overflow: hidden;
			scroll-snap-type: unset;
			scroll-behavior: unset;
		}
	}

	/* ─── Individual panels ─── */

	.cooking-panel {
		/* Mobile-first: full-width snap target */
		flex: 0 0 100vw;
		max-width: 100vw;
		height: 100%;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overflow-x: hidden;
		min-width: 0;

		@media (width >= 768px) {
			flex: unset;
			max-width: unset;
			height: unset;
			scroll-snap-align: unset;
			scroll-snap-stop: unset;
			border-inline-end: 1px solid var(--color-border-default);

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

	.cooking-panel--ingredients {
		@media (width >= 768px) {
			flex: 0 0 300px;
		}
	}

	.cooking-panel--steps {
		@media (width >= 768px) {
			flex: 1;
		}
	}

	.cooking-panel--chat {
		background: var(--color-cream-dark);

		@media (width >= 768px) {
			flex: 1 1 375px;
			max-width: 480px;
			overflow: hidden;
		}
	}

	/* ─── Panel shared header ─── */

	.cooking-panel-header {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		padding: var(--space-4) var(--space-4) var(--space-3);
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-bold);
		letter-spacing: var(--letter-spacing-wider);
		text-transform: uppercase;
		color: var(--color-text-muted);
		border-block-end: 1px solid var(--color-border-subtle);
		flex-shrink: 0;

		@media (width <= 767px) {
			display: none;
		}
	}

	.cooking-progress {
		font-variant-numeric: tabular-nums;
		color: var(--color-accent-primary);
	}

	/* ─── State and error messages ─── */

	.cooking-state-msg {
		padding: var(--space-7) var(--space-5);
		color: var(--color-text-muted);
		font-size: var(--font-size-sm);

		&.cooking-state-msg--error {
			color: var(--color-error);
		}
	}

	/* ─── Ingredients panel ─── */

	.cooking-ingredients-list {
		flex: 1;
	}

	.cooking-category-header {
		padding: var(--space-3) var(--space-4) var(--space-2);
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-bold);
		letter-spacing: var(--letter-spacing-wider);
		text-transform: uppercase;
		color: var(--color-text-muted);
		background: var(--color-bg-base);
		border-block-end: 1px solid var(--color-border-subtle);
	}

	.cooking-ingredient-row {
		display: flex;
		align-items: center;
		min-height: var(--mobile-touch-target);
		border-inline-start: 3px solid var(--color-border-default);
		border-block-end: 1px solid var(--color-border-subtle);
		padding-inline: var(--space-3) var(--space-4);
		gap: var(--space-3);
		cursor: pointer;
		background: var(--color-bg-surface);
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast);
		user-select: none;

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

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

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

		&.cooking-ingredient-row--found {
			border-inline-start-color: var(--color-info);
			background: var(--color-info-bg);
		}

		&.cooking-ingredient-row--prepared {
			border-inline-start-color: var(--color-warning);
			background: var(--color-warning-bg);
		}

		&.cooking-ingredient-row--cooked {
			border-inline-start-color: var(--color-success);
			background: var(--color-success-bg);

			.cooking-ingredient-name {
				color: var(--color-text-muted);
				text-decoration: line-through;
				text-decoration-color: var(--color-success);
			}
		}
	}

	.cooking-ingredient-legend {
		flex-shrink: 0;
		display: flex;
		gap: var(--space-4);
		padding: var(--space-3) var(--space-4);
		border-block-start: 1px solid var(--color-border-subtle);
		background: var(--color-bg-base);
	}

	.cooking-legend-item {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);

		&::before {
			content: "";
			display: inline-block;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			flex-shrink: 0;
		}

		&.cooking-legend-item--found::before {
			background: var(--color-info);
		}
		&.cooking-legend-item--prepared::before {
			background: var(--color-warning);
		}
		&.cooking-legend-item--cooked::before {
			background: var(--color-success);
		}
	}

	.cooking-ingredient-name {
		font-size: var(--font-size-sm);
		color: var(--color-text-primary);
		line-height: var(--line-height-normal);
		transition: color var(--transition-fast);
	}

	/* ─── Recipe cover thumbnail (in panel header) ─── */

	.cooking-recipe-thumb {
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		overflow: hidden;
		border: 1px solid var(--color-border-default);
		cursor: zoom-in;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
	}

	/* ─── Plating section (end of steps panel) ─── */

	.cooking-plating-section {
		flex-shrink: 0;
		border-block-start: 2px solid var(--color-border-default);
		background: var(--color-bg-surface);
	}

	.cooking-plating-image {
		aspect-ratio: 1 / 1;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.cooking-plating-text {
		padding: var(--space-3) var(--space-4) var(--space-4);
		font-size: var(--font-size-sm);
		line-height: var(--line-height-normal);
		color: var(--color-text-secondary);
		white-space: pre-line;
	}

	/* ─── Steps panel ─── */

	.cooking-timers-area {
		position: sticky;
		top: 0;
		z-index: 1;
		flex-shrink: 0;
		background: var(--color-bg-surface);
		border-block-end: 1px solid var(--color-border-default);
	}

	.cooking-timer-cards {
		display: flex;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-3);
		overflow-x: auto;
		align-items: center;
	}

	.cooking-timer-card {
		scroll-snap-align: start;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		border: 1px solid var(--color-border-default);
		background: var(--color-bg-base);
		transition:
			border-color var(--transition-fast),
			background-color var(--transition-fast);

		&.cooking-timer-card--warning {
			border-color: var(--color-warning);
			background: var(--color-warning-bg);

			.cooking-timer-countdown {
				color: var(--color-warning);
			}
		}

		&.cooking-timer-card--completed {
			opacity: 0.6;
		}
	}

	.cooking-timer-main {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-1) var(--space-2);
	}

	.cooking-timer-countdown {
		font-family: var(--font-mono);
		font-size: var(--font-size-base);
		font-weight: var(--font-weight-semibold);
		font-variant-numeric: tabular-nums;
		color: var(--color-text-heading);
		white-space: nowrap;
		flex-shrink: 0;
		cursor: pointer;
	}

	.cooking-timer-detail {
		display: none;
		font-size: var(--font-size-xs);
		font-variant-numeric: tabular-nums;
		color: var(--color-text-muted);
		padding: var(--space-1) var(--space-2);
		border-block-start: 1px solid var(--color-border-subtle);

		.cooking-timer-card--expanded & {
			display: block;
		}
	}

	.cooking-timer-label {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-semibold);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		color: var(--color-text-muted);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 120px;
	}

	.cooking-timer-controls {
		display: flex;
		gap: 0;
		flex-shrink: 0;
	}

	.cooking-timer-add-card {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		padding: var(--space-1) var(--space-3);
		border: 1px dashed var(--color-border-default);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-wide);
		color: var(--color-text-muted);
		transition:
			border-color var(--transition-fast),
			color var(--transition-fast);

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

	.cooking-steps-list {
		flex: 1;
	}

	.cooking-step-row {
		display: flex;
		align-items: flex-start;
		gap: var(--space-3);
		padding: var(--space-3) var(--space-4);
		border-block-end: 1px solid var(--color-border-subtle);
		min-height: var(--mobile-touch-target);

		&.cooking-step-row--completed .cooking-step-label {
			color: var(--color-text-muted);
			text-decoration: line-through;
			text-decoration-color: var(--color-success);
		}
	}

	.cooking-step-check {
		margin-block-start: 4px;
		flex-shrink: 0;
		width: 18px;
		height: 18px;
		accent-color: var(--color-accent-primary);
		cursor: pointer;
	}

	.cooking-step-label {
		flex: 1;
		font-size: var(--font-size-sm);
		line-height: var(--line-height-normal);
		color: var(--color-text-primary);
		cursor: pointer;
		transition: color var(--transition-fast);
	}

	.cooking-step-number {
		display: inline-block;
		font-weight: var(--font-weight-bold);
		color: var(--color-text-muted);
		margin-inline-end: var(--space-2);
		font-variant-numeric: tabular-nums;
	}

	.cooking-step-timer-btn {
		flex-shrink: 0;
		opacity: 0.4;
		transition: opacity var(--transition-fast);

		.cooking-step-row:hover & {
			opacity: 1;
		}
	}

	/* ─── Chat panel ─── */

	.cooking-panel--chat {
		.chat-window {
			flex: 1;
			overflow-y: auto;
			min-height: 0;
			padding-inline: var(--space-4);
		}

		.chat-form {
			padding-inline-start: var(--space-4);
			padding-inline-end: calc(var(--space-4) + var(--scrollbar-width));
		}
	}

	/* ─── Timer dialog ─── */

	.cooking-timer-dialog {
		max-width: 360px;
		width: 90vw;
	}

	.cooking-timer-form-row {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);

		& + & {
			margin-block-start: var(--space-4);
		}
	}

	.cooking-timer-input {
		font-family: var(--font-body);
		font-size: var(--font-size-base);
		border: 1px solid var(--color-border-default);
		padding: var(--space-2) var(--space-3);
		background: var(--color-bg-surface);
		color: var(--color-text-primary);
		width: 100%;

		&:focus {
			outline: 2px solid var(--color-copper);
			outline-offset: -1px;
			border-color: var(--color-copper);
		}
	}

	/* ─── Cooking mode: larger type on desktop (screen is further away) ─── */

	@media (width >= 768px) {
		.cooking-ingredient-name {
			font-size: var(--font-size-base);
		}

		.cooking-step-label {
			font-size: var(--font-size-base);
		}

		.cooking-category-header {
			font-size: var(--font-size-sm);
		}
	}
}