/* "Prefer to watch?" link to the owner's YouTube walkthrough of a question
   (tools/design-export/video-links.php). A plain outline button: the panel's
   orange stays on its answer. */
.video-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 16px 0 0;
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
}

/* On multiple choice pages it follows the solution section; line up with its
   small-screen padding (base.css). */
@media (max-width: 639px) {
  section + .video-link {
    padding: 0 16px;
  }
}

.video-link__lead {
  color: var(--muted);
}

.video-link__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.video-link__button:hover {
  background: var(--surface);
  color: var(--ink);
}

.video-link__button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.video-link__icon {
  flex: none;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.video-link__note {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}