/* ==================================================================
   /tools/youtube-revenue-per-view-calculator on the foundation look.
   Loaded ONLY when the 'tools-revenue-per-view-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
   guide, the questions, the links and the close are the shared tool kit
   (foundation-tools.css); the inputs, slider, segment, pickers, rows,
   meters, receipt, data table and numbered heads are the foundation's
   and are NOT redrawn here.

   The rpv3-* ids in the markup are JAVASCRIPT HOOKS for
   /js/revenue-per-view-calculator.js.

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

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
.fnd .rpv3 .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .rpv3 h1.fnd-display,
.fnd .rpv3-qa__list summary,
.fnd.rpv3-page .fnd-tool-close .fnd-btn,
.fnd.rpv3-page .fnd-tool-close h2 { text-wrap: balance; }
/* "Revenue Per View Calculator" stays on one line under "YouTube", about
   13.6 times the type size wide, so under 500px the size follows the
   screen (16px gutters each side) and it fits from 320px up. */
@media (max-width: 499px) {
  .fnd .rpv3 .fnd-tool-lead .fnd-display { font-size: min(2.5rem, calc((100vw - 32px) / 14)); }
}
/* From 1024px the answer rides beside the questions and the column is
   about 520px, so the size follows the column. */
@media (min-width: 1024px) {
  .fnd .rpv3 .fnd-tool-lead { container-type: inline-size; }
  .fnd .rpv3 .fnd-tool-lead .fnd-display { max-width: none; font-size: min(3.75rem, calc(100cqi / 14)); }
}
@media (max-width: 559px) {
  .fnd .rpv3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}
.rpv3-ask,
.rpv3-ans { scroll-margin-top: calc(var(--header-height, 61px) + 16px); }

.fnd .rpv3 .rpv3-num { font-variant-numeric: tabular-nums; }
.fnd .rpv3 .rpv3-ask .fnd-fieldrow { margin-top: var(--fnd-s4); }
.fnd .rpv3 .rpv3-typefield { margin-top: var(--fnd-s4); }
/* The two video types share the width on a phone, so each tap is wide. */
.fnd .rpv3 .rpv3-type { display: flex; width: 100%; }
.fnd .rpv3 .rpv3-type button { flex: 1 1 0; min-height: 44px; }
@media (min-width: 768px) {
  .fnd .rpv3 .rpv3-type { width: auto; display: inline-flex; }
  .fnd .rpv3 .rpv3-type button { flex: 0 0 auto; padding-inline: var(--fnd-s5); }
}
.fnd .rpv3 .fnd-tool-note[hidden] { display: none; }
.fnd .rpv3 .rpv3-ask__note { text-wrap: pretty; }

/* ------------------------------------------------------------------
   2. THE ANSWER
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .fnd .rpv3 .rpv3-ans { margin-top: var(--fnd-s5); }
}
.fnd .rpv3 .rpv3-fig { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* A long range ("$1.4 million to $4.4 million") steps the figure down so
   it never runs past the card. Set by the script by text length. */
.fnd .rpv3 .rpv3-fig.rpv3-fig--long { font-size: clamp(1.75rem, 7.5vw, 2.5rem); }
@media (min-width: 1024px) {
  .fnd .rpv3 .rpv3-fig.rpv3-fig--long { font-size: 2.25rem; }
}
.fnd .rpv3 #rpv3-fig-l { 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. */
.fnd .rpv3 .rpv3-rows { margin-top: var(--fnd-s4); }
.fnd .rpv3 .rpv3-rows.fnd-rows,
.fnd .rpv3 .rpv3-goals.fnd-rows { border-top: 0; }
.fnd .rpv3 .rpv3-rows .fnd-row,
.fnd .rpv3 .rpv3-goals .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 .rpv3 .rpv3-rows .fnd-row:last-child,
.fnd .rpv3 .rpv3-goals .fnd-row:last-child { padding-bottom: 0; }
.fnd .rpv3 .rpv3-rows .fnd-row-main,
.fnd .rpv3 .rpv3-goals .fnd-row-main { grid-column: 1; grid-row: 1; }
.fnd .rpv3 .rpv3-rows .fnd-row-t,
.fnd .rpv3 .rpv3-goals .fnd-row-t { display: block; -webkit-line-clamp: unset; overflow: visible; margin: 0; font-weight: 500; }
.fnd .rpv3 .rpv3-rows .fnd-row-t { color: var(--fnd-on-ink-soft); }
.fnd .rpv3 .rpv3-rows .fnd-row-end,
.fnd .rpv3 .rpv3-goals .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;
}
.fnd .rpv3 .rpv3-rows .fnd-row-end { color: var(--fnd-on-ink); }

