/* The access form in the dark CTA scene: the design's inline styles from formHtml() as classes on the tokens,
   then the block "access form states" from tm-ext in the prototype of #2595271, in the Ergates colours of
   .field, .msg-err, .done and .btn in the prototype of #2595393. */
.tf{width:100%;max-width:520px;display:flex;flex-wrap:wrap;gap:10px;padding-top:8px}
.tf[hidden]{display:none}
.tf-lbl{flex:999 1 260px;display:flex;flex-direction:column;gap:6px;text-align:left;font-size:13px;color:var(--tm-fog)}
.tf-in{min-height:50px;box-sizing:border-box;padding:0 16px;border-radius:var(--tm-r);border:1px solid var(--tm-line-dark-2);background:var(--tm-panel);color:var(--tm-cream);font-family:inherit;font-size:16px}
.tf-btn{flex:1 1 160px;align-self:flex-end;min-height:50px;border:none;border-radius:var(--tm-r);background:var(--tm-honey);color:var(--tm-forest);font-family:inherit;font-size:16px;font-weight:600;cursor:pointer}
.tf-in::placeholder{color:#7F8C82}
.tf-btn:hover{background:var(--tm-honey-soft)}
.tf-note{margin:0;font-size:13px;color:var(--tm-fog)}

/* ---------- access form states (inside the dark CTA scene) ---------- */
.tf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.tf-in:focus{outline:none;border-color:var(--tm-honey);box-shadow:0 0 0 3px rgba(232,169,58,.25)}
.tf-in[aria-invalid="true"]{border-color:var(--tm-error-on-dark);box-shadow:0 0 0 3px rgba(244,164,140,.18)}
.tf-btn:focus-visible{outline:2px solid var(--tm-honey);outline-offset:3px}
.tf-btn[aria-disabled="true"]{cursor:progress;background:var(--tm-panel-2);color:var(--tm-cream)}
.tf-spin{display:inline-block;width:14px;height:14px;margin-right:10px;vertical-align:-2px;border-radius:50%;border:2px solid rgba(232,169,58,.3);border-top-color:var(--tm-honey);animation:tfSpin .8s linear infinite}
@keyframes tfSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tf-spin{animation:none}}
.tf-msg{flex:1 1 100%;margin:0;display:flex;align-items:flex-start;gap:8px;text-align:left;font-size:14px;line-height:1.4;color:var(--tm-error-on-dark)}
.tf-msg[hidden],.tf-done[hidden]{display:none}
.tf-msg svg{width:16px;height:16px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.tf-done{width:100%;max-width:520px;box-sizing:border-box;margin-top:8px;min-height:58px;padding:14px 18px;display:flex;align-items:center;gap:14px;border-radius:var(--tm-r);border:1.5px solid var(--tm-honey);background:var(--tm-panel);color:var(--tm-cream);font-size:18px;font-weight:600;text-align:left}
.tf-tick{width:30px;height:30px;flex:none;border-radius:50%;background:var(--tm-honey);display:flex;align-items:center;justify-content:center}
.tf-tick svg{width:16px;height:16px;fill:none;stroke:var(--tm-forest);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}