/* t·AI·pset — "I'm not a robot": our own check box, with Google's invisible reCAPTCHA behind it.
   Used on sign-in and sign-up (markup: app/views/partials/captcha.php).
   The box brings its own colours (the sign-in page's), so it looks the same on every page. */
.hc{--teal:#0E7C66;--teal-dark:#0A5F4F;--gold:#FFCF01;--line:#DDD5C2;--white:#FFFDF8;--ink:#22303C;--ink-soft:#5B6673;
  --red:#B3492F;--red-soft:#F6E3DC}

.hc{display:flex;align-items:center;gap:.85rem;width:100%;min-height:64px;padding:.7rem .9rem;border:1.5px solid var(--line);border-radius:12px;
  background:var(--white);font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:border-color .15s,background .2s,box-shadow .15s}
.hc:disabled{cursor:wait;opacity:.7}
.hc:not(:disabled):not(.ok):hover{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,124,102,.15)}
.hc:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hc__box{width:28px;height:28px;border-radius:8px;border:2px solid #B9B09A;background:#fff;display:grid;place-items:center;flex:none;transition:all .2s}
.hc__box svg{width:16px;height:16px;color:#fff;opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.hc:not(:disabled):not(.ok):hover .hc__box{border-color:var(--teal)}
.hc__txt{flex:1;min-width:0}
.hc__txt b{display:block;font-size:.98rem;font-weight:600}
.hc__txt small{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:.1rem}
.hc__badge{flex:none;display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.58rem;color:#8A929B;letter-spacing:.02em}
.hc__badge svg{width:24px;height:24px;color:#B9B09A;transition:color .2s}
.hc.busy .hc__box{border-color:var(--teal);border-top-color:transparent;border-radius:50%;animation:hcSpin .8s linear infinite}
@keyframes hcSpin{to{transform:rotate(360deg)}}
.hc.busy{border-color:var(--teal)}
.hc.ok{border-color:#9CCDBB;background:#F2F8F4;cursor:default}
.hc.ok .hc__box{background:var(--teal);border-color:var(--teal)}
.hc.ok .hc__box svg{opacity:1;transform:none}
.hc.ok .hc__txt small{color:var(--teal-dark)}
.hc.ok .hc__badge svg{color:var(--teal)}
.hc.bad{border-color:#E0B7AA;background:var(--red-soft)}
.hc.bad .hc__box{border-color:var(--red)}
.hc.bad .hc__txt small{color:var(--red)}
.hc-widget{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}   /* Google's badge: hidden, its notice is below */
/* the moment of checking: press, spin, then pop + tick drawn + ring + glow; a shake when it fails */
.hc__box{position:relative}
.hc:not(:disabled):not(.ok):active .hc__box{transform:scale(.88)}
.hc__box svg path{stroke-dasharray:100;stroke-dashoffset:100}
.hc.ok .hc__box{animation:hcPop .5s cubic-bezier(.3,1.7,.5,1)}
.hc.ok .hc__box svg path{animation:hcDraw .38s ease-out .12s forwards}
.hc__box::after{content:'';position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--teal);opacity:0;pointer-events:none}
.hc.ok .hc__box::after{animation:hcRing .7s ease-out .08s}
.hc.ok{animation:hcGlow 1s ease-out}
.hc.ok .hc__badge svg{animation:hcBadge .55s ease .35s}
.hc.ok .hc__txt small{animation:hcFade .4s ease}
.hc.bad{animation:hcShake .42s ease}
@keyframes hcPop{0%{transform:scale(.55)}100%{transform:scale(1)}}
@keyframes hcDraw{to{stroke-dashoffset:0}}
@keyframes hcRing{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}
@keyframes hcGlow{0%{box-shadow:0 0 0 0 rgba(14,124,102,.38)}100%{box-shadow:0 0 0 12px rgba(14,124,102,0)}}
@keyframes hcBadge{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.25) rotate(-8deg)}70%{transform:scale(.95) rotate(3deg)}}
@keyframes hcFade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes hcShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){
  .hc,.hc *,.hc__box::after{animation:none !important;transition:none !important}
  .hc.ok .hc__box svg path{stroke-dashoffset:0}
}
/* the spinner wins over the hover colour (which painted the whole ring and hid the turning gap):
   a faint track with a teal arc running round it */
.hc.busy .hc__box,.hc.busy:hover .hc__box{border-color:rgba(14,124,102,.18) !important;border-top-color:var(--teal) !important;border-right-color:var(--teal) !important;
  border-radius:50%;background:transparent;animation:hcSpin .75s linear infinite}