/* ==================================================================
   /tools/youtube-shorts-remix-checker on the foundation look.
   Loaded ONLY when the 'tools-shorts-remix-checker-fnd' redesign switch
   is on for this viewer (never in embed mode); the old page keeps its own
   stylesheets.

   Layout unique to this page only. The first screen, the answer, the
   guide, the questions, the links and the close are the shared tool kit
   (foundation-tools.css); the segments, chips, rows, stats, the sentence
   form, callouts, the data table and the numbered heads are the
   foundation's and are NOT redrawn here.

   The src3-* ids in the markup are JAVASCRIPT HOOKS for
   /js/shorts-remix-checker.js.

   The kit's shape, rearranged: from 1024px the name with "who remixed
   me" beside it, then the five questions with the answer beside them,
   then the growth sentence across both. Below 1024px one column, with
   the answer in one line at the top of the questions and in full under
   them.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
.fnd .src3 .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .src3 h1.fnd-display,
.fnd .src3-qa__list summary,
.fnd.src3-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
/* "YouTube Shorts Remix Checker" is long: the kit's small-phone size
   keeps it to two even lines under 414px. */
@media (max-width: 413px) {
  .fnd .src3 .fnd-tool-lead .fnd-display { font-size: 2.15rem; }
}
@media (max-width: 559px) {
  .fnd .src3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}
.src3-ask,
.src3-ans { scroll-margin-top: calc(var(--header-height, 61px) + 16px); }

/* "Who remixed me" sits in the kit's switch area. From 1024px it takes
   the top of the right column, beside the name and the first questions,
   so the card and the questions both open in the first screen; the
   answer follows it beside the rest of the questions, and the growth
   sentence runs under both at full width. The middle row is the flexible
   one, so the tall card stretches it and never the name's row. Phones
   keep the card first: "who remixed my Short" is what most visitors
   search. */
.fnd .src3 .src3-who { margin-bottom: var(--fnd-s5); }
@media (min-width: 1024px) {
  .fnd .src3 .fnd-tool-top__in.src3-top__in {
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "lead switch"
      "ask  switch"
      "ask  ans"
      "more more";
  }
  .fnd .src3 .src3-who { grid-area: switch; align-self: start; }
}
.fnd .src3 .src3-who .fnd-tool-more__sub,
.fnd .src3 .src3-ask__head .fnd-tool-more__sub { margin: 4px 0 0; text-wrap: pretty; }
.fnd .src3 .src3-who__steps { margin-top: var(--fnd-s4); }
.fnd .src3 .src3-who__steps li + li { margin-top: var(--fnd-s4); }
.fnd .src3 .src3-who__steps .fnd-numhead__t { font-size: var(--fnd-t-body); }
.fnd .src3 .src3-who__steps p { font-size: var(--fnd-t-meta); line-height: 1.55; color: var(--fnd-text-soft); text-wrap: pretty; }
.fnd .src3 .src3-who__tip { margin: var(--fnd-s4) 0 0; text-wrap: pretty; }

/* The questions: each segment as wide as the card, its buttons even. */
.fnd .src3 .src3-seg { display: flex; width: 100%; margin-top: var(--fnd-s2); }
.fnd .src3 .src3-seg button { flex: 1 1 0; min-width: 0; padding: 0 var(--fnd-s2); }
.fnd .src3 .src3-how { margin-top: var(--fnd-s2); }
.fnd .src3 .fnd-chip-btn:focus-visible { outline: 2px solid var(--fnd-accent-deep); outline-offset: 2px; }
.fnd .src3 .src3-ask .fnd-help { margin: 6px 0 0; text-wrap: pretty; }
.fnd .src3 .src3-ask .fnd-label { margin: 0; }

/* ------------------------------------------------------------------
   2. THE ANSWER
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .fnd .src3 .src3-ans { margin-top: var(--fnd-s5); }
}
/* Yes, Maybe or No, led by a dot in the ink's own status colours. */
.fnd .src3 .src3-fig { display: flex; align-items: center; gap: .32em; }
.fnd .src3 .src3-fig .src3-dot {
  flex: 0 0 auto; display: inline-block;
  width: .36em; height: .36em; border-radius: 50%;
  background: var(--fnd-on-ink-ok);
  transition: background-color 150ms ease;
}
.fnd .src3 .src3-ans[data-verdict="maybe"] .src3-dot { background: var(--fnd-on-ink-warn); }
.fnd .src3 .src3-ans[data-verdict="no"] .src3-dot { background: var(--fnd-on-ink-bad); }
.fnd .src3 .src3-why { text-wrap: pretty; }

/* Name left, answer right, on phones too: the shared rows drop the end
   slot under the name below 767px, which here would read as a list. The
   answer may take two lines; the name never does. */
.fnd .src3 .src3-rows { margin-top: var(--fnd-s4); }
.fnd .src3 .src3-rows.fnd-rows { border-top: 0; }
.fnd .src3 .src3-rows[hidden] { display: none; }
.fnd .src3 .src3-rows .fnd-row {
  grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--fnd-s4);
  border-bottom: 0; border-top: 1px solid var(--fnd-on-ink-rule);
}
.fnd .src3 .src3-rows .fnd-row:last-child { padding-bottom: 0; }
.fnd .src3 .src3-rows .fnd-row-main { grid-column: 1; grid-row: 1; }
.fnd .src3 .src3-rows .fnd-row-t {
  display: block; -webkit-line-clamp: unset; overflow: visible; margin: 0;
  color: var(--fnd-on-ink-soft); font-weight: 500; white-space: nowrap;
}
.fnd .src3 .src3-rows .fnd-row-end {
  display: block; grid-column: 2; grid-row: 1; margin-top: 0;
  font-weight: 700; text-align: right; color: var(--fnd-on-ink);
  text-wrap: pretty; overflow-wrap: break-word;
}
/* On a phone the answers are phrases that wrap: they read left to right
   beside a name column of one width, like a list, not ragged right. */
