/* 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); }