.rpv3-ans .rpv3-rows,
.rpv3-ans .rpv3-fig { transition: opacity 150ms ease; }
.fnd-tool-ans--wait .rpv3-rows,
.fnd-tool-ans--wait .rpv3-fig { opacity: .35; }

/* Copied: the icon turns to a tick for a moment (set by the script). */
.fnd .rpv3 .fnd-iconbtn[data-copied="true"] { color: var(--fnd-on-ink); }
.fnd .rpv3 .rpv3-offer .fnd-tool-offer__t { text-wrap: balance; }
.fnd .rpv3 .rpv3-offer .fnd-tool-offer__p { text-wrap: pretty; }

/* ------------------------------------------------------------------
   3. THE WORKING CARDS
   The watch hours card first, then the receipt, every niche and the
   goals. One column under the questions; two from 900px; back to one
   beside the answer from 1024px, as the kit sets.
   ------------------------------------------------------------------ */
.fnd .rpv3 .rpv3-more { gap: var(--fnd-s6); margin-top: var(--fnd-s6); }
.fnd .rpv3 .rpv3-more .fnd-tool-more__sub { text-wrap: pretty; }
/* The watch hours card in the narrow column beside the answer: the
   shared offer splits words and button from 768px, which squeezed its
   words to four per line here. Stacked, as it is on a phone. */
@media (min-width: 1024px) {
  .fnd .rpv3 .rpv3-more .tool-wh .fnd-offer { grid-template-columns: minmax(0, 1fr); gap: var(--fnd-s5); padding: var(--fnd-s6); }
  .fnd .rpv3 .rpv3-more .tool-wh .fnd-offer-act { align-items: flex-start; }
}
/* No dead band between its words and its button, as on the Money
   Calculator (tools-money-calculator-v2.css). */
.fnd .rpv3 .rpv3-more .tool-wh .fnd-offer-act { margin-top: 0; }
/* On a phone the working cards end the first section; the kit's bottom
   padding plus the guide's top left about 120px of empty paper. */
@media (max-width: 767px) {
  .fnd.rpv3-page .rpv3-top { padding-bottom: var(--fnd-s5); }
}
.fnd .rpv3 .fnd-receipt-v { font-variant-numeric: tabular-nums; text-align: right; }

/* Every niche: the shared meters, the chosen one marked. */
.fnd .rpv3 .rpv3-meters { display: grid; gap: var(--fnd-s4); }
.fnd .rpv3 .rpv3-meters .fnd-meter-v { font-variant-numeric: tabular-nums; }
.fnd .rpv3 .rpv3-meters .rpv3-meter--on .fnd-meter-l { font-weight: 700; color: var(--fnd-text); }
.fnd .rpv3 .rpv3-meters .rpv3-meter--on .fnd-meter-l::after { content: " \00b7  yours"; font-weight: 500; color: var(--fnd-accent-deep); }
.fnd .rpv3 .rpv3-meters-all { margin-top: var(--fnd-s3); }
.rpv3-meters-all[hidden] { display: none; }

/* The goals sit on paper, so their rows take the text colours. */
.fnd .rpv3 .rpv3-dailyfield { margin: 0; max-width: 240px; }
.fnd .rpv3 .rpv3-dailyfield .fnd-input { width: 100%; }
.fnd .rpv3 .rpv3-goals { margin-top: var(--fnd-s4); }
.fnd .rpv3 .rpv3-goals .fnd-row { border-top-color: var(--fnd-rule); }
.fnd .rpv3 .rpv3-goals .fnd-row-t { color: var(--fnd-text); }
.fnd .rpv3 .rpv3-goals .fnd-row-meta { display: block; margin-top: 2px; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); }
.fnd .rpv3 .rpv3-goals .fnd-row-end { color: var(--fnd-text); }
.fnd .rpv3 .rpv3-goal-note { margin: var(--fnd-s4) 0 0; padding-top: var(--fnd-s3); border-top: 1px solid var(--fnd-rule); text-wrap: pretty; }
.rpv3-goal-note:empty { display: none; }

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

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

.fnd .rpv3-tbl td { font-variant-numeric: tabular-nums; }
.fnd .rpv3-tbl + p { margin-top: var(--fnd-s4); }
.fnd .rpv3-formula { margin-top: var(--fnd-s3); text-wrap: balance; }
.fnd .rpv3-receipt { margin: var(--fnd-s4) 0; }
.fnd .rpv3-receipt .fnd-receipt-v { text-align: right; text-wrap: pretty; }
.fnd .rpv3-src { margin-top: var(--fnd-s4); }
.fnd .rpv3-guide .fnd-tool-answers .fnd-ans-d,
.fnd .rpv3-guide .fnd-tool-read p { text-wrap: pretty; }