/* Demo-only layout for the KitlyApps-generation apps (Plated, Hostly, AutoLog, ...).
   Linked by scripts/build-kitly-demos.ts. The paid apps under public/apps are never modified. */
:root{--kitly-demo-offset:calc(44px + env(safe-area-inset-top));--kitly-demo-height:100dvh}
#kitly-demo-banner{position:fixed;top:0;left:0;right:0;z-index:200;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:calc(6px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 6px max(14px,env(safe-area-inset-left));background:#16141f;color:#f6f4ef;font:500 13px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#kitly-demo-banner p{margin:0;display:flex;align-items:center;gap:8px;min-width:0}
.kitly-demo-mark{width:22px;height:22px;flex:none;display:block}
#kitly-demo-banner a{flex:none;color:#16141f;background:#f4f1ff;text-decoration:none;border-radius:999px;padding:6px 12px;font-weight:650;font-size:12px;white-space:nowrap}
#kitly-demo-banner a:hover{background:#fff}
#kitly-demo-note{position:fixed;top:calc(var(--kitly-demo-offset) + 8px);left:50%;transform:translateX(-50%);z-index:220;max-width:calc(100% - 24px);box-sizing:border-box;background:#fff;color:#16141f;border-radius:999px;padding:8px 14px;font:600 13px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.18);text-align:center}
#kitly-demo-note[hidden]{display:none!important}
body{padding-top:var(--kitly-demo-offset)!important}
.app{min-height:calc(100dvh - var(--kitly-demo-offset))}
aside{top:var(--kitly-demo-offset)!important;height:calc(100dvh - var(--kitly-demo-offset))!important}
.mtop{top:var(--kitly-demo-offset)!important;padding-top:10px!important}
.ob{min-height:calc(100dvh - var(--kitly-demo-offset))!important}
.overlay{top:var(--kitly-demo-offset)!important}
.modal{max-height:calc(var(--kitly-demo-height) - var(--kitly-demo-offset) - 32px)!important}
@media print{#kitly-demo-banner,#kitly-demo-note{display:none!important}body{padding-top:0!important}}
@media(max-width:400px){
 #kitly-demo-banner{gap:8px;padding-inline:12px;font-size:12px}
 #kitly-demo-banner a{padding-inline:10px}
}
@media(max-width:350px){
 #kitly-demo-banner{padding-inline:10px;font-size:11px}
 #kitly-demo-banner a{padding-inline:8px;font-size:11px}
 .kitly-demo-mark{width:18px;height:18px}
}