/* meta-tag-generator: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.counter-ok { color: var(--good); }
.counter-warn { color: var(--warn); }
.meta-previews { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.serp { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px 18px; margin-bottom: 14px; font-family: Arial, sans-serif; }
.serp-site { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.serp-site strong { display: block; font-size: 14px; font-weight: 400; color: #202124; }
.serp-site small { display: block; font-size: 12px; color: #4D5156; overflow-wrap: anywhere; }
.serp-favicon { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--mist); border: 1px solid var(--line); }
.serp-title { margin: 0 0 4px; font-size: 20px; line-height: 1.3; color: #1A0DAB; overflow-wrap: anywhere; }
.serp-desc { margin: 0; font-size: 14px; line-height: 1.58; color: #4D5156; overflow-wrap: anywhere; }
.og-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.og-image.has-image span { display: none; }
.og-body { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: #F2F3F5; font-family: Arial, sans-serif; min-width: 0; }
.og-body small { text-transform: uppercase; font-size: 12px; color: #606770; }
.og-body strong { font-size: 16px; color: #1D2129; overflow-wrap: anywhere; }
.og-body span { font-size: 14px; color: #606770; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta-output { margin-top: 24px; gap: 10px; }
.og-card { margin: 0; }
.og-card figcaption { margin-bottom: 6px; color: var(--slate); font-size: 0.8rem; font-weight: 600; }