/* ESPsoup feature components: Taste test (finder.js), Chef's pick (wifiplan.js), Slow cooker (slowcook.js),
   Kitchen timer alerts (notify.js). Colours come from the host view (Kitchen = .v-light, Pot = instrument :root);
   only the heat scale uses fixed kitchen colours. */
.fx { --fx-hot: #d9480f; --fx-warm: #f59f00; --fx-cold: #3b5bdb; --fx-empty: color-mix(in srgb, var(--muted) 12%, transparent);
  display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--text); }
.fx-head b { display: block; font-size: 17px; font-weight: 750; letter-spacing: -.2px; }
.fx-head span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.fx label { margin: 0; }
.fx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fx-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-actions button { flex: 1 1 auto; min-height: 40px; border-radius: 12px; }
.fx-actions button.ghost { flex: 0 0 auto; color: var(--muted); background: none; }
.fx-toggle.on { border-color: var(--fx-hot); color: var(--fx-hot); }
.fx-note { color: var(--muted); font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.fx-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 16px 12px; border: 1.5px dashed var(--line); border-radius: 14px; }
.fx-seg { display: inline-flex; align-self: flex-start; padding: 3px; gap: 2px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); }
.fx-seg button { min-height: 32px; padding: 4px 14px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-weight: 600; }
.fx-seg button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px #0000001f; }
.fx-prog { height: 4px; border-radius: 2px; background: var(--fx-empty); overflow: hidden; opacity: 0; transition: opacity .3s; }
.fx.running .fx-prog { opacity: 1; }
.fx-prog i { display: block; height: 100%; width: 0; background: var(--fx-hot); transition: width .35s; }

/* ---- Taste test (hot/cold finder) ---- */
.fx-gauge { position: relative; max-width: 360px; width: 100%; margin: 0 auto; }
.fx-gauge-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fx-arc-bg { stroke: var(--fx-empty); }
.fx-arc { transition: stroke-dasharray .25s ease-out; }
.fx-peak { stroke: var(--fx-hot); opacity: .8; }
.fx-read { position: absolute; left: 0; right: 0; bottom: 2%; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.fx-read b { font-size: clamp(26px, 8vw, 40px); font-weight: 800; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; }
.fx-heat { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: 3px; }
.fx-taste[data-heat=warm] .fx-heat { color: var(--fx-warm); }
.fx-taste[data-heat=hot] .fx-heat, .fx-taste[data-heat=boiling] .fx-heat { color: var(--fx-hot); }
.fx-taste[data-heat=cold] .fx-heat, .fx-taste[data-heat=cool] .fx-heat { color: var(--fx-cold); }
.fx-trend { min-height: 20px; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--muted); }
.fx-trend.up { color: var(--fx-hot); } .fx-trend.down { color: var(--fx-cold); }
.fx-taste.running[data-heat=boiling] .fx-gauge { animation: fxBoil .6s ease-in-out infinite; }
@keyframes fxBoil { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .fx-taste.running[data-heat=boiling] .fx-gauge { animation: none; } .fx-arc { transition: none; } }
.fx-spark { width: 100%; height: 60px; border-radius: 10px; background: var(--fx-empty); }

/* ---- Chef's pick (Wi-Fi channel) ---- */
.fx-pick-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, #7a3412, var(--fx-hot)); box-shadow: 0 8px 20px #d9480f33; }
.fx-pick-n { flex: none; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; background: #ffffff26; box-shadow: 0 0 0 6px #ffffff12; }
.fx-pick-t { min-width: 0; } .fx-pick-t b { display: block; font-size: 17px; } .fx-pick-t span { display: block; font-size: 12.5px; opacity: .92; margin-top: 2px; }
.fx-list { display: flex; flex-direction: column; gap: 7px; }
.fx-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.fx-score { --s: 50; flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 750;
  background: conic-gradient(var(--fx-hot) calc(var(--s) * 1%), var(--fx-empty) 0); position: relative; }
.fx-score::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--panel); }
.fx-score { isolation: isolate; } .fx-score::before { z-index: -1; }
.fx-ct { min-width: 0; } .fx-ct b { display: block; font-size: 14px; } .fx-ct span { display: block; font-size: 12px; color: var(--muted); }
.fx-bars { display: flex; align-items: flex-end; gap: 3px; height: 92px; padding: 0 2px; }
.fx-bars:empty { display: none; }
.fx-bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.fx-bar i { display: block; width: 100%; border-radius: 4px 4px 2px 2px; }
.fx-bar span { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-bar.best span { color: var(--fx-hot); font-weight: 800; }
.fx-bar.best i { outline: 2px solid var(--fx-hot); outline-offset: 1px; }

/* ---- Slow cooker ---- */
.fx-heatmap { width: 100%; height: 240px; border-radius: 12px; background: var(--fx-empty); }
.fx-legend { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.fx-legend i { flex: 1; max-width: 220px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #0f1a24, #3b5bdb 35%, #d9480f 62%, #f59f00 82%, #fff3bf); }
.fx-sum { font-size: 13px; font-weight: 600; } .fx-sum:empty { display: none; }
.fx-tablewrap { overflow-x: auto; max-height: 320px; overflow-y: auto; border-radius: 12px; border: 1px solid var(--line); }
.fx-tablewrap:has(table:empty) { display: none; }
.fx-occ { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.fx-occ th { position: sticky; top: 0; background: var(--panel2); color: var(--muted); font-weight: 600; padding: 4px 3px; }
.fx-occ tbody th { position: sticky; left: 0; top: auto; text-align: left; padding: 3px 6px; white-space: nowrap; }
.fx-occ td { text-align: center; padding: 3px 2px; min-width: 26px; }

/* ---- Kitchen timer · alerts (Pantry) ---- */
.fx-master { font-weight: 650; }
.fx-rules { display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; transition: opacity .2s; }
.fx-rules.off { opacity: .5; }
.fx-rule { display: flex; align-items: center; gap: 12px; padding: 9px 12px; color: var(--text); cursor: pointer; }
.fx-rule + .fx-rule { border-top: 1px solid var(--line); }
.fx-rule-i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: color-mix(in srgb, var(--fx-hot) 12%, transparent); }
.fx-rule-t { flex: 1; min-width: 0; } .fx-rule-t b { display: block; font-size: 13.5px; font-weight: 650; } .fx-rule-t small { display: block; color: var(--muted); font-size: 11.5px; }
.fx-night { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.fx-night .check { flex: 1 1 100%; }
.fx-night input[type=time] { width: auto; min-height: 36px; padding: 4px 8px; }
.fx-toasts { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 10px);
  width: min(440px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.fx-toast { pointer-events: auto; cursor: pointer; padding: 11px 14px; border-radius: 14px; background: #17202af2; color: #fff; border-left: 4px solid #d9480f;
  box-shadow: 0 8px 24px #0000004d; animation: fxIn .25s ease-out; }
.fx-toast b { display: block; font-size: 14px; } .fx-toast span { display: block; font-size: 12.5px; opacity: .85; margin-top: 1px; }
.fx-toast.out { opacity: 0; transform: translateY(-6px); transition: all .25s; }
@keyframes fxIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fx-toast { animation: none; } }