/* markcheck.css, the check on the contact form (BRIEF-MARK-CHECK-BUILD, 2026-11-11): the designer's prototype B,
   ASSEMBLE (site-captcha-20261111/src/common.css and b.css), the same file on both sites. The stage takes the form's
   own field surface, line and radius from the site's tokens (conomium.com: --line-strong, --r-ctl; seldonsolutions.es:
   --rule-strong, --radius-s). The mark's three colours are the three --mc-* values below, never a site's tokens: a site
   draws other colours by setting the three (and their dark three) in its own stylesheet; :where() keeps these weakest. */
:where(:root){--mc-disc:#E43F72;--mc-frame:#0E7C7B;--mc-square:#7B61E8}
@media (prefers-color-scheme:dark){:where(:root){--mc-disc:#FF85A8;--mc-frame:#2BB3B1;--mc-square:#A693FF}}

.check[hidden]{display:none}
.check{grid-column:1 / -1;display:grid;gap:10px;justify-items:start;min-width:0}
.check-say{margin:0;font-size:15px;font-weight:500;line-height:1.4;color:var(--ink)}
.check-stage{position:relative;width:min(100%,336px);border:1px solid var(--line-strong,var(--rule-strong));border-radius:var(--r-ctl,var(--radius-s,10px));background:var(--surface);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:border-color .2s ease}
.check-stage svg{display:block;width:100%;height:auto;border-radius:calc(var(--r-ctl,var(--radius-s,10px)) - 1px);overflow:hidden}
.check-stage:hover{border-color:var(--ink2)}
.check-stage.nudge{outline:2px solid var(--action);outline-offset:3px;border-color:var(--action)}
.check-stage.is-done{border-color:var(--line-strong,var(--rule-strong))}
.check-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 16px;width:min(100%,336px);font-size:14px;line-height:1.45;color:var(--ink2)}
.check-state{margin:0;min-height:20px;display:inline-flex;align-items:center;gap:8px}
.check-state svg{display:block;width:9px;height:9px;flex:none}
.check-state .ok{fill:var(--mc-square)}
.check-mail{margin:0 0 0 auto}
.check-mail a{font-family:var(--mono);font-size:13px;color:var(--ink);text-decoration-color:var(--line-strong,var(--rule-strong));user-select:all;-webkit-user-select:all;white-space:nowrap}
.check-mail a:hover{text-decoration-color:currentColor}
.check.mc-none .check-say,.check.mc-none .check-stage{display:none}
.check .mc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* B, ASSEMBLE: the mark's ghost at one side, its three pieces loose at the other */
#mc-pd .mc-fill{fill:var(--mc-disc)}
#mc-ps .mc-fill{fill:var(--mc-square)}
#mc-pf .mc-fill{fill:var(--mc-frame)}
#mc-gd{stroke:var(--mc-disc);fill:color-mix(in srgb,var(--mc-disc) 9%,transparent)}
#mc-gs{stroke:var(--mc-square);fill:color-mix(in srgb,var(--mc-square) 9%,transparent)}
#mc-gf{stroke:var(--mc-frame);fill:color-mix(in srgb,var(--mc-frame) 9%,transparent)}
.mc-ghost{stroke-width:1;stroke-dasharray:2.5 2}
.mc-hit{fill:transparent;pointer-events:all}
.mc-piece{touch-action:none}
.mc-piece.is-placed{cursor:default}
.mc-grab{cursor:grab}
.mc-dragging,.mc-dragging .mc-grab{cursor:grabbing}
.mc-lift{filter:drop-shadow(0 1.5px 1.5px rgba(20,16,10,.22))}
@media (prefers-color-scheme:dark){.mc-lift{filter:drop-shadow(0 1.5px 1.5px rgba(0,0,0,.5))}}
.check-piece{position:absolute;margin:0;padding:0;border:0;background:transparent;opacity:1;pointer-events:none;border-radius:4px;font-size:0;color:transparent;min-height:0;min-width:0}
.check-piece[data-p="d"]{border-radius:50%}
.check-piece:focus-visible{outline:2px solid var(--action);outline-offset:2px}

/* Send sleeps until the check is done, then wakes */
.btn[aria-disabled="true"],.btn[aria-disabled="true"]:hover{background:var(--tint);color:var(--ink2);cursor:default}
.mc-status{margin:0;font-size:15px;color:var(--ink2);min-height:1.4em}

/* reduced motion: no travel, no fades; the states still change */
@media (prefers-reduced-motion:reduce){.check-stage{transition:none}}