/* weapon-blueprint-generator — generated by scripts/tools-v2/build-tool-css.js from
   views/v1-backup/tools-weapon-blueprint-generator.ejs. DO NOT EDIT BY HAND: npm run test:tools-page-v2
   regenerates it and fails if this file has drifted.

   The shared vocabulary (.btn-primary, .form-input, .tool-card, .badge-*,
   .toast-*, #map, headings) is NOT here — public/css/tools-page-v2.css
   declares it once for every tool page. What is left is this tool's own,
   with its colour literals resolved to theme tokens and every selector
   scoped to the tool body so nothing reaches the shared header. */

.tpv2-body .attachment-card {
  transition: all 0.2s ease;
  user-select: none;
}

.tpv2-body .attachment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tpv2-body .attachment-card:active {
  transform: translateY(0px);
}

.tpv2-body #attachmentDropZone {
  transition: all 0.3s ease;
}

.tpv2-body #attachmentDropZone.border-blue-500 {
  transform: scale(1.02);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--sk-info) 30%, transparent);
}

.tpv2-body #attachmentDropZone.border-green-500 {
  transform: scale(1.02);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--sk-success) 30%, transparent);
}

.tpv2-body .attachment-preview-item {
  transition: transform 0.2s ease;
}

.tpv2-body .attachment-preview-item:hover {
  transform: translateY(-2px);
}

.tpv2-body .bg-blue-25 {
  background-color: var(--sk-surface);
}

.tpv2-body .attachment-card.dragging {
  opacity: 0.6;
  transform: rotate(3deg) scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  position: relative;
}

.tpv2-body .drop-zone-active {
  background: linear-gradient(45deg, var(--sk-info-soft) 25%, transparent 25%),
  linear-gradient(-45deg, var(--sk-info-soft) 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, var(--sk-info-soft) 75%),
  linear-gradient(-45deg, transparent 75%, var(--sk-info-soft) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  animation: dropZonePulse 2s ease-in-out infinite;
}

@keyframes dropZonePulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.tpv2-body .attachment-item {
  transition: all 0.2s ease;
}

.tpv2-body .attachment-item:hover {
  background-color: var(--sk-surface);
  border-color: var(--sk-info);
}

.tpv2-body .blueprint-line {
  position: absolute;
  background: var(--sk-info);
  opacity: 0.3;
}

.tpv2-body .blueprint-line::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--sk-info);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.tpv2-body .blueprint-line.horizontal::after {
  right: -3px;
}

.tpv2-body .blueprint-line.vertical::after {
  bottom: -3px;
  right: 50%;
  transform: translateX(50%);
}