/* Reconstructions only: a quiet, prominent upload target using both themes' tokens. */
.convert-drop {
  min-height: 140px;
  padding: 24px 28px;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon title browse"
    "icon hint browse"
    "icon copy status";
  column-gap: 24px;
  row-gap: 6px;
  border: 1px dashed var(--dash-hover);
  background: var(--dz-hover);
}
.convert-drop:hover,
.convert-drop.is-dragging {
  transform: none;
  border-color: var(--accent);
  background: var(--accent-soft);
}
.convert-drop .overview-upload-badge {
  width: 60px;
  height: 60px;
  border: 1px solid var(--line);
  background: var(--card);
}
.convert-drop .overview-upload-badge svg { width: 28px; height: 28px; }
.convert-drop [data-drop-title] { font-size: 21px; font-weight: 600; line-height: 1.3; }
.convert-drop .dh { text-align: left; }
.convert-drop .overview-drop-copy { line-height: 1.5; }
.convert-drop .browse-link {
  grid-area: browse;
  justify-self: end;
  padding: 10px 20px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.convert-drop .browse-link:hover { background: var(--accent-ink); }
.convert-drop .browse-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.convert-drop .file-status { max-width: 240px; overflow-wrap: anywhere; }
.convert-drop.has-file { border-style: solid; border-color: var(--ok-fg); }
.convert-drop.is-invalid { border-color: var(--fail-fg); }
@media (max-width: 600px) {
  .convert-drop {
    padding: 20px;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "icon title" "hint hint" "copy copy" "browse browse" "status status";
    column-gap: 12px;
    row-gap: 10px;
  }
  .convert-drop .overview-upload-badge { width: 44px; height: 44px; }
  .convert-drop .overview-upload-badge svg { width: 23px; height: 23px; }
  .convert-drop [data-drop-title] { font-size: 19px; }
  .convert-drop .browse-link { justify-self: start; }
  .convert-drop .file-status { max-width: 100%; text-align: left; }
}