/* ============================================
   Mapsurvey — Modern Survey Panel
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

:root {
  --panel-bg: #ffffff;
  --panel-border: rgba(0, 0, 0, 0.06);
  --card-bg: #f7f8fa;
  --card-border: rgba(0, 0, 0, 0.06);
  --card-hover: #f0f2f5;
  --text-primary: #1a1d21;
  --text-secondary: #5f6368;
  --text-tertiary: #9aa0a6;
  --accent: #4f46e5;
  --accent-light: #eef2ff;
  --accent-hover: #4338ca;
  --input-border: #d1d5db;
  --input-focus: #4f46e5;
  --input-bg: #ffffff;
  --danger: #ef4444;
  --success: #22c55e;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.04);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  width: 100%;
  height: 100%;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

label {
  margin-right: 12px;
}

textarea {
  height: 4em;
}

.form-check-inline {
  margin-right: 0px;
}

.questions p {
  padding-bottom: 0;
  margin-bottom: 0;
}

ul {
  list-style: none;
  padding-left: 0;
}

/* ---- Map ---- */
#map {
  height: 100vh;
  width: 100%;
  z-index: 0;
}

/* ---- Survey sidebar panel ---- */
#info_page {
  font-size: 1em;
  position: absolute;
  box-sizing: border-box;
  max-width: 460px;
  width: 420px;
  background: var(--panel-bg);
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  z-index: 10;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  border: none;
  border-right: 1px solid var(--panel-border);
  margin-right: 0;
  padding-bottom: 0;
  transform: translateX(0);
  box-shadow: var(--shadow-lg);
}

#info_page.hidden {
  transform: translateX(-100%);
}

/* Scrollbar styling */
#info_page::-webkit-scrollbar {
  width: 4px;
}
#info_page::-webkit-scrollbar-track {
  background: transparent;
}
#info_page::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}

.geo-inp {
  height: 0;
  width: 0;
  visibility: hidden;
  padding: 0;
  margin: 0;
  float: right;
}

/* ---- Header ---- */
.header {
  display: flex;
  align-items: center;
  font-size: 1.15em;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 20px 24px 8px;
  color: var(--text-primary);
  line-height: 1.3;
}

#title {
  flex: 1;
}

#content {
  padding: 8px 24px 24px;
}

.glyph {
  top: 50%;
  left: 50%;
  height: 50%;
}

#section_title {
  margin-left: 10px;
}

/* ---- Show/hide toggle ---- */
#showButton {
  position: absolute;
  left: 12px;
  top: 20px;
  z-index: 9;
  background: var(--panel-bg);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: box-shadow var(--transition);
}

#showButton:hover {
  box-shadow: var(--shadow-lg);
}

#closeButton {
  position: absolute;
  top: 20px;
  right: 16px;
  cursor: pointer;
  color: var(--text-tertiary);
  transition: color var(--transition);
  font-size: 20px !important;
  width: auto !important;
  height: auto !important;
}

#closeButton:hover {
  color: var(--text-primary);
}

/* ---- Progress indicator ---- */
.survey-progress {
  text-align: center;
  font-size: 0.8em;
  font-weight: 500;
  color: var(--text-tertiary);
  padding: 0 24px 4px;
  letter-spacing: 0.04em;
}

/* ---- Subheading ---- */
.subheading {
  color: var(--text-secondary);
  font-size: 0.95em;
  line-height: 1.5;
}

/* ============================================
   Question Cards
   ============================================ */
.question-card {
  background: var(--card-bg);
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  margin-bottom: 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.question-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.question-card > label {
  display: block;
  font-weight: 500;
  font-size: 0.92em;
  color: var(--text-secondary);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}

/* Text & number inputs */
.question-card textarea,
.question-card input[type="text"],
.question-card input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font-size: 1em;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text-primary);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.question-card textarea:focus,
.question-card input[type="text"]:focus,
.question-card input[type="number"]:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.question-card textarea {
  resize: vertical;
  min-height: 80px;
}

/* Range slider
   The thumb is round and wide, so the leftmost and rightmost positions it can
   occupy are inset from the track's own edges by half its width. Ticks and
   labels must use that same inset or they mark positions the respondent
   cannot select. Both derive it from one declared value. */
