/* The WhatsApp link tool. Builds on the tokens and header in hub.css. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}
.wa{padding-bottom:20px}

.wa-layout{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:24px;align-items:start}
.wa-panel{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px;margin:0 0 20px}
.wa-panel h2,.wa-guide h2{font-size:19px;font-weight:750;letter-spacing:-.02em;color:var(--navy);margin-bottom:16px}
.wa-form{position:sticky;top:16px}
.wa-empty{color:var(--muted);font-size:16px;line-height:1.6;border-style:dashed;background:transparent}

.wa-field{margin-bottom:20px}
.wa-field label,.wa fieldset legend{display:block;font-size:14px;font-weight:650;color:var(--navy);margin-bottom:6px;padding:0}
.wa-label-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.wa-optional{font-weight:500;color:var(--muted)}
.wa-count{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.wa input:not([type=radio]):not([type=checkbox]):not([type=color]):not([type=file]),.wa select,.wa textarea{width:100%;font:inherit;font-size:16px;color:var(--navy);background:var(--white);border:1px solid #b9c4d2;border-radius:9px;padding:11px 12px}
.wa textarea{resize:vertical;line-height:1.5;display:block}
.wa input:focus-visible,.wa select:focus-visible,.wa textarea:focus-visible{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--navy)}
.wa-number{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:8px}
.wa-help{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:7px}
.wa-error{font-size:14px;font-weight:600;color:#a4262c;margin-top:7px}
.wa-warning{font-size:13.5px;line-height:1.5;color:#7a4b00;background:#fff6dc;border-radius:8px;padding:9px 11px;margin-top:10px}
.wa-starters{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.wa-starters button{font:inherit;font-size:13.5px;font-weight:600;color:var(--green-dark);background:#eaf4ee;border:0;border-radius:20px;padding:7px 12px;cursor:pointer}
.wa-starters button:hover{background:#d9ecdf}

.wa-text-button,.wa-text-link{font:inherit;font-size:14.5px;font-weight:650;color:var(--green);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.wa-starters button:focus-visible,.wa-text-button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.wa-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.wa-actions{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px}
.wa-chat{margin-top:20px;background:#efe7dd;border-radius:12px;padding:14px 16px 18px}
.wa-chat-to{font-size:13px;font-weight:650;color:#54656f;margin-bottom:10px}
.wa-chat-bubble{background:#d9fdd3;color:#111b21;font-size:15px;line-height:1.45;border-radius:10px 0 10px 10px;padding:8px 11px;margin-left:auto;width:fit-content;max-width:88%;white-space:pre-wrap;overflow-wrap:anywhere}
.wa-chat-none{font-size:14px;color:#54656f}

.wa-code{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:26px;align-items:start}
.wa-qr{border:1px solid var(--line);border-radius:10px;overflow:hidden;line-height:0}
.wa-qr svg,.sign-qr svg{display:block;width:100%;height:auto}
.wa fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
.wa-colour{margin-bottom:18px}
.wa-colour>label{display:block;font-size:14px;font-weight:650;color:var(--navy);margin-bottom:6px}
.wa-colour-row{display:flex;align-items:center;gap:12px}
.wa-colour-row .wa-help{margin:0;font-variant-numeric:tabular-nums}
.wa-colour input[type=color]{width:64px;height:40px;padding:3px;border:1px solid #b9c4d2;border-radius:9px;background:var(--white);cursor:pointer}
.wa-logo-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.wa-logo-row .wa-help{margin:0}
.wa-downloads{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.wa .tool-tiles{max-width:330px}

.wa-sign-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.wa-check{grid-column:1/-1;display:flex;align-items:center;gap:9px;font-size:14.5px;margin-bottom:18px;cursor:pointer}
.wa-check input{width:18px;height:18px;accent-color:var(--green)}
.wa-sign-stage{background:#e6eaf0;border-radius:12px;padding:22px;display:flex;justify-content:center;margin-bottom:16px}
/* The sign is laid out in container units so the preview and the printed page are the same drawing at different sizes. */
.wa-sign{container-type:inline-size;width:min(100%,330px);aspect-ratio:210/297;background:var(--white);box-shadow:0 6px 22px #0b254526;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7%}
.wa-sign p{margin:0;color:#0b2545}
.sign-business{font-size:5.4cqw;font-weight:700;letter-spacing:-.01em;min-height:1em;margin-bottom:3cqw!important;overflow-wrap:anywhere}
.sign-headline{font-size:10cqw;font-weight:800;letter-spacing:-.03em;line-height:1.05;text-wrap:balance;overflow-wrap:anywhere}
.sign-qr{width:68%;margin:6cqw 0 4cqw}
.sign-how{font-size:4.6cqw;font-weight:600}
.sign-number{font-size:6cqw;font-weight:800;letter-spacing:-.01em;margin-top:2.5cqw!important;font-variant-numeric:tabular-nums}

.wa-demo{display:inline-block;background:#075e54;color:#fff;font-size:16px;font-weight:600;padding:12px 20px;border-radius:8px;text-decoration:none}
.wa-snippet{font-family:Consolas,"Courier New",monospace!important;font-size:13px!important;line-height:1.5;margin:14px 0 10px;word-break:break-all}

.wa-guide{max-width:720px;margin-top:28px}
.wa-guide ul{margin:0;padding-left:20px}
.wa-guide li{font-size:15.5px;line-height:1.65;margin-bottom:10px}
.wa-guide strong{color:var(--navy)}

@media (max-width:900px){
  .wa-layout{grid-template-columns:minmax(0,1fr)}
  .wa-form{position:static}
}
@media (max-width:560px){
  .wa-panel{padding:18px 16px}
  .wa-code{grid-template-columns:minmax(0,1fr)}
  .wa-qr{max-width:260px;margin:0 auto}
  .wa-link-row,.wa-number,.wa-sign-options{grid-template-columns:minmax(0,1fr)}
  .wa-sign-stage{padding:14px}
  .wa-downloads .wa-button{flex:1 1 auto;text-align:center}
}

/* Printing shows the sign and nothing else, filling the chosen paper size. */
@page a4{size:A4;margin:0}
@page a5{size:A5;margin:0}
@page a6{size:A6;margin:0}
@media print{
  html,body{background:#fff}
  body>*:not(main),.wa>*:not(.wa-layout),.wa-layout>*:not(.wa-results),.wa-results>*:not(#wa-ready),#wa-ready>*:not([aria-labelledby=wa-sign-title]),[aria-labelledby=wa-sign-title]>*:not(.wa-sign-stage){display:none!important}
  main,.wa,.wa-layout,.wa-results,.wa-panel,.wa-sign-stage{display:block;margin:0;padding:0;border:0;max-width:none;background:none}
  .wa-sign{box-shadow:none;width:100vw;height:100vh;aspect-ratio:auto;break-inside:avoid}
  .wa-sign.size-a4{page:a4}.wa-sign.size-a5{page:a5}.wa-sign.size-a6{page:a6}
}