/* Step 1 actions use CSS pixels, independently of the drawing camera. */
body[data-step="1"] .toolbar-row .icon-btn {
  min-width: 44px; min-height: 44px; flex-shrink: 0;
}
body[data-step="1"] .toolbar-row [data-drawing-name] {
  width: 44px; height: 44px; padding: 0;
  position: relative; background-size: 24px 24px; background-position: center;
}
body[data-step="1"] .toolbar-row .drawing-tool-name {
  display: none;
}
body[data-step="1"] .toolbar-row .icon-btn img,
body[data-step="1"] .toolbar-row .icon-btn svg { width: 24px; height: 24px; }
body[data-step="1"] .toolbar-row .icon-btn:disabled { opacity: .35; cursor: default; }
#drawing-status {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%); z-index: 40;
  max-width: calc(100% - 24px); width: max-content; padding: 8px 12px;
  color: #752323; background: #fff4f2; border: 1px solid #e8b5b0; border-radius: 8px;
  font: 13px/1.4 system-ui; pointer-events: none;
}
body:not([data-step="1"]) #drawing-status { display: none; }
body[data-step="1"] #edge-wrap button,
body[data-step="1"] #angle-wrap button,
body[data-step="1"] #hole-wrap button,
body[data-step="1"] #points-wrap button { min-width: 44px; min-height: 44px; }
@media (max-width: 820px) {
  body[data-step="1"] .toolbar-row [data-drawing-name] {
    width: 54px; padding: 2px 4px 12px; background-position: center 4px;
  }
  body[data-step="1"] .toolbar-row .drawing-tool-name {
    display: block; position: absolute; bottom: 2px; left: 0; right: 0;
    font-size: 8px; line-height: 10px; font-weight: 400;
    text-align: center; white-space: nowrap; pointer-events: none;
  }
  body[data-step="1"] .toolbar-row,
  body[data-step="1"] .toolbar-row .toolbar { height: 60px; }
  body[data-step="1"] .toolbar-row .toolbar-content { overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
  body[data-step="1"] .toolbar-row .toolbar-group { flex-wrap: nowrap; flex-shrink: 0; }
}