/* ==================================================================
   /tools/words-to-minutes-calculator on the foundation look.
   Loaded ONLY when the 'tools-words-to-minutes-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 textarea, inputs, chips, the segment, the
   rows, the range, callouts, the data table and the numbered heads are
   the foundation's and are NOT redrawn here.

   The wtm-* ids and classes in the markup (and .tool-workspace) are
   JAVASCRIPT HOOKS for /js/words-to-minutes.js and carry no styling of
   their own here except the states the script sets.

   Same shape as the citation page's hero: one centred column at every
   width, in the order a speaker works. Paste, read the time right under
   the box, then fine-tune pace or check a time limit.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .wtm3-top .fnd-tool-top__in { display: block; }
}
.fnd .wtm3 .fnd-tool-lead,
.fnd .wtm3 .wtm3-ask,
.fnd .wtm3 .wtm3-ans,
.fnd .wtm3 .wtm3-more { max-width: 760px; margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) {
  /* The kit pins the answer beside the questions from 1024px. Here the
     cards sit UNDER the answer in one column, so a pinned answer slid over
     them while scrolling. It stays in place instead, and stays relative so
     the ink layers of .fnd-ink-surface fill the card, not the page. */
  .fnd .wtm3 .wtm3-ans { position: relative; top: auto; }
  /* Wide enough for the whole name on one line, so "Calculator" never
     sits alone on the second. */
  .fnd .wtm3 .fnd-tool-lead { max-width: 960px; }
  .fnd .wtm3 .fnd-tool-lead .fnd-display { max-width: none; }
}

/* The name and its line, centred over the box they introduce. */
.fnd .wtm3 .fnd-tool-lead { text-align: center; }
.fnd .wtm3 .fnd-tool-lead .fnd-display,
.fnd .wtm3 .fnd-tool-lead__sub { margin-left: auto; margin-right: auto; text-align: center; }
.fnd .wtm3 .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .wtm3 h1.fnd-display,
.fnd .wtm3-qa__list summary,
.fnd.wtm3-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
/* "Words to Minutes Calculator" is long: under 414px the kit's 40px floor
   left "Calculator" alone on a line. The kit's small-phone size keeps the
   name to two even lines. */
@media (max-width: 413px) {
  .fnd .wtm3 .fnd-tool-lead .fnd-display { font-size: 2.15rem; }
}
/* On a phone the lead gives up a little air so the box and the answer
   both sit on the first screen. */
@media (max-width: 559px) {
  .fnd .wtm3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}

/* The box sits bare on the page like a search box: no card around it. */
.fnd .wtm3 .wtm3-ask { background: none; border: 0; border-radius: 0; box-shadow: none; }
.fnd .wtm3 .wtm3-ask > .fnd-card-body { padding: 0; }
.wtm3-ask,
.wtm3-ans { scroll-margin-top: calc(var(--header-height, 61px) + 16px); }

/* The paste box: the field's own look, lifted like the citation bar. */
.fnd .wtm3 .wtm3-box {
  display: block; width: 100%;
  min-height: 132px;
  border-radius: var(--fnd-r);
  padding: var(--fnd-s4);
  line-height: 1.55;
  box-shadow: 0 1px 2px rgba(23, 20, 31, .05), 0 12px 28px -16px rgba(23, 20, 31, .3);
}
.fnd .wtm3 .wtm3-box:focus {
  border-color: var(--fnd-text);
  box-shadow: 0 0 0 3px var(--fnd-accent-soft), 0 12px 28px -16px rgba(23, 20, 31, .3);
}
@media (max-width: 559px) {
  .fnd .wtm3 .wtm3-box { min-height: 112px; padding: var(--fnd-s3); }
}

/* Under the box: Try a sample, Clear, and the way across to a word
   count, pushed to the far end. Text buttons grown to a 44px tap, in the
   accent so they read as things to press. */
