/* Cook With Kenyon — probe cook screen + cook bar.
   Uses the app's existing tokens (--espresso/--orange/--muted/--tabbar-h/--sab); no new palette. */

/* ---- the cook status strip --------------------------------------------------------------
   Sits IN FLOW directly under the header, so it pushes content down instead of floating over it.
   The first cut pinned it above the tab bar, where it covered the Ask composer and stole the taps
   meant for it -- a status readout has no business sitting on top of the thing you type into.
   It exists ONLY while a cook is actually running: starting a cook is Anna's job, not a bar's. */
#cookbar-slot { position: relative; z-index: 5; }
#cookbar-slot:empty { display: none; }

.cookbar { position: relative; overflow: hidden; background: var(--espresso);
  border-bottom: 1px solid rgba(255,255,255,.08); height: 50px; display: flex; align-items: center;
  cursor: pointer; }
.cookbar-fill { position: absolute; inset: 0 auto 0 0; background: rgba(247,148,29,.22);
  transition: width .5s ease; }
.cookbar-row { position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 0 16px; }
.cookbar-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--orange);
  flex: 0 0 auto; animation: cookpulse 1.8s ease-in-out infinite; }
.cookbar-label { color: #fff; font-weight: 700; font-size: 14px; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cookbar-temp { color: var(--orange-2); font-weight: 800; font-size: 14px;
  font-variant-numeric: tabular-nums; }