@media (max-width: 559px) {
  .fnd .src3 .src3-rows .fnd-row { grid-template-columns: 5.2em minmax(0, 1fr); column-gap: var(--fnd-s3); }
  .fnd .src3 .src3-rows .fnd-row-end { text-align: left; }
}

.fnd .src3 .src3-ans__note {
  margin: var(--fnd-s4) 0 0; padding-top: var(--fnd-s3);
  border-top: 1px solid var(--fnd-on-ink-rule);
  font-size: var(--fnd-t-meta); line-height: 1.55; color: var(--fnd-on-ink-soft);
  text-wrap: pretty;
}
.src3-ans__note[hidden] { display: none; }

/* ------------------------------------------------------------------
   3. THE GROWTH SENTENCE
   One card under the questions, one column at every width.
   ------------------------------------------------------------------ */
.fnd .src3 .src3-more { grid-template-columns: minmax(0, 1fr); gap: var(--fnd-s5); margin-top: var(--fnd-s6); }
.fnd .src3 .src3-calc__head { margin-bottom: var(--fnd-s4); }
.fnd .src3 .src3-calc__head .fnd-tool-more__sub { margin: 4px 0 0; text-wrap: pretty; }
/* Number blanks sized to the numbers they hold. */
.fnd .src3 .src3-num--subs { width: 9ch; }
.fnd .src3 .src3-num--week { width: 3ch; }
.fnd .src3 .src3-calc .fnd-tool-note { text-wrap: pretty; }

.src3-out {
  margin-top: var(--fnd-s5);
  padding-top: var(--fnd-s4);
  border-top: 1px solid var(--fnd-rule);
  transition: opacity 150ms ease;
}
/* A box waiting on a number: the last answer stays, quieter. */
.src3-out.src3-out--wait { opacity: .55; }
.fnd .src3 .src3-out__k { margin: 0 0 var(--fnd-s2); font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-text-soft); }
.fnd .src3 .src3-stats .fnd-stat-n { font-variant-numeric: tabular-nums; }
.fnd .src3 .src3-stats .fnd-stat-l { text-wrap: balance; }
/* A figure of eight or more characters (set by the script) steps down a
   size so "12,000,000" fits its card at every width. */
.fnd .src3 .src3-stats .src3-stat--long .fnd-stat-n { font-size: 22px; overflow-wrap: anywhere; }
.fnd .src3 .src3-out__how { margin: var(--fnd-s3) 0 0; text-wrap: pretty; }
.fnd .src3 .src3-tips { margin: var(--fnd-s3) 0 0; }
.fnd .src3 .src3-tips:empty { display: none; }
.fnd .src3 .src3-tips li { text-wrap: pretty; }
/* On a phone the three stand one under another, each number beside its
   words, so the block stays short. */
@media (max-width: 559px) {
  .fnd .src3 .src3-stats { grid-template-columns: minmax(0, 1fr); }
  .fnd .src3 .src3-stats .fnd-stat { display: flex; align-items: baseline; gap: var(--fnd-s3); padding: var(--fnd-s3) var(--fnd-s4); }
  .fnd .src3 .src3-stats .fnd-stat-n { flex: 0 0 auto; }
  .fnd .src3 .src3-stats .fnd-stat-l { flex: 1 1 auto; min-width: 0; margin-top: 0; text-wrap: pretty; }
  /* A long figure takes the line and its words go under it. */
  .fnd .src3 .src3-stats .src3-stat--long { display: block; }
  .fnd .src3 .src3-stats .src3-stat--long .fnd-stat-l { margin-top: 4px; }
}

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

/* Numbered steps and types: the shared heads, a paragraph under each. */
.src3-steps { list-style: none; margin: var(--fnd-s4) 0 0; padding: 0; }
.src3-steps li + li { margin-top: var(--fnd-s5); }
.src3-steps .fnd-numhead { margin-bottom: var(--fnd-s2); }
.fnd .src3-steps .fnd-numhead__t { font-size: var(--fnd-t-h3); }
.src3-steps p { margin: 0; padding-left: calc(32px + var(--fnd-s3)); }
.fnd .src3-steps .src3-best { margin-top: var(--fnd-s2); font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); }
@media (max-width: 559px) {
  .src3-steps p { padding-left: 0; }
}

/* The types table holds words, not figures: the shared data table keeps
   its card and rules, but its cells wrap here. On a phone each cell after
   the type takes its own named line (the same as the subtitle page's). */
.fnd .src3-tbl tbody td:not(:first-child) { white-space: normal; font-variant-numeric: normal; overflow-wrap: anywhere; }
.fnd .src3-tbl td:first-child { white-space: nowrap; font-weight: 600; }
@media (min-width: 640px) {
  .src3-tbl td { vertical-align: top; }
}
/* Not the name cell: text-wrap would undo its nowrap. */
.fnd .src3-guide .src3-tbl td:not(:first-child) { text-wrap: pretty; }
@media (max-width: 639px) {
  .fnd .src3-guide .src3-tbl.fnd-tbl--data thead th:last-child { display: none; }
  .fnd .src3-guide .src3-tbl.fnd-tbl--data tbody td:first-child { flex: 0 0 100%; white-space: normal; }
  .fnd .src3-guide .src3-tbl.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 .src3-guide .src3-tbl.fnd-tbl--data tbody td:not(:first-child)::before {
    content: attr(data-l) " "; font-weight: 600; color: var(--fnd-text-soft);
  }
}
.fnd .src3-src { margin-top: var(--fnd-s4); text-wrap: pretty; }