/* ==================================================================
   /tools/youtube-frame-by-frame on the foundation look.
   A new page, public since 2026-11-04. Plays YouTube, Vimeo and a
   video from the visitor's own device (zoom and Save this frame are
   for that last one only).

   Layout unique to this page only. The first screen, the guide, the
   questions, the links and the close are the shared tool kit
   (foundation-tools.css); the inputs, buttons, segments, the switch,
   badges, callouts, the data table and the numbered heads are the
   foundation's and are NOT redrawn here.

   Same shape as the embed code page (tools-embed-code-fnd.css), whose
   sections 1, 2 and 4 are mirrored here with the fbf- prefix rather
   than shared, so neither page can move the other: one centred column
   at every width. Paste, then the player right under the bar with where
   it is in big type and the five step buttons, then repeat and share.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .fbf-top .fnd-tool-top__in { display: block; }
  /* A plain card, never pinned: the cards below would slide under it. */
  .fnd .fbf .fbf-out { position: relative; top: auto; }
  .fnd .fbf .fnd-tool-lead { max-width: 960px; }
  .fnd .fbf .fnd-tool-lead .fnd-display { max-width: none; }
}
.fnd .fbf .fnd-tool-lead,
.fnd .fbf .fbf-ask,
.fnd .fbf .fbf-out,
.fnd .fbf .fbf-more { max-width: 760px; margin-left: auto; margin-right: auto; }

.fnd .fbf .fnd-tool-lead { text-align: center; }
.fnd .fbf .fnd-tool-lead .fnd-display,
.fnd .fbf .fnd-tool-lead__sub { margin-left: auto; margin-right: auto; text-align: center; }
.fnd .fbf .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .fbf h1.fnd-display,
.fnd .fbf-qa__list summary,
.fnd.fbf-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
@media (max-width: 413px) {
  .fnd .fbf .fnd-tool-lead .fnd-display { font-size: 2.15rem; }
}
@media (max-width: 559px) {
  .fnd .fbf .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}

/* The bar sits bare on the page like a search box: no card around it. */
.fnd .fbf .fbf-ask { background: none; border: 0; border-radius: 0; box-shadow: none; }
.fnd .fbf .fbf-ask > .fnd-card-body { padding: 0; }
/* The page chrome already keeps the sticky header's height clear when it
   scrolls (html.fndc-doc scroll-padding-top); adding the header here too
   parked the player 150px down a phone screen. */
.fbf-ask,
.fbf-out { scroll-margin-top: 0; }

/* The paste bar: the third copy (citation .cite2-bar, embed .ecg3-bar,
   this). Due to move into the foundation as one shared part. */
