/* PXLGEN focused phone app (Oct 17, pxlgen-mobile). Loaded after mobile.css; every rule is scoped to html.phone, so desktop is
   untouched. One hierarchy: slim top bar → preview (with a quiet HUD and the transport floating on it) → bottom sheet that snaps
   peek / half / full → tab bar. Square edges, #050505 / #111214, fewer borders, 44px tap targets. Behaviour: editor-mobile.js. */
.mx-site,.mx-shuffle,.mx-song,.mx-grip,.layer .mx-more{display:none}
html.phone{--m-tabs-h:56px}

/* ---------- top bar: [menu] PXLGEN ··· [look ▾] [shuffle] */
html.phone .nav{padding-left:calc(var(--sal) + 2px)!important;padding-right:calc(var(--sar) + 2px)!important;gap:2px!important}
html.phone:not(.land) .nav{height:calc(52px + var(--sat));border-bottom:0}
html.phone .mx-site,html.phone .mx-shuffle{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;background:none;border:0;color:#fff;cursor:pointer}
html.phone .mx-site svg{width:15px;height:15px}
html.phone .mx-shuffle svg{width:13px;height:13px}
html.phone .mx-site:active,html.phone .mx-shuffle:active{background:rgb(255 255 255/.08)}
html.phone .nav .brand{margin-left:2px}
html.phone .m-menu-btn{height:36px;max-width:calc(100% - 200px);margin-left:auto;padding:0 10px 0 12px;border:0!important;background:rgb(255 255 255/.07);font-size:14px;gap:8px}
html.phone .m-menu-btn .m-mb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.phone .m-menu-btn .m-mb-ar{font:400 11px var(--font-mono);letter-spacing:.04em}
html.phone[data-mtab=looks] .m-menu-btn{background:rgb(255 255 255/.14)}

/* ---------- preview: refits between peek (centred) and half (pinned); the HUD is a quiet corner overlay */
html.phone:not(.land) .canvas-wrap{transition:top .4s var(--ease-out-expo),left .4s var(--ease-out-expo),width .4s var(--ease-out-expo),height .4s var(--ease-out-expo)}
html.phone .hud{top:8px;height:20px;padding:0 7px;gap:6px;font-size:9.5px;letter-spacing:.08em;background:rgb(5 5 5/.46);border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:rgb(255 255 255/.78);pointer-events:none}
html.phone .hud.tl{left:8px}
html.phone .hud.tr{right:8px}
html.phone .hud .live{width:5px;height:5px;box-shadow:none}

/* ---------- transport: one compact bar on the preview's bottom edge (or right under a short preview) */
html.phone:not(.land) .dock{left:var(--m-dock-l,0px)!important;right:auto!important;width:var(--m-dock-w,100%);height:52px;padding:0 4px 0 4px;gap:2px;background:#050505;border:0;border-bottom:0;transition:top .4s var(--ease-out-expo),left .4s var(--ease-out-expo),width .4s var(--ease-out-expo)}
html.phone:not(.land).m-dock-in .dock{background:rgb(5 5 5/.6);box-shadow:inset 0 0 0 1px rgb(255 255 255/.06)}
html.phone:not(.land) .dock .play{width:44px;height:44px;background:none;color:#fff;box-shadow:none}
html.phone:not(.land) .dock .play svg{width:14px;height:14px}
html.phone:not(.land) .dock .scrub{margin:0 6px 0 2px;gap:2px}
html.phone:not(.land) .dock .timeline{height:22px}
html.phone:not(.land) .dock .timeline::before,html.phone:not(.land) .dock .timeline .fillbar{top:9px;height:3px}
html.phone:not(.land) .dock .timeline i{top:4px;height:14px;width:3px;margin-left:-1px}
html.phone:not(.land) .dock .tc{font-size:10px;letter-spacing:.06em}
html.phone .dock .chip-tgl,html.phone .dock .tp-btn{position:relative;display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;gap:0;border:0;background:none!important;color:rgb(255 255 255/.5);font:500 9px/1 var(--font-mono);letter-spacing:.06em}
html.phone .dock .chip-tgl span,html.phone .dock .mx-song span{display:none}
html.phone .dock .chip-tgl svg{width:13px;height:13px}
html.phone .dock .chip-tgl:has(input:checked){color:#fff}
html.phone .dock .chip-tgl:has(input:checked)::after{content:"";position:absolute;left:16px;right:16px;bottom:7px;height:2px;background:#fff}
html.phone .dock #tempoBtn{display:inline-grid}
html.phone .dock #tempoBtn .tp-dot{position:absolute;top:10px;right:10px;width:4px;height:4px}
html.phone .dock #tempoBtn.on,html.phone .dock #tempoBtn.open{color:#fff}
html.phone .dock .mx-song{display:inline-grid}
html.phone .dock .mx-song svg{width:13px;height:13px}
html.phone .dock .mx-song:active,html.phone .dock .chip-tgl:active,html.phone .dock #tempoBtn:active{background:rgb(255 255 255/.08)!important}
html.phone.land .dock .mx-song{display:none}
/* Tap BPM opens as a bottom sheet on phones */
html.phone .tp-pop{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;max-height:80dvh;overflow:auto;z-index:62;padding-bottom:calc(var(--sab) + 18px);background:#111214;border:0;border-top:1px solid rgb(255 255 255/.1);box-shadow:0 -30px 80px rgb(0 0 0/.7)}

/* ---------- sheet: never fully closed in portrait. Peek = drag handle + the layer chips; half / full = the tab's panel */
html.phone:not(.land) .m-sheet{border-top:0;box-shadow:0 -1px 0 rgb(255 255 255/.08)}
html.phone:not(.land) .m-sheet.closed{visibility:visible}
html.phone:not(.land) .m-sheet .m-home{display:none}
html.phone:not(.land) .m-sheet.closed:not(.dragging) .m-home{display:flex}
html.phone:not(.land) .m-sheet.closed:not(.dragging) .m-body{visibility:hidden}
html.phone .m-grab{height:22px;cursor:grab}
html.phone .m-handle{width:40px;height:4px;background:rgb(255 255 255/.28)}
html.phone:not(.land) .m-sheet .m-home{position:static;inset:auto;z-index:auto;flex:none;flex-direction:row;align-items:center;gap:0;height:74px;padding:0 0 18px;background:none;overflow:visible}
html.phone:not(.land) .m-home .m-home-tempo,html.phone:not(.land) .m-home .m-home-acts,html.phone:not(.land) .m-home .m-home-head .eyebrow{display:none}
html.phone:not(.land) .m-home .m-chips{order:1;flex:1;min-width:0;margin:0;padding:0 8px 0 var(--m-pad-l);gap:6px;align-items:center}
html.phone:not(.land) .m-home .m-home-head{order:2;flex:none;padding:0 calc(var(--sar) + 10px) 0 4px}
html.phone:not(.land) .m-home .m-home-add{width:44px;height:44px;padding:0;justify-content:center;border:1px solid rgb(255 255 255/.14);background:none}
html.phone:not(.land) .m-home .m-home-add span{display:none}
html.phone:not(.land) .m-home .m-home-add svg{width:12px;height:12px}
html.phone:not(.land) .m-home .m-chip-l{width:auto;max-width:150px;height:44px;flex-direction:row;align-items:center;gap:8px;padding:0 12px 0 0;border:0;background:rgb(255 255 255/.05);font-size:13px}
html.phone:not(.land) .m-home .m-chip-l i{width:44px;height:44px;aspect-ratio:auto;flex:none}
html.phone:not(.land) .m-home .m-chip-l span{padding:0}
html.phone:not(.land) .m-home .m-chip-l.on{background:rgb(255 255 255/.12);box-shadow:inset 0 -2px 0 #fff}

/* one clear hierarchy inside the sheet: smaller titles, quieter chrome */
html.phone .m-sheet .display{font-size:21px;line-height:1.05;letter-spacing:-.015em}
html.phone .m-pane-head h3{font-size:21px;margin-top:4px}
html.phone .panel-head{padding-top:0;padding-bottom:8px;align-items:center}
html.phone .panel-head .add-btn{height:40px;padding:0 14px;border:1px solid rgb(255 255 255/.16);background:none;color:#fff;box-shadow:none}
html.phone .m-pane[data-pane=layers] .hint{margin:14px var(--m-pad-r) 24px var(--m-pad-l);font-size:12px;color:rgb(255 255 255/.4)}

/* ---------- layers: compact single rows. grip · thumb · name / type · eye · ⋯ */
html.phone .layer-list{padding:0 0 4px!important}
html.phone .layer{flex-wrap:nowrap;align-items:center;gap:10px;min-height:60px;margin:0;padding:6px calc(var(--sar) + 4px) 6px 0;border:0;border-bottom:1px solid rgb(255 255 255/.06);background:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-y}
html.phone .layer.sel{background:rgb(255 255 255/.05);border-color:rgb(255 255 255/.06)}
html.phone .layer.sel::before{left:0;width:2px;height:auto;top:0;bottom:0;margin:0;background:#fff;box-shadow:none}
html.phone .layer .mx-grip{display:grid;place-items:center;flex:none;width:calc(var(--sal) + 26px);align-self:stretch;margin-right:-6px;color:rgb(255 255 255/.26);touch-action:none;cursor:grab}
html.phone .layer .mx-grip svg{width:10px;height:10px}
html.phone .layer .thumb{width:52px;height:34px;box-shadow:none}
html.phone .layer .nm{flex:1;min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.phone .layer .nm small{font-size:10.5px;margin-top:3px;overflow:hidden;text-overflow:ellipsis}
html.phone .layer .ops,html.phone .layer.sel .ops{display:none!important}
html.phone .layer .eye,html.phone .layer .mx-more{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0;border:0;background:none;color:rgb(255 255 255/.6)}
html.phone .layer .mx-more svg{width:14px;height:14px}
html.phone .layer .eye:active,html.phone .layer .mx-more:active{background:rgb(255 255 255/.08)}
html.phone .layer.mx-lift{z-index:5;background:#1b1c1f;box-shadow:0 14px 34px rgb(0 0 0/.65),inset 0 0 0 1px rgb(255 255 255/.14);transition:none}
html.phone .layer-list.mx-sorting .layer:not(.mx-lift){transition:transform .18s var(--ease-out-expo)}

/* ---------- layer ⋯ action sheet */
.mx-scrim{position:fixed;inset:0;z-index:60;background:rgb(0 0 0/.55);opacity:0;transition:opacity .25s}
.mx-scrim.on{opacity:1}
.mx-act{position:fixed;z-index:61;left:0;right:0;bottom:0;padding:6px 0 calc(var(--sab,0px) + 12px);background:#111214;box-shadow:0 -1px 0 rgb(255 255 255/.1),0 -30px 80px rgb(0 0 0/.6);transform:translate3d(0,100%,0);transition:transform .32s var(--ease-out-expo)}
.mx-act.open{transform:none}
.mx-act-head{padding:14px var(--m-pad-r,18px) 12px var(--m-pad-l,18px)}
.mx-act-head h3{margin:8px 0 0;font:700 20px/1.1 var(--font-display);letter-spacing:-.01em;color:#fff}
.mx-act-head small{display:block;margin-top:5px;font:400 10.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:rgb(255 255 255/.45)}
.mx-act-list{border-top:1px solid rgb(255 255 255/.07)}
.mx-act-item{display:flex;align-items:center;gap:16px;width:100%;height:54px;padding:0 var(--m-pad-r,18px) 0 var(--m-pad-l,18px);background:none;border:0;border-bottom:1px solid rgb(255 255 255/.05);color:#fff;font:500 16px var(--font-sans);text-align:left;cursor:pointer}
.mx-act-item svg{width:13px;height:13px;color:rgb(255 255 255/.65)}
.mx-act-item:active{background:rgb(255 255 255/.06)}
.mx-act-item:disabled{opacity:.3;cursor:default}
.mx-act-item.danger,.mx-act-item.danger svg{color:#ff6b61}
.mx-act-cancel{display:block;width:calc(100% - 36px);height:52px;margin:12px auto 0;background:rgb(255 255 255/.07);border:0;color:#fff;font:600 15px var(--font-sans);cursor:pointer}

/* ---------- fewer borders: filled tiles instead of outlined boxes */
html.phone .m-presets button,html.phone .m-pal{border:0;background:rgb(255 255 255/.05)}
html.phone .m-presets button.on,html.phone .m-pal.on{background:rgb(255 255 255/.1);box-shadow:inset 0 0 0 1px #fff}
html.phone .sec{border:0!important;background:rgb(255 255 255/.03)}

/* =========== Tablets (iPad 744–1366px, touch): html.tablet, set in index.html + editor-mobile.js =========== */
html.tablet{--nav-h:60px;--gap:10px;--left:248px;--right:320px}
html.tablet .mx-site{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-left:-12px;padding:0;background:none;border:0;color:#fff;cursor:pointer}
html.tablet .mx-site svg{width:15px;height:15px}
html.tablet .nav{gap:10px}
html.tablet .nav .pill-select .sel-pill,html.tablet .nav-stage{height:44px;font-size:13px}
html.tablet .nav .doc input{font-size:14px}
/* transport: two tidy rows that always fit the stage column. Row 1 = play · scrub · loop · shuffle · export;
   row 2 = the secondary items (BPM, loop length, preview quality, watermark CTA). 44px targets, 12–13px labels. */
html.tablet .dock{flex-wrap:wrap;justify-content:flex-start;align-content:center;height:auto;width:calc(100% - 8px);max-width:820px;padding:8px 10px;column-gap:8px;row-gap:6px;border-radius:0;white-space:nowrap}
html.tablet .dock>*{order:20}
html.tablet .dock .play{order:1;width:44px;height:44px;border-radius:0}
html.tablet .dock .scrub{order:2;flex:1 1 140px;width:auto;min-width:120px;gap:5px}
html.tablet .dock .timeline{height:24px}
html.tablet .dock .timeline::after{content:"";position:absolute;left:-4px;right:-4px;top:-10px;bottom:-10px}
html.tablet .dock .timeline::before,html.tablet .dock .timeline .fillbar{top:10px}
html.tablet .dock .timeline i{top:4px;height:16px}
html.tablet .dock .tc{font-size:12px;letter-spacing:.04em}
html.tablet .dock .chip-tgl{order:3;height:44px;padding:0 14px;font-size:12px;gap:8px}
html.tablet .dock .chip-tgl svg{width:12px;height:12px}
html.tablet .dock #shuffleAll{order:4;height:44px;padding:0 14px;font-size:13px;gap:8px}
html.tablet .dock #shuffleAll span{display:inline}
html.tablet .dock #exportBtn{order:5;height:44px;padding:0 16px;font-size:13px}
html.tablet .dock .dsep{display:none}
html.tablet .dock .dsep:first-of-type{display:block;order:6;flex:0 0 100%;width:auto;height:0;margin:0;border:0;background:none}
html.tablet .dock #tempoBtn{order:7;height:44px;padding:0 14px;font-size:12px}
html.tablet .dock .stepper{order:8;height:44px;padding:0 2px;font-size:12px}
html.tablet .dock .stepper button{width:40px;height:40px}
html.tablet .dock .stepper button svg{width:11px;height:11px}
html.tablet .dock .stepper input{width:40px;font-size:14px}
html.tablet .dock #qualitySel{order:9}
html.tablet .dock #qualitySel .sel-pill{height:44px;font-size:12px}
html.tablet .dock .wm-up{order:10;height:44px;margin-left:auto;padding:0 6px;font-size:12px;letter-spacing:.08em;gap:8px;border-bottom:0}
html.tablet .dock .wm-up svg{width:11px;height:11px}
html.tablet .dock .mx-song{display:none}
/* portrait: preview across the top, layers + inspector side by side underneath (the inspector always fits; nothing hides) */
@media (orientation:portrait){
  html.tablet .stage{left:0;right:0;top:0;bottom:auto;height:54%}
  html.tablet .stack{top:calc(54% + var(--gap));bottom:0;left:0;width:calc(42% - var(--gap) / 2)}
  html.tablet .inspector{top:calc(54% + var(--gap));bottom:0;right:0;width:calc(58% - var(--gap) / 2)}
}
/* layers: touch has no hover, so the hover-only row buttons become the ⋯ action sheet (drag to reorder still works) */
html.tablet .layer{min-height:60px}
html.tablet .layer .ops{display:none!important}
html.tablet .layer .eye,html.tablet .layer .mx-more{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0;border:0;background:none;color:rgb(255 255 255/.6);opacity:1}
html.tablet .layer .mx-more svg{width:14px;height:14px}
html.tablet .mx-act{left:50%;right:auto;bottom:24px;width:min(440px,calc(100% - 48px));transform:translate3d(-50%,calc(100% + 40px),0)}
html.tablet .mx-act.open{transform:translate3d(-50%,0,0)}
html.tablet .tp-pop{max-width:calc(100vw - 24px)}
/* landscape tablets: slimmer side columns so the transport's second row fits in two rows */
@media (orientation:landscape){html.tablet{--left:252px;--right:284px}}
html.tablet .layer .thumb{width:48px;height:32px}
html.tablet .dock .wm-up{letter-spacing:.04em}
html.tablet .layer{gap:6px;padding-right:2px}
html.tablet .layer .eye,html.tablet .layer .mx-more{width:40px;height:44px}