/* css custom properties for monochrome theme and spacing */
/* Light mode (default) - uses inverted colors for light background */
:root {
	--cs_color_background_primary: #ffffff;
	--cs_color_background_secondary: #f5f5f5;
	--cs_color_background_tertiary: #e0e0e0;
	--cs_color_background_hover: #d0d0d0;
	--cs_color_border_primary: #333333;
	--cs_color_border_secondary: #666666;
	--cs_color_border_muted: #999999;
	--cs_color_text_primary: #000000;
	--cs_color_text_secondary: #333333;
	--cs_color_text_muted: #666666;
	--cs_color_accent_primary: #000000;
	--cs_color_accent_secondary: #333333;
	--cs_spacing_unit_standard: 10px;
	--cs_border_width_standard: 1px;
	--cs_border_radius_none: 0px;
	--cs_border_radius_round: 50%;
	--cs_border_radius_soft: 4px;
	--cs_element_size_touch_target: 48px;
	--cs_panel_width_standard: 336px;
	--cs_font_family_primary: "helvetica neue", -apple-system, blinkmacsystemfont,
		"segoe ui", roboto, sans-serif;
	--cs_font_family_monospace: "sf mono", consolas, "liberation mono", menlo,
		monospace;
	--cs_font_size_small: 12px;
	--cs_font_size_normal: 14px;
	--cs_font_size_large: 16px;
	--cs_font_weight_normal: 400;
	--cs_font_weight_medium: 500;
	--cs_font_weight_bold: 700;
} /* end css custom properties */

/* Dark mode overrides - black background with white text */
[data-theme="dark"],
body.dark-mode {
	--cs_color_background_primary: #000000;
	--cs_color_background_secondary: #1a1a1a;
	--cs_color_background_tertiary: #333333;
	--cs_color_background_hover: #4a4a4a;
	--cs_color_border_primary: #ffffff;
	--cs_color_border_secondary: #cccccc;
	--cs_color_border_muted: #666666;
	--cs_color_text_primary: #ffffff;
	--cs_color_text_secondary: #cccccc;
	--cs_color_text_muted: #888888;
	--cs_color_accent_primary: #ffffff;
	--cs_color_accent_secondary: #cccccc;
} /* end dark mode overrides */

/* ===== MEASUREMENT TOOL STYLES ===== */
/* NOTE: Global resets and body/html styles removed to prevent conflicts with main app */

