/* Drop zone: a flat hairline panel whose border draws in, dots ripple from the drop point, and a
   dot row fills while the upload runs. Its content is centred both ways in the panel. */

.drop {
  --ripple-x: 50%;
  --ripple-y: 50%;
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--s-5);
  justify-items: center;
  align-content: center;
  min-height: 280px;
  padding: var(--s-10) var(--s-6);
  border-radius: var(--r-panel);
  background: var(--surface);
  text-align: center;
  animation: fade-in var(--d-enter) var(--ease-state) backwards;
  transition: background-color var(--d-hover) var(--ease-state);
}

.drop__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.drop__border rect {
  x: .5px;
  y: .5px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  rx: var(--r-panel);
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: draw-border var(--d-hero) var(--ease-enter) backwards;
  transition: stroke var(--d-hover) var(--ease-state);
}

@keyframes draw-border {
  from { stroke-dashoffset: 100; }
}

.drop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: radial-gradient(var(--accent) 1px, transparent 1.4px);
  background-size: var(--dot-grid-small) var(--dot-grid-small);
  opacity: 0;
  clip-path: circle(0 at var(--ripple-x) var(--ripple-y));
  pointer-events: none;
}

.drop.is-ripple::after {
  animation: ripple var(--d-hero) var(--ease-enter);
}

@keyframes ripple {
  0% {
    opacity: .9;
    clip-path: circle(0 at var(--ripple-x) var(--ripple-y));
  }
  100% {
    opacity: 0;
    clip-path: circle(140% at var(--ripple-x) var(--ripple-y));
  }
}

.drop__title {
  font-size: var(--fs-24);
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.05;
}

.drop__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
}

.drop__msg:empty {
  display: none;
}

.drop__msg {
  min-height: 1.55em;
  font-size: var(--fs-15);
  color: var(--text-2);
}

.drop__url {
  font-family: var(--font-mono);
  font-size: var(--fs-15);
  word-break: break-all;
}

.drop:hover .drop__border rect,
.drop.is-hover .drop__border rect {
  stroke: var(--accent);
}

.drop[data-state="over"] {
  background: var(--surface-2);
}

/* Drag-over: a solid, slightly heavier accent edge. A dash pattern here was measured in the
   rect's pathLength of 100, so its dashes were 2% of the perimeter (about 40 px) and broke
   unevenly at the corners (DECISIONS 162). */
.drop[data-state="over"] .drop__border rect {
  stroke: var(--accent);
  stroke-width: 2;
}

.drop[data-state="error"] .drop__border rect {
  stroke: var(--bad);
}

.drop[data-state="error"] .drop__msg {
  color: var(--bad);
}

.drop[data-state="done"] .drop__border rect {
  stroke: var(--ok);
}

.drop__progress,
.drop__done {
  display: none;
}

.drop[data-state="sending"] .drop__progress,
.drop[data-state="error"] .drop__progress:has(.is-failed),
.drop[data-state="done"] .drop__done {
  display: grid;
  width: min(100%, 320px);
  gap: var(--s-2);
  justify-items: center;
}

.drop[data-state="sending"] .drop__actions,
.drop[data-state="done"] .drop__actions {
  display: none;
}

@media (max-width: 599px) {
  .drop {
    padding: var(--s-8) var(--s-4);
  }

  .drop__actions,
  .drop__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drop__border rect {
    animation: none;
  }

  .drop.is-ripple::after {
    animation: none;
  }
}