/* ==================================================================
   /tools/youtube-keyword-research on the foundation look.
   Loaded ONLY when the 'tools-keyword-research-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.

   Copied from the Trend Finder (tools-trend-finder-fnd.css), its closest
   sister, and renamed, so no page can move another. One centred column at
   every width. Type a topic, then the keywords right under the bar, with
   Copy above them.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .kw3-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 .kw3 .kw3-out { position: relative; top: auto; }
}
.fnd .kw3 .fnd-tool-lead,
.fnd .kw3 .kw3-ask,
.fnd .kw3 .kw3-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
   keywords start on the first screen. After the 760 above, or it loses. */
@media (min-width: 1024px) {
  .fnd .kw3 .fnd-tool-lead { max-width: 960px; }
  .fnd .kw3 .fnd-tool-lead .fnd-display { max-width: none; }
}

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

/* The bar sits bare on the page like a search box: no card around it. */
.fnd .kw3 .kw3-ask { background: none; border: 0; border-radius: 0; box-shadow: none; }
.fnd .kw3 .kw3-ask > .fnd-card-body { padding: 0; }
.kw3-ask,
.kw3-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 .kw3-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 .kw3-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);
}
.kw3-bar > .fa-search { flex: 0 0 auto; font-size: 15px; color: var(--fnd-text-faint); }
.fnd .kw3 .kw3-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 .kw3 .kw3-bar .fnd-input:focus { box-shadow: none; }
.fnd .kw3-bar .fnd-btn { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }
.fnd .kw3-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 .kw3-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 .kw3-bar { padding-left: 16px; }
  .fnd .kw3-bar .fnd-btn { padding: 0 var(--fnd-s2); }
  .fnd .kw3 .kw3-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 .kw3-bar { padding-left: 14px; }
  .kw3-bar > .fa-search { display: none; }
}
.fnd .kw3 .kw3-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 keywords
   a full row lower. */
.kw3-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;
}
.kw3-pick { min-width: 0; }
.fnd .kw3 .kw3-where .fnd-label { display: block; margin: 0 0 var(--fnd-s1); padding: 0; }

/* "Try:" and four topics. The dots sit in the gaps (see the facts line
   below); none after the key. */
.fnd .kw3 .kw3-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 .kw3 .kw3-try > span { position: relative; display: inline-flex; align-items: center; }
.fnd .kw3 .kw3-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 .kw3 .kw3-try .kw3-try__k + span::before { content: none; }
.fnd .kw3 .kw3-try__k { margin-right: -13px; }
/* 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 .kw3 .kw3-try { justify-content: flex-start; }
  .kw3-where { grid-template-columns: minmax(0, auto) minmax(0, auto); gap: var(--fnd-s2); }
}
/* All four topics need about 470px, so on a phone the last one sat
   alone on a second line. Two fit one line from 360px. */
@media (max-width: 479px) {
  .fnd .kw3 .kw3-try > span:nth-child(4),
  .fnd .kw3 .kw3-try > span:nth-child(5) { display: none; }
}

/* ------------------------------------------------------------------
   2. THE ANSWER: the topic, where, Copy, the keywords
   ------------------------------------------------------------------ */
.fnd .kw3 .kw3-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 .kw3 .kw3-out .fnd-card-body > :not(.kw3-row) { transition: opacity 160ms ease; }
.fnd .kw3 .kw3-out--busy .fnd-card-body > :not(.kw3-row),
.fnd .kw3 .kw3-out--busy .kw3-row > .kw3-copy,
.fnd .kw3 .kw3-out--busy .kw3-row__more > :not(.kw3-reset) { opacity: .45; pointer-events: none; }
.kw3-out.kw3-out--in { animation: kw3-in 320ms cubic-bezier(.22, 1, .36, 1); }
@keyframes kw3-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .kw3-out.kw3-out--in { animation: none; }
  .fnd .kw3 .kw3-out { transition: none; }
}

/* The example: a badge saying so, and no Copy row, so "Find keywords"
   stays the one main button until the keywords are theirs. The filters
   and the keywords still work, so they can try them. */
