/* Per-app theme tokens (the app's dark/light palette via light-dark()),
   plus KRecipes component styles. The accent identity lives in css/identity.css. */
/* Theme tokens via CSS light-dark(): each token is declared once as
   light-dark(<light>, <dark>) and resolves off the element's `color-scheme`.
   The warm brand hue comes from identity.css; keep the light/dark --bg in sync
   with THEME_COLOR in js/theme.js and the boot splash in index.html. */
:root {
	color-scheme: light dark;

	--bg:           light-dark(#faf6f2, #14100e);
	--bg-grad-top:  light-dark(#ffe8d6, #2a1a12);
	--surface:      light-dark(#ffffff, #1c1714);
	--surface-2:    light-dark(#f4ede6, #26201b);
	--surface-3:    light-dark(#e8ddd2, #322a23);
	--text:         light-dark(#1f1712, #f6f1ec);
	--text-dim:     light-dark(#6b5d52, #ad9f93);
	--text-faint:   light-dark(#9a8b7e, #71655a);
	--color-primary-on-surface:     light-dark(var(--color-primary-700), var(--color-primary-400));
	--color-primary-grad:  linear-gradient(135deg,
		light-dark(var(--color-primary-dark), var(--color-primary)) 0%,
		light-dark(var(--color-primary), var(--color-primary-400)) 100%);
	--border:       light-dark(#e6dcd0, #322a23);
	--danger:       light-dark(#dc2626, #ef4444);
	--nav-bg:       light-dark(rgba(250, 246, 242, 0.9), rgba(20, 16, 14, 0.92));
	--nav-h:        62px;
}

/* ─── Page headers ──────────────────────────────────────────────────────── */
.section-title {
	font: var(--font-h5);
	margin: var(--space-l) 0 var(--space-s);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	margin-bottom: var(--space-m);
}
.top-bar .brand {
	font: var(--font-h4);
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.top-bar .brand .ms { color: var(--color-primary); font-size: 26px; flex-shrink: 0; }

.icon-btn {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	width: 40px; height: 40px;
	border-radius: 50%;
	display: grid; place-items: center;
	cursor: pointer;
	flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface-3); }
.icon-btn:disabled { opacity: 0.4; cursor: default; }
.icon-btn .ms { font-size: 22px; }
.icon-btn.done-btn { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.icon-btn.done-btn:disabled { background: var(--surface-3); border-color: var(--border); color: var(--text-faint); }

.link-btn {
	background: none;
	border: none;
	color: var(--text-dim);
	font: var(--font-body-medium-semibold);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	cursor: pointer;
	padding: var(--space-2xs) 0;
}
.link-btn:hover { color: var(--text); }
.link-btn .ms { font-size: 20px; }
.danger-text { color: var(--danger); }
.danger-text:hover { color: var(--danger); }

.play-btn {
	background: var(--color-primary-grad);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: var(--space-s) var(--space-l);
	font: var(--font-body-medium-bold);
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	cursor: pointer;
	white-space: nowrap;
}
.play-btn:active { transform: scale(0.97); }
.play-btn:disabled { background: var(--surface-3); color: var(--text-faint); cursor: not-allowed; }

.row-icon {
	background: none;
	border: none;
	color: var(--text-faint);
	display: grid;
	place-items: center;
	padding: var(--space-2xs);
	cursor: pointer;
	border-radius: 50%;
	flex-shrink: 0;

	&:hover { color: var(--text); background: var(--surface-3); }
	&:disabled { opacity: 0.3; cursor: default; background: none; }
	& .ms { font-size: 20px; }
}

/* ─── Filter chips ──────────────────────────────────────────────────────── */
.chip-row {
	display: flex;
	gap: var(--space-xs);
	overflow-x: auto;
	padding-bottom: var(--space-xs);
	margin-bottom: var(--space-m);
	-webkit-overflow-scrolling: touch;
}
.chip {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text-dim);
	border-radius: 999px;
	padding: var(--space-xs) var(--space-m);
	font: var(--font-body-small-semibold);
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	display: inline-grid;
	grid-auto-flow: column;
	align-items: center;
	gap: var(--space-xs);
}
.chip:hover { background: var(--surface-3); }
.chip.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.chip-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
}
.chip.on .chip-dot { border-color: rgba(255, 255, 255, 0.6); }
.chip-add { padding: var(--space-xs) var(--space-s); }
.chip-add .ms { font-size: 18px; display: block; }

/* ─── Top-bar category menu ─────────────────────────────────────────────── */
.top-bar-end { display: grid; grid-auto-flow: column; align-items: center; gap: var(--space-s); }
.list-menu-wrap { position: relative; }
.menu-backdrop { position: fixed; inset: 0; z-index: 15; }
.list-menu {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + var(--space-xs));
	z-index: 20;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow-card, 0 8px 24px rgba(0, 0, 0, 0.4));
	padding: var(--space-xs);
	min-width: 200px;
	display: grid;

	& button {
		background: none;
		border: none;
		color: var(--text);
		font: var(--font-body-medium-semibold);
		display: grid;
		grid-auto-flow: column;
		justify-content: start;
		align-items: center;
		gap: var(--space-s);
		padding: var(--space-s) var(--space-s);
		border-radius: 8px;
		cursor: pointer;
		text-align: start;
		white-space: nowrap;

		&:hover { background: var(--surface-3); }
		&:disabled { opacity: 0.4; cursor: default; background: none; }
		& .ms { font-size: 20px; }
	}
}

/* ─── Category editor modal ─────────────────────────────────────────────── */
.modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: rgba(0, 0, 0, 0.5);
	display: grid;
	place-items: center;
	padding: var(--space-l);
}
.list-editor {
	width: min(420px, 100%);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-modal, 20px);
	padding: var(--space-l);
	display: grid;
	gap: var(--space-m);

	& h3 { font: var(--font-h5); margin: 0; }
}
.modal-actions {
	display: grid;
	grid-auto-flow: column;
	justify-content: end;
	align-items: center;
	gap: var(--space-s);
}
.todo-input {
	min-width: 0;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: var(--space-s) var(--space-m);
	font: var(--font-body-large-regular);
}
.todo-input:focus { outline: none; border-color: var(--color-primary); }

/* ─── Colour swatches (category accent) ─────────────────────────────────── */
.color-row {
	display: flex;
	gap: var(--space-s);
}
.swatch {
	width: 28px; height: 28px;
	border-radius: 50%;
	border: 2px solid var(--border);
	cursor: pointer;
	padding: 0;
}
.swatch.on { border-color: var(--text); transform: scale(1.1); }
.swatch-default { background: var(--surface-3); }
.swatch-yellow  { background: #d9a441; }
.swatch-green   { background: #4a9e5f; }
.swatch-blue    { background: #3a86c8; }
.swatch-pink    { background: #c8497e; }
.swatch-purple  { background: #8a52c8; }

/* ─── Search ────────────────────────────────────────────────────────────── */
.search-input {
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: var(--space-s) var(--space-m);
	font: var(--font-body-large-regular);
	margin-bottom: var(--space-m);
}
.search-input:focus { outline: none; border-color: var(--color-primary); }

/* ─── Recipes grid ──────────────────────────────────────────────────────── */
.recipes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-m);
}
.recipe-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 16px);
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.recipe-card:active { transform: scale(0.98); }
.recipe-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-button); }
.recipe-cover {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--surface-2);

	& img { width: 100%; height: 100%; object-fit: cover; }
}
.recipe-cover-empty {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	background: color-mix(in oklch, var(--color-primary) 10%, var(--surface-2));

	& .ms { font-size: 46px; color: color-mix(in oklch, var(--color-primary) 45%, var(--surface-3)); }
}
.recipe-fav {
	position: absolute;
	top: var(--space-xs); inset-inline-end: var(--space-xs);
	width: 34px; height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	display: grid; place-items: center;
	cursor: pointer;
	backdrop-filter: blur(4px);

	& .ms { font-size: 20px; }
	&.on { color: #ff6b6b; }
}
.recipe-badge {
	position: absolute;
	top: var(--space-xs); inset-inline-start: var(--space-xs);
	max-width: calc(100% - 60px);
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font: var(--font-body-xsmall-bold);
	padding: var(--space-3xs) var(--space-xs);
	border-radius: 999px;
	backdrop-filter: blur(4px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.recipe-info { padding: var(--space-s) var(--space-m) var(--space-m); display: flex; flex-direction: column; gap: var(--space-2xs); }
.recipe-title { font: var(--font-body-large-bold); }
.recipe-desc {
	font: var(--font-body-medium-regular);
	color: var(--text-dim);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.recipe-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	margin-top: var(--space-2xs);
	font: var(--font-body-small-semibold);
	color: var(--text-faint);

	& span { display: inline-flex; align-items: center; gap: var(--space-3xs); }
	& .ms { font-size: 16px; }
}

/* ─── Recipe detail (read view) ─────────────────────────────────────────── */
.detail-bar {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	margin-bottom: var(--space-m);
}
.editor-status { flex: 1; font: var(--font-body-small-regular); }
.editor-actions { display: flex; gap: var(--space-xs); }

.recipe-view { display: flex; flex-direction: column; }
.recipe-hero {
	width: 100%;
	max-height: 340px;
	object-fit: cover;
	border-radius: var(--radius-card, 16px);
	margin-bottom: var(--space-m);
}
.recipe-h1 { font: var(--font-h3); margin: 0 0 var(--space-xs); }
.recipe-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-s);
}
.recipe-cat, .recipe-src {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font: var(--font-body-small-semibold);
	color: var(--text-dim);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: var(--space-3xs) var(--space-s);
}
.recipe-src {
	color: var(--color-primary-on-surface);
	background: color-mix(in oklch, var(--color-primary) 12%, var(--surface-2));
	border-color: transparent;

	& .ms { font-size: 15px; }
}
.recipe-lead { font: var(--font-body-large-regular); color: var(--text-dim); line-height: 1.55; margin: 0 0 var(--space-m); }
.recipe-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	margin-bottom: var(--space-l);
}
.fact {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: var(--space-s) var(--space-m);
	flex: 1 1 auto;
	min-width: 84px;

	& .ms { font-size: 22px; color: var(--color-primary); }
	& span:not(.ms) { display: flex; flex-direction: column; line-height: 1.2; font: var(--font-body-large-bold); }
	& b { font: var(--font-body-small-semibold); color: var(--text-faint); font-weight: 600; }
}
.recipe-h2 { font: var(--font-h5); margin: var(--space-l) 0 var(--space-s); }
.ingredient-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);

	& li {
		position: relative;
		padding-inline-start: var(--space-l);
		font: var(--font-body-large-regular);
		line-height: 1.5;
	}
	& li::before {
		content: "";
		position: absolute;
		inset-inline-start: 2px;
		top: 0.62em;
		width: 7px; height: 7px;
		border-radius: 50%;
		background: var(--color-primary);
	}
}
.instructions-body {
	font: var(--font-body-large-regular);
	line-height: 1.65;
	white-space: pre-wrap;
	overflow-wrap: anywhere;

	& img { max-width: 100%; height: auto; border-radius: var(--radius-card, 16px); margin: var(--space-s) 0; }
	& p { margin: 0 0 var(--space-s); }
}
.recipe-source {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-l);
	color: var(--color-primary-on-surface);
	font: var(--font-body-medium-semibold);

	& .ms { font-size: 20px; }
}

/* ─── Recipe edit form ──────────────────────────────────────────────────── */
.recipe-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
}
.rfield {
	display: grid;
	gap: var(--space-2xs);

	& > span { font: var(--font-body-small-semibold); color: var(--text-dim); }
	& > span em { font-style: normal; color: var(--text-faint); font-weight: 400; }

	& input, & select, & textarea {
		width: 100%;
		background: var(--surface-2);
		border: 1px solid var(--border);
		color: var(--text);
		border-radius: 12px;
		padding: var(--space-s) var(--space-m);
		font: var(--font-body-large-regular);
		color-scheme: inherit;
	}
	& textarea { resize: vertical; min-height: 120px; line-height: 1.5; font: var(--font-body-medium-regular); }
	& select { appearance: none; cursor: pointer; }
	& input:focus, & select:focus, & textarea:focus { outline: none; border-color: var(--color-primary); }
}
.rfield-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); }

