/* PXLGEN phone layout. Every rule here is scoped to html.phone (set by index.html/editor/mobile.js for phones:
   <=430px wide, or <=430px tall in landscape), so the desktop editor renders exactly as before. */
html:not(.phone) .m-ui{display:none!important}
html.phone{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --m-l:calc(var(--sal) + 10px);--m-r:calc(var(--sar) + 10px);--m-tabs-h:62px;--m-tabs-b:calc(var(--sab) + 10px);
  touch-action:manipulation;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
html.phone body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;font-size:14px}
html.phone input,html.phone textarea{font-size:16px} /* iOS: no zoom-on-focus */
html.phone .backdrop{overflow:hidden}
html.phone .backdrop .aura{top:24%;width:120vw;height:50vh}

/* ---------- compact top bar ---------- */
html.phone .nav{top:calc(var(--sat) + 8px);left:var(--m-l);right:var(--m-r);height:52px;padding:0 6px 0 16px;gap:10px}
html.phone .nav::after{left:22px;right:22px}
html.phone .nav .vsep,html.phone .nav .doc,html.phone #presetSel,html.phone #aspectSel,html.phone #accentPick,html.phone #stageBtn{display:none}
html.phone .brand{gap:9px;min-width:0;flex:none}
html.phone .brand .logo{width:22px;height:22px}
html.phone .brand .wm{font-size:13px;white-space:nowrap}
.m-menu-btn{display:flex;align-items:center;gap:8px;height:40px;min-width:0;max-width:58%;margin-left:auto;padding:0 13px 0 15px;border-radius:999px;border:1px solid var(--line-2);background:rgb(255 255 255/.04);
  font-size:14px;font-weight:600;letter-spacing:-.01em;transition:border-color .25s,background .25s}
.m-menu-btn:active{background:rgb(255 255 255/.09)}
.m-menu-btn .m-mb-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-menu-btn .m-mb-ar{flex:none;font:500 12px/1 var(--font-mono);color:var(--accent);letter-spacing:.04em}
.m-menu-btn svg{width:10px;height:10px;color:var(--mute);flex:none}
html.phone[data-mmodal=look] .m-menu-btn{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-12)}

/* ---------- stage: canvas full width at the top (fixed; app.js fitPhone places it) ---------- */
html.phone .app{position:static;inset:auto}
html.phone .stage{position:fixed;inset:0;left:0;right:0;z-index:1;pointer-events:none}
html.phone .canvas-wrap{pointer-events:auto;border-radius:18px;box-shadow:0 0 0 1px var(--line-2),0 0 80px -24px var(--accent-glow),0 30px 80px -30px rgb(0 0 0/.9)}
html.phone .hud{top:10px;height:28px;padding:0 10px;font-size:12px;letter-spacing:.06em}
html.phone .hud.tl{left:10px;max-width:calc(100% - 96px);overflow:hidden;white-space:nowrap}
html.phone .hud.tr{right:10px}
html.phone .canvas-wrap.narrow .hud.tr{display:none}
html.phone .canvas-wrap.narrow .hud.tl{max-width:calc(100% - 20px)}
html.phone .canvas-wrap.narrow .hud.tl #hudRes{overflow:hidden;text-overflow:ellipsis}

/* ---------- floating play / scrub / loop dock ---------- */
html.phone .dock{pointer-events:auto;top:var(--m-dock-top,300px)!important;bottom:auto!important;left:var(--m-l);right:var(--m-r);transform:none;max-width:none;height:64px;padding:0 10px;gap:12px;transition:none}
html.phone .dock .dsep,html.phone .dock #qualitySel,html.phone .dock #shuffleAll,html.phone .dock #exportBtn,html.phone .dock .stepper{display:none}
html.phone .dock .play{width:44px;height:44px}
html.phone .dock .play svg{width:15px;height:15px}
html.phone .scrub{flex:1;min-width:0;width:auto;gap:4px}
html.phone .timeline{height:26px}
html.phone .timeline::after{content:"";position:absolute;left:-4px;right:-4px;top:-9px;bottom:-9px} /* 44px touch target */
html.phone .timeline::before,html.phone .timeline .fillbar{top:11px}
html.phone .timeline i{top:5px;height:16px;width:4px;margin-left:-2px;border-radius:1px}
html.phone .tc{font-size:12px;letter-spacing:.04em}
html.phone .chip-tgl{height:44px;padding:0 15px 0 13px;font-size:12px;gap:8px;flex:none}
html.phone .chip-tgl svg{width:12px;height:12px}

