:root {
  --page-bg-top: #fff8f5;
  --page-bg-bottom: #ffede6;
  --page-line: rgba(244, 81, 30, 0.15);
  --accent: #f4511e;
  --accent-dark: #bf360c;
  --accent-soft: #fff3ee;
  --ink: #171717;
  --panel: rgba(255, 255, 255, 0.9);
  --card: rgba(255, 255, 255, 0.95);
  --field-border: #e8ebe7;
  --field-text: #666963;
  --label-text: #264338;
  --shadow-soft: 0 24px 50px rgba(244, 81, 30, 0.08);
}

[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
  --page-bg-top: #111111;
  --page-bg-bottom: #060606;
  --page-line: rgba(255, 255, 255, 0.08);
  --accent: #ff6a2f;
  --accent-dark: #ffb199;
  --accent-soft: rgba(255, 106, 47, 0.14);
  --ink: #f6f7f9;
  --panel: rgba(20, 22, 25, 0.94);
  --card: #15171a;
  --field-border: #333940;
  --field-text: #e4e7ec;
  --label-text: #f5f7fa;
  --muted-text: #aeb6c2;
  --strong-border: #2a2f36;
  --shadow-soft: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg-bottom);
  color: var(--ink);
  font-family: "Trebuchet MS", "Gill Sans", "Avenir Next", sans-serif;
}

.app-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 28px 20px 48px;
}

.theme-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.theme-toggle {
  appearance: none;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--field-border);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.theme-toggle:focus-visible {
  outline: 3px solid rgba(244, 81, 30, 0.22);
  outline-offset: 3px;
}

.theme-toggle:active {
  transform: translateY(1px);
}

.session-controls {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
  padding: 18px;
  border: 1px solid var(--strong-border, #e8e8e8);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.session-controls__copy {
  display: grid;
  gap: 4px;
}

.session-controls__title,
.session-controls__hint,
.session-control-status {
  margin: 0;
}

.session-controls__title {
  color: var(--label-text);
  font-weight: 800;
}

.session-controls__hint,
.session-control-status {
  color: var(--muted-text, #6f746d);
  font-size: 0.88rem;
}

.session-controls__actions {
  display: flex;
  align-items: end;
  gap: 10px;
}

.session-id-field {
  display: grid;
  flex: 1 1 280px;
  gap: 6px;
  color: var(--muted-text, #6f746d);
  font-size: 0.78rem;
  font-weight: 800;
}

.session-id-field input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}

.session-button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.session-button--secondary {
  background: transparent;
  color: var(--accent-dark);
}

.session-button:disabled,
.session-id-field input:disabled {
  cursor: wait;
  opacity: 0.6;
}

.session-control-status.is-success {
  color: #16803c;
}

.session-control-status.is-error {
  color: #dc2626;
}

.capture-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
  margin-bottom: 32px;
}

.action-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--strong-border, #e8e8e8);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.action-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.document-type-card {
  display: none;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid rgba(255, 106, 47, 0.28);
  border-radius: 12px;
  background: var(--accent-soft);
}

.document-type-card.is-visible {
  display: grid;
}

.document-type-card.needs-selection {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(244, 81, 30, 0.14);
}

.document-type-card__title {
  margin: 0;
  color: var(--label-text);
  font-size: 0.95rem;
  font-weight: 800;
}

