/* ============================================================================
   components.css: recurring UI components
   ----------------------------------------------------------------------------
   Small building blocks that appeared as the SAME long inline style on more than
   one element in the template. Pulling them into classes here removes the
   duplication and shortens those markup lines; the elements still carry their own
   dynamic bits (src, onClick, the progress fill width) inline. Each class below
   reproduces its former inline style exactly.
   ========================================================================== */

/* Progress meter track (Checklist "packed", Habits "done today"). The fill is a
   separate inner div whose width is data-driven, so it stays inline. */
.progress-track{height:15px;border:2px dashed var(--line);border-radius:8px;margin-top:10px;overflow:hidden;}

/* Recipe image preview thumbnail (add + edit forms). */
.img-preview{height:56px;width:56px;object-fit:cover;border:3px solid #fffdf4;box-shadow:0 3px 8px var(--shadow);transform:rotate(-3deg);}

/* Small round "remove image" button pinned to a preview's top-right corner. */
.img-clear-btn{position:absolute;top:-8px;right:-10px;width:19px;height:19px;border-radius:50%;background:var(--redpen);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;}

/* Dashed "choose image" upload label (pairs with .hand for the handwriting font). */
.upload-btn{display:inline-flex;align-items:center;gap:7px;font-size:19px;color:var(--clay);border:2px dashed var(--line);border-radius:10px 4px 11px 5px;padding:7px 14px;cursor:pointer;}