/* ---------- floating tab bar ---------- */
.m-tabs{position:fixed;z-index:40;left:var(--m-l);right:var(--m-r);bottom:var(--m-tabs-b);height:var(--m-tabs-h);border-radius:999px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px;
  background:rgb(16 16 19/.78);box-shadow:0 24px 70px -20px rgb(0 0 0/.95)}
.m-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:-.005em;color:var(--mute);transition:background .25s,color .25s}
.m-tabs button svg{width:16px;height:16px}
.m-tabs button[aria-selected=true]{color:var(--fg);background:rgb(255 255 255/.09);box-shadow:inset 0 0 0 1px var(--line-2)}
.m-tabs button[aria-selected=true] svg{color:var(--accent);filter:drop-shadow(0 0 6px var(--accent-glow))}
.m-tabs button[data-locked=true] svg{color:var(--accent)}
.m-tabs button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ---------- swipeable bottom sheet (Layers / Controls / Export) ---------- */
.m-sheet{position:fixed;z-index:35;left:var(--m-l);right:var(--m-r);top:var(--m-full-top,70px);bottom:calc(var(--m-tabs-b) + var(--m-tabs-h) + 10px);display:flex;flex-direction:column;overflow:hidden;
  border-radius:28px;border:1px solid var(--line-2);background:rgb(15 15 17/.9);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 -10px 60px -30px rgb(0 0 0/.9);transition:transform .5s var(--ease-out-expo),clip-path .5s var(--ease-out-expo),visibility 0s;will-change:transform}
