/* «Что есть в холодильнике?» — холодный свет, стеклянные полки, кастрюля с паром и рецепт, который из неё поднимается.
   Цвета — токены ниже (контраст текста не ниже 4.5:1 проверяет tests/test_webapp_static.py); движение — только transform и opacity. */
.fridge,.frc{
  --fr-bg1:#F4FAFF; --fr-bg2:#D9ECFF; --fr-ink:#0B2236; --fr-ink2:#38526A;
  --fr-chip:#FFFFFF; --fr-chip-ink:#0B2236; --fr-shelf:rgba(11,34,54,.12); --fr-shelf-hi:rgba(255,255,255,.95);
  --fr-lamp:rgba(255,255,255,.95); --fr-door1:#E3E9F0; --fr-door2:#FBFCFE; --fr-handle:#C2CBD6;
  --pot:#2F4356; --pot-rim:#4A637A; --pot-in:#132130; --steam:rgba(255,255,255,.95); --fr-card:#FFFFFF;
}
[data-theme="dark"] .fridge,[data-theme="dark"] .frc{
  --fr-bg1:#11283C; --fr-bg2:#0A1724; --fr-ink:#EAF5FF; --fr-ink2:#9DB6CA;
  --fr-chip:rgba(255,255,255,.10); --fr-chip-ink:#EAF5FF; --fr-shelf:rgba(160,205,255,.18); --fr-shelf-hi:rgba(160,205,255,.10);
  --fr-lamp:rgba(140,200,255,.32); --fr-door1:#262B32; --fr-door2:#363C45; --fr-handle:#59616C;
  --pot:#8DA3B8; --pot-rim:#B4C6D6; --pot-in:#0D1824; --steam:rgba(220,236,255,.75); --fr-card:#14293C;
}
/* «Что хотите приготовить?» (вкладка «Рецепты») — тот же оверлей в тёплых тонах: не путается с холодильником в «Продуктах» */
.frc.wish,.fridge[data-mode="wish"]{--fr-bg1:#FFF7EF; --fr-bg2:#FFE3C7; --fr-ink:#3A1E05; --fr-ink2:#6B4423}
[data-theme="dark"] .frc.wish,[data-theme="dark"] .fridge[data-mode="wish"]{
  --fr-bg1:#3A2414; --fr-bg2:#1F130A; --fr-ink:#FFF1E4; --fr-ink2:#D9B89A; --fr-lamp:rgba(255,190,130,.22); --fr-card:#2B1D12;
}
.fridge[data-mode="wish"] .fr-shelf,.fridge[data-mode="wish"] .fr-use,.fridge[data-mode="wish"] .fr-door{display:none}

/* ---------- вход во вкладке «Рецепты» ---------- */
.frc{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 14px;margin:2px 0 14px;padding:16px;border-radius:24px;
  background:radial-gradient(ellipse at 30% -20%,var(--fr-lamp),transparent 60%),linear-gradient(160deg,var(--fr-bg1),var(--fr-bg2));color:var(--fr-ink)}
.frc h2{font:750 19px/1.2 InterMM}
.frc p{margin-top:4px;font-size:15px;line-height:1.35;color:var(--fr-ink2)}
.frc-mic{grid-row:span 2;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:0 10px 22px -6px rgba(0,91,191,.55)}
.frc-mic .ti{width:28px;height:28px}
.frc-mic:active{transform:scale(.96)}
.frc-pantry{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 14px 0 10px;border-radius:999px;background:var(--fr-chip);color:var(--fr-chip-ink);font:600 15px/1.2 InterMM}
.frc-pantry .ti{width:18px;height:18px}

/* ---------- оверлей ---------- */
.fridge{position:fixed;inset:0;z-index:75;overflow:hidden;background:var(--fr-bg2);color:var(--fr-ink)}
.fridge[hidden]{display:none}
.fr-in{position:absolute;inset:0;display:flex;flex-direction:column;max-width:640px;margin:0 auto;padding:calc(8px + var(--safe-t)) var(--pad) calc(12px + var(--safe-b));
  background:linear-gradient(180deg,var(--fr-bg1),var(--fr-bg2))}
.fr-lamp{position:absolute;left:50%;top:-140px;width:150%;height:320px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0%,var(--fr-lamp),transparent 70%);pointer-events:none}
.fr-door{position:absolute;inset:0;z-index:30;transform-origin:left center;backface-visibility:hidden;
  background:linear-gradient(90deg,var(--fr-door1),var(--fr-door2) 55%,var(--fr-door1));box-shadow:inset -1px 0 0 rgba(0,0,0,.08)}
