/* One opaque canvas for the document, safe areas and elastic overscroll.
   Page gradients are sampled by canvas.js; desktop layouts are untouched. */
@media (max-width:1024px), (hover:none) and (pointer:coarse) {
    /* Native browser tint changes immediately. Do not animate an opaque canvas
       through transparency while measuring or switching the page theme. */
    html[data-app-page],html[data-app-page] body { transition-property:color !important; }
    html[data-app-page][data-mobile-canvas="ready"],
    html[data-app-page][data-mobile-canvas="ready"] body {
        box-sizing:border-box;
        min-height:100vh !important;
        min-height:100lvh !important;
        background-color:var(--viewport-canvas-color) !important;
        background-image:
            linear-gradient(to bottom,
                var(--viewport-canvas-color),
                transparent max(32px,env(safe-area-inset-top,0px)),
                transparent calc(100% - max(32px,env(safe-area-inset-bottom,0px))),
                var(--viewport-canvas-color)),
            var(--viewport-canvas-image,none) !important;
        background-position:0 0,var(--viewport-canvas-position,0% 0%) !important;
        background-size:100% 100%,var(--viewport-canvas-size,auto) !important;
        background-repeat:no-repeat,var(--viewport-canvas-repeat,repeat) !important;
        background-attachment:scroll !important;
        color-scheme:var(--viewport-canvas-scheme);
    }
    /* These pages have no safe-area top padding in their inner containers. */
    html[data-mobile-canvas="ready"]:is([data-app-page="index"],[data-app-page="admin"],[data-app-page="user-center"]) body {
        padding-top:max(var(--viewport-body-top,0px),env(safe-area-inset-top,0px)) !important;
        padding-bottom:max(var(--viewport-body-bottom,0px),env(safe-area-inset-bottom,0px)) !important;
    }
    html[data-mobile-canvas="ready"]:is([data-app-page="index"],[data-app-page="admin"]) body {
        padding-left:max(var(--viewport-body-left,0px),env(safe-area-inset-left,0px)) !important;
        padding-right:max(var(--viewport-body-right,0px),env(safe-area-inset-right,0px)) !important;
    }
}