:root {
  color-scheme: dark;
  --page: #020b1e;
  --text: #f2f6fa;
  --muted: #98a8b8;
  --success: #52d887;
  --failure: #f06464;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --type-state: clamp(13px, 1.6vh, 16px);
  --type-primary: clamp(25px, 3.3vh, 34px);
  --type-secondary: clamp(20px, 2.65vh, 28px);
  --motion-fast: 180ms;
  --motion-standard: 320ms;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--page);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans Thai", "Leelawadee UI", sans-serif;
}

.simulation {
  width: 100%;
  height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2) var(--space-1);
}

.passenger-display {
  position: relative;
  height: 100%;
  width: min(56.25vh, 540px, calc(100vw - 32px));
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--page);
}

.layer-background {
  position: absolute;
  inset: 0;
  background: url("/assets/bg.jpg") center / cover no-repeat;
}

.layer-reader-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.passenger-content {
  position: relative;
  height: 100%;
  padding: clamp(54px, 8vh, 82px) 5% 0;
  text-align: center;
}

.state-label {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-state);
  font-weight: 600;
  line-height: 1.4;
}

.instruction-primary,
.instruction-secondary {
  position: relative;
  top: 140px;
  color: var(--text);
  font-size: clamp(30px, 4vh, 40px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  opacity: 1;
}

.instruction-primary {
  margin: clamp(28px, 4.5vh, 46px) 0 0;
}

.instruction-secondary {
  margin: var(--space-1) 0 0;
}

.processing-indicator {
  position: relative;
  top: 158px;
  width: 132px;
  height: 2px;
  margin: 22px auto 0;
  overflow: hidden;
  background: rgba(152, 168, 184, .28);
  opacity: 0;
}

.processing-indicator span {
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 100%;
  background: #78b9ed;
  animation: passport-scan 1.35s ease-in-out infinite;
}

.passenger-display[data-journey-state="READING"] .instruction-secondary {
  display: none;
}

.passenger-display[data-journey-state="READING"] .processing-indicator {
  opacity: 1;
}

@keyframes passport-scan {
  0% { transform: translateX(-42px); }
  100% { transform: translateX(132px); }
}

.passport-visual {
  display: contents;
  margin: 0;
}

.passport-hand {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  display: block;
  width: 66%;
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
}

.identity-state-content {
  display: none;
}

.passenger-display[data-journey-state="IDENTITY_FOUND"] .passport-state-content {
  display: none;
}

.passenger-display[data-journey-state="IDENTITY_FOUND"] .identity-state-content {
  display: block;
}

.identity-instruction {
  position: relative;
  z-index: 2;
  margin: clamp(30px, 4.5vh, 46px) 0 0;
  color: var(--text);
  font-size: clamp(30px, 4vh, 40px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
}

.identity-summary {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  width: min(82%, 360px);
  margin: clamp(28px, 4vh, 40px) auto 0;
  text-align: left;
}

.identity-portrait {
  display: block;
  width: 96px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10px;
}

.identity-copy {
  min-width: 0;
}

.identity-label {
  display: block;
  color: var(--muted);
  font-size: var(--type-state);
  font-weight: 600;
  line-height: 1.4;
}

.identity-name {
  display: block;
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: clamp(28px, 3.8vh, 38px);
  font-weight: 700;
  line-height: 1.2;
}

.travel-context {
  margin-top: var(--space-2);
}

.travel-context[hidden] {
  display: none;
}

.travel-label,
.flight-number,
.travel-route {
  display: block;
}

.travel-label {
  color: var(--muted);
  font-size: var(--type-state);
  font-weight: 600;
  line-height: 1.4;
}

.flight-number {
  margin-top: 2px;
  color: var(--text);
  font-size: clamp(18px, 2.4vh, 24px);
  font-weight: 600;
  line-height: 1.25;
}

.travel-route {
  margin-top: 3px;
  color: var(--muted);
  font-size: clamp(15px, 2vh, 20px);
  font-weight: 500;
  line-height: 1.3;
}

.enter-gate {
  display: none;
  height: 24px;
  padding: 0 7px;
  border: 1px solid #304657;
  border-radius: 4px;
  background: transparent;
  color: #8091a0;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.passenger-display[data-journey-state="IDENTITY_FOUND"] + .test-console .enter-gate {
  display: inline-block;
}

.enter-gate:focus-visible {
  outline: 2px solid rgba(142, 212, 255, .45);
  outline-offset: 2px;
}

.enter-gate:disabled {
  cursor: default;
  opacity: .55;
}

.automatic-gate {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -14%;
  display: block;
  width: 80%;
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
}

.face-state-content {
  display: none;
}

.passenger-display[data-journey-state="FACE_CHECK"] .passport-state-content,
.passenger-display[data-journey-state="FACE_CHECK"] .identity-state-content,
.passenger-display[data-journey-state="VERIFYING"] .passport-state-content,
.passenger-display[data-journey-state="VERIFYING"] .identity-state-content,
.passenger-display[data-journey-state="VERIFIED"] .passport-state-content,
.passenger-display[data-journey-state="VERIFIED"] .identity-state-content,
.passenger-display[data-journey-state="NOT_VERIFIED"] .passport-state-content,
.passenger-display[data-journey-state="NOT_VERIFIED"] .identity-state-content {
  display: none;
}

.passenger-display[data-journey-state="FACE_CHECK"] .face-state-content {
  display: block;
}

.verifying-state-content,
.verified-state-content,
.result-state-content {
  display: none;
}

.passenger-display[data-journey-state="VERIFYING"] .face-state-content,
.passenger-display[data-journey-state="VERIFIED"] .face-state-content,
.passenger-display[data-journey-state="NOT_VERIFIED"] .face-state-content {
  display: none;
}

.passenger-display[data-journey-state="VERIFYING"] .verifying-state-content {
  display: block;
}

.passenger-display[data-journey-state="NOT_VERIFIED"] .result-state-content {
  display: block;
}

.passenger-display[data-journey-state="NOT_VERIFIED"] .layer-background {
  background-image: url("/assets/red_bg.png");
}

.passenger-display[data-journey-state="VERIFIED"] .verified-state-content {
  display: block;
}

.face-instruction {
  margin: clamp(28px, 4vh, 42px) 0 0;
  color: var(--text);
  font-size: clamp(30px, 4vh, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.face-guidance {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: clamp(16px, 2.1vh, 21px);
  line-height: 1.4;
}

.camera-stage {
  position: relative;
  width: 90%;
  margin: clamp(34px, 5vh, 52px) auto 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #020914;
  border-radius: 12px;
}

#camera-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.detected-face-box {
  position: absolute;
  display: none;
  pointer-events: none;
}

.detected-face-box.visible {
  display: block;
}

.corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: rgba(142, 212, 255, .92);
  border-style: solid;
}

.corner-top-left {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}

.corner-top-right {
  top: 0;
  right: 0;
  border-width: 2px 2px 0 0;
}

.corner-bottom-left {
  bottom: 0;
  left: 0;
  border-width: 0 0 2px 2px;
}

.corner-bottom-right {
  right: 0;
  bottom: 0;
  border-width: 0 2px 2px 0;
}

.verifying-instruction {
  margin: clamp(32px, 4.5vh, 46px) 0 0;
  color: var(--text);
  font-size: clamp(30px, 4vh, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.welcome-message {
  margin: clamp(32px, 4.5vh, 46px) 0 0;
  color: var(--text);
  font-size: clamp(30px, 4vh, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.welcome-visual {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 112%;
  margin: 0;
  transform: translateX(-50%);
}

.welcome-gate {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.not-verified-message {
  margin: clamp(32px, 4.5vh, 46px) 0 0;
  color: var(--text);
  font-size: clamp(30px, 4vh, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.not-verified-message span {
  display: block;
  font: inherit;
  color: inherit;
}

.officer-guidance {
  margin: clamp(22px, 3vh, 32px) 0 0;
  color: var(--text);
  font-size: clamp(17px, 2.2vh, 22px);
  font-weight: 500;
  line-height: 1.4;
}

.passport-control-visual {
  width: 94%;
  margin: clamp(44px, 6vh, 64px) auto 0;
}

.passport-control {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.verifying-guidance {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: clamp(16px, 2.1vh, 21px);
  line-height: 1.4;
}

.face-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 92%;
  margin: clamp(64px, 9vh, 88px) auto 0;
}

.comparison-face {
  margin: 0;
}

.comparison-face img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10px;
}

.comparison-face figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--type-state);
  line-height: 1.4;
}

.comparison-scan {
  position: relative;
  height: 2px;
  overflow: hidden;
  background: rgba(152, 168, 184, .25);
}

.comparison-scan span {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 100%;
  background: #78b9ed;
  animation: comparison-scan 1.1s ease-in-out infinite alternate;
}

@keyframes comparison-scan {
  from { transform: translateX(-16px); }
  to { transform: translateX(44px); }
}

.test-console {
  width: min(360px, calc(100vw - 32px));
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #66798a;
  font-size: 10px;
  white-space: nowrap;
}

.test-console select,
.test-console button {
  height: 24px;
  border: 1px solid #26394a;
  border-radius: 4px;
  background: #091521;
  color: #8091a0;
  font: inherit;
}

.test-console select {
  width: 72px;
  padding: 0 5px;
}

.test-console button {
  min-width: 47px;
  padding: 0 8px;
  cursor: pointer;
}

.test-console button:disabled,
.test-console select:disabled {
  cursor: default;
  opacity: .48;
}

#runtime-evidence {
  overflow: hidden;
  color: #718595;
  text-overflow: ellipsis;
}

@media (max-height: 760px) {
  .passenger-content {
    padding-top: 34px;
  }

  .instruction-primary {
    margin-top: var(--space-3);
  }

}