/* ==================================================================
   /tools/youtube-trend-finder on the foundation look.
   Loaded ONLY when the 'tools-trend-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 inputs, the picker, chips, badges,
   callouts, the data table and the numbered heads are the foundation's
   and are NOT redrawn here.

   Same shape as the citation, words to minutes, embed code and
   transcript pages: one centred column at every width. Type a topic,
   then the searches right under the bar, with Copy above them.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .tf3-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 .tf3 .tf3-out { position: relative; top: auto; }
}
.fnd .tf3 .fnd-tool-lead,
.fnd .tf3 .tf3-ask,
.fnd .tf3 .tf3-out { max-width: 760px; margin-left: auto; margin-right: auto; }
/* A wider name and line on a computer, so each takes one line and the
   searches start on the first screen. After the 760 above, or it loses. */
@media (min-width: 1024px) {
  .fnd .tf3 .fnd-tool-lead { max-width: 960px; }
  .fnd .tf3 .fnd-tool-lead .fnd-display { max-width: none; }
}

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

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

/* The search bar, the same as the citation and transcript pages' bars
   (copied, not shared, so no page can move another). */
.fnd .tf3-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 .tf3-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);
}
.tf3-bar > .fa-search { flex: 0 0 auto; font-size: 15px; color: var(--fnd-text-faint); }
.fnd .tf3 .tf3-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 .tf3 .tf3-bar .fnd-input:focus { box-shadow: none; }
.fnd .tf3-bar .fnd-btn { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }
.fnd .tf3-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 .tf3-bar .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 .tf3-bar { padding-left: 16px; }
  .fnd .tf3-bar .fnd-btn { padding: 0 var(--fnd-s2); }
  .fnd .tf3 .tf3-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 .tf3-bar { padding-left: 14px; }
  .tf3-bar > .fa-search { display: none; }
}
.fnd .tf3 .tf3-bar ~ .fnd-error { text-align: center; text-wrap: pretty; }

/* Country and language, side by side under the bar at every width:
   two short pickers fit a phone, and stacking them pushed the searches
   a full row lower. */
.tf3-where {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--fnd-s3);
  max-width: 520px; margin: var(--fnd-s4) auto 0;
}
.tf3-pick { min-width: 0; }
.fnd .tf3 .tf3-where .fnd-label { display: block; margin: 0 0 var(--fnd-s1); padding: 0; }

/* "Try a niche:" and four of them, then the full set on request. The
   dots sit in the gaps (see the facts line below); none after the key. */
.fnd .tf3 .tf3-try {
  justify-content: center; margin: var(--fnd-s2) 0 0;
  column-gap: 21px; row-gap: 0; overflow: hidden;
  color: var(--fnd-text-soft); font-size: var(--fnd-t-meta);
}
.fnd .tf3 .tf3-try > span { position: relative; display: inline-flex; align-items: center; }
.fnd .tf3 .tf3-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 .tf3 .tf3-try .tf3-try__k + span::before { content: none; }
.fnd .tf3 .tf3-try__k { margin-right: -13px; }
.fnd .tf3 .tf3-niches { justify-content: center; margin-top: var(--fnd-s2); }
/* On a phone the line wraps, and a centred second line would start with
   a dot. Lined up with the picker labels instead, each line starts at
   the edge, where the dot is clipped. Each picker is as wide as the name
   it shows, so "United Kingdom" and "Vietnamese" fit whole at 375px. */
@media (max-width: 767px) {
  .fnd .tf3 .tf3-try { justify-content: flex-start; }
  .tf3-where { grid-template-columns: minmax(0, auto) minmax(0, auto); gap: var(--fnd-s2); }
}
.tf3-niches[hidden] { display: none; }
/* Four niches and "All 20 niches" need 434px, so on a phone "All 20
   niches" sat alone on a second line. Two niches and the link fit one
   line from 360px; the other two are one tap away in the full set. */
@media (max-width: 439px) {
  .fnd .tf3 .tf3-try > span:nth-child(4),
  .fnd .tf3 .tf3-try > span:nth-child(5) { display: none; }
}

/* ------------------------------------------------------------------
   2. THE ANSWER: the topic, where, Copy, the searches
   ------------------------------------------------------------------ */
.fnd .tf3 .tf3-out { margin-top: var(--fnd-s5); transition: opacity 160ms ease; }
/* While it fetches, everything fades and waits except Start over, which
   stays live so they can cancel. */
.fnd .tf3 .tf3-out .fnd-card-body > :not(.tf3-row) { transition: opacity 160ms ease; }
.fnd .tf3 .tf3-out--busy .fnd-card-body > :not(.tf3-row),
.fnd .tf3 .tf3-out--busy .tf3-row > .tf3-copy,
.fnd .tf3 .tf3-out--busy .tf3-row__more > :not(.tf3-reset) { opacity: .45; pointer-events: none; }
.tf3-out.tf3-out--in { animation: tf3-in 320ms cubic-bezier(.22, 1, .36, 1); }
@keyframes tf3-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tf3-out.tf3-out--in { animation: none; }
  .fnd .tf3 .tf3-out { transition: none; }
}

