/* FA-16 Add stop + New lead (Frontend_Design/Field App/Build/BUILD_QUEUE.md
   row 16, boards 43/44). [data-look="v2"] only. Real DOM moves (appendChild)
   of the actual v1 form fields from #scr-stop-new (js/dayStops.js) and
   #scr-lead (js/newLead.js) into this chrome -- same JOBV2_MOVES discipline
   as FA-04/FA-11/FA-12 -- so every real listener/validation/select-population
   function keeps running unchanged. Reuses .btn-primary/.reassign-select/
   .note-input from style.css unchanged; only the overlay chrome is new. Same
   shell pattern as notes.css/equipment.css (#addstopv2/#newleadv2 are
   independent floating overlays, not tied to show()/APP_SCREENS). */
[data-look="v2"] .fav2-overlay {
  position: fixed;
  inset: 0;
  z-index: 65; /* same layer as #notes-v2/#equipment-v2/#photos-gallery-v2 */
  display: flex;
  flex-direction: column;
  background: var(--field-page);
  color: var(--field-text-primary);
}
[data-look="v2"] .fav2-overlay.hidden { display: none; }

[data-look="v2"] .fav2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--field-space-2);
  min-height: 56px;
  padding: max(var(--field-space-2), env(safe-area-inset-top)) var(--field-space-4) var(--field-space-2);
  border-bottom: 1px solid var(--field-border);
}
[data-look="v2"] .fav2-title { font: var(--field-text-page-title); text-align: center; }
[data-look="v2"] .fav2-textbtn {
  min-width: 40px;
  min-height: 40px;
  border: none;
  background: transparent;
  color: var(--field-text-primary);
  font: var(--field-text-button);
}

[data-look="v2"] .fav2-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--field-space-4); }
[data-look="v2"] .fav2-hint { font: var(--field-text-body); color: var(--field-text-secondary); margin: 0 0 var(--field-space-3); }
[data-look="v2"] .fav2-field { margin-bottom: var(--field-space-3); }
[data-look="v2"] .fav2-row { display: flex; gap: var(--field-space-3); }
[data-look="v2"] .fav2-row .fav2-field { flex: 1; margin-bottom: 0; }
[data-look="v2"] .fav2-label {
  font: var(--field-text-meta);
  color: var(--field-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--field-space-1);
}

/* The moved v1 elements (input/select/textarea) keep their real ids/classes
   (.note-input, .reassign-select) -- these rules only make them fit the v2
   dark surface instead of v1's light-theme tokens. */
[data-look="v2"] .fav2-body input,
[data-look="v2"] .fav2-body select,
[data-look="v2"] .fav2-body textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--field-radius-control);
  border: 1px solid var(--field-border);
  background: var(--field-surface);
  color: var(--field-text-primary);
  font: var(--field-text-body);
  padding: var(--field-space-3);
  min-height: 44px;
}
[data-look="v2"] .fav2-body textarea { resize: vertical; }
[data-look="v2"] #stop-new-position-group .detail-label,
[data-look="v2"] #stop-new-date-hint,
[data-look="v2"] #stop-new-position-other-day-note {
  font: var(--field-text-meta);
  color: var(--field-text-secondary);
  text-transform: none;
  letter-spacing: normal;
  margin: var(--field-space-1) 0 0;
}
[data-look="v2"] #stop-new-position-group { margin-bottom: var(--field-space-3); }
[data-look="v2"] #stop-new-err,
[data-look="v2"] #lead-err { color: var(--danger); min-height: 1.4em; margin-top: var(--field-space-2); font: var(--field-text-meta); }

[data-look="v2"] .fav2-footer { padding: var(--field-space-4); border-top: 1px solid var(--field-border); }
[data-look="v2"] .fav2-footer .btn-primary { width: 100%; max-width: none; margin: 0; }