.m-sheet::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgb(255 255 255/.05),transparent 120px)}
.m-sheet.closed{visibility:hidden;transition:transform .4s var(--ease-out-expo),clip-path .4s var(--ease-out-expo),visibility 0s .4s}
.m-sheet.dragging,.m-modal.dragging{transition:none}
.m-grab{flex:none;height:26px;display:grid;place-items:center;touch-action:none;cursor:grab}
.m-handle{width:40px;height:5px;border-radius:999px;background:rgb(255 255 255/.26)}
.m-body{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.m-body::-webkit-scrollbar{display:none}
.m-pane{display:none}
.m-sheet[data-pane=layers] .m-pane[data-pane=layers],.m-sheet[data-pane=controls] .m-pane[data-pane=controls],.m-sheet[data-pane=stage] .m-pane[data-pane=stage],.m-sheet[data-pane=export] .m-pane[data-pane=export]{display:block}
html.phone .m-pane .panel{position:static;inset:auto;width:auto;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;overflow:visible}
html.phone .m-pane .panel::before{display:none}
html.phone .panel-head,html.phone .insp-head,html.phone .pop-head,.m-modal-head{touch-action:none}

/* layers pane */
html.phone .panel-head{padding:2px 14px 12px 20px}
html.phone .eyebrow{font-size:12px;letter-spacing:.14em}
html.phone .add-btn{height:40px;padding:0 16px 0 14px;font-size:14px;gap:8px}
html.phone .add-btn svg{width:12px;height:12px}
html.phone .layer-list{padding:0 12px 6px;overflow:visible}
html.phone .layer{flex-wrap:wrap;gap:6px 12px;padding:8px 4px 8px 8px;border-radius:20px;margin-bottom:6px;min-height:64px}
html.phone .layer.sel::before{left:-12px}
html.phone .layer .thumb{width:72px;height:46px;border-radius:12px}
html.phone .layer .thumb .kind{width:18px;height:18px;border-radius:6px}
html.phone .layer .thumb .kind svg{width:8px;height:8px}
html.phone .layer .nm{font-size:15px}
html.phone .layer .nm small{font-size:12px;letter-spacing:.06em;margin-top:3px}
html.phone .layer .eye{width:44px;height:44px}
html.phone .layer .eye svg{width:14px;height:14px}
html.phone .layer .ops{display:none}
html.phone .layer.sel .ops{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;position:static;transform:none;opacity:1;pointer-events:auto;order:9;flex-basis:100%;background:none;border:0;padding:4px 4px 2px 0;border-radius:0}
html.phone .layer.sel .ops .icon{display:flex;flex-direction:column;gap:5px;width:auto;height:52px;border-radius:16px;background:rgb(255 255 255/.04);border:1px solid var(--line);color:var(--fg);font-size:12px;font-weight:500}
html.phone .layer.sel .ops .icon::after{content:attr(title);white-space:nowrap}
html.phone .layer.sel .ops .icon svg{width:12px;height:12px;color:var(--accent)}
html.phone .layer.sel .ops .icon:active{background:var(--accent-12);border-color:var(--accent)}
html.phone .hint{font-size:13px;padding:14px 20px 22px;margin-top:4px}
html.phone .hint svg{width:12px;height:12px;margin-top:3px}

/* controls pane (inspector) */
html.phone .inspector{overflow:visible}
html.phone .insp-head{padding:2px 14px 14px 20px;background:linear-gradient(180deg,rgb(17 17 19) 78%,rgb(17 17 19/0))}
html.phone .insp-head .acts{gap:8px}
html.phone .insp-head .icon{width:44px;height:44px}
html.phone .insp-head .icon svg{width:14px;height:14px}
html.phone .insp-head .ttl{font-size:28px;margin-top:8px}
html.phone .sec{margin:0 12px 10px;border-radius:22px}
html.phone .sec-title{min-height:54px;padding:12px 12px 12px 16px;gap:12px}
html.phone .sec-title .ix,html.phone .sec-title .ct{font-size:12px}
html.phone .sec-title .tt{font-size:15px}
html.phone .sec-title .pm{width:32px;height:32px}
html.phone .sec-title .pm svg{width:10px;height:10px}
html.phone .sec-body{padding:0 16px 16px}
html.phone .ctl{margin-top:14px}
html.phone .ctl:first-child{margin-top:0}
html.phone .ctl-top{font-size:14px;gap:6px;margin-bottom:0;min-height:36px}
html.phone .ctl-top .mini{width:36px;height:36px}
html.phone .ctl-top .mini svg{width:12px;height:12px}
html.phone .ctl-top .vt{font-size:13px;height:32px;min-width:58px;padding:0 10px}
html.phone .ctl-top .vt input{width:62px;font-size:16px}
/* touch slider: 44px hit area; pan-y keeps vertical sheet scrolling, horizontal drags go to the slider (never the page) */
html.phone .sl{height:44px;touch-action:pan-y}
html.phone .sl .rail,html.phone .sl .fl{top:20px;height:4px}
html.phone .sl .z{top:15px;height:14px}
html.phone .sl .kn{top:11px;width:22px;height:22px;margin-left:-11px;border-radius:6px}
html.phone .lfo{flex-wrap:wrap;gap:4px 10px;border-radius:20px;padding:2px 8px 8px 14px;font-size:12px}
html.phone .lfo>svg{width:12px;height:12px}
html.phone .lfo .sl{flex:1;min-width:120px;height:44px}
html.phone .lfo .sl .rail,html.phone .lfo .sl .fl{top:20px}
html.phone .lfo .sl .kn{top:12px;width:20px;height:20px;margin-left:-10px}
html.phone .lfo .vt{font-size:12px;min-width:40px}
html.phone .lfo .cyc{gap:4px}
html.phone .lfo .cyc button{min-width:44px;height:36px;font-size:12px}
html.phone .ctl .sel-pill{height:44px;font-size:15px;padding:0 14px 0 16px}
html.phone .sel-pill .k{font-size:12px}
html.phone .swatches{gap:8px}
html.phone .swatches button{height:40px}
html.phone .color-pill,html.phone .toggle{height:44px;font-size:12px}
html.phone .note{font-size:13px}
html.phone .ctl .btn,html.phone .lyr-btns .btn{height:44px;font-size:14px}
html.phone .lyr{font-size:16px;height:180px}
html.phone .empty{font-size:15px}

/* export pane */
html.phone .m-pane #exportPop{display:block!important;position:static;width:auto;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;padding:2px 20px 24px;animation:none}
html.phone .pop-head h3{font-size:30px}
html.phone #exportClose{width:44px;height:44px}
html.phone .pop .row{margin-top:18px}
html.phone .pop .row>label{font-size:12px;margin-bottom:10px}
html.phone .seg{gap:8px}
html.phone .seg button{height:44px;font-size:14px}
html.phone .pop .spec{font-size:12px;letter-spacing:.04em}
html.phone .status{font-size:13px}
html.phone .btn.wide{height:52px;font-size:15px}
.m-loop-slot .stepper{display:inline-flex;height:48px;padding:0 4px;font-size:13px;color:var(--mute)}
.m-loop-slot .stepper button{width:40px;height:40px}
.m-loop-slot .stepper button svg{width:11px;height:11px}
.m-loop-slot .stepper input{width:40px;font-size:16px}
.m-loop-slot .stepper span{font-size:13px;margin:0 6px 0 2px}

/* ---------- modal sheets: Add layer, Preset & frame ---------- */
.m-scrim{position:fixed;inset:0;z-index:45;background:rgb(0 0 0/.5);opacity:0;pointer-events:none;transition:opacity .35s}
.m-scrim.on{opacity:1;pointer-events:auto}
.m-modal{position:fixed;z-index:50;left:var(--m-l);right:var(--m-r);bottom:calc(var(--sab) + 10px);max-height:calc(100dvh - var(--sat) - 70px);display:flex;flex-direction:column;overflow:hidden;
  border-radius:28px;border:1px solid var(--line-2);background:rgb(16 16 19/.95);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:0 -20px 80px -20px rgb(0 0 0/.9);transform:translate3d(0,calc(100% + 40px),0);visibility:hidden;transition:transform .45s var(--ease-out-expo),visibility 0s .45s}
.m-modal.open{transform:none;visibility:visible;transition:transform .5s var(--ease-out-expo),visibility 0s}
.m-modal-head{flex:none;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 14px 14px 20px}
.m-modal-head h3{font-size:28px;margin-top:10px}
.m-modal .m-x{width:44px;height:44px}
.m-modal .m-body{padding-bottom:6px}
html.phone .m-add #addMenu{display:block;position:static;max-height:none;overflow:visible;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;padding:0 16px 18px;animation:none}
html.phone .add-menu h6{font-size:12px;margin:14px 4px 8px;letter-spacing:.14em}
html.phone .add-menu h6:first-child{margin-top:0}
html.phone .add-menu .tiles{gap:8px}
html.phone .add-menu button{min-height:52px;font-size:14px;padding:10px 12px;border-radius:16px;gap:10px}
html.phone .add-menu button svg{width:12px;height:12px}
.m-look{padding:0 20px 22px}
.m-field{margin-top:20px}
.m-field:first-child{margin-top:0}
.m-field>.eyebrow{margin-bottom:10px}
.m-field .note{margin-top:10px}
.m-proj .doc{display:block;cursor:text}
.m-proj .doc .eyebrow{display:none}
.m-proj .doc input{display:block;width:100%;height:48px;padding:0 16px;border-radius:16px;border:1px solid var(--line-2);background:rgb(255 255 255/.04);font-size:16px;font-weight:600;color:var(--fg);outline:none}
.m-proj .doc input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-12);color:var(--fg)}
.m-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m-presets button{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:rgb(255 255 255/.02);text-align:left;font-size:14px;font-weight:600;line-height:1.2}
.m-presets button i{flex:none;width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1px rgb(255 255 255/.15)}
.m-presets button.on{border-color:var(--accent);background:var(--accent-12)}
.m-accents{display:flex;flex-wrap:wrap;gap:8px}
.m-accents button{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;border:1px solid var(--line-2)}
.m-accents button i{width:16px;height:16px;border-radius:4px}
.m-accents button.on{box-shadow:0 0 0 2px var(--fg) inset}
.m-shuffle{margin-top:24px}
html.phone .m-look .seg button.on,html.phone #exportPop .seg button.on{font-weight:600}

