/* ============================================================
   Shared screenshot frame + placeholder. Window-chrome look,
   themed from each post's CSS vars. A .shot-ph block is the
   "screenshot pending" state; replace it with an <img> later.
   ============================================================ */
.shot{
  margin:0;border-radius:12px;overflow:hidden;
  background:var(--canvas,#fff);
  border:1px solid var(--hairline,#e6e6e6);
  box-shadow:var(--sh3,0 8px 24px -8px rgba(0,0,0,.18));
}
.shot-bar{
  display:flex;align-items:center;height:34px;padding:0 .9rem;
  background:var(--soft2,#f3f3f3);border-bottom:1px solid var(--hairline,#e6e6e6);
}
.shot-bar i{
  width:11px;height:11px;border-radius:50%;display:block;margin-right:.45rem;
  background:var(--hairline-strong,#cfcfcf);
}
.shot-bar .u{
  margin-left:.6rem;font-family:var(--mono,ui-monospace,monospace);
  font-size:11.5px;color:var(--mute,#888);
}
.shot img{display:block;width:100%;height:auto}

/* placeholder state */
.shot-ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:300px;padding:2rem;
  font-family:var(--mono,ui-monospace,monospace);font-size:13px;line-height:1.6;
  color:var(--mute,#888);
  background:
    repeating-linear-gradient(45deg,transparent,transparent 11px,
      rgba(128,128,128,.045) 11px,rgba(128,128,128,.045) 22px),
    var(--soft,#fafafa);
}
.shot-ph::before{content:"▦";font-size:1.5rem;opacity:.45;margin-bottom:.6rem}
.shot-ph span{max-width:44ch}
.shot-ph .tag{
  display:inline-block;margin-bottom:.5rem;padding:.1rem .5rem;border-radius:5px;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--soft2,#eee);color:var(--mute,#888);
}

.shot-cap{
  font-family:var(--mono,ui-monospace,monospace);font-size:12px;
  color:var(--mute,#888);margin:.85rem 0 0;text-align:center;
}
.hero-shot{margin-top:2.4rem}
figure.in-shot{margin:1.8rem 0 0}