/* t·AI·pset — the sign-up page (signup.php). It is the sign-in page (login.css: layout,
   lock-up, Psalm page, card, fields, buttons, alerts, "I'm not a robot"); this file adds only
   what sign-up has and sign-in does not, in sign-in's own colours and sizes. */

[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* if a step is ever taller than the screen, the dark side stays one screen tall and in place, so
   the lock-up sits in the middle of the screen as it does on sign-in */
@media(min-width:861px){
  .signup .hero{position:sticky;top:0;height:100vh;height:100dvh;align-self:start}
}

/* a little wider than sign-in's card: first and last name share a row */
.su-card{max-width:460px}
@media(min-width:861px){ .su-card{max-width:460px} }
.su-card h1{margin-bottom:.4rem}
.su-lede{color:var(--ink-soft);font-size:.93rem;margin-bottom:1.2rem}
.su-card .field label,.su-card .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-weight:600;font-size:.9rem;margin-bottom:.35rem}
.su-card .field label small{font-weight:400;font-size:.78rem;color:var(--ink-soft)}
.field-hint{display:block;font-size:.8rem;color:var(--ink-soft)}
.field-hint:empty{display:none}

/* ---------- the three steps: a progress line, then one step at a time ---------- */
.prog{list-style:none;display:flex;align-items:center;margin:0 0 1.3rem;font-size:.8rem;color:var(--ink-soft)}
.prog li{display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.prog li + li::before{content:"";width:clamp(14px,4vw,34px);height:2px;background:var(--line);margin:0 .5rem}
.prog li.done + li::before{background:var(--teal)}
.prog b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:.72rem;
  border:2px solid var(--line);background:var(--white);color:var(--ink-soft)}
