diff --git a/docs/cms.md b/docs/cms.md
index 59bef8c..a438095 100644
--- a/docs/cms.md
+++ b/docs/cms.md
@@ -70,6 +70,26 @@ Both use the same data source (`GET /restaurants/{id}/orders`)
filtered by status. The KDS view escalates color by age (`>5min`
orange, `>15min` red) and offers one-tap state transitions.
+When a card transitions to `accepted` (driven by `cookingMode(order)`
+in `kds.js`), three inline `:style` bindings kick in:
+
+- the items `q-card-section` switches base font between `1rem` and
+ `1.25rem`,
+- the modifier list (`.text-caption.text-grey-7`) bumps to `1.15rem`
+ + medium weight + `color: inherit` (drops the muted grey),
+- the per-line note (`.text-caption.text-amber-9`) bumps to `1.15rem`
+ + medium weight; color is left alone so it stays amber.
+
+All cooking-mode styling is inline because an upstream `!important`
+rule (likely an lnbits theme override on Quasar's typography
+utilities) defeats class-based CSS rules — even with `!important`
+on our side. Inline `:style` wins without needing the arms race.
+Card chrome and the age-based `bg-{color}-1` from `cardClass()`
+are untouched. The amber
+per-line note keeps its color because only `.text-grey-7` is
+overridden. No background rules; card chrome and the age-based
+`bg-{color}-1` from `cardClass()` are untouched.
+
Today the monitor + KDS poll every 5–8 s. SSE / Nostr push is on
the roadmap.
diff --git a/static/js/kds.js b/static/js/kds.js
index ab4f0cc..f7fd258 100644
--- a/static/js/kds.js
+++ b/static/js/kds.js
@@ -23,6 +23,9 @@ window.app = Vue.createApp({
statusColor(status) {
return {paid: 'positive', accepted: 'blue', ready: 'amber'}[status] || 'grey'
},
+ cookingMode(order) {
+ return order && order.status === 'accepted'
+ },
cardClass(order) {
// Visually escalate as orders age. >5min = highlight; >15min = alarm.
//
diff --git a/templates/restaurant/kds.html b/templates/restaurant/kds.html
index 0474f28..8ba3052 100644
--- a/templates/restaurant/kds.html
+++ b/templates/restaurant/kds.html
@@ -37,7 +37,9 @@
-
+