/* Wideframe brand v2: product previews built from the real app UI
   (calui, Flexoki Dark, Roboto Mono, square corners). Pair with /brand.css.
   Load Roboto Mono from Google Fonts on pages that use this. */
:root{--a-bg:#100F0F; --a-muted:#1C1B1A; --a-hover:#282726; --a-bubble:#1f1d1c; --a-border:#282726; --a-fg:#CECDC3; --a-fg2:#878580; --a-teal:#3AA99F; --a-teal2:#24837B;
  --a-mono:"Roboto Mono",ui-monospace,Menlo,monospace}

/* use-case stages: back window + front chat window */
.wf-stage{height:620px}
@media (max-width:900px){.wf-stage{height:420px}}
.wf-stage .win.back{position:absolute;left:30%;top:9%;width:78%;height:86%}
.wf-stage .win.front{position:absolute;left:5%;top:17%;width:44%;height:76%;box-shadow:0 18px 50px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.18)}
.wf-stage.soft{height:520px}
.wf-stage .win.solo{position:absolute;left:50%;top:8%;transform:translateX(-50%);width:80%;height:84%;box-shadow:0 18px 50px rgba(0,0,0,.22)}
/* ───────────── app window (Flexoki Dark) ───────────── */
.win{display:flex;flex-direction:column;background:var(--a-bg);border:1px solid #000;border-radius:9px;overflow:hidden;color:var(--a-fg);font:400 10.5px/1.55 var(--a-mono)}
.win-bar{height:24px;flex:none;display:flex;align-items:center;gap:6px;padding:0 10px;background:var(--a-muted);border-bottom:1px solid var(--a-border)}
.tl{width:9px;height:9px;border-radius:50%;background:#3a3836}
.win-ico{width:13px;height:10px;border:1px solid var(--a-fg2);border-radius:2px;margin-left:8px;opacity:.7}
.win-body{flex:1;min-height:0;display:flex}
.hero-win{width:100%;height:100%;box-shadow:0 30px 80px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.12)}
.lnk{color:var(--a-teal);text-decoration:underline;text-underline-offset:2px}

/* session sidebar */
.sbar{width:200px;flex:none;border-right:1px solid var(--a-border);padding:10px 8px;display:flex;flex-direction:column;gap:2px;font-family:-apple-system,system-ui,sans-serif;font-size:11px}
.sbtn{padding:5px 8px;color:var(--a-fg)}
.sh{font-size:10px;color:var(--a-fg2);padding:12px 8px 4px}
.srow{position:relative;padding:7px 18px 7px 8px;border-radius:4px}
.srow.on{background:rgba(36,131,123,.12)}
.s1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--a-fg)}
.s2{font-size:10px;color:var(--a-fg2)}
.dot{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:transparent}
.dot.live{background:var(--a-teal2)}

/* chat */
.chat{flex:1;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--a-border)}
.thread{flex:1;min-height:0;overflow:hidden;padding-bottom:10px}
.ub{background:var(--a-bubble);padding:10px 16px;margin-top:14px;line-height:1.5}
.tr{padding:0 16px;margin-top:8px;opacity:.5;color:var(--a-fg)}
.tr .g{display:inline-block;width:12px}
.chev{opacity:.7}
.am{padding:0 16px;margin-top:10px;line-height:1.6}
.ah{font-weight:700;margin-top:14px}
ul.am{margin:6px 0 0;padding-left:30px;list-style:square}
ul.am li{margin-top:2px}
ul.am b{font-weight:700}
.st{padding:0 16px;margin-top:12px;color:var(--a-fg2);opacity:.75}
.composer{flex:none;background:var(--a-muted);box-shadow:0 -1px 0 var(--a-border)}
.ci{padding:10px 14px 18px;color:var(--a-fg2)}
.cf{display:flex;gap:12px;align-items:center;padding:6px 12px;border-top:1px solid var(--a-border);font-size:9.5px;color:var(--a-fg);white-space:nowrap;overflow:hidden}
.front .cf>span:nth-child(4),.solo .cf>span:nth-child(4){display:none}
.cf .ws{color:var(--a-fg)}
.sp{flex:1}
.send{opacity:.8}

