/* ============================================================
   Photo picker — replaces the bare <input type="file">
   Real input stays in the DOM (focusable, form-associated),
   visually hidden; the label/buttons are the visible control.
   ============================================================ */
.photo-field{position:relative}
.form-group .photo-input,.photo-input{position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;border:0!important;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;appearance:none}

/* Drop zone — the resting state */
.photo-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  padding:1.15rem .9rem;border:2px dashed var(--border);border-radius:var(--r);background:var(--light);
  text-align:center;cursor:pointer;transition:border-color .18s,background .18s;min-height:104px}
.photo-drop:hover{border-color:var(--blue-light);background:#eef4f0}
.photo-input:focus-visible+.photo-drop{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,92,58,.18)}
.photo-drop.dragging{border-color:var(--blue);background:#e7f0ea;border-style:solid}
.photo-drop svg{width:22px;height:22px;stroke:var(--blue);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.photo-drop-main{font-size:.87rem;font-weight:600;color:var(--dark-2)}
.photo-drop-sub{font-size:.75rem;color:var(--mid);line-height:1.4}

/* Mobile action pair — camera + gallery, hidden on desktop */
.photo-actions{display:none;gap:.5rem}
.photo-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  padding:.85rem .5rem;border:2px solid var(--border);border-radius:var(--r);background:var(--white);
  font-family:var(--font);font-size:.8rem;font-weight:600;color:var(--dark-2);line-height:1.25;
  cursor:pointer;transition:border-color .18s,background .18s;min-height:76px;text-align:center}
.photo-btn:active{background:var(--light)}
.photo-btn:focus-visible{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(37,92,58,.18)}
.photo-btn svg{width:20px;height:20px;stroke:var(--blue);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Thumbnail row — up to 3 photos */
.photo-list{display:none;gap:.5rem;flex-wrap:nowrap;align-items:flex-start}
.photo-field.has-file .photo-list{display:flex}
.photo-item{position:relative;flex:1 1 0;min-width:0;max-width:110px;border-radius:var(--r);overflow:hidden;
  background:var(--light);border:2px solid var(--border)}
.photo-thumb{display:block;width:100%;height:60px;object-fit:cover;background:var(--light)}
.photo-item-size{display:block;padding:.18rem .3rem;font-size:.66rem;line-height:1.3;color:var(--mid);
  text-align:center;background:var(--white)}
.photo-remove{position:absolute;top:4px;right:4px;width:24px;height:24px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;background:rgba(15,23,42,.72);color:#fff;transition:background .18s}
/* The visual dot stays small so it does not cover the photo, but the tappable
   area is padded out to the 44px finger target. min-width/height beat the
   inherited 24px box that a plain width/height would lose to. */
.photo-remove::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  min-width:44px;min-height:44px;width:44px;height:44px;border-radius:50%}
.photo-remove:hover{background:var(--red)}
.photo-remove:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.photo-remove svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round}

/* Per-thumbnail upload progress, cleared as each file lands */
.photo-item-bar{display:none;position:absolute;left:0;right:0;bottom:16px;height:3px;background:rgba(15,23,42,.18)}
.photo-field.uploading .photo-item:not(.done) .photo-item-bar{display:block}
.photo-item-bar span{display:block;width:40%;height:100%;background:var(--blue);
  animation:photoBar 1.1s cubic-bezier(.4,0,.2,1) infinite}
.photo-field.uploading .photo-item.done{border-color:var(--blue-light)}

/* "n of 3" counter */
.photo-count{display:none;font-size:.72rem;color:var(--mid);margin-top:.35rem}
/* Notice shown when photos were recovered after the browser was restarted. */
.photo-field.restored .file-status{color:var(--blue);background:#eef4f0;border-radius:6px;
  padding:.45rem .6rem;margin-top:.45rem;font-weight:600}
.photo-field.preparing .photo-count::after{content:' ·';animation:photoDots 1s steps(4,end) infinite}
@keyframes photoDots{0%{content:' ·'}25%{content:' ··'}50%{content:' ···'}75%{content:' ····'}}
.photo-field.has-file .photo-count{display:block}

/* Upload progress bar (indeterminate) */
@keyframes photoBar{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* Once 3 photos are attached there is nothing more to add */
.photo-field.is-full .photo-drop,.photo-field.is-full .photo-actions{display:none}

/* Compact the drop zone once photos exist — it becomes a secondary "add more" */
.photo-field.has-file .photo-drop{min-height:0;padding:.6rem;margin-top:.5rem}
.photo-field.has-file .photo-drop svg,.photo-field.has-file .photo-drop-sub{display:none}
.photo-field.has-file .photo-actions{margin-top:.5rem}
.photo-field.has-file .photo-btn{flex-direction:row;gap:.4rem;min-height:44px;padding:.5rem;font-size:.76rem}

/* Touch devices: show the explicit camera / gallery pair instead of the drop zone */
@media(hover:none),(max-width:640px){
  .photo-drop{display:none}
  .photo-field:not(.is-full) .photo-actions{display:flex}
  /* Three across the card width; taller thumbs so the photo is readable */
  .photo-list{gap:.55rem}
  .photo-thumb{height:72px}
  .photo-item-size{font-size:.7rem;padding:.22rem .3rem}
  .photo-count{font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){
  .photo-item-bar span{animation-duration:2.4s}
  .photo-drop,.photo-btn,.photo-remove{transition:none}
}
.lf-note{background:rgba(37,92,58,.08);border:1px solid rgba(37,92,58,.2);color:var(--blue-dark);