.cookbar.is-done .cookbar-dot { background: #4ec37a; animation: none; }
.cookbar.is-done .cookbar-temp { color: #4ec37a; }
/* Losing the probe mid-cook must be LOUD -- the customer stopped watching the food because we
   told them we were. Traeger's worst reviews are the app going quiet. */
.cookbar.is-lost { background: #5b2222; }
.cookbar.is-lost .cookbar-dot { background: #ff6b6b; }
.cookbar.is-lost .cookbar-temp { color: #ff9d9d; }
@keyframes cookpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- picker ------------------------------------------------------------------------------- */
.cook-h1 { font-size: 21px; font-weight: 800; margin: 4px 0 4px; }
.cook-sub { color: var(--muted); font-size: 13px; margin: 14px 0 8px; }
.foods { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.food { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  padding: 13px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.food.is-active { border-color: var(--orange); background: #fff5e8; }
.food-em { font-size: 21px; }
.food-lb { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.25; }
.food-t { font-size: 12px; font-weight: 800; color: var(--orange-ink); }

/* Doneness renders ONLY for whole-muscle cuts — the API gives burgers no doneness list, so this
   control cannot be drawn for them. The food-safety rule is an absent affordance, not a warning. */
.doneness { display: flex; gap: 8px; flex-wrap: wrap; }
.dchip { padding: 9px 13px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 700; }
.dchip em { font-style: normal; display: block; font-size: 11px; opacity: .75; }
.dchip.is-active { border-color: var(--orange); background: #fff5e8; color: var(--orange-ink); }

.cook-why { margin-top: 14px; padding: 12px 13px; border-radius: 12px; background: var(--bg-2);
  border-left: 3px solid var(--orange); font-size: 13px; line-height: 1.5; color: var(--text); }
.cook-tip { margin-top: 10px; padding: 12px 13px; border-radius: 12px; background: #fff5e8;
  font-size: 13px; line-height: 1.5; color: var(--orange-ink); }
.cook-go { width: 100%; margin-top: 16px; height: 52px; border-radius: 14px; border: 0;
  background: var(--orange); color: #fff; font-weight: 800; font-size: 15px; }

/* ---- active cook -------------------------------------------------------------------------- */
.cook-live { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  margin-top: 6px; }
.cook-now { font-size: 66px; font-weight: 800; line-height: .95; letter-spacing: -2px;
  font-variant-numeric: tabular-nums; color: var(--text); }
.cook-now small { font-size: 22px; font-weight: 700; color: var(--muted); margin-left: 3px; }
.cook-meta { display: flex; flex-direction: column; gap: 5px; text-align: right; }
.cook-meta div { font-size: 12px; color: var(--muted); }
.cook-meta b { font-size: 14px; color: var(--text); margin-left: 7px; font-variant-numeric: tabular-nums; }
.cook-food { margin-top: 12px; font-size: 15px; font-weight: 700; }
.cook-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* The live curve — no time estimate on purpose. Weber's "ready in X" is their most-criticised
   feature and Brisk It's estimator produced "foil the ribs nine hours early". Show the truth. */
.cook-graph { width: 100%; height: 90px; margin-top: 16px; display: block; }
.cg-line { fill: none; stroke: var(--orange); stroke-width: 2.5; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; }
.cg-target { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke; }

.cook-alert { padding: 12px 14px; border-radius: 12px; font-weight: 700; font-size: 14px;
  margin-bottom: 14px; }
.cook-alert.is-done { background: #e6f6ec; color: #1f6b3a; }
.cook-alert.is-lost { background: #fdeaea; color: #8c2020; }

@media (prefers-color-scheme: dark) {
  .food.is-active, .dchip.is-active, .cook-tip { background: #3a3128; }
  .cook-why { background: #2f2924; }
}


/* ---- probe status chip (header) ----------------------------------------------------------
   Status, not a CTA. The customer needs to know the probe is connected BEFORE they put food on
   — discovering it was never paired after the steak is already cooking is the worst possible
   time. Lives in the header so it never covers the composer or the tab bar. */
.probe-chip { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border-radius: 999px; background: rgba(255,255,255,.10); border: 0; margin-right: 6px; }
.probe-chip[hidden] { display: none; }
.probe-dot { width: 7px; height: 7px; border-radius: 99px; background: #8c8177; flex: 0 0 auto; }
.probe-txt { color: #e8ded2; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.probe-chip.is-searching .probe-dot { background: var(--orange-2); animation: cookpulse 1.6s ease-in-out infinite; }
.probe-chip.is-live .probe-dot { background: #4ec37a; }
.probe-chip.is-live { background: rgba(78,195,122,.16); }


/* ---- Chef's Eye confirm sheet ---- */
.chef-btn { font-size: 18px; line-height: 1; }
.chef-sheet { position: fixed; inset: 0; z-index: 300; background: rgba(20,16,12,.55); display: flex; align-items: flex-end; justify-content: center; }
.chef-card { width: 100%; max-width: 480px; background: var(--card, #fff); color: var(--ink, #2c2721); border-radius: 20px 20px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(0,0,0,.32); animation: chefUp .22s ease; }
@keyframes chefUp { from { transform: translateY(28px); opacity: .6; } to { transform: none; opacity: 1; } }
.chef-hd { font-weight: 700; font-size: 18px; margin-bottom: 6px; }
.chef-read { font-size: 16px; margin-bottom: 10px; }
.chef-read b { font-size: 18px; }
.chef-sides { font-size: 14px; color: var(--muted, #8a7f74); margin-top: 2px; }
.chef-lbl { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #8a7f74); margin: 12px 0 5px; }
.chef-sel { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--line, #e0d8ce); font-size: 16px; background: var(--card, #fff); color: inherit; font-family: inherit; }
.chef-actions { display: flex; gap: 10px; margin-top: 18px; }
.chef-retake { flex: 0 0 auto; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line, #e0d8ce); background: transparent; color: inherit; font-size: 15px; font-weight: 600; }
.chef-go { flex: 1; padding: 14px; border-radius: 14px; border: 0; background: var(--accent, #F7941D); color: #fff; font-size: 16px; font-weight: 700; }
.chef-foot { text-align: center; font-size: 12px; color: var(--muted, #8a7f74); margin-top: 12px; }


/* idle: user hasn't turned the probe on yet -- an inviting tap target, not a dead label */
.probe-chip.is-off { cursor: pointer; opacity: 1; }
.probe-chip.is-off .probe-dot { background: #f7941d; box-shadow: none; animation: none; }
.probe-chip.is-off .probe-txt { color: #f7941d; font-weight: 600; }

/* Grill chip: same shape as the probe chip but a distinct RED accent (the grill runs hot),
   so the two are never confused at a glance. Also tappable in every state. */
.probe-chip.is-grill { cursor: pointer; border: 1px solid rgba(233,84,32,.45); }
.probe-chip.is-grill.is-live { background: rgba(233,84,32,.16); }
.probe-chip.is-grill.is-live .probe-dot { background: #e95420; }
.probe-chip.is-grill.is-off .probe-dot { background: #e95420; }
.probe-chip.is-grill.is-off .probe-txt { color: #e95420; }


/* predictive (thickness + time-to-done) readout on the cook screen */
.cook-predict { margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(127,127,127,.22);
  border-radius: 12px; background: rgba(127,127,127,.05); }
.cook-predict .cp-head { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: 8px; }
.cook-predict .cp-head .beta { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px;
  background: #f7941d; color: #fff; font-size: 9px; letter-spacing: .06em; vertical-align: middle; }
.cook-predict .cp-row { display: flex; gap: 20px; flex-wrap: wrap; }
.cook-predict .cp-row > div { display: flex; flex-direction: column; }
.cook-predict .cp-row span { font-size: 11px; opacity: .6; }
.cook-predict .cp-row b { font-size: 16px; font-weight: 700; }


/* probe-in-the-meat status (no formal cook yet) */
.cookbar.is-probe .cookbar-dot { background: #f7941d; }
.cookbar .beta { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 5px;
  background: #f7941d; color: #fff; font-size: 9px; letter-spacing: .05em; font-style: normal; vertical-align: middle; }