/* Identity verification. Every colour is a shell.css token, so the papyrus
   light theme comes for free and nothing here needs a [data-theme] override.
   Loaded from verify-id.php only, through $HEAD_EXTRA. */

.ky { max-width: 1060px; }

/* ── the state banner ─────────────────────────────────────────── */
.ky-state {
  display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start;
  padding: 20px 22px; margin: 0 0 22px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: linear-gradient(160deg, var(--card-2), var(--card));
}
.ky-state__mark {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--raise); color: var(--dim);
}
.ky-state__mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ky-state__t b { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.01em; margin-bottom: 5px; }
.ky-state__t p { color: var(--dim); font-size: 13.5px; line-height: 1.65; max-width: 62ch; }
.ky-state__t p + p { margin-top: 8px; }
.ky-state__t .n { font-variant-numeric: tabular-nums; color: var(--ink); }
.ky-state__sub { color: var(--faint) !important; font-size: 12.5px !important; }
.ky-state__t a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.ky-state .pg-ctas { margin-top: 12px; }
/* a link a thumb has to hit is a chip on its own line, not a word in a sentence */
.ky .pg-ctas .mini-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; }

.ky-state--approved { border-color: var(--up); background: linear-gradient(160deg, var(--up-a), var(--card)); }
.ky-state--approved .ky-state__mark { color: var(--up); border-color: var(--up); }
.ky-state--pending .ky-state__mark { color: var(--red); border-color: var(--line-3); }
.ky-state--rejected { border-color: var(--line-3); background: linear-gradient(160deg, var(--red-a), var(--card)); }
.ky-state--rejected .ky-state__mark, .ky-state--more_info .ky-state__mark { color: var(--red); border-color: var(--line-3); }
.ky-state--more_info { border-color: var(--line-3); background: linear-gradient(160deg, var(--red-a), var(--card)); }

/* ── what we need ─────────────────────────────────────────────── */
.ky-steps { list-style: none; counter-reset: ky; display: grid; gap: 14px; }
.ky-steps li { counter-increment: ky; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.ky-steps li::before {
  content: counter(ky); width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
  font-size: 12px; font-weight: 650; color: var(--ink);
  border: 1px solid var(--line-2); background: var(--raise);
}
/* the counter is a third grid child, so the text has to be pinned to column 2
   or the description wraps into the 26px marker column and overflows it */
.ky-steps li > b, .ky-steps li > span { grid-column: 2; }
.ky-steps b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.ky-steps span { color: var(--dim); font-size: 12.5px; line-height: 1.6; display: block; }

/* ── the form ─────────────────────────────────────────────────── */
.ky-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ky-form .seg--wrap { flex-wrap: wrap; }

.ky-drops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 4px; }
.ky-drop {
  position: relative; border: 1px dashed var(--line-2); border-radius: 16px;
  background: var(--card-2); min-height: 236px; display: grid; overflow: hidden;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.ky-drop.is-over { border-color: var(--red); background: var(--red-a); }
.ky-drop.is-bad { border-color: var(--red); }
.ky-drop.has-file { border-style: solid; }

.ky-drop__empty { display: grid; place-items: center; align-content: center; gap: 8px; padding: 24px 18px; text-align: center; }
.ky-drop__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--raise); color: var(--faint); }
.ky-drop__ic svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ky-drop__empty b { font-size: 14px; font-weight: 600; }
.ky-drop__hint { color: var(--dim); font-size: 12.5px; }
.ky-drop__acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.ky-drop__acts .mini-btn { min-height: 40px; padding: 0 14px; }
.ky-drop__drag { color: var(--faint); font-size: 11.5px; }

.ky-drop__have { display: grid; grid-template-rows: 1fr auto; height: 100%; }
.ky-drop__have img.ky-prev { width: 100%; height: 100%; min-height: 150px; max-height: 300px; object-fit: contain; background: var(--raise); display: block; }
.ky-doc { display: grid; place-items: center; gap: 8px; align-content: center; background: var(--raise); color: var(--dim); min-height: 170px; }
.ky-doc svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.ky-doc b { font-size: 12px; letter-spacing: .1em; }
.ky-drop__have figcaption {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 10px 12px; border-top: 1px solid var(--line); background: var(--card);
}
.ky-fname { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ky-drop__have figcaption .mini-btn { min-height: 40px; flex: 0 0 auto; }

.ky-go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ky-go .cbtn { min-height: 46px; }
.ky-prog { display: flex; align-items: center; gap: 10px; flex: 1 1 160px; min-width: 140px; }
.ky-prog i { flex: 1; height: 6px; border-radius: 99px; background: var(--raise); overflow: hidden; position: relative; }
.ky-prog i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--fill); border-radius: 99px; transition: width .2s linear; }
.ky-prog em { font-style: normal; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 34px; }
.ky-form.is-busy { opacity: .6; pointer-events: none; }

/* ── why photos fail ──────────────────────────────────────────── */
.ky-fails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ky-fail { border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px; background: var(--card-2); }
.ky-fail b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.ky-fail span { color: var(--dim); font-size: 12.5px; line-height: 1.6; display: block; }

/* ── narrow ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ky-fields { grid-template-columns: 1fr; }
  .ky-drops { grid-template-columns: 1fr; }
  .ky-fails { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ky-state { grid-template-columns: 1fr; gap: 12px; padding: 16px 16px; }
  .ky-drop { min-height: 210px; }
}
/* a low-end device keeps the page, loses the motion */
html.mz-low .ky-drop, html.mz-low .ky-prog i::after { transition: none; }