/* measuring mode overlay */
.cs_measuring_overlay_element {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 500;
	display: none;
	pointer-events: none;
} /* end cs_measuring_overlay_element */
.cs_measuring_overlay_element.state_active {
	display: block;
} /* end measuring overlay active state */
/* measurement crosshair element */
.cs_measurement_crosshair_element {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 999;
	display: none;
} /* end cs_measurement_crosshair_element */
.cs_measurement_crosshair_element.state_active {
	display: block;
} /* end crosshair active state */
.cs_measurement_crosshair_element::before,
.cs_measurement_crosshair_element::after {
	content: "";
	position: absolute;
	background: var(--cs_color_accent_primary);
} /* end crosshair pseudo elements */
.cs_measurement_crosshair_element::before {
	top: 50%;
	left: calc(-50vw + 48px);
	width: calc(100vw - 96px);
	height: 2px;
	transform: translateY(-50%);
} /* end crosshair horizontal line */
.cs_measurement_crosshair_element::after {
	left: 50%;
	top: calc(-50vh + 48px);
	width: 2px;
	height: calc(100vh - 96px);
	transform: translateX(-50%);
} /* end crosshair vertical line */
/* toolbar controls container */
.cs_toolbar_controls_container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1002;
	display: flex;
	align-items: center;
	background: var(--cs_color_background_primary);
	border-bottom: var(--cs_border_width_standard) solid
		var(--cs_color_border_primary);
	padding: var(--cs_spacing_unit_standard);
	gap: var(--cs_spacing_unit_standard);
	height: calc(
		var(--cs_element_size_touch_target) + 2 * var(--cs_spacing_unit_standard)
	);
	flex-wrap: wrap;
} /* end cs_toolbar_controls_container */
/* control button groups */
.cs_control_button_group {
	display: flex;
	align-items: center;
	gap: var(--cs_spacing_unit_standard);
	flex-shrink: 0;
} /* end cs_control_button_group */
/* measurement controls container */
.cs_measurement_controls_container {
	display: flex;
	align-items: center;
	position: relative;
	gap: var(--cs_spacing_unit_standard);
} /* end cs_measurement_controls_container */
/* unit dropdown sliding element */
.cs_unit_dropdown_sliding {
	position: absolute;
	left: calc(
		var(--cs_element_size_touch_target) + var(--cs_spacing_unit_standard)
	);
	top: 0;
	width: 240px;
	height: var(--cs_element_size_touch_target);
	background: var(--cs_color_background_primary);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	z-index: 1003;
	display: none;
} /* end cs_unit_dropdown_sliding */
.cs_unit_dropdown_sliding.state_active {
	display: block;
} /* end dropdown active state */
/* unit select sliding element */
.cs_unit_select_sliding {
	width: 100%;
	height: 100%;
	padding: 0 var(--cs_spacing_unit_standard);
	border: none;
	background: transparent;
	color: var(--cs_color_text_primary);
	font-size: var(--cs_font_size_normal);
	font-family: var(--cs_font_family_primary);
	cursor: pointer;
	outline: none;
	appearance: none;
} /* end cs_unit_select_sliding */
.cs_unit_select_sliding:focus {
	background: var(--cs_color_background_secondary);
} /* end unit select focus state */
/* control button circular element */
.cs_control_button_circular {
	width: var(--cs_element_size_touch_target);
	height: var(--cs_element_size_touch_target);
	min-width: var(--cs_element_size_touch_target);
	max-width: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	background: var(--cs_color_background_secondary);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	color: var(--cs_color_text_primary);
	cursor: pointer;
	font-size: var(--cs_font_size_large);
	font-weight: var(--cs_font_weight_medium);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--cs_border_radius_none);
} /* end cs_control_button_circular */
.cs_control_button_circular:hover {
	background: var(--cs_color_background_tertiary);
} /* end control button hover state */
.cs_control_button_circular.state_active {
	background: var(--cs_color_accent_primary);
	color: var(--cs_color_background_primary);
} /* end control button active state */
.cs_control_button_circular.state_disabled {
	background: var(--cs_color_background_secondary);
	color: var(--cs_color_text_muted);
	cursor: not-allowed;
	opacity: 0.5;
} /* end control button disabled state */
/* panel container expandable element */
.cs_panel_container_expandable {
	position: fixed;
	left: 48px;
	top: 48px;
	height: calc(100vh - 96px);
	width: var(--cs_panel_width_standard);
	background: var(--cs_color_background_primary);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	border-radius: var(--cs_border_radius_soft);
	z-index: 1000;
	display: none;
	flex-direction: column;
} /* end cs_panel_container_expandable */
/* options panel positioned next to measurement panel */
#options-panel {
	left: 400px;
} /* end options panel position */
.cs_panel_container_expandable.state_active {
	display: flex;
} /* end panel active state */
.cs_panel_container_expandable.state_collapsed {
	bottom: auto;
	height: var(--cs_element_size_touch_target);
} /* end panel collapsed state */
/* panel header collapsible element */
.cs_panel_header_collapsible {
	height: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	padding: 0 var(--cs_spacing_unit_standard);
	border-bottom: var(--cs_border_width_standard) solid
		var(--cs_color_border_primary);
	font-weight: var(--cs_font_weight_bold);
	font-size: var(--cs_font_size_large);
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	background: var(--cs_color_background_secondary);
} /* end cs_panel_header_collapsible */
.cs_panel_header_collapsible:hover {
	background: var(--cs_color_background_tertiary);
} /* end panel header hover state */
.cs_panel_container_expandable.state_collapsed .cs_panel_header_collapsible {
	border-bottom: none;
} /* end collapsed header state */
/* panel content scrollable element */
.cs_panel_content_scrollable {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--cs_spacing_unit_standard);
} /* end cs_panel_content_scrollable */
.cs_panel_content_scrollable::-webkit-scrollbar {
	width: 6px;
} /* end scrollbar width */
.cs_panel_content_scrollable::-webkit-scrollbar-track {
	background: var(--cs_color_background_secondary);
} /* end scrollbar track */
.cs_panel_content_scrollable::-webkit-scrollbar-thumb {
	background: var(--cs_color_border_primary);
} /* end scrollbar thumb */
.cs_panel_container_expandable.state_collapsed .cs_panel_content_scrollable {
	display: none;
} /* end collapsed content state */
/* close button circular element */
.cs_close_button_circular {
	width: var(--cs_element_size_touch_target);
	height: var(--cs_element_size_touch_target);
	min-width: var(--cs_element_size_touch_target);
	max-width: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	background: transparent;
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	color: var(--cs_color_text_primary);
	cursor: pointer;
	font-size: var(--cs_font_size_normal);
	display: flex;
	align-items: center;
	justify-content: center;
} /* end cs_close_button_circular */
.cs_close_button_circular:hover {
	background: var(--cs_color_background_tertiary);
	color: var(--cs_color_text_primary);
} /* end close button hover state */
/* measurement section container */
.cs_measurement_section_container {
	padding: var(--cs_spacing_unit_standard);
	margin-bottom: var(--cs_spacing_unit_standard);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	background: var(--cs_color_background_secondary);
} /* end cs_measurement_section_container */
.cs_measurement_section_container:hover {
	background: var(--cs_color_background_tertiary);
} /* end section hover state */
/* section label typography */
.cs_section_label_typography {
	font-weight: var(--cs_font_weight_bold);
	font-size: var(--cs_font_size_small);
	color: var(--cs_color_text_secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: flex;
	align-items: center;
	height: var(--cs_element_size_touch_target);
	margin-bottom: var(--cs_spacing_unit_standard);
} /* end cs_section_label_typography */
/* form input elements */
.cs_select_dropdown_input,
.cs_inline_input_field {
	width: 100%;
	height: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	padding: 0 var(--cs_spacing_unit_standard);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	background: var(--cs_color_background_primary);
	color: var(--cs_color_text_primary);
	font-size: var(--cs_font_size_normal);
	font-family: var(--cs_font_family_primary);
	margin-bottom: var(--cs_spacing_unit_standard);
} /* end form input elements */
.cs_select_dropdown_input:focus,
.cs_inline_input_field:focus {
	outline: none;
	background: var(--cs_color_background_secondary);
} /* end input focus state */
/* measurement panels container */
.cs_measurement_panels_container {
	display: flex;
	flex-direction: column;
	gap: var(--cs_spacing_unit_standard);
} /* end cs_measurement_panels_container */
/* measurement panel expandable */
.cs_measurement_panel_expandable {
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	background: var(--cs_color_background_secondary);
} /* end cs_measurement_panel_expandable */
.cs_measurement_panel_expandable:hover {
	background: var(--cs_color_background_tertiary);
} /* end panel hover state */
/* measurement panel header */
.cs_measurement_panel_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	padding: 0 var(--cs_spacing_unit_standard);
	background: var(--cs_color_background_tertiary);
	cursor: pointer;
	border-bottom: var(--cs_border_width_standard) solid
		var(--cs_color_border_primary);
} /* end cs_measurement_panel_header */
.cs_measurement_panel_header:hover {
	background: var(--cs_color_background_hover);
} /* end panel header hover state */
.cs_measurement_panel_expandable.state_collapsed .cs_measurement_panel_header {
	border-bottom: none;
} /* end collapsed panel header */
/* panel header title */
.cs_panel_header_title {
	display: flex;
	align-items: center;
	gap: var(--cs_spacing_unit_standard);
	font-weight: var(--cs_font_weight_medium);
	font-size: var(--cs_font_size_normal);
	color: var(--cs_color_text_primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
} /* end cs_panel_header_title */
/* panel expand indicator */
.cs_panel_expand_indicator {
	color: var(--cs_color_text_secondary);
	font-size: var(--cs_font_size_normal);
} /* end cs_panel_expand_indicator */
.cs_measurement_panel_expandable.state_collapsed .cs_panel_expand_indicator {
	transform: rotate(-90deg);
} /* end collapsed indicator state */
/* measurement panel content */
.cs_measurement_panel_content {
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--cs_color_background_primary);
	display: block;
} /* end cs_measurement_panel_content */
.cs_measurement_panel_content.state_collapsed {
	max-height: 0;
	overflow: hidden;
	display: none;
} /* end collapsed content state */
/* measurement item container */
.cs_measurement_item_container {
	background: var(--cs_color_background_secondary);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	margin: var(--cs_spacing_unit_standard);
	padding: var(--cs_spacing_unit_standard);
} /* end cs_measurement_item_container */
.cs_measurement_item_container:hover {
	background: var(--cs_color_background_tertiary);
} /* end item hover state */
/* measurement item header */
.cs_measurement_item_header {
	height: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--cs_spacing_unit_standard);
} /* end cs_measurement_item_header */
/* measurement item info */
.cs_measurement_item_info {
	flex: 1;
	min-width: 0;
} /* end cs_measurement_item_info */
/* measurement item name */
.cs_measurement_item_name {
	font-weight: var(--cs_font_weight_bold);
	font-size: var(--cs_font_size_normal);
	color: var(--cs_color_text_primary);
	text-transform: capitalize;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
} /* end cs_measurement_item_name */
/* measurement item value */
.cs_measurement_item_value {
	font-size: var(--cs_font_size_small);
	color: var(--cs_color_text_secondary);
	font-family: var(--cs_font_family_monospace);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
} /* end cs_measurement_item_value */
/* delete button circular */
.cs_delete_button_circular {
	width: var(--cs_element_size_touch_target);
	height: var(--cs_element_size_touch_target);
	min-width: var(--cs_element_size_touch_target);
	max-width: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	background: var(--cs_color_background_tertiary);
	color: var(--cs_color_text_primary);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	cursor: pointer;
	font-size: var(--cs_font_size_normal);
	display: flex;
	align-items: center;
	justify-content: center;
} /* end cs_delete_button_circular */
.cs_delete_button_circular:hover {
	background: var(--cs_color_accent_primary);
	color: var(--cs_color_background_primary);
} /* end delete button hover state */
/* clear all button action */
.cs_clear_all_button_action {
	width: 100%;
	height: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	background: var(--cs_color_background_tertiary);
	color: var(--cs_color_text_primary);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	cursor: pointer;
	font-weight: var(--cs_font_weight_bold);
	font-size: var(--cs_font_size_normal);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cs_spacing_unit_standard);
	margin-top: var(--cs_spacing_unit_standard);
	text-transform: uppercase;
	letter-spacing: 0.05em;
} /* end cs_clear_all_button_action */
.cs_clear_all_button_action:hover {
	background: var(--cs_color_accent_primary);
	color: var(--cs_color_background_primary);
} /* end clear all hover state */
/* total distance display */
.cs_total_distance_display {
	height: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	background: var(--cs_color_accent_primary);
	color: var(--cs_color_background_primary);
	font-weight: var(--cs_font_weight_bold);
	font-size: var(--cs_font_size_normal);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cs_spacing_unit_standard);
	margin: var(--cs_spacing_unit_standard);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
} /* end cs_total_distance_display */
.cs_panel_container_expandable.state_collapsed .cs_total_distance_display {
	display: none;
} /* end collapsed total display */
/* feature profile popup */
.cs_feature_profile_popup {
	position: fixed;
	top: 48px;
	right: 48px;
	max-width: calc(100vw - 96px - var(--cs_panel_width_standard) - 16px);
	width: var(--cs_panel_width_standard);
	max-height: calc(100vh - 96px);
	background: var(--cs_color_background_primary);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	border-radius: var(--cs_border_radius_soft);
	z-index: 1100;
	display: none;
	flex-direction: column;
	overflow: hidden;
} /* end cs_feature_profile_popup */
.cs_feature_profile_popup.state_active {
	display: flex;
} /* end popup active state */
.cs_feature_profile_popup.state_collapsed {
	height: var(--cs_element_size_touch_target);
} /* end popup collapsed state */
/* measurement marker circular */
.cs_measurement_marker_circular {
	width: var(--cs_element_size_touch_target);
	height: var(--cs_element_size_touch_target);
	min-width: var(--cs_element_size_touch_target);
	max-width: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	background: var(--cs_color_background_primary);
	color: var(--cs_color_text_primary);
	border: 3px solid var(--cs_color_border_primary);
	border-radius: var(--cs_border_radius_round);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--cs_font_weight_bold);
	font-size: var(--cs_font_size_normal);
	cursor: pointer;
} /* end cs_measurement_marker_circular */
.cs_measurement_marker_circular:hover {
	background: var(--cs_color_accent_primary);
	color: var(--cs_color_background_primary);
} /* end marker hover state */
.cs_measurement_marker_circular.state_selected {
	background: var(--cs_color_accent_primary);
	color: var(--cs_color_background_primary);
} /* end marker selected state */
.cs_measurement_marker_circular.state_dragging {
	cursor: grabbing;
	background: var(--cs_color_background_hover);
	color: var(--cs_color_text_primary);
} /* end marker dragging state */
/* distance label display */
.cs_distance_label_display {
	background: var(--cs_color_background_primary);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	padding: var(--cs_spacing_unit_standard);
	font-size: var(--cs_font_size_small);
	font-weight: var(--cs_font_weight_bold);
	font-family: var(--cs_font_family_monospace);
	color: var(--cs_color_text_primary);
	border-radius: var(--cs_border_radius_soft);
	white-space: nowrap;
	pointer-events: none;
} /* end cs_distance_label_display */
/* area label display */
.cs_area_label_display {
	background: var(--cs_color_accent_primary);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	padding: var(--cs_spacing_unit_standard);
	font-size: var(--cs_font_size_small);
	font-weight: var(--cs_font_weight_bold);
	font-family: var(--cs_font_family_monospace);
	color: var(--cs_color_background_primary);
	border-radius: var(--cs_border_radius_soft);
	pointer-events: none;
} /* end cs_area_label_display */
/* feature actions group */
.cs_feature_actions_group {
	display: flex;
	padding: var(--cs_spacing_unit_standard);
	gap: var(--cs_spacing_unit_standard);
} /* end cs_feature_actions_group */
/* feature action button */
.cs_feature_action_button {
	flex: 1;
	height: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	background: var(--cs_color_background_secondary);
	color: var(--cs_color_text_primary);
	cursor: pointer;
	font-size: var(--cs_font_size_small);
	font-weight: var(--cs_font_weight_medium);
	font-family: var(--cs_font_family_primary);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cs_spacing_unit_standard);
	text-transform: uppercase;
	letter-spacing: 0.05em;
} /* end cs_feature_action_button */
.cs_feature_action_button:hover {
	background: var(--cs_color_background_tertiary);
} /* end feature action hover state */
.cs_feature_action_button.state_active {
	background: var(--cs_color_accent_primary);
	color: var(--cs_color_background_primary);
} /* end feature action active state */
.cs_feature_action_button.state_delete {
	background: var(--cs_color_background_tertiary);
} /* end feature action delete state */
.cs_feature_action_button.state_delete:hover {
	background: var(--cs_color_accent_primary);
	color: var(--cs_color_background_primary);
} /* end feature action delete hover state */
/* move controls expandable */
.cs_move_controls_expandable {
	display: none;
	border-top: var(--cs_border_width_standard) solid
		var(--cs_color_border_primary);
	padding: var(--cs_spacing_unit_standard);
	background: var(--cs_color_background_secondary);
} /* end cs_move_controls_expandable */
.cs_move_controls_expandable.state_active {
	display: block;
} /* end move controls active state */
/* move control section */
.cs_move_control_section {
	padding: var(--cs_spacing_unit_standard);
} /* end cs_move_control_section */
/* move control label */
.cs_move_control_label {
	font-size: var(--cs_font_size_small);
	font-weight: var(--cs_font_weight_bold);
	font-family: var(--cs_font_family_primary);
	color: var(--cs_color_text_secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	height: var(--cs_element_size_touch_target);
	display: flex;
	align-items: center;
	margin-bottom: var(--cs_spacing_unit_standard);
} /* end cs_move_control_label */
/* distance input group */
.cs_distance_input_group {
	display: flex;
	gap: var(--cs_spacing_unit_standard);
	margin-bottom: var(--cs_spacing_unit_standard);
} /* end cs_distance_input_group */
/* distance input field */
.cs_distance_input_field {
	flex: 2;
	height: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	padding: 0 var(--cs_spacing_unit_standard);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	background: var(--cs_color_background_primary);
	color: var(--cs_color_text_primary);
	font-size: var(--cs_font_size_normal);
	font-family: var(--cs_font_family_primary);
	outline: none;
} /* end cs_distance_input_field */
.cs_distance_input_field:focus {
	background: var(--cs_color_background_secondary);
} /* end distance input focus state */
/* distance unit select */
.cs_distance_unit_select {
	flex: 1;
	height: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	padding: 0 var(--cs_spacing_unit_standard);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	background: var(--cs_color_background_primary);
	color: var(--cs_color_text_primary);
	font-size: var(--cs_font_size_small);
	font-family: var(--cs_font_family_primary);
	cursor: pointer;
	outline: none;
} /* end cs_distance_unit_select */
.cs_distance_unit_select:focus {
	background: var(--cs_color_background_secondary);
} /* end distance unit focus state */
/* direction grid layout */
.cs_direction_grid_layout {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cs_spacing_unit_standard);
	margin-bottom: var(--cs_spacing_unit_standard);
} /* end cs_direction_grid_layout */
/* direction button movement */
.cs_direction_button_movement {
	height: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	background: var(--cs_color_background_secondary);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	color: var(--cs_color_text_primary);
	cursor: pointer;
	font-size: var(--cs_font_size_large);
	font-weight: var(--cs_font_weight_bold);
	font-family: var(--cs_font_family_primary);
	display: flex;
	align-items: center;
	justify-content: center;
} /* end cs_direction_button_movement */
.cs_direction_button_movement:hover {
	background: var(--cs_color_accent_primary);
	color: var(--cs_color_background_primary);
} /* end direction button hover state */
/* move actions group */
.cs_move_actions_group {
	display: flex;
	justify-content: center;
	padding: var(--cs_spacing_unit_standard);
} /* end cs_move_actions_group */
/* done button action */
.cs_done_button_action {
	height: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	padding: 0 calc(2 * var(--cs_spacing_unit_standard));
	background: var(--cs_color_accent_primary);
	color: var(--cs_color_background_primary);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	cursor: pointer;
	font-size: var(--cs_font_size_normal);
	font-weight: var(--cs_font_weight_bold);
	font-family: var(--cs_font_family_primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: flex;
	align-items: center;
	justify-content: center;
} /* end cs_done_button_action */
.cs_done_button_action:hover {
	background: var(--cs_color_background_hover);
	color: var(--cs_color_text_primary);
} /* end done button hover state */
/* shoe configuration container */
.cs_shoe_configuration_container {
	display: none;
} /* end cs_shoe_configuration_container */
.cs_shoe_configuration_container.state_active {
	display: block;
} /* end shoe configuration active state */
/* shoe category buttons */
.cs_shoe_category_buttons {
	display: flex;
	gap: var(--cs_spacing_unit_standard);
	margin-bottom: var(--cs_spacing_unit_standard);
} /* end cs_shoe_category_buttons */
/* shoe category button */
.cs_shoe_category_button {
	flex: 1;
	height: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	background: var(--cs_color_background_secondary);
	color: var(--cs_color_text_primary);
	cursor: pointer;
	font-size: var(--cs_font_size_small);
	font-weight: var(--cs_font_weight_medium);
	font-family: var(--cs_font_family_primary);
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	letter-spacing: 0.05em;
} /* end cs_shoe_category_button */
.cs_shoe_category_button:hover {
	background: var(--cs_color_background_tertiary);
} /* end shoe category hover state */
.cs_shoe_category_button.state_active {
	background: var(--cs_color_accent_primary);
	color: var(--cs_color_background_primary);
} /* end shoe category active state */
/* inline input group */
.cs_inline_input_group {
	display: flex;
	gap: var(--cs_spacing_unit_standard);
	align-items: stretch;
} /* end cs_inline_input_group */
/* coordinates input editable */
.cs_coordinates_input_editable {
	width: 100%;
	height: var(--cs_element_size_touch_target);
	min-height: var(--cs_element_size_touch_target);
	max-height: var(--cs_element_size_touch_target);
	padding: 0 var(--cs_spacing_unit_standard);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	background: var(--cs_color_background_primary);
	color: var(--cs_color_text_primary);
	font-size: var(--cs_font_size_small);
	font-family: var(--cs_font_family_monospace);
	margin-bottom: var(--cs_spacing_unit_standard);
	outline: none;
} /* end cs_coordinates_input_editable */
.cs_coordinates_input_editable:focus {
	background: var(--cs_color_background_secondary);
} /* end coordinates input focus state */
/* drag info display */
.cs_drag_info_display {
	padding: var(--cs_spacing_unit_standard);
	background: var(--cs_color_accent_primary);
	color: var(--cs_color_background_primary);
	border: var(--cs_border_width_standard) solid var(--cs_color_border_primary);
	font-weight: var(--cs_font_weight_medium);
	margin-bottom: var(--cs_spacing_unit_standard);
	text-align: center;
	display: none;
} /* end cs_drag_info_display */
.cs_drag_info_display.state_active {
	display: block;
} /* end drag info active state */

/* main app measure button active state */
.control_button.measure_toggle.state_active,
.control_button.measure_toggle.active {
	background: var(--text-color, var(--cs_color_accent_primary));
	color: var(--panel-bg, var(--cs_color_background_primary));
	border-color: var(--text-color, var(--cs_color_accent_primary));
} /* end measure button active state */

/* ensure all navbar toggle buttons show active state when their panel is open */
.control_button.layers_toggle.active,
.control_button.overlay_toggle.active,
.control_button.filemanager_toggle.active,
.control_button.view_controls_toggle.active,
.control_button.geolocate_toggle.active,
.control_button.zoom_toggle.active,
.control_button.rotation_toggle.active,
.control_button.movement_toggle.active,
.control_button.tilt_toggle.active,
.control_button.coordinates_toggle.active,
.control_button.fullscreen_toggle.active,
.control_button.altitude_toggle.active,
.control_button.crosshair_toggle.active,
.control_button.mini_map_toggle.active,
.control_button.info_toggle.active,
.control_button.ruler_toggle.active,
.control_button.compass_toggle.active,
.control_button.grid_toggle.active {
	background: var(--text-color, #000);
	color: var(--panel-bg, #fff);
	border-color: var(--text-color, #000);
} /* end all toggle active states */

/* responsive adjustments */
@media (max-width: 768px) {
	.cs_panel_container_expandable {
		width: calc(100vw - 96px);
		left: 48px;
		right: 48px;
		max-width: calc(100vw - 96px);
	} /* end mobile panel */
	.cs_feature_profile_popup {
		width: calc(100vw - 96px);
		right: 48px;
		left: 48px;
		max-width: calc(100vw - 96px);
	} /* end mobile popup */
	.cs_toolbar_controls_container {
		height: auto;
		min-height: calc(
			var(--cs_element_size_touch_target) + 2 *
				var(--cs_spacing_unit_standard)
		);
	} /* end mobile toolbar */
} /* end mobile media query */