/* ==================================================================
   /tools/youtube-channel-value-calculator on the foundation look.
   Loaded ONLY when the 'tools-channel-value-calculator-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 answer, the
   working blocks, the guide, the questions, the links and the close are
   the shared tool kit (foundation-tools.css); the inputs, field rows, the
   plain disclosure, the receipt, the rows, switches, sliders, checks, the
   data table and the numbered heads are the foundation's and are NOT
   redrawn here.

   The cvc3-* ids in the markup are JAVASCRIPT HOOKS for
   /js/channel-value-calculator.js.

   The same shape as the Monetization Calculator: the questions, the
   answer riding beside them from 1024px, then the working under them.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
.fnd .cvc3 .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .cvc3 h1.fnd-display,
.fnd .cvc3-qa__list summary,
.fnd.cvc3-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
@media (max-width: 559px) {
  .fnd .cvc3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}
.cvc3-ask,
.cvc3-ans { scroll-margin-top: calc(var(--header-height, 61px) + 16px); }

/* Subscribers and views a month side by side from 480px: the shared row
   waits for 560px. Below 480 they stack, because half a phone cuts
   "300,000,000" off at "300,000,00" and reads as ten times less. The
   niche and the country sit one per line (no row in the markup), so
   "Finance and investing" shows whole rather than "Finance ...". The
   boxes line up at the bottom if one label ever takes two lines. */
@media (min-width: 480px) {
  .fnd .cvc3 .cvc3-ask .fnd-fieldrow.cvc3-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
}
.fnd .cvc3 .cvc3-ask .fnd-input { font-variant-numeric: tabular-nums; }
/* A hint, never a value: placeholders light and thin in every box. */
.fnd .cvc3 .fnd-input::placeholder { font-weight: 400; opacity: .7; }
.fnd .cvc3 .cvc3-opt { font-weight: 500; color: var(--fnd-text-faint); }

/* The three quieter questions, one closed line in the card. */
.fnd .cvc3 .cvc3-more-q { margin: var(--fnd-s3) 0 0; }
.fnd .cvc3 .cvc3-more-q summary { color: var(--fnd-accent-deep); }
.fnd .cvc3 .cvc3-more-q summary:hover { color: var(--fnd-text); }
.fnd .cvc3 .cvc3-more-q__in { display: grid; gap: var(--fnd-s3); padding-top: var(--fnd-s2); }

.fnd .cvc3 .cvc3-ask .cvc3-help { margin: var(--fnd-s4) 0 0; text-wrap: pretty; }

/* Try an example and Clear: text buttons grown to a 44px tap, in the
   accent so they read as things to press. */
.cvc3-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fnd-s4); margin-top: var(--fnd-s1); }
.fnd .cvc3 .cvc3-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); }
.fnd .cvc3 .cvc3-link.fnd-textbtn:hover { color: var(--fnd-text); }
.fnd .cvc3 .fnd-tool-note[hidden] { display: none; }

/* The answer in one line on a phone. Millions are long, so the value
   may take a second line here rather than run out of the card. */
.fnd .cvc3 .cvc3-now .fnd-tool-now__v { white-space: normal; text-wrap: balance; }

/* ------------------------------------------------------------------
   2. THE ANSWER
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .fnd .cvc3 .cvc3-ans { margin-top: var(--fnd-s5); }
}
/* Each amount stays whole and the range breaks only before its "to",
   so a phone shows "$49,000" over "to $116,000", never a split number. */
.fnd .cvc3 .cvc3-fig { white-space: normal; }
.fnd .cvc3 .cvc3-fig .cvc3-amt { white-space: nowrap; }
/* Millions are spelled out ("$1.2 million"), so they set a size down. */
.fnd .cvc3 .cvc3-fig.cvc3-fig--long { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; }
/* "Add your numbers" is words, not a figure. */
.fnd .cvc3 .cvc3-fig.cvc3-fig--wait { font-size: clamp(1.75rem, 2.8vw, 2.4rem); letter-spacing: -.02em; }

/* 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. */
.fnd .cvc3 .cvc3-rows { margin-top: var(--fnd-s4); }
/* A rule above each row and none after the last, so the card never ends
   on an empty band. */
