/* The house file drop zone (uploadDrop::Html, includes/classes/uploadDrop.php;
   bound by includes/js/upload-drop.js). Its own small sheet so a page without
   the dashboard's main.css can wear it too: the public jobs form on the
   website's careers page (Hiring, embed.php). Moved out of main.css unchanged
   (Nick, 04/11/2026); the dashboard links it just before main.css
   (includes/head-tag-contents.php, phoneUploadPage), where the rules sat inside
   it ahead of the tints that follow, so every tie goes as it always has. It
   needs nothing from main.css: --ud-accent is set here and each host tints it.

   File drop zone: a label for its file input, so a click anywhere on it
   opens the file browser, and a drop target. Geometry shared here, tinted
   by --ud-accent; .is-over while something is dragged over it. First
   built for Bills to Pay (finance/bills/upload), also the AI ingest modal. */
.upload-drop {
  --ud-accent: #7c3f9e;
  clear: both; display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 0; padding: 26px 16px; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--ud-accent) 35%, transparent); border-radius: 14px;
  background: color-mix(in srgb, var(--ud-accent) 4%, #fff);
  color: #1f2733; font-size: 14px; text-align: center;
  transition: background .15s ease, border-color .15s ease;
}
.upload-drop > i { font-size: 26px; color: var(--ud-accent); }
.upload-drop:hover, .upload-drop.is-over {
  background: color-mix(in srgb, var(--ud-accent) 10%, #fff); border-color: var(--ud-accent);
}
.upload-drop-cta {
  font-weight: 600; text-decoration: underline;
  color: color-mix(in srgb, var(--ud-accent) 76%, #1f2733);
}
.upload-drop-types { font-size: 12px; color: #7a8699; }
/* the file in the input, named (includes/js/upload-drop.js) */
.upload-drop-chosen { font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--ud-accent) 76%, #1f2733); overflow-wrap: anywhere; }
/* The input is the label's target: kept in the page (a hidden input is
   not reliably opened from a label in every browser), never seen */
.upload-drop-input { position: absolute !important; width: 1px !important; height: 1px !important; max-width: 1px; float: none !important; opacity: 0; overflow: hidden; pointer-events: none; }