/* ==================================================================
   /tools/youtube-transcript-generator on the foundation look.
   Loaded ONLY when the 'tools-transcript-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 guide, the
   questions, the links and the close are the shared tool kit
   (foundation-tools.css); the inputs, the picker, segments, badges,
   callouts, the data table and the numbered heads are the foundation's
   and are NOT redrawn here.

   Same shape as the citation, words to minutes and embed code pages:
   one centred column at every width. Paste, then the transcript right
   under the bar, with Copy above the lines so it is on the first screen.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .tg3-top .fnd-tool-top__in { display: block; }
  /* The answer here is a plain card, never pinned. Relative, never
     static, so nothing layered inside it escapes the card. */
  .fnd .tg3 .tg3-out { position: relative; top: auto; }
}
.fnd .tg3 .fnd-tool-lead,
.fnd .tg3 .tg3-ask,
.fnd .tg3 .tg3-out { max-width: 760px; margin-left: auto; margin-right: auto; }
/* A wider name and line on a computer, so each takes one line and the
   transcript starts on the first screen. After the 760 above, or it loses. */
@media (min-width: 1024px) {
  .fnd .tg3 .fnd-tool-lead { max-width: 960px; }
  .fnd .tg3 .fnd-tool-lead .fnd-display { max-width: none; }
}

/* The name and its line, centred over the bar they introduce. */
.fnd .tg3 .fnd-tool-lead { text-align: center; }
.fnd .tg3 .fnd-tool-lead .fnd-display,
.fnd .tg3 .fnd-tool-lead__sub { margin-left: auto; margin-right: auto; text-align: center; }
.fnd .tg3 .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .tg3 h1.fnd-display,
.fnd .tg3-qa__list summary,
.fnd.tg3-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
@media (max-width: 413px) {
  .fnd .tg3 .fnd-tool-lead .fnd-display { font-size: 2.15rem; }
}
@media (max-width: 559px) {
  .fnd .tg3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}

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

/* The paste bar, the same as the citation and embed pages' bars (copied,
   not shared, so no page can move another). */
.fnd .tg3-bar {
  display: flex; align-items: center; gap: var(--fnd-s2);
  background: var(--fnd-card);
  border: 1px solid var(--fnd-edge);
  border-radius: 999px;
  padding: 5px 5px 5px 20px;
  box-shadow: 0 1px 2px rgba(23, 20, 31, .05), 0 12px 28px -16px rgba(23, 20, 31, .3);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.fnd .tg3-bar:focus-within {
  border-color: var(--fnd-text);
  box-shadow: 0 0 0 3px var(--fnd-accent-soft), 0 12px 28px -16px rgba(23, 20, 31, .3);
}
.tg3-bar > .fa-link { flex: 0 0 auto; font-size: 15px; color: var(--fnd-text-faint); }
.fnd .tg3 .tg3-bar .fnd-input {
  flex: 1 1 auto; width: auto; min-width: 0;
  padding: 0 var(--fnd-s1);
  background: transparent; border: 0; border-radius: 0;
}
.fnd .tg3 .tg3-bar .fnd-input:focus { box-shadow: none; }
.fnd .tg3-bar .fnd-btn { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }
.fnd .tg3-bar:has(.fnd-btn:focus-visible) {
  border-color: var(--fnd-edge);
  box-shadow: 0 1px 2px rgba(23, 20, 31, .05), 0 12px 28px -16px rgba(23, 20, 31, .3);
}
/* While it fetches: the button says so and the transcript under it
   waits, faded, so nobody copies the old one by mistake. */
.fnd .tg3-bar .fnd-btn[aria-busy="true"] { cursor: progress; opacity: .8; }
/* Phones: a narrower button and a 16px box (the size below which an
   iPhone zooms in on a box), so "Paste a YouTube link" shows whole from
   360 to 559 wide. Measured: at 17px it was cut at 390 and 414. */
@media (max-width: 559px) {
  .fnd .tg3-bar { padding-left: 16px; }
  .fnd .tg3-bar .fnd-btn { padding: 0 var(--fnd-s2); }
  .fnd .tg3 .tg3-bar .fnd-input { padding: 0 2px; font-size: 16px; }
}
/* The smallest phones drop the link mark so the hint still fits. */
@media (max-width: 399px) {
  .fnd .tg3-bar { padding-left: 14px; }
  .tg3-bar > .fa-link { display: none; }
}
.fnd .tg3 .tg3-bar__help { margin: var(--fnd-s3) 0 0; text-align: center; text-wrap: pretty; }
.fnd .tg3 .tg3-bar ~ .fnd-error { text-align: center; text-wrap: pretty; }
/* Their own transcript on show: the line under the bar steps aside so
   the transcript and Copy sit higher (set by the script). */
.fnd .tg3--done .tg3-bar__help { display: none; }

/* ------------------------------------------------------------------
   2. THE ANSWER: the video, its captions, Copy, the transcript
   ------------------------------------------------------------------ */
.fnd .tg3 .tg3-out { margin-top: var(--fnd-s5); transition: opacity 160ms ease; }
/* While it fetches, everything fades and waits except Start over, which
   stays live so they can cancel. */
.fnd .tg3 .tg3-out .fnd-card-body > :not(.tg3-row) { transition: opacity 160ms ease; }
.fnd .tg3 .tg3-out--busy .fnd-card-body > :not(.tg3-row),
.fnd .tg3 .tg3-out--busy .tg3-row > .tg3-copy,
.fnd .tg3 .tg3-out--busy .tg3-row__more > :not(.tg3-reset) { opacity: .45; pointer-events: none; }
.tg3-out.tg3-out--in { animation: tg3-in 320ms cubic-bezier(.22, 1, .36, 1); }
@keyframes tg3-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tg3-out.tg3-out--in { animation: none; }
  .fnd .tg3 .tg3-out { transition: none; }
}

