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

   The sml3-* ids in the markup are JAVASCRIPT HOOKS for
   /js/subscriber-milestone-calculator.js.

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

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

/* The two counts side by side from 480px: the shared row waits for
   560px. Below 480 they stack, so a long count shows whole. The boxes
   line up at the bottom if one label takes two lines. */
@media (min-width: 480px) {
  .fnd .sml3 .sml3-ask .fnd-fieldrow.sml3-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
}
.fnd .sml3 .sml3-ask .fnd-input { font-variant-numeric: tabular-nums; }
/* A hint, never a value: placeholders light and thin in every box. */
.fnd .sml3 .fnd-input::placeholder { font-weight: 400; opacity: .7; }

/* The two older counts, one closed line in the card. */
.fnd .sml3 .sml3-more-q { margin: var(--fnd-s3) 0 0; }
.fnd .sml3 .sml3-more-q summary { color: var(--fnd-accent-deep); }
.fnd .sml3 .sml3-more-q summary:hover { color: var(--fnd-text); }
.fnd .sml3 .sml3-more-q__in { display: grid; gap: var(--fnd-s3); padding-top: var(--fnd-s2); }
.fnd .sml3 .sml3-more-help { margin: 0; text-wrap: pretty; }

.fnd .sml3 .sml3-ask .sml3-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. */
.sml3-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fnd-s4); margin-top: var(--fnd-s1); }
.fnd .sml3 .sml3-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); }
.fnd .sml3 .sml3-link.fnd-textbtn:hover { color: var(--fnd-text); }
.fnd .sml3 .fnd-tool-note[hidden] { display: none; }

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

/* ------------------------------------------------------------------
   2. THE ANSWER
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .fnd .sml3 .sml3-ans { margin-top: var(--fnd-s5); }
}
/* On a phone the three share buttons take their own row at the top right,
   so the label over the answer gets the full width (two lines, not three). */
@media (max-width: 559px) {
  .fnd .sml3 .sml3-ans .fnd-tool-ans__top { flex-wrap: wrap; row-gap: 0; }
  .fnd .sml3 .sml3-ans .fnd-tool-ans__top .fnd-tool-ans__k { flex: 1 1 100%; }
  .fnd .sml3 .sml3-ans .fnd-tool-share { order: -1; margin: -10px -12px 0 auto; }
}
.fnd .sml3 .fnd-tool-ans__k { text-wrap: balance; }
/* Each time stays whole and the range breaks only before its "to", so a
   phone shows "10 months" over "to 2 years", never a split one. */
.fnd .sml3 .sml3-fig { white-space: normal; }
.fnd .sml3 .sml3-fig .sml3-amt { white-space: nowrap; }
/* Words, not a time ("Add your numbers", "Not growing yet"). */
.fnd .sml3 .sml3-fig.sml3-fig--wait { font-size: clamp(1.75rem, 2.8vw, 2.4rem); letter-spacing: -.02em; }

/* How far along the way to the milestone, on ink. */
.fnd .sml3 .sml3-bar { margin-top: var(--fnd-s3); background: var(--fnd-on-ink-rule); }
.sml3-bar i { transition: width 400ms cubic-bezier(.22, 1, .36, 1); }
.fnd .sml3 #sml3-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 .sml3 .sml3-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 .sml3 .sml3-rows.fnd-rows { border-top: 0; }
.fnd .sml3 .sml3-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 .sml3 .sml3-rows .fnd-row-main { grid-column: 1; grid-row: 1; }
.fnd .sml3 .sml3-rows .fnd-row-t { display: block; -webkit-line-clamp: unset; overflow: visible; margin: 0; color: var(--fnd-on-ink-soft); font-weight: 500; }
.fnd .sml3 .sml3-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;
}
@media (max-width: 559px) {
  .fnd .sml3 .sml3-rows .fnd-row { grid-template-columns: minmax(0, 1fr) fit-content(55%); column-gap: var(--fnd-s3); }
  .fnd .sml3 .sml3-rows .fnd-row-t { font-size: var(--fnd-t-meta); }
  .fnd .sml3 .sml3-rows .fnd-row-end { max-width: none; }
}
/* A row still waiting on a box says what to add, quietly. */
.fnd .sml3 .sml3-rows .fnd-row-end.sml3-soft { font-family: inherit; font-weight: 500; color: var(--fnd-on-ink-faint); }