.range-field {
  --range-thumb-size: 22px;
  --range-track-inset: calc(var(--range-thumb-size) / 2);
}
.question-card input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: #e2e5ea;
  outline: none;
  margin: 16px 0 4px;
}
.range-ticks,
.range-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--range-track-inset);
}
.range-ticks span {
  width: 1px;
  height: 6px;
  background: #ccc;
}
.range-labels {
  font-size: 0.75rem;
  color: #888;
  margin-top: 2px;
  gap: 12px;
}
/* The end labels read as anchors for the ends of the scale, so they hug the
   extremes rather than centring on them — a centred first label would start
   outside the card. */
.range-labels span:first-child {
  text-align: left;
}
.range-labels span:last-child {
  text-align: right;
}

.question-card input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(79, 70, 229, 0.3);
  transition: transform var(--transition), box-shadow var(--transition);
}

.question-card input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4);
}

.question-card input[type="range"]::-moz-range-thumb {
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  border: none;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

/* ============================================
   Rating question — two display styles
   (scale_strip / list_pips, per Question.display_style)
   ============================================ */
.question-card--scale label > input[type="radio"] {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

.question-card--scale label:has(input[type="radio"])::before,
.question-card--scale label:has(input[type="radio"])::after {
  display: none;
}

/* ---- scale_strip: one row of numbered cells ---- */
.rating-scale-strip__cells {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.question-card--scale .rating-scale-strip__cell:has(input[type="radio"]) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin: 0;
  padding: 0;
  width: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  font-size: 0.95em;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.question-card--scale .rating-scale-strip__cell:has(input[type="radio"]):hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.question-card--scale .rating-scale-strip__cell:has(input[type="radio"]:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.question-card--scale .rating-scale-strip__cell:has(input[type="radio"]:checked):hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.rating-scale-strip__anchors {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  font-size: 0.8em;
  color: var(--text-tertiary);
}

.rating-scale-strip__chip {
  min-height: 28px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rating-scale-strip__chip span {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 999px;
  padding: 4px 14px;
  opacity: 0;
  transform: translateY(2px);
  transition: all var(--transition);
}

.rating-scale-strip__chip span.visible {
  opacity: 1;
  transform: none;
}

/* ---- list_pips: labeled rows with intensity dots ---- */
.rating-list-pips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.question-card--scale .rating-list-pips__row:has(input[type="radio"]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 8px 14px;
  width: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  font-size: 0.92em;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.question-card--scale .rating-list-pips__row:has(input[type="radio"]):hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.rating-list-pips__label {
  overflow-wrap: anywhere;
}

.rating-list-pips__pips {
  display: flex;
  gap: 4px;
  flex: none;
}

.rating-list-pips__pips i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d8dbe1;
  transition: background var(--transition);
}

.rating-list-pips__pips i.on {
  background: #b4b9c4;
}

.question-card--scale .rating-list-pips__row:has(input[type="radio"]:checked) {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}

.question-card--scale .rating-list-pips__row:has(input[type="radio"]:checked) .rating-list-pips__pips i {
  background: #c7cdf7;
}

.question-card--scale .rating-list-pips__row:has(input[type="radio"]:checked) .rating-list-pips__pips i.on {
  background: var(--accent);
}

/* ============================================
   Custom Radio & Checkbox
   Django 4.x: <div><label><input> text</label></div>
   ============================================ */
.question-card label:has(input[type="radio"]),
.question-card label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 12px 6px 40px;
  cursor: pointer;
  position: relative;
  margin: 0 -4px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition);
  font-weight: 400;
  color: var(--text-primary);
}

.question-card label:has(input[type="radio"]):hover,
.question-card label:has(input[type="checkbox"]):hover {
  background: rgba(79, 70, 229, 0.04);
}

.question-card label > input[type="radio"],
.question-card label > input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

/* --- Radio indicator --- */
.question-card label:has(input[type="radio"])::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid var(--input-border);
  border-radius: 50%;
  background: var(--input-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.question-card label:has(input[type="radio"])::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.question-card label:has(input[type="radio"]:checked)::before {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.question-card label:has(input[type="radio"]:checked)::after {
  transform: translateY(-50%) scale(1);
}

/* --- Checkbox indicator --- */
.question-card label:has(input[type="checkbox"])::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.question-card label:has(input[type="checkbox"])::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 12px;
  height: 7px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: translateY(-65%) rotate(-45deg) scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.question-card label:has(input[type="checkbox"]:checked)::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.question-card label:has(input[type="checkbox"]:checked)::after {
  transform: translateY(-65%) rotate(-45deg) scale(1);
}

/* ============================================
   Geo Question Buttons
   ============================================ */
.drawbutton {
  margin-bottom: 12px;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  padding: 8px 12px;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.drawbutton:hover {
  background: var(--card-hover);
  border-color: rgba(79, 70, 229, 0.2);
  box-shadow: var(--shadow-sm);
}

.drawbutton:active {
  transform: scale(0.985);
}

.drawbutton p {
  margin-bottom: 0px;
}

/* Geo Question layout inside button */
.geo-question {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.geo-question-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(79, 70, 229, 0.08);
}

.geo-question-text {
  flex: 1;
  min-width: 0;
}

.geo-question-title {
  margin: 0;
  font-weight: 500;
  font-size: 0.95em;
  color: var(--text-primary);
}

.geo-question-subtitle {
  margin: 2px 0 0;
  font-size: 0.85em;
  color: var(--text-secondary);
}

/* ============================================
   Layer popup controls
   ============================================ */
.layer-controls {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 15px;
  justify-content: center;
}

.layer-controls .btn {
  flex: 1;
  font-size: 1.5em;
  padding: 8px 12px;
  min-width: 50px;
}

/* ============================================
   Navigation buttons
   ============================================ */
.next_button {
  float: right;
}

.prev_button {
  float: left;
}

.navig_buttons {
  padding: 16px 24px 24px;
}

.navig_buttons .btn-dark {
  background: var(--text-primary);
  border: none;
  border-radius: var(--radius-sm) !important;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.95em;
  padding: 12px 0;
  letter-spacing: 0.01em;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.navig_buttons .btn-dark:hover {
  background: var(--accent);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.navig_buttons .btn-dark:active {
  transform: scale(0.97);
}

#navig_buttons {
  padding-top: 8px;
}

/* ============================================
   Drawbar (Cancel / Finish drawing)
   ============================================ */
#drawbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  gap: 12px;
}

#draw-cancel,
#draw-finish {
  height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  cursor: pointer;
}

#draw-cancel:active,
#draw-finish:active:not(:disabled) {
  transform: scale(0.96);
}

#draw-cancel {
  background-color: var(--danger);
}

#draw-finish {
  background-color: var(--success);
}

#draw-finish:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================
   Crosshair overlay
   ============================================ */
#crosshair-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#crosshair-overlay .crosshair-pin {
  position: relative;
  width: 40px;
  height: 64px;
  margin-bottom: -10px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

#crosshair-overlay .crosshair-pin svg {
  display: block;
}

#crosshair-overlay .crosshair-pin-icon {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  color: #fff;
}

