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

   Same shape as the citation, trend finder and keyword research pages:
   one centred column at every width. Type a handle, then the answer
   right under the bar.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .cnc3-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 .cnc3 .cnc3-out { position: relative; top: auto; }
}
.fnd .cnc3 .fnd-tool-lead,
.fnd .cnc3 .cnc3-ask,
.fnd .cnc3 .cnc3-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 .cnc3 .fnd-tool-lead { max-width: 960px; }
  .fnd .cnc3 .fnd-tool-lead .fnd-display { max-width: none; }
}

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

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

/* The bar, the same as the citation and trend finder pages' bars
   (copied, not shared, so no page can move another). The @ stands where
   their search mark does, because a handle starts with one. */
.fnd .cnc3-bar {
  display: flex; align-items: center; gap: var(--fnd-s1);
  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 .cnc3-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);
}
.fnd .cnc3-at {
  flex: 0 0 auto;
  font-family: var(--fnd-display-font); font-weight: 700; font-size: 17px;
  color: var(--fnd-text-soft);
}
.fnd .cnc3 .cnc3-bar .fnd-input {
  flex: 1 1 auto; width: auto; min-width: 0;
  padding: 0 var(--fnd-s1) 0 0;
  background: transparent; border: 0; border-radius: 0;
}
.fnd .cnc3 .cnc3-bar .fnd-input:focus { box-shadow: none; }
.fnd .cnc3-bar .fnd-btn { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }
.fnd .cnc3-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 .cnc3-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 .cnc3-bar { padding-left: 16px; }
  .fnd .cnc3-bar .fnd-btn { padding: 0 var(--fnd-s2); }
  .fnd .cnc3 .cnc3-bar .fnd-input { font-size: 16px; }
}
.fnd .cnc3 .cnc3-bar ~ .fnd-error { text-align: center; text-wrap: pretty; }

/* YouTube's three rules under the bar, ticked or crossed as they type.
   Each carries its own mark, so the dots between them go. */
.fnd .cnc3 .cnc3-rules {
  margin: var(--fnd-s3) 0 0;
  column-gap: var(--fnd-s4); row-gap: 2px;
  color: var(--fnd-text-soft); font-size: var(--fnd-t-meta);
}
.fnd .cnc3 .cnc3-rules span + span::before { content: none; }
.fnd .cnc3 .cnc3-rules > span { display: inline-flex; align-items: center; gap: 6px; }
.fnd .cnc3 .cnc3-rules i { font-size: 11px; width: 12px; text-align: center; color: var(--fnd-text-faint); }
.fnd .cnc3 .cnc3-rules .fa-circle { font-size: 5px; }
.fnd .cnc3 .cnc3-rules [data-state="ok"] i { color: var(--fnd-ok); }
.fnd .cnc3 .cnc3-rules [data-state="bad"] { color: var(--fnd-danger); }
.fnd .cnc3 .cnc3-rules [data-state="bad"] i { color: var(--fnd-danger); }
@media (max-width: 559px) {
  .fnd .cnc3 .cnc3-rules { flex-direction: column; align-items: flex-start; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }
}

/* "Try:" and three handles (or "Recent:" and theirs). 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 .cnc3 .cnc3-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 .cnc3 .cnc3-try > span { position: relative; display: inline-flex; align-items: center; }
.fnd .cnc3 .cnc3-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 .cnc3 .cnc3-try .cnc3-try__k + span::before { content: none; }
.fnd .cnc3 .cnc3-try__k { margin-right: -13px; }
.cnc3-try[hidden] { display: none; }
/* Three handles do not fit one line on a phone: two do. */
@media (max-width: 439px) {
  .fnd .cnc3 .cnc3-try > span:nth-child(4) { display: none; }
}

/* ------------------------------------------------------------------
   2. THE ANSWER: the handle and its verdict, who has it, close ones,
   the same name elsewhere, the next step
   ------------------------------------------------------------------ */
.fnd .cnc3 .cnc3-out { margin-top: var(--fnd-s5); transition: opacity 160ms ease; }
/* While it checks, everything fades and waits except Start over, which
   stays live so they can cancel. */
