/* 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; }
#btn-draw-walls { --icon-src: url("../icons/drawwalls.svg"); }
/* Retain the Divider implementation and existing dividers; hide new placement. */
#btn-adddivider[hidden] { display: none !important; }
#opening-placement-row[hidden] { display: none; }
#shape-editor[data-wall-openings="true"] .shape-outline { stroke: none !important; }
#shape-editor .opening-split { stroke: none; fill: transparent; }
#shape-editor .opening-split.opening-selected { fill: #008580; fill-opacity: .12; }
#wall-wrap {
  position: absolute; inset: auto auto 62px 16px; transform: none; z-index: 45;
  display: flex; flex-direction: column; gap: 0; padding: 0;
  width: 300px; max-width: calc(100% - 32px); max-height: calc(100% - 110px);
  overflow: visible; font: inherit; font-size: 13px; color: var(--ak-vertex-fill, #3c3c3c);
}
#wall-wrap[hidden], #wall-wrap [hidden], body:not([data-step="1"]) #wall-wrap { display: none !important; }
#wall-wrap button { min-height: 32px; border: 0; border-radius: 5px; padding: 4px 8px; color: inherit; background: transparent; font: inherit; cursor: pointer; }
#wall-wrap button:hover, #wall-wrap button:focus-visible { background-color: #09566818; }
#wall-wrap button[aria-pressed="true"] { background-color: #095668; color: white; }
#wall-wrap button:disabled { opacity: .4; cursor: default; }
.wall-panel-heading, .wall-alignment, .wall-panel-actions, .wall-thickness-row { display: flex; align-items: center; gap: 8px; }
.wall-panel-heading { justify-content: space-between; }
#wall-wrap .floating-panel__header { cursor: grab; touch-action: none; flex-shrink: 0; }
#wall-wrap .floating-panel__body { gap: 12px; overflow-y: auto; }
#wall-wrap .floating-panel__btn { padding: 0; min-height: 32px; width: 32px; }
#wall-wrap.move-mode .floating-panel__header { cursor: grabbing; }
.wall-panel-title { font-size: 15px; font-weight: 500; }
#wall-wrap .wall-alignment button { padding: 2px; width: 32px; height: 32px; border: 1px solid #3c3c3c18; }
#editor-wrap .wall-alignment svg { position: static; inset: auto; display: block; width: 26px; height: 26px; overflow: hidden; pointer-events: none; }
#wall-wrap .wall-thickness { display: grid; grid-template-columns: 26px minmax(0,1fr) 26px 26px; flex: 1; min-width: 0; align-items: center; }
#wall-wrap .in-input { width: 100%; min-width: 0; text-align: center; }
.wall-delete::before { content: ''; display: block; width: 22px; height: 22px; background: currentColor; mask: url('../icons/hide.svg') center / contain no-repeat; }
.wall-delete::before { mask-image: url('../icons/trash.svg'); }
.wall-panel-actions { flex-wrap: wrap; gap: 4px; font-size: 11px; }
#wall-wrap .wall-panel-actions button { min-height: 26px; padding: 3px 6px; }
#wall-wrap .wall-help { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#wall-wrap[data-mode="edit"] .wall-panel-actions,
#wall-wrap .wall-panel-actions:not(:has(button:not([hidden]))) { display: none; }
.interior-wall-solid { fill: none; stroke: var(--ak-vertex-fill, #3c3c3c); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wall-hit, .wall-button { cursor: pointer; }
.wall-handle { fill: #2aa49f; fill-opacity: .85; stroke: none; cursor: move; }
.wall-axis { fill: none; stroke: #008580; stroke-width: 1; vector-effect: non-scaling-stroke; }
.wall-boundary-corner { fill: var(--ak-vertex-fill, #3c3c3c); fill-opacity: .22; stroke: none; cursor: move; }
.wall-boundary-edge { cursor: move; pointer-events: stroke; }
.wall-preview { fill: #008580; fill-opacity: .12; stroke: none; }
.wall-draft-axis { fill: none; stroke: #2ac6c1; stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.wall-snap-guide { fill: #2ac6c1; stroke: white; stroke-width: 1; vector-effect: non-scaling-stroke; }
#shape-editor[data-wall-drawing="true"] :is(#labels-layer, #vertices-layer, #hiwi-layer),
#shape-editor[data-wall-drawing="true"] :is(#labels-layer, #vertices-layer, #hiwi-layer) * { pointer-events: none; }
@media (max-width: 820px), (pointer: coarse) {
  #wall-wrap { bottom: 72px; left: 12px; width: 300px; }
  #wall-wrap .wall-alignment button { width: 40px; height: 40px; }
  #wall-wrap .wall-panel-actions button { min-height: 36px; }
}
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; }
}

.wall-boundary-corner.wall-boundary-selected { fill: var(--ak-accent2, #03747f); fill-opacity: .8; }
.wall-boundary-edge.wall-boundary-selected { stroke: var(--ak-accent2, #03747f); stroke-opacity: .5; }

.wall-body-hit.wall-selected { fill: var(--ak-accent2, #03747f); fill-opacity: .14; }
.wall-axis.wall-selected { stroke-width: 2; }

/* Step 1 canvas actions share dimensions; each control retains its own colors. */
body[data-step="1"] .canvas-action { cursor: pointer; }
#editor-wrap[data-geometry-dragging="1"] :is(#angle-wrap, #edge-wrap, #points-wrap, #wall-wrap) { display: none !important; }