/* ==================================================================
   /tools/youtube-video-length-finder on the foundation look.
   Loaded ONLY when the 'tools-video-length-finder-fnd' redesign switch
   is on for this viewer (never in embed mode); the old page keeps its
   own three stylesheets.

   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 input, text box, badges, rows, the
   picture box and its time tag, chips, the data table and the numbered
   heads are the foundation's and are NOT redrawn here.

   Same shape as the Channel ID Finder: one centred column at every
   width. Paste a link, then the answer right under the bar.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .vlf3-top .fnd-tool-top__in { display: block; }
  /* The answer here is a plain card, never pinned. Relative, never
     static, so nothing layered inside it escapes the card. */
  .fnd .vlf3 .vlf3-out { position: relative; top: auto; }
}
.fnd .vlf3 .fnd-tool-lead,
.fnd .vlf3 .vlf3-ask,
.fnd .vlf3 .vlf3-out { max-width: 760px; margin-left: auto; margin-right: auto; }
/* A wider name and line on a computer, so each takes one line. After
   the 760 above, or it loses. */
@media (min-width: 1024px) {
  .fnd .vlf3 .fnd-tool-lead { max-width: 960px; }
  .fnd .vlf3 .fnd-tool-lead .fnd-display { max-width: none; }
}

/* The name and its line, centred over the bar they introduce. */
.fnd .vlf3 .fnd-tool-lead { text-align: center; }
.fnd .vlf3 .fnd-tool-lead .fnd-display,
.fnd .vlf3 .fnd-tool-lead__sub { margin-left: auto; margin-right: auto; text-align: center; }
.fnd .vlf3 .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .vlf3 h1.fnd-display,
.fnd .vlf3-qa__list summary,
.fnd.vlf3-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
@media (max-width: 413px) {
  .fnd .vlf3 .fnd-tool-lead .fnd-display { font-size: 2.15rem; }
}
@media (max-width: 559px) {
  .fnd .vlf3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}

/* The bar sits bare on the page like a search box: no card around it. */
.fnd .vlf3 .vlf3-ask { background: none; border: 0; border-radius: 0; box-shadow: none; }
.fnd .vlf3 .vlf3-ask > .fnd-card-body { padding: 0; }
.vlf3-ask,
.vlf3-out { scroll-margin-top: calc(var(--header-height, 61px) + 16px); }

/* The search bar, the same as the Channel ID Finder's bar (copied, not
   shared, so no page can move another). */
.fnd .vlf3-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;
}
.vlf3-bar[hidden] { display: none; }
.fnd .vlf3-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);
}
.vlf3-bar > .vlf3-mark { flex: 0 0 auto; font-size: 15px; color: var(--fnd-text-faint); }
.fnd .vlf3 .vlf3-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 .vlf3 .vlf3-bar .fnd-input:focus { box-shadow: none; }
.fnd .vlf3-bar .fnd-btn { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }
.fnd .vlf3-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);
}
.fnd .vlf3 .fnd-btn[aria-busy="true"] { cursor: progress; opacity: .8; }
/* Phones: a narrower button and a 16px box (the size below which an
   iPhone zooms in on a box), so the hint shows whole. */
@media (max-width: 559px) {
  .fnd .vlf3-bar { padding-left: 16px; }
  .fnd .vlf3-bar .fnd-btn { padding: 0 var(--fnd-s2); }
  .fnd .vlf3 .vlf3-bar .fnd-input { padding: 0 2px; font-size: 16px; }
}
/* The smallest phones drop the search mark so the hint still fits. */
@media (max-width: 399px) {
  .fnd .vlf3-bar { padding-left: 14px; }
  .vlf3-bar > .vlf3-mark { display: none; }
}
.fnd .vlf3 .vlf3-ask .fnd-error { text-align: center; text-wrap: pretty; }

/* Many at once: the shared text box, then the count and the button on
   one line. */
