/* ==================================================================
   /tools/youtube-subtitle-downloader on the foundation look.
   Loaded ONLY when the 'tools-subtitle-downloader-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,
   checkboxes, the data table and the numbered heads are the
   foundation's and are NOT redrawn here.

   The same shape as the transcript page (tools-transcript-fnd.css), copied
   rather than shared so no page can move another: one centred column,
   paste, then the answer right under the bar with Download on the first
   screen.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .sd3-top .fnd-tool-top__in { display: block; }
  /* The answer is a plain card, never pinned. Relative, never static, so
     nothing layered inside it escapes the card. */
  .fnd .sd3 .sd3-out { position: relative; top: auto; }
}
.fnd .sd3 .fnd-tool-lead,
.fnd .sd3 .sd3-ask,
.fnd .sd3 .sd3-out { max-width: 760px; margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) {
  .fnd .sd3 .fnd-tool-lead { max-width: 960px; }
  .fnd .sd3 .fnd-tool-lead .fnd-display { max-width: none; }
}

.fnd .sd3 .fnd-tool-lead { text-align: center; }
.fnd .sd3 .fnd-tool-lead .fnd-display,
.fnd .sd3 .fnd-tool-lead__sub { margin-left: auto; margin-right: auto; text-align: center; }
.fnd .sd3 .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .sd3 h1.fnd-display,
.fnd .sd3-qa__list summary,
.fnd.sd3-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
@media (max-width: 413px) {
  .fnd .sd3 .fnd-tool-lead .fnd-display { font-size: 2.15rem; }
}
@media (max-width: 559px) {
  .fnd .sd3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}

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

.fnd .sd3-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 .sd3-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);
}
.sd3-bar > .fa-link { flex: 0 0 auto; font-size: 15px; color: var(--fnd-text-faint); }
.fnd .sd3 .sd3-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 .sd3 .sd3-bar .fnd-input:focus { box-shadow: none; }
.fnd .sd3-bar .fnd-btn { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }
.fnd .sd3-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);
}
.fnd .sd3-bar .fnd-btn[aria-busy="true"] { cursor: progress; opacity: .8; }
/* Phones: a narrower button and a 16px box (an iPhone zooms in on any
   box under 16px), so the hint shows whole from 360 to 559 wide. */
@media (max-width: 559px) {
  .fnd .sd3-bar { padding-left: 16px; }
  .fnd .sd3-bar .fnd-btn { padding: 0 var(--fnd-s2); }
  .fnd .sd3 .sd3-bar .fnd-input { padding: 0 2px; font-size: 16px; }
}
@media (max-width: 399px) {
  .fnd .sd3-bar { padding-left: 14px; }
  .sd3-bar > .fa-link { display: none; }
}
.fnd .sd3 .sd3-bar__help { margin: var(--fnd-s3) 0 0; text-align: center; text-wrap: pretty; }
.fnd .sd3 .sd3-bar ~ .fnd-error { text-align: center; text-wrap: pretty; }
/* Their own subtitles on show: the line under the bar steps aside so the
   answer sits higher (set by the script). */
.fnd .sd3--done .sd3-bar__help { display: none; }

/* ------------------------------------------------------------------
   2. THE ANSWER: the video, language and format, Download, the file
   ------------------------------------------------------------------ */
.fnd .sd3 .sd3-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 .sd3 .sd3-out .fnd-card-body > :not(.sd3-row) { transition: opacity 160ms ease; }
.fnd .sd3 .sd3-out--busy .fnd-card-body > :not(.sd3-row),
.fnd .sd3 .sd3-out--busy .sd3-row > :not(.sd3-reset) { opacity: .45; pointer-events: none; }
.sd3-out.sd3-out--in { animation: sd3-in 320ms cubic-bezier(.22, 1, .36, 1); }
@keyframes sd3-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sd3-out.sd3-out--in { animation: none; }
  .fnd .sd3 .sd3-out { transition: none; }
}

/* The example: a badge saying so, and nothing to save. The language and
   the format still work on it, so a visitor can try both first. */
