/* Cella PDF how-to video player: the More tools tiles on /software/cellapdf/ and the Watch links on
   /software/cellapdf/whats-new/ both open their video in this dialog (featvid.js builds it). Uses the page's
   colour variables (--bp, --bp-deep, --ink, --text-secondary). */
@keyframes fv-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
/* The video dialog: the picture on top, a slim control bar below it (never over it), then the title and text.
   Its width is the smallest of 1400 px, the window less room for the arrows, and what still fits the window's height
   (the picture is 16:9; about 150 px is kept for the bar and the text, 32 px for the margins). */
dialog.featvid { --fv-w: min(1400px, calc(100vw - 150px), calc((100vh - 182px) * 16 / 9)); margin: auto; padding: 0; border: none; background: transparent; width: var(--fv-w); max-width: none; max-height: calc(100vh - 32px); overflow: visible; }
@supports (height: 100dvh) { dialog.featvid { --fv-w: min(1400px, calc(100vw - 150px), calc((100dvh - 182px) * 16 / 9)); max-height: calc(100dvh - 32px); } }
dialog.featvid::backdrop { background: rgba(14,12,29,0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog.featvid[open] { animation: fv-in 0.18s ease-out; }
dialog.featvid .fv-box { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,0.5); }
dialog.featvid .fv-stage { position: relative; background: #28292B; cursor: pointer; }
dialog.featvid video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #28292B; }
dialog.featvid .fv-bar { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 10px; background: #F6F4EF; border-top: 1px solid rgba(22,19,43,0.08); border-bottom: 1px solid rgba(22,19,43,0.06); font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--text-secondary); user-select: none; -webkit-user-select: none; }
dialog.featvid .fv-bar button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 6px; border: none; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; font: 600 13px 'DM Sans', sans-serif; }
dialog.featvid .fv-bar button:hover { background: rgba(19,78,148,0.09); }
dialog.featvid .fv-bar button:focus-visible, dialog.featvid .fv-seek:focus-visible { outline: 2px solid var(--bp); outline-offset: 1px; }
dialog.featvid .fv-bar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
dialog.featvid .fv-bar svg.solid { fill: currentColor; stroke: none; }
dialog.featvid .fv-play .i-play, dialog.featvid.is-paused .fv-play .i-pause { display: none; }
dialog.featvid.is-paused .fv-play .i-play { display: block; }
dialog.featvid .fv-speed { min-width: 46px !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 12.5px !important; }
dialog.featvid .fv-speed.slow { background: rgba(19,78,148,0.12); color: var(--bp-deep); }
dialog.featvid .fv-time { flex: 0 0 auto; min-width: 84px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
dialog.featvid .fv-seek { --p: 0%; flex: 1 1 auto; min-width: 60px; height: 22px; margin: 0 4px; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
dialog.featvid .fv-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--bp) var(--p), rgba(22,19,43,0.14) var(--p)); }
dialog.featvid .fv-seek::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--bp) var(--p), rgba(22,19,43,0.14) var(--p)); }
dialog.featvid .fv-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--bp); border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
dialog.featvid .fv-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--bp); border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
dialog.featvid [hidden] { display: none !important; }
/* Full screen shows the picture and the bar together, the bar still below the picture */
dialog.featvid .fv-box:fullscreen { display: flex; flex-direction: column; border-radius: 0; background: #28292B; }
dialog.featvid .fv-box:fullscreen .fv-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
dialog.featvid .fv-box:fullscreen video { width: 100%; height: 100%; aspect-ratio: auto; }
dialog.featvid .fv-box:fullscreen .fv-text { display: none; }
dialog.featvid .fv-box:-webkit-full-screen { display: flex; flex-direction: column; border-radius: 0; background: #28292B; width: 100%; height: 100%; }
dialog.featvid .fv-box:-webkit-full-screen .fv-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
dialog.featvid .fv-box:-webkit-full-screen video { width: 100%; height: 100%; aspect-ratio: auto; }
dialog.featvid .fv-box:-webkit-full-screen .fv-text { display: none; }
dialog.featvid .fv-text { padding: 14px 22px 16px; }
dialog.featvid h2 { font-family: 'Space Grotesk', sans-serif; font-size: 21px; color: var(--ink); margin-bottom: 4px; }
dialog.featvid p { font-size: 15px; color: var(--text-secondary); line-height: 1.55; }
dialog.featvid .lb-close, dialog.featvid .lb-prev, dialog.featvid .lb-next { position: fixed; border: none; border-radius: 12px; width: 44px; height: 44px; background: rgba(255,255,255,0.14); color: white; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
dialog.featvid .lb-close:hover, dialog.featvid .lb-close:focus-visible, dialog.featvid .lb-prev:hover, dialog.featvid .lb-prev:focus-visible, dialog.featvid .lb-next:hover, dialog.featvid .lb-next:focus-visible { background: rgba(255,255,255,0.26); }
dialog.featvid .lb-close { top: 18px; right: 18px; }
dialog.featvid .lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
dialog.featvid .lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  dialog.featvid { --fv-w: calc(100vw - 24px); }
  dialog.featvid .lb-prev, dialog.featvid .lb-next { top: auto; bottom: 18px; transform: none; }
  dialog.featvid .lb-close { top: 10px; right: 10px; }
  dialog.featvid .fv-bar { gap: 2px; padding: 0 4px; }
  dialog.featvid .fv-time { min-width: 0; font-size: 11.5px; }
  dialog.featvid .fv-time .fv-dur-wrap { display: none; }
}

/* A Watch link: a small play mark, the word Watch and the video's length */
a.watch { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; white-space: nowrap; font: 600 13.5px 'DM Sans', sans-serif; color: var(--bp-link, #15559f); text-decoration: none; border-bottom: 1px solid transparent; vertical-align: baseline; }
a.watch::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--bp, #134e94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M7 5.2v7.6l6-3.8z' fill='white'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
a.watch:hover, a.watch:focus-visible { border-bottom-color: currentColor; }
a.watch:focus-visible { outline: 2px solid var(--bp, #134e94); outline-offset: 2px; border-radius: 4px; }
a.watch .len { font: 500 12px 'IBM Plex Mono', monospace; color: var(--text-muted, #8885a0); }