/* ==================================================================
   /tools/youtube-monetization-calculator on the foundation look.
   Loaded ONLY when the 'tools-monetization-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, field groups, rows, the progress
   bar, the data table and the numbered heads are the foundation's and
   are NOT redrawn here.

   The monet3-* ids in the markup are JAVASCRIPT HOOKS for
   /js/monetization-calculator.js.

   The same shape as the Watch Time Calculator: the questions, the answer
   riding beside them from 1024px, then one card to pick a date.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
.fnd .monet3 .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .monet3 h1.fnd-display,
.fnd .monet3-qa__list summary,
.fnd.monet3-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
/* "YouTube Monetization Calculator" is long, and "Monetization Calculator"
   stays together on its second line so no word sits alone. That pair is
   about 11.2 times the type size wide, so under 500px the size follows the
   screen (16px gutters each side) and it fits from 320px up. Measured
   2026-10-31: 29.6px at 375, 24.8px at 320, the kit's 40px from 500. */
@media (max-width: 499px) {
  .fnd .monet3 .fnd-tool-lead .fnd-display { font-size: min(2.5rem, calc((100vw - 32px) / 11.6)); }
}
/* From 1024px the answer rides beside the questions and the column is
   about 520px, too narrow for "Monetization Calculator" at the kit's 60px
   (it ran 96px under the card). The size follows the column instead:
   about 11.1 times the type size wide, so 11.4 leaves a margin. Measured
   2026-10-31: 46px from 1100 up, 42px at 1024, nothing past the column. */
@media (min-width: 1024px) {
  .fnd .monet3 .fnd-tool-lead { container-type: inline-size; }
  .fnd .monet3 .fnd-tool-lead .fnd-display { max-width: none; font-size: min(3.75rem, calc(100cqi / 11.4)); }
}
@media (max-width: 559px) {
  .fnd .monet3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}
.monet3-ask,
.monet3-ans { scroll-margin-top: calc(var(--header-height, 61px) + 16px); }

/* Each pair side by side at every width: the shared row stacks below
   560px, which would make six boxes in one tall column. The labels are
   short enough for half a phone, and the boxes line up at the bottom if
   one label ever takes two lines. */
.fnd .monet3 .monet3-ask .fnd-fieldrow { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.fnd .monet3 .monet3-ask .fnd-input { font-variant-numeric: tabular-nums; }
/* A hint, never a value: placeholders light and thin in every box. */
.fnd .monet3 .fnd-input::placeholder { font-weight: 400; opacity: .7; }
.fnd .monet3 .monet3-ask .monet3-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. */
.monet3-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fnd-s4); margin-top: var(--fnd-s1); }
.fnd .monet3 .monet3-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); }
.fnd .monet3 .monet3-link.fnd-textbtn:hover { color: var(--fnd-text); }
.fnd .monet3 .fnd-tool-note[hidden] { display: none; }

/* ------------------------------------------------------------------
   2. THE ANSWER
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .fnd .monet3 .monet3-ans { margin-top: var(--fnd-s5); }
}
/* The unit smaller than the figure, the way the kit sets "to". */
.fnd .monet3 .monet3-fig .monet3-fig__u { font-size: .42em; font-weight: 600; letter-spacing: 0; color: var(--fnd-on-ink-soft); }
/* The bar on ink: its track is the ink's own rule colour. */
.fnd .monet3 .monet3-bar { margin-top: var(--fnd-s3); background: var(--fnd-on-ink-rule); }
.monet3-bar i { transition: width 400ms cubic-bezier(.22, 1, .36, 1); }

/* 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
   name may take two lines; the answer never splits from its number. */
.fnd .monet3 .monet3-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 .monet3 .monet3-rows.fnd-rows { border-top: 0; }
.fnd .monet3 .monet3-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 .monet3 .monet3-rows .fnd-row:last-child { padding-bottom: 0; }
.fnd .monet3 .monet3-rows .fnd-row-main { grid-column: 1; grid-row: 1; }
.fnd .monet3 .monet3-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
   goal ("of 1,000"), so it shows whole. */
.fnd .monet3 .monet3-rows .fnd-row-t { display: block; -webkit-line-clamp: unset; overflow: visible; margin: 0; }
.fnd .monet3 .monet3-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;
}
/* A row still waiting on a box says what to add, quietly. */
.fnd .monet3 .monet3-rows .fnd-row-end.monet3-soft { font-family: inherit; font-weight: 500; color: var(--fnd-on-ink-faint); }

.monet3-ans .monet3-rows,
.monet3-ans .monet3-bar { transition: opacity 150ms ease; }
.fnd-tool-ans--wait .monet3-bar { opacity: .3; }
/* While waiting, the rows still show what was typed, so they stay
   readable; only the bar dims. */
.fnd-tool-ans--wait .monet3-rows { opacity: .75; }
.monet3-ans.fnd-tool-ans--wait #monet3-fig-l { opacity: .75; }

.fnd .monet3 .monet3-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;
}
.monet3-ans__note[hidden] { display: none; }

/* Copied: the icon turns to a tick for a moment (set by the script). */
.fnd .monet3 .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. */
.monet3-offer[hidden] { display: none; }
.fnd .monet3 .monet3-offer .fnd-tool-offer__t { text-wrap: balance; }
.fnd .monet3 .monet3-offer .fnd-tool-offer__p { text-wrap: pretty; }

/* ------------------------------------------------------------------
   3. BY A DATE
   One working card under the answer, one column at every width. Its
   rows sit on paper, so they take the text colours, not the ink's.
   ------------------------------------------------------------------ */
.fnd .monet3 .monet3-more { grid-template-columns: minmax(0, 1fr); gap: var(--fnd-s5); margin-top: var(--fnd-s6); }
.fnd .monet3 .monet3-card .fnd-tool-more__sub { margin: 4px 0 0; }
.fnd .monet3 .monet3-byfield { margin: var(--fnd-s4) 0 0; max-width: 240px; }
.fnd .monet3 .monet3-byfield .fnd-input { width: 100%; font-variant-numeric: tabular-nums; }
.fnd .monet3 .monet3-rows--paper .fnd-row { border-top-color: var(--fnd-rule); }
.fnd .monet3 .monet3-rows--paper .fnd-row-t { color: var(--fnd-text-soft); }
.fnd .monet3 .monet3-rows--paper .fnd-row-end { color: var(--fnd-text); }
.fnd .monet3 .monet3-rows--paper .fnd-row-end.monet3-soft { color: var(--fnd-text-faint); }
.fnd .monet3 .monet3-by__note { margin: var(--fnd-s4) 0 0; padding-top: var(--fnd-s3); border-top: 1px solid var(--fnd-rule); text-wrap: pretty; }
.monet3-by__note[hidden] { display: none; }

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

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

/* The table: the shared data table, numbers in tabular figures. */
.fnd .monet3-tbl td { font-variant-numeric: tabular-nums; }
/* The line under the table gets air so it does not read as a table row. */
.fnd .monet3-tbl + p { margin-top: var(--fnd-s4); }
.fnd .monet3-src { margin-top: var(--fnd-s2); }
.fnd .monet3-guide .fnd-tool-answers .fnd-ans-d { text-wrap: pretty; }