/* hold-verify.css -- hold-to-verify human gate (Holy Automation, 2026-09-14)
   Brand: cream / warm charcoal / gold. Hairlines, no rounded corners,
   mono for UI labels. Inherits currentColor so it survives dark + light
   sections without a second palette. */

.htv {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
  margin: 0.125rem 0 1.125rem;
}

.htv__btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.05rem;
  margin: 0;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 0;
  cursor: pointer;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.htv__btn:hover {
  border-color: color-mix(in srgb, currentColor 55%, transparent);
}

.htv__btn:focus-visible {
  outline: 1px solid var(--gold, #d4a017);
  outline-offset: 3px;
}

.htv__ring {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.htv__ring svg {
  display: block;
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
}

.htv__track {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.2;
  stroke-width: 2;
}

.htv__sweep {
  fill: none;
  stroke: var(--gold, #d4a017);
  stroke-width: 2;
  stroke-linecap: butt;
  transition: stroke-dashoffset 90ms linear;
}

.htv__label {
  white-space: nowrap;
}

.htv__note {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 60%, transparent);
  min-height: 1em;
}

/* States -------------------------------------------------------------- */

.htv[data-htv-state="holding"] .htv__btn {
  cursor: grabbing;
  border-color: color-mix(in srgb, currentColor 60%, transparent);
}

.htv[data-htv-state="holding"] .htv__label,
.htv[data-htv-state="verifying"] .htv__label {
  color: color-mix(in srgb, currentColor 75%, transparent);
}

.htv[data-htv-state="done"] .htv__btn {
  border-color: var(--gold, #d4a017);
  cursor: default;
}

.htv[data-htv-state="done"] .htv__note {
  color: color-mix(in srgb, currentColor 60%, transparent);
}

.htv[data-htv-state="error"] .htv__btn {
  border-color: var(--gold, #d4a017);
  animation: htv-nudge 340ms ease-in-out 1;
}

.htv[data-htv-state="error"] .htv__note {
  color: var(--gold, #d4a017);
}

.htv--compact {
  gap: 0.6rem;
  margin: 0.5rem 0 0;
}

.htv--compact .htv__btn {
  padding: 0.55rem 0.85rem;
}

/* Honeypot: present in the DOM, invisible to people, catnip for bots. */
.htv-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@keyframes htv-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .htv__sweep { transition: none; }
  .htv[data-htv-state="error"] .htv__btn { animation: none; }
}

@media (max-width: 560px) {
  .htv__label { white-space: normal; }
}