#crosshair-overlay .crosshair-actions {
  pointer-events: auto;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
}

#crosshair-overlay .crosshair-cancel,
#crosshair-overlay .crosshair-apply {
  height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
}

#crosshair-overlay .crosshair-cancel:active,
#crosshair-overlay .crosshair-apply:active {
  transform: scale(0.96);
}

#crosshair-overlay .crosshair-cancel {
  background-color: var(--danger);
}

#crosshair-overlay .crosshair-apply {
  background-color: var(--success);
}

/* ============================================
   Map place search
   ============================================ */
/* Shared by the respondent map and the editor's creation map — one control,
   one look. Mounted as a Leaflet control on the survey map, and straight into
   the DOM above the map in the editor. */
.map-search {
  position: relative;
  width: 320px;
  max-width: calc(100vw - 24px);
  font-family: inherit;
}

.map-search i {
  position: absolute;
  left: 0.65rem;
  top: 19px;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 0.8rem;
  pointer-events: none;
}

.map-search input {
  width: 100%;
  height: 38px;
  padding: 0 0.6rem 0 2rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.map-search input:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 2px var(--accent-light);
}

.map-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--panel-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 280px;
  overflow-y: auto;
}

.map-search-result {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 12px;
  cursor: pointer;
}

.map-search-result.active,
.map-search-result:hover {
  background: var(--accent-light);
}

.map-search-name {
  font-size: 0.88rem;
  color: var(--text-primary);
}

