/* /demo: the same tablet engine, full screen, behaving like an installed app */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--formica); }
body.demo { position: fixed; inset: 0; margin: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body.demo .tablet, body.demo .tablet.is-narrow { position: fixed; inset: 0; width: 100%; height: 100dvh; aspect-ratio: auto; border-radius: 0; }
body.demo .tablet { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.demo .tablet :is(textarea, select, input:not([readonly])) { -webkit-user-select: text; user-select: text; }
body.demo .tablet img { -webkit-user-drag: none; }
body.demo .tablet * { scrollbar-width: none; }
body.demo .tablet *::-webkit-scrollbar { display: none; width: 0; height: 0; }
body.demo .tablet :is(.t-items, .t-sheet-body, .t-sheet-grid, .t-check-scroll, .t-usuals, .t-cats, .t-pay, .t-keypad, .t-set-body, .t-dish-text) { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* safe areas: tablet layout */
body.demo .t-top { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-left: calc(24px + env(safe-area-inset-left, 0px)); padding-right: calc(24px + env(safe-area-inset-right, 0px)); }
body.demo .t-sign { padding: calc(44px + env(safe-area-inset-top, 0px)) 44px calc(44px + env(safe-area-inset-bottom, 0px)) calc(44px + env(safe-area-inset-left, 0px)); }
body.demo .t-keypad { padding: calc(40px + env(safe-area-inset-top, 0px)) calc(56px + env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) 56px; }
@container (max-width: 1080px) {
  body.demo .t-sign { padding: calc(32px + env(safe-area-inset-top, 0px)) 32px calc(32px + env(safe-area-inset-bottom, 0px)) calc(32px + env(safe-area-inset-left, 0px)); }
  body.demo .t-keypad { padding: calc(28px + env(safe-area-inset-top, 0px)) calc(32px + env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) 32px; }
}
body.demo .t-usuals { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); padding-left: calc(34px + env(safe-area-inset-left, 0px)); }
body.demo .t-items { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
body.demo .t-cats { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding-left: calc(10px + env(safe-area-inset-left, 0px)); }
body.demo .t-check { padding-right: env(safe-area-inset-right, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body.demo .t-sheet-foot, body.demo .t-sheet-item .t-sheet-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
body.demo .t-toast { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
body.demo .t-toast.t-toast-top { top: calc(22px + env(safe-area-inset-top, 0px)); bottom: auto; }
body.demo .t-gear-w { top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); }
body.demo .t-sheet { max-height: calc(100% - 20px - env(safe-area-inset-top, 0px)); }
body.demo .t-sheet-sm { max-height: calc(100% - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }

/* safe areas: phone layout */
body.demo .tablet.is-narrow .t-top { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-left: calc(10px + env(safe-area-inset-left, 0px)); padding-right: calc(10px + env(safe-area-inset-right, 0px)); }
body.demo .tablet.is-narrow .t-sign { padding: calc(18px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) 18px calc(20px + env(safe-area-inset-left, 0px)); }
body.demo .tablet.is-narrow .t-keypad { padding: 18px calc(16px + env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); }
body.demo .tablet.is-narrow .t-usuals { padding: 18px calc(16px + env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); }
body.demo .tablet.is-narrow .t-items { padding: 16px calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); }
body.demo .tablet.is-narrow .t-cats { padding: 8px calc(8px + env(safe-area-inset-right, 0px)) 8px calc(8px + env(safe-area-inset-left, 0px)); }
body.demo .tablet.is-narrow .t-sheet-sm { padding-bottom: env(safe-area-inset-bottom, 0px); max-height: calc(100% - 12px - env(safe-area-inset-top, 0px)); }
body.demo .tablet.is-narrow .t-sheet-set { padding-bottom: 0; }
body.demo .tablet.is-narrow .t-set-body { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
body.demo .tablet.is-narrow .t-sheet-item { max-height: calc(100% - 12px - env(safe-area-inset-top, 0px)); }
body.demo .tablet.is-narrow .t-toast { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
body.demo .tablet.is-narrow .t-toast.t-toast-top { top: calc(88px + env(safe-area-inset-top, 0px)); bottom: auto; }
body.demo .tablet.is-narrow .t-gear-w { top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); }
@container (min-width: 600px) {
  body.demo .tablet.is-narrow .t-welcome { grid-template-rows: minmax(40%, auto) minmax(0, 1fr); }
  body.demo .tablet.is-narrow .t-keypad { justify-content: flex-start; padding-top: 48px; }
  body.demo .tablet.is-narrow .t-usuals, body.demo .tablet.is-narrow .t-items { padding: 24px calc(24px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px)); }
}

/* first frame: the welcome screen's own geometry with shimmer bars where the words go */
.t-skel .sk { display: block; height: .9em; margin: .18em 0; max-width: 100%; border-radius: 6px; }
.t-skel .t-seat .sk, .t-skel .t-q .sk, .t-skel .t-help .sk { margin-inline: auto; }
.t-skel .t-seat .sk { margin-inline: 0; }
.t-skel .sk-dark { background: linear-gradient(90deg, rgba(245, 240, 232, .1), rgba(245, 240, 232, .2), rgba(245, 240, 232, .1)); background-size: 200% 100%; }
.t-skel .sk-pill { height: 60px; border-radius: 999px; align-self: flex-start; }
.t-skel .t-phone { border: 2px solid var(--line); }
.t-skel .t-key { display: block; }
.t-skel .sk-btn { box-shadow: none; opacity: .18; border-radius: 999px; }
.tablet.is-narrow .t-skel .sk-pill { height: 56px; width: 56px !important; }