/* Video downloaders (assets/video/video-tool.js). Site tokens from assets/style.css; the page hero and the
   "not available" box reuse assets/pdf/pdf-tools.css. */
.vd-app {
  --vd-danger: #b42318;
  --vd-danger-soft: #fbe9e7;
  max-width: 860px; margin: 0 auto; padding: 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow);
}
.vd-app [hidden] { display: none !important; }
.vd-unavailable { padding: 0; }
.vd-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.vd-form { display: flex; gap: 10px; }
.vd-input {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 14px;
  border: 2px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 12px; background: var(--bg);
}
.vd-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.vd-input input { flex: 1; min-width: 0; padding: 14px 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--text); }
.vd-paste {
  flex: none; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--surface-2); color: var(--text-2);
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.vd-paste:hover { background: var(--accent-soft); color: var(--accent); }
.vd-go { flex: none; padding-left: 26px; padding-right: 26px; font-size: 1rem; }
.vd-go:disabled { opacity: .6; cursor: progress; }

.vd-status { min-height: 1.5em; margin: 12px 2px 0; color: var(--text-2); font-size: .9375rem; }
.vd-status:empty { display: none; }
.vd-status.is-error { color: var(--vd-danger); }
.vd-status.is-ok { color: var(--good); }
.vd-spin {
  display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: vd-spin .8s linear infinite;
}
@keyframes vd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vd-spin { animation-duration: 2.4s; } }

/* ---------- one video ---------- */
.vd-result { margin-top: 16px; }
.vd-card { display: grid; grid-template-columns: minmax(0, 280px) 1fr; gap: 18px; align-items: start; }
.vd-media { position: relative; border-radius: 12px; overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; }
.vd-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-time { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(15, 23, 42, .82); color: #fff; font-size: .8125rem; font-weight: 600; }
.vd-title { margin: 0 0 4px; font-family: var(--font); font-size: 1.125rem; line-height: 1.35; overflow-wrap: anywhere; }
.vd-by { margin: 0 0 12px; color: var(--muted); font-size: .875rem; }
.vd-card.is-tall { grid-template-columns: minmax(0, 180px) 1fr; }
.vd-card.is-tall .vd-media { aspect-ratio: 9 / 16; }
.vd-card.is-tall .vd-choices { grid-template-columns: 1fr; max-width: 440px; }
.vd-stats { list-style: none; margin: -4px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font-size: .8125rem; }
.vd-stats strong { color: var(--text); font-weight: 600; }
.vd-choices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.vd-choice {
  width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.vd-choice:hover, .vd-choice:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.vd-choice strong { font-size: .9375rem; }
.vd-choice span { grid-row: 2; color: var(--muted); font-size: .8125rem; }
.vd-choice em {
  grid-column: 2; grid-row: 1 / 3; padding: 7px 12px; border-radius: 8px; background: var(--accent); color: var(--accent-ink);
  font-style: normal; font-weight: 600; font-size: .8125rem;
}
.vd-choice.is-audio em { background: var(--navy); }
.vd-choice.is-busy { cursor: progress; }
.vd-choice.is-busy em { opacity: .7; }

/* ---------- playlist ---------- */
.vd-plhead { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: end; margin-bottom: 12px; }
.vd-plcontrols { display: flex; gap: 8px; }
.vd-plcontrols select { padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); font: inherit; font-size: .9375rem; color: var(--text); }
.vd-pllist { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; }
.vd-plitem { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.vd-plitem:last-child { border-bottom: 0; }
.vd-plitem img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; flex: none; background: var(--surface-2); }
.vd-pltext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vd-pltext strong { font-weight: 600; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-plmeta { color: var(--muted); font-size: .8125rem; }
.vd-plmeta.is-error { color: var(--vd-danger); white-space: normal; }
.vd-plmeta.is-ok { color: var(--good); }
.vd-plbtn { flex: none; padding: 8px 14px; font-size: .875rem; }

@media (max-width: 639.98px) {
  .vd-app { padding: 12px; border-radius: 16px; }
  .vd-form { flex-direction: column; }
  .vd-go { width: 100%; padding-top: 14px; padding-bottom: 14px; }
  .vd-card, .vd-card.is-tall { grid-template-columns: 1fr; }
  .vd-card.is-tall .vd-media { width: min(100%, 160px); justify-self: center; }
  .vd-choices { grid-template-columns: 1fr; }
  .vd-plhead { align-items: stretch; }
  .vd-plcontrols { width: 100%; }
  .vd-plcontrols select { flex: 1; min-width: 0; }
  .vd-plitem img { width: 72px; }
}