/* What the milestone unlocks: one short paragraph under the rows. */
.fnd .sml3 .sml3-unlock {
  margin: var(--fnd-s3) 0 0; padding-top: var(--fnd-s3);
  border-top: 1px solid var(--fnd-on-ink-rule);
  color: var(--fnd-on-ink-soft); text-wrap: pretty;
}
.fnd .sml3 .sml3-unlock b { color: var(--fnd-on-ink); font-weight: 700; }

.sml3-ans .sml3-rows,
.sml3-ans .sml3-bar,
.sml3-ans .sml3-unlock { transition: opacity 150ms ease; }
.fnd-tool-ans--wait .sml3-rows,
.fnd-tool-ans--wait .sml3-unlock { opacity: .75; }
.fnd-tool-ans--wait .sml3-bar { opacity: .3; }

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

/* ------------------------------------------------------------------
   3. THE WORKING
   The next five, the three ways, then two cards. Everything here sits
   on paper, so it takes the text colours.
   ------------------------------------------------------------------ */
.fnd .sml3 .sml3-more { margin-top: var(--fnd-s6); }
.fnd .sml3 .sml3-receipt .fnd-receipt-v { font-variant-numeric: tabular-nums; text-align: right; }
.fnd .sml3 .sml3-receipt .fnd-receipt-v.sml3-soft { font-weight: 500; color: var(--fnd-text-faint); }

/* 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 .sml3 .sml3-card .fnd-tool-more__sub { margin: var(--fnd-s1) 0 0; }
/* The three sliders: the label and its value on one line over each. */
.sml3-slide { margin-top: var(--fnd-s4); }
.fnd .sml3 .sml3-slide__k { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fnd-s3); margin: 0 0 var(--fnd-s1); }
.fnd .sml3 .sml3-slide__k .fnd-label { margin: 0; }
.fnd .sml3 .sml3-slide__v { flex: 0 0 auto; font-family: var(--fnd-display-font); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fnd-text); }
.fnd .sml3 .sml3-card .sml3-tbl { margin-top: var(--fnd-s4); }
.fnd .sml3-tbl td { font-variant-numeric: tabular-nums; }
.fnd .sml3-tbl td.sml3-soft { color: var(--fnd-text-faint); }
/* A one-cell message row ("Move a slider...") wraps like a sentence. */
.fnd .sml3 .sml3-tbl td[colspan] { white-space: normal; text-wrap: pretty; text-align: left; }
@media (max-width: 639px) {
  .fnd .sml3 .sml3-tbl td[colspan] { flex: 0 1 100%; min-width: 0; }
}
.fnd .sml3 .sml3-tips { margin-top: var(--fnd-s3); }

/* What each milestone unlocks is words, so it wraps on a computer. On a
   phone it takes its own line under the milestone and when. */
.fnd .sml3 .sml3-tbl--list tbody td:nth-child(2) { white-space: normal; text-wrap: pretty; }
@media (max-width: 639px) {
  .fnd .sml3 .sml3-tbl--list tbody td:nth-child(2) { flex: 0 1 100%; white-space: normal; }
}

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

/* The three ways: the shared numbered heads, a paragraph under each. */
.sml3-steps { list-style: none; margin: var(--fnd-s4) 0 0; padding: 0; }
.sml3-steps li + li { margin-top: var(--fnd-s5); }
.sml3-steps .fnd-numhead { margin-bottom: var(--fnd-s2); }
.fnd .sml3-steps .fnd-numhead__t { font-size: var(--fnd-t-h3); }
.sml3-steps p { margin: 0; padding-left: calc(32px + var(--fnd-s3)); }
@media (max-width: 559px) {
  .sml3-steps p { padding-left: 0; }
}
/* The line under a list or table gets air so it does not read as part
   of it. */
.fnd .sml3-guide .sml3-tbl + p,
.fnd .sml3-guide .sml3-steps + p { margin-top: var(--fnd-s4); }
/* What each milestone unlocks: a count and words, so the words get the
   room and wrap. The data table's phone row keeps its last column on one
   line, which would run "Apply for memberships..." out of the card. */
.fnd .sml3-guide .sml3-tbl tbody td:last-child { white-space: normal; text-wrap: pretty; }
@media (max-width: 639px) {
  .fnd .sml3-guide .sml3-tbl thead th:first-child,
  .fnd .sml3-guide .sml3-tbl tbody td:first-child { flex: 0 0 7.5em; }
  .fnd .sml3-guide .sml3-tbl thead th:last-child,
  .fnd .sml3-guide .sml3-tbl tbody td:last-child { flex: 1 1 0; min-width: 0; white-space: normal; text-align: left; }
}