/* Open Graph checker landing page: URL-first form, example share card, result overview */

/* URL form first, upload as a secondary link */
.tp-og .tp-og-drop.wt-drop{justify-items:stretch;gap:12px;max-width:600px;padding:22px 22px 18px;text-align:left;border-width:1.5px;background:#f7faff}
.tp-og .tp-og-drop .wt-url{max-width:none}
.tp-og .tp-og-drop .wt-url-label{font-size:1rem}
.tp-og-note{margin:0;font-size:.9rem;line-height:1.5;color:#475467}
.tp-og-note b{color:#101828}
.tp-og-alt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;margin:0;padding-top:10px;border-top:1px solid #d7e1ee}
.tp-og-upload,.tp-og-alt a{flex:0 1 auto;width:auto;margin:0;display:inline-flex;align-items:center;gap:8px;min-height:40px;color:#1250b5;font-weight:800;font-size:.93rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tp-og-upload svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tp-og-upload:hover,.tp-og-alt a:hover{color:#0b3a8a}
.tp-og-drop input[type=file]:focus-visible+.tp-og-upload,.tp-og-alt a:focus-visible{outline:3px solid rgba(23,104,229,.5);outline-offset:2px;border-radius:6px}

/* Example result */
.tp-og .tp-og-demo .mt-demo-head strong{font-size:.98rem;overflow-wrap:anywhere;color:#344054}
.tp-og-stage{padding:20px 22px;background:#eef2f7;border-bottom:1px solid #d7e1ee}
.tp-og-card-label{margin:0 0 8px;font-size:.78rem;font-weight:800;color:#475467}
.tp-og-card{overflow:hidden;border:1px solid #ccd5e1;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(9,34,70,.08)}
.tp-og-img{position:relative;display:flex;flex-direction:column;justify-content:center;gap:8px;aspect-ratio:1.91/1;padding:6% 7%;overflow:hidden;background:linear-gradient(135deg,#1d4a36 0%,#2c6a4a 58%,#3f8458 100%);color:#fff}
.tp-og-img-brand{position:absolute;top:9%;left:7%;font:800 .72rem/1 Manrope,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#d9f2df}
.tp-og-img-head{position:relative;z-index:1;max-width:66%;font:800 clamp(1.15rem,2.2vw,1.75rem)/1.08 Sora,Manrope,system-ui,sans-serif;letter-spacing:-.02em}
.tp-og-img-sub{position:relative;z-index:1;font-size:.82rem;font-weight:700;color:#d9f2df}
.tp-og-leaf{position:absolute;border-radius:0 70% 0 70%;background:#8fd19e}
.tp-og-leaf--a{right:9%;top:18%;width:26%;aspect-ratio:1;opacity:.95}
.tp-og-leaf--b{right:26%;bottom:-8%;width:18%;aspect-ratio:1;background:#c8e98a;opacity:.9;transform:rotate(90deg)}
.tp-og-leaf--c{right:-4%;bottom:10%;width:15%;aspect-ratio:1;background:#5fae74}
.tp-og-meta{display:grid;gap:4px;padding:12px 16px 14px}
.tp-og-meta strong{font-size:1rem;line-height:1.3;color:#101828}
.tp-og-meta p{margin:0;font-size:.88rem;line-height:1.45;color:#475467}
.tp-og-tags{display:grid;gap:10px;padding:18px 22px 22px}
.tp-og-tags-title{margin:4px 0 0;font-size:.78rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#3159b8}
.tp-og-tags dl{display:grid;gap:0;margin:0}
.tp-og-tags dl>div{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:4px 12px;padding:8px 0;border-bottom:1px solid #e4eaf2}
.tp-og-tags dt{font:700 .86rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:#101828}
.tp-og-tags dd{margin:0;font-size:.88rem;line-height:1.4;color:#344054;overflow-wrap:anywhere}
.tp-og-findings{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.tp-og-findings li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:10px 12px;border:1px solid #f5c26b;border-radius:10px;background:#fff8eb;font-size:.88rem;line-height:1.4;color:#101828}
.tp-og-findings b{padding:2px 8px;border-radius:999px;background:#8a4b00;color:#fff;font-size:.74rem;letter-spacing:.03em}

/* What one check gives you */
.tp-og-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;margin-top:24px}
.tp-og-box{padding:20px;border:1px solid #d7e1ee;border-radius:16px;background:#fff}
.tp-og-box h3{margin:0 0 8px;font-size:1.08rem}
.tp-og-box p{margin:0;color:#475467;line-height:1.55}
.tp-og-sub{margin:30px 0 10px;font-size:1.08rem}
.tp-og-list{display:grid;gap:6px;margin:0;padding-left:1.2em;color:#344054;line-height:1.5}
.tp-og-files{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;padding:0;list-style:none}
.tp-og-files li{padding:6px 12px;border:1px solid #d7e1ee;border-radius:999px;background:#f5f8fd;font-size:.88rem;font-weight:700;color:#101828}
.tp-og-small{margin:14px 0 0;font-size:.92rem;color:#475467}
.tp-og-links{display:flex;flex-wrap:wrap;gap:10px 22px}

@media (max-width:520px){
  .tp-og .tp-og-drop.wt-drop{padding:16px 14px 12px}
  .tp-og-stage,.tp-og-tags{padding-left:14px;padding-right:14px}
  .tp-og-tags dl>div{grid-template-columns:minmax(0,1fr)}
  .tp-og-img-head{max-width:72%;font-size:1rem}
  .tp-og-img-sub{font-size:.72rem}
  .tp-og-img-brand{font-size:.62rem}
}