/**
 * 文书预览弹窗的**公共类**（全局）。
 *
 * 为什么这几条必须放全局而不是 scoped：预览弹窗的页脚由调用方通过 `#footer` 插槽提供
 * （文档库要「用此模板发起签署」、工作台要「只读副本 / 下载 PDF 原件」），
 * 而插槽内容带的是**父组件**的 scope id —— 弹窗自己的 scoped 选择器命中不了它，
 * 每个调用方各写一份按钮样式又会漂移。
 * 这与 styles/signing-document.css 是同一类问题，用同一套解法。
 *
 * 因此这里的类名是预览弹窗对外的**公开契约**：
 *   .preview-button / .preview-button--ghost   页脚按钮
 *   .preview-spacer                            把按钮推到右侧
 *   .preview-note-footer                       页脚左侧说明（窄屏隐藏）
 *
 * 弹窗自身的框（遮罩 / 标题栏 / 页签 / 滚动区 / 纸张舞台）仍是组件内的 scoped 样式。
 */

.preview-button {
  flex-shrink: 0;
  padding: 7px 14px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--brand);
  border-radius: 7px;
  transition: background 0.15s ease;
}

.preview-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.preview-button--ghost {
  color: var(--brand);
  background: #fff;
  border: 1px solid var(--brand);
}

.preview-button--ghost:hover:not(:disabled) {
  background: var(--brand-l);
}

.preview-spacer {
  flex: 1;
}

.preview-note-footer {
  overflow: hidden;
  color: var(--mut);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .preview-note-footer {
    display: none;
  }
}