/* The browser demo's corner note. Not part of the app: the stage under it
   is as unbranded as ever; this sits beside it and folds to a pill. */

#demo-note { position: fixed; left: 16px; bottom: 16px; z-index: 45; font-family: "Nunito", "Segoe UI", system-ui, sans-serif; font-size: 14px; color: #1B1F3B; max-width: min(400px, calc(100vw - 32px)); }
#demo-note .demo-card { background: #fff; border: 1px solid #DEE1F1; border-radius: 16px; padding: 14px 16px; box-shadow: 0 18px 50px -24px rgba(27, 31, 59, .45); }
#demo-note .demo-card strong { display: block; font-size: 15px; margin-bottom: 4px; color: #3543B8; }
#demo-note .demo-card p { margin: 0 0 10px; line-height: 1.45; color: #4A4F6E; }
#demo-note .demo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#demo-note .demo-btn { font: inherit; font-weight: 800; border-radius: 999px; padding: 6px 14px; border: 2px solid transparent; background: #4B5CE4; color: #fff; cursor: pointer; text-decoration: none; }
#demo-note .demo-btn.ghost { background: #F6F7FB; color: #1B1F3B; border-color: #DEE1F1; }
#demo-note .demo-btn:hover { filter: brightness(1.06); }
#demo-note .demo-pill { display: none; font: inherit; font-weight: 800; border: 2px solid #DEE1F1; background: #fff; color: #3543B8; border-radius: 999px; padding: 6px 14px; cursor: pointer; box-shadow: 0 8px 24px -12px rgba(27, 31, 59, .5); }
#demo-note[data-folded="1"] .demo-card { display: none; }
#demo-note[data-folded="1"] .demo-pill { display: inline-block; }
/* Out of the way while the drawer, the cheat sheet or a dialog is up. */
body:has(#admin:not([hidden])) #demo-note, body:has(#cheatsheet:not([hidden])) #demo-note, body:has(#modal-root:not([hidden])) #demo-note { display: none; }
.demo-picker { position: fixed; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 600px) { #demo-note { left: 8px; right: 8px; bottom: 8px; max-width: none; } }
/* The kiosk drawer is 760 px wide; a phone trying the demo gets it edge to edge. */
@media (max-width: 900px) { #admin { width: 100vw !important; } }