/* §285 — de app-mockups, gebouwd als ECHTE HTML in plaats van een schermafbeelding.
 *
 * Waarom geen plaatje: een screenshot veroudert stilletjes, is zwaar op een 3G-verbinding en is
 * wazig op een scherm met hoge resolutie. Deze mockups zijn een miniatuur van de werkelijke
 * schermen — dezelfde indeling, dezelfde knopmaten, dezelfde teksten — en dus scherp op elk
 * toestel en een paar kilobyte groot.
 *
 * Ze zijn met opzet HERKENBAAR en niet mooier dan het echte scherm: de schoonmaak-app heeft grote
 * raakvlakken omdat iemand hem met handschoenen bedient, en dat hoort de bezoeker te zien.
 */

.mk { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1b2430; background: #f4f6f9; }
.mk * { box-sizing: border-box; }

/* ── de schoonmaak-app (telefoon) ───────────────────────────────────────── */
.mk-hk { padding: 14px 12px 18px; font-size: 12px; }
.mk-hk h4 { margin: 0 0 2px; font-size: 15px; font-weight: 800; color: #1b2430; }
.mk-hk .sub { color: #5b6573; font-size: 11px; margin-bottom: 12px; }
.mk-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; padding: 11px 12px; margin-bottom: 9px; }
.mk-row { display: flex; align-items: center; gap: 9px; }
.mk-box { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; border: 2px solid #1F3A5F; }
.mk-box.on { background: #1F3A5F; position: relative; }
.mk-box.on::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 14px; line-height: 18px; text-align: center; }
.mk-lbl { flex: 1; font-size: 12.5px; font-weight: 500; }
/* §354e — was #8a94a3: 3,07:1 op wit, onder de eis van 4,5. Afgevinkt mag gedempt zijn, maar
   niet onleesbaar; de doorhaling draagt de betekenis al. #6b7480 haalt 4,74:1. */
.mk-lbl.done { color: #6b7480; text-decoration: line-through; }
.mk-qty { color: #5b6573; font-weight: 700; }
.mk-photo { margin-top: 9px; border-radius: 9px; height: 74px; background: linear-gradient(135deg, #cbb89b, #8d7658); position: relative; overflow: hidden; }
.mk-photo::after { content: "zo hoort het eruit te zien"; position: absolute; left: 8px; bottom: 6px; font-size: 9.5px; color: #fff; background: rgba(0,0,0,.4); padding: 2px 6px; border-radius: 5px; }
.mk-help { margin: 7px 0 0; font-size: 11px; line-height: 1.45; color: #5b6573; }
.mk-btn { display: block; text-align: center; padding: 12px; border-radius: 11px; background: #1F3A5F; color: #fff; font-weight: 700; font-size: 13px; margin-top: 12px; }
.mk-btn.ghost { background: #fff; color: #a12020; border: 1px solid #f0c2c2; }
.mk-pill { display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #fff7ed; color: #b45309; }

/* ── keuken- en bedieningsdisplay (tablet) ──────────────────────────────── */
.mk-kds { padding: 12px; font-size: 12px; }
.mk-kds .bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mk-kds .bar b { font-size: 14px; }
.mk-kds .bar span { margin-left: auto; color: #5b6573; font-size: 11px; }
.mk-tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-ticket { background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; padding: 9px 10px; }
.mk-ticket.hot { border-color: #e0b44a; box-shadow: inset 3px 0 0 #e0b44a; }
.mk-ticket h5 { margin: 0 0 6px; font-size: 12px; font-weight: 800; display: flex; gap: 6px; align-items: baseline; }
.mk-ticket h5 em { font-style: normal; margin-left: auto; color: #5b6573; font-weight: 600; font-size: 10.5px; }
.mk-ticket li { list-style: none; font-size: 11.5px; padding: 2px 0; color: #46505f; }
.mk-ticket ul { margin: 0; padding: 0; }
.mk-badge { font-size: 9.5px; font-weight: 800; padding: 1px 6px; border-radius: 5px; }
.mk-badge.here { background: #e9f7ee; color: #1c7c3e; }
.mk-badge.wait { background: #fff7ed; color: #b45309; }

/* ── gastenapp (telefoon) ───────────────────────────────────────────────── */
.mk-guest { font-size: 12px; }
.mk-guest .top { background: #0E5F66; color: #fff; padding: 18px 14px 16px; }
.mk-guest .top b { display: block; font-size: 15px; }
.mk-guest .top span { font-size: 11px; opacity: .85; }
.mk-guest .body { padding: 12px; }
.mk-wifi { background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; padding: 12px; margin-bottom: 9px; }
.mk-wifi .k { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #0E5F66; }
.mk-wifi .v { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.mk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-tile { background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; padding: 12px 10px; text-align: center; font-size: 11.5px; font-weight: 700; }
.mk-tile i { display: block; font-style: normal; font-size: 17px; margin-bottom: 5px; }