/* dock + sequence */
.dock{flex:1;min-width:0;display:flex;flex-direction:column;border-left:2px solid #000}
.tabs{height:24px;flex:none;display:flex;background:var(--a-muted);border-bottom:1px solid var(--a-border);font-family:-apple-system,system-ui,sans-serif;font-size:10.5px}
.tab{padding:0 14px;display:flex;align-items:center;gap:10px;color:var(--a-fg2)}
.tab.on{background:var(--a-bg);color:var(--a-fg)}
.tab em{font-style:normal;opacity:.6}
.seq{flex:1;min-height:0;display:flex;flex-direction:column;font-family:-apple-system,system-ui,sans-serif}
.mons{flex:1.5;min-height:0;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--a-border)}
.mon{position:relative;display:flex;flex-direction:column;background:#141313}
.mon+.mon{border-left:1px solid var(--a-border);background:#000}
.mon-l{position:absolute;left:8px;top:6px;font-size:9.5px;color:var(--a-fg);z-index:2}
.mon-empty{flex:1;display:grid;place-items:center;color:var(--a-fg2);font-size:10.5px}
.mon-frame{flex:1;margin:22px 0 0}
.mon-f{height:20px;display:flex;align-items:center;gap:10px;padding:0 8px;background:var(--a-bg);font-size:9px;color:var(--a-fg2)}
.mon-f .on{color:var(--a-fg)}
.tline{position:relative;flex:1;min-height:0;font-size:9px;color:var(--a-fg2);background:#121111}
.tl-top{display:flex;justify-content:flex-end;gap:10px;padding:3px 8px;color:var(--a-fg)}
.ruler,.trk,.mlane{display:flex;height:22px;align-items:center}
.trk{height:28px;border-bottom:1px solid #1b1a19}
.tl-lab{width:44px;flex:none;padding-left:8px;color:var(--a-fg)}
.rl,.lane{position:relative;flex:1;height:100%}
.rl span{position:absolute;top:4px;transform:translateX(2px)}
.rl em{position:absolute;bottom:0;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #e5484d;transform:translateX(-4px)}
.mlane{height:14px}
.mlane i{position:absolute;top:3px;width:7px;height:7px;background:#00c853;transform:rotate(45deg) translateX(-3px)}
.lane b{position:absolute;top:3px;bottom:3px;border-radius:2px;font-weight:400;font-size:8.5px;line-height:1;padding:3px 4px;overflow:hidden;white-space:nowrap;color:rgba(255,255,255,.9)}
.lane b.v{background:#1f7a46;border:1px solid #2fb067}
.lane b.a{background:#1e3f74;border:1px solid #3b82f6;background-image:repeating-linear-gradient(90deg,rgba(147,197,253,.35) 0 1px,transparent 1px 3px);background-size:100% 40%;background-repeat:repeat-x;background-position:0 70%}
.phl{position:absolute;top:2px;bottom:0;width:1px;background:#e5484d}

/* explorer */
.explorer{flex:1;min-width:0;display:flex;font-family:-apple-system,system-ui,sans-serif;font-size:10.5px}
.tree{width:130px;flex:none;border-right:1px solid var(--a-border);padding:10px 8px}
.fo{padding:4px 6px;color:var(--a-fg2);border-radius:3px}
.fo.on{color:var(--a-fg);background:var(--a-muted)}
.grid-wrap{flex:1;min-width:0;padding:10px 12px;overflow:hidden}
.crumbs{color:var(--a-fg2);margin-bottom:10px}
.cgrid{display:grid;gap:10px}
.card{border:1px solid var(--a-border);overflow:hidden}
.th{position:relative;aspect-ratio:16/9}
.card.vert .th{aspect-ratio:9/16}
.dur{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.67);color:#fff;font-size:8.5px;padding:1px 4px;border-radius:3px}
.meta{background:var(--a-muted);padding:5px 7px}
.fn{color:#DEC184;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm{color:var(--a-fg2);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* footage stand-ins: defocused frames (no drawn people) */
.th-int{background:radial-gradient(22% 30% at 72% 30%,rgba(255,214,160,.55),transparent 70%),radial-gradient(40% 55% at 48% 62%,#6b5446,transparent 72%),radial-gradient(30% 40% at 20% 40%,#3d4a52,transparent 70%),linear-gradient(160deg,#2e2925,#191614)}
.th-int2{background:radial-gradient(18% 24% at 24% 28%,rgba(190,215,235,.45),transparent 70%),radial-gradient(45% 55% at 58% 64%,#4b3c33,transparent 72%),linear-gradient(110deg,#1d252b,#2f3a40 60%,#202629)}
.th-wide{background:radial-gradient(10% 14% at 30% 40%,rgba(255,230,190,.7),transparent 70%),radial-gradient(10% 14% at 62% 36%,rgba(255,230,190,.55),transparent 70%),radial-gradient(70% 50% at 50% 85%,#2a2c2b,transparent 75%),linear-gradient(180deg,#56616a,#2f3539 70%)}
.th-aud{background:repeating-linear-gradient(90deg,rgba(147,197,253,.55) 0 1px,transparent 1px 4px) 0 50%/100% 46% no-repeat,#162033}
.th-pod{background:radial-gradient(25% 18% at 50% 34%,rgba(240,200,160,.45),transparent 72%),radial-gradient(60% 40% at 50% 70%,#3a2e2c,transparent 75%),radial-gradient(20% 12% at 80% 15%,rgba(120,160,255,.35),transparent 70%),linear-gradient(180deg,#24262e,#14151a)}
.th-pod2{background:radial-gradient(25% 18% at 46% 36%,rgba(250,210,150,.45),transparent 72%),radial-gradient(60% 40% at 50% 72%,#30382f,transparent 75%),radial-gradient(18% 10% at 18% 14%,rgba(255,150,90,.35),transparent 70%),linear-gradient(180deg,#2c261f,#16130f)}
/* context sidebar (session context, shown when no tool is docked) */
.ctxbar{width:230px;flex:none;padding:12px;font-family:-apple-system,system-ui,sans-serif;font-size:10.5px;color:var(--a-fg);display:flex;flex-direction:column;gap:8px}
.cl{font-size:9px;letter-spacing:.06em;color:var(--a-fg2);display:flex;justify-content:space-between}
.cl span{letter-spacing:0}
.cl2{font-size:8.5px;letter-spacing:.06em;color:var(--a-fg2);margin-top:8px}
.wscard,.jobs{background:var(--a-muted);border:1px solid var(--a-border);border-radius:4px;padding:9px}
.wsn{font-weight:500}
.wsf{font-family:var(--a-mono);font-size:9.5px;line-height:1.7;margin-top:4px}
.job+.job{margin-top:10px}
.jn .g{display:inline-block;width:12px;color:var(--a-fg2)}
.bar{height:4px;background:var(--a-hover);margin:5px 0 4px;border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:rgba(206,205,195,.4)}
.js{font-size:9.5px;color:var(--a-fg2)}

/* dark-page overrides */
.win{border-color:rgba(255,255,255,.14)}
.hero-win{box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06)}
.wf-stage .win.front{box-shadow:0 22px 60px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08)}
.wf-stage .win.solo{box-shadow:0 22px 60px rgba(0,0,0,.7)}
/* single viewer */
.mons.one{grid-template-columns:1fr}
.mons.one .mon{background:#000}
.mons.one .mon-frame{margin:0}
.play-g{font-size:8px;color:var(--a-fg)}