.document-type-card__hint {
  margin: 0;
  color: var(--muted-text, #6f746d);
  font-size: 0.88rem;
  line-height: 1.45;
}

.document-type-field {
  display: grid;
  gap: 6px;
  color: var(--label-text);
  font-size: 0.78rem;
  font-weight: 800;
}

.document-type-error {
  margin: 0;
  color: #ffb4a8;
  font-size: 0.88rem;
  font-weight: 700;
}

.document-type-select {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: #101214;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.document-type-select:focus-visible {
  outline: 3px solid rgba(244, 81, 30, 0.24);
  outline-offset: 2px;
  border-color: var(--accent);
}

.sdk-stage {
  position: relative;
  flex: 1;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 16px;
  background: #101214;
  border: 0;
  overflow: hidden;
}

/*
  Session creation no longer blocks the widget. While the request is in flight
  the SDK is already mounted and interactive underneath this badge, which is
  purely informational and never intercepts pointer events.
*/
.sdk-stage.is-pending::after {
  content: "Preparing session";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid rgba(255, 106, 47, 0.3);
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  pointer-events: none;
  animation: stage-pending-pulse 1.4s ease-in-out infinite;
}

@keyframes stage-pending-pulse {
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sdk-stage.is-pending::after {
    animation: none;
  }
}

@media (max-width: 720px) {
  .session-controls__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .session-button {
    width: 100%;
  }
}

.stage-status {
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  border-radius: 12px;
  text-align: center;
  color: var(--accent-dark);
  background: #101214;
  font-size: 1rem;
  font-weight: 700;
}

.stage-status.is-error {
  color: #ffb4a8;
  background: rgba(255, 106, 47, 0.12);
}

.action-card__footer {
  margin-top: auto;
  display: flex;
  justify-content: center;
}

.action-button {
  appearance: none;
  border: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.95rem 1.45rem;
  min-width: 220px;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 28px rgba(244, 81, 30, 0.18);
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease;
}

.action-button:hover,
.action-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(244, 81, 30, 0.24);
  background: #e64a19;
}

.action-button:focus-visible {
  outline: 3px solid rgba(244, 81, 30, 0.22);
  outline-offset: 4px;
}

.action-button.is-active {
  background: #bf360c;
}

