/* ----------------------------------------------------------------------------
   upload.css — Library upload affordances: the drop zone with its drag state, and the
   full-screen drag-and-drop overlay that works on either page.
   Slice 6 of 16 (see css/tokens.css for the full load order).
   ------------------------------------------------------------------------- */
/* ------------------------------------------------------------ vault: upload + docs */
.upload-zone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.upload-zone:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

.uz-icon {
  font-size: 22px;
  color: var(--muted);
  line-height: 1;
}

.uz-drop {
  display: none;
}

/* while dragging: swap the copy, tint, lift, and pulse the ring */
.upload-zone.dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  transform: scale(1.01);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
  animation: uz-pulse 1.1s ease-in-out infinite;
}

.upload-zone.dragover .uz-idle {
  display: none;
}

.upload-zone.dragover .uz-drop {
  display: block;
  color: var(--accent);
}

.upload-zone.dragover .uz-icon {
  color: var(--accent);
  animation: drop-bob 1s ease-in-out infinite;
}

@keyframes uz-pulse {
  50% {
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 7%, transparent);
  }
}

/* full-screen drag-and-drop overlay (works anywhere on either page) */
.global-drop {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: drop-in 0.15s ease-out;
}

.global-drop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 56px;
  border-radius: 22px;
  border: 2px dashed var(--accent);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: var(--shadow);
  animation: drop-bob 1.1s ease-in-out infinite;
}

.global-drop-card .drop-emoji {
  font-size: 40px;
  color: var(--accent);
  line-height: 1;
}

.global-drop-text {
  font-size: 19px;
  font-weight: 650;
  color: var(--accent);
  text-align: center;
}

.drop-emoji {
  font-size: 26px;
}