/* The video studio (public/video/video.js) and its landing (public/video/index.html).
   Tokens come from :root in /style.css and the shared classes (.btn, .seg, .range, .slider, .card, .badge,
   .error, .experimental, .howto, .steps, .chip, .switch, .toast). One rule per line, no new colours. */

/* The photo studio steps aside while the video studio is mounted over the home page. */
body[data-tool="video"] .studio{display:none}

.vs-host{position:relative;display:flex;flex-direction:column;flex:1 0 auto;width:100%;max-width:var(--max);margin:0 auto;padding:12px var(--gutter) 48px}
.vs-host[hidden]{display:none}
.vs{display:grid;gap:22px;flex:1 1 auto;min-width:0}

/* Text for screen readers only. */
.vs-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.vs-frame:focus-visible{outline-offset:-3px}

/* ---------- stage ---------- */
.vs-stage{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.vs-viewport{display:grid;place-items:end center;width:100%;container-type:inline-size}
.vs-frame{--ar:1.7778;position:relative;isolation:isolate;width:min(100cqw,calc(56svh * var(--ar)));aspect-ratio:var(--ar);border-radius:var(--r2);overflow:hidden;background:var(--surface)}
.vs-v{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--surface);visibility:hidden}
.vs-v[data-active="true"]{visibility:visible}
.vs[data-state="ready"] .vs-v[data-active="true"],.vs[data-state="result"] .vs-v[data-active="true"]{cursor:pointer}
.vs-frame::after{content:"";position:absolute;inset:0;background:rgba(7,8,10,.5);opacity:0;pointer-events:none;transition:opacity .3s}
.vs[data-state="support"] .vs-frame::after,.vs[data-state="probing"] .vs-frame::after,.vs[data-state="encoding"] .vs-frame::after,.vs[data-state="error"] .vs-frame::after{opacity:1}
.vs-tag{position:absolute;z-index:2;left:50%;top:max(10px,4%);padding:5px 11px;border-radius:var(--pill);background:rgba(7,8,10,.7);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-4px);transition:opacity .15s,transform .15s}
.vs-tag[data-on="true"]{opacity:1;transform:translate(-50%,0)}
.vs-loader{position:absolute;z-index:3;left:50%;bottom:12px;display:flex;align-items:center;gap:9px;padding:8px 15px 8px 12px;border-radius:var(--pill);background:rgba(7,8,10,.72);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:520;white-space:nowrap;transform:translateX(-50%);pointer-events:none}
.vs-loader .spinner{display:inline-block;border-color:rgba(255,255,255,.18);border-top-color:rgba(255,255,255,.75)}
.vs[data-state="support"] .vs-loader,.vs[data-state="probing"] .vs-loader,.vs[data-state="encoding"] .vs-loader{top:50%;bottom:auto;transform:translate(-50%,-50%)}
.vs-frame .ring{z-index:4}
.vs-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;width:100%;min-height:40px}
.vs-bar .chip:disabled{opacity:.5;cursor:default}
.vs-stage-notes{display:grid;gap:2px;max-width:min(100%,40em);margin-top:-2px;text-align:center}
.vs-line{margin:0;color:var(--muted);font-size:13px;line-height:1.45;text-wrap:balance}
.vs-line.vs-muted{color:var(--faint)}
.vs-trim-slot[data-off="true"],.vs-bar[data-off="true"],.vs-stage-notes[data-off="true"]{display:none}
.vs-line[data-off="true"]{visibility:hidden}

/* ---------- trim ---------- */
.vs-trim-slot{width:100%;max-width:640px}
.vs-trim{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head fields" "track track";align-items:center;gap:2px 12px}
.vs-trim-head{grid-area:head;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.vs-trim-title{font-size:14px;font-weight:600;letter-spacing:-.01em}
.vs-trim-len{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.vs-trim-fields{grid-area:fields;display:flex;gap:8px}
.vs-time-label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px}
.vs-time{width:84px;min-height:36px;padding:0 10px;border:0;border-radius:var(--pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font-size:13.5px;font-variant-numeric:tabular-nums;text-align:center}
.vs-time:focus-visible{outline-offset:1px}
.vs-trim-track{grid-area:track;position:relative;height:32px}
.vs-trim-track::before{content:"";position:absolute;left:0;right:0;top:14px;height:4px;border-radius:var(--pill);background:rgba(255,255,255,.12)}
.vs-trim-fill{position:absolute;top:14px;height:4px;border-radius:var(--pill);background:rgba(243,243,239,.9)}
.vs-trim-range{position:absolute;inset:0;z-index:2;width:100%;height:32px;margin:0;-webkit-appearance:none;appearance:none;background:none;pointer-events:none}
.vs-trim-range::-webkit-slider-runnable-track{height:4px;background:none}
.vs-trim-range::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;margin-top:-7px;border:0;border-radius:50%;background:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:grab}
.vs-trim-range::-moz-range-track{height:4px;background:none}
.vs-trim-range::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border:0;border-radius:50%;background:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:grab}
.vs-trim-range:focus-visible{outline:none}
.vs-trim-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.vs-trim-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}

