/* ==========================================================================
   ГАСТРОНОМИЧЕСКИЙ ДЕТЕКТИВ — design tokens
   Идея: страница дневника, куда записывают дело о забытом вкусе.
   Тёмный кабинет вокруг настольной лампы, на столе — лист крафтовой бумаги.
   ========================================================================== */

:root {
	/* Палитра — экран результата (без изменений) */
	--bg:              #0f0f0f;
	--bg-vignette:     #1a1712;
	--paper:           #faf6f0;
	--paper-shade:     #ece2cd;
	--paper-edge:      #d8caa9;
	--ink:             #2b2620;
	--ink-soft:        #6e6255;
	--ochre:           #b8863b;
	--ochre-dark:      #8f6528;
	--green:           #4a5d43;
	--stamp-red:       #8a3324;

	/* Палитра — FoodFinder (главная страница, по макету) */
	--ff-page-bg:      #fdf0ea;
	--ff-header-bg:    #f4f6c4;
	--ff-badge-bg:     #eef0bc;
	--ff-lime:         #ccdb2e;
	--ff-lime-dark:    #a3b022;
	--ff-hint-bg:      #f1f48f;
	--ff-border:       #23211b;

	/* Типографика */
	--font-display: 'Nunito', 'Inter', system-ui, sans-serif;
	--font-body:    'Inter', system-ui, -apple-system, sans-serif;
	--font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

	/* Форма */
	--radius-s: 8px;
	--radius-m: 12px;
	--radius-l: 16px;

	/* Движение */
	--ease: cubic-bezier(.2, .7, .3, 1);
	--transition-fast: .18s var(--ease);
	--transition: .35s var(--ease);
	--transition-slow: .6s var(--ease);

	--shadow-paper:
		0 30px 60px -20px rgba(0, 0, 0, .6),
		0 2px 0 rgba(0, 0, 0, .15);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	background:
		radial-gradient(ellipse 900px 600px at 50% 8%, var(--bg-vignette), var(--bg) 70%);
	font-family: var(--font-body);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, textarea { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; border: none; background: none; cursor: pointer; }
img { max-width: 100%; display: block; }

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

:focus-visible {
	outline: 2px solid var(--ff-lime-dark);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.page { min-height: 100vh; }
.screen { width: 100%; }
.screen[hidden] { display: none; }

/* ==========================================================================
   Экран поиска — FoodFinder (по макету)
   ========================================================================== */

.screen--search {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--ff-page-bg);
}

.app-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px clamp(20px, 5vw, 56px);
	background: var(--ff-header-bg);
	border-bottom: 1px solid rgba(35, 33, 27, .12);
}
.app-header__logo {
	width: 40px; height: 40px;
	display: flex;
	flex-shrink: 0;
}
.app-header__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--ink);
}

.app-body {
	flex: 1;
	display: flex;
	gap: clamp(20px, 3.5vw, 36px);
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 56px);
	align-items: stretch;
}

/* --- Левая панель: ввод описания --- */

.input-panel {
	position: relative;
	flex: 1;
	min-height: 420px;
	background: #fff;
	border: 3px solid var(--ff-lime);
	border-radius: var(--radius-l);
	box-shadow: 0 14px 32px -18px rgba(35, 33, 27, .25);
}

.input-panel__form { position: relative; width: 100%; height: 100%; }

.prompt-field {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	resize: none;
	border: none;
	outline: none;
	border-radius: var(--radius-l);
	padding: 96px 24px 72px;
	font-family: var(--font-body);
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--ink);
	background: transparent;
}
.prompt-field:disabled { opacity: .55; }

.input-panel__hint {
	position: absolute;
	top: 20px; left: 20px; right: 20px;
	max-width: calc(100% - 40px);
	width: fit-content;
	background: var(--ff-hint-bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 1.1rem;
	line-height: 1.4;
	padding: 14px 18px;
	border-radius: 14px;
	transition: opacity var(--transition-fast), transform var(--transition-fast);
	pointer-events: none;
}
/* исчезает сразу при фокусе или при первом введённом символе — без JS */
.prompt-field:focus ~ .input-panel__hint,
.prompt-field:not(:placeholder-shown) ~ .input-panel__hint {
	opacity: 0;
	transform: translateY(-6px);
}

/* Кнопка поиска */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 132px;
	height: 50px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--ff-lime);
	color: var(--ff-border);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: .01em;
	box-shadow: 0 4px 0 var(--ff-lime-dark);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.btn:hover { background: #d7e646; }
.btn:active {
	transform: translateY(3px);
	box-shadow: 0 1px 0 var(--ff-lime-dark);
}
.btn:disabled { cursor: progress; }

.input-panel__form .btn {
	position: absolute;
	right: 18px;
	bottom: 18px;
}

.btn__spinner {
	display: none;
	align-items: center;
	gap: 6px;
}
.btn__spinner-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--ff-border);
	animation: dot-pulse 1.1s var(--ease) infinite;
}
.btn__spinner-dot:nth-child(2) { animation-delay: .12s; }
.btn__spinner-dot:nth-child(3) { animation-delay: .24s; }
.btn__spinner-dot:nth-child(4) { animation-delay: .36s; }

@keyframes dot-pulse {
	0%, 60%, 100% { opacity: .3; transform: scale(.8); }
	30% { opacity: 1; transform: scale(1.15); }
}

.btn.is-loading .btn__label { display: none; }
.btn.is-loading .btn__spinner { display: inline-flex; }
.btn.is-loading { cursor: progress; }

/* --- Правая панель: приветствие и подсказки --- */

.info-panel {
	flex: 1;
	min-height: 420px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 2px solid var(--ff-border);
	border-radius: var(--radius-l);
	padding: clamp(24px, 3vw, 40px);
}

