/* ==================================================================
   /tools/youtube-money-calculator, rebuilt on the foundation.
   Loaded ONLY when the 'tools-youtube-money-calculator' redesign switch
   is on for this viewer; the old page keeps tools.css, the night hero
   and its own sheet, untouched.

   THE IDEA. The calculator is a short labelled form, and the answer is
   one ink instrument beside it, on the first screen, next to the name
   of the tool. Since 2026-09-29 the page is built from THE TOOL PAGE KIT
   (.fnd-tool-*, foundation-tools.css, behaviour in /js/fnd-tool-page.js),
   which was promoted out of this page so every tool shares it. The form
   is .fnd-card, .fnd-field, .fnd-input and .fnd-picker; the rate tables
   are .fnd-tbl--data with .fnd-tbl-bar; the contents rail is .fnd-toc.
   Everything below is what only this page has: the three tabs, the
   answer's rows strip and income meters, the working blocks, the
   milestone ladder and the rate tables.

   The mc-* and mc2-* classes in the markup are HOOKS for the shared
   /js/money-calculator.js, which drives the old page too. The state
   classes it sets that this sheet styles are .mc-panel--active,
   .mc2-rows--stack, .mc2-cut and .mc2-ans--wait.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   The kit lays out the grid. Here: the three tabs, each a panel of its
   own; from 1024px the active panel and its .mc2-inst are display:
   contents, so their children join the kit's grid directly.
   ------------------------------------------------------------------ */
.mc2 .mc-panel:not(.mc-panel--active) { display: none; }
.mc2-inst { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fnd-s6); }
@media (min-width: 1024px) {
  .mc2 .mc-panel--active,
  .mc2 .mc-panel--active > .mc2-inst { display: contents; }
}

/* 13ch keeps "YouTube Money" on one line: two lines, not three, so the
   form below starts inside the first screen on a laptop. */
.fnd .mc2-lead .fnd-display { max-width: 13ch; }

/* Waiting for a number: the rows and meters step back with the figure. */
.mc2-ans .mc2-rows, .mc2-ans .mc2-meters { transition: opacity 150ms ease; }
.mc2-ans--wait .mc2-rows, .mc2-ans--wait .mc2-meters { opacity: .3; }
.mc2-amt { white-space: nowrap; }

/* The rows under the figure (per day, video, year). Name left, money
   right, on phones too: the shared rows drop the end slot under the
   name below 767px, which here would read as a list of prices. */
.mc2 .mc2-rows { margin-top: var(--fnd-s5); }
.mc2-rows .fnd-row-end,
.mc2-ladder .fnd-row-end {
  font-family: var(--fnd-display-font); font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: right;
}
.mc2-ans .fnd-row-end { color: var(--fnd-on-ink); }
/* A range is one run of text. The shared end slot is a flex row with a
   gap, which turned the "to" between the two figures into its own item. */
.fnd .mc2 .mc2-rows .fnd-row-end { display: block; }
/* From 1024px the rows stand side by side as one strip, name over
   money: three stacked rows pushed the audit button below the first
   screen of a laptop. Every range stays on one line: when big numbers
   would not fit, money-calculator.js (fitStrip) sets the money smaller,
   and if that still does not fit it adds .mc2-rows--stack, which drops
   the strip back to the stacked rows (10 million views broke three
   ranges after their "to" on a 1440 screen). */
@media (min-width: 1024px) {
  /* Columns sized by what they hold, not three equal thirds: "Per year,
     all seasons" and its bigger range wrapped in a third while "Per day"
     had room to spare. The strip is two shared lines, names then money,
     filled a column at a time: every figure starts on one line whichever
     name or range wraps. Money pushed to the foot of each column put a
     range that fitted on one line level with the SECOND line of the
     ranges beside it. */
  .fnd .mc2 .mc2-rows:not(.mc2-rows--stack) {
    display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: auto;
    /* Centred columns already show air between them; a wider gap broke the
       everyday ranges ("$4.56 to $18.23") onto two lines on a laptop. */
    column-gap: var(--fnd-s3);
    padding: var(--fnd-s3) 0;
    border-bottom: 1px solid var(--fnd-on-ink-rule);
  }
  .fnd .mc2 .mc2-rows:not(.mc2-rows--stack) .fnd-row { display: contents; text-align: center; }
  /* The shared row pins its name and money to its own columns; here the
     strip places them, a name then its money down each column. */
  .fnd .mc2 .mc2-rows:not(.mc2-rows--stack) .fnd-row-main,
  .fnd .mc2 .mc2-rows:not(.mc2-rows--stack) .fnd-row-end { grid-column: auto; grid-row: auto; }
  .fnd .mc2 .mc2-rows:not(.mc2-rows--stack) .fnd-row-main { align-self: end; }
  .fnd .mc2 .mc2-rows:not(.mc2-rows--stack) .fnd-row-t { margin: 0 0 2px; font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-on-ink-soft); }
  /* Centred like its name: a range long enough to break after its "to"
     sat flush left under a centred name. */
  .fnd .mc2 .mc2-rows:not(.mc2-rows--stack) .fnd-row-end { align-self: start; text-align: center; font-size: 16px; line-height: 1.3; }
}
/* A 1024px laptop left the strip 29px short of the everyday ranges
   ("$1.30 to $5.21"), so each broke onto two lines on the first screen.
   There the card gives up some side air and the columns sit closer. */