/* ---------- panel ---------- */
.vs-panel{min-width:0}
.vs-card{position:relative}
.vs-card>*+*{margin-top:14px}
.vs-status{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:15px}
.vs-status .spinner{display:inline-block;border-color:rgba(255,255,255,.18);border-top-color:rgba(255,255,255,.75)}
.vs-gate .unlock-body{margin:0 0 14px;font-size:14px}
.vs-gate .follow-btn{min-height:52px}
.vs-look .controls-head{margin-top:0}
.vs-hint{margin:8px 2px 0;color:var(--faint);font-size:12.5px;line-height:1.45}
.vs-panel-notes>*+*{margin-top:8px}
.vs-infos .notice{align-items:flex-start;justify-content:flex-start;margin:0 0 6px;text-align:left;line-height:1.4}
.vs-infos .notice .icon{margin-top:2px}
.vs-audio{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 12px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-size:13px;line-height:1.4}
.vs-audio-text{flex:1 1 14em}
.vs-warning{font-size:13px}
.vs-brightness{margin:0}
.vs-title{margin:14px 0 4px;font-size:28px;font-weight:650;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.vs-meta{margin:0;color:var(--muted);font-size:13.5px;font-variant-numeric:tabular-nums}
.vs-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 12px}
.vs-foot .another{margin:0}

/* ---------- encoding ---------- */
.vs-enc .vs-title{margin-top:0}
.vs-progress{height:6px;margin:18px 0 12px;overflow:hidden;border-radius:var(--pill);background:rgba(255,255,255,.12)}
.vs-progress-fill{display:block;width:0;height:100%;border-radius:inherit;background:rgba(243,243,239,.9);transition:width .3s linear}
.vs-enc-line{min-height:1.5em;margin:0;color:var(--text);font-size:14px;font-variant-numeric:tabular-nums}
.vs-enc .vs-hint{margin:10px 0 16px}
.vs-cancel,.vs-secondary{width:100%;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text)}
@media (hover:hover){.vs-cancel:hover,.vs-secondary:hover{background:var(--surface-3)}}

/* ---------- result ---------- */
.vs-res>*+*{margin-top:12px}
.vs-res .badge{margin-top:0}
.vs-look-fixed{margin:0;padding:11px 14px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:560}
.vs-mov{min-height:48px;font-size:14.5px}
.vs-checked,.vs-reload{margin:0}
.vs-err .error{outline:none}
.vs-err-buttons{display:grid;gap:8px;margin-top:14px}
.vs-err-buttons .text-btn{justify-self:center}

/* ---------- pinned actions ---------- */
.vs-actions{display:flex;gap:8px}
.vs-actions .btn-download[data-tone="quiet"]{background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text)}
.vs-actions .btn-download[data-tone="quiet"] .dl-sub{color:var(--muted)}
.vs-convert[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
@media (hover:hover){.vs-actions .btn-download[data-tone="quiet"]:hover{background:var(--surface-2)}}
.vs-copy-area{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0}

/* ---------- landing page (public/video/index.html) ---------- */
.vs-landing{display:grid;gap:28px;align-items:center;min-width:0}
.vs-intro{max-width:620px}
.vs-intro>*{animation:rise .8s var(--ease) backwards}
.vs-intro>:nth-child(2){animation-delay:.05s}
.vs-intro>:nth-child(3){animation-delay:.1s}
.vs-intro>:nth-child(4){animation-delay:.15s}
.vs-landing .experimental{margin:0;max-width:30em}
.vs-hero{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r3);background:var(--surface)}
.vs-hero video{display:block;width:100%;height:100%;object-fit:cover}
.vs-hero .ring{z-index:2}
.vs-landing h1{text-wrap:balance}
.vs-landing .text-btn{padding:0;text-decoration:underline;text-decoration-color:rgba(255,255,255,.2);text-underline-offset:4px}

