/* eKYC Connect — screen layer.
   Follows the native Android / iOS SDK screens, so a tenant's palette reads the
   same on every platform. The colour roles are the ones the Android
   ThemeManager assigns:

     --ekyc-primary     toolbar, primary button, picker-row outline
     --ekyc-on-primary  toolbar title and icons, primary button label
     --ekyc-surface     icon circles, picker rows, notices, secondary button
     --ekyc-on-surface  everything drawn on a surface: glyphs, labels, outline
     --ekyc-success     pass badges, the submit spinner, a verified result
     --ekyc-error       fail badges, a failed result

   The six values below are the fallbacks named in the iOS spec's theming
   table. theme.js overwrites them from config at bootstrap and leaves the
   fallback in place whenever the tenant returns a blank or malformed hex. */

:root {
  --ekyc-primary: #5980a6;
  --ekyc-on-primary: #f2f2f3;
  --ekyc-surface: #e9e9ea;
  --ekyc-on-surface: #1d1f20;
  --ekyc-success: #4c7d5c;
  --ekyc-error: #a65b5b;
}

/* Body copy is plain black-on-white in the native builds whatever the tenant
   sends; only the roles above are themed. */
.ekyc-screen {
  --ekyc-text: #111213;
  --ekyc-text-2: #4a4c4e;
  --ekyc-line: #e3e3e5;
  --font-body: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);
  font-family: var(--font-body);
  color: var(--ekyc-text);
}
.ekyc-screen *, .ekyc-screen *::before, .ekyc-screen *::after { box-sizing: border-box; }

/* — host frame ————————————————————————————————————————————————— */

