/* ==================================================================
   /tools/youtube-data-viewer (templates/tools/data-viewer.twig)
   Layout only. Every part is the foundation's: the tool page kit
   (foundation-tools.css), .fnd-receipt, .fnd-copy, .fnd-media,
   .fnd-chips and the lit ink answer. What lives here is how they sit
   on this page:
     1. the first screen, one centred column (the citation generator's
        hero shape, tools-citation-v2.css section 4)
     2. the paste bar (the same bar as .cite2-bar)
     3. the result, under the shared video header (.fnd-vidhead)
     4. the answer, which here never rides beside anything
     5. the facts and the thumbnails
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN: one column at every width
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .dv-top .fnd-tool-top__in { display: block; }
}
.fnd .dv-top .fnd-tool-lead,
.fnd .dv-top .dv-ask,
.fnd .dv-top .dv-out { max-width: 760px; margin-left: auto; margin-right: auto; }

.fnd .dv-top .fnd-tool-lead { text-align: center; }
.fnd .dv-top .fnd-tool-lead .fnd-display,
.fnd .dv-top .fnd-tool-lead__sub { margin-left: auto; margin-right: auto; text-align: center; }
.fnd .dv-top .fnd-tool-lead__sub { text-wrap: balance; }

/* ------------------------------------------------------------------
   2. THE PASTE BAR: a search box, the field and its button in one pill
   ------------------------------------------------------------------ */
.fnd .dv-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 .dv-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);
}
/* One ring at a time: the button carries it when it has the keyboard. */
.fnd .dv-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);
}
.dv-bar > .fa-link { flex: 0 0 auto; font-size: 15px; color: var(--fnd-text-faint); }
.fnd .dv-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 .dv-bar .fnd-input:focus { box-shadow: none; }
.fnd .dv-bar .fnd-btn { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }
/* While a lookup runs the link is locked, and looks it. */
.fnd .dv-ask[aria-busy="true"] .dv-bar .fnd-input { color: var(--fnd-text-faint); cursor: progress; }
.fnd .dv-help { margin: var(--fnd-s3) 0 0; text-align: center; text-wrap: pretty; }
.fnd .dv-error { text-align: center; text-wrap: pretty; }
@media (max-width: 559px) {
  .fnd .dv-bar { padding-left: 16px; }
}

/* ------------------------------------------------------------------
   3. THE RESULT: the shared .fnd-vidhead, then the answer under it
   ------------------------------------------------------------------ */
.fnd .dv-out { margin-top: var(--fnd-s6); }
.fnd .dv-out[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .dv-out:not([hidden]) { animation: fnd-tool-fade 320ms ease both; }
}
.dv-out > .fnd-vidhead { margin-bottom: var(--fnd-s5); }

/* ------------------------------------------------------------------
   4. THE ANSWER: the exact moment, on ink
   The kit makes the answer ride beside the questions from 1024px; here
   it sits in the one column, so it stays where it is. Relative, never
   static: the ink's lit layers are absolute and need it as their box,
   or they spread over the whole first screen.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .fnd .dv-ans { position: relative; top: auto; }
}
/* "25 September 2023" on one line at 320px. */
.fnd .dv-ans .dv-fig { font-size: clamp(1.75rem, 8vw, 3.4rem); }
.fnd .dv-ans .dv-fig-time {
  margin-top: var(--fnd-s1);
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: clamp(1.125rem, 3.4vw, 1.5rem); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--fnd-on-ink);
}
.fnd .dv-ans .dv-rows { margin-top: var(--fnd-s5); }
.fnd .dv-ans .dv-rows .fnd-row[hidden] { display: none; }
/* The label reads quieter than its value, so a stacked pair on a phone
   never looks like two answers. */
.fnd .dv-ans .dv-rows .fnd-row-t { color: var(--fnd-on-ink-soft); font-weight: 600; }
.fnd .dv-ans .dv-rows .fnd-row-end {
  display: block; text-align: right;
  font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--fnd-on-ink);
  overflow-wrap: anywhere;
}
.dv-ans__note { margin: var(--fnd-s3) 0 0; font-size: var(--fnd-t-sm); line-height: 1.5; color: var(--fnd-on-ink-soft); }
.dv-ans__note[hidden] { display: none; }
@media (max-width: 767px) {
  .fnd .dv-ans .dv-rows .fnd-row-end { text-align: left; }
}

/* ------------------------------------------------------------------
   5. THE FACTS AND THE THUMBNAILS
   ------------------------------------------------------------------ */
.fnd .dv-h { margin-top: var(--fnd-s7); margin-bottom: var(--fnd-s3); }
.fnd .dv-facts .fnd-receipt-row[hidden] { display: none; }
/* The value column: copy chips sit at its end like the other values. */
.fnd .dv-facts .fnd-receipt-v,
.fnd .dv-facts .fnd-receipt-l { align-self: center; }
.fnd .dv-facts .fnd-copy { vertical-align: middle; }
.fnd .dv-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 500;
}
.dv-copyall { margin-top: var(--fnd-s3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--fnd-s1) var(--fnd-s3); }
.fnd .dv-copyall__help { margin: 0; text-wrap: pretty; }

.fnd .dv-shots__help { margin: 0 0 var(--fnd-s3); text-wrap: pretty; }
.dv-shots-body[hidden] { display: none; }
.fnd .dv-shots__none { margin: 0; text-wrap: pretty; }
.fnd .dv-shots__none[hidden] { display: none; }
.fnd .dv-engines { margin-bottom: var(--fnd-s4); }
.fnd .dv-engines .fnd-chip-btn:focus-visible { outline: 2px solid var(--fnd-accent-deep); outline-offset: 2px; }

/* Two pictures a row at every width: each is a 16:9 box with its own
   search button under it. */
.dv-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fnd-s4);
}
.dv-shot { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--fnd-s2); }
.dv-shot[hidden] { display: none; }
.dv-shot__pic { display: block; border-radius: var(--fnd-r-sm); transition: transform 150ms ease, box-shadow 150ms ease; }
.dv-shot__pic:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgba(23, 20, 31, .45); }
.dv-shot__pic:focus-visible { outline: 2px solid var(--fnd-accent-deep); outline-offset: 2px; }
.fnd .dv-shot__go { width: 100%; justify-content: center; }
.fnd .dv-shots__note { margin: var(--fnd-s3) 0 0; text-wrap: pretty; }
@media (max-width: 559px) {
  .dv-shots { gap: var(--fnd-s3); }
  /* Four engines as two even pairs, so none is left alone on a row. */
  .fnd .dv-engines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fnd .dv-engines .fnd-chip-btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .dv-shot__pic, .dv-shot__pic:hover { transition: none; transform: none; }
}