.fnd .fbf-bar {
  display: flex; align-items: center; gap: var(--fnd-s2);
  background: var(--fnd-card);
  border: 1px solid var(--fnd-edge);
  border-radius: 999px;
  padding: 5px 5px 5px 20px;
  box-shadow: 0 1px 2px rgba(23, 20, 31, .05), 0 12px 28px -16px rgba(23, 20, 31, .3);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.fnd .fbf-bar:focus-within {
  border-color: var(--fnd-text);
  box-shadow: 0 0 0 3px var(--fnd-accent-soft), 0 12px 28px -16px rgba(23, 20, 31, .3);
}
.fbf-bar > .fa-link { flex: 0 0 auto; font-size: 15px; color: var(--fnd-text-faint); }
.fnd .fbf .fbf-bar .fnd-input {
  flex: 1 1 auto; width: auto; min-width: 0;
  padding: 0 var(--fnd-s1);
  background: transparent; border: 0; border-radius: 0;
}
.fnd .fbf .fbf-bar .fnd-input:focus { box-shadow: none; }
.fnd .fbf-bar .fnd-btn { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }
.fnd .fbf-bar:has(.fnd-btn:focus-visible) {
  border-color: var(--fnd-edge);
  box-shadow: 0 1px 2px rgba(23, 20, 31, .05), 0 12px 28px -16px rgba(23, 20, 31, .3);
}
@media (max-width: 559px) {
  .fnd .fbf-bar { padding-left: 16px; }
}
@media (max-width: 413px) {
  .fnd .fbf-bar .fnd-btn { padding: 0 var(--fnd-s3); }
}
@media (max-width: 379px) {
  .fnd .fbf-bar { padding-left: 14px; }
  .fbf-bar > .fa-link { display: none; }
}
.fnd .fbf .fbf-bar__help { margin: var(--fnd-s3) 0 0; text-align: center; text-wrap: pretty; }
.fnd .fbf .fbf-bar ~ .fnd-error { text-align: center; text-wrap: pretty; }
/* A video file dragged over the tool: the bar lights up where it lands. */
.fnd .fbf-bar.fbf-bar--drop {
  border-color: var(--fnd-accent-deep);
  box-shadow: 0 0 0 3px var(--fnd-accent-soft), 0 12px 28px -16px rgba(23, 20, 31, .3);
}
/* Open a video from your device: one quiet button under the bar. */
.fbf-file { display: flex; justify-content: center; margin-top: var(--fnd-s3); }
.fnd .fbf .fbf-file .fnd-btn { white-space: normal; text-align: center; }

/* ------------------------------------------------------------------
   2. THE PLAYER: the video, where it is, the five steps, the settings
   ------------------------------------------------------------------ */
.fnd .fbf .fbf-out { margin-top: var(--fnd-s5); }

.fnd .fbf-exnote {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px var(--fnd-s2);
  margin: 0 0 var(--fnd-s4);
  font-size: var(--fnd-t-meta); line-height: 1.5; color: var(--fnd-text-soft);
  text-wrap: pretty;
}
.fbf-out:not(.fbf-out--example) .fbf-exnote { display: none; }

.fbf-video { margin-bottom: var(--fnd-s3); }
/* The example note keeps its own space below it. The card's sibling gap
   still counted the note once it was hidden, leaving an empty band above
   the title of every opened video. */
.fnd .fbf .fbf-out .fbf-video { margin-top: 0; }
.fnd .fbf-video__title {
  margin: 0;
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: var(--fnd-t-h3); line-height: 1.3; color: var(--fnd-text);
  text-wrap: balance; overflow-wrap: anywhere;
}
.fbf-video__title:focus { outline: none; }
.fnd .fbf-video__meta { margin: 2px 0 0; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); overflow-wrap: anywhere; }
.fbf-video__meta:empty { display: none; }
.fnd .fbf .fbf-warn { margin: var(--fnd-s3) 0 0; text-wrap: pretty; }
.fbf-warn[hidden] { display: none; }
/* A video that cannot play: its buttons stay pressable (a press brings the
   warning back into view) but look switched off. */
.fbf-out--dead .fbf-read,
.fbf-out--dead .fbf-ctl,
.fbf-out--dead .fbf-own,
.fbf-out--dead .fbf-set { opacity: .45; }

/* The stage: the real YouTube player in its own shape. A Short keeps
   its tall shape, never wider than a phone screen. */
.fbf-stage {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--fnd-r-sm);
  overflow: hidden;
  background: var(--fnd-ink);
}
/* Its width also follows the screen's height, so a phone video never pushes
   the step buttons off a phone screen: about 380px stays free for the title,
   the read-out and the buttons (440px on a phone, where the buttons take two
   rows). --fbf-ar is the video's width over height. */
.fbf-stage--tall {
  aspect-ratio: 9 / 16; max-width: 300px; margin-left: auto; margin-right: auto;
  width: min(100%, max(160px, calc((100vh - 380px) * var(--fbf-ar, .5625))));
  width: min(100%, max(160px, calc((100svh - 380px) * var(--fbf-ar, .5625))));
}
@media (max-width: 767px) {
  .fbf-stage--tall {
    width: min(100%, max(160px, calc((100vh - 440px) * var(--fbf-ar, .5625))));
    width: min(100%, max(160px, calc((100svh - 440px) * var(--fbf-ar, .5625))));
  }
}
.fbf-stage iframe,
.fbf-stage #fbf-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fbf-poster {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0; cursor: pointer;
  background: var(--fnd-ink);
}
.fbf-poster img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; transition: opacity 150ms ease; }
.fbf-poster:hover img { opacity: 1; }
.fbf-poster__play {
  position: absolute; left: 50%; top: 50%;
  width: 68px; height: 48px; margin: -24px 0 0 -34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(23, 20, 31, .82); color: #fff; font-size: 20px;
  transition: transform 150ms ease, background-color 150ms ease;
}
.fbf-poster:hover .fbf-poster__play { transform: translateY(-1px) scale(1.04); background: rgba(23, 20, 31, .92); }
.fbf-poster:focus-visible { outline: 3px solid var(--fnd-accent-deep); outline-offset: -3px; }
/* While YouTube's player loads after the first press. */
.fbf-stage--busy .fbf-poster { cursor: progress; }
.fbf-stage--busy .fbf-poster img { opacity: .6; }
/* A Vimeo video waits as a plain dark box until its picture arrives. */
.fbf-poster:not(:has(img)) { background: var(--fnd-ink); }