.prog .done b{background:var(--teal);border-color:var(--teal);color:#fff}
.prog .now{color:var(--ink);font-weight:600}
.prog .now b{border:3px solid var(--gold);color:var(--ink)}
.step{animation:stepIn .25s ease}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem}
@media(max-width:420px){ .row2{grid-template-columns:1fr} }
.btns{display:flex;gap:.6rem;margin-top:.6rem}
.btns .btn{margin-top:0}
.btn.ghost{width:auto;flex:none;background:transparent;color:var(--teal-dark);border:1.5px solid var(--line);padding-inline:1.1rem}
.btn.ghost:hover{background:var(--white);border-color:var(--teal)}
#sendCodeBtn.busy{cursor:progress;opacity:.75}
.su-card .field input[readonly]{background:#EFEBDF;color:var(--ink-soft)}

/* the address the code went to, with "Change" */
.recap{display:flex;justify-content:space-between;align-items:center;gap:.6rem;background:var(--white);border:1px solid var(--line);
  border-radius:11px;padding:.55rem .85rem;margin-bottom:1rem;font-size:.9rem;overflow-wrap:anywhere}

/* six boxes for the code */
.code{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.45rem;margin:.1rem 0 .35rem}
.code input{width:100%;min-width:0;height:3.4rem;text-align:center;font:700 1.5rem var(--serif);color:var(--ink);
  border:1.5px solid var(--line);border-radius:11px;background:var(--white);padding:0;transition:border-color .15s,background .15s}
.code input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,124,102,.18)}
.code input.filled{border-color:#9CCDBB;background:#F2F8F4}
.code input.bad{border-color:var(--red);background:var(--red-soft)}
.code input:disabled{opacity:.6}
.resend{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-top:.3rem}
.link.small{font-size:.82rem;padding:0}
.link:disabled{color:var(--ink-soft);cursor:default;text-decoration:none}

/* "… is verified" at the top of step 2 */
.alert.verified{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.alert.verified > span:first-child{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--teal);color:#fff;font-size:.72rem;flex:none}
.alert.verified b{overflow-wrap:anywhere}
.alert.verified .link{margin-left:auto}

/* the password checklist, ticking as it is typed (the rule itself is the length the server checks) */
.meter{display:block;height:4px;border-radius:2px;background:var(--line);margin-top:.5rem;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--red);transition:width .25s,background .25s}
.meter[data-s="2"] i{background:#C99A06}
.meter[data-s="3"] i{background:var(--teal)}
.rules{list-style:none;margin:.55rem 0 0;display:grid;gap:.2rem;font-size:.8rem;color:var(--ink-soft)}
.rules li{display:flex;align-items:center;gap:.45rem}
.rules li::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line);flex:none;transition:all .2s}
.rules li.on{color:var(--teal-dark)}
.rules li.on::before{background:var(--teal);border-color:var(--teal);box-shadow:inset 0 0 0 3px #fff}

/* the links under the card's form, as sign-in's note */
.su-alt{margin-top:1.1rem;font-size:.83rem;color:var(--ink-soft)}
.su-alt + .su-alt{margin-top:.5rem}

/* step 3: the password and its tools in one box — the eye, Generate and its menu */
.pw-tools{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:11px;background:var(--white);position:relative}
.pw-tools:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,124,102,.18)}
.field .pw-tools input{flex:1;min-width:0;border:none;box-shadow:none;background:transparent;padding-right:.6rem;border-radius:11px 0 0 11px}
.field .pw-tools input:focus{box-shadow:none}
.field .pw-tools input[aria-invalid="true"]{background:var(--red-soft)}
.pw-eye{display:grid;place-items:center;border:none;background:none;color:var(--teal-dark);cursor:pointer;padding:.35rem .5rem;border-radius:8px}
.pw > .pw-eye{position:absolute;right:.45rem;top:50%;transform:translateY(-50%)}
.pw-tools .pw-eye{position:static;transform:none;border-left:1.5px solid var(--line);border-radius:0;padding:0 .75rem}
.pw-eye .eye-shut,.pw-eye.shown .eye-open{display:none}
.pw-eye.shown .eye-shut{display:block}
.pw-gen,.pw-gen-more{font:inherit;font-size:.85rem;font-weight:600;color:var(--teal-dark);background:none;border:none;border-left:1.5px solid var(--line);padding:0 .85rem;cursor:pointer}
.pw-gen-more{padding:0 .65rem;border-radius:0 9px 9px 0}
.pw-eye:hover,.pw-gen:hover,.pw-gen-more:hover{background:rgba(14,124,102,.07)}
.pw-eye:focus-visible,.pw-gen:focus-visible,.pw-gen-more:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.gen-menu{position:absolute;right:0;top:calc(100% + .35rem);z-index:5;display:flex;flex-direction:column;min-width:15rem;padding:.3rem;
  background:var(--white);border:1.5px solid var(--line);border-radius:11px;box-shadow:0 10px 24px rgba(34,48,60,.14)}
.gen-menu[hidden]{display:none}
.gen-menu button{font:inherit;font-size:.86rem;text-align:left;color:var(--ink);background:none;border:none;padding:.55rem .7rem;border-radius:8px;cursor:pointer}
.gen-menu button:hover,.gen-menu button:focus-visible{background:rgba(14,124,102,.08);outline:none}
/* its strength in five steps, and the score it needs */
.meter5{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem;margin-top:.6rem}
.meter5 i{height:5px;border-radius:3px;background:var(--line);transition:background .25s}
.meter5[data-s="1"] i.on{background:var(--red)}
.meter5[data-s="2"] i.on{background:#C99A06}
.meter5[data-s="3"] i.on{background:var(--teal)}
.pw-score{font-size:.8rem;color:var(--ink-soft);margin:.45rem 0 0}
.pw-score.ok{color:var(--teal-dark)}
/* the rules as boxes that are ticked */
.rules.checks li::before{border-radius:4px}
.rules.checks li.on::before{background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;border-color:var(--teal);box-shadow:none}
@media(prefers-reduced-motion:reduce){ .step{animation:none} .meter i,.meter5 i,.rules li::before,.code input{transition:none} }
/* sign-up switched off: the "Request a quote" button on the closed card */
.su-alt .btn{text-decoration:none;margin-top:0}