/* 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 */