/* Demo bar (browser demos only), Brand Pack: a slim white bar above the black till header, black
 * text, Cobalt for the link and focus. 52px tall on tills; two rows on phones. */
.demo-banner{position:fixed;inset:0 0 auto;z-index:10000;display:flex;align-items:center;gap:6px 14px;min-height:52px;padding:4px max(12px,env(safe-area-inset-left));background:#FFFFFF;color:#08080A;border-bottom:1px solid #E3E3E8;font:500 13px Geist,system-ui,sans-serif}
.demo-banner a{color:#2D4BFF;font-weight:600;text-decoration:none}
.demo-banner a:hover{text-decoration:underline}
.demo-banner .demo-back{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.demo-banner .demo-name{font-weight:650}
.demo-banner .demo-pin{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:999px;background:#F4F4F6;font:500 12px "Geist Mono",ui-monospace,monospace}
.demo-banner .demo-pin b{letter-spacing:.08em}
.demo-banner .demo-note{color:#3A3A40;font-size:12.5px}
.demo-banner #demoReceipt{margin-left:auto}
.demo-banner button{min-height:44px;padding:0 12px;border:1px solid #C9C9D1;border-radius:8px;background:#FFFFFF;color:#08080A;font:600 13px Geist,system-ui,sans-serif;cursor:pointer}
.demo-banner button:hover{border-color:#08080A}
.demo-banner button:active{background:#E0E8FF;border-color:#2D4BFF}
.demo-banner :focus-visible{outline:3px solid #2D4BFF;outline-offset:2px}
body{padding-top:52px}.app-shell{height:calc(100dvh - 52px)}
.demo-receipt-dialog{max-width:min(92vw,620px);max-height:90dvh;padding:24px;border:0;border-radius:16px;background:#FFFFFF;color:#08080A}.demo-receipt-dialog canvas{display:block;width:100%;height:auto;margin:18px auto}.demo-receipt-dialog::backdrop{background:#08080AB3}@media(max-width:1100px){.demo-banner .demo-note{display:none}}
@media(max-width:820px){
  .demo-banner{gap:4px 8px;padding:4px 10px;font-size:12.5px}
  .demo-banner .demo-name{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .demo-banner .demo-pin,.demo-banner #demoReceipt{display:none}
}
/* Phone app demo: the till fills the phone frame; the controls sit beside the phone. */
html.demo-framed .demo-banner{display:none}
html.demo-framed body{padding-top:0}
html.demo-framed .app-shell{height:100dvh}

.demo-design { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; }
.demo-design select { width: 116px; min-height: 44px; padding: 0 8px; font-size: 12px; border: 1px solid #C9C9D1; border-radius: 8px; background: #FFFFFF; color: #08080A; }
.demo-banner #demoReceipt { margin-left: 0; }
@media (max-width: 760px) { .demo-design { font-size: 0; } .demo-design select { width: 100px; } .demo-banner .demo-name { font-size: 11px; } .demo-banner #demoReset { padding: 0 6px; font-size: 11px; } }