/* P0-4 top-bar standard — PREVIEW. Loaded last. Chrome only; no behaviour change.
   Order everywhere: [Back] [mode tools…] ⟶ [Save★] [Clear/New]
   Back = 64px far-left; destructive = far-right; gold Save★ just inside it; gaps 12px. */
:root{--tb-b:64px;--tb-gap:12px;--tb-pad:12px}

/* ---- every screen: back is 64px and first ---- */
html body .screen>.bar .ib.back{order:-100!important;width:var(--tb-b)!important;height:var(--tb-b)!important;min-width:var(--tb-b)!important;flex:none!important;margin:0!important}
/* ---- every mode top bar: 64px buttons, 12px gaps, standard slot order (works in flex AND grid) ---- */
html body:not(.v766dl) :is(#color,#draw,#slime,#pour,#pottery)>.bar.top,html body #view>.bar{gap:var(--tb-gap)!important}
html body :is(#color,#draw,#slime,#pour,#pottery)>.bar.top .ib,html body #view>.bar .ib{width:var(--tb-b)!important;height:var(--tb-b)!important;min-width:var(--tb-b)!important;flex:none!important;margin:0!important}
html body :is(#save,#dSave,#slSave,#prSave,#pSave,#vShare){order:90!important}
html body :is(#clear,#dClear,#prNew,#pReset,#vDel){order:100!important}

/* ---- portrait: one horizontal bar, full width, same safe-area inset, Save+Clear pinned right ---- */
@media (orientation:portrait){
 html body:not(.v766dl) :is(#color,#draw,#slime,#pour,#pottery)>.bar.top,
 html body :is(#pick,#gallery,#view,#book,#sbook,#wiggle,#dump,#addp)>.bar{
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;
  gap:var(--tb-gap)!important;align-self:stretch!important;width:auto!important;box-sizing:border-box!important;grid-column:1/-1!important;
  padding:calc(var(--tb-pad) + env(safe-area-inset-top)) calc(var(--tb-pad) + env(safe-area-inset-right)) var(--tb-pad) calc(var(--tb-pad) + env(safe-area-inset-left))!important}
 html body :is(#color,#draw,#slime,#pour,#pottery)>.bar.top>:is(#save,#dSave,#slSave,#prSave,#pSave),html body #view>.bar>#vShare{margin-left:auto!important}
 /* modes with no far-right Clear in the top bar keep that slot empty so Save★ lands at the same x everywhere */
 html body #slime>.bar.top>#slSave,html body #pour>.bar.top>#prSave{margin-right:calc(var(--tb-b) + var(--tb-gap))!important}
 html body #view .vsp{display:none!important}
 html body #slime>.bar.top #slVol{flex:1 1 40px;min-width:40px;width:auto!important}
}
/* ---- narrow phones (<480px): Draw has 6 top controls; 64px+12px can't fit, so non-back buttons drop to 52px/8px gaps (Draw only) ---- */
@media (orientation:portrait) and (max-width:479px){
 html body:not(.v766dl) #draw>.bar.top{gap:8px!important}
 html body #draw>.bar.top .ib:not(.back){width:52px!important;height:52px!important;min-width:52px!important}
}
/* ---- landscape: existing left rail kept (rail is the layout); only the inset is unified ---- */
@media (orientation:landscape){
 html body:not(.v766dl) :is(#color,#draw,#slime,#pour,#pottery)>.bar.top{padding-left:calc(var(--tb-pad) + env(safe-area-inset-left))!important;padding-top:calc(var(--tb-pad) + env(safe-area-inset-top))!important}
}
/* ---- Slime fix: style.css:161 sets `#slime .bar.top{flex-wrap:wrap;justify-content:center}` with no override outside the portrait block,
   so on wide/landscape flex layouts Back/Music/Camera became a centered island. Force left-start + full width at every viewport. ---- */
html body:not(.v766dl) #slime>.bar.top{justify-content:flex-start!important;justify-items:start!important;flex-wrap:nowrap!important;box-sizing:border-box!important}
html body:not(.v766dl) #slime>.bar.top:not([style*="grid"]){align-self:stretch!important}
@media (orientation:landscape){
 html body:not(.v766dl) #slime>.bar.top>#slSave{margin-left:auto!important;margin-right:calc(var(--tb-b) + var(--tb-gap))!important}
}