/* Free dimensioning in the drawing view (js/ui/dim-tool.js). Uses the custom properties of css/app.css (light and dark theme). */
.dim-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--bg2); }
.dim-bar .dim-lbl { color: var(--fg3); font-weight: 600; margin-right: 2px; }
.dim-bar .dim-tools .btn { gap: 4px; }
.dim-bar .btn.active:not(.seg .btn) { background: var(--accentbg); border-color: var(--accent); }
.dim-bar .dim-prompt { color: var(--fg2); margin-left: 4px; min-width: 0; flex: 1 1 220px; }
@media (max-width: 1500px) { .dim-bar .dim-tools .btn .lbl { display: none; } }
body.mode-touch .dim-bar .btn { min-height: 44px; min-width: 44px; }
.drw-canvas.dim-active { cursor: crosshair; }
.drw-canvas svg g.dim { cursor: pointer; }
.drw-canvas.dim-active svg g.dim { cursor: crosshair; }
.drw-canvas svg g.dim-ui { pointer-events: none; }
.drw-canvas svg .dim-mark { stroke: #C026D3; fill: none; }
.drw-canvas svg .dim-band { stroke: #64748B; stroke-dasharray: 2 1.5; fill: none; }
.drw-canvas svg .dim-picked { fill: #16A34A; stroke: #FFFFFF; stroke-width: .15; }
.drw-canvas svg .dim-hl { stroke: rgba(37, 99, 235, .45); fill: none; stroke-linecap: round; }
.drw-canvas svg .dim-preview { opacity: .9; }
.drw-canvas svg g.dim.broken text { font-weight: bold; }
.dim-tip { position: absolute; z-index: 36; pointer-events: none; background: var(--lbl-bg); color: var(--lbl-fg); font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.dim-xhair { position: absolute; z-index: 35; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; }
.dim-xhair svg { display: block; overflow: visible; }
.dim-xhair svg circle, .dim-xhair svg path { stroke: #0B1E3A; stroke-width: 2.6; fill: none; filter: drop-shadow(0 0 1.5px #FFFFFF) drop-shadow(0 0 1px #FFFFFF); }
.dim-xhair svg .xh-dot { fill: #C026D3; stroke: #0B1E3A; stroke-width: 1; }
.dim-ring { position: absolute; z-index: 35; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; pointer-events: none; border: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.dim-edit .dim-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.dim-edit .note.warn { color: var(--ban-warn-fg, #9A3412); background: var(--ban-warn-bg, #FFF7ED); padding: 6px 8px; border-radius: 6px; }
/* hovering a dimension: coloured text without an outline (a stroke makes the text unreadable) */
.drw-canvas svg .dim:hover text { stroke: none !important; }
/* the crosshair is not part of the drawing sheet (css/app.css positions and shades every svg in the canvas) */
.drw-canvas .dim-xhair svg { position: static; box-shadow: none; transform: none; }
/* narrow screens show the tool icons only; the chosen tool keeps its name */
@media (max-width: 1500px) { .dim-bar .dim-tools .btn.active .lbl { display: inline; } }