/* MultiPass capture — layout only. Colour, type and spacing come from the
   UCNS design system tokens; nothing here reinvents them. */

.mp-page { min-height: 100vh; display: flex; flex-direction: column; }
.mp-main { flex: 1; padding: var(--ucns-space-lg) var(--ucns-space-md); }
.mp-bug { height: 28px; width: 28px; }

.mp-testbar {
  background: var(--ucns-warning-pale);
  border-bottom: 1px solid var(--ucns-warning);
  color: var(--ucns-text-dark);
  font-size: var(--ucns-text-sm);
  padding: var(--ucns-space-sm) var(--ucns-space-md);
  text-align: center;
}

.mp-lede { color: var(--ucns-text-light); margin: 0 0 var(--ucns-space-lg); }
.mp-hint { color: var(--ucns-text-light); font-size: var(--ucns-text-sm);
           margin: var(--ucns-space-sm) 0 var(--ucns-space-md); text-align: center; }
.mp-hint-centre { text-align: center; }

.mp-capture { margin-bottom: var(--ucns-space-lg); }

/* 3:4 portrait frame — the aspect the card photo is printed at, so what the
   crew member lines up is what gets printed. */
.mp-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 300px;
  margin: 0 auto;
  background: var(--ucns-grey-lightest);
  border: 1px solid var(--ucns-grey-light);
  border-radius: var(--ucns-radius-lg);
  overflow: hidden;
}
.mp-frame video, .mp-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mp-frame-empty { display: flex; align-items: center; justify-content: center; }
.mp-frame-icon { width: 45%; color: var(--ucns-grey-light); }

/* Head guide. Sits above centre because a pass photo puts the eyeline high. */
.mp-guide { position: absolute; inset: 0; pointer-events: none; }
.mp-guide-head {
  position: absolute;
  left: 50%; top: 40%;
  width: 52%; height: 62%;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(255, 255, 255, 0.9);
  border-radius: 50% 50% 45% 45%;
}

.mp-consent {
  display: flex; gap: var(--ucns-space-sm);
  align-items: flex-start;
  font-size: var(--ucns-text-sm);
  color: var(--ucns-text);
  margin: var(--ucns-space-lg) 0;
}
.mp-consent input { margin-top: 3px; flex: 0 0 auto; }

.mp-done-icon { width: 64px; height: 64px; margin: 0 auto var(--ucns-space-md); display: block; }

@media (max-width: 480px) {
  .mp-frame { max-width: 100%; }
  .ucns-btn-group .ucns-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.mp-rev { color: var(--ucns-grey-dark); font-size: var(--ucns-text-xs); }

/* Drop zone */
.mp-drop {
  aspect-ratio: 3 / 4;
  max-width: 300px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--ucns-space-xs);
  background: var(--ucns-grey-lightest);
  border: 2px dashed var(--ucns-grey-light);
  border-radius: var(--ucns-radius-lg);
  cursor: pointer;
  text-align: center;
  padding: var(--ucns-space-md);
  transition: border-color var(--ucns-transition), background var(--ucns-transition);
}
.mp-drop:hover, .mp-drop:focus-visible {
  border-color: var(--ucns-green);
  background: var(--ucns-green-pale);
  outline: none;
}
.mp-drop-over {
  border-color: var(--ucns-green);
  border-style: solid;
  background: var(--ucns-green-pale);
}
.mp-drop .mp-frame-icon { width: 35%; color: var(--ucns-grey-light); }
.mp-drop-lead { color: var(--ucns-text); font-size: var(--ucns-text-sm);
                margin: var(--ucns-space-sm) 0 0; font-weight: 600; }
.mp-drop .mp-hint { margin: 0; }

/* Adjustable crop */
.mp-frame.mp-frame-adjust { cursor: grab; touch-action: none; user-select: none; }
.mp-frame.mp-frame-adjust.mp-dragging { cursor: grabbing; }
.mp-frame.mp-frame-adjust:focus-visible { outline: 2px solid var(--ucns-green); outline-offset: 2px; }
.mp-frame.mp-frame-adjust img {
  position: absolute; top: 0; left: 0;
  /* The JS sets width and height in px to scale the photo. object-fit MUST
     resize the content to that box: `none` renders at natural size and clips
     instead, so zoom silently did nothing while the photo sat at 1:1 pixels.
     `fill` is correct here because the box is already the right aspect. */
  object-fit: fill;
  max-width: none; max-height: none;
  transform-origin: 0 0;
  pointer-events: none;
  -webkit-user-drag: none;
}

.mp-nudge { display: flex; flex-direction: column; align-items: center;
            gap: var(--ucns-space-xs); margin: var(--ucns-space-md) 0; }
.mp-nudge-row { display: flex; gap: 44px; }
.mp-nudge-btn {
  width: 40px; height: 40px;
  border: 1px solid var(--ucns-grey-light);
  background: var(--ucns-white);
  border-radius: var(--ucns-radius);
  color: var(--ucns-text); font-size: 12px; line-height: 1;
  cursor: pointer;
  transition: border-color var(--ucns-transition), color var(--ucns-transition);
}
.mp-nudge-btn:hover { border-color: var(--ucns-green); color: var(--ucns-green-dark); }
.mp-nudge-btn:active { background: var(--ucns-green-pale); }

.mp-zoomrow { display: flex; align-items: center; gap: var(--ucns-space-md);
              margin-bottom: var(--ucns-space-md); }
.mp-zoomrow .ucns-label { margin: 0; white-space: nowrap; }
.mp-zoomrow input[type=range] { flex: 1; accent-color: var(--ucns-green); }

@media (max-width: 480px) {
  .mp-drop { max-width: 100%; }
  .mp-nudge-row { gap: 52px; }
  .mp-nudge-btn { width: 48px; height: 48px; }
}

.mp-zoomrow input[type=range]:disabled { opacity: 0.4; cursor: not-allowed; }
.mp-zoomrow .mp-nudge-btn { width: 36px; height: 36px; flex: 0 0 auto; }
#mp-zoom-note { margin-top: calc(var(--ucns-space-xs) * -1);
                margin-bottom: var(--ucns-space-md);
                font-variant-numeric: tabular-nums; }

.mp-hint-warn { color: var(--ucns-warning-dark, #8a6d3b); }
#mp-error { scroll-margin-top: var(--ucns-space-lg); }

#mp-submit-error { margin-bottom: var(--ucns-space-md); scroll-margin: 30vh; }