/* ==================================================================
   /tools/youtube-analytics-simulator on the foundation look.
   Loaded ONLY when the 'tools-analytics-simulator-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,
   chips, stats, meters, the receipt, the rows, the data table and the
   numbered heads are the foundation's and are NOT redrawn here.

   The tas3-* ids in the markup are JAVASCRIPT HOOKS for
   /js/analytics-simulator-fnd.js.

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

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
.fnd .tas3 .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .tas3 h1.fnd-display,
.fnd .tas3-qa__list summary,
.fnd.tas3-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
/* "Analytics Simulator" stays on one line, so the name never ends on one
   word alone. It is longer than the kit's sixteen characters, so the size
   scales to fit: the column beside the answer on a computer, the screen on
   a phone. */
.fnd .tas3 .fnd-tool-lead .fnd-display { max-width: none; }
@media (min-width: 1024px) {
  .fnd .tas3 .fnd-tool-lead .fnd-display { font-size: clamp(2.5rem, 3.6vw, 3.25rem); }
}
@media (max-width: 559px) {
  .fnd .tas3 .fnd-tool-lead .fnd-display { font-size: min(2.5rem, 9.2vw); }
  .fnd .tas3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}
.tas3-ask,
.tas3-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 .tas3 .tas3-ask .fnd-fieldrow.tas3-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
}
.fnd .tas3 .tas3-ask .fnd-input { font-variant-numeric: tabular-nums; }
/* A hint, never a value: placeholders light and thin in every box. */
.fnd .tas3 .fnd-input::placeholder { font-weight: 400; opacity: .7; }

/* Videos a week and the milestone: the system's chips under a label. A
   milestone the channel has already passed cannot be picked. */
.fnd .tas3 .tas3-pick .fnd-label { margin-bottom: var(--fnd-s2); }
.fnd .tas3 .tas3-pick .fnd-chip-btn { min-width: 44px; justify-content: center; text-align: center; font-variant-numeric: tabular-nums; }
.fnd .tas3 .tas3-pick .fnd-chip-btn:disabled,
.fnd .tas3 .tas3-pick .fnd-chip-btn:disabled:hover {
  cursor: not-allowed; transform: none; box-shadow: none;
  background: var(--fnd-card); border-color: var(--fnd-edge);
  color: var(--fnd-text-faint); opacity: .55;
}

.fnd .tas3 .tas3-ask .tas3-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. */
.tas3-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fnd-s4); margin-top: var(--fnd-s1); }
.fnd .tas3 .tas3-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); }
.fnd .tas3 .tas3-link.fnd-textbtn:hover { color: var(--fnd-text); }
.fnd .tas3 .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 .tas3 .tas3-now .fnd-tool-now__v { white-space: normal; text-wrap: balance; }

/* ------------------------------------------------------------------
   2. THE ANSWER
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .fnd .tas3 .tas3-ans { margin-top: var(--fnd-s5); }
}
/* On a phone the share buttons take their own row at the top right, so
   the label over the answer gets the full width. */
@media (max-width: 559px) {
  .fnd .tas3 .tas3-ans .fnd-tool-ans__top { flex-wrap: wrap; row-gap: 0; }
  .fnd .tas3 .tas3-ans .fnd-tool-ans__top .fnd-tool-ans__k { flex: 1 1 100%; }
  .fnd .tas3 .tas3-ans .fnd-tool-share { order: -1; margin: -10px -12px 0 auto; }
}
.fnd .tas3 .fnd-tool-ans__k { text-wrap: balance; }
/* Each amount stays whole and the range breaks only before its "to", so
   a phone shows "$490" over "to $1,900 a month", never a split one. */
.fnd .tas3 .tas3-fig { white-space: normal; }
.fnd .tas3 .tas3-fig .tas3-amt { white-space: nowrap; }
/* Words, not an amount ("Add your numbers"). */
.fnd .tas3 .tas3-fig.tas3-fig--wait { font-size: clamp(1.75rem, 2.8vw, 2.4rem); letter-spacing: -.02em; }
.fnd .tas3 #tas3-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 .tas3 .tas3-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 .tas3 .tas3-rows.fnd-rows { border-top: 0; }
.fnd .tas3 .tas3-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 .tas3 .tas3-rows .fnd-row-main { grid-column: 1; grid-row: 1; }
.fnd .tas3 .tas3-rows .fnd-row-t { display: block; -webkit-line-clamp: unset; overflow: visible; margin: 0; color: var(--fnd-on-ink-soft); font-weight: 500; }
.fnd .tas3 .tas3-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 .tas3 .tas3-rows .fnd-row { grid-template-columns: minmax(0, 1fr) fit-content(55%); column-gap: var(--fnd-s3); }
  .fnd .tas3 .tas3-rows .fnd-row-t { font-size: var(--fnd-t-meta); }
  .fnd .tas3 .tas3-rows .fnd-row-end { max-width: none; }
}
/* A row still waiting on a box says what to add, quietly. */
.fnd .tas3 .tas3-rows .fnd-row-end.tas3-soft { font-family: inherit; font-weight: 500; color: var(--fnd-on-ink-faint); }