.fr-door[hidden]{display:none}
.fr-handle{position:absolute;right:22px;top:36%;width:10px;height:130px;border-radius:6px;background:var(--fr-handle);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}

.fr-top{position:relative;z-index:2;display:flex;align-items:flex-start;gap:8px}
.fr-x{display:grid;place-items:center;flex:none;width:var(--tap);height:var(--tap);margin-left:-8px;border-radius:50%;color:var(--fr-ink)}
.fr-x .ti{width:32px;height:32px;padding:7px;border-radius:50%;background:var(--fr-chip)}
.fr-head{flex:1;min-width:0;padding-top:6px}
.fr-head h2{font:750 24px/1.15 InterMM;color:var(--fr-ink)}
.fr-sub{margin-top:4px;font-size:15px;line-height:1.35;color:var(--fr-ink2)}

.fr-stage{position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:10px calc(-1 * var(--pad)) 0;padding:4px var(--pad) 16px}
.fr-text{display:block;width:100%;min-height:var(--tap);padding:8px 2px;border:0;outline:0;border-radius:0;background:transparent;color:var(--fr-ink);font:600 21px/1.35 InterMM;resize:none}
.fr-text::placeholder{color:var(--fr-ink2)}
.fr-text:focus{box-shadow:inset 0 -2px 0 var(--link)}

/* стеклянные полки: каждый ряд продуктов стоит на своей */
.fr-shelf{display:flex;flex-wrap:wrap;align-content:flex-start;gap:12px 8px;min-height:112px;margin-top:12px;padding-bottom:12px;
  background:repeating-linear-gradient(180deg,transparent 0 48px,var(--fr-shelf) 48px 50px,var(--fr-shelf-hi) 50px 51px,transparent 51px 56px)}
.fr-chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 8px 0 14px;border-radius:14px;background:var(--fr-chip);color:var(--fr-chip-ink);
  font:600 15px/1.2 InterMM;box-shadow:0 1px 0 var(--fr-shelf-hi),0 8px 16px -10px rgba(11,34,54,.45)}
.fr-chip .ti{width:16px;height:16px;opacity:.75}
.fr-chip.home{padding:0 14px 0 10px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--fr-shelf)}
.fr-fly{position:fixed;inset:0;z-index:20;pointer-events:none}
.fr-fly .fr-chip{position:absolute;margin:0;will-change:transform}

/* кастрюля и барабан названий */
.fr-pot-zone{display:none;flex-direction:column;align-items:center;padding:8px 0 24px}
.fr-roll{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-height:92px;margin-bottom:10px;text-align:center}
.fr-roll small{font-size:14px;color:var(--fr-ink2)}
.fr-roll-t{display:block;max-width:100%;overflow:hidden;font:750 25px/1.2 InterMM;color:var(--fr-ink);text-wrap:balance}
.fr-roll-t.landed{color:var(--link)}
.fr-pot{width:min(230px,62vw);height:auto;overflow:visible}
.fr-pot .body{fill:var(--pot)}
.fr-pot .rim{fill:var(--pot-rim)}
.fr-pot .fr-pot-mouth{fill:var(--pot-in)}
.fr-pot .shine{fill:none;stroke:rgba(255,255,255,.14);stroke-width:4;stroke-linecap:round}
.fr-steam path{fill:none;stroke:var(--steam);stroke-width:5;stroke-linecap:round;opacity:0}
.fr-pot-zone.cooking .fr-steam path{animation:fr-steam 1.5s ease-out infinite}
.fr-pot-zone.cooking .fr-steam path:nth-child(2){animation-delay:.35s}
.fr-pot-zone.cooking .fr-steam path:nth-child(3){animation-delay:.7s}
@keyframes fr-steam{0%{opacity:0;transform:translateY(10px)}35%{opacity:.95}100%{opacity:0;transform:translateY(-24px)}}