/* ---------- tablets: two columns, page may scroll ---------- */
@media (min-width:760px){
  .vs{grid-template-columns:minmax(0,1fr) minmax(340px,360px);column-gap:clamp(32px,5vw,80px);align-items:start}
  .vs-landing{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px)}
}

/* ---------- phones: stacked, the main action pinned to the bottom ---------- */
@media (max-width:759px){
  .vs-host{padding-top:4px}
  .vs-host:has(.vs[data-state="ready"],.vs[data-state="result"]){padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .vs[data-state="ready"] .vs-actions,.vs[data-state="result"] .vs-actions{position:fixed;z-index:20;left:0;right:0;bottom:0;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(rgba(7,8,10,0),rgba(7,8,10,.94) 18px)}
  .vs[data-state="ready"] .vs-actions .btn-download,.vs[data-state="result"] .vs-actions .btn-download{box-shadow:0 10px 30px rgba(0,0,0,.5)}
  .vs-trim{grid-template-columns:1fr;grid-template-areas:"head" "fields" "track"}
  .vs-trim-fields{justify-content:space-between}
  .vs-title{font-size:26px}
  .vs-landing .cta{align-items:stretch}
  .vs-landing h1{text-align:left}
}
@media (max-width:359px){
  .vs-time{width:72px}
  .vs-trim-fields{gap:4px}
}

/* ---------- desktop: everything on one screen ---------- */
@media (min-width:1024px) and (min-height:640px){
  .vs-host{flex:1 1 auto;min-height:0;padding-top:4px;padding-bottom:clamp(16px,3vh,32px)}
  .vs{grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto;align-content:start;align-items:start;min-height:0;--vs-top:0px;padding-top:var(--vs-top)}
  .vs-stage{justify-content:flex-start;gap:clamp(10px,1.6vh,16px);--vs-fw:640px}
  .vs-viewport{flex:none;place-items:start center}
  .vs-frame{width:var(--vs-fw);max-width:100%}
  .vs-panel{display:flex;flex-direction:column;min-height:0}
  .vs-card{display:block;flex:0 1 auto;min-height:0;--vs-cardmax:calc(100svh - 200px);max-height:var(--vs-cardmax);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .vs-actions{position:sticky;z-index:3;bottom:-23px;margin:14px -23px -23px;padding:0 23px 23px;background:var(--surface)}
  .vs-actions::after{content:"";position:absolute;left:0;right:0;top:100%;height:4px;background:var(--surface)}
  .vs-actions::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;background:linear-gradient(rgba(15,17,20,0),var(--surface));pointer-events:none}
  .vs-landing{height:100%;min-height:0}
  .vs-landing .vs-hero{align-self:center}
  .vs-trim-slot{min-height:76px;max-width:max(640px,var(--vs-fw))}
  .vs-trim-slot[data-off="true"]{display:block;visibility:hidden}
  .vs-bar[data-off="true"]{display:flex;visibility:hidden}
  .vs-stage-notes[data-off="true"]{display:grid;visibility:hidden}
}
@media (min-width:1024px) and (min-height:640px) and (max-height:760px){
  .vs-card{padding:20px 22px}
  .vs-card>*+*{margin-top:10px}
  .vs-actions{bottom:-19px;margin:10px -21px -19px;padding:0 21px 19px}
  .vs-title{margin:10px 0 2px;font-size:24px}
  .vs-res>*+*{margin-top:8px}
  .vs-stage-notes{gap:0}
  .vs-bar{min-height:36px}
  .vs-landing h1{font-size:clamp(48px,min(7vw,10.5vh),96px)}
  .vs-landing .eyebrow{margin-bottom:12px}
  .vs-landing .lede{margin:14px 0 20px}
  .vs-landing .cta{gap:8px}
  .vs-landing .trust{margin-top:18px}
}
@media (pointer:coarse){
  .vs .follow-more,.vs .reset{min-height:44px;display:inline-flex;align-items:center}
  .vs-time{min-height:44px}
  .vs-trim-track,.vs-trim-range{height:44px}
  .vs-trim-track::before,.vs-trim-fill{top:20px}
  .vs-trim-range::-webkit-slider-thumb{width:26px;height:26px;margin-top:-11px}
  .vs-trim-range::-moz-range-thumb{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
  .vs-progress-fill,.vs-tag,.vs-frame::after{transition:none}
}