/* Video frames: a clip sits in a bordered figure with a bar naming it, and the frame
   caps its height so a portrait phone video (1080x1920) letterboxes at a readable size
   instead of towering over the writeup around it. Markup is built server-side in
   app/render.py (_frame_videos). Loaded by both public/base.html and admin/base.html, so
   the editor preview looks exactly like the published page. Rules mirror code.css's
   `.cb` frame on purpose — a clip and a script should read as the same kind of object. */

figure.vf{
  margin:.9rem 0; border:1px solid #27272a; border-radius:10px;
  background:#0a0a0b; overflow:hidden;
}
.vf .vf-bar{
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .7rem; background:#131316; border-bottom:1px solid #27272a;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.68rem; line-height:1;
}
.vf .vf-dot{ width:7px; height:7px; border-radius:999px; background:#71717a; flex:none; }
.vf .vf-kind{ color:#a1a1aa; text-transform:uppercase; letter-spacing:.09em; }
.vf .vf-file{
  color:#52525b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vf .vf-file::before{ content:"· "; }

/* The stage centres the clip and fills what the clip doesn't cover, so portrait and
   landscape both sit in a frame the width of the column. max-height (not a fixed
   aspect-ratio) means the video is never cropped and never upscaled past its own size. */
.vf .vf-stage{
  display:flex; align-items:center; justify-content:center;
  background:#08080a;
}
.vf .vf-stage video{
  display:block; width:auto; height:auto;
  max-width:100%; max-height:min(70vh, 32rem);
  background:#000;
}

/* belt and braces: a <video> that never made it into a frame still can't break the column */
.md video{ max-width:100%; }

/* light mode */
html.light figure.vf{ background:#fbfbfc; border-color:#e4e4e7; }
html.light .vf .vf-bar{ background:#f4f4f5; border-color:#e4e4e7; }
html.light .vf .vf-kind{ color:#52525b; }
html.light .vf .vf-file{ color:#a1a1aa; }
html.light .vf .vf-stage{ background:#e9e9ec; }
html.light .vf .vf-stage video{ background:#d4d4d8; }