.fnd .kw3-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);
}
.kw3-out:not(.kw3-out--example) .kw3-exnote,
.kw3-out--example .kw3-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 .kw3 .kw3-head { margin: 0; }
.fnd .kw3 .kw3-out:not(.kw3-out--example) .kw3-head { margin-top: 0; }
.fnd .kw3-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;
}
.kw3-head__title:focus { outline: none; }
.fnd .kw3-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 .kw3 .kw3-facts { justify-content: flex-start; margin: var(--fnd-s2) 0 0; color: var(--fnd-text-soft); }
.kw3-facts:empty { display: none; }
.fnd .kw3 .kw3-facts { column-gap: 21px; row-gap: 2px; overflow: hidden; }
.fnd .kw3 .kw3-facts > span { position: relative; }
.fnd .kw3 .kw3-facts span + span::before {
  content: "\00b7"; position: absolute; top: 0; left: -21px; width: 21px;
  margin: 0; text-align: center; opacity: .6;
}
.fnd .kw3 .kw3-note { margin: var(--fnd-s3) 0 0; color: var(--fnd-text); text-wrap: pretty; }
.kw3-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. */
.kw3-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fnd-s2) var(--fnd-s4); margin-top: var(--fnd-s4); }
.kw3-row__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fnd-s4); }
.fnd .kw3 .kw3-copy[data-copied="true"] { background: var(--fnd-ok); border-color: var(--fnd-ok); }
@media (max-width: 559px) {
  .fnd .kw3 .kw3-copy { flex: 1 1 100%; justify-content: center; }
  .kw3-row__more { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--fnd-s2); }
  .kw3-row__more > * { justify-self: start; }
  .kw3-row__more > :nth-child(2) { justify-self: end; }
  /* With nothing to save, Start over stands alone at the start. */
  .fnd .kw3 .kw3-row__more > [hidden] + * { justify-self: start; }
}
/* Text buttons grown to a 44px tap, in the accent so they read as things
   to press. */
.fnd .kw3 .kw3-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); white-space: nowrap; }
.fnd .kw3 .kw3-link.fnd-textbtn:hover { color: var(--fnd-text); }
.fnd .kw3 .kw3-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 .kw3 .kw3-filters { margin-top: var(--fnd-s4); }
.fnd .kw3 .kw3-filters .fnd-chip-btn,
.fnd .kw3 .kw3-groups__list .fnd-chip-btn { white-space: nowrap; }
/* Topics: the words that keep coming after theirs, under the kinds and
   the same size, with a short key in front. */
.kw3-groups { display: flex; align-items: baseline; gap: var(--fnd-s2); margin-top: var(--fnd-s2); }
.kw3-groups[hidden] { display: none; }
.fnd .kw3 .kw3-groups__k { flex: 0 0 auto; font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-text-soft); }
.fnd .kw3 .kw3-groups__list { flex: 1 1 auto; min-width: 0; }

/* The keywords: one row each, the number, the words and their labels,
   and a chevron. A row opens onto why it is listed and what to do with
   it. */
.fnd .kw3 .kw3-list {
  list-style: none; margin: var(--fnd-s3) 0 0; padding: 0;
  border-top: 1px solid var(--fnd-rule);
}
.fnd .kw3 .kw3-item { margin: 0; border-bottom: 1px solid var(--fnd-rule); }
.fnd .kw3 .kw3-item[hidden] { display: none; }
.fnd .kw3 .kw3-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 .kw3 .kw3-q:hover { background: var(--fnd-paper-2); }
.fnd .kw3 .kw3-q:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--fnd-accent-deep); }
.fnd .kw3 .kw3-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 .kw3 .kw3-t {
  min-width: 0; font-size: var(--fnd-t-body); font-weight: 600; line-height: 1.45;
  overflow-wrap: anywhere; text-wrap: balance;
}
.fnd .kw3 .kw3-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.fnd .kw3 .kw3-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 .kw3 .kw3-q[aria-expanded="true"] .kw3-chev { transform: rotate(180deg); }
/* The open keyword and what to do with it share one tinted band. */
.fnd .kw3 .kw3-item--open { background: var(--fnd-paper-2); border-radius: var(--fnd-r-xs); }
.fnd .kw3 .kw3-item--open .kw3-q { background: none; }
@media (prefers-reduced-motion: reduce) {
  .fnd .kw3 .kw3-chev { transition: none; }
}
/* What to do with one keyword: why it is listed, then copy it, or check
   it on YouTube and Google Trends (each in a new tab). */
