/* 分享這一頁的面板（app/static/js/pt-share.js；2026-11-06，做法對標島引馬祖 app.html 的 .sharepop）
   顏色一律用島引馬祖的變數（--dl-*、--surface…，app/static/vendor/portal.css、tokens.css）。
   手機（720px 以下）是從下方升起的底部面板；電腦是置中的卡片。右下角的「分享」鈕本身沿用 portal.css 的 .sharefab。 */
.pts-fab { cursor: pointer; text-decoration: none; }
.pts-lock, .pts-lock body { overflow: hidden; }

.pts-scrim { position: fixed; inset: 0; z-index: 3100; display: flex; align-items: flex-end; justify-content: center;
             background: rgba(10, 20, 25, 0); transition: background .18s ease; }
.pts-scrim[hidden] { display: none; }
.pts-scrim.is-on { background: rgba(10, 20, 25, .48); }
@media (min-width: 721px) { .pts-scrim { align-items: center; padding: 24px; } }

.pts-pop { box-sizing: border-box; width: 100%; max-width: 460px; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain;
           background: var(--dl-paper2, var(--surface-raised, #fbfcfb)); color: var(--dl-ink, var(--ink, #10242a));
           border-radius: 20px 20px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
           box-shadow: 0 -8px 28px rgba(0, 0, 0, .18); transform: translateY(24px); opacity: 0; transition: transform .2s ease, opacity .18s ease;
           font-family: var(--dl-sans, "Noto Sans TC", sans-serif); }
.pts-scrim.is-on .pts-pop { transform: none; opacity: 1; }
@media (min-width: 721px) { .pts-pop { border-radius: 20px; padding: 18px 20px 20px; box-shadow: 0 18px 48px rgba(0, 0, 0, .22); transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .pts-scrim, .pts-pop { transition: none; } }

.pts-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.pts-h b { font: 700 17px/1.3 var(--dl-serif, "Noto Serif TC", serif); letter-spacing: .04em; }
.pts-x { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; border: 0; border-radius: 50%; background: none; color: var(--dl-ink2, #56676c); cursor: pointer; }
.pts-x svg { width: 20px; height: 20px; }
.pts-x:hover { background: var(--surface-sunken, #eef2f1); color: var(--dl-ink, #10242a); }

/* 預覽卡：跟 LINE、臉書貼連結時出現的小卡同一張分享圖 */
.pts-card { border: 1px solid var(--dl-hair, #d3dcda); border-radius: 14px; overflow: hidden; background: var(--dl-paper, #f4f6f4); margin: 0 0 14px; }
.pts-img { aspect-ratio: 1200 / 630; background: var(--surface-sunken, #e7ecea); }
.pts-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-height: 640px) { .pts-img { max-height: 28vh; } .pts-img img { object-fit: contain; } }
.pts-txt { padding: 10px 12px 12px; display: grid; gap: 4px; min-width: 0; }
.pts-txt p { margin: 0; overflow-wrap: anywhere; }
.pts-now { font-size: 14px; line-height: 1.55; font-weight: 600; color: var(--dl-ink, #10242a); }
.pts-now span { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-right: 6px; border-radius: 6px; vertical-align: 1px;
                background: var(--dl-warm, #c8532a); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; }
.pts-t { font: 700 15px/1.45 var(--dl-serif, "Noto Serif TC", serif); }
.pts-d { font-size: 13px; line-height: 1.6; color: var(--dl-ink2, #56676c); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pts-u { font: 500 12px/1.4 var(--dl-mono, ui-monospace, monospace); color: var(--dl-ink3, #7d8b8f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 四個管道：手機四格一排；放不下時自動換行 */
.pts-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
.pts-b { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 76px; padding: 6px 2px 4px; border: 0; border-radius: 12px;
         background: none; color: var(--dl-ink, #10242a); font: 600 13px/1.2 var(--dl-sans, "Noto Sans TC", sans-serif); cursor: pointer; }
.pts-b:hover { background: var(--surface-sunken, #eef2f1); }
.pts-b:focus-visible, .pts-x:focus-visible { outline: 3px solid var(--dl-sea, #0c7078); outline-offset: 2px; }
.pts-b i { box-sizing: border-box; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-style: normal; }
.pts-b i svg { width: 26px; height: 26px; }
.pts-b.is-line i { background: #06c755; }
.pts-b.is-fb i { background: #1877f2; }
.pts-b.is-copy i, .pts-b.is-more i { background: var(--surface-sunken, #e8eded); color: var(--dl-deep, #08484f); border: 1px solid var(--dl-hair, #d3dcda); }
.pts-ok { min-height: 20px; margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--dl-go, #186b43); }
.pts-ok.is-bad { color: var(--dl-stop, #b42318); }

/* 夜間（data-theme="dark"）：沿用變數，只補卡片底 */
[data-theme="dark"] .pts-pop { box-shadow: 0 -8px 28px rgba(0, 0, 0, .5); }
[data-theme="dark"] .pts-b.is-copy i, [data-theme="dark"] .pts-b.is-more i { color: var(--dl-ink, #e6eeee); }