@media (min-width: 1024px) and (max-width: 1099px) {
  .mc2-ans__in { padding-left: var(--fnd-s4); padding-right: var(--fnd-s4); }
  .fnd .mc2 .mc2-rows:not(.mc2-rows--stack) { column-gap: var(--fnd-s2); }
}
/* A laptop screen short enough that the audit button would still fall
   below the fold: the first screen gives up some of its air instead. */
@media (min-width: 1024px) and (max-height: 760px) {
  .mc2-top__in { padding-top: var(--fnd-s5); }
  .mc2-ans__in { padding-top: var(--fnd-s5); }
  .mc2 .mc2-rows { margin-top: var(--fnd-s4); }
}
@media (max-width: 767px) {
  .fnd .mc2 .mc2-rows .fnd-row,
  .fnd .mc2 .mc2-ladder .fnd-row { grid-template-columns: minmax(0, 1fr) auto; }
  .fnd .mc2 .mc2-rows .fnd-row-end,
  .fnd .mc2 .mc2-ladder .fnd-row-end { grid-column: 2; grid-row: 1; margin-top: 0; }
}
/* On a 320px phone a range like "$4,752 to $18,806" leaves its name no
   room ("Per yea"), and the income meters wrapped their names onto three
   lines. There each name sits over its money instead. */
@media (max-width: 359px) {
  .fnd .mc2 .mc2-rows .fnd-row { display: block; }
  .fnd .mc2 .mc2-rows .fnd-row-t { margin: 0 0 2px; }
  .fnd .mc2 .mc2-rows .fnd-row-end { text-align: left; }
  .mc2-ans .fnd-meter { grid-template-columns: minmax(0, 1fr); }
}

/* The four income meters. Only the biggest source takes the accent (the
   script marks it .mc2-meter--top), so the eye lands on where the money
   comes from; the rest are quiet white on ink. */
.mc2-meters { display: grid; gap: var(--fnd-s4); margin-top: var(--fnd-s5); }
.mc2-ans .fnd-meter-t i { background: var(--fnd-on-ink-faint); }
.mc2-ans .mc2-meter--top .fnd-meter-t i { background: var(--fnd-accent); }
.mc2-ans .mc2-meter--top .fnd-meter-l { color: var(--fnd-on-ink); font-weight: 700; }
/* A stream YouTube has not opened yet (ads below 1,000 subscribers,
   memberships and Super Chat below 500) says when it opens, in place of
   its money, and a line under the meters says what the ads gate is. */
.mc2 .mc2-pair[hidden], .mc2 .mc2-lock[hidden], .mc2 .mc2-ypp[hidden] { display: none; }
.mc2-lock { font-family: var(--fnd-body-font); font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-on-ink-faint); }
.mc2-ypp { margin: var(--fnd-s4) 0 0; font-size: var(--fnd-t-meta); line-height: 1.5; color: var(--fnd-on-ink-soft); }
.mc2-ypp a { color: var(--fnd-on-ink); font-weight: 600; white-space: nowrap; }
.mc2-tierline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 var(--fnd-s4);
  font-size: var(--fnd-t-meta); color: var(--fnd-on-ink-faint);
}

/* Under the rows, the last row's rule already divides: a second rule
   beneath it drew two lines 20px apart. */
.mc2 .mc2-rows ~ .mc2-offer { border-top: 0; padding-top: 0; }

/* A two-line label breaks where it reads, never leaving one word alone
   on the second line ("seasons", "month", "longer" did at 375px). Page
   wide here; the kit does it inside the answer only. */
.mc2 .fnd-row-t, .mc2 .fnd-meter-l { text-wrap: balance; }