/* The example: a badge saying so, and nothing to copy or save. */
.fnd .tg3-exnote {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px var(--fnd-s2);
  margin: 0 0 var(--fnd-s3);
  font-size: var(--fnd-t-meta); line-height: 1.5; color: var(--fnd-text-soft);
}
/* The badge and the title it names sit close, so more lines show first. */
.fnd .tg3 .tg3-out--example .tg3-video { margin-top: var(--fnd-s3); }
.tg3-out:not(.tg3-out--example) .tg3-exnote,
.tg3-out--example .tg3-copy,
.tg3-out--example .tg3-row__more { display: none; }
/* With nothing to press in the example, the row closes up. */
.tg3-out--example .tg3-row { display: none; }

.tg3-video { margin-bottom: var(--fnd-s3); }
/* The hidden example badge still counts as the card's first child, so
   the title would keep the gap after it: an empty band over the title. */
.fnd .tg3 .tg3-out:not(.tg3-out--example) .tg3-video { margin-top: 0; }
.fnd .tg3-video__title {
  margin: 0;
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: var(--fnd-t-h3); line-height: 1.3; color: var(--fnd-text);
  text-wrap: balance; overflow-wrap: anywhere;
}
.tg3-video__title:focus { outline: none; }
.fnd .tg3-video__meta { margin: 2px 0 0; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); overflow-wrap: anywhere; }
.tg3-video__meta:empty { display: none; }
.fnd .tg3 .tg3-warn { margin: var(--fnd-s3) 0 0; color: var(--fnd-text); text-wrap: pretty; }
.tg3-warn[hidden] { display: none; }

/* What the captions are, in one line of parts. Each dot sits in the gap
   before its part; a part that starts a line has its dot outside the
   box, where it is clipped, so no line starts or ends with a lone dot. */
.fnd .tg3 .tg3-facts { justify-content: flex-start; margin: 0; color: var(--fnd-text-soft); }
.tg3-facts:empty { display: none; }
.fnd .tg3 .tg3-facts { column-gap: 21px; row-gap: 2px; overflow: hidden; }
.fnd .tg3 .tg3-facts > span { position: relative; }
.fnd .tg3 .tg3-facts span + span::before {
  content: "\00b7"; position: absolute; top: 0; left: -21px; width: 21px;
  margin: 0; text-align: center; opacity: .6;
}