.recipe-form .editor-body {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: var(--space-s) var(--space-m);
	font: var(--font-body-large-regular);
	line-height: 1.6;
	min-height: 160px;
	outline: none;
	white-space: pre-wrap;
	overflow-wrap: anywhere;

	&:focus { border-color: var(--color-primary); }
	& img { max-width: 100%; height: auto; border-radius: 12px; margin: var(--space-xs) 0; }
	&:empty::before { content: attr(data-placeholder); color: var(--text-faint); pointer-events: none; }
}

.cover-edit { position: relative; }
.cover-preview {
	width: 100%;
	max-height: 260px;
	object-fit: cover;
	border-radius: var(--radius-card, 16px);
}
.cover-remove {
	position: absolute;
	top: var(--space-s); inset-inline-end: var(--space-s);
	width: 34px; height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	display: grid; place-items: center;
	cursor: pointer;

	& .ms { font-size: 20px; }
}
.cover-add {
	width: 100%;
	border: 2px dashed var(--border);
	background: var(--surface-2);
	color: var(--text-dim);
	border-radius: var(--radius-card, 16px);
	padding: var(--space-xl);
	display: grid;
	place-items: center;
	gap: var(--space-xs);
	cursor: pointer;
	font: var(--font-body-medium-semibold);

	&:hover { border-color: var(--color-primary); color: var(--text); }
	& .ms { font-size: 32px; color: var(--color-primary); }
}

