/* ---------- Cooking menu (src/ui/cooking-ui.js) ----------
   Built from the Crafting screen's parts (crafting.css: .cr-cats, .cr-row, .cr-req-row...) and the
   Items screen's in ethra-ui.css; only what cooking adds is here. */
#cook{grid-template-columns:minmax(220px,260px) minmax(270px,420px) minmax(280px,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:"left list det"}
#cook .ck-cats .ef-btn{width:212px}
#cook .ck-cats .ef-btn.on{width:236px}
.ck-keys{display:flex;flex-wrap:wrap;gap:6px 12px;margin:18px 0 0 24px;font:800 11px var(--ui);color:var(--ef-dim);text-shadow:var(--ef-shadow)}
.ck-keys span{display:inline-flex;align-items:center;gap:4px}
#cook .cr-row.ready .nm{color:#fff}
#cook .cr-row.ready .nm small{color:var(--ef-yellow)}
#cook .cr-row.ready .ico:first-child{filter:drop-shadow(0 0 2px rgba(241,208,70,.55))}
.ck-det .det-head{align-items:center;justify-content:flex-start}
.ck-det .det-head .det-meta{margin-left:auto}
.ck-big .ico{width:36px;height:36px}
.ck-det .ck-time{font-size:12px!important;color:var(--ef-dim)!important;margin:4px 0 2px!important}
.ck-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.ck-qty{display:inline-flex;align-items:center;gap:2px}
#cook .ck-qty button.opt-btn{min-width:34px;padding:3px 8px;font-size:15px}
#cook .ck-qty button.ck-qv{min-width:52px;font-variant-numeric:tabular-nums}
#cook .ck-go{padding:3px 18px;font-size:14px}
.ck-actions .eq-msg{flex-basis:100%;font:800 12px var(--ui);color:#ffd9d2}
/* the well-fed line, under the status row */
#mealBuff{position:fixed;z-index:21;left:max(18px,env(safe-area-inset-left));top:136px;display:none;align-items:center;gap:6px;padding:3px 10px 3px 5px;pointer-events:auto;
 background:linear-gradient(90deg,rgba(12,13,16,.62),rgba(12,13,16,0));font:800 12px/1 var(--ui);color:#f7f4ec;text-shadow:var(--ef-shadow)}
#mealBuff.on{display:flex}
#mealBuff .ico{width:20px;height:20px}
#mealBuff em{font-style:normal;color:var(--ef-yellow);font-variant-numeric:tabular-nums}
body:not(.playing) #mealBuff,body.photo #mealBuff,body.ui-screen #mealBuff{display:none!important}
@media(max-width:550px) and (orientation:portrait){
 #cook .cr-left,#cook .cr-listcol,#cook .cr-detcol{flex:0 0 auto;min-height:auto}
 #cook .ck-cats .ef-btn,#cook .ck-cats .ef-btn.on{width:auto}
 .ck-keys{display:none}
 #mealBuff{top:190px}
}
@media(max-height:500px){
 #cook{grid-template-columns:184px minmax(190px,1fr) minmax(210px,1fr)}
 #cook .ck-cats .ef-btn{width:160px}#cook .ck-cats .ef-btn.on{width:170px}
 .ck-keys{display:none}
 .ck-big .ico{width:24px;height:24px}
 /* a phone on its side: the flavour line and timing give way so the amount and Cook stay in view */
 .ck-det>p:not(.det-eff){display:none}
 .ck-det .det-eff{font-size:11px!important;margin:1px 0!important}
 .ck-actions{gap:4px;margin-top:4px}
 #cook .ck-qty button.opt-btn{min-width:28px;min-height:28px;padding:1px 6px}
 #mealBuff{top:112px;left:auto;right:max(18px,env(safe-area-inset-right))}
}
@media(pointer:coarse){#cook .ck-qty button.opt-btn{min-width:44px;min-height:40px}#cook .ck-go{min-height:40px}}