/* Narrow screens use a non-modal bottom adjustment bar. */
@media (max-width: 899px){
  .ref-adjust-panel{left:0;right:0;bottom:0;width:100%;max-height:min(48dvh,430px);border-radius:var(--r-xl) var(--r-xl) 0 0}
  .ref-adjust-panel.show{animation:refAdjustUp .18s ease-out}
  .ref-adjust-head{min-height:54px;padding:8px 14px}
  .ref-adjust-thumb{width:34px;height:34px}
  .ref-adjust-fields{padding:8px 14px;gap:4px}
  .ref-adjust-row{min-height:27px;grid-template-columns:58px minmax(80px,1fr) 44px 16px}
  .ref-adjust-row input[type=number]{height:25px}
  .ref-adjust-transform-row{margin-top:2px}
  .ref-adjust-transform-row button{min-height:32px}
  .ref-adjust-secondary-actions{display:none}
  .ref-adjust-footer{padding-top:7px}
  body.ref-adjusting-mobile #layerPanelOverlay{pointer-events:none}
  body.ref-adjusting-mobile .canvas-area{padding-bottom:min(48dvh,430px)!important}
}
@keyframes refAdjustUp{from{transform:translateY(12px);opacity:.5}to{transform:translateY(0);opacity:1}}

/* Desktop uses a focused right-side inspector. */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .ref-adjust-panel{top:76px;right:20px;bottom:24px;width:min(440px,calc(100vw - 48px));border-radius:var(--r-xl)}
  .ref-adjust-panel .ref-adjust-fields{flex:1 1 auto}
  body.ref-adjusting-desktop #layerPanelOverlay{display:none!important}
}
/* Avoid two competing desktop breakpoints for this workflow. */
@media (min-width:768px) and (max-width:899px){
  .layer-panel-overlay{width:100%!important}
}