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

   The wtc3-* ids in the markup are JAVASCRIPT HOOKS for
   /js/watch-time-calculator.js.

   Same shape as the Words to Minutes page: one centred column at every
   width, in the order a creator works. Type the hours, read what is left
   right under them, then turn it into views.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
/* The kit's own grid from 1024px: the name, the questions and the views
   card on the left, the answer riding down beside them in its rail, so
   the figure stays in view while the visitor types (sweep 2026-10-30:
   one column left it 850px below the first box). Below 1024px the kit's
   one column, with the answer in one line at the top of the questions. */
.fnd .wtc3 .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .wtc3 h1.fnd-display,
.fnd .wtc3-qa__list summary,
.fnd.wtc3-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
/* "YouTube Watch Time Calculator" is long: the kit's small-phone size
   keeps it to two even lines under 414px. */
@media (max-width: 413px) {
  .fnd .wtc3 .fnd-tool-lead .fnd-display { font-size: 2.15rem; }
}
@media (max-width: 559px) {
  .fnd .wtc3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}
.wtc3-ask,
.wtc3-ans { scroll-margin-top: calc(var(--header-height, 61px) + 16px); }

/* "optional" after a label, quieter than the label itself. */
.wtc3-opt { margin-left: 4px; font-weight: 500; font-size: var(--fnd-t-micro); color: var(--fnd-text-faint); }
.fnd .wtc3 .wtc3-ask .fnd-help { margin: 6px 0 0; text-wrap: pretty; }

/* The goal: three numbers on the shared segment, as wide as the card. */
.fnd .wtc3 .wtc3-goal__seg { display: flex; width: 100%; margin-top: var(--fnd-s2); }
.fnd .wtc3 .wtc3-goal__seg button { flex: 1 1 0; font-variant-numeric: tabular-nums; }

/* Try an example and Clear: text buttons grown to a 44px tap, in the
   accent so they read as things to press. */
.wtc3-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fnd-s4); margin-top: var(--fnd-s1); }
.fnd .wtc3 .wtc3-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); }
.fnd .wtc3 .wtc3-link.fnd-textbtn:hover { color: var(--fnd-text); }
.fnd .wtc3 .fnd-tool-note[hidden] { display: none; }

/* ------------------------------------------------------------------
   2. THE ANSWER
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .fnd .wtc3 .wtc3-ans { margin-top: var(--fnd-s5); }
}
/* The unit smaller than the figure, the way the kit sets "to". */
.fnd .wtc3 .wtc3-fig .wtc3-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 .wtc3 .wtc3-bar { margin-top: var(--fnd-s3); background: var(--fnd-on-ink-rule); }
.wtc3-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 .wtc3 .wtc3-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, whichever rows are showing. */
.fnd .wtc3 .wtc3-rows.fnd-rows { border-top: 0; }
.fnd .wtc3 .wtc3-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 .wtc3 .wtc3-rows .fnd-row:last-child { padding-bottom: 0; }
.fnd .wtc3 .wtc3-rows .fnd-row[hidden] { display: none; }
.fnd .wtc3 .wtc3-rows .fnd-row-main { grid-column: 1; grid-row: 1; }
.fnd .wtc3 .wtc3-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 ("you reach 4,000"), so it shows whole. */
.fnd .wtc3 .wtc3-rows .fnd-row-t { display: block; -webkit-line-clamp: unset; overflow: visible; margin: 0; }
.fnd .wtc3 .wtc3-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 .wtc3 .wtc3-rows .fnd-row-end.wtc3-soft { font-family: inherit; font-weight: 500; color: var(--fnd-on-ink-faint); }

.wtc3-ans .wtc3-rows,
.wtc3-ans .wtc3-bar { transition: opacity 150ms ease; }
.fnd-tool-ans--wait .wtc3-rows,
.fnd-tool-ans--wait .wtc3-bar { opacity: .3; }
/* The waiting line tells the visitor what to do, so it stays readable. */
.wtc3-ans.fnd-tool-ans--wait #wtc3-fig-l { opacity: .75; }

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

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

/* ------------------------------------------------------------------
   3. HOW MANY VIEWS
   One working card under the answer, one column at every width.
   ------------------------------------------------------------------ */
