/* NZ captcha widget - look: kit lamp + checkbox plate, plus the protocol v2 / v2.1 challenge panel. Uses only the design kit tokens
   (tokens.css must be loaded). States are driven by data-state on .nz-captcha: idle | solving | challenge | verified | expired | error.
   Light/dark follow the kit (data-theme or system preference); nothing here is theme specific. */
.nz-captcha {
  display: block;
  width: 100%;
  max-width: 22rem;
  color: var(--nz-ink);
  font-family: var(--nz-font-sans);
  font-size: var(--nz-text-md);
  line-height: var(--nz-leading);
}

.nz-captcha-box {
  display: flex;
  align-items: center;
  gap: var(--nz-space-3);
  min-height: 52px;
  padding: 10px var(--nz-space-4);
  border: 1px solid var(--nz-line-strong);
  border-radius: var(--nz-radius-control);
  background: var(--nz-surface);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--nz-fast) var(--nz-ease), border-color var(--nz-fast) var(--nz-ease), box-shadow var(--nz-fast) var(--nz-ease);
}
.nz-captcha-box:hover { background: var(--nz-raised); }
.nz-captcha-box:focus { outline: none; }
.nz-captcha-box:focus-visible { border-color: var(--nz-accent); box-shadow: var(--nz-focus); }
.nz-captcha-box[data-attn] { border-color: var(--nz-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nz-accent) 32%, transparent); }

/* the tick box */
.nz-captcha-check {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--nz-ink-3);
  border-radius: 6px;
  background: var(--nz-canvas);
  transition: background-color var(--nz-fast) var(--nz-ease), border-color var(--nz-fast) var(--nz-ease);
}
.nz-captcha-check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid var(--nz-surface);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  opacity: 0;
}

.nz-captcha-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--nz-text-md);
  font-weight: 500;
  line-height: var(--nz-leading-tight);
  overflow-wrap: anywhere;
}

/* the lamp (same device as .nz-lamp in the kit) */
.nz-captcha-lamp {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--nz-line-strong);
  background: transparent;
}

.nz-captcha-msg {
  margin: 0;
  font-size: var(--nz-text-xs);
  line-height: var(--nz-leading);
}
.nz-captcha-msg:empty { margin: 0; }
.nz-captcha-msg.is-error, .nz-captcha-msg.is-hint { margin-top: var(--nz-space-2); }
.nz-captcha-msg.is-error { color: var(--nz-bad); }
.nz-captcha-msg.is-hint { color: var(--nz-ink-2); }