.map-search-context {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* Category of a point of interest — "park", "swimming pool" — so two places
   sharing a name can be told apart before one is picked. */
.map-search-category {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 0.7rem;
  line-height: 1.5;
  vertical-align: middle;
}

.map-search-message {
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ODbL attribution, shown only when the list holds OSM-derived results. A
   footnote, not a row you can pick. */
.map-search-attribution {
  padding: 5px 12px 3px;
  border-top: 1px solid var(--card-border);
  font-size: 0.68rem;
  color: var(--text-tertiary);
  cursor: default;
}

.map-search-attribution a {
  color: inherit;
  text-decoration: none;
}

.map-search-attribution a:hover {
  text-decoration: underline;
}

/* The survey map's section panel sits over Leaflet's top-left corner, so the
   control moves out from behind it — and back when the panel slides away. */
.leaflet-top.leaflet-left {
  left: 436px;
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* With the panel away, #showButton (the reopen arrow) takes that corner —
   the search clears it rather than sitting under it. */
body.sidebar-hidden .leaflet-top.leaflet-left {
  left: 76px;
}

/* ============================================
   Form validation errors
   ============================================ */
.question-card .errorlist {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.question-card .errorlist li {
  color: var(--danger);
  font-size: 0.85em;
  font-weight: 500;
}

/* ============================================
   Mobile
   ============================================ */
@media only screen and (max-width: 768px) {

  #info_page {
    font-size: 1.05em;
    position: absolute;
    box-sizing: border-box;
    width: 88%;
    max-width: 88%;
    height: 100%;
    background: var(--panel-bg);
    padding: 0;
    overflow-y: auto;
    z-index: 10;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    left: 0;
    top: 0;
    border: none;
    border-right: 1px solid var(--panel-border);
    box-shadow: var(--shadow-lg);
    transform: translateX(0);
  }

  #info_page.hidden {
    transform: translateX(-100%);
  }

  #map {
    height: 100vh;
    width: 100%;
    z-index: 0;
  }

  /* The panel is a full-width overlay here, not a column beside the map, so
     the control keeps the corner to itself — except when the reopen arrow is
     showing. */
  .leaflet-top.leaflet-left {
    left: 0;
  }

  body.sidebar-hidden .leaflet-top.leaflet-left {
    left: 68px;
  }

  /* Vertical space is scarce on a phone and panning is worst there, so the
     search stays a button until it is actually wanted. */
  .map-search {
    width: 38px;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .map-search:focus-within {
    width: calc(100vw - 24px);
  }

  .map-search input {
    padding-right: 0;
  }

  .map-search:not(:focus-within) input {
    color: transparent;
    padding-left: 0;
  }

  .map-search:not(:focus-within) input::placeholder {
    color: transparent;
  }

  .map-search:not(:focus-within) i {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* ── Rating: star style ────────────────────────────────────────────────────
   Radios painted as icons. The choices are emitted in reverse and the row is
   flipped back with row-reverse, so a plain `~` can fill every star up to the
   checked one — no JavaScript, matching the other two rating styles. Read
   this together with partials/rating_stars.html; changing the loop order
   alone breaks the fill.

   The colour rules are scoped under .question-card--scale on purpose: the
   shared `.question-card label:has(input[type="radio"])` rule out-specifies a
   bare .rating-stars__star and would paint every unselected star as body
   text. Same scoping the scale-strip block uses above.                     */
.rating-stars {
  --star-color: #f5b301;
  --star-empty: #d5d8dc;
  padding: 4px 0 2px;
}

.rating-stars__row {
  display: flex;
  flex-direction: row-reverse;
  /* Spread across the card, like the scale strip above, rather than huddling
     at one edge. The gap is a floor for long scales, where space-between
     would otherwise let the icons touch. */
  justify-content: space-between;
  gap: 6px;
}

/* The shared radio-label rule dresses every label in a card as a 44px pill
   with 40px of left padding for the custom radio dot. A star is an icon, not
   a pill: undo the box here, keep the pointer and the sizing.

   The :has() is load-bearing, not decoration — without it this rule loses to
   `.question-card label:has(input[type="radio"])` on specificity, the 40px
   padding survives, and every star sits against the right edge of its own
   clickable box. */
.question-card--scale .rating-stars__star:has(input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  width: auto;
  padding: 2px;
  margin: 0;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  font-size: 30px;
  transition: color 0.12s ease, transform 0.12s ease;
}

.rating-stars__star input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Unselected. */
.question-card--scale .rating-stars__star:has(input[type="radio"]) {
  color: var(--star-empty);
}

/* The checked star and every star drawn after it in the DOM — which is every
   star to its left on screen. */
.question-card--scale .rating-stars__star:has(input[type="radio"]:checked),
.question-card--scale .rating-stars__star:has(input[type="radio"]:checked) ~ .rating-stars__star {
  color: var(--star-color);
}

/* While the pointer is anywhere in the row, preview replaces the selection. */
.question-card--scale .rating-stars__row:hover .rating-stars__star:has(input[type="radio"]) {
  color: var(--star-empty);
}

.question-card--scale .rating-stars__row .rating-stars__star:has(input[type="radio"]):hover,
.question-card--scale .rating-stars__row .rating-stars__star:has(input[type="radio"]):hover ~ .rating-stars__star {
  color: var(--star-color);
}

.rating-stars__star:hover {
  transform: scale(1.08);
}

/* Keyboard users get the same ring the rest of the form has. */
.rating-stars__star:has(input:focus-visible) {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
  border-radius: 4px;
}

.rating-stars .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 480px) {
  .question-card--scale .rating-stars__star { font-size: 26px; }
}

/* Question subtext: the creator's helper line, between the question text and
   the input. Deliberately quieter than the question itself and than an error. */
.question-card__subtext {
  margin: -2px 0 10px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #6b7280;
}

.image-block__caption {
  margin: 6px 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #6b7280;
}

/* ── Ranking question ──────────────────────────────────────────────────────
   The order lives in the DOM; these styles only make it draggable-looking and
   keep the rank column steady while rows move. */
.ranking__hint {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: #6b7280;
}

.ranking__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ranking__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  cursor: grab;
  user-select: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.ranking__item:hover { border-color: #adb5bd; }

.ranking__item:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

.ranking__item.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.ranking__item.is-grabbed {
  border-color: #4f46e5;
  background: #eef2ff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, .18);
}

.ranking__rank {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ranking__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  color: #1a1d21;
}

.ranking__grip { color: #ced4da; }

.ranking__status {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: #6b7280;
  min-height: 1em;
}

/* ── Type examples in the question dialog ──────────────────────────────────
   Only the picker's "Type example" frame carries .is-type-example. The
   "Respondent sees" pane deliberately does not: it shows the creator's own
   question while they are editing it, and a question that fidgets while you
   type is worse than a still one.

   Every animation here is decorative — it repeats what the example already
   shows — so it is dropped entirely for prefers-reduced-motion.            */
@media (prefers-reduced-motion: no-preference) {

  /* Ranking reorders for real — the loop and the FLIP live in the example
     frame's own script, because renumbering the rank badges is not something
     CSS can do and a move without renumbering would be a lie. */

  /* Stars: a fill sweep, then reset — the interaction in three seconds. */
  .is-type-example .rating-stars__star {
    animation: qtp-star-fill 3s ease-in-out infinite;
  }
  /* Rows are emitted in reverse (see rating_stars.html), so the LAST child is
     star 1 and the delays count backwards. */
  .is-type-example .rating-stars__star:nth-last-child(1) { animation-delay: 0s; }
  .is-type-example .rating-stars__star:nth-last-child(2) { animation-delay: .18s; }
  .is-type-example .rating-stars__star:nth-last-child(3) { animation-delay: .36s; }
  .is-type-example .rating-stars__star:nth-last-child(4) { animation-delay: .54s; }
  .is-type-example .rating-stars__star:nth-last-child(5) { animation-delay: .72s; }

  @keyframes qtp-star-fill {
    0%, 8% { color: var(--star-empty); transform: none; }
    16% { color: var(--star-color); transform: scale(1.16); }
    24%, 76% { color: var(--star-color); transform: none; }
    88%, 100% { color: var(--star-empty); transform: none; }
  }
}

.ranking__empty {
  margin: 0;
  padding: 14px 12px;
  border: 1px dashed #ced4da;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #6b7280;
  background: #f8f9fa;
}

.ranking__empty i { margin-right: 6px; color: #adb5bd; }