.fnd .kw3 .kw3-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);
}
.kw3-a[hidden] { display: none; }
/* Why it is listed: its own line over the four buttons. */
.fnd .kw3 .kw3-why {
  flex: 1 1 100%; margin: 0 0 2px;
  font-size: var(--fnd-t-meta); line-height: 1.5; color: var(--fnd-text-soft);
  overflow-wrap: anywhere; text-wrap: pretty;
}
@media (max-width: 559px) {
  .fnd .kw3 .kw3-a {
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--fnd-s2);
    padding: 14px 6px var(--fnd-s3) 4px;
  }
  .fnd .kw3 .kw3-a > * { justify-self: start; }
  .fnd .kw3 .kw3-a { grid-template-columns: max-content max-content; column-gap: var(--fnd-s5); }
  /* The 28px row gap is for the buttons' taps; the line above them
     needs less. Width 0 with a 100% floor keeps the sentence out of the
     max-content columns, which it stretched 200px past a phone. */
  .fnd .kw3 .kw3-why { grid-column: 1 / -1; width: 0; min-width: 100%; margin: 0 0 -14px; padding-left: 4px; }
}

/* Close matches, broader searches, and the empty answer: each its own
   band under the list. */
.kw3-more-box { margin-top: var(--fnd-s5); }
.kw3-more-box[hidden] { display: none; }
/* A paragraph straight after a guide table needs the same gap as one
   after another paragraph. */
.fnd .kw3-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 .kw3 .kw3-more-box .fnd-tool-h3 { margin: 0; font-size: var(--fnd-t-h3); }
.fnd .kw3 .kw3-more-box .fnd-help { margin: 4px 0 var(--fnd-s3); text-wrap: pretty; }
.fnd .kw3 .kw3-empty { margin-top: var(--fnd-s3); }
/* An empty answer has no list, so its rule goes too. */
.fnd .kw3 .kw3-list:empty { display: none; }

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

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

/* The three steps: the shared numbered heads, a paragraph under each. */
.kw3-steps { list-style: none; margin: var(--fnd-s4) 0 0; padding: 0; }
.kw3-steps li + li { margin-top: var(--fnd-s5); }
.kw3-steps .fnd-numhead { margin-bottom: var(--fnd-s2); }
.fnd .kw3-steps .fnd-numhead__t { font-size: var(--fnd-t-h3); }
.kw3-steps p { margin: 0; padding-left: calc(32px + var(--fnd-s3)); }
@media (max-width: 559px) {
  .kw3-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 .kw3-tbl tbody td:not(:first-child) { white-space: normal; font-variant-numeric: normal; }
.fnd .kw3-tbl td:first-child { white-space: nowrap; }
@media (min-width: 640px) {
  .kw3-tbl td { vertical-align: top; }
}
.fnd .kw3-guide .kw3-tbl td { text-wrap: pretty; }
@media (max-width: 639px) {
  .fnd .kw3-guide .kw3-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 .kw3-guide .kw3-tbl--3.fnd-tbl--data thead th:last-child { display: none; }
  .fnd .kw3-guide .kw3-tbl--3.fnd-tbl--data tbody td:first-child { flex: 0 0 100%; white-space: normal; }
  .fnd .kw3-guide .kw3-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 .kw3-guide .kw3-tbl--3.fnd-tbl--data tbody td:not(:first-child)::before {
    content: attr(data-l) " "; font-weight: 600; color: var(--fnd-text-soft);
  }
}
.fnd .kw3-src { margin-top: var(--fnd-s4); text-wrap: pretty; }

/* Shown only when the clipboard refused: the keywords, picked, to copy by
   hand. 16px so a phone does not zoom when it takes the focus. */
.fnd .kw3 .kw3-copybox { display: block; width: 100%; margin-top: var(--fnd-s3); font-size: 16px; }
.fnd .kw3 .kw3-copybox[hidden] { display: none; }
/* A refused row Copy: the keyword waits picked on its own line under it. */
.fnd .kw3 .kw3-onebox { display: block; flex: 1 1 100%; width: 100%; margin: var(--fnd-s2) 0; font-size: 16px; }
@media (max-width: 559px) {
  .fnd .kw3 .kw3-onebox { grid-column: 1 / -1; justify-self: stretch; width: 0; min-width: 100%; margin: -14px 0 0; }
}