.fnd .sd3-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);
}
.sd3-out:not(.sd3-out--example) .sd3-exnote,
.sd3-out--example .sd3-row { display: none; }
.sd3-zipwrap[hidden],
.sd3-zip[hidden] { display: none; }

/* The video: its picture beside the title, linked to YouTube. */
.sd3-video { display: flex; align-items: center; gap: var(--fnd-s3); }
/* With the example note gone, the video starts the card: no band above it. */
.fnd .sd3 .sd3-out:not(.sd3-out--example) .sd3-video { margin-top: 0; }
.fnd .sd3 .sd3-thumb {
  flex: 0 0 auto; display: block; width: 128px; aspect-ratio: 16 / 9;
  border-radius: var(--fnd-r-sm); overflow: hidden;
  background: var(--fnd-paper-2);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.fnd .sd3 .sd3-thumb:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(23, 20, 31, .5); }
.fnd .sd3 .sd3-thumb:focus-visible { outline: 2px solid var(--fnd-accent-deep); outline-offset: 2px; }
.sd3-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sd3-video__t { flex: 1 1 auto; min-width: 0; }
.fnd .sd3-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;
}
.sd3-video__title:focus { outline: none; }
.fnd .sd3-video__meta { margin: 2px 0 0; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); overflow-wrap: anywhere; }
.sd3-video__meta:empty { display: none; }
@media (max-width: 559px) {
  .fnd .sd3 .sd3-thumb { width: 96px; }
  .fnd .sd3-video__title { font-size: var(--fnd-t-body); }
}
.fnd .sd3 .sd3-warn { margin: var(--fnd-s3) 0 0; color: var(--fnd-text); text-wrap: pretty; scroll-margin-top: 96px; }
.sd3-warn[hidden] { display: none; }

/* Language and format: side by side when they fit, stacked on a phone.
   The language disappears when the video has one track. */
.sd3-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);
}
.sd3-lang { flex: 1 1 220px; min-width: 0; max-width: 320px; }
.sd3-lang[hidden] { display: none; }
.sd3-fmtpick { flex: 0 1 auto; min-width: 0; }
.fnd .sd3 .sd3-tools .fnd-label { display: block; margin: 0 0 var(--fnd-s2); padding: 0; }
.fnd .sd3 .sd3-fmt button { font-variant-numeric: tabular-nums; }
@media (max-width: 559px) {
  .sd3-lang { flex: 1 1 100%; max-width: none; }
  .sd3-fmtpick { flex: 1 1 100%; }
  .fnd .sd3 .sd3-fmt { display: flex; width: 100%; }
  .fnd .sd3 .sd3-fmt button { flex: 1 1 0; padding: 0 var(--fnd-s2); }
}
.fnd .sd3 .sd3-fmt__desc { margin: var(--fnd-s2) 0 0; text-wrap: pretty; }

/* Download first, what the file is beside it, Start over at the end. On
   a phone Download takes the whole width. */
.sd3-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--fnd-s2) var(--fnd-s4);
  margin-top: var(--fnd-s4);
}
.fnd .sd3 .sd3-facts { flex: 1 1 auto; justify-content: flex-start; margin: 0; color: var(--fnd-text-soft); }
.sd3-facts:empty { display: none; }
/* Each dot sits in the gap before its part, so no line starts or ends
   with a lone dot when the parts wrap. */
.fnd .sd3 .sd3-facts { column-gap: 21px; row-gap: 2px; overflow: hidden; }
.fnd .sd3 .sd3-facts > span { position: relative; }
.fnd .sd3 .sd3-facts span + span::before {
  content: "\00b7"; position: absolute; top: 0; left: -21px; width: 21px;
  margin: 0; text-align: center; opacity: .6;
}
.fnd .sd3 .sd3-dl[data-saved="true"] { background: var(--fnd-ok); border-color: var(--fnd-ok); }
@media (max-width: 559px) {
  .fnd .sd3 .sd3-dl { flex: 1 1 100%; justify-content: center; }
  .fnd .sd3 .sd3-facts { flex: 1 1 0; }
}
/* Text buttons grown to a 44px tap, in the accent so they read as things
   to press. */
