/* share.css —— 报告分享与传播组件层（迭代 2026-08-10；设计基准 docs/前端参考/2026-08-10-报告分享与传播/）
   三块：① 阅读浮窗右下角转发 FAB ② 分享弹窗 ③ 落地页 #/s/{token}（独立 view，mobile-first）
   全部走 tokens——暗色由 theme-dark.css 令牌重映射自动适配。 */

/* ---------- ① 转发 FAB（挂 .drawer 容器右下；桌面/移动同一挂点自动适配） ---------- */
.share-fab {
  position: absolute; right: 20px; bottom: max(24px, calc(16px + env(safe-area-inset-bottom)));
  width: 48px; height: 48px; border-radius: var(--r-circle); border: 0; cursor: pointer;
  background: var(--green-solid, var(--green)); display: grid; place-items: center;
  box-shadow: var(--sh-cta); z-index: 5; color: #fff;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.share-fab:hover { transform: translateY(-1px); }
.share-fab:active { background: var(--green-solid-h, var(--green-d)); transform: none; }

/* ---------- ② 分享弹窗（v9 弹窗语言：遮罩 + 居中卡；z 高于 drawer(30/46)、低于登录引导(210)） ---------- */
.share-ovl { position: fixed; inset: 0; z-index: 205; background: rgba(20, 23, 27, .32); display: flex; align-items: center; justify-content: center; padding: 24px; animation: mg-fade .16s ease both; }
.share-dlg { width: 320px; max-width: 100%; background: var(--pop, var(--bg)); border-radius: var(--r-xl); box-shadow: var(--sh-pop); padding: 20px 20px 16px; position: relative; }
.sd-x { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: 0; background: none; cursor: pointer; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-3); font-size: 16px; }
.sd-x:hover { background: var(--soft); color: var(--ink); }
.sd-title { font-size: 15px; font-weight: var(--fw-extrabold); letter-spacing: -.2px; color: var(--ink); }
.sd-report { margin-top: 5px; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-state { margin-top: 16px; font-size: var(--fs-sm); color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.sd-state .btn { margin-left: auto; }
.sd-linkrow { margin-top: 14px; display: flex; gap: 8px; }
.sd-link { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); padding: 0 12px; font-size: 12px; color: var(--ink-2); display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-copy { flex: none; height: 38px; padding: 0 15px; border: 0; cursor: pointer; border-radius: 10px; background: var(--green-solid, var(--green)); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-extrabold); }
.sd-copy:active { background: var(--green-solid-h, var(--green-d)); }
.sd-copy.is-done { background: var(--green-soft); color: var(--green-d); }
.sd-quota { margin-top: 13px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.sd-quota.is-full { color: var(--red); font-weight: var(--fw-semibold); }
.sd-dots { display: inline-flex; gap: 4px; }
.sd-dot { width: 9px; height: 9px; border-radius: var(--r-circle); background: var(--line); border: 1px solid var(--line); }
.sd-dot.on { background: var(--green); border-color: var(--green); }
.sd-dot.full { background: var(--red); border-color: var(--red); }
.sd-subnote { margin-top: 7px; font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-3); }
.sd-reward { margin-top: 13px; background: var(--green-soft); border-radius: 10px; padding: 10px 12px; }
.sd-reward .r1 { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--green-d); }
.sd-reward .r1 .spark { margin-right: 4px; }
.sd-reward .r2 { margin-top: 3px; font-size: var(--fs-xs); color: var(--ink-2); }

