/* ==================================================================
   /tools/youtube-video-notes on the foundation look.
   A new page, public since 2026-11-04. Timed notes beside a YouTube or
   Vimeo video, or a video from the visitor's own device.

   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, buttons, chips, the switch, the
   textarea, callouts, the list row, the picture box, the data table and
   the numbered heads are the foundation's and are NOT redrawn here.

   Same shape as the Frame by Frame player (tools-frame-by-frame-fnd.css),
   whose first-screen, player and guide rules are mirrored here with the
   vn- prefix rather than shared, so neither page can move the other.
   Paste, then the video with the note box and the notes right beside it
   (under it on a phone), then share and the saved list.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .vn-top .fnd-tool-top__in { display: block; }
  .fnd .vn .fnd-tool-lead { max-width: 960px; }
  .fnd .vn .fnd-tool-lead .fnd-display { max-width: none; }
}
.fnd .vn .fnd-tool-lead,
.fnd .vn .vn-ask,
.fnd .vn .vn-out,
.fnd .vn .vn-more { max-width: 760px; margin-left: auto; margin-right: auto; }
/* A computer has room for the notes beside the video, so the working
   card and the cards under it widen; the name and the bar stay narrow. */
@media (min-width: 1024px) {
  .fnd .vn .vn-out,
  .fnd .vn .vn-more { max-width: 1120px; }
}

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

/* The bar sits bare on the page like a search box: no card around it. */
.fnd .vn .vn-ask { background: none; border: 0; border-radius: 0; box-shadow: none; }
.fnd .vn .vn-ask > .fnd-card-body { padding: 0; }
.vn-ask,
.vn-out { scroll-margin-top: 0; }

/* The paste bar: the fourth copy (citation, embed, frame by frame, this).
   Due to move into the foundation as one shared part. */
.fnd .vn-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 .vn-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);
}
.vn-bar > .fa-link { flex: 0 0 auto; font-size: 15px; color: var(--fnd-text-faint); }
.fnd .vn .vn-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 .vn .vn-bar .fnd-input:focus { box-shadow: none; }
.fnd .vn-bar .fnd-btn { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }
.fnd .vn-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);
}
@media (max-width: 559px) {
  .fnd .vn-bar { padding-left: 16px; }
}
@media (max-width: 413px) {
  .fnd .vn-bar .fnd-btn { padding: 0 var(--fnd-s3); }
}
@media (max-width: 379px) {
  .fnd .vn-bar { padding-left: 14px; }
  .vn-bar > .fa-link { display: none; }
}
.fnd .vn .vn-bar__help { margin: var(--fnd-s3) 0 0; text-align: center; text-wrap: pretty; }
.fnd .vn .vn-bar ~ .fnd-error { text-align: center; text-wrap: pretty; }
/* A video file dragged over the tool: the bar lights up where it lands. */
.fnd .vn-bar.vn-bar--drop {
  border-color: var(--fnd-accent-deep);
  box-shadow: 0 0 0 3px var(--fnd-accent-soft), 0 12px 28px -16px rgba(23, 20, 31, .3);
}
.vn-file { display: flex; justify-content: center; margin-top: var(--fnd-s3); }
.fnd .vn .vn-file .fnd-btn { white-space: normal; text-align: center; }

/* ------------------------------------------------------------------
   2. THE VIDEO: its name, the stage, the poster
   ------------------------------------------------------------------ */
.fnd .vn .vn-out { margin-top: var(--fnd-s5); }

.fnd .vn-exnote {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px var(--fnd-s2);
  margin: 0 0 var(--fnd-s4);
  font-size: var(--fnd-t-meta); line-height: 1.5; color: var(--fnd-text-soft);
  text-wrap: pretty;
}
.vn-out:not(.vn-out--example) .vn-exnote { display: none; }

.vn-video { margin-bottom: var(--fnd-s3); }
.fnd .vn-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;
}
.vn-video__title:focus { outline: none; }
.fnd .vn-video__meta { margin: 2px 0 0; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); overflow-wrap: anywhere; }
.vn-video__meta:empty { display: none; }
.fnd .vn .vn-warn { margin: var(--fnd-s3) 0 0; text-wrap: pretty; }

.vn-stage {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--fnd-r-sm);
  overflow: hidden;
  background: var(--fnd-ink);
}
/* A Short keeps its tall shape, and its width follows the screen's height
   so the note box under it stays on a phone screen. --vn-ar is the
   video's width over height. */