.divider {
  height: 1px;
  margin: 0 4px 32px;
  background: var(--strong-border, #e8e8e8);
}

.face-match-widget {
  display: grid;
  grid-template-columns: minmax(180px, 0.6fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 0 0 28px;
  padding: 18px;
  border: 1px solid var(--strong-border, #e8e8e8);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.face-match-widget__label {
  margin: 0 0 6px;
  color: var(--muted-text, #7a7f78);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.face-match-widget__status {
  margin: 0;
  color: var(--label-text);
  font-size: 1.1rem;
  font-weight: 800;
}

.face-match-widget__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  color: var(--muted-text, #6f746d);
  font-size: 0.92rem;
  line-height: 1.45;
}

.face-match-widget__details span {
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #101214;
  border: 1px solid var(--strong-border, #e8e8e8);
  color: var(--ink);
  font-weight: 700;
}

.face-match-widget__details strong {
  color: var(--muted-text, #7a7f78);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.face-match-widget[data-state="loading"],
.face-match-widget[data-state="pending"],
.face-match-widget[data-state="timeout"],
.face-match-widget[data-state="in-progress"],
.face-match-widget[data-state="requires-review"] {
  border-color: #f2c94c;
  background: rgba(242, 201, 76, 0.12);
}

.face-match-widget[data-state="succeeded"] {
  border-color: #a5d6a7;
  background: rgba(76, 175, 80, 0.12);
}

.face-match-widget[data-state="skipped"] {
  border-color: #d0d5dd;
  background: rgba(208, 213, 221, 0.1);
}

.face-match-widget[data-state="failed"],
.face-match-widget[data-state="error"] {
  border-color: #f4b4aa;
  background: rgba(244, 180, 170, 0.12);
}

.details-card {
  background: var(--card);
  border: 1px solid var(--strong-border, #e8e8e8);
  border-radius: 12px;
  padding: 26px;
  box-shadow: var(--shadow-soft);
}

.detail-form {
  display: grid;
  gap: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: minmax(150px, 180px) 1fr;
  align-items: center;
  gap: 20px;
}

.form-row label {
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  font-weight: 800;
  color: var(--label-text);
}

.input-shell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 20px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: #101214;
  transition: all 0.3s ease;
}

.input-shell.field-updated {
  background: rgba(76, 175, 80, 0.14);
  border-color: #6ccf75;
}

.results-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--strong-border, #e8e8e8);
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.results-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--label-text);
}

.fetch-results-button {
  appearance: none;
  border: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.results-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.fetch-results-button:hover {
  background: #e64a19;
  transform: translateY(-1px);
}

.fetch-results-button--secondary {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
}

.fetch-results-button--secondary:hover {
  background: var(--accent-soft);
}

.fetch-results-button:disabled {
  background: #3a3f46;
  border-color: #3a3f46;
  color: #ffffff;
  cursor: not-allowed;
  transform: none;
}

.results-display {
  background: #101214;
  border: 1px solid var(--strong-border, #e8e8e8);
  border-radius: 8px;
  padding: 16px;
  max-height: 500px;
  overflow: auto;
  font-size: 0.92rem;
}

.results-display pre {
  margin: 0;
  color: #d4d4d4;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.results-summary {
  display: grid;
  gap: 16px;
}

.results-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.results-overview-card,
.result-step-card {
  border: 1px solid var(--strong-border, #e8e8e8);
  border-radius: 12px;
  background: #101214;
  padding: 14px;
}

.result-step-card--face-match {
  background: rgba(255, 106, 47, 0.12);
  border-color: rgba(244, 81, 30, 0.3);
}

.results-label {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-text, #7a7f78);
}

.results-value {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  word-break: break-word;
}

.results-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.result-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.result-step-title {
  margin: 0;
  color: var(--label-text);
  font-size: 1rem;
  font-weight: 800;
}

.result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.result-badge--succeeded,
.result-badge--completed {
  background: rgba(76, 175, 80, 0.18);
  color: #9be4a2;
}

.result-badge--failed,
.result-badge--error,
.result-badge--expired {
  background: rgba(239, 68, 68, 0.18);
  color: #ffb4a8;
}

.result-badge--requires-review,
.result-badge--in-progress {
  background: rgba(245, 158, 11, 0.18);
  color: #ffd28a;
}

.result-badge--not-started,
.result-badge--skipped {
  background: rgba(174, 182, 194, 0.16);
  color: #c9d1db;
}

.result-metrics {
  display: grid;
  gap: 10px;
}

.result-metric {
  display: grid;
  gap: 4px;
}

.result-metric-label {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted-text, #7a7f78);
}

.result-metric-value {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 700;
}

.result-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.result-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #15171a;
  border: 1px solid var(--field-border);
  color: #d2d8e1;
  font-size: 0.8rem;
  font-weight: 700;
}

.results-images {
  display: grid;
  gap: 12px;
}

.results-images__title {
  margin: 0;
  color: var(--label-text);
  font-size: 1rem;
  font-weight: 800;
}

.results-images__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.result-image-card {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--strong-border, #e8e8e8);
  border-radius: 12px;
  background: #101214;
}

.result-image-card img {
  display: block;
  width: 100%;
  height: 180px;
  border-radius: 8px;
  background: #070809;
  border: 1px solid var(--strong-border, #e8e8e8);
  object-fit: contain;
}

.result-image-card figcaption {
  display: grid;
  gap: 2px;
}

.result-image-card strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.result-image-card span {
  color: var(--muted-text, #7a7f78);
  font-size: 0.78rem;
  font-weight: 700;
}

.results-json {
  border-radius: 12px;
  background: #1e1e1e;
  overflow: hidden;
}

.results-json summary {
  padding: 12px 14px;
  cursor: pointer;
  color: #f5f5f5;
  font-weight: 700;
  list-style: none;
}

.results-json summary::-webkit-details-marker {
  display: none;
}

.results-json pre {
  padding: 0 14px 14px;
  font-family: "Consolas", "Monaco", "Courier New", monospace;
  font-size: 0.85rem;
}

.results-placeholder {
  color: var(--muted-text, #888);
  text-align: center;
  padding: 40px 20px;
  font-size: 0.95rem;
}

.input-prefix {
  flex: 0 0 auto;
  font-size: 1.35rem;
  color: var(--muted-text, #9da29b);
}

.field {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--field-text);
  font: inherit;
  font-size: 1.05rem;
  outline: none;
}

.field::placeholder {
  color: #8f98a5;
}

.field[readonly] {
  cursor: default;
}

yesid-document-capture,
liveness-check {
  display: none;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: transparent;
}

/*
  The stages are revealed immediately now, but the browser does not know these
  elements until the SDK bundles evaluate. Fill that gap with a neutral
  skeleton rather than a blank card; the session request is already in flight
  behind it.
*/
yesid-document-capture:not(:defined),
liveness-check:not(:defined) {
  min-height: 100%;
  border-radius: 12px;
  background: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0) 70%
    )
    #101214;
  background-size: 220% 100%;
  animation: stage-skeleton 1.6s linear infinite;
}

@keyframes stage-skeleton {
  from {
    background-position: 160% 0;
  }
  to {
    background-position: -60% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  yesid-document-capture:not(:defined),
  liveness-check:not(:defined) {
    animation: none;
  }
}

#document-stage {
  min-height: 500px;
}

.sdk-stage.is-ready {
  padding: 12px;
  background: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: stretch;
}

#selfie-stage.is-ready {
  min-height: 500px;
}

.sdk-stage.is-ready yesid-document-capture,
.sdk-stage.is-ready liveness-check {
  display: block;
}

.sdk-stage.is-ready yesid-document-capture {
  min-height: 100%;
}

.sdk-stage.is-ready liveness-check {
  align-self: flex-start;
  height: auto;
  min-height: 0;
}

.sdk-stage.is-ready .stage-status {
  display: none;
}

yesid-document-capture {
  --yesid-accent-color: var(--accent);
  --doc-scanner-accent: var(--accent);
  --doc-scanner-accent-hover: #ff7d4d;
  --doc-scanner-icon-color: var(--accent);
  --doc-scanner-border-radius: 12px;
  --doc-scanner-background: var(--card);
  --doc-scanner-text: var(--ink);
  --doc-scanner-muted: var(--muted-text);
  --doc-scanner-border: var(--strong-border);
  --doc-scanner-border-strong: var(--field-border);
  --doc-scanner-shadow-sm: none;
}

liveness-check {
  --yesid-max-width: 100%;
  --yesid-font-family:
    "Trebuchet MS", "Gill Sans", "Avenir Next", sans-serif;
  --yesid-background: var(--card);
  --yesid-text-color: var(--ink);
  --yesid-video-bg: #050607;
  --yesid-card-bg: #171a1f;
  --yesid-card-border: var(--strong-border);
  --yesid-start-button-bg: var(--accent);
  --yesid-start-button-color: #ffffff;
  --yesid-video-radius: 12px;
  --yesid-button-radius: 8px;
  --yesid-button-padding: 0.9rem 1.4rem;
  --yesid-button-font-size: 0.96rem;
  --yesid-button-font-weight: 800;
  --yesid-accent-color: var(--accent);
}

@media (max-width: 900px) {
  .capture-grid {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 760px) {
  .app-shell {
    padding: 16px 8px 32px;
  }

  .capture-grid {
    gap: 14px;
    margin-bottom: 20px;
  }

  /* Keep the SDK card hugging the action-card border on phones. */
  .action-card {
    gap: 12px;
    padding: 8px;
  }

  /*
    Let the card hug the SDK instead of reserving a fixed stage.

    The old floor here (480px stage / 500px #document-stage / 464px on the
    components) was taller than the source picker actually needs, so the card
    rendered with a large dead area under the Upload option. The scanner grows
    on its own when the camera opens -- `.stage` inside its shadow DOM carries
    `min-height: var(--scanner-stage-min-height)` -- so nothing here needs to
    reserve that room up front.
  */
  .sdk-stage,
  #document-stage {
    min-height: 0;
    padding: 0;
  }

  /*
    Centre whatever slack is left rather than pinning the widget to the top.
    Base `.sdk-stage.is-ready` uses flex-start/stretch, which is what pushed the
    picker against the top edge.
  */
  .sdk-stage.is-ready {
    padding: 0;
    align-items: center;
    justify-content: center;
  }

  .sdk-stage.is-ready yesid-document-capture,
  .sdk-stage.is-ready liveness-check {
    min-height: 0;
    align-self: center;
  }

  #selfie-stage.is-ready {
    min-height: 0;
  }

  /*
    Trim the scanner's own inner padding and let its picker use the full card
    width. Two variable names on purpose: the local dev build served through
    /vendor reads `--doc-scanner-source-picker-*`, while the npm build behind
    the /react bundle still derives that padding from `--doc-scanner-spacing-xl`.
    Setting the name the other build ignores costs nothing.
  */
  yesid-document-capture {
    --doc-scanner-spacing-xl: 12px;
    --doc-scanner-source-picker-padding: 12px;
    --doc-scanner-source-picker-max-width: 100%;
  }

  /* Only the error panel still needs a floor -- it has no content of its own. */
  .stage-status {
    min-height: 240px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .face-match-widget {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .results-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .results-actions {
    justify-content: stretch;
    width: 100%;
  }

  .fetch-results-button {
    flex: 1 1 160px;
  }

  .details-card {
    padding: 14px;
  }
}