/* Share component — token-driven; themes via --snk-* + data-bs-theme. */
/* Fixed mobile nav clearance token — snk-share.css loads on pages WITHOUT snk-remote-raids.css
   (which defines the same token), so it must be defined here too. Matches .snk-nav-bottom's
   ≤991.98px breakpoint (assets/css/snk-nav.css). */
:root{--snk-mnav-h:5.2rem}
@media(min-width:992px){:root{--snk-mnav-h:0rem}}
.snk-share{margin-top:.85rem}
.snk-share-lab{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--snk-ink-500);margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem}
.snk-share-lab i{width:.9rem;height:.9rem}
.snk-share-row{display:flex;flex-wrap:wrap;gap:.45rem}
.snk-share-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .78rem;border-radius:var(--rr-r-md,12px);border:1px solid var(--snk-border);background:var(--snk-surface);color:var(--snk-ink-700);font-weight:700;font-size:.83rem;font-family:inherit;cursor:pointer;text-decoration:none;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.snk-share-btn i{width:1rem;height:1rem}
.snk-share-btn:hover{transform:translateY(-1px)}
.snk-share-btn:focus-visible{outline:2px solid var(--snk-accent);outline-offset:2px}
.snk-share-btn.is-native{background:var(--snk-brand);color:#32414A;border-color:transparent;box-shadow:0 3px 10px var(--snk-shadow)}
.snk-share-btn.is-tg{background:#229ed9;color:#fff;border-color:transparent}
.snk-share-btn.is-wa{background:#25d366;color:#08321a;border-color:transparent}
.snk-share-btn.is-dc{background:#5865f2;color:#fff;border-color:transparent}
.snk-share-btn.is-copy:hover{border-color:var(--snk-accent)}
.snk-share-cta{width:100%;justify-content:center;padding:.72rem 1rem;font-size:.95rem}
/* self-hosted brand glyphs (Simple Icons, CC0) — masked so they inherit text color */
.bic{display:inline-block;width:1.05rem;height:1.05rem;background:currentColor;vertical-align:-2px;-webkit-mask:var(--bi) center/contain no-repeat;mask:var(--bi) center/contain no-repeat}
.bic.tg{--bi:url(/assets/img/brands/telegram.svg)}
.bic.wa{--bi:url(/assets/img/brands/whatsapp.svg)}
.bic.dc{--bi:url(/assets/img/brands/discord.svg)}
.snk-sheet-item .ic .bic{width:1.15rem;height:1.15rem}
/* bottom-sheet */
.snk-sheet-back{position:fixed;inset:0;background:rgba(0,0,0,.44);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1080}
.snk-sheet-back.open{opacity:1;pointer-events:auto}
.snk-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1081;background:var(--snk-surface);border-radius:22px 22px 0 0;padding:.7rem 1rem calc(1.1rem + env(safe-area-inset-bottom) + var(--snk-mnav-h));box-shadow:0 -12px 34px rgba(0,0,0,.3);transform:translateY(102%);transition:transform .28s cubic-bezier(.32,.72,0,1);max-width:520px;margin-inline:auto;touch-action:none}
.snk-sheet.open{transform:translateY(0)}
.snk-sheet .grip{width:40px;height:4px;border-radius:99px;background:var(--snk-ink-300);margin:.15rem auto .8rem}
.snk-sheet h4{margin:.1rem 0 .05rem;font-size:1rem;display:flex;align-items:center;gap:.45rem}
.snk-sheet h4 i{width:1.05rem;height:1.05rem}
.snk-sheet .ssub{font-size:.74rem;color:var(--snk-ink-500);margin:0 0 .8rem}
.snk-sheet-item{display:flex;align-items:center;gap:.8rem;width:100%;padding:.68rem .8rem;border-radius:var(--rr-r-md,12px);border:1px solid var(--snk-border);background:var(--snk-surface);color:var(--snk-text);font-weight:700;font-size:.9rem;font-family:inherit;margin-bottom:.45rem;text-decoration:none;cursor:pointer;text-align:left}
.snk-sheet-item:hover{border-color:var(--snk-accent)}
.snk-sheet-item:focus-visible{outline:2px solid var(--snk-accent);outline-offset:2px}
.snk-sheet-item .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.snk-sheet-item .ic i{width:1.15rem;height:1.15rem}
.snk-sheet-item .m{display:flex;flex-direction:column;gap:.02rem;min-width:0}
.snk-sheet-item .m small{font-weight:500;font-size:.7rem;color:var(--snk-ink-500)}
.snk-sheet-item.native .ic{background:var(--snk-brand);color:#32414A}
.snk-sheet-item.telegram .ic{background:#229ed9}
.snk-sheet-item.whatsapp .ic{background:#25d366;color:#08321a}
.snk-sheet-item.discord .ic{background:#5865f2}
.snk-sheet-item.copy .ic{background:var(--snk-surface-2);color:var(--snk-ink-700);border:1px solid var(--snk-border)}
/* share channels inside the unified overlay body (.snk-ov__body): items keep their own margins */
.snk-share-items .snk-sheet-item:last-child{margin-bottom:0}
/* toast */
.snk-toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,1.5rem);opacity:0;background:var(--snk-text);color:var(--snk-bg);padding:.55rem 1rem;border-radius:99px;font-weight:700;font-size:.83rem;z-index:1090;transition:.22s ease;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.snk-toast.show{opacity:1;transform:translate(-50%,0)}
/* Facebook + X channels (added 2026-07-09) */
.snk-share-btn.is-fb{background:#1877f2;color:#fff;border-color:transparent}
.snk-share-btn.is-x{background:#000;color:#fff;border-color:transparent}
[data-bs-theme="dark"] .snk-share-btn.is-x{border-color:#3a3f47}
.bic.fb{--bi:url(/assets/img/brands/facebook.svg)}
.bic.x{--bi:url(/assets/img/brands/x.svg)}
.snk-sheet-item.facebook .ic{background:#1877f2}
.snk-sheet-item.x .ic{background:#000}
/* Explicit line-heights — neutralise the global body{line-height:26px} on small/multi-line text (fidelity) */
.snk-share-btn{line-height:1.1}
.snk-share-lab{line-height:1.2}
.snk-sheet h4{line-height:1.2}
.snk-sheet .ssub{line-height:1.35}
.snk-sheet-item{line-height:1.2}
.snk-sheet-item .m small{line-height:1.3}
/* ── Header share button: compact, secondary "glass" utility (not a loud gold CTA) — 2026-07-09 ── */
.snk-share--button{margin-top:0;display:inline-block}
.snk-share--button .snk-share-btn.is-native{
  background:color-mix(in srgb,var(--snk-surface) 88%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--snk-ink-700);border:1px solid var(--snk-border);box-shadow:none;
  padding:.5rem .8rem;font-size:.82rem;font-weight:700;line-height:1;white-space:nowrap;flex:0 0 auto}
.snk-share--button .snk-share-btn.is-native i,
.snk-share--button .snk-share-btn.is-native svg{width:1rem;height:1rem;color:var(--snk-brand)}   /* gold icon = brand hint */
.snk-share--button .snk-share-btn.is-native:hover{transform:none;border-color:var(--snk-accent);color:var(--snk-ink-800)}
/* header layout: title fills + wraps internally; button pinned top-right, never wraps under */
.snk-head-row{flex-wrap:nowrap!important;align-items:flex-start;gap:.75rem}
.snk-head-row>h1{flex:1 1 auto;min-width:0;margin-bottom:0}
.to-hero-share{flex:0 0 auto;padding-top:.2rem}
/* mobile: icon-only pill so the page title stays dominant + nothing wraps awkwardly */
@media (max-width:575.98px){
  .snk-share--button .snk-share-btn.is-native{width:40px;height:40px;padding:0;justify-content:center;border-radius:12px}
  .snk-share--button .snk-share-btn.is-native .snk-share-lbl{display:none}
}
