/* Recipe Book Mini App — боевые стили.
   Токены синхронизированы с design-system/recipe-book-mini-app/MASTER.md;
   правишь там — правь здесь (автоматической связи нет). */

:root {
    --color-background: #F4EFE5;
    --color-card: #FBF8F1;
    --color-foreground: #26201C;
    --color-muted-foreground: #736658;
    --color-border: #E5DBC9;
    --color-primary: #AE4B2B;
    --color-on-primary: #FFFFFF;
    --color-accent-chili: #B93A20;
    --color-ink-stroke: #26201C;
    --color-destructive: #A32218;

    --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
    --space-lg: 24px; --space-xl: 32px;
    --radius-card: 12px; --radius-button: 10px; --radius-full: 999px;

    --font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Тёмная тема — тот же тёплый характер, не инверсия в чёрно-белое.
   Класс ставит JS по Telegram.WebApp.colorScheme; media-запрос — фоллбек
   для случая, когда мини-апп открыт вне Telegram (локальная отладка). */
.theme-dark,
:root:not(.theme-light) {
    color-scheme: light;
}
.theme-dark {
    --color-background: #1E1812;
    --color-card: #2A221A;
    --color-foreground: #F3EAE0;
    --color-muted-foreground: #B3A395;
    --color-border: #3D3327;
    --color-primary: #E08A64;
    --color-on-primary: #1E1812;
    --color-accent-chili: #F0755C;
    --color-ink-stroke: #F3EAE0;
    --color-destructive: #E5837A;
    color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-family);
    background: var(--color-background);
    color: var(--color-foreground);
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
    padding-bottom: env(safe-area-inset-bottom);
}

.screen { display: none; }
.screen.active { display: block; }

/* --- Шапка и навигация --- */
.topbar {
    position: sticky; top: 0; z-index: 10;
    background: var(--color-background);
    padding: var(--space-md) var(--space-md) var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}
.topbar-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-sm); margin-bottom: var(--space-sm);
}
.topbar h1 { font-size: 20px; font-weight: 700; }
.count { font-size: 13px; color: var(--color-muted-foreground); white-space: nowrap; }

.search {
    width: 100%;
    font-family: var(--font-family); font-size: 16px; /* 16px — иначе iOS зумит при фокусе */
    background: var(--color-card);
    color: var(--color-foreground);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    padding: 10px 14px;
}
.search::placeholder { color: var(--color-muted-foreground); }
.search:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.navbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
}
.back {
    background: none; border: none; cursor: pointer;
    font-family: var(--font-family); font-size: 15px;
    color: var(--color-muted-foreground);
    padding: 4px 0;
}
.navbar h2 { font-size: 15px; font-weight: 600; }

/* --- Сетка коллекции --- */
.grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-sm); padding: var(--space-md);
}
@media (min-width: 481px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-family);
    color: inherit;
    padding: 0;
    transition: transform 120ms ease-out, opacity 120ms ease-out;
    /* flex-column обязателен: <button> по умолчанию центрирует содержимое по
       вертикали, а в grid-строке карточки растягиваются до высоты самой
       высокой — из-за этого над обложкой появлялась полоса пустоты. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.card:active { transform: scale(0.97); opacity: 0.85; }
.card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.cover {
    aspect-ratio: 4 / 3; width: 100%;
    background: var(--color-border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover.placeholder { background: var(--color-background); color: var(--color-ink-stroke); }
.cover.placeholder svg { width: 38%; height: 38%; }

.card-body { padding: var(--space-sm); }
.card-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.card-meta { font-size: 12px; color: var(--color-muted-foreground); margin-top: 4px; }

/* --- Детальный экран --- */
.hero { aspect-ratio: 16 / 9; }
.detail { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); }
.detail h1 { font-size: 22px; font-weight: 700; line-height: 1.25; }
.meta { font-size: 13px; color: var(--color-muted-foreground); }
.section-label { font-size: 15px; font-weight: 700; color: var(--color-primary); }
.rows { display: flex; flex-direction: column; gap: var(--space-xs); }
.row {
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-button); padding: var(--space-sm);
    font-size: 15px; line-height: 1.45;
}
.source { font-size: 13px; color: var(--color-primary); text-decoration: none; }
.review-note {
    font-size: 13px; color: var(--color-muted-foreground);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-sm);
}

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.btn {
    font-family: var(--font-family); font-size: 15px; font-weight: 600;
    border-radius: var(--radius-button); padding: 13px;
    border: none; cursor: pointer;
    min-height: 44px; /* минимальный тач-таргет */
    transition: transform 120ms ease-out, opacity 120ms ease-out;
}
.btn:active { transform: scale(0.97); opacity: 0.85; }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-secondary {
    background: transparent; color: var(--color-foreground);
    border: 1px solid var(--color-ink-stroke);
}
.btn-full { width: 100%; }

/* --- Форма правки --- */
.form { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
    font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--color-muted-foreground); text-transform: uppercase;
}
.field input, .field textarea {
    font-family: var(--font-family); font-size: 16px;
    background: var(--color-card); color: var(--color-foreground);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button); padding: 12px;
    resize: vertical; line-height: 1.45;
}
.field input:focus-visible, .field textarea:focus-visible {
    outline: 2px solid var(--color-primary); outline-offset: 1px;
}
.cover-edit { display: flex; align-items: center; gap: var(--space-sm); }
.cover-thumb {
    width: 64px; height: 64px; flex-shrink: 0;
    border-radius: var(--radius-card); overflow: hidden;
    background: var(--color-border);
    display: flex; align-items: center; justify-content: center;
}
.cover-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cover-thumb svg { width: 55%; height: 55%; color: var(--color-ink-stroke); }

/* --- Состояния --- */
.state {
    min-height: 70vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: var(--space-sm); padding: var(--space-xl);
}
.state-icon {
    width: 64px; height: 64px; border-radius: var(--radius-full);
    border: 1.5px solid var(--color-ink-stroke);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-primary);
}
.state-icon svg { width: 55%; height: 55%; }
.state h2 { font-size: 16px; font-weight: 700; }
.state p { font-size: 14px; color: var(--color-muted-foreground); max-width: 280px; line-height: 1.45; }

.loader { padding: var(--space-lg); text-align: center; font-size: 13px; color: var(--color-muted-foreground); }
.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .card, .btn { transition: none; }
    .card:active, .btn:active { transform: none; opacity: 1; }
}