/* A video from the device: the whole picture, never cropped. Zoomed in,
   it is dragged with a finger or the mouse, so the video's own controls
   step aside. */
.fbf-stage video { object-fit: contain; background: var(--fnd-ink); transition: transform 120ms ease; }
.fbf-stage--zoom { cursor: grab; touch-action: none; }
.fbf-stage--zoom video { pointer-events: none; }
.fbf-stage--drag { cursor: grabbing; }
.fbf-stage--drag video { transition: none; }
/* Over the video while the page reads its frame rate. */
.fbf-stage__note {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--fnd-s2);
  background: rgba(23, 20, 31, .72); color: #fff;
  font-size: var(--fnd-t-sm); font-weight: 600;
  pointer-events: none;
}

/* Where the video is, in big figures that never jump as they change:
   the time on the left, the frame number on the right. */
.fbf-read {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; /* an hour-long 60 fps video on a small phone: the frame drops below, never off the side */
  gap: var(--fnd-s1) var(--fnd-s4);
  margin-top: var(--fnd-s4);
}
.fnd .fbf-read__t--end { margin-left: auto; }
.fnd .fbf-read__t { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.fnd .fbf-read__t--end { align-items: flex-end; text-align: right; }
.fnd .fbf-read__k {
  font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-text-soft);
}
.fnd .fbf-read__v {
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: var(--fnd-t-h2); line-height: 1.1; color: var(--fnd-text);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  white-space: nowrap;
}
@media (max-width: 413px) {
  .fnd .fbf-read__v { font-size: 1.75rem; }
}
@media (max-width: 359px) {
  .fnd .fbf-read__v { font-size: 1.4rem; }
}

/* The five steps: one row, each button an icon over a short word, all
   the same width so the frame buttons sit in the same place every time. */
.fbf-ctl {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--fnd-s2);
  margin-top: var(--fnd-s3);
  scroll-margin-bottom: var(--fnd-s3);
}
.fnd .fbf .fbf-ctl__b {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  min-width: 0; height: auto; min-height: 64px;
  padding: var(--fnd-s2) 4px;
  font-size: var(--fnd-t-meta); line-height: 1.2; white-space: normal; text-align: center;
}
.fnd .fbf .fbf-ctl__b i { font-size: 17px; }
.fnd .fbf .fbf-ctl__b span { overflow-wrap: normal; word-break: normal; }
/* A phone has no room for five across: the two frame steps sit side by
   side first, the two one-second jumps under them, then Play across the
   width, each with its icon beside its word. */
@media (max-width: 559px) {
  .fbf-ctl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "bf ff" "bs fs" "pl pl";
  }
  .fnd .fbf .fbf-ctl__b {
    flex-direction: row; gap: var(--fnd-s2);
    min-height: 48px; padding: 0 var(--fnd-s2);
    font-size: var(--fnd-t-sm);
  }
  .fnd .fbf .fbf-ctl__b span { white-space: nowrap; }
  .fnd .fbf .fbf-ctl__b i { font-size: 15px; }
  .fbf-ctl [data-step="-1f"] { grid-area: bf; }
  .fbf-ctl [data-step="1f"] { grid-area: ff; }
  .fbf-ctl [data-step="-1s"] { grid-area: bs; }
  .fbf-ctl [data-step="1s"] { grid-area: fs; }
  .fbf-ctl .fbf-ctl__play { grid-area: pl; }
}

/* Save this frame, for a video from the device: the button beside one
   line of what it does, stacked on a phone. */