/* Copy first, the three quiet buttons beside it. On a phone Copy takes
   the whole width and the three share the line under it. */
.tg3-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fnd-s2) var(--fnd-s4); margin-top: var(--fnd-s4); }
.tg3-row__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fnd-s4); }
.fnd .tg3 .tg3-copy[data-copied="true"] { background: var(--fnd-ok); border-color: var(--fnd-ok); }
@media (max-width: 559px) {
  .fnd .tg3 .tg3-copy { flex: 1 1 100%; justify-content: center; }
  /* The three never fit one phone line, so two columns, and 28px between
     the rows: each tap reaches 14px past its words, so the two bands meet
     and never overlap (with no gap Start over swallowed Download .txt). */
  .tg3-row__more { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--fnd-s2); }
  .tg3-row__more > * { justify-self: start; }
  .tg3-row__more > :nth-child(2) { justify-self: end; }
}
/* Text buttons grown to a 44px tap, in the accent so they read as things
   to press. */
.fnd .tg3 .tg3-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); white-space: nowrap; }
.fnd .tg3 .tg3-link.fnd-textbtn:hover { color: var(--fnd-text); }
.fnd .tg3 .tg3-link i { margin-right: 4px; }

/* Language and how to show it: side by side when they fit, stacked on
   a phone. The language disappears when the video has one track. */
.tg3-tools {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--fnd-s3) var(--fnd-s4);
  margin-top: var(--fnd-s4); padding-top: var(--fnd-s4);
  border-top: 1px solid var(--fnd-rule);
}
.tg3-lang { flex: 1 1 220px; min-width: 0; max-width: 320px; }
.tg3-lang[hidden] { display: none; }
.tg3-viewpick { flex: 0 1 auto; min-width: 0; }
.fnd .tg3 .tg3-tools .fnd-label { display: block; margin: 0 0 var(--fnd-s2); padding: 0; }
@media (max-width: 559px) {
  .tg3-lang { flex: 1 1 100%; max-width: none; }
  .tg3-viewpick { flex: 1 1 100%; }
  .fnd .tg3 .tg3-view { display: flex; width: 100%; }
  .fnd .tg3 .tg3-view button { flex: 1 1 0; padding: 0 var(--fnd-s2); }
}

/* Find a word: the field with its mark inside, the count at its end. */
.tg3-find { position: relative; margin-top: var(--fnd-s4); }
.tg3-find > .fa-search {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--fnd-text-faint); pointer-events: none;
}
.fnd .tg3 .tg3-find .fnd-input { padding-left: 42px; padding-right: 108px; }
.fnd .tg3 .tg3-find .fnd-input::-webkit-search-cancel-button { display: none; }
.tg3-find__n {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fnd-t-meta); font-variant-numeric: tabular-nums; color: var(--fnd-text-soft);
  pointer-events: none;
}

/* The transcript: its own scrolling box, so a six hour replay never
   makes the page miles long. One line per caption, the time on the
   left as a link to that moment on YouTube. */
.fnd .tg3 .tg3-text {
  margin-top: var(--fnd-s3);
  max-height: 440px; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
  border: 1px solid var(--fnd-rule); border-radius: var(--fnd-r-sm);
  background: var(--fnd-card);
}
.tg3-text:focus-visible { outline: 2px solid var(--fnd-accent-deep); outline-offset: 2px; }
@media (max-width: 559px) {
  .fnd .tg3 .tg3-text { max-height: 380px; }
}
.fnd .tg3 .tg3-line {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start;
  margin: 0;
  font-size: var(--fnd-t-body); line-height: 1.55; color: var(--fnd-text);
}
/* A six hour replay is 12,000 lines: the browser lays out only the ones
   near the screen, and keeps each line's real height once seen. Only on
   long transcripts (over 400 lines, set by the script): a skipped line
   draws blank in a full-page capture or a print, so short ones never skip. */