.ekyc-root {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}
.ekyc-root.ekyc-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #e4e4e6;
}
.vp {
  width: 392px;
  max-width: 100%;
  height: 788px;
  max-height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .16);
}
@media (max-width: 440px), (max-height: 800px) {
  .ekyc-root.ekyc-fullscreen .vp { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
}

/* — toolbar ——————————————————————————————————————————————————— */

.appbar {
  flex: none;
  display: grid;
  /* Equal side columns keep the title centred whatever sits either side. */
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  align-items: center;
  min-height: 56px;
  padding: 4px 0;
  background: var(--ekyc-primary);
  color: var(--ekyc-on-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
  position: relative;
  z-index: 1;
}
.appbar-title {
  margin: 0;
  text-align: center;
  font: 700 19px/1.2 var(--font-heading);
  color: var(--ekyc-on-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appbar-back {
  justify-self: start;
  margin-left: 6px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ekyc-on-primary);
  cursor: pointer;
}
.appbar-back:hover { background: color-mix(in srgb, var(--ekyc-on-primary) 14%, transparent); }
.appbar-back .ekyc-icon { width: 24px; height: 24px; }
/* Constrained on both axes because the aspect ratio belongs to the tenant: a
   square badge and a wide wordmark both fit the side column. */
.appbar-logo {
  justify-self: end;
  margin-right: 12px;
  display: block;
  max-width: 64px;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* — body and footer ——————————————————————————————————————————— */

.pad {
  padding: 24px 24px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.capture-holder { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ekyc-footer {
  flex: none;
  padding: 12px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ekyc-footer:empty { display: none; }
.footer-stack { display: contents; }
.spacer { flex: 1; min-height: 16px; }

.ekyc-icon { display: block; width: 24px; height: 24px; flex: none; }

.lead {
  margin: 0 0 24px;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ekyc-text);
}
.section-title {
  margin: 8px 0 12px;
  text-align: center;
  font: 700 18px/1.3 var(--font-heading);
}
.mono-note {
  text-align: center;
  font-size: 12px;
  color: #8a8c8e;
  margin-top: 12px;
}

/* — buttons ——————————————————————————————————————————————————— */

.ekyc-btn {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 15px;
  border: 1px solid transparent;
  font: 700 16px/1.2 var(--font-body);
  cursor: pointer;
  transition: filter .15s ease, opacity .15s ease;
}
.ekyc-btn:hover:not(:disabled) { filter: brightness(.95); }
.ekyc-btn:active:not(:disabled) { filter: brightness(.88); }
.ekyc-btn:disabled { opacity: .5; cursor: not-allowed; }
.ekyc-btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.ekyc-btn-primary {
  background: var(--ekyc-primary);
  color: var(--ekyc-on-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.ekyc-btn-secondary {
  background: var(--ekyc-surface);
  color: var(--ekyc-on-surface);
  border-color: var(--ekyc-on-surface);
}
.ekyc-link {
  align-self: center;
  border: 0;
  background: none;
  padding: 4px 8px;
  font: 500 14px var(--font-body);
  color: var(--ekyc-text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* — guide rows: tinted circle, bold title, description ———————————— */

.guides { display: flex; flex-direction: column; gap: 18px; }
.guide { display: flex; align-items: center; gap: 16px; }
.guide-icon {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ekyc-surface);
  color: var(--ekyc-on-surface);
}
.guide-icon .ekyc-icon { width: 26px; height: 26px; }
.guide-title { font: 700 16px/1.3 var(--font-heading); }
.guide-sub { font-size: 14.5px; line-height: 1.35; color: var(--ekyc-text-2); margin-top: 2px; }

.secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  font-size: 15px;
}
.secure-note .ekyc-icon { color: #9a9c9e; }

/* — document picker rows ————————————————————————————————————— */

.picks { display: flex; flex-direction: column; gap: 16px; }
.pick {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 12px 16px;
  text-align: left;
  border: 1px solid var(--ekyc-primary);
  border-radius: 8px;
  background: var(--ekyc-surface);
  color: var(--ekyc-on-surface);
  font: inherit;
  cursor: pointer;
  transition: filter .15s ease, opacity .15s ease;
}
.pick:hover:not(:disabled) { filter: brightness(.97); }
.pick-icon { width: 28px; height: 28px; }
.pick-label { flex: 1; font-size: 18px; font-weight: 400; }
.pick-chevron { width: 20px; height: 20px; }
/* Keyed on aria-busy, not aria-checked: a row is never "selected", it is
   either idle or committing. The heavier outline marks the row the user hit
   while its request is in flight. */
.pick[aria-busy="true"] { box-shadow: inset 0 0 0 1px var(--ekyc-primary); cursor: progress; }
/* The untapped rows go inert while one is committing, so the disabling the
   handler does is visible rather than silent. */
.pick:disabled { cursor: default; }
.pick:disabled:not([aria-busy="true"]) { opacity: .45; }

/* — notices ——————————————————————————————————————————————————— */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  background: var(--ekyc-surface);
  color: var(--ekyc-on-surface);
  font-size: 15px;
  line-height: 1.4;
}
.notice .ekyc-icon { margin-top: 1px; }

/* — capture guide ————————————————————————————————————————————— */

.example-title { margin: 28px 0 16px; text-align: center; font-weight: 700; font-size: 15px; }
.example { display: block; width: 100%; height: 200px; object-fit: cover; border-radius: 4px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.tile-img {
  position: relative;
  height: 64px;
  background: #d6e4f5;
  border-radius: 4px;
  overflow: hidden;
}
.tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-title { margin-top: 6px; font-weight: 700; font-size: 13px; }
.tile-sub { font-size: 12px; line-height: 1.3; color: var(--ekyc-text-2); }

.verdict {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.verdict .ekyc-icon { width: 14px; height: 14px; }
.verdict.ok { background: var(--ekyc-success); }
.verdict.bad { background: var(--ekyc-error); }

.selfie-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
.selfie-example { position: relative; aspect-ratio: 374 / 326; overflow: hidden; }
.selfie-example img { width: 100%; height: 100%; object-fit: cover; display: block; }
.selfie-example .verdict { top: 10px; right: 10px; width: 28px; height: 28px; }
.selfie-example .verdict .ekyc-icon { width: 18px; height: 18px; }

/* — review ———————————————————————————————————————————————————— */

.thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shot { margin: 0; }
.shot-frame {
  aspect-ratio: 6 / 5;
  background: #22282e;
  overflow: hidden;
}
.shot-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot figcaption { margin-top: 8px; text-align: center; font-weight: 700; font-size: 15px; color: var(--ekyc-text); }
/* A lone frame (front only, or a passport) keeps half the width rather than
   blowing a single image up across the screen. */
.thumbs .shot:only-child { grid-column: 1 / -1; width: 60%; justify-self: center; }

.fields { margin: 20px 0 0; display: flex; flex-direction: column; gap: 16px; }
.field-row dt { font-size: 15px; color: var(--ekyc-text); }
.field-row dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; white-space: pre-line; overflow-wrap: anywhere; }

.selfie-review { display: flex; flex-direction: column; align-items: center; padding-top: 36px; }
.selfie-circle {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  overflow: hidden;
  background: #e0e0e0;
  margin-bottom: 32px;
}
.selfie-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* — camera feed ————————————————————————————————————————————— */

.capture-live { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.capture-copy { padding: 16px 24px 0; text-align: center; }
.capture-heading { font: 700 17px/1.3 var(--font-heading); }
.capture-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ekyc-success);
}
.capture-status:empty { display: none; }
.capture-status .ekyc-icon { width: 18px; height: 18px; }

.feed {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #22282e;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.feed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feed video.mirrored { transform: scaleX(-1); }
.feed-hint {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 1;
}
.feed-hint span {
  font-size: 13px;
  font-weight: 500;
  color: var(--ekyc-on-primary);
  background: var(--ekyc-primary);
  padding: 6px 14px;
  border-radius: 999px;
}

/* Document reticle — the corner brackets and the sweeping edge-detect line. */
.reticle {
  position: relative;
  width: 308px;
  max-width: calc(100% - 42px);
  aspect-ratio: 308 / 196;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(20, 24, 28, .45);
}
/* Direct children only: these are the four corner brackets, not anything
   nested inside the frame. */
.reticle > i {
  position: absolute;
  width: 28px;
  height: 28px;
}
.reticle i.tl { top: -2px; left: -2px; border-top: 4px solid var(--ekyc-primary); border-left: 4px solid var(--ekyc-primary); border-top-left-radius: 10px; }
.reticle i.tr { top: -2px; right: -2px; border-top: 4px solid var(--ekyc-primary); border-right: 4px solid var(--ekyc-primary); border-top-right-radius: 10px; }
.reticle i.bl { bottom: -2px; left: -2px; border-bottom: 4px solid var(--ekyc-primary); border-left: 4px solid var(--ekyc-primary); border-bottom-left-radius: 10px; }
.reticle i.br { bottom: -2px; right: -2px; border-bottom: 4px solid var(--ekyc-primary); border-right: 4px solid var(--ekyc-primary); border-bottom-right-radius: 10px; }
.reticle .sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--ekyc-primary);
  box-shadow: 0 0 12px 2px var(--ekyc-primary);
  animation: sweep 2.4s ease-in-out infinite alternate;
}

/* Turn-it-over glyph on the back prompt. Small and centred: it illustrates the
   instruction without taking over the frame the user is aiming with. */
.flipcard {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 104px;
  height: 66px;
  margin: -33px 0 0 -52px;
  perspective: 420px;
  transform-style: preserve-3d;
  animation: cardturn 3.2s ease-in-out infinite;
}
.flipcard .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background: rgba(12, 15, 18, .55);
  border: 1px solid var(--ekyc-primary);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: flex-end;
}
.flipcard .face.back { transform: rotateY(180deg); }
.flipcard .portrait {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 24px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .55);
}
.flipcard .rule { height: 2px; background: rgba(255, 255, 255, .5); }
.flipcard .face.front .rule:last-child { width: 60%; }
.flipcard .face.back .rule:last-child { width: 45%; }

/* Face oval on the live selfie feed. */
.oval-live { position: relative; width: 232px; height: 292px; max-width: calc(100% - 60px); }
.oval-live .cut {
  position: absolute;
  inset: 0;
  border-radius: 50% / 44%;
  border: 3px solid var(--ekyc-primary);
  box-shadow: 0 0 0 9999px rgba(20, 24, 28, .55);
}

/* — results ————————————————————————————————————————————————— */

.result-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.glyph {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  flex: none;
  background: var(--ekyc-surface);
  color: var(--ekyc-on-surface);
}
.glyph .ekyc-icon { width: 46px; height: 46px; }
.glyph.ok { background: color-mix(in srgb, var(--ekyc-success) 16%, #fff); color: var(--ekyc-success); }
.glyph.bad { background: color-mix(in srgb, var(--ekyc-error) 16%, #fff); color: var(--ekyc-error); }
.result-kicker { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ekyc-text-2); margin-bottom: 8px; }
.result-title { margin: 0 0 12px; font: 700 23px/1.25 var(--font-heading); }
.result-body .lead { margin-bottom: 0; }
.result-body .notice { margin-top: 24px; text-align: left; width: 100%; }

.receipt {
  width: 100%;
  margin-top: 24px;
  padding: 2px 16px;
  border: 1px solid var(--ekyc-line);
  border-radius: 12px;
  text-align: left;
}
.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ekyc-line);
  font-size: 14px;
}
.kv:last-child { border-bottom: 0; }
.kv > span:first-child { color: var(--ekyc-text-2); }
.kv-mono { font-family: ui-monospace, Menlo, monospace; }
.kv-pass { color: var(--ekyc-success); font-weight: 500; }
.kv-fail { color: var(--ekyc-error); font-weight: 500; }

/* — processing ——————————————————————————————————————————————— */

.meter { width: 100%; height: 6px; border-radius: 3px; background: var(--ekyc-line); margin: 0 0 20px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--ekyc-primary); transition: width .4s ease; }

/* The per-step ring the iOS build shipped but never instantiated — revived
   here as the polling screen, per the spec's screen inventory note. */
.steps { width: 100%; display: flex; flex-direction: column; }
.step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ekyc-line);
  font-size: 15px;
}
.step .dot { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid #c4c6c8; }
.step.done .dot { background: var(--ekyc-success); border-color: var(--ekyc-success); }
.step.now .dot { background: var(--ekyc-primary); border-color: var(--ekyc-primary); animation: pulse 1.1s ease-in-out infinite; }
.step.todo { color: #9a9c9e; }
.step .state { margin-left: auto; font-size: 13px; color: #8a8c8e; }

/* — alert dialog ————————————————————————————————————————————— */

.ekyc-alert {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .5);
}
.ekyc-screen .ekyc-alert .dialog {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}
.ekyc-alert .dialog-title { font: 700 18px/1.3 var(--font-heading); }
.ekyc-alert .dialog-body { font-size: 15px; line-height: 1.45; color: var(--ekyc-text-2); }
.ekyc-alert .dialog-actions { margin-top: 10px; }
.ekyc-alert .dialog-actions .ekyc-btn { min-height: 46px; }

/* — blocking spinner card while a submit is in flight —————————————— */

.ekyc-block {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .6);
}
.block-card {
  width: 220px;
  padding: 24px;
  border-radius: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.block-card .ring {
  width: 48px;
  height: 48px;
  border: 4px solid color-mix(in srgb, var(--ekyc-success) 22%, transparent);
  border-top-color: var(--ekyc-success);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.block-card .lbl { font-weight: 700; font-size: 15px; text-align: center; }

@keyframes sweep { 0% { transform: translateY(0); } 100% { transform: translateY(196px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* Hold front, turn, hold back, then carry on through 360 so the loop closes on
   the front face with no snap back. */
@keyframes cardturn {
  0%, 25%   { transform: rotateY(0deg); }
  50%, 75%  { transform: rotateY(180deg); }
  100%      { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .reticle .sweep, .step.now .dot { animation: none; }
  /* The glyph loops indefinitely over a live viewfinder, so park it on the back
     face — the illustration still reads, it just stops moving. */
  .flipcard { animation: none; transform: rotateY(180deg); }
}