/* ==================================================================
   /tools/youtube-thumbnail-downloader on the foundation look.
   Loaded ONLY when the 'tools-thumbnail-downloader-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, picture box, rows, YouTube card,
   count, badges, skeletons and numbered heads are the foundation's and
   are NOT redrawn here.

   Same shape as the channel audit and channel ID pages: one centred
   column at every width. Paste a video, then its thumbnail right under
   the bar.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN (copied from the channel ID page, not shared, so
   no page can move another)
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .td3-top .fnd-tool-top__in { display: block; }
  .fnd .td3 .td3-out { position: relative; top: auto; }
}
.fnd .td3 .fnd-tool-lead,
.fnd .td3 .td3-ask,
.fnd .td3 .td3-out { max-width: 760px; margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) {
  .fnd .td3 .fnd-tool-lead { max-width: 960px; }
  .fnd .td3 .fnd-tool-lead .fnd-display { max-width: none; }
}
.fnd .td3 .fnd-tool-lead { text-align: center; }
.fnd .td3 .fnd-tool-lead .fnd-display,
.fnd .td3 .fnd-tool-lead__sub { margin-left: auto; margin-right: auto; text-align: center; }
.fnd .td3 .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .td3 h1.fnd-display,
.fnd .td3-qa__list summary,
.fnd.td3-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
/* "Thumbnail Downloader" stays on one line (no lonely last word), so on a
   phone the name scales with the screen instead of running off it. */
@media (max-width: 559px) {
  .fnd .td3 .fnd-tool-lead .fnd-display { font-size: min(2.5rem, 8vw); }
}
@media (max-width: 559px) {
  .fnd .td3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}

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

.fnd .td3-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;
}
.td3-bar[hidden] { display: none; }
.fnd .td3-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);
}
.td3-bar > .td3-mark { flex: 0 0 auto; font-size: 15px; color: var(--fnd-text-faint); }
.fnd .td3 .td3-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 .td3 .td3-bar .fnd-input:focus { box-shadow: none; }
.fnd .td3-bar .fnd-btn { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }
.fnd .td3-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 .td3 .fnd-btn[aria-busy="true"] { cursor: progress; opacity: .8; }
@media (max-width: 559px) {
  .fnd .td3-bar { padding-left: 16px; }
  .fnd .td3-bar .fnd-btn { padding: 0 var(--fnd-s2); }
  .fnd .td3 .td3-bar .fnd-input { padding: 0 2px; font-size: 16px; }
}
@media (max-width: 399px) {
  .fnd .td3-bar { padding-left: 14px; }
  .td3-bar > .td3-mark { display: none; }
}
.fnd .td3 .td3-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. */
.td3-many[hidden] { display: none; }
.fnd .td3 .td3-many .fnd-label { margin-bottom: var(--fnd-s1); }
.fnd .td3 .td3-list { font-size: 16px; line-height: 1.6; }
.td3-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 .td3 .td3-count { display: inline; margin: 0; text-align: left; }
@media (max-width: 559px) {
  .fnd .td3 .td3-many__row .fnd-btn { flex: 1 1 100%; justify-content: center; }
  .fnd .td3 .td3-count { flex: 1 1 100%; }
}

/* "Try:" and two examples, a dot in each gap. */
.fnd .td3 .td3-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 .td3 .td3-try > span { position: relative; display: inline-flex; align-items: center; }
.fnd .td3 .td3-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 .td3 .td3-try .td3-try__k + span::before { content: none; }
.fnd .td3 .td3-try__k { margin-right: -13px; }
.td3-try[hidden] { display: none; }
/* The switch between one and many, centred under the examples. */
.fnd .td3 .td3-mode { margin: var(--fnd-s1) 0 0; text-align: center; }

/* Text buttons grown to a 44px tap, in the accent so they read as things
   to press. */
.fnd .td3 .td3-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); white-space: nowrap; }
.fnd .td3 a.td3-link { text-decoration: none; }
.fnd .td3 .td3-link.fnd-textbtn:hover { color: var(--fnd-text); }
.fnd .td3 .td3-link i { margin-right: 4px; }
.fnd .td3 .td3-link[data-copied="true"] { color: var(--fnd-ok); }

