/* =========================================================
   FRONTNESS — Verktyg: extrahera en bild från video
   Bygger på style.css och verktyg.css. Bara det som saknas
   står här; paneler, fält och kort kommer från .vt-/.field-.
   Allt prefixas vp- för att inte krocka med andra verktyg.
   ========================================================= */

/* Samma upplägg som QR-studion: kontrollerna till vänster, resultatet
   i en klistrad spalt till höger, och en kortad subhero ovanför. */
.vp-sect{ padding-top:2.5rem }
@media (min-width:1024px){ .vp-sect{ padding-top:3.5rem } }

.vp-studio{ display:grid; gap:1rem; align-items:start }
@media (min-width:1024px){
  .vp-studio{ grid-template-columns:23rem minmax(0,1fr); gap:1.25rem }
  .vp-out{ position:sticky; top:5.5rem }
}
.vp-controls{ display:flex; flex-direction:column; gap:1rem; min-width:0 }

.vp-h{ font-size:1rem; font-weight:600; letter-spacing:-.01em; margin-bottom:1.125rem;
  display:flex; align-items:baseline; gap:.5rem }
.vp-h i{ font-style:normal; font-size:.75rem; font-weight:400; color:var(--vt-faint) }

/* ---------------------------- filsläppet --------------------------- */
.vp-drop{ position:relative; display:grid; place-items:center; gap:.35rem; text-align:center; cursor:pointer;
  padding:1.75rem 1.25rem; border:1px dashed var(--vt-hair); border-radius:var(--radius-card-sm);
  background:var(--background); transition:border-color .2s, background .2s }
.vp-drop:hover,.vp-drop.is-over{ border-color:var(--accent); background:rgba(177,95,44,.04) }
.vp-drop input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }
.vp-drop__ico{ color:var(--subtle); line-height:0 }
.vp-drop__ico svg{ width:2rem; height:2rem }
.vp-drop__t{ font-size:.9375rem; font-weight:500 }
.vp-drop__s{ font-size:.8125rem; color:var(--vt-faint) }

.vp-file{ display:flex; align-items:baseline; gap:.75rem; margin-top:.875rem;
  padding:.7rem .9rem; font-size:.8125rem; line-height:1.5;
  background:var(--vt-inset); border:1px solid var(--vt-hair); border-radius:var(--radius-control) }
.vp-file b{ font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.vp-file span{ margin-left:auto; flex:none; color:var(--vt-faint); font-variant-numeric:tabular-nums }

.vp-warn{ margin-top:1rem; padding:.75rem 1rem; font-size:.8125rem; line-height:1.6; color:var(--vt-muted);
  background:var(--vt-inset); border:1px solid var(--vt-hair); border-left:3px solid var(--st-warn);
  border-radius:0 var(--radius-control) var(--radius-control) 0 }

/* ---------------------------- tidslinjen --------------------------- */
.vp-range{ appearance:none; width:100%; height:.25rem; border-radius:var(--radius-pill);
  background:var(--vt-hair); cursor:pointer }
.vp-range::-webkit-slider-thumb{ appearance:none; width:1.05rem; height:1.05rem; border-radius:50%;
  background:var(--ink); border:2px solid #fff; box-shadow:0 1px 4px rgba(17,17,17,.3) }
.vp-range::-moz-range-thumb{ width:1.05rem; height:1.05rem; border-radius:50%;
  background:var(--ink); border:2px solid #fff; box-shadow:0 1px 4px rgba(17,17,17,.3) }

.vp-times{ display:flex; justify-content:space-between; gap:.75rem; margin-top:.5rem;
  font-size:.8125rem; color:var(--vt-faint); font-variant-numeric:tabular-nums }
.vp-times b{ color:var(--foreground); font-weight:600 }

/* Stega en bildruta i taget när reglaget blir för trubbigt. */
.vp-step{ display:flex; gap:.5rem; margin-top:1rem }
.vp-stepbtn{ flex:1; font-size:.8125rem; font-weight:500; color:var(--vt-muted); background:var(--background);
  border:1px solid var(--vt-hair); border-radius:var(--radius-control); padding:.55rem .75rem;
  transition:color .2s, border-color .2s }
.vp-stepbtn:hover{ color:var(--foreground); border-color:var(--subtle) }

.vp-primary{ width:100%; margin-top:1.25rem; padding:.8rem 1rem; border-radius:var(--radius-pill);
  background:var(--ink); color:#fff; font-size:.875rem; font-weight:600;
  transition:opacity .2s, box-shadow .2s }
.vp-primary:hover{ box-shadow:var(--vt-lift-hover) }

.vp-quality{ margin-top:1.125rem }
.vp-quality > span{ display:flex; justify-content:space-between; gap:.75rem }
.vp-quality output{ font-size:.8125rem; font-weight:400; color:var(--vt-faint); letter-spacing:0;
  text-transform:none; font-variant-numeric:tabular-nums }

/* ---------------------------- resultatet --------------------------- */
.vp-outpanel{ display:grid; gap:1.25rem; padding:1.25rem }
.vp-stage{ position:relative; display:grid; place-items:center; min-height:20rem;
  padding:1rem; background:var(--vt-inset); border:1px solid var(--vt-hair);
  border-radius:var(--radius-card-sm); overflow:hidden }
.vp-stage canvas{ max-width:100%; max-height:32rem; height:auto; display:block;
  border-radius:.5rem; box-shadow:var(--vt-lift) }
.vp-empty{ display:grid; place-items:center; gap:.875rem; text-align:center; color:var(--vt-faint); padding:1rem }
.vp-empty p{ font-size:.875rem; line-height:1.6; max-width:26ch }
.vp-empty svg{ opacity:.5 }

.vp-dl{ display:grid; gap:.75rem }
.vp-dl__head{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem }
.vp-dl__head span{ font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--vt-faint) }
.vp-dl__head b{ font-size:.75rem; font-weight:400; color:var(--vt-faint); text-align:right;
  font-variant-numeric:tabular-nums }
.vp-dl__b{ display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%;
  padding:.85rem 1rem; border:1px solid var(--vt-hair); border-radius:var(--radius-control);
  background:var(--background); font-size:.9375rem; font-weight:600;
  transition:border-color .2s, box-shadow .2s, color .2s }
.vp-dl__b svg{ width:1.05rem; height:1.05rem; flex:none; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round }
.vp-dl__b:hover:not(:disabled){ color:var(--accent); border-color:rgba(177,95,44,.4); box-shadow:var(--vt-lift) }
.vp-dl__b:disabled{ opacity:.45; cursor:not-allowed }

.vp-foot{ margin-top:1rem; padding:0 .25rem; font-size:.8125rem; line-height:1.65; color:var(--vt-faint) }