/* Vyom Hospitality Suite: the illustration kit. Product screens drawn in HTML and CSS, always labelled
   as examples, shared by the home page, the platform pages and the pricing page. It uses the site's
   colour tokens (defined in index.html and assets/platform.css), so it follows light and dark. */
/* ── Illustrations: product screens drawn in HTML, labelled as examples ───────────────────
   A small kit so every module's illustration speaks the same visual language. Everything sits
   inside .mock; nothing here is a screenshot or real data. */
.mock svg{width:15px; height:15px}
.mock{position:relative; border-radius:16px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg); overflow:hidden; font-size:14px; line-height:1.4; text-align:left}
.mock-bar{display:flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-bottom:1px solid var(--border); background:var(--bg-subtle)}
.mock-bar i{width:10px; height:10px; border-radius:50%; background:var(--border-strong)}
.mock-bar span{min-width:0; margin-left:6px; font-size:13px; font-weight:500; color:var(--fg-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mock-bar .mk-chip{margin-left:auto}
.mock-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px}
.mock-tag{position:absolute; right:12px; bottom:10px; font-size:11.5px; font-weight:500; color:var(--fg-subtle); background:var(--surface); padding:1px 6px; border-radius:6px}
.mk-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.mk-head small{display:block; font-size:12.5px; font-weight:500; color:var(--fg-subtle)}
.mk-head b{display:block; font-size:16px; font-weight:600; letter-spacing:-.01em}
.mk-label{font-size:12.5px; font-weight:600; color:var(--fg-subtle); text-transform:none}
.mk-list{border:1px solid var(--border); border-radius:12px; overflow:hidden}
.mk-li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 12px; border-top:1px solid var(--border)}
.mk-li:first-child{border-top:0}
.mk-li.no-ic{grid-template-columns:minmax(0,1fr) auto}
.mk-li b{display:block; font-size:14px; font-weight:600; line-height:1.3}
.mk-li small{display:block; font-size:12.5px; color:var(--fg-subtle)}
.mk-li .amt{font-weight:600; white-space:nowrap}
.mk-li.hl{background:var(--primary-soft)}
.mk-li.off{color:var(--fg-subtle)}
.mk-li.off b{text-decoration:line-through; color:var(--fg-subtle)}
.mk-ic{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--muted-bg); color:var(--fg-muted)}
.mk-ic svg{width:15px; height:15px}
.mk-ic.pri{background:var(--primary-soft); color:var(--primary)}
.mk-ic.ok{background:var(--success-soft); color:var(--success)}
.mk-ic.warn{background:var(--amber-soft); color:var(--amber)}
.mk-ic.bad{background:var(--danger-soft); color:var(--danger)}
.mk-chip{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:999px; font-size:12px; font-weight:600; background:var(--muted-bg); color:var(--fg-muted); white-space:nowrap}
.mk-chip.pri{background:var(--primary-soft); color:var(--primary)}
.mk-chip.ok{background:var(--success-soft); color:var(--success)}
.mk-chip.warn{background:var(--amber-soft); color:var(--amber)}
.mk-chip.bad{background:var(--danger-soft); color:var(--danger)}
.mk-chip .dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.mk-chip svg{width:12px; height:12px}
.mk-kpis{display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:8px}
.mk-kpi{padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--bg-subtle)}
.mk-kpi small{display:block; font-size:12px; font-weight:500; color:var(--fg-subtle)}
.mk-kpi b{display:block; font-size:18px; font-weight:700; letter-spacing:-.02em; line-height:1.3}
.mk-kpi.pri{background:var(--primary-soft); border-color:var(--primary-line)}
.mk-kpi.pri small{color:var(--primary)}
.mk-table{width:100%; border-collapse:collapse; font-size:13px}
.mk-table th{text-align:left; font-size:12px; font-weight:600; color:var(--fg-subtle); padding:6px 8px; border-bottom:1px solid var(--border)}
.mk-table td{padding:7px 8px; border-bottom:1px solid var(--border)}
.mk-table tr:last-child td{border-bottom:0}
.mk-table .num{text-align:right; white-space:nowrap}
.mk-table tfoot td{font-weight:700; border-top:1px solid var(--border-strong)}
.mk-total{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 12px; padding:10px 12px; border-radius:12px; background:var(--bg-subtle); border:1px solid var(--border)}
.mk-total small{display:block; font-size:12.5px; color:var(--fg-subtle); font-weight:500}
.mk-total b{font-size:20px; font-weight:700; letter-spacing:-.03em}
.mk-bar{height:6px; border-radius:6px; background:var(--muted-bg); overflow:hidden}
.mk-bar::after{content:''; display:block; height:100%; width:var(--v,50%); background:var(--primary); border-radius:inherit}
.mk-bar.ok::after{background:var(--success)} .mk-bar.warn::after{background:var(--amber)}
.mk-btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:32px; padding:0 12px; border-radius:8px; font-size:13px; font-weight:600; border:1px solid var(--border-strong); background:var(--surface); white-space:nowrap}
.mk-btn.pri{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.mk-btn svg{width:14px; height:14px}
.mk-field{display:flex; flex-direction:column; gap:4px}
.mk-field small{font-size:12px; font-weight:600; color:var(--fg-subtle)}
.mk-field > span{display:flex; align-items:center; justify-content:space-between; gap:8px; height:34px; padding:0 10px; border-radius:8px; border:1px solid var(--border-strong); background:var(--surface); font-size:13.5px}
.mk-field > span svg{width:14px; height:14px; color:var(--fg-subtle)}
.mk-split{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.mk-split.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.mk-stack{display:flex; flex-direction:column; gap:8px}
.mk-rowx{display:flex; justify-content:space-between; align-items:center; gap:10px}
.mk-note{font-size:12.5px; color:var(--fg-subtle)}
.mock .vm, .vm{width:12px; height:12px; vertical-align:-1px}
.vm.veg{color:var(--veg)} .vm.nonveg{color:var(--nonveg)}
.mk-chips{display:flex; flex-wrap:wrap; gap:6px}
.nowrap{white-space:nowrap}
.mk-stars{display:inline-flex; gap:1px; color:var(--amber)}
.mk-stars svg{width:13px; height:13px}
.mk-stars .off{color:var(--border-strong)}
/* a tape chart: rooms down the side, nights across, stays as bars. Each .tr is a row; a stay is
   <span class="bk" style="--c:2;--s:3"> (starts on day 2, three nights) */
.mk-tape{border:1px solid var(--border); border-radius:12px; overflow:hidden; font-size:12px}
.mk-tape .tr{display:grid; grid-template-columns:52px repeat(var(--days,7),minmax(0,1fr)); align-items:center; min-height:34px; border-top:1px solid var(--border); background:linear-gradient(90deg, var(--border) 1px, transparent 1px) 52px 0 / calc((100% - 52px) / var(--days,7)) 100% repeat-x}
.mk-tape .tr:first-child{border-top:0}
.mk-tape .th{min-height:28px; background-color:var(--bg-subtle); font-weight:600; color:var(--fg-muted)}
.mk-tape .th > span{text-align:center}
.mk-tape .r{grid-row:1; grid-column:1; padding-left:8px; font-weight:600}
.mk-tape .bk{grid-row:1; grid-column:calc(var(--c) + 1) / span var(--s,1); margin:4px 2px; padding:3px 6px; border-radius:6px; background:var(--primary); color:var(--on-primary); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mk-tape .bk.soft{background:var(--primary-soft); color:var(--primary)}
.mk-tape .bk.ok{background:var(--success-soft); color:var(--success)}
.mk-tape .bk.warn{background:var(--amber-soft); color:var(--amber)}
.mk-tape .bk.muted{background:var(--muted-bg); color:var(--fg-subtle)}
/* a calendar of days with a figure in each */
.mk-cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; font-size:12px}
.mk-cal > span{display:flex; flex-direction:column; gap:1px; padding:6px; border-radius:8px; border:1px solid var(--border); background:var(--surface)}
.mk-cal > span small{font-size:11px; color:var(--fg-subtle)}
.mk-cal > span b{font-size:12.5px; font-weight:600}
.mk-cal > .h{border:0; background:none; padding:2px; text-align:center; font-weight:600; color:var(--fg-subtle)}
.mk-cal > .pri{background:var(--primary-soft); border-color:var(--primary-line)}
.mk-cal > .warn{background:var(--amber-soft); border-color:var(--amber-line)}
.mk-cal > .shut{background:var(--muted-bg); color:var(--fg-subtle)}
/* a pipeline of cards in columns */
.mk-kanban{display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:8px}
.mk-col{display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:10px; background:var(--bg-subtle); border:1px solid var(--border)}
.mk-col > small{font-size:11.5px; font-weight:600; color:var(--fg-subtle); display:flex; justify-content:space-between}
.mk-card{padding:8px; border-radius:8px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm); font-size:12px}
.mk-card b{display:block; font-size:12.5px; font-weight:600; line-height:1.3}
.mk-card small{display:block; color:var(--fg-subtle); font-size:11.5px}
.mk-card.hl{border-color:var(--primary-line); box-shadow:0 0 0 2px var(--primary-soft)}
/* a phone, for what staff and guests see on theirs */
.mk-phone{width:min(260px, 100%); margin-inline:auto; padding:10px; border-radius:34px; background:var(--fg); box-shadow:var(--shadow-lg)}
.mk-phone > div{border-radius:26px; background:var(--bg); overflow:hidden; min-height:420px; display:flex; flex-direction:column}
.mk-phone .notch{width:84px; height:20px; margin:8px auto 2px; border-radius:999px; background:var(--fg)}
.mk-phone .screen{padding:10px 14px 16px; display:flex; flex-direction:column; gap:10px; font-size:13px}
/* a conversation */
.mk-chat{display:flex; flex-direction:column; gap:8px}
.mk-msg{max-width:84%; padding:8px 11px; border-radius:14px; font-size:13px; line-height:1.4}
.mk-msg.in{align-self:flex-start; background:var(--muted-bg); border-bottom-left-radius:4px}
.mk-msg.out{align-self:flex-end; background:var(--primary); color:var(--on-primary); border-bottom-right-radius:4px}
.mk-msg small{display:block; margin-top:3px; font-size:11px; font-weight:600}
/* a printed slip: a kitchen ticket, a voucher */
.mk-slip{padding:12px 14px; border-radius:6px; background:var(--surface); border:1px dashed var(--border-strong); font-family:var(--mono); font-size:12px; line-height:1.55}
.mk-slip b{font-family:var(--sans); font-weight:700}
/* a second window overlapping the first */
.mock-pair{position:relative}
.mock-pair > .mock:last-child{position:relative; z-index:2; width:min(68%, 330px); margin:-64px 0 0 auto}
.mock-pair.left > .mock:last-child{margin-left:0}
.mock-float{position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 12px; border-radius:12px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); font-size:14px; font-weight:600; white-space:nowrap}
.mock-float small{display:block; font-size:12.5px; font-weight:500; color:var(--fg-subtle)}
.mock-float .mk-ic{flex:none}

@media (max-width:640px){
  .mock-pair > .mock:last-child{width:auto; margin:-24px 12px 0}
  .mk-cal{gap:3px; font-size:11px}
  .mk-cal > span{padding:4px}
  .mk-cal > span b{font-size:11px}
  .mock-body{padding:14px}
  .mk-kpis{--n:2!important}
  .mk-kanban{--n:2!important}
}