.vlf3-many[hidden] { display: none; }
.fnd .vlf3 .vlf3-many .fnd-label { margin-bottom: var(--fnd-s1); }
.fnd .vlf3 .vlf3-list { font-size: 16px; line-height: 1.6; }
.vlf3-many__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--fnd-s2) var(--fnd-s3); margin-top: var(--fnd-s2);
}
.fnd .vlf3 .vlf3-count { display: inline; margin: 0; text-align: left; }
@media (max-width: 559px) {
  .fnd .vlf3 .vlf3-many__row .fnd-btn { flex: 1 1 100%; justify-content: center; }
  .fnd .vlf3 .vlf3-count { flex: 1 1 100%; }
}

/* "Try:" and three examples. The dots sit in the gaps; a part that
   starts a line has its dot outside the box, where it is clipped. None
   after the key. */
.fnd .vlf3 .vlf3-try {
  justify-content: center; margin: var(--fnd-s1) 0 0;
  column-gap: 21px; row-gap: 0; overflow: hidden;
  color: var(--fnd-text-soft); font-size: var(--fnd-t-meta);
}
.fnd .vlf3 .vlf3-try > span { position: relative; display: inline-flex; align-items: center; }
.fnd .vlf3 .vlf3-try span + span::before {
  content: "\00b7"; position: absolute; top: 50%; left: -21px; width: 21px;
  margin: 0; transform: translateY(-50%); text-align: center; opacity: .6;
}
.fnd .vlf3 .vlf3-try .vlf3-try__k + span::before { content: none; }
.fnd .vlf3 .vlf3-try__k { margin-right: -13px; }
.vlf3-try[hidden] { display: none; }
/* Three examples do not fit one line on a small phone: two do. */
@media (max-width: 439px) {
  .fnd .vlf3 .vlf3-try > span:nth-child(4) { display: none; }
}
/* The switch between one and many, centred under the examples. */
.fnd .vlf3 .vlf3-mode { margin: var(--fnd-s1) 0 0; text-align: center; }

/* ------------------------------------------------------------------
   2. THE ANSWER: the video, its length large, the faster speeds, the
   next step. Or the many-at-once list with its total.
   ------------------------------------------------------------------ */
.fnd .vlf3 .vlf3-out { margin-top: var(--fnd-s5); transition: opacity 160ms ease; }
/* While it looks, everything fades and waits except Start over, which
   stays live so they can cancel. */
.fnd .vlf3 .vlf3-single > :not(.vlf3-acts),
.fnd .vlf3 .vlf3-exnote { transition: opacity 160ms ease; }
.fnd .vlf3 .vlf3-out--busy .vlf3-single > :not(.vlf3-acts),
.fnd .vlf3 .vlf3-out--busy .vlf3-exnote,
.fnd .vlf3 .vlf3-out--busy .vlf3-single .vlf3-acts > .vlf3-copylen,
.fnd .vlf3 .vlf3-out--busy .vlf3-single .vlf3-acts__more > :not(.vlf3-reset) { opacity: .45; pointer-events: none; }
.vlf3-out.vlf3-out--in { animation: vlf3-in 320ms cubic-bezier(.22, 1, .36, 1); }
@keyframes vlf3-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vlf3-out.vlf3-out--in { animation: none; }
  .fnd .vlf3 .vlf3-out { transition: none; }
}
.vlf3-single[hidden],
.vlf3-bulk[hidden] { display: none; }
/* The card body spaces every child after the first, and the hidden
   example note still counts as one, so the answer would sit 26px low. */
.fnd .vlf3 .vlf3-out .vlf3-single,
.fnd .vlf3 .vlf3-out .vlf3-bulk { margin-top: 0; }

/* The example: a badge saying so, and no buttons row, so "Find length"
   stays the one main button until the answer is theirs. */
.fnd .vlf3-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);
}
.fnd .vlf3-exnote > span:last-child { text-wrap: pretty; }
.vlf3-out:not(.vlf3-out--example) .vlf3-exnote,
.vlf3-out--example .vlf3-acts { display: none; }

/* The video: its picture with the time on it, then the title, the
   channel and the date. */
