/* ------------------------------------------------------------------
   WikiMapping – common form skin  (save as /css/wm-form.css)
   Updated 2025‑07‑02
   • Adds generous vertical rhythm for Survey modals
   • Supports legacy markup (.form‑modal‑content / #liveSurveyFields)
------------------------------------------------------------------ */
:root{
  /* type & colour */
  --wm-font:   system-ui,-apple-system,"Segoe UI",sans-serif;
  --wm-fs:     16px;
  --wm-bd:     #ccc;
  --wm-accent: #007aff;

  /* spacing scale (tweak freely) */
  --wm-gap-s:  .25rem;   /* label ↔ control   */
  --wm-gap-m:   .9rem;   /* group ↔ group     */
  --wm-gap-l:  1.5rem;   /* title/questions/footer */

  /* shape */
  --wm-rad:    6px;
}

/* ------------------------------------------------------------------
 * CONTAINER
 * ----------------------------------------------------------------*/
.wm-modal,
.form-modal-content{           /* legacy & new markup */
  padding:2rem;
  max-width:640px;
  border-radius:var(--wm-rad);
  font:400 var(--wm-fs)/1.4 var(--wm-font);
  box-sizing:border-box;
}

/* ------------------------------------------------------------------
 * HEADINGS (survey title)
 * ----------------------------------------------------------------*/
.wm-modal h1,
.wm-modal h2,
.wm-modal h3,
.form-modal-content h1,
.form-modal-content h2,
.form-modal-content h3{
  margin:0 0 var(--wm-gap-l) 0;      /* ⬅ extra room below title */
  line-height:1.25;
}

/* ------------------------------------------------------------------
 * QUESTION BLOCK
 *   • .wm-group (new markup)
 *   • #liveSurveyFields > div (legacy runtime injection)
 * ----------------------------------------------------------------*/
.wm-group,
#liveSurveyFields > div{
  display:flex;
  flex-direction:column;
  gap:var(--wm-gap-s);
  margin-bottom:var(--wm-gap-m);   /* ⬅ more space between questions */
}

.wm-group:last-child,
#liveSurveyFields > div:last-child{
  margin-bottom:0;                 /* avoid double‑spacing before footer */
}

/* labels */
.wm-group>label,
#liveSurveyFields > div > label{
  font-weight:600;
  font-size:1rem;
  line-height:1.25;
}

/* ------------------------------------------------------------------
 * CONTROLS
 * ----------------------------------------------------------------*/
.wm-control,
.wm-group select,
.wm-group textarea,
#liveSurveyFields .wm-control{
  padding:.5rem .75rem;
  border:1px solid var(--wm-bd);
  border-radius:var(--wm-rad);
  font:400 1rem/1.4 var(--wm-font);
  width:100%;
  box-sizing:border-box;
}

.wm-control:focus{outline:2px solid var(--wm-accent);outline-offset:1px;}

/* file input alignment */
input[type="file"].wm-control{padding:.25rem .5rem;}

/* extra room above “Other…” free-text */
.survey-input-other.wm-control{margin-top:var(--wm-gap-s);}

/* ------------------------------------------------------------------
 * CHECKBOXES & RADIOS
 * ----------------------------------------------------------------*/
.wm-checkline,
#liveSurveyFields input[type="checkbox"],
#liveSurveyFields input[type="radio"]{
  accent-color:var(--wm-accent);
}

.wm-checkline{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:var(--wm-gap-s);
}

#liveSurveyFields input[type="checkbox"],
#liveSurveyFields input[type="radio"]{
  transform:scale(1.15);
  margin-right:.4rem;
}

/* ------------------------------------------------------------------
 * PHOTO PREVIEW
 * ----------------------------------------------------------------*/
.wm-photo-preview{
  max-width:120px;
  margin-top:.5rem;
  border-radius:var(--wm-rad);
}

/* ------------------------------------------------------------------
 * PRIMARY BUTTONS (Next / Continue)
 * ----------------------------------------------------------------*/
.wm-btn-primary,
.save-button{             /* .save-button = Continue footer */
  background:var(--wm-accent);
  color:#fff;
  border:0;
  padding:.6rem 1.2rem;
  border-radius:var(--wm-rad);
  font:600 1rem var(--wm-font);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}

.wm-btn-primary:hover,
.save-button:hover{filter:brightness(1.1);}

/* Footer container inside modal (Bootstrap) */
.form-modal-footer,
.wm-modal .modal-footer{
  margin-top:var(--wm-gap-l);      /* ⬅ space before bottom button */
  padding:0;
  display:flex;
  justify-content:flex-end;
}

/* ------------------------------------------------------------------
 * VALIDATION HIGHLIGHT
 * ----------------------------------------------------------------*/
.error{outline:2px solid crimson;outline-offset:1px;}