/* The answer-sheet scanner (creator/assessment_tools_scan.html).
   The outline flash is the creator's main feedback, so it is thick and lasts ~0.9s.
   Colour is never the only signal — #scan-status says the same thing in words. */

.scan-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 70vh;
  background: var(--color-surface-sunken, #EDE7E4);
  border: 6px solid var(--color-border, #D6CFCB);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease-out;
}

.scan-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* A sheet-shaped frame to aim at. pointer-events:none so it never eats a click. */
.scan-guide {
  position: absolute;
  inset: 6% 18%;
  border: 2px dashed rgba(255, 255, 255, .7);
  border-radius: 6px;
  pointer-events: none;
}

.scan-placeholder {
  text-align: center;
  color: var(--color-muted-fg, #6B625C);
  padding: 1rem;
}
.scan-placeholder-icon { font-size: 3rem; display: block; margin-bottom: .5rem; }

.scan-stage.scan-flash-ok   { border-color: var(--color-success, #15803D); animation: scan-pulse .9s ease-out; }
.scan-stage.scan-flash-warn { border-color: var(--color-warning, #D97706); animation: scan-pulse .9s ease-out; }
.scan-stage.scan-flash-err  { border-color: var(--color-error, #DC2626);   animation: scan-pulse .9s ease-out; }

@keyframes scan-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  30%  { box-shadow: 0 0 0 6px rgba(0, 0, 0, .08); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .scan-stage.scan-flash-ok, .scan-stage.scan-flash-warn, .scan-stage.scan-flash-err { animation: none; }
}

#scan-status.scan-status-ok   { color: var(--color-success, #15803D); }
#scan-status.scan-status-warn { color: #8A5A10; }
#scan-status.scan-status-err  { color: var(--color-error, #DC2626); }

.scan-log-warnings { font-size: .8rem; color: var(--color-muted-fg, #6B625C); }