.vlf3-head {
  display: grid; grid-template-columns: 192px minmax(0, 1fr);
  align-items: center; gap: var(--fnd-s3) var(--fnd-s4);
}
.fnd .vlf3 .vlf3-thumb { width: 100%; }
.fnd .vlf3 .vlf3-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vlf3-head__main { min-width: 0; }
.fnd .vlf3-head__title {
  margin: 0; min-width: 0;
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: var(--fnd-t-h3-lg); line-height: 1.3; color: var(--fnd-text);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vlf3-head__title:focus { outline: none; }
.fnd .vlf3-head__meta {
  display: flex; flex-wrap: wrap; column-gap: 21px; row-gap: 0; overflow: hidden;
  margin: 2px 0 0; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft);
}
.fnd .vlf3-head__meta > span { position: relative; min-width: 0; overflow-wrap: anywhere; }
.fnd .vlf3-head__meta > span + span::before {
  content: "\00b7"; position: absolute; top: 0; left: -21px; width: 21px; text-align: center; opacity: .6;
}
@media (max-width: 559px) {
  .vlf3-head { grid-template-columns: 120px minmax(0, 1fr); gap: var(--fnd-s3); }
  .fnd .vlf3 .vlf3-head .vlf3-head__title { font-size: var(--fnd-t-h3); -webkit-line-clamp: 3; }
}

/* The length: a label, then the time large enough to read at a glance,
   then the same in words. */
.vlf3-len { margin-top: var(--fnd-s4); }
.fnd .vlf3 .vlf3-len__k { margin: 0; font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-text-soft); }
.fnd .vlf3 .vlf3-len__v {
  margin: 4px 0 0;
  font-size: clamp(2.75rem, 10vw, 4.5rem); line-height: 1;
  color: var(--fnd-text); white-space: nowrap;
}
.fnd .vlf3 .vlf3-len__l { margin: var(--fnd-s1) 0 0; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); text-wrap: pretty; }
.fnd .vlf3 .vlf3-note { margin: var(--fnd-s2) 0 0; color: var(--fnd-text-soft); text-wrap: pretty; }
.vlf3-note[hidden] { display: none; }

/* Copy length first, the quiet buttons beside it. On a phone the main
   one takes the whole width and the rest share the line under it. */
.vlf3-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fnd-s2) var(--fnd-s4); margin-top: var(--fnd-s4); }
.vlf3-acts__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fnd-s4); }
.vlf3-acts[hidden],
.vlf3-acts [hidden] { display: none; }
.fnd .vlf3 .vlf3-copylen[data-copied="true"],
.fnd .vlf3 #vlf3-copy-all[data-copied="true"] { background: var(--fnd-ok); border-color: var(--fnd-ok); }
.fnd .vlf3 .fnd-btn:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 559px) {
  .fnd .vlf3 .vlf3-acts > .fnd-btn { flex: 1 1 100%; justify-content: center; }
  .vlf3-acts__more { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--fnd-s2); }
  .vlf3-acts__more > * { justify-self: start; }
  .vlf3-acts__more > :nth-child(2) { justify-self: end; }
}
/* Text buttons grown to a 44px tap, in the accent so they read as things
   to press. */
.fnd .vlf3 .vlf3-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); white-space: nowrap; }
.fnd .vlf3 a.vlf3-link { text-decoration: none; }
.fnd .vlf3 .vlf3-link.fnd-textbtn:hover { color: var(--fnd-text); }
.fnd .vlf3 .vlf3-link i { margin-right: 4px; }
.fnd .vlf3 .vlf3-link[data-copied="true"] { color: var(--fnd-ok); }
.fnd .vlf3 .vlf3-link:disabled { cursor: not-allowed; opacity: .55; }

/* The faster speeds: their own band inside the answer, so the heading
   is a step smaller than the video's. */
.vlf3-box { margin-top: var(--fnd-s5); }
.vlf3-box[hidden] { display: none; }
.fnd .vlf3 .vlf3-box .fnd-tool-h3 { margin: 0; font-size: var(--fnd-t-h3); }
.fnd .vlf3 .vlf3-box .fnd-help { margin: 4px 0 var(--fnd-s3); text-wrap: pretty; }
.fnd .vlf3 .vlf3-speeds td:first-child { font-weight: 600; }