/* ---------- ③ 落地页（独立顶层 view；页面自身滚动，CTA 常驻底部） ---------- */
.view-share.is-active { display: flex; flex-direction: column; }
.share-top { flex: none; display: flex; align-items: center; height: 52px; padding: 0 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.share-brand { display: flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; font-size: 15px; font-weight: var(--fw-extrabold); color: var(--ink); letter-spacing: -.2px; padding: 0; }
.share-brand img { width: 22px; height: 22px; border-radius: 6px; }
.share-main { flex: 1; overflow-y: auto; background: var(--bg); }
.share-cta { flex: none; display: flex; align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
.cta-inner { display: flex; align-items: center; gap: 10px; width: 100%; }
.cta-brand { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; }
.cta-brand img { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.cta-txt { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cta-txt b { color: var(--ink); font-weight: var(--fw-extrabold); margin-right: 4px; }
.cta-btn { flex: none; height: 34px; padding: 0 18px; border: 0; cursor: pointer; border-radius: var(--r-pill); background: var(--green-solid, var(--green)); color: #fff; font-size: 13px; font-weight: var(--fw-extrabold); box-shadow: var(--sh-cta); }
.cta-btn:active { background: var(--green-solid-h, var(--green-d)); }

/* 报告头（个股：徽章+标题+副行；市场级：栏目徽章+副行，大标题在正文 h1） */
.share-head { padding: 18px 16px 14px; border-bottom: 1px solid var(--line-2); }
.share-head .sh-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* 栏目徽章（落地页头部 + 耗尽页 teaser 共用，不绑 share-head 作用域） */
.mrx-share-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-extrabold); color: #fff; letter-spacing: .02em; flex: none; background: var(--green-solid, var(--green)); }
.mrx-share-badge.is-x { background: #3D6FE8; }
.sh-title { margin-top: 10px; font-size: 20px; line-height: 1.35; font-weight: var(--fw-extrabold); letter-spacing: -.2px; overflow-wrap: anywhere; color: var(--ink); }
.sh-sub { font-size: 12px; color: var(--ink-3); }
.share-head .sh-sub { margin-top: 8px; }
.share-head .sh-sub.is-inline { margin-top: 0; }
.sh-sub .by { color: var(--ink-2); font-weight: var(--fw-semibold); }

/* 正文容器：复用全局 .report-body 排版；底部给 CTA 留白由 share-main 滚动天然处理 */
.share-body { padding: 6px 16px 28px; }
.share-body .report-chart { margin: 18px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.share-body .report-chart img { display: block; width: 100%; height: auto; }

/* 状态页（骨架由 .skel-report 复用；耗尽/失效/限流/错误） */
.share-state { padding: 64px 28px 80px; text-align: center; }
.ss-ico { width: 64px; height: 64px; border-radius: var(--r-circle); background: var(--soft); display: grid; place-items: center; margin: 0 auto; color: var(--ink-3); }
.ss-title { margin-top: 18px; font-size: 18px; font-weight: var(--fw-extrabold); letter-spacing: -.2px; color: var(--ink); }
.ss-desc { margin-top: 8px; font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.ss-teaser { margin: 22px auto 0; max-width: 320px; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: 14px 16px; }
.ss-teaser .sh-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ss-teaser .tt { margin-top: 9px; font-size: 15px; font-weight: var(--fw-bold); line-height: 1.45; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-teaser .by { margin-top: 7px; font-size: 12px; color: var(--ink-3); }
.ss-hint { margin-top: 20px; font-size: var(--fs-sm); color: var(--ink-3); }
.ss-act { margin-top: 18px; }

/* 落地页骨架（沿 drawer skel 族的浅条） */
.share-skel { padding: 24px 16px; }
.share-skel .skeleton { height: 13px; border-radius: 7px; background: var(--line-2); margin-bottom: 12px; animation: mg-fade 1s ease infinite alternate; }
.share-skel .sk-t { height: 22px; width: 70%; }
.share-skel .sk-w90 { width: 90%; }
.share-skel .sk-w75 { width: 75%; }

/* 桌面态 ≥860：soft 底 + 白纸限宽 760 居中；CTA 内容与纸对齐 */
@media (min-width: 860px) {
  .share-main { background: var(--page, var(--soft)); }
  .share-sheet { max-width: var(--content-max); margin: 28px auto 40px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-card); overflow: hidden; }
  .share-head { padding: 24px 40px 18px; }
  .share-body { padding: 8px 40px 40px; }
  .share-state { padding: 72px 40px 88px; }
  .share-cta { padding: 12px 24px; }
  .cta-inner { max-width: var(--content-max); margin: 0 auto; }
}