/* A connected restaurant: physical KDS monitor, receipt printer and guest tables. */
[data-ordering-motion]{--ordering-table:#94abc9;--ordering-dining:#efbe7e;--ordering-reserved:#b69be7;--ordering-cleaning:#8abbe2;--ordering-done:#78d4ae;--ordering-track:#30415c;--restaurant-ink:#dce8fb;--restaurant-muted:#8fa4c3;--restaurant-surface:#172235;--restaurant-screen:#0e1828;--restaurant-border:#4b64844d;--restaurant-floor:#14233b;--restaurant-link:#6c9dea}
html[data-theme="light"] [data-ordering-motion]{--ordering-table:#6884a5;--ordering-dining:#a16a21;--ordering-reserved:#7e63ad;--ordering-cleaning:#316a9a;--ordering-done:#287b60;--ordering-track:#cfdef2;--restaurant-ink:#243e63;--restaurant-muted:#6a83a4;--restaurant-surface:#dbe8fb;--restaurant-screen:#f7faff;--restaurant-border:#94b3df70;--restaurant-floor:#dfebfc;--restaurant-link:#4f85dd}
[data-ordering-motion] .restaurant-scene{position:relative;width:100%;max-width:560px;aspect-ratio:600/560;container-type:inline-size;isolation:isolate;color:var(--restaurant-ink);font-size:10px}
[data-ordering-motion] .restaurant-scene-title{position:absolute;top:0;left:3%;right:3%;display:flex;align-items:center;gap:1.4cqw;font-size:clamp(6px,1.65cqw,10px);letter-spacing:.08em;color:var(--restaurant-muted)}
[data-ordering-motion] .restaurant-scene-title>i{width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px color-mix(in srgb,var(--accent) 40%,transparent)}
[data-ordering-motion] .restaurant-scene-title>b{margin-left:auto;font:500 clamp(4px,1.05cqw,7px) var(--mono);letter-spacing:.13em;white-space:nowrap}
[data-ordering-motion] .restaurant-floor{position:absolute;left:-1%;right:-1%;top:47%;bottom:1%;z-index:-2;border:1px solid var(--restaurant-border);border-radius:50% 50% 18% 18% / 12% 12% 8% 8%;background:linear-gradient(0deg,transparent 95%,color-mix(in srgb,var(--restaurant-link) 10%,transparent) 95%),linear-gradient(90deg,transparent 95%,color-mix(in srgb,var(--restaurant-link) 8%,transparent) 95%),linear-gradient(150deg,color-mix(in srgb,var(--restaurant-floor) 75%,transparent),color-mix(in srgb,var(--restaurant-floor) 25%,transparent));background-size:8% 16%,8% 16%,100% 100%;box-shadow:0 25px 50px color-mix(in srgb,var(--restaurant-link) 7%,transparent);transform:perspective(900px) rotateX(12deg)}
[data-ordering-motion] .restaurant-flow{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none}
[data-ordering-motion] .restaurant-flow path{stroke:var(--restaurant-link);stroke-width:1;opacity:.15;stroke-linecap:round;stroke-linejoin:round}
[data-ordering-motion] .restaurant-flow .is-ordering-link-active{opacity:.8;stroke-width:1.5;stroke-dasharray:6 9}
[data-ordering-motion].is-ordering-running .restaurant-flow .is-ordering-link-active{animation:restaurant-order-flow 2s linear infinite}
[data-ordering-stage="printing"] .restaurant-flow .restaurant-printer-link{stroke:var(--ordering-dining);opacity:.9;stroke-dasharray:6 8;animation:restaurant-order-flow 1.4s linear infinite;animation-play-state:paused}
[data-ordering-stage="printing"].is-ordering-running .restaurant-flow .restaurant-printer-link{animation-play-state:running}
[data-ordering-motion] .restaurant-device-label{display:flex;align-items:center;gap:1cqw;font-size:clamp(6px,1.9cqw,11px);line-height:1.5;color:var(--restaurant-ink)}
[data-ordering-motion] .restaurant-device-label>span{font:clamp(5px,1.3cqw,8px) var(--mono);color:var(--restaurant-link)}
[data-ordering-motion] .restaurant-device-label>b{font-weight:500;overflow-wrap:anywhere}
[data-ordering-motion] .restaurant-monitor{position:absolute;left:3%;top:8%;width:63%;height:45%;z-index:2}
[data-ordering-motion] .restaurant-monitor>.restaurant-device-label{height:11%;align-items:flex-start}
[data-ordering-motion] .monitor-shell{position:relative;height:78%;padding:3% 3% 5%;border:1px solid #758ba377;border-radius:8px;background:linear-gradient(135deg,#6f8196,#26374e 8%,#19283f 84%,#8190a5);box-shadow:2px 7px 0 #091321,7px 16px 24px #020a1629;transform:perspective(1000px) rotateY(7deg) rotateX(3deg)}
[data-ordering-motion] .monitor-screen{height:100%;padding:3.5% 4%;overflow:hidden;background:var(--restaurant-screen);border-radius:3px;display:flex;flex-direction:column;gap:4%;border:1px solid #5e7a9d55}
[data-ordering-motion] .monitor-brand{position:absolute;left:0;right:0;bottom:1%;text-align:center;color:#abc0d9;font:500 clamp(4px,.95cqw,6px) var(--mono);letter-spacing:.22em}
[data-ordering-motion] .monitor-stand{position:absolute;left:44%;width:12%;height:10%;bottom:3%;background:linear-gradient(90deg,#2d405b,#75869a,#2e415d);clip-path:polygon(16% 0,84% 0,100% 100%,0 100%);z-index:-1}
[data-ordering-motion] .monitor-foot{position:absolute;left:32%;width:36%;height:4%;bottom:0;border:1px solid #617b99;border-radius:50%;background:linear-gradient(180deg,#8999ae,#2e435d);box-shadow:0 5px 8px #07152926}
[data-ordering-motion] .kds-header{display:flex;align-items:center;gap:2%;flex-shrink:0;color:var(--restaurant-muted);font-size:clamp(5px,1.5cqw,9px);min-height:10%}
[data-ordering-motion] .kds-header>b{font:600 clamp(5px,1.55cqw,9px) var(--mono);color:var(--restaurant-ink)}
[data-ordering-motion] .kds-header>span:not(.kds-live-dot){margin-left:2%;margin-right:auto;min-width:0;overflow-wrap:anywhere}
[data-ordering-motion] .kds-live-dot{width:4px;height:4px;background:var(--ordering-done);border-radius:50%}
[data-ordering-motion] .kds-header>i{width:2px;height:2px;background:var(--restaurant-muted);border-radius:50%}
[data-ordering-motion] .kds-order{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4%;padding:3% 4%;border:1px solid color-mix(in srgb,var(--restaurant-link) 45%,transparent);background:color-mix(in srgb,var(--restaurant-link) 9%,transparent);border-radius:4px;flex:1;min-height:0}
[data-ordering-motion] .kds-order-id{display:flex;flex-wrap:wrap;align-items:center;gap:3% 8%;min-width:0}
[data-ordering-motion] .kds-order-id>span{font-size:clamp(4px,1.3cqw,8px);color:var(--restaurant-muted);width:100%;line-height:1.5}
[data-ordering-motion] .kds-order-id>b{font:600 clamp(9px,3.2cqw,19px) var(--mono);letter-spacing:-.05em;color:var(--restaurant-ink)}
[data-ordering-motion] .kds-order-id>i{width:3px;height:3px;border-radius:50%;background:var(--accent)}
[data-ordering-motion] .status-pill[data-ordering-kitchen]{display:grid;align-items:center;margin-left:auto;max-width:100%;white-space:normal;text-align:center;font-size:clamp(4px,1.4cqw,8px);padding:5% 8%;line-height:1.45;overflow-wrap:anywhere;color:var(--ordering-dining);background:color-mix(in srgb,var(--ordering-dining) 10%,transparent);transition:color .35s,background-color .35s}
[data-ordering-motion] [data-kitchen-label],[data-ordering-motion] [data-printer-label],[data-ordering-motion] [data-table-label]{grid-area:1/1;visibility:hidden}
[data-ordering-kitchen="waiting"] [data-kitchen-label="waiting"],[data-ordering-kitchen="received"] [data-kitchen-label="received"],[data-ordering-kitchen="cooking"] [data-kitchen-label="cooking"],[data-ordering-kitchen="ready"] [data-kitchen-label="ready"],[data-ordering-kitchen="served"] [data-kitchen-label="served"],[data-ordering-kitchen="completed"] [data-kitchen-label="completed"]{visibility:visible}
[data-ordering-motion] .status-pill[data-ordering-kitchen="served"],[data-ordering-motion] .status-pill[data-ordering-kitchen="completed"]{color:var(--ordering-done);background:color-mix(in srgb,var(--ordering-done) 10%,transparent)}
[data-ordering-motion] .kds-dishes{display:flex;gap:5%;grid-column:1/-1}
[data-ordering-motion] .kds-dishes>i{height:3px;width:28%;border-radius:2px;background:color-mix(in srgb,var(--restaurant-link) 28%,transparent)}
[data-ordering-motion] .kds-dishes>i:nth-child(2){width:45%;opacity:.7}
[data-ordering-motion] .kds-dishes>i:nth-child(3){width:18%;opacity:.5}
[data-ordering-motion] .kds-queue{display:flex;align-items:center;gap:5%;padding:0 4%;min-height:12%;font:clamp(5px,1.4cqw,8px) var(--mono);color:var(--restaurant-muted)}
[data-ordering-motion] .kds-queue>i{width:27%;height:2px;background:color-mix(in srgb,var(--restaurant-muted) 20%,transparent)}
[data-ordering-motion] .kds-queue>i:nth-of-type(2){width:14%}
[data-ordering-motion] .kds-queue>b{margin-left:auto;font:inherit}
[data-ordering-motion] .ordering-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex-shrink:0;height:3px;margin-top:1%}
[data-ordering-motion] .ordering-progress i{position:relative;overflow:hidden;border-radius:2px;background:var(--ordering-track);transition:background-color .4s}
[data-ordering-motion] .ordering-progress .is-ordering-done{background:var(--ordering-dining)}
[data-ordering-stage="served"] .ordering-progress .is-ordering-done,[data-ordering-stage="clearing"] .ordering-progress .is-ordering-done{background:var(--ordering-done)}
[data-ordering-motion] .ordering-progress .is-ordering-current:after{content:"";position:absolute;inset:0;background:var(--ordering-dining);transform-origin:left;animation:ordering-kitchen-progress 2.2s linear both;animation-play-state:paused}
[data-ordering-motion].is-ordering-running .ordering-progress .is-ordering-current:after{animation-play-state:running}
[data-ordering-motion] .restaurant-printer{position:absolute;left:75%;top:15%;width:23%;height:37%;z-index:3}
[data-ordering-motion] .restaurant-printer>.restaurant-device-label{position:absolute;left:-8%;right:-3%;top:-12%;min-height:12%;font-size:clamp(5px,1.65cqw,10px)}
[data-ordering-motion] .printer-body{position:absolute;top:7%;left:0;width:100%;height:43%;background:linear-gradient(120deg,#9baec3,#e2ebf5 48%,#71869e);border:1px solid #8298b3;border-radius:9px 11px 8px 8px;box-shadow:3px 6px 0 #304762,6px 12px 17px #030b1b28;z-index:2;transform:skewY(3deg)}
[data-ordering-motion] .printer-lid{position:absolute;left:4%;right:4%;top:-10%;height:36%;border-radius:9px 10px 3px 3px;background:linear-gradient(150deg,#e1eafa,#8098b6);border:1px solid #90a6c0;box-shadow:0 2px 0 #eff5ff66}
[data-ordering-motion] .printer-body>b{position:absolute;left:12%;top:38%;font:600 clamp(5px,1.4cqw,8px) var(--mono);letter-spacing:.12em;color:#253a58}
[data-ordering-motion] .printer-led{position:absolute;right:13%;top:38%;width:4px;height:4px;border-radius:50%;background:#72e4b1;box-shadow:0 0 5px #66e8b277}
[data-ordering-motion] .printer-slot{position:absolute;left:10%;right:10%;height:8%;top:70%;border-radius:3px;background:#15253c;box-shadow:0 1px 0 #eaf4ff99}
[data-ordering-motion] .printer-button{position:absolute;right:13%;bottom:5%;width:11%;height:6%;border-radius:2px;background:#526c8c}
[data-ordering-motion] .printer-output{position:absolute;left:12%;right:8%;top:41%;height:58%;overflow:hidden;z-index:3;pointer-events:none}
[data-ordering-motion] .printer-paper{position:absolute;inset:0 5% 3%;padding:8% 9% 10%;display:flex;flex-direction:column;gap:5%;background:linear-gradient(100deg,#edf2fa,#fff 35%,#f4f7fc);color:#39506d;box-shadow:0 7px 8px #050d1c22;clip-path:polygon(0 0,100% 0,100% 94%,94% 98%,88% 94%,82% 98%,76% 94%,70% 98%,64% 94%,58% 98%,52% 94%,46% 98%,40% 94%,34% 98%,28% 94%,22% 98%,16% 94%,10% 98%,4% 94%,0 97%);transform:translateY(0);transform-origin:top}
[data-printer-state="idle"] .printer-paper{transform:translateY(-105%);opacity:0}
[data-printer-state="printing"] .printer-paper{animation:restaurant-receipt-feed 1.6s cubic-bezier(.2,.7,.3,1) both;animation-play-state:paused}
[data-ordering-motion].is-ordering-running [data-printer-state="printing"] .printer-paper{animation-play-state:running}
[data-ordering-motion] .printer-paper>small{font:clamp(3px,.83cqw,5px) var(--mono);letter-spacing:.02em;white-space:nowrap}
[data-ordering-motion] .printer-paper>b{font-size:clamp(4px,1.1cqw,7px);font-weight:500;line-height:1.4;overflow-wrap:anywhere}
[data-ordering-motion] .printer-paper>strong{font:600 clamp(9px,3cqw,18px) var(--mono);padding-bottom:5%;border-bottom:1px dashed #8a9cb655}
[data-ordering-motion] .receipt-lines{display:flex;flex-direction:column;gap:3px;flex:1;justify-content:center}
[data-ordering-motion] .receipt-lines>i{width:100%;height:1px;background:repeating-linear-gradient(90deg,#9ba9bb 0 35%,transparent 35% 70%,#9ba9bb 70% 95%);opacity:.8}
[data-ordering-motion] .receipt-barcode{height:12%;min-height:4px;background:repeating-linear-gradient(90deg,#526782 0 1px,transparent 1px 2px,#526782 2px 4px,transparent 4px 6px);opacity:.7}
[data-ordering-motion] .printer-status{position:absolute;left:-8%;right:-8%;top:104%;display:grid;text-align:center;font-size:clamp(5px,1.5cqw,9px);line-height:1.5;color:var(--restaurant-muted);overflow-wrap:anywhere}
[data-printer-state="idle"] [data-printer-label="idle"],[data-printer-state="printing"] [data-printer-label="printing"],[data-printer-state="printed"] [data-printer-label="printed"]{visibility:visible}
[data-printer-state="printing"] .printer-status{color:var(--ordering-dining)}
[data-ordering-motion] .restaurant-dining{position:absolute;left:5%;right:5%;top:62%;height:34%;z-index:2}
[data-ordering-motion] .restaurant-dining>.restaurant-device-label{position:absolute;top:-16%;left:0;right:0;gap:1cqw;font-size:clamp(5px,1.65cqw,10px)}
[data-ordering-motion] .restaurant-dining>.restaurant-device-label>i{height:1px;flex:1;margin-left:1cqw;background:var(--restaurant-border)}
[data-ordering-motion] .table-grid{height:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12% 11%;margin:0;padding:0 2%}
[data-ordering-motion] .table-item{position:relative;min-width:0;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;align-items:center;gap:1px;padding:5% 10%;border:1px solid color-mix(in srgb,var(--ordering-table) 38%,transparent);border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--restaurant-surface) 95%,transparent),color-mix(in srgb,var(--restaurant-screen) 90%,transparent));box-shadow:2px 4px 0 color-mix(in srgb,var(--ordering-table) 30%,var(--restaurant-screen)),3px 10px 15px #06152b12;transform:perspective(600px) rotateX(8deg) rotateY(-4deg);transition:background-color .4s,border-color .4s,box-shadow .4s}
[data-ordering-motion] .table-item:before,[data-ordering-motion] .table-item:after{top:26%;height:48%;width:7%;border-radius:3px;background:color-mix(in srgb,var(--ordering-table) 70%,var(--restaurant-screen));box-shadow:0 2px 0 #263e5a44}
[data-ordering-motion] .table-item:before{left:-10%}[data-ordering-motion] .table-item:after{right:-10%}
[data-ordering-motion] .table-item>[data-ordering-number]{font:600 clamp(6px,1.8cqw,11px) var(--mono);color:var(--restaurant-ink);grid-column:1/-1;letter-spacing:.03em}
[data-ordering-motion] .ordering-dining-icon{display:grid;place-items:center;width:clamp(14px,4.8cqw,27px);height:clamp(14px,4.8cqw,27px);border-radius:50%;background:color-mix(in srgb,var(--ordering-table) 8%,transparent);border:1px solid color-mix(in srgb,var(--ordering-table) 18%,transparent);color:var(--ordering-table);transition:color .4s,background-color .4s,box-shadow .4s;justify-self:center}
[data-ordering-motion] .table-item .ordering-dining-icon svg{width:60%;height:60%;color:inherit}
[data-ordering-motion] .table-qr{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;width:clamp(7px,2cqw,12px);height:clamp(9px,2.6cqw,16px);padding:2px 1px 4px;border:1px solid var(--restaurant-muted);border-radius:1px;transform:rotate(6deg);justify-self:center;opacity:.75;background:color-mix(in srgb,var(--restaurant-screen) 85%,transparent)}
[data-ordering-motion] .table-qr>i{border:1px solid var(--restaurant-muted)}
[data-ordering-motion] .table-item small{grid-column:1/-1;display:grid;align-items:center;width:100%;line-height:1.4;text-align:center;overflow-wrap:anywhere;font-size:clamp(4px,1.35cqw,8px);color:var(--ordering-table)}
[data-table-state="available"] [data-table-label="available"],[data-table-state="reserved"] [data-table-label="reserved"],[data-table-state="dining"] [data-table-label="dining"],[data-table-state="clearing"] [data-table-label="clearing"]{visibility:visible}
[data-ordering-motion] .table-item[data-table-state="dining"]{border-color:color-mix(in srgb,var(--ordering-dining) 45%,transparent)}
[data-ordering-motion] .table-item[data-table-state="reserved"]{border-color:color-mix(in srgb,var(--ordering-reserved) 38%,transparent)}
[data-ordering-motion] .table-item[data-table-state="clearing"]{border-color:color-mix(in srgb,var(--ordering-cleaning) 40%,transparent)}
[data-ordering-motion] [data-table-state="dining"] :is(small,.ordering-dining-icon){color:var(--ordering-dining)}
[data-ordering-motion] [data-table-state="reserved"] :is(small,.ordering-dining-icon){color:var(--ordering-reserved)}
[data-ordering-motion] [data-table-state="clearing"] :is(small,.ordering-dining-icon){color:var(--ordering-cleaning)}
[data-ordering-motion] .table-item.is-ordering-active{box-shadow:2px 4px 0 color-mix(in srgb,var(--ordering-dining) 35%,var(--restaurant-screen)),0 0 0 2px color-mix(in srgb,var(--ordering-dining) 12%,transparent),0 8px 23px color-mix(in srgb,var(--ordering-dining) 10%,transparent)}
[data-ordering-motion] .is-ordering-active .ordering-dining-icon{background:color-mix(in srgb,var(--ordering-dining) 10%,transparent);box-shadow:0 0 13px color-mix(in srgb,var(--ordering-dining) 18%,transparent)}
[data-ordering-ready="true"] .table-item{animation:restaurant-table-enter .65s ease-out both;animation-delay:calc(var(--table-index)*70ms);animation-play-state:paused}
[data-ordering-motion].is-ordering-running .table-item{animation-play-state:running}
[data-ordering-motion].compact{padding-top:0;padding-bottom:0;align-items:center}
[data-ordering-motion].compact .restaurant-scene{width:250px;max-width:100%;flex-shrink:0}
[data-ordering-motion].compact .restaurant-scene-title>b{display:none}
@keyframes restaurant-table-enter{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
@keyframes restaurant-order-flow{to{stroke-dashoffset:-30}}
@keyframes restaurant-receipt-feed{from{transform:translateY(-105%);opacity:.5}to{transform:translateY(0);opacity:1}}
@keyframes ordering-kitchen-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:700px){[data-ordering-motion].compact .restaurant-scene{width:260px}[data-ordering-motion] .restaurant-scene-title>b{font-size:4px}[data-ordering-motion] .monitor-shell{border-radius:5px}[data-ordering-motion] .table-item{border-radius:5px}[data-ordering-motion] .restaurant-printer>.restaurant-device-label{font-size:clamp(5px,1.6cqw,9px)}}
@media(prefers-reduced-motion:reduce){[data-ordering-motion] .table-item{animation:none!important;opacity:1!important;translate:0 0!important}[data-ordering-motion] .restaurant-flow path,[data-ordering-motion] .printer-paper,[data-ordering-motion] .ordering-progress i:after{animation:none!important}[data-ordering-motion] :is(.table-item,.ordering-dining-icon,.status-pill,.ordering-progress i){transition:none!important}}