/* Video Player — tool-specific styles. Tokens and shared chrome come from base.css. */

.vp-load { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.vp-load input[type="url"], .vp-load input[type="text"] {
  flex: 1; min-width: 0; padding: 13px 16px; font-size: .98rem;
  color: var(--text); background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.vp-load input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.vp-load .btn { flex-shrink: 0; }

/* ── stage ──────────────────────────────────────────────────────────────── */
.vp-stage {
  /* width/height/aspect-ratio are set from JS: a portrait frame has to be driven from its
     height, or a 9:16 box at 100% width would be nearly twice the height of the screen. */
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  margin-top: 18px; background: #000; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line);
}
/* The rotating box: centred on the stage, sized in JS, turned in 90° steps. Everything
   that must turn with the picture — the frame AND the subtitles — lives inside it. */
.vp-rot {
  position: absolute; top: 50%; left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  /* Only the transform animates. Transitioning width/height too would re-lay-out the
     embedded iframe on every frame of the turn — expensive, and it makes the box
     size lag the rotation it is supposed to match. */
  transition: transform .32s var(--ease-out);
}
.vp-frame, .vp-frame iframe, .vp-frame > div {
  width: 100%; height: 100%; border: 0; display: block;
}
.vp-subs {
  position: absolute; left: 4%; right: 4%; bottom: 9%;
  text-align: center; pointer-events: none;
  line-height: 1.35; font-weight: 600; letter-spacing: .01em;
}
.vp-sub-line {
  display: inline-block; padding: .18em .5em; margin: .08em 0;
  color: #fff; background: rgba(0, 0, 0, .72); border-radius: 5px;
  /* Readable over any frame, including a blown-out white one. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
}

/* Fullscreen + screen-filling share one layout: the SHELL is the element that fills, and
   the control bar is inside it. Fullscreening the stage alone (the earlier mistake) put
   every control outside the fullscreen element, so rotation and volume simply vanished the
   moment you went fullscreen — the controls were still there, just not on the screen. */
.vp-shell { display: block; outline: none; }

body.vp-filling .vp-shell {
  display: flex; flex-direction: column;
  width: 100vw; height: 100vh; background: #000;
  position: fixed; top: 0; left: 0; z-index: 9999;
}
body.vp-filling .vp-stage {
  flex: 1 1 auto; min-height: 0;
  width: 100%; height: auto; aspect-ratio: auto;
  margin: 0; border: 0; border-radius: 0;
}
body.vp-filling .vp-bar {
  flex: 0 0 auto; margin: 0; border-radius: 0; border-width: 1px 0 0;
  background: rgba(15, 18, 34, .94); backdrop-filter: blur(10px);
}

/* :fullscreen and :-webkit-full-screen are kept in SEPARATE rules on purpose — one
   unsupported selector in a comma-separated list invalidates the entire rule. */
.vp-shell:fullscreen {
  display: flex; flex-direction: column; width: 100vw; height: 100vh; background: #000;
}
.vp-shell:fullscreen .vp-stage {
  flex: 1 1 auto; min-height: 0; width: 100%; height: auto; aspect-ratio: auto;
  margin: 0; border: 0; border-radius: 0;
}
.vp-shell:fullscreen .vp-bar {
  flex: 0 0 auto; margin: 0; border-radius: 0; border-width: 1px 0 0;
  background: rgba(15, 18, 34, .94);
}
.vp-shell:-webkit-full-screen {
  display: flex; flex-direction: column; width: 100vw; height: 100vh; background: #000;
}
.vp-shell:-webkit-full-screen .vp-stage {
  flex: 1 1 auto; min-height: 0; width: 100%; height: auto; aspect-ratio: auto;
  margin: 0; border: 0; border-radius: 0;
}
.vp-shell:-webkit-full-screen .vp-bar {
  flex: 0 0 auto; margin: 0; border-radius: 0; border-width: 1px 0 0;
  background: rgba(15, 18, 34, .94);
}

/* In the CSS fill mode the rest of the page is still in the document, so hide it. */
body.vp-filling #site-header, body.vp-filling .hero,
body.vp-filling .content, body.vp-filling .deep,
body.vp-filling .faq, body.vp-filling #site-footer,
body.vp-filling .ad-wrap, body.vp-filling .vp-panel,
body.vp-filling .vp-load, body.vp-filling .vp-keys,
body.vp-filling .privacy-note, body.vp-filling .more-tools { display: none; }
body.vp-filling { overflow: hidden; }

/* ── control bar ────────────────────────────────────────────────────────── */
.vp-bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 16px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.vp-group { display: flex; align-items: center; gap: 9px; }
.vp-group .btn { padding: 8px 14px; min-height: 38px; font-size: .88rem; }
.vp-glabel {
  font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted-2);
}
.vp-val {
  font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--muted);
  min-width: 3.4em; text-align: center;
}
.vp-bar input[type="range"] { width: 108px; accent-color: var(--accent); }

/* ── panels ─────────────────────────────────────────────────────────────── */
.vp-panel {
  margin-top: 18px; padding: 20px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
}
.vp-panel h3 {
  margin: 0 0 6px; font-size: 1rem; font-weight: 700;
}
.vp-panel .vp-why { margin: 0 0 16px; color: var(--muted); font-size: .9rem; }
.vp-subdrop {
  padding: 20px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--muted);
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.vp-subdrop:hover, .vp-subdrop.over { border-color: var(--accent); background: var(--card-2); }
.vp-subdrop strong { color: var(--text); }
.vp-sub-info { margin: 12px 0 0; font-size: .88rem; color: var(--accent-2); font-weight: 600; }
.vp-subtools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.vp-or { margin: 16px 0 8px; font-size: .8rem; color: var(--muted-2); text-align: center; }
.vp-panel textarea {
  width: 100%; min-height: 90px; padding: 12px 14px; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem;
  color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.vp-panel textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

.vp-empty {
  margin-top: 18px; padding: 44px 24px; text-align: center;
  color: var(--muted-2); background: var(--bg-soft);
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.vp-keys { margin-top: 14px; font-size: .82rem; color: var(--muted-2); }
.vp-keys kbd {
  display: inline-block; padding: 1px 6px; margin: 0 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em;
  background: var(--card-2); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; color: var(--text);
}

@media (max-width: 640px) {
  .vp-bar { gap: 12px 16px; padding: 12px; }
  .vp-bar input[type="range"] { width: 88px; }
  .vp-load { gap: 10px; }
  .vp-load .btn { width: 100%; }
  .vp-keys { display: none; }   /* no keyboard to shortcut with */
}

@media (pointer: coarse) {
  /* base.css raises .btn to 46px for touch, but the more specific .vp-group / .vp-subtools
     rules above would win and leave a 38px target — under the ~44px a thumb needs. */
  .vp-group .btn, .vp-subtools .btn { min-height: 44px; padding: 10px 16px; }
  .vp-bar input[type="range"] { height: 30px; }
}

/* Native select styled to match the ghost buttons in the bar. */
.vp-select {
  padding: 8px 12px; min-height: 38px; max-width: 190px;
  font-size: .86rem; font-family: inherit;
  color: var(--text); background: var(--card-2);
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.vp-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.vp-select:disabled { opacity: .55; cursor: default; }
.vp-select-sm { max-width: 120px; }
@media (pointer: coarse) { .vp-select { min-height: 44px; } }

/* ── immersive (fullscreen) UI ──────────────────────────────────────────────
   In fullscreen the bar is an OVERLAY, not a flex row: taking it out of flow gives the
   picture the entire screen, and lets it fade without the video resizing underneath. */
.vp-shell:fullscreen { position: relative; }
.vp-shell:-webkit-full-screen { position: relative; }

.vp-shell:fullscreen .vp-bar,
.vp-shell:-webkit-full-screen .vp-bar,
body.vp-filling .vp-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  border-width: 0; background: linear-gradient(to top, rgba(8,10,20,.94), rgba(8,10,20,.72) 70%, transparent);
  padding: 22px 18px 16px;
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.vp-shell:fullscreen .vp-stage,
.vp-shell:-webkit-full-screen .vp-stage,
body.vp-filling .vp-stage { flex: 1 1 auto; }

.vp-shell.vp-hide-ui .vp-bar {
  opacity: 0; transform: translateY(105%); pointer-events: none;
}
.vp-shell.vp-hide-ui { cursor: none; }

@media (prefers-reduced-motion: reduce) {
  .vp-shell:fullscreen .vp-bar, body.vp-filling .vp-bar { transition: opacity .01s; }
  .vp-shell.vp-hide-ui .vp-bar { transform: none; }
}

.vp-fbhelp {
  margin-top: 14px; padding: 12px 15px; font-size: .88rem; line-height: 1.6;
  color: var(--muted); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.vp-fbhelp a { color: var(--accent); white-space: nowrap; }
.vp-fbhelp code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em;
  background: var(--card-2); padding: 1px 5px; border-radius: 5px;
}
.vp-empty .btn { margin-top: 12px; }
.vp-empty p { margin: 0 0 10px; }

/* Portrait frames must not keep the JS width/height when the shell fills the screen. */
body.vp-filling .vp-stage,
.vp-shell:fullscreen .vp-stage,
.vp-shell:-webkit-full-screen .vp-stage {
  width: 100% !important; height: auto !important; margin: 0 !important;
  aspect-ratio: auto !important;
}
.vp-fbshort {
  background: rgba(255, 206, 92, .08);
  border-color: rgba(255, 206, 92, .38);
}
#vpZoom { width: 92px; }

@media (max-width: 700px) {
  /* The bar wrapped between groups but each group was a rigid row, so a group holding a
     label + two selects + a slider stayed wider than the phone. Let groups wrap internally
     and let the flexible controls give up their fixed widths. The text labels go: on a
     phone the controls carry their own affordances (the selects show their current value,
     the rotate buttons are arrows) and five stacked captions cost more height than they
     are worth — the aria-labels still name every control for assistive tech. */
  .vp-bar { gap: 10px 14px; padding: 12px; }
  .vp-group { flex-wrap: wrap; max-width: 100%; gap: 8px; }
  .vp-group .vp-glabel { display: none; }
  .vp-select, .vp-select-sm { max-width: 100%; flex: 1 1 110px; min-width: 0; }
  .vp-bar input[type="range"], #vpZoom { flex: 1 1 90px; width: auto; min-width: 0; }
  .vp-val { flex: 0 0 auto; font-size: .8rem; }
  .vp-group .btn { flex: 0 0 auto; padding: 10px 13px; }
}