.fbf-own {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--fnd-s2) var(--fnd-s3);
  margin-top: var(--fnd-s3);
}
.fbf-own[hidden] { display: none; }
.fnd .fbf-own__d { margin: 0; flex: 1 1 220px; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); text-wrap: pretty; }
.fnd .fbf .fbf-save { flex: 0 0 auto; white-space: nowrap; }
.fnd .fbf .fbf-save[data-done="true"] { background: var(--fnd-ok); border-color: var(--fnd-ok); color: #fff; }
@media (max-width: 559px) {
  .fnd .fbf .fbf-save { flex: 1 1 100%; justify-content: center; }
}

/* Speed and frame rate: the label over its segment on a phone, beside
   it on a wider screen. */
.fbf-set { margin-top: var(--fnd-s4); }
.fbf-set__row[hidden] { display: none; }
.fnd .fbf .fbf-fps-note { margin: var(--fnd-s2) 0 0; text-wrap: pretty; }
.fbf-fps-note[hidden] { display: none; }
.fbf-fps-note + .fbf-set__row { margin-top: var(--fnd-s3); }
.fbf-set__row { display: flex; flex-direction: column; gap: var(--fnd-s2); }
.fbf-set__row + .fbf-set__row { margin-top: var(--fnd-s3); }
.fnd .fbf-set .fnd-label { margin: 0; }
.fnd .fbf .fbf-seg { display: flex; width: 100%; }
.fnd .fbf .fbf-seg button { flex: 1 1 0; min-width: 0; font-variant-numeric: tabular-nums; }
/* Six frame rates: chips in three columns on a phone (24 25 30 / 50 60 120),
   so every one stays a full tap wide; one row beside the label when wider. */
.fnd .fbf .fbf-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fnd .fbf .fbf-chips .fnd-chip-btn { justify-content: center; min-width: 44px; font-variant-numeric: tabular-nums; }
@media (min-width: 560px) {
  .fbf-set__row { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--fnd-s4); }
  .fnd .fbf .fbf-seg { width: auto; flex: 0 1 360px; }
  .fnd .fbf .fbf-chips { display: flex; flex: 0 1 auto; justify-content: flex-end; }
}

/* The keys, for a keyboard only. No key style exists in the foundation
   yet (prior-art, 2026-11-03), so it is this page's own until a second
   page wants one. */
.fnd .fbf-keys {
  margin: var(--fnd-s4) 0 0; padding-top: var(--fnd-s3);
  border-top: 1px solid var(--fnd-rule);
  font-size: var(--fnd-t-meta); line-height: 2; color: var(--fnd-text-soft);
  text-wrap: pretty;
}
.fbf-keys__k { font-weight: 600; color: var(--fnd-text); }
.fnd .fbf kbd {
  display: inline-block; min-width: 1.6em;
  padding: 0 6px;
  border: 1px solid var(--fnd-edge); border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--fnd-card);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; line-height: 1.5; font-weight: 600; color: var(--fnd-text);
  text-align: center; white-space: nowrap;
}
@media (hover: none) and (pointer: coarse) {
  .fnd .fbf-keys { display: none; }
}

/* ------------------------------------------------------------------
   3. REPEAT ONE PART, SHARE THIS EXACT MOMENT
   Two working cards under the player, one column at every width.
   ------------------------------------------------------------------ */
.fnd .fbf .fbf-more { grid-template-columns: minmax(0, 1fr); gap: var(--fnd-s5); margin-top: var(--fnd-s6); }
.fnd .fbf .fbf-card .fnd-tool-more__sub { margin: 4px 0 0; text-wrap: pretty; }
.fnd .fbf-card__foot { margin: var(--fnd-s1) 0 0; }
.fnd .fbf .fbf-card .fnd-error { margin-top: var(--fnd-s3); text-wrap: pretty; }

.fbf-ab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fnd-s2); margin-top: var(--fnd-s4); }
.fnd .fbf .fbf-ab .fnd-btn { width: 100%; justify-content: center; }
@media (min-width: 560px) {
  .fbf-ab { display: flex; flex-wrap: wrap; }
  .fnd .fbf .fbf-ab .fnd-btn { width: auto; }
}
.fnd .fbf-ab__read {
  margin: var(--fnd-s3) 0 0;
  font-size: var(--fnd-t-body); color: var(--fnd-text);
  font-variant-numeric: tabular-nums; text-wrap: pretty;
}

