/* Social Preview Checker.
   Each platform gets its own markup and its own block below. The X, Slack and
   Discord numbers are read off those products' own stylesheets; Facebook,
   LinkedIn and WhatsApp render behind a login, so theirs follow published
   specs and are marked as such on the page. */

.so-out{margin-top:34px}

.so-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.so-tab{padding:7px 16px;background:transparent;border:1px solid transparent;
  font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--dim)}
.so-tab:hover{color:var(--ink-2)}
.so-tab.is-on{background:#fff;border-color:var(--t-line-2);color:var(--ink)}

/* The card keeps the width the platform gives it — that width is what decides
   where the text is cut — so a narrow screen scales it down rather than
   cropping it. */
.so-stage{display:flex;justify-content:center;margin-top:14px;padding:30px 20px;overflow:hidden;
  background:var(--t-soft);border:1px solid var(--t-line)}
.so-fit{flex:none}
.so-card{width:max-content;transform-origin:top left}
@media (max-width:760px){.so-stage{padding:18px 12px}}

.so-shot{display:block;position:relative;overflow:hidden;background:#E4E6EB}
.so-shot img{display:block;width:100%;height:100%;object-fit:cover}


/* ---- X ---------------------------------------------------------------
   Measured in X's own embed widget: 1px #CFD9DE frame, 16px radius, 12px
   body padding, every line 15px/20px, title #0F1419 on #536471 supporting
   text, image at 1.91:1. An organic post prints the headline over the
   picture instead of under it. */

.so-x{width:504px;border:1px solid #CFD9DE;border-radius:16px;overflow:hidden;background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.so-x .so-shot{aspect-ratio:1.91/1}
.so-x-overlay{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);
  padding:4px 8px;border-radius:4px;background:rgba(0,0,0,.72);
  color:#fff;font-size:14px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-x-body{padding:12px;font-size:15px;line-height:20px}
.so-x-domain{display:block;color:#536471}
.so-x-title{display:block;color:#0F1419}
.so-x-desc{display:block;color:#536471}
.so-x--summary{display:flex;align-items:stretch}
.so-x--summary .so-shot{flex:none;width:129px;aspect-ratio:1/1;border-right:1px solid #CFD9DE}
.so-x--summary .so-x-body{flex:1;min-width:0;align-self:center}

/* ---- Facebook --------------------------------------------------------
   Not measurable: the feed and the sharing debugger are both behind a
   login. Image ratio and minimums come from Facebook's published image
   guidelines; the strip below it follows their documented card. */

.so-fb{width:500px;border:1px solid #DDDFE2;background:#F2F3F5;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.so-fb .so-shot{aspect-ratio:1.91/1}
.so-fb-body{padding:10px 12px}
.so-fb-domain{display:block;font-size:13px;line-height:16px;color:#65676B;text-transform:uppercase}
.so-fb-title{display:block;margin-top:3px;font-size:17px;line-height:20px;font-weight:600;color:#050505}
.so-fb-desc{display:block;margin-top:3px;font-size:14px;line-height:20px;color:#65676B}

/* ---- LinkedIn --------------------------------------------------------
   Not measurable behind the feed login. LinkedIn's card shows the picture,
   the headline and the domain; the description is not on it. */

.so-li{width:504px;border:1px solid #E0E0E0;background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.so-li .so-shot{aspect-ratio:1.91/1}
.so-li-body{padding:8px 12px 10px;background:#F9FAFB}
.so-li-title{display:block;font-size:16px;line-height:20px;font-weight:600;color:rgba(0,0,0,.9)}
.so-li-domain{display:block;margin-top:2px;font-size:12px;line-height:16px;color:rgba(0,0,0,.6)}

/* ---- WhatsApp --------------------------------------------------------
   Not measurable: web.whatsapp.com needs a paired phone and ships no
   readable class names. Drawn as an outgoing bubble. */

.so-wa{width:328px;padding:3px;border-radius:8px;background:#D9FDD3;
  box-shadow:0 1px .5px rgba(11,20,26,.13);
  font-family:"Helvetica Neue",Helvetica,-apple-system,Roboto,Arial,sans-serif}
.so-wa-prev{border-radius:6px;overflow:hidden;background:#D1F4CC}
.so-wa .so-shot{background:#C5E7C0}
.so-wa-body{padding:8px 10px}
.so-wa-title{display:block;font-size:14px;line-height:19px;color:#111B21}
.so-wa-desc{display:block;margin-top:2px;font-size:13px;line-height:17px;color:#667781}
.so-wa-domain{display:block;margin-top:4px;font-size:13px;line-height:17px;color:#667781}
.so-wa-link{display:block;padding:6px 8px 4px;font-size:14.2px;line-height:19px;color:#027EB5;
  word-break:break-all}

/* ---- Slack -----------------------------------------------------------
   Measured in Slack's own stylesheet: the unfurl is a rounded 12px card
   with a 1px #5e5d6021 border, not the old coloured rail. Title is one
   line, clipped; body text is 13px. */

.so-slack{width:520px;padding:12px;border:1px solid #5e5d6021;border-radius:12px;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.047);
  font-family:Lato,"Slack-Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:22px}
.so-slack-author{display:flex;align-items:center;gap:4px;font-size:13px;line-height:18px;
  font-weight:700;color:#5e5d60}
.so-slack-icon{flex:none;width:16px;height:16px;border-radius:4px;object-fit:contain}
.so-slack-title{display:block;margin-top:2px;font-size:15px;line-height:22px;font-weight:700;color:#1264A3}
.so-slack-text{display:block;margin-top:2px;font-size:13px;line-height:16px;color:#454447}
.so-slack .so-shot{margin-top:8px;border-radius:4px;
  outline:1px solid #5e5d6021;outline-offset:-1px}

/* ---- Discord ---------------------------------------------------------
   Measured in Discord's own stylesheet and design tokens: 4px radius, a 4px
   left rail, 2px/16px/16px/12px padding, 8px between blocks, 16px above the
   picture. */

.so-dc{width:432px;border:1px solid hsl(240 4% 60.784% / .1216);
  border-left:4px solid hsl(240 4% 60.784% / .2);border-radius:4px;
  background:hsl(240 6.494% 15.098%);
  font-family:"gg sans","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif}
.so-dc-grid{padding:2px 16px 16px 12px}
.so-dc-provider{display:block;margin-top:8px;font-size:14px;line-height:18px;
  color:hsl(232.5 3.96% 60.392%)}
.so-dc-title{display:block;margin-top:8px;font-size:16px;line-height:22px;font-weight:600;
  color:hsl(212.795 82.564% 61.765%)}
.so-dc-desc{display:block;margin-top:8px;font-size:14px;line-height:18px;font-weight:500;
  color:hsl(240 6.667% 94.118%)}
.so-dc .so-shot{margin-top:16px;border-radius:4px;background:hsl(240 6% 10%)}

/* ---- what the card was built from ---- */

.so-sources{margin-top:14px;text-align:center;font-size:13px;line-height:1.7;color:var(--dim)}
.so-sources b{font-weight:600;color:var(--ink-2)}
.so-sources .is-guess{color:var(--score-mid-ink);font-weight:600}
.so-note{max-width:64ch;margin:8px auto 0;text-align:center;font-size:13px;line-height:1.65;color:var(--dim)}
.so-meta{margin-top:16px;font-size:13px;line-height:1.65;color:var(--dim);text-align:center}

/* ---- utilities, last so a platform's own display rule cannot outrank them ---- */

.so-clamp-1,.so-clamp-2,.so-clamp-3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.so-clamp-1{-webkit-line-clamp:1}
.so-clamp-2{-webkit-line-clamp:2}
.so-clamp-3{-webkit-line-clamp:3}
.so-nowrap{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.is-empty{font-style:italic;opacity:.62}