/* ==================================================================
   /tools/youtube-channel-audit on the foundation look.
   Loaded ONLY when the 'tools-channel-audit-fnd' redesign switch is on
   for this viewer (never in embed mode); the old page keeps its own two
   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, ring, meters, stats, rows, chips,
   stepper, progress bar, badges and numbered heads are the foundation's
   and are NOT redrawn here.

   Same shape as the citation and channel ID pages: one centred column at
   every width. Paste a channel, then the report 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) {
  .cat3-top .fnd-tool-top__in { display: block; }
  .fnd .cat3 .cat3-out { position: relative; top: auto; }
}
.fnd .cat3 .fnd-tool-lead,
.fnd .cat3 .cat3-ask,
.fnd .cat3 .cat3-out { max-width: 760px; margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) {
  .fnd .cat3 .fnd-tool-lead { max-width: 960px; }
  .fnd .cat3 .fnd-tool-lead .fnd-display { max-width: none; }
}
.fnd .cat3 .fnd-tool-lead { text-align: center; }
.fnd .cat3 .fnd-tool-lead .fnd-display,
.fnd .cat3 .fnd-tool-lead__sub { margin-left: auto; margin-right: auto; text-align: center; }
.fnd .cat3 .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .cat3 h1.fnd-display,
.fnd .cat3-qa__list summary,
.fnd.cat3-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
@media (max-width: 413px) {
  .fnd .cat3 .fnd-tool-lead .fnd-display { font-size: 2.15rem; }
}
@media (max-width: 559px) {
  .fnd .cat3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}

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

.fnd .cat3-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 .cat3-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);
}
.cat3-bar > .cat3-mark { flex: 0 0 auto; font-size: 15px; color: var(--fnd-text-faint); }
.fnd .cat3 .cat3-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 .cat3 .cat3-bar .fnd-input:focus { box-shadow: none; }
.fnd .cat3-bar .fnd-btn { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }
.fnd .cat3-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 .cat3 .fnd-btn[aria-busy="true"] { cursor: progress; opacity: .8; }
@media (max-width: 559px) {
  .fnd .cat3-bar { padding-left: 16px; }
  .fnd .cat3-bar .fnd-btn { padding: 0 var(--fnd-s2); }
  .fnd .cat3 .cat3-bar .fnd-input { padding: 0 2px; font-size: 16px; }
}
@media (max-width: 399px) {
  .fnd .cat3-bar { padding-left: 14px; }
  .cat3-bar > .cat3-mark { display: none; }
}
.fnd .cat3 .cat3-ask .fnd-error { text-align: center; text-wrap: pretty; }

/* "Try:" and three examples, a dot in each gap. */
.fnd .cat3 .cat3-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 .cat3 .cat3-try > span { position: relative; display: inline-flex; align-items: center; }
.fnd .cat3 .cat3-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 .cat3 .cat3-try .cat3-try__k + span::before { content: none; }
.fnd .cat3 .cat3-try__k { margin-right: -13px; }
@media (max-width: 439px) {
  .fnd .cat3 .cat3-try > span:nth-child(4) { display: none; }
}

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

/* ------------------------------------------------------------------
   2. THE REPORT
   ------------------------------------------------------------------ */
.fnd .cat3 .cat3-out { margin-top: var(--fnd-s5); }
.fnd .cat3 .cat3-report,
.fnd .cat3 .cat3-exnote { transition: opacity 160ms ease; }
.fnd .cat3 .cat3-out--busy .cat3-report,
.fnd .cat3 .cat3-out--busy .cat3-exnote,
.fnd .cat3 .cat3-out--busy .cat3-acts,
.fnd .cat3 .cat3-out--busy .cat3-full { opacity: .45; pointer-events: none; }
.cat3-out.cat3-out--in { animation: cat3-in 320ms cubic-bezier(.22, 1, .36, 1); }
@keyframes cat3-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cat3-out.cat3-out--in { animation: none; }
  .fnd .cat3 .cat3-report { transition: none; }
}
/* The card body spaces every child after the first, and a hidden note
   still counts as one, so the report would sit low. */
.fnd .cat3 .cat3-out .cat3-report,
.fnd .cat3 .cat3-out .cat3-load { margin-top: 0; }

/* The example: a badge saying so, and no buttons row. */
.fnd .cat3-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 .cat3-exnote > span:last-child { text-wrap: pretty; }
.cat3-out:not(.cat3-out--example) .cat3-exnote { display: none; }

/* Loading: the stepper, then three waiting lines. */
.cat3-load[hidden] { display: none; }
.fnd .cat3 .cat3-steps { margin-bottom: var(--fnd-s4); }
.fnd .cat3 .cat3-load .fnd-skel--t:nth-child(2) { width: 88%; }

/* Who: the shared identity head, tighter inside a card. */
.fnd .cat3 .cat3-who { margin-bottom: var(--fnd-s4); }
.fnd .cat3 .cat3-who .fnd-idhead-t { font-size: var(--fnd-t-h3-lg); line-height: 1.25; overflow-wrap: anywhere; }
.cat3-who .fnd-idhead-t:focus { outline: none; }
.fnd .cat3 .cat3-who .fnd-idhead-face--fallback { color: var(--fnd-text-faint); }
.fnd .cat3 .cat3-dots {
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: 21px; row-gap: 0;
  overflow: hidden; margin: 4px 0 0; color: var(--fnd-text-soft);
}
@media (min-width: 768px) {
  .fnd .cat3 .cat3-dots { justify-content: flex-start; }
}
.fnd .cat3 .cat3-dots > span { position: relative; min-width: 0; overflow-wrap: anywhere; }
.fnd .cat3 .cat3-dots > span + span::before {
  content: "\00b7"; position: absolute; top: 0; left: -21px; width: 21px; text-align: center; opacity: .6;
}
/* The script marks the item that starts each wrapped line (markDots). */
.fnd .cat3 .cat3-dots > span.cat3-dot0::before { content: none; }