.vn-stage--tall {
  aspect-ratio: 9 / 16; max-width: 300px; margin-left: auto; margin-right: auto;
  width: min(100%, max(160px, calc((100vh - 340px) * var(--vn-ar, .5625))));
  width: min(100%, max(160px, calc((100svh - 340px) * var(--vn-ar, .5625))));
}
@media (min-width: 1024px) {
  .vn-stage--tall {
    width: min(100%, max(160px, calc((100vh - 260px) * var(--vn-ar, .5625))));
    width: min(100%, max(160px, calc((100svh - 260px) * var(--vn-ar, .5625))));
  }
}
.vn-stage iframe,
.vn-stage #vn-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vn-poster {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0; cursor: pointer;
  background: var(--fnd-ink);
}
.vn-poster img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; transition: opacity 150ms ease; }
.vn-poster:hover img { opacity: 1; }
.vn-poster__play {
  position: absolute; left: 50%; top: 50%;
  width: 68px; height: 48px; margin: -24px 0 0 -34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(23, 20, 31, .82); color: #fff; font-size: 20px;
  transition: transform 150ms ease, background-color 150ms ease;
}
.vn-poster:hover .vn-poster__play { transform: translateY(-1px) scale(1.04); background: rgba(23, 20, 31, .92); }
.vn-poster:focus-visible { outline: 3px solid var(--fnd-accent-deep); outline-offset: -3px; }
.vn-stage--busy .vn-poster { cursor: progress; }
.vn-stage--busy .vn-poster img { opacity: .6; }
.vn-stage video { object-fit: contain; background: var(--fnd-ink); }

/* The video and its notes: stacked on a phone and a tablet, side by
   side on a computer so a note never pushes the video off the screen. */
@media (min-width: 1024px) {
  .vn-grid {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: var(--fnd-s6); align-items: start;
  }
}
@media (max-width: 1023px) {
  .vn-side { margin-top: var(--fnd-s4); }
}

/* ------------------------------------------------------------------
   3. WRITE A NOTE, THEN THE NOTES
   ------------------------------------------------------------------ */
.vn-compose__head { display: flex; align-items: center; }
.fnd .vn-at { font-variant-numeric: tabular-nums; }
.fnd .vn .vn-text {
  display: block; width: 100%;
  min-height: 64px; margin-top: var(--fnd-s2);
  resize: none; overflow-wrap: anywhere;
}
.vn-compose__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--fnd-s2) var(--fnd-s3);
  margin-top: var(--fnd-s2);
}
.fnd .vn .vn-sw { font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); }
.fnd .vn .vn-hint { margin: var(--fnd-s2) 0 0; text-wrap: pretty; }
/* A phone's keyboard has its own send key: the Enter tip is for a keyboard. */
@media (hover: none) and (pointer: coarse) {
  .fnd .vn .vn-hint { display: none; }
}

.fnd .vn .vn-shared__tip { margin: 0; }
.vn-shared__do {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--fnd-s2) var(--fnd-s4);
  margin-top: var(--fnd-s3);
}
.fnd .vn #vn-own { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); }

.vn-notes { margin-top: var(--fnd-s5); }
.vn-notes__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fnd-s3); }
.fnd .vn-notes__t {
  margin: 0;
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: var(--fnd-t-lede); line-height: 1.3; color: var(--fnd-text);
}
.fnd .vn-notes__n { font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); font-variant-numeric: tabular-nums; }

/* Each note: its time on the left (press it to jump there), the words
   beside it, Edit and Delete under the words. */
.vn-list { list-style: none; margin: var(--fnd-s2) 0 0; padding: 0; }
.vn-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--fnd-s3); align-items: start;
  padding: var(--fnd-s2);
  border-radius: var(--fnd-r-sm);
  transition: background-color 150ms ease;
}
/* The note for the moment playing now: a soft tint, nothing louder. */
.vn-note.is-now { background: var(--fnd-paper-2); }
.fnd .vn .vn-note__t { grid-column: 1; grid-row: 1 / span 2; font-variant-numeric: tabular-nums; }
.fnd .vn .vn-note__t i { font-size: 12px; }
.fnd .vn-note__x {
  grid-column: 2; margin: 0; padding-top: 10px;
  font-size: var(--fnd-t-sm); line-height: 1.5; color: var(--fnd-text);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.vn-note__act {
  grid-column: 2;
  display: flex; flex-wrap: wrap; gap: var(--fnd-s4);
  margin-top: 2px;
}
.fnd .vn .vn-note__b { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); }
.vn-edit { grid-column: 2; }
.fnd .vn .vn-edit__in { margin-top: 0; }
.vn-edit__do { display: flex; align-items: center; gap: var(--fnd-s4); margin-top: var(--fnd-s2); }
.fnd .vn-empty,
.fnd .vn-undo {
  margin: var(--fnd-s3) 0 0;
  font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); text-wrap: pretty;
}
.fnd .vn #vn-undo-btn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); font-weight: 600; }
/* A long list scrolls inside itself on a computer, so the buttons under
   it stay next to the video. */