.tas3-ans .tas3-rows { transition: opacity 150ms ease; }
.fnd-tool-ans--wait .tas3-rows { opacity: .75; }

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

/* ------------------------------------------------------------------
   3. THE WORKING
   The channel at that size, the money split, the timeline and the
   rates. Everything here sits on paper, so it takes the text colours.
   ------------------------------------------------------------------ */
.fnd .tas3 .tas3-more { margin-top: var(--fnd-s6); }
.fnd .tas3 .tas3-stats .fnd-stat-l { text-wrap: pretty; }
.fnd .tas3 .tas3-stats .fnd-stat-d:empty { display: none; }
/* Each number stays on one line ("10 minutes" broke in two at 375). When
   one is too wide, FitStats in the page script shrinks all four together. */
.fnd .tas3 .tas3-stats .fnd-stat-n { white-space: nowrap; }
.fnd .tas3 .tas3-stats .fnd-stat-n.tas3-soft { font-size: var(--fnd-t-body); font-family: inherit; font-weight: 500; color: var(--fnd-text-faint); white-space: normal; }
/* The four sources, one under the other with room to read each. */
.tas3-meters { display: grid; gap: var(--fnd-s4); }
.fnd .tas3 .tas3-meters .fnd-meter-v.tas3-soft { font-family: inherit; font-weight: 500; color: var(--fnd-text-faint); }
.fnd .tas3 .tas3-receipt .fnd-receipt-v { font-variant-numeric: tabular-nums; text-align: right; }
.fnd .tas3 .tas3-receipt .fnd-receipt-v.tas3-soft { font-weight: 500; color: var(--fnd-text-faint); }
.fnd .tas3-tbl td { font-variant-numeric: tabular-nums; }
.fnd .tas3-tbl td.tas3-soft { color: var(--fnd-text-faint); }

/* Four numbers, always two by two: the shared grid fits three beside the
   answer and leaves the fourth alone next to an empty block. */
.fnd .tas3 .tas3-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* On a phone the shared receipt drops every value under its label. These
   are short, so name left and value right, the way a receipt reads. The
   total is too big to share a line with its name. */
@media (max-width: 479px) {
  .fnd .tas3 .tas3-receipt .fnd-receipt-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--fnd-s3); }
  .fnd .tas3 .tas3-receipt .fnd-receipt-row--total { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* "Projections Methodology" stays together so no word sits alone. That
   pair is about 12 times the type size wide, so on narrow screens the
   heading scales to the column (screen less its 20px sides and a
   scrollbar) and never runs past it. */
@media (max-width: 420px) {
  .fnd .tas3-guide #tas3-g-method { font-size: min(var(--fnd-t-h2), calc((100vw - 60px) / 12.4)); }
}

/* Where the money comes from: each name on one line, and money too wide
   to share it drops under it on the right, as in the timeline. */
.fnd .tas3 .tas3-meters .fnd-meter { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--fnd-s3); row-gap: 3px; }
.fnd .tas3 .tas3-meters .fnd-meter-l { flex: 1 1 auto; min-width: 0; }
.fnd .tas3 .tas3-meters .fnd-meter-v { margin-left: auto; text-align: right; }
.fnd .tas3 .tas3-meters .fnd-meter-t { flex: 0 0 100%; }

/* THE TIMELINE keeps the data table's phone row at every width. Beside the
   answer this column is about 525px, so four columns ran the money out of
   the card and took six lines for one reward. Milestone and money on the
   first line, when and what you can apply for under them. The kit only draws this
   row below 640px, so the same rules are repeated here without the query. */