/* The next step: under the answer, once it is theirs. */
.vlf3-next {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--fnd-s3) var(--fnd-s4);
  margin-top: var(--fnd-s5); padding-top: var(--fnd-s4);
  border-top: 1px solid var(--fnd-rule);
}
.vlf3-next[hidden] { display: none; }
.vlf3-next__t { flex: 1 1 300px; min-width: 0; }
.fnd .vlf3 .vlf3-next .fnd-tool-h3 { margin: 0; font-size: var(--fnd-t-h3); text-wrap: balance; }
.fnd .vlf3 .vlf3-next__t .fnd-help { margin: 4px 0 0; text-wrap: pretty; }
.vlf3-next__go { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fnd .vlf3 .vlf3-next__hint { margin: 0; }
@media (max-width: 559px) {
  .vlf3-next__go { flex: 1 1 100%; }
  .fnd .vlf3 .vlf3-next__go .fnd-btn { width: 100%; justify-content: center; }
}

/* Many at once: the total, the speed, the buttons, then one row per
   link. */
.vlf3-bulk__head { margin: 0; }
.vlf3-speedrow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--fnd-s2) var(--fnd-s3); margin-top: var(--fnd-s3);
}
.fnd .vlf3 .vlf3-speedrow__k { font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-text-soft); }
/* On a phone the five speeds share one row, equal width, so 2x never
   sits alone on a second line. */
@media (max-width: 559px) {
  .vlf3-speedrow { display: block; }
  .fnd .vlf3 .vlf3-speedrow__k { display: block; margin-bottom: var(--fnd-s2); }
  .fnd .vlf3 .vlf3-speed { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--fnd-s2); }
  .fnd .vlf3 .vlf3-speed .fnd-chip-btn { min-width: 0; padding-left: 0; padding-right: 0; justify-content: center; }
}
.fnd .vlf3 .vlf3-acts--bulk { margin-top: var(--fnd-s3); }

/* Rows: the shared list row, the picture with its time, and the time
   at the chosen speed at the end. The time is short, so it keeps its
   own column on a phone too. */