.fbf-sw { list-style: none; margin: var(--fnd-s3) 0 0; padding: 0; }
.fbf-sw li + li { border-top: 1px solid var(--fnd-rule); }
.fnd .fbf-sw .fnd-switch { display: flex; width: 100%; padding: 6px 0; font-size: var(--fnd-t-body); color: var(--fnd-text); }
.fbf-sw__t { display: flex; flex-direction: column; min-width: 0; }
.fbf-sw__d { font-size: var(--fnd-t-meta); color: var(--fnd-text-faint); text-wrap: pretty; }

/* Text buttons grown to a 44px tap, in the accent so they read as things
   to press. */
.fnd .fbf .fbf-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); }
.fnd .fbf .fbf-link.fnd-textbtn:hover { color: var(--fnd-text); }

/* The link to this moment and Copy: side by side on a computer, the
   button under the link on a phone. */
.fbf-share { display: flex; align-items: center; gap: var(--fnd-s2); margin-top: var(--fnd-s4); }
.fnd .fbf .fbf-share__in {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fnd-t-sm); color: var(--fnd-text-soft);
  text-overflow: ellipsis;
}
.fnd .fbf .fbf-copy { flex: 0 0 auto; white-space: nowrap; }
.fnd .fbf .fbf-copy[data-copied="true"] { background: var(--fnd-ok); border-color: var(--fnd-ok); color: #fff; }
@media (max-width: 559px) {
  .fbf-share { flex-direction: column; align-items: stretch; }
  .fnd .fbf .fbf-copy { justify-content: center; }
}
.fbf-share[hidden],
.fbf-share__note[hidden] { display: none; }
.fnd .fbf .fbf-share__note { margin: var(--fnd-s4) 0 0; text-wrap: pretty; }

/* ------------------------------------------------------------------
   4. THE GUIDE
   ------------------------------------------------------------------ */
.fnd .fbf-guide .fnd-tool-read .fnd-h2 {
  margin-top: var(--fnd-s8);
  max-width: 24ch;
  scroll-margin-top: 0; /* the chrome keeps the header clear already */
}
.fbf-guide .fnd-tool-read .fnd-h2:focus { outline: none; }
@media (max-width: 767px) {
  .fnd .fbf-guide .fnd-tool-read .fnd-h2 { margin-top: var(--fnd-s7); }
}
.fnd .fbf-guide .fnd-tool-read p a:not(.fnd-btn),
.fnd .fbf-qa__list p a:not(.fnd-btn) { padding-block: 12px; }

.fbf-steps { list-style: none; margin: var(--fnd-s4) 0 0; padding: 0; }
.fbf-steps li + li { margin-top: var(--fnd-s5); }
.fbf-steps .fnd-numhead { margin-bottom: var(--fnd-s2); }
.fnd .fbf-steps .fnd-numhead__t { font-size: var(--fnd-t-h3); }
.fbf-steps p { margin: 0; padding-left: calc(32px + var(--fnd-s3)); }
@media (max-width: 559px) {
  .fbf-steps p { padding-left: 0; }
}

/* The guide tables hold words, not only figures: cells wrap. On a phone
   the last cell takes its own full line under the first. */
.fnd .fbf-tbl tbody td:not(:first-child) { white-space: normal; font-variant-numeric: normal; }
.fnd .fbf-tbl td:first-child { white-space: nowrap; }
@media (min-width: 640px) {
  .fbf-tbl td { vertical-align: top; }
}
.fnd .fbf-guide .fbf-tbl td { text-wrap: pretty; }
@media (max-width: 639px) {
  .fnd .fbf-guide .fbf-tbl.fnd-tbl--data tbody td:last-child {
    order: 4; flex: 0 0 100%; min-width: 0; padding: 2px 0 0;
    white-space: normal; text-align: left; overflow-wrap: anywhere;
    font-weight: 400; color: var(--fnd-text); text-wrap: pretty;
  }
}
.fnd .fbf-guide .fbf-tbl kbd { font-size: .85em; }
.fnd .fbf-src { margin-top: var(--fnd-s4); text-wrap: pretty; }