/* The Plan Editor's native grid and viewport controls, shared with inspection. */
.planner-grid-line { stroke:rgba(118,118,118,.16); stroke-width:5; }
.planner-grid-line.is-major { stroke:rgba(118,118,118,.24); }
.planner-origin-line { stroke:rgba(118,118,118,.28); stroke-width:8; }
.planner-viewport-surface { background:var(--planner-stage-bg, #d8d8d8); }
.planner-viewport-controls { display:flex; align-items:center; gap:8px; }
.planner-viewport-controls .planner-icon-button { appearance:none; display:inline-flex; align-items:center; justify-content:center; width:34px; min-width:34px; height:34px; padding:0; box-sizing:border-box; border:1px solid var(--planner-button-border, #c6d0c3); border-radius:var(--planner-radius-sm, 6px); background:var(--planner-surface-strong, #d8d8d8); color:var(--planner-text, #3f4340); cursor:pointer; touch-action:none; }
.planner-viewport-controls .planner-icon-button:hover { border-color:var(--planner-button-border-strong, #b8c1b9); }
.planner-viewport-controls .planner-icon-button:disabled { opacity:.35; cursor:default; }
.planner-viewport-controls .planner-icon-button.is-active { border-color:var(--planner-accent-selected-border, rgba(242,138,46,.78)); background:var(--planner-accent-selected-bg, rgba(242,138,46,.22)); }
.planner-viewport-controls .planner-icon-image { width:18px; height:18px; filter:grayscale(1) saturate(0); pointer-events:none; }
/* North control uses the original Plan Editor dimensions and strokes. */
.planner-north-compass { width:58px; height:58px; padding:0; border:1px solid var(--planner-button-border, #c6d0c3); border-radius:var(--planner-radius, 8px); background:rgba(216,216,216,.8); box-shadow:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.planner-north-compass.is-active { background:rgba(232,176,100,.42); border-color:#b77731; }
.planner-north-compass:disabled { cursor:default; opacity:.82; box-shadow:none; }
.planner-north-compass svg { width:46px; height:46px; display:block; overflow:visible; }
.planner-north-compass-stem, .planner-north-compass-wing { stroke:#20242b; stroke-width:4; stroke-linecap:round; fill:none; }