/* The example: a badge saying so, and no Copy row, so "Find trends"
   stays the one main button until the searches are theirs. The filters
   and the searches still work, so they can try them. */
.fnd .tf3-exnote {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px var(--fnd-s2);
  margin: 0 0 var(--fnd-s3);
  font-size: var(--fnd-t-meta); line-height: 1.5; color: var(--fnd-text-soft);
}
.tf3-out:not(.tf3-out--example) .tf3-exnote,
.tf3-out--example .tf3-row { display: none; }

/* The hidden example badge still counts as the card's first child, so
   the title would keep the gap after it: zero it. */
.fnd .tf3 .tf3-head { margin: 0; }
.fnd .tf3 .tf3-out:not(.tf3-out--example) .tf3-head { margin-top: 0; }
.fnd .tf3-head__title {
  margin: 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);
  text-wrap: balance; overflow-wrap: anywhere;
}
.tf3-head__title:focus { outline: none; }
.fnd .tf3-head__meta { margin: 2px 0 0; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); overflow-wrap: anywhere; }

/* What came back, in one line of parts. Each dot sits in the gap before
   its part; a part that starts a line has its dot outside the box, where
   it is clipped, so no line starts or ends with a lone dot. */
.fnd .tf3 .tf3-facts { justify-content: flex-start; margin: var(--fnd-s2) 0 0; color: var(--fnd-text-soft); }
.tf3-facts:empty { display: none; }
.fnd .tf3 .tf3-facts { column-gap: 21px; row-gap: 2px; overflow: hidden; }
.fnd .tf3 .tf3-facts > span { position: relative; }
.fnd .tf3 .tf3-facts span + span::before {
  content: "\00b7"; position: absolute; top: 0; left: -21px; width: 21px;
  margin: 0; text-align: center; opacity: .6;
}
.fnd .tf3 .tf3-note { margin: var(--fnd-s3) 0 0; color: var(--fnd-text); text-wrap: pretty; }
.tf3-note[hidden] { display: none; }

/* Copy first, the two quiet buttons beside it. On a phone Copy takes
   the whole width and the two share the line under it. */
.tf3-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fnd-s2) var(--fnd-s4); margin-top: var(--fnd-s4); }
.tf3-row__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fnd-s4); }
.fnd .tf3 .tf3-copy[data-copied="true"] { background: var(--fnd-ok); border-color: var(--fnd-ok); }
@media (max-width: 559px) {
  .fnd .tf3 .tf3-copy { flex: 1 1 100%; justify-content: center; }
  .tf3-row__more { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--fnd-s2); }
  .tf3-row__more > * { justify-self: start; }
  .tf3-row__more > :nth-child(2) { justify-self: end; }
  /* With nothing to save, Start over stands alone at the start. */
  .fnd .tf3 .tf3-row__more > [hidden] + * { justify-self: start; }
}
/* Text buttons grown to a 44px tap, in the accent so they read as things
   to press. */
.fnd .tf3 .tf3-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); white-space: nowrap; }
.fnd .tf3 .tf3-link.fnd-textbtn:hover { color: var(--fnd-text); }
.fnd .tf3 .tf3-link i { margin-right: 4px; }

/* Show only one kind. The script makes the set scroll sideways only when
   it runs past the card (the --scroll contract), so on a computer it
   simply sits on one line. */
.fnd .tf3 .tf3-filters { margin-top: var(--fnd-s4); }
.fnd .tf3 .tf3-filters .fnd-chip-btn { white-space: nowrap; }

/* The searches: one row each, the number, the words and their labels,
   and a chevron. A row opens onto what to do with it. */
.fnd .tf3 .tf3-list {
  list-style: none; margin: var(--fnd-s3) 0 0; padding: 0;
  border-top: 1px solid var(--fnd-rule);
}
.fnd .tf3 .tf3-item { margin: 0; border-bottom: 1px solid var(--fnd-rule); }
.fnd .tf3 .tf3-item[hidden] { display: none; }
.fnd .tf3 .tf3-q {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--fnd-s2);
  width: 100%; min-height: 52px; margin: 0; padding: 10px 6px 10px 4px;
  background: none; border: 0; border-radius: var(--fnd-r-xs);
  font: inherit; text-align: left; color: var(--fnd-text); cursor: pointer;
  transition: background-color 140ms ease;
}
.fnd .tf3 .tf3-q:hover { background: var(--fnd-paper-2); }
.fnd .tf3 .tf3-q:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--fnd-accent-deep); }
.fnd .tf3 .tf3-n {
  grid-row: 1 / span 2; align-self: start; padding-top: 1px;
  font-size: var(--fnd-t-meta); font-weight: 600; font-variant-numeric: tabular-nums;
  text-align: right; color: var(--fnd-text-faint);
}
.fnd .tf3 .tf3-t {
  min-width: 0; font-size: var(--fnd-t-body); font-weight: 600; line-height: 1.45;
  overflow-wrap: anywhere; text-wrap: balance;
}
.fnd .tf3 .tf3-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.fnd .tf3 .tf3-chev {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  font-size: 12px; color: var(--fnd-text-faint);
  transition: transform 160ms ease;
}
.fnd .tf3 .tf3-q[aria-expanded="true"] .tf3-chev { transform: rotate(180deg); }
/* The open search and what to do with it share one tinted band. */
.fnd .tf3 .tf3-item--open { background: var(--fnd-paper-2); border-radius: var(--fnd-r-xs); }
.fnd .tf3 .tf3-item--open .tf3-q { background: none; }
@media (prefers-reduced-motion: reduce) {
  .fnd .tf3 .tf3-chev { transition: none; }
}
/* What to do with one search: copy it, or check it on YouTube and
   Google Trends (each in a new tab). */