/* pill-select menus become bottom action sheets */
.m-menu-scrim{position:fixed;inset:0;z-index:59;background:rgb(0 0 0/.45);animation:fade .25s ease}
html.phone .menu:not(.accent-menu){left:var(--m-l)!important;right:var(--m-r)!important;top:auto!important;bottom:calc(var(--sab) + 10px)!important;min-width:0!important;max-height:min(62dvh,520px);border-radius:24px;padding:8px;overscroll-behavior:contain}
html.phone .menu button{min-height:48px;font-size:15px;padding:10px 14px;gap:12px}
html.phone .menu .grp{font-size:12px}

/* locked export on phones: the card becomes a bottom sheet, the watermark stays legible */
html.phone .lock-card{left:var(--m-l);right:var(--m-r);top:auto;bottom:calc(var(--sab) + 10px);width:auto;transform:none;animation:lockup .45s var(--ease-out-expo);padding:26px 22px 22px}
@keyframes lockup{from{transform:translateY(40px);opacity:0}}
html.phone .lock-card h3{font-size:28px}
html.phone .lock-copy{font-size:14px}
html.phone .lock-btns .btn{height:50px;font-size:15px}
html.phone .lock-x{width:44px;height:44px;top:14px;right:14px}
html.phone .wm-lock{right:10px;bottom:10px;height:26px;font-size:12px;letter-spacing:.06em}
html.phone .canvas-wrap.narrow .wm-lock span{display:none}