/* ------------------------------------------------------------------
   2. THE ANSWER: the thumbnail, the button to save it, every size, how
   it looks on YouTube, the next step. Or the many-at-once list.
   ------------------------------------------------------------------ */
.fnd .td3 .td3-out { margin-top: var(--fnd-s5); }
.fnd .td3 .td3-single,
.fnd .td3 .td3-bulk,
.fnd .td3 .td3-exnote { transition: opacity 160ms ease; }
.fnd .td3 .td3-out--busy .td3-single,
.fnd .td3 .td3-out--busy .td3-exnote { opacity: .45; pointer-events: none; }
/* Not found after a real answer: the last one stays, quieter, under the message. */
.fnd .td3 .td3-out--stale .td3-single { opacity: .5; transition: opacity 150ms ease; }
.td3-out.td3-out--in { animation: td3-in 320ms cubic-bezier(.22, 1, .36, 1); }
@keyframes td3-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .td3-out.td3-out--in { animation: none; }
  .fnd .td3 .td3-single,
  .fnd .td3 .td3-bulk { transition: none; }
}
.td3-single[hidden],
.td3-bulk[hidden],
.td3-load[hidden] { display: none; }
/* The card body spaces every child after the first, and a hidden note
   still counts as one, so the answer would sit low. */
.fnd .td3 .td3-out .td3-single,
.fnd .td3 .td3-out .td3-bulk,
.fnd .td3 .td3-out .td3-load { margin-top: 0; }

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

/* Loading: a picture-shaped wait, then two lines. */
.fnd .td3 .td3-load__media { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-bottom: var(--fnd-s3); border-radius: var(--fnd-r-sm); }
.fnd .td3 .td3-load .fnd-skel--t:last-child { width: 60%; }

/* The thumbnail, as big as the card allows, then its title. */
.fnd .td3 .td3-big { border-radius: var(--fnd-r-sm); }
.td3-head { margin-top: var(--fnd-s3); min-width: 0; }
.fnd .td3-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; text-wrap: pretty;
}
.td3-head__title:focus { outline: none; }
.fnd .td3-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 .td3-head__meta > span { position: relative; min-width: 0; overflow-wrap: anywhere; }
.fnd .td3-head__meta > span + span::before {
  content: "\00b7"; position: absolute; top: 0; left: -21px; width: 21px; text-align: center; opacity: .6;
}

/* Download first, the quiet buttons beside it. On a phone the main one
   takes the whole width and the rest share the line under it. */
.td3-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fnd-s2) var(--fnd-s4); margin-top: var(--fnd-s4); }
.td3-acts__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fnd-s4); }
.td3-acts[hidden],
.td3-acts [hidden] { display: none; }
@media (max-width: 559px) {
  .fnd .td3 .td3-acts > .fnd-btn { flex: 1 1 100%; justify-content: center; }
  .td3-acts__more { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--fnd-s2); }
  .td3-acts__more > * { justify-self: start; }
  .td3-acts__more > :nth-child(2) { justify-self: end; }
}
.fnd .td3 .td3-note { margin: var(--fnd-s2) 0 0; color: var(--fnd-text-soft); text-wrap: pretty; }
.td3-note[hidden] { display: none; }
.fnd .td3 .td3-note a { color: var(--fnd-accent-deep); font-weight: 600; padding-block: 12px; }

/* Every size, and how it looks: each its own band inside the answer, so
   their headings are a step smaller than the title. */
.td3-box { margin-top: var(--fnd-s6); }
.fnd .td3 .td3-box .fnd-tool-h3 { margin: 0; font-size: var(--fnd-t-h3); text-wrap: balance; }
.fnd .td3 .td3-box > .fnd-help { margin: 4px 0 0; text-wrap: pretty; }

