/* WhatsApp template cards on blog posts (tools/wa_cards.py, dist/wa-lib.js) */
.wat{border:1px solid var(--line);background:#fff;margin:28px 0;padding:22px 22px 18px;scroll-margin-top:96px;content-visibility:auto;contain-intrinsic-size:auto 820px}
.wat .wat-h{font:700 21px/1.3 var(--sans);margin:0 0 8px;letter-spacing:0;text-transform:none}
.wat-n{color:#d01a20;margin-right:4px;font-variant-numeric:tabular-nums}
.wat-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:14px;color:#555;margin:0 0 16px}
.wat-tag{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:2px}
.wat-gen{border:2px solid var(--ink)}.wat-gt{background:var(--ink);color:#fff}
.wat-mk{background:#fde8e8;color:#9b1217}.wat-ut{background:#e6f2ea;color:#14592a}
.wat-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:22px;align-items:start}
.wat-chat{background:#efeae2;background-image:radial-gradient(#00000009 1px,transparent 1px);background-size:18px 18px;padding:14px 12px 16px;border-radius:10px;font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#111b21}
.wat-msg{background:#fff;border-radius:0 9px 9px 9px;padding:4px 4px 6px;box-shadow:0 1px 1px #00000014;position:relative;overflow-wrap:anywhere}
.wat-msg::before{content:"";position:absolute;left:-8px;top:0;border-top:9px solid #fff;border-left:9px solid transparent}
.wat-body,.wat-ht,.wat-ft{padding:2px 7px}
.wat .wat-body p{margin:0 0 8px;font-size:15px;line-height:1.45}.wat .wat-body p:last-child{margin-bottom:0}
.wat .wat-body ul,.wat .wat-body ol{margin:0 0 8px;padding-left:20px}.wat .wat-body li{font-size:15px;line-height:1.45;margin:0}
.wat-var{background:#d9fdd3;border-radius:3px;padding:0 2px}.wat-var.empty{background:#ffe9a8}
.wat-ht{font-weight:700;font-size:15.5px;padding-top:5px}
.wat-hm{border-radius:6px;aspect-ratio:1.91/1;background:#dfe5e7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#3b4a54;font-size:13px;text-align:center;padding:10px;margin-bottom:4px}
.wat-hm::before{content:"";width:34px;height:34px;background:#667781;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.wat-image{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14c0 1.1.9 2 2 2h14a2 2 0 002-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E")}
.wat-video{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");background:#2a2f32;color:#e9edef}.wat-video::before{background:#fff}
.wat-hd{display:flex;align-items:center;gap:10px;background:#f0f2f5;border-radius:6px;padding:10px;margin-bottom:4px;font-size:14px}
.wat-hd::before{content:"PDF";flex:none;font:700 11px/1 var(--sans);color:#fff;background:#c9302c;padding:8px 6px;border-radius:3px}
.wat-ft{font-size:13px;color:#667781;padding-top:4px}
.wat-time{display:block;font-size:11px;color:#667781;text-align:right;padding:0 6px}
.wat-bbtns{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.wat-bb{background:#fff;border-radius:8px;color:#027eb5;font-size:15px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px;box-shadow:0 1px 1px #00000014}
.wat-bb::before{content:"";width:16px;height:16px;flex:none;background:#027eb5;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.wat-i-quick{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E")}
.wat-i-url{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3zM5 5h6v2H5v12h12v-6h2v8H3V5h2z'/%3E%3C/svg%3E")}
.wat-i-copy{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4a2 2 0 00-2 2v14h2V3h12V1zm3 4H8a2 2 0 00-2 2v14c0 1.1.9 2 2 2h11a2 2 0 002-2V7a2 2 0 00-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E")}
.wat-i-call{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 013 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E")}
.wat .wat-info p{font-size:16px;line-height:1.55;margin:0 0 10px}
.wat-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.wat-act button,.wat-act a{font:600 14px var(--sans);padding:9px 13px;border:1px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;border-radius:2px;line-height:1.2}
.wat-act button:hover,.wat-act a:hover{background:var(--ink);color:#fff}
.wat-act button:focus-visible,.wat-act a:focus-visible,.wat-ed textarea:focus,.wat-ed input:focus{outline:2px solid #d01a20;outline-offset:2px}
.wat .wat-status{font-size:14px;font-weight:600;color:#14592a;min-height:20px;margin:8px 0 0}
.wat-ed{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.wat-ed label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.wat-ed textarea{width:100%;box-sizing:border-box;font:400 16px/1.5 var(--sans);padding:10px;border:1px solid #bbb;border-radius:2px;resize:vertical}
.wat-edrow{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px}
.wat-count{font-size:13px;color:#555;font-variant-numeric:tabular-nums}.wat-count.over{color:#d01a20;font-weight:700}
.wat-edrow button{font:600 13px var(--sans);background:none;border:0;text-decoration:underline;cursor:pointer;color:var(--ink)}
.wat-vars{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:10px}
.wat-vars>span{grid-column:1/-1;font-size:13px;font-weight:700;color:#555}
.wat-vars label{font-size:13px;font-weight:600;color:#555;margin:0}
.wat-vars input{width:100%;box-sizing:border-box;font:400 16px var(--sans);padding:7px 9px;border:1px solid #bbb;border-radius:2px;margin-top:3px}
.wat-checks{list-style:none;padding:0;margin:0}.wat-checks li{font-size:14px;line-height:1.45;color:#9b1217;margin:0 0 4px}.wat-checks li.ok{color:#14592a}
@media(max-width:720px){.wat{padding:16px 14px}.wat-grid{grid-template-columns:1fr}.wat .wat-h{font-size:19px}}