/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@keyframes attention-megaphone-shake {
  0%,
  9%,
  100% {
    transform: rotate(0deg) scale(1);
  }

  1% {
    transform: rotate(-10deg) scale(1.05);
  }

  2% {
    transform: rotate(8deg) scale(1.05);
  }

  3% {
    transform: rotate(-7deg) scale(1.04);
  }

  4% {
    transform: rotate(5deg) scale(1.03);
  }

  5% {
    transform: rotate(-3deg) scale(1.02);
  }

  6% {
    transform: rotate(2deg) scale(1.01);
  }

  7% {
    transform: rotate(-1deg) scale(1.01);
  }

  8% {
    transform: rotate(0.5deg) scale(1.01);
  }
}

.attention-megaphone {
  animation: attention-megaphone-shake 10s ease-in-out infinite;
  transform-origin: center;
}

/* Tiptap editor */
.tiptap {
  outline: none;
}

.tiptap p.is-editor-empty:first-child::before {
  color: oklch(var(--bc) / 0.3);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

/* Raise feedback widget above mobile dock (family layout only) */
@media (max-width: 767px) {
  body:has(.dock) #kaktus-feedback-widget {
    bottom: 5rem;
  }
}

/* Onboarding photo area fixed height to prevent layout shift */
.onboarding-photo-area {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Entry photo reordering (SortableJS drag-to-reorder).
   The whole tile is the grab target via a 200ms long-press (no handle gate),
   so suppress the iOS Safari long-press callout (Save Image / Copy) and text
   selection — otherwise they fight the drag delay. */
[data-photos-reorder-tile] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Ring on the tile currently being dragged. */
.photos-reorder-chosen {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* The drop-placeholder left behind while dragging. */
.photos-reorder-drag-ghost {
  opacity: 0.4;
}