/* ---------- landscape phones: dock rides in the top bar, the sheet docks right, the canvas refits beside it ---------- */
html.phone.land{--m-tabs-h:54px}
html.phone.land .dock{top:var(--m-dock-t,12px)!important;left:var(--m-dock-l,200px);right:auto;width:var(--m-dock-w,360px);height:44px;padding:0;gap:10px;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;z-index:31}
html.phone.land .stage{z-index:31}
html.phone.land .canvas-wrap{transition:left .45s var(--ease-out-expo),top .45s var(--ease-out-expo),width .45s var(--ease-out-expo),height .45s var(--ease-out-expo)}
html.phone.land .dock .play{width:40px;height:40px}
html.phone.land .scrub-meta{display:none}
html.phone.land .timeline{height:22px}
html.phone.land .timeline::before,html.phone.land .timeline .fillbar{top:9px}
html.phone.land .timeline i{top:3px}
html.phone.land .timeline::after{top:-11px;bottom:-11px}
html.phone.land .scrub{flex-direction:row;align-items:center;gap:10px}
html.phone.land .scrub .timeline{flex:1}
html.phone.land .chip-tgl{height:40px}
html.phone.land .m-tabs{right:auto;left:var(--m-col-c,50%);width:min(440px,var(--m-col-w,100%));transform:translateX(-50%);transition:left .45s var(--ease-out-expo)}
html.phone.land .m-tabs button{gap:3px}
html.phone.land .m-sheet{left:auto;width:min(400px,48vw);bottom:calc(var(--sab) + 10px)}
html.phone.land .m-modal{left:max(var(--m-l),calc(50% - 320px));right:max(var(--m-r),calc(50% - 320px));max-height:calc(100dvh - var(--sat) - 16px)}
html.phone.land .add-menu .tiles,html.phone.land .m-presets{grid-template-columns:repeat(3,1fr)}
html.phone.land .lock-card{left:max(var(--m-l),calc(50% - 230px));right:max(var(--m-r),calc(50% - 230px))}
@media (prefers-reduced-motion:reduce){.m-sheet,.m-modal,html.phone.land .canvas-wrap{transition-duration:.001ms!important}}
/* fixed chrome never pans or zooms the page; taps still click */
html.phone .nav,html.phone .dock,.m-tabs{touch-action:none}