.wtm3-box__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 var(--fnd-s4);
  margin-top: var(--fnd-s1);
}
.fnd .wtm3 .wtm3-box__swap { margin-left: auto; }
/* One way in at a time: the script swaps this class between the paste box
   and the word count (the old page hid it in its own stylesheet). */
.fnd .wtm-input-section--hidden { display: none; }
.fnd .wtm3 .wtm3-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); }
.fnd .wtm3 .wtm3-link.fnd-textbtn:hover { color: var(--fnd-text); }

/* Type a word count: the number big in its own box, the word beside it,
   then the common counts as chips. */
.wtm3-count__row { display: flex; align-items: center; gap: var(--fnd-s3); margin-top: var(--fnd-s2); }
.fnd .wtm3 .wtm3-count__in {
  width: 100%; max-width: 200px;
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: 1.5rem; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(23, 20, 31, .05), 0 12px 28px -16px rgba(23, 20, 31, .3);
}
.wtm3-count__u { font-size: var(--fnd-t-body); color: var(--fnd-text-soft); }
.fnd .wtm3 .wtm3-quick { margin-top: var(--fnd-s4); }

/* ------------------------------------------------------------------
   2. THE ANSWER
   ------------------------------------------------------------------ */
.fnd .wtm3 .wtm3-ans { margin-top: var(--fnd-s5); }
/* Units smaller than the figures, the way the citation page sets "to". */
.fnd .wtm3 .wtm3-fig .wtm-dur__u { font-size: .42em; font-weight: 600; letter-spacing: 0; color: var(--fnd-on-ink-soft); }
.wtm3-rows .wtm-dur__u { font-weight: 500; color: var(--fnd-on-ink-soft); }

/* Name left, time right, on phones too: the shared rows drop the end slot
   under the name below 767px, which here would read as a list. */
.fnd .wtm3 .wtm3-rows { margin-top: var(--fnd-s4); }
.fnd .wtm3 .wtm3-rows .fnd-row { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
.fnd .wtm3 .wtm3-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); white-space: nowrap;
}
.fnd .wtm3 .wtm3-rows .fnd-row-main { grid-column: 1; grid-row: 1; }
.fnd .wtm3 .wtm3-rows .fnd-row-t { color: var(--fnd-on-ink-soft); font-weight: 500; white-space: nowrap; }
/* A long time ("1 minute 7 seconds") breaks onto a second line on the
   right rather than squeezing the name into two. */
@media (max-width: 413px) {
  .fnd .wtm3 .wtm3-rows .fnd-row-end { white-space: normal; }
}
.wtm3-ans .wtm3-rows,
.wtm3-ans .wtm3-stats { transition: opacity 150ms ease; }
.fnd-tool-ans--wait .wtm3-rows,
.fnd-tool-ans--wait .wtm3-stats { opacity: .3; }
/* The waiting line tells the visitor what to do, so it stays readable. */
.wtm3-ans.fnd-tool-ans--wait #wtm-speak-range { opacity: .75; }

.fnd .wtm3 .wtm3-stats { margin: var(--fnd-s3) 0 0; justify-content: flex-start; font-size: var(--fnd-t-meta); }
.wtm3-stats b { font-weight: 700; color: var(--fnd-on-ink-soft); font-variant-numeric: tabular-nums; }
/* A typed count has no characters, sentences or paragraphs to show. */
.wtm3-stats[hidden] { display: none; }

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

/* ------------------------------------------------------------------
   3. PACE AND TIME LIMIT
   Two working cards under the answer, one column at every width.
   ------------------------------------------------------------------ */