.fnd .cnc3 .cnc3-out .fnd-card-body > :not(.cnc3-acts) { transition: opacity 160ms ease; }
.fnd .cnc3 .cnc3-out--busy .fnd-card-body > :not(.cnc3-acts),
.fnd .cnc3 .cnc3-out--busy .cnc3-acts > .cnc3-claim,
.fnd .cnc3 .cnc3-out--busy .cnc3-acts > .cnc3-again,
.fnd .cnc3 .cnc3-out--busy .cnc3-acts__more > :not(.cnc3-reset) { opacity: .45; pointer-events: none; }
.cnc3-out.cnc3-out--in { animation: cnc3-in 320ms cubic-bezier(.22, 1, .36, 1); }
@keyframes cnc3-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cnc3-out.cnc3-out--in { animation: none; }
  .fnd .cnc3 .cnc3-out { transition: none; }
}

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

.fnd .cnc3 .cnc3-head { margin: 0; }
.fnd .cnc3 .cnc3-head__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--fnd-s3); }
.fnd .cnc3-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;
}
.cnc3-head__title:focus { outline: none; }
.fnd .cnc3-head__meta { margin: 2px 0 0; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); }
.fnd .cnc3 .cnc3-say { margin: var(--fnd-s3) 0 0; color: var(--fnd-text); text-wrap: pretty; }
.fnd .cnc3 .cnc3-note { margin: var(--fnd-s2) 0 0; color: var(--fnd-text-soft); text-wrap: pretty; }
.cnc3-note[hidden] { display: none; }

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

/* Rows: the shared list row with a 40px picture, and the end kept beside
   the text on a phone (a short text link fits there). */
.fnd .cnc3 .cnc3-rows { margin-top: var(--fnd-s3); }
.fnd .cnc3 .cnc3-rows .fnd-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
.fnd .cnc3 .cnc3-rows .fnd-row-end { grid-column: 3; grid-row: auto; }
.fnd .cnc3 .cnc3-rows .fnd-row-meta { gap: 2px 0; column-gap: 21px; overflow: hidden; }
.fnd .cnc3 .cnc3-rows .fnd-row-meta > span { position: relative; }
.fnd .cnc3 .cnc3-rows .fnd-row-meta > span + span::before {
  content: "\00b7"; position: absolute; top: 0; left: -21px; width: 21px; text-align: center; opacity: .6;
}
.fnd .cnc3 .cnc3-rows .fnd-row-meta > .fnd-badge + span::before { top: 50%; transform: translateY(-50%); }
.cnc3-owner[hidden] { display: none; }
/* A long channel name or handle wraps rather than being cut off. */
.fnd .cnc3 .cnc3-owner .fnd-row-t,
.fnd .cnc3 .cnc3-owner .fnd-row-meta > span { min-width: 0; overflow-wrap: anywhere; }
.fnd .cnc3 .cnc3-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fnd-display-font); font-weight: 700; font-size: 16px; color: var(--fnd-text-soft);
}
.fnd .cnc3 .cnc3-plat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--fnd-paper-2); color: var(--fnd-text); font-size: 16px;
}

/* Close ones and the same name elsewhere: each its own band. Inside the
   answer, so their headings are a step smaller than its handle. */
.cnc3-box { margin-top: var(--fnd-s5); }
.cnc3-box[hidden] { display: none; }
.fnd .cnc3 .cnc3-box .fnd-tool-h3 { margin: 0; font-size: var(--fnd-t-h3); }
.fnd .cnc3 .cnc3-box .fnd-help { margin: 4px 0 var(--fnd-s3); text-wrap: pretty; }
.fnd .cnc3 .cnc3-box .cnc3-else__help { margin: var(--fnd-s3) 0 0; }
/* Switch tools-channel-name-checker-more: the count line, then 15 rows,
   in two columns once a row still fits its name, answer and Open. */
.cnc3-else__sum[hidden] { display: none; }
.fnd .cnc3 .cnc3-box .cnc3-else__sum { margin: 4px 0 0; color: var(--fnd-text); font-weight: 600; }
@media (min-width: 720px) {
  .fnd .cnc3 .cnc3-plats--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fnd-s5); }
}
.cnc3-alts__none[hidden],
.cnc3-chips[hidden] { display: none; }
.fnd .cnc3 .cnc3-chips .fnd-chip-btn { white-space: nowrap; }

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

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

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