/* share.css — 分享功能 Phase 1（2026-09-24 · docs/分享功能-Phase1-验收标准.md）
 * 跟随 shared.css 变量（--ink/--bg-2/--rule/--x-h/--cn），带 fallback；不依赖 annotate.css。
 * 三块 UI：正文末尾分享条 .share-bar（build 静态产）· 手机右下悬浮钮 .share-fab · 弹层 .share-mask/.share-panel。 */

/* ── 微信兜底缩略图：占位不占版面（绝不能 display:none，微信取不到） ── */
.wx-share-thumb-wrap { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
.wx-share-thumb { display: block; width: 300px; height: 300px; }

/* ── 分享条 ── */
.share-bar, .share-mask, .share-toast { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* iOS 不许自动放大 */
.share-bar {
  margin: 34px 0 6px; padding: 16px 18px 14px;
  border: 1px solid var(--rule, #dcd8cd); border-radius: 12px;
  background: var(--bg-2, #fffdf8);
  font-family: var(--cn, "Noto Sans SC", "PingFang SC", system-ui, sans-serif);
}
.share-bar .share-lab {
  font-size: 12px; letter-spacing: .18em; color: #8a6d1d; font-weight: 600; margin-bottom: 10px;
}
.share-bar .share-lab small { letter-spacing: 0; color: #9a9484; font-weight: 400; margin-left: 8px; }
.share-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn {
  appearance: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule, #cbc6b8);
  background: #fff; color: var(--ink, #1a1a17);
  /* 不用 font 简写：family 分量写 inherit 整条作废，<a> 与 <button> 就各回各的默认字号（站长 09-24 手机截图两行字号不一） */
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s;
}
.share-btn:hover { border-color: var(--ink, #1a1a17); }
.share-btn.primary { background: var(--ink, #1a1a17); color: #faf9f5; border-color: var(--ink, #1a1a17); }
.share-btn.primary:hover { background: #333; }
.share-btn[hidden] { display: none; }
.share-btn .ic { font-size: 14px; line-height: 1; }

/* ── 手机悬浮钮：≤760px 显示；避开划线工具条（那条是 absolute 跟随选区，不在右下） ── */
.share-fab {
  position: fixed; right: 16px; bottom: 22px; z-index: 900; display: none;
  align-items: center; gap: 6px; padding: 11px 16px; border-radius: 999px; border: 0;
  background: var(--ink, #1a1a17); color: #faf9f5; font: 600 14px/1 var(--cn, "Noto Sans SC", system-ui, sans-serif);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28); cursor: pointer;
}
@media (max-width: 760px) {
  .share-fab { display: inline-flex; }
  body.has-share-fab .anno-fav { display: none; } /* 收藏并入分享弹层，避免右下角两钮重叠 */
}
.share-btn.on { color: #8a6d1d; border-color: #c9a84c; }
.share-fab.hide { display: none; }

/* ── 弹层 ── */
.share-mask {
  position: fixed; inset: 0; z-index: 9990; background: rgba(20, 20, 18, .55);
  display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--cn, "Noto Sans SC", "PingFang SC", system-ui, sans-serif);
}
@media (min-width: 761px) { .share-mask { align-items: center; } }
.share-panel {
  width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg-2, #fffdf8); color: var(--ink, #1a1a17);
  border-radius: 16px 16px 0 0; padding: 18px 18px 22px; box-shadow: 0 -8px 40px rgba(0, 0, 0, .3);
}
@media (min-width: 761px) { .share-panel { border-radius: 14px; padding: 22px 24px; } }
.share-panel h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.share-panel .sub { font-size: 12.5px; color: #6f6a5e; margin: 0 0 14px; line-height: 1.6; }
.share-panel .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.share-panel .close {
  position: sticky; float: right; top: 0; appearance: none; border: 0; background: transparent;
  font-size: 22px; line-height: 1; color: #8a857a; cursor: pointer; padding: 0 2px;
}
.share-panel .tabs { display: inline-flex; border: 1px solid var(--rule, #cbc6b8); border-radius: 999px; overflow: hidden; margin: 2px 0 12px; }
.share-panel .tabs button {
  appearance: none; border: 0; background: transparent; padding: 7px 14px;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; color: #6f6a5e; cursor: pointer;
}
.share-panel .tabs button.on { background: var(--ink, #1a1a17); color: #faf9f5; }
.share-card-img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--rule, #dcd8cd); background: #fff; }
.share-card-img.v { max-width: 340px; margin: 0 auto; }
.share-panel .hint { font-size: 12.5px; color: #8a6d1d; margin: 10px 0 0; line-height: 1.6; }
.share-panel .warn { font-size: 12.5px; color: #b3261e; margin: 8px 0 0; line-height: 1.6; }
.share-panel .qr { display: block; width: 200px; height: 200px; margin: 6px auto 4px; }
.share-panel .wx-guide { display: flex; gap: 14px; align-items: center; margin: 8px 0 4px; }
.share-panel .wx-guide .step { flex: 1; padding: 12px 14px; border: 1px solid var(--rule, #dcd8cd); border-radius: 10px; background: #fff; font-size: 13.5px; line-height: 1.6; color: var(--ink, #1a1a17); }
.share-panel .wx-guide .step b { display: block; color: #8a6d1d; font-size: 12px; letter-spacing: .12em; margin-bottom: 2px; }
.share-panel .url {
  display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; margin-top: 10px;
  border: 1px solid var(--rule, #cbc6b8); border-radius: 8px; background: #fff; font: 13px/1.5 ui-monospace, Menlo, monospace;
  color: var(--ink, #1a1a17); word-break: break-all; -webkit-user-select: all; user-select: all;
}
.share-panel textarea.copy {
  display: block; width: 100%; box-sizing: border-box; min-height: 120px; margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--rule, #cbc6b8); border-radius: 8px; background: #fff; color: var(--ink, #1a1a17);
  font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.6;
}
.share-toast {
  position: fixed; left: 50%; bottom: 80px; transform: translate(-50%, 12px); z-index: 9999;
  background: var(--ink, #1a1a17); color: #fff; font: 13.5px/1.4 var(--cn, "Noto Sans SC", system-ui, sans-serif);
  padding: 10px 16px; border-radius: 22px; box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 86vw;
}
.share-toast.show { opacity: 1; transform: translate(-50%, 0); }
.share-toast a { color: #f0c674; font-weight: 600; margin-left: 4px; }

/* 赠阅横幅（worker 注入，内联样式已齐；这里只补链接 hover） */
.gift-banner a:hover { color: #fff; }