/* Osmo Reviews: the review page. Tokens, pins, ranges, bubble and comment threads follow Osmo Lite's
   Studio review (osmo-media/osmo-lite apps/studio, Figma n9LfBZhiu2z7wu3OLdQtdf). */
@font-face{font-family:"Passenger Sans";src:url(/fonts/PassengerSans-Regular.woff2) format("woff2");font-weight:400}
@font-face{font-family:"Passenger Sans";src:url(/fonts/PassengerSans-Bold.woff2) format("woff2");font-weight:700}
@font-face{font-family:"Aspekta";src:url(/fonts/Aspekta-500.woff2) format("woff2");font-weight:500}
:root{
  --background:#141414;--panel:#1a1a1a;--card:#1f1f1f;--hover:#2a2a2a;--raised:#292929;
  --border:#ffffff0d;--line:#ffffff14;--input:#ffffff26;
  --text:#f5f5f5;--muted:#979797;--dim:#6f6f6f;
  --accent:#f94305;--review-stroke:#e73c06;--range:#f943054f;--deep:#280B01;
  --radius:8px;--body:"Passenger Sans",system-ui,sans-serif;--title:"Aspekta","Passenger Sans",system-ui,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--background);color:var(--text);font:14px/1.5 var(--body);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
a{color:var(--accent)}
.app{display:grid;grid-template-rows:56px minmax(0,1fr);height:100dvh}

