/* Free e-mail signature generator (mail-signature.php): qr-card.css layout plus the colour picker and a white
   preview that looks like an e-mail. */
.msig-tool .qrc-field-name,.msig-tool .qrc-field-card{grid-column:1/-1}
.msig-tool .qrc-field-url{grid-column:auto}
.msig-colors{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:4px 0 0;padding:0;border:0}
.msig-colors legend{float:left;margin-right:6px;font-size:13px;font-weight:700;color:var(--lp-soft)}
.msig-colors label{cursor:pointer}
.msig-colors input{position:absolute;opacity:0;pointer-events:none}
.msig-colors span{display:block;width:28px;height:28px;border-radius:999px;box-shadow:0 0 0 2px var(--lp-panel),0 0 0 3px var(--lp-line-strong)}
.msig-colors input:checked+span{box-shadow:0 0 0 2px var(--lp-panel),0 0 0 4px var(--lp-text)}
.msig-colors input:focus-visible+span{outline:2px solid var(--lp-mint);outline-offset:4px}
.msig-label{margin:0;font-size:13px;font-weight:700;color:var(--lp-soft)}
.msig-output{min-height:150px;padding:22px 20px;border:1px solid var(--lp-line);border-radius:18px;background:#fff;color:#111;overflow-x:auto}
.msig-output .qrc-empty{margin:24px auto}
.msig-steps li p{font-weight:500}.msig-steps li p b{font-weight:800}