.fnd .tg3 .tg3-text--long .tg3-line { content-visibility: auto; contain-intrinsic-size: auto 44px; }
.fnd .tg3 .tg3-text--hours .tg3-line { grid-template-columns: 80px minmax(0, 1fr); }
/* The time: a 44px press, its text level with the line's first row. */
.fnd .tg3 .tg3-t {
  display: block; min-height: 44px; padding: 10px 8px 10px 14px;
  font-size: var(--fnd-t-meta); font-weight: 600; line-height: 24px;
  font-variant-numeric: tabular-nums; color: var(--fnd-accent-deep);
  text-decoration: none; border-radius: var(--fnd-r-xs);
  transition: background-color 140ms ease, color 140ms ease;
}
.fnd .tg3 .tg3-t:hover { color: var(--fnd-text); background: var(--fnd-paper-2); }
.fnd .tg3 .tg3-t:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--fnd-accent-deep); }
.tg3-s { display: block; padding: 10px 16px 10px 0; overflow-wrap: anywhere; }
/* Paragraphs: more room between them, and Text only drops the times. */
.fnd .tg3 .tg3-text--paras .tg3-line + .tg3-line { margin-top: var(--fnd-s1); }
.fnd .tg3 .tg3-text--plain .tg3-line { display: block; }
.fnd .tg3 .tg3-text--plain .tg3-s { padding: 10px 16px; }
.fnd .tg3 .tg3-text--plain .tg3-line + .tg3-line { margin-top: var(--fnd-s1); }
/* A found word: the soft accent wash; the one jumped to is darker. */
.fnd .tg3 .tg3-text mark { background: var(--fnd-accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.fnd .tg3 .tg3-text mark.is-now { background: var(--fnd-accent-deep); color: #fff; }
.fnd .tg3 .tg3-line.is-hidden { display: none; }
.fnd .tg3 .tg3-empty { margin: 0; padding: 14px 16px; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); }

/* The next step: under the transcript, once it is theirs. */
.tg3-next {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--fnd-s3) var(--fnd-s4);
  margin-top: var(--fnd-s5); padding-top: var(--fnd-s4);
  border-top: 1px solid var(--fnd-rule);
}
.tg3-next[hidden] { display: none; }
.tg3-next__t { flex: 1 1 300px; min-width: 0; }
.fnd .tg3 .tg3-next .fnd-tool-h3 { margin: 0; text-wrap: balance; }
.fnd .tg3 .tg3-next__t .fnd-help { margin: 4px 0 0; text-wrap: pretty; }
.tg3-next__go { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fnd .tg3 .tg3-next__hint { margin: 0; }
@media (max-width: 559px) {
  .tg3-next__go { flex: 1 1 100%; }
  .fnd .tg3 .tg3-next__go .fnd-btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------------
   3. THE GUIDE
   ------------------------------------------------------------------ */
.fnd .tg3-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));
}
.tg3-guide .fnd-tool-read .fnd-h2:focus { outline: none; }
/* No lone word on the last line of a contents entry. */
.fnd .tg3-guide .fnd-toc li > a:not(.fnd-btn) { text-wrap: pretty; }
@media (max-width: 767px) {
  .fnd .tg3-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 .tg3-guide .fnd-tool-read p a:not(.fnd-btn),
.fnd .tg3-guide .fnd-tool-read li a:not(.fnd-btn),
.fnd .tg3-qa__list p a:not(.fnd-btn) { padding-block: 12px; }

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

/* The guide tables hold sentences, not figures: the shared data table
   keeps its card and rules, but its cells wrap here. On a phone the
   sentence takes its own full line under the name. */
.fnd .tg3-tbl tbody td:not(:first-child) { white-space: normal; font-variant-numeric: normal; }
.fnd .tg3-tbl td:first-child { white-space: nowrap; }
@media (min-width: 640px) {
  .tg3-tbl td { vertical-align: top; }
}
.fnd .tg3-guide .tg3-tbl td { text-wrap: pretty; }
@media (max-width: 639px) {
  .fnd .tg3-guide .tg3-tbl.fnd-tbl--data tbody td:last-child {
    order: 4; flex: 0 0 100%; min-width: 0; padding: 2px 0 0;
    white-space: normal; text-align: left; overflow-wrap: anywhere;
    font-weight: 400; color: var(--fnd-text); text-wrap: pretty;
  }
}
.fnd .tg3-src { margin-top: var(--fnd-s4); text-wrap: pretty; }