/* Share button + iOS-style glass share sheet (shared by every single content page) */
.share-wrap{margin:12px 0 4px;display:flex}
.share-after-tags{margin:22px 0 0;justify-content:flex-start;flex-wrap:wrap;gap:12px}
.jp-top .share-wrap{margin:0 0 0 auto;align-self:center}
.jp-top .share-wrap+.jp-download{margin-left:12px}
.share-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;font:600 .9rem/1 var(--font);cursor:pointer;color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.38);
  box-shadow:0 6px 18px rgba(2,24,52,.25),inset 0 1px 0 rgba(255,255,255,.35);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  transition:transform .25s,background .25s,box-shadow .25s}
.share-btn svg{width:18px;height:18px}
.share-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.3);box-shadow:0 12px 26px rgba(2,24,52,.32),inset 0 1px 0 rgba(255,255,255,.5)}
.share-btn:active{transform:scale(.96)}
.share-btn:focus-visible,.sh-app:focus-visible,.sh-x:focus-visible,.sh-copy:focus-visible,.sh-more:focus-visible{outline:3px solid #9fd0f5;outline-offset:3px}

html.share-lock{overflow:hidden}
.sh-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:flex-end;justify-content:center;padding:0}
.sh-modal.is-open{display:flex}
.sh-backdrop{position:absolute;inset:0;background:rgba(6,16,30,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:shFade .3s ease both}
.sh-sheet{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;padding:10px 22px calc(22px + env(safe-area-inset-bottom));
  border-radius:30px 30px 0 0;color:#fff;outline:0;
  background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.12) 55%,rgba(255,255,255,.2)),rgba(20,36,58,.5);
  border:1px solid rgba(255,255,255,.4);border-bottom:0;
  box-shadow:0 -20px 60px rgba(0,10,30,.45),inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter:blur(36px) saturate(180%);-webkit-backdrop-filter:blur(36px) saturate(180%);
  animation:shUp .42s cubic-bezier(.22,1.1,.36,1) both}
.sh-grab{display:block;width:40px;height:5px;margin:2px auto 12px;border-radius:3px;background:rgba(255,255,255,.55)}
.sh-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
.sh-info{flex:1;min-width:0}
.sh-info h2{font-family:var(--font);font-size:1.15rem;font-weight:700;color:#fff;margin:0}
.sh-page{margin-top:2px;font-size:.85rem;color:rgba(255,255,255,.78);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh-x{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.22);transition:background .2s,transform .2s}
.sh-x svg{width:16px;height:16px}
.sh-x:hover{background:rgba(255,255,255,.38);transform:rotate(90deg)}
.sh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 8px;list-style:none}
.sh-app{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:6px 2px;border:0;border-radius:16px;background:none;color:#fff;font:inherit;cursor:pointer;text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:transform .2s,background .2s}
.sh-ico{width:58px;height:58px;display:grid;place-items:center;border-radius:15px;color:#fff;box-shadow:0 8px 18px rgba(0,10,30,.3),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .2s,box-shadow .2s}
.sh-ico svg{width:30px;height:30px}
.sh-lbl{font-size:.74rem;font-weight:500;color:rgba(255,255,255,.92);text-align:center;line-height:1.2}
.sh-app:hover{background:rgba(255,255,255,.1)}
.sh-app:hover .sh-ico{transform:translateY(-3px) scale(1.06);box-shadow:0 14px 26px rgba(0,10,30,.4),inset 0 1px 0 rgba(255,255,255,.45)}
.sh-app:active{transform:scale(.92)}
.sh-linkrow{display:flex;gap:8px;align-items:center;margin-top:20px;padding:6px 6px 6px 16px;border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25)}
.sh-url{flex:1;min-width:0;border:0;background:none;color:#fff;font:inherit;font-size:.86rem;outline:none;text-overflow:ellipsis}
.sh-copy{flex:none;padding:9px 18px;border:0;border-radius:11px;cursor:pointer;font:700 .85rem var(--font);color:#06284a;background:#fff;transition:transform .2s,background .2s}
.sh-copy:hover{background:#dcecf8}.sh-copy:active{transform:scale(.95)}
.sh-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:13px;border:0;border-radius:16px;cursor:pointer;font:600 .95rem var(--font);color:#fff;background:rgba(255,255,255,.14);transition:background .2s,transform .2s}
.sh-more svg{width:20px;height:20px}
.sh-more:hover{background:rgba(255,255,255,.26)}.sh-more:active{transform:scale(.98)}
.sh-toast{position:absolute;left:50%;bottom:18px;display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-size:.88rem;font-weight:600;white-space:nowrap;color:#fff;
  background:rgba(22,140,72,.92);box-shadow:0 10px 26px rgba(0,0,0,.35);opacity:0;pointer-events:none;transform:translate(-50%,14px) scale(.94);transition:opacity .25s,transform .3s cubic-bezier(.22,1.2,.36,1)}
.sh-toast svg{width:16px;height:16px}
.sh-toast.err{background:rgba(190,45,45,.94)}
.sh-toast.err svg{display:none}
.sh-toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.sh-modal.closing .sh-backdrop{animation:shFadeOut .26s ease both}
.sh-modal.closing .sh-sheet{animation:shDown .26s ease-in both}

@keyframes shFade{from{opacity:0}to{opacity:1}}
@keyframes shFadeOut{from{opacity:1}to{opacity:0}}
@keyframes shUp{from{opacity:0;transform:translateY(60px) scale(.98)}to{opacity:1;transform:none}}
@keyframes shDown{from{opacity:1;transform:none}to{opacity:0;transform:translateY(60px) scale(.98)}}
@keyframes shPop{from{opacity:0;transform:scale(.9) translateY(14px)}to{opacity:1;transform:none}}
@keyframes shPopOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.94)}}

/* tablet / desktop: centred card instead of a bottom sheet */
@media (min-width:640px){
  .sh-modal{align-items:center}
  .sh-sheet{border-radius:30px;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:24px;box-shadow:0 30px 80px rgba(0,10,30,.5),inset 0 1px 0 rgba(255,255,255,.55);animation:shPop .38s cubic-bezier(.22,1.1,.36,1) both}
  .sh-modal.closing .sh-sheet{animation:shPopOut .22s ease-in both}
  .sh-grab{display:none}
  .sh-grid{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:360px){.sh-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.jp-top .share-wrap{margin-left:0}}
@media (prefers-reduced-motion:reduce){
  .sh-backdrop,.sh-sheet,.sh-modal.closing .sh-sheet,.sh-modal.closing .sh-backdrop{animation-duration:.01s}
  .share-btn,.sh-ico,.sh-toast{transition:none}
}
@media (prefers-contrast:more){.sh-sheet{background:rgba(10,24,44,.96)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sh-sheet{background:rgba(20,40,66,.96)}}