/* top bar */
.top{display:flex;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid var(--border);min-width:0}
.top .mark{height:18px;display:block}
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.crumbs .proj{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32vw}
.crumbs .sep{color:var(--dim)}
.crumbs h1{font:500 15px var(--title);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{font:700 10px var(--body);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:#ffffff0f;color:var(--muted);white-space:nowrap}
.status.changes{background:var(--deep);color:#ff8e66}
.status.approved{background:#1f3a24;color:#9fdcaa}
.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--radius);border:1px solid var(--input);background:transparent;color:var(--text);cursor:pointer;white-space:nowrap;font-size:13px;text-decoration:none}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#141414;font-weight:700}
.btn.primary:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:default}
.btn.icon{width:32px;padding:0;justify-content:center}
.ghost{border-color:transparent}
select.btn{appearance:none;padding-right:26px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23979797' fill='none' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 10px center}

/* main */
.main{display:grid;grid-template-columns:minmax(0,1fr) 380px;min-height:0}
.stagecol{display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0;background:#0d0d0d}
.stage{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:16px}
.stage video{max-width:100%;max-height:100%;display:block;background:#000;border-radius:4px}
.stage .novideo{color:var(--muted);text-align:center;max-width:360px}
.overlay{position:absolute;touch-action:none;cursor:none}
.overlay.off{cursor:default}
.regions,.pins{position:absolute;inset:0;pointer-events:none}
.dragsel,.region{position:absolute;border:1px dashed var(--review-stroke);border-radius:2px;background:transparent}
.pin{position:absolute;width:16px;height:16px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;transform:translate(-2px,-2px)}
.pin img{position:absolute;inset:0;width:100%;height:100%}
.pin .on{display:none;transform:scaleY(-1)}
.pin.active{width:32px;height:32px}
.pin.active .off{display:none}
.pin.active .on{display:block}
.pin .ini{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font:700 11px var(--body);color:#141414}
.pin.active .ini{display:flex}
.pointer{position:fixed;width:20px;height:20px;pointer-events:none;z-index:200}
.pointer img{width:20px;height:20px}
.bigplay{position:absolute;inset:auto;width:64px;height:64px;border-radius:50%;border:0;background:#141414cc;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:4}

/* controls + timeline */
.controls{padding:8px 16px 14px;border-top:1px solid var(--border);background:var(--panel)}
.bar{display:flex;align-items:center;gap:8px;height:40px}
.tc{font:12.5px var(--mono);color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.tc span{color:var(--dim)}
.sp{flex:1}
.vol{width:80px;accent-color:var(--accent)}
.track{position:relative;height:30px;margin:2px 0 0;cursor:crosshair;user-select:none}
.track:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.trange{position:absolute;top:7px;height:16px;border:1px solid var(--review-stroke);border-radius:2px;background:var(--range)}
.trange.draft{border-style:dashed}
.tpin{position:absolute;top:7px;width:16px;height:16px;transform:translateX(-2px);padding:0;border:0;background:none;cursor:pointer}
.tpin img{width:16px;height:16px;display:block}
.tpin.active img{filter:drop-shadow(0 0 0 var(--accent))}
.tpin.active:after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 0 1px var(--accent)}
.tpin.resolved{opacity:.4}
.scrub{position:relative;height:34px;cursor:pointer;user-select:none;touch-action:none}
.ticks{position:absolute;left:0;right:0;top:0;height:18px;border-bottom:1px solid var(--line)}
.tick{position:absolute;top:10px;width:1px;height:8px;background:#ffffff26}
.tick.major{top:4px;height:14px;background:#ffffff40}
.tick b{position:absolute;top:-4px;left:4px;font:10px var(--mono);font-weight:400;color:var(--dim);white-space:nowrap}
.played{position:absolute;left:0;top:18px;height:3px;background:var(--accent);border-radius:2px}
.buffered{position:absolute;left:0;top:18px;height:3px;background:#ffffff1f;border-radius:2px}
.head{position:absolute;top:0;bottom:-2px;width:1px;background:var(--accent);pointer-events:none}
.head:before{content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:15px;height:12px;background:url(/review/playhead.svg) left top/16px 94px no-repeat}
.hover{position:absolute;bottom:42px;transform:translateX(-50%);pointer-events:none;background:#000;border:1px solid var(--line);border-radius:6px;overflow:hidden;z-index:30}
.hover canvas{display:block;width:160px;height:90px}
.hover span{display:block;text-align:center;font:11px var(--mono);padding:3px 0;color:var(--text)}

/* panel */
.panel{border-left:1px solid var(--border);background:var(--panel);display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0}
.tabs{display:flex;align-items:center;gap:6px;padding:14px 14px 10px}
.tabs button{height:28px;padding:2px 10px;border-radius:var(--radius);border:0;background:none;color:#fafafa;opacity:.5;cursor:pointer;display:inline-flex;gap:6px;align-items:center;font-size:13px}
.tabs button[aria-pressed="true"]{background:#262626;opacity:1}
.tabs button:hover{opacity:1}
.tabs strong{font-size:12px;color:var(--muted)}
.threads{overflow-y:auto;padding:0 10px 16px;overscroll-behavior:contain}
.thread{border-radius:var(--radius);padding:12px;margin-bottom:6px;cursor:pointer;border:1px solid transparent}
.thread:hover{background:var(--card)}
.thread.sel{background:var(--card);border-color:var(--line)}
.thread.resolved{opacity:.6}
.th{display:flex;gap:9px;align-items:center}
.av{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;background:#754029;color:#fff0e8;font:700 11px var(--body)}
.av.team{background:var(--accent);color:#141414}
.who{display:flex;flex-direction:column;flex:1;min-width:0}
.who strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who span{font-size:11px;color:var(--muted)}
.badge{font:700 9px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-left:6px}
.res{width:28px;height:28px;border-radius:50%;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.res:hover{background:var(--hover);color:#9fdcaa}
.res.on{color:#9fdcaa}
.loc{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 0 37px}
.stamp{display:inline-flex;color:#ff8e66;background:#f9430510;border:0;border-radius:4px;font:11px var(--mono);padding:4px 7px;cursor:pointer}
.stamp:hover{background:#f9430525}
.area{color:var(--muted);font-size:11px}
.txt{margin:8px 0 0 37px;font-size:13px;color:#dedede;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.used{margin:6px 0 0 37px;font-size:11px;color:var(--muted)}
.reply{margin:10px 0 0 37px;padding-left:11px;border-left:1px solid #ffffff20}
.reply strong{font-size:12px}
.reply span{font-size:11px;color:var(--muted);margin-left:6px}
.reply p{margin:3px 0 0;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;color:#dedede}
.replyform{display:flex;gap:6px;align-items:flex-end;margin:10px 0 0 37px;padding-top:8px;border-top:1px solid var(--border)}
.replyform textarea{flex:1;min-height:34px;max-height:120px;resize:vertical;background:transparent;border:0;color:var(--text);font:13px/1.5 var(--body);outline:none}
.empty{text-align:center;color:#8e8e8e;padding:60px 24px}
.empty b{display:block;color:#c9c9c9;font-size:14px;margin-bottom:6px}
.cut .ch{font:500 15px var(--title);color:var(--accent);margin:14px 4px 6px}
.cut .line{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;padding:8px 4px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px}
.cut .line:hover,.cut .line.on{background:var(--card)}
.cut .line time{font:12px var(--mono);color:var(--muted);padding-top:1px}
.cut .shot{color:var(--muted);font-style:italic}
.info{padding:4px 6px;font-size:13px;color:#dedede}
.info h3{font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.info p{margin:0 0 10px;white-space:pre-wrap}
.info .row{display:flex;gap:8px;flex-wrap:wrap}

/* composer */
.composer{border-top:1px solid var(--border);padding:12px 14px 14px;display:grid;gap:8px}
.composer input,.dialog input,.dialog textarea{width:100%;background:transparent;border:1px solid var(--input);border-radius:var(--radius);color:var(--text);font:13px var(--body);padding:8px 10px}
.box{border:1px solid var(--input);border-radius:var(--radius);background:#141414}
.box:focus-within{border-color:var(--review-stroke)}
.box textarea{display:block;width:100%;min-height:64px;max-height:180px;resize:vertical;padding:10px 12px 4px;border:0;background:transparent;color:var(--text);font:13px/1.5 var(--body);outline:none}
.chips{display:flex;align-items:center;gap:6px;padding:4px 8px 8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:4px;font:11px var(--mono);color:#ff8e66;background:#f9430510;border-radius:4px;padding:3px 6px}
.chip button{border:0;background:none;color:inherit;cursor:pointer;padding:0;display:flex}
.chip.plain{color:var(--muted);background:#ffffff0a;font-family:var(--body)}
.send{margin-left:auto;width:30px;height:30px;border-radius:50%;border:0;background:#ffffff14;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.send.ready{background:var(--accent);color:#141414}
.hint{font-size:11px;color:var(--dim)}

/* bubble (composer on the frame) */
.bubble{position:fixed;z-index:80;width:300px;max-width:calc(100vw - 24px);border:1px solid #ffffff14;border-radius:18px 18px 18px 3px;background:var(--raised);box-shadow:0 8px 30px #0006}
.bubble:focus-within{border-color:var(--review-stroke)}
.bubble textarea{display:block;width:100%;min-height:72px;max-height:180px;resize:vertical;padding:12px 14px;border:0;background:transparent;color:var(--text);font:14px/1.5 var(--body);outline:none}
.bubble input{display:block;width:calc(100% - 24px);margin:10px 12px 0;background:transparent;border:1px solid var(--input);border-radius:6px;color:var(--text);font:13px var(--body);padding:6px 8px}
.bubble .acts{display:flex;align-items:center;gap:8px;border-top:1px solid var(--border);padding:8px 10px}
.bubble .acts .chip{margin-right:auto}

/* dialogs */
.scrim{position:fixed;inset:0;background:#000a;z-index:100;display:grid;place-items:center;padding:16px}
.dialog{width:440px;max-width:100%;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:12px;box-shadow:0 20px 60px #000a}
.dialog h2{font:500 20px var(--title);margin:0}
.dialog p{margin:0;color:var(--muted);font-size:13px}
.dialog textarea{min-height:80px;resize:vertical}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choice button{padding:14px 12px;border-radius:var(--radius);border:1px solid var(--input);background:transparent;color:var(--text);cursor:pointer;text-align:left;font-size:13px}
.choice button b{display:block;font-size:14px;margin-bottom:2px}
.choice button[aria-pressed="true"]{border-color:var(--accent);background:#f9430512}
.dialog .acts{display:flex;justify-content:flex-end;gap:8px}
.toggle{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:#dedede;cursor:pointer}
.toggle input{width:auto;margin-top:3px;accent-color:var(--accent)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:10px 14px;z-index:300;font-size:13px;box-shadow:0 8px 30px #0008;max-width:calc(100vw - 32px)}
.banner{padding:10px 16px;font-size:13px;border-bottom:1px solid var(--border);background:var(--deep);color:#ffd9c9}
.banner.approved{background:#14261a;color:#bfe8c8}
.gate{display:grid;place-items:center;height:100dvh;padding:24px;text-align:center}
.gate div{max-width:380px}
.gate h1{font:500 24px var(--title);margin:16px 0 8px}
.gate p{color:var(--muted)}

/* phones: player on top, comments below */
@media(max-width:900px){
  .app{grid-template-rows:auto minmax(0,1fr);height:auto;min-height:100dvh}
  .top{padding:10px 12px;flex-wrap:wrap;gap:8px}
  .crumbs{flex-basis:100%;order:3}
  .crumbs .proj,.crumbs .sep{display:none}
  .main{grid-template-columns:1fr}
  .stagecol{grid-template-rows:auto auto}
  .stage{padding:0;max-height:60vh}
  .stage video{border-radius:0;max-height:60vh}
  .panel{border-left:0;border-top:1px solid var(--border);grid-template-rows:auto auto auto}
  .threads{max-height:none}
  .vol,.speed,.hidephone{display:none}
  .controls{padding:6px 12px 10px}
}