/* TODI.WTF Studio — additions for dynamic content the Twilight kit doesn't
   ship as components. Everything here is built from the design tokens, so it
   adapts to Twilight (dark) and Slate (light) automatically. Loaded AFTER
   styles.css; the vendored kit files stay byte-identical for /design-sync. */

/* Bulleted list inside a .surface */
.bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
.bullets li{position:relative;padding-left:22px;color:var(--ink-2);font-size:var(--fs-body);line-height:1.55;}
.bullets li::before{content:"\25B8";position:absolute;left:0;top:0;color:var(--accent);font-family:var(--font-pixel);}

/* Key/value spec list inside a .surface (e.g. a tech stack) */
.kv{list-style:none;padding:0;margin:0;}
.kv li{display:flex;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);}
.kv li:last-child{border-bottom:none;padding-bottom:0;}
.kv .k{font-family:var(--font-pixel);font-size:15px;letter-spacing:1px;color:var(--accent);text-transform:uppercase;flex:0 0 130px;}
.kv .v{color:var(--ink-2);font-size:var(--fs-body);line-height:1.5;}
@media(max-width:680px){.kv li{flex-direction:column;gap:3px;}.kv .k{flex-basis:auto;}}

/* Real uploaded media (screenshots + video), framed like a Twilight .shot */
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:680px){.media-grid{grid-template-columns:1fr;}}
.figure{position:relative;border:1px solid var(--line);box-shadow:var(--bevel);overflow:hidden;background:var(--deep);line-height:0;}
.figure img,.figure video{display:block;width:100%;height:auto;}
.figure .scan{position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 2px,transparent 2px 4px);}
.figure .cap{position:absolute;left:12px;bottom:11px;z-index:3;font-family:var(--font-pixel);font-size:15px;
  letter-spacing:1px;color:#eef1f8;text-transform:uppercase;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.85);}
/* caption rendered under a video (so it never sits over the controls) */
.vidcap{font-family:var(--font-pixel);font-size:15px;letter-spacing:1px;color:var(--ink-3);text-transform:uppercase;margin-top:10px;line-height:1.3;}

/* Draft preview banner (only shown when viewing an unpublished page via token) */
.draftbar{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:center;
  background:var(--accent);color:#1a1407;font-family:var(--font-pixel);font-size:16px;letter-spacing:1px;
  padding:9px 16px;text-transform:uppercase;border-bottom:1px solid #1a1407;text-align:center;}
.draftbar b{font-weight:normal;color:#1a1407;}

/* honor reduced-motion (kit uses transitions throughout) */
@media(prefers-reduced-motion:reduce){*{transition:none!important;}}