/* The image-challenge widget. Shared, so the control looks and behaves identically wherever it
   guards a form - a captcha that looks different in two places is one people learn to distrust. */
/* The widget's own wrapper. Claims the full row and lays its parts out vertically whatever the
   host is doing - one of the two hosts is a centring flex container, which would otherwise turn
   the label, the image and the input into three columns. */
.jch-cap { display: block; width: 100%; flex: 1 1 100%; text-align: left; }

.jch-cap-row { display: flex; align-items: center; gap: .5rem; }
.jch-cap-img { border-radius: .4rem; border: 1px solid var(--phoenix-border-color, #e3e6ed);
  background: #eef2f8; display: block; }
/* Fixed box, so a slow image cannot reflow the form under a pointer that is already moving. */
.jch-cap-img { width: 200px; height: 70px; object-fit: cover; }
.jch-cap-refresh { flex: 0 0 auto; }
/* Monospace and wide tracking: the answer is characters, not a word, and letter shapes matter
   more than reading flow when checking what you typed against a picture. */
.jch-cap-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .18em; text-transform: uppercase; max-width: 15rem; }
@media (max-width: 420px) {
  .jch-cap-img { width: 100%; height: auto; }
}