/* Boosting page: only the two things style.css has no opinion about --
   the drop zone and the before/after comparison. */

/* Colours come from Bootstrap's theme variables rather than literals, so the
   page follows the light-mode toggle instead of pinning one appearance. */
.dropzone {
  cursor: pointer;
  border-style: dashed;
  border-width: 2px;
  background-color: var(--bs-tertiary-bg);
  transition: border-color .15s ease, background-color .15s ease;
}
.dropzone:hover, .dropzone:focus-visible {
  border-color: var(--bs-primary);
  background-color: var(--bs-secondary-bg);
  outline: none;
}
.dropzone.is-over {
  border-style: solid;
  border-color: var(--bs-primary);
  background-color: var(--bs-secondary-bg);
}
.dz-icon { font-size: 30px; color: var(--bs-secondary-color); line-height: 1; margin-bottom: 10px; }
.dz-limits { font-size: 12px; }

/* The comparison and its dragging behaviour live in style.css and
   compare.js, shared with the landing page showcase. */

#statsTable td { font-size: 13px; vertical-align: middle; }
#statsTable td:first-child { color: var(--bs-secondary-color); width: 40%; }
#statsTable td:last-child { font-family: var(--bs-font-monospace); }