/* ============================================================================
   video.css — deep video-production workbench (rides on shell.css + redesign.css
   + engine.css). Profile cards (Seedance/Veo/Omni) · clip rail + timeline ·
   shots · asset library · composite builder · per-clip model-tuned prompt.
   Brand tokens from shell.css; violet (--violet) = the generate/AI surface.
   ========================================================================== */

/* ── the 3 generation profiles ── */
.profilegrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
@media (max-width:880px){ .profilegrid { grid-template-columns:1fr; } }
.profilecard { position:relative; border:1px solid var(--line-strong); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-sm); padding:16px 16px 14px; cursor:pointer; transition:border-color .14s, box-shadow .14s, background .14s; }
.profilecard:hover { border-color:#d5d2ec; box-shadow:var(--sh); }
.profilecard.sel { border-color:var(--violet); background:var(--violet-bg); box-shadow:0 0 0 1px var(--violet); }
.profilecard .pc-rec { position:absolute; top:-9px; left:14px; display:inline-flex; align-items:center; gap:5px; font:700 9.5px/1 var(--display); letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--violet); padding:4px 9px; border-radius:999px; box-shadow:var(--sh-sm); }
.profilecard .pc-rec .ic { width:11px; height:11px; }
.profilecard .pc-h { display:flex; align-items:center; gap:10px; }
.profilecard .pc-logo { width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:16px; }
.profilecard.seedance .pc-logo { background:rgba(255,45,120,.10); color:var(--acc-700); }
.profilecard.veo .pc-logo { background:rgba(43,45,124,.10); color:var(--primary); }
.profilecard.omni .pc-logo { background:var(--violet-soft); color:var(--violet); }
.profilecard .pc-name { font:800 14.5px/1.1 var(--display); color:var(--ink); }
.profilecard .pc-plat { font-size:11px; color:var(--muted); margin-top:2px; }
.profilecard .pc-check { position:absolute; top:14px; right:14px; color:var(--violet); opacity:0; }
.profilecard .pc-check .ic { width:16px; height:16px; }
.profilecard.sel .pc-check { opacity:1; }
.pc-meta { margin-top:13px; display:flex; flex-direction:column; gap:7px; }
.pc-meta .m { display:flex; align-items:flex-start; gap:8px; font-size:11.5px; color:var(--ink-2); line-height:1.4; }
.pc-meta .m .k { color:var(--muted-2); font-weight:700; min-width:70px; flex:none; }
.pc-best { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; font-size:11px; color:var(--muted); line-height:1.5; }
.pc-best b { color:var(--ink-2); }