/* solving: amber lamp, slow pulse (steady under reduced motion) */
.nz-captcha[data-state="solving"] .nz-captcha-check,
.nz-captcha[data-state="challenge"] .nz-captcha-check { border-color: var(--nz-lamp); }
.nz-captcha[data-state="solving"] .nz-captcha-lamp,
.nz-captcha[data-state="challenge"] .nz-captcha-lamp {
  background: var(--nz-lamp-glow);
  border-color: var(--nz-lamp-glow);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nz-lamp-glow) 22%, transparent);
}
.nz-captcha[data-state="solving"] .nz-captcha-lamp { animation: nz-captcha-pulse 1.6s ease-in-out infinite; }
@keyframes nz-captcha-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* challenge: the box stays open above the panel */
.nz-captcha[data-state="challenge"] .nz-captcha-box {
  border-color: var(--nz-accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* verified: filled green lamp and ticked box */
.nz-captcha[data-state="verified"] .nz-captcha-box { border-color: color-mix(in srgb, var(--nz-ok) 55%, var(--nz-line-strong)); }
.nz-captcha[data-state="verified"] .nz-captcha-check { background: var(--nz-ok); border-color: var(--nz-ok); }
.nz-captcha[data-state="verified"] .nz-captcha-check::after { opacity: 1; }
.nz-captcha[data-state="verified"] .nz-captcha-lamp { background: var(--nz-ok); border-color: var(--nz-ok); }

/* expired / failed: red ring */
.nz-captcha[data-state="expired"] .nz-captcha-box,
.nz-captcha[data-state="error"] .nz-captcha-box { border-color: color-mix(in srgb, var(--nz-bad) 55%, var(--nz-line-strong)); }
.nz-captcha[data-state="expired"] .nz-captcha-check,
.nz-captcha[data-state="error"] .nz-captcha-check,
.nz-captcha[data-state="expired"] .nz-captcha-lamp,
.nz-captcha[data-state="error"] .nz-captcha-lamp { border-color: var(--nz-bad); }

/* ---- protocol v2 panel */
.nz-captcha-panel {
  display: block;
  padding: var(--nz-space-3) var(--nz-space-3) var(--nz-space-2);
  border: 1px solid var(--nz-accent);
  border-top: 0;
  border-radius: 0 0 var(--nz-radius-control) var(--nz-radius-control);
  background: var(--nz-surface);
}
.nz-captcha-panel[hidden] { display: none; }
.nz-captcha-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nz-space-3);
  margin-bottom: var(--nz-space-2);
}
.nz-captcha-task {
  margin: 0;
  font-size: var(--nz-text-sm);
  line-height: var(--nz-leading-tight);
  color: var(--nz-ink);
}
.nz-captcha-step {
  flex: none;
  font-size: var(--nz-text-xs);
  color: var(--nz-ink-2);
  font-variant-numeric: tabular-nums;
}
.nz-captcha-stage { display: block; }
.nz-captcha-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--nz-line);
  border-radius: var(--nz-radius-control);
  background: var(--nz-surface);
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.nz-captcha-canvas:active { cursor: grabbing; }
.nz-captcha-canvas:focus { outline: none; }
.nz-captcha-canvas:focus-visible { outline: 2px solid var(--nz-accent); outline-offset: 2px; box-shadow: var(--nz-focus); }
/* v2.1: keyboard hint, shown while the canvas has keyboard focus (always announced through aria-describedby) */
.nz-captcha-keys { display: none; margin: var(--nz-space-2) 0 0; font-size: var(--nz-text-xs); line-height: var(--nz-leading-tight); color: var(--nz-ink-2); }
.nz-captcha-canvas:focus-visible ~ .nz-captcha-keys { display: block; }
.nz-captcha-glyphs { cursor: default; touch-action: auto; }
/* v2.1: polite live region for step / keyboard announcements (visually hidden) */
.nz-captcha-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nz-captcha-panel { position: relative; }
.nz-captcha-text { display: grid; gap: var(--nz-space-2); }
.nz-captcha-question {
  margin: 0;
  font-family: var(--nz-font-serif);
  font-size: var(--nz-text-lg);
  line-height: var(--nz-leading-tight);
}
.nz-captcha-answer { max-width: 9rem; font-variant-numeric: tabular-nums; }
.nz-captcha-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nz-space-2) var(--nz-space-3);
  margin-top: var(--nz-space-2);
}
.nz-captcha-foot .nz-captcha-confirm { order: -1; }
.nz-captcha-link {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--nz-accent);
  font: inherit;
  font-size: var(--nz-text-xs);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.nz-captcha-link:hover { color: var(--nz-accent-hover); }
.nz-captcha-link:focus-visible { outline: none; box-shadow: var(--nz-focus); border-radius: 4px; }
.nz-captcha-link:last-child { margin-left: auto; color: var(--nz-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .nz-captcha-box, .nz-captcha-check { transition: none; }
  .nz-captcha[data-state="solving"] .nz-captcha-lamp { animation: none; }
}

@media (forced-colors: active) {
  .nz-captcha-box, .nz-captcha-panel, .nz-captcha-canvas { border-color: CanvasText; }
  .nz-captcha-canvas:focus-visible { outline-color: Highlight; }
  .nz-captcha[data-state="verified"] .nz-captcha-check { background: Highlight; border-color: Highlight; }
  .nz-captcha-check::after { border-color: HighlightText; }
}

/* v2.2 kinds: tap / click selection (page scroll stays possible on touch); the maze keeps touch-action: none */
.nz-captcha-pick { cursor: pointer; touch-action: manipulation; }
.nz-captcha-pick:active { cursor: pointer; }
.nz-captcha-maze { cursor: crosshair; }

/* Theme "black" (html data-theme="black": true-black neutral, beside light = white and dark = green). The widget carries the
   same near-black token values as the kit tokens.css (theme3), so it stays readable (WCAG AA on the surface: ink 16.0:1,
   ink-2 8.9:1, ink-3 5.8:1, accent 8.8:1) even on a page whose stylesheet does not define the black tokens; light and dark keep
   following the page tokens. */
:root[data-theme="black"] .nz-captcha {
  color-scheme: dark;
  --nz-canvas: #0a0a0a;
  --nz-surface: #121212;
  --nz-raised: #1b1b1b;
  --nz-line: #2a2a2a;
  --nz-line-strong: #6b6b6b;
  --nz-ink: #ededed;
  --nz-ink-2: #b3b3b3;
  --nz-ink-3: #8f8f8f;
  --nz-accent: #5ec2b5;
  --nz-accent-ink: #04110f;
  --nz-accent-soft: #0f2a27;
  --nz-accent-hover: #80d4c9;
  --nz-lamp: #e8b260;
  --nz-lamp-glow: #e8b260;
  --nz-ok: #6fcf97;
  --nz-bad: #f08a92;
  --nz-focus: 0 0 0 2px var(--nz-canvas), 0 0 0 4px var(--nz-accent);
}