/* ── Shoe-size settings popup ────────────────────────────────────────────────
   Menu > Map Tools > Shoe Size. Same modal shell as .cs_qr_share_modal
   (fixed full-screen scrim, one bordered panel, 48px header) so it reads as
   part of the same family of popups rather than a new kind of dialog. */
.cs_shoe_size_modal {
  position: fixed;
  top: var(--top_bar_height, 48px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
  box-sizing: border-box;
}
.cs_shoe_size_modal_content {
  background: var(--panel-bg);
  border: var(--ui_border_uniform_width) solid var(--text-color);
  border-radius: var(--rad-4);
  width: 100%;
  max-width: 360px;
  /* never taller than the space it floats in - the body scrolls, the header
     and the Done button stay pinned, same as every other tall popup here */
  max-height: calc(100vh - var(--top_bar_height, 48px) - 40px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cs_shoe_size_modal_header {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  box-sizing: border-box;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: var(--ui_border_uniform_width) solid var(--text-color);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-color);
}
.cs_shoe_size_modal_header i {
  margin-right: 6px;
}
.cs_shoe_size_modal_close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rad-2);
  color: var(--text-color);
  cursor: pointer;
  transition: var(--transition);
}
.cs_shoe_size_modal_close:hover {
  background: var(--panel-bg-hover);
}
.cs_shoe_size_modal_body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs_shoe_size_hint {
  font-size: var(--font-tiny);
  line-height: 1.45;
  color: var(--muted);
}
.cs_shoe_size_hint strong {
  color: var(--text-color);
}
.cs_shoe_size_field_label {
  font-size: var(--font-tiny);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
/* joined edge-to-edge segments, the same joined-toolbar look the travel panel's
   own button rows use - no gaps, one shared border */
.cs_shoe_size_segmented {
  display: flex;
  width: 100%;
  border: var(--ui_border_uniform_width) solid var(--ui_grid_line, rgba(255, 255, 255, 0.85));
  border-radius: var(--rad-2);
  overflow: hidden;
}
.cs_shoe_size_segment {
  flex: 1 1 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
  border-right: var(--ui_border_uniform_width) solid var(--ui_grid_line, rgba(255, 255, 255, 0.85));
}
.cs_shoe_size_segment:last-child {
  border-right: none;
}
.cs_shoe_size_segment.state_active {
  background: var(--text-color);
  color: #000000;
}
/* only the section matching the chosen method is shown - the other one's
   inputs would otherwise silently accept values that never take effect */
.cs_shoe_size_section {
  display: none;
  flex-direction: column;
  gap: 8px;
}
.cs_shoe_size_section.state_active {
  display: flex;
}
.cs_shoe_size_row {
  display: flex;
  gap: 8px;
}
.cs_shoe_size_select,
.cs_shoe_size_input {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  box-sizing: border-box;
  padding: 0 10px;
  background: var(--step-2);
  border: var(--ui_border_uniform_width) solid var(--ui_grid_line, rgba(255, 255, 255, 0.85));
  border-radius: var(--rad-2);
  color: var(--text-color);
  font-size: 13px;
  font-weight: 600;
}
.cs_shoe_size_readout {
  margin-top: 4px;
  padding: 8px 10px;
  border: var(--ui_border_uniform_width) solid rgba(255, 255, 255, 0.25);
  border-radius: var(--rad-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs_shoe_size_readout_row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--font-tiny);
  color: var(--muted);
}
.cs_shoe_size_readout_row strong {
  color: var(--text-color);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cs_shoe_size_modal_actions {
  display: flex;
  border-top: var(--ui_border_uniform_width) solid var(--text-color);
}
.cs_shoe_size_done_btn {
  flex: 1 1 auto;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--text-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: var(--transition);
}
.cs_shoe_size_done_btn:hover {
  background: var(--text-color);
  color: #000000;
}

/* ── Map screenshot / share popup ────────────────────────────────────────────
   Menu > Map Tools > Screenshot. Shows the captured composite (map plus every
   marker, line, label and panel drawn over it), then offers Save, Copy and
   "Share via QR" - the last of which uploads the image and hands the existing
   QR modal a short link to it (see captureMapScreenshot/shareScreenshotViaQr
   in script.js). */
.cs_map_shot_modal {
  position: fixed;
  top: var(--top_bar_height, 48px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
  box-sizing: border-box;
}
.cs_map_shot_modal_content {
  background: var(--panel-bg);
  border: var(--ui_border_uniform_width) solid var(--text-color);
  border-radius: var(--rad-4);
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - var(--top_bar_height, 48px) - 40px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cs_map_shot_modal_header {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  box-sizing: border-box;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: var(--ui_border_uniform_width) solid var(--text-color);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-color);
}
.cs_map_shot_modal_close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rad-2);
  cursor: pointer;
  color: var(--text-color);
  transition: var(--transition);
}
.cs_map_shot_modal_close:hover {
  background: var(--panel-bg-hover);
}
.cs_map_shot_preview_wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--step-0);
}
.cs_map_shot_preview_wrap img {
  max-width: 100%;
  height: auto;
  display: block;
  border: var(--ui_border_uniform_width) solid rgba(255, 255, 255, 0.35);
  border-radius: var(--rad-2);
}
.cs_map_shot_status {
  padding: 8px 12px;
  font-size: var(--font-tiny);
  color: var(--muted);
  border-top: var(--ui_border_uniform_width) solid rgba(255, 255, 255, 0.25);
  min-height: 18px;
}
.cs_map_shot_actions {
  display: flex;
  border-top: var(--ui_border_uniform_width) solid var(--text-color);
}
.cs_map_shot_btn {
  flex: 1 1 0;
  height: 48px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: var(--text-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: var(--transition);
  border-right: var(--ui_border_uniform_width) solid rgba(255, 255, 255, 0.25);
}
.cs_map_shot_btn:last-child {
  border-right: none;
}
.cs_map_shot_btn:hover {
  background: var(--text-color);
  color: #000000;
}
.cs_map_shot_btn.state_disabled {
  color: var(--muted);
  pointer-events: none;
}

/* ── Measurement panel: the app-wide shoe-size row ───────────────────────────
   Sits at the top of the measurement panel's own shoe block. The panel's
   inline controls still work, but the foot length they set is shared with the
   whole app, so this row states the current value and opens the same popup
   the menu does (see sync_shoe_controls_from_global_setting in measure.js). */
.cs_shoe_global_row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0 0 0 10px;
  border: var(--ui_border_uniform_width) solid rgba(255, 255, 255, 0.25);
  border-radius: var(--rad-2);
  overflow: hidden;
}
.cs_shoe_global_summary {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-tiny);
  font-weight: 700;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs_shoe_global_open_button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  cursor: pointer;
  border-left: var(--ui_border_uniform_width) solid rgba(255, 255, 255, 0.25);
  transition: var(--transition);
}
.cs_shoe_global_open_button:hover {
  background: var(--text-color);
  color: #000000;
}