/* styles/scan-review.css — document scan review / corner-adjust modal
   Reuses .modal/.modal-backdrop from main.css and keyframes editorBoxIn/Out from
   app.css. No new keyframes defined here. No transition: all anywhere. */

/* Override the default .modal-card animation (modalIn) for the scan card.
   The JS adds .editor-box-in on open, .editor-box-out on close. */
.kp-scan-card { animation: none; }
.kp-scan-card.editor-box-in  { animation: editorBoxIn .32s cubic-bezier(.2, .7, .3, 1); }
.kp-scan-card.editor-box-out { animation: editorBoxOut .2s ease forwards; }

@media (prefers-reduced-motion: reduce) {
  .kp-scan-card,
  .kp-scan-card.editor-box-in,
  .kp-scan-card.editor-box-out { animation: none; }
}

/* Card sizing — wider than a default modal to show the document comfortably */
.kp-scan-card {
  width: min(96vw, 760px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

/* Stage: dark letterbox mat so the document edges are always clear */
.kp-scan-stage {
  position: relative;
  flex: 1;
  min-height: 320px;
  background: #1a1d21;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kp-scan-stage canvas {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* SVG corner overlay — sits over the canvas, touch-action none for drag */
.kp-scan-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.kp-scan-overlay circle {
  cursor: grab;
  transition: r .12s ease-out, fill .12s ease-out;
}
.kp-scan-overlay circle:active { cursor: grabbing; }

/* Floating pills over the dark stage: edit hint (top) + processing (bottom) */
.kp-scan-hint,
.kp-scan-working {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.kp-scan-hint { top: 12px; }
.kp-scan-working { bottom: 14px; }
.kp-scan-hint span,
.kp-scan-working span {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13px;
  max-width: 90%;
}
/* The processing pill rises in; the global reduced-motion gate collapses it. */
.kp-scan-working span { animation: kpRise .3s cubic-bezier(.2, .7, .3, 1) both; }

/* Mode selector row */
.kp-scan-modes {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.kp-scan-modes .btn[aria-pressed="true"] {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.kp-scan-modes .btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Tools row: rotate + adjust-edges toggle, centered under the stage */
.kp-scan-tools {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.kp-scan-tools .btn svg { vertical-align: -2px; margin-right: 4px; }
.kp-scan-tools .btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Bottom controls row: retake left, nav center, done right */
.kp-scan-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Page nav pill */
.kp-scan-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-soft);
}
.kp-scan-nav-btn {
  background: none;
  border: 0;
  font-size: 20px;
  cursor: pointer;
  color: var(--text);
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: background .12s ease-out, color .12s ease-out;
}
.kp-scan-nav-btn:hover { background: var(--bg-soft); }
.kp-scan-nav-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Action button focus states */
.kp-scan-controls .btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}