/* Apptech — slide-to-verify puzzle (contact forms). Plain CSS, independent of Tailwind. */
.at-slide { max-width: none; }              /* help text may use the full form width */
.at-slide__stage,
.at-slide__track { max-width: 360px; }       /* the puzzle itself stays 360px wide */

.at-slide__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: .75rem;
  overflow: hidden;
  background: #e4e4e7;
  border: 1px solid #d4d4d8;
  -webkit-user-select: none; user-select: none;
}
.at-slide__bg,
.at-slide__piece {
  position: absolute; top: 0; height: 100%;
  display: block; max-width: none;
  pointer-events: none; -webkit-user-drag: none;
}
.at-slide__bg { left: 0; width: 100%; }
.at-slide__piece { left: 0; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .6)); }
.at-slide[data-state="idle"] img,
.at-slide[data-state="loading"] img { opacity: 0; }
.at-slide[data-state="idle"] .at-slide__stage,
.at-slide[data-state="loading"] .at-slide__stage {
  background: linear-gradient(100deg, #e4e4e7 30%, #f4f4f5 50%, #e4e4e7 70%) 0 0 / 200% 100%;
  animation: at-slide-shimmer 1.2s linear infinite;
}

.at-slide__refresh {
  position: absolute; top: .4rem; right: .4rem;
  width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: 999px;
  background: rgba(24, 24, 27, .7); color: #fff;
  font-size: 1.1rem; line-height: 2rem; text-align: center; cursor: pointer;
}
.at-slide__refresh:hover { background: rgba(24, 24, 27, .9); }
.at-slide[data-state="solved"] .at-slide__refresh,
.at-slide[data-state="checking"] .at-slide__refresh { display: none; }

.at-slide__track {
  position: relative;
  height: 2.75rem;
  margin-top: .5rem;
  border-radius: .75rem;
  background: #f4f4f5;
  border: 1px solid #d4d4d8;
  overflow: hidden;
}
.at-slide__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: rgba(24, 24, 27, .08);
}
.at-slide__hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding-left: 2.75rem;
  font-size: .8125rem; color: #71717a; pointer-events: none;
}
.at-slide__handle {
  position: absolute; left: 0; top: 0;
  width: 2.75rem; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #2563eb; color: #fff;
  border-radius: .7rem;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.at-slide[data-state="dragging"] .at-slide__handle { cursor: grabbing; }
.at-slide__handle:focus-visible { outline: 3px solid #a1a1aa; outline-offset: 2px; }
.at-slide[data-state="idle"] .at-slide__handle,
.at-slide[data-state="loading"] .at-slide__handle,
.at-slide[data-state="checking"] .at-slide__handle,
.at-slide[data-state="locked"] .at-slide__handle { opacity: .45; cursor: not-allowed; }

.at-slide[data-state="solved"] .at-slide__handle { background: #15803d; cursor: default; }
.at-slide[data-state="solved"] .at-slide__fill { background: rgba(21, 128, 61, .14); }
.at-slide[data-state="solved"] .at-slide__hint { display: none; }
.at-slide[data-state="solved"] .at-slide__stage { border-color: #15803d; }

.at-slide[data-alert] .at-slide__stage { border-color: #b91c1c; box-shadow: 0 0 0 3px rgba(185, 28, 28, .25); }
.at-slide[data-alert] .at-slide__track { border-color: #b91c1c; }

.at-slide[data-state="shake"] .at-slide__stage { animation: at-slide-shake .45s; border-color: #b91c1c; }

.at-slide__msg { min-height: 1.25rem; margin: .4rem 0 0; font-size: .8125rem; color: #52525b; }
.at-slide__msg[data-kind="ok"] { color: #15803d; font-weight: 600; }
.at-slide__msg[data-kind="err"] { color: #b91c1c; font-weight: 600; }
.at-slide__help { margin: .1rem 0 0; font-size: .6875rem; line-height: 1.5; color: #71717a; }
.at-slide__help a { color: #2563eb; font-weight: 700; text-decoration: underline; white-space: nowrap; }

@keyframes at-slide-shimmer { to { background-position: -200% 0; } }
@keyframes at-slide-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .at-slide__stage, .at-slide[data-state="shake"] .at-slide__stage { animation: none !important; }
}