/* 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;}

/* Rich-text body from the WYSIWYG admin (Trix HTML), themed to the kit. */
.prose{color:var(--ink-2);}
.prose > :first-child{margin-top:0;}
.prose > :last-child{margin-bottom:0;}
.prose h1,.prose h2,.prose h3,.prose h4{font-family:var(--font-display);color:var(--ink);letter-spacing:1px;line-height:1.2;margin:30px 0 14px;}
.prose h1{font-size:26px;} .prose h2{font-size:22px;} .prose h3{font-size:18px;} .prose h4{font-size:16px;}
.prose p,.prose div{margin:0 0 14px;line-height:1.7;}
.prose strong,.prose b{color:var(--ink);font-weight:500;}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft);}
.prose a:hover{color:var(--accent-2);border-color:var(--accent);}
.prose ul,.prose ol{margin:0 0 14px;padding-left:24px;line-height:1.7;}
.prose li{margin:4px 0;}
.prose blockquote{margin:0 0 16px;padding:6px 0 6px 18px;border-left:2px solid var(--accent-soft);color:var(--ink-2);}
.prose pre{margin:0 0 16px;background:var(--code-bg);color:var(--code-fg);padding:18px 20px;border:1px solid var(--line);
  font-family:var(--font-mono);font-size:14px;line-height:1.6;overflow:auto;}
.prose code{font-family:var(--font-mono);font-size:.92em;}
.prose hr{border:none;border-top:1px dashed var(--line-2);margin:26px 0;}
.prose figure{margin:18px 0;}
.prose figure img,.prose figure video,.prose img,.prose video{display:block;max-width:100%;height:auto;
  border:1px solid var(--line);box-shadow:var(--bevel);background:var(--deep);}
.prose figcaption{margin-top:8px;font-family:var(--font-pixel);font-size:14px;letter-spacing:1px;
  color:var(--ink-3);text-transform:uppercase;}
/* Trix attachment chrome that shouldn't show on the public page */
.prose .attachment__toolbar,.prose .attachment__progress{display:none!important;}

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