/* Blog article contents and share controls. Loaded only on article pages. */

/* hidden makes .root a scroll container and stops sticky; clip keeps the same horizontal guard. */
@supports (overflow:clip){html .root{overflow-x:clip}}

/* scroll-padding and scroll-margin add up, so the anchor gap is declared once. */
html:root{scroll-padding-top:calc(var(--blog-nav-offset,85px) + 24px)}
.root .art h2,.root .blog-faq-section{scroll-margin-top:0}

.side a{transition:color .2s,border-color .2s}
.side a:focus-visible{outline:2px solid #3289ED;outline-offset:-2px}
.side a[aria-current="location"]{border-left-color:#3289ED;color:#1C66C9}
.dkm .side a:hover,.dkm .side a.cur,.dkm .side a[aria-current="location"]{border-left-color:#3289ED;color:#5FD3FC}

@media (min-width:1181px){
 .root .lay{display:grid;grid-template-columns:minmax(180px,220px) minmax(0,740px) minmax(100px,140px);gap:0 56px}
 .root .lay>.side{grid-column:1;grid-row:1 / 3;align-self:start}
 .root .lay>.art{grid-column:2;grid-row:1;width:100%}
 .root .lay>.share{grid-column:3;grid-row:1 / 3;align-self:start}
 .root .lay>.blog-faq-section{grid-column:2;grid-row:2;width:100%}
 .root .side,.root .share{position:sticky;top:calc(var(--blog-nav-offset,85px) + 24px)}
 .root .side{max-height:calc(100dvh - var(--blog-nav-offset,85px) - 48px);scrollbar-width:thin}
}
.lay>.blog-faq-section{flex:1 0 100%;min-width:0;max-width:740px}
.lay>.blog-faq-section>.wrap{width:100%;padding-inline:0}

.share-actions{display:grid;grid-template-columns:repeat(2,44px);gap:10px}
.share .shb{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s,color .2s,background-color .2s,transform .25s cubic-bezier(.2,.7,.2,1)}
.share .shb svg{grid-area:1/1;transition:opacity .2s}
.share .shb:focus{outline:none}
.share .shb:focus-visible{outline:2px solid #3289ED;outline-offset:2px}
.share .shb .share-icon-check{opacity:0}
.share .shb.is-copied{border-color:#3289ED;color:#1C66C9}
.share .shb.is-copied .share-icon-copy{opacity:0}
.share .shb.is-copied .share-icon-check{opacity:1}
.dkm .share .shb:hover,.dkm .share .shb.is-copied{border-color:#3289ED;color:#5FD3FC}

/* Hidden with opacity, not visibility: the text is the control's accessible name. */
.share-tip{position:absolute;left:50%;bottom:calc(100% + 10px);z-index:5;transform:translate(-50%,6px);white-space:nowrap;background:linear-gradient(135deg,#05C4FD,#3289ED 50%,#7A28D4);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;line-height:1.3;padding:6px 9px;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.2,.7,.2,1)}
.share-tip::after{content:'';position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#3289ED}
.share .shb:focus-visible .share-tip,.share .shb.show-tip .share-tip{opacity:1;transform:translate(-50%,0)}
.share .shb.is-failed .share-tip{background:#B4232A}
.share .shb.is-failed .share-tip::after{border-top-color:#B4232A}
@media (hover:hover){.share .shb:hover .share-tip{opacity:1;transform:translate(-50%,0)}}
.share.tips-off .shb:not(.show-tip) .share-tip{opacity:0}

.share-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Right-column tips anchor to the control so they cannot pass the page edge. */
@media (min-width:1181px){
 .share .shb:nth-child(even) .share-tip{left:auto;right:0;transform:translateY(6px)}
 .share .shb:nth-child(even) .share-tip::after{left:auto;right:17px}
 .share .shb:nth-child(even):focus-visible .share-tip,.share .shb:nth-child(even).show-tip .share-tip{transform:none}
}
@media (min-width:1181px) and (hover:hover){.share .shb:nth-child(even):hover .share-tip{transform:none}}

@media (max-width:1180px){
 .root .share{align-items:center;gap:14px;max-width:740px;min-width:0}
 .share-actions{display:flex;flex-wrap:wrap}
 .share .shb:first-child .share-tip{left:0;transform:translateY(6px)}
 .share .shb:first-child .share-tip::after{left:17px;margin-left:0}
 .share .shb:first-child:focus-visible .share-tip,.share .shb:first-child.show-tip .share-tip{transform:none}
}
@media (max-width:1180px) and (hover:hover){.share .shb:first-child:hover .share-tip{transform:none}}

@media (prefers-reduced-motion:reduce){
 html:root{scroll-behavior:auto}
 .side a,.share .shb,.share .shb svg,.share-tip{transition:none}
}