.fnd .tas3 .tas3-tbl--list { margin-top: 0; }
.fnd .tas3 .tas3-tbl--list table,
.fnd .tas3 .tas3-tbl--list thead,
.fnd .tas3 .tas3-tbl--list tbody { display: block; width: 100%; }
.fnd .tas3 .tas3-tbl--list thead tr {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px var(--fnd-s4); background: var(--fnd-paper-2);
  border-bottom: 1px solid var(--fnd-rule);
}
.fnd .tas3 .tas3-tbl--list thead th { display: block; width: auto; padding: 0; border: 0; background: none; font-size: var(--fnd-t-meta); }
.fnd .tas3 .tas3-tbl--list thead th:not(:first-child):not(:last-child) { display: none; }
.fnd .tas3 .tas3-tbl--list thead th:last-child { text-align: right; }
.fnd .tas3 .tas3-tbl--list tbody tr {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 12px; padding: 12px var(--fnd-s4);
  border-bottom: 1px solid var(--fnd-rule);
}
.fnd .tas3 .tas3-tbl--list tbody tr:last-child { border-bottom: 0; }
.fnd .tas3 .tas3-tbl--list tbody tr::after { content: ""; order: 3; flex: 0 0 100%; height: 0; }
.fnd .tas3 .tas3-tbl--list tbody td { display: block; width: auto; padding: 0; border: 0; background: none; }
/* The milestone keeps its whole name. Money too wide to share its line
   drops under it, on the right, and breaks only between its two amounts. */
.fnd .tas3 .tas3-tbl--list tbody td:first-child {
  order: 1; flex: 1 0 auto; margin: 0;
  font-size: 15px; font-weight: 600; color: var(--fnd-text);
}
.fnd .tas3 .tas3-tbl--list tbody td:last-child {
  order: 2; flex: 0 1 auto; min-width: 0; margin-left: auto;
  font-size: 15px; font-weight: 700; text-align: right;
  white-space: normal; overflow-wrap: break-word; text-wrap: balance;
}
.fnd .tas3 .tas3-tbl--list tbody td:last-child::before { content: none; }
.fnd .tas3 .tas3-tbl--list tbody td:not(:first-child):not(:last-child) {
  order: 4; flex: 0 1 auto; padding: 2px 0 0;
  font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-text-soft);
}
.fnd .tas3 .tas3-tbl--list tbody td:not(:first-child):not(:last-child)::before {
  content: attr(data-l) " "; font-weight: 500; color: var(--fnd-text-faint);
}
/* What it unlocks is words, so it may wrap. A milestone that unlocks
   nothing says nothing: a line of "no new feature" hid the two that do. */
.fnd .tas3 .tas3-tbl--list tbody td:nth-child(3) { white-space: normal; text-wrap: pretty; }
.fnd .tas3 .tas3-tbl--list tbody td:nth-child(3):empty { display: none; }
/* A milestone already passed has no date to show. */
.fnd .tas3 .tas3-tbl--list tbody td:nth-child(2):empty { display: none; }
/* Reached, and a box still waiting: quiet at every width. */
.fnd .tas3 .tas3-tbl--list tbody td.tas3-soft:not(:first-child):not(:last-child),
.fnd .tas3 .tas3-tbl--list tbody td.tas3-soft:last-child { font-weight: 500; color: var(--fnd-text-faint); }

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

/* The four steps: the shared numbered heads, a paragraph under each. */
.tas3-steps { list-style: none; margin: var(--fnd-s4) 0 0; padding: 0; }
.tas3-steps li + li { margin-top: var(--fnd-s5); }
.tas3-steps .fnd-numhead { margin-bottom: var(--fnd-s2); }
.fnd .tas3-steps .fnd-numhead__t { font-size: var(--fnd-t-h3); }
.tas3-steps p { margin: 0; padding-left: calc(32px + var(--fnd-s3)); }
@media (max-width: 559px) {
  .tas3-steps p { padding-left: 0; }
}
/* The line under a list or table gets air so it does not read as part
   of it. */
.fnd .tas3-guide .tas3-tbl + p,
.fnd .tas3-guide .tas3-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 the longer rewards out of the card. */
.fnd .tas3-guide .tas3-tbl tbody td:last-child { white-space: normal; text-wrap: pretty; }
@media (max-width: 639px) {
  .fnd .tas3-guide .tas3-tbl thead th:first-child,
  .fnd .tas3-guide .tas3-tbl tbody td:first-child { flex: 0 0 6.25rem; }
  .fnd .tas3-guide .tas3-tbl thead th:last-child,
  .fnd .tas3-guide .tas3-tbl tbody td:last-child { flex: 1 1 0; min-width: 0; white-space: normal; text-align: left; }
}