/**
 * VT Machining 2D Builder - workspace styles.
 *
 * Stylesheet version: 0.17.11
 *
 * Scoped under .vtm2d-workspace so nothing leaks into the host theme, and
 * reusing the configurator's CSS custom properties so the 2D builder matches
 * the 3D builder it lives inside.
 *
 * @package VTMachining3D
 */

.vtm2d-workspace {
	--vtm2d-bg: var(--vtm3d-surface, var(--hfd-surface, #ffffff));
	--vtm2d-panel: var(--vtm3d-surface-low, var(--hfd-surface-low, #f0f4f8));
	--vtm2d-panel-alt: var(--vtm3d-surface-container, var(--hfd-surface-container, #eaeef2));
	--vtm2d-border: var(--vtm3d-outline-soft, var(--hfd-outline-soft, #c3c6d5));
	--vtm2d-border-soft: rgba(0, 71, 171, 0.14);
	--vtm2d-text: var(--vtm3d-text, var(--hfd-text, #171c1f));
	--vtm2d-muted: var(--vtm3d-muted, var(--hfd-muted, #434653));
	--vtm2d-primary: var(--vtm3d-primary, var(--hfd-primary, #00327d));
	--vtm2d-accent: var(--vtm3d-accent, var(--hfd-accent, #006a6a));
	/*
	 * Destructive actions are marked in a deep slate blue, not red.
	 *
	 * Red on a drawing tool competes with the drawing: the sheet already uses
	 * warm accents for selection and stretch grips, and a red "Clear all"
	 * sitting in the same toolbar reads as an error state rather than as a
	 * button. The weight of the outline and the confirmation dialog are what
	 * make the action feel serious; the hue does not have to shout.
	 */
	--vtm2d-danger: #2f4a6d;

	background: var(--vtm2d-bg);
	border: 1px solid var(--vtm2d-border);
	border-radius: 10px;
	box-sizing: border-box;
	color: var(--vtm2d-text);
	display: flex;
	flex-direction: column;
	font-family: "Hanken Grotesk", Arial, Helvetica, sans-serif;
	min-height: min(88vh, 900px);
	overflow: hidden;
	width: 100%;
}

.vtm2d-workspace *,
.vtm2d-workspace *::before,
.vtm2d-workspace *::after {
	box-sizing: border-box;
}

.vtm2d-workspace[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ */
/* View bar                                                            */
/* ------------------------------------------------------------------ */

.vtm2d-viewbar {
	align-items: center;
	background: var(--vtm2d-panel);
	border-bottom: 1px solid var(--vtm2d-border-soft);
	display: flex;
	flex-shrink: 0;
	flex-wrap: wrap;
	gap: 5px;
	padding: 6px 10px;
}

.vtm2d-viewbar-spacer {
	flex: 1 1 auto;
}

.vtm2d-viewbar-sep {
	background: var(--vtm2d-border);
	flex: 0 0 auto;
	height: 18px;
	width: 1px;
}

.vtm2d-launchers {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.vtm2d-launch {
	background: var(--vtm2d-bg);
	border: 1px solid var(--vtm2d-border-soft);
	border-radius: 5px;
	color: var(--vtm2d-muted);
	cursor: pointer;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 600;
	padding: 6px 11px;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vtm2d-launch:hover {
	border-color: var(--vtm2d-primary);
	color: var(--vtm2d-primary);
}

.vtm2d-launch.is-on {
	background: var(--vtm2d-primary);
	border-color: var(--vtm2d-primary);
	color: #ffffff;
}

.vtm2d-btn-icon {
	background: var(--vtm2d-bg);
	border: 1px solid var(--vtm2d-border-soft);
	border-radius: 5px;
	color: var(--vtm2d-text);
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	line-height: 1;
	padding: 7px 10px;
}

.vtm2d-btn-icon:hover:not(:disabled) {
	background: var(--vtm2d-panel-alt);
	border-color: var(--vtm2d-primary);
}

.vtm2d-btn-icon:disabled,
.vtm2d-btn-icon.is-disabled {
	cursor: default;
	opacity: 0.35;
}

.vtm2d-btn-icon.vtm2d-btn-danger {
	border-color: rgba(47, 74, 109, 0.55);
	color: var(--vtm2d-danger);
}

.vtm2d-btn-icon.vtm2d-btn-danger:hover:not(:disabled) {
	background: rgba(47, 74, 109, 0.09);
	border-color: var(--vtm2d-danger);
}

.vtm2d-btn-accent {
	background: var(--vtm2d-primary);
	border-color: var(--vtm2d-primary);
	color: #ffffff;
	font-weight: 600;
}

.vtm2d-btn-accent:hover:not(:disabled) {
	background: #002557;
	border-color: #002557;
	color: #ffffff;
}

/* ------------------------------------------------------------------ */
/* Canvas — fills everything that is left                              */
/* ------------------------------------------------------------------ */

.vtm2d-canvas-host {
	flex: 1 1 auto;
	isolation: isolate;
	min-height: 520px;
	overflow: hidden;
	position: relative;
}

.vtm2d-canvas {
	display: block;
	height: 100%;
	touch-action: none;
	width: 100%;
}

.vtm2d-canvas:focus {
	outline: none;
}

.vtm2d-prompt {
	background: rgba(0, 50, 125, 0.92);
	border-radius: 6px;
	color: #ffffff;
	font-size: 12px;
	left: 12px;
	line-height: 1.4;
	margin: 0;
	max-width: min(560px, calc(100% - 24px));
	padding: 7px 11px;
	pointer-events: none;
	position: absolute;
	top: 12px;
	z-index: 6;
}

.vtm2d-coords {
	background: rgba(23, 28, 31, 0.86);
	border-radius: 6px;
	bottom: 12px;
	color: #ffffff;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	left: 12px;
	margin: 0;
	padding: 5px 9px;
	pointer-events: none;
	position: absolute;
	z-index: 6;
}

.vtm2d-window-layer,
.vtm2d-overlay-layer {
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.vtm2d-window-layer {
	z-index: 20;
}

.vtm2d-overlay-layer {
	z-index: 60;
}

.vtm2d-window-layer > *,
.vtm2d-overlay-layer > * {
	pointer-events: auto;
}

/* ------------------------------------------------------------------ */
/* Floating windows                                                    */
/* ------------------------------------------------------------------ */

.vtm2d-win {
	background: var(--vtm2d-bg);
	border: 1px solid var(--vtm2d-border);
	border-radius: 9px;
	box-shadow: 0 18px 44px rgba(9, 20, 40, 0.26);
	display: flex;
	flex-direction: column;
	max-height: calc(100% - 16px);
	max-width: calc(100% - 8px);
	min-width: 220px;
	position: absolute;
	z-index: 30;
}

/* Collapsed: only the title bar is left on the sheet. */
.vtm2d-win.is-collapsed > .vtm2d-win-body,
.vtm2d-win.is-collapsed > .vtm2d-win-grip {
	display: none;
}

.vtm2d-win.is-collapsed > .vtm2d-win-head {
	border-bottom: none;
	border-radius: 8px;
}

.vtm2d-win-actions {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 2px;
	margin-left: auto;
}

/* Corner resize grip. */
.vtm2d-win-grip {
	bottom: 0;
	cursor: nwse-resize;
	height: 16px;
	position: absolute;
	right: 0;
	touch-action: none;
	width: 16px;
}

.vtm2d-win-grip::after {
	border-bottom: 2px solid var(--vtm2d-muted);
	border-right: 2px solid var(--vtm2d-muted);
	bottom: 4px;
	content: "";
	height: 6px;
	opacity: 0.55;
	position: absolute;
	right: 4px;
	width: 6px;
}

.vtm2d-win-grip:hover::after {
	opacity: 1;
}

.vtm2d-win[hidden] {
	display: none;
}

.vtm2d-win-head {
	align-items: center;
	background: var(--vtm2d-panel);
	border-bottom: 1px solid var(--vtm2d-border-soft);
	border-radius: 8px 8px 0 0;
	cursor: grab;
	display: flex;
	flex-shrink: 0;
	gap: 4px;
	padding: 5px 6px 5px 11px;
	touch-action: none;
	user-select: none;
}

.vtm2d-win-head:active {
	cursor: grabbing;
}

.vtm2d-win-title {
	color: var(--vtm2d-primary);
	flex: 1 1 auto;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.vtm2d-win-btn {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	color: var(--vtm2d-muted);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: inherit;
	font-size: 14px;
	height: 24px;
	justify-content: center;
	line-height: 1;
	opacity: 0.7;
	padding: 0;
	/* The title bar is a drag handle with touch-action:none; the buttons must
	   opt back in so a tap is a tap and not the start of a drag. */
	touch-action: manipulation;
	width: 26px;
}

.vtm2d-win-btn:hover {
	background: var(--vtm2d-panel-alt);
	color: var(--vtm2d-text);
	opacity: 1;
}

.vtm2d-win-btn:focus-visible {
	border-color: var(--vtm2d-accent, #006a6a);
	opacity: 1;
	outline: none;
}

/* Closing is the one action that must never be missed — so it is the strongest
   colour in the window chrome, which the primary blue already is. */
.vtm2d-win-btn:last-child:hover {
	background: var(--vtm2d-primary, #00327d);
	color: #ffffff;
}

.vtm2d-win-btn.is-on {
	background: rgba(0, 106, 106, 0.14);
	filter: none;
	opacity: 1;
}

.vtm2d-win-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 11px 12px 14px;
}

/* ------------------------------------------------------------------ */
/* Dialogs and bubbles                                                 */
/* ------------------------------------------------------------------ */

.vtm2d-dialog-overlay {
	align-items: center;
	background: rgba(9, 20, 40, 0.34);
	display: flex;
	inset: 0;
	justify-content: center;
	position: absolute;
	z-index: 70;
}

.vtm2d-dialog {
	background: var(--vtm2d-bg);
	border: 1px solid var(--vtm2d-border);
	border-radius: 10px;
	box-shadow: 0 24px 60px rgba(9, 20, 40, 0.34);
	max-width: min(460px, calc(100% - 40px));
	padding: 16px 18px;
	width: 420px;
}

.vtm2d-dialog-title {
	color: var(--vtm2d-primary);
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 8px;
}

.vtm2d-dialog-message {
	color: var(--vtm2d-muted);
	font-size: 11.5px;
	line-height: 1.5;
	margin: 0 0 10px;
}

.vtm2d-dialog-actions,
.vtm2d-bubble-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.vtm2d-dialog-actions .vtm2d-btn,
.vtm2d-bubble-actions .vtm2d-btn {
	flex: 1 1 0;
	margin-bottom: 0;
}

.vtm2d-bubble {
	background: var(--vtm2d-bg);
	border: 1px solid var(--vtm2d-primary);
	border-radius: 9px;
	box-shadow: 0 14px 32px rgba(9, 20, 40, 0.28);
	max-width: 300px;
	padding: 11px 13px;
	position: absolute;
	z-index: 70;
}

.vtm2d-bubble-text {
	color: var(--vtm2d-text);
	display: block;
	font-size: 12px;
	line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* Tool rail (inside the Tools window)                                 */
/* ------------------------------------------------------------------ */

.vtm2d-rail-actions {
	margin-bottom: 13px;
}

.vtm2d-rail-group + .vtm2d-rail-group {
	margin-top: 13px;
}

.vtm2d-rail-label {
	color: var(--vtm2d-muted);
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0 0 6px 2px;
	text-transform: uppercase;
}

.vtm2d-rail-grid {
	display: grid;
	gap: 5px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vtm2d-tool {
	align-items: center;
	background: var(--vtm2d-bg);
	border: 1px solid var(--vtm2d-border-soft);
	border-radius: 6px;
	color: var(--vtm2d-text);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font-family: inherit;
	gap: 3px;
	justify-content: center;
	line-height: 1;
	min-height: 52px;
	padding: 7px 3px 6px;
	position: relative;
	text-align: center;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vtm2d-tool-glyph {
	font-size: 16px;
	line-height: 1;
}

.vtm2d-tool-name {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.15;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The keyboard shortcut, tucked in the corner so it never crowds the name. */
.vtm2d-tool-key {
	color: var(--vtm2d-muted);
	font-size: 8px;
	font-weight: 700;
	line-height: 1;
	opacity: 0.6;
	position: absolute;
	right: 3px;
	top: 3px;
}

.vtm2d-tool.is-active .vtm2d-tool-key {
	color: #ffffff;
	opacity: 0.85;
}

.vtm2d-tool:hover {
	background: var(--vtm2d-panel-alt);
	border-color: var(--vtm2d-primary);
}

.vtm2d-tool.is-active {
	background: var(--vtm2d-primary);
	border-color: var(--vtm2d-primary);
	color: #ffffff;
}

.vtm2d-tool:focus-visible {
	outline: 2px solid var(--vtm2d-accent);
	outline-offset: 1px;
}

.vtm2d-tool-glyph {
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Command bar                                                         */
/* ------------------------------------------------------------------ */

.vtm2d-commandbar {
	align-items: center;
	background: var(--vtm2d-panel);
	border-top: 1px solid var(--vtm2d-border-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	grid-area: command;
	padding: 7px 10px;
}

.vtm2d-command-prefix {
	color: var(--vtm2d-muted);
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.vtm2d-command {
	background: var(--vtm2d-bg);
	border: 1px solid var(--vtm2d-border-soft);
	border-radius: 5px;
	color: var(--vtm2d-text);
	flex: 1 1 220px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 12px;
	min-width: 160px;
	padding: 6px 9px;
}

.vtm2d-command:focus {
	border-color: var(--vtm2d-primary);
	outline: none;
}

.vtm2d-snapbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	position: relative;
}

.vtm2d-toggle {
	background: var(--vtm2d-bg);
	border: 1px solid var(--vtm2d-border-soft);
	border-radius: 4px;
	color: var(--vtm2d-muted);
	cursor: pointer;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	padding: 5px 7px;
}

.vtm2d-toggle.is-on {
	background: var(--vtm2d-accent);
	border-color: var(--vtm2d-accent);
	color: #ffffff;
}

.vtm2d-osnap-menu {
	position: relative;
}

.vtm2d-osnap-list {
	background: var(--vtm2d-bg);
	border: 1px solid var(--vtm2d-border);
	border-radius: 7px;
	bottom: calc(100% + 6px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
	display: none;
	min-width: 190px;
	padding: 8px 10px;
	position: absolute;
	right: 0;
	z-index: 20;
}

.vtm2d-osnap-menu.is-open .vtm2d-osnap-list {
	display: block;
}

.vtm2d-status {
	color: var(--vtm2d-muted);
	flex: 0 1 auto;
	font-size: 11px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vtm2d-counts {
	color: var(--vtm2d-muted);
	font-size: 11px;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Right panel                                                         */
/* ------------------------------------------------------------------ */













.vtm2d-win-body .vtm2d-section + .vtm2d-section {
	border-top: 1px solid var(--vtm2d-border-soft);
	margin-top: 14px;
	padding-top: 12px;
}

.vtm2d-section-title {
	color: var(--vtm2d-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.vtm2d-hint {
	color: var(--vtm2d-muted);
	font-size: 11px;
	line-height: 1.5;
	margin: 0 0 8px;
}

/* --- form controls --------------------------------------------------- */

.vtm2d-field {
	display: block;
	margin-bottom: 8px;
}

.vtm2d-field > span {
	color: var(--vtm2d-muted);
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin-bottom: 3px;
	text-transform: uppercase;
}

.vtm2d-corner-mode {
	background: transparent;
	border: 1px solid var(--vtm2d-border);
	border-radius: 4px;
	color: var(--vtm2d-muted);
	cursor: pointer;
	float: right;
	font: inherit;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 2px 5px;
	text-transform: none;
}


.vtm2d-corner-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 6px;
}

.vtm2d-corner-actions .vtm2d-corner-mode {
	float: none;
	flex: 1 1 calc(50% - 3px);
	min-height: 26px;
}

.vtm2d-corner-actions .vtm2d-corner-mode:nth-child(3) {
	flex-basis: 100%;
}

.vtm2d-corner-mode:disabled {
	cursor: not-allowed;
	opacity: 0.42;
}

.vtm2d-corner-mode.is-active {
	background: var(--vtm2d-primary);
	border-color: var(--vtm2d-primary);
	color: #fff;
}

.vtm2d-input {
	background: var(--vtm2d-bg);
	border: 1px solid var(--vtm2d-border-soft);
	border-radius: 5px;
	color: var(--vtm2d-text);
	font-family: inherit;
	font-size: 12px;
	padding: 6px 8px;
	width: 100%;
}

.vtm2d-input:focus {
	border-color: var(--vtm2d-primary);
	outline: none;
}

.vtm2d-textarea {
	line-height: 1.45;
	resize: vertical;
}

.vtm2d-color {
	height: 32px;
	padding: 2px;
}

.vtm2d-check {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 11.5px;
	gap: 7px;
	margin-bottom: 6px;
}

.vtm2d-check input {
	accent-color: var(--vtm2d-accent);
	flex: 0 0 auto;
	margin: 0;
}

.vtm2d-btn {
	background: var(--vtm2d-bg);
	border: 1px solid var(--vtm2d-border);
	border-radius: 6px;
	color: var(--vtm2d-text);
	cursor: pointer;
	display: block;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 6px;
	padding: 8px 10px;
	text-align: center;
	width: 100%;
}

.vtm2d-btn:hover {
	background: var(--vtm2d-panel-alt);
	border-color: var(--vtm2d-primary);
}

.vtm2d-btn-primary {
	background: var(--vtm2d-primary);
	border-color: var(--vtm2d-primary);
	color: #ffffff;
}

.vtm2d-btn-primary:hover {
	background: #002557;
	border-color: #002557;
	color: #ffffff;
}

.vtm2d-btn-danger {
	border-color: rgba(47, 74, 109, 0.55);
	color: var(--vtm2d-danger);
}

.vtm2d-btn-danger:hover {
	background: rgba(47, 74, 109, 0.09);
	border-color: var(--vtm2d-danger);
}

.vtm2d-btn-row {
	display: flex;
	gap: 6px;
}

.vtm2d-btn-row .vtm2d-btn {
	flex: 1 1 0;
}

.vtm2d-btn-mini {
	background: var(--vtm2d-bg);
	border: 1px solid var(--vtm2d-border-soft);
	border-radius: 4px;
	color: var(--vtm2d-muted);
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 12px;
	line-height: 1;
	padding: 5px 7px;
}

.vtm2d-btn-mini:hover {
	border-color: var(--vtm2d-primary);
	color: var(--vtm2d-primary);
}

.vtm2d-row2,
.vtm2d-row4,
.vtm2d-row-flex {
	align-items: center;
	display: flex;
	gap: 4px;
	margin-bottom: 5px;
}

.vtm2d-row2 .vtm2d-input,
.vtm2d-row4 .vtm2d-input,
.vtm2d-row-flex .vtm2d-input {
	min-width: 0;
}

.vtm2d-row4 .vtm2d-input:nth-child(2) {
	flex: 2 1 0;
}

/* --- layers ---------------------------------------------------------- */

.vtm2d-layer-list {
	border: 1px solid var(--vtm2d-border-soft);
	border-radius: 6px;
	margin-bottom: 10px;
	overflow: hidden;
}

.vtm2d-layer {
	align-items: center;
	border-bottom: 1px solid var(--vtm2d-border-soft);
	display: flex;
	gap: 5px;
	padding: 5px 6px;
}

.vtm2d-layer:last-child {
	border-bottom: none;
}

.vtm2d-layer.is-active {
	background: rgba(0, 106, 106, 0.10);
}

.vtm2d-layer-swatch {
	border: 1px solid rgba(0, 0, 0, 0.28);
	border-radius: 3px;
	flex: 0 0 auto;
	height: 13px;
	width: 13px;
}

.vtm2d-layer-name {
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	flex: 1 1 auto;
	font-family: inherit;
	font-size: 11.5px;
	overflow: hidden;
	padding: 0;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vtm2d-layer-count {
	color: var(--vtm2d-muted);
	flex: 0 0 auto;
	font-size: 10px;
	min-width: 18px;
	text-align: right;
}

.vtm2d-layer-icon {
	background: none;
	border: none;
	cursor: pointer;
	filter: grayscale(1);
	flex: 0 0 auto;
	font-size: 11px;
	line-height: 1;
	opacity: 0.4;
	padding: 2px;
}

.vtm2d-layer-icon.is-on {
	filter: none;
	opacity: 1;
}

/* --- notes ------------------------------------------------------------ */

.vtm2d-note-row {
	align-items: flex-start;
	display: flex;
	gap: 5px;
	margin-bottom: 6px;
}

.vtm2d-note-num {
	color: var(--vtm2d-muted);
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	padding-top: 7px;
	width: 20px;
}

.vtm2d-note-row .vtm2d-input {
	flex: 1 1 auto;
}

.vtm2d-note-controls {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 2px;
}

/* ------------------------------------------------------------------ */
/* Mode switch in the configurator topbar                              */
/* ------------------------------------------------------------------ */

.vtm2d-mode-switch {
	align-items: center;
	background: var(--vtm3d-surface-container, var(--hfd-surface-container, #eaeef2));
	border: 1px solid var(--vtm3d-outline-soft, var(--hfd-outline-soft, #c3c6d5));
	border-radius: 999px;
	display: inline-flex;
	gap: 2px;
	padding: 2px;
}

.vtm2d-mode-btn {
	background: transparent;
	border: none;
	border-radius: 999px;
	color: var(--vtm3d-muted, var(--hfd-muted, #434653));
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 6px 14px;
	transition: background 0.18s ease, color 0.18s ease;
}

.vtm2d-mode-btn:hover {
	color: var(--vtm3d-primary, var(--hfd-primary, #00327d));
}

.vtm2d-mode-btn.is-active {
	background: var(--vtm3d-primary, var(--hfd-primary, #00327d));
	color: #ffffff;
}

.vtm2d-mode-btn:focus-visible {
	outline: 2px solid var(--vtm3d-accent, var(--hfd-accent, #006a6a));
	outline-offset: 2px;
}

.vtm2d-shell {
	padding: 0 14px 14px;
}

.vtm2d-standalone .vtm2d-shell,
.mg-sketch2d-standalone .vtm2d-shell {
	padding: 0;
}

.vtm2d-shell[hidden] {
	display: none;
}



/* Hide each host's 3D-only chrome while the 2D builder is showing. */
.is-2d-mode .vtm3d-topbar-product-select,
.is-2d-mode .hfd-topbar-product-select {
	display: none;
}

.is-2d-mode .vtm3d-cad-main,
.is-2d-mode .vtm3d-summary-footer,
.is-2d-mode .vtm3d-summary-drawer,
.is-2d-mode .vtm3d-grid-controls,
.is-2d-mode .vtm3d-intro-strip,
.is-2d-mode .hfd-cad-main,
.is-2d-mode .hfd-summary-footer,
.is-2d-mode .hfd-summary-drawer,
.is-2d-mode .hfd-grid-controls,
.is-2d-mode .hfd-intro-strip,
.is-2d-mode .mgc-body,
.is-2d-mode .mgc-summary {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.vtm2d-workspace {
		min-height: min(84vh, 760px);
	}

	.vtm2d-canvas-host {
		min-height: 420px;
	}

	.vtm2d-rail-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vtm2d-win {
		max-width: calc(100% - 20px);
	}
}

@media (max-width: 720px) {
	.vtm2d-workspace {
		min-height: 78vh;
	}

	.vtm2d-canvas-host {
		min-height: 340px;
	}

	.vtm2d-viewbar {
		gap: 4px;
		padding: 5px 7px;
	}

	.vtm2d-launch,
	.vtm2d-btn-icon {
		font-size: 11px;
		padding: 6px 8px;
	}

	.vtm2d-rail-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Still floating on a phone, just narrower by default and never taller
	   than two thirds of the sheet. Position and size stay under the user's
	   control rather than being forced by the stylesheet. */
	.vtm2d-win {
		max-height: 66%;
		max-width: calc(100% - 16px);
	}

	.vtm2d-win-btn {
		height: 28px;
		width: 30px;
	}
}

@media print {
	.vtm2d-viewbar,
	.vtm2d-commandbar,
	.vtm2d-window-layer,
	.vtm2d-overlay-layer {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Dimension grip legend (0.12.0)                                      */
/* ------------------------------------------------------------------ */

/* Square grips move a dimension; orange diamond grips stretch it. The
   canvas draws the grips themselves — this styles the legend and the
   hints that explain them in the properties panel. */
.vtm2d-grip-legend {
	align-items: center;
	color: var(--vtm3d-muted, var(--hfd-muted, #434653));
	display: flex;
	flex-wrap: wrap;
	font-size: 11px;
	gap: 12px;
	margin: 6px 0 2px;
}

.vtm2d-grip-legend span {
	align-items: center;
	display: inline-flex;
	gap: 5px;
}

.vtm2d-grip-legend i {
	background: #0f8f84;
	display: inline-block;
	height: 8px;
	width: 8px;
}

.vtm2d-grip-legend i.is-stretch {
	background: #c26a00;
	transform: rotate(45deg);
}

/* The 2D / 3D switch is a primary action in the toolbar, so give it a
   little more presence than a plain segmented control. */
.vtm2d-mode-switch {
	flex: 0 0 auto;
}

.vtm2d-mode-btn {
	white-space: nowrap;
}

.vtm2d-mode-btn[data-vtm2d-mode="2d"]::before {
	content: "▢";
	font-size: 10px;
	margin-right: 5px;
	opacity: 0.75;
}

.vtm2d-mode-btn[data-vtm2d-mode="3d"]::before {
	content: "◈";
	font-size: 10px;
	margin-right: 5px;
	opacity: 0.75;
}

@media (max-width: 720px) {
	.vtm2d-mode-btn {
		padding: 6px 10px;
	}

	.vtm2d-mode-btn::before {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Tool help card (0.13.0)                                             */
/* ------------------------------------------------------------------ */

/* Hovering a tool explains it: what it is for, the exact clicks in order,
   and a looping animation of the interaction. Aimed at someone who has
   never opened a CAD program. */
.vtm2d-toolhelp {
	background: var(--vtm2d-bg);
	border: 1px solid var(--vtm2d-border);
	border-radius: 9px;
	box-shadow: 0 16px 40px rgba(9, 20, 40, 0.24);
	max-width: 272px;
	padding: 12px 14px 11px;
	pointer-events: none;
	position: absolute;
	width: 272px;
	z-index: 80;
}

.vtm2d-toolhelp-head {
	align-items: center;
	display: flex;
	gap: 9px;
	margin-bottom: 9px;
}

.vtm2d-toolhelp-glyph {
	align-items: center;
	background: var(--vtm2d-primary);
	border-radius: 6px;
	color: #ffffff;
	display: flex;
	flex: 0 0 auto;
	font-size: 16px;
	height: 30px;
	justify-content: center;
	width: 30px;
}

.vtm2d-toolhelp-titles {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vtm2d-toolhelp-titles strong {
	color: var(--vtm2d-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

.vtm2d-toolhelp-key {
	color: var(--vtm2d-muted);
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vtm2d-toolhelp-anim {
	background: var(--vtm2d-panel-alt);
	border: 1px solid var(--vtm2d-border-soft);
	border-radius: 6px;
	margin-bottom: 10px;
	overflow: hidden;
}

.vtm2d-toolhelp-anim svg {
	display: block;
	height: auto;
	width: 100%;
}

.vtm2d-toolhelp-what {
	color: var(--vtm2d-text);
	font-size: 12.5px;
	line-height: 1.5;
	margin: 0 0 9px;
}

.vtm2d-toolhelp-steps {
	color: var(--vtm2d-muted);
	counter-reset: vtm2d-help;
	font-size: 12px;
	line-height: 1.5;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vtm2d-toolhelp-steps li {
	counter-increment: vtm2d-help;
	padding: 3px 0 3px 21px;
	position: relative;
}

.vtm2d-toolhelp-steps li::before {
	align-items: center;
	background: var(--vtm2d-panel-alt);
	border: 1px solid var(--vtm2d-border-soft);
	border-radius: 50%;
	color: var(--vtm2d-primary);
	content: counter(vtm2d-help);
	display: flex;
	font-size: 9px;
	font-weight: 700;
	height: 15px;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 3px;
	width: 15px;
}

@media (max-width: 720px) {
	/* Touch has no hover; the card would only ever flash on tap. */
	.vtm2d-toolhelp {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vtm2d-toolhelp-anim svg animate,
	.vtm2d-toolhelp-anim svg animateTransform {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Options panel attached to the tool rail (0.14.0)                     */
/* ------------------------------------------------------------------ */

/* The active tool's settings sit against the right edge of the Tools
   window, so options appear beside the button that was just clicked
   rather than in a separate window elsewhere on the sheet. */
.vtm2d-win-side {
	background: var(--vtm2d-bg);
	border: 1px solid var(--vtm2d-border);
	border-radius: 9px;
	box-shadow: 8px 12px 30px rgba(9, 20, 40, 0.2);
	display: none;
	flex-direction: column;
	/* A small gap makes it read as the tool's own panel rather than a second
	   pane welded to the window. Vertical position is set in JS, aligned to
	   whichever tool is currently selected. */
	left: calc(100% + 8px);
	max-height: 72vh;
	position: absolute;
	top: 0;
	transition: top 0.16s ease;
	width: 250px;
}

/* A small pointer back to the tool the panel belongs to. */
.vtm2d-win-side::before {
	border-bottom: 7px solid transparent;
	border-right: 7px solid var(--vtm2d-border);
	border-top: 7px solid transparent;
	content: "";
	left: -7px;
	position: absolute;
	top: 22px;
}

.vtm2d-win.has-side > .vtm2d-win-side {
	display: flex;
}

.vtm2d-win-side-head {
	align-items: center;
	background: var(--vtm2d-panel);
	border-bottom: 1px solid var(--vtm2d-border-soft);
	border-radius: 8px 8px 0 0;
	display: flex;
	flex-shrink: 0;
	gap: 4px;
	padding: 5px 6px 5px 11px;
}

.vtm2d-win-side-title {
	color: var(--vtm2d-text);
	flex: 1 1 auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vtm2d-win-side-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 10px 12px 14px;
}

/* The tab that brings the panel back once it has been hidden. */
.vtm2d-win-sidetab {
	background: var(--vtm2d-panel);
	border: 1px solid var(--vtm2d-border);
	border-left: none;
	border-radius: 0 6px 6px 0;
	color: var(--vtm2d-muted);
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	left: 100%;
	line-height: 1;
	padding: 14px 3px;
	position: absolute;
	top: 44px;
	touch-action: manipulation;
	transition: top 0.16s ease;
}

.vtm2d-win.has-side > .vtm2d-win-sidetab {
	display: none;
}

.vtm2d-win-sidetab:hover {
	background: var(--vtm2d-panel-alt);
	color: var(--vtm2d-primary);
}

/* Active tool header inside the options panel. */
.vtm2d-side-tool {
	border-bottom: 1px solid var(--vtm2d-border-soft);
	margin-bottom: 10px;
	padding-bottom: 9px;
}

.vtm2d-side-tool strong {
	color: var(--vtm2d-primary);
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 4px;
}

.vtm2d-side-what {
	color: var(--vtm2d-muted);
	font-size: 11.5px;
	line-height: 1.45;
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* New drawing setup dialog                                            */
/* ------------------------------------------------------------------ */

.vtm2d-setup {
	align-items: center;
	background: rgba(9, 20, 40, 0.55);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 18px;
	pointer-events: auto;
	position: absolute;
	z-index: 100;
}

.vtm2d-setup-box {
	background: var(--vtm2d-bg);
	border-radius: 11px;
	box-shadow: 0 24px 56px rgba(9, 20, 40, 0.36);
	max-height: calc(100% - 24px);
	max-width: 360px;
	overflow: auto;
	padding: 14px 16px 12px;
	width: 100%;
}

.vtm2d-setup-title {
	color: var(--vtm2d-text);
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 4px;
}

.vtm2d-setup-lead {
	color: var(--vtm2d-muted);
	font-size: 11.5px;
	line-height: 1.4;
	margin: 0 0 9px;
}

.vtm2d-setup-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vtm2d-setup-label {
	color: var(--vtm2d-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	margin-top: 6px;
	text-transform: uppercase;
}

.vtm2d-setup-presets {
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vtm2d-setup-preset {
	font-size: 9px;
	min-width: 0;
	padding: 5px 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vtm2d-setup-row {
	display: grid;
	gap: 7px;
	grid-template-columns: 1fr 1fr;
}

.vtm2d-setup-cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vtm2d-setup-note {
	background: var(--vtm2d-panel-alt);
	border-radius: 5px;
	color: var(--vtm2d-muted);
	font-size: 11.5px;
	line-height: 1.45;
	margin: 5px 0 0;
	padding: 6px 8px;
}

.vtm2d-setup-bar {
	align-items: center;
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.vtm2d-setup-spacer {
	flex: 1 1 auto;
}

@media (max-width: 720px) {
	/* The attached panel would leave no sheet visible on a phone. */
	.vtm2d-win-side,
	.vtm2d-win-sidetab {
		display: none !important;
	}

	.vtm2d-setup-row {
		grid-template-columns: 1fr;
	}

	.vtm2d-setup-presets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ */
/* Edge-docked windows (0.16.0)                                        */
/* ------------------------------------------------------------------ */

/* Export is pinned to the right edge: it is the end of the workflow, so it
   sits opposite the tools instead of floating over the drawing. Its title
   bar is not a drag handle. */
.vtm2d-win.is-docked > .vtm2d-win-head {
	cursor: default;
}

.vtm2d-win.is-docked {
	max-height: calc(100% - 24px);
}

.vtm2d-win.is-docked > .vtm2d-win-grip {
	/* Height is still resizable; horizontal position is fixed. */
	cursor: ns-resize;
}

.vtm2d-win.is-docked > .vtm2d-win-head::after {
	color: var(--vtm2d-muted);
	content: "▮";
	font-size: 8px;
	margin-left: 6px;
	opacity: 0.4;
}

/* The drawing code is long; give it a monospace face so a visual check of
   a pasted code is possible. */
.vtm2d-code {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 10.5px;
	line-height: 1.45;
	word-break: break-all;
}

.vtm2d-copy-toast {
	align-items: center !important;
	background: #ffffff !important;
	border: 1px solid #c8d4e7 !important;
	border-radius: 7px !important;
	box-shadow: 0 6px 20px rgba(20, 43, 82, 0.16) !important;
	color: #00327d !important;
	display: inline-flex !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	height: auto !important;
	line-height: 1.2 !important;
	min-height: 0 !important;
	padding: 8px 11px !important;
	position: fixed !important;
	white-space: nowrap !important;
	width: auto !important;
	z-index: 2147483647 !important;
}

/* Stylesheet version marker — bumped with the plugin so a stale cached
   copy is obvious in devtools. */
.vtm2d-workspace { --vtm2d-css-version: '0.17.11'; }

/* ═══════════════════════════════════════════════════════════════════════════
   AUTOMATIC DIMENSIONS — the offer bar
   ---------------------------------------------------------------------------
   Sits under the command bar and appears for a moment after a shape is
   finished. It is a question, not an alert, so it is quiet: the same surface
   as the rest of the chrome, one emphasised button, and no colour that would
   read as an error.

   The slot collapses to nothing when empty so it costs no height on a drawing
   where the feature is switched off.
   ═══════════════════════════════════════════════════════════════════════════ */

.vtm2d-autodim-slot:empty {
	display: none;
}

.vtm2d-autodim-bar {
	align-items: center;
	background: var(--vtm2d-panel, #f0f4f8);
	border-top: 1px solid var(--vtm2d-border, #c3c6d5);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 12px;
}

.vtm2d-autodim-msg {
	color: var(--vtm2d-text, #171c1f);
	font-size: 13px;
	font-weight: 600;
	margin-right: 4px;
}

.vtm2d-autodim-btn {
	background: var(--vtm2d-surface, #ffffff);
	border: 1px solid var(--vtm2d-border, #c3c6d5);
	border-radius: 5px;
	color: var(--vtm2d-text, #171c1f);
	cursor: pointer;
	font: inherit;
	font-size: 12.5px;
	line-height: 1.2;
	padding: 6px 12px;
	transition: background .15s, border-color .15s, color .15s;
}

.vtm2d-autodim-btn:hover {
	border-color: var(--vtm2d-primary, #00327d);
}

.vtm2d-autodim-btn.is-primary {
	background: var(--vtm2d-primary, #00327d);
	border-color: var(--vtm2d-primary, #00327d);
	color: #ffffff;
	font-weight: 600;
}

.vtm2d-autodim-btn.is-primary:hover {
	filter: brightness(1.12);
}

/* "Always" and "Never" change a setting rather than acting on this shape, so
   they are held back a step from the two answers to the question asked. */
.vtm2d-autodim-btn.is-quiet {
	background: transparent;
	border-color: transparent;
	color: var(--vtm2d-muted, #434653);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.vtm2d-autodim-btn.is-quiet:hover {
	color: var(--vtm2d-primary, #00327d);
}

@media (max-width: 620px) {
	.vtm2d-autodim-bar {
		padding: 8px;
	}
	.vtm2d-autodim-msg {
		flex-basis: 100%;
	}
}


/* ── FRAMELESS WORKSPACE ──────────────────────────────────────────────────
   Same reasoning as the shell: the drawing canvas keeps its edge, the box
   around the whole tool does not. Scoped to the embedded and standalone
   contexts so a host that genuinely wants a card can still have one. */
.hfd-2d-only .vtm2d-workspace,
.vtm2d-standalone .vtm2d-workspace {
	background: none;
	border: 0;
	border-radius: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   OVERLAY CHROME — MADE IMMUNE TO THE HOST THEME
   ---------------------------------------------------------------------------
   The prompt bar was unreadable on a live site: dark text on the dark blue
   chip, with the message effectively invisible.

   The cause is specificity, not the colour. The prompt is a <p>, the builder
   is embedded in post content, and practically every WordPress theme ships
   something like `.entry-content p { color: #333 }` — (0,2,0) against this
   file's `.vtm2d-prompt` (0,1,0). The theme wins, the white is replaced by the
   theme's body colour, and the chip keeps its dark background. The same trap
   is waiting for every other piece of chrome the builder paints over the
   canvas, and for the buttons in the auto-dimension bar, which themes restyle
   even more aggressively than paragraphs.

   A widget that gets dropped into somebody else's page cannot inherit that
   page's typography for its OWN controls. So the text colours of the chrome
   are pinned: `!important` on colour only — never on layout, so a host that
   wants to move or resize something still can — plus -webkit-text-fill-color,
   which is what a theme setting that property (some do, for gradient text)
   would otherwise win with.

   The backgrounds are made fully opaque at the same time. The chips sit over
   the rulers and the sheet edge, where a translucent panel muddies into the
   background it is supposed to stand out from.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The rulers are painted on the canvas and are 22px deep, so 12px from the
   corner put the prompt and the coordinate read-out directly on top of the
   scale. They now start inside the drawing area instead of covering it. */
.vtm2d-shell .vtm2d-prompt {
	background: #1d232b;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 2px 10px rgba(9, 14, 20, 0.28);
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
	left: 34px;
	top: 34px;
}

.vtm2d-shell .vtm2d-coords {
	background: #1d232b;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
	left: 34px;
}

/* The status line and object counts sit in the command bar on the panel
   background, so they only need their colour defending, not their box. */
.vtm2d-shell .vtm2d-status,
.vtm2d-shell .vtm2d-counts {
	color: var(--vtm2d-muted, #434653) !important;
	-webkit-text-fill-color: var(--vtm2d-muted, #434653);
}

/* ── The automatic-dimension bar ──────────────────────────────────────────
   Its message is a <span> and its answers are <button>s. Themes restyle
   buttons harder than anything else on a page — background, colour, radius,
   text-transform — and a button whose label has been turned white on white is
   a question the user cannot answer. */
.vtm2d-shell .vtm2d-autodim-bar {
	background: var(--vtm2d-panel, #f0f4f8);
}

.vtm2d-shell .vtm2d-autodim-msg {
	color: var(--vtm2d-text, #171c1f) !important;
	-webkit-text-fill-color: var(--vtm2d-text, #171c1f);
}

.vtm2d-shell .vtm2d-autodim-btn {
	background: var(--vtm2d-surface, #ffffff);
	color: var(--vtm2d-text, #171c1f) !important;
	-webkit-text-fill-color: var(--vtm2d-text, #171c1f);
	letter-spacing: normal;
	text-transform: none;
}

.vtm2d-shell .vtm2d-autodim-btn.is-primary {
	background: var(--vtm2d-primary, #00327d);
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
}

.vtm2d-shell .vtm2d-autodim-btn.is-quiet {
	background: transparent;
	color: var(--vtm2d-muted, #434653) !important;
	-webkit-text-fill-color: var(--vtm2d-muted, #434653);
}

.vtm2d-shell .vtm2d-autodim-btn.is-quiet:hover {
	color: var(--vtm2d-primary, #00327d) !important;
	-webkit-text-fill-color: var(--vtm2d-primary, #00327d);
}

/* On a narrow canvas the prompt would otherwise reach most of the way across
   the drawing. */
@media (max-width: 620px) {
	.vtm2d-shell .vtm2d-prompt {
		font-size: 11.5px;
		left: 26px;
		max-width: calc(100% - 38px);
		top: 26px;
	}
	.vtm2d-shell .vtm2d-coords {
		left: 26px;
	}
}