.info-panel__greeting {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.4;
	margin-bottom: 22px;
}

.info-panel__body p {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink-soft);
	margin-bottom: 18px;
}

.info-panel__disclaimer {
	margin-top: auto;
	padding-top: 16px;
	text-align: center;
	font-size: .78rem;
	font-style: italic;
	color: var(--ink-soft);
	opacity: .8;
}

/* Сообщение об ошибке */

.error-message {
	box-sizing: border-box;
	width: calc(100% - 2 * clamp(20px, 5vw, 56px));
	max-width: calc(1120px - 2 * clamp(20px, 5vw, 56px));
	margin: 0 auto clamp(24px, 4vw, 48px);
	padding: 14px 20px;
	border-radius: var(--radius-s);
	background: #fff;
	border: 1.5px dashed var(--stamp-red);
	color: var(--stamp-red);
	font-size: .95rem;
	line-height: 1.5;
}
.error-message[hidden] { display: none; }

/* ==========================================================================
   Экран результата
   ========================================================================== */

.screen--result {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6vh 20px;
	background: radial-gradient(ellipse 900px 600px at 50% 8%, var(--bg-vignette), var(--bg) 70%);
}
.screen--result .result { width: 100%; max-width: 640px; }

.case-file {
	width: 100%;
	background: var(--paper);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-paper);
	overflow: hidden;
	opacity: 0;
	transform: translateY(28px);
	transition: opacity var(--transition-slow), transform var(--transition-slow), box-shadow var(--transition);
}
.case-file.is-visible { opacity: 1; transform: translateY(0); }
.case-file:hover { transform: scale(1.02); box-shadow: 0 40px 70px -25px rgba(0,0,0,.65), 0 2px 0 rgba(0,0,0,.15); }
.case-file.is-visible:hover { transform: translateY(0) scale(1.02); }

.case-file__image-wrap { position: relative; }
.case-file__image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.case-file__stamp {
	position: absolute;
	top: 18px; right: 18px;
	padding: 6px 14px;
	border: 2px solid var(--green);
	border-radius: 6px;
	color: var(--green);
	background: rgba(250, 246, 240, .85);
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	transform: rotate(-6deg);
}

.case-file__body { padding: clamp(24px, 5vw, 40px); }

.case-file__title {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 4vw, 2.1rem);
	margin: 6px 0 22px;
}

.case-file__section { margin-top: 26px; }
.case-file__section h3 {
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 12px;
}

/* Сущности — как чернильные оттиски штампов */

.entities { display: flex; flex-wrap: wrap; gap: 10px; }
.entities__tag {
	font-family: var(--font-mono);
	font-size: .82rem;
	padding: 5px 12px;
	border: 1.5px dashed var(--ochre-dark);
	border-radius: 20px;
	color: var(--ochre-dark);
	background: rgba(184, 134, 59, .07);
}
.entities__tag--method { border-color: var(--green); color: var(--green); background: rgba(74, 93, 67, .07); }
.entities__tag:nth-child(odd) { transform: rotate(-1.5deg); }
.entities__tag:nth-child(even) { transform: rotate(1.2deg); }

.ingredients__list li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 8px;
	line-height: 1.55;
}
.ingredients__list li::before {
	content: '—';
	position: absolute;
	left: 0;
	color: var(--ochre);
}

.instructions__list { counter-reset: step; }
.instructions__list li {
	position: relative;
	padding-left: 34px;
	margin-bottom: 14px;
	line-height: 1.6;
	counter-increment: step;
}
.instructions__list li::before {
	content: counter(step);
	position: absolute;
	left: 0; top: -1px;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: .75rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn--ghost {
	margin-top: 32px;
	width: 100%;
	background: transparent;
	color: var(--ink);
	box-shadow: inset 0 0 0 2px var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--ghost:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--ink); }

/* ==========================================================================
   Адаптивность
   ========================================================================== */

@media (max-width: 860px) {
	.app-body { flex-direction: column; }
	.input-panel, .info-panel { min-height: 320px; }
}

@media (max-width: 640px) {
	.app-header { padding: 14px 20px; }
	.app-header__title { font-size: 1.25rem; }
	.app-body { padding: 20px; gap: 20px; }
	.prompt-field { padding: 88px 18px 64px; font-size: 1.05rem; }
	.input-panel__hint { font-size: 1rem; }
	.info-panel { padding: 22px; }

	.screen--result {
		max-width: none;
		height: 100vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0;
	}
	.case-file { border-radius: 0; min-height: 100%; }
	.case-file:hover { transform: none; }
	.case-file.is-visible:hover { transform: translateY(0); }
}

/* ==========================================================================
   Уважение к prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   Дополнительные стили для TheMealDB
   ========================================================================== */

/* Анимация появления для нескольких карточек */
.case-file {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
    transition: opacity var(--transition-slow), transform var(--transition-slow), box-shadow var(--transition);
    margin-bottom: 24px;
}
.case-file:last-child { margin-bottom: 0; }
.case-file.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.case-file__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--paper-shade);
}

/* Источник рецепта */
.case-file__source {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--ink-soft);
    opacity: 0.7;
}
.case-file__source a {
    color: var(--ochre-dark);
    text-decoration: none;
}
.case-file__source a:hover {
    text-decoration: underline;
}

/* Адаптация для мобильных устройств */
@media (max-width: 640px) {
    .case-file {
        border-radius: 0;
        min-height: 100%;
        margin-bottom: 0;
    }
    .case-file:hover {
        transform: none !important;
    }
    .case-file.is-visible:hover {
        transform: translateY(0) !important;
    }
    .case-file__image {
        aspect-ratio: 4 / 3;
    }
}