/* ==================================================================
   /tools/youtube-shorts-money-calculator on the foundation look.
   Loaded ONLY when the 'tools-shorts-money-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, pickers, rows, meters, the
   data table and its bars are the foundation's and are NOT redrawn here.

   The smc3-* ids in the markup are JAVASCRIPT HOOKS for
   /js/shorts-money-calculator.js.

   The same shape as the Monetization Calculator: the boxes, the answer
   riding beside them from 1024px, then the watch hours card and two
   working cards under it.
   ================================================================== */

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

.fnd .smc3 .smc3-ask .fnd-input { font-variant-numeric: tabular-nums; }
.fnd .smc3 .smc3-views { margin-bottom: var(--fnd-s4); }
.fnd .smc3 .smc3-help { margin: var(--fnd-s4) 0 0; text-wrap: pretty; }
.fnd .smc3 .smc3-ask__note { text-wrap: pretty; }
.fnd .smc3 .fnd-tool-note[hidden] { display: none; }

/* ------------------------------------------------------------------
   2. THE ANSWER
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .fnd .smc3 .smc3-ans { margin-top: var(--fnd-s5); }
}
/* Each amount keeps its dollar sign and figure together; the range may
   break only at "to". */
.smc3-amt { white-space: nowrap; }
.fnd .smc3 .fnd-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 .smc3 .smc3-rows { margin-top: var(--fnd-s4); }
.fnd .smc3 .smc3-rows.fnd-rows { border-top: 0; }
.fnd .smc3 .smc3-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 .smc3 .smc3-rows .fnd-row:last-child { padding-bottom: 0; }
.fnd .smc3 .smc3-rows .fnd-row-main { grid-column: 1; grid-row: 1; }
.fnd .smc3 .smc3-rows .fnd-row-t {
  display: block; -webkit-line-clamp: unset; overflow: visible; margin: 0;
  color: var(--fnd-on-ink-soft); font-weight: 500;
}
.fnd .smc3 .smc3-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: 18ch;
}
.smc3-ans .smc3-rows,
.smc3-ans .smc3-fig { transition: opacity 150ms ease; }
.fnd-tool-ans--wait .smc3-rows { opacity: .3; }

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

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

.fnd .smc3 .smc3-offer .fnd-tool-offer__t { text-wrap: balance; }
.fnd .smc3 .smc3-offer .fnd-tool-offer__p { text-wrap: pretty; }

/* ------------------------------------------------------------------
   3. UNDER THE ANSWER: the watch hours card, then two working cards.
   One column at every width. Their rows sit on paper, so they take the
   text colours, not the ink's.
   ------------------------------------------------------------------ */
/* The kit's own top margin stays, so the watch hours card gets the same room
   under the answer as on the Money Calculator. */
.fnd .smc3 .smc3-more { grid-template-columns: minmax(0, 1fr); gap: var(--fnd-s5); }
/* The watch hours card: one column with the Money Calculator's spacing
   (tools-money-calculator-v2.css), never the wide offer gap. */
.fnd .smc3-more > .tool-wh .fnd-offer { grid-template-columns: minmax(0, 1fr); gap: var(--fnd-s4); }
.fnd .smc3-more > .tool-wh .fnd-offer-act { align-items: flex-start; margin-top: 0; }
.fnd .smc3 .smc3-card .fnd-tool-more__sub { margin: var(--fnd-s2) 0 0; text-wrap: pretty; }
.fnd .smc3 .smc3-card h2 { text-wrap: balance; }
.smc3-bars { display: grid; gap: var(--fnd-s4); margin-top: var(--fnd-s4); }
/* Long videos in the accent, Shorts in the quiet colour: the gap is the point. */
.fnd .smc3 .smc3-bars #smc3-bar-l { background: var(--fnd-accent); }
.fnd .smc3 .smc3-card__note { margin: var(--fnd-s4) 0 0; padding-top: var(--fnd-s3); border-top: 1px solid var(--fnd-rule); text-wrap: pretty; }
.fnd .smc3 .smc3-goalfield { margin: var(--fnd-s4) 0 0; max-width: 240px; }
.fnd .smc3 .smc3-goalfield .fnd-input { width: 100%; font-variant-numeric: tabular-nums; }
.fnd .smc3 .smc3-rows--paper .fnd-row { border-top-color: var(--fnd-rule); }
.fnd .smc3 .smc3-rows--paper .fnd-row-t { color: var(--fnd-text-soft); }
.fnd .smc3 .smc3-rows--paper .fnd-row-end { color: var(--fnd-text); }
.fnd .smc3 .smc3-goal__note { margin: var(--fnd-s4) 0 0; padding-top: var(--fnd-s3); border-top: 1px solid var(--fnd-rule); text-wrap: pretty; }
.smc3-goal__note[hidden] { display: none; }

/* ------------------------------------------------------------------
   4. THE GUIDE
   ------------------------------------------------------------------ */
.fnd .smc3-guide .fnd-tool-read .fnd-h2 {
  margin-top: var(--fnd-s8);
  max-width: 24ch;
  text-wrap: balance;
  scroll-margin-top: calc(var(--header-height, 61px) + var(--fnd-s4));
}
.smc3-guide .fnd-tool-read .fnd-h2:focus { outline: none; }
@media (max-width: 767px) {
  .fnd .smc3-guide .fnd-tool-read .fnd-h2 { margin-top: var(--fnd-s7); }
}
.fnd .smc3-guide .fnd-tool-read p,
.fnd .smc3-guide .fnd-tool-read li span { text-wrap: pretty; }
/* A link inside a sentence grows to a 44px press without moving the text. */
.fnd .smc3-guide .fnd-tool-read p a:not(.fnd-btn),
.fnd .smc3-qa__list p a:not(.fnd-btn) { padding-block: 13px; }

/* The rate tables: the shared data table, numbers in tabular figures, the
   row for the niche picked above marked by the script. */
.fnd .smc3-tbl { margin-top: var(--fnd-s4); }
.fnd .smc3-tbl td { font-variant-numeric: tabular-nums; }
.fnd .smc3-guide .fnd-tool-sec-sub { margin-top: var(--fnd-s2); }
.fnd .smc3-src { margin-top: var(--fnd-s5); }
/* No lonely last word in the stat tiles or the rate tables. */
.fnd .smc3 .fnd-stat-n,
.fnd .smc3 .fnd-stat-l,
.fnd .smc3-tbl td { text-wrap: balance; }
/* Country table: top 10 shown, the other 17 folded behind a native
   details control (still in the HTML for search engines). */
.fnd .smc3-fold { margin-top: var(--fnd-s3); }
.fnd .smc3-fold > summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.fnd .smc3-fold > summary::-webkit-details-marker { display: none; }
.fnd .smc3-fold[open] > summary { display: none; }
.fnd .smc3-fold .smc3-tbl { margin-top: 0; }
/* Waiting (box empty or 0): the prompt line stays readable, as on the
   Monetization Calculator; only the figure dims. */
.smc3-ans.fnd-tool-ans--wait #smc3-fig-l { opacity: .75; }