/* The working blocks: the kit lays them out; the ladder stretches too. */
.mc2-more__col > .mc2-ladder { flex: 1 1 auto; }
.mc2 .mc2-list > * + * { margin-top: var(--fnd-s4); }
.mc2-list__note { margin: 0; font-size: var(--fnd-t-sm); color: var(--fnd-text-soft); }
.mc2-list__note b { color: var(--fnd-text); }
.mc2 .fnd-receipt-v { font-variant-numeric: tabular-nums; }

/* Long against Shorts: the multiple is the headline, the bars prove it. */
.mc2-gap > .mc2-list { display: flex; flex-direction: column; height: 100%; }
.mc2 .mc2-gap__lead {
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: var(--fnd-t-lede); line-height: 1.35; color: var(--fnd-text-soft);
}
.mc2 .mc2-gap__lead b {
  display: block; margin: 2px 0;
  font-size: clamp(2.3rem, 4vw, 2.9rem); font-weight: 800; line-height: 1.05;
  letter-spacing: -.04em; color: var(--fnd-accent-deep);
}
/* The lead's own margin is the minimum gap; the bars' auto margin takes any
   height the neighbouring card adds, so the bars sit on the floor. */
.mc2 .mc2-gap > .mc2-list > .mc2-gap__lead { margin-bottom: var(--fnd-s5); }
.mc2 .mc2-gap__bars { display: grid; gap: var(--fnd-s4); margin-top: auto; }
/* The longer bar in the accent, the colour of the multiple it proves, the
   same as the headline row in the rate tables. Not green: it is not a
   verdict on the visitor. */
.mc2 .mc2-gap__bars .fnd-meter:first-child .fnd-meter-t i { background: var(--fnd-accent-deep); }

/* The visitor's own niche in the goal field: the one filled bar, in the
   accent, with its name in full weight. Not green, because being chosen
   is not a verdict. */
.mc2-meter--you .fnd-meter-l { color: var(--fnd-text); font-weight: 700; }
.mc2-meter--you .fnd-meter-t i { background: var(--fnd-accent-deep); }

/* The milestone ladder. Rungs the goal already reaches are marked with a
   filled dot; the rest keep an empty ring. */
.mc2-ladder { list-style: none; margin: 0; padding: 0; }
.mc2-ladder .fnd-row-t { display: inline-flex; align-items: center; gap: 10px; color: var(--fnd-text-soft); }
.mc2-ladder .fnd-row-t::before {
  content: ""; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--fnd-rule);
}
.mc2-ladder .fnd-row-end { color: var(--fnd-text-faint); }
.mc2-ladder .mc2-rung--in .fnd-row-t { color: var(--fnd-text); font-weight: 700; }
.mc2-ladder .mc2-rung--in .fnd-row-t::before { background: var(--fnd-accent-deep); box-shadow: none; }
.mc2-ladder .mc2-rung--in .fnd-row-end { color: var(--fnd-text); }
/* The key for the filled dot, drawn with the same dot. */
.mc2-key { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; white-space: nowrap; color: var(--fnd-text-soft); }
.mc2-key::before { content: ""; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--fnd-accent-deep); }

/* ------------------------------------------------------------------
   2. THE RATE TABLES
   The first of two tinted bands (the tool links are the second, so no
   more than two paper sections ever sit together, spec section 9).
   Each table's headline column carries the shared bar, grown in by the
   kit (.fnd-tool-bars); the country table opens on its first ten rows
   plus the visitor's own (.mc2-cut, set by money-calculator-page.js,
   which also shows the button that lifts it).
   ------------------------------------------------------------------ */
.fnd .mc2-ref .fnd-h2 { max-width: none; }
.mc2-ref .fnd-tbl { margin-top: var(--fnd-s5); }
.fnd .mc2-ref__h2 { margin-top: var(--fnd-s8); }
/* The niche and country tables stand one above the other, so from a
   laptop their columns are set, not sized by what each holds: "Low CPM"
   started at a different point in each table, so they read as unrelated.
   Not on a tablet or phone, where the last column needs its full width
   for the range and its bar. */
@media (min-width: 1024px) {
  .mc2-tbl table { table-layout: fixed; }
  .mc2-tbl th:first-child { width: 30%; }
  .mc2-tbl th:nth-child(2), .mc2-tbl th:nth-child(3) { width: 15%; }
}
.fnd .mc2-cut > tr:nth-child(n+11):not(.is-you) { display: none; }

/* The guide, questions, more tools, the close and the pinned bar are all
   the kit's (foundation-tools.css), with nothing added here. */