/* AI Video Prompt Templates: template picker, option chips, negative prompt. Builds on ../studio.css. */
.vd-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vd-view { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.vd-pic { aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--bg-card-subtle); }
.vd-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-view figcaption { font-size: 12.5px; color: var(--ink-muted); }
.vd-wrap .st-chip { --st-c: var(--accent); --st-on: var(--on-accent); }
.vd-wrap .st-chip[hidden] { display: none; }
.vd-tpls { display: grid; gap: 8px; }
.vd-tpls .vd-tpl { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; padding: 10px 14px; border-radius: 14px; text-align: left; }
.vd-tpl b { font: 700 15px/1.25 var(--font-display); }
.vd-tpl small { font-size: 13px; font-weight: 500; line-height: 1.35; opacity: 0.8; }
.vd-row { display: flex; flex-wrap: wrap; gap: 16px; }
.vd-wrap .st-out pre { font-family: var(--font-mono); font-size: 14px; }
.vd-wrap .st-out pre.vd-neg { background: var(--cat-photo); color: var(--ink-primary); }
.vd-neg[hidden] { display: none; }
/* Templates / Cinematic switch (Cinematic mode itself is styled by ../optics.css, loaded when it opens) */
.cine-switch { display: inline-grid; grid-auto-flow: column; gap: 4px; margin: 0 0 16px; padding: 4px; border-radius: 14px; background: var(--bg-card-subtle); border: 1px solid var(--border-line); }
.cine-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-secondary); font: 700 14.5px/1.2 var(--font-body); cursor: pointer; }
.cine-btn small { font-weight: 500; font-size: 12.5px; opacity: 0.8; }
.cine-btn[aria-pressed="true"] { background: var(--bg-card); color: var(--ink-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 0 0 1px var(--border-line); }
.vd-wrap .st-top[hidden], .vd-wrap .st-out[hidden], .cine-root[hidden] { display: none; }
.cine-root.is-loading { min-height: 420px; }
@media (max-width: 400px) { .cine-btn small { display: none; } }
/* Links inside the tips list sit in body text, so they need more than colour (axe link-in-text-block) */
.seo-section ol li a { text-decoration: underline; text-underline-offset: 2px; }