.fnd .wtm3 .wtm3-more { grid-template-columns: minmax(0, 1fr); gap: var(--fnd-s5); margin-top: var(--fnd-s6); }
.fnd .wtm3 .wtm3-card .fnd-tool-more__sub { margin: 4px 0 0; }
.fnd .wtm3 .wtm3-occ,
.fnd .wtm3 .wtm3-limits { margin-top: var(--fnd-s4); }
.fnd .wtm3 .wtm3-occ .fnd-chip-btn,
.fnd .wtm3 .wtm3-limits .fnd-chip-btn,
.fnd .wtm3 .wtm3-quick .fnd-chip-btn { justify-content: center; }
.fnd .wtm3 .fnd-chip-btn:focus-visible { outline: 2px solid var(--fnd-accent-deep); outline-offset: 2px; }
/* On a phone the chips stand in an even grid, every one in view at full
   size: two columns for the occasions and limits, three for the counts. */
@media (max-width: 559px) {
  .fnd .wtm3 .wtm3-occ,
  .fnd .wtm3 .wtm3-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fnd .wtm3 .wtm3-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fnd .wtm3 .wtm3-occ .fnd-chip-btn,
  .fnd .wtm3 .wtm3-limits .fnd-chip-btn,
  .fnd .wtm3 .wtm3-quick .fnd-chip-btn { padding: 0 8px; }
}

/* Your pace: the number in a small box, the words after it, its badge. */
.wtm3-pace { margin-top: var(--fnd-s5); }
.wtm3-pace__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fnd-s2) var(--fnd-s3); margin-top: var(--fnd-s2); }
.fnd .wtm3 .wtm3-pace__in,
.fnd .wtm3 .wtm3-limit__in {
  width: 100%; max-width: 104px;
  font-weight: 700; font-variant-numeric: tabular-nums; text-align: center;
}
/* Room for the whole word "optional" in the second box. */
.fnd .wtm3 .wtm3-limit__in { max-width: 128px; }
.wtm3-pace__u,
.wtm3-limit__u,
.wtm3-limit__to { font-size: var(--fnd-t-body); color: var(--fnd-text-soft); }
.fnd .wtm3 .wtm3-tip { margin-top: var(--fnd-s4); text-wrap: pretty; }
.wtm3-tip b { color: var(--fnd-text); }
.fnd .wtm3 .wtm3-card .fnd-tool-note a { padding-block: 12px; }

/* Time limit: label and the seconds or minutes switch on one line, the
   numbers under them, then the answer in figures. */
.wtm3-limit { margin-top: var(--fnd-s5); }
.wtm3-limit__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fnd-s2) var(--fnd-s4); }
.wtm3-limit__head .fnd-label { margin: 0; }
.wtm3-limit__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fnd-s2) var(--fnd-s3); margin-top: var(--fnd-s3); }
.fnd .wtm3 .wtm3-limit__in::placeholder { font-weight: 400; }
/* On a phone the two boxes share the row evenly; the unit is already named
   by the Seconds or Minutes switch right above, so it steps aside. */
@media (max-width: 479px) {
  .wtm3-limit__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .fnd .wtm3 .wtm3-limit__in { max-width: none; }
  .wtm3-limit__u { display: none; }
}

.wtm3-limit__out {
  margin-top: var(--fnd-s5);
  padding-top: var(--fnd-s4);
  border-top: 1px solid var(--fnd-rule);
}
.fnd .wtm3 .wtm3-limit__k { margin: 0; font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-text-soft); }
.fnd .wtm3 .wtm3-limit__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);
}
.wtm3-limit__w { font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--fnd-text-soft); }
/* No limit typed yet: the dash stands alone without "words" after it. */
.wtm-reverse-result--empty .wtm3-limit__w { display: none; }
.fnd .wtm3 .wtm3-limit__speed { margin: 4px 0 0; }
.fnd .wtm3 .wtm3-fit { margin-top: var(--fnd-s3); color: var(--fnd-text); font-weight: 600; }
.wtm3-fit[hidden] { display: none; }

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

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

/* The quick reference: the shared data table, times in tabular figures. */
.fnd .wtm3-tbl td { font-variant-numeric: tabular-nums; }
.fnd .wtm3-src { margin-top: var(--fnd-s2); }
.fnd .wtm3-guide .fnd-tool-answers .fnd-ans-d { text-wrap: pretty; }