/* selected-profile summary bar (shown on workbench/clip/handoff) */
.profilebar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid var(--violet-soft); border-radius:var(--r-lg); background:var(--violet-bg); padding:10px 14px; margin-top:14px; }
.profilebar .pb-ic { width:30px; height:30px; flex:none; border-radius:8px; display:grid; place-items:center; background:#fff; color:var(--violet); box-shadow:var(--sh-sm); }
.profilebar .pb-name { font:800 13.5px/1 var(--display); color:var(--ink); }
.profilebar .pb-chip { display:inline-flex; align-items:center; gap:5px; font:600 11px/1 var(--display); color:var(--ink-2); background:#fff; border:1px solid var(--violet-soft); border-radius:999px; padding:5px 10px; }
.profilebar .pb-chip .ic { width:11px; height:11px; color:var(--violet); }
.profilebar .pb-sw { margin-left:auto; }

/* ── workbench two-column ── */
.wbsplit { display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start; margin-top:14px; }
@media (max-width:940px){ .wbsplit { grid-template-columns:1fr; } }
.wbsplit .wb-rail { position:sticky; top:72px; }
@media (max-width:940px){ .wbsplit .wb-rail { position:static; } }
.wb-railhead { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.wb-railhead .t { font:700 11px/1 var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

/* clip timeline (proportional bar) */
.cliptimeline { display:flex; gap:3px; margin:8px 0 4px; }
.cliptimeline .ct { height:32px; border-radius:6px; display:grid; place-items:center; font:700 10px/1 var(--display); color:#fff; min-width:26px; cursor:pointer; opacity:.85; transition:opacity .12s; }
.cliptimeline .ct:hover { opacity:1; }
.cliptimeline .ct.sel { outline:2px solid var(--violet); outline-offset:1px; opacity:1; }
.cliptimeline .ct.c1 { background:var(--primary); } .cliptimeline .ct.c2 { background:#3a3c99; }
.cliptimeline .ct.c3 { background:var(--violet); } .cliptimeline .ct.c4 { background:#c01a5b; }
.cliptimeline .ct.c5 { background:var(--coral); }
.tl-total { font-size:11px; color:var(--muted); }

/* clip rail */
.cliprail { display:flex; flex-direction:column; gap:8px; }
.clipcard { border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--sh-sm); padding:11px 12px; cursor:pointer; transition:border-color .14s, box-shadow .14s; }
.clipcard:hover { border-color:#d5d2ec; }
.clipcard.sel { border-color:var(--violet); box-shadow:0 0 0 1px var(--violet); }
.clipcard .cc-top { display:flex; align-items:center; gap:8px; }
.clipcard .cc-n { width:24px; height:24px; flex:none; border-radius:7px; background:var(--surface-2); display:grid; place-items:center; font:800 11px/1 var(--display); color:var(--muted); }
.clipcard.sel .cc-n { background:var(--violet); color:#fff; }
.clipcard .cc-dur { margin-left:auto; font:700 11px/1 var(--display); color:var(--violet); }
.clipcard .cc-beat { font:700 12.5px/1.3 var(--display); color:var(--ink); margin-top:8px; }
.clipcard .cc-foot { display:flex; align-items:center; gap:7px; margin-top:9px; flex-wrap:wrap; }
.shotmode { display:inline-flex; align-items:center; gap:4px; font:700 9.5px/1 var(--display); letter-spacing:.03em; text-transform:uppercase; padding:3px 7px; border-radius:5px; }
.shotmode .ic { width:10px; height:10px; }
.shotmode.single { background:var(--surface-2); color:var(--muted); }
.shotmode.multi { background:var(--violet-soft); color:var(--violet); }
.cc-assetdot { display:inline-flex; align-items:center; gap:5px; font:600 10.5px/1 var(--display); color:var(--muted); }
.cc-assetdot .d { width:7px; height:7px; border-radius:50%; }
.cc-assetdot .d.ok { background:var(--success); } .cc-assetdot .d.part { background:var(--amber); } .cc-assetdot .d.no { background:var(--line-strong); }
.clip-add { border:1.5px dashed var(--line-strong); border-radius:12px; background:transparent; color:var(--muted); padding:10px; display:flex; align-items:center; justify-content:center; gap:7px; font:600 12px/1 var(--display); cursor:pointer; }
.clip-add:hover { border-color:var(--violet); color:var(--violet); }

/* ── shots within a clip ── */
.shotlist { display:flex; flex-direction:column; gap:12px; }
.shotrow { border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--sh-sm); padding:14px 15px; }
.shotrow.multi { border-left:3px solid var(--violet); }
.shotrow .sr-h { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.shotrow .sr-n { width:26px; height:26px; flex:none; border-radius:7px; background:var(--violet-soft); color:var(--violet); display:grid; place-items:center; font:800 11px/1 var(--display); }
.shotrow .sr-t { font:700 13px/1.3 var(--display); color:var(--ink); }
.shotrow .sr-desc { font-size:12px; color:var(--ink-2); line-height:1.5; margin-top:8px; }

/* ── asset library ── */
.assetlib { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px; margin-top:10px; }
.assetcard { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--sh-sm); transition:box-shadow .14s, transform .12s; }
.assetcard:hover { box-shadow:var(--sh-md); transform:translateY(-1px); }
.assetcard .ac-thumb { aspect-ratio:1/1; position:relative; }
.assetcard .ac-body { padding:9px 10px 10px; }
.assetcard .ac-name { font:700 12px/1.2 var(--display); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.assetcard .ac-meta { display:flex; align-items:center; gap:6px; margin-top:6px; }
.atype { font:700 9px/1 var(--display); letter-spacing:.03em; text-transform:uppercase; padding:3px 6px; border-radius:4px; }
.atype.character { background:rgba(255,45,120,.10); color:var(--acc-700); }
.atype.location { background:rgba(43,45,124,.10); color:var(--primary); }
.atype.product { background:var(--violet-soft); color:var(--violet); }
.atype.logo { background:var(--surface-2); color:var(--muted); }
.assetcard .ac-reuse { font:600 10px/1 var(--display); color:var(--muted-2); margin-left:auto; }
.assetcard.add { border-style:dashed; display:flex; align-items:center; justify-content:center; min-height:120px; cursor:pointer; color:var(--muted); flex-direction:column; gap:7px; font:600 12px/1.2 var(--display); }
.assetcard.add:hover { border-color:var(--violet); color:var(--violet); }
.ac-status { position:absolute; top:7px; left:7px; }

/* sourcing modes for an asset (have / generate / prompt / upload) */
.sourcemodes { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:10px; }
@media (max-width:560px){ .sourcemodes { grid-template-columns:1fr; } }
.srcmode { border:1px solid var(--line-strong); border-radius:11px; background:var(--surface); padding:11px 12px; cursor:pointer; transition:border-color .14s, background .14s; }
.srcmode:hover { border-color:#d5d2ec; }
.srcmode.on { border-color:var(--violet); background:var(--violet-bg); }
.srcmode .sm-h { display:flex; align-items:center; gap:8px; }
.srcmode .sm-ic { width:28px; height:28px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--violet-soft); color:var(--violet); }
.srcmode .sm-t { font:700 12.5px/1.1 var(--display); color:var(--ink); }
.srcmode .sm-d { font-size:11px; color:var(--muted); margin-top:6px; line-height:1.45; }

/* composite builder (character + scene → frame) */
.composite { display:flex; align-items:stretch; gap:10px; margin-top:8px; flex-wrap:wrap; }
.comp-slot { flex:1; min-width:120px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--sh-sm); }
.comp-slot .cs-lab { padding:7px 10px; font:700 10px/1 var(--display); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); }
.comp-slot .cs-thumb { aspect-ratio:1/1; }
.comp-op { display:grid; place-items:center; color:var(--muted-2); font-size:18px; flex:none; align-self:center; }
.comp-slot.result { border-color:var(--violet); box-shadow:0 0 0 1px var(--violet); }
.comp-slot.result .cs-lab { color:var(--violet); border-color:var(--violet-soft); }

/* per-clip model-tuned prompt block (reuses .briefblock from redesign.css) */
.promptmeta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:10px 0 2px; }
.pm-part { font:600 11px/1 var(--display); color:var(--violet); background:var(--violet-bg); border:1px solid var(--violet-soft); border-radius:999px; padding:4px 9px; }

/* generic eyebrow used across video pages */
.veyebrow { font:700 11px/1 var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:18px 0 8px; display:flex; align-items:center; gap:8px; }
.veyebrow::before { content:''; width:3px; height:12px; border-radius:2px; background:var(--violet); }
.veyebrow .ct-r { margin-left:auto; text-transform:none; letter-spacing:0; font-weight:600; color:var(--muted-2); }