/* ─── Empty state ───────────────────────────────────────────────────────── */
.empty {
	text-align: center;
	color: var(--text-dim);
	padding: 60px var(--space-l);
}
.empty .ms { font-size: 54px; color: var(--surface-3); margin-bottom: var(--space-s); }
.empty p { margin: var(--space-2xs) 0; }

/* ─── Settings ──────────────────────────────────────────────────────────── */
.settings-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-s);
	margin-bottom: var(--space-l);
}
.stat {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 16px);
	padding: var(--space-l) var(--space-s);
	text-align: center;
}
.stat-num { font: var(--font-h3); color: var(--color-primary-on-surface); }
.stat-label { font: var(--font-body-small-regular); color: var(--text-dim); margin-top: var(--space-3xs); }
.settings-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.settings-item {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: var(--space-m);
	font: var(--font-body-large-medium);
	cursor: pointer;
}
.settings-item:hover { background: var(--surface-3); }
.settings-item:disabled { opacity: 0.6; cursor: default; }
.settings-item .ms { font-size: 22px; color: var(--text-dim); }
.settings-state {
	margin-inline-start: auto;
	font: var(--font-body-medium-bold);
	color: var(--color-primary-on-surface);
}
.settings-hint { margin: var(--space-xs) var(--space-2xs) 0; font: var(--font-body-small-regular); }
.settings-foot { margin-top: var(--space-xl); text-align: center; font: var(--font-body-small-regular); }