.fnd .sd3 .sd3-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); white-space: nowrap; }
.fnd .sd3 .sd3-link.fnd-textbtn:hover { color: var(--fnd-text); }
.fnd .sd3 .sd3-link i { margin-right: 4px; }

/* The file's first lines, exactly as they will be saved. */
.fnd .sd3 .sd3-pre__l { display: block; margin: var(--fnd-s5) 0 var(--fnd-s2); padding: 0; }
.fnd .sd3 .sd3-pre {
  margin: 0;
  max-height: 300px; overflow: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px;
  border: 1px solid var(--fnd-rule); border-radius: var(--fnd-r-sm);
  background: var(--fnd-paper-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fnd-t-meta); line-height: 1.6; color: var(--fnd-text);
  white-space: pre-wrap; overflow-wrap: anywhere;
  tab-size: 4;
}
.sd3-pre:focus-visible { outline: 2px solid var(--fnd-accent-deep); outline-offset: 2px; }
.fnd .sd3 .sd3-pre__more { margin: var(--fnd-s2) 0 0; }
.sd3-pre__more[hidden] { display: none; }

/* Several languages in one .zip. */
.sd3-zipwrap { margin-top: var(--fnd-s4); padding-top: var(--fnd-s3); border-top: 1px solid var(--fnd-rule); }
.sd3-zip { margin-top: var(--fnd-s2); }
.fnd .sd3 .sd3-all { border-top: 1px solid var(--fnd-rule); }
.fnd .sd3 .sd3-list { margin: 0; border-top: 0; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.fnd .sd3 .sd3-list .fnd-check > label span { color: var(--fnd-text-soft); font-size: var(--fnd-t-meta); }
.sd3-zip__go {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--fnd-s2) var(--fnd-s4);
  margin-top: var(--fnd-s4);
}
.fnd .sd3 .sd3-zip__say { flex: 1 1 240px; margin: 0; text-wrap: pretty; }
@media (max-width: 559px) {
  .fnd .sd3 .sd3-zip__go .fnd-btn { flex: 1 1 100%; justify-content: center; }
}

.fnd .sd3 .sd3-also { margin: var(--fnd-s4) 0 0; text-wrap: pretty; }
.fnd .sd3 .sd3-also a { display: inline-block; min-height: 44px; padding-block: 11px; color: var(--fnd-accent-deep); font-weight: 600; text-decoration: none; }
.fnd .sd3 .sd3-also a:hover { text-decoration: underline; }

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

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

/* The format table holds words, not figures: the shared data table keeps
   its card and rules, but its cells wrap here. On a phone each cell after
   the format takes its own named line (the same as the length finder's). */
.fnd .sd3-tbl tbody td:not(:first-child) { white-space: normal; font-variant-numeric: normal; overflow-wrap: anywhere; }
.fnd .sd3-tbl td:first-child { white-space: nowrap; font-weight: 600; }
@media (min-width: 640px) {
  .sd3-tbl td { vertical-align: top; }
}
/* Not the name cell: text-wrap would undo its nowrap. */
.fnd .sd3-guide .sd3-tbl td:not(:first-child) { text-wrap: pretty; }
@media (max-width: 639px) {
  .fnd .sd3-guide .sd3-tbl.fnd-tbl--data thead th:last-child { display: none; }
  .fnd .sd3-guide .sd3-tbl.fnd-tbl--data tbody td:first-child { flex: 0 0 100%; white-space: normal; }
  .fnd .sd3-guide .sd3-tbl.fnd-tbl--data tbody td:not(:first-child) {
    order: 4; flex: 0 0 100%; min-width: 0; padding: 4px 0 0;
    white-space: normal; text-align: left; overflow-wrap: anywhere;
    font-size: var(--fnd-t-meta); font-weight: 400; color: var(--fnd-text);
  }
  .fnd .sd3-guide .sd3-tbl.fnd-tbl--data tbody td:not(:first-child)::before {
    content: attr(data-l) " "; font-weight: 600; color: var(--fnd-text-soft);
  }
}
.fnd .sd3-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; overflow-wrap: anywhere; }
.fnd .sd3-src { margin-top: var(--fnd-s4); text-wrap: pretty; }