.fnd .tf3 .tf3-a {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 var(--fnd-s4);
  padding: 2px 6px var(--fnd-s2) calc(28px + var(--fnd-s2) + 4px);
}
.tf3-a[hidden] { display: none; }
@media (max-width: 559px) {
  .fnd .tf3 .tf3-a {
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--fnd-s2);
    padding: 14px 6px var(--fnd-s3) 4px;
  }
  .fnd .tf3 .tf3-a > * { justify-self: start; }
  .fnd .tf3 .tf3-a { grid-template-columns: max-content max-content; column-gap: var(--fnd-s5); }
}

/* Close matches, broader searches, and the empty answer: each its own
   band under the list. */
.tf3-more-box { margin-top: var(--fnd-s5); }
.tf3-more-box[hidden] { display: none; }
/* A paragraph straight after a guide table needs the same gap as one
   after another paragraph. */
.fnd .tf3-guide .fnd-tbl + p { margin-top: var(--fnd-s3); }

/* Close matches and broader searches sit inside the answer, under its
   topic, so their headings are a step smaller than it. */
.fnd .tf3 .tf3-more-box .fnd-tool-h3 { margin: 0; font-size: var(--fnd-t-h3); }
.fnd .tf3 .tf3-more-box .fnd-help { margin: 4px 0 var(--fnd-s3); text-wrap: pretty; }
.fnd .tf3 .tf3-empty { margin-top: var(--fnd-s3); }
/* An empty answer has no list, so its rule goes too. */
.fnd .tf3 .tf3-list:empty { display: none; }

/* The next step: under the searches, once they are theirs. */
.tf3-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);
}
.tf3-next[hidden] { display: none; }
.tf3-next__t { flex: 1 1 300px; min-width: 0; }
/* Inside the answer card, so a step below its topic title. */
.fnd .tf3 .tf3-next .fnd-tool-h3 { margin: 0; font-size: var(--fnd-t-h3); text-wrap: balance; }
.fnd .tf3 .tf3-next__t .fnd-help { margin: 4px 0 0; text-wrap: pretty; }
.tf3-next__go { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fnd .tf3 .tf3-next__hint { margin: 0; }
@media (max-width: 559px) {
  .tf3-next__go { flex: 1 1 100%; }
  .fnd .tf3 .tf3-next__go .fnd-btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------------
   3. THE GUIDE
   ------------------------------------------------------------------ */
.fnd .tf3-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));
}
.tf3-guide .fnd-tool-read .fnd-h2:focus { outline: none; }
.fnd .tf3-guide .fnd-toc li > a:not(.fnd-btn) { text-wrap: pretty; }
@media (max-width: 767px) {
  .fnd .tf3-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 .tf3-guide .fnd-tool-read p a:not(.fnd-btn),
.fnd .tf3-guide .fnd-tool-read li a:not(.fnd-btn),
.fnd .tf3-qa__list p a:not(.fnd-btn) { padding-block: 12px; }

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

/* The guide tables hold sentences, not figures: the shared data table
   keeps its card and rules, but its cells wrap here. On a phone the
   sentence takes its own full line under the name. */
.fnd .tf3-tbl tbody td:not(:first-child) { white-space: normal; font-variant-numeric: normal; }
.fnd .tf3-tbl td:first-child { white-space: nowrap; }
@media (min-width: 640px) {
  .tf3-tbl td { vertical-align: top; }
}
.fnd .tf3-guide .tf3-tbl td { text-wrap: pretty; }
@media (max-width: 639px) {
  .fnd .tf3-guide .tf3-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;
  }
  /* The three-column table: the name, then "Best for" and "Limits" each
     on its own named line, and the header names the first column only. */
  .fnd .tf3-guide .tf3-tbl--3.fnd-tbl--data thead th:last-child { display: none; }
  .fnd .tf3-guide .tf3-tbl--3.fnd-tbl--data tbody td:first-child { flex: 0 0 100%; white-space: normal; }
  .fnd .tf3-guide .tf3-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 .tf3-guide .tf3-tbl--3.fnd-tbl--data tbody td:not(:first-child)::before {
    content: attr(data-l) " "; font-weight: 600; color: var(--fnd-text-soft);
  }
}
.fnd .tf3-src { margin-top: var(--fnd-s4); text-wrap: pretty; }