.fnd .vlf3 .vlf3-rows { margin-top: var(--fnd-s3); }
/* A failed row names its link; a long one breaks rather than overflow. */
.fnd .vlf3 .vlf3-badq { overflow-wrap: anywhere; }
.fnd .vlf3 .vlf3-rows .fnd-row { grid-template-columns: 104px minmax(0, 1fr) auto; }
.fnd .vlf3 .vlf3-rows .fnd-row-end { grid-column: 3; grid-row: auto; }
.fnd .vlf3 .vlf3-rows .fnd-row-end:empty { display: none; }
@media (max-width: 559px) {
  .fnd .vlf3 .vlf3-rows .fnd-row { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .fnd .vlf3 .vlf3-rows .fnd-row-end { grid-column: 3; grid-row: auto; margin-top: 0; }
}
.fnd .vlf3 .vlf3-rows .fnd-row-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fnd .vlf3 .vlf3-rows .fnd-media-tag { right: 4px; bottom: 4px; padding: 1px 5px; font-size: 12px; }
.fnd .vlf3 .vlf3-rows .fnd-media--empty { display: flex; align-items: center; justify-content: center; color: var(--fnd-text-faint); }
/* Whole words wrap; only a word wider than the row is broken. */
.fnd .vlf3 .vlf3-rows .fnd-row-t,
.fnd .vlf3 .vlf3-rows .fnd-row-meta > span { min-width: 0; overflow-wrap: break-word; word-break: normal; }
.fnd .vlf3 .vlf3-rows .fnd-row-meta { gap: 2px 0; column-gap: 21px; overflow: hidden; }
.fnd .vlf3 .vlf3-rows .fnd-row-meta > span { position: relative; }
.fnd .vlf3 .vlf3-rows .fnd-row-meta > span + span::before {
  content: "\00b7"; position: absolute; top: 0; left: -21px; width: 21px; text-align: center; opacity: .6;
}
/* A row still looking: its text waits, faded. */
.fnd .vlf3 .vlf3-rows .fnd-row[data-state="wait"] .fnd-row-main { opacity: .55; }
/* The time at the chosen speed: the figure the list is for. */
.fnd .vlf3 .vlf3-rows .vlf3-end {
  font-family: var(--fnd-display-font); font-weight: 700; font-size: var(--fnd-t-sm);
  color: var(--fnd-text); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ------------------------------------------------------------------
   3. THE GUIDE
   ------------------------------------------------------------------ */
.fnd .vlf3-guide .fnd-tool-read .fnd-h2 {
  margin-top: var(--fnd-s8);
  max-width: 24ch;
  scroll-margin-top: calc(var(--header-height, 61px) + var(--fnd-s4));
}
.vlf3-guide .fnd-tool-read .fnd-h2:focus { outline: none; }
.fnd .vlf3-guide .fnd-toc li > a:not(.fnd-btn) { text-wrap: pretty; }
@media (max-width: 767px) {
  .fnd .vlf3-guide .fnd-tool-read .fnd-h2 { margin-top: var(--fnd-s7); }
}
/* A link inside a sentence grows to a 44px press without moving the text. */
.fnd .vlf3-guide .fnd-tool-read p a:not(.fnd-btn),
.fnd .vlf3-guide .fnd-tool-read li a:not(.fnd-btn),
.fnd .vlf3-guide .fnd-tool-read td a:not(.fnd-btn),
.fnd .vlf3-qa__list p a:not(.fnd-btn) { padding-block: 13px; }
.fnd .vlf3-guide .fnd-tbl + p,
.fnd .vlf3-guide .vlf3-steps + p { margin-top: var(--fnd-s3); }
.vlf3-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fnd .vlf3-guide .vlf3-mono { color: var(--fnd-text); overflow-wrap: anywhere; }

/* The steps: the shared numbered heads, a paragraph under each. */
.vlf3-steps { list-style: none; margin: var(--fnd-s4) 0 0; padding: 0; }
.vlf3-steps li + li { margin-top: var(--fnd-s5); }
.vlf3-steps .fnd-numhead { margin-bottom: var(--fnd-s2); }
.fnd .vlf3-steps .fnd-numhead__t { font-size: var(--fnd-t-h3); }
.vlf3-steps p { margin: 0; padding-left: calc(32px + var(--fnd-s3)); }
@media (max-width: 559px) {
  .vlf3-steps p { padding-left: 0; }
}

/* The speed table holds figures: the shared data table as it is, the
   speed in bold. */
.fnd .vlf3-guide .vlf3-tbl-speed td:first-child { font-weight: 600; }

/* The comparison table holds sentences, not figures: the shared data
   table keeps its card and rules, but its cells wrap here. On a phone
   each cell after the name takes its own named line. */
.fnd .vlf3-tbl tbody td:not(:first-child) { white-space: normal; font-variant-numeric: normal; overflow-wrap: anywhere; }
.fnd .vlf3-tbl td:first-child { white-space: nowrap; }
@media (min-width: 640px) {
  .vlf3-tbl td { vertical-align: top; }
  .fnd .vlf3-guide .vlf3-tbl--3 td:nth-child(3) { min-width: 11rem; }
}
/* Not the name cell: text-wrap would undo its nowrap. */
.fnd .vlf3-guide .vlf3-tbl td:not(:first-child) { text-wrap: pretty; }
@media (max-width: 639px) {
  .fnd .vlf3-guide .vlf3-tbl--3.fnd-tbl--data thead th:last-child { display: none; }
  .fnd .vlf3-guide .vlf3-tbl--3.fnd-tbl--data tbody td:first-child { flex: 0 0 100%; white-space: normal; }
  .fnd .vlf3-guide .vlf3-tbl--3.fnd-tbl--data tbody td:not(:first-child) {
    order: 4; flex: 0 0 100%; min-width: 0; padding: 4px 0 0;
    white-space: normal; text-align: left; overflow-wrap: anywhere;
    font-size: var(--fnd-t-meta); font-weight: 400; color: var(--fnd-text);
  }
  .fnd .vlf3-guide .vlf3-tbl--3.fnd-tbl--data tbody td:not(:first-child)::before {
    content: attr(data-l) " "; font-weight: 600; color: var(--fnd-text-soft);
  }
}
.fnd .vlf3-src { margin-top: var(--fnd-s4); text-wrap: pretty; }