/* Rows: the shared list row with the size's own picture. */
.fnd .td3 .td3-rows { margin-top: var(--fnd-s3); }
.fnd .td3 .td3-rows .fnd-row-t,
.fnd .td3 .td3-rows .fnd-row-meta > span { min-width: 0; overflow-wrap: break-word; word-break: normal; }
.fnd .td3 .td3-rows .fnd-row-meta { gap: 2px 0; column-gap: 21px; overflow: hidden; }
.fnd .td3 .td3-rows .fnd-row-meta > span { position: relative; }
.fnd .td3 .td3-rows .fnd-row-meta > span + span::before {
  content: "\00b7"; position: absolute; top: 0; left: -21px; width: 21px; text-align: center; opacity: .6;
}
.fnd .td3 .td3-rows .fnd-row-end { flex-wrap: wrap; column-gap: var(--fnd-s4); }
.fnd .td3 .td3-rows .fnd-row-end [hidden] { display: none; }
/* On a phone the buttons take the row's whole width under the picture,
   so Download and Copy link share one line instead of stacking. */
@media (max-width: 559px) {
  .fnd .td3 .td3-rows .fnd-row { row-gap: var(--fnd-s2); }
  .fnd .td3 .td3-rows .fnd-row-end { grid-column: 1 / -1; }
}
/* A size YouTube never made for this video: faded, its buttons gone. */
.fnd .td3 .td3-size[data-gone="1"] .fnd-row-media,
.fnd .td3 .td3-size[data-gone="1"] .fnd-row-main { opacity: .5; }
.fnd .td3 .td3-size__gone { font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); }
/* A row still looking: its text waits, faded. */
.fnd .td3 .td3-rows .fnd-row[data-state="wait"] .fnd-row-main { opacity: .55; }
.fnd .td3 .td3-rows .fnd-row[data-state="bad"] .fnd-row-media .fnd-media { display: flex; align-items: center; justify-content: center; color: var(--fnd-text-faint); }
.fnd .td3 .td3-from { display: block; margin-top: 2px; overflow-wrap: anywhere; }

/* How it looks on YouTube: the home page card, then the card beside a
   video, side by side from tablet up. The light YouTube colours are the
   card's own (.fnd-ytcard--light). */
.td3-yt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fnd-s4); margin-top: var(--fnd-s3); }
.fnd .td3 .td3-yt__col,
.fnd .td3 .td3-yt .fnd-ytcard,
.fnd .td3 .td3-yt .fnd-ytcard-meta { min-width: 0; }
@media (min-width: 640px) {
  .td3-yt { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
}
.fnd .td3 .td3-yt__k { margin: 0 0 var(--fnd-s1); font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-text-soft); }
.fnd .td3 .td3-yt__home { max-width: 360px; }
.fnd .td3 .td3-yt__side { --fnd-ytcard-thumb-w: 168px; max-width: 420px; }
@media (max-width: 413px) {
  .fnd .td3 .td3-yt__side { --fnd-ytcard-thumb-w: 140px; }
}
.fnd .td3 .td3-yt__av { display: flex; align-items: center; justify-content: center; }
.fnd .td3 .td3-yt__av .fnd-ytcard-initial { font-size: 16px; }

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

/* Many at once: a count, the buttons, then one row per line. */
.td3-bulk__head { margin: 0; }
.fnd .td3 .td3-acts--bulk { margin-top: var(--fnd-s3); }

/* ------------------------------------------------------------------
   3. THE GUIDE
   ------------------------------------------------------------------ */
.fnd .td3-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));
}
.td3-guide .fnd-tool-read .fnd-h2:focus { outline: none; }
.fnd .td3-guide .fnd-toc li > a:not(.fnd-btn) { text-wrap: pretty; }
@media (max-width: 767px) {
  .fnd .td3-guide .fnd-tool-read .fnd-h2 { margin-top: var(--fnd-s7); }
}
/* A link inside a sentence grows to a 45px press without moving the text. */
.fnd .td3-guide .fnd-tool-read p a:not(.fnd-btn),
.fnd .td3-guide .fnd-tool-read li a:not(.fnd-btn),
.fnd .td3-qa__list p a:not(.fnd-btn) { padding-block: 12px; }
.fnd .td3-guide .td3-steps-g + p,
.fnd .td3-guide .fnd-tbl + p { margin-top: var(--fnd-s3); }

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