/* низ: «Есть дома», микрофон и главная кнопка */
.fr-bottom{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;padding-top:8px}
.fr-use{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:0 2px;color:var(--fr-ink);font-size:15px;text-align:left}
.fr-use[hidden]{display:none}
.fr-use .t{flex:1}
.fr-ctrl{display:flex;align-items:center;gap:12px}
.fr-orb{position:relative;display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  box-shadow:0 12px 26px -8px rgba(0,91,191,.6);transition:background .2s}
.fr-orb .ti{position:relative;z-index:1;width:28px;height:28px}
.fr-orb.on{background:var(--ring);box-shadow:0 12px 26px -8px rgba(215,0,21,.55)}
.fr-ring{position:absolute;inset:0;border:2px solid var(--ring);border-radius:50%;opacity:0;pointer-events:none}
.fr-orb.on .fr-ring{animation:fr-ring 1.6s ease-out infinite}
.fr-orb.on .fr-ring+.fr-ring{animation-delay:.8s}
@keyframes fr-ring{from{opacity:.65;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}
.fr-go{flex:1;min-width:0;margin:0}

/* состояния */
.fridge[data-state="assemble"] .fr-stage{display:flex;flex-direction:column;justify-content:center}
.fridge[data-state="assemble"] .fr-pot-zone{display:flex}
.fridge[data-state="assemble"] .fr-text,.fridge[data-state="assemble"] .fr-shelf,.fridge[data-state="assemble"] .fr-bottom,
.fridge[data-state="result"] .fr-text,.fridge[data-state="result"] .fr-shelf,.fridge[data-state="result"] .fr-bottom{display:none}
.fr-result{display:none}
.fridge[data-state="result"] .fr-result{display:block}

/* результат: карточка рецепта */
.fr-note{margin:0 2px 12px;font-size:14px;line-height:1.45;color:var(--fr-ink2)}
.fr-note .ti{width:16px;height:16px;vertical-align:-3px}
.fr-note .linkbtn.inline{color:var(--link)}
.fr-card{padding:18px 16px 16px;border-radius:26px;background:var(--fr-card);color:var(--label);box-shadow:0 22px 44px -22px rgba(11,34,54,.55)}
.fr-badge{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 11px 0 8px;border-radius:999px;background:var(--green-tint);color:var(--green-ink);font:650 14px/1.2 InterMM}
.fr-badge .ti{width:16px;height:16px}
.fr-dish{margin-top:10px;font:750 26px/1.15 InterMM;text-wrap:balance;overflow-wrap:anywhere}
.fr-meta{margin-top:6px;font-size:15px;color:var(--label2)}
.fr-bar{height:6px;margin-top:12px;overflow:hidden;border-radius:3px;background:var(--fill)}
.fr-bar i{display:block;height:100%;border-radius:3px;background:var(--green);transform-origin:left center}
.fr-uses,.fr-buy,.fr-all{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:15px;line-height:1.35}
.fr-uses .ti,.fr-buy .ti,.fr-all .ti{flex:none;width:18px;height:18px;margin-top:1px}
.fr-uses,.fr-all{color:var(--green-ink)}
.fr-buy{color:var(--orange-ink)}
.fr-ings{margin-top:12px;list-style:none;border-top:.5px solid var(--sep)}
.fr-ing{display:flex;align-items:center;gap:12px;min-height:46px;padding:6px 0;border-bottom:.5px solid var(--sep)}
.fr-ing .t{flex:1;min-width:0;font-size:16px;line-height:1.3}
.fr-ing.said .t{font-weight:650}
.fr-ing .v{flex:none;max-width:45%;font-size:15px;color:var(--label2);text-align:right}
.fr-acts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.fr-acts .cta{margin:0}
.fr-acts .btn{min-height:48px}
.fr-more-h{margin:22px 4px 10px;font:700 18px/1.2 InterMM;color:var(--fr-ink)}
.fr-alts{display:flex;flex-direction:column;gap:8px}
.fr-alt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:56px;padding:10px 14px;border-radius:16px;background:var(--fr-chip);color:var(--fr-chip-ink);text-align:left}
.fr-alt b{font:650 16px/1.25 InterMM}
.fr-alt span{font-size:14px;color:var(--fr-ink2)}
.fr-result>.linkbtn{color:var(--link)}
/* «Подобрать другой» всегда под пальцем: прилипает к низу, пока листаете карточку; после смены блюда карточка — сверху */
.fr-dock{position:sticky;bottom:-16px;z-index:2;margin:8px calc(-1 * var(--pad)) -16px;padding:16px var(--pad) 20px;background:linear-gradient(180deg,transparent,var(--fr-bg2) 40%)}
.fr-next{width:100%;min-height:52px;background:var(--fr-card);color:var(--link);box-shadow:0 12px 26px -14px rgba(11,34,54,.55)}
.fr-empty{padding:28px 18px;border-radius:24px;background:var(--fr-card);color:var(--label);text-align:center}
.fr-empty b{display:block;font:700 19px/1.3 InterMM}
.fr-empty p{margin:8px 0 16px;font-size:15px;line-height:1.4;color:var(--label2)}

/* всплывашки — над кнопками оверлея */
body.fridge-open:not(.sheet-open) #toast{bottom:calc(150px + var(--safe-b))}

@media (prefers-reduced-motion:reduce){
  .fr-orb.on .fr-ring,.fr-pot-zone.cooking .fr-steam path{animation:none}
  .fr-pot-zone.cooking .fr-steam path{opacity:.6}
  .fr-orb{transition:none}
}