.fnd .cvc3 .cvc3-rows.fnd-rows { border-top: 0; }
.fnd .cvc3 .cvc3-rows .fnd-row {
  grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--fnd-s4);
  border-bottom: 0; border-top: 1px solid var(--fnd-on-ink-rule);
}
.fnd .cvc3 .cvc3-rows .fnd-row:last-child { padding-bottom: 0; }
.fnd .cvc3 .cvc3-rows .fnd-row-main { grid-column: 1; grid-row: 1; }
.fnd .cvc3 .cvc3-rows .fnd-row-t { color: var(--fnd-on-ink-soft); font-weight: 500; }
/* The shared row cuts a name at two lines; here the name carries the
   answer it explains ("Typical with 50,000 subscribers"), so it shows
   whole. */
.fnd .cvc3 .cvc3-rows .fnd-row-t { display: block; -webkit-line-clamp: unset; overflow: visible; margin: 0; }
.fnd .cvc3 .cvc3-rows .fnd-row-end {
  display: block; grid-column: 2; grid-row: 1; margin-top: 0;
  font-family: var(--fnd-display-font); font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: right;
  color: var(--fnd-on-ink); max-width: 15ch;
}
/* On a phone the amount takes at most 40% of the row and wraps before
   its "to", and the name steps down one size, so a long name ("Typical
   with 50,000 to 100,000 subscribers") ends on two words, never one. */
@media (max-width: 559px) {
  .fnd .cvc3 .cvc3-rows .fnd-row { grid-template-columns: minmax(0, 1fr) fit-content(40%); column-gap: var(--fnd-s3); }
  .fnd .cvc3 .cvc3-rows .fnd-row-t { font-size: var(--fnd-t-meta); }
  .fnd .cvc3 .cvc3-rows .fnd-row-end { max-width: none; }
}
/* On the smallest phones a name beside its amount has room for only one
   or two words a line, so the amount steps under its name instead. */
@media (max-width: 359px) {
  .fnd .cvc3 .cvc3-rows .fnd-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--fnd-s1); }
  .fnd .cvc3 .cvc3-rows .fnd-row-end { grid-column: 1; grid-row: 2; text-align: left; }
}
/* The working rows' names wrap without leaving one word alone. */
.fnd .cvc3 .cvc3-rows--paper .fnd-row-t { text-wrap: pretty; }
/* A row still waiting on a box says what to add, quietly. */
.fnd .cvc3 .cvc3-rows .fnd-row-end.cvc3-soft { font-family: inherit; font-weight: 500; color: var(--fnd-on-ink-faint); }

.cvc3-ans .cvc3-rows { transition: opacity 150ms ease; }
.fnd-tool-ans--wait .cvc3-rows { opacity: .75; }

/* Copied: the icon turns to a tick for a moment (set by the script). */
.fnd .cvc3 .fnd-iconbtn[data-copied="true"] { color: var(--fnd-on-ink); }

/* The next step is the kit's offer inside the answer; hidden until the
   answer is their own, and only one of the two shows. */
.cvc3-offer[hidden] { display: none; }
.fnd .cvc3 .cvc3-offer .fnd-tool-offer__t { text-wrap: balance; }
.fnd .cvc3 .cvc3-offer .fnd-tool-offer__p { text-wrap: pretty; }

/* ------------------------------------------------------------------
   3. THE WORKING
   The four ways and what moves the value, then two cards. Rows and
   amounts here sit on paper, so they take the text colours.
   ------------------------------------------------------------------ */
.fnd .cvc3 .cvc3-more { margin-top: var(--fnd-s6); }
.fnd .cvc3 .cvc3-receipt .fnd-receipt-v { font-variant-numeric: tabular-nums; text-align: right; }
.fnd .cvc3 .cvc3-receipt .fnd-receipt-v.cvc3-soft { font-weight: 500; color: var(--fnd-text-faint); }
.fnd .cvc3 .cvc3-rows--paper .fnd-row { border-top-color: var(--fnd-rule); }
.fnd .cvc3 .cvc3-rows--paper .fnd-row-t { color: var(--fnd-text-soft); }
.fnd .cvc3 .cvc3-rows--paper .fnd-row-end { color: var(--fnd-text); }

/* The card's line under its title: the system's smallest step, so the
   pair reads as one heading without the two blocks touching. */