@media (min-width: 1024px) {
  .vn-list { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
}

/* Download, Print, Copy all, and Delete all at the far end. */
.vn-tools {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--fnd-s2);
  margin-top: var(--fnd-s3); padding-top: var(--fnd-s3);
  border-top: 1px solid var(--fnd-rule);
}
.fnd .vn .vn-clear { --fnd-hit-y: 14px; margin-left: auto; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); }
.fnd .vn .vn-clear.is-armed { color: var(--fnd-danger); font-weight: 700; }
.fnd .vn .vn-copyall[data-copied="true"],
.fnd .vn .vn-copy[data-copied="true"] { background: var(--fnd-ok); border-color: var(--fnd-ok); color: #fff; }
.fnd .vn .vn-notes .fnd-error { margin-top: var(--fnd-s3); text-wrap: pretty; }
/* A phone: two even columns, so every word fits its button. Download and
   Print, then Copy all with Delete all at the far end. */
@media (max-width: 559px) {
  .vn-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fnd .vn .vn-tools .fnd-btn { justify-content: center; }
  .fnd .vn .vn-clear { margin-left: 0; justify-self: end; }
  /* The note box's own button sits right under it, full width; the pause
     switch goes under that. */
  .fnd .vn #vn-add { order: -1; flex: 1 1 100%; justify-content: center; }
}

/* ------------------------------------------------------------------
   4. SHARE WITH A CLASS, YOUR SAVED NOTES
   ------------------------------------------------------------------ */
.fnd .vn .vn-more { grid-template-columns: minmax(0, 1fr); gap: var(--fnd-s5); margin-top: var(--fnd-s6); }
@media (min-width: 1024px) {
  .fnd .vn .vn-more:has(> #vn-saved-card:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.fnd .vn .vn-card .fnd-tool-more__sub { margin: 4px 0 0; text-wrap: pretty; }
.fnd .vn .vn-card .fnd-error { margin-top: var(--fnd-s3); text-wrap: pretty; }

.vn-share { display: flex; align-items: center; gap: var(--fnd-s2); margin-top: var(--fnd-s4); }
.fnd .vn .vn-share__in {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fnd-t-sm); color: var(--fnd-text-soft);
  text-overflow: ellipsis;
}
.fnd .vn .vn-copy { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 559px) {
  .vn-share { flex-direction: column; align-items: stretch; }
  .fnd .vn .vn-copy { justify-content: center; }
}
.fnd .vn .vn-share__note { margin: var(--fnd-s4) 0 0; text-wrap: pretty; }

/* The saved list is the foundation's list row with its picture box. */
.fnd .vn .vn-saved { list-style: none; margin: var(--fnd-s4) 0 0; padding: 0; }
.fnd .vn .vn-saved__a { color: inherit; text-decoration: none; border-radius: var(--fnd-r-sm); }
.fnd .vn .vn-saved li:last-child .vn-saved__a { border-bottom: 0; padding-bottom: 0; }
.fnd .vn .vn-saved__a:hover .vn-saved__t,
.fnd .vn .vn-saved__a[aria-current="true"] .vn-saved__t { color: var(--fnd-accent-deep); }
.fnd .vn .vn-saved__a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--fnd-accent-soft); }
.fnd .vn .vn-saved__pic > i {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 20px; color: var(--fnd-text-faint);
}

/* ------------------------------------------------------------------
   5. THE GUIDE
   ------------------------------------------------------------------ */
.fnd .vn-guide .fnd-tool-read .fnd-h2 {
  margin-top: var(--fnd-s8);
  max-width: 24ch;
  scroll-margin-top: 0;
}
.vn-guide .fnd-tool-read .fnd-h2:focus { outline: none; }
@media (max-width: 767px) {
  .fnd .vn-guide .fnd-tool-read .fnd-h2 { margin-top: var(--fnd-s7); }
}
.fnd .vn-guide .fnd-tool-read p a:not(.fnd-btn),
.fnd .vn-qa__list p a:not(.fnd-btn) { padding-block: 12px; }

.vn-steps { list-style: none; margin: var(--fnd-s4) 0 0; padding: 0; }
.vn-steps li + li { margin-top: var(--fnd-s5); }
.vn-steps .fnd-numhead { margin-bottom: var(--fnd-s2); }
.fnd .vn-steps .fnd-numhead__t { font-size: var(--fnd-t-h3); }
.vn-steps p { margin: 0; padding-left: calc(32px + var(--fnd-s3)); }
@media (max-width: 559px) {
  .vn-steps p { padding-left: 0; }
}

/* The guide table holds words: cells wrap, and on a phone the last cell
   takes its own full line under the first. */
.fnd .vn-tbl tbody td:not(:first-child) { white-space: normal; font-variant-numeric: normal; }
.fnd .vn-tbl td:first-child { white-space: nowrap; }
@media (min-width: 640px) {
  .vn-tbl td { vertical-align: top; }
}
.fnd .vn-guide .vn-tbl td { text-wrap: pretty; }
@media (max-width: 639px) {
  .fnd .vn-guide .vn-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 .vn-src { margin-top: var(--fnd-s4); text-wrap: pretty; }

/* Last, so it outranks every display rule above: a part the script hides
   with the hidden attribute stays hidden. */
.fnd .vn [hidden] { display: none; }