/* ─── Segmented control (theme toggle) ──────────────────────────────────── */
.seg {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--space-2xs);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: var(--space-2xs);
	margin-bottom: var(--space-m);

	& button {
		border: none;
		background: none;
		color: var(--text-dim);
		font: var(--font-body-small-semibold);
		padding: var(--space-xs);
		border-radius: 9px;
		cursor: pointer;
		display: grid;
		grid-auto-flow: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-2xs);

		& .ms { font-size: 18px; }
		&.on { background: var(--color-primary); color: #fff; }
	}
}

/* ─── Auth page ─────────────────────────────────────────────────────────── */
.auth-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-l); }
.auth-card {
	width: 100%;
	max-width: 380px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: var(--space-2xl) var(--space-xl);
}
.auth-logo {
	width: 72px; height: 72px;
	border-radius: 20px;
	background: var(--color-primary-grad);
	display: grid; place-items: center;
	margin: 0 auto var(--space-l);
	color: #fff;
}
.auth-logo .ms { font-size: 40px; }
.auth-title { font: var(--font-h3); margin: 0 0 var(--space-xs); }
.auth-subtitle { color: var(--text-dim); margin: 0 0 var(--space-xl); font: var(--font-body-medium-regular); }
.auth-actions { display: flex; flex-direction: column; gap: var(--space-s); }
.auth-hint { color: var(--text-dim); font: var(--font-body-small-regular); margin: 0 0 var(--space-l); line-height: 1.5; }
.auth-error { color: var(--danger); font: var(--font-body-small-medium); margin-top: var(--space-m); }

@media (max-width: 420px) {
	.recipes-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-s); }
	.recipe-info { padding: var(--space-xs) var(--space-s) var(--space-s); }
}

/* ─── Pull-to-refresh ───────────────────────────────────────────────────── */
.ptr-indicator {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-top: -48px;               /* parked just above the viewport */
	border-radius: 50%;
	background: var(--surface-2);
	border: 1px solid var(--border);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translateX(-50%);
	transition: transform 0.2s ease, opacity 0.2s ease;
	pointer-events: none;

	&.dragging { transition: none; }  /* track the finger 1:1 while pulling */

	& .ptr-spinner {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 2px solid var(--surface-3);
		border-top-color: var(--text-faint);
	}

	&.ready .ptr-spinner { border-top-color: var(--color-primary); }
	&.busy  .ptr-spinner { border-top-color: var(--color-primary); animation: spin 0.8s linear infinite; }
}