/* Share + gift-link mockup. Built only from the site's own custom properties (--cno-*) and its existing .social-link look. */
.cno-share{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.625rem;font-family:var(--cno-base-font-family)}
.cno-share__item{position:relative}
.cno-share [hidden]{display:none!important}

/* gift pill: the site's small outlined pill button (.cno-button--small: 2rem high, .9375rem radius, bold 1rem) */
.cno-share__gift{display:none}
.cno-share[data-paywalled=true][data-subscriber=true] .cno-share__gift{display:block}
.cno-pill{display:inline-flex;align-items:center;gap:.5rem;height:2rem;padding:0 1rem 0 .75rem;border:1px solid var(--cno-gray-100);border-radius:.9375rem;background:transparent;color:var(--cno-gray-100);font:700 1rem/2rem var(--cno-base-font-family);cursor:pointer;white-space:nowrap;transition:color var(--cno-transition-speed-default) ease-in-out,background-color var(--cno-transition-speed-default) ease-in-out}
.cno-pill svg{width:1.125rem;height:1.125rem;fill:currentColor;flex:none}
.cno-pill:hover,.cno-pill[aria-expanded=true]{background:var(--cno-gray-1100)}
.cno-pill:focus-visible,.cno-iconbtn:focus-visible{outline:2px solid var(--cno-blue-dark);outline-offset:2px}

/* single share icon: same disc as .social-link in .share-links--gray-black */
.cno-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border:0;border-radius:9999px;background:var(--cno-gray-900);color:var(--cno-gray-100);cursor:pointer;transition:color var(--cno-transition-speed-default),background-color var(--cno-transition-speed-default)}
.cno-iconbtn svg{width:1rem;height:1rem;fill:currentColor}
.cno-iconbtn:hover,.cno-iconbtn[aria-expanded=true]{background:var(--cno-gray-800)}

/* popover */
.cno-pop{position:absolute;top:calc(100% + .625rem);left:0;z-index:40;width:18rem;max-width:calc(100vw - 2.5rem);padding:1rem 1.25rem .5rem;background:var(--cno-white);border:1px solid var(--cno-gray-950);border-radius:var(--cno-border-radius);box-shadow:0 .25rem .75rem rgba(0,0,0,.12);color:var(--cno-base-font-color);text-align:left}
.cno-pop::before{content:"";position:absolute;top:-.4375rem;left:var(--caret,1.25rem);width:.75rem;height:.75rem;background:var(--cno-white);border:solid var(--cno-gray-950);border-width:1px 0 0 1px;transform:rotate(45deg)}
.cno-pop h3{margin:0 0 .25rem;font:800 1rem/1.5rem var(--cno-base-font-family)}
.cno-pop p{margin:0 0 .75rem;font:400 1rem/1.5rem var(--cno-base-font-family);color:var(--cno-gray-500)}
.cno-pop ul{margin:0;padding:0;list-style:none}
.cno-pop li+li{border-top:1px solid var(--cno-gray-1000)}
.cno-pop__row{display:flex;align-items:center;gap:.75rem;width:100%;padding:.5rem 0;border:0;background:none;color:var(--cno-base-font-color);font:600 1rem/1.5rem var(--cno-base-font-family);text-decoration:none;text-align:left;cursor:pointer}
.cno-pop__row:hover{color:var(--cno-blue-dark)}
.cno-pop__row:focus-visible{outline:2px solid var(--cno-blue-dark);outline-offset:-2px}
.cno-pop__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.875rem;height:1.875rem;border-radius:9999px;background:var(--cno-gray-900);color:var(--cno-gray-100);transition:background-color var(--cno-transition-speed-default)}
.cno-pop__icon svg{width:.9rem;height:.9rem;fill:currentColor}
.cno-pop__row:hover .cno-pop__icon{background:var(--cno-gray-800)}

/* toast */
.cno-toast{position:fixed;left:50%;bottom:1.5rem;z-index:60;transform:translate(-50%,1rem);padding:.5rem 1.25rem;border-radius:1.25rem;background:var(--cno-gray-100);color:var(--cno-white);font:700 1rem/1.5rem var(--cno-base-font-family);opacity:0;pointer-events:none;transition:opacity var(--cno-transition-speed-default),transform var(--cno-transition-speed-default)}
.cno-toast.show{opacity:1;transform:translate(-50%,0)}

/* option B: the existing icon row plus the gift pill; native share replaces the row on phones */
.cno-share__native{display:none}
@media (max-width:639px){
  .cno-pill__label{display:none}
  .cno-pill{width:1.875rem;height:1.875rem;padding:0;justify-content:center;border-radius:9999px;line-height:1}
  .cno-share--b .share-links{display:none}
  .cno-share--b .cno-share__native{display:block}
}

/* mockup controls: not part of the page design */
.mock-controls{position:fixed;right:1rem;bottom:1rem;z-index:70;width:15rem;padding:.75rem 1rem;background:var(--cno-white);border:1px solid var(--cno-gray-950);border-radius:var(--cno-border-radius);box-shadow:0 .25rem .75rem rgba(0,0,0,.12);font:400 .875rem/1.25rem var(--cno-base-font-family);color:var(--cno-base-font-color)}
.mock-controls summary{cursor:pointer;list-style:none}
.mock-controls summary::-webkit-details-marker{display:none}
.mock-controls b{display:block;margin-bottom:.25rem;font-weight:800}
.mock-controls details:not([open]) b{margin:0}
.mock-controls label{display:flex;align-items:center;gap:.5rem;padding:.125rem 0;cursor:pointer}
.mock-controls nav{display:flex;gap:1rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--cno-gray-1000);font-weight:700}
.mock-controls nav a[aria-current=page]{color:var(--cno-base-font-color);text-decoration:underline}
@media (max-width:639px){.mock-controls{left:1rem;right:1rem;width:auto;bottom:.5rem}}