.fnd .cvc3 .cvc3-card .fnd-tool-more__sub { margin: var(--fnd-s1) 0 0; }
/* The two paces: the label and its value on one line over the slider. */
.cvc3-slide { margin-top: var(--fnd-s4); }
.fnd .cvc3 .cvc3-slide__k { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fnd-s3); margin: 0 0 var(--fnd-s1); }
.fnd .cvc3 .cvc3-slide__k .fnd-label { margin: 0; }
.fnd .cvc3 .cvc3-slide__v { flex: 0 0 auto; font-family: var(--fnd-display-font); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fnd-text); }
/* The four changes, one per line, each its own 44px press. */
.cvc3-wi { display: grid; gap: var(--fnd-s1); margin-top: var(--fnd-s4); }
.fnd .cvc3 .cvc3-wi .fnd-switch { min-height: 44px; }
.fnd .cvc3 .cvc3-wi .fnd-switch b { font-variant-numeric: tabular-nums; color: var(--fnd-accent-deep); }
.fnd .cvc3 .cvc3-card .cvc3-tbl { margin-top: var(--fnd-s4); }
.fnd .cvc3-tbl td { font-variant-numeric: tabular-nums; }
.fnd .cvc3-tbl td.cvc3-soft { color: var(--fnd-text-faint); }

/* Ready to sell: the title and the score on one line. */
.cvc3-ready__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fnd-s3); }
.fnd .cvc3 .cvc3-ready__head .fnd-tool-h3 { margin: 0; }
.fnd .cvc3 .cvc3-ready__n { flex: 0 0 auto; margin: 0; font-size: var(--fnd-t-sm); color: var(--fnd-text-soft); white-space: nowrap; }
.fnd .cvc3 .cvc3-ready__n b { font-family: var(--fnd-display-font); font-size: var(--fnd-t-h3); font-weight: 800; color: var(--fnd-text); font-variant-numeric: tabular-nums; }
.fnd .cvc3 .cvc3-checks { margin-top: var(--fnd-s3); }
.fnd .cvc3 .cvc3-ready__v { margin: var(--fnd-s4) 0 0; padding-top: var(--fnd-s3); border-top: 1px solid var(--fnd-rule); font-weight: 600; color: var(--fnd-text); text-wrap: pretty; }
.fnd .cvc3 .cvc3-ready__tips { margin-top: var(--fnd-s2); }
.cvc3-ready__tips[hidden] { display: none; }

/* ------------------------------------------------------------------
   4. THE GUIDE
   ------------------------------------------------------------------ */
.fnd .cvc3-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));
}
.cvc3-guide .fnd-tool-read .fnd-h2:focus { outline: none; }
@media (max-width: 767px) {
  .fnd .cvc3-guide .fnd-tool-read .fnd-h2 { margin-top: var(--fnd-s7); }
}
/* A link inside a sentence grows to a 44px press without moving the text. */
.fnd .cvc3-guide .fnd-tool-read p a:not(.fnd-btn),
.fnd .cvc3-qa__list p a:not(.fnd-btn) { padding-block: 13px; }

/* The four ways: the shared numbered heads, a paragraph under each. */
.cvc3-steps { list-style: none; margin: var(--fnd-s4) 0 0; padding: 0; }
.cvc3-steps li + li { margin-top: var(--fnd-s5); }
.cvc3-steps .fnd-numhead { margin-bottom: var(--fnd-s2); }
.fnd .cvc3-steps .fnd-numhead__t { font-size: var(--fnd-t-h3); }
.cvc3-steps p { margin: 0; padding-left: calc(32px + var(--fnd-s3)); }
@media (max-width: 559px) {
  .cvc3-steps p { padding-left: 0; }
}
/* The line under a list or table gets air so it does not read as part
   of it. */
.fnd .cvc3-guide .cvc3-tbl + p,
.fnd .cvc3-guide .cvc3-steps + p { margin-top: var(--fnd-s4); }
/* Raises against lowers: two columns of words, not a name and a figure,
   so each gets half and wraps. The data table's phone row keeps its last
   column on one line, which squeezed the first to a sliver. */
.fnd .cvc3-guide .fnd-tbl.cvc3-tbl--pair table { table-layout: fixed; }
.fnd .cvc3-guide .fnd-tbl.cvc3-tbl--pair tbody td { white-space: normal; }
@media (max-width: 639px) {
  .fnd .cvc3-guide .fnd-tbl.cvc3-tbl--pair thead th,
  .fnd .cvc3-guide .fnd-tbl.cvc3-tbl--pair tbody td { flex: 1 1 0; min-width: 0; white-space: normal; text-align: left; text-wrap: pretty; }
  .fnd .cvc3-guide .fnd-tbl.cvc3-tbl--pair tbody td:last-child { font-weight: 600; }
}