.fnd .wtc3 .wtc3-more { grid-template-columns: minmax(0, 1fr); gap: var(--fnd-s5); margin-top: var(--fnd-s6); }
.fnd .wtc3 .wtc3-card .fnd-tool-more__sub { margin: 4px 0 0; }
.fnd .wtc3 .wtc3-avd-chips { margin-top: var(--fnd-s4); }
.fnd .wtc3 .wtc3-avd-chips .fnd-chip-btn { justify-content: center; }
.fnd .wtc3 .fnd-chip-btn:focus-visible { outline: 2px solid var(--fnd-accent-deep); outline-offset: 2px; }
/* On a phone the six chips stand in an even grid, all in view. */
@media (max-width: 559px) {
  .fnd .wtc3 .wtc3-avd-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fnd .wtc3 .wtc3-avd-chips .fnd-chip-btn { padding: 0 6px; }
}
.fnd .wtc3 .wtc3-vrow { margin-top: var(--fnd-s5); }
.fnd .wtc3 .wtc3-vrow .fnd-input { width: 100%; font-weight: 700; font-variant-numeric: tabular-nums; }
/* A hint, never a value: placeholders light and thin in every box. */
.fnd .wtc3 .fnd-input::placeholder { font-weight: 400; opacity: .7; }
.fnd .wtc3 .wtc3-vrow .fnd-help { margin: 6px 0 0; }

.wtc3-out {
  margin-top: var(--fnd-s5);
  padding-top: var(--fnd-s4);
  border-top: 1px solid var(--fnd-rule);
}
.fnd .wtc3 .wtc3-out__k { margin: 0; font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-text-soft); }
.fnd .wtc3 .wtc3-out__n {
  margin: 2px 0 0;
  font-family: var(--fnd-display-font); font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--fnd-text);
}
.wtc3-out__w { font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--fnd-text-soft); }
.fnd .wtc3 .wtc3-out__l { margin: 4px 0 0; }
.fnd .wtc3 .wtc3-out__vid { margin-top: var(--fnd-s3); color: var(--fnd-text); font-weight: 600; }
.wtc3-out__vid[hidden] { display: none; }
.fnd .wtc3 .wtc3-out__k1 { margin: var(--fnd-s3) 0 0; }

/* ------------------------------------------------------------------
   4. THE GUIDE
   ------------------------------------------------------------------ */
.fnd .wtc3-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));
}
.wtc3-guide .fnd-tool-read .fnd-h2:focus { outline: none; }
@media (max-width: 767px) {
  .fnd .wtc3-guide .fnd-tool-read .fnd-h2 { margin-top: var(--fnd-s7); }
}
/* A link inside a sentence grows to a 45px press without moving the text. */
.fnd .wtc3-guide .fnd-tool-read p a:not(.fnd-btn),
.fnd .wtc3-qa__list p a:not(.fnd-btn) { padding-block: 12px; }

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

/* The tables: the shared data table, numbers in tabular figures. */
.fnd .wtc3-tbl td { font-variant-numeric: tabular-nums; }
/* On a phone the kit leads each row with the LAST column. The views table
   leads with 4,000, the goal most visitors have, so its third and last
   columns swap places there; every other cell keeps its data-l name. */
@media (max-width: 639px) {
  .fnd .fnd-tbl.fnd-tbl--data.wtc3-tbl--views thead th:nth-child(3) { display: block; text-align: right; }
  .fnd .fnd-tbl.fnd-tbl--data.wtc3-tbl--views thead th:last-child { display: none; }
  .fnd .fnd-tbl.fnd-tbl--data.wtc3-tbl--views tbody td:nth-child(3) {
    order: 2; padding: 0; font-size: 15px; font-weight: 700;
    color: var(--fnd-text); white-space: nowrap; text-align: right;
  }
  .fnd .fnd-tbl.fnd-tbl--data.wtc3-tbl--views tbody td:nth-child(3)::before { content: none; }
  .fnd .fnd-tbl.fnd-tbl--data.wtc3-tbl--views tbody td:last-child {
    order: 4; padding: 2px 0 0; font-size: var(--fnd-t-meta); font-weight: 600;
    color: inherit; text-align: left;
  }
  .fnd .fnd-tbl.fnd-tbl--data.wtc3-tbl--views tbody td:last-child::before {
    content: attr(data-l) " "; font-weight: 500; color: var(--fnd-text-faint);
  }
  /* 3,000 and 8,000 each on their own line, so six-digit rows and
     five-digit rows read the same way down the table. */
  .fnd .fnd-tbl.fnd-tbl--data.wtc3-tbl--views tbody td:nth-child(2),
  .fnd .fnd-tbl.fnd-tbl--data.wtc3-tbl--views tbody td:last-child { flex: 0 0 100%; color: inherit; font-family: inherit; }
}
.fnd .wtc3-src { margin-top: var(--fnd-s2); }
.fnd .wtc3-guide .fnd-tool-answers .fnd-ans-d { text-wrap: pretty; }