/* The score: the big ring, then its word and the two meters. */
.cat3-score { display: flex; align-items: center; gap: var(--fnd-s5); }
.cat3-score__main { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--fnd-s3); }
.fnd .cat3 .cat3-score__label {
  margin: 0; font-family: var(--fnd-display-font); font-weight: 800;
  font-size: var(--fnd-t-h3-lg); line-height: 1.2; color: var(--fnd-text);
}
.fnd .cat3 .cat3-score__help { margin: 0; text-wrap: pretty; }
@media (max-width: 559px) {
  .cat3-score { flex-direction: column; gap: var(--fnd-s4); }
  .cat3-score__main { width: 100%; }
  .fnd .cat3 .cat3-score__label { text-align: center; }
}
.fnd .cat3 .cat3-chips { margin: var(--fnd-s4) 0 0; }
.fnd .cat3 .cat3-chips .fnd-chip { overflow-wrap: anywhere; }
@media (max-width: 559px) {
  .fnd .cat3 .cat3-chips { justify-content: center; }
}

/* Each part of the report: its own band, a step smaller than the name. */
.cat3-box { margin-top: var(--fnd-s6); }
.cat3-box[hidden] { display: none; }
.fnd .cat3 .cat3-box .fnd-tool-h3 { margin: 0; font-size: var(--fnd-t-h3); text-wrap: balance; }
.fnd .cat3 .cat3-box > .fnd-help { margin: var(--fnd-s2) 0 0; text-wrap: pretty; }
.fnd .cat3 .cat3-rows { margin-top: var(--fnd-s3); }
.fnd .cat3 .cat3-rows .fnd-row-t,
.fnd .cat3 .cat3-rows .fnd-row-meta { min-width: 0; overflow-wrap: break-word; word-break: normal; text-wrap: pretty; }
.fnd .cat3 .cat3-detail { display: block; }
.fnd .cat3 .cat3-tip { margin: 4px 0 0; font-size: var(--fnd-t-meta); color: var(--fnd-text); text-wrap: pretty; }

/* Every recent title: picture, title, views and date, the tip, a small
   ring. On a phone the picture goes and the ring stays beside the words. */
.fnd .cat3 .cat3-videos .fnd-row-end { align-self: center; }
@media (max-width: 559px) {
  .fnd .cat3 .cat3-videos .fnd-row { grid-template-columns: minmax(0, 1fr) auto; }
  .fnd .cat3 .cat3-videos .fnd-row-media { display: none; }
  .fnd .cat3 .cat3-videos .fnd-row-main { grid-column: 1; }
  .fnd .cat3 .cat3-videos .fnd-row-end { grid-column: 2; grid-row: 1; margin-top: 0; }
}
.fnd .cat3 .cat3-showall { margin-top: var(--fnd-s3); }

/* When it posts: the four figures, then one meter per weekday, two
   columns from tablet up. */
.fnd .cat3 .cat3-stats { margin-top: var(--fnd-s3); }
.cat3-days { display: grid; gap: var(--fnd-s2) var(--fnd-s6); margin-top: var(--fnd-s4); }
@media (min-width: 640px) {
  .cat3-days { grid-template-columns: 1fr 1fr; }
}
.fnd .cat3 .cat3-when { margin: var(--fnd-s3) 0 0; color: var(--fnd-text); text-wrap: pretty; }

/* Words it uses most: the shared chips, each with its count. */
.fnd .cat3 .cat3-words { margin-top: var(--fnd-s3); }
.fnd .cat3 .cat3-words .fnd-chip b { margin-left: 6px; font-weight: 800; color: var(--fnd-text-soft); }

/* Size against other creators: one sentence, the bar, the marks. */
.fnd .cat3 .cat3-size { margin: var(--fnd-s3) 0 var(--fnd-s2); font-size: var(--fnd-t-body); color: var(--fnd-text); text-wrap: pretty; }
.fnd .cat3 .cat3-size b { font-family: var(--fnd-display-font); font-weight: 800; }

/* After a real report: the card to save and a fresh start. The row gap is
   for a phone, where the two wrap onto two lines: each one's tap box
   reaches 14px past its words (.fnd-hit), so with no gap the lower one
   sat on top of the upper one and a tap on "Download audit card" pressed
   "Audit another channel" (375px walk, 2026-11-03). 34px clears 28. */
.cat3-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fnd-s6) var(--fnd-s5); margin-top: var(--fnd-s5); padding-top: var(--fnd-s2); border-top: 1px solid var(--fnd-rule); }
.cat3-acts[hidden],
.cat3-acts [hidden] { display: none; }
.fnd .cat3 .cat3-left { flex: 1 1 100%; margin: 0 0 var(--fnd-s2); }

/* The full audit offer, its own band under the report. */
.fnd .cat3 .cat3-full { padding-top: var(--fnd-s5); border-top: 1px solid var(--fnd-rule); }
.fnd .cat3 .cat3-full .cp-crown { margin-right: 4px; }
.fnd .cat3 .cat3-full__list { margin: var(--fnd-s3) 0 0; }
.cat3-full__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fnd-s2) var(--fnd-s4); margin-top: var(--fnd-s4); }
.fnd .cat3 .cat3-full__note { margin: 0; flex: 1 1 220px; text-wrap: pretty; }
@media (max-width: 559px) {
  .fnd .cat3 .cat3-full__go .fnd-btn { flex: 1 1 100%; justify-content: center; }
}

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

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