/* post: a saved post drawn the way a site shows it, inside a padded frame (.win-view.pad).
     <div class="win-view pad" style="--view-h: 280px; --view-h-phone: 380px">
       <div class="post"><p class="post-text">…</p><p class="post-meta">@who · date · <code>TAG</code></p></div></div>
   A reply as the social site shows it: <div class="post social"><span class="post-avatar"></span><div>
       <p class="post-who"><b>Name</b> @handle</p><p class="post-said"><a>@link</a></p></div></div> */
.win-view.pad { padding: 44px 40px; overflow: hidden; box-sizing: border-box; }
@media (max-width: 640px) { .win-view.pad { padding: 24px 18px; } }
.post { max-width: 560px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; }
.post-text { margin: 0 0 8px; font-size: 16px; line-height: 1.55; color: var(--gray-1200); text-wrap: pretty; }
.post-meta { margin: 0; font-size: 13px; color: var(--gray-1000); }
.post-meta code { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; }
.post.social { display: grid; grid-template-columns: 40px 1fr; gap: 12px; }
.post-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gray-300); }
.post-who { margin: 0 0 4px; font-size: 14px; color: var(--gray-1000); }
.post-who b { color: var(--gray-1200); font-weight: 600; }
.post-said { margin: 0; font-size: 17px; line-height: 1.5; color: var(--gray-1200); }
.post-said a { color: #1d9bf0; }