/**
 * VT Machining 2D Builder - workspace styles.
 *
 * 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(--mg3d-surface, #ffffff));
	--vtm2d-panel: var(--vtm3d-surface-low, var(--mg3d-surface-low, #f0f4f8));
	--vtm2d-panel-alt: var(--vtm3d-surface-container, var(--mg3d-surface-container, #eaeef2));
	--vtm2d-border: var(--vtm3d-outline-soft, var(--mg3d-outline-soft, #c3c6d5));
	--vtm2d-border-soft: rgba(0, 71, 171, 0.14);
	--vtm2d-text: var(--vtm3d-text, var(--mg3d-text, #171c1f));
	--vtm2d-muted: var(--vtm3d-muted, var(--mg3d-muted, #434653));
	--vtm2d-primary: var(--vtm3d-primary, var(--mg3d-primary, #00327d));
	--vtm2d-accent: var(--vtm3d-accent, var(--mg3d-accent, #006a6a));
	--vtm2d-danger: #a4262c;

	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(164, 38, 44, 0.5);
	color: var(--vtm2d-danger);
}

.vtm2d-btn-icon.vtm2d-btn-danger:hover:not(:disabled) {
	background: rgba(164, 38, 44, 0.08);
	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. */
.vtm2d-win-btn:last-child:hover {
	background: #c0392b;
	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-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(164, 38, 44, 0.5);
	color: var(--vtm2d-danger);
}

.vtm2d-btn-danger:hover {
	background: rgba(164, 38, 44, 0.08);
	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(--mg3d-surface-container, #eaeef2));
	border: 1px solid var(--vtm3d-outline-soft, var(--mg3d-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(--mg3d-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(--mg3d-primary, #00327d));
}

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

.vtm2d-mode-btn:focus-visible {
	outline: 2px solid var(--vtm3d-accent, var(--mg3d-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 .mg3d-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 .mg3d-cad-main,
.is-2d-mode .mg3d-summary-footer,
.is-2d-mode .mg3d-summary-drawer,
.is-2d-mode .mg3d-grid-controls,
.is-2d-mode .mg3d-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(--mg3d-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;
	}
}