/* Share button on award cards, the share window and the share page. Loaded on every page. */
.award.has-share .award-head{padding-right:34px}
.shbtn{position:absolute;top:8px;right:8px;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:30px;height:30px;padding:0;border-radius:10px;border:1px solid var(--line);background:rgba(13,14,16,.7);color:var(--tx);cursor:pointer;font:600 13px var(--text);transition:border-color .15s,color .15s}
.shbtn:hover,.shbtn:focus-visible{border-color:var(--g);color:var(--g)}
.shbtn-label{position:static;width:auto;height:auto;padding:8px 14px;border-radius:99px;background:var(--panel)}
.sh .shbtn-label{align-self:center;flex:none}

.shr-dialog{width:min(640px,calc(100vw - 32px));max-height:min(90vh,820px);padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:#12161a;color:var(--tx);overflow:auto;margin:auto}
.shr-dialog::backdrop{background:rgba(0,0,0,.65)}
.shr-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.shr-head h3{margin:0;font:700 20px var(--display)}
.shr-x{all:unset;cursor:pointer;font-size:26px;line-height:1;padding:0 6px;color:var(--mu)}
.shr-x:hover,.shr-x:focus-visible{color:var(--tx)}
.shr-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:99px;padding:3px;margin:14px 0 12px}
.shr-seg button,.shr-seg a{all:unset;cursor:pointer;padding:6px 14px;border-radius:99px;font:600 13px var(--text);color:var(--mu)}
.shr-seg [aria-pressed=true],.shr-seg [aria-current=page]{background:var(--g);color:var(--g-ink,#06210a)}
.shr-frame{position:relative;width:min(100%,calc(52vh * var(--r,1.905)));aspect-ratio:var(--r,1.905);margin:0 auto;border-radius:12px;border:1px solid var(--line);background:#0d0e10;overflow:hidden}
.shr-img{display:block;width:100%;height:100%;transition:opacity .25s}
.shr-frame.loading .shr-img{opacity:0}
.shr-frame.loading::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-24px 0 0 -17px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--g);animation:shr-spin .8s linear infinite}
.shr-frame.loading::before{content:"Drawing your image...";position:absolute;left:0;right:0;top:calc(50% + 24px);text-align:center;font:600 13px var(--text);color:var(--mu)}
@keyframes shr-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.shr-frame.loading::after{animation-duration:2.4s}}
.shr-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.shr-btn{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 18px;border-radius:99px;border:1px solid var(--line);background:var(--panel);font:700 14px var(--text);color:var(--tx)}
.shr-btn:hover,.shr-btn:focus-visible{border-color:var(--g)}
.shr-btn.p{background:var(--g);border-color:var(--g);color:var(--g-ink,#06210a)}
.shr-msg{font:600 13px var(--text);color:var(--g);min-height:1.2em}
.shr-fine{margin:12px 0 0;font-size:12px;color:var(--mu)}
.shr-url{display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--mu);font:500 12px var(--mono,monospace)}

.shr-page>*{max-width:900px}
.shr-page .shr-seg{margin-top:0}
.shr-page .shr-frame{width:min(100%,900px);margin:0}